/* AMAR Radio on the other pages (amar-radio/links.php, radio-links.js). --c = the programme's colour. */
.amr[hidden], .amr-list li[hidden] { display: none !important; }
.amr { --c: #32365f; }
.amr-lamp { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ffcf5a; box-shadow: 0 0 0 3px rgba(255, 207, 90, .3); }

/* one recording (the Listening room's record page) */
.amr-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 18px 0; padding: 16px 20px; background: var(--c); color: #fff; }
.amr-band p { margin: 0; max-width: none; }
.amr-k { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.amr-main { margin-top: 6px !important; font-size: 19px; font-weight: 800; line-height: 1.3; }
.amr-btn, a.amr-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; background: #fff; color: var(--c); font-size: 14px; font-weight: 800; text-decoration: none; }
.amr-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* an artist (artist pages and cards) */
.amr--line { margin: 0 0 22px; }
.amr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; max-width: none; padding: 10px 0; border-block: 1px solid rgba(0, 0, 0, .14); font-size: 15px; line-height: 1.45; }
.amr-line .amr-lamp { background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.amr-line b { font-weight: 800; }
.amr-line__w { font-weight: 600; color: var(--c); }
.amr-line__t { color: #55554f; }
.amr-line a { margin-inline-start: auto; font-weight: 800; color: var(--c); text-decoration: none; }
.amr-line a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* an episode's recordings (side column of an episode page) */
.amr-list { list-style: none; margin: 10px 0 0; padding: 0; }
.amr-list li { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .1); font-size: 14px; line-height: 1.35; }
.amr-list__who { font-weight: 700; }
.amr-list__t { color: #3a3a37; }
.amr-list__when { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--c, #32365f); }
.amr-list__when:empty { display: none; }
.amr-list__when i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #32365f); flex: none; }
.amr-list__go { margin: 10px 0 0; font-size: 14px; font-weight: 800; }
.amr-list__go a { text-decoration: none; }
.amr-list__go a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Artists & Music: a chip beside a name when one of their recordings is on air or starts within three hours */
a.amr-chip, .ev-page a.amr-chip { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin: 4px 0 0; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--c); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1.6; text-decoration: none; white-space: nowrap; vertical-align: middle; }
a.amr-chip:hover, .ev-page a.amr-chip:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
a.amr-chip .amr-lamp { width: 6px; height: 6px; background: rgba(255, 255, 255, .7); box-shadow: none; }
a.amr-chip.is-now .amr-lamp { background: #ffcf5a; }
.amc-also a.amr-chip { margin-inline-start: 8px; }
.amc-lead h3 a.amr-chip { margin: 0 0 0 12px; margin-inline: 12px 0; font-size: 12px; letter-spacing: 0; text-transform: none; vertical-align: .35em; }
.amc-tile a.amr-chip { display: flex; }

/* ================================================================ the Radio panel (user 2026-10-13, Panel 1)
   Wide screens: under the bar like the six menu panels — from the logo's emblem (--mega-logo-s, megamenu.js) to the
   end of the Radio tab (--amr-e, radio-links.js), as tall as they are (--mega-h), the page dimmed by their scrim. */
.amr-mega[hidden] { display: none !important; }
.amr-mega { display: none; }
@media (min-width: 1024px) {
	.editorial .masthead { position: relative; }
	.amr-mega {
		position: absolute; z-index: 6; inset-block-start: 100%; inset-inline-start: var(--mega-logo-s, 0); inset-inline-end: var(--amr-e, 0);
		display: flex; min-height: var(--mega-h, 472px); max-height: calc(100vh - var(--bar, 62px) - 40px); overflow-y: auto;
		box-shadow: 0 30px 60px -30px rgba(20, 22, 40, .5); color: #1c1c1c;
		font-family: var(--font, Manrope, Arial, sans-serif); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: start; white-space: normal;
		animation: amr-in .17s cubic-bezier(.2, .7, .2, 1);
	}
	html.amr-open .mega-scrim { opacity: 1; visibility: visible; transition: opacity .2s ease-out; }
}
@keyframes amr-in { from { opacity: 0; transform: translateY(-6px); } }
.amr-mega *, .amr-mega *::before, .amr-mega *::after { box-sizing: border-box; }
.amr-mega p, .amr-mega h2, .amr-mega ul { margin: 0; padding: 0; }
.amr-mega__a { flex: 0 0 264px; display: flex; flex-direction: column; padding: 28px 26px 30px 30px; background: #32365f; color: #fff; }
.amr-mega__k { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #e8c26a; }
.amr-mega .amr-mega__h { margin-top: 14px; color: #fff; font-size: 30px; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-transform: none; }
.amr-mega__p { margin-top: 14px !important; font-size: 14.5px; line-height: 1.55; color: #d6d8ea; }
.amr-mega__links { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 18px; }
.amr-mega__links a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
.amr-mega__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.amr-mega__links a.amr-mega__cta { justify-content: center; gap: 10px; min-height: 46px; margin-top: 8px; padding: 0 14px; border: 0; background: #fff; color: #32365f; font-weight: 800; }
.amr-mega__links a.amr-mega__cta:hover { background: #e8c26a; color: #1c1c1c; text-decoration: none; }
.amr-mega__b { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 28px 26px 26px; background: #fff; }
.amr-mega__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #e2e2de; }
.amr-mega__top p { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #32365f; }
.amr-mega__top p.amr-mega__clock { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #55554f; }
.amr-mega__cols { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin-top: 16px !important; list-style: none; }
.amr-col { display: flex; flex-direction: column; min-width: 0; border: 1px solid #e2e2de; background: #fff; color: #1c1c1c; transition: background-color .2s ease; }
.amr-col.is-on { border-color: var(--c); background: var(--c); color: #fff; }
.amr-col__bar { display: block; flex: none; height: 6px; background: var(--c); }
.amr-mega a.amr-col__head { display: block; padding: 11px 14px 0; color: inherit; text-decoration: none; }
.amr-col__names { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.amr-col__head b { font-size: 16.5px; font-weight: 800; line-height: 1.15; }
.amr-col__head:hover b { text-decoration: underline; text-underline-offset: 3px; }
.amr-col__n2 { font-size: 14px; font-weight: 600; }
.amr-col__d { display: block; margin-top: 3px; overflow: hidden; font-size: 12.5px; line-height: 1.35; opacity: .8; text-overflow: ellipsis; white-space: nowrap; }
.amr-col__now { display: flex; flex-direction: column; flex: 1; margin-top: 10px; padding: 10px 14px 12px; border-top: 1px solid #ececea; }
.amr-col.is-on .amr-col__now { border-top-color: rgba(255, 255, 255, .3); }
.amr-col__a { display: block; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.amr-col__t { display: -webkit-box; min-height: 2.7em; margin-top: 2px; overflow: hidden; font-size: 13.5px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.amr-col__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; }
.amr-col__meter { flex: 1; min-width: 0; }
.amr-col__prog { position: relative; display: block; height: 3px; background: #e8e8e4; }
.amr-col__prog i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p, 0%); background: var(--c); }
.amr-col.is-on .amr-col__prog { background: rgba(255, 255, 255, .3); }
.amr-col.is-on .amr-col__prog i { background: #fff; }
.amr-col__left { display: block; min-height: 1.3em; margin-top: 4px; font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .75; }
.amr-mega button.amr-col__play { display: flex; align-items: center; gap: 8px; flex: none; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; font-size: 13px; font-weight: 800; text-transform: none; cursor: pointer; }
.amr-mega button.amr-col__play:hover { background: none; color: inherit; }
.amr-mega button.amr-col__play:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.amr-col.is-on button.amr-col__play:focus-visible { outline-color: #fff; }
.amr-col__disc { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c); }
.amr-col.is-on .amr-col__disc { background: #fff; }
.amr-col__disc svg { width: 13px; height: 13px; fill: #fff; }
.amr-col.is-on .amr-col__disc svg { fill: var(--c); }

/* the Radio programme: last, under the Radio tab (kept orange while open) so tab and column read as one. User
   2026-10-13: white type, not black; the orange deepens downwards so the smaller white text keeps its contrast; the
   column holds the record's disc, the Play button and what comes next. */
.editorial .radio-tab.has-panel { --tab-block: #ef6530; --tab-square: #ef6530; } /* same as the tab's hover (theme megamenu.css) */
.amr-mega .amr-col--radio, .amr-mega .amr-col--radio.is-on {
	--c: #b9411a; flex: 0 0 300px; border: 0; color: #fff;
	background: linear-gradient(180deg, #ef6530 0, #da5320 120px, #c2461b 260px, #a83a16 100%);
}
.amr-mega .amr-col--radio a.amr-col__head { padding: 22px 24px 0; color: #fff; }
.amr-col__k { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; background: #fff; color: #a83a16; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.amr-col__lamp { width: 7px; height: 7px; border-radius: 50%; background: #ef6530; }
.amr-col--radio.is-on .amr-col__lamp { animation: amr-blink 1.6s ease-in-out infinite; }
@keyframes amr-blink { 50% { opacity: .3; } }
.amr-col--radio .amr-col__names { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 12px; }
.amr-col--radio .amr-col__head b { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.amr-col--radio .amr-col__n2 { font-size: 22px; font-weight: 700; }
.amr-col--radio .amr-col__d { margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.35; opacity: 1; white-space: normal; text-shadow: 0 1px 1px rgba(80, 25, 5, .35); }
.amr-mega .amr-col--radio .amr-col__now { margin-top: 16px; padding: 0 24px 20px; border: 0; }
.amr-col__rec { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(60, 18, 4, .22); }
.amr-col__img { flex: 0 0 78px; width: 78px; height: 78px; overflow: hidden; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, #141414 0 1.5px, #2a2a2a 1.5px 3px); box-shadow: 0 6px 16px rgba(40, 10, 0, .4); }
.amr-col__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.amr-col__img i { display: block; width: 36%; height: 36%; margin: 32%; border-radius: 50%; background: #ef6530; }
.amr-col__txt { min-width: 0; }
.amr-col--radio .amr-col__a { display: -webkit-box; font-size: 14px; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.amr-col--radio .amr-col__t { min-height: 0; margin-top: 3px; font-size: 15.5px; font-weight: 600; line-height: 1.25; -webkit-line-clamp: 3; }
.amr-col--radio .amr-col__foot { gap: 14px; margin-top: 0; padding-top: 14px; }
.amr-col--radio .amr-col__prog, .amr-mega .amr-col--radio.is-on .amr-col__prog { height: 4px; background: rgba(255, 255, 255, .3); }
.amr-col--radio .amr-col__prog i, .amr-mega .amr-col--radio.is-on .amr-col__prog i { background: #fff; }
.amr-col--radio .amr-col__left { font-size: 12.5px; opacity: .95; }
.amr-mega .amr-col--radio button.amr-col__play { gap: 10px; font-size: 15px; }
.amr-col--radio .amr-col__disc, .amr-mega .amr-col--radio.is-on .amr-col__disc { width: 50px; height: 50px; background: #fff; box-shadow: 0 6px 14px rgba(40, 10, 0, .3); }
.amr-col--radio .amr-col__disc svg, .amr-mega .amr-col--radio.is-on .amr-col__disc svg { width: 18px; height: 18px; fill: #b9411a; }
.amr-mega .amr-col--radio button.amr-col__play:focus-visible { outline-color: #fff; }
.amr-col__nh { margin-top: 18px !important; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .4); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.amr-col__next { margin: 4px 0 0 !important; padding: 0; list-style: none; }
.amr-col__next li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); font-size: 13px; line-height: 1.3; }
.amr-col__next li:last-child { border-bottom: 0; }
.amr-col__next b { font-weight: 800; font-variant-numeric: tabular-nums; }
.amr-col__next span { min-width: 0; }
.amr-col__next span span, .amr-col__next .amr-col__na { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amr-col__na { font-weight: 700; }
.lang-ar .amr-col__k, .lang-ar .amr-col__nh { letter-spacing: 0; font-size: 12.5px; }
/* one channel (visitors at launch, A5): the middle lists what comes next on it; the orange column keeps what is on */
.amr-mega--one .amr-col--radio .amr-col__nh, .amr-mega--one .amr-col--radio .amr-col__next { display: none; }
.amr-mega__next { flex: 1; margin: 6px 0 0 !important; padding: 0; list-style: none; color: #1c1c1c; }
.amr-mega__next li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid #e2e2de; font-size: 15px; line-height: 1.35; }
.amr-mega__next li:last-child { border-bottom: 0; }
.amr-mega__next b { font-weight: 800; font-variant-numeric: tabular-nums; color: #32365f; }
.amr-mega__next span { min-width: 0; }
.amr-mega__next span span, .amr-mega__next .amr-col__na { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amr-mega__next .amr-col__na { font-size: 16px; font-weight: 700; }
.amr-i-pause, [aria-pressed="true"] .amr-i-play { display: none; }
[aria-pressed="true"] .amr-i-pause { display: block; }
.lang-ar .amr-mega__k, .lang-ar .amr-mega__top p { letter-spacing: 0; font-size: 13px; }
.lang-ar .amr-mega .amr-mega__h { letter-spacing: 0; line-height: 1.25; font-size: 28px; }
/* mid-size wide screens: narrower side zones, the cards' Play word hidden (the round button stays, with its label) */
@media (min-width: 1024px) and (max-width: 1365px) {
	.amr-mega__a { flex-basis: 230px; padding-inline: 24px 22px; }
	.amr-mega .amr-mega__h { font-size: 26px; }
	.amr-mega__b { padding-inline: 20px; }
	.amr-mega .amr-col--radio, .amr-mega .amr-col--radio.is-on { flex-basis: 260px; }
	.amr-mega .amr-col--radio a.amr-col__head { padding: 20px 20px 0; }
	.amr-mega .amr-col--radio .amr-col__now { padding: 0 20px 18px; }
	.amr-col--radio .amr-col__head b { font-size: 30px; }
	.amr-col__img { flex-basis: 64px; width: 64px; height: 64px; }
	.amr-col--radio .amr-col__t { font-size: 14.5px; }
	.amr-mega__cols .amr-col__playt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.amr-mega a.amr-col__head, .amr-col__now { padding-inline: 12px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.amr-mega__a { flex-basis: 200px; padding-inline: 20px 18px; }
	.amr-mega .amr-mega__h { font-size: 22px; }
	.amr-mega__p { font-size: 13.5px; }
	.amr-mega .amr-col--radio, .amr-mega .amr-col--radio.is-on { flex-basis: 230px; }
	.amr-col__img { display: none; }
	.amr-col__d { display: none; }
	.amr-col__head b { font-size: 15px; }
	.amr-col__n2 { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .amr-mega, .amr-col--radio.is-on .amr-col__lamp { animation: none; } }

/* phones: the seven under the menu's AMAR Radio entry (amar-radio.php prints them; amar.js opens them) */
@media (max-width: 1023px) {
	.site-nav .menu > li.menu-item-amar-radio.menu-item-has-children { display: flex; flex-wrap: wrap; }
	.site-nav .menu > li.menu-item-amar-radio > .amr-m { flex-basis: 100%; padding: 4px 14px 14px; }
	.site-nav .amr-m > li.amr-m__row { display: grid; grid-template-columns: 4px minmax(0, 1fr) 44px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
	.site-nav .amr-m > li.amr-m__row::before { content: ""; align-self: stretch; background: var(--t); }
	.site-nav .amr-m > li.amr-m__row.is-on { background: rgba(255, 255, 255, .08); }
	.site-nav .amr-m .amr-m__row > a { display: block; width: auto; min-width: 0; min-height: 0; padding: 4px 0; color: #fff; text-decoration: none; }
	.site-nav .amr-m .amr-m__row b { display: block; font-size: 15px; font-weight: 800; }
	.amr-m__now { display: block; overflow: hidden; color: rgba(255, 255, 255, .75); font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
	.site-nav .amr-m button.amr-m__play { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--t); cursor: pointer; }
	.site-nav .amr-m .amr-m__row.is-on button.amr-m__play { background: #fff; }
	.amr-m__play svg { width: 13px; height: 13px; fill: #1c1c1c; }
	.site-nav .amr-m .amr-m__cab a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 14px; border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; font-weight: 800; text-decoration: none; }
	.site-nav .amr-m .amr-m__go a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 14px; background: #fff; color: #32365f; font-weight: 800; text-decoration: none; }
}

/* responsive QA 2026-11-05: "Listen →" gets a 44px tap area; the line does not grow */
.amr-line a { display: inline-flex; align-items: center; gap: .26em; min-height: 44px; margin-block: -11px; } /* gap: the flex item drops the space before the arrow */