/* ===========================================================
   Thesis A — Data catalogue styles
   =========================================================== */

/* ---- Data table ----
   Type system: TEXT columns use Inter at body size; NUMERIC / DATE / CODE
   columns use Geist Mono at the same size with tabular-nums. Only two
   families. Headers are eyebrow-small-caps. No inline font overrides. */
.data-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* overflow-x:auto (was `hidden`) so a table wider than its container scrolls horizontally on narrow
     screens instead of clipping columns off-screen (mobile fix); corners still clip via border-radius. */
  overflow-x: auto;
  background: var(--surface-raised);
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font: var(--type-body);
  font-feature-settings: 'cv11';
}
/* Type sizes: TWO sizes only inside a table.
   · Header rows: 12.5 px, weight 600, slightly muted colour.
   · Body cells (text, numeric, link): 13 px, weight 400 (link 500).
   Same Inter family throughout. Hierarchy through weight + colour, not size. */
.data-table th, .data-table td {
  padding: 0 var(--space-3);
  height: var(--row-height);
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
  line-height: 1.4;
}
/* Header: SAME size and family as body. Hierarchy is just weight (600 vs
   400) and a slightly muted colour. Reads as one type system. */
.data-table thead th {
  position: sticky; top: 0;
  background: var(--surface-sunken);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border-strong);
  border-right: 1px solid var(--border);
  height: 32px;
  user-select: none;
  z-index: 1;
}
.data-table thead th:last-child { border-right: 0; }

/* Column resize handle — visible at rest as a faint gridline so users can
   discover it. Thickens + colours on hover. The handle's hit box is wider
   than the line for easier targeting. */
.data-table thead th .col-resize {
  position: absolute;
  top: 4px; bottom: 4px; right: -4px;
  width: 8px;
  cursor: col-resize;
  z-index: 2;
}
.data-table thead th .col-resize::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 3px;
  width: 2px;
  background: var(--border-strong);
  border-radius: 1px;
  transition: background var(--motion-micro) var(--ease), width var(--motion-micro) var(--ease);
}
.data-table thead th .col-resize:hover::after,
.data-table thead th .col-resize.is-dragging::after {
  background: var(--color-accent);
  width: 3px;
  left: 2px;
}
.data-table.is-resizing { table-layout: fixed; user-select: none; cursor: col-resize; }
.data-table tbody tr { transition: background var(--motion-micro) var(--ease); }
.data-table tbody tr:hover { background: var(--surface-hover); }
.data-table tbody tr.is-selected { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.data-table tbody tr.is-selected:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.data-table tbody tr:last-child td { border-bottom: 0; }

/* All "value" cells (dates, IDs, numbers) use the same Inter at the same
   size as plain text — just with tabular + lining figures for alignment.
   Same body size everywhere (13 px), no font swap. */
.data-table .mono,
.data-table td.mono {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: var(--ink);
}
.data-table .data-table__num,
.data-table td.data-table__num,
.data-table td.data-table__num.mono {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  text-align: right;
  color: var(--ink);
}
.data-table__check, .data-table__actions { width: 32px; text-align: center; }

.data-table__link {
  color: var(--ink);
  font: 500 13px/1.4 var(--font-ui);
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-standard) var(--ease), color var(--motion-standard) var(--ease);
}
.data-table__link:hover { border-color: var(--color-accent); color: var(--color-accent-readable); }

.data-table__sortable {
  cursor: pointer;
  transition: color var(--motion-standard) var(--ease);
  display: inline-flex; align-items: center; gap: 4px;
}
.data-table__sortable:hover { color: var(--ink); }
.data-table__sort-icon { width: 12px; height: 12px; opacity: 0.5; }
.data-table__sortable--active { color: var(--ink); }
.data-table__sortable--active .data-table__sort-icon { opacity: 1; color: var(--color-accent); }
/* Header cells with sortable should align their flex content */
.data-table thead th.data-table__sortable { display: table-cell; }
.data-table thead th.data-table__sortable > * { display: inline-flex; align-items: center; gap: 4px; }

