/* ==========================================================================
   Gatherdly — Alven-style design system
   Loaded AFTER som-theme.css so these vars win during transition.
   ========================================================================== */

:root {
  /* Palette — warm neutrals + single accent */
  --g-bg:           #FAFAF7;   /* page background */
  --g-card:        #FFFFFF;   /* card surface */
  --g-card-soft:   #F4F1EC;   /* nested card / hover */
  --g-border:      #ECE7DD;   /* hairline borders */
  --g-border-soft: #F2EFE8;
  --g-ink:         #1A1A1A;   /* primary text */
  --g-ink-soft:    #5C5A55;   /* secondary text */
  --g-label:       #9A9A95;   /* small-caps gray labels */
  --g-avatar:      #E8DECF;   /* avatar fill */
  /* Accent kept in sync with --brand-primary (som-theme.css). If the brand
     hue changes, update both. --g-accent-soft is a manual 88%-lighter tint
     used for active sidebar fills + count pill backgrounds. */
  --g-accent:      #C96442;   /* matches --brand-primary */
  --g-accent-soft: #F4D9CC;   /* warm tint of accent */

  /* Surface aliases — some components (model dropdown, chat bubbles, home
     briefing) reference these. Map to the warm card tokens so they never fall
     back to the muddy neutral gray. */
  --g-surface:   var(--g-card);
  --g-surface-2: var(--g-card-soft);

  /* Status */
  --g-status-live:    #2E9462;
  --g-status-live-bg: #DFF1E5;
  --g-status-warn:    #B16A22;
  --g-status-warn-bg: #F7E3CF;
  --g-status-alert:   #C0392B;
  --g-status-alert-bg:#F8DAD5;
  --g-status-off:     #888583;
  --g-status-off-bg:  #ECEAE6;

  /* Type */
  --g-font-sans:   'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --g-font-serif:  'Instrument Serif', 'Geist', ui-serif, Georgia, serif;
  --g-font-mono:   'Geist Mono', ui-monospace, monospace;

  /* Spacing scale — 4px base. Sparse on purpose: we skip 7, 9, 11
     because 28/36/44px steps are rarely useful in practice. If you
     need an intermediate value, prefer the next lower step + a tweak. */
  --g-s-1: 4px;   --g-s-2: 8px;   --g-s-3: 12px;
  --g-s-4: 16px;  --g-s-5: 20px;  --g-s-6: 24px;
  --g-s-8: 32px;  --g-s-10: 40px; --g-s-12: 48px;

  /* Radii */
  --g-r-sm: 6px;
  --g-r-md: 10px;
  --g-r-lg: 14px;
  --g-r-xl: 18px;

  /* Shadow — very subtle (Alven uses almost none) */
  --g-shadow-card: 0 1px 2px rgba(20, 18, 14, .04), 0 1px 1px rgba(20, 18, 14, .03);
  --g-shadow-pop:  0 6px 16px rgba(20, 18, 14, .08), 0 2px 4px rgba(20, 18, 14, .05);
}

/* Dark mode — keep the same accent, invert neutrals */
html[data-theme="dark"] {
  --g-bg:           #1A1916;
  --g-card:        #221F1B;
  --g-card-soft:   #2A2722;
  --g-border:      #34302A;
  --g-border-soft: #2C2924;
  --g-ink:         #F2EEE6;
  --g-ink-soft:    #B8B3A8;
  --g-label:       #7E7A72;
  --g-avatar:      #3A332A;
  --g-accent-soft: #3A2E20;
}

/* Utility primitives consumed by later tasks */
.g-card {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  box-shadow: var(--g-shadow-card);
  padding: var(--g-s-6);
}
.g-label {
  font-family: var(--g-font-sans);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--g-label);
}
.g-number {
  font-family: var(--g-font-sans);
  font-size: 40px;
  line-height: 1.05;
  font-weight: 600;
  color: var(--g-ink);
  letter-spacing: -.01em;
}
.g-name {
  font-family: var(--g-font-serif);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--g-ink);
}
.g-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--g-card-soft);
  color: var(--g-ink-soft);
}
.g-pill.is-live    { background: var(--g-status-live-bg); color: var(--g-status-live); }
.g-pill.is-warn    { background: var(--g-status-warn-bg); color: var(--g-status-warn); }
.g-pill.is-alert   { background: var(--g-status-alert-bg);color: var(--g-status-alert); }
.g-pill.is-off     { background: var(--g-status-off-bg);  color: var(--g-status-off); }
.g-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   Sidebar (Alven-style)
   ============================================================ */

.g-sidebar {
  position: sticky; top: 0;
  width: var(--sidebar-width, 220px);
  height: 100vh;
  background: var(--g-bg);
  border-right: 1px solid var(--g-border);
  display: flex; flex-direction: column;
  padding: var(--g-s-4) var(--g-s-3);
  font-family: var(--g-font-sans);
  z-index: 10;
  overflow: hidden;
  transition: width 220ms cubic-bezier(.2,.6,.2,1);
}

.g-sidebar-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--g-s-2);
  margin-bottom: var(--g-s-3);
}
.g-sidebar-brand a {
  display: inline-flex; align-items: center; gap: var(--g-s-2);
  color: var(--g-ink); text-decoration: none; font-weight: 600;
  flex: 1; min-width: 0; overflow: hidden;
}
.g-sidebar-name { font-size: 15px; flex: 1; min-width: 0; text-overflow: ellipsis; }
.g-sidebar-collapse {
  background: none; border: 0; width: 28px; height: 28px;
  color: var(--g-label); cursor: pointer; border-radius: var(--g-r-sm);
}
.g-sidebar-collapse:hover { background: var(--g-card-soft); color: var(--g-ink); }
.g-sidebar-collapse svg   { width: 16px; height: 16px; }

/* Subtle co-brand workspace line (only on branded tenants, e.g. Cal Lutheran
   SOM). Sits beneath the primary Gatherdly identity; small + muted so Gatherdly
   stays the dominant brand. */
.g-sidebar-workspace {
  display: flex; align-items: center; gap: var(--g-s-2);
  margin: -4px var(--g-s-2) var(--g-s-3);
  padding: 5px 7px; border-radius: var(--g-r-sm);
  color: var(--g-label); text-decoration: none;
  font-size: 12px; line-height: 1.2; font-weight: 500;
}
.g-sidebar-workspace:hover { background: var(--g-card-soft); color: var(--g-ink); }
.g-sidebar-workspace-mark { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; }
.g-sidebar-workspace-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.g-sidebar-search {
  display: flex; align-items: center; gap: var(--g-s-2);
  padding: 8px 10px;
  background: var(--g-card-soft);
  border: 1px solid var(--g-border-soft);
  border-radius: var(--g-r-md);
  color: var(--g-label); font-size: 13px;
  cursor: pointer; margin-bottom: var(--g-s-4);
}
.g-sidebar-search svg { width: 16px; height: 16px; }
.g-sidebar-search span { flex: 1; text-align: left; }
.g-kbd {
  font-family: var(--g-font-mono); font-size: 11px;
  padding: 2px 5px; border-radius: 4px;
  background: var(--g-card); border: 1px solid var(--g-border-soft);
}

.g-sidebar-nav { flex: 1; overflow-y: auto; }
.g-sidebar-section {
  font-size: 10px; letter-spacing: .12em; font-weight: 600;
  color: var(--g-label); text-transform: uppercase;
  padding: var(--g-s-3) var(--g-s-2) var(--g-s-2);
}
.g-sidebar-nav ul { list-style: none; padding: 0; margin: 0 0 var(--g-s-3); }
.g-sidebar-nav a {
  display: flex; align-items: center; gap: var(--g-s-3);
  padding: 8px 10px; border-radius: var(--g-r-md);
  color: var(--g-ink-soft); text-decoration: none;
  font-size: 14px; font-weight: 500;
}
.g-sidebar-nav a svg { width: 16px; height: 16px; flex-shrink: 0; }
.g-sidebar-nav a:hover { background: var(--g-card-soft); color: var(--g-ink); }
.g-sidebar-nav a.is-active {
  background: var(--g-accent-soft);
  color: var(--g-accent);
  font-weight: 600;
}
.g-sidebar-nav a.is-active::after {
  content: '›'; margin-left: auto;
  color: var(--g-accent); font-weight: 700;
}
.g-sidebar-disabled {
  display: flex; align-items: center; gap: var(--g-s-3);
  padding: 8px 10px; border-radius: var(--g-r-md);
  color: var(--g-ink-soft); font-size: 14px; font-weight: 500;
  opacity: .45; cursor: not-allowed;
}
.g-sidebar-disabled svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Locked (plan-gated) control: grayed but STILL clickable, so the inline upgrade
   message can fire. Distinct from .is-disabled (which kills pointer events).
   Defined after .g-sidebar-disabled so a locked nav item's cursor wins. */
.g-locked {
  opacity: .5;
  color: var(--g-ink-soft);
  cursor: pointer;
  filter: grayscale(45%);
  background: var(--g-card-soft);
  border-color: var(--g-border);
  box-shadow: none;
}
.g-locked:hover { opacity: .68; }
.g-locked .g-locked__tag { opacity: 1; filter: none; margin-left: auto; }
/* As a sidebar nav item it keeps the disabled look but must stay clickable. */
.g-sidebar-disabled.g-locked { opacity: .5; cursor: pointer; width: 100%; text-align: left;
  background: none; border: 0; font-family: inherit; }
.g-sidebar-disabled.g-locked:focus-visible {
  outline: none; border-radius: var(--g-r-md);
  box-shadow: 0 0 0 2px var(--g-bg), 0 0 0 4px var(--g-accent);
}

/* ── turbonav (partial navigation) ── */
html.turbo-loading { cursor: progress; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
}

/* ── Inline tab-rename control (admin) — a ⋮ that shows on the active tab or
   on hover, so renaming is possible without cluttering the sidebar. ── */
