/*
 * Earth Radio — UI refresh layer.
 *
 * Additive only. This sheet loads AFTER assets/responsive-ui.css and restyles the
 * recovered runtime's existing elements; it adds no markup, no scripts, no network
 * requests, and no !important. Deleting the one <link> in index.html reverts the app
 * to its previous presentation exactly.
 *
 * Selector contract: responsive-ui.css wins with plain `html.er-root ...`; this sheet
 * loads later, so the same specificity is enough to win here in turn.
 *
 * Two runtime facts constrain what CSS alone can do, and both are respected:
 *   1. The station list is a windowed grid. index-*.js positions cards absolutely on a
 *      fixed 168px row stride (rowHeight 168, gap 12, minColumnWidth 210), and
 *      responsive-ui.js measures that stride into --er-row-h / --er-card-h. Card height
 *      is therefore not ours to set; the card is re-laid-out inside the 156px it gets.
 *   2. The page CSP is `font-src 'self'` and `style-src 'self' 'unsafe-inline'`, so no
 *      webfont may be fetched. Type uses platform stacks, keeping the CJK/Arabic
 *      coverage the recovered build already declares in --font.
 */

/* ------------------------------------------------------------------ tokens */

html.er-root {
  /* Aubergine + coral, re-ramped. Light. */
  --er2-bg: #f7f3ed;
  --er2-surface: #ffffff;
  --er2-raised: #ffffff;
  --er2-selected: #f1ebe3;
  --er2-line: #e4dcd2;
  --er2-line-strong: #cfc3b6;
  --er2-ink: #1b1924;
  --er2-muted: #625c6b;
  --er2-faint: #6e6779;
  /* 5.14:1 against the white action ink and 4.65:1 as text on the light
     surfaces; the small labels this paints need the full 4.5:1. */
  --er2-action: #bf4520;
  --er2-action-hover: #a83d1f;
  --er2-action-ink: #ffffff;
  --er2-action-soft: rgba(191, 69, 32, 0.10);
  --er2-action-edge: rgba(191, 69, 32, 0.34);
  --er2-shadow: 0 14px 34px rgba(60, 45, 35, 0.14);
  --er2-shadow-lg: 0 24px 56px rgba(60, 45, 35, 0.20);

  --er2-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --er2-rail: 232px;
  --er2-player: 80px;

  /* Re-point the recovered runtime's and the Atlas layer's own variables at
     the new ramp. --er-coral must follow --er2-action or responsive-ui's
     higher-specificity dark rules repaint the primary action in the old coral. */
  --er-coral: var(--er2-action);
  --er-coral-ink: var(--er2-action-ink);
  --bg: var(--er2-bg);
  --surface: var(--er2-surface);
  --surface-2: var(--er2-selected);
  --surface-3: #e9e1d7;
  --border: var(--er2-line);
  --border-strong: var(--er2-line-strong);
  --text: var(--er2-ink);
  --text-muted: var(--er2-muted);
  --text-faint: var(--er2-faint);
  --accent: var(--er2-action);
  --accent-hover: var(--er2-action-hover);
  --accent-soft: var(--er2-action-soft);
  --accent-contrast: var(--er2-action-ink);
  --ring: 0 0 0 3px rgba(191, 69, 32, 0.34);
  --radius: 12px;
  --radius-sm: 8px;
}

html.er-root[data-theme="dark"] {
  --er2-bg: #0f0e17;
  --er2-surface: #17161f;
  --er2-raised: #1f1d2a;
  --er2-selected: #2a2736;
  --er2-line: #272533;
  --er2-line-strong: #35323f;
  --er2-ink: #f4f1eb;
  --er2-muted: #a49eae;
  --er2-faint: #8b85a0;
  --er2-action: #f2704f;
  --er2-action-hover: #ff8468;
  --er2-action-ink: #17110e;
  --er2-action-soft: rgba(242, 112, 79, 0.13);
  --er2-action-edge: rgba(242, 112, 79, 0.34);
  --er2-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  --er2-shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.58);

  --surface-3: #302d3d;
  --ring: 0 0 0 3px rgba(242, 112, 79, 0.4);
}

