/* ============================================================
   VARAA — julkinen varaussivu
   Toteuttaa: output/varauskirja/DESIGNSUUNTA_maailmanluokka.md

   KAKSI SÄÄNTÖÄ JOISTA KAIKKI SEURAA

   1. BRÄNDIJAKO. Asiakas varaa hallilta, ei meiltä. Hallin nimi on sivun
      hallitseva elementti. Hallin korostusväri koskee yhtä asiaa: nimen
      edessä olevaa 3 px tunnusmerkkiä. Kaikki muu, myös varausnappi, on
      meidän järjestelmämme roolivärejä. Meidän nimemme on alatunnisteessa
      kerran, pienenä.

      PÄÄTÖS 6.8.2026 (Seppo, BRIEF_V2): CTA käytti aiemmin hallin väriä
      täyttönä. Kaksi kylläistä korostusta (teal + hallin oma väri)
      samalla sivulla kilpaili keskenään eikä kumpikaan johtanut - se oli
      Simon "AI slop" -havainnon ydin. Teal on jo kantava kolmessa
      paikassa (aika, fokus, linkit), joten se sai johtaa yksin. Napin
      täyttö on nyt sivun oma muste-vastaväri (ink-1/zone-0), sivun
      voimakkain neutraali pinta, ei uusi sävy.

   2. VÄRI VAIN KUN JOKIN VAATII TEON. Sama testi kuin henkilökunnan
      ruudukossa. Julkisella puolella värejä on kaksi:
        aksentti (teal)   = vapaa, valittu, fokus, ensisijainen teko.
                             "Tästä voi toimia."
        hälytys (punainen)= rikki tai estynyt. Tyypillisellä käynnillä 0.
      Huomiokeltaista EI ole tällä sivulla lainkaan. Niukkuus
      ("viimeinen vapaa") kerrotaan siksi tekstinä, ei värinä, jolloin se
      säilyy myös harmaasävynä ja värisokealla.

   TEEMA. TUMMA ON OLETUS 26.8.2026 ALKAEN (Simon toimeksianto: "aseta
   markai.fi/varaa.html oletukseksi night mode eikä päivämode"). Aiemmin
   oletus oli vaalea sillä perusteella että julkinen kävijä varaa
   päivänvalossa. Se peruste hävisi kun sivu sai hallin oman ilmeen: halli
   on mustavalohalli, hallin oma sivusto on tumma, ja kaksi peräkkäistä
   sivua joista toinen räjähtää valkoisena on huonompi kuin yksi hallin
   näköinen matka. Vaalea jää valittavaksi napista, ja valinta elää vain
   istunnon ajan: julkisella puolella ei ole evästeitä eikä localStoragea.

   PALETTI. Aiemmin sivu käytti omaa lämmintä paperi + teal -järjestelmää
   ja hallin väri koski vain 3 px tunnusta. 26.8.2026 Simo käänsi tämän:
   "korvaa värimaailma hohtokeilan brändätyllä värimaailmalla ... käytä
   kuitenkin sinisen sijaan pinkkiä joka on heidän logossaan." Tealista
   luovuttiin kokonaan, jolloin sivulla on jälleen tasan YKSI kylläinen
   korostus. Se oli koko 6.8.2026 päätöksen tavoite; nyt se saavutetaan
   toisin päin, ja siksi myös varausnappi saa taas värillisen täytön.
   Sävy 308 on mitattu hallin logosta, ks. hohtokeilan style.css.

   Kovat rajat: ei ulkoisia verkkopyyntöjä, ei backdrop-filter, vain
   transform- ja opacity-siirtymiä, kaikki kestot muuttujista.
   ============================================================ */

/* ---------------- 0. Kirjasin ----------------
   Sama Inter Variable kuin henkilökunnan puolella, itse isännöity.
   Allekirjoituksena Newsreader: designsuunnan varmistettu vaihtoehto
   Instrument Serifille, ja ainoa jonka ä/ö/å on todennettu tässä
   reposta avaamalla. Sitä käytetään VAIN hallin nimessä. */

@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/InterVar-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: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/InterVar-latinext.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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Newsreader-normal-400-12.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: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Newsreader-normal-400-11.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;
}

/* ---------------- 1. Roolit ----------------
   Sama roolimalli kuin varauskirja.css:ssä: komponentit eivät viittaa
   heksaan vaan rooliin. Ero on oletus: tässä juuritaso on VAALEA. */

:root {
  --va-zone-0: #FBFAF8;   /* canvas */
  --va-zone-1: #F4F2ED;   /* upotettu pinta, kenttien tausta */
  --va-zone-2: #EDEAE3;   /* syvin upotus */
  --va-panel:  #FFFFFF;   /* nostettu pinta: kortit. Ainoa puhdas valkoinen. */

  --va-ink-1: #1B1815;
  --va-ink-2: #5C554B;
  /* Tummennettu 5.8.2026: #8B8478 antoi paperitaustaa vasten vain 3.55, ja
     11 px teksti on WCAG:n mielessa normaalikokoista eli vaatii 4.5
     (1.4.3, taso AA). Uusi arvo antaa 5.16 ja on silti selvasti hillitympi
     kuin ink-2, joten hierarkia sailyy. Mitattu Lighthousella kun sivu
     auditoitiin ensimmaisen kerran julkisena. */
  --va-ink-3: #6F6A5F;
  --va-line-1: rgba(27,24,21,0.08);
  --va-line-2: rgba(27,24,21,0.17);

  /* Aksentti = "tästä voi toimia". TÄMÄ ON MEIDÄN NEUTRAALIMME, ei
     minkään yksittäisen hallin väri: halli joka ei ole määritellyt omaa
     palettiaan saa tämän. Hallin oma paletti tulee varaa.js:n
     HALLI.teema-objektista custom propertyinä tämän päälle. */
  --va-accent:      #12A594;
  /* Tummennettu 5.8.2026: #008573 antoi 4.07-4.1 vaaleiden pintojen
     (accent-soft, paper-2) paalla, vaadittu 4.5. */
  --va-accent-hi:   #006E61;
  --va-accent-soft: #E0F8F3;
  --va-accent-line: #83CDC1;
  /* Muste aksenttitäytön PÄÄLLÄ. Lisätty 26.8.2026: oli kovakoodattu
     #FFFFFF kahdessa kohdassa, ja se hajosi heti kun jokin halli valitsi
     vaalean täytön (valkoinen Hohtokeilan pinkin päällä 2.80:1). Nyt se
     on tokeni, ja jokainen paletti vastaa omasta musteestaan. */
  --va-accent-ink:  #FFFFFF;

  /* Varausnapin täyttö omana tokeninaan. Oletus on sivun muste-vastaväri
     eli täsmälleen se mitä nappi on ollut 6.8.2026 lähtien; halli joka
     antaa oman paletin voi vaihtaa sen brändivärikseen. Ilman tätä
     tokenia napin väri olisi joko lukittu meidän neutraaliimme tai
     sidottu aksenttiin, eikä kumpikaan kelpaa kaikille halleille. */
  --va-cta-bg:  var(--va-ink-1);
  --va-cta-ink: var(--va-zone-0);

  --va-alert:      #E5484D;
  --va-alert-hi:   #CE2C31;
  --va-alert-soft: #FFEFEF;

  --va-focus: #12A594;
  --va-shadow: 0 26px 60px -32px rgba(27,24,21,0.30);

  /* HALLIN IDENTITEETTI. varaa.js kirjoittaa nämä HALLI-objektista.
     Arvot tässä ovat vain se mitä näkyy ennen kuin JS ehtii ajaa: ne on
     tarkoituksella meidän neutraalimme eikä minkään yksittäisen hallin
     väri, jottei väärä brändi ehdi välähtää ruudulla. */
  --ha-accent:    #1B1815;
  --ha-on-accent: #FBFAF8;

  color-scheme: light;
}

