/* ============================================================
   Tunnuspalvelu 2.0 — yksi tyylijärjestelmä koko tuotteelle.
   Jatkaa 1.0:n brändiä (Outfit + Cormorant Garamond, kerma,
   metsänvihreä) ja korvaa erilliset style.css / admin.css.
   ============================================================ */

/* ── Fontit — itse isännöity, sama origin kuin sovellus ──────
   Ei ulkoista @import-riviä: CSP:n font-src 'self' ja style-src
   eivät salli ulkopuolisia fonttioriginija, katso docs/architecture.md.
   Molemmat osajoukot (latin + latin-ext) ladataan, koska suomi
   tarvitsee ä/ö -merkistön kattavasti. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/outfit-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/static/fonts/outfit-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/cormorant-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/cormorant-garamond-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/cormorant-garamond-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Typografia */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', Garamond, Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Tyyppiasteikko */
  --t-micro: 0.75rem;    /* 12 — taulukon yläotsikot, vihjeet */
  --t-small: 0.8125rem;  /* 13 — metatiedot */
  --t-body: 0.9375rem;   /* 15 — leipäteksti, lomakkeet */
  --t-lead: 1.0625rem;   /* 17 — ingressi */
  --t-h3: 1.125rem;      /* 18 */
  --t-h2: 1.5rem;        /* 24 */
  --t-h1: 2.125rem;      /* 34 */
  --t-display: 2.75rem;  /* 44 — vain kirjautumiskortti */

  /* Pinnat — lämmin neutraaliramppi, sävytetty samaan suuntaan kuin aksentti */
  --ground: #F7F4EF;
  --surface: #FFFDF8;
  --sunken: #EFEAE1;
  --rail: #23200E;

  /* Teksti */
  --ink: #1A1714;
  --ink-2: #4E4842;
  --ink-3: #6B6560;
  --on-dark: #F2EFE8;
  --on-dark-dim: rgba(242, 239, 232, 0.62);

  /* Rajat */
  --line: rgba(26, 23, 20, 0.12);
  --line-strong: rgba(26, 23, 20, 0.22);

  /* Aksentti */
  --primary: #2D5016;
  --primary-deep: #213D10;
  --primary-dim: #E8F0E0;

  /* Semanttiset tilat — erillään aksentista, jaettu koko tuotteelle */
  --danger: #B84A25;
  --danger-ink: #7A2F17;
  --danger-bg: #FFF1EA;
  --warn: #C8922A;
  --warn-ink: #7A5A10;
  --warn-bg: #FFF8E8;
  --info: #2A4D8F;
  --info-bg: #E9F0FA;
  --ok: #2D5016;
  --ok-bg: #E8F0E0;

  /* Mitat */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --control-h: 2.5rem;
  --focus: 0 0 0 3px rgba(45, 80, 22, 0.28);
  --shadow-card: 0 1px 2px rgba(26, 23, 20, 0.04);
  --shadow-pop: 0 18px 44px rgba(26, 23, 20, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body, .dcbody {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-deep); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
code, .mono { font-family: var(--font-mono); font-size: 0.875em; }
.num { font-variant-numeric: tabular-nums; }

/* ── Typografia ───────────────────────────────────────────── */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2, .h2 { font-size: var(--t-h2); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; }
.lead { font-size: var(--t-lead); color: var(--ink-2); line-height: 1.5; }
.muted { color: var(--ink-3); }
.text-danger { color: var(--danger-ink); }
.small { font-size: var(--t-small); }
.eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stack { display: flex; flex-direction: column; }
.stack-4 { gap: 0.25rem; } .stack-8 { gap: 0.5rem; } .stack-12 { gap: 0.75rem; }
.stack-16 { gap: 1rem; } .stack-24 { gap: 1.5rem; } .stack-32 { gap: 2rem; }
.row { display: flex; align-items: center; gap: 0.75rem; }
.row-16 { gap: 1rem; } .row-24 { gap: 1.5rem; }
.row-wrap { flex-wrap: wrap; }
.push { margin-left: auto; }
.grow { flex: 1 1 auto; min-width: 0; }
/* Visually hidden but still reachable by assistive tech — for a <label>
   that would otherwise duplicate visible text (e.g. next to an inline
   rename field whose current value is already shown). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Sovelluskehys: pysyvä sivukisko + sisältöpalsta ───────── */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: var(--rail);
  color: var(--on-dark);
  padding: 1.25rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.rail-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--on-dark);
  padding: 0 0.5rem;
}
.rail-brand em { color: #A9C98C; font-style: italic; }
/* Kontekstivalitsin: kertoo aina missä tenantissa ollaan — 1.0:ssa tätä ei ollut */
.rail-context {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  padding: 0.625rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.rail-context .eyebrow { color: var(--on-dark-dim); }
.rail-context strong { font-size: var(--t-body); font-weight: 500; }
.rail-context .small { color: var(--on-dark-dim); }
.rail-group { display: flex; flex-direction: column; gap: 0.125rem; }
.rail-group > .eyebrow { color: var(--on-dark-dim); padding: 0 0.5rem 0.375rem; }
.rail a {
  color: var(--on-dark-dim);
  font-size: var(--t-body);
  padding: 0.4375rem 0.5rem;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.rail a:hover { color: var(--on-dark); background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.rail a[aria-current="page"] { color: var(--on-dark); background: rgba(255, 255, 255, 0.14); font-weight: 500; }
.rail a svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; }
.rail-foot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 0.875rem; }
/* Uloskirjautuminen on lomake, ei linkki — tilaa muuttava toiminto ei kulje GET:llä.
   Näyttää kiskon linkiltä, jotta rakenne ei näy käyttäjälle. */
.rail-logout {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 0;
  padding: 0.4375rem 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--on-dark-dim);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
}
.rail-logout:hover { color: var(--on-dark); background: rgba(255, 255, 255, 0.08); }
.rail-logout svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; }

