/* RELAY — the phone app.
   Palette: THE DECK's dark grounds and neutrals (Commerce OS\hub\static\
   style.css), adopted so the relay reads as the same house as the deck JT
   already looks at daily. Two deliberate departures:

   1. NO BRAND ACCENT HUE. The deck's amber is Commerce's, and the relay is the
      neutral component carrying all three ventures. Emphasis is carried by
      --bone and by weight; colour appears ONLY where it means something:
      green = executed, red = failed. On a queue whose entire job is "what
      still needs me", a decorative accent competes with the one signal.
   2. NO engineering-paper grid, NO vignette. Those are texture for a desktop
      instrument face; on a dense phone queue they are noise behind text.

   Type: Inter (self-hosted Latin subsets, 4 weights, ~96KB, cached by the
   service worker) for everything, and a system mono for DATA only —
   timestamps, counts, page numbers, sign phrases. The deck's mono stack is
   already a system stack, so this matches it exactly. No display face in UI
   labels: that was the console's tell.

   CONTRAST, measured against --deck (#131517):
     --bone     15.4:1   body, headings, emphasis
     --bone-2    7.8:1   body, secondary — SAFE for prose
     --muted     3.9:1   BELOW 4.5 — meta and large text ONLY, never body copy
   If you are about to set --muted on a sentence, use --bone-2 instead. */

@font-face{font-family:Inter;src:url('./fonts/inter-400.woff2') format('woff2');
           font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('./fonts/inter-500.woff2') format('woff2');
           font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('./fonts/inter-600.woff2') format('woff2');
           font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('./fonts/inter-700.woff2') format('woff2');
           font-weight:700;font-display:swap}

:root{
  --void:#0B0C0D; --deck:#131517; --deck-2:#191C1F; --raise:#1F2327;
  --line:#24282C; --line-2:#333A40;
  --bone:#E9E5DD; --bone-2:#ADA79D; --muted:#6C737A;
  --green:#5B9E76; --red:#C9432F; --red-2:#E05A44; --red-dim:#5E2418;
  /* Placeholders get their own token because the browser default fails WCAG
     on this ground, and --muted (3.9:1) would too. Measured 4.57:1 against
     --deck, the lightest background any input sits on. */
  --placeholder:#7A7E84;

  --sans:Inter,system-ui,-apple-system,sans-serif;
  --mono:'Cascadia Mono','JetBrains Mono',ui-monospace,Consolas,monospace;

  /* Semantic z-scale. Never an arbitrary 999. */
  --z-sticky:10; --z-bar:20; --z-overlay:30; --z-toast:40; --z-gate:50;

  --ease:cubic-bezier(.16,1,.3,1);      /* ease-out-quint */
  --fast:150ms; --med:220ms;

  --bar-h:calc(58px + env(safe-area-inset-bottom));
}

*{margin:0;box-sizing:border-box}

/* The HTML `hidden` attribute only gets display:none from the UA stylesheet,
   so ANY author `display` rule silently beats it. #gate sets display:flex,
   which meant `gate.hidden = true` did literally nothing: the app signed in
   correctly, loaded every card, and stayed invisible behind a sign-in panel
   that could not be dismissed. Verified from the server logs on 2026-08-30 --
   rpc/is_owner, cards, briefs and qc_pages all returned 200 while the screen
   still showed the email form.
   This rule must stay above every component. !important is correct here: it
   is a reset restoring UA behaviour the cascade took away, not a specificity
   fight. */
[hidden]{display:none !important}

html{background:var(--void);-webkit-text-size-adjust:100%}
body{
  background:var(--void);color:var(--bone);
  font:400 15px/1.5 var(--sans);
  min-height:100dvh;overflow-x:hidden;
  padding-bottom:var(--bar-h);
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
       -webkit-tap-highlight-color:transparent}
input,textarea{font:inherit;color:inherit}
::placeholder{color:var(--placeholder);opacity:1}   /* Firefox dims it otherwise */
:focus-visible{outline:2px solid var(--bone);outline-offset:2px;border-radius:3px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── boot failure ─────────────────────────────────────────────────────── */
#bootfail{background:var(--red-dim);color:var(--bone);padding:14px 16px;
          font-size:14px;border-bottom:1px solid var(--red)}

