/* HOTFIX docs/51: every page that loads shell.js MUST also <link> this sheet
   (shell.js now self-heals a missing link). Without it the product bar renders
   as raw links and the desk collapses. Do not ship shell.js without shell.css. */
/* ============================================================================
   BlockGenie Codex — shared app shell
   One product bar, one command palette, one sign-in card, one table voice.
   Loaded by every surface before the surface's own sheet. Tokens repeat the
   Night Desk system (docs/18) so this sheet stands alone if a page forgets.
   ========================================================================== */

:root {
  /* ============ docs/82 — Brandpatch screen direction ============
     One desk, one lane, two engines — lime means happening now.
     Binding tokens. Night is the default room; the day room flips the
     luminance order below. Legacy names (--ink/--room/--bone/--glacier…)
     are kept as aliases so every surface sheet resolves, but they now point
     at Brandpatch's own greys: no glacier blue anywhere in the product,
     no violet, no glass, no glow. Ember is failure and nothing else. */
  --bp-ground: #0d0d0d; --bp-paper: #161616; --bp-paper-2: #1e1e1e;
  --bp-ink: #f2ede7; --bp-ink-dim: #a8a49e; --bp-hair: #2c2c2c;
  --bp-lime: #deec71; --bp-lime-ink: #0d0d0d;
  --bp-ember: #d9705e;

  --ink: var(--bp-ground); --room: #111111; --panel: var(--bp-paper); --panel-2: var(--bp-paper-2);
  --edge: var(--bp-hair); --edge-soft: #202020; --edge-strong: #3a3a3a;
  --bone: var(--bp-ink); --bone-dim: var(--bp-ink-dim); --faint: #8a867f;
  /* glacier is retired: every former glacier usage now reads as ink */
  --glacier: var(--bp-ink); --glacier-dim: var(--bp-ink-dim); --glacier-sunk: var(--bp-paper-2);
  --ember: var(--bp-ember); --ember-sunk: #2c1a18;
  --moss: var(--bp-ink-dim); --moss-sunk: var(--bp-paper-2);

  /* ---- semantic tokens (docs/52) ---- */
  --on-bone: #0d0d0d;        /* text on a --bone solid */
  --bone-hi: #ffffff;        /* --bone solid, hovered */
  --on-ember: #1a0f0d;       /* text on an --ember solid */
  --ember-hi: #e58472;       /* --ember solid, hovered */
  --ember-soft: #f0b3a8;     /* ember text on --ember-sunk */
  --code-fg: #ddd9d2;        /* code and pre bodies */
  --strong-fg: #ffffff;      /* <strong> inside a reply */
  --tok-kw: #cfcac2; --tok-str: #b8b4ac; --tok-num: #e2ddd4;
  --wash: transparent;                 /* no ambient glow in the product */
  --scrim: rgba(13, 13, 13, .62);      /* dialog backdrops */
  --tap: rgba(242, 237, 231, .12);     /* -webkit-tap-highlight-color */
  --slab-sheen: transparent;
  /* the lamp (docs/43 §0.2): the one ground the room flips to when the machine
     hands you a code or a key. Bone in the night; ink in the day. */
  --lamp-bg: #f2ede7; --lamp-fg: #0d0d0d; --lamp-tape: #5c5a58; --lamp-sub: #2a2a2a;
  --lamp-link: #0d0d0d; --lamp-edge: #cbc7c2; --lamp-hi: #ffffff;

  /* the lane: lime is a GROUND with ink type on it — never type, never a line */
  --lane: var(--bp-lime); --lane-ink: var(--bp-lime-ink);
  --e-lane: cubic-bezier(.2, .7, .2, 1);

  /* one display voice: Playfair Display italic, one line per surface, ≥40px.
     Plus Jakarta Sans works; DM Mono (lowercase) reports. */
  --display: "Playfair Display", "Playfair Display Fallback", "Iowan Old Style", Georgia, serif;
  --serif: var(--display);
  --sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* no 10px, no 11px anywhere in app chrome: the floor is 12px */
  --t-title: 1.0625rem; --t-body: 1rem; --t-ui: .9375rem; --t-sm: .8125rem; --t-micro: .75rem;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;
  /* radius is a scale, not a mood: 3 for chips and keys, 6 for controls and
     inputs, 10 for menus and dialogs, 14 for the one slab. The pill is gone —
     the alias stays so no sheet breaks, but it now means "a control". Only the
     lane ring is round. */
  --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-pill: 6px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .34);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .3), 0 14px 34px -10px rgba(0, 0, 0, .5);
  --sh-3: 0 4px 14px rgba(0, 0, 0, .34), 0 26px 60px -16px rgba(0, 0, 0, .66);
  --e-out: cubic-bezier(.22, .68, .28, 1);
  /* motion budget: only live turns move. Menus open in ≤120ms. */
  --d-press: 100ms; --d-hover: 120ms; --d-enter: 180ms; --d-panel: 120ms;

  /* the product bar: one height everyone lays out against */
  --bar-h: 48px;
  --z-bar: 70; --z-bar-menu: 85; --z-palette: 95;
}

