/* ============================================================
   BROADCAST MODULE — narration player + share segment.
   Shared by the essay (/) and the ledger (/ledger/). Depends only
   on the ATN custom properties declared in each page's own
   stylesheet (--navy-*, --red*, --gold*, --chyron, --mono, --line).
   ============================================================ */

/* ============================================================
   SHARE — ten platform tiles + ten downloadable cards
   ============================================================ */
.share-grid{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  margin-top:1.5rem}
.share-grid a,.share-grid button{
  display:flex;align-items:center;gap:.7rem;background:var(--card);border:1px solid var(--rule);
  border-left:4px solid var(--red);padding:.75rem .85rem;text-decoration:none;color:var(--ink);
  font-family:var(--chyron);font-weight:600;font-size:1.08rem;letter-spacing:.045em;
  text-transform:uppercase;cursor:pointer;text-align:left;line-height:1.05}
.band-studio .share-grid a,.band-studio .share-grid button,
.band-desk .share-grid a,.band-desk .share-grid button{background:var(--navy-800);border-color:var(--line);color:#fff}
.share-grid a:hover,.share-grid button:hover{background:var(--red);border-color:var(--red);color:#fff}
.share-grid b{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--red);
  width:1.5rem;text-align:center;flex:0 0 auto}
.share-grid a:hover b,.share-grid button:hover b{color:#fff}

.tile-strip{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));
  list-style:none;margin:.75rem 0 0;padding:0}
.tile-strip a{display:block;border:1px solid var(--rule);background:var(--card);line-height:0;
  position:relative}
.tile-strip a:hover{border-color:var(--red)}
.tile-strip img{width:100%;height:auto;display:block}
.tile-strip a::after{content:attr(data-n);position:absolute;left:0;bottom:0;background:var(--red);
  color:#fff;font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;padding:.16rem .35rem;
  line-height:1.3}

.hero-listen{margin-top:1.35rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;background:var(--gold);color:var(--navy-900);border:0;
  padding:.72rem 1.1rem;cursor:pointer;font-weight:600}
.hero-listen:hover{background:var(--gold-lit)}

/* ============================================================
   NARRATION PLAYER — the studio control strip
   ============================================================ */
.narrator{position:fixed;left:0;right:0;bottom:0;z-index:65;pointer-events:none}
.narrator>*{pointer-events:auto}
.listen{position:absolute;right:.9rem;bottom:.9rem;display:flex;align-items:center;gap:.5rem;
  background:var(--red);color:#fff;border:0;padding:.7rem 1rem;cursor:pointer;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.2em;box-shadow:0 16px 34px -18px #000}
.listen:hover{background:var(--red-lit)}
.listen i{width:.55rem;height:.55rem;background:#fff;display:block;border-radius:50%;
  animation:tally 1.8s ease-in-out infinite}
.listen[hidden]{display:none}

.nplayer{background:var(--navy-800);border-top:3px solid var(--gold);
  box-shadow:0 -22px 50px -30px #000;padding:.55rem max(.9rem,calc((100% - 76rem)/2)) .7rem}
.nplayer[hidden]{display:none}
.nbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.onair{display:flex;align-items:center;gap:.4rem;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;padding:.3rem .55rem}
.onair i{width:.42rem;height:.42rem;background:#fff;display:block;animation:tally 1.8s ease-in-out infinite}
.nbar .now{display:flex;flex-direction:column;line-height:1.1;min-width:0;flex:1}
.nbar .now small{font-family:var(--mono);font-size:.52rem;letter-spacing:.18em;color:var(--gold)}
.nbar .now b{font-family:var(--chyron);font-weight:600;font-size:1.1rem;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nbar button{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;background:var(--navy-700);
  color:#cbd7e5;border:1px solid var(--line);padding:.36rem .6rem;cursor:pointer;white-space:nowrap}
.nbar button:hover{background:var(--red);border-color:var(--red);color:#fff}
.nbar button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy-900)}
.nbar #closeBtn{font-size:1rem;line-height:1;padding:.2rem .48rem;letter-spacing:0}

.ncaption{margin:.5rem 0 .45rem;font-size:.95rem;line-height:1.4;color:#dbe3ec;min-height:2.7em;
  border-left:3px solid var(--red);padding-left:.7rem}
.ncaption b{display:inline-block;font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;
  background:var(--red);color:#fff;padding:.12rem .4rem;margin-right:.5rem;vertical-align:.16em}
.ncap-hint{color:#7f92a8;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}

.ncontrols{display:flex;align-items:center;gap:.5rem}
.ncontrols button{font-family:var(--mono);font-size:.72rem;background:var(--navy-700);color:#fff;
  border:1px solid var(--line);padding:.34rem .6rem;cursor:pointer;line-height:1}
.ncontrols button:hover{background:var(--red);border-color:var(--red)}
.ncontrols .play{background:var(--red);border-color:var(--red);font-size:.9rem;padding:.34rem .8rem}
.ncontrols time{font-family:var(--mono);font-size:.62rem;color:#9db0c6;white-space:nowrap}
.ncontrols input[type=range]{flex:1;min-width:4rem;accent-color:var(--red);height:1.1rem}

.nchapters{list-style:none;margin:.6rem 0 0;padding:.6rem 0 0;border-top:1px solid var(--line);
  display:grid;gap:.3rem;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  max-height:12rem;overflow:auto}
.nchapters[hidden]{display:none}
.nchapters button{width:100%;text-align:left;font-family:var(--chyron);font-weight:500;
  font-size:1rem;letter-spacing:.04em;text-transform:uppercase;background:var(--navy-700);
  color:#cbd7e5;border:1px solid var(--line);padding:.36rem .55rem;cursor:pointer;
  display:flex;gap:.5rem;align-items:baseline}
.nchapters button b{font-family:var(--mono);font-weight:400;font-size:.58rem;color:var(--gold)}
.nchapters button:hover{background:var(--navy-600);color:#fff}
.nchapters button.active{background:var(--red);border-color:var(--red);color:#fff}
.nchapters button.active b{color:#fff}

/* the section currently being narrated */
[data-chapter].narrating{position:relative}
[data-chapter].narrating::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--red);box-shadow:0 0 22px rgba(200,16,46,.6)}

body.player-open{padding-bottom:11rem}
@media (max-width:46rem){
  .nbar .now small{display:none}
  /* give the chapter title its own row so it is not clipped to three words */
  .nbar .now{flex:1 1 60%}
  .nbar #flowBtn{margin-left:auto}
  .nchapters{max-height:9rem}
  body.player-open{padding-bottom:14rem}
}