html.er-root body {
  background: var(--er2-bg);
  color: var(--er2-ink);
  letter-spacing: 0;
}

html.er-root :focus-visible {
  outline: 2px solid var(--er2-action);
  outline-offset: 2px;
  box-shadow: none;
}

/* ------------------------------------------------------- shared components */

html.er-root .header-btn,
html.er-root .er-icon-btn,
html.er-root .close-btn,
html.er-root .btn-clear {
  border-radius: 8px;
  border: 1px solid var(--er2-line);
  background: transparent;
  color: var(--er2-muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}

html.er-root .header-btn:hover,
html.er-root .er-icon-btn:hover,
html.er-root .close-btn:hover {
  background: var(--er2-selected);
  color: var(--er2-ink);
  border-color: var(--er2-line-strong);
}

html.er-root .header-btn--active,
html.er-root .header-btn[aria-pressed="true"],
html.er-root .header-btn[aria-expanded="true"] {
  background: var(--er2-action-soft);
  border-color: var(--er2-action-edge);
  color: var(--er2-action);
}

html.er-root .btn-primary {
  border-radius: 8px;
  border: 0;
  background: var(--er2-action);
  color: var(--er2-action-ink);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

html.er-root .btn-primary:hover {
  background: var(--er2-action-hover);
}

/* --------------------------------------------------------- the left rail
 * The header keeps every control it already owns — nothing is removed, so nothing
 * becomes unreachable — but it stands up as a 232px rail instead of an 11-button
 * strip, which is what made the old header read as noise. Desktop only; the phone
 * and tablet presentations that responsive-ui.css defines are left untouched.
 */

@media (min-width: 1100px) {
  html.er-root .header {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--er2-rail);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    background: var(--er2-surface);
    border-right: 1px solid var(--er2-line);
    border-bottom: 0;
    z-index: 120;
  }

  /* The skip link sits at z-index 80 in responsive-ui.css; the opaque rail
     (120) would cover it when focused. */
  html.er-root .er-skip {
    z-index: 140;
  }

  html.er-root .header-left {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--er2-line);
  }

  html.er-root .logo {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--er2-ink);
  }

  html.er-root .status-line {
    max-width: 100%;
    font-family: var(--er2-mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--er2-faint);
    background: none;
    border: 0;
    padding: 0;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  html.er-root .er-header-tools {
    order: 2;
    margin-inline-start: 0;
    padding: 12px 12px 0;
    gap: 6px;
  }

  html.er-root .er-header-tools .er-icon-btn[data-er-open-search] {
    flex: 1;
    justify-content: flex-start;
    padding: 0 12px;
    background: var(--er2-bg);
  }

  html.er-root .header-right {
    order: 3;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3px;
    padding: 12px;
    /* responsive-ui's RTL strip rule sets margin-inline-start: auto, which
       stops the cross-axis stretch once this becomes a column. */
    margin-inline: 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.er-root .header-right .header-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 0 12px;
    border-color: transparent;
    font-size: 13.5px;
  }

  /* Reading order in the rail (act, then browse, then house-keeping) is the
     markup order in index.html, so focus follows the visual sequence; CSS
     `order` would detach the two. */
  html.er-root .header-right #theme-toggle,
  html.er-root .header-right #settings-toggle {
    align-self: flex-start;
    justify-content: center;
    border-color: var(--er2-line);
  }

  html.er-root .header-right #theme-toggle {
    margin-top: 10px;
  }

  html.er-root #surprise {
    background: var(--er2-action);
    border-color: var(--er2-action);
    color: var(--er2-action-ink);
    font-weight: 600;
    margin-bottom: 6px;
  }

  html.er-root #surprise:hover {
    background: var(--er2-action-hover);
    border-color: var(--er2-action-hover);
    color: var(--er2-action-ink);
  }

  html.er-root #favorites-toggle .favorites-count {
    margin-left: auto;
    font-family: var(--er2-mono);
    font-size: 11px;
    color: var(--er2-faint);
  }

  /* The utility group sits under a rule, out of the way of the browse actions. */
  html.er-root .header-btn--utility,
  html.er-root #theme-toggle,
  html.er-root #settings-toggle {
    color: var(--er2-faint);
  }

  html.er-root #export-data {
    margin-top: auto;
    border-top: 1px solid var(--er2-line);
    border-radius: 0 0 8px 8px;
    padding-top: 4px;
  }

  /* .kbd-hint stays hidden: its glyph is a hardcoded mac-only ⌘K while the
     runtime also binds Ctrl+K, so re-showing it would mislead on Windows/Linux. */

  /* responsive-ui.css parks these in the overflow menu because a 56px strip has no
     room for them. The rail does, so they come back as first-class rail items and
     the overflow toggle is no longer needed. */
  html.er-root.er-desktop #refresh-stations,
  html.er-root.er-desktop #surprise,
  html.er-root.er-desktop #recent-toggle,
  html.er-root.er-desktop .header-btn--utility {
    display: inline-flex;
  }

  html.er-root.er-desktop #er-overflow-toggle {
    display: none;
  }

  html.er-root .logo {
    background: none;
    border: 0;
    padding: 0;
  }

  html.er-root .er-collapse {
    margin: 0;
  }

  /* The player and chrome geometry below is desktop-only: the phone and tablet
     player contract (safe-area insets, landscape compaction, height: auto) is
     owned by responsive-ui.css and must not be overridden from here. */
  html.er-root {
    --er-player: var(--er2-player);
  }

  html.er-root .main {
    margin-left: var(--er2-rail);
    height: calc(100dvh - var(--er2-player));
  }

  html.er-root .player-bar {
    left: var(--er2-rail);
    height: var(--er2-player);
    gap: 20px;
    padding: 0 20px;
  }

  html.er-root .filter-sidebar {
    z-index: 130;
  }
}