/* ============================================================================
   Day Desk — the light theme (docs/52-light-mode.md)
   Same room, lights on. Paper and bone grounds, ink type, glacier deepened
   until it reads as text (5.2:1 on --room), ember and moss likewise. Every
   token keeps its name so the six surface sheets need no second ramp: the
   luminance order simply reverses (--ink is now the brightest ground, --bone
   the darkest type). Selector beats the surfaces' own `:root` blocks on
   specificity, which is the whole trick. Every text token clears 4.5:1 on
   every ground, including --panel-2 (the hover layer).
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;
  /* the day room is Brandpatch's own ground: cream, paper, ink, hair */
  --bp-ground: #f2ede7; --bp-paper: #faf7f2; --bp-paper-2: #e9e3da;
  --bp-ink: #0d0d0d; --bp-ink-dim: #5c5a58; --bp-hair: #cbc7c2;
  --bp-ember: #b4432e;

  --ink: var(--bp-ground); --room: #f5f1eb; --panel: var(--bp-paper); --panel-2: var(--bp-paper-2);
  --edge: var(--bp-hair); --edge-soft: #dedad3; --edge-strong: #a9a6a2;
  --bone: var(--bp-ink); --bone-dim: var(--bp-ink-dim); --faint: #6b6864;
  --glacier: var(--bp-ink); --glacier-dim: var(--bp-ink-dim); --glacier-sunk: var(--bp-paper-2);
  --ember: var(--bp-ember); --ember-sunk: #fbe5df;
  --moss: var(--bp-ink-dim); --moss-sunk: var(--bp-paper-2);

  --on-bone: #f2ede7; --bone-hi: #2a2a2a;
  --on-ember: #ffffff; --ember-hi: #9c3723; --ember-soft: #8a2f1f;
  --code-fg: #2a2826; --strong-fg: #0d0d0d;
  --tok-kw: #3a3835; --tok-str: #5c5a58; --tok-num: #1f1e1c;
  --wash: transparent;
  --scrim: rgba(13, 13, 13, .38);
  --tap: rgba(13, 13, 13, .12);
  --slab-sheen: transparent;
  --lamp-bg: #0d0d0d; --lamp-fg: #f2ede7; --lamp-tape: #a8a49e; --lamp-sub: #d6d1c7;
  --lamp-link: #f2ede7; --lamp-edge: #3a3a3a; --lamp-hi: #2a2a2a;

  /* daylight shadows: shorter, lower alpha — elevation, not gloom */
  --sh-1: 0 1px 2px rgba(13, 13, 13, .08);
  --sh-2: 0 1px 3px rgba(13, 13, 13, .07), 0 12px 32px -12px rgba(13, 13, 13, .18);
  --sh-3: 0 2px 8px rgba(13, 13, 13, .08), 0 24px 56px -18px rgba(13, 13, 13, .28);
}
/* in the day the bar is a white strip on paper; hover needs the deeper bone,
   not a whiter white */
