/* Corporate Records
   Two looks share one structure:
   - Ledger (default): registry paper, blue-black ink, ledger-blue rules, a red "filed" stamp.
   - Terminal: near-black, amber, heavy wide caps, mono labels, slanted buttons. */

:root {
  --paper: #fbfbf9; --surface: #ffffff; --ink: #18233a; --muted: #55607a; --line: #cfd9e8; --rule: #9fb3d1;
  --accent: #1f3f8f; --accent-ink: #ffffff; --stamp: #b8322a; --warn: #9a5b00; --bad: #b8322a;
  --head: "Bricolage Grotesque", "Segoe UI", sans-serif; --body: "Public Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --r: 2px;
  --s1: 6px; --s2: 12px; --s3: 20px; --s4: 32px; --s5: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-look="terminal"]) { --paper: #10141d; --surface: #161c28; --ink: #e6ebf5; --muted: #a3aec4; --line: #2a3446; --rule: #3c4a64;
    --accent: #9db8ff; --accent-ink: #0d1424; --stamp: #ff7a6e; --warn: #f0b35a; --bad: #ff7a6e; }
}
:root[data-look="terminal"] {
  --paper: #060606; --surface: #0f0f0f; --ink: #ecebe6; --muted: #9a9993; --line: #272725; --rule: #3a3a37;
  --accent: #ffb000; --accent-ink: #060606; --stamp: #ffb000; --warn: #ffb000; --bad: #ff6b57;
  --head: "Syne", "Arial Black", sans-serif; --body: "Schibsted Grotesk", system-ui, sans-serif; --mono: "JetBrains Mono", Consolas, monospace;
  --r: 0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--body); }
a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- frame ---------- */
.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.side { padding: var(--s4) var(--s3); display: flex; flex-direction: column; gap: var(--s4); position: sticky; top: 0; height: 100vh;
        border-right: 1px solid var(--line); }
.brand { font: 700 19px/1.15 var(--head); }
nav { display: flex; flex-direction: column; }
nav a { color: var(--muted); text-decoration: none; padding: 9px 0; font-size: 16px; }
nav a:hover { color: var(--ink); }
nav a.active { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.look { display: flex; margin-top: auto; border: 1px solid var(--line); border-radius: var(--r); width: max-content; }
.look button { background: transparent; color: var(--muted); font: 400 14px/1 var(--body); padding: 9px 12px; border: 0; cursor: pointer; }
.look button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.side .quiet { align-self: flex-start; }
main { padding: var(--s5) var(--s5) 96px; max-width: 860px; width: 100%; }

/* ---------- type ---------- */
h1 { font: 700 44px/1.08 var(--head); margin: 0 0 var(--s3); letter-spacing: -.5px; text-wrap: balance; }
h2 { font: 700 21px/1.3 var(--head); margin: var(--s5) 0 var(--s2); }
h3 { font: 700 17px/1.4 var(--body); margin: 0 0 var(--s1); }
p { margin: 0 0 var(--s2); max-width: 66ch; text-wrap: pretty; }
.muted { color: var(--muted); } .small { font-size: 15px; }
.lede { font-size: 18px; color: var(--muted); margin: -8px 0 var(--s4); }
.kicker { color: var(--muted); margin: 0 0 var(--s2); font: 500 14px/1.4 var(--mono); }
.now .soon { color: var(--warn); font-weight: 600; } .now .late { color: var(--bad); font-weight: 600; }

/* ---------- controls ---------- */
button, .btn { font: 700 16px/1 var(--body); border: 0; border-radius: var(--r); padding: 14px 22px; cursor: pointer;
               background: var(--accent); color: var(--accent-ink); text-decoration: none; display: inline-block; }
button.ghost, .btn.ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
button.quiet { background: none; color: var(--muted); padding: 8px 0; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
button.quiet:hover { color: var(--ink); }
button:disabled { opacity: .5; cursor: default; }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-top: var(--s3); }
input, select, textarea { font: 16px/1.4 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule);
                          border-radius: var(--r); padding: 11px 12px; width: 100%; }