.g-nav-haskey { position: relative; }
.g-nav-rename {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; padding: 0; border: 0; cursor: pointer;
  background: var(--g-card); color: var(--g-ink-soft);
  border-radius: var(--g-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s ease; z-index: 3;
}
.g-nav-group > .g-nav-rename { right: 28px; }  /* clear the chevron */
.g-nav-haskey:hover > .g-nav-rename,
.g-nav-haskey.is-navactive > .g-nav-rename { opacity: .8; }
.g-nav-rename:hover { opacity: 1; color: var(--g-ink); box-shadow: var(--g-shadow-card); }
html.sidebar-collapsed .g-nav-rename { display: none; }

/* ── Sidebar nav dropdown group (e.g. Outreach). Global — the sidebar renders
   on every page, so these must not live in a page-specific stylesheet. ── */
.g-nav-grouptoggle {
  display: flex; align-items: center; gap: var(--g-s-3); width: 100%;
  padding: 8px 10px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--g-r-md); font: inherit; font-size: 14px; font-weight: 500;
  color: var(--g-ink-soft); text-align: left;
}
.g-nav-grouptoggle:hover { background: var(--g-card-soft); color: var(--g-ink); }
.g-nav-grouptoggle.is-active { color: var(--g-accent); font-weight: 600; }
.g-nav-grouptoggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.g-nav-chevron { margin-left: auto; transition: transform .18s ease; opacity: .7; }
.g-nav-group.is-open .g-nav-chevron { transform: rotate(180deg); }
.g-nav-grouptoggle .g-count-pill { margin-left: auto; }
.g-nav-grouptoggle .g-count-pill + .g-nav-chevron { margin-left: var(--g-s-2); }

.g-nav-sub {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  max-height: 0; opacity: 0; transition: max-height .2s ease, opacity .16s ease;
}
.g-nav-group.is-open .g-nav-sub { max-height: 360px; opacity: 1; margin: 2px 0 4px; }
.g-nav-sub a {
  display: block; padding: 6px 10px 6px 38px;
  font-size: 13px; color: var(--g-ink-soft); text-decoration: none;
  border-radius: var(--g-r-sm);
}
.g-nav-sub a:hover { background: var(--g-card-soft); color: var(--g-ink); }
.g-nav-sub a.is-active { color: var(--g-accent); font-weight: 600; }
/* Sub-items are display:block, so the inherited `.g-sidebar-nav a.is-active::after`
   chevron wraps onto its own line. Suppress it — the highlight box stays one line. */
.g-nav-sub a.is-active::after { content: none; }
/* Locked sub-item (e.g. Schedule on a plan without autopilot): same row metrics
   as a sub-link, dimmed, with the plan tag pushed to the right. */
.g-nav-sublocked {
  display: flex; align-items: center; gap: var(--g-s-2); width: 100%;
  padding: 6px 10px 6px 38px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--g-label); text-align: left;
  border-radius: var(--g-r-sm);
}
.g-nav-sublocked:hover { background: var(--g-card-soft); color: var(--g-ink-soft); }
.g-nav-sublocked .g-locked__tag { margin-left: auto; }

/* Collapsed icon-rail: hide the toggle's label, chevron, pill + sub-list like
   the other icon-only items. Clicking the toggle re-expands the sidebar. */
html.sidebar-collapsed .g-nav-grouptoggle span,
html.sidebar-collapsed .g-nav-grouptoggle .g-nav-chevron,
html.sidebar-collapsed .g-nav-grouptoggle .g-count-pill,
html.sidebar-collapsed .g-nav-sub { display: none; }
html.sidebar-collapsed .g-nav-grouptoggle { justify-content: center; }
html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-nav-grouptoggle span { display: inline; }
html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-nav-grouptoggle .g-nav-chevron { display: block; }
html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-nav-grouptoggle { justify-content: flex-start; }
/* Re-show the sub-list once the rail is expanded — an open group then drops
   down (the .is-open max-height rule above does the reveal). Without this the
   sub-list stays display:none even while hovering, so clicking does nothing. */
html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-nav-sub { display: block; }

/* ── Analytics: pure-CSS bar charts ── */
.g-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-s-4); }
@media (max-width: 760px) { .g-chart-grid { grid-template-columns: 1fr; } }
.g-chart-card { padding: var(--g-s-5); }
.g-chart-title { font-size: 14px; font-weight: 600; color: var(--g-ink); margin: 0 0 var(--g-s-4); }
.g-bars { display: flex; align-items: flex-end; gap: 4px; height: 132px; }
.g-bar-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 3px;
}
.g-bar {
  width: 64%; min-height: 2px; border-radius: 3px 3px 0 0;
  background: var(--g-card-soft); transition: height .3s ease;
}
.g-bar.is-accent { background: var(--g-accent); }
.g-bar-val { font-size: 10px; font-weight: 600; color: var(--g-ink-soft); line-height: 1; height: 10px; }
.g-bar-lbl {
  font-size: 9.5px; color: var(--g-label); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
@media (prefers-reduced-motion: reduce) { .g-bar { transition: none; } }

/* ── Drag-to-reorder sidebar tabs ── */
.g-nav-draggable { position: relative; }
/* A grab cursor on hover signals the row is draggable (no separate handle, so it
   never collides with the rename ⋮). The link still clicks normally. */
.g-sidebar-nav .g-nav-draggable:hover > a,
.g-sidebar-nav .g-nav-draggable:hover > button { cursor: grab; }
.g-sidebar-nav .g-nav-draggable.is-dragging { opacity: .45; }
.g-sidebar-nav .g-nav-draggable.is-dragging > a,
.g-sidebar-nav .g-nav-draggable.is-dragging > button { cursor: grabbing; }
/* Drop indicators — a 2px coral line at the top/bottom edge of the target row. */
.g-sidebar-nav .g-nav-draggable.drop-before::before,
.g-sidebar-nav .g-nav-draggable.drop-after::after {
  content: ""; position: absolute; left: 6px; right: 6px; height: 2px;
  background: var(--g-accent); border-radius: 2px; z-index: 2;
}
.g-sidebar-nav .g-nav-draggable.drop-before::before { top: -1px; }
.g-sidebar-nav .g-nav-draggable.drop-after::after { bottom: -1px; }
/* Dragging is a desktop affordance; the collapsed rail has no room for it. */
html.sidebar-collapsed .g-nav-draggable { cursor: default; }

.g-count-pill {
  margin-left: auto;
  background: var(--g-accent);
  color: var(--g-card);
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
}

.g-sidebar-user {
  display: flex; align-items: center; gap: var(--g-s-2);
  padding: var(--g-s-2); margin-top: var(--g-s-3);
  background: var(--g-card-soft);
  border-radius: var(--g-r-md);
  position: relative;
}
.g-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--g-avatar); color: var(--g-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}
.g-sidebar-user-meta { flex: 1; min-width: 0; }
.g-sidebar-user-name {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--g-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-sidebar-user-sub { font-size: 11px; color: var(--g-label); }
.g-sidebar-gear {
  background: none; border: 0; padding: 4px;
  color: var(--g-label); cursor: pointer; border-radius: 4px;
}
.g-sidebar-gear:hover { color: var(--g-ink); background: var(--g-card); }
.g-sidebar-gear svg { width: 16px; height: 16px; }

/* Push the main content over so it doesn't overlap the sticky sidebar.
   som-theme.css already does this — but we add our own selector for safety. */
body:has(.g-sidebar) .main-content {
  margin-left: var(--sidebar-width, 220px);
  transition: margin-left 220ms cubic-bezier(.2,.6,.2,1);
}

/* Label fade — animates with the width transition.
   Selectors mirror those in the collapsed-mode block below. */
.g-sidebar .g-sidebar-name,
.g-sidebar .g-sidebar-section,
.g-sidebar-search span,
.g-sidebar-search .g-kbd,
.g-sidebar-nav a span,
.g-sidebar-user-meta,
.g-count-pill {
  white-space: nowrap;
  overflow: hidden;
  max-width: 220px;
  transition: opacity 160ms cubic-bezier(.2,.6,.2,1), max-width 200ms cubic-bezier(.2,.6,.2,1);
}

/* ============================================================
   Sidebar — collapsed mode + responsive
   When html.sidebar-collapsed is set (by sidebar-collapse.js),
   narrow the sidebar to icon-only and hide labels.
   ============================================================ */
html.sidebar-collapsed .g-sidebar {
  width: 60px !important;
}
html.sidebar-collapsed .g-sidebar .g-sidebar-name,
html.sidebar-collapsed .g-sidebar .g-sidebar-workspace-name,
html.sidebar-collapsed .g-sidebar .g-sidebar-section,
html.sidebar-collapsed .g-sidebar-search span,
html.sidebar-collapsed .g-sidebar-search .g-kbd,
html.sidebar-collapsed .g-sidebar-nav a span,
html.sidebar-collapsed .g-sidebar-user-meta,
html.sidebar-collapsed .g-count-pill {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}
html.sidebar-collapsed .g-sidebar .g-sidebar-workspace { justify-content: center; gap: 0; }
/* Collapsed nav links: center the icon in the 60px rail. gap:0 + no
   horizontal padding is required — otherwise the flex gap to the (now
   zero-width) label shoves every icon a few px left of true center. */
html.sidebar-collapsed .g-sidebar-nav a {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}
html.sidebar-collapsed .g-sidebar-nav a.is-active::after {
  display: none;
}
html.sidebar-collapsed .g-sidebar-search {
  padding: 9px 0;
  gap: 0;
  justify-content: center;
  width: 100%;
}
/* Fully remove the label + ⌘K badge from layout when collapsed. opacity:0 +
   max-width:0 alone leaves the kbd's padding/border (~12px) occupying space,
   which shoves the flex-centered magnifier off-center to the left. */
html.sidebar-collapsed .g-sidebar-search span,
html.sidebar-collapsed .g-sidebar-search .g-kbd {
  display: none;
}
/* Collapsed footer: center the avatar, drop the gear (settings live in the
   expanded sidebar) so the 60px rail isn't cramped with two controls. */
html.sidebar-collapsed .g-sidebar-user {
  justify-content: center;
  gap: 0;
}
html.sidebar-collapsed .g-sidebar-gear {
  display: none;
}
/* Keep the toggle button visible + clickable when collapsed — it IS the
   expand affordance. (Previously hidden, which trapped the user with no
   way back to the expanded sidebar.) Hide the logo link instead so the
   button sits centered in the 60px rail. */
html.sidebar-collapsed .g-sidebar-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
}
html.sidebar-collapsed .g-sidebar-brand {
  justify-content: center;
  padding: 0;
}
html.sidebar-collapsed .g-sidebar-brand a {
  display: none;
}
/* The .g-sidebar is an in-flow flex sibling: <body> is display:flex and the
   sidebar is position:sticky, so it already reserves its own column width in
   the row. The legacy `.main-content { margin-left: var(--sidebar-width) }`
   (som-theme.css) was built for the OLD fixed sidebar and now DOUBLE-counts
   that width — stranding a dead 220px gap (60px collapsed) between the sidebar
   and the content, so the page never fills the available space. Zero it out
   for g-sidebar layouts in both states. */
