/* ==========================================================================
   Save Souls Today: public site (prototype)
   A custom layer over Bootstrap 5.3 dark. Everything below is what you'd port.
   ========================================================================== */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);

  --ground:#1b1216;   /* wine-black */
  --surface:#25181e;  /* vestment */
  --raised:#33222a;
  --line:#4b3641;
  --text:#f3e8d6;     /* parchment */
  --muted:#c4b5a8;
  --dim:#9a8a82;
  --gold:#e6b25a;     /* candle */
  --gold-ink:#2b1907;
  --lamp:#ff5b45;     /* sanctuary lamp */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --player-h:96px;
}
:root[data-bs-theme=dark]{
  color-scheme:dark;
  --bs-body-bg:var(--ground);
  --bs-body-color:var(--text);
  --bs-body-font-family:var(--sans);
  --bs-border-color:var(--line);
  --bs-secondary-color:var(--muted);
  --bs-emphasis-color:var(--text);
  --bs-link-color:var(--gold);
  --bs-link-hover-color:#f1c67f;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--text);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.5;
  padding-bottom:calc(var(--player-h) + 1.75rem);
  -webkit-text-size-adjust:100%;
}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
mark{background:rgba(230,178,90,.28);color:var(--text);padding:0 .12em;border-radius:3px}


/* ---- custom ---- */
.text-gold { color: var(--gold); }


/* ---- masthead ---- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.25rem;padding-bottom:.9rem}
.brand{display:flex;align-items:center;gap:.9rem;min-width:0}
.logo-tile{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--gold);color:var(--gold-ink);font-size:1.45rem;overflow:hidden}
.logo-tile img{width:100%;height:100%;object-fit:cover;display:block}
.logo-tile.has-img{background:transparent}
.brand-name{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,6vw,3rem);line-height:1;margin:0}
.brand-tag{margin:.35rem 0 0;color:var(--muted);font-size:1rem;line-height:1.35}
.masthead-link{flex:none;color:var(--muted);text-decoration:none;padding:.6rem .25rem;min-height:44px;display:inline-flex;align-items:center}
.masthead-link:hover{color:var(--gold)}

/* ---- on the air ---- */
.onair{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:1.1rem;display:flex;flex-direction:column;gap:.95rem; z-index: 9999;}
.onair-art{display:none}
.onair-body{min-width:0;flex:1 1 auto}
.status{display:flex;align-items:center;gap:.55rem;color:var(--muted);font-size:.95rem;line-height:1.25}
.onair-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.06;margin:.35rem 0 .2rem}
.onair-artist{font-weight:700;font-size:1.15rem}
.onair-album{color:var(--muted);font-size:.95rem;margin-top:.15rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;height:58px;padding:0 1.6rem;border:0;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-weight:700;font-size:1.15rem;width:100%;transition:transform .12s}
.cta:hover{background:#efc272}
.cta:active{transform:scale(.985)}
.cta:disabled{background:var(--raised);color:var(--dim)}
@media (min-width:768px){
  .onair{flex-direction:row;align-items:center;gap:1.6rem;padding:1.5rem}
  .onair-art{display:grid;width:132px;height:132px;font-size:3.2rem;border-radius:18px}
  .cta{width:auto;min-width:12rem}
}

/* sanctuary-lamp dot, and the equalizer that shows audio is flowing */
.lamp{flex:none;width:.7rem;height:.7rem;border-radius:50%;background:var(--dim)}
.lamp.on{background:var(--lamp);animation:lamp 2.6s ease-out infinite}
@keyframes lamp{0%{box-shadow:0 0 0 0 rgba(255,91,69,.55)}70%{box-shadow:0 0 0 .6rem rgba(255,91,69,0)}100%{box-shadow:0 0 0 0 rgba(255,91,69,0)}}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:.85rem}
.eq i{display:block;width:3px;height:100%;background:var(--gold);border-radius:1px;transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.35s}.eq i:nth-child(3){animation-delay:-.7s}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ---- search ---- */
/* .search-wrap{position:relative;z-index:1020;background:var(--ground);padding:1.1rem 0 .35rem}
@media (min-width:768px){.search-wrap{position:sticky;top:env(safe-area-inset-top,0px)}}
.searchbox{display:flex;align-items:center;gap:.5rem;margin:0;height:60px;padding:0 .4rem 0 1.05rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--muted)}
.searchbox:focus-within{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(230,178,90,.22)}
.searchbox .form-control{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font-size:1.15rem;padding:0 .25rem;box-shadow:none}
.searchbox .form-control::placeholder{color:var(--dim)}
.searchbox .form-control::-webkit-search-cancel-button{display:none}
.searchbox .clear{flex:none;width:48px;height:48px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.05rem}
.searchbox .clear:hover{background:var(--raised);color:var(--text)}
.result-info{margin:0;padding:.65rem .25rem 0;color:var(--muted);font-size:.95rem;min-height:1.9rem} */

