/* 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;
}

.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;
}

.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}
}

@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:6px;min-width:0;
}
.hg-whippoorwill-modal-logo{
  height:26px;width:auto;display:block;
}
.hg-whippoorwill-modal-head h3{
  margin:0;
  font-size:19px;
  font-weight:700;
  color:#222;
  display:flex;align-items:center;
}

.hg-whippoorwill-modal-close{
  background:none;border:none;
  font-size:30px;line-height:1;
  color:#777;cursor:pointer;
  padding:0 6px;
}
.hg-whippoorwill-modal-close:hover{color:#222}

.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;
}

/* ── 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;
}

/* ── 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}
}

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