/* ---- 08-base.css ---- */
.ui-input2:focus,.ui-input:focus{border-color:var(--ui-ink);box-shadow:0 0 0 1px var(--ui-ink)}
.ui-card2,.ui-card{background:var(--ui-surface);border:1px solid var(--ui-line-soft);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-1)}
.ui-card-flat{box-shadow:none}
.ui-card-float{box-shadow:var(--ui-shadow-2)}
.ui-table{width:100%;border-collapse:collapse;font-family:var(--ui-font);font-size:12.5px}
.ui-table th{font-family:var(--ui-mono);font-size:9.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(0,0,0,0.45);text-align:left;padding:8px 12px;border-bottom:1px solid var(--ui-line)}
.ui-table td{padding:10px 12px;border-bottom:1px solid var(--ui-line-soft);color:var(--ui-ink)}
.ui-table tr:last-child td{border-bottom:none}
.ui-table tr:hover td{background:rgba(0,0,0,0.02)}
.ui-eyebrow{font-family:var(--ui-mono);font-size:9.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(0,0,0,0.45)}
.ui-title{font-family:var(--ui-serif);font-weight:400}
.ui-hr{border:none;height:1px;background:var(--ui-line-soft)}
/* One zoom for every engine. Safari used to be opted out (a stale
   -webkit-named-image @supports hack), which rendered the whole app 6%
   smaller there than in Chrome. Modern Safari implements zoom per spec. */