textarea { font: 14px/1.5 var(--mono); min-height: 360px; }
label { display: block; color: var(--muted); font-size: 15px; margin: var(--s3) 0 var(--s1); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s3); }
.picker { display: flex; margin-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.picker button { background: transparent; color: var(--muted); font-weight: 400; padding: 10px 2px; margin-right: var(--s3); border-radius: 0;
                 box-shadow: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.picker button[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

/* ---------- home ---------- */
.now { margin: 0 0 var(--s4); }
.now h1 { font-size: 52px; max-width: 16ch; }
.stamp { display: inline-block; font: 600 15px/1.2 var(--mono); color: var(--stamp); border: 2px solid currentColor; padding: 8px 14px;
         transform: rotate(-3deg); letter-spacing: .06em; text-transform: uppercase; margin: var(--s1) 0 var(--s3);
         box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px currentColor; }
.strip { margin: var(--s5) 0 var(--s5); }
.strip-track { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); border-top: 2px solid var(--ink); height: 84px; }
.strip-track span { font: 400 13px/1 var(--mono); color: var(--muted); border-left: 1px solid var(--line); padding: 10px 0 0 6px; }
.strip-track .mark { position: absolute; top: -10px; width: 2px; height: 20px; background: var(--ink); font-style: normal; }
.strip-track .mark b { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 14px/1 var(--mono); }
.strip-track .mark.due { background: var(--stamp); width: 4px; } .strip-track .mark.due b { color: var(--stamp); }
.strip-track .mark.now b { top: -28px; color: var(--muted); font-weight: 400; }
.strip-note { color: var(--muted); font-size: 15px; margin-top: var(--s1); }
.callout { border: 1px solid var(--warn); border-radius: var(--r); padding: var(--s2) var(--s3); margin: 0 0 var(--s4); max-width: 66ch; }
.register { border-top: 2px solid var(--ink); }
.reg-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3); padding: 15px 2px; border-bottom: 1px solid var(--line);
           color: inherit; text-decoration: none; align-items: baseline; }
.reg-row.two { grid-template-columns: 1fr auto; }
a.reg-row:hover .reg-name { color: var(--accent); text-decoration: underline; }
.reg-meta { color: var(--muted); font: 400 14px/1.4 var(--mono); }

/* ---------- yearly filing: a real three-step sequence ---------- */
.done-banner { margin: 0 0 var(--s4); }
ol.flow { list-style: none; counter-reset: s; padding: 0; margin: var(--s3) 0 0; border-top: 2px solid var(--ink); }
ol.flow > li { counter-increment: s; display: grid; grid-template-columns: 56px 1fr; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
ol.flow > li::before { content: counter(s); font: 700 28px/1 var(--head); color: var(--rule); padding-top: 2px; }
ol.flow > li.done::before { content: "✓"; color: var(--accent); }
ol.flow > li.current::before { color: var(--accent); }
ol.flow > li .body { min-width: 0; }
ol.flow > li.done .detail { display: none; }
ol.flow > li.waiting { color: var(--muted); }
ol.flow > li.waiting h3 { color: var(--muted); }
.status { font: 400 14px/1.4 var(--mono); color: var(--muted); margin: 0; }
details.how { margin-top: var(--s3); }
details.how summary { cursor: pointer; color: var(--accent); font-weight: 700; }
details.how ol { padding-left: 22px; margin: var(--s2) 0 0; } details.how li { margin-bottom: var(--s2); }

/* ---------- minute book ---------- */
.drop { border: 1.5px dashed var(--rule); border-radius: var(--r); padding: var(--s3); text-align: center; color: var(--muted); background: var(--surface); margin-top: var(--s2); }
.drop.over { border-color: var(--accent); color: var(--accent); }
.drop label { display: inline; margin: 0; color: var(--accent); cursor: pointer; text-decoration: underline; font-size: inherit; }
.uploader { margin-bottom: var(--s4); }
details.folder { border-bottom: 1px solid var(--line); }
details.folder:first-of-type { border-top: 2px solid var(--ink); }
details.folder summary { cursor: pointer; padding: 14px 2px; font-weight: 700; display: flex; justify-content: space-between; list-style: none; }
details.folder summary::-webkit-details-marker { display: none; }
details.folder summary::before { content: "+"; font: 400 18px/1 var(--mono); color: var(--muted); width: 22px; }
details.folder[open] summary::before { content: "–"; }
details.folder summary .count { margin-left: auto; color: var(--muted); font: 400 14px/1.4 var(--mono); }
.doc { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 10px 0 10px 22px; border-top: 1px solid var(--line); }
.doc .meta { display: block; font: 400 13px/1.4 var(--mono); color: var(--muted); }
.doc button { padding: 9px 14px; font-size: 15px; }

/* ---------- keys + details ---------- */
.keyrow { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.keys { border-top: 2px solid var(--ink); }
.secret { font: 600 20px/1.2 var(--mono); letter-spacing: 1px; margin: var(--s2) 0 0; }
.form { border-top: 2px solid var(--ink); padding-top: var(--s1); }
.note { border: 1px solid var(--warn); border-radius: var(--r); padding: var(--s2) var(--s3); margin: 0 0 var(--s4); }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper);
         padding: 12px 20px; border-radius: var(--r); max-width: 90vw; }

