/* ── Views ───────────────────────────────────────────────────────────── */
main > section { display: none; }
main > section[data-current] { display: block; }

/* Grid rather than a wrapper element: the title and its subtitle stack in one
   column while the stepper spans both rows beside them. */
main > section > header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: var(--space-regular);
}
main > section > header h1 {
  grid-area: 1 / 1;
  font-size: var(--fs-huge);
  line-height: 28px;
}
main > section > header > p:not(.stepper) {
  grid-area: 2 / 1;
  color: var(--muted);
  font-size: var(--fs-medium);
  line-height: 20px;
}
.stepper {
  grid-area: 1 / 2 / 3 / 3;
  display: flex;
}
/* Matched to the sidebar buttons so the two line up across the shell. */
.stepper button { width: var(--control-size); }
.stepper button + button { border-left: none; }

/* Only on the two views whose figures are relative to the basis; Movements
   says so in its own caption, and Settings is not affected at all.
   Reserves its height so applying a filter does not shift the page. */
.note {
  color: var(--warning);
  font-size: var(--fs-small);
  margin: 0 0 var(--space-small);
  min-height: 1lh;
}

/* ── Verdict ─────────────────────────────────────────────────────────── */
[data-state] {
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}
[data-state=undercut] { color: var(--critical); }
[data-state=alone],
[data-state=underpriced] { color: var(--warning); }
[data-state=competitive] { color: var(--good); }
[data-state=full],
[data-state=no_rivals],
[data-state=no_fit],
[data-state=no_match],
[data-state=no_data] { color: var(--neutral); }