/* ═══════════════════════════════════════════════════════════════════════════════
   DΛREΛKT_ ATOM — ui.chrome.header
   The identity band: cockpit .gns-oc__id (eyebrow / wordmark / stamp / tagline)
   and the standalone .gns-hero banner. Rule-for-rule the blocks that lived in
   genesis.cockpit.css and genesis.css, now owned by the atom (self-injected).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── DISPLAY FACE — Tektur (the identity voice; OFL, self-hosted) ───────
   Duplicated from genesis.css so headers style correctly on pages that load
   ONLY the atoms. Same src URLs — the browser dedupes the fetch; the
   unicode-ranges are GENERATED by tools/brand/buildBrandType.py (never
   hand-edit — hand-drifted ranges are the bug class that broke the Λ). */
@font-face {
  font-family: "Tektur";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/assets/fonts/tektur-var-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2007-200A, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Tektur";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/assets/fonts/tektur-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-0148, U+014A-017F, U+0181, U+0186, U+0189-018A, U+018F-0194, U+0197-0199, U+019D, U+01A0-01A1, U+01AF-01B0, U+01B2-01B4, U+01B7, U+01C0-01DC, U+01DE-01DF, U+01E4-01EB, U+01EE-01EF, U+01F4-01F5, U+01F8-021B, U+021E-021F, U+022A-0233, U+0237, U+0244, U+0253-0254, U+0256-0257, U+0259, U+025B, U+0260, U+0263, U+0268, U+0272, U+0289, U+028B, U+0292, U+0294, U+02B9-02BA, U+02C7, U+02DD, U+0304, U+0308, U+0329, U+1E02-1E03, U+1E0A-1E0D, U+1E10-1E11, U+1E1E-1E1F, U+1E24-1E25, U+1E36-1E37, U+1E3A-1E3B, U+1E3E-1E41, U+1E44-1E45, U+1E48-1E49, U+1E56-1E57, U+1E5A-1E5B, U+1E60-1E63, U+1E6A-1E6D, U+1E7C-1E7D, U+1E80-1E85, U+1E92-1E93, U+1E9E, U+1EF2-1EF9, U+2020, U+20A3, U+20AE, U+20B4, U+20B8, U+20BD, U+20BF, U+A78B-A78C;
}
@font-face {
  font-family: "Tektur";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/assets/fonts/tektur-var-greek-v3.woff2") format("woff2");
  unicode-range: U+0374-0375, U+037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CF, U+03D5, U+03D7;
}

/* ─── COCKPIT IDENTITY (.gns-oc__id inside .gns-oc__top) ────────────────── */
.gns-oc__eyebrow {
  display: block; font-family: var(--gns-mono, ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ha-text-muted);
}
.gns-oc__eyebrow-sep { color: var(--ha-accent); margin: 0 0.1rem; }
/* The identity block must be able to SHRINK. Without min-width:0 a long stamp
   (LENS writes per-view prose up to ~120 chars) makes .gns-oc__id incompressible,
   and .gns-oc__top's flex-wrap drops the whole ctl cluster — actions, pulses,
   clock — onto a second line on ordinary laptop widths. */
