/* ============================================================================
 * AgentMaps / ISpyMyAI — CANONICAL COMPONENT STYLESHEET
 * ----------------------------------------------------------------------------
 * WHAT THIS IS
 *   The single canonical, de-duplicated extraction of the design system's
 *   component CSS, pulled VERBATIM from the live app sources and organized by
 *   component family. Where a family had several historical variants, ONE was
 *   chosen as canonical (and included verbatim); the rest are documented as
 *   DEPRECATED with a pointer to the canonical class.
 *
 * TOKENS
 *   This file defines NO design tokens. Every value here references the custom
 *   properties from ispymyai/lib/tokens.css — the single canonical token sheet
 *   (--eu-*, --badge-*, --font-*, --chip-*, --row-*, --icon-*, --wf-*, --st-*,
 *   --ws-*). Link tokens.css separately and BEFORE this file.
 *
 * ROLLOUT
 *   Phase 1 — the component gallery consumes this file directly (read-only
 *             reference for the system).
 *   Phase 2 — the app migrates to @import this file as its component source,
 *             guarded by a drift check against the live sources.
 *
 * SOURCES (verbatim extraction; line numbers approximate as of generation)
 *   - ispymyai/dashboard.html   (inline <style>, ~L1–149)
 *   - ispymyai/dashboard.js     (#tk2-style injected block, ~L8310–8595)
 *   - ispymyai/lib/live-home.css (segmented/pill-track + reusable pills)
 *   - ispymyai/lib/connections.css (.cx-* connection variants, .wiz-* modal)
 *   - docs/a1-v3-mockups/26-sample-harness.html (NET-NEW candidates)
 *
 * GENERATED: 2026-06-21 (manual extraction). Re-extract when sources change.
 * ============================================================================ */


/* ============================================================================
 * SECTION 1 — LAYOUT  (canonical: .shell + .main + .rightpanel)
 * ============================================================================ */

/* source: ispymyai/dashboard.html:28 */
.shell { display: flex; max-width: 1280px; margin: 0 auto; align-items: stretch; }
/* source: ispymyai/dashboard.html:29 */
.main { flex: 1; min-width: 0; padding: 22px 24px 64px; }
/* source: ispymyai/dashboard.html:30 */
.rightpanel { width: 360px; flex-shrink: 0; border-left: 1px solid var(--eu-border); background: var(--eu-panel); padding: 16px 18px; display: none; }
/* source: ispymyai/dashboard.html:31 */
.rightpanel.open { display: block; position: sticky; top: 0; align-self: flex-start; max-height: 100vh; overflow-y: auto; }
/* source: ispymyai/dashboard.html:36 */
@media (max-width: 860px) { .rightpanel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 20; box-shadow: var(--eu-shadow-pop); } }

/* NOTE: live-home defines its own .shell with different padding (scoped under
   .live-home). It is the Live-page layout, not the generic shell.
   source: ispymyai/lib/live-home.css:445 — .live-home .shell { max-width:1280px; margin:0 auto; padding:14px 24px 96px; } */


/* ============================================================================
 * SECTION 2 — PAGE HEADER  (canonical: .tk2-eyebrow / .tk2-title / .tk2-sub / .tk2-meta)
 * DEPRECATED → tk2: .set-head / .set-* headings (dashboard.html),
 *                   .cx-page .settings-header (connections.css)
 * ============================================================================ */

/* source: ispymyai/dashboard.js:8312 */
.tk2-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--eu-accent); margin-bottom: 6px; }
/* source: ispymyai/dashboard.js:8313 */
.tk2-title { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
/* source: ispymyai/dashboard.js:8314 */
.tk2-sub { font-size: 13px; color: var(--eu-muted); max-width: 760px; }
/* source: ispymyai/dashboard.js:8315 */
.tk2-meta { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--eu-muted-2); flex-wrap: wrap; }
/* source: ispymyai/dashboard.js:8316 — read-only mode tag (used in .tk2-meta) */
.tk2-mode { display: inline-flex; border: 1px solid var(--eu-border-strong); border-radius: 6px; overflow: hidden; }
.tk2-mode b { padding: 2px 8px; font-weight: 600; font-size: 11px; }
/* source: ispymyai/dashboard.js:8336 — large section heading inside a pane */
.tk2-sect { font-size: 17px; font-weight: 600; margin: 26px 0 4px; }
/* source: ispymyai/dashboard.js:8365 — section description lede */
.tk2-sdesc { font-size: 13px; color: var(--eu-muted); margin-bottom: 14px; max-width: 780px; }

/* DEPRECATED → .tk2-* page header. Settings header set in dashboard.html.
   source: ispymyai/dashboard.html:139–142 */
.set-head { margin-bottom: 14px; }
.set-head h1 { font-size: 24px; font-weight: 700; color: var(--eu-text); margin: 0; }
.set-subh { font-size: 12px; font-weight: 600; color: var(--eu-text); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 4px; }
.set-p { font-size: 12.5px; color: var(--eu-text); margin: 0 0 14px; line-height: 1.5; }

/* DEPRECATED → .tk2-* page header. Connections page header.
   source: ispymyai/lib/connections.css:8–10 */
.cx-page .settings-header { padding: 24px 24px 8px; }
.cx-page .settings-header h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--eu-text); }
.cx-page .settings-header .lede { margin: 0; font-size: 13px; color: var(--eu-muted); line-height: 1.6; max-width: 760px; }


/* ============================================================================
 * SECTION 3 — BUTTONS  (canonical: base `button` + .tk2-btn [+.primary/.danger])
 * DEPRECATED → .tk2-btn.primary: .cx-page .connect-btn (connections.css)
 * ============================================================================ */

/* source: ispymyai/dashboard.html:38 — base button reset (all buttons inherit this) */
button { font: inherit; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: 7px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--eu-border-strong);
  background: var(--eu-panel-2); color: var(--eu-text); cursor: pointer; transition: background 120ms; }
button:hover { background: var(--eu-panel-3); }

