/* ============================================================
   modules.css — interaktivní moduly
   Každý modul má vlastní kompozici odvozenou od svého obsahu.
   Žádná mřížka stejných karet.
   ============================================================ */

/* @@LANE1@@ */
/* @@LANE2A@@ */
/* ============================================================
   STILL POINT
   ============================================================ */
.still { display: grid; gap: clamp(24px, 3vw, 40px); }
.still__stage {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 28px);
}
.still__canvas { width: 100%; height: clamp(180px, 26vh, 280px); display: block; }
.still__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-4);
  padding-top: var(--s-4); border-top: 1px solid var(--line);
}
.still__rate {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 1.05rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.still__steps { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); }
.still__step {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-top: 2px solid var(--line);
  text-align: left;
  color: var(--ink-3);
  min-height: 56px;
  transition: border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.still__step[aria-current="true"] { border-top-color: var(--tide); color: var(--ink); }
.still__step b { display: block; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; margin-bottom: var(--s-2); font-weight: 500; }
.still__desc { min-height: 4.2em; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 640px) { .still__steps { grid-template-columns: 1fr; gap: 0; } }

/* ============================================================
   KOLO SEZENÍ — 75 minut ve třech částech

   Prostorový kruhový graf v canvasu vlevo, ovládání a text
   vpravo. Výchozí stav (bez JS nebo než se scéna chytí) je
   prostý svislý seznam tří částí — obsah je celý v HTML,
   graf je vrstva navíc, ne nosič informace.

   Barevný postup 1 → 2 → 3 není dekorace: střední tón
   (příchod) → nejhlubší (práce) → nejsvětlejší (návrat).
   ============================================================ */
.wheel {
  display: grid;
  gap: clamp(32px, 4vw, 72px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1000px) {
  .wheel { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
}

/* ---------- scéna ------------------------------------------
   Než modul potvrdí, že kreslí, scéna v layoutu neexistuje.
   Prázdný čtverec je horší než žádný.                        */
.wheel__stage { display: none; }
[data-wheel][data-ready="1"] .wheel__stage { display: block; }

.wheel__disc {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / .84;
  touch-action: pan-y;          /* svislý scroll patří stránce */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;            /* tažení nesmí vybírat text */
}
.wheel__disc:active { cursor: grabbing; }
.wheel__disc canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* Odečet uprostřed díry. Polohu píše JS podle promítnutého
   středu, aby držel i při naklonění a otáčení.               */
.wheel__core {
  position: absolute;
  left: var(--core-x, 50%);
  top: var(--core-y, 50%);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  pointer-events: none;
  text-align: center;
}
.wheel__core-num {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.wheel__core-unit {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.wheel__core-span {
  margin-top: var(--s-2);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--ink-meta);
  font-variant-numeric: tabular-nums;
}

/* ---------- šipky a odečet pod kolem -----------------------
   Nepovinná část: existuje jen tam, kde je v HTML. Její jediná
   práce je říct „tohle se přepíná a části jsou tři“ dřív, než
   na to člověk přijde sám. Bez JS se neukáže — přepínat by
   stejně nebylo co.                                          */
.wheel__nav { display: none; }
[data-wheel][data-ready="1"] .wheel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.wheel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line-ui);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              background var(--dur-micro) var(--ease-out);
}
.wheel__btn:hover { border-color: var(--tide); color: var(--tide); background: var(--surface); }
/* Nedostupné tlačítko se má POZNAT, ne zmizet: 34 % krytí
   dělalo ze štítku i šipky světle šedou skvrnu (2,2:1).
   Že je mimo hru, řekne kurzor a rám — písmo zůstane čitelné. */
.wheel__btn[aria-disabled="true"] { opacity: .82; pointer-events: none; }
.wheel__count {
  min-width: 5.5ch;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.wheel__count span { color: var(--ink); }

/* osa pod kolem — říká, kudy se čas na kole čte */
.wheel__scale {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-4);
  font-size: .6875rem; letter-spacing: .1em;
  color: var(--ink-meta);
}
.wheel__scale-line {
  flex: 1; height: 1px; background: var(--line-strong);
}

/* ---------- legenda = ovládání ----------------------------- */
.wheel__panel { min-width: 0; }
.wheel__legend { display: none; }
[data-wheel][data-ready="1"] .wheel__legend { display: grid; }

.wseg {
  position: relative;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-4) calc(var(--s-4) + 3px);
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: left;
  min-height: 60px;
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out);
  overflow: hidden;
}
.wseg:last-of-type { border-bottom: 1px solid var(--line); }
/* PŘÍLIV — podklad stoupá zdola, nikdy se nezvedá karta */
.wseg::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--surface);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--dur-tide) var(--ease-out);
}
.wseg > * { position: relative; z-index: 1; }
.wseg:hover::before,
.wseg:focus-visible::before { transform: scaleY(1); }
.wseg:hover { color: var(--ink); }
.wseg[aria-selected="true"] { color: var(--ink); }
.wseg[aria-selected="true"]::before { transform: scaleY(1); }

