/* Hallinnan uudet osat DESIGN.md:n mukaan: käyttöönotto ja sen lomakkeet.
   Värit ja typografia ovat samat kuin etusivulla: paperi, muste, yksi
   toimintoväri ja yksi punainen merkiksi siitä, että jokin vaatii toimen.
   Vanhat hallinnan tyylit ovat index.html:n <style>-lohkossa. */
body.admin-mode {
  --hb-paper: #f8f7f3;
  --hb-surface: #ffffff;
  --hb-ink: #172f43;
  --hb-muted: #586774;
  --hb-line: #d9deda;
  --hb-accent: #234bc1;
  --hb-accent-soft: #e8edf9;
  --hb-attention: #b4432f;
  /* Tuhoavan painikkeen hillitty reuna ja hover-pohja huomioväristä. */
  --hb-attention-line: #ddaaa1;
  --hb-attention-soft: #fbf4f3;
  --hb-bar: #c9d2da;

  /* theme.css:n yhteiset muuttujat hallinnan väreihin, jotta vanhat
     näkymät eivät tuo omaa harmaata, indigoa tai punaista. */
  --ink: var(--hb-ink);
  --ink-app: var(--hb-ink);
  --text-muted: var(--hb-muted);
  --text-muted-2: var(--hb-muted);
  --text-faint: var(--hb-muted);
  --app-accent: var(--hb-accent);
  --app-accent-bright: var(--hb-accent);
  --app-link: var(--hb-accent);
  --app-btn-from: var(--hb-accent);
  --app-btn-to: var(--hb-accent);
  --link: var(--hb-accent);
  --indigo-500: var(--hb-accent);
  --border: var(--hb-line);
  --border-soft: var(--hb-line);
  --border-app: var(--hb-line);
  --bg-page: var(--hb-paper);
  --surface-raised: var(--hb-surface);
  --surface-interactive-hover: var(--hb-paper);
  --surface-selected: var(--hb-accent-soft);
  --info-ink: var(--hb-ink);
  --danger: var(--hb-attention);
}

/* Lomake-elementit eivät peri fonttia eivätkä väriä selaimen oletuksena
   (DESIGN.md: Manrope kaikkialla). :where() pitää tarkkuuden nollassa, jotta
   luokkien omat fontti- ja värisäännöt voittavat. */
:where(body.admin-mode) :where(button, input, select, textarea) { font-family: inherit; color: inherit; }
:where(body.admin-mode) hr { color: var(--hb-line); }

/* hidden-attribuutti voittaa luokan display-arvon (esim. .admin-kpis on
   flex), jotta näkymä voi piilottaa osion pelkällä attribuutilla. */
body.admin-mode [hidden] { display: none !important; }

/* Painikkeet (DESIGN.md, Hallinta): yksi järjestelmä kolmella
   variantilla. Ensisijainen on tasavärinen, toissijainen valkoinen sinisellä
   reunalla ja tuhoava hillitysti punainen. Jokaisella painikkeella on
   variantti; pelkkä .admin-button piirtyisi reunattomana tekstinä.
   Kulma 6 px, ja alle 760 px:n näytöllä kosketuskorkeus on 44 px. */
.admin-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px;
  font: 600 14px/1.2 'Manrope', sans-serif; text-decoration: none; text-align: center;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.admin-button:disabled { opacity: .55; cursor: not-allowed; }
