/* Alpacco Radio player — tokens copied verbatim from atlas/UI-TOKENS.css (Marcus-approved v2). */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/dm-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
.ar-radio, .ar-sponsors {
  /* ——— Colour ——— */
  --ar-navy: #111827;           /* card / surface */
  --ar-navy-deep: #0B1220;      /* page background */
  --ar-navy-glass: rgba(17, 24, 39, 0.82); /* mini-player frosted */
  --ar-gold: #D6B36A;           /* primary accent, borders, icons, progress */
  --ar-gold-deep: #F2D28A;      /* hover / pressed gold */
  --ar-cream: #F8FAFC;          /* primary text */
  --ar-cream-muted: #1C2638;    /* secondary surfaces / soft fills */
  --ar-cream-dim: #A9B4C6; /* inactive tabs, meta */
  --ar-cream-faint: rgba(245, 240, 230, 0.28); /* hairlines, dividers */
  --ar-danger: #C97B84;         /* soft rose — failed-audio empty state (not bright red) */
  --ar-danger-bg: rgba(201, 123, 132, 0.12);

  /* ——— Typography ——— */
  --ar-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --ar-font-ui: "DM Sans", Inter, system-ui, -apple-system, sans-serif;
  --ar-fw-regular: 400;
  --ar-fw-medium: 500;
  --ar-fw-semibold: 600;
  --ar-fs-hero: clamp(1.75rem, 3.2vw, 2.75rem);   /* slogan */
  --ar-fs-title: 1.25rem;      /* track title */
  --ar-fs-body: 0.9375rem;     /* meta / list */
  --ar-fs-label: 0.6875rem;    /* NOW PLAYING / UP NEXT — letter-spaced */
  --ar-fs-mini: 0.8125rem;     /* mini-player title */
  --ar-ls-label: 0.14em;       /* small-caps section labels */
  --ar-lh-tight: 1.2;
  --ar-lh-body: 1.45;

  /* ——— Spacing scale (4px base) ——— */
  --ar-space-1: 4px;
  --ar-space-2: 8px;
  --ar-space-3: 12px;
  --ar-space-4: 16px;
  --ar-space-5: 24px;
  --ar-space-6: 32px;
  --ar-space-7: 48px;
  --ar-space-8: 64px;

  /* ——— Radii ——— */
  --ar-radius-sm: 8px;
  --ar-radius-md: 12px;
  --ar-radius-lg: 16px;
  --ar-radius-pill: 999px;

  /* ——— Borders / glow ——— */
  --ar-hairline: 1px solid var(--ar-gold);
  --ar-hairline-faint: 1px solid var(--ar-cream-faint);
  --ar-glow-gold: 0 0 24px rgba(212, 175, 55, 0.18);
  --ar-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);

  /* ——— Player layout ——— */
  --ar-art-now: 160px;          /* desktop Now Playing artwork */
  --ar-art-now-sm: 112px;       /* narrow */
  --ar-art-upnext: 40px;
  --ar-art-mini: 44px;
  --ar-mini-height: 64px;       /* target mid of 56–72px band */
  --ar-mini-height-min: 56px;
  --ar-mini-height-max: 72px;
  --ar-progress-h: 3px;
  --ar-transport-gap: 16px;
  --ar-play-btn: 48px;          /* main play */
  --ar-play-btn-mini: 32px;

  /* ——— Grid ——— */
  --ar-collection-gap: 12px;
  --ar-collection-cols-mobile: 2;
  --ar-collection-cols-desktop: 3; /* 3–4 ok; default 3 */
  --ar-max-width: 1120px;
  --ar-player-gap: 24px;        /* Now Playing ↔ Up Next */

  /* ——— Motion ——— */
  --ar-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ar-dur-fast: 180ms;
  --ar-dur-art: 320ms;          /* artwork crossfade 250–400ms */
  --ar-dur-tab: 220ms;

  /* ——— Z ——— */
  --ar-z-mini: 40;              /* sticky mini-player on /radio; below site header if header sticky */
  --ar-z-modal: 50;
}

