/* Sprint 1 — auth + chat UI. Uses tokens from brand.css; no new colors/fonts. */
/* Sprint 2 — exchange rendering ported from the approved aclarity_ask_mockup.html.
   Uses brand.css's --color-* tokens (same hex values as the mockup's own
   :root vars). Source Serif 4 dropped from the brand type system - the
   mockup's citation/body treatment now uses Jost (brand.css's --font-ui),
   same as the rest of this file, so the separate CDN import this file used
   to carry is gone. */

/* Without this, any element with padding+border sitting in a flex row
   (chat-form's #question-input at flex:1, alongside #send-btn) computes
   its flex-distributed width from content-box, then adds padding/border
   OUTSIDE that - the row overflows its container instead of fitting it.
   Root cause of the "askew"/overflowing input+button row on mobile.
   .page and .a already set this individually; making it universal here
   closes the same gap everywhere else in this file, not just those two. */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  /* Onyx is the locked default background for product surfaces (design.md
     July 2 PM addendum) — overrides brand.css's --brand-surface-light
     default for this screen. */
  background: var(--color-onyx);
}

.page {
  /* --safe-margin is a MINIMUM distance from the viewport edge, not inner
     padding — shrinking max-width keeps that distance intact at any width
     instead of cramming the 640px column with 120px of padding on desktop.
     width:100% is explicit on purpose - confirmed live (390px DevTools
     emulation) that leaving width implicit (auto) alongside this nested
     min()/calc()/var() max-width made the browser resolve margin-left/
     margin-right to 0 instead of auto-centering the clamped box, sitting
     the whole page flush left with the "missing" width as dead space on
     the right. An explicit width forces the standard, unambiguous
     fill-then-clamp-then-center resolution instead. */
  width: 100%;
  max-width: min(640px, calc(100vw - 2 * var(--safe-margin)));
  margin: 0 auto;
  /* --site-nav-height is set live by nav.js (measured, not guessed) - /ask/
     has no hero for the fixed shared nav to overlay, so its own content
     needs to clear the nav's actual height instead of rendering under it.
     112px is a reasonable fallback only for the (non-existent in practice)
     case nav.js hasn't run yet. */
  padding: calc(var(--site-nav-height, 112px) + 2rem) 1.5rem 2rem;
  box-sizing: border-box;
}

/* Same fallback mismatch as .page--wide in brand.css: nav.css hides the
   link row below 640px, so the real nav is ~77px tall there, not 112px.
   Matching that here removes the post-load content shift that can make
   a fast tap near the top of the page land above its target. */
@media (max-width: 640px) {
  .page {
    padding-top: calc(var(--site-nav-height, 80px) + 2rem);
  }
}

/* Same accordion pattern/classes as the landing page used to define in
   home.css (moved here when the on-page FAQ relocated to /faq/) - brand.css
   tokens instead of home.css's local --divider/--linen/--gilded aliases,
   since this file doesn't have those, but same hex values throughout. */
details.faq { border-bottom: 1px solid var(--color-bronze); }

details.faq > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
}
details.faq > summary::-webkit-details-marker { display: none; }

.faq__q { font-family: var(--font-ui); font-size: 20px; color: var(--color-linen); }

.faq__x {
  color: var(--color-gilded);
  font-size: 20px;
  transition: transform 0.25s ease;
}
details.faq[open] > summary .faq__x { transform: rotate(45deg); }

.faq__a {
  padding: 0 0 20px;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(245, 239, 225, 0.75);
}
.faq__a a { color: var(--color-gilded); text-decoration: underline; }

.panel {
  /* Ambient icon-mark watermark lives here, not on .messages - .panel is the
     full card surface with no overflow/height clipping, so the mark can
     actually breathe as a background presence instead of being cropped by
     .messages' small scrolling box (design.md Section 5A: "large, low-opacity
     ... ambient background element, not a focal one"). Opacity is baked into
     the SVG itself (~6%). */
  background: var(--color-onyx) url("/images/icon-mark.svg") no-repeat;
  background-position: bottom -6% right -4%;
  background-size: auto min(75vh, 640px);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1.5rem;
}

@media (max-width: 480px) {
  .panel {
    background-size: auto min(45vh, 360px);
  }
}