html[data-theme="light"] .pbar { border-bottom-color: var(--edge-soft); }
html[data-theme="light"] .pbar-brand:hover,
html[data-theme="light"] .pbar-host:hover,
html[data-theme="light"] .pbar-burger:hover,
html[data-theme="light"] .pbar-k:hover,
html[data-theme="light"] .pbar-theme:hover,
html[data-theme="light"] .pbar-user:hover,
html[data-theme="light"] .pbar-user[aria-expanded="true"] { background: var(--panel-2); }
html[data-theme="light"] .pbar-k { border-color: var(--edge-soft); }
html[data-theme="light"] .pbar-k kbd, html[data-theme="light"] .sh-palette-search kbd { background: var(--ink); }
html[data-theme="light"] .sh-table tbody tr:hover td { background: var(--panel-2); }
@media (max-width: 860px) {
  html[data-theme="light"] .pbar-nav a[aria-current="page"] { background: var(--panel-2); }
}

/* the switch itself: one crossfade on grounds and type, 220ms, then gone.
   Added by Shell.theme.set() and removed on the next frame after it lands. */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color 220ms var(--e-out), color 220ms var(--e-out), border-color 220ms var(--e-out), fill 220ms var(--e-out), stroke 220ms var(--e-out) !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }
}

/* ── product bar ──────────────────────────────────────────────────────── */
.pbar {
  position: relative; z-index: var(--z-bar);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s4);
  height: var(--bar-h); padding: 0 var(--s4) 0 var(--s3);
  background: var(--ink);
  border-bottom: 1px solid var(--edge-soft);
  font-family: var(--sans); font-size: var(--t-sm); color: var(--bone);
  isolation: isolate;
}
.pbar * { box-sizing: border-box; }
.pbar .ic { width: 16px; height: 16px; flex: none; display: block; }

.pbar-brand {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 34px; padding: 0 var(--s2) 0 var(--s1); border-radius: var(--r-md);
  color: var(--bone); text-decoration: none; font-weight: 600; letter-spacing: 0; white-space: nowrap;
}
.pbar-brand:hover { background: var(--panel); }
.pbar-brand svg { width: 22px; height: 22px; flex: none; }
.pbar-brand small { font-family: var(--mono); font-size: var(--t-micro); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); margin-left: 2px; }

.pbar-nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
/* docs/54 More: the overflow menu is absolutely positioned below the bar; clipping the
   nav row hid every link while the chevron still toggled — looked like a dead control. */
@media (min-width: 861px) {
  .pbar-nav { overflow: visible; }
}
.pbar-nav .sheet-foot { display: none; } /* only the mobile sheet has room for the one-liner */
/* words, weight 500, no glyphs: the door is named, not pictured */
.pbar-nav a {
  position: relative;
  display: inline-flex; align-items: center;
  height: var(--bar-h); padding: 0 var(--s3);
  color: var(--bone-dim); text-decoration: none; white-space: nowrap;
  font-weight: 500; letter-spacing: 0;
  transition: color var(--d-hover) var(--e-out);
}
.pbar-nav a:hover { color: var(--bone-dim); }
/* the active door is the only lit underline on the bar — an indicator, not a pill,
   so it never competes with the pill tabs inside pages */