body:has(.g-sidebar) .main-content,
html.sidebar-collapsed body:has(.g-sidebar) .main-content {
  margin-left: 0;
}

/* ============================================================
   Full-bleed app pages
   The legacy .content-area (som-theme.css) caps width at 1240px with no
   centering, so with the sidebar OPEN the page stalls left and strands a
   band of whitespace on the right; collapsed mode bumps the cap to 1880px.
   The new .g-* dashboard/three-pane pages own their own inner padding and
   should fill the viewport minus the sidebar in BOTH states — so we drop
   the cap + padding for them only. The explicit `full-bleed` class keeps
   legacy capped pages untouched. The collapsed override is required because
   `html.sidebar-collapsed .content-area` (0,2,1) out-specifies a bare
   `.content-area.full-bleed` (0,2,0). */
.content-area.full-bleed,
html.sidebar-collapsed .content-area.full-bleed {
  max-width: none;
  padding: 0;
}

/* Center every legacy capped page in the available canvas. som-theme's
   `.content-area` sets max-width:1240px but no auto margin, so with the sidebar
   open the page strands whitespace on the right. This ties som's specificity
   and wins on load order; harmless on `.full-bleed` (max-width:none). */
.content-area { margin-inline: auto; }

/* NOTE: the old `@media (max-width: 1100px)` auto-collapse block was removed.
   It force-collapsed the sidebar on normal laptop viewports AND the JS toggle
   was a no-op at that width, so the sidebar could never be re-expanded. Collapse
   is now purely user-controlled via the always-visible toggle button (and ⌘B). */

/* Settings menu (dropdown opened by gear icon) */
.g-settings-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 200px;
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-md);
  box-shadow: var(--g-shadow-pop);
  padding: 6px;
  font-size: 13px;
  z-index: 50;
}
.g-settings-menu a,
.g-settings-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--g-r-sm);
  color: var(--g-ink); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: inherit;
}
.g-settings-menu a:hover,
.g-settings-menu button:hover { background: var(--g-card-soft); }
.g-settings-divider {
  height: 1px; background: var(--g-border-soft); margin: 4px 0;
}

/* ============================================================
   Home page
   ============================================================ */
.g-home { padding: var(--g-s-8) var(--g-s-10); max-width: 1400px; margin: 0 auto; }

.g-home-greet { margin-bottom: var(--g-s-8); }
.g-home-date {
  font-family: var(--g-font-sans); font-size: 13px;
  color: var(--g-label); margin-bottom: var(--g-s-2);
}
.g-home-greet-name {
  font-family: var(--g-font-serif);
  font-size: 38px; line-height: 1.1; font-weight: 400;
  color: var(--g-ink); margin: 0;
}
.g-home-greet-sub {
  margin-top: var(--g-s-2); color: var(--g-ink-soft); font-size: 14px;
}

/* ── Opening hero: greeting + animated "how it works" map ──────────── */
.g-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center;
  gap: var(--g-s-10);
  margin-bottom: var(--g-s-10);
}
.g-home-hero .g-home-greet { margin-bottom: 0; }

.g-hero-map {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 460px;
}
.g-hero-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* connecting paths */
.g-hero-path {
  stroke: var(--g-border);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* drifting dots are hidden until motion is allowed */
.g-hero-dots circle { opacity: 0; }

/* node bubbles + labels */
.g-hero-node circle {
  fill: var(--g-card);
  stroke: var(--g-border);
  stroke-width: 1.5;
}
.g-hero-node text {
  fill: var(--g-label);
  font-family: var(--g-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-anchor: middle;
}

/* central brand mark */
.g-hero-core-ring {
  fill: none;
  stroke: var(--g-accent);
  stroke-width: 1.5;
  opacity: .35;
}
.g-hero-core-tile { fill: var(--g-accent); opacity: .35; }
.g-hero-core-tile.is-lead { opacity: 1; }

/* motion — only when the visitor is happy to see it */
@media (prefers-reduced-motion: no-preference) {
  .g-hero-dots circle { opacity: 1; }
  .g-hero-halo {
    transform-origin: 230px 140px;
    animation: g-hero-pulse 6s ease-in-out infinite;
  }
  .g-hero-core { animation: g-hero-float 7s ease-in-out infinite; }
  .g-hero-core-ring { animation: g-hero-ring 6s ease-in-out infinite; }
  .g-hero-node--1 { animation: g-hero-bob 6.5s ease-in-out infinite; }
  .g-hero-node--2 { animation: g-hero-bob 6.5s ease-in-out infinite .8s; }
  .g-hero-node--3 { animation: g-hero-bob 6.5s ease-in-out infinite 1.6s; }
  .g-hero-node--4 { animation: g-hero-bob 6.5s ease-in-out infinite 2.4s; }
}
@keyframes g-hero-pulse {
  0%, 100% { opacity: .65; transform: scale(.96); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
@keyframes g-hero-ring {
  0%, 100% { opacity: .25; }
  50%      { opacity: .5;  }
}
@keyframes g-hero-float {
  0%, 100% { transform: translate(230px, 140px); }
  50%      { transform: translate(230px, 136px); }
}
@keyframes g-hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* stack on narrow screens; keep the map compact, never pushed off */
@media (max-width: 900px) {
  .g-home-hero {
    grid-template-columns: 1fr;
    gap: var(--g-s-6);
  }
  .g-hero-map { justify-self: start; max-width: 420px; }
}

.g-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--g-s-4);
  margin-bottom: var(--g-s-10);
}
.g-kpi {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: var(--g-s-5);
  text-decoration: none; color: inherit;
  box-shadow: var(--g-shadow-card);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
  min-height: 130px;
}
.g-kpi:hover { transform: translateY(-2px); box-shadow: var(--g-shadow-pop); }
.g-kpi-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
                font-weight: 600; color: var(--g-label); }
/* All KPI values — numbers, percents and text alike — share one editorial
   serif (Instrument Serif italic), echoing the homepage greeting so the
   whole dashboard reads consistently. */
.g-kpi-value { font-family: var(--g-font-serif); font-style: italic;
                font-size: 38px; line-height: 1.05; font-weight: 400;
                color: var(--g-ink); margin-top: auto; letter-spacing: 0; }
.g-kpi-sub { font-size: 12px; color: var(--g-ink-soft); }
.g-kpi-sub.is-warn  { color: var(--g-status-warn); }
.g-kpi-sub.is-alert { color: var(--g-status-alert); }

.g-band { margin-bottom: var(--g-s-10); }
.g-band-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: var(--g-s-3);
  border-bottom: 1px solid var(--g-border-soft);
  margin-bottom: var(--g-s-4);
}
.g-band-count { font-size: 12px; color: var(--g-label); }
.g-band-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g-s-4);
}
.g-metric {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: var(--g-s-5);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 110px;
  box-shadow: var(--g-shadow-card);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.g-metric:hover { transform: translateY(-2px); box-shadow: var(--g-shadow-pop); }
/* Workspace-card title: clamp to 2 lines so long prompts never cut mid-word. */
.g-metric-title {
  font-size: 15px; font-weight: 600; color: var(--g-ink);
  margin-top: 2px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.g-metric-when { margin-top: auto; }
.g-metric-empty {
  margin-top: auto; display: flex; flex-direction: column;
}
.g-metric-empty span:first-child {
  font-size: 36px; color: var(--g-label); line-height: 1;
}
.g-metric-empty-label {
  font-size: 12px; color: var(--g-label); margin-top: 4px;
}

/* ============================================================
   Three-pane layout (used by Events, People, etc.)
   ============================================================ */
.g-three-pane {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  min-height: calc(100vh - 0px);
}

/* ============================================================
   Live Calls — inline expanded feed (single column; each call
   renders fully under the person, no selection / standalone view)
   ============================================================ */
.g-feed { padding: var(--g-s-6) var(--g-s-8); max-width: 900px; margin: 0 auto; }
.g-feed-head { display: flex; align-items: center; gap: var(--g-s-3); flex-wrap: wrap; margin-bottom: var(--g-s-5); }
.g-feed-head h1 { font-size: 22px; font-weight: 600; margin: 0; color: var(--g-ink); }
.g-feed-body { display: flex; flex-direction: column; gap: var(--g-s-4); }
.g-call-card { display: flex; flex-direction: column; gap: var(--g-s-3); }
.g-call-head { display: flex; align-items: center; gap: var(--g-s-3); }
.g-call-block { display: flex; flex-direction: column; gap: 4px; }
.g-call-text { font-size: 14px; color: var(--g-ink); line-height: 1.6; white-space: pre-wrap; }
.g-call-transcript {
  max-height: 320px; overflow-y: auto;
  padding: var(--g-s-3); background: var(--g-card-soft); border-radius: var(--g-r-md);
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; color: var(--g-ink);
}
.g-call-analysis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-s-2) var(--g-s-4); }
.g-call-row { display: flex; gap: var(--g-s-2); }
@media (max-width: 700px) {
  .g-feed { padding: var(--g-s-4); }
  .g-call-analysis { grid-template-columns: 1fr; }
}

