/* css/accelerator-coach.css — a16z Speedrun Application Coach tool (BRI-5916).
 * Scoped + additive; loaded only by /tools/a16z-speedrun/. Does NOT modify
 * css/lite-form.css or css/spec-builder.css.
 *
 * Part 1 mirrors css/spec-builder.css's own comment: css/lite-form.css only styles
 * `input`/`select`, so a page with a <textarea> needs the identical look copied in.
 * Not loading spec-builder.css itself here — that file's own header says it's scoped
 * to /tools/spec-builder/ only, so this page carries its own copy rather than
 * reaching into another ticket's page-scoped file.
 *
 * Part 2 is the disclosure + quote blocks unique to an accelerator-coach page — no
 * other Lite tool has needed either.
 */

/* ---- Part 1: textarea styling (copied verbatim from .lite-field input/select) ---- */
.lite-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 9rem;
  resize: vertical;
}

.lite-field textarea::placeholder {
  color: var(--color-text-muted);
}

.lite-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-focus-ring);
}

.lite-field textarea[aria-invalid="true"] {
  border-color: var(--color-amber);
}

/* Same fix as css/spec-builder.css: css/animations.css's site-wide
   `input:invalid, textarea:invalid` halo must not accuse an untouched required
   field on first paint (this page has TWO required fields, `field-answers` and
   `field-email`). `aria-invalid` (set on submit by js/accelerator-coach-form.js)
   is the single source of truth for "this field is wrong". Combined selector
   list (input + textarea) so this rule and the focus-ring rule below each exist
   exactly once — a second `.lite-field textarea:invalid/valid` or
   `.lite-field textarea:focus-visible` block would be a stylelint
   no-duplicate-selectors error, not just redundant. */
.lite-field input:invalid,
.lite-field input:valid,
.lite-field textarea:invalid,
.lite-field textarea:valid {
  box-shadow: none;
}

/* …but keep the focus ring — the reset above would otherwise flatten it too,
   since a focused field is also :valid/:invalid and these selectors outrank the
   plain :focus-visible ones (this one above, lite-form.css's for input). */
.lite-field input:focus-visible,
.lite-field textarea:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 18%, transparent);
}

/* `.lite-required` / `.lite-optional` — same de-emphasis as css/spec-builder.css's
   copy: legible and symmetrical, not shouting. Screen readers already get
   `required` from the input attribute; this is the matching visual signal. */
.lite-optional,
.lite-required {
  font-weight: 400;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .lite-field textarea {
    transition: none;
  }
}

/* Paste character counter (mirrors #paste-counter in css/spec-builder.css).
   tabular-nums keeps the digits from jittering on every keystroke. */
#answers-counter {
  margin-top: var(--space-xs);
  text-align: right;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Draft-in-progress note, moved under the Send button and shrunk — it's a
   footnote for the rare visitor with nothing drafted yet, not something that
   should compete with the CTA for attention. `.lite-microcopy` (lite-form.css)
   carries a negative top margin tuned for sitting under a text FIELD; reset it
   here since this now sits under a full-height button instead. */
#btn-send + .accel-draft-note {
  margin-top: var(--space-sm);
  font-size: var(--font-size-xs);
  text-align: center;
}

/* ---- Part 2: disclosure block ----
 * AC: "Disclosure is above the fold, not in a footer." Rendered as its own visible
 * block, not muted/small like a legal footer — the PRD calls this a product
 * requirement ("here's where they said it" is more persuasive than synthesized
 * advice), not boilerplate to bury.
 */
.accel-disclosure {
  margin: 0 0 var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.accel-disclosure p {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}

.accel-disclosure a {
  color: inherit;
  text-decoration: underline;
}

/* ---- Part 2: quote cards ----
 * The one piece of borrowed authority this page uses on purpose (ticket scope +
 * PRD): the partners' own public words on using AI to tighten (not generate) an
 * application, each linked to its source. Review round: reuses the shared
 * testimonial component (components/testimonial.js + css/testimonial.css) instead
 * of a hand-rolled parallel one — see the comment at .accel-quotes in
 * tools/a16z-speedrun/index.html. This block ONLY resizes the shared component
 * for THIS page's compact, non-hero context (two quotes stacked inside the form
 * card, not one quote centered in a full-width page section) — it does not
 * duplicate testimonial.css's rules, only overrides the handful that assume a
 * hero layout.
 */
.accel-quotes {
  display: grid;
  gap: var(--space-md);
  margin: 0 0 var(--space-xl);
}

/* A real card (background + border), not a left-border blockquote — the quote
   on top, the author's name/affiliation flush right underneath it. */
.accel-quotes .testimonial-card {
  max-width: none;
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.accel-quotes .testimonial-quote {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  font-style: italic;
}

/* The decorative giant quote-mark is sized/positioned for the hero layout's
   generous margins (css/testimonial.css: `top: -2rem; left: -2rem`); it would
   overflow this page's narrower card. */
.accel-quotes .testimonial-quote::before {
  content: none;
}

/* Attribution flush right, under the quote — "who said it" reads like a
   byline on a card, not a second paragraph competing with the quote. */
.accel-quotes .testimonial-attribution {
  justify-content: flex-end;
  margin-top: 0;
}

.accel-quotes .testimonial-person {
  align-items: flex-end;
  text-align: right;
}

.accel-quotes .testimonial-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 768px) {
  /* Round 4 review fix: `.accel-quote` was the hand-rolled quote element this
     file used before the testimonial-component migration — the cards render
     as `.accel-quotes .testimonial-card` now, so the old selector matched
     nothing and this rule was silently inert on mobile. */
  .accel-disclosure,
  .accel-quotes .testimonial-card {
    padding: var(--space-md);
  }
}