/* Governed Flux Writer · center layout ONLY. Palette, header, buttons, tiles,
   badges, ledger, footer, focus rings all come from app-base.css.
   This demo's distinct mechanic: a clickable flux board grouped by agency,
   commentary that drafts sentence by sentence with citation chips, a live
   coverage meter with a visible 80% floor, a variance bridge SVG, and an
   MRC sign-off block that code keeps locked. No palette redefinition. */

/* visible materiality rule: the decision criteria live on screen */
.rulebar{font-size:11px;color:var(--body2);background:var(--wash);border:1px solid var(--line);
  border-radius:6px;padding:9px 13px;margin:18px 0 14px;line-height:1.6}
.rulebar b{color:var(--ink)}

.tiles{margin-bottom:20px}

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

/* flux board */
.board{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.dephead{display:grid;grid-template-columns:minmax(0,1fr) 100px 100px 150px 74px;gap:8px;
  padding:8px 12px;background:var(--wash);border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--cap)}
.dephead:first-child{border-top:none}
.dephead .tnum{text-align:right;color:var(--body2)}
.colhead{display:grid;grid-template-columns:minmax(0,1fr) 100px 100px 150px 74px;gap:8px;
  padding:7px 12px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--cap)}
.colhead span:not(:first-child){text-align:right}
.fluxrow{display:grid;grid-template-columns:minmax(0,1fr) 100px 100px 150px 74px;gap:8px;align-items:center;
  width:100%;text-align:left;border:none;border-top:1px solid var(--line2);
  padding:7px 12px;font-family:var(--sans);font-size:12px;color:var(--body2);background:var(--surface)}
.fluxrow .cat{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fluxrow .tnum{font-family:var(--mono);font-size:11px;text-align:right}
.fluxrow .vv{font-weight:600}
.fluxrow.dim{color:var(--muted)} .fluxrow.dim .tnum{color:var(--muted)}
button.fluxrow{cursor:pointer}
button.fluxrow:hover{background:var(--wash)}
button.fluxrow.sel{background:var(--rev-bg)}
button.fluxrow .cat{color:var(--ink);font-weight:500}
.fluxrow .vv.up{color:var(--danger)} .fluxrow .vv.dn{color:var(--warn)}
.fluxrow .fbadge{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.04em;
  text-align:right;white-space:nowrap}
.fluxrow .fbadge.mat{color:var(--danger)}
.fluxrow .fbadge.done-approved{color:var(--ok)} .fluxrow .fbadge.done-followup{color:var(--warn)}
.plant{color:var(--warn);font-weight:600}
.legend{font-size:10.5px;color:var(--cap);margin:10px 2px 0}
.legend .lg-mat{color:var(--danger);font-weight:600}
.legend .lg-plant{color:var(--warn);font-weight:600}

/* drafted commentary */
.fluxmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:11px;color:var(--cap);margin-bottom:12px}
.fluxmeta b{color:var(--ink);font-weight:600}
.bridge{margin:2px 0 14px}
.bridge svg{width:100%;height:auto;display:block}
.draft{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:12px}
.draft .dh{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;
  padding:7px 12px;border-bottom:1px solid var(--line2);background:var(--wash);
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--cap)}
.draft .dh .wtag{color:var(--review)}
.draft .db{padding:12px 14px;font-size:13.5px;line-height:1.7;color:var(--body2)}
.draft .db .sent{opacity:0;transition:opacity .3s}
.draft .db .sent.in{opacity:1}
.cite{font-family:var(--mono);font-size:9.5px;color:var(--accent);background:#EAF0FB;
  border-radius:3px;padding:1px 5px;margin-left:3px;white-space:nowrap}
.cite.code{color:var(--review);background:var(--rev-bg)}
.meter{margin:4px 0 14px}
.meter svg{width:100%;height:auto;display:block}
.meterline{font-family:var(--mono);font-size:11px;color:var(--body2);margin-top:5px}
.meterline b{color:var(--ok)} .meterline.low b{color:var(--warn)}

/* abstain */
.abstainbox{font-size:13px;color:var(--body2);background:var(--esc-bg);border:1px solid #E9D9B8;
  border-radius:6px;padding:12px 14px;line-height:1.65;margin-bottom:12px}
.abstainbox .abst{font-family:var(--mono);font-size:10.5px;color:var(--warn)}
.abstainbox .abst::before{content:"⊘ "}
.trimnote{font-size:11.5px;color:var(--cap);font-family:var(--mono);margin-bottom:12px}

/* evidence table */
.evwrap{margin-bottom:12px}
.evwrap .evh{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--cap);margin-bottom:6px}
.spec{font-family:var(--mono);font-size:10px;color:var(--cap)}

/* human gate */
.hitl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line2);padding-top:12px}
.hitl .who{font-family:var(--mono);font-size:10.5px;color:var(--cap)}
.editbox{width:100%;min-height:120px;font-family:var(--sans);font-size:13px;line-height:1.6;
  color:var(--ink);border:1px solid var(--accent);border-radius:6px;padding:10px 12px;margin-bottom:10px}
.decided{margin-top:10px;font-size:12.5px;padding:9px 12px;border-radius:6px}
.decided.approved{background:var(--allow-bg);color:var(--ok)}
.decided.followup{background:var(--esc-bg);color:var(--warn)}

/* follow-up queue */
.furow{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:10px;align-items:center;
  padding:9px 4px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--body2)}
.furow:first-child{border-top:none}
.furow .m{font-family:var(--mono);font-size:11px;color:var(--cap);text-align:right}
.furow .b-esc{justify-self:end}

/* MRC sign-off block */
.mrc{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:14px 15px}
.mrc .mh{font-size:13px;font-weight:600;margin-bottom:8px}
.mrc .mprog{font-size:11px;color:var(--body2);margin-bottom:10px}
.mrc .mprog .okc{color:var(--ok)} .mrc .mprog .fuc{color:var(--warn)}
.mrc .mnote{font-size:10px;color:var(--cap);margin-top:9px;line-height:1.55}
.mrc.signed{border-color:#CDE6D7;background:var(--allow-bg)}
.mrc.blocked .mprog{color:var(--danger)}

/* 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}
  .ledger .rows{max-height:200px}
  .dephead,.colhead,.fluxrow{grid-template-columns:minmax(0,1fr) 84px 120px 64px}
  .dephead .pcell,.colhead .pcell,.fluxrow .pcell{display:none}
}
@media(max-width:640px){
  .dephead,.colhead,.fluxrow{grid-template-columns:minmax(0,1fr) 112px 58px}
  .dephead .ccell,.colhead .ccell,.fluxrow .ccell{display:none}
  .fluxrow .tnum{font-size:10px}
}