/* A New Page, family home: TONIGHT'S WORLD (design pass 2026-10-14). Presentation only; pairs with home-world.js.
   Loaded after /css/anp-tokens.css, /css/anp-worlds.css and the home's own passes, so it wins on equal footing.
   Scoped to #app .hw-band (the world scene at the top); the rest of the home stays on paper.
   Kids (5 to 10): warm, rounded glass cards, one gentle ambient. Teen (11 to 18): cinematic, 2.39:1
   letterboxed hero with grade, vignette and grain, flat 12px cards, weather only at 45%, no cute touches.
   Nothing under 14px. Every animation stops under prefers-reduced-motion. */

#app .hw-band{position:relative;margin:0 -16px;padding:4px 16px 20px;border-radius:0 0 28px 28px;color:var(--w-text)}
@media (min-width:600px){#app .hw-band{margin:16px 0 0;padding:8px 24px 24px;border-radius:28px}}
@media (min-width:961px){#app .hw-band{padding:8px 28px 28px}}
[data-lane="teen"] #app .hw-band{border-radius:0 0 12px 12px}
@media (min-width:600px){[data-lane="teen"] #app .hw-band{border-radius:12px}}
/* teens on a computer: the scene is a centred cinema screen, so the 2.39:1 frame never pushes Start off the first screen */
@media (min-width:961px){[data-lane="teen"] #app .hw-inner{max-width:840px;margin:0 auto}}
#app .hw-inner{position:relative;z-index:2}

/* the greeting row, now inside the scene */
#app .hw-band .home-top{margin-top:16px}
#app .hw-band .home-top h1{color:var(--w-text)}
#app .hw-band .home-top .home-sub{color:var(--w-text)}   /* round 2a P2-16: "Next up: Leo." reads on the world */
#app .hw-band .nights-chip{background:var(--w-chip,var(--w-surface));border-color:var(--w-line);color:var(--w-text)}
#app .hw-band .nights-chip .ico{color:var(--w-text)}

/* the hero: the world's art, the world name, tonight's episode */
/* tire-kick Oct 15 (P0-14.2): the world art at the brief's heights, phone 200px, computer 320px (teens keep the 2.39:1 letterbox) */
#app .hw-hero{margin-top:16px;min-height:0;aspect-ratio:auto;height:200px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55)}
@media (min-width:768px){#app .hw-hero{height:320px}}
/* two or three readers on a computer: the readers' cards sit in the scene too, so the art yields a little on a
   short screen (1024 wide: 246px) and is the full 320px from 1334px up; Start stays on the first screen */
@media (min-width:961px){#app .hw-band:has(.hw-grid--family) .hw-hero{height:clamp(240px,24vw,320px)}}
/* a 320px phone: the art at 164px (the brief's 200px from 361px up), so Start stays on the first screen */
@media (max-width:360px){#app .hw-hero{height:164px}#app .hw-band .hw-card .hw-duo{margin-bottom:6px}#app .hw-band .hw-card .hw-duo .sm-hero{width:44px;height:44px}#app .hw-band .hw-card .hw-duo .sm-friend{width:34px;height:34px}}
[data-lane="teen"] #app .hw-hero{aspect-ratio:2.39/1;height:auto;margin-top:12px;box-shadow:0 12px 30px -16px rgba(0,0,0,.7)}
/* teen film grain over the graded art, under the words (the scene's own grain sits under the cards) */
#app .hw-hero .hw-grain{display:none}
[data-lane="teen"] #app .hw-hero .hw-grain{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#app .hw-hero .hw-hero-img{z-index:0}
/* the one ambient element, inside the hero only, fading out before the words */
/* home-world.js sets --hw-amb-end to just above the hero words (never past 72%, 48% on a phone), so nothing moves behind them */
#app .hw-hero{--hw-amb-end:72%}
@media (max-width:599px){#app .hw-hero{--hw-amb-end:48%}}
#app .hw-hero .hw-amb{z-index:1;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--hw-amb-end) * .52),transparent var(--hw-amb-end));mask-image:linear-gradient(180deg,#000 0,#000 calc(var(--hw-amb-end) * .52),transparent var(--hw-amb-end))}
#app .hw-hero-copy{position:absolute;left:16px;right:16px;bottom:14px;z-index:3}
@media (min-width:961px){#app .hw-hero-copy{left:28px;right:28px;bottom:24px;max-width:640px}}
/* the world name sits on its own small dark label, so it reads on the brightest art (snow, sky) */
#app .hw-hero .w-eyebrow{display:inline-block;font-size:14px;line-height:1.3;color:#fff;text-shadow:none;padding:3px 10px;border-radius:999px;background:rgba(10,16,30,.62)}
[data-lane="teen"] #app .hw-hero .w-eyebrow{border-radius:4px;background:rgba(0,0,0,.55)}
#app .hw-hero-h{margin:4px 0 0;font:500 clamp(24px,1.6vw + 18px,40px)/1.15 var(--font-serif);color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5);text-wrap:balance}
[data-lane="teen"] #app .hw-hero-h{font-weight:400;letter-spacing:.005em}
@media (max-width:420px){[data-lane="teen"] #app .hw-hero-h{font-size:22px}[data-lane="teen"] #app .hw-hero-copy{bottom:10px}}
/* tonight's card and the shelf, side by side on a computer */
#app .hw-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}
@media (min-width:1024px){#app .hw-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
#app .hw-band .kid-grid{margin:0;padding:0;background:none;border-radius:0;max-width:none}
#app .hw-band .kid-grid.one{display:block}
/* a computer with two or three readers: their cards side by side in the scene (Start first screen), the shelf under them */
#app .hw-grid.hw-grid--family{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){#app .hw-band .kid-grid.hw-n2{grid-template-columns:repeat(2,minmax(0,1fr))}}
#app .hw-band .hw-card.hw-lead{box-shadow:0 0 0 2px var(--w-accent)}

/* ---- the Tonight card: world glass (kids) or a flat 12px panel (teen); its picture is the hero above ---- */
#app .hw-band .hw-card{margin:0;background:var(--w-surface);border:1px solid var(--w-line);border-radius:20px;box-shadow:none;color:var(--w-text);overflow:visible;display:flex;flex-direction:column}
[data-lane="teen"] #app .hw-band .hw-card{border-radius:12px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:none;backdrop-filter:none}
#app .hw-band .hw-card .kid-art,#app .hw-band .hw-card .tn-art{display:none}
/* the hero already says the world and tonight's episode; the card's own world line stays for screen readers only */
#app .hw-band .hw-card .kid-world{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#app .hw-band .hw-card .kid-body,#app .hw-band .hw-card .tn-body{padding:18px 18px 18px}
/* the reader's own hero and friend, at the top of the card (the card's picture is the hero above) */
#app .hw-band .hw-card .hw-duo{position:static;display:flex;align-items:flex-end;margin:0 0 10px}
#app .hw-band .hw-card .hw-duo .sm-hero{width:52px;height:52px;border-color:var(--w-line)}
#app .hw-band .hw-card .hw-duo .sm-friend{width:38px;height:38px;margin-left:-10px;border-color:var(--w-line)}
[data-lane="teen"] #app .hw-band .hw-card .hw-duo .sm-hero,[data-lane="teen"] #app .hw-band .hw-card .hw-duo .sm-friend img{animation:none!important}
[data-lane="teen"] #app .hw-band .hw-card .hw-duo .sm-hero,[data-lane="teen"] #app .hw-band .hw-card .hw-duo .sm-friend{border-radius:10px;border-width:2px}
#app .hw-band .hw-card .who h2,#app .hw-band .hw-card .tn-h,#app .hw-band .hw-card .next,#app .hw-band .hw-card .tn-line,
#app .hw-band .hw-card .kid-world,#app .hw-band .hw-card .kid-morning,#app .hw-band .hw-card .kid-notice{color:var(--w-text)}
#app .hw-band .hw-card .who .age,#app .hw-band .hw-card .cliff,#app .hw-band .hw-card .mins,#app .hw-band .hw-card .tn-k,
#app .hw-band .hw-card .cover-pick-label,#app .hw-band .hw-card .weeknote{color:var(--w-muted)}
#app .hw-band .hw-card .tn-k{text-transform:uppercase;letter-spacing:.08em;font-size:14px}
[data-lane="teen"] #app .hw-band .hw-card .tn-k{letter-spacing:.16em}
#app .hw-band .hw-card a,#app .hw-band .hw-card .weeknote a,#app .hw-band .hw-card a.weeknote{color:var(--w-text)}
#app .hw-band .hw-card .kid-more{border-top-color:var(--w-line)}
#app .hw-band .hw-card .kid-morning,#app .hw-band .hw-card .kid-notice{background:var(--w-surface);border:1px solid var(--w-line)}
#app .hw-band .hw-card .done-pill{background:transparent;color:var(--w-text);border-color:var(--w-text)}
#app .hw-band .hw-card .btn-quiet,#app .hw-band .hw-card .btn.ghost{background:transparent;color:var(--w-text);border-color:var(--w-muted)}
#app .hw-band .hw-card .btn-quiet:hover,#app .hw-band .hw-card .btn.ghost:hover{border-color:var(--w-text);color:var(--w-text)}
/* the one primary button wears the world accent */
/* tire-kick Oct 15: --w-btn / --w-btn-ink are the world accent where the pair passes 4.5:1 (every world does), else gold */
#app .hw-band .hw-card .btn-gold{background:var(--w-btn,var(--w-accent));color:var(--w-btn-ink,var(--w-accent-ink));box-shadow:0 4px 0 rgba(0,0,0,.25),0 12px 30px var(--w-glow)}
#app .hw-band .hw-card .btn-gold:hover{background:var(--w-btn,var(--w-accent));color:var(--w-btn-ink,var(--w-accent-ink));filter:brightness(1.06)}
[data-lane="teen"] #app .hw-band .hw-card .btn-gold{border-radius:10px;box-shadow:0 2px 0 rgba(0,0,0,.35)}
/* the lantern and the cover dots read on the world */
#app .hw-band .sm-l-wire,#app .hw-band .sm-l-glass{stroke:var(--w-text)}
#app .hw-band .sm-l-cap{fill:var(--w-text)}
#app .hw-band .cover-sw.on .cover-dot{box-shadow:0 0 0 2px var(--w-bg2),0 0 0 4px var(--w-text)}
#app .hw-band .cover-dot{border-color:var(--w-bg2)}
/* focus stays visible on every world */
html body #app .hw-band :focus-visible{outline:3px solid var(--w-text);outline-offset:3px}

/* ---- the shelf: this season's episodes, tonight's outlined in the world accent (not buttons: no added taps) ---- */
#app .hw-shelf{padding:16px 16px 12px;color:var(--w-text);min-width:0}
[data-lane="teen"] #app .hw-shelf{border-radius:12px}
#app .hw-shelf-h{margin:0 0 10px;font:600 18px/1.25 var(--font-serif);color:var(--w-text)}
#app .hw-eps-scroll{overflow:visible;margin:0;padding:4px 0 8px}
#app .hw-eps-scroll:focus-visible{outline-offset:-3px;border-radius:12px}
#app .hw-eps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
@media (min-width:480px){#app .hw-eps{grid-template-columns:repeat(4,minmax(0,1fr))}}
#app .hw-ep{min-width:0}
#app .hw-eps-more{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;color:var(--w-text);text-decoration:underline;text-underline-offset:3px}
/* the thumbnails reuse the very file the hero loaded (home-world.js sets --hw-thumb), so the art is fetched once */
#app .hw-ep-art{display:block;aspect-ratio:16 / 9;border-radius:12px;background:var(--w-bg2) var(--hw-thumb,none) center/contain no-repeat;border:1px solid var(--w-line)}
[data-lane="kids"] #app .hw-ep-art{filter:saturate(1.05)}
[data-lane="teen"] #app .hw-ep-art{border-radius:6px;filter:saturate(.78) contrast(1.06) brightness(.92)}
#app .hw-ep.done .hw-ep-art{filter:saturate(.55) brightness(.78)}
#app .hw-ep:not(.done):not(.now) .hw-ep-art{opacity:.55}
#app .hw-ep.now .hw-ep-art{outline:2px solid var(--w-accent);outline-offset:2px}
#app .hw-ep-t{display:block;margin-top:6px;font-size:14px;line-height:1.3;color:var(--w-muted)}
#app .hw-ep.now .hw-ep-t{color:var(--w-text);font-weight:700}

/* the cards below the scene keep the page's paper; the first one gets a little air */
#app .hw-band + .home-dash .home-main > :first-child{margin-top:20px}

/* a 320px phone: a little less air so Start stays on the first screen */
@media (max-width:360px){#app .hw-band .home-top{margin-top:8px}#app .hw-hero{margin-top:10px}#app .hw-grid{margin-top:12px}#app .hw-band .hw-card .kid-body,#app .hw-band .hw-card .tn-body{padding-top:14px}}

@media (prefers-reduced-motion:reduce){#app .hw-band *,#app .hw-band *::before,#app .hw-band *::after{animation:none!important;transition:none!important}}