/* The composer, the idea chips and the trust row — as they look OUTSIDE the home page.

   These three are SHARED MARKUP (components/composer.js) whose styling lives in home-v3.css under
   `.hero-copy`, a class only the home page uses. Every /create/* page therefore has to supply its
   own copy, and the symptom of forgetting is spectacular rather than subtle: the trust row's inline
   SVGs render at their natural size and the hero grows from ~630px to well past 2000px. That has
   now happened on four pages, so the fourth and fifth stopped copying and share this file.

   Scoped with :where() so it adds no specificity: each page's own sheet loads after this one and
   can override anything here with a plain class selector. To adopt it on another page, add that
   page's root class to the selector list — nothing else in this file is page-specific.

   The three older pages (picture-book, animation, ai-generators) still carry their own copies. They
   are deliberately left alone: they are live and verified, and this file exists to stop the copying
   spreading, not to restyle pages nobody asked about. */

:where(.lp-cm, .lp-mv) .composer {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 62px;
  margin-top: 24px;
  padding: 6px 6px 6px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--rk-surface);
  border: 1px solid var(--rk-composer-border, var(--rk-line));
  border-radius: var(--rk-radius-lg);
  box-shadow: var(--rk-shadow-card);
  transition: box-shadow .3s, border-color .3s;
}
:where(.lp-cm, .lp-mv) .composer:focus-within { border-color: var(--rk-emerald); box-shadow: 0 0 0 4px var(--rk-focus-ring); }
:where(.lp-cm, .lp-mv) .composer-idea-icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; color: var(--rk-emerald); opacity: .72; pointer-events: none; }
:where(.lp-cm, .lp-mv) .composer-idea-icon svg { width: 20px; height: 20px; }
:where(.lp-cm, .lp-mv) .composer-fallback {
  position: absolute; z-index: 1; left: 50px; right: 200px; top: 50%;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--rk-ink-muted); font: 400 16px var(--rk-font-body);
  opacity: 0; transform: translateY(-50%); pointer-events: none; transition: opacity .16s ease;
}
:where(.lp-cm, .lp-mv) .composer:has(#hero-input[placeholder=""]):not(:focus-within) .composer-fallback { opacity: .72; }
:where(.lp-cm, .lp-mv) .composer input {
  position: relative; z-index: 2; flex: 1; min-width: 0; height: 100%; padding: 0;
  border: 0; outline: 0; background: transparent;
  font: 600 16px var(--rk-font-body); color: var(--rk-ink);
}
:where(.lp-cm, .lp-mv) .composer input::placeholder { color: var(--rk-ink-muted); font-weight: 400; }
:where(.lp-cm, .lp-mv) .composer button {
  /* Allowed to shrink: at 375px an unshrinkable button is what pushes the hero column past the
     viewport, because a grid item's default min-width:auto refuses to go below min-content. */
  flex: 0 1 auto; min-width: 140px; height: 50px; padding: 0 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 13px; cursor: pointer; white-space: nowrap;
  background: var(--rk-emerald); color: #fff; font: 700 15px var(--rk-font-body);
  transition: background .18s, transform .18s;
}
:where(.lp-cm, .lp-mv) .composer button:hover { background: var(--rk-emerald-hover); transform: translateY(-1px); }
/* The arrow must not be the thing that gives way. `flex: 0 1 auto` on the button lets it shrink
   below its content, and because the label is `white-space: nowrap` the only child that CAN yield
   is the icon — so on a page whose CTA is a few characters longer than the sibling's ("Make My
   Music Video" against "Make My Film") the arrow silently collapses to zero width at ~1024px.
   Two rules fix it: the icon never shrinks, and above the stacking breakpoint the button keeps its
   content width and lets the INPUT absorb the loss instead (it has flex:1 and min-width:0 for
   exactly that). Below that breakpoint the composer is a column and the button is full-width, so
   the shrink the sibling page needs at 375px is not needed here at all. */
:where(.lp-cm, .lp-mv) .composer button svg { flex: none; }
@media (min-width: 561px) {
  :where(.lp-cm, .lp-mv) .composer button { flex: 0 0 auto; }
}
:where(.lp-cm, .lp-mv) .composer button svg { transition: transform .22s cubic-bezier(.2, .9, .3, 1.2); }
:where(.lp-cm, .lp-mv) .composer button:hover svg { transform: translateX(4px); }

:where(.lp-cm, .lp-mv) .chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
:where(.lp-cm, .lp-mv) .chips .idea-chip {
  appearance: none; margin: 0; min-height: 36px; text-align: left;
  font: 600 13.5px var(--rk-font-body); color: var(--rk-ink-soft);
  border: 1px solid var(--rk-line); background: var(--rk-surface);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
:where(.lp-cm, .lp-mv) .chips .idea-chip:hover,
:where(.lp-cm, .lp-mv) .chips .idea-chip.is-selected { border-color: var(--rk-emerald); color: var(--rk-emerald); background: var(--rk-emerald-soft); transform: translateY(-2px); }
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  :where(.lp-cm, .lp-mv) .chips .idea-chip { min-height: 44px; }
}

:where(.lp-cm, .lp-mv) .trust { display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center; margin-top: 16px; color: var(--rk-ink-soft); font: 600 13.5px var(--rk-font-body); }
:where(.lp-cm, .lp-mv) .trust span { display: flex; align-items: center; gap: 7px; }
/* The hairline between the facts, as on the sibling pages — but only where the row is guaranteed
   to fit on ONE line. The rule those pages use (border-left on every item but the first) assumes no
   wrapping, and the moment it wraps the item starting the new line carries a stray vertical bar in
   front of it. That is not a rare case: German and Russian expand these strings by a third.
   So the border is gated on width, and the facts themselves were shortened to the register the
   sibling pages use ("Free to start", not a clause) so one line is actually achievable. */
:where(.lp-cm, .lp-mv) .trust { gap: 9px 24px; }
@media (min-width: 1100px) {
  /* A GRID, not a wrapping flex row — and that is the whole trick. The sibling pages draw the
     hairline as a left border on a flex item, which is correct until the row wraps: the item that
     starts the new line carries a bar in front of it with nothing to its left. Measured on
     /create/animation at 1024px, where its own trust row wraps and does exactly that.
     With three columns the ROW cannot wrap — long text wraps INSIDE its column instead — so the
     bars always sit between columns. That matters because seven of our languages still run 35-39
     characters on one of these facts; Czech and Polish would wrap in English's place otherwise. */
  :where(.lp-cm, .lp-mv) .trust {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    column-gap: 24px;
  }
  :where(.lp-cm, .lp-mv) .trust span + span { border-left: 1px solid var(--rk-line); padding-left: 24px; }
}
:where(.lp-cm, .lp-mv) .trust svg { width: 16px; height: 16px; stroke: var(--rk-emerald); fill: none; flex: none; }

/* ── phones ────────────────────────────────────────────────────────────────
   home-v3.css already stacks .composer into a column on narrow screens, but the fixed 62px height
   copied in above does not stack with it: the button ends up drawn ON TOP of the input, and the
   placeholder is clipped mid-word. Caught in a 375px screenshot, not in any measurement — a fixed
   height plus a stacked child overlaps silently.

   Stacking is the right answer rather than forcing one row (which the animation page does): these
   two pages have longer button labels than it does, and German and Japanese will be longer still. */
@media (max-width: 640px) {
  :where(.lp-cm, .lp-mv) .composer {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  :where(.lp-cm, .lp-mv) .composer input { height: 44px; }
  :where(.lp-cm, .lp-mv) .composer button { width: 100%; min-width: 0; }
  /* The ghost placeholder is absolutely positioned against a one-line composer; in a stacked one it
     would float over the button. It only ever repeats the input's own placeholder, so it goes. */
  :where(.lp-cm, .lp-mv) .composer-fallback { display: none; }
  :where(.lp-cm, .lp-mv) .composer-idea-icon { display: none; }
}