/* ---------- Terminal look ---------- */
[data-look="terminal"] body { font-size: 16px; }
[data-look="terminal"] .side { border-right-color: var(--line); }
[data-look="terminal"] .brand { font: 800 18px/1.1 var(--head); text-transform: uppercase; }
[data-look="terminal"] .brand::before { content: ">_ "; color: var(--accent); font-family: var(--mono); }
[data-look="terminal"] h1 { font: 800 60px/0.98 var(--head); text-transform: uppercase; letter-spacing: -1px; }
[data-look="terminal"] .now h1 { font-size: 64px; max-width: 18ch; }
[data-look="terminal"] h2 { font: 800 22px/1.2 var(--head); text-transform: uppercase; letter-spacing: .3px; }
[data-look="terminal"] :is(.kicker, nav a, .reg-meta, .strip-track span, .strip-track .mark b, .status, .look button, .doc .meta, details.folder summary .count) {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; font-size: 13px; }
[data-look="terminal"] nav a { padding: 10px 0; }
[data-look="terminal"] nav a.active { color: var(--accent); text-decoration: none; }
[data-look="terminal"] nav a.active::before { content: "> "; }
[data-look="terminal"] :is(button, .btn) { font: 600 14px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 14px 26px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
[data-look="terminal"] :is(button.ghost, .btn.ghost) { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
[data-look="terminal"] :is(button.quiet, .look button, .picker button) { clip-path: none; }
[data-look="terminal"] button.quiet { padding: 8px 0; text-transform: none; letter-spacing: 0; font: 400 15px/1 var(--body); }
[data-look="terminal"] .look button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
[data-look="terminal"] .picker button { font: 500 14px/1 var(--mono); text-transform: uppercase; }
[data-look="terminal"] :is(.register, ol.flow, details.folder:first-of-type, .keys, .form) { border-top: 1px solid var(--rule); }
[data-look="terminal"] .strip-track { border-top: 1px solid var(--rule); }
[data-look="terminal"] ol.flow > li::before { font: 800 26px/1 var(--head); }
[data-look="terminal"] ol.flow > li.current .body h3 { color: var(--accent); }
[data-look="terminal"] :is(input, select, textarea) { background: #000; border-color: var(--rule); font-family: var(--mono); font-size: 15px; }
[data-look="terminal"] .secret { color: var(--accent); }
[data-look="terminal"] .stamp { box-shadow: none; transform: rotate(-2deg); }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 14px 16px; gap: 8px 16px;
          border-right: 0; border-bottom: 1px solid var(--line); }
  .brand br { display: none; }
  nav { flex-direction: row; flex-wrap: wrap; gap: 0 16px; order: 3; width: 100%; }
  .look { margin: 0 0 0 auto; } .side .quiet { order: 2; }
  main { padding: 28px 16px 72px; }
  h1, .now h1 { font-size: 32px; } [data-look="terminal"] h1, [data-look="terminal"] .now h1 { font-size: 38px; }
  .reg-row { grid-template-columns: 1fr auto; } .reg-row:not(.two) .reg-meta:last-child { display: none; }
  .strip-track span { font-size: 11px; padding-left: 3px; }
  ol.flow > li { grid-template-columns: 40px 1fr; }
}

h2.step-title { font: 700 17px/1.4 var(--body); margin: 0 0 var(--s1); }
ol.flow > li.waiting h2.step-title { color: var(--muted); }
[data-look="terminal"] h2.step-title { font: 700 17px/1.4 var(--body); text-transform: none; letter-spacing: 0; }
[data-look="terminal"] ol.flow > li.current h2.step-title { color: var(--accent); }
.strip-track .mark b { background: var(--paper); padding: 2px 4px; }
.now .soon, .now .late { font-weight: 700; } .now .soon { color: var(--warn); } .now .late { color: var(--bad); }
[data-look="terminal"] .brand { font-size: 15px; }
[data-look="terminal"] .look button { padding: 9px 10px; font-size: 12px; }

/* signature */
.sigpad { margin-top: var(--s2); }
.sigpad .picker { margin-bottom: var(--s2); }
.sigfonts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s2); margin-top: var(--s2); }
.sigfont { background: var(--surface); color: #1d2b6b; box-shadow: inset 0 0 0 1px var(--line); font-size: 26px; font-weight: 400; padding: 14px 12px;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none !important; letter-spacing: 0 !important; clip-path: none !important; }
.sigfont[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.sigcanvas { display: block; width: 100%; max-width: 600px; aspect-ratio: 10 / 3; background: #fff; border: 1px solid var(--rule);
             border-radius: var(--r); margin-top: var(--s2); touch-action: none;
             background-image: linear-gradient(to top, transparent 22%, #9fb3d1 22%, #9fb3d1 calc(22% + 1px), transparent calc(22% + 1px)); }
.sigcanvas.drawing { cursor: crosshair; }
.sigpreview { display: block; max-width: 280px; max-height: 90px; background: #fff; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r); margin: var(--s2) 0; }
label.consent { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 16px; margin: var(--s3) 0 0; }
label.consent input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--accent); }

/* receipts */
.capture { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s3); }
.capture label { margin: 0; cursor: pointer; font-size: 16px; }
.capture label.btn { color: var(--accent-ink); }
.capture label.btn.ghost { color: var(--accent); }
.capture-main { font-size: 18px !important; padding: 18px 28px; }
.queue { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
.review { display: grid; grid-template-columns: 160px 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.review label { margin-top: var(--s2); }
.thumb-lg { width: 160px; max-height: 240px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.pdfbadge { display: grid; place-items: center; font: 600 13px/1 var(--mono); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); min-height: 56px; }
.review .pdfbadge { width: 160px; height: 200px; }
.yearbar { display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0 var(--s2); flex-wrap: wrap; }
.yearbar label { margin: 0; } .yearbar select { width: auto; }
.rc-row { display: grid; grid-template-columns: 56px 1fr auto auto; gap: var(--s2) var(--s3); align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); background: #fff; }
.rc-main { display: flex; flex-direction: column; min-width: 0; }
.rc-amt { font: 600 16px/1 var(--mono); font-variant-numeric: tabular-nums; }
.rc-actions { display: flex; gap: 6px; } .rc-actions .btn, .rc-actions button { padding: 9px 12px; font-size: 14px; }
.checklist { margin: var(--s2) 0 0; padding-left: 20px; } .checklist li { margin-bottom: 6px; }
.actions.quick { margin: 0 0 var(--s2); }
@media (max-width: 760px) {
  .review { grid-template-columns: 1fr; } .thumb-lg { width: 100%; max-height: 260px; }
  .rc-row { grid-template-columns: 48px 1fr auto; } .rc-actions { grid-column: 2 / -1; } .thumb { width: 48px; height: 48px; }
  .capture-main { flex: 1 1 100%; text-align: center; }
}
@media (max-width: 760px) {
  .look { display: none; }
  .side { padding: 10px 16px; gap: 4px 16px; }
  nav { flex-wrap: nowrap; overflow-x: auto; gap: 0 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav a { white-space: nowrap; padding: 8px 0; }
  .side .quiet { margin-left: auto; order: 2; }
  main { padding-top: 20px; }
  .lede { font-size: 16px; margin-bottom: var(--s3); }
}

.signbox { padding: 8px 0 16px 22px; border-top: 1px dashed var(--line); }
.doc .rc-actions { flex: none; }