/* TUMMA ON SIVUN OLETUS 26.8.2026 ALKAEN (data-theme varaa.html:ssä).
   Nämä arvot ovat MEIDÄN neutraali tummamme, eivät minkään hallin. Hallin
   oma pimeys tulee HALLI.teema.dark -objektista custom propertyinä. */
:root[data-theme="dark"] {
  --va-zone-0: #131211;
  --va-zone-1: #191714;
  --va-zone-2: #201D19;
  --va-panel:  #1E1C1A;

  /* Musteen tasot 2 ja 3 ovat samat nostetut arvot kuin henkilökunnan
     puolella: designsuunnan omat arvot jäivät APCA:lla alle Lc 60:n
     11-13 pikselin tekstissä. Mittaus on kirjattu varauskirja.css:ään. */
  --va-ink-1: #F2EFE9;
  --va-ink-2: #C6C0B6;
  --va-ink-3: #8E8880;
  --va-line-1: rgba(242,239,233,0.07);
  --va-line-2: rgba(242,239,233,0.17);

  --va-accent:      #12A594;
  --va-accent-hi:   #0BD8B6;
  --va-accent-soft: #0D3D38;
  --va-accent-line: #145750;
  --va-accent-ink:  #04211D;

  --va-alert:      #E5484D;
  --va-alert-hi:   #FF9592;
  --va-alert-soft: #3B1219;

  --va-focus: #12A594;
  --va-shadow: 0 26px 64px -30px rgba(0,0,0,0.82);

  --ha-accent:    #F2EFE9;
  --ha-on-accent: #131211;

  color-scheme: dark;
}

/* Mitat ja ajat. Yksikään komponentti ei määrittele omaa kestoaan. */
:root {
  --va-r:    10px;
  --va-r-lg: 16px;
  --va-tap:  44px;   /* pienin kosketusala, ei alitettavissa */

  --va-t-hover: 120ms;
  --va-t-state: 160ms;
  --va-t-panel: 200ms;
  --va-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------- 2. Runko ---------------- */

.va-page {
  margin: 0;
  font-family: 'InterVariable', system-ui, -apple-system, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--va-ink-1);
  background: var(--va-zone-0);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.va-page *, .va-page *::before, .va-page *::after { box-sizing: border-box; }
.va-page [hidden] { display: none !important; }
/* :where() nollaa selektorin oman spesifisyyden, jotta tämä reset ei
   voita mitään komponentin omaa yhden luokan väriä (löydetty 6.8.2026
   CTA-korjauksen yhteydessä: ilman tätä .va-cta, .va-danger, .va-icon,
   .va-ghost ja .va-stepbtn perivät hiljaa ink-1:n eikä koskaan omaa
   väriään, koska "button"-tyyppiselektori on niitä spesifisempi). */
.va-page :where(button) { font: inherit; color: inherit; }
/* ⚠ TÄMÄ NOLLAUSRIVI ON TARKKUUDELTAAN (0,1,1) JA VOITTAA YHDEN LUOKAN
   KOMPONENTTISÄÄNNÖT (mitattu 7.9.2026, jono #292). Toisin kuin rivin 223
   :where()-reset, tässä on tyyppiselektori mukana, joten `.va-note`in
   `margin-top: 8px` ja `.va-err`in `margin-top: 7px` (molemmat (0,1,0))
   eivät koskaan päde: jokaisen .va-note- ja .va-err-elementin laskettu
   marginTop on 0px kaikilla neljällä varaussivulla. Ainoa poikkeus on
   `.va-done-cancel .va-note` (0,2,0), jonka 6px näkyy.

   RIVIÄ EI MUUTETTU TAHALLAAN. :where()-muoto herättäisi ne marginaalit
   yhtenä yönä kaikilla sivuilla ja siirtäisi pystyrytmiä joka kentässä.
   Se on designerin päätös, ei toteuttajan. Kun yksittäinen komponentti
   tarvitsee marginaalin, se kirjoitetaan muodossa `.va-page p.<luokka>`
   (0,2,1), ks. `.va-note-yla`. */
.va-page h1, .va-page h2, .va-page p, .va-page dl, .va-page dd { margin: 0; }

/* Jokainen kellonaika, päivämäärä, henkilömäärä ja ratamäärä tasarivissä. */
.va-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.va-page :focus-visible {
  outline: 2px solid var(--va-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.va-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

.va-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.va-skip {
  position: absolute; left: 16px; top: -60px; z-index: 90;
  padding: 10px 14px; border-radius: var(--va-r);
  font-size: 14px; font-weight: 540; text-decoration: none;
  color: var(--va-ink-1); background: var(--va-panel);
  border: 1px solid var(--va-line-2);
  transition: transform var(--va-t-state) var(--va-ease);
}
.va-skip:focus { transform: translateY(72px); }

/* ---------------- 3. Hallin tunnus ----------------
   Hallin nimi on sivun suurin ja ensimmäinen asia. Kukaan ei saa olla
   epävarma kenelta varaa. Otsikko ei ole sticky: sticky pakottaisi nimen
   pieneksi, ja nimen koko on tämän sivun tärkein brändipäätös. */

.va-top { padding: 18px 0 14px; }
.va-top-in { display: flex; align-items: flex-start; gap: 16px; }

.va-brand { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; }

/* ---------------- Hallin logo (26.8.2026) ----------------
   Korkeus on kiinteä ja leveys vapaa, jotta sama sääntö kelpaa myös
   toisen hallin eri muotoiselle logolle: badge, vaakalukitus tai neliö
   asettuvat kaikki samaan riviin ilman erillistä arvoa.

   56 px on Hohtokeilan oman sivuston navin logon korkeus (LOGO_VAIHTO.md
   §3, mitattu eikä arvattu: 44 px:llä sana LAHTI ei ollut luettava).
   Sama luku tässä, jotta hallin sivulta tänne tuleva näkee saman logon
   samankokoisena eikä hyppyä ole.

   align-self: center, koska rivin muut lapset ovat baseline-linjattuja
   eikä kuvalla ole peruslinjaa jota linjata. */
.va-logo {
  flex: none;
  align-self: center;
  height: 56px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
@media (max-width: 559px) {
  .va-logo { height: 46px; max-width: 150px; }
}

/* Hallin korostusväri, ainoa esiintymä: 3 px merkki nimen edessä. */
.va-brand-tick {
  flex: none;
  width: 3px;
  height: 0.82em;
  border-radius: 2px;
  background: var(--ha-accent);
  transform: translateY(0.04em);
}

.va-halli {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--va-ink-1);
  overflow-wrap: anywhere;
}

.va-icon {
  flex: none;
  width: var(--va-tap); height: var(--va-tap);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--va-ink-2);
  background: transparent; border: none; border-radius: var(--va-r);
  cursor: pointer;
  transition: color var(--va-t-hover) var(--va-ease),
              transform var(--va-t-hover) var(--va-ease);
}
.va-icon:hover { color: var(--va-ink-1); }
.va-icon:active { transform: scale(0.98); }
.va-icon-sm { width: 36px; height: 36px; }

:root[data-theme="dark"] .va-ic-moon { display: none; }
:root:not([data-theme="dark"]) .va-ic-sun { display: none; }

/* ---------------- 4. Palstat ---------------- */

/* Tilaa kiinnitetylle toimintapalkille, jottei se koskaan peitä
   viimeistä kenttää. Työpöydällä palkki ei ole kiinnitetty ja tämä
   nollataan. */
.va-main { padding-bottom: 148px; }

.va-cols { display: grid; gap: 8px; align-items: start; }
.va-col-main { min-width: 0; }

.va-h1 {
  font-size: 21px; line-height: 1.2; font-weight: 640; letter-spacing: -0.015em;
  color: var(--va-ink-1);
}
.va-lede {
  margin-top: 4px;
  max-width: 46ch;
  font-size: 14.5px; line-height: 1.5; font-weight: 400; color: var(--va-ink-2);
}

/* Pystyrytmi on kireä tarkoituksella: puhelimessa jokainen turha 10 px
   siirtää aikakenttää alemmas, ja aikakenttä on se mitä tulija tuli
   katsomaan. */
.va-sec { margin-top: 26px; }
.va-h2 {
  font-size: 22px; line-height: 1.25; font-weight: 590; letter-spacing: -0.01em;
  color: var(--va-ink-1);
}
.va-h3 {
  font-size: 15px; font-weight: 590; letter-spacing: -0.005em;
  color: var(--va-ink-1);
}

.va-field { margin-top: 15px; }
.va-label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 540; color: var(--va-ink-2);
}
/* Ensimmäinen kysymys jonka asiakas ratkaisee ("Mitä varaat", kun
   hallilla on useampi resurssityyppi) saa hieman muita painavamman
   otsikon 6.8.2026 (BRIEF_V2 kohta 4.7), jotta virta alkaa selvästä
   ensimmäisestä askeleesta eikä kolmesta samannäköisestä pikkuotsikosta. */
#vaTypeLabel { font-weight: 590; color: var(--va-ink-1); }
.va-mini {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 470; color: var(--va-ink-3);
}
.va-opt {
  font-weight: 470; color: var(--va-ink-3);
}
.va-note {
  margin-top: 8px;
  font-size: 13.5px; line-height: 1.45; font-weight: 470; color: var(--va-ink-2);
}
/* Huomautus joka on ENNEN sitä mitä se koskee (synttärisivun
   "Menun hinta tulee ratahinnan päälle." napin ja avattavan
   menuvalikoiman välissä).

   ⚠ MIKSI `.va-page p.` EIKÄ PELKKÄ LUOKKA (jono #292, 7.9.2026). Tässä
   oli 3.9.2026 asti `.va-note-top { margin-top: -2px; margin-bottom: 10px }`,
   jota EI KÄYTETTY MISSÄÄN eikä se olisi tehnyt mitään jos olisi:
   nollausrivi (0,1,1) rivillä 224 voitti sen (0,1,0). Web designer
   joutui siksi kirjoittamaan välin inline-tyylinä varaa-synttarit.html:ään.
   (0,2,1) voittaa nollausrivin, joten inline-tyyliä ei enää tarvita.
   Käytössä vain #vaMenuHintaKehyksessä, joten muiden sivujen välistys
   ei muutu. */
.va-page p.va-note-yla { margin-top: 8px; margin-bottom: 10px; }
.va-note:empty { display: none; }
.va-note b { font-weight: 590; color: var(--va-ink-1); }
.va-note a {
  color: var(--va-accent-hi); text-decoration: none;
  border-bottom: 1px solid var(--va-accent-line);
}
.va-note a:hover { border-bottom-color: var(--va-accent); }

.va-err {
  margin-top: 7px;
  font-size: 13px; font-weight: 470; color: var(--va-alert-hi);
}

/* ---------------- 5. Segmentti (resurssityyppi) ---------------- */

.va-seg {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  padding: 4px;
  background: var(--va-zone-1);
  border-radius: 13px;
}
.va-seg button {
  min-height: 38px; padding: 8px 15px;
  font-size: 14px; font-weight: 540;
  color: var(--va-ink-2);
  background: transparent; border: none; border-radius: var(--va-r);
  cursor: pointer;
  transition: color var(--va-t-hover) var(--va-ease),
              opacity var(--va-t-hover) var(--va-ease),
              transform var(--va-t-hover) var(--va-ease);
}
.va-seg button:hover { color: var(--va-ink-1); }
.va-seg button:active { transform: scale(0.98); }
.va-seg button[aria-checked="true"] {
  color: var(--va-ink-1);
  background: var(--va-panel);
  box-shadow: none;
  font-weight: 590;
}

/* ---------------- 6. Askellin (henkilömäärä) ---------------- */

.va-step {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px;
  border: 1px solid var(--va-line-2);
  border-radius: 13px;
}
.va-stepbtn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--va-ink-2);
  background: transparent; border: none; border-radius: var(--va-r);
  cursor: pointer;
  transition: color var(--va-t-hover) var(--va-ease),
              transform var(--va-t-hover) var(--va-ease);
}
.va-stepbtn:hover { color: var(--va-ink-1); }
.va-stepbtn:active { transform: scale(0.94); }
.va-stepbtn[disabled] { opacity: 0.32; cursor: default; }
.va-stepbtn[disabled]:active { transform: none; }

