/* Vaišnavský kalendář — vizuální systém.
 * Barvy jsou v OKLCH převedené do sRGB a ověřené simulací barvosleposti:
 * plochy ekadaší a částečného půstu mají ΔE2000 ≥ 5,5 při protanopii,
 * deuteranopii i tritanopii. Nesahat na ně bez opakování testu.
 * Půst dostává PLOCHU, občanský den jen barvu čísla — kdyby soutěžily,
 * sežral by víkend rozpočet, který potřebuje půst.
 */

/* ══ TÉMA ═════════════════════════════════════════════════════════════
   light-dark() pokrývá všechny tři stavy naráz: výchozí (podle systému),
   i vynucený světlý nebo tmavý. Přepínač v hlavičce jen nastaví
   color-scheme inline — nebojuje s ničím a nepotřebuje druhou sadu barev. */
:root{ color-scheme: light dark }
:root[data-theme="light"]{ color-scheme: light }
:root[data-theme="dark"] { color-scheme: dark }

:root{
  --page:  light-dark(#FCFAF7, #13100D);
  --card:  light-dark(#FFFFFF, #1C1915);
  --sunk:  light-dark(#F7F4F0, #27221D);
  --hair:  light-dark(#E2DFDB, #39342F);
  --hair2: light-dark(#EFECE9, #2B2722);
  --muted: light-dark(#79736D, #999188);
  --ink2:  light-dark(#4D463F, #C4BCB4);
  --ink:   light-dark(#241D15, #F0EAE4);

  /* OSA A · půst — jediný kanál, který dostává plochu.
     Modrá↔jantarová přežije protanopii, deuteranopii i tritanopii. */
  --ek-bg:   light-dark(#EAF0FE, #1E2A47);
  --ek-line: light-dark(#426DD7, #6589DB);
  --ek-fg:   light-dark(#385DB8, #9EBDFF);
  --ca-bg:   light-dark(#FFEDD9, #3B260C);
  --ca-line: light-dark(#8A5601, #EEB97B);
  --ca-fg:   light-dark(#8A5601, #EEB97B);
  --pa-bg:   light-dark(#E6FAE9, #172F1D);
  --pa-line: light-dark(#3E8651, #4B8358);
  --pa-fg:   light-dark(#197037, #91D39F);

  /* Nevhodné pro půst — šedá. Je to ekadaší, na které se ale nepostí,
     takže „utlumeno" sedí líp než vlastní barva. */
  --nv-bg:   light-dark(#E2DFDC, #302D2B);
  --nv-fg:   light-dark(#514C47, #C2BDB7);

  /* Dnešek — zlatá. Když den nemá jinou barvu, vyplní se celý; když má,
     zůstane jen tlustý zlatý rámeček, aby si stavy nepřetlačovaly plochu. */
  --dnes-bg:   light-dark(#F1DDA5, #45380E);
  --dnes-line: light-dark(#987500, #C9A64D);
  --dnes-fg:   light-dark(#4D3A00, #ECCE83);

  /* Výstraha o zastaralých datech. Leží mimo mřížku, takže s plochami
     půstu nesoupeří. Ověřeno: text na pruhu 8,2:1, linka vůči stránce
     4,1:1 (světlý režim). */
  --al-bg:   light-dark(#FEE4E1, #401A18);
  --al-line: light-dark(#D24C49, #B84D49);
  --al-fg:   light-dark(#85161B, #FFBFB8);

  /* OSA B · občanský den — nikdy nedostane plochu */
  --sv: light-dark(#B02A2D, #F98F87);
  --vi: light-dark(#966B34, #D2A979);

  --s-3xs:2px; --s-2xs:4px; --s-xs:8px; --s-s:12px; --s-m:16px;
  --s-l:24px; --s-xl:32px; --s-2xl:48px; --s-3xl:64px;
  --r-s:6px; --r-m:8px; --r-l:12px;
  --disp:"EB Garamond", Georgia, "Times New Roman", serif;
  --ui:"Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing:border-box; min-width:0 }
html{ hyphens:auto; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--ui); font-size:16px; line-height:1.6;
  font-kerning:normal; font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
[lang="sa-Latn"]{ hyphens:none }
.wrap{ max-width:1240px; margin:0 auto;
       padding:var(--s-l) var(--s-l) var(--s-3xl);
       padding-left:max(var(--s-l), env(safe-area-inset-left));
       padding-right:max(var(--s-l), env(safe-area-inset-right)) }

h1,h2,h3{ margin:0; text-wrap:balance; line-height:1.15 }
h1{ font-family:var(--disp); font-size:clamp(1.75rem,1.35rem+1.5vw,2.9rem);
    font-weight:500; letter-spacing:-.018em }
h2{ font-family:var(--disp); font-size:clamp(1.25rem,1.1rem+.6vw,1.7rem);
    font-weight:500; letter-spacing:-.012em }
h3{ font-size:.9375rem; font-weight:600 }
p{ margin:0; text-wrap:pretty }
.eyebrow{ font-size:.6875rem; font-weight:600; letter-spacing:.14em;
          text-transform:uppercase; color:var(--muted) }
.note{ font-size:.8125rem; line-height:1.65; color:var(--muted); max-width:34em }
.num{ font-variant-numeric:tabular-nums lining-nums }
:focus-visible{ outline:2px solid var(--ek-line); outline-offset:2px; border-radius:3px }
/* V mřížce se vytažení kreslí DOVNITŘ, aby všechny dny měly zvenku
   stejné rozměry a nezasahovaly do sousedů. */
.cell:focus-visible{ outline-offset:-2px; border-radius:var(--r-m) }

/* Server vykresluje dny i měsíce jako odkazy, aby web fungoval bez JS.
   Výchozí styl odkazu by ale mřížku proměnil v modré podtržené peklo. */
a{ color:inherit }
.cell, .months a, .ag, h1 a{ text-decoration:none; color:inherit }
.trust a{ color:var(--ek-fg); text-decoration:underline; text-underline-offset:2px }
.trust a:hover{ text-decoration-thickness:2px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }

/* ── výstražný pruh ─────────────────────────────────────────────────── */
.vystraha{
  display:flex; align-items:flex-start; gap:var(--s-xs);
  margin:0 0 var(--s-m); padding:var(--s-s) var(--s-m);
  background:var(--al-bg); color:var(--al-fg);
  border:1px solid var(--al-line); border-left-width:4px;
  border-radius:var(--r-s);
  font-size:.875rem; line-height:1.5;
}
.v-znak{
  flex:0 0 auto; display:inline-grid; place-items:center;
  width:19px; height:19px; margin-top:1px; border-radius:99px;
  background:var(--al-line); color:var(--card);
  font-size:.75rem; font-weight:700; line-height:1;
}

/* ── hlavička ────────────────────────────────────────────────────────── */
.top{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s-s);
      margin-bottom:var(--s-m) }
.top-t{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto }
.trust{ display:flex; flex-wrap:wrap; gap:var(--s-2xs) var(--s-m); font-size:.75rem;
        color:var(--muted); align-items:center; margin-top:var(--s-s);
        padding-top:var(--s-s); border-top:1px solid var(--hair2) }
.trust b{ color:var(--ink2); font-weight:600 }
.trust span{ display:inline-flex; align-items:center; gap:5px }
.tdot{ width:5px; height:5px; border-radius:99px; background:var(--ek-line); flex:0 0 auto }

/* přepínač tématu */
.theme{ display:inline-flex; border:1px solid var(--hair); border-radius:99px;
        overflow:hidden; background:var(--card); flex:0 0 auto }
.theme button{ font:inherit; font-size:.75rem; color:var(--muted); background:none;
               border:0; height:36px; min-width:44px; padding:0 var(--s-s);
               cursor:pointer; display:inline-flex; align-items:center; gap:5px }
.theme button[aria-pressed="true"]{ background:var(--ink); color:var(--page); font-weight:600 }

/* ── navigační lišta ────────────────────────────────────────────────────
   Jeden řádek: šipka · měsíce · rok · šipka. Nadpis „srpen 2026" tu dřív
   stál vedle pilulek měsíců, což byla tatáž informace dvakrát. Rok je
   rozbalovátko, protože jinak se do jiného roku dá dostat jen proklikáním
   všech měsíců. */
.bar{ display:flex; align-items:stretch; gap:var(--s-2xs);
      margin-bottom:var(--s-s); min-width:0 }

.nav-arrow{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; font-size:1.15rem; color:var(--ink2);
  background:var(--card); border:1px solid var(--hair); border-radius:var(--r-s);
  text-decoration:none;
}
.nav-arrow:hover{ background:var(--sunk); color:var(--ink) }

.months{
  flex:1 1 auto; display:flex; align-items:stretch; gap:2px; min-width:0;
  justify-content:space-between;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.months::-webkit-scrollbar{ display:none }
/* flex:0 0 auto, ne 1 1 0 — jinak se na úzké obrazovce zkrátí pod šířku
   textu a dvanáct měsíců se slije do nečitelné změti místo posouvání. */
.months a{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  padding:0 var(--s-xs); min-height:44px; border-radius:var(--r-s);
  font-size:.875rem; color:var(--muted); text-decoration:none; white-space:nowrap;
}
.months a:hover{ background:var(--sunk); color:var(--ink) }
.months a[aria-current="page"]{ background:var(--ink); color:var(--page); font-weight:700 }

.year{ position:relative; flex:0 0 auto }
.year > summary{
  display:inline-flex; align-items:center; gap:5px; list-style:none; cursor:pointer;
  min-height:44px; padding:0 var(--s-s); border:1px solid var(--hair);
  border-radius:var(--r-s); background:var(--card); color:var(--ink);
  font-weight:600; font-variant-numeric:tabular-nums;
}
.year > summary::-webkit-details-marker{ display:none }
.year > summary::after{ content:"▾"; font-size:.7rem; color:var(--muted) }
.year > summary:hover{ background:var(--sunk) }
.year[open] > summary{ background:var(--ink); color:var(--page) }
.year[open] > summary::after{ color:var(--page) }
.year-menu{
  position:absolute; right:0; top:calc(100% + 4px); z-index:20;
  display:grid; grid-template-columns:repeat(3,minmax(64px,1fr)); gap:2px;
  padding:var(--s-2xs); background:var(--card); border:1px solid var(--hair);
  border-radius:var(--r-m); box-shadow:0 8px 28px -12px rgba(0,0,0,.35);
}
.year-menu a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 var(--s-xs); border-radius:var(--r-s);
  font-size:.875rem; font-variant-numeric:tabular-nums;
  color:var(--ink2); text-decoration:none;
}
.year-menu a:hover{ background:var(--sunk); color:var(--ink) }
.year-menu a[aria-current="true"]{ background:var(--ink); color:var(--page); font-weight:700 }

/* ── probíhající období ─────────────────────────────────────────────────
   Konkrétní data místo proporčního pruhu. Ten měl ukazovat, kdy v měsíci
   období běží, ale bez osy a v šedé z něj nešlo nic vyčíst. */
.periods{ display:flex; flex-wrap:wrap; gap:var(--s-2xs); margin-bottom:var(--s-s) }
.periods:empty{ display:none }
.period{
  display:inline-flex; align-items:baseline; gap:var(--s-xs);
  padding:6px var(--s-s); border:1px solid var(--hair); border-radius:var(--r-s);
  background:var(--card); font-size:.8125rem; color:var(--ink2);
}
.period b{ color:var(--ink); font-weight:600 }
.period .p-omez{ color:var(--ink2) }
.period .p-omez::before{ content:"· " }
.period .p-dates{ color:var(--muted); white-space:nowrap }
.period.is-now{ border-color:var(--ink); box-shadow:inset 3px 0 0 var(--ink) }
.period .p-now{
  font-size:.625rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--page); background:var(--ink); border-radius:99px; padding:2px 7px;
}

/* ── mřížka ──────────────────────────────────────────────────────────── */
/* Záhlaví dnů. Samotný drobný šedý text nad mřížkou splýval s pozadím.
   Odděluje ho podbarvený pás — podle pořadí bílé místo → podbarvení →
   rámečky se sahá po rámečku až nakonec, a tady není potřeba. */
.dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--s-2xs);
      background:var(--sunk); border-radius:var(--r-s);
      padding:7px 0; margin-bottom:var(--s-2xs) }
.dow abbr{ font-size:.6875rem; font-weight:700; letter-spacing:.1em;
           text-transform:uppercase; color:var(--ink2); text-decoration:none;
           padding-left:var(--s-xs) }
.dow abbr[data-w]{ color:var(--vi) }

.grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:var(--s-2xs);
       touch-action:pan-y }
.week-line{ grid-column:1/-1; height:1px; background:var(--hair2); margin:var(--s-3xs) 0 }

.cell{
  container-type:inline-size;
  position:relative; display:flex; flex-direction:column; gap:var(--s-3xs);
  min-height:var(--cell-h,122px); padding:var(--s-xs); text-align:left;
  background:transparent; border:0; border-radius:var(--r-m);
  font:inherit; color:inherit; cursor:pointer; overflow:hidden;
}
.cell.out{ opacity:.34; cursor:default; pointer-events:none }
.cell:hover:not(.out){ background:var(--sunk) }
.cell.f-ek{ background:var(--ek-bg) }
.cell.f-ca{ background:var(--ca-bg) }
.cell.f-nv{ background:var(--nv-bg) }
.cell.f-ek:hover{ box-shadow:inset 0 0 0 1px var(--ek-line) }
.cell.f-ca:hover{ box-shadow:inset 0 0 0 1px var(--ca-line) }
.cell.f-nv:hover{ box-shadow:inset 0 0 0 1px var(--nv-fg) }
/* Vybraný den. Kreslí se do vlastní vrstvy (::after), aby si nepřekážel
   se zlatým rámečkem dneška — ten leží v ::before. Dřív tu byla výjimka
   :not(.today), takže dnešek jako jediný den nedával najevo, že je vybraný.
   Na dnešku se prstenec vsune dovnitř zlatého podle pravidla
   vnitřní rádius = vnější − odsazení. */
.cell[aria-selected="true"]::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-m);
  box-shadow:inset 0 0 0 2px var(--ink); pointer-events:none;
}

/* Dnešek: celý zlatý, když den nemá barvu z jiného důvodu. Když ji má,
   zůstane jen tlustý zlatý rámeček — dvě výplně přes sebe nejdou.
   Rámeček je 4px, tedy dvojnásobek 2px prstence výběru. Oba se kreslí
   inset od téže hrany, takže když je dnešek zároveň vybraný, černý
   překryje vnější polovinu zlatého a vnitřní polovina zůstane vidět. */
.cell.today:not(.f-ek):not(.f-ca):not(.f-nv){ background:var(--dnes-bg) }
.cell.today:not(.f-ek):not(.f-ca):not(.f-nv) .d{ color:var(--dnes-fg) }
.cell.today::before{ content:""; position:absolute; inset:0; border-radius:var(--r-m);
                     box-shadow:inset 0 0 0 4px var(--dnes-line); pointer-events:none }

.d{ display:flex; align-items:center; gap:5px; font-size:.875rem; font-weight:500;
    font-variant-numeric:tabular-nums lining-nums; color:var(--ink); line-height:1 }
.cell.wknd .d{ color:var(--vi) }
.cell.holi .d{ color:var(--sv); font-weight:700 }
.cell.today .d{ font-weight:700 }
.hol-dot{ width:5px; height:5px; border-radius:99px; background:var(--sv); flex:0 0 auto }
.wk-dot{ width:5px; height:5px; border-radius:99px; background:var(--vi); opacity:.55; flex:0 0 auto }

.fast{ font-size:.75rem; font-weight:600; line-height:1.35;
       display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
       overflow:hidden }
.fast .mk{ font-size:.5625rem; margin-right:4px }
.fast.ek{ color:var(--ek-fg) } .fast.ca{ color:var(--ca-fg) } .fast.nv{ color:var(--nv-fg) }
.fast .nm{ font-family:var(--disp); font-size:.875rem; font-weight:600;
           overflow-wrap:anywhere }
.fast .to{ font-family:var(--ui); font-size:.6875rem; font-weight:500; opacity:.85;
           white-space:nowrap; margin-left:4px }
@container (max-width:132px){ .fast .to{ display:none } }
@container (max-width:112px){ .paran{ font-size:.625rem; padding:0 4px } }

.paran{ display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
        white-space:nowrap; font-size:.6875rem; font-weight:600;
        font-variant-numeric:tabular-nums; color:var(--pa-fg); background:var(--pa-bg);
        border:1px solid var(--pa-line); border-radius:var(--r-s); padding:1px 6px }

/* osa C — hodnost nese typografie, ne barva (liturgická konvence) */
.ev{ font-family:var(--disp); font-size:.8125rem; line-height:1.3; color:var(--ink2);
     overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ev.r3{ font-weight:600; color:var(--ink); white-space:normal;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.ev.r1{ font-style:italic; color:var(--muted); font-size:.78125rem }

/* značky pro telefon — na 51px sloupec se nevejde jméno, jen indikátor */
.marks{ display:none; gap:3px; align-items:center; margin-top:auto }
.mrk{ width:7px; height:7px; border-radius:99px; flex:0 0 auto }
.mrk.ek{ background:var(--ek-fg) }
.mrk.ca{ background:var(--ca-fg) }
.mrk.nv{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--nv-fg) }
.mrk.pa{ background:var(--pa-fg); border-radius:1px;
         clip-path:polygon(0 0,100% 50%,0 100%) }
.mrk.ev{ background:var(--muted); opacity:.5; width:5px; height:5px }

:root[data-density="compact"] .cell{ --cell-h:74px }
:root[data-density="compact"] .ev,
:root[data-density="compact"] .fast .to{ display:none }
:root[data-density="compact"] .fast{ -webkit-line-clamp:2 }
:root[data-density="compact"] .fast .nm{ font-size:.8125rem }

.legend{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-xs) var(--s-l);
         margin-top:var(--s-m); padding-top:var(--s-s);
         border-top:1px solid var(--hair2); font-size:.75rem; color:var(--muted) }
.li{ display:inline-flex; align-items:center; gap:7px }
.sw{ width:22px; height:15px; border-radius:4px; flex:0 0 auto }
.legend .seg{ margin-left:auto }

/* ── detail dne ──────────────────────────────────────────────────────── */
.detail{ margin-top:var(--s-l); background:var(--card); border:1px solid var(--hair);
         border-radius:var(--r-l); overflow:hidden; scroll-margin-top:var(--s-s) }
.dh{ padding:var(--s-m) var(--s-l); border-bottom:1px solid var(--hair2);
     display:flex; align-items:baseline; gap:var(--s-s); flex-wrap:wrap }
.dh .dd{ font-family:var(--disp); font-size:1.4rem; font-weight:500; letter-spacing:-.01em }
.dh .dw{ font-size:.8125rem; color:var(--muted) }
.badge{ font-size:.6875rem; font-weight:600; border-radius:99px; padding:2px 9px;
        border:1px solid currentColor }
.db{ padding:var(--s-2xs) var(--s-l) var(--s-m) }
.dr{ display:flex; gap:var(--s-m); padding:var(--s-s) 0; border-bottom:1px solid var(--hair2) }
.dr:last-child{ border-bottom:0 }
.dk{ flex:0 0 6.5em; font-size:.6875rem; font-weight:600; letter-spacing:.11em;
     text-transform:uppercase; color:var(--muted); padding-top:4px }
.dv{ flex:1 1 auto }
.dv .big{ font-family:var(--disp); font-size:1.15rem; font-weight:600 }
.dv .sub{ font-size:.8125rem; color:var(--ink2) }
.dv ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-xs) }
.dv li{ display:flex; gap:var(--s-s); align-items:baseline }
.kat{ flex:0 0 5.5em; font-size:.625rem; font-weight:600; letter-spacing:.07em;
      text-transform:uppercase; color:var(--muted); padding-top:3px }
.pbox{ display:inline-flex; align-items:baseline; gap:var(--s-xs); color:var(--pa-fg);
       background:var(--pa-bg); border:1px solid var(--pa-line);
       border-radius:var(--r-s); padding:5px 11px; font-variant-numeric:tabular-nums }
.pbox b{ font-size:1.0625rem; font-weight:600 }
.pbox i{ font-style:normal; font-size:.75rem; opacity:.9 }

/* ── karty přehledu (pod kalendářem) ─────────────────────────────────── */
.snapshot{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
           gap:1px; background:var(--hair2); border:1px solid var(--hair);
           border-radius:var(--r-l); overflow:hidden }
.scell{ background:var(--card); padding:var(--s-m) var(--s-l);
        display:flex; flex-direction:column; gap:var(--s-3xs) }
.scell .eyebrow{ margin-bottom:var(--s-2xs) }
.sbig{ font-family:var(--disp); font-size:1.45rem; font-weight:500; line-height:1.2;
       letter-spacing:-.01em; overflow-wrap:anywhere }
.ssub{ font-size:.8125rem; color:var(--muted) }
.scount{ font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase }

/* ── agenda ──────────────────────────────────────────────────────────── */
.agenda{ display:flex; flex-direction:column; background:var(--card);
         border:1px solid var(--hair); border-radius:var(--r-l); overflow:hidden }
.ag{ display:flex; gap:var(--s-s); padding:var(--s-s) var(--s-m);
     border-bottom:1px solid var(--hair2); align-items:flex-start }
.ag:last-child{ border-bottom:0 }
.ag.f-ek{ background:var(--ek-bg) } .ag.f-ca{ background:var(--ca-bg) }
.ag.f-nv{ box-shadow:inset 3px 0 0 var(--ek-line) }
.agd{ flex:0 0 3.2em; font-variant-numeric:tabular-nums lining-nums }
.agd b{ display:block; font-size:1.0625rem; font-weight:600; line-height:1.15 }
.agd i{ font-style:normal; font-size:.625rem; letter-spacing:.09em;
        text-transform:uppercase; color:var(--muted) }
.ag.wknd .agd b, .ag.wknd .agd i{ color:var(--vi) }
.ag.holi .agd b{ color:var(--sv) }
.agc{ flex:1 1 auto; display:flex; flex-direction:column; gap:3px }
.agc .ev{ white-space:normal }
.agc .fast{ -webkit-line-clamp:unset; display:block }

/* ── sekce ───────────────────────────────────────────────────────────── */
.sec{ margin-top:var(--s-2xl) }
.sec>.eyebrow{ margin-bottom:var(--s-xs) }
.sec>h2{ margin-bottom:var(--s-xs) }
.sec>.note{ margin-bottom:var(--s-m) }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));
        gap:var(--s-s) }
.card{ background:var(--card); border:1px solid var(--hair); border-radius:var(--r-l);
       padding:var(--s-m) }
.card h3{ margin-bottom:var(--s-2xs) }
.card p{ font-size:.8125rem; color:var(--muted); line-height:1.6 }
.card .src{ display:block; margin-top:var(--s-xs); font-size:.6875rem; color:var(--muted);
            padding-top:var(--s-xs); border-top:1px solid var(--hair2) }
/* Věnování. Vysázeno displejovým řezem a na střed — je to jediné místo
   na webu, které nic nesděluje ani neovládá. */
.venovani{
  max-width:44ch; margin:var(--s-l) auto 0; padding-top:var(--s-m);
  border-top:1px solid var(--hair2);
  font-family:var(--disp); font-size:1.0625rem; line-height:1.55;
  text-align:center; text-wrap:pretty; color:var(--ink2);
}

.scroll{ overflow-x:auto }
.tbl{ width:100%; border-collapse:collapse; font-size:.8125rem }
.tbl th{ text-align:left; font-size:.6875rem; letter-spacing:.11em; text-transform:uppercase;
         color:var(--muted); font-weight:600; padding:0 var(--s-s) var(--s-xs) 0;
         border-bottom:1px solid var(--hair); white-space:nowrap }
.tbl td{ padding:var(--s-xs) var(--s-s) var(--s-xs) 0; border-bottom:1px solid var(--hair2);
         vertical-align:top; color:var(--ink2) }
.tbl td:first-child{ color:var(--ink); font-weight:500 }

/* ══ TELEFON ══════════════════════════════════════════════════════════
   Sedm sloupců na 360 px dává 51 px na sloupec — dost na číslo dne
   a indikátor, ne na text. Jméno se přesouvá do detailu a do agendy;
   barevné kódování zůstává úplně stejné. */
@media (max-width:640px){
  .wrap{ padding:var(--s-m) var(--s-s) var(--s-2xl);
         padding-left:max(var(--s-s), env(safe-area-inset-left));
         padding-right:max(var(--s-s), env(safe-area-inset-right)) }
  .grid{ gap:3px }
  .dow{ gap:3px }
  .dow abbr{ padding-left:0; text-align:center; display:block; font-size:.625rem }
  .cell{ --cell-h:56px; padding:5px 3px; align-items:center; gap:2px;
         border-radius:var(--r-s) }
  .cell .d{ font-size:.9375rem; justify-content:center; gap:3px }
  .cell .fast, .cell .ev, .cell .paran{ display:none }
  .marks{ display:flex }
  .cell.today::before, .cell.f-nv,
  .cell[aria-selected="true"]::after{ border-radius:var(--r-s) }
  .seg.density{ display:none }
  .months a{ font-size:.8125rem; padding:0 5px }
  .year > summary{ padding:0 var(--s-xs) }
  .year-menu{ grid-template-columns:repeat(3,1fr); min-width:210px }
  .period{ width:100%; flex-wrap:wrap; gap:4px var(--s-xs) }
  .legend{ gap:var(--s-2xs) var(--s-m); font-size:.6875rem }
  .dh,.db{ padding-left:var(--s-m); padding-right:var(--s-m) }
  .dr{ flex-direction:column; gap:var(--s-2xs) }
  .dk{ flex:none }
  .dv li{ flex-direction:column; gap:0 }
  .kat{ flex:none; padding-top:0 }
  .scell{ padding:var(--s-s) var(--s-m) }
}
@media (max-width:360px){ .cell{ --cell-h:50px; padding:4px 2px } }

::view-transition-old(grid),::view-transition-new(grid){ animation-duration:.18s }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important;
  scroll-behavior:auto!important } }