/*
  Conglomerate Dashboard GEN3 — design system (E1a).
  Adapted from the ratified wireframe spike (spike/styles.css), which carries
  the humanandmachine.ai website token contract (founder 2026-07-16; source:
  HumanAndMachines website repo, app/src/styles/global.css). Light-first
  ink-on-paper grayscale, hairline borders, pill controls, black-filled
  primary, blueprint grid-paper behind the app canvas; dark is re-derived from
  the same neutral ramp. Fully self-contained: no external fonts, no CDN.

  Spike-only layers (dev control, Buddy/personalspace, guide, apply/audit,
  onboarding wizard, canvas map) are deliberately absent — E1a ships the shell,
  tokens and the personal landing only (spike/STAGES.md E1).

  The trailing "Legacy compatibility layer" styles the pre-E1 page bodies
  (org detail / tiles / settings) inside the new shell; it disappears with
  the E1b/E1c view refactors.
*/

/* Space Grotesk Variable — vendored under /assets/fonts/ (SIL OFL 1.1; the
   same @fontsource-variable build humanandmachine.ai self-hosts — the license
   permits self-hosting and redistribution with this notice; see
   src/assets/fonts/OFL-NOTE.md). Display face only (--font-display); body
   stays the system stack, exactly like the site. */

@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-wght.woff2?v=0.6.1") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lazurio MVP components. The canonical role-token override is deliberately
   kept once, at the end of this legacy stylesheet, so cascade precedence is
   explicit. Fable 5 visual review remains a pre-final-domain gate. */

.lazurio-brand {
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.02em;
}

.lazurio-brand__signal {
  align-self: center;
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: #0d12db;
}

.lazurio-brand__name {
  font-size: 17px;
  font-weight: 650;
}

.lazurio-brand__product {
  color: var(--text-subtle);
  font-size: 12px;
  font-weight: 600;
}

.workspace-launcher {
  margin: 32px 0 40px;
}

.workspace-launcher .section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 16px;
}

.workspace-launcher .section-heading h2 {
  margin: 8px 0 4px;
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -.035em;
}

.workspace-launcher .section-heading p,
.workspace-card p,
.workspace-launcher__notice p {
  margin: 0;
  color: var(--text-muted);
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workspace-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
}

.workspace-card__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.workspace-card__heading h3 {
  margin: 0 0 2px;
  font-size: 18px;
  letter-spacing: -.02em;
}

.workspace-card__heading p {
  font-size: 13px;
}

.workspace-card__mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #ebf1fe;
  color: #0b0eb4;
  font-weight: 700;
}

.workspace-card__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.workspace-link {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  color: var(--text);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.workspace-link:hover {
  border-color: #7083f7;
  background: #ebf1fe;
}

.workspace-link--t3code {
  border-color: var(--action);
  color: var(--action-fg);
  background: var(--action);
}

.workspace-link--t3code:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
}

.workspace-link__icon {
  color: inherit;
  font-family: var(--mono);
}

.workspace-launcher__notice {
  padding: 20px;
}

@media (max-width: 860px) {
  .workspace-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .workspace-card__links { grid-template-columns: 1fr; }
  .lazurio-brand__product { display: none; }
}
@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/space-grotesk-latin-ext-wght.woff2?v=0.6.1") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* Neutral surfaces / text — the site's ink/line/surface/page ramp */
  --bg: #fafafa;            /* site --color-page */
  --surface: #ffffff;       /* site --color-surface */
  --surface-2: #f4f4f4;     /* site --color-surface-alt */
  --surface-3: #ececec;     /* site --color-surface-mute */
  --border: #d6d6d6;        /* site --color-line (hairline) */
  --border-strong: #b8b8b8;
  --text: #1a1a1a;          /* site --color-ink */
  --text-muted: #4a4a4a;    /* site --color-ink-soft */
  --text-subtle: #676767;   /* site --color-ink-mute, darkened one step: #767676
                               is only 3.8–4.3:1 on the tinted soft fills and
                               --surface-3 this app (unlike the site) sets small
                               text on; #676767 clears AA 4.5 on all of them. */

  /* Neutral action (buttons, focus) — the site's black-filled primary + ink
     focus outline (no blue in the site's language). */
  --action: #1a1a1a;
  --action-fg: #ffffff;
  --action-hover: #000000;
  --focus: #1a1a1a;

  /* Grid-paper pattern (the site's blueprint hero grid) — drawn behind the app
     canvas, never inside cards. */
  --grid-line: rgba(26, 26, 26, .05);

  /* Entity accents (SPEC §6) — desaturated to sit on the site's off-white */
  --teal: #0f766e;        /* Colleague */
  --lavender: #655ab8;    /* AI Colleague (AA 4.5 as text on --lavender-soft) */
  --gold: #7e621b;        /* Buddy — muted ochre, tuned for light (AA 4.5 as
                             text on --gold-soft, e.g. the Buddy hero name) */

  /* Ink for text/glyphs sitting on a SOLID teal/gold fill — flips per theme
     exactly like --action-fg (white on the dark light-mode accent; dark ink on
     the light dark-mode accent) so on-accent glyphs stay legible (>=3:1) in both
     themes. Plain #fff washed out on the lighter dark-mode gold/teal. */
  --teal-fg: #ffffff;
  --gold-fg: #ffffff;

  /* Accent soft-border tokens (theme-aware; desaturated toward the site's
     grayscale so accents whisper rather than shout). */
  --teal-border: #b9d6d1;
  --lavender-border: #c6c0e4;
  --gold-border: #dccfa2;
  --red-border: #ddbcb6;
  --admin-fg: #675294;
  --admin-border: #ccc2e4;

  /* Banner text tints (theme-aware; muted to the site's restraint). */
  --banner-proposal-fg: #574c85;
  --banner-error-fg: #83382e;
  --banner-warning-fg: #7d5a1a;

  /* Scroll-shadow edge tint (matrix overflow affordance): a dark edge in light
     mode, a faint light edge in dark mode — so the cue reads in both. */
  --scroll-edge: rgba(26, 26, 26, .14);

  /* State dots (SPEC §6) — desaturated */
  --state-green: #3a7a58;   /* available */
  --state-amber: #9a6d1f;   /* missing_access */
  --state-purple: #8a7ca8;  /* planned_slot */
  --state-gray: #9a9a9a;    /* unknown / muted */

  /* Severity — desaturated */
  --sev-red: #a84437;     /* Needs fixing (AA 4.5 as text on --red-soft) */
  --sev-amber: #9a6d1f;   /* Check this */
  --sev-teal: #0f766e;    /* For your review */

  /* Layer pill tints — quieter washes on the off-white */
  --ws-bg: #f3ecda;       /* WORKSPACE amber-tinted */
  --ws-fg: #7d5a1a;
  --ws-border: #ddcda0;
  --prod-bg: #e3eee7;     /* PRODUCTION green-tinted */
  --prod-fg: #2f6547;
  --prod-border: #b5d2c1;

  /* Soft accent fills (chips, badges) */
  --teal-soft: #e7f0ee;
  --lavender-soft: #edecf7;
  --gold-soft: #f3edda;
  --red-soft: #f6e7e4;
  --amber-soft: #f3edda;

  /* Dev ribbon (expanded panel stays dark + out-of-band; the collapsed SPIKE
     pill is hairline mono in the page's own theme — see .dev-float__pill) */
  --ribbon-bg: #1f1f1f;    /* site --color-invert-bg */
  --ribbon-fg: #f2f2f2;    /* site --color-invert-fg */
  --ribbon-muted: #b0b0b0; /* site --color-invert-mute */
  --ribbon-stripe-a: #303030;
  --ribbon-stripe-b: #3d3d3d;
  --ribbon-active: #d9b45e;

  /* Spacing scale (4px base) — used across shell, cards, forms and views to
     keep a single rhythm instead of ad-hoc px values. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Motion — one consistent 150–180ms curve (respected by the reduced-motion
     block at the bottom of Base). */
  --transition: 160ms ease;
  --transition-fast: 120ms ease;

  /* Geometry — the site's 10px card radius; controls are pills */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --sidebar-w: 260px;
  --shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 4px 12px rgba(26, 26, 26, .05);
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, .07);
  --shadow-md: 0 2px 4px rgba(26, 26, 26, .08), 0 8px 20px rgba(26, 26, 26, .08);

  /* Type — the site's stacks (global.css). Body/mono are the site's system
     stacks verbatim. Display: the site's Space Grotesk Variable is VENDORED
     into the spike (assets/fonts/, SIL OFL 1.1 — the license permits
     self-hosting; same fontsource build the website uses), so the display
     face renders identically to humanandmachine.ai on every machine. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Space Grotesk Variable", "Space Grotesk", var(--font);
}

/* Forced-mode color-scheme (§6): when the user overrides the theme via the
   toggle, native controls (selects, scrollbars) must follow the FORCED mode,
   not the OS. System (no data-theme) keeps `color-scheme: light dark` above. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Dark tokens live in TWO mirrored scopes so the theme toggle's forced modes
   work (§6): (1) under @media (prefers-color-scheme: dark) for System / no
   override — but excluded when the user forced light, so `data-theme="light"`
   stays light even on a dark OS; (2) under :root[data-theme="dark"] to force
   dark regardless of the OS. Plain CSS can't share one declaration block across
   a media-query boundary, so the two token bodies are mirror copies — keep them
   in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151515;
    --surface: #1e1e1e;
    --surface-2: #252525;
    --surface-3: #2d2d2d;
    --border: #383838;
    --border-strong: #4a4a4a;
    --text: #f2f2f2;          /* site --color-invert-fg */
    --text-muted: #b0b0b0;    /* site --color-invert-mute */
    --text-subtle: #949494;   /* lifted for AA 4.5 on dark surfaces incl. --surface-3 and the tinted soft fills */

    --action: #f2f2f2;
    --action-fg: #151515;
    --action-hover: #ffffff;
    --focus: #f2f2f2;

    --grid-line: rgba(242, 242, 242, .045);

    --teal: #4aa79c;
    --lavender: #9c92d8;
    --gold: #c7a04a;
    --teal-fg: #151515;    /* dark ink on the lighter dark-mode teal fill */
    --gold-fg: #151515;    /* dark ink on the lighter dark-mode gold fill */

    /* Accent soft-borders + tinted text — dark-mode parity (muted, not bright). */
    --teal-border: #2c534d;
    --lavender-border: #45406b;
    --gold-border: #55462a;
    --red-border: #61332c;
    --admin-fg: #b3a6e0;
    --admin-border: #453e63;

    --banner-proposal-fg: #beb4e4;
    --banner-error-fg: #e0a198;
    --banner-warning-fg: #d5b87e;

    --scroll-edge: rgba(242, 242, 242, .16);

    --state-green: #4d9f78;
    --state-amber: #c39a4d;
    --state-purple: #a89bc4;
    --state-gray: #6f6f6f;

    --sev-red: #dd7f72;   /* AA 4.5 as text on --red-soft */
    --sev-amber: #c39a4d;
    --sev-teal: #4aa79c;

    --ws-bg: #322b1a;
    --ws-fg: #d5b87e;
    --ws-border: #55462a;
    --prod-bg: #1c2f26;
    --prod-fg: #7cc39d;
    --prod-border: #2f523f;

    --teal-soft: #1c322f;
    --lavender-soft: #292541;
    --gold-soft: #322a18;
    --red-soft: #382220;
    --amber-soft: #322a18;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .35);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .45);
  }
}

