/* Final presentation layer for every user-facing Recs route.
 * Route styles own structure, artwork, and interaction; this sheet owns the
 * common material, shape, type rhythm, and neutral/primary control language.
 * Keep it last in each document so a route cannot silently drift back to an
 * older visual system. Do not place fixed geometry or gesture rules here. */

html[data-recs-redesign="liquid-glass"] {
  /* Solid content is readable over the ambient field. Glass belongs to the
     navigation and modal backdrop, never a scrolling stack of translucent cards. */
  --lg-panel:#1c1f25;
  --lg-card:#24272e;
  --lg-inner:#2b2e36;
  --lg-muted:#20232a;
  --lg-hover:#30343c;
  --lg-line:rgba(237,242,255,.12);
  --lg-line-strong:rgba(237,242,255,.2);
  --lg-reflection:linear-gradient(155deg,rgba(255,255,255,.045),transparent 48%);
  --lg-shadow:0 12px 30px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.055);
  --lg-card-shadow:0 5px 16px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.045);
  --recs-surface-radius-panel:24px;
  --recs-surface-radius-card:18px;
  --recs-btn-radius:14px;
  --recs-btn-font-weight:650;
  --recs-unified-control-bg:#2b2e36;
  --recs-unified-control-hover:#353942;
  --recs-unified-control-border:rgba(237,242,255,.2);
}
html[data-recs-redesign="liquid-glass"][data-theme="light"] {
  --lg-panel:#f7f8fa;
  --lg-card:#fff;
  --lg-inner:#e9ecf1;
  --lg-muted:#f0f2f5;
  --lg-hover:#e3e7ed;
  --lg-line:rgba(28,38,53,.11);
  --lg-line-strong:rgba(28,38,53,.19);
  --lg-reflection:linear-gradient(155deg,rgba(255,255,255,.72),transparent 54%);
  --lg-shadow:0 12px 30px rgba(31,40,55,.07),inset 0 1px 0 #fff;
  --lg-card-shadow:0 5px 16px rgba(31,40,55,.05),inset 0 1px 0 #fff;
  --recs-unified-control-bg:#eef0f4;
  --recs-unified-control-hover:#e4e8ee;
  --recs-unified-control-border:rgba(28,38,53,.19);
}

/* Previously unshared page families join the existing panel/card aliases.
   Rich image-backed heroes, poster tiles, and the Taste Web graph are excluded. */