.data-table__total td {
  background: var(--surface-sunken);
  font: 600 13px/1.4 var(--font-ui);
  border-top: 1px solid var(--border-strong);
  color: var(--ink);
}
.data-table__total td.mono {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.data-table__total td.data-table__num,
.data-table__total td.data-table__num.mono {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ---- Inline edit ---- */
.inline-edit {
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: var(--radius-sm);
  cursor: text;
  transition: background var(--motion-micro) var(--ease), box-shadow var(--motion-micro) var(--ease);
}
.inline-edit:hover { background: var(--surface-hover); }
.inline-edit:focus { outline: none; background: var(--surface-raised); box-shadow: var(--shadow-focus); }
.inline-edit--num { font-family: var(--font-mono); text-align: right; }

/* ---- Bulk bar ---- */
.bulk-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-md);
}
.bulk-bar__count strong { color: var(--color-accent); font-weight: 700; }
.bulk-bar__actions { display: flex; gap: var(--space-2); margin-left: auto; }
.bulk-bar .btn--secondary {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  color: var(--surface);
}
.bulk-bar .btn--secondary:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.32); color: var(--surface); }
.bulk-bar .btn--ghost { color: var(--surface); opacity: 0.7; }
.bulk-bar .btn--ghost:hover { background: rgba(255,255,255,0.1); color: var(--surface); opacity: 1; }

/* ---- AG Grid Quartz overrides — match .data-table exactly ----
   Same Inter family, same 13 px body, same 32 px row, same muted header,
   same hover / selection colours. AG Grid should feel like a sibling of
   the .data-table next to it, not a foreign component. */