.muted {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
}

/* .panel's background is Onyx (see above), but body text (p/li/table/etc.)
   inherits --text-body = Onyx from brand.css's body rule - unreadable
   without an explicit override. h1-h3 already get --color-linen from
   brand.css; .legal-content extends the same treatment to everything else
   in the long-form legal pages (privacy, terms, affiliate-disclosure,
   billing-terms). */
.legal-content p,
.legal-content li,
.legal-content td,
.legal-content th,
.legal-content strong,
.legal-content em {
  color: var(--color-linen);
}

#email-form {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}
#email-input,
#question-input {
  flex: 1;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
}

button {
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: var(--color-onyx);
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.link-button {
  background: none;
  color: var(--color-linen);
  text-decoration: underline;
  padding: 0;
}

.chat-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  max-height: min(480px, 60vh);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 1rem 0;
  padding: 20px;
  border-radius: 12px;
  /* Transparent - the ambient watermark now lives on .panel (see above),
     so the dark surface and the mark both show through here uninterrupted. */
  background: transparent;
}

.message-system {
  align-self: center;
  color: var(--color-sand);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  text-align: center;
}

/* User question bubble */
.q {
  align-self: flex-end;
  background: var(--color-forest);
  border: 1px solid var(--color-bronze);
  border-radius: 14px 14px 2px 14px;
  padding: 12px 16px;
  max-width: 78%;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-linen);
  overflow-wrap: break-word;
}

/* Answer card, all tiers */
.a {
  align-self: flex-start;
  background: var(--color-onyx);
  border: 1px solid var(--color-bronze);
  border-radius: 2px 14px 14px 14px;
  padding: 20px 20px 16px;
  max-width: 92%;
}

/* Out-of-scope redirect's own body treatment - the one tier that stays off
   the unified renderer below (a static, no-model message with no
   citation/protocol shape to unify). */
.a-body {
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-linen);
  margin-bottom: 16px;
  overflow-wrap: break-word;
}
.a-body strong {
  color: var(--color-gilded);
  font-weight: 600;
}

/* Confidence-tier left accent, kept as a non-color-dependent signal
   distinguishing tier2/tier3 from tier1 at a glance (design.md §9: never
   rely on color alone to carry meaning). */
.a.tier2 {
  border-left: 2px solid var(--color-sand);
}
.a.tier3 {
  border-left: 2px solid var(--color-bronze);
}

/* Unified answer-card treatment - shared by tier1, tier2, tier3, and
   concern (cited and consensus-only) via renderAnswerCard() in app.js.
   Built on the approved Ask Concern State protocol-card spec: an eyebrow,
   a lead line, then any bulleted content as a numbered protocol list
   against a bronze keyline, closing with a citation footer. */
.a-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* One gold accent per card: Sand when a citation follows below (gold saved
   for the Source label there); Gilded here when there's no citation to
   attach - it's the only gold moment left on that card. */
.a-eyebrow.is-cited { color: var(--color-sand); }
.a-eyebrow.is-uncited { color: var(--color-gilded); }

/* .a-body-blocks holds an ordered mix of .a-lead / .a-subhead / .a-protocol
   - a multi-section answer (several sub-headed categories) renders as
   several of these in sequence, not one fixed lead+list pair. */
.a-body-blocks > :first-child {
  margin-top: 0;
}

.a-lead {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-linen);
  margin: 0 0 12px;
  overflow-wrap: break-word;
}

/* A whole-line **bold** sub-header inside a multi-section answer (e.g.
   "Categories that help, depending on the cause:") - distinct from the
   inline **bold** clause a-lead/a-step-text handle via formatBody()'s
   <strong>. Its own margin-top holds the "clear break above" the bug
   report asked for, on top of whatever margin-bottom the preceding block
   already contributes. No gold here - one accent per card is already held
   by the eyebrow/Source label. */
.a-subhead {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-linen);
  margin: 8px 0 8px;
  overflow-wrap: break-word;
}

