/* =========================================================================
   Nomos — theme-b7.css
   The b7 "glass" theme layer (homepage only; linked when `lab: b7`).
   Loaded AFTER styles.css + motion.css so its token re-points and glass
   surfaces override the base. Sub-pages never download this file.
   B7 THEME LAYER  (homepage only, scoped under html[data-lab="b7"])
   Frosted institutional glass on a darker blue-grey base, with an animated
   perspective-floor grid, and a light/dark toggle. Everything here is additive
   and scoped: it re-points the existing design tokens (so token-driven
   components re-theme automatically) and adds glass + grid on top. No existing
   rule is modified, so contact/platforms/privacy are unaffected.
   ========================================================================= */

/* ---- Tokens: light (blue-grey base) ---- */
html[data-lab="b7"] {
  /* Type: Hanken Grotesk is now the sitewide face (set in styles.css :root). */

  --archive: #aab9c2;          /* page base (cool blue-grey) */
  --b7-bg-2: #b7c4cb;          /* gradient top */
  --ink: #10171c;              /* primary text */
  --ash: #46535c;             /* secondary text */
  --stone: rgba(20, 24, 31, 0.16);  /* borders */
  --card: rgba(240, 245, 248, 0.82);/* frosted surface (has solid-ish backstop) */
  --paleblue: #c3d2da;         /* wash */
  --civic: #3f6f90;
  --civic-ink: #2f5670;
  --civic-btn: #35617f;
  --civic-btn-hover: #244559;
  --slate-deep: #16232c;       /* control-plane / dark panels */

  /* B7-specific */
  --b7-glass: rgba(255, 255, 255, 0.42);
  --b7-glass-solid: rgba(240, 245, 248, 0.82);
  --b7-edge: rgba(255, 255, 255, 0.7);
  --b7-spec: rgba(255, 255, 255, 0.9);
  --b7-grid-alpha: 0.055;               /* frozen from the b7 exploration; tune in devtools if needed */
  --b7-grid: rgba(32, 52, 66, var(--b7-grid-alpha));  /* perspective floor line colour */
  --b7-glow: rgba(63, 111, 144, 0.12);
  --b7-line: rgba(20, 20, 19, 0.12);

  /* shadows re-tinted toward deep slate for the darker base */
  --shadow-sm: 0 1px 2px rgba(10, 25, 35, 0.10), 0 1px 1px rgba(10, 25, 35, 0.06);
  --shadow-md: 0 6px 18px -8px rgba(10, 25, 35, 0.30), 0 2px 6px -4px rgba(10, 25, 35, 0.16);
  --shadow-lg: 0 18px 44px -16px rgba(10, 25, 35, 0.42), 0 6px 14px -10px rgba(10, 25, 35, 0.24);
}

/* ---- Tokens: dark ---- */
html[data-lab="b7"][data-theme="dark"] {
  --archive: #0e161c;
  --b7-bg-2: #121e26;
  --ink: #eaf0f4;
  --ash: #97a4ae;
  --stone: rgba(255, 255, 255, 0.12);
  --card: rgba(22, 33, 42, 0.84);
  --paleblue: #1b2b36;
  --civic: #8bb6d3;
  --civic-ink: #a9cbe1;
  --civic-btn: #4e7c9b;
  --civic-btn-hover: #6a9cbb;
  --slate-deep: #0b141a;

  --b7-glass: rgba(28, 40, 50, 0.44);
  --b7-glass-solid: rgba(22, 33, 42, 0.84);
  --b7-edge: rgba(255, 255, 255, 0.13);
  --b7-spec: rgba(255, 255, 255, 0.15);
  --b7-grid: rgba(139, 182, 211, var(--b7-grid-alpha));  /* alpha inherited from --b7-grid-alpha */
  --b7-glow: rgba(139, 182, 211, 0.10);
  --b7-line: rgba(255, 255, 255, 0.10);
}

