:root {
    --bg:#faf9f5; --surface:#ffffff; --surface-2:#f4f1e9;
    --ink:#1a1915; --ink-muted:#73706a; --ink-faint:#a8a49b;
    --ink-body:#2a2823; --ink-body-2:#3a3833;
    --border:#e9e4d8; --border-strong:#dcd5c6;
    --clay:#c96442; --clay-deep:#8c4327; --clay-soft:#f3e7e0; --good:#5b7d63;
    --serif:"Newsreader", Georgia, serif;
    --sans:"Inter", system-ui, -apple-system, sans-serif;
    --r-sm:7px; --r:11px; --r-lg:16px;
    --shadow:0 1px 2px rgba(40,35,25,.04), 0 6px 22px rgba(40,35,25,.05);
    --shadow-sm:0 1px 2px rgba(40,35,25,.05);
    --shadow-lg:0 4px 12px rgba(40,35,25,.08), 0 24px 60px rgba(40,35,25,.14);
  }
  :root[data-theme="dark"] {
    --bg:#16140f; --surface:#1d1b15; --surface-2:#272219;
    --ink:#efeadf; --ink-muted:#a39e93; --ink-faint:#6c685e;
    --ink-body:#d8d3c8; --ink-body-2:#bbb6ab;
    --border:#2f2a20; --border-strong:#423c30;
    --clay:#d97f5a; --clay-deep:#eaa884; --clay-soft:#2c1f17; --good:#86ab8c;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 22px rgba(0,0,0,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-lg:0 4px 12px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.6);
    color-scheme:dark;
  }
  :root[data-theme="dark"] code { background:#241f17; }
  :root[data-theme="dark"] .scrim--on { background:rgba(0,0,0,.55); }
  :root[data-theme="dark"] .cmd-scrim { background:rgba(0,0,0,.6); }
  * { box-sizing:border-box; margin:0; padding:0; }
  html, body { height:100%; }
  body { font-family:var(--sans); color:var(--ink); background:var(--bg);
    font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; }
  button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  .muted { color:var(--ink-muted); }
  .dot-sep, .card-foot .dot-sep { color:var(--ink-faint); }

  /* ── Topbar ── */
  header.topbar { display:flex; align-items:center; gap:16px; height:60px; padding:0 24px;
    border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:30; }
  .wordmark { font-family:var(--serif); font-size:21px; letter-spacing:-.01em; }
  .wordmark .dot { color:var(--clay); }
  .topbar .search { flex:1; max-width:440px; margin:0 auto; display:flex; align-items:center; gap:9px;
    background:var(--surface); border:1px solid var(--border); border-radius:999px;
    padding:8px 12px 8px 16px; color:var(--ink-faint); box-shadow:var(--shadow-sm);
    transition:border-color .15s, box-shadow .15s; }
  .topbar .search:hover { border-color:var(--border-strong); }
  .topbar .search span { flex:1; text-align:left; }
  .topbar .search svg { color:var(--ink-faint); }
  .avatar { border-radius:999px; background:var(--clay); color:#fff; display:grid; place-items:center;
    font-weight:600; letter-spacing:.02em; flex-shrink:0; }
  .theme-toggle { width:34px; height:34px; display:grid; place-items:center; border-radius:999px;
    color:var(--ink-muted); border:1px solid var(--border); background:var(--surface);
    transition:color .14s, border-color .14s, transform .3s ease; flex-shrink:0; }
  .theme-toggle:hover { color:var(--ink); border-color:var(--border-strong); }
  :root[data-theme="dark"] .theme-toggle svg { transform:rotate(180deg); }
  .kbd { font-family:var(--sans); font-size:10.5px; font-weight:600; color:var(--ink-muted);
    background:var(--surface-2); border:1px solid var(--border); border-radius:5px;
    padding:1px 5px; line-height:1.5; }
  .kbd-k { color:var(--ink-faint); }

  /* ── Layout ── */
  .shell { display:grid; grid-template-columns:300px 1fr; height:calc(100vh - 60px); }
  .sidebar { border-right:1px solid var(--border); overflow-y:auto; padding:16px 12px; display:flex; flex-direction:column; }
  .main { overflow-y:auto; padding:34px 48px 90px; scroll-behavior:smooth; }
  .main-inner { max-width:780px; margin:0 auto; }

  /* ── Sidebar nav ── */
  .nav-label { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
    color:var(--ink-faint); padding:14px 12px 6px; }
  .nav-label:first-child { padding-top:2px; }
  .proj { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    padding:9px 12px; border-radius:var(--r-sm); color:var(--ink); transition:background .12s; }
  .proj:hover { background:var(--surface-2); }
  .proj.active { background:var(--clay-soft); }
  .proj-ic { color:var(--ink-faint); display:grid; place-items:center; flex-shrink:0; }
  .proj.active .proj-ic { color:var(--clay); }
  .proj-text { flex:1; min-width:0; display:flex; flex-direction:column; }
  .proj .name { font-weight:500; }
  .proj .meta { font-size:12px; color:var(--ink-muted); margin-top:-1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
  .proj.active .name { color:var(--clay-deep); }
  .proj-count { font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums;
    background:var(--surface-2); border-radius:999px; padding:1px 7px; flex-shrink:0; }
  .proj.active .proj-count { background:var(--surface); color:var(--clay-deep); }
  .sidebar-foot { margin-top:auto; display:flex; align-items:center; gap:8px; padding:14px 12px 4px;
    font-size:12px; color:var(--ink-faint); border-top:1px solid var(--border); margin-top:16px; }

  /* ── Project header ── */
  .crumb { font-size:12.5px; color:var(--ink-muted); margin-bottom:8px; }
  .title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
  h1.title { font-family:var(--serif); font-weight:400; font-size:33px; letter-spacing:-.015em;
    display:flex; align-items:center; gap:10px; }
  h1.title svg { color:var(--clay); }
  .path { color:var(--ink-muted); font-size:13px; margin-top:4px; font-variant-numeric:tabular-nums; }
  .btn-capture { display:flex; align-items:center; gap:6px; background:var(--clay); color:#fff;
    font-weight:500; font-size:13px; padding:8px 14px; border-radius:999px; box-shadow:var(--shadow-sm);
    transition:background .14s, transform .06s; white-space:nowrap; }
  .btn-capture:hover { background:#b1543d; }
  .btn-capture:active { transform:translateY(1px); }

  /* ── Tabs (stat-style) ── */
  .tabs { display:flex; gap:6px; margin:26px 0 4px; border-bottom:1px solid var(--border); }
  .tabx { display:flex; align-items:baseline; gap:7px; padding:6px 14px 12px; position:relative;
    color:var(--ink-muted); transition:color .12s; }
  .tabx:hover { color:var(--ink); }
  .tabx--on { color:var(--ink); }
  .tabx-n { font-family:var(--serif); font-size:21px; line-height:1; font-variant-numeric:tabular-nums; }
  .tabx-l { font-size:13px; }
  .tabx--on::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:var(--clay); border-radius:2px; }

  /* ── Filter bar ── */
  .filterbar { display:flex; align-items:center; gap:12px; margin:18px 0 6px; flex-wrap:wrap; }
  .seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--border);
    border-radius:999px; padding:2px; gap:2px; }
  .seg-b { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-muted);
    padding:5px 12px; border-radius:999px; transition:background .12s, color .12s; }
  .seg-b:hover { color:var(--ink); }
  .seg-b--on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); font-weight:500; }
  .src-dot { width:7px; height:7px; border-radius:999px; display:inline-block; }
  .src-dot.src-agent { background:var(--clay); }
  .src-dot.src-manual { background:var(--ink-faint); }
  .active-filters { display:flex; align-items:center; gap:8px; }
  .afilter { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--clay-deep);
    background:var(--clay-soft); border-radius:999px; padding:3px 6px 3px 10px; font-weight:500; }
  .afilter button { display:grid; place-items:center; color:var(--clay-deep); opacity:.7; }
  .afilter button:hover { opacity:1; }
  .clear-filters { font-size:12px; color:var(--ink-muted); text-decoration:underline; text-underline-offset:2px; }
  .result-count { font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

  /* ── Cards ── */
  .list { margin-top:14px; }
  .card { position:relative; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r); padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow-sm);
    transition:border-color .14s, box-shadow .14s, transform .06s; cursor:pointer; }
  .card:hover { border-color:var(--border-strong); box-shadow:var(--shadow); }
  .card:active { transform:translateY(1px); }
  .card--retired { background:linear-gradient(var(--surface),var(--surface)) padding-box; }
  .card--retired .card-title { color:var(--ink-muted); }
  .retired-flag { position:absolute; top:14px; right:16px; font-size:10px; font-weight:600;
    letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);
    background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:2px 8px; }
  .card-title { font-family:var(--serif); font-weight:500; font-size:18px; letter-spacing:-.01em;
    margin-bottom:6px; padding-right:80px; line-height:1.3; }
  .card-body { color:var(--ink); }
  /* max-height backstops the line-clamp: tables/code blocks inside a
     Markdown preview don't form line boxes, so clamp alone can't cap them. */
  .card-body.clamp { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; max-height:5em; }
  /* Status chip in a card sits at the top-right corner, same slot as the
     superseded flag (the two are mutually exclusive). */
  .card > .status-chip { position:absolute; top:14px; right:16px; }
  /* Markdown previews inside clamped cards: compact, no heading scale jumps. */
  .card-body.clamp .md { font-size:inherit; line-height:inherit; }
  .card-body.clamp .md p, .card-body.clamp .md ul, .card-body.clamp .md ol,
  .card-body.clamp .md pre, .card-body.clamp .md blockquote, .card-body.clamp .md table { margin:0 0 4px; }
  .card-body.clamp .md h1, .card-body.clamp .md h2, .card-body.clamp .md h3 { font-size:inherit; margin:0 0 4px; }
  .card-body.clamp .md pre { padding:3px 8px; }
  .card--note .card-body { color:var(--ink-body-2); }
  .card-foot { display:flex; align-items:center; gap:9px; margin-top:13px; font-size:12px;
    color:var(--ink-muted); flex-wrap:wrap; }
  .card-foot-spacer { flex:1; }
  .open-hint { color:var(--ink-faint); opacity:0; transition:opacity .14s; display:grid; place-items:center; }
  .card:hover .open-hint { opacity:1; }

  /* source badge */
  .src { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500;
    white-space:nowrap; }
  .src .src-dot { width:6px; height:6px; }
  .src-agent { color:var(--clay-deep); }
  .src-manual { color:var(--ink-muted); }
  .src-agent .src-dot { background:var(--clay); }
  .src-manual .src-dot { background:var(--ink-faint); }

  /* tags */
  .tag { font-size:11.5px; padding:2px 9px; border-radius:var(--r-sm);
    background:var(--clay-soft); color:var(--clay-deep); transition:filter .12s; }
  .tag:hover { filter:brightness(.97); }
  .tag-active { outline:1.5px solid var(--clay); }
  .card--note .tag { background:var(--surface-2); color:var(--ink-muted); }

  /* supersedes chip */
  .chain { display:inline-flex; align-items:center; gap:5px; color:var(--clay); font-weight:500;
    font-size:12px; }
  .chain:hover { color:var(--clay-deep); text-decoration:underline; text-underline-offset:2px; }
  .chain-arrow { font-size:13px; }

  /* ── Empty state ── */
  .empty { text-align:center; padding:54px 20px; color:var(--ink-muted); }
  .empty-ic { width:48px; height:48px; margin:0 auto 14px; display:grid; place-items:center;
    border-radius:14px; background:var(--surface-2); color:var(--ink-faint); border:1px solid var(--border); }
  .empty-title { font-family:var(--serif); font-size:18px; color:var(--ink); }
  .empty-sub { font-size:13px; margin-top:5px; max-width:340px; margin-left:auto; margin-right:auto; }

  /* ── Sessions timeline ── */
  .timeline { margin-top:18px; }
  .timeline-head { font-size:12px; margin-bottom:8px; padding-left:26px; }
  .sess { display:grid; grid-template-columns:26px 1fr; }
  .sess-rail { display:flex; justify-content:center; position:relative; }
  .sess-rail::before { content:""; position:absolute; top:0; bottom:0; width:1.5px; background:var(--border); }
  .sess:first-child .sess-rail::before { top:14px; }
  .sess:last-child .sess-rail::before { bottom:auto; height:14px; }
  .sess-pip { width:9px; height:9px; border-radius:999px; background:var(--surface);
    border:2px solid var(--border-strong); margin-top:12px; z-index:1; }
  .sess-card { padding:6px 0 22px 14px; min-width:0; }
  .sess-top { display:flex; align-items:center; gap:8px; font-size:12px; }
  .sess-date { font-weight:600; color:var(--ink); white-space:nowrap; }
  .sess-rel { font-size:11.5px; white-space:nowrap; }
  .sess-dur { display:inline-flex; align-items:center; gap:4px; color:var(--ink-muted);
    font-variant-numeric:tabular-nums; }
  .sess-summary { margin:7px 0 10px; color:var(--ink-body-2); }
  .sess-captured { display:flex; flex-wrap:wrap; gap:7px; }
  .chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; max-width:340px;
    padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface);
    color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color .12s, background .12s; }
  .chip:hover { border-color:var(--border-strong); background:var(--surface-2); }
  .chip svg { flex-shrink:0; }
  .chip--dec svg { color:var(--clay); }
  .chip--note svg { color:var(--ink-faint); }
  .sess-nocapture { font-size:12px; color:var(--ink-faint); font-style:italic; }

  /* ── Detail panel ── */
  .scrim { position:fixed; inset:0; background:rgba(26,25,21,0); z-index:40; pointer-events:none;
    transition:background .28s ease; }
  .scrim--on { background:rgba(26,25,21,.32); pointer-events:auto; }
  /* Entry page: a decision/note as a full main-content page. */
  .entry-col { max-width: 78ch; }
  .entry-top { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
  .entry-top-spacer { flex:1; }
  .entry-title { font-family:var(--serif); font-weight:500; font-size:31px; letter-spacing:-.015em;
    line-height:1.22; margin:0 0 12px; text-wrap:pretty; }
  .entry-body .md { font-size:15.5px; line-height:1.66; }
  .kind-pill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
    letter-spacing:.02em; padding:4px 11px; border-radius:999px; }
  .kind-pill--decision { background:var(--clay-soft); color:var(--clay-deep); }
  .kind-pill--note { background:var(--surface-2); color:var(--ink-muted); }
  .kind-pill svg { color:currentColor; }
  .iconbtn { width:30px; height:30px; display:grid; place-items:center; border-radius:8px;
    color:var(--ink-muted); transition:background .12s, color .12s; }
  .iconbtn:hover { background:var(--surface-2); color:var(--ink); }
  .copied-txt { font-size:11px; color:var(--good); font-weight:600; }
  .panel-meta { display:flex; align-items:center; gap:8px; font-size:12.5px; margin-bottom:18px; }
  .panel-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
  .panel-h2 { display:flex; align-items:center; gap:7px; font-family:var(--sans); font-size:11px;
    font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint);
    margin:30px 0 12px; }
  .panel-h2 svg { color:var(--ink-faint); }
  .panel-h2 .muted { letter-spacing:0; text-transform:none; font-weight:500; font-size:11px; white-space:nowrap; }

  /* lineage thread */
  .lineage { margin-top:6px; }
  .thread { position:relative; }
  .thread-node { display:grid; grid-template-columns:24px 1fr; width:100%; text-align:left;
    align-items:stretch; }
  .thread-rail { display:flex; justify-content:center; position:relative; }
  .thread-rail::before { content:""; position:absolute; top:0; bottom:0; width:1.5px; background:var(--border); }
  .thread-node:first-child .thread-rail::before { top:10px; }
  .thread-node:last-child .thread-rail::before { bottom:auto; height:10px; }
  .thread-pip { width:10px; height:10px; border-radius:999px; margin-top:7px; z-index:1; flex-shrink:0; }
  .thread-pip--current { background:var(--clay); box-shadow:0 0 0 3px var(--clay-soft); }
  .thread-pip--superseded { background:var(--surface); border:1.5px solid var(--border-strong); }
  .thread-body { padding:2px 0 18px 12px; border-radius:8px; }
  .thread-node--active .thread-body { }
  .thread-node:not(.thread-node--active):hover .thread-title { color:var(--clay-deep); text-decoration:underline; text-underline-offset:2px; }
  .thread-top { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
  .thread-date { font-size:11.5px; color:var(--ink-faint); white-space:nowrap; }
  .vstatus { font-size:10px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
    padding:1px 7px; border-radius:999px; }
  .vstatus--current { background:var(--clay-soft); color:var(--clay-deep); }
  .vstatus--superseded { background:var(--surface-2); color:var(--ink-muted); }
  .thread-date { font-size:11.5px; color:var(--ink-faint); }
  .thread-title { font-family:var(--serif); font-size:15.5px; color:var(--ink); display:block; }
  .thread-node--active .thread-title { color:var(--ink); }

  /* related */
  .rel-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    padding:11px 12px; border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:8px;
    background:var(--surface); transition:border-color .12s, background .12s; }
  .rel-row:hover { border-color:var(--border-strong); background:var(--surface-2); }
  .rel-row svg:first-child { color:var(--clay); flex-shrink:0; }
  .rel-title { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13.5px; }
  .rel-row svg:last-child { color:var(--ink-faint); flex-shrink:0; }

  /* captured-in */
  .captured-in { margin-top:8px; padding:16px; background:var(--surface-2); border-radius:var(--r); border:1px solid var(--border); }
  .captured-in .panel-h2 { margin-top:0; }
  .cap-row { display:flex; align-items:center; gap:8px; font-size:12.5px; }
  .cap-date { font-weight:600; }
  .cap-summary { margin-top:8px; font-size:13.5px; color:var(--ink-body-2); line-height:1.55; }

  /* ── Composer ── */
  .composer { background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r);
    box-shadow:var(--shadow); padding:14px; margin:16px 0 6px;
    animation:composer-in .22s cubic-bezier(.22,.61,.36,1); }
  @keyframes composer-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
  .composer-top { display:flex; align-items:center; margin-bottom:10px; }
  .composer-spacer { flex:1; }
  .seg-b svg { flex-shrink:0; }
  .composer-title { width:100%; font-family:var(--serif); font-size:19px; font-weight:500;
    color:var(--ink); padding:4px 2px; border:none; outline:none; background:none; }
  .composer-title::placeholder { color:var(--ink-faint); font-weight:400; }
  .composer-body { width:100%; font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink);
    border:none; outline:none; resize:vertical; padding:6px 2px; background:none; min-height:64px; }
  .composer-body::placeholder { color:var(--ink-faint); }
  .composer-foot { display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:12px;
    border-top:1px solid var(--border); flex-wrap:wrap; }
  .composer-tags { font-size:12.5px; border:1px solid var(--border); border-radius:var(--r-sm);
    padding:5px 10px; outline:none; background:var(--bg); color:var(--ink); width:200px; }
  .composer-tags::placeholder { color:var(--ink-faint); }
  .src-toggle { display:inline-flex; background:var(--surface-2); border:1px solid var(--border);
    border-radius:999px; padding:2px; gap:2px; }
  .src-opt { font-size:12px; color:var(--ink-muted); padding:4px 11px; border-radius:999px; }
  .src-opt--on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); font-weight:500; }
  .composer-hint { font-size:11px; color:var(--ink-faint); }
  .btn-ghost { font-size:13px; color:var(--ink-muted); padding:7px 12px; border-radius:8px; }
  .btn-ghost:hover { background:var(--surface-2); color:var(--ink); }
  .btn-primary { font-size:13px; font-weight:500; color:#fff; background:var(--clay);
    padding:7px 16px; border-radius:999px; transition:background .14s, opacity .14s; }
  .btn-primary:hover { background:#b1543d; }
  .btn-primary:disabled { opacity:.4; cursor:not-allowed; }

  /* just-added highlight */
  .just-added { animation:added 2.1s ease; }
  @keyframes added {
    0% { box-shadow:0 0 0 2px var(--clay); background:var(--clay-soft); }
    100% { box-shadow:var(--shadow-sm); background:var(--surface); }
  }

  /* ── Command palette ── */
  .cmd-scrim { position:fixed; inset:0; background:rgba(26,25,21,.34); z-index:60;
    display:flex; align-items:flex-start; justify-content:center; padding-top:13vh;
    animation:fade .14s ease; }
  @keyframes fade { from { opacity:0; } to { opacity:1; } }
  .cmd { width:min(620px, 92vw); background:var(--surface); border:1px solid var(--border-strong);
    border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden;
    animation:cmd-in .18s cubic-bezier(.22,.61,.36,1); }
  @keyframes cmd-in { from { opacity:0; transform:translateY(-10px) scale(.985); } to { opacity:1; transform:none; } }
  .cmd-input-row { display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid var(--border); }
  .cmd-input-row svg { color:var(--ink-faint); }
  .cmd-input { flex:1; font-family:var(--sans); font-size:16px; color:var(--ink); border:none; outline:none; background:none; }
  .cmd-input::placeholder { color:var(--ink-faint); }
  .cmd-results { max-height:48vh; overflow-y:auto; padding:8px; }
  .cmd-empty { padding:28px 14px; text-align:center; color:var(--ink-muted); font-size:13.5px; }
  .cmd-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left;
    padding:10px 12px; border-radius:var(--r-sm); }
  .cmd-row--sel { background:var(--clay-soft); }
  .cmd-ic { width:30px; height:30px; flex-shrink:0; display:grid; place-items:center; border-radius:8px;
    background:var(--surface-2); color:var(--ink-muted); }
  .cmd-row--sel .cmd-ic { background:var(--surface); color:var(--clay); }
  .cmd-main { flex:1; min-width:0; display:flex; flex-direction:column; }
  .cmd-label { font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cmd-sub { font-size:12px; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cmd-type { font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    color:var(--ink-faint); flex-shrink:0; }
  .cmd-foot { display:flex; align-items:center; gap:14px; padding:10px 16px; border-top:1px solid var(--border);
    background:var(--bg); font-size:12px; color:var(--ink-muted); }
  .cmd-foot .kbd { margin-right:2px; }
  .cmd-foot-spacer { flex:1; }

  /* scrollbars */
  .main::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .panel-scroll::-webkit-scrollbar, .cmd-results::-webkit-scrollbar { width:10px; }
  .main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .panel-scroll::-webkit-scrollbar-thumb, .cmd-results::-webkit-scrollbar-thumb {
    background:var(--border-strong); border-radius:99px; border:3px solid var(--bg); }
  code { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.92em;
    background:var(--surface-2); padding:1px 5px; border-radius:5px; }

  @media (max-width:860px) {
    .shell { grid-template-columns:1fr; }
    .sidebar { display:none; }
    .main { padding:24px 20px 80px; }
  }

/* Account dropdown menu (avatar) */
.avatar-menu { position: relative; display: inline-flex; }
.avatar-btn { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }
.avatar-menu .menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-lg, var(--shadow));
  min-width: 150px; padding: 6px; z-index: 60;
}
.avatar-menu .menu-item {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  border-radius: var(--r-sm); color: var(--ink); text-decoration: none;
  font-size: 13px; background: none; border: none; font-family: inherit; cursor: pointer;
}
.avatar-menu .menu-item:hover { background: var(--surface-2); }