/* source: ispymyai/dashboard.js:8393 — canonical action button */
.tk2-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 7px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--eu-border-strong); background: var(--eu-panel-2); color: var(--eu-text); cursor: pointer; }
.tk2-btn:hover { background: var(--eu-panel-3); }
.tk2-btn:disabled { opacity: .5; cursor: default; }
/* source: ispymyai/dashboard.js:8395 */
.tk2-btn.primary { background: var(--eu-accent); border-color: var(--eu-accent); color: #fff; }
/* source: ispymyai/dashboard.js:8440 */
.tk2-btn.danger { color: var(--eu-bad); border-color: color-mix(in srgb, var(--eu-bad) 35%, transparent); background: color-mix(in srgb, var(--eu-bad) 8%, transparent); }
.tk2-btn.danger:hover { background: color-mix(in srgb, var(--eu-bad) 16%, transparent); }

/* --- .live variant (promoted from the Lab harness, ANTHROME-DS-LAB-UX-CONFORM-01 F3) --- */
/* Filled-good "go live" button; .on flips to the bad fill while live. Text on the good
   fill derives from the fill (no hardcoded hex) so it tracks palette changes. */
.tk2-btn.live { background: var(--eu-good); border-color: var(--eu-good); color: color-mix(in srgb, var(--eu-good) 18%, black); }
.tk2-btn.live.on { background: var(--eu-bad); border-color: var(--eu-bad); color: #fff; }

/* --- link-button + sticky action bar (promoted from the Lab, F5 2026-07-22) --- */
/* .lnk: an inline text action (select-all/reset); NOT navigation. .actionbar: the
   sticky bottom command bar; page layout (margins) stays page-owned. */
.lnk { font-size: var(--font-sm); color: var(--eu-accent); background: none; border: none; cursor: pointer; font-weight: 600; padding: 0; }
.lnk:hover { text-decoration: underline; }
.actionbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--eu-panel); border: 1px solid var(--eu-border-strong); border-radius: 10px; box-shadow: var(--eu-shadow-pop); flex-wrap: wrap; }
.actionbar .spacer { flex: 1; }
/* source: ispymyai/dashboard.js:8540 — ghost/text-accent button */
.tk2 .btn.ghost { background: transparent; color: var(--eu-accent); border: 1px solid var(--eu-accent-soft-2); padding: 5px 11px; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }

/* Settings-scoped button (kept — distinct compact settings button).
   source: ispymyai/dashboard.html:146–148 */
.set-btn { padding: 6px 12px; border-radius: 7px; border: 1px solid var(--eu-border); background: var(--eu-panel-2); color: var(--eu-text); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; }
.set-btn:hover { background: var(--eu-panel-3); }
.set-btn.danger { color: var(--eu-bad); }

/* Mini table-action button (kept — specialized inline row action).
   source: ispymyai/lib/connections.css:80–82 */
.cx-page .btn-mini { padding: 5px 9px; border-radius: 5px; font-size: 11px; font-weight: 500; background: transparent; color: var(--eu-muted); border: 1px solid var(--eu-border); cursor: pointer; }
.cx-page .btn-mini:hover { color: var(--eu-text); background: var(--eu-panel-2); }
.cx-page .btn-mini.danger:hover { color: var(--eu-bad); border-color: rgba(196,48,48,0.35); }

/* DEPRECATED → .tk2-btn.primary. Connections "Connect" CTA.
   source: ispymyai/lib/connections.css:89–91 */