/* ---- Base surface + smooth theme transition ---- */
html[data-lab="b7"] body {
  background:
    radial-gradient(60vw 50vw at 80% -5%, var(--b7-glow), transparent 62%),
    linear-gradient(180deg, var(--b7-bg-2), var(--archive));
  transition: color 0.4s var(--ease-out-expo);
}
html[data-lab="b7"] body,
html[data-lab="b7"] .nav,
html[data-lab="b7"] .card,
html[data-lab="b7"] .footer { transition: background-color 0.4s var(--ease-out-expo), color 0.4s var(--ease-out-expo); }

/* ---- Perspective-floor grid (fixed, behind content) ---- */
html[data-lab="b7"] .b7-floor-scene {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  perspective: 340px; perspective-origin: 50% 32%;
}
html[data-lab="b7"] .b7-floor {
  position: absolute; left: -60%; right: -60%; top: 42%; height: 220%;
  transform: rotateX(74deg); transform-origin: 50% 0;
  background-image:
    linear-gradient(var(--b7-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--b7-grid) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* Force the drift on for the calm + full tiers. The !important duration is required to beat
   the site-wide `* { animation-duration: 0.001ms !important }` reduced-motion rule, so a visitor
   with OS reduce-motion who explicitly picks calm/full still gets the floor drift. */
html[data-lab="b7"][data-motion-level="calm"] .b7-floor,
html[data-lab="b7"][data-motion-level="full"] .b7-floor {
  animation-name: b7-floorflow !important;
  animation-duration: 3.2s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
@keyframes b7-floorflow { to { background-position: 0 60px; } }
/* soft far-distance fade so the horizon melts into the background (keeps the crisp top edge hidden
   but leaves more of the floor visible than before). */
html[data-lab="b7"] .b7-floor-scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--archive) 0%, var(--archive) 34%, transparent 62%, transparent 100%);
}

/* content sits above the floor. Give the page wrappers a stacking context. */
html[data-lab="b7"] .nav,
html[data-lab="b7"] main,
html[data-lab="b7"] .footer,
html[data-lab="b7"] .skip-link { position: relative; z-index: 1; }
html[data-lab="b7"] .nav { z-index: 50; }

/* ---- Frosted glass: nav ---- */
html[data-lab="b7"] .nav {
  background: var(--b7-glass-solid);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--b7-line);
  box-shadow: inset 0 -1px 0 var(--b7-edge), 0 1px 14px -8px rgba(10, 25, 35, 0.45);
}
html[data-lab="b7"] .brand,
html[data-lab="b7"] .brand:hover,
html[data-lab="b7"] .nav__links a,
html[data-lab="b7"] .nav__mobile a { color: var(--ink); }
html[data-lab="b7"] .nav__mobile {
  background: var(--b7-glass-solid);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid var(--b7-line);
}
/* brand mark: swap the baked-in ink/cream for tokens so it reads in dark mode */
html[data-lab="b7"] .brand__mark rect { fill: var(--civic); }
html[data-lab="b7"] .brand__mark text { fill: var(--archive); }

/* ---- Frosted glass: cards + panelled surfaces ---- */
html[data-lab="b7"] .card,
html[data-lab="b7"] .systemmap,
html[data-lab="b7"] .evidence-card,
html[data-lab="b7"] .ledger {
  background: var(--b7-glass-solid);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--b7-line);
  box-shadow: inset 0 0 0 1px var(--b7-edge), inset 0 1px 0 var(--b7-spec), 0 2px 12px -6px rgba(10, 25, 35, 0.4);
}
html[data-lab="b7"] .card:hover {
  border-color: var(--civic);
  box-shadow: inset 0 0 0 1px var(--civic), inset 0 1px 0 var(--b7-spec), 0 6px 20px -10px rgba(10, 25, 35, 0.5);
}
/* systemmap keeps its own tinted gradient but on glass */
html[data-lab="b7"] .systemmap {
  background: linear-gradient(180deg, var(--b7-glass-solid), color-mix(in srgb, var(--paleblue) 30%, var(--b7-glass-solid)));
}

