/* meeting-explorer.css — styles for /meeting/<slug> (site/meeting.php).
   Mobile-first: base rules target ~400px, widened at min-width: 769px to
   match style.css's own breakpoint. Newspaper conventions from style.css:
   page bg #f4f1eb, ink #1a1a1a, accent #c41230, dark #1c1c1c; Lora body,
   Playfair Display headlines, PT Sans UI/labels. Colour is spent almost
   entirely on the spine — everything else stays restrained and typographic.

   Markup contract: see site/meeting.php + assets/meeting-explorer.js. This
   file owns .wyn-me* and .u-sr only; style.css/newsletter-modal.css are not
   touched or duplicated here (e.g. .back-link, sup.cite are inherited). */

/* ── Page intro ── */
.wyn-me-top {
  padding-top: 20px;
  padding-bottom: 18px;
}
.wyn-me-kicker {
  font-family: 'PT Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c41230;
  margin: 4px 0 6px;
}
.wyn-me-title {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.wyn-me-sub {
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  color: #777;
  margin: 0 0 12px;
}
.wyn-me-intro {
  font-family: 'Lora', Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
  max-width: 640px;
  margin: 0;
}

/* ── Stage: sticky filmstrip + transport ──
   Stays under the site lightbox (z-index: 1000, style.css:503). Needs an
   explicit background because it sits over cards as they scroll beneath
   it, and no ancestor between it and the viewport may set `overflow` or
   sticky silently stops working. */
.wyn-me-stage {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #f4f1eb;
  border-bottom: 1px solid #e8e4dc;
  padding: 12px 0 14px;
}
.wyn-me-stage audio {
  /* No `controls` attribute in the markup — this is a no-op in compliant
     browsers, but pinned explicitly so a custom-transport page never shows
     a native player by accident. */
  display: none;
}

/* ── Filmstrip frame ──
   16:9 box reserved up front so there is no layout shift while the first
   tile loads; a dark placeholder fills it until JS paints a background
   image. Source tiles are 319×180 and get upscaled here on purpose — the
   frame is capped well below its native tile ratio's comfort zone on
   desktop so the upscale reads as a deliberate small "porthole", not a
   blurry mistake. */
.wyn-me-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  margin: 0 auto;
  background-color: #1c1c1c;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  image-rendering: auto;
  border-radius: 4px;
  overflow: hidden;
}
.wyn-me-framenote {
  font-family: 'PT Sans', sans-serif;
  font-size: 11px;
  color: #888;
  text-align: center;
  margin: 8px 0 0;
}