.ar-radio,.ar-sponsors{box-sizing:border-box;width:100%;min-width:0;max-width:var(--ar-max-width);margin:0 auto;color:var(--ar-cream);font-family:var(--ar-font-ui);font-size:var(--ar-fs-body);line-height:var(--ar-lh-body)}
.ar-radio *,.ar-radio *::before,.ar-radio *::after,.ar-sponsors *{box-sizing:border-box}
.ar-radio [hidden]{display:none!important}
.ar-radio button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;border-radius:0}
.ar-radio button:disabled{cursor:not-allowed;opacity:.4}
.ar-radio :focus-visible,.ar-sponsors :focus-visible{outline:2px solid var(--ar-cream);outline-offset:2px;border-radius:var(--ar-radius-sm)}
.ar-radio img{display:block;max-width:none}
.ar-radio h2{margin:0}
.ar-radio p{margin:0}
.ar-label{font-size:var(--ar-fs-label);font-weight:var(--ar-fw-semibold);letter-spacing:var(--ar-ls-label);text-transform:uppercase;color:var(--ar-gold)}
.ar-card{background:var(--ar-navy);border:var(--ar-hairline);border-radius:var(--ar-radius-md);box-shadow:var(--ar-shadow-card)}

/* Mode tabs (Listen / Watch) */
.ar-modes{display:inline-flex;gap:var(--ar-space-1);padding:var(--ar-space-1);border:var(--ar-hairline-faint);border-radius:var(--ar-radius-pill);margin:0 0 var(--ar-space-4)}
.ar-mode-tab{padding:var(--ar-space-2) var(--ar-space-4)!important;border-radius:var(--ar-radius-pill)!important;color:var(--ar-cream-dim)!important;font-weight:var(--ar-fw-medium)!important;transition:background var(--ar-dur-fast) var(--ar-ease),color var(--ar-dur-fast)}
.ar-mode-tab .ar-mode-sub{font-size:var(--ar-fs-label);letter-spacing:var(--ar-ls-label);text-transform:uppercase;margin-left:6px;opacity:.8}
.ar-mode-tab.is-active{background:var(--ar-gold)!important;color:var(--ar-navy-deep)!important}

/* Player grid */
.ar-player-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--ar-player-gap);align-items:start}
.ar-now{position:relative;padding:var(--ar-space-5);display:flex;flex-direction:column;gap:var(--ar-space-4)}
.ar-upnext{padding:var(--ar-space-5) var(--ar-space-4)}
.ar-now-head{display:flex;align-items:center;justify-content:space-between;gap:var(--ar-space-3)}
.ar-badge-radio{display:inline-flex;align-items:center;gap:6px;font-size:var(--ar-fs-label);letter-spacing:var(--ar-ls-label);text-transform:uppercase;color:var(--ar-cream-dim)}
.ar-dot{width:6px;height:6px;border-radius:50%;background:var(--ar-cream-faint)}
.ar-radio[data-state=playing] .ar-dot{background:var(--ar-gold);box-shadow:0 0 8px var(--ar-gold)}
.ar-playlist-name{font-size:var(--ar-fs-label);letter-spacing:var(--ar-ls-label);text-transform:uppercase;color:var(--ar-cream-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-now-body{display:flex;gap:var(--ar-space-5);align-items:center}
.ar-art-wrap{flex:0 0 var(--ar-art-now);width:var(--ar-art-now);height:var(--ar-art-now);border-radius:var(--ar-radius-sm);overflow:hidden;border:var(--ar-hairline-faint);background:var(--ar-navy-deep)}
.ar-art{width:100%;height:100%;object-fit:cover;transition:opacity var(--ar-dur-art) var(--ar-ease)}
.ar-art.is-fading,.ar-mini-art.is-fading{opacity:0}
.ar-meta{min-width:0;display:flex;flex-direction:column;gap:var(--ar-space-1)}
.ar-title{font-family:var(--ar-font-display)!important;font-size:calc(var(--ar-fs-title) * 1.6)!important;font-weight:var(--ar-fw-regular)!important;line-height:var(--ar-lh-tight)!important;color:var(--ar-cream)!important;margin:var(--ar-space-1) 0 0!important;overflow-wrap:break-word;hyphens:auto}
.ar-artist{color:var(--ar-gold);font-weight:var(--ar-fw-medium);font-size:1rem}
.ar-extra{color:var(--ar-cream-dim);font-size:var(--ar-fs-mini)}
.ar-extra:not(:empty)::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ar-gold);margin-right:8px;vertical-align:middle}
.ar-links{display:flex;flex-wrap:wrap;gap:var(--ar-space-3);margin-top:var(--ar-space-1)!important}
.ar-link{font-size:var(--ar-fs-mini);color:var(--ar-cream)!important;text-decoration:none;border-bottom:1px solid var(--ar-cream-faint)!important;padding-bottom:1px!important}
.ar-link:hover{color:var(--ar-gold)!important;border-color:var(--ar-gold)!important}

