/* AUI kit, product screens: needs aui.css (inlined on every page) first.
   Loaded only by the pages that show these screens (ascend.so index.html, ascendviral.com home and /features/),
   from a plain <link rel="stylesheet"> in <main> right before the first one (not inlined: the pages stay within
   inline-css.py's size budget). A stylesheet link in the body holds back only the content after it until it
   arrives, so the screens never lay out unstyled and then jump (a visitor who reloads mid-page or lands on an
   #anchor below it); the first screen, above it, is not held back. Keep it a plain link: media="print"
   onload loads it late and the blocks shrink by hundreds of px when it lands (layout shift).
   - aui:scroll: the app's Scroll Mode as on a computer (src/components/reels/ScrollMode.tsx: the seat, ScrollRail,
     RailBody; ReelCard.tsx controlsSeat="foot": the run and name row lifted over the glass player bar). The rail's
     boxes are the kit's chip shell (aui.css .aui-chip: the app's rounded-card border bg-card p-4 row, with
     CreatorIdentityLines), then the Discover actions (the ds/app bordered control) and the study sections
     (RailSection: What it's about, Hook, Why viewers stay, Transcript). Since the evening of Oct 8 (owner: the
     videos and the boxes roughly the same size) the rail is exactly as tall as the card and scrolls inside itself,
     as the app's does, and its sections fold (<details>, all folded; owner, Oct 9: nothing opened and no Discover actions). Under
     480px (the block's inside) the rail stacks under the card, full width, at its own height (the app moves the
     rail into a sheet there); the card keeps its size.
   - aui:search: the app's Discover search on a phone (pages/DiscoverPage.tsx, research/ResearchField.tsx: the ds/ui
     Input, h-11 pl-9 pr-9 text-base, the Search and X icons; ReelGrid "wall": two per row, gap-2).
   Sizes are the app's Tailwind values in px (design px, --u, inside a card's chrome). Do not restyle; size by the
   container. */

/* min-width: 0: in a grid or flex parent (ascend.so's .research__frame is a grid) the block takes the parent's
   width, never its content's, so a long search query is cut by the field's ellipsis instead of widening it */
.aui.aui-scr, .aui.aui-srch {
  display: block; width: 100%; min-width: 0; margin-inline: auto; padding: 16px;
  border: 1px solid var(--aui-border); border-radius: 14px; background: var(--aui-bg);
}

/* ═════════════════════ SCROLL MODE ═════════════════════ */
.aui.aui-scr { max-width: 800px; container: aui-scr / inline-size; }
/* the seat: the card and the rail side by side, gap-5; the row is as tall as the card */
.aui .aui-scr__seat { display: flex; align-items: stretch; justify-content: center; gap: 20px; }
.aui .aui-scr__card { flex: 1 1 300px; min-width: 0; max-width: 400px; }
/* the rail: w-80, gap-3; it gives up width before the card does. Its boxes sit in an inner box laid over it, so they
   never make the row taller than the card: they scroll inside it instead (the app's max-h-full overflow-y-auto),
   centred while they are shorter (auto margins: safe when they overflow) */