.admin-button-primary { color: #fff; background: var(--hb-accent); border-color: var(--hb-accent); }
.admin-button-primary:hover:not(:disabled) { background: #193b9f; border-color: #193b9f; }
.admin-button-outline { color: var(--hb-accent); background: var(--hb-surface); border-color: var(--hb-accent); }
.admin-button-outline:hover:not(:disabled) { background: var(--hb-accent-soft); }
.admin-button-danger { color: var(--hb-attention); background: var(--hb-surface); border-color: var(--hb-attention-line); }
.admin-button-danger:hover:not(:disabled) { border-color: var(--hb-attention); background: var(--hb-attention-soft); }
.admin-button-small { min-height: 34px; padding: 0 14px; font-size: 13px; }
.hb-linkbtn { background: none; border: 0; padding: 0; min-height: 44px; font: 600 14px 'Manrope', sans-serif; color: var(--hb-accent); cursor: pointer; }
.hb-field { display: block; margin: 0 0 18px; }
.hb-label { display: block; font-size: 13px; font-weight: 600; color: var(--hb-ink); margin: 0 0 6px; }
.hb-input {
  display: block; width: 100%; box-sizing: border-box; font: 16px/1.4 'Manrope', sans-serif;
  padding: 12px 14px; border: 1px solid #b9c2c9; border-radius: 6px; background: #fff; color: var(--hb-ink);
}
.hb-hint { display: block; font-size: 13px; color: var(--hb-muted); margin: 6px 0 0; line-height: 1.5; }
.hb-inline { display: flex; gap: 10px; flex-wrap: wrap; }
.hb-inline .hb-input { flex: 1 1 220px; }

/* Aloitus: yksi kysymys */
.hb-start-page { padding-top: 48px; padding-bottom: 64px; }
.hb-start { max-width: 560px; }
.hb-start-title { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: var(--hb-ink); margin: 0 0 10px; }
.hb-start-lede { color: var(--hb-muted); margin: 0 0 28px; font-size: 15px; line-height: 1.6; }
.hb-start-actions { margin-top: 8px; }
.hb-start-error { color: var(--hb-attention); min-height: 1.5em; }
.hb-start-fine { font-size: 13px; color: var(--hb-muted); margin: 8px 0 0; line-height: 1.6; }

/* Käyttöönottopaneeli */
.hb-onboarding { margin: 0 0 32px; color: var(--hb-ink); }
.hb-rail { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--hb-line); }
.hb-rail li { position: relative; padding: 12px 16px 0 0; font-size: 13px; font-weight: 600; color: var(--hb-muted); }
.hb-rail li::before { content: ''; position: absolute; top: -1px; left: 0; right: 16px; height: 3px; background: transparent; }
.hb-rail li.done { color: var(--hb-ink); }
.hb-rail li.done::before { background: var(--hb-ink); }
.hb-rail li.now { color: var(--hb-accent); }
.hb-rail li.now::before { background: var(--hb-accent); }
.hb-rail li span { display: block; font-size: 12px; font-weight: 500; color: var(--hb-muted); }
.hb-state h2 { font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; max-width: 32ch; color: var(--hb-ink); }
.hb-state p { color: var(--hb-muted); margin: 0 0 24px; max-width: 62ch; line-height: 1.6; }
.hb-state a { color: var(--hb-accent); font-weight: 600; }

.hb-split { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.hb-count span { display: block; font-size: 64px; line-height: 1; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hb-count small { font-size: 14px; font-weight: 600; color: var(--hb-muted); }
.hb-reading { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hb-line); }
.hb-reading li { padding: 10px 0; border-bottom: 1px solid var(--hb-line); font-size: 14px; }
.hb-reading li.fresh { color: var(--hb-accent); }

.hb-try { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.hb-aside { font-size: 14px; color: var(--hb-muted); line-height: 1.6; }
.hb-aside p { margin: 0 0 14px; }
.hb-aside b { color: var(--hb-ink); }
.hb-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px 0; background: var(--hb-surface); border-top: 1px solid var(--hb-line); }
.hb-chip { font: 600 13px 'Manrope', sans-serif; border: 1px solid var(--hb-line); border-radius: 6px; padding: 8px 10px; background: #fff; color: var(--hb-ink); cursor: pointer; min-height: 36px; }
.hb-chip:hover { border-color: var(--hb-accent); color: var(--hb-accent); }

.hb-steps { list-style: none; counter-reset: s; margin: 0 0 20px; padding: 0; max-width: 62ch; }
.hb-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--hb-line); line-height: 1.55; }
.hb-steps li::before { content: counter(s) '.'; font-weight: 700; }
.hb-code { background: var(--hb-ink); color: #e8edf2; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 16px 18px; border-radius: 10px; margin: 0 0 14px; white-space: pre-wrap; word-break: break-all; }
.hb-help { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hb-line); max-width: 620px; }
.hb-help h3 { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.hb-help > .hb-hint { margin: 0 0 14px; }

.hb-today { display: flex; flex-wrap: wrap; gap: 16px 48px; margin: 0 0 20px; padding-top: 18px; border-top: 1px solid var(--hb-line); }
.hb-today dt { font-size: 13px; color: var(--hb-muted); }
.hb-today dd { margin: 0; font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }

.hb-first { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.hb-first img { width: 120px; height: auto; }
.hb-quote { border-left: 3px solid var(--hb-ink); margin: 0 0 20px; padding: 4px 0 4px 18px; max-width: 64ch; }
.hb-quote p { margin: 0 0 8px; color: var(--hb-ink); }

@media (max-width: 760px) {
  .hb-rail { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .hb-split, .hb-try { grid-template-columns: 1fr; gap: 20px; }
  .hb-first { grid-template-columns: 1fr; }
  .hb-first img { display: none; }
  .hb-start-title { font-size: 22px; }
  .hb-start-page { padding-top: 24px; }
}

/* Yleiskatsaus muistiona (DESIGN.md, Botin yleiskatsaus) */
.hb-dash { max-width: 1080px; color: var(--hb-ink); }
.hb-memo-range { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 0 18px; }
.hb-memo-h { font-size: 13px; font-weight: 600; color: var(--hb-muted); margin: 0 0 14px; }
.hb-memo-range .hb-memo-h { margin: 0; }
.hb-seg { min-height: 36px; padding: 0 10px; border: 0; background: none; font: 600 13px 'Manrope', sans-serif; color: var(--hb-muted); cursor: pointer; }
.hb-seg.active { color: var(--hb-ink); }
.hb-verdict { display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--hb-line); }
.hb-big { font-size: 96px; line-height: .9; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--hb-ink); }
.hb-big small { font-size: 40px; letter-spacing: 0; margin-left: 4px; }
.hb-big-none { font-size: 40px; color: var(--hb-muted); }
.hb-say { font-size: 22px; line-height: 1.35; font-weight: 600; margin: 0 0 8px; max-width: 34ch; }
.hb-basis { font-size: 13px; color: var(--hb-muted); margin: 0; font-variant-numeric: tabular-nums; }
.hb-basis a { color: var(--hb-accent); font-weight: 600; text-decoration: none; }
.hb-memo-block { padding: 26px 0 30px; border-bottom: 1px solid var(--hb-line); }
.hb-memo-block:last-child { border-bottom: 0; }
.hb-todo { list-style: none; margin: 0; padding: 0; }
.hb-todo li { display: grid; grid-template-columns: 8px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hb-line); }
.hb-todo li:first-child { border-top: 0; padding-top: 0; }
.hb-todo p { margin: 0; font-size: 16px; }
.hb-todo p span { display: block; font-size: 13px; color: var(--hb-muted); }
.hb-mark { width: 8px; height: 8px; background: var(--hb-attention); }
.hb-mark.calm { background: var(--hb-bar); }
.hb-calm { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.hb-calm p { margin: 0; font-size: 18px; font-weight: 600; }
.hb-calm p span { display: block; font-size: 14px; font-weight: 500; color: var(--hb-muted); margin-top: 4px; }
.hb-calm img { width: 104px; height: auto; }
.hb-bars { display: flex; align-items: flex-end; gap: 4px; height: 72px; }
.hb-bars i { flex: 1; background: var(--hb-bar); position: relative; min-height: 2px; }
.hb-bars i.today { background: var(--hb-accent); }
.hb-bars i.flag::after { content: ''; position: absolute; top: -9px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; background: var(--hb-attention); }
.hb-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--hb-muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.hb-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; margin: 0; }
.hb-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hb-line); }
.hb-facts dt { font-size: 14px; color: var(--hb-muted); }
.hb-facts dd { margin: 0; font-size: 20px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.hb-facts dd small { font-size: 13px; font-weight: 500; color: var(--hb-muted); margin-left: 6px; }
.hb-memo-section { padding: 26px 0 30px; border-top: 1px solid var(--hb-line); }

@media (max-width: 760px) {
  .hb-verdict { grid-template-columns: 1fr; gap: 10px; }
  .hb-big { font-size: 64px; }
  .hb-big small { font-size: 28px; }
  .hb-say { font-size: 18px; }
  .hb-todo li { grid-template-columns: 8px 1fr; }
  .hb-todo li > :last-child { grid-column: 2; justify-self: start; }
  .hb-facts { grid-template-columns: 1fr; }
  .hb-calm img { display: none; }
}

.hb-explain { margin-top: 8px; font-size: 13px; color: var(--hb-muted); max-width: 70ch; }
.hb-explain summary { cursor: pointer; color: var(--hb-accent); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.hb-explain p { margin: 6px 0 0; line-height: 1.6; }

/* Maksukortti kokeilun aikana */
.hb-card-prompt { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: 16px 0 20px; margin: 0 0 24px; border-bottom: 1px solid var(--hb-line); }
.hb-card-prompt p { margin: 0; font-size: 16px; font-weight: 600; }
.hb-card-prompt p span { display: block; font-size: 13px; font-weight: 500; color: var(--hb-muted); margin-top: 2px; }
.hb-card-prompt a { color: var(--hb-accent); }
.hb-card-prompt .hb-hint { grid-column: 1 / -1; margin: 0; }
.hb-card-ok { margin: 0 0 24px; padding: 12px 0; font-weight: 600; border-bottom: 1px solid var(--hb-line); }
.hb-code-banner { border-left: 3px solid var(--hb-accent); padding: 6px 0 6px 14px; margin: 0 0 22px; font-weight: 600; font-size: 14px; }
.hb-start-fine a { color: var(--hb-accent); }
@media (max-width: 760px) { .hb-card-prompt { grid-template-columns: 1fr; } }

/* Widget-suppilon rivi: nimike, palkki ja luku. Kapealla puhelimella nimike
   ja luku eivät mahdu palkin viereen, joten rivi taittuu kahdelle riville
   eikä työnnä sivua vaakavieritykseen. */
.hb-funnel-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.hb-funnel-label { width: 112px; flex: none; }
.hb-funnel-bar { flex: 1; min-width: 60px; background: var(--hb-paper); border-radius: 4px; overflow: hidden; }
.hb-funnel-fill { height: 22px; background: var(--hb-accent); }
.hb-funnel-value { width: 150px; flex: none; text-align: right; font-weight: 700; }
.hb-funnel-rate { font-weight: 500; color: var(--hb-muted); }
.hb-funnel-delta { font-weight: 500; font-size: 13px; }


/* Tasojen valinta laskutuksessa: kaksi rinnakkaista korttia, puhelimella
   allekkain. Ero kerrotaan sanoilla, ei värillä. */
.hb-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.hb-tier { border: 1px solid var(--hb-line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.hb-tier-name { font-weight: 700; font-size: 15px; }
.hb-tier-price { font-weight: 600; font-size: 14px; color: var(--hb-muted); }
.hb-tier .admin-button { margin-top: auto; align-self: flex-start; }
@media (max-width: 640px) { .hb-tiers { grid-template-columns: 1fr; } }

/* Selkeä hintavalinta ennen Checkoutiin siirtymistä. */
.hb-plan-choice { border: 0; padding: 0; margin: 24px 0 16px; min-width: 0; }
.hb-plan-choice legend { font-weight: 600; margin-bottom: 12px; }
.hb-plan-option { display: flex; align-items: flex-start; gap: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--hb-line); border-radius: 10px; cursor: pointer; }
.hb-plan-option:has(input:checked) { border-color: var(--hb-accent); background: var(--surface-selected); }
.hb-plan-option input { flex: 0 0 auto; margin-top: 5px; accent-color: var(--hb-accent); }
.hb-plan-option small { display: block; margin-top: 6px; line-height: 1.6; color: var(--hb-muted); }
.hb-order-summary { font-size: 14px; line-height: 1.7; margin: 16px 0; }

/* Toimen vaativa rivi henkilökunnan yleiskuvassa: sama 8 px neliö kuin botin
   muistiossa (DESIGN.md, Värit). */
.hb-attention-dot { display: inline-block; width: 8px; height: 8px; background: var(--hb-attention); }

/* API-virheet näkymän omalla tilarivillä selaimen alert-ikkunan sijaan.
   Punainen on "vaatii toimen" -väri (DESIGN.md, Värit); flex-rivissä virhe
   rivittyy omalle rivilleen painikkeiden alle. */
.admin-error-status { flex-basis: 100%; margin: 10px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--hb-attention); font-size: 14px; line-height: 1.5; color: var(--hb-attention); }
.admin-error-status[hidden] { display: none; }
/* Näkymän latausvirhe: sama rivi, ja toistettava lataus saa painikkeen
   tekstin perään. */
.admin-load-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 760px; margin: 0 0 16px; padding: 8px 0 8px 12px; }

/* Kerran näytettävä REST API -avain: kopioitava kenttä, kunnes käyttäjä
   kuittaa tallentaneensa sen. */
.api-key-reveal { border: 1px solid var(--hb-line, #d9deda); border-radius: 10px; padding: 16px; margin: 0 0 16px; background: var(--hb-surface, #ffffff); }
.api-key-reveal-title { font-weight: 600; font-size: 15px; margin: 0 0 4px; }

/* Laskutuksen tila jäsenelle: yksi lause ilman toimintoja. */
.hb-billing-status { margin: 0; font-size: 16px; font-weight: 600; color: var(--hb-ink); }

/* Kosketuskorkeus puhelimessa (DESIGN.md, Hallinta): painikkeet, jakson
   valinta ja pikakysymykset vähintään 44 px. Tiedoston lopussa, jotta sääntö
   voittaa komponenttien omat työpöytäkorkeudet. */
@media (max-width: 760px) {
  .admin-button, .admin-button-small, .hb-seg, .hb-chip { min-height: 44px; }
}

/* Osiot ja listat jakoviivoin (DESIGN.md, Hallinta: "Osiot erotetaan
   jakoviivoilla, ei korttivarjoilla"). .admin-rows on lista-alkioiden pino
   (esim. eskalaatiot, opetusehdotukset), .admin-section-block yksittäinen osio. */
.admin-rows { border-bottom: 1px solid var(--hb-line); }
.admin-row, .admin-section-block { border-top: 1px solid var(--hb-line); padding: 24px 0; }
.admin-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.admin-textlink { font-size: 14px; font-weight: 600; color: var(--hb-accent); text-decoration: none; white-space: nowrap; }
.admin-textlink:hover { text-decoration: underline; }

/* Laskutus: tila ja tilauksen toiminnot omina osioinaan jakoviivan alla,
   tilan lause musteella ilman taustalaatikkoa. */
.hb-billing-block { border-top: 1px solid var(--hb-line); padding: 20px 0; max-width: 640px; }
.hb-billing-block:last-of-type { border-bottom: 1px solid var(--hb-line); }
.hb-billing-detail { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--hb-ink); }
.hb-billing-detail a { color: var(--hb-accent); }

/* Live-palvelu: saatavuus tavallisena rivinä, jono ja keskustelu
   rinnakkain työpöydällä ja allekkain puhelimessa. */
.live-availability { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: 760px; margin: 0 0 16px; }
.live-availability label { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; color: var(--hb-ink); }
.live-status { font-size: 14px; color: var(--hb-muted); }
.live-status.is-attention { color: var(--hb-attention); }
.live-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.live-thread { height: 360px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--hb-paper); }
.live-thread-empty { margin: auto; font-size: 14px; color: var(--hb-muted); }
#live-form .admin-input { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .live-grid { grid-template-columns: minmax(0, 1fr); }
  #live-form { flex-wrap: wrap; }
  #live-form .admin-input { flex: 1 0 100%; }
  .live-thread { height: 280px; }
}