/* ---------- header: full-bleed masthead ---------- */
.pinzone{position:sticky;top:0;z-index:12;background:var(--bg)}
header.masthead{position:relative;background:var(--nsm-cream-100);overflow:hidden}
.banner{width:100%;display:block}
.hdr-actions{position:absolute;left:10px;right:10px;bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.hdr-actions .hdr-install{background:rgba(247,240,222,.9);backdrop-filter:blur(4px)}
.hdr-actions .live-dot{background:rgba(247,240,222,.9);border-radius:999px;padding:4px 10px}
@media (max-width:430px){.hdr-actions .hdr-install{padding:0 10px;font-size:12px;min-height:32px}}

.hdr-install{margin-inline-start:8px;align-self:center;min-height:36px;padding:0 14px;border-radius:999px;
  border:1px solid var(--amber);background:var(--panel);color:var(--amber);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;white-space:nowrap}
.hdr-install.hidden{display:none}
.flag{display:inline-block;vertical-align:-3px;border-radius:2px}
.live-dot{display:none;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em;color:var(--red)}
.live-dot.on{display:flex}
.live-dot i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- signature: tuner dial ---------- */
.dial{position:relative;height:44px;margin:0;overflow:hidden;background:var(--nsm-grad-recess);box-shadow:var(--nsm-sh-recess)}
.dial-scale{position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, var(--dim) 0 1px, transparent 1px 60px);
  background-position:0 100%,0 100%;
  background-size:100% 12px,100% 22px;
  background-repeat:repeat-x; opacity:.7}
.dial-nums{position:absolute;top:6px;left:0;right:0;display:flex;justify-content:space-between;
  padding:0 8px;font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--faint)}
.needle{position:absolute;top:0;bottom:0;width:2px;background:var(--nsm-crimson);left:8%;transition:left var(--nsm-needle) var(--nsm-ease);box-shadow:0 0 8px rgba(196,42,70,.55)}
.needle::after{content:"";position:absolute;top:0;left:-3px;border:4px solid transparent;border-top-color:var(--red)}
.dial-freq{position:absolute;bottom:4px;inset-inline-end:10px;font-family:var(--nsm-font-mono);font-size:var(--nsm-t-mono);letter-spacing:var(--nsm-track-mono);color:var(--nsm-gold)}

/* ---------- controls ---------- */
.controls{padding:12px 14px 8px;display:flex;flex-direction:column;gap:10px;
  background:var(--bg)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;height:var(--nsm-chip-h);display:inline-flex;align-items:center;gap:6px;padding:0 13px;border-radius:var(--nsm-r-chip);background:var(--nsm-cream-050);box-shadow:var(--nsm-sh-row);font-size:var(--nsm-t-chip);font-weight:600;white-space:nowrap}
.chip .ar{font-size:13px}
.chip.active{background:var(--nsm-apricot);color:var(--nsm-ink-on-gold);box-shadow:0 2px 10px rgba(217,138,63,.35)}
.search{flex:1;display:flex;align-items:center;gap:8px;height:var(--nsm-chip-h);padding:0 12px;background:var(--nsm-cream-050);border-radius:var(--nsm-r-chip);box-shadow:var(--nsm-sh-row);color:var(--nsm-ink-50)}
.search svg{flex:0 0 16px;stroke:var(--faint)}
.search input{flex:1;background:none;border:none;outline:none;color:var(--text);min-width:0}
.search input::placeholder{color:var(--faint)}
.sort{display:flex;height:var(--nsm-chip-h);border-radius:var(--nsm-r-chip);overflow:hidden;box-shadow:var(--nsm-sh-row);background:var(--nsm-cream-050)}
.sort button{padding:0 13px;font-size:var(--nsm-t-chip);font-weight:600;color:var(--nsm-ink-50)}
.sort button.active{background:var(--nsm-apricot);color:var(--nsm-ink-on-gold)}