.a-protocol {
  list-style: none;
  margin: 0 0 12px;
  padding-left: 18px;
  border-left: 2px solid var(--color-bronze);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.a-step {
  display: flex;
  flex-direction: column;
}
.a-step-row {
  display: flex;
  gap: 14px;
}
.a-step-num {
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-sand);
  padding-top: 3px;
}
.a-step-text {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-linen);
  overflow-wrap: break-word;
}
.a-step-text strong {
  color: var(--color-gilded);
  font-weight: 600;
}
/* July 7 audit expansion: a single consensus bullet's own citation
   (answer.js's attachAuditedLineCitations), scoped to just this step - no
   gold here even though a real citation backs it. The card's eyebrow is
   already Gilded on a consensus card (its one accent, per the no-citation
   rule below), so a second gold label here would break the one-accent-per-
   card rule this build has held throughout. Indent approximates the step
   text's own start (num width + row gap) so it reads as belonging to that
   line, not the card. */
.a-step-cite {
  margin: 4px 0 0 28px;
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 12px;
  color: var(--color-sand);
  overflow-wrap: break-word;
}

.a-cite {
  border-top: 1px solid var(--color-bronze);
  margin-top: 18px;
  padding-top: 14px;
}
.a-source-label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gilded);
}
.a-source-text {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 13px;
  color: var(--color-sand);
  margin-top: 5px;
  overflow-wrap: break-word;
}
/* tier3's footer note isn't a citation - there's no source to attribute,
   so it gets the same footer position/border as a real citation but no
   gold Source label and no italic, so it never reads as a fabricated
   academic reference. */
.a-note-text {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-sand);
  overflow-wrap: break-word;
}

/* Out-of-scope redirect */
.a.redirect {
  background: var(--color-onyx);
  border: 1px solid var(--color-bronze);
}
.redirect-eyebrow {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gilded);
  margin-bottom: 8px;
}

/* G2S6: post-Ask Conflict Check nudge, Essential/Pro only. A quiet
   secondary line, same weight/placement logic as the resolve chip it sits
   below - not a second CTA competing with the answer itself. */
.cc-nudge {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.cc-nudge a {
  color: var(--color-gilded);
  text-decoration: underline;
}
.cc-nudge a:hover,
.cc-nudge a:focus-visible {
  color: var(--color-linen);
}

/* Branded-product resolution chip */
.resolve-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  background: var(--color-forest);
  border: 1px solid var(--color-gilded);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 10.5px;
  color: var(--color-linen);
  margin-bottom: 14px;
  overflow-wrap: break-word;
}
.resolve-chip .arrow {
  color: var(--color-gilded);
}
.resolve-chip .resolved {
  color: var(--color-gilded);
  font-weight: 500;
}

.chat-form {
  display: flex;
  gap: 0.5rem;
}

.upsell {
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.upsell p {
  /* Explicit, not inherited - this had no color rule at all, so it fell
     through to body's default (Onyx), rendering invisible on the now-Onyx
     panel (1.00 contrast, confirmed live 2026-07-04). Upgrade-driving copy
     needs full visual weight, not a muted tone. */
  color: var(--color-linen);
}
.upsell .primary {
  margin-top: 0.5rem;
}

/* G1S3: on-brand placeholder CTA for the cap-reached upgrade state - calm,
   single primary action, no countdown/scarcity treatment (design.md
   Section 8). Reuses the Gilded accent already used for resolved-chip
   emphasis elsewhere on this page rather than introducing a new color. */
.upsell-cta {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1.25rem;
  /* Issue fix: on a real <button> element (account-manage-btn,
     essential-cta-btn, /ask/'s and /pricing/'s "Get Essential" buttons),
     the global `button { background: var(--accent) }` rule below filled
     this gold by default - undoing that gold fill without setting a
     background here left the base rule's gold background in place while
     this class's own gilded text color rendered directly on top of it,
     invisible until :hover flipped the text to Onyx. Explicit transparent
     background makes this class's own background authoritative regardless
     of element type (<a> never had this problem - links have no button
     background to begin with). */
  background: transparent;
  border: 1px solid var(--color-gilded);
  border-radius: 6px;
  color: var(--color-gilded);
  text-decoration: none;
  font-weight: 500;
}
.upsell-cta:hover,
.upsell-cta:focus-visible {
  background: var(--color-gilded);
  color: var(--color-onyx);
}

/* G1S3: past_due grace-period notice - access is unaffected, so this reads
   as a calm heads-up, not a warning. Sand on Onyx (design.md Section 9's
   muted-on-dark contrast guidance), no red/urgency color. */
.billing-banner:not([hidden]) {
  border: 1px solid var(--color-bronze);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.billing-banner p {
  color: var(--color-sand);
  margin: 0;
}

/* G1S4: persistent low-key signup entry point on Free - calm, small, not
   competing visually with the chat itself.

   Bug fix (found via a real post-purchase screenshot: an Essential user
   still saw "Get Essential" after buying): an unconditional `display: flex`
   here outranked the browser's own `[hidden] { display: none }` default,
   so app.js correctly setting `.hidden = true` on this element did nothing
   visually - it stayed flex-rendered regardless of entitlement state.
   Scoped to :not([hidden]) so the hidden attribute is authoritative again;
   every other toggled element on this page (.upsell, .billing-banner,
   .first-run, .signup-panel) never set an explicit display value of their
   own, so they were never affected by this - confirmed by inspection, not
   assumed. */
.essential-cta:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--color-bronze);
  border-radius: 8px;
}
.essential-cta p {
  color: var(--color-sand);
  margin: 0;
}
.essential-cta .upsell-cta {
  margin-top: 0;
  white-space: nowrap;
}