/* Login page — reuses the boot loader's converge animation as its hero.
   The .boot-lockup/.boot-word/.bd/.boot-ring rules + keyframes are defined
   globally in index.html; here we just supply its CSS variables + chrome. */
.login {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); padding: 24px;
  --boot-clay: #c96442; --boot-mute: #b7b2a6; --boot-ink: #1a1915;
  --boot-trail: 183,178,166;
  --shift: 96px; /* refined from the rendered wordmark width by login.rs */
}
:root[data-theme="dark"] .login {
  --boot-clay: #d97f5a; --boot-mute: #5a564d; --boot-ink: #efeadf;
  --boot-trail: 90,86,77;
}
.login-card { text-align: center; max-width: 360px; animation: loginIn .5s ease both; }
.login .boot-lockup { margin-bottom: 22px; }
.login-tagline {
  color: var(--ink-muted); font-size: 14px; line-height: 1.6;
  margin: 0 auto 30px; max-width: 300px;
}
.login-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--clay); color: #fff; text-decoration: none;
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  padding: 11px 22px; border-radius: 999px; box-shadow: var(--shadow);
  transition: background .15s ease, transform .15s ease;
}
.login-btn:hover { background: var(--clay-deep); transform: translateY(-1px); }
@keyframes loginIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .login-card { animation: none; } }