/* Compact card and rail controls only when a fine pointer is present; wide
   touch devices (large tablets, touch laptops) keep the 44px floor that
   responsive-ui.css enforces. */
@media (min-width: 1100px) and (pointer: fine) {
  html.er-root .station-card__play,
  html.er-root .station-card__favorite {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
  }

  html.er-root .header-right .header-btn {
    height: 36px;
    min-height: 36px;
  }

  html.er-root .header-right #theme-toggle,
  html.er-root .header-right #settings-toggle {
    width: 38px;
    min-width: 38px;
  }

  html.er-root #export-data {
    height: 40px;
  }
}

/* Below the rail breakpoint the header stays a strip, just a quieter one. */
@media (max-width: 1099px) {
  html.er-root .header {
    background: var(--er2-surface);
    border-bottom: 1px solid var(--er2-line);
  }
}

html.er-root .er-collapse {
  height: 30px;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--er2-line);
  border-radius: 8px;
  background: transparent;
  color: var(--er2-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

html.er-root .er-collapse:hover {
  border-color: var(--er2-line-strong);
  color: var(--er2-ink);
}

html.er-root .logo {
  background: none;
  border: 0;
  color: var(--er2-ink);
}

html.er-root .logo-mark {
  border-radius: 7px;
}

/* ------------------------------------------------------------ list header */

html.er-root .panel--grid {
  border-right: 1px solid var(--er2-line);
  background: var(--er2-bg);
}

html.er-root .grid-header {
  align-items: baseline;
  padding: 18px 20px 10px;
}

html.er-root .grid-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

html.er-root .grid-subtitle {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--er2-muted);
  max-width: 46ch;
  text-wrap: pretty;
}

