/* As Seen on TV — the episode frame, shared by all five episode pages
   (the four on episode.css and the Honest Spiral, which keeps its own sheet).
   Hero motif (drawn by episode-hero.js), the stamped verdict, slider tracks,
   and the floor: ruler dividers, alternating bands, test-card bars. */

/* ---- the opening frame ---------------------------------------------------- */
header.mast[data-motif]{isolation:isolate;overflow:visible;padding-block:clamp(36px,7vh,68px) 34px}
.wrap>.crumb{position:relative;z-index:3}
.mast[data-motif] .ghost{display:none}
.mast-bg{position:absolute;z-index:-1;top:-74px;bottom:0;left:50%;width:100vw;margin-left:-50vw;pointer-events:none;overflow:hidden}
.mast-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* CRT scanlines, then the scrim that keeps the headline the hero */
.mast-bg::before{content:'';position:absolute;inset:0;z-index:1;opacity:.55;
  background:repeating-linear-gradient(0deg,rgba(12,9,6,.45) 0 1px,transparent 1px 3px)}
.mast-bg::after{content:'';position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(28,21,16,0) 55%,var(--bark) 100%),
    linear-gradient(90deg,rgba(28,21,16,.94) 0,rgba(28,21,16,.86) calc(50% - 120px),rgba(28,21,16,.35) calc(50% + 260px),rgba(28,21,16,.1) 100%)}
/* test-card bars: the TV in the wing's name, in house colours */
header.mast[data-motif]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;pointer-events:none;
  background:
    linear-gradient(90deg,var(--parchment-dim) 0 14.3%,var(--gold) 0 28.6%,var(--slate) 0 42.9%,var(--moss) 0 57.1%,var(--brass) 0 71.4%,var(--clay) 0 85.7%,var(--ember) 0) 0 0/196px 5px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 2px/100% 1px no-repeat}
.mast[data-motif] .stats{gap:16px 34px}
.mast[data-motif] .stat{border-left:1px solid rgba(201,168,106,.35);padding-left:12px}
.mast[data-motif] .stat b{text-shadow:0 0 24px rgba(232,131,58,.25)}
.mast[data-motif] .chip.receipt{background:rgba(28,21,16,.7)}

/* ---- the stamped verdict -------------------------------------------------- */
.verdict-panel{--vk:var(--ember);position:relative;border-top:3px solid var(--vk);
  background:linear-gradient(180deg,color-mix(in srgb,var(--vk) 7%,transparent),transparent 160px),var(--bark-2);
  box-shadow:0 28px 60px -34px rgba(0,0,0,.75)}
.verdict-panel[data-kind="holds"]{--vk:var(--moss)}
.verdict-panel[data-kind="different-reason"]{--vk:var(--ember)}
.verdict-panel[data-kind="nothing-there"]{--vk:var(--slate)}
.verdict-panel .verdict-kind{margin:14px 0 2px}
.verdict-panel .chip.verdict{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;letter-spacing:.2em;
  padding:10px 18px 10px 14px;color:var(--vk);border:2px solid var(--vk);border-radius:5px;
  background:color-mix(in srgb,var(--vk) 9%,var(--bark-2));
  box-shadow:inset 0 0 0 3px var(--bark-2),inset 0 0 0 4px color-mix(in srgb,var(--vk) 60%,transparent);
  transform:rotate(-2.2deg);transform-origin:30% 50%;white-space:normal}
/* the kind as a shape, never colour alone */
.verdict-panel .chip.verdict::before{content:'';flex:none;width:16px;height:16px;box-sizing:border-box;
  border:2.5px solid currentColor;border-radius:50%}
/* same shapes as the wing index badges: full disc, half disc, slashed ring */
.verdict-panel[data-kind="holds"] .chip.verdict::before{background:currentColor}
.verdict-panel[data-kind="different-reason"] .chip.verdict::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.verdict-panel[data-kind="nothing-there"] .chip.verdict::before{
  background:linear-gradient(135deg,transparent calc(50% - 1.2px),currentColor calc(50% - 1.2px),currentColor calc(50% + 1.2px),transparent calc(50% + 1.2px))}
