/* ============================================================
   Cohesion chrome — the cross-page shared spine (S282).
   Loaded by EVERY page (homepage, offer page, all case studies)
   so the whole site shares: the dark-theme token re-map, the
   chamfered theme-toggle, the sticky section nav, and the
   chamomile chip nav mark (replaces the ◈ glyph).

   This file is surface-agnostic: it does NOT touch any page's hero,
   reading body, or section layout — those stay owned by root.css /
   tsvetok.css / cyber-flora.css. It only adds the shared chrome and
   the theme variable layer that all pages opt into.
   ============================================================ */

/* ---------- Extra tokens the shared chrome + hybrid spine need ---------- */
:root {
  --panel-raised:#0E1822;
  --hero-void:#020304;
  --neon-gold-soft:#E8C36B;
  --neon-gold-faint:rgba(255,215,0,.045);
  --ease-snappy:cubic-bezier(.25,.1,.25,1);
  --dur-slow:520ms;
  --gold-warm-gradient-bright:linear-gradient(135deg,#FFD95E 0%,#F2C24A 100%);
  --gold-name-gradient:linear-gradient(105deg,#FFE89A 0%,#FFD700 38%,#F2C24A 72%,#D9A93A 100%);
}

/* ---------- [DARK] reading-body token re-map (user toggle) ----------
   Re-maps the --root-* names tokens.css defines (light) to dark
   Cyber-Flora values. Only surfaces that reference --root-* flip;
   the case-study tsvetok.css surface is fixed-dark and references the
   raw dark tokens, so it stays immersive in both themes by design. */
html[data-theme="dark"] {
  --root-bg:       #05080A;
  --root-surface:  #0B1219;
  --root-ink:      #FFFFFF;
  --root-ink-soft: #B7C0CB;
  --root-ink-mute: #8A949F;
  --root-rule:     rgba(255,215,0,.24);
  --root-accent:   #F2C24A;
}

/* ---------- Cross-document View Transitions (CSS-only, PE-safe) ---------- */
@view-transition { navigation: auto; }
html { scroll-behavior:smooth; }

/* ============================================================
   THEME TOGGLE — small chamfered button. Sun/moon glyph swapped
   by data-theme. Real <button>, aria-pressed, keyboard-operable.
   ============================================================ */
.theme-toggle {
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
  background:transparent;
  border:1px solid var(--cyber-border-hairline);
  color:var(--neon-gold-warm);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:border-color var(--dur-quick) var(--ease-out),
             color var(--dur-quick) var(--ease-out),
             background var(--dur-quick) var(--ease-out);
}
.theme-toggle:hover, .theme-toggle:focus-visible {
  border-color:var(--cyber-border); color:var(--neon-gold);
  background:rgba(255,215,0,.06);
}
.theme-toggle svg { width:16px; height:16px; display:block; }
.theme-toggle .icon-moon { display:inline; }
.theme-toggle .icon-sun  { display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display:inline; }
.sticky-nav .theme-toggle { color:var(--root-accent); border-color:var(--root-rule); }
.sticky-nav .theme-toggle:hover, .sticky-nav .theme-toggle:focus-visible {
  color:var(--root-accent); border-color:var(--root-accent); background:transparent;
}

/* ============================================================
   STICKY SECTION NAV — condensed bar revealed once the hero
   scrolls out of view (IntersectionObserver toggles .is-visible).
   Theme-aware translucent background + blur + hairline border.
   ============================================================ */
.sticky-nav {
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  background:color-mix(in srgb, var(--root-bg) 80%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);
          backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--root-rule);
  opacity:0; visibility:hidden; transform:translateY(-100%);
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             visibility 0s linear var(--dur-base);
}
.sticky-nav.is-visible {
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out),
             visibility 0s;
}
.sticky-nav .mark {
  font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--root-ink); display:inline-flex; gap:9px; align-items:center;
}
.sticky-nav .mark a { color:inherit; display:inline-flex; align-items:center; gap:9px; }
.sticky-nav .sn-right { display:flex; align-items:center; gap:clamp(16px,2.5vw,26px); }
.sticky-nav .navlinks { display:flex; gap:clamp(16px,2.5vw,26px); }
.sticky-nav .navlinks a {
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--root-ink-soft); position:relative;
  transition:color var(--dur-quick) var(--ease-out);
}
.sticky-nav .navlinks a::after {
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px;
  background:var(--root-accent); transition:right var(--dur-base) var(--ease-out);
}
.sticky-nav .navlinks a:hover, .sticky-nav .navlinks a:focus-visible { color:var(--root-accent); }
.sticky-nav .navlinks a:hover::after, .sticky-nav .navlinks a:focus-visible::after { right:0; }
.sticky-nav :focus-visible { outline-color:var(--root-accent); outline:2px solid var(--root-accent); outline-offset:3px; }

