/* Halftime Package
 * Layout: a quiet magazine column (36rem serif measure; margin notes from 1100px) with broadcast-graphics
 * interactives that run edge to edge on a phone and step a little past the column on desktop.
 * Color: cool paper + navy ink for reading; the broadcast world is a navy panel, white type and one
 * signal cyan. Verdict colors are semantic and never double as the accent. */
:root {
  --paper: #f2f4f7;
  --paper-2: #e6eaf0;
  --ink: #111827;
  --ink-2: #4a5466;
  --rule: #cbd3de;
  --link: #075c99;
  --field: #ffffff;

  --bug: #0c1a2d;
  --bug-2: #132640;
  --bug-3: #22395a;
  --bug-ink: #f2f5f9;
  --bug-dim: #9aabc2;
  --signal: #2cb9f2;
  --on-signal: #04121f;
  --held: #566e94;
  --clock: #05070b;
  --edge: #0c1a2d;
  --btn: #0c1a2d;
  --btn-ink: #f2f5f9;
  --clock-ink: #f6f8fb;

  --v-correct: #3ad384;
  --v-partial: #f4c44a;
  --v-wrong: #ff6a6f;
  --v-correct-ink: #11703f;
  --v-partial-ink: #855e00;
  --v-wrong-ink: #b1232b;

  --mark: #d1232b;            /* telestrator marker (ported from Film Study at Nick's request) */
  --field-edge: #0c1a2d;      /* the answer box's underline */
  --mark-on-bug: #ff5a54;     /* the same marker on navy broadcast panels */

  --f-body: "Newsreader", "Iowan Old Style", Charter, "Palatino Linotype", Georgia, serif;
  --f-ui: "Sofia Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-cond: "Sofia Sans Extra Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;

  --col: 36rem;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c1017; --paper-2: #151b25; --ink: #e4e8ee; --ink-2: #a2adbc; --rule: #283240; --link: #6ccbf5; --field: #0f1520;
    --bug: #13233a; --bug-2: #1a2e4a; --bug-3: #2a4366; --edge: #2a4366; --btn: #3cc4f5; --btn-ink: #04121f; --bug-ink: #f2f5f9; --bug-dim: #a3b5cc; --signal: #3cc4f5; --on-signal: #04121f; --held: #5a7399;
    --v-correct: #45d98d; --v-partial: #f5c955; --v-wrong: #ff7a7e; --v-correct-ink: #5cd69a; --v-partial-ink: #efc456; --v-wrong-ink: #ff8f93;
    --mark: #ff6863; --mark-on-bug: #ff6a63; --field-edge: #a3b5cc;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --mark: #ff6863; --mark-on-bug: #ff6a63; --field-edge: #a3b5cc;
  --paper: #0c1017; --paper-2: #151b25; --ink: #e4e8ee; --ink-2: #a2adbc; --rule: #283240; --link: #6ccbf5; --field: #0f1520;
  --bug: #13233a; --bug-2: #1a2e4a; --bug-3: #2a4366; --edge: #2a4366; --btn: #3cc4f5; --btn-ink: #04121f; --bug-ink: #f2f5f9; --bug-dim: #a3b5cc; --signal: #3cc4f5; --on-signal: #04121f; --held: #5a7399;
  --v-correct: #45d98d; --v-partial: #f5c955; --v-wrong: #ff7a7e; --v-correct-ink: #5cd69a; --v-partial-ink: #efc456; --v-wrong-ink: #ff8f93;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ page + reading column */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 1.125rem; line-height: 1.62; font-optical-sizing: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 2.25rem 5rem;
  container-type: inline-size;
  overflow-wrap: break-word;
}
.jb-essay {
  --room: max(0px, (100cqw - var(--col)) / 2);
  --bleed: min(6rem, var(--room));
  max-width: var(--col); margin-inline: auto; position: relative;
}
.jb-loading { font-family: var(--f-ui); color: var(--ink-2); }
.jb-section { position: relative; }
p { margin: 0 0 1.05em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 650; }
em { font-style: italic; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ol, ul { padding-left: 1.35em; margin: 0 0 1.1em; }
li { margin-bottom: .35em; padding-left: .15em; }
ol li::marker { font-family: var(--f-cond); font-weight: 700; font-size: 1.05em; color: var(--ink-2); }
ul li::marker { color: var(--ink-2); }
code { font-size: .88em; }
.wikilink, .placeholder { text-decoration: underline dotted; text-decoration-color: var(--ink-2); text-underline-offset: .2em; }
a.placeholder { color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.hp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hp-header { padding-bottom: 1.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.hp-kicker { font: 600 .78rem/1.4 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1rem; }
.hp-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.hp-topbar .hp-kicker { margin-bottom: 0; }
.hp-theme { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; flex: none;
  width: 64px; height: 34px; padding: 3px; border: 0; border-radius: 999px; background: var(--bug); cursor: pointer; }
.hp-theme-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: var(--bug-3); transition: transform .25s var(--ease); }
.hp-theme.is-dark .hp-theme-thumb { transform: translateX(100%); }
.hp-theme-i { position: relative; display: grid; place-items: center; color: var(--bug-dim); transition: color .25s var(--ease); }
.hp-theme:not(.is-dark) .is-sun, .hp-theme.is-dark .is-moon { color: var(--bug-ink); }
.hp-theme-i svg { display: block; width: 15px; height: 15px; }
.hp-theme::before { content: ""; position: absolute; inset: -5px; } /* keeps a 44px-tall tap target around the smaller pill */
@media (prefers-reduced-motion: reduce) { .hp-theme-thumb, .hp-theme-i { transition: none; } }
.hp-theme:hover .hp-theme-thumb { filter: brightness(1.15); }
.hp-theme:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.hp-title { font: 600 3.1rem/1 var(--f-body); font-variation-settings: "opsz" 72; letter-spacing: -.025em; margin: 0 0 .6rem; text-wrap: balance; }
.hp-dek { font: italic 400 1.25rem/1.4 var(--f-body); color: var(--ink-2); margin: 0; text-wrap: pretty; }

.hp-h2 {
  font: 600 1.85rem/1.1 var(--f-body); font-variation-settings: "opsz" 60; letter-spacing: -.015em;
  margin: 3rem 0 1.1rem; padding-top: .9rem; border-top: 3px solid var(--ink); text-wrap: balance;
}

.hp-figure { margin-block: 1.75rem; }
.hp-figure img { width: 100%; }
.hp-figcap { display: flex; gap: .6rem; align-items: baseline; font: 500 .82rem/1.4 var(--f-ui); color: var(--ink-2); margin-top: .5rem; }
.hp-tc { font: 700 .9rem/1 var(--f-cond); letter-spacing: .04em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* sidenotes: inline cards on phones, margin notes on wide screens */
.sn-ref {
  font: 700 .72rem/1 var(--f-ui); color: var(--link); background: none; border: 0; cursor: pointer;
  vertical-align: super; padding: .55em .35em; margin: -.55em -.1em -.55em 0;
  position: relative;
}
/* QA: a 44px-tall tap area around the superscript, without touching the line box */
.sn-ref::after { content: ""; position: absolute; inset: -10px -12px; }
.sidenote { position: relative; font: 400 .94rem/1.55 var(--f-ui); color: var(--ink-2); margin: 0 0 1.5rem; padding: .9rem 1rem 1rem; background: var(--paper-2); border-top: 3px solid var(--ink-2); }
.sidenote p, .sidenote ul { margin-bottom: .7em; }
.sidenote ul { padding-left: 1.1em; }
.sidenote-n { display: block; font: 700 .8rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: .55rem; }
.sidenote-body > :last-child { margin-bottom: 0; }
.sidenote.is-long:not([data-open="true"]) .sidenote-body { max-height: 12.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.sn-more { margin-top: .5rem; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font: 700 .85rem/1 var(--f-ui); color: var(--link); text-decoration: underline; text-underline-offset: .2em; }

/* ------------------------------------------------------------------ broadcast primitives */
.hp-wide { margin-block: 2rem; }
.hp-panel { background: var(--bug); color: var(--bug-ink); padding-block: 1rem 1.15rem; padding-inline: 1rem; font-family: var(--f-ui); }
.hp-panel a { color: var(--signal); }
@media (max-width: 719.98px) {
  .hp-wide { margin-left: calc(-1 * var(--gl)); margin-right: calc(-1 * var(--gr)); }
  .hp-panel.hp-wide, .hp-wide > .hp-call, .hp-wide > .hp-feed { padding-left: var(--gl); padding-right: var(--gr); }
}
@media (min-width: 720px) {
  .hp-wide { margin-inline: calc(-1 * var(--bleed)); }
  .hp-panel, .hp-call, .hp-feed { padding-inline: 1.5rem; }
}

.hp-strip { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem; margin-bottom: .9rem; }
.hp-tag {
  display: inline-block; font: 800 .82rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase;
  background: var(--signal); color: var(--on-signal); padding: .36em .95em .3em .6em;
  clip-path: polygon(0 0, 100% 0, calc(100% - .5em) 100%, 0 100%);
}
.hp-strip-meta { font: 600 .74rem/1.3 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; color: var(--bug-dim); min-width: 0; }
.hp-src { font: 500 .74rem/1.4 var(--f-ui); letter-spacing: .02em; color: var(--bug-dim); margin: 0; }

.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 48px; padding: 0 1.15rem;
  font: 800 1.02rem/1 var(--f-cond); letter-spacing: .09em; text-transform: uppercase;
  background: var(--signal); color: var(--on-signal); border: 0; border-radius: 0; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-right: 1.5rem;
}
.hp-btn:hover { filter: brightness(1.08); }
.hp-btn:active { transform: translateY(1px); }
.hp-btn:focus-visible { outline: 3px solid var(--bug-ink); outline-offset: 3px; clip-path: none; }
.hp-btn-ghost { background: transparent; color: var(--bug-ink); box-shadow: inset 0 0 0 1.5px var(--bug-3); clip-path: none; padding: 0 1rem; }
.hp-btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--bug-dim); filter: none; }
.hp-ico { display: inline-flex; line-height: 0; }
.hp-link { min-height: 44px; padding: 0 .35rem; background: none; border: 0; cursor: pointer; font: 600 .92rem/1 var(--f-ui); text-decoration: underline; text-underline-offset: .2em; }

/* lower-third: tag block + title bar */
.hp-l3 { display: flex; align-items: stretch; max-width: 100%; }
.hp-l3-tag {
  flex: none; display: flex; align-items: center; gap: .4rem; padding: 0 1.1rem 0 .7rem;
  background: var(--signal); color: var(--on-signal); font: 800 .82rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); margin-right: -8px; position: relative; z-index: 1;
}
.hp-l3-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; padding: .6rem .9rem .65rem 1.1rem; background: var(--bug-2); color: var(--bug-ink); }
.hp-l3-kicker { font: 600 .72rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bug-dim); }
.hp-l3-title { font: 800 1.55rem/1 var(--f-cond); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.hp-l3-sub { font: 500 .8rem/1.35 var(--f-ui); color: var(--bug-dim); display: flex; flex-wrap: wrap; gap: .2rem .8rem; }

.hp-l3.is-stacked { flex-direction: column; align-items: flex-start; }
.hp-l3.is-stacked .hp-l3-tag { margin: 0; padding: .48em 1.25em .42em .75em; min-height: 0; }
.hp-l3.is-stacked .hp-l3-main { align-self: stretch; padding: .65rem .9rem .75rem; border-left: 3px solid var(--signal); }

/* entrances: one per graphic, all off under reduced motion */
@keyframes hp-slide { from { transform: translateX(-18px); clip-path: inset(0 100% 0 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
@keyframes hp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes hp-slam { 0% { transform: scale(1.18); opacity: 0; } 60% { transform: scale(.98); opacity: 1; } 100% { transform: none; } }
@keyframes hp-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hp-scan { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes hp-blink { 50% { opacity: .7; } }
.hp-in { animation: hp-slide .45s var(--ease) both; }
.hp-wipe-in { animation: hp-wipe .45s var(--ease) both; }
.hp-wipe .hp-feed-ref { animation: hp-wipe .5s var(--ease) .12s both; }
.hp-slam .hp-ruling-word { animation: hp-slam .42s var(--ease) both; }
.hp-slam .hp-ruling-counts, .hp-slam .hp-ruling-split { animation: hp-fade .3s var(--ease) .32s both; }
.hp-slam .hp-ruling-fb, .hp-slam .jb-verdict-source { animation: hp-fade .3s var(--ease) .45s both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ video */
.hp-video-link { display: block; text-decoration: none; color: inherit; }
.hp-shot { position: relative; display: block; background: var(--bug); }
.hp-shot img { width: 100%; }
.hp-video .hp-l3 { margin: -1.05rem var(--gr) 0 var(--gl); position: relative; }
.hp-l3-go { display: inline-flex; align-items: center; gap: .3rem; color: var(--signal); font-weight: 700; }
.hp-video-link:hover .hp-l3-go { text-decoration: underline; }
.hp-video-link:focus-visible { outline-offset: 4px; }
@media (min-width: 720px) {
  .hp-video .hp-l3 { position: absolute; left: 1.25rem; bottom: 1.25rem; margin: 0; max-width: calc(100% - 2.5rem); }
  .hp-video .hp-l3-main { padding-right: 1.5rem; }
  .hp-video-link { position: relative; }
  .hp-l3-title { font-size: 1.9rem; }
}

/* ------------------------------------------------------------------ timeline */
.hp-tl-area { position: relative; margin-top: .4rem; }
/* the numbers sit in the empty sky to the right of the cold-open spike; clicks pass through to the strip */
.hp-stats { position: absolute; top: 0; left: 16%; right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 0; pointer-events: none; }
.hp-stat { display: flex; flex-direction: column; gap: .2rem; padding: .1rem .7rem .2rem; min-width: 0; border-left: 1px solid var(--bug-3); }
.hp-stat-n { font: 800 2rem/1 var(--f-cond); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.hp-stat-l { font: 700 .68rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bug-dim); display: flex; align-items: center; gap: .3rem; }
.hp-sw { width: .6rem; height: .6rem; flex: none; }
.hp-sw.is-public { background: var(--bug-ink); }
.hp-sw.is-held { background: var(--held); }
.hp-tl-plot { touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.hp-tl-plot svg { display: block; overflow: visible; }
.hp-dot.is-public { fill: var(--bug-ink); }
.hp-dot.is-held { fill: var(--held); }
.hp-dot.is-sel { fill: var(--signal); }
.hp-baseline { stroke: var(--bug-dim); stroke-width: 1; }
.hp-tick { stroke: var(--bug-3); stroke-width: 1; }
.hp-tick.is-major { stroke: var(--bug-dim); }
.hp-tick-label { fill: var(--bug-dim); font: 700 11px var(--f-ui); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hp-playhead { stroke: var(--signal); stroke-width: 1.5; }
.hp-tl-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "prev clock next" "card card card"; gap: .8rem .6rem; margin-top: 1rem; align-items: stretch; }
.hp-tl-prev { grid-area: prev; } .hp-tl-next { grid-area: next; }
.hp-tl-foot .hp-btn { min-height: 44px; font-size: .95rem; padding: 0 .8rem; }
.hp-clock { grid-area: clock; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 4.6rem; padding: .45rem .55rem .5rem; background: var(--clock); color: var(--clock-ink); }
.hp-clock-l { font: 700 .6rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.hp-clock-t { font: 800 2rem/1 var(--f-cond); font-variant-numeric: tabular-nums; margin-top: .2rem; }
.hp-clock-t.is-idle { opacity: .4; }
.hp-pbp { grid-area: card; min-width: 0; min-height: 4.4rem; }
.hp-pbp p { margin: 0; }
.hp-pbp-hint { font: 500 .92rem/1.4 var(--f-ui); color: var(--bug-dim); padding-top: .3rem; }
.hp-pbp-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font: 700 .72rem/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bug-dim); }
.hp-pbp-t { font: 800 .95rem/1 var(--f-cond); color: var(--signal); letter-spacing: .04em; }
.hp-pbp-ev { font: 500 1rem/1.4 var(--f-ui); margin-top: .3rem !important; }
.hp-pbp-held { font: 600 1rem/1.4 var(--f-ui); color: var(--bug-dim); margin-top: .3rem !important; }
.hp-pbp-line.has-thumb { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: start; }
.hp-pbp-thumb { margin-top: .1rem; border: 1px solid var(--edge); }
.hp-pbp-thumb img { display: block; aspect-ratio: 1200 / 620; object-fit: cover; height: auto; }
@media (min-width: 720px) { .hp-pbp-line.has-thumb { grid-template-columns: 9.5rem minmax(0, 1fr); } }
.hp-pbp-go { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font: 700 .85rem/1 var(--f-ui); margin-top: .2rem; }
@media (min-width: 720px) {
  .hp-tl-foot { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "clock card prev next"; align-items: start; }
  .hp-stats { left: 12%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-stat-n { font-size: 2.6rem; }
}

/* ------------------------------------------------------------------ bookshelf / iso cams */
.hp-cam { display: flex; align-items: center; gap: .45rem; margin: 0 0 .4rem; font: 700 .7rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--bug-dim); }
.hp-cam-n { font: 800 .78rem/1 var(--f-cond); letter-spacing: .1em; color: var(--bug); background: var(--bug-ink); padding: .25em .45em .2em; }
.hp-wideshot { margin-bottom: 1rem; }
.hp-bug-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: .9rem; }
.hp-pips { display: flex; gap: 4px; flex: 0 0 auto; } /* four public pips only; the total stays vague */
.hp-pip { width: 22px; height: 12px; }
.hp-pip.is-open { box-shadow: inset 0 0 0 1.5px var(--signal); }
.hp-pip.is-found { background: var(--signal); }
.hp-pip.is-held { background: var(--held); }
.hp-count { margin: 0; font: 800 1.05rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.hp-isos { display: flex; gap: 8px; align-items: flex-start; }
.hp-iso { flex: 1 1 0; min-width: 0; }
.hp-iso-pic { position: relative; cursor: crosshair; line-height: 0; }
.hp-iso-pic img { width: 100%; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.hp-hotspot { position: absolute; padding: 0; margin: 0; background: transparent; border: 0; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.hp-hotspot:focus-visible { outline: 3px solid var(--signal); outline-offset: 1px; }
/* tracking-box corners, drawn only on a found book */
.hp-hotspot.is-found::before {
  content: ""; position: absolute; inset: -3px;
  background:
    linear-gradient(var(--signal), var(--signal)) top left / 10px 2.5px no-repeat,
    linear-gradient(var(--signal), var(--signal)) top left / 2.5px 10px no-repeat,
    linear-gradient(var(--signal), var(--signal)) top right / 10px 2.5px no-repeat,
    linear-gradient(var(--signal), var(--signal)) top right / 2.5px 10px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom left / 10px 2.5px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom left / 2.5px 10px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom right / 10px 2.5px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom right / 2.5px 10px no-repeat;
}
.hp-hotspot.is-open::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1.5px var(--signal); }
.hp-shelf-l3 { margin-top: 1rem; min-height: 3.5rem; }
.hp-shelf-l3:has(> .hp-shelf-hint) { min-height: 0; } /* the reserved height is for the Found card; a one-line hint left a gap above the button */
.hp-shelf-hint { font: 500 .95rem/1.45 var(--f-ui); color: var(--bug-dim); margin: 0; padding: .2rem 0; }
.hp-l3-book .hp-l3-tag { align-items: flex-start; padding-top: .75rem; }
.hp-l3-body { margin-top: .35rem; font: 500 .95rem/1.45 var(--f-ui); color: var(--bug-ink); }
.hp-l3-note { margin: 0; }
.hp-l3-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .7rem; }
.hp-l3-dl dt { font: 800 .78rem/1.6 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.hp-l3-dl dd { margin: 0; }
.hp-shelf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.hp-found { display: contents; }
.hp-chip-btn {
  min-height: 44px; padding: 0 .75rem; border: 0; cursor: pointer; background: var(--bug-2); color: var(--bug-ink);
  font: 700 .88rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 3px 0 0 var(--signal);
}
.hp-chip-btn.is-on { background: var(--bug-3); }
.hp-shelf .jb-shelf-show { min-height: 44px; font-size: .9rem; }

/* ------------------------------------------------------------------ erm breakdown */
.hp-track { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 0; margin: 0 0 1rem; }
.hp-track-seg { margin: 0; padding: .5rem .5rem .45rem; background: var(--bug-2); color: var(--bug-dim); font: 800 .9rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: .4rem; min-width: 0; border-bottom: 3px solid transparent; }
.hp-track-seg.is-on { color: var(--bug-ink); border-bottom-color: var(--signal); }
.hp-track-n { font-variant-numeric: tabular-nums; color: var(--signal); }
.hp-erm-steps { display: grid; gap: .75rem; }
.hp-erm-step { background: var(--bug-2); padding: .85rem .9rem .95rem; border-left: 3px solid var(--signal); }
.hp-erm-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .55rem; margin: 0 0 .55rem; font: 800 1.15rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.hp-erm-n { color: var(--signal); }
.hp-erm-sub { font: 600 .7rem/1 var(--f-ui); letter-spacing: .08em; color: var(--bug-dim); }
.hp-erm-text { font: 500 1.02rem/1.45 var(--f-ui); margin: 0; }
.hp-erm-body { display: grid; gap: .75rem; }
.hp-spine { display: block; width: 100%; max-width: 17rem; height: auto; }
.hp-erm-refs { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.hp-erm-refs li { margin: 0; padding: 0 0 0 1rem; position: relative; font: 600 1.02rem/1.4 var(--f-ui); }
.hp-erm-refs li::before { content: ""; position: absolute; left: 0; top: .5em; width: .45rem; height: .45rem; background: var(--signal); }
.hp-swap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .75rem; align-items: baseline; padding-top: .75rem; border-top: 1px solid var(--bug-3); }
.hp-swap-k { font: 700 .66rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--bug-dim); }
.hp-swap-line { font: 800 1.35rem/1.1 var(--f-cond); letter-spacing: .03em; text-transform: uppercase; }
.hp-swap-line mark { background: none; color: inherit; }
.hp-swap-line.is-orig { color: var(--bug-dim); }
.hp-swap-line.is-orig mark { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--v-wrong); }
.hp-swap-line.is-shown mark { background: var(--signal); color: var(--on-signal); padding: 0 .2em; }
.hp-erm-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

/* ------------------------------------------------------------------ review booth */
.hp-loop .hp-figure { margin-block: 1.75rem 1.5rem; }
.hp-badge { position: absolute; left: 0; top: 0; display: flex; align-items: stretch; font: 800 .9rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; background: var(--bug); color: var(--bug-ink); }
.hp-badge > * { padding: .4em .6em .35em; }
.hp-badge { padding-right: .6em; align-items: center; gap: .55em; }
.hp-badge-tag { background: var(--signal); color: var(--on-signal); }
.hp-loop .hp-figcap { padding-inline: var(--gl) var(--gr); }
@media (min-width: 720px) { .hp-loop .hp-figcap { padding-inline: 0; } }

.hp-feed { background: var(--bug); color: var(--bug-ink); padding-block: 1rem 1.1rem; padding-inline: 1rem; font-family: var(--f-ui); }
.hp-feed-p { font: 400 .98rem/1.5 var(--f-ui); color: var(--bug-ink); margin: 0 0 .75em; }
.hp-feed-p:last-child { margin-bottom: 0; }
.hp-feed.is-normal { border-top: 3px solid var(--bug-3); }
.hp-feed.is-referent { border-top: 3px solid var(--signal); }
.hp-feed-ref { font: 800 1.75rem/1.05 var(--f-cond); letter-spacing: .02em; text-transform: uppercase; color: var(--signal); margin: .1rem 0 .2rem; text-wrap: balance; }
.hp-feed-lock { display: flex; align-items: center; gap: .7rem; margin: 0; font: 600 .9rem/1.3 var(--f-ui); color: var(--bug-dim); }
.hp-lock-bar { flex: 0 0 5.5rem; height: 1.1rem; background: repeating-linear-gradient(135deg, var(--bug-3) 0 6px, transparent 6px 12px); }

.hp-call { background: var(--field); color: var(--ink); padding-block: 1rem 1.1rem; padding-inline: 1rem; font-family: var(--f-ui); box-shadow: inset 0 0 0 2px var(--edge); position: relative; }
.hp-wide > .hp-call { border-top: 0; }
.hp-call .hp-strip-meta { color: var(--ink-2); }
.hp-call .hp-tag { background: var(--bug); color: var(--bug-ink); }
.hp-call.is-done .hp-tag, .hp-call.is-self .hp-tag { background: var(--signal); color: var(--on-signal); }
.hp-call-q { display: block; font: 700 1.1rem/1.3 var(--f-ui); margin: 0 0 .6rem; }
.jb-answer {
  display: block; width: 100%; box-sizing: border-box; min-height: 8.5rem; resize: none; overflow: hidden;
  font: 400 1.0625rem/1.5 var(--f-ui); color: var(--ink); background: var(--paper);
  border: 0; border-bottom: 3px solid var(--field-edge); border-radius: 0; padding: .8rem .85rem; margin: 0;
}
.jb-answer::placeholder { color: var(--ink-2); opacity: .85; }
.jb-answer:focus { outline: none; border-bottom-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.hp-warn { margin: .4rem 0 0; font: 600 .88rem/1.3 var(--f-ui); color: var(--v-wrong-ink); min-height: 0; }
.hp-warn:empty { display: none; }
.hp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin-top: .8rem; }
.hp-call .hp-btn { background: var(--btn); color: var(--btn-ink); }
@media (max-width: 719.98px) { .hp-call .hp-actions .jb-submit { flex: 1 1 100%; clip-path: none; padding-right: 1.15rem; } }
.hp-call .hp-btn:focus-visible { outline-color: var(--signal); }
.hp-call .hp-link { color: var(--ink-2); }
.hp-fine { font: 500 .8rem/1.4 var(--f-ui); color: var(--ink-2); margin: .6rem 0 0; }

.hp-yours { margin: 0 0 .9rem; padding: .6rem .8rem; background: var(--paper); border-left: 3px solid var(--ink-2); }
.hp-yours-k { display: block; font: 700 .66rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .35rem; }
.hp-yours p { margin: 0; font: 400 .98rem/1.45 var(--f-ui); white-space: pre-wrap; }

.hp-call.is-grading .hp-tag { animation: hp-blink 1.1s steps(2, jump-none) infinite; background: var(--signal); color: var(--on-signal); }
.hp-review { display: flex; align-items: center; gap: .8rem; }
.hp-review-bar { position: relative; flex: 0 0 6rem; height: 6px; background: var(--paper-2); overflow: hidden; }
.hp-review-bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--signal); animation: hp-scan 1s linear infinite; }
.hp-review-t { margin: 0; font: 700 1rem/1.3 var(--f-ui); }
@media (prefers-reduced-motion: reduce) { .hp-review-bar::after { width: 100%; opacity: .6; } }

.hp-notice { margin: 0 0 .9rem; padding: .55rem .75rem; font: 600 .9rem/1.4 var(--f-ui); background: var(--paper-2); color: var(--ink); border-left: 3px solid var(--v-partial-ink); }
.hp-key { background: var(--bug); color: var(--bug-ink); padding: .85rem .95rem .95rem; margin-bottom: .85rem; }
.hp-key-h { margin: 0 0 .35rem; font: 800 .8rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.hp-key-line { margin: 0 0 .4rem; font: 800 1.45rem/1.08 var(--f-cond); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.hp-key-line.is-alt { font: 500 1rem/1.4 var(--f-ui); text-transform: none; letter-spacing: 0; }
.hp-key-line.is-sentence { font: 600 1.12rem/1.42 var(--f-ui); text-transform: none; letter-spacing: 0; text-wrap: pretty; }
.hp-key > :last-child { margin-bottom: 0; }
.hp-key-line.is-sentence.is-alt { font-weight: 400; font-size: 1rem; }
.hp-key-crit { margin: .5rem 0 0; font: 400 .88rem/1.45 var(--f-ui); color: var(--bug-dim); }
.hp-key-k { font-weight: 700; color: var(--bug-ink); }
.hp-ask { margin: 0 0 .6rem; font: 700 1rem/1.35 var(--f-ui); }
.hp-self-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hp-self {
  min-height: 56px; padding: .45rem .5rem; border: 0; border-radius: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: center; gap: .2rem;
  background: var(--bug); color: var(--bug-ink); border-top: 4px solid var(--c);
}
.hp-self.is-correct { --c: var(--v-correct); } .hp-self.is-partial { --c: var(--v-partial); } .hp-self.is-wrong { --c: var(--v-wrong); }
.hp-self:hover { background: var(--bug-2); }
.hp-self:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.hp-self-t { font: 800 1.15rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.hp-self-v { font: 600 .68rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bug-dim); }

.hp-ruling { --c: var(--bug-dim); }
.hp-ruling.is-correct { --c: var(--v-correct); } .hp-ruling.is-partial { --c: var(--v-partial); } .hp-ruling.is-wrong { --c: var(--v-wrong); }
.hp-ruling-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3rem .8rem; background: var(--bug); color: var(--bug-ink); padding: .6rem .9rem .55rem; border-left: 8px solid var(--c); overflow: hidden; }
.hp-ruling-word { margin: 0; font: 900 2.6rem/.95 var(--f-cond); letter-spacing: .03em; text-transform: uppercase; color: var(--c); transform-origin: left center; }
.hp-ruling-counts { margin: 0; font: 700 .72rem/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bug-dim); }
.hp-ruling-split { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.hp-ruling-fb { margin: .75rem 0 .45rem; font: 500 1.05rem/1.45 var(--f-ui); }
.hp-call .hp-src { color: var(--ink-2); }
.hp-ruling .jb-verdict-source { margin-top: .6rem; }

.hp-mini { display: inline-flex; align-items: center; gap: .35rem; font: 700 .72rem/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; padding: .35rem .5rem; background: var(--paper-2); color: var(--ink); }
.hp-mini::before { content: ""; width: .55rem; height: .55rem; background: var(--k); }
.hp-mini.is-correct { --k: var(--v-correct-ink); } .hp-mini.is-partial { --k: var(--v-partial-ink); } .hp-mini.is-wrong { --k: var(--v-wrong-ink); } .hp-mini.is-none { --k: var(--rule); }

/* the field */
.hp-field { margin-top: 1.5rem; }
.hp-fbugs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 1rem; }
.hp-fbug { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; background: var(--bug-2); min-width: 0; }
.hp-fbug-who { grid-column: 1 / -1; font: 800 .85rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; padding: .45rem .6rem .4rem; background: var(--bug-3); }
.hp-fbug.is-you .hp-fbug-who { background: var(--signal); color: var(--on-signal); }
.hp-fbug-v { display: flex; flex-direction: column; gap: .2rem; padding: .5rem .6rem .55rem; font: 800 1.35rem/1 var(--f-cond); letter-spacing: .02em; text-transform: uppercase; font-variant-numeric: tabular-nums; min-width: 0; }
.hp-fbug-k { font: 700 .62rem/1 var(--f-ui); letter-spacing: .1em; color: var(--bug-dim); }
.hp-roster-wrap { overflow-x: auto; }
.hp-roster { width: 100%; border-collapse: collapse; font-family: var(--f-ui); }
.hp-roster th, .hp-roster td { text-align: left; padding: .4rem .35rem; border-bottom: 1px solid var(--bug-3); vertical-align: middle; }
.hp-roster thead th { font: 700 .66rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--bug-dim); padding-top: 0; }
.hp-roster tbody th { font-weight: 400; }
.hp-who { display: block; font: 800 .98rem/1.05 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; }
.hp-lab { display: block; font: 500 .68rem/1.2 var(--f-ui); color: var(--bug-dim); letter-spacing: .03em; }
.hp-roster tr.is-you th, .hp-roster tr.is-you td { background: var(--bug-2); }
.hp-roster tr.is-you .hp-who { color: var(--signal); }
.hp-cell { font: 700 .74rem/1 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.hp-cell-sq { display: inline-block; width: .8rem; height: .8rem; margin-right: .4rem; vertical-align: -.12rem; background: var(--c); }
.hp-cell.is-correct { --c: var(--v-correct); } .hp-cell.is-partial { --c: var(--v-partial); } .hp-cell.is-wrong { --c: var(--v-wrong); }
.hp-cell.is-none { --c: transparent; color: var(--bug-dim); }
.hp-cell.is-none .hp-cell-sq { box-shadow: inset 0 0 0 1.5px var(--bug-dim); }
.hp-field figcaption { margin-top: .8rem; }

.hp-locked { font: 500 .95rem/1.4 var(--f-ui); color: var(--ink-2); padding: .8rem 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); margin: 1.5rem 0; }
.hp-debrief { margin-top: 1.75rem; }

/* model answers in the prose */
.hp-answer { margin: 1.1rem 0 1.6rem; background: var(--paper-2); border-top: 3px solid var(--c); --c: var(--ink-2); }
.hp-answer.is-correct { --c: var(--v-correct-ink); } .hp-answer.is-wrong { --c: var(--v-wrong-ink); } .hp-answer.is-partial { --c: var(--v-partial-ink); }
.hp-answer-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem .75rem; padding: .75rem .9rem 0; }
.hp-answer-who { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .55rem; }
.hp-answer-model { font: 800 1.1rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.hp-answer-head .hp-lab { display: inline; color: var(--ink-2); }
.hp-answer-chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.hp-answer .hp-mini { background: var(--paper); letter-spacing: .04em; font-size: .68rem; }
.hp-answer blockquote { margin: 0; padding: .7rem .9rem .2rem; }
.hp-answer blockquote p { font: 400 1rem/1.55 var(--f-ui); margin: 0 0 .6em; }
.hp-answer .hp-src { color: var(--ink-2); padding: 0 .9rem .7rem; }

/* ------------------------------------------------------------------ desktop */
@media (min-width: 720px) {
  body { font-size: 1.25rem; line-height: 1.6; padding-block: 4rem 7rem; }
  .hp-title { font-size: 4.6rem; }
  .hp-dek { font-size: 1.45rem; }
  .hp-h2 { font-size: 2.35rem; margin-top: 3.75rem; }
  .hp-feed-ref { font-size: 2.2rem; }
  .hp-ruling-word { font-size: 3.2rem; }
  .hp-key-line { font-size: 1.7rem; }
  .hp-fbug-v { font-size: 1.6rem; }
  .hp-erm-step { padding: 1rem 1.2rem 1.1rem; }
  .hp-swap-line { font-size: 1.7rem; }
  .hp-isos { max-width: 40rem; margin-inline: auto; }
  .hp-who { display: inline; margin-right: .5rem; }
  .hp-roster tbody th .hp-lab { display: inline; }
}
@media (min-width: 1100px) {
  .jb-essay { --room: max(0px, (100cqw - var(--col) - 18.5rem) / 2); margin-left: var(--room); margin-right: auto; }
  .sidenote { position: absolute; left: calc(100% + 2.5rem); width: 15rem; margin: 0; padding: .6rem 0 0; background: none; border-top: 2px solid var(--ink); font-size: .84rem; line-height: 1.5; }
  .sidenote.is-long .sidenote-body { max-height: none !important; -webkit-mask-image: none !important; mask-image: none !important; overflow: visible !important; }
  .sn-more { display: none; }
}

/* ------------------------------------------------------------ coordinator layer (views-coord.js) */
/* The telestrator underline, ported from Film Study: the scene line of every normal-mode prompt. */
.hp-feed.has-ink { position: relative; }
.hp-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hp-ink-stroke { fill: none; stroke: var(--mark-on-bug); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hp-keyline { position: relative; }
/* The opening's one typographic touch: Koestler's three reactions. */
.hp-koestler { font-family: var(--f-cond); font-weight: 700; font-size: 1.14em; letter-spacing: .03em; white-space: nowrap; }
/* QA: where focus lands after a call is ruled on (views.js loop) — a reading position, not a control */
.hp-landing:focus { outline: none; }
/* Cascade fix: the base .hp-feed / .hp-call rules come after the 720px padding rule above, so restate it. */
@media (min-width: 720px) { .hp-feed, .hp-call { padding-inline: 1.5rem; } }