.cx-page .connect-btn { padding: 8px 14px; border-radius: 7px; font-size: 12px; font-weight: 600; background: var(--eu-accent); color: #fff; border: 1px solid var(--eu-accent); cursor: pointer; flex-shrink: 0; }
.cx-page .connect-btn:hover { filter: brightness(1.05); }
.cx-page .connect-btn:disabled { opacity: 0.5; cursor: default; filter: none; }


/* ============================================================================
 * SECTION 4 — SEGMENTED CONTROLS
 *   canonical (settings/scopes):  .tk2-licseg
 *   canonical (inline header):    .toggle (un-scoped here; drop the .live-home prefix)
 *   canonical (pill-track):       .rl-tabs / .rl-ut
 * CONVERGENCE NOTE: .set-seg (dashboard.html) and .timerange (live-home) should
 *   converge to these three. .toggle/.theme-toggle/.timerange share one rule in
 *   live-home; reproduced here un-scoped as the canonical inline header toggle.
 * ============================================================================ */

/* --- canonical: settings/scope segmented (.tk2-licseg) --------------------- */
/* source: ispymyai/dashboard.js:8338–8343 */
.tk2-licseg-wrap { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; }
.tk2-licseg-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--eu-muted-2); }
.tk2-licseg { display: inline-flex; border: 1px solid var(--eu-border-strong); border-radius: 8px; overflow: hidden; }
.tk2-licseg button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px; border: none; background: var(--eu-bg); color: var(--eu-muted); cursor: pointer; }
.tk2-licseg button + button { border-left: 1px solid var(--eu-border-strong); }
.tk2-licseg button.on { background: var(--eu-accent); color: #fff; }

/* --- canonical: inline header toggle (.toggle) ----------------------------- */
/* source: ispymyai/lib/live-home.css:64–90 — extracted and UN-SCOPED (the live
   rule prefixes every selector with `.live-home` and bundles .theme-toggle +
   .timerange; reproduced here without the prefix as the reusable inline toggle).
   .theme-toggle uses `.is-active` for the selected state; .toggle/.timerange use `.on`. */
.toggle, .theme-toggle, .timerange {
  display: inline-flex;
  border: 1px solid var(--eu-border-strong);
  border-radius: 7px;
  overflow: hidden;
  background: var(--eu-panel);
}
.toggle button, .theme-toggle button, .timerange button {
  border: 0; border-radius: 0;
  background: transparent;
  padding: 6px 11px;
  color: var(--eu-muted);
  font-weight: 500;
  font-size: 12px;
}
.toggle button + button, .theme-toggle button + button, .timerange button + button {
  border-left: 1px solid var(--eu-border-strong);
}
.toggle button:hover, .theme-toggle button:hover, .timerange button:hover {
  color: var(--eu-text);
  background: var(--eu-panel-2);
}
.toggle button.on, .theme-toggle button.is-active, .timerange button.on {
  background: var(--eu-accent);
  color: #fff;
  font-weight: 600;
}

/* --- canonical: pill-track toggle (.rl-tabs / .rl-ut) ---------------------- */
/* source: ispymyai/lib/live-home.css:775–777 — extracted and UN-SCOPED from
   `.live-home .sb-utilization`. A filled inset track with rounded pill tabs;
   the selected tab lifts onto the panel surface. */
.rl-tabs { display: flex; gap: 3px; margin: 4px 0 11px; background: var(--eu-panel-2); border-radius: 8px; padding: 3px; }
.rl-ut { flex: 1; border: none; background: transparent; color: var(--eu-muted); font: inherit; font-size: 10.5px; font-weight: 600; padding: 5px 4px; border-radius: 6px; cursor: pointer; }
.rl-ut.on { background: var(--eu-panel); color: var(--eu-text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* DEPRECATED → converge to .tk2-licseg / .rl-tabs. Settings pill segmented.
   source: ispymyai/dashboard.html:143–145 */
.set-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 8px; background: var(--eu-panel-2); border: 1px solid var(--eu-border); }
.set-seg button { padding: 5px 13px; border-radius: 6px; border: none; background: transparent; color: var(--eu-muted); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; }
.set-seg button.on, .set-seg button.is-active { background: var(--eu-accent); color: #fff; }


/* ============================================================================
 * SECTION 5 — TABS (horizontal underline)  (canonical: .tk2-tabs / .tk2-tab)
 * DEPRECATED → tk2: .tabs (dashboard.html)
 * ============================================================================ */

/* source: ispymyai/dashboard.js:8324–8329 — supports a count via .pill, and panes */
.tk2-tabs { display: flex; gap: 4px; margin: 16px 0 22px; border-bottom: 1px solid var(--eu-border); flex-wrap: wrap; }
.tk2-tab { padding: 10px 16px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--eu-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.tk2-tab:hover { color: var(--eu-text); }
.tk2-tab.on { color: var(--eu-text); border-bottom-color: var(--eu-accent); font-weight: 600; }
.tk2-tab .pill { font-size: 10px; font-weight: 600; color: var(--eu-muted-2); background: var(--eu-panel-2); border: 1px solid var(--eu-border); padding: 1px 6px; border-radius: 999px; }
.tk2-pane { display: none; }
.tk2-pane.on { display: block; }

/* DEPRECATED → .tk2-tabs / .tk2-tab. Original underline tabs.
   source: ispymyai/dashboard.html:48–52 */
.tabs { display: flex; gap: 2px; margin: 18px 0 16px; border-bottom: 1px solid var(--eu-border); }
.tabs button { border: 0; border-radius: 0; background: none; padding: 10px 14px; font-size: 14px; font-weight: 500;
  color: var(--eu-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:hover { background: none; color: var(--eu-text); }
.tabs button.on { color: var(--eu-accent); border-bottom-color: var(--eu-accent); font-weight: 600; }


/* ============================================================================
 * SECTION 6 — VERTICAL SIDE-NAV  (SEPARATE component — keep distinct from tabs)
 *   canonical: .set-nav-* / .set-navbtn
 * ============================================================================ */

/* source: ispymyai/dashboard.html:132–138 — 4-tab settings IA (mirrors A1 .a1v3-setnav) */
.set-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: start; }
.set-nav-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--eu-muted-2); padding: 0 4px; margin-bottom: 12px; }
.set-nav-list { display: flex; flex-direction: column; gap: 1px; }
.set-navbtn { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; border: none; background: transparent; color: var(--eu-muted); cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; text-align: left; }
.set-navbtn:hover { background: var(--eu-panel-2); color: var(--eu-text); }
.set-navbtn.is-active { background: var(--eu-accent-soft); color: var(--eu-accent); font-weight: 600; }
.set-main { min-width: 0; }
/* source: ispymyai/dashboard.html:149 */
@media (max-width: 720px) { .set-wrap { grid-template-columns: 1fr; } }


/* ============================================================================
 * SECTION 7 — CARDS  (canonical: .tk2-card [+ h4, .tk2-big, .tk2-csub])
 * ============================================================================ */

/* source: ispymyai/dashboard.js:8330–8335 — row grid + canonical card */
.tk2-row { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; }
.tk2-row.r2 { grid-template-columns: 1fr 1fr; }
.tk2-card { background: var(--eu-panel); border: 1px solid var(--eu-border); border-radius: 10px; padding: 16px 18px; }
/* full-bleed variant for cards whose body is internal rows (stream/list cards); promoted for the Lab's hs-card (F4) */
.tk2-card.flush { padding: 0; overflow: hidden; }
.tk2-card h4 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--eu-muted-2); margin: 0 0 12px; }
.tk2-big { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.tk2-csub { font-size: 12px; color: var(--eu-muted); margin-top: 5px; line-height: 1.5; }

/* generic panel (kept — plain titled container).
   source: ispymyai/dashboard.html:62–63 */
.panel { background: var(--eu-panel); border: 1px solid var(--eu-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--eu-shadow-pop); }
.panel h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px; }

/* T1.1 — RoAI dimension tiles (kept — Measured/Calibrating/Roadmap state tiles).
   source: ispymyai/dashboard.js:8548–8556 */
.tk2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.tk2-tile { position: relative; border: 1px solid var(--eu-border); border-radius: 10px; background: var(--eu-panel); padding: 13px 14px 12px; }
.tk2-tile.dim { opacity: .62; }
.tk2-tile .tt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk2-tile .tt-name { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--eu-muted); min-width: 0; }
.tk2-tile .tt-val { font-size: 21px; font-weight: 650; margin: 5px 0 3px; font-variant-numeric: tabular-nums; }
.tk2-tile .tt-sub { font-size: 11.5px; color: var(--eu-muted); line-height: 1.45; }
.tk2-tile .tt-state { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; border: 1px solid var(--eu-border-strong); color: var(--eu-muted); }
.tk2-tile .tt-state.measured { color: var(--eu-good); border-color: var(--eu-good); }


/* ============================================================================
 * SECTION 8 — METRIC CARD + SUMMARY BAND  (distinct card species — both kept)
 *   .card / .n / .l         — single big-number metric card
 *   .tk2-band / .tk2-bc     — horizontal summary band (several segmented metrics)
 *   .cx-card                — specialized connection card variant
 * ============================================================================ */

