/* SODIUM & BAKELITE — Deez Nust design system, rev.02.
 *
 * Shared by the listener radio and the host deck. Two surfaces, one family:
 * the listener is the front of the object, the host deck is the back of it
 * with the lid off. Same tokens, same light, different density.
 *
 * Two words, two fixes. SODIUM is the light: one warm source, off-page,
 * upper-left, the colour of an Islamabad street lamp at 1am. Everything is
 * lit by it and shaded away from it. BAKELITE is the material: a moulded,
 * screen-printed, slightly worn object with a serial number, not a stack of
 * flat rectangles.
 *
 * The rule that replaced the old system: warmth lives in the neutrals and in
 * the light, never as an accent sprinkled on grey. Accents carry meaning
 * only. --onair and --ears are never decorative; if a control wears one, it
 * is because sound does or does not leave the room.
 */

:root {
  /* GROUND — warm neutrals with real depth. Nothing here is grey. */
  --ground-0: oklch(0.132 0.014 52);   /* the room behind the object */
  --ground-1: oklch(0.176 0.019 54);   /* chassis face, host board */
  --ground-2: oklch(0.213 0.021 57);   /* card face, mixer strip body */
  --ground-3: oklch(0.252 0.023 60);   /* raised: keys, presets, strip heads */
  --ground-4: oklch(0.298 0.026 64);   /* nearest the lamp: active key, hover */
  --trough:   oklch(0.108 0.012 46);   /* recesses: dial well, fader slots */
  --glass:    oklch(0.205 0.028 70);   /* printed dial glass, lit from behind */

  /* INK — warm too (hue 70–82), so body copy reads as lamplight on paper. */
  --ink-1: oklch(0.945 0.016 82);      /* numerals, headings, on-air values */
  --ink-2: oklch(0.855 0.020 78);      /* body, show names, caller names */
  --ink-3: oklch(0.705 0.022 74);      /* labels, now-playing, secondary */
  --ink-4: oklch(0.552 0.020 70);      /* ticks, fine print, disabled */
  --ink-rev: oklch(0.185 0.030 58);    /* text on cream and on lamp fills */

  /* ACCENTS, by role. */
  --lamp:      oklch(0.800 0.112 72);  /* the light: glow, lit numerals, LIVE */
  --lamp-deep: oklch(0.615 0.118 58);  /* lamp in shadow: lit borders, needle */
  --onair:     oklch(0.585 0.170 30);  /* sound that leaves the room */
  --onair-lit: oklch(0.700 0.170 34);
  --ears:      oklch(0.700 0.068 210); /* sound that never leaves: monitor */
  --cream:     oklch(0.905 0.032 88);  /* paper the station printed itself */
  --dump:      oklch(0.480 0.150 18);  /* destructive: DUMP, HANG UP */

  /* EDGES + DEPTH — light from upper-left, always. Every raised surface
     takes --lit-top and --shade-bot; every recess takes --well. */
  --hair:      oklch(0.345 0.020 60 / .55);
  --hair-soft: oklch(0.345 0.020 60 / .28);
  --lit-top:   inset 0 1px 0 oklch(0.660 0.030 72 / .34);
  --shade-bot: inset 0 -1px 0 oklch(0.090 0.010 40 / .75);
  --lift:      0 2px 0 oklch(0.095 0.012 45 / .85),
               0 12px 26px -14px oklch(0.05 0.01 40 / .9);
  --well:      inset 0 3px 7px oklch(0.070 0.010 40 / .92),
               inset 0 -1px 0 oklch(0.470 0.024 66 / .30);
  --lamphalo:  0 0 26px -4px oklch(0.800 0.112 72 / .34);
  --lampfall:  radial-gradient(120% 55% at 22% -8%,
               oklch(0.30 0.045 70 / .55) 0%, transparent 62%);

  /* RADII — deliberately uneven, by object class. Moulded top, cut base. */
  --r-chassis: 26px 26px 9px 9px;
  --r-card: 7px;
  --r-strip: 3px;
  --r-key: 5px 5px 10px 10px;
  --r-pill: 999px;

  /* SPACE */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;
  --hit-min: 44px;

  /* TYPE. Archivo is the manufactured voice and carries a width axis, so the
     condensed station strip and the normal-width UI text are one family.
     Newsreader is the person awake; never used for a control. Plex Mono is
     the equipment reporting; it never speaks to the listener. */
  --f-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Newsreader", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --f-naskh: "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;
  --f-nastaliq: "Gulzar", serif;

  --t-micro: 10px; --t-label: 11.5px; --t-fine: 12.5px;
  --t-body: 14px; --t-lede: 16.5px; --t-title: 21px;
  --t-show: 27px; --t-freq-sm: 38px; --t-freq: 78px;
}

/* Any display we set on a component would otherwise beat the hidden
   attribute, which is how the mixer and the audio-unlock key ended up
   visible while hidden. State that once, here. */
[hidden] { display: none !important; }