.va-stepnum {
  width: 58px; height: 42px; padding: 0;
  font: 590 19px/42px 'InterVariable', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--va-ink-1); background: transparent;
  border: none; border-radius: var(--va-r);
  -moz-appearance: textfield;
}
.va-stepnum::-webkit-outer-spin-button,
.va-stepnum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.va-stepnum:focus { outline: none; }
.va-stepnum:focus-visible { outline: 2px solid var(--va-focus); outline-offset: 2px; }

.va-stepunit {
  padding: 0 12px 0 4px;
  font-size: 14px; font-weight: 470; color: var(--va-ink-2);
}

/* ---------------- 7. Pillerit (kesto) ---------------- */

.va-pills { display: grid; gap: 8px; }
.va-pills-kesto { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 380px; }

.va-pill {
  min-height: var(--va-tap);
  padding: 7px 6px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  font-size: 15px; font-weight: 540;
  font-variant-numeric: tabular-nums;
  color: var(--va-ink-1);
  background: var(--va-panel);
  border: 1px solid var(--va-line-2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--va-t-hover) var(--va-ease),
              color var(--va-t-hover) var(--va-ease),
              opacity var(--va-t-hover) var(--va-ease),
              transform var(--va-t-hover) var(--va-ease);
}
.va-pill:hover { border-color: var(--va-accent-line); }
.va-pill:active { transform: scale(0.98); }

/* ---------------- "Suosittu" -merkki (26.8.2026, Simon pyyntö) ----------
   Pikku kortti painikkeen ALAREUNAAN limittäin, ei sisään. Sisällä se
   söisi kestotekstin tilan kolmen sarakkeen ruudukossa; limittäin se on
   painikkeen ominaisuus eikä sen sisältöä, ja se on juuri se ero jonka
   silmä lukee "tämä on suositus" eikä "tämä on osa nimeä".

   Painike tarvitsee tähän position:relative ja rivi tilaa alle, jotta
   merkki ei leikkaudu eikä osu seuraavaan riviin. aria-hidden: valinnan
   nimi luetaan ruudunlukijalle painikkeen omasta tekstistä, ja
   "suosittu" on markkinointia eikä tietoa jota ilman ei voi valita.
   Ei omaa kuuntelijaa: pointer-events off, klikkaus menee painikkeelle. */
/* Tilaa merkille sekä ruudukon ALLE että RIVIEN VÄLIIN. Alapadding riittää
   viimeiselle riville, mutta ei muille: perusrivivälillä (8 px) merkin
   alareuna osuisi seuraavan rivin painikkeen päälle. Hohtokeilalla se ei
   juuri nyt näy, koska merkki sattuu olemaan kolmannessa sarakkeessa ja
   toisella rivillä on vain kaksi painiketta — mutta se on sattuma, ei
   rakenne, ja se muuttuu heti jos halli lisää kestovaihtoehdon. */
