/* ============================================================
   KOKKOLAN AUTOHUOLTO — Ajanvaraus (/ajanvaraus)
   Käyttää main.css:n design-tokeneita; ladataan vain varaussivulla.
   UUSI ILME 3.8.2026: sivu käyttää uudistetun etusivun tyylikieltä
   (D-DIN, teräksensininen, kantatut napit, versaaliotsikot). Tokenit
   yliajetaan alla sivun omassa scopessa, kunnes koko teema on viety
   uuteen ilmeeseen; sen jälkeen arvot ovat yhtenevät main.css:n kanssa.
   ============================================================ */

/* ---------- Uuden ilmeen tokenit (scope: vain varaussivu) ---------- */
@font-face{font-family:"D-DIN";src:url("../fonts/D-DIN.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"D-DIN";src:url("../fonts/D-DIN-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"D-DIN";src:url("../fonts/D-DIN-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
body.page-template-page-ajanvaraus{
  --font-display:"D-DIN",system-ui,sans-serif;
  --font-body:"D-DIN",system-ui,sans-serif;
  --cyan:#2E5C7E;--cyan-700:#24506F;--steel-lite:#7FA7C4;
  --shadow-glow:0 0 0 1px rgba(46,92,126,.4), 0 8px 30px -8px rgba(46,92,126,.35);
  font-family:var(--font-body);
}
body.page-template-page-ajanvaraus h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.08}
body.page-template-page-ajanvaraus h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.14}
/* Kanttiset napit ilman hehkuja; toissijainen (btn--dark) muuttuu ääriviivanapiksi nuolella */
body.page-template-page-ajanvaraus .btn{border-radius:6px;box-shadow:none}
body.page-template-page-ajanvaraus .btn:hover{box-shadow:none}
body.page-template-page-ajanvaraus .btn--dark{background:transparent;--bg:transparent;--fg:var(--graphite);color:var(--graphite);
  border:1px solid currentColor;font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
/* main.css:n vanha shine-pyyhkäisy pois koko varaussivulta; nuoli nollaa
   samat ominaisuudet, koska base-säännön position/koko/tausta periytyisivät. */
body.page-template-page-ajanvaraus .btn::after{content:none}
body.page-template-page-ajanvaraus .btn:hover::after{animation:none}
body.page-template-page-ajanvaraus .btn--dark::after{content:"\2192";position:static;width:auto;height:auto;background:none;
  margin-left:.7rem;display:inline-block;transform:none;transition:transform .3s var(--ease)}
body.page-template-page-ajanvaraus .btn--dark:hover{background:rgba(127,132,138,.14);transform:none}
body.page-template-page-ajanvaraus .btn--dark:hover::after{animation:none;transform:translateX(4px)}
/* Takaisin-napissa on jo vasen nuoli-ikoni; oikea nuoli kuuluu vain eteenpäin vieviin. */
body.page-template-page-ajanvaraus .bk-back::after,
body.page-template-page-ajanvaraus #bkIcs::after{content:none}

.bk{background:var(--paper)}
.bk-wrap{max-width:760px}

.bk-preview{background:#1C1F24;color:var(--steel-lite);font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  border-radius:6px;padding:.7rem 1rem;margin-bottom:1.6rem;display:flex;align-items:center;gap:.55rem}
.bk-preview::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--steel-lite);flex:none}

.bk-head h1{font-size:clamp(1.9rem,4.6vw,2.9rem);margin-top:.8rem}
.bk-sub{margin-top:.9rem;color:var(--c-muted);font-size:1.06rem;max-width:52ch}

.bk-noscript{margin-top:1.6rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.bk-noscript p{margin-bottom:.8rem}
.bk-noscript .btn{margin-right:.6rem}

/* ---------- Edistymiskisko ---------- */
.bk-progress{display:flex;gap:0;margin:2rem 0 1.6rem;padding:0;counter-reset:none;position:relative}
.bk-progress li{flex:1;display:flex;flex-direction:column;align-items:center;gap:.45rem;position:relative;min-width:0}
.bk-progress li::before{content:"";position:absolute;top:16px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.bk-progress li:first-child::before{display:none}
.bk-progress li.is-done::before,.bk-progress li.is-active::before{background:var(--cyan-700)}
.bk-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;z-index:1;
  font-family:var(--font-display);font-weight:800;font-size:.9rem;
  background:#fff;border:2px solid var(--line);color:var(--steel-700);
  transition:background .25s var(--ease),border-color .25s,color .25s,box-shadow .25s}
.bk-progress li.is-active .bk-dot{background:var(--graphite);border-color:var(--graphite);color:#fff}
.bk-progress li.is-done .bk-dot{background:var(--cyan-700);border-color:var(--cyan-700);color:#fff}
.bk-plabel{font-family:var(--font-display);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-700);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bk-progress li.is-active .bk-plabel{color:var(--graphite)}
@media (max-width:640px){
  .bk-plabel{display:none}
  /* Aktiivinen label ympyränsä alle KOKO sanana (li on ~65 px leveä, joten
     max-width:100% katkaisisi esim. "AJONEUVO" → "AJONEU…"). Reunimmaiset
     ankkuroidaan reunaan, ettei teksti työnny viewportin yli. */
  .bk-progress li.is-active .bk-plabel{display:block;position:absolute;top:40px;left:50%;transform:translateX(-50%);max-width:none}
  .bk-progress li:first-child.is-active .bk-plabel{left:0;transform:none}
  .bk-progress li:last-child.is-active .bk-plabel{left:auto;right:0;transform:none}
  .bk-progress{margin-bottom:2.6rem}
}
@media (prefers-reduced-motion:reduce){.bk-dot{transition:none}}
/* Tiivis vaihekehys puhelimella (käyttäjän päätös 8.10.2026): vaiheissa 2–7
   sivun otsikko, johdanto ja kisko ovat piilossa ja vaihe-rivi "3/6 Osaaja"
   kertoo paikan. Työpöydällä rivi ei näy koskaan. */
.bk-stepline{display:none}
@media (max-width:640px){
  .bk-compact .bk-head,.bk-compact .bk-progress{display:none}
  .bk-compact .bk-stepline{display:flex;gap:.55rem;align-items:baseline;margin:.9rem 0 .5rem;font-family:var(--font-display);
    text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--steel-700)}
  .bk-stepline b{color:var(--graphite);font-size:.95rem;letter-spacing:.06em}
  .bk-compact[data-step="7"] .bk-stepline{display:none}
}

/* ---------- Vaihekortit ---------- */
.bk-form{position:relative}
.bk-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.3rem,3.5vw,2rem);box-shadow:var(--shadow-sm)}
.bk-card-title{font-size:clamp(1.3rem,2.8vw,1.7rem);color:var(--graphite)}
/* Painalluspalaute (Apple-periaate, käyttäjän päätös 8.10.2026): väri heti, 97 % painalluksen ajaksi. */
.bk-slot:active,.bk-daytab:active,.bk-weekbtn:active,.bk-mech-more:active,.bk-edit:active,.bk-vcard-x:active,.bk-manuallink:active{
  transform:scale(.97);transition:transform .1s ease-out,background 0s,border-color 0s,box-shadow 0s,color 0s}
.bk-slot:active,.bk-weekbtn:active,.bk-mech-more:active{background:var(--cyan-50);border-color:var(--cyan-700)}
.bk-mech:active{transform:scale(.985);transition:transform .1s ease-out,background 0s,border-color 0s,box-shadow 0s}
body.page-template-page-ajanvaraus .btn--dark:active{background:rgba(127,132,138,.24)}
/* Vaiheen vaihto: uusi vaihe häivyttyy ja liukuu 12 px tulosuunnasta (Jatka
   vasemmalle, Takaisin oikealle), 0,2 s. Autokortti, käsin syöttö ja
   ehdotuslista kasvavat kentän alta (0,18 s, alkupiste yläreuna). */
@keyframes bkstepfwd{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes bkstepback{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.bk-step--fwd{animation:bkstepfwd .2s var(--ease)}
.bk-step--back{animation:bkstepback .2s var(--ease)}
@keyframes bkgrow{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.bk-vcard:not([hidden]),.bk-manual:not([hidden]),.bk-sugg:not([hidden]){animation:bkgrow .18s var(--ease);transform-origin:50% 0}
@media (prefers-reduced-motion:reduce){
  .bk-slot:active,.bk-daytab:active,.bk-weekbtn:active,.bk-mech-more:active,.bk-edit:active,.bk-vcard-x:active,.bk-manuallink:active,.bk-mech:active{transform:none}
  .bk-step--fwd,.bk-step--back,.bk-vcard:not([hidden]),.bk-manual:not([hidden]),.bk-sugg:not([hidden]){animation:none}
}
@media (prefers-reduced-transparency:reduce){.bk-nav{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;border-top-color:var(--line)}}
.bk-card-title:focus{outline:none}
.bk-card-title:focus-visible{outline:3px solid var(--cyan);outline-offset:6px;border-radius:4px}
.bk-card-title::after{content:"";display:block;width:40px;height:2px;background:var(--cyan-700);margin-top:.65rem}
.bk-card-sub{margin-top:.7rem;color:var(--c-muted);font-size:.97rem}
.bk-card .cf-field{margin-top:1.2rem;margin-bottom:0}

.bk-status{display:none}
.bk-status.show{display:block;background:#FBEBEC;border:1px solid #F0C7CB;color:#B4111F;border-radius:10px;padding:.8rem 1rem;font-size:.92rem;font-weight:600;margin-bottom:1rem}

/* Vaihe 1: rekisteritunnus */
.bk-regorow{display:flex;gap:.6rem;flex-wrap:wrap}
.bk-rego{flex:1;min-width:170px;font-family:var(--font-display);font-weight:700;font-size:1.35rem!important;letter-spacing:.12em;
  text-transform:uppercase;text-align:center;min-height:56px!important;border-radius:8px!important}
.bk-regobtn{flex:none}
.bk .cform input:focus,.bk input:focus,.bk textarea:focus{border-color:var(--cyan-700)}
.bk input[type=text],.bk input[type=tel],.bk input[type=email],.bk input[type=number],.bk textarea{
  width:100%;min-height:48px;padding:.6rem .85rem;font:inherit;font-size:1rem;color:var(--c-text);
  background:#fff;border:1px solid var(--line);border-radius:10px;transition:border-color .2s}
.bk textarea{resize:vertical}
.bk .is-invalid{border-color:#B4111F!important;box-shadow:0 0 0 1px #B4111F}

.bk-vcard{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.1rem;background:var(--cyan-50);border:1px solid rgba(46,92,126,.35);
  border-radius:var(--radius);padding:1rem 1.1rem}
.bk-vcard-actions{width:100%;display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.bk-vehok{min-height:44px;padding:.6rem 1.1rem;font-size:.92rem}
.bk-vcard-okmsg{color:var(--cyan-700);font-weight:800;font-size:.95rem}
.bk-vcard[hidden]{display:none} /* display:flex jyräisi hidden-attribuutin — tyhjä kortti näkyisi ennen hakua */
.bk-vcard-okmsg[hidden]{display:none}
.bk-vcard--ok{border-color:var(--cyan-700);box-shadow:0 0 0 1px var(--cyan-700)}
.bk-vcard--ok .bk-vehok{display:none}
.bk-vcard--ok .bk-vcard-ico{background:var(--cyan-700);color:#fff}
.bk-vcard .cf-err{width:100%;margin:0}
.bk-vcard-ico{width:44px;height:44px;border-radius:11px;background:#fff;display:grid;place-items:center;color:var(--cyan-700);flex:none}
.bk-vcard-ico svg{width:24px;height:24px}
.bk-vcard-body{flex:1;min-width:0}
.bk-vcard-body b{display:block;font-family:var(--font-display);font-size:1.08rem;color:var(--graphite)}
.bk-vcard-body span{color:var(--steel-700);font-size:.9rem}
.bk-vcard-x{background:none;border:0;padding:.3rem;font:inherit;font-size:.85rem;font-weight:600;color:var(--cyan-700);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;flex:none}
.bk-manuallink{background:none;border:0;padding:0;margin-top:1.1rem;font:inherit;font-size:.92rem;font-weight:600;
  color:var(--cyan-700);text-decoration:underline;text-underline-offset:3px;cursor:pointer;display:inline-block}
.bk-manual{margin-top:.4rem}
/* Laitteen muisti: edellisen varauksen auto ja "Unohda tiedot". */
.bk-memory{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-top:1.1rem;padding:.75rem 1rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:4px;font-size:.92rem;color:var(--graphite)}
.bk-memory[hidden]{display:none}
.bk-memory .bk-vcard-x{padding:0}

/* Merkki, malli ja vuosimalli samalla rivillä (≥720 px). Ehdotuslista kelluu
   kentän alla kuten valikko: lepovarjo on sallittu kelluville (DESIGN.md).
   Korostusväri on sama vaalea teräksensininen kuin käyttövoimapillereissä. */
.bk-vrow{display:grid;gap:0 1rem}
@media (min-width:720px){.bk-vrow{grid-template-columns:1fr 1fr 128px}}
.bk-combo{position:relative}
.bk-sugg{position:absolute;left:0;right:0;top:100%;z-index:45;margin:3px 0 0;padding:.3rem 0;list-style:none;
  max-height:264px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:4px;
  box-shadow:0 14px 30px rgba(21,23,26,.14)}
.bk-sugg[hidden]{display:none}
.bk-sugg li{display:flex;align-items:center;min-height:44px;padding:.55rem .85rem;cursor:pointer;font-size:.97rem;color:var(--c-text)}
.bk-sugg li b{font-weight:700;color:var(--graphite)}
.bk-sugg li[aria-selected=true]{background:var(--cyan-50);color:var(--graphite)}

/* Vaihe 2: renkaat → Frendix */
.bk-tyres{margin-top:1.2rem;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem}
.bk-tyres b{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--graphite)}
.bk-tyres p{margin:.5rem 0 1rem;color:var(--c-muted);font-size:.95rem}

/* Vaihe 3: osaajakortit */
.bk-routing{display:flex;align-items:center;gap:.6rem;margin-top:1.1rem;color:var(--steel-700);font-size:.92rem;font-weight:600}
.bk-routing[hidden]{display:none}
.bk-earliest{display:flex;align-items:center;gap:.5rem;margin:.7rem 0 0;padding:.55rem .8rem;background:rgba(46,92,126,.08);border:1px solid rgba(46,92,126,.35);border-radius:8px;color:var(--cyan-700);font-size:.85rem;font-weight:600}
.bk-earliest::before{content:"✓";flex:none;font-weight:800}
.bk-earliest[hidden]{display:none}
.bk-desc-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.bk-mic{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border:1px solid var(--steel-300,#c9d1d6);border-radius:6px;background:#fff;color:var(--graphite);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer}
.bk-mic svg{width:15px;height:15px}
.bk-mic:hover{border-color:var(--cyan-700)}
.bk-mic--on{background:#B4111F;border-color:#B4111F;color:#fff;animation:bkmic 1.2s ease-in-out infinite}
@keyframes bkmic{0%,100%{opacity:1}50%{opacity:.65}}
@media (prefers-reduced-motion: reduce){.bk-mic--on{animation:none}}
.bk-mic[hidden]{display:none}
.bk-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--cyan-700);animation:bkspin .8s linear infinite;flex:none}
@keyframes bkspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bk-spin{animation:none;border-top-color:var(--line)}}

.bk-mechgrid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.2rem}
@media (max-width:560px){.bk-mechgrid{grid-template-columns:1fr}}
.bk-mech{position:relative;display:flex;gap:.85rem;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:.8rem .9rem;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.bk-mech:hover{border-color:var(--steel)}
.bk-mech input{position:absolute;opacity:0;pointer-events:none}
.bk-mech:has(input:checked){border-color:var(--cyan-700);background:var(--cyan-50);box-shadow:0 0 0 1px var(--cyan-700)}
.bk-mech:has(input:focus-visible){outline:3px solid var(--cyan);outline-offset:2px}
.bk-mech--suggested{order:-1;border-color:rgba(46,92,126,.5)}
.bk-mech--any{grid-column:1/-1}
.bk-badge{position:absolute;top:-9px;right:.8rem;background:var(--cyan-700);color:#fff;font-size:.64rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:.22rem .55rem;border-radius:5px}
.bk-mech-photo{width:52px;height:52px;border-radius:4px;overflow:hidden;flex:none;background:var(--paper-2)}
.bk-mech-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.bk-mech-photo--init,.bk-mech-photo--any{display:grid;place-items:center;background:linear-gradient(160deg,var(--graphite-2),var(--graphite-3));color:var(--steel-lite)}
.bk-mech-photo--init span{font-family:var(--font-display);font-weight:800;font-size:1.1rem}
.bk-mech-photo--any svg{width:24px;height:24px}
.bk-mech-body{min-width:0;flex:1}
.bk-mech-body b{display:block;font-family:var(--font-display);font-size:.98rem;color:var(--graphite);line-height:1.2}
.bk-mech-role{display:block;color:var(--cyan-700);font-weight:700;font-size:.62rem;margin-top:.15rem;text-transform:uppercase;letter-spacing:.06em}
.bk-mech-spec{display:block;color:var(--c-muted);font-size:.82rem;margin-top:.2rem;line-height:1.35}
.bk-mech-reason{display:block;margin-top:.45rem;font-size:.83rem;color:var(--graphite);background:#fff;border:1px solid rgba(46,92,126,.35);
  border-radius:8px;padding:.4rem .55rem;line-height:1.4}
.bk-mech-reason[hidden]{display:none}
/* Saatavuusrivi: seuraava vapaa aika suoraan kalenterista */
.bk-mech-avail{display:block;margin-top:.3rem;font-size:.8rem;color:var(--cyan-700);font-weight:700}
.bk-mech-avail--far{color:var(--steel-700);font-weight:400}
.bk-mech-avail[hidden]{display:none}
/* "Nopeammin pääsee" -rivi suosituskortissa (deterministinen, ei AI-tekstiä) */
.bk-mech-faster{display:block;margin-top:.35rem;font-size:.83rem;color:var(--graphite);background:#FFF8E6;border:1px solid #E8D48A;
  border-radius:8px;padding:.4rem .55rem;line-height:1.4}
.bk-mech-faster[hidden]{display:none}
/* Top-5 + "Näytä kaikki" */
.bk-mech--extra{display:none}
.bk-mechgrid--expanded .bk-mech--extra{display:flex}
.bk-mech-more{grid-column:1/-1;order:999;background:#fff;border:1px solid var(--line);border-radius:6px;min-height:46px;
  padding:.6rem 1rem;font:inherit;font-weight:700;font-size:.92rem;color:var(--cyan-700);cursor:pointer;transition:border-color .2s,background .2s}
.bk-mech-more:hover{border-color:var(--cyan-700);background:var(--cyan-50)}
.bk-mech-more[hidden]{display:none}

/* Vaihe 4: viikkonäkymä */
.bk-weeknav{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.2rem}
.bk-weekbtn{display:inline-flex;align-items:center;gap:.35rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:6px;padding:.5rem .95rem;font:inherit;font-weight:700;font-size:.86rem;color:var(--graphite);cursor:pointer;
  min-height:42px;transition:background .2s,border-color .2s}
.bk-weekbtn:hover{background:var(--cyan-50);border-color:var(--cyan-700)}
.bk-weekbtn[disabled]{opacity:.4;cursor:default;background:var(--paper-2);border-color:var(--line)}
.bk-weekbtn svg{width:16px;height:16px}
.bk-weeklabel{font-family:var(--font-display);font-size:1.02rem;color:var(--graphite);text-align:center}

/* Kapealla näytöllä viikkonapit ovat nuoli-ikoneita (aria-label kertoo
   toiminnon), jotta "10.8.–14.8.2026" mahtuu yhdelle riville eikä
   oikeanpuoleinen nappi jää kelluvan chat-napin alle. */
@media (max-width:640px){
  .bk-weekbtn span{display:none}
  .bk-weekbtn{padding:.5rem .8rem}
}
/* Varaussivulla chat-nappi on kapeilla näytöillä piilossa (käyttäjän päätös
   8.10.2026): kesken varauksen chat on kilpaileva varauspolku, nappi peitti
   kortin reunan ja alatunnisteen linkin, ja apu löytyy soittonapista.
   booking.css latautuu vain varaussivulla, joten muu sivusto ei muutu. */
@media (max-width:760px){
  .chatfab{display:none}
}
.bk-days{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-top:1.1rem}
/* Puhelin (≤640 px): päivänapit lukumäärineen ja valitun päivän ajat kolmen
   ruudukkona (käyttäjän päätös 8.10.2026). Työpöydällä viisi saraketta. */
.bk-daytabs{display:none}
@media (max-width:640px){
  .bk-daytabs{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;margin-top:1rem}
  .bk-daytabs[hidden]{display:none}
  .bk-daytab{background:#fff;border:1px solid var(--line);border-radius:9px;padding:.45rem .1rem;min-height:60px;font:inherit;color:var(--graphite);
    cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;transition:border-color .15s,background .15s}
  .bk-daytab b{font-family:var(--font-display);font-size:.84rem;text-transform:capitalize}
  .bk-daytab span{font-size:.72rem;color:var(--steel-700)}
  .bk-daytab small{font-size:.72rem;font-weight:700;color:var(--cyan-700)}
  /* Tyhjä päivä himmeänä värillä, ei läpinäkyvyydellä: teksti pysyy luettavana (kontrasti 4,5:1). */
  .bk-daytab.is-empty{background:var(--paper-2);border-style:dashed;color:var(--steel-700)}
  .bk-daytab.is-empty span,.bk-daytab.is-empty small{color:var(--steel-700)}
  .bk-daytab.is-selected{background:var(--graphite);border-color:var(--graphite);color:#fff}
  .bk-daytab.is-selected span,.bk-daytab.is-selected small{color:var(--steel-300)}
  .bk-days{display:block;margin-top:.8rem}
  .bk-day-slots{grid-template-columns:repeat(3,1fr);gap:.5rem}
  .bk-day-slots .bk-slot{min-height:46px}
  .bk-day-empty{padding:1.2rem .5rem;font-size:.92rem;color:var(--steel-700)}
}
.bk-day{min-width:0}
.bk-day-head{text-align:center;padding:.45rem .2rem;border-radius:9px;background:var(--paper-2);margin-bottom:.55rem}
.bk-day-head b{display:block;font-family:var(--font-display);font-size:.92rem;color:var(--graphite);text-transform:capitalize}
.bk-day-head span{font-size:.74rem;color:var(--steel-700)}
.bk-day-slots{display:grid;gap:.45rem}
.bk-slot{background:#fff;border:1px solid var(--line);border-radius:9px;padding:.5rem .3rem;font:inherit;font-weight:700;
  font-variant-numeric:tabular-nums;font-size:.92rem;color:var(--graphite);cursor:pointer;min-height:42px;
  transition:border-color .15s,background .15s,box-shadow .15s;text-align:center}
.bk-slot:hover{border-color:var(--cyan-700);background:var(--cyan-50)}
.bk-slot.is-selected{background:var(--graphite);border-color:var(--graphite);color:#fff}
.bk-slot small{display:block;font-weight:600;font-size:.66rem;color:var(--steel-700);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-slot.is-selected small{color:var(--steel-300)}
.bk-day-empty{text-align:center;color:var(--steel);font-size:.8rem;padding:.6rem .2rem}
.bk-alt-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.9rem}
.bk-days-alt p{max-width:52ch;margin:0 auto}
.bk-days-empty{grid-column:1/-1;text-align:center;color:var(--steel-700);background:var(--paper-2);border-radius:var(--radius);
  padding:1.6rem 1rem;font-weight:600}
.bk-days-skel{height:42px;border-radius:9px;background:linear-gradient(90deg,var(--paper-2) 25%,#f2f4f0 50%,var(--paper-2) 75%);
  background-size:200% 100%;animation:bkskel 1.1s infinite}
@keyframes bkskel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.bk-days-skel{animation:none}}

/* Vaihe 5 */
.bk-courtesy{margin-top:.2rem}

/* Vaihe 6: yhteenveto */
.bk-summary{margin:1.2rem 0 0;display:grid;gap:0}
.bk-summary>div{display:flex;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.bk-summary>div:last-child{border-bottom:0}
.bk-summary dt{flex:0 0 34%;font-weight:700;font-size:.88rem;color:var(--steel-700);margin:0}
.bk-summary dd{flex:1;margin:0;color:var(--c-text);font-size:.95rem;overflow-wrap:break-word;min-width:0}
.bk-summary dd b{font-family:var(--font-display);color:var(--graphite)}
/* Muokkaa-linkki yhteenvedon rivillä: vie suoraan oikeaan vaiheeseen (käyttäjän päätös 8.10.2026). */
.bk-edit{flex:none;align-self:flex-start;background:none;border:0;padding:.15rem .3rem;margin:-.15rem -.3rem 0 0;font:inherit;font-size:.85rem;font-weight:600;
  color:var(--cyan-700);text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:4px}
.bk-edit:hover{color:var(--cyan)}
/* Vaihe 6, Tarkista ja vahvista (käyttäjän päätökset 8.10.2026): aikakortti
   kärkenä (sama .bk-stamp kuin vahvistuksessa) ja tiedot lohkoina, työpöydällä
   kahdessa sarakkeessa, puhelimella allekkain. Muokkaa-linkit kortin ja lohkon
   reunassa, eivät rivin perässä (ylivuoto 390 px:ssä). */
.bk-stamp--review{margin-top:1.2rem}
.bk-stamp-when .bk-edit{display:inline-block;margin-top:.5rem}
.bk-stamp-who .bk-edit{margin-left:auto}
.bk-review{display:grid;gap:.8rem;margin-top:1rem}
@media (min-width:641px){.bk-review{grid-template-columns:1fr 1fr}}
.bk-rv{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.95rem 1.1rem;min-width:0}
.bk-rv header{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-bottom:.4rem}
.bk-rv h3{margin:0;font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--steel-700)}
.bk-rv p{margin:0;font-size:.95rem;line-height:1.45;color:var(--c-text);overflow-wrap:anywhere}
.bk-rv-lead{font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--graphite)}
.bk-rv-meta,.bk-rv-text{color:var(--steel-700);font-size:.9rem;margin-top:.15rem}
.bk-rv-text{white-space:pre-line}

/* Onnistuminen */
.bk-card--ok{text-align:left}
.bk-card--ok h2{font-size:clamp(1.5rem,3.4vw,2rem);color:var(--graphite)}
.bk-card--ok>p{margin-top:.7rem;color:#3a3f45;line-height:1.6}
.bk-card--ok .cf-ref{margin-top:.7rem}
.bk-okactions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.bk-okactions .btn--ghost{--fg:var(--graphite);border-color:var(--line)}
.bk-okactions .btn--ghost:hover{--bg:var(--paper-2);border-color:var(--steel)}
/* Lisää kalenteriin: puhelimella nappi (kalenterisovellus on samassa kädessä),
   tietokoneella pieni linkki Etusivulle-napin perässä (käyttäjän päätös 8.10.2026). */
@media (max-width:640px){.bk-okactions .bk-ics{flex:1 1 100%}.bk-okactions .btn--ghost{flex:1 1 calc(50% - .35rem)}}
@media (min-width:641px){
  /* Valitsin voittaa sivun oman ääriviivanappisäännön (rivi 26). */
  body.page-template-page-ajanvaraus .bk-okactions .bk-ics,
  body.page-template-page-ajanvaraus .bk-okactions .bk-ics:hover{order:2;background:none;border:0;color:var(--cyan-700);
    min-height:0;padding:0;margin-left:.4rem;font-family:var(--font-body);font-size:.92rem;font-weight:600;letter-spacing:0;
    text-transform:none;text-decoration:underline;text-underline-offset:3px}
  body.page-template-page-ajanvaraus .bk-okactions .bk-ics svg{width:16px;height:16px}
}

/* Aikakortti (DESIGN.md Motion budget 6, 8.10.2026): päivä ja kellonaika
   isolla, osaaja rinnalla. Kulmat 14 px, kuva 50 %. Ei punaista. */
.bk-stamp{display:flex;align-items:center;gap:1.1rem;margin-top:1.1rem;padding:1.1rem 1.25rem;background:var(--paper-2);border:1px solid var(--line);border-radius:14px}
.bk-stamp-when{flex:1;min-width:0}
.bk-stamp-day{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.1rem;color:var(--graphite)}
.bk-stamp-time{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,7vw,2.8rem);line-height:1.05;color:var(--graphite);margin-top:.15rem}
.bk-stamp-dur{display:block;color:var(--steel-700);font-size:.9rem;margin-top:.35rem}
.bk-stamp-who{display:flex;align-items:center;gap:.75rem;flex:none;max-width:46%}
.bk-stamp-photo,.bk-stamp-init{width:60px;height:60px;border-radius:4px;flex:none;object-fit:cover;object-position:top center;background:#fff} /* kanttinen kuten muu sivu (käyttäjän päätös 8.10.2026) */
.bk-stamp-init{display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:var(--cyan-700);border:1px solid var(--line)}
.bk-stamp-init[hidden],.bk-stamp-photo[hidden]{display:none}
.bk-stamp-name{min-width:0}
.bk-stamp-name b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--graphite);line-height:1.2}
.bk-stamp-name small{display:block;color:var(--steel-700);font-size:.85rem;margin-top:.15rem}
@media (max-width:560px){
  .bk-stamp{flex-wrap:wrap;gap:.9rem}
  .bk-stamp-who{max-width:none;width:100%;padding-top:.9rem;border-top:1px solid var(--line)}
}
/* Tuontiohje kahdessa rivissä: otsikko lihavana, ohje perässä. */
.bk-bring{margin-top:1.3rem;border-top:1px solid var(--line);padding-top:1rem}
.bk-bring p{margin:0 0 .7rem;font-size:.92rem;line-height:1.55;color:var(--c-muted)}
.bk-bring p:last-child{margin-bottom:0}
.bk-bring b{color:var(--graphite)}
.bk-ok-head{display:flex;align-items:center;gap:.8rem}
.bk-card--ok .bk-ok-head h2{margin:0}
.bk-card--ok .cf-ok-ico{flex:none;width:40px;height:40px;border-radius:50%;background:var(--cyan-700);color:#fff;display:grid;place-items:center}
.bk-card--ok .cf-ok-ico svg{width:22px;height:22px}
.bk-ok-head+p{margin-top:.9rem}
@media (prefers-reduced-motion:no-preference){
  .is-play .cf-ok-ico{opacity:0;transform:scale(.5);animation:bkokpop .45s cubic-bezier(.34,1.56,.64,1) 0s forwards}
  .is-play .cf-ok-ico path{stroke-dasharray:30;stroke-dashoffset:30;animation:bkokdraw .35s var(--ease) .2s forwards}
  .is-play .bk-stamp{opacity:0;transform:scale(1.04);animation:bkstamp .4s var(--ease) .25s forwards}
  .is-play .bk-stamp-who{opacity:0;transform:translateX(12px);animation:bkslide .35s var(--ease) .5s forwards}
  .is-play #bkOkBody,.is-play .cf-ref,.is-play .bk-summary,.is-play .bk-okactions,.is-play .bk-bring{opacity:0;animation:bkokfade .4s var(--ease) .5s forwards}
}
@keyframes bkokpop{to{opacity:1;transform:scale(1)}}
@keyframes bkokdraw{to{stroke-dashoffset:0}}
@keyframes bkokfade{to{opacity:1}}
@keyframes bkstamp{to{opacity:1;transform:none}}
@keyframes bkslide{to{opacity:1;transform:none}}

/* ---------- Navigointi ---------- */
.bk-nav{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.4rem}
/* display:flex/inline-flex jyräisi hidden-attribuutin (vrt. .chatfab[hidden]):
   ilman näitä Takaisin näkyisi jo vaiheessa 1 ja koko palkki valmis-sivulla. */
.bk-nav[hidden]{display:none}
.bk-nav .btn[hidden]{display:none}
.bk-nav .bk-next{margin-left:auto;min-width:150px}
.bk-nav .btn[disabled]{opacity:.7;cursor:progress;transform:none;box-shadow:none}
@media (max-width:640px){
  /* Kiinteästi ruudun alareunassa (käyttäjän päätös 8.10.2026): sticky nousi ja
     laski rullatessa sivun lopussa ja selaimen palkin mukana. Lomake saa
     alapehmusteen, ettei viimeinen kenttä jää palkin alle. */
  /* Läpikuultava materiaali (Apple-periaate, käyttäjän pyyntö 8.10.2026): sisältö
     näkyy pehmeänä palkin läpi, eikä kova reuna korostu, kun selaimen oma
     työkalupalkki liikuttaa alareunaa rullatessa. Yläreunassa valojuova, ei viivaa. */
  .bk-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(246,247,245,.72);
    backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
    margin:0;padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.55);box-shadow:0 -1px 0 rgba(21,23,26,.05)}
  .bk-form{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .bk-nav .btn{flex:1;min-width:0}
  .bk-nav .bk-next{margin-left:0}
  /* Varaussivulla oma alanavigointi korvaa etusivun actionbarin */
  body.page-template-page-ajanvaraus .actionbar{display:none}
  body.page-template-page-ajanvaraus .site-footer{padding-bottom:0}
}