/* AMAR Radio — jukebox player ([amar_jukebox]).
   The cabinet is drawn entirely in CSS/SVG: walnut, brass, AMAR navy (#32365f) and amber light.
   --lvl (0…1) is set by jukebox.js from the live audio level and drives the glow. */

.ajb {
  --navy: #32365f; --navy-deep: #232646; --navy-ink: #15172c;
  --brass-hi: #f7dd9a; --brass: #c9993f; --brass-lo: #6f5019;
  --wood-hi: #7d4b2b; --wood: #57301a; --wood-lo: #2f190c;
  --amber: #ffb54a; --amber-hot: #ff8a1f; --cream-light: #fff3cf;
  --on-air: #ff5a3c;
  --lvl: 0;
  --ff: var(--font, 'Manrope', Arial, sans-serif);
  --ff-ar: var(--font-ar, 'Noto Sans Arabic', Tahoma, sans-serif);
  font-family: var(--ff);
  color: #fff;
  margin: 8px auto 48px;
  display: flex; flex-direction: column; /* lets the wide shape put the programme line above the cabinet */
  width: 100%;
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
}
.ajb[dir="rtl"] { font-family: var(--ff-ar); }
.ajb [lang="ar"] { font-family: var(--ff-ar); }
.ajb [lang="en"], .ajb [lang="fr"] { font-family: var(--ff); }
.ajb[dir="rtl"] [dir="ltr"] { text-align: right; }
.ajb[dir="ltr"] [dir="rtl"] { text-align: left; }
.ajb *, .ajb *::before, .ajb *::after { box-sizing: border-box; }
.ajb :where(button) { font: inherit; color: inherit; }
.ajb :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- materials ---------- */
.ajb__wood {
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 9%, transparent 91%, rgba(0,0,0,.4)),
    repeating-linear-gradient(91deg, rgba(255,226,180,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(89.3deg, rgba(0,0,0,.09) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(90.6deg, rgba(255,200,140,.04) 0 6px, transparent 6px 31px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 45%, var(--wood-lo));
}
.ajb__brass-edge { box-shadow: inset 0 0 0 2px var(--brass-lo), inset 0 0 0 3px var(--brass-hi), inset 0 0 0 5px var(--brass), inset 0 0 0 6px var(--brass-lo); }

/* ---------- cabinet ---------- */
.ajb__cabinet { position: relative; width: 100%; max-width: 580px; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(20,12,6,.35)); }
.ajb__marquee-tx { display: flex; flex-direction: column; align-items: center; gap: 5px; }

/* crown (arched top) */
.ajb__crown {
  position: relative;
  aspect-ratio: 580 / 250;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  padding: 4.2% 5% 0;
}
.ajb__crown::before { /* brass arch band */
  content: ""; position: absolute; inset: 2.2% 2.6% 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border: 3px solid var(--brass); border-bottom: 0;
  box-shadow: 0 -1px 0 var(--brass-hi), inset 0 1px 0 var(--brass-lo);
  pointer-events: none;
}
.ajb__crown-in {
  height: 100%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.32fr 1fr; gap: 2.2%;
  background: var(--brass-lo);
  padding: 1.4% 1.4% 0;
}
.ajb__lattice {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23d9ac52' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='11' y='11' width='22' height='22'/%3E%3Crect x='11' y='11' width='22' height='22' transform='rotate(45 22 22)'/%3E%3Cpath d='M22 0v6.4M22 37.6V44M0 22h6.4M37.6 22H44'/%3E%3C/g%3E%3C/svg%3E") center / 22% auto,
    radial-gradient(ellipse at 50% 70%, var(--cream-light) 0%, var(--amber) 30%, #c45f12 62%, #3b1606 100%);
}
.ajb__lattice::after { /* dims the light when the radio is off */
  content: ""; position: absolute; inset: 0;
  background: var(--navy-ink);
  opacity: calc(.5 - var(--lvl) * .4);
  transition: opacity .25s;
}
.ajb.is-playing .ajb__lattice::after { opacity: calc(.34 - var(--lvl) * .3); }
.ajb__marquee {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6%;
  padding: 12% 6% 9%;
  background: radial-gradient(ellipse at 50% 30%, #3b4074, var(--navy) 60%, var(--navy-deep));
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 0 4px var(--navy-deep), inset 0 0 0 5px var(--brass-lo);
  text-align: center;
}
.ajb__emblem { width: 74%; height: auto; display: block; filter: drop-shadow(0 0 6px rgba(255,220,150,.35)); }
.ajb__marquee-t { margin: 0; line-height: 1.25; letter-spacing: .06em; font-size: clamp(7.5px, 1.9vw, 11px); color: var(--brass-hi); text-transform: uppercase; }
.ajb__marquee-t[lang="ar"] { letter-spacing: 0; font-size: clamp(9px, 2.2vw, 13px); text-transform: none; }
.ajb__diamond { width: 8px; height: 8px; transform: rotate(45deg); border: 1.5px solid var(--brass); display: inline-block; flex: none; }

/* body: tubes + centre */
.ajb__body {
  display: grid; grid-template-columns: 6.5% minmax(0,1fr) 6.5%; gap: 2.4%;
  padding: 2.4% 3% 2.4%;
  position: relative;
}
.ajb__tube {
  position: relative; border-radius: 999px;
  background: linear-gradient(90deg, #8a3d00, #f39a2c 22%, #ffe1a0 45%, #fff6dc 50%, #ffe1a0 55%, #f39a2c 78%, #8a3d00);
  box-shadow: 0 0 calc(10px + var(--lvl) * 26px) rgba(255,160,40, calc(.35 + var(--lvl) * .55)), inset 0 0 6px rgba(80,30,0,.6);
  filter: saturate(.85) brightness(.86);
  transition: filter .4s, box-shadow .12s;
}
.ajb.is-playing .ajb__tube { filter: saturate(1) brightness(calc(.95 + var(--lvl) * .25)); }
.ajb__tube i { /* brass rings */
  position: absolute; inset-inline: -14%; height: 3.2%; min-height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi) 40%, var(--brass) 60%, var(--brass-lo));
  box-shadow: 0 2px 3px rgba(0,0,0,.45);
}
.ajb__tube i:nth-child(1) { top: -1%; } .ajb__tube i:nth-child(2) { top: 33%; } .ajb__tube i:nth-child(3) { top: 66%; } .ajb__tube i:nth-child(4) { bottom: -1%; }

.ajb__centre { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; min-width: 0; }
.ajb__row { display: grid; grid-template-columns: minmax(0,.52fr) minmax(0,1.6fr) minmax(0,.52fr); gap: 10px; align-items: stretch; }

/* plaques */
.ajb__plaque {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 6px; text-align: center;
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--brass), inset 0 0 0 3px var(--navy-deep), 0 2px 4px rgba(0,0,0,.4);
  color: var(--brass-hi);
}
.ajb__plaque p { margin: 0; font-size: clamp(8px, 1.6vw, 11px); line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.ajb__plaque p[lang="ar"] { font-size: clamp(10px, 2.1vw, 13.5px); letter-spacing: 0; line-height: 1.6; }

/* window with turntable */
.ajb__window {
  position: relative; aspect-ratio: 1.45 / 1; width: 100%; height: auto; align-self: start;
  border-radius: 22px 22px 8px 8px;
  padding: 7px;
  background: linear-gradient(135deg, var(--brass-hi), var(--brass) 30%, var(--brass-lo) 70%, var(--brass));
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.ajb__glass {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 16px 16px 4px 4px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,214,140,.55), transparent 60%),
    linear-gradient(180deg, #6b3d1f, #3d200f 70%, #2a150a);
  box-shadow: inset 0 10px 30px rgba(0,0,0,.6);
}
.ajb__glass::after { /* reflections */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.18) 0 8%, transparent 8% 30%, rgba(255,255,255,.07) 30% 34%, transparent 34%);
}
.ajb__wall-t { position: absolute; inset-inline: 0; top: 9%; margin: 0; text-align: center; color: rgba(255,226,170,.85); font-size: clamp(8px, 1.8vw, 11px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; }
.ajb__wall-t span[lang="ar"] { display: block; letter-spacing: 0; font-size: 1.2em; text-transform: none; }
.ajb__deck-wrap { position: absolute; inset-inline: 4%; bottom: -14%; height: 92%; perspective: 560px; }
.ajb__deck {
  position: absolute; inset: 0;
  transform: rotateX(56deg); transform-origin: 50% 100%;
}
.ajb__plinth-top { /* turntable base */
  position: absolute; inset: 4% 2% 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #2a2a2e, #121214);
  box-shadow: inset 0 0 0 3px var(--brass-lo), inset 0 0 0 4px var(--brass), 0 18px 18px rgba(0,0,0,.6);
}
.ajb__platter {
  position: absolute; width: 80%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-58%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #555 0 60%, var(--brass) 61%, var(--brass-hi) 63%, var(--brass-lo) 66%);
}
.ajb__record {
  position: absolute; inset: 3%; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255,255,255,.07) 31.5% 32%, transparent 32.5%),
    repeating-radial-gradient(circle, #111 0 1.1px, #1f1f22 1.3px 2.4px),
    #111;
  box-shadow: 0 0 0 1px #000;
}
.ajb__record::after { /* light streak */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 12%, rgba(255,255,255,.13) 16%, transparent 20% 62%, rgba(255,255,255,.1) 66%, transparent 70%);
}
.ajb__label {
  position: absolute; inset: 33%; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle, #fff 0 4%, var(--amber-hot) 5% 100%);
  color: #2a1204; font-weight: 700; font-size: clamp(5px, 1.2vw, 8px); line-height: 1.15;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
  overflow: hidden;
}
/* scans from AMAR's collection: the whole disc turns as the record (.has-disc), or a close photo
   of the label fills the label (.has-img); jukebox.js sets the picture */