.ag-theme-quartz {
  --ag-font-family: var(--font-ui);
  --ag-font-size: 13px;
  --ag-foreground-color: var(--ink);
  --ag-background-color: var(--surface-raised);
  --ag-header-background-color: var(--surface-sunken);
  --ag-header-foreground-color: var(--ink-muted);
  --ag-header-cell-hover-background-color: var(--surface-hover);
  --ag-odd-row-background-color: var(--surface-raised);
  --ag-row-hover-color: var(--surface-hover);
  --ag-border-color: var(--border);
  --ag-row-border-color: var(--border);
  --ag-header-column-separator-color: var(--border);
  --ag-header-column-separator-display: block;
  --ag-selected-row-background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --ag-input-focus-border-color: var(--color-accent);
  --ag-control-panel-background-color: var(--surface-sunken);
  --ag-cell-horizontal-padding: 12px;
  --ag-grid-size: 6px;
  --ag-row-height: 32px;
  --ag-header-height: 32px;
  --ag-list-item-height: 28px;
  --ag-borders: solid 1px;
  --ag-font-weight-normal: 400;
  --ag-font-weight-bold: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
/* The grid's OWN box is `.ag-root-wrapper`, and quartz gives it an 8px radius — a value on
   neither thesis's scale (A: 4/6/8/12, Fable: 4/7/10/14). Say it in a house token so the one box
   a grid draws has a house corner.
   THE CLASS IS REPEATED ON PURPOSE. ag-grid's own sheet declares
   `--ag-wrapper-border-radius: 8px` on `.ag-theme-quartz, .ag-theme-quartz-dark, …` at (0,1,0),
   and it is injected by the bundle AFTER this <link>, so a single class loses on source order —
   measured live: the declaration inside the block above changed nothing and the wrapper stayed at
   8px. (0,2,0) is the smallest selector that wins. */
.ag-theme-quartz.ag-theme-quartz {
  --ag-wrapper-border-radius: var(--radius-md);
}
/* THE HOST DRAWS NO BOX ON A FABLE SURFACE (feedback `019fc8c1` + `019fc8a2`, J. Kurzak,
   2026-08-03: *"Inconsistently rounded corners (some are rounded while others arent at all)"* and
   *"1px borders look off (disappear) when the corners are rounded"*).
   This rule used to be unscoped, so the thesis-A host border landed on every Fable `fb-gridhost`
   in the portal — which already sits 1px INSIDE a card that draws its own border, and 1px OUTSIDE
   `.ag-root-wrapper`, which draws ag-grid's. Measured live at 1600x950 in Poland:
   `/recruitment-brain/applications` drew `.bdgrid.gb-embed` (x=266, r=10px), `.gsec-host` (x=267,
   r=7px) and each band's `.ag-root-wrapper` (x=280, r=8px); `/operations-brain/facilitators` and
   the grid-brain route drew the same 7px/8px pair 1px apart. Two hairlines one pixel apart with
   DISAGREEING radii is what the filings are about: on a straight edge they read as one 2px line,
   and at a corner each is antialiased to ~50% coverage, so two crossing half-strength curves read
   as a broken or square corner. `--line` gives 1.26:1 against `--card` in paper and 1.47:1 against
   `--paper` in ink; halve that at a corner and the line is simply gone.
   THE PREDICATE IS `.grid-host`, not `.fable`, and it is exact: the four elements in this repo
   that carry `grid-host` beside `ag-theme-quartz` (grid-brain `DataGrid`, `GroupSections`,
   `GroupedView`, and fable-ui's `FableGrid`) are the grid RENDERERS, and each one nests an
   `.ag-root-wrapper` that already draws the box — so the host's border was never the frame, only
   a second copy of it. Scoping on `.fable` instead left `GroupedView`'s `.grp-single` host, which
   never took the class, drawing the pair on the grid-brain route. Any OTHER `.ag-theme-quartz`
   host keeps the box; finance's `.fb-grid-host` and the rest are different, hyphenated page
   classes and do not match. */
.ag-theme-quartz:not(.grid-host) {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
/* AG Grid header text — same weight + colour as our .data-table headers. */
.ag-theme-quartz .ag-header-cell-text {
  font-weight: 600;
  color: var(--ink-muted);
}
/* Force every AG cell to use the UI font (Inter) — even if a downstream
   project applies cellClass: 'mono'. Geist Mono is reserved for code blocks
   outside tables; it doesn't belong on a numeric data cell. */
.ag-theme-quartz .ag-cell,
.ag-theme-quartz .ag-cell.mono,
.ag-theme-quartz .ag-cell.ag-right-aligned-cell {
  font-family: var(--font-ui) !important;
  font-variant-numeric: tabular-nums lining-nums;
}
[data-theme="ink"] .ag-theme-quartz {
  --ag-foreground-color: var(--ink);
  --ag-background-color: var(--surface-raised);
  --ag-header-background-color: var(--surface-sunken);
  --ag-row-hover-color: var(--surface-hover);
  --ag-border-color: var(--border);
}

/* ---- Stat grid + extras ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.stat__unit { font-size: 0.55em; color: var(--ink-muted); font-weight: 600; margin-left: 2px; }
.stat .sparkline {
  width: 100%; height: 28px;
  margin-top: var(--space-2);
  display: block;
}
.sparkline polyline {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sparkline--danger polyline { stroke: var(--color-state-danger); }

/* ---- Chart cards ---- */
.chart-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
@media (max-width: 880px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-grid > .chart-card:nth-child(3) { grid-column: 1 / 2; }
.chart-grid > .chart-card:nth-child(4) { grid-column: 2 / 3; }
@media (max-width: 880px) {
  .chart-grid > .chart-card:nth-child(n) { grid-column: 1 / -1; }
}
.chart-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.chart-card__head { margin-bottom: var(--space-3); }
.chart-card__head .eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--ink-subtle);
  display: block;
  margin-bottom: 4px;
}
.chart-card__title { font: var(--type-display-md); margin: 0; }
.chart-card__body { height: 220px; position: relative; }

/* ---- Empty / loading / error ---- */
.states-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.empty-state {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.empty-state__icon { width: 36px; height: 36px; color: var(--ink-subtle); }
.empty-state__icon--error { color: var(--color-state-danger); }
.empty-state__title { font: var(--type-heading-lg); margin: 0; }
.empty-state__msg { font: var(--type-body); color: var(--ink-muted); margin: 0 0 var(--space-3); max-width: 28ch; }

/* ---- Skeleton table ---- */
.skel-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-raised);
}
.skel-table__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.skel-table__row:last-child { border-bottom: 0; }
.skel-table__row--head { background: var(--surface-sunken); }