/* wash sections become a faint translucent civic tint over the floor */
html[data-lab="b7"] .section--wash {
  background: color-mix(in srgb, var(--paleblue) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* section separators removed on the glass homepage — the perspective-floor grid is the
   only horizontal structure; full-width rules would compete with it. Sections separate via
   padding-block and the --wash / --dark background shifts. */
html[data-lab="b7"] .section { border-top: 0; }

/* footer on glass — no top rule (see above); it reads via the glass background alone */
html[data-lab="b7"] .footer {
  background: color-mix(in srgb, var(--archive) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 0;
}

/* ---- Toggle buttons injected into the nav ---- */
html[data-lab="b7"] .b7-toggle {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
  background: var(--b7-glass);
  border: 1px solid var(--b7-line);
  border-radius: var(--radius-sm);
  padding: 0.42rem 0.62rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
html[data-lab="b7"] .b7-toggle:hover { color: var(--ink); border-color: var(--civic); }
html[data-lab="b7"] .b7-toggle:focus-visible { outline: 2px solid var(--civic); outline-offset: 2px; }
@media (max-width: 900px) { html[data-lab="b7"] .b7-toggle { display: none; } }

/* ---- Surfaces with hardcoded colours that need dark-mode help ---- */

/* Systemmap SVG has baked-in hex fills. In dark mode, lift the white node cards to a
   translucent light and darken their text so the diagram stays legible. Attribute
   selectors target the exact inline values used in index.njk. */
html[data-lab="b7"][data-theme="dark"] .systemmap svg rect[fill="#fff"] { fill: rgba(234, 240, 244, 0.9); }
html[data-lab="b7"][data-theme="dark"] .systemmap svg rect[stroke="#E8E6DC"] { stroke: rgba(255, 255, 255, 0.18); }
/* the node label text (fill #141413) stays dark, which reads fine on the lightened cards */

/* Pipeline nodes (mono chips) re-theme via tokens already; ensure the state node pops */
html[data-lab="b7"] .pipeline__node { background: var(--b7-glass); border-color: var(--b7-line); }

/* Ledger / evidence-card header tints follow paleblue token (already re-pointed) */

/* Buttons: primary keeps a solid civic fill (readable on glass); in dark mode the
   civic is light, so flip the label to dark for contrast. */
html[data-lab="b7"] .btn--primary { background: var(--civic-btn); color: #fff; }
html[data-lab="b7"][data-theme="dark"] .btn--primary { color: #08131c; }
html[data-lab="b7"] .btn--secondary { color: var(--ink); border-color: var(--b7-line); background: var(--b7-glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html[data-lab="b7"] .btn--secondary:hover { border-color: var(--civic); color: var(--civic-ink); }

/* Operator marginalia (ink-drawn characters) invert in dark mode so they stay visible */
html[data-lab="b7"][data-theme="dark"] .op { color: #eaf0f4; }

/* Selection + focus tuned to civic on the new base */
html[data-lab="b7"] ::selection { background: color-mix(in srgb, var(--civic) 30%, transparent); color: var(--ink); }

/* B7 hero: bolder, tighter display type to match the prototype's punch */
html[data-lab="b7"] .hero h1 { font-weight: 800; letter-spacing: -0.02em; }
html[data-lab="b7"] .hero { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem); }
/* the civic margin-rule ::before on the hero is redundant over the floor grid; drop it */
html[data-lab="b7"] .hero::before { display: none; }
/* eyebrow as a small glass chip, like the prototype */
html[data-lab="b7"] .hero .eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.36rem 0.8rem; border-radius: var(--radius-sm);
  background: var(--b7-glass); border: 1px solid var(--b7-line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--civic-ink);
}

/* Floor motion is controlled ONLY by data-motion-level (which defaults to "off" under the OS
   reduce-motion preference in the pre-paint script). We deliberately do NOT kill it inside a
   prefers-reduced-motion @media block, so a visitor who has reduce-motion on can still choose
   calm/full with the Motion control. At level "off", the floor is simply static. */
html[data-motion-level="off"] .b7-floor { animation: none !important; }