/* The Progress page: a table of results, then where to help, then the detail
   behind each row. Rules and alignment carry the hierarchy; colour marks meaning:
   orange for passing work and the first contribution, green and red for checks
   (always with ✓ or ✕), cyan for the people. Base and header come from docs.css;
   colours only from brand.css. */

.progress-page { --gutter: 1.5rem; }
.progress { max-width: 90rem; margin: 0 auto; padding: 0 var(--gutter) 48px; font-size: 14px; line-height: 21px; color: var(--rh-text-2); }
.progress p { margin: 0; }
.progress a { color: inherit; text-decoration: underline; text-decoration-color: var(--rh-line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.progress a:hover { color: var(--fg); text-decoration-color: currentColor; }
.progress b { font-weight: 600; color: var(--rh-text); }
.progress code { font: 12px var(--mono); color: var(--rh-text); overflow-wrap: anywhere; }
.progress h1, .progress h2, .progress h3 { margin: 0; color: var(--fg); }
.progress summary { cursor: pointer; list-style: none; }
.progress summary::-webkit-details-marker { display: none; }
.progress summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Title. */
.pg-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; padding: 18px 0 10px; }
.pg-head h1 { font-size: 36px; line-height: 40px; font-weight: 500; letter-spacing: -.035em; }
.lede { margin-top: 8px !important; }
.jump { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 12px; line-height: 18px; color: var(--muted); }
.phone-only { display: none; }
.progress .start-link { font-weight: 600; color: var(--rh-heading); }

.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.sec-head h2, .start h2, .sect-label h2 { font-size: 18px; line-height: 25px; font-weight: 600; letter-spacing: -.015em; }
.date { font: 12px/18px var(--mono); color: var(--muted); white-space: nowrap; }
.when { margin-left: 4px; font: 12px var(--mono); color: var(--muted); white-space: nowrap; }

/* Latest app results: each number beside what it does and doesn't show. */
.results { border-bottom: 1px solid var(--line); }
.evidence { width: 100%; margin-top: 4px; border-collapse: collapse; table-layout: fixed; }
.evidence .c-check { width: 22%; }
.evidence .c-result { width: 15%; }
.evidence .c-fig { width: 212px; }
.evidence thead th { padding: 4px 16px 6px 0; border-bottom: 1px solid var(--line); text-align: left; font: 600 12px/18px var(--sans); color: var(--muted); }
.evidence tbody th, .evidence td { padding: 7px 16px 7px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.evidence tbody tr:last-child > * { border-bottom: 0; }
.evidence tbody th { font-weight: 600; color: var(--rh-text); }
.evidence .result { white-space: nowrap; }
.evidence .result b { margin-right: 3px; font-size: 24px; line-height: 29px; font-weight: 500; letter-spacing: -.025em; color: var(--fg); font-variant-numeric: tabular-nums; }
.evidence .scope { padding-right: 0; }
.evidence .result.na b { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0; color: var(--rh-text-2); }

/* The small figures beside each result. */
svg.fig { display: block; overflow: visible; }
.f-pass { fill: var(--rh-accent); }
.f-gap { fill: none; stroke: var(--rh-text-faint); stroke-width: 1; stroke-dasharray: 3 2; }
.f-ok { fill: var(--rh-prism-green); }
.f-bad { fill: var(--rh-prism-red); }
.f-tick { fill: var(--rh-bg-deep); font: 700 11px var(--sans); }
.f-open { fill: none; stroke: var(--rh-prism-red); stroke-width: 1; stroke-dasharray: 2 2; }
.f-cross { fill: var(--rh-prism-red); font: 700 10px var(--sans); }
.f-ref { fill: var(--rh-text-faint); }
.f-label { fill: var(--muted); font: 11px var(--mono); }
.f-week { fill: var(--rh-prism-cyan); }
.f-week.partial { fill: none; stroke: var(--rh-prism-cyan); stroke-dasharray: 2 1.5; }
.f-base { fill: var(--rh-line-strong); }

/* Movement: the measured trend, then the people. */
.axis, .more { font: 12px var(--mono); color: var(--muted); }

/* Where to help, and the first step beside it. */
.work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 48px; padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.roundel { display: inline-block; position: relative; width: 15px; height: 15px; margin: 0 14px 0 6px; vertical-align: -1px; border: 2.5px solid var(--rh-sign-ring); border-radius: 50%; }
.roundel::after { content: ""; position: absolute; left: -7px; right: -7px; top: 50%; height: 5px; transform: translateY(-50%); background: var(--rh-bg-deep); border: 1px solid color-mix(in srgb, var(--rh-text) 60%, transparent); }
.failures { width: 100%; margin-top: 10px; border-collapse: collapse; table-layout: fixed; }
.failures .c-count { width: 80px; }
.failures .c-step { width: 36%; }
.failures thead th { padding: 0 8px 6px 0; border-bottom: 1px solid var(--line); text-align: left; font: 600 12px/18px var(--sans); color: var(--muted); }
.failures tbody th, .failures td { height: 40px; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.failures tbody th { font-weight: 600; color: var(--rh-text); }
.failures .count { font-size: 24px; line-height: 29px; font-weight: 500; letter-spacing: -.025em; color: var(--fg); font-variant-numeric: tabular-nums; }
.failures .entry .count { color: var(--accent); }
/* Each group's share of the failing examples, as a rule under its name; all on one scale. */
.share { --ink: color-mix(in srgb, var(--rh-accent) 45%, transparent); display: block; padding: 3px 0 7px; background: linear-gradient(var(--ink), var(--ink)) no-repeat left bottom / var(--share, 0%) 3px; }
.entry .share { --ink: var(--rh-accent); }
.step a { white-space: nowrap; }
.step span { color: var(--muted); }
.smaller > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 12px; color: var(--muted); }
.smaller > summary::before { content: "+"; font: 12px var(--mono); }
.smaller[open] > summary::before { content: "–"; }
.smaller .failures { margin-top: 0; }
.start { padding-left: 32px; border-left: 1px solid var(--line); }
.start p { max-width: 36ch; margin-top: 10px !important; }
.progress .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 44px; margin-top: 16px; padding: 0 16px; border-radius: 6px; font: 600 14px/1 var(--sans); text-decoration: none; }
.progress .button.primary { color: var(--rh-action-ink); background: var(--rh-action); }
.progress .button.primary:hover { color: var(--rh-action-ink); background: var(--rh-action-hover); }
.progress .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.start .setup { display: block; width: fit-content; margin-top: 12px; font-size: 12px; line-height: 18px; }

/* Below the fold: one section per row above, with a label column. */
.sect { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 12px 48px; padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header) + 8px); }
.sect-label .date { margin-top: 4px !important; }
.sect-label .meta { margin-top: 2px !important; font-size: 12px; line-height: 18px; color: var(--muted); }
.sect-body { min-width: 0; max-width: 62rem; }
.sect-body > * + p, .sect-body > * + .notice { margin-top: 10px !important; }
.foot { margin-top: 14px !important; font-size: 12px; line-height: 18px; color: var(--muted); }
.notice { padding: 8px 12px; border-left: 2px solid var(--rh-prism-yellow); background: var(--rh-surface); }
.sub { margin-top: 24px !important; font-size: 14px; line-height: 21px; font-weight: 600; }
.sub span { margin-left: 4px; font-weight: 400; color: var(--muted); }
.label { margin-top: 12px !important; font: 12px/18px var(--mono); color: var(--muted); }
.area { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
.links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px !important; font-size: 13px; }

