/* Extras: settings, the all-sets catalog, patch notes, the card inspector,
   the price chart dialog, the toast, the footer and the radio dock.
   Loads after css/theme.css; see DESIGN.md for the system. Everything here is
   ink, hairlines and space: the colour comes from the set art and the page
   tint, gold only marks money and green only marks a live set. */

/* ---- Settings ------------------------------------------------------------
   A spec sheet on the open page. Each group is a title and one line, then its
   rows: label and note on the left, the control on the right. On a laptop the
   group title sits in its own column beside the rows. */
#settings-body { max-width: 960px; }

#view-settings .set-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: -6px 0 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
#view-settings .set-bar p { margin: 0; color: var(--muted); font-size: 14px; }
#view-settings .set-bar .ghost { min-width: 0; min-height: 40px; padding: 8px 16px; font-size: 14px; }
#view-settings .set-bar .ghost:disabled {
  border-color: var(--line);
  background: transparent;
  color: var(--faint);
  cursor: default;
}

#view-settings .set-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
#view-settings .set-group-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
#view-settings .set-group-head p {
  margin: 4px 0 0;
  max-width: 40ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
#view-settings .set-list { display: block; margin-top: 14px; }

#view-settings .set-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  cursor: default;
}
#view-settings .set-row:last-child { padding-bottom: 16px; }
#view-settings .toggle-row { cursor: pointer; }
#view-settings .set-copy { display: block; min-width: 0; }
#view-settings .set-copy b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
#view-settings .set-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* The pick-one rows: theme.css draws the track and the raised pill. */
#view-settings .seg { flex: none; }
#view-settings .seg-btn { min-height: 38px; padding: 6px 16px; font-size: 14px; white-space: nowrap; }

/* A thumb-sized switch. The checkbox stays for keyboard and screen readers. */
#view-settings .switch { width: 50px; height: 30px; }
#view-settings .switch::after {
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  transition: transform 0.28s var(--ease-spring), background 0.18s ease;
}
#view-settings .toggle-row input:checked ~ .switch::after { transform: translateX(20px); }
#view-settings .toggle-row:hover .switch { background: color-mix(in oklab, var(--surface-3) 70%, white 8%); }
#view-settings .toggle-row:hover input:checked ~ .switch { background: var(--ink); }

#view-settings .danger-btn {
  min-width: 0;
  border-color: rgba(255, 107, 107, 0.55);
  background: transparent;
  color: var(--bad);
}
#view-settings .danger-btn:hover:not(:disabled) { border-color: var(--bad); background: transparent; }

@media (max-width: 620px) {
  /* A pick-one control takes the full row under its label on a phone. */
  #view-settings .set-row:not(.toggle-row) { grid-template-columns: minmax(0, 1fr); }
  #view-settings .set-row:not(.toggle-row) .seg { display: flex; width: 100%; }
  #view-settings .set-row:not(.toggle-row) .seg-btn { flex: 1 1 0; min-height: 40px; padding-inline: 8px; }
  #view-settings .set-danger .danger-btn { justify-self: start; }
}
@media (min-width: 860px) {
  #view-settings .set-groups { gap: 0; }
  #view-settings .set-group {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 56px;
    padding: 30px 0 14px;
    border-top: 1px solid var(--line-2);
  }
  #view-settings .set-group-head h3 { font-size: 24px; }
  #view-settings .set-list { margin-top: 0; }
  #view-settings .set-list > .set-row:first-child { padding-top: 2px; border-top: 0; }
}

/* ---- All sets ------------------------------------------------------------
   Every English set by era, as the shop's pack wall: each set's wrapper on the
   shelf board with its paper label under it (css/counter.css). Live sets are
   links to Packs; a set still on the way stands dark. Sets with no boosters
   (promos, kits) stand as their logo. */
#view-catalog .catalog-summary {
  margin: -12px 0 40px;
  color: var(--ink-2);
  font-size: 15px;
}
#view-catalog .catalog-summary b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

/* Off-screen eras are skipped by the browser until they are near the window. */
#view-catalog .era-block { margin: 0 0 64px; content-visibility: auto; contain-intrinsic-size: auto 560px; }
#view-catalog .era-block:last-child { margin-bottom: 8px; }
#view-catalog .era-head { display: block; margin: 0 0 24px; }
/* Section titles under the page title, not signs: 24 to 30px. */
#view-catalog .era-head h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  font-variation-settings: "opsz" 48;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: normal;
  text-wrap: balance;
}
#view-catalog .era-head p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}
#view-catalog .era-span,
#view-catalog .era-count {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#view-catalog .era-span { color: var(--ink-2); }

