/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ELODUS²  ·  ATELIER                                             ║
   ║  white, full-bleed, ultramarine accent.                          ║
   ║  one serif italic for soul, sans for everything else.            ║
   ║  fonts: Instrument Sans/Serif + JetBrains Mono                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root {
  /* — light palette ————————————————————————————————————————— */
  --bg:           #ffffff;
  --bg-soft:      #fafafa;
  --bg-deep:      #f4f4f5;
  --bg-hover:     #f7f7f8;

  --ink:          #0a0a0a;
  --ink-1:        #18181b;
  --ink-2:        #3f3f46;
  --ink-3:        #5b5b63;   /* WCAG AA on white: 6.7:1 */
  --ink-4:        #71717a;   /* WCAG AA on white: 4.81:1 — was #a1a1aa (2.55:1, failed AA) */
  --ink-5:        #d4d4d8;
  --line:         #ececef;
  --line-strong:  #d4d4d8;

  --accent:       #1d4eff;   /* electric ultramarine — single accent */
  --accent-deep:  #1338c2;
  --accent-soft:  #eef0ff;
  --accent-line:  #c7d2fe;
  --moss:         #15803d;
  --moss-bg:      #f0fdf4;
  --moss-line:    #bbf7d0;
  --rust:         #b91c1c;
  --rust-bg:      #fef2f2;
  --rust-line:    #fecaca;
  --amber:        #a16207;
  --amber-bg:     #fffbeb;
  --amber-line:   #fde68a;

  --code-bg:      #0a0a0a;   /* dark code blocks */
  --code-fg:      #fafafa;
}

/* — dark palette ———————————————————————————————————————————— */
:root[data-theme="dark"] {
  --bg:           #0e0f12;   /* warm near-black */
  --bg-soft:      #15171c;
  --bg-deep:      #1c1f26;
  --bg-hover:     #1a1c22;

  --ink:          #f0eee6;   /* warm off-white — cream mirrored */
  --ink-1:        #d8d4c8;
  --ink-2:        #a39d8e;
  --ink-3:        #918a7a;   /* WCAG AA on #0e0f12: 5.5:1 — was #7e7868 (4.34:1, failed AA) */
  --ink-4:        #807a6c;   /* WCAG AA on #0e0f12: 4.5:1 — was #56524a (3.1:1, failed AA) */
  --ink-5:        #36342f;
  --line:         #22242a;
  --line-strong:  #393d47;

  --accent:       #6588ff;   /* lifted blue — survives dark bg */
  --accent-deep:  #4365e6;
  --accent-soft:  #1a2548;
  --accent-line:  #2a3a72;
  --moss:         #4ea862;
  --moss-bg:      #15291c;
  --moss-line:    #1f4630;
  --rust:         #ef5757;
  --rust-bg:      #2a1717;
  --rust-line:    #4f2222;
  --amber:        #d4a73f;
  --amber-bg:     #2a2110;
  --amber-line:   #4f3d1d;

  --code-bg:      #060708;   /* darker than bg so code panes still pop */
  --code-fg:      #e8e6dd;

  --shadow-card:  0 1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
  --shadow-hover: 0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.4);
  --shadow-pop:   0 12px 32px -12px rgba(101,136,255,.35), 0 2px 8px -2px rgba(0,0,0,.5);
}

/* — auto: pick dark if user's OS asks for it & no explicit setting — */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:           #0e0f12;
    --bg-soft:      #15171c;
    --bg-deep:      #1c1f26;
    --bg-hover:     #1a1c22;
    --ink:          #f0eee6;
    --ink-1:        #d8d4c8;
    --ink-2:        #a39d8e;
    --ink-3:        #918a7a;
    --ink-4:        #807a6c;
    --ink-5:        #36342f;
    --line:         #22242a;
    --line-strong:  #393d47;
    --accent:       #6588ff;
    --accent-deep:  #4365e6;
    --accent-soft:  #1a2548;
    --accent-line:  #2a3a72;
    --moss:         #4ea862;
    --moss-bg:      #15291c;
    --moss-line:    #1f4630;
    --rust:         #ef5757;
    --rust-bg:      #2a1717;
    --rust-line:    #4f2222;
    --amber:        #d4a73f;
    --amber-bg:     #2a2110;
    --amber-line:   #4f3d1d;
    --code-bg:      #060708;
    --code-fg:      #e8e6dd;
    --shadow-card:  0 1px 0 rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
    --shadow-hover: 0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.4);
    --shadow-pop:   0 12px 32px -12px rgba(101,136,255,.35), 0 2px 8px -2px rgba(0,0,0,.5);
  }
}

/* — type + measure (light-mode defaults; survive into dark) ——————————— */
:root {
  --display: "Instrument Serif", "Iowan Old Style", Garamond, Georgia, serif;
  --sans:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", "IBM Plex Mono", Menlo, monospace;

  --rail-w:    212px;
  /* Default ~25% of viewport, with sane floor and ceiling. Bounded so
     it never crowds the main column on small screens or eats the page
     on ultra-wides. Drag-resize overrides via inline style. */
  --asst-w:    clamp(280px, 25vw, 480px);
  --asst-w-min: 200px;
  --asst-w-max: 480px;
  --top-h:     52px;

  /* Motion scale — three speeds. Use --tr for most interactive states;
     --tr-fast for high-frequency things (hover, pop-in); --tr-slow for
     bigger reveals + layout changes. */
  --tr-fast: 120ms ease;
  --tr:      180ms ease;
  --tr-slow: 280ms cubic-bezier(.2,.7,.2,1);
  --pad:       clamp(1.5rem, 3vw, 2.5rem);
  --radius:    8px;
  --radius-sm: 6px;
  --shadow-card:   0 1px 0 rgba(15,15,20,.04), 0 1px 2px rgba(15,15,20,.04);
  --shadow-hover:  0 8px 24px -8px rgba(15,15,30,.12), 0 2px 6px -2px rgba(15,15,30,.06);
  --shadow-pop:    0 12px 32px -12px rgba(29,78,255,.18), 0 2px 8px -2px rgba(15,15,30,.05);
}

/* ╭─────── reset & base ───────╮ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.codex {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  font-feature-settings: "ss01", "kern", "liga", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  transition: background .25s ease, color .25s ease;
}
body.codex * { transition-property: background-color, border-color, color, box-shadow; transition-duration: .15s; }
body.codex *:not(html):not(body):not(.no-tt) { transition-timing-function: ease; }
/* opt-out for elements where transitions feel laggy */
.stc__chev, .legacy__chev, .danger-zone__chev, .rail__toggle-collapse, .rail__toggle-expand { transition: transform .15s ease !important; }

a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-deep); }
::selection { background: var(--accent); color: white; }
button { font: inherit; color: inherit; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

.grain { display: none; }  /* no grain in atelier mode */

/* ╭─────── a11y helpers ───────╮ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 0; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: .65rem 1rem; font-size: .9rem; font-weight: 600;
  text-decoration: none; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { top: 0; outline: 2px solid var(--accent); outline-offset: 2px; }

/* ╭─────── shell layout (left rail + main) ───────╮ */

body.codex {
  display: grid;
  /* DOM order is rail → main → assistant. */
  grid-template-columns: var(--rail-w) 1fr var(--asst-w);
  height: 100vh;
}
/* When collapsed, the asst column shrinks to a thin 36px strip on the
   right and stays in the grid (no position:fixed). That way the main
   column genuinely extends to the strip's left edge — no overlap. */
/* !important because a previously-dragged width lives as an inline style
   on <html> (saved in localStorage). Without !important, inline wins and
   the collapse stops shrinking the column. */
html.asst-collapsed { --asst-w: 36px !important; }

@media (max-width: 760px) {
  body.codex { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  /* Off-canvas rail. The drawer slides in from the left when html.rail-mobile-open. */
  body.codex > .rail {
    position: fixed;
    top: 0; left: 0;
    width: min(280px, 86vw);
    height: 100vh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,.35);
  }
  html.rail-mobile-open body.codex > .rail { transform: translateX(0); }
  /* Backdrop while drawer open. */
  body.codex::after {
    content: ""; position: fixed; inset: 0; background: rgba(15,17,22,.45);
    opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: 50;
  }
  html.rail-mobile-open body.codex::after { opacity: 1; pointer-events: auto; }
  /* Topbar gets the burger; content gets full width. */
  body.codex > .shell { min-width: 0; }
  .topbar__burger { display: inline-flex !important; }
  /* Collapse-state overrides should not apply on mobile — drawer takes over. */
  html.rail-collapsed.rail-mobile-open { /* both classes ok; drawer wins */ }
  html.rail-collapsed body.codex > .rail { --rail-w: var(--rail-w-default, 212px); }
  /* Assistant is hidden on mobile — agent activity surfaces via the
     existing status/proposals routes; the slim left rail stays the
     single source of nav. Promote later if mobile-assistant is needed. */
  body.codex > .asst { display: none; }
}
.topbar__burger { display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; margin-right: .5rem;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-2); cursor: pointer;
}
.topbar__burger:hover { background: var(--bg-hover); color: var(--ink); }

/* ╭─────── left rail ───────╮ */

