/* =========================================================================
   Buzz Guide — Digital Coach design system
   Implements design_handoff_buzz_digital_coach (README + brief §3).
   Token names are the handoff's; they drive both our components and
   Material's own chrome.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Source+Sans+3:wght@400;500;600;700&display=swap");

/* ------------------------------------------------------------------ tokens */

:root,
[data-md-color-scheme="default"] {
  --bg: #FAF8F4;
  --surface: #FFFFFF;
  --surface-2: #FCFBF8;
  --border: #E5E0D6;
  --border-soft: #F0EBE1;
  --border-2: #DCD6C9;
  --ink: #1C1B18;
  --ink-2: #33312C;
  --muted: #6E6A62;
  --muted-2: #8C877D;
  --chip-bg: #F3EFE7;
  --hover: #F6F3ED;
  --header: #1C1B18;

  --task: #A06A00;
  --knowledge: #2E7048;
  --reference: #0E6E68;
  --learning: #2A5FA8;
  --people: #6B3E9B;
  --faq: #C4501B;
  --on-faq: #FFFFFF;
  --danger: #B0322A;

  --tint-task: #FDF6E9;
  --tint-task-2: #FDF9F1;
  --tint-knowledge: #EDF6F0;
  --tint-knowledge-2: #F7FBF8;
  --tint-learning: #F2F6FB;
  --tint-danger: #FCEDEA;
  --tint-faq: #FDF1EA;

  --task-line: color-mix(in srgb, var(--task) 20%, transparent);
  --knowledge-line: color-mix(in srgb, var(--knowledge) 20%, transparent);
  --faq-line: color-mix(in srgb, var(--faq) 20%, transparent);

  --shadow-rest: 0 1px 2px rgba(28, 27, 24, .05);
  --shadow-hover: 0 8px 24px rgba(28, 27, 24, .09);
  --shadow-drawer: -18px 0 44px rgba(28, 27, 24, .13);
  --shadow-drop: 0 18px 42px rgba(28, 27, 24, .18);
}

[data-md-color-scheme="slate"] {
  --bg: #15140F;
  --surface: #1F1D18;
  --surface-2: #1A1914;
  --border: #33302A;
  --border-soft: #2B2823;
  --border-2: #3B372F;
  --ink: #F4F1E9;
  --ink-2: #DAD5C9;
  --muted: #A29D91;
  --muted-2: #8B867C;
  --chip-bg: #2A2721;
  --hover: #26231D;
  --header: #0F0E0B;

  --task: #E0A63F;
  --knowledge: #78C494;
  --reference: #59BDB4;
  --learning: #84ADEC;
  --people: #BB92E4;
  --faq: #F2874C;
  --on-faq: #15140F;
  --danger: #F0897E;

  --tint-task: #2C2416;
  --tint-task-2: #241F17;
  --tint-knowledge: #15241B;
  --tint-knowledge-2: #18221C;
  --tint-learning: #161E2A;
  --tint-danger: #2C1917;
  --tint-faq: #2E1D14;

  --task-line: color-mix(in srgb, var(--task) 27%, transparent);
  --knowledge-line: color-mix(in srgb, var(--knowledge) 27%, transparent);
  --faq-line: color-mix(in srgb, var(--faq) 27%, transparent);
}

/* Map onto Material's own variables so stock chrome follows the system. */
[data-md-color-scheme] {
  --md-primary-fg-color: var(--header);
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: var(--faq);
  --md-default-bg-color: var(--bg);
  --md-typeset-color: var(--ink-2);
  --md-typeset-a-color: var(--faq);
  --md-default-fg-color--light: var(--muted);
  --md-default-fg-color--lighter: var(--muted-2);
  --md-default-fg-color--lightest: var(--border);
  --md-code-bg-color: var(--hover);
  --md-text-font: "Source Sans 3";
  --md-code-font: "SFMono-Regular", ui-monospace, monospace;
}

/* -------------------------------------------------------------- typography */