html.er-root .grid-count {
  font-family: var(--er2-mono);
  font-size: 12px;
  color: var(--er2-faint);
  border: 1px solid var(--er2-line);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

html.er-root .er-saved-seg {
  margin: 0 20px 12px;
  padding: 3px;
  gap: 4px;
  background: var(--er2-surface);
  border: 1px solid var(--er2-line);
  border-radius: 10px;
}

html.er-root .er-saved-seg button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--er2-muted);
  font-size: 13px;
  font-weight: 500;
}

html.er-root .er-saved-seg button[aria-pressed="true"] {
  background: var(--er2-selected);
  color: var(--er2-ink);
  font-weight: 600;
}

/* One resume banner, then three quiet shortcuts — instead of four equal shouts. */
html.er-root .daily-dashboard {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 20px 12px;
}

html.er-root .daily-action {
  border: 1px solid var(--er2-line);
  border-radius: 10px;
  background: var(--er2-surface);
  padding: 10px 12px;
  gap: 3px;
  min-height: 56px;
  text-align: start;
}

html.er-root .daily-action:hover {
  border-color: var(--er2-line-strong);
  background: var(--er2-selected);
}

html.er-root .daily-action__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--er2-faint);
}

html.er-root .daily-action__title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--er2-ink);
}

html.er-root .daily-action__meta {
  font-size: 11.5px;
  color: var(--er2-faint);
}

html.er-root .daily-dashboard .daily-action--primary {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 14px;
  background: linear-gradient(90deg, var(--er2-action-soft), transparent);
  border: 1px solid var(--er2-action-edge);
  color: var(--er2-ink);
}

html.er-root .daily-dashboard .daily-action--primary .daily-action__eyebrow {
  color: var(--er2-action);
}

html.er-root .daily-dashboard .daily-action--primary .daily-action__title {
  font-size: 15px;
}

html.er-root .daily-dashboard .daily-action--primary .daily-action__meta {
  margin-inline-start: auto;
  text-align: end;
}

html.er-root .collections {
  padding: 0 20px 12px;
  gap: 7px;
}

html.er-root .collection-chip {
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--er2-line);
  border-radius: 999px;
  background: transparent;
  color: var(--er2-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

html.er-root .collection-chip:hover {
  border-color: var(--er2-line-strong);
  color: var(--er2-ink);
}

html.er-root .collection-chip--active {
  background: var(--er2-action-soft);
  border-color: var(--er2-action-edge);
  color: var(--er2-action);
  font-weight: 600;
}

/* -------------------------------------------------------------- the card
 * Height belongs to the virtual grid (--er-card-h, measured from the runtime's
 * 168px stride), so the card is re-laid-out inside it rather than resized.
 */

html.er-root .station-grid .station-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 40px;
  grid-template-rows: 44px minmax(0, 1fr);
  gap: 10px 12px;
  padding: 14px;
  border: 1px solid var(--er2-line);
  border-radius: 12px;
  background: var(--er2-surface);
  box-shadow: none;
  transition: border-color 0.13s ease, background 0.13s ease;
}

html.er-root .station-grid .station-card:hover {
  border-color: var(--er2-line-strong);
  background: var(--er2-raised);
}

/* Match the base selector's .station-grid ancestor or the base border and
   background (0,3,1) outrank this state. */
html.er-root .station-grid .station-card--active {
  border-color: var(--er2-action-edge);
  background: var(--er2-action-soft);
}

html.er-root .station-card--unavailable {
  opacity: 0.56;
}

html.er-root .station-card__media {
  grid-area: 1 / 1 / 2 / 2;
  width: 44px;
  height: 44px;
  margin: 0;
  gap: 0;
}

html.er-root .station-card__monogram,
html.er-root .station-card__logo {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  font-size: 17px;
  font-weight: 600;
  object-fit: cover;
}

