/* Invoice Intake: "Columnar pad" direction. Tokens and rules are documented in DESIGN.md. */
@font-face { font-family: "Public Sans"; src: url("../vendor/fonts/PublicSans.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../vendor/fonts/Newsreader.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  /* color */
  --paper: #F6F7F4; --sheet: #FFFFFF; --rule: #D5DDD3; --rule-soft: #E7ECE5;
  --ink: #1C2733; --ink-2: #45525F; --ink-3: #66727E;
  --blue: #1F4E8C; --blue-d: #173D6E; --blue-wash: #E6EDF6;
  --red: #B42318; --red-wash: #FBEAE8; --amber: #8A5A00; --amber-wash: #FBF1DC; --green: #1E6B45; --green-wash: #E5F1E9;
  /* type */
  --ui: "Public Sans", "Segoe UI", sans-serif; --display: "Newsreader", Georgia, serif;
  --t12: 12px; --t13: 13px; --t14: 14px; --t16: 16px; --t20: 20px; --t24: 24px; --t28: 28px; --t40: 40px;
  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  /* radius, shadow, motion */
  --r-ctl: 3px; --r-sheet: 6px;
  --shadow: 0 1px 2px rgb(28 39 51 / .06), 0 4px 12px rgb(28 39 51 / .06);
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: 160ms;
  --max: 1360px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--t14)/1.5 var(--ui); color: var(--ink); background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
h1, h2, h3, p { margin: 0; }
h1 { font: 560 var(--t28)/1.15 var(--display); letter-spacing: -.01em; font-variation-settings: "opsz" 36; }
h2 { font: 600 var(--t16)/1.3 var(--ui); }
h3 { font: 600 var(--t13)/1.4 var(--ui); color: var(--ink-2); }
a { color: var(--blue); text-underline-offset: 2px; }
b { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.meta { color: var(--ink-3); font-size: var(--t13); }
.hint { color: var(--ink-3); font-weight: 400; }
.warn-t { color: var(--amber); } .bad-t { color: var(--red); }
.spacer { flex: 1; } .hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s2); top: -40px; background: var(--blue); color: #fff; padding: var(--s2) var(--s3); border-radius: var(--r-ctl); z-index: 100; }
.skip:focus { top: var(--s2); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
kbd { font: 600 11px/1 var(--ui); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: var(--r-ctl); padding: 2px 5px; background: var(--sheet); color: var(--ink-2); }

/* ---------- controls */
.btn { font: 600 var(--t13)/1.2 var(--ui); display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-ctl); border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn:hover:not(:disabled) { border-color: #B7C3B5; background: #FAFBF9; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--blue-d); border-color: var(--blue-d); }
.btn.primary kbd { background: transparent; border-color: rgb(255 255 255 / .45); color: #fff; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover:not(:disabled) { background: var(--rule-soft); border-color: transparent; }
.btn.sm { padding: 6px 10px; font-size: var(--t12); }
.btn.icon-only { padding: 6px 8px; }
label.btn { cursor: pointer; }
input, select { font: 400 var(--t14)/1.3 var(--ui); padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--r-ctl); background: var(--sheet); color: var(--ink); width: 100%; min-width: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
input:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
input::placeholder { color: var(--ink-3); }
fieldset:disabled input, fieldset:disabled select { background: var(--paper); color: var(--ink-2); }

/* status mark: square + text, no pills */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t12); font-weight: 600; white-space: nowrap; }
.st i { width: 8px; height: 8px; border-radius: 1px; background: currentColor; }
.st.green { color: var(--green); } .st.amber { color: var(--amber); } .st.red { color: var(--red); } .st.grey { color: var(--ink-3); }
.cf { font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: var(--r-ctl); font-variant-numeric: tabular-nums; }
.cf.green { background: var(--green-wash); color: var(--green); } .cf.amber { background: var(--amber-wash); color: var(--amber); } .cf.red { background: var(--red-wash); color: var(--red); }

/* ---------- header */
.bar { display: flex; align-items: flex-end; gap: var(--s5); padding: var(--s3) var(--s5) 0; background: var(--paper); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; padding-bottom: var(--s3); }
.bname { font: 600 var(--t20)/1.1 var(--display); letter-spacing: -.005em; }
.bsub { font-size: var(--t12); color: var(--ink-3); }
#nav { display: flex; gap: var(--s1); }
#nav a { color: var(--ink-2); text-decoration: none; padding: var(--s3) var(--s3) 11px; font-weight: 600; font-size: var(--t14); border-bottom: 2px solid transparent; display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
#nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
#nav a.on { color: var(--blue); border-bottom-color: var(--blue); }
.cnt { font-weight: 500; font-size: var(--t12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cnt:empty { display: none; }
#nav .short, #tourBtn .short { display: none; }
#nav a.on .cnt { color: var(--blue); }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s2); }
.who { display: flex; align-items: center; gap: var(--s2); font-size: var(--t13); color: var(--ink-2); }
.who select { width: auto; padding: 7px 8px; font-size: var(--t13); }

main { flex: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); display: flex; flex-direction: column; gap: var(--s5); }
main:focus { outline: none; }
.foot { display: flex; gap: var(--s4); align-items: center; justify-content: space-between; padding: var(--s3) var(--s5); font-size: var(--t12); color: var(--ink-3); border-top: 1px solid var(--rule); }

/* ---------- page lead (inbox + export) */
.lead { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s5); align-items: end; }
.lead-text { display: flex; flex-direction: column; gap: var(--s3); }
.lead-text p { font-size: var(--t16); color: var(--ink-2); max-width: 68ch; }
.lead-actions { display: flex; flex-direction: column; gap: var(--s2); align-items: stretch; justify-self: end; min-width: 280px; }
.lead-actions .btn { justify-content: center; }
.focal { font: 500 var(--t40)/1.05 var(--display); color: var(--ink); letter-spacing: -.015em; font-variation-settings: "opsz" 60; font-variant-numeric: tabular-nums lining-nums; }
.lead-text .focal { font-size: var(--t40); color: var(--ink); max-width: none; }
.lead-text p.timing { font-size: var(--t14); max-width: 72ch; }

/* ---------- ledger tables */
.ledger { background: var(--sheet); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.ledger-cap { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.lrow { display: grid; grid-template-columns: 40px minmax(0, 1.7fr) minmax(0, 1.2fr) 110px 100px; gap: var(--s4); align-items: center; padding: 8px var(--s4); border-bottom: 1px solid var(--rule-soft); }
.lhead { font-size: var(--t12); font-weight: 600; color: var(--ink-2); padding-top: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); background: #FBFCFA; }
.lhead .num, .pamt, .pn { text-align: right; }
.post { font: inherit; color: inherit; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule-soft); width: 100%; cursor: pointer; transition: background-color var(--dur) var(--ease); }
.post:hover { background: rgb(230 237 246 / .45); }
.post:focus-visible { outline-offset: -2px; }
.pn { color: var(--ink-3); font-size: var(--t13); }
.pmain, .pex { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.pmain b, .pex > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmain .meta, .pex .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t12); color: var(--ink-2); margin-top: 2px; min-width: 0; }
.att .ic { width: 13px; height: 13px; color: var(--ink-3); }
.pamt { font-weight: 600; }
.empty { padding: var(--s6) var(--s4); text-align: center; color: var(--ink-2); }
.empty.solo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); text-align: left; padding: var(--s6) 0; }

