/* Selph Family Radio, Modern look: a warm grey case, one black digital display (the frequency and
   the song), a dotted speaker grille with the controls, and rounded preset buttons, with one orange
   accent. Digital, so no dial, needle or knobs: the number scans while tuning in, volume is − / +.
   Everything here only applies while <html data-look="modern"> or "modern-dark" (look.js / radio.js);
   radio.css is the Vintage look and the shared layout. Sizes mostly come from radio.css (including the
   portrait calendar block), so this file sets colours, shapes and type, and only the sizes it must. */

:root[data-look^="modern"] {
  --m-bg: #d6d2cb;
  --m-body: #eeebe6;
  --m-edge: #d8d3cb;
  --m-ink: #17181a;
  --m-sub: #55585f;
  --m-panel: #141517;
  --m-p-ink: #f3f1ed;
  --m-p-sub: #a4a8af;
  --m-tick: #5e6269;
  --m-key: #faf9f6;
  --m-field: #ffffff;
  --m-on: #17181a;
  --m-on-ink: #faf9f6;
  --m-on-sub: #b9bcc2;
  --m-dot: rgba(23, 24, 26, .22);
  --m-grille: #e4e0da;
  --m-ring: #cfcac2;
  --m-accent: #ff5a1f;
  --m-accent-soft: rgba(255, 90, 31, .22);
  --m-shadow: 0 30px 60px rgba(40, 32, 24, .18), inset 0 2px 0 rgba(255, 255, 255, .7);
  --f-m: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mh: "Space Grotesk", "Inter", system-ui, sans-serif;
  --dial-glow: var(--m-accent); /* focus rings */
  color-scheme: light;
}
:root[data-look="modern-dark"] {
  --m-bg: #0b0b0c;
  --m-body: #1c1d20;
  --m-edge: #2c2e33;
  --m-ink: #f3f1ed;
  --m-sub: #a4a8af;
  --m-panel: #0e0f10;
  --m-key: #2a2c31;
  --m-field: #17181a;
  --m-on: #f3f1ed;
  --m-on-ink: #17181a;
  --m-on-sub: #55585f;
  --m-dot: rgba(255, 255, 255, .13);
  --m-grille: #232428;
  --m-ring: #3a3d43;
  --m-shadow: 0 30px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  color-scheme: dark;
}

:root[data-look^="modern"] body { background: var(--m-bg); color: var(--m-ink); font-family: var(--f-m); }

/* ---------- Case and name ---------- */
:root[data-look^="modern"] .cabinet {
  background: var(--m-body); border: 1px solid var(--m-edge); border-radius: 32px; box-shadow: var(--m-shadow);
}
:root[data-look^="modern"] .nameplate {
  justify-self: stretch; display: flex; align-items: center; gap: 12px; text-align: left;
  font-family: var(--f-mh); font-weight: 600; letter-spacing: -.01em; color: var(--m-ink); text-shadow: none;
}
:root[data-look^="modern"] .nameplate::before {
  content: ""; flex: none; width: .4em; height: .4em; border-radius: 50%; background: var(--m-accent);
}
:root[data-look^="modern"] .nameplate small { margin: 0 0 0 auto; font-size: 14px; letter-spacing: 0; }
:root[data-look^="modern"] .room {
  font-family: var(--f-m); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--m-ink);
  background: var(--m-key); border: 1px solid var(--m-edge); border-radius: 999px; padding: 0 18px; min-height: 44px;
}
:root[data-look^="modern"] .room::after { content: none; }
:root[data-look^="modern"] .room:hover { border-color: var(--m-sub); }

