/* ── Codenous type — vendored locally, no CDN dependency ──────────────────
   Golos Text (headings) + Inter (body), latin subset only, static weights. */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/golos-500.woff2') format('woff2'); }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/golos-600.woff2') format('woff2'); }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/golos-700.woff2') format('woff2'); }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/golos-800.woff2') format('woff2'); }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/golos-900.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/inter-800.woff2') format('woff2'); }

/* ── Codenous Design System ────────────────────────────────────────────────
   Token order: (1) raw brand swatches from the style guide, theme-invariant;
   (2) theme-aware surface/text tokens — dark values here on bare :root, light
   overrides further below; (3) accent/gradient — same in both themes, the
   brand mark stays recognizable regardless of background. */
:root {
  /* Brand swatches (Codenous style guide) — reference these by name only
     when a raw brand color is needed outside the semantic tokens below. */
  --brand-ebony:         #101524;
  --brand-chambray:      #383D8B;
  --brand-linkwater:     #DBE3F6;
  --brand-tahiti-gold:   #F58706;
  --brand-dusty-gray:    #999999;
  --brand-red-violet:    #B91E79;
  --brand-chateau-green: #3CA258;
  --brand-cinnabar:      #E1351E;

  color-scheme: dark;

  /* Depth planes (dark theme — default) */
  --bg:           #101524;
  --sidebar:      #151A2E;
  --surface:      #191F35;
  --surface-2:    #212843;
  --surface-3:    #2B3355;

  /* Borders */
  --border:       #2E3557;
  --border-light: #3E4874;

  /* Text */
  --text:         #F1EEFB;
  --text-muted:   #9096BC;
  --text-dim:     #5B6190;

  /* Subtle overlays for hover/active washes — lighten on dark, darken on light */
  --overlay-1: rgba(255, 255, 255, 0.04);
  --overlay-2: rgba(255, 255, 255, 0.07);

  /* Brand mark — the official artwork, one file per theme (blue "C" on light
     backgrounds, white "C" on dark), with the wordmark tracking the same
     color. The badged variants are reserved for the favicon, which must read
     on its own against browser chrome rather than the page. */
  --logo-mark-url: url('logo-mark-white.png');
  --logo-fg: #FFFFFF;

  /* Brand accent — warm gradient (Tahiti Gold → Cinnabar → Red Violet),
     identical across themes so the mark stays recognizable everywhere. */
  --accent-orange: #F58706;
  --accent-pink:   #B91E79;
  --accent:        #F58706;
  --accent-light:  #FFA53D;
  --accent-glow:   rgba(245, 135, 6, 0.20);
  --accent-glow2:  rgba(245, 135, 6, 0.09);
  --accent-gradient: linear-gradient(135deg, #F58706 0%, #E1351E 55%, #B91E79 100%);
  --accent-text-gradient: linear-gradient(90deg, #F58706 0%, #E1351E 50%, #B91E79 100%);
  --accent-shadow: rgba(245, 135, 6, 0.32);

  /* Graph node palette (entity legend — kept distinct from brand accent) */
  --node-blue:    #4E9FE5;
  --node-green:   #3DB87A;
  --node-red:     #E5534B;
  --node-gold:    #D4A843;
  --node-purple:  #9470E8;
  --node-indigo:  #4A6FD4;
  --node-amber:   #D4773A;
  --node-gray:    #6B8097;

  /* Categorical chart slots — assigned in fixed order, never cycled past 8.
     Each theme gets steps chosen for its own surface rather than one array
     shared by both; the values here are stepped for the dark surface.
     Orange leads so a chart opens on the brand hue. Validated as a set (worst
     adjacent CVD ΔE 8.4 dark / 9.1 light, normal-vision 19.3 / 19.6) — the
     single hardcoded array these replace failed outright, with purple and blue
     at ΔE 1.5 under deuteranopia. Re-run the validator before reordering. */
  --series-1: #d95926;  /* orange  */
  --series-2: #3987e5;  /* blue    */
  --series-3: #199e70;  /* aqua    */
  --series-4: #c98500;  /* yellow  */
  --series-5: #d55181;  /* magenta */
  --series-6: #008300;  /* green   */
  --series-7: #9085e9;  /* violet  */
  --series-8: #e66767;  /* red     */

  --radius:    6px;
  --radius-sm: 4px;
  --radius-lg: 10px;

  --font:         'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-heading: 'Golos Text', var(--font);
  --font-mono:    "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;

  --sidebar-edge: linear-gradient(to bottom, transparent 5%, var(--accent-orange) 35%, var(--accent-pink) 65%, transparent 95%);
}

/* ── Light theme ────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:           #FFFFFF;
    --sidebar:      #F5F7FC;
    --surface:      #FFFFFF;
    --surface-2:    #F0F3FA;
    --surface-3:    #E4E9F5;
    --border:       #DBE3F6;
    --border-light: #C3CEEA;
    --text:         #101524;
    --text-muted:   #4E5474;
    --text-dim:     #868DAE;
    --overlay-1: rgba(16, 21, 36, 0.035);
    --overlay-2: rgba(16, 21, 36, 0.06);
    --logo-mark-url: url('logo-mark-blue.png');
    --logo-fg: var(--brand-chambray);
    /* Same eight hues, re-stepped for the light surface. */
    --series-1: #eb6834;
    --series-2: #2a78d6;
    --series-3: #1baf7a;
    --series-4: #eda100;
    --series-5: #e87ba4;
    --series-6: #008300;
    --series-7: #4a3aa7;
    --series-8: #e34948;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:           #FFFFFF;
  --sidebar:      #F5F7FC;
  --surface:      #FFFFFF;
  --surface-2:    #F0F3FA;
  --surface-3:    #E4E9F5;
  --border:       #DBE3F6;
  --border-light: #C3CEEA;
  --text:         #101524;
  --text-muted:   #4E5474;
  --text-dim:     #868DAE;
  --overlay-1: rgba(16, 21, 36, 0.035);
  --overlay-2: rgba(16, 21, 36, 0.06);
  --logo-mark-url: url('logo-mark-blue.png');
  --logo-fg: var(--brand-chambray);
  /* Same eight hues, re-stepped for the light surface. */
  --series-1: #eb6834;
  --series-2: #2a78d6;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* ── App shell ──────────────────────────────────────────────────────────── */
#app { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
#sidebar {
  width: 224px;
  min-width: 224px;
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 16px;
  position: relative;
}

#sidebar::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 1px;
  height: 100%;
  background: var(--sidebar-edge);
  opacity: 0.35;
  pointer-events: none;
}