/* ---------- review */
.review { display: grid; grid-template-columns: minmax(230px, 3fr) minmax(0, 5fr) minmax(340px, 4fr); gap: var(--s5); align-items: start; }
.queue { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; border-top: 2px solid var(--ink); background: var(--sheet); border-bottom: 1px solid var(--rule); }
.queue-h { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s3) var(--s3) var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.qh { padding: var(--s3) var(--s4) var(--s1); }
.qi { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--rule-soft); cursor: pointer; display: flex; gap: var(--s2); align-items: flex-start; padding: 9px var(--s3) 9px var(--s4); width: 100%; text-align: left;
  transition: background-color var(--dur) var(--ease); }
.qi:hover { background: rgb(230 237 246 / .45); }
.qi.on { background: var(--blue-wash); box-shadow: inset 0 0 0 1px rgb(31 78 140 / .25); }
.qi:focus-visible { outline-offset: -2px; }
.qd { width: 8px; height: 8px; border-radius: 1px; flex: none; margin-top: 6px; background: var(--ink-3); }
.qd.green, .qd.approved { background: var(--green); } .qd.amber { background: #C58A1A; } .qd.red { background: var(--red); } .qd.held { background: var(--rule); }
.qm { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qm b { font-size: var(--t13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm .meta { font-size: var(--t12); }
.qa { font-size: var(--t13); font-weight: 600; display: flex; flex-direction: column; align-items: flex-end; }
.qa .meta { font-weight: 400; font-size: var(--t12); }

.doc { min-width: 0; }
.doc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.doc-h h2 { font-size: var(--t14); overflow-wrap: anywhere; }
.pagewrap { position: relative; line-height: 0; background: var(--sheet); box-shadow: var(--shadow); border-radius: var(--r-sheet); overflow: hidden; }
#page { display: block; max-width: 100%; }
#boxes { position: absolute; inset: 0; pointer-events: none; }
.fb { position: absolute; border: 1.5px solid rgb(31 78 140 / .35); background: rgb(31 78 140 / .05); border-radius: 2px;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.fb.hi { border-color: var(--blue); background: rgb(31 78 140 / .14); box-shadow: 0 0 0 3px rgb(31 78 140 / .18); }
.fb.red { border-color: var(--red); background: rgb(180 35 24 / .08); }
.scanbadge { position: absolute; top: var(--s3); left: var(--s3); right: var(--s3); display: flex; gap: var(--s2); align-items: center; line-height: 1.35; background: var(--red-wash); color: var(--red); font-weight: 600; font-size: var(--t13); padding: var(--s2) var(--s3); border-radius: var(--r-ctl); }

.slip { display: flex; flex-direction: column; gap: var(--s4); position: sticky; top: 84px; background: var(--sheet); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: var(--s4); }
.flags { display: flex; flex-direction: column; gap: var(--s2); }
.flag { display: flex; gap: var(--s2); align-items: flex-start; padding: 10px var(--s3); border-radius: var(--r-ctl); font-size: var(--t13); line-height: 1.45; }
.flag .ic { margin-top: 1px; }
.flag-b { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.flag.red { background: var(--red-wash); color: #8E1C13; } .flag.amber { background: var(--amber-wash); color: #6E4800; } .flag.green { background: var(--green-wash); color: #17573A; }
.vrf { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 600; cursor: pointer; }
.vrf input { width: 16px; height: 16px; margin: 1px 0 0; flex: none; accent-color: var(--blue); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s4); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s3); }
label[data-f] { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t12); color: var(--ink-2); font-weight: 600; }
.lab { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.lines { display: flex; flex-direction: column; gap: 6px; }
.lh { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.lh h3 { color: var(--ink); font-size: var(--t14); }
.ln { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 96px; gap: 6px; }
.lnh { font-size: var(--t12); color: var(--ink-3); font-weight: 600; }
.lnh .num, .lm { text-align: right; }
.lt { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--ink); padding-top: var(--s2); margin-top: 2px; font-weight: 600; }
.lt b { font-size: var(--t16); }
.hist { border-top: 1px solid var(--rule); padding-top: var(--s3); display: flex; flex-direction: column; gap: 6px; }
.hist table { border-collapse: collapse; font-size: var(--t12); color: var(--ink-2); width: 100%; }
.hist td { padding: 3px var(--s2) 3px 0; border-bottom: 1px solid var(--rule-soft); }
.hist td:not(:nth-child(3)) { white-space: nowrap; }
.hist td.num:last-child { text-align: right; padding-right: 0; }
.acts { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: var(--s3); }

/* ---------- export */
.export-lead .lead-text { gap: var(--s2); }
.howto { padding: var(--s3) var(--s4); color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.howto span { display: block; max-width: 90ch; }
.erow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 70px 120px minmax(0, 1fr) 190px; gap: var(--s4); align-items: center; padding: 10px var(--s4); border-bottom: 1px solid var(--rule-soft); }
.erow .num { text-align: right; }
.eact { display: flex; gap: 6px; justify-content: flex-end; }
.mlabel { display: none; }
.iifwrap { margin: var(--s4); border: 1px solid var(--rule); overflow: auto; }
.iif-cap { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); background: #FBFCFA; }
.iif-cap h3 { color: var(--ink); }
table.iif { border-collapse: collapse; width: 100%; font-size: var(--t12); font-variant-numeric: tabular-nums; }
.iif th { text-align: left; font-weight: 600; color: var(--ink-2); padding: 6px var(--s3); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.iif td { padding: 5px var(--s3); border-bottom: 1px solid var(--rule-soft); white-space: nowrap; }
.iif .num { text-align: right; }
.iif tr.trns td { font-weight: 600; }
.iif tr.spl td:first-child { padding-left: var(--s5); color: var(--ink-3); }
.iif tr.endt td { color: var(--ink-3); border-bottom: 1px solid var(--rule); font-size: 11px; padding-top: 2px; padding-bottom: 2px; }
.iif tr.vend td { color: var(--green); }

/* ---------- how */
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: var(--s3); font-size: var(--t16); line-height: 1.6; }
.prose h2 { margin-top: var(--s4); font-size: var(--t20); font-family: var(--display); font-weight: 560; }
.prose ul { margin: 0; padding-left: 1.2em; }
.prose li { margin: var(--s1) 0; }

/* ---------- coach + toasts */
.coach { position: fixed; left: var(--s5); bottom: 64px; width: 380px; max-width: calc(100vw - 24px); background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); border-top: 3px solid var(--blue); border-radius: var(--r-sheet); padding: var(--s4); box-shadow: var(--shadow); z-index: 50; display: flex; flex-direction: column; gap: var(--s2); }
.cstep { font-size: var(--t12); color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.ct { font: 600 var(--t20)/1.25 var(--display); }
.coach p { font-size: var(--t14); color: var(--ink-2); }
.cb { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s1); }
.pulse { outline: 3px solid #E8B54A; outline-offset: 6px; }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--s4); display: flex; flex-direction: column; gap: 6px; z-index: 60; align-items: center; }
.toast { background: var(--ink); color: #fff; padding: var(--s2) var(--s3); border-radius: var(--r-ctl); font-size: var(--t13); box-shadow: var(--shadow); }
.toast.ok { background: var(--green); } .toast.bad { background: var(--red); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 768-1180 */
@media (max-width: 1180px) {
  .review { grid-template-columns: minmax(220px, 2fr) minmax(0, 3fr); }
  .review .slip { grid-column: 1 / -1; position: static; }
  .lead { grid-template-columns: 1fr; align-items: start; }
  .lead-actions { justify-self: start; min-width: 0; }
  .lead-actions { flex-direction: row; flex-wrap: wrap; }
  .erow { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 50px 110px minmax(0, 1fr) 190px; }
}
@media (max-width: 900px) {
  .bar { gap: 0 var(--s4); }
  .bar-right { order: 2; margin-left: auto; padding-bottom: var(--s3); }
  #nav { order: 3; width: 100%; overflow-x: auto; margin: 0 calc(-1 * var(--s3)); }
  .erow { display: flex; flex-wrap: wrap; gap: 2px var(--s2); }
  .erow.lhead { display: none; }
  .erow .ep { flex-basis: 100%; }
  .erow .ek, .erow .eb, .erow .et, .erow .ew { font-size: var(--t13); color: var(--ink-2); text-align: left; }
  .erow .mnone { display: none; }
  .erow .eact { flex-basis: 100%; justify-content: flex-start; margin-top: var(--s1); }
  .lrow { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 2px var(--s3); padding: 10px var(--s3); }
  .lrow.lhead { display: none; }
  .pn { grid-row: 1 / span 2; align-self: start; text-align: left; padding-top: 1px; }
  .pmain { grid-column: 2; } .pamt { grid-column: 3; grid-row: 1; align-self: start; }
  .pex { grid-column: 2; } .pst { grid-column: 3; grid-row: 2; justify-self: end; align-self: end; }
  .mlabel { display: inline; }
}

/* ---------- phones */
@media (max-width: 640px) {
  :root { --t28: 24px; --t40: 32px; }
  .bar { padding: var(--s3) var(--s4) 0; position: static; }
  .brand { padding-bottom: var(--s2); }
  .bar-right { width: 100%; order: 2; margin: 0; padding-bottom: var(--s2); }
  .who { flex: 1; } .who > span { display: none; } .who select { width: 100%; }
  #nav { margin: 0 calc(-1 * var(--s2)); }
  #nav a { padding: var(--s2) var(--s2) 10px; font-size: var(--t13); }
  #nav .long, #tourBtn .long { display: none; } #nav .short, #tourBtn .short { display: inline; }
  main { padding: var(--s5) var(--s3) var(--s7); gap: var(--s4); }
  .lead-actions { flex-direction: column; }
  .ledger-cap { padding: var(--s3); }
  .review { grid-template-columns: 1fr; }
  .queue { position: static; max-height: 260px; order: 1; }
  .slip { order: 2; padding: var(--s3); } .doc { order: 3; }
  .grid2 { grid-template-columns: 1fr; }
  .ln { grid-template-columns: minmax(0, 1fr) 96px; } .ln .ld { grid-column: 1 / -1; }
  .lnh { display: none; }
  .foot { flex-direction: column; align-items: flex-start; }
  .coach { left: var(--s3); right: var(--s3); width: auto; bottom: var(--s3); padding: var(--s3); }
  .ct { font-size: var(--t16); } .coach p { font-size: var(--t13); }
  .erow { padding: 10px var(--s3); }
}