/* ---- Leaderboard ---- */
.leaderboard {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  overflow: hidden;
}
.leaderboard__row {
  display: grid;
  grid-template-columns: 32px 24px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--motion-micro) var(--ease);
}
.leaderboard__row:last-child { border-bottom: 0; }
.leaderboard__row:hover { background: var(--surface-hover); }
.leaderboard__row--top {
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  position: relative;
}
.leaderboard__row--top::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--color-accent);
}
.leaderboard__rank {
  font: var(--type-mono);
  font-weight: 600;
  color: var(--ink-subtle);
}
.leaderboard__row--top .leaderboard__rank { color: var(--color-accent-readable); }
.leaderboard__body { min-width: 0; }
.leaderboard__name { font: var(--type-body-strong); margin: 0 0 4px; }
.leaderboard__breakdown { display: flex; flex-wrap: wrap; gap: 4px; }
.leaderboard__score {
  font: var(--type-display-md);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- Definition list ---- */
.def-list { display: flex; flex-direction: column; margin: 0; }
.def-list__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.def-list__row:last-child { border-bottom: 0; }
.def-list__row dt {
  font: var(--type-eyebrow);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin: 0;
}
.def-list__row dd { font: var(--type-body); margin: 0; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }

.def-list--inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.def-list--inline .def-list__row { padding: 0; border-bottom: 0; grid-template-columns: 1fr; gap: 4px; }
.def-list--inline dt { margin-bottom: 0; }

/* ===========================================================
   Tables catalogue — additions for tiers, toolbar, ergonomics
   =========================================================== */

/* Group row used in grouped tables (Power tier + AI table) */
.data-table__group-row td {
  background: var(--surface-sunken);
  font: 600 11px/1.3 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  height: 28px;
}
.data-table__group-row .group-count {
  color: var(--ink-subtle);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

/* ---- Tier guide cards ---- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
}
@media (max-width: 880px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-4) var(--space-4) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--motion-standard) var(--ease), background var(--motion-standard) var(--ease), transform var(--motion-standard) var(--ease);
}
.tier-card:hover {
  border-color: var(--ink-muted);
  transform: translateY(-1px);
}
.tier-card--active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 4%, var(--surface-raised));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.tier-card__num {
  font: var(--type-eyebrow);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--ink-subtle);
  display: inline-flex; align-items: center; gap: 8px;
}
.tier-card__star {
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--color-accent-readable);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  padding: 2px 6px;
  border-radius: 999px;
}
.tier-card__title { font: var(--type-heading-lg); margin: 0; }
.tier-card__desc { font: var(--type-body); color: var(--ink-muted); margin: 0; }
.tier-card__feat {
  font: 500 11.5px/1.4 var(--font-mono);
  color: var(--ink-subtle);
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

/* ---- Table toolbar (Airtable-style) ---- */
.tbl-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  padding: 6px 8px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 0;
}
.tbl-toolbar + .data-table-wrap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.tbl-toolbar__views {
  display: flex; align-items: center; gap: 2px;
  padding-right: 8px;
}
.tbl-toolbar__sep {
  width: 1px; align-self: stretch;
  background: var(--border);
  margin: 0 6px;
}
.tbl-toolbar__actions {
  display: flex; align-items: center; gap: 4px;
}
.tbl-toolbar__right {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto;
}

.tbl-view {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: 500 13px/1.2 var(--font-ui);
  cursor: pointer;
  transition: background var(--motion-micro) var(--ease), color var(--motion-micro) var(--ease);
}
.tbl-view:hover { background: var(--surface-hover); color: var(--ink); }
.tbl-view svg { width: 14px; height: 14px; }
.tbl-view--active {
  background: var(--surface-sunken);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border);
}
.tbl-view--add {
  padding: 5px 6px;
  color: var(--ink-subtle);
}
.tbl-view--add:hover { color: var(--color-accent-readable); }

.tbl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: 500 13px/1.2 var(--font-ui);
  cursor: pointer;
  transition: background var(--motion-micro) var(--ease), color var(--motion-micro) var(--ease);
}
.tbl-chip:hover { background: var(--surface-hover); color: var(--ink); }
.tbl-chip svg { width: 14px; height: 14px; }
.tbl-chip--icon { padding: 5px 7px; }
.tbl-chip--applied {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent-readable);
  font-weight: 600;
}
.tbl-chip--applied:hover {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent-readable);
}
.tbl-chip__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--surface);
  font: 700 10px/1 var(--font-ui);
}