/* ── Logo — two-line brand lockup ───────────────────────────────────────── */
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  text-decoration: none;
}

/* The artwork itself swaps per theme via --logo-mark-url (see above), so the
   mark stays legible on both the dark and light sidebar. */
.logo-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block;
  background-image: var(--logo-mark-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.topbar-mark {
  width: 20px;
  height: 20px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.logo-app {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--logo-fg);
  line-height: 1.1;
}

.logo-company {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  line-height: 1;
}

/* ── Identity badge — "who am I signed in as", distinct from the data-scope
   selectors below (which user/project's data to view) ───────────────────── */
#identity-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: calc(100% - 28px);
  margin: 4px 14px 6px;
  padding: 6px 10px;
  background: var(--accent-glow2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent-light);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
#identity-badge:hover { background: var(--accent-glow); }
#identity-badge:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 1px; }
#identity-badge[aria-expanded="true"] .nav-chev { transform: rotate(0deg); }
#identity-badge .nav-chev { transform: rotate(-90deg); }

#account-menu { display: flex; flex-direction: column; margin-bottom: 4px; }

/* ── Project / user selectors — project nests visually under user ───────── */
#user-selector { padding: 8px 10px 3px; }

#project-selector {
  padding: 3px 10px 8px 24px;
  position: relative;
}

/* Tree connector: signals "this project belongs to the user above" */
#project-selector::before {
  content: "";
  position: absolute;
  left: 16px;
  top: -3px;
  width: 8px;
  height: 15px;
  border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  border-radius: 0 0 0 5px;
}

.project-label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  padding: 5px 9px;
}

#project-selector select,
#user-selector select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 5px 28px 5px 9px;
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235B7899' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

#project-selector select:focus,
#user-selector select:focus { outline: none; border-color: var(--accent); }

/* ── Navigation ─────────────────────────────────────────────────────────── */
nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  flex: 1;
}

/* ── Nav groups ─────────────────────────────────────────────────────────────
   Related panels are grouped so the sidebar reads as a few subjects rather
   than one flat list of ten. Groups collapse; the chevron rotates rather than
   swapping glyphs so the control stays in place while it animates. */
.nav-group { display: flex; flex-direction: column; margin-bottom: 2px; }

.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 11px 5px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.nav-group-toggle:hover { color: var(--text-muted); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }

.nav-chev {
  display: inline-block;
  font-size: 9px;
  line-height: 1;
  transition: transform .15s ease;
}
.nav-group.is-collapsed .nav-chev { transform: rotate(-90deg); }

.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
.nav-group.is-collapsed .nav-group-items { display: none; }

/* Grouped items indent under their header; standalone items keep the original
   alignment so they read as peers of the group headers, not orphaned children. */
.nav-group-items .nav-btn { padding-left: 20px; }
.nav-btn-standalone { margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nav-chev { transition: none; }
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  text-align: left;
  transition: color 0.12s, background 0.12s;
  position: relative;
  letter-spacing: -0.005em;
}

.nav-btn .nav-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.75;
}

.nav-btn:hover {
  background: var(--overlay-1);
  color: var(--text);
}

.nav-btn:hover .nav-icon { opacity: 1; }

/* Signature: graph edge from left to the selected node */
.nav-btn.active {
  color: var(--text);
  background: linear-gradient(90deg, var(--accent-glow) 0%, var(--accent-glow2) 65%, transparent 100%);
  font-weight: 500;
}

.nav-btn.active .nav-icon { opacity: 1; color: var(--accent-light); }

.nav-btn.active::before {
  content: "";
  position: absolute;
  left: 0; top: 5px; bottom: 5px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent-light);
  box-shadow: 0 0 10px var(--accent);
}

/* ── Stats bar ──────────────────────────────────────────────────────────── */
#stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.stat {
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 4px;
}

.stat span {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.stat label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-top: 1px;
}

/* ── Node detail panel ──────────────────────────────────────────────────── */
#node-detail {
  margin: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 13px;
  font-size: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

#node-detail.hidden { display: none; }

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#detail-label-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--badge-color, var(--accent));
  color: #fff;
}

#btn-close-detail {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  line-height: 1;
}

#btn-close-detail:hover { color: var(--text); background: var(--surface-3); }

#node-detail h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

#detail-props {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 10px;
}

#detail-props dt {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  align-self: start;
  padding-top: 1px;
}

#detail-props dd { color: var(--text-muted); word-break: break-all; font-size: 11px; }

#detail-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#detail-actions button {
  width: 100%;
  padding: 5px 9px;
  background: var(--surface-3);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: color 0.12s, border-color 0.12s;
}

#detail-actions button:hover { color: var(--text); border-color: var(--accent); }

/* ── Main content area ──────────────────────────────────────────────────── */
#content {
  flex: 1;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 42px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

#topbar-title-group { display: flex; align-items: center; gap: 8px; }

#topbar-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

#topbar-end { display: flex; align-items: center; gap: 10px; }

#theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#theme-toggle:hover { color: var(--text); border-color: var(--accent); background: var(--accent-glow2); }
#theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

#topbar-project-label {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Panel ──────────────────────────────────────────────────────────────── */
.panel { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.panel.active { display: flex; }
.hidden { display: none !important; }

/* ── Login screen ───────────────────────────────────────────────────────── */
#login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 100;
}
.login-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 320px;
  padding: 32px 28px;
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.login-card .logo { align-self: center; margin-bottom: 4px; }
.login-card h2 { margin: 0; font-size: 17px; color: var(--text); text-align: center; }
.login-card .panel-sub { margin: 0 0 4px; text-align: center; }
#login-key-input {
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
}
#login-key-input:focus { outline: none; border-color: var(--accent); }
#login-key-input::placeholder { color: var(--text-dim); }
.login-card .action-btn { justify-content: center; }
.login-error { margin: 0; font-size: 12px; color: var(--node-red); text-align: center; }
.login-hint { margin: 4px 0 0; font-size: 11px; color: var(--text-dim); text-align: center; }
.login-hint code { font-family: var(--font-mono); color: var(--text-muted); }