/* Mirror of the dark tokens above — forced dark (theme toggle → Dark), applied
   regardless of the OS preference. Keep in sync with the @media block above. */
:root[data-theme="dark"] {
  --bg: #151515;
  --surface: #1e1e1e;
  --surface-2: #252525;
  --surface-3: #2d2d2d;
  --border: #383838;
  --border-strong: #4a4a4a;
  --text: #f2f2f2;          /* site --color-invert-fg */
  --text-muted: #b0b0b0;    /* site --color-invert-mute */
  --text-subtle: #949494;   /* lifted for AA 4.5 on dark surfaces incl. --surface-3 and the tinted soft fills */

  --action: #f2f2f2;
  --action-fg: #151515;
  --action-hover: #ffffff;
  --focus: #f2f2f2;

  --grid-line: rgba(242, 242, 242, .045);

  --teal: #4aa79c;
  --lavender: #9c92d8;
  --gold: #c7a04a;
  --teal-fg: #151515;    /* dark ink on the lighter dark-mode teal fill */
  --gold-fg: #151515;    /* dark ink on the lighter dark-mode gold fill */

  /* Accent soft-borders + tinted text — dark-mode parity (muted, not bright). */
  --teal-border: #2c534d;
  --lavender-border: #45406b;
  --gold-border: #55462a;
  --red-border: #61332c;
  --admin-fg: #b3a6e0;
  --admin-border: #453e63;

  --banner-proposal-fg: #beb4e4;
  --banner-error-fg: #e0a198;
  --banner-warning-fg: #d5b87e;

  --scroll-edge: rgba(242, 242, 242, .16);

  --state-green: #4d9f78;
  --state-amber: #c39a4d;
  --state-purple: #a89bc4;
  --state-gray: #6f6f6f;

  --sev-red: #dd7f72;   /* AA 4.5 as text on --red-soft */
  --sev-amber: #c39a4d;
  --sev-teal: #4aa79c;

  --ws-bg: #322b1a;
  --ws-fg: #d5b87e;
  --ws-border: #55462a;
  --prod-bg: #1c2f26;
  --prod-fg: #7cc39d;
  --prod-border: #2f523f;

  --teal-soft: #1c322f;
  --lavender-soft: #292541;
  --gold-soft: #322a18;
  --red-soft: #382220;
  --amber-soft: #322a18;

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .45);
}

/* ----------------------------------------------------------------------------
   Base
---------------------------------------------------------------------------- */
* { box-sizing: border-box; }

/* Shell pages lock the document scroll (the sidebar + main own overflow);
   bare pages (auth, errors) scroll normally — hence the .shell-root scope. */
html.shell-root, html.shell-root body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

button { font-family: inherit; }

/* Focus ring — one consistent, always-visible ring on every interactive
   element. No border-radius here: modern browsers follow the element's own
   corners, and forcing a radius squared off pill-shaped controls when focused. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.mono { font-family: var(--mono); font-size: .86em; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.meta { color: var(--text-muted); font-size: 13px; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--space-3); }
.stack--tight > * + * { margin-top: var(--space-2); }
.stack--xtight > * + * { margin-top: var(--space-1); }
.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.row--gap-xs { gap: 6px; }
.row--gap-sm { gap: 8px; }
.row--gap-lg { gap: var(--space-4); }
.spacer { flex: 1; }
.hidden { display: none !important; }

/* Spacing utilities — promote ad-hoc inline margins to the shared scale. */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

/* Button-chrome reset — for elements that are semantically <button> but visually
   a toggle / radio row / swatch (keeps them keyboard-operable, no default chrome). */
.btn-reset { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

/* Motion — honor the user's reduced-motion preference everywhere. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------------------------
   App layout — fixed app-shell (§4.2). The document itself never scrolls: the
   app is a full-height flex column and the sidebar and main region each own
   their overflow. This keeps the left menu ALWAYS visible however long the
   routed page gets. The dev control (§4.1) is a fixed overlay with ZERO layout
   height — the shell fills the real viewport from y=0, exactly like the product.
---------------------------------------------------------------------------- */
html.shell-root, html.shell-root body { overflow: hidden; }   /* no document-level scroll */

.app { height: 100%; display: flex; flex-direction: column; overflow: hidden; }

.shell {
  display: flex;
  flex: 1;
  min-height: 0;   /* let the sidebar + main own the scroll, not the shell */
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* The site's blueprint grid-paper, behind the app canvas only (cards and
     panes lay their own surface over it — the pattern never sits inside a
     card). Theme-aware via --grid-line. */
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  overflow-y: auto;      /* the routed content scrolls here, not the document */
  overflow-x: hidden;    /* wide tables scroll inside their own .table-wrap */
}

