/* elara_chat_header.css: the chat space's chrome (top bar + the compact footer), tokens only.
   Every colour, size, weight, tracking, space and duration is a var() from the :root block of elara_chat.html,
   served to every chat-space page as /elara_tokens.css (chat_assets.tokens_css). The monolith's site_header.css
   used literals so it could render on pages with foreign palettes; inside the chat space every page carries the
   same tokens, so the literals were a second source of truth. Corners are square (C:/Branding/Bible).
   Checked by tests/test_design_math.py (tokens-only scan, exit 0). Markup: elara_chat_header.html + elara_chat_space.FOOTER. */
/* ONE COLOUR, BOTH THEMES (founder 2026-09-07). The header used --panel2, which body.light turns
   near-white, while elara_chat.html's own header is hard navy - so the top panel changed colour from
   page to page and the pale shield disappeared on the light one. Every surface and every foreground
   in this bar now comes from the --chrome-* tokens, which are declared in :root and NOT redefined in
   body.light. Foregrounds had to move too: --ink is dark in light mode, and dark text on a navy bar
   is the same defect wearing the opposite colour. */
/* This sheet OWNS its box model (B1, 2026-09-07). It was written inside elara_chat.html, where
   `*{box-sizing:border-box}` is a global reset, and then shipped to every chat-space page — which
   carry no such reset. So `min-height:var(--sp-tap)` on a nav link meant 44px on /AI/chat and
   44 + 8 + 8 + 2 = 62px on /AI/invitation, and the one top bar rendered 18px taller on every page
   except the one it was authored against. A shared sheet cannot depend on a reset it does not ship.
   Measured by tests/uiux/collab_symmetry_proof.py; receipt artifacts/collab-symmetry/collab_symmetry_receipt.json */
header,header *{box-sizing:border-box}
header{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp2);padding:var(--sp1half) var(--sp2);position:sticky;top:0;
  background:linear-gradient(180deg,var(--chrome),var(--chrome2));border-bottom:var(--bw-hair) solid var(--chrome-line);z-index:var(--z-header);font-family:var(--ff-product);color:var(--chrome-ink);min-height:0;min-width:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%;-webkit-text-size-adjust:100%;will-change:transform}
  /* will-change puts the bar on its own layer, where Chromium rasterises text with greyscale antialiasing on every page; the chat's
     app layout already did that and the pages did not, so the same wordmark carried colour fringing on one and not the other
     (tools/header_diff_probe.py, phone, 145 pixels under the wordmark, 2026-09-12). The chat sets the smoothing and the size-adjust on body; a page did not, and the same glyphs rendered heavier there */
.chat-site-nav .brand,header .brand{display:flex;align-items:center;gap:var(--sp1);flex:0 0 auto;min-height:var(--sp-tap);text-decoration:none;color:var(--chrome-ink)}
.chat-site-nav .brand img,header .brand img,header .elara-shield{width:var(--logo);height:var(--logo);object-fit:contain;flex:none;filter:none;animation:none}
.chat-site-nav .brand b,header .brand b{font-weight:var(--w-heavy);letter-spacing:var(--tr-wide);font-size:var(--fs-step--1);line-height:var(--lbh-step--1);white-space:nowrap;color:var(--chrome-ink)}
.chat-site-nav .brand b span,header .brand b span{background:linear-gradient(90deg,var(--cyan-soft),var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}   /* Founder 2026-09-23: the NavIQ CORTEX gradient, identical in both themes. */
.chat-site-nav .bcol,header .bcol{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
header nav{display:flex;align-items:center;gap:var(--sp-half);margin-left:auto}
header nav a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--sp10);min-height:var(--sp-tap);text-align:center;
  padding:var(--sp1) var(--sp1half);font-size:var(--fs-step--2);line-height:var(--lbh-step--1);font-weight:var(--w-semi);color:var(--chrome-mut);
  border-bottom:var(--bw-rule) solid transparent;white-space:nowrap;text-decoration:none;
  transition:color var(--dur-fast) var(--ease-std),border-color var(--dur-fast) var(--ease-std)}
