/* AMAR Radio tab, anchored at the end of the site's floating navigation bar — built like the logo at the other end:
   a dark square (the play button, where the logo has its emblem) and text lines on their own blocks, flush against
   the square and ragged on the outside. The second line changes (Listen → On air), so the edge moves when it plays. */
.radio-tab {
	--tab-square: #32365f; --tab-block: #ef6530; --tab-ink: #fff;
	flex: 0 0 auto; display: flex; align-items: flex-start; height: var(--bar, 44px); pointer-events: auto;
}
.editorial .radio-tab { --tab-square: #393939; --tab-block: #7f7f7f; } /* the logo is shown in greyscale there */

.radio-tab__play {
	position: relative; display: flex; align-items: center; justify-content: center; flex: none;
	width: var(--bar, 44px); height: var(--bar, 44px); padding: 0; border: 0; background: var(--tab-square); color: var(--tab-ink); cursor: pointer;
}
.radio-tab__play::before { /* thin ring around the icon */
	content: ""; position: absolute; width: 58%; height: 58%; border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .85); transition: transform .15s, border-color .2s;
}
.radio-tab__play:hover::before { transform: scale(1.08); }
.radio-tab__play svg { position: relative; width: 34%; height: 34%; }
.radio-tab__i-pause, .radio-tab.is-playing .radio-tab__i-play { display: none; }
.radio-tab.is-playing .radio-tab__i-pause { display: block; }
.radio-tab.is-playing .radio-tab__play::before { border-color: #e0452b; }
.radio-tab__play:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }

.radio-tab__link { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--tab-ink); }
.radio-tab__line {
	display: flex; align-items: center; gap: 6px;
	height: calc(var(--bar, 44px) / 2); padding-inline: 8px 9px;
	background: var(--tab-block); color: var(--tab-ink);
	font-family: var(--font, Arial, sans-serif); font-weight: 700; font-size: max(10px, calc(var(--bar, 44px) * .2)); /* user 2026-10-15: smaller */
	line-height: 1; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.radio-tab__name { padding-inline-end: 13px; }
[dir="rtl"] .radio-tab__line { font-family: var(--font-ar, inherit); letter-spacing: 0; text-transform: none; font-size: max(11px, calc(var(--bar, 44px) * .22)); }
.radio-tab__link:hover .radio-tab__line, .radio-tab__link:focus-visible .radio-tab__line { text-decoration: underline; text-underline-offset: 2px; }
.radio-tab__link:focus-visible { outline: 2px solid var(--tab-square); outline-offset: 2px; }
.radio-tab__lamp { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.radio-tab.is-playing .radio-tab__lamp { background: #ff4a2b; opacity: 1; box-shadow: 0 0 6px #ff4a2b; animation: radio-tab-pulse 1.6s ease-in-out infinite; }
.radio-tab.is-loading .radio-tab__play::before, .radio-tab.is-resume .radio-tab__play::before { animation: radio-tab-pulse 1.1s ease-in-out infinite; }
@keyframes radio-tab-pulse { 50% { opacity: .45; } }

/* laptops (1024–1279px), where the menu is tightest */
@media (min-width: 1024px) and (max-width: 1279px) {
	.radio-tab__line { padding-inline: 5px 6px; }
	.radio-tab__name { padding-inline-end: 8px; }
	.radio-tab__play { width: 44px; }
}
/* phones: the square and one short block (the bar has little room); the jukebox page is in the phone menu instead */
@media (max-width: 480px) {
	.lang-switch, .editorial .lang-switch { width: 34px; }
	.radio-tab__name { display: none; }
	.radio-tab__state { padding-inline: 6px; }
	.radio-tab__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.radio-tab__lamp { width: 7px; height: 7px; }
}
@media (max-width: 379px) {
	.radio-tab__link { display: none; }
}
/* the "Radio" entry exists only in the phone/tablet menu */
.site-nav .menu > li.menu-item-amar-radio { display: none; }
@media (max-width: 1023px) { .site-nav .menu > li.menu-item-amar-radio { display: block; } }
@media (prefers-reduced-motion: reduce) {
	.radio-tab.is-playing .radio-tab__lamp, .radio-tab.is-loading .radio-tab__play::before, .radio-tab.is-resume .radio-tab__play::before { animation: none; }
}
/* The radio page and the Cabinet page link each other from the head's tools row (amar-radio/station.php). */
.ars-headtool { display: flex; justify-content: flex-end; width: 100%; }
.ars-headlink, .editorial a.ars-headlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid currentColor; color: inherit; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; }
.ars-headlink:hover, .editorial a.ars-headlink:hover { background: rgba(255, 255, 255, .12); color: inherit; text-decoration: none; }
.ars-headlink:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ars-headlink svg { flex: none; }

/* ---------------- the Cabinet sheet (user 2026-10-13) ----------------
   Any Cabinet link (radio page head, Radio panel, phone menu) raises the walnut cabinet over the page, in a dark
   room; it plays through the page's player (cabinet.js builds the sheet at the end of <body>, jukebox.js drives it). */
html.ars-cab-open, html.ars-cab-open body { overflow: hidden; }
.ars-cab {
	position: fixed; inset: 0; z-index: 100050; display: flex; flex-direction: column;
	background: radial-gradient(120% 75% at 50% 0%, #2c3062 0%, #1b1d39 55%, #101122 100%) #15172c; color: #fff;
	transform: translateY(100%); transition: transform .34s cubic-bezier(.2, .8, .2, 1); will-change: transform;
	box-shadow: 0 -18px 50px rgba(0, 0, 0, .35);
}
.ars-cab[hidden] { display: none; }
.ars-cab.is-in { transform: none; }
.ars-cab.is-drag { transition: none; }
.ars-cab__bar {
	position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 58px; padding: 0 var(--edge, 24px); background: #111225; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ars-cab__grip { display: none; }
.ars-cab p.ars-cab__t { display: flex; align-items: center; gap: 9px; margin: 0; max-width: none; font-size: 15px; font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, .78); }
.ars-cab__t b { font-weight: 800; color: #fff; }
.ars-cab__sep { opacity: .5; }
.ars-cab__dot { width: 10px; height: 10px; border-radius: 50%; background: #ef6530; box-shadow: 0 0 0 4px rgba(239, 101, 48, .22); }
.ars-cab button.ars-cab__x {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 0 12px 0 16px;
	font: inherit; font-size: 14px; font-weight: 700; line-height: 1; color: #fff; cursor: pointer;
	background: transparent; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 999px;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ars-cab button.ars-cab__x:hover, .ars-cab button.ars-cab__x:focus-visible { background: #fff; border-color: #fff; color: #15172c; }
.ars-cab button.ars-cab__x:focus-visible { outline: 2px solid #ffb54a; outline-offset: 3px; }
.ars-cab__body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px var(--edge, 24px) 22px; }
.ars-cab .ajb { margin: 0 auto; }
.ars-cab .ajb__desc { color: rgba(255, 255, 255, .92); }
.ars-cab .ajb__note { color: rgba(255, 255, 255, .62); }
.ars-cab .ajb__msg { color: #ffb4a0; }
.ars-cab .ajb__admin a { color: #ffd38a; }
/* first open: a quiet amber ring while the cabinet's drawing and script arrive */
.ars-cab.is-wait .ars-cab__body { display: grid; place-items: center; }
.ars-cab.is-wait .ars-cab__body::before { content: ""; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 181, 74, .25); border-top-color: #ffb54a; animation: ars-cab-spin .9s linear infinite; }
@keyframes ars-cab-spin { to { transform: rotate(360deg); } }
@media (max-width: 699px) {
	.ars-cab__bar { min-height: 54px; padding: 6px 16px 0; }
	.ars-cab__grip { display: block; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255, 255, 255, .35); }
	.ars-cab p.ars-cab__t { font-size: 14px; gap: 7px; }
	.ars-cab button.ars-cab__x { min-height: 36px; padding: 0 10px 0 13px; font-size: 13px; }
	.ars-cab__body { padding: 10px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.ars-cab { transition: none; }
	.ars-cab.is-wait .ars-cab__body::before { animation-duration: 2.4s; }
}

/* responsive QA 2026-11-05: phones 380-480px: the radio lamp link gets a 44px-high tap area toward the screen edge, same look */
@media (max-width: 480px) {
	.radio-tab__link { position: relative; align-self: stretch; }
	.radio-tab__link::after { content: ''; position: absolute; inset-block: 0; inset-inline: 0 -12px; }
}