/* ============================================================
   primitives.css — CROSS-MEDIUM primitives
   ------------------------------------------------------------
   Pieces that work in ANY medium (deck, document, social):
   emphasis helpers and charts. They consume only the token
   contract (tokens.css) and contain no canvas/print rules, so
   they can never collide with a medium engine's @page setup.

   Link order in every artifact:
     tokens.css → primitives.css → <medium>-core.css → brand
   ============================================================ */

/* ---------- Emphasis helpers (the house headline devices) ----------
   Bold-then-dim:    <h2>Anchor. <span class="dim">extension.</span></h2>
   Italic-accent:    <h2>The portfolio <em class="accent">in motion</em>.</h2> */
.dim    { color: var(--c-muted); font-weight: 300; }
.accent { color: var(--c-accent); }

/* ============================================================
   CHART — reusable, on-token, print-safe (no JS)
   ------------------------------------------------------------
   Column bars for comparisons/trends; horizontal bars (hbars)
   for ranked lists or shares. Colours come from the contract;
   highlight a key series with the --accent / --ink modifiers.
   Bar size is driven by a --h (column) or --w (horizontal)
   custom property set inline, e.g. style="--h:90%".
   For line charts (J-curve etc.) use inline SVG with
   style="stroke:var(--c-fg)" — see COMPONENTS.md.
   ============================================================ */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--s-6);
  height: 360px;
  border-bottom: 1px solid var(--c-fg);
}
.bar-chart__col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}
.bar-chart__val {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--c-fg);
}
.bar-chart__bar {
  width: 100%;
  max-width: 140px;
  height: var(--h, 50%);
  background: var(--c-shade-24);
}
.bar-chart__bar--accent { background: var(--c-accent); }
.bar-chart__bar--ink    { background: var(--c-fg); }
.bar-chart__axis { display: flex; gap: var(--s-6); margin-top: 12px; }
.bar-chart__axis > * {
  flex: 1; text-align: center;
  font-size: var(--fs-10); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-muted);
}

/* Horizontal bars — ranked lists / shares */
.hbars { display: flex; flex-direction: column; }
.hbar {
  display: grid;
  grid-template-columns: 240px 1fr 110px;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-shade-24);
}
.hbar__label { font-size: var(--fs-18); color: var(--c-fg); }
.hbar__label small { display: block; font-size: 12px; color: var(--c-muted); }
.hbar__track { height: 10px; background: var(--c-shade-12); }
.hbar__fill  { height: 100%; width: var(--w, 50%); background: var(--c-accent); }
.hbar__val   { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--c-fg); }