/* ═══════════════════════════════════════════════════════════════════════════════
   DΛREΛKT_ ATOM — ui.chrome.cockpit
   The command-cockpit frame (.gns-oc): full-bleed takeover, HUD corner
   brackets, top band, ctl cluster, refresh, stage, and the .gns root. Rule-
   for-rule the frame blocks that lived in genesis.cockpit.css, now owned by
   the atom (self-injected via ensureCss). Identity text rules live in
   ui.chrome.header.css, clock in ui.chrome.clock.css, flags/pulses in
   ui.chrome.status.css.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Full-bleed: break out of the padded, max-width-capped content column so every
   cockpit page fills the screen edge-to-edge. Same unlayered :has() recipe as
   sv-ovc / arc-c — beats da-shell's .ha-content cap. */
.ha-content:has(.gns-oc) { max-width: none; padding: 0; display: flex; flex-direction: column; }

/* …and the frame must REACH the bottom of that host whether the page puts its
   classes on .ha-content itself (ui.shield.overview: `_wrap = mount`) or wraps
   the cockpit in a root element of its own (every ui.cortex.* page). In the
   second shape the wrapper is a plain flex ITEM — default `flex: 0 1 auto` — so
   the frame stops at its own `min-height: calc(100dvh - 60px)` instead of
   filling the content box. That shortfall is ~16px at a 850px viewport and it
   shows as a GAP under the bottom corner brackets, which the direct-mount apps
   never have. Pages have been papering over it with their own
   `.gns-cc.<page> { flex: 1 1 auto }` rule — but `gns-cc` is added by
   applyCommandCentre AFTER the page renders, so the fill depended on a late
   side-effect landing rather than on the layout being right.
   The host is the atom's business, so the atom fills it: any direct child of a
   cockpit content host that CONTAINS the frame stretches. Scoped by `:has(>
   .gns-oc)` so breadcrumbs and sibling content below the frame are untouched. */
.ha-content:has(.gns-oc) > :has(> .gns-oc) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.gns-oc {
  --gns-mono: var(--ha-font-token, ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  /* The display voice (Tektur, @font-face in ui.chrome.header.css) — hero word
     only, by the scarcity law; everything else stays on the mono token. */
  --gns-display: "Tektur", var(--ha-font-token, ui-monospace, monospace);
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: calc(100dvh - 60px);
  padding: 1.05rem 1.6rem 1.2rem;
  overflow: hidden;
  background:
    radial-gradient(150% 120% at 50% -12%, color-mix(in srgb, var(--ha-accent) 6%, transparent) 0%, transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--ha-surface) 90%, transparent), color-mix(in srgb, var(--ha-bg) 66%, transparent));
}

/* corner brackets */
.gns-oc__hc {
  position: absolute; width: 20px; height: 20px; z-index: 4; pointer-events: none;
  opacity: 0; animation: gns-oc-hc-in 0.5s ease-out 0.2s forwards;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ha-accent) 40%, transparent));
}
.gns-oc__hc--tl { top: 8px; left: 8px;   border-top: 2px solid color-mix(in srgb, var(--ha-accent) 82%, transparent); border-left: 2px solid color-mix(in srgb, var(--ha-accent) 82%, transparent); }
.gns-oc__hc--tr { top: 8px; right: 8px;  border-top: 2px solid color-mix(in srgb, var(--ha-accent) 82%, transparent); border-right: 2px solid color-mix(in srgb, var(--ha-accent) 82%, transparent); }
.gns-oc__hc--bl { bottom: 8px; left: 8px;  border-bottom: 2px solid color-mix(in srgb, var(--ha-accent) 82%, transparent); border-left: 2px solid color-mix(in srgb, var(--ha-accent) 82%, transparent); }
.gns-oc__hc--br { bottom: 8px; right: 8px; border-bottom: 2px solid color-mix(in srgb, var(--ha-accent) 82%, transparent); border-right: 2px solid color-mix(in srgb, var(--ha-accent) 82%, transparent); }
@keyframes gns-oc-hc-in { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }

/* top bar */
.gns-oc__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; z-index: 3; flex: 0 0 auto;
}

.gns-oc__ctl { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.gns-oc__refresh {
  width: 28px; height: 28px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ha-border-hi); border-radius: 50%;
  background: var(--ha-surface); color: var(--ha-text-muted); font-size: 0.9rem; cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.4s ease;
}
.gns-oc__refresh:hover { color: var(--ha-accent); border-color: var(--ha-accent); transform: rotate(180deg); }

/* subnav — the strip welded between the band and the stage (tab strips, control
   rows, search forms). Inside the frame, above the stage, and it does NOT
   scroll with the stage content. */
.gns-oc__subnav { flex: 0 0 auto; z-index: 3; }

/* stage — fills the rest of the screen. 160ms mount fade so route swaps
   (shell innerHTML hard cut) "boot" deliberately instead of snapping. */
.gns-oc__stage {
  position: relative; flex: 1 1 auto; min-height: 0; z-index: 2;
  display: flex; flex-direction: column;
  animation: gns-stage-in 160ms ease-out;
}
@keyframes gns-stage-in { from { opacity: 0; transform: translateY(2px); } }
/* a stage that scrolls its own content (fleet / codex) rather than the page */
.gns-oc__stage--scroll { overflow-y: auto; }

/* The genesis root: base type + stretch inside the flex content column so the
   cockpit shell can fill the full height. Hoisted tokens (--gns-mono /
   --gns-radius / --gns-radius-lg) live HERE — page CSS must not re-declare
   them, so radius/mono drift across pages is impossible. */
.gns {
  --gns-mono: var(--ha-font-token, ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace);
  --gns-radius: 4px;
  --gns-radius-lg: 6px;
  color: var(--ha-text);
  font-size: 0.875rem;
}
.gns.gns-cc { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Dim the shared LATTICE hard under the cockpit so scenes read cleanly. */
.gns.gns-cc > .ha-apprain { opacity: 0.16; }

/* shared HUD corner tick — add class to any card/readout: the 9px engraving
   bracket in the top-right corner (same recipe as the commandcentre live-card
   tick, on ::after so the host's ::before stays free). */
.gns-tick { position: relative; }
.gns-tick::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px;
  border-top: 1.5px solid color-mix(in srgb, var(--ha-accent) 42%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--ha-accent) 42%, transparent);
  pointer-events: none; z-index: 2;
}

@media (max-width: 720px) {
  .gns-oc { min-height: calc(100vh - 120px); padding: 0.85rem 0.9rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gns-oc__hc { opacity: 1; animation: none; }
  .gns-oc__refresh { transition: none; }
  .gns-oc__stage { animation: none; }
}