/* The failure groups, each a disclosure on a hairline row. */
.groups, .rows { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.groups > li, .rows > li { border-bottom: 1px solid var(--line); }
.group > summary { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; min-height: 44px; padding: 10px 28px 10px 0; }
.group > summary::after, .row > summary::after { content: ""; position: absolute; right: 8px; top: 18px; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.group[open] > summary::after, .row[open] > summary::after { top: 21px; transform: rotate(225deg); }
.group > summary:hover b, .row > summary:hover .row-name { color: var(--fg); }
.group .count { font-size: 18px; line-height: 21px; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.group.entry .count { color: var(--accent); }
.group.quiet .count { color: var(--muted); }
.group-body { padding: 0 0 18px 60px; }
.group-body > p + p { margin-top: 8px; }
.examples, .rules { margin: 4px 0 0; padding-left: 1.1rem; }
.examples li, .rules li { margin: 4px 0; }
.examples code { display: block; width: fit-content; max-width: 100%; margin-top: 2px; white-space: normal; }
.rules code { margin: 0 4px; }

/* Replay lanes and route gaps. */
.row > summary, div.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 0; }
.row > summary { position: relative; padding-right: 28px; }
.row > summary::after { top: 14px; }
.row[open] > summary::after { top: 17px; }
.row .route { justify-self: start; }
.row.gap > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
.row-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-body { padding: 0 0 12px; font-size: 13px; }
.row-body > * + * { margin-top: 6px; }
.row-body .detail { display: block; white-space: pre-wrap; }
.result { white-space: nowrap; font-weight: 600; }
.result.ok { color: var(--rh-prism-green); }
.result.fail { color: var(--rh-prism-red); }
.result.ref { font-weight: 400; color: var(--muted); }

/* Smoke checks by app. */
.checks { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; margin: 14px 0 0; }
.checks dt { font: 12px/24px var(--mono); color: var(--muted); }
.checks dd { margin: 0; }
.checks ul, .others { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.check { line-height: 24px; }
.check span[aria-hidden] { margin-right: 2px; font-weight: 700; }
.check.ok span[aria-hidden] { color: var(--rh-prism-green); }
.check.fail { color: var(--fg); }
.check.fail span[aria-hidden] { color: var(--rh-prism-red); }
.check.unknown span[aria-hidden] { color: var(--rh-prism-yellow); }
.others { margin-top: 8px; color: var(--muted); }

/* People: unranked, alphabetical. */
.faces { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.faces a { display: block; border-radius: 50%; }
.faces a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faces li img { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--rh-surface-2); }
.faces a:hover img { box-shadow: 0 0 0 2px var(--rh-prism-cyan); }
.firsts { margin: 8px 0 0; padding: 0; list-style: none; }
.firsts li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.firsts img { width: 28px; height: 28px; border-radius: 50%; background: var(--rh-surface-2); }
.progress .firsts .pr { margin-left: 6px; color: var(--muted); text-decoration-color: var(--line); }
.recent { margin: 8px 0 0; padding-left: 1.1rem; }
.recent li { margin: 4px 0; }
.recent .date { margin-left: 6px; }

/* Ways in: four links on one hairline row, as on the home page. */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 14px 0 0; padding: 0; list-style: none; border-block: 1px solid var(--line); }
.paths li + li { border-left: 1px solid var(--line); }
.progress .paths a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 16px; text-decoration: none; }
.paths li:first-child a { padding-left: 0; }
.paths b { color: var(--fg); }
.paths span { font-size: 12px; line-height: 18px; color: var(--muted); }
.paths a:hover b { color: var(--accent); }

/* Charts: thin marks, recessive axes, a readout on hover and focus. */
.chart-frame { position: relative; max-width: 40rem; margin: 14px 0 0; }
.chart-frame figcaption { margin-top: 6px; font-size: 12px; line-height: 18px; color: var(--muted); }
.bars { display: flex; gap: 6px; height: 122px; padding-top: 18px; box-sizing: border-box; }
.bars .mark { flex: 1; display: flex; flex-direction: column; min-width: 0; outline: none; }
.bar-slot { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--rh-line-strong); }
.bars .wk { position: relative; display: block; width: 100%; max-width: 24px; min-height: 0; border-radius: 4px 4px 0 0; background: var(--rh-prism-cyan); }
/* The label sits outside the bar, so it never takes height from it. */
.bar-value { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-size: 12px; font-style: normal; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.bar-tick { display: flex; justify-content: center; height: 18px; padding-top: 3px; font: 11px var(--mono); color: var(--muted); white-space: nowrap; }
.bars .mark:first-child .bar-tick { justify-content: flex-start; }
.bars .mark:last-child .bar-tick { justify-content: flex-end; }
.bars .mark.partial .wk { background: transparent; outline: 1px dashed var(--rh-prism-cyan); outline-offset: -1px; }
.bars .mark:hover .wk, .bars .mark:focus-visible .wk { background: color-mix(in srgb, var(--rh-prism-cyan) 75%, var(--fg)); }
.bars .mark:focus-visible .bar-slot { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.chart.narrow { display: none; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--rh-line-strong); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .value { fill: var(--fg); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke: var(--rh-prism-red); stroke-width: 2; stroke-linejoin: round; }
.chart .dot { fill: var(--rh-prism-red); stroke: var(--rh-bg); stroke-width: 2; }
.chart .hit { fill: transparent; }
.key { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; color: var(--fg); }
.key::before { content: ""; width: 18px; height: 0; border-top: 2px solid var(--rh-text-muted); }
.key.s-a::before { border-top-color: var(--rh-accent); } .key.s-ref::before { border-top-color: var(--rh-text-faint); }
.chart .mark { outline: none; cursor: default; }
.chart .mark:focus-visible .hit { stroke: var(--accent); stroke-width: 2; }
.chart .mark:hover .dot, .chart .mark:focus-visible .dot { r: 6px; }
.tip { position: absolute; z-index: 5; pointer-events: none; max-width: 260px; padding: 6px 9px; border: 1px solid var(--rh-line-strong); border-radius: 6px; background: var(--rh-surface-3); color: var(--fg); font-size: 12px; line-height: 1.4; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }

/* Tables below the fold: hairlines only. */
.progress .table-wrap { margin: 12px 0 0; overflow-x: auto; border: 0; border-radius: 0; }
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; }
.table-wrap th { padding: 6px 16px 6px 0; border-bottom: 1px solid var(--line); text-align: left; font: 600 12px/18px var(--sans); color: var(--muted); white-space: nowrap; }
.table-wrap td { padding: 6px 16px 6px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table-wrap td:first-child, #sources td { white-space: nowrap; }
.progress .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap th.num, .table-wrap td.num { padding-right: 0; padding-left: 16px; }
.table-view { margin-top: 12px; }
.table-view > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 12px; }
.table-view > summary::before { content: "+"; font: 12px var(--mono); color: var(--muted); }
.table-view[open] > summary::before { content: "–"; }
.table-view > summary code { font-size: 1em; }

.progress-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: 90rem; margin: 0 auto; padding: 20px var(--gutter) 32px; font-size: 12px; line-height: 1.6; color: var(--muted); }
.progress-footer a { color: inherit; text-decoration: underline; text-decoration-color: var(--rh-line-strong); text-underline-offset: 3px; }
.progress-footer code { font: .95em var(--mono); }