/* --- metric card ----------------------------------------------------------- */
/* source: ispymyai/dashboard.html:57–60 */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.card { background: var(--eu-panel); border: 1px solid var(--eu-border); border-radius: 10px; padding: 14px 16px; box-shadow: var(--eu-shadow-pop); }
.card .n { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.card .l { color: var(--eu-muted); font-size: 11px; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }

/* --- summary band ---------------------------------------------------------- */
/* source: ispymyai/dashboard.js:8318–8323 */
.tk2-band { display: flex; align-items: stretch; flex-wrap: wrap; border: 1px solid var(--eu-border); border-radius: 10px; background: var(--eu-panel); margin: 16px 0 2px; overflow: hidden; }
.tk2-band .tk2-bc { flex: 1 1 0; min-width: 130px; padding: 11px 16px; display: flex; flex-direction: column; gap: 2px; }
.tk2-band .tk2-bc + .tk2-bc { border-left: 1px solid var(--eu-border); }
.tk2-band .tk2-bc .v { font-size: 18px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tk2-band .tk2-bc .v.up { color: var(--eu-good); }
.tk2-band .tk2-bc .l { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--eu-muted-2); }
@media (max-width: 820px) { .tk2-band .tk2-bc + .tk2-bc { border-left: none; border-top: 1px solid var(--eu-border); } .tk2-band .tk2-bc { flex: 1 1 46%; } }

/* --- specialized connection card (.cx-card) -------------------------------- */
/* source: ispymyai/lib/connections.css:28–66 */
.cx-page .cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; padding: 14px 18px 18px; }
.cx-page .cx-card { background: var(--eu-bg); border: 1px solid var(--eu-border); border-radius: 9px; padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; transition: border-color 120ms; }
.cx-page .cx-card:hover { border-color: var(--eu-border-strong); }
.cx-page .cx-card.connected { border-left: 3px solid var(--eu-good); padding-left: 11px; }
.cx-page .cx-card .card-top { display: flex; align-items: center; gap: 9px; }
.cx-page .cx-card .brand-name { font-size: 13px; font-weight: 600; color: var(--eu-text); flex: 1; min-width: 0; }
.cx-page .cx-card .brand-sub { font-size: 10.5px; color: var(--eu-muted-2); margin-top: 1px; }
.cx-page .cx-card .card-stats { display: flex; gap: 12px; font-size: 11px; color: var(--eu-muted); padding-top: 8px; border-top: 1px dashed var(--eu-border); }
.cx-page .cx-card .card-stats .stat { display: flex; flex-direction: column; }
.cx-page .cx-card .card-stats .stat .v { color: var(--eu-text); font-weight: 600; font-size: 12px; }
.cx-page .cx-card .card-stats .stat .l { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--eu-muted-2); }
.cx-page .cx-add-card { background: transparent; border: 1.5px dashed var(--eu-border-strong); color: var(--eu-muted); border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 500; cursor: pointer; min-height: 96px; }
.cx-page .cx-add-card:hover { border-color: var(--eu-accent); color: var(--eu-accent); background: var(--eu-accent-soft); }
/* status dot (used on .cx-card.card-top) */
.cx-page .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cx-page .status-dot.healthy { background: var(--eu-good); }
.cx-page .status-dot.muted { background: var(--eu-muted-2); }
.cx-page .status-dot.warn { background: var(--eu-warn); }


/* ============================================================================
 * SECTION 9 — BARS  (both kept — different shapes)
 *   .track / .fill          — generic progress fill primitive
 *   .tk2-bar (lab/track/val) — labeled metric bar row
 * ============================================================================ */

/* --- generic fill primitive ------------------------------------------------ */
/* source: ispymyai/dashboard.html:68–69 */
.track { background: var(--eu-panel-2); border-radius: 3px; height: 6px; overflow: hidden; }
.fill { height: 100%; border-radius: 3px; background: var(--eu-accent); }

/* generic row that pairs a label + .track + value (kept).
   source: ispymyai/dashboard.html:65–70 */
.row { display: grid; grid-template-columns: 170px 1fr 64px; align-items: center; gap: 12px; margin: 9px 0; }
.row .lbl { font-size: 13px; }
.row .lbl small { color: var(--eu-muted); display: block; font-size: 11px; margin-top: 1px; }

/* --- mini bar curve (promoted from the Lab, F5 2026-07-22) ------------------ */
/* Tiny inline bar histogram (e.g. the work-hours curve); .peak highlights the max. */
.curve-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--eu-border); }
.curve-lbl { font-size: 11px; color: var(--eu-muted); margin-bottom: 8px; display: flex; justify-content: space-between; }
.curve-lbl b { color: var(--eu-text); }
.curve { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.curve i { flex: 1; background: var(--eu-accent-soft-2); border-radius: 2px 2px 0 0; }
.curve i.peak { background: var(--eu-accent); }
.curve-ax { display: flex; justify-content: space-between; font-size: var(--font-xs); color: var(--eu-muted-2); margin-top: 4px; }
.row .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--eu-text); font-size: 12px; }

/* --- labeled metric bar (.tk2-bar) ----------------------------------------- */
/* source: ispymyai/dashboard.js:8366–8371 */
.tk2-bar { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 12.5px; border-top: 1px solid var(--eu-border); }
.tk2-bar:first-child { border-top: none; }
.tk2-bar .lab { flex: 0 0 150px; color: var(--eu-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk2-bar .track { flex: 1; height: 7px; background: var(--eu-panel-2); border-radius: 4px; overflow: hidden; }
.tk2-bar .fill { height: 100%; background: var(--eu-accent); border-radius: 4px; }
.tk2-bar .val { min-width: 88px; text-align: right; font-variant-numeric: tabular-nums; color: var(--eu-text); }


/* ============================================================================
 * SECTION 10 — CHIPS
 *   canonical baseline:  .chip  (token-driven capsule; consumes --chip-* tokens)
 *   current variants:    .tk2-chip (+.conn/.det), .cap (connection capability)
 * CONVERGENCE NOTE: nine ad-hoc chip/pill/tag variants exist across the app and
 *   should converge onto `.chip` + semantic modifiers:
 *     .actor / .actor-email / .actor-uuid / .actor-unknown  (dashboard.html:95–101)
 *     .sfc / .sfc-chat / .sfc-cowork / .sfc-code            (dashboard.html:78–83)
 *     .state-pill (.auto/.assisted/.manual)                 (live-home.css:1682)
 *     .wf-tag                                               (live-home.css:1696)
 *     .tk2-covtag (.shared/.team/.personal)                 (dashboard.js:8361)
 *     .tk2-nm-tag                                           (dashboard.js:8357)
 *     .helper-health-pill                                   (live-home.css:42)
 *   They are intentionally NOT all reproduced here — they remain in their
 *   page-scoped sheets until migrated.
 * ============================================================================ */

/* --- CANONICAL token-driven chip ------------------------------------------- */
/* synthesized from tokens.css §(ii) CHIP BASELINE — consumes --chip-* vars so it
   flips with the active theme automatically. A quiet 999px capsule label.
   (tokens.css:117–132 documents this baseline; this is its utility realization.) */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--chip-text);
  padding: var(--chip-padding-y) var(--chip-padding-x);
  border-radius: var(--chip-radius);
  border: var(--chip-border-w) solid var(--chip-border-color);
  background: var(--chip-bg);
  color: var(--eu-muted);
  font-weight: 600;
  white-space: nowrap;
}
.chip.on, .chip.active {
  background: var(--chip-bg-active);
  color: var(--chip-text-active);
  border-color: var(--eu-accent-soft-2);
}