/* ============================================================
   The chamomile chip nav mark — replaces the ◈ glyph everywhere
   (hero nav, sticky nav, footer). Alpha PNG → works light + dark.
   ============================================================ */
.nav-mark {
  width:24px; height:24px; display:inline-block; flex:0 0 auto;
  object-fit:contain; vertical-align:middle;
}
.sticky-nav .nav-mark { width:22px; height:22px; }
.footer-mark { width:18px; height:18px; vertical-align:-3px; }

@media (max-width:560px) {
  .sticky-nav { height:52px; }
  .sticky-nav .navlinks { gap:14px; }
}

/* ============================================================
   OFFER PAGE (body.root, readiness-review) — align the chip + the
   theme toggle into the existing dark topnav without disturbing its
   hero. The page keeps root.css's hero; we only center the mark row
   and the meta row so the 34px toggle + the chip sit on one line.
   ============================================================ */
.root .topnav { align-items:center; }
.root .topnav .mark { align-items:center; }
.root .topnav .mark a { display:inline-flex; align-items:center; gap:9px; color:inherit; }
.root .topnav .meta { align-items:center; }
.root .topnav .mark .nav-mark { width:24px; height:24px; }
.root footer .footer-mark { width:18px; height:18px; vertical-align:-3px; }

/* ============================================================
   CASE-STUDY CHROME OVERLAY (body.tsvetok) — the immersive dark
   pages keep tsvetok.css; this adds only the shared spine bits.
   The case-study surface stays dark in BOTH themes by design (the
   whole page is the immersive island), matching the homepage rule
   that the dark project/offer cards never flip.
   ============================================================ */
/* In the case-study topnav, the chip + toggle sit inline with the crumbs. */
.tsvetok .topnav { gap: 18px; }
.tsvetok .topnav .crumbs { align-items:center; }
.tsvetok .topnav .crumbs .nav-mark { width:22px; height:22px; margin-right:2px; }
.tsvetok .topnav .nav-right { display:inline-flex; align-items:center; gap:16px; margin-left:auto; }
.tsvetok .topnav .nav-right > span { white-space:nowrap; }
/* the case-study toggle reads gold-on-dark like its surface */
.tsvetok .theme-toggle { color:var(--neon-gold-warm); border-color:var(--cyber-border-hairline); }
.tsvetok .theme-toggle:hover, .tsvetok .theme-toggle:focus-visible {
  color:var(--neon-gold); border-color:var(--cyber-border); background:rgba(255,215,0,.06);
}
/* footer chip on the case study */
.tsvetok footer .footer-mark { width:18px; height:18px; vertical-align:-3px; }

/* The case-study surface is immersive-dark in BOTH themes, so its sticky nav
   must read dark regardless of the persisted light/dark choice (it can't go
   paper-on-a-dark-page). The case-study markup adds class="sticky-nav cf-dark";
   this pins the dark Cyber-Flora values directly. */