/* Full-width routed content: panes, grids, tables and panels use the whole
   width with consistent 34px gutters (matching the context bar + connect
   banner). Only genuinely prose-heavy blocks cap their own measure via a
   per-block max-width (.card__caption / .field__hint). */
.view {
  padding: 26px 34px 60px;
  width: 100%;
}

/* ----------------------------------------------------------------------------
   Sidebar (§4.2)
---------------------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  height: 100%;    /* fill the shell row; the middle (.sidebar__scroll) scrolls */
  min-height: 0;
}

.sidebar__top { padding: 12px 12px 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.sidebar__top .sidebar__search { flex: 1; min-width: 0; }
.sidebar__gear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 15px;
  line-height: 1;
  color: var(--text-subtle);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.sidebar__gear:hover { color: var(--text); border-color: var(--border-strong); }
.sidebar__gear--active { color: var(--text); background: var(--surface); border-color: var(--focus); }

.sidebar__account-name { font-weight: 600; font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__account-email { color: var(--text-subtle); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar__search {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sidebar__search::placeholder { color: var(--text-subtle); }
.sidebar__search:hover { border-color: var(--border-strong); }
.sidebar__search:focus { background: var(--surface); border-color: var(--focus); outline: none; }

.sidebar__scroll { flex: 1; overflow-y: auto; padding: 8px; }

.sidebar__section {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 12px 10px 6px;
}

/* Nav rows (Personal / MANAGE / SPACES / ghost add) */
.nav-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-size: 13.5px;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.nav-row:hover { background: var(--surface-2); }
/* Active row: filled surface + bold + a slim ink "you are here" bar (inset so
   there is no layout shift). Ink, per the site's grayscale interaction language. */
.nav-row--active { background: var(--surface-3); font-weight: 600; box-shadow: inset 2px 0 0 0 var(--text); }
.nav-row--active:hover { background: var(--surface-3); }
.nav-row--ghost { color: var(--text-muted); border: 1px dashed var(--border-strong); background: transparent; box-shadow: none; }
.nav-row--ghost:hover { color: var(--text); border-color: var(--text-subtle); background: var(--surface-2); }
.nav-row__icon {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  color: var(--text-muted);
}
.nav-row__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Org rows carry initial icon + persona badge + sync dot */
.org-row { padding-right: 8px; }
.org-row__icon {
  width: 22px; height: 22px; flex: none; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--surface-3);
  font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.org-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* MANAGE section (§4.2) — governance rows live in the one persistent sidebar. */
/* "All organizations →" is a quieter, secondary row above the governed orgs. */
.nav-row--sub { color: var(--text-muted); font-size: 12.5px; }
.nav-row--sub .nav-row__icon { font-size: 12px; }

/* "← Back to app" — the settings sidebar's exit row (§4.2, settings mode is
   exclusive: SPACES is hidden, this row is the way back). */
.nav-row--back { color: var(--text-muted); margin-bottom: 10px; }
.nav-row--back:hover { color: var(--text); }

.settings-org-row { margin-top: 2px; }
/* Wrapper around a MANAGE org (parent row + optional children) so the sidebar
   search can hide the whole unit together via its data-org-name. */
.manage-org { display: block; }

/* Indented child rows for the active org's persona-allowed subtabs (also reused
   by the MANAGE section — same child-row styling, §4.2/§4.8). */
.settings-children {
  display: flex; flex-direction: column; gap: 1px;
  margin: 2px 0 6px 26px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.settings-child {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.settings-child:hover { background: var(--surface-2); color: var(--text); }
.settings-child--active { background: var(--surface-3); color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 0 var(--text); }
.settings-child__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------------------------------------------------------
   Bottom-left account row + popover (§4.2, Codex-style)
   Replaces the old top account box + the settings-mode "← Back"/gear rows: the
   account sits pinned at the sidebar foot and opens a small menu ABOVE it.
---------------------------------------------------------------------------- */
.sidebar__account-foot {
  position: relative;               /* anchor for the popover */
  flex: none;
  border-top: 1px solid var(--border);
  padding: 8px;
}
.sidebar__account-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sidebar__account-row:hover { background: var(--surface-2); }
/* Open-state styling lives on `.account-menu[open] .sidebar__account-row` (below):
   a native <summary> never reflects an `aria-expanded` DOM attribute, so an
   `[aria-expanded="true"]` rule here would be dead (Greptile P2-2). */
.sidebar__account-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sidebar__account-chevron { flex: none; color: var(--text-subtle); font-size: 12px; line-height: 1; }

.account-popover {
  position: absolute;
  left: 8px; right: 8px;
  bottom: calc(100% - 2px);         /* open upward, above the row */
  z-index: 20;
  display: flex; flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
/* Show/hide is driven by the native <details> open state (the popover lives
   inside <details class="account-menu">), never by a `hidden` attribute on the
   popover — so no `.account-popover[hidden]` rule is needed (Greptile P2-2). */
.account-popover__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px;
  text-align: left; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.account-popover__item:hover { background: var(--surface-2); }
.account-popover__item--danger:hover { color: var(--sev-red); }
.account-popover__icon { width: 18px; flex: none; display: grid; place-items: center; color: var(--text-subtle); font-size: 13px; }
.account-popover__item--danger:hover .account-popover__icon { color: var(--sev-red); }
.account-popover__divider { height: 1px; background: var(--border); margin: 5px 4px; }

/* ----------------------------------------------------------------------------
   Context bar (§4.2)
---------------------------------------------------------------------------- */
.context-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 34px;
  min-height: 44px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.breadcrumb__crumb { color: var(--text-muted); }
.breadcrumb__crumb--current { color: var(--text); font-weight: 600; }
.breadcrumb__sep { color: var(--text-subtle); }

/* ----------------------------------------------------------------------------
   Page header
---------------------------------------------------------------------------- */
.page-header { margin-bottom: 20px; }
/* Big, tight display heading — the site's headline voice (display stack,
   negative tracking, near-solid leading). */
.page-header h1 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; margin: 4px 0 4px;
  letter-spacing: -.03em; line-height: 1.1;
}
/* Eyebrow — the site's editorial mono label (no pill chrome). */
.page-header .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-subtle);
}
.page-header .meta { margin-top: 2px; }
/* Secondary heading fragment (e.g. "Personal · Profile") — same weight as an
   h2, muted, sits inline with the h1. */
.page-header__sub { font-weight: 600; font-size: 15px; }
/* Row of pills/badges under the h1 (layer + state, private badge, …). */
.page-header__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.section-title { font-size: 15px; font-weight: 600; margin: 24px 0 12px; }
/* Group header inside a section — subordinate to a section-title, above its
   tiles. Currently unused: the Applications "Stable (production)" / "Live from
   the workspace" groups it used to head were retired in the 2026-07-15 ratified
   model (the Dashboard opens only PROD; org view is a flat tile grid). Kept as a
   ready style for any future subsection header. */
.section-subtitle { font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 18px 0 10px; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }

/* ----------------------------------------------------------------------------
   Org operate view (founder correction #2 2026-07-14): apps people OPEN vs
   where you BUILD.
   USE ("Applications" — production instances + live workspace apps) ·
   BUILD ("Development" — ONE "Build with Launchpad" signpost card; per founder
   direction 2026-07-14 the Dashboard has no builder tooling, only a signpost).
   (Productionspace is NOT a Dashboard surface — founder direction 2026-07-14 —
   so the old .prodspace-* inventory styles were removed.)
---------------------------------------------------------------------------- */
.section-intro { color: var(--text-muted); font-size: 13px; margin: -6px 0 12px; }

/* ----------------------------------------------------------------------------
   Error pages (spike §4.24) — the centered error card. In-shell errors (404 /
   500) fill only the content area (the sidebar survives); the bare 401/500
   variants reuse the same card on the bare page.
---------------------------------------------------------------------------- */
.error-page { display: grid; place-items: start center; padding-top: 20px; }
.error-card { max-width: 520px; width: 100%; }

/* ----------------------------------------------------------------------------
   Cards
---------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card + .card { margin-top: 14px; }
.card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.card__title { font-size: 14.5px; font-weight: 600; }
.card__caption { color: var(--text-muted); font-size: 12.5px; margin-top: 6px; max-width: 66ch; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* ----------------------------------------------------------------------------
   Tiles (module tiles / app tiles) — shared module contract
---------------------------------------------------------------------------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  min-height: 118px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tile__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile__name { font-weight: 600; font-size: 14.5px; }
.tile__desc { color: var(--text-muted); font-size: 13px; flex: 1; }
.tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.tile__note { color: var(--text-subtle); font-size: 12px; }
.tile--muted { opacity: .82; background: var(--surface-2); }
.tile--muted .tile__name { color: var(--text-muted); }
.tile--planned { border-style: dashed; }
.tile--accent-teal { border-left: 3px solid var(--teal); }
.tile--accent-gold { border-left: 3px solid var(--gold); }
.tile--accent-lavender { border-left: 3px solid var(--lavender); }

/* ----------------------------------------------------------------------------
   Pills (layer, hosting, generic)
---------------------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface-2);
  white-space: nowrap;
}
.pill--workspace { background: var(--ws-bg); color: var(--ws-fg); border-color: var(--ws-border); }
.pill--production { background: var(--prod-bg); color: var(--prod-fg); border-color: var(--prod-border); }
.pill--hosting { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ----------------------------------------------------------------------------
   Badges (persona, proposal, generic, You)
---------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  white-space: nowrap;
}
.badge--info { background: var(--surface-3); }

/* Persona badges — informational, neutral-leaning with a subtle hue */
.persona-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  white-space: nowrap;
}
.persona-badge--mini { font-size: 10px; padding: 1px 6px; }
.persona-badge--admin   { color: var(--admin-fg); border-color: var(--admin-border); background: var(--lavender-soft); }
.persona-badge--steward { color: var(--teal); border-color: var(--teal-border); background: var(--teal-soft); }
.persona-badge--builder { color: var(--ws-fg); border-color: var(--ws-border); background: var(--ws-bg); }
.persona-badge--user    { color: var(--text-muted); }

.proposal-badge {
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  color: var(--lavender);
  background: var(--lavender-soft);
  border: 1px dashed var(--lavender-border);
}

.you-pill {
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--teal);
  background: var(--teal-soft);
  border: 1px solid var(--teal-border);
}

.private-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ----------------------------------------------------------------------------
   State dots + words (dot = state; never confused with a layer pill)
---------------------------------------------------------------------------- */
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.state__word { color: var(--text-muted); }

.dot {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
}
.dot--available { background: var(--state-green); border: 1px solid var(--state-green); }
.dot--missing   { background: transparent; border: 2px solid var(--state-amber); }   /* amber ring */
.dot--planned   { background: transparent; border: 1.5px dashed var(--state-purple); }/* purple dashed */
.dot--unknown   { background: var(--state-gray); border: 1px solid var(--state-gray); opacity: .55; }

/* Sync dots (sidebar / cards): green filled = in sync, amber ring = stale */
.sync-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sync-dot--in_sync { background: var(--state-green); }
.sync-dot--stale { background: transparent; border: 2px solid var(--state-amber); }

/* ----------------------------------------------------------------------------
   Entity chips (Colleague / AI Colleague) + Buddy chip
---------------------------------------------------------------------------- */
.entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.entity-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.entity-chip--colleague { color: var(--teal); background: var(--teal-soft); border-color: var(--teal-border); }
.entity-chip--colleague::before { background: var(--teal); }
.entity-chip--ai { color: var(--lavender); background: var(--lavender-soft); border-color: var(--lavender-border); }
.entity-chip--ai::before { background: var(--lavender); }

.seat-slug { font-family: var(--mono); font-size: 10.5px; color: var(--text-subtle); }

/* The two info cards (Buddy's memory / Personal account & privacy). */
.info-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.info-card {
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
}

/* Collapsible "Technical details" footer (Anička's pattern, this spike's voice). */
.personal-technical {
  margin-top: 22px; padding: 10px 14px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface-2);
}
.personal-technical > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-subtle);
}
.personal-technical > summary:hover { color: var(--text); }

