/* ---- sg-tokens.css ---- */
/* Sunset Grove Maya design tokens (ticket #479, PRD v1.1 Section 18.1, Mission Control direction of Oct 16 2026: handoffs/agency-v2/mc/directive.md).
   Three layers, the method adapted from the Agentic Society web-design-and-dev skill (docs/agency-app/design-skill.md):
     1. RAW evidence        --sg-raw-*   brand values copied exactly from services/maya-chat/dashboard.html :root and the sunsetgrovenc.com site,
        plus the derived Mission Control depth ramp (void, midnight, indigo, electric). Never used by a component.
     2. SEMANTIC            --sg-*       the stable API. Components, views and tests use only these names. Every colour is defined in both themes.
     3. SHELL SCOPE         .sg-on-dark  re-binds the semantic colours to the Mission Control surface, so a block inside the paper theme can stay dark.
   Look: near-black navy depth, midnight and indigo layers, glass-like raised surfaces with luminous borders, restrained electric blue for live
   technology (never decoration), Sunset Grove gold for editorial labels, cream text, Young Serif display, Plus Jakarta Sans interface.
   MISSION CONTROL is the default: :root, data-theme="mission", and (so the shell file that still says data-theme="light" renders it) "light" and "dark".
   PAPER (data-theme="paper") is the warm light alternate for reading and printing. */

/* ---------- Layer 1: RAW evidence (do not use in components) ---------- */
:root {
  /* dashboard.html :root, verbatim */
  --sg-raw-navy: #143860;
  --sg-raw-navy-deep: #0e2c48;
  --sg-raw-gold: #bb9668;
  --sg-raw-band: #f4f0ec;
  --sg-raw-card: #ffffff;
  --sg-raw-ink: #1c2733;
  --sg-raw-muted: #5b6674;
  --sg-raw-line: #e3ddd4;
  --sg-raw-green: #2f7d4f;
  --sg-raw-green-bg: #e6f3ea;
  --sg-raw-red: #b3372f;
  --sg-raw-red-bg: #fbe9e7;
  --sg-raw-amber: #7a5a2e;
  --sg-raw-amber-bg: #f6ecd9;
  --sg-raw-grey-bg: #eceae5;
  /* sunsetgrovenc.com inline CSS, read Oct 15 2026 */
  --sg-raw-gold-light: #cfae7e;
  /* Derived ramp steps (not brand evidence): contrast-adjusted so every text pair passes WCAG AA (checked in test_cc_design.py) */
  --sg-raw-navy-night: #091b2e;
  --sg-raw-navy-1: #0f2840;
  --sg-raw-navy-2: #163453;
  --sg-raw-navy-3: #1a3a5c;
  --sg-raw-navy-4: #24415f;
  --sg-raw-green-ink: #276a42;
  --sg-raw-blue-ink: #1f5f99;
  --sg-raw-gold-ink: #6f5226;
  --sg-raw-cloud: #b4c0d0;
  /* Mission Control depth ramp (derived, Oct 16 2026): near-black navy, then midnight, then indigo layers, then one electric blue */
  --sg-raw-void: #060a16;
  --sg-raw-midnight: #0b1329;
  --sg-raw-indigo-1: #121c3f;
  --sg-raw-indigo-2: #182459;
  --sg-raw-indigo-3: #1d2b6b;
  --sg-raw-electric: #5b9bff;
  --sg-raw-electric-soft: #92bcff;
  --sg-raw-pulse: #7ad0ff;
  --sg-raw-line-dark: #26335f;
  --sg-raw-line-dark-strong: #7084b3;
}

/* ---------- Layer 2a: semantic tokens that do not change with the theme ---------- */
:root, [data-theme="mission"], [data-theme="light"], [data-theme="dark"], [data-theme="paper"] {
  /* Type: Young Serif for editorial display, Plus Jakarta Sans for interface and body */
  --sg-font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --sg-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --sg-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sg-fs-xs: 0.75rem;
  --sg-fs-s: 0.8125rem;
  --sg-fs-m: 0.9375rem;
  --sg-fs-l: 1.0625rem;
  --sg-fs-xl: 1.375rem;
  --sg-fs-2xl: 1.75rem;
  --sg-fs-3xl: 2.25rem;
  --sg-fs-display: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --sg-lh-tight: 1.1;
  --sg-lh-snug: 1.3;
  --sg-lh-body: 1.55;
  --sg-fw-regular: 400;
  --sg-fw-medium: 500;
  --sg-fw-semibold: 600;
  --sg-fw-bold: 700;
  --sg-tracking-label: 0.08em;
  --sg-measure: 68ch;

  /* Space, radius */
  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-5: 24px;
  --sg-space-6: 32px;
  --sg-space-7: 48px;
  --sg-space-8: 64px;
  --sg-radius-s: 6px;
  --sg-radius-m: 8px;
  --sg-radius-l: 16px;
  --sg-radius-xl: 24px;
  --sg-radius-pill: 999px;

  /* Layout. The Maya cockpit takes about 35 percent of the workspace (clamped), Muse conversations keep the narrower panel-w. */
  --sg-topbar-h: 64px;
  --sg-sidebar-w: 260px;
  --sg-panel-w: 340px;
  --sg-cockpit-w: clamp(360px, 33vw, 520px);
  --sg-content-max: 1180px;
  --sg-bottomnav-h: 60px;

  /* Touch, motion, stacking */
  --sg-tap: 44px;
  --sg-dur: 0.18s;
  --sg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sg-z-sticky: 20;
  --sg-z-nav: 30;
  --sg-z-drawer: 40;
  --sg-z-sheet: 50;
  --sg-z-viewer: 60;
  --sg-z-toast: 70;

  /* ONE SCALE for every surface (Oct 21 2026, #605 #552), derived from the Muse chat (chat.css): four type roles, the 4px space scale with three radii.
     Every per-view stylesheet reads these names and nothing else: no raw px size and no hex colour (test_cc_shell.ShellTokenTests greps for both).
     Dark is the default theme (the Mission Control depth in the colour layers below); the paper alternate re-binds the same names. */
  --sg-type-display: var(--sg-fs-3xl);   /* the three mission numbers only; nothing else on any page is this big */
  --sg-type-title: var(--sg-fs-xl);      /* a page title, a section head, a number that is not a mission number */
  --sg-type-body: var(--sg-fs-m);        /* running text, rows, buttons */
  --sg-type-small: var(--sg-fs-s);       /* captions, sources, ages */
  --sg-type-micro: var(--sg-fs-xs);      /* labels in capitals, chart axes */
  --sg-space-half: 2px;
  --sg-hair: 1px;                        /* a hairline border */
  --sg-line-w: 2px;                      /* a focus or emphasis border */
  --sg-bar-w: 4px;                       /* the coloured edge of a callout */
  --sg-size-dot: 0.5rem;
  --sg-size-icon: 1.25rem;
  --sg-size-avatar: 1.75rem;
  --sg-size-thumb: 3.5rem;
  --sg-col-tile: 12.5rem;                /* the narrowest a card in a grid may get */
  --sg-col-day: 8.5rem;                  /* the narrowest a day of the Posts week row may get: all seven fit beside the rail at 1440 */
  --sg-col-read: 54rem;                  /* the widest a reading column may get */
  --sg-rail-w: 76px;

  /* Shell surfaces: the same Mission Control depth in every theme (the rail, top bar, hero, cockpit and bottom nav) */
  --sg-shell-bg: var(--sg-raw-void);
  --sg-shell-raised: var(--sg-raw-midnight);
  --sg-shell-raised-2: var(--sg-raw-indigo-1);
  --sg-shell-border: var(--sg-raw-line-dark);
  --sg-shell-text: var(--sg-raw-band);
  --sg-shell-muted: var(--sg-raw-cloud);
  --sg-shell-gold: #d9bd8f;
  --sg-shell-active: #1b2a63;
}

/* ---------- Layer 2b: semantic colours, MISSION CONTROL (default) ---------- */
:root, [data-theme="mission"], [data-theme="light"], [data-theme="dark"] {
  --sg-bg: var(--sg-raw-void);
  --sg-surface: var(--sg-raw-midnight);
  --sg-surface-2: var(--sg-raw-indigo-1);
  --sg-elevated: var(--sg-raw-indigo-2);
  --sg-text: var(--sg-raw-band);
  --sg-text-muted: var(--sg-raw-cloud);
  --sg-border: var(--sg-raw-line-dark);
  --sg-border-strong: var(--sg-raw-line-dark-strong);
  /* Primary action is electric blue with near-black text. Gold is never the primary button. */
  --sg-accent: var(--sg-raw-electric);
  --sg-accent-text: var(--sg-raw-void);
  --sg-accent-soft: #1b2a63;
  --sg-link: var(--sg-raw-electric-soft);
  /* Gold: --sg-gold for rules and ornaments (not text), --sg-gold-text for editorial labels */
  --sg-gold: var(--sg-raw-gold);
  --sg-gold-text: #d9bd8f;
  --sg-success: #4ddc9c;
  --sg-warning: #f2b55a;
  --sg-danger: #ff8f84;
  --sg-info: #86bbff;
  --sg-success-soft: #0b2b27;
  --sg-warning-soft: #2b2110;
  --sg-danger-soft: #34151b;
  --sg-info-soft: #10294f;
  --sg-neutral-soft: #18234a;
  /* Live technology: electric blue for what is connected and current, cyan-blue for the pulse. Never decoration. */
  --sg-live: var(--sg-raw-electric);
  --sg-pulse: var(--sg-raw-pulse);
  /* Evidence states: live verified, pending, in progress, scheduled, historical, stale, unavailable, failed. Each has a soft fill. */
  --sg-state-live: #4ddc9c;
  --sg-state-pending: #b4b0ff;
  --sg-state-progress: #6aaaff;
  --sg-state-scheduled: #62d6ea;
  --sg-state-historical: #a7b4cc;
  --sg-state-stale: #f2b55a;
  --sg-state-unavailable: #98a5bf;
  --sg-state-failed: #ff8f84;
  --sg-state-live-soft: #0b2b27;
  --sg-state-pending-soft: #1d1b4a;
  --sg-state-progress-soft: #11295a;
  --sg-state-scheduled-soft: #0c2a38;
  --sg-state-historical-soft: #1a233f;
  --sg-state-stale-soft: #2b2110;
  --sg-state-unavailable-soft: #161d36;
  --sg-state-failed-soft: #34151b;
  --sg-bubble-user: #1d2b6b;
  --sg-bubble-user-text: var(--sg-raw-band);
  --sg-bubble-maya: var(--sg-raw-indigo-1);
  --sg-media-bg: #0e1633;
  --sg-scrim: rgba(3, 6, 14, 0.74);
  /* Glow and glass: the luminous border, the raised glass surface and the ambient light behind the page */
  --sg-glow: rgba(91, 155, 255, 0.2);
  --sg-glow-gold: rgba(187, 150, 104, 0.14);
  --sg-glass: rgba(14, 22, 50, 0.66);
  --sg-border-lit: rgba(146, 188, 255, 0.3);
  --sg-chart-line: #7fb2ff;
  --sg-chart-area: rgba(91, 155, 255, 0.16);
  --sg-chart-grid: #1f2b52;
  /* Elevation: a faint lit top edge, a deep contact shadow, a long falloff and a hint of blue bloom */
  --sg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --sg-shadow-2: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(146, 188, 255, 0.12);
  --sg-shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 36px -22px rgba(0, 0, 0, 0.85);
  --sg-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 0 0 1px rgba(146, 188, 255, 0.16), 0 0 28px -8px rgba(91, 155, 255, 0.35), 0 24px 44px -24px rgba(0, 0, 0, 0.9);
  --sg-focus-ring: 0 0 0 2px #060a16, 0 0 0 4px #92bcff;
  color-scheme: dark;
}

/* ---------- Layer 2b: semantic colours, PAPER (warm light alternate) ---------- */
[data-theme="paper"] {
  --sg-bg: var(--sg-raw-band);
  --sg-surface: var(--sg-raw-card);
  --sg-surface-2: #ece6df;
  --sg-elevated: #ffffff;
  --sg-text: var(--sg-raw-ink);
  --sg-text-muted: var(--sg-raw-muted);
  --sg-border: var(--sg-raw-line);
  --sg-border-strong: #8a8174;
  --sg-accent: var(--sg-raw-navy);
  --sg-accent-text: #ffffff;
  --sg-accent-soft: #e3e9f1;
  --sg-link: var(--sg-raw-navy);
  --sg-gold: var(--sg-raw-gold);
  --sg-gold-text: var(--sg-raw-gold-ink);
  --sg-success: var(--sg-raw-green-ink);
  --sg-warning: var(--sg-raw-amber);
  --sg-danger: var(--sg-raw-red);
  --sg-info: var(--sg-raw-blue-ink);
  --sg-success-soft: var(--sg-raw-green-bg);
  --sg-warning-soft: var(--sg-raw-amber-bg);
  --sg-danger-soft: var(--sg-raw-red-bg);
  --sg-info-soft: #e4eef8;
  --sg-neutral-soft: var(--sg-raw-grey-bg);
  --sg-live: #1f5f99;
  --sg-pulse: #0d6477;
  --sg-state-live: #276a42;
  --sg-state-pending: #5546b0;
  --sg-state-progress: #1f5f99;
  --sg-state-scheduled: #0d6477;
  --sg-state-historical: #4d5868;
  --sg-state-stale: #7a5a2e;
  --sg-state-unavailable: #5b6674;
  --sg-state-failed: #b3372f;
  --sg-state-live-soft: #e6f3ea;
  --sg-state-pending-soft: #ece9fb;
  --sg-state-progress-soft: #e4eef8;
  --sg-state-scheduled-soft: #e0f1f4;
  --sg-state-historical-soft: #eceae5;
  --sg-state-stale-soft: #f6ecd9;
  --sg-state-unavailable-soft: #eceae5;
  --sg-state-failed-soft: #fbe9e7;
  --sg-bubble-user: var(--sg-raw-navy);
  --sg-bubble-user-text: #ffffff;
  --sg-bubble-maya: #ffffff;
  --sg-media-bg: #ece6df;
  --sg-scrim: rgba(14, 44, 72, 0.55);
  --sg-glow: rgba(187, 150, 104, 0.22);
  --sg-glow-gold: rgba(187, 150, 104, 0.16);
  --sg-glass: rgba(255, 255, 255, 0.72);
  --sg-border-lit: rgba(20, 56, 96, 0.35);
  --sg-chart-line: var(--sg-raw-navy);
  --sg-chart-area: rgba(20, 56, 96, 0.12);
  --sg-chart-grid: var(--sg-raw-line);
  --sg-shadow-1: 0 1px 2px rgba(14, 44, 72, 0.12);
  --sg-shadow-2: 0 8px 24px rgba(14, 44, 72, 0.18);
  --sg-shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(14, 44, 72, 0.08), 0 16px 32px -20px rgba(14, 44, 72, 0.32);
  --sg-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 4px rgba(14, 44, 72, 0.1), 0 22px 40px -22px rgba(14, 44, 72, 0.4);
  --sg-focus-ring: 0 0 0 3px #ffffff, 0 0 0 5px #143860;
  color-scheme: light;
}

/* ---------- Layer 3: Mission Control shell scope ----------
   The rail, top bar, hero, bottom nav, command bar, mission hero, cockpit and any .sg-on-dark block read the same --sg-* names bound to the
   Mission Control surface. In the default theme this changes nothing; inside the paper theme it keeps these pieces dark.
   Declared after the themes so it wins on the same element. */
.sg-on-dark, .sg-nav, .sg-rail, .sg-topbar, .sg-bottomnav, .sg-hero, .sg-command-bar, .sg-mission, .sg-cockpit {
  --sg-bg: var(--sg-shell-bg);
  --sg-surface: var(--sg-shell-raised);
  --sg-surface-2: var(--sg-shell-raised-2);
  --sg-elevated: var(--sg-raw-indigo-2);
  --sg-text: var(--sg-shell-text);
  --sg-text-muted: var(--sg-shell-muted);
  --sg-border: var(--sg-shell-border);
  --sg-border-strong: var(--sg-raw-line-dark-strong);
  --sg-accent: var(--sg-raw-electric);
  --sg-accent-text: var(--sg-raw-void);
  --sg-accent-soft: var(--sg-shell-active);
  --sg-link: var(--sg-raw-electric-soft);
  --sg-gold: var(--sg-raw-gold);
  --sg-gold-text: var(--sg-shell-gold);
  --sg-success: #4ddc9c;
  --sg-warning: #f2b55a;
  --sg-danger: #ff8f84;
  --sg-info: #86bbff;
  --sg-success-soft: #0b2b27;
  --sg-warning-soft: #2b2110;
  --sg-danger-soft: #34151b;
  --sg-info-soft: #10294f;
  --sg-neutral-soft: #18234a;
  --sg-live: var(--sg-raw-electric);
  --sg-pulse: var(--sg-raw-pulse);
  --sg-state-live: #4ddc9c;
  --sg-state-pending: #b4b0ff;
  --sg-state-progress: #6aaaff;
  --sg-state-scheduled: #62d6ea;
  --sg-state-historical: #a7b4cc;
  --sg-state-stale: #f2b55a;
  --sg-state-unavailable: #98a5bf;
  --sg-state-failed: #ff8f84;
  --sg-state-live-soft: #0b2b27;
  --sg-state-pending-soft: #1d1b4a;
  --sg-state-progress-soft: #11295a;
  --sg-state-scheduled-soft: #0c2a38;
  --sg-state-historical-soft: #1a233f;
  --sg-state-stale-soft: #2b2110;
  --sg-state-unavailable-soft: #161d36;
  --sg-state-failed-soft: #34151b;
  --sg-glow: rgba(91, 155, 255, 0.2);
  --sg-glow-gold: rgba(187, 150, 104, 0.14);
  --sg-glass: rgba(14, 22, 50, 0.66);
  --sg-border-lit: rgba(146, 188, 255, 0.3);
  --sg-chart-line: #7fb2ff;
  --sg-chart-area: rgba(91, 155, 255, 0.16);
  --sg-chart-grid: #1f2b52;
  --sg-shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 36px -22px rgba(0, 0, 0, 0.85);
  --sg-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 0 0 1px rgba(146, 188, 255, 0.16), 0 0 28px -8px rgba(91, 155, 255, 0.35), 0 24px 44px -24px rgba(0, 0, 0, 0.9);
  --sg-focus-ring: 0 0 0 2px #060a16, 0 0 0 4px #92bcff;
  color-scheme: dark;
}

/* ---- sg-components.css ---- */
/* Sunset Grove Maya shared components (ticket #479, PRD v1.1 Section 18, Mission Control direction of Oct 16 2026).
   Uses ONLY var(--sg-*) semantic tokens from sg-tokens.css: no hex, no raw brand value. Anatomy of each component: docs/agency-app/design-skill.md.
   Accessibility: 44px touch targets (--sg-tap), one visible focus ring, reduced motion respected, state is never colour alone.
   Sections: 1 base and type, 2 layout helpers, 3 core controls, 4 shell (rail, top bar, bottom nav, shell grid), 5 briefing (hero, metric,
   spark, chart, attention, stages), 6 content (media card, inspector, kv), 7 conversation (bubble, side list, context card, composer),
   8 states (banner, error, loading, steps), 9 overlays, 10 reduced motion, 11 Mission Control (command bar, segmented selector, mission hero,
   mission metric, agency pulse, Maya cockpit, evidence states). */

/* ===== 1. Base and type ===== */
*, *::before, *::after { box-sizing: border-box; }
body.sg-body { margin: 0; background: radial-gradient(60% 45% at 88% -8%, var(--sg-glow), transparent 70%), radial-gradient(45% 40% at -6% 104%, var(--sg-glow-gold), transparent 70%), var(--sg-bg); background-attachment: fixed; color: var(--sg-text); font-family: var(--sg-font-body); font-size: var(--sg-fs-m); line-height: var(--sg-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; word-spacing: 0.05em; }
.sg-h1, .sg-h2, .sg-h3, .sg-display { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); margin: 0 0 var(--sg-space-3); line-height: var(--sg-lh-snug); color: var(--sg-text); }
.sg-display { font-size: var(--sg-fs-display); line-height: var(--sg-lh-tight); }
.sg-h1 { font-size: var(--sg-fs-2xl); }
.sg-h2 { font-size: var(--sg-fs-xl); }
.sg-h3 { font-size: var(--sg-fs-l); }
.sg-eyebrow { display: block; margin: 0 0 var(--sg-space-2); color: var(--sg-gold-text); font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; }
.sg-lead { font-size: var(--sg-fs-l); max-width: var(--sg-measure); }
.sg-muted { color: var(--sg-text-muted); }
.sg-num { font-variant-numeric: tabular-nums; }
.sg-link { color: var(--sg-link); text-decoration: underline; text-underline-offset: 3px; }
.sg-link--block { display: inline-flex; align-items: center; min-height: var(--sg-tap); }
.sg-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sg-skip { position: absolute; left: -999px; top: var(--sg-space-2); background: var(--sg-elevated); color: var(--sg-text); padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-m); z-index: var(--sg-z-toast); }
.sg-skip:focus { left: var(--sg-space-3); }
.sg-icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* One visible focus ring everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid transparent; box-shadow: var(--sg-focus-ring); }

/* ===== 2. Layout helpers ===== */
.sg-stack { display: flex; flex-direction: column; gap: var(--sg-space-4); }
.sg-stack--tight { gap: var(--sg-space-2); }
.sg-stack--loose { gap: var(--sg-space-6); }
.sg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); }
.sg-grid { display: grid; gap: var(--sg-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sg-min, 240px)), 1fr)); }
.sg-grid--tiles { --sg-min: 260px; }
.sg-grid--media { --sg-min: 220px; }
/* Three across on wide screens (the six report tiles are 3 by 2), two on tablet, one on phone */
.sg-grid--thirds { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sg-grid--thirds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sg-grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sg-split { display: grid; gap: var(--sg-space-5); align-items: start; }
@media (min-width: 1024px) { .sg-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sg-split--wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* Page header: title and purpose, dated source line, primary action, Ask Maya hook */
.sg-page { max-width: var(--sg-content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sg-space-6); }
.sg-page__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sg-space-4); }
.sg-page__title { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-3xl); line-height: var(--sg-lh-tight); margin: 0; }
.sg-page__purpose { margin: var(--sg-space-2) 0 0; max-width: var(--sg-measure); color: var(--sg-text-muted); }
.sg-page__actions { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.sg-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sg-space-2); margin: 0 0 var(--sg-space-3); }
.sg-section__title { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-xl); margin: 0; }
/* Dated source line: "Source, read time (Eastern), state badge". Required under every data block. */
.sg-source { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-1) var(--sg-space-2); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
@media (max-width: 760px) { .sg-page__title { font-size: var(--sg-fs-2xl); } .sg-page { gap: var(--sg-space-5); } }

/* ===== 3. Core controls ===== */
/* Card: the soft-lit surface */
.sg-card { background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); padding: var(--sg-space-4); box-shadow: var(--sg-shadow-soft); color: var(--sg-text); }
.sg-card--roomy { padding: var(--sg-space-5); }
.sg-card--flat { box-shadow: none; }
.sg-card--link { cursor: pointer; transition: box-shadow var(--sg-dur) var(--sg-ease), transform var(--sg-dur) var(--sg-ease), border-color var(--sg-dur) var(--sg-ease); }
.sg-card--link:hover { box-shadow: var(--sg-shadow-lift); border-color: var(--sg-border-lit); transform: translateY(-1px); }
.sg-card--glass { background: var(--sg-glass); border-color: var(--sg-border-lit); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.sg-card__title { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-l); margin: 0 0 var(--sg-space-2); }

/* Buttons. The primary button is navy (cream on navy surfaces), never gold. */
.sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sg-space-2); min-height: var(--sg-tap); min-width: var(--sg-tap);
  padding: 0 var(--sg-space-4); border-radius: var(--sg-radius-m); border: 1px solid var(--sg-border-strong); background: var(--sg-surface-2); color: var(--sg-text);
  font: var(--sg-fw-semibold) var(--sg-fs-m) var(--sg-font-body); line-height: 1.2; cursor: pointer; text-decoration: none; transition: box-shadow var(--sg-dur) var(--sg-ease), transform var(--sg-dur) var(--sg-ease), background var(--sg-dur) var(--sg-ease); }
.sg-btn:hover { border-color: var(--sg-accent); }
.sg-btn:disabled, .sg-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.sg-btn--primary { background: var(--sg-accent); color: var(--sg-accent-text); border-color: var(--sg-accent); box-shadow: var(--sg-shadow-1), 0 0 20px -8px var(--sg-glow); }
.sg-btn--primary:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: var(--sg-shadow-2), 0 0 24px -6px var(--sg-glow); transform: translateY(-1px); }
.sg-btn--secondary { background: transparent; color: var(--sg-text); border-color: var(--sg-border-strong); }
.sg-btn--secondary:hover { background: var(--sg-accent-soft); }
.sg-btn--ghost { background: transparent; border-color: transparent; color: var(--sg-text); }
.sg-btn--ghost:hover { background: var(--sg-accent-soft); border-color: transparent; }
.sg-btn--block { display: flex; width: 100%; }

/* Chip (suggested question chips, filters) */
.sg-chip { display: inline-flex; align-items: center; gap: var(--sg-space-2); min-height: var(--sg-tap); padding: 0 var(--sg-space-4); border-radius: var(--sg-radius-pill);
  border: 1px solid var(--sg-border-strong); background: var(--sg-surface); color: var(--sg-text); font: var(--sg-fw-medium) var(--sg-fs-s) var(--sg-font-body); cursor: pointer; text-decoration: none; }
.sg-chip:hover, .sg-chip[aria-pressed="true"] { background: var(--sg-accent-soft); border-color: var(--sg-accent); }
.sg-tag { display: inline-flex; align-items: center; padding: 2px var(--sg-space-2); border-radius: var(--sg-radius-s); background: color-mix(in srgb, var(--sg-shell-bg) 88%, transparent); color: var(--sg-shell-text); font: var(--sg-fw-semibold) var(--sg-fs-xs) var(--sg-font-body); }

/* State badges: LIVE, PREVIEW, ESTIMATE, SAMPLE, STALE, UNAVAILABLE, ERROR. The word is always shown; border style adds a second cue. */
.sg-badge { display: inline-flex; align-items: center; gap: var(--sg-space-1); padding: 2px var(--sg-space-2); border-radius: var(--sg-radius-pill);
  border: 1px solid currentColor; background: var(--sg-surface); color: var(--sg-text-muted);
  font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.sg-badge--live { color: var(--sg-success); background: var(--sg-success-soft); }
.sg-badge--preview { color: var(--sg-info); background: var(--sg-info-soft); }
.sg-badge--estimate { color: var(--sg-warning); background: var(--sg-warning-soft); border-style: dashed; }
.sg-badge--sample { color: var(--sg-info); background: var(--sg-info-soft); border-style: dashed; }
.sg-badge--stale { color: var(--sg-warning); background: var(--sg-warning-soft); }
.sg-badge--unavailable { color: var(--sg-text-muted); background: var(--sg-neutral-soft); border-style: dotted; }
.sg-badge--error { color: var(--sg-danger); background: var(--sg-danger-soft); }

/* Count pill (attention count, unread) */
.sg-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--sg-radius-pill); background: var(--sg-danger); color: var(--sg-surface); font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); line-height: 1; }
.sg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sg-gold); flex: none; }

/* Stat: huge plain headline number, label, source and freshness line */
.sg-stat { display: flex; flex-direction: column; gap: var(--sg-space-1); }
.sg-stat__label { color: var(--sg-text-muted); font-size: var(--sg-fs-m); }
.sg-stat__value { font-family: var(--sg-font-display); font-size: var(--sg-fs-display); line-height: var(--sg-lh-tight); color: var(--sg-text); font-variant-numeric: tabular-nums; }
.sg-stat__source { color: var(--sg-text-muted); font-size: var(--sg-fs-xs); }

/* Form controls */
.sg-field { display: flex; flex-direction: column; gap: var(--sg-space-1); }
.sg-label { font-size: var(--sg-fs-s); font-weight: var(--sg-fw-semibold); color: var(--sg-text); }
.sg-input, .sg-select, .sg-textarea { width: 100%; min-height: var(--sg-tap); padding: 0 var(--sg-space-3); border: 1px solid var(--sg-border-strong); border-radius: var(--sg-radius-m);
  background: var(--sg-surface); color: var(--sg-text); font: var(--sg-fw-regular) 1rem var(--sg-font-body); }
.sg-textarea { padding: var(--sg-space-3); min-height: 88px; resize: vertical; }
.sg-input::placeholder, .sg-textarea::placeholder { color: var(--sg-text-muted); }

/* Tabs */
.sg-tabs { display: flex; gap: var(--sg-space-1); border-bottom: 1px solid var(--sg-border); overflow-x: auto; }
.sg-tabs [role="tab"] { min-height: var(--sg-tap); padding: 0 var(--sg-space-4); background: transparent; border: 0; border-bottom: 3px solid transparent;
  color: var(--sg-text-muted); font: var(--sg-fw-semibold) var(--sg-fs-m) var(--sg-font-body); cursor: pointer; white-space: nowrap; }
.sg-tabs [role="tab"][aria-selected="true"] { color: var(--sg-text); border-bottom-color: var(--sg-live); }

/* ===== 4. Shell: nav list, rail, top bar, bottom nav, shell grid (all dark navy through the .sg-on-dark token scope) ===== */
/* .sg-nav is the labelled nav list: expanded nav, tablet drawer content. The shell may keep its own layout classes beside it. */
.sg-nav { display: flex; flex-direction: column; gap: var(--sg-space-1); padding: var(--sg-space-3); background: var(--sg-bg); color: var(--sg-text); border-right: 1px solid var(--sg-border); }
.sg-nav a { display: flex; align-items: center; gap: var(--sg-space-3); min-height: var(--sg-tap); padding: 0 var(--sg-space-3); border-radius: var(--sg-radius-m);
  color: var(--sg-text-muted); text-decoration: none; font-weight: var(--sg-fw-semibold); }
.sg-nav a[aria-current="page"] { background: var(--sg-accent-soft); color: var(--sg-text); box-shadow: inset 3px 0 0 var(--sg-live); }
.sg-nav a:hover { color: var(--sg-text); }
@media (max-width: 760px) {
  .sg-nav { position: fixed; left: 0; right: 0; bottom: 0; flex-direction: row; justify-content: space-around; border-right: 0; border-top: 1px solid var(--sg-border); z-index: var(--sg-z-nav); padding: var(--sg-space-1); }
  .sg-nav a { flex-direction: column; justify-content: center; gap: 0; padding: 0 var(--sg-space-1); font-size: var(--sg-fs-xs); flex: 1 1 0; min-width: var(--sg-tap); }
}

/* Rail: compact icon plus label navigation, 1280px and above (also kept on tablet) */
.sg-rail { width: var(--sg-rail-w); display: flex; flex-direction: column; gap: var(--sg-space-1); padding: var(--sg-space-3) var(--sg-space-1); background: linear-gradient(180deg, var(--sg-surface), var(--sg-bg)); color: var(--sg-text); border-right: 1px solid var(--sg-border); }
.sg-rail__brand { display: grid; place-items: center; min-height: 52px; margin-bottom: var(--sg-space-2); color: var(--sg-gold); font-family: var(--sg-font-display); font-size: var(--sg-fs-xl); text-decoration: none; letter-spacing: 0.02em; }
.sg-rail__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: var(--sg-space-2) 2px;
  border-radius: var(--sg-radius-m); border: 0; background: transparent; color: var(--sg-text-muted); text-decoration: none; text-align: center;
  font: var(--sg-fw-semibold) 0.6875rem var(--sg-font-body); letter-spacing: -0.02em; line-height: 1.15; cursor: pointer; transition: background var(--sg-dur) var(--sg-ease), color var(--sg-dur) var(--sg-ease); }
.sg-rail__item:hover { background: var(--sg-surface); color: var(--sg-text); }
.sg-rail__item[aria-current="page"] { background: var(--sg-accent-soft); color: var(--sg-text); box-shadow: inset 3px 0 0 var(--sg-live), 0 0 18px -8px var(--sg-glow); }
.sg-rail__item .sg-count { position: absolute; top: 4px; right: 8px; }
.sg-rail__foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--sg-space-2); padding-top: var(--sg-space-3); }

/* Top bar: workspace title, active report date, attention indicator, profile, Ask Maya */
.sg-topbar { display: flex; align-items: center; gap: var(--sg-space-3); min-height: var(--sg-topbar-h); padding: 0 var(--sg-space-5); background: color-mix(in srgb, var(--sg-bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--sg-text); border-bottom: 1px solid var(--sg-border); }
.sg-topbar__title { display: flex; align-items: baseline; gap: var(--sg-space-3); min-width: 0; margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-xl); white-space: nowrap; }
.sg-topbar__crumb { font: var(--sg-fw-medium) var(--sg-fs-s) var(--sg-font-body); color: var(--sg-text-muted); overflow: hidden; text-overflow: ellipsis; }
.sg-topbar__date { display: inline-flex; align-items: center; gap: var(--sg-space-2); min-height: 32px; padding: 0 var(--sg-space-3); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-pill); color: var(--sg-text); background: var(--sg-surface); font-size: var(--sg-fs-s); white-space: nowrap; }
.sg-topbar__spacer { flex: 1 1 auto; }
.sg-topbar__attention { display: inline-flex; align-items: center; gap: var(--sg-space-2); min-height: var(--sg-tap); padding: 0 var(--sg-space-3); border-radius: var(--sg-radius-m); border: 1px solid var(--sg-border); background: transparent; color: var(--sg-text); font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); cursor: pointer; text-decoration: none; }
.sg-topbar__attention:hover { background: var(--sg-surface); }
.sg-topbar__who { display: flex; align-items: center; gap: var(--sg-space-2); font-size: var(--sg-fs-s); line-height: 1.25; }
.sg-topbar__who small { display: block; color: var(--sg-text-muted); font-size: var(--sg-fs-xs); }
@media (max-width: 1279px) { .sg-topbar__crumb, .sg-topbar__who span:not(.sg-avatar) { display: none; } }
.sg-topbar__attention, .sg-topbar .sg-btn { white-space: nowrap; }
@media (max-width: 760px) {
  .sg-topbar { padding: 0 var(--sg-space-3); gap: var(--sg-space-2); min-height: 56px; }
  .sg-topbar__title { font-size: var(--sg-fs-l); }
  .sg-topbar__crumb, .sg-topbar__date-label, .sg-topbar__date .sg-badge, .sg-topbar__who span:not(.sg-avatar), .sg-topbar__ask, .sg-topbar__attention span:not(.sg-count) { display: none; }
  /* #546: with its label hidden the bell collapsed to 38px wide, under the 44px tap floor; it stays a full tap square. */
  .sg-topbar__attention { padding: 0; min-width: var(--sg-tap); justify-content: center; }
}

/* Avatar: Maya's identity is an image (the real avatar), a person is an initial */
.sg-avatar { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--sg-surface-2); color: var(--sg-text);
  border: 2px solid var(--sg-gold); box-shadow: 0 0 0 3px var(--sg-glow); font: var(--sg-fw-semibold) var(--sg-fs-m) var(--sg-font-display); }
.sg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-avatar--lg { width: 64px; height: 64px; font-size: var(--sg-fs-xl); }
.sg-avatar--sm { width: 32px; height: 32px; font-size: var(--sg-fs-s); border-width: 1px; }

