/* One homepage photograph on every deployed route. Loaded last so it wins. */

html:has(#app),
body:has(#app){
  --gold:#efad31;
  --gold2:#d77a21;
  --cyan:#efad31;
  --ink:#f7f3ec;
  --muted:#adb9c8;
  --line:#273649;
  --panel-face:linear-gradient(145deg,rgba(13,23,34,.93),rgba(7,17,27,.94));
  --page-photo:url('assets/home-page-background.jpg');
  --page-canvas:
    linear-gradient(90deg,rgba(1,5,10,.88) 0%,rgba(1,5,10,.78) 34%,rgba(1,5,10,.42) 55%,rgba(1,5,10,.12) 78%,rgba(1,5,10,.08) 100%),
    linear-gradient(180deg,rgba(1,5,10,.32),rgba(1,5,10,.05) 44%,rgba(1,5,10,.55) 100%),
    url('assets/home-page-background.jpg');
}

html:has(#app),
html:has(body .component-home),
html:has(body .about-page),
html:has(body .about-static-image),
html:has(body .page-eco-banner),
html:has(body .login-screen),
html:has(body .wireframe-home),
html:has(body .creator-landing),
body:has(#app),
body:has(#app):has(.component-home),
body:has(#app):has(.about-page),
body:has(#app):has(.about-static-image),
body:has(#app):has(.page-eco-banner),
body:has(#app):has(.login-screen),
body:has(#app):has(.wireframe-home),
body:has(#app):has(.creator-landing){
  color:var(--ink)!important;
  background-color:rgb(3,8,14)!important;
  background-image:var(--page-canvas)!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}

body:has(#app) main#app,
body:has(#app) main#app > .wrap,
body:has(#app) .about-page,
body:has(#app) .about-static-image,
body:has(#app) .component-home,
body:has(#app) .home-hero-component,
body:has(#app) .page-eco-banner,
body:has(#app) .wf-home-canvas,
body:has(#app) .wireframe-home{
  background-color:transparent!important;
  background-image:none!important;
}

body:has(#app) main#app::before,
body:has(#app) main#app::after,
body:has(#app) main#app > .wrap::before,
body:has(#app) main#app > .wrap::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}

body:has(#app) .login-art,
body:has(#app):has(.login-screen) .login-art{
  background-image:
    linear-gradient(90deg,rgba(1,5,10,.72) 0%,rgba(1,5,10,.28) 48%,rgba(1,5,10,.12) 100%),
    linear-gradient(180deg,rgba(1,5,10,.18),rgba(1,5,10,.48) 100%),
    var(--page-photo)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

@media(max-width:820px){
  html:has(#app),
  body:has(#app){
    background-attachment:scroll!important;
  }
}

body:has(#app):not(:has(.component-home)) main#app > .wrap{
  box-sizing:border-box!important;
  width:min(1440px,calc(100% - 48px))!important;
  max-width:1440px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:28px 34px 110px!important;
  min-height:calc(100vh - 102px)!important;
}

@media(max-width:820px){
  body:has(#app):not(:has(.component-home)){
    background-attachment:scroll!important;
  }
  body:has(#app):not(:has(.component-home)) main#app > .wrap{
    width:calc(100% - 24px)!important;
    padding:18px 12px 96px!important;
  }
}

body:has(#app):not(:has(.component-home)) :is(
  .panel,
  .component-panel,
  .wire-panel,
  .form,
  .login-card,
  .supporter-form,
  .artist-recommendations,
  .plan,
  .checkout-cart-panel,
  .checkout-payment,
  .checkout-song,
  .licence-summary,
  .supporter-library-note,
  .payment-option,
  .community-hero,
  .community-jukebox,
  .community-panel,
  .community-room,
  .community-footer,
  .broadcast-console,
  .wave-panel,
  .track-now,
  .chat-msg,
  .history-row,
  .analytics-metrics article,
  .artist-plan-card,
  .payout-note,
  .notice,
  .sitemap-group,
  .artist-portal-sidebar,
  .portal-selected-plan,
  .portal-artist-identity,
  .analytics-table,
  .portal-earning-cards article,
  .fan-stat-grid article,
  .fan-card-preview,
  .portal-music-row,
  .fan-music-card,
  .fan-playlist-card,
  .explore-filters,
  .explore-results,
  .discover-page .explore-filters,
  .discover-page .explore-results,
  .artist-stat-panel,
  .artist-genres-panel,
  .artist-bio-releases,
  .artist-process,
  .modal-box.dark,
  .curator-login-card,
  .curator-portal,
  .curator-review-card,
  .winner-card,
  .vote-callout,
  .live-session-choice,
  .on-air-panel,
  .conversation-panel,
  .history-panel,
  .schedule-panel
){
  background:var(--panel-face)!important;
  background-image:var(--panel-face)!important;
  border:1px solid #273649!important;
  border-radius:10px!important;
  box-shadow:0 15px 34px #0006!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

body:has(#app):not(:has(.component-home)) :is(
  .page-title,
  .section-head h2,
  .panel h2,
  .component-heading h2,
  .about-page h2,
  .wire-panel-title b,
  .portal-page-heading h1,
  .artist-portal-sidebar h2
){
  font-family:"Trebuchet MS",Inter,Arial,sans-serif!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
  color:#f0bd4f!important;
  text-shadow:none!important;
}

body:has(#app):not(:has(.component-home)) .eyebrow{
  font-family:"Trebuchet MS",Inter,Arial,sans-serif!important;
  letter-spacing:.14em!important;
  color:#e8b749!important;
}

body:has(#app):not(:has(.component-home)) .sub,
body:has(#app):not(:has(.component-home)) .lead,
body:has(#app):not(:has(.component-home)) .panel p{
  color:#c4ccd4!important;
}

body:has(#app):not(:has(.component-home)) :is(.link,.gold){
  color:#e8b749!important;
}

body:has(#app):not(:has(.component-home)) .btn:not([data-follow]),
body:has(#app):not(:has(.component-home)) .follow:not([data-follow]),
body:has(#app):not(:has(.component-home)) .component-mini-link{
  background:linear-gradient(100deg,#efad31,#d77a21)!important;
  border:1px solid #efbf5a!important;
  color:#18120c!important;
}

body:has(#app):not(:has(.component-home)) :is(.btn.ghost,.topbtn.ghost,.filter-clear,.explore-add-cart){
  background:rgba(8,16,26,.88)!important;
  border:1px solid #6e5d3d!important;
  color:#f2d395!important;
}

body:has(#app):not(:has(.component-home)) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]){
  background:#07111b!important;
  border:1px solid #35536a!important;
  color:#ecf1f8!important;
}

body:has(#app):not(:has(.component-home)) .discover-page .explore-filters,
body:has(#app):not(:has(.component-home)) .discover-page .explore-results{
  border-color:rgba(239,173,49,.45)!important;
}

body:has(#app):not(:has(.component-home)) .artist-portal-sidebar nav a.active{
  border-color:#5f4925!important;
  background:linear-gradient(90deg,#30220d,#17130d)!important;
  color:#efb640!important;
}

body:has(#app):has(.login-screen) .login-art{
  background-image:
    linear-gradient(90deg,rgba(1,5,10,.72) 0%,rgba(1,5,10,.28) 48%,rgba(1,5,10,.12) 100%),
    linear-gradient(180deg,rgba(1,5,10,.18),rgba(1,5,10,.48) 100%),
    var(--page-photo)!important;
  background-size:cover!important;
  background-position:center!important;
}

/* Public forms use the same field system as artist/fan signup and portal pages. */
body:has(#app) :is(
  .login-card,
  .form,
  .artist-signup-page,
  .supporter-form,
  .contact-form,
  .curator-login-card,
  .checkout-payment,
  .portal-form-grid,
  .portal-upload-section
){
  border:1px solid rgba(239,173,49,.28)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(12,23,36,.96),rgba(6,16,26,.96))!important;
  box-shadow:0 18px 48px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.04)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

body:has(#app) :is(.login-card,.form,.artist-signup-page,.supporter-form,.curator-login-card){
  padding:clamp(22px,2.4vw,34px)!important;
}

body:has(#app) :is(
  .login-card,
  .form,
  .artist-signup-page,
  .supporter-form,
  .contact-form,
  .curator-login-card,
  .checkout-payment,
  .portal-form-grid,
  .portal-upload-section
) label{
  display:block!important;
  margin:12px 0 6px!important;
  color:#cf9e3e!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}

body:has(#app) :is(
  .login-card,
  .form,
  .artist-signup-page,
  .supporter-form,
  .contact-form,
  .curator-login-card,
  .checkout-payment,
  .portal-form-grid,
  .portal-upload-section,
  .filter
) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]){
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  min-height:42px!important;
  margin-top:6px!important;
  padding:10px 12px!important;
  border:1px solid #35536a!important;
  border-radius:7px!important;
  background:#07111b!important;
  color:#e9edf1!important;
  font:12px Inter,Arial,sans-serif!important;
  text-transform:none!important;
}

body:has(#app) :is(
  .login-card,
  .form,
  .artist-signup-page,
  .supporter-form,
  .contact-form,
  .curator-login-card,
  .checkout-payment,
  .portal-form-grid,
  .portal-upload-section
) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):focus{
  border-color:#efad31!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(239,173,49,.14)!important;
}

body:has(#app) :is(.form-grid,.contact-form,.supporter-form-grid,.portal-form-grid){
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}

body:has(#app) :is(.form-grid,.contact-form,.supporter-form-grid,.portal-form-grid) .wide,
body:has(#app) .contact-form label.wide{
  grid-column:1/-1!important;
}

body:has(#app) .login-choice{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin:16px 0!important;
}

body:has(#app) .login-choice button{
  min-height:42px!important;
  border:1px solid #35536a!important;
  border-radius:7px!important;
  background:#07111b!important;
  color:#c9d2dc!important;
  font:700 11px/1 "Trebuchet MS",Arial,sans-serif!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
}

body:has(#app) .login-choice button.active,
body:has(#app) .login-choice button.selected,
body:has(#app) .login-choice button[aria-pressed="true"]{
  border-color:#efad31!important;
  background:linear-gradient(100deg,#efad31,#d77a21)!important;
  color:#18120c!important;
}

body:has(#app) .login-submit-row,
body:has(#app) .artist-signup-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:18px!important;
}

body:has(#app) :is(.login-card,.form,.artist-signup-page,.supporter-form,.contact-form,.curator-login-card) .btn{
  min-height:46px!important;
  padding:0 22px!important;
  border-radius:7px!important;
}

body:has(#app) .login-remember,
body:has(#app) .checks label,
body:has(#app) .terms-check,
body:has(#app) .checkout-consent{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:14px 0!important;
  color:#d8dfe5!important;
  font-size:12px!important;
  text-transform:none!important;
  letter-spacing:0!important;
  font-weight:500!important;
}

body:has(#app) :is(.login-remember,.checks,.terms-check,.checkout-consent) input[type=checkbox]{
  width:17px!important;
  height:17px!important;
  min-height:17px!important;
  accent-color:#efad31!important;
}

@media(max-width:720px){
  body:has(#app) :is(.form-grid,.contact-form,.supporter-form-grid,.portal-form-grid){
    grid-template-columns:1fr!important;
  }
}

/* Follow and Following are icon controls on every route and in overlays. */
body:has(#app) button[data-follow],
body:has(#app) button[data-follow]:is(:hover,:focus-visible,.following),
body:has(#app) button.tpm-follow-btn,
body:has(#app) button.tpm-follow-btn:is(:hover,:focus-visible,.following){
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
/* Keep the scaled 3SA radio capture within a Full HD viewport. */
html body:has(#app .caster-radio-panel) main#app>div.wrap{
  padding-top:10px!important;
  padding-bottom:0!important;
  min-height:0!important;
}
html body:has(#app .caster-radio-panel) main#app{padding-top:0!important}