/* ---------- The digital display: the frequency and the song ---------- */
:root[data-look^="modern"] .display {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  background: var(--m-panel); color: var(--m-p-ink); border-radius: 22px; padding: 22px 26px 22px;
}
:root[data-look^="modern"] .display .dial { display: none; } /* digital: no dial or needle */
:root[data-look^="modern"] .freq {
  display: block; font-family: var(--f-mh); font-weight: 500; font-size: 64px; line-height: 1;
  letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 3.6em;
}
:root[data-look^="modern"] .freq small {
  font-family: var(--f-m); font-weight: 600; font-size: .27em; letter-spacing: .12em; color: var(--m-p-sub); margin-left: .4em;
}

/* The song (moved here from the grille by radio.js) */
:root[data-look^="modern"] .readout {
  grid-column: 1 / -1; width: auto; background: transparent; border-radius: 0; text-align: left;
  padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .09);
}
:root[data-look^="modern"] .now { gap: 20px; }
:root[data-look^="modern"] .art { border-radius: 12px; box-shadow: none; background: #26282c; width: 96px; height: 96px; }
:root[data-look^="modern"] .readout .lbl { font-family: var(--f-m); font-weight: 600; letter-spacing: .14em; color: var(--m-p-sub); }
:root[data-look^="modern"] .readout .stn { font-family: var(--f-mh); font-weight: 600; letter-spacing: -.01em; }
:root[data-look^="modern"] .readout .sub { font-family: var(--f-m); color: var(--m-p-sub); font-size: 15px; }
:root[data-look^="modern"] .wave { height: 40px; margin-top: 12px; }
:root[data-look^="modern"] .wave[data-mode="bars"] { height: 56px; }

/* ---------- Speaker grille: dots, the On air light, Output and the visual switch ---------- */
:root[data-look^="modern"] .grille {
  border: 0; border-radius: 22px; box-shadow: none; place-items: end center; padding: 18px;
  background-color: var(--m-grille);
  background-image: radial-gradient(circle, var(--m-dot) 1.5px, transparent 1.8px);
  background-size: 11px 11px;
}
:root[data-look^="modern"] .eye {
  width: auto; height: auto; border: 0; border-radius: 999px; padding: 6px 12px 6px 28px;
  background: var(--m-body); box-shadow: none; animation: none; filter: none;
  font: 600 11px/1.2 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--m-sub);
}
:root[data-look^="modern"] .on .eye,
:root[data-look^="modern"] .on.muted .eye { background: var(--m-body); box-shadow: none; animation: none; filter: none; } /* undo Vintage's glow only */
:root[data-look^="modern"] .eye::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--m-ring);
}
:root[data-look^="modern"] .eye::after { content: "Off"; }
:root[data-look^="modern"] .on .eye { color: var(--m-ink); }
:root[data-look^="modern"] .on .eye::before { background: var(--m-accent); box-shadow: 0 0 0 4px var(--m-accent-soft); }
:root[data-look^="modern"] .on .eye::after { content: "On air"; }
:root[data-look^="modern"] .on.muted .eye::before { background: var(--m-sub); box-shadow: none; }
:root[data-look^="modern"] .on.muted .eye::after { content: "Muted"; }

:root[data-look^="modern"] .output {
  min-height: 44px; padding: 0 18px; gap: 8px; border: 1px solid var(--m-edge); border-radius: 999px;
  background: var(--m-key); color: var(--m-ink); box-shadow: none; font-family: var(--f-m);
}
:root[data-look^="modern"] .output.vis { padding: 0 18px 0 14px; }
:root[data-look^="modern"] .output .otxt { font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: none; }
:root[data-look^="modern"] .vicon { color: var(--m-ink); }