/* Bottom nav (phone): Home, Studio, Maya, More. Labels always visible. */
.sg-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--sg-z-nav); display: flex; background: var(--sg-bg); color: var(--sg-text); border-top: 1px solid var(--sg-border); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sg-bottomnav__item { position: relative; flex: 1 1 0; min-width: 0; min-height: var(--sg-bottomnav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--sg-space-1); border: 0; background: transparent; color: var(--sg-text-muted); text-decoration: none; font: var(--sg-fw-semibold) 0.6875rem var(--sg-font-body); cursor: pointer; }
.sg-bottomnav__item[aria-current="page"] { color: var(--sg-text); box-shadow: inset 0 3px 0 var(--sg-live); }
.sg-bottomnav__item .sg-count { position: absolute; top: 6px; left: calc(50% + 6px); }
@media (min-width: 761px) { .sg-bottomnav { display: none; } }

/* Shell grid: rail | top bar over main | optional conversation panel (1280px and above) */
.sg-shell { display: grid; min-height: 100vh; grid-template-columns: var(--sg-rail-w) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "rail top" "rail main"; background: transparent; color: var(--sg-text); }
.sg-shell__rail { grid-area: rail; position: sticky; top: 0; height: 100vh; z-index: var(--sg-z-nav); }
.sg-shell__rail > .sg-rail { height: 100%; overflow-y: auto; }
.sg-shell__top { grid-area: top; position: sticky; top: 0; z-index: var(--sg-z-sticky); }
.sg-shell__main { grid-area: main; min-width: 0; padding: var(--sg-space-5) var(--sg-space-6) var(--sg-space-7); }
.sg-shell__panel { grid-area: panel; display: none; }
@media (min-width: 1280px) {
  .sg-shell { grid-template-columns: var(--sg-rail-w) minmax(0, 1fr) var(--sg-cockpit-w); grid-template-areas: "rail top top" "rail main panel"; }
  .sg-shell__panel { display: block; position: sticky; top: var(--sg-topbar-h); height: calc(100vh - var(--sg-topbar-h)); overflow: auto; background: var(--sg-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-left: 1px solid var(--sg-border-lit); }
  .sg-shell[data-panel="closed"] { grid-template-columns: var(--sg-rail-w) minmax(0, 1fr); grid-template-areas: "rail top" "rail main"; }
  .sg-shell[data-panel="closed"] .sg-shell__panel { display: none; }
}
@media (max-width: 760px) {
  .sg-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .sg-shell__rail { display: none; }
  .sg-shell__main { padding: var(--sg-space-4) var(--sg-space-4) calc(var(--sg-bottomnav-h) + var(--sg-space-7)); overflow-x: clip; }
}

/* ===== 5. Briefing: hero, metric tile, sparkline, chart frame, attention, stage strip ===== */
/* Hero: Maya speaks first. Navy, soft glow, glass recommendation panel. */
.sg-hero { position: relative; overflow: hidden; display: grid; gap: var(--sg-space-5); padding: var(--sg-space-6); border-radius: var(--sg-radius-xl); border: 1px solid var(--sg-border); color: var(--sg-text);
  background: radial-gradient(90% 120% at 100% 0%, var(--sg-glow), transparent 58%), radial-gradient(70% 90% at 0% 100%, var(--sg-glow-gold), transparent 60%), linear-gradient(160deg, var(--sg-surface-2), var(--sg-bg)); box-shadow: var(--sg-shadow-lift); }
.sg-hero__who { display: flex; gap: var(--sg-space-4); align-items: flex-start; min-width: 0; }
.sg-hero__greeting { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-2xl); line-height: var(--sg-lh-snug); margin: 0 0 var(--sg-space-2); color: var(--sg-text); }
.sg-hero__sentence { margin: 0 0 var(--sg-space-3); max-width: var(--sg-measure); font-size: var(--sg-fs-l); line-height: var(--sg-lh-body); color: var(--sg-text); }
.sg-hero__reco { display: flex; flex-direction: column; gap: var(--sg-space-3); padding: var(--sg-space-5); border-radius: var(--sg-radius-l); border: 1px solid var(--sg-border); background: var(--sg-glass); border-color: var(--sg-border-lit); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--sg-shadow-soft); }
.sg-hero__reco-title { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-xl); line-height: var(--sg-lh-snug); margin: 0; }
.sg-hero__reco p { margin: 0; color: var(--sg-text-muted); }
@media (min-width: 900px) { .sg-hero { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); align-items: stretch; } .sg-hero__greeting { font-size: var(--sg-fs-3xl); } }
@media (max-width: 760px) { .sg-hero { padding: var(--sg-space-5) var(--sg-space-4); border-radius: var(--sg-radius-l); } .sg-hero__reco { padding: var(--sg-space-4); } .sg-hero .sg-avatar--lg { width: 48px; height: 48px; } }

/* Metric tile: value, label, window, source line, change, sparkline slot. Clickable tiles use <a> or <button> with .sg-metric--link. */
.sg-metric { display: flex; flex-direction: column; gap: var(--sg-space-2); min-width: 0; padding: var(--sg-space-4); background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); box-shadow: var(--sg-shadow-soft);
  color: var(--sg-text); text-align: left; text-decoration: none; font: inherit; }
.sg-metric--link { cursor: pointer; transition: box-shadow var(--sg-dur) var(--sg-ease), transform var(--sg-dur) var(--sg-ease), border-color var(--sg-dur) var(--sg-ease); }
.sg-metric--link:hover { box-shadow: var(--sg-shadow-lift); border-color: var(--sg-border-lit); transform: translateY(-1px); }
.sg-metric__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sg-space-2); }
.sg-metric__label { font-size: var(--sg-fs-s); font-weight: var(--sg-fw-semibold); line-height: var(--sg-lh-snug); }
.sg-metric__window { display: inline-flex; align-items: center; align-self: flex-start; padding: 1px var(--sg-space-2); border-radius: var(--sg-radius-pill); background: var(--sg-neutral-soft); border: 1px solid var(--sg-border); color: var(--sg-text-muted); font: var(--sg-fw-semibold) var(--sg-fs-xs) var(--sg-font-body); white-space: nowrap; }
.sg-metric__value { margin: 0; font-family: var(--sg-font-display); font-size: var(--sg-fs-3xl); line-height: var(--sg-lh-tight); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sg-metric__value--null { font-size: var(--sg-fs-xl); color: var(--sg-text-muted); }
.sg-metric__spark { min-height: 40px; margin-top: auto; color: var(--sg-chart-line); }
.sg-metric__source { margin: 0; padding-top: var(--sg-space-2); border-top: 1px solid var(--sg-border); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-metric__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sg-space-2); }

/* Change versus a comparable prior reading. The words carry the meaning, the glyph is decoration. */
.sg-change { display: inline-flex; align-items: center; gap: var(--sg-space-1); font-size: var(--sg-fs-s); font-weight: var(--sg-fw-semibold); color: var(--sg-text-muted); }
.sg-change--up { color: var(--sg-success); }
.sg-change--up::before { content: "\25B2"; font-size: 0.7em; }
.sg-change--down { color: var(--sg-danger); }
.sg-change--down::before { content: "\25BC"; font-size: 0.7em; }
.sg-change--flat::before { content: "\25AC"; font-size: 0.7em; }
.sg-change--unknown::before { content: "\2022"; }

/* Sparkline (inline SVG, viewBox set by the view). Gaps stay gaps: draw a separate path per run of known days. */
.sg-spark { display: block; width: 100%; height: 40px; color: var(--sg-chart-line); overflow: visible; }
.sg-spark__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sg-spark__area { fill: var(--sg-chart-area); stroke: none; }
.sg-spark__gap { fill: none; stroke: var(--sg-border-strong); stroke-width: 1.5; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.sg-spark__dot { fill: currentColor; }
.sg-spark-empty { display: flex; align-items: center; min-height: 40px; border-bottom: 1px dashed var(--sg-border-strong); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }

/* Chart frame (figure): explicit units, date range, legend and a missing-data band. Plot is inline SVG. */
.sg-chart { margin: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sg-chart__caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sg-space-2); }
.sg-chart__title { font-weight: var(--sg-fw-semibold); font-size: var(--sg-fs-m); }
.sg-chart__units, .sg-chart__range { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-chart__plot { display: block; width: 100%; height: 160px; color: var(--sg-chart-line); overflow: visible; }
.sg-chart__grid { stroke: var(--sg-chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sg-chart__axis { fill: var(--sg-text-muted); font-family: var(--sg-font-body); font-size: 11px; }
.sg-chart__gapband { fill: var(--sg-neutral-soft); stroke: var(--sg-border-strong); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.sg-chart__legend { display: flex; flex-wrap: wrap; gap: var(--sg-space-3); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }

/* Needs-your-attention queue: real owner decisions only, with the consequence of waiting */
.sg-attention { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-3); }
.sg-attention__item { display: flex; flex-wrap: wrap; gap: var(--sg-space-3) var(--sg-space-4); align-items: center; justify-content: space-between; padding: var(--sg-space-4);
  background: var(--sg-surface); border: 1px solid var(--sg-border); border-left: 4px solid var(--sg-gold); border-radius: var(--sg-radius-l); box-shadow: var(--sg-shadow-soft); }
.sg-attention__item[data-level="warning"] { border-left-color: var(--sg-warning); }
.sg-attention__item[data-level="danger"] { border-left-color: var(--sg-danger); }
.sg-attention__item[data-level="info"] { border-left-color: var(--sg-info); }
.sg-attention__item > :first-child { flex: 1 1 260px; min-width: 0; }
.sg-attention__title { margin: 0; font-weight: var(--sg-fw-semibold); font-size: var(--sg-fs-l); line-height: var(--sg-lh-snug); }
.sg-attention__why { margin: var(--sg-space-1) 0 0; color: var(--sg-text-muted); font-size: var(--sg-fs-m); }
.sg-attention__meta { margin: var(--sg-space-1) 0 0; font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-attention__actions { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.sg-attention__clear { display: flex; align-items: center; gap: var(--sg-space-3); padding: var(--sg-space-4); border: 1px dashed var(--sg-border-strong); border-radius: var(--sg-radius-l); background: var(--sg-surface); color: var(--sg-text-muted); }
.sg-attention__clear strong { color: var(--sg-text); }
@media (max-width: 760px) { .sg-attention__actions { width: 100%; } .sg-attention__actions .sg-btn { flex: 1 1 140px; } }

/* Stage strip: the agency's week as counts (drafted, accepted, scheduled, verified live, held) from the ledger and receipts */
.sg-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px; background: var(--sg-border);
  border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); overflow: hidden; box-shadow: var(--sg-shadow-soft); }
.sg-stage { display: flex; flex-direction: column; gap: var(--sg-space-1); padding: var(--sg-space-4); background: var(--sg-surface); min-width: 0; }
.sg-stage__count { font-family: var(--sg-font-display); font-size: var(--sg-fs-2xl); line-height: var(--sg-lh-tight); font-variant-numeric: tabular-nums; }
.sg-stage__label { font-size: var(--sg-fs-s); color: var(--sg-text-muted); line-height: var(--sg-lh-snug); }
.sg-stage__bar { display: block; height: 4px; margin-top: var(--sg-space-1); border-radius: var(--sg-radius-pill); background: var(--sg-neutral-soft); overflow: hidden; }
.sg-stage__bar::before { content: ""; display: block; height: 100%; width: var(--sg-pct, 0%); background: var(--sg-accent); }
.sg-stage[data-state="done"] .sg-stage__count { color: var(--sg-success); }
.sg-stage[data-state="held"] .sg-stage__count { color: var(--sg-warning); }
.sg-stage[data-state="blocked"] .sg-stage__count { color: var(--sg-danger); }
.sg-stage[data-state="unknown"] .sg-stage__count { color: var(--sg-text-muted); font-size: var(--sg-fs-l); }

/* ===== 6. Content: media card, inspector, key-value ===== */
/* Media card: real post media (or an honest "no image" state), tags, status, caption excerpt, times in Eastern, actions */
.sg-media { display: flex; flex-direction: column; min-width: 0; background: var(--sg-surface); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); box-shadow: var(--sg-shadow-soft); overflow: hidden; color: var(--sg-text); text-align: left; font: inherit; text-decoration: none; }
.sg-media--link { cursor: pointer; transition: box-shadow var(--sg-dur) var(--sg-ease), transform var(--sg-dur) var(--sg-ease); }
.sg-media--link:hover { box-shadow: var(--sg-shadow-lift); border-color: var(--sg-border-lit); transform: translateY(-1px); }
.sg-media__frame { position: relative; aspect-ratio: var(--sg-media-ratio, 4 / 5); background: var(--sg-media-bg); overflow: hidden; }
.sg-media__frame--wide { --sg-media-ratio: 16 / 9; }
.sg-media__frame--square { --sg-media-ratio: 1 / 1; }
.sg-media__frame img, .sg-media__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-media__none { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--sg-space-1); padding: var(--sg-space-4); text-align: center; color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.sg-media__tags { position: absolute; top: var(--sg-space-2); left: var(--sg-space-2); right: var(--sg-space-2); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sg-space-1); pointer-events: none; }
.sg-media__rank { position: absolute; bottom: var(--sg-space-2); left: var(--sg-space-2); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sg-shell-bg); color: var(--sg-shell-gold); font: var(--sg-fw-bold) var(--sg-fs-s) var(--sg-font-body); }
.sg-media__body { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-3) var(--sg-space-4) var(--sg-space-4); flex: 1; }
.sg-media__title { margin: 0; font-weight: var(--sg-fw-semibold); font-size: var(--sg-fs-m); line-height: var(--sg-lh-snug); }
.sg-media__caption { margin: 0; color: var(--sg-text-muted); font-size: var(--sg-fs-s); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-media__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sg-space-1) var(--sg-space-3); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-media__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--sg-space-2); align-items: center; justify-content: space-between; }

/* Inspector: the right-hand detail panel (desktop), a drawer (tablet) and a full-height screen (phone). Use --modal for the overlay form. */
.sg-inspector { display: flex; flex-direction: column; min-height: 0; background: var(--sg-surface); color: var(--sg-text); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); box-shadow: var(--sg-shadow-soft); overflow: hidden; }
.sg-inspector__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-3); padding: var(--sg-space-3) var(--sg-space-4); border-bottom: 1px solid var(--sg-border); }
.sg-inspector__title { margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-l); }
.sg-inspector__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sg-space-4); display: flex; flex-direction: column; gap: var(--sg-space-4); }
.sg-inspector__media { border-radius: var(--sg-radius-m); overflow: hidden; background: var(--sg-media-bg); }
.sg-inspector__media img, .sg-inspector__media video { display: block; width: 100%; max-height: 60vh; object-fit: contain; }
.sg-inspector__foot { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); padding: var(--sg-space-3) var(--sg-space-4); padding-bottom: calc(var(--sg-space-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sg-border); background: var(--sg-surface); }
.sg-inspector__foot .sg-btn { flex: 1 1 120px; }
.sg-inspector--modal { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--sg-z-drawer); width: min(440px, 100vw); border-radius: 0; border-width: 0 0 0 1px; box-shadow: var(--sg-shadow-2); }
@media (max-width: 760px) { .sg-inspector--modal { left: 0; width: 100%; z-index: var(--sg-z-viewer); border-left-width: 0; } }

/* Key-value list (provenance, versions, ids tucked in details) */
.sg-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sg-space-1) var(--sg-space-4); margin: 0; font-size: var(--sg-fs-s); }
.sg-kv dt { color: var(--sg-text-muted); }
.sg-kv dd { margin: 0; overflow-wrap: anywhere; }
.sg-details { border: 1px solid var(--sg-border); border-radius: var(--sg-radius-m); background: var(--sg-surface); }
.sg-details > summary { display: flex; align-items: center; min-height: var(--sg-tap); padding: 0 var(--sg-space-3); cursor: pointer; font-size: var(--sg-fs-s); font-weight: var(--sg-fw-semibold); }
.sg-details > :not(summary) { padding: 0 var(--sg-space-3) var(--sg-space-3); }

/* ===== 7. Conversation (Muse structure): side list, thread, bubbles, composer, context panel ===== */
/* .sg-chat: side list | stage | context. Context shows from 1280px; the side list from 761px; the phone shows the stage only (side list opens as a drawer). */
.sg-chat { display: grid; min-height: 0; background: var(--sg-bg); grid-template-columns: minmax(0, 1fr); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); overflow: hidden; }
.sg-chat__list, .sg-chat__context { display: none; min-height: 0; overflow: auto; }
.sg-chat__stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sg-chat__bar { display: flex; align-items: center; gap: var(--sg-space-2); min-height: 56px; padding: var(--sg-space-2) var(--sg-space-3); background: var(--sg-surface); border-bottom: 1px solid var(--sg-border); }
.sg-chat__bar-title { flex: 1; min-width: 0; margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 761px) { .sg-chat { grid-template-columns: var(--sg-sidebar-w) minmax(0, 1fr); } .sg-chat__list { display: block; } }
@media (min-width: 1280px) { .sg-chat { grid-template-columns: var(--sg-sidebar-w) minmax(0, 1fr) var(--sg-panel-w); } .sg-chat__context { display: block; } }
.sg-chat--screen { border: 0; border-radius: 0; }
@media (max-width: 760px) { .sg-chat--screen { position: fixed; inset: 0; z-index: var(--sg-z-viewer); } .sg-chat--screen[hidden] { display: none; } }

.sg-sidelist { display: flex; flex-direction: column; gap: var(--sg-space-1); padding: var(--sg-space-3); background: var(--sg-surface); border-right: 1px solid var(--sg-border); min-height: 100%; }
.sg-sidelist__label { margin: var(--sg-space-3) var(--sg-space-2) var(--sg-space-1); font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-text-muted); }
.sg-sidelist__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sg-space-2); align-items: center; min-height: calc(var(--sg-tap) + var(--sg-space-3)); width: 100%; padding: var(--sg-space-2) var(--sg-space-3); border: 0; border-radius: var(--sg-radius-m);
  background: transparent; color: var(--sg-text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.sg-sidelist__item:hover { background: var(--sg-surface-2); }
.sg-sidelist__item[aria-current="true"], .sg-sidelist__item[aria-current="page"] { background: var(--sg-accent-soft); }
.sg-sidelist__item--main { box-shadow: inset 3px 0 0 var(--sg-gold); }
.sg-sidelist__title { font-weight: var(--sg-fw-semibold); font-size: var(--sg-fs-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-sidelist__snippet { grid-column: 1; font-size: var(--sg-fs-s); color: var(--sg-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-sidelist__time { grid-column: 2; grid-row: 1; font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-sidelist__dot { grid-column: 2; grid-row: 2; justify-self: end; }
.sg-sidelist__new { margin-top: var(--sg-space-2); }

.sg-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sg-space-4); padding: var(--sg-space-5) var(--sg-space-5) var(--sg-space-4); overscroll-behavior: contain; }
.sg-bubble { display: grid; gap: var(--sg-space-1); max-width: min(680px, 90%); }
.sg-bubble__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-bubble__who strong { color: var(--sg-text); font-size: var(--sg-fs-s); }
.sg-bubble__body { padding: var(--sg-space-3) var(--sg-space-4); border-radius: var(--sg-radius-l); border: 1px solid var(--sg-border); background: var(--sg-bubble-maya); color: var(--sg-text); box-shadow: var(--sg-shadow-1); overflow-wrap: anywhere; }
.sg-bubble__body p { margin: 0 0 var(--sg-space-2); }
.sg-bubble__body p:last-child { margin-bottom: 0; }
.sg-bubble--maya .sg-bubble__body { border-top-left-radius: var(--sg-radius-s); }
.sg-bubble--user { align-self: flex-end; }
.sg-bubble--user .sg-bubble__who { justify-content: flex-end; }
.sg-bubble--user .sg-bubble__body { background: var(--sg-bubble-user); color: var(--sg-bubble-user-text); border-color: transparent; border-top-right-radius: var(--sg-radius-s); }
.sg-bubble--system { align-self: center; max-width: min(560px, 92%); text-align: center; }
.sg-bubble--system .sg-bubble__body { background: var(--sg-neutral-soft); color: var(--sg-text-muted); border-style: dashed; box-shadow: none; font-size: var(--sg-fs-s); }
.sg-bubble__quote { margin: 0 0 var(--sg-space-2); padding-left: var(--sg-space-2); border-left: 3px solid var(--sg-gold); font-size: var(--sg-fs-s); color: inherit; }
.sg-bubble__status { display: inline-flex; align-items: center; gap: var(--sg-space-1); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-bubble__status[data-state="failed"] { color: var(--sg-danger); }
.sg-bubble__status[data-state="sending"], .sg-bubble__status[data-state="pending"], .sg-bubble__status[data-state="drafting"] { color: var(--sg-warning); }
.sg-bubble__status[data-state="sent"], .sg-bubble__status[data-state="verified"] { color: var(--sg-success); }
.sg-bubble__card { margin-top: var(--sg-space-2); }
.sg-day { align-self: center; padding: 2px var(--sg-space-3); border-radius: var(--sg-radius-pill); background: var(--sg-neutral-soft); color: var(--sg-text-muted); font-size: var(--sg-fs-xs); }
@media (max-width: 760px) { .sg-thread { padding: var(--sg-space-4) var(--sg-space-3); } .sg-bubble { max-width: 94%; } }

/* Composer: fixed at the bottom of the stage; padding respects the phone keyboard safe area */
.sg-composer { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-3) var(--sg-space-4); padding-bottom: calc(var(--sg-space-3) + env(safe-area-inset-bottom, 0px)); background: var(--sg-surface); border-top: 1px solid var(--sg-border); }
.sg-composer__context { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.sg-composer__row { display: flex; align-items: flex-end; gap: var(--sg-space-2); }
.sg-composer__row .sg-textarea { min-height: var(--sg-tap); height: var(--sg-tap); resize: none; }

/* Context card (right panel): what Maya is working on, approvals, the linked post, goal or idea */
.sg-context-card { display: flex; flex-direction: column; gap: var(--sg-space-4); padding: var(--sg-space-4); background: var(--sg-surface); color: var(--sg-text); min-height: 100%; }
.sg-context-card__title { margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-l); }
.sg-context-card__section { display: flex; flex-direction: column; gap: var(--sg-space-2); padding-top: var(--sg-space-3); border-top: 1px solid var(--sg-border); }
.sg-context-card__section:first-of-type { padding-top: 0; border-top: 0; }
.sg-context-card__label { margin: 0; font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-gold-text); }

/* Task card inside a bubble: a request with its true lifecycle */
.sg-taskcard { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-3); background: var(--sg-surface); color: var(--sg-text); border: 1px solid var(--sg-border); border-left: 4px solid var(--sg-gold); border-radius: var(--sg-radius-m); }
.sg-taskcard__title { margin: 0; font-weight: var(--sg-fw-semibold); font-size: var(--sg-fs-m); }

/* ===== 8. States: banner, error, loading, lifecycle steps ===== */
/* Banner: stale source, preview feature, view-only (no permission), error, info. Always a title and a reason. */
.sg-banner { display: flex; align-items: flex-start; gap: var(--sg-space-3); padding: var(--sg-space-3) var(--sg-space-4); border: 1px solid var(--sg-border); border-left: 4px solid var(--sg-info); border-radius: var(--sg-radius-m); background: var(--sg-info-soft); color: var(--sg-text); font-size: var(--sg-fs-s); }
.sg-banner__title { display: block; font-weight: var(--sg-fw-bold); margin-bottom: 2px; }
.sg-banner--stale { border-left-color: var(--sg-warning); background: var(--sg-warning-soft); }
.sg-banner--preview { border-left-color: var(--sg-info); background: var(--sg-info-soft); }
.sg-banner--viewonly { border-left-color: var(--sg-text-muted); background: var(--sg-neutral-soft); }
.sg-banner--error { border-left-color: var(--sg-danger); background: var(--sg-danger-soft); }
.sg-banner--success { border-left-color: var(--sg-success); background: var(--sg-success-soft); }

/* Empty: says what is missing and why, never blank */
.sg-empty { text-align: center; padding: var(--sg-space-6) var(--sg-space-4); border: 1px dashed var(--sg-border-strong); border-radius: var(--sg-radius-l); color: var(--sg-text-muted); background: var(--sg-surface); }
.sg-empty__title { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-l); color: var(--sg-text); margin: 0 0 var(--sg-space-2); }
.sg-empty p { margin: 0 auto var(--sg-space-3); max-width: 48ch; }

/* Error: what failed, that nothing was changed, and a retry */
.sg-error { padding: var(--sg-space-4); border: 1px solid var(--sg-danger); border-radius: var(--sg-radius-l); background: var(--sg-danger-soft); color: var(--sg-text); }
.sg-error__title { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-l); color: var(--sg-text); margin: 0 0 var(--sg-space-2); }
.sg-error p { margin: 0 0 var(--sg-space-3); }

/* Loading: skeleton blocks inside an aria-busy region */
.sg-loading { display: grid; gap: var(--sg-space-3); }
.sg-skeleton { display: block; min-height: 1em; border-radius: var(--sg-radius-s); background: linear-gradient(90deg, var(--sg-surface-2), var(--sg-border), var(--sg-surface-2)); background-size: 200% 100%; animation: sg-shimmer 1.4s linear infinite; }
@keyframes sg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Lifecycle steps: suggested, requested, accepted by the engine, in progress, verified externally (or failed) */
.sg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-2); counter-reset: sg-step; }
.sg-steps__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--sg-space-2); align-items: start; font-size: var(--sg-fs-s); color: var(--sg-text-muted); counter-increment: sg-step; }
.sg-steps__item::before { content: counter(sg-step); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--sg-border-strong); background: var(--sg-surface); color: var(--sg-text-muted); font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); }
.sg-steps__item[data-state="done"] { color: var(--sg-text); }
.sg-steps__item[data-state="done"]::before { content: "\2713"; background: var(--sg-success-soft); border-color: var(--sg-success); color: var(--sg-success); }
.sg-steps__item[data-state="current"] { color: var(--sg-text); font-weight: var(--sg-fw-semibold); }
.sg-steps__item[data-state="current"]::before { background: var(--sg-accent); border-color: var(--sg-accent); color: var(--sg-accent-text); }
.sg-steps__item[data-state="failed"] { color: var(--sg-danger); font-weight: var(--sg-fw-semibold); }
.sg-steps__item[data-state="failed"]::before { content: "!"; background: var(--sg-danger-soft); border-color: var(--sg-danger); color: var(--sg-danger); }
.sg-steps__note { display: block; font-weight: var(--sg-fw-regular); color: var(--sg-text-muted); font-size: var(--sg-fs-xs); }

/* ===== 9. Overlays: drawer, sheet, viewer, toast ===== */
.sg-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--sg-elevated); color: var(--sg-text); border-left: 1px solid var(--sg-border);
  box-shadow: var(--sg-shadow-2); padding: var(--sg-space-4); overflow-y: auto; z-index: var(--sg-z-drawer); transform: translateX(100%); transition: transform 0.2s ease; }
.sg-drawer[data-open="true"] { transform: none; }
.sg-drawer[hidden] { display: none; }

.sg-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; background: var(--sg-elevated); color: var(--sg-text); border-top: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-l) var(--sg-radius-l) 0 0; box-shadow: var(--sg-shadow-2); padding: var(--sg-space-4); padding-bottom: calc(var(--sg-space-4) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; z-index: var(--sg-z-sheet);
  transform: translateY(100%); transition: transform 0.2s ease; }
.sg-sheet[data-open="true"] { transform: none; }
.sg-sheet[hidden] { display: none; }
.sg-sheet__grab { display: block; width: 40px; height: 4px; margin: 0 auto var(--sg-space-3); border-radius: var(--sg-radius-pill); background: var(--sg-border-strong); }
.sg-sheet--full { top: 0; max-height: none; border-radius: 0; }

.sg-viewer { position: fixed; inset: 0; z-index: var(--sg-z-viewer); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sg-space-3);
  background: var(--sg-bg); color: var(--sg-text); padding: var(--sg-space-4); }
.sg-viewer[hidden] { display: none; }
.sg-viewer__close { position: absolute; top: var(--sg-space-3); right: var(--sg-space-3); }
.sg-viewer__media { max-width: 100%; max-height: 75vh; border-radius: var(--sg-radius-m); }

.sg-toast { position: fixed; left: 50%; bottom: calc(var(--sg-space-7) + var(--sg-space-4)); transform: translateX(-50%); z-index: var(--sg-z-toast); max-width: min(92vw, 420px);
  background: var(--sg-elevated); color: var(--sg-text); border: 1px solid var(--sg-border); border-left: 4px solid var(--sg-info); border-radius: var(--sg-radius-m);
  box-shadow: var(--sg-shadow-2); padding: var(--sg-space-3) var(--sg-space-4); }
.sg-toast--error { border-left-color: var(--sg-danger); }
.sg-toast--success { border-left-color: var(--sg-success); }

/* ===== 10. Reduced motion: no animation or transition ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .sg-skeleton { background: var(--sg-surface-2); }
  .sg-card--link:hover, .sg-metric--link:hover, .sg-media--link:hover, .sg-btn--primary:hover { transform: none; }
}

/* Responsive visibility helpers */
.sg-only-phone { display: none !important; }
@media (max-width: 760px) { .sg-only-phone { display: inline-flex !important; } .sg-only-desktop { display: none !important; } }

/* Horizontal media card (next scheduled post): image left on tablet and desktop, stacked on the phone */
.sg-media--row { flex-direction: row; }
.sg-media--row > .sg-media__frame { width: 40%; flex: none; }
@media (max-width: 760px) { .sg-media--row { flex-direction: column; } .sg-media--row > .sg-media__frame { width: 100%; } }
.sg-inspector[hidden], .sg-chat[hidden], .sg-bottomnav[hidden], .sg-rail[hidden] { display: none; }

/* ===== 11. Mission Control: evidence state, command bar, segmented and command select, mission hero, mission metric, agency pulse, Maya cockpit ===== */
/* Evidence state: a dot and the word, for live verified, pending, in progress, scheduled, historical, stale, unavailable, failed.
   The dot shape and the border style are the second cue, so state is never colour alone. Use data-state on .sg-state. */
.sg-state { display: inline-flex; align-items: center; gap: var(--sg-space-2); padding: 2px var(--sg-space-3) 2px var(--sg-space-2); border-radius: var(--sg-radius-pill); border: 1px solid currentColor; background: var(--sg-surface); color: var(--sg-text-muted);
  font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); line-height: 1.4; letter-spacing: 0.04em; white-space: nowrap; }
.sg-state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; background: currentColor; }
.sg-state[data-state="live"] { color: var(--sg-state-live); background: var(--sg-state-live-soft); }
.sg-state[data-state="pending"] { color: var(--sg-state-pending); background: var(--sg-state-pending-soft); }
.sg-state[data-state="pending"]::before { background: transparent; }
.sg-state[data-state="progress"] { color: var(--sg-state-progress); background: var(--sg-state-progress-soft); }
.sg-state[data-state="progress"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.sg-state[data-state="scheduled"] { color: var(--sg-state-scheduled); background: var(--sg-state-scheduled-soft); }
.sg-state[data-state="scheduled"]::before { border-radius: 1px; transform: rotate(45deg); }
.sg-state[data-state="historical"] { color: var(--sg-state-historical); background: var(--sg-state-historical-soft); }
.sg-state[data-state="historical"]::before { border-radius: 1px; background: transparent; }
.sg-state[data-state="stale"] { color: var(--sg-state-stale); background: var(--sg-state-stale-soft); border-style: dashed; }
.sg-state[data-state="stale"]::before { background: transparent; border-style: dashed; }
.sg-state[data-state="unavailable"] { color: var(--sg-state-unavailable); background: var(--sg-state-unavailable-soft); border-style: dotted; }
.sg-state[data-state="unavailable"]::before { background: transparent; border-style: dotted; }
.sg-state[data-state="failed"] { color: var(--sg-state-failed); background: var(--sg-state-failed-soft); }
.sg-state[data-state="failed"]::before { border-radius: 1px; }

/* Top navigation: compact horizontal links inside the top bar (identity, Home, Creative Studio, Performance, Intelligence, Meetings, Muse Conversations, Operations). Strong active state. */
.sg-topnav { display: flex; flex: 0 1 auto; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sg-topnav::-webkit-scrollbar { display: none; }
.sg-topbar__title { flex: none; }
@media (max-width: 1279px) { .sg-topnav a { padding: 0 var(--sg-space-2); } }
.sg-topnav a { display: inline-flex; align-items: center; min-height: var(--sg-tap); padding: 0 var(--sg-space-3); border-radius: var(--sg-radius-m); color: var(--sg-text-muted); text-decoration: none; font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); white-space: nowrap; transition: background var(--sg-dur) var(--sg-ease), color var(--sg-dur) var(--sg-ease); }
.sg-topnav a:hover { color: var(--sg-text); background: var(--sg-surface-2); }
.sg-topnav a[aria-current="page"] { color: var(--sg-text); background: var(--sg-accent-soft); box-shadow: inset 0 -2px 0 var(--sg-live), 0 0 16px -8px var(--sg-glow); }

/* Command bar: report date, publishing week, data freshness, agency connection, time period, refresh, reviewer. Glass, one hairline between items. */
.sg-command-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sg-space-3) var(--sg-space-4); padding: var(--sg-space-3) var(--sg-space-4); background: var(--sg-glass); border: 1px solid var(--sg-border-lit); border-radius: var(--sg-radius-l);
  box-shadow: var(--sg-shadow-soft); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); color: var(--sg-text); }
.sg-command-bar--sticky { position: sticky; top: var(--sg-topbar-h); z-index: var(--sg-z-sticky); }
.sg-command-bar__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: var(--sg-space-4); border-right: 1px solid var(--sg-border); }
.sg-command-bar__item:last-child { border-right: 0; padding-right: 0; }
.sg-command-bar__label { font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-gold-text); }
.sg-command-bar__value { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); min-height: var(--sg-tap); font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); color: var(--sg-text); }
.sg-command-bar__spacer { flex: 1 1 auto; }
@media (max-width: 760px) {
  .sg-command-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-3); padding: var(--sg-space-3); }
  .sg-command-bar__item { padding-right: 0; border-right: 0; }
  .sg-command-bar__wide, .sg-command-bar__item:has(.sg-select--command) { grid-column: 1 / -1; }
  .sg-command-bar .sg-select--command { width: 100%; }
  .sg-command-bar__spacer { display: none; }
  .sg-command-bar--sticky { position: static; }
}

/* Segmented selector (time period): one choice from a few. Use buttons with aria-pressed. An option with no real data behind it is disabled and says why. */
.sg-segmented { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 3px; border: 1px solid var(--sg-border-strong); border-radius: var(--sg-radius-m); background: var(--sg-bg); }
.sg-segmented__item { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--sg-tap) - 8px); padding: 0 var(--sg-space-3); border: 0; border-radius: var(--sg-radius-s); background: transparent; color: var(--sg-text-muted);
  font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); white-space: nowrap; cursor: pointer; transition: background var(--sg-dur) var(--sg-ease), color var(--sg-dur) var(--sg-ease), box-shadow var(--sg-dur) var(--sg-ease); }
.sg-segmented__item:hover { color: var(--sg-text); background: var(--sg-surface-2); }
.sg-segmented__item[aria-pressed="true"], .sg-segmented__item[aria-checked="true"], .sg-segmented__item[aria-current="true"] { background: var(--sg-accent-soft); color: var(--sg-text); box-shadow: inset 0 0 0 1px var(--sg-live), 0 0 16px -6px var(--sg-glow); }
.sg-segmented__item:disabled, .sg-segmented__item[aria-disabled="true"] { background: transparent; color: var(--sg-text-muted); cursor: not-allowed; text-decoration: underline dotted; text-underline-offset: 3px; box-shadow: none; }

