/* Spreadsheet Retirement · center layout ONLY. Palette, header, buttons,
   tiles, badges, tables, ledger, footer, focus rings come from app-base.css.
   This demo's distinct mechanic: a spreadsheet grid a reviewer would see, a
   register of score bars, a cell-level diff table and a physical cutover
   gate with a disposition form. No palette redefinition. */

/* hero: the seeded-error toggle is the first thing a visitor can click */
.runbar-hero{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 18px}
.btn.big{font-size:15px;padding:15px 26px}
.btn.danger-big{border-color:var(--danger);background:var(--danger)}
.btn.danger-big:hover{background:#A32B22;border-color:#A32B22}
.btn.danger-big[aria-pressed="true"]{background:var(--surface);color:var(--danger);border-style:dashed}
.runout{font-size:11px;color:var(--danger)}

.tiles{margin-bottom:20px}
.tiles .t .v.muted{color:var(--cap)}

/* stage + ledger rail */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.rail{position:sticky;top:84px}
.stage{display:flex;flex-direction:column;gap:16px;min-width:0}

/* register */
.regchart svg{width:100%;height:auto;display:block}
.weights{font-size:10px;color:var(--cap);margin:10px 0 12px;border-top:1px dashed var(--line);padding-top:8px}
.regrows{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.regrow{display:grid;grid-template-columns:52px minmax(0,1fr) auto 54px;gap:10px;align-items:center;width:100%;
  text-align:left;background:var(--surface);border:none;border-top:1px solid var(--line2);
  padding:8px 12px;font-family:var(--sans);font-size:12px;color:var(--body2);cursor:pointer}
.regrow:first-child{border-top:none}
.regrow:hover{background:var(--wash)}
.regrow.sel{background:var(--rev-bg)}
.regrow .m{font-family:var(--mono);font-size:10.5px;color:var(--cap)}
.regrow .rname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11.5px}
.regrow .rtag{font-family:var(--mono);font-size:9.5px;color:var(--cap);white-space:nowrap}
.regrow.synth .rtag{color:var(--warn)}
.rjump{font-family:var(--mono);font-size:9.5px;color:var(--danger);background:var(--block-bg);border-radius:30px;padding:1px 7px;white-space:nowrap}
.regrow .rsc{font-weight:600;color:var(--ink);text-align:right}
.regrow.synth .rsc{color:var(--danger)}
.regdetail{margin-top:12px}
.fdhead{font-size:13px;margin-bottom:8px}
.fdhead .m{font-family:var(--mono);font-size:10.5px;color:var(--cap);margin-left:6px}
.flag{border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-bottom:8px}
.flag .ft{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--warn);margin-bottom:6px}
.cellquote{font-size:11.5px;margin:4px 0;overflow-wrap:anywhere}
.cellquote .m{font-family:var(--mono);font-size:10px;color:var(--accent);margin-right:6px}
.cellquote code{font-family:var(--mono);font-size:11px;background:var(--wash);padding:1px 5px}
.fnarr{font-size:12px;color:var(--body);margin:6px 0 0;line-height:1.5}
.fnarr.abst{color:var(--warn);background:var(--esc-bg);border:1px solid #E9D9B8;border-radius:6px;padding:8px 10px}
.fnarr.abst::before{content:"⊘ ";font-family:var(--mono)}

/* the differ: sheet view + diff table */
.diffgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px}
.subh{font-size:12.5px;font-weight:600;margin:0 0 8px}
.subtle{font-size:10px;color:var(--cap);font-weight:400;margin-left:6px}
.sheetbox{border:1px solid var(--line)}
.tbl.sheet{background:
  repeating-linear-gradient(to bottom,transparent,transparent 31px,var(--line2) 31px,var(--line2) 32px)}
.tbl.sheet td,.tbl.sheet th{border-right:1px solid var(--line2)}
.tbl.sheet td:last-child,.tbl.sheet th:last-child{border-right:none}
.tbl.sheet td.lbl{font-size:11.5px;color:var(--body2)}
.tbl.sheet td.m{text-align:right}
.tbl td b{color:var(--danger)}
tr.dbad td{background:#FBF1F0}
.diffmsg{font-size:12.5px;margin:10px 0 0;padding:9px 12px;border-radius:6px;line-height:1.5}
.diffmsg.ok{background:var(--allow-bg);color:var(--ok)}
.diffmsg.bad{background:var(--block-bg);color:var(--danger)}
.diffmsg .m,.gateread .m{font-family:var(--mono)}

/* the cutover gate */
.gate{margin-top:16px;border:1px solid var(--ink);border-radius:6px;padding:14px 16px;background:var(--wash)}
.gate .gh{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:8px}
.gateread{font-size:12px;color:var(--body2);margin:0 0 10px}
.gateread .gok{color:var(--ok)} .gateread .gbad{color:var(--danger)}
.gaterow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.gaterow .mono{font-size:11px;color:var(--cap)}
.dispbox{margin-top:12px}
.dispbox fieldset{border:1px dashed var(--danger);border-radius:6px;padding:12px 14px;margin:0}
.dispbox legend{font-family:var(--mono);font-size:10.5px;color:var(--danger);padding:0 6px}
.dopt{display:block;font-size:12.5px;color:var(--body2);margin:6px 0;cursor:pointer}
.dopt .mono{font-size:11px}
.dispbox textarea{width:100%;font-family:var(--sans);font-size:12.5px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);margin:8px 0;resize:vertical}
.dispbox textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(41,98,217,.12)}
.dispmsg{font-size:11.5px;color:var(--warn);max-width:52ch}

/* the memo */
.memo p{font-size:13px;color:var(--body2);line-height:1.65;margin:0 0 10px}
.memo p:last-child{margin-bottom:0}
.memo b{color:var(--ink)}
.citechip{font-family:var(--mono);font-size:9.5px;color:var(--accent);background:#EAF0FB;border-radius:30px;padding:1px 8px;white-space:nowrap}
.memo .abst{font-family:var(--mono);font-size:10.5px;color:var(--warn);background:var(--esc-bg);border-radius:30px;padding:2px 9px;margin-right:6px}

/* ledger rows: 2-col with hash line under, like siblings */
.ledger .row{grid-template-columns:38px 1fr}
.ledger .row .desc{display:flex;flex-direction:column;gap:2px;min-width:0}
.ledger .row .desc .a{color:var(--ink);font-weight:600;font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger .row .desc .c{color:var(--cap);font-size:9.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger .row .hh{grid-column:1 / -1;color:var(--cap);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger .empty{padding:12px 15px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}

@media(max-width:980px){
  .layout{grid-template-columns:1fr}
  .rail{position:static}
  .diffgrid{grid-template-columns:1fr}
  .ledger .rows{max-height:200px}
}