/* ── masthead ─────────────────────────────────────────────────────────── */
#mast{position:sticky;top:0;z-index:var(--z-sticky);
      background:var(--void);border-bottom:1px solid var(--line);
      padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.mast-row{display:flex;align-items:center;gap:10px}
#mast h1{font-size:15px;font-weight:700;letter-spacing:.16em;margin:0}
#lamp{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;
      transition:background var(--med) var(--ease)}
#lamp.live{background:var(--green)}
#lamp.down{background:var(--red)}
#clock{margin-left:auto;font-size:11px;color:var(--muted);letter-spacing:.04em}
#stale{margin-top:8px;padding:8px 10px;border:1px solid var(--red-dim);
       border-radius:4px;background:#1a0f0c;color:var(--red-2);font-size:13px}

/* ── screens ──────────────────────────────────────────────────────────── */
.screen{padding:14px 16px 24px;max-width:640px;margin:0 auto}
.lede{color:var(--bone-2);font-size:14px;margin-bottom:14px;text-wrap:pretty}

/* ── briefs: one line each, tap to expand ─────────────────────────────── */
.briefs{display:flex;flex-direction:column;gap:1px;background:var(--line);
        border:1px solid var(--line);border-radius:6px;overflow:hidden;
        margin-bottom:18px}
.brief{background:var(--deck);width:100%;text-align:left;padding:11px 13px;
       display:block;transition:background var(--fast) var(--ease)}
.brief:hover{background:var(--deck-2)}
.brief-top{display:flex;align-items:baseline;gap:9px}
.brief-v{font-size:11px;font-weight:600;letter-spacing:.12em;
         text-transform:uppercase;color:var(--bone-2);flex:none}
.brief-h{font-size:13.5px;color:var(--bone-2);overflow:hidden;
         text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.brief.open .brief-h{white-space:normal;overflow:visible}
.brief-run{font-size:10px;letter-spacing:.08em;flex:none;color:var(--muted)}
.brief-run.ok{color:var(--green)}
.brief-run.error{color:var(--red-2)}
.brief-run.blocked{color:var(--bone-2)}
.brief-body{margin:8px 0 0;padding-left:0;list-style:none;display:none}
.brief.open .brief-body{display:block}
.brief-body li{color:var(--bone-2);font-size:13.5px;margin:5px 0;
               padding-left:13px;position:relative;text-wrap:pretty}
.brief-body li::before{content:"";position:absolute;left:0;top:.6em;
                       width:5px;height:1px;background:var(--muted)}

/* ── segmented control ────────────────────────────────────────────────── */
.segmented{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
           margin-bottom:16px;padding-bottom:2px}
.segmented::-webkit-scrollbar{display:none}
.seg{flex:none;min-height:36px;padding:7px 13px;border:1px solid var(--line-2);
     border-radius:5px;background:var(--deck);color:var(--bone-2);
     font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px;
     transition:background var(--fast) var(--ease),
                border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.seg:hover{background:var(--deck-2)}
.seg.on{background:var(--raise);border-color:var(--bone-2);color:var(--bone)}
.seg .n{font-family:var(--mono);font-size:11px;color:var(--muted)}
.seg.on .n{color:var(--bone)}

/* ── cards ────────────────────────────────────────────────────────────── */
.cards{display:flex;flex-direction:column;gap:10px}
.card{background:var(--deck);border:1px solid var(--line);border-radius:6px;
      padding:13px}
/* Status reads from the LEFT EDGE of the title row, not a coloured side-stripe. */
.card-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--bone)}
.card.answered .dot,.card.routed .dot{background:var(--bone-2)}
.card.executed .dot{background:var(--green)}
.card-meta{font-size:10.5px;font-weight:600;letter-spacing:.11em;
           text-transform:uppercase;color:var(--muted)}
.card-due{margin-left:auto;font-family:var(--mono);font-size:11px;
          color:var(--bone-2)}