/* ---- Applied chips row (under toolbar) ---- */
.tbl-applied {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--color-accent) 4%, var(--surface-raised));
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.tbl-applied__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--ink-subtle);
}
.tbl-applied__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  font: 500 12px/1.2 var(--font-ui);
}
.tbl-applied__chip--sort {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--border-strong));
  color: var(--color-accent-readable);
}
.tbl-applied__chip button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; padding: 0;
  border: 0; background: transparent; color: var(--ink-subtle);
  cursor: pointer; border-radius: 3px;
}
.tbl-applied__chip button:hover { background: var(--surface-hover); color: var(--ink); }
.tbl-applied__chip svg { width: 11px; height: 11px; }
.tbl-applied__clear {
  margin-left: auto;
  background: transparent; border: 0;
  font: 500 12px/1 var(--font-ui);
  color: var(--ink-subtle);
  cursor: pointer; padding: 4px 6px; border-radius: 4px;
}
.tbl-applied__clear:hover { color: var(--color-state-danger); background: var(--surface-hover); }
.tbl-applied + .data-table-wrap {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ---- AI bar (visual companion to AI pattern) ---- */
.tbl-ai-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 8%, var(--surface-raised)), var(--surface-raised));
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 0;
}
.tbl-ai-bar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--surface);
}
.tbl-ai-bar__icon svg { width: 14px; height: 14px; }
.tbl-ai-bar__placeholder {
  flex: 1;
  font: 500 13px/1.4 var(--font-ui);
  color: var(--ink-subtle);
  font-style: italic;
}
.tbl-ai-bar__voice,
.tbl-ai-bar__submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.tbl-ai-bar__voice:hover { background: var(--surface-hover); color: var(--color-state-danger); }
.tbl-ai-bar__submit {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}
.tbl-ai-bar__submit:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--surface); }
.tbl-ai-bar svg { width: 14px; height: 14px; }

/* ---- Spreadsheet ergonomics — key reference + demo ---- */
.spread-keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-5);
}
.spread-keys__item {
  display: flex; align-items: center; gap: 6px;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.spread-keys__item p {
  font: 500 12.5px/1.4 var(--font-ui);
  color: var(--ink-muted);
  margin: 0 0 0 6px;
}
.spread-keys__item kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px;
  padding: 3px 6px;
  font: 600 11px/1 var(--font-mono);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--border-strong);
}
.spread-keys__item span {
  font: 500 11px/1 var(--font-ui);
  color: var(--ink-subtle);
}

.spread-demo { position: relative; }
.spread-row-num {
  width: 28px;
  background: var(--surface-sunken);
  color: var(--ink-subtle);
  font: 500 11px/1 var(--font-mono);
  text-align: center !important;
  border-right: 1px solid var(--border);
}
.spread-cell {
  cursor: cell;
  position: relative;
  transition: box-shadow 80ms ease;
}
.spread-cell:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
  z-index: 1;
}
.spread-cell--in-range {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.spread-cell--in-range:focus {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.spread-cell--editing {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--color-accent), 0 4px 12px rgba(15,23,42,0.06);
}
.spread-cell input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  padding: 0;
  margin: 0;
}
.spread-cell input:focus { outline: none; }
.spread-cell[data-type="num"] input { text-align: right; }

.spread-fill-handle {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--color-accent);
  border: 1px solid var(--surface);
  border-radius: 1px;
  cursor: crosshair;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(15,23,42,0.2);
  pointer-events: auto;
}
.spread-fill-ghost {
  position: absolute;
  border: 2px dashed var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  pointer-events: none;
  z-index: 1;
}

.spread-status {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.spread-status__item {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/1.2 var(--font-ui);
  color: var(--ink-muted);
}
.spread-status__item strong {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 700;
}
.spread-status__item svg { width: 13px; height: 13px; color: var(--ink-subtle); }
.spread-status.is-flash {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--surface-sunken));
  border-color: var(--color-accent);
}

/* ---- Toolbar popovers ---- */
.tbl-popover {
  position: absolute;
  z-index: 100;
  min-width: 240px;
  max-width: 360px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 0 0 1px var(--border);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.tbl-pop__head {
  font: var(--type-eyebrow);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--ink-subtle);
  font-size: 11px;
}
.tbl-pop__row { display: flex; gap: 6px; flex-wrap: wrap; }
.tbl-pop__row select,
.tbl-pop__row input {
  flex: 1 1 100px;
  min-width: 100px;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: 500 13px/1.2 var(--font-ui);
}
.tbl-pop__row select:focus,
.tbl-pop__row input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent); }
.tbl-pop__list { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }
.tbl-pop__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 13px/1.4 var(--font-ui);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
.tbl-pop__item:hover { background: var(--surface-hover); }
.tbl-pop__item.is-active {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-readable);
  font-weight: 600;
}
.tbl-pop__item--quiet { color: var(--ink-subtle); font-size: 12px; }
.tbl-pop__item--quiet:hover { color: var(--color-state-danger); }
.tbl-pop__hint { font: 500 11px/1 var(--font-mono); color: var(--ink-subtle); }
.tbl-pop__check {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  font: 500 13px/1.2 var(--font-ui);
}
.tbl-pop__check:hover { background: var(--surface-hover); }
.tbl-pop__check input { width: 14px; height: 14px; accent-color: var(--color-accent); }
.tbl-pop__sort-row { display: flex; align-items: center; gap: 4px; }
.tbl-pop__sort-row .tbl-pop__item { flex: 1; }
.tbl-pop__sort-dir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-muted);
}
.tbl-pop__sort-dir:hover { color: var(--ink); border-color: var(--ink-muted); }
.tbl-pop__sort-dir.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--surface);
}
.tbl-pop__sort-dir svg { width: 12px; height: 12px; }
.tbl-pop__msg { font: var(--type-body); color: var(--ink-muted); margin: 0; }
.tbl-pop__foot { display: flex; gap: 6px; justify-content: flex-end; }