#view-catalog .catalog-wall { --wall-cols: 3; --wall-pack-h: 124px; row-gap: 34px; }
#view-catalog .catalog-slot { color: inherit; text-decoration: none; }
#view-catalog a.catalog-slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
#view-catalog a.catalog-slot:hover .wall-pack img { filter: brightness(1.08); }
#view-catalog a.catalog-slot:hover .shelf-name { text-decoration: underline; text-underline-offset: 2px; }
#view-catalog .catalog-slot .wall-pack { cursor: inherit; }
#view-catalog .shelf-date {
  margin-top: 1px;
  color: var(--print-2);
  font-size: 11.5px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
#view-catalog .shelf-label { min-height: 70px; }
/* No boosters: the logo stands on the board where the wrapper would. */
#view-catalog .catalog-sign { display: grid; align-self: stretch; align-items: end; justify-items: center; padding: 0 8px 6px; }
#view-catalog .catalog-sign::before { content: none; }
#view-catalog .catalog-sign img { width: auto; height: auto; max-width: 100%; max-height: 74px; object-fit: contain; }
/* The back catalogue waits in the dark. */
#view-catalog .is-soon .wall-pack img { opacity: 0.34; filter: grayscale(1); }
#view-catalog .is-soon .shelf-label { opacity: 0.72; }

@media (min-width: 720px) {
  #view-catalog .catalog-wall { --wall-cols: 4; --wall-pack-h: 140px; row-gap: 40px; }
}
@media (min-width: 900px) {
  #view-catalog .catalog-wall { --wall-cols: 6; --wall-pack-h: 150px; }
  #view-catalog .era-block { margin-bottom: 80px; }
}
@media (min-width: 1100px) {
  #view-catalog .catalog-wall { --wall-cols: 8; --wall-pack-h: 148px; }
}

/* ---- Card inspector ------------------------------------------------------
   A plain dialog over whatever opened it: wall-dark, a line-2 hairline, a
   6px corner. The card large on the left (on top on a phone), the facts
   beside it as rows between hairlines, then the price chart and what you
   can do with your copies. theme.css turns the card in as it opens. */
#inspect {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: rgba(10, 8, 6, 0.86);
}
#inspect .inspect-stage {
  position: relative;
  display: block;
  flex: none;
  width: min(1000px, 100%);
  min-height: 0;
  height: auto;
  margin: auto;
  padding: 32px 36px 32px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--wall-dark);
  box-shadow: var(--shadow);
}
#inspect .inspect-close,
#price-dialog .inspect-close {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--wall-dark);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
#inspect .inspect-close:hover,
#price-dialog .inspect-close:hover { background: var(--wall-dark); border-color: var(--ink-2); }
#inspect .inspect-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
}
/* The facts come in as the card turns; only the card moves. */
#inspect:not(.hidden) .inspect-info { animation: none; }

#inspect .inspect-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  gap: 28px;
  text-align: left;
}
#inspect .inspect-art {
  width: min(100%, 380px, calc((100svh - 150px) * 0.716));
  max-width: none;
  margin: 0 auto;
}
#inspect .inspect-info { width: 100%; max-width: 520px; }

#inspect .inspect-set {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding-right: 96px; /* clear of Close */
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 560;
}
/* The set line is a link to the set's page: plain text, an underline and a small chevron on hover or focus. */
#inspect .inspect-set-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#inspect .inspect-set-link::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: -2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
#inspect .inspect-set-link:hover { color: var(--ink); }
#inspect .inspect-set-link:hover span,
#inspect .inspect-set-link:focus-visible span {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
#inspect .inspect-set-link:hover::after,
#inspect .inspect-set-link:focus-visible::after { opacity: 1; transform: translateX(2px) rotate(45deg); }
#inspect .inspect-set-symbol {
  flex: none;
  width: auto;
  height: 18px;
  max-width: 32px;
  object-fit: contain;
}
#inspect .inspect-info h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  font-variation-settings: "opsz" 48;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
#inspect .inspect-rows { margin: 0; border-bottom: 1px solid var(--line); }
#inspect .inspect-rows > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
#inspect .inspect-rows dt { color: var(--ink-2); }
#inspect .inspect-rows dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
#inspect .inspect-rows .pip { margin-right: 1px; }
#inspect .inspect-link {
  display: block;
  min-height: 28px;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 560;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
}
#inspect .inspect-link:hover,
#inspect .inspect-link:focus-visible { text-decoration-color: currentColor; }
/* The chart sits on the dialog itself: no box of its own. */
#inspect #inspect-chart {
  margin: 22px 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