/* Command select: a compact dropdown for the week and report date, same height as the controls beside it */
.sg-select--command { appearance: none; -webkit-appearance: none; width: auto; min-width: 0; max-width: 100%; padding: 0 34px 0 var(--sg-space-3); background-color: var(--sg-bg); color: var(--sg-text); font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); border-radius: var(--sg-radius-m); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--sg-text-muted) 50%), linear-gradient(135deg, var(--sg-text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.sg-select--command:hover { border-color: var(--sg-live); }
.sg-select--command option, .sg-select--command optgroup { background: var(--sg-surface); color: var(--sg-text); }
.sg-command-bar .sg-btn { min-height: var(--sg-tap); }

/* Mission hero: the business objective, three outcomes with a verified target only when one exists, Maya's reading, ranked next moves, one primary action */
.sg-mission { position: relative; overflow: hidden; display: grid; gap: var(--sg-space-5); padding: var(--sg-space-6); border-radius: var(--sg-radius-xl); border: 1px solid var(--sg-border-lit); color: var(--sg-text);
  background: radial-gradient(80% 110% at 100% 0%, var(--sg-glow), transparent 60%), radial-gradient(60% 80% at 0% 100%, var(--sg-glow-gold), transparent 62%), linear-gradient(165deg, var(--sg-surface-2), var(--sg-bg)); box-shadow: var(--sg-shadow-lift); }
.sg-mission::before { content: ""; position: absolute; left: var(--sg-space-6); right: var(--sg-space-6); top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sg-live), transparent); }
.sg-mission__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sg-space-3); }
.sg-mission__objective { margin: 0 0 var(--sg-space-2); font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-2xl); line-height: var(--sg-lh-snug); color: var(--sg-text); max-width: 30ch; }
.sg-mission__context { margin: 0; max-width: var(--sg-measure); color: var(--sg-text-muted); }
.sg-mission__outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.sg-mission__outcome { display: flex; flex-direction: column; gap: var(--sg-space-1); min-width: 0; padding: var(--sg-space-4); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); background: var(--sg-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sg-mission__outcome-label { font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); line-height: var(--sg-lh-snug); color: var(--sg-text-muted); }
.sg-mission__outcome-value { margin: 0; font-family: var(--sg-font-display); font-size: var(--sg-fs-3xl); line-height: var(--sg-lh-tight); font-variant-numeric: tabular-nums; color: var(--sg-text); overflow-wrap: anywhere; }
.sg-mission__outcome-value--null { font-size: var(--sg-fs-xl); color: var(--sg-text-muted); }
.sg-mission__outcome-source { margin: 0; font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-mission__progress { display: block; height: 6px; margin-top: var(--sg-space-1); border-radius: var(--sg-radius-pill); background: var(--sg-neutral-soft); overflow: hidden; }
.sg-mission__progress::before { content: ""; display: block; height: 100%; width: var(--sg-pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--sg-live), var(--sg-pulse)); box-shadow: 0 0 12px var(--sg-glow); }
.sg-mission__progress-note { margin: 0; font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-mission__read { display: flex; gap: var(--sg-space-3); align-items: flex-start; padding: var(--sg-space-4); border-radius: 0 var(--sg-radius-m) var(--sg-radius-m) 0; border-left: 3px solid var(--sg-live); background: color-mix(in srgb, var(--sg-live) 9%, transparent); }
.sg-mission__read p { margin: 0; font-size: var(--sg-fs-l); line-height: var(--sg-lh-body); }
.sg-mission__moves { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-2); counter-reset: sg-move; }
.sg-mission__move { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sg-space-3); align-items: center; padding: var(--sg-space-3) var(--sg-space-4); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-m); background: var(--sg-surface); counter-increment: sg-move; }
.sg-mission__move::before { content: counter(sg-move); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sg-gold); color: var(--sg-gold-text); font: var(--sg-fw-bold) var(--sg-fs-s) var(--sg-font-body); }
.sg-mission__move-title { margin: 0; font-weight: var(--sg-fw-semibold); line-height: var(--sg-lh-snug); }
.sg-mission__move-why { margin: 2px 0 0; font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.sg-mission__actions { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
@media (max-width: 760px) {
  .sg-mission { padding: var(--sg-space-5) var(--sg-space-4); border-radius: var(--sg-radius-l); }
  .sg-mission::before { left: var(--sg-space-4); right: var(--sg-space-4); }
  .sg-mission__move { grid-template-columns: 28px minmax(0, 1fr); }
  .sg-mission__move > :last-child { grid-column: 1 / -1; }
  .sg-mission__actions .sg-btn { flex: 1 1 140px; }
}

/* Mission metric: a metric tile with a lit top edge, a live-blue trend and an explain affordance. Same anatomy as .sg-metric. */
.sg-metric--mission { position: relative; overflow: hidden; background: var(--sg-glass); border-color: var(--sg-border-lit); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sg-metric--mission::before { content: ""; position: absolute; left: var(--sg-space-4); right: var(--sg-space-4); top: 0; height: 2px; border-radius: 0 0 var(--sg-radius-s) var(--sg-radius-s); background: linear-gradient(90deg, var(--sg-live), transparent); }
.sg-metric--mission .sg-metric__value { font-size: var(--sg-fs-display); }
.sg-metric--mission .sg-metric__value--null { font-size: var(--sg-fs-xl); }
.sg-metric--mission .sg-metric__spark, .sg-metric--mission .sg-spark { color: var(--sg-live); }
.sg-metric__explain { display: inline-flex; align-items: center; gap: var(--sg-space-1); font: var(--sg-fw-semibold) var(--sg-fs-xs) var(--sg-font-body); color: var(--sg-link); }
.sg-metric__explain::after { content: "\2192"; }

/* Agency pulse: the source-backed event list. The dot rings out ONCE when a real change is observed (set data-fresh="true", clear it on the next change);
   a static "New" marker (.sg-pulse__new) carries the same message when motion is reduced. No polling and no model call lives in this component. */
.sg-pulse { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sg-pulse__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sg-space-2); margin: 0 0 var(--sg-space-3); }
.sg-pulse__live { display: inline-flex; align-items: center; gap: var(--sg-space-2); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-pulse__live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sg-live); box-shadow: 0 0 10px var(--sg-glow); }
.sg-pulse__item { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--sg-space-3); padding-bottom: var(--sg-space-4); }
.sg-pulse__item::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 1px; background: var(--sg-border); }
.sg-pulse__item:last-child { padding-bottom: 0; }
.sg-pulse__item:last-child::before { display: none; }
.sg-pulse__dot { position: relative; justify-self: center; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; color: var(--sg-state-live); background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.sg-pulse__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; pointer-events: none; }
.sg-pulse__item[data-fresh="true"] .sg-pulse__dot::after { animation: sg-pulse-once 1.4s var(--sg-ease) 1 both; }
@keyframes sg-pulse-once { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(3); opacity: 0; } }
.sg-pulse__item[data-state="live"] .sg-pulse__dot { color: var(--sg-state-live); }
.sg-pulse__item[data-state="pending"] .sg-pulse__dot { color: var(--sg-state-pending); }
.sg-pulse__item[data-state="progress"] .sg-pulse__dot { color: var(--sg-state-progress); }
.sg-pulse__item[data-state="scheduled"] .sg-pulse__dot { color: var(--sg-state-scheduled); }
.sg-pulse__item[data-state="historical"] .sg-pulse__dot { color: var(--sg-state-historical); }
.sg-pulse__item[data-state="stale"] .sg-pulse__dot { color: var(--sg-state-stale); }
.sg-pulse__item[data-state="unavailable"] .sg-pulse__dot { color: var(--sg-state-unavailable); background: transparent; border: 2px dotted currentColor; box-shadow: none; }
.sg-pulse__item[data-state="failed"] .sg-pulse__dot { color: var(--sg-state-failed); border-radius: 2px; }
.sg-pulse__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-pulse__title { margin: 0; font-weight: var(--sg-fw-semibold); font-size: var(--sg-fs-m); line-height: var(--sg-lh-snug); }
.sg-pulse__meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-1) var(--sg-space-2); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-pulse__new { display: none; padding: 0 var(--sg-space-2); border-radius: var(--sg-radius-pill); background: var(--sg-accent-soft); border: 1px solid var(--sg-live); color: var(--sg-text); font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: 0.04em; }
.sg-pulse__item[data-fresh="true"] .sg-pulse__new { display: inline-flex; }

/* Maya cockpit: the intelligence panel beside the workspace (about 35 percent). Identity and real availability, current assessment, recent verified
   activity, suggested questions, four quick actions, the composer and the way to the full Muse workspace. Never show a simulated answer as live. */
.sg-cockpit { display: flex; flex-direction: column; gap: var(--sg-space-4); min-height: 100%; padding: var(--sg-space-5) var(--sg-space-4) var(--sg-space-4); background: var(--sg-glass); color: var(--sg-text); }
.sg-cockpit__head { display: flex; align-items: center; gap: var(--sg-space-3); }
.sg-cockpit__who { min-width: 0; display: flex; flex-direction: column; gap: var(--sg-space-1); align-items: flex-start; }
.sg-cockpit__name { margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-xl); line-height: var(--sg-lh-tight); }
.sg-cockpit__assessment { position: relative; padding: var(--sg-space-4); border: 1px solid var(--sg-border-lit); border-radius: var(--sg-radius-l); background: var(--sg-surface); box-shadow: var(--sg-shadow-soft); }
.sg-cockpit__assessment p { margin: 0; font-size: var(--sg-fs-l); line-height: var(--sg-lh-body); }
.sg-cockpit__section { display: flex; flex-direction: column; gap: var(--sg-space-2); padding-top: var(--sg-space-3); border-top: 1px solid var(--sg-border); }
.sg-cockpit__label { margin: 0; font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-gold-text); }
.sg-cockpit__asks { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.sg-cockpit__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-2); }
.sg-cockpit__actions .sg-btn { padding: 0 var(--sg-space-3); font-size: var(--sg-fs-s); }
.sg-cockpit__composer { position: sticky; bottom: 0; margin-top: auto; display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-3); border: 1px solid var(--sg-border-lit); border-radius: var(--sg-radius-l); background: var(--sg-surface); box-shadow: var(--sg-shadow-soft); }
.sg-cockpit__row { display: flex; align-items: flex-end; gap: var(--sg-space-2); }
.sg-cockpit__row .sg-textarea { min-height: var(--sg-tap); height: var(--sg-tap); resize: none; background: var(--sg-bg); }
.sg-cockpit__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sg-space-2); font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
@media (max-width: 420px) { .sg-cockpit__actions { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .sg-pulse__item[data-fresh="true"] .sg-pulse__dot::after { animation: none; opacity: 0; }
  .sg-segmented__item { transition: none; }
}

/* Deep-link landing (#476): the plain status line and the highlight on the exact item a link opened. */
.sg-deeplink-note { margin: 0 0 var(--sg-space-3, 12px); padding: 10px 12px; border: 1px solid var(--sg-border); border-radius: var(--sg-radius-m, 10px); background: var(--sg-surface); }
.sg-deeplink-flash { outline: 3px solid var(--sg-accent); outline-offset: 2px; border-radius: var(--sg-radius-m, 10px); transition: outline-color 0.4s; }

/* ---- app-shell.css ---- */
/* App shell layout (#459 #494, Mission Control, Oct 16 directive). The frame is the shared .sg-shell grid from sg-components.css, re-pointed here
   to: top navigation and command bar over the main workspace (about 65%) and the Maya cockpit (about 35%). This file adds what the shell owns:
   the top navigation, the command bar and its time controls, state tags, Agency Pulse, the mission card, the cockpit, the Maya panel as a
   drawer and a full-screen phone page, the More sheet and the Home composition helpers. Semantic --sg-* tokens only: no hex, no raw brand value.
   Tokens another helper may still be adding (--sg-glass, --sg-live, --sg-pulse) are always used with a fallback to a token that exists. */
html { background: var(--sg-bg); color: var(--sg-text); font-family: var(--sg-font-body); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--sg-focus-ring); }
.sgx-main { min-width: 0; outline: none; }
.sgx-main:focus-visible { box-shadow: none; }

/* ---------- frame (#605, Oct 21 2026): one top bar, a left rail on a desktop, a bottom nav on a phone ----------
   Top bar: the Sunset Grove mark, the week picker, the bell, the signed-in person. Rail: all of NAV in order (761 px and up). Bottom nav: Home, Studio,
   Maya and More (760 px and down; More lists the other seven). Each page opens with the same header (title, purpose, quiet status line) in .sgx-pagehead. */
.sg-shell.sgx-app { --sgx-top-h: 3.5rem; grid-template-columns: var(--sg-rail-w) minmax(0, 1fr); grid-template-areas: "top top" "rail main"; }
.sgx-top { position: sticky; top: 0; z-index: var(--sg-z-nav); isolation: isolate; }
.sgx-stage { grid-area: main; min-width: 0; display: flex; flex-direction: column; }
.sgx-stage > .sg-shell__main { flex: 1 1 auto; padding-top: var(--sg-space-4); }
.sgx-navbar { display: flex; align-items: center; flex-wrap: wrap; min-height: var(--sgx-top-h); padding: var(--sg-space-1) var(--sg-space-5); gap: var(--sg-space-2) var(--sg-space-4); border-bottom: var(--sg-hair) solid var(--sg-border); }
.sgx-brand { display: inline-flex; align-items: center; gap: var(--sg-space-3); flex: none; color: var(--sg-text); text-decoration: none; min-height: var(--sg-tap); }
.sgx-brand__mark { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: var(--sg-radius-m); border: var(--sg-hair) solid var(--sg-gold); color: var(--sg-gold); font-family: var(--sg-font-display); font-size: var(--sg-type-body); letter-spacing: 0.02em; }
.sgx-brand__text { display: flex; flex-direction: column; line-height: var(--sg-lh-snug); }
.sgx-brand__text strong { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-type-body); }
.sgx-brand__text small { font-size: var(--sg-type-micro); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-gold-text); }
.sg-topbar__spacer { flex: 1 1 0; min-width: 0; }
.sg-count[hidden] { display: none; }
.sg-topbar__title { flex: none; }
.sgx-paneltoggle { flex: none; display: none; }
.sgx-askmaya { flex: none; }
@media (min-width: 1280px) { .sgx-paneltoggle { display: inline-flex; } .sgx-askmaya { display: none; } }
@media (max-width: 1099px) { .sgx-navbar .sg-topbar__attention span:not(.sg-count) { display: none; } }
@media (max-width: 1279px) { .sgx-paneltoggle .sgx-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* the rail */
.sgx-rail { grid-area: rail; position: sticky; top: var(--sgx-top-h); align-self: start; height: calc(100vh - var(--sgx-top-h)); display: flex; flex-direction: column; gap: var(--sg-space-1); padding: var(--sg-space-3) 0; overflow-y: auto; scrollbar-width: none; background: var(--sg-surface); border-right: var(--sg-hair) solid var(--sg-border); }
.sgx-rail::-webkit-scrollbar { display: none; }
.sgx-rail__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sg-space-1); min-height: var(--sg-tap); padding: var(--sg-space-2) var(--sg-space-half); border-radius: var(--sg-radius-m); color: var(--sg-text-muted); text-decoration: none; text-align: center; font: var(--sg-fw-medium) var(--sg-type-micro) var(--sg-font-body); font-size: calc(var(--sg-type-micro) * 0.92); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.sgx-rail__item:hover { color: var(--sg-text); background: var(--sg-accent-soft); }
.sgx-rail__item[aria-current="page"] { color: var(--sg-text); background: var(--sg-accent-soft); box-shadow: inset var(--sg-bar-w) 0 0 var(--sg-gold); }
.sgx-rail__item .sg-icon { width: var(--sg-size-icon); height: var(--sg-size-icon); }
.sgx-rail__item .sg-count { position: absolute; top: var(--sg-space-1); right: var(--sg-space-2); }
@media (max-width: 760px) {
  .sg-shell.sgx-app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .sgx-rail { display: none; }
}

/* the page header: title, one sentence of purpose, a quiet status line (the same on every page) */
.sgx-pagehead { display: flex; flex-direction: column; gap: var(--sg-space-1); padding: var(--sg-space-5) var(--sg-space-6) 0; }
.sgx-pagehead[hidden] { display: none; }
.sgx-pagehead[data-compact="true"] { padding-top: var(--sg-space-3); }
.sgx-pagehead__title { margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-type-title); line-height: var(--sg-lh-tight); }
.sgx-pagehead__purpose { margin: 0; max-width: var(--sg-measure); color: var(--sg-text-muted); font-size: var(--sg-type-body); line-height: var(--sg-lh-snug); }
.sgx-statusline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-1) var(--sg-space-3); min-height: var(--sg-space-6); color: var(--sg-text-muted); font-size: var(--sg-type-small); }
.sgx-status { display: inline-flex; align-items: center; min-width: 0; }
.sgx-status__text { color: var(--sg-text-muted); font-size: var(--sg-type-small); }
.sgx-statusline .sgx-state { border: 0; background: transparent; padding: 0; font-size: var(--sg-type-small); font-weight: var(--sg-fw-regular); color: var(--sg-text-muted); white-space: normal; }
.sgx-refresh { display: inline-flex; align-items: center; gap: var(--sg-space-1); min-height: var(--sg-space-6); padding: 0 var(--sg-space-2); border: 0; border-radius: var(--sg-radius-pill); background: transparent; color: var(--sg-link); font: inherit; font-size: var(--sg-type-small); cursor: pointer; }
.sgx-refresh:hover { background: var(--sg-accent-soft); }
.sgx-refresh .sg-icon { width: var(--sg-type-small); height: var(--sg-type-small); }
.sgx-refresh[data-busy="true"] .sg-icon { animation: sgx-spin 0.9s linear infinite; }
.sgx-who { display: inline-flex; align-items: center; gap: var(--sg-space-2); }
.sgx-who__text { display: flex; flex-direction: column; line-height: var(--sg-lh-snug); font-size: var(--sg-type-small); }
.sgx-who__text small { font-size: var(--sg-type-micro); color: var(--sg-text-muted); }
@keyframes sgx-spin { to { transform: rotate(360deg); } }
.sgx-seg__short { display: none; }   /* B22: before the media rule below, which has equal specificity and must win on narrow screens */
@media (max-width: 1279px) { .sgx-seg__long { display: none; } .sgx-seg__short { display: inline; } .sgx-who__text { display: none; } }
html { scroll-padding-top: var(--sgx-top-h, 3.5rem); }
.sgx-main [id] { scroll-margin-top: var(--sgx-top-h, 3.5rem); }
.sgx-navbar .sgx-who { flex: none; }

/* ---------- time controls: the week picker in the top bar; a page shows only the controls it reads ---------- */
.sgx-command { display: flex; align-items: center; min-width: 0; color: var(--sg-text); }
.sgx-command[hidden] { display: none; }   /* #552: no time controls on a page they do not change */
.sgx-command__time { display: flex; min-width: 0; }
.sgx-time { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sg-space-2) var(--sg-space-4); }
.sgx-field { display: flex; flex-direction: column; gap: var(--sg-space-half); min-width: 0; flex: none; }
.sgx-field__label { font: var(--sg-fw-bold) var(--sg-type-micro) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-text-muted); }
.sgx-stepper { display: inline-flex; align-items: stretch; min-width: 0; }
.sgx-select { min-height: 2.5rem; min-width: 0; max-width: 100%; padding: 0 var(--sg-space-3); border: var(--sg-hair) solid var(--sg-border-strong); border-radius: var(--sg-radius-m); background: var(--sg-surface-2); color: var(--sg-text); font: var(--sg-fw-semibold) var(--sg-type-small) var(--sg-font-body); }
.sgx-stepper .sgx-select { border-radius: 0; border-left: 0; border-right: 0; width: auto; min-width: 14rem; }
.sgx-step { min-width: 2.5rem; min-height: 2.5rem; display: inline-grid; place-items: center; border: var(--sg-hair) solid var(--sg-border-strong); background: var(--sg-surface-2); color: var(--sg-text); font: var(--sg-fw-bold) var(--sg-fs-l) var(--sg-font-body); cursor: pointer; }
.sgx-step:first-child { border-radius: var(--sg-radius-m) 0 0 var(--sg-radius-m); }
.sgx-step:last-child { border-radius: 0 var(--sg-radius-m) var(--sg-radius-m) 0; }
.sgx-step:hover:not(:disabled) { background: var(--sg-accent-soft); }
.sgx-step:disabled, .sgx-seg__btn:disabled, .sgx-select:disabled { opacity: 0.55; cursor: not-allowed; }
.sgx-seg { display: inline-flex; flex-wrap: nowrap; border: var(--sg-hair) solid var(--sg-border-strong); border-radius: var(--sg-radius-m); overflow: hidden; background: var(--sg-surface-2); }
.sgx-seg__btn { flex: none; min-height: 2.375rem; padding: 0 var(--sg-space-3); border: 0; border-right: var(--sg-hair) solid var(--sg-border); background: transparent; color: var(--sg-text-muted); font: var(--sg-fw-semibold) var(--sg-type-small) var(--sg-font-body); cursor: pointer; white-space: nowrap; }
.sgx-seg__btn:last-child { border-right: 0; }
.sgx-seg__btn:hover:not(:disabled) { color: var(--sg-text); background: var(--sg-accent-soft); }
.sgx-seg__btn[aria-pressed="true"] { color: var(--sg-text); background: var(--sg-accent-soft); box-shadow: inset 0 calc(var(--sg-bar-w) * -1) 0 var(--sg-live, var(--sg-info)); }
.sgx-seg__btn:disabled { text-decoration: line-through; text-decoration-color: var(--sg-border-strong); flex: 0 0 auto; padding: 0 var(--sg-space-2); font-size: var(--sg-type-micro); max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
.sgx-command:not([data-show~="week"]) .sgx-field--week,
.sgx-command:not([data-show~="report"]) .sgx-field--report,
.sgx-command:not([data-show~="window"]) .sgx-field--window { display: none; }   /* #552: only the controls this page reads */
@media (max-width: 900px) { .sgx-command { flex: 1 1 100%; order: 10; } .sgx-command__time { flex: 1 1 100%; } }

/* ---------- state tags: a dot and a word, never colour alone ---------- */
.sgx-state { display: inline-flex; align-items: center; gap: 6px; padding: 1px var(--sg-space-2); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-pill); background: var(--sg-surface-2); color: var(--sg-text); font: var(--sg-fw-semibold) var(--sg-fs-xs) var(--sg-font-body); white-space: nowrap; }
.sgx-state__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sg-text-muted); flex: none; }
.sgx-state[data-state="live"] .sgx-state__dot { background: var(--sg-live, var(--sg-info)); box-shadow: 0 0 6px var(--sg-live, var(--sg-info)); }
.sgx-state[data-state="verified"] .sgx-state__dot { background: var(--sg-success); }
.sgx-state[data-state="scheduled"] .sgx-state__dot { background: var(--sg-info); }
.sgx-state[data-state="progress"] .sgx-state__dot { background: var(--sg-info); }
.sgx-state[data-state="pending"] .sgx-state__dot, .sgx-state[data-state="stale"] .sgx-state__dot { background: var(--sg-warning); }
.sgx-state[data-state="failed"] .sgx-state__dot { background: var(--sg-danger); }
.sgx-state[data-state="historical"], .sgx-state[data-state="unavailable"] { border-style: dashed; }
.sg-badge--historical { color: var(--sg-text); background: var(--sg-neutral-soft); border-style: dashed; }

/* ---------- Maya panel: one element, three presentations ---------- */
.sgx-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--sg-glass, var(--sg-surface)); }
.sgx-panel__bar { display: none; align-items: center; gap: var(--sg-space-2); min-height: var(--sg-topbar-h); padding: 0 var(--sg-space-3); background: var(--sg-surface); border-bottom: 1px solid var(--sg-border); }
.sgx-panel__name { font-family: var(--sg-font-display); font-size: var(--sg-fs-l); }
.sgx-panel__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }   /* chat.js adds .sgc-root to this element itself */
.sgx-panel__body.sgc-root { flex: 1 1 auto; max-width: none; height: auto; min-height: 0; position: static; transform: none; width: 100%; border-radius: 0; box-shadow: none; z-index: auto; }
@media (max-width: 600px) { .sgx-panel__body.sgc-root { max-width: none; height: auto; border-top: 0; } }
.sgx-pad { padding: var(--sg-space-4); }

/* 1280 and up: the cockpit is docked on the right at about 35%, collapsible with the top bar toggle (the grid reads data-panel on .sg-shell) */
@media (min-width: 1280px) {
  .sg-shell.sgx-app[data-panel="open"] { grid-template-columns: var(--sg-rail-w) minmax(0, 65fr) minmax(360px, 35fr); grid-template-areas: "top top top" "rail main panel"; }
  .sg-shell.sgx-app[data-panel="closed"] { grid-template-columns: var(--sg-rail-w) minmax(0, 1fr); grid-template-areas: "top top" "rail main"; }
  .sgx-panel { position: sticky; top: var(--sgx-top-h); height: calc(100vh - var(--sgx-top-h)); border-left: var(--sg-hair) solid var(--sg-border); }
  .sgx-panel[data-open="false"] { display: none; }
}

/* 1279 and below: the cockpit is a drawer from the right (a full screen page on a phone) */
@media (max-width: 1279px) {
  .sgx-panel { display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(420px, 100vw); height: auto; z-index: var(--sg-z-drawer);
    background: var(--sg-surface); border-left: 1px solid var(--sg-border); box-shadow: var(--sg-shadow-2);
    transform: translateX(100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
  .sgx-panel[data-open="true"] { transform: none; visibility: visible; transition: transform 0.2s ease; }
  .sgx-panel__bar { display: flex; }
  /* the page bar above carries Back, so the chat's own Close would be a second way out */
  #sg-conversation-panel .sgc-close { display: none; }
}

/* Phone: Maya is a full-screen page with a clear way back; the composer stays at the bottom of the visible viewport */
@media (max-width: 760px) {
  .sgx-panel { inset: 0; width: 100vw; height: 100vh; height: 100dvh; border-left: 0; box-shadow: none; z-index: var(--sg-z-viewer); }
  .sgx-panel__bar { padding-top: env(safe-area-inset-top, 0px); }
  .sgx-panel[data-open="true"] ~ .sgx-scrim { display: none; }
  /* #658 (Nov 13 2026): the full Maya chat ends at the top of the bottom tab bar, so its composer never covers the bar's links. chat.js
     sets the exact height from visualViewport (and the whole visible height while the keyboard hides the bar); this is the size before
     the script runs. The bar carries the home-indicator inset, so the composer above it does not add it a second time. */
  .sgx-app .sgc-chat.sg-chat--screen { bottom: calc(var(--sg-bottomnav-h) + var(--sg-hair) + env(safe-area-inset-bottom, 0px)); height: auto; }
  .sgx-app .sgc-chat .sg-composer { padding-bottom: var(--sg-space-3); }
}

/* ---------- scrim (tablet drawer and the phone More sheet) ---------- */
.sgx-scrim { position: fixed; inset: 0; background: var(--sg-scrim); z-index: calc(var(--sg-z-drawer) - 1); }
.sgx-scrim[hidden] { display: none; }
.sgx-scrim[data-for="more"] { z-index: calc(var(--sg-z-sheet) - 1); }

/* ---------- phone bottom nav (the shared .sg-bottomnav): buttons must look like the links ---------- */
.sgx-tabbar .sg-bottomnav__item { font-family: var(--sg-font-body); }
.sgx-tabbar .sg-bottomnav__item[aria-expanded="true"] { color: var(--sg-text); box-shadow: inset 0 3px 0 var(--sg-gold); }

/* ---------- lists ---------- */
.sgx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sgx-list li { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); align-items: center; justify-content: space-between; }
.sgx-list--tight { gap: var(--sg-space-1); font-size: var(--sg-fs-s); }

/* ---------- the Maya cockpit (right panel) ---------- */
.sgx-cockpit { min-height: 0; }
.sgx-cockpit__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sg-space-4); padding: var(--sg-space-4); }
.sgx-cockpit__head { display: flex; align-items: center; gap: var(--sg-space-3); }
.sgx-cockpit__avatar { display: inline-flex; border-radius: 50%; padding: 2px; border: 2px solid var(--sg-border-strong); }
.sgx-cockpit__avatar[data-state="live"] { border-color: var(--sg-live, var(--sg-info)); box-shadow: 0 0 18px -4px var(--sg-live, var(--sg-info)); }
.sgx-cockpit__avatar[data-state="stale"] { border-color: var(--sg-warning); }
.sgx-cockpit__avatar[data-state="unavailable"] { border-style: dashed; }
.sgx-cockpit__who { flex: 1; min-width: 0; }
.sgx-cockpit__name { margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-xl); }
.sgx-cockpit__who p { margin: 0; }
.sgx-cockpit__avail { margin: 0; }
.sgx-cockpit__sec { display: flex; flex-direction: column; gap: var(--sg-space-2); padding-top: var(--sg-space-3); border-top: 1px solid var(--sg-border); }
.sgx-cockpit__h { margin: 0; font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-gold-text); }
.sgx-cockpit__read { margin: 0; font-size: var(--sg-fs-m); line-height: var(--sg-lh-body); }
.sgx-cockpit__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-2); }
/* Work with Maya: compact glass pill chips in a 2 by 2 grid (#507) */
.sgx-cockpit__actions .sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-size: var(--sg-fs-s); padding: 0 var(--sg-space-3); text-align: center; border-radius: 999px; border: 1px solid var(--sg-border-lit, var(--sg-border)); background: var(--sg-glass, var(--sg-surface)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: inherit; transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.sgx-cockpit__actions .sg-btn::before { content: "\2726"; font-size: 12px; color: var(--sg-raw-electric); }
.sgx-cockpit__actions > :nth-child(2)::before { content: "\2192"; }
.sgx-cockpit__actions > :nth-child(3)::before { content: "\25B2"; }
.sgx-cockpit__actions > :nth-child(4)::before { content: "\25C7"; }
.sgx-cockpit__actions .sg-btn:hover, .sgx-cockpit__actions .sg-btn:focus-visible { border-color: var(--sg-raw-electric-soft); background: var(--sg-surface-2); box-shadow: 0 0 14px var(--sg-glow, var(--sg-border)); }
.sgx-cockpit__chips { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.sgx-cockpit__chips .sg-chip { text-align: left; }
/* Oct 16: the conversation started from the Maya panel, shown in the panel (Roman: stay on the page) */
.sgx-panelchat { border: 1px solid var(--sg-border); border-radius: 14px; padding: var(--sg-space-3); background: var(--sg-surface); }
.sgx-panelchat[hidden] { display: none; }
.sgx-panelchat__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sg-space-2); flex-wrap: wrap; }
/* #546: the log grows with the page (chat.js shows only the last messages), never a scroll inside the panel's scroll */
.sgx-panelchat__log { display: flex; flex-direction: column; gap: var(--sg-space-2); margin-top: var(--sg-space-2); }
.sgx-panelchat__full { margin-top: var(--sg-space-3); }
.sgx-panelchat__msg { border-radius: 12px; padding: var(--sg-space-2) var(--sg-space-3); font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.sgx-panelchat__msg--you { align-self: flex-end; max-width: 90%; background: var(--sg-accent-soft); }
.sgx-panelchat__msg--maya { align-self: stretch; background: var(--sg-surface-2); }
.sgx-panelchat__who { display: block; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.sgx-panelchat__p { margin: 0 0 .4em; }
.sgx-panelchat__p:last-child { margin-bottom: 0; }
.sgx-cockpit__full { align-self: flex-start; }
.sgx-cockpit__composer { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sg-space-2); align-items: end; padding: var(--sg-space-3) var(--sg-space-4); padding-bottom: calc(var(--sg-space-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sg-border); background: var(--sg-surface); }
.sgx-cockpit__signin { align-self: center; white-space: nowrap; }   /* #658: a visitor's way in, in Ask's place on the locked Ask box */
.sgx-cockpit__input { min-height: 3.25rem; max-height: 8rem; resize: none; }

/* ---------- phone: compact command bar, touch-friendly week and period, Maya from the bottom nav ---------- */
@media (max-width: 760px) {
  .sg-shell.sgx-app { --sgx-top-h: 0px; }
  .sgx-top { position: static; }
  .sgx-navbar { min-height: 52px; padding: 0 var(--sg-space-3); }
  .sgx-brand__text small { display: none; }
  .sgx-askmaya, .sgx-paneltoggle { display: none; }
  .sgx-command { align-items: stretch; }
  .sgx-command__time, .sgx-time { width: 100%; }
  .sgx-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sg-space-2); }
  .sgx-field--week { grid-column: 1 / -1; }
  .sgx-field--week .sgx-stepper { display: grid; grid-template-columns: var(--sg-tap) minmax(0, 1fr) var(--sg-tap); }
  .sgx-field--week .sgx-select, .sgx-field--report .sgx-select { width: 100%; min-width: 0; }
  .sgx-select, .sgx-step { min-height: var(--sg-tap); }
  .sgx-step { min-width: var(--sg-tap); }
  .sgx-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sgx-seg__btn { min-height: var(--sg-tap); padding: 0 var(--sg-space-1); }
  .sgx-field--report, .sgx-field--window { width: 100%; min-width: 0; }
  .sgx-seg__btn { font-size: var(--sg-fs-xs); }
  .sgx-refresh { min-height: var(--sg-tap); }
  .sgx-pagehead { padding: var(--sg-space-3) var(--sg-space-3) 0; }
  .sgx-navbar { gap: var(--sg-space-1) var(--sg-space-3); }
  .sgx-who__text { display: none; }
  .sgx-cockpit__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgx-cockpit__composer { padding-bottom: calc(var(--sg-space-3) + env(safe-area-inset-bottom, 0px)); }
}
@media (pointer: coarse) { .sgx-select, .sgx-step, .sgx-seg__btn { min-height: var(--sg-tap); } }

/* ---------- the one shared layout class the wired views (app-views.js adapters) still use ---------- */
.sgx-stack { display: flex; flex-direction: column; gap: var(--sg-space-4); }

/* ---------- tablet: at most two competing columns, readable cards ---------- */
@media (min-width: 761px) and (max-width: 1279px) {
  .sg-shell__main { padding: var(--sg-space-5); }
}

/* ---------- phone: one task-focused surface, a meaningful first viewport, no nested horizontal scroll ---------- */
@media (max-width: 760px) {
  .sg-shell__main { padding-top: var(--sg-space-3); }
  .sg-topbar__title { font-size: var(--sg-fs-m); }
  .sg-topbar__date strong { font-size: var(--sg-fs-s); }
  .sg-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-media--row { flex-direction: column; }
  .sg-metric__value { font-size: var(--sg-fs-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .sgx-panel { transition: none; }
  .sgx-refresh[data-busy="true"] .sg-icon { animation: none; }
}

/* Maya's animated avatar (Oct 16): a 28px character in the top bar's Maya button; the cockpit uses the 96px size */
.sgx-paneltoggle .sgx-maya-av .maya-av--sm, .sgx-askmaya .sgx-maya-av .maya-av--sm { --maya-px: 28px; }
.sgx-maya-av { display: inline-flex; line-height: 0; }
.sgx-cockpit__avatar .sgx-maya-av .maya-av--md { --maya-px: 72px; }

/* Oct 16 panel toggle */
.sgx-panel__hide { display: none; margin-left: auto; gap: 4px; align-items: center; }
@media (min-width: 1280px) { .sgx-panel__bar { display: flex; } .sgx-panel__back { display: none; } .sgx-panel__hide { display: inline-flex; } }
.sgx-signin { flex: none; }   /* #542: never hidden, so a visitor on a phone can always sign in */
/* #548: full-width update banner at the top, phone and desktop */
.sgx-update { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--sg-z-nav) + 1); padding-top: env(safe-area-inset-top, 0px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); width: 100%; box-sizing: border-box;
  padding: var(--sg-space-2) var(--sg-space-4); background: var(--sg-elevated); color: var(--sg-text); border-bottom: 3px solid var(--sg-accent); box-shadow: var(--sg-shadow-2); font-weight: 600; }
.sgx-update[hidden] { display: none; }
.sgx-update__text { flex: 1 1 0; min-width: 0; }
/* #548: account menu under the signed-in person, and the uninstall steps */
.sgx-top .sg-topbar { position: relative; z-index: 2; }   /* the account menu opens over the command bar below */
.sgx-whowrap { position: relative; flex: none; display: inline-flex; }
button.sgx-who { background: none; border: 0; padding: var(--sg-space-1); border-radius: var(--sg-radius-m); color: inherit; font: inherit; cursor: pointer; min-height: 44px; }
.sgx-account { position: absolute; right: 0; top: calc(100% + 4px); z-index: 96; min-width: 15rem; max-width: calc(100vw - 32px); padding: var(--sg-space-2);
  background: var(--sg-elevated); color: var(--sg-text); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-m); box-shadow: var(--sg-shadow-2); }
.sgx-account[hidden] { display: none; }
.sgx-account__who { display: flex; flex-direction: column; gap: 2px; padding: var(--sg-space-2); border-bottom: 1px solid var(--sg-border); overflow-wrap: anywhere; }
.sgx-account__who small { color: var(--sg-text-muted); }
.sgx-account__form { margin: 0; }
.sgx-account__item { display: block; width: 100%; text-align: left; min-height: 44px; padding: var(--sg-space-2); background: none; border: 0; color: inherit; font: inherit; text-decoration: none; cursor: pointer; border-radius: var(--sg-radius-s); }
.sgx-account__item:hover, .sgx-account__item:focus-visible { background: var(--sg-surface-2); }
.sgx-uninstall { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--sg-scrim); }
.sgx-uninstall__card { width: 100%; max-width: 28rem; max-height: 100%; overflow: auto; padding: var(--sg-space-4); background: var(--sg-elevated); color: var(--sg-text); border-radius: var(--sg-radius-l); }

/* ---------- #545 bell panel: dropdown under the bell on a wider screen, sheet from the bottom on a phone. Tokens only. ---------- */
.sgx-bell { position: fixed; top: var(--sg-topbar-h); right: var(--sg-space-4); width: var(--sg-panel-w); max-width: calc(100vw - 2 * var(--sg-space-4)); max-height: 70vh; overflow-y: auto;
  background: var(--sg-elevated); color: var(--sg-text); border: 1px solid var(--sg-border); border-radius: var(--sg-radius-l); box-shadow: var(--sg-shadow-2); padding: var(--sg-space-4); z-index: calc(var(--sg-z-viewer) + 2); }   /* above the floating Maya companion */
.sgx-bell[hidden] { display: none; }
.sgx-bell__grab { display: none; }
.sgx-bell__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-2); margin-bottom: var(--sg-space-3); }
.sgx-bell__title { margin: 0; }
.sgx-bell__close, .sgx-bell__all { min-height: var(--sg-tap); }
.sgx-bell__list { list-style: none; margin: 0 0 var(--sg-space-3); padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sgx-bell__item { display: flex; align-items: center; gap: var(--sg-space-3); min-height: var(--sg-tap); padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-m); border: 1px solid var(--sg-border); color: var(--sg-text); text-decoration: none; }
.sgx-bell__item:hover { background: var(--sg-surface); }
.sgx-bell__dot { flex: none; width: var(--sg-space-2); height: var(--sg-space-2); border-radius: var(--sg-radius-pill); background: var(--sg-gold); }
.sgx-bell__item[data-seen="true"] .sgx-bell__dot { background: transparent; border: 1px solid var(--sg-border-strong); }
.sgx-bell__text { min-width: 0; }
.sgx-bell__text strong { display: block; font-size: var(--sg-fs-m); }
.sgx-bell__text small { display: block; font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sgx-bell__empty, .sgx-bell__note { margin: 0 0 var(--sg-space-3); font-size: var(--sg-fs-s); }
.sgx-bell__partial { padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-warning-soft); color: var(--sg-warning); }
.sgx-bell__fyi { list-style: none; margin: 0 0 var(--sg-space-3); padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-1); color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.sgx-scrim[data-for="bell"] { z-index: calc(var(--sg-z-viewer) + 1); }
@media (max-width: 760px) {
  .sgx-bell { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 85vh; border-radius: var(--sg-radius-l) var(--sg-radius-l) 0 0; border-bottom: 0;
    padding-bottom: calc(var(--sg-space-4) + env(safe-area-inset-bottom, 0px)); }
  .sgx-bell__grab { display: block; }
}

/* ---------- #546 (Roman, Oct 18: the phone app is "atrocious"): one-hand phone layout ---------- */
.sg-shell__main { overflow-wrap: break-word; }   /* long ids and URLs wrap instead of widening the page */
@media (max-width: 760px) {
  /* body copy is 16px; notes stay one step smaller but readable */
  .sg-shell__main, .sgx-panel__body { font-size: 1rem; }
  .sgx-panelchat__msg, .sgc-text, .sg-bubble__body { font-size: 1rem; }
  .sg-source, .sgx-cockpit__avail { font-size: var(--sg-fs-m); }
  /* #552: no floating Maya on a phone (the Maya tab is the entry), so the page only clears the bottom nav */
  .sg-shell__main { padding-bottom: calc(var(--sg-bottomnav-h) + 24px + env(safe-area-inset-bottom, 0px)); }
  .sgx-cockpit__scroll { padding-bottom: var(--sg-space-5); }
  /* every tap target is 44px or more */
  .sgx-panel__back, .sgx-panel__hide, .sg-link--block, .sgx-cockpit__full { min-height: var(--sg-tap); }
}
/* #548: on narrower screens the header still names who is signed in (the email and role are in the menu); on a phone Share moves into the menu */
@media (max-width: 1279px) { .sgx-who .sgx-who__text { display: flex; max-width: 7rem; min-width: 0; } .sgx-who__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sgx-who__text small { display: none; } }
/* Nov 1 2026 audit (item 10): at phone width the rule above put the name back beside the avatar, so a visitor's bar (brand, bell, Sign in,
   avatar and "Visitor") wrapped "Visitor" onto a second line. On a phone the avatar alone stands for the person; the account menu and its
   label still say who it is. */
@media (max-width: 760px) { .sgx-navbar .sgx-who .sgx-who__text { display: none; } .sgx-navbar--visitor .sgx-brand__text { display: none; } }
@media (max-width: 760px) { .sgx-share { display: none; } }
/* ---------- #546 (Roman, Oct 19: the phone app is "cluttered and virtually unusable"): a shorter command bar, no pill over Refresh, 44px taps ---------- */
@media (max-width: 760px) {
  /* the three pickers name themselves (week, a date, 7 or 28 days), so their small caps labels stay for screen readers only; the bar loses a third of its height */
  .sgx-field { position: relative; }
  .sgx-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the page title is a title, not a poster: the first post (or the first card) is what the screen is for */
  .sgx-head { margin-bottom: var(--sg-space-3); gap: var(--sg-space-1); }
  .sgx-head h1 { font-size: var(--sg-fs-2xl); }
  .sgx-head > p { margin: 0; font-size: var(--sg-fs-m); line-height: 1.35; }
  /* standalone links are 44px to hit without changing how a sentence flows: the padding is painted and tappable, the margin gives the room back */
  .sg-shell__main .sg-link, .sgc-chat .sg-link, .sgx-panel__body .sg-link { padding: 14px 6px; margin: -14px -6px; }
  .sgx-brand { min-width: var(--sg-tap); justify-content: center; }
}

/* ---- mission.css ---- */
/* Maya Mission Control surface (Roman, Oct 16 2026): immersive dark depth, glass panels, luminous borders, live blue accents.
   Tokens only from sg-tokens.css (test_cc_one_shell.py); motion only on hover/focus and honours prefers-reduced-motion. */
body {
  background:
    radial-gradient(75rem 37.5rem at 75% -10%, var(--sg-glow), transparent 60%),
    radial-gradient(56.25rem 31.25rem at -10% 110%, var(--sg-chart-area), transparent 60%),
    var(--sg-bg);
  background-attachment: fixed;
}
.sg-card, .sg-stat, .sg-metric, .sg-attention__item, .sg-inspector, [class*="sgx-card"], [class*="agc-card"] {
  background: color-mix(in srgb, var(--sg-surface) 78%, transparent);   /* glass over the gradient depth */
  border: var(--sg-hair) solid color-mix(in srgb, var(--sg-accent) 22%, transparent);
  backdrop-filter: blur(0.875rem) saturate(130%);
  -webkit-backdrop-filter: blur(0.875rem) saturate(130%);
  box-shadow: var(--sg-shadow-soft);
}
.sg-card:hover, .sg-metric:hover, .sg-attention__item:hover {
  border-color: var(--sg-border-strong);
  box-shadow: var(--sg-shadow-lift);
}
h1, h2, .sg-display { letter-spacing: 0.01em; }
.sg-badge--live, [data-badge="LIVE"] { box-shadow: 0 0 0.75rem calc(-1 * var(--sg-line-w)) color-mix(in srgb, var(--sg-success) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .sg-card, .sg-metric, .sg-attention__item { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
}

/* Claude C's views on the Mission Control surface (Oct 16 integration test: Intelligence and Meetings text was dark on dark, caveat boxes
   cream on cream, Operations detail cards white). agency_c_ui/*.css hard-codes the old light colours and is C's file, so B re-binds them
   here to the theme tokens. The :root:not(paper) prefix outranks C's selectors and leaves the paper theme exactly as C drew it. */
:root:not([data-theme="paper"]) .agc-meetings, :root:not([data-theme="paper"]) .agc-operations, :root:not([data-theme="paper"]) .agc-performance, :root:not([data-theme="paper"]) .agc-recs, :root:not([data-theme="paper"]) .agc-reports, :root:not([data-theme="paper"]) [class^="agc-learning"] { color: var(--sg-text); font-family: var(--sg-font-body); }
:root:not([data-theme="paper"]) .agc-operations .agc-operations-card, :root:not([data-theme="paper"]) .agc-meetings-item, :root:not([data-theme="paper"]) .agc-performance-card, :root:not([data-theme="paper"]) .agc-performance-compare, :root:not([data-theme="paper"]) .agc-performance-formats, :root:not([data-theme="paper"]) .agc-recs-card, :root:not([data-theme="paper"]) .agc-reports-tile, :root:not([data-theme="paper"]) .agc-reports-source, :root:not([data-theme="paper"]) .agc-learning-record, :root:not([data-theme="paper"]) .agc-learning-observations { background: var(--sg-surface-2); border-color: var(--sg-border); color: var(--sg-text); }
:root:not([data-theme="paper"]) .agc-operations .agc-operations-src, :root:not([data-theme="paper"]) .agc-operations .agc-operations-unknown, :root:not([data-theme="paper"]) .agc-meetings-value.agc-meetings-missing, :root:not([data-theme="paper"]) .agc-meetings-source, :root:not([data-theme="paper"]) .agc-meetings-avail, :root:not([data-theme="paper"]) .agc-meetings-nocompare, :root:not([data-theme="paper"]) .agc-performance-note, :root:not([data-theme="paper"]) .agc-performance-when, :root:not([data-theme="paper"]) .agc-performance-age, :root:not([data-theme="paper"]) .agc-performance-metric dt, :root:not([data-theme="paper"]) .agc-performance-metric dd.agc-performance-missing, :root:not([data-theme="paper"]) .agc-recs-state-help, :root:not([data-theme="paper"]) .agc-recs-field dt, :root:not([data-theme="paper"]) .agc-recs-missing, :root:not([data-theme="paper"]) .agc-recs-note, :root:not([data-theme="paper"]) .agc-reports-reason, :root:not([data-theme="paper"]) .agc-reports-note, :root:not([data-theme="paper"]) .agc-reports-value.agc-reports-missing, :root:not([data-theme="paper"]) .agc-reports-change, :root:not([data-theme="paper"]) .agc-learning-step[data-state="pending"] { color: var(--sg-text-muted); }
:root:not([data-theme="paper"]) .agc-meetings-caveat, :root:not([data-theme="paper"]) .agc-performance-caveat, :root:not([data-theme="paper"]) .agc-recs-caveat, :root:not([data-theme="paper"]) .agc-reports-caveat, :root:not([data-theme="paper"]) .agc-learning-caveat { background: var(--sg-warning-soft); color: var(--sg-text); border-left: var(--sg-bar-w) solid var(--sg-warning); }
:root:not([data-theme="paper"]) .agc-meetings-mode { background: var(--sg-warning-soft); color: var(--sg-warning); border-color: var(--sg-warning); }
:root:not([data-theme="paper"]) .agc-meetings-mode[data-mode="LIVE"] { background: var(--sg-success-soft); color: var(--sg-success); border-color: var(--sg-success); }
:root:not([data-theme="paper"]) .agc-performance-more, :root:not([data-theme="paper"]) .agc-performance-readings-btn, :root:not([data-theme="paper"]) .agc-recs-more, :root:not([data-theme="paper"]) .agc-reports-day-btn, :root:not([data-theme="paper"]) .agc-reports-more, :root:not([data-theme="paper"]) .agc-reports-source-btn, :root:not([data-theme="paper"]) .agc-meetings button:not(.agc-meetings-start), :root:not([data-theme="paper"]) .agc-meetings input, :root:not([data-theme="paper"]) .agc-meetings textarea, :root:not([data-theme="paper"]) .agc-meetings select { background: var(--sg-surface); color: var(--sg-text); border: var(--sg-hair) solid var(--sg-border-strong); border-radius: var(--sg-radius-m); color-scheme: dark; }
:root:not([data-theme="paper"]) .agc-meetings input, :root:not([data-theme="paper"]) .agc-meetings textarea, :root:not([data-theme="paper"]) .agc-meetings button:not(.agc-meetings-start) { min-height: var(--sg-tap); padding: var(--sg-space-2) var(--sg-space-3); font: inherit; }
:root:not([data-theme="paper"]) .agc-meetings-start { background: var(--sg-accent); color: var(--sg-accent-text); border-color: var(--sg-accent); }
:root:not([data-theme="paper"]) .agc-meetings-start:hover { background: var(--sg-link); }
:root:not([data-theme="paper"]) .agc-recs-badge { background: var(--sg-surface); color: var(--sg-text); border-color: var(--sg-border-strong); }
:root:not([data-theme="paper"]) .agc-recs-badge[data-state="confirmed_decision"] { background: var(--sg-info-soft); }
:root:not([data-theme="paper"]) .agc-recs-badge[data-state="dispatched"] { background: var(--sg-warning-soft); }
:root:not([data-theme="paper"]) .agc-recs-badge[data-state="effect_verified"] { background: var(--sg-success-soft); }
:root:not([data-theme="paper"]) .agc-recs-badge[data-state="measured"] { background: var(--sg-accent); color: var(--sg-accent-text); }
:root:not([data-theme="paper"]) .agc-operations .agc-operations-state, :root:not([data-theme="paper"]) .agc-operations .agc-operations-state-unverified, :root:not([data-theme="paper"]) .agc-operations .agc-operations-state-not_claimed { background: var(--sg-neutral-soft); color: var(--sg-text); }
:root:not([data-theme="paper"]) .agc-operations .agc-operations-state-failed, :root:not([data-theme="paper"]) .agc-operations .agc-operations-state-blocked { background: var(--sg-danger-soft); color: var(--sg-danger); }
:root:not([data-theme="paper"]) .agc-operations .agc-operations-state-verified, :root:not([data-theme="paper"]) .agc-operations .agc-operations-state-effect_verified { background: var(--sg-success-soft); color: var(--sg-success); }
:root:not([data-theme="paper"]) .agc-operations th, :root:not([data-theme="paper"]) .agc-operations td, :root:not([data-theme="paper"]) .agc-performance-formats-table th, :root:not([data-theme="paper"]) .agc-performance-formats-table td { border-bottom-color: var(--sg-border); }
:root:not([data-theme="paper"]) .agc-performance-reading { border-top-color: var(--sg-border); }
:root:not([data-theme="paper"]) .agc-learning-count, :root:not([data-theme="paper"]) .agc-learning-record, :root:not([data-theme="paper"]) .agc-learning-observations { border-color: var(--sg-border-strong); }
:root:not([data-theme="paper"]) .agc-learning-badge, :root:not([data-theme="paper"]) .agc-learning-badge[data-class="retired"] { background: var(--sg-neutral-soft); color: var(--sg-text); }
:root:not([data-theme="paper"]) .agc-learning-badge[data-class="owner_preference"] { background: var(--sg-info-soft); }
:root:not([data-theme="paper"]) .agc-learning-badge[data-class="hypothesis"] { background: var(--sg-accent-soft); }
:root:not([data-theme="paper"]) .agc-learning-badge[data-class="signal"] { background: var(--sg-warning-soft); border-color: var(--sg-warning); }
:root:not([data-theme="paper"]) .agc-learning-badge[data-class="lesson"], :root:not([data-theme="paper"]) .agc-learning-count[data-class="lesson"] { background: var(--sg-success-soft); border-color: var(--sg-success); }
:root:not([data-theme="paper"]) .agc-learning-flag { color: var(--sg-warning); }
:root:not([data-theme="paper"]) .agc-learning-step[data-state="unavailable"] { color: var(--sg-danger); }
:root:not([data-theme="paper"]) .agc-learning-step-link, :root:not([data-theme="paper"]) .agc-performance-link { color: var(--sg-link); }

/* ---- maya-avatar.css ---- */
/* Maya's animated character. Colours are Sunset Grove navy #143860 and gold #bb9668 with an electric-blue rim light #5b9dff. */
.maya-av { --maya-px: 96px; display: inline-block; position: relative; width: var(--maya-px); height: var(--maya-px); line-height: 0; vertical-align: middle; }
.maya-av--sm { --maya-px: 40px; }
.maya-av--md { --maya-px: 96px; }
.maya-av--lg { --maya-px: 180px; }
.maya-av__pic { display: block; width: 100%; height: 100%; }
.maya-av__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.maya-av__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.maya-av__all, .maya-av__head, .maya-av__body, .maya-av__eye, .maya-av__hand, .maya-av__mouth, .maya-av__dot, .maya-av__bubble, .maya-av__waves, .maya-av__led, .maya-av__glow, .maya-av__eyes { transition: transform .35s ease, opacity .35s ease; }
.maya-av__eye { transform-box: fill-box; transform-origin: center; }
.maya-av__head { transform-origin: 100px 128px; }
.maya-av__body { transform-origin: 100px 190px; }
.maya-av__mouth { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scaleY(.2); }
.maya-av__bubble { opacity: 0; transform: translateY(6px) scale(.8); transform-box: fill-box; transform-origin: 10% 100%; }
.maya-av__waves { opacity: 0; }
.maya-av__glow { opacity: 0; }
.maya-av__led { opacity: .75; }
.maya-av__hand { transform-box: fill-box; transform-origin: center; }
.maya-av.is-blink .maya-av__eye { transform: scaleY(.08); transition-duration: .06s; }

/* idle: gentle breathing */
.maya-av[data-state="idle"] .maya-av__body { animation: maya-breathe 4.2s ease-in-out infinite; }
.maya-av[data-state="idle"] .maya-av__head { animation: maya-head-idle 4.2s ease-in-out infinite; }
.maya-av[data-state="idle"] .maya-av__led { animation: maya-led-soft 3.2s ease-in-out infinite; }

/* listening: head tilt, headphone light pulses, sound arcs */
.maya-av[data-state="listening"] .maya-av__head { transform: rotate(-6deg) translateX(-1px); }
.maya-av[data-state="listening"] .maya-av__body { animation: maya-breathe 4.2s ease-in-out infinite; }
.maya-av[data-state="listening"] .maya-av__led { animation: maya-led-pulse 1s ease-in-out infinite; }
.maya-av[data-state="listening"] .maya-av__waves { opacity: 1; animation: maya-waves 1.4s ease-in-out infinite; }

/* typing: hands tap, three-dot bubble, eyes look down */
.maya-av[data-state="typing"] .maya-av__head { transform: rotate(2deg) translateY(2px); }
.maya-av[data-state="typing"] .maya-av__eyes { transform: translateY(2px); }
.maya-av[data-state="typing"] .maya-av__hand--l { animation: maya-tap .34s ease-in-out infinite; }
.maya-av[data-state="typing"] .maya-av__hand--r { animation: maya-tap .34s ease-in-out .17s infinite; }
.maya-av[data-state="typing"] .maya-av__bubble { opacity: 1; transform: none; }
.maya-av[data-state="typing"] .maya-av__dot { animation: maya-dot 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.maya-av[data-state="typing"] .maya-av__dot:nth-child(2) { animation-delay: .15s; }
.maya-av[data-state="typing"] .maya-av__dot:nth-child(3) { animation-delay: .3s; }
.maya-av[data-state="typing"] .maya-av__led { animation: maya-led-soft 1.2s ease-in-out infinite; }

/* speaking: mouth animates, soft glow */
.maya-av[data-state="speaking"] .maya-av__smile { opacity: 0; }
.maya-av[data-state="speaking"] .maya-av__mouth { opacity: 1; animation: maya-talk .62s ease-in-out infinite; }
.maya-av[data-state="speaking"] .maya-av__glow { opacity: .9; animation: maya-glow 1.8s ease-in-out infinite; }
.maya-av[data-state="speaking"] .maya-av__body { animation: maya-breathe 3s ease-in-out infinite; }
.maya-av[data-state="speaking"] .maya-av__head { animation: maya-nod 2.4s ease-in-out infinite; }
.maya-av[data-state="speaking"] .maya-av__led { opacity: 1; }

/* offline: desaturated and still */
.maya-av[data-state="offline"] .maya-av__all { filter: grayscale(1) brightness(.75); opacity: .6; }
.maya-av[data-state="offline"] .maya-av__eye { transform: scaleY(.25); }
.maya-av[data-state="offline"] .maya-av__head { transform: rotate(3deg) translateY(2px); }
.maya-av[data-state="offline"] .maya-av__led { opacity: .15; }

@keyframes maya-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(1.6px) scale(1.008); } }
@keyframes maya-head-idle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(1.2px) rotate(.6deg); } }
@keyframes maya-nod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(1.4deg) translateY(1px); } 65% { transform: rotate(-1.2deg); } }
@keyframes maya-led-soft { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes maya-led-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes maya-waves { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes maya-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.2px); } }
@keyframes maya-dot { 0%, 100% { transform: translateY(0); opacity: .55; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes maya-talk { 0%, 100% { transform: scaleY(.25); } 20% { transform: scaleY(1); } 45% { transform: scaleY(.45); } 70% { transform: scaleY(.9); } }
@keyframes maya-glow { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }

@media (prefers-reduced-motion: reduce) {
  .maya-av *, .maya-av { animation: none !important; transition: none !important; }
  .maya-av.is-blink .maya-av__eye { transform: none !important; }
  .maya-av[data-state="speaking"] .maya-av__mouth { transform: scaleY(.6) !important; }
}
/* Oct 16 (Roman: "make Maya more 3D, live"): depth without a new model. A perspective sway, a lit rim, a floor shadow and a soft
   parallax on the head make the flat character read as a figure in space. Honours reduced motion. */
.maya-av { perspective: 420px; }
.maya-av__svg { transform-style: preserve-3d; animation: maya-3d-sway 7s ease-in-out infinite; filter: drop-shadow(0 calc(var(--maya-px) * .06) calc(var(--maya-px) * .08) rgba(4, 10, 24, .55)) drop-shadow(0 0 calc(var(--maya-px) * .05) rgba(91, 157, 255, .35)); }
.maya-av::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -4%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(4, 10, 24, .55), transparent); animation: maya-3d-floor 7s ease-in-out infinite; pointer-events: none; }
.maya-av:hover .maya-av__svg { animation-duration: 3.5s; }
@keyframes maya-3d-sway { 0%, 100% { transform: rotateY(-9deg) rotateX(3deg) translateZ(0); } 50% { transform: rotateY(9deg) rotateX(-2deg) translateZ(6px); } }
@keyframes maya-3d-floor { 0%, 100% { transform: scaleX(1); opacity: .8; } 50% { transform: scaleX(.86); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .maya-av__svg, .maya-av::after { animation: none; } }
/* Oct 16: rendered 3D portrait replaces the SVG once deployed; states show as a ring and motion, never colour alone (the live region still speaks). */
.maya-av.maya-av--render .maya-av__svg, .maya-comp__btn .maya-av--render .maya-av__svg { display: none; }
.maya-av__render { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--sg-border-strong, #2a3d66); animation: maya-breathe 4.5s ease-in-out infinite; }
.maya-av--render::after { display: none; }
.maya-av--render[data-state="typing"] .maya-av__render, .maya-av--render[data-state="listening"] .maya-av__render { box-shadow: 0 0 0 2px #5b9dff, 0 0 calc(var(--maya-px) * .18) rgba(91, 157, 255, .6); animation: maya-breathe 1.6s ease-in-out infinite; }
.maya-av--render[data-state="speaking"] .maya-av__render { box-shadow: 0 0 0 2px #bb9668, 0 0 calc(var(--maya-px) * .16) rgba(187, 150, 104, .55); }
.maya-av--render[data-state="offline"] .maya-av__render { filter: grayscale(.8); opacity: .7; }
/* Keep the selected portrait animated too; the hidden SVG cannot carry its motion. */
@keyframes maya-portrait-idle { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2px) rotate(1deg); } }
@keyframes maya-portrait-active { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.025); } }
.maya-av--render[data-state="idle"] .maya-av__render { animation: maya-portrait-idle 5s ease-in-out infinite; }
.maya-av--render[data-state="typing"] .maya-av__render,
.maya-av--render[data-state="listening"] .maya-av__render,
.maya-av--render[data-state="speaking"] .maya-av__render { animation: maya-portrait-active 1.6s ease-in-out infinite; }
.maya-av--render[data-state="offline"] .maya-av__render { animation: none; }
/* Match the state selector specificity so the owner's motion preference wins. */
@media (prefers-reduced-motion: reduce) { .maya-av--render[data-state] .maya-av__render { animation: none; } }

/* ---- maya-companion.css ---- */
/* Maya companion: a small living character fixed on every page except Chat (#507 #459). */
.maya-comp { position: fixed; right: 16px; bottom: 104px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.maya-comp[hidden] { display: none; }
.maya-comp__btn { pointer-events: auto; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; box-shadow: 0 6px 22px rgba(20, 60, 140, .45); transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
.maya-comp__btn:hover, .maya-comp__btn:focus-visible { box-shadow: 0 6px 28px rgba(91, 157, 255, .75); outline: none; }
.maya-comp__btn .maya-av { --maya-px: 100%; display: block; }
.maya-comp__btn .maya-av__svg { width: 100%; height: 100%; display: block; }
.maya-comp.is-scrolling .maya-comp__btn { transform: translateY(var(--maya-bob, 0px)) rotate(var(--maya-tilt, 0deg)); transition: none; }
.maya-comp__bubble { pointer-events: auto; max-width: 240px; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: rgba(14, 24, 48, .92); border: 1px solid rgba(91, 157, 255, .45); color: #eaf1ff; font-size: 13px; line-height: 1.35; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.maya-comp__bubble.is-on { opacity: 1; transform: none; }
.maya-comp__bubble[hidden] { display: none; }
@media (max-width: 720px) {
  .maya-comp { right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .maya-comp__btn { width: 72px; height: 72px; }
  .maya-comp__bubble { max-width: 200px; font-size: 12px; }
}
/* #546 (Oct 18): on a phone Maya is a 56px button that clears the bottom nav, sits under every sheet, drawer and full-screen panel,
   and never puts a speech bubble over the page (it covered the Home title). The page keeps room below its last card for her. */
@media (max-width: 760px) {
  .maya-comp { right: 12px; bottom: calc(var(--sg-bottomnav-h, 60px) + 16px + env(safe-area-inset-bottom, 0px)); z-index: calc(var(--sg-z-drawer, 40) - 2); }
  .maya-comp__btn { width: 56px; height: 56px; }
  .maya-comp__bubble { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .maya-comp__btn, .maya-comp__bubble { transition: none; }
  .maya-comp.is-scrolling .maya-comp__btn { transform: none; }
}

/* ---- studio.css ---- */
/* Posts (Oct 31 2026 audit; formerly Creative Studio, tickets 470, 552 and 605): the Muse look. One calm column per day, body type, quiet timestamps, no stat tiles.
   Uses ONLY the shared --sg-* tokens and the shared component classes; no colour, font or size is invented here.
   Desktop: the seven days side by side; the Post Room opens as an overlay on the right, so the grid never squeezes (B19). Under 760 px: one day per screen,
   paged sideways inside the grid (scroll snap) with a row of day buttons, and the page itself never scrolls sideways. */
.stu { display: flex; flex-direction: column; gap: var(--sg-space-4); font-family: var(--sg-font-body); color: var(--sg-text); min-width: 0; }
.stu-quiet { margin: 0; color: var(--sg-text-muted); font-size: var(--sg-fs-s); line-height: var(--sg-lh-body); }
.stu-note { padding: var(--sg-space-2) 0; }
.stu-select { min-height: var(--sg-tap); padding: 0 var(--sg-space-3); font: var(--sg-fw-medium) var(--sg-fs-s) var(--sg-font-body); color: var(--sg-text);
  background: var(--sg-surface); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); max-width: 100%; }

/* ---- header ---- */
.stu-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sg-space-3); min-width: 0; }
.stu-head__title { display: flex; flex-direction: column; gap: var(--sg-space-1); min-width: 0; }
.stu-title { margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-xl); line-height: var(--sg-lh-tight); }

/* ---- grid and Post Room ---- */
.stu-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-4); align-items: start; min-width: 0; }
.stu-gridhost { display: flex; flex-direction: column; gap: var(--sg-space-3); min-width: 0; }
@media (min-width: 1024px) {
  .stu-layout[data-room="closed"] .stu-room { display: none; }
  .stu-layout[data-room="open"] .stu-room { position: fixed; top: var(--sgx-top-h, 4rem); right: 0; bottom: 0; width: min(36rem, 92vw); z-index: var(--sg-z-sheet);
    padding: var(--sg-space-3); box-shadow: var(--sg-shadow-2); background: var(--sg-bg); }
  .stu-layout[data-room="open"] .stu-room > .pr { position: static; max-height: 100%; height: 100%; min-height: 0; }
}
.stu-room { min-width: 0; }

/* Ticket 658: a day floor of --sg-col-tile (12.5rem) made the row 1472 px in the 1136 px of a 1440 window, Saturday cut and Sunday off screen. */
.stu-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--sg-col-day), 1fr); gap: var(--sg-space-4); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom: var(--sg-space-2); min-width: 0; }
.stu-days:focus-visible { outline: var(--sg-line-w) solid var(--sg-focus-ring); outline-offset: var(--sg-line-w); }
.stu-day { display: flex; flex-direction: column; gap: var(--sg-space-3); min-width: 0; scroll-snap-align: start; padding-top: var(--sg-space-2); border-top: var(--sg-hair) solid var(--sg-border); }
.stu-day__name { margin: 0; font: var(--sg-fw-semibold) var(--sg-fs-m) var(--sg-font-body); line-height: var(--sg-lh-snug); }
.stu-day__empty { padding: var(--sg-space-3) 0; }
.stu-skel { height: 20rem; border-radius: var(--sg-radius-l); }

/* The day buttons show whenever the row cannot show all seven days (studio.js measures it), at any width: the way to reach a day off screen. */
.stu-pager { display: flex; gap: var(--sg-space-1); overflow-x: auto; }
.stu-pager[hidden] { display: none; }
.stu-pager__day { flex: 1 0 auto; min-height: var(--sg-tap); min-width: var(--sg-tap); padding: 0 var(--sg-space-2); font: var(--sg-fw-medium) var(--sg-fs-s) var(--sg-font-body);
  color: var(--sg-text); background: transparent; border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-pill); cursor: pointer; }
.stu-pager__day:focus-visible { outline: var(--sg-line-w) solid var(--sg-focus-ring); outline-offset: var(--sg-line-w); }

/* ---- the card ---- */
.stu-card { display: flex; flex-direction: column; background: var(--sg-surface); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-l); overflow: hidden; min-width: 0; }
.stu-card.is-needs { border-color: var(--sg-accent); }
.stu-card[aria-current] { box-shadow: 0 0 0 var(--sg-line-w) var(--sg-accent); }
.stu-card__media { cursor: pointer; }
.stu-card__openbtn { margin: 0 var(--sg-space-3) var(--sg-space-3); min-height: var(--sg-tap); }
.stu-card.is-self { border-color: var(--sg-state-failed); }
/* One status chip per card in the record's own words, plus a review chip only when lane 1's verdict is not independent (red Self-reviewed). */
.stu-chip { padding: var(--sg-space-half) var(--sg-space-2); font-size: var(--sg-fs-xs); border-radius: var(--sg-radius-pill); background: var(--sg-surface-2); color: var(--sg-text); }
.stu-chip[data-status="live"], .stu-chip[data-status="sent_unconfirmed"], .stu-chip[data-status="published"] { background: var(--sg-state-live-soft); color: var(--sg-state-live); }
.stu-chip[data-status="scheduled"], .stu-chip[data-status="queued"], .stu-chip[data-status="accepted"] { background: var(--sg-state-scheduled-soft); color: var(--sg-state-scheduled); }
.stu-chip[data-status="needs_you"] { background: var(--sg-accent-soft); color: var(--sg-text); font-weight: var(--sg-fw-semibold); }
.stu-chip[data-status="late"], .stu-chip[data-status="old_version_queued"] { background: var(--sg-warning-soft); color: var(--sg-warning); font-weight: var(--sg-fw-semibold); }
.stu-chip[data-status="pending"] { background: transparent; border: var(--sg-hair) solid var(--sg-border-strong); color: var(--sg-text-muted); }
.stu-chip[data-status="failed"], .stu-chip[data-status="held"], .stu-chip--self { background: var(--sg-state-failed-soft); color: var(--sg-state-failed); font-weight: var(--sg-fw-semibold); }
.stu-photos { display: flex; flex-direction: column; gap: var(--sg-space-3); padding-top: var(--sg-space-4); border-top: var(--sg-hair) solid var(--sg-border); }
.stu-photos__h { margin: 0; font: var(--sg-fw-semibold) var(--sg-fs-l) var(--sg-font-body); }
.stu-card__open { display: flex; flex-direction: column; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.stu-card__open:focus-visible { outline: var(--sg-line-w) solid var(--sg-focus-ring); outline-offset: calc(-1 * var(--sg-line-w)); }
.stu-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--sg-media-bg); display: flex; align-items: center; justify-content: center; }
.stu-card__media img, .stu-card__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.stu-card__none { padding: var(--sg-space-3); color: var(--sg-text-muted); font-size: var(--sg-fs-s); text-align: center; }
.stu-card__tag { position: absolute; left: var(--sg-space-2); bottom: var(--sg-space-2); padding: var(--sg-space-half) var(--sg-space-2); font-size: var(--sg-fs-xs);
  color: var(--sg-text); background: var(--sg-surface); border-radius: var(--sg-radius-pill); }