/* Mode chip */
.ar-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:var(--ar-fs-label);font-weight:var(--ar-fw-semibold);letter-spacing:var(--ar-ls-label);text-transform:uppercase;color:var(--ar-cream-dim);border:var(--ar-hairline-faint);border-radius:var(--ar-radius-pill);padding:2px 10px}
.ar-chip[data-mode=dj],.ar-chip[data-mode=ad],.ar-chip[data-mode=jingle]{color:var(--ar-gold);border:var(--ar-hairline)}
.ar-chip[data-mode=dj]::before{content:"🎙";font-size:11px}
.ar-chip[data-mode=ad]::before{content:"★";font-size:10px}
.ar-chip[data-mode=jingle]::before{content:"♪"}
.ar-chip[data-mode=track]::before{content:"♫"}
.ar-chip-sm{padding:1px 8px;font-size:10px}

/* Progress */
.ar-progress-row{display:flex;align-items:center;gap:var(--ar-space-3)}
.ar-time{font-size:var(--ar-fs-mini);color:var(--ar-cream-dim);font-variant-numeric:tabular-nums;min-width:36px}
.ar-time.ar-dur{text-align:right}
.ar-seek,.ar-volume{-webkit-appearance:none;appearance:none;flex:1;height:var(--ar-progress-h);background:linear-gradient(var(--ar-gold),var(--ar-gold)) 0/var(--fill,0%) 100% no-repeat,var(--ar-cream-faint);border-radius:2px;outline-offset:6px;margin:0;padding:0;border:0;min-width:0;width:auto}
.ar-radio .ar-seek{--fill:var(--ar-progress,0%)}
.ar-seek::-webkit-slider-thumb,.ar-volume::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ar-gold);border:0}
.ar-seek::-moz-range-thumb,.ar-volume::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ar-gold);border:0}
.ar-seek:disabled{opacity:.5}
.ar-seek:disabled::-webkit-slider-thumb{visibility:hidden}

/* Transport */
.ar-transport{display:flex;align-items:center;gap:var(--ar-transport-gap);flex-wrap:wrap}
.ar-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%!important;color:var(--ar-gold)!important;transition:color var(--ar-dur-fast),transform var(--ar-dur-fast) var(--ar-ease)}
.ar-btn:hover:not(:disabled){color:var(--ar-cream)!important}
.ar-btn[aria-pressed=true].ar-shuffle,.ar-repeat:not([data-repeat=off]){color:var(--ar-cream)!important}
.ar-btn[aria-pressed=true].ar-shuffle::after,.ar-repeat:not([data-repeat=off])::after{content:"";position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--ar-gold)}
.ar-repeat[data-repeat=off]{color:var(--ar-cream-dim)!important}
.ar-shuffle[aria-pressed=false]{color:var(--ar-cream-dim)!important}
.ar-repeat-one{display:none;position:absolute;top:2px;right:2px;font-size:9px;font-weight:700;color:var(--ar-gold)}
.ar-repeat[data-repeat=one] .ar-repeat-one{display:block}
.ar-play{width:var(--ar-play-btn);height:var(--ar-play-btn);border:var(--ar-hairline)!important;background:transparent!important}
.ar-radio[data-state=playing] .ar-play{background:var(--ar-cream)!important;color:var(--ar-navy-deep)!important;border-color:var(--ar-cream)!important;animation:ar-pulse 2.4s var(--ar-ease) infinite}
.ar-ico-pause{display:none}
.ar-btn[aria-pressed=true] .ar-ico-play{display:none}
.ar-btn[aria-pressed=true] .ar-ico-pause{display:block}
.ar-mute .ar-ico-mute{display:none}
.ar-mute[aria-pressed=true] .ar-ico-mute{display:block}
.ar-mute[aria-pressed=true] .ar-ico-volume{display:none}
.ar-skip-wait{position:absolute;top:-4px;right:-6px;font-size:10px;color:var(--ar-cream);min-width:14px}
.ar-vol{display:inline-flex;align-items:center;gap:var(--ar-space-2);margin-left:auto;min-width:120px}
.ar-volume{flex:0 0 80px;--fill:calc(var(--v,80) * 1%)}
@keyframes ar-pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,179,106,.35)}50%{box-shadow:0 0 0 8px rgba(214,179,106,0)}}