/* ---------- Volume (− 6 +) and Mute, in the grille with Output and the visual switch ---------- */
:root[data-look^="modern"] .switches { align-items: center; }
:root[data-look^="modern"] .vstep {
  display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--m-edge); border-radius: 999px;
  background: var(--m-key); color: var(--m-ink); font-family: var(--f-m);
}
:root[data-look^="modern"] .vstep button {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  font: 500 22px/1 var(--f-m);
}
:root[data-look^="modern"] .vstep button:disabled { opacity: .35; cursor: default; }
:root[data-look^="modern"] .vstep button:focus-visible { outline: 3px solid var(--m-accent); outline-offset: -3px; }
:root[data-look^="modern"] .vstep span { min-width: 2ch; text-align: center; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- Knobs (hidden in Modern; kept styled in case) and Mute ---------- */
:root[data-look^="modern"] .knob {
  background: var(--m-key); border: 1px solid var(--m-ring);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .14), inset 0 -3px 0 rgba(0, 0, 0, .05);
}
:root[data-look^="modern"] .knob::before {
  content: ""; position: absolute; inset: 15%; border-radius: 50%; border: 1px solid var(--m-ring);
}
:root[data-look^="modern"] .knob::after {
  top: 10%; width: 9%; height: 9%; margin-left: -4.5%; border-radius: 50%; background: var(--m-accent);
}
:root[data-look^="modern"] #tune::after { background: var(--m-ink); }
:root[data-look^="modern"] .knob-lbl { font-family: var(--f-m); font-weight: 600; letter-spacing: .14em; color: var(--m-sub); }
:root[data-look^="modern"] .vol-val { font-family: var(--f-m); color: var(--m-sub); }
:root[data-look^="modern"] .mute {
  border: 1px solid var(--m-edge); background: transparent; color: var(--m-ink); box-shadow: none;
  font-family: var(--f-m); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: none;
  padding: 8px 14px 8px 10px;
}
:root[data-look^="modern"] .mute[aria-pressed="true"] { background: var(--m-accent); border-color: var(--m-accent); color: #17181a; box-shadow: none; }
:root[data-look^="modern"] .muted #volVal { color: var(--m-accent); }
:root[data-look^="modern"] .no-knobs .switches .mute { min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--m-key); font-size: 13px; color: var(--m-ink); }
:root[data-look^="modern"] .no-knobs .switches .mute[aria-pressed="true"] { background: var(--m-accent); }

/* ---------- Presets ---------- */
:root[data-look^="modern"] .keys { background: transparent; box-shadow: none; padding: 0; gap: 12px; }
:root[data-look^="modern"] .key {
  position: relative; justify-items: start; text-align: left; padding: 12px 16px;
  border: 1px solid var(--m-edge); border-radius: 16px; box-shadow: none; transform: none;
  background: var(--m-key); color: var(--m-ink);
  font-family: var(--f-mh); font-weight: 600; letter-spacing: 0; text-transform: none;
  transition: transform .08s, background .2s;
}
:root[data-look^="modern"] .key span { font-family: var(--f-m); letter-spacing: 0; color: var(--m-sub); }
:root[data-look^="modern"] .key:active { transform: scale(.98); box-shadow: none; }
:root[data-look^="modern"] .key[aria-pressed="true"] { background: var(--m-on); color: var(--m-on-ink); border-color: var(--m-on); transform: none; box-shadow: none; }
:root[data-look^="modern"] .key[aria-pressed="true"] span { color: var(--m-on-sub); }
:root[data-look^="modern"] .key[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--m-accent);
}
:root[data-look^="modern"] .key.off,
:root[data-look^="modern"] .key.off[aria-pressed="true"] { background: transparent; color: var(--m-ink); border: 1.5px dashed var(--m-ring); box-shadow: none; }
:root[data-look^="modern"] .key.off span { color: var(--m-sub); }
:root[data-look^="modern"] .key.off[aria-pressed="true"]::after { content: none; }