.stu-card__body { display: flex; flex-direction: column; gap: var(--sg-space-1); padding: var(--sg-space-3); font-size: var(--sg-fs-s); line-height: var(--sg-lh-snug); }
.stu-card__when strong { font-weight: var(--sg-fw-semibold); }
.stu-card__who { color: var(--sg-text-muted); }
.stu-card__stage { display: flex; flex-wrap: wrap; gap: var(--sg-space-1); margin-top: var(--sg-space-1); }
.stu-stage, .stu-needs { padding: var(--sg-space-half) var(--sg-space-2); font-size: var(--sg-fs-xs); border-radius: var(--sg-radius-pill); background: var(--sg-surface-2); color: var(--sg-text); }
.stu-stage[data-stage="confirmed_live"], .stu-stage[data-stage="published"], .stu-stage[data-stage="live"] { background: var(--sg-state-live-soft); color: var(--sg-state-live); }
.stu-stage[data-stage="scheduled"], .stu-stage[data-stage="accepted"], .stu-stage[data-stage="queued"] { background: var(--sg-state-scheduled-soft); color: var(--sg-state-scheduled); }
.stu-stage[data-stage="making"], .stu-stage[data-stage="made"], .stu-stage[data-stage="in_review"] { background: var(--sg-state-progress-soft); color: var(--sg-state-progress); }
.stu-stage[data-stage="rejected"], .stu-stage[data-stage="held"] { background: var(--sg-state-failed-soft); color: var(--sg-state-failed); }
.stu-needs { background: var(--sg-accent-soft); }
.stu-request { background: var(--sg-warning-soft); color: var(--sg-warning); font-weight: 600; }
.stu-act.is-dimmed { opacity: 0.5; }
.stu-card__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-1); padding: 0 var(--sg-space-2) var(--sg-space-3); }
.stu-act { min-height: var(--sg-tap); min-width: 0; padding-left: var(--sg-space-1); padding-right: var(--sg-space-1); font-size: var(--sg-fs-s); }
.stu-card__result { margin: 0; padding: 0 var(--sg-space-3) var(--sg-space-3); color: var(--sg-text-muted); font-size: var(--sg-fs-xs); }
.stu-card__result:empty { display: none; }

@media (max-width: 759.98px) {
  .stu-days { grid-auto-columns: 100%; gap: var(--sg-space-3); }
}
@media (prefers-reduced-motion: reduce) { .stu-days { scroll-behavior: auto; } }
.stu-stale { margin: 0; padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-warning-soft); color: var(--sg-warning); font-size: var(--sg-fs-s); }

/* ---- today.css ---- */
/* Today (Oct 31 2026 audit): Needs you first, today and tomorrow, this week in one line, Ask Maya. Phone first: on a 390 px phone the first
   screen shows Needs you without scrolling. Uses ONLY the shared --sg-* tokens; no colour, font or size is invented here. */
.tdy { display: flex; flex-direction: column; gap: var(--sg-space-4); max-width: 44rem; font-family: var(--sg-font-body); color: var(--sg-text); min-width: 0; }
.tdy-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-3); }
.tdy-title { margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-xl); line-height: var(--sg-lh-tight); }
.tdy-info { flex: 0 0 auto; width: var(--sg-tap); height: var(--sg-tap); border-radius: 50%; border: var(--sg-hair) solid var(--sg-border); background: transparent;
  color: var(--sg-text-muted); font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); cursor: pointer; }
.tdy-info:focus-visible { outline: var(--sg-line-w) solid var(--sg-focus-ring); outline-offset: var(--sg-line-w); }
.tdy-info__text { margin-top: calc(-1 * var(--sg-space-2)); }
.tdy-quiet { margin: 0; color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.tdy-block { display: flex; flex-direction: column; gap: var(--sg-space-2); padding-top: var(--sg-space-3); border-top: var(--sg-hair) solid var(--sg-border); min-width: 0; }
.tdy-needs { border-top: 0; padding-top: 0; }
.tdy-h { margin: 0; font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-accent); }
.tdy-empty { margin: 0; font-size: var(--sg-fs-m); line-height: var(--sg-lh-body); }
.tdy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.tdy-need { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sg-space-2); padding: var(--sg-space-3);
  background: var(--sg-surface); border: var(--sg-hair) solid var(--sg-accent); border-radius: var(--sg-radius-l); }
.tdy-need__text { margin: 0; flex: 1 1 14rem; line-height: var(--sg-lh-body); overflow-wrap: anywhere; }
.tdy-need__btns { display: flex; gap: var(--sg-space-2); flex-wrap: wrap; }
.tdy-btn { min-height: var(--sg-tap); }
.tdy-fyi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-1); color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.tdy-day { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.tdy-day__h { margin: 0; font: var(--sg-fw-semibold) var(--sg-fs-s) var(--sg-font-body); color: var(--sg-text-muted); }
.tdy-post { display: flex; gap: var(--sg-space-3); align-items: center; padding: var(--sg-space-2); border-radius: var(--sg-radius-m); color: inherit; text-decoration: none;
  background: var(--sg-surface); border: var(--sg-hair) solid var(--sg-border); min-width: 0; }
.tdy-post:focus-visible { outline: var(--sg-line-w) solid var(--sg-focus-ring); outline-offset: var(--sg-line-w); }
.tdy-thumb { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: var(--sg-radius-m); object-fit: cover; background: var(--sg-media-bg); display: block; }
.tdy-post__body { display: flex; flex-direction: column; gap: var(--sg-space-half); min-width: 0; font-size: var(--sg-fs-s); }
.tdy-post__when { font-weight: var(--sg-fw-semibold); }
.tdy-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); }
.tdy-chip { padding: var(--sg-space-half) var(--sg-space-2); font-size: var(--sg-fs-xs); border-radius: var(--sg-radius-pill); background: var(--sg-surface-2); color: var(--sg-text); }
.tdy-chip[data-status="live"], .tdy-chip[data-status="published"] { background: var(--sg-state-live-soft); color: var(--sg-state-live); }
.tdy-chip[data-status="scheduled"] { background: var(--sg-state-scheduled-soft); color: var(--sg-state-scheduled); }
.tdy-chip[data-status="needs_you"] { background: var(--sg-accent-soft); font-weight: var(--sg-fw-semibold); }
.tdy-chip[data-status="late"], .tdy-chip[data-status="old_version_queued"] { background: var(--sg-warning-soft); color: var(--sg-warning); font-weight: var(--sg-fw-semibold); }
.tdy-chip[data-status="failed"], .tdy-chip[data-status="self"] { background: var(--sg-state-failed-soft); color: var(--sg-state-failed); font-weight: var(--sg-fw-semibold); }
.tdy-week { margin: 0; line-height: var(--sg-lh-body); }
.tdy-ask { display: flex; gap: var(--sg-space-2); padding-top: var(--sg-space-3); border-top: var(--sg-hair) solid var(--sg-border); }
.tdy-ask__input { flex: 1 1 auto; min-width: 0; min-height: var(--sg-tap); }
.tdy-partial { margin: 0; padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-warning-soft); color: var(--sg-warning); font-size: var(--sg-fs-s); }
.tdy-need__result { flex: 1 0 100%; margin: 0; color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.tdy-need__result:empty { display: none; }
.tdy-more { font-size: var(--sg-fs-s); }
.tdy-note { flex: 1 0 100%; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.tdy-note[hidden] { display: none; }
.tdy-note__text { width: 100%; box-sizing: border-box; min-height: calc(var(--sg-tap) * 2); }

/* ---- agc/performance.css ---- */
/* Performance view (#485). Every selector starts with .agc-performance so nothing leaks into the global dashboard styles.
   Mobile first: one column at 375px, two from 700px. Text never relies on colour alone. */
.agc-performance { font: var(--sg-fs-m)/1.45 var(--sg-font-body); color: var(--sg-text); max-width: 100%; box-sizing: border-box; }
.agc-performance *, .agc-performance *::before, .agc-performance *::after { box-sizing: inherit; }
.agc-performance-status { margin: 0 0 var(--sg-space-3); font-weight: 600; }
.agc-performance-compare { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); padding: var(--sg-space-3); margin-bottom: var(--sg-space-4); background: var(--sg-surface-2); }
.agc-performance-compare h3 { margin: 0 0 var(--sg-space-1); font-size: var(--sg-fs-l); }
.agc-performance-note { margin: 0 0 var(--sg-space-2); font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-performance-groups { margin: 0; padding-left: var(--sg-space-4); }
.agc-performance-cards { display: grid; grid-template-columns: 1fr; gap: var(--sg-space-3); }
.agc-performance-card { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); padding: var(--sg-space-3); background: var(--sg-surface); min-width: 0; overflow-wrap: anywhere; }
.agc-performance-title { margin: 0 0 var(--sg-space-1); font-size: var(--sg-fs-l); }
.agc-performance-when, .agc-performance-age { margin: 0 0 var(--sg-space-1); font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-performance-headline { margin: var(--sg-space-2) 0 var(--sg-space-1); font-weight: 600; }
.agc-performance-caption { margin: 0 0 var(--sg-space-2); font-size: var(--sg-fs-m); }
.agc-performance-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-2) var(--sg-space-3); margin: var(--sg-space-2) 0; }
.agc-performance-metric { margin: 0; min-width: 0; }
.agc-performance-metric dt { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-performance-metric dd { margin: 0; font-weight: 600; }
.agc-performance-metric dd.agc-performance-missing { font-weight: 400; font-style: italic; color: var(--sg-text-muted); }
.agc-performance-caveat { margin: var(--sg-space-1) 0; padding: var(--sg-space-2) var(--sg-space-2); border-left: var(--sg-bar-w) solid var(--sg-warning); background: var(--sg-warning-soft); font-size: var(--sg-fs-s); }
.agc-performance-links { display: flex; flex-wrap: wrap; gap: var(--sg-space-2) var(--sg-space-4); margin: var(--sg-space-2) 0 0; }
.agc-performance-link { color: var(--sg-link); text-decoration: underline; min-height: var(--sg-tap); display: inline-flex; align-items: center; }
.agc-performance-more { min-height: var(--sg-tap); margin-top: var(--sg-space-3); padding: 0 var(--sg-space-4); font: inherit; border: var(--sg-hair) solid var(--sg-text); border-radius: var(--sg-radius-m); background: var(--sg-surface); cursor: pointer; }
.agc-performance-more:focus-visible, .agc-performance-link:focus-visible { outline: var(--sg-bar-w) solid var(--sg-link); outline-offset: var(--sg-line-w); }
@media (min-width: 700px) { .agc-performance-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.agc-performance-formats { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); padding: var(--sg-space-3); margin-bottom: var(--sg-space-4); background: var(--sg-surface-2); }
.agc-performance-formats h3 { margin: 0 0 var(--sg-space-2); font-size: var(--sg-fs-l); }
.agc-performance-formats-scroll { overflow-x: auto; max-width: 100%; }
.agc-performance-formats-table { border-collapse: collapse; min-width: 20rem; width: 100%; font-size: var(--sg-fs-s); }
.agc-performance-formats-table th, .agc-performance-formats-table td { text-align: left; padding: var(--sg-space-2) var(--sg-space-2); border-bottom: var(--sg-hair) solid var(--sg-border); }
.agc-performance-formats-ig-fb { margin: var(--sg-space-2) 0 0; font-size: var(--sg-fs-s); }
.agc-performance-readings { margin: var(--sg-space-2) 0; }
.agc-performance-readings-btn { min-height: var(--sg-tap); padding: 0 var(--sg-space-4); font: inherit; border: var(--sg-hair) solid var(--sg-text); border-radius: var(--sg-radius-m); background: var(--sg-surface); cursor: pointer; }
.agc-performance-readings-btn:focus-visible { outline: var(--sg-bar-w) solid var(--sg-link); outline-offset: var(--sg-line-w); }
.agc-performance-reading-list { margin: var(--sg-space-2) 0 0; padding: 0; list-style: none; }
.agc-performance-reading { display: flex; flex-wrap: wrap; gap: var(--sg-space-half) var(--sg-space-3); padding: var(--sg-space-2) 0; border-top: var(--sg-hair) solid var(--sg-border); font-size: var(--sg-fs-s); }
.agc-performance-reading strong { flex: 1 0 100%; }

/* ---- agc/learning.css ---- */
/* Scoped styles for the learning view (#486). Every selector starts with .agc-learning; nothing global is touched. */
.agc-learning { font: var(--sg-fs-m)/1.5 var(--sg-font-body); max-width: 53.75rem; }
.agc-learning-head { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); align-items: baseline; }
.agc-learning-counts { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); margin: var(--sg-space-2) 0 var(--sg-space-4); padding: 0; list-style: none; }
.agc-learning-count { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); padding: var(--sg-space-1) var(--sg-space-3); }
.agc-learning-count[data-class="lesson"] { border-color: var(--sg-success); }
.agc-learning-count[data-class="signal"] { border-style: dashed; }
.agc-learning-record { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); padding: var(--sg-space-3); margin: var(--sg-space-3) 0; }
.agc-learning-record[data-class="signal"] { border-style: dashed; }
.agc-learning-badge { font-size: var(--sg-fs-xs); text-transform: uppercase; letter-spacing: .04em; border-radius: var(--sg-radius-s); padding: var(--sg-space-half) var(--sg-space-2); background: var(--sg-neutral-soft); }
.agc-learning-flag { font-size: var(--sg-fs-xs); margin-left: var(--sg-space-2); color: var(--sg-warning); }
.agc-learning-loop { margin: var(--sg-space-2) 0 0; padding-left: var(--sg-space-4); font-size: var(--sg-fs-s); }
.agc-learning-step[data-state="pending"] { color: var(--sg-text-muted); }
.agc-learning-step[data-state="unavailable"] { color: var(--sg-danger); }
.agc-learning-caveat { background: var(--sg-warning-soft); border-radius: var(--sg-radius-m); padding: var(--sg-space-2) var(--sg-space-3); margin: var(--sg-space-2) 0; font-size: var(--sg-fs-s); }
.agc-learning-badge[data-class="owner_preference"] { background: var(--sg-info-soft); }
.agc-learning-badge[data-class="hypothesis"] { background: var(--sg-state-pending-soft); }
.agc-learning-badge[data-class="signal"] { background: var(--sg-warning-soft); border: var(--sg-hair) dashed var(--sg-warning); }
.agc-learning-badge[data-class="lesson"] { background: var(--sg-success-soft); border: var(--sg-hair) solid var(--sg-success); }
.agc-learning-badge[data-class="retired"] { background: var(--sg-neutral-soft); color: var(--sg-text-muted); text-decoration: line-through; }
.agc-learning-loop { list-style: none; padding-left: 0; }
.agc-learning-step { border-left: var(--sg-bar-w) solid var(--sg-border-strong); padding: var(--sg-space-half) var(--sg-space-2); margin: var(--sg-space-1) 0; overflow-wrap: anywhere; }
.agc-learning-step[data-state="done"] { border-left-color: var(--sg-success); }
.agc-learning-step[data-state="pending"] { border-left-color: var(--sg-border-strong); }
.agc-learning-step[data-state="unavailable"] { border-left-color: var(--sg-danger); }
.agc-learning-step-link { color: var(--sg-link); }
.agc-learning-step-link:focus-visible { outline: var(--sg-bar-w) solid var(--sg-link); outline-offset: var(--sg-line-w); }
.agc-learning-record { overflow-wrap: anywhere; }
.agc-learning-observations { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); padding: var(--sg-space-2) var(--sg-space-3); margin: var(--sg-space-3) 0; }
.agc-learning-observations h3 { margin: 0 0 var(--sg-space-2); font-size: var(--sg-fs-m); }
.agc-learning-obs-list { margin: 0 0 var(--sg-space-2); padding-left: var(--sg-space-4); }
@media (max-width: 480px) { .agc-learning { font-size: var(--sg-fs-s); } }

/* ---- agc/operations.css ---- */
/* Operations view (#489). Every selector is prefixed .agc-operations so nothing leaks into B's shell or global styles. */
.agc-operations { font: var(--sg-fs-m)/1.45 var(--sg-font-body); color: var(--sg-text); }
.agc-operations .agc-operations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sg-space-3); }
.agc-operations .agc-operations-card { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); padding: var(--sg-space-3); background: var(--sg-surface); }
.agc-operations .agc-operations-card h3 { margin: 0 0 var(--sg-space-2); font-size: var(--sg-fs-s); }
.agc-operations .agc-operations-src { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); margin-top: var(--sg-space-2); }
.agc-operations .agc-operations-state { display: inline-block; padding: var(--sg-hair) var(--sg-space-2); border-radius: var(--sg-radius-m); font-size: var(--sg-fs-xs); background: var(--sg-neutral-soft); }
.agc-operations .agc-operations-state-failed, .agc-operations .agc-operations-state-blocked { background: var(--sg-danger-soft); color: var(--sg-danger); }
.agc-operations .agc-operations-state-effect_verified { background: var(--sg-success-soft); color: var(--sg-success); }
.agc-operations .agc-operations-unknown { color: var(--sg-text-muted); font-style: italic; }
.agc-operations table { border-collapse: collapse; width: 100%; }
.agc-operations th, .agc-operations td { border-bottom: var(--sg-hair) solid var(--sg-border); padding: var(--sg-space-1) var(--sg-space-2); text-align: left; vertical-align: top; }
.agc-operations .agc-operations-more { margin-top: var(--sg-space-2); }
/* Claude B integration, Oct 15: the five-column Costs table pushed the page to 1257px at 1024 wide. A card holding a table spans the row,
   and long cells (source and read time) wrap instead of widening the page. */
.agc-operations .agc-operations-card { min-width: 0; }
.agc-operations .agc-operations-card:has(table) { grid-column: 1 / -1; }
.agc-operations td { overflow-wrap: anywhere; }
/* D2 (#489): lifecycle expanders, capability matrix, cost panel. */
.agc-operations .agc-operations-toggle { font: inherit; font-size: var(--sg-fs-xs); min-height: 2rem; padding: var(--sg-space-half) var(--sg-space-3); margin-left: var(--sg-space-1); cursor: pointer; }
.agc-operations .agc-operations-toggle:focus-visible { outline: var(--sg-line-w) solid var(--sg-link); outline-offset: var(--sg-line-w); }
.agc-operations .agc-operations-life-panel, .agc-operations .agc-operations-details { margin: var(--sg-space-2) 0 var(--sg-space-2) var(--sg-space-3); font-size: var(--sg-fs-s); overflow-wrap: anywhere; }
.agc-operations .agc-operations-life { margin: 0; padding-left: var(--sg-space-4); }
.agc-operations .agc-operations-scroll { overflow-x: auto; max-width: 100%; }
.agc-operations .agc-operations-card h4 { margin: var(--sg-space-3) 0 var(--sg-space-1); font-size: var(--sg-fs-s); }
.agc-operations .agc-operations-state-verified { background: var(--sg-success-soft); color: var(--sg-success); }
.agc-operations .agc-operations-state-unverified, .agc-operations .agc-operations-state-not_claimed { background: var(--sg-neutral-soft); color: var(--sg-text-muted); }

/* ---- agc/reports.css ---- */
/* Reports view (#484). Every selector starts with .agc-reports so nothing leaks into the global dashboard styles.
   Mobile first: one column at 375px, two from 700px. Meaning never relies on colour alone. */
