/* DropMatch — shared Seaside Labs design system
   Audience: compliance-minded CA data-broker owners under a legal deadline.
   Tone target: plain, credible, factual-urgent. Reads like serious B2B compliance
   software, not a generic compliance dashboard. The public site uses Seaside's
   dark Workshop-at-Night theme; this operational surface uses its cool-paper
   infrastructure mode with the same typography and status semantics. */

@font-face {
  font-family: "Fraunces";
  src: url("/static/assets/fonts/fraunces-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/static/assets/fonts/fraunces-latin-variable-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/static/assets/fonts/instrument-sans-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Neutral ink scale */
  --ink:        #0a3142;
  --ink-soft:   #294d5b;
  --muted:      #4d6873;
  --faint:      #5b747e;
  --line:       #cddde1;
  --line-soft:  #e3ecee;
  --bg:         #f7f9fb;
  --bg-soft:    #eef4f5;
  --bg-sunken:  #e2edef;

  /* Single serious accent — deep teal reads clean + trustworthy */
  --accent:       #0a6783;
  --accent-strong:#064b61;
  --accent-weak:  #bfeaf0;
  --accent-tint:  #e9f7f8;
  --brass:        #ecc45c;

  /* Urgency + status — used sparingly, never decoratively */
  --warn:      #8b6518;
  --warn-weak: #fff8df;
  --warn-line: #dcb943;
  --danger:      #a83f36;
  --danger-weak: #fff1ef;
  --danger-line: #ed9b92;
  --ok:      #27765a;
  --ok-weak: #edf8f2;
  --ok-line: #86c7aa;

  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow:    0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 18px 48px rgba(15,23,42,.12);

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Code", "JetBrains Mono",
          Menlo, Consolas, monospace;

  --maxw: 1080px;
  --maxw-narrow: 760px;
}

[hidden] { display:none !important; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink-soft);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--ink); font-family: var(--display); line-height: 1.16; margin: 0 0 .5em; font-weight: 550; letter-spacing: -0.018em; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -0.025em; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; font-variation-settings: "opsz" 72; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--ink); font-weight: 650; }
small { font-size: .82rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin: .3rem 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Focus — visible, consistent, keyboard-only */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.container-narrow { max-width: var(--maxw-narrow); }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-sunken { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stack > * + * { margin-top: 1rem; }
.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .75rem;
}
.lead { font-size: 1.15rem; color: var(--ink-soft); }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: .5rem; z-index: 100;
  background: var(--ink); color: #fff; padding: .5rem .9rem; border-radius: var(--radius-sm);
}
.skip-link:focus { left: .5rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; gap: 1.5rem; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 750; color: var(--ink); font-size: 1.08rem; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand svg { display: block; }
.nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
.nav a.navlink { color: var(--ink-soft); font-weight: 550; font-size: .95rem; }
.nav a.navlink:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 720px) {
  .nav .navlink { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: .95rem; font-weight: 600; line-height: 1;
  padding: .7rem 1.15rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
  min-height: 44px;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-strong); text-decoration: none; }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-soft); border-color: #cbd5e1; text-decoration: none; }
.btn-ghost { background: transparent; color: var(--accent); padding-left: .4rem; padding-right: .4rem; }
.btn-ghost:hover:not(:disabled) { color: var(--accent-strong); text-decoration: none; }
.btn-lg { font-size: 1.02rem; padding: .85rem 1.5rem; }
.btn-block { width: 100%; }
.btn-danger { background: var(--bg); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover:not(:disabled) { background: var(--danger-weak); }

/* ---------- Cards ---------- */
.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm);
}
.card-pad-lg { padding: 2rem; }
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Callouts (deadline / fine / info) ---------- */
.callout {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; background: var(--bg-soft);
}
.callout-warn   { border-color: var(--warn-line); background: var(--warn-weak); }
.callout-danger { border-color: var(--danger-line); background: var(--danger-weak); }
.callout-accent { border-color: var(--accent-weak); background: var(--accent-tint); }
.callout-ok     { border-color: var(--ok-line); background: var(--ok-weak); }
.callout h3, .callout h4 { margin-top: 0; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 650; letter-spacing: .02em;
  padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--muted);
}
.badge-accent { background: var(--accent-tint); color: var(--accent-strong); border-color: var(--accent-weak); }
.badge-warn   { background: var(--warn-weak); color: var(--warn); border-color: var(--warn-line); }
.badge-ok     { background: var(--ok-weak); color: var(--ok); border-color: var(--ok-line); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } }
.hero h1 { margin-bottom: .75rem; }
.hero .lead { max-width: 34ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero-trust { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; }
.hero-trust svg { color: var(--accent); flex: none; }

/* ---------- Stat tiles ---------- */
.stat { text-align: left; }
.stat .num { font-family: var(--mono); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 650; color: var(--ink); letter-spacing: -0.02em; }
.stat .lbl { font-size: .85rem; color: var(--muted); margin-top: .2rem; }

/* ---------- Fine math table ---------- */
.finetable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.finetable th, .finetable td { text-align: left; padding: .7rem .75rem; border-bottom: 1px solid var(--line); }
.finetable thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; }
.finetable td.amt { font-family: var(--mono); text-align: right; color: var(--ink); font-weight: 600; }
.finetable tr:last-child td { border-bottom: 0; }