/* List pane */
.g-list-pane {
  border-right: 1px solid var(--g-border);
  padding: var(--g-s-5) var(--g-s-4);
  background: var(--g-bg);
  overflow-y: auto;
  max-height: 100vh; position: sticky; top: 0;
}
.g-list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--g-s-4);
}
.g-list-head h1 { font-size: 20px; font-weight: 600; margin: 0; color: var(--g-ink); }
.g-list-count {
  font-size: 13px; color: var(--g-label); font-weight: 500; margin-left: 6px;
}
.g-list-add {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--g-card-soft); color: var(--g-ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 16px; line-height: 1;
}
.g-list-add:hover { background: var(--g-accent-soft); color: var(--g-accent); }

.g-list-search {
  display: flex; align-items: center; gap: var(--g-s-2);
  padding: 8px 10px; background: var(--g-card-soft);
  border: 1px solid var(--g-border-soft);
  border-radius: var(--g-r-md); margin-bottom: var(--g-s-3);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.g-list-search:focus-within {
  background: var(--g-card);
  border-color: var(--g-accent);
  box-shadow: 0 0 0 3px var(--g-accent-soft);
}
.g-list-search svg { width: 15px; height: 15px; color: var(--g-label); transition: color 140ms ease; }
.g-list-search:focus-within svg { color: var(--g-accent); }
.g-list-search input {
  flex: 1; background: none; border: 0; outline: none;
  font: inherit; color: var(--g-ink);
}

.g-list-filters {
  display: flex; gap: 6px; margin-bottom: var(--g-s-4); flex-wrap: wrap;
}
.g-list-chip {
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; color: var(--g-ink-soft);
  text-decoration: none; background: transparent;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.g-list-chip:hover { background: var(--g-card-soft); }
.g-list-chip.is-active {
  background: var(--g-ink); color: var(--g-card);
}

.g-list-body { display: flex; flex-direction: column; gap: 6px; }
.g-list-card {
  display: flex; gap: var(--g-s-3); padding: var(--g-s-3);
  border-radius: var(--g-r-md);
  text-decoration: none; color: inherit;
  align-items: center;
}
.g-list-card:hover { background: var(--g-card-soft); }
.g-list-card.is-active {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow-card);
}
.g-list-card.drop-before { box-shadow: inset 0 2px 0 var(--g-accent); }

/* ── People "Files" (Finder-like folders, grouped into sections) ── */
.g-files-bar {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: var(--g-s-3);
  padding-bottom: var(--g-s-3);
  border-bottom: 1px solid var(--g-border-soft);
}
.g-files-section { margin-bottom: var(--g-s-2); }
.g-files-sechead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px 2px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--g-label);
}
.g-files-secaction { font-size: 11px; color: var(--g-accent); text-decoration: none; }
.g-files-secaction:hover { text-decoration: underline; }
.g-files-secempty { margin: 0; padding: 2px 8px 4px; font-size: 12px; color: var(--g-label); }
.g-file-eventhead {
  display: flex; justify-content: space-between; align-items: center; gap: var(--g-s-2);
  margin-bottom: var(--g-s-3); font-size: 12px; color: var(--g-label); flex-wrap: wrap;
}
.g-file-eventhead a { color: var(--g-accent); text-decoration: none; font-weight: 600; }
.g-file-eventhead a:hover { text-decoration: underline; }
.g-list-rolehead {
  padding: 10px 8px 3px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--g-label);
}
.g-file-row {
  display: flex; align-items: center; gap: var(--g-s-2);
  padding: 6px 8px; border-radius: var(--g-r-sm);
  font-size: 13px; color: var(--g-ink-soft);
  text-decoration: none; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.g-file-row:hover { background: var(--g-card-soft); }
.g-file-row.is-active { background: var(--g-accent-soft); color: var(--g-accent); font-weight: 600; }
.g-file-ico { font-size: 13px; line-height: 1; }
.g-file-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-file-new { margin-top: 2px; }
.g-file-new > summary { list-style: none; }
.g-file-new > summary::-webkit-details-marker { display: none; }
.g-file-newform, .g-file-renameform {
  display: flex; gap: var(--g-s-2); align-items: center; margin-top: 6px;
}
.g-file-newform input, .g-file-renameform input {
  flex: 1; min-width: 0; padding: 6px 8px;
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-card); color: var(--g-ink); font: inherit; font-size: 13px;
}
.g-file-actions {
  display: flex; gap: var(--g-s-2); align-items: center;
  margin-bottom: var(--g-s-3); flex-wrap: wrap;
}

.g-file-enrich { margin-bottom: var(--g-s-3); }
.g-file-enrich .g-action { justify-content: center; }

/* ── Inline status banner (reply-tracking health, etc.) ── */
.g-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--g-s-3); padding: 11px 14px;
  border-radius: var(--g-r-md); font-size: 13px; line-height: 1.4;
  color: var(--g-ink); background: var(--g-accent-soft);
}
.g-banner.is-warn { background: var(--g-status-warn-bg); color: var(--g-status-warn); }
.g-banner-title { font-weight: 700; }
.g-banner .g-action { margin-left: auto; padding: 6px 12px; font-size: 12px; }

/* ── Enrich-in-progress banner (background enrichment) ── */
.g-enrich-progress {
  margin-bottom: var(--g-s-3); padding: 10px 12px;
  background: var(--g-accent-soft); border-radius: var(--g-r-md);
}
.g-enrich-head { display: flex; align-items: center; gap: 9px; }
.g-enrich-pulse {
  width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--g-accent);
  animation: g-enrich-pulse 1.5s ease-out infinite;
}
@keyframes g-enrich-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 100, 66, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(201, 100, 66, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 100, 66, 0); }
}
.g-enrich-title { font-size: 13px; font-weight: 600; color: var(--g-accent); }
.g-enrich-sub { font-size: 11px; color: var(--g-ink-soft); margin-top: 1px; }
.g-enrich-bar {
  margin-top: 9px; height: 5px; border-radius: 999px;
  background: rgba(201, 100, 66, .18); overflow: hidden;
}
.g-enrich-fill {
  height: 100%; width: 6%; border-radius: 999px; background: var(--g-accent);
  transition: width 500ms ease;
}

.g-selectall {
  display: flex; align-items: center; gap: var(--g-s-2);
  padding: 4px 8px 8px; margin-bottom: 4px;
  font-size: 12px; color: var(--g-label); cursor: pointer;
  user-select: none;
}
.g-selectall input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--g-accent); }

/* Row wrapper = checkbox + card (so bulk-move selection lives beside the link) */
.g-list-rowwrap { display: flex; align-items: center; gap: var(--g-s-2); }
.g-list-rowwrap .g-list-card { flex: 1; min-width: 0; }
.g-row-check { flex: none; width: 15px; height: 15px; cursor: pointer; accent-color: var(--g-accent); }

/* Bulk-action panel — stacked so nothing truncates in the narrow pane.
   [hidden] needs an explicit display:none because the class sets display. */
.g-move-bar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; margin-bottom: var(--g-s-3);
  background: var(--g-accent-soft); border-radius: var(--g-r-md);
  font-size: 12px; color: var(--g-ink-soft);
}
.g-move-bar[hidden] { display: none; }
.g-move-count { font-weight: 600; color: var(--g-ink); }
.g-move-bar select {
  width: 100%; min-width: 0; padding: 7px 9px;
  border: 1px solid var(--g-border); border-radius: var(--g-r-sm);
  background: var(--g-card); color: var(--g-ink); font: inherit; font-size: 13px;
}
.g-move-actions { display: flex; gap: var(--g-s-2); }
.g-move-actions .g-action { flex: 1; justify-content: center; }

/* Detail pane */
.g-detail-pane {
  padding: var(--g-s-6) var(--g-s-8);
  background: var(--g-bg);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--g-s-5);
  max-height: 100vh;
}
/* People profile wraps its header + body <section>s in one column-2 scroll
   container so multiple detail sections don't wrap into the grid as extra
   rows beneath the list. Scoped to .g-detail-col so other three-pane pages
   keep their existing per-pane scroll behavior. */
.g-detail-col { min-width: 0; max-height: 100vh; overflow-y: auto; }
.g-detail-col .g-detail-pane { max-height: none; overflow: visible; }
.g-detail-head {
  display: flex; gap: var(--g-s-5);
  align-items: flex-start;
  padding: var(--g-s-5) var(--g-s-6) var(--g-s-6);
  border-bottom: 1px solid var(--g-border-soft);
}
.g-detail-image {
  width: 64px; height: 64px; border-radius: var(--g-r-md);
  background: linear-gradient(135deg, var(--g-card-soft), var(--g-avatar)); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--g-ink); font-size: 22px; font-weight: 600;
  overflow: hidden;
}
.g-detail-image img { width: 100%; height: 100%; object-fit: cover; }

.g-detail-meta { flex: 1; min-width: 0; }
.g-detail-pills {
  display: flex; gap: 6px; margin-bottom: var(--g-s-2);
}
.g-detail-actions {
  display: flex; gap: var(--g-s-2);
}
.g-action {
  padding: 8px 14px; border-radius: var(--g-r-md);
  background: var(--g-card-soft); color: var(--g-ink);
  text-decoration: none; font-size: 13px; font-weight: 500;
  border: 0; cursor: pointer; font-family: inherit; line-height: 1.3;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 140ms ease, box-shadow 140ms ease, transform 80ms ease, color 140ms ease;
}
.g-action:hover { background: var(--g-card); box-shadow: var(--g-shadow-card); }
.g-action:active { transform: translateY(1px); }
.g-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--g-bg), 0 0 0 4px var(--g-accent);
}
.g-action.is-primary { background: var(--g-ink); color: var(--g-card); }
.g-action.is-primary:hover { background: var(--g-ink); box-shadow: var(--g-shadow-pop); }
.g-action.is-danger  { background: var(--g-status-alert-bg); color: var(--g-status-alert); }
.g-action.is-danger:hover { box-shadow: var(--g-shadow-card); }
.g-action:disabled, .g-action[disabled], .g-action.is-disabled {
  opacity: .5; pointer-events: none; box-shadow: none;
}
/* Working state — a spinner ahead of the (kept) label while a submit is in flight. */
.g-action.is-working { pointer-events: none; opacity: .85; }
.g-action.is-working::before {
  content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: g-spin .6s linear infinite;
}
@keyframes g-spin { to { transform: rotate(360deg); } }