.agc-reports { font: var(--sg-fs-m)/1.45 var(--sg-font-body); color: var(--sg-text); max-width: 100%; box-sizing: border-box; }
.agc-reports *, .agc-reports *::before, .agc-reports *::after { box-sizing: inherit; }
.agc-reports-status { margin: 0 0 var(--sg-space-3); font-weight: 600; }
.agc-reports-list { list-style: none; margin: 0 0 var(--sg-space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.agc-reports-day { display: flex; flex-direction: column; min-width: 0; }
.agc-reports-day-btn, .agc-reports-more, .agc-reports-source-btn { min-height: var(--sg-tap); padding: 0 var(--sg-space-3); font: inherit; border: var(--sg-hair) solid var(--sg-text); border-radius: var(--sg-radius-m); background: var(--sg-surface); cursor: pointer; }
.agc-reports-reason { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-reports-heading { margin: var(--sg-space-2) 0; font-size: var(--sg-fs-l); }
.agc-reports-headline { margin: 0 0 var(--sg-space-2); font-weight: 600; }
.agc-reports-note { margin: 0 0 var(--sg-space-3); font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-reports-group { margin-bottom: var(--sg-space-4); }
.agc-reports-group-title { margin: 0 0 var(--sg-space-2); font-size: var(--sg-fs-m); }
.agc-reports-tiles { display: grid; grid-template-columns: 1fr; gap: var(--sg-space-3); }
.agc-reports-tile { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); padding: var(--sg-space-3); background: var(--sg-surface); min-width: 0; overflow-wrap: anywhere; }
.agc-reports-tile-title { margin: 0 0 var(--sg-space-1); font-size: var(--sg-fs-m); }
.agc-reports-value { margin: 0 0 var(--sg-space-1); font-size: var(--sg-fs-xl); font-weight: 700; }
.agc-reports-value.agc-reports-missing { font-size: var(--sg-fs-m); font-weight: 400; font-style: italic; color: var(--sg-text-muted); }
.agc-reports-change { margin: 0 0 var(--sg-space-1); font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-reports-flag { margin: var(--sg-space-1) 0; font-weight: 600; font-size: var(--sg-fs-s); }
.agc-reports-caveat { margin: var(--sg-space-1) 0; padding: var(--sg-space-2) var(--sg-space-2); border-left: var(--sg-bar-w) solid var(--sg-warning); background: var(--sg-warning-soft); font-size: var(--sg-fs-s); }
.agc-reports-source { margin-top: var(--sg-space-2); padding: var(--sg-space-2); background: var(--sg-surface-2); border-radius: var(--sg-radius-s); font-size: var(--sg-fs-s); }
.agc-reports-source p { margin: 0 0 var(--sg-space-1); }
.agc-reports-day-btn:focus-visible, .agc-reports-more:focus-visible, .agc-reports-source-btn:focus-visible, .agc-reports-heading:focus-visible { outline: var(--sg-bar-w) solid var(--sg-link); outline-offset: var(--sg-line-w); }
@media (min-width: 700px) { .agc-reports-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- agc/recommendations.css ---- */
/* Recommendations view (#487). Every selector starts with .agc-recs. Mobile first: one column at 375px, two from 700px.
   The state badge always carries its word, so meaning never rests on colour. */
.agc-recs { font: var(--sg-fs-m)/1.45 var(--sg-font-body); color: var(--sg-text); max-width: 100%; box-sizing: border-box; }
.agc-recs *, .agc-recs *::before, .agc-recs *::after { box-sizing: inherit; }
.agc-recs-status { margin: 0 0 var(--sg-space-2); font-weight: 600; }
.agc-recs-counts { list-style: none; margin: 0 0 var(--sg-space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sg-space-2) var(--sg-space-3); font-size: var(--sg-fs-s); }
.agc-recs-list { display: grid; grid-template-columns: 1fr; gap: var(--sg-space-3); }
.agc-recs-card { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); padding: var(--sg-space-3); background: var(--sg-surface); min-width: 0; overflow-wrap: anywhere; }
.agc-recs-top { margin: 0 0 var(--sg-space-1); }
.agc-recs-badge { display: inline-block; padding: var(--sg-space-half) var(--sg-space-3); border-radius: var(--sg-radius-pill); font-size: var(--sg-fs-s); font-weight: 700; border: var(--sg-line-w) solid var(--sg-text); background: var(--sg-surface); }
.agc-recs-badge[data-state="suggested"] { border-style: dashed; }
.agc-recs-badge[data-state="confirmed_decision"] { background: var(--sg-info-soft); }
.agc-recs-badge[data-state="dispatched"] { background: var(--sg-warning-soft); }
.agc-recs-badge[data-state="effect_verified"] { background: var(--sg-success-soft); }
.agc-recs-badge[data-state="measured"] { background: var(--sg-text); color: var(--sg-accent-text); }
.agc-recs-state-help { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-recs-action { margin: var(--sg-space-1) 0 var(--sg-space-2); font-size: var(--sg-fs-m); }
.agc-recs-fields { margin: 0 0 var(--sg-space-2); }
.agc-recs-field { margin: 0 0 var(--sg-space-2); }
.agc-recs-field dt { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-recs-field dd { margin: 0; }
.agc-recs-missing { font-style: italic; color: var(--sg-text-muted); }
.agc-recs-sub { margin: var(--sg-space-2) 0 var(--sg-space-1); font-size: var(--sg-fs-s); }
.agc-recs-evidence { margin: 0 0 var(--sg-space-2); padding-left: var(--sg-space-4); font-size: var(--sg-fs-s); }
.agc-recs-caveat { margin: var(--sg-space-1) 0; padding: var(--sg-space-2) var(--sg-space-2); border-left: var(--sg-bar-w) solid var(--sg-warning); background: var(--sg-warning-soft); font-size: var(--sg-fs-s); }
.agc-recs-note { margin: var(--sg-space-1) 0; font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-recs-more { min-height: var(--sg-tap); margin-top: var(--sg-space-3); padding: 0 var(--sg-space-4); font: inherit; border: var(--sg-hair) solid var(--sg-text); border-radius: var(--sg-radius-m); background: var(--sg-surface); cursor: pointer; }
.agc-recs-more:focus-visible { outline: var(--sg-bar-w) solid var(--sg-link); outline-offset: var(--sg-line-w); }
@media (min-width: 700px) { .agc-recs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- agc/meetings.css ---- */
/* Meetings view (#488). Every selector starts with .agc-meetings. Mobile first, single column at 375px. */
.agc-meetings { font: var(--sg-fs-m)/1.45 var(--sg-font-body); color: var(--sg-text); max-width: 100%; box-sizing: border-box; }
.agc-meetings *, .agc-meetings *::before, .agc-meetings *::after { box-sizing: inherit; }
.agc-meetings-mode { display: inline-block; margin: 0 0 var(--sg-space-2); padding: var(--sg-space-2) var(--sg-space-4); border: var(--sg-bar-w) solid var(--sg-warning); border-radius: var(--sg-radius-s); background: var(--sg-warning-soft); font-size: var(--sg-fs-xl); font-weight: 800; letter-spacing: .08em; }
.agc-meetings-mode[data-mode="LIVE"] { border-color: var(--sg-success); background: var(--sg-success-soft); }
.agc-meetings-preview-note { margin: 0 0 var(--sg-space-3); font-weight: 600; }
.agc-meetings-heading { margin: 0 0 var(--sg-space-2); font-size: var(--sg-fs-l); }
.agc-meetings-agenda { margin: 0 0 var(--sg-space-4); padding-left: var(--sg-space-5); }
.agc-meetings-item { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); padding: var(--sg-space-3); margin-bottom: var(--sg-space-3); background: var(--sg-surface); min-width: 0; overflow-wrap: anywhere; }
.agc-meetings-item-title { margin: 0 0 var(--sg-space-1); font-size: var(--sg-fs-m); }
.agc-meetings-value { margin: 0 0 var(--sg-space-1); font-size: var(--sg-fs-xl); font-weight: 700; }
.agc-meetings-value.agc-meetings-missing { font-size: var(--sg-fs-m); font-weight: 400; font-style: italic; color: var(--sg-text-muted); }
.agc-meetings-experiments { margin: 0 0 var(--sg-space-2); padding-left: var(--sg-space-4); font-size: var(--sg-fs-s); }
.agc-meetings-flag { margin: var(--sg-space-1) 0; font-weight: 600; font-size: var(--sg-fs-s); }
.agc-meetings-caveat { margin: var(--sg-space-1) 0; padding: var(--sg-space-2) var(--sg-space-2); border-left: var(--sg-bar-w) solid var(--sg-warning); background: var(--sg-warning-soft); font-size: var(--sg-fs-s); }
.agc-meetings-source { margin: var(--sg-space-1) 0 0; font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-meetings-avail { margin: var(--sg-space-1) 0 0; font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.agc-meetings-compare { margin: var(--sg-space-1) 0; font-size: var(--sg-fs-s); font-weight: 600; }
.agc-meetings-nocompare { color: var(--sg-text-muted); }
.agc-meetings-item[data-availability="unavailable"], .agc-meetings-item[data-availability="error"] { border-style: dashed; }
.agc-meetings-start { display: block; margin: 0 0 var(--sg-space-2); min-height: var(--sg-tap); padding: var(--sg-space-3) var(--sg-space-4); border: var(--sg-line-w) solid var(--sg-text); border-radius: var(--sg-radius-s); background: var(--sg-text); color: var(--sg-accent-text); font: inherit; font-weight: 700; cursor: pointer; }
.agc-meetings-start:hover { background: var(--sg-accent-soft); }
.agc-meetings-start:focus-visible { outline: var(--sg-bar-w) solid var(--sg-warning); outline-offset: var(--sg-line-w); }
.agc-meetings-unsaved { margin: 0 0 var(--sg-space-4); font-size: var(--sg-fs-s); font-weight: 600; }

/* ---- agc/results.css ---- */
/* Results and Operations (#913). Every selector starts with .agc-res or .agc-ops, except the one period-toggle fix at the end.
   Mobile first: one column at 390 px; the three numbers and the two posts sit side by side from 700 px. Status is a word, never colour alone. */
.agc-res, .agc-ops { --agc-res-thumb: calc(var(--sg-space-8) + var(--sg-space-6)); font: var(--sg-fs-m)/1.5 var(--sg-font-body); color: var(--sg-text);
  max-width: 60rem; box-sizing: border-box; display: grid; gap: var(--sg-space-4); }
.agc-res *, .agc-ops *, .agc-res *::before, .agc-ops *::before { box-sizing: border-box; }
.agc-res-block { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-l); padding: var(--sg-space-5); background: var(--sg-surface); min-width: 0; overflow-wrap: anywhere; }
.agc-res-h { margin: 0 0 var(--sg-space-4); font-size: var(--sg-type-title); line-height: 1.2; }
.agc-res-asof { margin: var(--sg-space-3) 0 0; font-size: var(--sg-type-small); color: var(--sg-text-muted); }
.agc-res-missing { margin: 0; color: var(--sg-text-muted); }
.agc-res-status { margin: 0; color: var(--sg-text-muted); }
.agc-res-link { display: inline-flex; align-items: center; margin-top: var(--sg-space-3); min-height: var(--sg-tap); color: var(--sg-text); font-weight: 600; text-underline-offset: var(--sg-space-1); }
.agc-res-btn { min-height: var(--sg-tap); padding: 0 var(--sg-space-5); border-radius: var(--sg-radius-pill); border: var(--sg-hair) solid var(--sg-border-strong); background: var(--sg-surface-2); color: var(--sg-text); font: inherit; font-weight: 600; cursor: pointer; }
.agc-res-btn--primary { width: 100%; background: var(--sg-accent); color: var(--sg-accent-text); border-color: var(--sg-accent); }
.agc-res-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.agc-res-review .agc-res-asof { text-align: center; }

.agc-res-nums { display: grid; grid-template-columns: 1fr; gap: var(--sg-space-4); }
.agc-res-num { min-width: 0; padding-left: var(--sg-space-3); border-left: var(--sg-bar-w) solid var(--sg-border-strong); }
.agc-res-num-label { margin: 0; font-size: var(--sg-type-small); color: var(--sg-text-muted); }
.agc-res-num-value { margin: 0; font-size: var(--sg-type-display); font-weight: 700; line-height: 1.1; }
.agc-res-num-value.agc-res-missing { font-size: var(--sg-type-title); font-weight: 400; }
.agc-res-num-window { margin: 0; font-size: var(--sg-type-small); }
.agc-res-num-note { margin: var(--sg-space-1) 0 0; font-size: var(--sg-type-micro); color: var(--sg-text-muted); }

.agc-res-post-row { display: grid; grid-template-columns: 1fr; gap: var(--sg-space-4); }
.agc-res-post { display: grid; grid-template-columns: var(--agc-res-thumb) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--sg-space-2) var(--sg-space-3); min-width: 0; }
.agc-res-post-h { grid-column: 1 / -1; margin: 0; font-size: var(--sg-type-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sg-text-muted); }
.agc-res-thumb { width: var(--agc-res-thumb); height: var(--agc-res-thumb); object-fit: cover; border-radius: var(--sg-radius-m); background: var(--sg-surface-2); }
.agc-res-thumb--none { display: flex; align-items: center; justify-content: center; font-size: var(--sg-type-micro); color: var(--sg-text-muted); border: var(--sg-hair) dashed var(--sg-border); }
.agc-res-post-body { min-width: 0; }
.agc-res-post-title { display: block; margin: 0; font-weight: 600; color: var(--sg-text); }
.agc-res-post-meta { margin: 0; font-size: var(--sg-type-small); color: var(--sg-text-muted); }
.agc-res-post-why { margin: var(--sg-space-1) 0 0; }

.agc-res-cost-main { margin: 0; font-size: var(--sg-fs-l); font-weight: 600; }
.agc-res-facts { margin: var(--sg-space-2) 0 0; padding-left: var(--sg-space-5); }
.agc-res-facts li { margin: var(--sg-space-1) 0; }
.agc-res-chip, .agc-ops-chip { display: inline-block; padding: var(--sg-space-half) var(--sg-space-2); border-radius: var(--sg-radius-pill); border: var(--sg-hair) solid var(--sg-border-strong);
  font-size: var(--sg-type-micro); font-weight: 600; white-space: nowrap; }
.agc-res-test-text, .agc-res-test-result, .agc-res-learned-text { margin: var(--sg-space-2) 0 0; }
.agc-res-all { margin-top: var(--sg-space-3); }
.agc-res-all-summary { min-height: var(--sg-tap); line-height: var(--sg-tap); cursor: pointer; font-weight: 600; }

.agc-ops-tabs { display: flex; gap: var(--sg-space-2); overflow-x: auto; padding-bottom: var(--sg-space-1); }
.agc-ops-tab { flex: none; display: inline-flex; align-items: center; min-height: var(--sg-tap); padding: 0 var(--sg-space-4); border-radius: var(--sg-radius-pill);
  border: var(--sg-hair) solid var(--sg-border); color: var(--sg-text-muted); text-decoration: none; font-weight: 600; white-space: nowrap; }
.agc-ops-tab[aria-current="page"] { color: var(--sg-accent-text); background: var(--sg-accent); border-color: var(--sg-accent); }
.agc-ops-summary { margin: 0 0 var(--sg-space-3); font-weight: 600; }
.agc-ops-list { list-style: none; margin: 0; padding: 0; }
.agc-ops-row { padding: var(--sg-space-3) 0; border-top: var(--sg-hair) solid var(--sg-border); }
.agc-ops-row:first-child { border-top: 0; padding-top: 0; }
.agc-ops-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-3); }
.agc-ops-name { font-weight: 600; }
.agc-ops-chip[data-level="broken"], .agc-ops-chip[data-level="red"], .agc-ops-chip[data-level="failing"], .agc-ops-chip[data-level="blocked"] { background: var(--sg-danger-soft); border-color: var(--sg-danger); color: var(--sg-danger); }
.agc-ops-chip[data-level="fixing"], .agc-ops-chip[data-level="degraded"], .agc-ops-chip[data-level="quiet"], .agc-ops-chip[data-level="unknown"], .agc-ops-chip[data-level="unavailable"] { background: var(--sg-warning-soft); border-color: var(--sg-warning); color: var(--sg-warning); }
.agc-ops-sentence { margin: var(--sg-space-1) 0 0; }
.agc-ops-cause { margin: var(--sg-space-1) 0 0; padding-left: var(--sg-space-3); border-left: var(--sg-bar-w) solid var(--sg-danger); }
/* Ops audit Nov 1 2026: an alarm another owner is fixing is amber, never the red of a part that needs the owner */
.agc-ops-row[data-level="fixing"] .agc-ops-cause { border-left-color: var(--sg-warning); }
.agc-ops-unwatched { margin-top: var(--sg-space-4); }
/* Nov 1 2026: the independent-review line under the capacity rows; a long reason wraps on a 375 px phone, the tap list opens below it */
.agc-ops-review { margin-top: var(--sg-space-4); padding-top: var(--sg-space-3); border-top: var(--sg-hair) solid var(--sg-border); min-width: 0; }
.agc-ops-review-line { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.agc-ops-review-others > summary { min-height: var(--sg-tap); line-height: var(--sg-tap); cursor: pointer; color: var(--sg-link); text-decoration: underline; }
.agc-ops-review-list { margin: 0; padding-left: var(--sg-space-4); }
.agc-ops-review-list li { overflow-wrap: anywhere; margin-top: var(--sg-space-1); }
.agc-ops-scroll { overflow-x: auto; max-width: 100%; margin-top: var(--sg-space-4); }
.agc-ops-table { width: 100%; border-collapse: collapse; font-size: var(--sg-type-small); }
.agc-ops-table caption { text-align: left; font-weight: 600; padding-bottom: var(--sg-space-2); }
.agc-ops-table th, .agc-ops-table td { text-align: left; padding: var(--sg-space-2); border-bottom: var(--sg-hair) solid var(--sg-border); vertical-align: top; }
.agc-ops-table th { color: var(--sg-text-muted); font-weight: 600; }
.agc-ops-table .agc-ops-num { text-align: right; white-space: nowrap; }

/* On a phone a cost row is the line, the chosen week and this month (#658, Nov 14 2026: the week picker's figure is the point of the page, so it stays);
   the kind column comes back from 700 px, and until then how a figure is read and why it is missing sit under the line's name. */
.agc-ops-evi-phone { margin-top: var(--sg-space-1); }
@media (max-width: 699px) { .agc-ops-table { table-layout: fixed; } .agc-ops-table .agc-ops-num { white-space: normal; } .agc-ops-table th:first-child, .agc-ops-table td:first-child { width: 44%; overflow-wrap: break-word; } .agc-ops-table th, .agc-ops-table td { padding: var(--sg-space-2) var(--sg-space-1); } }
.agc-ops-evi-phone p { margin: 0; overflow-wrap: anywhere; }
.agc-ops-gap { font-weight: 600; }
.agc-cost-time { margin: var(--sg-space-3) 0; }
.agc-res-incomplete .agc-res-facts { margin-top: 0; }
@media (max-width: 699px) { .agc-ops-table th:nth-child(4), .agc-ops-table td:nth-child(4) { display: none; } }
@media (min-width: 700px) { .agc-ops-evi-phone { display: none; } }
@media (min-width: 700px) {
  .agc-res-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agc-res-post-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agc-res-btn--primary { width: auto; }
  .agc-res-review { display: flex; align-items: center; gap: var(--sg-space-4); }
  .agc-res-review .agc-res-asof { margin: 0; text-align: left; }
}

/* ---- ops-summary.css ---- */
/* Operations page: three owner questions, one line on who is working, engineering detail behind one closed link (#582). Shared tokens only. */
.ops-sum { display: flex; flex-direction: column; gap: var(--sg-space-3); margin-bottom: var(--sg-space-4); }
.ops-q { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-4); }
.ops-q__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-3); }
.ops-q__title { margin: 0; font-size: var(--sg-fs-l); font-weight: var(--sg-fw-semibold); }
.ops-q__ask { flex: none; font-size: var(--sg-fs-s); }
.ops-q__body { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.ops-q__headline { margin: 0; font-size: var(--sg-fs-m); font-weight: var(--sg-fw-semibold); }
.ops-q__headline--ok { color: var(--sg-success); }
.ops-q__headline--warn { color: var(--sg-warning); }
.ops-q__counts { margin: 0; display: flex; flex-direction: column; }
.ops-q__count { display: flex; justify-content: space-between; gap: var(--sg-space-3); padding: var(--sg-space-1) 0; border-top: var(--sg-hair) solid var(--sg-border); font-size: var(--sg-fs-s); }
.ops-q__count dt, .ops-q__count dd { margin: 0; }
.ops-q__count dd { font-weight: var(--sg-fw-semibold); white-space: nowrap; }
.ops-q__count--long dd { white-space: normal; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.ops-q__count--list { flex-wrap: wrap; align-items: center; padding: 0; }
.ops-q__open { font: inherit; font-weight: var(--sg-fw-semibold); color: var(--sg-link); background: none; border: 0; padding: 0; min-height: var(--sg-tap); text-decoration: underline; cursor: pointer; }
.ops-q__count dd.ops-q__why { flex-basis: 100%; white-space: normal; font-weight: normal; }
.ops-q__whyhead { margin: var(--sg-space-1) 0; }
.ops-q__why ul { margin: 0; padding-left: 1.2em; }
.ops-q__why li { overflow-wrap: anywhere; }
.ops-q__next { margin: 0; font-size: var(--sg-fs-s); }
.ops-q__calm { margin: 0; font-size: var(--sg-fs-m); }
.ops-q__problems { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sg-space-3); }
.ops-q__problems li { font-size: var(--sg-fs-s); line-height: 1.4; }
.ops-q__unavailable { margin: 0; font-size: var(--sg-fs-s); color: var(--sg-warning); }
.ops-q__asof { margin: 0; font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.ops-q__total { margin: 0; display: flex; align-items: center; gap: var(--sg-space-2); }
.ops-q__totalnum { font-size: var(--sg-type-title); font-weight: var(--sg-fw-bold); line-height: 1.1; }
.ops-q__period { margin: 0; font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.ops-q__table { width: 100%; border-collapse: collapse; }
.ops-q__table th, .ops-q__table td { padding: var(--sg-space-2) 0; border-top: var(--sg-hair) solid var(--sg-border); font-size: var(--sg-fs-s); font-weight: var(--sg-fw-regular); text-align: left; vertical-align: top; }
.ops-q__table td { text-align: right; white-space: nowrap; padding-left: var(--sg-space-3); }
.ops-q__table small { display: block; font-size: var(--sg-fs-xs); color: var(--sg-text-muted); overflow-wrap: anywhere; }
.ops-q [hidden] { display: none !important; }
.ops-q__toggle { align-self: flex-start; font-size: var(--sg-fs-s); text-align: left; }
.ops-team { margin: calc(var(--sg-space-1) * -1) var(--sg-space-1) 0; font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.ops-team--unavailable { color: var(--sg-warning); }
.ops-sum__details { margin: var(--sg-space-4) 0 var(--sg-space-2); font-size: var(--sg-fs-l); }
.ops-sum__system > summary { cursor: pointer; min-height: var(--sg-tap); display: flex; align-items: center; }
.ops-sum__system > .ops-q__asof { margin-bottom: var(--sg-space-3); }
@media (min-width: 900px) { .ops-sum { max-width: 47.5rem; } }
@media (max-width: 600px) {
  .ops-head { margin-bottom: var(--sg-space-2); }
  .ops-head h1 { font-size: var(--sg-fs-xl); }
  .ops-sum { gap: var(--sg-space-2); }
  .ops-q { padding: var(--sg-space-3); gap: var(--sg-space-1); }
  .ops-q__ask { min-height: 2.25rem; padding: 0 var(--sg-space-3); }
}

/* ---- capacity.css ---- */
/* Capacity strip on Operations and Pipeline (#598). Plain text rows; red when out or below its reserve; stacks at 375 px. Shared tokens only. */
.cap { padding: var(--sg-space-3) var(--sg-space-4); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); margin-bottom: var(--sg-space-3); }
.cap__head { margin: 0 0 var(--sg-space-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sg-space-2); font-size: var(--sg-fs-m); }
.cap__flag { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.cap__flag--red { color: var(--sg-danger); font-weight: var(--sg-fw-semibold, 600); }
.cap__rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cap__row { display: flex; flex-direction: column; gap: var(--sg-space-half); padding: var(--sg-space-2) 0 var(--sg-space-2) var(--sg-space-2); border-top: var(--sg-hair) solid var(--sg-border); border-left: var(--sg-bar-w) solid transparent; font-size: var(--sg-fs-s); line-height: 1.4; overflow-wrap: anywhere; }
.cap__row--red { border-left-color: var(--sg-danger); background: var(--sg-danger-soft); }
.cap__row--red .cap__text { color: var(--sg-danger); font-weight: var(--sg-fw-semibold, 600); }
.cap__row--unknown .cap__text { color: var(--sg-text-muted); }
.cap__label { font-weight: var(--sg-fw-semibold, 600); }
.cap__age, .cap__asof { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.cap__asof { margin: var(--sg-space-2) 0 0; }
.cap__unavailable { margin: 0; font-size: var(--sg-fs-s); color: var(--sg-warning); }
@media (min-width: 600px) { .cap__row { flex-direction: row; align-items: baseline; gap: var(--sg-space-3); } .cap__label { flex: 0 0 5.625rem; } .cap__text { flex: 1; } .cap__age { flex: none; } }

/* ---- chat.css ---- */
/* Maya conversations (PRD v1.1 Section 18.3 and 18.4). Semantic --sg-* tokens and the shared .sg-chat, .sg-bubble, .sg-sidelist,
   .sg-composer and .sg-context-card components only; sgc-* classes here are layout glue for this view and the compact panel.
   Desktop 1280+: sidebar | stage | context. 761-1279: sidebar | stage, context is a drawer. 760 and below: the stage is full screen
   and the conversation list is a drawer. Targets are at least --sg-tap. */

/* ---- the workspace ---- */
.sgc-chat { min-height: 30rem; }
/* #658 (Nov 13 2026): the shared .sg-chat is overflow hidden, which still scrolls from code, focus and find in page. On a narrow screen the
   browser scrolled the box 380 px sideways to reach the closed context panel, and widening the window kept it: the chat cut off on the
   left and Context gone until a reload. clip draws the same box and cannot scroll; chat.js pins it where clip is not supported. */
.sgc-chat { overflow: clip; }
@media (min-width: 761px) { .sgc-chat { position: relative; } }
.sgc-chat > * { min-width: 0; }
.sgc-chat .sg-chat__list { overflow-y: auto; }
.sgc-chat .sg-sidelist { border-right: 0; }
.sgc-chat .sg-chat__list { border-right: var(--sg-hair) solid var(--sg-border); background: var(--sg-surface); }
.sgc-chat .sg-chat__context { border-left: var(--sg-hair) solid var(--sg-border); background: var(--sg-surface); }
.sgc-chat .sg-chat__stage { background: var(--sg-bg); }
/* Bound grid tracks and their content: max-width on a flex item alone does not stop intrinsic grid children overflowing. */
.sgc-chat .sg-thread > .sg-bubble { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.sgc-chat .sg-thread > .sg-bubble > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
/* Published-post cards render the saved media URL on the image itself, so bound its intrinsic size in chat. */
.sgc-chat .sg-thread .sg-bubble__card .sg-media__frame { max-width: 100%; height: auto; box-sizing: border-box; }

@media (min-width: 761px) {
  .sgc-chat.sg-chat--screen { border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-l); box-shadow: var(--sg-shadow-soft); }
}

/* ---- sidebar ---- */
.sgc-sidehead { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-2); }
.sgc-sidehead__title { margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-l); }
.sgc-listbody { display: flex; flex-direction: column; gap: var(--sg-space-1); }
.sgc-listnote { margin: var(--sg-space-1) var(--sg-space-2); font-size: var(--sg-fs-s); }
.sgc-draftflag { grid-column: 1 / -1; color: var(--sg-gold-text); font-weight: var(--sg-fw-semibold); }
.sgc-newform { display: flex; flex-direction: column; gap: var(--sg-space-2); margin-top: var(--sg-space-2); }
.sgc-newform[hidden], .sgc-chat [hidden] { display: none; }
.sgc-archbtn { align-self: flex-start; }
/* #579: Select, the bulk bar and the delete confirmation. Danger uses the shared --sg-danger tokens. */
.sgc-listtools { margin-top: var(--sg-space-1); }
.sgc-selbtn[aria-pressed="true"] { background: var(--sg-accent-soft); }
.sgc-bulkbar { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-2); border: var(--sg-hair) solid var(--sg-border-strong); border-radius: var(--sg-radius-m); background: var(--sg-surface-2); }
.sgc-bulkbar__count { margin: 0; font-size: var(--sg-fs-s); font-weight: var(--sg-fw-semibold); }
.sgc-bulkbar__row { flex-wrap: wrap; }
.sgc-bulkbtn { min-height: var(--sg-tap); }
.sgc-chat .sg-btn--danger { background: transparent; color: var(--sg-danger); border-color: var(--sg-danger); }
.sgc-chat .sg-btn--danger:not(:disabled):hover { background: var(--sg-danger-soft); }
.sgc-chat .sg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sgc-pick { grid-template-columns: auto minmax(0, 1fr) auto; }
.sgc-pick > .sg-sidelist__title { grid-column: 2; grid-row: 1; }
.sgc-pick > .sg-sidelist__time { grid-column: 3; grid-row: 1; }
.sgc-pick > .sg-sidelist__snippet { grid-column: 2 / -1; }
.sgc-pick__box { grid-column: 1; grid-row: 1 / span 3; width: var(--sg-size-icon); height: var(--sg-size-icon); border: var(--sg-line-w) solid var(--sg-border-strong); border-radius: var(--sg-radius-s); }
.sgc-pick[aria-checked="true"] { background: var(--sg-accent-soft); }
.sgc-pick[aria-checked="true"] .sgc-pick__box { background: var(--sg-accent); border-color: var(--sg-accent); box-shadow: inset 0 0 0 0.1875rem var(--sg-surface); }
.sgc-delact { color: var(--sg-danger); }
.sgc-chattools { padding: var(--sg-space-1) var(--sg-space-3); border-bottom: var(--sg-hair) solid var(--sg-border); gap: var(--sg-space-2); }
.sgc-chattools .sg-btn { min-height: var(--sg-tap); }
.sgc-tidy { display: flex; flex-direction: column; gap: var(--sg-space-2); margin-top: var(--sg-space-3); padding: var(--sg-space-3); border: var(--sg-hair) dashed var(--sg-border-strong); border-radius: var(--sg-radius-m); }
.sgc-tidy__note { margin: 0; font-size: var(--sg-fs-s); }
.sgc-tidy__btn { align-self: flex-start; min-height: var(--sg-tap); }
.sgc-archnote { margin: var(--sg-space-1) 0 0; font-size: var(--sg-fs-xs); }
/* R9 (#917): the owner's tidy up plan, one row per chat (title, then why), wrapping at phone width */
.sgc-tidyup[hidden] { display: none; }
.sgc-tidyplan { margin: 0 0 var(--sg-space-3); }
.sgc-tidyplan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sgc-tidyplan__row { display: flex; flex-direction: column; min-width: 0; }
.sgc-tidyplan__title { font-weight: 600; overflow-wrap: anywhere; }
.sgc-tidyplan__why { font-size: var(--sg-fs-s); }
.sgc-archnote[hidden] { display: none; }
.sgc-archhead { display: flex; flex-direction: column; gap: var(--sg-space-1); padding: var(--sg-space-3); border: var(--sg-hair) solid var(--sg-border-strong); border-radius: var(--sg-radius-m); background: var(--sg-surface-2); margin-bottom: var(--sg-space-2); }
.sgc-archhead__title { margin: 0; font-size: var(--sg-fs-l); }
.sgc-archhead__count { margin: 0; font-weight: var(--sg-fw-semibold); }
.sgc-archhead__note { margin: 0; font-size: var(--sg-fs-s); }
.sgc-archhead__back { align-self: flex-start; min-height: var(--sg-tap); margin-top: var(--sg-space-1); }
.sgc-confirm { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: var(--sg-space-4); background: var(--sg-scrim); }
.sgc-confirm__box { width: min(26.25rem, 100%); display: flex; flex-direction: column; gap: var(--sg-space-3); padding: var(--sg-space-4); background: var(--sg-elevated); box-shadow: var(--sg-shadow-2); }
.sgc-confirm__title { margin: 0; font-size: var(--sg-fs-l); }
.sgc-confirm__text { margin: 0; }
.sgc-confirm__row { justify-content: flex-end; flex-wrap: wrap; }

/* ---- stage bar ---- */
.sgc-avatarhost { display: inline-flex; }
.sgc-titlewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sg-space-half); }
.sgc-titlewrap .sg-chat__bar-title { flex: none; }
.sgc-sub { margin: 0; font-size: var(--sg-fs-xs); color: var(--sg-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgc-sub__name { color: var(--sg-text); font-weight: var(--sg-fw-semibold); }
.sgc-banners { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-3) var(--sg-space-4) 0; }
.sgc-banners[hidden] { display: none; }
.sgc-banners .sg-banner { flex-wrap: wrap; justify-content: space-between; }
.sgc-signin { flex: none; }   /* #542: the visitor's Sign in button in the view-only notice, the panel and the private-conversations empty state */
.sgc-talk { align-self: center; white-space: nowrap; }   /* #658: Sign in to talk to Maya, in Send's place on a visitor's locked composer */
/* #658 re-click (Nov 13 2026): at 375 the full button left the locked box 115 px for its 165 px of "Sign in to talk to Maya.", clipped to
   two lines. Under 440 px the button says Sign in (its accessible name keeps the whole sentence) and the box shows the sentence. */
@media (max-width: 440px) { .sgc-talk__more { display: none; } }
.sgc-chat .sg-badge[hidden] { display: none; }   /* #658: no PREVIEW or LIVE badge until a read has said which */

/* ---- thread ---- */
.sgc-text { white-space: pre-wrap; }
.sgc-quote { display: block; width: 100%; text-align: left; background: transparent; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; font: inherit; font-size: var(--sg-fs-s);
  color: inherit; opacity: 0.85; min-height: var(--sg-tap); }
.sgc-media-line { display: block; }
.sgc-media { display: inline-flex; align-items: center; min-height: var(--sg-tap); color: var(--sg-link); }
.sgc-flash .sg-bubble__body { box-shadow: var(--sg-focus-ring); }
.sgc-statusline { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sg-space-2); }
/* #903: Maya's answer while she is still writing it; the saved reply replaces it */
.sgc-draft { margin: var(--sg-space-2) 0 0; padding: var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-surface-2); white-space: pre-wrap; opacity: .85; }
.sgc-actions { display: flex; }
.sg-bubble--user .sgc-actions { justify-content: flex-end; }
.sgc-act { min-height: var(--sg-tap); padding: 0 var(--sg-space-3); font-size: var(--sg-fs-s); color: var(--sg-link); }
.sg-bubble__status[data-state="saved"] { color: var(--sg-text-muted); }
.sgc-skel { height: 4.5rem; }
.sgc-skel--tall { height: 6rem; border-radius: var(--sg-radius-l); }
.sg-thread .sg-empty { margin: auto; max-width: 32.5rem; }

/* rich context cards inside a bubble and in the context panel */
.sgc-ctxcard { display: flex; gap: var(--sg-space-3); align-items: flex-start; padding: var(--sg-space-3); color: var(--sg-text); }
.sgc-ctxcard__thumb { flex: none; width: 4.5rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sg-radius-m); background: var(--sg-media-bg); display: block; }
.sgc-ctxcard__thumb--none { display: grid; place-items: center; font-size: var(--sg-fs-xs); color: var(--sg-text-muted); background: var(--sg-neutral-soft); text-align: center; }
.sgc-ctxcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sgc-ctxcard__note { margin: 0; font-size: var(--sg-fs-s); overflow-wrap: anywhere; }
.sgc-ctxcard .sg-details { font-size: var(--sg-fs-xs); }
.sgc-ctxcard .sg-btn { min-height: var(--sg-tap); }
.sgc-ctxcard[aria-busy="true"] { display: block; }

/* #580: a conversation reads like a conversation. Cards in the thread use body type: a measurement is a value under a small label, a
   stat sentence is body text and a missing source is a quiet note. The refs on the person's own message are one muted line. */
.sg-thread .sg-card__title { font-family: var(--sg-font-body); font-weight: var(--sg-fw-semibold); font-size: var(--sg-fs-m); }
.sg-thread .sg-metric__value { font-family: var(--sg-font-body); font-weight: var(--sg-fw-semibold); font-size: var(--sg-fs-l); line-height: var(--sg-lh-snug); }
.sgc-metric__text { margin: 0; font-size: var(--sg-fs-s); line-height: var(--sg-lh-body); overflow-wrap: anywhere; }
.sgc-metric__note { margin: 0; font-size: var(--sg-fs-xs); }
.sgc-refnote { max-width: 100%; font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sg-bubble--user .sgc-refnote:not([open]) { justify-self: end; }
.sgc-refnote > summary { display: flex; align-items: center; min-height: var(--sg-tap); cursor: pointer; list-style: none; }
.sgc-refnote > summary::-webkit-details-marker { display: none; }

/* ---- composer ---- */
.sg-composer__context:empty, .sg-composer__context[hidden] { display: none; }
.sgc-suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sgc-suggest > * { flex: none; }
.sgc-send { min-width: var(--sg-tap); }
.sgc-attach { min-width: var(--sg-tap); min-height: var(--sg-tap); padding: 0 var(--sg-space-2); flex: 0 0 auto; }   /* #522 */
.sgc-attach[hidden] { display: none; }
.sgc-replybar { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-2); padding-left: var(--sg-space-3); font-size: var(--sg-fs-s); color: var(--sg-text-muted);
  border-left: var(--sg-bar-w) solid var(--sg-gold); }
.sgc-replybar[hidden] { display: none; }
.sgc-count { margin: 0; font-size: var(--sg-fs-xs); text-align: right; }
.sgc-count[hidden] { display: none; }
.sgc-chat .sg-composer__row .sg-textarea { padding: calc((var(--sg-tap) - 1.5em) / 2) var(--sg-space-3); line-height: 1.5; overflow-y: auto; }

/* ---- context panel ---- */
.sgc-move { display: flex; flex-direction: column; gap: var(--sg-space-1); padding-bottom: var(--sg-space-3); }
.sgc-move + .sgc-move { padding-top: var(--sg-space-3); border-top: var(--sg-hair) solid var(--sg-border); }
.sgc-ctxnote { margin: 0; font-size: var(--sg-fs-s); }
.sgc-linkbtn { display: inline-flex; align-items: center; min-height: var(--sg-tap); }
.sgc-chat .sg-chat__context:focus, .sgc-chat .sg-chat__list:focus { outline: none; }

/* ---- drawers: scrim and panels below the breakpoints ---- */
.sgc-scrim { display: none; position: absolute; inset: 0; z-index: 4; border: 0; padding: 0; background: var(--sg-scrim); cursor: default; }
.sgc-only-narrow { display: inline-flex; }
@media (min-width: 1280px) { .sgc-only-narrow { display: none; } }
@media (max-width: 760px) { .sgc-only-narrow { display: none; } .sgc-chat .sgc-drawer-ctx { display: inline-flex; } }
@media (min-width: 761px) { .sgc-chat .sgc-drawer-ctx { display: none; } }

@media (max-width: 1279px) {
  .sgc-chat .sg-chat__context { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(23.75rem, 100%); display: block; box-shadow: var(--sg-shadow-2);
    transform: translateX(100%); visibility: hidden; transition: transform var(--sg-dur) var(--sg-ease), visibility 0s linear var(--sg-dur); }
  .sgc-chat[data-ctx="open"] .sg-chat__context { transform: none; visibility: visible; transition-delay: 0s; }
  .sgc-chat[data-ctx="open"] .sgc-scrim { display: block; }
}
@media (max-width: 760px) {
  .sgc-chat .sg-chat__list { display: block; position: absolute; z-index: 5; top: 0; left: 0; bottom: 0; width: min(21.25rem, 92%); box-shadow: var(--sg-shadow-2);
    transform: translateX(-100%); visibility: hidden; transition: transform var(--sg-dur) var(--sg-ease), visibility 0s linear var(--sg-dur); }
  .sgc-chat[data-drawer="open"] .sg-chat__list { transform: none; visibility: visible; transition-delay: 0s; }
  .sgc-chat[data-drawer="open"] .sgc-scrim { display: block; }
  .sgc-chat .sg-chat__bar { padding: var(--sg-space-2); gap: var(--sg-space-1); padding-top: calc(var(--sg-space-2) + env(safe-area-inset-top)); }
  .sgc-chat .sg-chat__bar .sg-btn { padding: 0 var(--sg-space-2); }
  .sgc-chat .sg-chat__bar-title { font-size: var(--sg-fs-m); }
  /* #658 (Nov 13 2026): with Back, PREVIEW, Context, Chats and New topic in one row the chat's name had 34 px at 375. On a phone New topic
     only opened the Chats sheet, which has its own New chat button, so it lives there and the name keeps its room. */
  .sgc-chat .sgc-newtopic { display: none; }
  .sgc-sub__purpose { display: none; }
  .sgc-banners { padding: var(--sg-space-2) var(--sg-space-3) 0; }
  .sgc-chat .sg-composer { padding: var(--sg-space-2) var(--sg-space-3); padding-bottom: calc(var(--sg-space-2) + env(safe-area-inset-bottom)); }
  /* #541: no fixed floor on a phone. The open keyboard can leave under 30rem, and a floor pushed the composer under it. chat.js sets the
     height from visualViewport; dvh (vh where dvh is unknown) is the size before the script runs. */
  .sgc-chat.sg-chat--screen { min-height: 0; height: 100vh; height: 100dvh; }
  .sgc-ctxcard { padding: var(--sg-space-2); }
}
@media (min-width: 761px) { .sgc-chat .sg-chat__list { visibility: visible; } .sgc-chat { grid-template-columns: calc(var(--sg-sidebar-w) - var(--sg-space-3)) minmax(0, 1fr); } }
@media (min-width: 1280px) { .sgc-chat { grid-template-columns: calc(var(--sg-sidebar-w) - var(--sg-space-3)) minmax(0, 1fr) calc(var(--sg-panel-w) - var(--sg-space-4)); } }

/* The full workspace replaces the docked compact panel while it is on screen. */
body.sgc-fullchat #sg-conversation-panel { display: none; }
/* the full chat hides the panel column; the rail keeps its token width (was a hard 220px, which left a blank band beside the 76px rail) */
@media (min-width: 1101px) { body.sgc-fullchat .sgx-app { grid-template-columns: var(--sg-rail-w) minmax(0, 1fr); grid-template-areas: "rail top" "rail main"; } }

/* ---- the compact right panel ---- */
.sgc-panel { display: flex; flex-direction: column; gap: var(--sg-space-3); color: var(--sg-text); font-family: var(--sg-font-body); }
.sgx-panel .sgc-panel { padding: var(--sg-space-4); }   /* the shell panel has padding 0; without this the Maya panel sat flush against both edges (review, Oct 16) */
.sgc-panel__head { display: flex; align-items: center; gap: var(--sg-space-3); }
.sgc-panel__who { flex: 1; min-width: 0; }
.sgc-panel__name { margin: 0; font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-l); }
.sgc-panel__role, .sgc-panel__note, .sgc-panel__draft { margin: 0; font-size: var(--sg-fs-s); }
.sgc-panel__chips { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.sgc-panel .sg-context-card__label { margin: var(--sg-space-2) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .sgc-chat .sg-chat__list, .sgc-chat .sg-chat__context { transition: none; }
}

/* Live: Maya is thinking (pending reply) */
.sg-bubble__status[data-state="pending"] { color: var(--sg-text-muted); }
.sg-bubble__status[data-state="pending"]::after { content: ''; display: inline-block; width: 1.2em; margin-left: 0.125rem; animation: sgc-think 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes sgc-think { 0% { width: 0; } 100% { width: 1.2em; } }
.sgc-text a { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .sg-bubble__status[data-state="pending"]::after { animation: none; width: 0; } }
/* #546 (Oct 19, phone): a notice above the thread is a slim strip, so the messages and the Message box keep the screen */
@media (max-width: 760px) {
  .sgc-banners { padding: var(--sg-space-2) var(--sg-space-3) 0; gap: var(--sg-space-1); }
  .sgc-banners .sg-banner { padding: var(--sg-space-2) var(--sg-space-3); gap: var(--sg-space-2); line-height: 1.3; }
  .sgc-banners .sg-banner__title { margin-bottom: 0; }
}

/* #580 Muse (Oct 21): one calm centred column. Context is a drawer at every width; the side list collapses on desktop and is a sheet on phone. */
@media (min-width: 1280px) {
  .sgc-chat { grid-template-columns: calc(var(--sg-sidebar-w) - var(--sg-space-3)) minmax(0, 1fr); }
  .sgc-chat .sg-chat__context { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; width: min(23.75rem, 100%); display: block; box-shadow: var(--sg-shadow-2);
    transform: translateX(100%); visibility: hidden; transition: transform var(--sg-dur) var(--sg-ease), visibility 0s linear var(--sg-dur); }
  .sgc-chat[data-ctx="open"] .sg-chat__context { transform: none; visibility: visible; transition-delay: 0s; }
  .sgc-chat[data-ctx="open"] .sgc-scrim { display: block; }
}
@media (min-width: 761px) {
  .sgc-chat[data-list="collapsed"] { grid-template-columns: minmax(0, 1fr); }
  .sgc-chat[data-list="collapsed"] .sg-chat__list { display: none; }
}
.sgc-chat .sg-thread > *, .sgc-chat .sg-composer > *, .sgc-chat .sgc-banners > * { width: 100%; max-width: 45rem; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.sgc-chat .sg-thread > .sg-bubble--maya { margin-right: auto; }
.sgc-chat .sg-thread > .sg-bubble--user { margin-left: auto; }
.sgc-chat .sg-bubble__who { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sgc-chat .sg-bubble__who strong { font-weight: var(--sg-fw-semibold); }
.sgc-chat .sg-bubble__card, .sgc-chat .sg-bubble__card * { font-size: var(--sg-fs-s); }
.sgc-chat .sg-bubble__status { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.sgc-chatsbtn, .sgc-ctxbtn { flex: none; }
@media (max-width: 760px) { .sgc-chat .sgc-ctxbtn { display: none; } }   /* phone: Context is reached from the Chats sheet, so the chat name keeps its room */
.sgc-act--quiet { color: var(--sg-text-muted); text-decoration: underline; }
.sgc-target .sg-bubble__body { box-shadow: 0 0 0 var(--sg-line-w) var(--sg-link); }
/* One frame per card in the thread: the chat wrapper and the resolver card carry no border of their own around the rich card. */
.sgc-chat .sg-thread .sg-bubble__card > .sgc-ctxcard { padding: 0; border: 0; background: transparent; box-shadow: none; }
.sgc-chat .sg-bubble__card .sg-bubble__card { margin: 0; }
.sg-card[data-compact="true"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sg-space-1); }
.sg-card[data-compact="true"] > * { margin: 0; }
.sg-card[data-compact="true"]:has(> .sgc-ctxcard__thumb) { grid-template-columns: var(--sg-size-thumb) minmax(0, 1fr); column-gap: var(--sg-space-3); }
.sg-card[data-compact="true"] > .sgc-ctxcard__thumb { width: var(--sg-size-thumb); grid-row: 1 / span 4; }
.sg-card[data-compact="true"]:has(> .sgc-ctxcard__thumb) > :not(.sgc-ctxcard__thumb) { grid-column: 2; }
.sgc-chat .sg-thread .sg-bubble__body > .sg-bubble__card { background: transparent; border: 0; padding: 0; box-shadow: none; }
.sgc-chat .sg-bubble--user .sg-bubble__status { text-align: right; }

/* Muse (Meta's agent, Roman Nov 1): a messaging thread. The owner's bubble hugs its text on the right edge of the column; Reply shows
   on hover or keyboard focus (always on touch screens); the detail of an answer folds under Show details. */
.sgc-chat .sg-thread > .sg-bubble--user { width: fit-content; max-width: min(36rem, 85%); margin-right: max(0rem, calc((100% - 45rem) / 2)); }
.sgc-chat .sg-bubble--user .sgc-statusline:empty { display: none; }
@media (hover: hover) {
  /* a pointer needs no 44 px touch row: the hidden Reply row stays short so messages sit close, as in a messaging app */
  .sgc-chat .sg-bubble .sgc-act { min-height: 0; padding-top: var(--sg-space-1); padding-bottom: var(--sg-space-1); }
  .sgc-chat .sg-bubble .sgc-act:not(.sgc-act--quiet) { opacity: 0; transition: opacity var(--sg-dur) var(--sg-ease); }
  .sgc-chat .sg-bubble:hover .sgc-act, .sgc-chat .sg-bubble:focus-within .sgc-act { opacity: 1; }
}
.sgc-more { margin-top: var(--sg-space-2); }
.sgc-more__toggle { cursor: pointer; color: var(--sg-link); font-size: var(--sg-fs-s); min-height: var(--sg-tap); display: inline-flex; align-items: center; }
.sgc-more[open] > .sgc-more__toggle { margin-bottom: var(--sg-space-1); }

/* ---- performance-page.css ---- */
/* Performance page (PRD v1.1 section 18.3). Only var(--sg-*) tokens and the shared component classes; no raw colour, size or font family.
   Everything is scoped under .pf. The root is a size container, so the layout follows the width of the content column, not the screen. */
.pf { container-type: inline-size; container-name: pf; display: flex; flex-direction: column; gap: var(--sg-space-5); max-width: 78rem; font-family: var(--sg-font-body); color: var(--sg-text); }
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf-body { display: flex; flex-direction: column; gap: var(--sg-space-7); min-width: 0; }
.pf p { margin: 0; }
.pf-muted, .pf-note, .pf-meta, .pf-purpose, .pf-note { font-size: var(--sg-fs-s); line-height: 1.45; }
.pf-note--warn { color: var(--sg-warning); }
.pf :where(button, a, summary, select) { min-height: var(--sg-tap); }
.pf :where(button, a, summary, select, svg):focus-visible { outline: var(--sg-line-w) solid transparent; box-shadow: var(--sg-focus-ring); }

/* Header band: gold editorial label, serif title, report-day picker */
.pf-lede { max-width: 40rem; line-height: 1.5; font-size: var(--sg-fs-m); }
.pf-picker { display: flex; flex-direction: column; gap: var(--sg-space-2); width: 24rem; max-width: 100%; }
.pf-controls { display: flex; flex-direction: column; gap: var(--sg-space-3); width: 24rem; max-width: 100%; }
.pf-controls:empty, .pf-controls:not(:has(*:not(:empty))) { display: none; }
.pf-controls .pf-picker { width: 100%; }
.pf-window { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.pf-window:empty { display: none; }
.pf-win-row { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.pf-win { padding: 0 var(--sg-space-3); font-size: var(--sg-fs-s); }
.pf-win:disabled { opacity: .6; cursor: not-allowed; border-style: dashed; }
.pf-win-note { max-width: 24rem; }
.pf-label { font: 600 var(--sg-fs-s) var(--sg-font-body); color: var(--sg-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.pf-picker-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sg-space-2); }
.pf-select { width: 100%; padding: 0 var(--sg-space-3); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); background: var(--sg-surface); color: var(--sg-text); font: 600 var(--sg-fs-m) var(--sg-font-body); }
.pf-step { padding: 0 var(--sg-space-3); }
.pf-ask { border-color: var(--sg-border); }

/* Source and freshness */
.pf-fresh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sg-space-3) var(--sg-space-5); padding: var(--sg-space-4); background: var(--sg-surface); border: var(--sg-hair) solid var(--sg-border); border-left: var(--sg-bar-w) solid var(--sg-accent); border-radius: var(--sg-radius-m); }
.pf-fresh-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); }
.pf-fresh-text { font-size: var(--sg-fs-m); }
.pf-tag { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 var(--sg-space-3); border-radius: var(--sg-radius-pill); background: var(--sg-accent-soft); color: var(--sg-text); font: 700 var(--sg-fs-xs) var(--sg-font-body); letter-spacing: .06em; text-transform: uppercase; }
.pf-tag--hist { background: var(--sg-surface-2); }
.pf-tag--age { min-height: 1.5rem; letter-spacing: .03em; text-transform: none; font-weight: 600; }
.pf-fresh-info { display: flex; flex-direction: column; gap: var(--sg-space-2); min-width: 0; }
.pf-primary { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sg-space-2); max-width: 14rem; }
.pf-headline { font-family: var(--sg-font-display); font-size: var(--sg-fs-xl); line-height: 1.35; max-width: 52rem; }

