/* ============================================================
   KNOW THY BUYER — app surface (input + waiting/generation chrome)
   Track: Know Thy Buyer · Branch: redesign/ktb-ui-ux-light
   Direction: d3 Editorial Dossier skin (d3-x-gc-final-tokens.md).
   Loaded after the base system; every rule here wins.
   ---------------------------------------------------------------------
   DESIGN INTENT — read before "fixing" anything:
   The wait is a narration, not a dashboard. The headline speaks in
   plain language ("reading competitor pricing pages…"), the status
   pills are a persistent, glanceable record, and nothing competes
   with the words. Paper ground, hairlines, no shadows. Heritage
   green means "you can act here" and marks the running stage —
   everything else is ink on paper.
   Functional color (verdicts/states only, never decoration):
   done/success → green #1e4d3b · watch → ochre #a86f1f ·
   weak fit → slate #5b6470 · failed/action → brick red #c2402f.
   ============================================================ */

/* ---------- 1. Generation sequence: the narration moment ----------
   The label is the voice of the app — serif, spoken register.
   The running pill breathes gently in green; finished pills settle
   with a quiet check. The bar is a single green fill — no stripes. */
#progress {
  scroll-margin-top: 5rem;
}
#progress-label {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.45;
  letter-spacing: -.01em;
}
/* The count is quiet tabular text beside the headline — legible, not loud. */
.ktb-count {
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .03em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#progress-bar {
  background: var(--green);
  animation: none;
}
.stage {
  transition: background .18s ease, opacity .25s ease, border-color .18s ease;
}
.st-pending {
  opacity: .5;
}
/* The one animated moment: a soft breathing green dot — "this one, right now". */
.st-running {
  border-color: var(--green);
}
.st-running .dot {
  background: var(--green);
  animation: ktb-breathe 1.6s ease-in-out infinite;
}
/* Finished stages settle: green check, full opacity. */
.st-done {
  border-color: var(--green);
}
.st-done .dot {
  background: var(--green);
}
.st-done .dot::after {
  content: "\2713";
  color: #fff;
  font-size: .5rem;
  font-weight: 700;
  line-height: 1;
  display: block;
  text-align: center;
}
.st-failed {
  border-color: var(--red);
}
.st-failed .dot {
  background: var(--red);
}
/* Reassurance copy: generous measure, calm voice. */
.ktb-reassure {
  max-width: 38rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- 2. Post-report hierarchy ----------
   One primary action per screen. The unlock gate keeps a hairline
   top strip in heritage green — color means "you can act here".
   Everything below it steps down to quiet hairline cards. */
.ktb-unlock {
  position: relative;
}
.ktb-unlock::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1.5rem -1.5rem 1.5rem;   /* p-6 */
  background: var(--green);
}
@media (min-width: 768px) {
  .ktb-unlock::before { margin: -2rem -2rem 2rem; }  /* md:p-8 */
}
.ktb-unlock h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.01em;
}
/* Quiet secondary cards: thinner rules, softer voice. */
.ktb-quiet {
}
.ktb-quiet-blue {
  border-top: 2px solid var(--ink-faint);
}
.ktb-quiet-lime {
  border-top: 2px solid var(--green);
}
.ktb-quiet h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
}
.ktb-quiet .btn {
  font-size: .95rem;
  padding: .7rem 1.4rem;
}

/* ---------- 3. "Add more sections" becomes a disclosure ----------
   It's a power utility, not a call to action. The details.ctx
   pattern already exists in the system — use it, don't invent. */
.ktb-refine-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.ktb-refine-body {
  padding: .25rem 1.25rem 1.35rem;
}

/* ---------- 4. Locked-section cards ----------
   Gating chrome, warmed: the lock reads as "waiting for you",
   not "kept from you". Anchor target #unlock is unchanged. */
.ktb-locked {
  background: var(--paper);
}
.ktb-locked .ktb-lock-emoji {
  font-size: 1.9rem;
  line-height: 1;
  display: inline-block;
}

/* ---------- 5. Empty state: results went missing ----------
   A calm hairline card that teaches with exactly one CTA.
   The attention strip is the quiet functional red. */
.ktb-missing {
  border-top: 2px solid var(--red);
}

/* ---------- 6. Success banners (just unlocked / just Pro) ----------
   Semantic green wash, already right — just give the copy room. */
.ktb-notice {
  line-height: 1.55;
  background: var(--green-wash);
  border-color: var(--green);
}

/* ---------- 7. Focus: visible, always ----------
   Green is the focus color everywhere on this surface. */
.btn:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
input[type="checkbox"].chunky:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}
/* .field already gets a green ring in the base system; no double outline. */
.field:focus-visible {
  outline: none;
}

/* ---------- 8. Reduced motion ----------
   The wait must feel crafted, never merely animated. When the
   user asks for less motion, the sequence goes still: progress
   is still communicated (width + stage states), just instantly. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  #progress-bar,
  .skel,
  .st-running .dot,
  .spinner-dots span {
    animation: none !important;
  }
  .stage,
  .btn,
  .secpick,
  .sec-card,
  .sample-btn,
  details.ctx summary .plus {
    transition: none !important;
  }
  .btn:hover,
  .secpick:hover,
  .sec-card:hover,
  .sample-btn:hover {
    transform: none;
  }
}

/* ---------- 9. Small screens (390px is the primary layout) ----------
   Keep the narration headline and pills comfortable. */
@media (max-width: 640px) {
  #progress-label {
    font-size: 1.15rem;
  }
  .ktb-refine-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}