/* AI Build Planner - ai-build-planner.css
 * Only what is unique to this Thing lives here: the step cards, the
 * altitude stack and pills, the walk-through, previous answers, the
 * verdict layout, the guardrail screens, and the scrub. Everything reads tokens; shared components come from
 * bench.css.
 */

.wita-wrap { max-width: 640px; }

.wita-header {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.wita-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  flex: 1;
}

.wita-version {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  margin: 0;
  white-space: nowrap;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */

.wita-card {
  background: var(--panel);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--s3);
  margin-bottom: var(--s2);
}

.wita-frame-line {
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin: 0 0 var(--s2);
  line-height: 1.5;
}

.wita-textarea { margin-bottom: var(--s2); }

/* DR-202 step 2: voice input on the diagnostic answer textarea. Absolute
   in the corner of the textarea rather than beside it, so the layout
   does not shift between a supported and an unsupported browser -- the
   button is simply hidden via [hidden] when SpeechRecognition does not
   exist, per the brief's "no broken button" requirement. */
.wita-answer-input-wrap { position: relative; }

.wita-mic-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
}

.wita-mic-btn:hover { color: var(--ink); border-color: var(--accent); }

.wita-mic-btn.is-listening {
  border-color: var(--stop);
  color: var(--stop);
  background: var(--stop-soft);
}

.wita-error { margin: var(--s2) 0 0; }

.wita-section-q {
  font-size: var(--t-body);
  color: var(--ink);
  margin: 0 0 var(--s3);
  line-height: 1.45;
}

/* DR-219 Step 1: a real verdict fragment, not a description of the
   mechanism -- the label is the only thing marking it as a sample, so
   the fragment itself reuses the verdict's own type scale rather than
   inventing a lighter "explainer" treatment. */
.wita-sample-verdict {
  background: var(--ground-sunk);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3);
  margin-bottom: var(--s3);
}

.wita-sample-label {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 var(--s2);
}

.wita-sample-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-body);
  color: var(--ink);
  margin: var(--s2) 0 4px;
}

.wita-sample-heading:first-of-type { margin-top: 0; }

.wita-sample-body {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* ── Altitude stack and walk-through ────────────────────────────────────────── */

.wita-alt-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--s3);
}

.wita-alt-btn,
.wita-walk-btn {
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink);
  background: transparent;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}

.wita-alt-btn:hover,
.wita-walk-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* DR-204 step 1: the tapped situation card stays visually selected even
   after the pointer leaves, since the card grid stays on screen while
   the elaboration field and submit button are shown beneath it. */
.wita-alt-btn.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.wita-walk-link {
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-faint);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wita-walk-link:hover { color: var(--ink); }

.wita-walk-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#wita-walk-q2-block { margin-top: var(--s3); }

/* DR-219 Step 2/3: the scene-seed screen and its required noun. */

.wita-seed-helper {
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin: 0;
  line-height: 1.5;
}

.wita-noun-warning {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  margin: 6px 0 var(--s2);
  line-height: 1.5;
}

.wita-noun-secondary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s2);
}

/* ── Summary card ───────────────────────────────────────────────────────────── */

.wita-summary-card {
  background: var(--ground-sunk);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: var(--s2);
}

.wita-summary-text {
  font-size: var(--t-small);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* ── Loading ────────────────────────────────────────────────────────────────── */

.wita-loading-card {
  background: var(--panel);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--s4) var(--s3);
  margin-bottom: var(--s2);
}

.wita-loading-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wita-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: wita-pulse 1.4s ease-in-out infinite;
}

@keyframes wita-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

.wita-loading-text {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
}

/* ── Previous answers ───────────────────────────────────────────────────────── */

.wita-prev-answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--s2);
}

