/* ============================================================================
   PLUMB — page-scoped layouts
   ========================================================================= */
@layer page {

/* ═══ INVOICE REVIEW — the workbench ══════════════════════════════════════ */
.rev { display: grid; grid-template-columns: minmax(0,46fr) minmax(390px,31fr) minmax(300px,23fr);
  height: calc(100vh - var(--topbar-h)); overflow: hidden; }
.rev__doc { border-right: 1px solid var(--border); background: var(--sunken);
  display: flex; flex-direction: column; min-width: 0; }
.rev__form { border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column;
  background: var(--surface); min-width: 0; }
.rev__ai { overflow-y: auto; background: var(--canvas); min-width: 0; }

.rev__hdr { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-7);
  border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.rev__stage { flex: 1; overflow: auto; padding: var(--s-8); display: flex; justify-content: center;
  align-items: flex-start; }
.docpaper { position: relative; width: 100%; max-width: 612px; background: #fff;
  border: 1px solid var(--border-strong); border-radius: 2px; }
:root[data-theme="dark"] .docpaper, :root:not([data-theme="light"]) .docpaper { filter: none; }
.docpaper svg { display: block; width: 100%; height: auto; }
.docbox { position: absolute; border: 1.5px solid transparent; border-radius: 2px;
  pointer-events: none; transition: background-color var(--d-fast) var(--ease-out),
  border-color var(--d-fast) var(--ease-out); }
.docbox[data-lit="true"] { border-color: var(--brand); background: color-mix(in oklch, var(--brand) 13%, transparent); }
.docbox[data-flag="true"] { border-color: var(--signal); background: color-mix(in oklch, var(--signal) 15%, transparent); }
.docbox[data-flag="true"][data-lit="true"] { border-color: var(--signal); background: color-mix(in oklch, var(--signal) 28%, transparent); }

.rev__sec { padding: var(--s-7); border-bottom: 1px solid var(--border); }
.rev__sec-t { display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-micro); font-weight: var(--w-semi); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-6); }
.xf { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: var(--s-4) var(--s-5);
  align-items: center; }
.xf > label { font-size: var(--t-xs); color: var(--muted); }
.xf__in { position: relative; display: flex; align-items: center; gap: var(--s-3); }
.xf__in input, .xf__in select { height: 28px; font-size: var(--t-sm); }
.xf__eye { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-content: center;
  border: 0; background: none; color: var(--faint); cursor: pointer; border-radius: var(--r-xs); }
.xf__eye:hover { color: var(--brand); background: var(--brand-soft); }
.xf__eye svg { width: 13px; height: 13px; }
.xf__prov { font-size: 9.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: var(--w-semi); }

/* the coding grid — subgrid so split rows align to the parent columns */
.code-grid { display: grid; grid-template-columns: minmax(150px,1.6fr) minmax(120px,1.2fr) 74px 62px minmax(110px,1.1fr) minmax(78px,auto);
  font-size: var(--t-xs); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow-x: auto; }
.code-grid > div { overflow: hidden; }
.code-grid > div { padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; min-width: 0; }
.code-grid > .ch { background: var(--sunken); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); font-weight: var(--w-semi); }
.code-grid > .cnum { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.code-grid select, .code-grid input { height: 24px; font-size: var(--t-xs); padding: 0 var(--s-3);
  border-color: transparent; background: transparent; }
.code-grid select:hover, .code-grid input:hover { border-color: var(--border-strong); background: var(--surface); }
.code-grid .csrc { font-size: 9px; color: var(--muted); }
.code-grid > .last { border-bottom: 0; }
.code-grid > .retain { background: var(--signal-soft); color: var(--signal-ink); }

.validation { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.vrow { display: flex; align-items: center; gap: var(--s-4); font-size: var(--t-xs); }
.vrow svg { width: 13px; height: 13px; flex: 0 0 13px; }
.vrow[data-ok="true"] svg { color: var(--pos); }
.vrow[data-ok="false"] svg { color: var(--neg); }
.vrow[data-ok="false"] { color: var(--neg); font-weight: var(--w-med); }
.vrow b { margin-left: auto; font-variant-numeric: tabular-nums; }

.rev__act { position: sticky; bottom: 0; margin-top: auto; z-index: 2;
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-6) var(--s-7);
  border-top: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }

/* routing chain */
.chain { display: flex; flex-direction: column; gap: 0; }
.chain__n { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-5); align-items: start;
  padding: var(--s-4) 0; position: relative; }
