/* ============================================================
   Gantry web — base styles + web-specific components.
   Design tokens come from /ui/tokens.css and shared component
   classes from /ui/components.css (loaded first in index.html).
   ============================================================ */

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--brand); color: var(--on-brand); }

/* Editorial focus contract (STYLE-CONTRACT rule 7). Screen-specific rules
   (e.g. the explore drawer's inset row ring) are more specific and win. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* Numerics — wherever you use a `mono` class, tabular figures get used */
.mono, .num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" on, "zero" on;
  letter-spacing: 0;
}

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Web-specific primitives (generic .cg-* primitives moved to
   /ui/components.css on 2026-07-05)
   ============================================================ */

/* Tables */
.cg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cg-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--bg-1);
  position: sticky; top: 0; z-index: 1;
}
.cg-table tbody td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.cg-table tbody tr { transition: background .12s var(--ease); }
.cg-table tbody tr:hover { background: var(--bg-hover); cursor: pointer; }

/* Sortable header */
.cg-sortable {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
}
.cg-sortable:hover { color: var(--fg-2); }
.cg-sort-icon { opacity: .5; }
.cg-sort-active .cg-sort-icon { opacity: 1; color: var(--fg); }

/* Sparkline canvas wrapper */
.cg-spark { display: inline-block; vertical-align: middle; }

/* Coverage bar */
.cg-cov-bar {
  position: relative;
  height: 6px;
  background: var(--bg-3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cg-cov-fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: var(--r-pill);
  transition: width .3s var(--ease);
}

/* Top nav links — quiet text links (editorial 2026-08-04: the boxed
   segmented-control look is gone; the active item reads by ink alone). */
.cg-nav-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: var(--r-xs);
  color: var(--fg-3);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  background: transparent;
  transition: color .12s var(--ease);
}
.cg-nav-link:hover { color: var(--fg); }
.cg-nav-link[data-active="true"] {
  color: var(--fg);
}