/* ---- search ---- */
.search-wrap{position:relative;z-index:1020;background:var(--ground);padding:.75rem 0 .25rem}
@media (min-width:768px){.search-wrap{position:sticky;top:env(safe-area-inset-top,0px)}}
.searchbox{display:flex;align-items:center;gap:.4rem;margin:0;height:44px;padding:0 .25rem 0 .85rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--muted);font-size:.95rem}
.searchbox:focus-within{border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(230,178,90,.22)}
.searchbox .form-control{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font-size:1rem;padding:0 .25rem;box-shadow:none}
.searchbox .form-control::placeholder{color:var(--dim)}
.searchbox .form-control::-webkit-search-cancel-button{display:none}
.searchbox .clear{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:.95rem}
.searchbox .clear:hover{background:var(--raised);color:var(--text)}
.result-info{margin:0;padding:.65rem .25rem 0;color:var(--muted);font-size:.95rem;min-height:1.9rem}



/* ---- feast cards ---- */
.feast{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.feast-head{padding:1rem 1.1rem .85rem;border-bottom:1px solid var(--line);border-radius:15px 15px 0 0}
.feast-name{font-family:var(--serif);font-weight:700;font-size:1.7rem;line-height:1.05;margin:0}
.feast-meta{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;margin-top:.55rem;color:var(--muted);font-size:.92rem}
.feast-meta svg,.feast-meta i{margin-right:.35rem}
.feast-list{list-style:none;margin:0;padding:.25rem .55rem}
.feast-list.is-open{max-height:min(31rem,62vh);overflow-y:auto}
.track{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;padding:.7rem .5rem;border-bottom:1px solid rgba(75,54,65,.55)}
.track:last-child{border-bottom-color:transparent}
.track.is-active{background:rgba(230,178,90,.13);border-radius:12px;border-bottom-color:transparent}
.track-play{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--raised);color:var(--gold);font-size:1rem}
.track-play:hover{border-color:var(--gold)}
.track.is-active .track-play{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.track-body{min-width:0}
.track-top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.track-priest{font-weight:700;font-size:1.05rem;line-height:1.3}
.track-dur{flex:none;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.track-date{color:var(--muted);font-size:.95rem;line-height:1.35}
.track-church{color:var(--dim);font-size:.88rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feast-more{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:54px;border:0;border-top:1px solid var(--line);border-radius:0 0 15px 15px;background:transparent;color:var(--gold);font-weight:700;font-size:1rem}
.feast-more:hover{background:rgba(230,178,90,.08)}
.feast-more[aria-expanded=true] svg,.feast-more[aria-expanded=true] i{transform:rotate(180deg)}

/* seek bar (inline + footer share one look) */
.seek{margin-top:.55rem}
.seek-times{display:flex;justify-content:space-between;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums;margin-top:-.2rem}
.seek-range{--pct:0%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.seek-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--gold) var(--pct),var(--line) var(--pct))}
.seek-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--gold);border:3px solid var(--ground)}
.seek-range::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}
.seek-range::-moz-range-progress{height:6px;border-radius:3px;background:var(--gold)}
.seek-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gold);border:3px solid var(--ground)}

/* ---- empty state, about ---- */
.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.empty p{margin:0 0 .4rem}
.empty .cta{width:auto;height:50px;margin-top:.9rem;font-size:1rem}
.about{padding-top:3rem;padding-bottom:1rem}
.about-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.6rem} /* max-width:46rem; */
.about-card h2{font-family:var(--serif);font-weight:700;font-size:2rem;margin:0 0 .6rem}
.about-card p{margin:0;font-size:1.1rem;line-height:1.65;color:var(--muted)}

