/* Y.K. Music — Мобільне оформлення v0.1.8
 * Presentation ONLY. The Core, its radio state, YouTube iframe, favorites,
 * navigation and Core CSS/JS remain intact.
 */

.ykm-mp-single-line,
.ykm-mp-control-icon,
.ykm-mp-added-open,
.ykm-mp-added-play {
  display: none;
}

/* Server-rendered SEO text stays in the HTML. The Core introduction is
 * preserved and shown whenever that screen size's option is disabled. */
.ykm-mp-intro-brief,
.ykm-mp-intro-more {
  display: none !important;
}

/* Remove only the three decorative shortcut pills from the top introductions
 * on BOTH screen sizes. This intentionally does not touch real navigation,
 * song cards, or the contextual links inside expanded SEO descriptions. */
html body .ykm-home-intro > .ykm-intro-pills.ykm-intro-actions,
html body .ykm-artists-intro > .ykm-intro-pills {
  display: none !important;
}

/* Song already playing in the SAME persistent dock: on desktop as on mobile,
 * discard the now-empty player section and its duplicate favorite-only strip.
 * Core's available page video/play button remains visible until the dock
 * actually owns that song. This has no effect on radio or on other songs. */
html.ykm-mp-song-dock-open .ykm-song-page .ykm-player-actions-minimal.ykm-mp-hide-duplicate-favorite,
html.ykm-mp-song-dock-open .ykm-song-page .ykm-player-section.ykm-mp-hide-empty-player-section {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Desktop song dock: preserve the approved width/height of v0.1.7, but
 * RESTORE the original bottom-right starting position. JavaScript may apply
 * inline coordinates after a user drags the title bar. Do not move the song
 * content column, separate radio dock or approved mobile player. */
@media (min-width: 1024px) and (min-height: 620px) {
  html body #ykm-persistent-player:not([hidden]) {
    box-sizing: border-box !important;
    position: fixed !important;
    left: auto !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: 12px !important;
    transform: none !important;
    margin: 0 !important;
    /* 480px -> 720px (+50%) on the owner's 1920px-wide monitor;
       stay narrower at intermediate desktop widths to avoid covering cards. */
    width: clamp(480px, calc(100vw - 1150px), 720px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 120px) !important;
  }
  html body #ykm-persistent-player:not([hidden]) .ykm-persistent-video {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 292px !important;
    min-height: 292px !important;
    max-height: 292px !important;
  }
  html body #ykm-persistent-player:not([hidden]) .ykm-persistent-video iframe {
    width: 100% !important;
    height: 100% !important;
  }
  html body #ykm-persistent-player:not([hidden]) .ykm-persistent-player-head {
    cursor: grab !important;
    user-select: none !important;
    touch-action: none !important;
  }
  html body #ykm-persistent-player:not([hidden]).ykm-mp-dragging .ykm-persistent-player-head {
    cursor: grabbing !important;
  }
  html body #ykm-persistent-player:not([hidden]) .ykm-persistent-player-head button,
  html body #ykm-persistent-player:not([hidden]) .ykm-persistent-player-head a {
    cursor: pointer !important;
  }
}

/* Compact Player adds 410px of blank padding under every playing page.
 * On wide monitors, the song dock is fixed entirely in the separate right
 * column, so that artificial spacer is not needed at the page's end.
 * Narrower desktops retain Core's safety clearance for longer content. */