/* ---------- Architecture diagram ---------- */
.arch { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; }
@media (max-width: 720px) { .arch { grid-template-columns: 1fr; } .arch-arrow { transform: rotate(90deg); justify-self: center; } }
.arch-node { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; background: var(--bg); }
.arch-node.you { border-color: var(--accent-weak); background: var(--accent-tint); }
.arch-node h4 { display: flex; align-items: center; gap: .5rem; }
.arch-node ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--ink-soft); }
.arch-arrow { display: flex; align-items: center; justify-content: center; color: var(--faint); }
.arch-arrow .lbl { font-size: .72rem; color: var(--muted); text-align: center; }

/* ---------- Pricing ---------- */
.price-card { max-width: 420px; margin: 0 auto; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); background: var(--bg); }
.price-amt { font-size: 3rem; font-weight: 750; color: var(--ink); line-height: 1; letter-spacing: -0.03em; }
.price-amt .per { font-size: 1rem; font-weight: 550; color: var(--muted); letter-spacing: 0; }
.price-alt { color: var(--muted); font-size: .95rem; margin-top: .35rem; }
.price-free { margin: 1rem auto; }
.price-features { list-style: none; padding: 0; margin: 1.5rem 0; text-align: left; }
.price-features li { display: flex; align-items: flex-start; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); }
.price-features li:last-child { border-bottom: 0; }
.price-features svg { color: var(--accent); flex: none; margin-top: .15rem; }

/* ---------- FAQ ---------- */
.faq { max-width: var(--maxw-narrow); margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 1.1rem; margin-bottom: .75rem; background: var(--bg); }
.faq details[open] { border-color: #cbd5e1; }
.faq summary {
  cursor: pointer; padding: 1.05rem 0; font-weight: 650; color: var(--ink);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--muted); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding-bottom: 1.05rem; margin: 0; color: var(--ink-soft); }