.ar-status{min-height:1.2em;font-size:var(--ar-fs-mini);color:var(--ar-cream-dim)}
.ar-radio[data-state=error] .ar-status{color:var(--ar-danger)}
.ar-start{align-self:flex-start;padding:var(--ar-space-2) var(--ar-space-5)!important;border:var(--ar-hairline)!important;border-radius:var(--ar-radius-pill)!important;color:var(--ar-gold)!important;font-weight:var(--ar-fw-semibold)!important;letter-spacing:var(--ar-ls-label)!important;text-transform:uppercase!important;font-size:var(--ar-fs-label)!important;box-shadow:var(--ar-glow-gold)!important}
.ar-start:hover{background:var(--ar-gold)!important;color:var(--ar-navy-deep)!important}
.ar-radio.is-started .ar-start{display:none}
.ar-song-selection{padding:var(--ar-space-4);margin-top:var(--ar-space-4)}
.ar-start-collection{min-height:44px;padding:var(--ar-space-3) var(--ar-space-5)!important;background:var(--ar-gold)!important;color:var(--ar-navy-deep)!important;border-radius:var(--ar-radius-pill)!important;font-weight:var(--ar-fw-semibold)!important}
.ar-tl-item{cursor:pointer}
.ar-tl-item.is-current{background:var(--ar-cream-muted)}
.ar-song-play{min-width:52px;min-height:44px;padding:var(--ar-space-2)!important;border:var(--ar-hairline)!important;border-radius:var(--ar-radius-pill)!important;color:var(--ar-gold)!important;flex-shrink:0}
.ar-song-error{display:block;color:var(--ar-danger);font-size:var(--ar-fs-mini)}
.ar-now,.ar-transport,.ar-song-selection,.ar-tl-item{scroll-margin-top:125px}
.ar-transport{scroll-margin-top:125px;background:var(--ar-navy)}