/* Regional-indicator flags do not render on Windows and are inconsistent
   elsewhere; the country is already spelled out in the metadata line. */
html.er-root .station-card__flag {
  display: none;
}

/* The runtime positions both buttons absolutely from the card's top-right corner.
   Keep that mechanism, move play to the bottom corner so the two stop colliding. */
html.er-root .station-card__play,
html.er-root .station-card__favorite {
  border-radius: 999px;
  opacity: 1;
}

html.er-root .station-card__favorite {
  top: 12px;
  inset-inline-end: 12px;
  inset-inline-start: auto;
  border: 0;
  background: transparent;
  color: var(--er2-faint);
}

html.er-root .station-card__favorite:hover {
  background: var(--er2-selected);
  color: var(--er2-ink);
}

html.er-root .station-card__favorite--active {
  color: var(--er2-action);
  border-color: transparent;
}

html.er-root .station-card__play {
  top: auto;
  bottom: 12px;
  inset-inline-end: 12px;
  inset-inline-start: auto;
  border: 1px solid var(--er2-line-strong);
  background: transparent;
  color: var(--er2-ink);
}

html.er-root .station-card__play:hover {
  background: var(--er2-action);
  border-color: var(--er2-action);
  color: var(--er2-action-ink);
}

html.er-root .station-card--active .station-card__play {
  background: var(--er2-action);
  border-color: var(--er2-action);
  color: var(--er2-action-ink);
}

html.er-root .station-card__body {
  grid-area: 2 / 1 / 3 / 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  row-gap: 4px;
  column-gap: 8px;
  min-width: 0;
}