.chain__n::before { content: ""; position: absolute; left: 10.5px; top: 26px; bottom: -6px;
  width: 1px; background: var(--border-strong); }
.chain__n:last-child::before { display: none; }
.chain__dot { width: 21px; height: 21px; border-radius: var(--r-full); display: grid; place-content: center;
  background: var(--sunken-2); color: var(--muted); font-size: 9.5px; font-weight: var(--w-semi);
  border: 1px solid var(--border-strong); z-index: 1; }
.chain__n[data-state="done"] .chain__dot { background: var(--pos); border-color: var(--pos); color: #fff; }
.chain__n[data-state="now"] .chain__dot { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.chain__who { font-size: var(--t-sm); color: var(--ink); font-weight: var(--w-med); }
.chain__why { font-size: 10.5px; color: var(--muted); line-height: 1.4; margin-top: 1px; }

/* ═══ COMPLIANCE MATRIX ═══════════════════════════════════════════════════ */
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-xs); }
.matrix th { position: sticky; top: 0; z-index: 2; background: var(--sunken); padding: var(--s-4) var(--s-3);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
  font-weight: var(--w-semi); border-bottom: 1px solid var(--border); text-align: center; }
.matrix th:first-child { text-align: left; padding-left: var(--s-7); z-index: 3; left: 0; }
.matrix td { padding: 0 var(--s-3); height: 40px; border-bottom: 1px solid var(--border); text-align: center; }
.matrix td:first-child { text-align: left; padding-left: var(--s-7); position: sticky; left: 0;
  background: var(--surface); font-weight: var(--w-med); color: var(--ink); }
.matrix tr:hover td { background: var(--sunken); }
.matrix tr:hover td:first-child { background: var(--sunken); }
.cellmark { display: inline-grid; place-content: center; width: 21px; height: 21px;
  border-radius: var(--r-sm); font-size: 11px; font-weight: var(--w-semi); }
.cellmark[data-s="ok"]   { background: var(--pos-soft); color: var(--pos); }
.cellmark[data-s="warn"] { background: var(--signal-soft); color: var(--signal-ink); }
.cellmark[data-s="bad"]  { background: var(--neg-soft); color: var(--neg); }
.cellmark[data-s="na"]   { background: var(--sunken-2); color: var(--faint); }

/* 90-day expiry runway */
.runway { position: relative; height: 58px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.runway__grid { position: absolute; inset: 0; display: flex; }
.runway__grid div { flex: 1; border-right: 1px solid var(--border); position: relative; }
.runway__grid div:last-child { border-right: 0; }
.runway__grid span { position: absolute; bottom: 3px; left: 5px; font-size: 9px; color: var(--muted); }
.runway__pip { position: absolute; top: 9px; width: 9px; height: 9px; border-radius: var(--r-full);
  transform: translateX(-50%); cursor: pointer; border: 1.5px solid var(--surface); }
.runway__pip:hover { transform: translateX(-50%) scale(1.35); z-index: 2; }

/* ═══ RULE BUILDER — vertical chain, plain English ════════════════════════ */
.rule { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  overflow: hidden; }
.rule__row { display: flex; align-items: flex-start; gap: var(--s-5); padding: var(--s-6) var(--s-7);
  border-bottom: 1px solid var(--border); }
.rule__row:last-child { border-bottom: 0; }
.rule__kind { flex: 0 0 74px; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: var(--w-semi); color: var(--muted); padding-top: 3px; }
.rule__row[data-kind="condition"] .rule__kind { color: var(--info); }
.rule__row[data-kind="approval"] .rule__kind { color: var(--brand-ink); }
.rule__row[data-kind="notify"] .rule__kind { color: var(--muted); }
.rule__sentence { font-size: var(--t-sm); line-height: 1.9; color: var(--ink-2); }
.tok { display: inline-flex; align-items: center; padding: 1px var(--s-4); margin: 0 1px;
  background: var(--sunken); border: 1px solid var(--border-strong); border-radius: var(--r-xs);
  font-weight: var(--w-semi); color: var(--ink); cursor: pointer; font-size: var(--t-xs);
  transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out); }
