/* ==========================================================================
   Scene: an ARMHS progress note checked before it reaches the supervisor.
   Markup: template-parts/scene-document.php. Motion: assets/js/scene-document.js.

   The markup renders the finished frame. Every state the script steps
   through changes colour, opacity, transform or visibility only, and the
   footer stacks its two rows in one grid cell, so the scene never changes
   height between frames. The cursor and pause control come from home.css.
   ========================================================================== */

.h-scene-document {
    --sd-amber-bg: #F6E7CF;
    --sd-amber-ink: #8A5A12;
    --sd-amber-line: #B7791F;
    --sd-pad: 18px;
    position: relative;
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    color: var(--ink);
}

/* ---------- Note card ---------- */
.h-scene-document .sd-card {
    position: relative;
    display: grid;
    gap: 13px;
    min-width: 0;
    padding: var(--sd-pad);
    border: 1px solid var(--arasync-line);
    border-radius: 16px;
    background: var(--arasync-white);
    box-shadow: 0 30px 60px -32px rgba(30, 43, 58, 0.45);
    font: 400 0.82rem/1.5 var(--font-primary);
    color: var(--ink);
}

.h-scene-document .sd-head {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}
.h-scene-document .sd-head-text { display: grid; gap: 2px; min-width: 0; }
/* The code tag drops under the title when a narrow card has no room beside it. */
.h-scene-document .sd-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
}
.h-scene-document .sd-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--teal-soft);
    font: 600 0.76rem/1 var(--font-heading);
    letter-spacing: 0.04em;
    color: var(--teal-ink);
}
.h-scene-document .sd-title {
    font: 600 1rem/1.2 var(--font-heading);
    white-space: nowrap;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.h-scene-document .sd-code {
    padding: 4px 7px;
    border-radius: 5px;
    background: var(--arasync-mist);
    font: 500 0.66rem/1 var(--font-mono);
    white-space: nowrap;
    color: var(--teal-ink);
}
.h-scene-document .sd-visit {
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--ink-3);
}

.h-scene-document .sd-label {
    font: 600 0.64rem/1.3 var(--font-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ---------- Gate checks: they pass before the note opens ---------- */
.h-scene-document .sd-gates {
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--arasync-line);
}
.h-scene-document .sd-gates ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.h-scene-document .sd-gate {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--arasync-mist);
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
    transition: color 0.3s ease;
}
.h-scene-document .sd-gate small {
    font-size: 0.72rem;
    white-space: nowrap;
    color: var(--ink-3);
    transition: opacity 0.35s ease;
}
.h-scene-document .sd-tick {
    position: relative;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--arasync-primary);
    color: var(--arasync-white);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.h-scene-document .sd-tick svg { width: 12px; height: 12px; stroke-width: 3; }
.h-scene-document .sd-tick path {
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.35s ease 0.1s;
}

.h-scene-document .sd-gate[data-s="pending"],
.h-scene-document .sd-gate[data-s="active"] { color: var(--ink-3); }
.h-scene-document .sd-gate[data-s="pending"] small,
.h-scene-document .sd-gate[data-s="active"] small { opacity: 0; }
.h-scene-document .sd-gate[data-s="pending"] .sd-tick,
.h-scene-document .sd-gate[data-s="active"] .sd-tick {
    background: var(--arasync-white);
    box-shadow: inset 0 0 0 1.5px var(--arasync-gray-300);
}
.h-scene-document .sd-gate[data-s="pending"] .sd-tick path,
.h-scene-document .sd-gate[data-s="active"] .sd-tick path { stroke-dashoffset: 24; transition: none; }
.h-scene-document .sd-gate[data-s="active"] .sd-tick { box-shadow: inset 0 0 0 1.5px var(--arasync-primary); }
.h-scene-document .sd-gate[data-s="active"] .sd-tick::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid var(--arasync-primary);
    border-radius: 50%;
    animation: sd-ring 0.9s ease-out infinite;
}

/* ---------- Session note ---------- */
.h-scene-document .sd-note {
    display: grid;
    gap: 6px;
    transition: opacity 0.4s ease;
}
/* Until both checks pass, the note and its sign button stay dimmed. */
.h-scene-document .sd-card.is-locked .sd-note,
.h-scene-document .sd-card.is-locked .sd-foot { opacity: 0.4; }

/* The min-height leaves room for the suggestion card under the flagged line on wide
   cards; the hidden copy of the finished note (.sd-ghost) holds the field at its final
   height at every width. Greedy wrapping keeps words from jumping lines while typing. */
.h-scene-document .sd-field {
    display: grid;
    min-height: 110px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--arasync-line);
    border-radius: 10px;
    background: var(--arasync-gray-50);
    font-size: 0.84rem;
    line-height: 1.6;
    text-wrap: wrap;
    overflow-wrap: break-word;
    color: var(--ink);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.h-scene-document .sd-note.is-typing .sd-field {
    border-color: var(--arasync-primary);
    background: var(--arasync-white);
    box-shadow: 0 0 0 3px rgba(47, 125, 122, 0.14);
}

.h-scene-document .sd-live,
.h-scene-document .sd-ghost { grid-area: 1 / 1; min-width: 0; }
.h-scene-document .sd-ghost { visibility: hidden; }

/* Zero net width, so showing it never re-wraps the text. */
.h-scene-document .sd-caret {
    display: inline-block;
    width: 0;
    height: 1.2em;
    margin-right: -1.5px;
    border-left: 1.5px solid var(--arasync-primary);
    vertical-align: -0.25em;
    visibility: hidden;
}
.h-scene-document .sd-note.is-typing .sd-caret {
    visibility: visible;
    animation: sd-blink 1s steps(1) infinite;
}