html.er-root .station-card__name {
  grid-column: 1 / -1;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--er2-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.er-root .station-card--active .station-card__name {
  color: var(--er2-action);
}

/* One line only: a second metadata line plus the pills row does not fit the
   72px the fixed 156px stride leaves under the name, and the card clips. The
   full metadata lives in Now Playing. */
html.er-root .station-card__meta {
  grid-column: 1 / -1;
  font-family: var(--er2-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--er2-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.er-root .station-card__pills {
  grid-column: 1;
  grid-row: 3;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

html.er-root .station-card__tags {
  grid-column: 2;
  grid-row: 3;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  min-width: 0;
  overflow: hidden;
}

html.er-root .station-card__tags .tag-pill:nth-child(n + 2) {
  display: none;
}

html.er-root .tag-pill {
  border: 1px solid var(--er2-line);
  border-radius: 999px;
  background: transparent;
  color: var(--er2-faint);
  font-size: 11px;
  padding: 1px 8px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

/* ------------------------------------------------------- the signal meter
 * "100 STRONG" was a filled, coloured pill competing with the station name. The
 * glyph becomes a four-bar meter (lit-bar COUNT carries the state, so it does not
 * rest on colour), and the score keeps its text — the runtime's aria-label and the
 * click-through explanation are untouched.
 */

html.er-root .quality-pill {
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--er2-muted);
  font-family: var(--er2-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}

html.er-root .quality-pill:hover {
  color: var(--er2-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.er-root .quality-pill__glyph {
  width: 16px;
  height: 14px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  flex: 0 0 16px;
}

/* Meter colors are baked into the data URIs below because var() cannot reach
   inside url(); a retune must edit every light and dark fill together
   (signal #12876b / #3fcba4, dim #d3c9bc / #35323f, warn #96690a / #c9a227). */
html.er-root .quality-pill--strong .quality-pill__glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cg fill='%2312876b'%3E%3Crect y='10' width='2.6' height='4' rx='1'/%3E%3Crect x='4.4' y='7' width='2.6' height='7' rx='1'/%3E%3Crect x='8.8' y='4' width='2.6' height='10' rx='1'/%3E%3Crect x='13.2' width='2.6' height='14' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}

html.er-root .quality-pill--ok .quality-pill__glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cg fill='%2312876b'%3E%3Crect y='10' width='2.6' height='4' rx='1'/%3E%3Crect x='4.4' y='7' width='2.6' height='7' rx='1'/%3E%3Crect x='8.8' y='4' width='2.6' height='10' rx='1'/%3E%3C/g%3E%3Crect x='13.2' width='2.6' height='14' rx='1' fill='%23d3c9bc'/%3E%3C/svg%3E");
}

html.er-root .quality-pill--weak .quality-pill__glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cg fill='%2396690a'%3E%3Crect y='10' width='2.6' height='4' rx='1'/%3E%3Crect x='4.4' y='7' width='2.6' height='7' rx='1'/%3E%3C/g%3E%3Cg fill='%23d3c9bc'%3E%3Crect x='8.8' y='4' width='2.6' height='10' rx='1'/%3E%3Crect x='13.2' width='2.6' height='14' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}

html.er-root .quality-pill--poor .quality-pill__glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Crect y='10' width='2.6' height='4' rx='1' fill='%236e6779'/%3E%3Cg fill='%23d3c9bc'%3E%3Crect x='4.4' y='7' width='2.6' height='7' rx='1'/%3E%3Crect x='8.8' y='4' width='2.6' height='10' rx='1'/%3E%3Crect x='13.2' width='2.6' height='14' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}

html.er-root[data-theme="dark"] .quality-pill--strong .quality-pill__glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cg fill='%233fcba4'%3E%3Crect y='10' width='2.6' height='4' rx='1'/%3E%3Crect x='4.4' y='7' width='2.6' height='7' rx='1'/%3E%3Crect x='8.8' y='4' width='2.6' height='10' rx='1'/%3E%3Crect x='13.2' width='2.6' height='14' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}

html.er-root[data-theme="dark"] .quality-pill--ok .quality-pill__glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cg fill='%233fcba4'%3E%3Crect y='10' width='2.6' height='4' rx='1'/%3E%3Crect x='4.4' y='7' width='2.6' height='7' rx='1'/%3E%3Crect x='8.8' y='4' width='2.6' height='10' rx='1'/%3E%3C/g%3E%3Crect x='13.2' width='2.6' height='14' rx='1' fill='%2335323f'/%3E%3C/svg%3E");
}

html.er-root[data-theme="dark"] .quality-pill--weak .quality-pill__glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cg fill='%23c9a227'%3E%3Crect y='10' width='2.6' height='4' rx='1'/%3E%3Crect x='4.4' y='7' width='2.6' height='7' rx='1'/%3E%3C/g%3E%3Cg fill='%2335323f'%3E%3Crect x='8.8' y='4' width='2.6' height='10' rx='1'/%3E%3Crect x='13.2' width='2.6' height='14' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}

html.er-root[data-theme="dark"] .quality-pill--poor .quality-pill__glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Crect y='10' width='2.6' height='4' rx='1' fill='%238b85a0'/%3E%3Cg fill='%2335323f'%3E%3Crect x='4.4' y='7' width='2.6' height='7' rx='1'/%3E%3Crect x='8.8' y='4' width='2.6' height='10' rx='1'/%3E%3Crect x='13.2' width='2.6' height='14' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* The "directory"/"federated" claim is already spelled out in the metadata line
   ("… · 2 sources") and in this element's own title attribute. */
html.er-root .source-pill {
  display: none;
}

html.er-root .quality-popover {
  border: 1px solid var(--er2-line-strong);
  border-radius: 12px;
  background: var(--er2-raised);
  box-shadow: var(--er2-shadow-lg);
  padding: 14px;
}

html.er-root .quality-popover__title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--er2-ink);
}

html.er-root .quality-popover__list,
html.er-root .quality-popover__sources {
  font-size: 12.5px;
  color: var(--er2-muted);
}

/* --------------------------------------------------------------- the map */

html.er-root #map {
  background: var(--er2-selected);
}

