/* Project Whippoorwill — AI voice summary player.
   Pill + modal pattern mirrors weather-widget-v1 / surf-status CSS. px font
   sizing throughout (site base is 62.5% so rem values render ~40% small).
   Scoped to .hg-whippoorwill-*. */

/* ── Pill (lives in .hg-status-pills via HGStatusPills.place) ─────── */

.hg-whippoorwill-pill-wrap{
  display:inline-flex;
  align-items:center;
}

.hg-whippoorwill-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  cursor:pointer;
  padding:8px 14px;
  border-radius:999px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:#2B9DE8;              /* universal sky blue — audio feature identity */
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.3px;
  -webkit-appearance:none;
  appearance:none;
}
.hg-whippoorwill-pill:hover{opacity:.92}
.hg-whippoorwill-pill:focus{outline:2px solid #fff;outline-offset:-2px}
.hg-whippoorwill-pill-icon{font-size:14px;line-height:1}

/* Listen is a universal audio feature — not island-themed. The same sky-blue
   pill renders on every page so readers learn the visual affordance once and
   recognize it everywhere. (Prior implementation used island accent colors;
   reverted because it diluted the feature's own identity.) */

/* ── Banner (injected below action bar for first-time discoverability) ─── */

.hg-whippoorwill-banner-wrap{
  margin:18px 0 24px;
  text-align:center;
}

/* Auto-injected banners (attraction/guide/post pages) sit full-width below
   the existing action bar at every viewport. The JS still wraps both in
   .hg-whippoorwill-action-row so future tweaks have a hook, but the wrapper
   renders as a plain block — no flex side-by-side. Earlier revisions tried
   to pair them as flex columns on desktop, but on any layout with a sidebar
   (most attraction pages) the content column is too narrow and the banner
   got squished into a vertical sliver next to the back button. Stacking
   keeps the banner readable at every width and matches mobile behavior. */
.hg-whippoorwill-action-row{
  /* intentionally empty — block layout at all widths */
}

.hg-whippoorwill-banner{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  background:linear-gradient(135deg,#2B9DE8 0%,#1E86D2 100%);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:14px 18px;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  box-shadow:0 3px 10px rgba(43,157,232,.25);
  transition:transform .1s ease, box-shadow .2s ease;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}
.hg-whippoorwill-banner:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(43,157,232,.35);
}
.hg-whippoorwill-banner:focus{
  outline:2px solid #fff;
  outline-offset:-2px;
}

.hg-whippoorwill-banner-icon{
  flex:0 0 auto;
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  line-height:1;
  animation:hg-whippoorwill-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes hg-whippoorwill-icon-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0.55);}
  50%{box-shadow:0 0 0 10px rgba(255,255,255,0);}
}
@media (prefers-reduced-motion:reduce){
  .hg-whippoorwill-banner-icon{animation:none;}
}

.hg-whippoorwill-banner-text{
  flex:1 1 auto;
  min-width:0;
  display:flex;flex-direction:column;
  gap:3px;
}

.hg-whippoorwill-banner-title{
  font-size:16px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  line-height:1.15;
  color:#fff;
}

.hg-whippoorwill-banner-sub{
  font-size:13px;
  opacity:.92;
  line-height:1.35;
  color:#fff;
}

.hg-whippoorwill-banner-duration{
  flex:0 0 auto;
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  padding:5px 12px;
  background:rgba(255,255,255,.2);
  border-radius:999px;
  white-space:nowrap;
}

@media (max-width:600px){
  .hg-whippoorwill-banner{padding:12px 14px;gap:10px}
  .hg-whippoorwill-banner-icon{width:36px;height:36px;font-size:14px}
  .hg-whippoorwill-banner-title{font-size:14px}
  .hg-whippoorwill-banner-sub{font-size:12px}
  .hg-whippoorwill-banner-duration{font-size:12px;padding:4px 9px}
}

/* Banner CTA link — small text link below the banner pointing at the
   per-island audio library (or the all-islands hub for pages without a
   recognized island). Visually subordinate to the banner button so the
   primary "press play" action stays dominant; readers who want more guides
   can opt into the full library without competing with playback. */