#inspect .pc-sell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 0;
}
#inspect .pc-own { color: var(--ink-2); font-size: 14px; }
#inspect .pc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#inspect .pc-actions .solid,
#inspect .pc-actions .ghost { min-width: 0; padding: 10px 16px; font-size: 14px; }
#inspect .pc-sell-value { font-variant-numeric: tabular-nums; }

/* A phone: the dialog is the whole screen, Close stays in reach at the top. */
@media (max-width: 720px) {
  #inspect { justify-content: flex-start; padding: 0; background: var(--wall-dark); }
  #inspect .inspect-stage {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: max(12px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #inspect .inspect-close {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    display: block;
    margin: 0 0 12px auto;
  }
  #inspect .inspect-set { padding-right: 0; }
  #inspect .inspect-rows > div { grid-template-columns: 104px minmax(0, 1fr); }
}
@media (max-width: 859px) {
  #inspect .pc-sell { flex-direction: column; align-items: stretch; }
  #inspect .pc-actions > * { flex: 1 1 0; }
}
@media (min-width: 860px) {
  #inspect .inspect-grid {
    grid-template-columns: auto minmax(300px, 420px);
    justify-content: center;
    align-items: start;
    column-gap: clamp(36px, 4vw, 60px);
  }
  #inspect .inspect-art { width: min(440px, calc((100svh - 140px) * 0.716)); }
  #inspect .inspect-info { max-width: none; padding-top: 4px; }
}

/* ---- Price history chart -------------------------------------------------
   The inspector's chart and the pack/box dialog. js/pricechart.js draws the
   SVG; the line is ink, the wash under it gold when the price is up and coral
   when it is down. The home net-worth chart shares the .pc-* classes and is
   left to the home sheet, so everything here is scoped to .price-card. */
