/* Wave-4 layouts (2026-10-26): stage ≈ NetShort · plaza ≈ GoodShort · guide ≈ JustWatch. Enqueued only on those three. */

/* hero arrows (also defined in layout-wave3.css for landing; that sheet is not loaded here) */
.xh-hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.xh-hero-arrow:hover { background: var(--xh-amber); }
.xh-hero-arrow--l { left: 12px; } .xh-hero-arrow--r { right: 12px; }

/* ======================================================================
   stage — curtain-lit coverflow hero, then 4-up big poster rows
   ====================================================================== */
body.layout-stage { --xh-curtain: color-mix(in srgb, var(--xh-amber) 55%, #000); }
body.layout-stage .xh-section-title { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
body.layout-stage .xh-rail { margin-bottom: 40px; }
body.layout-stage .xh-rail-head { margin-bottom: 18px; }
body.layout-stage .xh-view-all { font-size: 14px; }
.xh-stage {
  position: relative; margin: 4px -16px 36px; padding: 44px 0 30px; overflow: hidden; border-radius: 0;
  background:
    radial-gradient(42% 90% at 0% 50%, var(--xh-curtain) 0%, transparent 70%),
    radial-gradient(42% 90% at 100% 50%, var(--xh-curtain) 0%, transparent 70%),
    radial-gradient(60% 60% at 50% 100%, color-mix(in srgb, var(--xh-amber) 18%, transparent) 0%, transparent 70%),
    #0c0c10;
}
.xh-stage::before, .xh-stage::after { /* the valance: folded curtain across the top */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 6; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--xh-curtain) 0 34px, color-mix(in srgb, var(--xh-curtain) 70%, #000) 34px 68px);
  -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent);
}
.xh-stage::after { top: auto; bottom: 0; height: 6px; -webkit-mask: none; mask: none; background: linear-gradient(90deg, transparent, var(--xh-curtain), transparent); opacity: .8; }
.xh-stage-track { position: relative; height: 520px; }
.xh-stage-slide {
  position: absolute; left: 50%; top: 0; width: 300px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  transform: translateX(-50%) scale(.6); opacity: 0; z-index: 1; pointer-events: none;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), opacity .5s ease;
}
.xh-stage-slide[data-xh-pos="0"] { transform: translateX(-50%) scale(1); opacity: 1; z-index: 5; pointer-events: auto; }
.xh-stage-slide[data-xh-pos="-1"] { transform: translateX(calc(-50% - 250px)) scale(.8); opacity: .75; z-index: 4; pointer-events: auto; }
.xh-stage-slide[data-xh-pos="1"] { transform: translateX(calc(-50% + 250px)) scale(.8); opacity: .75; z-index: 4; pointer-events: auto; }
.xh-stage-slide[data-xh-pos="-2"] { transform: translateX(calc(-50% - 440px)) scale(.64); opacity: .45; z-index: 3; pointer-events: auto; }
.xh-stage-slide[data-xh-pos="2"] { transform: translateX(calc(-50% + 440px)) scale(.64); opacity: .45; z-index: 3; pointer-events: auto; }
.xh-stage-slide[data-xh-pos="-3"] { transform: translateX(calc(-50% - 560px)) scale(.5); }
.xh-stage-slide[data-xh-pos="3"] { transform: translateX(calc(-50% + 560px)) scale(.5); }
.xh-stage-poster {
  position: relative; display: block; width: 300px; aspect-ratio: 2/3; border-radius: 14px; overflow: hidden; background: #1c1c1f;
  box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}
.xh-stage-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.xh-stage-excl {
  position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 4px;
  background: var(--xh-amber); color: var(--xh-on-accent, #fff); font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
.xh-stage-cap { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: 320px; opacity: 0; transition: opacity .3s ease .2s; }
.xh-stage-slide[data-xh-pos="0"] .xh-stage-cap { opacity: 1; }
.xh-stage-cap strong { font-size: 20px; font-weight: 700; line-height: 1.25; color: #fff; }
.xh-stage-cap small { font-size: 13px; color: var(--xh-muted); }
.xh-stage .xh-hero-arrow { width: 48px; height: 48px; font-size: 28px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.18); top: 294px; }
.xh-stage .xh-hero-arrow--l { left: max(16px, calc(50% - 560px)); }
.xh-stage .xh-hero-arrow--r { right: max(16px, calc(50% - 560px)); }
.xh-stage-bar { display: flex; justify-content: center; gap: 6px; margin-top: 10px; position: relative; z-index: 6; }
.xh-stage-bar .xh-dot { width: 28px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); }
.xh-stage-bar .xh-dot.is-on { width: 56px; background: #fff; }
/* 4-up rows: four big posters fill the width, more scroll */
body.layout-stage .xh-river { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; }
body.layout-stage .xh-river .xh-card { flex: none; width: auto; }
body.layout-stage .xh-card .cover { border-radius: 14px; }
body.layout-stage .xh-card .meta { padding-top: 12px; }
body.layout-stage .xh-card .t { font-size: 17px; font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
body.layout-stage .xh-card .score { font-size: 13px; margin-top: 5px; }
@media (max-width: 900px) {
  body.layout-stage .xh-section-title { font-size: 22px; }
  .xh-stage { padding: 28px 0 22px; }
  .xh-stage-track { height: 380px; }
  .xh-stage-slide, .xh-stage-poster { width: 200px; }
  .xh-stage-slide[data-xh-pos="-1"] { transform: translateX(calc(-50% - 150px)) scale(.78); }
  .xh-stage-slide[data-xh-pos="1"] { transform: translateX(calc(-50% + 150px)) scale(.78); }
  .xh-stage-slide[data-xh-pos="-2"], .xh-stage-slide[data-xh-pos="2"] { opacity: 0; pointer-events: none; }
  .xh-stage-cap strong { font-size: 17px; }
  .xh-stage .xh-hero-arrow { display: none; }
  body.layout-stage .xh-river { grid-auto-columns: calc((100% - 12px) / 2.3); gap: 12px; }
  body.layout-stage .xh-card .t { font-size: 15px; }
}

/* ======================================================================
   plaza — light surface (GoodShort): tinted banner hero → promo bar → 3 wide → top 6 → genre list sections → download band
   ====================================================================== */
body.xh-light { /* plaza + curated: white surface, the skin only sets the accent */
  --xh-bg: #ffffff; --xh-elev: #f6f7f9; --xh-card: #ffffff; --xh-text: #1a1a1f; --xh-muted: #6b6f78; --xh-line: #e8eaee;
  background: var(--xh-bg); color: var(--xh-text);
}
body.xh-light .xh-nav { border-bottom: 1px solid var(--xh-line); padding-bottom: 12px; margin-bottom: 8px; }
body.xh-light .xh-nav-links a[aria-current="page"], body.xh-light .xh-nav-links a:hover { color: var(--xh-amber); }
body.xh-light .xh-search { background: var(--xh-elev); border: 1px solid var(--xh-line); border-radius: 999px; }
body.xh-light .xh-search input::placeholder { color: var(--xh-muted); }
body.xh-light .xh-acts-login { color: var(--xh-text); }
/* banner hero: tinted gradient, poster left, copy right, arrows at the edges, dots centred */
body.layout-plaza .xh-hero {
  min-height: 0; border-radius: 16px; overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--xh-amber) 88%, #000) 0%, var(--xh-amber) 55%, color-mix(in srgb, var(--xh-amber) 70%, #fff) 100%);
}
body.layout-plaza .xh-hero-bg { opacity: .22; filter: blur(14px) saturate(1.2); transform: scale(1.1); }
body.layout-plaza .xh-hero-shade { background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 40%, rgba(0,0,0,.2)); }
body.layout-plaza .xh-hero-slide { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 36px; align-items: center; padding: 34px 96px 48px 72px; min-height: 420px; } /* every slide, so the cross-fade keeps one layout */
.xh-hero-poster { position: relative; z-index: 2; display: block; width: 236px; aspect-ratio: 2/3; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.25); box-shadow: 0 24px 48px rgba(0,0,0,.35); }
.xh-hero-poster img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
body.layout-plaza .xh-hero-copy { min-height: 0; max-width: 620px; padding: 0; justify-content: center; color: #fff; }
body.layout-plaza .xh-hero .xh-eyebrow { color: rgba(255,255,255,.8); font-weight: 700; }
body.layout-plaza .xh-hero h1 { font-size: clamp(30px, 3.8vw, 48px); font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
body.layout-plaza .xh-hero p { color: rgba(255,255,255,.9); }
body.layout-plaza .xh-hero .xh-meta-row { color: rgba(255,255,255,.85); }
body.layout-plaza .xh-hero .xh-chip { background: rgba(255,255,255,.18); color: #fff; }
body.layout-plaza .xh-hero .xh-cta { background: #fff; color: var(--xh-amber); border-radius: 999px; padding: 12px 28px; }
body.layout-plaza .xh-hero .xh-cta.xh-cta--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
body.layout-plaza .xh-hero-dots { left: 50%; transform: translateX(-50%); bottom: 18px; }
body.layout-plaza .xh-hero-arrow { background: rgba(0,0,0,.28); }
/* light-surface overrides for shared pieces */
body.layout-plaza .xh-section-title { font-size: 22px; font-weight: 800; }
body.xh-light .xh-view-all { color: var(--xh-muted); }
body.xh-light .xh-card .cover { background: #eef0f3; border-radius: 10px; }
body.xh-light .xh-card .t { font-weight: 600; }
.xh-chips--card { margin: 6px 0 0; gap: 4px; }
.xh-chips--card .xh-chip { font-size: 11px; padding: 3px 8px; border-radius: 4px; }
body.xh-light .xh-chip { background: var(--xh-elev); color: var(--xh-muted); border: 0; }
body.xh-light .xh-ad { background: var(--xh-elev); border: 1px solid var(--xh-line); }
body.xh-light .xh-ad .lab { background: #e5e7eb; color: var(--xh-muted); }
body.xh-light .xh-ad--bar { background: color-mix(in srgb, var(--xh-amber) 10%, #fff); border: 0; }
body.xh-light .xh-ad--bar .lab { background: rgba(0,0,0,.08); color: var(--xh-muted); }
body.xh-light .xh-ad--bar a { background: var(--xh-amber); color: var(--xh-on-accent, #fff); }
body.xh-light .xh-cta { background: var(--xh-amber); color: var(--xh-on-accent, #fff); } /* solid buttons on a white page take the accent (the hero keeps white-on-tint above) */
body.xh-light .xh-cta.xh-cta--ghost { background: transparent; color: var(--xh-text); border-color: var(--xh-line); }
body.xh-light .xh-cta.xh-cta--ghost:hover { color: var(--xh-amber); border-color: var(--xh-amber); background: transparent; }
body.xh-light .xh-footer { border-top-color: var(--xh-line); color: var(--xh-muted); }
body.xh-light .xh-x-card { background: #fff; }
body.xh-light .xh-qr { background: #fff; color: var(--xh-text); border: 1px solid var(--xh-line); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
body.xh-light .xh-qr-s { color: var(--xh-muted); }
/* 3 wide trending cards fill the row */
body.layout-plaza .xh-rail--wide .xh-river { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; }
body.layout-plaza .xh-rail--wide .xh-river .xh-card { flex: none; width: auto; }
body.layout-plaza .xh-rail--wide .xh-card .t { font-size: 16px; white-space: normal; }
.xh-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 14px; }
/* genre list sections */
.xh-glist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }
.xh-glist-item { display: grid; grid-template-columns: 102px minmax(0, 1fr); gap: 16px; color: inherit; }
.xh-glist-item:hover strong { color: var(--xh-amber); }
.xh-glist-pic { display: block; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; background: #eef0f3; }
.xh-glist-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.xh-glist-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xh-glist-body strong { font-size: 16px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xh-glist-body .xh-chips--card { margin: 0; }
.xh-glist-syn { font-size: 13px; line-height: 1.6; color: var(--xh-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* download band */
.xh-dlband {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 8px 0 40px; padding: 32px 40px; border-radius: 16px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--xh-amber) 10%, #fff), color-mix(in srgb, var(--xh-amber) 22%, #fff));
}
.xh-dlband-copy h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.xh-dlband-copy p { margin: 0 0 18px; font-size: 15px; color: var(--xh-muted); }
.xh-dlband-copy .xh-cta { background: var(--xh-amber); color: var(--xh-on-accent, #fff); border-radius: 999px; padding: 11px 26px; }
.xh-dlband-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--xh-muted); }
.xh-dlband-qr canvas { display: block; width: 132px; height: 132px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
@media (max-width: 900px) {
  body.layout-plaza .xh-hero-slide { grid-template-columns: 1fr; gap: 16px; padding: 20px 20px 44px; min-height: 0; justify-items: center; text-align: center; }
  .xh-hero-poster { width: 160px; }
  body.layout-plaza .xh-hero-copy { align-items: center; }
  body.layout-plaza .xh-hero .xh-chips, body.layout-plaza .xh-hero-actions { justify-content: center; }
  body.layout-plaza .xh-hero-arrow { display: none; }
  body.layout-plaza .xh-rail--wide .xh-river { grid-template-columns: 1fr; gap: 16px; }
  .xh-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  .xh-glist-grid { grid-template-columns: 1fr; gap: 16px; }
  .xh-dlband { flex-direction: column; text-align: center; padding: 24px 20px; }
}

/* ======================================================================
   guide — dark navy (JustWatch): title + intro → status segments · genre chips · sort → count → 6-up grid with bookmark ribbons → Top 5 strips
   ====================================================================== */
body.layout-guide {
  --xh-bg: #060d17; --xh-elev: #0f1a2b; --xh-card: #0f1a2b; --xh-text: #e9eef5; --xh-muted: #8a9bb0; --xh-line: #1c2a3d;
  background: var(--xh-bg); color: var(--xh-text);
}
body.layout-guide .xh-nav { border-bottom: 1px solid var(--xh-line); padding-bottom: 12px; }
body.layout-guide .xh-search { background: var(--xh-elev); border: 1px solid var(--xh-line); }
.xh-guide { margin-bottom: 36px; }
.xh-guide-head { padding: 22px 0 14px; }
.xh-guide-head h1 { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.xh-guide-head p { margin: 0; max-width: 860px; font-size: 14px; line-height: 1.6; color: var(--xh-muted); }
.xh-guide-bar { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--xh-line); border-bottom: 1px solid var(--xh-line); }
.xh-guide-seg { display: inline-flex; gap: 4px; padding: 3px; width: max-content; border-radius: 8px; background: var(--xh-elev); border: 1px solid var(--xh-line); }
.xh-guide-seg a { padding: 6px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--xh-muted); }
.xh-guide-seg a[aria-current="page"] { background: var(--xh-amber); color: var(--xh-on-accent, #fff); }
.xh-guide-chips { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.xh-guide-chips::-webkit-scrollbar { display: none; }
.xh-guide-k { flex-shrink: 0; margin-right: 6px; font-size: 12px; font-weight: 700; color: var(--xh-muted); letter-spacing: .04em; }
.xh-guide-chips a { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--xh-line); font-size: 13px; color: var(--xh-text); background: var(--xh-elev); }
.xh-guide-chips a:hover { border-color: var(--xh-muted); }
.xh-guide-chips a[aria-current="page"] { background: var(--xh-amber); border-color: var(--xh-amber); color: var(--xh-on-accent, #fff); }
.xh-guide-count { margin: 12px 0 14px; font-size: 13px; color: var(--xh-muted); }
.xh-guide-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 16px; }
.xh-gd { position: relative; min-width: 0; }
.xh-gd-pic { position: relative; display: block; aspect-ratio: 2/3; border-radius: 8px; overflow: hidden; background: var(--xh-elev); }
.xh-gd-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .25s ease; }
.xh-gd:hover .xh-gd-pic img { transform: scale(1.04); }
.xh-gd-badge { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 3px 7px; border-radius: 4px; background: #fff; color: #111; font-size: 11px; font-weight: 700; }
.xh-gd-badge.is-new { background: var(--xh-amber); color: var(--xh-on-accent, #fff); }
.xh-gd-eps { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 2px 6px; border-radius: 3px; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; font-weight: 600; }
.xh-gd-play {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding-left: 3px; background: rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.85); color: #fff; font-size: 14px;
  opacity: 0; transition: opacity .2s ease;
}
.xh-gd:hover .xh-gd-play { opacity: 1; }
.xh-gd-fav { /* JustWatch bookmark ribbon, top-left */
  position: absolute; left: 8px; top: -2px; z-index: 2; width: 28px; height: 36px; padding: 0; border: 0; cursor: pointer;
  background: rgba(10, 16, 28, .72); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}
.xh-gd-fav::before { content: "+"; display: block; margin-top: 4px; font-size: 18px; font-weight: 700; line-height: 1; }
.xh-gd-fav:hover { background: rgba(10, 16, 28, .95); }
.xh-gd-fav[aria-pressed="true"] { background: var(--xh-amber); color: var(--xh-on-accent, #fff); }
.xh-gd-fav[aria-pressed="true"]::before { content: "✓"; font-size: 15px; margin-top: 6px; }
.xh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.xh-gd-t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 1px 0; font-size: 13px; }
.xh-gd-t a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--xh-text); }
.xh-gd-t a:hover { color: var(--xh-amber); }
.xh-gd-t small { flex-shrink: 0; font-size: 11px; color: var(--xh-muted); font-variant-numeric: tabular-nums; }
body.layout-guide .xh-all { margin: 24px 0 8px; }
body.layout-guide .xh-cta.xh-cta--ghost { border-color: var(--xh-line); }
.xh-top5 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0 0 36px; }
.xh-top5-col { padding: 18px 20px; border-radius: 12px; background: var(--xh-elev); border: 1px solid var(--xh-line); }
.xh-top5-col .xh-section-title { margin-bottom: 12px; font-size: 16px; }
.xh-top5 ol { list-style: none; margin: 0; padding: 0; }
.xh-top5 li + li { border-top: 1px solid var(--xh-line); }
.xh-top5 li a { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: inherit; }
.xh-top5 .n { width: 22px; font-size: 18px; font-weight: 800; color: var(--xh-muted); font-variant-numeric: tabular-nums; }
.xh-top5 li:first-child .n { color: var(--xh-amber); }
.xh-top5 .pic { flex-shrink: 0; width: 40px; aspect-ratio: 2/3; border-radius: 4px; overflow: hidden; background: #1c2a3d; }
.xh-top5 .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.xh-top5 .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xh-top5 .tx strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xh-top5 .tx small { font-size: 12px; color: var(--xh-muted); }
.xh-top5 li a:hover .tx strong { color: var(--xh-amber); }
@media (max-width: 1100px) { .xh-guide-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .xh-guide-head { padding: 14px 0 10px; }
  .xh-guide-seg { width: 100%; }
  .xh-guide-seg a { flex: 1; text-align: center; padding: 6px 0; }
  .xh-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  .xh-gd-t { flex-direction: column; align-items: stretch; gap: 2px; }
  .xh-gd-t a { display: block; max-width: 100%; }
  .xh-top5 { grid-template-columns: 1fr; gap: 14px; }
}