/* Gengis PM iteration-1 component library.
   Extracted verbatim from design/mockups/01-styleguide.html (lines 31-284),
   minus styleguide-only scaffolding (which lives in styleguide-only.css).
   Tokens live in tokens.css — load that first. */

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}

/* Shell */
.topbar{height:48px;border-bottom:.5px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:24px;background:var(--bg-page);position:sticky;top:0;z-index:10}
.wordmark{font-weight:500;font-size:14px;letter-spacing:.02em}
.wordmark .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-primary);margin-right:8px;transform:translateY(-1px)}
.nav{display:flex;gap:2px;flex:1}
.nav a{font-size:13px;color:var(--text-secondary);padding:6px 10px;border-radius:var(--radius-sm);text-decoration:none}
.nav a.active{color:var(--text-primary);background:var(--bg-surface)}
.nav a:hover{color:var(--text-primary)}
.util{display:flex;align-items:center;gap:6px}
.kbd{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);border:.5px solid var(--border);padding:2px 6px;border-radius:4px;background:var(--bg-surface)}
.btn-ghost{font-size:12px;color:var(--text-secondary);background:transparent;border:.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:5px 10px;cursor:pointer;font-family:inherit}
.btn-ghost:hover{background:var(--bg-surface);color:var(--text-primary)}
.avatar{width:24px;height:24px;border-radius:50%;background:var(--bg-elevated);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-secondary);font-weight:500}

main{max-width:none;margin:0 auto;padding:24px clamp(24px,3vw,64px) 96px}
.breadcrumb{font-size:12px;color:var(--text-tertiary);margin:0 0 8px;font-family:var(--font-mono)}
.breadcrumb a{color:var(--text-tertiary);text-decoration:none}
.breadcrumb a:hover{color:var(--text-secondary)}
.breadcrumb .sep{margin:0 6px;opacity:.5}
.breadcrumb .here{color:var(--text-secondary)}

h1{font-size:22px;font-weight:500;margin:0 0 4px;letter-spacing:-.01em}

/* Components ============================================== */

/* StatusPill */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 9px;border-radius:999px;letter-spacing:.02em;font-weight:500;font-family:var(--font-sans);line-height:1}
.pill .dt{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.9}
.pill.blocked{background:var(--pill-blocked-bg);color:var(--pill-blocked-text)}
.pill.review{background:var(--pill-review-bg);color:var(--pill-review-text)}
.pill.active{background:var(--pill-active-bg);color:var(--pill-active-text)}
.pill.approved{background:var(--pill-approved-bg);color:var(--pill-approved-text)}
.pill.queued{background:var(--pill-queued-bg);color:var(--pill-queued-text)}
.pill.delivered{background:var(--pill-delivered-bg);color:var(--pill-delivered-text)}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill-row .lbl{font-size:11px;color:var(--text-tertiary);letter-spacing:.05em;text-transform:uppercase;min-width:88px}
.pill-row + .pill-row{margin-top:10px}