/* ---------- station list ---------- */
main{padding:6px 14px 130px}
.count{padding:14px 16px 8px;font-family:var(--nsm-font-mono);font-size:var(--nsm-t-mono);letter-spacing:var(--nsm-track-eyebrow);text-transform:uppercase;color:var(--nsm-ink-50)}
.station{display:flex;align-items:center;gap:11px;padding:12px;margin:0 10px 9px;width:calc(100% - 20px);background:#FFFBF0;border-radius:14px;box-shadow:0 0 0 1px rgba(51,36,27,.07),0 2px 8px rgba(51,36,27,.045);text-align:start;position:relative}
.station:active{background:var(--panel)}
.station .st-name{}
button.station[data-u^="ph-"],button.station.rdead{opacity:.55;box-shadow:none}
.station.playing{box-shadow:0 0 0 1.5px #C42A46,0 3px 10px rgba(51,36,27,.06)}
.rankpill{display:inline-block;background:#33241B;color:#F7F0DE;border-radius:6px;padding:2px 6px;font-size:10px;line-height:1.4;vertical-align:1px}
.skel{height:64px;border-radius:var(--radius);margin-bottom:8px;
  background:linear-gradient(90deg,var(--panel) 25%,#F6EDD8 40%,var(--panel) 60%);
  background-size:400% 100%;animation:skel 1.1s linear infinite}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
.st-icon{flex:0 0 var(--nsm-tile-row);width:var(--nsm-tile-row);height:var(--nsm-tile-row);border-radius:var(--nsm-r-tile);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--nsm-tile-cream);position:relative;font-family:var(--nsm-font-arabic);font-weight:700}
.st-icon.lt{color:#fff;font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:700;font-size:19px}
.st-icon img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.st-meta{flex:1;min-width:0}
.st-name{font-weight:500;line-height:1.35;overflow:hidden;unicode-bidi:isolate;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.st-pop{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim);flex:0 0 auto;white-space:nowrap}
.fav-tog{flex:0 0 36px;width:36px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--faint)}
.fav-tog.on{color:var(--amber)}
/* Request a station — the row after the last curated slot. Deliberately NOT styled as a station:
   it is an action, and a listener scanning the list should not mistake it for something to play. */
.req-row{border:1px dashed var(--nsm-line,#e7ddc9);background:transparent}
.req-row .req-ico{display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:300;
  color:var(--amber,#D98A3F);background:transparent;border:1px dashed var(--amber,#D98A3F)}
.req-row .st-name{color:var(--amber,#D98A3F);font-weight:650}
.req-row .st-ar{opacity:.7}
.off-head{display:flex;align-items:center;gap:8px;width:100%;padding:16px 6px 8px;text-align:start;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--faint);min-height:44px}
.off-head .tri{color:var(--amber)}
.eq{display:flex;align-items:flex-end;gap:2px;height:16px;flex:0 0 auto}
.eq i{width:3px;background:var(--amber);animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.25s}.eq i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
.msg{padding:40px 20px;text-align:center;color:var(--dim);line-height:1.7}
.msg .ar{font-family:"Amiri",serif;font-size:22px;color:var(--amber);display:block;margin-bottom:6px}
.spinner{margin:40px auto;width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--amber);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}



/* ── unified espresso instrument panel ── */
.controls{background:var(--nsm-grad-panel);box-shadow:var(--nsm-sh-panel);padding:8px 10px 10px}
.chipband{display:flex;align-items:center;gap:8px}
.search-orb{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--nsm-cream-fill);box-shadow:0 0 0 1px var(--nsm-cream-hairline);color:var(--nsm-cream-ink);display:flex;align-items:center;justify-content:center}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:var(--nsm-r-chip);background:var(--nsm-cream-050);color:var(--nsm-ink);font-size:var(--nsm-t-chip);font-weight:600;white-space:nowrap;box-shadow:none}
.chip.active{background:var(--nsm-apricot);color:var(--nsm-ink-on-gold)}
.genres{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:8px 0 0}
.genres:empty{display:none}
.genres .gpill{background:var(--nsm-cream-fill);color:var(--nsm-cream-ink);box-shadow:0 0 0 1px var(--nsm-cream-hairline)}
.genres .gpill.active{background:var(--nsm-apricot);color:var(--nsm-ink-on-gold);box-shadow:none}
.searchdrawer{display:none;padding-top:8px}
.searchdrawer.open{display:block}
.searchdrawer input{width:100%;height:40px;border:none;border-radius:var(--nsm-r-chip);padding:0 14px;background:var(--nsm-cream-050);color:var(--nsm-ink)}
/* list tools: ghost A–Z aligned with the eyebrow */

/* ═══ verbatim row anatomy (mock transplant) ═══ */
.st-icon{position:relative;width:44px;height:44px;flex:none;border-radius:11px;overflow:hidden;background:linear-gradient(165deg,#FFFBF0 0%,#F2E6CC 100%);box-shadow:inset 0 0 0 1px rgba(51,36,27,.07);display:block}
.st-icon img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.lt-init{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Amiri,serif;font-size:26px;line-height:1;color:#33241B;padding-bottom:5px}
body.podmode .st-icon.lt{background:linear-gradient(160deg,#3E2C21 0%,#241811 100%);box-shadow:inset 0 0 0 1px rgba(247,240,222,.09)}
body.podmode .st-icon.lt .lt-init{color:#FFF6E8}
.st-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.st-line1{display:flex;align-items:center;gap:9px;min-width:0}
.st-name{font-size:14.5px;font-weight:600;line-height:1.25;color:#33241B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station.playing .st-name{color:#C42A46}
.st-ar{font-family:Amiri,serif;font-size:15px;line-height:1.25;color:rgba(51,36,27,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.station.playing .st-ar{color:rgba(196,42,70,.78)}
.station.rdead .st-name,.station.rdead .st-ar{color:rgba(51,36,27,.4)}
.eqr{display:flex;align-items:flex-end;gap:2.5px;height:13px;flex:none}
.eqr i{width:3px;height:13px;background:#C42A46;border-radius:1.5px;transform-origin:bottom;animation:nsmEq .9s ease-in-out infinite alternate}
.eqr i:nth-child(2){animation-duration:.78s}
.eqr i:nth-child(3){animation-duration:1.1s}
@keyframes nsmEq{from{transform:scaleY(.28)}to{transform:scaleY(1)}}
.share-tog,.fav-tog{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;color:rgba(51,36,27,.4);cursor:pointer}
.share-tog{margin-inline-end:-14px}
.fav-tog{color:rgba(51,36,27,.35)}
.fav-tog.on{color:#C42A46}
.station .fav-tog{margin-inline-end:-6px}
/* Favourites reorder (v3.11.10). Stacked chevrons in ONE 44px-wide column so the row keeps the same
   overall shape it has in a country tab — the heart and share targets must not shrink, they are
   already at the 44px minimum. Each chevron is a 22px half of that column: below the usual target
   size, which is acceptable here and only here because a mis-tap moves a row one place and the
   opposite arrow is directly adjacent to undo it. */
/* Favourites edit mode (v3.11.11). Replaced the always-visible up/down arrows: reordering now lives
   behind an explicit Edit, the iPhone Contacts pattern, so the row is uncluttered the rest of the time. */
.sort-edit{margin-inline-start:8px}
.sort-edit button{white-space:nowrap}
.drag-handle{flex:none;width:36px;height:44px;display:flex;align-items:center;justify-content:center;
  color:rgba(51,36,27,.45);cursor:grab;
  /* THE line that makes this work on iOS: without it the OS claims the gesture as a scroll. Scoped to
     the handle and to edit mode, so the list scrolls normally everywhere else. */
  touch-action:none;-webkit-user-select:none;user-select:none}
.drag-handle:active{cursor:grabbing;color:rgba(51,36,27,.75)}
body.favedit .station{transition:transform .16s var(--nsm-ease,ease)}
body.favedit .station:active{background:#FFFBF0}
.station.dragging{position:relative;z-index:5;box-shadow:0 6px 18px rgba(51,36,27,.18);opacity:.97;transition:none}
.state-pill{flex:none;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;padding:4px 8px;border-radius:999px}
.state-pill.off{background:#E7DBC0;color:rgba(51,36,27,.5)}
.state-pill.soon{background:#EFC078;color:#2A1B12;font-weight:600}
/* a favourite whose country is being fetched right now — it settles into a real state within a
   second or two, so it must read as WORK IN PROGRESS, never as a verdict */
.state-pill.wait{background:#DDEAF3;color:#2E4A5C;font-weight:600}
.station.rdead{background:#F3EAD6;box-shadow:0 0 0 1px rgba(51,36,27,.07)}
.station.rdead .st-icon{background:#E7DBC0}

/* ═══════════ 4A design layer — verbatim values from Player Directions.dc ═══════════ */
/* instrument panel: espresso frames the dial + chip band as one unit */
.ipanel{background:var(--nsm-grad-panel);border-radius:0 0 var(--nsm-r-slab) var(--nsm-r-slab);box-shadow:var(--nsm-sh-panel);overflow:hidden}
.dial{background:none;height:auto;margin:0;padding:8px 16px 6px;box-shadow:none;overflow:visible}
.dial-recess{position:relative;height:40px;border-radius:10px;background:var(--nsm-grad-recess);box-shadow:var(--nsm-sh-recess);overflow:hidden}
.dial-tk-minor{position:absolute;top:8px;left:14px;right:14px;height:10px;background:repeating-linear-gradient(to right,rgba(247,240,222,.32) 0 1px,transparent 1px 13.2px)}
.dial-tk-major{position:absolute;top:6px;left:14px;right:14px;height:14px;background:repeating-linear-gradient(to right,rgba(247,240,222,.68) 0 1.5px,transparent 1.5px 66px)}
.dial-nums{position:absolute;left:14px;right:14px;bottom:4px;top:auto;height:11px;display:block;padding:0;font-family:var(--nsm-font-mono);font-size:9.5px;font-weight:500;letter-spacing:.06em;color:rgba(247,240,222,.44)}
.dial-nums span{position:absolute;transform:translateX(-50%)}
.dial-nums span:nth-child(1){left:0%}.dial-nums span:nth-child(2){left:20%}
.dial-nums span:nth-child(3){left:40%}.dial-nums span:nth-child(4){left:60%}
.dial-nums span:nth-child(5){left:80%}.dial-nums span:nth-child(6){left:100%}
.needle{position:absolute;top:5px;bottom:16px;width:2.5px;border-radius:2px;background:var(--nsm-crimson);box-shadow:0 0 12px rgba(196,42,70,.95);left:8%;transition:left var(--nsm-needle) var(--nsm-ease);animation:nsm-needle 2.6s ease-in-out infinite}
.needle::after{content:"";position:absolute;top:-3px;left:50%;width:11px;height:11px;border:none;border-radius:3px;background:var(--nsm-crimson);transform:translateX(-50%) rotate(45deg);box-shadow:0 0 10px rgba(196,42,70,.7)}
.dial-freq{position:absolute;bottom:4px;inset-inline-end:0;left:auto;height:11px;line-height:11px;font-family:var(--nsm-font-mono);font-size:9.5px;font-weight:500;letter-spacing:.06em;color:var(--nsm-gold)}
/* chip band inside the panel */
.controls{background:none;box-shadow:none;padding:0;border-top:1px solid var(--nsm-cream-hairline)}
.chipband{display:flex;align-items:center;gap:7px;padding:7px 16px}
.chips{display:flex;align-items:center;gap:7px;flex:1;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0;
  mask-image:var(--nsm-edge-fade);-webkit-mask-image:var(--nsm-edge-fade)}
.search-orb{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;box-shadow:none;padding:0;color:rgba(247,240,222,.55)}
.search-orb svg{width:40px;height:40px;padding:10.5px;box-sizing:border-box;background:rgba(0,0,0,.34);box-shadow:inset 0 2px 5px rgba(0,0,0,.5);border-radius:11px}
.chip{flex:0 0 auto;height:40px;display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;padding:0 12px;border-radius:11px;background:var(--nsm-cream-fill);box-shadow:inset 0 0 0 1px rgba(247,240,222,.10);color:rgba(247,240,222,.82);font-size:12.5px;font-weight:600;letter-spacing:.005em;white-space:nowrap}
.chip .cen{font-size:12.5px;font-weight:600;letter-spacing:.005em}
.chip .ar{font-size:13.5px;font-weight:500}
.chip .flag{width:22px !important;height:15px !important;border-radius:2.5px;object-fit:cover;box-shadow:0 0 0 .8px rgba(51,36,27,.22);vertical-align:0}
.chip.active{background:var(--nsm-apricot);box-shadow:none;color:var(--nsm-ink-on-gold)}
.genres{padding:0 16px 8px;mask-image:var(--nsm-edge-fade);-webkit-mask-image:var(--nsm-edge-fade)}
.genres .gpill{flex:0 0 auto;height:40px;display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;padding:0 13px;border-radius:11px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--nsm-cream-fill);box-shadow:inset 0 0 0 1px rgba(247,240,222,.10);color:rgba(247,240,222,.82)}
.genres .gpill.active{background:var(--nsm-apricot);color:var(--nsm-ink-on-gold);box-shadow:none}
.searchdrawer{padding:0 16px 10px}
.searchdrawer input{width:100%;height:40px;box-sizing:border-box;border:none;border-radius:11px;padding:0 14px;background:rgba(0,0,0,.34);box-shadow:inset 0 2px 5px rgba(0,0,0,.5);color:var(--nsm-cream-ink)}
.searchdrawer input::placeholder{color:rgba(247,240,222,.45)}
/* list header: eyebrow + ghost A–Z */
/* masthead action buttons: translucent cream squares */
.hdr-actions .hdr-install{min-height:36px;border-radius:11px;border:none;background:rgba(250,241,221,.76);box-shadow:inset 0 0 0 1px rgba(51,36,27,.14);color:var(--nsm-ink);font-weight:600;backdrop-filter:blur(4px)}

/* ═══ v3.2.1 fixes ═══ */
/* rank + flag beside the actions, off the tile (logos stay clean) */
.st-rank{display:flex;align-items:center;gap:5px;flex:none;font-family:var(--nsm-font-mono);font-size:10px;color:rgba(51,36,27,.5)}
.st-rank .flag{width:16px;height:12px;border-radius:2px;box-shadow:0 0 0 .8px rgba(51,36,27,.18)}
.st-rank .rankpill{background:#33241B;color:#F7F0DE;border-radius:6px;padding:2.5px 6px;font-size:10px;font-weight:600;line-height:1.3;vertical-align:0}
.station.playing .st-rank .rankpill{background:#C42A46}
.st-by{font-size:11px;color:rgba(51,36,27,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
/* both sort toggles back: TOP + A–Z ghost pair */
/* footer links must clear the fixed slab (player bar + tab bar) */
.footlinks{padding-bottom:calc(env(safe-area-inset-bottom) + 150px) !important}

/* ═══ v3.3.0 batch ═══ */
/* fade only the exit edge — first chip renders full */
.chips,.genres{mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 26px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 26px),transparent 100%)}
/* masthead ~15% shorter (static crop, no height animation) */
header.masthead{overflow:hidden}
.banner{margin:-3.2% 0}
/* bilingual count, one style everywhere */
.count .ar{font-family:var(--nsm-font-ui);font-size:11.5px;letter-spacing:0}
/* episode titles: one size, two-line clamp */
.ep-row .st-name{font-size:14px;font-weight:600;white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.ep-row small{font-size:11px;opacity:.6}
/* tighten chip band → genre row seam */
.chipband{padding:7px 16px 3px}
.genres{padding:2px 16px 8px}

/* ═══ list header — FLATTENED single definition: one flow row, no absolute overlay ═══ */
.listhead-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px 4px;height:auto;position:static}
.listhead-tools .sort{display:flex;gap:6px;position:static;background:none;box-shadow:none}
.listhead-tools .sort button{height:34px;padding:0 13px;border-radius:12px;background:none;box-shadow:inset 0 0 0 1px rgba(51,36,27,.14);font-family:var(--nsm-font-mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;color:rgba(51,36,27,.55);display:flex;align-items:center}
.listhead-tools .sort button.active{background:var(--nsm-apricot);box-shadow:none;color:var(--nsm-ink-on-gold)}
body.podmode .listhead-tools .sort{display:none}
.count{padding:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--nsm-font-mono);font-size:10px;font-weight:600;letter-spacing:.17em;color:rgba(51,36,27,.5)}
.count .ar{font-family:var(--nsm-font-ui);font-size:11.5px;letter-spacing:0}

/* ═══ v3.3.3: header menu ═══ */
.hdr-menu{width:40px;height:40px;border-radius:11px;border:none;background:rgba(250,241,221,.76);box-shadow:inset 0 0 0 1px rgba(51,36,27,.14);color:var(--nsm-ink);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);flex:none}
.menusheet{position:fixed;inset:0;z-index:60}
.menusheet-bg{position:absolute;inset:0;background:rgba(27,17,11,.45)}
.menusheet-panel{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:12px;min-width:230px;background:var(--nsm-cream-050);border-radius:16px;box-shadow:0 18px 44px rgba(45,30,20,.35);padding:8px;display:flex;flex-direction:column}
.menusheet-panel a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:0 14px;border-radius:11px;color:var(--nsm-ink);text-decoration:none;font-size:15px;font-weight:600}
.menusheet-panel a:active{background:var(--nsm-cream-300)}

.listhead-tools .sort{height:auto;overflow:visible}
/* stations that failed a live probe this session: dimmed in place, never moved */
.station.suspect{opacity:.55}
.station.suspect.playing{opacity:1}
/* wide screens: genre categories wrap instead of hidden horizontal scroll */
@media (min-width:700px){
  .genres{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none}
}

/* podcast artwork is square cover art — fill the tile, no letterboxing */
body.podmode .st-icon img{object-fit:cover;padding:0}

/* backup sheet (reuses fbcard chrome) + menu version stamp */
.bk-p{font-size:12.5px;line-height:1.6;opacity:.85;margin:6px 0}
.bk-code{font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:700;letter-spacing:.14em;text-align:center;background:var(--nsm-cream-2,#FCF8EC);border:1px dashed var(--line,#e7ddc9);border-radius:10px;padding:12px 8px;margin:8px 0;user-select:all;-webkit-user-select:all}
.bk-row{display:flex;gap:8px;align-items:stretch}
.bk-row .install-btn{flex:1}
/* item 7: the code panel has three states and they must not look alike. A failure used to render as
   the same "—" the waiting state showed, with Copy and Share still enabled. */
.bk-code.bk-wait{opacity:.55;letter-spacing:.3em}
.bk-code.bk-fail{font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0;line-height:1.5;
  color:#B23A48;background:#FBEDED;border-style:solid;border-color:#e0b4b4;user-select:auto;-webkit-user-select:auto}
.install-btn[disabled]{opacity:.4;cursor:default;pointer-events:none}
.bk-in{flex:1.4;min-width:0;font-family:"IBM Plex Mono",monospace;font-size:16px;letter-spacing:.1em;text-transform:uppercase;text-align:center;border:1px solid var(--line,#e7ddc9);border-radius:9px;padding:10px 8px;background:#fff;color:inherit}
.menuver{font-family:"IBM Plex Mono",monospace;font-size:10.5px;opacity:.45;padding:10px 4px 2px;letter-spacing:.06em}

.fb-mail{width:100%;box-sizing:border-box;margin-top:6px;border:1px solid var(--line,#e7ddc9);border-radius:9px;padding:8px 10px;font-size:13px;background:#fff;color:inherit}

/* ── landing copy (SEO) ───────────────────────────────────────────────────────────────────────
   The only indexable text the shell has. Every generated landing page is otherwise byte-identical
   to index.html outside its head block — 200 URLs differing by a <title> — which is why they sat
   at average position 51 with a click-through rate of ~0 (Search Console, 3 months to 2026-09-01).

   DELIBERATELY NOT HIDDEN. Normal document flow, at the foot of the list, reachable by scrolling:
   no display:none, no visibility:hidden, no off-screen positioning, no zero height. Hiding text a
   crawler can read and a visitor cannot is cloaking, and would cost the ranking rather than win it.

   The markup between the NASMAT:CONTENT markers is GENERATED — tools/release.mjs owns it and
   rewrites it on every release. Do not hand-edit it in a page; edit the generator. */
.pagecopy{max-width:600px;margin:0 auto;padding:16px 16px 2px;border-top:1px solid var(--line,#D9C9A6);
  font-family:var(--nsm-font-ui);font-size:13px;line-height:1.95;color:rgba(51,36,27,.72)}
.pagecopy h1{font-family:var(--nsm-font-arabic);font-size:17px;font-weight:700;line-height:1.55;
  margin:0 0 6px;color:var(--nsm-espresso-500)}
.pagecopy p{margin:0 0 10px}
/* station names are Latin inside an RTL paragraph; isolate so bidi cannot reorder the line around
   them — without this "Nogoum FM 100.6" renders with the number on the wrong side */
.pagecopy .n{unicode-bidi:isolate}
.pagecopy ul{margin:0 0 10px;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:2px 12px}
.pagecopy li{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagecopy a{color:#8a5320;text-decoration:none}
.pagecopy a:hover{text-decoration:underline}

/* ── [hidden] must actually hide a list-head tool ────────────────────────────────────────────────
   `.sort{display:flex}` (line 47) and `.listhead-tools .sort{display:flex}` (228) are AUTHOR rules,
   and author rules beat the UA stylesheet's `[hidden]{display:none}`. So `favEditWrap`, which ships
   with the `hidden` attribute and is correctly re-hidden by refreshFavEdit() on every country tab,
   was `hidden=true` and `display:flex` at the same time — visible on every tab since 31112, the
   build that introduced it. Measured on genuine 31112 files, not inferred: on the Saudi tab
   `favEdit_hidden:true, favEdit_display:"flex", onScreen:true`.
   Specificity: `.listhead-tools .sort[hidden]` is (0,3,0) and wins outright, so this holds wherever
   the bar is rendered. Fixing it in CSS rather than by deleting the attribute keeps `hidden` as the
   one mechanism for "this tool does not apply to this tab" — which is what the JS already assumes. */
.sort[hidden],.listhead-tools .sort[hidden]{display:none}