/* "Jak to funguje" (R-29) - the styles of the third screen and of its entry links on the other two,
   moved from the design mockup by build step 6c (owner fork 4: its own file beside page.css). Tokens
   only: every colour, size and duration is a variable from frontend/tokens.css. */

/* ---------- the screen: one reading column, centred on wide screens like the stations screen ---------- */
.page--explain { container: col / inline-size; }
.jf-body { display: grid; gap: var(--space-4); align-content: start; min-inline-size: 0; }
@container zl (min-width: 900px) {
  /* the side contents beside one reading column of at most 720 px, the pair centred */
  .page--explain { grid-template-columns: 15rem minmax(0, 720px); justify-content: center; column-gap: var(--space-8); }
}
.jf-lede { margin-block-start: 0; }
.jf-section > p:not([class]) { max-inline-size: 65ch; }

/* table of contents: three groups, plain links */
.jf-toc { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.jf-toc-title { font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-water-text); text-transform: uppercase; letter-spacing: 0.06em; }
.jf-toc ul { display: grid; gap: var(--space-1); }
.jf-toc a { display: inline-block; min-block-size: 24px; }
@container col (min-width: 600px) { .jf-toc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- the side contents: wide screens only (owner, 2026-10-07) ----------
   From 900 px the contents card gives way to a column on the left of the reading column, sticky while
   the reader scrolls, with the full section titles. It replaced a sticky top bar the owner judged
   poor. Phones keep the card and have no side column. The column scrolls on its own if it is ever
   taller than the window, so no link is out of reach. */
.jf-side { display: none; }
@container zl (min-width: 900px) {
  .jf-side { display: block; }
  .jf-side-nav { position: sticky; inset-block-start: calc(var(--header-h) + var(--space-4)); max-block-size: calc(100dvh - var(--header-h) - var(--space-8)); overflow-y: auto; display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .jf-side-head { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-lg); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); }
  .jf-side-group { display: grid; gap: var(--space-1); }
  .jf-side-title { font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-water-text); text-transform: uppercase; letter-spacing: 0.06em; }
  .jf-side-group ul { display: grid; gap: 2px; }
  .jf-side-link { display: block; min-block-size: 24px; padding: 2px var(--space-2); font-size: var(--text-sm); line-height: 1.35; color: var(--color-text-2); text-decoration: none; border-inline-start: 3px solid transparent; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: border-color var(--duration-fast) ease-out, background-color var(--duration-fast) ease-out; }
  .jf-side-link:hover { color: var(--color-link); background: var(--color-canvas); text-decoration: underline; }
  .jf-side-link:active { color: var(--color-text); }
  .jf-side-link:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
  /* the section being read: a heavier word and a rule at its edge - never colour alone */
  .jf-side-link[aria-current="location"] { color: var(--color-text); font-weight: var(--weight-strong); border-inline-start-color: var(--color-water-deep); background: var(--color-canvas); }
  .page--explain .jf-toc { display: none; }
  .page--explain .jf-section { scroll-margin-block-start: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .jf-side-link { transition: none; } }

/* ---------- the exact-rule part ("Přesně"): a native disclosure, closed by default ---------- */
.presne { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-2); }
.presne-summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-link); min-block-size: 24px; padding-block: var(--space-1); border-radius: var(--radius-sm); }
.presne-summary:hover { text-decoration: underline; }
.presne-summary:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.presne-body { padding-block: var(--space-2); font-size: var(--text-sm); color: var(--color-text-2); }
.presne-list { display: grid; gap: var(--space-2); }
.presne-list > li { padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-border); }

/* the kind of a quoted value - a word, never a colour alone; no severity colours here */
.kind { display: inline-block; padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-text-2); background: var(--color-canvas); white-space: nowrap; }
.kind--setting { border-style: dashed; }
.kind--family { background: var(--color-sunk); }
.qv strong { color: var(--color-text); }
.example-tag { display: inline-block; padding: 0 var(--space-2); border: 1px dashed var(--color-text-muted); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-text-2); text-transform: uppercase; letter-spacing: 0.06em; }

/* figures: the drawing and its caption, the caption being part of the text equivalent */
.jf-figure { margin: 0; display: grid; gap: var(--space-1); }
.jf-figure .drawing { background: var(--color-surface); border-radius: var(--radius-sm); }