.sso-buttons { display: flex; flex-direction: column; gap: 8px; }
.sso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.sso-btn:hover { border-color: var(--accent); color: var(--accent-light); }

.login-divider { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 11px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.login-tabs { display: flex; gap: 4px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.login-tab {
  flex: 1;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.login-tab.active { background: var(--sidebar); color: var(--text); }
.login-tab-panel { display: flex; flex-direction: column; gap: 10px; }
#login-userid-input, #login-password-input {
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
}
#login-userid-input:focus, #login-password-input:focus { outline: none; border-color: var(--accent); }
#login-userid-input::placeholder, #login-password-input::placeholder { color: var(--text-dim); }

#btn-logout, #btn-copy-init-script, #btn-start-view-as {
  margin: 0 14px 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: block;
  width: calc(100% - 28px);
  text-align: left;
}
#btn-logout:hover { color: var(--node-red); border-color: var(--node-red); }
#btn-copy-init-script:hover, #btn-start-view-as:hover { color: var(--accent-light); border-color: var(--accent); }

#view-as-picker {
  margin: 0 14px 6px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#view-as-select {
  width: 100%;
  padding: 5px 7px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.view-as-picker-actions { display: flex; gap: 6px; margin-top: 6px; }
.view-as-picker-actions .action-btn-sm { flex: 1; }

/* Unmissable on purpose — an admin previewing another role's restricted view
   must never mistake it for their own account looking broken. */
#view-as-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px;
  background: var(--accent-glow2);
  border-bottom: 1px solid var(--accent);
  font-size: 12.5px;
  color: var(--text);
}
#view-as-banner-text { font-weight: 600; }

/* ── Admin panel ────────────────────────────────────────────────────────── */
.admin-inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 20px 10px;
}
.admin-inline-form input[type="text"] {
  flex: 1;
  max-width: 240px;
  padding: 7px 10px;
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
}
.admin-inline-form select {
  padding: 7px 10px;
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
}
.admin-inline-form input:focus, .admin-inline-form select:focus { outline: none; border-color: var(--accent); }

.date-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 20px 14px;
  padding: 10px 14px;
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.date-filter-bar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.date-filter-bar input[type="date"] {
  padding: 5px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
}
.date-filter-bar input[type="date"]:focus { outline: none; border-color: var(--accent); }

/* Sessions panel keeps the same calendar filter, just docked into the panel
   header's top-right corner (the header is already a space-between flex
   row) instead of its own full-width bar above the list. */
.date-filter-bar--inline { margin: 0; padding: 6px 10px; gap: 8px; background: transparent; border-color: var(--border); }
.date-filter-bar--inline label { font-size: 11px; }
.date-filter-bar--inline input[type="date"] { padding: 3px 6px; font-size: 11px; }

#admin-users-table select.admin-role-select {
  padding: 4px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
}
#admin-new-key-banner {
  margin: 0 20px 16px;
  padding: 12px 16px;
  background: rgba(245, 130, 31, 0.08);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text);
}
#admin-new-key-banner code {
  display: inline-block;
  margin: 0 8px;
  padding: 2px 8px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  color: var(--accent-light);
}
#admin-new-key-banner .login-hint { text-align: left; margin-top: 6px; }

/* ── Panel header ───────────────────────────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px 13px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-header h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.panel-sub {
  width: 100%;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: -4px;
  line-height: 1.5;
}

.panel-subheading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  padding: 16px 20px 8px;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 8px;
}
.admin-section-header .panel-subheading { padding: 0; }
.admin-section-header input[type="text"] {
  padding: 6px 10px;
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  width: 200px;
}
.admin-section-header input[type="text"]:focus { outline: none; border-color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
button { font-family: var(--font); }

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  background: var(--accent-gradient);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.action-btn:hover {
  opacity: 0.9;
  box-shadow: 0 4px 16px var(--accent-shadow);
}

.action-btn-sm {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  white-space: nowrap;
}

.action-btn-sm:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-glow2);
}

.btn-group { display: flex; align-items: center; gap: 6px; }

/* ── Graph panel ────────────────────────────────────────────────────────── */
#panel-graph { position: relative; }

#graph-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--sidebar);
  border-bottom: 1px solid var(--border);
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.graph-meta {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  margin-right: 4px;
  padding-right: 9px;
  border-right: 1px solid var(--border);
}

/* Row of relationship-type chips, directly under the toolbar */
#edge-legend {
  padding: 6px 12px;
  background: var(--sidebar);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#edge-legend:empty { display: none; }

#graph-toolbar button {
  padding: 5px 10px;
  background: var(--overlay-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

#graph-toolbar button:hover {
  color: var(--text);
  border-color: var(--border-light);
  background: var(--overlay-2);
}

#graph-search {
  padding: 5px 10px;
  background: var(--overlay-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  font-family: var(--font);
  width: 180px;
}

#graph-search:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}

#graph-search::placeholder { color: var(--text-dim); }

/* ── Filter chips ───────────────────────────────────────────────────────── */
.filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--border)) 40%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--chip-color, var(--text-muted)) 70%, var(--text-muted));
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: var(--font);
  letter-spacing: 0.01em;
}

.chip.active {
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 12%, transparent);
  border-color: color-mix(in srgb, var(--chip-color, var(--accent)) 60%, transparent);
  color: var(--chip-color, var(--text));
}

.chip::before { content: "●"; font-size: 7px; opacity: 0.8; }

/* ── Cytoscape canvas ───────────────────────────────────────────────────── */
#cy { flex: 1; background: var(--bg); min-height: 0; }

