/* =============================================================================
   MacroInsight — component kit
   -----------------------------------------------------------------------------
   The canonical vocabulary. Everything here resolves to a token in
   v2/tokens.css; there are no colour or spacing literals below this line.

   This exists because the codebase had grown 71 distinct *card* class names,
   72 *grid*, 61 *row*, and 78 across badge/chip/pill — for what is really a
   handful of components. New work uses these classes. Old classes get migrated
   surface by surface, not all at once.

   Specimen page: /styleguide

   Rules of the kit
   ----------------
   1. One card level. A .mi-card never contains another .mi-card.
   2. Spacing comes from --v2-s1..s9. No literal px in a margin, padding or gap.
   3. Numbers are tabular. Any figure a user compares down a column gets
      .mi-num so digits align.
   4. Semantic colour (bull/bear/chop) is for data only, never for chrome.
   ========================================================================== */

/* ---------------------------------------------------------------- layout -- */

.mi-stack      { display: flex; flex-direction: column; gap: var(--v2-s4); }
.mi-stack-sm   { display: flex; flex-direction: column; gap: var(--v2-s2); }
.mi-stack-lg   { display: flex; flex-direction: column; gap: var(--v2-s6); }

.mi-inline     { display: flex; align-items: center; gap: var(--v2-s2); flex-wrap: wrap; }
.mi-inline-sm  { display: flex; align-items: center; gap: var(--v2-s1); flex-wrap: wrap; }
.mi-spacer     { margin-left: auto; }

/* One grid. Column count is a custom property so callers never invent a new
   class for "the same grid but three across". */
.mi-grid {
  display: grid;
  gap: var(--v2-s4);
  grid-template-columns: repeat(var(--mi-cols, 2), minmax(0, 1fr));
}
.mi-grid-tight { gap: var(--v2-s2); }
@media (max-width: 900px) {
  .mi-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ card -- */

/* The hairline is a shadow, not a border. It costs no layout, so a card gaining
   or losing one never shifts by a pixel, and two adjacent cards do not render a
   2px seam. */
.mi-card {
  background: var(--v2-surface);
  border: 0;
  border-radius: var(--v2-r-lg);
  padding: var(--v2-s5);
  box-shadow: var(--v2-e1);
}
.mi-card-flush { padding: 0; overflow: hidden; }
.mi-card-quiet { box-shadow: var(--v2-hairline); }
.mi-card-raised { box-shadow: var(--v2-e2); }

/* A well is the one nested surface allowed inside a card — for a figure or a
   quiet grouping. It is a value step, never a second bordered card. */
.mi-well {
  background: var(--v2-sunk);
  border-radius: var(--v2-r-md);
  padding: var(--v2-s4);
}

/* --------------------------------------------------------- section header --
   Title, optional explainer, optional actions. The explainer sits on the
   title's baseline rather than its box, which is what stops it riding high
   next to a large heading, and it wraps to its own line before it squeezes. */

.mi-section-head {
  display: flex;
  align-items: baseline;
  gap: var(--v2-s3);
  flex-wrap: wrap;
  margin-bottom: var(--v2-s4);
}
.mi-section-title {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--v2-sans);
  font-size: var(--v2-t-lg);
  font-weight: 600;
  letter-spacing: var(--v2-tight);
  color: var(--v2-ink);
}
.mi-section-title-lg { font-size: var(--v2-t-2xl); letter-spacing: var(--v2-tighter); }
.mi-section-note {
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
  font-size: var(--v2-t-sm);
  line-height: 1.5;
  color: var(--v2-ink-3);
}
.mi-section-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--v2-s2);
}

/* Stacked variant — explainer always on its own row beneath the title.
   Use when the explainer is a sentence rather than a phrase.

   This is a grid, not flex, on purpose. In flex you cannot reliably force a
   wrap AND cap the measure: `width: 100%` is shrinkable so the paragraph rides
   up onto the title's line, and `flex-basis: 100%` gets clamped straight back
   down by any `max-width`, because max-width bounds the hypothetical main size
   used for line breaking. Grid states the row placement outright. */
