/* ================================================================
   /listen/ — the resident interview. Loads after css/styles.css and
   reuses its tokens, buttons, form fields and the sticky site nav
   (shared with every page). One question at a time, quiet and
   readable on a phone.
   ================================================================ */

.ls {
  background: var(--cream);
}

.ls :focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* A couple of small utility classes the site doesn't already have. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
  text-decoration: underline;
  padding: 0.85rem 0.5rem;
}
.btn-link:hover { color: var(--navy); background: transparent; }

/* ---- Page column ---- */

.ls-main {
  max-width: 40em;
  margin: 0 auto;
  padding: 1.5em 1.25em 3em;
}

/* Headings that take focus programmatically on a step change (see js/listen.js
   show()); they aren't interactive, so skip the button/link focus ring. */
.js-wrap-say:focus,
.js-done-say:focus,
.js-resume-say:focus {
  outline: none;
}

.ls-note {
  background: var(--wheat);
  border-radius: var(--radius);
  padding: 1em 1.25em;
  margin: 1.5em 1.25em;
}

#ls-intro h1 {
  font-size: clamp(2rem, 7vw, 3rem);
  margin: 0.4em 0 0.5em;
}

.ls-lede {
  font-size: 1.1rem;
  max-width: 34em;
}

.ls-quiet {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.ls-linked {
  border-left: 0.25em solid var(--gold);
  padding: 0.75em 1em;
  background: var(--wheat);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 1.5em;
}
.ls-linked p { margin: 0 0 0.75em; }

/* ---- Form fields shared by intake and wrap ---- */

#ls-intake label,
#ls-intake-card label,
#ls-wrap label {
  display: block;
  font-weight: 700;
  color: var(--navy);
  margin: 1.1em 0 0.4em;
}
#ls-intake label:first-of-type { margin-top: 0.4em; }

select,
textarea,
input[type="email"] {
  font: inherit;
  width: 100%;
  min-height: 2.75em;
  border: 2px solid var(--wheat-deep);
  border-radius: var(--radius);
  padding: 0.5em 0.8em;
  background: var(--white);
  color: var(--ink);
}
textarea { resize: vertical; }

#ls-intake .js-start,
#ls-wrap .js-submit {
  margin-top: 1.4em;
}

/* The widget is invisible until it needs interaction (appearance:
   interaction-only in js/site.js); give it room when it does appear, but
   an empty/hidden box takes no space so the form has no visible gap. */
#ls-intake .js-turnstile { margin: 1em 0; }
#ls-intake .js-turnstile:empty { margin: 0; }

/* ---- Starting the conversation: a progress panel replaces the intake
   form while the request is in flight, so it's obvious something is
   happening instead of a status line at the bottom of a long form. ---- */

.ls-starting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 3em 1em;
  text-align: center;
  scroll-margin-top: 1em;
}
.ls-starting-text {
  font-size: 1.45rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.ls-starting-note {
  margin: 0;
  color: var(--ink-soft);
}
/* If the widget ever needs a tap (rare, with interaction-only appearance in
   js/site.js), js/listen.js moves .js-turnstile in here for the duration. */
.ls-starting .js-turnstile { margin: 0; }
.ls-spinner {
  width: 2em;
  height: 2em;
  border: 0.25em solid var(--wheat-deep);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: ls-spin 1s linear infinite;
}
@keyframes ls-spin {
  to { transform: rotate(360deg); }
}

/* ---- The conversation ---- */

.ls-progress {
  height: 0.3em;
  background: var(--wheat-deep);
  border-radius: 1em;
  overflow: hidden;
  margin-bottom: 1.5em;
}
.ls-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width 0.4s;
}

.ls-past-wrap {
  margin-bottom: 1.2em;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.ls-past-wrap summary { cursor: pointer; font-weight: 600; }
.ls-past .ls-q { font-weight: 700; color: var(--navy); margin: 0.8em 0 0.2em; }
.ls-past .ls-a { margin: 0 0 0.2em; }

/* ---- The four intake questions, asked after the first answer ----
   An interstitial card above the open question, so it reads as a short
   aside in the conversation rather than a form standing in the way. */

#ls-intake-card {
  background: var(--wheat);
  border-left: 0.25em solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1em 1.25em 1.4em;
  margin: 0 0 1.5em;
  scroll-margin-top: 1em;
}
.ls-intake-card-h {
  font-size: 1.1rem;
  line-height: 1.35;
  margin: 0;
}
#ls-intake-card .js-intake-save { margin-top: 1.4em; }