/* ---------- The This screen panel ---------- */
:root[data-look^="modern"] .rename {
  background: var(--m-key); color: var(--m-ink); border: 1px solid var(--m-edge); border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18); font-family: var(--f-m);
}
:root[data-look^="modern"] .rename label:not(.opt),
:root[data-look^="modern"] .looks-lbl { letter-spacing: .14em; }
:root[data-look^="modern"] .rename .opt { font-family: var(--f-m); font-weight: 500; }
:root[data-look^="modern"] .rename .opt input { accent-color: var(--m-accent); color-scheme: inherit; }
:root[data-look^="modern"] .rename .lvl { font-family: var(--f-m); font-weight: 500; }
:root[data-look^="modern"] .rename .presets-opt legend { font-family: var(--f-m); letter-spacing: .14em; }
:root[data-look^="modern"] .rename .preset-list .opt small { color: var(--m-sub); }
:root[data-look^="modern"] .rename .preset-list .opt .new { background: var(--m-accent); color: #17181a; }
:root[data-look^="modern"] .rename .lvl label { letter-spacing: 0; }
:root[data-look^="modern"] .rename .lvl input { border: 0; background: transparent; accent-color: var(--m-accent); color-scheme: inherit; }
:root[data-look^="modern"] .rename input { font-family: var(--f-m); border: 1px solid var(--m-ring); border-radius: 10px; background: var(--m-field); color: var(--m-ink); }
:root[data-look^="modern"] .rename .save,
:root[data-look^="modern"] .rename .install { font-family: var(--f-m); letter-spacing: .02em; text-transform: none; border-radius: 999px; background: var(--m-on); color: var(--m-on-ink); }
:root[data-look^="modern"] .chip { font-family: var(--f-m); border: 1px solid var(--m-ring); color: var(--m-ink); }
:root[data-look^="modern"] .chip:hover { background: var(--m-grille); }
:root[data-look^="modern"] .chip.look[aria-pressed="true"] { background: var(--m-on); border-color: var(--m-on); color: var(--m-on-ink); }
:root[data-look^="modern"] .rename p { color: var(--m-sub); }

/* ---------- Mini player window: the black display on its own ---------- */
:root[data-look^="modern"] #pip { background: var(--m-panel); color: var(--m-p-ink); font-family: var(--f-m); }
:root[data-look^="modern"] #pip .readout { border-top: 0; padding: 6px 6px 0; text-align: left; }
:root[data-look^="modern"] #pip .art { border-radius: 10px; }
:root[data-look^="modern"] #pip .mini-bar button {
  border-radius: 999px; background: #26282c; color: #f3f1ed; box-shadow: none; font-family: var(--f-m); font-weight: 600;
}
:root[data-look^="modern"] #pip .mini-bar .mini-mute { font-size: 12px; letter-spacing: .02em; text-transform: none; }
:root[data-look^="modern"] #pip .mini-bar .mini-mute[aria-pressed="true"] { background: var(--m-accent); color: #17181a; }
:root[data-look^="modern"] #pip .mini-bar button:focus-visible { outline-color: var(--m-accent); }
:root[data-look^="modern"] #pip .mini-vol { color: var(--m-p-ink); font-weight: 600; }

