/* ── Journey card — the stations live here ──────────────────── */
.cw-journey {
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
/* Hairline brand accent across the very top of the card */
.cw-journey::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--blue) 100%);
  opacity: 0.9;
}

/* Org security banner slot (rendered by auth.js) */
.cw-org-slot:not(:empty) { padding: 16px 22px 0; }

/* ── Developer view ─────────────────────────────────────────────
   ONE global audience switch, off by default, instead of a per-step
   "do you want code?" question at all five stations. The whole point is
   that the choice is made once: a non-technical user never has to notice
   it, and a developer flips it once and the API request for the step
   they're on is simply present — see syncDeveloperView() in workflow.js.
   Mode is expressed as data-devview="1" on #onboardingCard (which
   renderOnboarding() never rebuilds — it only replaces the inner
   #onboardingContent), so every rule below survives a full re-render
   with no re-application step. */
.cw-devbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 22px 0;
}

/* Real switch: track + knob, role="switch" driven by aria-checked so the
   pressed state is exposed to AT rather than implied by color alone. */
.cw-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}
.cw-switch__track {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 0.18s var(--ease-out);
}
.cw-switch__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(30, 51, 64, 0.32);
  transition: transform 0.18s var(--ease-out);
}
.cw-switch[aria-checked="true"] .cw-switch__track { background: var(--blue); }
.cw-switch[aria-checked="true"] .cw-switch__track::after { transform: translateX(16px); }
.cw-switch:hover .cw-switch__track { background: var(--muted); }
.cw-switch[aria-checked="true"]:hover .cw-switch__track { background: var(--blue-dark); }
.cw-switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.cw-switch__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.16s;
}
.cw-switch[aria-checked="true"] .cw-switch__label { color: var(--ink); }

/* With developer view off there is NO code affordance on the page at all —
   not even a collapsed "View API request" row. That is the whole point of
   making the audience choice once, up front: a non-technical user should never
   be offered code, let alone be asked to decline it five times on the way
   down. The panels stay in the DOM (display:none, not removed) so
   refreshStationCodeSamples() can keep their content current and flipping the
   switch needs no re-render. */
#onboardingCard:not([data-devview="1"]) .cw-station__code { display: none; }

/* An open panel's header stops inviting and starts labelling: "API request ·
   Login" is exactly the framing that tells a developer the integration lives
   here, but the "View" verb is wrong once the thing is already on screen.
   The chevron deliberately stays, so a developer can still collapse a panel
   and open a different station's to read ahead. */