/* ── Global top progress bar (loading.js) — feedback for slow form submits and
   turbonav page swaps so nothing ever "just sits there". ── */
#g-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--g-accent); box-shadow: 0 0 8px var(--g-accent), 0 1px 4px rgba(201, 100, 66, .5);
  z-index: 1000; opacity: 0; pointer-events: none;
  transition: width .22s ease, opacity .3s ease;
  border-top-right-radius: 2px; border-bottom-right-radius: 2px;
}
#g-progress.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .g-action.is-working::before { animation: none; }
  #g-progress { transition: opacity .3s ease; }
}

.g-detail-tabs {
  display: flex; gap: var(--g-s-1); padding: 0 var(--g-s-1);
  border-bottom: 1px solid var(--g-border-soft);
}
.g-tab {
  padding: 10px 14px; color: var(--g-ink-soft); text-decoration: none;
  font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent;
}
.g-tab:hover { color: var(--g-ink); }
.g-tab.is-active { color: var(--g-ink); border-bottom-color: var(--g-accent); }

/* Section cards inside detail pane */
.g-section { padding: var(--g-s-5) var(--g-s-6); }
.g-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--g-s-4);
}
.g-section-head h2 { font-size: 15px; font-weight: 600; margin: 0; color: var(--g-ink); }
.g-section-edit {
  font-size: 12px; color: var(--g-ink-soft); text-decoration: none;
}
.g-section-edit:hover { color: var(--g-accent); }
.g-section-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-s-4);
}
.g-field-label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--g-label); margin-bottom: 4px;
}
.g-field-value { font-size: 14px; color: var(--g-ink); }

/* ============================================================
   Reusable primitives (P3)
   Shared building blocks so page templates can stop hand-rolling
   inline styles. Consumed by the events/people/outreach refactors
   (P5/P6). All are new class names — additive, no existing usage.
   ============================================================ */
/* Form controls */
.g-input, .g-select, textarea.g-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; font: inherit; font-size: 13px;
  color: var(--g-ink); background: var(--g-card);
  border: 1px solid var(--g-border); border-radius: var(--g-r-md);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.g-input::placeholder { color: var(--g-label); }
.g-input:focus, .g-select:focus, textarea.g-input:focus,
.g-input:focus-visible, .g-select:focus-visible, textarea.g-input:focus-visible {
  outline: none; border-color: var(--g-accent);
  box-shadow: 0 0 0 3px var(--g-accent-soft);
}
.g-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
textarea.g-input { min-height: 88px; resize: vertical; line-height: 1.5; }

/* Key/value pair (label over value) */
.g-kv { display: flex; flex-direction: column; gap: 2px; }
.g-kv-label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--g-label);
}
.g-kv-value { font-size: 14px; color: var(--g-ink); }

/* Canonical list row — one rhythm for guest/career/education/queue rows */
.g-row {
  display: flex; align-items: center; gap: var(--g-s-3);
  padding: var(--g-s-3) 0;
  border-bottom: 1px solid var(--g-border-soft);
}
.g-row:last-child { border-bottom: 0; }
.g-row-main { flex: 1; min-width: 0; }

/* Text scale */
.g-text-headline { font-size: 15px; font-weight: 600; color: var(--g-ink); }
.g-text-body { font-size: 14px; color: var(--g-ink-soft); line-height: 1.5; }
.g-text-meta { font-size: 12px; color: var(--g-label); }

/* Chip / tag */
.g-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--g-card-soft); color: var(--g-ink-soft);
  border: 1px solid var(--g-border-soft);
}
.g-chip.is-accent { background: var(--g-accent-soft); color: var(--g-accent); border-color: transparent; }

/* ============================================================
   Utility + component layer (P5/P6)
   Replaces the most-repeated inline styles across events/people/
   outreach/live_calls. Additive; output matches the inline styles
   they replace.
   ============================================================ */
/* Layout utilities */
.g-w-full   { width: 100%; }
.g-m-0      { margin: 0; }
.g-flex-main { flex: 1; min-width: 0; }
.g-stack    { display: flex; flex-direction: column; gap: var(--g-s-2); }
.g-span2    { grid-column: span 2; }

/* Full-width form field inside a .g-section-body 2-col grid */
.g-field-full { grid-column: span 2; display: flex; flex-direction: column; gap: 4px; }

/* Toolbar / tab strip above a list or section */
.g-toolbar { display: flex; gap: var(--g-s-2); margin-bottom: var(--g-s-4); flex-wrap: wrap; }
.g-toolbar.is-center { align-items: center; }

/* Wrapping chip/tag row */
.g-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }

/* Empty-state block */
.g-empty    { text-align: center; padding: var(--g-s-8); color: var(--g-label); }
.g-empty-lg { padding: var(--g-s-12); }

/* Inline text + link helpers */
.g-text-strong { font-size: 13px; font-weight: 500; color: var(--g-ink); }
.g-text-soft   { font-size: 13px; color: var(--g-ink-soft); }
.g-link        { color: var(--g-accent); text-decoration: none; }
.g-link:hover  { text-decoration: underline; }
.g-pill.is-sm  { font-size: 10px; }

/* Bare-button reset for clickable rows/icons */
.g-btn-bare { border: none; background: none; cursor: pointer; font: inherit; color: inherit; padding: 0; }

/* Quote / note block (italic on soft card) */
.g-note {
  padding: var(--g-s-3); background: var(--g-card-soft);
  border-radius: var(--g-r-sm); font-size: 13px; line-height: 1.5;
  color: var(--g-ink); font-style: italic;
}

/* Micro-interaction: optionally-interactive rows get a gentle hover */
.g-row { transition: background 120ms ease; }
.g-row.is-interactive:hover { background: var(--g-card-soft); }

/* Responsive: stack the 2-col form grid + tighten panes on small screens */
@media (max-width: 600px) {
  .g-section-body { grid-template-columns: 1fr; }
  .g-field-full, .g-span2 { grid-column: span 1; }
  .g-detail-pane, .g-list-pane { padding-left: var(--g-s-3); padding-right: var(--g-s-3); }
}

/* ============================================================
   Centered page shell (Analytics now; other legacy pages later)
   Canonical container for a non-three-pane page, matching the
   Home/Setup centering so every page reads the same.
   ============================================================ */
.g-page { max-width: 1100px; margin: 0 auto; padding: var(--g-s-8) var(--g-s-10); }
.g-page-head { margin-bottom: var(--g-s-8); }
.g-page-sub { color: var(--g-ink-soft); margin: var(--g-s-2) 0 0; }

/* Compact stat tiles (count + label) for distribution/outcome clusters */
.g-statgrid { display: flex; flex-wrap: wrap; gap: var(--g-s-3); }
.g-stat {
  min-width: 104px; padding: var(--g-s-3) var(--g-s-4);
  background: var(--g-card-soft); border: 1px solid var(--g-border-soft);
  border-radius: var(--g-r-md); text-align: center;
}
.g-stat-value { font-size: 22px; font-weight: 600; color: var(--g-ink); line-height: 1.1; }
.g-stat-label {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--g-label); margin-top: 4px;
}

/* On-system data table */
.g-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.g-table th {
  text-align: left; padding: var(--g-s-2) var(--g-s-3);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--g-label); white-space: nowrap;
}
.g-table td {
  padding: var(--g-s-3); border-top: 1px solid var(--g-border-soft);
  color: var(--g-ink); vertical-align: middle;
}
.g-table tbody tr:hover { background: var(--g-card-soft); }

/* ============================================================
   Interactive form controls — toggle chip, switch, segmented
   selector. Checkbox/radio inputs styled as tactile pills/switches
   (used by the Team permissions UI; reusable elsewhere).
   ============================================================ */
/* Toggle chip — a checkbox rendered as a selectable pill */
.g-toggle-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--g-border); background: var(--g-card);
  color: var(--g-ink-soft); font-size: 13px; font-weight: 500;
  cursor: pointer; user-select: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.g-toggle-chip:hover { border-color: var(--g-accent); transform: translateY(-1px); }
.g-toggle-chip svg { width: 15px; height: 15px; opacity: .6; }
.g-toggle-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.g-toggle-chip:has(input:checked) {
  background: var(--g-accent-soft); border-color: transparent;
  color: var(--g-accent); font-weight: 600;
}
.g-toggle-chip:has(input:checked) svg { opacity: 1; }
.g-toggle-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--g-accent-soft); }

/* Toggle switch — a checkbox rendered as an iOS-style switch */
.g-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--g-ink); }
.g-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.g-switch-track {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--g-border); transition: background 160ms ease;
}
.g-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--g-shadow-card);
  transition: transform 160ms cubic-bezier(.2,.6,.2,1);
}
.g-switch input:checked ~ .g-switch-track { background: var(--g-accent); }
.g-switch input:checked ~ .g-switch-track::after { transform: translateX(16px); }
.g-switch input:focus-visible ~ .g-switch-track { box-shadow: 0 0 0 3px var(--g-accent-soft); }

/* Segmented selector — a row of pill options (e.g. permission presets) */
.g-preset-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.g-preset-opt {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--g-border); background: var(--g-card);
  color: var(--g-ink-soft); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.g-preset-opt:hover { border-color: var(--g-accent); color: var(--g-ink); }
.g-preset-opt.is-active {
  background: var(--g-accent); border-color: var(--g-accent); color: #fff; font-weight: 600;
}

/* Event list-card avatar variant (small icon over beige) */
.g-list-card .g-avatar {
  width: 32px; height: 32px;
}
.g-list-card .g-avatar svg { color: var(--g-ink-soft); }

/* Second tab row (inside body section) hides the duplicate from detail_pane header */
.g-detail-pane .g-detail-tabs:not(.g-detail-tabs-override) { display: none; }
.g-detail-pane-body { padding-top: 0; }

/* ============================================================
   Setup flow diagram  (Task 10)
   ============================================================ */
.g-setup { padding: var(--g-s-8) var(--g-s-10); max-width: 1040px; margin: 0 auto; }
.g-setup-head { text-align: center; margin-bottom: var(--g-s-10); }