header nav a:hover{color:var(--chrome-ink);border-bottom-color:var(--gold2)}
header nav a.cur{color:var(--chrome-ink);border-bottom-color:var(--gold2)}
header nav a:focus-visible,header .brand:focus-visible,header .hamb:focus-within,header .hdr-icon:focus-visible,header .hdr-signin:focus-visible{outline:var(--bw-rule) solid var(--gold2);outline-offset:var(--sp-half)}
/* Account + theme live in the ONE site header (parity single-header, 2026-09-13). #bar is the chat tool strip only. */
header .hdr-actions{display:flex;align-items:center;gap:var(--sp1);flex:0 0 auto;margin-left:var(--sp1)}
header .hdr-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-tap);height:var(--sp-tap);padding:0;border:0;background:none;color:var(--chrome-mut);cursor:pointer;font-size:var(--fs-step--1);line-height:var(--lbh-step--1)}
header .hdr-icon:hover{color:var(--chrome-gold)}
header #acctstate{min-width:0;display:inline-flex;align-items:center;overflow:hidden}
header #acctstate .signin,header .hdr-signin{display:inline-flex;align-items:center;justify-content:center;min-height:var(--sp-tap);padding:0 var(--sp2);font-size:var(--fs-step--2);font-weight:var(--w-bold);line-height:var(--lbh-step--1);background:var(--cta-gold-fill);color:var(--gold-ink);border:var(--bw-hair) solid var(--gold);text-decoration:none;cursor:pointer;position:relative}
header #acctstate .signin::after,header .hdr-signin::after{content:"";position:absolute;inset:0;padding:var(--sp-half);background:var(--strobe-edge);pointer-events:none;opacity:0;-webkit-mask:linear-gradient(var(--chrome-ink) 0 0) content-box,linear-gradient(var(--chrome-ink) 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
header #acctstate .signin:hover::after,header .hdr-signin:hover::after,header #acctstate .signin:focus-visible::after,header .hdr-signin:focus-visible::after{opacity:1}
header #acctstate .signin:hover,header .hdr-signin:hover{filter:brightness(1.06)}
.pg-idioms{--strobe-edge:var(--strobe-edge);--cta-gold-fill:var(--cta-gold-fill);--chip-fill:var(--chip-fill);--chip-line:var(--chip-line);--scrim-image:var(--scrim-image)}
header #acctstate .who{font-size:var(--fs-step--2);line-height:var(--lbh-step--1);color:var(--chrome-mut);display:inline-flex;align-items:center;gap:var(--sp1)}
header #acctstate .who b{color:var(--chrome-ink);font-weight:var(--w-semi);max-width:var(--sp10);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header #acctstate .out{background:none;border:0;color:var(--chrome-mut);cursor:pointer;font-size:var(--fs-step--2);padding:0;min-height:var(--sp-tap);display:inline-flex;align-items:center}
header #acctstate .out:hover{color:var(--chrome-gold)}
header .navtoggle{display:none;position:absolute;opacity:0;width:0;height:0;pointer-events:none}
header .hamb{display:none}
@media(max-width:896px){
  header .navtoggle{display:block}
  header .navtoggle:focus-visible~.hamb{outline:var(--bw-rule) solid var(--gold2);outline-offset:var(--sp-half)}
  header nav{visibility:hidden}
  header .navtoggle:checked~nav{visibility:visible}
  header .hamb{margin-left:auto}
  header .hdr-actions{position:absolute;right:calc(var(--sp2) + var(--sp-tap) + var(--sp-half));top:50%;
    transform:translateY(-50%);margin-left:0;gap:var(--sp-half);min-width:0}
  header #acctstate .signin,header .hdr-signin{padding:0 var(--sp1)}
  header .hamb{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-half);
    width:var(--sp-tap);height:var(--sp-tap);min-width:var(--sp-tap);min-height:var(--sp-tap);box-sizing:border-box;padding:var(--sp1half) var(--sp1);cursor:pointer;border:var(--bw-hair) solid var(--chrome-line);background:none}
  header .hamb span{display:block;height:var(--bw-rule);width:100%;background:var(--chrome-ink);
    transition:transform var(--dur-base) var(--ease-std),opacity var(--dur-base) var(--ease-std)}
  header .navtoggle:checked~.hamb span:nth-child(1){transform:translateY(var(--sp1)) rotate(45deg)}
  header .navtoggle:checked~.hamb span:nth-child(2){opacity:0}
  header .navtoggle:checked~.hamb span:nth-child(3){transform:translateY(calc(-1 * var(--sp1))) rotate(-45deg)}
  header nav{position:absolute;left:0;right:0;top:100%;margin-left:0;flex-direction:column;align-items:stretch;gap:0;
    overflow:hidden;max-height:0;background:var(--chrome);border-bottom:var(--bw-hair) solid var(--chrome-line);
    transition:max-height var(--dur-base) var(--ease-std)}
  header .navtoggle:checked~nav{max-height:calc(100vh - var(--sp8));overflow-y:auto}
  header nav a{min-width:0;width:100%;justify-content:center;border-bottom:var(--bw-hair) solid var(--chrome-line);
    padding:var(--sp2) var(--sp1half);font-size:var(--fs-step--1);line-height:var(--lbh-step--1)}
  header nav a.cur{color:var(--gold2);border-bottom-color:var(--chrome-line)}
}
/* Phone account controls share the open menu so a signed-in address cannot cover the wordmark. */
@media(max-width:640px){
  header{--hdr-control-height:calc(var(--sp-tap) + var(--sp2) + var(--bw-hair))}
  header .hdr-actions{display:none;left:0;right:0;top:100%;transform:none;justify-content:space-between;
    height:var(--hdr-control-height);padding:var(--sp1) var(--sp2);background:var(--chrome);border-bottom:var(--bw-hair) solid var(--chrome-line)}
  header .navtoggle:checked~.hdr-actions{display:flex}
  header #acctstate .who b{max-width:calc(var(--sp10) * 2)}
  header nav{top:calc(100% + var(--hdr-control-height))}
  header .navtoggle:checked~nav{max-height:calc(100dvh - var(--sp-tap) - var(--sp3) - var(--bw-hair) - var(--hdr-control-height))}
}
@media(prefers-reduced-motion:reduce){header nav a,header .hamb span,header nav{transition:none}}
/* the compact footer every chat-space page carries (elara_chat_space.FOOTER): the way back, then the record pages */
.cs-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp1);
  padding:var(--sp3) var(--sp2) var(--sp4);border-top:var(--bw-hair) solid var(--line);font-family:var(--ff-product);
  font-size:var(--fs-step--2);line-height:var(--lb-step--2);color:var(--mut);background:var(--navy)}
