/* Canvas 2.0 Adaptive Shell chrome (preview approximation of nav/DesktopShell:
   TopNav + LeftRail) — token-driven, mirrors docs/.../canvas2.0-design-reference. */
.shell { min-height: 100vh; background: rgb(var(--basalt-deep)); color: rgb(var(--text));
  font-family: var(--font-inter); display: flex; flex-direction: column; }

/* ---- TopBar / TopNav ---- */
.shell-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem; height: 56px; border-bottom: 1px solid var(--border);
  background: rgb(var(--basalt-surface) / .72); backdrop-filter: blur(24px); }
.shell-wordmark { font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; font-size: 1rem; }
.shell-wordmark b { color: rgb(var(--circuit-glow)); }
.shell-modules { display: flex; gap: .15rem; margin-left: .5rem; overflow-x: auto; }
.shell-mod { font-family: var(--font-jetbrains); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .45rem .6rem; border-radius: .5rem; color: rgb(var(--text) / .5); white-space: nowrap; cursor: pointer; }
.shell-mod[data-active="true"] { color: rgb(var(--basalt-deep)); background: rgb(var(--circuit-glow)); font-weight: 600; }
.shell-mod:hover:not([data-active="true"]) { color: rgb(var(--text)); background: rgb(var(--basalt-bright)); }
.shell-spacer { flex: 1; }
.shell-kbd { font-family: var(--font-jetbrains); font-size: .62rem; color: rgb(var(--text) / .5);
  border: 1px solid var(--border); border-radius: .5rem; padding: .35rem .6rem; }
.shell-pill { font-family: var(--font-jetbrains); font-size: .6rem; letter-spacing: .12em; border: 1px solid var(--border);
  border-radius: 999px; padding: .3rem .1rem; display: inline-flex; }
.shell-pill span { padding: .15rem .55rem; border-radius: 999px; color: rgb(var(--text) / .5); }
.shell-pill span[data-on="true"] { background: rgb(var(--circuit-glow)); color: rgb(var(--basalt-deep)); }
.shell-ava { width: 28px; height: 28px; border-radius: 50%; background:
  radial-gradient(circle at 30% 30%, rgb(var(--circuit-glow)), rgb(var(--accent-red))); }

/* ---- body: StreamRail + content ---- */
.shell-body { display: flex; flex: 1; min-height: 0; }
.shell-rail { width: 208px; flex-shrink: 0; border-right: 1px solid var(--border);
  padding: 1rem .75rem; display: flex; flex-direction: column; gap: 1.25rem; background: rgb(var(--basalt-surface) / .35); }
.shell-rail-bucket-label { font-family: var(--font-jetbrains); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgb(var(--text) / .35); margin: 0 0 .4rem .4rem; }
.shell-rail-item { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem; border-radius: .5rem;
  font-size: .82rem; color: rgb(var(--text) / .7); cursor: pointer; }
.shell-rail-item[data-active="true"] { background: rgb(var(--basalt-bright)); color: rgb(var(--text));
  box-shadow: inset 2px 0 0 rgb(var(--circuit-glow)); }
.shell-rail-item:hover:not([data-active="true"]) { background: rgb(var(--basalt-surface)); color: rgb(var(--text)); }
.shell-rail-dot { width: .45rem; height: .45rem; border-radius: 50%; background: rgb(var(--circuit-glow) / .6); }
.shell-content { flex: 1; min-width: 0; overflow: auto; }
/* the embedded surface fills the content region */
.shell-content > .canvas-design-library,
.shell-content > .canvas-ops-console { padding: 1.5rem clamp(1rem, 3vw, 2rem); }