.wseg__mark {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--seg, var(--tide));
  box-shadow: inset 0 0 0 1px rgba(16, 28, 24, .10);
  transition: transform var(--dur-ui) var(--ease-out);
}
.wseg[aria-selected="true"] .wseg__mark { transform: scale(1.35); }
.wseg__name { font-size: var(--fs-body); letter-spacing: -.01em; }
.wseg__min {
  font-size: .8125rem; letter-spacing: .06em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
/* VYBRANÝ ŘÁDEK SE NESMÍ ROZSVÍTIT DO PASTELU.
   Odečet minut se při výběru přebarvoval na --seg, tedy na
   #6FA48C nebo #A9C7B6 — 2,85:1 a 1,82:1 na bílé. tokens.css
   u těch odstínů výslovně píše „nikdy jako text“. Barvu části
   nese značka vedle (.wseg__mark), číslo zůstane inkoustem
   a jen ztmavne.                                            */
.wseg[aria-selected="true"] .wseg__min { color: var(--ink); }
/* podíl části na sezení — tenký pruh na spodní hraně řádku */
.wseg__meter {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  grid-column: 1 / -1;
  background: var(--line);
}
.wseg__meter i {
  display: block; height: 100%; width: var(--w, 0%);
  background: var(--seg, var(--tide));
  opacity: .34;
  transform-origin: 0 50%;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.wseg[aria-selected="true"] .wseg__meter i { opacity: 1; }

/* ---------- panel jedné části ------------------------------ */
.wpan { padding-top: clamp(24px, 3vw, 40px); }
[data-wheel][data-ready="1"] .wpan { display: none; }
[data-wheel][data-ready="1"] .wpan[data-active] { display: block; }
[data-wheel][data-ready="1"] .wpan[data-active] {
  animation: w-enter calc(520ms * var(--motion)) var(--ease-out) both;
}
@keyframes w-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* bez JS: části pod sebou, oddělené vodoryskou */
.wpan + .wpan { border-top: 1px solid var(--line); margin-top: var(--s-7); }
[data-wheel][data-ready="1"] .wpan + .wpan { border-top: 0; margin-top: 0; }

.wpan__range {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.wpan__range::before {
  content: ""; width: 18px; height: 2px;
  background: var(--seg, var(--tide));
}
.wpan__title {
  font-size: var(--fs-h3);
  letter-spacing: var(--tr-h3);
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-4);
}
.wpan__lede {
  color: var(--ink-2);
  max-width: 52ch;
  margin-bottom: var(--s-6);
}

/* ---------- tři sloupce ------------------------------------ */
.wcols { display: grid; gap: var(--s-5); }
@media (min-width: 620px) { .wcols { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.wcol dt {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s-3); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.wcol dd {
  margin: 0; color: var(--ink-2);
  font-size: var(--fs-small); line-height: 1.55;
}
[data-wheel][data-ready="1"] .wcol dd:not([hidden]) {
  animation: w-swap calc(440ms * var(--motion)) var(--ease-out) both;
}
@keyframes w-swap {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- co platí po celou dobu ------------------------- */
.wheel__cta { display: grid; gap: var(--s-5); align-content: start; }
.wheel__foot {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--line);
  align-items: center;
}
@media (min-width: 900px) {
  .wheel__foot { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.wheel__assure {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .wheel__assure { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-6); } }
.wheel__assure li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3);
  color: var(--ink-2); font-size: var(--fs-small);
}
.wheel__assure svg { margin-top: .32em; color: var(--tide); }
.wheel__claim {
  font-size: var(--fs-h4);
  color: var(--ink);
  letter-spacing: -.01em;
  max-width: 22ch;
}

@media (max-width: 999px) {
  .wheel__disc { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .wseg { grid-template-columns: 10px 1fr auto; gap: var(--s-3); }
  .wpan__title { font-size: 1.5rem; }
}

/* @@LANE2B@@ */
/* @@LANE3@@ */
/* @@LANE4@@ */
/* ============================================================
   SEBE-TEST
   ============================================================ */
.selftest { max-width: 820px; }
.selftest__progress { height: 2px; background: var(--line); margin-bottom: clamp(32px, 5vh, 56px); position: relative; }
.selftest__progress i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: var(--tide); width: 0;
  transition: width var(--dur-ui) var(--ease-out);
}
.selftest__step { display: grid; gap: var(--s-6); justify-items: start; }
.selftest__step[hidden] { display: none; }
.selftest__count { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; color: var(--ink-3); }
.selftest__q { font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); max-width: 22ch; }
.selftest__choices { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; max-width: 420px; width: 100%; }
.selftest__choice {
  min-height: 64px; padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-ui); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-size: 1.05rem; font-weight: 500;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.selftest__choice:hover { border-color: var(--tide); color: var(--tide); }
.selftest__choice[data-chosen="true"] { background: var(--tide); border-color: var(--tide); color: #fff; }
.selftest__back { color: var(--ink-3); min-height: 44px; padding-inline: var(--s-2); text-decoration: underline; text-underline-offset: 4px; }
.selftest__back:hover { color: var(--ink); }

.selftest__result { display: grid; gap: var(--s-6); }
.selftest__result[hidden] { display: none; }
.selftest__areas { display: grid; gap: var(--s-3); }
.selftest__area {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-4);
  padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: var(--ink);
  border-left: 3px solid var(--area, var(--tide));
  transition: border-color var(--dur-micro) var(--ease-out);
}
.selftest__area:hover { border-color: var(--tide); border-left-color: var(--area, var(--tide)); }
.selftest__area b { font-size: var(--fs-h4); font-weight: 500; display: block; }
.selftest__area > span > span { color: var(--ink-3); font-size: var(--fs-small); }
.selftest__area svg { color: var(--tide); }

/* ============================================================
   ČASOVÁ OSA
   ============================================================ */
.timeline__track { display: grid; gap: 0; }
@media (min-width: 900px) { .timeline__track { grid-template-columns: repeat(4, 1fr); } }
.tl-node {
  position: relative;
  padding: var(--s-6) var(--s-6) var(--s-7) 0;
  border-top: 1px solid var(--line);
}
.js-anim .tl-node {
  transition: opacity calc(var(--dur-reveal) * var(--motion)) var(--ease-out),
              transform calc(var(--dur-reveal) * var(--motion)) var(--ease-out);
}
.js-anim .tl-node:not(.is-revealed) { opacity: 0; transform: translateY(10px); }
.tl-node::before {
  content: ""; position: absolute; left: 0; top: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-ui);
  transition: background var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.tl-node.is-revealed::before { background: var(--tide); transform: scale(1.25); }
.tl-node__year {
  font-family: var(--font-mono); font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500; color: var(--ink); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--s-2);
}
.tl-node__title { font-size: var(--fs-h4); color: var(--ink); margin-bottom: var(--s-2); }
.tl-node__who { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-4); }
.tl-node__glyph { width: 46px; height: 46px; color: var(--ink-3); margin-bottom: var(--s-4); }
.tl-node p { color: var(--ink-2); font-size: var(--fs-small); }

