/*
 * RADIO HASERA WEB SURFACE
 * All forthcoming desktop furnishing belongs here and must remain inside
 * the min-width boundary. Do not place phone fixes in this file.
 */
@media (min-width: 700px) {
  /* WEB NON STOP: hide the INDEX gallery underneath the open player. */
  body.service-radio-hasera.is-emitter-player-open .www-index-cover-rail,
  body.service-radiohasera.is-emitter-player-open .www-index-cover-rail {
    display: none !important;
  }

  body.service-radio-hasera.is-www-index-shell .www-index-stage,
  body.service-radiohasera.is-www-index-shell .www-index-stage {
    isolation: auto;
  }

  body.service-radio-hasera,
  body.service-radiohasera {
    --radio-surface-contract: web-v1;
    --radio-web-genres-top: calc(87px + 10mm);
  }

  .radio-phone-only {
    display: none !important;
  }

  .radio-web-only {
    display: revert;
  }

  /* WEB INDEX emitter: 42% horizontal axis and 5 mm vertical margins. */
  body.service-radio-hasera.is-www-index-shell .www-index-emitter,
  body.service-radio-hasera.is-www-index-shell .www-index-emitter.is-emitter-module-active,
  body.service-radiohasera.is-www-index-shell .www-index-emitter,
  body.service-radiohasera.is-www-index-shell .www-index-emitter.is-emitter-module-active {
    left: calc(42% + 16.5mm);
    top: 50%;
    width: calc((100svh - 10mm) * 1.701223) !important;
    max-width: none;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  /*
   * WEB INDEX emitter: keep the exterior rings at their original opacity.
   * The complete yellow/orange core is 35 percentage points more transparent.
   * This is 20 percentage points more transparency than the previous setting.
   * This is a layer split, not brightness or color processing.
   */
  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-art,
  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-still,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-art,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-still {
    position: absolute;
    inset: 0;
  }

  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-art-outer,
  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-still-outer,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-art-outer,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-still-outer {
    -webkit-mask-image: radial-gradient(circle at 63.5% 52%, transparent 0 44%, #000 44.5%);
    mask-image: radial-gradient(circle at 63.5% 52%, transparent 0 44%, #000 44.5%);
  }

  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-art-center,
  body.service-radio-hasera.is-www-index-shell .www-index-emitter .emitter-module-still-center,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-art-center,
  body.service-radiohasera.is-www-index-shell .www-index-emitter .emitter-module-still-center {
    opacity: calc(var(--emitter-audio-opacity, 1) - .35);
    -webkit-mask-image: radial-gradient(circle at 63.5% 52%, #000 0 44%, transparent 44.5%);
    mask-image: radial-gradient(circle at 63.5% 52%, #000 0 44%, transparent 44.5%);
  }

  body.service-radio-hasera.is-www-index-shell .topbar,
  body.service-radiohasera.is-www-index-shell .topbar {
    z-index: 100;
  }

  body.service-radio-hasera.is-www-index-shell .public-menu,
  body.service-radio-hasera.is-www-index-shell .public-submenu,
  body.service-radiohasera.is-www-index-shell .public-menu,
  body.service-radiohasera.is-www-index-shell .public-submenu {
    z-index: 110;
  }


  /*
   * WEB only: the first menu level takes the opposite colour of the pixels
   * directly underneath it. This remains readable over every changing cover
   * background without placing an artificial panel behind the navigation.
   * Submenus keep their own fixed palette because they already have a dark
   * surface.
   */
  body.service-radio-hasera.is-public-shell .public-menu > a,
  body.service-radio-hasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link,
  body.service-radio-hasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link,
  body.service-radiohasera.is-public-shell .public-menu > a,
  body.service-radiohasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link,
  body.service-radiohasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link {
    color: rgba(164, 164, 164, .94) !important;
    mix-blend-mode: difference;
    filter: contrast(1.08);
  }

  body.service-radio-hasera.is-public-shell .public-menu > a:hover,
  body.service-radio-hasera.is-public-shell .public-menu > a:focus-visible,
  body.service-radio-hasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link:hover,
  body.service-radio-hasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link:focus-visible,
  body.service-radio-hasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link:hover,
  body.service-radio-hasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link:focus-visible,
  body.service-radiohasera.is-public-shell .public-menu > a:hover,
  body.service-radiohasera.is-public-shell .public-menu > a:focus-visible,
  body.service-radiohasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link:hover,
  body.service-radiohasera.is-public-shell .public-menu > .public-menu-item > .public-menu-link:focus-visible,
  body.service-radiohasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link:hover,
  body.service-radiohasera.is-public-shell .public-menu > .radio-web-top-logout > .public-menu-link:focus-visible {
    color: rgba(255, 255, 255, .98) !important;
    filter: contrast(1.28);
  }
  body.service-radio-hasera .radio-web-top-logout,
  body.service-radio-hasera .radio-web-submenu-logout,
  body.service-radiohasera .radio-web-top-logout,
  body.service-radiohasera .radio-web-submenu-logout {
    margin: 0;
  }

  body.service-radio-hasera .radio-web-top-logout,
  body.service-radiohasera .radio-web-top-logout {
    display: inline-flex;
    align-items: center;
  }

  body.service-radio-hasera .radio-web-submenu-logout button,
  body.service-radiohasera .radio-web-submenu-logout button {
    display: block;
    width: 100%;
    border: 0;
    padding: 8px 18px;
    background: transparent;
    color: rgba(164, 164, 164, .9);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
    text-transform: uppercase;
    cursor: pointer;
  }

  body.service-radio-hasera .radio-web-submenu-logout button:hover,
  body.service-radio-hasera .radio-web-submenu-logout button:focus-visible,
  body.service-radiohasera .radio-web-submenu-logout button:hover,
  body.service-radiohasera .radio-web-submenu-logout button:focus-visible {
    color: var(--gold);
  }

  @media (min-width: 901px) {
    /*
     * WEB header: the Radio HaSera identity is 23.6% larger (170 -> 210.12 px).
     * Its center remains on the same 96 px axis as the menu text. The menu
     * starts 34 px farther right, preserving the original brand/menu gap.
     */
    body.service-radio-hasera.is-public-shell .brand,
    body.service-radiohasera.is-public-shell .brand {
      width: 210.12px;
      top: calc(96px - 1px + .5mm);
      transform: translateY(-50%);
    }

    body.service-radio-hasera.is-www-index-shell .public-menu,
    body.service-radiohasera.is-www-index-shell .public-menu {
      left: calc(30.5vw + 34px);
    }
  }

  body.service-radio-hasera.is-www-index-shell .www-index-cover-rail,
  body.service-radiohasera.is-www-index-shell .www-index-cover-rail {
    z-index: 35;
  }

  /*
   * Radio HaSera WEB owns a separate ROCK/POP/RAP control. It shares only
   * the catalogue filtering engine with PHONE. Its DOM and CSS never cross
   * the 700 px surface boundary.
   */
  body.service-radio-hasera.is-www-index-shell .radio-web-genres,
  body.service-radiohasera.is-www-index-shell .radio-web-genres {
    position: fixed;
    z-index: 31;
    left: 50%;
    top: var(--radio-web-genres-top);
    width: min(430px, 72vw);
    height: clamp(64px, 5vw, 78px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 3.2vw, 46px);
    padding: 0;
    transform: translateX(-50%);
    background: transparent;
    user-select: none;
  }

  body.service-radio-hasera.is-www-index-shell .radio-web-genres button,
  body.service-radiohasera.is-www-index-shell .radio-web-genres button {
    position: relative;
    flex: 0 0 clamp(64px, 5vw, 78px);
    width: clamp(64px, 5vw, 78px);
    height: clamp(64px, 5vw, 78px);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  body.service-radio-hasera.is-www-index-shell .radio-web-genres img,
  body.service-radiohasera.is-www-index-shell .radio-web-genres img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    grid-area: 1 / 1;
    transition: filter 140ms ease, transform 140ms ease;
  }

  body.service-radio-hasera.is-www-index-shell .radio-web-genres .radio-genre-base,
  body.service-radiohasera.is-www-index-shell .radio-web-genres .radio-genre-base {
    opacity: .55;
    mix-blend-mode: difference;
    filter: grayscale(1) contrast(1.15);
  }

  /* INDEX only: solid icons that still react chromatically to the current background. */
  body.service-radio-hasera.is-www-index-shell:not(.is-emitter-player-open) .radio-web-genres,
  body.service-radiohasera.is-www-index-shell:not(.is-emitter-player-open) .radio-web-genres {
    mix-blend-mode: luminosity;
  }

  body.service-radio-hasera.is-www-index-shell:not(.is-emitter-player-open) .radio-web-genres .radio-genre-base,
  body.service-radiohasera.is-www-index-shell:not(.is-emitter-player-open) .radio-web-genres .radio-genre-base {
    opacity: 1;
    mix-blend-mode: normal;
    filter: grayscale(1) contrast(1.08) brightness(.92);
  }

  body.service-radio-hasera.is-www-index-shell:not(.is-emitter-player-open) .radio-web-genres .radio-genre-label,
  body.service-radiohasera.is-www-index-shell:not(.is-emitter-player-open) .radio-web-genres .radio-genre-label {
    opacity: 1;
    mix-blend-mode: normal;
    filter: grayscale(1) contrast(1.08) brightness(.92);
  }

  body.service-radio-hasera.is-www-index-shell .radio-web-genres .radio-genre-label,
  body.service-radiohasera.is-www-index-shell .radio-web-genres .radio-genre-label {
    opacity: 1;
    pointer-events: none;
  }

  body.service-radio-hasera.is-www-index-shell .radio-web-genres button:hover,
  body.service-radiohasera.is-www-index-shell .radio-web-genres button:hover {
    transform: scale(1.06);
  }

  body.service-radio-hasera.is-www-index-shell .radio-web-genres button.is-active,
  body.service-radiohasera.is-www-index-shell .radio-web-genres button.is-active {
    filter: brightness(1.18);
  }

  /* Keep the same three controls available above the WEB NON STOP scene. */
  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .radio-web-genres,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .radio-web-genres {
    z-index: 31;
  }

  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-hstw,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-hstw {
    --hstw-cover-size: clamp(170px, min(20vw, 34vh), 235px);
    --hstw-wave-width: min(390px, 58vw);
    --hstw-wave-height: clamp(76px, min(9vw, 14vh), 100px);
    padding-top: clamp(150px, 20vh, 185px);
    padding-bottom: clamp(108px, 15vh, 145px);
  }

  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-hstw .hstw-shell,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-hstw .hstw-shell {
    position: absolute;
    left: 50%;
    top: calc(50% + 6mm);
    width: max-content;
    margin: 0;
    transform: translate(-50%, -50%) scale(.93555);
    transform-origin: center center;
  }

  /*
   * WEB NON STOP history: fit every visible cover into one centred row.
   * The JS supplies --emitter-rail-count (1–10), so a short history remains
   * compact while a complete ten-track history uses the available width
   * without horizontal scrolling or cropped edge covers.
   */
  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-player-rail,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-player-rail {
    --radio-web-rail-gap: clamp(6px, .65vw, 12px);
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 4mm;
    width: min(
      calc(100vw - 20mm),
      calc(
        var(--emitter-rail-count, 10) * 120px
        + (var(--emitter-rail-count, 10) - 1) * var(--radio-web-rail-gap)
      )
    );
    height: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--emitter-rail-count, 10), minmax(0, 1fr));
    align-items: stretch;
    gap: var(--radio-web-rail-gap);
    overflow: hidden;
    transform: translateX(-50%);
  }

  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-player-rail button,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-player-rail button {
    box-sizing: border-box;
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 120px;
    height: auto;
    justify-self: center;
    padding: 0;
    border: 0 solid transparent !important;
    background: transparent;
    box-shadow: none !important;
  }

  body.service-radio-hasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-player-rail button.is-current,
  body.service-radiohasera.is-www-index-shell.is-emitter-player-open .emitter-player-layer .emitter-player-rail button.is-current {
    border: 4px solid #e2be58 !important;
    box-shadow: none !important;
  }

}

@media (min-width: 700px) and (max-height: 800px) {
  body.service-radio-hasera,
  body.service-radiohasera {
    --radio-web-genres-top: calc(48px + 10mm);
  }

  body.service-radio-hasera.is-public-shell .brand,
  body.service-radiohasera.is-public-shell .brand {
    top: calc(57px - 1px + .5mm);
  }
}

@media (min-width: 700px) and (max-height: 650px) {
  body.service-radio-hasera,
  body.service-radiohasera {
    --radio-web-genres-top: calc(41px + 10mm);
  }

  body.service-radio-hasera.is-public-shell .brand,
  body.service-radiohasera.is-public-shell .brand {
    top: calc(50px - 1px + .5mm);
  }
}

/*
 * Desktop boundary: phone-only layers are never allowed to participate
 * in the Radio HaSera WEB layout.
 */
.radio-mobile-menu-scrim,
.radio-mobile-account-drawer,
.radio-mobile-premiere-stage,
.radio-legal-gateway-panel,
.radio-mobile-genres,
.radio-mobile-menu-navigation,
.radio-return-background-curtain {
  display: none !important;
}

/* WEB genre controls belong exclusively to the Radio HaSera INDEX scene. */
.radio-web-genres {
  display: none;
}