/* ACCME program dashboard stylesheet. Tokens, component sizes and the evidence line come from the
   design prototype (infra/accme/prototype/accme.css) and docs/accme-dashboard-design.md. The
   additions for the built screens are at the end and add no token. */
@font-face{font-family:"Archivo";src:url("fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url("fonts/chivo-mono-var.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* shell (the site's charcoal, kept dark in both themes) */
  --rail:oklch(0.155 0.006 75);--rail-2:oklch(0.215 0.008 75);--rail-rule:oklch(0.3 0.008 75);
  --rail-ink:oklch(0.95 0.014 88);--rail-ink-2:oklch(0.76 0.014 85);
  /* work area */
  --ground:oklch(0.968 0.006 85);--surface:oklch(0.993 0.003 85);--sunk:oklch(0.94 0.008 85);
  --rule:oklch(0.88 0.01 85);--rule-strong:oklch(0.74 0.012 82);
  --ink:oklch(0.21 0.012 75);--ink-2:oklch(0.38 0.012 75);--ink-3:oklch(0.5 0.012 75);
  /* brand accent: selected, current, waiting on you */
  --tally:oklch(0.81 0.135 74);--tally-wash:oklch(0.93 0.06 82);--tally-ink:oklch(0.44 0.095 68);--on-tally:oklch(0.2 0.03 75);
  /* decision states */
  --pass:oklch(0.47 0.105 155);--pass-wash:oklch(0.94 0.04 155);
  --block:oklch(0.5 0.17 30);--block-wash:oklch(0.94 0.035 35);
  --sealed:oklch(0.46 0.1 255);--sealed-wash:oklch(0.94 0.025 255);
  --focus:oklch(0.55 0.16 255);
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;--mono:"Chivo Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:3px;--rail-w:232px;--bar-h:52px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 0.875rem/1.45 var(--sans);font-variation-settings:"wdth" 100;font-feature-settings:"tnum" 1}
::selection{background:var(--tally);color:var(--on-tally)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:var(--sealed);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--mono);font-size:0.75rem;letter-spacing:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh}
.rail{align-self:start;background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-color:var(--rail-rule) var(--rail)}
.rail :focus-visible{outline-color:var(--tally)}
.brand{display:flex;align-items:baseline;gap:8px;padding:18px 18px 16px;border-bottom:1px solid var(--rail-rule)}
.brand b{font-weight:600;font-size:1rem;font-variation-settings:"wdth" 112;letter-spacing:-0.01em}
.brand span{color:var(--rail-ink-2);font-size:0.8125rem}
.nav{padding:10px 8px;display:grid;gap:1px}
.nav h2{font-size:0.75rem;font-weight:500;color:var(--rail-ink-2);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r);color:var(--rail-ink-2);text-decoration:none;transition:background-color .15s var(--ease),color .15s var(--ease)}
.nav a:hover{background:var(--rail-2);color:var(--rail-ink)}
.nav a[aria-current="page"]{background:var(--rail-2);color:var(--rail-ink)}
.nav a[aria-current="page"] svg{color:var(--tally)}
.nav .count{margin-left:auto;font:500 0.75rem var(--mono);color:var(--rail-ink-2)}
.nav a[aria-current="page"] .count,.nav .count.due{color:var(--tally)}
.who{margin-top:auto;padding:14px 18px 16px;border-top:1px solid var(--rail-rule);display:grid;gap:2px}
.who b{font-weight:500}
.who span{color:var(--rail-ink-2);font-size:0.8125rem}
.who .lamp{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tally);margin-right:6px}