/* ===========================================================
   Tier 1 — Component additions surfaced by the cross-project
   audit (campaigns, schoolsbrain, recruitment).
   Each component is small + token-driven; lift the markup
   from /a/catalogue/components.html.
   =========================================================== */

/* ---- Sparkline (standalone) ----
   Reusable mini-chart for inline use in tiles, table cells, list rows.
   Sizes: --sm 60×16, default 100×28, --lg 160×40. SVG is drawn with
   viewBox so it scales without resampling. Accent strokes via topic. */
.sparkline {
  display: inline-block;
  width: 100px; height: 28px;
  vertical-align: middle;
}
.sparkline--sm { width: 60px; height: 16px; }
.sparkline--lg { width: 160px; height: 40px; }
.sparkline polyline {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sparkline--success polyline { stroke: var(--color-state-success); }
.sparkline--danger  polyline { stroke: var(--color-state-danger); }
.sparkline--caution polyline { stroke: var(--color-state-caution); }
.sparkline--muted   polyline { stroke: var(--ink-subtle); }
.sparkline__area {
  fill: var(--color-accent);
  fill-opacity: 0.12;
  stroke: none;
}

/* ---- Stat card · accent stripe variant ----
   KPI tile with a 3 px coloured top edge that reflects status.
   Used for status-at-a-glance widgets (schoolsbrain This Week). */
.stat--stripe {
  border-top: 3px solid var(--border-strong);
}
.stat--stripe.stat--success { border-top-color: var(--color-state-success); }
.stat--stripe.stat--danger  { border-top-color: var(--color-state-danger); }
.stat--stripe.stat--caution { border-top-color: var(--color-state-caution); }
.stat--stripe.stat--info    { border-top-color: var(--color-state-info); }
.stat--stripe.stat--brand   { border-top-color: var(--color-accent); }

/* ---- Stat card · forecast variant ----
   Shows a point estimate + confidence interval band. Used for
   forecasts / predictions where surfacing uncertainty matters. */
.stat--forecast .stat__band {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-accent) 10%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 30%, transparent) 30%,
    var(--color-accent) 50%,
    color-mix(in srgb, var(--color-accent) 30%, transparent) 70%,
    color-mix(in srgb, var(--color-accent) 10%, transparent) 100%
  );
  margin: 8px 0 4px;
}
.stat--forecast .stat__band-labels {
  display: flex; justify-content: space-between;
  font: 500 11px/1 var(--font-ui);
  color: var(--ink-subtle);
  font-variant-numeric: tabular-nums;
}
.stat--forecast .stat__ci {
  font: 500 11px/1.4 var(--font-ui);
  color: var(--ink-subtle);
  margin-top: 6px;
}

/* ---- Heat-map cell layer ----
   Adds a tinted background to a table cell based on --heat-pct (0–100).
   Apply class .data-table__cell--heat plus inline style="--heat-pct: 73".
   Negative-better signals use --heat-neg. */
.data-table__cell--heat {
  background: color-mix(
    in srgb,
    var(--color-state-success) calc(var(--heat-pct, 0) * 1%),
    transparent
  );
}
.data-table__cell--heat-danger {
  background: color-mix(
    in srgb,
    var(--color-state-danger) calc(var(--heat-pct, 0) * 1%),
    transparent
  );
}
.data-table__cell--heat-caution {
  background: color-mix(
    in srgb,
    var(--color-state-caution) calc(var(--heat-pct, 0) * 1%),
    transparent
  );
}