.ajb.has-disc .ajb__record { background-color: #111; background-size: cover; background-position: center; background-repeat: no-repeat; }
.ajb.has-disc .ajb__label { opacity: 0; }
.ajb__label.has-img { background-color: #111; background-size: cover; background-position: center; background-repeat: no-repeat; }
.ajb__label.has-img > div { visibility: hidden; }
.ajb.has-scan .ajb__deck-wrap { cursor: zoom-in; }

/* "See the disc": a small brass plaque on the window's back wall */
.ajb .ajb__cabinet button.ajb__see {
  position: absolute; z-index: 3; top: 40%; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 0; margin: 0; padding: 5px 11px 5px 9px; border: 0; border-radius: 4px; cursor: pointer;
  background: linear-gradient(180deg, #f1d999, #c4973f 60%, #9c7428);
  color: #2b1a05; font-size: clamp(10px, 1.5vw, 12px); font-weight: 700; line-height: 1.2; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255,240,200,.5), 0 2px 5px rgba(0,0,0,.55);
}
.ajb[dir="rtl"] .ajb__cabinet button.ajb__see { padding: 5px 9px 5px 11px; }
.ajb .ajb__cabinet button.ajb__see:hover { background: linear-gradient(180deg, #f8e4ad, #d2a54c 60%, #a87e2e); }
.ajb .ajb__cabinet button.ajb__see[hidden] { display: none; }
.ajb .ajb__see svg { width: 1.1em; height: 1.1em; flex: none; }

/* the disc, large */
.ajb .ajb__dlg {
  width: auto; max-width: none; max-height: none; margin: auto; padding: 0; border: 0;
  background: transparent; color: #fff; overflow: visible;
}
.ajb .ajb__dlg::backdrop { background: rgba(12, 9, 6, .94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ajb .ajb__dlg-fig { margin: 0; display: grid; justify-items: center; gap: 14px; }
.ajb .ajb__dlg-frame {
  width: min(92vw, calc(100vh - 190px), 720px); width: min(92vw, calc(100dvh - 190px), 720px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: #111; box-shadow: 0 24px 70px rgba(0,0,0,.65);
}
.ajb .ajb__dlg-img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; cursor: zoom-in; transition: transform .35s ease; }
.ajb .ajb__dlg-img.is-zoomed { transform: scale(2.2); cursor: zoom-out; }
.ajb .ajb__dlg-cap { display: grid; gap: 3px; max-width: min(92vw, 60ch); margin: 0; text-align: center; }
.ajb .ajb__dlg-t { font-size: 18px; font-weight: 700; line-height: 1.35; }
.ajb .ajb__dlg-a { font-size: 15px; color: #f2dca8; }
.ajb .ajb__dlg-m { font-size: 13px; color: rgba(255,255,255,.72); }
.ajb .ajb__dlg button.ajb__dlg-x {
  position: fixed; top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 10px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
}
.ajb .ajb__dlg button.ajb__dlg-x:hover { background: rgba(255,255,255,.26); }
.ajb .ajb__dlg-x svg { display: block; width: 100%; height: 100%; }
.ajb__label span { display: block; max-width: 86%; margin-inline: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ajb__spin { position: absolute; inset: 0; border-radius: 50%; }
.ajb.is-playing .ajb__spin { animation: ajb-spin .77s linear infinite; } /* 78 rpm */
@keyframes ajb-spin { to { transform: rotate(360deg); } }
.ajb__arm {
  position: absolute; right: 4%; top: 6%; width: 26%; height: 70%;
  transform-origin: 78% 10%; transform: rotate(18deg);
  transition: transform 1.2s cubic-bezier(.5,0,.2,1);
}
.ajb.is-playing .ajb__arm { transform: rotate(-2deg); }
.ajb__arm svg { width: 100%; height: 100%; overflow: visible; }

/* console: buttons + screen + microphone */
.ajb__buttons { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.ajb .ajb__cabinet button.ajb__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 28px; padding: 3px 4px 3px 8px; border: 0; border-radius: 5px; cursor: pointer;
  background: linear-gradient(180deg, #e9cf8f, #b98d3c);
  color: #2b1a05; font-size: clamp(8px, 1.7vw, 11px); font-weight: 700; letter-spacing: .02em; text-align: start;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.5);
  transition: transform .08s, box-shadow .08s;
}
.ajb[dir="rtl"] .ajb__cabinet button.ajb__btn { padding: 3px 8px 3px 4px; }
.ajb .ajb__cabinet button.ajb__btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.25), 0 0 1px rgba(0,0,0,.5); }
.ajb .ajb__cabinet button.ajb__btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ajb .ajb__cabinet button.ajb__btn::after { /* the round push button */
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 45%, var(--brass-lo));
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.ajb .ajb__cabinet button.ajb__btn[aria-pressed="true"] { background: linear-gradient(180deg, #ffe2a0, #f0b54f); transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.5); }
.ajb .ajb__cabinet button.ajb__btn[aria-pressed="true"]::after { background: radial-gradient(circle at 35% 30%, #fff2c8, var(--amber) 45%, #c26a08); box-shadow: 0 0 8px var(--amber); }

.ajb__screen {
  position: relative; min-height: 210px;
  border-radius: 10px; padding: 9px;
  background: linear-gradient(135deg, var(--brass-hi), var(--brass) 35%, var(--brass-lo) 75%, var(--brass));
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.ajb__screen-in {
  height: 100%; border-radius: 6px; padding: 14px 16px 12px;
  background: radial-gradient(ellipse at 50% 0%, #3c4277, var(--navy) 55%, var(--navy-deep));
  box-shadow: inset 0 0 0 1px rgba(255,220,150,.25), inset 0 0 24px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.ajb__status { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-hi); }
.ajb[dir="rtl"] .ajb__status { letter-spacing: 0; font-size: 12.5px; }
.ajb__lamp { width: 8px; height: 8px; border-radius: 50%; background: #5a4a2a; display: inline-block; margin-inline-end: 6px; vertical-align: 1px; }
.ajb.is-playing .ajb__lamp { background: var(--on-air); box-shadow: 0 0 8px var(--on-air); }
.ajb__chan { flex: none; white-space: nowrap; color: #fff2c8; }
.ajb__track { transition: opacity .5s; min-width: 0; }
.ajb__track.is-changing { opacity: 0; }
.ajb__title { margin: 4px 0 0; font-size: clamp(16px, 3.3vw, 21px); line-height: 1.3; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.ajb__title[lang="ar"] { font-family: var(--ff-ar); line-height: 1.55; }
.ajb__title-alt { margin: 2px 0 0; font-size: clamp(12px, 2.5vw, 14.5px); line-height: 1.4; color: rgba(255,240,210,.82); font-style: italic; overflow-wrap: anywhere; }
.ajb__title-alt[lang="ar"] { font-style: normal; font-family: var(--ff-ar); }
.ajb__artist { margin: 8px 0 0; font-size: clamp(13px, 2.6vw, 15.5px); color: var(--brass-hi); line-height: 1.45; overflow-wrap: anywhere; }
.ajb__artist-alt { display: block; font-size: .85em; color: rgba(247,221,154,.75); }
.ajb__meta { margin: 6px 0 0; font-size: 12.5px; color: rgba(255,255,255,.72); }
.ajb__progress { margin-top: auto; padding-top: 10px; }
.ajb__bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
.ajb__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brass), var(--amber)); transition: width 1s linear; }
.ajb[dir="rtl"] .ajb__bar { transform: scaleX(-1); }
.ajb__ep { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--amber); text-decoration: underline; text-underline-offset: 3px; line-height: 1.4; }
.ajb__ep:hover { color: var(--cream-light); }
.ajb__ep[hidden] { display: none; }
.ajb__next { margin: 6px 0 0; font-size: 11.5px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ajb__mic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ajb__mic svg { width: 64%; height: auto; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.ajb__onair {
  font-size: clamp(8px, 1.7vw, 11px); font-weight: 800; letter-spacing: .1em; padding: 4px 7px; border-radius: 3px;
  background: #2b1d10; color: #6e5634; box-shadow: inset 0 0 0 1.5px var(--brass);
  transition: color .3s, text-shadow .3s, background .3s;
  white-space: nowrap;
}
.ajb.is-playing .ajb__onair { background: #3a0d06; color: #ffd1b8; text-shadow: 0 0 6px var(--on-air), 0 0 14px var(--on-air); }

/* control panel: volume knob, VU meter, timer */
.ajb__controls {
  display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,220,150,.18), inset 0 6px 14px rgba(0,0,0,.35);
}
.ajb__ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ajb__ctl-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-hi); }
.ajb[dir="rtl"] .ajb__ctl-label { letter-spacing: 0; font-size: 12px; }
.ajb .ajb__cabinet button.ajb__knob {
  width: clamp(48px, 11vw, 66px); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; cursor: grab; touch-action: none;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,250,225,.9), transparent 22%),
    radial-gradient(circle, var(--brass-hi) 0 38%, var(--brass) 52%, var(--brass-lo) 70%),
    repeating-conic-gradient(var(--brass-lo) 0 4deg, var(--brass) 4deg 8deg);
  box-shadow: 0 0 0 3px var(--brass-lo), 0 4px 8px rgba(0,0,0,.6);
  position: relative;
}
.ajb__knob-rot { position: absolute; inset: 0; border-radius: 50%; }
.ajb__knob-rot::after { content: ""; position: absolute; left: 50%; top: 9%; width: 4px; height: 20%; margin-left: -2px; border-radius: 2px; background: var(--navy-deep); box-shadow: 0 0 0 1px rgba(255,240,200,.4); }
.ajb__vu { width: 100%; max-width: 190px; }
.ajb__vu svg { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 0 0 3px var(--brass-lo), 0 0 0 4px var(--brass), 0 3px 8px rgba(0,0,0,.55); }
.ajb__needle { transform-origin: 100px 104px; transform: rotate(-42deg); transition: transform .08s linear; }
.ajb__vu-face { transition: opacity .4s; opacity: .55; }
.ajb.is-playing .ajb__vu-face { opacity: 1; }
.ajb__time {
  min-width: 92px; padding: 7px 10px; border-radius: 6px; text-align: center; direction: ltr;
  font: 700 15px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .04em;
  color: var(--amber); background: #120c06; text-shadow: 0 0 6px rgba(255,160,40,.6);
  box-shadow: inset 0 0 0 1.5px var(--brass-lo), inset 0 2px 6px rgba(0,0,0,.8);
}
.ajb__time small { font-size: 11px; opacity: .7; }

/* speaker grille with the play medallion */
.ajb__grille {
  position: relative; aspect-ratio: 1.55 / 1;
  display: grid; grid-template-columns: 5% 1fr 5%; gap: 3%;
  padding: 3.5%; border-radius: 14px;
  background: linear-gradient(135deg, var(--brass-hi), var(--brass) 30%, var(--brass-lo) 70%, var(--brass));
}
.ajb__strip {
  border-radius: 999px;
  background: repeating-linear-gradient(180deg, var(--cream-light) 0 6px, var(--amber) 6px 12px);
  box-shadow: 0 0 calc(6px + var(--lvl) * 16px) rgba(255,160,40,.85);
  filter: brightness(.75); transition: filter .4s;
}
.ajb.is-playing .ajb__strip { filter: brightness(calc(.9 + var(--lvl) * .3)); }
.ajb__mesh { position: relative; border-radius: 6px; overflow: hidden; display: grid; place-items: center; }
.ajb__mesh.ajb__lattice { background-size: 15% auto, auto; }
.ajb .ajb__cabinet button.ajb__play {
  position: relative; z-index: 1;
  width: clamp(104px, 27vw, 150px); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle, var(--navy) 0 58%, var(--brass-lo) 59%, var(--brass-hi) 63%, var(--brass) 70%, var(--brass-lo) 74%, transparent 75%);
  color: var(--brass-hi);
  transition: transform .15s;
}
.ajb .ajb__cabinet button.ajb__play:hover { transform: scale(1.03); }
.ajb .ajb__cabinet button.ajb__play:active { transform: scale(.98); }
.ajb__play svg { width: 30%; height: auto; }
.ajb__play-l { font-size: clamp(11px, 2.4vw, 14px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ajb[dir="rtl"] .ajb__play-l { letter-spacing: 0; font-size: clamp(12.5px, 2.8vw, 16px); }
.ajb__play .ajb__i-pause { display: none; }
.ajb.is-playing .ajb__play .ajb__i-play { display: none; }
.ajb.is-playing .ajb__play .ajb__i-pause { display: block; }
.ajb.is-loading .ajb__play svg { animation: ajb-pulse 1s ease-in-out infinite; }
@keyframes ajb-pulse { 50% { opacity: .35; } }

/* base */
.ajb__base {
  position: relative; height: 34px; margin: 0 -1.2%;
  border-radius: 6px 6px 10px 10px;
  box-shadow: inset 0 3px 0 var(--brass), inset 0 5px 0 var(--brass-lo), inset 0 -3px 0 var(--brass-lo), 0 6px 10px rgba(0,0,0,.4);
}
.ajb__feet { display: flex; justify-content: space-between; padding: 0 4%; }
.ajb__feet i { width: 12%; height: 14px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi) 45%, var(--brass) 60%, var(--brass-lo)); }

.ajb__msg { margin: 10px 0 0; min-height: 1.4em; text-align: center; font-size: 13.5px; color: #8a2a12; }
.ajb__desc { margin: 14px auto 0; max-width: 52ch; text-align: center; font-size: 14px; line-height: 1.55; font-weight: 600; color: var(--ink, #262626); }
.ajb__desc + .ajb__msg { margin-top: 4px; }
.ajb__note { margin: 8px auto 0; max-width: 46ch; text-align: center; font-size: 13px; line-height: 1.6; color: var(--muted, #595955); }
.ajb__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .ajb.is-playing .ajb__spin, .ajb.is-loading .ajb__play svg { animation: none; }
  .ajb__arm, .ajb__needle { transition: none; }
  .ajb .ajb__dlg-img { transition: none; }
}

/* The theme styles every .entry-content button (navy fill, padding, min-height, hover).
   Keep the jukebox's own materials, also on hover. */
.ajb .ajb__cabinet button.ajb__knob:hover { background:
    radial-gradient(circle at 38% 32%, rgba(255,250,225,.9), transparent 22%),
    radial-gradient(circle, var(--brass-hi) 0 38%, var(--brass) 52%, var(--brass-lo) 70%),
    repeating-conic-gradient(var(--brass-lo) 0 4deg, var(--brass) 4deg 8deg); }
.ajb .ajb__cabinet button.ajb__play:hover { background: radial-gradient(circle, var(--navy) 0 58%, var(--brass-lo) 59%, var(--brass-hi) 63%, var(--brass) 70%, var(--brass-lo) 74%, transparent 75%); }
.ajb .ajb__cabinet button.ajb__btn:hover { background: linear-gradient(180deg, #f3dda4, #c99d4a); }
.ajb .ajb__cabinet button.ajb__btn[aria-pressed="true"]:hover { background: linear-gradient(180deg, #ffe2a0, #f0b54f); }
.ajb .ajb__cabinet button.ajb__knob, .ajb .ajb__cabinet button.ajb__play { min-height: 0; padding: 0; }
.ajb .ajb__cabinet button.ajb__btn { font-weight: 700; }

/* Jukebox pages: no side column, the jukebox centred on its own. */
body.amar-jukebox-page.editorial .entry-aside,
body.amar-jukebox-page .entry-aside { display: none !important; }
body.amar-jukebox-page.editorial .entry-layout.has-aside,
body.amar-jukebox-page .entry-layout.has-aside { display: block; }
body.amar-jukebox-page .entry-content { max-width: none; }
body.amar-jukebox-page .ajb { margin-inline: auto; }

/* ================= Two shapes, chosen by the space available =================
   ≥ 700px: the jukebox laid on its side (one screen tall on desktop and tablets).
   < 700px: a compact portrait jukebox that fits one phone screen.
   Same parts throughout: the wrappers become "display: contents" so the parts can be re-placed. */

@container (min-width: 700px) {
  .ajb__cabinet { max-width: 1100px; }
  .ajb__crown { aspect-ratio: auto; height: clamp(118px, 14cqi, 150px); padding: 14px 4.5% 0; }
  .ajb__crown::before { inset: 6px 2% 0; }
  .ajb__crown-in { grid-template-columns: 1fr minmax(300px, .5fr) 1fr; gap: 10px; padding: 6px 6px 0; }
  .ajb__marquee { flex-direction: row; justify-content: center; align-items: center; gap: 18px; padding: 14px 22px 10px; }
  .ajb .ajb__emblem { width: 104px; flex: none; }
  .ajb__marquee-tx { align-items: flex-start; text-align: start; }
  .ajb[dir="rtl"] .ajb__marquee-tx { align-items: flex-start; }
  .ajb__marquee-t, .ajb__marquee-t[lang="ar"] { font-size: 11.5px; }
  .ajb__marquee-t[lang="ar"] { font-size: 13.5px; }

  .ajb__body { grid-template-columns: 30px minmax(0,1fr) 30px; gap: 18px; padding: 18px 22px 20px; }
  .ajb__tube i { min-height: 8px; height: 4%; }
  .ajb__tube i:nth-child(2) { top: 48%; } .ajb__tube i:nth-child(3) { display: none; }
  .ajb__centre {
    grid-template-columns: minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);
    grid-template-areas: "window screen grille" "buttons buttons controls";
    gap: 16px;
  }
  .ajb__row { display: contents; }
  .ajb__plaque, .ajb__mic { display: none; }
  .ajb__window { grid-area: window; aspect-ratio: auto; height: auto; min-height: 0; align-self: stretch; }
  .ajb__grille { grid-area: grille; aspect-ratio: auto; min-height: 0; }
  /* One height, whatever is playing: room for 98% of the catalogue in full (EN and AR, measured with
     upgrade/qa/measure_screen.cjs); the few longer texts are trimmed instead of stretching the cabinet. */
  .ajb__screen { grid-area: screen; height: 345px; min-height: 0; }
  .ajb__screen-in { overflow: hidden; }
  .ajb__track { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .ajb__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .ajb__title-alt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .ajb__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ajb__ep { display: inline-block; max-width: 100%; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the station note, the programme line and any error message sit above the cabinet, so they stay in view */
  .ajb__note { order: -3; margin: 0 auto 2px; max-width: 90ch; }
  .ajb__admin { order: -4; }
  .ajb__desc { order: -2; margin: 0 auto 4px; }
  .ajb__msg { order: -1; margin: 0; min-height: 0; } /* takes no room until there is something to say */
  .ajb__msg:not(:empty) { margin-bottom: 8px; }
  .ajb .ajb__cabinet button.ajb__play { width: clamp(118px, 13cqi, 150px); }
  .ajb__buttons { grid-area: buttons; flex-direction: row; align-items: stretch; gap: 8px; }
  .ajb .ajb__cabinet button.ajb__btn { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 12px; }
  .ajb__controls { grid-area: controls; padding: 8px 12px; gap: 8px; }
  .ajb .ajb__cabinet button.ajb__knob { width: 52px; }
  .ajb__vu { max-width: 140px; }
  .ajb__time { white-space: nowrap; font-size: 13px; padding: 6px 8px; }
  .ajb__deck-wrap { inset-inline: 2%; bottom: -14%; height: 96%; }
}

@container (min-width: 700px) and (max-width: 899.98px) {
  .ajb[lang="ar"] .ajb__marquee-t:not([lang="ar"]), .ajb:not([lang="ar"]) .ajb__marquee-t[lang="ar"] { display: none; }
}

@container (max-width: 699.98px) {
  .ajb__cabinet { max-width: 470px; }
  .ajb__crown { aspect-ratio: 580 / 168; padding: 3.2% 5% 0; }
  .ajb__marquee { padding: 9% 5% 7%; gap: 5%; justify-content: center; }
  .ajb .ajb__emblem { width: 64%; }
  .ajb__marquee-t { font-size: 9px; } .ajb__marquee-t[lang="ar"] { font-size: 11px; }
  .ajb__marquee-tx { display: none; } /* the emblem alone on phones */
  .ajb__body { grid-template-columns: 4.5% minmax(0,1fr) 4.5%; gap: 2.4%; padding: 10px 10px 12px; }
  .ajb__centre { grid-template-columns: minmax(0,1fr) 112px minmax(0,1fr); gap: 10px; }
  .ajb__row, .ajb__controls { display: contents; }
  .ajb__plaque, .ajb__mic, .ajb__ctl--vol { display: none; }
  .ajb__window { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 2.9 / 1; }
  .ajb__deck-wrap { inset-inline: 12%; bottom: -34%; height: 132%; }
  .ajb__wall-t { top: 7%; font-size: 8px; }
  /* phones: a round magnifier in the top-left corner, clear of the wall text and the tone arm */
  .ajb .ajb__cabinet button.ajb__see { top: 9px; left: 9px; transform: none; width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; font-size: 15px; }
  .ajb[dir="rtl"] .ajb__cabinet button.ajb__see { padding: 0; }
  .ajb .ajb__see span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ajb__screen { grid-column: 1 / -1; grid-row: 3; min-height: 0; padding: 7px; }
  .ajb__screen-in { padding: 10px 13px 9px; gap: 3px; }
  .ajb__next { display: none; }
  .ajb__status { font-size: 10px; } .ajb[dir="rtl"] .ajb__status { font-size: 11.5px; }
  .ajb__meta { margin-top: 3px; font-size: 12px; } .ajb__ep { margin-top: 5px; font-size: 12px; } .ajb__progress { padding-top: 7px; }
  .ajb__title { font-size: 17px; }
  .ajb__artist { margin-top: 5px; font-size: 14px; }
  .ajb__buttons {
    grid-column: 1 / -1; grid-row: 4; flex-direction: row; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 1px; justify-content: flex-start;
  }
  .ajb__buttons::-webkit-scrollbar { display: none; }
  .ajb .ajb__cabinet button.ajb__btn { flex: 0 0 auto; min-width: 86px; min-height: 36px; scroll-snap-align: start; }
  .ajb__grille { grid-column: 1 / -1; grid-row: 2; aspect-ratio: auto; height: 116px; padding: 10px; grid-template-columns: 12px 1fr 12px; gap: 8px; }
  .ajb .ajb__cabinet button.ajb__play { width: 98px; }
  .ajb__play-l { font-size: 12px; }
  .ajb__vu { grid-column: 1; grid-row: 2; z-index: 2; align-self: center; justify-self: center; max-width: 92px; margin-inline-start: 14px; }
  .ajb__ctl--time { grid-column: 3; grid-row: 2; z-index: 2; align-self: center; justify-self: center; margin-inline-end: 14px; }
  .ajb__ctl--time .ajb__ctl-label { display: none; }
  .ajb__time { min-width: 0; font-size: 12px; padding: 6px 7px; white-space: nowrap; }
  .ajb__time small { font-size: 10px; }
  .ajb__base { height: 26px; }
  .ajb__desc { font-size: 13px; margin-top: 10px; }
  .ajb__note { font-size: 12.5px; margin-top: 6px; }

  /* Fitted to the window by jukebox.js (jukebox pages): the cabinet stands on the slim footer. The decorative
     parts give up height first (sizes in --fp-*), the screen takes the rest; long texts are trimmed. */
  .ajb.is-fit-phone .ajb__body { padding: 8px 10px; }
  .ajb.is-fit-phone .ajb__centre { gap: 8px; }
  .ajb.is-fit-phone .ajb__crown { aspect-ratio: auto; height: var(--fp-crown); }
  .ajb.is-fit-phone .ajb__emblem { width: auto; max-width: 64%; height: calc(var(--fp-crown) * .44); }
  .ajb.is-fit-phone .ajb__window { aspect-ratio: auto; height: var(--fp-window); }
  .ajb.is-fit-phone .ajb__grille { height: var(--fp-grille); }
  .ajb.is-fit-phone .ajb__cabinet button.ajb__play { width: calc(var(--fp-grille) - 18px); }
  .ajb.is-fit-phone .ajb__base { height: var(--fp-base); }
  .ajb.is-fit-phone .ajb__screen { height: var(--fp-screen); }
  .ajb.is-fit-phone .ajb__screen-in { overflow: hidden; }
  .ajb.is-fit-phone .ajb__track { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .ajb.is-fit-phone .ajb__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .ajb.is-fit-phone .ajb__title-alt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
  .ajb.is-fit-phone .ajb__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ajb.is-fit-phone .ajb__ep { display: inline-block; max-width: 100%; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* as on desktop: the station note, the programme line and any error message above the cabinet */
  .ajb.is-fit-phone .ajb__note { order: -3; margin: 0 auto 2px; }
  .ajb.is-fit-phone .ajb__admin { order: -4; }
  .ajb.is-fit-phone .ajb__desc { order: -2; margin: 0 auto 4px; }
  .ajb.is-fit-phone .ajb__msg { order: -1; margin: 0; min-height: 0; }
  .ajb.is-fit-phone .ajb__msg:not(:empty) { margin-bottom: 6px; }
  .ajb.is-fit-tight .ajb__title-alt, .ajb.is-fit-tight .ajb__artist-alt { display: none; }
  .ajb.is-fit-tight .ajb__artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ajb.is-fit-tighter .ajb__meta { display: none; }
  .ajb.is-fit-tightest .ajb__title { -webkit-line-clamp: 1; }
  .ajb.is-fit-tightest .ajb__ep { display: none; }
}

/* The seven names in full (user 2026-10-13): where one row would cut them (tablets) or scroll them away (phones),
   the buttons stand in two rows, four above and three centred below, the lamp in each button's top corner. */
@container (max-width: 999.98px) {
  .ajb__buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; gap: 6px; overflow: visible; scroll-snap-type: none; }
  .ajb .ajb__cabinet button.ajb__btn, .ajb[dir] .ajb__cabinet button.ajb__btn {
    position: relative; flex: 0 0 calc((100% - 18px) / 4); min-width: 0; min-height: 38px; justify-content: center;
    padding: 5px 12px 4px; font-size: 11.5px; line-height: 1.15; letter-spacing: 0; text-align: center;
  }
  .ajb .ajb__cabinet button.ajb__btn::after { position: absolute; top: 5px; inset-inline-end: 5px; width: 8px; height: 8px; }
  .ajb .ajb__cabinet button.ajb__btn span { min-width: 0; overflow-wrap: normal; }
  .ajb[lang="ar"] .ajb__cabinet button.ajb__btn { font-size: 12.5px; }
}
@container (max-width: 699.98px) {
  .ajb .ajb__cabinet button.ajb__btn, .ajb[dir] .ajb__cabinet button.ajb__btn { min-height: 34px; padding-inline: 10px; }
}

/* Jukebox pages: a modest title instead of the monumental one, so the player is visible on arrival. */
body.amar-jukebox-page .ed-masthead { padding: 10px 0 12px; margin-bottom: 4px; }
body.amar-jukebox-page.editorial .ed-masthead .ed-masthead__title,
body.amar-jukebox-page .ed-masthead__title { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -.02em; display: block; white-space: normal; }
body.amar-jukebox-page .ed-masthead--graphic .ed-letter__accent { display: none; }
body.amar-jukebox-page .ed-section-nav { display: none; }
body.amar-jukebox-page .breadcrumbs { display: none; } /* a single "AMAR" crumb there; the space goes to the jukebox */
body.amar-jukebox-page .panel__body { padding-top: 14px; }
/* Desktop, fitted to the window by jukebox.js: the cabinet stands right on the footer (the site's one footer since 2026-10-28) */
body.amar-jukebox-fit .site-main { padding-bottom: 0 !important; }
body.amar-jukebox-fit .panel__body { padding-bottom: 0 !important; }
body.amar-jukebox-fit .ajb { margin-bottom: 0; }
@media (max-width: 699.98px) { /* phones, fitted: a smaller page title leaves more height to the jukebox */
  body.amar-jukebox-fit .ed-masthead { padding: 4px 0 6px; }
  body.amar-jukebox-fit.editorial .ed-masthead .ed-masthead__title, body.amar-jukebox-fit .ed-masthead__title { font-size: 24px; }
  body.amar-jukebox-fit .panel__body { padding-top: 8px; }
}
/* administrators only: a link to the week editor, above the jukebox when it is fitted to the window */
.ajb__admin { margin: 0 auto 6px; text-align: center; font-size: 13px; }
.ajb__admin a { color: var(--ink, #262626); text-decoration: underline; text-underline-offset: 3px; }

/* one channel (visitors at launch, A5): a brass nameplate where the programme buttons were */
.ajb__plate { justify-content: center; }
.ajb .ajb__plate .ajb__plaque { display: flex; } /* the side plaques hide in the smaller shapes; this one stays */
.ajb__plate .ajb__plaque { flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 12px 18px; min-height: 44px; }
.ajb__plate .ajb__plaque p { font-size: clamp(9px, 1.4vw, 12px); }
.ajb__plate .ajb__plaque p[lang="ar"] { font-size: clamp(11px, 1.8vw, 14.5px); }

/* responsive QA 2026-11-05: fitted phone cabinet: the status line a little larger, the English LISTEN label inside its disc */
@container (max-width: 699.98px) {
  .ajb__status { font-size: 11px; }
  .ajb.is-fit-phone .ajb__cabinet button.ajb__play { gap: 2px; }
  .ajb.is-fit-phone:not([dir='rtl']) .ajb__play-l { font-size: 10.5px; letter-spacing: .02em; }
}
/* the cabinet's time readout stays inside the grille frame on phones */
@container (max-width: 699.98px) {
  .ajb__ctl--time { margin-inline-end: 8px; max-width: calc(100% - 8px); }
  .ajb__time { padding: 5px 6px; letter-spacing: 0; line-height: 1.15; }
  .ajb__time small { display: block; }
}

/* responsive QA 2026-11-05, polish */
@container (max-width: 699.98px) { .ajb__plate .ajb__plaque p:not([lang="ar"]) { font-size: 10px; letter-spacing: .01em; } }