body, .md-typeset { font-family: "Source Sans 3", system-ui, sans-serif; }

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.coach-serif {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.md-typeset h1 { font-size: 2.125rem; line-height: 1.15; margin: 0 0 .3rem; }
.md-typeset h2 { font-size: 1.375rem; line-height: 1.3; margin: 2rem 0 .7rem; }
.md-typeset h3 { font-size: 1.1875rem; }
.md-typeset { font-size: .96875rem; line-height: 1.65; }
.md-typeset p { margin: 0 0 .85rem; }

.kicker {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .55rem;
}
.kicker--task { color: var(--task); }
.kicker--knowledge { color: var(--knowledge); }
.kicker--faq { color: var(--faq); }
.kicker svg { width: 1em; height: 1em; }

/* ------------------------------------------------------------------ header */

.md-header { background: var(--header); box-shadow: none; }
.md-header__title { font-weight: 600; }
.md-tabs { background: var(--header); }

/* The header bar carries ten destinations, which is more than the content
   column is wide. Let the header and the tab bar use the window instead — both
   together, so the logo, the tabs and the search field stay on one left edge —
   and trim the tab metrics enough to clear a 1280px laptop. */
.md-header__inner,
.md-tabs .md-grid { max-width: none; margin-inline: 0; padding-inline: .9rem; }

.md-tabs__link { font-size: .72rem; opacity: .72; padding-bottom: .3rem; }
.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  opacity: 1;
  font-weight: 600;
  background: rgba(255, 255, 255, .12);
  border-radius: .35rem;
}
.md-tabs__item { padding: 0 .12rem; }
.md-tabs__item .md-tabs__link { padding-inline: .34rem; }
/* The tab bar doubles as the phase map: category colour underlines.
   Keyed on the section stamped onto the tab bar by hooks/coach.py, not on
   position, so inserting a tab anywhere cannot silently reassign the colours. */
.md-tabs__item--active { box-shadow: inset 0 -2px 0 var(--task); }
.md-tabs[data-section="faq"] .md-tabs__item--active { box-shadow: inset 0 -2px 0 var(--faq); }
.md-tabs[data-section="knowledge"] .md-tabs__item--active { box-shadow: inset 0 -2px 0 var(--knowledge); }

.md-search__form { border-radius: .5rem; background: rgba(255, 255, 255, .12); }
.md-search__input::placeholder { color: rgba(255, 255, 255, .6); }

/* Coach button, injected beside search (design §2.8 — they are siblings). */
.coach-open {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--faq);
  color: var(--on-faq);
  border: 0;
  border-radius: .55rem;
  padding: .38rem .7rem;
  margin-left: .5rem;
  font: 600 .8rem/1 "Source Sans 3", sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.coach-open svg { width: 1.05em; height: 1.05em; stroke: currentColor; }
.coach-open:hover { filter: brightness(1.08); }
/* On narrow screens the label goes; the button must never widen the header,
   because a header wider than the viewport scrolls the whole document. */
@media screen and (max-width: 59.9375em) {
  .coach-open span { display: none; }
  .coach-open { padding: .38rem .45rem; margin-left: .15rem; }
}

/* ------------------------------------------------------------------- shell */

.md-main__inner { margin-top: 1.6rem; }
.md-content__inner { padding-top: .4rem; }
.md-content__inner::before { display: none; }

.breadcrumb {
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: .6rem;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--faq); }
.breadcrumb b { color: var(--ink); font-weight: 500; }

.facts {
  font-size: .84rem;
  color: var(--muted);
  margin: 0 0 1.4rem;
}

.page-foot {
  margin-top: 2.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: .78rem;
  color: var(--muted);
}

/* ------------------------------------------------------------- admonitions */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-2);
  border-radius: .375rem;
  box-shadow: none;
  font-size: .9rem;
  line-height: 1.55;
  background: var(--surface);
  margin: 1.1rem 0;
}
.md-typeset .admonition > .admonition-title {
  background: transparent;
  margin: 0;
  padding: .75rem .95rem .1rem;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
}
.md-typeset .admonition > .admonition-title::before { display: none; }
.md-typeset .admonition > .admonition-title + * { margin-top: .35rem; }
.md-typeset .admonition > :last-child { margin-bottom: .75rem; }
.md-typeset .admonition > p,
.md-typeset .admonition > ul,
.md-typeset .admonition > ol { padding-inline: .95rem; }

.md-typeset .note { border-left-color: var(--learning); background: var(--tint-learning); }
.md-typeset .note > .admonition-title { color: var(--learning); }
.md-typeset .info { border-left-color: var(--learning); background: var(--tint-learning); }
.md-typeset .info > .admonition-title { color: var(--learning); }
.md-typeset .warning { border-left-color: var(--task); background: var(--tint-task); }
.md-typeset .warning > .admonition-title { color: var(--task); }
.md-typeset .danger { border-left-color: var(--danger); background: var(--tint-danger); }
.md-typeset .danger > .admonition-title { color: var(--danger); }
.md-typeset .success,
.md-typeset .tip { border-left-color: var(--knowledge); background: var(--tint-knowledge); }
.md-typeset .success > .admonition-title,
.md-typeset .tip > .admonition-title { color: var(--knowledge); }

