/* ---------- example: one audit, week by week ---------- */
/* The log is real HTML and complete on its own: six entries (stamp, title,
   at most two sentences, at most two data rows). Below 1100px, or without
   JS, a track runs down its left edge through one waypoint per entry. From
   1100px a sticky chart (js/sections/example.js) runs the same route down
   the plate, with one readout (pictogram, figure, note) per waypoint beside
   it; the readout carries each entry's data rows, so the rows are hidden
   from the eye there (screen readers still get them). Default state is
   complete (all made good); .ex-live adds the pending states that scrolling
   then clears. */

.example { padding: var(--section-y) 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ex-note { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.45; color: var(--fg-3); }
.ex-note::before { content: ""; flex: none; width: 5px; height: 5px; background: currentColor; }
.ex-body { margin-top: clamp(56px, 6vw, 88px); }

.ex-log { max-width: 760px; margin: 0; padding: 0; list-style: none; }
.ex-entry { position: relative; padding: 0 0 clamp(44px, 5vw, 64px) 52px; }
.ex-entry:last-child { padding-bottom: 0; }
.ex-entry:not(:last-child)::before,
.ex-entry:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 34px; bottom: 6px; width: 1px; }
.ex-entry:not(:last-child)::before { background-image: linear-gradient(var(--fg-3) 50%, transparent 0); background-size: 1px 6px; }
.ex-entry:not(:last-child)::after { background: var(--fg); transform: scaleY(var(--p, 1)); transform-origin: top; }

/* the stamp: waypoint, week, stage; the stage is the brighter scan key */
.ex-stamp { display: flex; align-items: center; gap: 24px; margin-left: -52px; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; line-height: 1.45; text-transform: uppercase; color: var(--fg-3); transition: color 0.4s ease; }
.ex-st { color: var(--fg-2); transition: color 0.4s ease; }
.ex-stamp .sr-only { text-transform: none; }
.ex-wp { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 600; letter-spacing: 0; transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out), border-color 0.5s var(--ease-out); }
.ex-live .ex-entry:not(.is-passed) .ex-wp { background: var(--bg-2); border-color: var(--fg-3); color: var(--fg-2); }
.ex-live .ex-entry.is-current .ex-stamp,
.ex-live .ex-entry.is-current .ex-st { color: var(--fg); }
.ex-entry h3 { margin-top: 16px; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -0.03em; }
.ex-text { margin-top: 12px; max-width: 34em; color: var(--fg-2); }

.ex-readout { max-width: 34em; margin: 20px 0 4px; padding: 0; list-style: none; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.ex-readout li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 9px 0 10px; font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: 0.01em; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.ex-readout li + li { border-top: 1px solid var(--line); }
.ex-t { padding-top: 1px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); }
/* money saved or earned, and nothing else */
.ex-readout .ex-money { color: var(--gain); }

/* the chart: one course down the plate (js/sections/example.js), one readout beside it */
.ex-chart { display: none; }
.ex-chart-head { display: flex; align-items: center; gap: 12px; margin: 0; padding: 13px 18px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; color: var(--fg-3); }
.ex-tag { padding: 3px 8px; background: var(--fg); color: var(--bg); }
.ex-plate { display: grid; grid-template-columns: 284px minmax(0, 1fr); height: clamp(440px, calc(100svh - 300px), 560px); }