.content { padding: 1.75rem 2.25rem 3rem; min-width: 0; }
.content-narrow { max-width: 760px; }

/* Sivun otsikkorivi: identiteetti + tila + toiminnot samassa paikassa joka sivulla */
.page-head { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem; }
.page-head .h1 { font-size: var(--t-h2); font-family: var(--font-sans); font-weight: 500; }
.page-head-actions { margin-left: auto; display: flex; gap: 0.5rem; flex: none; }
.crumb { font-size: var(--t-small); color: var(--ink-3); margin-bottom: 0.375rem; display: block; }

/* ── Ilmoitukset: pysyvä paikka jokaisella sivulla ─────────── */
.notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  font-size: var(--t-body);
}
.notice-ok { background: var(--ok-bg); border-color: rgba(45, 80, 22, 0.3); color: var(--primary-deep); }
.notice-error { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-ink); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
.notice-info { background: var(--info-bg); border-color: rgba(42, 77, 143, 0.35); color: var(--info); }
.notice strong { display: block; font-weight: 600; }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.notice-actions { margin-left: auto; display: flex; gap: 0.5rem; flex: none; }

/* ── Kortit ───────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.card-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.card-head p { font-size: var(--t-small); color: var(--ink-3); margin-top: 0.125rem; }
/* Small round profile picture in a card-head, e.g. account/index.html */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.card-body { padding: 1.25rem; }
.card-foot {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--line);
  background: rgba(239, 234, 225, 0.5);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* Tilaraita: kortti poikkeustilassa tunnistuu ilman lukemista */
.card-danger { border-left: 3px solid var(--danger); }
.card-danger .card-head { color: var(--danger-ink); }
.card-warn { border-left: 3px solid var(--warn); }