html.er-root .nowcard {
  width: 268px;
  border: 1px solid var(--er2-line-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--er2-surface) 94%, transparent);
  box-shadow: var(--er2-shadow-lg);
  padding: 14px;
  gap: 12px;
}

html.er-root .nowcard-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--er2-action);
}

html.er-root .nowcard-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html.er-root .nowcard-artist,
html.er-root .nowcard-station {
  font-size: 12.5px;
  color: var(--er2-muted);
}

html.er-root .nowcard-art,
html.er-root .nowcard-art-img,
html.er-root .nowcard-art-mono {
  border-radius: 9px;
}

html.er-root .nowcard-fact-key {
  font-family: var(--er2-mono);
  font-size: 10.5px;
  color: var(--er2-faint);
  letter-spacing: 0;
  text-transform: none;
}

html.er-root .nowcard-fact-val {
  font-size: 12.5px;
  color: var(--er2-ink);
}

/* ------------------------------------------------------------ the player */

html.er-root .player-bar {
  background: var(--er2-surface);
  border-top: 1px solid var(--er2-line);
  box-shadow: none;
}

/* responsive-ui paints these with --er-chrome-ink for its dark chrome bar;
   on the refresh's light surface that is near-white on white. Same selector,
   later sheet. */
html.er-root .player-bar .player-btn:not(.player-btn--large),
html.er-root .player-bar .player-extras,
html.er-root .player-bar .volume-label {
  color: var(--er2-muted);
}

html.er-root .player-info {
  gap: 3px;
  min-width: 0;
}

html.er-root .player-station {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--er2-ink);
}

html.er-root .player-meta {
  font-family: var(--er2-mono);
  font-size: 11.5px;
  color: var(--er2-muted);
}

html.er-root .player-eq i {
  background: var(--er2-action);
  border-radius: 1px;
}

html.er-root .player-controls {
  gap: 14px;
}

html.er-root .player-btn {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--er2-muted);
}

html.er-root .player-btn:hover {
  background: var(--er2-selected);
  color: var(--er2-ink);
}

html.er-root .player-btn--large {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  background: var(--er2-action);
  color: var(--er2-action-ink);
  font-size: 17px;
}

html.er-root .player-btn--large:hover {
  background: var(--er2-action-hover);
  color: var(--er2-action-ink);
}

html.er-root .player-btn--active {
  color: var(--er2-action);
}

html.er-root .volume-slider {
  accent-color: var(--er2-action);
}

html.er-root .sleep-menu {
  border: 1px solid var(--er2-line-strong);
  border-radius: 10px;
  background: var(--er2-raised);
  box-shadow: var(--er2-shadow);
  overflow: hidden;
}

html.er-root .sleep-menu button {
  color: var(--er2-muted);
  font-size: 13px;
}

html.er-root .sleep-menu button:hover {
  background: var(--er2-selected);
  color: var(--er2-ink);
}

/* -------------------------------------------------- search, filters, modals */

html.er-root .search-container,
html.er-root .settings-container,
html.er-root .filter-sidebar {
  border: 1px solid var(--er2-line-strong);
  border-radius: 16px;
  background: var(--er2-surface);
  box-shadow: var(--er2-shadow-lg);
}

html.er-root .filter-sidebar {
  border-radius: 16px 0 0 16px;
}

html.er-root .search-backdrop,
html.er-root .settings-backdrop {
  background: rgba(10, 9, 16, 0.55);
  backdrop-filter: blur(3px);
}

html.er-root .search-input {
  border: 0;
  border-bottom: 1px solid var(--er2-line);
  border-radius: 0;
  background: transparent;
  font-size: 17px;
  color: var(--er2-ink);
}

html.er-root .search-result-item {
  border: 0;
  border-radius: 10px;
  background: transparent;
  gap: 12px;
}

html.er-root .search-result-item--active,
html.er-root .search-result-item:hover {
  background: var(--er2-selected);
}