/* ── Graph legend ───────────────────────────────────────────────────────── */
#graph-legend {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  background: rgba(7, 11, 20, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 9px 13px;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.legend-item {
  font-size: 11px;
  font-weight: 500;
  color: var(--c, var(--text-muted));
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

#graph-cap-warn {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(212, 168, 67, 0.1);
  border: 1px solid var(--node-gold);
  color: var(--node-gold);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 12px;
  z-index: 10;
}

/* ── Search panel ───────────────────────────────────────────────────────── */
#panel-search { overflow-y: auto; padding-bottom: 24px; }

.search-box { display: flex; gap: 8px; padding: 16px 20px; }

.search-box input {
  flex: 1;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  transition: border-color 0.12s, background 0.12s;
}

.search-box input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px var(--accent-glow2);
}

.search-box input::placeholder { color: var(--text-dim); }

.search-box button {
  padding: 10px 18px;
  background: var(--accent-gradient);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity 0.15s;
  white-space: nowrap;
}

.search-box button:hover { opacity: 0.88; }

#search-filters {
  display: flex;
  gap: 16px;
  padding: 0 20px 14px;
}

#search-filters label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

#search-filters input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; }

#search-results { padding: 0 20px; }

.search-result-item {
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.search-result-item:hover {
  border-color: var(--accent);
  background: var(--surface-3);
  box-shadow: 0 0 0 1px var(--accent-glow2);
}

.search-result-item .result-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-light);
  margin-bottom: 3px;
}

.search-result-item .result-name {
  font-weight: 600;
  color: var(--text);
  font-size: 13px;
  letter-spacing: -0.01em;
}

.search-result-item .result-path {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 3px;
}

.search-result-item .result-score { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* ── Prose content ──────────────────────────────────────────────────────── */
.prose-content {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

.prose-content h1,
.prose-content h2,
.prose-content h3,
.prose-content h4 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 1.6em 0 0.5em;
  line-height: 1.25;
}

.prose-content h1 { font-size: 22px; }
.prose-content h2 { font-size: 17px; border-bottom: 1px solid var(--border); padding-bottom: 7px; }
.prose-content h3 { font-size: 15px; }
.prose-content h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 600; }

.prose-content p { margin: 0.75em 0; }
.prose-content ul, .prose-content ol { padding-left: 1.5em; margin: 0.5em 0; }
.prose-content li { margin: 0.3em 0; }

.prose-content code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--accent-light);
}

.prose-content pre {
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 1.1em 0;
}

.prose-content pre code { background: none; border: none; padding: 0; font-size: 12px; color: var(--text); }

.prose-content blockquote {
  border-left: 3px solid var(--accent);
  margin: 1em 0;
  padding: 0.6em 1em;
  color: var(--text-muted);
  background: var(--accent-glow2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.prose-content table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 1em 0; }

.prose-content th {
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 8px 13px;
  text-align: left;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.prose-content td { border: 1px solid var(--border); padding: 8px 13px; color: var(--text); }
.prose-content tr:hover td { background: var(--surface-2); }

/* ── Log box ────────────────────────────────────────────────────────────── */
.log-box {
  margin: 10px 20px;
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  max-height: 140px;
  overflow-y: auto;
  line-height: 1.6;
  flex-shrink: 0;
}

/* ── Tab bar ────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}

.tab-btn {
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
  letter-spacing: -0.005em;
}

.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* ── Sessions panel ─────────────────────────────────────────────────────── */
/* The whole panel scrolls, as #panel-savings/#panel-admin/#panel-spend do.
   It used to clip instead (overflow: hidden) with #session-list as the one
   inner scrolling region — which only ever reached the session list. Once
   cache health and the session list became collapsible, either could be the
   thing overflowing, and anything expanded past the fold was unreachable. */
#panel-sessions { overflow-y: auto; padding-bottom: 8px; }

#session-list {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sessions panel — connection status + daily usage dashboard */
.connection-status {
  margin: 0 20px 4px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 12px;
}

.connection-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--node-gray);
  box-shadow: 0 0 0 3px transparent;
}
.connection-status.is-connected .connection-dot { background: var(--node-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-green) 20%, transparent); }
.connection-status.is-stale .connection-dot     { background: var(--node-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-amber) 20%, transparent); }
.connection-status.is-none .connection-dot      { background: var(--node-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-red) 20%, transparent); }

.connection-body { display: flex; flex-direction: column; gap: 2px; }
.connection-text { font-size: 13px; font-weight: 600; color: var(--text); }
.connection-detail { font-size: 11px; color: var(--text-muted); }

/* Same amber used for a stale connection — this is the same "needs a look,
   not an error" register, not a new color vocabulary. */
.session-health-banner {
  margin: 0 20px 4px;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--node-amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--node-amber) 35%, transparent);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
}
.session-health-icon { color: var(--node-amber); flex-shrink: 0; }

/*
 * A vertical chart's height is fixed regardless of how many days it shows —
 * unlike the horizontal-rows version this replaced, which grew taller with
 * every day and pushed the date filter and session list down the panel. A
 * fixed 15-column chart needs no bound/scrollbar of its own.
 */
.daily-usage { padding: 4px 20px 8px; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }

.daily-usage-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 2px 10px 10px;
  font-size: 11px;
  color: var(--text-muted);
}
.daily-usage-legend-item { display: flex; align-items: center; }
.daily-usage-legend .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
}
.daily-usage-window { margin-left: auto; }

/* A pill group, not a <select> — the whole point is that switching ranges
   should feel as immediate as clicking a day, not open a dropdown. */
.daily-usage-range { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2px; }
.daily-usage-range-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.daily-usage-range-btn:hover { color: var(--text); }
.daily-usage-range-btn.active { background: var(--accent-gradient); color: #fff; }
.daily-usage-range-btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* Which categories size the "Used" segment — independent of the date-range
   pills above, so both controls stay legible as separate groups. */
.daily-usage-category-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.daily-usage-cat-check { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.daily-usage-cat-check input[type="checkbox"] { margin: 0; cursor: pointer; }

.daily-usage-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 152px;
  padding: 0 4px;
}
/* The baseline the bars grow up from — without it, a short bar for a slow
   day and an empty track for a no-activity day are hard to tell apart at a
   glance, since neither has anything to measure itself against. */
.daily-usage-chart::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 26px;
  border-top: 1px solid var(--border);
  pointer-events: none;
}