.aui .aui-scr__rail { position: relative; flex: 0 3 320px; min-width: 0; }
.aui .aui-scr__ri {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.aui .aui-scr__ri > * { flex-shrink: 0; }
.aui .aui-scr__ri > :first-child { margin-top: auto; }
.aui .aui-scr__ri > :last-child { margin-bottom: auto; }
.aui .aui-scr__ri > .aui-chip { background: var(--aui-card); }
/* the song's artwork seat (the data has no artwork: the app's Music2 placeholder, h-9 w-9 bg-surface) */
.aui .aui-scr__art {
  display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px;
  border-radius: 50%; background: var(--aui-surface); color: var(--aui-fg);
}
.aui .aui-scr__art > svg { width: 16px; height: 16px; }
/* "Audio" / "Caption": text-2xs font-semibold uppercase tracking-wider text-muted-foreground */
.aui .aui-scr__eye {
  display: block; font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--aui-muted-fg);
}
/* the song title: mt-0.5 truncate text-sm font-medium (the artist line is the kit's .aui-idl__h) */
.aui .aui-scr__t {
  display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--aui-fg);
}
/* the folded sections (RailSection; a <details>, owner 2026-10-08): the chip shell as a block, the header its button */
.aui .aui-scr__ri > .aui-scr__s { display: block; }
.aui .aui-scr__s > summary { list-style: none; cursor: pointer; }
.aui .aui-scr__s > summary::-webkit-details-marker { display: none; }
.aui .aui-scr__s > summary:focus { outline: none; }
.aui .aui-scr__s > summary:focus-visible { outline: 2px solid var(--aui-hue); outline-offset: 4px; border-radius: 8px; }
.aui .aui-scr__s > summary:hover .aui-scr__ha { background: var(--aui-surface); }
.aui .aui-scr__s:not([open]) .aui-scr__hide, .aui .aui-scr__s[open] .aui-scr__show { display: none; }
/* the transcript's copy action shows only once the transcript is open (owner, Oct 9) */
.aui .aui-scr__s:not([open]) .aui-scr__hi { display: none; }
/* the section header: flex items-center justify-between gap-2; its actions, gap-1 */
.aui .aui-scr__sh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aui .aui-scr__hx { display: flex; flex-shrink: 0; align-items: center; gap: 4px; }
/* Show / Hide (RAIL_HEADER_ACTION): flex h-7 items-center rounded-lg px-2 text-xs font-medium text-foreground */
.aui .aui-scr__ha {
  display: flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 12px;
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--aui-fg);
}
/* the transcript's copy action: grid h-7 w-7 place-items-center rounded-lg, the icon h-3.5 w-3.5 */
.aui .aui-scr__hi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 12px; color: var(--aui-fg); }
.aui .aui-scr__hi > svg { width: 14px; height: 14px; }
/* a section body (RAIL_SECTION_BODY): mt-2 max-h-56 overflow-y-auto whitespace-pre-wrap text-sm leading-6 */
.aui .aui-scr__sb {
  max-height: 224px; overflow-y: auto; margin-top: 8px; font-size: 14px; line-height: 24px;
  white-space: pre-wrap; overflow-wrap: break-word; color: var(--aui-fg);
}
/* the hook's "{Type} · {Delivery}" line: mt-1 text-xs text-muted-foreground (mt-2 when there is no hook line) */
.aui .aui-scr__meta { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--aui-muted-fg); }
.aui .aui-scr__sh + .aui-scr__meta { margin-top: 8px; }

/* The foot seat (design px; ReelCard NAME_SEAT_FOOT bottom-14, RUN_SEAT_FOOT bottom-[85px]) */
.aui.aui-reel[data-seat="foot"] .aui-reel__name { bottom: calc(56 * var(--u)); }
.aui.aui-reel[data-seat="foot"] .aui-reel__run { bottom: calc(85 * var(--u)); }
/* the glass player bar: inset-x-2 bottom-2 rounded-pill p-1 gap-1, GLASS */
.aui .aui-reel__bar {
  position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(8 * var(--u));
  display: flex; align-items: center; gap: calc(4 * var(--u)); padding: calc(4 * var(--u)); pointer-events: auto;
  border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.15); background: var(--aui-glass); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* play / pause: h-6 w-6 rounded-full hover:bg-white/15, the icon h-3.5 w-3.5 fill-current */
.aui .aui-reel__pp {
  display: grid; place-items: center; flex-shrink: 0; width: calc(24 * var(--u)); height: calc(24 * var(--u));
  border-radius: 9999px; transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.aui .aui-reel__pp:hover { background-color: rgba(255, 255, 255, 0.15); }
.aui .aui-reel__pp:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.aui .aui-reel__pp > svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: currentColor; }
.aui .aui-reel__pp > .aui-i--play { margin-left: calc(2 * var(--u)); }
.aui.aui-reel[data-state="playing"] .aui-reel__pp > .aui-i--play,
.aui.aui-reel:not([data-state="playing"]) .aui-reel__pp > .aui-i--pause { display: none; }
/* the elapsed time: text-2xs font-medium tabular-nums */
.aui .aui-reel__tm {
  flex-shrink: 0; white-space: nowrap; font-size: calc(11 * var(--u)); line-height: calc(15 * var(--u));
  font-weight: 500; font-variant-numeric: tabular-nums;
}
/* the scrub track (h-4 flex-1, inset 4px): the rail (h-1 bg-white/25) with the played part (bg-white, --p from
   aui.js), and the thumb (h-2.5 w-2.5 bg-white) */
.aui .aui-reel__tr {
  --p: 0%; position: relative; flex: 1 1 0; min-width: calc(24 * var(--u)); height: calc(16 * var(--u));
  margin: 0 calc(4 * var(--u)); cursor: pointer; touch-action: none;
}
.aui .aui-reel__tr::before, .aui .aui-reel__tr::after { content: ""; position: absolute; border-radius: 9999px; }
.aui .aui-reel__tr::before {
  left: 0; right: 0; top: calc(6 * var(--u)); height: calc(4 * var(--u));
  background: linear-gradient(#fff, #fff) 0 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, 0.25);
}
.aui .aui-reel__tr::after {
  top: calc(3 * var(--u)); left: var(--p); width: calc(10 * var(--u)); height: calc(10 * var(--u));
  margin-left: calc(-5 * var(--u)); background: #fff;
}
/* the explainer video (ascendviral's Growth Assistant, owner Oct 8): no name row and no rail; the sound button sits
   in the bar, after the scrub track, at the play button's size; and no dimming over the video (the scrim and shade
   that sit under a Reel's name row made its bottom captions too dark) */
.aui.aui-reel--explainer .aui-reel__scrim, .aui.aui-reel--explainer .aui-reel__shade { display: none; }
.aui .aui-reel__bar .aui-reel__snd {
  --aui-te: 0px; width: calc(24 * var(--u)); height: calc(24 * var(--u)); padding: 0; margin: 0;
}
.aui .aui-reel__bar .aui-reel__snd > .aui-i { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.aui .aui-reel__bar .aui-reel__snd:hover { background-color: rgba(255, 255, 255, 0.15); }
.aui .aui-reel__bar .aui-reel__snd:focus-visible { outline-offset: 0; }
/* a phone: the app moves the rail into a sheet ("Info"); the page stacks it under the card instead (owner, Oct 8: the
   hook and the transcript show on phones too), full width. The card keeps its size. */
@container aui-scr (max-width: 479px) {
  .aui .aui-scr__seat { flex-direction: column; align-items: center; }
  .aui .aui-scr__card { flex: none; width: 100%; max-width: 320px; }
  .aui .aui-scr__rail { flex: none; width: 100%; position: static; }
  .aui .aui-scr__ri { position: static; overflow: visible; }
}

/* ═════════════════════ DISCOVER SEARCH ═════════════════════ */
.aui.aui-srch { max-width: 390px; }
/* the field: h-11 rounded border-input bg-card pl-9 pr-9 text-base; the icons h-4 w-4 at left-3 / right-3 */
.aui .aui-srch__f {
  position: relative; display: flex; align-items: center; height: 44px; padding: 0 36px;
  border: 1px solid var(--aui-border); border-radius: 10px; background: var(--aui-card);
  font-size: 16px; line-height: 24px; color: var(--aui-fg);
}
/* --input is the hairline in Outline and the emphasis border in Onyx */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aui .aui-srch__f { border-color: var(--aui-border-em); }
}
:root[data-theme="dark"] .aui .aui-srch__f,
:root [data-aui-theme="dark"] .aui .aui-srch__f, :root .aui[data-aui-theme="dark"] .aui-srch__f { border-color: var(--aui-border-em); }
:root [data-aui-theme="light"] .aui .aui-srch__f, :root .aui[data-aui-theme="light"] .aui-srch__f { border-color: var(--aui-border); }
.aui .aui-srch__f > svg { position: absolute; top: 13px; left: 11px; width: 16px; height: 16px; color: var(--aui-muted-fg); }
.aui .aui-srch__f > .aui-srch__x { left: auto; right: 11px; color: var(--aui-fg); }
.aui .aui-srch__q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui .aui-srch__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; list-style: none; }