/*
  Vendored from ../design-system/components.css. Re-copy from there
  when the design system changes; don't edit this file directly.

  Component styles. Every value here is a reference to a token in
  tokens.css, never a literal. No box-shadow, no gradient, anywhere
  in this file, by rule. Border-radius is allowed via --ds-radius.
*/

* { box-sizing: border-box; }

body {
  background: var(--ds-color-bg);
  color: var(--ds-color-text);
  font-family: var(--ds-font-display);
}

.ds-mono { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }

.ds-text-display {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-tight);
  letter-spacing: -0.01em;
}

.ds-text-heading {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-heading);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  letter-spacing: -0.005em;
}

.ds-text-subheading {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-subheading);
  font-weight: var(--ds-weight-semibold);
  line-height: 1.4;
}

.ds-text-body {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-body);
  line-height: var(--ds-leading-body);
}

.ds-text-label {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-label);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-label);
  color: var(--ds-color-text-muted);
}

.ds-text-caption {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-caption);
  color: var(--ds-color-text-muted);
}

/* link: inline text link, underline kept for recognisability */

.ds-link {
  color: var(--ds-color-text);
  text-decoration: underline;
  text-decoration-color: var(--ds-color-border-strong);
  text-underline-offset: 3px;
  transition: color var(--ds-duration-fast) var(--ds-ease),
              text-decoration-color var(--ds-duration-fast) var(--ds-ease);
}

.ds-link:hover { color: var(--ds-color-accent); text-decoration-color: currentColor; }
.ds-link:focus-visible { outline: var(--ds-focus-ring); outline-offset: var(--ds-focus-offset); border-radius: var(--ds-radius); }

/* section: a titled block of page content. Sections are separated by
   space and their own title row, never by a full-width rule. */

.ds-section + .ds-section { margin-top: var(--ds-space-6); }

.ds-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ds-space-1-5);
  margin-bottom: var(--ds-space-2);
}

.ds-section-title {
  margin: 0;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-label);
  font-weight: var(--ds-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-label);
  color: var(--ds-color-text-muted);
}

.ds-section-meta {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1-5);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-label);
  color: var(--ds-color-text-muted);
}

/* row list: a symbol/value pair, top-bordered, no border on the first */

.ds-row-list { list-style: none; margin: 0; padding: 0; }

.ds-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--ds-row-pad-y) var(--ds-space-half);
  border-top: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-row-list > .ds-row:first-child { border-top: none; }

.ds-row .ds-row-value {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-small);
  font-variant-numeric: tabular-nums;
}

.ds-row .ds-row-value.is-positive { color: var(--ds-color-positive); }
.ds-row .ds-row-value.is-negative { color: var(--ds-color-negative); }

/* status pill. is-success / is-warning / is-danger describe a state.
   is-positive / is-negative are kept for a value's direction (up/down). */

.ds-pill {
  display: inline-block;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--ds-space-half) var(--ds-space-1-5);
  border: var(--ds-border-width) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius);
  color: var(--ds-color-text-muted);
}

.ds-pill.is-positive { color: var(--ds-color-positive); border-color: var(--ds-color-positive); }
.ds-pill.is-negative { color: var(--ds-color-negative); border-color: var(--ds-color-negative); }
.ds-pill.is-success { color: var(--ds-color-success); border-color: var(--ds-color-success); }
.ds-pill.is-warning { color: var(--ds-color-warning); border-color: var(--ds-color-warning); }
.ds-pill.is-danger { color: var(--ds-color-danger); border-color: var(--ds-color-danger); }

/* stat: the one focal number on a screen, with a line of supporting
   figures under it. Label it with .ds-section-title above the value. */

.ds-stat { margin: 0; }

.ds-stat-value {
  margin: var(--ds-space-1) 0 var(--ds-space-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-display);
  font-weight: var(--ds-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.ds-stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1-5) var(--ds-space-5);
  margin: 0;
}

.ds-stat-list dt {
  margin-bottom: var(--ds-space-half);
  font-size: var(--ds-text-caption);
  color: var(--ds-color-text-muted);
}

.ds-stat-list dd {
  margin: 0;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-small);
  font-variant-numeric: tabular-nums;
}

.ds-stat-list dd.is-positive { color: var(--ds-color-positive); }
.ds-stat-list dd.is-negative { color: var(--ds-color-negative); }

/* chart legend: swatch, name, share, one row per series. Sits beside the
   chart so reading it never depends on hover. .is-active marks the row
   whose series is hovered in the chart. */

.ds-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-half); width: max-content; }

.ds-legend li {
  display: grid;
  grid-template-columns: var(--ds-space-1) auto auto;
  align-items: center;
  column-gap: var(--ds-space-1);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-small);
}