.card-due.soon{color:var(--red-2)}
.card h3{font-size:15.5px;font-weight:600;line-height:1.32;margin-bottom:5px;
         text-wrap:balance}
.card-body{color:var(--bone-2);font-size:13.5px;white-space:pre-wrap;
           overflow-wrap:anywhere;text-wrap:pretty}
.card-state{margin-top:9px;font-size:12.5px;color:var(--bone-2)}
.card.executed .card-state{color:var(--green)}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.btn{flex:1 1 42%;min-height:44px;padding:10px 12px;border-radius:5px;
     border:1px solid var(--line-2);background:var(--deck-2);color:var(--bone-2);
     font-size:13.5px;font-weight:500;
     transition:background var(--fast) var(--ease),
                border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.btn:hover:not(:disabled){background:var(--raise);color:var(--bone)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{background:var(--raise);border-color:var(--bone-2);color:var(--bone);
             font-weight:600}
.btn.primary:hover:not(:disabled){background:#2a2f34}
.btn.on{background:var(--raise);border-color:var(--bone);color:var(--bone)}
.btn.ghost{flex:0 1 auto}
.btn.danger{border-color:var(--red-dim);color:var(--red-2)}
.btn:disabled{opacity:.4;cursor:default}
/* The phrase field must be wide enough to READ the phrase it is asking for —
   at 375px a flex:1 button stole half the row and "type SIGN v005" truncated
   to "type SIG". The button sizes to its own content; the field takes the rest. */
.signrow{display:flex;gap:8px;margin-top:11px}
.signrow input{flex:1 1 auto;min-width:0;background:var(--void);
               border:1px solid var(--line-2);border-radius:5px;padding:11px;
               font-family:var(--mono);font-size:16px;letter-spacing:.02em}
.signrow .btn{flex:0 0 auto;padding-left:20px;padding-right:20px}
.notewrap{margin-top:9px}
.notewrap input{width:100%;background:var(--void);border:1px solid var(--line-2);
                border-radius:5px;padding:11px;font-size:16px}
.pending{margin-top:9px;font-size:12.5px;color:var(--bone);display:flex;
         align-items:center;gap:8px}
/* One `undo` treatment, used in the card's pending line and in the SAY log.
   It was only defined under .pending, so the SAY log's copy inherited 15px
   body size and out-shouted the status it sits next to. */
.undo{font-size:12.5px;color:var(--bone-2);text-decoration:underline;
      padding:6px 2px;min-height:0;flex:0 0 auto;border:0;background:none}
.undo:hover{color:var(--bone)}

/* ── QC grid ──────────────────────────────────────────────────────────── */
.qcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qcth{position:relative;aspect-ratio:896/1200;border:1px solid var(--line-2);
      border-radius:4px;overflow:hidden;background:var(--deck-2);padding:0}
.qcth img{width:100%;height:100%;object-fit:cover;display:block}
.qcth .pn{position:absolute;left:0;bottom:0;padding:3px 6px;font-family:var(--mono);
          font-size:10px;background:rgba(11,12,13,.82);color:var(--bone-2)}

/* ── judge overlay ─────────────────────────────────────────────────────────
   The ONE screen that abandons the house palette, on purpose. You are judging
   black line weight on white paper; a tinted surround changes how heavy those
   lines read, which is exactly the judgment being made. Print and photo review
   tools use a neutral mat for the same reason.

   So: no --bone, no --green, no --red, no house token of any kind below this
   line. Pure neutral greys, defined locally so a future palette change to the
   rest of the app cannot leak in here. */
#judge{
  --j-void:#000; --j-mat:#1a1a1a; --j-chrome:#262626; --j-edge:#3a3a3a;
  --j-ink:#ededed; --j-dim:#9a9a9a;
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:var(--j-void);color:var(--j-ink);
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
}
.j-top{display:flex;align-items:center;gap:12px;padding:10px 14px;
       border-bottom:1px solid var(--j-edge);flex:none}
.j-x{font-size:13px;font-weight:600;color:var(--j-dim);padding:8px 4px;min-height:40px}
.j-title{font-size:12px;color:var(--j-dim);letter-spacing:.04em;
         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.j-count{margin-left:auto;font-size:12px;color:var(--j-dim)}

/* The mat: a neutral field the artwork sits on, never touching the edges. */
.j-stage{flex:1;min-height:0;background:var(--j-mat);display:flex;
         align-items:center;justify-content:center;padding:10px;overflow:auto}
.j-img,.j-vid{max-width:100%;max-height:100%;object-fit:contain;display:block;
              background:#fff}
.j-vid{background:#000}

.j-bar{flex:none;display:flex;gap:8px;padding:10px 12px;
       background:var(--j-chrome);border-top:1px solid var(--j-edge)}
.j-btn{min-height:48px;border:1px solid var(--j-edge);border-radius:5px;
       background:#2f2f2f;color:var(--j-ink);font-size:14px;font-weight:600;
       padding:0 14px;transition:background var(--fast) var(--ease)}
.j-btn:hover{background:#383838}
.j-btn[data-act="prev"],.j-btn[data-act="next"]{flex:0 0 46px;font-size:20px;
       color:var(--j-dim)}
.j-ok,.j-no{flex:1}
.j-ok{background:#343434}
.j-no{background:#2a2a2a;color:var(--j-dim)}

/* Reason panel — revealed only after choosing rework, never up front. */
.j-note{flex:none;background:var(--j-chrome);border-top:1px solid var(--j-edge);
        padding:12px}
.j-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.j-tag{border:1px solid var(--j-edge);border-radius:4px;background:#232323;
       color:var(--j-dim);font-size:12px;padding:8px 10px;min-height:36px}
.j-tag.on{background:#3d3d3d;border-color:var(--j-dim);color:var(--j-ink)}
.j-text{width:100%;background:var(--j-void);border:1px solid var(--j-edge);
        border-radius:5px;padding:11px;font-size:16px;color:var(--j-ink)}
.j-confirm{display:flex;gap:8px;margin-top:10px}
.j-confirm .j-btn{flex:1}
.j-go{background:#3d3d3d}

/* Cut notes — only ever shown against a moving picture. */
.j-cut{flex:none;background:var(--j-chrome);border-top:1px solid var(--j-edge);
       padding:10px 12px}
.j-at{width:100%;font-family:var(--mono);font-size:13px;min-height:44px}
.j-cutrow{display:flex;gap:8px;margin-top:8px}
.j-cutrow .j-cuttext{flex:1;min-width:0;background:var(--j-void);
       border:1px solid var(--j-edge);border-radius:5px;padding:11px;
       font-size:16px;color:var(--j-ink)}
.j-cutrow .j-btn{flex:0 0 auto}
.j-cutlog{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.j-cutitem{font-size:12.5px;color:var(--j-dim)}
.j-cutitem .mono{color:var(--j-ink);margin-right:8px}

/* Verdict confirmation: a shape, not a colour — the eye stays calibrated. */
.j-mark{position:fixed;inset:0;display:flex;align-items:center;
        justify-content:center;font-size:96px;color:var(--j-ink);
        pointer-events:none;opacity:0;text-shadow:0 2px 20px rgba(0,0,0,.9);
        transition:opacity var(--fast) var(--ease)}
.j-mark.show{opacity:.92}

/* ── decision controls ─────────────────────────────────────────────────────
   The hierarchy JT asked for, made visible: a binary pair reads as two equal
   full-width answers, a multi-choice as a wrapped row of smaller ones, and
   free text as a field. "Something else" is deliberately quiet — always
   reachable, never competing with the answer he can give with one tap. */
.acts.binary{display:flex;gap:8px}
.acts.binary .btn{flex:1;min-height:48px;font-size:15px}
.acts.wrap{display:flex;flex-wrap:wrap;gap:7px}
.acts.wrap .btn{flex:0 1 auto;min-height:42px}
.freerow{display:flex;gap:8px}
.freerow input{flex:1;min-width:0;background:var(--void);
  border:1px solid var(--line-2);border-radius:5px;padding:11px;font-size:16px}
.saymore{display:block;width:100%;margin-top:9px;padding:7px 0;
  font-size:12.5px;color:var(--muted);text-align:left;
  transition:color var(--fast) var(--ease)}
.saymore:hover{color:var(--bone-2)}

/* ── waiting on someone else ───────────────────────────────────────────────
   Not decisions. A checklist row that says what is happening and how much
   longer, because "18h in of 24-72h" and "14h over" are different situations
   and only one of them is worth chasing. */
.sec-h{margin:26px 0 8px;font-size:11.5px;font-weight:600;letter-spacing:.1em;
       text-transform:uppercase;color:var(--muted)}
.waitlist{display:flex;flex-direction:column;gap:1px;background:var(--line);
          border:1px solid var(--line);border-radius:6px;overflow:hidden}
.waititem{background:var(--deck);padding:11px 13px;display:flex;
          align-items:center;gap:10px}
.wait-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.wait-dot.late{background:var(--red-2)}
.wait-t{flex:1;font-size:14px;color:var(--bone-2);min-width:0}
.wait-tag{flex:none;font-size:11px;color:var(--muted)}
.wait-tag.late{color:var(--red-2)}

/* ── CUT review ────────────────────────────────────────────────────────────
   Not the judge overlay's neutral mat: you are judging pacing, timing and
   whether a graphic lands on a beat, not line weight on paper. House palette
   is fine here; what matters is that the player is big and the note list is
   scannable at a glance. */
.cutwrap{background:#000;border:1px solid var(--line);border-radius:6px;
         overflow:hidden;margin-bottom:12px}
#cutvid{width:100%;max-height:46vh;display:block;background:#000}
.cut-at{width:100%;flex:none;font-family:var(--mono);font-size:13.5px}
.cutnote{margin-top:12px;background:var(--deck);border:1px solid var(--line);
         border-radius:6px;padding:12px}
.cut-kinds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.cut-kinds .j-tag{border:1px solid var(--line-2);border-radius:4px;
                  background:var(--deck-2);color:var(--bone-2);font-size:12.5px;
                  padding:8px 12px;min-height:38px}
.cut-kinds .j-tag.on{background:var(--raise);border-color:var(--bone);color:var(--bone)}
#cuttext{width:100%;background:var(--void);border:1px solid var(--line-2);
         border-radius:5px;padding:11px;font-size:16px}
.cut-h{margin:20px 0 8px;font-size:12px;font-weight:600;letter-spacing:.1em;
       text-transform:uppercase;color:var(--muted)}
.cutlist{display:flex;flex-direction:column;gap:1px;background:var(--line);
         border:1px solid var(--line);border-radius:6px;overflow:hidden}
.cutitem{background:var(--deck);padding:10px 12px;display:flex;gap:10px;
         align-items:flex-start}
.cutitem.local{background:var(--deck-2)}
.cut-seek{flex:0 0 auto;font-size:12px;color:var(--bone);padding:2px 0;
          min-height:0;text-decoration:underline}
.cut-kind{flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.08em;
          text-transform:uppercase;color:var(--muted);padding-top:2px}
.cut-text{flex:1;font-size:13.5px;color:var(--bone-2);overflow-wrap:anywhere}
.cut-assets{display:block;font-family:var(--mono);font-size:10.5px;
            color:var(--muted);margin-top:3px}
.cutitem .st{flex:0 0 auto;font-size:10.5px;padding-top:3px}

/* ── SAY ──────────────────────────────────────────────────────────────── */
.sayrow textarea{width:100%;background:var(--deck);border:1px solid var(--line-2);
                 border-radius:6px;padding:12px;font-size:16px;line-height:1.45;
                 resize:vertical;margin-bottom:14px}
.sayacts{display:flex;gap:8px;margin-top:2px}
.saylog{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.qitem{background:var(--deck);border:1px solid var(--line);border-radius:5px;
       padding:10px 12px;display:flex;gap:10px;align-items:flex-start}
.qitem .txt{flex:1;font-size:13.5px;color:var(--bone-2);overflow-wrap:anywhere}
.qitem .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
           flex:none;color:var(--muted);padding-top:2px}
.qitem .st.sent{color:var(--green)}
.qitem .st.wait{color:var(--bone)}

/* ── empty + skeleton ─────────────────────────────────────────────────── */
/* grid-column spans the whole track set: an empty state rendered INTO a
   3-column grid otherwise becomes one 1fr cell and wraps a sentence into a
   ribbon one word wide. max-width keeps the prose inside a readable measure
   even when the container is wide. */
.empty{grid-column:1 / -1;padding:44px 8px;text-align:center;
       max-width:34ch;margin-inline:auto}
.empty b{display:block;font-size:15px;font-weight:600;margin-bottom:7px}
.empty span{color:var(--bone-2);font-size:13.5px;text-wrap:pretty}
.skel{background:var(--deck);border:1px solid var(--line);border-radius:6px;
      padding:13px;display:flex;flex-direction:column;gap:9px}
.skel i{display:block;height:11px;border-radius:3px;background:var(--line-2);
        animation:pulse 1.5s var(--ease) infinite}
.skel i:nth-child(1){width:38%}
.skel i:nth-child(2){width:82%}
.skel i:nth-child(3){width:61%}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.9}}

/* ── auth gate ────────────────────────────────────────────────────────── */
#gate{position:fixed;inset:0;z-index:var(--z-gate);background:var(--void);
      display:flex;align-items:center;justify-content:center;padding:24px}
.gate-in{max-width:340px;width:100%}
.gate-in h2{font-size:17px;font-weight:700;letter-spacing:.16em;margin-bottom:10px}
.gate-in p{color:var(--bone-2);font-size:14px;margin-bottom:18px;text-wrap:pretty}
.gate-in input{width:100%;background:var(--deck);border:1px solid var(--line-2);
               border-radius:5px;padding:13px;font-size:16px;margin-bottom:10px}
.gate-in .btn{width:100%;flex:none}
#gatemsg{margin-top:14px;font-size:13.5px;color:var(--bone-2)}
#gatemsg.bad{color:var(--red-2)}

/* ── bottom bar ───────────────────────────────────────────────────────── */
#bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);
     display:flex;background:var(--deck);border-top:1px solid var(--line);
     padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;min-height:58px;display:flex;flex-direction:column;
     align-items:center;justify-content:center;gap:2px;color:var(--muted);
     transition:color var(--fast) var(--ease)}
.tab.on{color:var(--bone)}
.tab-l{font-size:12px;font-weight:600;letter-spacing:.06em}
.tab-n{font-size:10.5px;min-height:13px;color:var(--muted)}
.tab.on .tab-n{color:var(--bone-2)}

/* ── toast ────────────────────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:calc(var(--bar-h) + 14px);
       transform:translate(-50%,10px);z-index:var(--z-toast);
       background:var(--raise);border:1px solid var(--line-2);border-radius:5px;
       padding:10px 15px;font-size:13.5px;color:var(--bone);max-width:88vw;
       opacity:0;pointer-events:none;
       transition:opacity var(--med) var(--ease),transform var(--med) var(--ease)}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
                       animation-iteration-count:1 !important;
                       transition-duration:.01ms !important}
  #toast{transform:translate(-50%,0)}
  .btn:active:not(:disabled){transform:none}
}

/* CUT — the Shorts QC lane (JT 2026-08-31). A Short is a different RENDER of
   the same scenes, so the only way to answer "do they match" is to have both
   on one screen; these collapse so the long form stays the default view. */
.cut-tabs .seg{max-width:none;white-space:nowrap}
.cut-hint{font-weight:400;opacity:.6}
.shortlist{display:flex;flex-direction:column;gap:8px;margin:10px 0 18px}
.shortitem{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.shortitem.open{border-color:var(--red)}
.shorthead{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;
  background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.short-slug{flex:1;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.short-chev{opacity:.55;font-size:1.1em}
.shortwrap{padding:0 13px 13px}
/* 9:16 — capped so a Short never pushes the note controls off the screen */
.shortwrap video{width:100%;max-height:62vh;background:#000;display:block;
  border-radius:4px;object-fit:contain}
.short-note{width:100%;margin-top:9px}
.short-files{opacity:.6;font-weight:400}