/* the course: a faint dot field, the course, waypoints, two label columns */
.ex-plot { position: relative; border-right: 1px solid var(--line); background-image: radial-gradient(circle, rgba(233, 234, 234, 0.075) 1px, transparent 1.4px); background-size: 16px 16px; background-position: 6px 6px; }
.ex-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ex-svg text { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; }
.ex-planned { fill: none; stroke: var(--fg); stroke-width: 1; stroke-dasharray: 2 4; stroke-opacity: 0.42; }
.ex-made { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.ex-grow-head { fill: none; stroke: var(--fg); stroke-width: 1; stroke-opacity: 0.42; }
.ex-svg .ex-grow { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; fill: var(--fg-3); }
.ex-cwp rect { fill: var(--bg); stroke: var(--fg-3); stroke-width: 1; transition: fill 0.5s var(--ease-out), stroke 0.5s var(--ease-out); }
.ex-svg .ex-cwp text { fill: var(--fg-3); font-size: 10.5px; font-weight: 600; letter-spacing: 0; transition: fill 0.5s var(--ease-out); }
.ex-cwp.is-passed rect { fill: var(--fg); stroke: var(--fg); }
.ex-svg .ex-cwp.is-passed text { fill: var(--bg); }
.ex-lbl { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.ex-lbl-wk { fill: var(--fg-3); transition: fill 0.4s ease; }
.ex-svg .ex-lbl-st { font-family: var(--sans); font-size: 14px; font-weight: 450; letter-spacing: -0.005em; fill: var(--fg-3); transition: fill 0.4s ease; }
.ex-lbl.is-passed .ex-lbl-st { fill: var(--fg-2); }
.ex-lbl.is-current .ex-lbl-wk { fill: var(--fg-2); }
.ex-svg .ex-lbl.is-current .ex-lbl-st { fill: var(--fg); font-weight: 560; }
.ex-lock-tick { fill: none; stroke: var(--fg-2); stroke-width: 1; stroke-dasharray: 3 3; }
.ex-lock.is-open .ex-lock-tick { stroke: var(--fg); stroke-dasharray: none; }
.ex-lock rect { fill: var(--bg); stroke: var(--line-3); stroke-width: 1; transition: fill 0.4s ease, stroke 0.4s ease; }
.ex-svg .ex-lock text { font-size: 10px; fill: var(--fg-2); transition: fill 0.4s ease; }
.ex-lock use { color: var(--fg-2); transition: color 0.4s ease; }
.ex-lock.is-open rect { fill: var(--fg); stroke: var(--fg); }
.ex-svg .ex-lock.is-open text { fill: var(--bg); }
.ex-lock.is-open use { color: var(--bg); }
.ex-reticle { transition: transform 0.6s var(--ease-out); }
.ex-reticle path { fill: none; stroke: var(--fg); stroke-width: 1; }
.ex-ship-ring { fill: var(--bg); stroke: var(--fg); stroke-width: 1.5; }
.ex-ship-dot { fill: var(--fg); }
.ex-ship-head { stroke: var(--fg); stroke-width: 1.5; }

/* the readout: one pictogram, one figure, one note per waypoint, stacked in
   one cell so the panel never jumps; only the current one shows. Its key
   strokes draw once, in the order the story happens (.px-d1 to .px-d3). */
.ex-ros { display: grid; align-content: center; min-width: 0; padding: 28px clamp(24px, 2.6vw, 36px); }
.ex-ro { grid-area: 1 / 1; min-width: 0; }
.ex-ro:not(.is-on) { visibility: hidden; opacity: 0; }
.ex-live .ex-ro { transition: opacity 0.25s ease, transform 0.5s var(--ease-out), visibility 0s linear 0.25s; }
.ex-live .ex-ro:not(.is-on) { transform: translateY(-6px); }
.ex-live .ex-ro.is-on { transition: opacity 0.5s var(--ease-out) 0.1s, transform 0.7s var(--ease-out) 0.1s, visibility 0s; }
.ex-live .ex-ro.is-on .px-draw { animation: ex-draw 1.1s var(--ease-out) 0.15s both; }
.ex-live .ex-ro.is-on .px-grow { animation: ex-grow 0.9s var(--ease-out) 0.2s both; }
.ex-live .ex-ro.is-on .px-in { animation: ex-in 0.5s ease 0.35s both; }
/* a left-to-right wipe for marks that must appear in order (one path of many
   short subpaths, where a dash draw would show them all at once) */
.ex-live .ex-ro.is-on .px-wipe { animation: ex-wipe 1.2s linear 0.35s both; }
.ex-live .ex-ro.is-on .px-d1 { animation-delay: 0.4s; }
.ex-live .ex-ro.is-on .px-d2 { animation-delay: 0.65s; }
.ex-live .ex-ro.is-on .px-d3 { animation-delay: 0.9s; }
@keyframes ex-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes ex-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ex-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ex-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.ex-picto { width: 240px; max-width: 100%; height: auto; overflow: visible; }
.ex-picto .px-ln { fill: none; stroke: var(--fg-2); stroke-width: 1.25; }
.ex-picto .px-hi { stroke: var(--fg); }
.ex-picto .px-dim { stroke: var(--fg-3); }
.ex-picto .px-thick { stroke-width: 2; }
.ex-picto .px-box { fill: rgba(233, 234, 234, 0.1); }
.ex-picto .px-plan { stroke: var(--fg-3); stroke-dasharray: 2 3; }
.ex-picto .px-api { stroke: rgba(233, 234, 234, 0.72); stroke-dasharray: 6 4; }
.ex-picto .px-exp { stroke: rgba(233, 234, 234, 0.55); stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 1.5; }
.ex-picto .px-off { stroke: rgba(233, 234, 234, 0.3); stroke-dasharray: 3 4; }
.ex-picto .px-solid { fill: var(--fg); }
.ex-picto .px-grow { transform-box: fill-box; transform-origin: 0 50%; }
.ex-picto text { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.06em; fill: var(--fg-3); }
.ex-picto .px-t-hi { fill: var(--fg-2); }

.ex-ro-data { margin-top: 32px; }
.ex-ro-label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.45; text-transform: uppercase; color: var(--fg-3); }
.ex-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; }
.ex-num { font-size: clamp(2.75rem, 4.6vw, 4.25rem); font-weight: 480; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg); }
.ex-to { margin: 0 0.18em; font-size: 0.5em; font-weight: 450; letter-spacing: 0; vertical-align: 0.28em; color: var(--fg-2); }
.ex-unit { font-size: 15px; font-weight: 500; color: var(--fg-2); }
.ex-fig-2 { margin-top: 10px; }
.ex-fig-2 .ex-num { font-size: clamp(2rem, 3.2vw, 2.75rem); }
.ex-fig-word .ex-num { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.ex-gain .ex-num,
.ex-gain .ex-unit,
.ex-gain .ex-to { color: var(--gain); }
.ex-ro-note { margin-top: 16px; max-width: 30em; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.ex-paid { display: inline-block; margin-top: 16px; padding: 3px 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.45; text-transform: uppercase; color: var(--gain); background: var(--gain-dim); }

@media (min-width: 1100px) {
  .ex-on .ex-body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(48px, 5vw, 88px); align-items: start; }
  .ex-on .ex-log { max-width: none; }
  /* pacing: each entry holds the chart for about a third of a screen */
  .ex-on .ex-entry { min-height: 32svh; padding: 24px 0 44px; border-top: 1px solid var(--line); }
  .ex-on .ex-entry:first-child { min-height: 24svh; }
  .ex-on .ex-entry:last-child { min-height: 36svh; padding-bottom: 0; }
  .ex-on .ex-entry::before,
  .ex-on .ex-entry::after { display: none; }
  .ex-on .ex-stamp { margin-left: 0; gap: 14px; }
  /* the readout beside the course shows these rows; keep them for screen readers */
  .ex-on .ex-readout { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .ex-on .ex-chart:not([hidden]) { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; margin: 0; background-color: var(--bg); border: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .ex-entry { padding-left: 44px; }
  .ex-stamp { margin-left: -44px; gap: 16px; }
  .ex-readout li { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; font-size: 12.5px; }
}