.daily-usage-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 4px 2px 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
}
.daily-usage-col:hover, .daily-usage-col:focus-visible { background: var(--surface-2); }
.daily-usage-col:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
/* Today is still accumulating, not a finished day like the rest of the
   window — a quiet tint is enough to say so without a second legend entry. */
.daily-usage-col.is-today { background: var(--accent-glow2); }
.daily-usage-col.is-today .daily-usage-col-label { color: var(--accent-light); font-weight: 700; }

.daily-usage-track {
  width: 100%;
  max-width: 64px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--surface-3);
  border-radius: 4px 4px 1px 1px;
  overflow: hidden;
}
.bar-seg-vert { width: 100%; flex-shrink: 0; }
/* Four real categories instead of one solid "Used" block, each its own
   color — see the legend dots below for the matching key. */
.bar-seg-vert.bar-input       { background: var(--node-blue); }
.bar-seg-vert.bar-output      { background: var(--node-purple); }
.bar-seg-vert.bar-cache-write { background: var(--accent-pink); }
.bar-seg-vert.bar-cache-read  { background: var(--node-gold); }
.bar-seg-vert.bar-saved       { background: var(--node-green); border-radius: 2px 2px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .bar-seg-vert { transition: height 320ms cubic-bezier(.2,.8,.2,1); }
}

.daily-usage-col-label {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A single shared node, repositioned per bar on hover/focus — cheaper than
   one tooltip per column, and lets it render above #panel-sessions' own
   overflow:hidden by living in <body> rather than inside the panel. */
.daily-usage-tooltip {
  position: fixed;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--surface-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 500;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
}
@media (prefers-reduced-motion: no-preference) {
  .daily-usage-tooltip { transition: opacity .12s ease; }
}
.daily-usage-tooltip.visible { opacity: 1; visibility: visible; }
.daily-usage-tooltip::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--surface-3);
}
.daily-usage-tooltip .tt-date { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.daily-usage-tooltip .tt-saved { color: var(--node-green); }
.daily-usage-tooltip .tt-breakdown { color: var(--text-muted); font-size: 10px; }

.daily-usage-hint { font-size: 11px; padding: 6px 10px 0; text-align: right; }

.session-card {
  padding: 11px 15px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.session-card:hover { border-color: var(--border-light); box-shadow: 0 2px 12px rgba(0,0,0,0.2); }
.session-card.selected { border-color: var(--accent); background: var(--surface-3); box-shadow: 0 0 0 1px var(--accent-glow2); }

.session-card .session-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.session-card .session-id { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); }
.session-card .session-tokens { font-size: 11px; font-weight: 700; color: var(--node-green); white-space: nowrap; font-variant-numeric: tabular-nums; }
.session-card .session-tokens-estimate { font-weight: 400; color: var(--text-dim); font-style: italic; }
.session-card .session-time { font-size: 11px; color: var(--text-muted); }
.session-card .session-scope { font-size: 11px; color: var(--accent-light); }

#session-actions {
  border-top: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px 20px;
  flex-shrink: 0;
  max-height: 40vh;
}

#session-actions h3 {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  margin-bottom: 12px;
}

#actions-timeline { display: flex; flex-direction: column; gap: 3px; }