.va-pills-kesto { padding-bottom: 9px; row-gap: 22px; }
.va-pill { position: relative; }
.va-pill-merkki {
  position: absolute;
  left: 50%; bottom: -9px;
  transform: translateX(-50%);
  padding: 2px 8px 3px;
  font-size: 10px; font-weight: 640; line-height: 1.3;
  letter-spacing: 0.03em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--va-accent-ink);
  background: var(--va-accent);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--va-zone-0);
  pointer-events: none;
}

/* Valittu: pehmeä aksenttitäyttö ja aksenttireuna, ei täyttä tealia.
   Perustelu: sivun ainoa kylläinen täyttö on hallin nappi. Kaksi
   kylläistä pintaa sadan pikselin päässä toisistaan kilpailisi, ja
   napin pitää voittaa se kilpailu joka kerta. */
.va-pill[aria-checked="true"] {
  color: var(--va-ink-1);
  font-weight: 590;
  background: var(--va-accent-soft);
  border-color: var(--va-accent);
  box-shadow: inset 0 0 0 1px var(--va-accent);
}

/* ---------------- 8. Päivävalinta ----------------
   Seitsemän saraketta, ei koskaan vaakavieritystä. Nuolet siirtävät
   viikon kerrallaan. */

.va-daynav {
  display: flex; align-items: center; gap: 4px;
  margin-top: 18px; margin-bottom: 8px;
  /* Kalenteri asemoidaan tähän riviin. */
  position: relative;
}
/* Viikkoteksti on nappi (kalenterin avaus) mutta näyttää tekstiltä kunnes
   siihen koskee: se on navigointiapu, ei sivun päätoiminto. Alleviivattu
   kolmio kertoo että siitä saa jotain, ilman että se kilpailee varausnapin
   kanssa. */
.va-weeklabel {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font: inherit;
  font-size: 13px; font-weight: 540; color: var(--va-ink-2);
  text-align: center;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--va-r);
  cursor: pointer;
}
.va-weeklabel:hover { color: var(--va-ink-1); border-color: var(--va-line-2); }
.va-weeklabel:focus-visible { outline: 2px solid var(--va-accent); outline-offset: 2px; }
.va-weeklabel[aria-expanded="true"] {
  color: var(--va-ink-1); border-color: var(--va-line-2);
  background: var(--va-panel);
}
.va-weekcaret { flex: none; opacity: 0.7; transition: transform 140ms ease; }
.va-weeklabel[aria-expanded="true"] .va-weekcaret { transform: rotate(180deg); }

/* ---------------- Kuukausikalenteri (pop up) ----------------
   Roope 6.8.2026: "Pop up kalenteri aika kohtaan joka näyttää esim 24.8-30.8
   jotta ei tarvitse scrollata hirmu pitkään jos haluaa esimerkiksi varata
   joulukuuksi vuoron."

   Kalenteri on HYPPY eikä saatavuusnäkymä: se ei väitä mitään vapaista
   ajoista, koska kuukauden saatavuuden hakeminen olisi 30 päivän kysely
   joka kuukauden vaihdolla. Saatavuus näkyy päivävalitsimessa sen jälkeen. */
.va-cal {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: min(320px, calc(100vw - 32px));
  padding: 12px;
  background: var(--va-panel);
  border: 1px solid var(--va-line-2);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
}
.va-cal-head {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 8px;
}
.va-cal-title {
  flex: 1; text-align: center;
  font-size: 13.5px; font-weight: 600; color: var(--va-ink-1);
}
.va-cal-wd, .va-cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
}
.va-cal-wd i {
  font-style: normal; text-align: center;
  font-size: 10.5px; font-weight: 590; color: var(--va-ink-3);
  padding-bottom: 4px;
}
.va-cal-day {
  min-height: 34px;
  font: inherit; font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--va-ink-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}
.va-cal-day:hover:not(:disabled) { border-color: var(--va-line-2); }
.va-cal-day:focus-visible { outline: 2px solid var(--va-accent); outline-offset: 1px; }
.va-cal-day:disabled { color: var(--va-ink-3); opacity: 0.4; cursor: default; }
/* Tänään: rengas. Valittu: täysi pinta. Kaksi eri asiaa, kaksi eri keinoa,
   eikä kumpikaan pelkkä väri (WCAG 1.4.1). */
/* Kalenterin "tanaan"-reunus seuraa hallin omaa varia 27.8.2026 lahtien,
   samasta syysta kuin paivalistan "tanaan": teal oli ainoa vieras vari
   hallikohtaisessa ilmeessa. Reunus ei ole tekstia, joten vaaleampi
   korostusvari riittaa tassa. */
.va-cal-day.tanaan { border-color: var(--ha-accent); }
.va-cal-day.on {
  background: var(--va-accent); color: var(--va-accent-ink); font-weight: 620;
  border-color: var(--va-accent);
}
.va-cal-tyhja { display: block; }
.va-cal-note {
  margin: 8px 0 0;
  font-size: 11.5px; line-height: 1.35; color: var(--va-ink-3);
}

/* ---------------- Varausehdot ja markkinointilupa ----------------
   Kaksi erillistä rastia. Ehdot ovat varauksen edellytys, markkinointilupa
   ei ole; siksi ne eivät myöskään näytä samanarvoisilta rivinä vaan ovat
   kaksi erillistä valintaa. */
.va-suostumus { display: grid; gap: 10px; margin-top: 4px; }

/* ⚠ TÄSSÄ OLI 26.8.2026 ASTI TOINEN .va-check-MÄÄRITTELY, ja se teki
   valintaruudusta NÄKYMÄTTÖMÄN. Roope ilmoitti sen Simolle sanoilla
   "Hyväksyn varausehdot -kohdassa ei ole mitään boksia mitä klikata".

   Vika oli kahden määrittelyn spesifisyysristi, ei kummankaan oma virhe:
     tämä lohko:  .va-check input[type="checkbox"]  (0,2,1)  width/height 20px
     kohta 9:     .va-check input                   (0,1,1)  position:absolute
                                                             clip:rect(0 0 0 0)
   Leveys ja korkeus tulivat tästä lohkosta (korkeampi spesifisyys), mutta
   position ja clip tulivat kohdasta 9, koska tämä lohko ei asettanut niitä
   lainkaan. clip pätee vain absoluuttisesti sijoitettuun elementtiin — ja
   se oli nyt absoluuttinen. Lopputulos: 20 x 20 pikselin ruutu leikattuna
   nollaan. Mitattu elävältä sivulta ennen korjausta:
     position:absolute · clip:rect(0px,0px,0px,0px) · elementFromPoint null

   Kohta 9 on OIKEA toteutus (natiivi ruutu kuuntelee näppäimistöä, näkyvä
   ruutu piirretään viereen span.va-check-box:iin), mutta sen vaatima span
   puuttui HTML:stä kokonaan. Lisätty nyt molempiin rasteihin. Tämä lohko
   poistettiin, jotta samalle komponentille on yksi määrittely eikä kaksi.

   OPPI: kun sama luokka on määritelty kahdesti eri tiedoston kohdissa,
   lopputulos ei ole kumpikaan niistä vaan ominaisuuskohtainen sekoitus. */