.h-scene-document .sd-flag {
    border-radius: 3px;
    background: rgba(246, 231, 207, 0.75);
    text-decoration: underline wavy var(--sd-amber-line);
    text-decoration-thickness: 1.5px;
    text-decoration-skip-ink: none;
    text-underline-offset: 3px;
    animation: sd-flag 0.5s ease both;
}

/* ---------- Suggestion card (placed by the script, under or over the flagged line) ---------- */
.h-scene-document .sd-suggest {
    --arrow-x: 28px;
    position: absolute;
    z-index: 2;
    top: 0;
    left: var(--sd-pad);
    display: grid;
    gap: 5px;
    width: min(372px, calc(100% - 2 * var(--sd-pad)));
    padding: 10px 14px;
    border: 1px solid var(--arasync-line);
    border-radius: 12px;
    background: var(--arasync-white);
    box-shadow: 0 22px 44px -20px rgba(30, 43, 58, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.h-scene-document .sd-suggest.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}
.h-scene-document .sd-suggest::before {
    content: "";
    position: absolute;
    top: -6px;
    left: var(--arrow-x);
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--arasync-line);
    border-left: 1px solid var(--arasync-line);
    background: var(--arasync-white);
    transform: translateX(-50%) rotate(45deg);
}
.h-scene-document .sd-suggest.is-above { transform: translateY(-6px); }
.h-scene-document .sd-suggest.is-above.is-on { transform: none; }
.h-scene-document .sd-suggest.is-above::before {
    top: auto;
    bottom: -6px;
    border: 0;
    border-right: 1px solid var(--arasync-line);
    border-bottom: 1px solid var(--arasync-line);
}

.h-scene-document .sd-suggest-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font: 600 0.6rem/1 var(--font-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-ink);
}
.h-scene-document .sd-suggest-tag svg { flex: none; width: 12px; height: 12px; }
.h-scene-document .sd-suggest b {
    font: 600 0.82rem/1.35 var(--font-heading);
    color: var(--ink);
}
.h-scene-document .sd-suggest p {
    margin: 0;
    padding-left: 9px;
    border-left: 2px solid var(--teal-soft);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--ink-2);
}
.h-scene-document .sd-suggest-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}
.h-scene-document .sd-use,
.h-scene-document .sd-keep {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 8px;
    font: 600 0.72rem/1 var(--font-primary);
    white-space: nowrap;
}
.h-scene-document .sd-use {
    background: var(--arasync-primary);
    color: var(--arasync-white);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.h-scene-document .sd-keep {
    box-shadow: inset 0 0 0 1px var(--arasync-line);
    color: var(--ink-2);
}

/* ---------- Footer: draft row and signed row share one grid cell ---------- */
.h-scene-document .sd-foot {
    display: grid;
    padding-top: 12px;
    border-top: 1px solid var(--arasync-line);
    transition: opacity 0.4s ease;
}
.h-scene-document .sd-draft,
.h-scene-document .sd-done {
    grid-area: 1 / 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}
.h-scene-document .sd-foot[data-v="done"] .sd-draft,
.h-scene-document .sd-foot[data-v="draft"] .sd-done {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.h-scene-document .sd-foot[data-v="draft"] .sd-done { transform: translateY(6px); }

.h-scene-document .sd-saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--ink-3);
    transition: opacity 0.3s ease;
}
.h-scene-document .sd-saved::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--arasync-primary-light);
}
.h-scene-document .sd-saved.is-off { opacity: 0; }

.h-scene-document .sd-sign {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 9px 14px;
    border-radius: 9px;
    background: var(--arasync-primary);
    font: 600 0.76rem/1 var(--font-primary);
    white-space: nowrap;
    color: var(--arasync-white);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.h-scene-document .sd-sign svg { flex: none; width: 14px; height: 14px; }
.h-scene-document .sd-use.is-pressed,
.h-scene-document .sd-sign.is-pressed { transform: scale(0.94); filter: brightness(1.12); }

.h-scene-document .sd-signed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
}
.h-scene-document .sd-signed svg { flex: none; width: 15px; height: 15px; color: var(--arasync-primary); }
.h-scene-document .sd-review {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--teal-soft);
    font: 600 0.68rem/1 var(--font-primary);
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--teal-ink);
}
.h-scene-document .sd-review::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--arasync-primary);
}

/* ---------- Cursor press, scoped to the arrow so the cursor stays on its target ---------- */
.h-scene-document .h-cursor.sd-press path {
    transform-box: fill-box;
    transform-origin: 15% 10%;
    animation: sd-press 0.22s ease;
}

/* ---------- Caption ---------- */
.h-scene-document .h-scene-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--teal-ink);
}

@keyframes sd-ring {
    from { transform: scale(0.85); opacity: 0.7; }
    to { transform: scale(1.4); opacity: 0; }
}

@keyframes sd-press {
    50% { transform: scale(0.8); }
}

@keyframes sd-blink {
    50% { opacity: 0; }
}

@keyframes sd-flag {
    from { background-color: transparent; text-decoration-color: transparent; }
}

/* ---------- Narrow cards ---------- */
@media (max-width: 560px) {
    .h-scene-document { --sd-pad: 16px; }
    .h-scene-document .sd-card { gap: 12px; }
    .h-scene-document .sd-suggest { padding: 10px 12px; }
}

@media (max-width: 480px) {
    .h-scene-document .sd-gate { grid-template-columns: 20px minmax(0, 1fr); row-gap: 0; }
    .h-scene-document .sd-gate small { grid-column: 2; }
    .h-scene-document .sd-suggest-actions { gap: 6px; }
    .h-scene-document .sd-use,
    .h-scene-document .sd-keep { padding: 7px 9px; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .h-scene-document *,
    .h-scene-document *::before,
    .h-scene-document *::after { animation: none !important; transition: none !important; }
}