/* ============================================================================
   SEP-137 Coding-System Cockpit — LOOK DIRECTION B: "BLUEPRINT"
   ----------------------------------------------------------------------------
   Engineer's drafting table. Deep blueprint-blue sheet with a fine white
   drafting grid; white/cyan line-work; nodes as schematic components (thin
   borders + corner registration ticks + stenciled mono labels); connectors as
   draft lines (dashed until work has flowed, then solid) with small current
   dots running them; stage rail as title-block annotations; failures in
   safety-orange "revision markup" (dashed redline clouds); SYSTEM DISTRESS as
   a diagonal hazard-stripe banner. Precise, technical, calm.

   Loaded AFTER cockpit.css. Pure CSS override per the README theme contract:
   variables under [data-theme="blueprint"], a handful of keyframe re-
   definitions (sanctioned by the contract), zero JS knowledge beyond the
   documented data-* hooks.
   ========================================================================= */

[data-theme="blueprint"] {
  color-scheme: dark;

  /* ---- colors: surfaces ---- */
  --c-bg: #0a2a5e;
  --c-bg-grad-a: #0c3169;
  --c-bg-grad-b: #082450;
  --c-panel: #0c2e63;
  --c-panel-2: #11396f;
  --c-node-bg: rgba(6, 26, 58, 0.72);
  --c-line: rgba(178, 212, 255, 0.30);
  --c-line-strong: rgba(214, 236, 255, 0.55);
  --c-node-line: rgba(220, 238, 255, 0.62);
  --c-placeholder-line: rgba(150, 196, 255, 0.32);
  --c-shadow: 0 0 0 1px rgba(220, 238, 255, 0.10); /* flat drafting sheet — no soft drop shadows */

  /* ---- colors: text ---- */
  --c-text: #eaf3ff;
  --c-muted: #a9c7ee;
  --c-faint: #6e94c6;

  /* ---- colors: semantic ---- */
  --c-accent: #5fe0ff;             /* drafting cyan */
  --c-on-accent: #062240;
  --c-gold: #e8c46a;
  --c-green: #6fe3a5;              /* "approved" stamp green */
  --c-amber: #ffab2e;              /* safety orange — revision markup */
  --c-red: #ff6a3d;                /* safety orange-red — redline */
  --c-blue: #8ab8ff;

  /* ---- colors: flow / motion ---- */
  --c-connector: rgba(220, 238, 255, 0.72);  /* solid inked line where work has flowed */
  --c-connector-dim: rgba(150, 196, 255, 0.34); /* light pencil draft line */
  --c-pulse: #5fe0ff;
  --c-glow-amber: rgba(255, 171, 46, 0.45);
  --c-glow-red: rgba(255, 106, 61, 0.42);
  --c-glow-accent: rgba(95, 224, 255, 0.45);

  /* ---- colors: chips / badges ---- */
  --c-chip-ok-bg: rgba(111, 227, 165, 0.10);
  --c-chip-warn-bg: rgba(255, 171, 46, 0.12);
  --c-chip-bad-bg: rgba(255, 106, 61, 0.14);
  --c-chip-info-bg: rgba(138, 184, 255, 0.12);
  --c-chip-neutral-bg: rgba(169, 199, 238, 0.08);
  --c-distress-bg: rgba(255, 106, 61, 0.12);

  /* ---- colors: tiers ---- */
  --c-tier-hard: #ff6a3d;
  --c-tier-soft: #6fe3a5;
  --c-tier-none: #a9c7ee;
  --c-tier-unknown: #6e94c6;

  /* ---- durations: calmer than spine — measured, technical ---- */
  --d-pulse-cycle: 6.4s;
  --d-pulse-stagger: calc(var(--d-pulse-cycle) * 0.12);
  --d-shake: 2.8s;
  --d-gears: 3.6s;
  --d-tide: 3.2s;
  --d-flame: 0.9s;
  --d-robot: 4s;
  --d-glow: 2.4s;
  --d-enter: 0.5s;
  --d-changed: 0.9s;
  --d-ticker: 56s;
  --d-distress: 2.6s;              /* slow hazard-stripe crawl, not a strobe */
  --d-chip-pulse: 2.6s;
  --d-panel: 0.25s;

  /* ---- easings ---- */
  --e-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --e-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --e-pulse: linear;
  --e-linear: linear;
  --e-soft: ease-in-out;
  --e-flame: steps(2, end);

  /* ---- layout: square, drafted ---- */
  --chain-w: 238px;
  --chain-gap: 16px;
  --group-gap: 32px;
  --conn-h: 24px;
  --row-h: 88px;
  --row-issue-h: 96px;
  --cell-h: calc(var(--conn-h) + var(--row-h));
  --rail-w: 96px;
  --radius: 0px;                   /* schematic components have square corners */
  --panel-w: min(440px, 92vw);

  /* ---- typography: technical mono, stenciled ---- */
  --font: "Cascadia Mono", "Cascadia Code", ui-monospace, Consolas, "IBM Plex Mono", "JetBrains Mono", "Courier New", monospace;
  --fs-base: 0.78rem;
  --fs-small: 0.68rem;
  --fs-rail: 0.58rem;
  --placeholder-opacity: 0.5;
}

