/* Ascend homepage composer for marketing pages (AUI kit): the one-line composer with its corpus tray and the
   starting-idea pills, the same box as the top of app.ascend.so (owner, Oct 8: the live composer above the videos,
   a 1:1 replica that updates). Source of truth: the app's dev branch (src/components/ds/app/one-line-composer.tsx
   with a footer, src/components/home/CorpusTray.tsx, src/pages/GetStarted.tsx, src/styles/theme-tokens.css).
   Scoped under .aui.aui-composer on top of aui.css (tokens, reset, .aui-av). Behaviour: aui-composer.js.
   The app is set in Inter (its one --font-sans), so the box declares the app's stack rather than the kit's Figtree. */
.aui.aui-composer {
  --aui-cmp-bg: #ffffff;         /* --composer-bg */
  --aui-cmp-border: #c6cbd5;     /* --composer-border */
  --aui-cmp-tray: #f5f7fa;       /* --composer-tray: the attached stat zone */
  --aui-cmp-send: #101216;       /* --primary: the ink send seat */
  --aui-cmp-send-fg: #ffffff;
  --aui-cmp-send-hover: #23262e; /* --primary-hover */
  display: block; width: 100%; max-width: 57rem; margin: 0 auto; padding: 0; border: 0;
  font-family: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* Dark (Onyx): the send seat is surface-2 with ink-white text, not the inverted white pill (dark:bg-surface-2). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aui.aui-composer {
    --aui-cmp-bg: #0b0d11; --aui-cmp-border: #2c313b; --aui-cmp-tray: #12151b;
    --aui-cmp-send: #21252e; --aui-cmp-send-fg: #ffffff; --aui-cmp-send-hover: #2c313b;
  }
}
:root[data-theme="dark"] .aui.aui-composer,
:root [data-aui-theme="dark"] .aui.aui-composer,
:root .aui.aui-composer[data-aui-theme="dark"] {
  --aui-cmp-bg: #0b0d11; --aui-cmp-border: #2c313b; --aui-cmp-tray: #12151b;
  --aui-cmp-send: #21252e; --aui-cmp-send-fg: #ffffff; --aui-cmp-send-hover: #2c313b;
}
:root [data-aui-theme="light"] .aui.aui-composer,
:root .aui.aui-composer[data-aui-theme="light"] {
  --aui-cmp-bg: #ffffff; --aui-cmp-border: #c6cbd5; --aui-cmp-tray: #f5f7fa;
  --aui-cmp-send: #101216; --aui-cmp-send-fg: #ffffff; --aui-cmp-send-hover: #23262e;
}

/* The box (rounded-composer 26px, the composer border and fill) with the sill under it. */
.aui .aui-cmp__box { position: relative; overflow: hidden; border-radius: 26px; border: 1px solid var(--aui-cmp-border); background: var(--aui-cmp-bg); }
.aui .aui-cmp__in { padding: 12px 14px 8px; }
/* Three zones: the field takes the whole first row, the tools sit on their own row under it. */
.aui .aui-cmp__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.aui .aui-cmp__field { position: relative; display: flex; order: -1; flex: 1 1 100%; min-width: 0; }
.aui .aui-cmp__ta {
  display: block; width: 100%; min-width: 0; flex: 1 1 0%; height: 40px; max-height: 196px; margin: 0; padding: 7px 6px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; resize: none; overflow-y: hidden;
  font: inherit; font-size: 17px; line-height: 26px; color: var(--aui-fg); -webkit-appearance: none; appearance: none;
}
/* The native placeholder is kept for the no-script form; the overlay under it is the one that shows and fades. */
.aui .aui-cmp__ta::placeholder { color: transparent; }
.aui .aui-cmp__ph {
  position: absolute; top: 0; bottom: 0; left: 6px; right: 6px; display: flex; align-items: center; overflow: hidden;
  pointer-events: none; font-size: 17px; line-height: 26px;
  /* halfway between faint and muted: the faint grey alone was 3.4:1 on white, under the 4.5:1 that text needs (audit, Oct 12) */
  color: color-mix(in srgb, var(--aui-faint) 50%, var(--aui-muted-fg));
}
.aui .aui-cmp__ph > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity 0.3s; }
.aui .aui-cmp__ta:not(:placeholder-shown) + .aui-cmp__ph { display: none; }