/* ---- Button group (segmented control) ----
   Inline pill group for period / scope filters. One active item, others
   muted. URL/state binding lives in the consuming page (data-href-param
   is a CONVENTION — see components.html for the wiring example). */
.button-group {
  display: inline-flex;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}
.button-group__btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: 500 12px/1 var(--font-ui);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--motion-micro) var(--ease), color var(--motion-micro) var(--ease);
}
.button-group__btn:hover { background: var(--surface-hover); color: var(--ink); }
.button-group__btn.is-active {
  background: var(--surface-raised);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
}
.button-group__btn svg { width: 12px; height: 12px; }

/* ---- Scope toggle (smaller, denser button-group) ----
   For country switchers, view toggles, role filters. Designed to sit
   inside a toolbar without dominating it. */
.scope-toggle {
  display: inline-flex;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  padding: 1px;
  gap: 1px;
}
.scope-toggle__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
}
.scope-toggle__btn:hover { color: var(--ink); background: var(--surface-hover); }
.scope-toggle__btn.is-active {
  background: var(--ink);
  color: var(--surface);
}

/* ---- Workbench-style timeline (vertical interaction log) ----
   Alternative to .data-table for chronological narratives. Each item
   gets a coloured dot on the vertical line + body. */
.wb-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.wb-timeline::before {
  content: '';
  position: absolute;
  top: 8px; bottom: 8px; left: 9px;
  width: 2px;
  background: var(--border);
}
.wb-timeline__item {
  display: grid;
  grid-template-columns: 22px 96px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  position: relative;
  align-items: start;
  border-bottom: 1px dashed var(--border);
}
.wb-timeline__item:last-child { border-bottom: 0; }
.wb-timeline__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 2px solid var(--ink-subtle);
  margin-top: 3px;
  z-index: 1;
}
.wb-timeline__item--success .wb-timeline__dot { border-color: var(--color-state-success); }
.wb-timeline__item--info    .wb-timeline__dot { border-color: var(--color-state-info); }
.wb-timeline__item--caution .wb-timeline__dot { border-color: var(--color-state-caution); }
.wb-timeline__item--danger  .wb-timeline__dot { border-color: var(--color-state-danger); }
.wb-timeline__date {
  font: 500 12px/1.4 var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--ink-subtle);
}
.wb-timeline__body { font: var(--type-body); color: var(--ink); }
.wb-timeline__title {
  font-weight: 500;
  margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.wb-timeline__note { font-size: 13px; color: var(--ink-muted); margin: 0; }
.wb-timeline__tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }

/* ---- Upload progress (resumable) ----
   States: pending (indeterminate stripes), uploading (determinate bar
   with %), success, error-with-retry. */
.upload-progress {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.upload-progress__head {
  display: flex; align-items: center; gap: 8px;
  font: 500 13px/1.4 var(--font-ui);
}
.upload-progress__icon { width: 16px; height: 16px; color: var(--ink-subtle); }
.upload-progress__filename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-progress__pct { font-variant-numeric: tabular-nums; color: var(--ink-muted); font-weight: 500; font-size: 12px; }
.upload-progress__bar {
  height: 4px;
  background: var(--surface-sunken);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.upload-progress__bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width var(--motion-standard) var(--ease);
}
.upload-progress--indeterminate .upload-progress__bar-fill {
  width: 30%;
  animation: upload-indeterminate 1.4s var(--ease) infinite;
}
@keyframes upload-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.upload-progress--success .upload-progress__bar-fill { background: var(--color-state-success); }
.upload-progress--error   .upload-progress__bar-fill { background: var(--color-state-danger); }
.upload-progress__retry {
  align-self: flex-start;
  font: 500 12px/1 var(--font-ui);
  color: var(--color-state-danger);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ---- Countdown overlay (transient full-viewport) ----
   Big animated number that fills the screen for 3 seconds before a
   recording / quiz / timed test starts. */
.countdown-overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ink) 84%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.countdown-overlay__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(96px, 24vw, 240px);
  color: var(--color-accent);
  line-height: 1;
  animation: countdown-pop 1s var(--ease);
}
@keyframes countdown-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  20%  { transform: scale(1.05); opacity: 1; }
  80%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0; }
}

