/* generated by site/build.mjs from sections/case/c.css and the case panels */
/* case pages (hardy-tiger-8vph, 10-17), case 01 first: the header in the hero's manner (the plate, its grille, the label
   row, the heading, a one-line lede) with the facts as a slim readout (the guarantee strip's thin dark box); the case's
   panel in the method's pattern (the drawing's well, the timeline: panel/player.css); then the text in short parts, each
   heading on the left of its text from 900 px. Every class is cx- (the page) or cg- (case 01's panel, appended by the
   build from illus/case-gift-panel.mjs), so the other case pages are untouched until they move to this layout. */

/* ---------- the header: the hero's plate ---------- */
.cx-hero{padding:12px 0 0}
.cx-h h1{font:var(--ts-display-weight) clamp(36px,5.2vw,76px)/1.02 var(--font-text);font-stretch:125%;letter-spacing:-0.035em}
.cx-h .lede{margin-top:var(--hd);font-size:18px;max-width:none}
@media (min-width:900px){.cx-hero{padding-top:24px}.cx-h{padding-bottom:32px}.cx-h h1{margin-top:12px!important}.cx-h .lede{font-size:20px}}

/* ---------- the facts: a readout, one slim line in a thin dark box as wide as its content (rows on a phone) ---------- */
.cx-ro{display:grid;margin:20px 0 0;padding:4px 14px;border-radius:6px;background:var(--surface);box-shadow:inset 0 0 0 1px #2A302D;max-width:440px}
.cx-f{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;border-top:1px dashed #3A403C}
.cx-f:first-child{border-top:0}
.cx-f dt{font:500 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#A9AFA6}
.cx-f dd{margin:0;display:flex;align-items:center;gap:8px;font:700 13px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#E9E5D8;text-align:right}
/* the seven tests, seven lit LEDs (the kit's blue: a check) */
.cx-leds{display:inline-flex;gap:3px}
.cx-leds i{width:6px;height:6px;border-radius:50%;background:#93A8FF;box-shadow:0 0 5px rgb(147 168 255/.55)}
@media (min-width:900px){
.cx-ro{display:flex;inline-size:fit-content;max-width:100%;padding:10px 4px}
.cx-f{display:grid;justify-content:start;gap:7px;min-height:0;padding:2px 20px;border-top:0;border-left:1px dashed #3A403C}
.cx-f:first-child{border-left:0}
.cx-f dd{font-size:15px;letter-spacing:.1em;text-align:left}
.cx-leds{gap:4px}.cx-leds i{width:7px;height:7px}
}

/* ---------- the panel: label, heading, then the well and the timeline (player.css) ---------- */
.cx-p{padding:var(--sec) 0}
.cx-hd{display:grid;gap:var(--hd);margin-bottom:var(--hb)}
.cx-hd h2{max-width:20em}

/* ---------- the text: short parts, each a heading and its text, ruled apart ---------- */
.cx-t{padding:0}
.cx-r{display:grid;gap:14px;padding:28px 0;border-top:1px solid var(--border)}
.cx-r h2{font-size:clamp(24px,2.6vw,32px);line-height:1.1}
.cx-b{display:grid;gap:14px;max-width:40em;color:var(--text-2)}
.cx-b p{margin:0}
.cx-b b{color:var(--text);font-weight:600}
@media (min-width:900px){.cx-r{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:56px;padding:40px 0}.cx-r h2{margin-top:-3px!important}}
/* the seven questions: their numbers in the mono of the labels; the third marked, with the blue LED of the panel's row */
.cx-qs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cx-qs li{display:grid;grid-template-columns:32px 1fr;align-items:baseline}
.cx-qn{font:600 12px/1 var(--font-mono);letter-spacing:.06em;color:var(--text-3)}
.cx-q3{color:var(--text)}
.cx-q3 .cx-qn{color:var(--ai-text)}
.cx-dec{display:inline-flex;align-items:center;gap:6px;margin-left:6px;font:600 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ai-text);white-space:nowrap}
.cx-dec i{width:7px;height:7px;border-radius:50%;background:var(--ai);box-shadow:0 0 0 3px color-mix(in oklab,var(--ai) 18%,transparent)}
.cx-key{color:var(--text);font-weight:600;padding-left:14px;border-left:3px solid var(--ai)}
/* the app's parts and the checks: short lists, a small mark for each item */
.cx-ls{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cx-ls li{position:relative;padding-left:20px}
.cx-ls li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:2px;background:var(--text-3)}
.cx-ck li::before{top:.42em;width:7px;height:7px;border-radius:50%;background:var(--ai)}
/* the drawn checkout (the homepage card's): sized to the text */
.cart-img.cart-co.cx-co{max-width:420px;aspect-ratio:auto;padding:16px 0;border-radius:var(--radius-l)}
.cx-co .co{width:calc(100% - 32px)}

/* case 02's panel (illus/case-ugc-panel.mjs): its own parts, on the panel kit */
.mp .cu-ln{fill:none;stroke:var(--f-ink);stroke-width:1.4;vector-effect:non-scaling-stroke}
.mp .cu-gh{fill:none;stroke:var(--f-ink);stroke-width:1.2;stroke-dasharray:3 3;opacity:.7;vector-effect:non-scaling-stroke}
/* status lines aligned at every width: left edge (cu-l) or centre (cu-c) on the anchor */
.mp-fig .lg.mp-st.cu-l{transform:translate(0,-50%)}
.mp-fig .lg.mp-st.cu-c{transform:translate(-50%,-50%)}
.mp .cu-btn{fill:#3A403C}
.mp .cu-tile{fill:#1E2220;stroke:#6E756F;stroke-width:1;vector-effect:non-scaling-stroke}
.mp .cu-play{fill:#A9AFA6}
.mp .cu-bub{fill:#3B413D}
.mp .cu-ring{fill:none;stroke:var(--f-ink);stroke-width:2}
.mp .cu-seen{fill:none;stroke:#6E756F;stroke-width:2.4}
.mp .cu-full{fill:#050606;opacity:.96}
.mp .cu-dim{fill:#050606;opacity:.78}
.mp .cu-vid{fill:#252927;stroke:var(--f-ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mp .cu-bar1{fill:var(--f-ink)}.mp .cu-bar0{fill:#6E756F}
.mp .cu-av{fill:#6E756F;stroke:var(--f-ink);stroke-width:1;vector-effect:non-scaling-stroke}
.mp .cu-card{fill:#D9D6CE}
.mp .cu-fr{fill:#151817;stroke:#3A403C;stroke-width:1;vector-effect:non-scaling-stroke}
.mp .cu-pick{fill:var(--f-sys)}
.mp .cu-eq{fill:none;stroke:var(--f-sys);stroke-width:1.6}
.mp .cu-pf{fill:#151817;stroke:#6E756F;stroke-width:1;vector-effect:non-scaling-stroke}
.mp .cu-okf{fill:none;stroke:var(--f-ok);stroke-width:2;vector-effect:non-scaling-stroke}
/* the first bubble's ring goes grey once seen (its ink ring hides under the grey one) */
.mp .cu-r0{transition:opacity .3s}
/* the facts readout: the blind pick's six scenes, four lit, two too close to call */
.cx-leds i.cu-off{background:#3C403D;box-shadow:inset 0 0 0 1px #59615B}

/* case 01's panel (illus/case-gift-panel.mjs): its own parts, on the panel kit */
.mp .cg-ln{fill:none;stroke:var(--f-ink);stroke-width:1.4;vector-effect:non-scaling-stroke}
.mp .cg-fld{fill:#151817;stroke:#3A403C;stroke-width:1;vector-effect:non-scaling-stroke}
.mp .cg-gh{fill:none;stroke:var(--f-ink);stroke-width:1.2;stroke-dasharray:3 3;opacity:.7;vector-effect:non-scaling-stroke}
.mp .cg-ghl{fill:none;stroke:var(--f-ink);stroke-width:2.4;stroke-dasharray:3 4;opacity:.7}
.mp .cg-hl{fill:none;stroke:var(--f-sys);stroke-width:1.8;vector-effect:non-scaling-stroke}
.mp .cg-qw{fill:var(--f-sys)}
.mp .cg-sl{fill:var(--f-ink)}
.mp .cg-tk{fill:none;stroke:#A9AFA6;stroke-width:1.2;vector-effect:non-scaling-stroke}
.mp .cg-nt{fill:rgb(255 107 94/.1);stroke:var(--f-bad);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mp .cg-rx{fill:none;stroke:#6E756F;stroke-width:1.6}
.mp .cg-q{fill:#6E756F}
.mp .cg-tag{fill:var(--f-ink)}
.mp .cg-gt{fill:#252927;stroke:var(--f-ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
/* a part that goes only when its pulse has arrived (--odl): the gauge falls when the drop reaches the function */
.mp [data-k].cg-od:not(.lit){transition-delay:var(--odl,0s)}
/* status lines aligned at every width: left edge (cg-l), right edge (cg-r) or centre (cg-c) on the anchor */
.mp-fig .lg.mp-st.cg-l{transform:translate(0,-50%)}
.mp-fig .lg.mp-st.cg-r{transform:translate(-100%,-50%)}
.mp-fig .lg.mp-st.cg-c{transform:translate(-50%,-50%)}

/* case 03's panel (illus/case-scratch-panel.mjs): its own parts, on the panel kit */
.mp .cs-ln{fill:none;stroke:var(--f-ink);stroke-width:1.4;vector-effect:non-scaling-stroke}
.mp .cs-swo{fill:none;stroke:var(--f-ink);stroke-width:1.2;stroke-dasharray:3 3;opacity:.5;vector-effect:non-scaling-stroke}
.mp .cs-sw0{fill:#E9E5D8}.mp .cs-sw1{fill:#8E968F}
.mp .cs-sw2{fill:#151817;stroke:#A9AFA6;stroke-width:1.2;vector-effect:non-scaling-stroke}
.mp .cs-tb{fill:var(--f-ink)}
.mp .cs-pl{fill:none;stroke:var(--f-ink);stroke-width:4.5}
.mp .cs-ink{fill:var(--f-ink)}
.mp .cs-addl{fill:none;stroke:#151817;stroke-width:2.4}
.mp .cs-pr{fill:#2A1715;stroke:var(--f-bad);stroke-width:1.4;vector-effect:non-scaling-stroke}
.mp .cs-blank{fill:var(--f-scr)}
.mp .cs-cd{fill:#151817;stroke:#3A403C;stroke-width:1;vector-effect:non-scaling-stroke}
.mp .cs-cdl{fill:none;stroke:var(--f-ink);stroke-width:1.4;vector-effect:non-scaling-stroke}
.mp .cs-g{fill:none;stroke:#59615B;stroke-width:1.2;vector-effect:non-scaling-stroke}
.mp .cs-gl{fill:none;stroke:var(--f-ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
/* status lines aligned at every width: left edge (cs-l) or centre (cs-c) on the anchor */
.mp-fig .lg.mp-st.cs-l{transform:translate(0,-50%)}
.mp-fig .lg.mp-st.cs-c{transform:translate(-50%,-50%)}
/* at 320 the storefront's name keeps inside its plate (the checks sit on the same row) */
@container (max-width:280px){.mp-fig .lg.np[data-at=np-lsf]{letter-spacing:.02em}}
/* case 03's text: the link to the local storefront's repository, in the text's colour, underlined in the system blue */
.cx-b a.cs-ln{color:var(--text);text-decoration:underline;text-decoration-color:var(--ai);text-decoration-thickness:2px;text-underline-offset:3px}
/* case 03's facts readout: fourteen components rebuilt from their cards, thirteen alike (one LED at rest) */
.cx-leds.cs-14{gap:1px}.cx-leds.cs-14 i{width:3px;height:3px}
.cx-leds i.cs-rest{background:#3C403D;box-shadow:none}
@media (min-width:900px){.cx-leds.cs-14{gap:3px}.cx-leds.cs-14 i{width:6px;height:6px}}