/* ----------------------------------------------------------------------------
   Personalspace / Buddy band (E3d) — ported from spike/styles.css L1052-1146.
   Gold is the Buddy IDENTITY accent ONLY (avatar ring, name, dot); a
   personalspace with no Buddy (decision 0084) is the GOLD-MUTED (dashed) empty
   hero, never plain gray. Signpost slice — no host probe, so no "running" dot.
---------------------------------------------------------------------------- */
.personalspace-region { margin-top: 18px; }
/* HERO — the big gold Buddy card: avatar in a gold ring beside the story. */
.buddy-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 22px; border-radius: var(--radius);
  border: 1px solid var(--gold-border); border-left: 3px solid var(--gold);
  background: var(--gold-soft); box-shadow: var(--shadow-sm);
}
.buddy-hero--empty {
  border: 1px dashed color-mix(in srgb, var(--gold) 42%, var(--border-strong));
  border-left: 3px solid color-mix(in srgb, var(--gold) 55%, var(--border-strong));
  background: color-mix(in srgb, var(--gold-soft) 55%, var(--surface-2));
}
.buddy-hero__avatar {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--surface);
  overflow: hidden; display: grid; place-items: center;
}
.buddy-hero__avatar--empty { border-color: color-mix(in srgb, var(--gold) 55%, var(--border-strong)); }
.buddy-hero__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); }
.buddy-hero--empty .buddy-hero__dot { background: color-mix(in srgb, var(--gold) 60%, var(--text-subtle)); }
.buddy-hero__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.buddy-hero__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-subtle);
}
.buddy-hero__name { font-weight: 700; font-size: 18px; color: var(--gold); margin: 0; }
.buddy-hero--empty .buddy-hero__name { color: color-mix(in srgb, var(--gold) 60%, var(--text-subtle)); }
.buddy-hero__what { font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 58ch; }
.buddy-hero__actions { gap: 10px; margin-top: 4px; align-items: center; }

/* Buddy status line — a small dot + label (§4.16). Only the hollow "off" dot is
   used in this signpost slice: with no host probe we never claim "running". */
.buddy-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
.buddy-status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.buddy-status-dot--off { background: var(--surface); border: 1px solid var(--border-strong); box-shadow: inset 0 0 0 2px var(--surface-3); }

/* Invalid-manifest reasons (secret-free) — a plain list inside the error banner. */
.personalspace-errors { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 3px; font-size: 12.5px; }

/* Initials avatar */
.avatar {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700;
  background: var(--surface-3);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar--teal { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-border); }
.avatar--lavender { background: var(--lavender-soft); color: var(--lavender); border-color: var(--lavender-border); }