html[data-recs-redesign="liquid-glass"] body :is(
  .music-album-page__panel,.music-stats-panel,.music-dna-panel,
  .taste-web-summary-card,.tc-card,.tc-balance-card,.tc-hero,
  .radar-toolbar,.recap-toolbar,.media-editable-rating-panel,
  .media-people-panel,.media-public-review-panel,.episode-rating-panel,
  .rating-spread-panel,.review-wall-card,.pf-card,.recs-output-panel,
  .diagnostics-hero,.import-hero,.person-hero,.username-card
) {
  background-color:var(--recs-surface-panel)!important;
  border:1px solid var(--recs-surface-border)!important;
  border-radius:var(--recs-surface-radius-panel)!important;
  box-shadow:var(--lg-shadow)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html[data-recs-redesign="liquid-glass"] body :is(
  .music-album-page__review,.music-album-page__similar,
  .music-for-you-card,.music-taste-inspector-card,
  .discover-rec-card,.discover-music-card,.recs-media-card,
  .recs-review-card,.public-review-card,.search-loading-card,
  .search-tag-feedback-card,.smart-list-card,.pf-episode-comment-card,
  .ob-music-choice-card,.track-review-card,.radar-card,
  .compare-compat-card,.stat-text-card,.music-album-page__tracklist
) {
  background-color:var(--recs-surface-card)!important;
  border:1px solid var(--recs-surface-border)!important;
  border-radius:var(--recs-surface-radius-card)!important;
  box-shadow:var(--lg-card-shadow)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html[data-recs-redesign="liquid-glass"] body :is(
  .music-album-page__panel,.music-stats-panel,.music-dna-panel,.tc-card,
  .tc-balance-card,.radar-toolbar,.recap-toolbar,.rating-spread-panel,
  .review-wall-card,.recs-output-panel,.diagnostics-hero,.import-hero
) {background-image:var(--lg-reflection)!important}

/* The legacy action families retain layout and semantic states, but share a
   comfortably sized rounded rectangle and the same quiet press feedback. */
html[data-recs-redesign="liquid-glass"] body :is(
  .recx-btn,.auth-flow-button,.admin-btn,.tc-button,.np-btn,
  .recs-toolbar-btn,.recs-options-btn,.recs-get-btn,.recs-surprise-btn,
  .music-album-page__button,.social-load-more-btn,.progress-find-btn,
  .home-move-btn,.list-move-btn,.pf-show-all-btn
) {
  border-radius:var(--recs-btn-radius)!important;
  font-family:var(--recs-font-sans)!important;
  font-weight:var(--recs-btn-font-weight)!important;
  letter-spacing:-.01em!important;
  transition:background-color 160ms ease,border-color 160ms ease,
    color 160ms ease,box-shadow 160ms ease,transform 160ms ease!important;
}
html[data-recs-redesign="liquid-glass"] body :is(
  .recx-btn:not(.primary):not(.danger),.auth-flow-button.secondary,
  .tc-button:not(.tc-save),.music-album-page__button,.social-load-more-btn,
  .recs-toolbar-btn,.recs-options-btn,.recs-surprise-btn
) {
  background:var(--recs-unified-control-bg)!important;
  border:1px solid var(--recs-unified-control-border)!important;
  color:var(--recs-color-text)!important;
  box-shadow:inset 0 1px 0 var(--lg-highlight)!important;
}
html[data-recs-redesign="liquid-glass"] body :is(
  .recx-btn:not(.primary):not(.danger),.auth-flow-button.secondary,
  .tc-button:not(.tc-save),.music-album-page__button,.social-load-more-btn,
  .recs-toolbar-btn,.recs-options-btn,.recs-surprise-btn
):hover:not(:disabled) {
  background:var(--recs-unified-control-hover)!important;
  border-color:color-mix(in srgb,var(--accent) 40%,var(--recs-unified-control-border))!important;
}
html[data-recs-redesign="liquid-glass"] body :is(
  .recx-btn.primary,.auth-flow-button.primary,.tc-save,.recs-get-btn
) {
  background:var(--accent)!important;
  border:1px solid var(--accent)!important;
  color:var(--accent-btn-text)!important;
  box-shadow:0 7px 20px color-mix(in srgb,var(--accent) 12%,transparent)!important;
}
html[data-recs-redesign="liquid-glass"] body :is(
  .recx-btn.primary,.auth-flow-button.primary,.tc-save,.recs-get-btn
) :is(svg,span) {color:inherit}
html[data-recs-redesign="liquid-glass"] body :is(
  .recx-btn,.auth-flow-button,.admin-btn,.tc-button,.np-btn,
  .recs-toolbar-btn,.recs-options-btn,.recs-get-btn,.recs-surprise-btn,
  .music-album-page__button,.social-load-more-btn,.progress-find-btn
):active:not(:disabled) {transform:scale(.975)!important}

/* Utility chips are compact pills, visually related to the button family
   without making dense filter bars taller. Preserve their selected colors. */
html[data-recs-redesign="liquid-glass"] body :is(
  .music-album-page__chip,.music-album-page__artist-chip,
  .recx-chip,.ob-chip,.tc-chip,.search-library-chip
) {border-radius:999px!important;border-color:var(--recs-surface-border-strong)!important}
html[data-recs-redesign="liquid-glass"] body :is(
  .recx-input,.recx-select,.recx-textarea,.music-album-page__panel input,
  .auth-flow-field input,.tc-card input,.tc-card select
) {border-radius:14px;border-color:var(--recs-surface-border-strong);background:var(--recs-surface-inner);color:var(--recs-color-text)}

/* A shared desktop reading scale: important content leads, but headings do
   not balloon into a full-screen card on wide monitors. */
@media (min-width:901px) {
  html[data-recs-redesign="liquid-glass"] body :is(.recx-title,.ob-title) {
    font-size:clamp(2.15rem,3.5vw,3.4rem);
    line-height:1.04;
    letter-spacing:-.045em;
  }
}
@media (max-width:700px) {
  html[data-recs-redesign="liquid-glass"] {
    --recs-surface-radius-panel:22px;
    --recs-surface-radius-card:17px;
  }
  html[data-recs-redesign="liquid-glass"] body :is(
    .recx-btn,.auth-flow-button,.admin-btn,.tc-button,.np-btn,
    .music-album-page__button,.social-load-more-btn,.progress-find-btn
  ) {min-height:44px}
}
@media (prefers-reduced-motion:reduce) {
  html[data-recs-redesign="liquid-glass"] body :is(
    .recx-btn,.auth-flow-button,.admin-btn,.tc-button,.np-btn,
    .recs-toolbar-btn,.recs-options-btn,.recs-get-btn,.recs-surprise-btn,
    .music-album-page__button,.social-load-more-btn,.progress-find-btn
  ) {transition:none!important;transform:none!important}
}

/* The public landing page keeps its distinct hero, but its controls use the
   same radius/weight as the signed-in app. */
html.recs-landing-page .landing-home .landing-button {
  border-radius:14px;
  font-weight:650;
  transition:background-color 160ms ease,border-color 160ms ease,opacity 160ms ease,transform 160ms ease;
}
html.recs-landing-page .landing-home .landing-button:active {transform:scale(.975)}

@media (prefers-reduced-motion:reduce) {
  html.recs-landing-page .landing-home .landing-button,
  html.recs-landing-page .landing-home .landing-button:active {
    transition:none;
    transform:none;
  }
}

/* Profile and Home metadata share one accent-aware pill treatment. */
html body :is(#np-feed .np-activity-score,.home-row-rating-tail) :is(.compact-rating-stars,.recs-activity-badge,.home-status-pill){
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:24px!important;
  min-height:24px!important;
  padding:0 7px!important;
  border:1px solid color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.1))!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--accent) 16%,var(--recs-color-card-inner))!important;
  color:var(--accent)!important;
  box-shadow:none!important;
  line-height:1!important;
}
html body :is(#np-feed .np-activity-score,.home-row-rating-tail) .recs-activity-badge{
  width:24px!important;flex:0 0 24px!important;padding:0!important;
}
html body .home-status-pill{font-size:11px;font-weight:750;white-space:nowrap}
body.profile-next-page .np-top-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
body.profile-next-page .np-top-type{height:40px;max-width:132px;padding:0 24px 0 10px;border:1px solid var(--border2);border-radius:12px;background:var(--surface2);color:var(--text);font-family:inherit;font-size:13px;font-weight:600}
body.profile-next-page .np-top-controls .np-edit-top4-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border-radius:12px}
html body .discover-builder .db-result-body{box-sizing:border-box;padding:10px 10px 12px;min-width:0;width:100%}
html body .discover-builder :is(.db-result-title,.db-result-meta){margin:0;max-width:100%;overflow-wrap:anywhere}
html body .discover-builder .db-result-meta{display:block;margin-top:6px}
html[data-theme] body :is(#film-modal .modal-card.media-preview-card #modal-content .media-preview-actions,#film-modal,.media-page-wrap) .add-btn.add-btn-saved.in-lib-watching{
  background:#fff!important;color:#111!important;-webkit-text-fill-color:#111!important;border-color:#fff!important;box-shadow:none!important;
}
html[data-theme] body :is(#film-modal .modal-card.media-preview-card #modal-content .media-preview-actions,#film-modal,.media-page-wrap) .add-btn.add-btn-saved.in-lib-watching :is(span,svg){color:#111!important;opacity:1!important;-webkit-text-fill-color:currentColor!important}
html[data-theme="light"] body :is(#film-modal .modal-card.media-preview-card #modal-content .media-preview-actions,#film-modal,.media-page-wrap) .add-btn.add-btn-saved.in-lib-watching{
  background:#111!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:#111!important;
}
html[data-theme="light"] body :is(#film-modal .modal-card.media-preview-card #modal-content .media-preview-actions,#film-modal,.media-page-wrap) .add-btn.add-btn-saved.in-lib-watching :is(span,svg){color:#fff!important}

/* Follow-up mobile layout fixes. */
#home-section-board[data-order-pending]{visibility:hidden}
html body .home-section-head .home-section-title{font-size:1.05rem!important;font-weight:900!important;letter-spacing:.065em!important;line-height:1.3!important}
.home-watchlist-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.home-watchlist-carousel::-webkit-scrollbar{display:none}
.home-watchlist-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.home-watchlist-slide .home-featured-card{height:100%;box-sizing:border-box}
.home-carousel-controls{display:flex;justify-content:center;gap:4px;margin-top:8px}
.home-carousel-controls button{display:grid;place-items:center;width:32px;height:28px;border:0;background:none;padding:0;cursor:pointer}
.home-carousel-controls button::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.45}
.home-carousel-controls button[aria-pressed="true"]::after{background:var(--accent);opacity:1;width:18px;border-radius:5px}
html body.search-liquid #search-results .search-media-result-card:not([data-media-type="Music"]){height:auto!important;max-height:none!important;min-height:164px!important}
html body.search-liquid #search-results .search-media-result-card:not([data-media-type="Music"])>.search-result-poster{width:88px!important;min-width:88px!important;max-width:88px!important;height:132px!important;min-height:132px!important;max-height:132px!important;flex:0 0 88px!important;aspect-ratio:2/3!important}
html body.search-liquid #search-results .search-media-result-card:not([data-media-type="Music"])>.search-result-poster>:is(.result-placeholder,.result-thumb){width:100%!important;min-width:100%!important;max-width:100%!important;height:100%!important;min-height:100%!important;max-height:100%!important;margin:0!important;box-sizing:border-box;object-fit:cover!important}
html body.search-liquid #search-results .search-media-result-card:not([data-media-type="Music"])>.search-result-poster>.result-placeholder{display:grid!important;place-items:center}
html[data-theme] body .feed-card .feed-media{background:color-mix(in srgb,var(--text) 7%,var(--recs-color-card))!important;background-image:none!important}
html[data-theme] body :is(#film-modal,.media-page-wrap) .ep-season-toggle{border-radius:16px!important;overflow:hidden}
html[data-theme] body :is(#film-modal,.media-page-wrap) #next-episode-slot .episode-nav-btn{border:0!important;box-shadow:none!important;outline:none!important;background:transparent!important}
html[data-theme] body :is(#film-modal,.media-page-wrap) #next-episode-slot .episode-nav-btn:focus-visible{outline:2px solid var(--accent)!important;outline-offset:-3px}