:root{--ui-zoom:1.06;--vh100:calc(100vh / var(--ui-zoom));--vw100:calc(100vw / var(--ui-zoom))}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg-0);color:var(--ink-hi);font-size:14px;line-height:1.55;overflow:hidden;font-feature-settings:'ss01','cv11','ss03'}
::selection{background:var(--gold);color:#fff}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:'zero','calt'}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.65 0 0 0 0 0.55 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity:0.55;mix-blend-mode:multiply}
.shell{display:grid;grid-template-areas:"topbar topbar" "rail main";grid-template-rows:auto 1fr;grid-template-columns:var(--rail-w) 1fr;height:var(--vh100);position:relative;z-index:2;transition:grid-template-columns 0.35s var(--ease-out)}
.shell.collapsed{grid-template-columns:0 1fr}
.topbar{grid-area:topbar;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 20px;background:var(--bg-raised);border-bottom:1px solid var(--hr);z-index:10;position:relative}
.tb-left{display:flex;align-items:center;gap:12px}
.tb-center{display:flex;align-items:center;gap:40px;justify-self:center}
.tb-right{display:flex;align-items:center;justify-self:end}
.node-mark{display:block;height:31px;width:auto;mix-blend-mode:multiply;cursor:pointer}
.brand-stack{display:flex;align-items:center;gap:11px;position:relative;padding:2px 0;cursor:pointer}
.brand-stack .node-mark{transition:transform 0.5s var(--ease-out),filter 0.4s var(--ease-out)}
.brand-stack:hover .node-mark{transform:translateY(-0.5px)}
.brand-reveal{display:flex;align-items:center;gap:9px;max-width:0;opacity:0;overflow:hidden;transition:max-width 0.85s cubic-bezier(0.55,0,0.4,1) 0.32s,opacity 0.55s var(--ease-out) 0.22s;margin-left:-2px}
.brand-stack:hover .brand-reveal{max-width:240px;opacity:1;transition:max-width 0.65s var(--ease-out) 0.02s,opacity 0.2s var(--ease-out)}
.brand-on{display:inline-flex;align-items:baseline;gap:0;font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:700;font-size:15px;letter-spacing:-0.2px;color:var(--ink-hi);line-height:1;white-space:nowrap;position:relative;top:1px}
.brand-on-letter{display:inline-block;position:relative;clip-path:inset(0 0 100% 0);transform:translateY(6px);opacity:0;transition:clip-path 0.65s cubic-bezier(0.5,0,0.5,1),transform 0.7s cubic-bezier(0.5,0,0.5,1),opacity 0.5s var(--ease-out);will-change:clip-path,transform}
.brand-on-letter:nth-child(2){transition-delay:0s,0s,0s}
.brand-on-letter:nth-child(1){transition-delay:0.1s,0.1s,0.1s}
.brand-stack:hover .brand-on-letter{clip-path:inset(0 0 0 0);transform:translateY(0);opacity:1;transition:clip-path 0.55s var(--ease-out),transform 0.55s var(--ease-out),opacity 0.22s var(--ease-out)}
.brand-stack:hover .brand-on-letter:nth-child(1){transition-delay:0.08s,0.08s,0.08s}
.brand-stack:hover .brand-on-letter:nth-child(2){transition-delay:0.14s,0.14s,0.14s}
.brand-econ-wrap{position:relative;display:inline-block;line-height:0;height:22px;clip-path:inset(0 0 100% 0);transform:translateY(6px);opacity:0;transition:clip-path 0.75s cubic-bezier(0.5,0,0.5,1) 0.05s,transform 0.8s cubic-bezier(0.5,0,0.5,1) 0.02s,opacity 0.55s var(--ease-out);will-change:clip-path,transform}
.brand-stack:hover .brand-econ-wrap{clip-path:inset(0 0 0 0);transform:translateY(0);opacity:1;transition:clip-path 0.6s var(--ease-out) 0.22s,transform 0.6s var(--ease-out) 0.22s,opacity 0.25s var(--ease-out) 0.22s}
.brand-econ-logo{height:22px;width:auto;display:block;visibility:hidden;opacity:0}
.brand-econ-shine{position:absolute;inset:0;background:linear-gradient(90deg,#DF6662 0%,#DF6662 14%,#36AA75 30%,#36AA75 44%,#C0CAE8 60%,#C0CAE8 76%,#DF6662 100% );background-size:220% 100%;animation:brandEconFlow 3.6s linear infinite;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:left center;mask-position:left center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none;opacity:0;transition:opacity 0.4s var(--ease-out)}
.brand-econ-shine.ready{opacity:0}
.brand-stack:hover .brand-econ-shine.ready{opacity:1;transition:opacity 0.4s var(--ease-out) 0.22s}
@keyframes brandEconFlow{0%{background-position:0% 50%}100%{background-position:220% 50%}}
body.topbar-collapsed .brand-stack{display:none}
@media (prefers-reduced-motion:reduce){.brand-reveal,.brand-on-letter,.brand-econ-wrap{transition-duration:0.15s !important;transition-delay:0s !important}
.brand-econ-shine{animation:none !important;background-position:0% 50% !important}}
.collapse-btn{width:30px;height:30px;border-radius:7px;background:transparent;border:1px solid var(--hr);display:grid;place-items:center;color:var(--ink-mid);cursor:pointer;transition:all 0.2s var(--ease-out)}
.collapse-btn:hover{background:var(--bg-1);color:var(--ink-hi);border-color:var(--hr-strong)}
.collapse-btn svg{width:13px;height:13px;transition:transform 0.3s var(--ease-out)}
.shell.collapsed .collapse-btn svg{transform:rotate(180deg)}
.tb-link{position:relative;padding:6px 10px;line-height:1.45;color:var(--ink-mid);font-size:13.5px;font-weight:450;letter-spacing:-0.005em;cursor:pointer;transition:color 0.22s var(--ease-out),transform 0.18s var(--ease-out);display:inline-flex;align-items:center;gap:7px;border-radius:7px;isolation:isolate}
.tb-link[data-nav="dashboard"]{--tbl-accent:#C0CAE8}
.tb-link[data-nav="agents"]{--tbl-accent:#36AA75}
.tb-link[data-nav="friends"]{--tbl-accent:#DF6662}
.tb-link:hover{color:var(--ink-hi)}
.tb-link.active{color:var(--ink-hi);font-weight:450;background:none;padding:6px 10px;border-radius:7px;box-shadow:none}
.tb-link.active::after{display:none}
.tb-link.active:hover{color:var(--ink-hi);background:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.tb-link.active::after{display:none}}
.user-chip{display:inline-flex;align-items:center;gap:11px;padding:3px 12px 3px 3px;border-radius:var(--ui-radius);background:var(--bg-1);border:1px solid var(--hr);cursor:pointer;transition:background 0.18s var(--ease-out),border-color 0.18s var(--ease-out),transform 0.18s var(--ease-out),box-shadow 0.18s var(--ease-out)}
.user-chip:hover{background:var(--bg-2);border-color:var(--hr-strong);transform:translateY(-1px);box-shadow:0 4px 10px -3px rgba(10,10,10,0.10)}
.user-chip:active{transform:translateY(0)}
.user-chip .avatar{width:26px;height:26px;border-radius:50%;background:#DF6662;display:grid;place-items:center;font-family:'Inter',system-ui,sans-serif;font-size:10.5px;color:#fff;font-weight:700;letter-spacing:0.02em;flex-shrink:0}.user-chip .u-name{font-size:13px;font-weight:500;color:var(--ink-hi);line-height:1;letter-spacing:-0.005em}
.rail{grid-area:rail;background:var(--bg-0);overflow:hidden;min-height:0;position:relative;transition:opacity 0.25s var(--ease-out)}
.shell.collapsed .rail{opacity:0;pointer-events:none}
.rail-view{display:none;height:100%;grid-template-rows:auto 1fr;overflow:hidden}
.rail-hd{padding:18px 16px 14px;border-bottom:1px solid var(--hr)}
.rail-hd .eye{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.26em;color:var(--ink-low);text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.rail-hd .eye::before{content:'';width:16px;height:1px;background:currentColor;opacity:0.6}
.rail-hd h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:28px;line-height:1.05;margin-top:8px;letter-spacing:-0.015em;color:var(--ink-hi)}
.rail-hd h2 em{font-style:italic;color:var(--gold-dp)}
.rail-hd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rail-hd-top h2{flex:1}
.rail-collapse-btn{width:30px;height:30px;border-radius:7px;background:transparent;border:1px solid var(--hr);color:var(--ink-mid);cursor:pointer;display:grid;place-items:center;transition:all 0.2s var(--ease-out);flex-shrink:0;margin-top:4px}
.rail-collapse-btn:hover{background:var(--bg-1);color:var(--ink-hi);border-color:var(--hr-strong)}
.rail-collapse-btn svg{width:13px;height:13px;transition:transform 0.3s var(--ease-out)}
.shell.collapsed .rail-collapse-btn svg{transform:rotate(180deg)}
.rail-tools-stack{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.rail-tools-stack .search{width:100%}
.mem-grid-cell{display:none}
.memory-icon-btn svg{width:14px;height:14px;flex-shrink:0;transition:filter 0.32s var(--ease-out)}
.rail-tools{margin-top:12px;display:flex;align-items:center;gap:8px}
.search{flex:1;display:flex;align-items:center;gap:8px;padding:7px 11px;background:var(--bg-raised);border:1px solid var(--hr);border-radius:8px;transition:border-color 0.2s var(--ease-out)}
.search:focus-within{border-color:var(--gold-shd-2);box-shadow:0 0 0 3px var(--gold-shd)}
.search svg{width:13px;height:13px;color:var(--ink-low);flex-shrink:0}
.search input{flex:1;border:0;outline:0;background:transparent;font-family:'Inter',sans-serif;font-size:12.5px;color:var(--ink-hi)}
.search input::placeholder{color:var(--ink-low)}
.search .kbd{font-family:'JetBrains Mono',monospace;font-size:9.5px;padding:2px 5px;background:var(--bg-1);border:1px solid var(--hr);border-radius:3px;color:var(--ink-low);letter-spacing:0.04em}
.main{grid-area:main;background:var(--bg-raised);position:relative;overflow:hidden;min-height:0;min-width:0}
.main::before{content:none}
.main-view{display:none;height:100%;min-height:0;min-width:0}
/* ---- 51-base.css ---- */
/* ---- stage runtime (generic) ------------------------------------------------
   Views are activated by the router with .is-active; new stages need no
   per-stage display rules in core CSS. */
.main-view.is-active{display:grid}
.rail-view.is-active{display:grid}
.stage-unavailable{display:grid;place-items:center;height:100%;background:var(--bg-raised)}
.stage-unavailable-card{text-align:center;padding:38px 46px;border:1px solid var(--hr);border-radius:12px;background:var(--bg-0)}
.stage-unavailable-eye{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.26em;text-transform:uppercase;color:var(--ink-low)}
.stage-unavailable-name{font-family:'Instrument Serif',serif;font-size:30px;margin-top:8px;color:var(--ink-hi)}
.stage-unavailable-note{font-size:12.5px;color:var(--ink-mid);margin-top:6px}
/* ============ tokens (app-wide custom properties) ============ */
/* Design tokens recovered from the legacy-core split. These are app-wide
   custom properties (--bg-raised, --content-wide, grid metrics, ...) that
   every sheet may rely on, so they load with the shell, right after base. */
/* from stages/profile/styles/profile.css */
:root{--bg-0:#FFFFFF;--bg-1:#E9E6DE;--bg-2:#E9E6DE;--bg-raised:#FFFFFF;--bg-hover:rgba(10,10,10,0.045);--bg-active:rgba(10,10,10,0.065);--ink-hi:#0A0A0A;--ink-mid:#545454;--ink-low:#888888;--ink-xlo:#B5B5B5;--c-ink:#000000;--c-coral:#DF6662;--c-green:#36AA75;--c-peri:#C0CAE8;--c-cream:#E9E6DE;--c-white:#FFFFFF;--c-coral-deep:#B85551;--c-green-deep:#2B7258;--c-peri-deep:#98A6CF;--c-cream-deep:#CFC8B6;--ui-bg:var(--c-white);--ui-surface:var(--c-white);--ui-ink:var(--c-ink);--ui-accent:var(--c-coral);--ui-positive:var(--c-green);--ui-negative:var(--c-coral);--ui-line:rgba(0,0,0,0.10);--ui-line-soft:rgba(0,0,0,0.06);--ui-radius:10px;--ui-radius-lg:14px;--ui-shadow-1:0 1px 1px rgba(10,10,10,0.05),0 10px 24px -14px rgba(10,10,10,0.25);--ui-shadow-2:0 1px 1px rgba(10,10,10,0.06),0 24px 48px -24px rgba(10,10,10,0.4);--ui-font:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;--ui-mono:"JetBrains Mono",monospace;--ui-serif:"Instrument Serif",serif;--gold:#DF6662;--gold-br:#DF6662;--gold-dp:#DF6662;--gold-shd:rgba(223,102,98,0.08);--gold-shd-2:rgba(223,102,98,0.14);--gold-glow:rgba(223,102,98,0.22);--green:#36AA75;--green-br:#36AA75;--green-dp:#2B7258;--red:#DF6662;--red-br:#DF6662;--yellow:#DF6662;--yellow-dp:#B85551;--blue:#C0CAE8;--blue-br:#C0CAE8;--slate:#98A6CF;--tan:#DF6662;--hr:rgba(10,10,10,0.07);--hr-strong:rgba(10,10,10,0.12);--ease-out:cubic-bezier(0.2,0.9,0.2,1);--rail-w:300px;--content-chat:720px;--content-narrow:612px;--content-wide:1080px;--page-gutter:24px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--bp-xs:420px;--bp-sm:768px;--bp-md:960px;--bp-lg:1100px}
/* from core/shell/chrome/topbar-mode.css */
:root{--pm-w:163px;--pm-gap:14px}
/* from core/shell/chrome/topbar-mode.css */
:root{--sp-page-margin:96px;--sp-section:160px;--sp-block:80px;--sp-block-lg:96px;--sp-card-gap:32px;--sp-card-pad:36px;--sp-head-body:44px;--sp-text-media:64px;--sp-prefooter:232px;--measure-prose:700px}
/* from core/shell/menu/menu-base.css */
:root{--ds-r-xs:9999px;--ds-r-sm:9999px;--ds-r-md:18px;--ds-r-lg:20px;--ds-r-xl:18px;--ds-r-2xl:24px;--ds-r-pill:9999px;--ds-sp-micro:8px;--ds-sp-sm:16px;--ds-sp-comp:24px;--ds-sp-content:64px;--ds-sp-section:120px;--ds-sp-section-lg:160px;--ds-col-gap:32px;--ds-fs-hero:72px;--ds-fs-section:48px;--ds-fs-card:28px;--ds-fs-subhead:22px;--ds-fs-body:17px;--ds-fs-body-sm:15px;--ds-fs-meta:12px;--ds-fs-mono:11px;--ds-hairline:1px solid rgba(0,0,0,0.08)}
/* from core/ui/styles/polish.css */
:root{--grid-max:1320px;--grid-content:1280px;--grid-margin-l:88px;--grid-margin-r:96px;--grid-gutter:32px;--grid-col:calc((var(--grid-content) - (11 * var(--grid-gutter))) / 12);--rhythm-title:64px;--rhythm-content:48px;--rhythm-section:64px;--rhythm-prefooter:120px;--rail-w:clamp(300px,26vw,380px)}
/* from core/ui/styles/polish.css */
:root{--ds-t4:#A39E96}

/* Secondary token scale (--ds-*), consolidated here from shell/core/polish.
   Legacy vocabulary — new work should use the primary tokens above. */
:root{--ds-white:#FAFAF9;--ds-bone:#F4F2EE;--ds-stone:#EAE7E1;--ds-smoke:#D8D4CD;--ds-ash:#B4AFA7;--ds-graphite:#6B6560;--ds-charcoal:#2C2B29;--ds-ink:#0D0D0C;--ds-bg:#F7F5F2;--ds-canvas:#FAFAF9;--ds-panel:#FFFFFF;--ds-card:#FFFFFF;--ds-card-hi:#FFFFFF;--ds-menu:#FFFFFF;--ds-line:rgba(10,9,8,0.07);--ds-line-md:rgba(10,9,8,0.10);--ds-line-hi:rgba(10,9,8,0.14);--ds-t1:#0D0D0C;--ds-t2:#4A4845;--ds-t3:#8A8682;--ds-t4:#B4AFA7;--ds-accent:#D4635F;--ds-accent-deep:#A84D4A;--ds-accent-soft:rgba(212,99,95,0.09);--ds-accent-glow:rgba(212,99,95,0.18);--ds-pos:#35A870;--ds-pos-deep:#2A6E4E;--ds-pos-soft:rgba(53,168,112,0.10);--ds-shadow-0:0 0 0 1px rgba(10,9,8,0.07);--ds-shadow-1:0 0 0 1px rgba(10,9,8,0.06),0 1px 2px rgba(10,9,8,0.04),0 4px 12px -4px rgba(10,9,8,0.10);--ds-shadow-2:0 0 0 1px rgba(10,9,8,0.07),0 2px 4px rgba(10,9,8,0.05),0 8px 24px -8px rgba(10,9,8,0.14);--ds-shadow-3:0 0 0 1px rgba(10,9,8,0.08),0 4px 8px rgba(10,9,8,0.06),0 16px 40px -12px rgba(10,9,8,0.22),0 32px 64px -24px rgba(10,9,8,0.12);--ds-shadow-4:0 0 0 1px rgba(10,9,8,0.10),0 8px 16px rgba(10,9,8,0.08),0 24px 56px -16px rgba(10,9,8,0.30),0 48px 96px -32px rgba(10,9,8,0.18);--ds-r-xs:4px;--ds-r-sm:7px;--ds-r-md:10px;--ds-r-lg:14px;--ds-r-xl:18px;--ds-r-2xl:24px;--ds-r-pill:999px;--ds-ease:cubic-bezier(0.16,1,0.3,1);--ds-ease-in:cubic-bezier(0.4,0,1,1);--ds-t-fast:120ms;--ds-t-base:200ms;--ds-t-slow:340ms}/* The content column: elements that claim menu alignment start here —
   flush against the menu block's right edge, tracking its width and gap. */
:root{--menu-rail:calc(var(--pm-w, 182px) + var(--pm-gap, 15px) * 2 + 26px)}

/* Ink used on dark menu surfaces — warm paper white, not pure white. */
:root{--ink-on-dark:#F5F1E6}