/* =================================================================
   Components · typography, tags, cards, lists, tables, primitives
================================================================= */

/* Typography */
.eyebrow {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 24px; height: 1px; background: currentColor;
}
h1.display {
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-h1); line-height: 1.08;
  letter-spacing: -0.028em; margin: 0;
}
h2.display {
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 1.14;
  letter-spacing: -0.022em; margin: 0;
}
h3.display {
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.32;
  letter-spacing: -0.012em; margin: 0;
}
.italic { font-style: normal; font-weight: 800; }
h1.display em, h2.display em, h3.display em {
  font-style: normal; font-weight: 800;
}
.ink-blue    { color: var(--blue-deep); }
.ink-emerald { color: var(--emerald); }
.ink-red     { color: var(--red); }
.ink-muted   { color: var(--muted); }

/* Layout primitives */
.row    { display: flex; gap: var(--sp-5); }
.grid   { display: grid; gap: var(--sp-5); }
.between{ display: flex; justify-content: space-between; }
.center { display: flex; align-items: center; justify-content: center; }
.stretch{ flex: 1; }
.stack  { display: flex; flex-direction: column; }
.gap-xs { gap: var(--sp-2); }
.gap-sm { gap: var(--sp-3); }
.gap-md { gap: var(--sp-4); }
.gap-lg { gap: var(--sp-6); }
.mono   { font-family: var(--mono); }
.serif  { font-family: var(--display); }

/* Tags */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 100px; font-family: var(--mono);
  font-size: var(--fs-xs); letter-spacing: 0.12em;
  color: var(--ink-2); background: var(--paper);
}
.tag.solid   { background: var(--ink);       color: var(--paper); border-color: var(--ink); }
.tag.blue    { background: var(--blue-deep); color: #fff;         border-color: var(--blue-deep); }
.tag.emerald { background: var(--emerald);   color: #fff;         border-color: var(--emerald); }
.tag.ghost   { background: transparent; }

/* Cards */
.card {
  background: var(--paper); border: 1px solid var(--line);
  padding: var(--sp-5); border-radius: 2px;
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative;
}
.card .num {
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-num); line-height: 1.1;
  color: var(--ink); letter-spacing: -0.02em;
}
.card h4 {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-md); letter-spacing: -0.005em; margin: 0;
}
.card p {
  font-size: var(--fs-md); font-weight: 500;
  line-height: 1.7; color: var(--ink-2); margin: 0;
  letter-spacing: -0.003em;
}

/* KPI */
.kpi {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 0; border-top: 1px solid var(--ink);
  flex: 1;
}
.kpi .v {
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-kpi); line-height: 1.1;
  letter-spacing: -0.02em;
}
.kpi .l {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}

/* Label */
.label {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}

/* Bullet lists */
.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.list li {
  position: relative;
  padding-left: calc(var(--fs-md) * 1.35);
  font-size: var(--fs-md); font-weight: 500; line-height: 1.7;
  color: var(--ink-2); letter-spacing: -0.003em;
  word-break: keep-all; overflow-wrap: break-word;
}
.list li::before {
  content: ""; width: 6px; height: 6px; background: var(--ink);
  border-radius: 50%; position: absolute; left: 4px; top: 11px;
}
.list.check li::before,
.list.arrow li::before,
.list.cross li::before {
  content: ""; width: auto; height: auto; background: none;
  font-family: var(--mono); font-weight: 600;
  position: absolute; left: 0; top: 0;
  font-size: var(--fs-sm); line-height: inherit;
}
.list.check li::before { content: "✓"; color: var(--emerald);   font-weight: 700; }
.list.arrow li::before { content: "→"; color: var(--blue-deep); }
.list.cross li::before { content: "✕"; color: var(--red); font-weight: 500; }

/* Tables */
table.tbl {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-md);
}
table.tbl th, table.tbl td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
table.tbl th {
  font-family: var(--mono); font-size: var(--fs-xs);
  font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--ink);
}
table.tbl td.num { font-family: var(--mono); }
table.tbl tr:hover td { background: var(--bg-2); }

/* Dividers */
.div-v { width: 1px; background: var(--line); align-self: stretch; }
.div-h { height: 1px; background: var(--line); width: 100%; }

/* Glossary term */
.term {
  color: var(--blue-deep);
  border-bottom: 1px dashed rgba(15, 42, 107, 0.45);
  cursor: help; padding: 0 2px;
  transition: background .15s, border-bottom-color .15s;
  font-weight: inherit; white-space: nowrap;
}
.term:hover {
  background: rgba(29, 78, 216, 0.1);
  border-bottom-color: var(--blue-deep);
  border-bottom-style: solid;
}
.term::after {
  content: "ⓘ"; font-size: 0.72em; margin-left: 2px;
  color: rgba(15, 42, 107, 0.55); font-family: var(--mono);
}