.action-item {
  display: grid;
  grid-template-columns: 60px auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.action-item:last-child { border-bottom: none; }
.action-item .action-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.action-item .action-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-light); }
.action-item .action-target { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-item .action-tokens { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.action-item .action-tokens.is-estimate { opacity: .65; font-style: italic; }

/* ── Savings panel ──────────────────────────────────────────────────────── */
#panel-savings { overflow-y: auto; padding-bottom: 8px; }
#panel-admin { overflow-y: auto; padding-bottom: 8px; }
#panel-spend { overflow-y: auto; padding-bottom: 24px; }

.admin-table { margin: 0 20px 10px; }
.admin-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 8px 13px;
  text-align: left;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.admin-table td { border: 1px solid var(--border); padding: 8px 13px; color: var(--text); }
.admin-table tr.admin-user-row:hover td { background: var(--surface-2); cursor: pointer; }
.admin-table code { font-family: var(--font-mono); font-size: 12px; color: var(--accent-light); }

.admin-rate-input {
  width: 72px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 3px 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.admin-rate-input:focus { outline: none; border-color: var(--accent); }
.admin-rate-default { font-size: 10px; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

.panel-sub-inline { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text-dim); }

.admin-expand-toggle {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
}
.admin-expand-toggle:hover { color: var(--accent-light); }

tr.admin-user-detail td { background: var(--sidebar); border-top: none; padding: 0; }
tr.admin-user-detail.hidden { display: none; }
.admin-user-detail-inner { padding: 14px 20px; }
.admin-subtable { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
.admin-subtable th {
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.admin-subtable td { border: 1px solid var(--border); padding: 6px 10px; color: var(--text); }
.admin-subtable code { font-family: var(--font-mono); font-size: 11px; color: var(--accent-light); }
.admin-copy-keyid {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  padding: 0 2px;
  vertical-align: middle;
}
.admin-copy-keyid:hover { color: var(--accent-light); }

.admin-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.admin-status-active { color: var(--node-green); background: rgba(61, 184, 122, 0.12); }
.admin-status-inactive { color: var(--text-dim); background: var(--surface-2); }

.admin-remove-user { color: var(--node-red); border-color: var(--node-red); }
.admin-remove-user:hover { color: #fff; background: var(--node-red); }
.admin-detail-form { margin: 0; }

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 10px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.admin-pagination button {
  padding: 5px 12px;
  background: var(--surface-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.admin-pagination button:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.admin-pagination button:disabled { opacity: 0.4; cursor: default; }

/* The receipt: one hero number, one honesty meter */
.savings-hero {
  margin: 16px 20px 4px;
  padding: 22px 26px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.savings-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 480px 220px at 10% 0%, var(--accent-glow2), transparent 70%);
  pointer-events: none;
}

.hero-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  position: relative;
}

.hero-value {
  display: inline-block;
  margin: 4px 0 16px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--accent-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}

/* Green, not the brand gradient reused from spend — same distinction
   .spend-cost/.proj-cost and the savings-tier dots already use (green =
   saved, orange = spent), so the two numbers read as different KINDS of
   figure at a glance, not just two amounts. */
.hero-value.is-saved {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--node-green);
}

.hero-meter {
  display: flex;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-3);
  position: relative;
}

.meter-seg { height: 100%; }
.meter-seg.meter-hard { background: var(--node-green); }
.meter-seg.meter-estimated { background: var(--accent-orange); }

.hero-meter-legend {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  position: relative;
}

.hero-meter-legend .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
}

.dot-hard { background: var(--node-green); }
.dot-estimated { background: var(--accent-orange); }

/* ── Team Insights ────────────────────────────────────────────────────────
   No charting library is vendored (and CDN deps are forbidden), so the
   department comparison is built from the same percentage-width flex bar as
   the savings hero meter — just taller, since a 6px bar reads as a hairline
   when stacked a dozen rows deep. */
.meter-seg.meter-spend { background: var(--accent-orange); }
.meter-seg.meter-saved { background: var(--node-green); }
.dot-spend { background: var(--accent-orange); }
.dot-saved { background: var(--node-green); }
.dot-input       { background: var(--node-blue); }
.dot-output      { background: var(--node-purple); }
.dot-cache-write { background: var(--accent-pink); }
.dot-cache-read  { background: var(--node-gold); }

.hero-meter.insight-bar { height: 10px; margin-top: 4px; }

.insight-bar-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 3fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  flex: 1;
  min-width: 0;
}

.insight-bar-row.is-team {
  padding-left: 42px;
  font-size: 12px;
  opacity: 0.85;
}

.insight-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-cost {
  font-size: 12px;
  font-weight: 700;
  color: var(--node-green);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
}

/* A rough estimate must not borrow the solid green weight of a measured
   figure — that color/weight combination is a claim of precision this number
   does not have. */
.insight-cost.is-rough {
  color: var(--accent-light);
  font-weight: 600;
  font-style: italic;
  opacity: .85;
}

/* Department/team manager, collapsed by default so it doesn't crowd the
   admin panel's primary job (keys and roles). */
.admin-org-manager {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 18px;
  background: var(--surface-2);
}
.admin-org-manager > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.admin-org-manager > summary:hover { color: var(--accent-orange); }
.admin-org-forms { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }

/* Org manager: one grid so a department and its teams keep the same columns,
   with indent applied to the row's leading cell only. */
.admin-org-unit { border-top: 1px solid var(--border); }

.admin-org-row {
  display: grid;
  grid-template-columns: 20px minmax(140px, 1fr) 66px auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px;
}
.admin-org-row.is-team { padding-left: 20px; opacity: 0.9; }
.admin-org-name { min-width: 160px; font-weight: 600; }

.admin-org-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
}
.admin-org-toggle:hover { color: var(--accent-orange); }
.admin-org-toggle-spacer { display: block; width: 20px; }

/* Editable in place — the field IS the name, so there's no separate edit mode
   to enter and forget to leave. */
.admin-org-input {
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  width: 100%;
  min-width: 0;
}
.admin-org-input:hover { border-color: var(--border-light); }
.admin-org-input:focus { outline: none; border-color: var(--accent-orange); background: var(--surface-3); }
.admin-org-row.is-team .admin-org-input { font-weight: 500; }

.admin-org-count { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.admin-org-empty { padding: 4px 0 6px 40px; font-size: 11px; }

#admin-users-table select.admin-org-select { max-width: 190px; }

/* ── Project-to-master mapping table ────────────────────────────────────────
   Numerics are right-aligned with tabular figures, which is what makes a
   column scannable. (The wider per-user usage table this styling was built for
   is gone — the Spend panel's rollup rows replaced it — so only the rules that
   table still needs remain.) */
.insight-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}
.insight-users-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.insight-users-table th.col-num { text-align: right; }
.insight-users-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.insight-users-table td.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.insight-users-table td.col-user { white-space: nowrap; }
.insight-user-name { font-weight: 600; }

/* Secondary tiles */
.savings-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px 20px 4px;
}

.savings-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.12s;
}

.savings-tile:hover { border-color: var(--border-light); }

.savings-tile label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim);
}

.savings-tile .savings-tile-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Second line under a tile's value — what the number is made of, or the caveat
   that goes with it. Muted so it reads as annotation, not as a second metric. */
.savings-tile-sub {
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.35;
}

/* Breakdown by category */
#savings-breakdown { padding: 4px 20px 6px; display: flex; flex-direction: column; gap: 6px; }

.breakdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.breakdown-row .breakdown-label { flex: 1; font-size: 13px; color: var(--text); }

.tier-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}

.tier-badge.tier-hard { background: color-mix(in srgb, var(--node-green) 16%, transparent); color: var(--node-green); }
.tier-badge.tier-estimated { background: var(--accent-glow2); color: var(--accent-light); }

.breakdown-row .breakdown-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 72px;
  text-align: right;
}

/* Top files — a real ranking, so the rank number carries information */
#savings-top-files {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.savings-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color 0.12s;
}

.savings-file-row:hover { border-color: var(--border); }

.file-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  width: 16px;
  flex-shrink: 0;
}

.file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.file-path {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-hits { font-size: 10px; color: var(--text-dim); }

.file-tokens {
  font-size: 12px;
  font-weight: 700;
  color: var(--node-green);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Chat panel ─────────────────────────────────────────────────────────── */
#panel-chat { overflow: hidden; }

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.chat-msg {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  line-height: 1.65;
}

.chat-msg.user {
  align-self: flex-end;
  background: var(--accent-gradient);
  color: #fff;
  border-bottom-right-radius: var(--radius-sm);
  box-shadow: 0 4px 14px var(--accent-shadow);
}

.chat-msg.assistant {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: var(--radius-sm);
}

.chat-msg.assistant code { font-family: var(--font-mono); font-size: 11px; background: var(--sidebar); border-radius: var(--radius-sm); padding: 1px 5px; color: var(--accent-light); }
.chat-msg.error { align-self: flex-start; background: rgba(229, 83, 75, 0.08); border: 1px solid var(--node-red); color: var(--node-red); }

#chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--sidebar);
  flex-shrink: 0;
}

#chat-input {
  flex: 1;
  padding: 10px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  resize: none;
  min-height: 40px;
  transition: border-color 0.12s, box-shadow 0.12s;
}