.va-check a { color: var(--va-accent-hi); text-underline-offset: 2px; }
.va-req { color: var(--va-alert-hi, #CE2C31); font-weight: 600; }

.va-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }

.va-day {
  min-height: 58px; padding: 7px 2px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--va-t-hover) var(--va-ease),
              color var(--va-t-hover) var(--va-ease),
              opacity var(--va-t-hover) var(--va-ease),
              transform var(--va-t-hover) var(--va-ease);
}
/* EI var(--va-ink-3): 11 px teksti on normaalikokoista WCAG:n mielessa ja
   vaatii 4.5:n kontrastin, mutta ink-3 antaa paperitaustaa vasten 3.55.
   Mitattu Lighthousella 5.8.2026 kun sivu auditoitiin ensi kerran
   julkisena. Tama savy antaa 5.16 ja pysyy silti selvasti pv-numeroa
   hillitympana, joten hierarkia ei muutu. */
.va-day .vk { font-size: 11px; font-weight: 540; color: var(--va-ink-3); }
.va-day .pv {
  font-size: 16px; font-weight: 590; font-variant-numeric: tabular-nums;
  color: var(--va-ink-1);
}
/* Piste piilotettu 6.8.2026 (BRIEF_V2 kohta 4.4): tyhjän päivän oma
   himmennys (.tyhja, ks. alla) kertoo jo saman tiedon, joten piste oli
   selittämätön koriste sen päällä eikä oma luettava merkki. Elementti
   jää DOMiin (JS luo sen yhä jokaiselle päivälle jolla on tilaa), ei
   vain piirry. */
.va-day .piste {
  display: none;
}
.va-day:hover { border-color: var(--va-line-2); }
.va-day:active { transform: scale(0.97); }

/* Tyhjä päivä on himmeä mutta yhä avattavissa: sen voi avata nähdäkseen
   miksi. Estetty päivä olisi umpikuja ilman selitystä. */
.va-day.tyhja .pv, .va-day.tyhja .vk { color: var(--va-ink-3); }
.va-day.tyhja .pv { font-weight: 470; }

.va-day[aria-pressed="true"] {
  background: var(--va-accent-soft);
  border-color: var(--va-accent);
  box-shadow: inset 0 0 0 1px var(--va-accent);
}
.va-day[aria-pressed="true"] .vk { color: var(--va-ink-2); }
.va-day[aria-pressed="true"] .pv { color: var(--va-ink-1); font-weight: 590; }

/* "tanaan" oli teal #006E61 27.8.2026 asti. Se valittiin kun varaussivu
   oli yleiskayttoinen ja teal oli sen ainoa korostus. Kun sivu sai
   hallikohtaisen ilmeen, teal jai ainoaksi vieraaksi variksi Hohtokeilan
   pinkin (#E76AD6) rinnalle. Roope huomasi sen 27.8.

   Hallin oma vari EI kelpaa tahan: se on vaalea korostus (Hohtokeilalla
   2.3:1 valkoista vasten) ja pieni 12 px teksti vaatii 4.5:1. Siksi
   "tanaan" erottuu nyt painolla ja vahvimmalla musteella eika varilla.
   Se toimii jokaisella hallilla varista riippumatta, myos tummassa
   teemassa, eika voi enaa riidella minkaan hallin ilmeen kanssa. */
.va-day.tanaan .vk { color: var(--va-ink-1); font-weight: 620; }

/* ---------------- 9. Aikakenttä ----------------
   Yksi ulottuvuus: aika. Ratasarakkeita ei ole, koska asiakas ei valitse
   rataa vaan palvelin valitsee sen. Varatut ajat piirretään silti, jotta
   illan muoto on luettavissa: se on se osa ruudukkoa jolla on asiakkaalle
   merkitystä. */

.va-frame {
  margin-top: 16px;
  font-size: 13.5px; font-weight: 470; color: var(--va-ink-2);
  font-variant-numeric: tabular-nums;
}
.va-frame b { font-weight: 590; color: var(--va-ink-1); }

.va-times { margin-top: 12px; }

.va-zone { margin-top: 16px; }
.va-zone:first-child { margin-top: 0; }
.va-zonehead {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
}
.va-zonehead b {
  font-size: 10.5px; font-weight: 590; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--va-ink-3);
}
.va-zonehead i {
  flex: 1; height: 1px; background: var(--va-line-1);
  transform: translateY(-3px);
}

.va-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}

.va-slot {
  min-height: 52px; padding: 7px 4px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  background: var(--va-panel);
  border: 1px solid var(--va-line-2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--va-t-hover) var(--va-ease),
              color var(--va-t-hover) var(--va-ease),
              opacity var(--va-t-hover) var(--va-ease),
              transform var(--va-t-hover) var(--va-ease);
}
.va-slot .klo {
  font-size: 15px; font-weight: 540; font-variant-numeric: tabular-nums;
  color: var(--va-ink-1);
}
.va-slot .lisa {
  font-size: 10.5px; font-weight: 590; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--va-ink-3);
}
.va-slot:hover { border-color: var(--va-accent-line); }
.va-slot:active { transform: scale(0.98); }

.va-slot[aria-pressed="true"] {
  background: var(--va-accent-soft);
  border-color: var(--va-accent);
  box-shadow: inset 0 0 0 1px var(--va-accent);
}
.va-slot[aria-pressed="true"] .klo { font-weight: 590; }
.va-slot[aria-pressed="true"] .lisa { color: var(--va-accent-hi); }

/* Varattu ja mennyt: ei täyttöä, ei reunaa, ei punaista. Varattu on
   tyhjä. Se on silti paikallaan, koska illan muoto luetaan siitä.
   Opacity porrastaa kolme tilaa erilleen (vapaa 1 → varattu .7 →
   mennyt .4) 6.8.2026 (BRIEF_V2 kohta 4.6): pelkkä ink-3-teksti ilman
   reunaa jäi liian lähelle vapaan ajan väriarvoa, etenkin tummassa
   teemassa jossa Simon palaute syntyi. */
.va-slot[disabled] {
  background: transparent;
  border-color: transparent;
  cursor: default;
  opacity: 0.7;
}
.va-slot[disabled] .klo { color: var(--va-ink-3); font-weight: 470; }
.va-slot[disabled]:hover { border-color: transparent; }
.va-slot[disabled]:active { transform: none; }
.va-slot.mennyt { opacity: 0.4; }

/* Luuranko. Vain opacity animoituu, ei kokoa eikä sijaintia: rakenne on
   paikallaan ennen dataa eikä mikään hypähdä kun data saapuu. */
.va-slot.luu {
  background: var(--va-zone-1);
  border-color: transparent;
  cursor: default;
  animation: va-luu 1.2s var(--va-ease) infinite alternate;
  will-change: opacity;
}
@keyframes va-luu { from { opacity: 0.5; } to { opacity: 0.85; } }

.va-empty {
  margin-top: 14px; padding: 16px 16px 17px;
  max-width: 46ch;
  font-size: 14.5px; line-height: 1.5; font-weight: 470; color: var(--va-ink-2);
  background: var(--va-zone-1);
  border-radius: var(--va-r-lg);
}
.va-empty b { font-weight: 590; color: var(--va-ink-1); }
.va-empty .va-jump {
  display: inline; margin: 0; padding: 0;
  font: inherit; font-weight: 590;
  color: var(--va-accent-hi); background: none; border: none;
  border-bottom: 1px solid var(--va-accent-line);
  cursor: pointer;
}

/* ---------------- 9b. Kentät ----------------
   Sama reuna, sama pyöristys ja sama kosketusala kuin pillereillä:
   yksikin poikkeama nappityylissä tai reunan paksuudessa on
   halpa-signaali riippumatta muusta laadusta. */