/* Jump navigation: chips wide, one select on a phone */
.pf-chips { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.pf-chips .sg-chip { padding: 0 var(--sg-space-3); font-size: var(--sg-fs-s); }
.pf-jump-select { display: none; }

/* Sections */
.pf-sec { display: flex; flex-direction: column; gap: var(--sg-space-4); min-width: 0; scroll-margin-top: var(--sg-space-4); }
.pf-sec-head { display: flex; flex-direction: column; gap: var(--sg-space-1); padding-top: var(--sg-space-4); border-top: var(--sg-hair) solid var(--sg-border); }
.pf-h2 { font-family: var(--sg-font-display); font-weight: 400; font-size: var(--sg-fs-xl); line-height: 1.2; margin: 0; }
.pf-h2:focus { outline: none; }
.pf-h3 { font: 700 var(--sg-fs-m) var(--sg-font-body); margin: var(--sg-space-2) 0 0; }
.pf-purpose { max-width: 44rem; font-size: var(--sg-fs-m); }

/* Tiles and mission cards */
.pf-mission { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-4); }
.pf-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-4); }
.pf-tile { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-4); background: var(--sg-surface); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-l); box-shadow: var(--sg-shadow-1); min-width: 0; }
.pf-tile--mission { padding: var(--sg-space-5); border-top: var(--sg-bar-w) solid var(--sg-accent); box-shadow: var(--sg-shadow-2); }
.pf-tile-label { font: 700 var(--sg-fs-m)/1.3 var(--sg-font-body); margin: 0; }
.pf-tile-window { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.pf-tile-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sg-space-2); }
.pf-value { font-family: var(--sg-font-display); font-size: var(--sg-fs-xl); line-height: 1.05; }
.pf-tile--mission .pf-value { font-size: var(--sg-type-display); }   /* the three mission numbers are the only display-size figures on any page */
.pf-value--s { font-size: var(--sg-fs-xl); }
.pf-value--missing { font-size: var(--sg-fs-xl); color: var(--sg-text-muted); }
.pf-unit { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.pf-change { font-size: var(--sg-fs-s); font-weight: 600; }
.pf-change--up { color: var(--sg-success); }
.pf-change--down { color: var(--sg-warning); }
.pf-change--none { color: var(--sg-text-muted); font-weight: 500; font-size: var(--sg-fs-s); }
.pf-reason, .pf-caveat, .pf-flag { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.pf-flag { color: var(--sg-warning); font-weight: 600; }
.pf-spark-wrap { display: flex; align-items: center; gap: var(--sg-space-3); }
.pf-spark { width: 100%; max-width: 12rem; height: 2.75rem; }
.pf-spark-cap { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); }
.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); margin-top: auto; padding-top: var(--sg-space-2); }
.pf-tile--missing { background: var(--sg-surface-2); border-style: dashed; box-shadow: none; }
.pf-focus { border-color: var(--sg-accent); box-shadow: var(--sg-focus-ring); }
.pf-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sg-space-4); align-items: center; padding: var(--sg-space-4) var(--sg-space-5); background: var(--sg-surface-2); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-l); }
.pf-strip-label { font-weight: 700; }
.pf-strip-value { font-family: var(--sg-font-display); font-size: var(--sg-fs-xl); }

/* How this number is made */
.pf-basis { border-top: var(--sg-hair) solid var(--sg-border); }
.pf-basis-sum { display: flex; align-items: center; cursor: pointer; font: 600 var(--sg-fs-s) var(--sg-font-body); color: var(--sg-text-muted); }
.pf-basis-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sg-space-1) var(--sg-space-3); margin: 0 0 var(--sg-space-2); font-size: var(--sg-fs-s); }
.pf-basis-list dt { color: var(--sg-text-muted); }
.pf-basis-list dd { margin: 0; overflow-wrap: anywhere; }
.pf-caveats { margin: 0 0 var(--sg-space-2); padding-left: var(--sg-space-5); font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.pf-basis--page { border: 0; }

/* Trends and charts */
.pf-trends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-space-4); }
.pf-trend { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-4); background: var(--sg-surface); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-l); min-width: 0; }
.pf-meta { font-size: var(--sg-fs-s); }
.pf-chart { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.pf-plot { width: 100%; height: auto; display: block; touch-action: pan-y; border-radius: var(--sg-radius-m); }
.pf-line { fill: none; stroke: var(--sg-info); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pf-dot { fill: var(--sg-info); }
.pf-grid { stroke: var(--sg-border); stroke-width: 1; }
.pf-gap { fill: var(--sg-text-muted); opacity: .14; }
.pf-plot-box { min-width: 0; }
.pf-axis { font: var(--sg-fs-xs) var(--sg-font-body); fill: var(--sg-text-muted); }
.pf-cursor line { stroke: var(--sg-accent); stroke-width: 1.5; }
.pf-cursor circle { fill: var(--sg-surface); stroke: var(--sg-accent); stroke-width: 2.5; }
.pf-readout { min-height: 1.5rem; font-weight: 600; font-size: var(--sg-fs-s); }
.pf-legend, .pf-caption { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.pf-summary { display: flex; flex-direction: column; gap: var(--sg-space-1); padding: var(--sg-space-3) 0; }
.pf-daily { list-style: none; margin: 0 0 var(--sg-space-2); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--sg-space-1) var(--sg-space-4); font-size: var(--sg-fs-s); }
.pf-daily li { display: flex; justify-content: space-between; gap: var(--sg-space-2); }
.pf-daily-gap { color: var(--sg-text-muted); }

/* Post gallery */
.pf-filters { display: flex; flex-wrap: wrap; gap: var(--sg-space-2); }
.pf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: var(--sg-space-4); }
.pf-post { display: flex; flex-direction: column; background: var(--sg-surface); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-l); overflow: hidden; box-shadow: var(--sg-shadow-1); min-width: 0; }
.pf-post-media { position: relative; aspect-ratio: 1 / 1; background: var(--sg-surface-2); }
.pf-media-link { display: block; width: 100%; height: 100%; min-height: 0; }
.pf-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.pf-noimg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sg-space-1); padding: var(--sg-space-4); text-align: center; color: var(--sg-text-muted); font-size: var(--sg-fs-s); border-bottom: var(--sg-hair) dashed var(--sg-border); }
.pf-noimg-title { font-family: var(--sg-font-display); color: var(--sg-text); font-size: var(--sg-fs-l); }
.pf-rank, .pf-best { position: absolute; top: var(--sg-space-3); padding: var(--sg-space-half) var(--sg-space-3); border-radius: var(--sg-radius-pill); font: 700 var(--sg-fs-s) var(--sg-font-body); background: var(--sg-surface); color: var(--sg-text); border: var(--sg-hair) solid var(--sg-border); box-shadow: var(--sg-shadow-1); }
.pf-rank { left: var(--sg-space-3); }
.pf-best { right: var(--sg-space-3); background: var(--sg-accent); color: var(--sg-accent-text); border-color: var(--sg-accent); letter-spacing: .04em; }
.pf-post-body { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-4); flex: 1; }
.pf-post-meta { font-size: var(--sg-fs-s); color: var(--sg-text-muted); font-weight: 600; }
.pf-post-title { font: 700 var(--sg-fs-l)/1.3 var(--sg-font-body); margin: 0; }
.pf-post-caption { font-size: var(--sg-fs-s); line-height: 1.5; }
.pf-post-theme, .pf-post-age { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.pf-post-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: var(--sg-space-2); margin: var(--sg-space-1) 0; }
.pf-pm { display: flex; flex-direction: column; padding: var(--sg-space-2); background: var(--sg-bg); border-radius: var(--sg-radius-s); }
.pf-pm dt { font-size: var(--sg-fs-xs); color: var(--sg-text-muted); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.pf-pm dd { margin: 0; font: 700 var(--sg-fs-l) var(--sg-font-body); }
.pf-pm--missing dd { font-weight: 500; font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.pf-actions--post { margin-top: auto; }
.pf-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-3); }

/* Rows, lines, costs */
.pf-gsc { display: flex; flex-direction: column; gap: var(--sg-space-3); padding: var(--sg-space-4); background: var(--sg-surface); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-l); }
.pf-gsc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sg-space-4); }
.pf-gsc-stat { display: flex; flex-direction: column; gap: var(--sg-space-1); }
.pf-gsc-label { font-weight: 700; font-size: var(--sg-fs-s); }
.pf-rows, .pf-lines, .pf-costs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pf-row, .pf-line-item, .pf-cost { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sg-space-2) var(--sg-space-4); padding: var(--sg-space-3) 0; border-bottom: var(--sg-hair) solid var(--sg-border); }
.pf-row-label { font-weight: 600; overflow-wrap: anywhere; }
.pf-row-nums, .pf-cost-nums { color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.pf-line-text { display: flex; flex-direction: column; gap: var(--sg-space-1); flex: 1 1 18rem; min-width: 0; }
.pf-cost { flex-direction: column; align-items: flex-start; gap: var(--sg-space-1); }
.pf-cost-label { font-weight: 600; }
.pf-unavail, .pf-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-3); padding: var(--sg-space-4); background: var(--sg-surface-2); border: var(--sg-hair) dashed var(--sg-border); border-radius: var(--sg-radius-m); }
.pf-error { border-style: solid; border-color: var(--sg-danger); }

/* Tablet and narrower content columns */
@container pf (max-width: 760px) {
  .pf-mission, .pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-mission .pf-tile:first-child { grid-column: 1 / -1; }
  .pf-trends { grid-template-columns: minmax(0, 1fr); }
  .pf-picker { min-width: 0; }
  .pf-strip { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-strip .pf-ask { grid-column: 1 / -1; justify-self: start; }
  .pf-fresh { grid-template-columns: minmax(0, 1fr); }
  .pf-primary { max-width: none; }
}
/* Phone: one vertical task-focused column, readable labels, no horizontal scroll */
@container pf (max-width: 560px) {
  .pf { gap: var(--sg-space-4); }
  .pf-body { gap: var(--sg-space-6); }
  .pf-mission, .pf-tiles, .pf-gsc-stats { grid-template-columns: minmax(0, 1fr); }
  .pf-mission .pf-tile:first-child { grid-column: auto; }
  .pf-chips { display: none; }
  .pf-jump-select { display: block; }
  .pf-picker-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pf-step { padding: 0 var(--sg-space-2); }
  .pf-label { display: none; }
  .pf-strip { grid-template-columns: minmax(0, 1fr); }
  .pf-tile--mission { padding: var(--sg-space-4); }
  .pf-gallery { grid-template-columns: minmax(0, 1fr); }
  .pf-post { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sg-space-1) var(--sg-space-3); padding: var(--sg-space-3); align-content: start; }
  .pf-post-media { grid-column: 1; grid-row: 1 / span 3; width: 7.5rem; height: 7.5rem; border-radius: var(--sg-radius-m); overflow: hidden; }
  .pf-post-body { display: contents; }
  .pf-post-meta, .pf-post-title, .pf-post-caption { grid-column: 2; }
  .pf-post-theme, .pf-post-age, .pf-post-metrics, .pf-post .pf-basis, .pf-actions--post { grid-column: 1 / -1; }
  .pf-post-caption { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .pf-noimg { padding: var(--sg-space-2); }
  .pf-noimg-why { display: none; }
  .pf-rank, .pf-best { top: var(--sg-space-1); font-size: var(--sg-fs-xs); padding: 0 var(--sg-space-2); }
  .pf-rank { left: var(--sg-space-1); }
  .pf-best { right: auto; left: var(--sg-space-1); top: auto; bottom: var(--sg-space-1); }
  .pf-actions .sg-btn { flex: 1 1 auto; }
  .pf-actions--post .sg-btn { flex: 1 1 100%; }
  .pf-spark { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pf, .pf * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.pf-link { color: var(--sg-info); text-decoration: underline; text-underline-offset: var(--sg-space-half); display: inline-flex; align-items: center; min-height: var(--sg-tap); }
.pf-fresh:empty, .pf-jump:empty { display: none; }

/* Each section names the one window it belongs to, so a 7-day figure is never mistaken for a 28-day one */
.pf-scope { align-self: flex-start; display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--sg-space-3); border-radius: var(--sg-radius-pill); border: var(--sg-hair) solid var(--sg-border-strong, var(--sg-border));
  background: var(--sg-surface-2); color: var(--sg-text); font: 700 var(--sg-fs-xs) var(--sg-font-body); letter-spacing: .06em; text-transform: uppercase; }

/* ---- agency-status.css ---- */
/* Account lead weekly status (P0-2). Shared tokens and component classes only. */
.agency-status { margin-bottom: var(--sg-space-4); }
.agency-status__card { display: flex; flex-direction: column; gap: var(--sg-space-3); padding: var(--sg-space-5); }
.agency-status__title, .agency-status__h { margin: 0; }
.agency-status__sub { margin: 0; font-size: var(--sg-fs-s); }
.agency-status__lines, .agency-status__items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sg-space-2); line-height: 1.45; }
.agency-status__lines li, .agency-status__items li { overflow-wrap: anywhere; }
.agency-status__link { white-space: nowrap; }
.agency-status__more, .agency-status__ask { align-self: flex-start; text-decoration: none; }
.agency-status__unavailable { margin: 0; color: var(--sg-text-muted); font-style: italic; }
.agency-status__sum { margin: 0; }
.agency-status--page { display: flex; flex-direction: column; gap: var(--sg-space-4); max-width: var(--sg-col-read); }
.agency-status__sec { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.agency-status__sec > h3 { margin: 0; }
@media (max-width: 760px) { .agency-status__card { padding: var(--sg-space-4); } .agency-status__more, .agency-status__ask { align-self: stretch; text-align: center; } }

/* ---- post-room.css ---- */
/* Post Room (#482, #211). Uses ONLY --sg-* tokens and shared component classes; no colour, font or size is invented here.
   Desktop (1024 and up): a sticky column beside the Studio's week grid (studio.css sizes it). Phones: a full-screen sheet. */
.stu-room > .pr { position: sticky; top: var(--sgx-top-h, 7.5rem); max-height: calc(100vh - var(--sgx-top-h, 7.5rem) - var(--sg-space-4)); min-height: 0; }
.pr-back { flex: 0 0 auto; }

.pr { display: flex; flex-direction: column; gap: var(--sg-space-4); padding: var(--sg-space-4); background: var(--sg-surface); border: var(--sg-hair) solid var(--sg-border);
  border-radius: var(--sg-radius-l); color: var(--sg-text); font-family: var(--sg-font-body); min-width: 0;
  max-height: calc(100vh - 11.875rem); min-height: 40rem; overflow-y: auto; }
.pr-empty { display: flex; flex-direction: column; gap: var(--sg-space-2); padding: var(--sg-space-6) var(--sg-space-3); }
.pr-empty__title, .pr-h { font-family: var(--sg-font-display); font-weight: var(--sg-fw-regular); font-size: var(--sg-fs-xl); line-height: var(--sg-lh-tight); margin: 0; }
.pr-top { display: flex; align-items: center; gap: var(--sg-space-3); }
.pr-top__title { min-width: 0; flex: 1 1 auto; }
.pr-sub { margin: var(--sg-space-1) 0 0; color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.pr-none { margin: 0; color: var(--sg-text-muted); font-size: var(--sg-fs-s); }

.pr-hero { display: flex; flex-direction: column; gap: var(--sg-space-3); }
.pr-media { display: flex; flex-direction: column; gap: var(--sg-space-1); }
.pr-media__img { display: block; width: 100%; max-height: 23.75rem; object-fit: contain; background: var(--sg-media-bg); border-radius: var(--sg-radius-m); }
.pr-media__none { display: flex; align-items: center; justify-content: center; min-height: 13.75rem; padding: var(--sg-space-4); text-align: center; color: var(--sg-text-muted);
  background: var(--sg-media-bg); border-radius: var(--sg-radius-m); border: var(--sg-hair) dashed var(--sg-border); }
.pr-chips, .pr-status, .pr-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); }
.pr-chip[data-state="needs"] { border-color: var(--sg-accent); color: var(--sg-text); background: var(--sg-accent-soft); }
.pr-chip[data-state="progress"] { border-color: var(--sg-state-progress); background: var(--sg-state-progress-soft); }
.pr-badge[data-state="live"] { background: var(--sg-state-live-soft); color: var(--sg-state-live); }
.pr-badge[data-state="queued"], .pr-badge[data-state="accepted"] { background: var(--sg-state-scheduled-soft); color: var(--sg-state-scheduled); }
.pr-badge[data-state="held"], .pr-badge[data-state="failed"], .pr-badge[data-state="fail"] { background: var(--sg-state-failed-soft); color: var(--sg-state-failed); }
.pr-badge[data-state="pass"] { background: var(--sg-success-soft); color: var(--sg-success); }

.pr-sec { display: flex; flex-direction: column; gap: var(--sg-space-2); padding-top: var(--sg-space-3); border-top: var(--sg-hair) solid var(--sg-border); }
.pr-sec__title { margin: 0; font: var(--sg-fw-bold) var(--sg-fs-xs) var(--sg-font-body); letter-spacing: var(--sg-tracking-label); text-transform: uppercase; color: var(--sg-accent); }
.pr-kvs { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.pr-kv { display: grid; grid-template-columns: minmax(6.5em, 30%) 1fr; gap: var(--sg-space-3); align-items: baseline; }
.pr-kv__k { color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.pr-kv__v { font-size: var(--sg-fs-s); overflow-wrap: anywhere; }
.pr-caption__text { margin: 0 0 var(--sg-space-2); white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--sg-lh-body); }
.pr-score { display: flex; align-items: center; gap: var(--sg-space-3); }
.pr-score__n { font-family: var(--sg-font-display); font-size: var(--sg-type-title); line-height: var(--sg-lh-tight); }
.pr-findings, .pr-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.pr-finding { display: flex; gap: var(--sg-space-2); align-items: baseline; font-size: var(--sg-fs-s); }
.pr-finding__mark { flex: 0 0 auto; min-width: 3.2em; font-weight: var(--sg-fw-semibold); }
.pr-finding[data-state="fail"] .pr-finding__mark { color: var(--sg-state-failed); }
.pr-finding[data-state="pass"] .pr-finding__mark { color: var(--sg-success); }
.pr-reco { margin: 0; line-height: var(--sg-lh-body); }
.pr-thread__item { display: flex; flex-direction: column; gap: var(--sg-space-1); padding-left: var(--sg-space-3); border-left: var(--sg-line-w) solid var(--sg-border-strong); font-size: var(--sg-fs-s); overflow-wrap: anywhere; }
.pr-thread__at { color: var(--sg-text-muted); font-size: var(--sg-fs-xs); }
.pr-actions { display: flex; flex-direction: column; gap: var(--sg-space-3); }
.pr-note { width: 100%; min-height: calc(var(--sg-tap) * 2); box-sizing: border-box; }
.pr-result { margin: 0; color: var(--sg-text); font-size: var(--sg-fs-s); min-height: 1.2em; }

@media (max-width: 1023.98px) {
  .stu-room > .pr { position: static; max-height: none; }
  .pr { display: none; }
  .pr.pr--open { display: flex; position: fixed; inset: 0; z-index: var(--sg-z-sheet); max-height: none; min-height: 0; border-radius: 0; border: 0; }
}
/* Oct 31 2026 audit: the brief sentence first, the self-review warning in red, the rest behind Details. */
.pr-brief { margin: 0; font-size: var(--sg-fs-m); line-height: var(--sg-lh-body); }
.pr-self { margin: 0; padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-state-failed-soft); color: var(--sg-state-failed); font-size: var(--sg-fs-s); font-weight: var(--sg-fw-semibold); }
.pr-more { border-top: var(--sg-hair) solid var(--sg-border); padding-top: var(--sg-space-3); }
.pr-more__sum { cursor: pointer; min-height: var(--sg-tap); display: flex; align-items: center; color: var(--sg-text-muted); font-size: var(--sg-fs-s); }
.pr-more[open] { display: flex; flex-direction: column; gap: var(--sg-space-4); }
.pr-stale { margin: var(--sg-space-1) 0 0; padding: var(--sg-space-2) var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-warning-soft); color: var(--sg-warning); font-size: var(--sg-fs-s); }

/* ---- pipeline.css ---- */
/* Team and pipeline (#506, #487). Shared tokens only; works from 375px; every button is at least the shared tap size. */
.pipe { min-width: 0; }
.pipe__h2 { margin: 0 0 var(--sg-space-2); font-size: var(--sg-fs-xl); font-weight: var(--sg-fw-semibold); line-height: var(--sg-lh-snug); }
.pipe__h3 { margin: var(--sg-space-4) 0 var(--sg-space-2); font-size: var(--sg-fs-m); font-weight: var(--sg-fw-semibold); }
.pipe__week, .pipe__team, .pipe__recs { min-width: 0; }
.pipe__viewonly { margin: 0; padding: var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-info-soft); color: var(--sg-text); font-size: var(--sg-fs-s); }
.pipe__unavailable { margin: 0; color: var(--sg-warning); font-size: var(--sg-fs-s); }

.pipe__band { list-style: none; margin: var(--sg-space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sg-space-2); }
.pipe__tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sg-space-1); padding: var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-surface-2); border: var(--sg-hair) solid var(--sg-border); min-height: var(--sg-tap); }
.pipe__count { font-size: var(--sg-type-title); font-weight: var(--sg-fw-bold); line-height: var(--sg-lh-tight); }
.pipe__tilelabel { font-size: var(--sg-fs-s); color: var(--sg-text-muted); }
.pipe__tile--made { background: var(--sg-state-progress-soft); }
.pipe__tile--checked { background: var(--sg-state-pending-soft); }
.pipe__tile--scheduled { background: var(--sg-state-scheduled-soft); }
.pipe__tile--live { background: var(--sg-state-live-soft); }

.pipe__stuck { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.pipe__stuckitem { padding: var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-danger-soft); border: var(--sg-hair) solid var(--sg-danger); font-size: var(--sg-fs-s); line-height: var(--sg-lh-body); }

.pipe__board { margin-top: var(--sg-space-4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sg-space-3); }
.pipe__col { min-width: 0; }
.pipe__colhead { margin: 0 0 var(--sg-space-2); font-size: var(--sg-fs-s); font-weight: var(--sg-fw-semibold); color: var(--sg-text-muted); letter-spacing: var(--sg-tracking-label); }
.pipe__posts, .pipe__reclist, .pipe__teamlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.pipe__post { padding: var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-surface-2); border: var(--sg-hair) solid var(--sg-border); overflow-wrap: anywhere; }
.pipe__post--stuck { border-color: var(--sg-danger); }
.pipe__title { margin: 0 0 var(--sg-space-1); font-weight: var(--sg-fw-semibold); font-size: var(--sg-fs-m); line-height: var(--sg-lh-snug); }
.pipe__line { margin: 0; font-size: var(--sg-fs-s); line-height: var(--sg-lh-body); }
.pipe__why { color: var(--sg-danger); }
.pipe__empty { margin: 0; font-size: var(--sg-fs-s); }

.pipe__member { font-size: var(--sg-fs-s); line-height: var(--sg-lh-body); overflow-wrap: anywhere; }

.pipe__rec { padding: var(--sg-space-3); border-radius: var(--sg-radius-m); background: var(--sg-surface-2); border: var(--sg-hair) solid var(--sg-border); display: flex; flex-direction: column; gap: var(--sg-space-1); overflow-wrap: anywhere; }
.pipe__state { align-self: flex-start; padding: var(--sg-space-1) var(--sg-space-2); border-radius: var(--sg-radius-pill); font-size: var(--sg-fs-xs); font-weight: var(--sg-fw-semibold); background: var(--sg-neutral-soft); color: var(--sg-text); }
.pipe__state--confirmed { background: var(--sg-state-pending-soft); }
.pipe__state--running { background: var(--sg-state-progress-soft); }
.pipe__state--measured { background: var(--sg-state-live-soft); }
.pipe__evidence { margin: var(--sg-space-1) 0 0; padding-left: var(--sg-space-4); font-size: var(--sg-fs-s); line-height: var(--sg-lh-body); }
.pipe__ask { align-self: flex-start; min-height: var(--sg-tap); min-width: var(--sg-tap); margin-top: var(--sg-space-2); }

.pipe__headline { margin: 0; font-size: var(--sg-fs-m); font-weight: var(--sg-fw-semibold); }
.pipe__headline--warn { color: var(--sg-warning); }
.pipe__all { margin-top: var(--sg-space-4); }
.pipe__allsum { cursor: pointer; min-height: var(--sg-tap); display: flex; align-items: center; font-size: var(--sg-fs-s); font-weight: var(--sg-fw-semibold); }
.pipe__all > .pipe__board { margin-top: var(--sg-space-2); }
.pipe__inhand { margin: var(--sg-space-1) 0 0; padding-left: var(--sg-space-4); font-size: var(--sg-fs-s); line-height: var(--sg-lh-body); }

@media (max-width: 1100px) { .pipe__board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .pipe__band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipe__board { grid-template-columns: 1fr; }
}

/* #470 #605: the real-time assembly line, one column per stage that wraps to one column on a phone, cards with a maker badge */
.pipe__asm { min-width: 0; }
.pipe__agents { list-style: none; margin: 0 0 var(--sg-space-3); padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.pipe__agent { display: flex; align-items: flex-start; gap: var(--sg-space-2); font-size: var(--sg-fs-s); line-height: var(--sg-lh-body); overflow-wrap: anywhere; min-width: 0; }
.pipe__agent--stale .pipe__agentline { color: var(--sg-warning); }
.pipe__agentline { min-width: 0; }
.pipe__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--sg-radius-pill); background: var(--sg-neutral-soft); color: var(--sg-text); font-size: var(--sg-fs-xs); font-weight: var(--sg-fw-bold); }
.pipe__avatar--gemini { background: var(--sg-state-progress-soft); }
.pipe__avatar--claude { background: var(--sg-state-pending-soft); }
.pipe__avatar--codex { background: var(--sg-state-scheduled-soft); }
.pipe__asmboard { margin-top: var(--sg-space-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--sg-space-3); }
.pipe__asmcol { min-width: 0; }
.pipe__asmcol--empty .pipe__colhead { opacity: 0.6; }
.pipe__cardhead { margin: 0 0 var(--sg-space-1); display: flex; align-items: center; gap: var(--sg-space-2); min-width: 0; }
.pipe__cardhead .pipe__title { margin: 0; }
.pipe__on { font-weight: var(--sg-fw-semibold); }
@media (max-width: 600px) { .pipe__asmboard { grid-template-columns: 1fr; } .pipe__asmcol--empty { display: none; } .pipe__asmcol[data-asm-stage="planned"] { order: 1; } }   /* on a phone the work in hand comes first */

/* ---- pulse.css ---- */
/* Pulse (#658): the page around the board and the board's own classes, ported from the locked design
   (docs/agency-app/pulse-design.html) onto Maya's tokens (sg-tokens.css). Everything is scoped under .pulse, so nothing here
   reaches another page. The design's own variable names (--bg, --surface, --gold, --claude and so on) are defined on .pulse
   and point at the --sg-* tokens, so a band that colours an element with var(--gold) gets Maya's gold in Mission Control
   and in the paper theme alike. The core marks state with pulse-sel (selected), pulse-bad and pulse-warn (the health the route
   names); bands draw icons with pulse-ic. */

.pulse {
  --bg: var(--sg-bg); --surface: var(--sg-surface); --surface2: var(--sg-surface-2); --elevated: var(--sg-elevated);
  --border: var(--sg-border); --border2: var(--sg-border-strong); --lit: var(--sg-border-lit);
  --text: var(--sg-text); --muted: var(--sg-text-muted); --accent: var(--sg-accent); --accent-text: var(--sg-accent-text);
  --link: var(--sg-link); --pulse: var(--sg-pulse); --gold: var(--sg-gold-text); --accentsoft: var(--sg-accent-soft);
  --ok: var(--sg-success); --warn: var(--sg-warning); --bad: var(--sg-danger);
  --oksoft: var(--sg-success-soft); --badsoft: var(--sg-danger-soft); --warnsoft: var(--sg-warning-soft);
  --claude: #c3a6ff; --codex: #62d6ea; --gemini: var(--sg-gold-text); --maya: var(--sg-text); --fixer: var(--sg-danger);
  --font-display: var(--sg-font-display); --font-body: var(--sg-font-body); --font-mono: var(--sg-font-mono);
  container-type: inline-size; container-name: pulse;
  display: block; min-width: 0; max-width: 100%;
  color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--sg-radius-m, 8px); overflow: clip;
}
[data-theme="paper"] .pulse { --claude: #5b3fa8; --codex: #0d6477; }
.pulse *, .pulse *::before, .pulse *::after { box-sizing: border-box; }
.pulse button, .pulse select, .pulse textarea { font: inherit; color: inherit; }
.pulse :focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; }
.pulse [hidden] { display: none !important; }

/* ---- header ---- */
.pulse-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pulse-titles { min-width: 0; }
.pulse-title { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin: 0; color: var(--text); }
.pulse-sub { color: var(--muted); font-size: .84rem; margin: 2px 0 0; }
.pulse-spacer { margin-left: auto; }
.pulse-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-height: 40px; cursor: pointer; font-weight: 600; font-size: .84rem; color: var(--text); }
.pulse-btn:hover { border-color: var(--border2); }
.pulse-btn[aria-pressed="true"] { background: var(--accentsoft); box-shadow: inset 0 -2px 0 var(--accent); }
.pulse-clock { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.pulse-clock__now { font-weight: 600; font-size: .88rem; }
.pulse-clock__read { color: var(--muted); font-size: .74rem; }
.pulse-clock__pace { color: var(--muted); font-size: .74rem; }
.pulse-prod { margin-top: 2px; padding: 1px 8px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold); font-size: .72rem; font-weight: 700; }

/* ---- attention strip ---- */
.pulse-attn { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 6px 20px; border-bottom: 1px solid var(--border); font-size: .8rem; min-height: 44px; background: var(--surface); }
.pulse-attn__ok, .pulse-attn__lbl, .pulse-attn__wait { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-right: 6px; }
.pulse-attn__ok, .pulse-attn__wait { color: var(--muted); }
.pulse-attn__lbl { color: var(--text); }
.pulse-attn__ok::before, .pulse-attn__lbl::before, .pulse-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pulse-attn__ok::before { background: var(--ok); }
.pulse-attn__lbl::before { background: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 18%, transparent); }
.pulse-pill { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid color-mix(in srgb, var(--bad) 50%, transparent); color: var(--text); border-radius: 999px; padding: 5px 12px 5px 10px; min-height: 32px; cursor: pointer; font-size: .8rem; font-weight: 500; text-align: left; }
.pulse-pill::before { background: var(--bad); }
.pulse-pill--warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.pulse-pill--warn::before { background: var(--warn); }
.pulse-pill:hover { background: var(--surface2); }
.pulse-err { margin: 0; padding: 8px 20px; border-bottom: 1px solid var(--bad); background: var(--badsoft); color: var(--text); font-size: .86rem; }