#chat-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow2); }
#chat-input::placeholder { color: var(--text-dim); }

#btn-chat-send {
  padding: 10px 18px;
  background: var(--accent-gradient);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  align-self: flex-end;
  transition: opacity 0.15s, box-shadow 0.15s;
}

#btn-chat-send:hover { opacity: 0.88; box-shadow: 0 4px 14px var(--accent-shadow); }

/* ── Onboarding tour navigator ──────────────────────────────────────────── */
#tour-nav { flex-shrink: 0; border-bottom: 1px solid var(--border); }

.tour-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  gap: 12px;
}

.tour-nav-header button {
  padding: 5px 13px;
  background: var(--surface-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.12s, border-color 0.12s;
}

.tour-nav-header button:hover { color: var(--text); border-color: var(--accent); }
#tour-step-indicator { font-size: 12px; color: var(--text-muted); text-align: center; }
#tour-step-content { padding: 10px 20px 14px; font-size: 13px; color: var(--text-muted); line-height: 1.65; }

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Status text utilities (containers already carry horizontal padding) ── */
.muted { color: var(--text-muted); font-size: 13px; padding: 4px 0; }
.error { color: var(--node-red); font-size: 13px; padding: 4px 0; }

/* ── Base form elements ─────────────────────────────────────────────────── */

/* ── Keyboard focus ─────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #sidebar { width: 56px; min-width: 56px; }
  .logo-text { display: none; }
  .nav-btn span:not(.nav-icon) { display: none; }
  .nav-btn { justify-content: center; padding: 10px; }
  #stats-bar { display: none; }
  #node-detail { display: none; }
  #topbar-project-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* Archived users stay listed — they must be findable to restore — but must not
   read as active. */
.admin-user-row.is-archived td { opacity: .55; }
.admin-status-archived {
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border-light);
}

/* ── Read scope on the create-key form ──────────────────────────────────────
   Shown only for viewers: a developer's scope follows what they work in and an
   admin is unscoped, so the controls would imply a restriction that isn't real. */
.admin-key-scope {
  margin: 4px 0 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-key-scope .panel-sub { margin: 0 0 10px; }
.admin-scope-all { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 10px; cursor: pointer; }
.admin-scope-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.admin-scope-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.admin-scope-list { display: flex; flex-direction: column; gap: 4px; max-height: 132px; overflow-y: auto; }
.admin-scope-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
.admin-scope-item.is-filtered-out { display: none; }

/* Repos grouped under the product they belong to. Three repos on this
   deployment are all named "digital-map"; grouping (plus the path suffix the
   renderer adds only for duplicated names) is what makes them tellable
   apart, and makes "everything in this product" one visible block. */
.admin-scope-group { display: flex; flex-direction: column; gap: 4px; }
.admin-scope-group + .admin-scope-group { margin-top: 8px; }
.admin-scope-group.is-filtered-out { display: none; }
.admin-scope-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
/* A projectId with data but no Project node: it cannot be grouped until it is
   registered, so it reads as provisional rather than as a normal choice. */
.admin-scope-item.is-unregistered span { color: var(--text-dim); font-style: italic; }

/* The same picker, reused inside an expanded user row to edit access after
   the fact. Wider than the create-key form's copy has to be, since the row
   spans the whole table. */
.admin-user-scope { margin-top: 8px; }
.admin-user-scope .admin-scope-list { max-height: 168px; }
.admin-access-status { font-size: 12px; }

/* Search box above a project checklist — a project list grows with the org
   and needs to be findable. Used by the create-key form's Individual
   Projects column. */
.admin-project-filter {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  color: var(--text);
}
.admin-project-filter:focus { outline: none; border-color: var(--accent); }

/* The mix behind a blended savings rate — shown so the figure can be audited
   rather than taken on trust. */
.savings-blend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 14px 10px; }
.savings-blend-item { display: flex; align-items: baseline; gap: 6px; font-size: 11px; }
.savings-blend-item code { font-size: 11px; color: var(--text); }
.savings-blend-share { font-weight: 700; color: var(--accent-light); font-variant-numeric: tabular-nums; }

/* ── Spend panel: toolbar, grouping controls, and the rollup table ──────────
   The rollup was a CSS-grid pseudo-table whose header and rows shared one
   `grid-template-columns`, so any change had to keep two separate templates
   emitting the same cell count — a defect that shipped more than once. It is a
   real <table> now, which makes that class of mismatch structurally impossible.

   Colours come from the design-system tokens, never from literals: this panel
   renders in both themes, and the categorical --series-1..8 slots in
   particular are stepped per surface and CVD-validated as a set. */
.spend-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border);
}

.spend-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.spend-preset {
  padding: 5px 11px; font-size: 12px; font-weight: 600;
  background: none; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
}
.spend-preset:hover { color: var(--text); border-color: var(--border-light); }
.spend-preset.is-active {
  color: var(--accent-light); background: var(--accent-glow2); border-color: var(--accent);
}
.spend-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.spend-custom { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.spend-custom input[type="date"] {
  margin-left: 5px; padding: 4px 7px; font-size: 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.spend-custom input[type="date"]:focus { outline: none; border-color: var(--accent); }

/* ── Headline ─────────────────────────────────────────────────────────────── */
.spend-topbar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 14px 20px 6px;
}
.spend-title { margin: 0; font-size: 16px; }
.spend-total { margin: 0 0 0 auto; font-size: 12.5px; color: var(--text-muted); }
.spend-total strong { color: var(--text); font-size: 14px; }
.spend-saved-total { cursor: help; }
.spend-saved-total strong { color: var(--node-green); }

/* ── Primary dimension tabs ───────────────────────────────────────────────── */
.spend-tabs { display: flex; gap: 4px; padding: 6px 20px 0; border-bottom: 1px solid var(--border); }
.spend-tab {
  padding: 7px 13px; margin-bottom: -1px; font: inherit; font-size: 13px; font-weight: 700;
  background: none; color: var(--text-dim);
  border: 0; border-bottom: 3px solid transparent; cursor: pointer;
}
.spend-tab:hover { color: var(--text); }
.spend-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.spend-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }

/* ── Grouping path ────────────────────────────────────────────────────────── */
.spend-path {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 12px 20px 0; font-size: 12px; color: var(--text-muted);
}
.spend-path-label { margin-right: 2px; }
.spend-path-chip {
  padding: 4px 11px; border-radius: 999px; font-weight: 700;
  background: var(--accent-glow2); color: var(--accent-light); border: 1px solid var(--accent);
}
.spend-then { color: var(--text-dim); }
.spend-level {
  padding: 4px 9px; font: inherit; font-size: 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
}
.spend-level:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.spend-path-hint { margin: 6px 0 0; padding: 0 20px; font-size: 11.5px; color: var(--text-muted); }

/* ── The table ────────────────────────────────────────────────────────────── */
.spend-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13px; }

.spend-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 0; background: var(--surface-2);
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-dim); text-align: left;
  border-bottom: 1px solid var(--border-light);
}
.spend-table th.is-num, .spend-table td.is-num {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.spend-table th:first-child { padding-left: 20px; }
.spend-table th:last-child  { padding-right: 20px; }

.spend-sort {
  width: 100%; padding: 9px 12px; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; text-align: inherit;
  background: none; border: 0; cursor: pointer;
}
.spend-sort:hover { color: var(--text); }
.spend-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th[aria-sort="ascending"]  .spend-sort-ind::after { content: ' ↑'; }
th[aria-sort="descending"] .spend-sort-ind::after { content: ' ↓'; }
th[aria-sort="none"]       .spend-sort-ind::after { content: ' ↕'; opacity: .35; }

.spend-table tbody tr { border-bottom: 1px solid var(--border); }
.spend-table tbody tr.is-expandable { cursor: pointer; }
.spend-table tbody tr:hover { background: var(--overlay-1); }
.spend-table tbody tr.is-d0 { background: var(--surface-2); font-weight: 700; }
.spend-table td { padding: 8px 12px; color: var(--text); }
.spend-table td:first-child { padding-left: 20px; }
.spend-table td:last-child  { padding-right: 20px; }

.spend-scope { display: flex; align-items: center; gap: 7px; min-width: 0; }
.spend-indent { display: inline-block; flex: none; }
.spend-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spend-count, .spend-of-parent, .spend-kind {
  flex: none; font-size: 11px; font-weight: 400; color: var(--text-dim);
}
.spend-of-parent { color: var(--text-muted); margin-left: 4px; }
.spend-kind { margin-left: 4px; }

.spend-chev {
  flex: none; width: 18px; height: 18px; padding: 0; font-size: 10px;
  background: none; color: var(--text-muted); border: 0; cursor: pointer;
  transition: transform .12s;
}
.spend-chev:hover { color: var(--text); }
.spend-chev[aria-expanded="true"] { transform: rotate(90deg); }
.spend-chev:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.spend-chev-spacer { display: inline-block; flex: none; width: 18px; }

.spend-comp { width: 22%; min-width: 120px; }
.spend-saved { font-size: 12px; color: var(--text-muted); }
.spend-cost  { font-weight: 700; color: var(--node-green); }
.spend-empty { padding: 40px 20px; text-align: center; color: var(--text-dim); }

.spend-note {
  font-size: 11px; color: var(--text-muted); padding: 12px 20px 0; line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) { .spend-chev { transition: none; } }

/* The panel sits inside the sidebar layout, so a viewport breakpoint fires
   while the table is ~240px narrower than the window. Two steps rather than the
   one a full-width mock would need: Composition and Tokens saved go first,
   Active only once things are genuinely tight. */
@media (max-width: 980px) {
  .spend-table th:nth-child(2), .spend-table td:nth-child(2),
  .spend-table th:nth-child(6), .spend-table td:nth-child(6) { display: none; }
}
@media (max-width: 760px) {
  .spend-table th:nth-child(4), .spend-table td:nth-child(4) { display: none; }
  .spend-table th:first-child, .spend-table td:first-child { padding-left: 12px; }
  .spend-table th:last-child, .spend-table td:last-child { padding-right: 12px; }
}

/* ── Product mapping table (Admin panel) ────────────────────────────────────
   Moved here with the form itself when the Spend panel was rebuilt: grouping
   repos into a product is org structure an admin maintains, and it is the only
   thing that sets what the Spend panel's "By project" view reads. */
.proj-label {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 10px; white-space: nowrap;
  background: var(--accent-glow); color: var(--accent-light); border: 1px solid var(--accent);
}

.proj-master-select, .proj-label-input, .proj-name-input {
  width: 100%; padding: 4px 7px; font-size: 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.proj-master-select:focus, .proj-label-input:focus, .proj-name-input:focus {
  outline: none; border-color: var(--accent);
}

/* ── Share bars: what part took how much ────────────────────────────────────
   A share bar, not a magnitude bar. Each segment is a fraction of ITS OWN row's
   total, so a product shows how its repos split and a repo shows how its people
   split — which is the question actually being asked. Scaling every row against
   the org total instead drew a full-width bar for a product with one paying repo
   and an identical one for that repo: true, and useless. */
.share-bar {
  display: flex;
  height: 10px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}
.share-bar.is-empty { opacity: .4; }
.share-seg { display: block; height: 100%; }
/* A 2px gap in the SURFACE colour, not a dark hairline: the divider has to read
   the same on a light surface as on a dark one, and a translucent black line
   disappears against the dark theme's own borders. */
.share-seg:not(:last-child) { border-right: 2px solid var(--surface); }