/* Why this matters — the emphasis banner (front matter emphasis: high). */
.md-typeset .whymatters {
  background: var(--tint-faq);
  border: 1px solid var(--faq-line);
  border-left: 4px solid var(--faq);
  border-radius: .5rem;
  padding: .2rem 0 .3rem;
  margin: 1.3rem 0 1.5rem;
}
.md-typeset .whymatters > .admonition-title {
  color: var(--faq);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
  padding-top: .85rem;
}
.md-typeset .whymatters p { font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.md-typeset .whymatters > p:first-of-type::first-line { font-weight: 700; }

/* Steps at a glance — the two-click payoff. */
.md-typeset .steps {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--task);
  border-radius: .625rem;
  box-shadow: var(--shadow-rest);
  padding: .35rem 0 .5rem;
  margin: 1.4rem 0;
}
.md-typeset .steps > .admonition-title {
  color: var(--task);
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .1em;
  padding: .95rem 1.3rem .2rem;
}
.md-typeset .steps ol {
  margin: .5rem 0 .3rem;
  padding-left: 2.6rem;
  font-size: .97rem;
  line-height: 1.5;
}
.md-typeset .steps li { margin-bottom: .55rem; }
.md-typeset .steps li::marker { color: var(--task); font-weight: 700; }
.md-typeset .steps a { color: var(--ink-2); text-decoration: none; }
.md-typeset .steps a:hover { color: var(--task); text-decoration: underline; }

/* Your team decides — decision-guide banner. */
.md-typeset .decides {
  background: var(--tint-learning);
  border: 1px solid color-mix(in srgb, var(--learning) 22%, transparent);
  border-left: 4px solid var(--learning);
  border-radius: .5rem;
}
.md-typeset .decides > .admonition-title {
  color: var(--learning);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .08em;
}

/* ------------------------------------------------------------------- rail */

.md-sidebar--secondary { width: 18rem; }
@media screen and (min-width: 76.25em) {
  .md-main__inner > .md-content { max-width: 46rem; }
}
/* Reading surfaces: one column, the brief's 820px measure. */
.md-content:has(.q-list) .md-content__inner,
.md-content:has(.knowledge-body) .md-content__inner,
.md-content:has(.minimap) .md-content__inner { max-width: 51.25rem; }
.rail { padding: 0 0 2rem; }
.rail__group + .rail__group { margin-top: .9rem; }
.rail__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: .9rem 1rem;
  box-shadow: var(--shadow-rest);
}
.rail__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.rail__list { list-style: none; margin: 0; padding: 0; font-size: .87rem; line-height: 1.45; }
.rail__list li + li { margin-top: .5rem; }
.rail__list a { color: var(--ink-2); text-decoration: none; }
.rail--reference .rail__label { color: var(--reference); }
.rail--reference .rail__list a:hover { color: var(--reference); }
.rail--knowledge .rail__label { color: var(--knowledge); }
.rail--knowledge .rail__list a:hover { color: var(--knowledge); }
.rail--faq .rail__label { color: var(--faq); }
.rail--faq .rail__list a:hover { color: var(--faq); }
.rail--people .rail__label { color: var(--people); }
.rail--people .rail__list a:hover { color: var(--people); }
.rail--people .rail__list li { color: var(--muted); }
.rail--people .rail__list strong { color: var(--ink-2); font-weight: 600; }

/* ------------------------------------------------------------------- home */

.home { max-width: 67.5rem; margin: 0 auto; padding: 1rem .5rem 4rem; }
.home__promise {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 2.5rem;
  max-width: 30ch;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  color: var(--ink);
  margin: 0 0 1.8rem;
}
.access { display: flex; gap: .75rem; max-width: 45rem; margin-bottom: 3.5rem; }
.access__field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: .8rem .95rem;
  cursor: text;
  color: var(--muted);
  font-size: .95rem;
}
.access__field svg { width: 1.06rem; height: 1.06rem; stroke: var(--muted); flex: none; }
.access__field:hover { border-color: var(--border-2); }
.access__coach {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--faq);
  color: var(--on-faq);
  border: 0;
  border-radius: .625rem;
  padding: .8rem 1.25rem;
  font: 600 .94rem/1 "Source Sans 3", sans-serif;
  cursor: pointer;
}
.access__coach svg { width: 1.05em; height: 1.05em; stroke: currentColor; }
.access__coach:hover { filter: brightness(1.08); }