.wita-prev-answer-card {
  background: var(--ground-sunk);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.wita-prev-q-text {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  margin: 0 0 4px;
  line-height: 1.4;
}

.wita-prev-a-text {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}

/* ── Verdict ────────────────────────────────────────────────────────────────── */

.wita-verdict-card {
  position: relative;
  overflow: hidden;
}

.wita-verdict-loading-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.wita-calibration-line {
  font-size: var(--t-small);
  font-style: italic;
  color: var(--ink-faint);
  margin: 0 0 var(--s2);
}

.wita-verdict-opening {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 var(--s2);
}

.wita-verdict-rest {
  font-size: var(--t-body);
  color: var(--ink-soft);
  line-height: 1.65;
  white-space: pre-wrap;
  margin: 0 0 var(--s3);
}

.wita-expand-btn {
  font: inherit;
  font-size: var(--t-small);
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: block;
  margin-bottom: var(--s2);
}

.wita-expand-btn:hover { color: var(--ink); }

.wita-verdict-long {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.7;
  white-space: pre-wrap;
  border-top: 1px solid var(--line);
  padding-top: var(--s2);
  margin-top: 4px;
}

/* ── Honest alternative ─────────────────────────────────────────────────────── */

.wita-honest-alt-card { background: var(--ground-sunk); }

.wita-honest-alt-label { margin: 0 0 8px; color: var(--accent); }

.wita-honest-alt-text {
  font-size: var(--t-small);
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
}

/* ── Altitude footer ────────────────────────────────────────────────────────── */

.wita-altitude-footer { margin: var(--s3) 0; }

.wita-altitude-caption {
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin: 0 0 10px;
}

.wita-altitude-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wita-alt-pill {
  font: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  background: transparent;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.wita-alt-pill:hover:not(.is-active):not(:disabled) { color: var(--ink); }

.wita-alt-pill.is-active {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent);
}

.wita-alt-pill:disabled { opacity: 0.35; cursor: default; }

.wita-passive-invite {
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-faint);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: block;
  margin-bottom: var(--s2);
}

.wita-passive-invite:hover { color: var(--ink); }

/* ── Guardrail screens ──────────────────────────────────────────────────────── */

.wita-step {
  background: var(--panel);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--s3);
  margin-bottom: var(--s2);
}

.wita-out-of-scope-opening,
.wita-low-conf-body,
.wita-disengagement-body,
.wita-soft-exit-body {
  font-size: var(--t-body);
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 var(--s2);
}

.wita-out-of-scope-suffix {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0 0 var(--s2);
}

.wita-out-of-scope-hdr {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--ink-faint);
  margin: 0 0 var(--s1);
}

.wita-out-of-scope-examples {
  margin: 0 0 var(--s3);
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.wita-soft-exit-note {
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin: 0 0 var(--s3);
}

.wita-out-of-scope-actions,
.wita-low-conf-actions,
.wita-disengagement-actions,
.wita-soft-exit-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.wita-btn-link { display: inline-flex; align-items: center; }

/* ── Rate limit ─────────────────────────────────────────────────────────────── */

.wita-rate-limit-msg {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}

.wita-rate-limit-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Disclosure innards ─────────────────────────────────────────────────────── */

.wita-disclosure-arrow {
  font-size: 10px;
  color: var(--accent);
  transition: transform 0.15s;
}

.wita-disclosure-arrow.is-open { transform: rotate(90deg); }

.wita-disclosure-hdr {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--ink-faint);
  margin: var(--s2) 0 0;
}

.wita-disclosure-hdr:first-child { margin-top: 0; }

.wita-disclosure-body { display: grid; gap: 8px; }
.wita-disclosure-body p { margin: 0; }

/* ── Scrub ──────────────────────────────────────────────────────────────────── */

.wita-scrub-area { margin-top: var(--s2); }

.wita-scrub-btn,
.wita-scrub-confirm-yes {
  min-height: 42px;
  padding: 0 16px;
  border: var(--border-w) solid var(--stop);
  border-radius: var(--radius);
  background: none;
  color: var(--stop);
  font: inherit;
  font-size: var(--t-small);
  cursor: pointer;
}

.wita-scrub-confirm-yes {
  background: var(--stop);
  color: var(--panel);
}

.wita-scrub-confirm-yes:disabled { opacity: 0.45; cursor: default; }

.wita-scrub-confirm-msg {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0 0 var(--s2);
}

.wita-scrub-confirm-btns {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.wita-scrub-done {
  font-size: var(--t-small);
  color: var(--good);
  margin: var(--s2) 0 0;
}