@keyframes sb-spool   { to { transform: rotate(360deg); } }
@keyframes sb-breathe { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes sb-hum     { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(.5px); } }

/* ---------- shared primitives ---------- */

/* Weight is carried by material, not by size: cream paper for the one thing
   that matters, moulded case for the quiet ones, a red-shadowed recess for
   the one that destroys. All are the same 48px box. */
.sb-key {
  font: inherit;
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  cursor: pointer;
  border-radius: var(--r-key);
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: 700;
  font-stretch: 76%;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--ground-3);
  color: var(--ink-2);
  border: 1px solid var(--hair);
  box-shadow: var(--lit-top), var(--shade-bot);
  transition: background .18s, border-color .18s, color .18s;
}
.sb-key:hover:not(:disabled) { background: var(--ground-4); color: var(--ink-1); }
.sb-key:active:not(:disabled) { box-shadow: var(--well); background: var(--ground-4); }

.sb-key.primary {
  background: var(--cream);
  color: var(--ink-rev);
  border-color: oklch(0.80 0.03 88);
  box-shadow: var(--lift), inset 0 -2px 0 oklch(0.74 0.04 84);
}
.sb-key.primary:hover:not(:disabled) { background: oklch(0.94 0.034 88); color: var(--ink-rev); }

.sb-key.danger {
  background: oklch(0.24 0.055 25);
  color: oklch(0.86 0.06 30);
  border-color: var(--dump);
}
.sb-key.danger:hover:not(:disabled) { background: oklch(0.28 0.065 25); color: oklch(0.90 0.07 30); }

.sb-key:disabled {
  background: var(--ground-1);
  color: var(--ink-4);
  border: 1px dashed var(--hair-soft);
  box-shadow: none;
  cursor: default;
}

/* Badges name a state in one word. Count pills exist only on the host deck,
   where a count is operational — never on the listener side. */
.sb-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: var(--r-strip);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .16em;
  white-space: nowrap;
}
.sb-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: sb-breathe 3.4s ease-in-out infinite;
}
.sb-badge.live    { background: var(--lamp); color: var(--ink-rev); padding-left: 8px; }
.sb-badge.onair   { background: oklch(0.585 0.170 30 / .16); color: var(--onair-lit); border: 1px solid oklch(0.585 0.170 30 / .5); }
.sb-badge.ears    { background: oklch(0.700 0.068 210 / .14); color: var(--ears); border: 1px solid oklch(0.700 0.068 210 / .45); }
.sb-badge.nohand  { background: transparent; color: var(--ink-4); border: 1px dashed var(--hair); }
.sb-badge.staff   { background: var(--ground-3); color: var(--ink-3); border: 1px solid var(--hair); }

.sb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 22px;
  padding: 0 7px;
  background: var(--trough);
  color: var(--ink-1);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  box-shadow: var(--well);
}

/* Fields are recesses, not boxes: the same trough as the dial well. Focus is
   a lamp-coloured hairline, error a red one — no fill change, no bloom. */
.sb-field {
  font: inherit;
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  background: var(--trough);
  color: var(--ink-1);
  border: 0;
  border-radius: var(--r-strip);
  box-shadow: var(--well);
  font-family: var(--f-serif);
  font-size: var(--t-lede);
}
.sb-field::placeholder { color: var(--ink-4); font-style: italic; }
.sb-field:focus { outline: 0; box-shadow: var(--well), 0 0 0 1px var(--lamp-deep); }
.sb-field.bad   { box-shadow: var(--well), 0 0 0 1px oklch(0.585 0.170 30 / .7); }

/* One line, three tones, always the same slot. It never becomes a toast and
   never covers anything. */
.sb-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--hit-min);
  padding: 8px 12px;
  background: var(--ground-1);
  border-left: 2px solid var(--hair);
  border-radius: 0 var(--r-strip) var(--r-strip) 0;
}
.sb-status .tag {
  flex: none;
  min-width: 62px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-4);
}
.sb-status .say {
  min-width: 0;
  font-family: var(--f-serif);
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--ink-3);
}
.sb-status.working { background: oklch(0.800 0.112 72 / .09); border-left-color: var(--lamp-deep); }
.sb-status.working .tag { color: var(--lamp); }
.sb-status.working .say { color: var(--ink-2); }
.sb-status.bad { background: oklch(0.585 0.170 30 / .10); border-left-color: var(--onair); }
.sb-status.bad .tag { color: var(--onair-lit); }
.sb-status.bad .say { color: var(--ink-2); }

/* Urdu. Never share a line-height between scripts; Urdu runs ~15% larger
   than the English beside it to match apparent height. */
.ur-nastaliq { font-family: var(--f-nastaliq); direction: rtl; line-height: 1.95; }
.ur-naskh    { font-family: var(--f-naskh);    direction: rtl; line-height: 1.8; }

@media (prefers-reduced-motion: reduce) {
  .sb-badge .dot { animation: none; }
}