/* ---- board and side panel ---- */
.pulse-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; min-width: 0; background: var(--bg); }
.pulse-noside .pulse-side { display: none; }
.pulse-boardwrap { overflow: auto; padding: 6px 6px 16px; min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
.pulse-boardwrap:focus { outline: none; }
.pulse-boardhost { min-width: 0; }
/* #658 c7 (Roman, Nov 14 2026: "Cmd- makes the board grow"): the board has one size, 1240 CSS px, the size it already had at 100% zoom on a
   1280, 1440 or 1920 window. At width:100% it filled its column, and because the menu and the Activity panel keep their CSS widths, zooming
   out widened the column and drew the board bigger on screen (a 1920 window at 67%: 1463 device px against 1240). With one CSS size, the
   browser's zoom scales it as it scales everything else: zooming out shows more, zooming in enlarges it, and a column narrower than the
   board scrolls it inside its own box, as at phone width. A column wider than the board centres it. */
.pulse .pulse-board { display: block; width: 1240px; min-width: 1240px; max-width: none; height: auto; margin: 0 auto; }
.pulse-side { border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-width: 0; min-height: 0;
  position: sticky; top: calc(var(--sgx-top-h, 3.5rem) + 8px); max-height: calc(100vh - var(--sgx-top-h, 3.5rem) - 16px); }
.pulse-side__bar { padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.pulse-side__hide { background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; min-height: 32px; cursor: pointer; font-weight: 600; font-size: .78rem; color: var(--muted); }
.pulse-side__hide:hover { color: var(--text); border-color: var(--border2); }
.pulse-side__pane { padding: 16px 16px 24px; overflow-y: auto; min-height: 0; flex: 1; scrollbar-color: var(--border2) var(--surface); scrollbar-width: thin; }
.pulse-noside .pulse-body { grid-template-columns: minmax(0, 1fr) auto; }
/* The edge button that brings the panel back. Sticky in the panel's column (a fixed button would sit inside the .pulse container, not the window). */
.pulse-showside { position: sticky; top: calc(var(--sgx-top-h, 3.5rem) + 30vh); align-self: start; z-index: 2; background: var(--accent); color: var(--accent-text); border: 0; border-radius: 8px 0 0 8px;
  padding: 14px 10px; min-height: 44px; cursor: pointer; font-weight: 700; font-size: .84rem; writing-mode: vertical-rl; margin-top: 24px; }

/* ---- side panel content ---- */
.pulse-detail__title { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 2px; color: var(--text); }
.pulse-kind { color: var(--gold); font-size: .78rem; font-weight: 600; margin: 0 0 10px; }
.pulse-hint { color: var(--muted); font-size: .8rem; margin: 0 0 6px; }
.pulse-tech { margin: 12px 0 0; font-size: .8rem; }
.pulse-tech summary { cursor: pointer; color: var(--muted); }
.pulse-tech code, .pulse-tech p { overflow-wrap: anywhere; }
.pulse-h3 { font-size: .76rem; font-weight: 700; color: var(--muted); margin: 16px 0 4px; }
.pulse-side__pane p { margin: 0 0 6px; font-size: .9rem; }
.pulse-list { margin: 0; padding-left: 18px; font-size: .88rem; }
.pulse-side__pane code { font-family: var(--font-mono); font-size: .76rem; word-break: break-all; color: var(--link); }
.pulse-prob { border: 1px solid var(--bad); background: var(--badsoft); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; font-size: .86rem; }
.pulse-prob--warn { border-color: var(--warn); background: var(--warnsoft); }
.pulse-prob strong { display: block; font-size: .9rem; }
.pulse-prob__cause { margin: 6px 0 0 !important; font-size: .8rem !important; color: var(--muted); }
.pulse-ctx { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 6px 0; font-size: .8rem; color: var(--muted); }
.pulse-askbtn, .pulse-signin { display: block; width: 100%; text-align: left; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-height: 44px; margin: 6px 0; cursor: pointer; font-size: .88rem; color: var(--text); text-decoration: none; }
.pulse-askbtn:hover, .pulse-signin:hover { border-color: var(--accent); }
.pulse-signin { background: var(--accent); color: var(--accent-text); font-weight: 700; text-align: center; border-color: var(--accent); }
.pulse-sent { font-size: .82rem !important; color: var(--muted); margin-top: 6px !important; }
.pulse-shot { margin: 8px auto 10px; border: 1px solid var(--lit); border-radius: 8px; background: var(--sg-media-bg, var(--surface2)); overflow: hidden; max-width: 260px; display: flex; align-items: center; justify-content: center; }
.pulse-shot--tall { max-width: 200px; aspect-ratio: 9 / 16; }
.pulse-shot img, .pulse-shot video { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; }
.pulse-caption { white-space: pre-wrap; overflow-wrap: anywhere; }
.pulse-facts { list-style: none; padding: 0; margin: 0 0 6px; }
.pulse-facts li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding: 6px 0; font-size: .84rem; }
.pulse-facts li span:first-child { color: var(--muted); }
.pulse-facts li span:last-child { text-align: right; overflow-wrap: anywhere; }
.pulse-openbtn { display: block; width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-height: 44px; margin: 6px 0; cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--text); text-align: center; text-decoration: none; }
.pulse-openbtn:hover { border-color: var(--accent); }
.pulse-fb textarea { display: block; width: 100%; min-height: 76px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: .86rem; resize: vertical; margin: 6px 0; }
.pulse-go { display: block; width: 100%; background: var(--accent); color: var(--accent-text); border: 1px solid var(--accent); border-radius: 8px; padding: 10px 12px; min-height: 44px; margin: 6px 0; cursor: pointer; font-weight: 700; font-size: .88rem; text-align: center; }
.pulse-actions-mount:empty { display: none; }
/* Post actions (pulse-actions.js, track E): the notes box and the Edit and Remake buttons, drawn only for an owner. */
.pulse-actions { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.pulse-actions__label { display: block; color: var(--muted); font-size: .8rem; margin: 0 0 4px; }
.pulse-actions__note { display: block; width: 100%; min-height: 76px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: .86rem; resize: vertical; margin: 6px 0; }
.pulse-actions select { display: block; width: 100%; margin: 6px 0; min-height: 40px; }
.pulse-actions__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.pulse-actions__buttons button { flex: 1 1 0; min-height: 44px; }
.pulse-actions__result { font-size: .82rem !important; color: var(--muted); margin: 6px 0 0 !important; }
.pulse-actions__result:empty { display: none; }
.pulse-actions__none { color: var(--muted); font-size: .84rem !important; }
.pulse-skill { border-left: 2px solid var(--border2); padding: 0 0 0 10px; margin: 0 0 8px; }
.pulse-skill p { font-size: .84rem !important; color: var(--muted); }
.pulse-back { background: transparent; border: 0; padding: 0 0 10px; cursor: pointer; color: var(--link); font-weight: 600; font-size: .85rem; min-height: 32px; }
.pulse-log { list-style: none; padding: 0; margin: 0; }
.pulse-log li { border-bottom: 1px solid var(--border); }
.pulse-log__item { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 0; cursor: pointer; font-size: .86rem; min-height: 44px; color: var(--text); }
.pulse-log__item--plain { cursor: default; }
button.pulse-log__item:hover { color: var(--link); }
.pulse-log time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .74rem; display: block; }
.pulse-log__none { color: var(--muted); font-size: .86rem; padding: 8px 0; }
.pulse-legend { margin: 6px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--muted); }
.pulse-legend li { margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.pulse-legend__ic { flex: none; width: 22px; height: 22px; }
.pulse-legend strong { color: var(--text); font-weight: 600; }
.pulse-legend__line { fill: none; stroke: var(--text); stroke-width: 1.6; }
.pulse-legend__gold { fill: none; stroke: var(--gold); stroke-width: 1.8; }
.pulse-legend__fill { fill: var(--accent); }
.pulse-legend__solid { fill: var(--text); }
.pulse-legend__link { fill: none; stroke: var(--claude); stroke-width: 2; stroke-dasharray: 4 4; }

/* ---- the board's classes, kept from the design for the band files ---- */
.pulse .t { fill: var(--text); font-family: var(--font-body); }
.pulse .m { fill: var(--muted); font-family: var(--font-body); }
.pulse .halo { paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.pulse .band { fill: var(--gold); font-family: var(--font-body); font-size: 13px; font-weight: 700; }
.pulse .node, .pulse [data-pulse-id] { cursor: pointer; }
.pulse .node:focus-visible, .pulse [data-pulse-id]:focus-visible { outline: none; }
.pulse .box { fill: var(--surface); stroke: var(--border); stroke-width: 1.2; }
.pulse .node:hover .box, .pulse [data-pulse-id]:hover .box { stroke: var(--lit); }
.pulse .node:focus-visible .box, .pulse [data-pulse-id]:focus-visible .box { stroke: var(--pulse); stroke-width: 2.4; }
.pulse .pulse-sel .box, .pulse .pulse-sel.box { stroke: var(--accent); stroke-width: 2.4; }
.pulse .node:hover .band { fill: var(--text); }
.pulse .ic, .pulse .pulse-ic { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pulse .icm { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pulse .wire { fill: none; stroke: var(--border); stroke-width: 1.2; }
/* #658 carrier 8 (Roman, Nov 14 2026: nothing on Pulse may be fake). Every endless motion below needs a data class that its band sets from the
   model, and only while the thing it stands for is real: a seat line flows only for a seat in a fresh run, the bus rails only while a message is
   open, a heartbeat dot only while the heartbeat is fresh, Maya's rings only while her beat is fresh. Without the class the shape is still. The pace
   (--pulse-pace, set from data-pace on the board, derived from observed work in pulse-live.js) scales each duration: calm slower, busy faster.
   test_pulse_wiring fails when an endless animation has no such class or no band ever sets it. */
.pulse { --pulse-pace: 1; }
.pulse[data-pace="calm"] { --pulse-pace: 1.6; }
.pulse[data-pace="busy"] { --pulse-pace: .6; }
.pulse .link { fill: none; stroke-width: 2; stroke-dasharray: 5 6; }
.pulse .link.pulse-seat-live { animation: pulse-flow calc(1.1s * var(--pulse-pace, 1)) linear infinite; }
.pulse .busflow { fill: none; stroke: var(--pulse); stroke-width: 2; stroke-dasharray: 3 14; opacity: .55; }
/* --pulse-rail is set by the bus band from the number of open messages (more open, faster) */
.pulse .busflow.pulse-flowing { animation: pulse-flow2 calc(var(--pulse-rail, 1.6s) * var(--pulse-pace, 1)) linear infinite; }
.pulse .busflow.pulse-flowing.pulse-flow-slow { animation-duration: calc(var(--pulse-rail, 1.6s) * 1.5 * var(--pulse-pace, 1)); }
.pulse .breath { fill: none; stroke: var(--accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.pulse .breath.pulse-beat-fresh { animation: pulse-breath calc(3.2s * var(--pulse-pace, 1)) ease-out infinite; }
.pulse .hb { transform-box: fill-box; transform-origin: center; opacity: .5; }
.pulse .hb.pulse-hb-fresh { opacity: 1; animation: pulse-hb calc(1.6s * var(--pulse-pace, 1)) ease-in-out infinite; }
.pulse .ringtrack { fill: none; stroke: var(--border); stroke-width: 3; }
.pulse .ring { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.pulse .row .bar { fill: var(--accent); }
/* "ran N min ago" on a clock row (pulse-band-always.js paintRan): red when the run record says the last run did not succeed */
.pulse .pulse-ran-failed { fill: var(--bad); font-weight: 700; }
.pulse .row.fire .box { fill: var(--accentsoft); stroke: var(--accent); }
.pulse .chip { cursor: pointer; transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.pulse .chip rect { fill: var(--surface2); stroke: var(--border2); stroke-width: 1.2; }
.pulse .chip:hover rect, .pulse .chip:focus-visible rect { stroke: var(--pulse); stroke-width: 2; }
.pulse .chip:focus-visible { outline: none; }
.pulse .chip.bad rect, .pulse .chip.pulse-bad rect { stroke: var(--bad); stroke-width: 2.2; fill: var(--badsoft); }
.pulse .chip.pulse-warn rect { stroke: var(--warn); stroke-width: 2.2; fill: var(--warnsoft); }
.pulse .chip.live rect { stroke: var(--ok); fill: var(--oksoft); }
.pulse .chip.pulse-sel rect { stroke: var(--accent); stroke-width: 2.6; }
.pulse .gate .box { fill: var(--surface2); }
.pulse .gate.pass .box { stroke: var(--ok); fill: var(--oksoft); stroke-width: 2.4; }
.pulse .gate.refuse .box { stroke: var(--bad); fill: var(--badsoft); stroke-width: 2.4; }
.pulse .glow .box { stroke: var(--gold); stroke-width: 2.4; }
.pulse .out .box { stroke-dasharray: 4 4; }
.pulse .out .hb { animation: none; opacity: .5; }
.pulse .locked .box { stroke: var(--warn); stroke-width: 2.2; fill: var(--warnsoft); }
.pulse .pulse-bad .box, .pulse .pulse-bad.box { stroke: var(--bad) !important; stroke-width: 2.8 !important; animation: pulse-alarm 1.1s ease-in-out infinite; }
.pulse .pulse-warn .box, .pulse .pulse-warn.box { stroke: var(--warn) !important; stroke-width: 2.4 !important; }
.pulse .pulse-bad .cdt { fill: var(--bad); }
/* #658 carrier 6: a part nothing watches yet (served level unwatched, "not watched") is grey, a fact and not a problem: muted words, a
   dashed border */
.pulse .pulse-unwatched .cdt { fill: var(--muted); }
.pulse .pulse-unwatched .box { stroke-dasharray: 4 3; }
.pulse .qbad { animation: pulse-blink 1s ease-in-out infinite; }
.pulse .beat { animation: pulse-beat .9s ease-out; }
.pulse .pkt { cursor: pointer; }
/* Classes the band files added (handbacks on the side-session notes, Nov 12): the hexagon group, a failed beat tick,
   a role with an AI seated, and a worker whose state or heartbeat the read does not carry. */
.pulse .pulse-cmo-hex { transform-box: fill-box; transform-origin: center; }
.pulse .tick { fill: var(--border); }
.pulse .pulse-tick-bad { fill: var(--bad) !important; }
.pulse .pulse-seated .box { stroke: var(--border2); }
.pulse .pulse-state-unknown .box { stroke-dasharray: 2 4; }
.pulse .pulse-hb-unknown { animation: none; opacity: .35; }
@keyframes pulse-flow { to { stroke-dashoffset: -22; } }
@keyframes pulse-flow2 { to { stroke-dashoffset: -34; } }
@keyframes pulse-breath { 0% { transform: scale(.78); opacity: .55; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes pulse-hb { 0%, 100% { opacity: .35; transform: scale(.8); } 35% { opacity: 1; transform: scale(1.15); } }
@keyframes pulse-alarm { 50% { stroke-opacity: .3; } }
@keyframes pulse-blink { 50% { opacity: .3; } }
@keyframes pulse-beat { 0% { transform: scale(1); } 25% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Pause: the board stops moving. It still reads every 5 seconds. */
.pulse-paused .link, .pulse-paused .busflow, .pulse-paused .breath, .pulse-paused .hb, .pulse-paused .qbad, .pulse-paused .beat,
.pulse-paused .pulse-bad .box, .pulse-paused .pulse-bad.box { animation-play-state: paused; }
.pulse-paused .chip { transition: none; }

/* Reduced motion: the class is set from the same media query, so a band can also read SG.Pulse.reducedMotion. */
.pulse-still .link, .pulse-still .busflow, .pulse-still .breath, .pulse-still .hb, .pulse-still .beat, .pulse-still .qbad,
.pulse-still .pulse-bad .box, .pulse-still .pulse-bad.box { animation: none; }
.pulse-still .chip { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pulse .link, .pulse .busflow, .pulse .breath, .pulse .hb, .pulse .beat, .pulse .qbad, .pulse .pulse-bad .box, .pulse .pulse-bad.box { animation: none; }
  .pulse .chip { transition: none; }
}

/* #658 c7 (coordinator's call, Nov 14 2026): on Pulse only, when the board's box is narrower than the board (1240 px plus its 2 x 6 px
   padding) with the app's full labelled menu, the menu folds to an icon rail, the 76 px one Maya's full screen conversation uses, and
   the page's side padding goes from 32 to 12 px, so the board shows whole at a 1440 window. pulse-page.js sets body.sgx-rail-compact and
   adds the rail's own fold and unfold button; leaving Pulse takes both away, so every other page keeps its full menu. The labels stay
   for screen readers and every icon keeps its tooltip (the rail item's title). */
body.sgx-rail-compact:not(.sgc-fullchat) .sg-shell.sgx-app { --sg-rail-w: 76px; }
body.sgx-rail-compact:not(.sgc-fullchat) .sgx-rail { padding: 16px 8px; }
body.sgx-rail-compact:not(.sgc-fullchat) .sgx-rail__item { flex-direction: column; justify-content: center; gap: 0; padding: 0; }
body.sgx-rail-compact .sgx-rail__label, body.sgx-rail-compact .sgx-rail-brand__words, body.sgx-rail-compact .sgx-rail-caption,
body.sgx-rail-compact .sgx-rail-maya .sgx-rail-brand__words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.sgx-rail-compact .sgx-rail-brand, body.sgx-rail-compact .sgx-rail-maya { justify-content: center; padding: 12px 0; }
body.sgx-rail-compact:not(.sgc-fullchat) .sgx-stage > .sg-shell__main { padding-left: 12px; padding-right: 12px; }
body.sgx-rail-compact:not(.sgc-fullchat) .sgx-pagehead { padding-left: 12px; padding-right: 12px; }
.sgx-rail-toggle { align-self: center; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; margin: 0 0 8px;
  background: transparent; color: var(--sg-text-muted); border: 1px solid var(--sg-border); border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; }
.sgx-rail-toggle:hover { color: var(--sg-text); border-color: var(--sg-border-strong); }
.sgx-rail-toggle[hidden] { display: none; }

/* #658 c7 (coordinator's call, Nov 14 2026): beside the board, a panel narrower than the board's 1240 px plus its own 360 left the board
   half hidden (50% of it visible at a 1280 window, 62% at 1440). The panel sits beside the board only when both fit whole: a page column
   of at least 1612 px (1240 + 2 x 6 padding + 360; a 1920 window with this app's menu). Narrower, down to phone width, it is a drawer:
   closed when the page opens, opened by Show activity or by a click on anything on the board, sliding in over the board's right edge
   without shrinking the board or moving the page; a part it would cover is scrolled clear inside the board's own box, and closing puts
   that scroll back. It closes by its own Hide panel button, Escape, or a click on the empty board. It lives in a
   zero-width grid column with a negative margin rather than position: fixed, because .pulse's container query contains fixed children.
   pulse-page.js reads --pulse-drawer to know which of the two it is. */
@container pulse (min-width: 761px) and (max-width: 1611.98px) {
  .pulse-body, .pulse-noside .pulse-body { --pulse-drawer: 1; grid-template-columns: minmax(0, 1fr) 0; }
  .pulse-side, .pulse-noside .pulse-side { display: flex; grid-column: 2; grid-row: 1; width: 360px; margin-left: -360px; z-index: 4;
    box-shadow: -10px 0 28px rgba(0, 0, 0, .35); transform: translateX(100%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s; }
  .pulse-drawer-open .pulse-side { transform: none; visibility: visible; transition: transform .2s ease; }
  /* room to scroll a part out from under the open drawer (pulse-page.js clearPart): the host is the board plus the drawer's width, so the box
     scrolls that far (padding on the host would not count: only the scroll box's own padding is scrollable room) */
  .pulse-drawer-room .pulse-boardhost { width: calc(1240px + 368px); }
  .pulse.pulse-drawer-room .pulse-board { margin: 0; }   /* the room class sits on .pulse itself */
  .pulse-showside { grid-column: 2; grid-row: 1; justify-self: end; margin-left: -44px; width: 44px; z-index: 3; }
}
.pulse-still .pulse-side { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .pulse .pulse-side { transition: none !important; } }

/* Phone width only (#658 c7, Roman's 11:45 AM EST screenshot, Nov 14 2026): the panel goes under the board when the page column is 760 px
   or less. It used to at 1100 px, so a 1280 window, or a 1440 one after Cmd+, stacked it, and a click then scrolled the page to the panel and
   the board's top out of view. Wider than a phone, the panel stays beside the board, never over it or pushing it, and the board scrolls
   inside its own box. At phone width a tap still brings the details into view (the Nov 13 regression), since there is no room beside it. */
@container pulse (max-width: 760px) {
  .pulse-body { grid-template-columns: minmax(0, 1fr); }
  .pulse-side { position: static; border-left: 0; border-top: 1px solid var(--border); max-height: none; }
  .pulse-side__pane { max-height: 70vh; }
  .pulse-spacer { margin-left: 0; }
  .pulse-noside .pulse-body { grid-template-columns: minmax(0, 1fr); }
  .pulse-showside { position: static; writing-mode: horizontal-tb; width: calc(100% - 32px); margin: 8px 16px 16px; border-radius: 8px; }
}
/* Phone: no sideways scroll of the page body. The board keeps its drawing size and scrolls inside its own box. */
@container pulse (max-width: 520px) {
  .pulse-head { padding: 10px 14px; }
  .pulse-attn { padding: 6px 14px; }
  .pulse-err { padding: 8px 14px; }
  .pulse-clock { align-items: flex-start; flex-basis: 100%; }
  .pulse-btn { flex: 1 1 0; min-height: 44px; }
  .pulse-boardwrap { max-height: 70vh; }
}

/* The beat's step ticks open their step (each is a real manifest beat step); the selected one is outlined. */
.pulse .pulse-tick { cursor: pointer; }
.pulse .pulse-tick:focus-visible { outline: none; }
.pulse .pulse-tick:focus-visible .tick, .pulse .pulse-tick.pulse-sel .tick { stroke: var(--accent); stroke-width: 2.4; }

/* ---- replay (#658 item 8.10, cc/static/pulse-replay.js) ---- */
.pulse-replay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 20px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.pulse-replay__field { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; }
.pulse-replay select { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-height: 40px; }
.pulse-replay__speeds { display: inline-flex; gap: 6px; }
.pulse-replay__note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .8rem; }
.pulse-replay__note:empty { display: none; }
.pulse-replay-banner__words { display: block; }
.pulse-replay-banner__not { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; color: var(--muted); }
.pulse-replay-banner { padding: 8px 20px; border-bottom: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 22%, var(--surface)); color: var(--text); font-size: .86rem; font-weight: 600; }
@container pulse (max-width: 520px) {
  .pulse-replay, .pulse-replay-banner { padding-left: 14px; padding-right: 14px; }
}

/* ---- library.css ---- */
/* Library page (#554 #522), moved out of app-shell.css on Oct 21 2026 (#605) so each page owns its stylesheet. Tokens only. */
.lib { display: flex; flex-direction: column; gap: var(--sg-space-4); max-width: 48rem; }
.lib-card { display: flex; flex-direction: column; gap: var(--sg-space-3); }
.lib-file { width: 100%; min-height: var(--sg-tap); }
.lib-file::file-selector-button { min-height: 2.25rem; margin-right: var(--sg-space-3); padding: 0 var(--sg-space-3); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-pill); background: var(--sg-surface); color: var(--sg-text); font: inherit; }
.lib .sg-btn { align-self: flex-start; }
.lib-progress { width: 100%; height: 0.5rem; accent-color: var(--sg-accent, currentColor); }
.lib-progress[hidden], .lib-status:empty { display: none; }
.lib-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sg-space-2); }
.lib-item { display: flex; align-items: flex-start; gap: var(--sg-space-3); padding: var(--sg-space-2) 0; border-bottom: var(--sg-hair) solid var(--sg-border); min-width: 0; }
.lib-item__text { display: flex; flex-direction: column; gap: var(--sg-space-half); min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.lib-item__title, .lib-item__detail, .lib-item__meta { overflow-wrap: anywhere; }
.lib-item__meta { font-size: var(--sg-fs-xs); }
/* #1199: folders, one tap target per folder, a count under its name; nothing scrolls sideways at 375 px */
.lib-level { margin: 0; font-size: var(--sg-fs-l, 1.125rem); }
.lib-level:focus { outline: none; }
.lib-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2); }
.lib-folders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--sg-space-3); }
.lib-folder { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sg-space-half); width: 100%; min-height: var(--sg-tap); padding: var(--sg-space-3); text-align: left; border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); background: var(--sg-surface); color: var(--sg-text); font: inherit; cursor: pointer; }
.lib-folder:hover, .lib-folder:focus-visible { border-color: var(--sg-accent, currentColor); }
.lib-folder__name { overflow-wrap: anywhere; }
.lib-receipts { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.lib-receipt { padding: var(--sg-space-3); border: var(--sg-hair) solid var(--sg-border); border-radius: var(--sg-radius-m); background: var(--sg-surface); }
.lib-sha, .lib-receipt strong { overflow-wrap: anywhere; }
/* #522 (Oct 19): one row per chosen file, thumbnail left, its own state line; a failed row is marked in words and colour, never only colour */
.lib-row { display: flex; align-items: flex-start; gap: var(--sg-space-3); min-width: 0; }
.lib-row__body { display: flex; flex-direction: column; gap: var(--sg-space-half); min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.lib-thumb { flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--sg-radius-m); background: var(--sg-border); }
.lib-thumb--none { display: flex; align-items: center; justify-content: center; font-size: var(--sg-fs-xs); }
.lib-thumb--missing { text-align: center; line-height: 1.15; overflow-wrap: anywhere; }   /* #658: "No picture available" fits the 3.5rem tile on three lines */
.lib-row[data-state="failed"] { border-color: var(--sg-danger); }
.lib-row[data-state="failed"] .lib-row__state { color: var(--sg-danger); font-weight: 600; }
.lib-cancel[hidden] { display: none; }
@media (max-width: 760px) {
  .lib .sg-btn { min-height: var(--sg-tap); align-self: stretch; }
}

/* ---- open-house.css ---- */
/* The open house (#658 carrier 7): the signed-out visitor's Maya page and the Library's visitor tiles. Tokens only (sg-tokens.css). */
.oh-chat { display: flex; flex-direction: column; gap: var(--sg-space-3, 12px); max-width: 52rem; margin: 0 auto; min-height: 30rem;
  height: calc(100dvh - 11rem); }
.oh-chat > * { min-width: 0; }
.oh-chat__head { display: flex; align-items: center; gap: var(--sg-space-3, 12px); }
.oh-chat__who { flex: 1 1 auto; min-width: 0; }
.oh-chat__name { margin: 0; font-size: 1.25rem; }
.oh-chat__role { margin: 0; }
.oh-chat__head, .oh-chat__note { flex: 0 0 auto; }
.oh-chat__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-2, 8px) var(--sg-space-3, 12px); }
.oh-chat__note > span { flex: 1 1 14rem; }
.oh-chat__thread { flex: 1 1 0; overflow-y: auto; min-height: 8rem; }
.oh-chat__chips { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: var(--sg-space-2, 8px); }
.oh-chat__links { display: flex; flex-wrap: wrap; gap: var(--sg-space-2, 8px); margin-top: var(--sg-space-2, 8px); }
.oh-chat__composer { flex: 0 0 auto; }
.oh-chat .sgc-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  /* a phone: the notice and the question chips take one short row each, so the conversation keeps the room (375 x 812 left the thread 100 px) */
  .oh-chat { height: calc(100dvh - 11rem); gap: var(--sg-space-2, 8px); }
  .oh-chat__role { display: none; }
  .oh-chat__note { padding: 8px 12px; font-size: 0.8125rem; gap: 6px 10px; }
  .oh-chat__note > span { flex-basis: 100%; }
  .oh-chat__signin { min-height: 36px; padding: 6px 14px; }
  .oh-chat__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .oh-chat__chips::-webkit-scrollbar { display: none; }
  .oh-chat__chips .sg-chip { flex: 0 0 auto; white-space: nowrap; }
  .oh-chat__thread { min-height: 12rem; }
}

/* Library: a licensed photo that may not be shown, and a tile that opens its picture. Its credit is the second line (library_folders.plain) */
.lib-private { font-style: italic; }
.lib-open { white-space: nowrap; }

/* ---- agency-design.css ---- */
/* Maya v3, #1047. The owner-approved proposal supplies the visual direction;
   existing modules still own data, permissions, decisions and publication.
   This final bundle layer preserves shared tokens and phone interaction rules. */
.sgx-rail-brand, .sgx-rail-maya { display: flex; align-items: center; gap: 12px; color: var(--sg-text); text-decoration: none; }
.sgx-rail-brand { padding: 16px 8px 28px; }
.sgx-rail-brand__words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sgx-rail-brand__words strong { font-size: 14px; }
.sgx-rail-brand__words small { color: var(--sg-text-muted); font-size: 12px; line-height: 1.5; }
.sgx-rail-brand .sgx-rail-brand__words strong { font-family: var(--sg-font-display); font-size: 18px; font-weight: 400; }
.sgx-rail-brand .sgx-rail-brand__words small { color: var(--sg-accent); text-transform: uppercase; letter-spacing: .08em; }
.sgx-rail-caption { padding: 8px 12px; margin-bottom: 4px; font-size: 11px; color: var(--sg-text-muted); }
.sgx-rail-maya { margin-top: auto; border-top: 1px solid var(--sg-border); padding: 24px 8px 8px; }
.sgx-rail-maya img { border-radius: 50%; border: 1px solid var(--sg-border); }
.sgx-breadcrumb { display: none; align-items: center; gap: 16px; font-size: 12px; color: var(--sg-text-muted); white-space: nowrap; }
/* Maya already has a named rail/tab destination and an Ask composer; the
   floating duplicate must not cover scheduled posts or report controls. */
.maya-comp { display: none; }
.sg-redesign-eyebrow { margin: 0 0 -8px; font-size: 12px; color: var(--sg-accent); }
.sg-redesign-deck { margin: -4px 0 8px; color: var(--sg-text-muted); font-size: 14px; line-height: 1.6; }

/* A wider labelled rail on ordinary pages; Maya keeps the narrow Muse rail. */
@media (min-width: 1101px) {
  body:not(.sgc-fullchat) .sg-shell.sgx-app { --sg-rail-w: 240px; grid-template-areas: "rail top" "rail main"; }
  body:not(.sgc-fullchat) .sgx-rail { top: 0; height: 100dvh; padding: 24px 20px; box-sizing: border-box; }
  body:not(.sgc-fullchat) .sgx-rail__item { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; min-height: 46px; font-size: 14px; text-align: left; }
  body:not(.sgc-fullchat) .sgx-rail__item[aria-current="page"] { box-shadow: none; border: 1px solid var(--sg-border); }
  .sgx-navbar > .sgx-brand { display: none; }
  .sgx-breadcrumb { display: inline-flex; }
  .sgx-stage > .sg-shell__main { padding: 32px; }
  .sgx-pagehead { padding: 32px 32px 0; }
  .sgx-pagehead:not([hidden]) + .sg-shell__main { padding-top: 24px; }
}
/* #658: from 1280 the open Maya panel is a third grid column (app-shell.css). The full height rail above names only two columns, so
   without a panel area here the three tracks met two names and the grid made five, crushing the page to 64 px. */
@media (min-width: 1280px) {
  body:not(.sgc-fullchat) .sg-shell.sgx-app[data-panel="open"] { grid-template-areas: "rail top top" "rail main panel"; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .sgx-rail-brand__words, .sgx-rail-caption, .sgx-rail-maya .sgx-rail-brand__words { display: none; }
  .sgx-rail-brand, .sgx-rail-maya { justify-content: center; padding: 12px 0; }
}
.sgx-pagehead__title, .stu-title, .tdy-title { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.035em; line-height: 1.25; }
.sgx-pagehead__purpose { margin-top: 10px; color: var(--sg-text-muted); }
.sg-card, .stu-card, .pr { box-shadow: none; }
.sg-btn { border-radius: 8px; }

/* Today uses the same complete owner-state snapshot as the bell. No orphan
   hero image is added: every picture stays attached to its named post link. */
.tdy { max-width: 1200px; width: 100%; margin: 0 auto; gap: 24px; }
.tdy-head { gap: 16px; }
.tdy-info { width: 40px; height: 40px; }
.tdy-dashboard { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.tdy-dashboard__primary { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.tdy-block { padding: 24px; background: var(--sg-surface-2); border: 1px solid var(--sg-border); border-radius: 12px; gap: 20px; }
.tdy-h { font-size: 18px; line-height: 1.4; letter-spacing: -.02em; text-transform: none; color: var(--sg-text); font-weight: 600; }
.tdy-need { padding: 16px; border-radius: 9px; background: var(--sg-surface); gap: 12px; }
.tdy-need__text { font-size: 14px; }
.tdy-fyi { border-top: 1px solid var(--sg-border); padding-top: 16px; gap: 12px; line-height: 1.6; }
.tdy-team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.tdy-team-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tdy-team-list p { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.6; }
.tdy-post__caption { font-weight: 600; line-height: 1.5; }
.tdy-day + .tdy-day { border-top: 1px solid var(--sg-border); padding-top: 20px; margin-top: 8px; }
.tdy-day__h { color: var(--sg-text); font-size: 18px; font-weight: 600; }
.tdy-post { background: transparent; border: 0; border-radius: 4px; padding: 12px 0; }
.tdy-list > li + li .tdy-post { border-top: 1px solid var(--sg-border); }
.tdy-thumb { width: 44px; height: 58px; border-radius: 3px; }
.tdy-post__body { gap: 6px; }
.tdy-week { font-family: var(--sg-font-display); font-size: 24px; line-height: 1.6; }
.tdy-ask { max-width: 680px; width: 100%; box-sizing: border-box; }

/* Posts, reports and the four Operations pages retain their real grids,
   filters, route parameters, comparisons, disclosure rows and source stamps. */
.stu { gap: 28px; }
.stu-days { gap: 12px; }
.stu-card { border-radius: 9px; background: var(--sg-surface-2); }
.stu-day__name { font-size: 12px; }
.stu-filters { display: flex; align-self: flex-end; gap: 4px; padding: 4px; border: 1px solid var(--sg-border); border-radius: 9px; }
.stu-filter { min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; color: var(--sg-text-muted); background: transparent; font: 500 12px var(--sg-font-body); cursor: pointer; }
.stu-filter[aria-pressed="true"] { color: var(--sg-text); background: var(--sg-accent-soft); }
.stu-filter:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 2px; }
.stu-card__body { padding: 12px; gap: 8px; font-size: 12px; }
.stu-card__tag { border-radius: 3px; }
.stu-card__openbtn { margin: 0 12px 12px; }
.pr { border-radius: 12px; }
.pr-top { position: sticky; top: 0; z-index: 2; background: var(--sg-surface, #0b1228); padding-block: 8px; }
.pf { max-width: 1200px; margin: 0 auto; }

/* Muse chat: full-height message column, bottom composer, independent
   profile/context panel. Existing keyboard and visualViewport code stays on. */
.sgc-profile { position: relative; text-align: center; padding: 40px 16px 28px; }
.sgc-profile__avatar { display: flex; justify-content: center; margin-bottom: 18px; }
.sgc-profile__avatar .maya-av, .sgc-profile__avatar .sg-avatar { width: 108px; height: 108px; }
.sgc-profile h2 { font: 600 22px var(--sg-font-body); margin: 0 0 8px; }
.sgc-profile p { font-size: 12px; margin: 0; }
.sgc-profile__close { position: absolute; right: 8px; top: 8px; font-size: 11px; }
.sgc-context-tabs { display: flex; border: 1px solid var(--sg-border); border-radius: 999px; padding: 4px; margin-bottom: 24px; background: var(--sg-surface-2); }
.sgc-context-tab { flex: 1; min-height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--sg-text-muted); font: 500 11px var(--sg-font-body); cursor: pointer; }
.sgc-context-tab[aria-selected="true"] { background: var(--sg-accent-soft); color: var(--sg-text); }
.sgc-context-tab:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 2px; }
.sgc-chat .sg-context-card { padding-top: 0; }
.sgc-chat .sg-chat__bar { gap: 12px; padding: 16px 24px; }
.sgc-chat .sg-thread { padding: 28px 24px; }
.sgc-chat .sg-composer { padding: 12px 24px 24px; }
.sgc-chat .sg-composer__row { border-radius: 999px; padding: 6px; border: 1px solid var(--sg-border); background: var(--sg-surface-2); gap: 6px; }
.sgc-chat .sg-composer__row .sg-textarea { border: 0; box-shadow: none; background: transparent; resize: none; }
.sgc-chat .sgc-send { border-radius: 999px; }
.sgc-chat .sg-thread > * { max-width: 43rem; }
.sgc-chat .sg-bubble__card { border-radius: 20px; padding: 20px; box-shadow: none; }
.sgc-chat .sg-bubble--user { max-width: min(36rem, 85%); }
.sgc-chat .sgc-chatsbtn { order: -1; }
body.sgc-fullchat .sgx-rail-brand__words, body.sgc-fullchat .sgx-rail-caption, body.sgc-fullchat .sgx-rail-maya .sgx-rail-brand__words { display: none; }
body.sgc-fullchat .sgx-rail-brand, body.sgc-fullchat .sgx-rail-maya { justify-content: center; padding: 16px 0; }
body.sgc-fullchat .sgx-rail__label { display: none; }
@media (min-width: 1280px) {
  body.sgc-fullchat .sgx-stage > .sg-shell__main { padding: 0; }
  .sgc-chat.sg-chat--screen { border: 0; border-radius: 0; box-shadow: none; }
  .sgc-chat[data-ctx="open"], .sgc-chat[data-list="collapsed"][data-ctx="open"] { grid-template-columns: minmax(0, 1fr) 300px; }
  .sgc-chat[data-list="open"][data-ctx="open"] { grid-template-columns: 260px minmax(0, 1fr) 300px; }
  .sgc-chat[data-ctx="open"] .sg-chat__context { position: static; width: auto; grid-column: -2 / -1; grid-row: 1; box-shadow: none; transform: none; overflow-y: auto; }
  .sgc-chat[data-ctx="open"] .sgc-scrim { display: none; }
}
@media (max-width: 1000px) { .tdy-dashboard { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .sgx-rail-brand, .sgx-rail-maya, .sgx-rail-caption { display: none; }
  .tdy { gap: 20px; }
  .tdy-block { padding: 18px; gap: 16px; }
  .tdy-dashboard, .tdy-dashboard__primary { gap: 20px; }
  .tdy-dashboard { display: flex; flex-direction: column; }
  .tdy-dashboard > *, .tdy-dashboard__primary > * { width: 100%; box-sizing: border-box; }
  .tdy-title { font-size: 26px; }
  .tdy-week { font-size: 20px; }
  .sgc-chat .sgc-ctxbtn { display: inline-flex; }
  .sgc-chat .sg-chat__bar { padding: 8px; gap: 4px; }
  .sgc-chat .sg-chat__bar .sg-btn { padding: 0 8px; font-size: 11px; }
  .sgc-chat .sgc-avatarhost { display: none; }
  .sgc-chat .sg-thread { padding: 20px 16px; }
  .sgc-chat .sg-composer { padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); }
  .sgc-chat .sg-bubble__card { padding: 16px; border-radius: 16px; }
  .sgc-profile { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .sgc-chat .sg-chat__context, .sgc-chat .sg-chat__list { transition: none; }
}

/* The existing media uploader stays in chat, with a reachable exit on phones. */
.sgc-attachment-dialog {
  width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  color: var(--sg-text, #f4f2f0);
  background: var(--sg-surface, #0b1228);
  border: 1px solid #33446b;
  border-radius: 16px;
  padding: 16px;
}
.sgc-attachment-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.sgc-attachment-dialog > button { position: sticky; top: 0; z-index: 1; background: #14203d; }
.stu-filters { flex-wrap: wrap; }

/* Essential message actions stay discoverable without a mouse hover. */
.sgc-chat .sg-bubble .sgc-act:not(.sgc-act--quiet) { opacity: 1; }
/* #658 (Nov 13 2026): the short 32 px row is for a pointer only; a touch screen keeps the 44 px tap row chat.css gives .sgc-act (Reply was
   61x32 on a phone). */
@media (hover: hover) { .sgc-chat .sg-bubble .sgc-act:not(.sgc-act--quiet) { min-height: 32px; } }
.sgc-chat .sg-chat__bar { flex-wrap: wrap; }
.sgc-chat .sgc-newtopic { flex-shrink: 0; }