/* Listen control — injected on gated edition HTML */
.wd-listen-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: 0.85rem 0 0.35rem;
  font-family: Helvetica, Arial, sans-serif;
}
.wd-listen-bar button {
  appearance: none;
  border: 1px solid #0a1f44;
  background: #0a1f44;
  color: #fbf5e6;
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
}
.wd-listen-bar button:hover {
  background: #132a52;
}
.wd-listen-bar[data-state='preparing'] button,
.wd-listen-bar[data-state='loading'] button {
  opacity: 0.85;
  cursor: wait;
}
.wd-listen-bar[data-state='error'] button {
  border-color: #7a1f1f;
  background: #7a1f1f;
}
.wd-listen-status {
  font-size: 0.78rem;
  color: #0a1f44;
  opacity: 0.85;
  min-height: 1.1em;
}
.wd-listen-bar[data-state='error'] .wd-listen-status {
  color: #7a1f1f;
  opacity: 1;
}

/* Compact: sit in redesign .utilities row (Aa / theme) on Windows desktop */
.utilities .wd-listen-bar,
.wd-listen-bar--compact {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0 0.35rem;
  vertical-align: middle;
}
.utilities .wd-listen-bar button,
.wd-listen-bar--compact button {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.7rem;
  line-height: 1.2;
  border-radius: 2px;
  white-space: nowrap;
}
.utilities .wd-listen-status,
.wd-listen-bar--compact .wd-listen-status {
  font-size: 0.68rem;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media print {
  .wd-listen-bar {
    display: none !important;
  }
}

/* Per-story Listen — reader panel + cards */
.wd-listen-bar--story,
.wd-listen-bar--card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  margin: 0.55rem 0 0.25rem;
}
.reader-tools .wd-listen-bar--story {
  display: inline-flex;
  margin: 0 0 0 0.5rem;
  vertical-align: middle;
}
.wd-listen-bar--card button {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.28rem 0.7rem;
  line-height: 1.2;
  border-radius: 2px;
  white-space: nowrap;
}

/* Native audio controls — must stay visible on Windows/Edge while playing */
.wd-listen-player {
  display: block;
  width: min(100%, 22rem);
  height: 2.25rem;
  margin: 0.15rem 0;
  accent-color: #0a1f44;
}
.wd-listen-player[hidden] {
  display: none !important;
}
.wd-listen-bar[data-state='playing'] .wd-listen-player,
.wd-listen-bar[data-state='preparing'] .wd-listen-player {
  display: block;
}
.reader-tools .wd-listen-player {
  width: min(100%, 16rem);
}
.article.story > .wd-listen-bar--story,
article.story > .wd-listen-bar--story {
  margin: 0.5rem 0 0.75rem;
}

@media print {
  .wd-listen-bar--story,
  .wd-listen-bar--card,
  .wd-listen-player {
    display: none !important;
  }
}

/* 9/26: tighten gap between lead Listen bar and lead image */
.lead-copy .wd-listen-bar--card { margin-bottom: 0; }
.lead { align-items: start; }
@media (max-width: 699px) {
  .lead { gap: 8px; }
  figure.lead-image { padding-top: 0; }
}

/* Star your sections (wd-stars.js) */
.story-section-title .wd-star{margin-left:.75em;font:600 16px/1 Georgia,serif;padding:8px 12px;min-height:40px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;cursor:pointer;vertical-align:middle;letter-spacing:0;text-transform:none}
.story-section-title .wd-star[aria-pressed="true"]{background:#0A1F44;color:#FBF5E6;border-color:#0A1F44}
.wd-star-hint{font:17px/1.4 Georgia,serif;opacity:.8;margin:.25em 0 1em}
/* WD-MASTHEAD-WRAP-1009 */
/* Bill 10/9 4:54 PM: masthead tools row wraps on phones (no sideways scroll) */
@media (max-width:560px){.masthead .utilities{flex-wrap:wrap;row-gap:10px;max-width:100%;min-width:0}.masthead .utilities>*{min-width:0;max-width:100%}}

/* CoS 2026-10-14 (Designer QC): at tablet widths the masthead .utilities row (A A A · LISTEN · theme · My saved
   stories · Archive) ran to 830px at a 768 viewport and clipped Archive. Let the row wrap and shrink below 1100px. */
@media (max-width: 1100px) {
  .masthead .utilities {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
  }
  .masthead .utilities .wd-listen-bar { margin-left: 0; }
  .masthead .utilities .wd-listen-status:empty { display: none; }
}