.tok:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.tok--val { font-variant-numeric: tabular-nums; }

/* ═══ TOPOLOGY ════════════════════════════════════════════════════════════ */
.topo { display: grid; gap: var(--s-6); }
.topo svg { width: 100%; height: auto; }

/* ═══ IIF / CODE PREVIEW ══════════════════════════════════════════════════ */
.iif { font-family: var(--font-mono); font-size: 11px; line-height: 1.8; white-space: pre;
  overflow-x: auto; background: var(--sunken); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s-6); tab-size: 12; }
.iif .h { color: var(--brand-ink); font-weight: 600; }
.iif .t { color: var(--border-loud); }
.iif .neg { color: var(--neg); }

/* ═══ PHONE FRAME ═════════════════════════════════════════════════════════ */
.phone { width: 268px; border: 8px solid var(--ink); border-radius: 30px; background: var(--canvas);
  overflow: hidden; box-shadow: var(--lift-pop); flex: 0 0 268px; }
.phone__bar { height: 26px; background: var(--sunken); display: flex; align-items: center;
  justify-content: center; font-size: 9.5px; color: var(--muted); border-bottom: 1px solid var(--border); }
.phone__body { padding: var(--s-6); }

/* ═══ PIPELINE RAIL (sim) ═════════════════════════════════════════════════ */
.rail { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--s-3); }
.rail__s { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5) var(--s-4);
  background: var(--surface); transition: border-color var(--d-base) var(--ease-out),
  background-color var(--d-base) var(--ease-out); position: relative; min-width: 0; }
.rail__s[data-on="true"] { border-color: var(--brand); background: var(--brand-soft); }
.rail__s[data-on="done"] { border-color: var(--pos-line); background: var(--pos-soft); }
.rail__n { font-size: 9px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rail__t { font-size: var(--t-xs); font-weight: var(--w-semi); color: var(--ink); margin-top: 2px;
  line-height: 1.25; }
.rail__p { font-size: 9px; color: var(--muted); margin-top: var(--s-3); font-family: var(--font-mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__s[data-on="true"] .rail__p { color: var(--brand-ink); }

@media (min-width: 881px) and (max-width: 1400px) {
  .rev { grid-template-columns: minmax(0,1fr) minmax(300px,380px); }
  /* Closed, the panel stays inside the viewport and is simply hidden. Parking it
     at translateX(100%) put a 320px box past the right edge, which still counted
     toward the document's scroll width even while invisible. */
  .rev__ai { position: fixed; inset: var(--topbar-h) 0 0 auto; width: 320px; z-index: var(--z-drawer);
    border-left: 1px solid var(--border); background: var(--surface);
    transform: translateX(18px); opacity: 0; visibility: hidden;
    transition: transform var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out),
                visibility 0s linear var(--d-base); }
  .rev__ai[data-open="true"] { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .rev__ai[data-open="true"] { transform: none; }
  .rev__ai-toggle { display: inline-flex !important; }
}
@media (min-width: 881px) and (max-width: 1000px) {
  .rev { grid-template-columns: minmax(0,1fr); height: auto; overflow: visible; }
  .rev__doc { border-right: 0; border-bottom: 1px solid var(--border); }
  .rail { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) { .rail { grid-template-columns: repeat(2, 1fr); } }

}