/* Up Next */
.ar-upnext-list,.ar-tracklist,.ar-video-list{list-style:none;margin:var(--ar-space-3) 0 0;padding:0}
.ar-un-item,.ar-tl-item,.ar-vid{display:flex;align-items:center;gap:var(--ar-space-3);min-height:56px;padding:var(--ar-space-2) var(--ar-space-1)!important;border-bottom:var(--ar-hairline-faint)!important;width:100%;text-align:left}
.ar-un-item:last-child{border-bottom:0!important}
.ar-un-item img,.ar-tl-item img{width:var(--ar-art-upnext);height:var(--ar-art-upnext);border-radius:6px;object-fit:cover;flex:0 0 auto}
.ar-un-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.ar-un-title{font-family:var(--ar-font-display);font-size:1.0625rem;color:var(--ar-cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-un-artist{font-size:var(--ar-fs-mini);color:var(--ar-cream-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-un-dur{font-size:var(--ar-fs-mini);color:var(--ar-cream-dim);font-variant-numeric:tabular-nums}
.ar-un-item[data-type=ad],.ar-un-item[data-type=dj],.ar-un-item[data-type=jingle]{opacity:.9}
[data-failed="1"] .ar-un-title{text-decoration:line-through;color:var(--ar-danger)}
.ar-un-more,.ar-empty{padding:var(--ar-space-3) var(--ar-space-1);color:var(--ar-cream-dim);font-size:var(--ar-fs-mini)}

/* Sponsor live card */
.ar-sponsor-live{display:flex;align-items:center;gap:var(--ar-space-4);margin-top:var(--ar-space-4);padding:var(--ar-space-3) var(--ar-space-5);border-radius:var(--ar-radius-sm);box-shadow:var(--ar-glow-gold)}
.ar-sponsor-live img{width:56px;height:56px;border-radius:6px;object-fit:cover}
.ar-sponsor-live strong{display:block;font-family:var(--ar-font-display);font-size:1.25rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.ar-sponsor-note{font-size:var(--ar-fs-mini);color:var(--ar-cream-dim)}
.ar-sponsor-link{margin-left:auto;color:var(--ar-gold)!important;font-size:var(--ar-fs-mini)}

/* Library tabs */
.ar-library{margin-top:var(--ar-space-6)}
.ar-tabs{position:relative;display:flex;border-bottom:var(--ar-hairline-faint);margin-bottom:var(--ar-space-4)}
.ar-tab{flex:0 0 auto;min-width:140px;padding:var(--ar-space-3) var(--ar-space-4)!important;font-size:var(--ar-fs-label)!important;font-weight:var(--ar-fw-semibold)!important;letter-spacing:var(--ar-ls-label)!important;text-transform:uppercase!important;color:var(--ar-cream-dim)!important}
.ar-tab.is-active{color:var(--ar-gold)!important}
.ar-tab-underline{position:absolute;bottom:-1px;left:0;width:140px;height:2px;background:var(--ar-gold);transition:transform var(--ar-dur-tab) var(--ar-ease)}
.ar-tabs[data-active=tracks] .ar-tab-underline{transform:translateX(140px)}
.ar-grid{display:grid;grid-template-columns:repeat(var(--ar-collection-cols-desktop),minmax(0,1fr));gap:var(--ar-collection-gap)}
.ar-coll{display:flex!important;flex-direction:column;align-items:center;gap:var(--ar-space-1);padding:var(--ar-space-4)!important;background:var(--ar-cream)!important;color:var(--ar-navy)!important;border:var(--ar-hairline)!important;border-radius:var(--ar-radius-md)!important;text-align:center;transition:transform var(--ar-dur-fast) var(--ar-ease)}
.ar-coll:nth-child(even){background:var(--ar-navy)!important;color:var(--ar-cream)!important}
.ar-coll:hover{transform:translateY(-2px)}
.ar-coll img{width:100%;max-width:140px;aspect-ratio:1;object-fit:cover;border-radius:var(--ar-radius-sm);margin-bottom:var(--ar-space-2)}
.ar-coll-title{font-family:var(--ar-font-display);font-size:1.25rem;letter-spacing:.12em;text-transform:uppercase}
.ar-coll-sub{font-size:var(--ar-fs-mini);color:var(--ar-gold-deep)}
.ar-coll:nth-child(even) .ar-coll-sub{color:var(--ar-gold)}
.ar-coll.is-current{background:var(--ar-navy)!important;color:var(--ar-cream)!important;border:var(--ar-hairline)!important;box-shadow:var(--ar-glow-gold),0 0 32px rgba(214,179,106,.22)!important}
.ar-coll.is-current .ar-coll-sub{color:var(--ar-gold)}
.ar-coll.is-current .ar-coll-title::after{content:"";display:block;width:32px;height:1px;margin:6px auto 0;background:var(--ar-gold)}
.ar-tl-item.is-current .ar-un-title{color:var(--ar-gold)}

/* Watch (YouTube) mode */
.ar-watch-note{color:var(--ar-cream-dim);font-size:var(--ar-fs-mini);margin-bottom:var(--ar-space-3)!important}
.ar-watch-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--ar-player-gap);align-items:start}
.ar-video{padding:var(--ar-space-4)}
.ar-video-frame{position:relative;aspect-ratio:16/9;background:var(--ar-navy-deep);border-radius:var(--ar-radius-sm);overflow:hidden}
.ar-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ar-video-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--ar-cream-dim)}
.ar-video-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ar-space-2);margin-top:var(--ar-space-3)}
.ar-video-meta strong{font-family:var(--ar-font-display);font-size:1.25rem;font-weight:500}
.ar-video-artist{color:var(--ar-gold)}
.ar-yt-link{margin-left:auto;color:var(--ar-gold)!important;border:var(--ar-hairline);border-radius:var(--ar-radius-pill);padding:4px 14px;text-decoration:none;font-size:var(--ar-fs-mini)}
.ar-video-list{padding:var(--ar-space-3)!important;margin:0!important}
.ar-vid img{width:96px;height:54px;border-radius:4px;object-fit:cover}
.ar-vid.is-current .ar-un-title{color:var(--ar-gold)}

