/* 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). Under 480px (the block's inside), the phone seat: the card alone (the app moves the
     rail into a sheet there).
   - 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 centred together, gap-5 */
.aui .aui-scr__seat { display: flex; align-items: center; 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 */
.aui .aui-scr__rail { flex: 0 3 320px; min-width: 0; display: grid; gap: 12px; }
.aui .aui-scr__rail > .aui-chip { background: var(--aui-card); }
.aui .aui-scr__rail > .aui-scr__c { display: block; }
/* 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 caption: mt-2 whitespace-pre-wrap text-sm leading-6. The app scrolls a long one inside a 160px box; a still
   page shows its first six lines. */
.aui .aui-scr__cap {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
  margin-top: 8px; font-size: 14px; line-height: 24px; white-space: pre-wrap; overflow-wrap: break-word;
  color: var(--aui-fg);
}

/* 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;
}
/* a phone: the app moves the rail into a sheet ("Info"), so the card stands alone */
@container aui-scr (max-width: 479px) {
  .aui .aui-scr__rail { display: none; }
  .aui .aui-scr__card { max-width: 320px; }
}

/* ═════════════════════ 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; }