/* seo.css — the crawlable pages (/shows, /artists, /genres, /channels, /hosts, /rooms, /schedule, /fr, /ar) in the skin of
   the CURRENT wa3.live interface: the phone home (skel.css / skel-sky.css, 2026-10) and its desktop (desk3.css, 10-13) —
   a pure-black night sky with stars, the pixel face for every label, the room/channel colour as the one accent, the
   إهداء ticker strip, the song box (#050508 with the thin yellow outline), the brushed-alloy keys, the schedule's rows.
   Values are copied from those sheets (the alloy cap, the lip, the ticker, the room labels) — not imported: those files
   are the player's, gated on its data attributes, and carry its 3,000 lines of behaviour. Keep this one small. */

:root {
  color-scheme: dark;
  --bone: #ffdebc; --bone-dim: rgba(255, 222, 188, .7); --bone-faint: rgba(255, 222, 188, .45); --text: #ece0cf;
  --flame: #ffc44e; --blood: #b5341a; --live-red: #ff2d1a; --air: #3fd07a;
  --line: rgba(255, 196, 78, .25); --line-strong: rgba(255, 196, 78, .42); --hair: rgba(255, 222, 188, .09);
  --box: #050508; --tick-bg: #050506;
  --mono: "IBM Plex Mono", "Cairo", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pixel: "29LT Arapixel", "Pixelify Sans", "Cairo", ui-monospace, monospace;
  --makina: "29LT Makina", "Martian Mono", var(--mono);
  --ar: "Cairo", var(--mono);
  --racc: var(--flame); --racc-t: var(--flame);   /* the room's / channel's colour, and the same colour as TEXT */
  /* the alloy key (skel-sky.css zone 4, copied from the live deck caps 10-04) */
  --cap: rgb(95, 100, 108); --glyph: rgb(20, 22, 28);
  --sk-blast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.010 1.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23b)' opacity='0.80'/%3E%3Crect width='64' height='64' filter='url(%23f)' opacity='0.14'/%3E%3C/svg%3E");
  --lip: linear-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(100% - 5px), rgba(0,0,0,.32) calc(100% - 5px), rgba(0,0,0,.32) calc(100% - 4px), rgba(255,255,255,.15) calc(100% - 4px), rgba(255,255,255,.15) calc(100% - 1px), rgba(255,255,255,.72) calc(100% - 1px), rgba(255,255,255,.72) 100%);
  --cap-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 1px 0 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(0,0,0,.28), inset 0 -1px 0 rgba(0,0,0,.3), 0 1px 0 rgba(0,0,0,.78);
  /* the night sky: two star tiles (far: tiny and dim · near: a few brighter), fixed, under everything */
  --stars-far: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23ffdebc'%3E%3Ccircle cx='12' cy='40' r='.7' opacity='.5'/%3E%3Ccircle cx='58' cy='12' r='.6' opacity='.35'/%3E%3Ccircle cx='96' cy='70' r='.8' opacity='.45'/%3E%3Ccircle cx='140' cy='22' r='.6' opacity='.4'/%3E%3Ccircle cx='182' cy='58' r='.7' opacity='.5'/%3E%3Ccircle cx='230' cy='30' r='.6' opacity='.3'/%3E%3Ccircle cx='30' cy='120' r='.6' opacity='.4'/%3E%3Ccircle cx='76' cy='150' r='.8' opacity='.5'/%3E%3Ccircle cx='124' cy='104' r='.6' opacity='.35'/%3E%3Ccircle cx='166' cy='136' r='.7' opacity='.45'/%3E%3Ccircle cx='214' cy='112' r='.6' opacity='.4'/%3E%3Ccircle cx='246' cy='160' r='.7' opacity='.35'/%3E%3Ccircle cx='18' cy='200' r='.7' opacity='.45'/%3E%3Ccircle cx='64' cy='236' r='.6' opacity='.3'/%3E%3Ccircle cx='108' cy='190' r='.8' opacity='.5'/%3E%3Ccircle cx='150' cy='226' r='.6' opacity='.4'/%3E%3Ccircle cx='196' cy='204' r='.7' opacity='.45'/%3E%3Ccircle cx='238' cy='244' r='.6' opacity='.35'/%3E%3C/g%3E%3C/svg%3E");
  --figure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='980' height='760'%3E%3Cg fill='none' stroke='%23ffdebc' stroke-opacity='.2' stroke-width='1'%3E%3Cpath d='M120 300 L210 240 L330 262 L352 372 L262 436 L152 402 Z'/%3E%3Cpath d='M640 120 L760 96 L842 170 L806 258 L700 230 Z'/%3E%3Cpath d='M560 520 L690 500 L746 596 L640 668 L548 620 Z'/%3E%3C/g%3E%3Cg fill='%23ffdebc'%3E%3Ccircle cx='120' cy='300' r='1.6' opacity='.6'/%3E%3Ccircle cx='210' cy='240' r='1.3' opacity='.55'/%3E%3Ccircle cx='330' cy='262' r='1.5' opacity='.6'/%3E%3Ccircle cx='352' cy='372' r='1.3' opacity='.5'/%3E%3Ccircle cx='262' cy='436' r='1.6' opacity='.6'/%3E%3Ccircle cx='152' cy='402' r='1.3' opacity='.5'/%3E%3Ccircle cx='640' cy='120' r='1.5' opacity='.55'/%3E%3Ccircle cx='760' cy='96' r='1.3' opacity='.5'/%3E%3Ccircle cx='842' cy='170' r='1.6' opacity='.6'/%3E%3Ccircle cx='806' cy='258' r='1.3' opacity='.5'/%3E%3Ccircle cx='700' cy='230' r='1.4' opacity='.55'/%3E%3Ccircle cx='560' cy='520' r='1.5' opacity='.6'/%3E%3Ccircle cx='690' cy='500' r='1.3' opacity='.5'/%3E%3Ccircle cx='746' cy='596' r='1.6' opacity='.6'/%3E%3Ccircle cx='640' cy='668' r='1.3' opacity='.5'/%3E%3Ccircle cx='548' cy='620' r='1.4' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --stars-near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cg fill='%23fff6ea'%3E%3Ccircle cx='70' cy='90' r='1.3' opacity='.85'/%3E%3Ccircle cx='300' cy='40' r='1.1' opacity='.7'/%3E%3Ccircle cx='470' cy='150' r='1.4' opacity='.8'/%3E%3Ccircle cx='180' cy='260' r='1' opacity='.6'/%3E%3Ccircle cx='400' cy='330' r='1.3' opacity='.75'/%3E%3Ccircle cx='60' cy='420' r='1.1' opacity='.7'/%3E%3Ccircle cx='250' cy='480' r='1.4' opacity='.85'/%3E%3C/g%3E%3C/svg%3E");
}
/* the rooms' colours (skel-rooms.js) and the channels' (styles.css) — the page carries data-channel on <html> */
html[data-channel="Electronic"], html[data-channel="Party"]  { --racc: #d4ff00; --racc-t: #d4ff00; }
html[data-channel="Arabica"],    html[data-channel="Night"]  { --racc: #ff6a3d; --racc-t: #ff6a3d; }
html[data-channel="Random"],     html[data-channel="Cruise"] { --racc: #85daff; --racc-t: #85daff; }
html[data-channel="Instrumental"], html[data-channel="Work"] { --racc: #475dff; --racc-t: #8a97ff; }
html[data-channel="Morning"] { --racc: #ffc44e; --racc-t: #ffc44e; }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; background: #000; }
body {
  background: #000; color: var(--text); font-family: var(--mono); font-size: 0.9rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative; padding: 0 0 48px;
}
body::before {   /* the sky */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(90% 38% at 50% 0%, color-mix(in srgb, var(--racc) 9%, transparent), transparent 70%), var(--figure) 0 0 / 980px 760px repeat, var(--stars-near) 0 0 / 520px 520px repeat, var(--stars-far) 0 0 / 260px 260px repeat;
}   /* the room's colour washes the top of the sky, faintly — the whole page belongs to the room, not only the song box (10-24) */
body::after {   /* the film grain the player lays over everything (styles.css .grain) */
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .4; mix-blend-mode: overlay; background-image: var(--grain);
}
@media (max-width: 480px) { body::after { mix-blend-mode: normal; opacity: .06; } }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

/* the page fills the screen on every device: a fluid gutter, no fixed column; from 960px the sheet splits into the desktop's
   rail (title · cover · keys, sticky) and the content beside it; the rail takes desk3's tiers (384 / 480) as the screen grows */
:root { --gutter: clamp(12px, 3vw, 56px); --rail: 340px; --fs: 0.9rem; }
@media (min-width: 1280px) { :root { --rail: 384px; --fs: 0.95rem; } }
@media (min-width: 1800px) { :root { --rail: 480px; --fs: 1.02rem; } }
main { position: relative; z-index: 1; width: 100%; margin: 0; padding: 0 var(--gutter); font-size: var(--fs); }
body { font-size: var(--fs); }

/* ── the header (skel: 60px, the pixel face, the constellation across the middle, مباشر with its dot) ── */
nav.top { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); background: #000; }
nav.top .brand { display: inline-flex; align-items: center; height: 60px; text-decoration: none; margin-inline-end: 4px; translate: 0 -2px; }
nav.top .brand img { width: 36px; height: 36px; display: block; image-rendering: pixelated; }
nav.top .brand b, nav.top .brand span:not(.brand-mark) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }   /* the name is for readers; the mark carries it */
nav.top .dial { flex: 1 1 0; min-width: 40px; height: 24px; display: block; }
nav.top .dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
nav.top .dial line { stroke: rgba(255, 222, 188, .22); stroke-width: 1; }
nav.top .dial circle { fill: rgba(255, 222, 188, .55); }
nav.top .dial circle.acc { fill: var(--racc); filter: drop-shadow(0 0 3px var(--racc)); }
nav.top a.live { display: inline-flex; align-items: center; gap: 8px; height: 60px; text-decoration: none; min-width: 81px; justify-content: flex-end;
  font: 700 22px/1 "Cairo", var(--makina); color: var(--air); opacity: .84; letter-spacing: 0; }
nav.top a.live::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live-red); box-shadow: 0 0 6px var(--live-red); }
nav.top a.live:hover { opacity: 1; }
/* the section tabs: the schedule's room tabs (pixel, wide tracking, the current one lit and underlined) */
nav.top .tabs { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 0; margin: 0 calc(-1 * var(--gutter)); padding: 0 calc(var(--gutter) - 6px); background: #000; min-height: 30px; align-items: center;
  box-shadow: inset 0 -1px 0 var(--line); }
nav.top .tabs a { position: relative; display: inline-block; padding: 9px 6px 10px; text-decoration: none; font: 400 10px/1 var(--pixel); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); white-space: nowrap; }
nav.top .tabs a:hover { color: var(--bone); }
nav.top .tabs a[aria-current] { color: var(--racc-t); }
nav.top .tabs a[aria-current]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 1px; background: var(--racc-t); }
[lang="ar"] nav.top .tabs a { font-family: "Cairo", var(--pixel); font-size: 12px; letter-spacing: 0; font-weight: 600; }

