/* The approved demo paper surface keeps Mixcloud laid out beneath opaque controls. */
.s13-listening-transport { grid-area: widget; position: relative; min-width: 0; height: var(--s13-widget-height); }
.s13-listening-credit { display: none; }
.s13-listening-dock[data-custom-transport="true"] {
 --s13-surface: #e6e4dc;
 --s13-ink: #181918;
 --s13-secondary: #545650;
 --s13-muted: #545650;
 --s13-field-line: #7f8078;
 --s13-media-border: #7f8078;
 --s13-support: #181918;
 --s13-accent: #181918;
 --s13-widget-height: 90px;
 --s13-dock-height: calc(90px + env(safe-area-inset-bottom,0px));
 grid-template-columns: 310px minmax(190px,1fr) repeat(3,44px);
 grid-template-rows: minmax(90px,max-content);
 grid-template-areas: "identity widget volume next stop";
 gap: 0;
 min-height: var(--s13-dock-height);
 padding: 0 0 env(safe-area-inset-bottom,0px);
 border: 0;
 color-scheme: light;
 line-height: 1.2;
}
.s13-listening-dock[data-custom-transport="true"] .s13-listening-identity {
 display: grid;
 grid-template-columns: 160px minmax(0,1fr);
 align-items: stretch;
 gap: 0;
 width: 100%;
 max-width: none;
 min-height: 90px;
 height: auto;
}
.s13-listening-dock[data-custom-transport="true"] .s13-listening-art {
 display: block;
 width: 160px;
 height: 90px;
 aspect-ratio: 16 / 9;
 object-fit: cover;
 object-position: 50% 50%;
 border: 0;
}
.s13-listening-dock[data-custom-transport="true"] .s13-listening-art[hidden] { display: none; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-copy {
 grid-column: 2;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 3px;
 min-width: 0;
 padding: 8px 16px 28px;
}
.s13-listening-dock[data-custom-transport="true"] :is(.s13-listening-title,.s13-listening-issue) { flex-shrink: 0; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-identity:has(.s13-listening-art[hidden]) { grid-template-columns: minmax(0,1fr); }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-identity:has(.s13-listening-art[hidden]) .s13-listening-copy { grid-column: 1; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-issue {
 color: var(--s13-secondary);
 font-size: 10px;
 font-weight: 550;
 letter-spacing: .13em;
 white-space: nowrap;
}
.s13-listening-dock[data-custom-transport="true"] .s13-listening-title {
 font-size: 16px;
 font-weight: 720;
 line-height: 1.1;
 letter-spacing: -.015em;
}
.s13-listening-dock[data-custom-transport="true"] .s13-listening-credit {
 grid-area: identity;
 z-index: 3;
 align-self: end;
 justify-self: start;
 display: flex;
 align-items: center;
 gap: 6px;
 min-height: 24px;
 margin: 0 0 11px 176px;
 color: var(--s13-secondary);
 font-size: 10px;
 white-space: nowrap;
 text-decoration: none;
}
.s13-listening-dock[data-custom-transport="true"] .s13-listening-mixcloud-logo { display: block; flex: none; width: 68px; height: 8px; background: currentColor; -webkit-mask: url("icons/mixcloud-logo-2020.svg") center / contain no-repeat; mask: url("icons/mixcloud-logo-2020.svg") center / contain no-repeat; }
.s13-listening-dock[data-custom-transport="true"]:has(.s13-listening-art[hidden]) .s13-listening-credit { margin-left: 16px; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-credit:is(:hover,:focus-visible) { color: var(--s13-ink); }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-credit:focus-visible { outline: 1px solid var(--s13-ink); outline-offset: 3px; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-transport .s13-listening-widget { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-transport { height: auto; min-height: var(--s13-widget-height); align-self: stretch; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-widget iframe { height: 100%; opacity: 1; visibility: visible; pointer-events: none; transition: none; }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-controls {
 position: absolute;
 inset: 0;
 z-index: 2;
 display: grid;
 grid-template-columns: 52px minmax(0,1fr);
 align-items: center;
 gap: 16px;
 padding: 16px 20px 16px 4px;
 background: var(--s13-surface);
 color: var(--s13-ink);
 font-size: 11px;
 font-variant-numeric: tabular-nums;
}
.s13-listening-dock[data-custom-transport="true"] .s13-custom-toggle {
 display: grid;
 place-items: center;
 width: 48px;
 height: 48px;
 padding: 0;
 border: 0;
 border-radius: 0;
 background: transparent;
 color: var(--s13-ink);
 cursor: pointer;
}
/* Exact hero plate and transport paths, scaled to the existing 48/44px target.
   Crop only the SVG's empty inset; keep the button's focus outline intact. */
.s13-listening-dock[data-custom-transport="true"] .s13-custom-button-art { display: block; width: 100%; height: 100%; fill: currentColor; }
.s13-listening-dock[data-custom-transport="true"] :is(.s13-custom-play,.s13-custom-pause) { fill: var(--s13-surface); transform: translate(20px,20px) scale(.5); }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-play { display: block; }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-pause { display: none; }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-toggle[aria-pressed="true"] .s13-custom-play { display: none; }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-toggle[aria-pressed="true"] .s13-custom-pause { display: block; }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-toggle:hover { filter: brightness(.9); }
.s13-listening-dock[data-custom-transport="true"] :is(.s13-custom-toggle,.s13-custom-seek):focus-visible { outline: 1px solid var(--s13-support); outline-offset: 3px; }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-scrub { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; background: var(--s13-surface); }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-times { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-elapsed { color: var(--s13-ink); white-space: nowrap; }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-duration { margin-left: auto; color: var(--s13-secondary); text-align: right; white-space: nowrap; }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-seek { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right,var(--s13-ink) 0 var(--s13-seek,0%),var(--s13-field-line) var(--s13-seek,0%) 100%); }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-seek::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 5px; height: 12px; margin-top: -5px; border: 0; border-radius: 0; background: var(--s13-ink); }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-seek::-moz-range-track { height: 2px; background: var(--s13-field-line); }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-seek::-moz-range-progress { height: 2px; background: var(--s13-ink); }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-seek::-moz-range-thumb { width: 5px; height: 12px; border: 0; border-radius: 0; background: var(--s13-ink); }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-controls[data-seeking="true"] .s13-custom-seek::-webkit-slider-thumb { background: var(--s13-surface); outline: 1px solid var(--s13-ink); }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-controls[data-seeking="true"] .s13-custom-seek::-moz-range-thumb { background: var(--s13-surface); outline: 1px solid var(--s13-ink); }
.s13-listening-dock[data-custom-transport="true"] .s13-custom-seek:disabled { opacity: .4; cursor: wait; }
.s13-listening-dock[data-custom-transport="true"] :is(.s13-listening-volume-toggle,.s13-listening-next,.s13-listening-stop) { justify-self: center; min-width: 0; width: 44px; height: 44px; min-height: 44px; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-next { gap: 0; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-volume { position: static; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-next > span { display: none; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-volume-toggle svg { width: 17px; height: 17px; stroke-width: 1.6px; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-close-glyph { position: relative; right: auto; width: 17px; height: 17px; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-close-glyph i { top: 8px; left: 0; width: 17px; height: 1px; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-volume-panel { right: 88px; bottom: calc(100% + 12px); z-index: 4; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-status { left: 14px; right: 14px; color: var(--s13-secondary); }
/* A persistent failure gets reading space; transient seek/loading feedback
   keeps the normal controls still. Height is measured by the existing reserve. */
.s13-listening-dock[data-custom-transport="true"]:has(.s13-listening-status[data-error="true"]:not(:empty)) { grid-template-rows: minmax(90px,max-content) auto; grid-template-areas: "identity widget volume next stop" "status status status status status"; }
.s13-listening-dock[data-custom-transport="true"] .s13-listening-status[data-error="true"]:not(:empty) { grid-area: status; position: static; margin: 0; padding: 0 14px 10px; color: var(--s13-ink); font-size: 11px; line-height: 1.5; }
html[data-s13-input="pointer"] .s13-listening-dock[data-custom-transport="true"] :is(.s13-custom-toggle,.s13-custom-seek,.s13-listening-credit):focus-visible { outline: none; }
@media (min-width: 761px) {
 /* The credit sizes the copy column. Both visible edges use the same 16px
    gutter, independent of font metrics; a long title wraps inside that column. */
 .s13-listening-dock[data-custom-transport="true"] { grid-template-columns: 160px max-content minmax(190px,1fr) repeat(3,44px); grid-template-areas: "identity identity widget volume next stop"; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-identity { contain: inline-size; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-credit { grid-area: 1 / 2; margin-inline: 16px; }
 .s13-listening-dock[data-custom-transport="true"] .s13-custom-controls { padding-left: 0; }
 .s13-listening-dock[data-custom-transport="true"]:has(.s13-listening-art[hidden]) { grid-template-columns: 0 max-content minmax(190px,1fr) repeat(3,44px); }
 .s13-listening-dock[data-custom-transport="true"]:has(.s13-listening-status[data-error="true"]:not(:empty)) { grid-template-areas: "identity identity widget volume next stop" "status status status status status status"; }
}
@media (max-width: 760px) {
 .s13-listening-dock[data-custom-transport="true"] { grid-template-columns: 286px minmax(150px,1fr) repeat(3,44px); }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-copy { padding-inline: 12px; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-credit { margin-left: 172px; }
 .s13-listening-dock[data-custom-transport="true"]:has(.s13-listening-art[hidden]) .s13-listening-credit { margin-left: 12px; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-credit > span:first-child { display: none; }
 .s13-listening-dock[data-custom-transport="true"] .s13-custom-controls { grid-template-columns: 44px minmax(0,1fr); gap: 8px; padding-right: 12px; }
 .s13-listening-dock[data-custom-transport="true"] .s13-custom-toggle { width: 44px; height: 44px; }
}
@media (max-width: 620px) {
 .s13-listening-dock[data-custom-transport="true"] {
  --s13-paper-art-width: clamp(100px,31vw,135px);
  --s13-widget-height: 66px;
  --s13-dock-height: calc(142px + env(safe-area-inset-bottom,0px));
  grid-template-columns: var(--s13-paper-art-width) minmax(0,1fr) 44px 44px;
  grid-template-rows: minmax(76px,max-content) minmax(66px,max-content);
  grid-template-areas: "identity identity toggle stop" "widget widget volume next";
 }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-identity { grid-template-columns: var(--s13-paper-art-width) minmax(0,1fr); min-height: 76px; height: auto; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-art { display: block; align-self: start; width: var(--s13-paper-art-width); height: auto; aspect-ratio: 16 / 9; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-art[hidden] { display: none; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-copy { align-items: flex-start; gap: 3px; min-height: 0; padding: 8px 10px 22px; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-title { order: 0; font-size: 13px; overflow-wrap: anywhere; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-issue { order: 1; font-size: 11px; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-credit { gap: 3px; margin: 0 0 4px calc(var(--s13-paper-art-width) + 10px); }
 .s13-listening-dock[data-custom-transport="true"]:has(.s13-listening-art[hidden]) .s13-listening-credit { margin-left: 10px; }
 .s13-listening-dock[data-custom-transport="true"] :is(.s13-listening-transport,.s13-custom-controls) { display: contents; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-transport .s13-listening-widget { grid-area: widget; position: relative; inset: auto; align-self: stretch; width: 100%; height: 66px; }
 .s13-listening-dock[data-custom-transport="true"] .s13-custom-toggle { grid-area: toggle; z-index: 2; align-self: center; justify-self: start; width: 44px; height: 44px; }
 .s13-listening-dock[data-custom-transport="true"] .s13-custom-scrub { grid-area: widget; position: relative; z-index: 2; align-self: stretch; width: 100%; min-height: 66px; height: auto; padding: 8px 14px 10px; font-size: 11px; font-variant-numeric: tabular-nums; }
 .s13-listening-dock[data-custom-transport="true"] .s13-custom-seek { height: 30px; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-volume { position: static; display: block; align-self: center; justify-self: center; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-volume[hidden] { display: block; visibility: hidden; }
 .s13-listening-dock[data-custom-transport="true"] :is(.s13-listening-volume-toggle,.s13-listening-next) { align-self: center; justify-self: center; width: 44px; height: 44px; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-stop { align-self: stretch; width: 44px; min-height: 76px; height: auto; }
 .s13-listening-dock[data-custom-transport="true"] .s13-listening-volume-panel { right: 14px; bottom: calc(100% + 12px); }
 .s13-listening-dock[data-custom-transport="true"]:has(.s13-listening-status[data-error="true"]:not(:empty)) { grid-template-rows: minmax(76px,max-content) minmax(66px,max-content) auto; grid-template-areas: "identity identity toggle stop" "widget widget volume next" "status status status status"; }
}