.pbar-nav a::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -1px; height: 2px;
  background: var(--bone);
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform var(--d-hover) var(--e-out), opacity var(--d-hover) var(--e-out);
}
.pbar-nav a[aria-current="page"] { color: var(--bone); }
.pbar-nav a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }
.pbar-nav a:hover::after { transform: scaleX(1); opacity: .35; }
.pbar-nav a[aria-current="page"]:hover::after { opacity: 1; }
.pbar-nav a:focus-visible { outline: 2px solid var(--glacier); outline-offset: -4px; border-radius: var(--r-md); }
.pbar-more { position: relative; height: var(--bar-h); }
.pbar-more[open] { z-index: 2; }
.pbar-more summary {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  height: var(--bar-h); padding: 0 var(--s3); list-style: none;
  color: var(--bone-dim); cursor: pointer; font-weight: 500;
}
.pbar-more summary::-webkit-details-marker { display: none; }
.pbar-more summary:hover, .pbar-more summary[aria-current="page"] { color: var(--bone); }
.pbar-more summary .ic { width: 12px; height: 12px; transition: transform var(--d-hover) var(--e-out); }
.pbar-more[open] summary .ic { transform: rotate(180deg); }
.pbar-more-list {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 14rem; z-index: var(--z-bar-menu);
  padding: 6px; background: var(--panel); border: 1px solid var(--edge);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  transform-origin: top left;
  animation: sh-pop var(--d-panel) var(--e-out) both;
}
.pbar-nav .pbar-more-list a {
  display: grid; height: auto; min-height: 44px; padding: 6px 10px 6px 14px;
  border-radius: var(--r-md);
  color: var(--bone);
}
/* the selection bar: one vocabulary for every menu in the product — a 2px
   lane at the row's left edge, not a glowing icon or a checkmark */
.pbar-nav .pbar-more-list a::after {
  display: block; left: 4px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto;
  border-radius: 1px; transform: scaleY(0); transform-origin: center; opacity: 0;
}
.pbar-nav .pbar-more-list a:hover::after, .pbar-nav .pbar-more-list a:focus-visible::after,
.pbar-nav .pbar-more-list a[aria-current="page"]::after { transform: scaleY(1); opacity: 1; }
.pbar-nav .pbar-more-list a:hover { background: var(--panel-2); }
.pbar-more-list small {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0;
  color: var(--faint); font-weight: 400;
}

.pbar-right { display: flex; align-items: center; gap: var(--s2); justify-self: end; }

/* the palette trigger: a labelled key, not a fake search field */
.pbar-k {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 32px; padding: 0 var(--s2) 0 10px;
  border: 1px solid var(--edge-soft); border-radius: var(--r-md);
  background: transparent; color: var(--faint); cursor: pointer;
  font-size: var(--t-sm);
  transition: border-color var(--d-hover) var(--e-out), color var(--d-hover) var(--e-out), background-color var(--d-hover) var(--e-out);
}
.pbar-k:hover { border-color: var(--edge); color: var(--bone-dim); background: var(--panel); }
.pbar-k kbd {
  font-family: var(--mono); font-size: var(--t-micro); padding: 1px 5px;
  border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: var(--r-sm);
  background: var(--panel); color: var(--bone-dim);
}
.pbar-k span { min-width: 9ch; text-align: left; }

/* theme switch: sun by night, moon by day — the icon names the room you would
   enter, not the one you are in */
.pbar-theme {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--bone-dim); cursor: pointer;
  transition: background-color var(--d-hover) var(--e-out), color var(--d-hover) var(--e-out);
}
.pbar-theme:hover { background: var(--panel); color: var(--bone); }
.pbar-theme .ic { width: 16px; height: 16px; }
.pbar-theme .ic-sun { display: none; }
html[data-theme="light"] .pbar-theme .ic-sun { display: none; }
html[data-theme="light"] .pbar-theme .ic-moon { display: block; }
html:not([data-theme="light"]) .pbar-theme .ic-sun { display: block; }
html:not([data-theme="light"]) .pbar-theme .ic-moon { display: none; }

.pbar-host {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 var(--s2);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none;
  color: var(--faint); white-space: nowrap; text-decoration: none; border-radius: var(--r-sm);
}
.pbar-host:hover { background: var(--panel); color: var(--bone-dim); }
.pbar-host .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.pbar-host .dot.is-on { background: var(--glacier); }
.pbar-host .dot.is-off { background: var(--ember); }