.ds-legend-swatch { width: var(--ds-space-1); height: var(--ds-space-1); border-radius: var(--ds-radius); }

.ds-legend-value {
  min-width: 5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ds-color-text-muted);
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

.ds-legend li.is-active { font-weight: var(--ds-weight-medium); }
.ds-legend li.is-active .ds-legend-value { color: var(--ds-color-text); }

/* flag row: a .ds-row for an item that crossed a threshold. Name + status
   pill on the left; the value and a muted note naming the threshold on
   the right. The one row type that carries a second piece of text. */

.ds-flag-row { flex-wrap: wrap; gap: var(--ds-space-half) var(--ds-space-2); }

.ds-flag-row-name { display: flex; align-items: center; gap: var(--ds-space-1-5); }

.ds-flag-row .ds-pill,
.ds-flag-row .ds-row-value { white-space: nowrap; }

/* The value stays on one line, but a long note (e.g. "cap 15%, sell 174
   shares (₦23,838.00)") may wrap, so a row never pushes past a phone screen. */
.ds-flag-row-note { margin-left: var(--ds-space-1); color: var(--ds-color-text-muted); white-space: normal; }

/* buttons */

.ds-btn {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-small);
  font-weight: var(--ds-weight-medium);
  min-height: var(--ds-control-size);
  padding: var(--ds-control-pad-y) var(--ds-space-2);
  border: var(--ds-border-width) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius);
  background: transparent;
  color: var(--ds-color-text);
  cursor: pointer;
  transition: background-color var(--ds-duration-fast) var(--ds-ease),
              border-color var(--ds-duration-fast) var(--ds-ease),
              color var(--ds-duration-fast) var(--ds-ease);
}

.ds-btn:hover { background: var(--ds-color-bg-raised); }
.ds-btn:active { background: var(--ds-color-bg-overlay); }
.ds-btn:focus-visible { outline: var(--ds-focus-ring); outline-offset: var(--ds-focus-offset); }

.ds-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ds-btn:disabled:hover,
.ds-btn:disabled:active {
  background: transparent;
}

.ds-btn.is-primary {
  background: var(--ds-color-accent);
  color: var(--ds-color-accent-contrast);
  border-color: var(--ds-color-accent);
}

.ds-btn.is-primary:hover { background: var(--ds-color-accent-hover); border-color: var(--ds-color-accent-hover); }
.ds-btn.is-primary:active { background: var(--ds-color-accent-active); border-color: var(--ds-color-accent-active); }
.ds-btn.is-primary:disabled:hover,
.ds-btn.is-primary:disabled:active { background: var(--ds-color-accent); border-color: var(--ds-color-accent); }

.ds-btn.is-ghost {
  border-color: transparent;
  color: var(--ds-color-text-muted);
  padding-left: var(--ds-space-half);
  padding-right: var(--ds-space-half);
}

.ds-btn.is-ghost:hover {
  background: var(--ds-color-bg-raised);
  color: var(--ds-color-text);
}
.ds-btn.is-ghost:disabled:hover { background: transparent; color: var(--ds-color-text-muted); }

/* fields: label, control, optional help text. Underline style only.
   Add .is-error on .ds-field to flag the control and its help text. */

.ds-field { display: flex; flex-direction: column; gap: var(--ds-space-1); }

.ds-field > label {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-label);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-label);
  color: var(--ds-color-text-muted);
}

.ds-field input,
.ds-field select,
.ds-field textarea {
  background: transparent;
  border: none;
  border-bottom: var(--ds-border-width) solid var(--ds-color-border-strong);
  border-radius: 0;
  color: var(--ds-color-text);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-small);
  padding: var(--ds-control-pad-y) var(--ds-space-half);
  transition: border-color var(--ds-duration-fast) var(--ds-ease);
}

.ds-field textarea { resize: vertical; min-height: calc(var(--ds-control-size) * 3); line-height: var(--ds-leading-body); }

.ds-field input::placeholder,
.ds-field textarea::placeholder { color: var(--ds-color-text-faint); }

.ds-field input:focus,
.ds-field select:focus,
.ds-field textarea:focus {
  outline: none;
  border-bottom-color: var(--ds-color-accent);
}

/* keyboard focus also gets the ring, so it doesn't rely on a 1px line */
.ds-field input:focus-visible,
.ds-field select:focus-visible,
.ds-field textarea:focus-visible {
  outline: var(--ds-focus-ring);
  outline-offset: var(--ds-focus-offset);
}

.ds-field input:disabled,
.ds-field select:disabled,
.ds-field textarea:disabled {
  color: var(--ds-color-text-faint);
  border-bottom-style: dashed;
  cursor: not-allowed;
}