/* ----------------------------------------------------------------------------
   Viewing-as badge (informational)
---------------------------------------------------------------------------- */
.viewing-as {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.viewing-as strong { color: var(--text); font-weight: 600; }

/* ----------------------------------------------------------------------------
   Buttons
---------------------------------------------------------------------------- */
/* Site button anatomy: pill radius; primary = black-filled (light) / inverted
   (dark) via --action; secondary = thin hairline outline that inks on hover. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.btn:hover { background: var(--surface-2); border-color: var(--text); }
.btn:active { transform: translateY(.5px); }
.btn--primary { background: var(--action); color: var(--action-fg); border-color: var(--action); }
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn--danger { color: var(--sev-red); border-color: var(--sev-red); background: var(--red-soft); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--sm { padding: 5px 12px; font-size: 12px; }
.btn[disabled], .btn:disabled,
.btn--disabled {
  opacity: .5; cursor: not-allowed; background: var(--surface-2); color: var(--text-subtle);
  border-color: var(--border);
}
/* Deep-link <a> rendered as a disabled button (e.g. Launchpad not running):
   no hover/active affordance — it reads as inert. */
.btn[disabled]:hover, .btn:disabled:hover,
.btn--disabled:hover { background: var(--surface-2); border-color: var(--border); box-shadow: none; }
.btn--disabled:active { transform: none; }
.btn--link {
  border: 0; background: transparent; padding: 0; color: var(--teal);
  font-weight: 600; cursor: pointer;
}
.btn--link:hover { text-decoration: underline; }

.link { color: var(--teal); cursor: pointer; font-weight: 600; transition: color var(--transition-fast); }
.link:hover { text-decoration: underline; }
.link--sm { font-size: 12px; }

/* ----------------------------------------------------------------------------
   Banners
---------------------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 16px;
}
.banner::before { content: ""; align-self: stretch; width: 3px; border-radius: 3px; background: var(--border-strong); flex: none; }
.banner--info::before { background: var(--text-subtle); }
.banner--structure { background: var(--surface-2); }
.banner--structure::before { background: var(--teal); }
.banner--proposal { background: var(--lavender-soft); color: var(--banner-proposal-fg); }
.banner--proposal::before { background: var(--lavender); }
.banner--error { background: var(--red-soft); color: var(--banner-error-fg); }
.banner--error::before { background: var(--sev-red); }
.banner--warning { background: var(--amber-soft); color: var(--banner-warning-fg); }
.banner--warning::before { background: var(--state-amber); }
.banner--success { background: var(--teal-soft); color: var(--text); }
.banner--success::before { background: var(--state-green); }

/* --- E2b onboarding (add-organization) ------------------------------------ */
.onboard-steps { margin: 4px 0 12px; padding-left: 20px; display: grid; gap: 10px; color: var(--text-muted); font-size: 14px; }
.onboard-steps strong { color: var(--text); }
.onboard-guidance { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-muted); font-size: 14px; }
.onboard-appeared { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 2px; font-size: 13px; }
/* The check-now button sits inline with the Install button in a flex row. */
.onboard-check-form { display: inline; margin: 0; }
.onboard-state-pill { color: var(--banner-warning-fg); border-color: var(--state-amber); background: var(--amber-soft); }

/* ----------------------------------------------------------------------------
   Governance strip (§4.4 admin/steward)
---------------------------------------------------------------------------- */
.gov-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  margin-bottom: 18px;
}
.gov-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.gov-chip strong { font-weight: 700; }
a.gov-chip:hover { box-shadow: var(--shadow-sm); }
.gov-chip--danger { color: var(--sev-red); border-color: var(--red-border); background: var(--red-soft); cursor: pointer; }
.gov-chip--ok { color: var(--teal); border-color: var(--teal-border); background: var(--teal-soft); }
.gov-chip--warn { color: var(--ws-fg); border-color: var(--ws-border); background: var(--ws-bg); }

/* ----------------------------------------------------------------------------
   Sync chip (§4.22 — E1 static variant: fresh / stale only, no spinner)
---------------------------------------------------------------------------- */
.sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}
.sync-chip__label { font-weight: 500; }
.sync-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-subtle); }
.sync-chip--fresh { color: var(--teal); border-color: var(--teal-border); background: var(--teal-soft); }
.sync-chip--fresh .sync-chip__dot { background: var(--state-green); }
/* Stale is an amber warning, not a red error: text+border+wash all amber.
   --banner-warning-fg is the AA-verified amber text on --amber-soft (the same
   pairing as .banner--warning and .legacy .badge.stale); the border matches the
   amber dot ring below (Greptile P2). */
.sync-chip--stale { color: var(--banner-warning-fg); border-color: var(--state-amber); background: var(--amber-soft); }
.sync-chip--stale .sync-chip__dot { background: transparent; border: 2px solid var(--state-amber); box-sizing: border-box; }
/* Checking (E2a): a background revalidation is in flight — a subtle inline
   spinner, never a blocking overlay (§4.22). The dot becomes a spinning ring;
   the global prefers-reduced-motion block above neutralizes the animation. */
.sync-chip--checking { color: var(--text-muted); border-color: var(--border); background: var(--surface); }
.sync-chip--checking .sync-chip__dot {
  background: transparent;
  border: 2px solid var(--text-subtle);
  border-top-color: transparent;
  box-sizing: border-box;
  animation: sync-chip-spin 0.7s linear infinite;
}
@keyframes sync-chip-spin { to { transform: rotate(360deg); } }
/* "Refresh to see updates" affordance — revealed by the poller when the server
   snapshot advances past what this page rendered (a user-driven reload). */
.sync-chip__refresh { margin-left: 2px; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.sync-chip__refresh[hidden] { display: none; }

/* ----------------------------------------------------------------------------
   Builder Launchpad signpost (§4.17) + deep-link disabled state
---------------------------------------------------------------------------- */
.launchpad-signpost { max-width: 620px; }
.launchpad-signpost .lp-status { font-size: 13px; font-weight: 600; color: var(--text-subtle); margin: 10px 0 10px; }
.launchpad-signpost[data-state="running"] .lp-status { color: var(--teal); }
.launchpad-signpost .lp-caption { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; max-width: 66ch; }
.deeplink-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

/* ----------------------------------------------------------------------------
   Chip rows (org lists, team chips, filter chips)
---------------------------------------------------------------------------- */
.chip-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.chip--sm { padding: 3px 9px; font-size: 12px; border-radius: 999px; }
.team-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--border); color: var(--text-muted);
}
.filter-chip {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.filter-chip:hover { color: var(--text); border-color: var(--text-subtle); }
.filter-chip--active { background: var(--action); color: var(--action-fg); border-color: var(--action); }
.filter-chip--active:hover { color: var(--action-fg); }

/* ----------------------------------------------------------------------------
   Tables — colleagues matrix (§4.9) with sticky mini-header
---------------------------------------------------------------------------- */
/* Horizontally scrollable roster. The layered background is the classic pure-CSS
   "scroll shadow": surface-colored cover fades pinned to the content (local) hide
   the edge shadows until there is overflow to scroll; the radial edge shadows
   (scroll) then reveal at whichever edge still has hidden columns — a subtle
   affordance that appears only when the matrix is actually wider than its frame. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--surface) 32%, rgba(255, 255, 255, 0)) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 32%, rgba(255, 255, 255, 0)) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-edge), transparent) left center / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-edge), transparent) right center / 18px 100% no-repeat scroll;
  background-color: var(--surface);
}
table.matrix { border-collapse: collapse; width: 100%; font-size: 13px; }
.matrix th, .matrix td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.matrix thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle);
  font-weight: 600;
}
.matrix tbody tr:hover { background: var(--surface-2); }
.matrix .col-you td { background: var(--surface-3); }
.matrix .cell-coll-name { display: flex; align-items: center; gap: 9px; }
.matrix .sortable { cursor: pointer; }
.matrix .sortable:hover { color: var(--text); }

/* Sticky mini-header of module slugs, grouped workspace | production */
.mini-head { display: flex; align-items: flex-end; gap: 4px; }
.mini-head__slug {
  font-family: var(--mono);
  font-size: 9.5px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--text-subtle);
  max-height: 74px;
  white-space: nowrap;
}
.mini-head__divider, .dot-row__divider {
  width: 1px; align-self: stretch; min-height: 16px;
  background: var(--border-strong);
  margin: 0 3px;
}
.dot-row { display: flex; align-items: center; gap: 8px; }
.dot-row__cell { width: 14px; display: grid; place-items: center; }
.dot-row--planned-purple .dot--planned { border-color: var(--state-purple); }