.cw-station__code[open] > .e2e-advanced-summary .cw-code-cta { display: none; }
.cw-station__code[open] > .e2e-advanced-summary {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* In developer view the API request becomes its own surface — a distinct
   reference layer sitting inside the journey rather than more journey. Giving
   it a real background is also what lets the language bar below stick to its
   top: sticky content needs something opaque to scroll under. */
#onboardingCard[data-devview="1"] .cw-station__code > div {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 12px;
  /* Bounded so a tall snippet — or station 4's three sub-steps, which run to
     ~1600px uncapped — can never push the next step below the fold and break
     the five-step overview. Viewport-relative rather than a fixed pixel cap:
     the short-viewport case is exactly where the journey gets buried (and the
     reason the old side-by-side layouts were reverted), while a tall screen
     has room to show more code. ONE scroll container per panel — the inner
     per-<pre> cap is lifted below so there aren't two nested ones fighting. */
  max-height: min(440px, 40vh);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
#onboardingCard[data-devview="1"] .cw-station__code > div::-webkit-scrollbar { width: 8px; }
#onboardingCard[data-devview="1"] .cw-station__code > div::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}
#onboardingCard[data-devview="1"] .cw-code-block pre { max-height: none; }

/* The language switcher stays WITH the code it retitles rather than being
   hoisted to the top of the card, where it would scroll out of sight exactly
   when a developer is reading a long snippet. Sticky inside the bounded
   panel keeps it in reach the whole way down. Only one panel is open at a
   time in this mode, so there is never a second switcher on screen to
   compete with it (the preference itself is already global — see
   setSnippetLang). */
#onboardingCard[data-devview="1"] .cw-station__code .cw-langswitch--compact {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -12px 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

/* Bottom fade: a sticky in-flow pseudo-element (negative margin pulls it back
   over the preceding content) so the height cut reads as "there's more below"
   instead of a snippet that looks truncated or, worse, an example-response
   box clipped to a headless empty rectangle. */
#onboardingCard[data-devview="1"] .cw-station__code > div::after {
  content: '';
  display: block;
  position: sticky;
  bottom: 0;
  height: 26px;
  margin: -26px -12px 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* ── Developer view: the synced API reference rail (≥1440px) ────
   Wide screens waste ~300px per side of the 860px journey column at 1440px,
   ~370px at 1600px, and ~530px at 1920px. In developer view only, that space
   carries ONE panel that follows the current station, instead of five
   disclosures wedged between consecutive steps.

   It is a SIBLING of the journey card, not a panel inside it. Two reasons, both
   from DESIGN.md: a card within the card is a nested card (always wrong), and
   The One Lift Rule allows exactly one shadow-level surface per screen. So the
   journey keeps the single lift and stays "paper"; the rail is "mist" —
   recessed, flat, hairline-bordered, no shadow of its own. That hierarchy is
   the point: per PRODUCT.md the code is a bonus, not the main event, and the
   quieter surface says so without a word of copy.

   Nor does this resurrect the twice-reverted side-by-side layout. That was the
   DEFAULT journey, at every width, with columns that scrolled independently and
   hid content behind invisible scrollbars. This is opt-in, developer-only, and
   only where width is genuinely spare; the page stays the single scroller (the
   rail is sticky and travels with it), and an internal scroll engages only for
   the one panel too tall to fit — station 4's three sub-steps. Below 1440px the
   rail is not rendered at all and the inline panels carry the mode. */
.cw-journey-layout { display: block; }
/* Left cell of the layout: journey + stream details + help, stacked (2026-07-29,
   eighth pass). With the journey ALONE in the left cell, a rail taller than it
   (a grown response, station 4) left a void of bare page between the journey's
   bottom and the cards below the whole grid row — reported twice as "looks
   weird". Real content now fills that space instead. In dev-view-off block flow
   this wrapper is a plain div and everything stacks exactly as it always did
   (.cw-details brings its own margin-top). min-width: 0 because a grid item's
   default min-width:auto lets wide code lines blow the 1fr column open. */
.cw-journey-col { min-width: 0; }
.cw-rail { display: none; }

/* 1440px is the real floor, not 1600: a 14" MacBook Pro is 1512px logical (1800
   with Displays → "More Space"), which is the most common machine this is used
   on, and gating the rail above it meant the primary audience never saw it. The
   rail narrows to 540px in this tier so the journey still keeps ~900px — wider
   than its own 860px measure — rather than both columns being squeezed. */
@media (min-width: 1440px) {
  .cw-journey-layout[data-devview="1"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    align-items: start;
    gap: 24px;
  }
  /* Widen the shell only while the rail is showing, so the guided journey keeps
     its 860px measure in every other state. */
  .cw-column:has(.cw-journey-layout[data-devview="1"]) {
    width: min(calc(100% - 48px), 1560px);
  }
  /* The nav bar's inner content widens to match (2026-07-30) — the second half
     of the same fix as the hero band below. Both the header and the row below
     are centered on the same viewport axis, so the mismatch never LOOKED
     broken exactly, but at the header's old 860px measure the logo sat ~300px
     right of the journey's left edge and the account controls ended ~300px
     short of the rail's right edge — measured, not eyeballed. Once the hero
     band widened to match the row, the header became the one piece still on
     the narrow measure, which if anything made it more conspicuous. `:has()`
     on `body` because the header is a sibling of `main`, not a descendant of
     `.cw-column` — the widened row lives inside `.cw-column`, but the
     `data-devview` attribute this selector watches for is on `.cw-journey-layout`
     regardless of which ancestor is doing the asking. */
  /* NOT the same `calc(100% - 48px)` as .cw-column above — .app-header already
     has its own 24px×2 padding, so its "100%" context is already viewport−48.
     Subtracting another 48 here would land 48px narrower than the row it's
     supposed to match. Plain `min(100%, 1560px)` against that already-inset
     basis is what actually lines up — checked the arithmetic against real
     numbers (viewport 1512 → both header and column resolve to 1464px, not
     1464 vs 1416) before trusting it. */
  body:has(.cw-journey-layout[data-devview="1"]) .app-header-inner {
    max-width: min(100%, 1560px);
  }
  /* The intro band spans the FULL row (2026-07-30 — reverses the "keep the
     left column's measure" call this replaced). That earlier reasoning was
     sound for a short rail sitting quietly beside the journey; once the rail
     reaches its own 540–620px width, capping the intro to the journey's
     measure left a wide, unlabeled strip of blank hero above the rail with
     nothing acknowledging it — reported as "looks lost", together with the
     nav bar. No prose-width cap is needed here (unlike stream-details/help):
     `.cw-intro__sub` is one short line and `.cw-intro__steps` is already a
     3-column grid — both scale up cleanly rather than turning into
     uncomfortably long text lines. */
  .cw-journey-layout[data-devview="1"] .cw-rail {
    /* Flex column so the head (step picker, roles) is a fixed band and the
       body takes whatever height remains — only the CODE scrolls, never the
       navigation for it. */
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 84px;              /* clears the sticky app header */
    /* Viewport-capped (2026-07-29, ninth pass): never taller than the screen.
       Third iteration on this height, each driven by seeing it live —
       (1) an arbitrary pixel cap made expanding a response feel like a
       peephole; (2) unbounded growth fixed that but let a long sample (Go)
       balloon the rail far past the viewport, dragging the whole page tall
       and looking broken. This is the resolution: the rail fills the screen
       beside the journey and pins there (sticky now ALWAYS has slack against
       a taller left column), and anything longer scrolls inside the body
       below the fixed head. 84px header clearance + 24px bottom breathing. */
    max-height: calc(100vh - 84px - 24px);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  /* In rail mode the inline per-station disclosures are redundant — the rail
     carries the same content, once, beside the step, and reaches every step via
     its own step picker. */
  .cw-journey-layout[data-devview="1"] .cw-station__code { display: none; }
}

/* Above 1600px there is room for a wider rail without crowding the journey. */
@media (min-width: 1600px) {
  .cw-journey-layout[data-devview="1"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
    gap: 26px;
  }
  /* .cw-intro is uncapped at every tier now — see the 1440px block above. */
}

.cw-rail__head {
  flex: none;   /* fixed band above the scrolling body — never scrolls away */
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.cw-rail__kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;   /* the uppercase eyebrow step from DESIGN.md */
  text-transform: uppercase;
  color: var(--faint);
}
.cw-rail__headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Step name + its role chips share a row: "who may make this call" is a fact
   about the call, like its name, so it pins in the head with it instead of
   scrolling away inside the body. Wraps when the 540px tier runs out of room —
   chips drop to their own line rather than truncating. */
.cw-rail__steprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 3px;
}
.cw-rail__step {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.cw-rail__steprow .cw-role-matrix { margin: 0; }
/* The nanoAdmin-only CTS caveat (mintPlaybackToken) renders in the head too.
   roleMatrixHTML emits it as a SIBLING of the chip row, so inside the flex
   steprow it must claim the full line — otherwise it packs beside the chips
   as a third flex item. Quiet footnote styling, not competing with the name. */
.cw-rail__steprow .cw-code-block__response-note {
  flex-basis: 100%;
  margin: 2px 0 0;
}

/* Step picker. The rail replaces five individually-openable disclosures, so it
   has to be able to reach every step's request — pinned to the active station it
   would show one call forever (a journey sits on step 3 until captions are
   enabled). Numbers, not titles: the row has to stay compact next to the
   kicker, and the station titles are already on screen in the journey beside it. */
.cw-rail__tabs { display: flex; gap: 4px; }
.cw-rail__tab {
  width: 24px;
  height: 24px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.cw-rail__tab:hover:not(:disabled) { color: var(--blue); border-color: var(--blue); }
.cw-rail__tab.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.cw-rail__tab:disabled {
  color: var(--faint);
  background: var(--bg-sunken);
  border-color: var(--line);
  cursor: not-allowed;
  opacity: 0.7;
}
.cw-rail__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Shown only while a step other than the current one is pinned, so there is
   always one click back to where the journey actually is. */
.cw-rail__back {
  margin-top: 8px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: none;
  cursor: pointer;
}
.cw-rail__back:hover { color: var(--blue-dark); text-decoration: underline; }

/* Sub-step segments — a step that is really a SEQUENCE of calls (station 4:
   read ingest → mint token → build URL) shows one call at a time. Stacked,
   those three ran to ~1700px of rail content; segmented, each fits in one
   view, and the labels teach the order before any code is read. Vertical
   list, not a horizontal pill row: the labels are full phrases, and three
   phrases crammed into 540px would truncate into mystery meat. */
.cw-rail__segs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.cw-rail__seg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.cw-rail__seg:hover { color: var(--blue); }
.cw-rail__seg.is-active {
  color: var(--ink);
  background: var(--bg);
  border-color: var(--line-strong);
}
.cw-rail__seg:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cw-rail__seg-n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.cw-rail__seg.is-active .cw-rail__seg-n {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.cw-rail__body {
  padding: 0 18px 18px;
  /* The flexible half of the rail's flex column: fills the height the head
     leaves, and becomes the ONE scroll container when content exceeds the
     rail's viewport cap. `overflow-y: auto` means no scrollbar at all while
     content fits — the common case; a long sample (Go) or an expanded
     response scrolls here, under the fixed head, instead of ballooning the
     card past the screen. `min-height: 0` is required: a flex item's default
     min-height:auto refuses to shrink below its content, which would defeat
     the cap entirely and silently restore the balloon. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.cw-rail__body::-webkit-scrollbar { width: 8px; }
.cw-rail__body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
/* Bottom fade — "more below" affordance for the scrolling body. Self-gating:
   the gradient runs transparent → bg-soft over a bg-soft background, so while
   content fits (nothing scrolled under it) it is invisible; it only reads as
   a fade when a white code block actually passes beneath it. */
.cw-rail__body::after {
  content: '';
  display: block;
  position: sticky;
  bottom: 0;
  height: 26px;
  margin: -26px -18px 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-soft));
}
/* No per-<pre> cap inside the rail — the body above is the single scroll
   container; capping a <pre> too would nest a second one inside it. */
.cw-rail .cw-code-block pre { max-height: none; }
/* Sticky at the top of the scrolling body — the body is a real scroll
   container again (ninth pass), so this pins correctly and keeps the language
   choice in reach however far down a long sample the reader is. (It was
   briefly non-sticky during the unbounded-growth iteration, when there was no
   scrolling ancestor for it to stick within.) */
.cw-rail .cw-langswitch--compact {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -18px 12px;
  padding: 12px 18px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
/* Code blocks sit on "paper" against the rail's recessed mist, inverting the
   inline case (where they were the recessed element on a white card) so the
   snippet itself stays the brightest thing in the panel. */
.cw-rail .cw-code-block { background: var(--bg); }
/* No bottom fade here (unlike the inline panel): that gradient exists
   specifically to signal "clipped, scroll for more" — with nothing clipped in
   an unbounded card, a fade at the bottom would just be a stray shadow with
   no content underneath it to explain. */

/* ── Stations ───────────────────────────────────────────────── */
.cw-station {
  position: relative;
  border-top: 1px solid var(--line);
  transition: background 0.25s var(--ease-out);
}
.cw-station:first-of-type { border-top: none; }

/* Connecting progress spine — runs down the marker gutter, joining each
   station's marker to the next. Filled (green) up to where the user is,
   faint for the path ahead. Markers paint over it via head z-index. */
.cw-station::before {
  content: '';
  position: absolute;
  left: 37px;                 /* marker centre: 22px card pad + 15px half-marker */
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: var(--line);
  z-index: 0;
}
.cw-station:first-of-type::before { top: 31px; }                 /* begin at its marker */
.cw-station:last-of-type::before  { bottom: auto; height: 31px; } /* end at its marker  */
.cw-station[data-state="done"]::before { background: var(--ok); }
.cw-station[data-state="current"]::before {
  background: linear-gradient(180deg, var(--ok) 0px, var(--ok) 31px, var(--line) 72px);
}
.cw-station[data-state="locked"]::before { background: var(--line); }

/* "You are here" spotlight on the active station */
.cw-station[data-state="current"] { background: var(--tint-current); }

.cw-station__head {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  column-gap: 14px;
  padding: 16px 22px;
  position: relative;   /* lift head (incl. marker) above the spine */
  z-index: 1;
}

/* Marker: number → check */
.cw-station__marker {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--line-strong);
  color: var(--muted);
  background: var(--bg);
  /* White ring punches the marker out of the connecting spine behind it */
  box-shadow: 0 0 0 4px var(--bg);
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.cw-station__marker svg { width: 15px; height: 15px; }
/* In-progress indicator for the active step (replaces its number). */
.cw-station__spin {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  animation: cw-station-pulse 1.3s var(--ease-out) infinite;
}
@keyframes cw-station-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .cw-station__spin { animation: none; opacity: 0.9; }
}

.cw-station__title {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.cw-station__summary {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}
.cw-station__summary code {
  font-size: 12.5px;
  color: var(--navy);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 7px;
}
.cw-station__headaction {
  background: none;
  border: none;
  padding: 5px 8px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.cw-station__headaction:hover { background: rgba(15, 141, 200, 0.1); color: var(--blue-dark); }

/* Body: only the current station shows it. Bodies stay in the DOM —
   config.get() reads the form fields by id even while hidden. */
.cw-station__body {
  display: none;
  padding: 0 22px 22px 70px;
}
.cw-station[data-state="current"] > .cw-station__body { display: block; animation: cw-body-in 0.22s var(--ease-out); }
.cw-station[data-open="1"] > .cw-station__body { display: block; }
@keyframes cw-body-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Per-station "Show code" panel — sibling of .cw-station__body, deliberately
   NOT gated by the body's data-state/data-open rules above. Visibility is
   JS-driven via the native `hidden` attribute (locked ⇒ hidden; current/done ⇒
   shown) so a station's code sample stays reachable once the station is
   marked done, instead of disappearing along with the rest of its body. */
.cw-station__code {
  padding: 14px 22px 20px 70px;
  border-top: 1px solid var(--line);
}
/* When the body is visible right above it (current, or forced open), it
   already ends in its own bottom padding — a second full divider would
   double up, so trim it back to a small gap instead. */
.cw-station[data-state="current"] > .cw-station__code,
.cw-station[data-open="1"] > .cw-station__code {
  border-top: none;
  padding-top: 4px;
}

/* State styling */
.cw-station[data-state="current"] > .cw-station__head .cw-station__marker {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  /* tint ring punches it from the spine, orange halo says "you are here" */
  box-shadow: 0 0 0 4px var(--tint-current), 0 0 0 8px rgba(244, 130, 32, 0.18);
}
.cw-station[data-state="done"] > .cw-station__head .cw-station__marker {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px rgba(30, 123, 52, 0.12);
  animation: cw-pop 0.24s var(--ease-out);
}
@keyframes cw-pop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.cw-station[data-state="locked"] > .cw-station__head { opacity: 0.55; }
.cw-station[data-state="locked"] > .cw-station__head .cw-station__title { color: var(--muted); }

/* Station lead line (the "what do I do now" sentence) */
.cw-station__lead {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.cw-station__help {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
  max-width: 62ch;
}

/* ── Buttons (app standard: 8px radius, Source Sans 3) ──────── */
.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1;
  color: #fff;
  background: var(--orange);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.06s, box-shadow 0.15s;
}
.cw-btn:hover { background: var(--orange-dark); }
.cw-btn:active { transform: translateY(1px); }
.cw-btn:disabled {
  background: var(--bg-sunken);
  color: var(--faint);
  cursor: not-allowed;
}
.cw-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.cw-btn--secondary { background: var(--blue); }
.cw-btn--secondary:hover { background: var(--blue-dark); }

.cw-btn--outline {
  background: var(--bg);
  color: var(--blue);
  border-color: var(--blue);
}
.cw-btn--outline:hover { background: var(--blue); color: #fff; }

.cw-btn--ghost {
  background: none;
  color: var(--muted);
  border-color: var(--line-strong);
}
.cw-btn--ghost:hover { background: var(--bg-soft); color: var(--ink); }

.cw-btn--sm { padding: 8px 14px; font-size: 13.5px; }

.cw-linkbtn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  text-decoration: none;
}
.cw-linkbtn:hover { color: var(--blue-dark); text-decoration: underline; }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cw-spin 0.8s linear infinite;
  vertical-align: -2px;
}
@keyframes cw-spin { to { transform: rotate(360deg); } }

/* ── Forms (brand app style: orange left accent, blue focus) ── */
.cw-field { margin-bottom: 14px; }
.cw-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.cw-input,
.cw-select,
.cw-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.4;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cw-input::placeholder, .cw-textarea::placeholder { color: var(--faint); }
.cw-input:focus, .cw-select:focus, .cw-textarea:focus {
  outline: none;
  border-color: var(--blue);
  border-left-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(15, 141, 200, 0.18);
}
.cw-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6B76' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.cw-textarea { resize: vertical; min-height: 58px; }

.cw-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.input-error { border-color: var(--err) !important; border-left-color: var(--err) !important; }
.field-error { margin-top: 5px; font-size: 12.5px; color: var(--err); }

/* Config rows: label left, field right */
.e2e-config-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: start;
  gap: 8px 14px;
  margin-bottom: 14px;
}
.e2e-config-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  padding-top: 10px;
}
.e2e-config-field { min-width: 0; }

/* ── Copyable value field (server / stream key / links) ─────── */
.cw-copyfield {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 10px 9px 14px;
}
.cw-copyfield + .cw-copyfield { margin-top: 8px; }
.cw-copyfield__k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cw-copyfield__v {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cw-copyfield__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cw-copyfield__btn:hover { color: var(--blue-dark); border-color: var(--blue); }
.cw-copyfield__btn svg { width: 13px; height: 13px; }

/* ── Waiting / live state panels (stations 4 & 5) ───────────── */
.cw-pulse-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 14px;
  background: var(--warn-soft);
  border: 1px solid rgba(178, 106, 0, 0.25);
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--warn);
}
.cw-pulse-note__dot {
  width: 9px; height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--warn);
  flex-shrink: 0;
  animation: cw-breathe 1.6s ease-in-out infinite;
}
@keyframes cw-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.cw-live-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--live-soft);
  border: 1px solid rgba(211, 58, 44, 0.3);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.cw-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--live);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: 999px;
}
.cw-live-badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: cw-live-ping 1.3s ease-out infinite;
}
@keyframes cw-live-ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}
.cw-live-banner__text { font-size: 14px; color: var(--ink); font-weight: 600; }