/* ============================================================
   CESTA K ÚLEVĚ — 4 fáze
   ============================================================ */
.journey { display: grid; gap: 0; }
@media (min-width: 880px) { .journey { grid-template-columns: repeat(4, 1fr); } }
.journey__step {
  position: relative; text-align: left;
  padding: var(--s-6) var(--s-6) var(--s-7) 0;
  border-top: 2px solid var(--line);
  color: var(--ink-3);
  transition: border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.journey__step.is-on { border-top-color: var(--tide); color: var(--ink-2); }
.journey__no { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; font-weight: 500; color: var(--ink-3); }
.journey__step.is-on .journey__no { color: var(--tide); }
.journey__title { font-size: var(--fs-h4); color: var(--ink); margin: var(--s-3) 0; }
.journey__step p { font-size: var(--fs-small); max-width: 34ch; }

/* ============================================================
   MAJÁK A MOŘE
   ============================================================ */
.lighthouse__canvas {
  width: 100%; aspect-ratio: 16 / 9;
  display: block; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface);
  cursor: crosshair; touch-action: none;
}
.lighthouse__meter { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-4); }

/* ============================================================
   FAQ — nativní <details>, funguje i bez JS
   ============================================================ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: var(--s-4);
  padding: clamp(18px, 2.4vw, 26px) 0;
  min-height: 56px; cursor: pointer;
  font-size: var(--fs-h4); color: var(--ink); font-weight: 500;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q svg { color: var(--ink-3); transition: transform var(--dur-ui) var(--ease-out); justify-self: end; }
.faq__item[open] .faq__q svg { transform: rotate(45deg); color: var(--tide); }
.faq__item[open] .faq__q { color: var(--tide); }
.faq__a { padding-bottom: clamp(20px, 2.6vw, 30px); }
.faq__a p { color: var(--ink-2); }
.faq__a p + p { margin-top: var(--s-4); }

/* ============================================================
   PRVNÍ NÁVŠTĚVA KROK ZA KROKEM
   ============================================================ */
