/* Section navigation: section bar, tiles, Explore page, ↗ markers, and the site-wide white buttons (loaded last). */

/* ── Section tiles ── */
.sv-sections{padding:28px var(--page-gutter,48px) 4px;display:flex;flex-direction:column;gap:14px}
.sv-sections-head h2{margin:0;font-size:20px;letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.sv-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sv-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-height:150px;padding:16px;border:0;border-radius:14px;
  text-align:left;color:#fff;font:inherit;cursor:pointer;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.sv-tile:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.sv-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sv-tile b{position:relative;font-size:18px;font-weight:800;letter-spacing:-.02em}
.sv-tile span{position:relative;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.82)}
.sv-tile-icon{position:absolute;top:14px;right:14px;stroke:#fff;fill:none;stroke-width:1.8;opacity:.9}
.sv-tile-watch{background:linear-gradient(160deg,#243f8f,#101a3a 72%)}
.sv-tile-music{background:linear-gradient(160deg,#127a4b,#0b2a1e 72%)}
.sv-tile-art{background:linear-gradient(160deg,#9b2f69,#2a1024 72%)}
.sv-tile-animation{background:linear-gradient(160deg,#b15c12,#2e1807 72%)}

/* ── Explore page ── */
.explore-shell{max-width:1320px;margin:0 auto;padding:80px 32px 48px;display:flex;flex-direction:column;gap:24px}
.sv-explore-head h1{margin:0;font-size:clamp(26px,4vw,40px);letter-spacing:-.03em;color:var(--text)}
.sv-explore-head p{margin:4px 0 0;color:var(--muted)}
.sv-tiles-explore .sv-tile{min-height:170px}
.sv-explore-popular h2{margin:0 0 12px;font-size:20px;color:var(--text)}

@media (max-width:768px){
  .sv-sections{padding:20px 16px 0}
  .sv-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sv-tile{min-height:128px;padding:14px}
  .explore-shell{padding:16px 16px 96px}
  .sv-tiles-explore{grid-template-columns:1fr}
  .sv-tiles-explore .sv-tile{min-height:108px}
}
@media (max-width:480px){
  .sv-tile b{font-size:16px}
  .sv-tile span{font-size:12px}
  #mobile-nav .mn-tab span{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.sv-tile{transition:none}.sv-tile:hover{transform:none}}

/* ── Desktop section bar ── */
.sv-section-bar{display:flex;align-items:center;gap:2px;margin-left:18px;min-width:0}
.sv-sec{height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.sv-sec:hover{color:var(--text)}
.sv-sec[aria-current="page"]{color:var(--text);background:rgba(255,255,255,.08)}
body.theme-light .sv-sec[aria-current="page"]{background:rgba(0,0,0,.06)}
.sv-sec:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1024px){.sv-section-bar{margin-left:10px}.sv-sec{padding:0 9px;font-size:13.5px}}
/* ── ↗ section markers (the Watch heading reuses the Discover hero) ── */
.sv-go{margin-left:3px;font-size:.9em;opacity:.7}
.sv-go-hint{margin:6px var(--page-gutter,48px) 0;font-size:12.5px;color:var(--muted)}
@media (max-width:768px){.sv-go-hint{margin:6px 16px 0}}

/* ── Buttons are white, not lime (owner decision 2026-09-28). Lime stays for focus rings, tiny dots and the logo dot. ── */
:root{--btn-primary-bg:#ffffff;--btn-primary-fg:#0a0a0f;--btn-primary-hover:#e6e6ee}
body.theme-light{--btn-primary-bg:#111118;--btn-primary-fg:#ffffff;--btn-primary-hover:#2a2a33}

html body .btn-primary,html body #sv-hero .svh-btn-primary,html body #nav-signup,html body .btn-signup,
html body .at-like,html body .ap-feed,html body .cl-appreciate,html body .gl-open,html body .rl-play,
html body .autoplay-play,html body .clip-copy-btn,html body .comment-submit,
html body .card-act-btn.card-act-play,html body .disc-act-btn.disc-act-play,html body .disc-card-overlay-play,
html body .vps-save-btn,html body .co-btn-next,html body .csb-btn-primary,html body .pwp-share-btn.primary,
html body .landing-bento-card.viewer button,html body .art-universe-btn.primary,html body .universe-follow-btn:not(.following),html body .universe-home-play-btn,
html body .saved-empty button,html body .gho-btn-watch,
html body .eim-btn-primary,html body .swg-btn-primary,html body .ip-cta,html body .pwp-signup-nudge-btn,html body .pwp-follow-btn:not(.following),html body .pwp-next-play,
html body .co-upload-btn,html body .dash-btn-primary,html body #page-profile .dash-btn-primary,html body .pmt-btn.active[data-mode="creator"],
html body.theme-light.guest-landing-active #main-nav .btn-signup,html body.guest-landing-active #main-nav .btn-signup,
html body .plan-btn.primary,html body #page-pricing .plan-btn.primary,html body .ntf-sign-in-cta,html body .asn-cta,html body .submit-btn,html body #auth-submit-btn,html body .mso-ai-submit,
html body .cp-follow-btn:not(.following),html body .wiz-btn-next,html body .wiz-btn-publish,html body .trailer-play,html body .gsb-btn-primary{
  background:var(--btn-primary-bg)!important;color:var(--btn-primary-fg)!important;border-color:var(--btn-primary-bg)!important;box-shadow:none!important;
}
html body .btn-primary:hover,html body #sv-hero .svh-btn-primary:hover,html body #nav-signup:hover,html body .at-like:hover,html body .ap-feed:hover,
html body .cl-appreciate:hover,html body .gl-open:hover,html body .rl-play:hover,html body .wiz-btn-next:hover,
html body .plan-btn.primary:hover,html body #page-pricing .plan-btn.primary:hover,html body .submit-btn:hover,html body .trailer-play:hover,
html body .eim-btn-primary:hover,html body .swg-btn-primary:hover,html body .ip-cta:hover,html body .pwp-signup-nudge-btn:hover,html body .pwp-next-play:hover,
html body .dash-btn-primary:hover,html body #page-profile .dash-btn-primary:hover,html body .co-upload-btn:hover{
  background:var(--btn-primary-hover)!important;box-shadow:none!important;
}


/* Switch knobs, icons and small labels sitting on a white (or near-black) fill must contrast with it. */
html body .vps-toggle.on::after,html body .universe-notif-toggle input:checked+.universe-notif-slider::before{background:var(--btn-primary-fg)!important}
html body .mso-ai-submit svg{stroke:currentColor!important}
html body [data-mobile-plan].active small{color:inherit!important;opacity:.7}
/* Liked / appreciated state keeps its pink so the toggle still reads as "on". */
html body .at-like.on,html body .cl-appreciate.on{background:#ff5c8a!important;color:#fff!important;border-color:#ff5c8a!important}
/* Selected chips, pills, tabs and switches. */
html body .genre-pill.active,html body .disc-chip.active,html body .disc-sticky-pill.active,html body .universe-tab.active,html body .vps-toggle.on,html body [data-mobile-plan].active,
html body .universe-notif-toggle input:checked+.universe-notif-slider{
  background:var(--btn-primary-bg)!important;color:var(--btn-primary-fg)!important;border-color:var(--btn-primary-bg)!important;
}

/* Small laptops: the logo already goes home, so the bar drops "Home" to leave room for search and upload. */
@media (max-width:900px){.sv-sec[data-section="home"]{display:none}.sv-sec{padding:0 8px}}
@media (max-width:768px){.sv-section-bar{display:none}}

/* ── Polish pass (2026-09-29) ── */
/* Standard cards: a clip's first frame fills the cover like an image does. */
.sv-card-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Continue Watching: remove button shows on hover or keyboard focus, and always on touch screens. */
.sv-card.cw-home-card{position:relative}
html body .cw-home-card .cw-remove{position:absolute;top:8px;right:8px;z-index:5;width:28px;height:28px;min-height:0;padding:0;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(8,8,14,.78);color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}
html body .cw-home-card:hover .cw-remove,html body .cw-home-card:focus-within .cw-remove,html body .cw-home-card .cw-remove:focus-visible{opacity:1}
@media (hover:none){html body .cw-home-card .cw-remove{opacity:1}}
/* Round icon buttons stay circles (the app-wide 44px minimum height stretched them into ovals). */
html body .mm-btn,html body .gsb-btn-close,html body .svh-now-play,html body .svh-pause,html body .sv-rail-btn,html body .av-btn,html body .av-close,
html body .np-close,html body .np-queue button,html body .mso-close,html body .epk-close,html body .vpm-play-btn{min-height:0}

/* Toasts with an action (e.g. Undo) can be clicked while they are showing. */
.toast.has-action.show{pointer-events:auto}
.toast-undo{margin-left:6px;padding:4px 10px;min-height:0;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:inherit;font:inherit;font-weight:700;cursor:pointer}
body.theme-light .toast-undo{background:rgba(0,0,0,.08)}
.toast-undo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The legacy desktop links (#nav-links) stay in the markup for JS but never show; the section bar replaced them.
   Two ids beat app-base's "nav#main-nav .nav-links{display:flex!important}" at 1024px and up. */
#main-nav #nav-links{display:none!important}