/* =========================================================================
   The live module - the founder livestream carousel on / and /about
   -------------------------------------------------------------------------
   One layout, drawn here, for both pages (livestreams.js drives it; the
   markup and its data- hooks are the same on each page):

     desktop  the player on the left; beside it what is playing and the
              sessions as a compact list that
              fills the column, with the step buttons at its foot
     narrow   the player, what is playing, then the sessions as a row of
              compact chips that scrolls sideways

   A session is shown by its day number, not by a thumbnail: every stream
   shares one poster, and four copies of the same picture say less than
   "Day 55". The poster itself (live-build-poster.svg) is text-free - a lit
   Beamy tile - and the stage behind it paints the backdrop for each theme.

   Light is the unscoped default; dark lives under html[data-site-theme="dark"].
   ========================================================================= */

.founder-streams {
  --ls-ink: #182130;
  --ls-muted: #42597a;
  --ls-blue: #0067c0;
  --ls-blue-ink: #005a9e;
  --ls-on-blue: #ffffff;
  --ls-line: rgba(15, 23, 42, 0.1);
  --ls-row: rgba(255, 255, 255, 0.7);
  --ls-row-on: rgba(0, 103, 192, 0.08);
  --ls-live: #d92d20;
  --ls-stage:
    radial-gradient(60% 80% at 50% 30%, rgba(0, 120, 212, 0.14), transparent 70%),
    radial-gradient(50% 70% at 8% 100%, rgba(112, 96, 255, 0.1), transparent 62%),
    radial-gradient(rgba(70, 90, 120, 0.16) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #f6f9fd 0%, #e9f0f9 100%);
  position: relative;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--atm-card-line, var(--ls-line));
  border-radius: var(--atm-radius, 18px);
  background: var(--atm-card, #fff);
  box-shadow: var(--atm-card-shadow, 0 22px 65px rgba(32, 62, 95, 0.08));
  color: var(--ls-ink);
}

html[data-site-theme="dark"] .founder-streams {
  --ls-ink: #e6edf5;
  --ls-muted: #a1b1c4;
  --ls-blue: #4da6ff;
  --ls-blue-ink: #7cc0ff;
  --ls-on-blue: #06101f;
  --ls-line: rgba(148, 178, 220, 0.14);
  --ls-row: rgba(255, 255, 255, 0.02);
  --ls-row-on: rgba(77, 166, 255, 0.12);
  --ls-live: #ff5c50;
  --ls-stage:
    radial-gradient(60% 80% at 50% 30%, rgba(77, 166, 255, 0.2), transparent 70%),
    radial-gradient(50% 70% at 8% 100%, rgba(120, 96, 255, 0.16), transparent 62%),
    radial-gradient(rgba(160, 190, 230, 0.12) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #0b1222 0%, #070b15 100%);
}

/* ---- Head row ----------------------------------------------------------- */
.stream-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.stream-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ls-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A steady dot, not a pulse. */
.stream-live-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--ls-live);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ls-live) 18%, transparent);
}

.stream-heading > a,
.stream-caption a {
  color: var(--ls-blue-ink);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  text-decoration: none;
}

.stream-heading > a:hover,
.stream-caption a:hover {
  text-decoration: underline;
}

/* ---- The player --------------------------------------------------------- */
.stream-stage {
  display: none;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--ls-line);
  border-radius: 14px;
  background: var(--ls-stage);
}

.streams-ready .stream-stage { display: block; }