/* ---------- S34: from the sources through the signals to the verdict ---------- */
.jf-diagram { display: grid; gap: var(--space-2); }
.jf-lane { font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-text-2); }
.jf-lane--heads { margin-block-start: var(--space-3); }
.jf-flow { display: grid; gap: var(--space-2); padding-inline-start: var(--space-4); border-inline-start: 4px solid var(--color-water); border-radius: var(--radius-sm); }
.jf-flow--heads { border-inline-start-color: var(--sev-headsup-fill); }
.jf-src { display: grid; gap: var(--space-1); }
.jf-src-name { font-size: var(--text-sm); font-weight: var(--weight-strong); }
.jf-sigs { display: grid; gap: 2px; }
.jf-sig { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-1) var(--space-2); background: var(--color-canvas); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.sig-state { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-2); }
.shape--none circle { fill: none; stroke: var(--color-text-muted); stroke-width: 1.2; }
.jf-arrow { color: var(--color-water-text); font-weight: var(--weight-display); padding-inline-start: var(--space-2); }
.jf-verdict { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.jf-verdict-why { font-size: var(--text-sm); color: var(--color-text-2); }

/* ---------- S35: the age bars reuse the drought meters; the limit sits at half the track ---------- */
.jf-bars { display: grid; gap: var(--space-3); }
/* an over-limit bar is hatched in the stale ink, so "older than the limit" is visible on the track */
.jf-age--old .meter-fill { background: repeating-linear-gradient(45deg, var(--sev-stale-on) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1.5px var(--sev-stale-on); }
.jf-age .meta .shape { vertical-align: -2px; }
.jf-window { fill: var(--color-sunk); stroke: var(--color-border-strong); stroke-dasharray: 3 3; }
.jf-window--travel { fill: var(--color-water); fill-opacity: 0.35; stroke: var(--color-water-deep); stroke-dasharray: none; }
.jf-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.jf-line--canary { stroke: var(--color-text-2); }
.jf-line--level { stroke: var(--color-water-deep); }

/* ---------- S36: the readings and the end timeline ---------- */
.jf-reading { fill: var(--color-surface); stroke: var(--color-text-2); stroke-width: 1.5; }
.jf-reading--above { fill: var(--color-water); stroke: var(--color-water-deep); }
.jf-reading--start { fill: var(--sev-1-fill); stroke: var(--sev-1-edge); stroke-width: 2; }
.jf-seg { stroke-width: 1.5; }
.jf-seg--active { fill: var(--sev-1-fill); stroke: var(--sev-1-edge); }
.jf-seg--easing { fill: var(--sev-1-fill); fill-opacity: 0.35; stroke: var(--sev-1-edge); stroke-dasharray: 4 3; }
.jf-seg--gap { fill: url(#jf-hatch); stroke: var(--color-border-strong); }
.jf-seg--clear { fill: var(--sev-normal-fill); stroke: var(--sev-normal-edge); }
.jf-end-mark { stroke: var(--color-text); stroke-width: 2; }

/* ---------- S37: one row per signal ---------- */
.jf-signals { display: grid; gap: var(--space-4); }
.jf-signal { display: grid; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); }
.jf-signal:first-child { border-block-start: 0; padding-block-start: 0; }
.jf-signal-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.jf-signal-name { font-size: var(--text-base); font-weight: var(--weight-strong); }
.jf-kindline { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); color: var(--color-text-2); }
.jf-signal-state { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); }
.jf-meters { display: grid; gap: var(--space-3); }
.jf-meters .drawing.zeliv { max-inline-size: 200px; }
.jf-signal .drawing.zeliv { max-inline-size: 200px; }

/* ---------- S38: the travel schematic ---------- */
.jf-stream { fill: none; stroke: var(--color-water); stroke-width: 4; stroke-linecap: round; }

/* ---------- S39, S45: pick buttons ---------- */
.jf-picks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jf-pick { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 44px; padding: var(--space-1) var(--space-3); font: inherit; font-size: var(--text-sm); color: var(--color-text); background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--duration-fast) ease-out; }
.jf-pick:hover { background: var(--color-sunk); }
.jf-pick:active { background: var(--color-sunk); border-color: var(--color-text-2); }
.jf-pick:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.jf-pick[aria-pressed="true"] { background: var(--color-water-deep); border-color: var(--color-water-text); color: var(--color-surface); font-weight: var(--weight-strong); }
.jf-pick:disabled { opacity: 0.5; cursor: default; }
.jf-day-detail, .jf-path-detail { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); background: var(--color-sunk); border-radius: var(--radius-sm); }
.obs--picked { stroke-width: 2.5; }
.jf-sets { stroke-width: 3; }
.jf-sets--hi { stroke: var(--color-text); }
.jf-sets--lo { stroke: var(--color-text); stroke-dasharray: 3 2; }