.langs { margin: 10px 0 0; display: flex; gap: 12px; font: 400 9px/1 var(--pixel); letter-spacing: .28em; text-transform: uppercase; color: var(--bone-faint); }
.langs a { color: var(--bone-dim); text-decoration: none; }
.langs a[lang="ar"] { font: 600 12px/1 "Cairo", var(--ar); letter-spacing: 0; }
.langs a:hover, .langs a[aria-current] { color: var(--racc-t); }
[lang="ar"] .langs { letter-spacing: 0; font-family: "Cairo", var(--pixel); font-size: 12px; }
.crumbs { margin: 8px 0 12px; font: 400 11px/1.4 var(--mono); color: var(--bone-faint); }
.crumbs a { color: var(--bone-dim); text-decoration: none; }
.crumbs a:hover { color: var(--bone); }

/* ── the ticker strip (the إهداء ticker): the station line and the room's tab ── */
.tick { display: flex; align-items: stretch; height: 26px; margin: 0 calc(-1 * var(--gutter)); background: var(--tick-bg); box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 rgba(255, 196, 78, .5); overflow: hidden; }
.tick .win { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; padding-inline-start: var(--gutter); }
.tick .msg { padding: 0 10px 0 0; font: 500 13px/1 "Cairo", var(--ar); color: rgba(255, 222, 188, .88); }
.tick .sep { font-size: 7px; color: var(--racc); opacity: .85; padding: 0 10px 0 0; font-style: normal; }
.tick .tab { flex: none; display: grid; place-items: center; padding: 0 11px 1px; background: var(--racc-t); color: #0a0a0c; font: 700 12.5px/1 "Cairo", var(--ar); text-transform: uppercase; }
[dir="rtl"] .tick .win { padding: 0 var(--gutter) 0 0; }
[dir="rtl"] .tick .msg, [dir="rtl"] .tick .sep { padding: 0 0 0 10px; }

h1 { margin: 0 0 4px; font: 400 clamp(26px, 5.4vw, 38px)/1.1 var(--pixel); color: var(--flame); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
h1::before { content: "["; } h1::after { content: "]"; }
h1 bdi[lang="ar"], [lang="ar"] h1 { font-family: "Cairo", var(--pixel); font-weight: 600; letter-spacing: 0; line-height: 1.25; }
.sub { margin: 0 0 14px; font: 400 15px/1.45 var(--pixel); letter-spacing: .04em; color: rgba(255, 222, 188, .62); }
.sub a { color: var(--bone); text-decoration: none; }
.sub a:hover { color: var(--racc-t); }
.sub time, td.t time { color: #fff; }
[lang="ar"] .sub { font-family: "Cairo", var(--pixel); letter-spacing: 0; font-size: 14px; }
.cover { width: min(320px, 100%); aspect-ratio: 1; object-fit: cover; display: block; margin: 6px 0 18px; background: #14141c; box-shadow: inset 0 0 0 2px var(--racc); padding: 2px; }
@media (min-width: 960px) { .rail .cover { width: 100%; } .rail h1 { font-size: clamp(22px, 2.1vw, 32px); overflow-wrap: break-word; } }   /* the rail is narrow: a long title steps down instead of breaking mid-word */
p { margin: 0 0 14px; color: var(--text); }
a { color: var(--flame); }
a:hover { color: var(--bone); }
strong, b { color: var(--bone); }

/* section heads: the room labels on the sky (pixel, .38em tracking, the chevron) */
h2 { margin: 28px 0 12px; padding-top: 14px; border-top: 1px solid var(--hair); font: 400 11px/1 var(--pixel); letter-spacing: .38em; text-transform: uppercase; color: var(--bone-dim); }
h2::after { content: " ›"; color: var(--racc-t); letter-spacing: 0; }
h2 a { color: var(--racc-t); text-decoration: none; }
h2 small { font: inherit; letter-spacing: .14em; color: var(--bone-faint); }
h3 { margin: 16px 0 6px; font: 400 15px/1.2 var(--pixel); text-transform: uppercase; letter-spacing: .06em; color: var(--bone); }
[lang="ar"] h2, [lang="ar"] h3 { font-family: "Cairo", var(--pixel); letter-spacing: 0; font-weight: 600; font-size: 13px; }

/* the keys: the alloy cap (LISTEN) and the ring (the schedule's share ring) */
.cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 10px 10px 0; height: 44px; padding: 0 18px 4px; text-decoration: none; cursor: pointer;
  color: var(--glyph); background-color: var(--cap); background-image: var(--lip), var(--sk-blast); box-shadow: var(--cap-shadow); border-radius: 6px 4px 4px 6px;
  font: 400 11px/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; transition: transform .12s ease-out, filter .12s ease-out; }
.cta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--racc); box-shadow: 0 0 6px var(--racc); }
.cta:hover { filter: brightness(1.06); color: var(--glyph); }
.cta:active { transform: translateY(1px); filter: brightness(.9); transition-duration: .06s; }
.cta.quiet { background: #000; background-image: none; box-shadow: inset 0 0 0 2px var(--bone-dim); color: var(--bone); border-radius: 22px; padding: 0 16px; }
.cta.quiet::before { display: none; }
.cta.quiet:hover { box-shadow: inset 0 0 0 2px var(--bone); color: var(--bone); }
[dir="rtl"] .cta { margin: 6px 0 10px 10px; }
[lang="ar"] .cta { font-family: "Cairo", var(--pixel); font-size: 13px; letter-spacing: 0; font-weight: 700; }

/* lists · the schedule rows (ss-row: no hairlines, the hour in pixel digits in the room's colour) */
ul, ol { padding-inline-start: 1.1em; margin: 0 0 14px; }
li { margin: 6px 0; }
li a { text-decoration: none; }
li a:hover { text-decoration: underline; }
li small, .sub small, td small, .card small { color: var(--bone-faint); }
table { border-collapse: collapse; width: 100%; margin: 0 0 14px; }
th, td { text-align: start; padding: 9px 8px 9px 0; vertical-align: top; border-bottom: 1px solid var(--hair); }
th { font: 400 9px/1 var(--pixel); letter-spacing: .28em; text-transform: uppercase; color: var(--bone-faint); }
td.t { white-space: nowrap; font: 400 16px/1.3 var(--pixel); letter-spacing: .04em; color: var(--racc-t); }
tr:hover td { background: rgba(255, 222, 188, .03); }

/* the grids: the schedule row's picture + pixel name + "w/ host" */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 12px; margin: 0 0 14px; }
.card { display: block; text-decoration: none; color: var(--bone); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; margin-bottom: 8px; background: #14141c; transition: box-shadow .15s ease-out; }
.card:hover img { box-shadow: inset 0 0 0 2px var(--racc); }
.card b { display: block; font: 400 17px/1.2 var(--pixel); text-transform: uppercase; color: var(--bone); overflow-wrap: anywhere; }
.card b bdi[lang="ar"] { font: 700 17px/1.3 "Cairo", var(--ar); }
.card small { display: block; margin-top: 3px; font: 400 13px/1.3 var(--pixel); color: var(--bone-dim); }
.card:hover b { color: var(--racc-t); }

/* the live schedule's rows (skel-sky.css .ss-row): picture, the hour on its dark plate, the name in pixel caps, "w/ host", the week */
.ss-list { list-style: none; padding: 0; margin: 0 0 8px; }
.ss-row { display: flex; align-items: stretch; gap: 0; padding: 8px 0; margin: 0 0 8px; break-inside: avoid; }
.ss-pic { position: relative; flex: none; width: min(120px, 32vw); min-height: min(120px, 32vw); overflow: hidden; background: #14141c; display: block; }
.ss-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-pic.nopic { background: #0b0b10; box-shadow: inset 0 0 0 1px var(--hair); }
.ss-row:hover .ss-pic { box-shadow: inset 0 0 0 2px var(--racc); }
.ss-time { position: absolute; left: 6px; top: 6px; display: flex; align-items: flex-end; gap: 2px; padding: 4px 6px 2px; background: rgba(0, 0, 0, .72); color: var(--racc-t); }
[dir="rtl"] .ss-time { left: auto; right: 6px; direction: ltr; }
.ss-time b { font: 400 36px/36px var(--pixel); color: inherit; }
.ss-time small { padding-bottom: 3px; font: 400 16px/1 var(--pixel); }
.ss-words { flex: 1 1 auto; min-width: 0; padding: 6px 8px 6px 12px; }
.ss-name { display: block; margin: 0 0 4px; font: 400 21px/1.25 var(--pixel); text-transform: uppercase; color: var(--bone); text-decoration: none; overflow-wrap: anywhere; }
.ss-name bdi[lang="ar"] { font: 700 21px/1.3 "Cairo", var(--ar); }
.ss-row:hover .ss-name { color: var(--racc-t); }
.ss-by { margin: 0 0 6px; font: 400 18px/1.05 var(--pixel); color: var(--bone); }
.ss-by .ss-w { font: 400 15px/20px var(--pixel); margin-inline-end: 5px; }
.ss-by bdi[lang="ar"] { font: 600 18px/1.2 "Cairo", var(--ar); }
.ss-when { margin: 0; font: 400 12px/1.5 var(--mono); color: var(--bone-dim); max-width: 60ch; }

/* on air now (seo-time.js fills these): the schedule's ON AIR tag, the lit row, the visitor's local time */
.air { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 16px; }
.air .cta { margin: 0; }
.air-status { font: 400 11px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.air-status:empty { display: none; }
.air-status.on, .air-status[data-on] { padding: 5px 7px 4px; background: var(--racc-t); color: #0a0a0c; }
.air-status .lt, .lt { font: inherit; color: var(--bone-faint); letter-spacing: .06em; }
td.t .lt { white-space: normal; }   /* the visitor's own clock may wrap under Paris's: abroad on a phone, a one-line cell pushed the table
   past the screen (the page zoomed out and the fixed dock jumped: PSI's US clock saw it, Paris never does) */
tr.onnow td { background: rgba(255, 196, 78, .06); }
tr.onnow td:first-child { box-shadow: inset 3px 0 0 var(--racc); padding-inline-start: 8px; }
.ss-row.onnow .ss-pic { box-shadow: inset 0 0 0 2px var(--racc); }
.ss-row.onnow .ss-name::after, tr.onnow td.t:last-child::after { content: "ON AIR"; display: inline-block; margin-inline-start: 10px; padding: 4px 7px 3px; vertical-align: middle; font: 400 10px/1 var(--pixel); letter-spacing: .14em; background: var(--racc-t); color: #0a0a0c; }
[lang="ar"] .ss-row.onnow .ss-name::after, [lang="ar"] tr.onnow td.t:last-child::after { content: "على الهوا"; font: 700 11px/1 "Cairo", var(--ar); letter-spacing: 0; }
[lang="fr"] .ss-row.onnow .ss-name::after, [lang="fr"] tr.onnow td.t:last-child::after { content: "À L'ANTENNE"; }

.faq { margin: 0 0 14px; }
.faq dt { margin-top: 14px; font: 400 14px/1.3 var(--pixel); text-transform: uppercase; color: var(--bone); }
.faq dd { margin: 4px 0 0; }
[lang="ar"] .faq dt { font-family: "Cairo", var(--pixel); font-weight: 600; }

footer { margin-top: 18px; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 400 9px/1.4 var(--pixel); letter-spacing: .32em; text-transform: uppercase; color: var(--bone-faint); }
footer a { color: var(--bone-dim); text-decoration: none; }
footer a:hover { color: var(--racc-t); }
footer span[lang="ar"] { font: 600 12px/1 "Cairo", var(--ar); letter-spacing: 0; color: #e6765e; }   /* --blood-bright: the player's coral for TEXT on the page ink (4.8:1); --blood itself is 3.5:1 at 11px (Lighthouse 10-15) */
[lang="ar"] footer { letter-spacing: 0; font-family: "Cairo", var(--pixel); font-size: 11px; }

@media (max-width: 560px) {
  :root { --gutter: 10px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
  nav.top a.live { font-size: 20px; }
  .cover { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  nav.top .dial circle.acc { animation: dial-twinkle 3.2s ease-in-out infinite; }
  @keyframes dial-twinkle { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
}

/* ══ THE COMPOSITION — the listener's home, top to bottom: header · pet screen · ticker · the sky with the rooms · the song box ·
   (phones) the keys well. On a laptop the rail (screen · ticker · song box · sky) stands on the left as desk3's radio rail and
   the page's sections fill the rest. ══ */
.rail { display: flex; flex-direction: column; min-width: 0; }
.sblk { margin: 12px 0 0; padding: 18px 20px 22px; border-radius: 12px; background: var(--box); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), inset 0 0 0 1px var(--line-strong); min-width: 0; }
.sblk > :last-child { margin-bottom: 0; }
.more > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.more p, .more dd, .more li { max-width: 80ch; }
.kicker { display: none; }
/* the sky: the five rooms hang where the home hangs them; the room this page belongs to is lit, with its chevron */
.sky { position: relative; display: block; height: 170px; margin: 0 calc(-1 * var(--gutter)); overflow: hidden; background: #000 var(--figure) 50% 30% / 980px 760px; box-shadow: inset 0 -1px 0 var(--line); }
.sky .sk-lbl { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 4px; text-decoration: none; padding: 8px; }
.sky .sk-lbl b { font: 400 10px/1 var(--pixel); letter-spacing: .38em; margin-right: -.38em; color: rgba(255, 222, 188, .7); white-space: pre; text-transform: uppercase; transition: color .3s ease-out; }
.sky .sk-lbl i { font: normal 400 12px/1.1 "Cairo", var(--ar); color: rgba(255, 222, 188, .72); opacity: .45; }
.sky .sk-lbl .chev { font: 400 12px/1 var(--pixel); color: var(--racc-t); position: absolute; left: calc(100% - 2px); top: 50%; translate: 0 -50%; }
.sky .sk-lbl.on b { color: var(--racc-t); } .sky .sk-lbl.on i { opacity: .9; }
.sky .sk-lbl:hover b { color: var(--bone); }
[lang="ar"] .sky .sk-lbl b { font: 600 13px/1 "Cairo", var(--ar); letter-spacing: 0; margin: 0; }
[lang="ar"] .sky .sk-lbl i { font: 400 10px/1 var(--pixel); letter-spacing: .3em; text-transform: uppercase; }
[dir="rtl"] .sky .sk-lbl .chev { left: auto; right: calc(100% - 2px); }
/* the keys well — phones only, fixed at the bottom like the home's: ▶ and three alloy caps in the dark well */
.well { display: none; }
@media (max-width: 560px) {
  body { padding-bottom: 84px; }
  .well { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2px; padding: 2px 2px calc(2px + env(safe-area-inset-bottom)); background: rgb(4, 4, 10);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,222,188,.08), 0 -1px 0 rgba(255,222,188,.05); }
  .well .cap { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 58px; padding: 0 4px 6px; text-decoration: none; color: var(--glyph);
    background-color: var(--cap); background-image: var(--lip), var(--sk-blast); box-shadow: var(--cap-shadow); border-radius: 0 0 6px 6px;
    font: 400 10px/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .well .cap.play { font-size: 18px; }
  .well .cap:active { transform: translateY(1px); filter: brightness(.9); }
  [lang="ar"] .well .cap { font: 700 12px/1 "Cairo", var(--ar); letter-spacing: 0; }
}
/* the laptop: the rail on the left, the sections beside it (desk3's order: screen · ticker · song box · sky) */
@media (min-width: 960px) {
  main { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 40px); align-items: start; }
  main > nav.top, main > .langs, main > .crumbs, main > footer { grid-column: 1 / -1; }
  .rail { grid-column: 1; position: sticky; top: 10px; margin-top: 12px; }   /* a flex column: the screen, ticker and sky keep their height (flex: none) — a shrinking rail folded them to 0 */
  .rail > * { flex: none; }
  .more { grid-column: 2; }
  html.solo .rail { grid-column: 1 / -1; position: static; max-height: none; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: clamp(20px, 2.4vw, 40px); align-items: start; }
  html.solo .rail > .tick, html.solo .rail > .sky { grid-column: 1; }
  html.solo .rail > .hero { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .tick { margin: 10px 0 0; border-radius: 4px; }
  .tick .win { padding-inline-start: 12px; }
  .rail .hero { order: 3; margin-top: 10px; }
  .rail .sky { order: 4; margin: 10px 0 0; height: 200px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (min-width: 1600px) { .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 16px; } }
}

/* ══ THE REAL MARKS (styles.css, verbatim): the وع mark = wa3-font-4.svg masked over the accent metal, shimmering and floating;
   مباشر = the live-word SVG masked over the emerald sheen, breathing, with the pulsing red dot ══ */
nav.top .brand.wm { position: relative; filter: drop-shadow(0.5px 0 0 rgba(255,40,90,0.6)) drop-shadow(-0.5px 0 0 rgba(0,210,255,0.55)); }
nav.top .brand-mark { height: clamp(36px, 4.2vw, 46px); aspect-ratio: 948 / 800; width: auto; display: block; position: relative; isolation: isolate;
  background-color: var(--blood);
  background-image: linear-gradient(120deg, color-mix(in srgb, var(--racc) 20%, #140a04) 0%, color-mix(in srgb, var(--racc) 36%, #1c0e05) 26%, color-mix(in srgb, var(--racc) 70%, #201204) 42%,
    color-mix(in srgb, var(--racc) 92%, #ffffff) 50%, color-mix(in srgb, var(--racc) 70%, #201204) 58%, color-mix(in srgb, var(--racc) 36%, #1c0e05) 74%, color-mix(in srgb, var(--racc) 20%, #140a04) 100%);
  background-repeat: no-repeat; background-size: 320% 100%; background-position: 100% 0; filter: brightness(1.5) saturate(1.08); overflow: hidden;
  -webkit-mask: url(/wa3-logo-assets/wa3-font-4.svg) center / contain no-repeat; mask: url(/wa3-logo-assets/wa3-font-4.svg) center / contain no-repeat;
  animation: wm-float 3.5s ease-in-out infinite; }
nav.top .brand-mark::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 320%; background: inherit; background-size: 100% 100%; background-position: 0 0;
  animation: wm-slide-3 7s ease-in-out infinite alternate; will-change: transform; }   /* the sheen moves by transform (composited), not background-position */
nav.top .brand img { display: none; }
nav.top a.live { gap: 7px; font: 700 0.62rem/1 var(--makina); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--air); opacity: 1; }
nav.top a.live::after { display: none; }
nav.top a.live .lbl-on { display: inline-block; height: 32px; aspect-ratio: 2062 / 1342; width: auto; background-color: var(--air);
  background-image: linear-gradient(115deg, #1d8a4b 0%, #31b869 26%, #3fd07a 42%, #a8eec2 50%, #3fd07a 58%, #31b869 74%, #1d8a4b 100%);
  background-repeat: no-repeat; background-size: 220% 100%; background-position: 100% 0; opacity: .84;
  -webkit-mask: url(/wa3-logo-assets/live-word-arabic-font-1.svg) center / contain no-repeat; mask: url(/wa3-logo-assets/live-word-arabic-font-1.svg) center / contain no-repeat;
  font-size: 0; color: transparent; line-height: 0; position: relative; overflow: hidden; animation: wm-breathe 4s ease-in-out infinite; }
nav.top a.live .lbl-on::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 220%; background: inherit; background-size: 100% 100%; background-position: 0 0;
  animation: wm-slide-2 6.5s ease-in-out infinite alternate; will-change: transform; }
nav.top a.live .dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--live-red); }
nav.top a.live .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--live-red) 60%, transparent); animation: pulse 1.75s ease-out infinite; }
@keyframes wm-slide-3 { from { transform: translateX(-68.75%); } to { transform: translateX(0); } }
@keyframes wm-slide-2 { from { transform: translateX(-54.5%); } to { transform: translateX(0); } }
@keyframes wm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes wm-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(3); opacity: 0; } 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { nav.top .brand-mark, nav.top .brand-mark::before, nav.top a.live .lbl-on, nav.top a.live .lbl-on::before, nav.top a.live .dot::after { animation: none; } nav.top .brand-mark::before, nav.top a.live .lbl-on::before { transform: translateX(-34%); } }


/* the sky is dense: three more star tiles at other scales */
.sky { background: #000 var(--figure) 50% 30% / 980px 760px, var(--stars-near) 40px 20px / 300px 300px repeat, var(--stars-far) 0 0 / 130px 130px repeat, var(--stars-far) 60px 40px / 210px 210px repeat; background-color: #000; }

/* the song box: the title block with the round keys beside it (desk3's song box: ▶ the main key, share stepped down) */
.sb-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin: 0 0 14px; }
.sb-txt { min-width: 0; }
.sb-txt .sub { margin-bottom: 0; }
.sb-keys { display: flex; align-items: center; gap: 6px; align-self: start; padding-top: 4px; }
.rnd { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 17px; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: none;
  color: var(--glyph); background-color: var(--cap); background-image: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 62%), var(--sk-blast);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 1px rgba(0, 0, 0, .35), 0 1px 0 rgba(0, 0, 0, .8), 0 2px 4px rgba(0, 0, 0, .45); transition: transform .12s ease-out, filter .12s ease-out; }
.rnd.play { width: 40px; height: 40px; border-radius: 20px; }
.rnd svg { width: 15px; height: 15px; display: block; }
.rnd:hover { filter: brightness(1.06); } .rnd:active { transform: translateY(1px); filter: brightness(.9); }
.rnd.share.copied::after { content: attr(data-copied); position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0; padding: 5px 7px; border-radius: 3px; white-space: nowrap; font: 400 9px/1 var(--pixel); letter-spacing: .2em; color: #0a0a0c; background: var(--flame); }
/* the play cap's lamp (the home's: dim ember until the radio plays) */
.well .cap.play { position: relative; }
.well .cap .lamp { position: absolute; left: 10px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: #5b2421; box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .4); }
/* ══ ROWS 1–3 of the searcher audit (10-14): the player's bar alone, Listen under the title, labels you can read, the week at a
   glance. The player's own files are untouched; these rules only override the composition above. ══ */
/* the bar: mark · constellation · مباشر · Menu — the nine sections and the languages live in the Menu (<details>, no script) */
nav.top { position: relative; flex-wrap: nowrap; z-index: 30; }
nav.top details.menu { flex: none; margin-inline-start: 4px; }
nav.top details.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px; cursor: pointer; user-select: none;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--bone); font: 400 10px/1 var(--pixel); letter-spacing: .2em; text-transform: uppercase; }
nav.top details.menu > summary::-webkit-details-marker { display: none; }
nav.top details.menu > summary .bars { width: 14px; height: 10px; background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat; }
nav.top details.menu[open] > summary { color: var(--racc-t); box-shadow: inset 0 0 0 1px var(--racc-t); }
[lang="ar"] nav.top details.menu > summary { font: 600 12px/1 "Cairo", var(--ar); letter-spacing: 0; }
nav.top .menu-panel { position: absolute; inset-inline: 0; top: 100%; z-index: 40; padding: 6px var(--gutter) 14px; background: #000; box-shadow: 0 1px 0 var(--line), 0 18px 30px rgba(0,0,0,.7); }
nav.top .menu-panel .tabs { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 0; padding: 0; box-shadow: none; min-height: 0; }
nav.top .menu-panel .tabs a { padding: 13px 6px; font-size: 12px; border-bottom: 1px solid var(--hair); }
nav.top .menu-panel .tabs a[aria-current]::after { bottom: 8px; }
nav.top .menu-panel .langs { margin: 12px 6px 0; font-size: 10px; }
@media (max-width: 380px) { nav.top details.menu > summary .lbl { display: none; } nav.top details.menu > summary { padding: 0 10px; } }
/* the crumbs: one small line over the title, inside the song box */
.hero .crumbs { margin: 0 0 10px; font-size: 11px; }
/* Listen: the page's one big key, right under the title — full width on phones, the room's / channel's colour */
.air { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 16px; }
.air .cta:not(.quiet) { margin: 0; min-height: 52px; height: auto; padding: 0 26px; border-radius: 12px; font: 400 16px/1 var(--pixel); letter-spacing: .1em;
  color: #0b0b0d; background: var(--racc); background-image: none; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 22px color-mix(in srgb, var(--racc) 35%, transparent); }
.air .cta:not(.quiet)::before { display: none; }   /* the label carries its own ▶ */
.air .cta:not(.quiet):hover { filter: brightness(1.08); color: #0b0b0d; }
[lang="ar"] .air .cta:not(.quiet) { font: 700 17px/1 "Cairo", var(--ar); letter-spacing: 0; }
.air .cta.quiet { margin: 0; height: 40px; font-size: 10px; }
/* the status line (seo-time.js): its own line, held open from the first paint — filled late on a slow phone, it moves
   nothing (no layout shift) — and never more than one line (a long one ends in …) */
.air .air-status { flex: 1 1 100%; min-height: 1.5em; font-size: 12px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.air .air-status:empty { display: block; }
@media (max-width: 560px) { .air .cta:not(.quiet) { flex: 1 1 100%; } }
/* labels you can read: the section heads in full flame, 13–14 px */
h2 { font-size: 13px; color: var(--flame); letter-spacing: .3em; }
[lang="ar"] h2 { font-size: 15px; color: var(--flame); }
@media (min-width: 960px) { h2 { font-size: 14px; } }
/* the week at a glance: seven day chips, the days it airs lit */
.wk { display: inline-flex; gap: 3px; vertical-align: middle; direction: ltr; }
[dir="rtl"] .wk { direction: rtl; }
.wk i { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; font: normal 400 9px/1 var(--pixel); color: rgba(255,222,188,.32); box-shadow: inset 0 0 0 1px var(--hair); }
.wk i.on { background: var(--racc-t); color: #0b0b0d; box-shadow: none; }
.wk i::before { content: attr(data-d); }
[lang="ar"] .wk i { font: 700 10px/1 "Cairo", var(--ar); }
.card .when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.card .when span { font: 400 13px/1.3 var(--pixel); color: var(--bone-dim); }
.wkline { margin: 0 0 8px; }
.wkline .wk i { width: 26px; height: 26px; font-size: 12px; border-radius: 6px; }
[lang="ar"] .wkline .wk i { font-size: 13px; }
/* phones: the title (and Listen) before the rooms' sky — the first screen is the pet, the ticker, the title and the key */
.rail .lcd { order: 1; } .rail .tick { order: 2; } .rail .hero { order: 3; } .rail .sky { order: 4; }
@media (max-width: 959px) { .rail .sky { margin-top: 12px; height: 150px; } }
/* less to read (the operator, 10-14): a card is its picture, its name and one line of chips; the page's prose and its
   questions sit in one collapsed "About" at the bottom — in the HTML, word for word, for search engines and the curious */
.card:has(.when) small:not(.when) { display: none; }
.card b { margin-bottom: 4px; }
details.about { margin: 22px 0 0; border-top: 1px solid var(--hair); padding-top: 12px; column-span: all; break-inside: avoid; }
details.about > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 400 13px/1.2 var(--pixel); letter-spacing: .24em; text-transform: uppercase; color: var(--flame); padding: 6px 0; }
details.about > summary::-webkit-details-marker { display: none; }
details.about > summary::after { content: "+"; font: 400 18px/1 var(--pixel); color: var(--racc-t); transition: rotate .2s; }
details.about[open] > summary::after { rotate: 45deg; }
[lang="ar"] details.about > summary { font: 700 15px/1.3 "Cairo", var(--ar); letter-spacing: 0; }
details.about > p, details.about dd { color: var(--bone-dim); max-width: 75ch; }
details.about h3 { margin-top: 18px; }
/* lists carry the week the same way as cards: chips + the hours */
li .when { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-inline-start: 6px; vertical-align: middle; }
li .when span { font: 400 12px/1.3 var(--pixel); color: var(--bone-dim); }
/* phones: no rooms' sky in the flow (the Menu and the keys well both open the rooms) */
@media (max-width: 959px) { .rail .sky { display: none; } }
/* the pet on its screen, idling (no sound): the player's own two frames (idle-blink-1/2, 21×30 px, bone baked in), swapped by CSS */
.lcd.empty .pet-idle { position: absolute; left: 50%; bottom: 9%; height: 62%; aspect-ratio: 21 / 30; translate: -50% 0; image-rendering: pixelated;
  background: url("/_proto-assets/pet-live/sprites/phase2/idle-blink-1.png") center bottom / contain no-repeat; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
@media (prefers-reduced-motion: no-preference) {
  .lcd.empty .pet-idle { animation: pet-blink 4.2s steps(1) infinite, pet-bob 2.6s ease-in-out infinite; }
  @keyframes pet-blink { 0%, 91% { background-image: url("/_proto-assets/pet-live/sprites/phase2/idle-blink-1.png"); } 92%, 100% { background-image: url("/_proto-assets/pet-live/sprites/phase2/idle-blink-2.png"); } }
  @keyframes pet-bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -2%; } }
}
/* a room page's hero: its constellation on the night sky, in the room's colour */
.lcd.roomsky-box { background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--racc) 10%, #05060a), #000 70%); display: grid; place-items: center; }
.lcd.roomsky-box::before, .lcd.roomsky-box::after { display: none; }
.roomsky { width: auto; height: 92%; max-width: 92%; overflow: visible; }
.roomsky .art { opacity: .32; }
.roomsky .ln line { stroke: var(--racc); stroke-opacity: .55; stroke-width: .55; stroke-linecap: round; }
.roomsky .st circle { fill: #f2ead9; }
.roomsky .st circle.m0 { fill: #fff6ea; }
.roomsky .g { fill: var(--racc); opacity: .22; filter: blur(1.5px); }
@media (prefers-reduced-motion: no-preference) { .roomsky .g { animation: sky-breathe 4s ease-in-out infinite; } @keyframes sky-breathe { 50% { opacity: .4; } } }
/* the dock (phones): what is on air now, over the keys well — the player's now-playing box and its alloy keys */
.dock { display: none; }
@media (max-width: 560px) {
  body { padding-bottom: 132px; }
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: block; background: rgb(4, 4, 10); }
  .dock .well { position: static; }
  .np { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 7px var(--gutter, 12px); text-decoration: none; color: var(--bone);
    background: var(--box); box-shadow: inset 0 1px 0 rgba(255,196,78,.42), inset 0 -1px 0 rgba(255,196,78,.42); }
  .np-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
  .np-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .np-show { font: 400 17px/1.15 var(--pixel); color: var(--flame); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .np-show::before { content: "["; } .np-show::after { content: "]"; }
  .np-host { font: normal 400 13px/1 var(--pixel); color: rgba(255,222,188,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .np-l2 { display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--pixel); color: rgba(255,222,188,.53); }
  [lang="ar"] .np-show, [lang="ar"] .np-host { font-family: "Cairo", var(--ar); font-weight: 700; }
  .np .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
  .np .eq i { width: 3px; height: 40%; background: var(--racc); }
  .np.is-live .eq i { animation: np-eq 1s ease-in-out infinite; height: 100%; transform-origin: 50% 100%; } .np.is-live .eq i:nth-child(2) { animation-delay: -.4s; } .np.is-live .eq i:nth-child(3) { animation-delay: -.7s; }
  @keyframes np-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
  .np-clock { margin-inline-start: auto; color: var(--bone); }
  .np-song { flex: 1 1 auto; min-width: 0; color: rgba(255,222,188,.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* the song on air (seo-np.js; title and artist each in a <bdi>, so the line follows the page's direction); empty in a jingle */
  .np-song:empty { display: none; }
  .well .cap.menu::before { content: ""; width: 12px; height: 9px; margin-inline-end: 6px; background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat; }
}
@media (prefers-reduced-motion: reduce) { .np .eq i { animation: none !important; } }
/* the إهداء ticker once the dedications are in: they crawl, the tab says إهداء */
.tick.is-ded .win { padding: 0; direction: ltr; }   /* the crawl runs the same on every page; each message keeps its own direction */
.tick .crawl { display: inline-flex; align-items: center; white-space: nowrap; animation: ded-crawl 60s linear infinite; }
.tick .crawl .msg, .tick .crawl .sep { padding: 0 10px; }
@keyframes ded-crawl { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .tick .crawl { animation: none; } }
/* lists of links as chips (a room's genres, a show's genres, its hosts…) */
p.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
p.chips .lbl { flex: 0 0 100%; font: 400 11px/1 var(--pixel); letter-spacing: .24em; text-transform: uppercase; color: var(--bone-dim); margin: 4px 0 2px; }
[lang="ar"] p.chips .lbl { font: 700 13px/1 "Cairo", var(--ar); letter-spacing: 0; }
p.chips a { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; border-radius: 999px; text-decoration: none;
  font: 400 12px/1.2 var(--pixel); color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-strong); }
p.chips a:hover { color: #0b0b0d; background: var(--racc-t); box-shadow: none; }
[lang="ar"] p.chips a { font: 600 13px/1.2 "Cairo", var(--ar); }
/* one play key per screen: where the big Listen sits under the title, the round ▶ beside it steps aside (share stays) */
.sb-main:has(+ .air) .rnd.play { display: none; }
/* lists: the name and its week; the secondary small print (channel · host · crate) stays in the HTML, out of sight */
li > small:not(.when) { display: none; }
details.more-list { margin: -6px 0 12px; }
details.more-list > summary { list-style: none; cursor: pointer; display: inline-block; padding: 4px 11px; border-radius: 999px; font: 400 12px/1.2 var(--pixel); color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-strong); }
details.more-list > summary::-webkit-details-marker { display: none; }
ul.tail:empty { display: none; }

/* ══ ATMOSPHERE + CHIPS (10-15, "more appealing") ══ */
/* the song box carries its own artwork behind the title: blurred, dimmed, tinted toward the room's colour — every page gets its own light */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -48px; z-index: 0; pointer-events: none; background: var(--art, none) center / cover no-repeat;
  filter: blur(34px) saturate(1.25) brightness(.42); opacity: .85; transform: translateZ(0); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 8, .15) 0%, rgba(5, 5, 8, .55) 55%, rgba(5, 5, 8, .9) 100%), radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--racc) 18%, transparent), transparent 60%); }
.hero[style*="--art"] { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), inset 0 0 0 1px color-mix(in srgb, var(--racc) 45%, var(--line-strong)); }
.hero > * { position: relative; z-index: 1; }
.hero .cover { box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .8), inset 0 0 0 2px var(--racc); }
/* bullet lists read as the player's pills: one chip per item, the small print inside it */
.more ul:not(.ss-list), .hero ul:not(.ss-list) { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.more ul:not(.ss-list) > li, .hero ul:not(.ss-list) > li { margin: 0; max-width: 100%; padding: 7px 12px 8px; border-radius: 999px; background: #0b0b10; box-shadow: inset 0 0 0 1px var(--hair); font-size: .92em; line-height: 1.35; transition: box-shadow .15s ease-out, background-color .15s ease-out; }
.more ul:not(.ss-list) > li:empty, .hero ul:not(.ss-list) > li:empty { display: none; }
.more ul:not(.ss-list) > li:hover, .hero ul:not(.ss-list) > li:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--racc) 60%, transparent); background: #0e0e14; }
.more ul:not(.ss-list) > li > a:first-child, .hero ul:not(.ss-list) > li > a:first-child { color: var(--bone); }
.more ul:not(.ss-list) > li small { color: var(--bone-faint); }
.more ul:not(.ss-list) > li > a:first-child:hover { color: var(--racc-t); text-decoration: none; }
/* the sky box in the rail sits a little closer and quieter on a laptop */
@media (min-width: 960px) { .rail .sky { height: 170px; margin-top: 8px; opacity: .92; } }

/* ══ SECTION CARDS + COVER CARDS (10-15) ══ */
.more { min-width: 0; }
.sec { margin-top: 12px; }
.sec > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.more > .sec > :last-child { margin-bottom: 0; }
.card { transition: transform .15s ease-out; }
.card:hover { transform: translateY(-2px); }
.card:hover img, .card:hover .noart { box-shadow: inset 0 0 0 2px var(--racc), 0 12px 26px -12px color-mix(in srgb, var(--racc) 60%, transparent); }
.card .noart { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 8px; background: #0b0b10 radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--racc) 14%, transparent), transparent 70%); box-shadow: inset 0 0 0 1px var(--hair); }
.card img { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); transition: box-shadow .15s ease-out; }
@media (min-width: 1600px) { .more > .sec { display: inline-block; width: 100%; margin-top: 0; margin-bottom: 14px; } .more { margin-top: 12px; } }

/* ══ THE SKY WITH THE REAL FIGURES (10-15): the five rooms as the player's constellations ══ */
.sky { height: 250px; }
.sky .sk-lbl { gap: 2px; }
.sky .sk-lbl .fig { display: block; width: 86px; height: 86px; margin-bottom: 2px; }
.sky .sk-lbl .fig .roomsky { width: 100%; height: 100%; max-width: none; overflow: visible; }
.sky .sk-lbl .fig .ln line { stroke: rgba(255, 222, 188, .34); stroke-width: .7; }
.sky .sk-lbl .fig .st circle { fill: #e9dfcd; }
.sky .sk-lbl .fig .g { fill: rgba(255, 222, 188, .5); opacity: .1; animation: none; }
.sky .sk-lbl.on .fig .ln line { stroke: var(--racc); stroke-opacity: .6; }
.sky .sk-lbl.on .fig .st circle { fill: #fff6ea; }
.sky .sk-lbl.on .fig .g { fill: var(--racc); opacity: .28; }
.sky .sk-lbl.on .fig .art { opacity: .55; }
.sky .sk-lbl .fig .art { opacity: 0; }
.sky .sk-lbl:hover .fig .ln line { stroke: rgba(255, 222, 188, .6); }
@media (prefers-reduced-motion: no-preference) { .sky .sk-lbl.on .fig .g { animation: sky-breathe 4s ease-in-out infinite; } }
@media (max-width: 420px) { .sky .sk-lbl .fig { width: 72px; height: 72px; } .sky { height: 236px; } }
@media (min-width: 960px) { .rail .sky { height: 250px; opacity: 1; } .sky .sk-lbl .fig { width: 80px; height: 80px; } }

/* ══ PAGESPEED 10-15: contrast, link affordance, no layout shift from the cover ══ */
:root { --bone-faint: rgba(255, 222, 188, .62); }
.sub { color: rgba(255, 222, 188, .8); }
.hero .cover, .cover { aspect-ratio: 1 / 1; height: auto; }
.hero .cover { width: 100%; max-width: 320px; }
@media (min-width: 960px) { .rail .hero .cover { max-width: none; } }
.more p a:not(.cta), .more li a:not(.card), .hero p a:not(.cta):not(.rnd), .faq a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--flame) 55%, transparent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
.more li a:not(.card):hover, .more p a:not(.cta):hover { text-decoration-color: var(--racc-t); }

/* ══ INDEX CARDS WITH PICTURES (10-15): cover mosaics for hosts, genres and channels; the constellation on each room card ══ */
.card .mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; aspect-ratio: 1; margin-bottom: 8px; overflow: hidden; background: #0b0b10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); transition: box-shadow .15s ease-out; }
.card .mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; aspect-ratio: auto; box-shadow: none; }
.card .mosaic.n1 img { grid-column: 1 / -1; grid-row: 1 / -1; }
.card .mosaic.n2 img { grid-row: 1 / -1; }
.card .mosaic.n3 img:first-child { grid-row: 1 / -1; }
.card:hover .mosaic { box-shadow: inset 0 0 0 2px var(--racc), 0 12px 26px -12px color-mix(in srgb, var(--racc) 60%, transparent); }
.card.room[data-room="Morning"] { --racc: #ffc44e; --racc-t: #ffc44e; }
.card.room[data-room="Work"] { --racc: #475dff; --racc-t: #8a97ff; }
.card.room[data-room="Cruise"] { --racc: #85daff; --racc-t: #85daff; }
.card.room[data-room="Night"] { --racc: #ff6a3d; --racc-t: #ff6a3d; }
.card.room[data-room="Party"] { --racc: #d4ff00; --racc-t: #d4ff00; }
.card.room .fig { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 8px; background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--racc) 12%, #05060a), #000 70%); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .15s ease-out; }
.card.room .fig .roomsky { width: 86%; height: 86%; max-width: none; }
.card.room .fig .roomsky .art { opacity: .45; }
.card.room:hover .fig { box-shadow: inset 0 0 0 2px var(--racc); }
.card.room b { color: var(--racc-t); }

/* ══ CONTRAST (Lighthouse 10-15): the quiet rooms' Arabic names, the brand's hidden name ══ */
.sky .sk-lbl i { opacity: 1; color: rgba(255, 222, 188, .66); }
.sky .sk-lbl.on i { color: rgba(255, 222, 188, .9); }
nav.top .brand b, nav.top .brand span:not(.brand-mark) { color: var(--bone); background: #000; }
/* LIVE now on show cards (seo-time.js, 10-15): the show on air wears a badge in the room's colour and leads its grid; the others
   carry a "next: tonight 22:00" pill. Both sit over the picture (nothing below moves); a card without one keeps them in the flow. */
.card { position: relative; }
.live-badge, .nx { display: inline-flex; align-items: center; gap: 5px; font: 400 11px/1 var(--pixel); letter-spacing: .05em; border-radius: 999px; white-space: nowrap; }
.live-badge { color: #050508; background: var(--racc); padding: 4px 8px 4px 6px; box-shadow: 0 0 12px var(--racc); text-transform: uppercase; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #050508; }
.nx { color: var(--bone); background: rgba(5, 5, 8, .78); border: 1px solid var(--line-strong); padding: 3px 8px; backdrop-filter: blur(2px); }
.card:has(> img, > .noart) > .live-badge, .card:has(> img, > .noart) > .nx { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 1; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; }
.card:not(:has(> img, > .noart)) > .live-badge, .card:not(:has(> img, > .noart)) > .nx { margin: 0 0 6px; }
.card:not(:has(> img, > .noart)) > .nx { margin: 6px 0 0; }
li > .live-badge { margin-inline-end: 6px; vertical-align: 1px; }
li > .nx { margin-inline-start: 8px; padding: 2px 7px; }
.card.is-live img, .card.is-live .noart { box-shadow: inset 0 0 0 2px var(--racc), 0 0 22px rgba(0, 0, 0, .4); }
.card.is-live b { color: var(--racc-t); }
@media (prefers-reduced-motion: no-preference) { .live-badge i { animation: live-pulse 1.3s ease-in-out infinite; } @keyframes live-pulse { 50% { opacity: .2; } } }

/* ══ FILLING THE SPACE (10-24): from 1100px the sections pack in a grid — small ones side by side, the card grids,
   schedule rows and tables across the full width; nothing stacks in one narrow column with sky to its right ══ */
@media (min-width: 1100px) {
  .more { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 12px; align-items: start; margin-top: 12px; }
  .more > .sec { margin-top: 0; min-width: 0; }
  .more > .sec:has(.grid), .more > .sec:has(.ss-list), .more > .sec:has(table), .more > .sec:has(.roomsky-box), .more > .sec:has(#music-map), .more > .sec:has(details) { grid-column: 1 / -1; }
  .more > .sec:only-child { grid-column: 1 / -1; }
}
@media (min-width: 1600px) { .more { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } }

/* ══ POSTER CARDS + THE SKY ON PHONES (10-24) ══ */
/* the name sits ON the picture, over a dark gradient, like a poster; the day chips and "next" stay under it */
.card:has(> img, > .mosaic, > .fig, > .noart) { display: grid; grid-template-columns: 100%; overflow: hidden; border-radius: 3px; }
.card:has(> img, > .mosaic, > .fig, > .noart) > img, .card > .mosaic, .card > .fig, .card > .noart { grid-area: 1 / 1; margin-bottom: 0; }
.card:has(> img, > .mosaic, > .fig, > .noart) > b { grid-area: 1 / 1; align-self: end; z-index: 1; margin: 0; padding: 36px 10px 9px; color: #fff6ea; text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  background: linear-gradient(180deg, rgba(5, 5, 8, 0) 0%, rgba(5, 5, 8, .5) 42%, rgba(5, 5, 8, .88) 100%); }
.card:has(> img, > .mosaic, > .fig, > .noart) > b + small, .card:has(> img, > .mosaic, > .fig, > .noart) > b + .when { margin-top: 8px; }
.card:has(> img, > .mosaic, > .fig, > .noart) > small { padding: 0 2px; }
.card:has(> img, > .mosaic, > .fig, > .noart) > small:last-child { margin-bottom: 4px; }
.card.room b { color: var(--racc-t); }
.card > img, .card > .mosaic img { transition: transform .35s ease-out, box-shadow .15s ease-out; transform-origin: 50% 50%; }
.card:hover > img, .card:hover > .mosaic img { transform: scale(1.04); }
.card:hover { transform: none; }
/* the rooms sky shows on phones too — after the song box, compact, so Listen stays on the first screen */
@media (max-width: 959px) {
  .rail .sky { display: block; order: 5; height: 196px; margin: 10px calc(-1 * var(--gutter)) 0; box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--line); }
  .rail .hero { order: 3; }
  .sky .sk-lbl .fig { width: 64px; height: 64px; }
}

/* ══ COLOUR PER UNIT ON THE SCHEDULE · THE ROOM'S FIGURE IN ITS SONG BOX · HEADS A TOUCH LARGER (10-24) ══ */
.ss-list[data-unit="Morning"] { --racc: #ffc44e; --racc-t: #ffc44e; }
.ss-list[data-unit="Work"] { --racc: #475dff; --racc-t: #8a97ff; }
.ss-list[data-unit="Cruise"] { --racc: #85daff; --racc-t: #85daff; }
.ss-list[data-unit="Night"] { --racc: #ff6a3d; --racc-t: #ff6a3d; }
.ss-list[data-unit="Party"], .ss-list[data-unit="Electronic"] { --racc: #d4ff00; --racc-t: #d4ff00; }
.ss-list[data-unit="Arabica"] { --racc: #ff6a3d; --racc-t: #ff6a3d; }
.ss-list[data-unit="Random"] { --racc: #85daff; --racc-t: #85daff; }
.roomfig { position: relative; margin: 6px 0 18px; aspect-ratio: 1; width: min(320px, 100%); display: grid; place-items: center; border-radius: 6px;
  background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--racc) 14%, #05060a), #000 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--racc) 45%, transparent), 0 10px 30px -8px rgba(0, 0, 0, .8); }
.roomfig .roomsky { width: 88%; height: 88%; max-width: none; }
.roomfig .roomsky .art { opacity: .5; }
@media (min-width: 960px) { .rail .roomfig { width: 100%; } }
@media (max-width: 560px) { .roomfig { width: 100%; } }
h2 { font-size: 12px; }
/* PLAY-NOW (2026-10-24): the small ▶ seo-play.js puts beside a show name in a list (and inside a show card) — it opens the
   player on demand on that show. A ring in the text colour, like the round keys; inside a card it sits on the picture. */
.play-mini { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.7em; block-size: 1.7em; margin-inline-start: .4em;
  border: 1px solid currentColor; border-radius: 50%; font-size: .78em; line-height: 1; text-decoration: none; vertical-align: middle; opacity: .8; cursor: pointer; }
.play-mini:hover, .play-mini:focus-visible { opacity: 1; }
a.card { position: relative; }
a.card .play-mini { position: absolute; inset-block-start: .5em; inset-inline-end: .5em; margin: 0; inline-size: 2.1em; block-size: 2.1em; font-size: .9em;
  background: rgba(0, 0, 0, .62); color: #fff; border-color: rgba(255, 255, 255, .7); opacity: .92; }

/* ══ 🔔 REMIND ME (10-24): under Listen on a show page — the show's weekly airing into the visitor's calendar (/ics, seo-time.js) ══ */
.remind { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
details.remind { display: block; }
.remind .bell { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font: 400 13px/1.2 var(--pixel); color: var(--bone);
  text-decoration: none; box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; -webkit-tap-highlight-color: transparent; }
details.remind > summary { list-style: none; }
details.remind > summary::-webkit-details-marker { display: none; }
.remind .bell:hover, .remind .bell:focus-visible, details.remind[open] > summary.bell { box-shadow: inset 0 0 0 1px var(--racc); color: var(--racc-t); }
.remind .bells { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.remind .bells a { font: 400 12px/1.3 var(--pixel); color: var(--bone); text-decoration: none; padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); }
.remind .bells a:hover, .remind .bells a:focus-visible { box-shadow: inset 0 0 0 1px var(--racc); color: var(--racc-t); }
.remind .bell-ok { display: inline-block; margin-top: 4px; font: 400 12px/1.3 var(--pixel); color: var(--racc-t); }
.remind .bell-ok[hidden] { display: none; }
[lang="ar"] .remind .bell, [lang="ar"] .remind .bells a, [lang="ar"] .remind .bell-ok { font-family: "Cairo", var(--ar); font-weight: 700; }
.card:has(.play-mini) > .live-badge, .card:has(.play-mini) > .nx { max-width: calc(100% - 16px - 2.9em); }   /* clear of the ▶ (seo-play.js) in the other top corner */

/* ══ THE MOSAIC COVER (10-24): a host's, channel's, genre's or country's four pictures where a show has its cover ══ */
.mosaic-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; width: min(320px, 100%); aspect-ratio: 1; margin: 6px 0 18px; padding: 2px; overflow: hidden; border-radius: 4px;
  background: #0b0b10; box-shadow: inset 0 0 0 2px var(--racc), 0 10px 30px -8px rgba(0, 0, 0, .8); }
.mosaic-hero img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; filter: saturate(.95); }
@media (min-width: 960px) { .rail .mosaic-hero { width: 100%; } }
@media (max-width: 560px) { .mosaic-hero { width: 100%; } }
/* PLAY-NOW hit area (Release QA, 10-24: the card ▶ was 27 px — passes the 24 px floor, tight for a thumb): on touch screens
   each ▶ takes taps from an invisible ring around it, the look unchanged. The card's ring is all round (~45 px); a list ▶
   grows up, down and AFTER itself only, never back over the show name it follows. */
.play-mini { position: relative; }
@media (pointer: coarse) {
  .play-mini::before { content: ""; position: absolute; inset-block: -8px; inset-inline-start: -2px; inset-inline-end: -10px; border-radius: 12px; }
  a.card .play-mini::before { inset: -9px; border-radius: 50%; }
}

/* search (seo-search.js, 10-24): a field at the top of the Menu panel; the results are plain links, the tabs step aside while typing */
.find { max-width: 720px; margin: 8px 0 4px; }   /* the menu panel spans a wide screen; the field and its list keep a reading width */
.find-q { box-sizing: border-box; width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: #0b0b10; color: var(--bone);
  box-shadow: inset 0 0 0 1px var(--line-strong); font: 400 16px/1 var(--mono); -webkit-appearance: none; appearance: none; }   /* 16px: iOS doesn't zoom in on focus */
[lang="ar"] .find-q { font-family: "Cairo", var(--ar); }
.find-q::placeholder { color: var(--bone-faint); opacity: 1; }
.find-q:focus { outline: none; box-shadow: inset 0 0 0 2px var(--racc-t); }
.find-q::-webkit-search-cancel-button { filter: invert(1) sepia(1) saturate(2) hue-rotate(350deg); opacity: .6; }
.find-res { list-style: none; margin: 6px 0 0; padding: 0; }
.find-res a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--bone); }
.find-res a:hover, .find-res a:focus { background: rgba(255, 196, 78, .08); color: var(--racc-t); outline: none; }
.find-res a:focus-visible { box-shadow: inset 0 0 0 2px var(--racc-t); }
.find-res b { min-width: 0; font: 400 15px/1.3 var(--pixel); overflow-wrap: anywhere; }
.find-res small { flex: none; max-width: 48%; text-align: end; font: 400 10px/1.3 var(--pixel); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
[lang="ar"] .find-res b, [lang="ar"] .find-res small { font-family: "Cairo", var(--ar); letter-spacing: 0; }
[lang="ar"] .find-res b { font-weight: 600; }
.find-msg { margin: 10px 6px 2px; font: 400 11px/1.5 var(--pixel); letter-spacing: .06em; color: var(--bone-dim); }
[lang="ar"] .find-msg { font: 400 13px/1.6 "Cairo", var(--ar); letter-spacing: 0; }
.find-msg:empty { display: none; }
.find-msg a { color: var(--racc-t); }
nav.top .menu-panel.finding .tabs, nav.top .menu-panel.finding .langs { display: none; }

/* ══ MOTION, CAROUSELS, THE FOOTER (10-24) ══ */
/* phones: a short strip of cards (up to eight) swipes sideways with snap, like the player's rows; a long grid stays two-up */
@media (max-width: 559px) {
  .grid:not(:has(> :nth-child(9))):has(> :nth-child(3)) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(-1 * var(--gutter)) 14px; padding: 2px var(--gutter) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .grid:not(:has(> :nth-child(9))):has(> :nth-child(3))::-webkit-scrollbar { display: none; }
  .grid:not(:has(> :nth-child(9))):has(> :nth-child(3)) > .card { flex: 0 0 62vw; max-width: 260px; scroll-snap-align: start; }
}
/* the footer: the mark, the station line, the sections as pills, the small print */
footer.foot { display: grid; gap: 14px; margin-top: 28px; padding: 22px 0 0; border-top: 1px solid var(--line); font: 400 12px/1.5 var(--mono); letter-spacing: 0; text-transform: none; color: var(--bone-dim); }
footer.foot .foot-brand { display: flex; align-items: center; gap: 14px; }
footer.foot .foot-brand .brand-mark { height: 34px; }
footer.foot .foot-brand b { display: block; font: 400 13px/1.2 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--bone); }
footer.foot .foot-brand b span { font: 700 13px/1 "Cairo", var(--ar); letter-spacing: 0; text-transform: none; color: var(--racc-t); }
footer.foot .foot-brand p { margin: 2px 0 0; font: 400 11px/1.4 var(--pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); }
footer.foot .foot-links { display: flex; flex-wrap: wrap; gap: 6px; }
footer.foot .foot-links a { display: inline-block; padding: 6px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); background: #0b0b10; text-decoration: none; font: 400 10px/1 var(--pixel); letter-spacing: .18em; text-transform: uppercase; color: var(--bone-dim); }
footer.foot .foot-links a:hover, footer.foot .foot-links a[aria-current] { color: var(--racc-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--racc) 60%, transparent); }
footer.foot .foot-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font: 400 10px/1.6 var(--pixel); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-faint); }
footer.foot .foot-meta a { color: var(--bone-dim); text-decoration: none; }
footer.foot .foot-meta a:hover, footer.foot .foot-meta a[aria-current] { color: var(--racc-t); }
footer.foot .foot-meta a[lang="ar"] { font: 600 12px/1 "Cairo", var(--ar); letter-spacing: 0; }
footer.foot span[lang="ar"] { color: #e6765e; }
[lang="ar"] footer.foot .foot-links a, [lang="ar"] footer.foot .foot-meta { font-family: "Cairo", var(--pixel); letter-spacing: 0; font-size: 12px; }
@media (max-width: 560px) { footer.foot { margin-top: 20px; } }

/* ══ THE ACTION ROW, TIDIED (10-24): Play full width · Listen live + the on-air line on one row · Remind me as the same ring pill ══ */
.air { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 10px; margin: 4px 0 10px; }
.air .cta.play, .air .cta:not(.quiet) { grid-column: 1 / -1; justify-self: stretch; }
.air .cta.quiet { grid-column: 1; }
.air .air-status { grid-column: 2; justify-self: start; }
.air .air-status:empty { display: none; }
.remind { margin: 0 0 16px; }
.remind a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 22px; background: #000; box-shadow: inset 0 0 0 2px var(--bone-dim); color: var(--bone); text-decoration: none;
  font: 400 10px/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; }
.remind a:hover { box-shadow: inset 0 0 0 2px var(--bone); }
[lang="ar"] .remind a { font: 700 13px/1 "Cairo", var(--ar); letter-spacing: 0; }
/* a long list of rows spans the content column; only short sections sit side by side */
@media (min-width: 1100px) { .more > .sec:has(ul > li:nth-child(7)) { grid-column: 1 / -1; } }

/* ══ THE MENU PANEL (10-24): the song box's material, the sections as ring pills, the search as the chat composer's field ══ */
nav.top .menu-panel { padding: 10px var(--gutter) 16px; background: #050508; box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -12px rgba(0, 0, 0, .8); border-radius: 0 0 12px 12px; }
nav.top .menu-panel .find { max-width: none; margin: 4px 0 10px; }
nav.top .menu-panel .find .find-q { width: 100%; height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: #000; color: var(--bone);
  box-shadow: inset 0 0 0 2px var(--bone-dim); font: 400 16px/1 var(--mono); outline: none; -webkit-appearance: none; appearance: none; }   /* 16px: iOS does not zoom in on focus */
nav.top .menu-panel .find .find-q::placeholder { color: var(--bone-faint); }
nav.top .menu-panel .find .find-q:focus { box-shadow: inset 0 0 0 2px var(--racc); }
nav.top .menu-panel .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
nav.top .menu-panel .tabs a { height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border: 0; border-radius: 22px; background: #000; box-shadow: inset 0 0 0 2px var(--bone-dim); color: var(--bone);
  font: 400 10px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase; }
nav.top .menu-panel .tabs a:hover { box-shadow: inset 0 0 0 2px var(--bone); color: var(--bone); }
nav.top .menu-panel .tabs a[aria-current] { color: #050508; background: var(--racc-t); box-shadow: 0 0 12px color-mix(in srgb, var(--racc) 55%, transparent); }
nav.top .menu-panel .tabs a[aria-current]::after { display: none; }
nav.top .menu-panel .langs { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 0; font: 400 9px/1 var(--pixel); letter-spacing: .28em; text-transform: uppercase; color: var(--bone-faint); }
nav.top .menu-panel .langs a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--hair); background: #0b0b10; color: var(--bone-dim); font: 400 10px/1 var(--pixel); letter-spacing: .14em; text-decoration: none; }
nav.top .menu-panel .langs a[lang="ar"] { font: 600 13px/1 "Cairo", var(--ar); letter-spacing: 0; }
nav.top .menu-panel .langs a[aria-current] { color: var(--racc-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--racc) 60%, transparent); }
[lang="ar"] nav.top .menu-panel .tabs a { font: 600 13px/1 "Cairo", var(--ar); letter-spacing: 0; }
[lang="ar"] nav.top .menu-panel .langs { letter-spacing: 0; font-family: "Cairo", var(--pixel); font-size: 12px; }
@media (max-width: 560px) { nav.top .menu-panel .tabs a { flex: 1 1 calc(50% - 8px); justify-content: center; } }

/* ══ SEARCH RESULTS AS PILL ROWS · THE ARTISTS' A TO Z AS CHIPS (10-24) ══ */
.find-res { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.find-res a { align-items: center; padding: 10px 14px; border-bottom: 0; border-radius: 22px; background: #000; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .12s ease-out, color .12s ease-out; }
.find-res a:hover, .find-res a:focus { background: #0b0b10; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--racc) 60%, transparent); }
.find-res small { padding: 4px 8px 3px; border-radius: 999px; background: color-mix(in srgb, var(--racc) 14%, #0b0b10); color: var(--racc-t); font-size: 9px; letter-spacing: .16em; }
.find-msg { margin: 10px 4px 0; font: 400 10px/1.4 var(--pixel); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-faint); }
.az { gap: 6px; }
.more ul.az > li { padding: 6px 11px 7px; font-size: .9em; }
.more ul.az > li > a:first-child { color: var(--bone-dim); }
.more ul.az > li:hover > a:first-child { color: var(--racc-t); }

/* ══ THE DIAL DRAWS THE ROOM (10-24): on a room's page the header carries the room's figure, as the player's header does ══ */
nav.top .dial.has-fig { display: flex; justify-content: center; align-items: center; height: 44px; }
nav.top .dial.has-fig .roomsky { width: auto; height: 100%; max-width: none; overflow: visible; }
nav.top .dial.has-fig .roomsky .ln line { stroke: var(--racc); stroke-opacity: .55; stroke-width: 1.1; }
nav.top .dial.has-fig .roomsky .st circle { fill: #fff6ea; }
nav.top .dial.has-fig .roomsky .g { fill: var(--racc); opacity: .3; }
@media (min-width: 960px) { nav.top .dial.has-fig { height: 54px; } }

/* ══ THE SCHEDULE IN TWO COLUMNS ON LAPTOPS (10-24): the rows flow side by side instead of one long column with sky beside it ══ */
@media (min-width: 1100px) {
  .ss-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 6px 28px; align-items: start; }
  .ss-row { margin: 0; }
}