.g-setup-flow {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--g-s-8);
}

/* Mind-map connector lines — stretch to fill the flow, sit behind tiles */
.g-flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.g-flow-lines path {
  fill: none;
  stroke: url(#g-flow-grad);
  stroke-width: 1.75;
  stroke-linecap: round;
  opacity: .65;
  stroke-dasharray: 5 7;
  animation: g-flow-drift 6s linear infinite;
}
@keyframes g-flow-drift {
  to { stroke-dashoffset: -24; }
}
@media (prefers-reduced-motion: reduce) {
  .g-flow-lines path { animation: none; }
}
/* Columns wrap (stack) on narrow screens — hide the overlay lines so they
   don't cross the stacked cards. */
@media (max-width: 820px) {
  .g-flow-lines { display: none; }
}

/* Columns + center sit above the connector lines */
.g-setup-col, .g-setup-center { position: relative; z-index: 1; }

.g-setup-col { display: flex; flex-direction: column; gap: var(--g-s-4); flex: 0 0 340px; max-width: 340px; }
.g-setup-col-head {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--g-label);
  text-align: center; margin-bottom: var(--g-s-2);
}

.g-setup-center {
  display: flex; align-items: center; justify-content: center;
  padding: var(--g-s-8) var(--g-s-4);
  min-height: 200px;
  align-self: center;   /* node sits at the vertical middle; columns stay top-aligned */
}
.g-setup-mark { text-align: center; }
/* Focal node — animated glowing brand mark at the heart of the map.
   The 4 connector lines now come from the .g-flow-lines SVG overlay, so the
   old node-anchored ::before/::after stubs are gone. */
.g-setup-mark-node {
  width: 64px; height: 64px; border-radius: 16px;
  background: linear-gradient(135deg, var(--g-accent), var(--g-accent-soft));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 28px; font-weight: 700; margin: 0 auto;
  cursor: pointer;
  animation: g-mark-glow 3.2s ease-in-out infinite;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
@keyframes g-mark-glow {
  0%, 100% {
    box-shadow:
      0 0 0 5px var(--g-accent-soft),
      0 0 18px 2px var(--g-accent-soft),
      0 10px 24px -8px var(--g-accent),
      var(--g-shadow-card);
  }
  50% {
    box-shadow:
      0 0 0 7px var(--g-accent-soft),
      0 0 38px 10px var(--g-accent-soft),
      0 12px 28px -6px var(--g-accent),
      var(--g-shadow-card);
  }
}
.g-setup-mark-node:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 0 8px var(--g-accent-soft),
    0 0 50px 14px var(--g-accent-soft),
    0 14px 32px -6px var(--g-accent),
    var(--g-shadow-card);
}
@media (prefers-reduced-motion: reduce) {
  .g-setup-mark-node { animation: none; }
}

.g-flow-tile {
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg);
  padding: var(--g-s-4);
  box-shadow: var(--g-shadow-card);
}
.g-flow-tile.is-unconfigured {
  background: var(--g-card-soft);
  border-style: dashed;
}
.g-flow-tile.is-unconfigured .g-flow-tile-icon,
.g-flow-tile.is-unconfigured .g-flow-tile-name {
  opacity: .65;
}
.g-flow-tile-head {
  display: flex; align-items: center; gap: var(--g-s-2);
  margin-bottom: var(--g-s-3);
}
.g-flow-tile-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--g-avatar);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--g-ink); flex-shrink: 0;
}
.g-flow-tile-icon svg { width: 15px; height: 15px; }
.g-flow-tile.is-unconfigured .g-flow-tile-icon { background: var(--g-card); }
.g-flow-tile-name {
  flex: 1; font-size: 13px; font-weight: 600; color: var(--g-ink);
}
.g-flow-tile-body { font-size: 12px; }

/* Connect modal */
.g-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.g-modal[hidden] { display: none; }
.g-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 18, 14, .4);
}
.g-modal-panel {
  position: relative;
  background: var(--g-card);
  border-radius: var(--g-r-lg);
  box-shadow: var(--g-shadow-pop);
  width: 90%; max-width: 480px;
  z-index: 1;
}
.g-modal-head {
  padding: var(--g-s-4) var(--g-s-5) 0;
  display: flex; align-items: baseline; justify-content: space-between;
}
.g-modal-head h2 { margin: 0; font-size: 18px; color: var(--g-ink); }
.g-modal-close {
  background: none; border: 0; cursor: pointer;
  font-size: 22px; color: var(--g-label); line-height: 1;
}
.g-modal-body { padding: var(--g-s-4) var(--g-s-5); }
.g-modal-fields { display: flex; flex-direction: column; gap: var(--g-s-3); }
.g-modal-field label {
  display: block; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--g-label); margin-bottom: 4px;
}
.g-modal-field input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-sm);
  font: inherit; color: var(--g-ink); background: var(--g-card);
  box-sizing: border-box;
}
.g-modal-field input:focus {
  outline: 0; border-color: var(--g-accent);
}
.g-modal-foot {
  padding: var(--g-s-3) var(--g-s-5) var(--g-s-5);
  display: flex; justify-content: flex-end; gap: var(--g-s-2);
}

/* ── Mobile: three-pane stacking (≤900px) ──────────────────────────
   No selection → full-width list, detail hidden.
   Selection     → list hidden, detail full-width with a Back link.
   Desktop (>900px) is completely unaffected.
   ================================================================ */
.g-detail-back { display: none; }

@media (max-width: 900px) {
  .g-three-pane {
    grid-template-columns: 1fr;
  }
  .g-list-pane {
    max-height: none;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--g-border);
  }
  .g-three-pane.has-selection .g-list-pane { display: none; }
  .g-three-pane:not(.has-selection) .g-detail-pane { display: none; }
  .g-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--g-s-3);
    color: var(--g-accent);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
  }
}

/* ============================================================
   LEGACY → ALVEN TOKEN BRIDGE
   Aliases som-theme.css's legacy tokens to the Alven --g-* values so every
   legacy page (.card/.btn/.badge/.h1-editorial/table/label/.field/.topbar…)
   repaints to the Alven palette/fonts/radii/shadows with zero per-page edits.
   Appended last → wins ties by load order.

   Dark-mode correctness: som redefines its dark palette at
   `:root[data-theme="dark"]` (0,2,0) and `@media(prefers):root:not([data-theme])`.
   A plain `:root` (0,1,0) bridge would be out-specified in dark, so the alias
   body is also emitted under `:root[data-theme="dark"]` (ties + wins on load)
   and the OS-dark media query. Aliases point at var(--g-*), which itself flips
   per theme, so the body is identical across blocks.

   Intentionally NOT bridged: status/semantic families (--success/-warning/
   -danger/-info/-tint/-soft/-ink, --s-*) — the Alven --g-status-* have no dark
   variant and would paint bright blocks on dark cards; legacy status tokens
   already flip correctly. Also left: high elevation (--elev-float/-modal/
   -overlay, --shadow-lg/-xl), --surface-glass/-dark, charts, spacing, motion,
   type-size. --shadow-ring is the only border cards/tables have → kept as a
   1px ring, not folded into a drop shadow.
   ============================================================ */
:root,
:root[data-theme="dark"] {
  /* surfaces */
  --surface: var(--g-bg);
  --bg: var(--g-bg);
  --color-background: var(--g-bg);
  --surface-raised: var(--g-card);
  --surface-elevated: var(--g-card);
  --card: var(--g-card);
  --surface-sunken: var(--g-card-soft);
  --surface-subtle: var(--g-card-soft);
  --surface-muted: var(--g-card-soft);
  --surface-tinted: var(--g-card-soft);
  /* text */
  --text: var(--g-ink);
  --text-strong: var(--g-ink);
  --color-text: var(--g-ink);
  --text-muted: var(--g-ink-soft);
  --text-secondary: var(--g-ink-soft);
  --muted: var(--g-ink-soft);
  --text-subtle: var(--g-label);
  --text-tertiary: var(--g-label);
  --text-inverse: #FFFFFF;
  /* borders */
  --border: var(--g-border);
  --border-subtle: var(--g-border-soft);
  --border-strong: var(--g-ink-soft);
  /* brand + accent (text-on-solid stays white; "ink"/accent-colored bits = accent) */
  --brand-primary: var(--g-accent);
  --brand-primary-hover: var(--g-accent);
  --brand-primary-fg: #FFFFFF;
  --brand-accent: var(--g-accent);
  --brand-ink: var(--g-accent);
  --accent: var(--g-accent);
  --accent-hover: var(--g-accent);
  --accent-ink: var(--g-accent);
  --brand-soft: var(--g-accent-soft);
  --brand-tint: var(--g-accent-soft);
  --brand-ring: var(--g-accent-soft);
  --accent-soft: var(--g-accent-soft);
  --accent-light: var(--g-accent-soft);
  --accent-ring: var(--g-accent-soft);
  /* fonts */
  --font-body: var(--g-font-sans);
  --font: var(--g-font-sans);
  --font-display: var(--g-font-serif);
  --font-mono: var(--g-font-mono);
  /* radius */
  --radius-xs: var(--g-r-sm);
  --radius-sm: var(--g-r-sm);
  --radius: var(--g-r-md);
  --radius-lg: var(--g-r-lg);
  --radius-xl: var(--g-r-xl);
  --radius-pill: 999px;
  /* elevation / shadow — low tiers only; ring kept as a 1px border */
  --elev-rest: var(--g-shadow-card);
  --elev-hover: var(--g-shadow-card);
  --shadow-1: var(--g-shadow-card);
  --shadow-sm: var(--g-shadow-card);
  --shadow-md: var(--g-shadow-card);
  --shadow-2: var(--g-shadow-pop);
  --shadow-ring: 0 0 0 1px var(--g-border);
  /* inputs */
  --input-bg: var(--g-card);
  --input-border: var(--g-border);
  --input-border-strong: var(--g-ink-soft);
  --input-focus-ring: var(--g-accent-soft);
}

