:root{--composer-h:0px;--panel-max-h:44vh;--panel-max-h-m:56vh;--navy:#070f1c;--navy2:#0a1626;--panel:#0e1b2e;--panel2:#0c1828;--line:#15293f;--line2:#26405c; /* V2: canvas navy reconciled to the landing hero (#070f1c) so the chat matches www */ --ink:#eaf6fb;--mut:var(--chrome-mut);--faint:var(--chrome-mut);--label:var(--chrome-mut);--gold:#c79a3e;--gold2:#e0b85a;--gold-deep:#c79a3e;--gold-ink:#1a1305; --cyan:#22d3ee;--cyan-soft:#7ee8f7;--good:#5e9e7a;--bad:#fb7185;--chip:#16263a; /* CHROME — the top panel's own palette, deliberately THEME-INVARIANT (founder 2026-09-07: "leave the top panel in one colour so we are consistent and dont jump around"). These are NOT redefined in body.light, so the header is the same navy on every page and in both themes. Before this, the chat page's header was hard navy while the chat-space header followed --panel2, which body.light turns near-white (#f3f8fc) - so the pale shield vanished and the bar changed colour between pages. These tokens are now the ONLY definition of the top bar's colours: the monolith's literal sheet that used to carry a second copy left this repository in B2 (2026-09-07). */ --chrome:#0c1727;--chrome2:#0a1422;--chrome-line:#16304a;--chrome-ink:#eaf6fb;--chrome-mut:#93a6bb; /* ·CORTEX is FLAT in the darker gold (founder 2026-09-07: "I actually liked the flat CORTEX I just want it in the darker gold that we are using so that its more distinctive"). It cannot use --gold, which body.light repaints to #9a6f1c and would darken the wordmark on a bar that no longer changes; this is --gold's dark-theme value, pinned. It replaced a cyan-to-gold gradient, and since B2 it is the one definition of the mark anywhere in this repository. */ --chrome-gold:#c79a3e; /* V4: 8pt spacing rhythm — one scale so vertical rhythm is pixel-clean (ChatGPT/Claude parity) */ --sp1:8px;--sp2:16px;--sp3:24px;--sp-half:4px; /* V10: prose tokens — one body size + line-height across answer / reasoning / canvas reading surfaces */ --fs-body:15.5px;--lh-body:1.7; /* ── DECLARED SCALE (2026-08-27) ───────────────────────────────────────────────────── A measured audit found 33 distinct font sizes, 6 weights, 16 line-heights and 27 letter-spacings on this page, with only six tokens declared — sizes had grown by accretion, which is why the rhythm drifted. This is the declared system. It EXTENDS the existing --fs-/--lh-/--sp names rather than adding a parallel set. Type: 1.2-ish modular steps anchored on the body size already in use, so adopting a token is a no-op visually where the literal already matched the step. */ --fs-2xs:11px;--fs-xs:12px;--fs-sm:13px;--fs-md:15px; --fs-lg:17px;--fs-xl:20px;--fs-2xl:26px; /* Four DECLARED FLUID steps. This page is fluid by design, so the responsive behaviour is part of the scale rather than an exception to it. Flattening these to fixed px was tried and reverted: it shrank the create headline and lost the hero subline's small-screen step. */ --fs-display:clamp(28px,3.4vw,40px); /* chat hero */ --fs-folio:clamp(30px,4.4vw,46px); /* create desk headline — the folio voice carries more presence */ --fs-subhead:clamp(17px,2.2vw,23px); /* light-panel head */ --fs-lede:clamp(15px,1.9vw,18px); /* hero subline */ /* Line-height: three declared roles — display, heading, prose (--lh-body above). */ --lh-tight:1.15;--lh-snug:1.35; /* Weight: five declared roles. 650 is retired (it was an accretion artefact); --w-heavy is reserved for brand wordmarks, never for UI text. */ --w-regular:400;--w-medium:500;--w-semi:600;--w-bold:700;--w-heavy:800; /* Tracking: four declared roles. Display tightens, mono eyebrows open up. */ --tr-tight:-.032em;--tr-snug:-.02em;--tr-none:0;--tr-wide:.16em; /* Space: the existing 8pt rhythm, completed. --sp-tap is the WCAG 2.5.5 touch floor. */ --sp1half:12px;--sp4:32px;--sp5:40px;--sp-tap:44px; /* Dock: the collaboration panel's left column (DOCK_LEFT, 2026-09-04). One declared width, a multiple of 4; --w-* is the weight namespace so this is not --w-dock. SPLIT SCREEN (founder 2026-09-07): "when we start like this I still wanna see the chat so i suggest a split screen so we can still see the shared chat ... that way we make proper progress and we can see the work elara does". 320px was a narrow sidebar you had to trade against the conversation; the collaboration is half the work, so it gets half the room — 50vw, as asked, not a sidebar. Bounded at both ends: never below 320px, where the invite row wraps, and never above 720px, because past that "half" of an ultrawide monitor is a column nobody reads across. On a 1440 laptop that is an exact 720/720 split; on a 1920 screen the chat keeps the extra. --dock-w-call is the incoming-call card, which only ever needed a card's width and was borrowing this one. */ --dock-w:clamp(320px,50vw,720px); --dock-w-call:320px; /* Family: one product face, one mono, one folio serif for the create desk. Inter FIRST — self-hosted @font-face below. With -apple-system/Segoe first, Windows never loads Inter and the chat glyphs look like the landing regression (founder 2026-08-27). */ --ff-product:Inter,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --ff-mono:ui-monospace,Consolas,'SF Mono',monospace; --ff-folio:Georgia,'Times New Roman',serif; /* V11: one shared streaming caret spec (width / em-height / colour) */ --caret-w:7px;--caret-col:var(--gold2); /* MOTION: one duration scale + the house curve, used by every transition on the maps page (2026-09-03) */ --dur-instant:.07s;--dur-fast:.15s;--dur-base:.25s;--dur-slow:.35s;--dur-reveal:.45s;--ease-std:cubic-bezier(.2,.8,.2,1); /* DERIVED SCALE (docs/DESIGN_MATH.md; founder decision D9, 2026-09-05): one base, one ratio, and every fixed step is round-to-half(16px x 1.125^n) for n = -3..6. tests/test_design_math.py recomputes each value from --type-base and --type-ratio and fails on any step that was typed rather than derived. The legacy --fs-* names above keep their values until their judged migration; new surfaces (the proof pages) use the steps. Line boxes: prose boxes --lb-* sit near 1.5x and heading boxes --lbh-* near 1.2x, every one a multiple of 4px, so text of any step lands on the 4px grid. Space extends the same 8pt rhythm; layout widths are whole rems; tints are color-mix of a declared colour, never a hard-coded rgba (the bible's halo rule). */ --type-base:16px;--type-ratio:1.125; --fs-step--3:11px;--fs-step--2:12.5px;--fs-step--1:14px;--fs-step-0:16px;--fs-step-1:18px; --fs-step-2:20.5px;--fs-step-3:23px;--fs-step-4:25.5px;--fs-step-5:29px;--fs-step-6:32.5px; --lb-step--3:16px;--lb-step--2:20px;--lb-step--1:20px;--lb-step-0:24px;--lb-step-1:28px;--lb-step-2:32px; --lbh-step--1:20px;--lbh-step-0:20px;--lbh-step-1:24px;--lbh-step-2:24px;--lbh-step-3:28px;--lbh-step-4:32px;--lbh-step-5:36px;--lbh-step-6:40px; --sp6:48px;--sp8:64px;--sp10:80px; --measure:34rem;--measure-wide:60rem;--col-label:4rem;--logo:30px;--icon:24px; --bw-hair:1px;--bw-rule:2px;--z-header:50;--z-menu:30; --tint-gold:color-mix(in srgb,var(--gold2) 14%,transparent);--tint-cyan:color-mix(in srgb,var(--cyan) 10%,transparent); --tint-ink:color-mix(in srgb,var(--ink) 6%,transparent);--halo-cyan:color-mix(in srgb,var(--cyan) 40%,transparent);--halo-canvas:radial-gradient(1240px 820px at 50% -6%,color-mix(in srgb,var(--cyan) 18%,transparent),transparent 70%);--band-h:calc(var(--sp8) * 8);--band-h-m:calc(var(--sp8) * 9); /* eight section rhythms on desktop, nine on a phone; the nine-everywhere of 2026-09-13 existed only to fit a panel that has since been reverted */--card-min:calc(var(--sp8) * 4); --shade:color-mix(in srgb,var(--navy) 85%,transparent); /* The .LEKOLA CODE ATELIER lockup. It is a brand constant that appears on every surface, and its metrics lived only inside this page's own .ec-lk rules, so a chat-space page could imitate the card but never render it -- which is how the proof pages ended up with a gold-and-grey approximation that dropped the cyan half of the two-tone. Promoted to tokens so ONE source drives the lockup wherever it appears. The tracking is unusually open (.40em) and the sub-line unusually small (8.5px) on purpose: this is a letterpress colophon, not UI text, and neither value belongs on the modular scale. */ --lk-rule:54px;--lk-track:.40em;--lk-track-sub:.46em;--fs-lk:12px;--fs-lk-sub:8.5px; /* PAPER. The family is two-tone: a deep navy canvas carrying white panels (www.elara-cortex.com renders .plan and .card at #fff on a navy .band). A panel cannot get there by picking a light background, because every rule inside it reads --ink, --mut and --line and would keep painting for a dark ground. These are the body.light values, verbatim and from the same palette, exposed at :root so a SECTION can remap the colour tokens for its own subtree -- see .pg-paper in elara_pages.css. One palette, two grounds. */ --paper:#ffffff;--paper-2:#f3f8fc;--paper-ink:#0c1727;--paper-mut:#54677a;--paper-faint:#6a7d8f; --paper-line:#d6e2ec;--paper-line2:#c2d3df;--paper-gold:#805b16;--paper-cyan:#0e7490; --paper-good:#217348;--paper-bad:#b4233d; /* GLOW. The halo on the calling card shipped as three hand-typed rgba stops -- 7/16/31px at .6/.37/.22 -- which is the drift the style bible names by name ("derived from the existing --cyan token via color-mix, never a hard-coded rgba"). Measured 2026-09-07, those numbers were never arbitrary: the radii are the 8pt grid doubled (8, 16, 32; residual <= 1px) and the opacities are a geometric decay on 1/phi = 0.618034 from 0.60 (0.60, 0.3708, 0.2292; max residual 0.0092). That is the same golden mean the type scale's own anchor cites (Tim Brown, A List Apart, 1:1.618), so the glow is a modular scale and is now written as one. The colours are color-mix over --gold2 and --cyan, so a brand colour change carries the halo with it and the literal ratchet stays at zero. Where glow MAY be used is a rule, not a preference: docs/DESIGN_MATH.md. */ /* The cyan edge. Cyan is the brand's second colour and the bible reserves it for the halo, so it enters a page as an EDGE rather than as fill or text: a hairline that says the card is ours without competing with the single gold accent marking the recommended plan. color-mix over --cyan, so a brand change carries it and it never becomes a typed rgba. Two strengths because the ground differs. */ --edge-cyan:color-mix(in srgb,var(--cyan) 62%,var(--line)); --edge-cyan-soft:color-mix(in srgb,var(--cyan) 38%,var(--line));--strobe-edge:conic-gradient(from 0deg,var(--cyan),var(--gold2),var(--cyan));--cta-gold-fill:linear-gradient(180deg,var(--gold2),var(--gold));--grad-gold-cta:var(--cta-gold-fill);--scrim-image:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--chrome) 22%,transparent) 58%,color-mix(in srgb,var(--chrome) 52%,transparent) 100%);--chip-fill:color-mix(in srgb,var(--cyan) 10%,transparent);--chip-line:color-mix(in srgb,var(--cyan) 30%,transparent); /* THE FIELD. A dark band with nothing on it is flat, and the usual cures -- a photograph, a blur, a mesh gradient -- are all foreign to a surface whose whole argument is that its proportions are derived. So the pattern is the space scale drawing ITSELF: three hairline fields at 32, 64 and 128px, the same doubling the glow radii use. They superimpose, so a line falls every 32px, a double every 64 and a triple every 128 -- the octave structure of the 8pt grid, made just visible. The opacities are the same 1/phi = 0.618 decay as the glow (4%, 2.47%, 1.53% of --cyan), so the finest rhythm is the faintest and the eye reads depth rather than stripes. Cyan because the bible reserves it for the halo and this is the halo's field. Nothing here is typed: periods are space tokens, the line weight is --bw-hair, the colours are color-mix, and 45deg is an angle, which the literal ratchet does not count. */ /* Four stops on ONE ramp: the 1/phi decay again, 4% -> 2.47% -> 1.53% -> 0.94%. Each layer's LINE takes one stop and its HALO takes the next, so a line always glows at exactly the strength of the line one order finer than it. The halo is built into the gradient rather than added with a filter: a drop-shadow on a full-bleed rectangle shadows the rectangle, not the hairlines inside it, so it would have produced an edge and no glow at all. */ --field-c1:color-mix(in srgb,var(--cyan) 4%,transparent); --field-c2:color-mix(in srgb,var(--cyan) 2.47%,transparent); --field-c3:color-mix(in srgb,var(--cyan) 1.53%,transparent); --field-c4:color-mix(in srgb,var(--cyan) 0.94%,transparent); /* The halo radius is the layer's own term of the glow scale -- 8, 16, 32 -- which is also its period divided by four, so the coarser the line the wider its glow and the three read as one depth. */ --field-1:repeating-linear-gradient(45deg,var(--field-c1) 0,var(--field-c1) var(--bw-hair),var(--field-c2) var(--bw-hair),transparent var(--glow-r1),transparent var(--sp4)); --field-2:repeating-linear-gradient(45deg,var(--field-c2) 0,var(--field-c2) var(--bw-hair),var(--field-c3) var(--bw-hair),transparent var(--glow-r2),transparent var(--sp8)); --field-3:repeating-linear-gradient(45deg,var(--field-c3) 0,var(--field-c3) var(--bw-hair),var(--field-c4) var(--bw-hair),transparent var(--glow-r3),transparent calc(var(--sp8) * 2)); /* Cycle lengths: consecutive Fibonacci seconds. Each layer drifts exactly ONE of its own periods per cycle, so each loops seamlessly on its own; 34, 55 and 89 share no small common multiple, so the three realign only after their LCM and the combined field is quasi-periodic rather than a loop a reader can catch. Fibonacci because its successive ratios converge on phi -- the constant the glow opacities and the type scale already stand on, so the motion belongs to the same number as the proportions. */ --field-t1:34s;--field-t2:55s;--field-t3:89s;--z-content:1; --glow-r1:var(--sp1);--glow-r2:var(--sp2);--glow-r3:var(--sp4); --glow-gold:0 0 var(--glow-r1) color-mix(in srgb,var(--gold2) 60%,transparent), 0 0 var(--glow-r2) color-mix(in srgb,var(--gold2) 37%,transparent), 0 0 var(--glow-r3) color-mix(in srgb,var(--gold2) 23%,transparent); --glow-cyan:0 0 var(--glow-r1) color-mix(in srgb,var(--cyan-soft) 60%,transparent), 0 0 var(--glow-r2) color-mix(in srgb,var(--cyan-soft) 37%,transparent), 0 0 var(--glow-r3) color-mix(in srgb,var(--cyan-soft) 23%,transparent);--glow-gold-hi:var(--glow-gold),var(--glow-gold);--glow-cyan-hi:var(--glow-cyan),var(--glow-cyan);--dur-breath:3.4s; /* the halo's breath (2026-09-11): the peak is the resting scale laid twice (no new number); one period for the chat and the pages */ /* WHAT SURVIVED THE 2026-09-13 REVERT, and why only this much (docs/DESIGN_MATH.md section 6b). Answering "the tokens are boring" with surfaces, an elevation ramp, gradient text, a glass panel and a gold leading rule added thirteen tokens and broke six lines of this system's own doctrine. The founder read the result as terrible and the audit agreed. What is left is the two things the mathematics admits on its own terms: THE DISPLAY STEP, n = 9 on the same base and ratio, round_half(16 x 1.125^9) = 46 on a 56px line box (1.217, inside the heading range, divisible by four). A bigger headline is scale doing the work rather than paint. THE PAPER FACE, the Computer Modern KaTeX already ships, so a research paper is set in the face its own mathematics is set in, at a 42rem measure. Neither adds a colour, a shadow or an effect. --grad-chrome stays because the top bar and the sidebar foot were ALREADY that gradient as typed literals; naming it removed two literals and changed no pixel. A gradient as a BACKGROUND on chrome is not gradient TEXT (section 7). */ --grad-chrome:linear-gradient(180deg,var(--chrome),var(--chrome2)); --fs-step-9:46px;--lbh-step-9:56px; --ff-paper:KaTeX_Main,'Latin Modern Roman','Computer Modern',Georgia,'Times New Roman',serif;--ff-paper-sans:var(--ff-product);--measure-paper:42rem} /* LIGHT THEME TOKENS. The light theme was 145 of 152 rules hardcoding a colour and only 8 redefining a token, so light-mode contrast could not be COMPUTED at all -- there was no token set to compute from. Every value below is DERIVED from what those rules already use, not invented: #0c1727 ink (x24), #52677a muted (x4), #6a7d8f faint (x3), #0e7490 cyan (x17), #9a6f1c gold (x14), #8a6418 gold-deep (x12), #ffffff panel (x12) -- and each matches the canonical palette in .claude/rules/design_consistency_single_source.md. Safe because the roles are disjoint, measured: --navy/--navy2/--panel/--panel2/--chip/--line are background-only (0 text uses) and --ink/--mut/--faint/--label are text-only. ADDITIVE -- this removes no rule; the 145 hardcoded ones still win on their own selectors and are the remaining migration. What this buys now is that light contrast becomes measurable. */ body.light{ --navy:#f6f9fb;--navy2:#f3f8fc;--panel:#ffffff;--panel2:#f9fcfe; --chip:#eef4f8;--line:#d7e3ec;--line2:#c3d4e0; --ink:#0c1727;--mut:#54677a;--faint:#54677a;--label:#54677a; --gold:var(--paper-gold);--gold-deep:#8a6418; } /* --gold2 and --cyan (and, measured one step later, --cyan-soft) were deliberately NOT redefined above: unlike --ink/--mut/--faint/--label/--navy/--panel (genuinely disjoint, text-only vs background-only per the comment above), these accent tokens are each read by AT LEAST ONE component with a HARDCODED dark background that stays dark in every theme by design -- .bubble pre.code (terminal-style code blocks) for --gold2/--cyan, .side-card .ce for --cyan-soft. light_mode_contrast_audit.py caught 20+ real failures the moment those elements inherited a light-panel-darkened accent instead of the bright one they actually sit on; each redefinition attempt was re-tested against the full audit, not assumed safe from the first one. Only --gold-deep survives broad redefinition -- nothing reads it against a hardcoded-dark background. Components that DO need a darkened accent on an actual light panel (kbdhelp kbd) get their own scoped override below instead of a second global token fight. */ body.light .kbdhelp kbd{color:#0e7490} @font-face{font-family:'Inter';src:url('/vendor/fonts/inter-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Outfit';src:url('/vendor/fonts/outfit-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'JetBrains Mono';src:url('/vendor/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap} *{box-sizing:border-box}html,body{height:100%;margin:0;overflow-x:hidden}html{-webkit-tap-highlight-color:transparent}/* squeeze-proof: no off-canvas panel / transient can ever force a horizontal scrollbar (WCAG 2.2 SC 1.4.10 reflow) */ body{font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink); background:var(--halo-canvas), radial-gradient(1000px 560px at 50% -4%,rgba(224,184,90,.10),transparent 64%),var(--navy); -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden} a{color:inherit;text-decoration:none} svg{display:block} /* gold monochrome icon — every functional glyph inherits gold via currentColor */ .ic{width:18px;height:18px;color:var(--gold2);flex:0 0 auto} /* ---- sidebar ---- */ #side{flex:0 0 auto;align-self:stretch;width:272px;height:100%;max-height:100%;background:linear-gradient(180deg,#0c1727,#0a1422);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;overflow:hidden;transition:width .22s cubic-bezier(.4,0,.2,1),opacity .18s ease} /* slim top bar: the ELARA·CORTEX wordmark lives in the page masthead, so the sidebar reclaims that space (founder 2026-07-04) and the useful content — New chat, Search, Goals, history — sits higher */ #side .top{padding:0 var(--sp1);display:flex;align-items:center;gap:var(--sp1);min-height:var(--sp-tap);height:var(--sp-tap);box-sizing:border-box;flex:0 0 var(--sp-tap);background:linear-gradient(180deg,#0c1727,#0a1422);border-bottom:1px solid rgba(224,184,90,.2)} body.light #side .top{background:linear-gradient(180deg,#ffffff,#f4f8fb);border-bottom:1px solid var(--line2,#d6e1ec)} /* founder: kill the dark dead band at the top of the sidebar in light mode — blend it into the light sidebar */ body.light #side .top .bword{color:#0c1727} /* the ELARA wordmark must be dark on the now-light masthead */ body.light #side .top .railbtn,body.light #side .top .railbtn .ic{color:#52677a} /* panel-toggle + × icons: gold (--gold2) is near-invisible on white — use muted dark ink */ body.light #side .top .shield{filter:brightness(0);opacity:.65} /* logo.png is light-on-transparent (designed for dark sidebar) → black silhouette on white */ body.light #effortSel{background:#eef4f8!important;color:#0c1727!important;border-color:#c3d2df!important} /* founder: the Thinking/Auto select was dark navy (--chip) = a "black box" invisible in light mode; make it legible */ #side .top .bhome{display:flex;align-items:center;gap:9px;text-decoration:none;flex:1 1 auto;min-width:0} #side .top .sp{flex:1 1 auto} /* header shield is SHARP / glow-free, exactly like the landing #ecHdr brand — the halo lives only in the calling card + the hero */ .shield{width:26px;height:26px;filter:none;animation:none} @keyframes halo{0%,100%{}50%{}} @media(prefers-reduced-motion:reduce){.shield,.brain,.empty .logowrap .logo,.empty .logowrap::before,.empty .logowrap::after{animation:none} /* the calling card's reduced-motion rule lives with its one definition in elara_chat_header.css */} #side .bcol{display:none} /* wordmark not repeated in the sidebar — the masthead carries it; reclaim the space */ #side .bword{font-weight:800;letter-spacing:.14em;font-size:13px;line-height:1;color:#eaf6fb}.bword span{background:linear-gradient(90deg,var(--cyan-soft),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent} /* the two org-lines under ELARA·CORTEX — the full landing lockup, scaled for the 272px rail */ #side .binst{display:none}/* the institutional org-lines live in the top
only — the sidebar shows the compact wordmark (no repeat) */ #side .binst span:first-child{color:var(--gold)}#side .binst span:last-child{color:#9fb6c6} body.light #side .binst span:first-child{color:#9a6f1c}body.light #side .binst span:last-child{color:#52677a} .newbtn{margin:12px 12px 6px;padding:11px 13px;border:0;background:linear-gradient(180deg,var(--gold2),var(--gold-deep));color:#1a1305;font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:8px;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease} /* V-pass6: calmer elevation, still the one primary; radius L1106 */ /* display:none added here, unconditionally, on every width (founder, 2026-09-09, live screenshot: "you have 2 of the same button" in full browser mode). #side's own "+ New chat" is ALWAYS the sole entry point now: on true desktop it is on-screen at all times (elara_chat.html:247, no media gate) and stays functional even collapsed to a rail (body.sidecollapsed hides only its text label, confirmed live); everywhere narrower, #menuBtn (verified reachable and functional at 834px too, not just under 760px) opens the same drawer in one tap. The other declarations below are left in place rather than deleted, in case a future context needs this button back. Receipt: artifacts/mobile-declutter-2026-09-09/mobile_declutter_receipt.json */ /* founder 2026-09-16: plus-only tap square on the tool strip (signs, not words). Sidebar keeps the labelled New chat. Duplicate gold word-buttons was the 2026-09-09 defect; a sign vs a labelled rail control is not that defect. */ #newChatTop.newbtn-bar{display:inline-flex;margin:0;padding:0;font-size:var(--fs-sm);width:var(--sp-tap);height:var(--sp-tap);min-width:var(--sp-tap);max-width:var(--sp-tap);min-height:var(--sp-tap);max-height:var(--sp-tap);flex:0 0 var(--sp-tap);z-index:3;position:relative} .newbtn:hover{filter:brightness(1.05);transform:translateY(-1px);}.newbtn:active{transform:translateY(0) scale(.985)}.newbtn .ic{width:16px;height:16px;color:#1a1305} .side-eyebrow{padding:10px 16px 5px;font:700 9.5px/1.4 Consolas,ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)} /* V9: canonical eyebrow tracking .22em (matches site_shell .ec-kicker) */ /* History/goals scroll in #sidescroll. Nav is PINNED above the account/footer so Settings stays in the viewport (live 543: nav lived in the scroller and sat under .side-foot). */ #sidescroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line2) transparent} #sidescroll::-webkit-scrollbar{width:8px}#sidescroll::-webkit-scrollbar-thumb{background:var(--line2)}#sidescroll::-webkit-scrollbar-track{background:transparent} #hist{flex:1 0 auto;overflow-x:hidden;overflow-y:visible;padding:2px 8px 6px} #hist .h{position:relative;display:flex;align-items:center;width:100%;padding:var(--sp1) var(--sp1half);margin:0;border:0;background:transparent;color:var(--mut);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-appearance:none;appearance:none;box-shadow:none;border-radius:0;transition:background .14s ease,color .14s ease,box-shadow .14s ease} /* V4: 8pt rhythm (8/12) · V3: radius stripped · UA button chrome stripped so Workstreams/Knowledge match Collaborations */ #hist .h:hover{background:rgba(224,184,90,.09);color:var(--ink)}#hist .h.on{background:rgba(224,184,90,.14);color:var(--ink);border-left:var(--bw-rule) solid var(--gold)} #hist .h .ht{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:padding-right .12s ease} #hist .h:hover .ht,#hist .h.on .ht{padding-right:30px} #hist .h:focus-within .ht{padding-right:30px} #hist .h .hact{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:1px;opacity:0;transition:opacity .14s ease} #hist .h:hover .hact,#hist .h.on .hact{opacity:1} #hist .h:focus-within .hact{opacity:1} #hist .h .hbtn{width:24px;height:24px;border:0;background:none;color:var(--faint);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:0;-webkit-appearance:none;appearance:none} #hist .h .hbtn:hover{color:var(--gold2);background:rgba(224,184,90,.16)}#hist .h .hbtn.del:hover{color:var(--bad);background:rgba(251,113,133,.16)} #hist .h .hbtn .ic{width:14px;height:14px;color:currentColor} #hist .h:focus{outline:2px solid var(--gold);outline-offset:-2px} #hist .h:focus:not(:focus-visible){outline:none} #hist .hren{flex:1 1 auto;min-width:0;width:100%;background:var(--navy2);border:1px solid var(--gold);color:var(--ink);font:inherit;font-size:13.5px;padding:2px 6px;outline:none;-webkit-appearance:none;appearance:none} /* §27 hover synthesis card — navy chrome, gold labels. Never inherit light --panel white. */ #histSynth.hsynth{position:fixed;z-index:90;width:min(320px,calc(100vw - 24px));max-height:min(420px,70svh);overflow:auto;padding:12px 14px 14px;background:#0e1b2e;color:#eaf6fb;border:1px solid #16304a;border-radius:0;font:inherit;font-size:13px;line-height:1.45} #histSynth.hsynth[hidden]{display:none!important} #histSynth .hs-k{font-weight:600;font-size:12px;line-height:1.35;font-family:inherit;letter-spacing:0;text-transform:none;color:var(--gold2);margin:12px 0 3px} #histSynth .hs-k:first-child{margin-top:0} #histSynth .hs-v{color:#eaf6fb;font-size:14px;line-height:1.45} #histSynth .hs-why{margin-top:10px;color:#8aa3b8;font-size:12px} #histSynth .hs-ttl{font-weight:700;color:#eaf6fb;margin:0 0 6px;font-size:13px} #histSynth .hs-act{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap} #histSynth .hs-act button{background:var(--gold2);color:#1a1305;border:0;padding:8px 12px;font-weight:700;cursor:pointer;font:inherit;font-size:12px} #histSynth .hs-act button:hover{background:#eec684} .hnav{display:flex;flex-wrap:wrap;gap:2px;padding:2px 0 8px} .hnav-b{background:none;border:0;border-bottom:2px solid transparent;color:var(--faint,#6f8499);font:inherit;font-size:10.5px;padding:6px 7px;cursor:pointer} .hnav-b.on{color:var(--gold,var(--gold2));border-bottom-color:var(--gold,var(--gold2));font-weight:600} /* light theme: #c79a3e gold text on the near-white sidebar measured 2.51:1 (light_mode_contrast_audit). The underline keeps the gold brand cue; the LABEL takes the established light-mode gold ink #8a6418 (5.21:1), the same token already used for .collab-start and .cvtrust b. */ body.light .hnav-b.on{color:#8a6418;border-bottom-color:var(--gold,#c79a3e)} /* "Please sign in to …" links: the colour was an inline style pinned to --gold2, so the light theme could not correct it and it measured 1.88:1 on white. Class-based instead. */ .signinlink{color:var(--gold2,var(--gold2));text-decoration:underline;cursor:pointer} body.light .signinlink{color:#8a6418} /* E4 (2026-09-07): the collaboration region of this page, on the declared scale. The plan expected the room strip, the invite block and the share row to live here. They do not — two differently-shaped probes agree this page mentions #roomStrip exactly once, in the button rule further down; every strip rule is built by elara_rooms.js and was migrated in E3. What IS here is the collaborations list in the sidebar and the rail flyout: the surface a person uses to GET to a collaboration, which was carrying raw hex (var(--gold2), #0e1b2e, #0f1d31) rather than tokens. --gold2 IS var(--gold2) and --panel IS #0e1b2e, so these are renames, not repaints; --navy2 replaces #0f1d31 and --ink replaces #eaf6fb on the same basis. The rendered result is checked at four widths and both themes: artifacts/collab-symmetry/collab_symmetry_receipt.json */ #hist .collab-start{display:block;width:calc(100% - var(--sp2));margin:var(--sp-half) var(--sp1) 10px;padding:9px var(--sp1half);border:var(--bw-hair) solid var(--gold2);background:var(--panel);color:var(--gold2);font-weight:var(--w-semi);font-size:var(--fs-sm);font-family:inherit;cursor:pointer;text-align:left;border-radius:0} #hist .collab-start:hover{background:var(--navy2);color:var(--ink)} #hist .collab-f{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:var(--sp1) var(--sp1half);margin:0;border:0;background:none;color:inherit;cursor:pointer;font:inherit;-webkit-appearance:none;appearance:none;box-shadow:none;border-radius:0} #hist .collab-f .hact{display:none!important} #hist .collab-f.collab-room .hact{display:inline-flex!important;margin-left:auto} /* rooms carry the same kebab every chat row has (deletable, 2026-09-04) */ #hist .collab-f:hover{background:color-mix(in srgb,var(--gold2) 12%,transparent)} #hist .collab-av{flex:0 0 28px;width:28px;height:28px;border-radius:50%!important;display:inline-flex;align-items:center;justify-content:center;font-weight:var(--w-bold);font-size:var(--fs-2xs);font-family:inherit;color:var(--gold2);background:var(--panel);border:var(--bw-hair) solid var(--gold2)} #hist .collab-meta{min-width:0;display:flex;flex-direction:column;gap:1px} #hist .collab-name{font-weight:var(--w-semi);color:var(--ink);font-size:var(--fs-sm)} #hist .collab-email{font-size:var(--fs-2xs);color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .leftoff{margin:var(--sp1half) 0 16px;padding:14px 16px;border:1px solid var(--gold2);background:var(--navy2);max-width:62ch;text-align:left;border-radius:0} .leftoff-h{font-weight:var(--w-bold);margin:0 0 var(--sp1);color:var(--ink);font-size:var(--fs-md)} /* The label treatment (bold, tracked, uppercase, gold) is ONE declared rule for BOTH themes now -- previously light silently dropped every one of those (weight 600 not 700, tracking 0 not wide, case sentence not upper, colour a near-miss of --mut instead of the gold accent) so the SAME card read as a confident branded eyebrow in dark and as quiet grey body text in light. Colour is --gold-deep, which the fix above makes theme-correct instead of a hardcoded hex per theme. */ .leftoff-k{font:var(--w-bold) var(--fs-2xs)/1.4 var(--ff-mono);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--gold-deep);margin:var(--sp1) 0 var(--sp-half)} .leftoff-v{color:var(--ink);font-size:13.5px;line-height:var(--lh-body)} .leftoff-empty{color:var(--mut);font-size:13.5px} /* leftover on the empty start: navy chrome (dark hero). Light theme keeps paper on the paper canvas. */ .empty .leftoff{margin:0 auto 18px;padding:16px 18px;max-width:36rem;box-shadow:none} body.light .empty .leftoff{background:var(--panel);border:1px solid var(--line)} body.light .empty .leftoff-h{color:var(--ink);font-size:var(--fs-lg);font-weight:var(--w-semi);letter-spacing:var(--tr-snug);margin:0 0 var(--sp1half)} body.light .empty .leftoff-v{color:var(--ink);font-size:var(--fs-md);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} body:not(.light) .empty .leftoff{background:var(--navy2);border:1px solid var(--gold2)} body:not(.light) .empty .leftoff-h{color:var(--ink);font-size:var(--fs-lg);font-weight:var(--w-bold);letter-spacing:var(--tr-none);margin:0 0 var(--sp1half)} body:not(.light) .empty .leftoff-v{color:var(--ink);font-size:var(--fs-md);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .math-wrap{display:block;max-width:100%} .math-status{display:inline-block;margin-top:4px;font:700 9.5px/1.4 Consolas,ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan,#22d3ee)} #cvwg{padding:10px 14px;border-top:1px solid var(--line,#15293f);font-size:13px;line-height:1.5;color:var(--ink);max-height:40%;overflow:auto} .hempty{padding:18px 14px;color:var(--label);font-size:12.5px;text-align:center;line-height:1.55} /* date-group headers (Today / Yesterday / Previous 7 days …) — replace the single Recent eyebrow */ .hgroup{padding:var(--sp1half) var(--sp1half) var(--sp-half);font:var(--w-bold) var(--fs-2xs)/var(--lh-snug) var(--ff-mono);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--label)} /* N1: date-group headers stick to the top of the scrolling history (ChatGPT/Claude parity) */ #hist .hgroup{position:sticky;top:0;z-index:2;background:#0c1727} body.light #hist .hgroup{background:#f9fcfe} #hist .hgroup.projhd{cursor:pointer} #hist .hgroup:first-child{padding-top:5px} /* search box under New chat */ .searchwrap{position:relative;margin:4px 12px 6px;display:flex;align-items:center} .searchwrap .sic{position:absolute;left:10px;width:15px;height:15px;color:var(--faint);pointer-events:none} #histSearch{width:100%;height:34px;padding:0 30px 0 32px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:inherit;font-size:13px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .14s ease} #histSearch::placeholder{color:var(--faint)}#histSearch:focus{border-color:var(--gold)} .searchwrap .sclr{position:absolute;right:7px;width:22px;height:22px;border:0;background:none;color:var(--faint);cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;-webkit-appearance:none;appearance:none} .searchwrap .sclr.show{display:inline-flex}.searchwrap .sclr:hover{color:var(--gold2)}.searchwrap .sclr .ic{width:13px;height:13px} /* ---- Elara Teams goals sidebar panel — receipt: artifacts/projects-exceed-proof/receipt.json ---- */ .goal-panel{padding:0 0 4px} .gp-hd{display:flex;align-items:center;padding:8px 13px 3px;gap:4px} .hist-hd{padding-top:6px} .gp-lbl{flex:1;font:700 9.5px/1.4 Consolas,ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--label)} /* collapsible section toggle (Goals + Chats) — caret rotates, section hides; state persisted */ .sec-tog{flex:1;min-width:0;display:flex;align-items:center;gap:6px;min-height:26px;border:0;background:none;padding:0;margin:0;cursor:pointer;text-align:left;-webkit-appearance:none;appearance:none;color:inherit} .sec-tog:hover .gp-lbl{color:var(--gold2)} .sec-caret{flex:0 0 auto;width:11px;font-size:9px;line-height:1;color:var(--faint);transition:transform .15s ease} body.goals-collapsed .gp-hd:not(.hist-hd) .sec-caret,body.chats-collapsed .hist-hd .sec-caret{transform:rotate(-90deg)} body.goals-collapsed #goalNew,body.goals-collapsed #goalList,body.goals-collapsed #goalSummPanel{display:none} body.chats-collapsed #hist{display:none} .gp-add{width:22px;height:22px;border:0;background:none;color:var(--faint);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;padding:0;-webkit-appearance:none;appearance:none} .gp-add:hover{color:var(--gold2);background:rgba(224,184,90,.14)} .goal-item{position:relative;display:flex;align-items:center;gap:5px;padding:5px 11px 4px;cursor:pointer;user-select:none;-webkit-user-select:none;font-size:12.5px;color:var(--mut);transition:background .12s ease} .goal-item:hover,.goal-item.gf{background:rgba(224,184,90,.12);color:var(--ink)} .goal-item.gf{border-left:var(--bw-rule) solid var(--cyan)} .goal-item .gt{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .goal-item .gbadge{flex:0 0 auto;font:600 10px/1 Consolas,monospace;background:rgba(34,211,238,.1);color:var(--cyan-soft);padding:1px 5px;font-variant-numeric:tabular-nums} /* V-pass6 calmer badge; receipt scratchpad/pass6local_*.png */ .goal-item:active{background:rgba(224,184,90,.16)}#hist .h:active{background:rgba(224,184,90,.13)} /* V-pass6: tactile press feedback (reduced-motion safe — colour only) */ .goal-item .gpb{flex:0 0 46px;height:4px;background:var(--line);overflow:hidden;} /* V-pass6 goals track; receipt: scratchpad/pass6local_*.png */ .goal-item .gpbf{height:100%;min-width:2px;transition:width .32s cubic-bezier(.2,.7,.3,1);} /* V-pass6: cyan glow via drop-shadow, 2px seed so 0% still reads, smoother easing */ .goal-item .gbtn{width:20px;height:20px;border:0;background:none;color:var(--faint);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:11px;padding:0;-webkit-appearance:none;appearance:none;flex:0 0 auto} .goal-item:hover .gbtn{display:inline-flex} .goal-item .gbtn:hover{color:var(--gold2);background:rgba(224,184,90,.14)} .goal-item .gbtn-del:hover{color:var(--bad);background:rgba(251,113,133,.14)} .goal-new{display:none;gap:4px;padding:4px 10px 6px;align-items:center} .goal-new input{flex:1;height:28px;padding:0 8px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font:inherit;font-size:12.5px;outline:none;-webkit-appearance:none;appearance:none;min-width:0} .goal-new input:focus{border-color:var(--gold)} .goal-new button{height:28px;padding:0 10px;border:0;background:var(--gold2);color:#1a1305;font-weight:600;font-size:12px;line-height:1;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;white-space:nowrap} .goal-new button:last-child{background:none;color:var(--faint);padding:0 6px;font-size:15px} .goal-new button:last-child:hover{color:var(--ink)} .goal-summ-panel{margin:0 10px 6px;padding:10px 12px;border:1px solid var(--line2);font-size:12.5px;color:var(--ink);position:relative;line-height:1.55} /* cyan glow-accent, calm surface */ .goal-summ-panel b{display:block;margin-bottom:4px;font-size:12px;color:var(--cyan)} .goal-summ-panel p{margin:0} .goal-summ-panel .gsumm-cls{position:absolute;top:6px;right:6px;width:20px;height:20px;border:0;background:none;color:var(--faint);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none;padding:0} .goal-summ-panel .gsumm-cls:hover{color:var(--ink)} .goal-summ-panel .gsumm-loading{color:var(--faint);font-style:italic;font-size:12px} /* ---- Elara Teams goal management panel — receipt: artifacts/chat-parity/teams_goals_v2.json ---- */ .goal-item .gbtn-flt:hover{color:var(--gold2);background:rgba(224,184,90,.14)} .goal-item.gdone .gt{text-decoration:line-through;opacity:.7} .gm-title{width:100%;height:34px;padding:0 10px;margin:4px 0 2px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);font-weight:700;font-size:14px;font-family:inherit;outline:none} .gm-title:focus{border-color:var(--gold)} .gm-pills{display:flex;gap:6px;margin:2px 0 4px} .gm-pills .gpill{flex:1;height:30px;border:1px solid var(--line2);background:none;color:var(--mut);font-weight:600;font-size:12px;font-family:inherit;cursor:pointer;text-transform:capitalize;-webkit-appearance:none;appearance:none} .gm-pills .gpill:hover{border-color:var(--gold);color:var(--gold-deep,#8a6418)} .gm-pills .gpill.on{background:rgba(224,184,90,.16);border-color:var(--gold);color:var(--gold-deep,#8a6418)} body:not(.light) .gm-pills .gpill.on{color:var(--gold2)} .gm-range{width:100%;margin:4px 0 2px;accent-color:var(--gold2)} .gm-desc{width:100%;min-height:70px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);font-size:13px;line-height:1.5;font-family:inherit;padding:8px 10px;outline:none;resize:vertical} .gm-desc:focus{border-color:var(--gold)} #gpList .gp-pick{cursor:pointer}#gpList .gp-pick:hover{background:rgba(224,184,90,.12)} /* ---- project / goal panels — CANONICAL .setcard parity (matches #agents) — receipt: artifacts/projects-brand-fix/receipt.json ---- */ .hgroup.projhd{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px} .hgroup.projhd .ppt-lab{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .hgroup.projhd .projhd-acts{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto} .hgroup.projhd .pcfg,.hgroup.projhd .pdel{opacity:0;font-size:11px;transition:opacity .12s ease} .hgroup.projhd:hover .pcfg,.hgroup.projhd:hover .pdel{opacity:.85} .hgroup.projhd .pdel{background:none;border:0;color:var(--faint);cursor:pointer;padding:4px;display:inline-flex;align-items:center;line-height:0} .hgroup.projhd .pdel svg{width:14px;height:14px;display:block} .hgroup.projhd .pdel:hover{color:#c45c5c} .ppt-ico{display:inline-flex;align-items:center;vertical-align:middle;color:var(--gold2)} .ppt-ico svg{width:16px;height:16px;display:block} .projov{position:fixed;inset:0;z-index:340;background:rgba(2,8,16,.66);display:flex;align-items:center;justify-content:center;padding:18px} .projpanel{width:680px;max-width:96vw;max-height:88svh;overflow:auto;background:var(--panel);border:1px solid var(--line2);padding:0 0 16px}/* receipt: artifacts/projects-brand-fix/receipt.json */ .projpanel>*{padding-left:20px;padding-right:20px} .projpanel .pp-hd{display:flex;align-items:center;gap:10px;padding:15px 20px;margin:0 0 4px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:1} .projpanel .pp-ttl{font-weight:800;font-size:16px;color:var(--ink);display:flex;align-items:center;gap:9px;margin:0} .projpanel .pp-ttl .ppt-ico svg{width:18px;height:18px} .pp-ico{font-style:normal;color:var(--gold2,var(--gold2))}.pp-ico-cyan{font-style:normal;color:var(--cyan,#22d3ee)} .projpanel .pp-x{margin-left:auto;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);cursor:pointer;font-size:13px;padding:8px 13px;line-height:1} .projpanel .pp-x:hover{border-color:var(--cyan,#22d3ee);color:var(--cyan,#22d3ee)} .projpanel .pp-lbl{font-size:14px;font-weight:700;color:var(--ink);margin:17px 0 7px;display:block} .projpanel .pp-sub{font-size:12px;font-weight:400;color:var(--faint)} .projpanel #projInstr,.projpanel textarea,.projpanel .gm-title{width:100%;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);font:inherit;font-size:13.5px;padding:9px 11px;outline:none;resize:vertical} .projpanel #projInstr{min-height:160px;font-size:14.5px;line-height:1.5} .projpanel #projInstr:focus,.projpanel textarea:focus,.projpanel .gm-title:focus{border-color:var(--cyan,#22d3ee)} .projpanel .pp-files{font-size:13px;color:var(--mut)} .projpanel .pp-file{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2)} .projpanel .pp-del{background:none;border:0;color:var(--faint);cursor:pointer;font-size:12px;padding:2px 6px} .projpanel .pp-del:hover{color:var(--ink)} .projpanel .pp-row{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0 4px} .projpanel .pp-btn{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);padding:8px 14px;cursor:pointer;font:inherit;font-size:13px} .projpanel .pp-btn:hover{border-color:var(--cyan,#22d3ee);color:var(--cyan,#22d3ee)} .projpanel .pp-save{background:transparent;color:var(--cyan,#22d3ee);font-weight:700;border:1px solid var(--cyan,#22d3ee);padding:8px 18px;cursor:pointer;font-size:13px} .projpanel .pp-save:hover{filter:none;background:rgba(224,184,90,.14)} .projpanel .pp-in{background:var(--panel2);border:1px solid var(--line2);color:var(--ink);font:inherit;font-size:13px;padding:8px 11px;outline:none} .projpanel .pp-in:focus{border-color:var(--cyan,#22d3ee)} .projpanel .pp-ft{margin:17px 0 0;padding-top:13px;border-top:1px solid var(--line2);font-size:12px;color:var(--faint);line-height:1.5} .projbrow-row{border-bottom:1px solid var(--line2)}.projbrow-row .conn-name{color:var(--ink)}.projbrow-row .conn-off{color:var(--mut)}.projbrow-row:hover{background:rgba(224,184,90,.12)}.projbrow-row .conn-ico{color:var(--gold2,var(--gold2));font-weight:700} /* ---- lightweight toast/status system (informational, non-blocking; replaces jarring alert()) ---- */ #toastHost{position:fixed;left:50%;bottom:calc(var(--composer-h) + var(--sp2));transform:translateX(-50%);z-index:520;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;max-width:min(360px,92vw)} .toast{pointer-events:auto;background:var(--panel);border:1px solid var(--line2);color:var(--ink);font-weight:600;font-size:12.5px;line-height:1.4;font-family:inherit;padding:9px 14px;max-width:min(360px,92vw);border-radius:0;opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease} .toast.show{opacity:1;transform:translateY(0)} .toast.ok{border-color:var(--cyan)} .toast.bad{border-color:var(--bad)} @media(prefers-reduced-motion:reduce){.toast{transition:none;transform:none}} /* ---- persistent offline banner ---- */ #offlineBar{position:fixed;top:0;left:0;right:0;z-index:530;display:none;text-align:center;background:var(--bad);color:#fff;font-weight:600;font-size:12.5px;line-height:1.5;font-family:inherit;padding:6px 12px;} #offlineBar.show{display:block} /* ---- Cmd/Ctrl+K command palette (reuses the projov overlay pattern) ---- */ #cmdPalOv{position:fixed;inset:0;z-index:560;background:rgba(2,8,16,.62);display:none;align-items:flex-start;justify-content:center;padding:74px 18px 18px} #cmdPalOv.open{display:flex} .cmdpal{width:min(560px,94vw);max-height:70svh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--cyan);border-radius:0;overflow:hidden} .cmdpal input{width:min(560px,94vw);max-width:none;box-sizing:border-box;background:var(--panel2);border:0;border-bottom:1px solid var(--line2);color:var(--ink);font:14px/1.4 inherit;padding:12px 14px;outline:none} .cmdpal .cmdlist{overflow:auto;padding:5px} .cmdpal .cmditem{display:flex;align-items:center;gap:10px;width:min(560px,94vw);max-width:none;box-sizing:border-box;text-align:left;background:none;border:0;color:var(--ink);font-weight:500;font-size:13px;line-height:1.4;font-family:inherit;padding:9px 11px;cursor:pointer;border-radius:0} .cmdpal .cmditem:hover,.cmdpal .cmditem.on{background:var(--panel2)} .cmdpal .cmditem .ck{margin-left:auto;font:600 10.5px Consolas,ui-monospace,monospace;color:var(--faint)} .cmdpal .cmdempty{padding:14px;color:var(--faint);font-size:12.5px} /* account pill above the LEKOLA bookend — pinned in the #side flex column so it cannot drift with window height */ .side-acct{flex:0 0 auto;padding:8px 10px;border-top:1px solid var(--line);position:relative;min-width:0} /* account profile menu (popover above the pill) */ #acctmenu{display:none;position:absolute;left:10px;right:10px;bottom:calc(100% - 4px);background:var(--panel);border:1px solid var(--line2);z-index:30;padding:6px;max-height:calc(100svh - var(--sp5) * 4);overflow-y:auto} /* one menu (2026-09-04): thirteen rows must scroll, never clip, inside #side{overflow:hidden} */ #acctmenu.open{display:block} #acctmenu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--ink);font:inherit;font-size:13px;padding:9px 10px;cursor:pointer;text-align:left;-webkit-appearance:none;appearance:none} #acctmenu button .mail-badge{position:static;margin-left:6px} body.m-mobile #acctmenu button{min-height:var(--sp-tap)} /* one menu on a phone: every row is a touch target */ #acctmenu button:hover{background:rgba(224,184,90,.1)} #acctmenu button .ic{width:15px;height:15px;color:var(--gold2)} #acctmenu .am-sep{height:1px;background:var(--line);margin:5px 6px} #acctmenu .am-plan{padding:7px 10px;font-size:11px;color:var(--label);white-space:nowrap} /* pin: highlight when pinned */ #hist .h .hbtn.pinon{color:var(--gold2)} #hist .h.pinned .ht{font-weight:600} /* edit user message affordance */ .msg.user .body{position:relative} .msg .editbtn{position:absolute;top:-2px;right:0;width:26px;height:26px;border:0;background:none;color:var(--faint);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .14s ease} .msg.user:hover .editbtn,.msg.user:focus-within .editbtn{opacity:1}.msg .editbtn:hover{color:var(--gold2)}.msg .editbtn .ic{width:15px;height:15px} .msg .editbox{width:100%} .msg .editta{width:100%;min-height:60px;background:var(--panel2);border:1px solid var(--gold);color:var(--ink);font:inherit;font-size:15px;padding:9px 11px;resize:vertical;outline:none;-webkit-appearance:none;appearance:none} .msg .editrow{display:flex;gap:8px;justify-content:flex-end;margin-top:8px} .msg .editrow button{font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);-webkit-appearance:none;appearance:none} .msg .editrow button.prim{background:linear-gradient(180deg,var(--gold2),var(--gold-deep));color:#1a1305;border-color:var(--gold)} #railsearch,#railrecents{display:none;margin:2px 9px;width:40px;height:38px;align-items:center;justify-content:center;border:1px solid var(--line2);background:var(--panel2);color:var(--gold2);cursor:pointer;-webkit-appearance:none;appearance:none} #railsearch:hover,#railrecents:hover{border-color:var(--gold)}#railsearch .ic,#railrecents .ic{width:18px;height:18px} /* N12: collapsed-rail recents pop-over */ #railFlyout{position:fixed;z-index:70;min-width:230px;max-width:min(300px,80vw);max-height:70svh;overflow-y:auto;background:var(--panel);border:1px solid var(--line2);padding:6px} /* E4: the rail flyout — the fastest route to a recent collaboration — on the declared scale. */ #railFlyout .rf-hd{font:var(--w-bold) 9.5px/1.4 var(--ff-mono);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--label);padding:6px 10px var(--sp-half)} #railFlyout .rf-row{display:block;width:min(300px,80vw);text-align:left;background:none;border:0;color:var(--mut);font:inherit;font-size:var(--fs-sm);padding:var(--sp1) 10px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} #railFlyout .rf-row:hover,#railFlyout .rf-row:focus-visible{background:color-mix(in srgb,var(--gold2) 10%,transparent);color:var(--ink);outline:none} #railFlyout .rf-row.on{color:var(--ink);border-left:var(--bw-rule) solid var(--gold)} #railFlyout .rf-new{color:var(--gold2);border-top:var(--bw-hair) solid var(--line);margin-top:var(--sp-half)} .acctpill{width:100%;display:flex;align-items:center;gap:10px;padding:8px 9px;border:1px solid transparent;background:none;color:var(--ink);cursor:pointer;text-align:left;-webkit-appearance:none;appearance:none;transition:background .14s ease,border-color .14s ease} .acctpill:hover{background:rgba(224,184,90,.08);border-color:rgba(224,184,90,.22)} .acctpill .apav{flex:0 0 auto;width:30px;height:30px;background:linear-gradient(180deg,var(--gold2),var(--gold-deep));color:#1a1305;font:800 12px/1 Inter,-apple-system,sans-serif;display:flex;align-items:center;justify-content:center} .acctpill .apinfo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px} .acctpill .apinfo b{font-weight:600;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acctpill .apinfo span{font-size:10.5px;color:var(--label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acctpill>.ic{flex:0 0 auto;width:15px;height:15px;color:var(--faint)} /* sidebar collapse / expand rail buttons */ .railbtn{flex:0 0 auto;width:30px;height:30px;border:0;background:none;color:var(--gold2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none;transition:background .14s ease} .railbtn:hover{background:rgba(224,184,90,.12)}.railbtn .ic{width:18px;height:18px;color:var(--gold2)} /* Sidebar restore lives on #collapseBtn in #side .top (and #menuBtn at <=1024px). A header opener here doubled the control in the compact bar (founder 2026-09-16). */ /* ---- collapsed ICON RAIL (desktop): slim 58px strip with New-chat + search, not a full hide (exceeds ChatGPT's pure rail) ---- */ @media(min-width:761px){ body.sidecollapsed #side{width:58px} body.sidecollapsed #side .bword,body.sidecollapsed .searchwrap,body.sidecollapsed #hist,body.sidecollapsed .hist-hd,body.sidecollapsed #goalPanel,body.sidecollapsed .side-card,body.sidecollapsed .side-acct,body.sidecollapsed .side-foot,body.sidecollapsed #side .newbtn .nl,body.sidecollapsed #side .top .bhome{display:none} body.sidecollapsed #side .top{justify-content:center;padding:15px 0} body.sidecollapsed #side .top .sp{display:none} body.sidecollapsed #side .newbtn{margin:12px 9px 6px;justify-content:center;padding:11px 0;gap:0} body.sidecollapsed #railsearch,body.sidecollapsed #railrecents{display:flex} /* collapsed rail: the Context-Intelligence CTA becomes a neat 40px icon square (was a stretched tall box — the .t text wrapped vertically in the 58px rail). */ body.sidecollapsed .ci-show{width:40px;height:38px;margin:2px 9px;padding:0;justify-content:center;gap:0;animation:none;} body.sidecollapsed .ci-show .t{display:none} } @media(max-width:760px){#collapseBtn{display:none}} /* genuinely no-hover touch devices (AND, not OR): reveal row actions + larger targets + iOS-safe 16px inputs. AND-combined so a mouse-capable touchscreen laptop (reports hover:hover) keeps the elegant hover-reveal. */ @media (hover:none) and (pointer:coarse){ #hist .h .ht{padding-right:36px} #hist .h .hact{opacity:1} #hist .h{padding-top:11px;padding-bottom:11px} #hist .h .hbtn{width:30px;height:30px}#hist .h .hbtn .ic{width:16px;height:16px} #histSearch,#hist .hren{font-size:16px} .sec-tog{min-height:40px} #hist .hgroup.projhd .pcfg,#hist .hgroup.projhd .pdel{opacity:.85} #hist .hgroup.projhd .pdel{width:40px;height:40px;justify-content:center} } /* fl/gap fallback for old WebKit (Safari <14.1 / WebKitGTK <2.32) — applied ONLY where flex gap is unsupported, so modern engines keep gap with no double-spacing */ @supports not (gap:1px){ #side .top>*+*{margin-left:9px}.bhome>*+*{margin-left:9px}.newbtn>*+*{margin-left:8px} .acctpill>*+*{margin-left:10px}.acctpill .apinfo>*+*{margin-top:1px} .side-foot .ec-lk>*+*{margin-left:13px}#hist .h .hact>*+*{margin-left:1px} } /* navy capability card — echoes the /app "one engine" info card (gold accent words on navy) */ .side-card{margin:var(--sp-half) var(--sp1half) var(--sp1);padding:var(--sp1half) var(--sp1half);border-radius:0;background:linear-gradient(180deg,#0e1d31,#0a1626);border:1px solid rgba(224,184,90,.18);color:#9fb6c6;font-size:var(--fs-2xs);line-height:var(--lh-snug)} .side-card b{color:var(--gold2);font-weight:700}.side-card .ce{display:block;font:700 9px/1.4 Consolas,ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-soft);margin-bottom:5px} .ci-show{display:flex;align-items:center;gap:10px;width:calc(100% - 24px);margin:0 12px 10px;padding:11px 12px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;text-align:left;animation:cibreathe 3.4s ease-in-out infinite}/* breathes (alive) in BOTH themes; the pulsing 1px ring reads even on a light sidebar */ @keyframes cibreathe{0%,100%{}50%{}} .ci-show:hover{border-color:var(--cyan)} body.light .ci-show{border-color:var(--line2);background:var(--panel)} @media(prefers-reduced-motion:reduce){.ci-show{animation:none;}} .ci-show .ic{width:20px;height:20px;flex:0 0 auto;color:#22d3ee} .ci-show .t{display:flex;flex-direction:column;line-height:1.25;min-width:0} .ci-show .t b{font-size:13px;font-weight:700;letter-spacing:-.01em} .ci-show .t span{font-size:11px;color:var(--gold2)} body.light .ci-show{color:#0c1727}body.light .ci-show .t span{color:#8a6418} /* navy footer bookend — matches the /app footer (.LEKOLA · CODE ATELIER) */ /* THE CALLING CARD — EXACT bijection with the landing #ecFtr signature (founder: use the exact same, don't redo) */ /* Tokens since 2026-09-13 (twelve literals off the ratchet; the chrome gradient and hairline the top bar uses); the link rows render from elara_chat_space.FOOTER_GROUPS through the CHAT_FOOTER_SLOT below, one list for the chat and every page. */ .side-foot{flex:0 0 auto;min-width:0;background:var(--grad-chrome);border-top:var(--bw-hair) solid var(--chrome-line);padding:var(--sp2) var(--sp1half);display:flex;justify-content:center;pointer-events:none} .side-foot a,.side-foot button{pointer-events:auto} .side-foot .ec-sig{display:flex;flex-direction:column;align-items:center;gap:var(--sp1);text-align:center} .side-foot .ec-copy{color:var(--faint);opacity:.55;font:var(--w-semi) var(--fs-step--3)/1 var(--ff-mono);letter-spacing:.1em} .side-foot .ec-copy a{color:var(--cyan-soft);text-decoration:none} /* was six style="color:#7ee8f7" literals; one token rule replaces all six (mobile-declutter, receipt artifacts/mobile-declutter-2026-09-09/mobile_declutter_receipt.json) */ .side-foot .ec-copy.pre-copyright{margin-bottom:var(--sp-half)} /* was style="margin-bottom:5px" (off-grid); --sp-half is the nearest 4px-grid step, 1px tighter */ /* the calling card's rules live in elara_chat_header.css (one definition for the sidebar foot and every page footer, 2026-09-12) */ /* ---- main ---- */ #approw{flex:1 1 auto;display:flex;min-height:0;width:100%;overflow:hidden;position:relative} #wrap{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;position:relative} /* Chat tool strip — full-width, pinned at the top of the body flex. #side fills what is left under it. */ #bar{flex:0 0 auto;width:100%;display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sp1);padding:var(--sp1) var(--sp2);border-bottom:1px solid var(--line);background:var(--panel2);color:var(--ink);z-index:var(--z-header,50);position:relative} body.light #bar{background:var(--panel,#fff);border-bottom:1px solid var(--line2,#d6e1ec)} body.light #bar .mname,body.light #bar #freeleft{color:#0c1727} #bar .sp{display:none} #bar .barlogo{display:none} #bar select{border-radius:0} body:has(#roomStrip.open) #collabBtn{background:transparent;color:var(--gold2);border:var(--bw-hair) solid var(--gold2);box-shadow:none} #bar select#model{min-width:0;flex:0 1 auto;max-width:46vw;text-overflow:ellipsis} /* site brand/nav live in elara_chat_header on non-chat routes; chat uses #bar only */ #menuBtn{display:none;align-items:center;justify-content:center;width:var(--sp-tap);height:var(--sp-tap);background:none;border:0;color:var(--gold2);cursor:pointer;padding:0;font-size:var(--fs-step-3);line-height:1;flex:0 0 auto;box-sizing:border-box}#menuBtn:hover{color:var(--gold)} /* left-edge HANDLE to pull in the side panel on mobile (founder: a clear button/handle to invoke it) */ #sideHandle{display:none}#drawerClose{display:none} @keyframes sideHandlePulse{0%,100%{}50%{}} select,#keyin{height:36px;padding:0 10px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font-size:13px;border-radius:0} select{cursor:pointer}select:focus,#keyin:focus{outline:none;border-color:var(--gold)}#keyin{width:170px} #bar .sp{display:none}/* model picker + login group together on the LEFT; the bar stays one uniform full-width panel (no exposed middle void) */ #bar .barlogo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0} #bar .barlogo .bword{font:800 12px/1 Inter,-apple-system,"Segoe UI",sans-serif;letter-spacing:.14em;color:#eaf6fb;white-space:nowrap} body.light #bar .barlogo .bword{color:#0c1727} #bar .barlogo{display:none}/* the brand lives ONLY in the shared top
— no duplicate in the chat bar (founder: no repeat) */ /* narrow-width hardening: the bar must shrink, never force horizontal overflow (leak-closure) */ #bar{min-width:0} #bar select{border-radius:0}body:has(#roomStrip.open) #collabBtn{background:transparent;color:var(--gold2);border:var(--bw-hair) solid var(--gold2);box-shadow:none}#bar select#model{min-width:0;flex:0 1 auto;max-width:46vw;text-overflow:ellipsis} /* ChatGPT-style model picker: a styled button + popover menu over a hidden