/* G1S4: the signup panel - plan named plainly, then email, one primary
   action per screen (design.md Section 8). Buttons, not styled as links -
   this is a real form, not a bare CTA. */
.signup-panel {
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.signup-plans {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.signup-plan {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-linen);
  cursor: pointer;
}
#signup-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
#signup-form input {
  flex: 1;
  min-width: 200px;
}
#signup-status {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* G1S4: post-purchase first-run confirmation - calm, one primary action,
   no celebratory hype copy. */
.first-run {
  border: 1px solid var(--color-gilded);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
.first-run p {
  color: var(--color-linen);
  margin: 0 0 0.75rem;
}
.first-run button {
  border: 1px solid var(--color-gilded);
  background: var(--color-gilded);
  color: var(--color-onyx);
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
}

/* G1S4: abandoned-checkout note - a quiet acknowledgment, not an error or a
   warning treatment (they still have a usable Free account). */
.checkout-note {
  border: 1px solid var(--color-bronze);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.checkout-note p {
  color: var(--color-sand);
  margin: 0;
}

/* Mobile - matches the site-wide 640px breakpoint (home.css, nav.css), not
   a second breakpoint system. Desktop padding/margins stack (--safe-margin
   + .page + .messages + .a card, each reasonable on its own) into an
   over-narrow usable text column on a real phone - this reclaims that
   width rather than shrinking fonts to compensate (small text is its own
   accessibility problem), and brings buttons up to the standard 44px
   minimum tap target. */
@media (max-width: 640px) {
  .page,
  .page--wide {
    /* --safe-margin set to 0 here per exported design values - flagging
       this one explicitly: design.md documents --safe-margin as a
       deliberate MINIMUM-clearance floor ("~20px at narrow mobile"), not
       zero, so this is a real departure from that floor, not just a
       tightened number. Implemented as specified; worth a confirm. Scoped
       to .page (used only by /ask/, per its one reference in brand.css) and
       .page--wide (browse-only, brand.css) so this doesn't touch the
       shared token anywhere else. Without including .page--wide here,
       browse would keep .page--wide's full clamp()-based side margin at
       375px instead of the same reclaimed-width mobile treatment every
       other page already gets - a real regression, not just a missed nicety. */
    --safe-margin: 0;
    padding-left: 8px;
    padding-right: 8px;
    /* Bottom only - top has to stay dynamic (calc(var(--site-nav-height)
       + 2rem) above), it's clearing the fixed nav, not just breathing
       room, so it can't be flattened to a fixed mobile value like this. */
    padding-bottom: 9px;
  }

  /* Missed in the first pass - .panel wraps both #auth-section and
     #chat-section with its own full desktop 1.5rem, stacking on top of
     .page/.messages/.a's padding uncounted. */
  .panel {
    padding: 8px 3px;
  }

  .messages {
    padding: 6px;
    gap: 7px;
  }

  /* .q stays right-aligned and narrower than the card (chat-bubble
     convention, unchanged), .a drops its 92% desktop cap to use the full
     reclaimed column - a fixed 8% shrink was an awkward dangling gap at
     this width, not a deliberate bubble shape like .q's is. */
  .q {
    max-width: 88%;
    padding: 6px 8px;
  }

  .a {
    max-width: 100%;
    padding: 9px 8px 6px;
  }

  /* Numbered-list overhead (bronze keyline inset + numeral/text gap) eats
     proportionally more of a narrow column than a desktop one - reclaim
     some of it, and bring the per-line citation's indent back into
     alignment with the tighter row gap. */
  .a-protocol {
    padding-left: 12px;
  }
  .a-step-row {
    gap: 10px;
  }
  .a-step-cite {
    margin: 3px 0 0 20px;
  }

  /* A long multi-section concern answer (lead + several sub-headed
     categories, each its own numbered list) stacks a lot of individually-
     reasonable margins/gaps into real scroll length on a phone. Tighten
     the vertical rhythm BETWEEN blocks and list items - not the type
     size (shrinking readable text to save space is its own accessibility
     problem, same reasoning as the container-width fix above) or the
     within-paragraph line-height that carries most of the readability
     (kept at 1.45, close to WCAG's 1.5 paragraph-spacing guidance, not
     pushed lower - the compounding win here is the item-to-item GAP, not
     line-height: a 10-item answer has 9 gaps, so a couple px there is
     worth far more than the same couple px anywhere else in the card). */
  .a-eyebrow {
    margin-bottom: 3px;
  }
  .a-lead {
    margin-bottom: 5px;
  }
  .a-subhead {
    margin: 3px 0;
  }
  .a-protocol {
    margin-bottom: 5px;
    gap: 3px;
  }
  .a-step-text {
    line-height: 1.45;
  }
  .a-cite {
    margin-top: 6px;
    padding-top: 5px;
  }
  .a-source-text {
    margin-top: 2px;
  }

  .resolve-chip {
    margin-bottom: 10px;
  }
}

/* -----------------------------------------------------------------------------
   Post-answer feedback signal (cited answers only — tier1/tier2).
   Intentionally a quiet whisper: muted caption type, no keyline, greyed thumbs
   that only gain color on hover/selection, so it never competes with the
   answer, its citation, or the resolve chip above it.
   -------------------------------------------------------------------------- */
.a-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
}
.a-feedback__prompt {
  letter-spacing: 0.01em;
}
.a-feedback__thumbs {
  display: flex;
  gap: 2px;
}
/* Reset off the global gold `button` styling — these are bare icon affordances,
   not calls to action. */
.a-feedback__thumb,
.a-feedback__dismiss {
  background: none;
  border: none;
  padding: 2px 4px;
  margin: 0;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}
.a-feedback__thumb {
  font-size: 15px;
  /* Greyed and dimmed until engaged, so the emoji colour doesn't shout. */
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity 140ms ease, filter 140ms ease;
}
.a-feedback__thumb:hover:not(:disabled),
.a-feedback__thumb.is-selected {
  filter: none;
  opacity: 1;
}
.a-feedback__thumb:disabled {
  cursor: default;
}
.a-feedback__thumb:disabled:not(.is-selected) {
  opacity: 0.25;
}
.a-feedback__dismiss {
  margin-left: auto;
  font-size: 15px;
  opacity: 0.4;
  transition: opacity 140ms ease;
}
.a-feedback__dismiss:hover {
  opacity: 0.85;
}

/* Optional "Anything we should know?" line, revealed after a thumb is cast. */
.a-feedback__note-row {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
.a-feedback__note-row.is-done {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-muted);
}
.a-feedback__note {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 0.4rem 0.6rem;
  color: var(--color-linen);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.a-feedback__note::placeholder {
  color: var(--text-muted);
}
/* Ghost send button — low emphasis, not the primary gold action button. */
.a-feedback__note-send {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--rule);
  color: var(--color-sand);
  padding: 0.4rem 0.8rem;
  font-size: 12px;
}
.a-feedback__note-send:hover:not(:disabled) {
  border-color: var(--color-sand);
}