/* ----------------------------------------------------------------------------
   Facts block (§4.5, admin/steward/builder)
---------------------------------------------------------------------------- */
.facts { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-width: 640px; }
.facts__row { display: flex; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.facts__row:last-child { border-bottom: 0; }
.facts__key { width: 120px; flex: none; color: var(--text-subtle); }
/* Facts values read as data — the site's mono voice for slugs/URLs/facts. */
.facts__val { color: var(--text); font-family: var(--mono); font-size: 12.5px; }

/* ----------------------------------------------------------------------------
   Severity groups / findings (§4.11)
---------------------------------------------------------------------------- */
.sev-group { margin-bottom: 18px; }
.sev-group__head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.sev-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-size: 11px; font-weight: 700; border-radius: 999px;
  background: var(--surface-3); color: var(--text-muted);
}
.severity { display: inline-flex; align-items: center; gap: 7px; }
.severity::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.severity--needs-fixing { color: var(--sev-red); }
.severity--needs-fixing::before { background: var(--sev-red); }
.severity--check { color: var(--sev-amber); }
.severity--check::before { background: var(--sev-amber); }
.severity--review { color: var(--sev-teal); }
.severity--review::before { background: var(--sev-teal); }

.finding {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--surface);
  margin-bottom: 10px;
}
.finding--needs-fixing { border-left-color: var(--sev-red); }
.finding--check { border-left-color: var(--sev-amber); }
.finding--review { border-left-color: var(--sev-teal); }
.finding__title { font-weight: 600; margin-bottom: 6px; }
.finding__code { font-family: var(--mono); font-size: 11px; color: var(--text-subtle); }
.finding__line { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.finding__line b { color: var(--text); font-weight: 600; }
.finding__note { font-size: 12.5px; color: var(--text-subtle); margin-top: 6px; }

/* ----------------------------------------------------------------------------
   Settings panes (settings-org + settings-personal)
---------------------------------------------------------------------------- */
/* Per-org settings subtab switching lives in the MANAGE sidebar section (the
   active org expands into its allowed subtabs, §4.2/§4.8), so that pane has no
   in-page rail — it fills the content width. Personal settings, reached from the
   account popover, carries its own in-page tab bar (.settings-tabs) instead. */
.settings-pane { min-width: 0; }
.settings-tabs { margin: 2px 0 18px; }

/* ----------------------------------------------------------------------------
   Forms (wireframe stubs)
---------------------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field__label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.field__hint { font-size: 12px; color: var(--text-subtle); margin-top: 4px; max-width: 66ch; }
.input, .select {
  width: 100%; max-width: 360px;
  padding: 8px 10px; font-size: 13px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:hover:not(:disabled), .select:hover:not(:disabled) { border-color: var(--text-subtle); }
.input:disabled, .select:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-2); }

/* Toggle / radio row / swatch are semantically <button>s styled bespoke — fold
   the button-chrome reset in so views need no inline reset string. */
.toggle {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; border: 0; background: none; font: inherit; color: inherit;
  padding: 0; text-align: left;
}
.toggle__track { width: 38px; height: 22px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); position: relative; flex: none; transition: background var(--transition-fast), border-color var(--transition-fast); }
.toggle__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); transition: left var(--transition-fast); }
.toggle--on .toggle__track { background: var(--action); border-color: var(--action); }
.toggle--on .toggle__knob { left: 18px; }

.radio-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  cursor: pointer; border: 0; background: none; font: inherit; color: inherit;
  text-align: left;
}
.radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.radio-row:hover .radio-dot { border-color: var(--text-subtle); }
.radio-row--active .radio-dot { border-color: var(--action); box-shadow: inset 0 0 0 3px var(--action); }
.radio-row--active:hover .radio-dot { border-color: var(--action); }

.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer;
  padding: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.swatch:hover { transform: scale(1.08); box-shadow: var(--shadow-sm); }
.swatch--active { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Plan pills (selectable) */
.plan-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-pill {
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.plan-pill:hover { color: var(--text); border-color: var(--text-subtle); }
.plan-pill--active { background: var(--action); color: var(--action-fg); border-color: var(--action); }
.plan-pill--active:hover { color: var(--action-fg); }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.checklist li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-strong); flex: none; }
.checklist li.on { color: var(--text); }
.checklist li.on::before { background: var(--state-green); border-color: var(--state-green); }
.checklist li.off { color: var(--text-subtle); }

/* (The old §4.7 map — nested .map-cong / .map-org / .map-team boxes — was
   replaced by the strategic-canvas .palm-* styles at the end of this file; its
   dead rules were removed with the redesign.) */

/* ----------------------------------------------------------------------------
   Legend
---------------------------------------------------------------------------- */
.legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 0; font-size: 12px; color: var(--text-muted); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* ----------------------------------------------------------------------------
   Mono URL with copy affordance (§4.5)
---------------------------------------------------------------------------- */
.mono-url {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 6px 5px 10px;
  max-width: 100%;
}
.mono-url code { font-family: var(--mono); font-size: 12px; color: var(--text); overflow-x: auto; }
.copy-btn {
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-muted); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.copy-btn:hover { color: var(--text); background: var(--surface-3); border-color: var(--text-subtle); }

/* ----------------------------------------------------------------------------
   Empty state
---------------------------------------------------------------------------- */
.empty-state {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 26px;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface-2);
  font-size: 13.5px;
}
.empty-state__title { font-weight: 600; color: var(--text); margin-bottom: 4px; }

/* ----------------------------------------------------------------------------
   Owner / You band (§4.3)
---------------------------------------------------------------------------- */
.owner-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--border); border-left: 3px solid var(--teal);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.owner-tile__name { font-weight: 700; font-size: 16px; }
/* Balanced two-up: owner tile + Buddy card share equal columns and collapse to
   one column below ~560px. A lone owner tile (AI colleague, no Buddy) fills the
   row on its own. */
.you-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* ----------------------------------------------------------------------------
   colleagues-matrix.js + access-check.js (§4.9 / §4.11) — additive only.
   New selectors; no existing rule is modified.
---------------------------------------------------------------------------- */
/* Module slugs are lowercase identifiers — opt them out of the sticky
   thead th uppercase/letter-spacing so they read as real slugs. */
.matrix thead th .mini-head__slug { text-transform: none; letter-spacing: 0; }

/* "Last activity" column (§4.9). Time since the colleague's most recent commit
   + a short commit ref linking to GitHub — read from the GitHub App, NOT live
   presence (presence/heartbeats dropped, founder 2026-07-12). */
.activity {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--text-muted); white-space: nowrap;
}
.activity--quiet { color: var(--state-amber); font-weight: 600; } /* no commit > 7 days */
/* Short commit ref -> click through to GitHub (new tab). */
.activity__ref {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--teal); font-weight: 600; font-size: 11.5px; text-decoration: none;
}
.activity__ref:hover { text-decoration: underline; }
.activity__ext { font-size: 10px; text-decoration: none; }

/* ----------------------------------------------------------------------------
   Simulated sign-in + GitHub connect (§4.14 / §4.15) — wireframe only.
   Nothing real: no auth, no OAuth, no network, no tokens.
---------------------------------------------------------------------------- */

/* Theme toggle (☀ / ☾ / ◐) — the one live preference (§4.16/§6). A compact
   cycle button pinned to the auth-surface corner (§4.14); inside the app the
   Theme control lives in the account popover row (§4.2). */
.theme-toggle {
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-subtle);
  border-radius: var(--radius-sm);
  width: 26px; height: 26px;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-strong); }
/* Auth surface has no sidebar — pin the same toggle in the top-right corner so
   the sign-in screen is testable in both themes (§4.14). */
.auth-theme-toggle {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 2;
  background: var(--surface);
}

/* Bare mode (auth screens + the 401 error face, §4.24): hide the shell chrome,
   center the card; the floating dev control stays as an overlay. */