/* ── Transport controls ── */
.wyn-me-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 12px;
}
.wyn-me-play {
  order: 1;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #1c1c1c;
  color: #f4f1eb;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  /* Play glyph sits slightly off-centre; nudge it visually. */
  padding-left: 2px;
}
.wyn-me-play:hover { background: #c41230; }
.wyn-me-play:focus-visible {
  outline: 2px solid #c41230;
  outline-offset: 2px;
}
.wyn-me-time,
.wyn-me-dur {
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  color: #555;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.wyn-me-time { order: 2; }
.wyn-me-dur { order: 3; margin-left: auto; }
/* Narrow screens: spine drops to its own full-width row beneath the
   play/time/duration row rather than being squeezed to nothing. */
.wyn-me-spine {
  order: 4;
  flex: 1 1 100%;
  width: 100%;
  margin-top: 2px;
}

/* ── Spine: scrubber + density chart in one control ── */
.wyn-me-spine {
  position: relative;
  height: 34px;
  cursor: pointer;
  /* Without this, a pointer-drag on the spine scrolls the page on mobile
     instead of scrubbing — this is the fix, not an optimization. */
  touch-action: none;
  border-radius: 3px;
}
.wyn-me-spine:focus { outline: none; }
.wyn-me-spine:focus-visible {
  outline: 2px solid #c41230;
  outline-offset: 3px;
}
.wyn-me-spine.is-dragging {
  box-shadow: 0 0 0 2px rgba(196, 18, 48, 0.28);
}
.wyn-me-density {
  position: absolute;
  inset: 0;
  /* Flat fallback for when PHP has no density data to build a gradient
     from; the inline background-image (set server-side) overrides this. */
  background-color: #ddd6c8;
  background-size: 100% 100%;
  border-radius: 3px;
}
.wyn-me-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wyn-me-marks > * {
  pointer-events: auto;
}
.wyn-me-tick {
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: 1px;
  background: rgba(26, 26, 26, 0.22);
  transform: translateX(-50%);
}
.wyn-me-mark {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c41230;
  border: 2px solid #f4f1eb;
  transform: translate(-50%, -50%);
  display: block;
}
.wyn-me-mark::before {
  /* A 10px dot is unhittable on a phone; this expands the tap target to a
     comfortable ~28px without changing the visible dot size. */
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
}
.wyn-me-mark:hover,
.wyn-me-mark:focus-visible {
  background: #a30f27;
}
.wyn-me-mark:focus-visible {
  outline: 2px solid #1c1c1c;
  outline-offset: 2px;
}
.wyn-me-head {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #c41230;
  pointer-events: none;
}
/* JS toggles the `hidden` attribute directly; without this rule a later
   `display` declaration on the same element would win over the attribute
   and the playhead would never actually hide. */
.wyn-me-head[hidden] {
  display: none;
}
.wyn-me-spine.is-dragging .wyn-me-head {
  width: 3px;
}

/* ── Compact stage (once stuck) ───────────────────────────────────────────────── */
/* meeting-explorer.js inserts .wyn-me-sentinel above the stage and toggles
   .is-compact when it scrolls out of view. The frame shrinks and its caption
   goes, handing ~200px back to the cards while the transport and spine — the
   parts you actually reach for mid-listen — stay put. */
.wyn-me-sentinel { height: 1px; margin-bottom: -1px; }

@media (prefers-reduced-motion: no-preference) {
  .wyn-me-stage .wyn-me-frame { transition: width .18s ease; }
}

/* Compact is a mini-player ROW, not a shrunken frame. Simply capping the
   frame's width left a small picture stranded at the left edge with dead
   space beside it, which reads as broken rather than deliberate. Laying the
   stage out as a grid puts the thumbnail beside the transport and spine, so
   the reclaimed space is actually used. The framenote and the audio element
   are display:none here, so they create no grid cells. */
.wyn-me-stage.is-compact > .container {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb play  time  dur"
    "spine spine spine spine";
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
}
/* display:contents dissolves the flex wrapper so play/time/duration/spine
   become grid items of the stage itself. That is what lets the line run the
   full width under the transport instead of being boxed into the column
   beside the thumbnail — at ~190px the last three moment markers on a
   48-minute meeting overlap into one blob. */
.wyn-me-stage.is-compact .wyn-me-controls { display: contents; }
.wyn-me-stage.is-compact .wyn-me-frame  { grid-area: thumb; }
.wyn-me-stage.is-compact .wyn-me-play   { grid-area: play; }
.wyn-me-stage.is-compact .wyn-me-time   { grid-area: time; }
.wyn-me-stage.is-compact .wyn-me-dur    { grid-area: dur; margin-left: auto; }
.wyn-me-stage.is-compact .wyn-me-spine  { grid-area: spine; width: auto; }
.wyn-me-stage.is-compact .wyn-me-frame {
  width: 152px;
  margin: 0;
  border-radius: 3px;
}
.wyn-me-stage.is-compact .wyn-me-framenote {
  display: none;
}

/* The spine is what actually sets the compact row's height: play/time/duration
   plus a full-height 34px scrubber stacks to ~74px, taller than the thumbnail.
   Collapsing it to a line is therefore what buys the picture its size back.
   The BOX stays 16px so it remains draggable — only the painted bar shrinks;
   dropping the hit area to 5px would make scrubbing on a phone a coin flip. */
.wyn-me-stage.is-compact .wyn-me-spine {
  height: 16px;
  margin-top: 0;
}
.wyn-me-stage.is-compact .wyn-me-density {
  top: 50%;
  bottom: auto;
  height: 5px;
  transform: translateY(-50%);
}
.wyn-me-stage.is-compact .wyn-me-tick {
  top: 50%;
  bottom: auto;
  height: 11px;
  transform: translate(-50%, -50%);
}
.wyn-me-stage.is-compact .wyn-me-mark {
  width: 9px;
  height: 9px;
  border-width: 2px;
}

@media (min-width: 769px) {
  .wyn-me-stage.is-compact .wyn-me-frame { width: 208px; }
}

/* ── Moment cards ──
   Border-left is reserved (transparent) on every card, live or not, so
   the .is-live state never shifts layout when it toggles. */
.wyn-me-cards {
  padding-top: 6px;
  padding-bottom: 36px;
}
.wyn-me-card {
  padding: 22px 0 22px 14px;
  border-left: 4px solid transparent;
  border-bottom: 1px solid #e8e4dc;
  /* The stage above is position:sticky, so both scrollIntoView() and a
     #moment-... anchor jump land the card's top UNDER it — hiding the very
     headline and play button the jump was meant to reveal. meeting-explorer.js
     measures the stage and publishes its height as --wyn-stage-h; the fallback
     covers the pre-JS anchor case. */
  scroll-margin-top: calc(var(--wyn-stage-h, 320px) + 12px);
}
.wyn-me-card:first-child { padding-top: 20px; }
.wyn-me-card:last-child { border-bottom: none; }
.wyn-me-card.is-live {
  border-left-color: #c41230;
  background: rgba(196, 18, 48, 0.045);
}
@media (prefers-reduced-motion: no-preference) {
  .wyn-me-card {
    transition: background-color 0.25s ease, border-left-color 0.25s ease;
  }
}
.wyn-me-card-time {
  margin: 0 0 10px;
}
.wyn-me-jump {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  font-family: 'PT Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #c41230;
  background: rgba(196, 18, 48, 0.09);
  border: none;
  border-radius: 20px;
  padding: 7px 14px;
  cursor: pointer;
}
.wyn-me-jump:hover { background: rgba(196, 18, 48, 0.17); }
.wyn-me-jump:focus-visible {
  outline: 2px solid #c41230;
  outline-offset: 2px;
}
.wyn-me-card-head {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.wyn-me-card-head a { color: #1a1a1a; text-decoration: none; }
.wyn-me-card-head a:hover { color: #c41230; }
.wyn-me-card-body {
  font-family: 'Lora', Georgia, serif;
  font-size: 16px;
  line-height: 1.65;
  color: #222;
  overflow-wrap: anywhere;
}
.wyn-me-card-body p { margin: 0 0 12px; }
.wyn-me-card-body p:last-child { margin-bottom: 0; }
.wyn-me-card-body a {
  color: #c41230;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wyn-me-card-body a:hover { text-decoration: none; }

/* ── "What was said" transcript disclosure ── */
.wyn-me-window {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dotted #ccc;
}
.wyn-me-window summary {
  display: flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #555;
  padding: 4px 0;
}
.wyn-me-window summary::-webkit-details-marker { display: none; }
.wyn-me-window summary::before {
  content: '\25B8';
  display: inline-block;
  font-size: 11px;
  color: #c41230;
}
.wyn-me-window[open] summary::before {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: no-preference) {
  .wyn-me-window summary::before {
    transition: transform 0.15s ease;
  }
}
.wyn-me-window summary:focus-visible {
  outline: 2px solid #c41230;
  outline-offset: 2px;
}
.wyn-me-window-note {
  font-family: 'PT Sans', sans-serif;
  font-size: 12px;
  font-style: italic;
  color: #888;
  margin: 8px 0 10px;
}
.wyn-me-window-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #e8e4dc;
  border-radius: 3px;
}
.wyn-me-window-lines li {
  /* Deliberately not Lora/PT Sans: a monospace stack reads unmistakably
     as machine transcript rather than our own prose. */
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: #444;
  padding: 7px 10px;
  border-bottom: 1px solid #f0ece2;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.wyn-me-window-lines li:last-child { border-bottom: none; }
.wyn-me-window-lines li:hover {
  background: #fff8f0;
  color: #1a1a1a;
}

/* ── Card actions (share / watch link) ── */
.wyn-me-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 16px 0 0;
}
.wyn-me-share {
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  color: #555;
  background: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 6px 12px;
  cursor: pointer;
}
.wyn-me-share:hover { border-color: #c41230; color: #c41230; }
.wyn-me-share:focus-visible {
  outline: 2px solid #c41230;
  outline-offset: 2px;
}
.wyn-me-share.is-done {
  border-color: #4caf50;
  color: #2e7d32;
  background: #e8f5e9;
}
.wyn-me-card-actions a {
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  color: #c41230;
  text-decoration: none;
}
.wyn-me-card-actions a:hover { text-decoration: underline; }

/* ── Sources ──
   .article-sources / .citations-list / .source-line are global (style.css);
   only the in-page seek link needs its own treatment here, so it reads as
   an on-page action rather than the external-link look .citations-list a
   gives everything else. */
.wyn-me-cite {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
}
.wyn-me-cite:hover,
.wyn-me-cite:focus-visible {
  color: #a30f27;
}
.wyn-me-cite:focus-visible {
  outline: 2px solid #c41230;
  outline-offset: 2px;
}

/* ── Utility ── */
/* style.css defines no visually-hidden helper (checked); u-sr lives here. */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Wider screens ── */
@media (min-width: 769px) {
  .wyn-me-title { font-size: 40px; }
  .wyn-me-frame {
    max-width: 520px;
  }
  .wyn-me-controls { flex-wrap: nowrap; }
  .wyn-me-time { order: 2; }
  .wyn-me-spine {
    order: 3;
    flex: 1 1 auto;
    width: auto;
    margin-top: 0;
  }
  .wyn-me-dur { order: 4; margin-left: 0; }
  .wyn-me-card-head { font-size: 24px; }
}