/* ---------- S40 ---------- */
.jf-gaps { display: grid; gap: var(--space-2); }
.jf-gaps > li { padding: var(--space-2) var(--space-3); background: var(--color-canvas); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); }
.jf-gap-what { font-weight: var(--weight-strong); }

/* ---------- S41 ---------- */
.jf-rhythms { display: grid; gap: var(--space-3); }
.jf-rhythm-name { font-size: var(--text-sm); font-weight: var(--weight-strong); }
.jf-rhythm-now { font-size: var(--text-sm); color: var(--color-water-text); font-weight: var(--weight-strong); }
.jf-usual { fill: var(--color-water); fill-opacity: 0.35; stroke: var(--color-water-deep); }

/* ---------- S42 ---------- */
.jf-sum { font-size: var(--text-sm); }
.jf-slope { stroke: var(--color-water-deep); stroke-width: 2; stroke-dasharray: 6 4; }
.jf-dot { fill: var(--color-water); stroke: var(--color-water-deep); stroke-width: 1.2; }

/* ---------- S43 ---------- */
.jf-kinds { display: grid; gap: var(--space-2); }
.jf-kindrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what value" "tag source"; gap: 2px var(--space-3); align-items: baseline; padding-block-end: var(--space-2); border-block-end: 1px solid var(--color-border); }
.jf-kindrow-what { grid-area: what; font-size: var(--text-sm); font-weight: var(--weight-strong); }
.jf-kindrow-value { grid-area: value; font-size: var(--text-sm); text-align: end; }
.jf-kindrow .kind { grid-area: tag; justify-self: start; }
.jf-kindrow .meta { grid-area: source; text-align: end; }

/* ---------- the catchment outline (T9) - drawn on "Kde a co měříme" (where.css) since build step 6e ---------- */
.jf-catchment { fill: var(--color-sunk); stroke: var(--color-text-muted); stroke-width: 1.2; stroke-dasharray: 5 4; }

/* ---------- S45: the data path, phone first: each stage a row of compact nodes, stages stacked ---------- */
.jf-path { display: grid; gap: var(--space-1); }
.jf-col { display: grid; gap: var(--space-1); }
.jf-col + .jf-col::before { content: "↓"; color: var(--color-water-text); font-weight: var(--weight-display); line-height: 1; }
.jf-col-title { font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-water-text); text-transform: uppercase; letter-spacing: 0.06em; }
.jf-nodes { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.jf-node { display: grid; gap: 2px; padding: var(--space-1) var(--space-2); font-size: var(--text-xs); background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--duration-fast) ease-out; }
.jf-rows { display: grid; gap: var(--space-1); }
.jf-row { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "role" "path"; gap: 2px; inline-size: 100%; min-block-size: 44px; padding: var(--space-2) var(--space-3); font: inherit; text-align: start; color: var(--color-text); background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--duration-fast) ease-out; }
.jf-row:hover { background: var(--color-sunk); }
.jf-row:active { border-color: var(--color-text-2); }
.jf-row:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.jf-row[aria-pressed="true"] { border: 2px solid var(--color-water-deep); background: var(--color-surface); }
.jf-row-name { grid-area: name; font-size: var(--text-sm); font-weight: var(--weight-strong); }
.jf-row-role { grid-area: role; font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-text-2); }
.jf-row-path { grid-area: path; font-size: var(--text-xs); color: var(--color-text-muted); }
.jf-node--down { border-style: dashed; border-color: var(--sev-stale-on); }
.jf-node-note, .jf-node-sigs { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-2); flex-wrap: wrap; }
/* a pick dims the other nodes by their frame and a muted token - never by opacity, which would
   take their text below 4.5:1 */
.jf-path--picked .jf-node { color: var(--color-text-muted); border-style: dashed; }
.jf-path--picked .jf-node--lit { color: var(--color-text); border: 2px solid var(--color-water-deep); background: var(--color-surface); }
@media (prefers-reduced-motion: reduce) { .jf-node, .jf-pick, .jf-row { transition: none; } }

/* ---------- the entry points on the overview and stations screens (S33) ---------- */
.jf-entry-line { font-size: var(--text-sm); }
.jf-entry { display: inline-block; min-block-size: 24px; font-size: var(--text-sm); }
.screen-head .jf-entry { justify-self: start; }