/* ---- Design tokens: warm archival palette (Nexus adapted) ---- */
:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem;

  --color-bg:#f4efe4;
  --color-surface:#faf6ec;
  --color-surface-2:#fdfbf4;
  --color-surface-offset:#ece4d2;
  --color-border:#d8ccb2;
  --color-divider:#e3d9c4;
  --color-text:#2c2416;
  --color-text-muted:#7c7159;
  --color-text-faint:#b3a789;
  --color-text-inverse:#faf6ec;

  --color-primary:#0f5a5e;      /* archival teal */
  --color-primary-hover:#0b4448;
  --color-primary-highlight:#cfe0dd;
  --color-accent:#8a2f2f;       /* deep bordeaux */
  --color-accent-highlight:#e7d3cc;
  --color-warning:#9a5b18;
  --color-success:#4a6a24;
  --color-diverge-bg:#f6e3cf;
  --color-diverge-border:#d99a4e;

  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(60,45,20,.08);
  --shadow-md:0 4px 12px rgba(60,45,20,.12);
  --transition:180ms cubic-bezier(.16,1,.3,1);
  --font-display:"PT Serif", Georgia, serif;
  --font-body:"PT Sans", system-ui, sans-serif;
}
[data-theme="dark"] {
  --color-bg:#181510;
  --color-surface:#201c15;
  --color-surface-2:#26221a;
  --color-surface-offset:#2c2820;
  --color-border:#3c3527;
  --color-divider:#2c281f;
  --color-text:#e7ddc8;
  --color-text-muted:#a2977e;
  --color-text-faint:#6d6552;
  --color-text-inverse:#201c15;
  --color-primary:#57a8ab;
  --color-primary-hover:#78c0c2;
  --color-primary-highlight:#26383a;
  --color-accent:#cf7b6f;
  --color-accent-highlight:#3a2723;
  --color-warning:#c98a45;
  --color-success:#8bb257;
  --color-diverge-bg:#3a2f1d;
  --color-diverge-border:#a0742f;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);
  font-size:var(--text-base);color:var(--color-text);background:var(--color-bg)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;text-wrap:balance}
img,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
a,button,input,textarea,select,[role=button]{
  transition:color var(--transition),background var(--transition),
    border-color var(--transition),box-shadow var(--transition)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---- layout ---- */
.wrap{max-width:1200px;margin:0 auto;padding:var(--space-6) var(--space-4)}
header.topbar{position:sticky;top:0;z-index:20;background:var(--color-surface);
  border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
.topbar .row{max-width:1200px;margin:0 auto;display:flex;align-items:center;
  gap:var(--space-4);padding:var(--space-3) var(--space-4)}
.brand{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;
  color:var(--color-text)}
.brand .mark{color:var(--color-primary)}
nav.main{display:flex;gap:var(--space-4);margin-left:var(--space-4)}
nav.main a{color:var(--color-text-muted);font-size:var(--text-sm);white-space:nowrap}
nav.main a:hover{color:var(--color-primary);text-decoration:none}
.spacer{flex:1}
.nav-burger{display:none}
@media (max-width:640px){
  .topbar .row{flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-3)}
  .brand{font-size:var(--text-sm);white-space:nowrap}
  .spacer{flex:1}
  .nav-burger{display:grid;margin-left:auto}
  nav.main{display:none;flex-direction:column;gap:0;width:100%;
    margin-left:0;order:3;border-top:1px solid var(--color-border);padding:var(--space-1) 0}
  nav.main.open{display:flex}
  nav.main a{padding:var(--space-2) var(--space-1);border-bottom:1px solid var(--color-border);font-size:var(--text-base)}
  nav.main a:last-child{border-bottom:none}
  .user-chip{font-size:var(--text-xs)}
}
.icon-btn{width:2.25rem;height:2.25rem;display:grid;place-items:center;
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);color:var(--color-text)}
.icon-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}

h1.page{font-size:var(--text-xl);margin-bottom:var(--space-2)}
h2{font-size:var(--text-lg);margin:var(--space-6) 0 var(--space-3)}
.muted{color:var(--color-text-muted)}
.small{font-size:var(--text-sm)}
.xs{font-size:var(--text-xs)}

.card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);
  margin-bottom:var(--space-5)}

.btn{display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--color-primary);color:var(--color-text-inverse);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-sm);font-weight:600;border:1px solid transparent}
.btn:hover{background:var(--color-primary-hover);text-decoration:none}
.btn.secondary{background:var(--color-surface-2);color:var(--color-text);
  border-color:var(--color-border)}
.btn.secondary:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn.accent{background:var(--color-accent)}

input[type=text],input[type=url],textarea{width:100%;
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-3);color:var(--color-text)}
input:focus,textarea:focus{border-color:var(--color-primary)}