/* ── Lomakkeet ────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 0.3125rem; }
.field > label { font-size: var(--t-small); font-weight: 500; color: var(--ink-2); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: #9C958D; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
textarea { font-family: var(--font-mono); min-height: 88px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.hint { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.45; }
/* Kenttäkohtainen virhe — 1.0:ssa validointivirhe ei koskaan päätynyt kentän viereen */
.field-error { display: flex; gap: 0.375rem; align-items: center; font-size: var(--t-small); color: var(--danger-ink); font-weight: 500; }
.field-error svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.has-error input:focus { box-shadow: 0 0 0 3px rgba(184, 74, 37, 0.22); }
.check { display: flex; gap: 0.625rem; align-items: flex-start; }
.check input { width: 1rem; height: 1rem; min-height: 0; margin-top: 0.2rem; accent-color: var(--primary); }
.check label { font-size: var(--t-body); font-weight: 400; color: var(--ink); }

/* ── Painikkeet ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--control-h);
  padding: 0 1.125rem;
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 500;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: var(--primary);
  color: #F7F4EF;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--primary-deep); color: #F7F4EF; text-decoration: none; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
/* Monivärinen tuotemerkki (Google) piirretään täytöllä, ei viivalla */
.btn svg.brandmark { stroke: none; }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { background: var(--sunken); border-color: var(--ink-3); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: var(--primary-dim); color: var(--primary-deep); }
.btn-danger { background: var(--surface); border-color: var(--danger); color: var(--danger-ink); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger-ink); }
.btn-sm { min-height: 2rem; padding: 0 0.75rem; font-size: var(--t-small); }
.btn-block { width: 100%; }
.btn:disabled { background: var(--sunken); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }

/* ── Merkinnät ────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: var(--t-micro);
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-plain::before { display: none; }
.badge-ok { background: var(--ok-bg); color: var(--primary); border-color: rgba(45, 80, 22, 0.25); }
.badge-danger { background: var(--danger-bg); color: var(--danger-ink); border-color: rgba(184, 74, 37, 0.3); }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: rgba(200, 146, 42, 0.35); }
.badge-info { background: var(--info-bg); color: var(--info); border-color: rgba(42, 77, 143, 0.28); }
.badge-muted { background: var(--sunken); color: var(--ink-3); border-color: var(--line); }

/* ── Suodatinpalkki ───────────────────────────────────────── */
.filters {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: 0;
}
.filters .field { flex: 1 1 200px; }
.filters .field-narrow { flex: 0 1 180px; }
.filter-summary { font-size: var(--t-small); color: var(--ink-3); }

/* ── Taulukot ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.filters + .table-wrap { border-radius: 0 0 var(--r-lg) var(--r-lg); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6875rem 1rem; text-align: left; vertical-align: middle; }
th {
  position: sticky;
  top: 0;
  background: var(--sunken);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
td { border-top: 1px solid var(--line); font-size: var(--t-body); }
tbody tr:hover { background: rgba(239, 234, 225, 0.45); }
td.right, th.right { text-align: right; }
.cell-primary { font-weight: 500; }
.cell-meta { font-size: var(--t-small); color: var(--ink-3); }
.cell-actions { display: flex; gap: 0.375rem; justify-content: flex-end; }

/* Sivutus kertoo kokonaismäärän — 1.0 näytti vain "Page N" */
.pager {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-3);
}

/* ── Tyhjä tila ───────────────────────────────────────────── */
.empty { padding: 3rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.empty svg { width: 28px; height: 28px; stroke: var(--ink-3); fill: none; stroke-width: 1.4; }
.empty h3 { font-weight: 500; }
.empty p { font-size: var(--t-body); color: var(--ink-3); max-width: 42ch; }

/* ── Avainluvut ───────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.125rem; }
.stat .value { font-family: var(--font-display); font-size: 2rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .label { font-size: var(--t-small); color: var(--ink-3); margin-top: 0.25rem; }
.stat .delta { font-size: var(--t-micro); color: var(--ink-3); margin-top: 0.375rem; }

/* ── Kertanäyttöinen salaisuus ────────────────────────────── */
.secret {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--sunken);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 0.75rem 0.875rem;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  word-break: break-all;
}
.secret .btn { flex: none; }

