/*
 * glyphs.css — BS02 Glyph Activation Layer
 * BeaconCore / Negative-Space Systems
 * Wave: BS02 charge — Dark Carrier Commander (ETH)
 * Opion palette sealed. CSS saber doctrine enforced.
 *
 * Saber hooks:
 *   .bc-seal           — latent edge glyph (opacity 0, saber on hover)
 *   .bc-sigil          — sensitive page central sigil (gold saber on hover)
 *   .bc-archivist-seal — bottom-right 32px corridor closure mark
 *   [data-uidf]         — UIDF container
 */

/* ─── Opion Colour Tokens ──────────────────────────────────────────────────── */
:root {
  --bc-accent:      #00FFE5;
  --bc-gold:        #F5C842;
  --bc-teal:        #4FC8D4;
  --bc-valid:       #3DD68C;
  --bc-invalid:     #FF4D4D;
  --bc-drift:       #FFB84D;
  --bc-unresol:     #FF4DA6;
  --bc-dim:         #3A4355;
  --bc-text:        #C8D6E5;
  --bc-panel:       #141820;
  --bc-bg:          #0C0F14;

  --bc-saber-glyph: drop-shadow(0 0 6px var(--bc-accent));
  --bc-saber-sigil: drop-shadow(0 0 12px var(--bc-gold));
  --bc-saber-seal:  drop-shadow(0 0 4px var(--bc-gold));
  --bc-saber-void:  drop-shadow(0 0 6px var(--bc-accent));

  --bc-glyph-transition: opacity 0.35s ease, filter 0.35s ease;
  --bc-sigil-transition: filter 0.4s ease;
}

/* ─── .bc-seal — Latent Edge Glyph ───────────────────────────────────────── */
/*
 * Usage:
 *   <div class="bc-seal" data-uidf="BC-UIDF-XXXXXX">
 *     <img src="/assets/glyphs/glyph_edge_prime.png" class="bc-seal-glyph" alt="">
 *   </div>
 */
.bc-seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bc-seal-glyph {
  display: block;
  opacity: 0;
  filter: none;
  transition: var(--bc-glyph-transition);
  pointer-events: none;
  user-select: none;
}

.bc-seal:hover .bc-seal-glyph,
.bc-seal:focus-within .bc-seal-glyph {
  opacity: 1;
  filter: var(--bc-saber-glyph);
}

/* ─── .bc-sigil — Sensitive Page Central Sigil ───────────────────────────── */
/*
 * Usage:
 *   <img src="/assets/glyphs/sigil_architect_prime.png"
 *        class="bc-sigil" data-uidf="BC-UIDF-XXXXXX" alt="">
 *
 * Page → Sigil mapping:
 *   architect.html      → sigil_architect_prime.png
 *   registry.html       → sigil_registry_core.png
 *   system-overview.html → sigil_system_overview.png
 *   protocol.html       → sigil_protocol.png
 */
.bc-sigil {
  display: block;
  filter: brightness(0.85);
  transition: var(--bc-sigil-transition);
  pointer-events: auto;
  cursor: default;
}

.bc-sigil:hover {
  filter: var(--bc-saber-sigil) brightness(1);
}

/* Centred sigil layout helper */
.bc-sigil-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 2rem 0;
}

.bc-sigil-container .bc-sigil {
  max-width: 220px;
  width: 100%;
  height: auto;
}

/* ─── .bc-archivist-seal — Corridor Closure Mark ─────────────────────────── */
/*
 * Usage:
 *   <div class="bc-archivist-seal-host" data-uidf="BC-UIDF-XXXXXX">
 *     [page content]
 *     <img src="/assets/glyphs/seal_wave_primary.png"
 *          class="bc-archivist-seal" alt="">
 *   </div>
 */
.bc-archivist-seal-host {
  position: relative;
}

.bc-archivist-seal {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  opacity: 0;
  filter: none;
  border-radius: 6px;
  transition: var(--bc-glyph-transition);
  pointer-events: none;
  user-select: none;
}