.app--auth .sidebar,
.app--auth .context-bar,
.app--auth .shell-banner-host { display: none; }
.app--auth .view {
  max-width: none;
  padding: 0;
  flex: 1;           /* fill the fixed main region (no document scroll) */
  min-height: 0;
  display: grid;
  place-items: stretch;
}
.auth-wrap {
  position: relative;   /* positioning context for the corner theme toggle */
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}
.auth-card {
  width: min(440px, 94vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px;
}
.auth-card__title { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 12px 0 6px; letter-spacing: -.03em; line-height: 1.1; }
.auth-card__sim {
  font-size: 12.5px; color: var(--text-muted);
  background: var(--surface-2);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: 9px 12px; margin: 0 0 18px;
}
.auth-card__sim strong { color: var(--text); font-weight: 600; }
.auth-card .field__label { margin-top: 14px; }
.auth-card .input { max-width: none; }
.auth-actions { margin-top: 20px; gap: 10px; flex-wrap: wrap; }
.auth-actions .btn { flex: 1; min-width: 130px; justify-content: center; text-align: center; }
.auth-card .meta { margin-top: 14px; }
.auth-card__explainer {
  font-size: 13.5px; color: var(--text);
  margin: 4px 0 2px;
}

/* Connect-GitHub card (Personal space region 3, unlinked). */
.connect-card { max-width: 560px; }

/* Slim connect banner in the shell (§4.15). Collapses when empty. */
.shell-banner-host { padding: 0 34px; }
.shell-banner-host:empty { display: none; }
.shell-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px;
  padding: 10px 14px;
  background: var(--ws-bg); color: var(--ws-fg);
  border: 1px solid var(--ws-border); border-radius: var(--radius);
}
.shell-banner__text { flex: 1; min-width: 220px; font-size: 13px; }
.shell-banner__text .muted { color: var(--ws-fg); opacity: .8; }
.shell-banner .btn { flex: none; }

/* ----------------------------------------------------------------------------
   App adaptations (E1a) — pieces the real Dashboard needs on top of the spike
   contract: the bare-page layout (auth + error surfaces render with NO shell),
   the no-JS account popover (a <details> disclosure instead of the spike's
   scripted menu — invariant 6 posture: no client-side derivation), and the org
   chips on the personal landing.
---------------------------------------------------------------------------- */
/* Bare pages (sign-in / sign-up / 401 / 404 / signed-out landing): a centered
   column over the grid-paper canvas, normal document scroll. */
body.bare {
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}
.bare-main { width: min(52rem, 92vw); margin: 0 auto; padding: 40px 16px 64px; }

/* Account foot as a native <details> disclosure — same visual contract as the
   spike's .account-popover, zero JS for open/close. */
.account-menu { position: relative; }
.account-menu > summary { list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu[open] > summary .sidebar__account-row,
.account-menu[open] .sidebar__account-row {
  background: var(--surface-2);
  border-color: var(--border);
}

/* Org chips on the personal landing (§4.3 region 5). */
.org-chip { display: inline-flex; align-items: center; gap: 8px; }

/* ----------------------------------------------------------------------------
   Legacy compatibility layer — the pre-E1 page bodies (org detail, builder /
   user tiles, settings hub) keep their existing markup inside the new shell
   until their E1b/E1c refactors. Their old inline PAGE_STYLE is ported here,
   scoped under .legacy so it never fights the design system above. System
   colors (Canvas/CanvasText/GrayText) follow the color-scheme the tokens set,
   so both themes keep working. DELETE this whole section when the last legacy
   body is refactored.
---------------------------------------------------------------------------- */
.legacy { max-width: 64rem; line-height: 1.5; }
.legacy h1 { font-size: 1.6rem; margin: 0 0 0.25rem; font-family: var(--font-display); letter-spacing: -.03em; }
.legacy h2 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.legacy h3 { font-size: 0.95rem; margin: 1rem 0 0.35rem; }
.legacy p { margin: 0.5rem 0; opacity: 0.9; }
.legacy a { color: inherit; text-decoration: underline; }
.legacy code { font-family: var(--mono); }
.legacy .tag {
  display: inline-block; font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0; border: 0;
  font-family: var(--mono); color: var(--text-subtle); margin-bottom: 1rem;
}
.legacy .row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; align-items: center; }
.legacy button, .legacy .btn {
  font: inherit; padding: 0.45rem 0.9rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); background: var(--surface); color: inherit;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.legacy button:hover, .legacy .btn:hover { border-color: var(--text); }