/* ---------- Big song view: dark in both Modern looks, like a screen at night ---------- */
:root[data-look^="modern"] .np { background: radial-gradient(ellipse at 50% 35%, #26282c, #0e0f10 65%); color: #f3f1ed; }
:root[data-look^="modern"] .np-art { border-radius: 28px; background: #2a2c31; }
:root[data-look^="modern"] .np-call { font-family: var(--f-mh); font-weight: 600; color: #f3f1ed; }
:root[data-look^="modern"] .np-song { font-family: var(--f-mh); font-weight: 600; letter-spacing: -.02em; }
:root[data-look^="modern"] .np-lbl,
:root[data-look^="modern"] .np-artist,
:root[data-look^="modern"] .np-hint { font-family: var(--f-m); color: #b4b8bf; }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  :root[data-look^="modern"] .cabinet { border-radius: 26px; }
  :root[data-look^="modern"] .nameplate { font-size: 19px; gap: 8px; }
  :root[data-look^="modern"] .room { white-space: nowrap; padding: 0 14px; font-size: 13px; }
  :root[data-look^="modern"] .display { padding: 18px 16px; gap: 10px; }
  :root[data-look^="modern"] .freq { font-size: 52px; }
  :root[data-look^="modern"] .grille { min-height: 118px; place-items: end center; padding: 52px 12px 14px; }
  :root[data-look^="modern"] .switches { gap: 6px; width: 100%; }
  :root[data-look^="modern"] .output.vis { padding: 0 14px 0 10px; }
  :root[data-look^="modern"] .no-knobs .switches .mute { padding: 0 12px 0 10px; }
  :root[data-look^="modern"] .vstep button { width: 40px; }
  :root[data-look^="modern"] .eye { top: 12px; right: 12px; }
}
@media (max-width: 520px) {
  :root[data-look^="modern"] .readout { text-align: center; }
  :root[data-look^="modern"] .art { width: 140px; height: 140px; border-radius: 14px; }
}

/* ---------- Cozyla Calendar+ 2 (portrait): the same proportions as radio.css's block ---------- */
@media (orientation: portrait) and (min-width: 600px) {
  :root[data-look^="modern"] .cabinet { border-radius: 4.4vw; }
  :root[data-look^="modern"] .nameplate { font-size: 3.8vw; }
  :root[data-look^="modern"] .nameplate small { font-size: 2.2vw; }
  :root[data-look^="modern"] .room { min-height: 6.6vw; padding: 0 2.8vw; }
  :root[data-look^="modern"] .display { border-radius: 3.4vw; padding: 2.6vh 3.6vw 2.8vh; gap: 2vh; }
  :root[data-look^="modern"] .freq { font-size: 12vw; }
  :root[data-look^="modern"] .readout { padding-top: 2vh; }
  :root[data-look^="modern"] .now { gap: 3.6vw; }
  :root[data-look^="modern"] .art { width: 27vw; height: 27vw; border-radius: 2.2vw; }
  :root[data-look^="modern"] .readout .sub { font-size: 2.8vw; }
  :root[data-look^="modern"] .wave { height: 6vh; margin-top: 1.4vh; }
  :root[data-look^="modern"] .wave[data-mode="bars"] { height: 9vh; }
  :root[data-look^="modern"] .grille { border-radius: 3.4vw; padding: 2.6vh; background-image: radial-gradient(circle, var(--m-dot) 2.4px, transparent 2.8px); background-size: 19px 19px; }
  :root[data-look^="modern"] .eye { top: 2.4vh; right: 2.8vw; font-size: 1.8vw; padding: 1vh 2vw 1vh 4.6vw; }
  :root[data-look^="modern"] .eye::before { left: 1.8vw; width: 1.4vw; height: 1.4vw; margin-top: -.7vw; }
  :root[data-look^="modern"] .output { min-height: 6.6vw; padding: 0 3.4vw; gap: 1.4vw; }
  :root[data-look^="modern"] .output .otxt { font-size: 2.2vw; }
  :root[data-look^="modern"] .mute,
  :root[data-look^="modern"] .no-knobs .switches .mute { min-height: 6.6vw; font-size: 2.2vw; padding: 0 3vw 0 2.4vw; }
  :root[data-look^="modern"] .mute svg { width: 2.6vw; height: 2.6vw; }
  :root[data-look^="modern"] .vstep { min-height: 6.6vw; }
  :root[data-look^="modern"] .vstep button { width: 6.6vw; height: 6.6vw; font-size: 3.4vw; }
  :root[data-look^="modern"] .vstep span { font-size: 2.4vw; }
  :root[data-look^="modern"] .keys { gap: 1.6vw; }
  :root[data-look^="modern"] .key { border-radius: 2.4vw; padding: 1.4vh 2vw; }
  :root[data-look^="modern"] .key[aria-pressed="true"]::after { top: 1.4vh; right: 1.4vw; width: 1.3vw; height: 1.3vw; }
}