/* Narrower screens. */
/* --- Over time: mini series above the fold, small multiples below. --- */
.movement { padding: 14px 0 8px; border-top: 1px solid var(--line); }
.movement-title { margin: 0 0 10px; font: 600 14px/20px var(--sans, inherit); color: var(--rh-text); }
.movement-title a, .firsts-line > a { display: inline-block; line-height: 24px; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--line); }
.tiles li + li { border-left: 1px solid var(--line); }
.progress .tile { display: grid; grid-template-rows: auto auto auto auto 34px auto; align-content: start; gap: 2px; height: 100%; padding: 12px 16px; color: inherit; text-decoration: none; }
.tiles li:first-child .tile { padding-left: 0; }
.tile:hover .t-label, .tile:focus-visible .t-label { color: var(--accent); }
.t-label { font-size: 13px; line-height: 18px; color: var(--rh-text); }
.t-cue { min-height: 16px; font: 11px/16px var(--mono); color: var(--muted); }
.t-value { margin-top: 4px; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--rh-heading); }
.t-value .na { font-size: 15px; font-weight: 500; color: var(--muted); }
.t-delta { min-height: 16px; font-size: 12px; line-height: 16px; color: var(--muted); }

.t-spark { display: flex; align-items: center; height: 34px; }
.t-sub { font-size: 12px; line-height: 17px; color: var(--muted); }
.spark { display: block; overflow: visible; }
.spark .line { fill: none; stroke: var(--rh-text-soft); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark .ref { stroke: var(--rh-line-strong); stroke-width: 1; }
.spark .end { fill: var(--rh-accent); stroke: var(--rh-bg); stroke-width: 2; }
.spark .end.open { fill: var(--rh-bg); stroke: var(--rh-accent); stroke-width: 1.5; }
.firsts-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 10px 0 0; font-size: 13px; }
.firsts-line .faces { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.firsts-line .faces img { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--rh-surface-2); }