.rail {
  background: var(--bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}

.rail__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .65rem .7rem .85rem;
  border-bottom: 1px solid var(--line);
  gap: .45rem;
}
.rail__brand {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; color: inherit;
  flex: 1; min-width: 0;
}
.rail__brand:hover { color: inherit; }
.rail__toggle {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  background: transparent; color: var(--ink-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  flex: none; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.rail__toggle:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--line); }
.rail__toggle-expand { display: none; }
html.rail-collapsed .rail__toggle-collapse { display: none; }
html.rail-collapsed .rail__toggle-expand { display: block; }

/* — collapsed state — */
html.rail-collapsed { --rail-w: 64px; }
html.rail-collapsed .rail__word,
html.rail-collapsed .rail__h,
html.rail-collapsed .rail__link span,
html.rail-collapsed .rail__ws,
html.rail-collapsed .rail__user-meta,
html.rail-collapsed .rail__signout { display: none; }
html.rail-collapsed .rail__head {
  padding: 1rem .65rem;
  flex-direction: column;
  gap: .55rem;
}
html.rail-collapsed .rail__brand { justify-content: center; gap: 0; flex: none; }
html.rail-collapsed .rail__toggle { width: 100%; max-width: 36px; }
html.rail-collapsed .rail__section { padding: .85rem .55rem .25rem; }
html.rail-collapsed .rail__link { justify-content: center; padding: .55rem; }
html.rail-collapsed .rail__user { justify-content: center; padding: .5rem 0; }
html.rail-collapsed .rail__bottom { padding: .65rem .55rem 1rem; align-items: center; }
.rail__mark {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  background: var(--ink); color: var(--bg);
  border-radius: var(--radius-sm);
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1.2rem; line-height: 1;
  flex: 0 0 28px;
}
/* keep brand mark identical size when sidebar collapses */
html.rail-collapsed .rail__mark { width: 28px; height: 28px; font-size: 1.2rem; flex: 0 0 28px; }
.rail__word {
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  letter-spacing: -.005em; color: var(--ink);
}
.rail__sup { font-family: var(--display); font-style: italic; color: var(--accent); }

.rail__section {
  padding: .8rem .55rem .15rem;
}
.rail__h {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--ink-3);
  padding: 0 .55rem .3rem;
  font-weight: 600;
}

.rail__nav { display: flex; flex-direction: column; gap: 0; }
.rail__link {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .55rem;
  font-size: .82rem;
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .12s, color .12s;
  position: relative;
}
.rail__link:hover { background: var(--bg-hover); color: var(--ink); }
.rail__link[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 500;
}
.rail__link[aria-current="page"]::before {
  content: "";
  position: absolute; left: -.55rem; top: 25%; bottom: 25%;
  width: 2px; background: var(--accent); border-radius: 0 2px 2px 0;
}
.rail__icon {
  width: 15px; height: 15px; flex: none;
  color: var(--ink-3);
}
.rail__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; padding: .12rem .42rem;
  font-family: var(--mono); font-size: .7rem; font-weight: 700;
  line-height: 1;
  background: var(--amber); color: white; border-radius: 999px;
  margin-left: .35rem; vertical-align: middle;
  letter-spacing: .02em;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent);
  animation: rail-badge-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes rail-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--amber) 8%,  transparent); }
}

/* The whole rail link gets a soft amber wash whenever it carries a
   pending badge — so the *link* draws attention, not just the chip. */
.rail__link:has(.rail__badge) {
  background: var(--amber-bg);
  color: var(--ink-1);
}
.rail__link:has(.rail__badge):hover {
  background: color-mix(in srgb, var(--amber-bg) 70%, var(--amber) 8%);
}
.rail__link:has(.rail__badge) .rail__icon {
  color: var(--amber);
}
/* When the page is BOTH active and has pending, accent wins for the
   background (you're already looking at it), but the icon and badge
   keep their amber identity. */
.rail__link[aria-current="page"]:has(.rail__badge) {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.rail__link[aria-current="page"]:has(.rail__badge) .rail__icon {
  color: var(--amber);
}
.rail__link:hover .rail__icon,
.rail__link[aria-current="page"] .rail__icon { color: var(--accent); }

/* ── Workspace chip — single-row link to the current workspace's overview.
   The per-workspace tabs (Overview / Sharing / Git repos / Settings) handle
   nav from there; no dropdown needed here. ── */
.rail__ws {
  display: block;
  margin: .55rem .55rem .25rem;
  padding: .5rem .65rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}
.rail__ws:hover {
  background: var(--bg-hover);
  border-color: var(--line-strong);
}
.rail__ws[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.rail__ws[aria-current="page"] .rail__ws-value { color: var(--accent-deep); }
.rail__ws-label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-4); display: block;
}
.rail__ws-value {
  font-family: var(--display); font-style: italic;
  font-size: .98rem; color: var(--ink); line-height: 1.15; margin-top: .1rem;
  display: block;
}
.rail__ws:hover .rail__ws-value { color: var(--accent-deep); }

/* Amber pending-proposals dot — anchored top-right of the chip. */
.rail__ws-pending {
  position: absolute;
  right: .55rem; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent);
  animation: rail-badge-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
html.rail-collapsed .rail__ws-pending {
  right: auto; left: 50%; top: 10px; transform: translateX(-50%);
}
.rail__ws-empty { font-style: italic; color: var(--ink-3); font-family: var(--sans); font-size: .8rem; }
.rail__ws-switch {
  display: inline-flex; align-items: center; gap: .2rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  color: var(--ink-3); margin-top: .35rem;
  text-transform: uppercase;
}
.rail__ws-switch:hover { color: var(--accent); }

/* ── Bottom rail — avatar dropdown owns My-keys/Billing/Admin/Theme/Sign out ── */
.rail__bottom {
  margin-top: auto;
  padding: .5rem .55rem .65rem;
  border-top: 1px solid var(--line);
}
.rail__bottom--menu { padding: 0; border-top: 1px solid var(--line); }
.rail__user-sum {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .65rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  color: var(--ink-2);
}
.rail__user-sum::-webkit-details-marker { display: none; }
.rail__user-sum:hover { background: var(--bg-hover); color: var(--ink); }
.rail__bottom--menu[open] .rail__user-sum { background: var(--bg-hover); color: var(--ink); }