.pbar-user {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 32px; padding: 0 var(--s2) 0 var(--s1);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--bone); cursor: pointer; font-size: var(--t-sm);
  transition: background-color var(--d-hover) var(--e-out), border-color var(--d-hover) var(--e-out);
}
.pbar-user:hover, .pbar-user[aria-expanded="true"] { background: var(--panel); border-color: var(--edge-soft); }
/* a desk tag, not a profile circle: the ring belongs to the lane */
.pbar-user .avatar {
  width: 24px; height: 24px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--glacier-sunk); color: var(--glacier);
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500; text-transform: none; letter-spacing: 0;
}
.pbar-user .avatar.is-out { background: var(--panel-2); color: var(--faint); }
.pbar-user .who { display: grid; line-height: 1.15; text-align: left; min-width: 0; }
.pbar-user .who b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14ch; }
.pbar-user .who small { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--faint); }
.pbar-user .chev { color: var(--faint); transition: transform var(--d-hover) var(--e-out); }
.pbar-user[aria-expanded="true"] .chev { transform: rotate(180deg); }
.pbar-signin {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s3);
  border-radius: var(--r-sm); border: 1px solid var(--edge-strong);
  color: var(--bone); text-decoration: none; font-size: var(--t-sm); font-weight: 500;
  transition: background-color var(--d-hover) var(--e-out), border-color var(--d-hover) var(--e-out);
}
.pbar-signin:hover { background: var(--panel-2); border-color: var(--faint); }

.pbar-burger { display: none; }

/* account menu */
.pbar-menu {
  position: fixed; z-index: var(--z-bar-menu);
  min-width: 16rem; padding: 6px;
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  transform-origin: top right;
  animation: sh-pop var(--d-panel) var(--e-out) both;
}
.pbar-menu[hidden] { display: none; }
.pbar-menu .menu-who { padding: 10px 10px var(--s3); display: grid; gap: 3px; }
.pbar-menu .menu-who b { font-weight: 500; font-size: var(--t-ui); }
.pbar-menu .menu-who span { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--faint); }
.pbar-menu .menu-rule { height: 1px; background: var(--edge-soft); margin: 4px 6px; }
.pbar-menu a, .pbar-menu button {
  position: relative;
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 38px;
  padding: 0 10px 0 14px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--bone-dim); cursor: pointer; text-align: left;
  font: inherit; font-size: var(--t-sm); text-decoration: none;
  transition: background-color var(--d-hover) var(--e-out), color var(--d-hover) var(--e-out);
}
.pbar-menu a::before, .pbar-menu button::before {
  content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 2px; border-radius: 1px;
  background: var(--bone); transform: scaleY(0); opacity: 0;
  transition: transform var(--d-hover) var(--e-out), opacity var(--d-hover) var(--e-out);
}
.pbar-menu a:hover, .pbar-menu button:hover, .pbar-menu a:focus-visible, .pbar-menu button:focus-visible { background: var(--panel-2); color: var(--bone); }
.pbar-menu a:hover::before, .pbar-menu button:hover::before, .pbar-menu a:focus-visible::before, .pbar-menu button:focus-visible::before { transform: scaleY(1); opacity: 1; }
.pbar-menu .danger::before { background: var(--ember); }
.pbar-menu .ic { color: var(--faint); }
.pbar-menu .menu-hint { margin-left: auto; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--faint); }
.pbar-menu .danger:hover { color: var(--ember); }

