/* Ajanvarauksen yhteiset osat (Claude Designin handoff 28.10.2026, design_handoff_joelkontio_2026-10-28).
   Yksi komponentti kaikille varausnäkymille: /varaa, Yhteys ja ajanvaraus -osiot ja /suositus
   (scripts/yhteysosio.py) sekä tilannekuvan tulosruutu (js/kartoitus.js). Aikapainikkeet piirtää
   mockup/js/varaa-sivu.js. Muunnelma valitaan listan luokalla:
     .kuvarivi      = kuva + nimi + rooli
     .ajat--rivit   = ajat riveinä: päivä isolla, kellonaika alla
     .ajat--kortti  = ensimmäinen aika kehyksessä yhdellä rivillä, lisäajat sen alla riveinä
     .suoraan       = suorat yhteystiedot riveinä
   Vain joel.css:n tokenit (+ --frame). Tumma tila tulee tokenien kautta. */

/* hidden-attribuutti voittaa komponentin display-arvot (joel.css:ssä ei ole globaalia sääntöä) */
.ajat[hidden],.ajat [hidden],.lisaa-ajat[hidden],.varaa-vaihto[hidden]{display:none!important}

/* ---------- kuvarivi ---------- */
.kuvarivi{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:center;margin:0}
.kuvarivi .me{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--rule)}
.kuvarivi .me img{display:block;width:100%;height:100%;object-fit:cover}
.kuvarivi .nimi{display:block;font-size:16px;line-height:1.3;font-weight:500;color:var(--ink)}
.kuvarivi .rooli{display:block;font-size:14px;line-height:1.4;color:var(--muted)}

/* ---------- aikalista: yhteinen ---------- */
.ajat{display:flex;flex-direction:column;margin:0;padding:0}
.aika{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin:0;padding:0;background:none;border:0;border-radius:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .18s,border-color .18s,background-color .18s}
.aika .mi{display:flex;flex-direction:column;gap:2px;min-width:0}
.aika .pv{font-family:Fraunces,Georgia,serif;font-weight:400;font-optical-sizing:auto;font-variation-settings:"SOFT" 0,"WONK" 0;letter-spacing:-.012em;white-space:nowrap}
.aika .kl{font-size:16px;line-height:1.35;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.aika .va{flex:none;font-size:16px;line-height:1.3;font-weight:500;color:var(--green);white-space:nowrap}
/* hover: päivä vihreäksi, "Varaa →" alleviivataan */
.aika:hover .pv{color:var(--green)}
.aika:hover .va{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
/* näppäimistöfokus: joel.css:n rengas, irti reunasta */
.aika:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* painettu */
.aika:active .pv,.aika:active .kl,.aika:active .va{color:var(--green)}
/* varataan (aria-busy="true" painikkeella ja listalla; .va-teksti "Varataan…") */
.aika[aria-busy="true"]{cursor:progress}
.aika[aria-busy="true"] .pv,.aika[aria-busy="true"] .kl,.aika[aria-busy="true"] .va{color:var(--green);text-decoration:none}
.ajat[aria-busy="true"] .aika:not([aria-busy="true"]){opacity:.45;pointer-events:none}

/* ---------- rivit ---------- */
.ajat--rivit{border-top:1px solid var(--rule2)}
.ajat--rivit .aika{min-height:72px;padding:14px 0;border-bottom:1px solid var(--rule2)}
.ajat--rivit .aika .pv{font-size:1.3rem;line-height:1.2}

/* ---------- kortti ---------- */
.ajat--kortti .aika .mi{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:.3em;row-gap:0}
.ajat--kortti .aika .pv,.ajat--kortti .aika .kl{font-family:Fraunces,Georgia,serif;font-size:1.2rem;line-height:1.3;letter-spacing:-.01em;font-variation-settings:"SOFT" 0,"WONK" 0;color:inherit}
.ajat--kortti .aika{min-height:60px;padding:10px 16px}
.ajat--kortti .aika:not(.lisa){border:1px solid var(--frame);border-radius:2px}
.ajat--kortti .aika:not(.lisa):hover{border-color:var(--green)}
.ajat--kortti .aika:not(.lisa):active{background:color-mix(in srgb,var(--green) 8%,transparent)}
.ajat--kortti .aika:not(.lisa)[aria-busy="true"]{background:var(--green);border-color:var(--green)}
.ajat--kortti .aika:not(.lisa)[aria-busy="true"] .pv,.ajat--kortti .aika:not(.lisa)[aria-busy="true"] .kl,.ajat--kortti .aika:not(.lisa)[aria-busy="true"] .va{color:var(--paper)}
/* lisäajat kortin alla (.lisat > .aika.lisa): rivejä samalla sisennyksellä kuin kortin teksti */
.ajat--kortti .aika.lisa{border-bottom:1px solid var(--rule2)}
.ajat--kortti .lisat{margin-top:8px;border-top:1px solid var(--rule2)}

/* lisäajat-säiliö (molemmat muunnelmat). Avattaessa fokus siirtyy ensimmäiseen lisäaikaan. */
.ajat .lisat{display:flex;flex-direction:column}
.ajat .lisat[hidden]{display:none}

/* ---------- lataus (luuranko) ---------- */
.ajat .lataa{display:flex;flex-direction:column;justify-content:center;gap:8px}
.ajat--rivit .lataa{min-height:72px;border-bottom:1px solid var(--rule)}
.ajat--kortti .lataa{min-height:60px;padding:0 16px;border:1px solid var(--rule);border-radius:2px}
.lataa i{display:block;height:12px;width:22%;border-radius:2px;background:var(--rule)}
.lataa i:first-child{height:18px;width:46%}
.ajat--kortti .lataa i:first-child{width:64%}
.ajat--kortti .lataa i+i{display:none}
@media(prefers-reduced-motion:no-preference){.lataa i{animation:lataa .9s ease-in-out infinite alternate}}
@keyframes lataa{to{opacity:.35}}

/* ---------- tyhjä ja virhe ---------- */
.ajat .tyhja,.ajat .virhe{margin:0;padding:18px 0;font-size:16px;line-height:1.6;color:var(--body);text-wrap:pretty}
.ajat--rivit .tyhja,.ajat--rivit .virhe{border-bottom:1px solid var(--rule2)}
.ajat .tyhja a,.ajat .virhe a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;white-space:nowrap}

/* ---------- linkit listan alla ---------- */
.ajat-lnk{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;font:inherit;font-size:16px;color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--green) 45%,transparent);text-underline-offset:.22em;cursor:pointer}
.ajat-lnk:hover{color:var(--ink);text-decoration-color:currentColor}
.lisaa-ajat{margin-top:4px}