.main{min-width:0;display:flex;flex-direction:column}
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:7px 24px;background:var(--tally-wash);color:var(--on-tally);font-size:0.8125rem;border-bottom:1px solid oklch(0.82 0.08 80)}
.strip b{font-weight:600}
.strip .mono{margin-left:auto}
.btn.menu-btn{display:none}
.view{padding:22px 24px 40px;min-width:0}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;color:var(--ink-3);font-size:0.8125rem;margin-bottom:6px}
.crumbs a{color:var(--ink-2);text-decoration:none}.crumbs a:hover{text-decoration:underline}
.head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 20px;margin-bottom:18px}
.head h1{font-size:1.5rem;font-weight:600;line-height:1.15;letter-spacing:-0.015em;font-variation-settings:"wdth" 110;text-wrap:balance}
.head .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px;color:var(--ink-2)}
.head .acts{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.lede{max-width:72ch;color:var(--ink-2);margin-top:6px}
h2.sec{font-size:1rem;font-weight:600;margin:28px 0 10px}
h3.sub{font-size:0.875rem;font-weight:600;margin:0 0 6px}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:var(--r);border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.btn:hover{background:var(--sunk);border-color:var(--ink-3);color:var(--ink)}
.btn:active{background:var(--rule)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.btn.primary:hover{background:var(--tally);border-color:var(--tally);color:var(--on-tally)}
.btn.danger{color:var(--block);border-color:var(--block)}
.btn.danger:hover{background:var(--block);color:var(--surface)}
.btn.sm{height:28px;padding:0 10px;font-size:0.8125rem}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--sunk);border-color:var(--rule);color:var(--ink-3);cursor:not-allowed}
.btn.loading{position:relative;color:transparent}
.btn.loading::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border-radius:50%;border:2px solid var(--surface);border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.field{display:grid;gap:5px}
.field label,.field legend{font-weight:500;font-size:0.8125rem}
.field .hint{color:var(--ink-3);font-size:0.8125rem}
.field .err{color:var(--block);font-size:0.8125rem}
input[type=text],input[type=search],input[type=date],input[type=datetime-local],input[type=number],input[type=url],select,textarea{width:100%;min-height:34px;padding:6px 10px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface);caret-color:var(--tally-ink)}
textarea{min-height:76px;resize:vertical;line-height:1.45}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0;border-color:var(--focus)}
.invalid input,.invalid textarea{border-color:var(--block)}
fieldset{border:0;margin:0;padding:0;min-width:0}
.seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.seg label{position:relative;display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;cursor:pointer;border-right:1px solid var(--rule-strong);font-weight:500}
.seg label:last-child{border-right:0}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg label:hover{background:var(--sunk)}
.seg label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}
.seg label:has(input:checked){background:var(--ink);color:var(--surface)}
.seg label.p:has(input:checked){background:var(--pass)}
.seg label.b:has(input:checked){background:var(--block)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.filters input[type=search]{width:min(320px,100%)}
.filters select{width:auto}
.filters .n{margin-left:auto;color:var(--ink-3);font-size:0.8125rem}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:16px;overflow-x:auto}
.tabs button{height:36px;padding:0 12px;border:0;background:none;color:var(--ink-2);font-weight:500;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--tally)}

/* ---------- status vocabulary ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border-radius:2px;border:1px solid var(--rule-strong);font-size:0.75rem;font-weight:500;white-space:nowrap;color:var(--ink-2);background:var(--surface)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.tag.plain::before{display:none}
.tag.pass{color:var(--pass);border-color:currentColor;background:var(--pass-wash)}
.tag.block{color:var(--block);border-color:currentColor;background:var(--block-wash)}
.tag.block::before{border-radius:0;height:2px;width:8px}
.tag.wait{color:var(--tally-ink);border-color:currentColor;background:var(--tally-wash)}
.tag.wait::before{background:none;border:1.5px solid currentColor}
.tag.sealed{color:var(--sealed);border-color:currentColor;background:var(--sealed-wash)}
.tag.sealed::before{border-radius:1px}
.tag.na::before{background:none;border:1.5px dashed currentColor}
.note{display:flex;gap:10px;padding:10px 12px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface);max-width:86ch}
.note svg{margin-top:2px}
.note b{font-weight:600}
.note.block{border-color:var(--block);background:var(--block-wash)}.note.block svg{color:var(--block)}
.note.wait{border-color:var(--tally-ink);background:var(--tally-wash)}.note.wait svg{color:var(--tally-ink)}
.note.sealed{border-color:var(--sealed);background:var(--sealed-wash)}.note.sealed svg{color:var(--sealed)}
.note.pass{border-color:var(--pass);background:var(--pass-wash)}.note.pass svg{color:var(--pass)}

/* ---------- signature: the evidence line ---------- */
.line{display:flex;margin:0 0 18px;padding:16px 16px 12px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
.line li{position:relative;flex:1 0 104px;padding-top:24px;padding-right:10px}
.line li::before{content:"";position:absolute;top:7px;left:0;right:0;height:4px;background:var(--rule-strong)}
.line li:last-child::before{right:auto;width:14px}
.line li::after{content:"";position:absolute;top:1px;left:0;width:16px;height:16px;border-radius:50%;background:var(--surface);border:4px solid var(--rule-strong)}
.line li.done::before{background:var(--ink)}
.line li.done::after{background:var(--ink);border-color:var(--ink)}
.line li.now::after{border-color:var(--tally);background:var(--surface);box-shadow:0 0 0 3px var(--tally-wash)}
.line li.stop::after{border-color:var(--block);border-radius:2px}
.line li.stop::before{background:repeating-linear-gradient(90deg,var(--block) 0 6px,transparent 6px 10px)}
.line b{display:block;font-weight:600;font-size:0.8125rem}
.line span{display:block;color:var(--ink-3);font-size:0.75rem}
.line li.now b{color:var(--tally-ink)}.line li.stop b{color:var(--block)}
.line .lanes{display:flex;gap:3px;margin-top:5px}
.line .lanes i{width:22px;height:18px;border-radius:2px;border:1px solid var(--rule-strong);font:500 0.6875rem/16px var(--mono);text-align:center;font-style:normal;color:var(--ink-3)}
.line .lanes i.p{background:var(--pass);border-color:var(--pass);color:var(--surface)}
.line .lanes i.w{background:var(--tally-wash);border-color:var(--tally-ink);color:var(--tally-ink)}
.line .lanes i.b{background:var(--block);border-color:var(--block);color:var(--surface)}
.line.mini{padding:0;border:0;background:none;margin:0;overflow:visible}
.line.mini li{flex:1 0 14px;padding:0;height:16px}
.line.mini li::before{top:6px;height:3px}.line.mini li::after{top:2px;width:11px;height:11px;border-width:3px}
.line.mini li:last-child::before{width:11px}

/* ---------- workbench ---------- */
.bench{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.bench>section{min-width:0}
.pane-h{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-bottom:1px solid var(--rule);font-weight:600}
.pane-h h2,.pane-h h3{font:inherit}
.pane-h .mono{margin-left:auto;color:var(--ink-3);font-weight:400}
.pane-b{padding:16px 18px 20px;display:grid;gap:14px;align-content:start}
.slidebar{display:flex;gap:4px;padding:8px 14px;border-bottom:1px solid var(--rule);overflow-x:auto}
.slidebar button{flex:none;min-width:30px;height:26px;border:1px solid var(--rule);border-radius:2px;background:var(--surface);font:500 0.75rem var(--mono);cursor:pointer;color:var(--ink-2)}
.slidebar button:hover{border-color:var(--ink-3)}
.slidebar button.changed{box-shadow:inset 0 -3px 0 var(--tally)}
.slidebar button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.slide h3{font-size:1.125rem;font-weight:600;margin-bottom:8px}
.slide p{max-width:68ch;font-size:0.9375rem;line-height:1.6}
.slide p+p{margin-top:10px}
mark{background:none;color:inherit;border-bottom:2px solid var(--rule-strong);padding:1px 0;cursor:pointer;transition:background-color .2s var(--ease)}
mark sup{font:500 0.6875rem var(--mono);color:var(--ink-3);margin-left:2px}
mark.on{background:var(--tally-wash);border-bottom-color:var(--tally)}
.qcard{border:1px solid var(--rule);border-radius:var(--r);padding:12px 14px;display:grid;gap:8px}
.qcard ol{display:grid;gap:4px;list-style:upper-alpha;padding-left:22px}
.keys{border-left:1px solid var(--rule);border-right:1px solid var(--rule);background:var(--sunk);display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 0 16px}
.keys button{width:44px;height:34px;border:1px solid var(--rule-strong);border-radius:2px;background:var(--surface);font:500 0.75rem var(--mono);cursor:pointer;position:relative;transition:background-color .15s var(--ease)}
.keys button:hover{border-color:var(--ink)}
.keys button::after{content:"";position:absolute;right:3px;top:3px;width:6px;height:6px;border-radius:50%;background:var(--rule-strong)}
.keys button.p::after{background:var(--pass)}.keys button.b::after{background:var(--block);border-radius:0;height:2px;top:5px}.keys button.w::after{background:var(--tally)}
.keys button[aria-pressed="true"]{background:var(--tally);border-color:var(--tally);color:var(--on-tally)}
.keys button[aria-pressed="true"]::before{content:"";position:absolute;top:50%;left:-11px;right:-11px;height:1px;background:var(--tally);z-index:0}
.kv{display:grid;grid-template-columns:132px minmax(0,1fr);gap:6px 14px}
.kv dt{color:var(--ink-3)}
.kv dd{min-width:0;overflow-wrap:anywhere}
blockquote{margin:0;padding:10px 12px;background:var(--sunk);border-radius:var(--r);font-size:0.9375rem;line-height:1.6;max-width:68ch}
blockquote cite{display:block;margin-top:6px;font-style:normal;color:var(--ink-3);font-size:0.8125rem}
.diff{display:grid;gap:2px;font:0.75rem/1.6 var(--mono)}
.diff del{background:var(--block-wash);color:var(--block);text-decoration:none;padding:1px 6px}
.diff ins{background:var(--pass-wash);color:var(--pass);text-decoration:none;padding:1px 6px}
.decide{position:sticky;bottom:0;z-index:2;margin-top:16px;padding:14px 16px;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,220px) auto minmax(0,1fr) auto;gap:12px 16px;align-items:end}
.decide .effect{grid-column:1/-1;color:var(--ink-2);font-size:0.8125rem;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
.decide textarea{min-height:34px;height:34px}
.receipt{grid-column:1/-1}

/* ---------- tables and lists ---------- */
.tbl-wrap{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:0.8125rem}
caption{text-align:left;padding:10px 12px;font-weight:600;font-size:0.875rem;border-bottom:1px solid var(--rule)}
th{text-align:left;font-weight:500;color:var(--ink-2);padding:8px 12px;border-bottom:1px solid var(--rule-strong);white-space:nowrap;background:var(--surface)}
th button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
th button:hover{color:var(--ink)}th button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
th[aria-sort] button::after{content:"";border:4px solid transparent;border-top-color:currentColor;margin-top:4px}
th[aria-sort="ascending"] button::after{border-top-color:transparent;border-bottom-color:currentColor;margin-top:-4px}
td{padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--ground)}
tr.sel{background:var(--tally-wash)}tr.sel:hover{background:var(--tally-wash)}
tr.sel small,.queue a[aria-current="true"] .sub2,.spine button[aria-selected="true"] small{color:var(--tally-ink)}
td.num,th.num{text-align:right}
td a.row{color:var(--ink);font-weight:500;text-decoration:none}td a.row:hover{text-decoration:underline}
td small,.sub2{display:block;color:var(--ink-3);font-size:0.75rem}
.split{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:16px;align-items:start}
.queue{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.queue li{border-bottom:1px solid var(--rule)}.queue li:last-child{border:0}
.queue a{display:grid;gap:3px;padding:10px 12px;color:inherit;text-decoration:none}
.queue a:hover{background:var(--ground)}
.queue a[aria-current="true"]{background:var(--tally-wash)}
.queue .top{display:flex;gap:8px;align-items:center;justify-content:space-between}
.queue b{font-weight:600}
.panel{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.panel>.pane-b{gap:16px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.spine{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.spine button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 12px;background:var(--surface);cursor:pointer;width:100%}
.spine button:hover{background:var(--ground)}
.spine button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.spine button[aria-selected="true"]{background:var(--tally-wash)}
.spine b{font-weight:600}.spine small{grid-column:1/-1;color:var(--ink-3);font-size:0.75rem}
.drop{border:1.5px dashed var(--rule-strong);border-radius:var(--r);background:var(--surface);padding:28px 20px;display:grid;gap:8px;justify-items:center;text-align:center;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.drop.over{border-color:var(--tally-ink);background:var(--tally-wash)}
.drop p{color:var(--ink-2);max-width:60ch}
.meter{height:6px;background:var(--sunk);border-radius:3px;overflow:hidden;min-width:90px}
.meter i{display:block;height:100%;background:var(--ink)}
.skel{height:12px;border-radius:2px;background:linear-gradient(90deg,var(--sunk) 25%,var(--rule) 50%,var(--sunk) 75%);background-size:200% 100%;animation:skel 1.4s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
.empty{padding:32px 20px;text-align:center;display:grid;gap:8px;justify-items:center;color:var(--ink-2)}
.empty b{color:var(--ink);font-size:1rem;font-weight:600}.empty p{max-width:56ch}
.rowx{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- additions for the built screens ---------- */
[hidden]{display:none!important}
html{scrollbar-color:var(--rule-strong) var(--ground)}
.skip{position:absolute;left:8px;top:-48px;z-index:40;transition:top .15s var(--ease)}
.skip:focus{top:8px}
h1:focus{outline:none}
h1:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.strip .mono{margin-left:0}
.strip .db{margin-left:auto}
.strip .off{color:var(--block);font-weight:600}
.scrim{position:fixed;inset:0;z-index:19;background:oklch(0.155 0.006 75 / .45);border:0;padding:0}
.who .lamp{flex:none}
a.id,button.id{font-family:var(--mono);font-size:0.75rem;overflow-wrap:anywhere}
td a.id,td button.id,td>.mono:only-child,td>span.mono[title]{white-space:nowrap}
button.id{all:unset;cursor:pointer;color:var(--sealed);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-family:var(--mono);font-size:0.75rem}
button.id:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.note>div{min-width:0;overflow-wrap:anywhere}
.note:focus{outline:2px solid var(--focus);outline-offset:2px}
.note .ref{display:block;margin-top:4px;color:inherit}
.note .btn{margin:6px 6px 0 0}
.status-region{display:grid;gap:8px}
.status-region:empty{display:none}
.pending-line{display:flex;gap:8px;align-items:center;color:var(--ink-2);font-size:0.8125rem}
.stack{display:grid;gap:14px;align-content:start}
.gap-top{margin-top:16px}
.form{display:grid;gap:14px;max-width:86ch}
.form .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form h3{font-size:1rem;font-weight:600}
.form .effect{color:var(--ink-2);font-size:0.8125rem}
.field textarea.code{font-family:var(--mono);font-size:0.75rem;min-height:140px}
.field .req{color:var(--ink-3);font-weight:400}
.field input[readonly]{background:var(--sunk);color:var(--ink-2)}
.invalid select,.invalid input{border-color:var(--block)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 12px}
.checks label{display:flex;align-items:center;gap:8px;min-height:28px;font-weight:400;font-size:0.8125rem;cursor:pointer}
.checks input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.repeat{display:grid;gap:10px}
.repeat .item{border:1px solid var(--rule);border-radius:var(--r);padding:12px;display:grid;gap:12px}
.repeat .item-h{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:0.8125rem}
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.tbl-wrap:focus-visible{outline-offset:-2px}
td .tag+.tag{margin-left:4px}
td.act{white-space:nowrap;text-align:right}
td .stacked{display:grid;gap:4px;justify-items:start}
.minicell{min-width:190px}
.kv dd .tag{margin-right:6px}
.kv dd ul{display:grid;gap:4px}
.kv.wide{grid-template-columns:180px minmax(0,1fr)}
.record{display:grid;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.record:last-child{border-bottom:0;padding-bottom:0}
.record-h{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.record-h b{font-weight:600}
.spine button .tag{align-self:start}
.slide .media{color:var(--ink-3);font-size:0.8125rem}
.claims{display:grid;gap:6px}
.claims button{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:4px 0;border-bottom:2px solid var(--rule-strong);max-width:68ch;font-size:0.9375rem;line-height:1.5;transition:background-color .2s var(--ease)}
.claims button sup{font:500 0.6875rem var(--mono);color:var(--ink-3);margin-left:4px}
.claims button[aria-pressed="true"]{background:var(--tally-wash);border-bottom-color:var(--tally)}
.claims button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.keys button.r::after{background:var(--ink)}
.keys button.c::after{background:var(--tally);border-radius:0}
.decide.full{grid-template-columns:repeat(4,minmax(0,1fr))}
.decide.full .span2{grid-column:span 2}
.decide.full .span3{grid-column:span 3}
.decide.full .end{justify-self:end}
.decide h2{grid-column:1/-1;font-size:1rem;font-weight:600}
.decide .field{align-self:start}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop{position:relative}
.drop .picked{font-family:var(--mono);font-size:0.75rem;color:var(--ink-2);overflow-wrap:anywhere}
.limits{color:var(--ink-3);font-size:0.8125rem}
.limits li{padding-left:14px;position:relative}
.limits li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:1px;background:var(--ink-3)}
.count-line{color:var(--ink-2);font-size:0.875rem;margin-top:6px}
.count-line b{color:var(--ink);font-weight:600}
.config-row td{background:var(--sunk);color:var(--ink-2)}
.head .switch{display:grid;gap:5px;min-width:min(280px,100%)}
.head .switch label{font-weight:500;font-size:0.8125rem}
.tabs button:focus-visible{outline-offset:-2px}
.slot{display:contents}
/* Visually hidden text inside a scrolling frame must scroll with it, not widen the page. */
.tbl-wrap,.tabs,.slidebar,.keys,.filters{position:relative}
.seg{justify-self:start}
.head>div:first-child{flex:1 1 420px;min-width:0}
.head .acts{align-items:flex-end}
.filters input[type=date],.filters input[type=text]{width:auto}
.sub{font-size:0.875rem;font-weight:600;margin:0 0 6px}
.queue .queue-item{display:grid;gap:3px;padding:10px 12px}
.queue button.item{all:unset;box-sizing:border-box;display:grid;gap:3px;padding:10px 12px;width:100%;cursor:pointer}
.queue button.item:hover{background:var(--ground)}
.queue button.item[aria-current="true"]{background:var(--tally-wash)}
.queue button.item[aria-current="true"] .sub2{color:var(--tally-ink)}
.queue button.item:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
pre{margin:0;padding:10px 12px;background:var(--sunk);border-radius:var(--r);white-space:pre-wrap;overflow-wrap:anywhere;max-height:320px;overflow:auto}
@media (max-height:760px){.decide{position:static}}

/* ---------- responsive: structure, not fluid type ---------- */
@media (max-width:1180px){
  .decide{grid-template-columns:minmax(0,1fr) auto}
  .decide .grow{grid-column:1/-1}
  .decide.full{grid-template-columns:repeat(2,minmax(0,1fr))}
  .decide.full .span3{grid-column:1/-1}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;inset:0 auto 0 0;width:min(280px,86vw);z-index:20;transform:translateX(-100%);transition:transform .22s var(--ease);visibility:hidden}
  .rail.open{transform:none;visibility:visible;box-shadow:12px 0 32px -12px oklch(0.1 0.01 75 / .5)}
  .btn.menu-btn{display:inline-flex;margin-right:4px}
  .strip{padding:7px 16px}.strip .mono{margin-left:0}
  .view{padding:18px 16px 32px}
  .split{grid-template-columns:minmax(0,1fr)}
  .bench{grid-template-columns:minmax(0,1fr)}
  .keys{flex-direction:row;padding:8px 14px;border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow-x:auto;position:sticky;top:0;z-index:1;justify-content:flex-start}
  .keys button{flex:none}
  .keys button[aria-pressed="true"]::before{display:none}
  .decide,.decide.full{position:static;grid-template-columns:minmax(0,1fr)}
  .decide.full .span2,.decide.full .span3{grid-column:auto}.decide.full .end{justify-self:start}
  .kv.wide{grid-template-columns:minmax(0,1fr)}
  .strip .db{margin-left:0}
  .head .acts .btn{white-space:normal;height:auto;min-height:34px;padding-top:6px;padding-bottom:6px}
  .kv{grid-template-columns:minmax(0,1fr)}.kv dt{margin-top:6px}
  .head .acts{margin-left:0}
}
/* ---------- finish review, October 2026: defects within the locked direction, no new token ---------- */
/* Decision bar with the B-11 fields: two rows of fields and the effect line. */
.decide.full{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 16px;align-items:start}
.decide.full h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.decide-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;min-width:0}
.decide-row .field{min-width:0}
.decide-row .f-check{flex:0 1 220px}
.decide-row .f-outcome{flex:none}
.decide-row .f-why{flex:1 1 300px}
.decide-row .f-ev{flex:1 1 300px}
.decide-row .f-auth{flex:1 1 300px}
.decide-row .f-until{flex:0 1 232px}
.decide-row>.btn{flex:none;margin-left:auto;margin-top:calc(0.8125rem*1.45 + 5px)}
.decide .lab{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;min-width:0}
.decide textarea{resize:none;overflow-y:auto}
.field legend{padding:0;margin-bottom:5px}
.decide.full .effect{grid-column:auto}
.decide.full .receipt{grid-column:auto}
/* A focused control is never left under the pinned bar. */
@media (min-width:901px) and (min-height:761px){html:has(form.decide){scroll-padding-bottom:230px}}
/* Workbench header: the switcher and its actions stay on one line and sit at the right. */
.head .acts{justify-content:flex-end}
.head .switch{flex:0 0 280px;min-width:0}
/* A button in a stacked block keeps its own width. */
.stack>.btn,.pane-b>.btn,.form>.btn{justify-self:start}
/* Lists of check codes wrap; a validity range does not. */
td>.mono.codes:only-child{white-space:normal;overflow-wrap:normal}
.nw{white-space:nowrap}
/* Targets: 28px in dense strips, 24px for a header sort control. */
.slidebar button{height:28px}
th button{min-height:24px;min-width:24px}
td button.id{padding-block:4px}
/* A record's title is words, so it is set in the text face; identifiers stay mono. */
/* Fields in a row align at the top whatever hint each carries; the title's focus ring hugs the title. */
.field{align-content:start}
.form .grid2{align-items:start}
.head h1{width:fit-content;max-width:100%}
button.id.words{font-family:var(--sans);font-size:inherit;font-weight:500}
@media (max-width:1180px){.decide.full{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px),(max-height:760px){.decide.full h2{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}}
@media (max-width:900px){
  .decide-row{flex-direction:column;align-items:stretch}
  .decide-row .field{flex:none;align-self:stretch}
  .decide-row>.btn{margin:0;align-self:flex-start}
  .head .acts{justify-content:flex-start}
  .head .switch{flex:1 1 100%}
  /* A table keeps readable columns and scrolls inside its own frame. */
  .tbl-wrap table{width:max-content;min-width:100%}
  .tbl-wrap td{max-width:15rem}
  .pane-h{height:auto;min-height:40px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:2px 8px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- sign-in (clerk access): the screen stands alone ---------- */
body.signed-out .rail,body.signed-out .strip,body.signed-out .skip{display:none}
body.signed-out .app{grid-template-columns:minmax(0,1fr)}
.view.signin{max-width:440px;margin:8vh auto 0;display:grid;gap:14px;justify-items:start}
.view.signin h1{font-size:1.5rem;font-weight:600;line-height:1.15;letter-spacing:-0.015em;font-variation-settings:"wdth" 110;text-wrap:balance}
.signin-form{min-height:320px;width:100%}
.linkish{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:inherit}
.linkish:hover{color:var(--rail-ink)}
.linkish:focus-visible{outline:2px solid var(--tally);outline-offset:2px;border-radius:2px}