/* Bare glyph tools: 40px seats, muted ink, full ink on hover. The mic keeps the right side (ml-auto). */
.aui .aui-cmp__tool, .aui .aui-cmp__send { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; }
.aui .aui-cmp__tool { color: var(--aui-muted-fg); transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
.aui .aui-cmp__tool:hover { color: var(--aui-fg); }
.aui .aui-cmp__mic { margin-left: auto; }
.aui .aui-cmp__mic[hidden] { display: none; }
.aui .aui-cmp__mic[hidden] + .aui-cmp__send { margin-left: auto; }
/* The send seat arrives with the text: width 0 to 40, scale .75 to 1, opacity 0 to 1, 200 ms. */
.aui .aui-cmp__send {
  width: 0; overflow: hidden; border-radius: 9999px; background: var(--aui-cmp-send); color: var(--aui-cmp-send-fg);
  opacity: 0; transform: scale(0.75); pointer-events: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.aui .aui-cmp__send:hover { background: var(--aui-cmp-send-hover); }
.aui.aui-composer.is-ready .aui-cmp__send,
.aui.aui-composer:not(.is-js) .aui-cmp__field:has(.aui-cmp__ta:not(:placeholder-shown)) ~ .aui-cmp__send {
  width: 40px; opacity: 1; transform: none; pointer-events: auto;
}
.aui .aui-cmp__tool:focus-visible, .aui .aui-cmp__send:focus-visible, .aui .aui-cmp__idea:focus-visible { outline: 2px solid var(--aui-hue); outline-offset: 2px; }

/* The corpus tray: the sill inside the border, under one hairline, text-2xs muted. */
.aui .aui-cmp__tray {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px;
  border-top: 1px solid var(--aui-border); background: var(--aui-cmp-tray); font-size: 11px; line-height: 15px; color: var(--aui-muted-fg);
}
.aui .aui-cmp__half { display: flex; min-width: 0; align-items: center; gap: 8px; }
.aui .aui-cmp__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui .aui-cmp__n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--aui-fg); }
/* the green pulled toward the ink (darker on light, lighter on dark): plain green on the tray was 4.2:1 at 11px (audit, Oct 12) */
.aui .aui-cmp__up { font-weight: 500; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--aui-green) 82%, var(--aui-fg)); }
/* Picture stacks: 20px rounds overlapping by 8px, each edged in the tray's own fill. */
.aui .aui-cmp__stack { display: flex; flex-shrink: 0; align-items: center; }
.aui .aui-cmp__pic { display: block; flex-shrink: 0; width: 20px; height: 20px; overflow: hidden; border-radius: 9999px; border: 2px solid var(--aui-cmp-tray); }
.aui .aui-cmp__pic + .aui-cmp__pic { margin-left: -8px; }
.aui .aui-cmp__pic > .aui-av { width: 100%; height: 100%; }
/* Small phones: the two halves always on two rows. When they shared a row, the live numbers arriving after the first
   paint made them wrap at about 412px and pushed everything below down (layout shift 0.077, audit Oct 12). */
@media (max-width: 420px) { .aui .aui-cmp__tray { flex-wrap: wrap; row-gap: 6px; } .aui .aui-cmp__half { flex: 1 1 100%; } }

/* The suggestion pills (owner, Oct 9, after vidIQ's composer): one line of short emoji pills, centred while they fit
   and a swipeable row when they do not (the auto margins centre without cutting off the start of an overflowing row) */
.aui .aui-cmp__ideas {
  display: flex; gap: 8px; margin-top: 14px; padding: 2px 1px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.aui .aui-cmp__ideas::-webkit-scrollbar { display: none; }
.aui .aui-cmp__idea:first-child { margin-left: auto; }
.aui .aui-cmp__idea:last-child { margin-right: auto; }
.aui .aui-cmp__idea {
  display: inline-flex; flex: none; height: 34px; align-items: center; gap: 6px; padding: 0 13px 0 11px;
  border: 1px solid var(--aui-border); border-radius: 9999px; background: var(--aui-card); color: var(--aui-fg);
  font-size: 13.5px; line-height: 20px; font-weight: 500; white-space: nowrap; scroll-snap-align: start;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.aui .aui-cmp__idea:hover { background: var(--aui-surface); border-color: var(--aui-border-em); }
.aui .aui-cmp__idea:focus-visible { outline: 2px solid var(--aui-hue); outline-offset: 2px; }
.aui .aui-cmp__emo { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 15px; line-height: 1; }