/* ─── .bc-archivist-seal--custodian — DECLARATION corridor-closure custodian ─
   Replaces the abstract seal glyph with the kneeling custodian2 figure
   (background cut to transparent from the Midjourney final, same processing
   precedent as the flank watermarks). Portrait (~0.62:1), so sized by HEIGHT to
   the operator red-circle scale (~92px) with width:auto to preserve aspect —
   no square crop, no border-radius box.

   Behaviour DIFFERS from the abstract seal (operator decisions):
   • ALWAYS VISIBLE — persistent in the corner, not hidden-until-hover. So the
     base opacity:0 and the saber-on hover/latch reveal are overridden here.
   • NATIVE colour — no inherited --bc-saber-seal amber filter; the figure shows
     its own white/teal. filter stays none in every state.
   • DESKTOP ONLY — hidden below 640px, where the narrow panel makes the figure
     collide with the ARTIFACT V1.0 version line (same wide-surface-only posture
     as the flank watermarks). */
.bc-archivist-seal--custodian {
  width: auto;
  height: 92px;
  border-radius: 0;
  opacity: 1;          /* always visible — override base opacity:0 */
  filter: none;        /* native white/teal — no amber reveal filter */
  /* seat the kneeling figure so its base sits on the panel's inner corner,
     matching where the 32px seal sat (bottom-right inset). */
  bottom: 6px;
  right: 10px;
}

/* Hold the always-visible / native-colour posture through every saber state
   (base rules would otherwise re-apply opacity + the amber seal filter on
   hover / latch under saber-on). */
html.saber-on .bc-archivist-seal--custodian,
html.saber-on .bc-archivist-seal-host:hover .bc-archivist-seal--custodian,
html.saber-on .bc-archivist-seal--custodian[data-glyph-latched="on"] {
  opacity: 1;
  filter: none;
  pointer-events: none;   /* purely a mark now — not a latch target */
  cursor: default;
}

@media (max-width: 640px) {
  /* narrow panel corner collides with the version line — desktop-only mark. */
  .bc-archivist-seal--custodian { display: none; }
}

/* ─── Void Markers — Page Void Decoration ────────────────────────────────── */
/*
 * Void markers sit as faint background marks inside page void zones.
 * They are non-interactive — latent structure only.
 *
 * Usage:
 *   <img src="/assets/glyphs/void_zero_cut.png"
 *        class="bc-void-marker" alt="">
 */
.bc-void-marker {
  display: block;
  opacity: 0.06;
  filter: none;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
  position: absolute;
}

/* Void marker size variants */
.bc-void-marker--micro  { width: 32px;  height: 32px;  }
.bc-void-marker--small  { width: 64px;  height: 64px;  }
.bc-void-marker--mid    { width: 120px; height: 120px; }
.bc-void-marker--large  { width: 240px; height: 240px; }
.bc-void-marker--macro  { width: 100%;  max-width: 480px; height: auto; }

/* ─── Declaration flank watermarks ────────────────────────────────────────
   Faint teal sealing sigils seated in the void columns either side of the
   DECLARATION panel. Pure NON-INTERACTIVE watermarks — deliberately NOT
   .bc-void-marker, so glyph-latch never binds them and there is no toggle.
   Fixed opacity 0.28 at all times (no saber-on brightening, no click
   resolve); pointer-events:none always. Teal-on-transparent circular plates
   with screen blend + accent glow, matching the reference void markers so the
   colour never clashes on the dark field. Vertically centred on the panel and
   offset outward into the negative space; below the panel width they hide so
   nothing overlaps the copy. */
.bc-declaration-flank {
  position: absolute;
  /* Vertically centred on the panel's bottom edge — in line with the separator
     rule below the DECLARATION panel (not the panel middle). */
  top: auto;
  bottom: 0;
  transform: translateY(50%);
  width: 240px;
  height: 240px;
  opacity: 0.28;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: drop-shadow(0 0 6px var(--bc-accent));
  user-select: none;
}
.bc-declaration-flank--left  { right: 100%; margin-right: clamp(4px, 1vw, 20px); }
.bc-declaration-flank--right { left: 100%;  margin-left:  clamp(4px, 1vw, 20px); }
/* The 240px plates only fit the void columns on wide viewports; below ~1400px
   the columns are too narrow and the plates would clip the screen edge, so
   hide them there (they are a wide-desktop flourish, never load-bearing). */
@media (max-width: 1400px) {
  .bc-declaration-flank { display: none; }
}