.gns-oc__id { min-width: 0; }
.gns-oc__word-row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; min-width: 0; }
.gns-oc__word {
  margin: 0; font-family: var(--gns-display, var(--gns-mono, ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace));
  font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 800; line-height: 0.94; letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--ha-text-bright, #fff) 0%, var(--ha-accent) 130%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* nowrap + ellipsis: the stamp is a single line by design, and a stamp long
   enough to overflow ellipsises rather than being hard-clipped mid-word by the
   frame's overflow:hidden. */
.gns-oc__stamp {
  font-family: var(--gns-mono, ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.6rem; letter-spacing: 0.1em; color: var(--ha-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.gns-oc__tagline { margin: 0.35rem 0 0; max-width: 52ch; font-size: 0.74rem; color: var(--ha-text-muted); line-height: 1.4; }

/* ─── BANNER HERO (.gns-hero) ───────────────────────────────────────────── */
.gns-hero {
  /* Heroes also mount inside legacy wrappers (.ui-hosting, .ha-mon*, …) that
     aren't .gns-page — carry the type voices on the hero itself so the
     display face reaches every hero, wherever mounted. */
  --gns-display: "Tektur", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --gns-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  position: relative; overflow: hidden;
  border: 1px solid var(--ha-border-hi);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 2rem 2rem 1.5rem;
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 55%),
    var(--ha-surface);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 1.5rem;
  row-gap: 1.1rem;
  min-height: 200px;
}
/* Pages built on .gns-page get their post-hero gap from the flex column `gap`.
   Legacy wrappers don't — give the hero an explicit bottom gap there. */
:not(.gns-page) > .gns-hero { margin-bottom: 1.5rem; }
.gns-hero::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 3px; height: 64px;
  background: var(--ha-accent);
}
.gns-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--gns-grid-line, rgba(170, 185, 220, 0.05)) 1px, transparent 1px),
    linear-gradient(90deg, var(--gns-grid-line, rgba(170, 185, 220, 0.05)) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 75%);
  opacity: 0.85;
}
/* ─── Hero sparkles — genesis sparkle vocabulary (twinkling, behind content) ── */
.gns-hero__spark {
  position: absolute; z-index: 0; pointer-events: none;
  color: var(--ha-accent);
  font-family: var(--gns-mono, monospace); line-height: 1;
  animation: gns-tw 3.4s ease-in-out infinite;
}
.gns-hero__spark--1 { top: 1rem;   right: 1.25rem; font-size: 0.95rem; }
.gns-hero__spark--2 { top: 2.6rem; right: 3.1rem;  font-size: 0.62rem; animation-delay: 1.1s; }
.gns-hero__spark--3 { top: 4.3rem; right: 1.9rem;  font-size: 0.5rem;  animation-delay: 2.2s; }
@keyframes gns-tw {
  0%, 100% { opacity: 0.12; transform: scale(0.8); }
  50%      { opacity: 0.7;  transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .gns-hero__spark { animation: none; opacity: 0.4; } }
.gns-hero__mark { position: relative; z-index: 1; min-width: 0; }
.gns-hero__meta {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 0.85rem;
  align-items: flex-end; text-align: right;
}
.gns-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--gns-mono, ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ha-text-muted);
  margin-bottom: 0.6rem; flex-wrap: wrap;
}
.gns-hero__eyebrow-sep { color: var(--ha-accent); font-weight: 600; }
.gns-hero__wordmark {
  margin: 0;
  font-family: var(--gns-display, var(--gns-mono, ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace));
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  font-weight: 700; letter-spacing: 0.01em; line-height: 0.95;
  color: var(--ha-text-bright);
  background: linear-gradient(180deg, var(--ha-text-bright) 0%, var(--ha-text) 100%);
  -webkit-background-clip: text; background-clip: text;
}
.gns-hero__tagline {
  margin: 0.7rem 0 1rem;
  font-size: 0.92rem; color: var(--ha-text-muted);
  max-width: 60ch; line-height: 1.5;
}
.gns-hero__bar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.gns-hero__stamp {
  font-family: var(--gns-mono, ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ha-text-muted);
}

@media (max-width: 760px) {
  .gns-hero { grid-template-columns: 1fr; }
  .gns-hero__meta { align-items: flex-start; text-align: left; }
}

/* ─── MODE: BAND (.gns-band) — the light identity card for dense HQ tools ────
   The ui.atom.hero tier's successor. The card surface, accent ribbon and
   gradient title are the da-shell round-7 .ui-hero polish PROMOTED into the
   atom (one owner — da-shell's copy keeps styling any stray .ui-hero until
   that sweep); the eyebrow grammar and the display-voice title are what the
   old band never had. No grid, no sparks, no HUD: these pages are tables and
   forms, not theaters. */
.gns-band {
  --gns-display: "Tektur", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --gns-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.75rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--ha-border-hi);
  border-radius: var(--gns-radius-lg, 6px);
  background:
    radial-gradient(ellipse 70% 60% at 8% 12%, var(--ha-accent-dim) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 95% 90%, var(--ha-accent-cool-dim) 0%, transparent 55%),
    var(--ha-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px -16px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.gns-band::before {
  /* leading accent ribbon */
  content: "";
  position: absolute;
  top: 12%; left: 0;
  width: 3px;
  height: 76%;
  background: var(--ha-accent);
  box-shadow: 0 0 24px -4px var(--ha-accent);
  border-radius: 0 2px 2px 0;
}
.gns-band__id { min-width: 0; }
.gns-band__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-family: var(--gns-mono, ui-monospace, monospace);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ha-text-muted);
  margin-bottom: 0.45rem;
}
.gns-band__eyebrow-sep { color: var(--ha-accent); font-weight: 600; }
.gns-band__title {
  margin: 0 0 0.35rem;
  font-family: var(--gns-display, var(--gns-mono, ui-monospace, monospace));
  font-size: 1.6rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.12;
  background: linear-gradient(135deg, var(--ha-text-bright) 0%, var(--ha-text-bright) 60%, var(--ha-accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--ha-text-bright);
}
.gns-band__tagline {
  margin: 0;
  font-size: 0.92rem; color: var(--ha-text-muted);
  max-width: 60ch; line-height: 1.5;
}
.gns-band__meta {
  position: relative;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.4rem;
  align-items: center; justify-content: flex-end;
  font-size: 0.78rem; color: var(--ha-text-muted);
  flex: 0 0 auto; max-width: 60%;
}
@media (max-width: 640px) {
  .gns-band { flex-direction: column; }
  .gns-band__meta { justify-content: flex-start; max-width: 100%; }
}