/* Finding 3, feedback over time: the stage head, the program ribbon and its narrow-screen list, the wrench seen
   from above, the edit grid, and the two result charts. Every colour is a page token. */
/* ---- the stage head. Its boxes dissolve into the stage's grid, so the lens is the stage's own item and can stay
   stuck at the top while the whole stage scrolls under it (while the stage is on screen: .f3-in) */
[data-section="f3"] .stage-head, [data-section="f3"] .f3-ask { display: contents; }
[data-section="f3"] #f3-lens { justify-self: start; z-index: 6; }
[data-section="f3"] .f3-in #f3-lens { position: sticky; top: 52px; box-shadow: 0 3px 10px var(--shade); }
/* at the stage's end the stuck lens slides under the foot, which is drawn over it and is always taller, so it
   never covers the readout and needs no blank spacer to rest on */
[data-section="f3"] #f3-stage > .stage-foot { position: relative; z-index: 7; background: var(--card); min-height: 58px; box-shadow: 0 14px 0 var(--card); }
@media (min-width: 861px) {
  [data-section="f3"] #f3-stage { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
  [data-section="f3"] #f3-stage > * { grid-column: 1 / -1; }
  [data-section="f3"] #f3-stage .try { grid-area: 1 / 1; }
  [data-section="f3"] #f3-lens { grid-area: 2 / 1; align-self: start; margin-top: -10px; }
  [data-section="f3"] #f3-stage .f3-nums { grid-area: 1 / 2 / 3 / 3; align-self: center; }
}
/* the ladders as one grid, so each column's micro label sits under its numerals: label, three numerals with their
   separators, the first program */
[data-section="f3"] .stage-nums.f3-nums { display: grid; grid-template-columns: repeat(7, auto); align-items: baseline; justify-content: start; gap: 3px 8px; margin: 0; }
[data-section="f3"] .f3-nums .f3-nums-k { grid-column: 1 / -1; margin: 0 0 2px; }
[data-section="f3"] .f3-nums .ladder, [data-section="f3"] .f3-nk { display: contents; }
[data-section="f3"] .f3-nums .ladder .numlabel { grid-column: 1; margin: 0 6px 0 0; color: var(--ink); }
[data-section="f3"] .f3-nums .ladder .ctx { white-space: nowrap; padding-left: 4px; }
[data-section="f3"] .f3-nums .n { justify-self: center; cursor: pointer; }
[data-section="f3"] .f3-nk span { justify-self: center; padding-bottom: 3px; font: 600 var(--fs-micro)/1 var(--sans); color: var(--muted); cursor: pointer; }
[data-section="f3"] .f3-nk span.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--cause); }