.sticky-nav.cf-dark {
  background:color-mix(in srgb, #05080A 82%, transparent);
  border-bottom:1px solid var(--cyber-border-hairline);
}
.sticky-nav.cf-dark .mark { color:var(--text-primary); }
.sticky-nav.cf-dark .navlinks a { color:var(--text-secondary); }
.sticky-nav.cf-dark .navlinks a::after { background:var(--neon-gold-warm); }
.sticky-nav.cf-dark .navlinks a:hover, .sticky-nav.cf-dark .navlinks a:focus-visible { color:var(--neon-gold-warm); }
.sticky-nav.cf-dark .theme-toggle { color:var(--neon-gold-warm); border-color:var(--cyber-border-hairline); }
.sticky-nav.cf-dark :focus-visible { outline-color:var(--neon-gold); }

/* ============================================================
   S284 — (1) immersive topnav mobile-overflow cure +
          (2) soft-light variant for the case-study pages.
   David's ruling: the theme toggle on the immersive pages now
   visibly works. It lightens the READING BODY to paper while the
   hero band, the architecture diagrams, and the neon accents stay
   dark by design (immersive islands on a light page). Additive —
   the dark default is untouched, so no regression to it.
   ============================================================ */

/* ---------- (1) Immersive topnav — mobile overflow cure ----------
   The in-flow `.tsvetok .topnav` had NO mobile treatment: crumbs +
   "CASE STUDY · 2026" + toggle overran 390px and pushed the toggle
   off-screen. Let the crumbs wrap, drop the meta label, keep the
   toggle visible and on-screen. */
@media (max-width: 640px) {
  .tsvetok .topnav { gap: 12px 14px; align-items: center; }
  .tsvetok .topnav .crumbs { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
  .tsvetok .topnav .nav-right { flex: 0 0 auto; margin-left: auto; }
  .tsvetok .topnav .nav-right > span { display: none; }  /* hide "CASE STUDY · 2026" on phones */
}

/* ---------- (2) Soft-light token re-map (reading body) ----------
   Flip the dark Cyber-Flora tokens to the light --root-* palette for
   the whole immersive surface. The hero + diagrams are pinned back to
   dark below, so they read as immersive islands on the light page. */
html[data-theme="light"] body.tsvetok {
  --deep-void:     #F6F4EF;
  --panel-dark:    #FFFFFF;
  --panel-hover:   #F1EEE6;
  --panel-active:  #ECE8DE;
  --code-bg:       #F1EEE6;
  --text-primary:  #15171A;
  --text-secondary:#4A5058;
  --text-muted:    #6E747A;
  --cyber-border:          rgba(21,23,26,0.22);
  --cyber-border-hairline: rgba(21,23,26,0.10);
  --neon-gold-warm:#8A7800;   /* gold-dim — reads on paper */
  --neon-cyan:     #0B6F7A;    /* darker teal — links/code on paper */
  background: #F6F4EF;
  background-image: none;
  color: #15171A;
}

/* hero band stays a dark island, spanning the shell width */
html[data-theme="light"] body.tsvetok .hero {
  --panel-dark:    #0B1219;
  --text-primary:  #FFFFFF;
  --text-secondary:#A0AAB5;
  --cyber-border:          rgba(255,215,0,0.50);
  --cyber-border-hairline: rgba(255,215,0,0.24);
  --neon-gold-warm:#F2C24A;
  --neon-cyan:     #00F0FF;
  background:
    radial-gradient(ellipse 70% 90% at 18% 0%, rgba(255,215,0,.10) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(0,240,255,.05) 0%, transparent 70%),
    #05080A;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* architecture diagrams keep a dark frame (their bg gradient is a
   hardcoded dark in tsvetok.css), so pin the SVG tokens dark to keep
   node text legible on it */
html[data-theme="light"] body.tsvetok .arch-frame {
  --panel-dark:    #0B1219;
  --text-primary:  #FFFFFF;
  --text-secondary:#A0AAB5;
  --text-muted:    #7A848F;
  --cyber-border:          rgba(255,215,0,0.50);
  --cyber-border-hairline: rgba(255,215,0,0.24);
  --neon-gold-warm:#F2C24A;
  --neon-gold:     #FFD700;
  --neon-cyan:     #00F0FF;
}

/* sticky section nav — follow the light theme instead of the cf-dark pin */
html[data-theme="light"] body.tsvetok .sticky-nav.cf-dark {
  background: color-mix(in srgb, #F6F4EF 86%, transparent);
  border-bottom: 1px solid rgba(21,23,26,0.12);
}
html[data-theme="light"] body.tsvetok .sticky-nav.cf-dark .mark { color: #15171A; }
html[data-theme="light"] body.tsvetok .sticky-nav.cf-dark .navlinks a { color: #4A5058; }
html[data-theme="light"] body.tsvetok .sticky-nav.cf-dark .navlinks a::after { background: #8A7800; }
html[data-theme="light"] body.tsvetok .sticky-nav.cf-dark .theme-toggle { color: #8A7800; border-color: rgba(21,23,26,0.22); }
html[data-theme="light"] body.tsvetok .sticky-nav.cf-dark :focus-visible { outline-color: #8A7800; }

/* ---------- S284 — hero mark: flower only, no chamfered box (David's call) ----------
   The flat mark in a dark chamfered panel read like a sticker on mobile.
   Drop the panel bg + border + chamfer + glow so the chamomile floats
   free and larger — the same treatment as the homepage hero. Applies to
   the case-study slot AND the offer-page sigil-mark for continuity. The
   mark PNG is transparent, so it sits cleanly on the dark hero in both themes. */
.tsvetok .sigil-slot,
.root .sigil-mark {
  background: none;
  border: 0;
  clip-path: none;
  box-shadow: none;
}
.tsvetok .sigil-slot .sigil { width: 100%; height: 100%; mix-blend-mode: screen; }
.root .sigil-mark img { width: 100%; height: 100%; mix-blend-mode: screen; }
@media (max-width: 640px) {
  .tsvetok .sigil-slot { width: 168px; height: 168px; }
}