.rail__avatar {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; flex: none;
  background: var(--accent); color: white;
  border-radius: 50%;
  font-family: var(--mono); font-size: .76rem; font-weight: 600;
  text-transform: uppercase;
}
.rail__user-meta {
  display: flex; flex-direction: column; line-height: 1.1; min-width: 0; flex: 1;
}
.rail__user-name { font-size: .82rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.rail__user-role { font-family: var(--mono); font-size: .65rem; letter-spacing: .15em; color: var(--ink-3); text-transform: uppercase; }
.rail__user-chev {
  color: var(--ink-4); font-size: .8rem; flex: none;
  transition: transform var(--tr-fast), color var(--tr-fast);
}
.rail__bottom--menu[open] .rail__user-chev { transform: rotate(180deg); color: var(--accent); }

.rail__user-pop {
  border-top: 1px solid var(--line);
  padding: .25rem 0 .35rem;
  display: flex; flex-direction: column;
}
.rail__user-pop-link {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .85rem;
  font-family: var(--sans); font-size: .82rem;
  color: var(--ink-1); text-decoration: none;
  background: transparent; border: 0; text-align: left;
  cursor: pointer; width: 100%;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.rail__user-pop-link:hover { background: var(--bg-hover); color: var(--accent-deep); }
.rail__user-pop-link svg { color: var(--ink-4); flex: 0 0 14px; }
.rail__user-pop-link:hover svg { color: var(--accent); }
.rail__user-pop-link--danger:hover { color: var(--rust); background: var(--rust-bg); }
.rail__user-pop-link--danger:hover svg { color: var(--rust); }
.rail__user-pop-sep { height: 1px; background: var(--line); margin: .15rem 0; }

.rail__user-pop-theme { /* inherits .rail__user-pop-link */ }
.rail__user-pop-theme .rail__theme-label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.rail__theme-ico { color: var(--accent); }
.rail__theme-ico--light, .rail__theme-ico--dark, .rail__theme-ico--auto { display: none; }
:root[data-theme="light"] .rail__theme-ico--light { display: inline-block; }
:root[data-theme="dark"]  .rail__theme-ico--dark  { display: inline-block; }
:root[data-theme="auto"]  .rail__theme-ico--auto  { display: inline-block; }

/* Collapsed rail: dropdowns hide their popovers; clicking the summary
   still toggles, but in collapsed mode the rail is icon-only, so just
   show the avatar + workspace mark. */
html.rail-collapsed .rail__ws .rail__ws-label,
html.rail-collapsed .rail__ws .rail__ws-value,
html.rail-collapsed .rail__user-meta,
html.rail-collapsed .rail__user-chev { display: none; }
html.rail-collapsed .rail__user-pop { display: none; }
html.rail-collapsed .rail__user-sum { justify-content: center; padding: .55rem 0; }

/* ╭─────── main column ───────╮ */

.shell {
  display: grid;
  grid-template-rows: var(--top-h) 1fr;
  overflow-y: auto;
  background: var(--bg);
}

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
  height: var(--top-h);
}
.topbar__crumb {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--ink-3);
  display: flex; align-items: center; gap: .55rem;
}
.topbar__crumb a { color: var(--ink-3); }
.topbar__crumb a:hover { color: var(--ink); }
.topbar__crumb__sep { color: var(--ink-4); }
.topbar__crumb__current { color: var(--ink); font-weight: 500; }
.topbar__spacer { flex: 1; }
.topbar__search {
  display: flex; align-items: center; gap: .5rem;
  height: 36px; padding: 0 .85rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 320px; max-width: 36vw;
  font-family: var(--sans); font-size: .9rem;
  color: var(--ink-3);
  transition: background .12s, border-color .12s;
  cursor: text;
}
.topbar__search:hover { background: var(--bg); border-color: var(--line-strong); }
.topbar__search input { background: transparent; border: 0; outline: 0; flex: 1; font: inherit; color: var(--ink); }
.topbar__search input::placeholder { color: var(--ink-4); }
.topbar__search:focus-within { background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,78,255,.1); }
.topbar__search kbd {
  font-family: var(--mono); font-size: .68rem;
  padding: .12rem .4rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 4px; color: var(--ink-3);
}
.srpop { position: absolute; top: calc(var(--top-h) - 4px); left: 0; right: 0; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); display: none; max-height: 70vh; overflow-y: auto; z-index: 20; }
.topbar__search:focus-within .srpop:not(:empty) { display: block; }
.srpop__inner { padding: .5rem; }
.srpop__group { margin-bottom: .5rem; }
.srpop__group:last-of-type { margin-bottom: 0; }
.srpop__h { font-family: var(--mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); padding: .35rem .65rem; font-weight: 500; }
.srpop__row { display: flex; align-items: center; gap: .55rem; padding: .45rem .65rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.srpop__row:hover { background: var(--bg-hover); color: var(--ink); }
.srpop__title { flex: 1; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srpop__sub { font-family: var(--mono); font-size: .68rem; color: var(--ink-3); white-space: nowrap; }
.srpop__pill { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; padding: .15rem .4rem; background: var(--bg-deep); color: var(--ink-3); border-radius: 999px; text-transform: uppercase; }
.srpop__pill--sec { background: var(--accent-soft); color: var(--accent-deep); font-family: var(--display); font-style: italic; }
.srpop__all { display: block; padding: .55rem .65rem; font-family: var(--mono); font-size: .72rem; color: var(--accent); border-top: 1px solid var(--line); margin-top: .35rem; text-align: center; letter-spacing: .04em; }
.srpop__empty { padding: 1rem; color: var(--ink-3); font-size: .85rem; text-align: center; }
.srpop__empty-q { font-style: italic; }

.main {
  padding: clamp(2rem, 4vw, 3rem) var(--pad) 4rem;
  animation: rise .45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ╭─────── page heading ───────╮ */

.page { max-width: none; margin: 0; }  /* full-bleed */

.page__hd { padding: 0 0 1.5rem; }
.page__eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .9rem;
  font-weight: 500;
}
.page__eyebrow::before { content: none; }
.page__eyebrow a { color: var(--ink-3); }
.page__eyebrow a:hover { color: var(--accent); }

.page__title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0 0 .85rem;
  color: var(--ink);
}
.page__title em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.015em;
}

.page__lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 70ch;
  margin: 0;
}

.page__rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 1.75rem 0;
}

/* ╭─────── cards ───────╮ */

.grid          { display: grid; gap: 1rem; }
.grid--2       { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--3       { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--4       { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid--6       { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.card {
  display: block;
  position: relative;
  padding: 1.25rem 1.35rem 1.4rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform .18s cubic-bezier(.3,.7,.3,1), box-shadow .18s, border-color .18s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--ink-5);
  color: inherit;
}
.card__num {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .2em;
  color: var(--accent);
  margin-bottom: .25rem;
  font-weight: 500;
}
.card__h3 {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 600;
  margin: .15rem 0 .35rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.card__h3 em { font-family: var(--display); font-style: italic; font-weight: 400; }
.card__p {
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink-3);
  margin: 0;
}

/* — quick-action tile (home) — */
.tile {
  display: flex; flex-direction: column; gap: .65rem;
  padding: 1.35rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
  overflow: hidden;
}
.tile::after {
  content: "→";
  position: absolute; top: 1rem; right: 1.2rem;
  color: var(--ink-4);
  font-family: var(--display); font-size: 1.2rem;
  transition: color .15s, transform .15s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--ink-5); color: inherit; }
.tile:hover::after { color: var(--accent); transform: translateX(3px); }
.tile__icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius-sm);
}
.tile__h { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--ink); letter-spacing: -.005em; }
.tile__p { font-size: .88rem; color: var(--ink-3); line-height: 1.45; margin: 0; }
.tile__count {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  color: var(--ink-3); text-transform: uppercase; margin-top: auto; padding-top: .5rem;
  border-top: 1px dashed var(--line);
}

/* ╭─────── meta strip ───────╮ */

.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.meta__row {
  padding: .85rem 1.1rem;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.meta__row:last-child { border-right: none; }
.meta__k {
  font-family: var(--mono);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ink-3); font-weight: 500;
}
.meta__v {
  font-family: var(--sans);
  font-size: 1.1rem;
  color: var(--ink);
  margin-top: .15rem;
  font-weight: 500;
  letter-spacing: -.005em;
}
.meta__v em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--accent); }

/* ╭─────── pills + status ───────╮ */