.va-input {
  width: 100%;
  min-height: var(--va-tap);
  padding: 11px 13px 12px;
  font: 470 16px/1.35 'InterVariable', system-ui, sans-serif;
  color: var(--va-ink-1);
  background: var(--va-panel);
  border: 1px solid var(--va-line-2);
  border-radius: 12px;
  transition: border-color var(--va-t-hover) var(--va-ease);
}
.va-input::placeholder { color: var(--va-ink-3); }
.va-input:hover { border-color: var(--va-ink-3); }
.va-input:focus { outline: none; border-color: var(--va-accent); box-shadow: inset 0 0 0 1px var(--va-accent); }
.va-input:focus-visible { outline: 2px solid var(--va-focus); outline-offset: 2px; }

.va-area {
  min-height: 76px;
  line-height: 1.5;
  resize: vertical;
}

.va-two { display: grid; gap: 12px; }

/* Valintaruutu. Natiivi ruutu jää paikalleen kuuntelemaan näppäimistöä
   ja apuvälineitä; näkyvä ruutu piirretään sen viereen. */
.va-check {
  display: flex; align-items: center; gap: 11px;
  min-height: var(--va-tap);
  cursor: pointer;
}
/* Markkinointilupa on kaksirivinen. Keskitys asettaisi ruudun kahden
   rivin puoliväliin, jolloin se ei ole enää tekstinsä alussa. Suostumus-
   rasteille siis ylälinjaus ja ruudulle sama optinen ylävara kuin
   ensimmäisen rivin x-korkeus. */
.va-suostumus .va-check { align-items: flex-start; min-height: 0; padding: 3px 0; }
.va-suostumus .va-check .va-check-box { margin-top: 1px; }
.va-check input {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.va-check-box {
  flex: none;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  background: var(--va-panel);
  border: 1px solid var(--va-line-2);
  border-radius: 7px;
  transition: color var(--va-t-hover) var(--va-ease),
              background-color var(--va-t-hover) var(--va-ease),
              border-color var(--va-t-hover) var(--va-ease);
}
.va-check:hover .va-check-box { border-color: var(--va-ink-3); }
.va-check input:checked + .va-check-box {
  /* Ruksin väri on aksenttitäytön oma muste, ei paneelin väri. Tummassa
     teemassa paneeli on lähes musta ja ruksi olisi hukkunut pinkkiin. */
  color: var(--va-accent-ink);
  background: var(--va-accent);
  border-color: var(--va-accent);
}
.va-check input:focus-visible + .va-check-box {
  outline: 2px solid var(--va-focus); outline-offset: 2px;
}
.va-check-text { font-size: 15px; font-weight: 470; color: var(--va-ink-1); }

/* ---------------- 10. Konfliktin palautus ----------------
   Sivun tärkein hetki. Häviävä käyttäjä ei aloita alusta: hänen
   tietonsa ovat tallessa ja lähimmät vapaat ajat ovat jo haettuina
   yhden klikkauksen päässä. */

.va-recover {
  margin-top: 16px; padding: 15px 16px 16px;
  border-radius: var(--va-r-lg);
  background: var(--va-accent-soft);
  border: 1px solid var(--va-accent-line);
}
.va-recover-lead {
  font-size: 14.5px; line-height: 1.45; font-weight: 470; color: var(--va-ink-1);
}
.va-recover-lead b { font-weight: 590; }
.va-recover-times {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
.va-near {
  min-height: var(--va-tap); padding: 9px 14px 10px;
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  font-variant-numeric: tabular-nums;
  color: var(--va-ink-1);
  background: var(--va-panel);
  border: 1px solid var(--va-accent-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--va-t-hover) var(--va-ease),
              transform var(--va-t-hover) var(--va-ease);
}
.va-near b { font-size: 15px; font-weight: 590; }
.va-near i {
  font-style: normal; font-size: 11.5px; font-weight: 470; color: var(--va-ink-2);
}
.va-near:hover { border-color: var(--va-accent); }
.va-near:active { transform: scale(0.98); }

/* ---------------- 11. Toimintapalkki ----------------
   Puhelimessa kiinnitetty alareunaan, työpöydällä sivupalstan kortti
   joka seuraa vieritystä. Sama elementti, ei kahta totuutta. */

.va-act {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--va-panel);
  border-top: 1px solid var(--va-line-2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.va-act-in {
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 10px 16px 12px;
}
.va-sum {
  margin-bottom: 8px;
  font-size: 13.5px; font-weight: 470; color: var(--va-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.va-sum b { font-weight: 590; color: var(--va-ink-1); }

.va-formerr {
  margin-bottom: 8px;
  font-size: 13.5px; line-height: 1.4; font-weight: 470; color: var(--va-alert-hi);
}

/* CTA on sivun voimakkain pinta, ei enää hallin väri: ks. tiedoston
   alun PÄÄTÖS 6.8.2026. Muste-vastaväri (ink-1 täyttönä, zone-0
   tekstinä) kääntyy oikein molemmissa teemoissa automaattisesti,
   koska se on jo sama pari jota teksti ja tausta käyttävät kaikkialla
   muuallakin sivulla. */
/* CTA:n täyttö oli 6.8.2026 lähtien kovakoodattu sivun muste-vastaväriksi.
   Perustelu oli oikea silloin: sivulla oli kaksi kylläistä korostusta
   (teal + hallin oma väri) jotka kilpailivat, ja nappi ei saanut olla
   kolmas. Peruste on hallikohtainen eikä yleinen — Hohtokeilalla teal
   poistui ja hallin pinkistä tuli sivun ainoa aksentti, jolloin
   neutraali nappi olisi ruudun ainoa väritön asia.

   26.8.2026: väri irrotettiin tokeneiksi. Oletus on täsmälleen entinen
   (ink-1 / zone-0), joten halli joka ei ota kantaa saa saman napin kuin
   ennen. Hohtokeila yliajaa nämä HALLI.teemassa. */
.va-cta {
  width: 100%; min-height: 50px; padding: 13px 18px 14px;
  font-size: 16px; font-weight: 590; letter-spacing: -0.005em;
  color: var(--va-cta-ink);
  background: var(--va-cta-bg);
  border: none; border-radius: 12px; cursor: pointer;
  transition: opacity var(--va-t-hover) var(--va-ease),
              transform var(--va-t-hover) var(--va-ease);
}
.va-cta:hover { opacity: 0.92; }
.va-cta:active { transform: scale(0.99); }
/* Ennen kuin aika on valittu, nappi ei ole haalistunut täyttö vaan
   neutraali ääriviiva. Haalistettu täyttö olisi suurin väripinta
   ruudulla juuri silloin kun mitään ei voi vielä tehdä, ja se on
   väärä painotus. */
.va-cta[disabled] {
  color: var(--va-ink-3);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--va-line-2);
  cursor: default;
}
.va-cta[disabled]:active { transform: none; }
.va-cta.busy { opacity: 0.7; cursor: progress; }

/* Siirretty pois toimintakortista Yhteystiedot-osion loppuun 6.8.2026
   (BRIEF_V2 kohta 4.3): juridinen ehtoteksti heti napin alla laski
   napin arvoa. Sama teksti, kevyempi paikka - JS (piirraYhteenveto)
   kirjoittaa sisällön yhä samaan #vaFine-elementtiin kuin ennenkin. */
.va-fine {
  margin-top: 18px;
  font-size: 12px; line-height: 1.45; font-weight: 470; color: var(--va-ink-3);
}
.va-fine:empty { display: none; }

/* ---------------- 12. Hallin tiedot ---------------- */

.va-hall { margin-top: 34px; }
.va-hall h2 {
  margin-bottom: 10px;
  font-size: 10.5px; font-weight: 590; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--va-ink-3);
}
.va-hall dl { display: grid; grid-template-columns: 84px 1fr; }
.va-hall dt {
  padding: 9px 10px 9px 0;
  font-size: 12.5px; font-weight: 470; color: var(--va-ink-2);
  border-top: 1px solid var(--va-line-1);
}
.va-hall dd {
  padding: 9px 0;
  font-size: 13.5px; font-weight: 470; color: var(--va-ink-1);
  border-top: 1px solid var(--va-line-1);
  overflow-wrap: anywhere;
}
.va-hall dt:first-of-type, .va-hall dd:first-of-type { border-top: none; }
.va-hall a {
  color: var(--va-accent-hi); text-decoration: none;
  border-bottom: 1px solid var(--va-accent-line);
}

/* ---------------- 13. Vahvistus ja peruutus ---------------- */

.va-card {
  padding: 24px 20px 26px;
  background: var(--va-panel);
  border: 1px solid var(--va-line-1);
  border-radius: var(--va-r-lg);
  box-shadow: var(--va-shadow);
}

.va-done { padding-top: 8px; }
.va-done-tag {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 590; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--va-accent-hi);
}
.va-done-tick {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--va-panel); background: var(--va-accent);
  border-radius: 50%;
}
.va-done-when {
  margin-top: 12px;
  font-size: clamp(24px, 6.4vw, 32px); line-height: 1.15;
  font-weight: 640; letter-spacing: -0.02em;
  color: var(--va-ink-1);
}
.va-done-halli {
  margin-top: 6px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 18px; font-weight: 400; color: var(--va-ink-2);
}

.va-facts { display: grid; grid-template-columns: 92px 1fr; margin-top: 20px; }
.va-facts dt {
  padding: 10px 10px 10px 0;
  font-size: 12.5px; font-weight: 470; color: var(--va-ink-2);
  border-top: 1px solid var(--va-line-1);
}
.va-facts dd {
  padding: 10px 0;
  font-size: 14.5px; font-weight: 540; color: var(--va-ink-1);
  border-top: 1px solid var(--va-line-1);
  overflow-wrap: anywhere;
}
.va-facts dd.va-num { font-variant-numeric: tabular-nums; }

.va-done-cancel {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--va-line-2);
}
.va-done-cancel .va-note { margin-top: 6px; max-width: 46ch; }