.ds-field-help {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-caption);
  color: var(--ds-color-text-muted);
  margin: 0;
}

.ds-field.is-error input,
.ds-field.is-error select,
.ds-field.is-error textarea { border-bottom-color: var(--ds-color-danger); }
.ds-field.is-error .ds-field-help { color: var(--ds-color-danger); }

/* table. .is-num right-aligns a numeric column (th and td).
   .is-interactive highlights rows on hover when rows are clickable. */

.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-small); }

.ds-table th {
  text-align: left;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ds-color-text-muted);
  font-weight: var(--ds-weight-regular);
  padding: var(--ds-control-pad-y) var(--ds-space-1-5);
  border-bottom: var(--ds-border-width) solid var(--ds-color-border-strong);
}

.ds-table td {
  padding: var(--ds-cell-pad-y) var(--ds-space-1-5);
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
}

.ds-table tr:last-child td { border-bottom: none; }

.ds-table .is-num {
  text-align: right;
  font-family: var(--ds-font-mono);
  font-variant-numeric: tabular-nums;
}

.ds-table.is-interactive tbody tr { cursor: pointer; transition: background-color var(--ds-duration-fast) var(--ds-ease); }
.ds-table.is-interactive tbody tr:hover { background: var(--ds-color-bg-raised); }

/* icon: line-weight only, no fill except small state dots */

.ds-icon {
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* topbar: was only ever written inline in docs/index.html and then
   reinvented per-project (slightly differently each time). This is the
   canonical version - markup is <div class="ds-topbar"><span class="mark">
   ...</span><nav>...links...</nav><button class="ds-theme-toggle">...
   </button></div>, three direct grid children. The unprefixed .topbar and
   .theme-toggle names still work for projects that already use them.
   Grid, not flex: with three items, justify-content: space-between only
   balances the gaps between them, so the middle one (nav) lands off the
   true center whenever the mark and the toggle aren't the same width,
   which they never are. Two equal 1fr side columns guarantee nav sits at
   the actual center of the bar instead. */

.ds-topbar,
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-sticky);
  height: var(--ds-topbar-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0 var(--ds-space-3);
  border-bottom: var(--ds-border-width) solid var(--ds-color-border);
  background: var(--ds-color-bg);
}

.ds-topbar .mark,
.topbar .mark { font-weight: var(--ds-weight-semibold); font-size: 0.98rem; letter-spacing: -0.01em; justify-self: start; white-space: nowrap; }

.ds-topbar nav,
.topbar nav { display: flex; align-items: center; gap: var(--ds-space-3); justify-self: center; min-width: 0; }

.ds-topbar .ds-theme-toggle,
.ds-topbar .theme-toggle,
.topbar .ds-theme-toggle,
.topbar .theme-toggle { justify-self: end; }

.ds-topbar nav a,
.topbar nav a {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-label);
  color: var(--ds-color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ds-duration-fast) var(--ds-ease);
}

.ds-topbar nav a:hover,
.topbar nav a:hover { color: var(--ds-color-text); }

.ds-topbar nav a:focus-visible,
.topbar nav a:focus-visible { outline: var(--ds-focus-ring); outline-offset: var(--ds-focus-offset); border-radius: var(--ds-radius); }

/* narrow screens: nav scrolls sideways instead of overflowing the bar */
@media (max-width: 640px) {
  .ds-topbar,
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 var(--ds-space-2); }

  .ds-topbar nav,
  .topbar nav {
    justify-self: stretch;
    justify-content: flex-start;
    gap: var(--ds-space-2);
    overflow-x: auto;
    scrollbar-width: none;
  }
}

.ds-theme-toggle,
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-control-size);
  height: var(--ds-control-size);
  flex-shrink: 0;
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius);
  background: transparent;
  color: var(--ds-color-text-muted);
  cursor: pointer;
  transition: color var(--ds-duration-fast) var(--ds-ease),
              border-color var(--ds-duration-fast) var(--ds-ease);
}

.ds-theme-toggle:hover,
.theme-toggle:hover { color: var(--ds-color-text); border-color: var(--ds-color-border-strong); }

.ds-theme-toggle:focus-visible,
.theme-toggle:focus-visible { outline: var(--ds-focus-ring); outline-offset: var(--ds-focus-offset); }

.ds-theme-toggle .icon-moon,
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] :is(.ds-theme-toggle, .theme-toggle) .icon-sun { display: none; }
:root[data-theme="light"] :is(.ds-theme-toggle, .theme-toggle) .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.ds-theme-toggle, .theme-toggle) .icon-sun { display: none; }
  :root:not([data-theme="dark"]) :is(.ds-theme-toggle, .theme-toggle) .icon-moon { display: block; }
}

/* motion: respect the OS setting everywhere this file adds a transition */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}