/* ── Määrittelylista ──────────────────────────────────────── */
.defs { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr); gap: 0.625rem 1.25rem; }
.defs dt { font-size: var(--t-small); color: var(--ink-3); }
.defs dd { font-size: var(--t-body); }

/* ── Aikajana (toimitukset, audit-detalji) ────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0.875rem; padding-bottom: 1rem; }
.timeline-dot { width: 9px; height: 9px; border-radius: 50%; margin: 0.4rem auto 0; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.timeline-dot.is-fail { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.timeline-item:not(:last-child) { border-left: 1px solid var(--line); margin-left: 9px; padding-left: 0; }
.timeline-item:not(:last-child) > .timeline-dot { margin-left: -5px; }

/* ── Kirjautumiskortti ────────────────────────────────────── */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 252, 246, 0.95), rgba(247, 244, 239, 0.72) 44%, rgba(238, 231, 220, 0.92) 100%);
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: rgba(255, 254, 250, 0.96);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 22px 54px rgba(26, 23, 20, 0.12);
  padding: 2.25rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.auth-card.is-wide { max-width: 560px; }
.auth-brand { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
.auth-brand em { color: var(--primary); font-style: italic; }
.auth-card h1 { font-size: var(--t-display); }
.auth-card .lead { font-size: var(--t-lead); color: var(--ink-2); }
.auth-card form { display: flex; flex-direction: column; gap: 1rem; }
.auth-card .btn { min-height: 3rem; font-size: 1rem; }
.auth-alt { display: flex; align-items: center; gap: 0.875rem; font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.auth-alt::after { content: ''; flex: 1; border-bottom: 1px solid var(--line); }
.auth-foot { text-align: center; font-size: var(--t-small); color: var(--ink-3); }
.otp { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: 0.45em; text-align: center; min-height: 3.25rem; }
.brand-logo { display: block; max-width: 180px; max-height: 56px; margin: 0 0 1.25rem; object-fit: contain; }
/* Honeypot: visually and semantically hidden from real users, still present
   in the DOM (and thus filled in by bots that don't render CSS/JS) so
   request_post can reject on a non-empty value. */
.field-website { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }
/* JS-populated error box (passkey.js) — collapses to nothing when empty so
   an unused login page doesn't show a stray blank box. */
#passkey-error:empty { display: none; }

/* ── Sivuttainen tietolista mobiilikorttina ───────────────── */
.item-list { display: flex; flex-direction: column; gap: 0.75rem; }
.item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.875rem 1rem;
}
.item.is-current { border-color: rgba(45, 80, 22, 0.4); background: var(--ok-bg); }
.item-main { min-width: 0; display: flex; flex-direction: column; gap: 0.1875rem; }
.item-actions { margin-left: auto; flex: none; }

/* ── Dialogi ──────────────────────────────────────────────── */
.dialog {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(26, 23, 20, 0.45);
}
.dialog-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.dialog-foot { padding: 0.875rem 1.25rem; background: var(--sunken); display: flex; gap: 0.625rem; justify-content: flex-end; }

/* ── QR ───────────────────────────────────────────────────── */
.qr { width: 168px; height: 168px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 10px; flex: none; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.5rem; font-family: var(--font-mono); font-size: var(--t-body); }
.codes span { padding: 0.3125rem 0.5rem; background: var(--sunken); border-radius: var(--r-sm); text-align: center; letter-spacing: 0.06em; }

/* ── Kapea näyttö: taulukot korteiksi ─────────────────────── */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; overflow-x: auto; }
  .rail-group, .rail-context, .rail-foot { display: none; }
  .content { padding: 1.25rem 1rem 2.5rem; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .page-head { flex-direction: column; gap: 0.75rem; }
  .page-head-actions { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}