.legacy button.primary, .legacy .btn.primary {
  background: var(--action); color: var(--action-fg); border-color: var(--action);
}
.legacy label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.9rem; }
.legacy input {
  font: inherit; width: 100%; box-sizing: border-box; padding: 0.5rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.legacy .status { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.legacy .muted { opacity: 0.7; font-size: 0.9rem; }
.legacy .error { color: var(--sev-red); min-height: 1.25rem; }
.legacy .banner {
  border: 1px solid var(--ws-border); border-left: 6px solid var(--state-amber);
  background: var(--ws-bg); color: var(--ws-fg);
  border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin: 1rem 0; display: block;
}
.legacy .banner .banner-lead { font-weight: 600; }
.legacy .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.legacy .card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display: block;
  text-decoration: none; color: inherit; background: var(--surface); box-shadow: var(--shadow-sm);
}
.legacy .card h3 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.legacy .card .meta { font-size: 0.85rem; opacity: 0.8; margin: 0.35rem 0; }
.legacy .counts { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; }
.legacy .badge {
  display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
  background: var(--surface-2); color: inherit;
}
.legacy .badge.available    { background: var(--prod-bg); color: var(--prod-fg); border-color: var(--prod-border); }
.legacy .badge.missing      { background: var(--ws-bg); color: var(--ws-fg); border-color: var(--ws-border); }
.legacy .badge.planned      { background: var(--surface-3); color: var(--text-muted); border-color: var(--border-strong); }
.legacy .badge.layer-workspace  { background: var(--ws-bg); color: var(--ws-fg); border-color: var(--ws-border); }
.legacy .badge.layer-production { background: var(--prod-bg); color: var(--prod-fg); border-color: var(--prod-border); }
.legacy .badge.persona { background: var(--teal-soft); color: var(--teal); border-color: var(--teal-border); }
.legacy .badge.viewing { background: var(--lavender-soft); color: var(--admin-fg); border-color: var(--admin-border); }
.legacy .badge.stale { background: var(--amber-soft); color: var(--banner-warning-fg); border-color: var(--gold-border); }
.legacy .badge.error { background: var(--red-soft); color: var(--sev-red); border-color: var(--red-border); }
.legacy .module { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin: 0.5rem 0; background: var(--surface); }
.legacy .module .head { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.legacy .module .name { font-weight: 600; }
.legacy table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.legacy th, .legacy td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
.legacy .tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin: 0.75rem 0; }
.legacy .tile {
  display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-left-width: 6px; border-radius: var(--radius); padding: 1rem;
  background: var(--surface); box-shadow: var(--shadow-sm); min-height: 0;
}
.legacy .tile:hover { background: var(--surface-2); }
.legacy .tile-production { border-left-color: var(--state-green); }
.legacy .tile-workspace { border-left-color: var(--state-amber); }
.legacy .tile .tile-name { font-weight: 600; font-size: 1.05rem; }
.legacy .tile .tile-hint { font-size: 0.85rem; opacity: 0.75; }
.legacy .tile.tile-muted { opacity: 0.6; }
.legacy .tile > .btn { align-self: flex-start; }
.legacy .launchpad { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin: 0.5rem 0; background: var(--surface); }
.legacy .launchpad .lp-head { display: flex; align-items: center; gap: 0.5rem; }
.legacy .launchpad .lp-dot {
  width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--state-gray); display: inline-block;
}
.legacy .launchpad .lp-note { margin-top: 0.5rem; }
.legacy .launchpad[data-state="running"] { border-color: var(--state-green); background: var(--prod-bg); }
.legacy .launchpad[data-state="running"] .lp-dot { background: var(--state-green); }
.legacy .launchpad[data-state="stopped"] { background: var(--surface-2); }
.legacy .launchpad[data-state="stopped"] .lp-dot { background: var(--state-gray); }
.legacy .deeplink-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.legacy .ms-scroll { overflow-x: auto; margin: 0.5rem 0; }
.legacy table.module-status { min-width: max-content; }
.legacy table.module-status th, .legacy table.module-status td { vertical-align: top; }
.legacy .ms-mod .name { font-weight: 600; }
.legacy .ms-drafts { margin: 0.25rem 0; padding-left: 1.1rem; }
.legacy .ms-drafts li { margin: 0.1rem 0; }
.legacy .ms-sha { font-family: var(--mono); }
.legacy .mx-scroll { overflow-x: auto; margin: 0.5rem 0; }
.legacy table.matrix { min-width: max-content; }
.legacy table.matrix thead th { position: sticky; top: 0; background: var(--surface); }
.legacy table.matrix th, .legacy table.matrix td { vertical-align: middle; white-space: nowrap; }
.legacy .mx-group { text-align: center; font-size: 0.8rem; opacity: 0.8; font-weight: 600; }
.legacy .mx-slug { font-size: 0.72rem; font-weight: 500; opacity: 0.8; text-align: center; }
.legacy .mx-dot { text-align: center; }
.legacy .mx-div { border-left: 2px solid var(--border-strong); }
.legacy .dot {
  display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  box-sizing: border-box; vertical-align: middle;
}
.legacy .dot-available { background: var(--state-green); border: 1px solid var(--state-green); }
.legacy .dot-missing { background: transparent; border: 2px solid var(--state-amber); }
.legacy .dot-planned { background: transparent; border: 2px dashed var(--state-purple); }
.legacy .mx-legend .dot { margin: 0 0.15rem; }
.legacy .badge.you { background: var(--lavender-soft); color: var(--admin-fg); border-color: var(--admin-border); }
.legacy .badge.team { background: var(--surface-2); color: var(--text-muted); border-color: var(--border-strong); }
.legacy .mx-sha { font-family: var(--mono); }
.legacy .mx-quiet { color: var(--state-amber); }
.legacy .mx-hint { color: var(--teal); font-size: 0.85rem; }
.legacy .drift-group { margin: 0.75rem 0; }
.legacy .finding { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin: 0.5rem 0; background: var(--surface); }
.legacy .finding .head { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.legacy .finding .name { font-weight: 600; }
.legacy .gov-strip {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 1rem 0;
  background: var(--surface);
}
.legacy .gov-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.legacy .chip {
  display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.6rem;
  border-radius: 999px; border: 1px solid var(--border); text-decoration: none; color: inherit;
  background: var(--surface-2); white-space: nowrap;
}
.legacy .chip:hover { background: var(--surface-3); }
.legacy .chip.chip-alert { border-color: var(--red-border); color: var(--sev-red); background: var(--red-soft); }
.legacy .chip.chip-warn { border-color: var(--ws-border); color: var(--ws-fg); background: var(--ws-bg); }
.legacy .chip.chip-ok { border-color: var(--teal-border); color: var(--teal); background: var(--teal-soft); }
.legacy .settings-nav {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0.75rem;
  border-bottom: 1px solid var(--border); padding-bottom: 0.5rem;
}
.legacy .settings-nav a {
  text-decoration: none; color: inherit; font-size: 0.9rem; padding: 0.35rem 0.7rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
}
.legacy .settings-nav a:hover { background: var(--surface-2); }
.legacy .settings-nav a.active {
  border-color: var(--border-strong); font-weight: 600;
  background: var(--surface-3);
}
.legacy .proposal-note {
  border: 1px dashed var(--lavender-border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin: 0.75rem 0;
  background: var(--lavender-soft); color: var(--banner-proposal-fg);
}

/* Keep the accepted Lazurio role tokens last: the legacy compatibility layer
   above still declares its historical palette earlier in the cascade. */
:root {
  --bg: #fbfaf9;
  --surface: #ffffff;
  --surface-2: #f5f4f3;
  --surface-3: #ecebea;
  --border: #dddcdb;
  --border-strong: #c3c2c1;
  --text: #090909;
  --text-muted: #515151;
  --text-subtle: #707070;
  --action: #090909;
  --action-fg: #ffffff;
  --action-hover: #262626;
  --focus: #0d12db;
  --grid-line: rgba(9, 9, 9, .035);
  --teal: #0d12db;
  --lavender: #0b0e91;
  --gold: #515151;
  --teal-border: #a8b9fb;
  --lavender-border: #a8b9fb;
  --gold-border: #c3c2c1;
  --teal-soft: #ebf1fe;
  --lavender-soft: #ebf1fe;
  --gold-soft: #f5f4f3;
  --radius: 6px;
  --radius-sm: 3px;
  --radius-lg: 6px;
  --shadow: 0 1px 2px rgba(9, 9, 9, .05);
  --shadow-sm: 0 1px 2px rgba(9, 9, 9, .06);
  --shadow-md: 0 2px 8px rgba(9, 9, 9, .08);
  --font: "Inter Tight Variable", "Inter Tight", Inter, system-ui, sans-serif;
  --font-display: "Inter Tight Variable", "Inter Tight", Inter, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #090909;
    --surface: #171717;
    --surface-2: #262626;
    --surface-3: #3d3d3d;
    --border: #3d3d3d;
    --border-strong: #515151;
    --text: #ffffff;
    --text-muted: #c3c2c1;
    --text-subtle: #999999;
    --action: #ffffff;
    --action-fg: #090909;
    --action-hover: #ecebea;
    --focus: #7083f7;
    --grid-line: rgba(255, 255, 255, .035);
    --teal: #7083f7;
    --lavender: #a8b9fb;
    --gold: #c3c2c1;
    --teal-border: #0b0e91;
    --lavender-border: #0b0e91;
    --gold-border: #515151;
    --teal-soft: #0c0d72;
    --lavender-soft: #0c0c53;
    --gold-soft: #262626;
  }
}

:root[data-theme="dark"] {
  --bg: #090909;
  --surface: #171717;
  --surface-2: #262626;
  --surface-3: #3d3d3d;
  --border: #3d3d3d;
  --border-strong: #515151;
  --text: #ffffff;
  --text-muted: #c3c2c1;
  --text-subtle: #999999;
  --action: #ffffff;
  --action-fg: #090909;
  --action-hover: #ecebea;
  --focus: #7083f7;
  --grid-line: rgba(255, 255, 255, .035);
  --teal: #7083f7;
  --lavender: #a8b9fb;
  --gold: #c3c2c1;
  --teal-border: #0b0e91;
  --lavender-border: #0b0e91;
  --gold-border: #515151;
  --teal-soft: #0c0d72;
  --lavender-soft: #0c0c53;
  --gold-soft: #262626;
}

/* Mobile keeps the persistent navigation contract as a compact icon rail.
   The main canvas still receives enough width for the Team launcher cards;
   labels remain in the DOM and each row exposes a native title tooltip. */
@media (max-width: 720px) {
  :root { --sidebar-w: 72px; }

  .sidebar__top {
    justify-content: center;
    padding: 12px 8px;
  }

  .sidebar__top .spacer,
  .sidebar__gear,
  .lazurio-brand__name,
  .lazurio-brand__product,
  .sidebar__section,
  .nav-row__label,
  .org-row__name,
  .persona-badge--mini,
  .sync-dot,
  .sidebar__account-id,
  .sidebar__account-chevron,
  .settings-children {
    display: none;
  }

  .lazurio-brand {
    align-items: center;
    justify-content: center;
  }

  .lazurio-brand__signal {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .lazurio-brand__signal::after {
    content: "L";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
  }

  .sidebar__scroll { padding: 8px; }

  .nav-row,
  .org-row {
    justify-content: center;
    gap: 0;
    padding: 9px 8px;
  }

  .nav-row--back { margin-bottom: 6px; }
  .settings-org-row { margin-top: 0; }

  .sidebar__account-foot { padding: 8px; }
  .sidebar__account-row { justify-content: center; padding: 7px; }
  .account-popover {
    right: auto;
    width: min(240px, calc(100vw - 16px));
  }

  .context-bar { padding: 10px 16px; }
  .view { padding: 20px 16px 48px; }
  .workspace-launcher { margin: 24px 0 32px; }
  .workspace-card { padding: 16px; }
}