/*
 * The Horizon hero assistant styles.
 *
 * UNSCOPED ON PURPOSE, linked globally from BaseLayout rather than kept in a
 * component <style>. The hero conversation thread is built on top by the client
 * script with document.createElement at run time: each turn is a JS-created
 * .hero-assistant__turn and the streamed answer is written into one of them.
 * Astro scopes a component <style> to a build-time data-astro-cid attribute it
 * stamps only on template elements, so a scoped rule never matches a run-time
 * node. The streamed reply then inherits the near-white global body colour on
 * the near-white panel and is invisible: present in the DOM, unreadable on
 * screen (HZN-132).
 *
 * Shipping these rules from public/ (copied verbatim, linked globally) styles a
 * run-time node by class exactly as a build-time one. This mirrors light-wash.css,
 * external for the same reason: JS-rendered DOM cannot rely on Astro scoping.
 * Keep new hero-assistant rules here, not in the component, or the invisible
 * reply returns. Tokens resolve from tokens.css, also linked globally.
 *
 * THE ASSISTANT IS NO LONGER IN THE HERO (HZN-186). It sits at the foot of the
 * page inside `.page-assistant`, whose ground is Deep Horizon (HZN-187). The
 * file name and the `hero-assistant__` class prefix are kept on purpose: the
 * script below writes those exact class names with createElement, this sheet is
 * matched to them by name, and the guard that binds the two is written against
 * them. Renaming any of the three without the other two is precisely how the
 * invisible reply comes back, and it comes back silently.
 *
 * EVERY COLOUR HERE IS MEASURED IN ITS ROLE, not inherited from the fact that
 * the token exists. A colour published for one role has measured as low as 2.11
 * in another on this platform, and the ground under this component changed from
 * near-white to Deep Horizon, which inverts every text decision in it:
 *
 *     Early Morning Sunlight on Deep Horizon    8.70   band text
 *     Deep Horizon on Early Morning Sunlight    8.70   text inside a light card
 *     Deep Horizon on Pale Marigold             7.13   the visitor's own turn
 *     Sea Glass on Deep Horizon                 5.34   RULES AND BORDERS ONLY
 *
 * Sea Glass misses the 7.0 text floor for this audience by a wide margin and
 * clears the 3.0 floor for a non-text boundary, so it draws lines here and
 * never a word. presentation-contrast.test.ts pins each pairing to the element
 * it is used on.
 */

/* ---------------------------------------------------------------------------
   THE FOOT BAND. The page turns over from its warm neutral grounds to Deep
   Horizon here, which is the debrief's split-colour ask, and the assistant is
   the invitation that sits on the turn.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   THE LAUNCHER (HZN-207). The assistant's entire presence on the page: one
   small, quiet control at the bottom right. The full-width Deep Horizon band
   that used to carry the composer here is gone.

   THE OFFSET IS DERIVED, NEVER A CONSTANT, AND BOTH DIRECTIONS ARE HANDLED.

   Downward: the consent notice is fixed to the bottom of the viewport at
   z-index 100 and buries every control in its band regardless of the layout
   underneath. Body padding cannot move a fixed element, so the bubble lifts by
   the published --horizon-bottom-inset. Nothing about a buried control looks
   wrong; only a click that cannot land finds it.

   Upward: the bubble must not bury anything either. z-index 40 puts it above
   the section rail (30) and the nav (30) and BELOW the consent notice (100),
   so the notice's own buttons are never covered by it. A launcher that sat
   over the accept control would make the notice unanswerable, and the notice
   is what publishes the inset every other control keys off.
   --------------------------------------------------------------------------- */
/* HIDDEN WHILE IT COVERS LISA'S WORDS. HZN-268.
 *
 * At 360x800 her hero line read "independen[Ask me]", with this pill drawn
 * over "t living". The launcher is fixed and travels over every ground the
 * page has, which is already why it carries the Sunlight ring below; the same
 * property means it also travels over her copy.
 *
 * The attribute is set per frame by lib/hero-chrome-gate.ts, ONLY while the
 * pill's own box overlaps one of her line boxes, and removed as soon as it
 * does not, so the launcher is present everywhere on the page except the few
 * viewport shapes where it would sit on her headline. It is not a phone rule:
 * 1440x700 and 1280x700 clip her line by 31 and 32px, and 1920x903 is clean.
 *
 * `display: none` rather than opacity or visibility, so it leaves the tab
 * order with the pixels. A keyboard visitor tabbing to a control nobody can
 * see is the defect the rail's gate names, and this is the same gate. */