/* ─── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bc-seal-glyph,
  .bc-sigil,
  .bc-archivist-seal {
    transition: none;
  }
}

/* ─── Glyph catalogue — quick-reference class aliases ────────────────────── */
/*
 * GLYPH-FAM-01 — Edge Primaries (transparent, use on dark bg)
 *   .bc-glyph--edge-prime      → glyph_edge_prime.png
 *   .bc-glyph--inner-rung      → glyph_inner_rung.png
 *   .bc-glyph--tri-vector      → glyph_tri_vector.png
 *   .bc-glyph--hex-frame       → glyph_hex_frame.png
 *   .bc-glyph--split-arc       → glyph_split_arc.png
 *   .bc-glyph--vector-node     → glyph_vector_node.png
 *
 * VOID-BATCH-01 — Void Primitives
 *   .bc-void--zero-cut         → void_zero_cut.png
 *   .bc-void--dual-cut         → void_dual_cut.png
 *   .bc-void--tri-void         → void_tri_void.png
 *   .bc-void--cross-void       → void_cross_void.png
 *   .bc-void--lattice-void     → void_lattice_void.png
 *
 * SIGIL-FAM-01 — Canonical Sigils (dark bg #0C0F14, gold saber)
 *   .bc-sigil--architect       → sigil_architect_prime.png
 *   .bc-sigil--registry        → sigil_registry_core.png
 *   .bc-sigil--system-overview → sigil_system_overview.png
 *   .bc-sigil--protocol        → sigil_protocol.png
 *
 * ARCH-SEAL-BATCH-01 — Primary Seals (transparent)
 *   .bc-seal--wave-primary     → seal_wave_primary.png
 *   .bc-seal--topology-lock    → seal_topology_lock.png
 *   .bc-seal--lineage-primus   → seal_lineage_primus.png
 *
 * Full manifest: bs02_glyph_generation_report.txt
 * Sealing glyphs: EMBARGOED — operator-supervised only
 */

/* ─── .bc-page-sigil — Injected Canonical Page Sigil ────────────────────── */
/*
 * Distinct from .bc-sigil (nav element).
 * Injected at top of <main> on sensitive pages.
 * Sigil assignment:
 *   registry.html        → sigil_registry_core.png
 *   system-overview.html → sigil_system_overview.png
 *   protocol.html        → sigil_protocol.png
 *   invention.html       → sigil_architect_prime.png
 */
.bc-page-sigil-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 0 1.5rem;
  width: 100%;
}

.bc-page-sigil {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: brightness(0.8);
  border-radius: 12px;
  transition: filter 0.4s ease;
  pointer-events: auto;
  cursor: default;
  user-select: none;
}

.bc-page-sigil:hover {
  filter: var(--bc-saber-sigil) brightness(1);
}

@media (prefers-reduced-motion: reduce) {
  .bc-page-sigil { transition: none; }
}


/* ─── Site-Wide Glyph Gate — Wave BS03 — independent from box latch ───────────────── */
/*
 * Glyphs are INDEPENDENT of the parent box-switch state.
 * Gate: html.saber-on only.
 *
 *   Saber off  → glyphs invisible, non-interactive (base opacity:0)
 *   Saber on   → void markers faint ambient; seals hidden at rest
 *                hover .bc-archivist-seal-host → seal reveals
 *                click glyph → data-glyph-latched="on" → pinned visible
 *
 * Wave BS03 — Dark Carrier Commander (ETH)
 */

/* ── Void markers: faint ambient when saber on ── */
html.saber-on .bc-void-marker {
  opacity: 0.06;
  filter: var(--bc-saber-void);
  pointer-events: auto;
  cursor: pointer;
  transition: opacity var(--bc-glyph-transition), filter var(--bc-glyph-transition);
}

/* ── Archivist seals: hidden at rest, interactive when saber on ── */
html.saber-on .bc-archivist-seal {
  pointer-events: auto;
  cursor: pointer;
}

html.saber-on .bc-archivist-seal-host:hover .bc-archivist-seal {
  opacity: 1;
  filter: var(--bc-saber-seal);
}

/* ── Pinned glyph — data-glyph-latched="on" ── */
html.saber-on .bc-void-marker[data-glyph-latched="on"] {
  opacity: 0.18;
  filter: var(--bc-saber-void);
}