/* ── mobile: the doors fold into a sheet ─────────────────────────────── */
@media (max-width: 860px) {
  .pbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2); padding: 0 var(--s3); }
  .pbar-nav {
    position: fixed; z-index: var(--z-bar-menu);
    left: 0; right: 0; top: var(--bar-h); bottom: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0; overflow: auto;
    padding: var(--s3) var(--s3) calc(var(--s6) + env(safe-area-inset-bottom));
    background: var(--ink); border-top: 1px solid var(--edge-soft);
  }
  .pbar-nav.is-open { display: flex; animation: sh-fade var(--d-enter) var(--e-out) both; }
  .pbar-nav a { height: 48px; padding: 0 var(--s3); border-radius: var(--r-md); font-size: var(--t-ui); }
  .pbar-nav a::after { display: none; }
  .pbar-nav a[aria-current="page"] { background: var(--panel); }
  .pbar-more { height: auto; }
  .pbar-more summary { height: 48px; padding: 0 var(--s3); border-radius: var(--r-md); font-size: var(--t-ui); }
  .pbar-more-list { position: static; min-width: 0; padding: 0 0 var(--s2) var(--s3); border: 0; box-shadow: none; background: transparent; }
  .pbar-nav .pbar-more-list a { min-height: 44px; }
  .pbar-nav .sheet-foot { display: block; margin-top: auto; padding: var(--s4) var(--s3) 0; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--faint); }
  .pbar-burger {
    display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
    border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--bone-dim); cursor: pointer;
  }
  .pbar-burger:hover { background: var(--panel); color: var(--bone); }
  .pbar-brand small { display: none; }
  /* the wordmark yields before the controls do: one line, ellipsized */
  .pbar-brand { min-width: 0; }
  .pbar-brand > span:not(.avatar) { display: inline-block; max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* a phone has no ⌘: the trigger is the same GO tape the palette header wears */
  .pbar-k span, .pbar-k kbd { display: none; }
  .pbar-k { padding: 0 10px; }
  .pbar-k::before { content: "go"; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--glacier-dim); }
  .pbar-host { display: none; }
  .pbar-user .who, .pbar-user .chev { display: none; }
  .pbar-user { padding: 0 3px; }
}

/* ── command palette (shared) ─────────────────────────────────────────── */
.sh-palette {
  margin: 12vh auto 0; padding: 0; width: min(92vw, 38rem);
  background: var(--panel); color: var(--bone);
  border: 1px solid var(--edge); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); overflow: hidden;
  font-family: var(--sans); font-size: var(--t-ui);
}
/* ⌘K is a hundred-times-a-day action: a 90ms fade in, a hard cut out */
.sh-palette[open] { animation: sh-fade 90ms var(--e-out) both; }
.sh-palette::backdrop { background: var(--scrim, rgba(6, 8, 11, .62)); }
.sh-palette-search { display: flex; align-items: center; gap: var(--s3); min-height: 60px; padding: 0 var(--s5); border-bottom: 1px solid var(--edge-soft); }
.sh-palette-search .tape { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--bone); }
.sh-palette-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--bone); font: inherit; font-size: var(--t-title); outline: none; }
.sh-palette-search input::placeholder { color: var(--faint); }
.sh-palette-search kbd { font-family: var(--mono); font-size: var(--t-micro); padding: 1px 5px; border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: var(--r-sm); background: var(--room); color: var(--bone-dim); }
.sh-palette-list { max-height: 50vh; overflow: auto; padding: var(--s2); }
.sh-palette-group { padding: var(--s3) var(--s2) var(--s1); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--faint); }
/* a row is a word and its mono meta; selection is a bar at the left edge, not
   a glowing icon */
