/* House tabs + toggles — "Quiet" (user, 2026-10-13; options in static/proto/tabs-toggles-options.html).

   Toggles (segmented controls): grey track, white thumb on the active option. Every page's toggle reads
   the --seg-* tokens below; new toggles use <div class="aiq-seg"><button class="on">…</button>…</div>.
   Section tabs: plain text, ink + 2px blue underline on the active one (--utab-*), new ones use
   <nav class="aiq-utabs"><a class="on">…</a>…</nav>. Financials keeps its docked tab strip, and the
   user's own lists (Watchlist / Screener / Gov contracts) keep boxed tabs. Spec: docs/features/tables.md
   sibling section "Tabs and toggles". */

:root {
  --seg-bg: rgba(255,255,255,0.04);
  --seg-line: rgba(255,255,255,0.07);
  --seg-ink: rgba(160,169,192,0.85);
  --seg-hover: #e2e8f0;
  --seg-on-bg: #3a3a3a;
  --seg-on-ink: #ffffff;
  --seg-on-shadow: 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  --seg-h: 28px;

  --utab-ink: rgba(160,169,192,0.85);
  --utab-hover: #e2e8f0;
  --utab-on: #f8fafc;
  --utab-line: #455DDC;
  --utab-rule: rgba(255,255,255,0.08);
}
html[data-theme="light"] {
  --seg-bg: #f1f5f9;
  --seg-line: rgba(0,0,0,0.07);
  --seg-ink: #64748b;
  --seg-hover: #0f172a;
  --seg-on-bg: #ffffff;
  --seg-on-ink: #0f172a;
  --seg-on-shadow: 0 1px 2px rgba(15,23,42,0.12);

  --utab-ink: #64748b;
  --utab-hover: #0f172a;
  --utab-on: #0f172a;
  --utab-line: #455DDC;
  --utab-rule: #e6e8ec;
}

.aiq-seg { display: inline-flex; align-items: center; gap: 2px; height: var(--seg-h); padding: 2px;
  border-radius: 4px; background: var(--seg-bg); border: 1px solid var(--seg-line); }
.aiq-seg > button, .aiq-seg > a { all: unset; box-sizing: border-box; height: 100%; padding: 0 9px; border-radius: 3px;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap;
  font: 600 11.5px/1 'Inter', sans-serif; color: var(--seg-ink); }
.aiq-seg > :hover:not(.on) { color: var(--seg-hover); }
.aiq-seg > .on, .aiq-seg > [aria-pressed="true"] { background: var(--seg-on-bg); color: var(--seg-on-ink); box-shadow: var(--seg-on-shadow); }
.aiq-seg > :focus-visible { outline: 2px solid rgba(69,93,220,.55); outline-offset: 1px; }

.aiq-utabs { display: flex; gap: 22px; border-bottom: 1px solid var(--utab-rule); overflow-x: auto; scrollbar-width: none; }
.aiq-utabs > a, .aiq-utabs > button { all: unset; box-sizing: border-box; cursor: pointer; white-space: nowrap;
  padding: 10px 0 9px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font: 500 13.5px/1.2 'Inter', sans-serif; color: var(--utab-ink); }
.aiq-utabs > :hover:not(.on) { color: var(--utab-hover); }
.aiq-utabs > .on, .aiq-utabs > [aria-selected="true"] { color: var(--utab-on); font-weight: 600; border-bottom-color: var(--utab-line); }