/* SaturnDesign Studio — the grader's desk as a working instrument.
   Chrome is dense, muted, UNTILTED. Tilt/tape/stamps belong to the paper
   objects on the desk (spec sheet, verdicts, pins) — never to the chrome.
   One accent (--stamp) = live/PASS/action. Red ink = REJECT/risk only.
   Tokens: 8px grid, type ratio 1.333, compose 2026-08-01. */

:root{
  --paper:#ece7db; --paper-2:#e0dac9; --card:#ffffff;
  --ink:#141312; --ink-soft:#6b675f; --hair:rgba(20,19,18,.22);
  --stamp:#2e5b3b; --red:#7c2410; --pencil:#3d3a35;
  --tape:rgba(190,178,148,.7);
  --ease:cubic-bezier(.2,.9,.25,1);
}

*{box-sizing:border-box; margin:0}
html{scrollbar-color:var(--ink-soft) var(--paper)}
body{background:var(--paper); color:var(--ink);
  font:16px/1.5 Arial, "Helvetica Neue", sans-serif;
  height:100vh; display:flex; flex-direction:column; overflow:hidden}
body::before{content:""; position:fixed; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(20,19,18,.06) 1px, transparent 1.3px);
  background-size:5px 5px}
.cond{font-family:"Arial Narrow", Impact, "Franklin Gothic Medium", system-ui, sans-serif;
  font-stretch:condensed; text-transform:uppercase; letter-spacing:.02em}
.mono{font-family:"Courier New", ui-monospace, monospace}
a{color:var(--ink)}
kbd{font:11px/1 "Courier New", monospace; border:1px solid var(--hair);
  padding:2px 4px; background:var(--paper); color:var(--ink-soft); margin-left:6px}
:focus-visible{outline:2.5px solid var(--stamp); outline-offset:1px}
[hidden]{display:none !important}

/* ---------- top bar ---------- */
.bar{display:flex; align-items:center; gap:16px; padding:0 16px;
  min-height:52px; border-bottom:3px solid var(--ink); background:var(--paper); flex:0 0 auto}
.bar-word{font-size:21.3px; font-weight:900; text-decoration:none; letter-spacing:0}
.bar-word b{color:var(--stamp)}
.bar-app{font-size:16px; color:var(--paper); background:var(--ink); padding:4px 10px;
  letter-spacing:.08em}
.bar-modes{display:flex; gap:8px; margin-left:16px}
.mode-tab{font-size:16px; min-height:40px; padding:4px 16px; cursor:pointer;
  border:2px solid var(--ink); border-bottom-width:4px; background:var(--paper); color:var(--ink)}
.mode-tab[aria-pressed="true"]{background:var(--ink); color:var(--paper);
  box-shadow:3px 3px 0 var(--stamp)}
.mode-tab[aria-pressed="true"] kbd{background:var(--ink); color:var(--paper-2); border-color:var(--ink-soft)}
.bar-right{margin-left:auto; display:flex; align-items:center; gap:16px}
.bar-cmd{font-size:13px; border:1.5px dashed var(--ink-soft); background:transparent;
  color:var(--ink); padding:8px 12px; cursor:pointer; min-height:40px}
.bar-link{font-size:14px; letter-spacing:.08em; text-decoration:none; border-bottom:2px solid transparent}
.bar-link:hover{border-bottom-color:var(--stamp)}

/* ---------- deck: rail | desk | ticket ---------- */
.deck{display:grid; grid-template-columns:304px 1fr 272px; flex:1 1 auto; min-height:0}

/* left rail */
.rail{border-right:2px solid var(--ink); overflow-y:auto; background:var(--paper)}
.panel{padding:24px 16px; border-bottom:1.5px solid var(--hair)}
.panel-h{font-size:14px; letter-spacing:.14em; color:var(--stamp); margin-bottom:8px}
.panel-sub{font-size:13px; color:var(--ink-soft); margin-bottom:12px}
textarea, input[type="text"]{width:100%; font:16px/1.45 Arial, sans-serif; color:var(--ink);
  background:var(--card); border:2px solid var(--ink); padding:10px; resize:vertical}