.verdict-panel.is-stamping .chip.verdict{animation:astv-stamp .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes astv-stamp{0%{opacity:0;transform:rotate(-7deg) scale(1.7)}55%{opacity:1;transform:rotate(-1.6deg) scale(.95)}100%{opacity:1;transform:rotate(-2.2deg) scale(1)}}
.verdict-panel .verdict-line{margin-top:14px}
.verdict-panel .findings div{border-left-color:color-mix(in srgb,var(--vk) 45%,var(--line))}
@media (min-width:901px){
  .verdict-panel{padding-top:24px}
  .verdict-panel .verdict-kind{position:absolute;top:-21px;right:26px;margin:0}
  .verdict-panel .verdict-line{margin-top:12px}
}

/* ---- sliders -------------------------------------------------------------- */
.wrap input[type=range]{--rk:var(--ember);-webkit-appearance:none;appearance:none;background:transparent;height:30px;margin:0;cursor:pointer;accent-color:var(--rk)}
.wrap input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--rk) var(--fill,50%),var(--line) var(--fill,50%))}
.wrap input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
.wrap input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--rk)}
.wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;
  background:var(--parchment);border:3px solid var(--rk);box-shadow:0 0 0 3px rgba(28,21,16,.9),0 2px 8px rgba(0,0,0,.5);transition:transform .12s ease-out}
.wrap input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--parchment);border:3px solid var(--rk);box-shadow:0 0 0 3px rgba(28,21,16,.9)}
.wrap input[type=range]:hover::-webkit-slider-thumb,.wrap input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
.wrap input[type=range]:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}
.wrap input[type=range]:disabled{opacity:.4;cursor:not-allowed}

/* ---- the floor ------------------------------------------------------------ */
.wrap>section:not(.verdict-panel){position:relative;isolation:isolate}
.wrap>section:not(.verdict-panel)::before{content:'';display:block;height:9px;margin-bottom:26px;
  background:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 12px) 0 100%/100% 6px no-repeat,
    repeating-linear-gradient(90deg,var(--brass) 0 1px,transparent 1px 120px) 0 100%/100% 9px no-repeat,
    linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent);opacity:.8}
/* every other section sits on a band, so a long page has rhythm */
.wrap>section:not(.verdict-panel):nth-of-type(odd){padding-block:30px 40px}
.wrap>section:not(.verdict-panel):nth-of-type(odd)::after{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;
  background:
    repeating-linear-gradient(0deg,rgba(236,225,204,.018) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,rgba(36,27,19,.0),rgba(36,27,19,.85) 60px,rgba(36,27,19,.85) calc(100% - 60px),rgba(36,27,19,0));
  border-block:1px solid rgba(74,59,40,.35)}
.sec-num{border:1px solid var(--line);border-radius:3px;padding:3px 7px 3px 9px;background:rgba(43,33,23,.7);line-height:1.3}
.wrap>footer{border-top:1px solid var(--line);position:relative}
.wrap>footer::before{content:'';position:absolute;left:0;top:-3px;width:196px;height:5px;
  background:linear-gradient(90deg,var(--parchment-dim) 0 14.3%,var(--gold) 0 28.6%,var(--slate) 0 42.9%,var(--moss) 0 57.1%,var(--brass) 0 71.4%,var(--clay) 0 85.7%,var(--ember) 0)}

@media (max-width:760px){
  .mast-bg{top:-60px}
  .mast-bg::after{background:
    linear-gradient(180deg,rgba(28,21,16,.25) 0,rgba(28,21,16,.8) 46%,var(--bark) 100%),
    linear-gradient(90deg,rgba(28,21,16,.6) 0,rgba(28,21,16,.1) 100%)}
}
@media (max-width:560px){
  .wrap input[type=range]{height:44px}
}
@media (prefers-reduced-motion:reduce){
  .verdict-panel.is-stamping .chip.verdict{animation:none}
}
/* the Honest Spiral's instrument panels: pressed = lit, not just outlined */
.hud .seg button[aria-pressed="true"]{background:rgba(232,131,58,.15);border-color:rgba(232,131,58,.75);box-shadow:none}