/* ===== Lupauksesta referenssiksi -ilme (lunniagents) · lisätään app.css:n perään ===== */
:root{
  --bg:#F5F6F1; --surface:#FFFFFF; --surface-2:#EEF1F6; --surface-3:#E3E5EF; --line:#E3E5EF;
  --ink:#171B3F; --ink-2:#3A4060; --muted:#5A6080;
  --accent:#FFC961; --accent-ink:#532A16; --accent-soft:#FFF1D1; --accent-line:#F2D48F; --accent-text:#8A5A00;
  --brand:#003342; --brand-ink:#FFFFFF; --brand-muted:#9FD8F5; --beak:#003342;
  --sea:#2E6BF0; --sea-ink:#16457A; --sea-soft:#E4F4FC; --sky:#54B9EA; --pink:#F472B6;
  --ok:#2E8B57; --ok-soft:#DDF2E6; --ok-ink:#1F6B43;
  --warn:#D08A0B; --warn-soft:#FFE6B5; --warn-ink:#532A16;
  --crit:#D64545; --crit-soft:#FCEBEB; --crit-ink:#791F1F;
  --seq1:#E4F4FC; --seq2:#B5D4F4; --seq3:#85B7EB; --seq4:#378ADD; --seq5:#185FA5;
  --shadow:0 20px 50px -30px rgba(0,51,66,.35);
  --r:16px;
  --font-ui:"Work Sans","Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:"Bricolage Grotesque","Work Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-hand:"Caveat","Segoe Print","Bradley Hand",cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C141B; --surface:#16212B; --surface-2:#1E2B36; --surface-3:#26323D; --line:#26323D;
    --ink:#EEF3F8; --ink-2:#C3CCD8; --muted:#9AA6B6;
    --accent-soft:#3F4227; --accent-line:#8A7A3A; --accent-text:#FFC961;
    --brand:#002432; --brand-muted:#9FD8F5;
    --sea:#54B9EA; --sea-ink:#CFE3EE; --sea-soft:#163247;
    --ok-soft:#1D3A2A; --ok-ink:#8AD5A8; --warn-soft:#3B3117; --warn-ink:#F0C46C; --crit-soft:#3F2320; --crit-ink:#F0A198;
    --seq1:#163247; --seq2:#1E4A6B; --seq3:#2A6A94; --seq4:#378ADD; --seq5:#85B7EB;
    --shadow:0 20px 50px -30px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0C141B; --surface:#16212B; --surface-2:#1E2B36; --surface-3:#26323D; --line:#26323D;
  --ink:#EEF3F8; --ink-2:#C3CCD8; --muted:#9AA6B6;
  --accent-soft:#3F4227; --accent-line:#8A7A3A; --accent-text:#FFC961;
  --brand:#002432; --brand-muted:#9FD8F5;
  --sea:#54B9EA; --sea-ink:#CFE3EE; --sea-soft:#163247;
  --ok-soft:#1D3A2A; --ok-ink:#8AD5A8; --warn-soft:#3B3117; --warn-ink:#F0C46C; --crit-soft:#3F2320; --crit-ink:#F0A198;
  --seq1:#163247; --seq2:#1E4A6B; --seq3:#2A6A94; --seq4:#378ADD; --seq5:#85B7EB;
  --shadow:0 20px 50px -30px rgba(0,0,0,.6);
}

/* Kuori */
body{font-size:15px}
.topbar{border-bottom:0}
.brand b{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.brand b span{color:var(--sky)}
.topbar .brand .sub{color:var(--brand-muted);font-weight:500}
.topbar .brand .sub::before{color:rgba(255,255,255,.35)}
.topbar .pill.ghost{border-color:rgba(255,255,255,.28)}
.topbar .btn{border-radius:999px}
.topbar .lauta-link{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13.5px;text-decoration:none;white-space:nowrap}
.topbar .lauta-link:hover{filter:brightness(.96)}
.rail{background:transparent;border-right:1px solid var(--line)}
.group-label{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nav a{border-radius:999px;padding:8px 12px;font-weight:600}
.nav a:hover{background:var(--surface-2)}
.nav a.active{background:var(--brand);color:#fff}
.nav a.active .num{color:var(--accent)}
.nav .num{font-family:var(--font-ui);font-weight:700;font-size:12px}
.nav .dot{background:var(--sky)}
.nav a.lauta{color:var(--accent-text)}
.nav a.lauta .dot{background:var(--accent)}

/* Typografia */
.eyebrow{font-family:var(--font-ui);font-weight:700;font-size:11.5px;letter-spacing:.08em}
.title{font-weight:800;letter-spacing:-.02em;line-height:1.04}
.section-title{font-weight:800;letter-spacing:-.01em}
.lede{font-size:15.5px;line-height:1.5}
.hand{font-family:var(--font-hand);font-weight:700}
.mono{font-family:var(--font-ui);font-weight:600;font-size:12.5px;font-variant-numeric:tabular-nums}
.stat .value,.hero-num,.kpi b{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.doc h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}
.doc .q{font-family:var(--font-hand);font-weight:700;font-size:1.35em;line-height:1.1;color:var(--brand)}

/* Kortit ja laatikot */
.card{border-radius:18px;padding:18px 20px}
.card.accent{background:var(--surface);border-color:var(--accent-line);box-shadow:inset 0 3px 0 var(--accent)}
.stat{border-radius:16px}
.flow .step{border-radius:16px}
.stages{border-radius:16px}
.stages .st .k{font-family:var(--font-ui);font-weight:700;letter-spacing:.06em}
.col{border-radius:16px;background:var(--surface-2)}
.tk{border-radius:12px}
.tk.hot{box-shadow:inset 3px 0 0 var(--accent)}
.box{border-radius:14px}
.callout{border-radius:14px}
.panel .card{border-radius:16px}

/* Napit, pillit, sirut, kentät */
.btn{border-radius:999px;padding:9px 16px;font-weight:600}
.btn.sm{padding:6px 12px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.btn.primary:hover{filter:brightness(.96)}
.pill{font-weight:600}
.pill.sea{background:var(--sea-soft);color:var(--sea-ink)}
.chip{border-radius:999px;font-weight:500}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.chip.on::before{content:""}
.input{border-radius:12px;padding:10px 12px}
.input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(84,185,234,.25)}
.seg label:has(input:checked){background:var(--brand);color:#fff}
.sw[aria-checked="true"]{background:var(--ok)}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:999px}

/* Ilmoitukset ja odotus */
.toast{border-radius:12px;background:var(--brand);color:#fff;font-weight:600}
.busy .card{border-radius:18px}
.busy .card b{font-weight:800}
.busy .card .spin{border-color:var(--accent-soft);border-top-color:var(--accent)}

/* Kirjautuminen */
.login{background:var(--bg)}
.login .card{border-radius:22px;padding:26px 28px}
.login .brand b{color:var(--brand)}
.login .brand .sub{color:var(--muted)}
.login .hint{min-height:18px}