.price-card {
  --pc-key: var(--gold);
  margin: 0;
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--well);
}
.price-card .pc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
}
.price-card .pc-now { gap: 1px; }
.price-card .pc-label {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.price-card .pc-now b {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-card .pc-delta { color: var(--muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-card .pc-delta.up { color: var(--gold-2); }
.price-card .pc-delta.down { color: var(--rip-hover); }
.price-card .pc-ranges { flex: none; }
.price-card .pc-range { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.price-card .pc-svg.up { --pc-key: var(--gold); }
.price-card .pc-svg.down { --pc-key: var(--rip); }
.price-card .pc-svg.flat { --pc-key: var(--ink-2); }
.price-card .pc-line { stroke: var(--ink); stroke-width: 2; filter: none; }
.price-card .pc-stop-a { stop-color: var(--pc-key); stop-opacity: 0.26; }
.price-card .pc-stop-b { stop-color: var(--pc-key); stop-opacity: 0; }
.price-card .pc-cross { stroke: rgba(255, 255, 255, 0.28); stroke-dasharray: 2 4; }
.price-card .pc-marker { fill: var(--ink); stroke: var(--black); stroke-width: 2.5; }
.price-card .pc-tip {
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: color-mix(in oklab, var(--bg) 86%, white);
  box-shadow: var(--shadow);
}
.price-card .pc-tip b { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.price-card .pc-tip span { color: var(--muted); font-size: 12px; }
.price-card .pc-foot {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.price-card .pc-band { color: var(--faint); }
.price-card .pc-empty { color: var(--muted); font-size: 14px; }
.price-card .pc-dot { background: var(--gold); box-shadow: none; }
.price-card .pc-loading { color: var(--muted); font-size: 14px; }

@media (max-width: 620px) {
  .price-card .pc-now b { font-size: 28px; }
}

/* ---- The chart dialog ----------------------------------------------------
   The dialog is the plain wall; the chart sits on a stage sunk into it. */
#price-dialog {
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: var(--bg);
}
#price-dialog .price-stage {
  position: relative;
  width: min(720px, 100%);
  margin: auto;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--well);
}
#price-dialog .inspect-close { position: absolute; top: 16px; right: 16px; min-height: 44px; padding: 6px 14px; }
#price-dialog .price-head { gap: 14px; margin: 0 0 22px; padding-right: 84px; }
#price-dialog .price-art { width: 52px; }
#price-dialog .price-art img { max-height: 92px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); }
#price-dialog .price-head .kicker { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
#price-dialog .price-head h2 {
  margin: 0;
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  line-height: 1;
  letter-spacing: -0.03em;
}
#price-dialog .price-card { padding: 0; border: 0; border-radius: 0; background: none; }
#price-dialog .price-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
@media (min-width: 621px) {
  #price-dialog .price-stage { padding: 28px 28px 24px; }
  #price-dialog .inspect-close { top: 22px; right: 22px; }
  #price-dialog .price-art { width: 64px; }
  #price-dialog .price-art img { max-height: 112px; }
}

/* ---- Toast ---------------------------------------------------------------
   The system's floating surface, lifted above the phone tab bar by theme.css. */
.toast {
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: var(--r);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  transition: opacity 0.25s ease, transform 0.35s var(--ease-out);
}
/* On a phone the docks sit in both bottom corners; the toast floats above
   them rather than between them. */
@media (max-width: 720px) {
  .toast { bottom: calc(88px + var(--tabbar)); }
}

/* ---- Footer --------------------------------------------------------------
   Two quiet lines and the patch notes link, on the same column as the page. */
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px 40px;
  padding-inline: max(var(--gutter), calc((100% - 1200px) / 2));
  padding-top: 24px;
  padding-bottom: calc(32px + var(--tabbar));
  background: var(--wall-dark);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}
.site-footer > span { max-width: 78ch; }
.site-footer > span + span { color: var(--muted); }
.site-footer a {
  justify-self: start;
  margin-top: 8px;
  color: var(--ink);
  font-weight: 560;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
}
.site-footer a:hover { color: var(--ink); text-decoration-color: var(--ink); }
@media (max-width: 720px) {
  .site-footer { padding-inline: 16px; }
}
@media (min-width: 860px) {
  .site-footer { grid-template-columns: minmax(0, 1fr) auto; }
  .site-footer > span { grid-column: 1; }
  .site-footer a { grid-column: 2; grid-row: 1; margin-top: 0; }
}

/* ---- Radio, in the top bar ------------------------------------------------
   js/radio.js mounts the player into the header's .header-tools: a plain
   radio icon (with three small bars while a track plays), and the player
   drops down under it like the More menu. On a phone the icon lives in the
   More sheet and the player rises from the tab bar instead. js/radio.js
   writes the play glyph as text, so the icons are drawn here. The whole
   player is styled here; app.css no longer has a radio block. */
.radio { position: relative; }
.radio-peek {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2);
}
.radio-peek:hover, .radio.is-open .radio-peek { color: var(--ink); }
.radio-peek svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.radio-peek-eq { display: none; position: absolute; right: 5px; top: 8px; align-items: flex-end; gap: 1.5px; height: 9px; }
.radio.is-playing .radio-peek-eq { display: flex; }
.radio-peek-eq i { display: block; width: 2px; height: 9px; background: var(--ink); transform-origin: 50% 100%; animation: radio-eq 0.7s ease-in-out infinite; }
.radio-peek-eq i:nth-child(2) { animation-delay: -0.2s; }
.radio-peek-eq i:nth-child(3) { animation-delay: -0.45s; }
@keyframes radio-eq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
body.no-motion .radio-peek-eq i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .radio-peek-eq i { animation: none; }
}

.radio-panel {
  display: none; position: absolute; top: calc(100% + 11px); right: 0; z-index: 36;
  width: 316px; max-width: calc(100vw - 32px); padding: 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--wall-dark); box-shadow: var(--shadow);
}
.radio.is-open .radio-panel { display: block; }
.radio-now {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px;
  gap: 12px; align-items: center; margin-bottom: 12px;
}
.radio-cover { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface); }
.radio-copy { min-width: 0; }
.radio-kicker { margin: 0 0 1px; color: var(--muted); font-size: 13px; }
.radio-copy b { display: block; font-size: 15px; font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-copy small { display: block; margin-top: 1px; color: var(--muted); font-size: 13px; }
.radio-hide {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); font-size: 18px; line-height: 1;
}
.radio-hide:hover { color: var(--ink); }

