/* URSY.FM polish layer — additive refinements over shell.css + live-radio.css.
   Loads last, so equal-specificity rules win. Touches only presentation;
   no shell markup or behaviour changes. Tokens come from .ursy-mount / :root. */

/* ---- Palette: one cool, modern system shared with the DAB player ----
   shell.css scopes its warm terracotta tokens to .ursy-mount; re-point them
   here so the whole page speaks the same language as the radio instead of
   sitting in a warm cream shell around a cool graphite device. */
:root, .ursy-mount {
  --ursy-canvas: #eaeef3;
  --ursy-canvas-cool: #e7edf3;
  --ursy-panel: #ffffff;
  --ursy-panel-soft: #eef2f6;
  --ursy-text: #1b2027;
  --ursy-muted: #5a6572;
  --ursy-subtle: #838f9c;
  --ursy-border: #d5dde5;
  --ursy-border-soft: #e6ecf2;
  --ursy-accent: #0f8fc4;
  --ursy-accent-deep: #0a6c97;
  --ursy-accent-soft: #e0f2fb;
  --ursy-focus: #0f8fc4;
  --ursy-info: #245da8;
  --ursy-info-soft: #e8f0fe;
}
body.ursy-app-page { background: #eef1f5; }
.ursy-mount {
  background-image:
    radial-gradient(1200px 600px at 50% -240px, rgba(15,143,196,.09), transparent 62%),
    radial-gradient(880px 480px at 108% 420px, rgba(58,64,72,.05), transparent 60%),
    linear-gradient(180deg, #fbfcfd 0, #f4f7fa 26rem, var(--ursy-canvas) 46rem) !important;
  color: var(--ursy-text);
}

/* ---- Section rhythm + heading accent bar ---- */
main > section, .ursy-scaffold > section, .ursy-tool, .ursy-live,
.ursy-podcasts, .ursy-directory, .ursy-world, .ursy-planner,
#ursy-library, .ursy-recommendations, .ursy-sleep, #ursy-account, #ursy-legal {
  scroll-margin-top: 84px;
}
.ursy-section-heading { position: relative; padding-left: 16px; margin-bottom: 1.1rem; }
.ursy-section-heading::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 999px; background: linear-gradient(var(--ursy-accent), var(--ursy-accent-deep));
}
.ursy-section-heading h2 { letter-spacing: -.02em; }
.ursy-eyebrow::before { content: "● "; color: var(--ursy-accent); font-size: .7em; vertical-align: middle; }