.ls-ask {
  font-size: 1.45rem;
  line-height: 1.3;
  font-weight: 700;
  min-height: 2.6em;
  color: var(--navy);
  margin: 0 0 0.75em;
  /* js/listen.js scrolls the new question to the top of the viewport
     (block: "start") before focusing the answer box, so a phone's on-screen
     keyboard doesn't push it out of view. The sticky nav is cleared by the
     scroll-padding-top on <html> (css/styles.css); this is breathing room. */
  scroll-margin-top: 1em;
}
.ls-ask.is-thinking {
  color: var(--ink-soft);
  font-weight: 400;
  font-style: italic;
}

.ls-count {
  margin: 0.4em 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* The one-time nudge toward the Talk button, under the first question only. */
.ls-tip {
  margin: 0.5em 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---- Talk, inside the answer box ----
   Nobody used voice while the button sat in a row under the box (0 of 124
   answers, on a page where three quarters of visitors are on a phone), so it
   now sits in the box's own bottom-right corner. */

.ls-answer-wrap {
  position: relative;
}
/* Room inside the box for the button, so a long answer never runs under it.
   The drag-to-resize grip would sit in the same corner as the button, so it
   goes; a phone has no grip anyway, and the box already grows no taller than
   its five rows on either. js/listen.js adds is-voice only when the browser
   has the Speech API, so a box with no button stays a plain box. */
.ls-answer-wrap.is-voice textarea {
  padding-bottom: 3.6em;
  resize: none;
}

.ls-mic {
  position: absolute;
  right: 0.5em;
  bottom: 0.5em;
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0;
}
/* Without the Speech API, js/listen.js swaps the button for a note, which
   belongs under the box in the normal flow, not floating in its corner. */
.ls-mic.is-plain {
  position: static;
  margin: 0.6em 0 0;
}

.js-mic {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  /* A 44px target: the smallest comfortable tap on a phone. */
  min-height: 44px;
  padding: 0 1.1rem;
  font-size: 0.95rem;
}
.ls-mic-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}
.js-mic.is-live {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
}

.ls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: 1em;
}

.ls-quick {
  margin: 0.75em 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
/* .btn-link is written as a .btn modifier (font: inherit lives on .btn), but
   this button carries only .btn-link, so it would otherwise render mid-
   sentence in the browser's default button font. The :focus-visible ring
   from .ls :focus-visible above still applies; only the button's own box is
   trimmed to sit inline with the surrounding text. */
.ls-quick .btn-link {
  font: inherit;
  padding: 0;
  border: 0;
}

/* ---- Results ---- */

.ls-heard {
  padding-left: 1.2em;
  max-width: 34em;
}
.ls-heard li { margin-bottom: 0.5em; }

.ls-nb { margin: 1em 0; }

.ls-theme { margin-bottom: 0.9em; }
.ls-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5em;
  margin-bottom: 0.3em;
  font-weight: 600;
}
.ls-you {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--gold);
  border-radius: 999px;
  padding: 0.05em 0.6em;
  margin-left: 0.5em;
}
.ls-bar {
  height: 0.75em;
  background: var(--wheat-deep);
  border-radius: 1em;
  overflow: hidden;
}
.ls-bar i {
  display: block;
  height: 100%;
  background: var(--navy);
}
.ls-theme.is-mine .ls-bar i { background: var(--gold-deep); }

/* ---- Post-interview feedback ---- */

.ls-fb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin: 0.25em 0 1em;
}
.ls-fb-row button {
  font: inherit;
  min-width: 2.75em;
  min-height: 2.75em;
  padding: 0 0.8em;
  border: 2px solid var(--wheat-deep);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
}
.ls-fb-row button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* ---- Phones (em so enlarged text still gets this layout) ---- */

@media (max-width: 30em) {
  .ls-ask { font-size: 1.25rem; }
  .ls-row .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-progress i { transition: none; }
  .ls-spinner { animation: none; }
}