/* Production integration for the sports & entertainment homepage. Loads after approved-layout.css.
   It adds styles for elements the design reference left as placeholders (app download link, Sign up /
   Contact dialog, motion toggle, no-JS strip) and never re-frames the approved composition. The one
   intentional override is the accessibility reflow at the end of this file. */

/* Browsers without light-dark() (Safari before 17.5) would otherwise drop every themed color. */
@supports not (color: light-dark(#000, #fff)) {
  :root{--bg:#fefcf7;--surface:#fffefb;--surface-2:#f8f5ee;--line:#ebe4d3;--line-strong:#d6cdb6;--ink:#111216;--ink-2:#27306b;--muted:#4f5680;--link:#1f3fbf;
    --y-tint:#fff3c4;--note:#fdf5dc;--note-line:#f1e2ad;--fold:#f3e1a0;--bar-off:#f4e8bd;--stripe:#efe9dc;--dot-off:#d9d4c9;
    --good-bg:#e2f4e7;--good-fg:#1b6632;--warn-bg:#fdebd6;--warn-fg:#874705;--info-bg:#e8ebff;--info-fg:#2d3ea3;--neutral-bg:#efede8;--neutral-fg:#272930;
    --review-fg:#3b2f00;--shadow:rgba(70,48,0,.14);--shadow-s:rgba(70,48,0,.06);color-scheme:light}
  heyoh-stream{--sl-mention:#1264a3;--sl-mention-bg:#e8f5fa}
}

/* Header: app download link shares the Sign in treatment; phones show it in the footer instead. */
.getapp{white-space:nowrap;color:var(--ink-2);text-decoration:none;font-size:clamp(1.1rem,.95rem + .45cqi,1.35rem);min-height:44px;display:inline-flex;align-items:center;padding-inline:.25rem}
.getapp:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
@container page (max-width:40rem){.site-nav .getapp{display:none}}

/* Sign up opens a dialog, so it is a button styled exactly like the reference link. */
button.btn{margin:0;font-family:inherit;line-height:inherit;letter-spacing:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}

/* Footer: Contact is a dialog button with the reference link treatment; the phone-only download link sits
   between Privacy and Contact on the existing row. */
.site-footer .foot-contact{justify-self:end;margin:0;padding:0;border:0;background:none;font:inherit;line-height:inherit;cursor:pointer;color:var(--ink-2);text-decoration:none;font-size:1.02rem;min-height:36px;display:inline-flex;align-items:center}
.site-footer .foot-contact:hover{text-decoration:underline;text-underline-offset:.2em;color:var(--ink)}
.site-footer .foot-getapp{display:none}
.site-footer a,.site-footer .foot-contact{white-space:nowrap}
@container page (max-width:40rem){
  .site-footer{display:flex;flex-wrap:wrap;justify-content:space-between}
  .site-footer .rule,.site-footer .tagline{flex:0 0 100%}
  .site-footer .foot-getapp{display:inline-flex}
}

/* Enlarged text: header rows wrap instead of clipping Sign up off-screen. No effect when everything fits. */
.site-header{flex-wrap:wrap}
.site-nav{flex-wrap:wrap;justify-content:flex-end;margin-left:auto}

/* Motion toggle: a small control at the strip's top-right corner, over the artwork, outside the page flow. */
.st-toggle{position:absolute;top:0;right:clamp(.9rem,3cqi,2.5rem);z-index:3;transform:translateY(calc(-100% - .1rem));width:2.25rem;height:2.25rem;padding:0;display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer;
  box-shadow:0 1px 2px var(--shadow-s),0 10px 22px -14px var(--shadow);transition:background-color .15s var(--ease),border-color .15s var(--ease)}
.st-toggle::before{content:"";position:absolute;inset:-.35rem;border-radius:50%}
.st-toggle:hover{background:var(--surface-2);border-color:var(--ink-2)}
.st-toggle:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.st-toggle svg{width:.8rem;height:.8rem;fill:currentColor}
.st-toggle[data-state=playing] .st-toggle-play,.st-toggle[data-state=paused] .st-toggle-pause{display:none}
.st-toggle[hidden]{display:none}

/* Cards illustrate threads; they are not links, so the strip keeps its grab cursor. */
heyoh-stream:not([selectable]) .sm{cursor:inherit}
/* Static strips (reduced motion and the no-JS fallback) scroll horizontally with touch as well as keys. */
heyoh-stream.is-static .st-viewport{touch-action:pan-x pan-y}
/* The server-rendered strip is for visitors without JavaScript; with JavaScript it waits for the live stream. */
.js heyoh-stream:not(:defined){visibility:hidden}
.stream-failed heyoh-stream:not(:defined){visibility:visible}

/* Sign up / Contact dialog */
.gate{width:min(35rem,calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:1px solid var(--line);border-radius:1.25rem;
  background:var(--surface);color:var(--ink);box-shadow:0 1px 2px var(--shadow-s),0 40px 90px -40px rgba(20,16,0,.55);overflow:auto;overscroll-behavior:contain}
.gate::backdrop{background:rgba(16,19,28,.46);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gate-card{position:relative;padding:clamp(1.25rem,5vw,2.1rem) clamp(1.1rem,5vw,2.1rem) clamp(1.1rem,4vw,1.6rem)}
.gate-close{position:absolute;top:.7rem;right:.7rem;width:2.5rem;height:2.5rem;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.gate-close:hover{background:var(--surface-2);color:var(--ink)}
.gate-close svg{width:1.1rem;height:1.1rem}
.gate-mark{display:block;width:2.6rem;height:2.6rem}
.gate-title{margin:.85rem 2.25rem .45rem 0;font-family:var(--serif);font-weight:660;font-optical-sizing:auto;font-size:clamp(1.75rem,1.2rem + 2.4vw,2.35rem);line-height:1;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.gate-title:focus{outline:none}
.gate-intro{margin:0 0 1.2rem;font-size:1rem;line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.gate.done .gate-head{display:none}
.gate-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem .85rem;position:relative}
.gate-field{display:grid;gap:.35rem;min-width:0}
.gate-field>span{font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--ink-2)}
.gate-field input{box-sizing:border-box;width:100%;min-width:0;height:2.9rem;margin:0;padding:0 .85rem;border:1px solid var(--line-strong);border-radius:.65rem;background:var(--bg);color:var(--ink);
  font:inherit;font-size:1rem;line-height:1.2;box-shadow:inset 0 1px 2px var(--shadow-s);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.gate-field input::placeholder{color:var(--muted);opacity:.7}
.gate-field input:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 3px rgba(31,63,191,.22);box-shadow:0 0 0 3px color-mix(in srgb,var(--link) 22%,transparent)}
.gate-field input[aria-invalid=true]{border-color:#b42318;border-color:light-dark(#b42318,#ff8a80)}
.gate-field input[aria-invalid=true]:focus{box-shadow:0 0 0 3px rgba(180,35,24,.2)}
.gate-field--wide,.gate-submit,.gate-consent,.gate-note,.gate-honeypot{grid-column:1/-1}
.gate-submit{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:3rem;margin:.2rem 0 0;padding:0 1.2rem;border:1px solid rgba(90,60,0,.1);border-radius:.65rem;
  background:var(--y);color:var(--on-y);font:inherit;font-size:1.05rem;font-weight:600;line-height:1;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 18px -10px rgba(170,120,0,.65);transition:transform .15s var(--ease),background-color .15s var(--ease)}
.gate-submit:hover:not(:disabled){background:var(--y-hover);transform:translateY(-1px)}
.gate-submit:disabled{cursor:not-allowed;opacity:.7}
.gate-submit svg{width:1.1rem;height:1.1rem}
.gate-consent{margin:0;font-size:.78rem;line-height:1.45;color:var(--muted);text-wrap:pretty}
.gate-consent a{color:inherit;text-underline-offset:.15em}
.gate-consent a:hover{color:var(--ink)}
.gate-note{min-height:1.3rem;margin:0;font-size:.9rem;line-height:1.35;color:var(--ink-2);text-align:center}
.gate-note.err{color:#b42318;color:light-dark(#b42318,#ff8a80)}
.gate-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.gate-signup-success{grid-column:1/-1;display:grid;justify-items:center;gap:.7rem;padding:1.4rem .25rem .6rem;text-align:center}
.gate-signup-success svg{width:3.1rem;height:3.1rem;padding:.7rem;border-radius:50%;background:var(--y);color:var(--on-y)}
.gate-signup-success h2{margin:.2rem 0 0;font-family:var(--serif);font-weight:660;font-size:clamp(1.6rem,1.2rem + 1.8vw,2.05rem);line-height:1.05;letter-spacing:-.035em;color:var(--ink)}
.gate-signup-success h2:focus{outline:none}
.gate-signup-success p{max-width:34ch;margin:0;font-size:1rem;line-height:1.45;color:var(--ink-2)}
@media (max-width:30rem){.gate-form{grid-template-columns:1fr}}
.gate--inline{position:fixed;inset:0;z-index:100;display:block}
:root:has(.gate[open]){overflow:hidden}
@media (prefers-contrast:more){.gate-field input{border-color:var(--ink-2)}.gate-submit{box-shadow:none;border-color:var(--ink)}.st-toggle{box-shadow:none}}
@media (forced-colors:active){.gate,.gate-field input,.gate-submit,.st-toggle{border:1px solid ButtonText;forced-color-adjust:auto}.gate-signup-success svg{background:Highlight;color:HighlightText}}
@media print{.gate,.st-toggle{display:none}}

/* Accessibility reflow. approved-layout.css lets main shrink to 0 so the whole scene fits one screen. At
   larger text sizes or zoom that made the stream overlap the footer. With main's automatic minimum size,
   the venue still yields all spare height first (it keeps min-height 0), and only when the hero and cards
   alone exceed the viewport does the page grow and scroll instead of overlapping. */
main{min-height:auto}