/* ---- Unified card treatment + hover lift ---- */
.ursy-card {
  background: linear-gradient(180deg, #fff, #fbfdfe);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ursy-card:hover { transform: translateY(-2px); box-shadow: var(--ursy-shadow-md); border-color: var(--ursy-accent-soft); }
.ursy-card h3 { letter-spacing: -.01em; }

/* ---- Result lists (directory / podcasts / world) → tidy cards ---- */
.ursy-directory-results li, .ursy-podcast-results li {
  padding: .85rem 1rem; border: 1px solid var(--ursy-border-soft); border-radius: var(--ursy-radius-sm);
  background: linear-gradient(180deg, #fff, #fafcfe); box-shadow: var(--ursy-shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.ursy-directory-results li:hover, .ursy-podcast-results li:hover {
  transform: translateY(-1px); box-shadow: var(--ursy-shadow-md); border-color: var(--ursy-accent-soft);
}
.ursy-country-summary article {
  border-radius: var(--ursy-radius); border: 1px solid var(--ursy-border-soft);
  background: linear-gradient(180deg, #fff, #fafcfe); box-shadow: var(--ursy-shadow-sm);
}

/* ---- Buttons: gentle dimensional finish ---- */
.ursy-button {
  background: linear-gradient(180deg, #fff, #f2f6f9);
  box-shadow: var(--ursy-shadow-sm); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.ursy-button:hover { transform: translateY(-1px); box-shadow: var(--ursy-shadow-md); }
.ursy-button:active { transform: translateY(0); }
.ursy-button--primary, .ursy-view.is-active {
  background: linear-gradient(180deg, #21a5d8, var(--ursy-accent-deep)); border-color: var(--ursy-accent-deep);
}
.ursy-button--primary:hover { filter: brightness(1.05); }

/* ---- Status / badge state colours ---- */
.ursy-status--play { background: var(--ursy-success-soft); color: #0f5c28; }
.ursy-status--official-link { background: var(--ursy-info-soft); color: #17457f; }
.ursy-status--unavailable { background: var(--ursy-panel-soft); color: var(--ursy-subtle); }
.ursy-status--wrong-location, .ursy-status--schedule-unverified { background: var(--ursy-warning-soft); color: var(--ursy-warning); }
.ursy-badge { background: var(--ursy-accent-soft); color: var(--ursy-accent-deep); }

/* ---- Forms: search inputs & selects ---- */
.ursy-directory-search input, .ursy-podcast-search input, .ursy-france-search input,
.ursy-search input, #ursy-search-input,
.ursy-directory-search select, .ursy-podcast-search select, .ursy-france-search select,
.ursy-timer-controls select, .ursy-planner-toolbar select {
  border: 1px solid var(--ursy-border); border-radius: var(--ursy-radius-sm);
  background: #fff; box-shadow: inset 0 1px 2px rgba(60,64,67,.06); transition: border-color .12s ease, box-shadow .12s ease;
}
.ursy-directory-search input:focus, .ursy-podcast-search input:focus, .ursy-france-search input:focus,
.ursy-search input:focus, #ursy-search-input:focus, select:focus-visible {
  outline: none; border-color: var(--ursy-accent); box-shadow: 0 0 0 3px var(--ursy-accent-soft);
}

/* ---- Sticky section nav: cleaner pill bar ---- */
.ursy-nav { backdrop-filter: saturate(1.2) blur(6px); box-shadow: var(--ursy-shadow-sm); }
.ursy-nav a { border-radius: 999px; padding: .38rem .8rem; font-weight: 600; color: var(--ursy-muted); transition: background .12s ease, color .12s ease; }
.ursy-nav a:hover { background: var(--ursy-accent-soft); color: var(--ursy-accent-deep); }

/* ---- Preview status banner: branded strip ---- */
.ursy-preview-status {
  border-radius: 999px; border: 1px solid var(--ursy-accent-soft);
  background: linear-gradient(90deg, var(--ursy-accent-soft), #fff 60%);
}
.ursy-preview-status strong { color: var(--ursy-accent-deep); }

/* ---- Hero: a touch more presence ---- */
.ursy-header h1 { background: linear-gradient(180deg, #1b2027, #33526b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ursy-hero-actions .ursy-button--primary { box-shadow: 0 6px 18px rgba(15,143,196,.28); }

/* ---- Sleep & ambient cards ---- */
.ursy-sleep-card {
  border-radius: var(--ursy-radius); border: 1px solid var(--ursy-border-soft);
  background: linear-gradient(180deg, #fff, #f6fafc); box-shadow: var(--ursy-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ursy-sleep-card:hover { transform: translateY(-2px); box-shadow: var(--ursy-shadow-md); }

/* ---- Planner reminder-delivery + occurrences ---- */
.ursy-reminder-delivery article {
  border-radius: var(--ursy-radius); border: 1px solid var(--ursy-border-soft);
  background: linear-gradient(180deg, #fff, #fafcfe); box-shadow: var(--ursy-shadow-sm);
}
.ursy-occurrences > li {
  border-radius: var(--ursy-radius-sm); border: 1px solid var(--ursy-border-soft);
  background: #fff; box-shadow: var(--ursy-shadow-sm);
}

/* ---- Recommendations + library ---- */
.ursy-recommendation-grid > * , .ursy-library-items > li {
  border-radius: var(--ursy-radius-sm); border: 1px solid var(--ursy-border-soft); background: #fff;
}

/* ---- Legal grid + footer ---- */
.ursy-legal-grid > * { border-radius: var(--ursy-radius); border: 1px solid var(--ursy-border-soft); background: linear-gradient(180deg,#fff,#fafcfe); }
.ursy-footer {
  margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--ursy-border);
  background: linear-gradient(180deg, transparent, rgba(15,143,196,.045));
}

/* ---- Focus visibility everywhere ---- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid var(--ursy-focus); outline-offset: 2px;
}

/* ===== Round 2 refinements ===== */

/* Section rhythm */
main > section, .ursy-scaffold > section { margin-block: 2.1rem; }
.ursy-scaffold > section { padding: 0; }
#ursy-local { padding: 1.2rem 1.35rem; border: 1px solid var(--ursy-border-soft); border-radius: var(--ursy-radius); background: linear-gradient(180deg,#fff,#fafcfe); box-shadow: var(--ursy-shadow-sm); }

/* Result card internals: clear hierarchy */
.ursy-directory-results li h3, .ursy-podcast-results li h3 { margin: 0 0 .15rem; font-size: 1rem; letter-spacing: -.01em; }
.ursy-directory-results li .ursy-muted, .ursy-podcast-results li .ursy-muted { font-size: .82rem; }
.ursy-directory-results li .ursy-status, .ursy-podcast-results li .ursy-status { margin-top: .45rem; }
.ursy-directory-results li a, .ursy-podcast-results li a { color: var(--ursy-accent-deep); font-weight: 600; }

/* Empty & loading/status states */
.ursy-empty {
  padding: 1.1rem 1.25rem; border: 1px dashed var(--ursy-border); border-radius: var(--ursy-radius-sm);
  background: rgba(255,255,255,.6); color: var(--ursy-muted); text-align: center;
}
.ursy-directory-status, #ursy-fixture-status, .ursy-country-signal { color: var(--ursy-muted); font-weight: 600; }
[aria-busy="true"] .ursy-directory-status::after { content: " …"; }

/* View switches & country tabs: clearer active pill */
.ursy-view-switch, .ursy-country-tabs, .ursy-planner-filters, .ursy-library-controls {
  gap: .4rem; flex-wrap: wrap;
}
.ursy-view { transition: background .12s ease, color .12s ease, border-color .12s ease; }
.ursy-view:hover:not(.is-active) { border-color: var(--ursy-accent-soft); color: var(--ursy-accent-deep); }

/* Account section card */
#ursy-account .ursy-account-grid > *, .ursy-account-card {
  border-radius: var(--ursy-radius); border: 1px solid var(--ursy-border-soft);
  background: linear-gradient(180deg,#fff,#fafcfe); box-shadow: var(--ursy-shadow-sm);
}
.ursy-family-account a { transition: filter .12s ease; }

/* Country boundary / disclaimers: quiet, readable */
.ursy-country-boundary, .ursy-sleep-disclaimer, .ursy-podcast-safety {
  border-radius: var(--ursy-radius-sm); border: 1px solid var(--ursy-border-soft);
  background: var(--ursy-warning-soft); color: #5a4300;
}

/* Footnotes a touch quieter */
.ursy-footnote { color: var(--ursy-subtle); }

@media (prefers-reduced-motion: reduce) {
  .ursy-card, .ursy-button, .ursy-sleep-card, .ursy-view,
  .ursy-directory-results li, .ursy-podcast-results li { transition: none; }
}

/* ===== App-first mode =====
   Straight into the player: drop the marketing hero and the old fixture
   transport bar, keep every content section underneath the app. */
.ursy-app .ursy-preview-status,
.ursy-app .ursy-header,
.ursy-app .ursy-player { display: none !important; }

/* One navigation, not two: the compact brand nav is enough above the player,
   so the long sticky pill bar is dropped in app mode. */
.ursy-app .ursy-nav { display: none !important; }
.ursy-app .ursy-family-header {
  padding-block: .55rem; position: sticky; top: 0; z-index: 30;
  background: rgba(251,252,253,.86); backdrop-filter: saturate(1.25) blur(8px);
  border-bottom: 1px solid var(--ursy-border-soft);
}
.ursy-app .ursy-family-primary a {
  padding: .35rem .7rem; border-radius: 999px; font-weight: 600;
  transition: background .12s ease, color .12s ease;
}
.ursy-app .ursy-family-primary a:hover { background: var(--ursy-accent-soft); color: var(--ursy-accent-deep); }
.ursy-app #ursy-content { padding-top: .9rem; }
.ursy-app #ursy-live-radio { margin-top: 0; }
.ursy-app .ursy-radio { margin-top: 0; }
/* Supporting copy sits under the app, quieter than the player itself. */
.ursy-app #ursy-live-radio .ursy-section-heading { margin-top: 1.6rem; }
/* Never let the docked player cover the end of the page. */
.ursy-app { padding-bottom: 104px; }

/* Tuning gestures */
.ursy-radio__screen { touch-action: pan-y; cursor: grab; user-select: none; }
.ursy-radio__dial { touch-action: none; cursor: ew-resize; height: 30px; }
.ursy-radio__dial-ticks { pointer-events: none; }
.ursy-radio.is-scrubbing { cursor: ew-resize; }
.ursy-radio.is-scrubbing .ursy-radio__needle { transition: none; }

/* ===== Fine-grain polish: live-radio browse surface ===== */

/* Toolbar: aligned baseline, clearer field labels.
   align-items is only safe above the narrow breakpoint — live-radio.css turns
   the toolbar into a column there, and an `end` alignment would right-shift
   every field into a broken stack. */
.ursy-live__toolbar { gap: 14px 16px; margin: 1.5rem 0 1rem; }
@media (min-width: 561px) { .ursy-live__toolbar { align-items: end; } }
.ursy-live__field label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ursy-subtle);
}
.ursy-live__field input[type="search"],
.ursy-live__field select {
  height: 44px; border-radius: 12px; border: 1px solid var(--ursy-border);
  background: #fff; box-shadow: inset 0 1px 2px rgba(27,32,39,.05);
  font-size: 14px; color: var(--ursy-text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ursy-live__field input[type="search"]:focus,
.ursy-live__field select:focus {
  outline: none; border-color: var(--ursy-accent); box-shadow: 0 0 0 3px var(--ursy-accent-soft);
}
.ursy-live__toggle {
  height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
  border: 1px solid var(--ursy-border); border-radius: 12px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ursy-muted); cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ursy-live__toggle:hover { border-color: var(--ursy-accent); color: var(--ursy-accent-deep); }
.ursy-live__toggle input { accent-color: var(--ursy-accent); width: 16px; height: 16px; }

/* Genre chips */
.ursy-live__chips { gap: 8px; margin-bottom: 18px; }
.ursy-live__chip {
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--ursy-border); background: #fff; color: var(--ursy-muted);
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .1s ease;
}
.ursy-live__chip:hover { border-color: var(--ursy-accent); color: var(--ursy-accent-deep); }
.ursy-live__chip:active { transform: translateY(1px); }
.ursy-live__chip[aria-pressed="true"] {
  background: linear-gradient(180deg, #21a5d8, var(--ursy-accent-deep));
  border-color: var(--ursy-accent-deep); color: #fff;
  box-shadow: 0 2px 8px rgba(15,143,196,.3);
}

/* Result count line */
.ursy-live__status { font-size: 13px; font-weight: 600; color: var(--ursy-subtle); margin: 2px 0 14px; }

/* Station rows */
.ursy-live__grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.ursy-live-card {
  gap: 13px; padding: 11px 13px; border-radius: 14px;
  border: 1px solid var(--ursy-border-soft); background: #fff;
  box-shadow: 0 1px 2px rgba(27,32,39,.05);
}
.ursy-live-card:hover { border-color: #bcd7e6; box-shadow: 0 6px 18px rgba(27,32,39,.09); }
.ursy-live-card__art { width: 44px; height: 44px; border-radius: 11px; font-size: 15px; }
.ursy-live-card__name { font-size: 14px; font-weight: 650; letter-spacing: -.005em; }
.ursy-live-card__meta { font-size: 12px; color: var(--ursy-subtle); margin-top: 1px; }
.ursy-live-card__fav { width: 32px; height: 32px; font-size: 16px; border-radius: 999px; }
.ursy-live-card__fav:hover { background: var(--ursy-accent-soft); color: var(--ursy-accent-deep); }
.ursy-live-card[aria-current="true"] { background: linear-gradient(180deg, #f4fbfe, #fff); }

/* Show-more button */
.ursy-live__more {
  border-radius: 999px; padding-inline: 1.3rem; font-weight: 600;
  border: 1px solid var(--ursy-border); background: #fff; color: var(--ursy-muted);
}
.ursy-live__more:hover { border-color: var(--ursy-accent); color: var(--ursy-accent-deep); }

/* Now-playing card */
.ursy-live-modal { border-radius: 20px; }
.ursy-live-modal__hero { background: linear-gradient(140deg, #3a4048, #1c2026); }
.ursy-live-modal__title { letter-spacing: -.015em; }
.ursy-live-play {
  background: linear-gradient(180deg, #21a5d8, var(--ursy-accent-deep));
  box-shadow: 0 3px 12px rgba(15,143,196,.32);
}
.ursy-live-play[data-state="playing"] { background: linear-gradient(180deg, #ef5a52, #b3261e); box-shadow: 0 3px 12px rgba(179,38,30,.3); }
.ursy-live-ext { border-radius: 999px; border-color: var(--ursy-border); }
.ursy-live-ext:hover { border-color: var(--ursy-accent); color: var(--ursy-accent-deep); }
.ursy-live-modal__disclaimer { font-size: 11.5px; line-height: 1.5; color: var(--ursy-subtle); }

/* Mobile spacing */
@media (max-width: 560px) {
  .ursy-live__toolbar { margin-top: 1.2rem; gap: 10px; flex-direction: column; align-items: stretch; }
  /* flex-grow from the row layout would stretch fields down the column axis. */
  .ursy-live__field, .ursy-live__search, .ursy-live__toggle { width: 100%; flex: 0 0 auto; }
  .ursy-live__field input[type="search"], .ursy-live__field select { width: 100%; min-width: 0; }
  .ursy-live__toggle { justify-content: flex-start; }
  .ursy-live__grid { grid-template-columns: 1fr; }
  .ursy-app #ursy-live-radio .ursy-section-heading { margin-top: 1.2rem; }
  .ursy-app .ursy-family-primary { gap: .1rem; font-size: .9rem; }
}

/* ===== Final refinements ===== */
/* 16 presets land as two even rows of eight instead of an orphan pair. */
@media (min-width: 700px) {
  .ursy-radio__presets { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
/* Account pill picks up the cool system instead of the old tan. */
.ursy-app .ursy-family-account a {
  background: linear-gradient(180deg, #21a5d8, var(--ursy-accent-deep));
  border-color: var(--ursy-accent-deep); color: #fff;
  border-radius: 999px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(15,143,196,.28);
}
.ursy-app .ursy-family-account a small { color: rgba(255,255,255,.85); font-weight: 600; }
.ursy-app .ursy-family-account > span { color: var(--ursy-subtle); font-weight: 600; }
/* Slightly stronger station metadata for legibility on the light canvas. */
.ursy-live-card__meta { color: #6b7784; }
.ursy-live-card__name { color: var(--ursy-text); }