/* ---------- ilmoitus (ajan vaihto, varauksen virhe) ---------- */
.ilmo{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--green)}

/* ---------- suorat yhteystiedot ---------- */
.suoraan{margin-top:clamp(52px,9vw,72px)}
/* RAUHA: kysymys on lohkon vahvin taso, linkit näyttävät linkeiltä, selitykset vaimeimmat */
.suoraan-ot{margin:0;font-size:17px;line-height:1.5;color:var(--ink)}
.suoraan-rivit{margin:12px 0 0;padding:0;border-top:1px solid var(--rule2)}
/* RAUHA 28.10.2026: tavoitettavuus kanavansa rivillä (ei erillistä kappaletta listan alla) */
.suoraan-rivit>div{display:grid;grid-template-columns:6.5em minmax(0,1fr);align-items:baseline;min-height:56px;padding:6px 0 12px;border-bottom:1px solid var(--rule2)}
.suoraan-rivit dt{padding-top:10px}
.suoraan-rivit dd{display:flex;flex-direction:column}
.suoraan-aika{display:block;margin-top:-4px;font-size:16px;line-height:1.5;color:var(--muted);text-wrap:wrap}
.suoraan-rivit dt{font-size:16px;line-height:1.5;color:var(--muted)}
.suoraan-rivit dd{margin:0;min-width:0}
.suoraan-rivit a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,var(--green) 40%,transparent);overflow-wrap:anywhere}
.suoraan-rivit a:hover{color:var(--ink);text-decoration-color:currentColor}
.suoraan-huom{margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* puhelimella: numero ja osoite kertovat kanavan itse, joten otsikko (Soita / Sähköposti) piilotetaan näkyvistä
   (jää ruudunlukijalle) ja huomautus saa koko leveyden: 1 rivi puhelimelle, 2 sähköpostille, ei kolmea */
@media(max-width:640px){
  /* ei viivoja: kaksi lyhyttä riviä erottuvat välistyksellä; viivat tekivät niistä lomakkeen */
  .suoraan-rivit{margin-top:6px;border-top:0;display:flex;flex-direction:column;gap:12px}
  .suoraan-rivit>div{display:block;min-height:0;padding:0;border-bottom:0}
  .suoraan-rivit dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .suoraan-rivit a{font-size:18px}
  /* "Vastaan viimeistään seuraavana arkipäivänä." yhdelle riville ≥ 375 px:n puhelimissa (335 px → 328 px) */
  .suoraan-aika{letter-spacing:-.01em}
}