/* --- semantic modifiers (C1 additive step, 2026-07-22) ---------------------- */
/* The convergence targets for the nine ad-hoc variants. Tints derive from the
   semantic token via color-mix so they flip with the theme (unlike the rgba
   literals in the legacy variants below). DS page: docs/anthrome-design-system/
   components/chip.md */
.chip.good   { color: var(--eu-good);   border-color: color-mix(in srgb, var(--eu-good) 30%, transparent);   background: color-mix(in srgb, var(--eu-good) 10%, transparent); }
.chip.warn   { color: var(--eu-warn);   border-color: color-mix(in srgb, var(--eu-warn) 30%, transparent);   background: color-mix(in srgb, var(--eu-warn) 10%, transparent); }
.chip.bad    { color: var(--eu-bad);    border-color: color-mix(in srgb, var(--eu-bad) 30%, transparent);    background: color-mix(in srgb, var(--eu-bad) 10%, transparent); }
.chip.accent { color: var(--eu-accent); border-color: var(--eu-accent-soft-2); background: var(--eu-accent-soft); }

/* NOTE: dashboard.html also defines a LARGER interactive .chip (13px text, padding
   5px 12px) used in the legacy chip strip — DEPRECATED in favor of the token chip
   above. source: ispymyai/dashboard.html:73–75
   .chip { background: var(--eu-panel-2); border: 1px solid var(--eu-border); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--eu-text); }
   .chip:hover { border-color: var(--eu-accent); background: var(--eu-accent-soft); }
   .chip b { color: var(--eu-accent); } */

/* --- filter pill + vendor badge dots (promoted from the Lab, F5 2026-07-22) --- */
/* .h-filter: a rect filter pill (multi-select filters) — deliberately NOT the capsule
   chip (C8 resolved the collision by this name). .mix: tiny vendor-dot strip riding
   the --badge-* tokens. */
.h-filter { padding: 5px 11px; border-radius: 7px; border: 1px solid var(--eu-border-strong); background: var(--eu-bg); color: var(--eu-muted); font-size: var(--font-sm); font-weight: 600; cursor: pointer; }
.h-filter.on { background: var(--eu-accent-soft-2); border-color: var(--eu-accent-ring); color: var(--eu-accent); }
.mix { display: inline-flex; gap: 3px; }
.mix i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.t-claude { background: var(--badge-claude); } .t-gemini { background: var(--badge-gemini); }
.t-openai { background: var(--badge-openai); } .t-pplx { background: var(--badge-perplexity); }

/* --- current variant: .tk2-chip (status chip) ------------------------------ */
/* source: ispymyai/dashboard.js:8375–8377 */
.tk2-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; border: 1px solid var(--eu-border); background: var(--eu-panel-2); color: var(--eu-muted); }
.tk2-chip.conn { color: var(--eu-good); border-color: rgba(108,212,154,.3); background: rgba(108,212,154,.1); }
.tk2-chip.det { color: var(--eu-warn); border-color: rgba(245,183,107,.3); background: rgba(245,183,107,.1); }