html.er-root .search-result-item__name {
  font-size: 14px;
  font-weight: 600;
}

html.er-root .search-result-item__meta {
  font-family: var(--er2-mono);
  font-size: 11.5px;
  color: var(--er2-muted);
}

html.er-root .search-result-item__flag {
  display: none;
}

html.er-root .search-footer,
html.er-root .er-country-summary {
  font-family: var(--er2-mono);
  font-size: 11px;
  color: var(--er2-faint);
}

html.er-root kbd {
  font-family: var(--er2-mono);
  font-size: 11px;
  color: var(--er2-faint);
  background: transparent;
  border: 1px solid var(--er2-line-strong);
  border-radius: 5px;
  padding: 1px 5px;
  box-shadow: none;
}

html.er-root .filter-header h2,
html.er-root .settings-header h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html.er-root .filter-section h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--er2-faint);
}

html.er-root .filter-item {
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--er2-muted);
}

html.er-root .filter-item:hover {
  background: var(--er2-selected);
  color: var(--er2-ink);
}

html.er-root .filter-count {
  font-family: var(--er2-mono);
  font-size: 11.5px;
  color: var(--er2-faint);
}

html.er-root .settings-field select,
html.er-root .settings-field input[type="text"] {
  border: 1px solid var(--er2-line);
  border-radius: 8px;
  background: var(--er2-bg);
  color: var(--er2-ink);
}

html.er-root input[type="range"] {
  accent-color: var(--er2-action);
}

html.er-root input[type="checkbox"] {
  accent-color: var(--er2-action);
}

/* --------------------------------------------------- empty state and toasts */

html.er-root .empty-state {
  gap: 12px;
  color: var(--er2-muted);
  font-size: 13.5px;
  text-wrap: pretty;
}

html.er-root #toast-container > * {
  border: 1px solid var(--er2-line-strong);
  border-radius: 12px;
  background: var(--er2-raised);
  color: var(--er2-ink);
  box-shadow: var(--er2-shadow);
  font-size: 13.5px;
}

/* ------------------------------------------------------- mobile presentation */

@media (max-width: 820px) {
  html.er-root .er-mobile-nav {
    background: var(--er2-surface);
    border-top: 1px solid var(--er2-line);
  }

  html.er-root .er-mobile-nav button {
    color: var(--er2-faint);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
  }

  /* responsive-ui.css paints the active tab as a solid coral block, which puts
     coral text on a coral field. A top rule reads at any contrast. */
  html.er-root .er-mobile-nav button.is-active,
  html.er-root[data-theme] .er-mobile-nav button.is-active,
  html.er-root .er-mobile-nav button[aria-current="page"] {
    color: var(--er2-action);
    background: transparent;
    border-top: 3px solid var(--er2-action);
    border-radius: 0;
  }

  html.er-root .daily-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.er-root .station-grid .station-card {
    grid-template-columns: 46px minmax(0, 1fr) 44px;
    grid-template-rows: 46px minmax(0, 1fr);
  }

  html.er-root .station-card__monogram,
  html.er-root .station-card__logo {
    width: 46px;
    height: 46px;
    border-radius: 10px;
  }

  html.er-root .er-nowplaying {
    background: var(--er2-bg);
  }

  html.er-root .er-nowplaying-art {
    border-radius: 22px;
  }

  html.er-root .er-nowplaying-actions button {
    border: 1px solid var(--er2-line);
    border-radius: 12px;
    background: var(--er2-surface);
    color: var(--er2-muted);
    font-size: 13px;
  }

  html.er-root .er-nowplaying-actions button[data-er-nowplaying-play] {
    background: var(--er2-action);
    border-color: var(--er2-action);
    color: var(--er2-action-ink);
    font-weight: 600;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.er-root .station-grid .station-card,
  html.er-root .header-btn,
  html.er-root .er-icon-btn {
    transition: none;
  }
}