.hg-whippoorwill-banner-cta{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:8px;
  padding:2px 0;
  font-size:13px;
  font-weight:600;
  color:#1E86D2;
  text-decoration:none;
  line-height:1.3;
  transition:color .15s ease;
}
.hg-whippoorwill-banner-cta:hover,
.hg-whippoorwill-banner-cta:focus{
  color:#0E5FA0;
  text-decoration:underline;
}
.hg-whippoorwill-banner-cta-arrow{
  font-weight:700;
  transition:transform .15s ease;
}
.hg-whippoorwill-banner-cta:hover .hg-whippoorwill-banner-cta-arrow{
  transform:translateX(2px);
}
@media (max-width:600px){
  .hg-whippoorwill-banner-cta{font-size:12px;margin-top:6px}
}

@media print{
  .hg-whippoorwill-banner-wrap{display:none !important}
}

/* ── Modal ────────────────────────────────────────────────────────── */

.hg-whippoorwill-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:99998;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.hg-whippoorwill-modal.is-open{display:flex}

.hg-whippoorwill-modal-bg{
  position:absolute;inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.hg-whippoorwill-modal-card{
  position:relative;z-index:1;
  background:#fff;
  border-radius:16px;
  max-width:640px;width:100%;
  max-height:85vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}

.hg-whippoorwill-modal-head{
  padding:18px 22px 12px;
  border-bottom:1px solid #eee;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
}
.hg-whippoorwill-modal-brand{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;
}
.hg-whippoorwill-modal-logo{
  height:40px;width:auto;display:block;
}
.hg-whippoorwill-modal-head h3{
  margin:0;
  font-size:19px;
  font-weight:700;
  color:#222;
  display:flex;align-items:center;
}

/* "Open page →" link — appears under the title only after the reader has
   swapped to a Keep-Listening entry, giving them an exit path to the
   actual page they're now hearing about. Brand blue to match the banner
   CTA, with a subtle hover lift. Kept text-link sized rather than a
   button so the audio player remains the dominant affordance. */
.hg-whippoorwill-modal-visit{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 0;
  font-size:14px;
  font-weight:600;
  color:#1E86D2;
  text-decoration:none;
  line-height:1.3;
  transition:color .15s ease;
}
.hg-whippoorwill-modal-visit:hover,
.hg-whippoorwill-modal-visit:focus{
  color:#0E5FA0;
  text-decoration:underline;
}
.hg-whippoorwill-modal-visit-arrow{
  font-weight:700;
  transition:transform .15s ease;
}
.hg-whippoorwill-modal-visit:hover .hg-whippoorwill-modal-visit-arrow{
  transform:translateX(2px);
}
@media (max-width:600px){
  .hg-whippoorwill-modal-visit{font-size:13px}
}

/* Head controls — sits at the right of the modal head. Minimize button
   stays visible in expanded state; Expand button is hidden until the
   modal is in minimized state. Close is always available. */
.hg-whippoorwill-modal-head-controls{
  display:flex;align-items:center;gap:4px;flex-shrink:0;
}
/* Three-button window controls on the modal header.
   Inspired by Mac traffic lights in POSITION + behavior, but colored
   with the Hawaii Guide island palette (big-island red / oahu orange /
   kauai green) rather than Apple's exact hues — keeps the UI pattern
   without aping their brand. Icons are always visible (dark ink on
   the colored fill) so readers can see what each does at a glance
   instead of needing to hover first. */
.hg-tl{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.hg-tl-btn{
  width:18px;height:18px;
  padding:0;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:50%;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(0,0,0,0.55);
  transition:transform .12s ease, color .12s ease, box-shadow .12s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18);
}
.hg-tl-btn svg{width:11px;height:11px}
/* The Max/Restore button carries TWO icons — one for medium-state (expand
   outward) and one for big-state (collapse inward). Only one shows at a
   time, based on .is-maximized on the modal. Same button, state-aware
   affordance: medium → click to go big, big → click to go back to medium. */
.hg-tl-max .hg-tl-icon-collapse{display:none}
.hg-whippoorwill-modal.is-maximized .hg-tl-max .hg-tl-icon-expand{display:none}
.hg-whippoorwill-modal.is-maximized .hg-tl-max .hg-tl-icon-collapse{display:inline-block}
.hg-tl-btn:hover{
  color:rgba(0,0,0,0.85);
  transform:scale(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 0 0 2px rgba(29,151,113,0.15);
}
.hg-tl-close{background:#c3232f}   /* Big Island red */
.hg-tl-min{background:#F27A24}     /* Oahu orange */
.hg-tl-max{background:#1D9771}     /* Kauai green — site primary */
/* Icon color white for clarity against the saturated brand fills */
.hg-tl-btn{color:#fff}
.hg-tl-btn:hover{color:#fff}
/* Legacy aliases — keep expand button working in minimized state */
.hg-whippoorwill-modal-expand{
  display:none;
  background:none;border:none;
  color:#777;cursor:pointer;
  padding:4px 8px;
  font-size:22px;line-height:1;
  align-items:center;justify-content:center;
}
.hg-whippoorwill-modal-expand:hover{color:#1D9771}
.hg-whippoorwill-modal-minimize:hover,
.hg-whippoorwill-modal-expand:hover,
.hg-whippoorwill-modal-close:hover{color:#1D9771}

/* ─── Minimized state ───────────────────────────────────────────
   Modal collapses to a slim floating bar pinned to the bottom of
   the viewport so the page behind stays interactable while audio
   keeps playing. Audio element is never torn down — playback
   position + state survive the transition. Only the player row
   stays visible: logo, play button, scrub bar, expand, close.
   Transcript, voice toggle, speed buttons, mode toggle, and the
   disclaimer are all hidden in this state. */
.hg-whippoorwill-modal.is-minimized{
  align-items:flex-end;justify-content:center;
  padding:0;
  pointer-events:none; /* backdrop won't block clicks — let page show through */
}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-bg{display:none}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-card{
  pointer-events:auto;
  /* Lifted 90px from the viewport bottom so the Raptive sticky ad (typically
     60-80px tall, pinned to the bottom with a very high z-index) doesn't
     sit on top of the player. On pages without Raptive, the player just
     floats a bit higher than centered — still clearly "minimized bar" UX. */
  position:fixed;left:16px;right:16px;bottom:90px;
  max-width:720px;margin:0 auto;
  max-height:none;
  border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
  overflow:visible;
  /* Bump above Raptive's sticky footer (seen at ~100000-2147483647) — we
     can't outrank max int, but lots of Raptive stacks settle around 10000.
     If this still collides in the wild, we can switch to bottom:calc(100vh
     - some-safe-top-inset) and accept a top-anchored minimized bar instead. */
  z-index:2;
}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-head{
  padding:10px 14px 8px;
  border-bottom:none;
}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-brand{flex-direction:row;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-logo{height:24px}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-head h3{font-size:14px;color:#555;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-head h3::before{content:"▶ "}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-body{padding:0 14px 10px}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-foot{display:none}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-transcript{display:none}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-voice-wrap,
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-mode-wrap{display:none}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-speed-wrap{display:none}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-player{padding:0;background:transparent}
.hg-whippoorwill-modal.is-minimized .hg-tl-min,
.hg-whippoorwill-modal.is-minimized .hg-tl-max{display:none}
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-expand{display:inline-flex}

/* ─── Maximized state ───────────────────────────────────────────
   Expands the modal to near-full viewport so readers can see the
   entire transcript without hunting for the scroll track. Useful for
   long arrival narrations or the (future) route-segment scripts.
   Mutually exclusive with minimized; clicking either clears the other. */
.hg-whippoorwill-modal.is-maximized .hg-whippoorwill-modal-card{
  max-width:min(1200px, 96vw);
  width:96vw;
  max-height:94vh;
  height:94vh;
  display:flex;
  flex-direction:column;
}
.hg-whippoorwill-modal.is-maximized .hg-whippoorwill-modal-body{
  flex:1 1 auto;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.hg-whippoorwill-modal.is-maximized .hg-whippoorwill-transcript{
  flex:1 1 auto;
  font-size:18px;
  line-height:1.7;
  max-height:none;
}
/* Previously hid the Max button when already maximized. We now keep it
   visible and swap its icon to "restore inward" so the big modal still
   exposes all three window controls (Close | Restore-to-medium | Minus). */

/* Mobile: minimized bar hugs the bottom edge more tightly */
@media (max-width:640px){
  .hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-card{
    left:8px;right:8px;bottom:8px;
    border-radius:12px;
  }
  .hg-whippoorwill-modal.is-minimized .hg-whippoorwill-modal-head h3{display:none}
}

.hg-whippoorwill-modal-body{padding:18px 22px}

.hg-whippoorwill-modal-foot{
  padding:12px 22px 16px;
  border-top:1px solid #eee;
  background:#fafafa;
  border-radius:0 0 16px 16px;
}

.hg-whippoorwill-disclaimer{
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:#777;
}

.hg-whippoorwill-credit{
  margin:6px 0 0;
  padding-top:6px;
  border-top:1px solid #e8e8e8;
  font-size:11px;
  line-height:1.5;
  color:#999;
}

.hg-whippoorwill-credit a{
  color:#999;
  text-decoration:underline;
}

.hg-whippoorwill-credit a:hover{
  color:#1D9771;
}

/* ── Player controls ──────────────────────────────────────────────── */

.hg-whippoorwill-player{
  background:#f6f5fb;
  border-radius:12px;
  padding:14px 14px 12px;
  margin-bottom:16px;
}

.hg-whippoorwill-controls{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.hg-whippoorwill-play{
  flex:0 0 auto;
  width:44px;height:44px;
  border:none;
  border-radius:50%;
  background:#2B9DE8;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition:transform .1s ease;
}
.hg-whippoorwill-play:hover{transform:scale(1.04)}
.hg-whippoorwill-play:focus{outline:2px solid #2B9DE8;outline-offset:2px}
.hg-whippoorwill-play.is-playing{background:#333}

.hg-whippoorwill-scrub{
  flex:1 1 160px;
  min-width:160px;
  display:flex;flex-direction:column;
  gap:4px;
}

.hg-whippoorwill-progress-wrap{
  width:100%;
  height:6px;
  border-radius:3px;
  background:#ddd6e8;
  cursor:pointer;
  overflow:hidden;
  position:relative;
}

.hg-whippoorwill-progress-bar{
  height:100%;
  width:0%;
  background:#2B9DE8;
  border-radius:3px;
  transition:width .1s linear;
}

.hg-whippoorwill-times{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#555;
  font-variant-numeric:tabular-nums;
}

.hg-whippoorwill-speed-wrap{
  display:inline-flex;
  gap:4px;
  flex:0 0 auto;
}

.hg-whippoorwill-speed{
  border:1px solid #cbc2de;
  background:#fff;
  padding:5px 9px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  color:#555;
  cursor:pointer;
  font-family:inherit;
}
.hg-whippoorwill-speed:hover{background:#f0ecf8}
.hg-whippoorwill-speed.is-active{
  background:#2B9DE8;
  border-color:#2B9DE8;
  color:#fff;
}

/* ── Voice toggle (Hoku / Honu) ─────────────────────────────────── */

.hg-whippoorwill-voice-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #e3dff0;
}

.hg-whippoorwill-voice-label{
  font-size:12px;
  font-weight:700;
  color:#2B9DE8;
  text-transform:uppercase;
  letter-spacing:.3px;
  margin-right:2px;
}

.hg-whippoorwill-voice{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #cbc2de;
  background:#fff;
  padding:5px 11px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color:#333;
  cursor:pointer;
  font-family:inherit;
}
.hg-whippoorwill-voice:hover{background:#f0ecf8}
.hg-whippoorwill-voice.is-active{
  background:#2B9DE8;
  border-color:#2B9DE8;
  color:#fff;
}

.hg-whippoorwill-voice-dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:#e68fb0;
}
.hg-whippoorwill-voice-dot--m{background:#5a8fd4}
.hg-whippoorwill-voice.is-active .hg-whippoorwill-voice-dot{box-shadow:0 0 0 2px #fff}

/* ── Transcript ─────────────────────────────────────────────────── */

.hg-whippoorwill-transcript{
  font-size:16px;
  line-height:1.6;
  color:#333;
  max-height:260px;
  overflow-y:auto;
  padding:4px 2px;
}

.hg-whippoorwill-transcript .hg-whippoorwill-sent{
  display:inline;
  color:#666;
  transition:color .2s ease, background .2s ease;
}

.hg-whippoorwill-transcript .hg-whippoorwill-sent.is-current{
  color:#222;
  background:#ffe8a6;
  border-radius:3px;
  padding:0 2px;
}

/* ── Local Mode toggle (inside modal) ─────────────────────────── */
/* Real control — flipping it here ALSO flips the site-wide header
   toolbar (via window.HGGeo.setMode). Single source of truth is
   localStorage.hg_geo_mode. Accent color shifts green when Local
   Mode is active so readers see the change at the control itself. */

.hg-whippoorwill-mode-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  width:100%;
  margin-top:12px;
  padding:12px 14px;
  border-radius:10px;
  background:#f3eefb;
  border:1px solid #e3dff0;
  font-size:13px;
  line-height:1.45;
}
.hg-whippoorwill-mode-status{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  min-width:0;
}
.hg-whippoorwill-mode-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b3a2d4;
  flex:0 0 8px;
}
.hg-whippoorwill-mode-label{
  font-weight:700;
  color:#4b2e83;
  letter-spacing:.2px;
  text-transform:uppercase;
  font-size:11px;
}
.hg-whippoorwill-mode-value{
  font-weight:600;
  color:#333;
  font-size:13px;
}
.hg-whippoorwill-mode-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #4b2e83;
  background:#4b2e83;
  color:#fff;
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
.hg-whippoorwill-mode-btn:hover{opacity:.92}
.hg-whippoorwill-mode-btn:focus{outline:2px solid #fff;outline-offset:-2px}
.hg-whippoorwill-mode-hint{
  width:100%;
  margin:0;
  color:#666;
  font-size:12px;
  line-height:1.45;
}
.hg-whippoorwill-mode-wrap[data-active="on_location"]{
  background:#e8f5ee;
  border-color:#bce2ca;
}
.hg-whippoorwill-mode-wrap[data-active="on_location"] .hg-whippoorwill-mode-dot{
  background:#1D9771;
  box-shadow:0 0 0 3px rgba(29,151,113,.18);
}
.hg-whippoorwill-mode-wrap[data-active="on_location"] .hg-whippoorwill-mode-label{
  color:#0f5a1a;
}
.hg-whippoorwill-mode-wrap[data-active="on_location"] .hg-whippoorwill-mode-btn{
  background:#fff;
  color:#0f5a1a;
  border-color:#1D9771;
}

/* ── Pill marker (at-a-glance Local Mode indicator on the Listen pill) ── */
/* When mode === 'on_location', a small green ring appears before the
   Listen text, and the pill text gets a " · Local" suffix. The pill
   stays sky blue (audio-feature identity) so readers don't mistake it
   for a different control. */

.hg-whippoorwill-pill[data-mode="on_location"]{
  box-shadow:0 0 0 2px #1D9771, 0 2px 6px rgba(0,0,0,.15);
}
.hg-whippoorwill-pill[data-mode="on_location"] .hg-whippoorwill-pill-icon{
  color:#aaf0c8;
}
.hg-whippoorwill-pill-mode{
  font-weight:800;
  letter-spacing:.3px;
}
.hg-whippoorwill-pill[data-mode="on_location"] .hg-whippoorwill-pill-mode{
  color:#aaf0c8;
}

/* ── Mobile tuning ─────────────────────────────────────────────── */

@media (max-width:600px){
  .hg-whippoorwill-modal{padding:12px}
  .hg-whippoorwill-modal-head{padding:14px 16px 10px}
  .hg-whippoorwill-modal-head h3{font-size:17px}
  .hg-whippoorwill-modal-body{padding:14px 16px}
  .hg-whippoorwill-modal-foot{padding:10px 16px 14px}
  .hg-whippoorwill-transcript{font-size:15px;max-height:220px}
  .hg-whippoorwill-controls{gap:10px}
  .hg-whippoorwill-speed{padding:4px 7px;font-size:11px}
}

/* ── "Keep Listening" rail ─────────────────────────────────────
   Renders inside the modal body, below the transcript. Cards are real
   <a href> links so crawlers see them as proper internal-link signal;
   the JS intercepts plain left-clicks to swap audio in place.

   Each card carries an island accent stripe on its left edge — visible
   continuity with the rest of the site's island color system. The
   end-of-audio "is-suggesting" pulse draws attention exactly when the
   reader is asking "what next." ────────────────────────────────── */

.hg-whippoorwill-related-rail{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #e6eaee;
}
.hg-whippoorwill-related-heading{
  margin:0 0 10px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#5a6671;
}
.hg-whippoorwill-related-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  /* minmax(0, 1fr) — NOT plain 1fr — so the track can shrink below its
     content's intrinsic min-width. Default 1fr means minmax(auto, 1fr),
     where `auto` is the min-content size. With white-space:nowrap titles,
     min-content equals the full title width, which pushes the track past
     its 50% share and overflows the modal. minmax(0, ...) lets the track
     shrink and the title's text-overflow:ellipsis kicks in cleanly. */
  grid-template-columns:minmax(0, 1fr);
  gap:8px;
}
@media (min-width:680px){
  .hg-whippoorwill-related-list{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
}
/* min-width:0 propagates the shrink-allowance through every flex/grid
   ancestor of the title — without these, the title's nowrap natural
   width forces overflow regardless of the grid track sizing above. */
.hg-whippoorwill-related-item{margin:0;padding:0;min-width:0}
.hg-whippoorwill-related-card{min-width:0}

.hg-whippoorwill-related-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  background:#fff;
  border:1px solid #dde3e9;
  border-left:4px solid #5a6671;
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  cursor:pointer;
}
.hg-whippoorwill-related-card:hover,
.hg-whippoorwill-related-card:focus{
  background:#f4f8fb;
  border-color:#cfd6dc;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  outline:none;
  transform:translateY(-1px);
  text-decoration:none;
}
.hg-whippoorwill-related-card:focus-visible{
  box-shadow:0 0 0 2px #1D9771, 0 1px 6px rgba(0,0,0,.06);
}

/* Island accent stripe — matches the brand colors used elsewhere on the
   site (oahu orange, maui blue, big-island red, kauai green, fallback gray
   for /listen and other multi-island pages). */
.hg-whippoorwill-related-card.hg-whippoorwill-oahu{border-left-color:#F27A24}
.hg-whippoorwill-related-card.hg-whippoorwill-maui{border-left-color:#1866B4}
.hg-whippoorwill-related-card.hg-whippoorwill-big-island{border-left-color:#c3232f}
.hg-whippoorwill-related-card.hg-whippoorwill-kauai{border-left-color:#1D9771}

/* Currently-playing card — soft fill + bolder border to make the player's
   "here's what's on right now" obvious without dominating the layout. */
.hg-whippoorwill-related-card.is-active{
  background:#eef7f3;
  border-color:#1D9771;
  border-left-width:4px;
}
.hg-whippoorwill-related-card.is-active .hg-whippoorwill-related-icon{
  background:#1D9771;
  color:#fff;
}
.hg-whippoorwill-related-card.is-active .hg-whippoorwill-related-icon i.fa{
  /* Switch the play arrow to the bars icon while this card is the active
     track. CSS-only — JS doesn't need to swap classnames per card. */
}

/* Already-played-in-this-session — muted so readers see their progress
   through the queue. Subtle, not strikethrough. */
.hg-whippoorwill-related-card.is-played:not(.is-active){
  opacity:.65;
}
.hg-whippoorwill-related-card.is-played:not(.is-active) .hg-whippoorwill-related-title{
  color:#7a8089;
}

.hg-whippoorwill-related-icon{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#eef0f3;
  color:#1D9771;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Island silhouettes (fa-oahu / fa-maui / fa-big-island / fa-kauai)
     render slightly tighter than fa-play; bump up so the shape reads
     clearly inside the 32px circle without crowding the edges. */
  font-size:16px;
  transition:background .15s ease, color .15s ease;
}
/* Per-island default tint — the silhouette inside the circle takes the
   brand color so the leading badge harmonises with the left-edge stripe.
   Hover state inverts to a filled brand-color circle with a white icon,
   so the reader gets a strong "you're targeting this card" signal that
   stays on-brand instead of jumping to green on a Maui or Big Island
   card. The is-active (currently playing) state keeps the universal
   green fill so "now playing" reads unambiguously across all islands. */
.hg-whippoorwill-related-card.hg-whippoorwill-oahu .hg-whippoorwill-related-icon{color:#F27A24}
.hg-whippoorwill-related-card.hg-whippoorwill-maui .hg-whippoorwill-related-icon{color:#1866B4}
.hg-whippoorwill-related-card.hg-whippoorwill-big-island .hg-whippoorwill-related-icon{color:#c3232f}
.hg-whippoorwill-related-card.hg-whippoorwill-kauai .hg-whippoorwill-related-icon{color:#1D9771}

.hg-whippoorwill-related-card.hg-whippoorwill-oahu:hover .hg-whippoorwill-related-icon{background:#F27A24;color:#fff}
.hg-whippoorwill-related-card.hg-whippoorwill-maui:hover .hg-whippoorwill-related-icon{background:#1866B4;color:#fff}
.hg-whippoorwill-related-card.hg-whippoorwill-big-island:hover .hg-whippoorwill-related-icon{background:#c3232f;color:#fff}
.hg-whippoorwill-related-card.hg-whippoorwill-kauai:hover .hg-whippoorwill-related-icon{background:#1D9771;color:#fff}

/* Multi-island / hawaii-wide fallback (gray stripe, fa-play icon) — keep
   the original green hover so it still reads as "playable" without
   borrowing any single island's color. */
.hg-whippoorwill-related-card:not(.hg-whippoorwill-oahu):not(.hg-whippoorwill-maui):not(.hg-whippoorwill-big-island):not(.hg-whippoorwill-kauai):hover .hg-whippoorwill-related-icon{
  background:#1D9771;
  color:#fff;
}

.hg-whippoorwill-related-text{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.hg-whippoorwill-related-kicker{
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#7a8089;
}
.hg-whippoorwill-related-title{
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  color:#222;
  /* Don't let long titles blow out the card grid */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hg-whippoorwill-related-duration{
  font-size:12px;
  color:#7a8089;
  font-variant-numeric:tabular-nums;
}

/* End-of-audio cue — pulse the rail header + a soft glow on the cards so
   the reader sees the suggestions at exactly the moment they're asking
   "what next." Class is added by onEnded() and cleared on the next click. */
@keyframes hg-whippoorwill-rail-pulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(29,151,113,0); }
  50%      { box-shadow:0 0 0 6px rgba(29,151,113,.15); }
}
.hg-whippoorwill-related-rail.is-suggesting .hg-whippoorwill-related-heading{
  color:#1D9771;
}
.hg-whippoorwill-related-rail.is-suggesting .hg-whippoorwill-related-heading::after{
  content:" — pick what to listen to next";
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  color:#1D9771;
}
.hg-whippoorwill-related-rail.is-suggesting .hg-whippoorwill-related-card:not(.is-played){
  animation:hg-whippoorwill-rail-pulse 1.6s ease-in-out 2;
}

@media (max-width:520px){
  .hg-whippoorwill-related-card{padding:10px 12px;gap:10px}
  .hg-whippoorwill-related-icon{width:28px;height:28px;font-size:12px}
  .hg-whippoorwill-related-title{font-size:14px}
  .hg-whippoorwill-related-rail.is-suggesting .hg-whippoorwill-related-heading::after{
    content:" — what's next?";
  }
}

/* When the modal is minimized to a footer bar the rail isn't useful and
   would push the bar's footprint up. Hide it. */
.hg-whippoorwill-modal.is-minimized .hg-whippoorwill-related-rail{display:none}

@media print{
  .hg-whippoorwill-pill-wrap,
  .hg-whippoorwill-modal{display:none !important}
}