.mi-section-head--stacked {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--v2-s3);
  row-gap: var(--v2-s2);
  flex-wrap: nowrap;
}
.mi-section-head--stacked > .mi-eyebrow-inline { grid-column: 1; }
.mi-section-head--stacked > .mi-section-title  { grid-column: 2; }
.mi-section-head--stacked > .mi-section-note   { grid-column: 1 / -1; max-width: 72ch; }
/* Title-only stacked heads still want the title in the first column. */
.mi-section-head--stacked > .mi-section-title:first-child { grid-column: 1 / -1; }
/* An eyebrow replaces the old habit of a 10px uppercase line inside the title. */
.mi-eyebrow {
  display: block;
  font-size: var(--v2-t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
  margin-bottom: var(--v2-s1);
}
/* Numbered eyebrow — mono, tabular, muted. Beautiful UI's section pattern:
   `01  Loading State   Pixel-grid loader with shimmer and elapsed time.`
   The figure stays a fixed width so a column of them lines up. */
.mi-eyebrow-num {
  flex: 0 0 auto;
  font-family: var(--v2-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink-3);
  margin-bottom: 0;
}

/* Inline variant — "QUESTION 1 · Where is the opportunity right now?". Must be
   a direct child of .mi-section-head so eyebrow, title and note all share one
   baseline. Wrapping the eyebrow and title in a div instead aligns the note to
   the eyebrow, which is the misalignment this kit exists to stop. */
.mi-eyebrow-inline {
  display: inline-block;
  flex: 0 0 auto;
  margin-bottom: 0;
  font-size: var(--v2-t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}

/* --------------------------------------------------------------- buttons -- */

.mi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-s2);
  padding: var(--v2-s2) var(--v2-s4);
  border-radius: var(--v2-r-sm);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--v2-sans);
  font-size: var(--v2-t-sm);
  font-weight: 550;
  line-height: 1.2;
  color: var(--v2-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--v2-fast) var(--v2-ease),
              border-color var(--v2-fast) var(--v2-ease),
              color var(--v2-fast) var(--v2-ease);
}
.mi-btn:focus-visible { outline: none; box-shadow: var(--v2-ring); }
.mi-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.mi-btn--primary   { background: var(--v2-accent); color: var(--v2-accent-ink); }
.mi-btn--primary:hover:not(:disabled) { background: var(--v2-accent-hover); }

.mi-btn--secondary { background: var(--v2-sunk-2); color: var(--v2-ink); box-shadow: var(--v2-e-btn); }
.mi-btn--secondary:hover:not(:disabled) { background: var(--v2-hover-2); }

.mi-btn--ghost     { color: var(--v2-ink-2); }
.mi-btn--ghost:hover:not(:disabled) { background: var(--v2-hover); color: var(--v2-ink); }

.mi-btn--danger    { background: var(--v2-bear-soft); border-color: var(--v2-bear); color: var(--v2-bear); }
.mi-btn--danger:hover:not(:disabled) { background: var(--v2-bear); color: var(--v2-canvas); }

.mi-btn--sm { padding: var(--v2-s1) var(--v2-s3); font-size: var(--v2-t-xs); }

/* --------------------------------------------- segmented / toggle control --
   Replaces the several one-off Simple/Everything and 1D/4H switches. */

.mi-segmented {
  display: inline-flex;
  padding: var(--v2-s1);
  gap: var(--v2-s1);
  background: var(--v2-sunk);
  border-radius: var(--v2-r-pill);
  box-shadow: var(--v2-hairline);
}
.mi-segmented-btn {
  padding: var(--v2-s1) var(--v2-s3);
  border: 0;
  border-radius: var(--v2-r-pill);
  background: transparent;
  font-family: var(--v2-sans);
  font-size: var(--v2-t-xs);
  font-weight: 550;
  color: var(--v2-ink-3);
  cursor: pointer;
  transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}
.mi-segmented-btn:hover { color: var(--v2-ink); }
.mi-segmented-btn[aria-pressed='true'],
.mi-segmented-btn.is-active {
  background: var(--v2-hover-2);
  color: var(--v2-ink);
  box-shadow: var(--v2-e-btn);
}
.mi-segmented-btn:focus-visible { outline: none; box-shadow: var(--v2-ring); }

/* ---------------------------------------------------------------- badges --
   One badge. Tone is a modifier. This replaces badge/chip/pill as three
   separate families that looked almost but not quite the same. */

.mi-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--v2-s1);
  padding: 2px var(--v2-s2);
  border-radius: var(--v2-r-xs);
  font-family: var(--v2-sans);
  font-size: var(--v2-t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--v2-chop-soft);
  color: var(--v2-ink-2);
}
.mi-badge--bull { background: var(--v2-bull-soft); color: var(--v2-bull); }
.mi-badge--bear { background: var(--v2-bear-soft); color: var(--v2-bear); }
.mi-badge--chop { background: var(--v2-chop-soft); color: var(--v2-chop); }
.mi-badge--warn { background: var(--v2-warn-soft); color: var(--v2-warn); }
.mi-badge--info { background: var(--v2-info-soft); color: var(--v2-info); }
.mi-badge--accent { background: var(--v2-accent-soft); color: var(--v2-accent); }
.mi-badge--pill { border-radius: var(--v2-r-pill); padding-inline: var(--v2-s2); }