/* First-run empty-tenant onboarding (rendered in the main pane) */
.onboard { max-width: 760px; margin: 0 auto; padding: 48px 8px 80px; }
.onboard-hero { text-align: center; margin-bottom: 36px; }
.onboard-mark {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: 14px; background: var(--clay-soft); color: var(--clay);
  margin-bottom: 16px;
}
.onboard-title {
  font-family: var(--serif); font-weight: 500; font-size: 30px;
  letter-spacing: -.015em; color: var(--ink); margin: 0 0 10px;
}
.onboard-sub { color: var(--ink-muted); font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 460px; }
.onboard-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.onboard-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px;
}
.onboard-ic {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--surface-2); color: var(--ink-body);
  margin-bottom: 12px;
}
.onboard-h {
  font-family: var(--serif); font-weight: 500; font-size: 18px;
  color: var(--ink); margin: 0 0 8px;
}
.onboard-p { color: var(--ink-body); font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
.onboard-cmd {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 12px; overflow-x: auto; white-space: nowrap;
}
.onboard-hint { color: var(--ink-faint); font-size: 12px; margin: 10px 0 0; }
.onboard-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-muted); }
.onboard-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--clay); color: #fff; border: none; border-radius: var(--r-sm);
  padding: 9px 14px; font-family: var(--sans); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s ease;
}
.onboard-btn:hover { background: var(--clay-deep); }
.onboard-foot { text-align: center; color: var(--ink-faint); font-size: 12.5px; margin: 30px 0 0; }
@media (max-width: 720px) { .onboard-paths { grid-template-columns: 1fr; } }