/* Mini-player (sticky, /radio only) */
.ar-mini{position:fixed;left:50%;bottom:var(--ar-space-4);transform:translateX(-50%);z-index:var(--ar-z-mini);width:min(calc(100% - 24px),560px);display:flex;align-items:center;gap:var(--ar-space-3);padding:0 var(--ar-space-4) 0 10px;height:var(--ar-mini-height);min-height:var(--ar-mini-height-min);max-height:var(--ar-mini-height-max);background:var(--ar-navy-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:var(--ar-hairline);border-radius:var(--ar-radius-pill);box-shadow:var(--ar-glow-gold),var(--ar-shadow-card);overflow:hidden}
.ar-mini.is-entering{animation:ar-slide-up 420ms var(--ar-ease)}
@keyframes ar-slide-up{from{transform:translate(-50%,120%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.ar-mini-art{flex:0 0 var(--ar-art-mini);width:var(--ar-art-mini);height:var(--ar-art-mini);max-width:44px;max-height:44px;border-radius:var(--ar-radius-sm);object-fit:cover;border:var(--ar-hairline-faint);transition:opacity var(--ar-dur-art)}
.ar-mini-meta{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;overflow:hidden;max-height:calc(var(--ar-mini-height) - 8px)}
.ar-mini-title{font-family:var(--ar-font-display);font-size:calc(var(--ar-fs-mini) * 1.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ar-cream);line-height:1.25;display:block}
.ar-mini-artist{font-size:var(--ar-fs-mini);color:var(--ar-cream-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-mini-chip{font-size:10px;letter-spacing:var(--ar-ls-label);text-transform:uppercase;color:var(--ar-gold);border:var(--ar-hairline);border-radius:var(--ar-radius-pill);padding:1px 8px;white-space:nowrap}
.ar-mini-play{width:var(--ar-play-btn-mini)!important;height:var(--ar-play-btn-mini)!important}
.ar-mini-progress{position:absolute;left:24px;right:24px;bottom:0;height:2px;background:var(--ar-cream-faint)}
.ar-mini-progress span{display:block;height:100%;width:0;background:var(--ar-gold)}

/* Toast */
.ar-toast{position:fixed;left:50%;top:var(--ar-space-5);transform:translateX(-50%);z-index:var(--ar-z-modal);max-width:min(92vw,520px);padding:var(--ar-space-3) var(--ar-space-5);background:var(--ar-navy);border:var(--ar-hairline);border-radius:var(--ar-radius-pill);color:var(--ar-cream);font-size:var(--ar-fs-mini);box-shadow:var(--ar-shadow-card)}
.ar-toast.is-error{border:1px solid rgba(201,123,132,.55);background:linear-gradient(var(--ar-danger-bg),var(--ar-danger-bg)),var(--ar-navy);color:var(--ar-danger)}
.ar-toast.is-error::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;margin-right:8px;border-radius:50%;border:1px solid var(--ar-danger);font-size:10px;font-weight:600;vertical-align:-2px}

/* Idle sponsor strip ([alpacco_radio_sponsors]) — brand names only */
.ar-sponsors{margin-top:var(--ar-space-6)}
.ar-sponsors ul{list-style:none;margin:var(--ar-space-3) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ar-space-3)}
.ar-sponsor-card{border:var(--ar-hairline);border-radius:var(--ar-radius-sm);background:transparent;color:var(--ar-cream);padding:var(--ar-space-4);text-align:center;transition:box-shadow var(--ar-dur-fast),background var(--ar-dur-fast)}
.ar-sponsor-card a{color:inherit;text-decoration:none}
.ar-sponsor-card .ar-sponsor-name{font-family:var(--ar-font-display);font-size:1.125rem;letter-spacing:.14em;text-transform:uppercase}
.ar-sponsor-card.is-live{box-shadow:var(--ar-glow-gold);background:rgba(214,179,106,.08)}

/* Responsive (mobile-first adjustments) */
@media (max-width: 860px){
  .ar-player-grid,.ar-watch-grid{grid-template-columns:minmax(0,1fr)}
  .ar-grid{grid-template-columns:repeat(var(--ar-collection-cols-mobile),minmax(0,1fr))}
  .ar-sponsors ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 520px){
  .ar-now{padding:var(--ar-space-4)}
  .ar-art-wrap{flex-basis:var(--ar-art-now-sm);width:var(--ar-art-now-sm);height:var(--ar-art-now-sm)}
  .ar-now-body{gap:var(--ar-space-4)}
  .ar-title{font-size:var(--ar-fs-title)!important}
  .ar-artist{font-size:var(--ar-fs-body)}
  .ar-un-item .ar-chip-sm{display:none}
  .ar-un-item[data-type=ad] .ar-un-artist::before{content:"Sponsor · "}
  .ar-un-item[data-type=jingle] .ar-un-artist::before{content:"Jingle · "}
  .ar-sponsor-card{padding:var(--ar-space-3) var(--ar-space-2)}
  .ar-sponsor-card .ar-sponsor-name{font-size:.9375rem;letter-spacing:.06em}
  .ar-coll-title{font-size:1.0625rem;letter-spacing:.08em}
  .ar-transport{gap:var(--ar-space-3);justify-content:space-between}
  .ar-vol{margin-left:0;flex:1 1 100%;justify-content:center}
  .ar-volume{flex-basis:160px}
  .ar-tab{min-width:50%;}
  .ar-tab-underline{width:50%}
  .ar-tabs[data-active=tracks] .ar-tab-underline{transform:translateX(100%)}
  .ar-modes{display:flex}
  .ar-mode-tab{flex:1}
  .ar-mode-tab .ar-mode-sub{display:none}
  .ar-art-wrap{flex-shrink:0}
}
@media (prefers-reduced-motion: reduce){
  .ar-radio *,.ar-radio *::before,.ar-radio *::after{animation:none!important;transition:none!important}
}

/* ATLAS P1 pass (2026-10-19): hairlines strictly 1px; mini-player single line, capped height; 3px progress */
.ar-card,.ar-coll,.ar-sponsor-card,.ar-mini,.ar-chip[data-mode=dj],.ar-chip[data-mode=ad],.ar-chip[data-mode=jingle],.ar-start,.ar-play{border-width:1px!important}
.ar-mini{box-sizing:border-box;height:var(--ar-mini-height)!important}
.ar-mini-artist{line-height:1.25;display:block}
.ar-mini-chip{flex:0 0 auto}
@media (max-width:520px){.ar-mini-chip{display:none!important}.ar-mini-artist{font-size:.75rem}}
.ar-seek,.ar-volume{height:var(--ar-progress-h)!important;max-height:var(--ar-progress-h)}
.ar-art-wrap{max-width:180px;max-height:180px}
.ar-video-list:empty{display:none}

.ar-toast{border-radius:var(--ar-radius-md)!important;width:max-content;max-width:min(calc(100vw - 32px),520px);line-height:1.4}

/* ——— v0.3.0 Watch radio stage (YouTube player ↔ DJ PACCO on-air card). ATLAS tokens only. ———
   ToS: while a video plays the player is the only thing in the stage (no overlay), and never < 200×200. */
.ar-stage{position:relative;width:100%;aspect-ratio:16/9;min-height:204px;min-width:204px;background:var(--ar-navy-deep);border:var(--ar-hairline-faint);border-radius:var(--ar-radius-sm);overflow:hidden}
.ar-yt-host{position:absolute;inset:0}
.ar-yt-host iframe,.ar-yt-host .ar-yt-player{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}
.ar-stage:not([data-stage=video]) .ar-yt-host{visibility:hidden}
.ar-stage[data-stage=video] .ar-onair,.ar-stage[data-stage=video] .ar-stage-idle{display:none!important}
.ar-stage-idle{position:absolute;inset:0;display:grid;place-items:center}
.ar-stage-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38;filter:saturate(.85)}
.ar-stage-idle::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(6,16,28,.15) 0,rgba(6,16,28,.75) 75%)}
.ar-stage-cta{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--ar-space-3);text-align:center;padding:var(--ar-space-4)}
.ar-start-big{display:inline-flex!important;align-items:center;gap:var(--ar-space-2);align-self:center!important;background:var(--ar-navy)!important;padding:var(--ar-space-3) var(--ar-space-5)!important}
.ar-start-big .ar-ico{width:18px;height:18px}
.ar-stage-hint{font-size:var(--ar-fs-mini);color:var(--ar-cream-dim);max-width:34ch}
.ar-onair{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:var(--ar-space-5);padding:var(--ar-space-5);background:radial-gradient(ellipse at 30% 40%,#10233d 0,var(--ar-navy-deep) 70%)}
.ar-onair-art{width:clamp(72px,22%,148px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;border:var(--ar-hairline);box-shadow:var(--ar-glow-gold),0 0 40px rgba(214,179,106,.25);animation:ar-pulse 2.4s var(--ar-ease) infinite}
.ar-onair-meta{display:flex;flex-direction:column;gap:var(--ar-space-1);min-width:0;max-width:60%}
.ar-onair-label{display:inline-flex;align-items:center;gap:8px;font-size:var(--ar-fs-label);font-weight:var(--ar-fw-semibold);letter-spacing:var(--ar-ls-label);text-transform:uppercase;color:var(--ar-gold)}
.ar-onair-label .ar-dot{background:var(--ar-gold);box-shadow:0 0 8px var(--ar-gold)}
.ar-onair-title{font-family:var(--ar-font-display);font-weight:var(--ar-fw-regular);font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:var(--ar-lh-tight);color:var(--ar-cream)}
.ar-onair-next{font-size:var(--ar-fs-mini);color:var(--ar-cream-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-onair-progress{display:block;height:2px;margin-top:var(--ar-space-2);background:var(--ar-cream-faint);border-radius:2px;overflow:hidden}
.ar-onair-progress span{display:block;height:100%;width:0;background:var(--ar-gold)}
.ar-onair[data-type=ad] .ar-onair-art{border-radius:var(--ar-radius-sm)}
/* Watch mode: the stage replaces the square artwork; meta sits under the video */
.ar-radio[data-mode=watch] .ar-art-wrap{display:none}
.ar-radio[data-mode=listen] .ar-stage{display:none}
.ar-radio[data-mode=watch] .ar-title{font-size:calc(var(--ar-fs-title) * 1.35)!important}
.ar-radio[data-mode=watch] .ar-now{gap:var(--ar-space-3)}
.ar-radio[data-state=blocked] .ar-play{border-color:var(--ar-cream)!important;animation:ar-pulse 1.6s var(--ar-ease) infinite}
.ar-watch-note{margin-top:var(--ar-space-5)!important;text-align:center}
/* Toast is inline in the Now Playing card (never floats over the YouTube player) */
.ar-radio .ar-toast{position:static;transform:none;left:auto;top:auto;width:auto;max-width:none;margin:0;align-self:flex-start}
@media (max-width:520px){
  .ar-now{padding:var(--ar-space-3)}
  .ar-onair{gap:var(--ar-space-3);padding:var(--ar-space-3)}
  .ar-onair-meta{max-width:64%}
  .ar-onair-next{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ar-stage-hint{display:none}
}
.ar-links .ar-yt-link{margin-left:0;border:var(--ar-hairline)!important;padding:3px 12px!important}

/* v0.3.1: DJ Pacco host panel (ported from GPT-6 patch; colours mapped to ATLAS tokens). Sits below the
   player grid — never over the YouTube player. Highlights while a DJ clip / jingle is on air. */
.ar-dj-panel{display:flex;align-items:center;gap:var(--ar-space-5);margin-top:var(--ar-space-4);padding:var(--ar-space-5);transition:box-shadow var(--ar-dur-fast) var(--ar-ease)}
.ar-dj-portrait{flex:0 0 94px;width:94px;height:94px;object-fit:cover;border-radius:var(--ar-radius-lg);border:var(--ar-hairline)}
.ar-dj-copy{min-width:0;display:flex;flex-direction:column;gap:var(--ar-space-1)}
.ar-radio .ar-dj-name{font-family:var(--ar-font-display)!important;font-weight:var(--ar-fw-medium)!important;font-size:1.35rem!important;line-height:var(--ar-lh-tight)!important;letter-spacing:.06em;color:var(--ar-cream)!important;margin:0!important}
.ar-dj-name span{color:var(--ar-gold)}
.ar-dj-bio{color:var(--ar-cream-dim);font-size:var(--ar-fs-body)}
.ar-dj-live{color:var(--ar-gold);font-size:var(--ar-fs-mini)}
.ar-dj-live strong{color:var(--ar-cream);font-weight:var(--ar-fw-medium)}
.ar-dj-panel.is-live{box-shadow:var(--ar-glow-gold),0 0 32px rgba(214,179,106,.22),var(--ar-shadow-card)}
.ar-dj-panel.is-live .ar-dj-portrait{animation:ar-pulse 2.4s var(--ar-ease) infinite}
@media (max-width:560px){.ar-dj-panel{padding:var(--ar-space-4);gap:var(--ar-space-3);align-items:flex-start}.ar-dj-portrait{width:64px;height:64px;flex-basis:64px}.ar-radio .ar-dj-name{font-size:1.12rem!important}}

.ar-radio .ar-sources{display:flex;gap:12px;margin:12px 0}
.ar-radio .ar-sources [aria-selected=true]{color:var(--ar-gold)}
.ar-radio #ar-spotify-panel iframe{display:block;border:0;border-radius:12px}
.ar-radio .ar-resume,.ar-radio .ar-popout{margin:8px;padding:10px 16px;background:var(--ar-navy);color:var(--ar-gold);border:1px solid var(--ar-gold)}
.ar-radio .ar-card{background:var(--ar-navy)}
.ar-radio .ar-coll{background:#1C2638!important;color:var(--ar-cream)!important}