/* ====================== drafting sheet + grid ====================== */
/* Fine white drafting grid: faint minor grid every 24px, stronger major
   grid every 120px, over the deep blueprint sheet. Fixed so the sheet
   stays put while the tree scrolls across it. */
[data-theme="blueprint"] body {
  background:
    linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse at 50% -10%, var(--c-bg-grad-a) 0%, var(--c-bg-grad-b) 78%);
  background-size:
    120px 120px,
    120px 120px,
    24px 24px,
    24px 24px,
    100% 100%;
  background-attachment: fixed;
  background-color: var(--c-bg);
}

/* ====================== topbar as title block ====================== */
[data-theme="blueprint"] .brand-mark {
  border-radius: 0;
  background: transparent;
  border-width: 1px;
}
[data-theme="blueprint"] .brand-title {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 0.92rem;
}
[data-theme="blueprint"] .brand-sub {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
}
/* drawing-number stamp, drafted into the sheet's title block */
[data-theme="blueprint"] .topbar::after {
  content: "DWG SEP-137 \00B7 REV B \00B7 SCALE NTS";
  order: 99;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-faint);
  border: 1px solid var(--c-line);
  padding: 5px 9px;
  white-space: nowrap;
}
[data-theme="blueprint"] .chip {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ====================== banner: drafted annotation ====================== */
[data-theme="blueprint"] .banner {
  border-radius: 0;
  letter-spacing: 0.24em;
  border-style: solid;
}
[data-theme="blueprint"] .banner[data-level="ok"] {
  border-color: var(--c-line);
  background: transparent;
}
/* SYSTEM DISTRESS = diagonal hazard-stripe banner. Safety-orange tape bands
   crawl along the top and bottom edges (one slow coordinated motion replaces
   every individual motif loop, which the base sheet suppresses). */
[data-theme="blueprint"] .banner[data-level="distress"] {
  color: #ffd9c9;
  border: 1px solid var(--c-red);
  padding: 11px 14px;
  background:
    repeating-linear-gradient(135deg, var(--c-red) 0 12px, transparent 12px 24px) left top / 200% 6px repeat-x,
    repeating-linear-gradient(135deg, var(--c-red) 0 12px, transparent 12px 24px) left bottom / 200% 6px repeat-x,
    rgba(64, 18, 4, 0.5);
  text-shadow: 0 1px 0 rgba(6, 18, 38, 0.8);
  animation: bp-hazard-crawl var(--d-distress) var(--e-linear) infinite;
}
@keyframes bp-hazard-crawl {
  from { background-position: 0 0,        0 100%; }
  to   { background-position: 33.94px 0, -33.94px 100%; }
}

/* ====================== health strip: instrument blocks ====================== */
[data-theme="blueprint"] .hchip {
  border-radius: 0;
  background: var(--c-node-bg);
}
[data-theme="blueprint"] .hchip-label { letter-spacing: 0.12em; }
/* square indicator lamps — schematic test points, not LEDs */
[data-theme="blueprint"] .hchip .dot {
  border-radius: 0;
  width: 7px;
  height: 7px;
}
[data-theme="blueprint"] .check-dot { border-radius: 1px; }

/* ====================== stage rail: title-block annotations ====================== */
[data-theme="blueprint"] .stage-rail {
  counter-reset: bp-stage;
  background: linear-gradient(90deg, var(--c-bg) 72%, transparent);
}
[data-theme="blueprint"] .rail-cell {
  color: var(--c-muted);
  letter-spacing: 0.2em;
  gap: 7px;
}
[data-theme="blueprint"] .rail-cell:not(.rail-issue)::before {
  counter-increment: bp-stage;
  content: counter(bp-stage, decimal-leading-zero);
  flex: 0 0 auto;
  padding: 1px 4px;
  border: 1px solid var(--c-line);
  color: var(--c-accent);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

/* ====================== connectors: draft lines ====================== */
/* Hairline ink instead of 2px bars; unreached stages stay light pencil-dash. */
[data-theme="blueprint"] .connector::before {
  width: 1px;
  margin-left: -0.5px;
}
[data-theme="blueprint"] .cell[data-reached="0"] .connector::before {
  background: repeating-linear-gradient(180deg, var(--c-connector-dim) 0 5px, transparent 5px 10px);
}
[data-theme="blueprint"] .chains[data-multi="1"]::before {
  height: 1px;
  background: var(--c-connector);
}
/* pulses: small current dots running the lines (tight, low-bloom) */
[data-theme="blueprint"] .chain[data-active="1"] .cell[data-flow="1"] .connector::after {
  width: 4px;
  height: 4px;
  margin-left: -2px;
  box-shadow: 0 0 5px var(--c-pulse);
}

/* ====================== nodes: schematic components ====================== */
[data-theme="blueprint"] .node {
  box-shadow: var(--c-shadow);
}
/* corner registration ticks (cyan), drawn outside the component outline */
[data-theme="blueprint"] .node::before,
[data-theme="blueprint"] .node::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  pointer-events: none;
}
[data-theme="blueprint"] .node::before {
  top: -3px;
  left: -3px;
  border-top: 1px solid var(--c-accent);
  border-left: 1px solid var(--c-accent);
}
[data-theme="blueprint"] .node::after {
  bottom: -3px;
  right: -3px;
  border-bottom: 1px solid var(--c-accent);
  border-right: 1px solid var(--c-accent);
}
/* future stages are pencil sketches — no ticks, lighter dash */
[data-theme="blueprint"] .node.placeholder::before,
[data-theme="blueprint"] .node.placeholder::after { display: none; }
[data-theme="blueprint"] .node.placeholder { border-width: 1px; }

[data-theme="blueprint"] .node-title { letter-spacing: 0.03em; }
[data-theme="blueprint"] .node-icon { color: var(--c-accent); }
[data-theme="blueprint"] .issue-node .node-title {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

[data-theme="blueprint"] .badge {
  border-radius: 2px;
  border: 1px solid var(--c-line);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ====================== failure motifs: revision markup ====================== */
/* Safety-orange redlines: dashed "revision cloud" rings around motif glyphs,
   dashed markup outline around glowing (stuck) components. Calm — annotated,
   not alarmed. */
[data-theme="blueprint"] .motif-icon {
  background: var(--c-bg);
  border-style: dashed;
  border-radius: 50%;
}
[data-theme="blueprint"] .node[data-glow] {
  outline: 1px dashed var(--c-amber);
  outline-offset: 3px;
}
[data-theme="blueprint"] .node[data-glow="red"] { outline-color: var(--c-red); }
/* keep keyboard focus legible over the markup outline */
[data-theme="blueprint"] .node:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}
/* breathe stays, but tighter — a redline being traced, not a glow */
@keyframes glow-amber {
  from { box-shadow: 0 0 2px 0 var(--c-glow-amber); }
  to   { box-shadow: 0 0 10px 1px var(--c-glow-amber); }
}
@keyframes glow-red {
  from { box-shadow: 0 0 2px 0 var(--c-glow-red); }
  to   { box-shadow: 0 0 10px 1px var(--c-glow-red); }
}
/* drift tide strip: hazard-tape edge in safety orange (colors inherit from
   --c-amber); square it off to match the drafted sheet */
[data-theme="blueprint"] .tide-strip {
  border-radius: 0;
  height: 8px;
  opacity: 0.8;
}

/* ====================== ticker: margin annotations ====================== */
[data-theme="blueprint"] .tick-kind {
  border-radius: 2px;
  letter-spacing: 0.1em;
}
[data-theme="blueprint"] .tick-time { font-size: 0.62rem; }

/* ====================== drill panel + sign-in ====================== */
[data-theme="blueprint"] .drill-panel {
  background: var(--c-bg);
  box-shadow: -1px 0 0 0 rgba(220, 238, 255, 0.18);
}
[data-theme="blueprint"] .panel-section h3 { letter-spacing: 0.2em; }
[data-theme="blueprint"] .log-tail {
  background: rgba(4, 18, 42, 0.85);
  border-radius: 0;
}
[data-theme="blueprint"] .action-btn { border-radius: 0; }
[data-theme="blueprint"] .signin-card { border-radius: 0; }

/* ====================== LOOK B: fixed demo-state switcher ====================== */
/* Preview affordance only (markup lives in this look's index.html). Sits above
   the ticker, below the drill panel (z 20). */
[data-theme="blueprint"] .look-switch {
  position: fixed;
  right: 14px;
  bottom: 46px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--c-shadow);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
}
[data-theme="blueprint"] .look-switch-label { color: var(--c-faint); }
[data-theme="blueprint"] .look-switch-sep { color: var(--c-line-strong); }
[data-theme="blueprint"] .look-switch a {
  color: var(--c-accent);
  text-decoration: none;
  padding: 1px 3px;
}
[data-theme="blueprint"] .look-switch a:hover { text-decoration: underline; }
[data-theme="blueprint"] .look-switch a.active {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
[data-theme="blueprint"] .look-switch-hint {
  color: var(--c-faint);
  text-transform: none;
  letter-spacing: 0.02em;
}
[data-theme="blueprint"] .look-switch a.active .look-switch-hint { color: var(--c-on-accent); }