.section-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .9rem;
}

.map { display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem; }
.phase {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--task);
  border-radius: .625rem;
  padding: 1.125rem 1.125rem 1rem;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: var(--shadow-rest);
}
.phase:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.phase__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.phase__no {
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--task);
}
.phase__count {
  font-size: .72rem;
  background: var(--chip-bg);
  color: var(--muted);
  border-radius: 1.25rem;
  padding: .125rem .55rem;
}
.phase__name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .3rem;
}
.phase__blurb { font-size: .84rem; line-height: 1.5; color: var(--muted); }

.intent { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 2.125rem; }
.intent__tile {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: .9rem 1rem;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.intent__tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.intent__tile svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .1rem; }
.intent__label { display: block; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.intent__sub { display: block; font-size: .8rem; color: var(--muted); line-height: 1.35; margin-top: .1rem; }
.intent__tile > span { min-width: 0; }
.intent--faq { background: var(--tint-faq); border-color: var(--faq-line); }
.intent--faq .intent__label { color: var(--faq); }
.intent--faq svg { stroke: var(--faq); }
.intent--knowledge svg { stroke: var(--knowledge); }
.intent--learning svg { stroke: var(--learning); }
.intent--people svg { stroke: var(--people); }
.intent--change svg { stroke: var(--reference); }
.intent--change .intent__label { color: var(--reference); }
.intent__img { width: 1.7rem; height: auto; flex: none; margin: -.15rem 0 0 -.15rem; }
.intent--berd { background: var(--tint-learning); }
.intent--berd .intent__label { color: var(--people); }
.kicker--people { color: var(--people); }
.kicker__img { width: 1.4rem; height: auto; }
.md-tabs[data-section="people"] .md-tabs__item--active { box-shadow: inset 0 -2px 0 var(--people); }

.home__foot { margin-top: 2.5rem; font-size: .84rem; color: var(--muted); }
.home__foot a { color: var(--muted); text-decoration: none; }
.home__foot a:hover { color: var(--faq); }

/* --------------------------------------------------------- phase index page */

.minimap { display: flex; gap: .1875rem; margin: 0 0 .5rem; }
.minimap__seg {
  height: .25rem;
  border-radius: .1875rem;
  background: var(--border);
  flex: 1;
}
.minimap__seg--active { background: var(--faq); flex: 2.2; }
.minimap__caption { font-size: .78rem; color: var(--muted); margin-bottom: 1.6rem; }
.minimap__caption b { color: var(--ink); font-weight: 600; }

.task-cards { display: grid; gap: .875rem; grid-template-columns: repeat(2, 1fr); }
.md-typeset .grid.cards.tasks > ul > li,
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--border);
  border-radius: .625rem;
  box-shadow: var(--shadow-rest);
  background: var(--surface);
  transition: transform .12s ease, box-shadow .12s ease;
}
.md-typeset .grid.cards.tasks > ul > li { border-left: 3px solid var(--task); }
.md-typeset .card__no {
  display: inline-block;
  min-width: 1.9rem;
  margin-right: .5rem;
  padding: .05rem .4rem;
  border-radius: 1rem;
  background: var(--tint-task);
  color: var(--task);
  font: 700 .72rem/1.5 "Source Sans 3", sans-serif;
  letter-spacing: .04em;
  text-align: center;
  vertical-align: .1em;
}
.md-typeset .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.md-typeset .card__head > a { min-width: 0; }
.md-typeset .card__steps {
  flex: none;
  font-size: .72rem;
  font-weight: 400;
  background: var(--chip-bg);
  color: var(--muted);
  border-radius: 1.25rem;
  padding: .125rem .55rem;
  margin-top: .15rem;
  white-space: nowrap;
}
.nav-no { display: inline-block; min-width: 1.6rem; margin-right: .2rem; color: var(--task); font-weight: 700; font-size: .72rem; }
.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-2);
}

/* -------------------------------------------------------------- knowledge */

.knowledge-body {
  border-left: 3px solid var(--knowledge);
  padding-left: 1.25rem;
}
.knowledge-body > p:first-of-type { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.knowledge-body h2 { font-size: 1.25rem; }

.do-it {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--tint-task-2);
  border: 1px solid var(--task-line);
  border-left: 3px solid var(--task);
  border-radius: .5rem;
  padding: .85rem 1rem;
  margin: 1.6rem 0 0;
}
.do-it__kicker {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--task);
}
.do-it__link a { font-size: .97rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.do-it__link a:hover { color: var(--task); }

.md-typeset .tabbed-set > label { font-size: .82rem; color: var(--muted); }
.md-typeset .tabbed-set > input:checked + label {
  color: var(--knowledge);
  border-color: var(--knowledge);
}
.md-typeset .tabbed-content {
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 .5rem .5rem;
  padding: .9rem 1.1rem;
  background: var(--surface);
}
.md-typeset .tabbed-labels { background: var(--hover); border-radius: .5rem .5rem 0 0; padding: 0 .4rem; }

/* -------------------------------------------------------------------- FAQ */

.filter {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 30rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: .6rem .8rem;
  margin: .9rem 0 1.3rem;
}
.filter svg { width: 1rem; height: 1rem; flex: none; }
.filter input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  width: 100%;
  outline: none;
}
.filter--faq svg { stroke: var(--faq); }
.filter--knowledge svg { stroke: var(--knowledge); }
.filter__clear {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 .8rem/1 "Source Sans 3", sans-serif;
  cursor: pointer;
}
.count-line { font-size: .84rem; color: var(--muted); margin-bottom: .2rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; }
.chips a {
  font-size: .82rem;
  border-radius: 1.25rem;
  padding: .28rem .8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
}
.chips a:hover { border-color: var(--faq-line); color: var(--faq); }
.chips a.is-active { background: var(--tint-faq); border-color: var(--faq-line); color: var(--faq); }

.q-list { display: grid; gap: .75rem; }
.q-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: 1.05rem 1.25rem;
  box-shadow: var(--shadow-rest);
}
.md-typeset .q-card__q { margin: 0; font-size: 1.1875rem; }
.q-card__toggle {
  display: flex;
  width: 100%;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.q-card__sign { color: var(--faq); font-size: 1.1rem; line-height: 1; flex: none; }
.q-card__sign::before { content: "+"; }
.q-card__toggle[aria-expanded="true"] .q-card__sign::before { content: "−"; }
.md-typeset .q-card__short {
  margin: .55rem 0 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.q-card__short strong { font-weight: 700; color: var(--ink); }
.q-card__detail {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border-soft);
  animation: fade .18s ease;
}
.q-card__detail > p > strong:first-child {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .15rem;
}
.q-card__badge {
  display: inline-block;
  margin-top: .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--chip-bg);
  color: var(--muted);
  border-radius: .25rem;
  padding: .1rem .45rem;
}
.q-card[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.empty-state {
  background: var(--tint-faq);
  border: 1px solid var(--faq-line);
  border-radius: .625rem;
  padding: 1.1rem 1.25rem;
  font-size: .92rem;
}
.empty-state button {
  border: 0;
  background: var(--faq);
  color: var(--on-faq);
  border-radius: .4rem;
  padding: .4rem .8rem;
  font: 600 .85rem/1 "Source Sans 3", sans-serif;
  cursor: pointer;
  margin-top: .6rem;
}

/* --------------------------------------------------------------- decisions */

.decision {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: 1.1rem 1.25rem;
  margin: .875rem 0;
  box-shadow: var(--shadow-rest);
}
.md-typeset .decision__q {
  margin: 0 0 .6rem;
  font-size: 1.1875rem;
  color: var(--ink);
}
.md-typeset .decision__q::before {
  content: "Decision";
  display: block;
  font-family: "Source Sans 3", sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--learning);
  margin-bottom: .25rem;
}
.decision__body { font-size: .93rem; }
.decision__body > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ coach drawer */

.coach {
  position: fixed;
  top: 2.4rem;
  right: 0;
  bottom: 0;
  width: 26.25rem;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-drawer);
  display: flex;
  flex-direction: column;
  z-index: 12;
  transform: translateX(1.5rem);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.coach.is-open { transform: none; opacity: 1; pointer-events: auto; }