.family + .family { margin-top: 36px; }
.unit { margin-left: 4px; font-size: 0.55em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.pair { display: grid; gap: 10px; margin: 14px 0 0; }
.pair-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 13px; line-height: 18px; }
.pair-name { color: var(--muted); } .pair-val { color: var(--rh-text); font-variant-numeric: tabular-nums; }
.pair-bar { grid-column: 1 / -1; height: 8px; width: var(--w); border-radius: 0 4px 4px 0; background: var(--rh-text-faint); }
.pair-bar.s-a { background: var(--rh-accent); }
.ranked { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.ranked li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 13px; line-height: 18px; }
.ranked .muted { color: var(--muted); }
.chart .so-far { fill: var(--rh-text-muted); fill-opacity: 0.06; }
.chart .so-far-label { fill: var(--muted); font-size: 10px; }
.family-title { margin: 0 0 4px; font: 600 11px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.family-conditions { margin: 0 0 4px; font: 11px/16px var(--mono); color: var(--rh-text-dim); }
.family-grid { display: grid; gap: 24px 32px; align-items: start; }
.family-grid.build { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.family-grid.runtime { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.family-grid.apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mult .now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 10px 0 0; }
.mult .now b { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--rh-heading); }
.mult .sub { margin: 2px 0 0; font-size: 13px; line-height: 19px; color: var(--rh-text); }
.key-box { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; color: var(--fg); }
.key-box::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--rh-text-faint); }
.key-box.f-ok::before { background: var(--rh-prism-green); } .key-box.f-bad::before { background: var(--rh-prism-red); } .key-box.f-cancel::before { background: var(--rh-line-strong); }
.chart .f-cancel { fill: var(--rh-line-strong); } .chart .f-other { fill: var(--rh-text-faint); }
.chart rect.open { fill-opacity: 0.45; }
.chart .line.s-ref { stroke: var(--rh-text-faint); } .chart .dot.s-ref { fill: var(--rh-text-faint); }
.key.s-ref::before { border-top-color: var(--rh-text-faint); }
.mult { min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.mult header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.mult h4 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--rh-heading); }
.mult .cue { margin: 0; font: 11px/16px var(--mono); color: var(--muted); }
.mult .def { margin: 4px 0 0; font-size: 13px; line-height: 19px; color: var(--muted); }
.chart .leader { fill: none; stroke: var(--rh-line-strong); stroke-width: 1; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 16px; margin: 10px 0 0; font-size: 13px; line-height: 20px; }
.facts div { display: contents; }
.facts dt { color: var(--muted); } .facts dd { margin: 0; color: var(--rh-text); font-variant-numeric: tabular-nums; }
.single-note { margin: 10px 0 0; font-size: 12px; line-height: 18px; color: var(--muted); }
.legend-note { color: var(--muted); }
.mult .chart-frame { max-width: none; }
.chart .line.s-a { stroke: var(--rh-accent); } .chart .dot.s-a { fill: var(--rh-accent); }
.chart .line.s-n { stroke: var(--rh-text-muted); } .chart .dot.s-n { fill: var(--rh-text-muted); }
.chart .band { fill: var(--rh-text-muted); fill-opacity: 0.12; stroke: none; }
.chart .band.s-a { fill: var(--rh-accent); }
.chart .dot.open { fill: var(--rh-bg); stroke-width: 1.5; }
.chart .dot.s-a.open { stroke: var(--rh-accent); } .chart .dot.s-n.open { stroke: var(--rh-text-muted); }
.chart .ref { stroke: var(--rh-text-faint); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .ref-label { fill: var(--muted); font-size: 11px; }
.chart .col .hit { fill: transparent; }
.chart .col .cross { stroke: var(--rh-text-soft); stroke-width: 1; opacity: 0; }
.chart .col:hover .cross, .chart .col:focus-visible .cross { opacity: 1; }
.chart .col:focus-visible { outline: none; }
.chart .col:focus-visible .hit { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.key { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; color: var(--fg); }
.key::before { content: ""; width: 18px; height: 0; border-top: 2px solid var(--rh-text-muted); }
.key.s-a::before { border-top-color: var(--rh-accent); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles li:nth-child(3n+1) { border-left: 0; } .tiles li:nth-child(3n+1) .tile { padding-left: 0; } .tiles li:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 1100px) { .family-grid.runtime { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .family-grid.build, .family-grid.runtime, .family-grid.apps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .t-value { font-size: 20px; line-height: 26px; } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles li:nth-child(3n+1) { border-left: 1px solid var(--line); } .tiles li:nth-child(3n+1) .tile { padding-left: 16px; } .tiles li:nth-child(odd) { border-left: 0; } .tiles li:nth-child(odd) .tile { padding-left: 0; } .tiles li:nth-child(n+3) { border-top: 1px solid var(--line); } }

@media (max-width: 1100px) {
  .work { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .start { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .start p { max-width: 62ch; }
  .sect { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px 32px; }
}
@media (max-width: 860px) {
  .phone-only { display: inline; }
  .evidence, .evidence tbody { display: block; }
  .evidence colgroup { display: none; }
  .evidence thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .evidence tbody tr { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .evidence tbody th, .evidence td { display: block; padding: 0; border: 0; }
  .evidence td.fig:empty { display: none; }
  .sect { grid-template-columns: minmax(0, 1fr); }
  .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paths li + li { border-left: 0; }
  .paths li:nth-child(even) { border-left: 1px solid var(--line); }
  .paths li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .paths li:nth-child(odd) a { padding-left: 0; }
  .chart.wide { display: none; }
  .chart.narrow { display: block; }
}
@media (max-width: 700px) {
  .progress-page { --gutter: 16px; }
  .progress-page .bar { height: auto; flex-wrap: wrap; row-gap: 10px; padding: 12px 20px; }
  .progress-page .site-nav { width: 100%; justify-content: space-between; gap: 8px; font-size: 11px; }
  .progress-page .site-nav .optional { display: inline; }
  .pg-head h1 { font-size: 30px; line-height: 34px; }
  .failures, .failures tbody { display: block; }
  .failures colgroup { display: none; }
  .failures thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .failures tbody tr { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 8px 0 4px; border-bottom: 1px solid var(--line); }
  .failures tbody th, .failures td { display: block; height: auto; padding: 0; border: 0; }
  .failures .count { grid-row: 1 / 3; }
  .failures .step { grid-column: 2; }
  .step a { display: inline-flex; align-items: center; min-height: 44px; white-space: normal; }
  .smaller > summary, .table-view > summary, .start .setup { min-height: 44px; }
  .start .setup { display: flex; align-items: center; }
  .group-body { padding-left: 0; }
  .checks { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .row.gap > summary { grid-template-columns: minmax(0, 1fr); }
  .group > summary { grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; }
  .group .count { grid-row: 1 / span 2; }
  .group .area { grid-column: 2; }
  .firsts li { grid-template-columns: 28px minmax(0, 1fr); }
  .firsts .date { grid-column: 2; }
}
@media (max-width: 420px) {
  .progress-page .site-nav a[href$="/ide/"], .progress-page .site-nav a[href$="/studio/"] { display: none; }
  .paths { grid-template-columns: minmax(0, 1fr); }
  .paths li:nth-child(even) { border-left: 0; }
  .paths li + li { border-top: 1px solid var(--line); }
  .paths li a { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .group > summary::after, .row > summary::after { transition: none; } }
@media (forced-colors: active) {
  .f-pass, .f-ok, .f-bad, .f-ref, .f-week, .f-base, .chart .dot { fill: CanvasText; forced-color-adjust: none; }
  .f-gap, .f-open, .f-week.partial { stroke: CanvasText; forced-color-adjust: none; }
  .f-tick { fill: Canvas; forced-color-adjust: none; }
  .bars .wk { background: CanvasText; forced-color-adjust: none; }
  .share { background-image: linear-gradient(CanvasText, CanvasText); forced-color-adjust: none; }
  .chart .line { stroke: CanvasText; }
  .progress .button { border: 1px solid ButtonText; }
}