/* OS dark with no explicit theme: app.css only flips --g-* under
   html[data-theme="dark"], so first mirror the dark --g-* values here, then
   re-emit the alias body (resolves to those dark values). Both selectors are
   (0,2,0) inside the same media query as som's → app.css wins on load. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --g-bg:           #1A1916;
    --g-card:         #221F1B;
    --g-card-soft:    #2A2722;
    --g-border:       #34302A;
    --g-border-soft:  #2C2924;
    --g-ink:          #F2EEE6;
    --g-ink-soft:     #B8B3A8;
    --g-label:        #7E7A72;
    --g-avatar:       #3A332A;
    --g-accent-soft:  #3A2E20;
    /* surfaces */
    --surface: var(--g-bg);
    --bg: var(--g-bg);
    --color-background: var(--g-bg);
    --surface-raised: var(--g-card);
    --surface-elevated: var(--g-card);
    --card: var(--g-card);
    --surface-sunken: var(--g-card-soft);
    --surface-subtle: var(--g-card-soft);
    --surface-muted: var(--g-card-soft);
    --surface-tinted: var(--g-card-soft);
    /* text */
    --text: var(--g-ink);
    --text-strong: var(--g-ink);
    --color-text: var(--g-ink);
    --text-muted: var(--g-ink-soft);
    --text-secondary: var(--g-ink-soft);
    --muted: var(--g-ink-soft);
    --text-subtle: var(--g-label);
    --text-tertiary: var(--g-label);
    --text-inverse: #FFFFFF;
    /* borders */
    --border: var(--g-border);
    --border-subtle: var(--g-border-soft);
    --border-strong: var(--g-ink-soft);
    /* brand + accent */
    --brand-primary: var(--g-accent);
    --brand-primary-hover: var(--g-accent);
    --brand-primary-fg: #FFFFFF;
    --brand-accent: var(--g-accent);
    --brand-ink: var(--g-accent);
    --accent: var(--g-accent);
    --accent-hover: var(--g-accent);
    --accent-ink: var(--g-accent);
    --brand-soft: var(--g-accent-soft);
    --brand-tint: var(--g-accent-soft);
    --brand-ring: var(--g-accent-soft);
    --accent-soft: var(--g-accent-soft);
    --accent-light: var(--g-accent-soft);
    --accent-ring: var(--g-accent-soft);
    /* fonts */
    --font-body: var(--g-font-sans);
    --font: var(--g-font-sans);
    --font-display: var(--g-font-serif);
    --font-mono: var(--g-font-mono);
    /* radius */
    --radius-xs: var(--g-r-sm);
    --radius-sm: var(--g-r-sm);
    --radius: var(--g-r-md);
    --radius-lg: var(--g-r-lg);
    --radius-xl: var(--g-r-xl);
    --radius-pill: 999px;
    /* elevation / shadow */
    --elev-rest: var(--g-shadow-card);
    --elev-hover: var(--g-shadow-card);
    --shadow-1: var(--g-shadow-card);
    --shadow-sm: var(--g-shadow-card);
    --shadow-md: var(--g-shadow-card);
    --shadow-2: var(--g-shadow-pop);
    --shadow-ring: 0 0 0 1px var(--g-border);
    /* inputs */
    --input-bg: var(--g-card);
    --input-border: var(--g-border);
    --input-border-strong: var(--g-ink-soft);
    --input-focus-ring: var(--g-accent-soft);
  }
}

/* ============================================================
   Agent-first Home (Origami-style hero)
   ============================================================ */
.g-home--agent {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--g-s-12) var(--g-s-8) var(--g-s-12);
}
.g-agent-hero { text-align: center; }
.g-agent-greet {
  font-size: 13px; color: var(--g-label); font-weight: 500;
  margin-bottom: var(--g-s-4);
}
.g-agent-prompt {
  font-family: var(--g-font-serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--g-ink);
  margin: 0 0 var(--g-s-3);
}
.g-agent-sub {
  color: var(--g-ink-soft);
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto var(--g-s-5);
  line-height: 1.5;
}
.g-home-briefing {
  max-width: 620px;
  margin: 0 auto var(--g-s-6);
  padding: 14px 18px;
  text-align: left;
  background: var(--g-surface-2, rgba(0,0,0,.03));
  border: 1px solid var(--g-border, rgba(0,0,0,.08));
  border-radius: var(--g-r-md, 12px);
}
.g-home-briefing-eyebrow {
  display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--g-label); margin-bottom: 6px;
}
.g-home-briefing-list { margin: 0; padding-left: 18px; }
.g-home-briefing-list li { color: var(--g-ink); font-size: 14px; line-height: 1.6; }
/* Segmented stat strip — the grounded home briefing, as equal cells with
   editorial serif-italic numbers (echoing .g-kpi-value). */