/* --- current variant: .cap (connection capability tag) --------------------- */
/* source: ispymyai/lib/connections.css:20–26 */
.cx-page .cx-section-head .cap {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.cx-page .cap.unlimited { background: rgba(15,138,108,0.10); color: var(--eu-accent-2); border: 1px solid rgba(15,138,108,0.28); }
.cx-page .cap.one-per { background: rgba(38,96,214,0.10); color: var(--eu-accent); border: 1px solid rgba(38,96,214,0.28); }
.cx-page .cap.auto-detect { background: rgba(124,138,163,0.14); color: var(--eu-muted); border: 1px solid rgba(124,138,163,0.30); }


/* ============================================================================
 * SECTION 11 — TABLES / GRID ROWS  (documented patterns — all kept)
 *   .atable                 — native HTML table
 *   .tk2-acct / .tk2-lic    — CSS-grid "row card" patterns
 * ============================================================================ */

/* --- native table (.atable) ------------------------------------------------ */
/* source: ispymyai/dashboard.html:112–118 */
.atable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.atable th, .atable td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--eu-border); }
.atable th { font-size: 11px; font-weight: 600; color: var(--eu-muted); letter-spacing: 0.03em; text-transform: uppercase; }
.atable th.num, .atable td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* totals row (promoted from the Lab's .ptbl tr.tot, F4 2026-07-22) */
.atable tr.tot td { font-weight: 700; background: var(--eu-panel-2); }
.atable .conf-exact { color: var(--eu-good); font-weight: 600; }
.atable .conf-approximate { color: var(--eu-warn); font-weight: 600; }
.atable .conf-mixed { color: var(--eu-muted); font-weight: 600; }

/* --- grid "row card" (.tk2-acct) ------------------------------------------- */
/* source: ispymyai/dashboard.js:8372–8374 */
.tk2-acct { display: grid; grid-template-columns: 1.6fr .7fr 1.3fr auto; gap: 12px; align-items: center; padding: 11px 14px; background: var(--eu-panel); border: 1px solid var(--eu-border); border-radius: 9px; margin-bottom: 8px; font-size: 12.5px; }
.tk2-acct .nm { font-weight: 600; font-size: 13px; }
.tk2-acct .mu { color: var(--eu-muted); font-size: 11.5px; }

/* --- grid "row card" (.tk2-lic) -------------------------------------------- */
/* source: ispymyai/dashboard.js:8388–8392 */
.tk2-lic { display: grid; grid-template-columns: 1.7fr .8fr 1fr 1.1fr; gap: 12px; align-items: center; padding: 12px 14px; background: var(--eu-panel); border: 1px solid var(--eu-border); border-radius: 9px; margin-bottom: 8px; font-size: 12.5px; }
.tk2-lic .nm { font-weight: 600; font-size: 13px; }
.tk2-lic .mu { color: var(--eu-muted); font-size: 11.5px; }
.tk2-lic .cost { font-weight: 600; font-variant-numeric: tabular-nums; }

/* expand-into-drawer treatment shared by .tk2-acct / .tk2-lic (kept).
   source: ispymyai/dashboard.js:8408–8416 */
.tk2-row-wrap { margin-bottom: 8px; }
.tk2-row-wrap .tk2-acct, .tk2-row-wrap .tk2-lic { margin-bottom: 0; }
.tk2-acct.clickable, .tk2-lic.clickable { cursor: pointer; }
.tk2-acct.clickable:hover, .tk2-lic.clickable:hover { border-color: var(--eu-border-strong); }
.tk2-caret { justify-self: end; color: var(--eu-muted-2); font-size: 11px; transition: transform .15s; user-select: none; }
.tk2-row-wrap.open .tk2-caret { transform: rotate(180deg); }
.tk2-row-wrap.open .tk2-acct, .tk2-row-wrap.open .tk2-lic { border-radius: 9px 9px 0 0; border-bottom-color: transparent; }
.tk2-detail { display: none; border: 1px solid var(--eu-border); border-top: none; border-radius: 0 0 9px 9px; padding: 14px 16px 16px; background: var(--eu-panel-2); }
.tk2-row-wrap.open .tk2-detail { display: block; }


/* ============================================================================
 * SECTION 12 — BANNERS / EMPTY / ALERTS
 *   .banner              — quiet info banner
 *   .tk2-empty           — dashed empty state
 *   .tk2-needsmap-box    — warn callout
 *   .tk2 .callout        — accent callout (also kept)
 * CONVERGENCE NOTE: converge to the canonical `.alert` below (C3). Legacy variants
 *   reproduced verbatim until their call sites migrate (first migrated: the Lab's
 *   .h-banner → .alert.info, 2026-07-22).
 * ============================================================================ */

/* --- CANONICAL alert (C3 target) ------------------------------------------- */
/* One box, severity variants. Tints derive from tokens via color-mix (theme rule 5).
   Page layout (margins) stays page-owned. */
.alert { border: 1px solid var(--eu-border); border-radius: 8px; padding: 9px 12px; font-size: 12px; color: var(--eu-muted); }
.alert b { color: var(--eu-text); }
.alert.info { background: var(--eu-accent-soft); }
.alert.accent { background: var(--eu-accent-soft); border-color: var(--eu-accent-ring); color: var(--eu-text); }
.alert.warn { background: color-mix(in srgb, var(--eu-warn) 8%, transparent); border-color: color-mix(in srgb, var(--eu-warn) 30%, transparent); }
.alert.empty { padding: 30px 20px; text-align: center; border-style: dashed; border-color: var(--eu-border-strong); border-radius: 10px; font-size: 13px; background: transparent; }

/* --- info banner ----------------------------------------------------------- */
/* source: ispymyai/dashboard.html:54 */
.banner { background: var(--eu-accent-soft); border: 1px solid var(--eu-border); color: var(--eu-muted);
  border-radius: 8px; padding: 9px 12px; font-size: 12px; margin-bottom: 16px; }

/* --- dashed empty state ---------------------------------------------------- */
/* source: ispymyai/dashboard.js:8378–8379 */
.tk2-empty { padding: 30px 20px; text-align: center; color: var(--eu-muted); border: 1px dashed var(--eu-border-strong); border-radius: 10px; font-size: 13px; }
.tk2-empty b { display: block; color: var(--eu-text); margin-bottom: 3px; }

/* --- warn callout ("Needs a Person") --------------------------------------- */
/* source: ispymyai/dashboard.js:8345–8348 */
.tk2-needsmap-box { border: 1px solid var(--eu-warn, #c77d00); border-radius: 10px; background: color-mix(in srgb, var(--eu-warn, #c77d00) 7%, transparent); padding: 12px 14px; margin: 0 0 16px; }
.tk2-nm-hdr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.tk2-nm-hdr b { font-size: 13px; font-weight: 700; color: var(--eu-warn, #c77d00); }
.tk2-nm-hdr span { font-size: 12px; color: var(--eu-muted); }

/* --- accent callout -------------------------------------------------------- */
/* source: ispymyai/dashboard.js:8493–8496 */
.tk2 .callout { display: flex; gap: 14px; align-items: flex-start; background: var(--eu-accent-soft); border: 1px solid var(--eu-accent-soft-2); border-left: 3px solid var(--eu-accent); border-radius: 8px; padding: 13px 16px; margin: 14px 0 18px; font-size: 12.5px; color: var(--eu-muted); line-height: 1.55; }
.tk2 .callout b { color: var(--eu-text); font-weight: 600; }
.tk2 .callout .ic { color: var(--eu-accent); flex-shrink: 0; margin-top: 2px; }

/* --- insight line (accent left-border, kept) ------------------------------- */
/* source: ispymyai/dashboard.js:8558–8559 */
.tk2-insight { margin: 2px 0 6px; padding: 10px 13px; border: 1px solid var(--eu-border); border-left: 3px solid var(--eu-accent); border-radius: 9px; background: var(--eu-panel); font-size: 12.5px; color: var(--eu-muted); }
.tk2-insight b { color: var(--eu-text); }


/* ============================================================================
 * SECTION 13 — MODALS  (canonical: .tk2-ov / .tk2-modal)
 * DEPRECATED → tk2: .modal-ov / .modal-card (dashboard.html),
 *                   .wiz-* (connections.css guided-connect wizard)
 * ============================================================================ */

/* source: ispymyai/dashboard.js:8396–8406 */
.tk2-ov { position: fixed; inset: 0; background: rgba(5,8,14,.55); display: none; align-items: flex-start; justify-content: center; padding: 60px 20px; z-index: 9999; overflow: auto; }
.tk2-ov.open { display: flex; }
.tk2-modal { background: var(--eu-bg); border: 1px solid var(--eu-border-strong); border-radius: 12px; width: 100%; max-width: 480px; box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.tk2-modal .mh { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--eu-border); }
.tk2-modal .mh h3 { font-size: 16px; font-weight: 600; margin: 0; }
.tk2-modal .mh .x { background: none; border: none; color: var(--eu-muted); font-size: 20px; cursor: pointer; line-height: 1; }
.tk2-modal .mb { padding: 16px 20px; display: grid; gap: 12px; }
.tk2-modal label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--eu-muted-2); display: block; margin-bottom: 4px; }
.tk2-modal input, .tk2-modal select { width: 100%; background: var(--eu-panel-2); border: 1px solid var(--eu-border-strong); border-radius: 7px; padding: 8px 10px; color: var(--eu-text); font: inherit; font-size: 13px; }
.tk2-modal .mf2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tk2-modal .mfoot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--eu-border); }

/* DEPRECATED → .tk2-ov / .tk2-modal. Team modals overlay + card.
   source: ispymyai/dashboard.html:126–127 */
.modal-ov { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-card { background: var(--eu-panel); border: 1px solid var(--eu-border); border-radius: 12px; padding: 18px 20px; width: 380px; max-width: calc(100vw - 40px); box-shadow: var(--eu-shadow-pop); }

/* DEPRECATED → .tk2-ov / .tk2-modal. Guided-connect wizard (animated, scrim + card).
   source: ispymyai/lib/connections.css:110–127 */
.wiz-scrim { position: fixed; inset: 0; background: rgba(15,23,42,0.30); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 240ms; }
.wiz-scrim.open { opacity: 1; pointer-events: auto; }
.wiz-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%);
  width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow-y: auto;
  background: var(--eu-bg); border: 1px solid var(--eu-border-strong); border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(15,23,42,0.30), 0 4px 12px -4px rgba(15,23,42,0.10);
  z-index: 70; opacity: 0; pointer-events: none;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), opacity 200ms;
}
.wiz-modal.open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }


/* ============================================================================
 * SECTION 14 — NET-NEW (from /harness mockup 26)
 * ----------------------------------------------------------------------------
 * Candidate components extracted from docs/a1-v3-mockups/26-sample-harness.html.
 * Not yet shipped into the app — promote into the system if adopted.
 * NOTE: mockup 26 redefines `.chips`/`.chip` as a 7px-radius RECT filter pill
 *   (distinct from the Section-10 capsule chip). Kept here under the harness
 *   namespace; reconcile with the canonical .chip before promoting.
 * ============================================================================ */

/* --- harness filter chips (rect variant) ----------------------------------- */
/* source: docs/a1-v3-mockups/26-sample-harness.html:111–113 */
.chips { display: inline-flex; gap: 7px; flex-wrap: wrap; }
/* (harness .chip — rect filter pill; see reconcile note above)
   .chip { padding: 5px 11px; border-radius: 7px; border: 1px solid var(--eu-border-strong); background: var(--eu-bg); color: var(--eu-muted); font-size: 11.5px; font-weight: 600; cursor: pointer; }
   .chip.on { background: var(--eu-accent-soft-2); border-color: var(--eu-accent-ring); color: var(--eu-accent); } */

/* --- persona checklist (.plist / .prow / .cbx) ----------------------------- */
/* source: docs/a1-v3-mockups/26-sample-harness.html:115–129 */
.plist { border: 1px solid var(--eu-border); border-radius: 9px; overflow: hidden; }
.prow { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--eu-border); cursor: pointer; }
.prow:last-child { border-bottom: none; }
.prow:hover { background: var(--eu-panel-2); }
.prow.off { opacity: .42; }
.cbx { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--eu-border-strong); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
.prow.on .cbx { background: var(--eu-accent); border-color: var(--eu-accent); }
.pname { font-size: 13px; font-weight: 600; }
.pmeta { font-size: 11px; color: var(--eu-muted-2); font-weight: 400; }
.pstat { text-align: right; font-size: 11px; color: var(--eu-muted); font-variant-numeric: tabular-nums; }
.pstat b { color: var(--eu-text); }
.plist-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--eu-panel-2); border-top: 1px solid var(--eu-border); font-size: 11.5px; }

/* --- numeric seed input (.seedbox) ----------------------------------------- */
/* source: docs/a1-v3-mockups/26-sample-harness.html:129 */
.seedbox { width: 84px; padding: 6px 9px; background: var(--eu-bg); border: 1px solid var(--eu-border-strong); border-radius: 7px; color: var(--eu-text); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* --- projection table (.ptbl) ---------------------------------------------- */
/* source: docs/a1-v3-mockups/26-sample-harness.html:131–137 */
.ptbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ptbl th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--eu-muted-2); padding: 7px 8px; border-bottom: 1px solid var(--eu-border); }
.ptbl th.r, .ptbl td.r { text-align: right; font-variant-numeric: tabular-nums; }
.ptbl td { padding: 8px; border-bottom: 1px solid var(--eu-border); vertical-align: middle; }
.ptbl tr:last-child td { border-bottom: none; }
.ptbl tr.tot td { font-weight: 700; background: var(--eu-panel-2); }
.who { font-weight: 600; }
.who small { display: block; color: var(--eu-muted-2); font-weight: 400; font-size: 10.5px; }

/* --- tool-mix dots (.mix) -------------------------------------------------- */
/* source: docs/a1-v3-mockups/26-sample-harness.html:138–139 */
.mix { display: inline-flex; gap: 3px; }
.mix i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.t-claude { background: var(--badge-claude); }
.t-gemini { background: var(--badge-gemini); }
.t-openai { background: var(--badge-openai); }
.t-pplx { background: var(--badge-perplexity); }

/* --- work-hours curve (.curve) --------------------------------------------- */
/* source: docs/a1-v3-mockups/26-sample-harness.html:141–146 */
.curve-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--eu-border); }
.curve-lbl { font-size: 11px; color: var(--eu-muted); margin-bottom: 8px; display: flex; justify-content: space-between; }
.curve { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.curve i { flex: 1; background: var(--eu-accent-soft-2); border-radius: 2px 2px 0 0; }
.curve i.peak { background: var(--eu-accent); }
.curve-ax { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--eu-muted-2); margin-top: 4px; }