.sh-palette-item {
  position: relative;
  display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 40px;
  padding: 0 var(--s3); border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--bone-dim); cursor: pointer; text-align: left; font: inherit; font-size: var(--t-ui);
}
.sh-palette-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 1px; background: var(--bone); opacity: 0; }
.sh-palette-item b { font-weight: 500; color: var(--bone); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-palette-item small { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; color: var(--faint); white-space: nowrap; }
.sh-palette-item[aria-selected="true"], .sh-palette-item:hover { background: var(--panel-2); }
.sh-palette-item[aria-selected="true"]::before { opacity: 1; }
.sh-palette-empty { padding: var(--s5) var(--s4); color: var(--faint); font-size: var(--t-sm); }

/* ── sign-in card (used by every door that has no session) ───────────── */
.sh-signin {
  position: relative; z-index: 1;
  width: min(100% - var(--s8), 34rem); margin: 12vh auto 0;
  padding: var(--s7) var(--s7) var(--s6);
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--r-xl);
  font-family: var(--sans);
  animation: sh-rise var(--d-enter) var(--e-out) both;
}
.sh-signin .tape { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--faint); }
/* the one display line a gated surface gets — larger, because it is the page */
.sh-signin h2 { margin: var(--s3) 0 var(--s3); font-family: var(--display); font-style: italic; font-weight: 600; font-size: clamp(2.5rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.015em; color: var(--bone); text-wrap: balance; }
.sh-signin p { margin: 0; color: var(--bone-dim); font-size: var(--t-ui); max-width: 44ch; }
.sh-signin .row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.sh-signin .foot { margin-top: var(--s4); font-size: var(--t-sm); color: var(--faint); }
.sh-signin .btn-solid {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4);
  border-radius: var(--r-md); border: 1px solid transparent; background: var(--bone); color: var(--on-bone);
  font: inherit; font-size: var(--t-ui); font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background-color var(--d-hover) var(--e-out), transform var(--d-press) var(--e-out);
}
.sh-signin .btn-solid:hover { background: var(--bone-hi); }
.sh-signin .btn-solid:active { transform: translateY(1px); }
.sh-signin .btn-quiet { background: none; border: 0; color: var(--bone-dim); font: inherit; font-size: var(--t-sm); cursor: pointer; text-decoration: none; padding: var(--s2) 0; }
.sh-signin .btn-quiet:hover { color: var(--bone); }

/* ── shared table voice: human-readable rows, not JSON ────────────────── */
.sh-table-wrap { overflow-x: auto; border: 1px solid var(--edge-soft); border-radius: var(--r-md); background: var(--room); }
.sh-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.sh-table th, .sh-table td { padding: 10px var(--s3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--edge-soft); }
.sh-table th { font-family: var(--mono); font-size: var(--t-micro); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); white-space: nowrap; background: var(--ink); }
.sh-table tbody tr:last-child td { border-bottom: 0; }
.sh-table tbody tr:hover td { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.sh-table td.num, .sh-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sh-table .cell-title { display: grid; gap: 2px; min-width: 0; }
.sh-table .cell-title b { font-weight: 500; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-table .cell-title small, .sh-table .mono { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; color: var(--faint); }
.sh-table td.actions { text-align: right; white-space: nowrap; }
.sh-table .actions .btn-quiet, .sh-table .actions .btn-outline, .sh-table .actions select { min-height: 32px; }
.sh-table tr.is-muted td { color: var(--faint); }
.sh-table tr.is-muted .cell-title b { color: var(--bone-dim); text-decoration: line-through; text-decoration-color: var(--faint); }

/* chips: role and state, never colour alone. A chip is a piece of tape — a
   3px rectangle with a square state mark, not a pill with a dot. */
.sh-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 7px;
  border-radius: var(--r-sm); border: 1px solid var(--edge);
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--bone-dim); white-space: nowrap;
}
.sh-chip::before { content: ""; width: 5px; height: 5px; background: var(--faint); }
.sh-chip.is-on::before { background: var(--glacier); }
.sh-chip.is-off::before { background: var(--ember); }
.sh-chip.is-ok::before { background: var(--moss); }
.sh-chip.role-owner-admin { border-color: var(--glacier-dim); color: var(--glacier); }
.sh-chip.role-owner-admin::before { background: var(--glacier); }
.sh-chip.role-manager::before { background: var(--bone-dim); }
.sh-chip.role-agent::before { background: var(--faint); }
.sh-chip.role-dev::before { background: var(--moss); }
.sh-chip.role-viewer { border-style: dashed; }
.sh-chip.role-viewer::before { background: transparent; border: 1px solid var(--faint); box-sizing: border-box; }