/* Sync-devices modal (reuses .scrim for the backdrop) */
.modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(520px, calc(100vw - 32px)); max-height: min(80vh, 640px);
  display: flex; flex-direction: column; z-index: 70;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg, var(--shadow));
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.modal--on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.modal-title { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0; color: var(--ink); }
.modal-scroll { padding: 16px 18px 20px; overflow-y: auto; }
.modal-intro { color: var(--ink-muted); font-size: 13px; line-height: 1.6; margin: 0 0 16px; }
.dev-create { display: flex; gap: 8px; margin-bottom: 16px; }
.dev-name {
  flex: 1; padding: 9px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); background: var(--bg); color: var(--ink);
  font-size: 13px; font-family: var(--sans);
}
.dev-name:focus { outline: none; border-color: var(--clay); }
.btn-gen {
  background: var(--clay); color: #fff; border: none; border-radius: var(--r-sm);
  padding: 9px 14px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn-gen:hover { background: var(--clay-deep); }
.dev-empty { color: var(--ink-faint); font-size: 13px; margin: 0; }
.dev-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-top: 1px solid var(--border);
}
.dev-row-name { font-size: 13px; color: var(--ink); font-weight: 500; }
.dev-row-id {
  margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink-faint);
}
.creds-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px; margin-bottom: 16px;
}
.creds-warn {
  color: var(--clay-deep); font-size: 12.5px; display: flex; align-items: center;
  gap: 6px; margin-bottom: 10px;
}
.creds-label {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); margin: 9px 0 3px;
}
.creds-val {
  display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--ink); word-break: break-all;
}
.creds-secret-row { display: flex; align-items: center; gap: 8px; }
.creds-secret { flex: 1; }
.btn-copy {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--ink);
}
.btn-copy:hover { background: var(--surface-2); }
.creds-details { margin-top: 10px; }
.creds-details summary { font-size: 12px; color: var(--ink-muted); cursor: pointer; }
.creds-snippet {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--ink-body); white-space: pre; overflow-x: auto;
}
.creds-hint { color: var(--ink-faint); font-size: 11.5px; margin: 10px 0 0; }
.modal-err { color: var(--clay-deep); font-size: 12.5px; margin: 10px 0 0; }
.creds-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Project header actions + delete-project confirm */
.title-actions { display: flex; gap: 8px; align-items: center; }
.btn-del-project {
  background: none; color: var(--ink-muted); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 7px 12px; font-size: 13px; cursor: pointer;
  font-family: var(--sans); transition: color .15s ease, border-color .15s ease;
}
.btn-del-project:hover { color: #c0392b; border-color: #c0392b; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.btn-cancel {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 9px 14px; font-size: 13px; cursor: pointer; color: var(--ink);
}
.btn-cancel:hover { background: var(--surface-2); }
.btn-danger {
  background: #c0392b; color: #fff; border: none; border-radius: var(--r-sm);
  padding: 9px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn-danger:hover:not(:disabled) { background: #a93226; }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }
/* Play the convergence once and hold the settled lockup (the shared boot
   keyframes loop; these one-shot variants end on the final "converge." state). */
/* Selectors must out-specify index.html's per-dot `.bd.c`/`.bd.l1` (0,0,2)
   rules, or their `infinite` wins the tie on source order. */
.login .boot-word, .login .boot-merge,
.login .boot-merge .bd, .login .boot-merge .boot-ring {
  animation-iteration-count: 1; animation-fill-mode: forwards;
}
.login .boot-word         { animation-name: lgWord; }
.login .boot-merge        { animation-name: lgMerge; }
.login .boot-merge .bd.c  { animation-name: lgPeriod; }
@keyframes lgWord {
  0%, 40% { opacity: 0; }
  58%, 100% { opacity: 1; }
}
@keyframes lgMerge {
  0%, 40% { transform: translateX(calc(-1 * var(--shift))); }
  56%, 100% { transform: translateX(0); }
}
@keyframes lgPeriod {
  0%, 24% { transform: scale(.5);  background: var(--boot-mute); opacity: .6; }
  34%     { transform: scale(1.4); background: var(--boot-clay); opacity: 1; }
  42%, 100% { transform: scale(1); background: var(--boot-clay); opacity: 1; }
}

/* Sharing — sidebar shared section, project badge, share modal */
.proj--shared .proj-ic { color: var(--clay); }
/* A project conveyed by a group, nested under the group's row. */
.proj--nested { padding-left: 30px; }
.proj--nested .proj-ic { color: var(--ink-muted); }
.proj-access {
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--clay-deep); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 7px; flex-shrink: 0;
}
.proj.active .proj-access { background: var(--surface); }
.share-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500;
  color: var(--clay-deep); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 11px;
}
.btn-share {
  display: inline-flex; align-items: center; gap: 5px; background: none; color: var(--ink-muted);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 7px 12px;
  font-size: 13px; cursor: pointer; font-family: var(--sans);
  transition: color .15s ease, border-color .15s ease;
}
.btn-share:hover { color: var(--clay); border-color: var(--clay); }
.share-kind { margin-bottom: 12px; }
.share-opts { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.share-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-muted); cursor: pointer; }
.grant-kind { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; }