.page-assistant[data-over-hero-copy] {
  display: none;
}

/* IN THE FLOW AT EVERY WIDTH SINCE 5 OCTOBER 2026, directly after the 2027
   lines and Lisa's "We'd love to hear what you're looking for in your next
   home." (Jose: the 2027 lines, then this line, then "Ask About The Horizon";
   "One button there is enough"). Below 116rem it was already in the flow; at
   116rem and up it used to float in the corner, which would have left the line
   introducing a button that is somewhere else on the screen. */
.page-assistant {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-block: clamp(1.5rem, 5vw, 2.5rem) clamp(2rem, 8vw, 3rem);
  padding-inline: clamp(1rem, 5vw, 2rem);
  text-align: center;
}

/* Lisa's line, set as body text on the page ground. Deep Horizon on the warm
   grounds this sits between is the pairing every band here already uses. */
.page-assistant__lead {
  margin: 0;
  /* Wide enough to hold the line whole on a laptop; it wrapped "home." alone
     onto a second line at 34rem. Narrower screens wrap it naturally. */
  max-inline-size: 44rem;
  text-wrap: balance;
  font-family: var(--horizon-font-body, system-ui, sans-serif);
  font-size: clamp(1.25rem, 2.3vw, 1.375rem);
  line-height: 1.5;
  color: var(--horizon-deep, #2f4a5a);
}

/* ===========================================================================
 * ON A PHONE IT IS NOT A FLOATING BUBBLE AT ALL, AND THAT IS THE FIX. HZN-280.
 *
 * Measured on the deployed build: this pill covered 28 line boxes at 360x800
 * and 15 at 390x844, worst 74px, including "You are not finished starting
 * things.", "Services that elevate your life." and the approved Community
 * subhead "At The Horizon, you create the community you call home." It read as
 * "you can live on your own terms, coo[Ask me]king when you want to".
 *
 * HZN-268 gated it over the HERO only. That was the reported symptom rather
 * than the mechanism, and the mechanism is this: a FIXED box over a full-width
 * text column covers text, always, because the column is the whole screen.
 * There is no offset that fixes it and no gate that can either. Hiding it
 * whenever it overlapped would hide it during every scroll and flicker at every
 * gap, which is a worse control than a covered word.
 *
 * So below 64rem it stops being fixed. It is the same single element in the
 * same place in the document, which matters: PageAssistant renders after
 * </main> and before the footer, so in flow it lands at the END OF THE PAGE,
 * directly after "Questions people ask". That is where a visitor with an
 * unanswered question actually is. And it is still ONE launcher in the built
 * page, so the count that guards against a second entry point is untouched.
 *
 * What it costs: a phone visitor at the top of the page cannot summon the
 * assistant without reaching the foot. That is the same trade the section rail
 * and the journey's stepper already make at these widths, and it is the right
 * way round: her words are the page, the assistant is an offer.
 *
 * AND NOT ONLY PHONES: THE BREAKPOINT IS 116rem, NOT 64rem. The first cut
 * stopped at 64rem, and on a laptop the body column reaches under the pill too.
 * Measured on the deployed build, the pill's left edge minus the rightmost body
 * line box was -56px at 1700, -6px at 1800, +4px at 1820 and +19px at 1850
 * wide, and at 1440x900 it covered "...giving up the lifestyle you...". A
 * compact icon button was measured and rejected: it still overlapped from 1024
 * to 1366, and round 3 item 10 asked for this control to be BIGGER. So the
 * pill floats only where it clears the text: 116rem (1856px) leaves about
 * 20px. If the column or the pill changes width, re-measure before moving
 * this; PageAssistant.test.ts pins the number and verify-assistant.mjs sweeps
 * the laptop shapes.
 * =========================================================================== */
@media (min-width: 0) {
  /* The panel opens above the launcher in flow rather than as a popover, so it
     pushes the footer down instead of covering the page behind it. No overlay,
     nothing to trap focus inside, and Escape still closes it. */
  .page-assistant__panel {
    inline-size: min(28rem, 100%);
    max-block-size: none;
  }
}

/* Deep Horizon ground with Early Morning Sunlight on it, which measures 8.70
   and is the pairing already pinned in presentation-contrast.test.ts. Not a new
   colour decision: the same pairing the retired band used.

   THE SUNLIGHT RING IS NOT DECORATION, IT IS THE FIX FOR A DEFECT HZN-208 WOULD
   OTHERWISE HAVE CREATED. This bubble is FIXED to the viewport, so it travels
   over every ground the page has, and the footer is now Deep Horizon. A Deep
   Horizon pill over a Deep Horizon footer measures 1.00: the control vanishes
   at the exact scroll position a visitor reaches last, and its drop shadow is
   Deep Horizon too, so that vanishes with it. Nothing about it looks wrong; the
   pill is simply not there any more.

   NO SINGLE BORDER COLOUR CLEARS 3.0 ON BOTH GROUNDS this bubble crosses: Sea
   Glass is 5.34 on Deep Horizon but 1.55 on Sandstone, and Deep Horizon is 8.25
   on Sandstone but 1.00 on the footer. The ring works because it is measured
   against the pill's OWN fill rather than against the page: Early Morning
   Sunlight on Deep Horizon is 8.70 wherever the bubble happens to be sitting.

   Drawn as a box-shadow rather than a border so the control's box does not
   change size. */
.page-assistant__launcher {
  font-family: var(--horizon-font-body, system-ui, sans-serif);
  /* Round 3 item 10: "enlarge 30-40%, it currently feels too small / hard to
     see". 1rem to 1.3rem is 30 per cent on the type, and the padding grows with
     it so the pill scales rather than just its text. */
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.9rem 1.5rem;
  border: 0;
  border-radius: 999px;
  color: var(--horizon-sunlight);
  background: var(--horizon-deep);
  box-shadow:
    0 0 0 2px var(--horizon-sunlight),
    0 2px 10px rgb(47 74 90 / 28%);
  cursor: pointer;
}

/* THE FOCUS RING CROSSES THE SAME TWO GROUNDS AND HAD THE SAME DEFECT. A Deep
   Horizon ring measures 8.25 over the Sandstone page and 1.00 over the Deep
   Horizon footer, so keyboard focus on this control disappeared exactly where
   the control did. Sunlight is 8.70 against the pill's own fill on either
   ground, and it is offset clear of the 2px Sunlight ring above by 3px so the
   two read as separate marks rather than one thicker one. */
.page-assistant__launcher:focus-visible {
  outline: 3px solid var(--horizon-sunlight);
  outline-offset: 5px;
}

/* THE PANEL STAYS ON DEEP HORIZON. Every pairing inside the composer was
   measured against that ground: Early Morning Sunlight on it is 8.70, and Sea
   Glass is the rule and never a word at 5.34. Re-grounding on a light surface
   would invalidate all of them at once, for no instruction that asked for it. */
.page-assistant__panel {
  position: relative;
  /*
   * WIDER AND TALLER. HZN-286, from "the composer is way too small".
   *
   * Was min(23rem, ...) with a 30rem cap: 368px holding a one-line field that
   * shared its row with the submit button, so about 200px of it was usable for
   * typing and a visitor could not see the question they had just written.
   *
   * 34rem is the width at which the three-row textarea below shows a full
   * sentence per line at the 18px this audience needs. The viewport subtraction
   * is unchanged, so a phone still gets the full width minus its gutters.
   */
  /*
   * WIDER AGAIN, and the margins pulled in. Client instruction: "maximize /
   * optimize the width of the AI Assistant window" and "minimize the margins".
   * 34rem to 44rem, and the panel's own padding from 1.15rem to 0.85rem, which
   * is the difference between a reply reading as a column and reading as a
   * conversation. The viewport subtraction is unchanged so a phone still gets
   * the full width minus its gutters.
   */
  inline-size: min(44rem, calc(100vw - 1.5rem));
  max-block-size: min(80vh, 44rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.85rem;
  border: 1px solid var(--horizon-sea-glass);
  border-radius: 14px;
  background: var(--horizon-deep);
  box-shadow: 0 6px 24px rgb(47 74 90 / 32%);
}

/* `hidden` is the collapsed state, applied by the parser before any CSS or
   script arrives. Declared explicitly because the flex display above would
   otherwise beat the user-agent rule and show a panel nobody opened. */
.page-assistant__panel[hidden] {
  display: none;
}

.page-assistant__close {
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-end: 0.55rem;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.15rem 0.35rem;
  border: 0;
  border-radius: 999px;
  color: var(--horizon-sunlight);
  background: transparent;
  cursor: pointer;
}

.page-assistant__close:focus-visible {
  outline: 3px solid var(--horizon-sunlight);
  outline-offset: 2px;
}
  .hero-assistant {
    width: min(38rem, 100%);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    text-align: start;
  }

  /* The input is labelled for assistive technology by a visually hidden label,
     while the placeholder and the heading above carry the visible affordance.
     Hidden, not removed: the input keeps a real accessible name. */
  .hero-assistant__field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hero-assistant__form {
    margin: 0;
  }

  /*
   * THE COMPOSER. The field owns its own row; the button sits beneath it.
   *
   * `position: relative` is load bearing: it is the containing block for the
   * decorative canvas, which is absolutely positioned inside it. Without it the
   * canvas would resolve against the page and cover it. This project has
   * already lost a day to a stale containing block on a scroll stage, so it is
   * stated rather than assumed.
   *
   * `isolation: isolate` keeps the canvas's blending to this box, so a
   * decorative layer can never tint the panel around it.
   */
  .hero-assistant__composer {
    position: relative;
    isolation: isolate;
    /* The rim the glow shows in, around an opaque field. */
    padding: 3px;
    border-radius: 13px;
    overflow: hidden;
  }

  /* Decoration, and it must never take a click meant for the field or add a
     pixel of height. Absolutely positioned, so it contributes no layout at all;
     `z-index: 0` under the field's own stacking. */
  .hero-assistant__glow {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }

  .hero-assistant__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-block-start: 0.6rem;
  }

  /* The Enter hint. Sunlight on Deep Horizon is 8.70, the same pairing as the
     body copy around it: this is an instruction, not small print, so it is not
     dimmed. */
  .hero-assistant__hint {
    margin: 0;
    font-family: var(--horizon-font-body);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--horizon-sunlight);
  }

  .hero-assistant__input {
    position: relative;
    z-index: 1;
    display: block;
    inline-size: 100%;
    /* Three rows at 18px. The point of the whole change: a question stays
       readable while it is being written. */
    min-block-size: 6.5rem;
    resize: vertical;
    padding: 0.75rem 0.95rem;
    font-family: var(--horizon-font-body);
    /* 18px floor: the audience is 65+ and this is the field they type into. */
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--horizon-deep);
    background: var(--horizon-sunlight);
    /* Sea Glass, not Deep Horizon. The band under this field is now Deep
       Horizon, and a Deep Horizon border on it measures 1.00: the field would
       have had no visible edge at all on the side that matters, while the rule
       itself still read as correct. Sea Glass on Deep Horizon is 5.34, over the
       3.0 floor a boundary has to clear. */
    border: 2px solid var(--horizon-sea-glass);
    border-radius: 10px;
    /*
     * THE FIELD STAYS OPAQUE SUNLIGHT, AND THAT IS NOT NEGOTIABLE.
     *
     * The first draft of this change made it transparent so the canvas could
     * read through the typing area. The field's ink is Deep Horizon and the
     * panel's ground is Deep Horizon: transparent puts one on the other at
     * 1.00, and a visitor types into a box where nothing appears. Caught
     * before it shipped, and recorded because it looks like an improvement
     * right up to the moment anyone tries to read their own question.
     *
     * So the glow is a RIM, not a wash under the text: the composer holds a
     * little padding and the canvas shows in it, around an opaque field. The
     * measured pairing inside the field is untouched at 8.70.
     */
  }

  .hero-assistant__input::placeholder {
    color: var(--horizon-deep);
    /* Full colour, not a dimmed grey: contrast-guard forbids the shortcut and
       the placeholder must stay legible for a 65+ reader. Distinguished by
       italics rather than by opacity. */
    font-style: italic;
  }

  /* A GHOST PILL (HZN-187). The debrief asks for buttons that invite rather
     than intrude, and the sector peer we studied carries its primary action as
     an outlined pill with no fill rather than a solid block.
     SUBTLE IS NOT INVISIBLE, and that is the failure mode worth naming: a
     control the audience cannot find is worse than one that is too loud. So
     what a solid fill was carrying is carried by other means and nothing is
     merely removed. The 52px target is unchanged, the outline is 2px rather
     than a hairline, the label keeps the Atlas subhead cut with caps and
     tracking, the focus ring is untouched, and hover and focus fill the pill
     solid so the control still confirms itself under a pointer.
     Early Morning Sunlight on Deep Horizon measures 8.70 for the label and the
     same for the outline, so the pill clears the 7.0 text floor and the 3.0
     boundary floor on the one ground it is ever drawn on. */
  /*
   * ASK IS A FILLED BUTTON, AND THE GHOST PILL ABOVE IS WHY IT HAD TO CHANGE.
   *
   * Client instruction: "looks like one of the quick-pick pills, need to look
   * like a button." It was right, and it was worse than a resemblance: the
   * submit and the chips carried the SAME three declarations, transparent
   * ground, 2px Sunlight border, 999px radius. The one control that sends the
   * question was drawn identically to four suggestions beside it.
   *
   * The ghost treatment was a deliberate HZN-187 decision and its own comment
   * warns that "subtle is not invisible... a control the audience cannot find
   * is worse than one that is too loud". That reasoning still holds; what it
   * did not anticipate was four more ghost pills arriving underneath it, at
   * which point subtle stopped meaning quiet and started meaning
   * indistinguishable.
   *
   * Filled Sunlight with Deep Horizon type is 8.70, the same pairing the panel
   * uses everywhere else, and the hover simply swaps the two so the control
   * still answers the pointer. The 52px target and the focus ring are
   * untouched.
   */
  .hero-assistant__submit {
    min-block-size: 52px;
    padding: 0.65rem 1.75rem;
    font-family: var(--horizon-font-subhead);
    font-weight: 400;
    font-size: 1.0625rem;
    text-transform: uppercase;
    letter-spacing: var(--horizon-subhead-tracking);
    color: var(--horizon-deep);
    background: var(--horizon-sunlight);
    border: 2px solid var(--horizon-sunlight);
    border-radius: 999px;
    cursor: pointer;
    transition:
      background-color 200ms ease,
      color 200ms ease;
  }

  /* The swap, so a filled control still answers the pointer. Sunlight type on
     the Deep Horizon panel is 8.70, the same figure inverted. */
  .hero-assistant__submit:hover,
  .hero-assistant__submit:focus-visible {
    color: var(--horizon-sunlight);
    background: transparent;
  }

  .hero-assistant__submit:disabled {
    cursor: progress;
  }

  .hero-assistant__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }

  /* Pill-shaped suggested questions, ghost like the submit and for the same
     reason. Sentence case and body face: these are questions a reader
     recognizes, not shouted labels. 8.70 on the band, filling to 8.70 inverted
     on hover and focus. */
  .hero-assistant__chip {
    font-family: var(--horizon-font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--horizon-sunlight);
    background: transparent;
    border: 2px solid var(--horizon-sunlight);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    /* 44px, unchanged. A quieter button is not a smaller one. */
    min-block-size: 44px;
    cursor: pointer;
    transition:
      background-color 200ms ease,
      color 200ms ease;
  }

  .hero-assistant__chip:hover,
  .hero-assistant__chip:focus-visible {
    color: var(--horizon-deep);
    background: var(--horizon-sunlight);
  }

  /* ON THE BAND, so Sunlight. Deep Horizon here would be Deep Horizon on Deep
     Horizon at 1.00: present in the DOM, unreadable on screen, and identical in
     every source read to a correct rule. */
  .hero-assistant__status {
    font-family: var(--horizon-font-body);
    font-size: 1rem;
    color: var(--horizon-sunlight);
    margin: 0;
    min-block-size: 0;
    text-align: center;
  }

  .hero-assistant__thread {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-block-size: min(38vh, 22rem);
    overflow-y: auto;
  }

  .hero-assistant__thread:empty {
    display: none;
  }

  /* A conversation turn. Bubbles are distinguished by ground and alignment, not
     by a dimmed colour: text stays full-strength Deep Horizon throughout. */
  .hero-assistant__turn {
    font-family: var(--horizon-font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--horizon-deep);
    margin: 0;
    /* "Minimize the margins": 0.6/0.85 to 0.5/0.7, and the bubble is allowed
       wider now the panel is. */
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    max-width: 94%;
    transition: opacity 200ms ease;
  }

  /*
   * THE STRUCTURE THE ANSWER RENDERER EMITS. Before it, a reply arrived as one
   * flat string and markdown markers were printed as punctuation. These are
   * real paragraphs and list items now, so they need real spacing.
   */
  .hero-assistant__para {
    margin: 0;
  }

  .hero-assistant__para + .hero-assistant__para,
  .hero-assistant__para + .hero-assistant__list,
  .hero-assistant__list + .hero-assistant__para {
    margin-block-start: 0.5rem;
  }

  .hero-assistant__list {
    margin: 0;
    padding-inline-start: 1.15rem;
  }

  .hero-assistant__list li + li {
    margin-block-start: 0.25rem;
  }

  /*
   * WAITING FOR THE FIRST TOKEN. The answer bubble is created empty, and an
   * empty paragraph has no height, so the thread showed nothing between Ask and
   * the first token even though the reply streams. This gives the bubble a
   * height and a visible resting state for that gap.
   *
   * A STATIC ELLIPSIS, NOT AN ANIMATION. It is on screen for a moment and it
   * must not depend on movement to be understood; the status line above already
   * says "Working" in words.
   */
  .hero-assistant__turn--assistant[data-awaiting]::after {
    content: '...';
    letter-spacing: 0.15em;
  }

  /* The thread is a focus TARGET, not a tab stop. Focus is moved here when a
     question is asked, so it needs a visible ring like anything else that can
     hold focus. */
  .hero-assistant__thread:focus-visible {
    outline: 3px solid var(--horizon-sunlight);
    outline-offset: 3px;
    border-radius: 8px;
  }

  .hero-assistant__turn--visitor {
    align-self: flex-end;
    background: var(--horizon-marigold);
    border-end-end-radius: 3px;
  }

  .hero-assistant__turn--assistant {
    align-self: flex-start;
    background: var(--horizon-sunlight);
    border: 1px solid var(--horizon-ochre);
    border-end-start-radius: 3px;
  }

  /* All three are createElement nodes written straight onto the band, not into
     a bubble, so they take the band's text colour. 8.70. */
  .hero-assistant__grounded,
  .hero-assistant__sources,
  .hero-assistant__follow-up {
    font-family: var(--horizon-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--horizon-sunlight);
    margin: 0;
    align-self: flex-start;
    max-width: 88%;
  }

  .hero-assistant__grounded {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  /* A small filled dot as the grounded mark. A graphic detail, so the highlight
     token is allowed here as a background, never as text. */
  .hero-assistant__grounded::before {
    content: '';
    inline-size: 0.55rem;
    block-size: 0.55rem;
    border-radius: 999px;
    background: var(--horizon-highlight);
    flex: none;
  }

  .hero-assistant__connect {
    align-self: flex-start;
    display: inline-block;
    font-family: var(--horizon-font-body);
    font-size: 1rem;
    color: var(--horizon-sunlight);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
  }

  .hero-assistant__connect:hover {
    text-decoration-thickness: 2px;
  }

  /* THE FOCUS RING IS SUNLIGHT, NOT DEEP HORIZON, and this is the same trap as
     the status line: a Deep Horizon ring on the Deep Horizon band measures 1.00
     and there is no keyboard focus indicator at all, on every control in the
     component at once. A ring is a non-text boundary and needs 3.0; this is
     8.70. Unchanged in width and offset: the quieter buttons above spend
     nothing here. */
  .hero-assistant__input:focus-visible,
  .hero-assistant__submit:focus-visible,
  .hero-assistant__chip:focus-visible,
  .hero-assistant__connect:focus-visible {
    outline: 3px solid var(--horizon-sunlight);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    /* Honoured in CSS so it holds before hydration and with scripting off. The
       colour shifts remain, only their easing is dropped. */
    .hero-assistant__submit,
    .hero-assistant__chip,
    .hero-assistant__turn {
      transition: none;
    }
  }

/*
 * THE SCROLL CUE USED TO LIVE HERE and its rules are gone, not orphaned.
 *
 * It moved to the foot of the hero under HZN-160, and this sheet kept styling a
 * `.hero-assistant__more` that nothing has rendered since. That mattered for
 * more than tidiness: the block carried a never-ending `hero-more-drift`
 * animation, and the hero's motion-budget guard reads HorizonHero.astro's
 * scoped styles, where it could not see it. The guard asserted exactly one
 * looping animation and passed for months while the hero carried two, the
 * second one here in public/. Deleting the dead rules removes the second.
 */

/*
 * The opening greeting bubble (operator ruling 2026-09-02). It takes the
 * assistant-turn treatment and sits at the top of the composer. A reserved
 * min-height keeps the composer from reflowing, and the chips from jumping or
 * overlapping, while the client script streams the greeting in word by word.
 */
.hero-assistant__intro {
  align-self: flex-start;
  max-width: 90%;
  margin: 0;
  /* Just enough to hold two lines while it streams, kept lean so the hero fits
     the safe band without the band's own scrollbar appearing when not needed. */
  min-block-size: 2.6em;
}