.va-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 18px;
  min-height: var(--va-tap); padding: 12px 18px;
  font-size: 14px; font-weight: 540; text-decoration: none;
  color: var(--va-ink-2);
  background: transparent;
  border: 1px solid var(--va-line-2); border-radius: 12px;
  cursor: pointer;
  transition: color var(--va-t-hover) var(--va-ease),
              border-color var(--va-t-hover) var(--va-ease),
              transform var(--va-t-hover) var(--va-ease);
}
.va-ghost:hover { color: var(--va-ink-1); border-color: var(--va-ink-3); }
.va-ghost:active { transform: scale(0.98); }

.va-cancel { padding-top: 8px; }
.va-cancel .va-lede { margin-top: 10px; }
.va-cancel-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.va-cancel-row .va-ghost { margin-top: 0; }

.va-danger {
  min-height: var(--va-tap); padding: 12px 20px;
  font-size: 14px; font-weight: 540;
  color: var(--va-alert-hi);
  background: transparent;
  border: 1px solid var(--va-alert); border-radius: 12px;
  cursor: pointer;
  transition: opacity var(--va-t-hover) var(--va-ease),
              transform var(--va-t-hover) var(--va-ease);
}
.va-danger:active { transform: scale(0.98); }
.va-danger[disabled] { opacity: 0.5; cursor: default; }

/* ---------------- 14. Alatunniste ----------------
   Meidän nimemme, kerran, pienenä. Ei muualla sivulla. */

.va-foot {
  margin-top: 44px; padding: 18px 0 24px;
  border-top: 1px solid var(--va-line-1);
}
.va-foot-in {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  font-size: 12.5px; font-weight: 470; color: var(--va-ink-3);
}
.va-by { margin-left: auto; }

/* ---------------- 15. Sisääntulo ---------------- */

@keyframes va-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.va-times.is-in .va-zone {
  will-change: opacity, transform;
  animation: va-in var(--va-t-state) var(--va-ease) backwards;
  animation-delay: var(--d, 0ms);
}

/* ---------------- 16. Liikkeen rajoitus ---------------- */

@media (prefers-reduced-motion: reduce) {
  .va-page *, .va-page *::before, .va-page *::after {
    transition-property: opacity !important;
    transition-duration: 80ms !important;
    animation-duration: 80ms !important;
    animation-iteration-count: 1 !important;
  }
  .va-times.is-in .va-zone { animation: none; }
  .va-slot.luu { animation: none; opacity: 0.6; }
  .va-skip:focus { transform: none; top: 16px; }
  .va-pill:active, .va-slot:active, .va-day:active, .va-cta:active,
  .va-icon:active, .va-stepbtn:active, .va-near:active,
  .va-ghost:active, .va-danger:active, .va-seg button:active { transform: none; }
}

/* ---------------- 17. Isommat ruudut ----------------
   390 px on suunnittelun lähtökohta. Leveämpi ruutu saa enemmän
   sarakkeita ja sivupalstan, ei eri sivua. */

@media (min-width: 560px) {
  .va-wrap { padding: 0 24px; }
  .va-two { grid-template-columns: 1fr 1fr; }
  .va-main { padding-bottom: 132px; }
  .va-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .va-pills-kesto { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; }
  .va-act-in { padding: 12px 24px 14px; }
  .va-sum { display: inline-block; margin-right: 16px; margin-bottom: 0; vertical-align: middle; }
  .va-act-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .va-cta { width: auto; min-width: 220px; margin-left: auto; }
  .va-fine { width: 100%; margin-top: 2px; }
  .va-formerr { width: 100%; margin-bottom: 0; }
}