html.saber-on .bc-archivist-seal[data-glyph-latched="on"] {
  opacity: 1;
  filter: var(--bc-saber-seal);
}

@media (prefers-reduced-motion: reduce) {
  .bc-void-marker,
  .bc-archivist-seal {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LSM-SCF-01 — Linear State Marker · SC Flank Edition
   Flank-tier companion instrument to .sc-section / .sc-canvas-frame
   Dormant until sc-section latch (data-saber="on")
   ═══════════════════════════════════════════════════════════════════════ */

.bc-lsm-scf {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 4px;
  background: #0C0F14;
  border: 1px solid #1E2530;
  border-radius: 4px;
  height: 420px;                /* match sc-canvas height */
  box-sizing: border-box;
  flex-shrink: 0;
  /* dormant — invisible until latch */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bc-lsm-scf--active {
  opacity: 1;
  pointer-events: auto;
}

/* Column wrapper */
.bc-lsm-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 8px;
}

/* Column label chip */
.bc-lsm-col-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 4px;
  line-height: 1;
  color: #3A4355;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Cell stack */
.bc-lsm-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  justify-content: flex-end;
}

/* Individual cell */
.bc-lsm-cell {
  width: 8px;
  height: 6px;
  border-radius: 1px;
  flex-shrink: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.bc-lsm-cell--off {
  background: #1E2530;
  opacity: 0.4;
}

.bc-lsm-cell--on {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════
   GREEN-SABER STATE — void markers + archivist seals (state 2)
   Inner child plates: sf-card, artifact-plate, codex-class, codex-definition
   data-saber="green" — same activation as "on", gold seal filter preserved
   ═══════════════════════════════════════════════════════════════════════ */

/* Void markers activate on green latch */
html.saber-on .sf-card[data-saber="green"] .bc-void-marker,
html.saber-on .artifact-plate[data-saber="green"] .bc-void-marker,
html.saber-on .codex-class[data-saber="green"] .bc-void-marker,
html.saber-on .codex-definition[data-saber="green"] .bc-void-marker {
  opacity: 0.12;
  filter: var(--bc-saber-void);
}

/* Archivist seals activate on green latch */
html.saber-on .sf-card[data-saber="green"] .bc-archivist-seal-host .bc-archivist-seal,
html.saber-on .sf-card[data-saber="green"] .bc-archivist-seal-host:hover .bc-archivist-seal,
html.saber-on .artifact-plate[data-saber="green"] .bc-archivist-seal-host .bc-archivist-seal,
html.saber-on .artifact-plate[data-saber="green"] .bc-archivist-seal-host:hover .bc-archivist-seal,
html.saber-on .codex-class[data-saber="green"] .bc-archivist-seal-host .bc-archivist-seal,
html.saber-on .codex-class[data-saber="green"] .bc-archivist-seal-host:hover .bc-archivist-seal,
html.saber-on .codex-definition[data-saber="green"] .bc-archivist-seal-host .bc-archivist-seal,
html.saber-on .codex-definition[data-saber="green"] .bc-archivist-seal-host:hover .bc-archivist-seal {
  opacity: 1;
  filter: var(--bc-saber-seal);
}


/* Green-saber state (Wave BS03): glyphs are already ambient via html.saber-on gate above.
   No additional glyph rules needed for data-saber="green". */

/* Archivist seals activate on green latch */
html.saber-on .sf-card[data-saber="green"] .bc-archivist-seal-host .bc-archivist-seal,
html.saber-on .sf-card[data-saber="green"] .bc-archivist-seal-host:hover .bc-archivist-seal,
html.saber-on .artifact-plate[data-saber="green"] .bc-archivist-seal-host .bc-archivist-seal,
html.saber-on .artifact-plate[data-saber="green"] .bc-archivist-seal-host:hover .bc-archivist-seal,
html.saber-on .codex-class[data-saber="green"] .bc-archivist-seal-host .bc-archivist-seal,
html.saber-on .codex-class[data-saber="green"] .bc-archivist-seal-host:hover .bc-archivist-seal,
html.saber-on .codex-definition[data-saber="green"] .bc-archivist-seal-host .bc-archivist-seal,
html.saber-on .codex-definition[data-saber="green"] .bc-archivist-seal-host:hover .bc-archivist-seal {
  opacity: 1;
  filter: var(--bc-saber-seal);
}