.g-home-stats {
  display: flex; flex-wrap: wrap; align-items: stretch;
  max-width: 560px; margin: 0 auto var(--g-s-6);
  background: var(--g-card); border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg); box-shadow: var(--g-shadow-card);
  overflow: hidden;
}
.g-home-stat {
  flex: 1 1 0; min-width: 118px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 15px 18px 14px;
  border-left: 1px solid var(--g-border-soft);
}
.g-home-stat:first-child { border-left: 0; }
.g-home-stat-value {
  font-family: var(--g-font-serif); font-style: italic; font-weight: 400;
  font-size: 30px; line-height: 1; color: var(--g-ink);
}
.g-home-stat.is-accent .g-home-stat-value { color: var(--g-accent); }
.g-home-stat-label {
  font-size: 12px; line-height: 1.3; text-align: center; color: var(--g-ink-soft);
}
/* Empty-org guidance line (shown instead of the strip when there are no stats). */
.g-home-note {
  max-width: 500px; margin: 0 auto var(--g-s-6);
  color: var(--g-ink-soft); font-size: 14px; line-height: 1.55;
}
@media (max-width: 520px) {
  .g-home-stats { max-width: 320px; }
  .g-home-stat { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--g-border-soft); }
  .g-home-stat:first-child { border-top: 0; }
}
/* Getting-started checklist */
.g-home-start {
  max-width: 620px; margin: 0 auto var(--g-s-6); padding: 14px 18px; text-align: left;
  background: var(--g-surface-2, rgba(0,0,0,.03));
  border: 1px solid var(--g-border, rgba(0,0,0,.08));
  border-radius: var(--g-r-md, 12px);
}
.g-home-start-list { margin: 0; padding-left: 20px; }
.g-home-start-list li { font-size: 14px; line-height: 1.8; color: var(--g-ink); }
.g-home-start-list li.is-done { color: var(--g-label); text-decoration: line-through; list-style: none; margin-left: -20px; }
.g-home-start-check { color: var(--g-status-live, #2e7d32); font-weight: 700; margin-right: 6px; }
.g-home-start-list a { color: var(--g-accent, #c4633a); text-decoration: none; font-weight: 500; }
.g-home-start-list a:hover { text-decoration: underline; }
/* Model dropdown — reads as a select: label + value + caret */
.g-model-select {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; min-height: 36px;
  background: var(--g-surface, #fff);
  border: 1px solid var(--g-border, rgba(0,0,0,.14));
  border-radius: var(--g-r-md, 10px);
  font-size: 13px; font-weight: 600; color: var(--g-ink);
  cursor: pointer; transition: border-color 180ms ease, background 180ms ease;
}
.g-model-select:hover { border-color: var(--g-accent, #c4633a); }
.g-model-select:focus-visible { outline: 2px solid var(--g-accent, #c4633a); outline-offset: 2px; }
.g-model-select-label { color: var(--g-label); font-weight: 500; }
.g-model-caret { color: var(--g-label); flex: 0 0 auto; }
.g-model-opt .g-model-check { visibility: hidden; color: var(--g-accent, #c4633a); margin-left: 4px; }
.g-model-opt.is-selected .g-model-check { visibility: visible; }
.g-model-opt:hover { background: var(--g-surface-2, rgba(0,0,0,.04)); }
/* Composer */
.g-composer {
  display: flex; align-items: flex-end; gap: var(--g-s-2);
  background: var(--g-card);
  border: 1px solid var(--g-border);
  border-radius: var(--g-r-xl);
  padding: 12px 12px 12px 16px;
  box-shadow: var(--g-shadow-card);
  max-width: 720px;
  margin: 0 auto;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.g-composer:focus-within {
  border-color: var(--g-accent);
  box-shadow: var(--g-shadow-pop);
}
.g-composer-input {
  flex: 1; border: 0; outline: 0; resize: none;
  background: transparent; color: var(--g-ink);
  font: inherit; font-size: 15px; line-height: 1.5;
  padding: 6px 0; max-height: 200px;
}
.g-composer-input::placeholder { color: var(--g-label); }
.g-composer-send {
  flex-shrink: 0;
  width: 38px; height: 38px; border: 0; border-radius: var(--g-r-md);
  background: var(--g-accent); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter .14s ease;
}
.g-composer-send:hover { filter: brightness(1.06); }
.g-composer-send svg { width: 18px; height: 18px; }
/* Quick-start cards */
.g-quickstart {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g-s-3);
  max-width: 980px; margin: var(--g-s-8) auto 0;
}
.g-quickstart-card {
  display: flex; flex-direction: column; text-align: left; gap: 4px;
  background: var(--g-card); border: 1px solid var(--g-border);
  border-radius: var(--g-r-lg); padding: var(--g-s-4);
  min-height: 112px; cursor: pointer; font: inherit;
  box-shadow: var(--g-shadow-card);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.g-quickstart-card:hover {
  transform: translateY(-2px);
  border-color: var(--g-accent-soft);
  box-shadow: var(--g-shadow-pop);
}
.g-quickstart-k {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--g-accent);
}
.g-quickstart-t { font-size: 14px; font-weight: 600; color: var(--g-ink); }
.g-quickstart-go { font-size: 12px; color: var(--g-label); margin-top: auto; }
/* Your plans */
.g-agent-plans { max-width: 980px; margin: var(--g-s-12) auto 0; }

@media (max-width: 760px) {
  .g-quickstart { grid-template-columns: repeat(2, 1fr); }
  .g-home--agent { padding: var(--g-s-8) var(--g-s-4); }
}

/* ============================================================
   Sidebar: default to the icon-rail and EXPAND ON HOVER.
   In collapsed mode the rail is position:fixed (out of flow) with a fixed
   60px content gutter, so hover only changes WIDTH (+ z-index) and never
   reflows the page. The manual pin / Cmd-B persists the expanded state.
   ============================================================ */
html.sidebar-collapsed .g-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
}
/* Override the margin-left:0 rule above: reserve a 60px gutter for the fixed rail. */
html.sidebar-collapsed body:has(.g-sidebar) .main-content {
  margin-left: 60px;
}
/* The drag-resize handle is meaningless on the fixed rail. */
html.sidebar-collapsed .sidebar-resize-handle { display: none !important; }

@media (min-width: 721px) and (hover: hover) {
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) {
    width: var(--sidebar-width, 220px) !important;
    z-index: 60;
    box-shadow: var(--g-shadow-pop);
  }
  /* Reveal the faded labels/counts. */
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-name,
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-section,
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-nav a span,
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-user-meta,
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-count-pill {
    opacity: 1; max-width: 220px; pointer-events: auto;
  }
  /* Restore the hidden search label/badge, gear, brand link. */
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-search span { display: block; flex: 1; }
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-search .g-kbd { display: inline-block; }
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-gear { display: inline-flex; }
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-brand a { display: inline-flex; }
  /* Undo the icon-centering so the expanded sidebar reads like the pinned one. */
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-nav a {
    justify-content: flex-start; gap: var(--g-s-3); padding-left: 10px; padding-right: 10px;
  }
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-nav a.is-active::after { display: block; }
  /* Bring back the rename ⋮ once the rail is hover/focus-expanded — the labels
     are visible again, so renaming a tab works with the sidebar collapsed too. */
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-nav-rename { display: inline-flex; }
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-search {
    justify-content: flex-start; gap: var(--g-s-2); padding: 8px 10px; width: auto;
  }
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-user { justify-content: flex-start; gap: var(--g-s-2); }
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-brand { justify-content: space-between; padding: var(--g-s-2); }
  html.sidebar-collapsed .g-sidebar:is(:hover, :focus-within) .g-sidebar-collapse { width: 28px; height: 28px; }
}

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

/* ============================================================
   Plan timeline (shared: event_plan.html + the agent artifact pane)
   ============================================================ */
.plan-wrap { max-width: 760px; }
.plan-step {
  display: flex; gap: var(--g-s-4); padding: 0 0 var(--g-s-5) var(--g-s-4);
  border-left: 2px solid var(--g-border); margin-left: 6px; position: relative;
}
.plan-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.plan-step::before {
  content: ""; position: absolute; left: -7px; top: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--g-card); border: 2px solid var(--g-accent);
}
.plan-step.is-sent::before { background: var(--g-accent); }
.plan-date { font-size: 12px; color: var(--g-label); }
.plan-label { font-weight: 600; color: var(--g-ink); margin-top: 2px; }
.plan-reason { font-size: 13px; color: var(--g-ink-soft); margin-top: 4px; line-height: 1.5; }
.plan-kind { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--g-label); }

/* ============================================================
   Sponsors — pipeline CRM (own tab). The top bar docks the two
   three-pane columns beneath it; the board is a horizontal
   stage-grouped kanban with money totals per column.
   ============================================================ */
/* committed-stage pill colour (no built-in token) — accent tint */
.g-pill.is-accent { background: var(--g-accent-soft); color: var(--g-accent); }

.g-sponsors-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--g-s-4);
  height: 56px; padding: 0 var(--g-s-6);
  background: var(--g-bg); border-bottom: 1px solid var(--g-border);
}
.g-sponsors-bar-main { display: flex; align-items: baseline; gap: var(--g-s-6); min-width: 0; }
.g-sponsors-bar-main h1 { font-size: 20px; font-weight: 600; margin: 0; color: var(--g-ink); }
.g-sponsors-stats { display: flex; gap: var(--g-s-5); flex-wrap: wrap; }
.g-stat { display: inline-flex; align-items: baseline; gap: 6px; }
.g-stat b { font-size: 15px; font-weight: 700; color: var(--g-ink); }
.g-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--g-label); }
.g-sponsors-bar-actions { display: flex; align-items: center; gap: var(--g-s-3); }

/* Segmented List | Pipeline control */
.g-seg { display: inline-flex; background: var(--g-card-soft); border-radius: var(--g-r-md); padding: 3px; }
.g-seg-btn {
  padding: 5px 14px; border-radius: var(--g-r-sm); font-size: 13px; font-weight: 500;
  color: var(--g-ink-soft); text-decoration: none;
}
.g-seg-btn.is-active { background: var(--g-card); color: var(--g-ink); box-shadow: var(--g-shadow-card); }

/* Dock the three-pane columns under the 56px bar */
.g-sponsors-page .g-three-pane { min-height: calc(100vh - 56px); }
.g-sponsors-page .g-list-pane { top: 56px; max-height: calc(100vh - 56px); }
.g-sponsors-page .g-detail-col { max-height: calc(100vh - 56px); }

/* Pipeline board */
.g-pipeline-board {
  display: flex; gap: var(--g-s-4); align-items: flex-start;
  padding: var(--g-s-5) var(--g-s-6); overflow-x: auto;
  min-height: calc(100vh - 56px);
}
.g-pipe-col {
  flex: 0 0 270px; width: 270px;
  background: var(--g-card-soft); border-radius: var(--g-r-lg);
  display: flex; flex-direction: column; max-height: calc(100vh - 96px);
}
.g-pipe-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--g-s-3) var(--g-s-4); border-bottom: 1px solid var(--g-border);
}
.g-pipe-col-title { display: inline-flex; align-items: center; gap: 6px; }
.g-pipe-col-count { font-size: 12px; color: var(--g-label); font-weight: 600; }
.g-pipe-col-total { font-size: 14px; font-weight: 700; color: var(--g-ink); }
.g-pipe-col-body { display: flex; flex-direction: column; gap: var(--g-s-2); padding: var(--g-s-3); overflow-y: auto; }
.g-pipe-card { background: var(--g-card); border: 1px solid var(--g-border); border-radius: var(--g-r-md); padding: var(--g-s-3); display: flex; flex-direction: column; gap: var(--g-s-2); }
.g-pipe-card[draggable="true"] { cursor: grab; }
.g-pipe-card[draggable="true"]:active { cursor: grabbing; }
.g-pipe-col.drag-over { background: var(--g-accent-soft); outline: 2px dashed var(--g-accent); outline-offset: -2px; }
.g-pipe-card-link { text-decoration: none; color: inherit; display: block; }
.g-pipe-card-meta { font-size: 11px; color: var(--g-label); margin-top: 2px; }
.g-pipe-card-amt { font-size: 13px; font-weight: 700; color: var(--g-ink); margin-top: 4px; }
.g-pipe-empty { color: var(--g-label); font-size: 13px; text-align: center; padding: var(--g-s-4); }

/* Signed-revenue-vs-goal roll-up below the board */
.g-revenue { padding: 0 var(--g-s-6) var(--g-s-6); }
.g-revenue-title { font-size: 14px; font-weight: 600; color: var(--g-ink); margin: 0 0 var(--g-s-3); }
.g-revenue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--g-s-3); }
.g-revenue-card { background: var(--g-card); border: 1px solid var(--g-border); border-radius: var(--g-r-md); padding: var(--g-s-3); }
.g-revenue-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--g-s-2); margin-bottom: var(--g-s-2); font-size: 13px; }
.g-revenue-meta { font-size: 11px; color: var(--g-label); margin-top: 4px; }

/* Deal + logged-touch blocks in the detail pane */
.g-deal { background: var(--g-card-soft); border-radius: var(--g-r-md); padding: var(--g-s-3); display: flex; flex-direction: column; gap: var(--g-s-3); }
.g-touch { background: var(--g-card-soft); border-radius: var(--g-r-md); padding: var(--g-s-3); }
.g-deal-head { display: flex; align-items: flex-start; gap: var(--g-s-3); }
.g-deal-amounts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--g-s-2); }
.g-deal-new { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-s-2); padding-top: var(--g-s-2); border-top: 1px dashed var(--g-border); }

/* Deliverables checklist + progress */
.g-deliverables { display: flex; flex-direction: column; gap: 4px; }
.g-deliv-bar { margin-bottom: 4px; }
.g-deliv-bar-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--g-label); margin-bottom: 3px; }
.g-progress { height: 6px; background: var(--g-border); border-radius: 3px; overflow: hidden; }
.g-progress-fill { height: 100%; background: var(--g-status-live); border-radius: 3px; transition: width 160ms ease; }
.g-deliverable { display: flex; align-items: center; gap: var(--g-s-2); }
.g-deliverable-add { display: flex; align-items: center; gap: var(--g-s-2); margin-top: 4px; }
.g-check {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 4px;
  border: 1.5px solid var(--g-border); background: var(--g-card);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; color: var(--g-status-live); cursor: pointer; padding: 0;
}
.g-check.is-done { background: var(--g-status-live-bg); border-color: var(--g-status-live); }
.g-link-danger { background: none; border: 0; color: var(--g-status-alert); font-size: 12px; cursor: pointer; padding: 0; }

/* Compact form controls used throughout the sponsor detail */
.g-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g-s-3); }
.g-form-field { display: flex; flex-direction: column; gap: 4px; }
.g-input-sm, .g-select-sm { padding: 5px 8px; font-size: 13px; }
.g-action-sm { padding: 6px 10px; font-size: 12px; }
@media (max-width: 600px) {
  .g-form-grid { grid-template-columns: 1fr; }
  .g-sponsors-stats { display: none; }
}

/* Claim-check badges — independent fact verification of personalized drafts */
.g-claimcheck {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.g-claimcheck.is-pass { color: var(--g-status-live); background: var(--g-status-live-bg); }
.g-claimcheck.is-warn { color: var(--g-status-warn); background: var(--g-status-warn-bg); }
.g-claimcheck.is-fail { color: var(--g-status-alert); background: var(--g-status-alert-bg); }