/* The demo's own CSS: one-off look only. Layout comes from /kit/layout.css; colours from theme.css. */
main h1, main h2 { color: var(--brand-text); }
.hero { background: var(--brand-soft); border-radius: var(--r); padding: var(--space-4); }
.pulse { font-size: .85rem; color: var(--muted); }
.pulse .dot, .dotlive { display: inline-block; inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--muted); vertical-align: middle; margin-inline-end: var(--space-1); }
.pulse .dot, .dotlive.on { background: var(--ok); }
.bignum { display: block; text-decoration: none; color: inherit; }
.bignum .n { display: block; font-size: clamp(2.6rem, 2rem + 6vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--brand-text); font-variant-numeric: tabular-nums; }
.bignum .l { display: block; font-weight: 600; }
.stackbar { display: block; inline-size: 100%; block-size: 1rem; border-radius: 99rem; overflow: hidden; background: var(--surface2); white-space: nowrap; font-size: 0; }
.stackbar span { display: inline-block; block-size: 100%; }
.s-av { background: var(--brand); }
.s-rs { background: var(--accent-fill); }
.s-fc { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.legend { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.sw { display: inline-block; inline-size: .8rem; block-size: .8rem; border-radius: .2rem; vertical-align: middle; margin-inline-end: var(--space-1); }
.pad { padding: var(--space-3); }
.err { color: var(--late); font-size: .85rem; min-block-size: 1.1rem; display: block; }
.qrbox { inline-size: 8rem; }
.barbox { inline-size: 12rem; max-inline-size: 100%; }
.mapbox, .treebox { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--brand-soft); }
.treebox.big { aspect-ratio: 4 / 3; }
.mapbox svg, .treebox svg, .qrbox svg, .barbox svg { display: block; inline-size: 100%; block-size: 100%; }
.qrbox svg { block-size: auto; }
.barbox svg { block-size: auto; }
.reqs summary { cursor: pointer; font-weight: 700; min-block-size: 2.75rem; padding: var(--space-2) 0; }
.timeline .todo { color: var(--ink); }
.timeline .todo b { font-weight: 500; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); }
legend { font-weight: 700; padding-inline: var(--space-1); }
label { min-block-size: 1.5rem; }
.qty { inline-size: 5.5rem; }
.card a:not(.btn):not(.chip):not(.linkrow):not(.task) { display: inline-block; min-block-size: 1.5rem; }

:root { --center-max: 96rem; }
main h1 { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 2rem); overflow-wrap: anywhere; }
.legend a { color: var(--ink); }
.chip[aria-current="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.card h2 a { overflow-wrap: anywhere; }
.ph-hero { block-size: 23.9rem; }