.coach__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem .9rem .7rem;
  border-bottom: 1px solid var(--border-soft);
}
.coach__title { font-weight: 700; color: var(--ink); font-size: .95rem; }
.coach__head svg { width: 1.05rem; height: 1.05rem; stroke: var(--faq); }
.coach__context {
  background: var(--chip-bg);
  color: var(--muted);
  border-radius: 1.25rem;
  padding: .15rem .6rem;
  font-size: .76rem;
  max-width: 10.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coach__close {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
}
.coach__map { padding: .7rem .9rem .55rem; background: var(--surface-2); border-bottom: 1px solid var(--border-soft); }
.coach__strip { display: flex; gap: .1875rem; position: relative; }
.coach__seg { height: .25rem; border-radius: .1875rem; background: var(--border); flex: 1; transition: background .14s ease; }
.coach__seg--active { background: var(--faq); flex: 2.2; }
.coach__seg:hover { background: var(--ink); }
.coach__tip {
  position: absolute;
  bottom: 100%;
  transform: translate(-50%, -5px);
  background: var(--header);
  color: #fff;
  font-size: .72rem;
  border-radius: 1.25rem;
  padding: .15rem .55rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}
.coach__tip.is-on { opacity: 1; transform: translate(-50%, -9px); }
.coach__caption { font-size: .72rem; color: var(--muted); margin-top: .45rem; }
.coach__caption b { color: var(--ink); }
.coach__log { flex: 1; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .7rem; }
.bubble {
  border-radius: .75rem;
  padding: .75rem .875rem;
  font-size: .9rem;
  line-height: 1.6;
  animation: fade .18s ease;
}
.bubble--bot { background: var(--surface); border: 1px solid var(--border); max-width: 92%; align-self: flex-start; color: var(--ink-2); }
.bubble--user { background: var(--ink); color: var(--surface); max-width: 82%; align-self: flex-end; }
.bubble p { margin: 0 0 .5rem; }
.bubble p:last-child { margin: 0; }
.bubble ol { margin: .3rem 0 .5rem; padding-left: 1.2rem; }
.bubble--thinking p { color: var(--muted); font-style: italic; }
.bubble--thinking { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.bubble ul { margin: .3rem 0 .5rem; padding-left: 1.1rem; }
.bubble code {
  background: var(--hover);
  border-radius: .2rem;
  padding: 0 .25em;
  font-size: .92em;
}

.cites { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.cite {
  font-size: .74rem;
  border-radius: 1.25rem;
  padding: .15rem .55rem;
  text-decoration: none;
  border: 1px solid;
  cursor: pointer;
}
.coach__chips { display: flex; gap: .35rem; overflow-x: auto; padding: .55rem .9rem; border-top: 1px solid var(--border-soft); }
.coach__chips button {
  white-space: nowrap;
  font-size: .78rem;
  border-radius: 1.25rem;
  padding: .28rem .7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.coach__compose { display: flex; gap: .4rem; padding: .7rem .9rem .9rem; border-top: 1px solid var(--border-soft); }
.coach__compose input {
  flex: 1;
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: .5625rem;
  padding: .55rem .7rem;
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  outline: none;
}
.coach__send {
  border: 0;
  background: var(--faq);
  color: var(--on-faq);
  border-radius: .5625rem;
  padding: 0 .9rem;
  font: 600 .85rem/1 "Source Sans 3", sans-serif;
  cursor: pointer;
}


/* --------------------------------------------------------------- responsive */

@media screen and (max-width: 76.1875em) {
  .map { grid-template-columns: repeat(2, 1fr); }
  .intent { grid-template-columns: repeat(2, 1fr); }
  .rail { margin-top: 2rem; }
}
@media screen and (max-width: 44.9375em) {
  .home__promise { font-size: 2rem; }
  .access { flex-direction: column; }
  .map, .intent { grid-template-columns: 1fr; }
  .coach { top: 0 !important; width: 100vw; }
}

/* Standalone /coach/ page — the drawer becomes the page, at any width.
   Declared last so it wins over the drawer's responsive rules. */
.coach-standalone { max-width: 34rem; margin: 0 auto; }
.coach-standalone .coach {
  position: static;
  width: auto;
  max-width: 100%;
  height: 70vh;
  top: auto !important;
  border: 1px solid var(--border);
  border-radius: .875rem;
  box-shadow: var(--shadow-rest);
  transform: none;
  opacity: 1;
  pointer-events: auto;
}