/* src/static/styles/pages/how-it-works.css (owner: Zo werkt het Z).
   Zo werkt het / How it works only, after mockup C (restore2): the jump
   links in the page head, the detailed ritual (C 5.4), the schedule table
   and the day bar slot (C 5.5) and page details. Shared pieces come from
   style.css: page head, in-short, card grid (recognition), split, readout,
   receipt, steps, reviews, FAQ and the label recipe. */
@layer page {
  /* Jump links under the page head ("Op deze pagina", C 4.3): one row from
     wide screens, 44 px rows when they wrap */
  .jumps { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); margin-block-start: var(--space-5); }
  .jumps ul { display: flex; flex-wrap: wrap; column-gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
  .jumps .link-arrow { display: inline-block; padding-block: var(--space-3); line-height: 1.45; }

  /* Detailed ritual: always vertical; from 60rem a sticky intro in columns
     1 to 4 and the steps in 5 to 12. Nodes copy the strip's; connectors are
     borders so they survive forced colours. 01 → 02 is accent, into and out
     of the conditional step 05 dashed, as in the strip. */
  .ritual-detailed { margin-block-start: var(--space-6); }
  .ritual-detailed__lead { max-inline-size: var(--measure); font: 400 var(--text-body)/1.65 var(--font-serif); }
  .ritual-detailed__pre { margin-block-start: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface); border-inline-start: 3px solid var(--ink); font: 400 1rem/1.45 var(--font-sans); }
  .ritual-detailed__pre p + p { margin-block-start: var(--space-2); }
  .ritual-detailed__pre p:not(.label) { line-height: 1.5; }
  .ritual-detailed__steps { margin: var(--space-7) 0 0; padding: 0; list-style: none; }
  .ritual-detailed__step { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--space-4); padding-block-end: var(--space-7); }
  .ritual-detailed__step:last-child { padding-block-end: 0; }
  .ritual-detailed__num { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1.5px solid var(--ink); border-radius: var(--radius-round); background: var(--paper); font: 400 var(--text-label)/1 var(--font-mono); }
  .ritual-detailed__step--conditional .ritual-detailed__num { border-style: dashed; }
  .ritual-detailed__step:not(:last-child)::before { content: ""; position: absolute; inset-block: 2.25rem 0; inset-inline-start: calc(1.125rem - 1px); border-inline-start: 2px solid var(--ink); }
  .ritual-detailed__step:first-child::before { border-inline-start-color: var(--accent); }
  .ritual-detailed__step--conditional:not(:last-child)::before,
  .ritual-detailed__step:has(+ .ritual-detailed__step--conditional)::before { border-inline-start-style: dashed; }
  .ritual-detailed__body { min-inline-size: 0; }
  .ritual-detailed__body h3 { max-inline-size: none; padding-block-start: 0.3rem; font: 700 var(--text-h3)/1.25 var(--font-sans); letter-spacing: 0; }
  .ritual-detailed__text { max-inline-size: var(--measure); margin-block-start: var(--space-2); font: 400 var(--text-body)/1.65 var(--font-serif); }
  .ritual-detailed__fail { max-inline-size: var(--measure); margin-block-start: var(--space-4); padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--accent-ink); font: 400 1rem/1.5 var(--font-sans); }
  .ritual-detailed__fail .label { display: flex; align-items: center; gap: var(--space-2); color: var(--accent-ink); }
  .ritual-detailed__fail .icon { inline-size: 1.125rem; block-size: 1.125rem; }
  .ritual-detailed__fail p:not(.label) { margin-block-start: var(--space-1); }
  .ritual-detailed__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); max-inline-size: var(--measure); margin-block-start: var(--space-4); font: 400 1rem/1.45 var(--font-sans); }
  .ritual-detailed__facts dt { padding-block-start: 0.1rem; color: var(--ink-3); font: 400 var(--text-label)/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
  .ritual-detailed__facts dt .todo { text-transform: none; letter-spacing: 0; }
  .ritual-detailed__facts dd { font-size: 0.9375rem; line-height: 1.45; }
  @container content (min-width: 60rem) {
    .ritual-detailed { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
    .ritual-detailed__intro { position: sticky; inset-block-start: var(--space-6); grid-column: 1 / 5; }
    .ritual-detailed__steps { grid-column: 5 / 13; margin-block-start: 0; }
  }

  /* Schedule (C 5.5): a real table from 48rem; below it stacked rows in one
     bordered list (the table roles in the markup keep the semantics). The
     accent dot (a graphic, 3.21:1) always sits next to its word. */
  .schedule__table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .schedule__table :is(th, td) { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-block-end: var(--hairline); text-align: start; vertical-align: top; font: 400 1rem/1.45 var(--font-sans); }
  .schedule__table thead th { padding-block-end: var(--space-2); border-block-end: var(--rule); color: var(--ink-2); font: 400 var(--text-label)/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
  .schedule__table tbody th { color: var(--ink); font: 400 var(--text-small)/1.5 var(--font-mono); white-space: nowrap; }
  .schedule__table td:last-child { color: var(--ink-2); font-size: 0.9375rem; }
  .schedule__table td:last-child strong { color: var(--ink); }
  .schedule__dot { display: inline-block; inline-size: 0; block-size: 0; margin-inline-end: 0.45em; border: 0.3125rem solid var(--accent); border-radius: var(--radius-round); vertical-align: 0.05em; }
  @container content (min-width: 48rem) {
    .schedule__table thead th:first-child { inline-size: 22%; }
    .schedule__table thead th:last-child { inline-size: 28%; }
  }
  @container content (max-width: 47.99rem) {
    .schedule__table, .schedule__table tbody { display: block; }
    .schedule__table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .schedule__table tbody { border: 1px solid var(--ink-3); }
    .schedule__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when then" "what what"; column-gap: var(--space-4); padding: var(--space-3) var(--space-4); }
    .schedule__table tr + tr { border-block-start: 1px solid var(--ink-3); }
    .schedule__table :is(th, td) { padding: 0; border: 0; }
    .schedule__table tbody th { grid-area: when; white-space: normal; }
    .schedule__table td:nth-of-type(1) { grid-area: what; margin-block-start: var(--space-1); }
    .schedule__table td:nth-of-type(2) { grid-area: then; text-align: end; }
  }

  /* Schedule example (motion option C, §B.7): a FAQ question under the
     legend. Opening it shows each check in --duration-base --ease-out with a
     --pause between: three good (solid), the failed ones (hollow, accent)
     and the alarm. 5 × 550 + 250 = 3000 ms, no JS; closing is the stop. The
     whole shorthand, delay included, stays inside the gate: the reset's
     kill-switch keeps animation-delay. Solid and hollow are borders, so they
     hold under forced colours. */
  .schedule__example { max-inline-size: 50rem; margin-block-start: var(--space-5); border-block-start: var(--hairline); }
  .checks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .checks__tick { block-size: 1.5rem; border: 0.25rem solid var(--ink); }
  .checks__tick--fail { inline-size: 0.5rem; border: 2px solid var(--accent); }
  .checks__alarm { margin-inline-start: var(--space-3); color: var(--ink-2); font: 400 0.9375rem/1.45 var(--font-sans); }
  .checks__alarm strong { color: var(--ink); }
  /* Chrome skips style in a closed details (content-visibility: hidden), so
     an animation would neither stop on closing nor replay on opening: a
     closed one gets display: none instead (both details, gated like FAQ A;
     the kill-switch misses ::details-content), and FAQ A's fade comes back
     through @starting-style. */
  @media (prefers-reduced-motion: no-preference) and (update: fast) {
    :is(.schedule__example, .route):not([open])::details-content { display: none; }
    @starting-style { .schedule__example[open]::details-content { opacity: 0; } }
    .schedule__example[open] :is(.checks__tick, .checks__alarm) { animation: checks-in var(--duration-base) var(--ease-out) calc(var(--i) * (var(--duration-base) + var(--pause))) backwards; }
  }
  @keyframes checks-in { from { opacity: 0; } }

  /* Customer route egg (step 05, route.njk, §B.7): a <details>; opening it
     plays the route once (4 × --duration-scene = 4.8 s), closing stops it.
     Without motion or JS it opens on the end frame. The frame is an unnamed
     inline-size container, so the drawing scales in cqi (§B.8). Screens sit
     end frame first in the DOM; each earlier one covers the next until its
     turn, then fades in the last 20 % of its quarter. */
  .route { margin-block-start: var(--space-3); }
  .route__toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; font: 700 1rem/1.4 var(--font-sans); text-decoration: underline 1px; text-underline-offset: 0.25em; cursor: pointer; list-style: none; }
  .route__toggle::-webkit-details-marker { display: none; }
  .route__toggle:hover { text-decoration-thickness: 2px; }
  .route__toggle .icon { inline-size: 1rem; block-size: 1rem; }
  .route[open] :is(.icon--play, .route__play), .route:not([open]) :is(.icon--close, .route__close) { display: none; }
  .route__figure { max-inline-size: 32rem; margin-block-start: var(--space-2); }
  .route__frame { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; overflow: clip; border: var(--control-border); pointer-events: none; user-select: none; }
  .route__screen { position: absolute; inset: 0; background: var(--paper); }
  .route__screen:not(:first-child) { opacity: 0; }
  .route__screen > * { position: absolute; inset-inline-start: calc(var(--x) * 1cqi); inset-block-start: calc(var(--y) * 1cqi); inline-size: calc(var(--w) * 1cqi); block-size: calc(var(--h) * 1cqi); }
  .route__bar { --x: 0; --y: 0; --w: 100; --h: 9; display: flex; align-items: center; padding-inline: 3cqi; border-block-end: var(--hairline); color: var(--ink-3); }
  .route__ph { background: var(--line); }
  .route__box { border: var(--hairline); }
  .route__btn { display: grid; place-items: center; border: var(--control-border); color: var(--ink-2); white-space: nowrap; }
  :is(.route__bar, .route__btn) { font: 400 clamp(0.625rem, 2.5cqi, 0.8125rem)/1 var(--font-mono); }
  .route__order::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--ink); }
  .route__cursor { position: absolute; inset: 0 auto auto 0; inline-size: 1rem; block-size: auto; translate: 78cqi 49.5cqi; transform-origin: 0 0; }
  .route__cursor path { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
  .route__caption { margin-block-start: var(--space-2); font: 400 1rem/1.45 var(--font-sans); }
  @media (forced-colors: active) { .route__ph { border: 1px solid CanvasText; } }
  @media (prefers-reduced-motion: no-preference) and (update: fast) {
    .route[open] .route__screen:not(:first-child) { animation: route-leave var(--duration-scene) var(--ease-in) calc(var(--k) * var(--duration-scene)) both; }
    .route[open] .route__cursor { animation: route-walk calc(4 * var(--duration-scene)) var(--ease-in-out) both; }
    .route[open] .route__order::after { animation: route-hover calc(4 * var(--duration-scene)) linear both; }
    .route[open] .route__stop { animation: route-stop calc(4 * var(--duration-scene)) var(--ease-out) both; }
  }
  /* The cursor waits, clicks (scale 0.9), waits for the screen to change and
     walks on; above the order button it hesitates and stays. */
  @keyframes route-leave { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes route-walk {
    0%, 4% { translate: 84cqi 52cqi; }
    15%, 40%, 65% { scale: 1; }
    16.5%, 41.5%, 66.5% { scale: 0.9; }
    18%, 43%, 68% { scale: 1; }
    15%, 27% { translate: 50cqi 38cqi; }
    40%, 52% { translate: 78cqi 47cqi; }
    65%, 77% { translate: 84cqi 38cqi; }
    90% { translate: 77.5cqi 49.5cqi; }
    93% { translate: 79cqi 48cqi; }
    100% { translate: 78cqi 49.5cqi; scale: 1; }
  }
  @keyframes route-hover { 0%, 85% { opacity: 0; } }
  @keyframes route-stop { 0%, 94% { opacity: 0; } }

  /* Day bar (C 5.5): 24 h axis from 48rem, live monitoring.js rows with a clock */
  .daybar { display: none; margin-block-start: var(--space-6); font: 400 var(--text-small)/1.5 var(--font-mono); }
  @container content (min-width: 48rem) { .daybar { display: block; } }
  .daybar :is(.daybar__band, .daybar__mark, li) { position: absolute; inset-inline-start: calc(var(--at) / 1440 * 100%); }
  .daybar__hours { position: relative; block-size: 1.5rem; margin: 0; color: var(--ink-3); }
  .daybar__hours span { position: absolute; inset-inline-start: calc(var(--h) / 24 * 100%); translate: -50% 0; }
  .daybar__hours span:first-child { translate: 0; }
  .daybar__hours span:last-child { translate: -100% 0; }
  .daybar__track { position: relative; block-size: 1rem; border-block: var(--rule); background: repeating-linear-gradient(to right, var(--ink-3) 0 1px, #0000 1px calc(100%/8)); }
  .daybar__band, .daybar__mark { inset-block: 0; }
  .daybar__band { inline-size: calc((var(--to) - var(--at)) / 1440 * 100%); border-inline: 1px solid var(--accent); background: var(--accent-tint); }
  .daybar__mark { border-inline-start: 2px solid var(--ink); }
  .daybar__labels { position: relative; block-size: calc(var(--n) * 1.5rem + 0.5rem); margin: 0; padding: 0; list-style: none; }
  .daybar__labels li { padding: calc(var(--i) * 1.5rem + 0.25rem) 0 0 var(--space-3); border-inline-start: 1px solid var(--ink-3); white-space: nowrap; }
  .daybar__window { color: var(--accent-ink); }
  .daybar__pulse { margin: var(--space-2) 0 0; text-align: end; }
  @container content (min-width: 72rem) {
    .daybar__track--pulse::after { content: ""; position: absolute; inset: auto 0 0; block-size: 0.3rem; background: repeating-linear-gradient(to right, var(--ink-3) 0 1px, #0000 1px calc(100%/288)); }
  }

  /* "Wat ik met de hand doe": the PHP situation from the home (A48) as one
     ruled card at reading width, spaced as the cards of "Voor wie dit is"
     (style.css .section--recognition) */
  .card-grid--1 { max-inline-size: var(--measure); }
  .card-grid--1 .card { gap: 0; }
  .card-grid--1 .card__label { margin-block-start: var(--space-4); }
  .card-grid--1 .card__answer { margin-block-start: var(--space-1); }

  /* Self-help steps: the plugin folder path */
}