.mi-dot { width: 6px; height: 6px; border-radius: var(--v2-r-pill); background: currentColor; flex: none; }

/* ----------------------------------------------------------------- stats -- */

.mi-stat { display: flex; flex-direction: column; gap: var(--v2-s1); min-width: 0; }
.mi-stat-label {
  font-size: var(--v2-t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
}
.mi-stat-value {
  font-family: var(--v2-sans);
  font-size: var(--v2-t-2xl);
  font-weight: 600;
  letter-spacing: var(--v2-tighter);
  color: var(--v2-ink);
  font-variant-numeric: tabular-nums;
}
.mi-stat-value-sm { font-size: var(--v2-t-xl); }
.mi-stat-note { font-size: var(--v2-t-sm); color: var(--v2-ink-3); }

.mi-delta { font-variant-numeric: tabular-nums; font-weight: 550; }
.mi-delta--up   { color: var(--v2-bull); }
.mi-delta--down { color: var(--v2-bear); }
.mi-delta--flat { color: var(--v2-ink-3); }

/* ----------------------------------------------------------------- table -- */

.mi-table { width: 100%; border-collapse: collapse; font-size: var(--v2-t-sm); }
.mi-table th {
  text-align: left;
  padding: var(--v2-s2) var(--v2-s3);
  background: var(--v2-sunk);
  border-bottom: 1px solid var(--v2-line);
  font-size: var(--v2-t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-ink-4);
  white-space: nowrap;
}
.mi-table td {
  padding: var(--v2-s3);
  border-bottom: 1px solid var(--v2-line);
  color: var(--v2-ink-2);
}
.mi-table tbody tr:last-child td { border-bottom: 0; }
/* Zebra striping — at 5% white it reads as rhythm, not as banding. */
.mi-table.mi-table--striped tbody tr:nth-child(even) td { background: var(--v2-stripe); }
.mi-table tbody tr:hover td { background: var(--v2-hover); }
.mi-table .mi-num,
.mi-table th.mi-num { text-align: right; }

/* Key/value rows — the "LAST UPDATE · 21:52" pattern used all over the shell. */
.mi-kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v2-s3); padding: var(--v2-s2) 0; }
.mi-kv + .mi-kv { border-top: 1px solid var(--v2-line); }
.mi-kv-key { font-size: var(--v2-t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-ink-4); }
.mi-kv-val { font-size: var(--v2-t-sm); color: var(--v2-ink); font-variant-numeric: tabular-nums; }

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

.mi-num  { font-variant-numeric: tabular-nums; }
.mi-mono { font-family: var(--v2-mono); font-variant-numeric: tabular-nums; }
.mi-h1   { margin: 0; font-size: var(--v2-t-3xl); font-weight: 650; letter-spacing: var(--v2-tighter); color: var(--v2-ink); }
.mi-h2   { margin: 0; font-size: var(--v2-t-2xl); font-weight: 600; letter-spacing: var(--v2-tighter); color: var(--v2-ink); }
.mi-h3   { margin: 0; font-size: var(--v2-t-lg);  font-weight: 600; letter-spacing: var(--v2-tight);   color: var(--v2-ink); }
.mi-body { margin: 0; font-size: var(--v2-t-md); line-height: 1.55; color: var(--v2-ink-2); }
.mi-muted{ font-size: var(--v2-t-sm); line-height: 1.5; color: var(--v2-ink-3); }

/* ---------------------------------------------------------------- states -- */

.mi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--v2-s2);
  padding: var(--v2-s8) var(--v2-s5);
  text-align: center;
  color: var(--v2-ink-3);
  font-size: var(--v2-t-sm);
}
.mi-empty-title { font-size: var(--v2-t-md); font-weight: 550; color: var(--v2-ink-2); }

.mi-skeleton {
  background: var(--v2-sunk-2);
  border-radius: var(--v2-r-xs);
  height: 1em;
  animation: mi-pulse 1.4s var(--v2-ease) infinite;
}
@keyframes mi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .mi-skeleton { animation: none; }
}

.mi-note {
  display: flex;
  gap: var(--v2-s2);
  padding: var(--v2-s3) var(--v2-s4);
  border-radius: var(--v2-r-md);
  font-size: var(--v2-t-sm);
  line-height: 1.5;
  background: var(--v2-sunk);
  color: var(--v2-ink-2);
  border-left: 2px solid var(--v2-line-2);
}
.mi-note--warn { background: var(--v2-warn-soft); border-left-color: var(--v2-warn); }
.mi-note--info { background: var(--v2-info-soft); border-left-color: var(--v2-info); }
.mi-note--bear { background: var(--v2-bear-soft); border-left-color: var(--v2-bear); }

.mi-divider { height: 1px; background: var(--v2-line); border: 0; margin: var(--v2-s5) 0; }