.radio-progress {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px; align-items: center;
  margin-bottom: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
}
.radio-progress span:last-child { text-align: right; }
.radio-seek, .radio-vol input {
  width: 100%; height: 28px; margin: 0; accent-color: var(--ink); cursor: pointer; touch-action: none;
}

.radio-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.radio-controls button {
  --icon: none;
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent;
  color: var(--ink); font-size: 0;
}
.radio-controls button:hover { border-color: var(--ink-2); }
.radio-controls button::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
#radio-prev { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 2.5h2v11h-2zM14 2.6v10.8L5.6 8z'/%3E%3C/svg%3E"); }
#radio-next { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.5 2.5h2v11h-2zM2 2.6v10.8L10.4 8z'/%3E%3C/svg%3E"); }
.radio-controls .radio-play {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.2v11.6L14 8z'/%3E%3C/svg%3E");
  width: 52px; border-color: var(--ink); background: var(--ink); color: var(--black);
}
.radio-controls .radio-play:hover { border-color: var(--ink); background: var(--ink-2); }
.radio.is-playing .radio-play {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 2.5h3.2v11H3.5zM9.3 2.5h3.2v11H9.3z'/%3E%3C/svg%3E");
}
.radio-controls .radio-play::before { width: 18px; height: 18px; }
/* A triangle's optical centre sits right of its box centre. */
.radio:not(.is-playing) .radio-play::before { transform: translateX(1.5px); }
.radio-vol { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; margin-left: 4px; }
.radio-vol > span {
  flex: none; width: 16px; height: 16px; font-size: 0; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.8h3l3.8-3.3v11l-3.8-3.3h-3z'/%3E%3Cpath d='M10.6 5.2a3.8 3.8 0 0 1 0 5.6M12.6 3.4a6.4 6.4 0 0 1 0 9.2' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.8h3l3.8-3.3v11l-3.8-3.3h-3z'/%3E%3Cpath d='M10.6 5.2a3.8 3.8 0 0 1 0 5.6M12.6 3.4a6.4 6.4 0 0 1 0 9.2' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.radio-vol input { flex: 1; }

.radio-list {
  display: flex; flex-direction: column; gap: 0;
  max-height: 224px; overflow: auto; overscroll-behavior: contain;
  margin: 0 -6px; padding: 8px 4px 0; border-top: 1px solid var(--line);
  scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent;
}
.radio-track {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 48px; padding: 6px 8px 6px 6px;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); text-align: left;
}
.radio-track img { width: 36px; height: 36px; flex: none; border-radius: 4px; object-fit: cover; }
.radio-track span { display: flex; flex-direction: column; min-width: 0; }
.radio-track b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radio-track small { color: var(--muted); font-size: 12px; }
.radio-track:hover { background: var(--surface); }
.radio-track.on { background: var(--surface-2); }
.radio-track.on b { color: var(--ink); }

/* A full-screen dialog covers the header anyway; keep the player out of it. */
body:has(#overlay:not(.hidden)) .radio,
body:has(#inspect:not(.hidden)) .radio,
body:has(#price-dialog:not(.hidden)) .radio { display: none; }

@media (max-width: 720px) {
  .radio-panel {
    position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(var(--tabbar) + 6px);
    width: auto; max-width: none; max-height: calc(100dvh - var(--tabbar) - 76px); overflow-y: auto;
  }
}

/* ---- No script, boot --------------------------------------------------- */
.noscript-note {
  margin: 24px var(--gutter);
  max-width: 640px;
  padding: 16px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.noscript-note b { color: var(--ink); font-weight: 650; }

/* ---- Motion off ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #view-settings .switch::after { transition: none; }
  .toast { transition: opacity 0.2s ease; }
}
body.no-motion #view-settings .switch::after { transition: none; }

/* ---- Inspector: graded copies of this card (RIP Grading) ---- */
#inspect .pc-grade-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
#inspect .pc-graded { display: grid; gap: 10px; margin-top: 14px; }
#inspect .pc-slabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}
#inspect .pc-slab { display: block; text-decoration: none; color: inherit; }
#inspect .pc-slab:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }