/* ============================================================
   Genre Dive — site.css
   Component CSS (Comps v6, Middle + Umber). Scoped under .gd
   so generic class names can't collide with the block editor
   or plugins.

   Extracted from the inline <style> block in header.php during
   the July 2026 refactoring pass (Website Build Review §2).

   TOKENS: the :root block that used to sit here now lives in
   inc/gd-tokens.php, which emits it at wp_head priority 1 and
   shares the same values with the PHP cover generator and the
   share-image rasteriser (Website Build Review §3). Do not
   reintroduce a :root block in this file — it would override
   the emitted one and silently re-split the source of truth.
   ============================================================ */
.gd *{box-sizing:border-box}
.gd{background:var(--paper);color:var(--text);
  font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-size:18px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased}
.gd .shell{width:min(100% - (var(--gutter) * 2), var(--cap));margin-inline:auto}
.gd .fullbleed{width:100vw;margin-left:calc(50% - 50vw);overflow-x:hidden}
.gd .eyebrow{font-family:"Instrument Sans",sans-serif;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.gd .disp{font-weight:600;line-height:1.0;letter-spacing:-.012em;color:var(--strong);margin:0}
.gd .stand{font-size:clamp(20px,2.1vw,25px);line-height:1.42;color:var(--stand);font-weight:400;margin:0}
.gd a{color:inherit}
.gd .explicit-note{font-family:"Instrument Sans",sans-serif;font-size:11px;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:6px;letter-spacing:.02em;margin:0}
.gd .e-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:2px;background:var(--muted);color:var(--paper);font-size:9px;font-weight:700;letter-spacing:0;flex:none}

/* masthead */
.gd .nav{display:flex;align-items:center;gap:28px;padding:34px 0 28px;border-bottom:1px solid var(--rule)}
.gd .brand{display:flex;align-items:center;gap:18px}
.gd .brand .glyph{flex:none;line-height:0}
.gd .brand .lock{display:flex;flex-direction:column;gap:5px}
.gd .brand .wm{font-family:"Fraunces",serif;font-weight:600;letter-spacing:.015em;font-size:30px;color:var(--strong);line-height:1;text-decoration:none}
.gd .brand .wm .d{color:var(--accent)}
.gd .brand .btag{font-family:"Instrument Sans",sans-serif;font-size:12px;color:var(--muted);letter-spacing:.02em;line-height:1.1}
.gd .nav .links{margin-left:auto;display:flex;gap:26px;align-items:center}
.gd .nav .links .lk{font-family:"Instrument Sans",sans-serif;font-size:13px;color:var(--muted);text-decoration:none}
.gd .nav .sub{font-family:"Instrument Sans",sans-serif;font-size:13px;font-weight:500;color:var(--strong);border:1px solid var(--accent);border-radius:999px;padding:8px 18px;text-decoration:none}
.gd .navburger{display:none}

/* bands */
.gd .feature{background:var(--fb);color:var(--ft)}
.gd .toned{background:var(--tone)}

/* on-air strip (home / catalogue) */
.gd .onair{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;padding:24px 0;gap:0}
.gd .onair .seg{padding-right:32px}
.gd .onair .seg+.seg{padding-left:32px;border-left:1px solid color-mix(in srgb,var(--ft) 16%,transparent);padding-right:32px}
.gd .onair .k{font-family:"Instrument Sans",sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fm)}
.gd .onair .v{font-size:17px;color:var(--ft);margin-top:4px}
.gd .onair .tune{align-self:center;justify-self:end;font-family:"Instrument Sans",sans-serif;font-size:12px;font-weight:500;color:var(--ft);background:var(--fhl);border-radius:999px;padding:9px 18px;text-decoration:none}

/* covers */
.gd .cover{background:var(--paper);color:var(--text);border:1px solid var(--rule);border-radius:9px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:24px;aspect-ratio:1}
.gd .cover.wide{aspect-ratio:3/2}
.gd .cover.has-image{padding:0}
.gd .cover.has-image img{width:100%;height:100%;object-fit:cover;display:block}
.gd .cover.has-wave{padding:0;background:var(--paper)}
.gd .cover.has-wave svg{width:100%;height:100%;display:block}
.gd .cover .clock{display:flex;align-items:center;gap:9px}
.gd .cover .clock .cwm{font-family:"Fraunces",serif;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--strong)}
.gd .cover .clock .cwm .d{color:var(--accent)}
.gd .cover .cgen{font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:600;line-height:1.0;letter-spacing:-.012em;color:var(--strong);font-size:34px}
.gd .cover.wide .cgen{font-size:var(--disp-section)}
.gd .cover .cep{font-family:"Instrument Sans",sans-serif;font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:9px}
.gd .capt{font-family:"Instrument Sans",sans-serif;font-size:11px;color:var(--faint);margin-top:10px;letter-spacing:.02em}

/* buttons */
.gd .btn{font-family:"Instrument Sans",sans-serif;font-size:13px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:11px 19px;cursor:pointer}
.gd .btn.solid{background:var(--accent-text);color:var(--paper);border:1px solid var(--accent-text)}
.gd .btn.ghost{background:transparent;color:var(--strong);border:1px solid var(--rule)}

/* homepage */
.gd .hp-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--sp-xl);align-items:center;padding:var(--sp-xl) 0}
.gd .hp-feature .hp-cover-link{display:block;text-decoration:none;color:inherit}
.gd .hp-feature .meta{display:flex;flex-direction:column;gap:16px}
.gd .hp-feature .disp{font-size:var(--disp-page)}
.gd .hp-byline{font-family:"Instrument Sans",sans-serif;font-size:12px;color:var(--muted)}
.gd .hp-byline .bl{color:var(--faint);text-transform:uppercase;letter-spacing:.1em;margin-right:5px}
.gd .hp-actions{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap}
.gd .recent{padding:var(--sp-xl) 0}
.gd .recent .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:24px}
.gd .ecard{display:block;text-decoration:none;color:inherit}
.gd .ct{margin-top:13px}
.gd .ct .t{font-family:"Fraunces",serif;font-size:19px;font-weight:600;color:var(--strong)}
.gd .ct .e{font-family:"Instrument Sans",sans-serif;font-size:12px;color:var(--faint);margin-top:3px;display:flex;align-items:center;gap:8px}
.gd .badge{font-family:"Instrument Sans",sans-serif;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--rule);border-radius:3px;padding:2px 6px;color:var(--muted)}
.gd .statement{text-align:center;padding:var(--sp-xl) 0}
.gd .statement p{font-size:clamp(24px,2.6vw,34px);color:var(--strong);max-width:30ch;margin:0 auto 24px;line-height:1.24}

/* episode */
.gd .ep-hero{display:grid;grid-template-columns:360px 1fr;gap:var(--sp-lg);align-items:center;padding:var(--sp-lg) 0 var(--sp-2xs)}
.gd .ep-hero .meta{display:flex;flex-direction:column;gap:18px}
.gd .ep-hero .disp{font-size:var(--disp-hero)}
.gd .ep-byline{font-family:"Instrument Sans",sans-serif;font-size:12.5px;color:var(--muted);display:flex;gap:22px;flex-wrap:wrap}
.gd .ep-byline .bl{color:var(--faint);text-transform:uppercase;letter-spacing:.1em;margin-right:5px}
.gd .ep-tags{display:flex;gap:8px;flex-wrap:wrap}
.gd .tag{font-family:"Instrument Sans",sans-serif;font-size:12px;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:4px 13px}

.gd .player{display:flex;align-items:center;gap:20px;padding:22px 0}
.gd .player .play{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--fhl);color:var(--text);flex:none;font-size:16px;text-decoration:none}
.gd .player .pbar{flex:1;min-width:0}
.gd .player .plabel{font-family:"Instrument Sans",sans-serif;font-size:12px;color:var(--fm);margin-top:4px}
.gd .player .pembed{flex:1;min-width:0}
.gd .player iframe{width:100%;border:0;display:block}

.gd .ep-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-2xl);padding:var(--sp-sm) 0}
.gd .writeup{max-width:66ch;font-size:19px;line-height:1.72}
.gd .writeup p{margin:0 0 20px}
/* drop-cap: first paragraph (single-genre) OR first paragraph after an h2 (multi-genre) */
.gd .writeup p:first-of-type::first-letter,
.gd .writeup h2 + p::first-letter{font-size:64px;line-height:.78;float:left;padding:8px 12px 0 0;color:var(--accent);font-weight:600}
.gd .writeup .pron{font-style:italic;color:var(--muted)}
.gd .writeup blockquote{margin:32px 0;padding:6px 0 6px 28px;border-left:3px solid var(--accent);font-size:clamp(22px,2.3vw,29px);line-height:1.3;color:var(--strong);font-style:italic}

.gd .rail{display:flex;flex-direction:column;gap:24px}
.gd .rail .card{border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:22px 24px}
.gd .rail .card h4{font-family:"Instrument Sans",sans-serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.gd .rail .card p{font-family:"Instrument Sans",sans-serif;font-size:15px;color:var(--muted);line-height:1.5;margin:0}
.gd .meta-rows{display:flex;flex-direction:column;gap:10px}
.gd .meta-rows .mr{display:flex;justify-content:space-between;gap:12px;font-family:"Instrument Sans",sans-serif;font-size:13px}
.gd .meta-rows .mr .k{color:var(--faint)}
.gd .meta-rows .mr .v{color:var(--strong);text-align:right}
.gd .grel .gh{font-size:16px;font-weight:600;color:var(--strong);margin-bottom:2px}
.gd .grel .zone{padding:13px 0;border-top:1px solid var(--rule)}
.gd .grel .zl{font-family:"Instrument Sans",sans-serif;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.gd .grel .gline{font-size:16px;line-height:1.5;margin:0 0 4px}
.gd .grel .verb{color:var(--muted)}
.gd .grel .glink{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.gd .grel .gfoot{font-family:"Instrument Sans",sans-serif;font-size:11px;color:var(--faint);margin-top:10px}

.gd .sec{padding:var(--sp-md) 0}
.gd .sec-h{margin-bottom:20px;display:block}
/* ---- Tracklist table (semantic — Website Build Review §4.5) ---- */
.gd .tl{border:1px solid var(--rule);border-radius:10px;overflow:hidden;font-feature-settings:"tnum";background:var(--surface)}
.gd .tl table{width:100%;border-collapse:collapse;table-layout:fixed}
.gd .tl col.c-num{width:4%}.gd .tl col.c-track{width:25%}.gd .tl col.c-artist{width:18%}
.gd .tl col.c-album{width:17%}.gd .tl col.c-length{width:7%}.gd .tl col.c-year{width:6%}
.gd .tl col.c-label{width:12%}.gd .tl col.c-ctrl{width:3%}
.gd .tl thead th{font-family:"Instrument Sans",sans-serif;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:14px 10px 14px 0;text-align:left;background:color-mix(in srgb,var(--text) 4%,var(--surface))}
.gd .tl thead th:first-child{padding-left:22px}
.gd .tl thead th:last-child{padding-right:22px}
.gd .tl .sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.gd .tl .trk-row{border-top:1px solid var(--rule)}
.gd .tl .trk-row td{padding:15px 10px 15px 0;font-family:"Instrument Sans",sans-serif;font-size:13px;color:var(--muted);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd .tl .trk-row td:first-child{padding-left:22px}
.gd .tl .trk-row td.t{font-family:"Fraunces",serif;font-size:17px;color:var(--strong);font-weight:500}
.gd .tl .trk-row td.c-num{color:var(--faint);font-size:12px}
.gd .tl .trk-row .disc{display:inline-flex;align-items:center;justify-content:center;border:0;background:none;color:var(--faint);font-size:18px;line-height:1;padding:4px;cursor:pointer;transition:transform .18s;font-family:inherit}
.gd .tl .trk-row.open .disc{transform:rotate(45deg)}
.gd .tl .trk-row.no-panel td{cursor:default}
/* expand panel — grid 0fr→1fr, no magic height cap (Build Review §5.5) */
.gd .tl .detail-row{border-top:none}
.gd .tl .detail-row td{padding:0}
.gd .tl .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.gd .tl .detail-row.open .panel{grid-template-rows:1fr}
.gd .tl .panel-inner{overflow:hidden;padding:0 22px 0 22px}
.gd .tl .detail-row.open .panel-inner{padding-bottom:16px}
.gd .tl .trk-links{display:flex;gap:18px;font-family:"Instrument Sans",sans-serif;font-size:12px;letter-spacing:.01em;padding-top:2px;padding-bottom:6px}
.gd .tl .trk-links a{color:var(--accent-text);text-decoration:none}
.gd .tl .trk-links a:hover{text-decoration:underline;text-underline-offset:3px}
.gd .tl .trk-meta-mob{display:none}
.gd .tl .trk-note{font-family:"Fraunces",serif;font-size:16px;color:var(--muted);padding-top:4px}
.gd .tl .trk-note .nk{font-family:"Instrument Sans",sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:3px}
/* commentary rows */
.gd .tl .cmt-row td{border-top:1px solid var(--rule);padding:12px 22px;font-size:15px;font-style:italic;color:var(--muted);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.gd .tl .cmt-row .ck{font-style:normal;font-family:"Instrument Sans",sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-right:10px}

.gd .lower{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--sp-lg);padding:var(--sp-md) 0}
.gd .crf{border:1px dashed var(--rule);border-radius:10px;padding:22px 26px;align-self:start}
.gd .crf .ttl{font-family:"Instrument Sans",sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.gd .crf b{font-size:17px;color:var(--strong)}
.gd .crf .why{color:var(--muted);font-size:15px}
.gd .xf .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:26px}
/* Explore Further spans full width when Cutting Room Floor is absent */
.gd .lower > .xf:only-child{grid-column:1 / -1}
.gd .xf h4{font-family:"Instrument Sans",sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
.gd .xf .it{padding:11px 0;border-top:1px solid var(--rule)}
.gd .xf .it:first-of-type{border-top:none}
.gd .xf .it b{font-size:16px;color:var(--strong);font-weight:500}
.gd .xf .it .why{font-size:14px;color:var(--muted);line-height:1.4}
.gd .outro{display:flex;align-items:center;gap:18px;border:1px solid var(--rule);border-radius:10px;padding:18px 26px;background:var(--surface);margin-bottom:8px}
.gd .outro .q{flex:1;font-style:italic;color:var(--muted);font-size:17px}

/* footer */
.gd .foot{padding:48px 0 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.gd .foot .left{display:flex;align-items:center;gap:16px;min-width:0}
.gd .foot .glyph{line-height:0;flex:none}
.gd .foot .tag2{font-style:italic;color:var(--muted);font-size:17px}
.gd .foot .fl{margin-left:auto;display:flex;gap:22px;font-family:"Instrument Sans",sans-serif;font-size:13px;color:var(--muted);white-space:nowrap}
.gd .foot .fl a{text-decoration:none}

/* footer legal row — Website Compliance Standard §1.2. Deliberately quieter
   than .fl: this is a notice, not navigation. */
.gd .foot-legal{padding:20px 0 44px;border-top:1px solid var(--rule);display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;font-family:"Instrument Sans",sans-serif;font-size:12px;line-height:1.55;color:var(--muted)}
.gd .foot-legal .fl-notice{flex:1 1 34ch;min-width:0;max-width:82ch}
.gd .foot-legal .fl-links{margin-left:auto;display:flex;gap:18px;white-space:nowrap}
.gd .foot-legal .fl-links a{text-decoration:none}


/* catalogue */
.gd .cat-head{padding:var(--sp-lg) 0 0}
.gd .cat-head .disp{font-size:var(--disp-section)}
.gd .cat-head .stand{margin-top:14px;max-width:48ch}
.gd .tabs{display:flex;gap:4px;align-items:flex-end;flex-wrap:wrap;border-bottom:1px solid var(--rule);margin-top:28px}
.gd .tabs .tab{font-family:"Instrument Sans",sans-serif;font-size:13px;padding:11px 16px;color:var(--muted);cursor:pointer;border:1px solid transparent;border-bottom:none;text-decoration:none}
.gd .tabs .tab.active{color:var(--strong);font-weight:600;background:var(--surface);border-color:var(--rule);border-radius:7px 7px 0 0;position:relative;top:1px}
.gd .tabs .tab.future{color:var(--faint);opacity:.65;pointer-events:none}
.gd .cat-filter{display:flex;align-items:center;gap:8px;margin:22px 0 0;font-family:"Instrument Sans",sans-serif;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.12em}
.gd .chip{font-family:"Instrument Sans",sans-serif;border:1px solid var(--rule);border-radius:999px;padding:5px 13px;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);background:var(--surface);cursor:pointer;text-decoration:none}
.gd .chip.on{background:var(--strong);color:var(--paper);border-color:var(--strong)}
.gd .region{padding:var(--sp-2xs) 0;border-bottom:1px solid var(--rule)}
.gd .region:last-child{border-bottom:none}
.gd .region .reg-h{font-family:"Instrument Sans",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:20px;display:flex;align-items:center}
.gd .region .reg-h .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:9px;flex:none}
.gd .region .reg-h .mood-desc{text-transform:none;letter-spacing:.01em;font-weight:400;font-size:12px;color:var(--faint);margin-left:12px;padding-left:12px;border-left:1px solid var(--rule-cover)}
.gd .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.gd .cat-empty{color:var(--muted);font-style:italic;padding:40px 0}

.gd .about-head{padding:var(--sp-xl) 0 0;max-width:64ch}
.gd .about-head .disp{font-size:var(--disp-page)}
.gd .about-head .stand{margin-top:16px}
.gd a:focus-visible,.gd button:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.gd .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--text);color:var(--paper);font-family:"Instrument Sans",sans-serif;font-size:14px;padding:10px 18px;border-radius:0 0 6px 0;text-decoration:none}
.gd .skip-link:focus{left:0}
#gd-navtoggle{display:none}
#gd-navtoggle:focus-visible ~ .navburger{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:4px}
@media(max-width:1000px){.gd .ep-main{grid-template-columns:1fr;gap:36px}.gd .recent .grid{grid-template-columns:repeat(2,1fr)}.gd .cat-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Mobile (≤760px): one clean takeover, no half-states ──
   Everything that needs to change for narrow screens happens at a
   single breakpoint so there is no in-between zone where one area
   has converted and another hasn't. */
@media(max-width:760px){

  /* ---- Layout: single-column stacks ---- */
  .gd .hp-feature,.gd .ep-hero,.gd .lower{grid-template-columns:1fr;gap:26px}
  .gd .recent .grid{grid-template-columns:1fr 1fr}
  .gd .foot .fl{margin-left:0}
  .gd .foot-legal .fl-links{margin-left:0}

  /* ---- Nav: hamburger toggle (CSS-only, no JS) ---- */
  .gd .nav .links{
    display:none;position:absolute;top:100%;right:0;left:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:8px var(--gutter) 16px;z-index:50
  }
  .gd .nav{position:relative;flex-wrap:wrap}
  #gd-navtoggle:checked ~ .links{display:flex}
  .gd .nav .links .lk,.gd .nav .links .sub{
    width:100%;padding:12px 0;font-size:16px;border:none;border-radius:0
  }
  .gd .nav .links .sub{
    color:var(--accent-text);border:1px solid var(--accent-text);
    border-radius:999px;padding:9px 18px;width:auto;margin-top:8px
  }
  .gd .navburger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:40px;height:40px;cursor:pointer;flex:none
  }
  /* Keyboard access: the checkbox is focusable (visually hidden, not display:none)
   * only at mobile widths where the burger exists; Space toggles the menu. */
  #gd-navtoggle{display:block;position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .gd .navburger span{display:block;height:2px;width:22px;background:var(--strong);margin-left:auto;transition:.2s}
  #gd-navtoggle:checked ~ .navburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #gd-navtoggle:checked ~ .navburger span:nth-child(2){opacity:0}
  #gd-navtoggle:checked ~ .navburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ---- Tracklist → card rows ---- */
  .gd .tl table{table-layout:auto}
  .gd .tl thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
  .gd .tl col.c-album,.gd .tl col.c-length,.gd .tl col.c-year,.gd .tl col.c-label{width:0}
  .gd .tl .hide{display:none}
  .gd .tl .trk-row td{padding:12px 6px 12px 0;font-size:12px}
  .gd .tl .trk-row td:first-child{padding-left:16px;width:28px}
  .gd .tl .trk-row td.t{font-size:15px}
  .gd .tl .trk-row td.c-ctrl{width:24px;text-align:right;padding-right:16px}
  .gd .tl .panel-inner{padding:0 16px 0 16px}
  .gd .tl .detail-row.open .panel-inner{padding-bottom:14px}
  .gd .tl .trk-meta-mob{display:block;font-family:"Instrument Sans",sans-serif;font-size:12px;color:var(--faint);padding:4px 0 2px}
  .gd .tl .cmt-row td{padding:11px 16px}

  /* ---- On Air strip ----
     The ON AIR line spans the top. Below it, the NEXT DIVE text and the
     Tune-in button share a row — text left, button right — and that row
     never wraps, so the button always stays to the right of NEXT DIVE.
     The | divider is dropped when stacked. */
  .gd .onair{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    row-gap:14px;column-gap:16px;padding:20px 0
  }
  /* ON AIR: always spans both columns on its own row */
  .gd .onair .seg:first-child{
    grid-column:1 / -1;padding-right:0
  }
  /* NEXT DIVE: col 1 of row 2, shrinks but doesn't wrap */
  .gd .onair .seg+.seg{
    grid-column:1;grid-row:2;
    min-width:0;padding-left:0;border-left:none
  }
  /* Tune in: col 2 of row 2, always beside NEXT DIVE */
  .gd .onair .tune{
    grid-column:2;grid-row:2;
    white-space:nowrap;margin-left:0;align-self:center;padding:9px 20px
  }

  /* ---- Catalogue tabs → horizontal scroll strip ----
     No negative-margin bleed: .gd{overflow-x:hidden} would clip it.
     Instead the strip sits at full content width and fades at the edges
     via a mask, which gives the same "more to scroll" affordance. */
  /* scroll container: flex row so chevrons align to the strip's natural height */
  .gd .tabs-scroll{
    position:relative;display:flex;align-items:center;
    margin-top:20px;gap:0
  }
  /* the actual scrolling strip */
  .gd .tabs{
    flex:1;min-width:0;
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-bottom:none;
    padding:0 0 2px;margin-top:0;gap:8px  /* margin-top moved to .tabs-scroll */
  }
  .gd .tabs::-webkit-scrollbar{display:none}
  /* shared chevron button style */
  .gd .tabs-prev,
  .gd .tabs-more{
    flex:none;position:relative;z-index:2;
    display:flex;align-items:center;justify-content:center;
    width:48px;height:100%;min-height:46px;
    border:0;cursor:pointer;
    font-size:22px;line-height:1;color:var(--strong);
    background-color:transparent;padding:0;
    -webkit-appearance:none;appearance:none
  }
  /* left fade + chevron — explicit background-image so it can't be overridden by background-color */
  .gd .tabs-prev{
    background-image:linear-gradient(to left,transparent 0%,var(--paper) 65%);
    background-color:transparent;
    padding-right:6px
  }
  /* right fade + chevron */
  .gd .tabs-more{
    background-image:linear-gradient(to right,transparent 0%,var(--paper) 65%);
    background-color:transparent;
    padding-left:6px
  }
  .gd .tabs-prev[hidden],
  .gd .tabs-more[hidden]{display:none}
  .gd .tabs .tab{
    flex:none;white-space:nowrap;border:1px solid var(--rule);
    border-radius:999px;padding:9px 16px;font-size:13px;top:0;
    background:var(--surface)
  }
  .gd .tabs .tab.active{
    background:var(--strong);color:var(--paper);
    border-color:var(--strong);border-radius:999px
  }
  .gd .cat-filter{flex-wrap:wrap;gap:8px;margin-top:14px}
  .gd .chip{padding:7px 14px}
}