.steps { display: grid; gap: 0; counter-reset: step; }
@media (min-width: 780px) { .steps { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); } }
.steps__item {
  position: relative;
  padding: var(--s-5) 0 var(--s-5) 52px;
  border-bottom: 1px solid var(--line);
}
.steps__item::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: calc(var(--s-5) + .2em);
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 500;
  color: var(--tide); letter-spacing: .08em;
}
.steps__item h4 { color: var(--ink); margin-bottom: var(--s-2); }
.steps__item p { color: var(--ink-2); font-size: var(--fs-small); }

/* ============================================================
   OBJEDNÁNÍ — tři cesty
   ============================================================ */
.ways { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.way { min-width: 0; }
@media (min-width: 820px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.way {
  display: grid; align-content: start; gap: var(--s-4);
  padding: clamp(20px, 2.8vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.way--primary { border-color: var(--tide); }
.way__icon { width: 28px; height: 28px; color: var(--tide); }
.way__title { font-size: var(--fs-h4); color: var(--ink); }
.way p { color: var(--ink-2); font-size: var(--fs-small); }
.way__value {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500;
  color: var(--ink); text-decoration: none; word-break: break-word;
  min-height: 44px; display: inline-flex; align-items: center;
}
.way__value:hover { color: var(--tide); }

/* ============================================================
   KDE MĚ NAJDETE
   ============================================================ */
.place { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: minmax(0, 1fr); }
.place > * { min-width: 0; }
@media (min-width: 880px) { .place { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.place__map {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: grid; place-content: center; justify-items: center; gap: var(--s-4);
  text-align: center; padding: var(--s-6); color: var(--ink-3);
}
.place__list { display: grid; gap: var(--s-5); }
.place__list dt { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s-2); }
.place__list dd { margin: 0; color: var(--ink-2); }

/* ============================================================
   PLACEHOLDER — viditelně označený doplněk
   ============================================================ */
.todo {
  display: inline-block; max-width: 100%; overflow-wrap: anywhere;
  padding: 5px var(--s-3);
  border-radius: var(--radius);
  background: var(--sand);
  border: 1px dashed var(--line-ui);
  font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .04em;
  color: var(--ink-2);
  line-height: 1.4;
}

/* ============================================================
   REFERENCE — visící citace bez karet
   (sekce je vypnutá, dokud nebudou skutečné reference)
   ============================================================ */
.voices__track { display: flex; gap: clamp(32px, 5vw, 72px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-5); }
.voice { flex: none; width: min(440px, 82vw); scroll-snap-align: start; }
.voice__text { font-size: var(--fs-h3); line-height: 1.32; letter-spacing: var(--tr-h3); color: var(--ink); }
.voice__by { margin-top: var(--s-5); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.voices__nav { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.voices__btn {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--line-ui); border-radius: var(--radius); color: var(--ink);
}
.voices__btn:disabled { opacity: .82; cursor: default; }