:root {
    --radius-xs: var(--radius-ui-xs);
    --radius-sm: var(--radius-ui-sm);
    --radius-md: var(--radius-ui-md);
    --radius-lg: var(--radius-ui-lg);
  }
  html { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top, 0); background: var(--bg-body); background-image: var(--site-bg-texture); }
  body { background: var(--bg-body); background-image: var(--site-bg-texture); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; color: var(--text-primary); font-size: var(--type-section); line-height: 1.45; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
  :focus:not(:focus-visible) { outline: none; }
  button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .show-back-link { min-height:var(--size-scale-px-44); min-width:var(--size-scale-px-44); padding:0 var(--space-scale-px-4); }
  .lang-toggle { min-width:var(--size-scale-px-44); height:var(--size-scale-px-44); min-height:var(--size-scale-px-44); padding:0 var(--space-scale-px-10); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:var(--bg-surface); color:var(--text-secondary); border:1px solid var(--border); font-size:var(--type-meta); line-height:1; font-weight:700; letter-spacing:0; transition:background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .lang-toggle:hover { background:var(--bg-surface-hover); color:var(--text-primary); border-color:var(--visual-border-medium); }
  .deep-page-header-actions { display:flex; align-items:center; gap:var(--space-scale-px-8); }
  .deep-nav-actions { display:flex; align-items:center; gap:var(--space-scale-px-8); }
  .deep-nav-icon { width:var(--size-scale-px-44); min-width:var(--size-scale-px-44); height:var(--size-scale-px-44); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface); color:var(--text-secondary); transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
  .deep-nav-icon:hover { background:var(--bg-surface-hover); border-color:var(--visual-border-medium); color:var(--text-primary); }
  .deep-nav-icon:active { transform:translateY(1px); }
  .deep-nav-icon svg { width:var(--size-scale-px-19); height:var(--size-scale-px-19); }
  .deep-nav-vip { color:var(--accent); }
  .poster-shadow { box-shadow: var(--shadow-page-art); }
  .backdrop { position: fixed; top: 0; left: 0; right: 0; height: 45vh; z-index: var(--layer-base);
    background-size: cover; background-position: center top; }
  .backdrop::after { content: ''; position: absolute; inset: 0;
    background: var(--visual-show-backdrop); }
	  .content { position: relative; z-index: var(--layer-content); }
	  .show-shell { padding-top:var(--space-scale-px-16); padding-bottom:0; }
  .toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
    background: var(--visual-success-solid); color: white; padding: var(--space-scale-px-6) var(--space-scale-px-16); border-radius: var(--radius-md);
    font-size: var(--type-control); z-index: var(--layer-toast); opacity: var(--opacity-hidden); transition: opacity 0.3s;
    backdrop-filter: blur(8px); box-shadow: var(--shadow-floating); }
  .toast.show { opacity: var(--opacity-visible); }
  /* Season tabs */
  .season-tabs { display:flex; flex-wrap:nowrap; max-width:100%; gap:var(--space-gap-controls); overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; touch-action:pan-x; padding-bottom:var(--space-scale-px-4); scrollbar-width:none; }
  .season-tabs::-webkit-scrollbar { display:none; }
  .season-tab { flex-shrink:0; position:relative; padding:var(--space-scale-px-6) var(--space-scale-px-14); border-radius:var(--radius-md); font-size:var(--type-control); font-weight:600;
    border:1px solid var(--border); cursor:pointer; transition:background 0.15s, color 0.15s;
    background:var(--bg-surface); color:var(--text-secondary); white-space:nowrap; min-height:var(--size-scale-px-44);
    display:flex; align-items:center; }
  .season-tab.active { background:var(--accent); color:var(--visual-body-solid); border-color:var(--accent); }
  .season-tab:not(.active):hover { background:var(--bg-surface-hover); color:var(--text-primary); }
  /* UI-011: invisible hit-area expansion toward 44x44; no-op here since
     desktop min-height is already 44px, overridden with real expansion at
     the mobile breakpoint below where min-height shrinks. */
  .season-tab::after { content:""; position:absolute; inset:0; }
  /* Episode rows */
  .ep-row { border-bottom:1px solid var(--border); }
  .ep-row:last-child { border-bottom:none; }
  .season-pack-panel { margin-bottom:var(--space-gap-cards); }
  .season-pack-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-ui-2); }
  .season-pack-title { margin:0; font-size:var(--type-section); line-height:var(--leading-section); font-weight:var(--weight-section); }
  .season-pack-count { flex:0 0 auto; color:var(--text-muted); font-size:var(--type-meta); line-height:var(--leading-meta); }
  /* UI-005 3b: episode-row-local tokens (not in ui-tokens.css -- that file is out of scope for
     this sub-stage; see docs/ui-audit/component-ownership-map.md 3b) collapsing the old flat
     desktop default + a separate mobile override at the 640px breakpoint into a single continuous
     clamp() spanning 320->1024px. Endpoints unchanged versus the pre-existing computed values
     (measured via getComputedStyle):
       --ep-header-gap        3.2px @320 -> 10px  @1024+ (was --space-card-gap)
       --ep-header-pad-block  3.2px @320 -> 9px   @1024+ (was --space-row-pad-block)
       --ep-header-pad-inline 4.8px @320 -> 14px  @1024+ (was --space-row-pad-inline)
       --ep-header-min-height 18px  @320 -> 40px  @1024+ (was --size-content-row)
       --episode-number-size  7.5px @320 -> 11px  @1024+ (was --type-meta)
       --episode-name-size    shares --type-card-copy with other compact body copy
       --episode-name-lh      10.2px@320 -> 16.675px@1024+ (was --leading-copy/--leading-compact,
                                                              re-expressed as an absolute length;
                                                              1.2 and 1.45 x the old font-sizes
                                                              reproduce these exact px values, so
                                                              this is a pure re-expression, not a
                                                              value change)
       --ep-badge-size        6.5px @320 -> 10.5px @1024+ (was --type-compact-meta)
       --ep-badge-pad-inline  2.7px @320 -> 7px    @1024+ (was --space-scale-px-7)
       --ep-badge-ml          1.8px @320 -> 8px    @1024+ (was the "ml-2" Tailwind utility class
                                                            in showPage.ts, overridden only below
                                                            640px until now)
     --ep-header-gap and --episode-number's old --type-meta / --ep-badge-size's old
     --type-compact-meta each additionally had a SEPARATE, wider layer at the 767px breakpoint
     (via --space-dialog-gap / --type-compact-meta's own second override) that
     component-ownership-map.md did not record -- found here by measuring computed values at 767
     vs 768, not by grepping source: both stayed flat at their mobile value from 0 up through
     767px, then jumped to their flat desktop value at 768px, independent of this file's own
     640px block. A local token sidesteps both layers without touching either shared token, so
     neither hidden breakpoint survives here. --episode-number's width is deliberately left
     alone: above 640px it has no CSS width at all (auto, sized to the rendered digit text), and
     only the mobile block forces a fixed 24px column width for list alignment -- that
     auto->fixed switch is a layout strategy choice, not a numeric hard-jump defect. padding-block
     on .ep-badge-count (--space-scale-px-1) is also left alone: measured 0.9px@320 vs 1px@1024+,
     a ~0.1px difference that is sub-pixel rounding noise, not a real jump worth a token. */
  :root {
    --ep-header-gap: clamp(.2rem, .00682rem + .96591vw, .625rem);
    --ep-header-pad-block: clamp(.2rem, .03523rem + .82386vw, .5625rem);
    --ep-header-pad-inline: clamp(.3rem, .03864rem + 1.30682vw, .875rem);
    --ep-header-min-height: clamp(1.125rem, .5rem + 3.125vw, 2.5rem);
    --episode-number-size: clamp(.46875rem, .36932rem + .49716vw, .6875rem);
    --episode-name-size: var(--type-card-copy);
    --episode-name-lh: clamp(.6375rem, .45355rem + .91974vw, 1.04219rem);
    --ep-badge-size: clamp(.40625rem, .29261rem + .56818vw, .65625rem);
    --ep-badge-pad-inline: clamp(.16875rem, .04659rem + .61080vw, .4375rem);
    --ep-badge-ml: clamp(.1125rem, -.06364rem + .88068vw, .5rem);
  }
  .ep-header { display:flex; align-items:center; gap:var(--ep-header-gap); padding:var(--ep-header-pad-block) var(--ep-header-pad-inline);
    cursor:pointer; min-height:var(--ep-header-min-height); transition:background 0.1s; }
  .episode-number { font-size:var(--episode-number-size); line-height:var(--leading-meta); }
  .episode-name { min-width:0; font-size:var(--episode-name-size); line-height:var(--episode-name-lh); white-space:normal; overflow-wrap:anywhere; }
  .ep-header:hover { background:var(--bg-surface-hover); }
  .ep-header.no-res { cursor:default; }
  .ep-header.no-res:hover { background:transparent; }
  .ep-badge-count { flex-shrink:0; font-size:var(--ep-badge-size); padding:var(--space-scale-px-1) var(--ep-badge-pad-inline); border-radius:var(--radius-sm);
    font-weight:600; background:var(--bg-header); color:var(--text-muted); margin-left:var(--ep-badge-ml); }
  .ep-badge-count.has-res { background:var(--visual-accent-fill-soft); color:var(--accent); }
  .ssr-resource-structure { display:grid; gap:var(--space-scale-px-14); }
  .ssr-resource-structure > p { margin:0; color:var(--text-muted); font-size:var(--type-card-copy); line-height:var(--leading-copy); }
  .ssr-panel { border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--bg-surface); }
  .ssr-panel-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-scale-px-12); padding:var(--space-scale-px-12) var(--space-scale-px-16); border-bottom:1px solid var(--border); }
  .ssr-panel-head h2, .ssr-panel-head h3 { margin:0; color:var(--text-primary); font-size:var(--type-section); line-height:var(--leading-section); font-weight:var(--weight-section); }
  .ssr-panel-head span { flex-shrink:0; color:var(--accent); font-size:var(--type-control); font-weight:700; }
  .ssr-season-tabs { display:flex; flex-wrap:nowrap; max-width:100%; gap:var(--space-gap-controls); overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; touch-action:pan-x; padding-bottom:var(--space-scale-px-2); scrollbar-width:none; }
  .ssr-season-tabs::-webkit-scrollbar { display:none; }
  .ssr-season-tabs :is(span,a) { flex-shrink:0; display:inline-flex; align-items:center; min-height:var(--size-scale-px-36); padding:var(--space-scale-px-5) var(--space-scale-px-12); border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg-surface); color:var(--text-secondary); font-size:var(--type-control); font-weight:700; }
  .ssr-season-tabs :is(span,a).active { background:var(--accent); border-color:var(--accent); color:var(--bg-body); }
  .ssr-resource-list { list-style:none; margin:0; padding:0; }
  .ssr-resource-list li { padding:var(--space-scale-px-8); border-bottom:1px solid var(--border); }
  .ssr-resource-list li:last-child { border-bottom:0; }
  .ssr-resource-list a:not(.resource-card) { display:block; color:var(--text-secondary); font-size:var(--type-card-copy); line-height:var(--leading-copy); word-break:break-word; text-decoration:none; }
  .ssr-resource-list a:not(.resource-card):hover { color:var(--text-primary); }
  .ssr-resource-list div { display:flex; flex-wrap:wrap; gap:var(--space-scale-px-5); margin-top:var(--space-scale-px-7); }
  .ssr-resource-list span:not(.resource-badge) { font-size:var(--type-compact-label); line-height:var(--leading-meta); color:var(--text-muted); background:var(--bg-header); border:1px solid var(--border); border-radius:var(--radius-xs); padding:var(--space-scale-px-1) var(--space-scale-px-5); }
  .ssr-episode-list { list-style:none; margin:0; padding:0; }
  .ssr-episode-list li { display:flex; align-items:center; gap:var(--space-scale-px-10); min-height:var(--size-scale-px-40); padding:var(--space-scale-px-9) var(--space-scale-px-16); border-bottom:1px solid var(--border); }
  .ssr-episode-list li:last-child { border-bottom:0; }
  .ssr-episode-list a, .ssr-episode-list span { color:var(--text-primary); font-size:var(--type-card-copy); font-weight:700; text-decoration:none; }
  .ssr-episode-list small { color:var(--accent); font-size:var(--type-compact-meta); font-weight:700; background:var(--visual-accent-fill-soft); border-radius:var(--radius-sm); padding:var(--space-scale-px-1) var(--space-scale-px-7); }
  /* Highlight flash */
  @keyframes highlightFlash {
    0%   { background: var(--visual-transparent); }
    20%  { background: var(--visual-accent-fill-strong); }
    60%  { background: var(--visual-accent-fill-soft); }
    100% { background: var(--visual-transparent); }
  }
  .highlight-flash { animation: highlightFlash 2s ease-out forwards; border-radius:var(--radius-sm); }
  /* Icon btn */
  .icon-btn { cursor:pointer; user-select:none; position:relative; }
  .copy-icon-btn { min-width:var(--size-scale-px-44); min-height:var(--size-scale-px-44); border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); display:inline-flex; align-items:center; justify-content:center; padding:0; }
  .copy-icon-btn:hover { color:var(--accent); background:var(--bg-surface-hover); }
  .copy-icon-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  /* Keep conditionally rendered controls in one group so every resource row has
     one stable right-side action rail across locked and unlocked states. */
  .show-resource-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--space-scale-px-8); }
  .show-resource-stat-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--resource-badge-gap); }
  .show-resource-list { padding:var(--space-resource-list-inset); }
  .resource-card--nested[data-resource-role] {
    grid-template-columns:minmax(0,1fr) max-content var(--resource-icon-action-rail);
    grid-template-rows:auto;
    align-items:center;
  }
  .resource-card--nested[data-resource-role] .resource-card__main { grid-column:1; grid-row:1; }
  .resource-card--nested[data-resource-role] .show-resource-actions { display:contents; }
  .resource-card--nested[data-resource-role] .show-resource-stat-row { grid-column:2; grid-row:1; justify-self:end; }
  .resource-card--nested[data-resource-role] .show-resource-action-group {
    grid-column:3;
    grid-row:1;
    justify-self:end;
    transform:translateX(calc((var(--resource-icon-action-rail) - var(--resource-icon-action-lock-control)) / 2));
  }
  @media (min-width:768px) {
    .resource-card--nested[data-resource-role] .show-resource-action-group {
      transform:translateX(calc((var(--resource-icon-action-rail) - var(--resource-icon-action-lock-control)) / 2 + var(--space-ui-1)));
    }
  }
  .show-shell .resource-card--nested,
  .show-shell .resource-card--nested.resource-card--season-pack,
  .show-shell .resource-card--nested.resource-card--series-pack { box-shadow:var(--resource-card-edge-shadow); }
  .show-shell .resource-card--nested.resource-card--locked:hover,
  .show-shell .resource-card--nested.resource-card--locked:focus-visible,
  .show-shell .resource-card--nested.resource-card--locked:focus-within { border-color:var(--resource-card-hover-border); box-shadow:var(--resource-card-edge-shadow); background:var(--resource-card-hover-surface); }

  .icon-btn .check-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:var(--opacity-hidden); pointer-events:none; transition:opacity 0.15s; }
  .icon-btn.copied .original-icon { opacity:var(--opacity-hidden); }
  .icon-btn.copied .check-icon { opacity:var(--opacity-visible); }
  .magnet-link { color:inherit; text-decoration:none; }
  /* grid-template-rows is explicit because .show-hero-poster spans both rows: when the
     copy column is shorter than the poster, the grid hands the poster's leftover height
     to the rows it spans, and with implicit auto/auto rows row 1 takes a share of it.
     That made the heading block -- and everything measured from it -- sit lower on shows
     with a short synopsis than on shows with a long one, which is the drift the ratings
     entry was showing. auto/1fr keeps row 1 at its content height and parks all slack in
     row 2, so the copy column's top edge is at the same offset on every show. */
  .show-hero { display:grid; grid-template-rows:auto 1fr; align-items:start; margin-bottom:var(--space-gap-cards); }
  /* Every other top-level block of the show page (info card, cast, stills,
     series packs, season tabs, banners) sits one card gap from the next. */
  .show-section { margin-bottom:var(--space-gap-cards); }
  /* A heading that opens a borderless block would otherwise keep the default
     h2 margin (0.83em), which collapses with the card gap and outgrows it on
     phones (8.7px vs 8px at 402px). The bordered info card keeps its own. */
  .show-section:not(.show-info-card) > .show-section-title { margin-top:0; }
  .show-hero-poster { grid-row:1 / span 2; }
  .show-hero-heading { align-self:start; padding-top:0; }
  .show-hero-title { margin:0 0 var(--space-scale-px-4); color:var(--text-primary); letter-spacing:0; }
  .show-hero-original { margin:0 0 var(--space-scale-px-4); color:var(--text-secondary); font-size:var(--type-card-copy); line-height:var(--leading-meta); }
  .show-hero-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-scale-px-8); margin-bottom:var(--space-scale-px-8); color:var(--text-secondary); font-size:var(--type-meta); line-height:var(--leading-meta); }
  .show-hero-genres { display:flex; flex-wrap:wrap; gap:var(--space-scale-px-4); }
  .show-hero-genre { display:inline-flex; align-items:center; min-height:var(--size-scale-px-22); padding:var(--space-scale-px-1) var(--space-scale-px-8); border-radius:var(--radius-sm); background:var(--bg-surface); color:var(--text-secondary); font-size:var(--type-meta); line-height:var(--leading-section); font-weight:650; }
  .show-hero-copy { grid-column:2; padding-top:var(--space-scale-px-2); }
  .show-hero-stat { margin:0 0 var(--space-scale-px-12); color:var(--text-muted); font-size:var(--type-meta); line-height:var(--leading-meta); }
  /* Type and spacing come from the shared synopsis role in page-hero.css. */
  .show-overview { margin:0 0 var(--space-scale-px-14); }
  /* Episode-ratings entry: a content-sized pill that sits inside .show-hero-copy
     and inherits the synopsis column's left edge and max-width instead of stretching
     the full shell width (which is what reusing .season-tab -- a flex item of the
     season strip -- used to do). Its hit area is grown back to 44px by the ::after
     overlay at the mobile breakpoint, same technique and same tokens as .season-tab.
     .show-ratings-entry-row is its own block row, placed above .show-overview so the
     pill's offset from the hero heading is the same on every show: the stat lines
     above it are fixed-count SSR text, while everything below varies with the
     synopsis. It repeats .show-hero-stat's margin rather than reusing that class
     because a navigation row is a different text role than a run of meta text. */
  .show-ratings-entry-row { margin:0 0 var(--space-scale-px-12); }
  .show-ratings-entry { position:relative; display:inline-flex; align-items:center; gap:var(--space-scale-px-8); max-width:100%;
    min-height:var(--size-scale-px-44); padding:var(--space-scale-px-6) var(--space-scale-px-14);
    border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface);
    color:var(--accent); font-size:var(--type-control); font-weight:700; text-decoration:none;
    transition:background 0.15s, color 0.15s; }
  .show-ratings-entry:hover { background:var(--bg-surface-hover); }
  /* UI-011: invisible hit-area expansion toward 44x44; no-op here since the
     desktop min-height is already 44px, overridden with real expansion at the
     mobile breakpoint below where min-height shrinks. */
  .show-ratings-entry::after { content:""; position:absolute; inset:0; }
  /* Decorative band legend -- the five rating colors the ratings page uses. All
     semantics stay on the link text, so this strip is hidden from assistive tech. */
  .show-ratings-entry-bands { display:inline-flex; flex-shrink:0; gap:var(--space-scale-px-2); }
  .show-ratings-entry-bands i { width:var(--size-scale-px-8); height:var(--size-scale-px-8); border-radius:var(--rating-cell-radius); }
  .show-ratings-entry-bands i:nth-child(1) { background:var(--rating-band-0); }
  .show-ratings-entry-bands i:nth-child(2) { background:var(--rating-band-1); }
  .show-ratings-entry-bands i:nth-child(3) { background:var(--rating-band-2); }
  .show-ratings-entry-bands i:nth-child(4) { background:var(--rating-band-3); }
  .show-ratings-entry-bands i:nth-child(5) { background:var(--rating-band-4); }
  .show-section-title { color:var(--text-primary); font-size:var(--type-section); line-height:var(--leading-section); font-weight:var(--weight-section); letter-spacing:0; }
  /* Card surfaces across the site are --radius-ui-md; this one carried
     --radius-lg plus two narrower overrides of its own, which made it the only
     12px card on any public page. It follows the shared card radius now, at
     every width, like .detail-facts-card and the resource cards do. */
  .show-info-card { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface); padding:var(--space-scale-px-14) var(--space-scale-px-16); }
  .show-info-table { width:100%; border-collapse:collapse; }
  .show-info-row { border-bottom:1px solid var(--border); }
  .show-info-row:last-child { border-bottom:0; }
  .show-info-label { width:var(--size-scale-px-76); padding:var(--space-scale-px-7) var(--space-scale-px-12) var(--space-scale-px-7) 0; color:var(--text-muted); font-size:var(--type-field-label); line-height:var(--leading-field-label); font-weight:var(--weight-field-label); vertical-align:top; white-space:nowrap; }
  .show-info-value { padding:var(--space-scale-px-7) 0; color:var(--text-secondary); font-size:var(--type-field-value); line-height:var(--leading-field-value); font-weight:var(--weight-field-value); vertical-align:top; overflow-wrap:anywhere; }
  .show-people-rail { display:flex; gap:var(--space-scale-px-8); overflow-x:auto; padding-bottom:var(--space-scale-px-8); scrollbar-width:none; }
  .show-people-rail::-webkit-scrollbar { display:none; }
  .show-person { flex:0 0 64px; width:var(--size-scale-px-64); text-align:center; }
  .show-person-avatar { width:var(--size-scale-px-56); height:var(--size-scale-px-56); margin:0 auto; border-radius:var(--radius-pill); object-fit:cover; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:var(--type-dialog-title); font-weight:760; }
  .show-person-name { margin-top:var(--space-person-name-gap); color:var(--text-secondary); font-size:var(--type-person-name); line-height:var(--leading-person-name); overflow-wrap:anywhere; }
  .show-person-role { color:var(--text-muted); font-size:var(--type-person-role); line-height:var(--leading-person-role); overflow-wrap:anywhere; }
  .show-person-role.is-role { color:var(--accent); }
  .show-stills-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-gap-tight); }
  .show-still { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-md); background:var(--bg-surface); border:1px solid var(--border); }


  @media (min-width: 640px) {
    /* Hero sizing left this block entirely: the poster column, the hero gaps
       and the H1 type role are single continuous clamps in
       shared/page-hero.css now, so the 640/641 hard step is gone rather than
       relocated. Only a real structural change -- the stills grid going from
       two columns to three -- is left. */
    .show-stills-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (max-width: 640px) {
    :root {
      --mobile-density-control:var(--size-mobile-control);
      --mobile-density-title:var(--type-content-title);
      --mobile-density-section:var(--type-section);
      --mobile-density-body:var(--type-card-copy);
      --mobile-density-meta:var(--type-meta);
      --mobile-density-label:var(--type-label);
      --mobile-density-gap:var(--space-mobile-gap);
      --mobile-density-card-pad:var(--space-mobile-card-pad);
    }
    body { font-size:var(--mobile-density-body); }
    .show-shell { padding-top:var(--space-scale-px-7); }
    .show-back-link,
    .lang-toggle,
    .deep-nav-icon { min-height:var(--mobile-density-control); }
    .lang-toggle,
    .deep-nav-icon { min-width:var(--mobile-density-control); width:var(--mobile-density-control); height:var(--mobile-density-control); }
    .lang-toggle { font-size:var(--type-control); padding-inline:var(--space-scale-px-6); }
    .show-back-link { min-width:0; padding-inline:var(--space-scale-px-3); font-size:var(--type-control); line-height:1.2; }
    .show-back-link svg { width:var(--size-mobile-icon); height:var(--size-mobile-icon); }
    .deep-nav-icon { font-size:var(--type-control); }
    .deep-page-header-actions,
    .deep-nav-actions { gap:var(--space-scale-px-4); }
    .deep-nav-icon svg { width:var(--size-mobile-icon); height:var(--size-mobile-icon); }
    .show-hero-original { font-size:var(--mobile-density-body); }
    .show-hero-meta { gap:var(--mobile-density-gap); margin-bottom:var(--space-scale-px-4); font-size:var(--mobile-density-body); }
    .show-hero-genre { min-height:var(--size-scale-px-16); padding:0 var(--space-scale-px-5); font-size:var(--mobile-density-meta); }
    .show-hero-copy { grid-column:2; padding-top:0; }
    .show-hero-stat { margin-bottom:var(--space-scale-px-6); font-size:var(--mobile-density-meta); }
    .show-overview { margin-bottom:var(--space-scale-px-7); }
    .show-ratings-entry-row { margin-bottom:var(--space-scale-px-6); }
    .show-ratings-entry { min-height:var(--mobile-density-control); padding:var(--space-scale-px-4) var(--space-scale-px-10); font-size:var(--mobile-density-body); }
    .show-ratings-entry::after { inset:min(-2px, calc((var(--mobile-density-control) - 44px) / 2)); }
    .show-section-title { font-size:var(--mobile-density-section); }
    .show-info-card { padding:var(--space-mobile-card-pad); }
    .show-info-label { width:var(--size-scale-px-56); padding:var(--space-scale-px-4) var(--space-scale-px-7) var(--space-scale-px-4) 0; }
    .show-info-value { padding:var(--space-scale-px-4) 0; }
    .show-people-rail { gap:var(--mobile-density-gap); padding-bottom:var(--space-scale-px-6); }
    .show-person { flex-basis:46px; width:var(--size-scale-px-46); }
    .show-person-avatar { width:var(--size-mobile-avatar); height:var(--size-mobile-avatar); font-size:var(--type-card-title); }
    .show-person-name { margin-top:var(--space-person-name-gap); }
    .season-tab { min-height:var(--mobile-density-control); padding:var(--space-scale-px-4) var(--space-scale-px-10); font-size:var(--mobile-density-body); }
    .season-tab::after { inset:min(-2px, calc((var(--mobile-density-control) - 44px) / 2)); }
    .season-pack-head { padding:var(--space-card-pad); }
    .season-pack-title { font-size:var(--mobile-density-section); }
    /* UI-005 3b: .ep-header gap/padding/min-height, .episode-name font-size/line-height, and
       .ep-badge-count font-size/padding-inline/margin-left are now single continuous clamp()s
       defined once, unconditionally, above -- this mobile-only layer that used to create the
       hard step at 640px (and, for gap/font-size via the shared tokens' own extra 767px layer,
       at 768px too) is removed, not moved. .episode-number keeps its fixed 24px mobile column
       width below (a deliberate list-alignment choice, not a smoothable numeric jump -- see
       comment on the default rule above), only its font-size line is removed. */
    .episode-number { width:var(--size-scale-px-24); }
    .ssr-resource-structure { gap:var(--space-scale-px-7); }
    .ssr-panel-head { gap:var(--space-scale-px-6); padding:var(--space-scale-px-6) var(--space-scale-px-8); }
    .ssr-panel-head h2,
    .ssr-panel-head h3 { font-size:var(--mobile-density-section); }
    .ssr-panel-head span { font-size:var(--type-control); }
    .ssr-season-tabs :is(span,a) { min-height:var(--mobile-density-control); padding:var(--space-scale-px-3) var(--space-scale-px-7); font-size:var(--type-control); }
    .ssr-episode-list li { min-height:var(--size-scale-px-28); gap:var(--space-scale-px-5); padding:var(--space-scale-px-5) var(--space-scale-px-7); }
    .ssr-episode-list a,
    .ssr-episode-list span { font-size:var(--mobile-density-body); }
    .ssr-episode-list small { padding-inline:var(--space-scale-px-4); font-size:var(--type-compact-meta); }
    .show-resource-list { padding:var(--space-resource-list-inset); }
    .resource-card--compact { --resource-compact-source-width:52px; gap:var(--space-scale-px-4) var(--space-scale-px-6); padding:var(--mobile-density-card-pad); }
    .resource-card--compact .resource-card__main { gap:var(--space-scale-px-3); }
    .resource-card--compact .resource-card__source { min-height:var(--size-scale-px-16); padding-inline:var(--space-scale-px-4); font-size:var(--mobile-density-label); }
    .resource-card--compact .resource-card__title { font-size:var(--mobile-density-body); line-height:var(--leading-compact); }
    /* UI-011: src/showPage.ts renders every resource title on show pages as
       a standalone magnet-link anchor inside .resource-card--nested (series
       packs, season packs, and expanded episode resources) -- show.css never
       had a .resource-card--compact variant of this title in practice, so
       the invisible hit-area growth targets the selector that's actually in
       the DOM. Stacked rows can have a gap as low as ~2px, so this only
       grows to the row-gap midpoint on each side -- no overlap between
       neighboring magnet links, ever. */
    .resource-card--nested .resource-card__title { position:relative; }
    .resource-card--nested .resource-card__title::after {
      content:"";
      position:absolute;
      top:calc(var(--mobile-density-gap) / -2);
      bottom:calc(var(--mobile-density-gap) / -2);
      left:0;
      right:0;
    }
    .resource-card--compact .resource-badge,
    .resource-card--compact .resource-fact { --resource-fact-font-size:var(--mobile-density-label); height:var(--size-scale-px-16); padding-inline:var(--space-scale-px-3); }
    .resource-card--nested[data-resource-role] { grid-template-columns:minmax(0,1fr) var(--resource-icon-action-rail); grid-template-rows:auto auto; align-items:center; }
    .resource-card--nested[data-resource-role] .resource-card__main { grid-column:1; grid-row:1; }
    .resource-card--nested[data-resource-role] .show-resource-actions { display:contents; }
    .resource-card--nested[data-resource-role] .show-resource-stat-row { grid-column:1; grid-row:2; justify-self:start; }
    .resource-card--nested[data-resource-role] .show-resource-action-group { grid-column:2; grid-row:1 / span 2; align-self:center; justify-self:end; }
    .show-back-link,
    .lang-toggle,
    .deep-nav-icon,
    .season-tab,
    .show-ratings-entry,
    .resource-card--compact { border-radius:var(--resource-action-radius); }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }