/* GENESIS — V2 design system web adapter (calm Apple HIG × OpenAI flat idiom;
   fills carry hierarchy — no ornamental borders, gradients, or shadows).
   Color, radius, and type values mirror design-system.contract.json exactly,
   like GenesisTheme.swift on mobile; --ink-3 and --thumb are web-derived steps.
   Light by default, dark via prefers-color-scheme, manual override via data-theme. */
:root {
  color-scheme:light;
  --bg:#ffffff; --bg-sub:#f4f4f2; --bg-elev:#ececea; --field:#ececea; --thumb:#ffffff;
  --ink:#111113; --ink-2:#5f5f66; --ink-3:#62626a; --ink-4:#62626a;
  --accent:#111113; --focus:#111113; --signal:#2f59ef;
  --tone-ok:#1c7142; --tone-busy:#2f59ef; --tone-note:#955b00; --tone-flag:#c52f2a; --tone-none:#62626a;
  --codex:#6d28d9; --codex-fill:#f3efff; --codex-ink:#4c1d95;
  --radius-lg:24px; --radius:16px; --radius-sm:10px; --radius-xs:8px;
  --gap:24px;
  --font-ui:-apple-system,"SF Pro Text","SF Pro Display",system-ui,sans-serif;
  --font-num:ui-monospace,"SF Mono",monospace;
  --rail-w:76px; --rail-open-w:268px; --sidebar-w:268px; --panel-w:384px;
  /* The project tool dock uses one deliberately narrow tonal ladder in both themes. */
  --dock-surface:color-mix(in srgb,var(--bg) 88%,var(--bg-sub));
  --dock-group:color-mix(in srgb,var(--bg) 80%,var(--bg-elev));
  --dock-item:color-mix(in srgb,var(--bg) 66%,var(--bg-elev));
  --dock-active:color-mix(in srgb,var(--bg) 48%,var(--bg-elev));
  /* One spatial motion law for navigation, drawers, accordions, and tool docks. */
  --ui-motion-duration:360ms;
  --ui-motion-curve:cubic-bezier(.22,1,.36,1);
  --ui-motion:var(--ui-motion-duration) var(--ui-motion-curve);
}

/* Cloud identity gate. It uses the same quiet workstation vocabulary and only
   appears when the shared API contract returns an authenticated boundary. */
.auth-page { min-height:100vh; display:grid; place-items:center; background:var(--bg); color:var(--ink); }
.auth-shell { width:min(440px, calc(100vw - 40px)); text-align:center; padding:56px 36px; }
.auth-mark { width:62px; height:62px; margin:0 auto 28px; border-radius:50%; display:grid; place-items:center; font-size:25px; letter-spacing:-.08em; background:var(--field); }
.auth-kicker { margin:0 0 16px; color:var(--ink-3); font-size:11px; font-weight:700; letter-spacing:.2em; }
.auth-shell h1 { margin:0; font-size:clamp(32px, 7vw, 48px); line-height:1.02; letter-spacing:-.045em; }
.auth-copy { max-width:380px; margin:22px auto 30px; color:var(--ink-3); font-size:15px; line-height:1.65; }
.auth-button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:0 24px; border-radius:999px; background:var(--ink); color:var(--bg); text-decoration:none; font-size:14px; font-weight:650; transition:transform .16s ease, opacity .16s ease; }
.auth-button:hover { transform:translateY(-1px); opacity:.92; }
.auth-button:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
/* Password sign-in is DELIBERATELY secondary: folded away behind a summary, quiet button, so the
   recommended path stays the obvious one and this is the way in when Google is unavailable. */
.auth-button-quiet { background:var(--field); color:var(--ink); min-height:44px; }
.auth-password { margin:18px auto 0; width:100%; max-width:320px; text-align:left; }
.auth-password > summary { cursor:pointer; color:var(--ink-3); font-size:13px; text-align:center;
  list-style:none; padding:8px; border-radius:var(--radius-sm); }
.auth-password > summary::-webkit-details-marker { display:none; }
.auth-password > summary:hover { color:var(--ink); }
.auth-password > summary:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.auth-password form { display:flex; flex-direction:column; gap:11px; margin-top:12px; }
.auth-field { display:flex; flex-direction:column; gap:5px; color:var(--ink-2); font-size:12px; }
.auth-field input { min-height:44px; padding:0 12px; border:0; border-radius:var(--radius-sm);
  background:var(--field); color:var(--ink); font-size:15px; }
.auth-field input:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.auth-error { margin:0; color:var(--tone-flag); font-size:12px; line-height:1.4; }
.auth-foot { margin:18px 0 0; color:var(--ink-4); font-size:11px; line-height:1.5; }
.auth-legal { margin-top:12px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; }
.auth-legal a, .legal-links a { color:var(--ink-3); font-size:11px; text-decoration:none; }
.auth-legal a:hover, .legal-links a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.auth-legal a:focus-visible, .legal-links a:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; }
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme:dark;
    --bg:#1d1d20; --bg-sub:#141416; --bg-elev:#2a2a2e; --field:#2a2a2e; --thumb:#3a3a40;
    --ink:#f6f6f4; --ink-2:#b8b8be; --ink-3:#9a9aa2; --ink-4:#9a9aa2;
    --accent:#f6f6f4; --focus:#f6f6f4; --signal:#7b98ff;
    --tone-ok:#56c98a; --tone-busy:#7b98ff; --tone-note:#e7a43a; --tone-flag:#ff756f; --tone-none:#9a9aa2;
    --codex:#a78bfa; --codex-fill:#2b213b; --codex-ink:#ede9fe;
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#1d1d20; --bg-sub:#141416; --bg-elev:#2a2a2e; --field:#2a2a2e; --thumb:#3a3a40;
  --ink:#f6f6f4; --ink-2:#b8b8be; --ink-3:#9a9aa2; --ink-4:#9a9aa2;
  --accent:#f6f6f4; --focus:#f6f6f4; --signal:#7b98ff;
  --tone-ok:#56c98a; --tone-busy:#7b98ff; --tone-note:#e7a43a; --tone-flag:#ff756f; --tone-none:#9a9aa2;
  --codex:#a78bfa; --codex-fill:#2b213b; --codex-ink:#ede9fe;
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#ffffff; --bg-sub:#f4f4f2; --bg-elev:#ececea; --field:#ececea; --thumb:#ffffff;
  --ink:#111113; --ink-2:#5f5f66; --ink-3:#62626a; --ink-4:#62626a;
  --accent:#111113; --focus:#111113; --signal:#2f59ef;
  --tone-ok:#1c7142; --tone-busy:#2f59ef; --tone-note:#955b00; --tone-flag:#c52f2a; --tone-none:#62626a;
  --codex:#6d28d9; --codex-fill:#f3efff; --codex-ink:#4c1d95;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg-sub); color:var(--ink); font-family:var(--font-ui);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; overflow:hidden; }
button { font-family:inherit; font-size:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; }
input, textarea, select { font-family:inherit; font-size:13px; color:var(--ink); }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
[hidden] { display:none !important; }
.grow { flex:1; }

/* Live work normally needs no network chrome. Only a sustained interruption earns
   this one quiet status line; it disappears as soon as state has been resynced. */
.live-events-ribbon { position:fixed; z-index:120; top:10px; left:50%;
  transform:translateX(-50%); min-height:28px; display:flex; align-items:center;
  padding:0 12px; border-radius:999px; background:var(--dock-active); color:var(--ink-2);
  font-size:11px; font-weight:650; letter-spacing:.01em; pointer-events:none;
  animation:live-events-arrive var(--ui-motion); }
@keyframes live-events-arrive {
  from { opacity:0; transform:translate(-50%, -5px); }
  to { opacity:1; transform:translate(-50%, 0); }
}
@media (prefers-reduced-motion:reduce) {
  .live-events-ribbon { animation:none; }
}

/* ── App frame: [rail | sidebar] main [panel] ── */
.app { display:flex; height:100vh; height:100dvh; min-height:0; max-height:100dvh;
  overflow:hidden; }

/* Icon rail (collapsed navigation) */
.rail { width:var(--rail-w); height:100%; min-height:0; max-height:100%; flex:none; display:flex;
  flex-direction:column; align-items:center;
  padding:18px 0 16px; gap:6px; overflow:hidden; position:relative; z-index:20;
  transition:width var(--ui-motion), padding var(--ui-motion), background .18s ease;
  will-change:width,padding; }
body.sb-open .rail { display:none; }
.rail-head { width:44px; min-height:44px; display:flex; align-items:center; gap:4px;
  transition:width var(--ui-motion); }
.rail-logo { width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  color:var(--ink); flex:none; transition:transform .12s; }
.rail-logo:hover { transform:translateY(-1px); }
.rail-word { max-width:0; opacity:0; overflow:hidden; color:var(--ink); font-size:15px;
  font-weight:700; letter-spacing:.05em; white-space:nowrap; transform:translateX(-6px);
  visibility:hidden; pointer-events:none; transition:max-width var(--ui-motion), opacity .18s ease,
  transform var(--ui-motion); }
.rail-section-label { width:100%; max-height:0; padding:0 10px; opacity:0; overflow:hidden; flex:none;
  color:var(--ink-4); font-size:11px; font-weight:650; letter-spacing:.07em;
  text-transform:uppercase; transform:translateY(-4px); transition:max-height var(--ui-motion),
  padding var(--ui-motion), opacity .18s ease, transform var(--ui-motion); }
/* Project-local attention stays beside the project it belongs to. The badge is
   deliberately tiny: a dot for one item, a compact count when several need review. */
/* `--bg` rather than #fff: the badge sits on --signal, which is a DARK blue in the light theme and
   a LIGHT blue in the dark theme. White passed on one and failed on the other at 2.70:1. The
   background token inverts with the theme exactly as the signal does, so one value reads 5.5:1 in
   light and 6.1:1 in dark. 8px type is also gone — 11px is the smallest thing HIG will call text. */
/* The dot says "new activity" and counts nothing, so it carries no number and needs no room for
   one. Decorative, so the 24px target floor does not apply — the avatar under it is the target. */
.project-attention-badge.new, .pcard-attention.new {
  min-width:9px; width:9px; height:9px; padding:0; }

.project-attention-badge { position:absolute; z-index:3; top:-3px; right:-3px; pointer-events:none;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:grid; place-items:center;
  background:var(--signal); color:var(--bg); box-shadow:0 0 0 2px var(--bg-sub);
  font-family:var(--font-num); font-size:11px; font-weight:700; line-height:1;
  transition:transform .14s ease, opacity .14s ease; }
.rail-projects { width:100%; min-height:0; flex:1; display:flex; flex-direction:column; gap:12px;
  margin-top:22px; padding:2px 0 8px; align-items:center; overflow-x:hidden; overflow-y:auto;
  overscroll-behavior:contain; scroll-padding-block:8px; scroll-behavior:smooth;
  touch-action:pan-y; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  transition:margin var(--ui-motion), gap var(--ui-motion); }
.rail-projects::-webkit-scrollbar { display:none; width:0; height:0; }
.rail-project-group { position:relative; width:40px; display:flex; flex-direction:column; align-items:center;
  flex:none; transition:width var(--ui-motion); }
.pava { position:relative; width:40px; height:40px; border-radius:50%; background:var(--field);
  color:var(--ink-2); display:grid; place-items:center; font-size:14px; font-weight:600; line-height:1;
  transition:width var(--ui-motion), min-height var(--ui-motion), border-radius var(--ui-motion),
  padding var(--ui-motion), transform .12s, color .12s, background .18s ease; }
.pava:hover { color:var(--ink); transform:translateY(-1px); }
.pava.on { outline:2px solid var(--ink); outline-offset:2px; color:var(--ink); }
.pava .unread { position:absolute; top:2px; right:2px; width:7px; height:7px; border-radius:50%;
  background:var(--signal); }
.rail-project.pava { overflow:hidden; }
.rail-project.pava .unread { top:4px; right:4px; }   /* clear the circle's overflow clip */
.rail-letter { position:relative; width:40px; height:40px; display:grid; place-items:center;
  flex:none; line-height:0; }
.avatar-glyph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; font-family:var(--font-ui); line-height:0; text-align:center; }
.avatar-glyph-ink { display:block; line-height:1; transform:translateY(.06em); }
.rail-copy { display:flex; min-width:0; max-width:0; flex:1; align-items:center;
  opacity:0; overflow:hidden; transform:translateX(-7px); pointer-events:none;
  transition:max-width var(--ui-motion), opacity .18s ease, transform var(--ui-motion); }
.rail-name { color:var(--ink); font-size:13px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-foot { width:100%; flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:auto; }
.rail-action-copy { max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  transform:translateX(-6px); pointer-events:none; transition:max-width var(--ui-motion),
  opacity .18s ease, transform var(--ui-motion); }
/* Pointer-hover peek expansion is a desktop affordance; touch uses the drawer. */
@media (hover:hover) and (min-width:901px) {
  .rail:hover, .rail:focus-within, body.rail-peek .rail { width:var(--rail-open-w); align-items:stretch; padding-left:12px; padding-right:12px;
    background:var(--bg-sub); }
  .rail:hover .rail-head, .rail:focus-within .rail-head, body.rail-peek .rail-head { width:100%; }
  .rail:hover .rail-word, .rail:focus-within .rail-word, body.rail-peek .rail-word {
    max-width:92px; opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .rail:hover .rail-section-label, .rail:focus-within .rail-section-label,
  body.rail-peek .rail-section-label { max-height:48px; padding-top:20px; padding-bottom:8px;
    opacity:1; transform:none; }
  .rail:hover .rail-projects, .rail:focus-within .rail-projects, body.rail-peek .rail-projects {
    align-items:stretch; gap:6px; margin-top:0; }
  .rail:hover .rail-project-group, .rail:focus-within .rail-project-group,
  body.rail-peek .rail-project-group { width:100%; align-items:stretch; }
  .rail:hover .rail-project-group > .project-attention-badge,
  .rail:focus-within .rail-project-group > .project-attention-badge,
  body.rail-peek .rail-project-group > .project-attention-badge { top:8px; right:8px; }
  .rail:hover .rail-project.pava, .rail:focus-within .rail-project.pava, body.rail-peek .rail-project.pava {
    width:100%; min-height:48px; height:auto; border-radius:16px; display:flex; align-items:center;
    justify-content:flex-start; gap:10px; padding:4px 10px; background:transparent; outline-offset:-2px;
    text-align:left; transform:none; }
  .rail:hover .rail-project.pava:hover, .rail:focus-within .rail-project.pava:hover,
  body.rail-peek .rail-project.pava:hover,
  .rail:hover .rail-project.pava.on, .rail:focus-within .rail-project.pava.on,
  body.rail-peek .rail-project.pava.on { background:var(--bg-elev); outline:none; }
  .rail:hover .rail-project.pava.on:focus-visible,
  .rail:focus-within .rail-project.pava.on:focus-visible,
  body.rail-peek .rail-project.pava.on:focus-visible {
    outline:2px solid var(--focus); outline-offset:-2px; }
  .rail:hover .rail-letter, .rail:focus-within .rail-letter, body.rail-peek .rail-letter {
    position:relative; width:40px; height:40px; border-radius:50%; background:var(--field); }
  .rail:hover .rail-copy, .rail:focus-within .rail-copy, body.rail-peek .rail-copy {
    max-width:166px; opacity:1; transform:none; pointer-events:auto; }
  .rail:hover .rail-project-group.expanded .project-session-accordion.peek,
  .rail:focus-within .rail-project-group.expanded .project-session-accordion.peek,
  body.rail-peek .rail-project-group.expanded .project-session-accordion.peek {
    grid-template-rows:1fr; opacity:1; transform:none; pointer-events:auto; }
  .rail:hover .rail-foot, .rail:focus-within .rail-foot, body.rail-peek .rail-foot { align-items:stretch; }
  .rail:hover .rail-ghost, .rail:focus-within .rail-ghost, body.rail-peek .rail-ghost {
    width:100%; justify-content:flex-start; padding:0 10px; }
  .rail:hover .rail-account, .rail:focus-within .rail-account,
  body.rail-peek .rail-account { border-radius:12px; }
  .rail:hover .rail-action-copy, .rail:focus-within .rail-action-copy,
  body.rail-peek .rail-action-copy { max-width:170px; opacity:1; transform:none; pointer-events:auto; }
}
.rail-ghost { width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; gap:10px; overflow:hidden; color:var(--ink-3);
  transition:width var(--ui-motion), padding var(--ui-motion), color .12s, background .12s; }
.rail-ghost svg { flex:none; }
.rail-ghost:hover { color:var(--ink); background:var(--field); }
.rail-foot #rail-add { order:1; }
.rail-foot .rail-account { order:2; }
.rail-account > svg { display:none; }
.account-nav-avatar { width:30px; height:30px; flex:none; border-radius:50%; display:grid;
  place-items:center; overflow:hidden; background:var(--field); color:var(--ink-2);
  font-size:12px; font-weight:650; line-height:1; }
.account-nav-avatar-image { width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit; }
/* Navigation identity is a compact avatar, not the 104px account-page portrait.
   Keep its glyph inside the circle and let the active state belong to the avatar
   instead of drawing a second rounded square around it. */
.account-nav-avatar > .account-avatar-fallback,
.sb-foot .pava > .account-avatar-fallback { width:100%; height:100%; display:grid; place-items:center;
  border-radius:inherit; font-size:inherit; font-weight:650; line-height:1; text-align:center; }
.rail-account { border-radius:50%; }
.rail-account.on { color:var(--ink); background:transparent; }
.rail-account.on .account-nav-avatar { color:var(--ink); background:var(--bg-elev); }

/* Expanded sidebar */
.sidebar { width:var(--sidebar-w); height:100%; min-height:0; max-height:100%; flex:none; display:none;
  flex-direction:column; padding:16px 12px 14px; overflow:hidden; }
body.sb-open .sidebar { display:flex; animation:sidebar-pin-in var(--ui-motion) both; }
@keyframes sidebar-pin-in { from { opacity:.82; } to { opacity:1; } }
.sb-head { display:flex; flex:none; align-items:center; gap:10px; padding:2px 6px 4px; }
.sb-logo { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:var(--ink);
  transition:transform .12s; }
.sb-logo:hover { transform:translateY(-1px); }
.sb-word { font-size:15px; font-weight:700; letter-spacing:.05em; }
.sb-label { flex:none; font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-4); padding:22px 10px 8px; }
.sb-rows { min-height:0; flex:1; display:flex; flex-direction:column; gap:2px;
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:8px;
  scroll-behavior:smooth; touch-action:pan-y; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; }
.sb-rows::-webkit-scrollbar { display:none; width:0; height:0; }
.sb-project-group { position:relative; display:flex; flex:none; flex-direction:column; }
.sb-project-group > .project-attention-badge { top:8px; right:38px; }
.sb-row { display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:7px 8px; border-radius:10px; transition:background .12s; }
.sb-row:hover { background:var(--bg-elev); }
.sb-row.on { background:var(--bg-elev); }
.sb-row .pava { width:34px; height:34px; font-size:13px; flex:none; }
.sb-row .pava:hover { transform:none; }
.sb-main { min-width:0; flex:1; display:flex; align-items:center; }
.sb-name { display:block; font-size:14px; font-weight:600; color:var(--ink); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.sb-more { width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  color:var(--ink-4); opacity:0; transition:opacity .12s, color .12s; flex:none; }
.sb-row:hover .sb-more { opacity:1; }
.sb-more:hover { color:var(--ink); background:var(--field); }
.sb-new { flex:none; display:flex; align-items:center; gap:11px; padding:9px 10px; margin-top:6px;
  border-radius:10px; color:var(--ink-3); font-size:13px; font-weight:500; }
.sb-new:hover { color:var(--ink); background:var(--bg-elev); }
.project-session-tree { position:relative; display:flex; flex-direction:column; gap:2px;
  margin:3px 4px 8px 24px; padding:2px 0 2px 13px; }
.project-session-tree::before { content:""; position:absolute; left:0; top:5px; bottom:5px;
  width:2px; border-radius:999px; background:var(--field); }
.project-session-tree.peek { margin:3px 4px 8px 51px; padding-left:10px; }
.project-session-accordion { min-width:0; display:grid; grid-template-rows:0fr; opacity:0;
  transform:translateY(-8px); pointer-events:none; transition:grid-template-rows var(--ui-motion),
  opacity .2s ease, transform var(--ui-motion); }
.project-session-accordion-inner { min-height:0; overflow:hidden; }
.sb-project-group.expanded .project-session-accordion.in-sidebar {
  grid-template-rows:1fr; opacity:1; transform:none; pointer-events:auto; }
.project-session-row, .project-session-new { width:100%; min-height:32px; display:grid;
  grid-template-columns:10px minmax(0,1fr); align-items:center; gap:7px; padding:5px 7px;
  border-radius:8px; color:var(--ink-3); text-align:left; font-size:12px; line-height:1.25; }
.project-session-row > span:last-child, .project-session-new > span:last-child { overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.project-session-row:hover, .project-session-new:hover { color:var(--ink); background:var(--field); }
.project-session-row.on { color:var(--ink); background:var(--field); font-weight:650; }
.project-session-row.overview:hover, .project-session-row.overview.on { background:transparent; }
.project-session-overview-mark { width:7px; height:7px; border-radius:2px;
  background:var(--ink-4); }
.project-session-row.on .project-session-overview-mark { background:var(--signal); }
.project-session-dot { width:7px; height:7px; border-radius:50%; background:var(--ink-4); }
.project-session-dot.shared { background:var(--tone-ok); }
.project-session-row.on .project-session-dot { box-shadow:0 0 0 3px color-mix(in srgb, var(--signal) 14%, transparent); }
.project-session-new { color:var(--ink-4); }
.project-session-new > span:first-child { font-size:14px; line-height:1; }
.project-tool-list { display:flex; flex-direction:column; gap:2px; margin:7px 0 1px;
  padding-top:6px; border-top:1px solid var(--line); }
.project-tools-summary { width:100%; min-height:28px; display:flex; align-items:center; justify-content:space-between;
  padding:4px 7px; border-radius:8px; color:var(--ink-4); font-size:9px; font-weight:750;
  letter-spacing:.08em; text-align:left; text-transform:uppercase; }
.project-tools-summary:hover, .project-tools-summary:focus-visible { color:var(--ink); background:var(--field); }
.project-tools-summary i { width:7px; height:7px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-1px,1px);
  transition:transform var(--ui-motion); }
.project-tool-list.expanded .project-tools-summary i { transform:rotate(225deg) translate(-1px,1px); }
.project-tools-disclosure { min-width:0; display:grid; grid-template-rows:0fr; opacity:0;
  transform:translateY(-4px); pointer-events:none; transition:grid-template-rows var(--ui-motion),
  opacity .2s ease, transform var(--ui-motion); }
.project-tool-list.expanded .project-tools-disclosure { grid-template-rows:1fr; opacity:1;
  transform:none; pointer-events:auto; }
.project-tools-disclosure-inner { min-height:0; overflow:hidden; }
.project-tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:2px 0 1px; }
.project-tool-tile { min-width:0; min-height:48px; display:flex; flex-direction:column; align-items:flex-start;
  justify-content:space-between; gap:6px; padding:8px; border-radius:9px; background:var(--bg-elev);
  color:var(--ink-3); text-align:left; font-size:11px; font-weight:590; line-height:1;
  transition:color .16s ease, background var(--ui-motion), transform .16s ease; }
.project-tool-tile:hover, .project-tool-tile:focus-visible { color:var(--ink); background:var(--thumb); }
.project-tool-tile:active { transform:scale(.98); }
.project-tool-tile:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.project-tool-tile > span:last-child { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-tool-mark { width:13px; height:13px; color:var(--ink-4); line-height:1;
  transition:color .12s; }
.project-tool-mark svg { display:block; width:13px; height:13px; overflow:visible; fill:none;
  stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.project-tool-tile:hover .project-tool-mark, .project-tool-tile:focus-visible .project-tool-mark { color:var(--ink); }
.project-session-group { display:flex; flex-direction:column; gap:1px; margin-top:5px; }
.project-session-group-label, .project-session-group > summary { padding:3px 7px;
  color:var(--ink-4); font-size:9px; font-weight:750; letter-spacing:.08em;
  text-transform:uppercase; list-style:none; }
.project-session-group > summary { cursor:pointer; }
.project-session-group > summary::-webkit-details-marker { display:none; }
.project-session-group > summary span { float:right; font-family:var(--font-num); }
.project-session-loading { padding:8px 7px; color:var(--ink-4); font-size:10px; }
.sb-foot { width:100%; flex:none; margin-top:auto; display:flex; align-items:center; gap:10px; padding:9px 8px;
  border-radius:12px; text-align:left; transition:background .12s, color .12s; }
.sb-foot:hover, .sb-foot.on { background:var(--bg-elev); }
.sb-foot .pava { width:34px; height:34px; font-size:13px; flex:none; }
.sb-acct { min-width:0; flex:1; }
.sb-acct-name { font-size:13px; font-weight:600; }
.sb-acct-mail { font-size:12px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-gear { display:none; }
.sb-foot::after { content:"›"; flex:none; color:var(--ink-4); font-size:20px; font-weight:300;
  line-height:1; transform:translateY(-1px); }

/* Main surface */
.main { flex:1; min-width:0; display:flex; margin:10px 10px 10px 0; background:var(--bg);
  border-radius:var(--radius-lg); overflow:hidden; position:relative;
  transition:margin var(--ui-motion); }
body.sb-open .main { margin-left:0; }
.center { flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
.view { flex:1; min-height:0; overflow-y:auto; padding:0 28px 24px; scroll-padding-bottom:24px; }
body.account-view .work-tray, body.account-view .sysrail, body.account-view .rpanel { display:none !important; }
body.account-view .view { padding:0; }

/* Personal account center. Identity is the anchor; everything else is a quiet,
   standard control with no implementation or provider plumbing exposed. */
.account-page { width:min(920px, 100%); margin:0 auto; padding:56px 36px 96px; }
.account-hero { min-height:132px; display:flex; align-items:center; gap:24px; margin-bottom:34px; }
.account-hero-avatar-wrap { flex:none; }
.account-hero-avatar { position:relative; width:104px; height:104px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; background:var(--field); color:var(--ink-2); }
.account-avatar-image, .account-avatar-fallback { width:100%; height:100%; display:grid; place-items:center;
  object-fit:cover; border-radius:inherit; font-size:34px; font-weight:650; }
.account-avatar-edit { position:absolute; inset:auto 0 0; padding:8px 4px 10px; color:white;
  background:rgba(17,17,19,.72); font-size:11px; font-weight:650; opacity:0;
  transform:translateY(4px); transition:opacity .16s ease, transform .16s ease; }
.account-hero-avatar:hover .account-avatar-edit, .account-hero-avatar:focus-visible .account-avatar-edit {
  opacity:1; transform:none; }
.account-hero-copy { min-width:0; }
.account-hero-copy h1 { margin:0; font-size:clamp(32px, 5vw, 48px); line-height:1.02;
  letter-spacing:-.045em; overflow-wrap:anywhere; }
.account-hero-copy h1:focus { outline:none; }
.account-hero-copy > span { display:block; margin-top:10px; color:var(--ink-3); font-size:14px; }
.account-section { margin-top:12px; padding:20px; border-radius:20px; background:var(--bg-sub); }
.account-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  margin-bottom:14px; }
.account-section-head h2 { margin:0; font-size:18px; letter-spacing:-.02em; }
.account-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.account-field { min-width:0; display:flex; flex-direction:column; gap:7px; }
.account-field > span { color:var(--ink-3); font-size:11px; font-weight:650; }
.account-field > input, .account-handle-field { width:100%; min-height:48px; border:0; border-radius:12px;
  padding:0 14px; background:var(--field); color:var(--ink); outline:none; }
.account-field > input:focus, .account-handle-field:focus-within { outline:2px solid var(--focus); outline-offset:1px; }
.account-handle-field { display:flex; align-items:center; gap:5px; }
.account-handle-field b { color:var(--ink-3); font-size:14px; font-weight:550; }
.account-handle-field input { min-width:0; flex:1; border:0; padding:0; background:transparent; outline:none; }
.account-field small { color:var(--ink-4); font-size:11px; }
.account-row-actions { min-height:38px; margin-top:18px; display:flex; align-items:center; gap:12px; }
.account-row-actions > :first-child { margin-right:auto; }
.account-save-status { color:var(--tone-flag); font-size:11px; }
.account-text-button { min-height:36px; padding:0 10px; border-radius:9px; color:var(--ink-3);
  font-size:12px; font-weight:600; }
.account-text-button:hover { color:var(--ink); background:var(--field); }
.account-text-button.danger { color:var(--tone-flag); }
.account-list { display:flex; flex-direction:column; gap:2px; overflow:hidden; border-radius:14px;
  background:var(--field); }
.account-list-row { min-height:64px; display:grid; grid-template-columns:116px minmax(0,1fr) auto;
  align-items:center; gap:16px; padding:13px 15px; background:var(--bg); }
.account-list-row > span { color:var(--ink-3); font-size:11px; font-weight:650; }
.account-list-row > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.account-list-row b { overflow:hidden; color:var(--ink); font-size:13px; font-weight:600;
  text-overflow:ellipsis; white-space:nowrap; }
.account-list-row small { color:var(--ink-3); font-size:11px; line-height:1.4; }
.account-list-row a { min-height:36px; display:flex; align-items:center; padding:0 10px; border-radius:9px;
  color:var(--ink-3); font-size:12px; font-weight:600; text-decoration:none; }
.account-list-row a:hover { color:var(--ink); background:var(--field); }
.account-usage { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px;
  overflow:hidden; border-radius:14px; background:var(--field); }
.account-usage > div:not(.account-usage-meter) { min-height:104px; display:flex; flex-direction:column;
  justify-content:center; padding:16px; background:var(--bg); }
.account-usage > div > span { color:var(--ink-4); font-size:10px; font-weight:750; letter-spacing:.09em; }
.account-usage strong { margin-top:8px; font-size:20px; line-height:1; letter-spacing:-.025em; }
.account-usage small { margin-top:7px; color:var(--ink-3); font-size:11px; }
.account-usage-meter { grid-column:1/-1; height:4px; background:var(--field); }
.account-usage-meter span { display:block; height:100%; border-radius:999px; background:var(--focus); }
.account-plan-actions > span { color:var(--ink-3); font-size:11px; }
.account-platform-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px;
  overflow:hidden; border-radius:14px; background:var(--field); }
.account-platform-grid a { min-height:96px; padding:15px; display:flex; flex-direction:column;
  justify-content:flex-end; background:var(--bg); color:inherit; text-decoration:none;
  transition:background var(--ui-motion), transform var(--ui-motion); }
.account-platform-grid a:hover { background:var(--thumb); }
.account-platform-grid a:active { transform:scale(.99); }
.account-platform-grid span { color:var(--ink-4); font-size:10px; font-weight:750; letter-spacing:.09em;
  text-transform:uppercase; }
.account-platform-grid b { margin-top:9px; font-size:14px; font-weight:650; }
.account-platform-grid small { width:max-content; margin-top:7px; padding:3px 7px; border-radius:999px;
  background:var(--field); color:var(--ink-3); font-size:10px; }
.account-appearance { width:min(420px,100%); display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  padding:3px; border-radius:12px; background:var(--field); }
.account-appearance button { min-height:40px; border-radius:9px; color:var(--ink-3); font-size:12px;
  font-weight:600; }
.account-appearance button:hover { color:var(--ink); }
.account-appearance button.on { color:var(--ink); background:var(--thumb); }
.account-actions-section { margin-top:28px; }
.account-list-row.danger b { color:var(--tone-flag); }
.account-footer { display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; }
.account-footer a { color:var(--ink-4); font-size:11px; text-decoration:none; }
.account-footer a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* System rail (right, inside main). It yields to the dock with the same spatial
   motion used by project navigation instead of disappearing mid-transition.
   Keep it above the Canvas overlay (15): when the dock is closed these are the
   only controls that can reopen it, so the infinite interaction plane must not
   intercept their visible hit targets. The open dock remains at 20 and hides
   this rail before it becomes interactive. */
.sysrail { position:absolute; top:16px; right:14px; display:flex; flex-direction:column; gap:4px;
  z-index:21; opacity:1; visibility:visible; transform:none;
  transition:opacity var(--ui-motion), transform var(--ui-motion), visibility 0s linear; }
body.rp-open .sysrail { opacity:0; visibility:hidden; pointer-events:none; transform:translateX(12px);
  transition:opacity var(--ui-motion), transform var(--ui-motion),
  visibility 0s linear var(--ui-motion-duration); }
.sys-tab { width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  color:var(--ink-3); transition:color .12s, background .12s; }
.sys-tab:hover { color:var(--ink); background:var(--field); }

/* ── Home ── */
/* The sysrail floats over this content (position:absolute; right:14px), so the home
   column has to reserve its lane or the right-hand cards run underneath the grid, folder
   and settings icons. 36px clears the 36px rail at its 14px offset with a 12px gap, and
   the same padding on the left keeps the column optically centred in the space that
   excludes the rail rather than in the full width. */
.home { width:min(1560px,100%); margin:0 auto; padding:42px 36px 188px; display:flex;
  flex-direction:column; gap:38px; }
.home-section { min-width:0; }
.home-section-head { min-height:42px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.home-section-head h1, .home-section-head h2 { margin:0; color:var(--ink); font-size:20px;
  font-weight:700; letter-spacing:-.025em; }
.home-section-count { min-width:24px; height:24px; padding:0 7px; display:grid; place-items:center;
  border-radius:999px; background:var(--field); color:var(--ink-3); font-family:var(--font-num);
  font-size:10px; font-weight:700; }
.home-attention-toggle { min-height:34px; margin-left:auto; padding:0 10px; border-radius:10px;
  color:var(--ink-3); font-size:11px; font-weight:600; transition:background .15s ease, color .15s ease; }
.home-attention-toggle:hover, .home-attention-toggle:focus-visible { background:var(--field); color:var(--ink); }
.home-new-project { min-height:36px; margin-left:auto; padding:0 11px; display:flex; align-items:center;
  gap:6px; border-radius:10px; color:var(--ink-3); font-size:12px; font-weight:600;
  transition:background .15s ease, color .15s ease, transform .15s ease; }
.home-new-project:hover, .home-new-project:focus-visible { background:var(--field); color:var(--ink); }
.home-new-project:active { transform:scale(.97); }
.home-attention-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.home-attention-row { min-width:0; min-height:68px; padding:11px 13px; display:flex; align-items:center;
  gap:11px; border-radius:16px; background:var(--bg-sub); text-align:left;
  transition:background .15s ease, transform .15s ease; }
.home-attention-row:hover, .home-attention-row:focus-visible { background:var(--field); }
.home-attention-row:active { transform:scale(.99); }
.home-attention-mark { width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--field); color:var(--ink-2); font-size:12px; font-weight:700; }
.home-attention-copy { min-width:0; display:flex; flex:1; flex-direction:column; gap:2px; }
.home-attention-copy strong, .home-attention-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-attention-copy strong { color:var(--ink); font-size:13px; font-weight:650; }
.home-attention-copy small { color:var(--ink-3); font-size:11px; }
.home-attention-count, .home-attention-action { flex:none; color:var(--ink-3); font-size:11px; font-weight:650; }
.home-attention-count { min-width:25px; height:25px; padding:0 7px; display:grid; place-items:center;
  border-radius:999px; background:var(--field); font-family:var(--font-num); }
.home-clear { min-height:54px; display:flex; align-items:center; gap:10px; color:var(--ink-3); }
.home-clear span { width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  background:color-mix(in srgb,var(--tone-ok) 7%,var(--field)); color:var(--tone-ok); font-size:12px; }
.home-clear strong { font-size:12px; font-weight:600; }
.pcards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; width:100%; }
.pcard { position:relative; min-width:0; height:124px; padding:15px 16px 14px; display:flex;
  flex-direction:column; border-radius:var(--radius-lg); background:var(--field); text-align:left;
  transition:background .15s ease, transform .15s ease; }
.pcard:hover, .pcard:focus-visible { background:var(--thumb); }
.pcard:active { transform:scale(.99); }
.pcard-letter { width:34px; height:34px; border-radius:50%; background:var(--thumb);
  display:grid; place-items:center; font-size:14px; font-weight:600; color:var(--ink-2); }
.pcard-attention { position:absolute; top:15px; right:15px; min-width:22px; height:22px; padding:0 6px;
  display:grid; place-items:center; border-radius:999px; background:var(--signal); color:var(--bg);
  font-family:var(--font-num); font-size:11px; font-weight:700; }
.pcard-name { margin-top:auto; font-size:15px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The global composer floats over one continuous canvas. Content reserves its
   own safe inset, so the tray never creates a second-color cutoff or covers a card. */
body.home-view .view { padding-bottom:0; }
body.home-view .work-tray { position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  margin-bottom:10px; }

/* Home thread (conversation below the dashboard) */
/* ── Project view ── */
.proj { max-width:760px; margin:0 auto; padding:22px 0 24px; }
.session-canvas { min-height:100%; padding:2px 0 32px; }
.session-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:4px 0 22px; }
.session-heading { min-width:0; }
.session-kicker { display:flex; align-items:center; gap:7px; color:var(--ink-4);
  font-size:10px; font-weight:720; letter-spacing:.06em; text-transform:uppercase; }
.session-privacy-dot { width:7px; height:7px; border-radius:50%; background:var(--ink-4); }
.session-privacy-dot.shared { background:var(--tone-ok); }
.session-heading h1 { margin:9px 0 0; color:var(--ink); font-size:clamp(25px, 4vw, 36px);
  line-height:1.05; letter-spacing:-.035em; }
.session-heading p { max-width:560px; margin:10px 0 0; color:var(--ink-3); font-size:13px;
  line-height:1.5; }
.session-participants { margin-top:9px; color:var(--ink-4); font-size:11px; }
.session-actions { flex:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px;
  max-width:260px; }
.session-actions button { min-height:32px; padding:6px 10px; border-radius:9px;
  background:var(--bg-sub); color:var(--ink-3); font-size:11px; font-weight:650; }
.session-actions button:hover { color:var(--ink); background:var(--field); }
.session-actions button:disabled { cursor:not-allowed; opacity:.38; }
.session-discussion { display:flex; flex-direction:column; gap:8px; }
.session-note { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:start; gap:10px;
  padding:12px 13px; border-radius:14px; background:var(--bg-sub); }
.session-note.genesis { background:color-mix(in srgb, var(--codex-fill) 38%, var(--bg-sub)); }
.session-note-avatar { width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  background:var(--field); color:var(--ink-2); font-size:11px; font-weight:750; }
.session-note > div { min-width:0; }
.session-note-meta { display:flex; align-items:baseline; gap:8px; }
.session-note-meta b { color:var(--ink-2); font-size:11px; }
.session-note-meta time { color:var(--ink-4); font-family:var(--font-num); font-size:9px; }
.session-note p { margin:5px 0 0; color:var(--ink); font-size:13px; line-height:1.52;
  white-space:pre-wrap; overflow-wrap:anywhere; }
.session-empty { min-height:180px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:7px; padding:28px; border-radius:16px; background:var(--bg-sub);
  color:var(--ink-4); text-align:center; font-size:11px; }
.session-empty b { color:var(--ink-2); font-size:13px; }
.session-empty span { max-width:430px; line-height:1.5; }
.session-composer-context { width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  padding:2px 3px 1px; color:var(--ink-4); font-size:10px; font-weight:650; }
.session-composer-context span:first-child { width:7px; height:7px; flex:none; border-radius:50%;
  background:var(--ink-4); }
.session-composer-context span:first-child.shared { background:var(--tone-ok); }
.session-composer-context b { overflow:hidden; color:var(--ink-2); font-weight:650;
  text-overflow:ellipsis; white-space:nowrap; }
.session-composer-boundary { white-space:nowrap; }
.session-composer-spacer { flex:1; min-width:8px; }
.session-composer-modes { display:inline-flex; gap:2px; padding:2px; border-radius:9px;
  background:var(--bg-sub); border:1px solid var(--line); }
.session-composer-modes button { min-height:26px; padding:4px 8px; border:0; border-radius:7px;
  background:transparent; color:var(--ink-4); font:inherit; cursor:pointer; }
.session-composer-modes button[aria-pressed="true"] { background:var(--field); color:var(--ink-2);
  box-shadow:0 1px 4px rgba(10,18,30,.08); }
.session-composer-modes button:focus-visible { outline:2px solid var(--signal); outline-offset:1px; }
.role-readonly-panel .session-modal-boundary { margin-top:8px; }
.session-optional { color:var(--ink-4); font-size:10px; font-weight:500; }
.session-share-choice { display:flex; align-items:flex-start; gap:9px; padding:12px;
  border-radius:12px; background:var(--bg-sub); color:var(--ink-2); }
.session-share-choice input { width:18px; height:18px; flex:none; margin-top:1px; accent-color:var(--signal); }
.session-share-choice span { display:flex; flex-direction:column; gap:3px; }
.session-share-choice b { font-size:12px; }
.session-share-choice small { color:var(--ink-4); font-size:10px; line-height:1.4; }
.session-modal-boundary { padding:9px 10px; border-radius:9px; background:var(--bg-sub);
  color:var(--ink-4); font-size:10px; line-height:1.45; }
.people-panel { gap:10px; padding:13px; border-radius:14px;
  background:color-mix(in srgb, var(--field) 56%, transparent); }
.people-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.people-head > div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.people-head > button { width:30px; height:30px; flex:none; border-radius:8px; color:var(--ink-4); }
.people-head > button:hover { color:var(--ink); background:var(--field); }
.people-list, .people-invitations { display:flex; flex-direction:column; gap:4px; }
.people-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:9px;
  min-height:44px; padding:7px 8px; border-radius:10px; background:var(--bg-sub); }
.people-row[data-status="revoked"], .people-row[data-status="expired"] { opacity:.6; }
.people-avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:var(--field); color:var(--ink-2); font-size:11px; font-weight:750; line-height:1;
  padding-top:.055em; }
.people-main { min-width:0; display:flex; flex-direction:column; gap:1px; }
.people-main b { overflow:hidden; color:var(--ink-2); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.people-main small { overflow:hidden; color:var(--ink-4); font-size:9px; text-transform:capitalize;
  text-overflow:ellipsis; white-space:nowrap; }
.people-row > button { min-height:30px; padding:5px 8px; border-radius:8px; color:var(--tone-flag);
  font-size:10px; font-weight:650; }
.people-row > button:hover { background:var(--field); }
.people-invitations { margin-top:2px; }
.people-invitation { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px;
  padding:8px 9px; border-radius:9px; background:var(--bg-sub); }
.people-invitation span { display:flex; flex-direction:column; gap:2px; }
.people-invitation b { color:var(--ink-2); font-size:11px; text-transform:capitalize; }
.people-invitation small { color:var(--ink-4); font-size:9px; text-transform:capitalize; }
.people-invitation[data-status="revoked"], .people-invitation[data-status="expired"] { opacity:.6; }
.people-invitation > button { min-height:30px; padding:5px 8px; border-radius:8px;
  color:var(--tone-flag); font-size:10px; font-weight:650; }
.people-invitation > button:hover { background:var(--field); }
.people-invite-form { display:flex; flex-direction:column; gap:7px; padding-top:5px; }
.people-invite-form > label, .people-invite-options label { display:flex; flex-direction:column; gap:4px;
  color:var(--ink-4); font-size:9px; font-weight:650; }
.people-invite-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7px; }
.people-invite-form .set-input { min-height:36px; font-size:11px; }
.people-invite-form > button { align-self:flex-start; }
.people-invite-form > small { color:var(--ink-4); font-size:9px; line-height:1.4; }
.people-approval-policy { display:flex; flex-direction:column; gap:8px; margin:2px 0;
  padding:9px; border:1px solid var(--line); border-radius:10px; background:var(--bg-sub); }
.people-approval-toggle { display:flex !important; flex-direction:row !important; align-items:flex-start; gap:8px !important; }
.people-approval-toggle input { width:17px; height:17px; flex:none; margin-top:1px; accent-color:var(--signal); }
.people-approval-toggle span { display:flex; flex-direction:column; gap:2px; }
.people-approval-toggle b { color:var(--ink-2); font-size:11px; }
.people-approval-toggle small, .people-approval-fields > small { color:var(--ink-4); font-size:9px; line-height:1.4; }
.people-approval-fields { display:flex; flex-direction:column; gap:7px; }
.people-approval-fields > label { display:flex; flex-direction:column; gap:4px;
  color:var(--ink-4); font-size:9px; font-weight:650; }
.people-risk-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.people-risk-options label { display:flex; align-items:center; gap:5px; min-height:28px;
  color:var(--ink-3); font-size:9px; }
.people-risk-options input { width:15px; height:15px; accent-color:var(--signal); }
.invitation-link { font-family:var(--font-num); font-size:10px; }

/* ── Genesis work tray ──
   One visually floating composer and one status rail in the center's layout
   flow, so even an open question can never cover project evidence. */
/* z-index 16, above the Canvas overlay's 15: the AI prompt is a floating bar that stays reachable
   over every surface, including a Canvas. At 12 it sat UNDERNEATH the canvas overlay, so opening a
   document buried the composer. The rail and the right dock (20) stay above both. */
.work-tray { position:relative; z-index:16; align-self:center; flex:none;
  width:calc(100% - 40px); max-width:816px; max-height:calc(100% - 20px); margin:0 0 10px;
  display:flex; flex-direction:column; background:transparent; overflow:visible;
  pointer-events:none; transform:none;
  transition:width var(--ui-motion), transform var(--ui-motion); }
/* The inspector overlays the right side of `.center`. Center the composer in the remaining stage
   and constrain it to that stage so a wide/resized inspector can never intercept Send, audio, or
   activity controls. This is geometry, not z-index: both surfaces remain independently usable. */
body.rp-open .work-tray {
  width:min(816px, calc(100% - var(--panel-w) - 40px));
  transform:translateX(calc(var(--panel-w) / -2)); }
.work-tray > * { pointer-events:auto; }
.work-tray.has-work { background:transparent; }
.work-tray-resizer { width:100%; height:10px; display:none; place-items:center;
  color:var(--ink-4); cursor:ns-resize; touch-action:none; opacity:0; transition:opacity .14s ease; }
.work-tray.expanded.has-work .work-tray-resizer { display:grid; }
.work-tray-resizer span { width:34px; height:2px; border-radius:999px; background:currentColor; }
.work-tray-resizer:hover, .work-tray-resizer.dragging, .work-tray-resizer:focus-visible {
  color:var(--ink-2); opacity:1; }
.work-tray-resizer:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; border-radius:7px; }
.work-tray-toggle { order:2; width:100%; min-height:36px; padding:5px 8px; display:none;
  align-items:center; gap:8px; border-radius:12px; background:var(--bg-sub); color:var(--ink-3);
  text-align:left; }
.work-tray.has-work .work-tray-toggle { display:flex; }
.work-tray-toggle:hover { color:var(--ink); }
.work-tray-toggle:disabled { cursor:default; }
.work-tray:not(.expandable) .work-tray-chevron { display:none; }
.work-tray-state { width:22px; height:22px; flex:none; display:grid; place-items:center;
  border-radius:7px; background:var(--field); color:var(--tone-ok); font-size:11px; font-weight:800; }
.work-tray[data-state="working"] .work-tray-state { color:var(--tone-busy); }
.work-tray[data-state="question"] .work-tray-state { background:color-mix(in srgb, var(--tone-note) 12%, var(--field));
  color:var(--tone-note); }
.work-tray[data-state="error"] .work-tray-state { color:var(--tone-flag); }
.work-tray[data-state="attention"] .work-tray-state { color:var(--focus); }
.work-tray-label { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px; font-weight:600; color:var(--ink-2); }
.work-tray-count { flex:none; min-height:22px; padding:3px 8px; display:inline-flex; align-items:center;
  border-radius:999px; background:var(--field); color:var(--ink-3); font-family:var(--font-num);
  font-size:10px; font-weight:650; }
.work-tray-count[hidden] { display:none; }
.work-tray-chevron { flex:none; transition:transform .16s ease; }
.work-tray.expanded .work-tray-chevron { transform:rotate(180deg); }
.cards-dock { order:1; flex:none; width:100%; margin:0 0 4px; padding:7px 8px;
  display:none; flex-direction:column; gap:2px; max-height:min(52vh, 480px); overflow-y:auto;
  border-radius:var(--radius-lg); background:var(--bg-sub); scrollbar-width:thin; overscroll-behavior:contain; }
.cards-dock.user-sized { height:var(--work-dock-height); max-height:none; }
.work-tray.expanded .cards-dock { display:flex; }
.work-tray.has-work-order .work-tray-toggle { width:max-content; min-width:124px; min-height:38px;
  align-self:center; justify-content:center; padding:7px 13px; gap:8px; border-radius:999px;
  background:var(--field); text-align:center; }
.work-tray.has-work-order .work-tray-state { width:18px; height:18px; border-radius:50%;
  background:transparent; font-size:11px; }
.work-tray.has-work-order[data-state="working"] .work-tray-state {
  border:2px solid color-mix(in srgb, var(--focus) 28%, transparent);
  border-top-color:var(--focus); animation:work-order-spin .9s linear infinite; }
.work-tray.has-work-order .work-tray-label { flex:none; color:var(--ink-2); font-family:var(--font-num);
  font-size:13px; font-weight:550; letter-spacing:-.01em; }
.work-tray.has-work-order .work-tray-chevron { width:12px; height:12px; color:var(--ink-3); }
.work-tray.has-work-order .cards-dock { width:min(100%, 560px); align-self:center; margin-bottom:7px;
  padding:6px; border-radius:18px; background:var(--bg-sub); }
.request-queue { order:3; width:100%; margin-top:5px; overflow:hidden;
  border-radius:13px; background:var(--bg-sub); color:var(--ink-2); }
.request-queue[hidden] { display:none; }
.request-queue-row { display:flex; min-width:0; min-height:36px; align-items:center; gap:7px;
  padding:4px 6px 4px 8px; }
.request-queue-row.drag-over { background:var(--field); }
.request-queue-drag { width:22px; height:28px; flex:none; display:grid; place-items:center;
  border-radius:8px; color:var(--ink-4); cursor:grab; touch-action:none; }
.request-queue-drag:active { cursor:grabbing; }
.request-queue-drag:hover, .request-queue-drag:focus-visible { color:var(--ink); }
.request-queue-copy { min-width:0; flex:1; display:flex; align-items:baseline; gap:8px; }
.request-queue-copy strong { min-width:0; overflow:hidden; color:var(--ink-2); font-size:12px;
  font-weight:520; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.request-queue-copy span { flex:none; color:var(--ink-4); font-family:var(--font-num);
  font-size:10px; white-space:nowrap; }
.request-queue-controls { flex:none; display:flex; align-items:center; gap:1px; }
.request-queue-action { min-width:27px; height:28px; padding:0 6px; display:grid; place-items:center;
  border-radius:8px; color:var(--ink-3); font-size:11px; }
.request-queue-action:hover, .request-queue-action:focus-visible { background:var(--field); color:var(--ink); }
.request-queue-action:focus-visible, .request-queue-drag:focus-visible {
  outline:2px solid var(--focus); outline-offset:-2px; }
.request-queue-action:disabled { opacity:.25; cursor:default; }
.request-queue-action.steer { grid-auto-flow:column; gap:5px; color:var(--ink-2); }
.request-queue-action.steer span { font-size:11px; }
.request-queue-move { display:none; }
.request-queue.expanded { max-height:min(168px, 28vh); overflow-y:auto;
  scrollbar-width:thin; overscroll-behavior:contain; }
.request-queue.expanded .request-queue-move { display:grid; }
.request-queue-toggle svg { transition:transform .16s ease; }
.request-queue.expanded .request-queue-toggle svg { transform:rotate(180deg); }
.discovery-rail { order:6; width:100%; margin-top:3px; overflow:hidden; color:var(--ink-2); }
.discovery-rail[hidden], .discovery-rail-panel[hidden], .discovery-rail-restore[hidden] { display:none; }
.discovery-rail-head { min-height:34px; display:flex; align-items:center; gap:4px; padding:0 9px; }
.discovery-rail-toggle { width:max-content; min-width:0; min-height:34px; padding:0 3px; display:flex;
  align-items:center; gap:7px; border-radius:8px; color:var(--ink-3); text-align:left; }
.discovery-rail-toggle:hover { color:var(--ink); }
.discovery-rail-toggle:focus-visible, .discovery-rail-restore:focus-visible,
.discovery-card-action:focus-visible, .discovery-card-hide:focus-visible {
  outline:2px solid var(--focus); outline-offset:-2px; }
.discovery-rail-mark { width:20px; height:20px; flex:none; display:grid; place-items:center;
  color:var(--ink-3); }
.discovery-rail-toggle span:nth-child(2) { min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:12px; font-weight:560; }
.discovery-rail-chevron { flex:none; margin-left:1px; transition:transform var(--ui-motion); }
.discovery-rail.expanded .discovery-rail-chevron { transform:rotate(180deg); }
.discovery-rail-restore { min-height:32px; flex:none; margin-left:auto; padding:0 7px; border-radius:8px;
  color:var(--ink-4); font-size:11px; font-weight:600; }
.discovery-rail-restore:hover { background:var(--field); color:var(--ink); }
.discovery-rail-panel { order:4; width:100%; margin:4px 0 1px; padding:2px 8px 4px;
  overflow:hidden; color:var(--ink-2); }
.discovery-rail-cards { display:flex; gap:7px; overflow-x:auto; padding:1px 1px 3px;
  scroll-snap-type:x proximity; scrollbar-width:none; overscroll-behavior-inline:contain; }
.discovery-rail-cards::-webkit-scrollbar { display:none; }
.discovery-card { position:relative; flex:0 0 132px; min-width:132px; min-height:106px;
  display:flex; flex-direction:column; scroll-snap-align:start; border-radius:13px;
  background:color-mix(in srgb, var(--field) 72%, transparent); }
.discovery-card-action { min-height:106px; padding:11px 10px 10px; display:flex;
  flex:1; flex-direction:column; align-items:flex-start; gap:3px; border-radius:13px;
  color:var(--ink); text-align:left; }
.discovery-card-action:hover { background:color-mix(in srgb, var(--bg-elev) 78%, transparent); }
.discovery-card-mark { width:27px; height:27px; display:grid; place-items:center; margin-bottom:5px;
  border-radius:9px; background:var(--bg-elev); color:var(--ink-2); }
.discovery-card-mark svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round; }
.discovery-card-title { max-width:100%; overflow:hidden; color:var(--ink); font-size:12px;
  font-weight:620; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.discovery-card-summary { max-width:100%; overflow:hidden; color:var(--ink-3); font-size:10px;
  line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.discovery-card-hide { position:absolute; top:3px; right:3px; z-index:1; width:27px; height:27px;
  display:grid; place-items:center; border-radius:8px; color:var(--ink-4); opacity:0;
  transition:opacity .14s ease, background .14s ease, color .14s ease; }
.discovery-card:hover .discovery-card-hide, .discovery-card:focus-within .discovery-card-hide { opacity:1; }
.discovery-card-hide:hover { background:var(--bg-sub); color:var(--ink); }
.work-order-list { width:100%; color:var(--ink); }
.work-order-list ol { display:flex; flex-direction:column; gap:1px; margin:0; padding:0; list-style:none; }
.work-order-row { display:grid; grid-template-columns:20px minmax(0,1fr); gap:9px; align-items:start;
  min-height:38px; padding:8px 10px; border-radius:12px; color:var(--ink-3); }
.work-order-row.current { background:var(--field); color:var(--ink); }
.work-order-state { width:18px; height:18px; display:grid; place-items:center; margin-top:1px;
  border:1.5px solid color-mix(in srgb, currentColor 44%, transparent); border-radius:50%;
  color:var(--ink-3); font-size:10px; font-weight:750; line-height:1; }
.work-order-row[data-state="completed"] .work-order-state { border-color:transparent;
  background:color-mix(in srgb, var(--tone-ok) 14%, transparent); color:var(--tone-ok); }
.work-order-row[data-state="failed"] .work-order-state { color:var(--tone-flag); }
.work-order-row[data-state="awaiting_input"] .work-order-state,
.work-order-row[data-state="awaiting_approval"] .work-order-state { color:var(--tone-note); }
.work-order-row.current[data-state="claimed"] .work-order-state,
.work-order-row.current[data-state="understanding"] .work-order-state,
.work-order-row.current[data-state="making"] .work-order-state,
.work-order-row.current[data-state="strengthening"] .work-order-state,
.work-order-row.current[data-state="filing"] .work-order-state {
  border:2px solid color-mix(in srgb, var(--focus) 28%, transparent);
  border-top-color:var(--focus); animation:work-order-spin .9s linear infinite; }
.work-order-copy { min-width:0; }
.work-order-copy strong { display:block; overflow:hidden; color:inherit; font-size:13px; font-weight:520;
  line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.work-order-copy > span { display:block; margin-top:1px; color:var(--ink-4); font-family:var(--font-num);
  font-size:11px; line-height:1.3; }
.work-order-copy .queue-result { margin-top:7px; }
.work-order-copy .ai-summary { color:var(--ink-2); font-size:13px; }
.work-order-retry { margin-top:6px; color:var(--focus); font-size:12px; font-weight:650; }
@keyframes work-order-spin { to { transform:rotate(360deg); } }
/* An empty screen is an invitation to act, so it leads with the invitation and follows with what
   that gets you. It used to be one passive sentence — "Emails, images, drafts, diffs, and verified
   previews will appear here while Genesis works" — which described an absence, in the app's own
   nouns: nobody outside this repo knows what a diff or a verified preview is. */
.canvas-hint { color:var(--ink-3); font-size:14px; text-align:center; padding:22vh 32px 0;
  max-width:400px; margin:0 auto; line-height:1.6; }
.canvas-hint-title { display:block; margin-bottom:5px; color:var(--ink); font-size:17px;
  font-weight:600; letter-spacing:-.01em; }
.canvas-hint-mark { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 16px;
  border-radius:50%; background:var(--field); color:var(--ink-3); }
.canvas-hint-mark svg { width:26px; height:26px; }
.canvas-feed { display:flex; flex-direction:column; gap:10px; }
/* The done/left lists on a dissolved screen's summary. Plain rows, no bullets — the mark and the
   count above already carry the state, so a glyph per line would be a second vocabulary for it. */
.appless-outcome-list { margin:6px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:3px; }
.appless-outcome-list li { color:var(--ink-2); font-size:12px; line-height:1.4; }
.appless-outcome-list.is-skipped li { color:var(--ink-4); }
.canvas-decision, .canvas-outcome, .canvas-working { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) auto;
  align-items:start; gap:11px; padding:15px 16px; border-radius:16px; background:var(--bg-sub); color:var(--ink); }
.canvas-decision-mark, .canvas-outcome-mark, .canvas-working-mark { width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%; background:var(--field); color:var(--tone-note); font-size:13px; font-weight:760; }
.canvas-working-mark { width:18px; height:18px; margin:6px;
  border:2px solid color-mix(in srgb, var(--focus) 24%, transparent);
  border-top-color:var(--focus); background:transparent; animation:work-order-spin .9s linear infinite; }
.canvas-outcome[data-state="completed"] .canvas-outcome-mark { color:var(--tone-ok); }
.canvas-outcome[data-state="failed"] .canvas-outcome-mark { color:var(--tone-flag); }
.canvas-decision-copy, .canvas-outcome-copy, .canvas-working-copy { min-width:0; }
.canvas-decision-copy small, .canvas-outcome-copy small, .canvas-working-copy small { display:block; color:var(--ink-4);
  font-size:10px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; }
.canvas-decision-copy p, .canvas-outcome-copy p, .canvas-working-copy p { max-width:680px; margin:4px 0 0; color:var(--ink-2);
  font-size:15px; line-height:1.55; }
.canvas-working-copy > span { display:block; margin-top:8px; color:var(--ink-4); font-size:11px; line-height:1.45; }
/* The live activity trail: the real runtime phases, ticking off as they finish. */
.canvas-steps { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.canvas-step { display:flex; align-items:center; gap:9px; padding:3px 0; font-size:12px; color:var(--ink-4);
  transition:color var(--ui-motion); }
.canvas-step-dot { flex:none; width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
  font-size:9px; font-weight:700; background:var(--field); color:var(--thumb);
  transition:background var(--ui-motion); }
.canvas-step.done { color:var(--ink-2); }
.canvas-step.done .canvas-step-dot { background:var(--tone-ok); color:var(--thumb); }
.canvas-step.current { color:var(--ink); font-weight:600; }
.canvas-step.current .canvas-step-dot { background:var(--ink); animation:canvas-step-pulse 1.4s var(--ui-motion-curve) infinite; }
@keyframes canvas-step-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
@media (prefers-reduced-motion:reduce) { .canvas-step.current .canvas-step-dot { animation:none; } }
.canvas-working-stop { min-width:44px; min-height:44px; padding:0 10px; border-radius:10px;
  color:var(--tone-flag); font-size:12px; font-weight:650; }
.canvas-working-stop:hover, .canvas-working-stop:focus-visible { background:var(--field); }
.canvas-working-stop:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.canvas-decision-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.canvas-decision-hint { display:block; margin-top:9px; color:var(--ink-4); font-size:11px; }
.canvas-outcome-actions { display:flex; align-items:center; gap:2px; }
.canvas-outcome-actions button { width:32px; height:32px; display:grid; place-items:center;
  border-radius:9px; color:var(--ink-3); font-size:12px; }
.canvas-outcome-actions button:hover, .canvas-outcome-actions button:focus-visible {
  background:var(--field); color:var(--ink); }
.canvas-outcome-actions button:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
/* In the tray strip every turn is a SLIM single row — the stage is where work is watched; the
   strip is a quiet, compact activity log you expand. The verbose stage detail (step trail,
   "keep working" note, multi-line copy) is suppressed here. */
.cards-dock .canvas-decision,
.cards-dock .canvas-outcome,
.cards-dock .canvas-working { grid-template-columns:16px minmax(0,1fr) auto; align-items:center;
  gap:8px; padding:5px 8px; border-radius:8px; }
.cards-dock .canvas-decision:hover,
.cards-dock .canvas-outcome:hover,
.cards-dock .canvas-working:hover { background:var(--field); }
.cards-dock .canvas-decision-mark,
.cards-dock .canvas-outcome-mark,
.cards-dock .canvas-working-mark { width:15px; height:15px; margin:0; }
.cards-dock .canvas-outcome-copy,
.cards-dock .canvas-working-copy { display:flex; align-items:baseline; gap:8px; min-width:0; }
.cards-dock .canvas-outcome-copy small,
.cards-dock .canvas-working-copy small { flex:none; margin:0; font-size:10px; letter-spacing:.02em; }
.cards-dock .canvas-outcome-copy p,
.cards-dock .canvas-working-copy p { margin:0; max-width:none; font-size:12px; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cards-dock .canvas-steps,
.cards-dock .canvas-working-copy > span { display:none; }
.cards-dock .canvas-working-stop { min-width:26px; min-height:26px; width:26px; height:26px; padding:0; }
.cards-dock .canvas-outcome-actions { gap:0; }
.cards-dock .canvas-outcome-actions button { width:26px; height:26px; }
/* A question/approval keeps its prompt + buttons readable, just compact. */
.cards-dock .canvas-decision-copy small { margin:0; font-size:10px; }
.cards-dock .canvas-decision-copy p { margin:2px 0 0; max-width:none; font-size:13px; line-height:1.4; }
.cards-dock .canvas-decision-actions { margin-top:6px; gap:6px; }
.canvas-artifacts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  padding:0; }
.canvas-artifact { position:relative; min-width:0; overflow:hidden; border-radius:16px; background:var(--bg-sub);
  color:var(--ink); }
.canvas-artifact img { display:block; width:100%; aspect-ratio:16 / 10; object-fit:cover;
  background:var(--field); }
.canvas-artifact-copy { display:flex; min-width:0; flex-direction:column; padding:14px 15px 15px; }
.canvas-artifact-copy > span { color:var(--ink-4); font-size:10px; font-weight:650;
  letter-spacing:.07em; text-transform:uppercase; }
.canvas-artifact-copy strong { margin-top:4px; overflow:hidden; color:var(--ink); font-size:14px;
  line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.canvas-artifact-copy small { margin-top:2px; overflow:hidden; color:var(--ink-3); font-size:11px;
  text-overflow:ellipsis; white-space:nowrap; }
.canvas-artifact-copy p { margin:8px 0 0; overflow:hidden; color:var(--ink-2); font-size:13px;
  line-height:1.48; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.canvas-artifact-copy a { align-self:flex-start; margin-top:10px; color:var(--focus); font-size:12px;
  font-weight:650; text-decoration:none; }
.canvas-artifact-copy a:hover { text-decoration:underline; text-underline-offset:3px; }
.canvas-artifact-dismiss { position:absolute; top:9px; right:9px; width:32px; height:32px;
  display:grid; place-items:center; border-radius:9px;
  background:color-mix(in srgb, var(--bg-sub) 88%, transparent); color:var(--ink-3);
  font-size:11px; backdrop-filter:blur(10px); }
.canvas-artifact-dismiss:hover, .canvas-artifact-dismiss:focus-visible {
  background:var(--field); color:var(--ink); }
.canvas-artifact-dismiss:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.canvas-email { grid-column:1 / -1; }
.canvas-email .canvas-artifact-copy { padding:15px 52px 15px 15px; }
.canvas-customer_reply, .canvas-weekly_briefing, .canvas-appointment_proposal,
.canvas-form, .canvas-question_set, .canvas-comparison { grid-column:1 / -1; }
.artifact-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  margin-top:13px; }
.artifact-field { display:flex; min-width:0; flex-direction:column; gap:5px; color:var(--ink-3);
  font-size:11px; font-weight:650; }
.artifact-field input, .artifact-field textarea, .artifact-field select {
  width:100%; min-height:42px; padding:9px 11px; border:1px solid var(--line);
  border-radius:10px; background:var(--field); color:var(--ink); font:inherit; font-size:13px;
  font-weight:450; line-height:1.45; }
.artifact-field textarea { min-height:92px; resize:vertical; }
.artifact-body { margin-top:12px; }
.artifact-body textarea { min-height:150px; }
.artifact-field input:focus-visible, .artifact-field textarea:focus-visible,
.artifact-field select:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.artifact-field small { margin:0; color:var(--ink-4); font-size:10px; font-weight:450; white-space:normal; }
.artifact-options { display:flex; flex-wrap:wrap; gap:7px; }
.artifact-options label { display:flex; align-items:center; gap:6px; min-height:38px;
  padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--field);
  color:var(--ink-2); font-size:11px; font-weight:550; }
.artifact-options input { width:16px; min-height:16px; padding:0; }
.artifact-document { max-height:220px; overflow:auto !important; white-space:pre-wrap;
  display:block !important; -webkit-line-clamp:unset !important; }
.artifact-comparison { margin-top:13px; overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.artifact-comparison table { width:100%; border-collapse:collapse; font-size:12px; }
.artifact-comparison th, .artifact-comparison td { padding:9px 10px; border-bottom:1px solid var(--line);
  color:var(--ink-2); text-align:left; vertical-align:top; }
.artifact-comparison th { color:var(--ink-3); font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.artifact-comparison tr:last-child td { border-bottom:0; }
.artifact-comparison button, .artifact-actions button { min-height:36px; padding:7px 10px;
  border-radius:9px; background:var(--field); color:var(--ink-2); font-size:11px; font-weight:650; }
.artifact-comparison button:hover, .artifact-comparison button:focus-visible,
.artifact-actions button:hover, .artifact-actions button:focus-visible { background:var(--field-strong); color:var(--ink); }
.artifact-comparison button:focus-visible, .artifact-actions button:focus-visible {
  outline:2px solid var(--focus); outline-offset:1px; }
.artifact-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.artifact-quality-state { display:flex; align-items:center; gap:7px; min-height:34px; margin-top:13px;
  padding:7px 9px; border:1px solid var(--line); border-radius:10px; background:var(--field);
  color:var(--ink-3); }
.artifact-quality-state > span { width:7px; height:7px; flex:0 0 auto; border-radius:50%;
  background:var(--ink-4); }
.artifact-quality-state[data-status="passed"] > span { background:var(--tone-ok); }
.artifact-quality-state[data-status="needs_revision"] > span { background:var(--tone-note); }
.artifact-quality-state strong { margin:0; color:var(--ink-2); font-size:11px; line-height:1.2; }
.artifact-quality-state small { margin:0 0 0 auto; color:var(--ink-4); font-size:10px; }
.artifact-role-boundary { display:block !important; margin:9px 0 0 !important; padding:8px 10px;
  border-radius:9px; background:var(--bg-sub); color:var(--ink-4) !important;
  font-size:11px !important; line-height:1.45; -webkit-line-clamp:unset !important; }
.artifact-field :disabled { cursor:not-allowed; opacity:.7; }
.artifact-quality-feedback { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; }
.artifact-quality-feedback > span { flex:1 0 100%; color:var(--ink-3); font-size:11px; font-weight:650; }
.artifact-quality-feedback label { display:flex; flex:1 0 100%; align-items:center; justify-content:space-between;
  gap:8px; color:var(--ink-4); font-size:10px; }
.artifact-quality-feedback select { min-height:30px; max-width:150px; padding:4px 25px 4px 8px;
  border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink-2);
  font:inherit; }
.artifact-quality-feedback button { min-height:32px; padding:5px 8px; border:1px solid var(--line);
  border-radius:8px; background:transparent; color:var(--ink-3); font-size:10px; font-weight:650; }
.artifact-quality-feedback button:hover, .artifact-quality-feedback button:focus-visible {
  background:var(--field-strong); color:var(--ink); }
.artifact-quality-feedback button:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.artifact-proof { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.artifact-proof summary { min-height:32px; color:var(--ink-3); font-size:11px; font-weight:650; cursor:pointer; }
.artifact-proof p { display:block !important; margin:5px 0 0 !important; color:var(--ink-3) !important;
  font-size:11px !important; -webkit-line-clamp:unset !important; }
.artifact-version { display:flex !important; align-items:center; gap:8px; }
.artifact-version button { min-height:30px; margin-left:auto; padding:4px 9px; border:1px solid var(--line);
  border-radius:9px; background:var(--field); color:var(--ink-2); font-size:10px; font-weight:650; }
.artifact-version button:hover, .artifact-version button:focus-visible { background:var(--field-strong); color:var(--ink); }
.artifact-version button:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.canvas-attention { display:flex; flex-direction:column; gap:2px; padding:6px;
  border-radius:16px; background:var(--bg-sub); }
.ai-card { position:relative; display:flex; align-items:center; gap:9px; background:transparent;
  min-height:40px; padding:8px 10px; width:100%; opacity:0; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease; }
.ai-card.in { opacity:1; transform:none; }
.attention-card { align-items:flex-start; padding-block:8px; }
.attention-glyph { width:20px; height:20px; flex:0 0 20px; display:grid; place-items:center;
  border-radius:6px; background:var(--field); color:var(--ink-2); font-size:10px; font-weight:750; }
.attention-line { display:flex; min-width:0; align-items:baseline; gap:8px; padding-right:8px; }
.attention-line strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink); font-size:13px; }
.attention-line span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-3); font-size:11px; }
.attention-snippet { margin-top:3px; overflow:hidden; color:var(--ink-2); font-size:12px;
  line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.attention-actions { display:flex; gap:8px; margin-top:5px; }
.attention-actions button { padding:2px 0; color:var(--focus); font-size:11px; font-weight:650; }
.attention-projects { display:flex; flex-direction:column; gap:4px; }
.attention-project { display:flex; align-items:center; gap:10px; width:100%; padding:9px 6px;
  border-radius:10px; color:var(--ink-2); text-align:left; }
.attention-project:hover { background:var(--field); color:var(--ink); }
.attention-project span { width:25px; height:25px; display:grid; place-items:center;
  border-radius:50%; background:var(--bg-sub); font-size:10px; }
.attention-project strong { font-size:13px; }
.ai-card.codex-card { background:transparent; color:var(--codex-ink); }
.ai-card.support-card { min-height:34px; padding-block:4px; }
.support-line { padding-right:22px; overflow:hidden; color:var(--codex-ink); font-size:12px;
  line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.support-card[data-state="question"] .support-line { white-space:normal; }
.support-more { margin-top:2px; color:var(--codex-ink); }
.support-steps { font-size:11px; color:var(--ink-2); }
.support-steps.open { display:flex; flex-direction:column; gap:2px; }
.support-steps span { display:block; }
.support-steps i { margin-right:6px; color:var(--tone-ok); font-style:normal; }
.ai-card.living-card { background:color-mix(in srgb, var(--focus) 8%, var(--bg-elev)); }
.codex-card .ai-card-t, .codex-card .ai-ic { color:var(--codex-ink); }
.living-card .ai-card-t, .living-card .ai-ic { color:var(--focus); }
.living-card .ai-card-s { color:var(--ink-3); }
.codex-card .ai-card-s { color:color-mix(in srgb, var(--codex-ink) 68%, var(--ink-3)); }
.codex-mark { width:18px; height:18px; border-radius:6px; display:grid; place-items:center;
  background:var(--codex); color:#fff; font-size:10px; font-weight:800; }
.living-mark { width:18px; height:18px; border-radius:6px; display:grid; place-items:center;
  background:var(--focus); color:#fff; font-size:13px; font-weight:700; }
.codex-current { display:none; }
.codex-card .ai-prog { background:color-mix(in srgb, var(--codex) 16%, transparent); }
.codex-card .ai-prog-fill { background:var(--codex); }
.codex-card .btn.primary { background:var(--codex); color:#fff; }
.ai-ic { width:20px; flex:0 0 20px; display:grid; place-items:center; padding-top:1px; }
.ai-ask { width:18px; height:18px; border-radius:6px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--tone-note) 16%, transparent); color:var(--tone-note);
  font-size:11px; font-weight:700; }
.ai-card-main { flex:1; min-width:0; }
.ai-card-t { font-size:13px; font-weight:600; }
.ai-card-s { font-size:11px; color:var(--ink-3); margin-top:0; }
.ai-x { width:28px; height:28px; flex:none; display:grid; place-items:center;
  color:var(--ink-4); background:none; cursor:pointer; font-size:11px; padding:0; border-radius:50%; }
.ai-x:hover { color:var(--ink); }
.ai-pulse { color:var(--focus); animation:ai-fade 1.6s ease-in-out infinite; font-size:9px; }
@keyframes ai-fade { 0%,100%{opacity:.35} 50%{opacity:1} }
.ai-check { color:var(--tone-ok); font-weight:800; }
.ai-note-ic { color:var(--ink-3); }
.ai-viewsum { font-size:11px; color:var(--focus); background:none; cursor:pointer; padding:2px 0; margin-top:3px; font-weight:600; }
.ai-summary { display:none; font-size:12px; color:var(--ink-2); line-height:1.45; margin-top:4px;
  max-height:220px; overflow-y:auto; white-space:pre-wrap; word-break:break-word; }
.ai-summary.open { display:block; }
.ai-proof-toggle { color:var(--ink-2); }
.ai-proof { padding:7px 9px; border-radius:8px; background:var(--field); max-height:180px; }
.ai-proof span { display:block; }
.ai-proof span + span { margin-top:4px; }
.ai-approve { display:flex; gap:6px; margin-top:8px; }
.ai-steps { display:flex; flex-direction:column; gap:2px; margin-top:5px; font-size:11px; color:var(--ink-2); }
.ai-steps i { color:var(--tone-ok); font-style:normal; font-weight:700; margin-right:6px; }
.set-area { resize:vertical; min-height:74px; line-height:1.5; font-family:var(--font-ui); }
.set-area.compact { min-height:48px; }
.set-label.subtle { margin-top:8px; color:var(--ink-3); font-size:11px; }
.pir-panel { margin-bottom:18px; padding:12px; border-radius:11px; background:var(--bg-sub); }
.pir-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:650; }
.pir-state { color:var(--ink-3); font-size:11px; font-weight:600; }
.pir-state.ok { color:var(--tone-ok); }
.pir-state.warn { color:var(--tone-busy); }
.pir-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:10px 0; }
.pir-metrics span { padding:7px 5px; border-radius:8px; background:var(--field); color:var(--ink-3); font-size:10px; line-height:1.25; text-align:center; }
.pir-metrics b { display:block; color:var(--ink); font-size:13px; }
.pir-memory { display:flex; align-items:flex-start; gap:8px; padding:8px 0; }
.pir-memory + .pir-memory { margin-top:2px; }
.pir-memory-main { display:flex; flex:1; min-width:0; flex-direction:column; gap:2px; }
.pir-memory-kind { color:var(--ink-3); font-size:10px; text-transform:capitalize; }
.pir-memory-text { color:var(--ink-2); font-size:11px; line-height:1.4; word-break:break-word; }
.pir-memory-actions { display:flex; flex-direction:column; gap:2px; }
.pir-memory-actions button { padding:2px 4px; background:none; color:var(--focus); font-size:10px; cursor:pointer; text-align:right; }
.btn.small { padding:6px 12px; font-size:12px; border-radius:8px; }
.ai-prog { width:100%; height:3px; margin-top:8px; border-radius:999px; background:var(--field); overflow:hidden; }
.ai-prog-fill { display:block; height:100%; width:38%; border-radius:999px; background:var(--focus);
  animation:aiProg 1.4s ease-in-out infinite; }
@keyframes aiProg { 0% { margin-left:-38%; } 100% { margin-left:100%; } }
.queue-card { align-items:center; min-height:38px; padding:6px 10px; background:var(--bg-elev); }
.queue-card:not(.queue-terminal-card) .ai-card-main { display:grid;
  grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; }
.queue-card:not(.queue-terminal-card) .queue-phases,
.queue-card:not(.queue-terminal-card) .queue-result,
.queue-card:not(.queue-terminal-card) .queue-audit-note { grid-column:1 / -1; }
.result-card { align-items:flex-start; min-height:0; padding:7px 6px 7px 10px; }
.result-card .ai-card-main { position:relative; display:block; min-width:0; flex:1; padding:2px 36px 2px 0; }
.result-copy { max-height:min(38vh, 360px); overflow-y:auto; padding:0 4px 0 0;
  color:var(--ink-2); font-size:15px; line-height:1.6; white-space:pre-wrap;
  word-break:break-word; overscroll-behavior:contain; }
.result-more { margin-top:5px; padding:2px 3px; color:var(--ink-4); font-size:12px;
  letter-spacing:.12em; line-height:1; }
.result-more:hover { color:var(--ink); }
.result-detail { padding:6px 0 0; color:var(--ink-3); font-size:12px; line-height:1.45; }
.result-reply { position:absolute; right:0; bottom:0; width:30px; height:30px; display:grid;
  place-items:center; border-radius:50%; color:var(--ink-3); }
.result-reply:hover { color:var(--ink); background:var(--field); }
.result-reply.queue-retry { right:36px; }
.result-reply:focus-visible, .result-more:focus-visible, .ai-x:focus-visible {
  outline:2px solid var(--focus); outline-offset:1px; }
.queue-terminal-preview { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-3); font-size:11px; }
.queue-terminal-card .ai-card-s, .legacy-terminal-card .ai-card-s { white-space:nowrap; }
.queue-card[data-state="failed"] { background:transparent; color:var(--tone-flag); }
.queue-card[data-state="awaiting_input"],
.queue-card[data-state="awaiting_approval"] { background:transparent; color:var(--tone-note); }
.queue-card-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-phases { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin-top:5px; }
.queue-phase { min-width:0; padding:4px 6px; border-radius:8px; background:var(--field);
  color:var(--ink-4); font-size:10px; font-weight:650; line-height:1.2; }
.queue-phase b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:inherit; font-size:10px; font-weight:650; }
.queue-phase.done { color:var(--tone-ok); }
.queue-phase.current { background:color-mix(in srgb, var(--focus) 13%, var(--field)); color:var(--focus); }
.queue-phase.current::before { content:"●"; margin-right:5px; font-size:7px; }
.queue-result { margin-top:4px; }
.queue-waiting-label { color:var(--tone-note); font-weight:650; }
.queue-audit-note { margin-top:4px; color:var(--ink-4); font-family:var(--font-num); font-size:10px; }
.queue-empty { padding:12px 14px; color:var(--ink-3); font-size:12px; text-align:center; }
body.drop-hot .main { outline:2px dashed var(--tone-busy); outline-offset:-8px; border-radius:var(--radius-lg); }
@media (prefers-reduced-motion: reduce) {
  .ai-pulse, .ai-prog-fill, .canvas-working-mark, .codex-current i, .composer-voice-status::before, .voice-switch.live::after { animation:none; }
  .support-card-chevron { transition:none; }
  .composer textarea, .voice-switch-indicator, .request-queue-toggle svg,
  .discovery-rail-chevron { transition:none; }
}

/* Voice notes — flat player inside a card */
.m-audio { display:flex; align-items:center; gap:10px; margin:6px 0 2px; min-width:190px; max-width:340px; }
.ap-btn { width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--field); color:var(--ink); }
.ap-btn:active { transform:scale(.96); }
.ap-track { flex:1; height:3px; border-radius:2px; overflow:hidden;
  background:color-mix(in srgb, var(--ink-4) 40%, transparent); }
.ap-track i { display:block; width:0%; height:100%; background:var(--ink); transition:width .2s linear; }
.ap-time { font-family:var(--font-num); font-size:11px; color:var(--ink-3); }

/* ── Composer ── */
.composer-wrap { order:5; flex:none; padding:6px 0 0; }
.work-tray:not(.has-work) .composer-wrap { padding-bottom:0; }
.composer-shell { width:100%; margin:0 auto; display:flex; align-items:stretch; gap:8px; }
/* The collapse control lives in the composer row (#c-collapse) — there is no floating minimize
   beside the container any more. Audio and collapse were two separate pills hovering next to the
   prompt, which read as three competing containers where there is one thing. */
.composer-pill { order:5; align-self:center; min-height:48px; padding:4px; display:flex; gap:2px;
  position:relative; border-radius:999px; background:color-mix(in srgb,var(--bg-sub) 94%,transparent);
  backdrop-filter:blur(20px) saturate(1.08); }
.composer-pill[hidden] { display:none; }
.composer-pill button { width:44px; height:40px; padding:0; display:grid; place-items:center;
  border-radius:999px; color:var(--ink-3); transition:background var(--ui-motion), color var(--ui-motion); }
.composer-pill button:hover, .composer-pill button:focus-visible { background:var(--field); color:var(--ink); }
.composer-pill button:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
/* The middle control is the one that adds something, so it reads as the primary of the three. */
.composer-pill #composer-pill-add { color:var(--ink-2); }
.composer-pill #composer-pill-add:hover, .composer-pill #composer-pill-add:focus-visible { color:var(--ink); }

/* Working. A single travelling arc around the pill — felt at the edge of attention, never read, and
   never a number that pretends to know how long something will take. */
.composer-pill.thinking::after { content:""; position:absolute; inset:-1.5px; border-radius:999px;
  padding:1.5px; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, var(--signal) 40deg, transparent 110deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; animation:composer-thinking 1.5s linear infinite; }
@keyframes composer-thinking { to { transform:rotate(1turn); } }

/* Opening is a grow from the pill's own footprint, so the composer reads as the same object
   unfolding rather than a different panel replacing it. CLOSING is its own animation rather than
   the absence of one: the collapsed state is `display:none`, which cannot be transitioned, so it
   used to vanish instantly — the prompt grew open gently and then blinked out of existence. The
   tray wears `.composer-closing` for the length of the close, and only then collapses. */
.work-tray:not(.composer-collapsed) .composer-wrap {
  animation:composer-open 340ms cubic-bezier(.22,.68,.32,1); transform-origin:bottom center; }
@keyframes composer-open {
  from { opacity:0; transform:translateY(10px) scaleY(.92); }
  60%  { opacity:1; }
  to   { opacity:1; transform:none; }
}
.work-tray.composer-closing .composer-wrap {
  animation:composer-close 240ms cubic-bezier(.4,0,.7,.3) forwards; transform-origin:bottom center;
  pointer-events:none; }
@keyframes composer-close {
  from { opacity:1; transform:none; }
  to   { opacity:0; transform:translateY(10px) scaleY(.92); }
}
/* The pill fades up as the composer settles, so the two never appear at once. */
.work-tray.composer-collapsed:not(.composer-closing) .composer-pill {
  animation:pill-in 260ms cubic-bezier(.22,.68,.32,1); }
@keyframes pill-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  .composer-pill.thinking::after { animation:none; background:conic-gradient(from 0deg, var(--signal), var(--signal)); opacity:.5; }
  .work-tray:not(.composer-collapsed) .composer-wrap,
  .work-tray.composer-closing .composer-wrap,
  .work-tray.composer-collapsed:not(.composer-closing) .composer-pill { animation:none; }
  .composer-pill button { transition:none; }
}
.work-tray.composer-collapsed .composer-wrap,
.work-tray.composer-collapsed #discovery-rail,
.work-tray.composer-collapsed #discovery-rail-panel { display:none !important; }
/* COLLAPSED means collapsed. The tray only shrank to the pill when there was no work, so the
   moment anything needed saying it became a full-width bar floating above a pill — two shapes for
   one thing, and the calm resting state gone. The bar belongs to the expanded composer; while
   collapsed the same fact rides on the pill's own activity icon. */
.work-tray.composer-collapsed { width:auto; }
.work-tray.composer-collapsed .work-tray-toggle { display:none; }
/* And the cards go with it. Collapsed used to leave whatever was in the dock floating above the
   pill — the two-stacked-things the tray was built to avoid, just in a smaller costume. While
   collapsed the pill is the ONLY thing on screen; the ✨ icon opens the cards as a popup over it. */
.work-tray.composer-collapsed .cards-dock { display:none; }
.work-tray.composer-collapsed.activity-open .cards-dock {
  display:flex; max-height:min(46vh, 420px); overflow-y:auto;
  animation:activity-pop 220ms cubic-bezier(.22,.68,.32,1); transform-origin:bottom center; }
@keyframes activity-pop {
  from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; }
}
.work-tray.composer-collapsed.activity-open #composer-pill-activity { color:var(--ink); background:var(--field); }
@media (prefers-reduced-motion: reduce) {
  .work-tray.composer-collapsed.activity-open .cards-dock { animation:none; }
}

/* The activity icon carries the state as a dot, so a glance tells you whether it is a question,
   something running, or something that failed — without a bar and without a word. */
.composer-pill button { position:relative; }
.pill-dot { position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%;
  background:var(--signal); box-shadow:0 0 0 2px var(--bg-sub); }
.work-tray[data-state="error"] .pill-dot { background:var(--tone-flag); }
.work-tray[data-state="question"] .pill-dot { background:var(--tone-note); }
.work-tray[data-state="working"] .pill-dot { background:var(--tone-busy); }
.work-tray[data-state="ready"] .pill-dot { display:none; }
@media (prefers-reduced-motion: no-preference) {
  .work-tray[data-state="working"] .pill-dot { animation:pill-dot-pulse 1.6s ease-in-out infinite; }
}
@keyframes pill-dot-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
/* The same idea one step louder: while the prompt rests there is no chip to hold the count, so
   Plus carries it. A number, not a dot — "something is attached" is not the useful part. */
.pill-count { position:absolute; top:4px; right:4px; min-width:15px; height:15px; padding:0 4px;
  display:grid; place-items:center; border-radius:999px; background:var(--signal);
  box-shadow:0 0 0 2px var(--bg-sub); color:var(--on-signal,#fff);
  font-family:var(--font-num); font-size:9px; font-weight:700; line-height:1; }
.pill-count[hidden] { display:none; }
/* Roomy enough to feel like somewhere to think, tight enough that an empty prompt is not a void.
   The control row keeps ONE baseline — nothing here is taller than a 34px target, so the eye reads
   a single line of affordances rather than a column floating in a band. */
.composer { position:relative; flex:1; min-width:0; background:var(--bg-sub);
  border-radius:var(--radius-lg); padding:10px 12px 9px; display:flex; flex-direction:column;
  gap:3px; transition:background .15s; }
.composer:focus-within { background:var(--bg-elev); }
.composer textarea { border:0; background:transparent; resize:none; font-size:15px; line-height:1.45;
  color:var(--ink); padding:0 4px; max-height:180px; outline:none;
  transition:opacity .18s ease, transform .18s ease; }
.composer textarea.voice-transcript-fade { opacity:0; transform:translateY(-3px); }
.composer textarea::placeholder { color:var(--ink-4); }
.composer-attachments:empty { display:none; }
.composer-attachments { display:flex; flex-direction:column; gap:6px; padding:0 2px 2px; }
/* What attaching leaves behind at rest: one line that says how many, and nothing else. The files
   themselves are behind it, because a wall of thumbnails over the prompt is the gallery deciding
   it matters more than what you came to say. */
.composer-attach-summary { display:flex; }
.composer-attach-toggle { min-height:30px; padding:0 9px 0 8px; display:flex; align-items:center;
  gap:7px; border-radius:9px; color:var(--ink-2); font-size:12px; font-weight:550;
  transition:color var(--ui-motion), background var(--ui-motion); }
.composer-attach-toggle:hover { color:var(--ink); background:var(--field); }
.composer-attach-toggle:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.composer-attach-toggle svg { flex:none; color:var(--ink-4); }
.composer-attach-toggle:hover svg { color:var(--ink-3); }
.composer-attach-toggle i { display:grid; place-items:center; color:var(--ink-4);
  transition:transform var(--ui-motion); }
.composer-attach-toggle[aria-expanded="true"] i { transform:rotate(180deg); }
.composer-attachment-tiles { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
  scrollbar-width:none; }
.composer-attachment-tiles::-webkit-scrollbar { display:none; }
@media (prefers-reduced-motion: reduce) {
  .composer-attach-toggle, .composer-attach-toggle i { transition:none; }
}
.composer-voice-status { min-height:30px; padding:5px 7px 5px 10px; display:flex; align-items:center;
  gap:8px; border-radius:10px; background:var(--field); color:var(--ink-3); font-size:11px; }
.composer-voice-status::before { content:""; width:6px; height:6px; flex:none; border-radius:50%;
  background:var(--focus); animation:ai-fade 1.6s ease-in-out infinite; }
.composer-voice-status button { min-width:44px; min-height:32px; margin-left:auto; padding:4px 8px;
  border-radius:7px; color:var(--ink-3); font-size:11px; font-weight:650; }
.composer-voice-status button:hover { background:var(--bg-elev); color:var(--ink); }
.composer-voice-status button:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.composer-attachment { position:relative; width:104px; height:74px; flex:none; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--ink-4) 28%, transparent); border-radius:13px;
  background:var(--field); }
.composer-attachment img { width:100%; height:100%; object-fit:cover; display:block; }
.composer-file-preview { width:100%; height:100%; padding:11px 9px 8px; display:flex; flex-direction:column;
  justify-content:flex-end; gap:2px; }
.composer-file-icon { position:absolute; top:10px; left:10px; color:var(--ink-3); }
.composer-file-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px;
  font-weight:650; color:var(--ink-2); }
.composer-file-size { font-family:var(--font-num); font-size:10px; color:var(--ink-4); }
.composer-attachment-remove { position:absolute; top:5px; right:5px; width:23px; height:23px;
  border-radius:50%; display:grid; place-items:center; color:white; background:rgba(10,10,12,.72);
  box-shadow:0 1px 8px rgba(0,0,0,.24); transition:transform .12s, background .12s; }
.composer-attachment-remove:hover { transform:scale(1.06); background:rgba(10,10,12,.92); }
.composer-attachment-remove:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.composer-row { position:relative; display:flex; align-items:center; gap:2px; }
.c-btn { width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  color:var(--ink-3); transition:color .12s, background .12s; }
.c-btn:hover { color:var(--ink); background:var(--field); }
.c-btn.rec { color:var(--tone-flag); background:var(--field); }
/* A zero-height rail in the tray's flow, directly above the composer AND the pill (both order:5).
   The menu hangs upward from it, so it lands above whichever of the two is on screen without
   anyone measuring the composer's variable height. */
.composer-menu-anchor { order:4; position:relative; align-self:stretch; height:0; }
.source-menu { position:absolute; left:10px; bottom:6px; z-index:60; width:min(290px,calc(100vw - 42px));
  padding:7px; border:1px solid color-mix(in srgb,var(--ink-4) 18%,transparent);
  border-radius:16px; background:color-mix(in srgb,var(--bg-elev) 96%,transparent);
  box-shadow:0 18px 55px rgba(0,0,0,.28); backdrop-filter:blur(24px) saturate(1.08);
  transform-origin:bottom left; animation:source-menu-in .18s cubic-bezier(.22,1,.36,1); }
/* The pill is centred, so its popup is too. */
.work-tray.composer-collapsed .source-menu { left:50%; transform:translateX(-50%);
  transform-origin:bottom center; animation-name:source-menu-in-center; }
.source-menu[hidden] { display:none; }
.source-menu-head { padding:7px 9px 8px; color:var(--ink-4); font-size:9px; font-weight:750;
  letter-spacing:.06em; text-transform:uppercase; }
@keyframes source-menu-in { from { opacity:0; transform:translateY(5px) scale(.985); } }
/* The centred popup keeps its own centring through the entrance, or it slides in from the left. */
@keyframes source-menu-in-center {
  from { opacity:0; transform:translateX(-50%) translateY(5px) scale(.985); }
}
/* "More Genesis can do here" lives under the upload options, so the menu reads as one list of
   things you might reach for: first what you can add, then what Genesis can do with it. The rule
   separates the two without adding a second container. */
.source-menu-head-ruled { margin-top:5px; padding-top:11px;
  border-top:1px solid color-mix(in srgb,var(--ink-4) 16%,transparent); }
.source-menu-item { width:100%; display:flex; align-items:flex-start; gap:9px; padding:8px 9px;
  border-radius:11px; text-align:left; color:var(--ink); transition:background var(--ui-motion); }
.source-menu-item:hover, .source-menu-item:focus-visible { background:var(--field); }
.source-menu-item:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.source-menu-mark { flex:none; width:24px; height:24px; display:grid; place-items:center;
  border-radius:8px; background:var(--field); color:var(--ink-2); }
.source-menu-item:hover .source-menu-mark { color:var(--ink); }
.source-menu-mark svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.source-menu-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.source-menu-copy strong { font-size:13px; font-weight:600; line-height:1.25; }
.source-menu-copy small { font-size:11px; line-height:1.35; color:var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .source-menu-item { transition:none; } }
.c-support { min-height:30px; padding:0 9px; border-radius:10px; color:var(--ink-4);
  font-family:var(--font-num); font-size:11px; letter-spacing:.01em; }
.c-support:hover { color:var(--ink); background:var(--field); }
.c-support:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
/* Send is a filled light disc — the one affirmative action in the prompt, and the only element here
   that carries a solid fill, so it reads as the thing you press without needing a label. */
/* Collapse lives in the container's top-right corner: above Send, as asked, but aligned to the
   PROMPT rather than stacked inside the control row — stacking made the row 61px tall and left every
   other control floating in the middle of a band. Quiet until wanted; it is a way out, not an
   action. */
.c-collapse { position:absolute; top:9px; right:7px; width:24px; height:24px; border-radius:8px;
  display:grid; place-items:center; color:var(--ink-4); opacity:.55;
  transition:opacity .15s ease, background .15s ease, color .15s ease; }
.composer:hover .c-collapse, .composer:focus-within .c-collapse { opacity:1; }
.c-collapse:hover { background:var(--field); color:var(--ink); }
.c-collapse:focus-visible { opacity:1; outline:2px solid var(--focus); outline-offset:1px; }
/* Send: a solid disc, the one affirmative action in the prompt and the only element carrying a fill.
   Disabled is a QUIET button, not a faded one — a washed-out light disc on a dark field reads as a
   smudge, where a filled dark disc with a muted arrow still reads as a button that is not ready. */
/* The disc is ALWAYS there — an empty prompt still shows a light circle with the arrow in it, which
   is what makes Send findable before you have typed anything. Resting used to be `--field` on
   `--bg-sub`: #2a2a2e on #141416, a circle you cannot see in the dark theme, so Send read as a bare
   floating arrow. Not-ready is now said with opacity, not with a second fill. */
.c-send { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:var(--bg); opacity:.38; cursor:default;
  transition:opacity .16s ease, background .16s ease, transform .12s ease; }
.c-send.ready { opacity:1; cursor:pointer; }
.c-send.ready:hover { background:color-mix(in srgb,var(--ink) 88%,var(--bg)); }
.c-send.ready:active { transform:scale(.94); }
.c-send:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

/* Voice lives beside the writing area: one vertical rail, two explicit modes. */
/* Audio sits INSIDE the prompt now, as one control in the row beside Send — not a two-row switch
   floating alongside the container. It was a switch because there were two modes; realtime voice is
   gone, so a rail that slides an indicator between two halves describes a choice nobody has. */
.voice-switch { position:relative; flex:none; isolation:isolate; display:flex; }
.voice-switch-indicator { display:none; }
/* Recording: the control itself fills in and a dot pulses, so the state is on the thing you pressed
   rather than announced somewhere else. */
.voice-switch.live .voice-switch-button { background:color-mix(in srgb, var(--focus) 14%, var(--field));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--focus) 22%, transparent); }
.voice-switch.live::after { content:""; position:absolute; z-index:2; top:2px; right:2px;
  width:5px; height:5px; border-radius:50%; background:var(--focus);
  animation:ai-fade 1.6s ease-in-out infinite; pointer-events:none; }
.voice-switch-button { position:relative; z-index:1; width:30px; height:30px; border-radius:999px;
  display:grid; place-items:center; color:var(--ink-3); transition:color .15s, background .15s, transform .12s; }
.voice-switch-button:hover { color:var(--ink); }
.voice-switch-button[aria-pressed="true"] { color:var(--focus); }
.voice-switch-button:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.voice-switch-button:active { transform:scale(.94); }

/* ── Right panel ──
   Keep the dock in the flex layout at zero width so both opening and closing
   interpolate. Its contents retain their final width and are gently revealed,
   avoiding reflow and text wrapping during the transition. */
.rpanel { position:absolute; inset:0 0 0 auto; z-index:20; width:0; min-width:0;
  max-width:min(720px,calc(100vw - 360px)); display:flex; flex-direction:column; overflow:hidden;
  background:var(--dock-surface); border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  padding:16px 0; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(18px);
  transition:width var(--ui-motion), padding-left var(--ui-motion), padding-right var(--ui-motion),
    opacity var(--ui-motion), transform var(--ui-motion),
    visibility 0s linear var(--ui-motion-duration);
  will-change:width,transform,opacity; }
body.rp-open .rpanel { width:var(--panel-w); padding-left:10px; padding-right:18px;
  opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
.rp-resize { position:absolute; z-index:3; top:10px; bottom:10px; left:-7px; width:14px;
  cursor:col-resize; touch-action:none; outline:none; }
.rp-resize > span { position:absolute; top:50%; left:6px; width:2px; height:48px;
  border-radius:999px; background:var(--ink-4); opacity:0; transform:translateY(-50%);
  transition:opacity .14s ease, height .16s cubic-bezier(.22,1,.36,1); }
.rp-resize:hover > span, .rp-resize:focus-visible > span, body.rp-resizing .rp-resize > span {
  opacity:.56; height:72px; }
.rp-resize:focus-visible { outline:2px solid var(--focus); outline-offset:-4px; border-radius:8px; }
body.rp-resizing { cursor:col-resize; user-select:none; }
body.rp-resizing * { cursor:col-resize !important; }
body.rp-resizing .rpanel { transition:none; }
.rp-head { width:calc(var(--panel-w) - 24px); min-width:296px; align-self:flex-end;
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 3px; }
.rp-tabs { width:max-content; min-width:0; display:flex; gap:2px; background:var(--dock-item); padding:3px;
  border-radius:var(--radius-sm); }
.rp-tab { width:38px; height:34px; min-width:0; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-3); border-radius:calc(var(--radius-sm) - 3px);
  white-space:nowrap; transition:color .15s ease, background .15s ease, transform .12s ease; }
.rp-tab:hover { color:var(--ink); }
.rp-tab.on { background:var(--dock-active); color:var(--ink); }
.rp-close { width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center;
  color:var(--ink-3); transition:color .12s, background .12s; }
.rp-close:hover { color:var(--ink); background:var(--field); }
.rp-close:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.rp-body { width:calc(var(--panel-w) - 24px); min-width:296px; align-self:flex-end;
  flex:1; min-height:0; overflow-y:auto; margin-top:12px; display:flex;
  flex-direction:column; gap:12px; padding:12px; border-radius:20px; background:var(--dock-group); }
.rp-body.apps-mode, .rp-body.vault-mode { overflow:hidden; }
.dock-heading { min-height:48px; display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:1px 3px 4px; }
.dock-heading .rp-sec { padding:0; }
.dock-heading h2 { margin:0; color:var(--ink); font-size:20px; line-height:1.2; font-weight:700;
  letter-spacing:-.025em; }
.dock-heading-actions { min-height:48px; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.dock-heading-actions > div:first-child { min-width:0; display:flex; flex-direction:column; gap:2px; }
.dock-section { background:var(--dock-surface); }
.channel-status { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; border-radius:14px;
  background:var(--bg-sub); }
.channel-status-dot { width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--tone-note); box-shadow:0 0 0 4px color-mix(in srgb, var(--tone-note) 12%, transparent); }
.channel-status.ready .channel-status-dot { background:var(--tone-ok);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--tone-ok) 12%, transparent); }
.channel-status b { color:var(--ink); font-size:13px; font-weight:650; }
.channel-setup { display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid var(--line);
  border-radius:16px; background:var(--bg-sub); }
.channel-setup-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.channel-setup-head h2 { margin:2px 0 0; color:var(--ink); font-size:14px; font-weight:650; }
.channel-setup-head button, .channel-provider button, .channel-agent-card button { min-height:30px; padding:5px 10px;
  border:0; border-radius:999px; background:var(--field); color:var(--ink-2); font:inherit; font-size:11px; font-weight:650; cursor:pointer; }
.channel-provider-list { display:flex; flex-direction:column; gap:7px; }
.channel-provider { display:flex; align-items:center; gap:9px; min-width:0; min-height:50px; padding:9px; border-radius:12px; background:var(--bg); }
.channel-provider-mark, .channel-agent-avatar { width:30px; height:30px; flex:none; display:grid; place-items:center;
  border-radius:10px; background:var(--field); color:var(--ink-2); font-size:10px; font-weight:700; }
.channel-provider.ready .channel-provider-mark { background:color-mix(in srgb, var(--tone-ok) 14%, var(--field)); color:var(--tone-ok); }
.channel-provider-copy { min-width:0; flex:1; display:flex; align-items:center; }
.channel-provider-copy b, .channel-agent-card b { color:var(--ink); font-size:12px; font-weight:650; }
.channel-agent-card { display:flex; align-items:center; gap:9px; padding:12px; border:1px solid var(--line); border-radius:16px; }
.channel-agent-card > span:nth-child(2) { min-width:0; flex:1; display:flex; align-items:center; }
.channel-agent-card button { flex:none; }
.channel-composer, .channel-approval { display:flex; flex-direction:column; gap:9px; padding:14px;
  border-radius:16px; background:var(--bg-sub); }
.channel-template { display:flex; flex-direction:column; gap:8px; margin-top:2px; padding:12px;
  border:1px solid var(--line); border-radius:13px; background:color-mix(in srgb, var(--field) 72%, transparent); }
.channel-template .set-area.compact { min-height:58px; resize:vertical; }
.channel-primary { min-height:36px; padding:7px 14px; border-radius:999px; background:var(--ink);
  color:var(--bg); font-size:12px; font-weight:700; transition:opacity .15s, transform .12s; }
.channel-primary:hover { opacity:.88; }
.channel-primary:active { transform:scale(.98); }
.channel-primary:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.channel-approval p { margin:0; color:var(--ink); font-size:13px; line-height:1.5; }
.channel-approval-actions { display:flex; align-items:center; gap:8px; margin-top:3px; }
.channel-message-list { display:flex; flex-direction:column; gap:8px; }
.channel-message { max-width:92%; padding:10px 12px; border-radius:14px; background:var(--bg-sub); }
.channel-message.outbound { margin-left:auto; background:var(--field); }
.channel-message-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.channel-message-head b { color:var(--ink-2); font-size:12px; font-weight:650; }
.channel-message-head span { color:var(--ink-4); font-size:10px; text-transform:capitalize; }
.channel-message p { margin:5px 0 0; color:var(--ink); font-size:13px; line-height:1.5; white-space:pre-wrap; }
.channel-call { display:flex; align-items:center; gap:10px; padding:10px 11px; border:1px solid var(--line);
  border-radius:14px; background:var(--bg-sub); }
.channel-call-icon { width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--field); color:var(--ink-2); font-size:13px; }
.channel-call-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.channel-call-copy b { color:var(--ink); font-size:13px; font-weight:650; }
.channel-call-copy span { color:var(--ink-3); font-size:11px; line-height:1.35; }
.channel-call-composer { border:1px solid color-mix(in srgb, var(--focus) 16%, var(--line)); }
.rp-hint { color:var(--ink-3); font-size:13px; line-height:1.55; text-align:center; margin:auto 18px;
  padding-bottom:40px; }
.rp-sec { font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-4); padding:6px 2px 0; }
.app-catalog-search { display:block; }
.app-catalog-search input { width:100%; min-height:36px; padding:8px 11px; border:0;
  border-radius:10px; background:var(--dock-item); color:var(--ink); font:inherit; font-size:13px;
  outline:none; }
.app-catalog-search input::placeholder { color:var(--ink-4); }
.app-catalog-search input:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.app-library-tools { display:grid; grid-template-columns:minmax(0,1fr) 68px; gap:8px; align-items:stretch; }
.app-catalog-mcp { min-width:0; min-height:36px; display:flex; align-items:center; justify-content:center;
  gap:5px; padding:4px 7px; border-radius:10px; background:var(--dock-item); color:var(--ink-3);
  font-size:11px; font-weight:700; transition:color .14s, background .14s, transform .12s; }
.app-catalog-mcp .app-chip { width:26px; height:26px; border-radius:var(--radius-xs); background:var(--dock-surface);
  font-size:11px; }
.app-catalog-mcp:hover { color:var(--ink); background:var(--dock-active); }
.app-catalog-mcp:active { transform:scale(.98); }
.app-catalog-mcp:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.apps-panel { flex:1; min-height:0; display:grid;
  grid-template-rows:auto minmax(140px,auto) minmax(250px,1fr); gap:10px; }
.app-shelf { min-height:0; display:flex; flex-direction:column; gap:10px; padding:14px;
  border-radius:var(--radius); overflow:hidden; }
.app-shelf-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.app-shelf-head > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.app-shelf-head h2 { margin:0; color:var(--ink); font-size:15px; font-weight:680;
  letter-spacing:-.015em; }
.app-shelf-head > span { min-width:24px; height:24px; display:grid; place-items:center;
  border-radius:999px; background:var(--dock-item); color:var(--ink-3); font-family:var(--font-num);
  font-size:11px; }
.app-shelf-scroll { min-height:0; max-height:30vh; display:flex; flex-direction:column; gap:7px;
  overflow-y:auto; overscroll-behavior:contain; padding-right:2px; }
.app-shelf-empty { min-height:66px; display:grid; place-items:center; color:var(--ink-4);
  font-size:12px; text-align:center; }
.catalog-shelf { min-height:0; }
/* Two across, not three. Three left about 92px a tile, so every app name had to sit at 10.5px and
   the longer ones still clamped to two lines. The panel is the constraint, so the column count is
   what gives — not the reader. */
#app-catalog-results { min-height:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px; overflow-y:auto;
  overscroll-behavior:contain; padding:1px 2px 2px; }
.app-tile { min-width:0; min-height:104px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:7px; padding:10px 6px; border-radius:12px; background:var(--dock-item);
  color:var(--ink-2); text-align:center; transition:background .16s, color .16s, transform .14s; }
.app-tile:hover { background:var(--dock-active); color:var(--ink); transform:translateY(-1px); }
.app-tile:active { transform:scale(.985); }
.app-tile:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.app-tile .app-chip { width:36px; height:36px; border-radius:10px; background:var(--dock-surface);
  color:currentColor; font-size:11px; }
.app-tile.setup-pending .app-chip { color:var(--tone-note); }
.app-tile-name { flex:none; max-width:100%; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; color:currentColor; font-size:11px; line-height:1.25; font-weight:650;
  overflow-wrap:anywhere; }
.app-tile-state { flex:none; min-height:18px; display:inline-flex; align-items:center; padding:2px 7px;
  border-radius:999px; background:var(--dock-surface); color:var(--ink-4); font-size:11px;
  line-height:1; font-weight:700; }
.app-library-empty { grid-column:1/-1; min-height:62px; display:grid; place-items:center;
  color:var(--ink-4); font-size:11px; text-align:center; }
.mcp-registry-results { grid-column:1/-1; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mcp-registry-results:empty { display:none; }
.mcp-registry-status { grid-column:1/-1; min-height:48px; display:grid; place-items:center;
  padding:10px; color:var(--ink-4); font-size:11px; line-height:1.45; text-align:center; }
.mcp-registry-status.note { color:var(--tone-note); }
.mcp-registry-head { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:4px 2px 0; }
.mcp-registry-head span { color:var(--ink-2); font-size:11px; font-weight:650; }
.mcp-registry-head small { color:var(--ink-4); font-size:9px; }
.registry-mcp-card { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--signal) 16%,var(--line)); }
.registry-mcp-meta { margin-top:4px; color:var(--ink-4); font-family:var(--font-num);
  font-size:9px; letter-spacing:.02em; }
.registry-review-note { display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:12px; background:var(--field); }
.registry-review-note b { color:var(--ink-2); font-size:11px; font-weight:650; }
.registry-review-note span { max-width:68%; color:var(--ink-4); font-size:10px; line-height:1.4;
  text-align:right; overflow-wrap:anywhere; }
.app-trust-summary { margin:12px 0 2px; border-radius:12px; background:var(--field); overflow:hidden; }
.app-trust-summary summary { cursor:pointer; list-style:none; padding:10px 12px; color:var(--ink-2);
  font-size:12px; font-weight:650; }
.app-trust-summary summary::-webkit-details-marker { display:none; }
.app-trust-summary summary::after { content:"›"; float:right; color:var(--ink-4); transition:transform .12s; }
.app-trust-summary[open] summary::after { transform:rotate(90deg); }
.app-trust-summary > div { display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px;
  padding:0 12px 8px; font-size:11px; line-height:1.45; }
.app-trust-summary b { color:var(--ink-3); font-weight:650; }
.app-trust-summary span { color:var(--ink-2); overflow-wrap:anywhere; }
.app-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 11px; padding:10px 12px; border-radius:12px;
  background:var(--bg-sub); transition:background .18s, box-shadow .18s; }
.app-shelf .app-row { background:var(--dock-item); }
.app-row.just-connected { background:var(--bg-elev); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--focus) 42%, transparent); }
.app-chip { width:30px; height:30px; border-radius:8px; background:var(--field); color:var(--ink-2);
  display:grid; place-items:center; font-size:12px; font-weight:700; flex:none; }
.app-name { font-size:13px; font-weight:600; flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.app-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.app-main .app-name { flex:none; }
.app-status { font-size:11px; color:var(--ink-3); }
.app-description { display:-webkit-box; overflow:hidden; color:var(--ink-4); font-size:10px;
  line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.app-access { width:max-content; max-width:100%; padding:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-align:left; transition:color .12s; }
.app-access:hover { color:var(--ink); }
.app-access:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:3px; }
.app-row.needs-auth { cursor:pointer; }
.app-row.needs-auth:hover { background:var(--bg-elev); }
.app-row.needs-auth .app-status { color:var(--tone-note); }
.app-row:hover .file-del { opacity:1; }
.conn-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.conn-dot.ok { background:var(--tone-ok); }
.conn-dot.note { background:var(--tone-note); }
.code-block { font-family:var(--font-num); font-size:11px; line-height:1.6; background:var(--field);
  border-radius:var(--radius-sm); padding:10px 12px; word-break:break-all; white-space:pre-wrap;
  color:var(--ink-2); user-select:all; }
.app-connect { font-size:12px; font-weight:600; color:var(--ink-3); background:var(--field);
  border-radius:999px; padding:5px 12px; transition:color .12s; }
.app-connect:hover { color:var(--ink); }
.app-connect.on { color:var(--tone-ok); }
.app-permission-line { flex:0 0 calc(100% - 41px); margin-left:41px; min-width:0; }
.app-permission { display:inline-flex; align-items:center; gap:2px; max-width:100%; padding:2px;
  border-radius:999px; background:var(--bg-elev); }
.app-permission[aria-busy="true"] { opacity:.58; }
.app-permission-option { min-height:25px; padding:4px 9px; border-radius:999px; color:var(--ink-4);
  font-size:11px; line-height:1; font-weight:650; white-space:nowrap; transition:background .16s, color .16s, transform .12s; }
.app-permission-option:hover { color:var(--ink-2); }
.app-permission-option.on { background:var(--bg-sub); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.12); }
.app-permission-option:focus-visible, .app-permission-help:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.app-permission-option:active { transform:scale(.97); }
.app-permission-option:disabled { cursor:wait; }
.app-permission-help { position:relative; display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  color:var(--ink-4); font-family:var(--font-num); font-size:10px; font-weight:700; cursor:help; }
.app-permission-help:hover { color:var(--ink-2); background:var(--bg-sub); }
.app-permission-tooltip { position:absolute; z-index:8; right:-8px; top:calc(100% + 8px); width:210px;
  padding:8px 10px; border-radius:9px; background:var(--ink); color:var(--bg); box-shadow:0 10px 28px rgba(0,0,0,.28);
  font:600 11px/1.4 var(--font-ui); opacity:0; visibility:hidden; transform:translateY(4px); pointer-events:none;
  transition:opacity .14s, transform .14s, visibility .14s; }
.app-permission-help:hover .app-permission-tooltip,
.app-permission-help:focus-visible .app-permission-tooltip { opacity:1; visibility:visible; transform:translateY(0); }
.app-permission-static { display:inline-flex; align-items:center; min-height:25px; padding:4px 9px;
  border-radius:999px; background:var(--bg-elev); color:var(--ink-4); font-size:11px; font-weight:650; }
.toggle { display:inline-flex; align-items:center; flex:none; }
.toggle-tr { width:34px; height:20px; border-radius:11px; background:var(--field); position:relative;
  transition:background .16s; }
.app-row .toggle-tr { background:var(--bg-elev); }
.toggle-tr::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--ink-4); transition:transform .16s, background .16s; }
.toggle.on .toggle-tr { background:var(--tone-ok); }
.toggle.on .toggle-tr::after { transform:translateX(14px); background:#fff; }
.rp-note { font-size:11px; color:var(--ink-4); line-height:1.5; padding:2px 2px 8px; }
.support-intro { font-size:12px; line-height:1.55; color:var(--ink-3); padding:2px 2px 4px; }
.support-item { display:flex; flex-direction:column; gap:8px; padding:13px; border-radius:12px;
  background:var(--bg-sub); border:1px solid transparent; }
.support-item.terminal { opacity:.74; }
.support-item-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.support-kind { color:var(--ink-4); font-family:var(--font-num); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; }
.support-status { flex:none; padding:4px 7px; border-radius:999px; background:var(--field);
  color:var(--ink-3); font-size:10px; font-weight:700; }
.support-status.s-resolved { color:var(--tone-ok); }
.support-status.s-closed { color:var(--ink-4); }
.support-status.s-claimed, .support-status.s-repairing { color:var(--tone-note); }
.support-summary { color:var(--ink-2); font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.support-meta { color:var(--ink-4); font-family:var(--font-num); font-size:10px; }
.support-diag { border-top:1px solid color-mix(in srgb, var(--ink-4) 30%, transparent); padding-top:8px; }
.support-diag summary { color:var(--focus); font-size:11px; font-weight:650; cursor:pointer; list-style:none; }
.support-diag summary::-webkit-details-marker { display:none; }
.support-diag summary::before { content:"›"; display:inline-block; margin-right:5px; transition:transform .12s; }
.support-diag[open] summary::before { transform:rotate(90deg); }
.support-diag-metrics { margin:8px 0; }
.support-diag-summary { color:var(--ink-3); font-size:11px; line-height:1.45; margin:7px 0; }
.support-diag-foot { color:var(--ink-4); font-family:var(--font-num); font-size:9px; line-height:1.45; margin-top:7px; }
.pir-diagnostic { margin:10px 0 12px; padding:9px; border-radius:9px; background:var(--field); }
.pir-diagnostic-head { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink-3); font-size:11px; text-transform:capitalize; }
.pir-diagnostic-head b { color:var(--ink); }
.pir-finding { display:grid; grid-template-columns:auto 1fr; gap:2px 7px; margin-top:7px; padding-left:7px; border-left:2px solid var(--ink-4); }
.pir-finding span { color:var(--ink-4); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.pir-finding b { color:var(--ink-2); font-size:10px; font-weight:600; }
.pir-finding small { grid-column:2; color:var(--ink-4); font-size:9px; line-height:1.35; }
.pir-finding.critical, .pir-finding.high { border-left-color:var(--tone-flag); }
.pir-finding.medium { border-left-color:var(--tone-busy); }
.support-actions { min-height:26px; display:flex; align-items:center; justify-content:flex-end; }
.support-action { color:var(--ink-3); background:var(--field); border-radius:8px; padding:6px 9px;
  font-size:11px; font-weight:600; }
.support-action:hover { color:var(--ink); }
.support-action:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.support-active { color:var(--tone-note); font-size:11px; }
.rp-empty { color:var(--ink-3); font-size:13px; line-height:1.6; background:var(--bg-sub);
  border-radius:var(--radius); padding:16px 15px; }
.file-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
  background:var(--bg-sub); font-size:13px; }
.file-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:500; color:var(--ink); text-decoration:none; }
.file-name:hover { color:var(--focus); }
.file-meta { font-family:var(--font-num); font-size:11px; color:var(--ink-4); flex:none; }
.file-del { width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  color:var(--ink-4); font-size:11px; flex:none; opacity:0; transition:opacity .12s, color .12s; }
.file-row:hover .file-del { opacity:1; }
.file-del:hover { color:var(--tone-flag); background:var(--field); }
.vault-panel { flex:1; min-height:0; display:flex; flex-direction:column; gap:11px; }
.vault-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:1px 3px 4px; }
.vault-head > div:first-child { display:flex; flex-direction:column; gap:2px; }
.vault-head .rp-sec { padding:0; }
.vault-head h2 { margin:0; color:var(--ink); font-size:20px; line-height:1.2; font-weight:700; letter-spacing:-.025em; }
.vault-head-actions { display:flex; align-items:center; gap:5px; }
.vault-head-actions button { min-height:34px; padding:6px 10px; border-radius:9px; background:var(--dock-item);
  color:var(--ink-3); font-size:11px; font-weight:650; transition:color .12s ease, background .12s ease; }
.vault-head-actions button:hover { color:var(--ink); background:var(--dock-active); }
.vault-breadcrumbs { min-height:28px; display:flex; align-items:center; gap:3px; overflow-x:auto;
  scrollbar-width:none; white-space:nowrap; }
.vault-breadcrumbs::-webkit-scrollbar { display:none; }
.vault-breadcrumbs span { color:var(--ink-4); font-size:14px; }
.vault-breadcrumbs button { min-height:28px; max-width:140px; overflow:hidden; text-overflow:ellipsis;
  padding:4px 6px; border-radius:7px; color:var(--ink-3); font-size:11px; font-weight:600; }
.vault-breadcrumbs button:hover { color:var(--ink); background:var(--field); }
.vault-breadcrumbs button[aria-current="page"] { color:var(--ink); }
.vault-search { display:block; }
.vault-search input { width:100%; min-height:38px; border:0; border-radius:10px; padding:8px 12px;
  background:var(--dock-item); color:var(--ink); font:inherit; font-size:13px; outline:none; }
.vault-search input::placeholder { color:var(--ink-4); }
.vault-search input:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.vault-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:1px 2px 2px 0; }
.vault-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:8px; }
.vault-item { min-width:0; position:relative; border-radius:13px; background:var(--dock-item); text-align:left; }
.folder-card { min-height:76px; display:grid; grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center; gap:9px; padding:11px; transition:background .14s ease, transform .14s cubic-bezier(.22,1,.36,1); }
.folder-card:hover { background:var(--dock-active); transform:translateY(-1px); }
.vault-folder-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:9px;
  background:var(--dock-surface); color:var(--ink-2); }
.vault-folder-mark svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round; }
.vault-folder-arrow { color:var(--ink-4); font-size:17px; }
.file-card { min-height:172px; display:flex; flex-direction:column; overflow:hidden; }
.file-card[draggable="true"] { cursor:grab; }
.file-card[draggable="true"]:active { cursor:grabbing; }
.vault-preview { min-height:108px; flex:1; position:relative; display:grid; place-items:center; overflow:hidden;
  background:var(--dock-group); color:inherit; text-decoration:none; }
.vault-preview:is(button) { width:100%; border:0; cursor:pointer; }
.vault-preview img { position:absolute; inset:0; width:100%; height:100%; min-height:108px;
  object-fit:cover; display:block; }
.vault-preview img[hidden] { display:none; }
.vault-type { min-width:54px; min-height:54px; display:grid; place-items:center; padding:7px;
  border-radius:12px; background:var(--bg-elev); color:var(--ink-3); font-family:var(--font-num);
  font-size:9px; font-weight:700; letter-spacing:.04em; }
.vault-item-copy { min-width:0; display:flex; flex-direction:column; gap:2px; padding:9px 10px 10px; }
.vault-item-copy button { min-width:0; padding:0; border:0; background:transparent; color:inherit;
  text-align:left; cursor:pointer; }
.vault-item-copy b, .vault-item-copy a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink); font-size:12px; font-weight:650; text-decoration:none; }
.vault-item-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-4);
  font-size:10px; }
.vault-item-menu { position:absolute; top:7px; right:7px; width:28px; height:28px; display:grid;
  place-items:center; border-radius:8px; background:color-mix(in srgb,var(--bg) 82%,transparent);
  color:var(--ink-3); font-size:10px; opacity:0; transition:opacity .12s ease, color .12s ease; }
.file-card:hover .vault-item-menu, .vault-item-menu:focus-visible { opacity:1; }
.vault-item-menu:hover { color:var(--tone-flag); }
.vault-empty { min-height:220px; display:grid; place-content:center; gap:5px; padding:24px;
  border-radius:var(--radius); background:var(--bg-sub); text-align:center; }
.vault-empty b { color:var(--ink); font-size:13px; font-weight:650; }
.vault-empty span { max-width:240px; color:var(--ink-3); font-size:11px; line-height:1.5; }
.vault-onboarding { min-height:100%; display:flex; flex-direction:column; justify-content:center; gap:14px;
  padding:18px 2px 24px; }
.vault-onboarding-copy { display:flex; align-items:center; gap:11px; padding:0 2px; }
.vault-onboarding-copy > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.vault-onboarding-copy b { color:var(--ink); font-size:15px; font-weight:680; letter-spacing:-.015em; }
.vault-onboarding-copy span { color:var(--ink-3); font-size:11px; line-height:1.45; }
.vault-orb { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:13px;
  background:var(--field); color:var(--ink-2); }
/* ONE per row. Two across left about 90px for the label after the 34px mark and the chevron, so
   "Connect Google Drive" and "Connect Dropbox" both truncated to "Conne…" — two adjacent buttons
   with identical text and no way to tell which cloud you are about to sign in to. Full width fits
   the longest label outright, and it matches the icon + label + chevron row the project settings
   list already uses. */
.vault-source-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; }
.vault-source { min-width:0; min-height:68px; display:grid; grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center; gap:9px; padding:10px; border-radius:13px; background:var(--dock-item); color:var(--ink-2);
  text-align:left; transition:background .14s ease, transform .14s cubic-bezier(.22,1,.36,1); }
.vault-source:hover { background:var(--dock-active); transform:translateY(-1px); }
.vault-source:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.vault-source-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  background:var(--dock-surface); color:var(--ink-2); }
.vault-source > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:2px; }
.vault-source b { overflow:hidden; color:var(--ink); font-size:11px; font-weight:660; text-overflow:ellipsis; white-space:nowrap; }
.vault-source small { color:var(--ink-4); font-size:11px; line-height:1.35; }
.vault-source i { color:var(--ink-4); font-size:17px; font-style:normal; }
.vault-source.unavailable { opacity:.62; }
.vault-source.compact { min-height:48px; grid-template-columns:30px minmax(0,1fr) auto; padding:7px 8px; border-radius:11px; background:transparent; }
.vault-source.compact:hover { transform:none; background:var(--field); }
.vault-source.compact .vault-source-mark { width:30px; height:30px; border-radius:9px; }
.vault-source.compact .vault-source-mark svg { width:17px; height:17px; }
.vault-dropzone { min-height:82px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:13px; border:1px dashed color-mix(in srgb,var(--ink-4) 35%,transparent);
  border-radius:14px; color:var(--ink-3); text-align:center; cursor:pointer;
  transition:border-color .14s ease, background .14s ease; }
.vault-dropzone:hover { border-color:var(--focus); background:color-mix(in srgb,var(--focus) 5%,transparent); }
.vault-dropzone span { font-size:11px; font-weight:650; }
.vault-dropzone small { color:var(--ink-4); font-size:11px; line-height:1.4; text-align:center; }
.vault-modal-sources { display:flex; flex-direction:column; gap:6px; }
.vault-modal-sources .vault-source { min-height:54px; }
.vault-import-destination { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 11px; border-radius:10px; background:var(--field); }
.vault-import-destination span { color:var(--ink-4); font-size:10px; }
.vault-import-destination b { overflow:hidden; color:var(--ink-2); font-size:10px; font-weight:650;
  text-overflow:ellipsis; white-space:nowrap; }
.vault-import-review { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:9px;
  padding:10px; border-radius:12px; background:var(--field); }
.vault-import-review > span:last-child { min-width:0; display:flex; flex-direction:column; gap:2px; }
.vault-import-review b { overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.vault-import-review small { color:var(--ink-4); font-size:10px; }
.vault-import-items { max-height:180px; margin-top:7px; overflow:auto; border-radius:11px;
  background:var(--bg-sub); scrollbar-width:thin; }
.vault-import-items > div { min-height:34px; display:grid; grid-template-columns:42px minmax(0,1fr);
  align-items:center; gap:8px; padding:7px 9px; border-bottom:1px solid color-mix(in srgb,var(--ink-4) 13%,transparent); }
.vault-import-items > div:last-child { border-bottom:0; }
.vault-import-items span { color:var(--ink-4); font-size:9px; font-weight:700; text-transform:uppercase; }
.vault-import-items b { overflow:hidden; color:var(--ink-2); font-size:10px; font-weight:580;
  text-overflow:ellipsis; white-space:nowrap; }
.vault-import-warning { margin:8px 1px 0; color:var(--tone-busy); font-size:10px; line-height:1.4; }
.vault-add { background:var(--field); color:var(--ink-3); border-radius:9px; padding:9px 12px;
  font-size:13px; font-weight:600; text-align:center; transition:color .12s; }
.vault-add:hover { color:var(--ink); }
.rpanel.drop-hot { outline:2px dashed var(--focus); outline-offset:-8px; border-radius:var(--radius-lg); }

/* Settings fields (shared: right panel + modals) */
.settings-home { display:flex; flex-direction:column; gap:10px; }
.settings-home-head { display:flex; flex-direction:column; gap:2px; padding:1px 3px 4px; }
.settings-home-head .rp-sec { padding:0; }
.settings-home-head h2, .settings-detail-head h2 { margin:0; color:var(--ink);
  font-size:20px; line-height:1.2; font-weight:700; letter-spacing:-.025em; }
.settings-home-head p, .settings-detail-head p { margin:0; color:var(--ink-3);
  font-size:12px; line-height:1.45; }
.settings-grid { display:grid; grid-template-columns:1fr; gap:6px; }
.settings-card { min-width:0; min-height:62px; display:grid; grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center; gap:11px; padding:10px 12px; border-radius:14px; background:var(--dock-item);
  text-align:left; transition:background .15s ease, transform .15s cubic-bezier(.22,1,.36,1); }
.settings-card:hover { background:var(--dock-active); transform:translateY(-1px); }
.settings-card-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:9px;
  background:var(--dock-surface); color:var(--ink-2); }
.settings-card-mark svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round; }
.settings-card-copy { min-width:0; display:flex; align-items:center; }
.settings-card-copy b { color:var(--ink); font-size:13px; font-weight:670; }
.settings-card-arrow { color:var(--ink-4); font-size:18px; line-height:1.4; transition:transform .14s ease; }
.settings-card:hover .settings-card-arrow { color:var(--ink-2); transform:translateX(2px); }
.settings-detail { display:flex; flex-direction:column; gap:17px; outline:none; }
.settings-back { width:max-content; min-height:32px; display:inline-flex; align-items:center; gap:5px;
  border-radius:8px; padding:4px 8px 4px 5px; color:var(--ink-3); font-size:12px;
  font-weight:620; transition:color .12s ease, background .12s ease; }
.settings-back:hover { color:var(--ink); background:var(--field); }
.settings-back:first-letter { font-size:18px; }
.settings-detail-head { display:flex; flex-direction:column; gap:4px; }
.settings-detail-body { display:flex; flex-direction:column; gap:14px; }
.project-tool-visibility { display:flex; flex-direction:column; gap:9px; padding:12px;
  border-radius:14px; background:var(--bg-sub); }
.project-tool-visibility-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.project-tool-visibility-head .set-hint { font-size:10px; }
.project-tool-toggle-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.project-tool-toggle { min-height:38px; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:7px 9px 7px 11px; border-radius:11px; background:var(--field); color:var(--ink-3);
  font-size:11px; font-weight:630; text-align:left; transition:background .16s ease,color .16s ease; }
.project-tool-toggle:hover { background:var(--bg-elev); color:var(--ink); }
.project-tool-toggle i { width:28px; height:17px; flex:none; display:flex; align-items:center; padding:2px;
  border-radius:999px; background:color-mix(in srgb,var(--ink-4) 28%,transparent);
  transition:background .18s ease; }
.project-tool-toggle i b { width:13px; height:13px; display:block; border-radius:50%; background:var(--ink-3);
  transform:translateX(0); transition:transform .2s cubic-bezier(.22,1,.36,1),background .18s ease; }
.project-tool-toggle.on { color:var(--ink); }
.project-tool-toggle.on i { background:color-mix(in srgb,var(--tone-ok) 72%,var(--field)); }
.project-tool-toggle.on i b { background:#fff; transform:translateX(11px); }
.project-tool-toggle:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.invoice-panel { display:flex; flex-direction:column; gap:12px; }
.invoice-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.invoice-panel-head > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.invoice-panel-head .rp-sec { padding:0; }
.invoice-panel-head h2 { margin:0; color:var(--ink); font-size:20px; font-weight:700; letter-spacing:-.025em; }
.invoice-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.invoice-summary > div { display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:13px;
  background:var(--bg-sub); }
.invoice-summary span { color:var(--ink-4); font-size:9px; font-weight:700; letter-spacing:.045em;
  text-transform:uppercase; }
.invoice-summary b { overflow:hidden; color:var(--ink); font-family:var(--font-num); font-size:16px;
  font-weight:680; text-overflow:ellipsis; white-space:nowrap; }
.invoice-list { display:flex; flex-direction:column; gap:6px; }
.invoice-row { min-width:0; min-height:62px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 12px; border-radius:13px; background:var(--bg-sub); text-align:left;
  transition:background .15s ease,transform .15s cubic-bezier(.22,1,.36,1); }
.invoice-row:hover { background:var(--bg-elev); transform:translateY(-1px); }
.invoice-row > span { min-width:0; display:flex; flex-direction:column; gap:3px; }
.invoice-row > span:last-child { align-items:flex-end; }
.invoice-row b { overflow:hidden; color:var(--ink); font-size:12px; font-weight:660;
  text-overflow:ellipsis; white-space:nowrap; }
.invoice-row small { overflow:hidden; color:var(--ink-4); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.invoice-status { width:max-content; color:var(--ink-4); font-size:9px; font-style:normal; font-weight:740;
  letter-spacing:.045em; text-transform:uppercase; }
.invoice-status.paid { color:var(--tone-ok); }
.invoice-status.overdue,.invoice-status.void { color:var(--tone-flag); }
.invoice-status.sent,.invoice-status.viewed,.invoice-status.partial { color:var(--signal); }
.invoice-empty { min-height:150px; display:grid; place-content:center; gap:4px; padding:18px;
  border-radius:14px; background:var(--bg-sub); text-align:center; }
.invoice-empty b { color:var(--ink); font-size:12px; }
.invoice-empty span { max-width:230px; color:var(--ink-4); font-size:10px; line-height:1.45; }
.invoice-editor { display:flex; flex-direction:column; gap:11px; padding:13px; border-radius:15px; background:var(--bg-sub); }
.invoice-editor-head,.invoice-lines-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.invoice-editor-head > div { display:flex; align-items:center; gap:8px; }
.invoice-editor-head h3 { margin:0; color:var(--ink); font-size:14px; font-weight:680; }
.invoice-close { width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  color:var(--ink-4); font-size:10px; }
.invoice-close:hover { background:var(--field); color:var(--ink); }
.invoice-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.invoice-field-grid.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
.invoice-field-grid label,.invoice-line label { min-width:0; display:flex; flex-direction:column; gap:4px; }
.invoice-field-grid label > span,.invoice-line label > span,.invoice-note > span { color:var(--ink-4);
  font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.invoice-client-block,.invoice-note { display:flex; flex-direction:column; gap:6px; }
.invoice-lines-head button { color:var(--ink-3); font-size:10px; font-weight:650; }
.invoice-lines-head button:hover { color:var(--ink); }
.invoice-lines { display:flex; flex-direction:column; gap:6px; }
.invoice-line { display:grid; grid-template-columns:minmax(0,1fr) 54px 76px 24px; align-items:end; gap:5px; }
.invoice-line-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
.invoice-line .set-input { padding:8px 9px; font-size:11px; }
.invoice-line .invoice-unit { margin-top:4px; padding:5px 6px; font-size:9px; }
.invoice-line .subtle-input { color:var(--ink-3); }
.invoice-line-remove { width:24px; height:31px; display:grid; place-items:center; border-radius:8px;
  color:var(--ink-4); font-size:16px; }
.invoice-line-remove:hover { background:var(--field); color:var(--tone-flag); }
.invoice-editor-actions { display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding-top:2px; }
.invoice-editor-actions .btn { padding:7px 10px; font-size:10px; text-decoration:none; }
.invoice-defaults { margin-top:2px; }
.invoice-defaults .set-input { padding:8px 10px; font-size:11px; }
@media (max-width:520px) {
  .project-tool-toggle-list,.invoice-field-grid,.invoice-field-grid.compact { grid-template-columns:1fr; }
  .invoice-line { grid-template-columns:minmax(0,1fr) 52px 70px 24px; }
}
.settings-disclosure { border-radius:13px; background:var(--bg-sub); overflow:hidden; }
.settings-disclosure summary { min-height:44px; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; list-style:none; padding:11px 13px; color:var(--ink-2); font-size:12px;
  font-weight:650; }
.settings-disclosure summary::-webkit-details-marker { display:none; }
.settings-disclosure summary::after { content:"›"; color:var(--ink-4); font-size:17px;
  transition:transform .14s ease; }
.settings-disclosure[open] summary::after { transform:rotate(90deg); }
.settings-disclosure-body { display:flex; flex-direction:column; gap:8px; padding:0 13px 13px; }
.danger-disclosure summary { color:var(--tone-flag); }
.set-field { display:flex; flex-direction:column; gap:7px; }
.set-label { font-size:12px; font-weight:600; color:var(--ink-2); }
/* One consent signal, learned once and shown wherever Genesis could act outward.
   Replaces the per-panel paragraphs that each restated the same guarantee in
   different words; the full sentence stays available to screen readers. */
.consent-mark { display:inline-flex; align-items:center; gap:4px; flex:none;
  color:var(--ink-4); font-size:11px; font-weight:500; }
.consent-mark svg { width:11px; height:11px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.context-help { border-radius:11px; background:color-mix(in srgb, var(--field) 62%, transparent); }
.context-help summary { min-height:36px; display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; cursor:pointer; list-style:none; color:var(--ink-3); font-size:11px;
  font-weight:650; }
.context-help summary::-webkit-details-marker { display:none; }
.context-help summary::after { content:"›"; color:var(--ink-4); font-size:16px;
  transition:transform .14s ease; }
.context-help[open] summary::after { transform:rotate(90deg); }
.context-help p { margin:0; padding:0 10px 10px; color:var(--ink-3); font-size:11px;
  line-height:1.5; }
.context-help summary:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.set-input { width:100%; background:var(--field); border:0; border-radius:var(--radius-sm); padding:10px 12px;
  font:inherit; font-size:13px; color:var(--ink); }
.set-input:focus { outline:2px solid var(--focus); }
.set-hint { font-size:11px; color:var(--ink-4); line-height:1.45; }
.publishing-panel { gap:12px; padding:13px; border-radius:14px;
  background:color-mix(in srgb, var(--signal) 4%, var(--field)); }
.publishing-head, .publishing-section-title, .publishing-domain-title {
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.publishing-head > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.publishing-head .app-connect { flex:none; }
.publishing-section { display:flex; flex-direction:column; gap:7px; padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--ink-4) 22%, transparent); }
.publishing-section-title span, .publishing-dns-title { color:var(--ink-3); font-size:10px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.publishing-section-title small { color:var(--ink-4); font-family:var(--font-num); font-size:9px; }
.publishing-page-row, .publishing-release-row { display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:10px; background:var(--bg-sub); }
.publishing-page-main, .publishing-release-row > span:first-child { min-width:0; flex:1;
  display:flex; flex-direction:column; gap:3px; }
.publishing-page-main > div { display:flex; align-items:center; gap:6px; min-width:0; }
.publishing-page-main b, .publishing-release-row b { min-width:0; overflow:hidden;
  color:var(--ink-2); font-size:12px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.publishing-page-main small, .publishing-release-row small { overflow:hidden; color:var(--ink-4);
  font-family:var(--font-num); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.publishing-pill { flex:none; padding:3px 6px; border-radius:999px; background:var(--field);
  color:var(--ink-4); font-family:var(--font-num); font-size:8px; font-weight:750;
  letter-spacing:.03em; text-transform:uppercase; }
.publishing-pill.live { color:var(--tone-ok); }
.publishing-row-actions { display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.publishing-row-actions button, .publishing-release-row button, .publishing-dns-row button {
  padding:4px 6px; border-radius:6px; background:transparent; color:var(--ink-4);
  font-size:10px; font-weight:650; }
.publishing-row-actions button:hover, .publishing-release-row button:hover,
.publishing-dns-row button:hover { background:var(--field); color:var(--ink); }
.publishing-row-actions button.danger:hover { color:var(--tone-flag); }
.publishing-empty { padding:11px; border-radius:10px; background:var(--bg-sub);
  color:var(--ink-4); font-size:11px; line-height:1.45; }
.publishing-preview { padding:10px; display:flex; flex-direction:column; align-items:flex-start;
  gap:8px; border-radius:10px; background:var(--bg-sub); }
.publishing-preview > span { color:var(--ink-4); font-family:var(--font-num); font-size:9px; }
.publishing-preview-links { display:flex; gap:6px; flex-wrap:wrap; }
.publishing-preview-links a { padding:5px 8px; border-radius:7px; background:var(--field);
  color:var(--focus); font-size:10px; font-weight:650; text-decoration:none; }
.publishing-domain-connect { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.publishing-domain-card { display:flex; flex-direction:column; gap:8px; padding:11px;
  border-radius:11px; background:var(--bg-sub); }
.publishing-domain-title a { min-width:0; overflow:hidden; color:var(--ink-2); font-size:12px;
  font-weight:650; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.publishing-domain-card p { margin:0; color:var(--ink-3); font-size:10px; line-height:1.45; }
.publishing-domain-card code { color:var(--ink-2); font-family:var(--font-num); font-size:10px;
  overflow-wrap:anywhere; user-select:all; }
.publishing-dns-title { margin-top:3px; }
.publishing-dns-row { display:grid; grid-template-columns:auto minmax(0,.75fr) minmax(0,1fr) auto;
  align-items:center; gap:6px; padding:7px; border-radius:8px; background:var(--field); }
.publishing-dns-row > span { color:var(--tone-note); font-family:var(--font-num); font-size:8px; font-weight:750; }
.domain-actions { padding-top:4px; }
.publishing-history { border-top:1px solid color-mix(in srgb, var(--ink-4) 22%, transparent); }
.publishing-history summary { padding:10px 0 2px; cursor:pointer; color:var(--ink-3);
  font-size:11px; font-weight:650; }
.publishing-history .publishing-release-row { margin-top:6px; }
.publishing-check { display:flex; align-items:center; gap:8px; color:var(--ink-3); font-size:11px; }
.publishing-check input { width:17px; height:17px; accent-color:var(--signal); }
.publishing-panel button:disabled { cursor:not-allowed; opacity:.42; }
.publishing-panel button:focus-visible, .publishing-panel a:focus-visible,
.publishing-panel input:focus-visible, .publishing-panel summary:focus-visible {
  outline:2px solid var(--focus); outline-offset:2px; }
.operator-panel { gap:12px; padding:13px; border-radius:14px;
  background:color-mix(in srgb, var(--focus) 4%, var(--field)); }
.operator-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.operator-head > div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.operator-status { flex:none; padding:4px 7px; border-radius:999px; background:var(--field);
  color:var(--ink-4); font-family:var(--font-num); font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; }
.operator-panel[data-operator-state="active"] .operator-status { color:var(--tone-ok); }
.operator-panel[data-operator-state="killed"] .operator-status { color:var(--tone-flag); }
.operator-authority { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px;
  overflow:hidden; border-radius:10px; background:var(--field); }
.operator-authority > div { min-width:0; min-height:34px; padding:7px; display:flex;
  align-items:center; justify-content:center; background:var(--bg-sub); }
.operator-authority span { overflow:hidden; color:var(--ink-4); font-family:var(--font-num);
  font-size:8px; font-weight:750; letter-spacing:.04em; text-overflow:ellipsis;
  text-transform:uppercase; white-space:nowrap; }
.operator-authority .on span { color:var(--tone-ok); }
.operator-authority .review span { color:var(--tone-note); }
.operator-authority .locked { background:color-mix(in srgb, var(--tone-flag) 5%, var(--bg-sub)); }
.operator-authority .locked span { color:var(--tone-flag); }
.operator-copy { margin:0; color:var(--ink-3); font-size:11px; line-height:1.55; }
.operator-primary { align-self:flex-start; }
.operator-form { display:flex; flex-direction:column; gap:10px; }
.operator-form > label, .operator-form-pair label, .operator-form-more > label,
.operator-hours label { display:flex; min-width:0; flex-direction:column; gap:5px;
  color:var(--ink-3); font-size:10px; font-weight:650; }
.operator-form-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.operator-form-more { padding-top:8px; border-top:1px solid var(--field); }
.operator-form-more > summary { cursor:pointer; list-style:none; color:var(--ink-2);
  font-size:12px; font-weight:650; }
.operator-form-more > summary::-webkit-details-marker { display:none; }
.operator-form-more > summary::after { content:"＋"; float:right; color:var(--ink-4); }
.operator-form-more[open] > summary::after { content:"−"; }
.operator-form-more[open] { display:flex; flex-direction:column; gap:9px; }
.operator-form-more[open] > summary { margin-bottom:2px; }
.operator-hours-toggle { flex-direction:row !important; align-items:center; }
.operator-hours-toggle input, .operator-ack input, .operator-routines input {
  accent-color:var(--signal); }
.operator-channels { display:flex; flex-direction:column; gap:7px; padding:10px;
  border-radius:12px; background:var(--bg-sub); }
.operator-channels > span { color:var(--ink-2); font-size:11px; font-weight:650; }
.operator-channels > div { display:flex; flex-wrap:wrap; gap:6px; }
.operator-channels label { display:inline-flex; align-items:center; gap:5px; min-height:28px;
  padding:5px 8px; border:1px solid var(--line); border-radius:999px; color:var(--ink-3);
  font-size:10px; font-weight:600; background:var(--field); }
.operator-channels input { width:12px; height:12px; margin:0; accent-color:var(--signal); }
.operator-channels small { color:var(--ink-4); font-size:9px; line-height:1.45; }
.operator-channel-summary { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.operator-channel-summary span, .operator-channel-summary b { padding:4px 7px; border-radius:999px;
  background:var(--field); color:var(--ink-3); font-size:9px; font-weight:650; }
.operator-channel-summary b { margin-left:auto; color:var(--tone-note); }
.operator-hours { display:grid; grid-template-columns:76px 76px minmax(0,1fr); gap:7px; }
.operator-routines { display:flex; flex-direction:column; gap:6px; padding:9px;
  border-radius:10px; background:var(--bg-sub); }
.operator-routines > span { color:var(--ink-3); font-size:10px; font-weight:650; }
.operator-routines label { display:flex; align-items:flex-start; gap:7px; color:var(--ink-2);
  font-size:11px; font-weight:500; }
.operator-routines small { color:var(--ink-4); font-size:10px; line-height:1.4; }
.operator-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.operator-actions button, .operator-preview-button, .operator-activate {
  min-height:32px; padding:6px 10px; border-radius:9px; background:var(--field);
  color:var(--ink-3); font-size:11px; font-weight:650; }
.operator-actions button:hover, .operator-preview-button:hover, .operator-activate:hover {
  color:var(--ink); }
.operator-preview-button, .operator-activate { align-self:flex-start; background:var(--ink);
  color:var(--bg); }
.operator-preview-button:hover, .operator-activate:hover { color:var(--bg); opacity:.9; }
.operator-activate:disabled { cursor:not-allowed; opacity:.34; }
.operator-stop-button { color:var(--tone-flag) !important; }
.operator-preview-running { display:grid; grid-template-columns:12px minmax(0,1fr); gap:9px;
  align-items:start; padding:11px; border-radius:11px; background:var(--bg-sub); }
.operator-preview-running > div { display:flex; flex-direction:column; gap:3px; }
.operator-preview-running b { color:var(--ink-2); font-size:11px; }
.operator-preview-running span { color:var(--ink-4); font-size:10px; line-height:1.4; }
.operator-pulse { width:9px; height:9px; margin-top:3px; border-radius:50%;
  background:var(--tone-busy); animation:operator-pulse 1.4s ease-in-out infinite; }
@keyframes operator-pulse { 50% { opacity:.32; transform:scale(.82); } }
.operator-identity { display:flex; align-items:center; gap:9px; min-width:0; }
.operator-identity > span { width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--field); color:var(--ink); font-size:12px; font-weight:700; }
.operator-identity > div { min-width:0; display:flex; flex-direction:column; gap:1px; }
.operator-identity b { overflow:hidden; color:var(--ink); font-size:12px; text-overflow:ellipsis;
  white-space:nowrap; }
.operator-identity small { overflow:hidden; color:var(--ink-4); font-family:var(--font-num);
  font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.operator-scenarios { display:flex; flex-direction:column; gap:3px; }
.operator-scenarios > div { display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:6px;
  align-items:center; min-height:30px; padding:5px 7px; border-radius:8px; background:var(--bg-sub); }
.operator-scenarios > div > span { color:var(--tone-ok); font-weight:750; }
.operator-scenarios b { overflow:hidden; color:var(--ink-2); font-size:10px; font-weight:600;
  text-overflow:ellipsis; white-space:nowrap; }
.operator-scenarios small { color:var(--ink-4); font-family:var(--font-num); font-size:8px;
  text-transform:uppercase; }
.operator-scenarios [data-state="blocked"] > span { color:var(--tone-flag); }
.operator-proof { padding:8px 9px; border-radius:9px; color:var(--tone-ok);
  background:color-mix(in srgb, var(--tone-ok) 7%, var(--bg-sub)); font-family:var(--font-num);
  font-size:9px; font-weight:650; line-height:1.4; }
.operator-blockers { display:flex; flex-direction:column; gap:4px; }
.operator-blockers span { padding:7px 8px; border-radius:8px;
  background:color-mix(in srgb, var(--tone-note) 7%, var(--bg-sub));
  color:var(--tone-note); font-size:10px; line-height:1.4; }
.operator-ack { display:flex; align-items:flex-start; gap:7px; color:var(--ink-3);
  font-size:10px; line-height:1.4; }
.operator-ack input { margin-top:2px; }
.operator-disclosure { display:flex; flex-direction:column; gap:3px; padding:9px;
  border-radius:9px; background:var(--bg-sub); }
.operator-disclosure span { color:var(--ink-4); font-family:var(--font-num); font-size:8px;
  font-weight:700; text-transform:uppercase; }
.operator-disclosure b { color:var(--ink-2); font-size:10px; font-weight:550; line-height:1.4; }
.artifact-operator-profile { display:flex; flex-direction:column; gap:10px; margin-top:12px;
  padding:12px; border-radius:12px; background:var(--bg-sub); }
.artifact-operator-profile > p { margin:0; color:var(--ink-2); font-size:11px; line-height:1.5; }
.artifact-operator-profile > button { align-self:flex-start; min-height:36px; padding:7px 10px;
  border-radius:9px; background:var(--field); color:var(--ink-2); font-size:11px;
  font-weight:650; }
.artifact-operator-profile > button:hover,
.artifact-operator-profile > button:focus-visible { color:var(--ink); }
.artifact-operator-profile > button:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.artifact-operator-meta { display:flex; flex-wrap:wrap; gap:5px; }
.artifact-operator-meta span { padding:5px 7px; border-radius:999px; background:var(--field);
  color:var(--ink-4); font-family:var(--font-num); font-size:8px; font-weight:650;
  text-transform:uppercase; }
.operator-capabilities { display:flex; flex-direction:column; gap:3px; }
.operator-capabilities > div { display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 8px; border-radius:8px; background:var(--bg-sub); }
.operator-capabilities span { min-width:0; overflow:hidden; color:var(--ink-2); font-size:10px;
  text-overflow:ellipsis; white-space:nowrap; }
.operator-capabilities b { flex:none; color:var(--ink-4); font-size:9px; font-weight:650; }
.operator-stop { display:flex; flex-direction:column; gap:3px; padding:9px; border-radius:9px;
  background:color-mix(in srgb, var(--tone-flag) 7%, var(--bg-sub)); }
.operator-stop b { color:var(--tone-flag); font-size:11px; }
.operator-stop span { color:var(--ink-3); font-size:10px; line-height:1.4; }
.standing-work-panel { gap:10px; padding:13px; border-radius:14px;
  background:color-mix(in srgb, var(--field) 56%, transparent); }
.standing-work-panel, .people-panel { scroll-margin-top:12px; }
.standing-work-panel:focus-visible, .people-panel:focus-visible { outline:1px solid
  color-mix(in srgb, var(--focus) 45%, transparent); outline-offset:2px; }
.standing-work-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.standing-work-head > div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.standing-availability { flex:none; padding:4px 7px; border-radius:999px; background:var(--field);
  color:var(--ink-4); font-family:var(--font-num); font-size:9px; font-weight:700; white-space:nowrap; }
.standing-availability.on { color:var(--tone-ok); }
/* Per-project heartbeat: a calm switch + cadence, one tonal step above the panel. */
.standing-heartbeat { display:flex; flex-direction:column; gap:8px; padding:11px 12px;
  border-radius:12px; background:var(--bg-sub); }
.standing-heartbeat-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.standing-heartbeat-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.standing-heartbeat-copy b { font-size:13px; font-weight:650; color:var(--ink); }
.standing-heartbeat-copy span { font-size:11px; color:var(--ink-4); line-height:1.4; }
.hb-switch { flex:none; width:40px; height:24px; border-radius:999px; background:var(--bg-elev);
  padding:2px; cursor:pointer; transition:background var(--ui-motion); }
.hb-switch .hb-knob { display:block; width:20px; height:20px; border-radius:50%; background:var(--thumb);
  box-shadow:0 1px 2px rgba(0,0,0,.28); transition:transform var(--ui-motion); }
.standing-heartbeat.on .hb-switch { background:var(--tone-ok); }
.standing-heartbeat.on .hb-switch .hb-knob { transform:translateX(16px); }
.hb-switch:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.standing-heartbeat-cadence { display:flex; align-items:center; gap:8px; }
.standing-heartbeat-cadence span { font-size:11px; color:var(--ink-3); flex:none; }
.standing-heartbeat-cadence .set-input { width:auto; min-width:120px; }
.routine-intent-card { width:100%; min-height:48px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px;
  background:var(--bg-sub); color:var(--ink-2); font-size:12px; font-weight:650;
  text-align:left; transition:background .15s ease, transform .15s var(--ui-motion-curve); }
.routine-intent-card:hover { background:var(--bg-elev); transform:translateY(-1px); }
.routine-intent-card span:last-child { color:var(--ink-4); font-size:18px; font-weight:400; }
.standing-program { display:flex; flex-direction:column; gap:7px; padding:11px; border:1px solid var(--line);
  border-radius:12px; background:var(--bg-sub); }
.standing-program[data-state="active"] { border-color:color-mix(in srgb, var(--tone-ok) 35%, var(--line)); }
.standing-program[data-state="blocked"] { border-color:color-mix(in srgb, var(--tone-flag) 35%, var(--line)); }
.standing-program-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.standing-program-head > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.standing-program-head b { overflow:hidden; color:var(--ink); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.standing-program-head span { color:var(--ink-4); font-family:var(--font-num); font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; }
.standing-program-head time { flex:none; color:var(--ink-4); font-family:var(--font-num); font-size:9px; }
.standing-program p { margin:0; color:var(--ink-2); font-size:11px; line-height:1.45; }
.standing-program-meta { color:var(--ink-4); font-size:10px; line-height:1.35; }
.standing-blocker { padding:7px 8px; border-radius:8px; background:color-mix(in srgb, var(--tone-flag) 9%, var(--field));
  color:var(--tone-flag); font-size:10px; line-height:1.4; }
.standing-program-actions { display:flex; flex-wrap:wrap; gap:5px; }
.standing-program-actions button, .standing-kill button { min-height:30px; padding:5px 9px; border-radius:8px;
  background:var(--field); color:var(--ink-3); font-size:11px; font-weight:650; }
.standing-program-actions button:hover, .standing-program-actions button:focus-visible,
.standing-kill button:hover, .standing-kill button:focus-visible { color:var(--ink); }
.standing-program-actions button:focus-visible, .standing-kill button:focus-visible {
  outline:2px solid var(--focus); outline-offset:1px; }
.standing-program-actions .standing-retire { margin-left:auto; color:var(--ink-4); }
.standing-kill { display:flex; flex-direction:column; gap:4px; padding:10px; border-radius:10px; background:var(--field); }
.standing-kill b { color:var(--tone-flag); font-size:12px; }
.standing-kill span { color:var(--ink-3); font-size:11px; line-height:1.4; }
.standing-kill button { align-self:flex-start; margin-top:3px; }
.standing-stop { font-size:11px; padding:7px 10px; }
.standing-create, .standing-history { border-top:1px solid var(--line); padding-top:8px; }
.standing-create > summary, .standing-history > summary { cursor:pointer; list-style:none; color:var(--ink-2);
  font-size:12px; font-weight:650; }
.standing-create > summary::-webkit-details-marker,
.standing-history > summary::-webkit-details-marker { display:none; }
.standing-create > summary::after, .standing-history > summary::after { content:"＋"; float:right; color:var(--ink-4); }
.standing-create[open] > summary::after, .standing-history[open] > summary::after { content:"−"; }
.standing-create-fields { display:flex; flex-direction:column; gap:9px; padding-top:10px; }
.standing-create-fields label { display:flex; flex-direction:column; gap:5px; color:var(--ink-3); font-size:10px; font-weight:650; }
.standing-create-fields select { appearance:auto; }
.standing-starter { margin:0; }
.standing-starter-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 12px 10px;
}
.standing-starter-actions .app-connect,
.standing-starter-actions .danger-btn,
.standing-starter-actions .quiet-btn { margin:0; }
.standing-history-row { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:8px;
  padding:8px 1px; border-bottom:1px solid var(--line); }
.standing-history-row:last-child { border-bottom:0; }
.standing-history-row > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.standing-history-row b { overflow:hidden; color:var(--ink-2); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.standing-history-row small { overflow:hidden; color:var(--ink-4); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.standing-history-row time { color:var(--ink-4); font-family:var(--font-num); font-size:9px; }
.standing-history-dot { width:7px; height:7px; border-radius:50%; background:var(--ink-4); }
.standing-history-dot.completed { background:var(--tone-ok); }
.standing-history-dot.failed, .standing-history-dot.blocked { background:var(--tone-flag); }
.standing-history-dot.materialized, .standing-history-dot.due { background:var(--tone-busy); }
.execution-pilot-panel { gap:10px; padding:13px; border:1px solid color-mix(in srgb, var(--focus) 22%, var(--line));
  border-radius:14px; background:color-mix(in srgb, var(--focus) 4%, var(--field)); }
.quality-program-panel { gap:10px; padding:13px; border:1px solid color-mix(in srgb, var(--tone-ok) 24%, var(--line));
  border-radius:14px; background:color-mix(in srgb, var(--tone-ok) 4%, var(--field)); }
.quality-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.quality-metrics > div { display:flex; min-width:0; flex-direction:column; gap:2px; padding:8px;
  border:1px solid var(--line); border-radius:9px; background:var(--bg-sub); }
.quality-metrics b { color:var(--ink); font-family:var(--font-num); font-size:11px; }
.quality-metrics span { color:var(--ink-4); font-size:9px; line-height:1.3; }
.execution-pilot-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.execution-pilot-head > div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.execution-alpha { flex:none; padding:4px 7px; border-radius:999px; background:color-mix(in srgb, var(--focus) 10%, var(--field));
  color:var(--focus); font-family:var(--font-num); font-size:9px; font-weight:700; white-space:nowrap; }
.execution-lanes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.execution-lanes > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 7px; padding:9px;
  border:1px solid var(--line); border-radius:10px; background:var(--bg-sub); }
.execution-lanes b { overflow:hidden; color:var(--ink-2); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.execution-lanes strong { color:var(--ink); font-family:var(--font-num); font-size:11px; }
.execution-lanes span { grid-column:1/-1; color:var(--ink-4); font-size:9px; }
.execution-proof { display:flex; flex-wrap:wrap; gap:5px; }
.execution-proof span { padding:4px 6px; border-radius:999px; background:var(--field); color:var(--ink-4);
  font-family:var(--font-num); font-size:9px; font-weight:700; }
.execution-proof span.on { color:var(--tone-ok); }
.execution-decision { display:flex; flex-direction:column; gap:3px; padding:9px; border-radius:10px; background:var(--field); }
.execution-decision b { color:var(--ink-2); font-size:11px; }
.execution-decision span { color:var(--ink-4); font-size:10px; line-height:1.4; }
.execution-decision.good b { color:var(--tone-ok); }
.execution-decision.bad b { color:var(--tone-flag); }
.execution-launch, .execution-actions { display:flex; flex-wrap:wrap; gap:5px; }
.execution-launch button, .execution-actions button { min-height:30px; padding:5px 9px; border-radius:8px;
  background:var(--field); color:var(--ink-3); font-size:11px; font-weight:650; }
.execution-launch button:hover, .execution-actions button:hover,
.execution-launch button:focus-visible, .execution-actions button:focus-visible { color:var(--ink); }
.execution-launch button:focus-visible, .execution-actions button:focus-visible {
  outline:2px solid var(--focus); outline-offset:1px; }
.execution-launch .execution-refresh { margin-left:auto; color:var(--ink-4); }
.execution-run { display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid var(--line);
  border-radius:11px; background:var(--bg-sub); }
.execution-run[data-state="completed"] { border-color:color-mix(in srgb, var(--tone-ok) 30%, var(--line)); }
.execution-run[data-state="failed"], .execution-run[data-state="cancelled"] {
  border-color:color-mix(in srgb, var(--tone-flag) 25%, var(--line)); }
.execution-run-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.execution-run-head > div { min-width:0; display:flex; flex-direction:column; gap:2px; }
.execution-run-head b { overflow:hidden; color:var(--ink-2); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.execution-run-head span { color:var(--ink-4); font-family:var(--font-num); font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; }
.execution-run-head time { flex:none; color:var(--ink-4); font-family:var(--font-num); font-size:9px; }
.execution-run-meta { color:var(--ink-4); font-size:10px; line-height:1.4; }
.execution-run p { margin:0; color:var(--ink-3); font-size:10px; line-height:1.4; }
.execution-actions .execution-cancel { margin-left:auto; color:var(--tone-flag); }
/* One segmented-control language app-wide: field track, raised thumb. */
.set-seg { display:inline-flex; gap:2px; flex-wrap:wrap; background:var(--field); padding:3px;
  border-radius:var(--radius-sm); }
.set-seg-btn { flex:1; min-width:0; background:transparent; color:var(--ink-3); padding:7px 14px;
  border-radius:calc(var(--radius-sm) - 3px); font-size:13px; white-space:nowrap;
  transition:background .12s, color .12s; }
.set-seg-btn:hover { color:var(--ink); }
.set-seg-btn.on { background:var(--thumb); color:var(--ink); font-weight:600; }
.set-seg-btn:disabled { cursor:not-allowed; opacity:.42; }
.set-seg-btn:disabled:hover { color:var(--ink-3); }
.danger-btn { align-self:flex-start; background:var(--field); color:var(--tone-flag);
  font-size:13px; font-weight:600; padding:8px 14px; border-radius:9px; }
.danger-btn:hover { background:var(--tone-flag); color:#fff; }
.danger-btn:disabled { cursor:not-allowed; opacity:.42; }
.danger-btn:disabled:hover { background:var(--field); color:var(--tone-flag); }
.workspace-meta { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; color:var(--ink-4); font-size:11px; line-height:1.45; }
.legal-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 12px; }
.danger-zone { border-top:1px solid var(--field); padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.danger-zone > div { display:flex; min-width:0; flex-direction:column; gap:3px; }
.danger-zone b { color:var(--ink-2); font-size:13px; }
.danger-zone span { color:var(--ink-4); font-size:11px; line-height:1.45; }
.danger-note { min-height:16px; margin:-8px 0 0; color:var(--tone-flag); font-size:11px; line-height:1.45; }
.voice-setting { border-top:1px solid var(--field); padding-top:16px; }
.voice-setting-row { display:flex; align-items:center; gap:10px; min-width:0; }
.voice-cloud-dot { width:8px; height:8px; border-radius:50%; background:var(--ink-4); flex:none; }
.voice-cloud-dot.on { background:var(--tone-ok); }
.voice-setting-main { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.voice-setting-main b { font-size:13px; color:var(--ink-2); }
.voice-setting-main small { font-size:11px; color:var(--ink-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Buttons ── */
.btn { background:var(--field); color:var(--ink); padding:8px 16px; border-radius:var(--radius-sm);
  font-weight:600; font-size:13px; }
.btn.primary { background:var(--ink); color:var(--bg); }
.btn.quiet { background:transparent; color:var(--ink-3); }
.btn.quiet:hover { color:var(--ink); }

/* ── Modal overlay ── */
.overlay { position:fixed; inset:0; z-index:60; display:none; justify-content:center; align-items:center;
  padding:24px; background:rgba(20,20,22,0); backdrop-filter:blur(0px);
  transition:background .22s ease, backdrop-filter .22s ease; }
.overlay.open { display:flex; background:rgba(20,20,22,.34); backdrop-filter:blur(3px); }
.modal { background:var(--bg); border-radius:var(--radius); width:min(440px, 94vw);
  padding:24px; display:flex; flex-direction:column; gap:18px;
  opacity:0; transform:scale(.96) translateY(10px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.25,.1,.25,1); }
.overlay.open .modal { opacity:1; transform:none; }
.modal.workspace-modal { max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-gutter:stable; scroll-padding-block:24px; }
.workspace-settings-head { position:sticky; top:-24px; z-index:2; margin:-24px -24px 0;
  padding:24px 24px 12px; background:var(--bg); }
.modal-head { display:flex; align-items:center; justify-content:space-between; }
.modal-head h2 { font-size:17px; margin:0; letter-spacing:-.01em; }
.modal-x { color:var(--ink-3); font-size:15px; width:34px; height:34px; border-radius:8px;
  display:grid; place-items:center; }
.modal-x:hover { background:var(--field); color:var(--ink); }
.modal-sub { font-size:13px; color:var(--ink-3); line-height:1.5; margin:-8px 0 0; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }
.write-capabilities { display:flex; flex-direction:column; gap:8px; padding:12px 14px;
  border-radius:12px; background:var(--field); }
.write-capabilities > div { display:flex; align-items:flex-start; gap:9px; }
.write-capabilities span { color:var(--tone-ok); font-size:12px; font-weight:700; line-height:1.5; }
.write-capabilities p { margin:0; color:var(--ink-2); font-size:12px; line-height:1.5; }
.connector-downloads { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.connector-download { min-width:0; padding:12px; display:flex; flex-direction:column; gap:4px; border-radius:10px; background:var(--field); color:var(--ink); }
.connector-download b { font-size:12px; }
.connector-download span { color:var(--ink-3); font-size:11px; line-height:1.35; }
.connector-download i { margin-top:4px; color:var(--signal); font-size:11px; font-style:normal; font-weight:650; }

/* ── Toast ── */
.toast { position:fixed; bottom:136px; left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:10px; font-size:13px;
  opacity:0; transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
  z-index:100; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Paid-beta billing — the same flat, quiet language as the Genesis work tray. */
.modal.billing-modal { width:min(860px, 94vw); max-height:min(92vh, 900px); overflow:auto; }
.billing-shell { display:flex; flex-direction:column; gap:22px; }
.billing-shell .modal-head { align-items:flex-start; position:sticky; top:-22px; z-index:2;
  margin:-22px -24px 0; padding:22px 24px 12px; background:var(--bg); }
.billing-kicker { margin:4px 0 0; color:var(--ink-4); font-size:11px; }
.billing-overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  overflow:hidden; background:var(--field); border-radius:12px; }
.billing-overview > div:not(.billing-meter) { min-width:0; padding:15px; display:flex; flex-direction:column;
  gap:4px; background:var(--bg-sub); }
.billing-overview strong { color:var(--ink); font-family:var(--font-num); font-size:18px; line-height:1.2; }
.billing-overview small { color:var(--ink-4); font-size:11px; line-height:1.35; }
.billing-eyebrow { color:var(--ink-4); font-size:10px; font-weight:650; letter-spacing:.07em; }
.billing-meter { grid-column:1/-1; height:4px; background:var(--field); }
.billing-meter span { display:block; height:100%; background:var(--signal); }
.billing-alert { padding:11px 13px; border-radius:10px; color:var(--tone-flag);
  background:color-mix(in srgb, var(--tone-flag) 8%, var(--bg-sub)); font-size:12px; }
.billing-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:10px; }
.billing-section-head h3 { margin:0; color:var(--ink); font-size:13px; }
.billing-section-head p { margin:3px 0 0; color:var(--ink-4); font-size:11px; line-height:1.4; }
.billing-plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.billing-plan { min-width:0; padding:14px; display:flex; flex-direction:column; align-items:flex-start;
  gap:8px; border-radius:12px; background:var(--bg-sub); }
.billing-plan.current { outline:2px solid var(--signal); outline-offset:-2px; }
.billing-plan > strong { color:var(--ink); font-family:var(--font-num); font-size:20px; }
.billing-plan > strong small { color:var(--ink-4); font-family:var(--font-ui); font-size:10px; font-weight:500; }
.billing-plan p { min-height:42px; margin:0; color:var(--ink-3); font-size:11px; line-height:1.35; }
.billing-plan ul { min-height:54px; margin:0 0 4px; padding:0; list-style:none; color:var(--ink-3); font-size:10px; line-height:1.5; }
.billing-plan li::before { content:"·"; margin-right:5px; color:var(--signal); }
.billing-plan .btn { margin-top:auto; width:100%; }
.billing-plan .btn:disabled, .billing-reloads .btn:disabled, .billing-actions .btn:disabled {
  cursor:not-allowed; opacity:.42; }
.billing-footnote, .billing-legal { margin:8px 0 0; color:var(--ink-4); font-size:10px; line-height:1.45; }
.billing-controls { padding-top:18px; border-top:1px solid var(--field); }
.billing-reloads { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.billing-auto { padding:14px; border-radius:12px; background:var(--bg-sub); }
.billing-toggle { display:flex; align-items:flex-start; gap:9px; color:var(--ink-2); font-size:12px; }
.billing-toggle span { display:flex; flex-direction:column; gap:2px; }
.billing-toggle small { color:var(--ink-4); font-size:10px; font-weight:400; }
.billing-auto input[type="checkbox"] { width:18px; height:18px; accent-color:var(--signal); }
.billing-auto-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:13px; }
.billing-auto-grid label { display:flex; flex-direction:column; gap:6px; color:var(--ink-3); font-size:10px; }
.billing-auto-grid select, .billing-auto-grid input { min-height:40px; width:100%; border:0; border-radius:8px;
  padding:8px 10px; background:var(--field); color:var(--ink); font:inherit; font-size:12px; }
.billing-consent { margin-top:12px; display:flex; align-items:flex-start; gap:8px; color:var(--ink-3); font-size:10px; line-height:1.4; }
.billing-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:12px; }
.billing-actions span { flex:1; color:var(--tone-flag); font-size:10px; }

/* HIG press feedback */
.btn:active, .c-btn:active, .c-send:active, .sys-tab:active, .rp-tab:active, .pava:active,
.rail-ghost:active, .set-seg-btn:active, .app-connect:active { transform:scale(.96); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sidebar { position:fixed; inset:0 auto 0 0; z-index:40; background:var(--bg-sub);
    width:min(300px, 84vw); padding-top:20px; }
  body.sb-open::after { content:""; position:fixed; inset:0; z-index:35;
    background:rgba(20,20,22,.34); }
  body.sb-open .main { margin-left:10px; }
  body.sb-open .rail { display:flex; }
  .greet { font-size:clamp(26px, 8vw, 34px); }
  .composer textarea::placeholder { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rpanel { position:absolute; inset:0; z-index:30; background:var(--dock-surface);
    padding:16px 18px; width:100%; min-width:0; max-width:none; transform:translateX(100%); }
  body.rp-open .rpanel { width:100%; transform:none; }
  .rp-head, .rp-body { width:100%; min-width:0; }
  .rp-resize { display:none; }
  .view { padding:0 18px; }
  .work-tray { width:calc(100% - 18px); margin-bottom:max(9px, env(safe-area-inset-bottom)); }
  body.rp-open .work-tray { width:calc(100% - 18px); transform:none; }
  .composer-wrap { padding:5px 0 0; }
  .composer-shell { gap:6px; }
  .voice-switch { width:48px; }
  .cards-dock { padding-inline:1px; max-height:min(52vh, 440px); }
  .canvas-artifacts { grid-template-columns:1fr; }
  .artifact-fields { grid-template-columns:1fr; }
  .canvas-customer_reply, .canvas-weekly_briefing, .canvas-appointment_proposal,
  .canvas-form, .canvas-question_set, .canvas-comparison { grid-column:auto; }
  .canvas-decision, .canvas-outcome, .canvas-working { grid-template-columns:34px minmax(0,1fr); }
  .canvas-outcome-actions { grid-column:2; }
  .canvas-email { grid-column:auto; }
  .queue-terminal-detail.open { max-height:min(48vh, 440px); font-size:15px; }
  .work-tray-toggle { min-height:40px; padding-inline:9px; }
  .work-tray.has-work-order .work-tray-toggle { min-height:44px; }
  .work-tray.has-work-order .cards-dock { width:100%; }
  .discovery-card { flex-basis:132px; min-width:132px; }
  .discovery-card, .discovery-card-action { min-height:106px; }
  .work-order-row { min-height:44px; padding-block:10px; }
  .queue-phases { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .queue-terminal-card .ai-card-main, .legacy-terminal-card .ai-card-main {
    grid-template-columns:minmax(0,1fr) auto auto; }
  .queue-terminal-preview { display:none; }
  .home { padding:26px 0 max(176px,calc(154px + env(safe-area-inset-bottom))); gap:30px; }
  .home-attention-list { grid-template-columns:1fr; }
  .pcards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .session-header { flex-direction:column; gap:14px; padding-top:2px; }
  .session-actions { justify-content:flex-start; max-width:none; }
  .session-actions button { min-height:40px; }
  .session-note { grid-template-columns:30px minmax(0,1fr); padding:11px; }
  .overlay { padding:10px; align-items:flex-end; }
  .modal.billing-modal { width:100%; max-height:94vh; border-radius:18px 18px 12px 12px;
    padding:18px 16px max(20px, env(safe-area-inset-bottom)); }
  .billing-shell .modal-head { top:-18px; margin:-18px -16px 0; padding:18px 16px 10px; }
  .modal.workspace-modal { max-height:calc(100dvh - 20px); }
  .workspace-settings-head { top:-18px; margin:-18px -16px 0; padding:18px 16px 10px; }
  .billing-overview, .billing-plans, .billing-auto-grid { grid-template-columns:1fr; }
  .publishing-page-row { align-items:flex-start; flex-direction:column; }
  .publishing-row-actions { justify-content:flex-start; }
  .publishing-dns-row { grid-template-columns:auto minmax(0,1fr) auto; }
  .publishing-dns-row code:last-of-type { grid-column:1 / -1; grid-row:2; }
  .billing-meter { grid-column:1; }
  .billing-plan p, .billing-plan ul { min-height:0; }
  .account-page { padding:28px 16px max(56px, env(safe-area-inset-bottom)); }
  .account-hero { min-height:112px; gap:17px; margin-bottom:22px; }
  .account-hero-avatar { width:82px; height:82px; }
  .account-avatar-image, .account-avatar-fallback { font-size:28px; }
  .account-hero-copy h1 { font-size:clamp(28px, 9vw, 38px); }
  .account-section { padding:18px; border-radius:17px; }
  .account-fields, .account-usage, .account-platform-grid { grid-template-columns:1fr; }
  .account-usage-meter { grid-column:1; }
  .account-list-row { grid-template-columns:84px minmax(0,1fr); gap:11px; }
  .account-list-row > :last-child:not(div) { grid-column:2; justify-self:start; }
  .account-row-actions { align-items:flex-start; flex-wrap:wrap; }
  .account-save-status { width:100%; order:3; }
  .account-plan-actions > span { width:100%; }
}

@media (max-width: 520px) {
  .account-list-row { grid-template-columns:1fr; gap:4px; padding:15px; }
  .account-list-row > :last-child:not(div) { grid-column:1; margin-top:6px; justify-self:start; }
  .account-list-row b { white-space:normal; }
  .account-hero { align-items:flex-start; }
  .vault-source-grid { grid-template-columns:1fr; }
}

/* Touch: honor 44pt hit targets and surface hover-gated micro-controls. */
@media (pointer: coarse) {
  .modal-x, .rp-close, .c-btn, .c-send, .ai-x { min-width:44px; min-height:44px; }
  .discovery-card-hide { width:40px; height:40px; top:0; right:0; opacity:1; }
  .canvas-outcome-actions button { width:44px; height:44px; }
  .sb-more { width:38px; height:38px; opacity:1; }
  .project-session-row, .project-session-new { min-height:44px; }
  .session-actions button, .people-row > button, .people-head > button { min-height:44px; }
  .file-del { width:32px; height:32px; opacity:.7; }
  .vault-item-menu { width:34px; height:34px; opacity:.76; }
}

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

/* The token grant on a plan card: the number a buyer actually compares. Quiet, not shouted —
   the price stays the headline. */
.billing-plan-tokens { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }

/* Project Overview starts as a capability constellation, then yields the entire stage to
   the first real request. It is the empty state of the generative surface, never a second
   dashboard and never a layer left behind a composed screen. */
.project-launchpad { width:100%; max-width:720px; padding:24px 4px 188px;
  animation:project-launchpad-in 280ms var(--ui-motion-curve) both; }
@keyframes project-launchpad-in {
  from { opacity:0; transform:translateY(7px); }
  to { opacity:1; transform:none; }
}
.project-launchpad-head { max-width:570px; margin-bottom:22px; }
.project-launchpad-head > span { color:var(--ink-4); font-size:10px; font-weight:720;
  letter-spacing:.08em; text-transform:uppercase; }
.project-launchpad-head h1 { margin:9px 0 0; color:var(--ink); font-size:clamp(25px,4vw,36px);
  font-weight:700; line-height:1.05; letter-spacing:-.035em; }
.project-launchpad-head p { margin:10px 0 0; color:var(--ink-3); font-size:13px; line-height:1.5; }

.project-app-check { width:100%; min-height:142px; padding:20px; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:17px;
  border-radius:var(--radius-lg); background:color-mix(in srgb,var(--signal) 8%,var(--field));
  color:var(--ink); text-align:left; transition:background var(--ui-motion), transform var(--ui-motion); }
.project-app-check:hover, .project-app-check:focus-visible {
  background:color-mix(in srgb,var(--signal) 13%,var(--field)); }
.project-app-check:focus-visible, .project-capability-card:focus-visible {
  outline:2px solid var(--focus); outline-offset:3px; }
.project-app-check:active, .project-capability-card:active { transform:scale(.99); }
.project-app-check-mark { width:56px; height:56px; padding:8px; display:grid;
  grid-template-columns:1fr 1fr; gap:5px; border-radius:16px; background:var(--thumb); }
.project-app-check-mark i { display:block; border-radius:6px; background:var(--signal); }
.project-app-check-mark i:nth-child(2), .project-app-check-mark i:nth-child(3) {
  background:color-mix(in srgb,var(--signal) 48%,var(--field)); }
.project-app-check-copy { min-width:0; display:flex; flex-direction:column; }
.project-app-check-copy small { color:var(--signal); font-size:10px; font-weight:720;
  letter-spacing:.07em; text-transform:uppercase; }
.project-app-check-copy strong { margin-top:5px; color:var(--ink); font-size:20px;
  font-weight:700; letter-spacing:-.02em; }
.project-app-check-copy span { margin-top:5px; color:var(--ink-3); font-size:12px; line-height:1.4; }
.project-app-check-action { min-width:38px; height:38px; padding:0 9px; display:grid;
  place-items:center; border-radius:999px; background:var(--thumb); color:var(--ink-2);
  font:700 12px var(--font-num); }

.project-capability-grid { margin-top:10px; display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:10px; }
.project-capability-card { grid-column:span 3; min-width:0; min-height:132px; padding:15px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto 1fr;
  gap:11px; border-radius:var(--radius-lg); background:var(--field); color:var(--ink);
  text-align:left; transition:background var(--ui-motion), transform var(--ui-motion); }
.project-capability-card.is-wide { grid-column:span 6; min-height:148px; }
.project-capability-card:hover { background:var(--bg-elev); }
.project-capability-icon { width:34px; height:34px; display:grid; place-items:center;
  border-radius:11px; background:var(--thumb); color:var(--ink-2); }
.project-capability-icon svg { width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.project-capability-copy { min-width:0; grid-column:1/-1; align-self:end;
  display:flex; flex-direction:column; gap:4px; }
.project-capability-copy strong { color:var(--ink); font-size:14px; font-weight:650; line-height:1.2; }
.project-capability-copy small { color:var(--ink-3); font-size:11px; line-height:1.35; }
.project-capability-arrow { align-self:center; color:var(--ink-4); font-size:17px; }

@media (max-width:700px) {
  .project-launchpad { padding-right:12px; padding-left:12px; }
  .project-app-check { min-height:132px; padding:17px; gap:13px; }
  .project-app-check-mark { width:48px; height:48px; border-radius:14px; }
  .project-app-check-action { display:none; }
  .project-capability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-capability-card, .project-capability-card.is-wide { grid-column:span 1; min-height:126px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-launchpad { animation:none; }
  .project-app-check, .project-capability-card { transition:none; }
  .project-app-check:active, .project-capability-card:active { transform:none; }
}

/* ── The App-less App stage (2026-07-26-appless-app-production-plan.md) ────────────────
   The standard project stage rendering a screen Genesis composed for the request. NOT a
   Canvas: a Canvas is its own document on its own infinite background and never routes
   here.

   Material law: the interface is printed INTO the stage, not stacked on it. Every fill is
   a tint of the ink itself, so it recedes in both themes and never reads as a second
   surface. The only solid objects are the primary action and the approval mark — the two
   things that do something irreversible. Solidity means consequence.

   Faint applies to FILLS, never to text: ink stays at the contract's tested contrast. */
:root {
  --gx-tint:color-mix(in srgb,var(--ink) 3%,transparent);
  --gx-rule:color-mix(in srgb,var(--ink) 8%,transparent);
  --gx-rule-soft:color-mix(in srgb,var(--ink) 5%,transparent);
}
.appless-stage { display:flex; flex-direction:column; align-items:center; }
/* The bottom padding reserves the floating composer's lane, the same 188px .home reserves.
   At 22px the last section's approve button rendered UNDER the composer: the click landed on
   .composer-row, the button never fired, and nothing said so — the same silent-overlay
   failure as an open right dock swallowing Send. A screen's last approval must be reachable
   without scrolling tricks, so this lane is not decoration. */
.gx-sheet { width:100%; max-width:640px; padding:26px 4px 188px; display:flex; flex-direction:column; gap:15px; }
.gx-title { margin:0 0 4px; font:650 23px/1.2 var(--font-ui); color:var(--ink); }

/* Nodes rise as they stream, so the screen assembles rather than appearing. A node stays
   clickable mid-fade — `both` fill keeps the end state, and nothing blocks pointer input. */
.gx-in { animation:gx-rise 260ms var(--ui-motion-curve) both; }
@keyframes gx-rise { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }

.gx-section, .gx-task-body { display:flex; flex-direction:column; gap:12px; }
.gx-heading, .gx-task-heading { margin:0; font:650 12px/1 var(--font-ui); color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.07em; }
.gx-text { margin:0; color:var(--ink-2); font-size:15px; line-height:1.5; }
.gx-text-lg { font-size:17px; color:var(--ink); }
.gx-divider { width:100%; height:1px; margin:4px 0; border:0; background:var(--gx-rule-soft); }

/* One task, one approval. A finished section fades out and collapses while its siblings
   reflow up; the screen dissolves only when the last one goes. */
.gx-task { display:flex; flex-direction:column; gap:11px; padding:16px 0;
  border-top:1px solid var(--gx-rule-soft);
  transition:opacity var(--ui-motion), transform var(--ui-motion),
    max-height var(--ui-motion), padding var(--ui-motion), margin var(--ui-motion); }
.gx-task:first-of-type { border-top:0; }
.gx-task.gx-out { opacity:0; transform:translateY(-4px); max-height:0; padding:0; margin:0;
  overflow:hidden; pointer-events:none; }
.gx-task-head { display:flex; align-items:center; gap:9px; }
.gx-task-foot { display:flex; align-items:center; gap:10px; }

.gx-field { display:flex; flex-direction:column; gap:3px; }
.gx-label { color:var(--ink-4); font:600 11px/1 var(--font-ui); text-transform:uppercase; letter-spacing:.06em; }
.gx-input { width:100%; padding:8px 2px; border:0; border-bottom:1px solid var(--gx-rule);
  border-radius:0; background:none; color:var(--ink); font:15px/1.5 var(--font-ui);
  transition:border-color 160ms var(--ui-motion-curve); }
.gx-input:hover { border-bottom-color:color-mix(in srgb,var(--ink) 16%,transparent); }
textarea.gx-input { min-height:104px; resize:vertical; }
.gx-input:focus { border-bottom-color:var(--ink); }
.gx-input:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; }
.gx-hint { margin:0; color:var(--ink-4); font-size:12px; }

.gx-btn { min-height:38px; padding:0 17px; border:0; border-radius:999px; cursor:pointer;
  font:650 14px/1 var(--font-ui); align-self:flex-start;
  transition:background-color 160ms var(--ui-motion-curve); }
.gx-btn-primary { background:var(--accent); color:var(--bg); }
.gx-btn-quiet { padding:0 15px; background:none; color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--gx-rule); }
.gx-btn-quiet:hover { background:var(--gx-tint); color:var(--ink); }
.gx-btn-critical { background:var(--tone-flag); color:#fff; }
.gx-btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

.gx-list { display:flex; flex-direction:column; }
.gx-row { width:100%; padding:12px 4px; border:0; border-radius:var(--radius-xs);
  border-bottom:1px solid var(--gx-rule-soft); background:none;
  display:flex; align-items:center; gap:11px; text-align:left; font:inherit; color:var(--ink);
  transition:background-color 140ms var(--ui-motion-curve); }
.gx-list > .gx-row:last-child { border-bottom:0; }
button.gx-row { cursor:pointer; }
button.gx-row:hover { background:var(--gx-tint); }
button.gx-row:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.gx-row-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.gx-row-title { font:600 14px/1.3 var(--font-ui); color:var(--ink); }
.gx-row-sub { font-size:12px; color:var(--ink-3); }
.gx-row-meta { flex:none; font:12px var(--font-num); color:var(--ink-4); }
.gx-dot { width:5px; height:5px; flex:none; border-radius:50%; background:color-mix(in srgb,var(--ink) 20%,transparent); }

.gx-lineitems { display:flex; flex-direction:column; }
.gx-line { padding:11px 4px; border-bottom:1px solid var(--gx-rule-soft);
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; }
.gx-line-desc { font-size:14px; color:var(--ink); }
.gx-line-qty { font:12px var(--font-num); color:var(--ink-4); }
.gx-line-amt { min-width:88px; text-align:right; font:600 14px var(--font-num); color:var(--ink); }
.gx-line-total { border-bottom:0; border-top:1px solid var(--gx-rule); }
.gx-line-total .gx-line-desc, .gx-line-total .gx-line-amt { font-weight:700; }

.gx-person { padding:10px 4px 14px; border-bottom:1px solid var(--gx-rule-soft);
  display:flex; align-items:center; gap:11px; }
.gx-avatar { position:relative; width:32px; height:32px; flex:none; border-radius:50%;
  background:color-mix(in srgb,var(--ink) 6%,transparent); color:var(--ink-2);
  display:grid; place-items:center; font:650 13px var(--font-ui); }
.gx-presence-online::after { content:""; position:absolute; right:-1px; bottom:-1px;
  width:10px; height:10px; border-radius:50%; background:var(--tone-ok); border:2px solid var(--bg); }
.gx-msg { padding:10px 4px 10px 12px; border-left:2px solid transparent;
  display:flex; flex-direction:column; gap:4px; }
.gx-msg-mine { border-left-color:var(--gx-rule); background:var(--gx-tint);
  border-radius:0 var(--radius-xs) var(--radius-xs) 0; }
.gx-msg-head { display:flex; align-items:center; gap:8px; }
.gx-msg-from { font:650 13px var(--font-ui); color:var(--ink); }
.gx-msg-at { font:11px var(--font-num); color:var(--ink-4); }
.gx-msg-body { margin:0; font-size:14px; line-height:1.5; color:var(--ink-2); }

.gx-attach { padding:9px 11px; border-radius:var(--radius-xs); background:var(--gx-tint);
  display:flex; align-items:center; gap:9px; align-self:flex-start; }
.gx-attach-mark { color:var(--ink-4); }
.gx-chip { padding:3px 9px; border-radius:999px; background:none;
  box-shadow:inset 0 0 0 1px var(--gx-rule); color:var(--ink-3);
  font:650 11px/1.5 var(--font-ui); align-self:flex-start; }
.gx-chip.gx-tone-signal { background:color-mix(in srgb,var(--signal) 12%,transparent); color:var(--signal); box-shadow:none; }
.gx-chip.gx-tone-success { background:color-mix(in srgb,var(--tone-ok) 12%,transparent); color:var(--tone-ok); box-shadow:none; }
.gx-chip.gx-tone-warning { background:color-mix(in srgb,var(--tone-note) 13%,transparent); color:var(--tone-note); box-shadow:none; }
.gx-chip.gx-tone-critical { background:color-mix(in srgb,var(--tone-flag) 12%,transparent); color:var(--tone-flag); box-shadow:none; }
span.gx-dot.gx-tone-signal { background:var(--signal); }
span.gx-dot.gx-tone-success { background:var(--tone-ok); }
span.gx-dot.gx-tone-warning { background:var(--tone-note); }
.gx-empty { margin:0; padding:22px 4px; color:var(--ink-3); font-size:14px; text-align:center; }
.gx-table { width:100%; border-collapse:collapse; font-size:14px; }
.gx-table th { padding:8px 4px; text-align:left; color:var(--ink-4);
  font:650 11px var(--font-ui); text-transform:uppercase; letter-spacing:.06em; }
.gx-table td { padding:10px 4px; border-top:1px solid var(--gx-rule-soft); color:var(--ink); }
.gx-preview { padding:16px 18px; border-radius:var(--radius-sm); background:var(--gx-tint);
  display:flex; flex-direction:column; gap:10px; }

@media (prefers-reduced-motion: reduce) {
  .gx-in, .gx-task { animation:none !important; transition:none !important; }
}

/* Sections beyond the fifth collapse behind a disclosure. The summary states the count so
   the disclosure is never a place work hides. */
.gx-more { border-top:1px solid var(--gx-rule-soft); }
.gx-more-summary { padding:14px 4px; cursor:pointer; list-style:none;
  color:var(--ink-3); font:650 13px var(--font-ui); }
.gx-more-summary::-webkit-details-marker { display:none; }
.gx-more-summary::after { content:" ▾"; color:var(--ink-4); }
.gx-more[open] > .gx-more-summary::after { content:" ▴"; }
.gx-more-summary:hover { color:var(--ink); }
.gx-more-summary:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* ── Canvas tools (Widgets · Structure · Design) ─────────────────────────────────────────
   These replace a single scrolling column that had been crammed into the project Settings tab —
   quality, toolbar, palette, images, tree and properties all stacked — which is why the panel read
   as an afterthought beside the rest of the app.

   Everything here uses the app's OWN tokens. The previous version was written against the design
   system's `--g-*` names, which index.html never loads, so every value silently fell back to its
   light-theme literal: white pills and #888 labels sitting in a dark dock, well under AA. */
.canvas-inspector { min-width:0; display:flex; flex-direction:column; gap:10px; padding-bottom:18px;
  font:13px var(--font-ui); color:var(--ink); }
.cv-seg { display:flex; width:calc(100% - 24px); margin:10px 12px 4px; }
.cv-pane { padding-bottom:10px; }

/* A group label is structure, not decoration: it says which KIND of thing follows. */
.cv-group { font:600 11px var(--font-num); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); padding:12px 12px 8px; }
.cv-group-ruled { border-top:1px solid var(--field); margin-top:4px; }

/* Equal tiles, two to a row — the Elementor gesture. Equal size is the point: a Section is a thing
   you place, exactly like a Heading, so it must not look like a different class of control. */
.cv-tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px; }
.cv-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  aspect-ratio:1 / .78; padding:10px 6px; border:1px solid transparent; border-radius:var(--radius-sm);
  background:var(--field); color:var(--ink); cursor:grab; font:inherit;
  transition:background var(--ui-motion), border-color var(--ui-motion), transform var(--ui-motion); }
.cv-tile svg { width:22px; height:22px; color:var(--ink-2); transition:color var(--ui-motion); }
.cv-tile span { font:600 11px var(--font-ui); letter-spacing:.01em; }
.cv-tile:hover { background:var(--bg-elev); border-color:color-mix(in srgb,var(--ink) 12%,transparent); }
.cv-tile:hover svg { color:var(--ink); }
.cv-tile:active { cursor:grabbing; transform:scale(.97); }
.cv-tile.dragging { opacity:.5; }
.cv-tile:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

/* The layers tree. Depth is expressed by indent and by a hairline spine, so nesting is legible
   without a row of disclosure chevrons the person has to manage. */
.canvas-tree { padding:2px 0 4px; }
.canvas-structure-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:2px 12px 6px; }
.canvas-structure-actions button { width:100%; }
.canvas-tree-item { display:flex; align-items:center; min-width:0; border-radius:var(--radius-xs); }
.canvas-tree-item:hover { background:var(--field); }
.canvas-tree-item.is-hidden .canvas-tree-row { opacity:.52; }
.canvas-tree-item.is-locked .canvas-tree-row > span::after { content:""; display:inline-block; width:4px; height:4px;
  margin-left:7px; border-radius:50%; background:var(--ink-3); vertical-align:middle; }
.canvas-tree-row { display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-align:left; border:0;
  cursor:pointer; font:13px var(--font-ui); color:var(--ink); background:transparent;
  padding:6px 12px; border-radius:var(--radius-xs); }
.canvas-tree-row > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.canvas-tree-row:hover { background:transparent; }
.canvas-tree-row.on { background:var(--bg-elev); font-weight:600; }
.canvas-tree-row:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.canvas-tree-actions { display:flex; align-items:center; gap:1px; padding-right:6px; opacity:0; transition:opacity var(--ui-motion); }
.canvas-tree-item:hover .canvas-tree-actions,
.canvas-tree-item:focus-within .canvas-tree-actions,
.canvas-tree-action.on { opacity:1; }
.canvas-tree-action { display:grid; place-items:center; width:24px; height:24px; padding:0; border:0;
  border-radius:7px; background:transparent; color:var(--ink-3); cursor:pointer; }
.canvas-tree-action:hover { background:var(--bg-elev); color:var(--ink); }
.canvas-tree-action:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.canvas-tree-action svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; }
.canvas-layer-fields { min-width:0; margin:0; padding:0; border:0; }
.canvas-layer-fields:disabled { opacity:.48; }
.canvas-layer-note { margin:0 12px 8px; color:var(--ink-3); font:11px var(--font-ui); }
.canvas-tree-kind { font:600 10px var(--font-num); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .cv-tile { transition:none; }
  .cv-tile svg { transition:none; }
  .cv-tile:active { transform:none; }
}

/* THE DOCK LANE. The right dock is absolutely positioned at z-index 20 over the stage, so anything
   living at the top-right of a view sits UNDER it while it is open: the dock takes the click and
   reports success, and the control the person aimed at never fires. This has now bitten three
   separate controls — the composer's Send, Canvas's Exit, the Canvas brief's Generate, and the project header's New canvas —
   so it is ONE rule listing every bar that spans the stage, not a third per-element patch.
   A new full-width bar with controls at its right end belongs in this list. */
.html-canvas-bar, .html-canvas-brief { padding:10px 14px; transition:padding-right var(--ui-motion); }
.html-canvas-stage { margin-right:0; transition:margin-right var(--ui-motion); }
.html-canvas-mount-state { position:absolute; inset:0 0 188px; display:flex; align-items:center;
  justify-content:center; gap:10px; color:var(--ink-3); font:500 12px var(--font-ui); }
.view.canvas-bootstrap, html.canvas-route .view { position:relative; overflow:hidden; }
.canvas-bootstrap-state { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:10px; color:var(--ink-3); font:500 12px var(--font-ui); }
.canvas-bootstrap-static { display:none; }
html.canvas-route .canvas-bootstrap-static { display:flex; }
.html-canvas-mount-mark { width:8px; height:8px; border-radius:50%; background:currentColor;
  opacity:.45; animation:html-canvas-mount-pulse 1.15s ease-in-out infinite alternate; }
.html-canvas-mount-state.error { color:var(--tone-flag); }
.html-canvas-mount-state.error .html-canvas-mount-mark { animation:none; opacity:.8; }
.html-canvas-mount-state button { margin-left:4px; border:0; border-radius:var(--radius-pill);
  padding:7px 12px; background:var(--field); color:var(--ink); cursor:pointer;
  font:600 12px var(--font-ui); }
.html-canvas-mount-state button:hover { background:var(--bg-elev); }
@keyframes html-canvas-mount-pulse { from { transform:scale(.72); opacity:.3; } to { transform:scale(1); opacity:.8; } }
body.rp-open .html-canvas-bar, body.rp-open .html-canvas-brief {
  padding-right:calc(var(--panel-w) + 22px); }
body.rp-open .html-canvas-stage { margin-right:var(--panel-w); }
@media (max-width: 1280px) {
  body.rp-open .html-canvas-dims, body.rp-open .html-canvas-status { display:none; }
}
@media (max-width: 900px) {
  body.rp-open .html-canvas-stage { margin-right:0; }
}
@media (prefers-reduced-motion: reduce) {
  .html-canvas-bar, .html-canvas-brief, .html-canvas-stage, .work-tray { transition:none; }
  .html-canvas-mount-mark { animation:none; opacity:.6; } }