.notice{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);
  font-size:var(--text-sm);margin:var(--space-3) 0;border:1px solid transparent}
.notice.demo{background:var(--color-accent-highlight);color:var(--color-accent);
  border-color:var(--color-accent)}
.notice.error{background:var(--color-accent-highlight);color:var(--color-accent);
  border-color:var(--color-accent)}
.notice.info{background:var(--color-primary-highlight);color:var(--color-primary);
  border-color:var(--color-primary)}

.badge{display:inline-block;font-size:var(--text-xs);padding:.1rem .5rem;
  border-radius:var(--radius-full);background:var(--color-surface-offset);
  color:var(--color-text-muted);border:1px solid var(--color-border)}
.badge.state-done{background:var(--color-primary-highlight);color:var(--color-primary)}
.badge.state-error{background:var(--color-accent-highlight);color:var(--color-accent)}
.badge.state-transcribing,.badge.state-downloading{
  background:var(--color-diverge-bg);color:var(--color-warning)}

/* ---- data tables ---- */
.tbl{font-size:var(--text-sm);background:var(--color-surface)}
.tbl th,.tbl td{border:1px solid var(--color-border);padding:var(--space-2);
  text-align:left;vertical-align:top}
.tbl thead th{position:sticky;top:0;background:var(--color-surface-offset);
  z-index:2;font-weight:700}
.tbl tbody tr:nth-child(even){background:var(--color-surface-2)}

/* ---- compare view ---- */
.scan-card{margin-bottom:var(--space-8)}
.scan-head{display:flex;align-items:center;gap:var(--space-3);
  margin-bottom:var(--space-3)}
.scan-head h3{font-size:var(--text-lg)}
.scan-thumb{width:120px;border:1px solid var(--color-border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
.cmp{table-layout:fixed}
.cmp th,.cmp td{border:1px solid var(--color-border);padding:var(--space-2);
  font-size:var(--text-sm);vertical-align:top}
.cmp thead th{position:sticky;top:0;background:var(--color-surface-offset);z-index:2}
.cmp .fld-label{font-weight:600;color:var(--color-text-muted);width:150px}
.cmp td.variant{cursor:pointer}
.cmp td.variant:hover{background:var(--color-primary-highlight)}
.cmp td.diverge{background:var(--color-diverge-bg);
  border-left:3px solid var(--color-diverge-border)}
.cmp td.final{background:var(--color-surface-2)}
.cmp td.final [contenteditable]{min-height:1.4em;outline:none;display:block;
  border-bottom:1px dashed var(--color-border)}
.cmp td.final [contenteditable]:focus{border-bottom-color:var(--color-primary)}
.rec-sep td{background:var(--color-surface-offset);font-weight:600;
  color:var(--color-text-muted)}
.legend{display:flex;gap:var(--space-4);flex-wrap:wrap;margin:var(--space-3) 0;
  font-size:var(--text-xs);color:var(--color-text-muted)}
.legend .swatch{display:inline-block;width:1rem;height:1rem;border-radius:3px;
  vertical-align:-2px;margin-right:.3rem}
.swatch.diverge{background:var(--color-diverge-bg);
  border:1px solid var(--color-diverge-border)}

.household{border-left:3px solid var(--color-primary);padding-left:var(--space-3)}
.household .hh-title{margin:var(--space-3) 0 var(--space-2)}
.household .member-table{margin-bottom:var(--space-3)}
.search-result mark,.cmp mark{background:var(--color-diverge-bg);
  border-radius:2px;padding:0 2px}

.grid{display:grid;gap:var(--space-4)}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.job-row{display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) 0;border-bottom:1px solid var(--color-divider)}
.job-row .id{font-family:ui-monospace,monospace;color:var(--color-text-muted)}
.saved-tag{color:var(--color-success);font-size:var(--text-xs)}

/* ---- billing / tariffs ---- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-4);margin-top:var(--space-4)}
.tier .price{font-size:1.6rem;font-weight:700;margin:var(--space-2) 0}
.tier .features{list-style:none;padding:0;margin:var(--space-3) 0;
  font-size:var(--text-sm)}
.tier .features li{padding:.25rem 0;border-bottom:1px solid var(--color-border)}
.tier .features li:before{content:"✓ ";color:var(--color-primary)}
.tier-current{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}
.btn.ghost{background:transparent;color:var(--color-text);
  border:1px solid var(--color-border)}
.btn.ghost:hover{border-color:var(--color-primary);color:var(--color-primary);
  background:transparent}
.btn.xs{padding:.1rem .5rem;font-size:var(--text-xs)}
.user-chip{font-size:var(--text-sm);display:inline-flex;align-items:center;
  gap:.35rem;margin-right:var(--space-2)}
.inp{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface);
  color:var(--color-text)}