/* The budgeted page-specific residue. Budget: 60 lines (Requirements
   E6) — every rule needs a named entry below and a reason it could not
   be a component.

   This layer wins over `components`, so a rule here can quietly defeat
   the vocabulary. That is why it is budgeted and why each entry has to
   argue for itself. When an entry grows a second call site, it stops
   being page-specific and becomes a component. */

@layer pages {
  /* ENTRY 1 · the signed-out screens (T-0301)
     `/identity/sign-in` and `/identity/sign-in/admin`. Page-specific
     because they are the only surfaces with no session, no chrome, and
     one column — and the only place a page's primary action is a stack
     of equal-weight choices rather than one button among many. */
  /* ==================================================================
   * `/` — the landing. The composer is the page.
   * ================================================================== */

  /* Page-level, so it lives here beside `.hv-signin` rather than in
     `components.css`: nothing else on the platform renders a hero, and
     a component with one call site is what `Vision.md` §6 rules out. */
  .hv-landing {
    max-width: 46rem;
    margin-inline: auto;
    /* Two scale steps, not a `clamp()` against a viewport unit: a
       viewport-relative literal is off the scale (D1–D5) and check 9 is
       right to say so. The short-viewport case is the media block
       below. */
    padding-block: var(--space-8) var(--space-6);
    text-align: center;
  }

  /* The company, not a heading — the one place a person is told which
     workspace they are about to create something in. */
  .hv-landing__eyebrow {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .hv-landing__title {
    margin: 0 0 var(--space-3);
  }

  .hv-landing__lead {
    max-width: 44ch;
    margin: 0 auto var(--space-5);
    font-size: var(--text-xl);
    line-height: var(--leading-prose);
    color: var(--fg-muted);
  }

  /* The same anatomy as `hv-composer` — input, then actions — at the
     size a first sentence deserves, and lifted further off the page
     than a panel: this is the one thing on the screen to do. */
  .hv-landing__composer {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    padding: var(--space-3);
    text-align: start;
    background: var(--surface-default);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
  }

  .hv-landing__input {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    line-height: var(--leading-prose);
    color: var(--fg-default);
    background: transparent;
    border: 0;
    resize: none;
  }

  .hv-landing__send {
    flex: none;
  }

  /* Three ways in for a person who has not got a sentence yet. Each is
     a submit button carrying its own opening turn as its `value`, in a
     second form posting to the same route — no script, and each works
     with the Datastar bundle unloaded. */
  .hv-landing__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin-block-start: var(--space-4);
  }

  .hv-landing__suggestion {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--fg-muted);
    background: var(--surface-default);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-full);
    cursor: pointer;
  }

  .hv-landing__suggestion:hover {
    color: var(--fg-default);
    border-color: var(--border-control);
  }

  @media (max-width: 60rem) {
    .hv-landing {
      padding-block: var(--space-6) var(--space-5);
    }
  }

  /* The pipeline's trigger: what to build, which model writes it, and
     Run — one row, one submit, because they are one decision. The two
     fields sit on the object header's action row, so they align to its
     baseline rather than stacking the way a form's fields do. */
  .hv-pipeline-trigger {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
  }

  .hv-signin {
    width: min(24rem, 100%);
    margin-inline: auto;
    padding-block-start: var(--space-8);
  }

  /* The wordmark above the heading, at the size the platform's largest
     heading used to be — the sign-in screen is the one place a person
     is shown the product before they are shown a task. */
  .hv-signin__brand {
    margin-block: 0 var(--space-5);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--fg-default);
  }

  .hv-signin__title {
    margin-block: 0 var(--space-2);
  }

  .hv-signin__lead {
    margin-block: 0 var(--space-5);
    color: var(--fg-muted);
  }

  .hv-signin__providers {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* The four providers are one page's primary action, so they take
     `--control-height-lg` — applied by this container, never by a size
     variant on `hv-button` (DK-14: two heights are a scale, three are
     the start of eighteen font sizes). */
  .hv-signin__providers .hv-button,
  .hv-signin__form .hv-button {
    height: var(--control-height-lg);
    width: 100%;
  }

  /* Deliberately quiet, separated by its own rule and margin — never
     styled to read as a fifth peer option beside the four real
     providers. `admin/Vision.md` §2: the long key is the only door and
     it opens nothing else; a link that looks like a sign-in option
     invites people to try it. Carried over verbatim in intent from
     `legacy.css`'s own `.admin-login-link` comment. */
  .hv-signin__admin {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    /* `--border-default`: this rule sits on `--surface-page` (the
       signed-out screen has no panel), where `--border-subtle` is
       1.13 : 1 in light — below the 1.20 divider floor. Third instance
       of the same mistake in one session; see `design/tokens.md`'s
       `--border-subtle` row, which now names every surface it is NOT
       cleared for. */
    border-block-start: var(--border-width) solid var(--border-default);
    text-align: center;
    font-size: var(--text-sm);
  }

  .hv-signin__admin a {
    color: var(--fg-subtle);
  }

  /* ENTRY 2 · the changeset diff well (T-0304) — WITHDRAWN, zero lines.
     `/changesets/{id}`'s diff needed one declaration, `--surface-sunken`
     on the panel body. `Panel::sunken` (T-0303) landed the same
     declaration as `hv-panel--sunken` in `components.css` while this was
     in flight, so the call site uses the component and this entry costs
     nothing. Recorded rather than deleted silently: the entry existing
     for an afternoon and then not is the budget working. */

  /* ENTRY 3 · Speech Capture's five views (T-0305, DK-34)
     `release_view.rs`, `raw_view.rs`, `vocabulary_view.rs`,
     `operations_view.rs`, `error_finding_view.rs`.

     **BUDGET FINDING (Requirements E6).** This entry takes the page
     layer well past its stated 60 lines. Recorded rather than hidden,
     with the reason: these are the token-based replacements for
     `legacy.css`'s `release_view` / `vocabulary_view` / `nav.versions`
     sections — two thirds of what is left in that file — and they
     cannot be components. DK-34 makes the point card's distinctions
     Speech Capture's decisions about *meaning*, not a shared
     vocabulary; they are page-specific by definition. Moving them into
     `components.css` would be the same rules wearing a name that claims
     they are reusable.

     Every editorial distinction here is inventoried, with its old
     mechanism and the reason for its new one, in
     `design/speech-capture-treatments.md`. **No `opacity` is used as a
     state signal anywhere below** — three rules were, and Trap 1 of
     that file records why they could not stay.

     `.sc-view` is the wrapper each of the five renders inside `Page`'s
     `<main>`; it carries the class the `<body>` used to. */

  /* These five are data-dense — a nine-column vocabulary table, a
     seven-column diff table, a paginated point list. `--measure` is a
     reading measure for one column of prose and is the wrong width for
     any of them. Scoped by `:has()` to this wrapper, so it cannot reach
     the signed-out screens the modifier exists for. */
  .hv-main--centered:has(> .sc-view) {
    width: min(var(--content-max), 100%);
    padding: var(--space-5) var(--space-6);
  }

  .sc-view h1 {
    margin-block-end: var(--space-5);
  }

  /* ---- the release view's header panel ---- */
  .sc-view section.header {
    background: var(--surface-default);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-block-end: var(--space-5);
  }

  .sc-view section.header p {
    margin-block-end: var(--space-2);
  }

  .sc-view section.header p:last-child {
    margin-block-end: 0;
  }

  .sc-view p.counts {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
  }

  .sc-view p.unassigned-summary,
  .sc-view p.discarded-time {
    color: var(--warning);
  }

  .sc-view p.responsible,
  .sc-view p.point-count,
  .sc-view p.count,
  .sc-view p.raw-link {
    color: var(--fg-muted);
    font-size: var(--text-sm);
  }

  .sc-view div.bulk-controls,
  .sc-view div.point-controls {
    display: flex;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
  }

  .sc-view div.point-controls {
    padding-block-start: var(--space-3);
    border-block-start: var(--border-width) solid var(--border-default);
  }

  .sc-view p.raw-link {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-width) solid var(--border-default);
  }

  .sc-view a.more {
    display: inline-block;
    margin-block: var(--space-4);
  }

  /* ---- the point card and its states (treatments 4–7) ----
     The 4px inline-start edge is Speech Capture's decision and stays.
     What changes: it is a semantic token, and the state now also has a
     word beside it (`.point__state`, Requirements C4). */
  .sc-view div.points {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .sc-view div.point {
    background: var(--surface-default);
    border: var(--border-width) solid var(--border-default);
    border-inline-start: 4px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-raised);
  }

  .sc-view div.point.open {
    border-inline-start-color: var(--accent);
  }

  .sc-view div.point.released {
    border-inline-start-color: var(--success);
  }

  /* Treatment 6. `opacity: 0.7` used to be the whole signal, which made
     every contrast pair inside this card unmeasurable (C1). A dashed
     edge, muted text, and the word "Discarded" carry it instead.

     `opacity: 1` is not decoration and is not redundant: `legacy.css`
     is still linked and still carries `opacity: 0.7` here, and a layer
     only wins for properties it actually declares. It is the same
     manoeuvre `base.css` uses against Firefox's `::placeholder` fade,
     for the same reason — at full strength the colour token means what
     the contrast table says it means. **Deleted together with the
     `legacy.css` rule it neutralises** (T-0403). Likewise on the two
     rules below. */
  .sc-view div.point.discarded {
    border-inline-start-style: dashed;
    border-inline-start-color: var(--border-default);
    color: var(--fg-muted);
    opacity: 1;
  }

  .sc-view div.point.unassigned {
    outline: var(--border-width) dashed var(--border-status-warning);
    outline-offset: 3px;
  }

  .sc-view .point__state {
    margin-block-end: var(--space-2);
  }

  .sc-view .point__state--discarded {
    background: transparent;
    border-style: dashed;
    border-color: var(--border-default);
    color: var(--fg-muted);
  }

  /* ---- treatments 13, 1, 2, 3, 12 ---- */
  .sc-view p.label.suggestion {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    margin-block-end: var(--space-2);
  }

  .sc-view p.label.suggestion em {
    font-style: normal;
    font-weight: var(--weight-bold);
  }

  .sc-view p.utterance,
  .sc-view p.text {
    font-size: var(--text-lg);
    line-height: var(--leading-prose);
    margin-block-end: var(--space-3);
  }

  .sc-view span.piece {
    border-radius: var(--radius-sm);
  }

  .sc-view span.piece.flagged,
  .sc-view span.piece.uncertain {
    background: var(--surface-warning-soft);
    box-shadow: 0 0 0 var(--border-width) var(--border-status-warning);
    /* `--space-1`, not the `0.1em` this replaced. An inline highlight's
       padding is arguably text-relative rather than layout-relative,
       which is a category the ladder does not cover — but one use does
       not earn a token (Vision decision rule 6), and 4px is what the
       `<code>` chip already uses beside it. */
    padding-inline: var(--space-1);
  }

  /* Speech Capture Rule 2 — no silent intervention — rendered. Same
     kind, same offset, and an explicit thickness so it does not thin
     out against the new type scale. */
  .sc-view span.piece.from-diff {
    text-decoration: underline dotted var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .sc-view sup.index {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    margin-inline-end: 0.1em;
    user-select: none;
  }

  /* ---- flags and diffs ---- */
  .sc-view p.flags-count,
  .sc-view p.diffs-count,
  .sc-view p.reverted-count {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-block-end: var(--space-1);
  }

  .sc-view ul.flags,
  .sc-view ul.diffs {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: var(--space-3);
  }

  .sc-view ul.flags li,
  .sc-view ul.diffs li {
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin-block-end: var(--space-1);
    font-size: var(--text-md);
  }

  .sc-view ul.flags li {
    background: var(--surface-warning-soft);
    border: var(--border-width) solid var(--border-status-warning);
  }

  .sc-view ul.diffs li {
    background: var(--surface-sunken);
  }

  /* Treatment 10. `opacity: 0.65` used to be the signal — see Trap 1.
     A dashed border and muted text carry it now, with the
     "Reverted (n):" heading already above the list. */
  .sc-view ul.diffs.reverted li,
  .sc-view li.overruled {
    background: transparent;
    border: var(--border-width) dashed var(--border-default);
    color: var(--fg-muted);
    opacity: 1;
  }

  .sc-view ul.diffs .layer,
  .sc-view ul.diffs .author,
  .sc-view ul.diffs .reason {
    color: var(--fg-muted);
    font-size: var(--text-sm);
  }

  /* Treatments 8 and 9. */
  .sc-view ul.diffs .before {
    color: var(--danger);
    text-decoration: line-through;
    font-family: var(--font-mono);
  }

  .sc-view ul.diffs .after {
    color: var(--success);
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
  }

  /* `inline-block` deliberately: text-decoration does not propagate
     into one, so the minus is not itself struck through and stays
     legible as the non-colour carrier it is there to be (C4). */
  .sc-view ul.diffs .before::before,
  .sc-view ul.diffs .after::before {
    display: inline-block;
    margin-inline-end: var(--space-1);
    text-decoration: none;
  }

  .sc-view ul.diffs .before::before {
    content: "\2212";
  }

  .sc-view ul.diffs .after::before {
    content: "+";
  }

  .sc-view span.reverted-note {
    color: var(--fg-muted);
    font-size: var(--text-xs);
  }

  .sc-view ul.diffs button.revert {
    margin-inline-start: var(--space-2);
    height: auto;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
  }

  /* Treatment 11 · the table twin of the row above. `opacity: 0.55`
     was its entire mechanism. */
  .sc-view tr.diff.overruled {
    opacity: 1;
  }

  .sc-view tr.diff.overruled td {
    color: var(--fg-muted);
  }

  .sc-view tr.diff.overruled td:first-child {
    border-inline-start: var(--border-width-emphasis) dashed var(--border-default);
  }

  .sc-view details.normalizations,
  .sc-view details.expand {
    margin-block: var(--space-2);
  }

  .sc-view details.normalizations summary,
  .sc-view details.expand summary {
    color: var(--accent);
    font-size: var(--text-sm);
  }

  .sc-view p.raw-utterance {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-block-start: var(--space-2);
    white-space: pre-wrap;
  }

  /* ---- treatment 16 · the raw view's five folds ---- */
  .sc-view nav.versions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
  }

  .sc-view nav.versions a.version {
    padding-inline: var(--control-pad-x);
    line-height: var(--control-height);
    border: var(--border-width) solid var(--border-control);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--fg-muted);
    font-size: var(--text-sm);
  }

  .sc-view nav.versions a.version:hover {
    border-color: var(--accent);
    color: var(--accent);
  }

  .sc-view nav.versions a.version.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--fg-on-accent);
    font-weight: var(--weight-medium);
  }

  /* A seven- and a nine-column table on a narrow screen: the table
     scrolls inside its own box rather than widening the page (J3). */
  .sc-view table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  /* ---- the warning bands both views already render ----
     Kept as `section.alerts` / `.finding` rather than rewritten into
     `hv-notice`: the operations view's content is out of scope for
     T-0305, and the two anatomies differ. */
  .sc-view .finding,
  .sc-view section.alerts {
    background: var(--surface-warning-soft);
    border: var(--border-width) solid var(--border-status-warning);
    color: var(--warning);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-4);
  }

  .sc-view section.alerts h2 {
    margin-block-start: 0;
    font-size: var(--text-lg);
    color: inherit;
  }

  .sc-view section.alerts ul {
    margin-block-end: 0;
  }

  /* ---- the vocabulary views ---- */
  .sc-view div.create-entry,
  .sc-view section.suggestions,
  .sc-view section.evaluation {
    background: var(--surface-default);
    border: var(--border-width) solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-block-end: var(--space-5);
  }

  .sc-view div.create-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
  }

  .sc-view div.create-entry p {
    width: 100%;
    margin: 0;
    font-weight: var(--weight-bold);
  }

  .sc-view div.create-entry input {
    flex: 1 1 12rem;
  }

  .sc-view section.suggestions ul {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
  }

  .sc-view section.suggestions li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-2);
    border-block-end: var(--border-width) solid var(--border-default);
  }

  .sc-view section.suggestions li:last-child {
    border-block-end: 0;
  }

  /* Treatment 15 · an honest empty, at a size the old faint token
     measured 2.93 – 3.31 : 1 at. */
  .sc-view p.no-hits {
    color: var(--fg-muted);
    font-style: italic;
  }

  /* ==================================================================
   * Home, as an inbox (design/CONSOLE.md)
   * ================================================================== */

  /* **The hero is for an empty workspace only.** `--text-4xl` is spent
     once per screen, and on a working home page the thing that
     deserves it is what needs a person — not a proposition sitting
     above ten pending decisions. The compact form keeps the `<h1>`,
     because one per page is a structural rule; what changes is its
     size, its alignment and the space around it. */
  .hv-landing--compact {
    max-width: var(--measure);
    padding-block: var(--space-5) var(--space-4);
    text-align: left;
  }

  .hv-landing--compact .hv-landing__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--fg-muted);
    margin: 0 0 var(--space-2);
  }

  .hv-landing--compact .hv-landing__input {
    font-size: var(--text-lg);
  }

  /* One row of the inbox. The row itself is an `<a>`; the decision
     buttons are its sibling, because a `<form>` inside an anchor is
     invalid markup browsers resolve by breaking one of the two. */
  .hv-attention__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-right: var(--space-4);
    border-bottom: var(--border-width) solid var(--border-subtle);
  }

  .hv-attention__row:last-child {
    border-bottom: 0;
  }

  .hv-attention__row .hv-row {
    flex: auto;
    min-width: 0;
  }

  /* Three lines, read down the left edge: which project, which object,
     and what is already known about it. Ten rows that each said only
     "is waiting for a decision" were ten identical rows — a person
     could not tell from the list which one to open first, so every
     decision cost a navigation before it could even be triaged. */
  .hv-attention__project {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-subtle);
  }

  .hv-attention__label {
    display: block;
    font-weight: var(--weight-medium);
  }

  .hv-attention__known {
    display: block;
    font-size: var(--text-sm);
    color: var(--fg-muted);
  }

  .hv-attention__decide {
    flex: none;
    display: flex;
    gap: var(--space-2);
  }

  /* **The raw stream is bounded.** It was the whole page: a `cargo
     build` log is thousands of lines and the run's own summary was its
     last one, so reaching a decision meant scrolling a compiler's
     stdout. The phases above it answer the question; this is where the
     detail stays, scrolled inside its own well rather than growing the
     document. */
  .hv-panel--sunken .hv-stream--mono {
    max-height: var(--stream-height);
    overflow: auto;
  }

  /* ==================================================================
   * Work, as a list you can decide from
   * ================================================================== */

  .hv-work__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-right: var(--space-4);
    border-bottom: var(--border-width) solid var(--border-subtle);
  }

  .hv-work__row:last-child {
    border-bottom: 0;
  }

  .hv-work__row .hv-row {
    flex: auto;
    min-width: 0;
  }

  .hv-work__label {
    display: block;
    font-weight: var(--weight-medium);
  }

  /* What the row already knows — the test line, why it stopped, who
     proposed it. The reason a person can rank ten pending decisions
     without opening any of them. */
  .hv-work__known {
    display: block;
    font-size: var(--text-sm);
    color: var(--fg-muted);
    font-family: var(--font-mono);
  }

  .hv-work__decide {
    flex: none;
    display: flex;
    gap: var(--space-2);
  }

  /* **Below the breakpoint a row is three stacked lines, not three
     columns.** `hv-row` lays leading, content and trailing side by
     side, which at 400px leaves the content about sixty pixels — and
     "Run ae67fa47 — Executable" came out four characters to a line.
     The badge and the time each take a line of their own here, and the
     label gets the width. */
  @media (max-width: 48rem) {
    .hv-work__row,
    .hv-attention__row {
      flex-wrap: wrap;
      padding-bottom: var(--space-2);
    }

    .hv-work__row .hv-row,
    .hv-attention__row .hv-row {
      flex-wrap: wrap;
      align-items: flex-start;
      row-gap: var(--space-1);
    }

    .hv-work__row .hv-row__content,
    .hv-attention__row .hv-row__content {
      flex: 1 0 100%;
      overflow: visible;
      white-space: normal;
    }

    .hv-work__row .hv-row__trailing,
    .hv-attention__row .hv-row__trailing {
      flex: 1 0 100%;
    }

    .hv-work__label,
    .hv-work__known {
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .hv-work__decide {
      width: 100%;
      padding-left: var(--space-4);
    }

    .hv-work__decide .hv-button {
      flex: auto;
      justify-content: center;
    }
  }

  /* Below the breakpoint the decision moves under the row rather than
     beside it: two buttons and a three-line row do not share 400px.

     The row's own three lines must also stop being one line each: at
     this width `hv-row`'s nowrap turns "A small HTTP service for short
     links." into "A SMALL HTTP SERVI", which is the truncation this
     whole direction removed from the rail. */
  @media (max-width: 48rem) {
    .hv-attention__project,
    .hv-attention__label,
    .hv-attention__known {
      white-space: normal;
      overflow: visible;
      overflow-wrap: anywhere;
    }

    .hv-attention__decide {
      width: 100%;
      padding-left: var(--space-4);
    }

    .hv-attention__decide .hv-button {
      flex: auto;
      justify-content: center;
    }
  }
}