/* monad-treat.css — FedM8 "calm data" treatment.
 * Additive visual layer. Loads after page bundles; never edit sources.
 * Two ideas, one calm palette:
 *  1. Data reads as data: solicitation numbers, deadlines, dollar amounts,
 *     NAICS, match percentages and desk countdowns set in monospace.
 *  2. Single quiet accent: one muted-slate primary action per card/row;
 *     everything else goes quiet. Hairline borders, generous whitespace.
 * Walkthroughs (cert-desk guided mode) get a warm, unhurried
 * one-question-per-screen feel: warm paper, gentle progress, calm type.
 * Palette (calm): paper #faf8f5, slate #3b4a63, soft slate #5a6b85,
 * champagne #c2a878 (tiny accents only), hairline rgba(59,74,99,.14).
 */

:root {
  --mt-paper: #faf8f5;
  --mt-slate: #3b4a63;
  --mt-slate-soft: #5a6b85;
  --mt-slate-faint: #8a97ad;
  --mt-champagne: #c2a878;
  --mt-hairline: rgba(59, 74, 99, 0.14);
  --mt-hairline-soft: rgba(59, 74, 99, 0.09);
  --mt-sage: #7ba05b;
  --mt-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- 1. Data reads as data (monospace) ---------- */
/* OS app contract tiles + detail sheet */
.mt-treat .fx-pill.due,
.mt-treat .fx-card-org,
.mt-treat .fx-matchpct,
.mt-treat .fx-p-org {
  font-family: var(--mt-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

/* Open Field board */
.mt-treat .of-due,
.mt-treat .of-naics,
.mt-treat .of-amt,
.mt-treat .of-meta,
.mt-treat .of-dim b,
.mt-treat .of-verdict {
  font-family: var(--mt-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

/* Best-fit cards */
.mt-treat .bf-meta {
  font-family: var(--mt-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

/* Cert-desk tool outputs: countdowns, dates, reference numbers */
.mt-treat .cd-out {
  font-family: var(--mt-mono);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}
/* Keep prose inside outputs readable: only the data line goes mono.
   Long paragraphs inside .cd-out fall back to the page font. */
.mt-treat .cd-out p {
  font-family: inherit;
}

/* ---------- 2. Single quiet accent ---------- */
/* Primary actions keep a calm slate fill; secondaries go quiet. */
.mt-treat .of-acts a.btn.sm.ghost,
.mt-treat .of-acts .btn.ghost {
  background: transparent;
  border-color: var(--mt-hairline);
  color: var(--mt-slate-soft);
}
.mt-treat .fx-acts .fx-btn:not(.lg),
.mt-treat .cd-acts button:not(.primary) {
  color: var(--mt-slate-soft);
}

/* ---------- 3. Hairlines + breathing room ---------- */
.mt-treat article.fx-card,
.mt-treat article.of-card,
.mt-treat li.bf-card {
  border: 1px solid var(--mt-hairline-soft);
}
.mt-treat .of-card-head,
.mt-treat .fx-card-top {
  border-bottom: 1px solid var(--mt-hairline-soft);
  padding-bottom: 0.65rem;
  margin-bottom: 0.65rem;
}

/* ---------- 4. Walkthrough: warm, unhurried ---------- */
/* Guided walkthrough container gets warm paper and calm rhythm. */
.mt-treat .cd-guided.mt-walk {
  background: var(--mt-paper);
  border: 1px solid var(--mt-hairline-soft);
  border-radius: 18px;
  padding: clamp(1.25rem, 4vw, 2rem);
}

/* Step eyebrow: quiet, widely spaced, with a whisper of champagne. */
.mt-treat .mt-step-eyebrow {
  font-family: var(--mt-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mt-slate-faint);
  margin: 0 0 0.5rem;
}
.mt-treat .mt-step-bar {
  height: 3px;
  border-radius: 999px;
  background: var(--mt-hairline-soft);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.mt-treat .mt-step-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mt-champagne);
  transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Encouraging microcopy between question and options. */
.mt-treat .mt-encourage {
  color: var(--mt-slate-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0.35rem 0 1.1rem;
  max-width: 34rem;
}

/* Walkthrough option cards: rounder, softer, more air. */
.mt-treat .cd-guided.mt-walk .cd-guide-opt {
  border-radius: 16px;
  border-color: var(--mt-hairline);
  padding: 1rem 1.15rem;
}
.mt-treat .cd-guided.mt-walk .cd-guide-opt + .cd-guide-opt {
  margin-top: 0.7rem;
}

/* Result / "match" panel: calm framing for the recommendation. */
.mt-treat .mt-match {
  background: #fff;
  border: 1px solid var(--mt-hairline-soft);
  border-radius: 16px;
  padding: clamp(1.1rem, 3.5vw, 1.6rem);
}
.mt-treat .mt-match-eyebrow {
  font-family: var(--mt-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mt-slate-faint);
  margin: 0 0 0.6rem;
}

/* One primary action per walkthrough screen stays slate; keep it calm. */
.mt-treat .cd-guided.mt-walk .cd-acts button.primary {
  background: var(--mt-slate);
  border-radius: 12px;
  padding: 0.85rem 1.4rem;
}

/* Calm restyle of the lift's own stepper (no duplicate progress UI):
   champagne fill, slate dots, sage for done. */
.mt-treat section.cd .cd-lift-dot {
  background: rgba(59, 74, 99, 0.1);
  color: var(--mt-slate-soft);
}
.mt-treat section.cd .cd-lift-step.active,
.mt-treat section.cd .cd-lift-step.done {
  color: var(--mt-slate);
}
.mt-treat section.cd .cd-lift-step.active .cd-lift-dot {
  background: var(--mt-slate);
  color: #fff;
}
.mt-treat section.cd .cd-lift-step.done .cd-lift-dot {
  background: var(--mt-sage);
  color: #fff;
}
.mt-treat section.cd .cd-lift-bar {
  background: var(--mt-hairline-soft);
}
.mt-treat section.cd .cd-lift-bar i {
  background: var(--mt-champagne);
  transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- 5. Motion + small screens ---------- */
@media (prefers-reduced-motion: reduce) {
  .mt-treat .mt-step-bar > span {
    transition: none;
  }
}
@media (max-width: 560px) {
  .mt-treat .cd-guided.mt-walk {
    border-radius: 14px;
    padding: 1.1rem;
  }
}