/* --- sticky action bar (.actionbar) ---------------------------------------- */
/* source: docs/a1-v3-mockups/26-sample-harness.html:148–151 */
.actionbar { position: sticky; bottom: 0; margin-top: 20px; display: flex; align-items: center; gap: 12px; padding: 13px 18px; background: var(--eu-panel); border: 1px solid var(--eu-border-strong); border-radius: 10px; box-shadow: var(--eu-shadow-pop); }
.spacer { flex: 1; }
.runinfo { font-size: 11.5px; color: var(--eu-muted-2); }
.runinfo b { color: var(--eu-muted); }
.livedot { width: 7px; height: 7px; border-radius: 50%; background: #06251a; display: inline-block; }

/* ============================================================================
 * SECTION 15 — RADIAL: concentric rings / gauges / donuts
 *   the "concentric circles" family — utilization viz (Claude 5-Hour / Weekly)
 *   builders (SVG, drawn in JS — ispymyai/dashboard.js):
 *     _cuDoubleRing(outer, inner, nearest)  — outer=5-Hour, inner=Weekly  (L9225)
 *     _cuGauge(util, big, small)            — single gauge                (L9237)
 *     _cuDonut(util, label, neutral)        — seat donut                  (L9246)
 *   color tiers _cuTier(util) (L9215): 0–50 good · >50–75 yellow · >75–90 orange · >90 bad
 *   SVG geometry (offset = dash × (1 − util/100); transform rotate(-90); stroke=tier color):
 *     double-ring 116×116 — outer r=50 dash 314.2, inner r=37 dash 232.5, stroke-width 8
 *     gauge      104/120  — r=52 dash 327, stroke-width 9
 *     donut       62/64   — r=26 dash 163.4, stroke-width 6
 * SCOPE NOTE: shipped CSS is scoped under `.cu` (Consumption page, dashboard.js cu-style)
 *   and `.live-home .sb-utilization .rl-ring` (the Live scoreboard tile — smaller .rr ring +
 *   layout variants: .stacked / .sidebyside / .barsviz + .rl-viz toggle + .rl-pager). Reproduced
 *   here UN-SCOPED as the DS component (the layout variants stay page-owned in live-home.css).
 *   CONVERGENCE: un-scope `.cu`/`.sb-utilization` ring CSS into these DS classes (design-system C9).
 * ============================================================================ */

/* --- concentric double-ring (.dring / .ctr) — source: dashboard.js:9575 --- */
.dring { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.dring .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dring .ctr b { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.dring .ctr small { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--eu-muted-2); margin-top: 3px; }

/* --- single gauge (.gauge-wrap / .gauge-val) — source: dashboard.js:9561 --- */
.gauge-wrap { position: relative; width: 104px; height: 104px; }
.gauge-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-val b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.gauge-val small { font-size: 9px; letter-spacing: .10em; text-transform: uppercase; color: var(--eu-muted-2); margin-top: 3px; }

/* --- seat donut (.seat-donut) — source: dashboard.js:9604 --- */
.seat-donut { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.seat-donut b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- ring legend (dot + name + value + sub) — source: dashboard.js:9574,9579 --- */
.win-rings { display: flex; align-items: center; gap: 18px; }
.ring-legend { flex: 1; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.ring-legend .rl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ring-legend .rl .rd { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ring-legend .rl .rn { font-weight: 600; flex: 0 0 56px; }
.ring-legend .rl b { font-variant-numeric: tabular-nums; }
.ring-legend .rl .rs { margin-left: auto; font-size: 11px; color: var(--eu-muted-2); }

/* --- UTILIZATION TILE layout contract (AGENTMAPS-UTIL-WIDGET-CONSISTENCY-01) ---
   The Live "Utilization" tile composes a radial above into a paged tile. Two layout rules,
   canonical (the CSS lives in live-home.css scoped under `.live-home .sb-utilization` until
   C9 un-scopes it; documented here so the contract is in the system):
     1. The Team seat-tier chip (Standard / Premium) ALWAYS sits on its OWN line 2, under the
        account name — identical across BOTH viz (concentric ring `.sidebyside` + bars `.barsviz`).
        Header reserves 2 lines so no-tier accounts (e.g. Claude Max) start the body at the same y.
     2. ONE tile height across ring / bars / quota (min-height 164px + matched bottom margin) so
        paging the column never resizes it. The ring-with-chip is the tallest natural variant
        (header 47 + gap 12 + 104px ring = 163) → every variant is pinned to it.
   Verified: all variants render at an identical 234px tile height; chip on line 2 in both viz. */


/* ============================================================================
 * SECTION 15 — ROSTER LIST (checkbox list)  (promoted from the Lab, F5 2026-07-22)
 *   .plist > .prow (.on/.off) > .cbx + .pname/.pmeta + .pstat · .plist-foot
 *   A selectable roster: row = checkbox + name/meta + right-aligned stat.
 *   .cbx check color is #fff on the accent fill (sanctioned filled-contrast convention).
 * ============================================================================ */
.plist { border: 1px solid var(--eu-border); border-radius: 9px; overflow: hidden; }
.prow { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--eu-border); cursor: pointer; }
.prow:last-child { border-bottom: none; }
.prow:hover { background: var(--eu-panel-2); }
.prow.off { opacity: .42; }
.cbx { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--eu-border-strong); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
.prow.on .cbx { background: var(--eu-accent); border-color: var(--eu-accent); }
.pname { font-size: var(--font-md); font-weight: 600; }
.pmeta { font-size: 11px; color: var(--eu-muted-2); font-weight: 400; }
.pstat { text-align: right; font-size: 11px; color: var(--eu-muted); font-variant-numeric: tabular-nums; }
.pstat b { color: var(--eu-text); }
.plist-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--eu-panel-2); border-top: 1px solid var(--eu-border); font-size: var(--font-sm); }

/* ============================================================================
 * SECTION 16 — INPUTS (baseline)  (seed promoted from the Lab, F5 2026-07-22)
 *   .seedbox — compact numeric input (tabular-nums). The inputs family grows from
 *   here; propose new input shapes into this section + the DS inputs page.
 * ============================================================================ */
.seedbox { width: 84px; padding: 6px 9px; background: var(--eu-bg); border: 1px solid var(--eu-border-strong); border-radius: 7px; color: var(--eu-text); font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ============================================================================
 * END — components.css
 * ============================================================================ */