/* ---- legend: the ✕ / ◆ glyphs come from Base.legend; the hatch and the faded chip are drawn here */
[data-section="f3"] .f3-key { gap: 6px 18px; }
[data-section="f3"] .f3-episode { margin-left: auto; font-size: 12.5px; color: var(--faint); }
[data-section="f3"] .f3-sw { width: 18px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
[data-section="f3"] .f3-sw.fog { background: repeating-linear-gradient(135deg, var(--fog-ink) 0 1px, var(--fog-bg) 1px 4px); border: 1px solid var(--fog-ink); }
[data-section="f3"] .f3-sw.unreached { border: 1px dashed var(--muted); opacity: 0.6; }

/* ---- the program: the ribbon on wide screens, the list on narrow ones */
[data-section="f3"] .f3-program { position: relative; min-width: 0; }
[data-section="f3"] .f3-steps { display: none; }
[data-section="f3"] .f3-rail { display: none; position: absolute; left: 0; top: 0; width: 24px; overflow: visible; pointer-events: none; }
[data-section="f3"] .ribbon .chip[data-node="abort.recovery"] { opacity: 0.55; }
[data-section="f3"] .ribbon .chip:not([data-state="unreached"]) { cursor: pointer; }
/* a card-coloured ground under each label, shown where the chip or motion is fogged: no muted text on the hatch */
[data-section="f3"] .ribbon .f3-ground { fill: var(--card); opacity: 0; transition: opacity var(--t-fog); }
[data-section="f3"] .ribbon [data-fog] > .f3-ground { opacity: 1; }
[data-section="f3"] .ribbon .f3-dur { font: 500 10px var(--mono); fill: var(--muted); }
[data-section="f3"] .ribbon .f3-raised text { font: 500 10.5px var(--mono); fill: var(--seen); paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
[data-section="f3"] .ribbon .arc-label .f3-tokspan { font: 500 11.5px var(--mono); }
@media (max-width: 860px) {
  [data-section="f3"] .f3-program .ribbon-wrap, [data-section="f3"] #f3-ribbon { display: none; }
  [data-section="f3"] .f3-steps, [data-section="f3"] .f3-rail { display: block; }
}
[data-section="f3"] .f3-steps { position: relative; list-style: none; margin: 0; padding: 0 0 0 30px; font: 500 13px/1.3 var(--sans); }
[data-section="f3"] .f3-steps .grp { font: 500 11px/1 var(--sans); color: var(--muted); padding: 10px 0 5px; }
[data-section="f3"] .f3-steps .grp:first-child { padding-top: 0; }
[data-section="f3"] .f3-steps .step {
  display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; margin-bottom: 3px;
  border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--card); cursor: pointer;
  transition: background var(--t-fog), border-color var(--t-fog);
}
[data-section="f3"] .f3-steps .step code { font: 500 var(--fs-chip)/1 var(--mono); color: var(--ink); }
[data-section="f3"] .f3-steps .step .glyph { color: var(--muted); width: 13px; height: 13px; }
[data-section="f3"] .f3-steps .step .dur { margin-left: auto; font: 500 11px/1 var(--mono); color: var(--muted); }
[data-section="f3"] .f3-steps .step[data-state="raised"] { border-color: var(--seen); background: var(--seen-wash); }
[data-section="f3"] .f3-steps .step[data-state="raised"] .glyph { color: var(--seen); }
[data-section="f3"] .f3-steps .step.recovery { opacity: 0.55; }
[data-section="f3"] .f3-steps .step.pulse { border-color: var(--cause); box-shadow: inset 0 0 0 1px var(--cause); }
[data-section="f3"] .f3-steps .mot { display: flex; align-items: center; min-height: 22px; margin: 0 0 3px 22px; padding: 0 8px; border-radius: 4px; background: var(--stage); }
[data-section="f3"] .f3-steps .mot code { font: 500 10.5px/1 var(--mono); color: var(--muted); }
[data-section="f3"] .f3-steps .mot code::before { content: "↳ "; color: var(--faint); }
[data-section="f3"] .f3-steps .unreached { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
[data-section="f3"] .f3-steps .u { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px dashed var(--muted); border-radius: var(--r-chip); opacity: 0.45; }
[data-section="f3"] .f3-steps .u .glyph { width: 11px; height: 11px; color: var(--muted); }
[data-section="f3"] .f3-steps .u code { font: 500 10.5px/1 var(--mono); color: var(--ink); }
[data-section="f3"] .f3-steps .note { font: 600 12px/1.35 var(--sans); color: var(--cause); padding: 2px 0 8px; }
[data-section="f3"] .f3-steps .note code { font: 500 11.5px/1 var(--mono); }
/* fog is the row's background; labels keep a card-coloured ground so no text sits on the hatch */
[data-section="f3"] .f3-steps [data-fog] { background: repeating-linear-gradient(135deg, var(--fog-ink) 0 1px, var(--fog-bg) 1px 6px); border-color: var(--fog-ink); }
[data-section="f3"] .f3-steps [data-fog] code, [data-section="f3"] .f3-steps [data-fog] .dur { background: var(--card); padding: 2px 4px; border-radius: 3px; }
[data-section="f3"] .f3-steps [data-fog] code { color: var(--muted); }

/* ---- the wrench from above */
[data-section="f3"] .f3-top { gap: 8px; }
[data-section="f3"] svg.wrench-top { display: block; width: 100%; overflow: visible; }
[data-section="f3"] .f3-wrench { fill: color-mix(in srgb, var(--ctx) 55%, var(--card)); stroke: var(--muted); stroke-width: 1; stroke-linejoin: round; }
[data-section="f3"] .f3-ring { fill: none; stroke: var(--ink); stroke-width: 2.2; }
[data-section="f3"] .f3-pring { fill: none; stroke: var(--seen); stroke-width: 2; stroke-dasharray: 4 3; }
[data-section="f3"] .f3-obb { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
[data-section="f3"] .f3-x { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
[data-section="f3"] .f3-lead { fill: none; stroke: var(--muted); stroke-width: 1; }
[data-section="f3"] .f3-lead.seen { stroke: var(--seen); }
[data-section="f3"] .wrench-top text { paint-order: stroke; stroke: var(--stage-inset); stroke-width: 3px; stroke-linejoin: round; }
[data-section="f3"] .f3-label { font: 700 12px var(--sans); fill: var(--ink); }
[data-section="f3"] .f3-note { font: 500 11.5px var(--sans); fill: var(--muted); }
[data-section="f3"] .f3-mono { font: 500 11px var(--mono); fill: var(--ink); }
[data-section="f3"] .f3-mono.seen { fill: var(--seen); }
[data-section="f3"] .f3-mono.muted { fill: var(--muted); font-size: 10.5px; }
/* fogged, an estimate stays drawn, faint over its own hatch; the report's tokens give way to the veil's words */
[data-section="f3"] .f3-shapes .fog-veil { stroke: var(--fog-ink); stroke-width: 1; }
[data-section="f3"] .f3-shapes > :not(.fog-veil), [data-section="f3"] .f3-said { transition: opacity var(--t-fog), fill var(--t-fog); }
[data-section="f3"] .f3-shapes[data-fog] > :is(.f3-obb, .f3-pring, .f3-x, .f3-lead) { opacity: 0.35; }
[data-section="f3"] .f3-shapes[data-fog] .f3-label { fill: var(--muted); }
[data-section="f3"] .f3-said[data-fog] { opacity: 0; }
[data-section="f3"] .f3-veil text { opacity: 0; transition: opacity var(--t-fog); }
[data-section="f3"] .f3-veil[data-fog] text { opacity: 1; }

/* ---- what the agent read, concluded and edited */
[data-section="f3"] .f3-read .stage-body { gap: 10px; align-content: start; }
[data-section="f3"] pre.report .f3-tok { font-weight: 500; color: var(--seen); text-decoration: underline 1.5px; text-underline-offset: 3px; }
[data-section="f3"] pre.report .ln[data-node] { cursor: default; }
[data-section="f3"] .f3-said-box { display: grid; gap: 6px; justify-items: start; margin-bottom: 8px; }
[data-section="f3"] .f3-more { border: 0; background: none; padding: 2px 0; font: 700 13px/1.3 var(--sans); color: var(--link); cursor: pointer; }
[data-section="f3"] .f3-more:hover { text-decoration: underline; }
[data-section="f3"] .editgrid { display: grid; grid-template-columns: 30px repeat(5, minmax(0, 52px)); gap: 5px 6px; align-items: center; justify-content: start; }
[data-section="f3"] .editgrid .colh { font: 500 10.5px/1 var(--mono); color: var(--muted); text-align: center; padding: 4px 0; border-radius: 5px; }
[data-section="f3"] .editgrid .colh.cause { color: var(--cause); box-shadow: inset 0 0 0 1.5px var(--cause); }
[data-section="f3"] .editgrid .rowh { font: 500 11px/1 var(--mono); color: var(--ink); }
[data-section="f3"] .editgrid .cell { height: 16px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); transition: background var(--t-fog), border-color var(--t-fog); }
[data-section="f3"] .editgrid .cell[data-on] { background: var(--seen-wash); border: 1.5px solid var(--seen); }
[data-section="f3"] .editgrid .cell.perceive[data-on] { background: var(--cause); border-color: var(--cause); }
[data-section="f3"] .f3-gridcap { max-width: 44ch; }
[data-section="f3"] .f3-sq { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: -1px; background: var(--seen-wash); border: 1.5px solid var(--seen); }
[data-section="f3"] .f3-sq.perceive { background: var(--cause); border-color: var(--cause); }

/* ---- results */
[data-section="f3"] .results { display: grid; gap: 12px; align-content: start; }
[data-section="f3"] .f3-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
[data-section="f3"] .f3-reach-k { margin-top: 14px; }
[data-section="f3"] svg.bars, [data-section="f3"] svg.reach { display: block; width: 100%; overflow: visible; }
[data-section="f3"] .f3-grid line { stroke: var(--grid); stroke-width: 1; }
[data-section="f3"] .f3-grid text { font: 500 11px var(--sans); fill: var(--faint); }
[data-section="f3"] .f3-grid .f3-axis-title { font-weight: 600; fill: var(--muted); }
[data-section="f3"] .f3-rowlabel { font: 600 12.5px var(--sans); fill: var(--ink); }
[data-section="f3"] .f3-val { font: 600 17px var(--num); fill: var(--ink); font-variant-numeric: tabular-nums; }
[data-section="f3"] .hit { fill: transparent; }
[data-section="f3"] .bar.initial { fill: var(--ctx); }
[data-section="f3"] .bar.episode, [data-section="f3"] .dot.episode { fill: var(--o1); }
[data-section="f3"] .bar.motion, [data-section="f3"] .dot.motion { fill: var(--o2); }
[data-section="f3"] .bar.skill, [data-section="f3"] .dot.skill { fill: var(--o3); }
[data-section="f3"] .dot { stroke: var(--card); stroke-width: 1.5; }
[data-section="f3"] .f3-bar:hover .bar, [data-section="f3"] .f3-bar:focus-visible .bar { filter: brightness(0.92); }
[data-section="f3"] .f3-base { stroke: var(--line); }
[data-section="f3"] .f3-mean { stroke: var(--ink); stroke-width: 1.5; }
[data-section="f3"] .f3-meanlabel { font: 600 13px var(--num); fill: var(--ink); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
[data-section="f3"] .stage-foot .readout { flex: 1 1 320px; }
[data-section="f3"] .caveat { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; border-left: 2px solid var(--line); padding-left: 12px; }

/* ---- phone: each ladder's label takes its own row above its numerals */
@media (max-width: 600px) {
  [data-section="f3"] .stage-nums.f3-nums { grid-template-columns: repeat(5, auto) 1fr; }
  [data-section="f3"] .f3-nums .ladder .numlabel { grid-column: 1 / -1; margin: 4px 0 0; }
  [data-section="f3"] .f3-nk > :first-child { display: none; }
  [data-section="f3"] .editgrid { grid-template-columns: 26px repeat(5, minmax(0, 1fr)); }
}