/* limit bar: a used/cap pair drawn as a hairline, labelled in text */
.sh-meter { display: grid; gap: 4px; min-width: 9rem; }
.sh-meter .bar { position: relative; height: 3px; border-radius: 2px; background: var(--edge); overflow: hidden; }
.sh-meter .bar i { position: absolute; inset: 0; background: var(--glacier); transform-origin: left; transform: scaleX(var(--fill, 0)); }
.sh-meter .bar.is-hot i { background: var(--ember); }
.sh-meter small { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0; color: var(--faint); font-variant-numeric: tabular-nums; }

/* empty state: an instruction, not a poem */
.sh-empty {
  display: grid; gap: var(--s2); padding: var(--s6) var(--s5);
  border: 1px dashed var(--edge); border-radius: var(--r-md); color: var(--bone-dim);
  font-size: var(--t-sm); max-width: 52ch;
}
.sh-empty b { font-weight: 500; color: var(--bone); font-size: var(--t-ui); }

/* ── shared keyframes; the bar itself never animates ─────────────────── */
@keyframes sh-pop  { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sh-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── loaders, one vocabulary for every surface (docs/53) ─────────────────
   Two honest waits and nothing else:
     hairline sweep  — a request is in flight, no progress known. A 22px line
                       that scales from its left edge; on a solid button it
                       replaces the label.
     lane phase      — the thinking ring breathes in opacity only, 1.5s linear.
                       Never scale, never spin: a spinner says "computer", a
                       breathing ring says "the lane is held".
   No ring spinners, no three dots, no skeleton shimmer. */
@keyframes sh-sweep {
  0%   { transform: scaleX(.2); opacity: .3; }
  50%  { transform: scaleX(1);  opacity: 1; }
  100% { transform: scaleX(.2); opacity: .3; }
}
@keyframes sh-sweep-center {
  0%   { transform: translate(-50%, -50%) scaleX(.2); opacity: .35; }
  50%  { transform: translate(-50%, -50%) scaleX(1);  opacity: 1; }
  100% { transform: translate(-50%, -50%) scaleX(.2); opacity: .35; }
}
@keyframes sh-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.sh-wait { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: var(--t-sm); color: var(--bone-dim); }
.sh-wait::after, .sh-busy::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 22px; height: 1px; margin-left: var(--s2);
  background: var(--glacier); transform-origin: left;
  animation: sh-sweep 1.4s var(--e-out) infinite;
}
.sh-wait::after { margin-left: 0; }
.sh-breathe { animation: sh-breathe 1.5s linear infinite; }

/* tiny shared shell labels: render literal glyphs, never synthesized text */
.pbar-brand small,
.pbar-host,
.pbar-user .avatar,
.pbar-user .who small,
.pbar-menu .menu-who span,
.pbar-menu .menu-hint,
.sh-palette-search .tape,
.sh-palette-group,
.sh-palette-item small,
.sh-signin .tape,
.sh-table th,
.sh-table .cell-title small,
.sh-table .mono,
.sh-chip,
.sh-meter small {
  letter-spacing: 0;
  text-transform: none;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  @keyframes sh-pop  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sh-rise { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sh-sweep { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  @keyframes sh-sweep-center { 0%, 100% { opacity: .35; transform: translate(-50%, -50%); } 50% { opacity: 1; transform: translate(-50%, -50%); } }
  .pbar-nav a::after, .pbar-user .chev { transition: none; }
  .sh-wait::after, .sh-busy::after, .sh-breathe { animation-duration: 2s; animation-timing-function: linear; }
}

@media (forced-colors: active) {
  .pbar { border-bottom: 1px solid CanvasText; }
  .pbar-nav a[aria-current="page"]::after { background: Highlight; }
  .sh-chip::before { forced-color-adjust: none; }
}