/* ---- Recording indicator (pulsing dot + timer) ---- */
.rec-indicator {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-state-danger) 12%, transparent);
  color: var(--color-state-danger);
  font: 600 12px/1 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rec-indicator__dot {
  width: 8px; height: 8px;
  background: var(--color-state-danger);
  border-radius: 50%;
  animation: rec-pulse 1.2s var(--ease) infinite;
}
.rec-indicator__time {
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-state-danger);
  font-weight: 600;
}
@keyframes rec-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { transform: scale(0.85); box-shadow: 0 0 0 6px transparent; opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-indicator__dot { animation: none; }
  .countdown-overlay__num { animation: none; }
}

/* ===========================================================
   AG Grid toolbar — search, group-by, AI bar.
   Sits above the grid; same chrome vocabulary as our .data-table
   toolbar so the two patterns feel related.
   =========================================================== */
.ag-ai-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 8%, var(--surface-raised)), var(--surface-raised));
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 0;
}
.ag-ai-bar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--color-accent);
  color: #FFFFFF;
}
.ag-ai-bar__icon svg { width: 14px; height: 14px; }
.ag-ai-bar__input {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font: 500 13px/1.4 var(--font-ui);
  color: var(--ink);
}
.ag-ai-bar__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.ag-ai-bar .btn--sm svg { width: 13px; height: 13px; }

.ag-ai-bar__suggest {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px;
  background: var(--surface-raised);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.ag-ai-bar__suggest-label {
  font: var(--type-eyebrow);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-right: 4px;
}
.ag-ai-bar__suggest .ai-chip {
  font: 500 11.5px/1 var(--font-ui);
  padding: 5px 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--motion-micro) var(--ease);
}
.ag-ai-bar__suggest .ai-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-readable);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--surface));
}
.ag-ai-bar__status {
  margin-left: auto;
  font: 500 11.5px/1 var(--font-ui);
  color: var(--ink-subtle);
}

.ag-controls {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-top: 0;
  border-bottom: 0;
  flex-wrap: wrap;
}
.ag-controls__field { display: inline-flex; align-items: center; gap: 8px; }
.ag-controls__label {
  font: var(--type-eyebrow);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--ink-subtle);
  display: inline-flex; align-items: center; gap: 4px;
}
.ag-controls__label svg { width: 12px; height: 12px; }
.ag-controls input[type="text"],
.ag-controls select {
  font: 500 13px/1.3 var(--font-ui);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  min-width: 180px;
}
.ag-controls input[type="text"]:focus,
.ag-controls select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

/* When the AG toolbar is present, the grid's top corner shouldn't be rounded */
.ag-ai-bar + .ag-ai-bar__suggest + .ag-controls + #ag-grid-demo,
.ag-controls + #ag-grid-demo {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

/* Group-banner row inside AG Grid (rendered via fullWidthCellRenderer) */
.ag-theme-quartz .ag-full-width-row .ag-group-banner {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font: var(--type-eyebrow);
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  font-size: 11px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-strong);
  height: 100%;
  display: flex; align-items: center;
}
.ag-theme-quartz .ag-full-width-row .ag-group-banner strong {
  color: var(--ink);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-right: 6px;
}

/* Power-tier AI bar input — clearly an input: bordered, surface bg,
   focus state, placeholder cursor. Previously transparent which made
   it read as a label, not a field. */
.tbl-ai-bar__input-real {
  flex: 1;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font: 500 13px/1.4 var(--font-ui);
  color: var(--ink);
  padding: 7px 12px;
  outline: none;
  cursor: text;
  transition: border-color var(--motion-micro) var(--ease),
              box-shadow var(--motion-micro) var(--ease);
}
.tbl-ai-bar__input-real:hover { border-color: var(--ink-muted); }
.tbl-ai-bar__input-real:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}
.tbl-ai-bar__input-real::placeholder {
  color: var(--ink-subtle);
  font-weight: 400;
}
.tbl-ai-bar__hint {
  font: 500 11px/1 var(--font-ui);
  color: var(--ink-subtle);
  padding: 0 6px;
  white-space: nowrap;
}
/* Sparkle icon button should look interactive */
.tbl-ai-bar button.tbl-ai-bar__icon {
  border: 0;
  cursor: pointer;
  transition: filter var(--motion-micro) var(--ease);
}
.tbl-ai-bar button.tbl-ai-bar__icon:hover { filter: brightness(1.1); }