/* ---- sticky player ---- */
.player{position:fixed;left:0;right:0;bottom:0;z-index:1040;background:rgba(27,18,22,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-top:.65rem;padding-bottom:calc(.65rem + env(safe-area-inset-bottom,0px))}
.player-main{display:flex;align-items:center;gap:.85rem}
.player-art{width:56px;height:56px;border-radius:12px;font-size:1.5rem}
.player-meta{flex:1 1 auto;min-width:0}
.player-status{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.85rem;line-height:1.2;min-height:1.4rem}
.player-title{font-weight:700;font-size:1.05rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-artist,.player-album{color:var(--muted);font-size:.9rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-toggle{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:0;background:var(--gold);color:var(--gold-ink);font-size:1.5rem}
.player-toggle:hover{background:#efc272}
.player-toggle.needs-tap{animation:ring 1.9s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(230,178,90,.55)}70%{box-shadow:0 0 0 .9rem rgba(230,178,90,0)}100%{box-shadow:0 0 0 0 rgba(230,178,90,0)}}
.pill{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:0 .8rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font-size:.85rem;font-weight:700}
.pill:hover{border-color:var(--lamp);color:var(--text)}
.pill svg,.pill i{color:var(--lamp)}
.player-seek{display:flex;align-items:center;gap:.4rem;margin-top:.3rem}
.player-seek .seek-range{flex:1 1 auto;min-width:0}
.time{flex:none;min-width:3.1em;text-align:center;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.skip{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--text);font-size:.95rem;line-height:1}
.skip small{font-size:.62rem;font-weight:700;margin-top:1px}
.skip:hover{background:var(--raised)}
@media (min-width:768px){
  .player-art{width:64px;height:64px}
  .player-title{font-size:1.15rem}
}

@media (max-width:575.98px){.feast-name{font-size:1.55rem}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ---- additions for the live build ---- */
.ghost{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;margin-top:.8rem;padding:0 1.05rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font-weight:700;font-size:.95rem;text-align:left}
.ghost:hover{border-color:var(--gold)}
.ghost svg,.ghost i{color:var(--gold)}
.pill.start:hover{border-color:var(--gold)}
.pill.start svg,.pill.start i{color:var(--gold)}
.about-card p + p{margin-top:1rem}
.alexa{margin-top:1.5rem!important;padding-top:1.2rem;border-top:1px solid var(--line)}
.alexa-intro{display:block;color:var(--muted);font-size:.95rem}
.alexa-say{display:block;margin-top:.25rem;font-family:var(--serif);font-weight:700;font-size:1.65rem;line-height:1.2;color:var(--gold)}
.nojs{margin:1rem 0 0;padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted)}



/* ---- active state: where is the thing that's playing? ---- */
.feast.is-current,.onair.is-current{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.feast.is-current .feast-head{background:rgba(230,178,90,.07)}
.feast-now{position:absolute;top:-.85rem;left:1.1rem;z-index:2;display:none;align-items:center;gap:.45rem;height:1.7rem;padding:0 .85rem 0 .7rem;border-radius:999px;background:var(--gold);color:var(--gold-ink);font-size:.82rem;font-weight:700;line-height:1}
.is-current > .feast-now{display:inline-flex}
.feast-now .eq{height:.75rem}
.feast-now .eq i{background:var(--gold-ink)}
.feast-now .paused-txt{display:none}
.is-paused .feast-now .playing-txt{display:none}
.is-paused .feast-now .paused-txt{display:inline}
.is-paused .feast-now .eq i{animation-play-state:paused}
.track{scroll-margin-top:7rem}
.onair{scroll-margin-top:1rem}
.pulse{animation:jump 1.5s ease-out 1}
@keyframes jump{0%{box-shadow:0 0 0 0 rgba(230,178,90,.85)}100%{box-shadow:0 0 0 18px rgba(230,178,90,0)}}
@media (prefers-reduced-motion:reduce){.pulse{outline:3px solid var(--gold);outline-offset:3px}}

/* footer text is one big tap target */
.player-jump{display:block;position:relative;width:100%;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.player-jump .player-title,.player-jump .player-artist,.player-jump .player-album{display:block}
.player-jump .player-title{padding-right:1.6rem}
.player-locate{position:absolute;right:.15rem;top:.2rem;color:var(--muted);font-size:.8rem}
.player-jump:hover .player-title{text-decoration:underline;text-decoration-color:var(--dim)}
.player-jump:hover .player-locate{color:var(--gold)}

/* small screens: About and 'from the start' shrink to icons; 'Back to live' becomes 'Live' */
.masthead-link{gap:.45rem}
.masthead-link svg,.masthead-link i{color:var(--gold)}
.lbl-short{display:none}
@media (max-width:575.98px){
  .masthead-link{justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%}
  .masthead-link .lbl{display:none}
  .lbl-long{display:none}
  .lbl-short{display:inline}
  #pStart .pill-label{display:none}
  #pStart{width:36px;padding:0;justify-content:center}
}


/* ---- transcript panel + spoken-word search ---- */
.status-actions{display:flex;align-items:center;gap:.4rem;margin-left:auto}
#pTranscript svg,#pTranscript i{color:var(--gold)}
#pTranscript:hover,#pTranscript.is-open{border-color:var(--gold)}

.tpanel{position:fixed;left:0;right:0;bottom:var(--player-h);z-index:1035;background:rgba(37,24,30,.98);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--gold);box-shadow:0 -14px 32px rgba(0,0,0,.4)}
.tpanel-inner{position:relative;display:flex;flex-direction:column;height:min(46vh,26rem);padding-top:.5rem;padding-bottom:.4rem}
.tpanel-head{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;padding:.2rem 0 .45rem}
.tpanel-title{font-family:var(--serif);font-weight:700;font-size:1.45rem;line-height:1;margin:0}
.tpanel-note{margin:.25rem 0 0;color:var(--muted);font-size:.85rem}
.tpanel-close{flex:none;width:44px;height:44px;margin-top:-.2rem;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.1rem}
.tpanel-close:hover{background:var(--raised);color:var(--text)}
.tpanel-body{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.15rem 0 1.2rem}
.tline{display:block;width:100%;margin:0;padding:.55rem .7rem;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:1.08rem;line-height:1.55;text-align:left}
.tline:hover{background:rgba(230,178,90,.08);color:var(--text)}
.tline.is-now{background:rgba(230,178,90,.17);color:var(--text)}
.tline .tt{margin-right:.55rem;color:var(--dim);font-size:.8rem;font-variant-numeric:tabular-nums}
.tline.is-now .tt{color:var(--gold)}
.tpanel .follow{position:absolute;right:.25rem;bottom:.9rem;background:var(--surface);border-color:var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.tpanel .follow svg,.tpanel .follow i{color:var(--gold)}
.tpanel-empty{padding:1.2rem .7rem;color:var(--muted)}

.speech{margin:.35rem 0 1.1rem;padding:.9rem 1rem 0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.speech-head{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.speech-title{font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1.05;margin:0}
.speech-count{flex:none;color:var(--muted);font-size:.92rem}
.speech-status{margin:.45rem 0 .75rem;color:var(--muted);font-size:.95rem}
.speech-status:empty{display:none}
.speech-list{list-style:none;margin:.35rem 0 0;padding:0}
.hit{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;padding:.8rem .3rem;border-top:1px solid rgba(75,54,65,.55)}
.hit:first-child{border-top:0}
.hit.is-active{background:rgba(230,178,90,.13);border-radius:12px;border-top-color:transparent}
.hit.is-active .track-play{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.hit-body{min-width:0}
.hit-snip{font-size:1.02rem;line-height:1.5}
.hit-meta{margin-top:.4rem;color:var(--muted);font-size:.9rem;line-height:1.4}
.hit-priest{font-weight:700;color:var(--text)}
.hit-feast{color:var(--dim);font-size:.88rem;line-height:1.35}
.speech-note{margin:.6rem 0 .9rem;color:var(--dim);font-size:.82rem}
.speech-more{margin:0 -1rem;width:calc(100% + 2rem)}

@media (max-width:575.98px){
  #pTranscript .pill-label{display:none}
  #pTranscript{width:36px;padding:0;justify-content:center}
}