textarea::placeholder, input::placeholder{color:var(--ink-soft)}
.opt{margin:12px 0}
.opt summary{font-size:13px; letter-spacing:.1em; cursor:pointer; color:var(--ink)}
.opt-hint{color:var(--ink-soft); font-size:11px; margin-left:6px; text-transform:none}
.opt input{margin-top:8px}
.fineprint{font-size:12.5px; color:var(--ink-soft); margin-top:10px}

.act{display:inline-flex; align-items:center; justify-content:center; width:100%;
  min-height:44px; padding:8px 16px; margin-top:12px; cursor:pointer;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  font-size:15px; letter-spacing:.05em; text-decoration:none}
.act.primary{background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--stamp)}
.act.primary:hover{box-shadow:2px 2px 0 var(--stamp); transform:translate(1px,1px)}
.act.ghost{border-style:dashed; border-color:var(--ink-soft); color:var(--ink)}
.act[aria-pressed="true"]{background:var(--pencil); color:var(--paper)}

.doors-mini{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.door-btn{min-height:44px; border:1.5px solid var(--ink); background:var(--card);
  cursor:pointer; font-size:13px; letter-spacing:.06em; color:var(--ink); padding:4px 8px}
.door-btn:hover{background:var(--paper-2)}

/* token cockpit */
.cockpit{display:flex; flex-direction:column; gap:0; margin-top:4px}
.tok-row{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  padding:6px 0; border-bottom:1px solid var(--hair)}
.tok-name{font-size:12px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tok-in{display:flex; align-items:center; gap:6px}
.tok-in input[type="color"]{inline-size:32px; block-size:28px; padding:0; border:1.5px solid var(--ink);
  background:none; cursor:pointer}
.tok-in input[type="text"]{width:88px; font-size:16px; padding:4px 6px; border-width:1.5px}
.tok-in input[type="number"]{width:64px; font:16px "Courier New", monospace; padding:4px 6px;
  border:1.5px solid var(--ink); color:var(--ink); background:var(--card)}
.tok-unit{font-size:11px; color:var(--ink-soft)}
.guardrails{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.rail-chip{font:12px "Courier New", monospace; padding:4px 8px; border:1.5px solid var(--stamp);
  color:var(--stamp); background:var(--card)}
.rail-chip.fail{border-color:var(--red); color:var(--red); font-weight:700}
.rail-chip.na{border-color:var(--ink-soft); color:var(--ink-soft)}

/* ---------- desk ---------- */
.desk{overflow-y:auto; min-width:0; background:var(--paper-2)}
.desk-view{padding:32px; min-height:100%}

.empty{max-width:52ch; margin:96px auto 0; text-align:center}
.empty-kicker{font-size:14px; letter-spacing:.16em; color:var(--stamp);
  border:2px solid var(--stamp); display:inline-block; padding:3px 10px;
  transform:rotate(-1.5deg); background:var(--paper); margin-bottom:24px}
.empty-line{font-size:16px; color:var(--ink); margin-bottom:16px}
.empty-keys{font-size:12.5px; color:var(--pencil)} /* ink-soft fails AA on paper-2 (4.03:1) */

/* the galley proof — spec sheet as a paper object */
.galley{position:relative; background:var(--card); border:2px solid var(--ink);
  box-shadow:10px 12px 0 rgba(20,19,18,.22); transform:rotate(-.6deg);
  padding:32px; max-width:920px; margin:16px auto 40px}
.galley::before{content:""; position:absolute; top:-14px; left:48px; width:104px; height:28px;
  background:var(--tape); box-shadow:0 1px 2px rgba(20,19,18,.15); transform:rotate(-2deg)}
.g-kicker{font-size:13px; letter-spacing:.16em; color:var(--stamp); margin-bottom:8px}
.g-direction{font-size:28.4px; line-height:1.15; font-weight:900; margin-bottom:8px}
.g-brief{font-size:13px; color:var(--ink-soft); margin-bottom:24px}
.g-sec{border-top:1.5px solid var(--hair); padding:16px 0}
.g-sec h3{font-size:13px; letter-spacing:.14em; margin-bottom:12px; color:var(--ink)}
.g-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.g-list{padding-left:18px; font-size:13.5px; display:flex; flex-direction:column; gap:6px}
.g-list.avoid{color:var(--red)}
.g-list.avoid li::marker{content:"× "}
.g-list.steal li::marker{content:"→ "; color:var(--stamp)}
.stack-chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:12px; border:1.5px solid var(--ink); padding:4px 10px; background:var(--paper);
  letter-spacing:.06em; text-decoration:none; color:var(--ink); display:inline-block}
a.chip:hover{background:var(--ink); color:var(--paper)}
a.chip:hover .tier{color:var(--paper-2)}
.chip .tier{color:var(--stamp); font-weight:700; margin-right:4px}
.uniq{border:2px solid var(--stamp); padding:12px 16px; font-size:13.5px; background:var(--paper);
  transform:rotate(.4deg); margin-top:8px}
/* palette row */
.swatches{display:flex; flex-wrap:wrap; gap:12px}
.swatch{width:120px}
.swatch-color{height:56px; border:2px solid var(--ink)}
.swatch-name{font-size:11px; letter-spacing:.08em; margin-top:6px}
.swatch-hex{font-size:11px; color:var(--ink-soft)}
.swatch-ratio{font:11px "Courier New", monospace; margin-top:4px; padding:2px 4px;
  border:1px solid var(--stamp); color:var(--stamp); display:inline-block}
.swatch-ratio.fail{border-color:var(--red); color:var(--red)}
/* live type specimen */
.spec-line{display:flex; align-items:baseline; gap:16px; border-bottom:1px solid var(--hair);
  padding:8px 0; overflow:hidden; white-space:nowrap}
.spec-meta{font:11px "Courier New", monospace; color:var(--ink-soft); flex:0 0 96px}
/* checklist with attestation boxes */
.checklist{display:flex; flex-direction:column; gap:8px; font-size:13.5px}
.checklist label{display:flex; gap:10px; align-items:flex-start; cursor:pointer}
.checklist input{width:16px; height:16px; accent-color:var(--stamp); margin-top:2px; flex:0 0 auto}

/* the press — scaffold preview */
.press{max-width:1100px; margin:0 auto}
.press-bar{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:2px solid var(--ink); border-bottom:none; background:var(--paper); padding:8px 12px}
.press-label{font-size:14px; letter-spacing:.12em; color:var(--ink)}
.press-note{font-size:11px; color:var(--ink-soft)}
.press-viewport{margin-left:auto; display:flex; gap:4px}
.vp-btn{font-size:12px; min-height:32px; padding:2px 10px; border:1.5px solid var(--ink);
  background:var(--paper); cursor:pointer; letter-spacing:.06em}
.vp-btn[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.press-bar .act{width:auto; margin:0; min-height:36px; font-size:13px}
.press-frame{border:2px solid var(--ink); background:#fff; overflow:auto; height:min(62vh, 640px)}
.press-frame iframe, .canvas-stage iframe{display:block; border:none; width:100%; height:100%; background:#fff}
.press-frame.vp-mobile iframe{width:390px; margin:0 auto; box-shadow:0 0 0 1px var(--hair)}

/* ---------- editor canvas ---------- */
.canvas-wrap{max-width:1200px; margin:0 auto}
.canvas-bar{display:flex; align-items:center; gap:16px; border:2px solid var(--ink);
  border-bottom:none; background:var(--paper); padding:8px 12px; flex-wrap:wrap}
.canvas-title{font-size:12.5px; color:var(--ink-soft)}
.verdict-slot{min-height:36px; display:flex; align-items:center}
.canvas-scroll{border:2px solid var(--ink); background:#fff; overflow:auto; height:calc(100vh - 220px)}
.canvas-stage{position:relative; min-height:100%}
.canvas-stage iframe{height:2400px}
.canvas-stage.vp-mobile iframe{width:390px}
.canvas-stage.noting iframe{pointer-events:none}
.canvas-stage.noting{cursor:crosshair}
/* pin overlay */
.pin-layer{position:absolute; inset:0; pointer-events:none}
.pin{position:absolute; pointer-events:auto; cursor:pointer; z-index:3}
.pin-user{width:28px; height:28px; border-radius:50%; border:2.5px solid var(--pencil);
  background:rgba(236,231,219,.92); color:var(--pencil); font:700 13px/23px "Courier New", monospace;
  text-align:center; transform:rotate(-6deg); box-shadow:2px 2px 0 rgba(20,19,18,.25)}
.pin-user.resolved{border-color:var(--stamp); color:var(--stamp); text-decoration:line-through}
.pin-grader{max-width:220px; background:rgba(255,255,255,.96); border:2px solid var(--red);
  color:var(--red); font:12px/1.35 "Courier New", monospace; padding:6px 8px;
  transform:rotate(-1.2deg); box-shadow:3px 3px 0 rgba(124,36,16,.25)}
.pin-hl{position:absolute; border:2px dashed var(--pencil); pointer-events:none; z-index:2}

/* verdict stamps */
.stamp-verdict{font-family:"Arial Narrow", Impact, sans-serif; font-stretch:condensed;
  text-transform:uppercase; font-weight:900; font-size:21.3px; letter-spacing:.08em;
  padding:4px 14px; border:3px double currentColor; transform:rotate(-4deg);
  animation:stamp-in .24s var(--ease)}
.stamp-verdict.pass{color:var(--stamp)}
.stamp-verdict.revise{color:var(--pencil)}
.stamp-verdict.reject{color:var(--red)}
@keyframes stamp-in{from{transform:rotate(-4deg) scale(1.4); opacity:0}
  to{transform:rotate(-4deg) scale(1); opacity:1}}

/* ---------- job ticket ---------- */
.ticket{border-left:2px solid var(--ink); background:var(--paper); display:flex;
  flex-direction:column; min-height:0}
.ticket-head{display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1.5px solid var(--hair)}
.ticket-head h2{font-size:14px; letter-spacing:.14em; color:var(--stamp)}
.ticket-toggle{border:1.5px solid var(--ink); background:var(--paper); cursor:pointer;
  width:32px; height:32px; font-size:16px}
.ticket-log{list-style:none; padding:12px 16px; overflow-y:auto; flex:1 1 auto;
  display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--ink)}
.ticket-log li{border-bottom:1px dotted var(--hair); padding-bottom:6px; overflow-wrap:anywhere}
.ticket-log .t{color:var(--ink-soft); margin-right:6px}
.ticket-log .job{color:var(--stamp); font-weight:700; margin-right:6px}
.ticket-log li.risk .job{color:var(--red)}
.ticket-verdict,.ticket-notes{border-top:2px solid var(--ink); padding:12px 16px;
  max-height:40vh; overflow-y:auto}
.ticket-verdict h3,.ticket-notes h3{font-size:13px; letter-spacing:.14em; margin-bottom:8px}
.ticket-notes h4{font-size:11px; letter-spacing:.12em; color:var(--red); margin:12px 0 6px}
#verdict-body{font-size:12.5px}
#verdict-body .tell{font:12px "Courier New", monospace; color:var(--red); display:block; margin:4px 0}
#verdict-body .fix{font-size:12.5px; margin:6px 0; padding-left:14px; position:relative}
#verdict-body .fix::before{content:"→"; position:absolute; left:0; color:var(--stamp)}
#notes-list,#notes-detached{list-style:none; display:flex; flex-direction:column; gap:8px; font-size:12.5px}
.note-item b{font:700 12px "Courier New", monospace; color:var(--pencil)}
.note-item .note-sel{font:11px "Courier New", monospace; color:var(--ink-soft); display:block}
.note-item button{font-size:11px; border:1px solid var(--hair); background:none; cursor:pointer;
  color:var(--ink-soft); margin-top:2px; padding:2px 6px}

/* ---------- dialogs ---------- */
.palette{border:3px solid var(--ink); background:var(--paper); color:var(--ink);
  width:min(560px, 92vw); padding:0; box-shadow:12px 14px 0 rgba(20,19,18,.3)}
.palette::backdrop{background:rgba(20,19,18,.45)}
#palette-q{border:none; border-bottom:2px solid var(--ink); font-size:18px; padding:16px; background:var(--card)}
#palette-q:focus-visible{outline:2.5px solid var(--stamp); outline-offset:-3px}
#palette-list{list-style:none; max-height:320px; overflow-y:auto; padding:8px 0}
#palette-list li{padding:10px 16px; font-size:15px; cursor:pointer; display:flex; justify-content:space-between}
#palette-list li kbd{margin-left:16px}
#palette-list li[aria-selected="true"]{background:var(--ink); color:var(--paper)}
#palette-list li[aria-selected="true"] kbd{background:var(--ink); color:var(--paper-2)}
.sheet{border:3px solid var(--ink); background:var(--paper); width:min(720px, 94vw);
  padding:24px; box-shadow:12px 14px 0 rgba(20,19,18,.3)}
.sheet::backdrop{background:rgba(20,19,18,.45)}
.sheet h2{font-size:21.3px; margin-bottom:16px}
.sheet textarea{font:13px/1.5 "Courier New", monospace}
.sheet-acts{display:flex; gap:12px}
.sheet-acts .act{width:auto; min-width:160px}

/* annotation popover */
.note-pop{position:fixed; z-index:40; width:min(320px, 88vw); background:var(--paper);
  border:2.5px solid var(--pencil); padding:12px; box-shadow:6px 6px 0 rgba(20,19,18,.3)}
.note-target{font-size:11px; color:var(--ink-soft); margin-bottom:8px; overflow-wrap:anywhere}
.note-pop textarea{font-size:16px}
.note-pop .act{min-height:40px; margin-top:8px}

/* live pairing */
.pair-code{font-size:28.4px; font-weight:700; letter-spacing:.18em; padding:8px 0;
  color:var(--stamp)}
.term{border:2px solid var(--ink); margin:8px 0 12px; background:var(--ink)}
.term-bar{display:flex; align-items:center; justify-content:space-between; padding:6px 10px;
  border-bottom:1px solid var(--ink-soft)}
.term-title{font-size:11px; color:var(--paper-2)}
.term .copy{border:1.5px solid var(--paper-2); background:transparent; color:var(--paper);
  font-size:12px; padding:4px 10px; cursor:pointer; min-height:32px}
.term pre{color:var(--paper); font-size:11.5px; line-height:1.5; padding:10px;
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:140px; overflow-y:auto}
.canvas-scroll.push-flash{animation:push-flash .5s var(--ease)}
@keyframes push-flash{from{box-shadow:inset 0 0 0 4px var(--stamp)}to{box-shadow:inset 0 0 0 0 transparent}}
@media (prefers-reduced-motion: reduce){.canvas-scroll.push-flash{animation:none}}

/* collapsed ticket — spine only */
body.ticket-closed .deck{grid-template-columns:304px 1fr 56px}
body.ticket-closed .ticket-log,
body.ticket-closed .ticket-verdict,
body.ticket-closed .ticket-notes{display:none}
body.ticket-closed .ticket-head{flex-direction:column; gap:8px}
body.ticket-closed .ticket-head h2{writing-mode:vertical-rl; text-orientation:mixed}

/* rubric chip row inside the verdict report */
.rubric{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  body{overflow:auto; height:auto}
  .deck{grid-template-columns:1fr; height:auto}
  body.ticket-closed .deck{grid-template-columns:1fr} /* outranks the collapse rule's specificity */
  .rail{border-right:none; border-bottom:2px solid var(--ink); order:1}
  .desk{order:2; overflow:visible}
  .ticket{order:3; border-left:none; border-top:2px solid var(--ink); max-height:50vh}
  .canvas-scroll{height:70vh}
  .bar{flex-wrap:wrap; padding:8px 16px; gap:8px}
  .bar-right{margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  .stamp-verdict{animation:none}
  .act.primary:hover{transform:none}
}