/* Groups — sidebar section + manage modal */
.nav-row { display: flex; align-items: center; justify-content: space-between; padding-right: 4px; }
.nav-add {
  display: inline-flex; align-items: center; justify-content: center; background: none;
  border: none; color: var(--ink-faint); cursor: pointer; padding: 2px; border-radius: 5px;
}
.nav-add:hover { color: var(--clay); background: var(--surface-2); }
.proj--group .proj-ic { color: var(--ink-muted); }
.group-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font-family: var(--sans);
  transition: border-color .12s, background .12s;
}
.group-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
.group-meta { font-size: 12px; color: var(--ink-faint); margin-left: auto; }
.back-link {
  background: none; border: none; color: var(--ink-muted); cursor: pointer; font-size: 13px;
  font-family: var(--sans); padding: 0; margin-right: 6px;
}
.back-link:hover { color: var(--ink); }
.role-select {
  font-size: 12px; color: var(--ink-muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px 6px;
  font-family: var(--sans); cursor: pointer;
}

/* ADR decisions — status chips, sections, Markdown bodies */
.status-chip {
  display: inline-block; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; line-height: 1.5;
  border: 1px solid var(--border-strong); color: var(--ink-muted); background: var(--surface-2);
}
.status--accepted { color: #3e6b4f; border-color: #b9d4c2; background: #ecf4ee; }
.status--proposed { color: #8a6d1a; border-color: #e3cf96; background: #faf3dd; }
.status--rejected { color: #a13c2e; border-color: #e8b7ad; background: #fbeae6; }
.status--deprecated, .status--superseded { color: var(--ink-faint); text-decoration: line-through; }
.adr-section { margin-top: 18px; }
.alt-row {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin-top: 6px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2);
}
.alt-option { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: line-through; }
.alt-reason { font-size: 12.5px; color: var(--ink-muted); }
.md { font-size: 14px; line-height: 1.55; color: var(--ink-body); overflow-wrap: anywhere; }
.md p { margin: 0 0 10px; }
.md p:last-child { margin-bottom: 0; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; }
.md li { margin: 2px 0; }
.md code {
  font-family: var(--mono); font-size: 12.5px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 4px;
}
.md pre {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; overflow-x: auto; margin: 0 0 10px;
}
.md pre code { background: none; border: none; padding: 0; }
.md h1, .md h2, .md h3 { font-size: 14.5px; margin: 14px 0 6px; }
.md blockquote {
  margin: 0 0 10px; padding: 4px 12px; border-left: 3px solid var(--border-strong);
  color: var(--ink-muted);
}
.md table { border-collapse: collapse; margin: 0 0 10px; }
.md th, .md td { border: 1px solid var(--border); padding: 4px 8px; font-size: 13px; }
.md a { color: var(--clay); }
.group-section {
  font-size: 13px; font-weight: 600; color: var(--ink); margin: 26px 0 12px;
}
.group-section:first-of-type { margin-top: 18px; }
.group-projects { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.group-projects .proj--group { width: 100%; }

/* Settings page (full-screen overlay over the shell) */
.settings {
  position: fixed; inset: 0; z-index: 55; background: var(--bg);
  overflow-y: auto; opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
.settings--on { opacity: 1; pointer-events: auto; }
.set-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--bg);
}
.set-title { font-family: var(--serif); font-weight: 500; font-size: 19px; margin: 0; color: var(--ink); }
.set-body { max-width: 680px; margin: 0 auto; padding: 28px 18px 80px; }
.set-section { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.set-section:last-child { border-bottom: none; }
.set-h { font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0 0 10px; color: var(--ink); }
.set-intro { color: var(--ink-muted); font-size: 13px; line-height: 1.6; margin: 0 0 16px; }
.set-row-actions { display: flex; gap: 8px; margin-top: 14px; }
.set-row-actions a.btn-cancel { text-decoration: none; display: inline-block; }
.set-section--danger .set-h { color: #c0392b; }