.cw-ok-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: var(--ok-soft);
  border: 1px solid rgba(30, 123, 52, 0.3);
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ok);
}
.cw-ok-banner svg { width: 18px; height: 18px; flex-shrink: 0; }

.cw-btnrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.cw-btnrow + .cw-btnrow { margin-top: 10px; }

/* ── Stream creation (station 2) ────────────────────────────── */
.cw-vodopt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.cw-vodopt input[type="checkbox"] {
  width: 17px; height: 17px;
  margin: 2px 0 0;
  accent-color: var(--orange);
  flex-shrink: 0;
  cursor: pointer;
}
.cw-vodopt__title { font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
.cw-vodopt__hint { font-size: 13px; color: var(--muted); margin: 1px 0 0; }

.e2e-existing-form {
  position: relative;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
}
/* Close (hide form) button, top-right — a clear bordered circle so it reads as a
   button, consistent with the app's other close affordances. */
.e2e-existing-form__close {
  position: absolute;
  top: 10px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.e2e-existing-form__close:hover { color: var(--navy); background: var(--bg-soft); border-color: var(--blue); }

/* ── Language multi-select dropdown (cw-msel) ───────────────── */
.cw-msel { position: relative; }
.cw-msel__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cw-msel.is-open .cw-msel__trigger,
.cw-msel__trigger:focus-visible {
  border-color: var(--blue);
  border-left-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(15, 141, 200, 0.18);
  outline: none;
}
.cw-msel__summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-msel__summary--empty { color: var(--faint); }
.cw-msel__chev { flex-shrink: 0; color: var(--muted); transition: transform 0.18s var(--ease-out); }
.cw-msel.is-open .cw-msel__chev { transform: rotate(180deg); }
.cw-msel__panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
}
.cw-msel.is-open .cw-msel__panel { display: block; animation: cw-body-in 0.16s var(--ease-out); }
.cw-msel__search {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.cw-msel__search:focus { outline: none; border-color: var(--blue); }
.cw-msel__options {
  max-height: 230px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.cw-msel__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s;
}
.cw-msel__opt:hover { background: var(--bg-soft); }
.cw-msel__opt input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--orange);
  flex-shrink: 0;
  cursor: pointer;
}
.cw-msel__opt.is-selected { background: rgba(244, 130, 32, 0.1); }
.cw-msel__opt.is-selected .e2e-lang-chip-label { color: var(--orange-dark); font-weight: 600; }
.cw-msel__opt.is-disabled { opacity: 0.45; cursor: not-allowed; }
.cw-msel__opt--hidden { display: none; }
.e2e-lang-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Advanced options */
.e2e-advanced { margin-top: 4px; }
.e2e-advanced-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 0;
}
.e2e-advanced-summary::-webkit-details-marker { display: none; }
.e2e-advanced-summary::before {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.16s;
  margin-right: 2px;
}
.e2e-advanced[open] .e2e-advanced-summary::before { transform: rotate(45deg) translateY(-2px); }
.e2e-advanced-summary:hover { color: var(--ink); }
.e2e-advanced > div { margin-top: 12px; }

/* ── "Show code" snippet blocks (per-station, reuses .e2e-advanced above
   for the disclosure itself) ─────────────────────────────────────────
   Ported from the standalone developer-integration.html docs page — scoped
   to .cw-code-block instead of that page's .cw-docs wrapper, since station
   bodies don't have one. */
.cw-code-block {
  position: relative;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
}
/* Slim toolbar housing only the copy button — the language switcher above
   already names the active language, so this no longer repeats it (used to
   show a redundant "CURL"/"TYPESCRIPT" caption here, restating the switcher's
   active tab with zero new information — worse the more blocks are open at
   once, e.g. station 4's 3 sub-steps). */
.cw-code-block__head {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
}
.cw-code-block pre {
  margin: 0;
  padding: 16px 18px;
  background: transparent;
  overflow: auto;
  /* Caps how tall any single snippet gets — several stations' code panels
     (or station 4's 3 stacked sub-steps) opened at once must stay a quiet
     side path, never a wall of gray chrome that out-competes the primary
     journey above it. Most snippets are short enough this never engages. */
  max-height: 280px;
  /* A persistent, thin scrollbar (not the platform's auto-hide-until-hover
     default) is the affordance itself — without it, clipped text on either
     axis reads as truncated dead copy instead of "there's more, scroll." */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.cw-code-block pre::-webkit-scrollbar { width: 8px; height: 8px; }
.cw-code-block pre::-webkit-scrollbar-track { background: transparent; }
.cw-code-block pre::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.cw-code-block pre::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.cw-code-block pre code {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre;
}
.cw-code-block__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  padding: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cw-code-block__copy:hover { color: var(--blue-dark); border-color: var(--blue); }
.cw-code-block__copy svg { width: 13px; height: 13px; display: block; }
.cw-code-block__copy--copied { color: var(--ok); border-color: var(--ok); }

/* Global-preference language switcher — one selector drives every open
   station's code blocks at once. Persisted to localStorage. A compact
   variant is embedded inside each station's "Show code" disclosure. */
.cw-langswitch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cw-langswitch--compact { margin: 4px 0 14px; }
.cw-langswitch__btn {
  padding: 6px 14px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cw-langswitch__btn:hover { color: var(--ink); background: var(--bg); }
.cw-langswitch__btn.is-active {
  background: var(--bg);
  border-color: var(--line-strong);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

/* A code block with multiple language panels — only the one matching the
   global switcher is shown. */
.cw-code-block[data-lang-count] pre[data-lang-panel] { display: none; }
.cw-code-block[data-lang-count] pre[data-lang-panel].is-shown { display: block; }

/* Syntax coloring — hand-rolled, not a library. Reuses existing brand
   tokens instead of introducing new hues: keywords=blue, strings=ok-green,
   comments=faint, function/type names=navy, numbers=warn-amber. */
.cw-code-block pre code .tok-kw   { color: var(--blue); }
.cw-code-block pre code .tok-str  { color: var(--ok); }
.cw-code-block pre code .tok-com  { color: var(--faint); font-style: italic; }
.cw-code-block pre code .tok-fn   { color: var(--navy); }
.cw-code-block pre code .tok-num  { color: var(--warn); }
.cw-code-block pre code .tok-tag  { color: var(--orange-dark); }

/* Sub-step heading inside a multi-part "Show code" toggle (Station 4 shows
   3 sub-steps in one disclosure). */
.cw-code-block__step-label {
  margin: 14px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
/* Not :first-child — the language switcher div is always the actual first
   child of this container, so :first-child never matched. */
.cw-code-block__step-label:first-of-type { margin-top: 0; }

/* "Example response" section — smaller/muted label distinguishes it from the
   request's .cw-code-block__step-label above (secondary reference info, not
   another step), and the block itself gets a quieter border tint (no
   language-switcher chrome applies here, so data-lang-count is never set on
   it — that's what the request block's tinted background comes from). */
/* Collapsed by default — measured, expanded responses were 200–520px per step,
   a third to half of all rail scrolling, for reference material a reader checks
   once. The summary keeps the old label's quiet uppercase voice and adds the
   shared .e2e-advanced chevron convention so it reads as openable. */
.cw-response { margin: 10px 0 4px; }
.cw-response__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 2px 0;
}
.cw-response__summary::-webkit-details-marker { display: none; }
.cw-response__summary::before {
  content: '';
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.16s;
  margin-right: 2px;
}
.cw-response[open] .cw-response__summary::before { transform: rotate(45deg) translateY(-2px); }
.cw-response__summary:hover { color: var(--ink); }
.cw-code-block--response { border-color: var(--line); }
.cw-code-block__response-note {
  margin: 6px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--faint);
}

/* "Who can do this" role chips — shown above each step's request code, one
   chip per Bintu account role, ✓/✗ instead of just listing the allowed ones,
   so a denied role reads as "checked, not allowed" rather than an ambiguous
   omission. */
.cw-role-matrix {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.cw-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
}
.cw-role-chip.is-allowed { background: var(--ok-soft); color: var(--ok); }
.cw-role-chip.is-denied { background: var(--err-soft); color: var(--err); }

/* Caption settings summary box (rendered by loadCaptionSettings) */
.cw-active-settings {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 13.5px;
}
.cw-active-settings--on { background: var(--ok-soft); border-color: rgba(30, 123, 52, 0.3); }
.cw-active-settings__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
}
.cw-active-settings--on .cw-active-settings__head { color: var(--ok); }
.cw-active-settings__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  color: var(--ink);
}
.cw-active-settings__refresh {
  background: none;
  border: none;
  padding: 2px 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.cw-active-settings__refresh:hover { color: var(--blue-dark); background: rgba(15, 141, 200, 0.08); }

/* ── Stream details (collapsible card under the journey) ────── */
.cw-details {
  margin-top: 18px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cw-details__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
}
.cw-details__summary::-webkit-details-marker { display: none; }
.cw-details__summary::after {
  content: '';
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.18s;
  flex-shrink: 0;
}
.cw-details[open] .cw-details__summary::after { transform: rotate(225deg); }
.cw-details__hint { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.cw-details__body { padding: 0 22px 20px; }

.cw-help p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cw-help p strong { color: var(--ink); }
.cw-help__support { margin-top: 4px; }
.cw-help__support a { color: var(--blue); font-weight: 600; text-decoration: none; }
.cw-help__support a:hover { text-decoration: underline; }

.e2e-stream-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.stream-info-card { min-width: 0; }
.stream-info-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.stream-info-code-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}
.stream-info-code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.stream-info-copy-btn {
  background: none;
  border: none;
  padding: 3px;
  margin: 0;
  color: var(--faint);
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  transition: color 0.15s, background 0.15s;
}
.stream-info-copy-btn:hover { color: var(--blue-dark); background: rgba(15, 141, 200, 0.1); }
.stream-info-copy-btn svg { width: 14px; height: 14px; }

.e2e-stream-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* VOD + org status pills */
.cw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.cw-pill svg { width: 13px; height: 13px; }
.cw-pill--ok { background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(30, 123, 52, 0.3); }
.cw-pill--warn { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(178, 106, 0, 0.3); }

/* Org security banner / tag (auth.js renderOrgSecurityStatus) */
.e2e-org-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 12px;
}
.e2e-org-tag svg { flex-shrink: 0; }
.e2e-org-tag--secure { background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(30, 123, 52, 0.3); }
.e2e-org-warning {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--warn-soft);
  border: 1px solid rgba(178, 106, 0, 0.3);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.e2e-org-warning__icon { color: var(--warn); flex-shrink: 0; margin-top: 1px; }
.e2e-org-warning__title { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--warn); }
.e2e-org-warning__text { margin: 0; font-size: 13.5px; color: var(--ink); max-width: 70ch; }


/* ── Station 2: Stream options panel (tags + multi-bitrate) ──────────────── */
.cw-streamopts { margin: 4px 0 14px; }
.cw-streamopts .cw-field { margin-top: 12px; }
.cw-streamopts__profile { display: block; margin-top: 6px; max-width: 360px; }

/* Multi-bitrate variant list on the stream-details card (read-only) */
#streamVariants { margin-top: 10px; }
.cw-variants {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--muted);
}
.cw-variants strong { color: var(--ink); font-weight: 600; }