.faq details > p:first-of-type { margin-top: -.25rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 2.5rem 0; color: var(--muted); font-size: .9rem; }
.footer-top { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-links a { color: var(--ink-soft); }
.disclaimer {
  border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: .5rem;
  font-size: .82rem; color: var(--muted); line-height: 1.55;
}
.disclaimer strong { color: var(--ink-soft); }

/* ---------- Forms ---------- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; color: var(--ink); font-size: .9rem; margin-bottom: .35rem; }
.field .hint { font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.input, select.input {
  width: 100%; padding: .7rem .8rem; font-family: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
  min-height: 44px;
}
.input:focus, select.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.input::placeholder { color: var(--faint); }

/* ---------- Auth card ---------- */
.auth-wrap { min-height: 70vh; display: grid; place-items: center; padding: 3rem 1.25rem; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 1.5rem; }
.auth-tabs { display: flex; gap: .25rem; background: var(--bg-sunken); padding: .25rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; }
.auth-tabs a { flex: 1; text-align: center; padding: .5rem; border-radius: 6px; font-weight: 600; font-size: .9rem; color: var(--muted); }
.auth-tabs a[aria-current="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sm); }
.auth-tabs a:hover { text-decoration: none; }

/* ---------- Auth modal (landing) ---------- */
.auth-dialog {
  border: none; border-radius: var(--radius-lg); padding: 0;
  max-width: 440px; width: calc(100% - 2rem);
  box-shadow: var(--shadow-lg); color: var(--ink-soft);
}
.auth-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.auth-dialog .auth-card { position: relative; padding: 2rem; box-shadow: none; border: 0; max-width: none; }
.auth-dialog h2 { font-size: 1.4rem; }
.auth-close {
  position: absolute; top: .85rem; right: .85rem;
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  width: 44px; height: 44px; padding: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}
.auth-close:hover { color: var(--ink); background: var(--bg-soft); }
.auth-tab {
  flex: 1; min-height: 44px; text-align: center; padding: .5rem; border: 0; background: transparent;
  border-radius: 6px; font: inherit; font-weight: 600; font-size: .9rem;
  color: var(--muted); cursor: pointer;
}
.auth-tab[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- Alerts (inline status) ---------- */
.alert { display: flex; gap: .65rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); font-size: .92rem; margin-bottom: 1rem; }
.alert svg { flex: none; margin-top: .1rem; }
.alert-danger { background: var(--danger-weak); border-color: var(--danger-line); color: #7f1d1d; }
.alert-danger svg { color: var(--danger); }
.alert-warn { background: var(--warn-weak); border-color: var(--warn-line); color: #78350f; }
.alert-warn svg { color: var(--warn); }
.alert-ok { background: var(--ok-weak); border-color: var(--ok-line); color: #14532d; }
.alert-ok svg { color: var(--ok); }
.alert-info { background: var(--accent-tint); border-color: var(--accent-weak); color: var(--accent-strong); }
.alert-info svg { color: var(--accent); }
.alert strong { color: inherit; }

/* =========================================================
   APP WIZARD
   ========================================================= */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-soft); }
.app-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.app-header .container { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.app-header .cycle-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--ink-soft); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem;
}
.app-header .cycle-chip .mono { color: var(--ink); }
.app-main { flex: 1; padding: 2rem 0 4rem; }
.app-main .container { max-width: 900px; }

/* Post-success founding-order handoff. This is durable account state, not a toast. */
.payment-handoff {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  margin:0 0 1.5rem; padding:1.2rem 1.25rem; border:1px solid var(--warn-line);
  border-radius:var(--radius-sm); background:var(--warn-weak); color:#713f12;
}
.payment-handoff[hidden] { display:none; }
.payment-handoff:focus { outline:3px solid var(--accent-weak); outline-offset:3px; }
.payment-handoff-copy { max-width:62ch; }
.payment-handoff h2 { margin:0 0 .35rem; color:#422006; font-size:1.2rem; letter-spacing:-.015em; }
.payment-handoff p { margin:.25rem 0 0; line-height:1.5; }
.payment-handoff-due { color:#713f12; font-weight:700; }
.payment-handoff-note { color:#854d0e; font-size:.82rem; }
.payment-handoff-action { flex:0 0 250px; }
.payment-handoff-action .btn { width:100%; }
.payment-price { display:flex; align-items:baseline; justify-content:center; gap:.35rem; margin:0 0 .65rem !important; color:#422006; }
.payment-price strong { font:700 1.35rem/1 var(--mono); }
.payment-price span { font-size:.82rem; }
.payment-handoff-status { min-height:1.35rem; color:#713f12; font-size:.8rem; text-align:center; }
.payment-handoff-status.is-error { color:#7f1d1d; font-weight:650; }

/* Stepper */
.stepper { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.step-pill { display: flex; align-items: center; gap: .55rem; min-height:44px; padding: .4rem .7rem; border-radius: 999px; font:inherit; font-size: .85rem; color: var(--muted); background:transparent; border: 1px solid transparent; cursor:pointer; }
.step-pill:disabled { cursor:not-allowed; opacity:.62; }
.step-pill .idx {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; background: var(--bg-sunken); color: var(--muted); flex: none;
}
.step-pill.active { color: var(--ink); background: var(--bg); border-color: var(--line); box-shadow: var(--shadow-sm); }
.step-pill.active .idx { background: var(--accent); color: #fff; }
.step-pill.done { color: var(--ink-soft); }
.step-pill.done .idx { background: var(--accent-weak); color: var(--accent-strong); }
.step-sep { flex: 1 1 12px; height: 1px; background: var(--line); min-width: 8px; }
@media (max-width: 640px) {
  .step-pill .lbl { display: none; }
  .step-sep { flex-basis: 6px; }
}

.step-panel { display: none; }
.step-panel.current { display: block; }
.step-title { display: flex; align-items: baseline; gap: .6rem; }
.step-title .step-num { font-family: var(--mono); color: var(--accent); font-size: .95rem; font-weight: 650; }

/* File drop */
.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius); background: var(--bg);
  padding: 2.25rem 1.5rem; text-align: center; transition: border-color .15s ease, background-color .15s ease;
  cursor: pointer;
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--accent); background: var(--accent-tint); }
.dropzone.dragover { border-color: var(--accent); background: var(--accent-tint); }
.dropzone.loaded { border-style: solid; border-color: var(--ok-line); background: var(--ok-weak); }
.dropzone .dz-icon { color: var(--muted); margin-bottom: .5rem; }
.dropzone.loaded .dz-icon { color: var(--ok); }
.dropzone .dz-title { font-weight: 650; color: var(--ink); }
.dropzone .dz-sub { font-size: .88rem; color: var(--muted); margin-top: .25rem; }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.wizard-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }

/* Column mapper */
.mapper { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.map-row-wide { grid-column: 1 / -1; }
.dropzone.disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 560px) { .mapper { grid-template-columns: 1fr; } }
.map-row label { display: flex; align-items: center; gap: .4rem; }
.req-star { color: var(--danger); }
.map-guessed { font-size: .74rem; color: var(--accent-strong); background: var(--accent-tint); border: 1px solid var(--accent-weak); padding: .05rem .35rem; border-radius: 4px; }

/* Preview table */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.dt { width: 100%; border-collapse: collapse; font-size: .88rem; }
.dt th, .dt td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt thead th { background: var(--bg-soft); color: var(--muted); font-weight: 650; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt tbody tr:nth-child(even) { background: var(--bg-soft); }
.dt .mono { font-size: .82rem; }

/* Progress */
.progress-wrap { margin: 1.5rem 0; }
.progress-track { height: 10px; background: var(--bg-sunken); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 100%; transform:scaleX(0); transform-origin:left; background: var(--accent); border-radius: 999px; transition: transform .2s ease; }
.progress-meta { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin-top: .5rem; }

/* Results stat row */
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 640px) { .result-stats { grid-template-columns: repeat(2, 1fr); } }
.result-stat { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem; background: var(--bg); }
.result-stat .num { font-family: var(--mono); font-size: 1.6rem; font-weight: 650; color: var(--ink); }
.result-stat.matched .num { color: var(--accent); }
.result-stat .lbl { font-size: .8rem; color: var(--muted); margin-top: .15rem; }

/* Receipt */
.receipt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 1.75rem; }
.receipt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }
.receipt dl { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: .5rem 1rem; margin: 0; }
.receipt dt { color: var(--muted); font-size: .88rem; }
.receipt dd { margin: 0; color: var(--ink); font-size: .92rem; }
.receipt .hash { font-family: var(--mono); font-size: .8rem; word-break: break-all; color: var(--ink-soft); background: var(--bg-soft); padding: .5rem .65rem; border-radius: 6px; border: 1px solid var(--line); }

/* Toolbar of download/print buttons */
.result-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }

/* Utility spacing */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }

/* Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Print — receipt only */
@media print {
  body { background: #fff; }
  .site-header, .app-header, .stepper, .wizard-actions, .result-actions,
  .site-footer .footer-top, .no-print { display: none !important; }
  .app-main { padding: 0; }
  .receipt { border: 1px solid #000; box-shadow: none; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ---------- DropMatch evidence-workspace refinement ---------- */
.app-page { background:var(--bg); }
.app-page code, .app-page .mono { font-family:var(--mono); }
.demo-only .app-header { border-top:4px solid var(--brass); }
.demo-only .app-main { padding-top:clamp(2.5rem, 6vw, 4.5rem); }
.brand-mark {
  width:30px; height:30px; fill:none; stroke:var(--accent); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.app-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }
.app-header-row .cycle-chip { max-width:min(56vw, 560px); }
.app-header-row #logout-btn { margin-left:.25rem; }
.app-intro {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:2rem;
  align-items:end; margin-bottom:1.75rem;
}
.app-intro h1 { margin:.15rem 0 .55rem; font-size:clamp(2.15rem,5vw,3.6rem); letter-spacing:-.035em; }
.app-intro p { max-width:68ch; margin:0; }
.deadline-card {
  border:1px solid #cbd2dd; border-top:4px solid var(--accent); background:#fff;
  padding:1.15rem 1.2rem; box-shadow:0 8px 26px rgba(23,26,31,.07);
}
.deadline-card span { display:block; }
.deadline-label { color:var(--muted); font-size:.74rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.deadline-card strong { display:block; margin:.35rem 0; color:var(--ink); font:650 1.35rem/1.15 var(--mono); }
#deadline-secondary { color:var(--muted); font-size:.82rem; line-height:1.45; }
.step-panel.card, .step-panel > .card { border-radius:4px; border-color:#cfd4d0; box-shadow:0 12px 34px rgba(23,26,31,.06); }
.step-title { align-items:center; margin-bottom:.65rem; }
.step-title h2 { margin:0; letter-spacing:-.025em; }
.step-num { display:inline-grid; place-items:center; min-width:34px; height:26px; border:1px solid var(--accent); color:var(--accent); font:700 .75rem var(--mono); }
.dropzone { display:flex; flex-direction:column; align-items:center; min-height:190px; justify-content:center; border-radius:4px; }
.dropzone .dz-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); background:var(--bg-soft); font:500 1.5rem var(--mono); }
.demo-link { color:var(--muted); font-size:.86rem; margin:1rem 0 0; }
.batch-summary { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); margin-top:1rem; background:#fff; }
.batch-summary > div { padding:.85rem 1rem; border-right:1px solid var(--line); }
.batch-summary > div:last-child { border-right:0; }
.batch-summary span, .batch-summary strong { display:block; }
.batch-summary span { color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; }
.batch-summary strong { color:var(--ink); margin-top:.2rem; font:650 1.05rem var(--mono); }
.preview-count { font-size:.82rem; font-weight:400; }
.match-ready { border:1px solid var(--line); background:#fff; padding:1rem 1.1rem; margin-top:1.25rem; }
.match-ready strong, .match-ready span { display:block; }
.match-ready span { color:var(--muted); margin-top:.25rem; }
.section-heading-row { display:flex; justify-content:space-between; gap:1.25rem; align-items:end; margin-top:1.5rem; }
.section-heading-row h3, .section-heading-row p { margin-bottom:0; }
.action-table code { color:var(--ink); font-size:.78rem; }
.action-select { min-width:170px; }
.subcell { display:block; margin-top:.3rem; color:var(--muted); font-size:.75rem; }
.compact-check { display:flex; gap:.5rem; align-items:flex-start; min-width:190px; font-size:.82rem; white-space:normal; }
.compact-check input, .attestation input { width:18px; height:18px; flex:none; margin:.1rem 0 0; accent-color:var(--accent); }
.attestation { display:flex; align-items:flex-start; gap:.75rem; border:1px solid #c7ced8; background:#fff; padding:1rem 1.1rem; margin:1.25rem 0; color:var(--ink-soft); }
.ledger-continuity { border:1px solid var(--line); background:var(--bg-soft); padding:1.15rem; margin:1.25rem 0; }
.continuity-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.55rem; }
.continuity-heading h3 { margin:.2rem 0 0; }
.continuity-badge { flex:none; border:1px solid var(--line); background:#fff; color:var(--muted); padding:.35rem .55rem; font:650 .72rem var(--mono); }
.continuity-badge.is-ok { border-color:var(--ok-line); background:var(--ok-weak); color:#14532d; }
.continuity-badge.is-warn { border-color:var(--warn-line); background:var(--warn-weak); color:#78350f; }
.continuity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }
.continuity-action { display:flex; flex-direction:column; align-items:stretch; gap:.55rem; border:1px solid var(--line); background:#fff; padding:1rem; min-width:0; }
.continuity-action h4, .continuity-action p { margin:0; }
.continuity-action h4 { font-size:.92rem; }
.continuity-action p, .continuity-note { color:var(--muted); font-size:.78rem; line-height:1.45; }
.continuity-action label { color:var(--ink-soft); font-size:.78rem; font-weight:650; margin-bottom:-.25rem; }
.continuity-action .btn { width:100%; margin-top:auto; }
.continuity-action .file-input { padding:.5rem; font-size:.82rem; }
.response-recovery { border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem; }
.response-recovery > h4, .response-recovery > p { margin:.25rem 0; }
.response-recovery > p { color:var(--muted); font-size:.82rem; line-height:1.5; }
#response-recovery-status { display:grid; gap:.5rem; margin-top:.8rem; }
#response-recovery-packages { display:grid; gap:.8rem; margin-top:.8rem; }
.recovery-package { border:1px solid var(--line); background:#fff; padding:1rem; }
.recovery-package-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.recovery-package-head strong, .recovery-package-head span { display:block; }
.recovery-package-head span { color:var(--muted); font-size:.78rem; margin-top:.2rem; }
.recovery-package-head > code { max-width:46%; overflow-wrap:anywhere; color:var(--muted); font-size:.68rem; }
.recovery-response-file { margin-top:.5rem; }
.recovery-response-file > div { min-width:0; }
.recovery-response-file code, .recovery-response-file span { overflow-wrap:anywhere; word-break:break-word; }
.recovery-acceptance { margin:.9rem 0 .65rem; }
.recovery-package > .btn { margin-top:.35rem; }
#decision-status, #complete-status { min-height:1.5rem; color:var(--muted); font-size:.88rem; margin:.75rem 0; }
.response-list { display:grid; gap:.65rem; margin:1.25rem 0; }
.response-file { display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid var(--line); background:#fff; padding:.8rem 1rem; }
.response-file code, .response-file span { display:block; }
.response-file span { color:var(--muted); font-size:.78rem; margin-top:.18rem; }
.response-file.downloaded { border-color:var(--ok-line); background:var(--ok-weak); }
.fingerprint { margin-top:1.25rem; }
.fingerprint > span { display:block; color:var(--muted); font-size:.76rem; margin-bottom:.35rem; }
.fingerprint code { display:block; padding:.65rem .75rem; overflow-wrap:anywhere; border:1px solid var(--line); background:var(--bg-soft); font-size:.78rem; }
.app-footer { border-top:1px solid var(--line); margin-top:2.5rem; padding:1.5rem 0; color:var(--muted); font-size:.82rem; }
.app-footer a { color:var(--ink-soft); }
.alert svg { fill:none; stroke:currentColor; stroke-width:2; flex:none; }

@media (max-width:760px) {
  .app-header-row { display:grid !important; grid-template-columns:1fr auto; padding-top:.65rem; padding-bottom:.65rem; }
  .app-header-row .cycle-chip { grid-column:1 / -1; grid-row:2; max-width:none; margin:0; border-radius:4px; }
  .app-intro { grid-template-columns:1fr; gap:1rem; }
  .batch-summary { grid-template-columns:repeat(2,1fr); }
  .batch-summary > div:nth-child(2) { border-right:0; }
  .batch-summary > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .section-heading-row, .response-file { align-items:stretch; flex-direction:column; }
  .response-file .btn { width:100%; }
  .continuity-grid { grid-template-columns:1fr; }
  .continuity-heading { align-items:stretch; flex-direction:column; }
  .continuity-badge { align-self:flex-start; }
  .recovery-package-head { flex-direction:column; }
  .recovery-package-head > code { max-width:100%; }
  .payment-handoff { align-items:stretch; flex-direction:column; }
  .payment-handoff-action { flex-basis:auto; }
}
@media (max-width:520px) {
  .app-main { padding-top:1.35rem; }
  .card-pad-lg { padding:1.2rem; }
  .app-page .btn { max-width:100%; white-space:normal; line-height:1.25; }
  .stepper { gap:.15rem; }
  .step-pill { padding:.35rem; }
  .step-pill .lbl { display:none; }
  .step-sep { min-width:2px; }
  .wizard-actions { flex-direction:column-reverse; }
  .wizard-actions .btn { width:100%; }
  .receipt dl { grid-template-columns:1fr; gap:.15rem; }
  .receipt dd { margin-bottom:.65rem; }
}