.stream-stage iframe,
.stream-start {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.stream-start {
  padding: 0;
  background: var(--ls-stage);
  color: var(--ls-ink);
  cursor: pointer;
}

.stream-start[hidden] { display: none; }
.stream-stage[aria-busy="true"] .stream-start { cursor: progress; }

.stream-start img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The play control: one pill under the tile, the only words on the poster. */
.stream-start > span {
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  background: var(--ls-blue);
  color: var(--ls-on-blue);
  font-size: 14.5px;
  font-weight: 750;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 12px 28px -12px rgba(0, 60, 130, 0.3);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease;
}

.stream-start svg {
  width: 30px;
  height: 30px;
  flex: none;
}

.stream-start svg circle { fill: var(--ls-on-blue); }
.stream-start svg path { fill: var(--ls-blue); }

.stream-start:hover > span {
  transform: translate(-50%, -2px);
  box-shadow: 0 16px 32px -12px rgba(0, 60, 130, 0.3);
}

.stream-player-status {
  margin: 12px 0 0 !important;
  font-size: 14px !important;
  color: var(--ls-muted);
}

.stream-player-status[hidden] { display: none; }

/* ---- What is playing ---------------------------------------------------- */
.stream-caption {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 16px 0 0;
}

.streams-ready .stream-caption { display: flex; }

.stream-now {
  color: var(--ls-blue-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stream-caption h3 {
  margin: 0;
  color: var(--ls-ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-align: left;
}

/* ---- The sessions --------------------------------------------------------
   Each session is a link row: its day and a play mark. The
   full title stays in the link (read by assistive tech, and by livestreams.js
   for the caption) but is not repeated on screen, and the thumbnail image the
   renderer carries is not drawn. */
.stream-track {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  padding: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.stream-card {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  padding: 9px 10px 9px 12px;
  scroll-snap-align: start;
  border: 1px solid var(--ls-line);
  border-radius: 12px;
  background: var(--ls-row);
  color: var(--ls-ink);
  text-decoration: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.stream-card:hover { border-color: color-mix(in srgb, var(--ls-blue) 45%, transparent); }

.stream-card[aria-current="true"] {
  border-color: var(--ls-blue);
  background: var(--ls-row-on);
}

.stream-thumb { display: contents; }

.stream-thumb img,
.stream-brand { display: none; }

.stream-day {
  grid-column: 1;
  grid-row: 1;
  min-width: 64px;
  color: var(--ls-ink);
  font-size: 17px;
  font-weight: 820;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stream-card[aria-current="true"] .stream-day { color: var(--ls-blue-ink); }

.stream-play {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ls-line);
  border-radius: 50%;
  color: var(--ls-blue-ink);
  font-size: 9px;
}

.stream-card[aria-current="true"] .stream-play {
  border-color: transparent;
  background: var(--ls-blue);
  color: var(--ls-on-blue);
}

.stream-card strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Step buttons ------------------------------------------------------- */
.stream-controls {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.streams-ready .stream-controls { display: flex; }

/* The feed status is for the record, not for the eye: the list above already
   says what there is to watch. */
.stream-controls p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.stream-controls button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ls-line);
  border-radius: 50%;
  background: transparent;
  color: var(--ls-ink);
  font-size: 17px;
  cursor: pointer;
}

.stream-controls button:hover {
  border-color: var(--ls-blue);
  color: var(--ls-blue-ink);
}

.stream-controls [data-stream-count] {
  min-width: 40px;
  color: var(--ls-muted);
  font-size: 12.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.founder-streams :is(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--ls-blue);
  outline-offset: 3px;
}

/* ---- Desktop: the player left, the rest in a column beside it ----------- */
@media (min-width: 1100px) {
  .founder-streams.streams-ready {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "head head"
      "stage cap"
      "stage track"
      "stage ctrl"
      "status status";
    column-gap: 26px;
  }

  .streams-ready .stream-heading { grid-area: head; }
  .streams-ready .stream-stage { grid-area: stage; }
  .streams-ready .stream-caption { grid-area: cap; margin: 0; }
  .streams-ready .stream-player-status { grid-area: status; }
  .streams-ready .stream-controls { grid-area: ctrl; margin-top: 10px; }
  .streams-ready .stream-caption h3 { font-size: 22px; }

  /* The list fills what the column has left beside the player and scrolls
     inside it. `contain: size` keeps its length out of the row sizing, so the
     player sets the height and the list never pushes it taller. Whatever row
     the column ends on fades out rather than stopping on a cut line. */
  .streams-ready .stream-track {
    grid-area: track;
    contain: size;
    flex-direction: column;
    gap: 6px;
    min-height: 96px;
    margin-top: 14px;
    padding: 2px 4px 30px 2px;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent);
  }

  .streams-ready .stream-card { min-width: 0; }
}

@media (max-width: 650px) {
  .founder-streams { padding: 14px; }
  .stream-heading { flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
  .stream-caption h3 { font-size: 17px; }
  .stream-start > span { bottom: 7%; padding: 5px 14px 5px 5px; font-size: 13px; }
  .stream-start svg { width: 26px; height: 26px; }
  .stream-card { min-width: 0; gap: 10px; }
  .stream-day { min-width: 0; }
  /* The chips run off the right edge; fade them there instead of cutting a
     chip in half, and leave room so the last one scrolls clear of the fade. */
  .stream-track {
    padding-right: 40px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stream-start > span,
  .stream-card { transition: none; }
}
.stream-card{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 12px;min-width:270px;max-width:100%}
.stream-thumb{display:block;grid-column:1;grid-row:1/3;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:7px}
.stream-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.stream-day{position:absolute;left:4px;bottom:4px;min-width:0;padding:2px 4px;border-radius:4px;background:#070b15;color:#fff;font-size:10px}
.stream-card[aria-current=true] .stream-day{color:#fff}
.stream-play{position:absolute;right:4px;bottom:4px;width:18px;height:18px;background:#fff;color:#0078d4;font-size:8px}
.stream-card strong{position:static;grid-column:2;grid-row:2;width:auto;height:auto;clip:auto;clip-path:none;white-space:normal;font-size:12px;line-height:1.4}
.stream-card-label{grid-column:2;grid-row:1;font-size:10px;line-height:1.4;color:var(--ls-muted)}