@media (min-width: 900px) {
  .va-top { padding: 34px 0 26px; }
  .va-main { padding-bottom: 0; }

  .va-cols { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
  .va-col-side { position: sticky; top: 24px; }

  .va-h1 { font-size: 26px; }
  .va-sec { margin-top: 42px; }
  .va-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .va-days { gap: 6px; }

  /* Palkki ei ole enää kiinnitetty vaan kortti sivupalstassa. Ei
     kohotusta (box-shadow) 6.8.2026 (BRIEF_V2 kohta 4.2): pelkkä
     reunaviiva ankkuroi kortin sivun rytmiin sen sijaan että se
     näyttäisi kelluvalta, liimatulta laatikolta. */
  .va-act {
    position: static;
    border: 1px solid var(--va-line-1);
    border-radius: var(--va-r-lg);
    padding-bottom: 0;
  }
  .va-act-in {
    display: block;
    padding: 18px 18px 20px;
  }
  .va-sum { display: block; margin: 0 0 12px; white-space: normal; }
  .va-formerr { margin-bottom: 10px; }
  .va-cta { width: 100%; min-width: 0; margin-left: 0; }
  .va-fine { margin-top: 10px; }

  .va-done, .va-cancel { max-width: 620px; }
  .va-card { padding: 32px 30px 34px; }
}

/* ---------------- Varausehtosivu (varausehdot.html) ----------------
   Roope 6.8.2026: "Varausehdot." Sivu kayttaa saman varaussivun typografiaa
   ja pintoja, jottei asiakas siirry ehtoja lukiessaan eri nakoiseen
   maailmaan: se on sama palvelu ja saman hallin sivu.

   Mittarivin leveys on 62 merkkia (~34em): pitka juridinen teksti taydella
   korttileveydella pakottaa silman hyppaamaan rivin alkuun liian pitkalta,
   ja juuri ehdot ovat se teksti joka luetaan kertaalleen ja huolella. */
.va-doc { max-width: 34em; }
.va-doc .va-h2 {
  margin-top: 26px; margin-bottom: 6px;
}
.va-doc .va-h2:first-of-type { margin-top: 20px; }
.va-doc p {
  margin: 0 0 12px;
  font-size: 14px; line-height: 1.6; color: var(--va-ink-1);
}
.va-doc p:last-child { margin-bottom: 0; }
.va-doc a { color: var(--va-accent); text-underline-offset: 2px; }

/* Kohdat jotka hallin omistajan on vahvistettava. NAKYVA merkinta eika
   kommentti koodissa: kommentin han ei nae, ja juuri han on se joka naihin
   vastaa. Merkinta poistetaan kun kohta on vahvistettu. */
.va-doc [data-vahvista] {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--va-attn, #FFC53D);
  background: rgba(255,197,61,0.10);
  border-radius: 0 var(--va-r) var(--va-r) 0;
  font-size: 13px; line-height: 1.5;
}

.va-doc-back { margin: 18px 0 0; text-align: center; }
.va-ghost-sm { font-size: 12.5px; padding: 6px 10px; }

/* ---------------- PAKETIT (VK-F2) ----------------
   Pakettivalinta kayttaa samoja pillereita kuin kesto, mutta yhdessa
   sarakkeessa: pakettien nimet ovat lauseita ("Synttaripaketti 2 h") eivat
   lukuja, eivatka mahdu kolmen sarakkeen ruudukkoon lyhentymatta. */
#vaPaketit { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
#vaPaketit .va-pill { padding-left: 14px; padding-right: 14px; }

/* Lisapalvelut. Pakollinen lisa nakyy mutta ei ole valittavissa: se kuuluu
   hintaan, ja sen piilottaminen tekisi hinnasta selittamattoman. */
.va-lisat { display: grid; gap: 6px; max-width: 380px; }
.va-lisa {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--va-tap);
  padding: 8px 12px;
  border: 1px solid var(--va-line-2);
  border-radius: 12px;
  font-size: 15px; font-weight: 470;
  color: var(--va-ink-1);
  background: var(--va-panel);
  cursor: pointer;
}
.va-lisa:has(input:checked) { border-color: var(--va-accent-line); }
.va-lisa.on-pakollinen { cursor: default; opacity: .85; }
.va-lisa input { accent-color: var(--va-accent, #12A594); margin: 0; }
.va-lisa:has(input:focus-visible) {
  outline: 2px solid var(--va-accent, #12A594); outline-offset: 2px;
}

/* ============================================================
   JUOMAT NAPIN TAAKSE (3.9.2026, Roope, BRIEF_juomat_napin_taakse.md)

   Sama nakokulma kuin .va-jump: tekstinvarinen nappi, ei uutta pintavaria,
   koska juomat ovat ennakkotilauksen toissijainen lisa eika lomakkeen
   paatoiminto. Nuoli kertoo auki/kiinni-tilan aria-expanded-attribuutista,
   se ei ole koriste. */
.va-juomanappi {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 0; margin: 0;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 590; text-align: left;
  color: var(--va-accent-hi);
  transition: color var(--va-t-hover) var(--va-ease);
}
/* KOSKETUSALUE, 7.9.2026 designkatselmus (ruokailu napin taakse).
   Mitattu 390 px:ssa: nappi on 358x24 px ja juoma- ja ruokailunappi ovat
   allekkain 15 px:n paassa toisistaan. 24 px on kosketuskohteen alaraja
   eika mitoitus: peukalo osuu naapuririviin ja kavija avaa vaaran osion.

   Alue kasvatetaan LAPINAKYVALLA pseudoelementilla eika pehmusteella.
   Kokeilin ensin `padding:6px 0; margin:-6px 0`, ja mittasin ettei se ole
   neutraali: .va-field kasvaa 24 -> 36 px, joten kaikki napin alapuolinen
   siirtyi 6 px alas neljalla sivulla. Absoluuttinen ::before on poissa
   virtauksesta, joten layout ei muutu lainkaan (mitattu 390 ja 1280:
   0 eroa yli 2 px), ja klikki osuu nappiin koska pseudo on sen lapsi.
   6 px ylos ja alas -> 36 px kosketuskorkeus, ja nappien valiin jaa yha
   3 px, joten alueet eivat mene paallekkain. */
.va-juomanappi::before {
  content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px;
}
.va-juomanappi::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--va-t-hover) var(--va-ease);
}
.va-juomanappi[aria-expanded="true"]::after { transform: rotate(-135deg); }
.va-juomanappi:hover { color: var(--va-accent); }
@media (prefers-reduced-motion: reduce) { .va-juomanappi::after { transition: none; } }

/* ============================================================
   JUOMAT RADALLE (lisatty 1.9.2026, tapahtumasivu)

   Kaytossa VAIN varaa-tapahtuma.html:ssa. Tavallisella varaussivulla
   naita luokkia ei ole yhdessakaan elementissa, joten lohko on
   kuollutta painoa siella eika voi muuttaa mitaan.

   RIVIN RAKENNE: nimi venyy, hinta ja askellin pysyvat oikeassa
   reunassa. Kapealla naytolla nimi ja hinta jaavat ylariville ja
   askellin putoaa omalleen, koska 42 px:n napit ja hinta eivat mahdu
   samalle riville puhelimessa.
   ============================================================ */
.va-juomat { display: grid; gap: 8px; max-width: 460px; }
.va-juoma {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--va-line-2);
  border-radius: 12px;
  background: var(--va-panel);
}
/* Valittu juoma erottuu SAMALLA merkilla kuin valittu lisa: reunan vari.
   Luku askeltimessa kertoo maaran, reuna kertoo etta rivilla on jotain.
   Pelkka luku 0 vs 2 on liian pieni ero silmailtaessa. */
.va-juoma[data-valittu="1"] { border-color: var(--va-accent-line); }
.va-juoma-nimi {
  font-size: 15px; font-weight: 470; color: var(--va-ink-1);
  line-height: 1.35;
}
.va-juoma-hinta {
  font-size: 14px; font-weight: 470; color: var(--va-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Askellin juomarivilla on pienempi kuin lomakkeen pääaskellin: rivejä
   on monta allekkain, ja 42 px:n napit tekisivät osiosta korkeamman kuin
   koko muu lomake. 36 px on yhä sormella osuttava. */
.va-step-sm { padding: 2px; border-radius: 11px; }
.va-step-sm .va-stepbtn { width: 36px; height: 36px; font-size: 18px; }
.va-step-sm .va-stepnum { width: 34px; height: 36px; line-height: 36px; font-size: 17px; }
@media (max-width: 420px) {
  .va-juoma { grid-template-columns: 1fr auto; }
  .va-juoma .va-step-sm { grid-column: 2; }
}

/* ============================================================
   TIETOSUOJA (lisatty 9.8.2026)

   .va-tietosuoja  varauslomakkeen tietosuojahuomautus suostumusten alla.
                   Pienempi ja vaaleampi kuin ehtorivi: se on tiedote, ei
                   valinta. Ei varoitusvaria - taman ei kuulu nayttaa
                   virheelta vaan rauhalliselta.
   ============================================================ */
.va-tietosuoja {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--va-muted, #6b7280);
}
.va-tietosuoja a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.va-tietosuoja a:hover,
.va-tietosuoja a:focus-visible { color: var(--va-ink, #111827); }