/* UrgencyTier */
.urg-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(239,159,39,.08);color:#F5C4B3;border:.5px solid rgba(239,159,39,.25);font-weight:500}
.urg-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;border-radius:var(--radius-md);background:rgba(239,159,39,.10);border-left:2px solid var(--warn);font-size:12px;color:#F5C4B3}
.urg-strip .right{font-family:var(--font-mono);font-size:11px;color:var(--warn)}
.urg-alert{padding:14px 16px;border-radius:var(--radius-md);background:rgba(226,75,74,.08);border:.5px solid rgba(226,75,74,.4);border-left:2px solid var(--danger)}
.urg-alert .h{display:flex;align-items:center;gap:8px;font-size:13px;color:#F0997B;font-weight:500;margin:0 0 4px}
.urg-alert .h .ic{color:var(--danger)}
.urg-alert .body{font-size:12px;color:var(--text-secondary);margin:0 0 10px}
.urg-alert .body b{color:#F0997B;font-weight:500;font-family:var(--font-mono)}
.urg-alert .btns{display:flex;gap:8px}

/* BucketBar */
.bkt{padding:0}
.bkt-head{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px}
.bkt-head .ttl{font-size:12px;color:var(--text-secondary);letter-spacing:.04em;text-transform:uppercase}
.bkt-head .pct{font-family:var(--font-mono);font-size:13px;color:var(--text-primary)}
.bkt-head .pct.over{color:#F0997B}
.bkt-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--bg-tertiary);position:relative}
.bkt-bar .seg{height:100%}
.bkt-bar .intake{background:var(--ok)}
.bkt-bar .revision{background:var(--warn)}
.bkt-bar .rush{background:var(--danger)}
.bkt-bar .scope{background:#cc6c5b}
.bkt-bar .correction{background:#8b3a3a}
.bkt-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.bkt-legend span{display:inline-flex;align-items:center;gap:6px}
.bkt-legend .sw{width:8px;height:8px;border-radius:2px}
.bkt-empty{height:8px;border-radius:999px;background:var(--bg-tertiary);position:relative}

/* KPIcard */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kpi{background:var(--bg-elevated);border-radius:var(--radius-md);padding:14px 16px;border:.5px solid transparent}
.kpi.warn{border-color:rgba(239,159,39,.25);background:linear-gradient(0deg,rgba(239,159,39,.04),rgba(239,159,39,.04)),var(--bg-elevated)}
.kpi.crit{border-color:rgba(226,75,74,.3);background:linear-gradient(0deg,rgba(226,75,74,.05),rgba(226,75,74,.05)),var(--bg-elevated)}
.kpi .label{font-size:11px;color:var(--text-secondary);letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px}
.kpi .value{font-size:24px;font-weight:500;line-height:1.1;margin:0 0 2px;letter-spacing:-.01em}
.kpi .value .unit{font-size:13px;color:var(--text-secondary);margin-left:2px}
.kpi .value.warn{color:#F5C4B3}
.kpi .value.crit{color:#F0997B}
.kpi .meta{font-size:11px;color:var(--text-tertiary);margin:6px 0 0;display:flex;align-items:center;gap:6px}
.kpi .meta .arrow.up{color:var(--warn)}
.kpi .meta .arrow.down{color:var(--ok)}
.kpi .meta .arrow.flat{color:var(--text-tertiary)}
.kpi .spark{margin-top:10px;height:28px;display:block;width:100%}

/* Row table */
.row-table{background:transparent}
.row-head{display:grid;grid-template-columns:160px minmax(0,1fr) 320px 100px;gap:12px;align-items:center;padding:8px 16px;background:rgba(255,255,255,.02);border-bottom:.5px solid var(--border);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);font-weight:500}
.shot-row{display:grid;grid-template-columns:160px minmax(0,1fr) 320px 100px;gap:12px;align-items:center;padding:10px 16px;min-height:72px;border-bottom:.5px solid var(--border);transition:background .12s ease}
.shot-row:hover{background:rgba(255,255,255,.02)}
.shot-row:last-child{border-bottom:none}
.shot-row__left{display:flex;align-items:center;gap:8px}
.shot-row__thumb{width:60px;height:60px;flex:0 0 60px;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-elevated);position:relative;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text-tertiary)}
.shot-row__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shot-row__thumb .ph{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--text-tertiary)}
.shot-row__thumb .badge{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:50%;background:var(--ok);color:#0f0f0e;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:600;border:2px solid var(--bg-surface)}
.shot-row__thumb .badge.draft{background:var(--info)}
.shot-row__variants{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);white-space:nowrap}
.shot-row__main{display:flex;flex-direction:column;gap:4px;min-width:0;text-decoration:none;color:inherit}
.shot-row__line1{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;color:var(--text-tertiary);font-size:11px}
.shot-row__code{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.shot-row__icon{opacity:.55;font-size:13px;text-decoration:none}
.shot-row__icon:hover{opacity:1}
.shot-row__title{font-size:14px;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.shot-row__meta{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-family:var(--font-mono)}
.shot-row__meta .sep{color:var(--text-tertiary);margin:0 6px}
.shot-row__actions{display:flex;justify-content:flex-end;align-items:center}
.row-open{font-size:16px;color:var(--text-tertiary);opacity:.35;transition:opacity .12s ease,transform .12s ease;line-height:1}
.shot-row:hover .row-open{opacity:1;color:var(--text-primary);transform:translateX(2px)}

/* Slice 7 — Expanded shot row (.shot-row.shot-row-x). Dense row, ~260px tall,
   for the v=new /shows/:slug + /my-week paths. The element carries both
   .shot-row (so existing JS selectors keep working) and .shot-row-x (so
   layout/spacing is fully redefined here, overriding the slice-1 4-col grid). */
.shot-row.shot-row-x{
  display:grid;
  grid-template-columns:140px minmax(0,1fr) auto;
  gap:14px;
  align-items:start;
  padding:14px 16px;
  min-height:0;
  background:var(--bg-surface);
  border-bottom:.5px solid var(--border);
}
.shot-row.shot-row-x:hover{background:rgba(255,255,255,.018)}
/* Hotfix 5 / R3: one thumb per row, not two. Class is __thumb (singular). */
.shot-row-x__thumb{position:relative;width:140px;aspect-ratio:16/9;flex-shrink:0;background:var(--bg-elevated);border-radius:var(--radius-sm);border:.5px solid rgba(255,255,255,.06);overflow:hidden;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text-tertiary)}
.shot-row-x__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shot-row-x__thumb-fallback{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);letter-spacing:.06em}
.shot-row-x__thumb-overflow{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.55);color:var(--text-primary);font-size:11px;font-weight:500;padding:2px 7px;border-radius:999px;pointer-events:none;font-family:var(--font-mono);letter-spacing:.02em}
.shot-row-x__main{display:flex;flex-direction:column;gap:8px;min-width:0;text-decoration:none;color:inherit}
.shot-row-x__chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px}
.shot-row-x__code{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.shot-row-x__sep{color:var(--text-tertiary);margin:0 1px}
.shot-row-x__title{font-size:15px;font-weight:500;color:var(--text-primary);margin:2px 0 0;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.shot-row-x__desc{font-size:13px;color:var(--text-secondary);margin:0;line-height:1.45;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.shot-row-x__notesmeta{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);align-items:center}
.shot-row-x__notesmeta b{color:var(--text-secondary);font-weight:500}
.shot-row-x__notes{max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.shot-row-x__due.past{color:#F0997B}
.shot-row-x__due.past b{color:#F0997B}
.shot-row-x__qpos{font-family:var(--font-mono)}
.shot-row-x__blocker{color:#F0997B}
.shot-row-x__blocker b{color:#F0997B;font-family:var(--font-mono);font-weight:500}
.shot-row-x__prompts{margin-top:4px;padding:10px 12px;background:var(--bg-elevated);border-radius:var(--radius-sm);font-size:12px;border:.5px solid var(--border)}
.shot-row-x__plabel{font-size:10px;color:var(--text-tertiary);letter-spacing:.05em;text-transform:uppercase;margin:0 0 4px;font-weight:500;font-family:var(--font-sans)}
.shot-row-x__pbody{color:var(--text-secondary);line-height:1.55;margin:0 0 8px}
.shot-row-x__pbody:last-child{margin:0}
.shot-row-x__ptag{font-family:var(--font-mono);font-size:10px;color:#85B7EB;margin-right:6px;font-weight:500;letter-spacing:.02em}
.shot-row-x__actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0;white-space:nowrap}
.shot-row-x__priority{font-size:10px;color:var(--text-tertiary);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em}
.shot-row-x__priority.high,.shot-row-x__priority.urgent{color:#F0997B}
.shot-row-x__drive{color:#85B7EB;text-decoration:none;font-size:11px;font-family:var(--font-mono)}
.shot-row-x__drive:hover{color:var(--text-primary)}
.shot-row.shot-row-x .row-open{opacity:.45;font-size:14px}
.shot-row.shot-row-x:hover .row-open{opacity:1;color:var(--text-primary)}

/* Chips — small categorical labels used in the shot row chip-row and the
   shot-sheet hero chip-row. Lighter weight than .pill which is reserved for
   status. */
.chip{padding:2px 7px;border-radius:4px;font-size:10px;font-weight:500;letter-spacing:.02em;line-height:1.5;font-family:var(--font-sans);white-space:nowrap;display:inline-flex;align-items:center}
.chip-group{background:rgba(255,255,255,.05);color:var(--text-secondary);font-family:var(--font-mono);letter-spacing:.04em}
.chip-phase{background:rgba(55,138,221,.16);color:#85B7EB;font-family:var(--font-mono)}
.chip-tod{background:rgba(239,159,39,.10);color:#F5C4B3}
.chip-version{background:rgba(255,255,255,.04);color:var(--text-tertiary);font-family:var(--font-mono)}
.chip-kind{background:rgba(133,183,235,.10);color:#85B7EB;font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.chip-stale{background:rgba(226,75,74,.16);color:#F0997B}
.chip-stale-amber{background:rgba(239,159,39,.16);color:#F5C4B3}

/* Buttons */
.btn{font-size:12px;padding:6px 12px;border-radius:var(--radius-md);font-family:inherit;font-weight:500;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px;border:.5px solid transparent;line-height:1.2}
.btn-primary{background:var(--text-primary);color:#0f0f0e}
.btn-primary:hover{background:#fff}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn-outline:hover{background:var(--bg-elevated)}
.btn-danger{background:rgba(226,75,74,.16);color:#F0997B;border-color:rgba(226,75,74,.3)}
.btn-danger:hover{background:rgba(226,75,74,.24)}
.btn-sm{font-size:11px;padding:4px 9px}

/* ShotRowClient (alt) */
.shot-rowc{display:grid;grid-template-columns:44px auto auto 1fr auto;gap:12px;align-items:center;padding:10px 16px;border-bottom:.5px solid var(--border)}
.shot-rowc:last-child{border-bottom:none}
.shot-rowc .thumbc{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--bg-elevated);overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;color:var(--text-tertiary)}
.shot-rowc .thumbc img{width:100%;height:100%;object-fit:cover}
.shot-rowc .codec{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.shot-rowc .titlec{font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-rowc .etac{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}

/* ShotCard (workload + gallery variant). Hotfix 5 / R2: enforce
   flex-direction:column explicitly so it can't be overridden if the
   card gets compound-classed with another grid component. */
.shot-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shot-card{display:flex;flex-direction:column;background:var(--bg-elevated);border-radius:var(--radius-md);overflow:hidden;border:.5px solid var(--border);text-decoration:none;color:inherit;transition:border-color .12s ease,transform .12s ease}
.shot-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.shot-card .ph{aspect-ratio:16/9;width:100%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:14px;color:var(--text-secondary);letter-spacing:.08em;position:relative;overflow:hidden}
.shot-card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.shot-card .body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.shot-card .row1{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);margin:0}
.shot-card .titlec{font-size:14px;font-weight:500;color:var(--text-primary);margin:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.shot-card .metac{font-size:12px;color:var(--text-secondary);font-family:var(--font-mono);margin-top:2px}

/* BlockerCard */
.blocker-list{display:flex;flex-direction:column}
.blocker{padding:16px 18px;border-bottom:.5px solid var(--border);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}
.blocker:last-child{border-bottom:none}
.blocker .head{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.blocker .head .code{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.blocker .head .arrow{color:var(--text-tertiary)}
.blocker .ttl{font-size:14px;color:var(--text-primary);font-weight:500;margin:0 0 4px}
.blocker .reason{font-size:12px;color:#F0997B;margin:0 0 8px}
.blocker .reason b{font-weight:500;font-family:var(--font-mono)}
.blocker .stale{font-size:11px;color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase}
.blocker .stale b{color:var(--warn);font-weight:500}
.blocker .footnote{font-size:11px;color:var(--text-tertiary);margin-top:6px;font-style:italic}
.blocker .acts{display:flex;flex-direction:column;gap:6px;align-items:flex-end}

/* ActivityRow */
.activity{display:flex;flex-direction:column}
.actrow{display:grid;grid-template-columns:14px 24px 1fr auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:.5px solid var(--border)}
.actrow:last-child{border-bottom:none}
.actrow .dot{width:6px;height:6px;border-radius:50%;justify-self:center}
.actrow .dot.flip{background:var(--info)}
.actrow .dot.comment{background:var(--text-tertiary)}
.actrow .dot.req{background:var(--warn)}
.actrow .text{font-size:13px;color:var(--text-secondary)}
.actrow .text b{color:var(--text-primary);font-weight:500}
.actrow .text .code{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.actrow .text .quote{color:var(--text-primary);font-style:italic}
.actrow .time{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);white-space:nowrap}
.actrow .verdict-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:1px 6px;border-radius:3px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;font-family:var(--font-sans);margin-left:6px;vertical-align:middle}
.actrow .verdict-tag.back{background:rgba(239,159,39,.16);color:#F5C4B3}
.actrow .verdict-tag.approve{background:rgba(29,158,117,.16);color:#5DCAA5}
.actrow .verdict-bundle{margin-top:6px;padding:8px 12px;background:var(--bg-elevated);border-left:2px solid var(--warn);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:12px;color:var(--text-primary);line-height:1.55}
.actrow .verdict-bundle .bn{font-size:10px;color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px;font-weight:500}
.actrow .verdict-bundle .item{margin:0 0 4px;color:var(--text-primary)}
.actrow .verdict-bundle .item:last-child{margin:0}
.actrow .dot.verdict-back{background:var(--warn)}
.actrow .dot.verdict-approve{background:var(--ok)}

/* ReplyForm — the comment-and-verdict box */
.reply-form{padding:14px 18px;background:var(--bg-elevated);border-radius:var(--radius-md);display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;border:.5px solid var(--border)}
.reply-form textarea{background:var(--bg-page);border:.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;color:var(--text-primary);font-family:inherit;resize:none;min-height:56px;width:100%}
.reply-form textarea::placeholder{color:var(--text-tertiary)}
.reply-form .stack{display:flex;flex-direction:column;gap:10px;min-width:0}
.reply-form .verdicts{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.reply-form .session{font-size:11px;color:var(--text-tertiary);display:inline-flex;align-items:center;gap:6px}
.reply-form .session b{color:var(--text-secondary);font-weight:500}
.reply-form .session .k{font-family:var(--font-mono);font-size:10px;color:var(--text-tertiary)}
.reply-form .buttons{display:flex;gap:6px;flex-wrap:wrap}
.vbtn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 12px;line-height:1.3;text-align:left;font-size:12px;font-weight:500;border-radius:var(--radius-md);cursor:pointer;font-family:inherit}
.vbtn .hint{font-size:10px;color:var(--text-tertiary);font-weight:400;letter-spacing:.01em}
.vbtn.comment{background:transparent;border:.5px solid var(--border-strong);color:var(--text-secondary)}
.vbtn.comment:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.vbtn.request{background:transparent;color:#F5C4B3;border:.5px solid rgba(239,159,39,.3)}
.vbtn.request:hover{background:rgba(239,159,39,.08)}
.vbtn.request .hint{color:rgba(245,196,179,.6)}
.vbtn.approve{background:rgba(29,158,117,.16);color:#5DCAA5;border:.5px solid rgba(29,158,117,.3)}
.vbtn.approve:hover{background:rgba(29,158,117,.24)}
.vbtn.approve .hint{color:rgba(93,202,165,.65)}

/* EmptyState */
.empty-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.empty{padding:24px 16px;text-align:center;background:rgba(255,255,255,.015);border-radius:var(--radius-md);border:.5px dashed var(--border)}
.empty .ic{width:32px;height:32px;border-radius:50%;background:var(--bg-elevated);display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-tertiary);margin:0 0 10px}
.empty .msg{font-size:12px;color:var(--text-secondary);margin:0 0 10px}
.empty .cta{font-size:11px;color:var(--info);font-weight:500;text-decoration:none}

/* Grouped list primitive */
.group{background:transparent}
.group-head{display:grid;grid-template-columns:14px 12px 1fr auto auto auto;gap:10px;align-items:center;padding:10px 16px;background:var(--bg-elevated);border-radius:var(--radius-sm);border:.5px solid var(--border);position:sticky;top:48px;z-index:2}
.group-head .chev{font-size:10px;color:var(--text-tertiary)}
.group-head .gdot{width:8px;height:8px;border-radius:50%}
.group-head .gdot.blocked{background:var(--danger)}
.group-head .gdot.review{background:var(--warn)}
.group-head .gdot.active{background:var(--info)}
.group-head .gdot.queued{background:var(--text-tertiary)}
.group-head .gdot.approved{background:var(--ok)}
.group-head .gdot.delivered{background:#4d4a44}
.group-head .name{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--text-primary)}
.group-head .count{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.group-head .tok{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}
.group-head .add{font-size:14px;color:var(--text-tertiary);background:transparent;border:none;cursor:pointer;padding:0 4px}
.group-head .add:hover{color:var(--text-primary)}
.group-body{margin-top:6px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden}

/* Misc */
hr.div{border:none;height:.5px;background:var(--border);margin:14px 0}

/* Slice 3 additions — component variants pulled from mockup 02-show-nvz.html
   that weren't captured in the slice-1 extract. */

/* BlockerCard overdue variant — HANDOFF §3.12. Used in /shows/:slug
   "Needs eyes" panel for shots past ETA whose status is review/active
   (not blocked). Same layout, amber theme. */
.blocker.overdue .reason{color:#F5C4B3}
.blocker.overdue .stale b{color:var(--warn)}

/* Capacity-ceiling line — HANDOFF §4.3 honesty rule. Only renders inside
   single-assignee scopes (Sort=Assignee on /shows/:slug, artist surface
   "Coming up"). One dashed amber line per artist. */
.capacity-line{position:relative;height:0;border-top:1px dashed rgba(239,159,39,.4);margin:4px 0}
.capacity-line .lbl{position:absolute;left:16px;top:-9px;background:var(--bg-surface);padding:0 6px;font-size:10px;color:var(--warn);letter-spacing:.04em;text-transform:uppercase;font-weight:500}

/* Slice 4 — Shot detail window (HANDOFF §3.18). Floating sheet, no
   backdrop dim, no blur — borders + uniform margin define the window. */
.sheet{position:fixed;top:32px;right:32px;bottom:32px;left:32px;background:var(--bg-page);border:1px solid var(--border-strong);border-radius:var(--radius-lg);z-index:30;display:flex;flex-direction:column;overflow:hidden;animation:sheet-in .25s cubic-bezier(.22,.61,.36,1)}
@keyframes sheet-in{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.sheet.is-closing{animation:sheet-out .18s cubic-bezier(.4,0,1,1) forwards}
@keyframes sheet-out{to{transform:translateY(4px);opacity:0}}
.sheet-chrome{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:.5px solid var(--border);background:var(--bg-page);position:sticky;top:0;z-index:2}
.sheet-chrome .crumb{font-size:12px;color:var(--text-tertiary);font-family:var(--font-mono);display:flex;align-items:center;gap:6px}
.sheet-chrome .crumb a{color:var(--text-tertiary);text-decoration:none}
.sheet-chrome .crumb a:hover{color:var(--text-secondary)}
.sheet-chrome .crumb .sep{opacity:.5}
.sheet-chrome .crumb .here{color:var(--text-primary);font-weight:500}
.sheet-chrome .spacer{flex:1}
.sheet-chrome .nav-group{display:flex;align-items:center;gap:2px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-sm);padding:2px}
.sheet-chrome .nav-btn{background:transparent;border:none;color:var(--text-secondary);font-size:13px;padding:4px 8px;border-radius:4px;cursor:pointer;font-family:inherit;line-height:1;display:inline-flex;align-items:center;gap:6px}
.sheet-chrome .nav-btn:hover:not(:disabled){background:var(--bg-elevated);color:var(--text-primary)}
.sheet-chrome .nav-btn:disabled{opacity:.35;cursor:not-allowed}
.sheet-chrome .nav-btn .k{font-family:var(--font-mono);font-size:9px;color:var(--text-tertiary);letter-spacing:.04em;margin-left:4px}
.sheet-chrome .icon-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:.5px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:14px;text-decoration:none}
.sheet-chrome .icon-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}
.sheet-chrome .icon-btn .k{font-family:var(--font-mono);font-size:9px;color:var(--text-tertiary);margin-left:5px}
.sheet-chrome .position{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);margin-left:8px}

.sheet-body{flex:1;overflow-y:auto;overflow-x:hidden}
.sheet-content{max-width:none;padding:20px clamp(24px,2.5vw,40px) 96px}

/* Hero strip inside the sheet.
   Hotfix 4: thumb shrunk 140→100px and explicit min-width:0 on grid
   tracks + overflow:visible on row2 so the "1 ticket" leading char
   can't fall behind the thumb at narrower viewports. */
.hero{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:20px;align-items:center;padding:14px 20px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-lg);margin:0 0 18px;min-height:100px}
.hero .thumb{width:100px;height:80px;flex:0 0 100px;border-radius:var(--radius-md);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;position:relative;overflow:hidden}
.hero .thumb .badge{position:absolute;top:6px;right:6px;font-size:9px;padding:2px 6px;border-radius:3px;background:var(--info);color:#0f0f0e;font-weight:600;font-family:var(--font-mono)}
.hero .info{min-width:0;overflow:visible}
.hero .row1{display:flex;align-items:center;gap:10px;margin:0 0 6px;flex-wrap:wrap}
.hero .code{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary)}
.hero h1{font-size:22px;font-weight:500;margin:0;line-height:1.2;letter-spacing:-.01em}
.hero .row2{display:flex;align-items:center;gap:14px;margin:6px 0 0;font-size:12px;color:var(--text-tertiary);font-family:var(--font-mono);flex-wrap:wrap;overflow:visible}
.hero .row2 .chip{padding:2px 10px;background:var(--bg-elevated);border-radius:999px;color:var(--text-secondary);white-space:nowrap;overflow:visible}
.hero .row2 .past{color:#F0997B}
.hero .actions{display:flex;gap:8px}

/* Slice 7 — Expanded hero variant inside the shot-sheet.
   Wider first column to fit up to 4 reference thumbs, chip row above the
   title, clickable status pill dropdown, next-state action button. */
.hero.hero--x{grid-template-columns:minmax(120px,340px) minmax(0,1fr) auto;align-items:start}
.hero-refs{display:flex;flex-wrap:wrap;gap:6px;max-width:340px}
.hero-refs__thumb{position:relative;width:78px;height:60px;border-radius:var(--radius-sm);background:var(--bg-elevated);overflow:hidden;border:.5px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text-tertiary)}
.hero-refs__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hero-refs__thumb .badge{position:absolute;top:4px;right:4px;font-size:9px;padding:1px 5px;border-radius:3px;background:var(--info);color:#0f0f0e;font-weight:600;font-family:var(--font-mono)}
.hero-refs__empty{width:100px;height:80px;border-radius:var(--radius-md);background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--text-tertiary)}
.hero-refs__overflow{font-family:var(--font-mono);font-size:11px;color:#85B7EB;text-decoration:none;align-self:center;padding:0 4px}
.hero-refs__overflow:hover{color:var(--text-primary)}

/* Hotfix 5 / R5d: cover-picker badge + button on each ref thumb. The first
   thumb wears a static ★ (it's the cover). Subsequent thumbs get a ☆
   button that POSTs /shots/:id/cover to promote them. Container is
   position:relative via .hero-refs__thumb so absolute children anchor. */
.hero-refs__thumb{position:relative}
.hero-refs__cover-badge{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.6);color:#F0BB6E;font-size:11px;line-height:1;padding:3px 6px;border-radius:4px;pointer-events:none;font-weight:600;letter-spacing:.02em}
.hero-refs__cover-form{position:absolute;top:4px;left:4px;margin:0}
.hero-refs__set-cover{background:rgba(0,0,0,.45);color:rgba(255,255,255,.7);font-size:14px;line-height:1;padding:3px 6px;border:none;border-radius:4px;cursor:pointer;opacity:.4;transition:opacity .12s ease, color .12s ease;font-family:inherit}
.hero-refs__thumb:hover .hero-refs__set-cover{opacity:1}
.hero-refs__set-cover:hover{color:#F0BB6E;background:rgba(0,0,0,.7)}

/* Hotfix 5 / R5b: meta links in hero row2 (brief, show docs). Smaller
   visual weight than the .chip pill but still tap-friendly. */
.hero .row2 .meta-link{color:#85B7EB;text-decoration:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;padding:2px 6px;border-radius:var(--radius-sm);transition:color .12s ease, background .12s ease}
.hero .row2 .meta-link:hover{color:var(--text-primary);background:var(--bg-elevated)}

/* Hotfix 5 / R5c: Drive-link reference form — sister of the deliverable
   form. Sits at the bottom of .hero-refs (LEFT column inside the hero). */
.reference-form{margin-top:8px;border:.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);overflow:hidden;width:100%;max-width:340px}
.reference-form > summary{list-style:none;cursor:pointer;padding:6px 10px;font-size:11px;color:var(--text-secondary);user-select:none;font-weight:500;letter-spacing:.01em}
.reference-form > summary::-webkit-details-marker{display:none}
.reference-form > summary:hover{color:var(--text-primary);background:var(--bg-tertiary)}
.reference-form[open] > summary{border-bottom:.5px solid var(--border);background:var(--bg-tertiary);color:var(--text-primary)}
.reference-form__body{padding:10px;display:flex;flex-direction:column;gap:8px}
.reference-form__row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.reference-form__field{display:flex;flex-direction:column;gap:3px;min-width:0}
.reference-form__label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);font-weight:500;font-family:var(--font-sans)}
.reference-form__field input{background:var(--bg-page);color:var(--text-primary);border:.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:5px 8px;font-family:inherit;font-size:12px;width:100%}
.reference-form__field input:focus{outline:none;border-color:var(--info)}
.reference-form__field input:invalid{border-color:rgba(226,75,74,.5)}
.reference-form__submit{white-space:nowrap}
.reference-form__help{color:var(--text-tertiary);font-size:10px;margin:2px 0 0;line-height:1.5}
.hero-chiprow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;font-size:11px}
.hero-chiprow .code{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary)}
.hero-chiprow .sep{color:var(--text-tertiary)}
.hero-actions-x{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.hero-actions-x__done{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;padding:6px 12px}

/* Clickable status pill — wraps the pill in a <details>/<summary> dropdown.
   Click the pill → menu opens listing the other 5 states. Picking one POSTs
   the status change. The "blocked" pick instead focuses the Mark blocked
   form in the right rail (it needs blocker_owner + blocker_reason). */
.status-pill-dropdown{position:relative;display:inline-block}
.status-pill-dropdown > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.status-pill-dropdown > summary::-webkit-details-marker{display:none}
.status-pill-dropdown > summary .chev{font-size:9px;margin-left:4px;opacity:.7}
.status-pill-dropdown[open] > summary{outline:1px solid var(--border-strong);outline-offset:1px;border-radius:999px}
.status-pill-dropdown__menu{position:absolute;top:calc(100% + 6px);left:0;min-width:160px;background:var(--bg-surface);border:.5px solid var(--border-strong);border-radius:var(--radius-md);padding:4px;z-index:30;display:flex;flex-direction:column;gap:2px}
.status-pill-dropdown__item{background:transparent;border:none;color:inherit;padding:5px 6px;text-align:left;cursor:pointer;font-family:inherit;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:flex-start;width:100%}
.status-pill-dropdown__item:hover{background:var(--bg-elevated)}
.status-pill-dropdown__item.disabled{opacity:.45;cursor:not-allowed}

/* Status strip — plain-language summary below the hero. Tinted left border
   matches the status colour, body is light so it reads "current state" not
   "warning". */
.status-strip{margin:-10px 0 18px;padding:10px 14px;background:var(--bg-elevated);border-radius:var(--radius-sm);border-left:2px solid var(--info);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.status-strip--queued{border-left-color:var(--text-tertiary)}
.status-strip--active{border-left-color:var(--info)}
.status-strip--review{border-left-color:var(--warn)}
.status-strip--approved{border-left-color:var(--ok)}
.status-strip--delivered{border-left-color:#4d4a44}
.status-strip--blocked{border-left-color:var(--danger);background:rgba(226,75,74,.06)}
.status-strip__label{font-size:10px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono);font-weight:500;white-space:nowrap}
.status-strip__msg{color:var(--text-secondary);font-size:12px;line-height:1.45}
.status-strip--blocked .status-strip__msg{color:#F0997B}

/* 2-col layout inside the sheet */
.sheet .layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
@media (max-width: 1100px){ .sheet .layout{grid-template-columns:1fr} }

/* Panel inside the sheet (overlap-safe — distinct from /shows/:slug panels). */
.sheet .panel{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;padding:0}
.sheet .panel + .panel{margin-top:16px}
.panel-head{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:.5px solid var(--border)}
.panel-head h2{font-size:13px;font-weight:500;margin:0;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary)}
.panel-head .count{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);margin-left:-4px}
.panel-head .right{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-tertiary)}

/* Slice 8 / Item N: Drive-link deliverable form. Sits at the top of the
   Latest deliverable panel, above the .deliv preview. Wrapped in
   <details open> so it can collapse without taking a JS toggle. */
.deliverable-form{margin:14px 20px 0;border:.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);overflow:hidden}
.deliverable-form > summary{list-style:none;cursor:pointer;padding:8px 14px;font-size:12px;color:var(--text-secondary);user-select:none;font-weight:500;letter-spacing:.01em}
.deliverable-form > summary::-webkit-details-marker{display:none}
.deliverable-form > summary:hover{color:var(--text-primary);background:var(--bg-tertiary)}
.deliverable-form[open] > summary{border-bottom:.5px solid var(--border);background:var(--bg-tertiary);color:var(--text-primary)}
.deliverable-form__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.deliverable-form__row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.deliverable-form__field{display:flex;flex-direction:column;gap:4px;min-width:0}
.deliverable-form__field--url{min-width:0}
.deliverable-form__field--kind{min-width:120px}
.deliverable-form__field--note{min-width:0}
.deliverable-form__label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);font-weight:500;font-family:var(--font-sans)}
.deliverable-form__field input,
.deliverable-form__field select{background:var(--bg-page);color:var(--text-primary);border:.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 9px;font-family:inherit;font-size:13px;width:100%}
.deliverable-form__field input::placeholder{color:var(--text-tertiary)}
.deliverable-form__field input:focus,
.deliverable-form__field select:focus{outline:none;border-color:var(--info)}
.deliverable-form__field input:invalid{border-color:rgba(226,75,74,.5)}
.deliverable-form__field--locked .deliverable-form__locked{display:inline-flex;flex-direction:column;background:var(--bg-page);border:.5px dashed var(--border);border-radius:var(--radius-sm);padding:5px 9px;font-size:13px;color:var(--text-secondary);font-family:var(--font-mono);line-height:1.2}
.deliverable-form__field--locked .deliverable-form__locked-hint{font-size:10px;color:var(--text-tertiary);font-family:var(--font-sans);font-weight:400;letter-spacing:.02em;margin-top:1px}
.deliverable-form__submit{white-space:nowrap}
.deliverable-form__help{color:var(--text-tertiary);font-size:11px;margin:2px 0 0;line-height:1.5}

/* Latest deliverable */
.deliv{padding:18px 20px}
.deliv-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.deliv-head .v{font-family:var(--font-mono);font-size:13px;color:var(--text-primary);font-weight:500}
.deliv-head .open{margin-left:auto;font-size:11px;color:#85B7EB;text-decoration:none}
.deliv-meta{font-size:11px;color:var(--text-tertiary);margin:0 0 16px;font-family:var(--font-mono)}
.deliv-meta b{color:var(--text-secondary);font-weight:500}
.deliv-preview{aspect-ratio:16/9;background:linear-gradient(135deg,#26241f 0%,#1a1a18 100%);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);position:relative;margin:0 0 16px;overflow:hidden;max-height:520px}
.deliv-preview .play{width:48px;height:48px;border-radius:50%;background:rgba(240,238,230,.1);border:.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--text-primary);font-size:18px}
/* Hotfix 4 / Bug M: content-type-aware deliverable preview. */
.deliverable-iframe{width:100%;aspect-ratio:16/9;border:none;background:var(--bg-elevated);display:block}
.deliverable-video{width:100%;aspect-ratio:16/9;background:#000;display:block}
.deliverable-image{width:100%;height:auto;max-height:520px;object-fit:contain;display:block;background:var(--bg-elevated)}
.deliv-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:11px;color:var(--text-tertiary)}
.deliv-foot .mark-blocked{background:transparent;border:none;color:var(--text-tertiary);font-size:11px;cursor:pointer;font-family:inherit;padding:0}
.deliv-foot .mark-blocked:hover{color:#F0997B}

/* Comments stream inside the sheet (distinct from .activity in slice-1 vocab — same shape). */
.comments-intro{padding:8px 18px 12px;font-size:11px;color:var(--text-tertiary);border-bottom:.5px solid var(--border);background:rgba(133,183,235,.04);line-height:1.5}
.comments-intro b{color:var(--text-secondary);font-weight:500}
.sheet .activity .actrow{grid-template-columns:14px 28px minmax(0,1fr) auto}
.sheet .actrow .dot.ok{background:var(--ok)}
.sheet .actrow .quote{margin-top:6px;padding:8px 12px;background:var(--bg-elevated);border-left:2px solid var(--border-strong);font-size:12px;color:var(--text-primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;line-height:1.55;max-width:75ch;white-space:pre-wrap}

/* Reply form (slice-1 .reply-form CSS is grid 28px 1fr — this matches). */
.sheet .reply{padding:14px 18px;border-top:.5px solid var(--border);background:rgba(255,255,255,.012);display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.sheet .reply textarea{background:var(--bg-page);border:.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;color:var(--text-primary);font-family:inherit;resize:none;min-height:56px;width:100%}
.sheet .reply textarea::placeholder{color:var(--text-tertiary)}
.reply-stack{display:flex;flex-direction:column;gap:10px;min-width:0}
.reply-verdicts{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.reply-session{font-size:11px;color:var(--text-tertiary);display:inline-flex;align-items:center;gap:6px}
.reply-session b{color:var(--text-secondary);font-weight:500}
.reply-session .k{font-family:var(--font-mono);font-size:10px;color:var(--text-tertiary)}
.reply-buttons{display:flex;gap:6px;flex-wrap:wrap}

/* Collapsible details (All versions, Shot details) */
details.collapser{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-top:16px}
details.collapser > summary{padding:12px 18px;cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none;font-size:13px;color:var(--text-secondary);font-weight:500}
details.collapser > summary::-webkit-details-marker{display:none}
details.collapser > summary::before{content:"▸";font-size:10px;color:var(--text-tertiary);transition:transform .15s}
details.collapser[open] > summary::before{transform:rotate(90deg)}
details.collapser > summary .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);font-weight:400}
details.collapser .inner{padding:18px 20px;border-top:.5px solid var(--border);font-size:12px;color:var(--text-secondary);line-height:1.7}
details.collapser .inner h4{font-size:11px;font-weight:500;margin:0 0 6px;color:var(--text-tertiary);letter-spacing:.05em;text-transform:uppercase}
details.collapser .inner .kv{display:grid;grid-template-columns:140px 1fr;gap:8px 16px;margin:0 0 16px;font-family:var(--font-mono);font-size:12px}
details.collapser .inner .kv dt{color:var(--text-tertiary)}
details.collapser .inner .kv dd{margin:0;color:var(--text-primary)}
details.collapser .inner .section + .section{margin-top:20px;padding-top:18px;border-top:.5px solid var(--border)}
details.collapser .inner pre{background:var(--bg-page);padding:10px 12px;border-radius:var(--radius-sm);font-size:11px;color:var(--text-secondary);overflow-x:auto;border:.5px solid var(--border);margin:0;line-height:1.5;white-space:pre-wrap}
details.collapser .inner .refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:8px}
details.collapser .inner .refs .r{aspect-ratio:1;background:var(--bg-elevated);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:10px;font-family:var(--font-mono);text-decoration:none}

/* Right rail */
.rail{position:sticky;top:60px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 120px);overflow-y:auto}
.rail-card{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px}
.rail-card h3{font-size:11px;font-weight:500;margin:0 0 14px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary);display:flex;align-items:center;gap:8px}
.field{display:grid;grid-template-columns:80px 1fr;gap:8px 14px;align-items:center;padding:6px 0;border-radius:var(--radius-sm);transition:background .12s ease}
.field:hover{background:rgba(255,255,255,.025)}
.field .label{font-size:11px;color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase}
.field .value{font-size:12px;color:var(--text-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.field .value.dim{color:var(--text-tertiary)}
.field .value.past{color:#F0997B}
.field .ed{margin-left:auto;font-size:10px;color:var(--text-tertiary);opacity:0;font-family:var(--font-mono)}
.field:hover .ed{opacity:1}
.rail-card.blocked-form{border-color:rgba(226,75,74,.16);background:linear-gradient(0deg,rgba(226,75,74,.025),rgba(226,75,74,.025)),var(--bg-surface)}
.rail-card.blocked-form h3{color:#F0997B}

/* Slice 5a — Dashboard vocabulary. */

.page-head{display:flex;align-items:baseline;gap:14px;margin:0 0 22px}
.page-head h1{font-size:22px;font-weight:500;margin:0;letter-spacing:-.01em}
.page-head .sub{font-size:13px;color:var(--text-tertiary);font-family:var(--font-mono)}

.sec-head{display:flex;align-items:baseline;gap:14px;margin:32px 0 12px;padding:0 4px;flex-wrap:wrap}
.sec-head:first-of-type{margin-top:0}
.sec-head h2{font-size:12px;font-weight:500;margin:0;letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary)}
.sec-head .meta{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.sec-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.sec-head .opt{font-size:12px;color:var(--text-secondary);background:transparent;border:.5px solid var(--border-strong);padding:4px 10px;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit}
.sec-head .precedence{margin-left:auto;font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.sec-head .precedence b{color:var(--text-secondary);font-weight:500}

/* Three-lane inbox — HANDOFF §5.3 + §4.4 lane precedence. */
.inbox{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:14px;margin:0 0 8px}
@media (max-width: 980px){ .inbox{grid-template-columns:1fr} }
.lane{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;min-height:380px}
.lane-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:.5px solid var(--border);background:var(--bg-page)}
.lane-head .gdot{width:8px;height:8px;border-radius:50%}
.lane.blocked .lane-head{border-top:1.5px solid var(--danger)}
.lane.blocked .lane-head .gdot{background:var(--danger)}
.lane.overdue .lane-head{border-top:1.5px solid var(--warn)}
.lane.overdue .lane-head .gdot{background:var(--warn)}
.lane.duesoon .lane-head{border-top:1.5px solid var(--info)}
.lane.duesoon .lane-head .gdot{background:var(--info)}
.lane-head .name{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary)}
.lane-head .sub{font-size:11px;color:var(--text-tertiary);margin-left:6px}
.lane-head .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;background:var(--bg-elevated);color:var(--text-secondary);padding:1px 8px;border-radius:999px}
.lane.blocked .lane-head .count{background:rgba(226,75,74,.16);color:#F0997B}
.lane.overdue .lane-head .count{background:rgba(239,159,39,.16);color:#F5C4B3}
.lane.duesoon .lane-head .count{background:rgba(55,138,221,.16);color:#85B7EB}

.inbox-item{padding:12px 16px;border-bottom:.5px solid var(--border);cursor:pointer;transition:background .12s ease;text-decoration:none;color:inherit;display:block}
.inbox-item:hover{background:rgba(255,255,255,.02)}
.inbox-item:last-of-type{border-bottom:none}
.inbox-item .row1{display:flex;align-items:center;gap:8px;margin:0 0 4px;flex-wrap:wrap}
.inbox-item .code{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
.inbox-item .show{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}
.inbox-item .title{font-size:13px;color:var(--text-primary);font-weight:500;margin:0 0 4px;line-height:1.35}
.inbox-item .reason{font-size:12px;margin:0 0 6px;line-height:1.4}
.inbox-item .reason b{font-weight:500;font-family:var(--font-mono)}
.inbox-item.b-blocked .reason{color:#F0997B}
.inbox-item.b-overdue .reason{color:#F5C4B3}
.inbox-item.b-duesoon .reason{color:var(--text-secondary)}
.inbox-item .item-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}
.inbox-item .stale{font-size:11px;color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase}
.inbox-item .stale b{color:var(--warn);font-weight:500}
.inbox-item .lane-empty{padding:24px 16px;font-size:12px;color:var(--text-tertiary);text-align:center;font-style:italic}
.show-all{padding:10px 16px;font-size:11px;color:var(--text-tertiary);text-align:center;background:rgba(255,255,255,.015);border-top:.5px solid var(--border);cursor:pointer;text-decoration:none;display:block}
.show-all:hover{color:var(--text-primary)}

/* KPI row — HANDOFF §3.8 + §5.3. 5 cards. */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0 0 8px}
@media (max-width: 1100px){ .kpi-row{grid-template-columns:repeat(2,1fr)} }
.dashboard .kpi{background:var(--bg-surface);padding:16px 18px;border-radius:var(--radius-lg)}
.dashboard .kpi .label{margin-bottom:8px}
.dashboard .kpi .value{font-size:26px}
.dashboard .kpi .spark{margin-top:12px;height:32px}
.kpi .trend{font-size:11px;color:var(--text-tertiary);margin:8px 0 0;display:flex;align-items:center;gap:6px}
.kpi .trend .arrow.up{color:var(--warn)}
.kpi .trend .arrow.down{color:var(--ok)}
.kpi .trend .arrow.flat{color:var(--text-tertiary)}
.kpi .trend b{font-family:var(--font-mono);color:var(--text-secondary);font-weight:500}

/* Show cards — HANDOFF §5.3 + §5.5. repeat(auto-fill, minmax(380px, 1fr)). */
.show-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px}
.show-card{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;position:relative;transition:border-color .12s ease;text-decoration:none;color:inherit;display:block}
.show-card:hover{border-color:var(--border-strong)}
.show-card .head{display:flex;align-items:start;justify-content:space-between;gap:12px;margin:0 0 14px}
.show-card h3{font-size:16px;font-weight:500;margin:0 0 4px;letter-spacing:-.01em;color:var(--text-primary)}
.show-card .client{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.show-card .next{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);text-align:right}
.show-card .next b{display:block;color:var(--text-secondary);font-weight:500;font-size:13px;margin-top:2px}
.show-card .next b.past{color:#F0997B}
.show-card .deliv{margin:0 0 10px}
.show-card .deliv .lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--text-tertiary);margin:0 0 5px}
.show-card .deliv .lbl b{color:var(--text-primary);font-family:var(--font-mono);font-weight:500}
.show-card .deliv-bar{height:4px;background:var(--bg-tertiary);border-radius:999px;overflow:hidden}
.show-card .deliv-bar > span{display:block;height:100%;background:#85B7EB}
.show-card .deliv-bar > span.warn{background:var(--warn)}
.show-card .deliv-bar > span.ok{background:var(--ok)}
.show-card .show-card-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.show-card .show-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:12px;border-top:.5px solid var(--border)}
.show-card .stats{display:flex;gap:14px;font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);flex-wrap:wrap}
.show-card .stats span b{color:var(--text-secondary);font-weight:500}
.show-card .stats .danger b, .show-card .stats .danger{color:#F0997B}

/* UrgencyTier chips — three tiers per HANDOFF §3.6 */
.urg-chip.t2{background:rgba(239,159,39,.16);color:#F5C4B3;border:none}
.urg-chip.t3{background:rgba(226,75,74,.16);color:#F0997B;border:none}

/* Slice 5b — /shows index vocabulary. */
.filter-strip{display:flex;align-items:center;gap:6px;margin:0 0 18px;padding:8px 12px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md);flex-wrap:wrap}
.filter-chip{font-size:12px;color:var(--text-secondary);background:transparent;border:.5px solid var(--border);padding:5px 12px;border-radius:999px;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1}
.filter-chip:hover{color:var(--text-primary);background:var(--bg-elevated)}
.filter-chip.is-active{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-strong)}
.filter-chip .count{font-family:var(--font-mono);font-size:10px;color:var(--text-tertiary);padding:0 4px;border-radius:3px;background:rgba(255,255,255,.04)}

.client-section{margin:0 0 32px}
.client-section .client-head{display:flex;align-items:center;gap:14px;margin:0 0 10px;padding:0 4px}
.client-section .client-head h2{font-size:14px;font-weight:500;margin:0;color:var(--text-primary);letter-spacing:-.01em}
.client-section .client-head .client-meta{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.client-section .client-head .divider{flex:1;height:.5px;background:var(--border)}

.empty-client{display:flex;align-items:center;gap:12px;padding:18px 22px;background:rgba(255,255,255,.015);border:.5px dashed var(--border);border-radius:var(--radius-md);font-size:12px;color:var(--text-secondary)}
.empty-client .ic{width:28px;height:28px;border-radius:50%;background:var(--bg-elevated);display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-tertiary);flex:none}
.empty-client .cta{margin-left:auto;font-size:11px;color:var(--info);text-decoration:none;font-weight:500}

.archived-collapser{margin-top:32px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.archived-collapser > summary{padding:12px 18px;cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none;font-size:13px;color:var(--text-secondary);font-weight:500}
.archived-collapser > summary::-webkit-details-marker{display:none}
.archived-collapser > summary::before{content:"▸";font-size:10px;color:var(--text-tertiary);transition:transform .15s}
.archived-collapser[open] > summary::before{transform:rotate(90deg)}
.archived-collapser > summary .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);font-weight:400}
.archived-collapser .inner{padding:18px 20px;border-top:.5px solid var(--border)}

/* Slice 6 — Admin two-pane shell (HANDOFF §6.4). */
.admin-shell{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;margin-top:6px;min-height:calc(100vh - 200px)}
@media (max-width: 900px){ .admin-shell{grid-template-columns:1fr} }
.admin-sidebar{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:8px;position:sticky;top:60px;align-self:start}
.admin-sidebar h3{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin:6px 10px 8px}
.admin-sidebar .nav-link{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:var(--radius-sm);font-size:13px;color:var(--text-secondary);text-decoration:none;cursor:pointer}
.admin-sidebar .nav-link:hover{background:var(--bg-elevated);color:var(--text-primary)}
.admin-sidebar .nav-link.is-active{background:var(--bg-elevated);color:var(--text-primary)}
.admin-sidebar .nav-link .ic{width:14px;font-family:var(--font-mono);font-size:12px;color:var(--text-tertiary)}
.admin-sidebar .nav-link.is-active .ic{color:var(--text-primary)}

.admin-pane{min-width:0;display:flex;flex-direction:column;gap:18px}
.admin-pane h1{font-size:18px;font-weight:500;margin:0 0 4px;letter-spacing:-.01em}
.admin-pane .pane-head{display:flex;align-items:baseline;gap:14px;margin:0 0 12px;flex-wrap:wrap}
.admin-pane .pane-head .sub{font-size:12px;color:var(--text-tertiary);font-family:var(--font-mono)}
.admin-pane .pane-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Admin table — tighter than the legacy table; uses the ShotRow grid
   template per HANDOFF §6.4 ("admin reads consistent with the rest of
   the app"). */
.admin-table{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.admin-table .row-head,
.admin-table .admin-row{display:grid;grid-template-columns:160px minmax(0,1fr) 320px 60px;gap:12px;align-items:center;padding:10px 16px}
.admin-table .row-head{background:rgba(255,255,255,.02);border-bottom:.5px solid var(--border);font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);font-weight:500}
.admin-table .admin-row{border-bottom:.5px solid var(--border);transition:background .12s ease}
.admin-table .admin-row:last-child{border-bottom:none}
.admin-table .admin-row:hover{background:rgba(255,255,255,.02)}
.admin-table .a-primary{font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-table .a-primary .sub{font-size:11px;color:var(--text-tertiary);margin-top:2px;font-family:var(--font-mono)}
.admin-table .a-meta{font-size:12px;color:var(--text-secondary);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.admin-table .a-status{font-size:11px}
.admin-table .a-actions{display:flex;justify-content:flex-end;gap:6px}
.admin-table .a-actions a{font-size:11px;color:var(--text-tertiary);text-decoration:none}
.admin-table .a-actions a:hover{color:var(--text-primary)}
.role-chip{display:inline-flex;align-items:center;padding:1px 7px;border-radius:3px;font-size:10px;font-family:var(--font-mono);background:var(--bg-elevated);color:var(--text-secondary);margin-right:4px}
.role-chip.disabled{opacity:.5}

/* Clients accordion — preserves the legacy data shape (one card per
   client, nested shows list inside). */
.client-card{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:10px}
.client-card > summary{padding:12px 18px;cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none;font-size:14px;color:var(--text-primary);font-weight:500;background:var(--bg-surface)}
.client-card > summary::-webkit-details-marker{display:none}
.client-card > summary::before{content:"▸";font-size:10px;color:var(--text-tertiary);transition:transform .15s;width:10px}
.client-card[open] > summary::before{transform:rotate(90deg)}
.client-card > summary .count{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);font-weight:400}
.client-card > summary .slug{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);font-weight:400;letter-spacing:.02em}
.client-card .inner{padding:0 0 8px;border-top:.5px solid var(--border)}
.client-card .show-line{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 18px;font-size:13px;color:var(--text-primary);border-bottom:.5px solid var(--border);text-decoration:none}
.client-card .show-line:last-child{border-bottom:none}
.client-card .show-line:hover{background:var(--bg-elevated)}
.client-card .show-line .show-meta{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.client-card .show-line.archived{opacity:.55}

/* Cost-calibration — single-column forms per cost type. */
.cc-form{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px}
.cc-form + .cc-form{margin-top:14px}
.cc-form h2{font-size:14px;font-weight:500;margin:0 0 4px;letter-spacing:-.01em}
.cc-form .desc{font-size:11px;color:var(--text-tertiary);margin:0 0 14px}
.cc-form .field-stack{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:0 0 14px}
@media (max-width: 720px){ .cc-form .field-stack{grid-template-columns:1fr} }
.cc-form .field-stack .f{display:flex;flex-direction:column;gap:6px}
.cc-form .field-stack label{font-size:11px;color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.cc-form input[type="text"],
.cc-form input[type="number"]{background:var(--bg-page);border:.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;color:var(--text-primary);font-family:var(--font-mono);width:100%}
.cc-form input:focus{outline:none;border-color:var(--border-strong)}
.cc-form .formula-preview{padding:10px 14px;background:rgba(133,183,235,.05);border-left:2px solid var(--info);font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);line-height:1.6;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.cc-form .formula-preview b{color:var(--text-primary);font-weight:500}
.cc-form .formula-preview .total{display:inline-block;margin-top:6px;font-family:var(--font-mono);font-size:13px;color:#5DCAA5;font-weight:500}

.cc-global{background:var(--bg-elevated);border:.5px solid var(--border-strong);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cc-global label{font-size:11px;color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.cc-global input{background:var(--bg-page);border:.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;color:var(--text-primary);font-family:var(--font-mono);width:120px}

/* Sticky save bar at the bottom of the cost-cal form. */
.save-bar{position:sticky;bottom:0;background:var(--bg-page);border-top:.5px solid var(--border-strong);padding:12px 0;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:auto;z-index:5}
.save-bar .hint{font-size:11px;color:var(--text-tertiary);margin-right:auto;font-family:var(--font-mono)}
.save-bar .save-btn{background:var(--text-primary);color:#0f0f0e;border:none;border-radius:var(--radius-md);font-family:inherit;font-weight:500;font-size:13px;padding:8px 18px;cursor:pointer}
.save-bar .save-btn:hover{background:#fff}

.saved-flash{padding:10px 14px;background:rgba(29,158,117,.10);border:.5px solid rgba(29,158,117,.3);border-radius:var(--radius-sm);font-size:12px;color:#5DCAA5;margin-bottom:14px}
.error-flash{padding:10px 14px;background:rgba(226,75,74,.10);border:.5px solid rgba(226,75,74,.3);border-radius:var(--radius-sm);font-size:12px;color:#F0997B;margin-bottom:14px}

/* Hotfix slice 3-6: belt-and-braces fallback for the Tailwind `hidden`
   utility. Loaded with the rest of our component CSS, so if the
   Tailwind CDN ever fails (network blip, blocklist) the modal
   backdrops in partials/asset-modal.ejs still collapse to display:none
   instead of pushing main content below the fold. !important is used
   so utility-class state (.hidden on .flex etc.) stays predictable. */
.hidden { display: none !important; }

/* Hotfix slice 3-6: dark-mode overlay for legacy Tailwind-styled views
   (/timeline, /workload, /artists, /admin/* edit forms, every other
   page that hasn't yet been migrated to the new vocabulary). Maps the
   commonly used Tailwind utility classes onto the design system's
   tokens so the body reads dark when v=new is set.

   Scope: this overlay only loads via the v-new-shell middleware,
   which only runs when the v=new cookie is present. Legacy site (no
   cookie) never sees this CSS file.

   This is a transitional measure per HANDOFF §6.1-6.3 — each surface
   is slated for a full content re-skin in a future slice; the overlay
   buys time without per-template edits. */
body { background: var(--bg-page); color: var(--text-primary); }

/* Surface backgrounds */
.bg-white { background: var(--bg-surface) !important; }
.bg-slate-50 { background: var(--bg-page) !important; }
.bg-slate-100 { background: var(--bg-elevated) !important; }
.bg-slate-200 { background: var(--bg-tertiary) !important; }
.bg-slate-800, .bg-slate-900 { background: var(--bg-elevated) !important; }

/* Text colors */
.text-slate-900, .text-slate-800, .text-slate-700, .text-black { color: var(--text-primary) !important; }
.text-slate-600, .text-slate-500, .text-slate-400 { color: var(--text-secondary) !important; }
.text-slate-300, .text-slate-200 { color: var(--text-tertiary) !important; }
.text-white { color: var(--text-primary) !important; }

/* Borders */
.border-slate-200, .border-slate-100 { border-color: var(--border) !important; }
.border-slate-300, .border-slate-400 { border-color: var(--border-strong) !important; }

/* Drop shadows — HANDOFF §4.7 "Never box-shadow for elevation" */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: none !important; }

/* Hover states */
.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover { background: var(--bg-elevated) !important; }
.hover\:border-slate-300:hover { border-color: var(--border-strong) !important; }
.hover\:text-slate-900:hover { color: var(--text-primary) !important; }
.hover\:text-blue-600:hover, .hover\:text-blue-700:hover { color: #85B7EB !important; }

/* Form inputs */
input[type="text"], input[type="number"], input[type="email"], input[type="date"],
input[type="search"], input[type="url"], input[type="password"],
input:not([type]), select, textarea {
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary) !important; }

/* Pill recipe — map the legacy .p-* classes onto the slice-1 pill
   token recipe so legacy pill markup picks up dark-mode colors. */
.p-ok    { color: #5DCAA5 !important; background: rgba(29,158,117,.16) !important; }
.p-risk  { color: #F5C4B3 !important; background: rgba(239,159,39,.16) !important; }
.p-bad   { color: #F0997B !important; background: rgba(226,75,74,.16) !important; }
.p-blue  { color: #85B7EB !important; background: rgba(55,138,221,.16) !important; }
.p-wait  { color: var(--text-secondary) !important; background: rgba(255,255,255,.06) !important; }
.p-amber { color: #F5C4B3 !important; background: rgba(239,159,39,.16) !important; }

/* Common tint backgrounds — used as section highlights, banners, etc. */
.bg-amber-50, .bg-yellow-50 { background: rgba(239,159,39,.08) !important; }
.bg-red-50    { background: rgba(226,75,74,.08) !important; }
.bg-blue-50   { background: rgba(55,138,221,.08) !important; }
.bg-green-50, .bg-emerald-50 { background: rgba(29,158,117,.08) !important; }

/* Tailwind divider color */
.divide-y > * + *,
.divide-slate-200 > * + * { border-color: var(--border) !important; }

/* Code blocks + monospace text */
.text-emerald-700 { color: #5DCAA5 !important; }
.text-red-700 { color: #F0997B !important; }
.text-amber-700, .text-yellow-700 { color: #F5C4B3 !important; }
.text-blue-700 { color: #85B7EB !important; }

/* /my-week artist surface — HANDOFF §5.7.
   Capacity hero (dial + segmented bar + legend) + section headers
   followed by .rows blocks. Each row goes through _shot_row.ejs. */
.hi{display:flex;align-items:baseline;gap:14px;margin:0 0 24px;flex-wrap:wrap}
.hi h1{font-size:24px;font-weight:500;margin:0;letter-spacing:-.01em}
.hi h1 .name{color:var(--text-primary)}
.hi .sub{font-size:13px;color:var(--text-tertiary);font-family:var(--font-mono)}

.cap-hero{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding:22px 28px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-lg);margin:0 0 24px}
.cap-dial{position:relative;width:120px;height:120px}
.cap-dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.cap-dial .ring-bg{stroke:var(--bg-tertiary);stroke-width:6;fill:none}
.cap-dial .ring-fg{stroke:var(--warn);stroke-width:6;fill:none;stroke-linecap:round;transition:stroke-dasharray .3s ease}
.cap-dial .ring-fg.ok{stroke:var(--ok)}
.cap-dial .ring-fg.crit{stroke:var(--danger)}
.cap-dial .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.cap-dial .pct{font-size:22px;font-weight:500;color:#F5C4B3;letter-spacing:-.01em;line-height:1}
.cap-dial .pct.ok{color:#5DCAA5}
.cap-dial .pct.crit{color:#F0997B}
.cap-dial .lbl{font-size:10px;color:var(--text-tertiary);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}

.cap-detail h2{font-size:13px;font-weight:500;margin:0 0 6px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary)}
.cap-detail .num{font-size:18px;color:var(--text-primary);font-weight:500;margin:0 0 8px;letter-spacing:-.005em}
.cap-detail .num b{font-family:var(--font-mono);color:#F5C4B3;font-weight:500}
.cap-detail .seg-row{display:flex;height:6px;border-radius:999px;overflow:hidden;background:var(--bg-tertiary);margin:0 0 10px;max-width:560px}
.cap-detail .seg-row > span{display:block;height:100%}
.cap-detail .seg-row .done{background:#5DCAA5}
.cap-detail .seg-row .doing{background:var(--info)}
.cap-detail .seg-row .planned{background:var(--warn)}
.cap-detail .seg-row .blocked{background:var(--danger)}
.cap-detail .legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);max-width:560px}
.cap-detail .legend span{display:inline-flex;align-items:center;gap:6px}
.cap-detail .legend .sw{width:8px;height:8px;border-radius:2px}
.cap-detail .legend b{color:var(--text-secondary);font-weight:500}

.mw-sec-head{display:flex;align-items:baseline;gap:14px;margin:30px 0 12px;padding:0 4px}
.mw-sec-head h2{font-size:12px;font-weight:500;margin:0;letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary);display:inline-flex;align-items:center;gap:8px}
.mw-sec-head h2 .gdot{display:inline-block;width:8px;height:8px;border-radius:50%}
.mw-sec-head h2 .gdot.active{background:var(--info)}
.mw-sec-head h2 .gdot.review{background:var(--warn)}
.mw-sec-head h2 .gdot.queued{background:var(--text-tertiary)}
.mw-sec-head h2 .gdot.blocked{background:var(--danger)}
.mw-sec-head .count{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.mw-sec-head .meta{font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary)}

.rows{background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.rows .shot-row.now{background:rgba(133,183,235,.05);border-left:2px solid var(--info)}
.mw-empty-section{padding:24px 18px;color:var(--text-tertiary);font-size:12px;font-style:italic;text-align:center;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md)}

/* Hotfix 6 / R3: hero shows ONE primary thumbnail (not a strip). Bumped
   from 78x60 to a square ~200x150 to read as the canonical visual for the
   shot. R2: --broken modifier shows the monogram fallback when the Drive
   thumbnail 404s. */
.hero .hero-refs__thumb{width:200px;height:150px;border-radius:var(--radius-md)}
.hero-refs__thumb-fallback{display:none;font-family:var(--font-mono);font-size:14px;color:var(--text-secondary);letter-spacing:.06em}
.hero-refs__thumb--broken img{display:none}
.hero-refs__thumb--broken .hero-refs__thumb-fallback{display:inline-flex}

/* Hotfix 6 / R2: row + card thumbs get the same --broken fallback so a
   404-ing Drive thumbnail collapses to the monogram (never a broken-img
   icon). The fallback span is always rendered + hidden by default; the
   onerror handler tags the parent with --broken to reveal it. */
.shot-row-x__thumb .shot-row-x__thumb-fallback{display:none}
.shot-row-x__thumb--broken img{display:none}
.shot-row-x__thumb--broken .shot-row-x__thumb-fallback{display:inline-flex}
.shot-row__thumb .ph{display:none}
.shot-row__thumb--broken img{display:none}
.shot-row__thumb--broken .ph{display:inline-flex;font-family:var(--font-mono);font-size:11px;color:var(--text-tertiary);letter-spacing:.05em}
.shot-card .ph .shot-card__ph-fallback{display:none}
.shot-card .ph.shot-card__ph--broken img{display:none}
.shot-card .ph.shot-card__ph--broken .shot-card__ph-fallback{display:inline-flex;font-family:var(--font-mono);font-size:14px;color:var(--text-secondary);letter-spacing:.08em}

/* Hotfix 6 / R3: REFERENCES section — canonical home for per-shot refs.
   Tile grid below the placeholder removed in this hotfix. Form lives in
   the section header. ★ on cover; ☆ on others (studio + assignee artist
   only). */
.ref-section__header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.ref-section__header h4{margin:0}
.ref-section__form{background:var(--bg-elevated);border-radius:var(--radius-sm);border:.5px solid var(--border)}
.ref-section__form-toggle{cursor:pointer;padding:5px 10px;font-size:12px;color:var(--text-secondary);user-select:none;list-style:none}
.ref-section__form-toggle::-webkit-details-marker{display:none}
.ref-section__form-toggle:hover{color:var(--text-primary)}
.ref-section__form[open] .ref-section__form-toggle{color:var(--text-primary)}
.ref-section__form-body{padding:10px 12px;border-top:.5px solid var(--border)}
.ref-section__empty{color:var(--text-secondary);font-size:12px;padding:14px 0;font-style:italic}
.ref-section__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ref-tile{position:relative}
.ref-tile__thumb{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;background:var(--bg-page);border:.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;text-decoration:none}
.ref-tile__thumb:hover{border-color:var(--border-strong)}
.ref-tile__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ref-tile__fallback{display:none;font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);letter-spacing:.06em}
.ref-tile__thumb--broken img{display:none}
.ref-tile__thumb--broken .ref-tile__fallback{display:inline-flex}
.ref-tile__cover-badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.6);color:#F0BB6E;font-size:11px;line-height:1;padding:3px 7px;border-radius:999px;pointer-events:none;font-weight:600;letter-spacing:.02em}
.ref-tile__set-cover-form{position:absolute;top:6px;left:6px;margin:0}
.ref-tile__set-cover{background:rgba(0,0,0,.5);color:rgba(255,255,255,.7);font-size:13px;line-height:1;padding:3px 7px;border:none;border-radius:999px;cursor:pointer;opacity:.4;transition:opacity .12s ease, color .12s ease;font-family:inherit}
.ref-tile:hover .ref-tile__set-cover{opacity:1}
.ref-tile__set-cover:hover{color:#F0BB6E;background:rgba(0,0,0,.7)}

/* Optimistic-UI toast (HANDOFF §4.9). Bottom-right floating slug with Undo. */
.toast{position:fixed;bottom:28px;right:28px;z-index:60;background:var(--bg-elevated);border:.5px solid var(--border-strong);border-radius:var(--radius-md);padding:10px 14px;display:flex;align-items:center;gap:14px;font-size:12px;color:var(--text-primary);box-shadow:none;animation:toast-in .18s ease-out}
@keyframes toast-in{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.toast .toast-msg{color:var(--text-primary)}
.toast .toast-undo{background:transparent;border:none;color:#85B7EB;font-family:inherit;font-size:12px;cursor:pointer;font-weight:500}
.toast .toast-undo:hover{color:var(--text-primary)}

/* ======================================================================
   Bundle 1 — Restored studio financial signals (2026-05-22).
   Dashboard + show page. Studio-only chrome (gated in EJS). Dark-mode
   tokens from tokens.css; no new color palette.
   ====================================================================== */

/* --- B3-b · Dashboard capacity warning strip --- */
.cap-warn{margin:0 0 16px;padding:10px 14px;border-radius:var(--radius-md);border:.5px solid var(--border-strong);display:flex;align-items:center;gap:10px;font-size:13px;background:var(--bg-elevated);color:var(--text-primary)}
.cap-warn--critical{border-color:var(--danger);background:rgba(226,75,74,.10)}
.cap-warn--warn{border-color:var(--warn);background:rgba(239,159,39,.10)}
.cap-warn--info{border-color:var(--border-strong);background:var(--bg-elevated)}
.cap-warn__icon{font-size:14px;color:var(--warn)}
.cap-warn--critical .cap-warn__icon{color:var(--danger)}
.cap-warn__label{font-weight:600}
.cap-warn__msg{flex:1;color:var(--text-secondary)}
.cap-warn__action{color:#85B7EB;text-decoration:none;font-size:12px;font-weight:500}
.cap-warn__action:hover{color:var(--text-primary)}

/* --- Marathon slice 3 · MARGIN card (brief detail) + compact MARGIN line
       (show cards) + Over quote pill --- */
.margin-card{margin:0 0 16px;padding:14px 16px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md)}
.margin-card__eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);font-weight:500;margin:0 0 8px}
.margin-card__label{display:inline-block}
.margin-card__headline{margin:0 0 4px}
.margin-card__amount{font-size:18px;font-weight:500;color:var(--text-primary);letter-spacing:-.01em;font-family:var(--font-mono)}
.margin-card__headline--ok .margin-card__amount{color:#5DCAA5}
.margin-card__headline--low .margin-card__amount{color:var(--warn)}
.margin-card__headline--negative .margin-card__amount{color:var(--danger)}
.margin-card__headline--muted .margin-card__amount{color:var(--text-tertiary);font-style:italic;font-size:14px}
.margin-card__detail{font-size:12px;color:var(--text-secondary);margin:0 0 6px}
.margin-card__detail strong{color:var(--text-primary);font-family:var(--font-mono);font-weight:500}
.margin-card__footnote{font-size:11px;color:var(--text-tertiary);font-style:italic;margin:0}

/* Compact MARGIN line on dashboard / shows show cards. Sits below the
   card-bucket CASH line. Slice 5: 2-line layout — headline + detail.
   Mirrors .card-bucket__headline / .card-bucket__detail visually. */
.card-margin-line{margin:6px 0 0;padding:4px 0 0;font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);border-top:.5px dashed var(--border)}
.card-margin-line__headline{font-size:12px;color:var(--text-secondary)}
.card-margin-line__headline strong{color:var(--text-primary);font-weight:500}
.card-margin-line__detail{font-size:11px;color:var(--text-tertiary);margin-top:2px}
.card-margin-line--negative .card-margin-line__headline strong{color:var(--danger)}
.card-margin-line--muted{font-style:italic;color:var(--text-tertiary)}

/* Slice 5 / Fix 3 — MARGIN card detail mini-grid. 3 columns on wide
   viewports, stacks to single column under 600px. */
.margin-card__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 6px;padding:8px 0;border-top:.5px dashed var(--border);border-bottom:.5px dashed var(--border)}
.margin-card__stat-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);font-weight:500;margin-bottom:2px}
.margin-card__stat-value{font-family:var(--font-mono);font-size:14px;color:var(--text-primary);font-weight:500}
@media (max-width: 600px) {
  .margin-card__stats{grid-template-columns:1fr;gap:6px;padding:6px 0}
}

/* Over quote pill: red treatment matching the existing blocked/danger
   palette but distinct enough that the eye can pick it out from over-
   bucket on the same card. Slice 1's "over bucket" already uses .pill
   .blocked so reuse the same class; this rule is reserved for surfaces
   that want a dedicated style. */
.pill.over-quote{background:rgba(226,75,74,.16);color:var(--danger)}

/* --- B1-a · Token bucket sub-line on show cards (Marathon slice 1 / Fix 3: 2-line readout) --- */
.card-bucket{margin:8px 0 0;padding:6px 0 0;border-top:.5px dashed var(--border);font-family:var(--font-mono);font-size:11px;color:var(--text-secondary)}
.card-bucket__headline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card-bucket__pct{font-weight:600;font-size:12px;color:var(--text-primary)}
.card-bucket__ratio{font-size:11px;color:var(--text-secondary)}
.card-bucket__detail{font-size:11px;color:var(--text-tertiary);margin-top:2px}
.card-bucket--ok .card-bucket__pct{color:#5DCAA5}
.card-bucket--over-amber .card-bucket__pct{color:var(--warn)}
.card-bucket--over-red .card-bucket__pct{color:var(--danger)}
.card-bucket--empty{font-style:italic;color:var(--text-tertiary)}

/* --- Shared dashboard panel skeleton (B1-b, B1-c, B1-d) --- */
.dash-panel{margin:16px 0 0;padding:14px 16px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md)}
.dash-panel__h{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.dash-panel__title{margin:0;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--text-primary)}
.dash-panel__meta{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.dash-panel__action{margin-left:auto;font-size:12px;color:#85B7EB;text-decoration:none;font-weight:500}
.dash-panel__action:hover{color:var(--text-primary)}
.dash-panel__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dash-panel__more{display:inline-block;margin:10px 0 0;font-size:12px;color:#85B7EB;text-decoration:none}
.dash-panel__more:hover{color:var(--text-primary)}
.dash-panel__foot{margin:8px 0 0;font-size:11px;color:var(--text-tertiary)}

/* --- B1-b · Pending briefs panel --- */
.brief-row{display:grid;grid-template-columns:1.4fr 1fr auto auto auto;gap:10px;align-items:baseline;padding:6px 0;border-bottom:.5px dashed var(--border)}
.brief-row:last-child{border-bottom:none}
.brief-row__title{color:var(--text-primary);text-decoration:none;font-size:12px;font-weight:500}
.brief-row__title:hover{color:#85B7EB}
.brief-row__client{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.brief-row__pill{display:inline-block;font-size:10px;padding:1px 7px;border-radius:999px;font-weight:500;letter-spacing:.02em}
.brief-row__pill--pending{background:var(--pill-review-bg);color:var(--pill-review-text)}
.brief-row__date{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.brief-row__amt{font-size:12px;color:var(--text-primary);font-family:var(--font-mono);font-weight:500;text-align:right;min-width:64px}

/* --- B1-c · Artist load strip table --- */
.artist-load{width:100%;border-collapse:collapse;font-size:12px}
.artist-load th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);font-weight:500;padding:4px 8px;border-bottom:.5px solid var(--border)}
.artist-load td{padding:6px 8px;border-bottom:.5px dashed var(--border);color:var(--text-secondary)}
.artist-load tr:last-child td{border-bottom:none}
.artist-load td .dim{color:var(--text-tertiary)}
.artist-load td strong{color:var(--text-primary);font-weight:500}
.artist-load .cell-ok{color:#5DCAA5}
.artist-load .cell-over-amber{color:var(--warn)}
.artist-load .cell-over-red{color:var(--danger);font-weight:600}
.artist-load .combined-row td{font-weight:600;color:var(--text-primary);border-top:.5px solid var(--border)}

/* --- B1-d, B1-k · Ledger-mini table --- */
.ledger-mini{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--font-mono)}
.ledger-mini td{padding:5px 8px;border-bottom:.5px dashed var(--border);color:var(--text-secondary);vertical-align:baseline}
.ledger-mini tr:last-child td{border-bottom:none}
.ledger-mini .reason{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);width:80px}
.ledger-mini .reason--intake{color:#85B7EB}
.ledger-mini .reason--revision{color:var(--warn)}
.ledger-mini .reason--rush{color:var(--danger)}
.ledger-mini .reason--scope_add{color:#F0BB6E}
.ledger-mini .reason--correction{color:#5DCAA5}
.ledger-mini .delta{width:80px;font-weight:500;color:var(--text-primary)}
.ledger-mini .delta.pos{color:#85B7EB}
.ledger-mini .delta.neg{color:var(--text-primary)}
.ledger-mini .ctx a{color:var(--text-primary);text-decoration:none}
.ledger-mini .ctx a:hover{color:#85B7EB}
.ledger-mini .ctx .dim{color:var(--text-tertiary)}
.ledger-mini .date{width:90px;text-align:right}

/* --- B1-e · Show header chip --- */
.show-header__chip{display:inline-block;font-size:10px;padding:1px 7px;border-radius:999px;font-weight:600;letter-spacing:.02em;vertical-align:middle}
.show-header__chip--over-budget{background:rgba(226,75,74,.16);color:#F0997B}
.show-header__chip--watching{background:rgba(239,159,39,.16);color:#F5C4B3}

/* --- B1-g · Blockers banner (visible to both roles) --- */
.blockers-banner{margin:14px 0;padding:12px 14px;background:rgba(226,75,74,.06);border:.5px solid rgba(226,75,74,.30);border-left:2px solid var(--danger);border-radius:var(--radius-md)}
.blockers-banner__h{display:flex;align-items:baseline;gap:14px;margin:0 0 8px}
.blockers-banner__h strong{font-size:13px;color:var(--text-primary)}
.blockers-banner__p6{font-size:11px;color:var(--text-tertiary);font-style:italic}
.blockers-banner__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.blocker-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:4px 0;font-size:12px;color:var(--text-secondary)}
.blocker-row__who strong{color:var(--text-primary)}
.blocker-row__shot{color:#85B7EB;text-decoration:none;font-family:var(--font-mono)}
.blocker-row__shot:hover{color:var(--text-primary)}
.blocker-row__reason{color:var(--text-secondary)}
.blocker-row__meta{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.blocker-row__acts{margin-left:auto;display:inline-flex;gap:6px}

/* --- B1-f · Metric strip --- */
.metric-strip{margin:14px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.metric-card{padding:12px 14px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md)}
.metric-card header{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);font-weight:500;margin:0 0 6px}
.metric-card__big{margin:0;font-size:22px;font-weight:500;color:var(--text-primary);letter-spacing:-.01em}
.metric-card__big .dim{font-size:13px;color:var(--text-tertiary);font-weight:400}
.metric-card__sub{margin:4px 0 0;font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.metric-card--bucket.metric-card--ok .metric-card__big{color:#5DCAA5}
.metric-card--bucket.metric-card--over-amber .metric-card__big{color:var(--warn)}
.metric-card--bucket.metric-card--over-red .metric-card__big{color:var(--danger)}
.metric-card--bucket.metric-card--over-red{border-color:rgba(226,75,74,.30)}
.metric-card--bucket.metric-card--over-amber{border-color:rgba(239,159,39,.30)}
/* Marathon slice 3 — MARGIN metric card tier colors. Mirrors bucket
   semantics so studio scans CASH and MARGIN side-by-side with the same
   color grammar. */
.metric-card--margin.metric-card--ok .metric-card__big{color:#5DCAA5}
.metric-card--margin.metric-card--over-amber .metric-card__big{color:var(--warn)}
.metric-card--margin.metric-card--over-red .metric-card__big{color:var(--danger)}
.metric-card--margin.metric-card--over-red{border-color:rgba(226,75,74,.30)}
.metric-card--margin.metric-card--over-amber{border-color:rgba(239,159,39,.30)}
/* X2-B1/B2/B3 · clickable metric cards */
.metric-link{display:block;text-decoration:none;color:inherit;border-radius:var(--radius-md);transition:transform .08s ease}
.metric-link:hover .metric-card{border-color:var(--accent,#85B7EB)}
.metric-link:focus-visible{outline:2px solid var(--accent,#85B7EB);outline-offset:2px}
/* X2-B4 · clickable KPI tiles */
.kpi-link{display:block;text-decoration:none;color:inherit;border-radius:var(--radius-md)}
.kpi-link:hover .kpi{border-color:var(--accent,#85B7EB)}
.kpi-link:focus-visible{outline:2px solid var(--accent,#85B7EB);outline-offset:2px}

/* --- B1-h · Token purchases panel --- */
.purchases-panel{margin:16px 0;padding:14px 16px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md)}
.purchases-panel__h{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.purchases-panel__h h3{margin:0;font-size:13px;font-weight:600;color:var(--text-primary)}
.purchases-panel__h .dim{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.purchases-panel__rows{list-style:none;margin:0;padding:0;font-family:var(--font-mono);font-size:12px}
.purchase-row{display:grid;grid-template-columns:90px 100px 1fr;gap:10px;padding:5px 0;border-bottom:.5px dashed var(--border);color:var(--text-secondary)}
.purchase-row:last-of-type{border-bottom:none}
.purchase-row .date{color:var(--text-tertiary)}
.purchase-row .delta{color:#5DCAA5;font-weight:500}
.purchases-panel__empty{margin:0 0 10px;font-size:12px;font-style:italic}
.purchases-panel__form{margin:12px 0 0;display:grid;grid-template-columns:140px 1fr auto;gap:8px;align-items:center}
.purchases-panel__form input{background:var(--bg-page);color:var(--text-primary);border:.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 9px;font-family:inherit;font-size:12px;width:100%}

/* --- B1-j · Show notes panel --- */
.show-notes{margin:16px 0;padding:14px 16px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md)}
.show-notes__h{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.show-notes__h h3{margin:0;font-size:13px;font-weight:600;color:var(--text-primary)}
.show-notes__h .dim{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.show-notes__rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.show-notes__row{padding:8px 0;border-bottom:.5px dashed var(--border)}
.show-notes__row:last-child{border-bottom:none}
.show-notes__meta{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono);margin:0 0 4px}
.show-notes__body{margin:0;font-size:12px;color:var(--text-primary);line-height:1.55;white-space:pre-wrap}
.show-notes__empty{margin:0 0 10px;font-size:12px;font-style:italic}
.show-notes__form{margin:12px 0 0;display:flex;gap:8px;align-items:flex-start;flex-direction:column}
.show-notes__form textarea{width:100%;background:var(--bg-page);color:var(--text-primary);border:.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 10px;font-family:inherit;font-size:12px;resize:vertical;min-height:48px}

/* --- B1-k · Show recent activity --- */
.show-recent{margin:16px 0;padding:14px 16px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md)}
.show-recent__h{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.show-recent__h h3{margin:0;font-size:13px;font-weight:600;color:var(--text-primary)}
.show-recent__h .dim{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}
.show-recent__empty{margin:0;font-size:12px;color:var(--text-tertiary);font-style:italic}

/* ======================================================================
   Bundle 2 — Restored studio shot-detail panels (2026-05-22).
   Studio Notes + Token ledger + Cost override + Commit-revision CTA.
   Sibling main-column panels. PROPERTIES rail uses existing .field
   styling (no overrides here).
   ====================================================================== */

.shot-panel{margin:14px 0 0;padding:14px 16px;background:var(--bg-surface);border:.5px solid var(--border);border-radius:var(--radius-md)}
.shot-panel__h{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.shot-panel__title{margin:0;font-size:13px;font-weight:600;color:var(--text-primary)}
.shot-panel__meta{font-size:11px;color:var(--text-tertiary);font-family:var(--font-mono)}

/* --- B2-e · Commit-revision CTA --- */
.shot-commit-revision{border-left:2px solid var(--warn)}
.shot-commit-revision__body{margin:0 0 10px;font-size:12px;color:var(--text-secondary);line-height:1.55}
.shot-commit-revision__form{margin:0}

/* --- B2-a · Studio notes --- */
.shot-studio-notes__body{margin:0 0 10px;padding:10px 12px;background:var(--bg-page);border:.5px solid var(--border);border-radius:var(--radius-sm);font-size:12px;color:var(--text-primary);line-height:1.55;white-space:pre-wrap}
.shot-studio-notes__empty{margin:0 0 10px;font-size:12px;font-style:italic}
.shot-studio-notes__form{display:flex;flex-direction:column;gap:8px}
.shot-studio-notes__form textarea{width:100%;background:var(--bg-page);color:var(--text-primary);border:.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 10px;font-family:inherit;font-size:12px;resize:vertical;min-height:48px}
.shot-studio-notes__form button{align-self:flex-start}

/* --- B2-b · Token ledger panel --- */
.shot-ledger__entries{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-size:12px}
.shot-ledger__entry{display:grid;grid-template-columns:90px 90px 1fr;gap:10px;padding:6px 0;border-bottom:.5px dashed var(--border);align-items:baseline}
.shot-ledger__entry:last-child{border-bottom:none}
.shot-ledger__entry .reason{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary)}
.shot-ledger__entry .reason--intake{color:#85B7EB}
.shot-ledger__entry .reason--revision{color:var(--warn)}
.shot-ledger__entry .reason--rush{color:var(--danger)}
.shot-ledger__entry .reason--scope_add{color:#F0BB6E}
.shot-ledger__entry .reason--correction{color:#5DCAA5}
.shot-ledger__entry .delta{font-weight:500;color:var(--text-primary)}
.shot-ledger__entry .delta--pos{color:#5DCAA5}
.shot-ledger__entry .delta--neg{color:#F0997B}
.shot-ledger__entry .note{color:var(--text-secondary);grid-column:1 / -1;font-family:var(--font-sans);font-size:12px;padding-left:0}
.shot-ledger__entry .meta{grid-column:1 / -1;font-size:11px;color:var(--text-tertiary)}
.shot-ledger__empty{margin:0 0 10px;font-size:12px;font-style:italic}
.shot-ledger__add{margin-top:8px;border-top:.5px solid var(--border);padding-top:8px}
.shot-ledger__add > summary{font-size:12px;color:var(--text-secondary);cursor:pointer;padding:6px 0;list-style:none}
.shot-ledger__add > summary::-webkit-details-marker{display:none}
.shot-ledger__add > summary:hover{color:var(--text-primary)}
.shot-ledger__form{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.shot-ledger__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot-ledger__row label,.shot-ledger__note-label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em}
.shot-ledger__row input,.shot-ledger__row select,.shot-ledger__note-label input{background:var(--bg-page);color:var(--text-primary);border:.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 9px;font-family:inherit;font-size:13px;width:100%;text-transform:none}
.shot-ledger__form button{align-self:flex-start}

/* --- B2-c · Cost override --- */
.shot-cost-override__breakdown{width:100%;border-collapse:collapse;margin:0 0 8px;font-family:var(--font-mono);font-size:12px}
.shot-cost-override__breakdown td{padding:5px 8px;border-bottom:.5px dashed var(--border);color:var(--text-secondary)}
.shot-cost-override__breakdown td:first-child{width:110px;color:var(--text-tertiary);font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.shot-cost-override__breakdown tr:last-child td{border-bottom:none;font-weight:500;color:var(--text-primary)}
.shot-cost-override__formula-link{margin:0 0 12px;font-size:11px}
.shot-cost-override__formula-link a{color:#85B7EB;text-decoration:none}
.shot-cost-override__formula-link a:hover{color:var(--text-primary)}
.shot-cost-override__form{margin:0;display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:.5px solid var(--border)}
.shot-cost-override__row{display:flex;gap:10px;align-items:flex-end}
.shot-cost-override__row label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em;flex:1}
.shot-cost-override__row input{background:var(--bg-page);color:var(--text-primary);border:.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 9px;font-family:var(--font-mono);font-size:13px;width:100%}
.shot-cost-override__override-note{margin:8px 0 0;padding:8px 10px;background:rgba(239,159,39,.10);border:.5px solid rgba(239,159,39,.30);border-radius:var(--radius-sm);font-size:11px;color:var(--text-secondary)}
.shot-cost-override__override-note form{display:inline}
.shot-cost-override__revert-btn{background:transparent;border:none;color:#85B7EB;font-family:inherit;font-size:11px;cursor:pointer;padding:0;text-decoration:underline}
.shot-cost-override__revert-btn:hover{color:var(--text-primary)}
.shot-cost-override__budget{margin:8px 0 0;font-size:11px;line-height:1.55}

/* ======================================================================
   Bundle 3 / B3-a — View-as banner override for the new shell.
   Adds dark-mode amber styling + sticky top positioning above the
   sticky topbar (.topbar has z-index 10; banner gets 11). Doesn't
   depend on the Tailwind JIT — the partial still keeps the Tailwind
   utility classes so the legacy chrome continues to render.
   ====================================================================== */
.view-as-banner{position:sticky;top:0;z-index:11;background:rgba(186,117,23,0.18) !important;color:#FAEEDA !important;border:none;border-bottom:.5px solid rgba(186,117,23,0.45) !important;backdrop-filter:blur(8px);font-family:var(--font-sans)}
.view-as-banner__inner{max-width:1280px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px}
.view-as-banner__label{color:#FAEEDA}
.view-as-banner__label strong{color:#fff;font-weight:600}
.view-as-banner__role{color:rgba(250,238,218,0.7);font-family:var(--font-mono);font-size:11px}
.view-as-banner__exit{margin:0}
.view-as-banner__exit button{background:transparent;border:none;color:#FAEEDA;text-decoration:underline;font-family:inherit;font-size:12px;cursor:pointer;padding:0}
.view-as-banner__exit button:hover{color:#fff}

/* fmplan session 4: Studio Home audit panels */
.dash-panel--audit { margin-top: var(--space-3, 12px); }
.dash-panel--audit summary { cursor: pointer; padding: 6px 0; }
.dash-panel--audit.dash-panel--warn { border-left: 3px solid var(--color-amber, #c80); padding-left: 8px; }
.audit-list { list-style: none; padding-left: 0; margin: 8px 0 0; }
.audit-list li { padding: 4px 0; font-size: 13px; line-height: 1.5; }
.audit-list code { background: var(--color-bg-2, #f5f5f5); padding: 1px 4px; border-radius: 2px; font-size: 12px; }
.audit-list__when { color: var(--color-fg-muted, #888); font-size: 12px; margin-left: 6px; }
.audit-list__who { color: var(--color-fg-muted, #888); font-size: 12px; margin-left: 6px; }
.audit-list pre { background: var(--color-bg-2, #f5f5f5); padding: 6px 8px; border-radius: 3px; font-size: 11px; white-space: pre-wrap; word-break: break-all; }

/* fmplan session 6: brief burn forecast tile */
.dash-panel--forecast { margin-bottom: var(--space-3, 12px); }
.forecast-rows { list-style: none; padding: 0; margin: 8px 0 0; }
.forecast-row { display: flex; gap: 12px; padding: 6px 0; font-size: 13px; align-items: baseline; }
.forecast-row__title { font-weight: 500; flex: 0 0 auto; }
.forecast-row__pct, .forecast-row__runway, .forecast-row__trend { color: var(--text-secondary, #666); }
.forecast-row__runway--red, .forecast-row__trend--red { color: #c33; font-weight: 500; }
.forecast-row__runway--amber, .forecast-row__trend--amber { color: #c80; }
.forecast-row__runway--idle { color: var(--text-tertiary, #999); font-style: italic; }

/* fmplan session 7: revision-spiral tile + per-shot round chip */
.dash-panel--spiral { border-left: 3px solid #c33; padding-left: 8px; margin-bottom: var(--space-3, 12px); }
.spiral-rows { list-style: none; padding: 0; margin: 8px 0 0; }
.spiral-row { padding: 6px 0; font-size: 13px; display: flex; gap: 12px; align-items: baseline; }
.spiral-row__dismiss { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border, #ddd); border-radius: 3px; background: transparent; cursor: pointer; }
.spiral-row__dismiss:hover { background: var(--color-bg-2, #f5f5f5); }
.chip-round { font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-left: 4px; }
.chip-round--ok { background: #e8f5e9; color: #2e7d32; }
.chip-round--limit { background: #fff8e6; color: #b86e00; }
.chip-round--over { background: #ffe6e6; color: #c33; font-weight: 500; }

/* fmplan session 8: client-safe charge explainer */
.panel--charge-explainer { background: var(--bg-surface, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: var(--radius-lg, 8px); padding: 14px 16px; margin-bottom: 14px; }
.panel--charge-explainer .panel__title { font-size: 14px; font-weight: 600; margin: 0; }
.panel--charge-explainer .panel__meta { font-size: 11px; color: var(--text-tertiary, #888); margin-left: 8px; }
.charge-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.charge-row--total { padding: 6px 0 10px; border-bottom: 1px solid var(--border, #e0e0e0); margin-bottom: 6px; }
.charge-row--correction .charge-row__value.neg { color: #2e7d32; }
.panel__footer--muted { font-size: 12px; color: var(--text-tertiary, #888); padding-top: 8px; }

/* fmplan session 9: stale-brief chip */
.brief-row__pill--stale {
  display: inline-block;
  background: #fff8e6;
  color: #b86e00;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 4px;
  font-weight: 500;
}