.pill {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  font-weight: 500;
  padding: .15rem .55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  vertical-align: middle;
  white-space: nowrap;
}
/* Generic fallback for any admin-added kind. The known kinds below override it. */
.pill[class*="pill--"] { background: var(--bg-soft); color: var(--ink-2); border-color: var(--line); }
.pill--requirement { background: #dbeafe; color: #1e3a8a;  border-color: #93c5fd; }
.pill--blueprint   { background: #ede9fe; color: #5b21b6;  border-color: #c4b5fd; }
.pill--utility     { background: #fef3c7; color: #854d0e;  border-color: #fde68a; }
.pill--datamodel   { background: #ecfeff; color: #155e75;  border-color: #a5f3fc; }
.pill--runbook     { background: #f0fdf4; color: #166534;  border-color: #bbf7d0; }
.pill--reference   { background: #f5f3ff; color: #4c1d95;  border-color: #ddd6fe; }
.pill--note        { background: #f8fafc; color: #334155;  border-color: #e2e8f0; }
.pill--object   { background: #eef0ff; color: #1338c2;  border-color: #c7d2fe; }
.pill--table    { background: #fff7ed; color: #9a3412;  border-color: #fed7aa; }

/* Inline kind picker — visually mirrors a .pill but is a real <select>. */
.doc-kind { display: inline-block; margin: 0; }
.kind-pick {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  font-weight: 500;
  padding: .15rem 1.4rem .15rem .55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--bg-soft);
  color: var(--ink-2);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.kind-pick:hover { filter: brightness(.97); }
.kind-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kind-pick--requirement { background-color: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.kind-pick--blueprint   { background-color: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.kind-pick--utility     { background-color: #fef3c7; color: #854d0e; border-color: #fde68a; }
.kind-pick--datamodel   { background-color: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.kind-pick--runbook     { background-color: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.kind-pick--reference   { background-color: #f5f3ff; color: #4c1d95; border-color: #ddd6fe; }
.kind-pick--note        { background-color: #f8fafc; color: #334155; border-color: #e2e8f0; }

.status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  font-weight: 500;
  padding: .15rem .5rem .15rem .55rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.status--draft     { background: var(--bg-deep);     color: var(--ink-3); border-color: var(--line-strong); }
.status--draft::before     { background: var(--ink-4); }
.status--queued    { background: #fffbeb;            color: var(--amber); border-color: #fde68a; }
.status--queued::before    { background: var(--amber); }
.status--running   { background: var(--accent-soft); color: var(--accent-deep); border-color: #c7d2fe; }
.status--running::before   { background: var(--accent); animation: pulse 1.6s infinite; }
.status--completed { background: #f0fdf4;            color: var(--moss); border-color: #bbf7d0; }
.status--completed::before { background: var(--moss); }
.status--failed    { background: #fef2f2;            color: var(--rust); border-color: #fecaca; }
.status--failed::before    { background: var(--rust); }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.6); }
}

/* ╭─────── buttons ───────╮ */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 36px; padding: 0 .95rem;
  font-family: var(--sans); font-size: .88rem; font-weight: 500;
  letter-spacing: -.005em;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .08s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-hover); border-color: var(--ink-4); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--accent); color: white; border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: white; box-shadow: var(--shadow-pop); }
.btn--ghost {
  background: transparent; border-color: transparent; color: var(--ink-2);
}
.btn--ghost:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--line); }
.btn--danger { color: var(--rust); border-color: var(--line-strong); }
.btn--danger:hover { background: #fef2f2; color: var(--rust); border-color: #fecaca; }
.btn--lg { height: 44px; padding: 0 1.25rem; font-size: .95rem; }
.btn--sm { height: 28px; padding: 0 .65rem; font-size: .8rem; }

/* ── markdown editor (toolbar + textarea) ───────────────────────────── */
.md-ed { display: flex; flex-direction: column; gap: 0; }
.md-ed__bar {
  display: flex; align-items: center; gap: .15rem;
  padding: .35rem .45rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.md-ed__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px;
  padding: 0 .5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: .82rem; color: var(--ink-2);
  cursor: pointer;
}
.md-ed__btn:hover { background: var(--bg); color: var(--ink); border-color: var(--line); }
.md-ed__btn:active { transform: translateY(1px); }
.md-ed__sep { width: 1px; height: 18px; background: var(--line); margin: 0 .25rem; }
.md-ed__status { margin-left: auto; font-size: .78rem; color: var(--ink-3); padding: 0 .35rem; }
.md-ed__status--err { color: var(--rust); }
.md-ed__ta {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  transition: outline-color .12s;
}
.md-ed__ta--drop { outline: 2px dashed var(--accent); outline-offset: -4px; }
.md-ed__hint { margin: .35rem 0 0; font-size: .76rem; color: var(--ink-3); }
.btn__mark {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1rem; line-height: 1;
}

/* ╭─────── data tables ───────╮ */

.dtable {
  width: 100%; border-collapse: collapse;
  font-size: .92rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.dtable th {
  text-align: left;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.dtable td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-1);
}
.dtable tr:last-child td { border-bottom: none; }
.dtable tr:hover td { background: var(--bg-hover); }
.dtable td a { color: var(--ink); font-weight: 500; }
.dtable td a:hover { color: var(--accent); }
.dtable__id    { font-family: var(--mono); color: var(--ink-3); width: 4rem; font-size: .8rem; }
.dtable__phase { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }
.dtable__date  { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); width: 12rem; }

/* ╭─────── document view ───────╮ */

.doc { max-width: 78ch; margin: 0; padding: 1rem 0 4rem; }

.doc__section {
  margin: 1.75rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--line);
  position: relative;
}
.doc__section--depth-1 { border-left-color: var(--ink-2); }
.doc__section--depth-2 { border-left-color: var(--accent); }
.doc__section--depth-3 { border-left-color: var(--ink-5); border-left-style: dashed; }

.doc__sec-hd {
  display: flex; align-items: baseline; gap: .75rem;
  margin-bottom: .8rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}
.doc__sec-num {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .15em; font-weight: 500;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.doc__sec-h {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  flex: 1;
}
.doc__sec-edit {
  margin-left: auto;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 500;
  padding: .25rem .65rem;
  background: var(--bg);
  color: var(--ink-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.doc__sec-edit:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.doc__sec-edit--del { color: var(--rust); }
.doc__sec-edit--del:hover { background: #fef2f2; color: var(--rust); border-color: #fecaca; }
.doc-actions { display: flex; gap: .5rem; margin-bottom: 1.25rem; }

.doc__sec-body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-1);
}
.doc__sec-body p { margin: .65em 0; }
.doc__sec-body code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--bg-deep);
  padding: .08em .35em;
  border-radius: 4px;
}
.doc__sec-body pre {
  background: var(--code-bg); color: var(--code-fg);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  font-family: var(--mono); font-size: .82rem; line-height: 1.55;
  border-radius: var(--radius);
}
.doc__sec-body pre code { background: transparent; padding: 0; color: inherit; border-radius: 0; }
.doc__sec-body ul, .doc__sec-body ol { padding-left: 1.5em; }
.doc__sec-body li { margin: .25em 0; }
.doc__sec-body blockquote {
  border-left: 3px solid var(--accent);
  padding: .25em 1em;
  margin: 1em 0;
  color: var(--ink-3);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.doc__sec-body table { border-collapse: collapse; font-family: var(--mono); font-size: .82rem; margin: 1em 0; width: 100%; }
.doc__sec-body th, .doc__sec-body td { border: 1px solid var(--line); padding: .4rem .65rem; }
.doc__sec-body th { background: var(--bg-soft); }
.doc__sec-body img { max-width: 100%; border-radius: var(--radius-sm); }
.doc__sec-body .mermaid {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 1rem;
  margin: 1em 0;
  border-radius: var(--radius);
  text-align: center;
  overflow-x: auto;
}
.doc__sec-body .mermaid svg { max-width: 100%; height: auto; }

.doc__sec-saved {
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em;
  color: var(--moss); font-weight: 500;
  display: inline-flex; align-items: center; gap: .4rem;
}
.doc__sec-saved::before {
  content: "✓"; color: var(--moss);
}

.doc__section--just-edited { animation: glow 2s ease-out; }
@keyframes glow {
  0%   { background: rgba(21,128,61,.07); }
  100% { background: transparent; }
}

/* — insert-section slot — appears between every section + at top + bottom — */
.ins-slot { position: relative; height: 1.6rem; margin: .35rem 0; display: flex; align-items: center; justify-content: center; }
.ins-slot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); transition: background .15s; }
.ins-slot:hover::before { background: var(--accent); }
.ins-slot__btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--bg);
  border: 1px dashed var(--ink-faint);
  color: var(--ink-3);
  padding: .2rem .65rem;
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .08em;
  border-radius: 999px;
  cursor: pointer;
  opacity: .55;     /* always visible — not hover-only */
  transition: opacity .12s, color .12s, border-color .12s, background .12s, transform .1s;
}
.ins-slot:hover .ins-slot__btn,
.ins-slot__btn:focus,
.ins-slot__btn:hover {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.ins-slot__plus { font-weight: 600; font-size: .95rem; line-height: 1; }
.ins-slot__label { letter-spacing: .12em; }

/* ╭─────── forms ───────╮ */

.form { max-width: 64rem; }
.form__row { margin-bottom: 1.1rem; }
.form__label {
  display: block;
  font-family: var(--sans);
  font-size: .82rem; font-weight: 500;
  color: var(--ink-2);
  margin-bottom: .35rem;
  letter-spacing: -.005em;
}
.form__input, .form__textarea, .form__select {
  width: 100%;
  font-family: var(--sans); font-size: .95rem;
  padding: .6rem .85rem;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: border-color .12s, box-shadow .12s;
}
.form__textarea { font-family: var(--mono); font-size: .88rem; line-height: 1.55; resize: vertical; min-height: 9rem; }
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29,78,255,.12);
}
.form__actions { display: flex; gap: .55rem; margin-top: 1.1rem; }
.form__hint { font-size: .8rem; color: var(--ink-3); margin-top: .35rem; }

/* ╭─────── utilities ───────╮ */

.muted  { color: var(--ink-3); }
.accent { color: var(--accent); }
.kbd    { font-family: var(--mono); font-size: .82em; padding: .12em .42em; background: var(--bg-deep); border: 1px solid var(--line-strong); border-radius: 4px; }
.right  { margin-left: auto; }
.serif  { font-family: var(--display); font-style: italic; font-weight: 400; }

/* — Send to Claude (freeform) — */
.stc { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 1.5rem; }
.stc__summary { list-style: none; cursor: pointer; padding: .65rem 1rem; display: flex; align-items: center; gap: .55rem; user-select: none; }
.stc__summary::-webkit-details-marker { display: none; }
.stc__icon { width: 22px; height: 22px; display: grid; place-items: center; background: var(--ink); color: var(--bg); border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600; flex: none; }
.stc__h { font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--ink); letter-spacing: -.005em; }
.stc__chev { margin-left: auto; color: var(--ink-3); font-size: .8rem; transition: transform .15s; }
.stc[open] .stc__chev { transform: rotate(180deg); color: var(--accent); }
.stc__body { padding: 0 1rem 1rem; border-top: 1px solid var(--line); }
.stc__hint { font-size: .85rem; color: var(--ink-3); line-height: 1.55; max-width: 70ch; margin: .85rem 0 .85rem; }
.stc__actions { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin-top: .65rem; }
.stc__see { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin-left: auto; letter-spacing: .04em; }
.stc__see a { color: var(--accent); }
.stc__ok { background: var(--moss) !important; border-color: var(--moss) !important; color: var(--bg) !important; }
.stc__flash { margin-top: .85rem; padding: .55rem .85rem; background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--moss); font-size: .88rem; border-radius: var(--radius-sm); }
.stc__flash a { color: var(--moss); text-decoration: underline; }
.stc__flash--err { background: #fef2f2; border-color: #fecaca; color: var(--rust); }
.stc__flash--err a { color: var(--rust); }

/* — when-to-use disclosure on key pages — */
.scope-tip { margin-top: 1rem; }
.scope-tip summary {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer; padding: .35rem 0; list-style: none; user-select: none;
}
.scope-tip summary::-webkit-details-marker { display: none; }
.scope-tip summary::before { content: "▸ "; color: var(--ink-4); }
.scope-tip[open] summary::before, .scope-tip.open summary::before { content: "▾ "; color: var(--accent); }
.scope-tip ul { font-size: .9rem; line-height: 1.55; color: var(--ink-2); margin: .35rem 0 0 1.1rem; padding: 0; }
.scope-tip li { margin: .35rem 0; }
.scope-tip.open[open] { /* no-op, style triggered via JS toggle */ }

/* ╭─────── titleblock (legacy) — hidden in atelier mode ───────╮ */
.titleblock { display: none; }


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HOME  — engine/context duality as the page's central frame      ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.home { /* tighten the page wrapper; full-bleed already inherited */ }

.home__hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
  padding: 0 0 1.5rem;
}
@media (max-width: 900px) {
  .home__hero { grid-template-columns: 1fr; }
}

.home__hero-text { display: flex; flex-direction: column; justify-content: center; }
.home__hero-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(2rem, 4.1vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: .35rem 0 .9rem;
  color: var(--ink);
}
.home__hero-title em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -.015em;
}
.home__hero-lede {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0;
}
.home__hero-lede strong { color: var(--ink); font-weight: 600; }

/* — the relationship loop diagram — */
.home__loop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: .85rem;
  margin: 0;
  padding: 1.1rem 1.1rem;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.home__loop::before {
  /* a quiet diagonal scoring suggesting current/flow */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 14px,
    color-mix(in srgb, var(--ink) 2.5%, transparent) 14px 15px
  );
  pointer-events: none;
  opacity: .55;
}
.home__loop > * { position: relative; }

.home__loop-node {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .85rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.home__loop-node--ctx { border-left: 3px solid var(--accent); }
.home__loop-node--eng { border-left: 3px solid var(--ink); }
.home__loop-eyebrow {
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
}
.home__loop-node--ctx .home__loop-eyebrow { color: var(--accent-deep); }
.home__loop-node--eng .home__loop-eyebrow { color: var(--ink); }
.home__loop-name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: .15rem;
}
.home__loop-bullets {
  list-style: none; padding: 0; margin: .15rem 0 0;
  display: flex; flex-direction: column; gap: .12rem;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .03em;
  color: var(--ink-3);
}
.home__loop-bullets li::before { content: "· "; color: var(--ink-4); }
.home__loop-clients {
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .08em;
  color: var(--ink-4);
  margin-top: -.05rem; padding-bottom: .15rem;
  border-bottom: 1px dashed var(--line);
}

.home__loop-arrows {
  display: flex; flex-direction: column;
  justify-content: center; align-items: stretch;
  gap: .25rem;
  min-width: 9rem;
  padding: 0 .35rem;
}
.home__loop-arrow {
  display: flex; flex-direction: column; align-items: center; gap: .08rem;
  color: var(--accent);
}
.home__loop-arrow--up { color: var(--ink-2); }
.home__loop-arrow svg { width: 100%; height: 13px; display: block; }
.home__loop-arrow-label {
  font-family: var(--mono);
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500;
  color: inherit;
}
.home__loop-bus {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: italic;
  font-size: .85rem;
  color: var(--ink-3);
  padding: .1rem 0;
}
.home__loop-bus-label {
  padding: .05rem .55rem;
  background: var(--bg);
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  font-size: .7rem;
  font-family: var(--mono);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 600px) {
  .home__loop { grid-template-columns: 1fr; }
  .home__loop-arrows { flex-direction: row; min-width: 0; padding: .35rem 0; }
  .home__loop-arrow svg { width: 60px; }
  .home__loop-bus { margin: 0 .4rem; }
}

.home__rule { margin: .25rem 0 1.75rem; }


/* — action board: two columns, one per half of the architecture — */
.home__board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 2rem;
}
@media (max-width: 820px) { .home__board { grid-template-columns: 1fr; } }

.home__col {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
  display: flex; flex-direction: column;
  position: relative;
}
.home__col--ctx { border-top: 3px solid var(--accent); }
.home__col--eng { border-top: 3px solid var(--ink); }

.home__col-h { padding: .15rem 0 .65rem; border-bottom: 1px solid var(--line); margin-bottom: .55rem; }
.home__col-num {
  font-family: var(--mono);
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
}
.home__col-h h2 {
  font-family: var(--sans);
  font-weight: 600; font-size: 1.15rem;
  margin: .15rem 0 .25rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.home__col-side {
  font-family: var(--display); font-style: italic;
  font-weight: 400; font-size: .9rem;
  color: var(--ink-3);
  letter-spacing: -.005em;
}
.home__col-h p {
  font-size: .82rem; line-height: 1.5; color: var(--ink-3); margin: 0;
}

.actrow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name hint" "sub hint";
  gap: 0 .55rem;
  padding: .65rem .55rem;
  margin: 0 -.55rem;
  border-radius: var(--radius-sm);
  border-bottom: 1px dashed var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background .12s, transform .08s, color .12s;
}
.home__col > .actrow:last-of-type { border-bottom: 0; }
.actrow__name {
  grid-area: name;
  font-family: var(--sans); font-weight: 600;
  font-size: .98rem; color: var(--ink); letter-spacing: -.005em;
}
.actrow__sub {
  grid-area: sub;
  font-size: .82rem; line-height: 1.45;
  color: var(--ink-3);
  margin-top: .1rem;
}
.actrow__sub em { font-family: var(--display); font-style: italic; color: var(--moss); }
.actrow__hint {
  grid-area: hint;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink-4);
  align-self: center;
  transition: color .15s, transform .15s;
}
.actrow:hover {
  background: var(--bg-hover);
  color: var(--ink);
}
.actrow:hover .actrow__name { color: var(--accent-deep); }
.actrow:hover .actrow__hint { color: var(--accent); transform: translateX(2px); }

.actrow--primary { background: var(--accent-soft); border-bottom-color: transparent; }
.actrow--primary .actrow__name { color: var(--accent-deep); }
.actrow--primary .actrow__hint { color: var(--accent); }
.actrow--primary:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 8%); }

:root[data-theme="dark"] .actrow--primary,
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .actrow--primary { background: color-mix(in srgb, var(--accent) 18%, transparent); }
}


/* — collapsed howto block, slimmer than the old card — */
.howto { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 1.25rem; }
.howto__sum {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem; cursor: pointer;
  list-style: none;
  font-family: var(--sans);
}
.howto__sum::-webkit-details-marker { display: none; }
.howto__chev {
  display: inline-block; color: var(--ink-3); transition: transform .15s ease;
  font-family: var(--mono);
}
.howto[open] .howto__chev { transform: rotate(90deg); color: var(--accent); }
.howto__title { font-weight: 600; font-size: .98rem; color: var(--ink); }
.howto__hint { font-size: .78rem; margin-left: auto; }
.howto[open] .howto__hint { display: none; }

.howto__body { padding: 0 1rem 1.1rem; }

.howto__steps {
  list-style: none; padding: 0; margin: .35rem 0 1rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.howto__steps li {
  display: flex; gap: .85rem; align-items: flex-start;
  background: var(--bg);
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.howto__steps li > div { flex: 1; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.howto__steps li strong { color: var(--ink); }
.howto__steps li .muted { display: block; margin-top: .25rem; font-size: .8rem; }
.howto__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep);
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  flex: 0 0 auto;
}

.howto__faq {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: .5rem;
  margin-top: .55rem;
}
.howto__q {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .5rem .8rem;
}
.howto__q summary {
  list-style: none; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: .87rem; color: var(--ink);
}
.howto__q summary::-webkit-details-marker { display: none; }
.howto__q summary::before { content: "+ "; color: var(--accent); font-family: var(--mono); }
.howto__q[open] summary::before { content: "− "; }
.howto__q p { font-size: .86rem; line-height: 1.55; color: var(--ink-2); margin: .4rem 0 0; }


/* — compact session/you meta strip — */
.home__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1rem 0 0;
}
.home__meta-row {
  padding: .8rem 1rem;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.home__meta-row:last-child { border-right: none; }
.home__meta-k {
  font-family: var(--mono);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--ink-3); font-weight: 500;
}
.home__meta-v {
  font-family: var(--sans);
  font-size: 1rem; color: var(--ink);
  margin-top: .15rem; font-weight: 500;
  letter-spacing: -.005em;
}
.home__meta-v em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--moss); }
.home__meta-v a { color: var(--accent); font-weight: 500; }
.home__meta-v--mono { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); }


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  WORKSPACE TABS  — Overview / Sharing / Git repos / Settings     ║
   ║  Shared partial included on each workspace child page.           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.ws-tabs {
  display: flex; align-items: stretch;
  gap: .15rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.ws-tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .65rem .9rem .75rem;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  border: 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
  margin-bottom: -1px;  /* overlap the parent border so the active underline sits flush */
}
.ws-tab:hover { color: var(--ink); background: var(--bg-hover); }
.ws-tab svg { color: var(--ink-4); transition: color var(--tr-fast); flex: 0 0 14px; }
.ws-tab:hover svg { color: var(--ink-2); }
.ws-tab.is-on {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.ws-tab.is-on svg { color: var(--accent); }

/* Proposals tab only appears when there are pending — render in amber
   to match the rail badge + page banner treatment. */
.ws-tab--pending { color: var(--amber); }
.ws-tab--pending svg { color: var(--amber); }
.ws-tab--pending:hover { color: var(--amber); }
.ws-tab--pending.is-on { border-bottom-color: var(--amber); }
.ws-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.25rem; padding: .1rem .4rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  line-height: 1;
  background: var(--amber); color: white;
  border-radius: 999px;
  margin-left: .15rem;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent);
  animation: rail-badge-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

@media (max-width: 600px) {
  .ws-tab { padding: .55rem .65rem .65rem; font-size: .82rem; }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  ASSISTANT PANEL — the second left column                        ║
   ║  Proves the connected MCP agent is doing work. No AI runs here. ║
   ╚══════════════════════════════════════════════════════════════════╝ */

.asst {
  background: var(--bg);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

/* ── Resize handle (sits on the asst's left edge) ── */
.asst__resize {
  position: absolute;
  top: 0; bottom: 0; left: -2px;
  width: 6px;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
}
.asst__resize::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 2px; width: 2px;
  background: transparent;
  transition: background var(--tr-fast);
}
.asst__resize:hover::before,
.asst__resize.is-dragging::before { background: var(--accent); }
html.asst-collapsed .asst__resize { display: none; }
body.asst-resizing { cursor: col-resize !important; user-select: none; }
body.asst-resizing * { cursor: col-resize !important; }

.asst__head {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem .65rem;
  border-bottom: 1px solid var(--line);
  min-height: 40px;
}
.asst__toggle {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  background: transparent;
  color: var(--ink-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex: none;
}
.asst__toggle:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--line); }
.asst__toggle-expand { display: none; }
html.asst-collapsed .asst__toggle-collapse { display: none; }
html.asst-collapsed .asst__toggle-expand { display: block; }

.asst__brand {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--sans); font-weight: 600; font-size: .92rem; color: var(--ink);
  letter-spacing: -.005em;
}
.asst__brand-mark {
  font-family: var(--display);
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
}

/* Workspace pill in the asst header — quiet but always-visible so users
   know which workspace the panel acts on. */
.asst__ws {
  margin-left: auto;
  display: inline-flex; align-items: baseline; gap: .05rem;
  padding: .15rem .55rem .2rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 999px;
  text-decoration: none;
  max-width: 12rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.asst__ws:hover { background: color-mix(in srgb, var(--accent-soft) 60%, var(--accent) 12%); border-color: var(--accent); color: var(--accent-deep); }
.asst__ws-slash { color: var(--ink-4); margin-right: .05rem; }
html.asst-collapsed .asst__ws { display: none; }

/* Drop-zone state — body lights up when a draggable is hovering over it. */
.asst__body.is-droptarget {
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
  background: var(--accent-soft);
}
.asst__body.is-droptarget::after {
  content: "Drop to attach";
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: .55rem 1rem;
  font-family: var(--display); font-style: italic; font-size: 1.1rem;
  background: var(--bg); color: var(--accent-deep);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  z-index: 5;
}

/* ── Collapsed strip — only visible when html.asst-collapsed ── */
.asst__strip {
  display: none;
  flex: 1;
  padding: .85rem .5rem;
}
.asst__strip-dot {
  display: block;
  width: 12px; height: 12px;
  border-radius: 999px;
  margin: 0 auto;
  background: var(--ink-5);
  box-shadow: 0 0 0 3px transparent;
}

/* Collapsed state — panel stays in the grid column at 36px wide. Main
   column fills everything to its left. Strip + toggle visible; body hidden. */
html.asst-collapsed .asst__head { padding: .55rem 0; justify-content: center; }
html.asst-collapsed .asst__brand { display: none; }
html.asst-collapsed .asst__toggle { width: 28px; }
html.asst-collapsed .asst__body { display: none; }
html.asst-collapsed .asst__strip { display: block; }

/* ── Body wrapper (scrollable) ── */
.asst__body {
  flex: 1;
  overflow-y: auto;
  padding: .55rem .65rem .85rem;
  display: flex; flex-direction: column; gap: .65rem;
  position: relative;
}
.asst__loading { padding: 1.5rem .5rem; font-size: .82rem; text-align: center; }

/* ── Empty (no workspace) state ── */
.asst__empty {
  text-align: center;
  padding: 1.5rem .5rem;
}
.asst__empty-lede { color: var(--ink-3); font-size: .88rem; margin: 0 0 .85rem; }
.asst__empty-line { color: var(--ink-3); font-size: .82rem; line-height: 1.5; margin: .35rem 0; }

/* ── Connection status header ── */
.asst__status {
  padding: .55rem .65rem;
  margin: -.55rem -.65rem 0;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.asst__status-head {
  display: flex; align-items: center; gap: .5rem;
}
.asst__status-dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  flex: 0 0 9px;
  background: var(--ink-5);
  position: relative;
}
.asst__status-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 999px;
  border: 1px solid transparent;
  opacity: 0;
}
.asst__status-dot[data-state="connected"] {
  background: var(--moss);
}
.asst__status-dot[data-state="working"] {
  background: var(--accent);
}
.asst__status-dot[data-state="working"]::after {
  border-color: var(--accent);
  opacity: .55;
  animation: asst-pulse 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
.asst__status-dot[data-state="stalled"] { background: var(--amber); }
.asst__status-dot[data-state="idle"]    { background: var(--ink-4); }
.asst__status-dot[data-state="unlinked"] { background: var(--rust); }

@keyframes asst-pulse {
  0%   { transform: scale(.9); opacity: .55; }
  60%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

.asst__status-label {
  font-family: var(--sans); font-weight: 600; font-size: .85rem; color: var(--ink);
  text-transform: lowercase; letter-spacing: -.005em;
}
.asst__status-sub {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: .2rem; line-height: 1.45;
  word-break: break-word;
}
.asst__status-sub a { color: var(--accent); }

/* — strip dot mirrors status — */
html.asst-collapsed .asst__strip-dot { box-shadow: none; }
.asst__strip-dot[data-state="connected"] { background: var(--moss); }
.asst__strip-dot[data-state="working"]   { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.asst__strip-dot[data-state="stalled"]   { background: var(--amber); }
.asst__strip-dot[data-state="idle"]      { background: var(--ink-4); }
.asst__strip-dot[data-state="unlinked"]  { background: var(--rust); }

/* ── Now-working block ── */
.asst__working {
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg) 40%);
  padding: .65rem .8rem;
  animation: asst-rise var(--tr-slow) both;
}
.asst__working-head {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: .45rem;
}
.asst__working-glyph {
  color: var(--accent); font-family: var(--display); font-size: 1rem; line-height: 1;
}
.asst__working-h {
  font-family: var(--sans); font-weight: 600; font-size: .82rem;
  color: var(--accent-deep); letter-spacing: .005em;
}
.asst__working-elapsed {
  margin-left: auto;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .05em;
  color: var(--accent-deep);
  padding: .1rem .45rem;
  background: var(--bg);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
}
.asst__working-bar {
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  margin-bottom: .55rem;
}
@keyframes asst-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.asst__working-bar-fill {
  height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: asst-shimmer 1.6s linear infinite;
}
@keyframes asst-shimmer {
  from { background-position: 200% 0; transform: translateX(-100%); }
  to   { background-position: -200% 0; transform: translateX(250%); }
}
.asst__working-body {
  margin: 0; padding: 0;
  font-family: var(--sans); font-size: .82rem; line-height: 1.5;
  color: var(--ink-1); white-space: pre-wrap; word-break: break-word;
  max-height: 8rem; overflow-y: auto;
}
/* Now-working cancel styles consolidated into the unified
   .asst__row-cancel / .asst__working-cancel rule below. */

/* ── Group (Queued, Recent) ── */
.asst__group {
  display: flex; flex-direction: column; gap: .35rem;
}
.asst__group-h {
  display: flex; align-items: baseline; gap: .35rem;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  padding: 0 .15rem .15rem;
  border-bottom: 1px solid var(--line);
  margin: 0;
  cursor: default;
}
.asst__group-h--sum { list-style: none; cursor: pointer; user-select: none; }
.asst__group-h--sum::-webkit-details-marker { display: none; }
.asst__group-h--sum::before { content: "▸ "; margin-right: .15rem; color: var(--ink-4); }
.asst__group--recent[open] .asst__group-h--sum::before { content: "▾ "; color: var(--accent); }
.asst__group-c {
  margin-left: auto;
  font-family: var(--mono); font-size: .68rem;
  color: var(--accent); font-weight: 600;
}

.asst__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .4rem;
}
.asst__row {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .45rem .55rem .5rem;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), transform 80ms;
  animation: asst-rise var(--tr-slow) both;
}
.asst__row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.asst__row--queued { border-left: 2px solid var(--accent); }
.asst__row--done   { opacity: .85; background: var(--bg-soft); }

.asst__row-head {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .05em;
  color: var(--ink-3);
  margin-bottom: .25rem;
}
.asst__row-id   { font-weight: 600; color: var(--accent); }
.asst__row-time { color: var(--ink-4); }
.asst__row-check { color: var(--moss); font-size: .78rem; }

.asst__row-menu { position: relative; margin-left: auto; }
.asst__row-menu summary {
  list-style: none; cursor: pointer;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  color: var(--ink-4);
  font-size: .9rem; font-weight: 600;
  line-height: 1;
}
.asst__row-menu summary::-webkit-details-marker { display: none; }
.asst__row-menu summary:hover { background: var(--bg-hover); color: var(--ink); }
.asst__row-pop {
  position: absolute; right: 0; top: calc(100% + .25rem); z-index: 20;
  min-width: 11rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  padding: .25rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.asst__row-pop-btn {
  background: transparent; border: 0;
  text-align: left; padding: .4rem .55rem;
  font-family: var(--sans); font-size: .82rem; color: var(--ink-1);
  border-radius: var(--radius-sm); cursor: pointer;
  white-space: nowrap;
}
.asst__row-pop-btn:hover { background: var(--bg-hover); color: var(--ink); }
.asst__row-pop-btn--danger { color: var(--rust); }
.asst__row-pop-btn--danger:hover { background: #fef2f2; }
.asst__row-pop-form { margin: 0; display: flex; }
.asst__row-pop-form button { width: 100%; }

.asst__row-title {
  font-family: var(--sans); font-weight: 600; font-size: .85rem;
  color: var(--ink); margin: .15rem 0 .25rem;
  line-height: 1.35;
  word-break: break-word;
}
.asst__row-body {
  margin: 0; padding: 0;
  font-family: var(--sans); font-size: .82rem; line-height: 1.5;
  color: var(--ink-1); white-space: pre-wrap; word-break: break-word;
  max-height: 7rem; overflow-y: auto;
}
/* ── Unified action-button styles for queued rows AND now-working ── */
.asst__row-foot,
.asst__working-foot {
  margin-top: .45rem;
  padding-top: .35rem;
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: .35rem;
}
.asst__working-foot { justify-content: flex-end; }

.asst__row-send,
.asst__row-cancel,
.asst__working-cancel {
  display: inline-flex; align-items: center; gap: .3rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
  border-radius: var(--radius-sm);
  padding: .25rem .55rem;
  font-family: var(--sans); font-size: .76rem; font-weight: 500;
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
  white-space: nowrap;
}

/* Primary action (Send manually): full-width, accent on hover. */
.asst__row-send { flex: 1; justify-content: center; }
.asst__row-send:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: var(--accent);
}
.asst__row-send--ok {
  background: var(--moss-bg) !important;
  color: var(--moss) !important;
  border-color: var(--moss-line) !important;
}

/* Cancel — identical visual on every surface. Compact; rust on hover. */
.asst__row-cancel-form,
.asst__working-cancel-form {
  margin: 0; display: flex; flex: 0 0 auto;
}
.asst__row-cancel,
.asst__working-cancel {
  flex: 0 0 auto;
}
.asst__row-cancel svg,
.asst__working-cancel svg { opacity: .65; }
.asst__row-cancel:hover,
.asst__working-cancel:hover {
  background: var(--rust-bg);
  color: var(--rust);
  border-color: var(--rust-line);
}
.asst__row-cancel:hover svg,
.asst__working-cancel:hover svg { opacity: 1; }
.asst__row-body--done { color: var(--ink-2); max-height: 5rem; }
.asst__row-note {
  margin-top: .35rem;
  font-family: var(--mono); font-size: .7rem; color: var(--moss);
  padding: .3rem .45rem;
  background: var(--moss-bg);
  border: 1px solid var(--moss-line);
  border-radius: var(--radius-sm);
  line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}

/* ── Inline composer ── */
.asst__compose {
  margin-top: auto;
  padding-top: .65rem;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .35rem;
  position: relative;
}
.asst__compose-chips {
  display: flex; flex-wrap: wrap; gap: .25rem;
  min-height: 0;
}
.asst__compose-chips:empty { display: none; }
.asst__compose-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; padding: .15rem .35rem .15rem .55rem;
  line-height: 1.25;
  max-width: 100%;
  word-break: break-word;
  text-transform: none;
  font-family: var(--sans); font-weight: 500;
  letter-spacing: 0;
}
.asst__compose-chip-x {
  background: transparent; border: 0; padding: 0 .1rem;
  font-family: var(--mono); font-size: .82rem; line-height: 1;
  color: currentColor; opacity: .55; cursor: pointer;
}
.asst__compose-chip-x:hover { opacity: 1; color: var(--rust); }

.asst__compose-input {
  width: 100%;
  resize: vertical;
  min-height: 4.5rem;
  max-height: 16rem;
  font-family: var(--sans); font-size: .85rem; line-height: 1.5;
  padding: .5rem .65rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color var(--tr-fast), background var(--tr-fast), box-shadow var(--tr-fast);
}
.asst__compose-input:hover { border-color: var(--line-strong); }
.asst__compose-input:focus {
  outline: 0;
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29,78,255,.12);
}
.asst__compose-input::placeholder { color: var(--ink-4); }

.asst__compose-actions {
  display: flex; align-items: center; gap: .35rem;
}
.asst__compose-add { position: relative; }
.asst__compose-add-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .5rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}
.asst__compose-add-btn::-webkit-details-marker { display: none; }
.asst__compose-add-btn:hover {
  color: var(--accent-deep);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.asst__compose-add.is-open .asst__compose-add-btn {
  color: var(--accent-deep);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.asst__compose-add-pop {
  display: none;
  position: absolute;
  bottom: calc(100% + .35rem);
  left: 0;
  z-index: 30;
  width: min(28rem, calc(100vw - 2rem));
  max-width: 28rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: .35rem;
  animation: asst-rise var(--tr-fast) both;
}
.asst__compose-add.is-open .asst__compose-add-pop { display: block; }
.asst__compose-add-close {
  position: absolute;
  top: .35rem; right: .35rem;
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  background: transparent; border: 0; padding: 0;
  color: var(--ink-3); cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--tr-fast), background var(--tr-fast);
}
.asst__compose-add-close:hover {
  color: var(--rust); background: var(--rust-bg);
}
.asst__compose-add-search {
  width: 100%;
  padding: .4rem 2rem .4rem .55rem;
  font-family: var(--sans); font-size: .82rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  margin-bottom: .25rem;
}
.asst__compose-add-search:focus { outline: 0; border-color: var(--accent); }

.asst__compose-add-tabs {
  display: flex; gap: .15rem; padding: .15rem 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: .25rem;
  overflow-x: auto;
}
.asst__compose-add-tab {
  background: transparent; border: 0; padding: .25rem .55rem;
  font-family: var(--sans); font-size: .74rem; font-weight: 500;
  color: var(--ink-3); cursor: pointer; border-radius: var(--radius-sm);
  transition: background var(--tr-fast), color var(--tr-fast);
  white-space: nowrap;
}
.asst__compose-add-tab:hover { color: var(--ink); background: var(--bg-hover); }
.asst__compose-add-tab.is-on {
  color: var(--accent-deep);
  background: var(--accent-soft);
}

.asst__compose-add-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 22rem; overflow-y: auto;
}
.asst__compose-add-item {
  display: flex; align-items: center; gap: .45rem;
  padding: .35rem .55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--tr-fast);
}
.asst__compose-add-item:hover { background: var(--bg-hover); }
.asst__compose-add-type {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; flex: 0 0 20px;
  font-family: var(--mono); font-size: .65rem; font-weight: 700;
  border-radius: 4px;
  background: var(--bg-deep);
  color: var(--ink-3);
}
.asst__compose-add-type--doc       { background: var(--accent-soft); color: var(--accent-deep); }
.asst__compose-add-type--section   { background: var(--bg-deep); color: var(--ink-2); font-family: var(--display); font-style: italic; font-size: .82rem; }
.asst__compose-add-type--workorder { background: var(--moss-bg); color: var(--moss); }
.asst__compose-add-type--screen    { background: var(--amber-bg); color: var(--amber); }
.asst__compose-add-type--entity    { background: #fff7ed; color: #9a3412; }
.asst__compose-add-type--flow      { background: #ecfeff; color: #155e75; }
.asst__compose-add-type--template  { background: var(--accent); color: #fff; font-family: var(--display); font-style: italic; }
/* Templates take two lines (title + blurb), so let the row stretch. */
.asst__compose-add-item--template { align-items: flex-start; padding-top: .5rem; padding-bottom: .55rem; }
.asst__compose-add-item--template .asst__compose-add-type { margin-top: .05rem; }
.asst__compose-add-tpl-title { display: block; font-family: var(--sans); font-weight: 600; font-size: .88rem; color: var(--ink); }
.asst__compose-add-tpl-blurb { display: block; font-size: .76rem; color: var(--ink-3); margin-top: .1rem; line-height: 1.35; white-space: normal; }
.asst__compose-add-item--template .asst__compose-add-name { white-space: normal; overflow: visible; text-overflow: clip; }
:root[data-theme="dark"] .asst__compose-add-type--entity { background: var(--bg-deep); color: var(--amber); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .asst__compose-add-type--entity { background: var(--bg-deep); color: var(--amber); }
}

.asst__compose-add-name {
  font-family: var(--sans); font-size: .85rem; color: var(--ink);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asst__compose-add-parent {
  color: var(--ink-3); font-weight: 500;
}
.asst__compose-add-meta {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .04em;
  color: var(--ink-3);
  white-space: nowrap;
  padding: .1rem .35rem;
  background: var(--bg-deep);
  border-radius: 4px;
}
.status.asst__compose-add-meta { background: inherit; }

.asst__compose-add-empty {
  padding: .65rem; font-size: .82rem; text-align: center;
}

/* Chip variants for non-doc attachments */
.asst__compose-chip--section {
  background: var(--bg-deep);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.asst__compose-chip--workorder {
  background: var(--moss-bg);
  color: var(--moss);
  border: 1px solid var(--moss-line);
}
.asst__compose-chip--screen {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber-line);
}
.asst__compose-chip--entity {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}
:root[data-theme="dark"] .asst__compose-chip--entity {
  background: var(--bg-deep); color: var(--amber); border-color: var(--amber-line);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .asst__compose-chip--entity {
    background: var(--bg-deep); color: var(--amber); border-color: var(--amber-line);
  }
}

.asst__compose-send {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .75rem;
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--tr-fast), transform 60ms;
}
.asst__compose-send:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.asst__compose-send:active { transform: translateY(1px); }
.asst__compose-send:disabled, .asst__compose-send.is-sending {
  opacity: .65; cursor: progress;
}

/* ── Footer actions (just the Connect link now) ── */
.asst__actions {
  margin-top: .5rem;
  padding-top: .45rem;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .35rem;
}
.asst__connect {
  justify-content: flex-start;
  color: var(--ink-3);
}
.asst__connect svg { flex: 0 0 13px; }

/* ╭─────── shared inline-style consolidation ───────╮
   These were inline <style> blocks in 6+ templates — lifted here so they
   don't drift. The slight margin variants are folded into one rule. */
.flash { margin: .25rem 0 1rem; padding: .55rem .85rem; border-radius: var(--radius-sm); font-size: .88rem; }
.flash--ok  { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--moss); }
.flash--err { background: #fef2f2; border: 1px solid #fecaca; color: var(--rust); }

/* ── Danger zone (workspaces/settings, workspaces/repo_detail, screens/edit) ── */
.danger-zone { padding: .35rem 0; }
.danger-zone summary {
  font-family: var(--sans); font-size: .85rem; font-weight: 500;
  color: var(--ink-3); cursor: pointer; padding: .55rem 0;
  list-style: none;
}
.danger-zone summary::-webkit-details-marker { display: none; }
.danger-zone summary:hover { color: var(--rust); }
.danger-zone[open] summary { color: var(--rust); }
.danger-zone__chev { display: inline-block; margin-right: .35rem; transition: transform .15s; color: var(--ink-4); }
.danger-zone[open] .danger-zone__chev { transform: rotate(90deg); color: var(--rust); }
.danger-zone__body { margin: .65rem 0 .35rem; padding: 1rem 1.15rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius); }
.danger-zone__warn { color: var(--rust); font-size: .9rem; line-height: 1.5; margin: 0 0 .85rem; }
.danger-zone__form { margin-top: .65rem; padding: .85rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-sm); }

/* ── Billing-style cards (admin/email, me/billing, admin/billing/*) ── */
.b-card { padding: 1.1rem 1.25rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; max-width: 56rem; }
.b-card h2 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; color: var(--ink); }
.b-card p { font-size: .88rem; color: var(--ink-2); line-height: 1.55; margin: 0 0 .85rem; }
.b-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.b-table th, .b-table td { padding: .55rem .65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.b-table th { font-weight: 600; color: var(--ink-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.b-status { display: inline-block; padding: .15rem .55rem; font-size: .78rem; border-radius: 1rem; border: 1px solid var(--line); }
.b-status--active { background: #f0fdf4; color: var(--moss); border-color: #bbf7d0; }
.b-status--past_due { background: #fef2f2; color: var(--rust); border-color: #fecaca; }
.stack { display: grid; gap: .85rem; }

/* ── Empty state — see app/templates/_empty.html ── */
.empty {
  display: grid; place-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-2);
}
.empty__mark {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  margin-bottom: .65rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--display); font-style: italic;
  color: var(--ink-3); font-size: 1.05rem;
  line-height: 1;
}
.empty__title {
  font-family: var(--sans); font-weight: 600;
  font-size: 1rem; color: var(--ink);
  letter-spacing: -.005em;
}
.empty__lede {
  font-size: .88rem; color: var(--ink-3);
  line-height: 1.55; max-width: 44ch;
  margin: .45rem 0 0;
}
.empty__actions { margin-top: .85rem; }
.empty__hint {
  font-size: .78rem; color: var(--ink-4);
  margin: .55rem 0 0;
}
.empty--accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.empty--accent .empty__mark { color: var(--accent); border-color: var(--accent); }
.empty--accent .empty__title { color: var(--accent-deep); }

/* ╭─────── mobile pass: assistant FAB + sheet, table scroll, topbar trim ───────╮ */

/* FAB is invisible by default; mobile media query promotes it to a fixed button. */
.asst-fab {
  display: none;
  position: fixed;
  bottom: 1rem; right: 1rem;
  z-index: 55;
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--accent) 55%, transparent),
              0 2px 6px rgba(0,0,0,.12);
  cursor: pointer;
  align-items: center; justify-content: center;
  font-family: var(--display); font-style: italic; font-size: 1.4rem; font-weight: 400;
  transition: transform .12s ease, box-shadow .12s ease;
}
.asst-fab:hover { transform: translateY(-1px); }
.asst-fab:active { transform: translateY(0); }
.asst-fab__dot {
  position: absolute; top: 8px; right: 8px;
  width: 9px; height: 9px;
  background: var(--amber);
  border: 2px solid var(--bg);
  border-radius: 999px;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

@media (max-width: 760px) {
  /* — Assistant becomes a bottom-sheet behind a FAB — */
  .asst-fab { display: inline-flex; }

  /* Reverse the global mobile hide so the panel can render as a sheet. */
  body.codex > .asst {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    width: 100%;
    height: 80vh;
    max-height: 80vh;
    z-index: 65;
    background: var(--bg);
    border-top: 1px solid var(--line-strong);
    border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -14px 40px -10px rgba(0,0,0,.28);
    transform: translateY(100%);
    transition: transform .22s cubic-bezier(.2,.7,.2,1);
    overflow: hidden;
  }
  body.codex > .asst .asst__resize { display: none; }
  body.codex > .asst .asst__strip { display: none; }
  body.codex > .asst .asst__head {
    cursor: default;
  }
  /* Little grab-handle at the very top of the sheet. */
  body.codex > .asst::before {
    content: "";
    position: absolute;
    top: 6px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px;
    background: var(--line-strong);
    border-radius: 999px;
    pointer-events: none;
  }
  body.codex > .asst .asst__body { flex: 1; overflow-y: auto; }

  html.asst-mobile-open body.codex > .asst { transform: translateY(0); }
  html.asst-mobile-open body.codex { overflow: hidden; }

  /* Hide the FAB while the sheet is open so it doesn't sit on top of the panel. */
  html.asst-mobile-open .asst-fab { display: none; }

  /* Backdrop while the sheet is open. */
  body.codex::before {
    content: ""; position: fixed; inset: 0;
    background: rgba(15,17,22,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
    z-index: 60;
  }
  html.asst-mobile-open body.codex::before { opacity: 1; pointer-events: auto; }

  /* — Table horizontal scroll. Tables wrap their own content via display:block. — */
  .dtable, .m-table, .m-matrix {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
  }
  .dtable thead, .m-table thead, .m-matrix thead { display: table-header-group; }
  .dtable tbody, .m-table tbody, .m-matrix tbody { display: table-row-group; }
  .dtable tr, .m-table tr, .m-matrix tr { display: table-row; }
  .dtable th, .dtable td,
  .m-table th, .m-table td,
  .m-matrix th, .m-matrix td {
    white-space: nowrap;
    padding: .55rem .7rem;
  }

  /* — Topbar trim — */
  .topbar { gap: .55rem; padding: 0 .85rem; }
  .topbar__crumb { font-size: .82rem; gap: .35rem; min-width: 0; overflow: hidden; }
  .topbar__crumb a { display: none; }
  .topbar__crumb__sep { display: none; }
  .topbar__crumb__current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar__search { width: auto; flex: 1; max-width: none; padding: 0 .6rem; height: 32px; }
  .topbar__search input::placeholder { content: "Search…"; }
  .topbar__search kbd { display: none; }

  /* Tighter page padding so content uses the screen. */
  .main { padding: 1rem .85rem 5rem; }
  .page__hd { padding: 0 0 1rem; }
  .page__title { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }

  /* — Composer picker buttons + popover sized for touch — */
  .asst__compose-add-btn {
    min-height: 36px;
    padding: .4rem .65rem;
    font-size: .82rem;
  }
  .asst__compose-add-close { width: 28px; height: 28px; top: .4rem; right: .4rem; }
  /* Anchor the popover to span most of the sheet width so it can't fall
     off the right edge, and cap height so the list is scrollable inside
     the sheet rather than escaping it. */
  .asst__compose-add-pop {
    left: .5rem;
    right: .5rem;
    width: auto;
    max-width: none;
    max-height: 60vh;
    overflow-y: auto;
  }
  .asst__compose-add-list { max-height: none; }
}