.cs-foot a{color:var(--mut);text-decoration:none;min-height:var(--sp-tap);display:inline-flex;align-items:center;padding:0 var(--sp1)}
.cs-foot a:first-child{color:var(--gold2);font-weight:var(--w-semi)}
.cs-foot a:hover{color:var(--ink)}
.cs-foot a:focus-visible{outline:var(--bw-rule) solid var(--gold2);outline-offset:var(--sp-half)}
.cs-foot-nav span{color:var(--faint)}   /* the separators only: the card's spans keep their own colours (measured 2026-09-12: this rule painted .ec-lkn --faint on every page) */
/* The calling card, rendered here so every page in the space gets ONE card from one place (founder 2026-09-06:
   the header and the footer come from the main chat, and the calling card is not decoration). Markup and class
   names are elara_chat.html's own .ec-lk lockup; the metrics are the --lk-* tokens promoted to :root in the
   same change, so the chat and the space render the same card from the same source instead of each keeping a
   copy. Everything is scoped under .cs-foot, which elara_chat.html never renders, so the chat page is
   untouched by these rules. The two colours are the point: gold .LEKOLA over cyan CODE ATELIER is the
   two-tone signature, and the gold-and-grey <p class="pg-card"> the pages used before dropped half of it. */
.cs-foot{flex-direction:column;gap:var(--sp3)}
.cs-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp1)}
/* The footer menu (2026-09-12): four groups on a grid, two on a phone; group titles in the accent at the small step. */
.cs-foot-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp3) var(--sp4);width:100%;max-width:var(--measure-wide);text-align:left;padding:0 var(--sp2)}
.cs-fg{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.cs-fg b{color:var(--gold2);font-weight:var(--w-semi);font-size:var(--fs-step--2);line-height:var(--lb-step--2);letter-spacing:var(--tr-wide);text-transform:uppercase;margin-bottom:var(--sp-half)}
.cs-foot .cs-fg a{padding:0;min-height:var(--sp-tap);color:var(--mut);font-weight:var(--w-regular)}
.cs-foot .cs-fg a:hover{color:var(--ink)}
@media(max-width:896px){.cs-foot-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-foot .ec-copy{color:var(--mut);font-size:var(--fs-step--2);line-height:var(--lb-step--2);text-align:center}
.cs-foot .ec-org{display:grid;gap:var(--sp1);max-width:var(--measure-wide);margin:0;text-align:center}
.cs-foot .ec-org-name{color:var(--ink);font-weight:var(--w-semi)}
.cs-foot .ec-org-law{max-width:var(--measure-paper);margin:0 auto}
body.light .cs-foot{--gold2:var(--paper-gold);--cyan:var(--paper-cyan);--cyan-soft:var(--paper-cyan)}
.ec-lk{display:flex;align-items:center;justify-content:center;gap:var(--sp1half)}   /* unscoped 2026-09-12: the chat's sidebar foot paints this same card */
/* THE CALLING CARD IS THE CHAT'S, LINE FOR LINE (founder 2026-09-11: "the chat page has it down properly
   and you are doing your own things"). Read against elara_chat.html's .side-foot .ec-lk rules (lines
   570-577 of that file) and the page shots in artifacts/pages/after-2026-09-11/: the chat's two rules are
   CYAN, fading in toward the mark from transparent with a cyan drop-shadow, mirrored left and right; the
   pages painted them as one solid deep-gold hairline with no glow. And the chat's halos BREATHE
   (lkGoldHalo / lkCyanHalo, one period, the cyan a beat behind); the pages sat at the resting halo. Both
   halves now come from the same tokens the chat's rules resolve: --cyan for the rule, --glow-gold and
   --glow-gold-hi for the breath, --dur-breath for the period. Nothing here is a value of its own. */
.ec-lkf{display:block;height:var(--bw-hair);width:var(--lk-rule);flex:none;
  background:linear-gradient(to right,transparent,var(--cyan));filter:drop-shadow(0 0 var(--sp-half) var(--cyan))}
.ec-lkf.r{background:linear-gradient(to left,transparent,var(--cyan))}
.ec-lkcol{display:flex;flex-direction:column;align-items:center;gap:var(--sp-half)}
/* The two glowing lines. This is one of exactly two roles where glow is permitted (docs/DESIGN_MATH.md):
   the brand lockup and the canvas halo. Everything else -- buttons, cards, headings, prose, table rows --
   carries none, which is what keeps the halo reading as a signature rather than as styling. */
.ec-lkn{font-family:var(--ff-mono);font-weight:var(--w-bold);font-size:var(--fs-lk);
  line-height:var(--lh-tight);letter-spacing:var(--lk-track);text-indent:var(--lk-track);color:var(--gold2);
  text-shadow:var(--glow-gold);animation:lkGoldHalo var(--dur-breath) ease-in-out infinite}
.ec-lksub{font-family:var(--ff-mono);font-weight:var(--w-semi);font-size:var(--fs-lk-sub);
  line-height:var(--lh-tight);letter-spacing:var(--lk-track-sub);text-indent:var(--lk-track-sub);color:var(--cyan-soft);
  text-shadow:var(--glow-cyan);animation:lkCyanHalo var(--dur-breath) ease-in-out infinite var(--dur-base)}
@keyframes lkGoldHalo{0%,100%{text-shadow:var(--glow-gold)}50%{text-shadow:var(--glow-gold-hi)}}
@keyframes lkCyanHalo{0%,100%{text-shadow:var(--glow-cyan)}50%{text-shadow:var(--glow-cyan-hi)}}
@media(prefers-reduced-motion:reduce){.ec-lkn{animation:none;text-shadow:var(--glow-gold)}.ec-lksub{animation:none;text-shadow:var(--glow-cyan)}}
/* THE GLOW FLOOR ON A PHONE (moved here from elara_chat_mobile.css on 2026-09-13, handover job 10; receipt
   artifacts/mobile/elevation_receipt.json). An animated text-shadow can be throttled on iOS and in WebKit Low Power
   Mode, so the halo washes out; a drop-shadow composites reliably and gives the breathing halo an always-on floor to
   sit on. It was keyed on the chat page's own body class and scoped to its sidebar foot, so the chat's card carried two
   shadow layers on a phone that no page's card carried. Keyed on a coarse pointer now, it lands on every card alike:
   radii from the glow scale (8, 16), colours mixed from the two brand tokens, and a desktop pointer gets none. */
@media(hover:none) and (pointer:coarse){
  .ec-lkn{filter:drop-shadow(0 0 var(--glow-r1) color-mix(in srgb,var(--gold2) 85%,transparent)) drop-shadow(0 0 var(--glow-r2) color-mix(in srgb,var(--gold2) 50%,transparent))}
  .ec-lksub{filter:drop-shadow(0 0 var(--glow-r1) color-mix(in srgb,var(--cyan) 90%,transparent)) drop-shadow(0 0 var(--glow-r2) color-mix(in srgb,var(--cyan) 55%,transparent))}
}
/* The skip link every page in the space carries (elara_chat_space.SKIP_LINK, 2026-09-12): off-canvas until a
   keyboard reaches it, then the first thing on the page, in the accent, above the header. */
.cs-skip{position:absolute;left:0;top:0;z-index:calc(var(--z-header) + var(--z-content));transform:translateY(-200%);padding:var(--sp1) var(--sp2);
  background:var(--gold2);color:var(--gold-ink);font-family:var(--ff-product);font-weight:var(--w-semi);text-decoration:none}
.cs-skip:focus{transform:none;outline:var(--bw-rule) solid var(--cyan);outline-offset:var(--sp-half)}