/* PILF · the rack (static/rack.css): every quiz's results story. Sep 25, 2026 [C, on his Sep 24 notes; research/quiz_story_research.md].
   A 9:16 slide in the middle, its neighbours rotated, scaled and faded either side (static/rack.js sets their poses); the bar row over it, with
   Pause/Play first; Share · Save image and the icons under it. Everything inside a slide is sized in container units of the slide (cqw, cqh),
   so the slide on a phone is a small copy of the 1080×1920 image it saves; floors keep the words readable. Site tokens from pilf.css; square
   corners. Only transform and opacity move. */
.rk { --sh: clamp(380px, calc(100svh - 300px), 720px); display: flex; flex-direction: column; gap: 8px; min-width: 0;
  margin-inline: -22px; padding-inline: 22px; overflow: hidden; }   /* out to the screen's edges, so the neighbours show */
@supports (overflow: clip) { .rk { overflow: visible; overflow-x: clip; } }
.rk [hidden] { display: none !important; }
:where(.rk) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
:where(.rk) img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rk h2 { margin: 0; }

/* the bar row: Pause/Play, then one bar a slide, filling as it plays */
.rk-top { display: flex; align-items: center; gap: 2px; width: min(100%, calc(var(--sh) * .5625 + 24px)); margin: 0 auto; }
.rk-play { flex: none; width: 44px; height: 44px; display: grid !important; place-items: center; margin-left: -12px; color: var(--forest); }
.rk-play svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.rk-bars { flex: 1; display: flex; min-width: 0; }
.rk-bar { flex: 1; height: 44px; min-width: 0; display: grid !important; align-items: center; padding: 0 2px !important; }
.rk-bar > span { display: block; height: 4px; background: var(--ink-15); overflow: hidden; }
.rk-bar i { display: block; height: 100%; background: var(--forest); transform: scaleX(0); transform-origin: 0 50%; }
.rk-bar.done i, .rk-bar.on i { transform: scaleX(1); }
.rk-bar.on.run i { animation: rk-fill var(--dw, 6s) linear both; }
.rk.rk-stopped .rk-bar.run i, .rk.rk-held .rk-bar.run i { animation-play-state: paused; }
@keyframes rk-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the rack */
.rk-stage { position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rk-vp { position: relative; width: min(100%, calc(var(--sh) * .5625)); aspect-ratio: 9 / 16; margin: 0 auto; container-type: size; }
.rk-vp img { -webkit-user-drag: none; }
.rk-sl { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.5cqw 7.4cqw 4.5cqw; overflow: hidden; min-width: 0;
  transform-origin: 50% 50%; backface-visibility: hidden; box-shadow: 0 14px 30px -20px rgba(29,33,30,.55); }
@media (prefers-reduced-motion: no-preference) {
  .rk:not(.still):not(.rk-drag):not(.rk-glide):not(.rk-init) .rk-sl { transition: transform var(--rk-dur, .48s) cubic-bezier(.22,.8,.24,1), opacity var(--rk-dur, .48s) cubic-bezier(.22,.8,.24,1); }
}
.rk-sl::after { content: ""; position: absolute; inset: 0; background: var(--ground); opacity: var(--dim, 0); pointer-events: none; z-index: 5; }   /* the neighbours' fade */
@media (prefers-reduced-motion: no-preference) {
  .rk:not(.still):not(.rk-drag):not(.rk-glide):not(.rk-init) .rk-sl::after { transition: opacity var(--rk-dur, .48s) cubic-bezier(.22,.8,.24,1); }
}
.rk.still:not(.rk-init) .rk-sl, .rk.still:not(.rk-init) .rk-sl::after { transition: opacity .12s linear; }   /* reduced motion: a 120 ms crossfade, nothing slides */
.rk-sl:not(.on) { pointer-events: none; }
.rk-sl.bg-forest { background: var(--forest); color: var(--ground); --soft: rgba(247,244,238,.78); --acc: var(--ground); --pg: rgba(247,244,238,.1); --trk: rgba(247,244,238,.18); --bgc: var(--forest); }
.rk-sl.bg-ground { background: var(--ground); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-15), 0 14px 30px -20px rgba(29,33,30,.55); --soft: rgba(29,33,30,.7); --acc: var(--forest); --pg: rgba(31,61,43,.07); --trk: rgba(29,33,30,.1); --bgc: var(--ground); }
.rk-sl-top { display: flex; align-items: center; justify-content: space-between; flex: none; }
.rk-wm svg { height: max(18px, 6.5cqw); width: auto; display: block; }
.rk-kick { font-family: var(--font-name); font-weight: 600; font-size: max(10px, 2.8cqw); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.rk-in { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.6cqh; text-align: center; padding: 2cqh 0 1cqh; }
.rk-foot { flex: none; text-align: center; font-family: var(--font-name); font-weight: 600; font-size: max(8px, 3cqw); letter-spacing: .06em; color: var(--soft); white-space: nowrap; }   /* one line, even pilf.me/quiz/what-plant-am-i at 360px */

/* a plant: the cut-out whole, the photo in a frame, the specimen label (no photo, no cut-out: the name set large, the botanical name, the mark,
   no box [his brief: the grey leaf in a white box was ugly]), or just the mark when it's small */
.rk-pic0 { display: block; width: 100%; height: 100%; }
.rk-pic0 picture { display: block; width: 100%; height: 100%; }
.rk-pic0.cut img { object-fit: contain; }
.rk-pic0.framed { padding: 7%; background: #fff; box-shadow: inset 0 0 0 1px var(--ink-15); }
.bg-forest .rk-pic0.framed { background: var(--ground); box-shadow: none; }
.rk-pic0.none { display: grid; place-items: center; color: var(--acc, var(--forest)); opacity: .8; } .rk-pic0.none svg { width: 58%; height: 58%; }
.rk-spec { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqh; width: 100%; height: 100%; color: inherit; text-align: center; }
.rk-spec-m { display: block; width: 26cqw; height: 26cqw; color: var(--acc, var(--forest)); }
.rk-spec-m svg { width: 100%; height: 100%; display: block; }
.rk-spec b { font-family: var(--font-name); font-weight: 800; font-size: max(24px, 10cqw); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; padding-top: 1.6cqh; position: relative; }
.rk-spec b::before { content: ""; position: absolute; left: 50%; top: 0; width: 12cqw; height: 2px; margin-left: -6cqw; background: var(--soft); }
.rk-spec i { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: max(12px, 4.4cqw); line-height: 1.3; color: var(--soft); }

/* blocks (rack.js › BLOCKS): the same sizes the share image uses, 1 u = 1cqw */
.rk-k2 { font-family: var(--font-name); font-weight: 650; font-size: max(10.5px, 3cqw); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); margin-bottom: -1.2cqh; }
.rk-h { font-family: var(--font-name); font-weight: 700; font-size: max(20px, 8.4cqw); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; max-width: 100%; }
.rk-h.l { font-size: max(22px, 9.6cqw); } .rk-h.xl { font-weight: 800; font-size: max(26px, 11cqw); line-height: 1.02; }
.rk-sub { margin: -1cqh 0 0; font-family: var(--font-name); font-weight: 650; font-size: max(12.5px, 4.2cqw); line-height: 1.3; color: var(--soft); }
.rk-p { margin: 0; font-size: max(13px, 4.4cqw); line-height: 1.38; max-width: 96%; } .rk-p.soft { color: var(--soft); }
.rk-big { margin: 0; font-family: var(--font-name); font-weight: 800; font-size: max(40px, 15cqw); line-height: 1; letter-spacing: -.03em; }
.rk-big small { font-size: .5em; } .rk-big span { font-size: max(13px, 4.2cqw); font-weight: 650; letter-spacing: 0; color: var(--soft); }
.rk-pic { flex: 1 1 0; min-height: 16cqh; width: 100%; display: flex; justify-content: center; }
.rk-pic > .rk-pic0 { width: 100%; height: 100%; }
.rk-pic > .rk-pic0.framed { width: auto; aspect-ratio: 1; max-width: 100%; }
.rk-art { display: block; height: 100%; aspect-ratio: 120 / 132; color: var(--acc); }
.rk-art svg { width: 100%; height: 100%; display: block; }
.rk-rows { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 3cqh; text-align: left; }
.rk-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4cqw; align-items: center; }
.rk-th { display: block; width: 22cqw; height: 22cqw; flex: none; } .rk-rows.two .rk-th { width: 27cqw; height: 27cqw; }
.rk-rows li > span:last-child { display: flex; flex-direction: column; gap: .6cqw; min-width: 0; }
.rk-rk { font-family: var(--font-name); font-weight: 700; font-size: max(9.5px, 2.8cqw); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.rk-rows b { font-family: var(--font-name); font-weight: 800; font-size: max(15px, 5.4cqw); line-height: 1.12; }
.rk-rs { font-size: max(12px, 3.7cqw); line-height: 1.35; color: var(--soft); }
.rk-rows.sm { gap: 2cqh; } .rk-rows.sm b { font-size: max(13px, 4.6cqw); } .rk-rows.sm .rk-rs { font-size: max(11px, 3.4cqw); }
.rk-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4cqh; }
.rk-facts li { display: flex; flex-direction: column; gap: .8cqh; }
.rk-facts b { font-family: var(--font-name); font-weight: 800; font-size: max(20px, 7.6cqw); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.rk-facts span { font-size: max(12.5px, 4.1cqw); line-height: 1.35; color: var(--soft); }
.rk-facts.sm { gap: 2.6cqh; } .rk-facts.sm b { font-size: max(17px, 6cqw); } .rk-facts.sm span { font-size: max(12px, 3.7cqw); }
.rk-bars2 { width: 100%; display: flex; flex-direction: column; gap: 3.2cqh; text-align: left; }
.rk-bars2.sm { gap: 2.2cqh; }
.rk-bh { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-name); font-weight: 700; font-size: max(12.5px, 4.2cqw); line-height: 1.3; margin-bottom: 1.2cqw; }
.rk-bars2.sm .rk-bh { font-size: max(12px, 3.6cqw); }
.rk-bh b { font-weight: 700; }
.rk-bt { position: relative; height: .8cqw; min-height: 3px; background: var(--trk); margin: .5cqw 0; }
.rk-bt:not(.fill)::after { content: ""; position: absolute; left: 50%; top: -1.3cqw; bottom: -1.3cqw; width: 1px; background: var(--soft); }
.rk-bt i { position: absolute; top: 50%; width: 3.2cqw; height: 3.2cqw; min-width: 11px; min-height: 11px; border-radius: var(--radius-dot); transform: translate(-50%, -50%); z-index: 1; }
.rk-bt i.me { background: var(--acc); box-shadow: 0 0 0 2px var(--bgc); z-index: 2; }
.rk-bt i.it { background: var(--bgc); box-shadow: inset 0 0 0 2px var(--soft); }
.rk-bt i.f { left: 0; top: 0; bottom: 0; height: auto; min-height: 0; min-width: 0; border-radius: var(--radius-none); transform: none; background: var(--acc); }
.rk-bl { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-name); font-weight: 600; font-size: max(10px, 3cqw); color: var(--soft); margin-top: 1.2cqw; }
.rk-bars2.sm .rk-bl { font-size: max(9.5px, 2.7cqw); }
.rk-let { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.rk-let span { display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.rk-let b { font-family: var(--font-name); font-weight: 800; font-size: max(36px, 16cqw); line-height: 1; }
.rk-let i { font-style: normal; font-family: var(--font-name); font-weight: 650; font-size: max(10.5px, 3.4cqw); color: var(--soft); }
.rk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw; width: 100%; }
.rk-pair > div { display: flex; flex-direction: column; align-items: center; gap: 1cqw; min-width: 0; }
.rk-pb { font-family: var(--font-name); font-weight: 800; font-size: max(24px, 9cqw); line-height: 1; letter-spacing: .04em; }
.rk-pn { font-family: var(--font-name); font-weight: 700; font-size: max(12.5px, 4cqw); line-height: 1.15; margin-bottom: .6cqw; }
.rk-pp { display: block; width: 30cqw; height: 30cqw; margin: .6cqw 0; }
.rk-pair .rk-rs { font-size: max(11px, 3.4cqw); }
.rk-dl { margin: 0; width: 100%; display: flex; flex-direction: column; gap: 2.8cqh; text-align: left; }
.rk-dl dt { font-family: var(--font-name); font-weight: 700; font-size: max(9.5px, 2.9cqw); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin-bottom: 1cqw; }
.rk-dl dd { margin: 0; font-size: max(13px, 4.4cqw); line-height: 1.35; }
.rk-take { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 16px; background: var(--forest); color: #fff !important; text-decoration: none;
  font-family: var(--font-name); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.bg-forest .rk-take { background: var(--ground); color: var(--forest) !important; }
.rk-links { margin: -1cqh 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; }
.rk-links a { min-height: 44px; display: inline-flex; align-items: center; font-family: var(--font-name); font-weight: 650; font-size: max(12.5px, 3.8cqw); color: inherit; text-underline-offset: 3px; }

/* under the rack: back and forward, Share and Save image, then the icons */
.rk-nav { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; margin: 4px auto 0; }
.rk-arrow { flex: none; width: 44px; height: 44px; display: grid !important; place-items: center; border: 1px solid var(--ink-15) !important; background: #fff !important; font-size: 22px !important; line-height: 1; color: var(--forest) !important; text-align: center !important; }
.rk-arrow[aria-disabled="true"] { opacity: .35; cursor: default; }
.rk-acts { flex: 1; display: flex; gap: 8px; min-width: 0; } .rk-acts.off { visibility: hidden; }
.rk-btn { flex: 1; min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--forest) !important; background: #fff !important; color: var(--forest) !important;
  font-family: var(--font-name) !important; font-weight: 650; font-size: 14px; letter-spacing: .02em; white-space: nowrap; text-align: center !important; }
.rk-btn svg { width: 17px; height: 17px; flex: none; }
.rk-btn:first-child { background: var(--forest) !important; color: #fff !important; }
.rk-icons { display: flex; justify-content: center; gap: 4px; }
.rk-icons a, .rk-icons button { width: 44px; height: 44px; display: grid !important; place-items: center; color: var(--ink) !important; text-decoration: none; }
.rk-icons a:hover, .rk-icons button:hover { color: var(--forest) !important; }
.rk-icons svg { width: 21px; height: 21px; } .rk-icons svg:not([fill="none"]) { fill: currentColor; }
.rk > .btn { width: 100%; max-width: 420px; margin: 0 auto; }