/* gatecheck operator console.
   Tokens, type and layout are the chosen design; nothing here carries a number
   from the shift. Every figure on screen is written by console.js from the
   recording. */

:root{
  --paper:#F4F5F2;
  --pane:#FBFBF9;
  --rule:#A9AFA9;
  --ink:#1F2421;
  --dim:#6A716B;
  --blue:#2C5A8A;
  --deny:#A33B2E;
  --pass:#2F6B45;
  --mat:#8C8C8C;
  --fs:13px;
  --lh:20px;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0;
  padding:14px 14px 46px;
  background:var(--paper);
  color:var(--ink);
  font-family:'Anonymous Pro',Consolas,'DejaVu Sans Mono','Liberation Mono',monospace;
  font-size:var(--fs);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
b,strong{font-weight:700}
/* The recording is full of frame keys, PromQL and absolute paths. Prose must
   break them rather than push the page sideways on a phone. */
p,li,dd,dt,td,th,figcaption{overflow-wrap:break-word}
a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(44,90,138,.4)}
a:hover{border-bottom-color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.skiplink{
  position:absolute;left:-9999px;top:0;z-index:80;
  background:var(--ink);color:var(--paper);padding:5px 11px;
  border:1px solid var(--ink);
}
.skiplink:focus{left:14px;top:14px}

/* ---- the box: one grid, 1px gaps painted in the rule colour ---- */
.screen{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  max-width:1560px;
  margin:0 auto;
}
.pane{background:var(--pane);min-width:0;display:flex;flex-direction:column}
.w3{grid-column:span 3}
.w2{grid-column:span 2}
.titlebar{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  padding:4px 10px;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.titlebar .nm{font-weight:700}
.titlebar h1,.titlebar h2,.titlebar h3{
  font-size:var(--fs);line-height:var(--lh);font-weight:700;margin:0;
}
.titlebar .sub{color:var(--dim)}
.titlebar .right{margin-left:auto;display:flex;gap:10px;align-items:baseline}
.pad{padding:9px 10px 11px}
.dim{color:var(--dim)}
.ok{color:var(--pass)}
.no{color:var(--deny)}
.num{font-variant-numeric:tabular-nums}
.na{color:var(--dim);font-style:italic}
.scroll{overflow-x:auto}
.note{margin:9px 0 0;color:var(--dim);max-width:92ch}
.note+.note{margin-top:5px}

/* ---- head ---- */
.head .path{letter-spacing:.01em}
.head .slash{color:var(--rule)}
.lede{margin:0;max-width:104ch;color:var(--ink)}
.lede .hash{color:var(--dim)}
.head .clock{font-weight:700;font-size:15px}
.head .facts{margin-top:8px;padding-top:7px;border-top:1px dotted var(--rule)}

/* ---- claim / truth ---- */
table{border-collapse:collapse;width:100%}
.gap-t td,.gap-t th{padding:2px 16px 2px 0;text-align:left;font-weight:400;vertical-align:baseline;white-space:nowrap}
.gap-t th{width:9ch;font-weight:700}
.gap-t .who{width:14ch;color:var(--dim)}
.gap-t tr+tr td,.gap-t tr+tr th{border-top:1px dotted var(--rule)}
.gap-t .cont th,.gap-t .cont td{border-top:0}
.verdict{margin:8px 0 0;padding-top:7px;border-top:1px solid var(--rule)}

/* ---- frame strip ---- */
.strip-wrap{padding:10px 10px 8px}
.strip{
  display:grid;
  grid-template-columns:repeat(var(--n,60),minmax(0,1fr));
  gap:2px;align-items:end;height:56px;
}
.bar{background:var(--rule);min-height:2px;border-top:1px solid var(--dim)}
.bar.hot{background:var(--deny);border-top-color:var(--deny)}
.bar.unread{
  height:100%;min-height:0;background:transparent;border-top:0;
  border-bottom:1px solid var(--rule);
  background-image:repeating-linear-gradient(135deg,
    transparent 0 3px,rgba(169,175,169,.5) 3px 4px);
}
.bar.dead{border-bottom:2px solid var(--deny)}
.ruler{display:grid;grid-template-columns:repeat(var(--n,60),minmax(0,1fr));gap:2px;margin-top:3px}
.tick{height:4px;border-left:1px solid var(--rule)}
.tick.on{border-left-color:var(--ink)}
.tick.bad{border-left-color:var(--deny)}
.brace{position:relative;height:26px;margin-top:1px}
.brace i{position:absolute;top:0;height:7px;border:1px solid var(--deny);border-top:0}
.brace .lab{position:absolute;top:8px;text-align:center;color:var(--deny);white-space:nowrap}
.striplabels{display:flex;justify-content:space-between;color:var(--dim);margin-top:-4px}
.striplegend{margin:6px 0 0;color:var(--dim);max-width:104ch}
.striplegend b{color:var(--deny)}
.key-swatch{display:inline-block;width:11px;height:9px;vertical-align:-1px;margin-right:4px;border:1px solid var(--dim)}
.key-swatch.hot{background:var(--deny);border-color:var(--deny)}
.key-swatch.known{background:var(--rule)}
.key-swatch.unread{background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(169,175,169,.7) 3px 4px);border-color:var(--rule)}

/* ---- evidence ---- */
.frames{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot{margin:0}
.mat{background:var(--mat);padding:9px;border:1px solid var(--rule)}
.mat img{display:block;width:100%;height:auto}
.mat .missing-img{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:120px;color:var(--paper);padding:10px;
}
.shot figcaption{display:flex;gap:8px;align-items:baseline;padding-top:5px;flex-wrap:wrap}
.shot .fid{font-weight:700}
.shot .score{margin-left:auto;font-weight:700;font-size:15px}
.rules-fired{margin:8px 0 0;padding-top:7px;border-top:1px dotted var(--rule)}
.tok{border:1px solid var(--deny);color:var(--deny);padding:0 5px;margin-right:5px;display:inline-block}
.render-facts{margin:8px 0 0;padding-top:7px;border-top:1px dotted var(--rule);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 18px}
.render-facts div{display:flex;gap:8px}
.render-facts span:first-child{color:var(--dim);min-width:13ch;flex:none}
.logline{
  margin:9px 0 0;padding:4px 0 4px 10px;
  border-left:3px solid var(--deny);
  overflow-wrap:anywhere;
}

/* ---- signals ---- */
.sig{width:100%}
.sig td{padding:3px 0;vertical-align:baseline}
.sig .k{padding-right:10px;overflow-wrap:anywhere}
.sig .v{text-align:right;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.sig .g{color:var(--dim);padding:0 0 7px 0;border-bottom:1px dotted var(--rule)}
.sig tr:last-child .g{border-bottom:0}
.arrow{display:inline-block;width:1.6ch;text-align:right}
.arrow.up,.arrow.dn{color:var(--deny)}

/* ---- agent / cost / options ---- */
.kv{display:grid;grid-template-columns:10ch minmax(0,1fr);gap:2px 12px}
.kv>dt{font-weight:700;color:var(--ink)}
.kv>dd{margin:0;min-width:0}
.kv>dd+dt,.kv>dd+dt+dd{border-top:1px dotted var(--rule);padding-top:7px;margin-top:6px}
.quote{max-width:88ch;margin:0}
.opts{margin-top:6px;width:100%}
.opts th{text-align:left;font-weight:400;color:var(--dim);padding:0 14px 3px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.opts td{padding:3px 14px 3px 0;vertical-align:baseline}
.opts td.money,.opts th.money{font-variant-numeric:tabular-nums;text-align:right;padding-right:20px;white-space:nowrap}
.opts td.act{white-space:nowrap}
.opts tr.rec td{font-weight:700}
.opts .rec-tag{font-weight:400;color:var(--pass);margin-left:8px}
.opts .deny-tag{font-weight:400;color:var(--deny);margin-left:8px}
.opts td.why{color:var(--dim);font-weight:400;min-width:34ch}
.money-line{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 18px}
.money-line.one{grid-template-columns:minmax(0,1fr)}
.money-line.wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.money-line div{display:flex;gap:8px}
.money-line span:first-child{color:var(--dim);min-width:18ch;flex:none}

/* ---- self check + links ---- */
.meter{height:9px;border:1px solid var(--ink);margin:6px 0 5px;padding:1px;display:flex;gap:1px}
.meter i{flex:1;background:var(--rule)}
.meter i.f{background:var(--pass)}
.meter i.x{background:var(--ink)}
.meter.unavailable{
  border-color:var(--rule);
  background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(169,175,169,.5) 3px 4px);
}
.linklist{list-style:none;margin:0;padding:0}
.linklist li{padding:3px 0;border-top:1px dotted var(--rule)}
.linklist li:first-child{border-top:0}
.linklist .where{color:var(--dim);display:block}

/* ---- refused ---- */
.refused{display:none}
.refused.on{display:flex}
.pane.refused{background:var(--pane)}
.refused>.titlebar{background:var(--deny);border-bottom-color:var(--deny);color:var(--paper)}
.refused>.titlebar .sub{color:#F0D6D1}
.deny-msg{border-left:3px solid var(--deny);padding:2px 0 2px 10px;margin:0 0 9px;overflow-wrap:anywhere}
.contrast{width:100%;margin-top:8px}
.contrast th{text-align:left;font-weight:400;color:var(--dim);border-bottom:1px solid var(--rule);padding:0 16px 3px 0;white-space:nowrap}
.contrast td{padding:4px 16px 4px 0;border-bottom:1px dotted var(--rule);white-space:nowrap}
.contrast td:last-child{font-weight:700}

/* ---- the decision trails ---- */
.trails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule)}
.trail{background:var(--pane);display:flex;flex-direction:column;min-width:0}
.trail .titlebar{background:var(--paper)}
.trail.denied .titlebar{background:var(--deny);border-bottom-color:var(--deny);color:var(--paper)}
.trail.denied .titlebar .sub{color:#F0D6D1}
.trail .titlebar .verdict-tag{margin-left:auto;font-weight:700}
.trail.allowed .titlebar .verdict-tag{color:var(--pass)}
.trail .pad{padding-top:8px}
.trail-note{margin:0 0 8px;max-width:60ch}
.checks{width:100%;margin-top:8px}
.checks caption{text-align:left;color:var(--dim);padding-bottom:3px}
.checks th{text-align:left;font-weight:400;color:var(--dim);border-bottom:1px solid var(--rule);padding:0 10px 3px 0}
.checks td{padding:4px 10px 4px 0;border-bottom:1px dotted var(--rule);vertical-align:baseline}
.checks td.o{width:2ch;color:var(--dim);font-variant-numeric:tabular-nums}
.checks td.nmc{white-space:nowrap;font-weight:700}
.checks td.st{white-space:nowrap;font-weight:700;width:11ch}
.checks td.st.ok{color:var(--pass)}
.checks td.st.no{color:var(--deny)}
.checks td.st.skip{color:var(--dim);font-style:italic;font-weight:400}
.checks tr.r-deny td{background:rgba(163,59,46,.07)}
/* A check that never ran must not read like one that passed. */
.checks tr.r-skipped td,.checks tr.r-skipped td.nmc,
.checks tr.r-not_applicable td,.checks tr.r-not_applicable td.nmc{color:var(--dim);font-weight:400}
.checks td.dt{color:var(--ink);overflow-wrap:anywhere}
.checks tr.r-skipped td.dt,.checks tr.r-not_applicable td.dt{color:var(--dim);font-style:italic}
.trail-meta{margin-top:9px;padding-top:7px;border-top:1px dotted var(--rule)}
.trail-meta div{display:flex;gap:8px;padding:1px 0}
.trail-meta span:first-child{color:var(--dim);min-width:13ch;flex:none}
.trail-meta b{overflow-wrap:anywhere;min-width:0}
.exec{margin-top:9px;padding-top:7px;border-top:1px dotted var(--rule)}
.exec .head{font-weight:700}
.exec pre{
  margin:4px 0 0;padding:5px 8px;background:var(--paper);border:1px solid var(--rule);
  font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--deny);
}

/* ---- decision ---- */
.consq{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.consq h3{margin:0 0 2px;font-size:var(--fs);font-weight:700}
.consq p{margin:0;max-width:70ch;color:var(--ink)}
.consq .col+.col{border-left:1px dotted var(--rule);padding-left:26px}
.consq .price{margin-top:4px;color:var(--dim)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:11px;padding-top:11px;border-top:1px solid var(--rule)}
button{font:inherit;cursor:pointer}
.btn{
  background:var(--pane);color:var(--ink);
  border:1px solid var(--ink);
  padding:5px 13px;
  display:inline-flex;align-items:center;gap:9px;
  transition:background .12s linear,color .12s linear;
  text-align:left;
}
.btn .cap{
  border:1px solid var(--rule);padding:0 5px;font-weight:700;
  background:var(--paper);color:var(--dim);flex:none;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:hover .cap{border-color:var(--paper);color:var(--paper);background:transparent}
.btn.primary{background:var(--ink);color:var(--paper);font-weight:700}
.btn.primary .cap{background:transparent;border-color:#6d766f;color:var(--paper)}
.btn.primary:hover{background:#000}
.btn.ghost{border-color:var(--rule);color:var(--dim)}
.btn.ghost:hover{background:var(--dim);color:var(--paper)}
.btn[aria-pressed="true"]{background:var(--deny);border-color:var(--deny);color:var(--paper)}
.btn[aria-pressed="true"] .cap{border-color:#e2b6ae;color:var(--paper);background:transparent}
.btn.ghost[aria-pressed="true"]:hover{background:#8c3025;border-color:#8c3025;color:var(--paper)}
.btn[disabled]{cursor:not-allowed;opacity:.55}
.btn[disabled]:hover{background:var(--pane);color:var(--ink)}
.hint{color:var(--dim);margin-left:auto}
.replay-note{margin:0 0 9px;padding:2px 0 2px 10px;border-left:3px solid var(--blue);max-width:96ch}

/* ---- done state ---- */
.done{display:none}
.done.on{display:block}
.decide.off{display:none}
.log{margin:0}
.log div{display:flex;gap:12px;padding:2px 0;align-items:baseline}
.log .t{color:var(--dim);width:10ch;flex:none;font-variant-numeric:tabular-nums}
.log .s{width:10ch;flex:none;font-weight:700;white-space:nowrap}
.log .s.ok{color:var(--pass)}
.log .s.no{color:var(--deny)}
.log .s.skip{color:var(--dim);font-style:italic;font-weight:400}
.log .m{min-width:0;overflow-wrap:anywhere}
.undo{background:none;border:0;color:var(--blue);padding:0;border-bottom:1px solid rgba(44,90,138,.4);font:inherit;cursor:pointer}
.undo:hover{border-bottom-color:var(--blue)}

/* ---- failure state ---- */
.fail>.titlebar{background:var(--deny);border-bottom-color:var(--deny);color:var(--paper)}
.fail>.titlebar .sub{color:#F0D6D1}
.fail p{margin:0 0 8px;max-width:92ch}
.fail code{background:var(--paper);border:1px solid var(--rule);padding:0 4px}
.fail ul{margin:0 0 10px;padding-left:18px}
.fail li{padding:1px 0}

/* ---- status bar ---- */
.status{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;gap:0;
  padding:0 10px;height:26px;
  font-size:var(--fs);line-height:26px;
  z-index:40;
}
.status .mode{background:var(--paper);color:var(--ink);font-weight:700;padding:0 9px;margin-right:12px;height:26px;white-space:nowrap}
.status ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap;min-width:0;overflow:hidden}
.status .key{font-weight:700;color:#fff;border-bottom:1px solid #8e968f;margin-right:5px}
.status li.off{color:#8e968f}
.status li.off .key{color:#8e968f;border-bottom-color:#4a524c}
.status .frame{margin-left:auto;color:#c8ccc7;padding-left:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status a{color:#fff;border-bottom-color:#8e968f}
.status :focus-visible{outline:2px solid var(--paper);outline-offset:1px}

/* ---- help overlay ---- */
.help{
  position:fixed;inset:0;background:rgba(31,36,33,.55);
  display:none;align-items:center;justify-content:center;z-index:60;padding:20px;
}
.help.on{display:flex}
.helpbox{background:var(--pane);border:1px solid var(--ink);max-width:560px;width:100%;max-height:90vh;overflow:auto}
.helpbox .titlebar{background:var(--ink);color:var(--paper);border-bottom-color:var(--ink)}
.helpbox .titlebar .sub{color:#c8ccc7}
.helpbox dl{display:grid;grid-template-columns:5ch 1fr;gap:4px 14px;margin:0}
.helpbox dt{font-weight:700;text-align:right}
.helpbox dd{margin:0}
.helpbox .close{margin-top:12px}

noscript{display:block;max-width:1560px;margin:0 auto 1px;border:1px solid var(--deny);padding:8px 10px;background:var(--pane)}

@media (max-width:1200px){
  .trails{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1080px){
  .screen{grid-template-columns:minmax(0,1fr)}
  .w3,.w2{grid-column:span 1}
  .consq{grid-template-columns:1fr;gap:12px}
  .consq .col+.col{border-left:0;padding-left:0;border-top:1px dotted var(--rule);padding-top:10px}
}
@media (max-width:640px){
  body{padding:10px 10px 42px}
  .frames{grid-template-columns:1fr}
  /* No physical keyboard here: the buttons carry the affordance and the
     help overlay still lists the keys, which keep working if one is attached. */
  .status ul{display:none}
  .status .frame{margin-left:0}
  .kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .kv>dd+dt,.kv>dd+dt+dd{padding-top:7px;margin-top:6px}
  .kv>dd+dt+dd{border-top:0;padding-top:0;margin-top:0}
  .money-line span:first-child{min-width:15ch}
  .render-facts span:first-child{min-width:11ch}
  .btn{width:100%}
  .hint{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}