@media (min-width: 1600px) and (min-height: 720px) {
  html body.ykm-player-active:has(#ykm-persistent-player:not([hidden])) {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 820px) {
  html.ykm-mp-ready {
    --ykm-mp-gold: var(--ykm-gold, #d6b972);
    --ykm-mp-text: var(--ykm-text, #f7f4eb);
    --ykm-mp-border: rgba(215, 185, 118, .25);
  }

  /* Six real page introductions: readable H1, one brief line and one small
     native disclosure. Other site sections are not resized. */
  html.ykm-mp-ready [data-ykm-mp-intro-ready] {
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 16px 15px !important;
    margin-top: 0 !important;
    margin-bottom: 13px !important;
  }
  html.ykm-mp-ready [data-ykm-mp-intro-ready] > .ykm-eyebrow {
    display: block !important;
    margin: 0 0 5px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: .1em !important;
  }
  html.ykm-mp-ready [data-ykm-mp-intro-ready] > h1 {
    margin: 0 0 7px !important;
    padding: 0 !important;
    font-size: clamp(22px, 6vw, 27px) !important;
    line-height: 1.19 !important;
    letter-spacing: -.018em !important;
  }
  html.ykm-mp-ready [data-ykm-mp-intro-ready] > [data-ykm-mp-intro-original] {
    display: none !important;
  }
  html.ykm-mp-ready [data-ykm-mp-intro-ready] > .ykm-mp-intro-brief {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
    font-weight: 400 !important;
    color: var(--ykm-muted, inherit) !important;
  }
  html.ykm-mp-ready [data-ykm-mp-intro-ready] > .ykm-mp-intro-more {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html.ykm-mp-ready .ykm-mp-intro-more > summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    list-style: none !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-height: 32px !important;
    padding: 6px 11px !important;
    margin: 0 !important;
    border: 1px solid rgba(215, 185, 118, .34) !important;
    border-radius: 999px !important;
    background: rgba(215, 185, 118, .065) !important;
    color: var(--ykm-mp-gold) !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: .015em !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background .2s ease, border-color .2s ease !important;
  }
  html.ykm-mp-ready .ykm-mp-intro-more > summary::-webkit-details-marker {
    display: none;
  }
  html.ykm-mp-ready .ykm-mp-intro-more > summary:hover {
    background: rgba(215, 185, 118, .13) !important;
    border-color: rgba(215, 185, 118, .55) !important;
  }
  html.ykm-mp-ready .ykm-mp-intro-more > summary:focus-visible {
    outline: 2px solid var(--ykm-mp-gold) !important;
    outline-offset: 3px !important;
  }
  html.ykm-mp-ready .ykm-mp-more-chevron {
    display: inline-block !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 10px !important;
    transform: translateY(-2px) rotate(0deg);
    transition: transform .2s ease;
  }
  html.ykm-mp-ready .ykm-mp-intro-more[open] .ykm-mp-more-chevron {
    transform: translateY(2px) rotate(180deg);
  }
  html.ykm-mp-ready .ykm-mp-more-close-label,
  html.ykm-mp-ready .ykm-mp-intro-more[open] .ykm-mp-more-open-label {
    display: none !important;
  }
  html.ykm-mp-ready .ykm-mp-intro-more[open] .ykm-mp-more-close-label {
    display: inline !important;
  }
  html.ykm-mp-ready .ykm-mp-intro-expanded {
    margin: 11px 0 0 !important;
    padding: 10px 5px 2px 13px !important;
    border-left: 2px solid rgba(215, 185, 118, .48) !important;
    background: transparent !important;
    animation: ykm-mp-intro-fade .18s ease-out both;
  }
  html.ykm-mp-ready .ykm-mp-intro-expanded > p {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.62 !important;
    font-weight: 400 !important;
    color: var(--ykm-muted, inherit) !important;
  }
  html.ykm-mp-ready [data-ykm-mp-intro-ready] .ykm-mp-intro-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px 16px !important;
    margin: 1px 0 12px !important;
  }
  html.ykm-mp-ready [data-ykm-mp-intro-ready] .ykm-mp-intro-links a {
    color: var(--ykm-mp-gold) !important;
    font-size: 12px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
  html.ykm-mp-ready .ykm-chart-hero[data-ykm-mp-intro-ready] > .ykm-chart-updated {
    margin: 7px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  @keyframes ykm-mp-intro-fade {
    from { opacity: .35; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* 1. Home: trim the featured card without changing its content or art. */
  html.ykm-mp-ready .ykm-home-releases .ykm-featured-release {
    overflow: hidden !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-featured-art {
    display: block !important;
    height: clamp(185px, 53vw, 216px) !important;
    min-height: 0 !important;
    max-height: 216px !important;
    overflow: hidden !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-featured-art img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-featured-copy {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
    min-height: 0 !important;
    padding: 16px 17px 17px !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-featured-labels {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    padding-right: 46px !important;
    margin: 0 !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-featured-copy h3 {
    margin: 2px 0 0 !important;
    font-size: clamp(23px, 6.4vw, 29px) !important;
    line-height: 1.18 !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-featured-copy p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-featured-actions {
    display: flex !important;
    position: static !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 9px 0 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-featured-actions > .ykm-btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: min(198px, 75%) !important;
    min-height: 42px !important;
    padding: 9px 18px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-featured-favorite {
    position: absolute !important;
    z-index: 2 !important;
    top: 13px !important;
    right: 16px !important;
    left: auto !important;
    bottom: auto !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  /* Match the fourth project card: YouTube launch link on all four. */
  html.ykm-mp-ready .ykm-home-releases .ykm-core-release-grid .ykm-song-thumb {
    position: relative !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-core-release-grid .ykm-song-play,
  html.ykm-mp-ready .ykm-home-releases .ykm-core-release-grid .ykm-mp-added-play {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    z-index: 2 !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-core-release-grid .ykm-song-page-arrow {
    display: none !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-core-release-grid .ykm-song-card-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
  }
  html.ykm-mp-ready .ykm-home-releases .ykm-core-release-grid .ykm-mp-added-open {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* 2. Radio console: no large artwork, just the music and controls. */
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-console {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-art {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-now {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 13px 17px 15px !important;
    min-width: 0 !important;
  }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-now > .ykm-eyebrow {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-now > [data-radio-title],
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-now > [data-radio-artist],
  html.ykm-mp-ready #ykm-radio-dock [data-radio-dock-title],
  html.ykm-mp-ready #ykm-radio-dock [data-radio-dock-artist],
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-title,
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-artist {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
  }
  html.ykm-mp-ready .ykm-mp-single-line {
    display: block;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    color: var(--ykm-mp-text);
    font-weight: 700;
    line-height: 1.35;
  }
  html.ykm-mp-ready .ykm-mp-single-line-text {
    display: inline-block;
    max-width: none;
    white-space: nowrap;
    will-change: auto;
  }
  html.ykm-mp-ready .ykm-mp-radio-now-line {
    font-size: clamp(15px, 4.3vw, 19px);
    margin: 0 0 10px;
  }
  html.ykm-mp-ready .ykm-mp-radio-dock-line,
  html.ykm-mp-ready .ykm-mp-song-dock-line {
    font-size: 14px;
    margin-top: 3px;
  }
  html.ykm-mp-ready .ykm-mp-single-line.ykm-mp-overflow .ykm-mp-single-line-text {
    animation: ykm-mp-ticker 12s ease-in-out 1.2s infinite alternate;
  }
  @keyframes ykm-mp-ticker {
    0%, 16% { transform: translateX(0); }
    84%, 100% { transform: translateX(var(--ykm-mp-distance, 0px)); }
  }

  /* Three smaller, evenly distributed radio controls. */
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-controls > button {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    position: relative !important;
    width: 57px !important;
    min-width: 0 !important;
    height: 45px !important;
    min-height: 45px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    font-size: 0 !important; /* Hide Core's ▶ and ⏮ glyphs, not their handlers. */
    line-height: 0 !important;
  }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-controls > button:first-child { justify-self: start !important; }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-controls > button:last-child { justify-self: end !important; }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-controls > .ykm-radio-main {
    justify-self: center !important;
    width: 87px !important;
    max-width: 87px !important;
  }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-main > span { display: none !important; }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 12px 0 0 !important;
    font-size: 12px !important;
  }
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-links a { font-size: 12px !important; }

  /* Touch clicks must not leave white keyboard-focus rectangles behind.
     Keyboard :focus-visible remains available once a key is pressed. */
  html.ykm-mp-ready header.wp-block-template-part .ykm-brand,
  html.ykm-mp-ready .ykm-radio-page .ykm-radio-controls > button {
    -webkit-tap-highlight-color: transparent !important;
  }
  html.ykm-mp-ready.ykm-mp-pointer-focus header.wp-block-template-part .ykm-brand:focus,
  html.ykm-mp-ready.ykm-mp-pointer-focus header.wp-block-template-part .ykm-brand:focus-visible,
  html.ykm-mp-ready.ykm-mp-pointer-focus .ykm-radio-page .ykm-radio-controls > button:focus,
  html.ykm-mp-ready.ykm-mp-pointer-focus .ykm-radio-page .ykm-radio-controls > button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  html.ykm-mp-ready.ykm-mp-pointer-focus .ykm-radio-page .ykm-radio-controls > button:not(.ykm-radio-main):focus {
    border-width: 1px !important;
    border-color: var(--ykm-mp-border) !important;
  }

  /* 3. Both floating docks: genuinely centered, same YouTube viewport size. */
  html.ykm-mp-ready #ykm-radio-dock,
  html.ykm-mp-ready #ykm-persistent-player {
    box-sizing: border-box !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow: hidden !important;
  }
  html.ykm-mp-ready #ykm-radio-dock .ykm-radio-video,
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-video {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 203px !important;
    min-height: 200px !important;
    max-height: none !important;
    margin: 0 !important;
  }
  html.ykm-mp-ready #ykm-radio-dock .ykm-radio-video iframe,
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-video iframe {
    width: 100% !important;
    height: 100% !important;
  }
  html.ykm-mp-ready #ykm-radio-dock .ykm-radio-dock-head,
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-player-head {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    position: relative !important;
    min-height: 0 !important;
    padding: 7px 11px !important;
    margin: 0 !important;
  }
  html.ykm-mp-ready #ykm-radio-dock .ykm-radio-dock-head > div,
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-player-copy {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html.ykm-mp-ready #ykm-radio-dock .ykm-persistent-kicker,
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-kicker {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    letter-spacing: .065em !important;
  }
  html.ykm-mp-ready #ykm-radio-dock [data-radio-stop],
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-close {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* Radio dock: hide only OUR redundant YouTube text link. Keep iframe logo. */
  html.ykm-mp-ready #ykm-radio-dock .ykm-radio-dock-actions {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 11px 7px !important;
  }
  html.ykm-mp-ready #ykm-radio-dock .ykm-radio-dock-actions > button {
    display: inline-flex !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    width: 62px !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 13px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  html.ykm-mp-ready #ykm-radio-dock [data-radio-dock-prev] { justify-self: start !important; }
  html.ykm-mp-ready #ykm-radio-dock [data-radio-dock-toggle] {
    justify-self: center !important;
    width: 77px !important;
    color: #201c15 !important;
    background: linear-gradient(135deg, #f4dc9c, #d3ae62) !important;
    border: 1px solid rgba(190, 145, 63, .65) !important;
  }
  html.ykm-mp-ready #ykm-radio-dock [data-radio-dock-next] { justify-self: end !important; }
  html.ykm-mp-ready #ykm-radio-dock [data-radio-dock-youtube] { display: none !important; }

  /* Song dock: heart in the header, not in a tall extra footer. */
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-player-head {
    padding-right: 85px !important;
  }
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-close {
    position: absolute !important;
    top: 9px !important;
    right: 10px !important;
  }
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-actions {
    display: block !important;
    box-sizing: border-box !important;
    position: static !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-favorite {
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    position: absolute !important;
    z-index: 3 !important;
    top: 9px !important;
    right: 48px !important;
    bottom: auto !important;
    left: auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  html.ykm-mp-ready #ykm-persistent-player .ykm-persistent-youtube { display: none !important; }

  html.ykm-mp-ready .ykm-radio-controls .ykm-mp-control-icon,
  html.ykm-mp-ready #ykm-radio-dock .ykm-mp-control-icon {
    display: block !important;
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    color: currentColor !important;
    pointer-events: none !important;
  }
  html.ykm-mp-ready .ykm-radio-controls .ykm-radio-main .ykm-mp-control-icon { width: 23px !important; height: 23px !important; }
  html.ykm-mp-ready body.ykm-player-active { padding-bottom: 315px !important; }
}

/* Preserve the 200px minimum video width on exceptionally narrow screens. */
@media (min-width: 200px) and (max-width: 225px) {
  html.ykm-mp-ready #ykm-radio-dock,
  html.ykm-mp-ready #ykm-persistent-player {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  html.ykm-mp-ready .ykm-mp-single-line .ykm-mp-single-line-text { animation: none !important; }
  html.ykm-mp-ready .ykm-mp-intro-expanded { animation: none !important; }
  html.ykm-mp-ready .ykm-mp-more-chevron { transition: none !important; }
}

/* Desktop SEO introductions are an independent opt-in; every other desktop
 * component keeps the theme/Core layout. Native <details> needs no JS. */
@media (min-width: 821px) {
  .ykm-section-intro[data-ykm-mp-intro-desktop] {
    box-sizing: border-box !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 25px 19px !important;
    margin-bottom: 20px !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] > .ykm-eyebrow {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] > h1 {
    margin: 0 0 7px !important;
    padding: 0 !important;
    font-size: clamp(27px, 2.65vw, 35px) !important;
    line-height: 1.17 !important;
    letter-spacing: -.017em !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] > [data-ykm-mp-intro-original] {
    display: none !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] > .ykm-mp-intro-brief {
    display: block !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--ykm-muted, inherit) !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] > .ykm-mp-intro-more {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 9px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-more > summary {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 7px 13px !important;
    border: 1px solid rgba(215, 185, 118, .4) !important;
    border-radius: 999px !important;
    background: rgba(215, 185, 118, .065) !important;
    color: var(--ykm-gold, #d6b972) !important;
    font: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    list-style: none !important;
    cursor: pointer !important;
    transition: background .2s ease, border-color .2s ease !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-more > summary::-webkit-details-marker {
    display: none;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-more > summary:hover {
    background: rgba(215, 185, 118, .13) !important;
    border-color: rgba(215, 185, 118, .6) !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-more > summary:focus-visible {
    outline: 2px solid var(--ykm-gold, #d6b972) !important;
    outline-offset: 3px !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-more-chevron {
    display: inline-block !important;
    font-size: 19px !important;
    line-height: 10px !important;
    transform: translateY(-2px);
    transition: transform .2s ease;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-more[open] .ykm-mp-more-chevron {
    transform: translateY(2px) rotate(180deg);
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-more-close-label,
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-more[open] .ykm-mp-more-open-label {
    display: none !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-more[open] .ykm-mp-more-close-label {
    display: inline !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-expanded {
    box-sizing: border-box !important;
    max-width: 900px !important;
    margin: 13px 0 0 !important;
    padding: 7px 0 1px 18px !important;
    border-left: 2px solid rgba(215, 185, 118, .48) !important;
    background: transparent !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-expanded > p {
    margin: 0 0 11px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.64 !important;
    color: var(--ykm-muted, inherit) !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 20px !important;
    margin: 3px 0 11px !important;
  }
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-intro-links a {
    color: var(--ykm-gold, #d6b972) !important;
    font-size: 13px !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
  .ykm-chart-hero[data-ykm-mp-intro-desktop] > .ykm-chart-updated {
    margin: 8px 0 0 !important;
    font-size: 12px !important;
  }
}

@media (min-width: 821px) and (prefers-reduced-motion: reduce) {
  .ykm-section-intro[data-ykm-mp-intro-desktop] .ykm-mp-more-chevron { transition: none !important; }
}