/* CMCI Atlas — v0.3 frozen build · stylesheet
   Christian St-Louis · 2026-05-10
   Posture: archival, audit-oriented, instrument-like.
   No animations, no gradients, no glow, no marketing aesthetics. */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: #2a2a2a;
  background: #fafafa;
}

header {
  padding: 16px 24px;
  border-bottom: 1px solid #e0e0e0;
  background: #ffffff;
}
header h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.02em; }
header .subtitle { font-size: 12px; color: #666; margin-top: 2px; font-weight: 400; }
header .posture { font-size: 11px; color: #888; margin-top: 6px; font-style: italic; }
header .version-banner {
  display: inline-block;
  font-size: 10px;
  background: #f4f1e9;
  color: #6b5b3e;
  padding: 1px 6px;
  border: 1px solid #d9cfb8;
  border-radius: 2px;
  margin-left: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#app { display: flex; height: calc(100vh - 78px); }
#map-container { flex: 1; overflow: hidden; position: relative; background: #fcfcfc; }
#map-svg { width: 100%; height: 100%; cursor: grab; }
#map-svg:active { cursor: grabbing; }

#panel {
  width: 380px;
  border-left: 1px solid #e0e0e0;
  background: #ffffff;
  overflow-y: auto;
  padding: 18px 22px;
  font-size: 13px;
  line-height: 1.5;
}
#panel.empty { color: #999; font-style: italic; }
#panel h2 { margin: 0 0 6px 0; font-size: 16px; font-weight: 600; color: #1a1a1a; }
#panel .panel-meta {
  font-size: 11px; color: #888;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 14px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
#panel .panel-meta span { display: inline-block; margin-right: 12px; }
#panel h3 {
  margin: 16px 0 6px 0;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #444;
}
#panel p { margin: 4px 0 8px 0; }
#panel .source-link {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  background: #f0f0f0;
  padding: 4px 6px;
  border-radius: 3px;
  word-break: break-all;
  display: inline-block;
}
#panel .warning {
  background: #fff8e6;
  border-left: 3px solid #d97706;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 12px;
  line-height: 1.45;
}
#panel .warning strong {
  color: #92400e;
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
#panel .ipnotice {
  background: #fbeeec;
  border-left: 3px solid #b45050;
  padding: 8px 10px;
  margin: 10px 0;
  font-size: 11px;
  color: #5a2929;
}
#panel .patent-list {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  background: #faf5f3;
  padding: 8px 10px;
  border-radius: 3px;
}
#panel .panel-close {
  float: right;
  cursor: pointer;
  color: #888;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}
#panel .panel-close:hover { color: #222; }

#tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(20,20,20,0.92);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
  max-width: 280px;
  z-index: 100;
  display: none;
}
#tooltip .ttlabel { font-weight: 600; margin-bottom: 2px; }
#tooltip .ttmeta { font-size: 10px; opacity: 0.7; }

#legend {
  position: absolute;
  bottom: 16px; left: 16px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 11px;
  line-height: 1.6;
  max-width: 360px;
}
#legend strong { font-size: 11px; }
#legend .legend-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
#legend svg { vertical-align: middle; }

#controls {
  position: absolute;
  top: 16px; right: 16px;
  display: flex; gap: 6px; flex-wrap: wrap;
  max-width: 700px;
  justify-content: flex-end;
}
.btn {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 11px;
  color: #444;
}
.btn:hover { background: #f0f0f0; }

#archival-footer {
  position: absolute;
  bottom: 4px; right: 16px;
  font-size: 10px;
  color: #aaa;
  font-style: italic;
  text-align: right;
  pointer-events: none;
  line-height: 1.35;
}
#archival-footer .principle { color: #888; font-style: normal; font-size: 9px; }

/* v0.6 — layer/partner readability improvements (UX only) */
.layer-label {
  font-size: 12px;
  font-weight: 600;
  fill: #4a5560;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.layer-label.partners-header {
  fill: #3d5066;       /* slightly darker for the right-side header */
  font-weight: 700;
}
.node-label { font-size: 10px; pointer-events: none; fill: #2a2a2a; text-anchor: middle; }
.node-shape { cursor: pointer; }
.node-shape:hover { stroke: #000; stroke-width: 1.5; }
.partner-label { font-size: 10px; fill: #4a5560; pointer-events: none; }
.layer-divider { stroke: #d0d0d0; stroke-width: 1; stroke-dasharray: 2 4; }
.motif-overlay { pointer-events: none; }

/* Partner node shape — slightly darker than n/a tier grey (#888888),
   stronger outline to signal "active connector" without colour.
   Class added by renderer when class === "partner".
   Preserves consent gating + evidence-ring empty grey. */
.node-grp.partner-grp .node-shape {
  fill: #6e7782;       /* graphite blue-grey */
  stroke: #3d4a5a;     /* darker outline for legibility */
  stroke-width: 1.0;   /* slightly stronger than default 0.7 */
}
.node-grp.partner-grp .node-shape:hover {
  stroke: #000;
  stroke-width: 1.5;
}

/* v0.6 — archival background depth (toggleable via body.depth-on)
   Subtle dot-grid pattern. NOT cosmic/mystical/AI-dashboard.
   Looks like archival graph paper at extremely low opacity.
   Default OFF. */
.archive-bg-dots {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
body.depth-on .archive-bg-dots {
  opacity: 0.55;       /* layered onto pattern's already-low fill = ~0.05 effective */
}

.edge-evidence        { stroke: #555; stroke-width: 1.2; fill: none; }
.edge-evidence-strong { stroke: #333; stroke-width: 1.6; fill: none; }
.edge-evidence-na     { stroke: #888; stroke-width: 1.2; fill: none; }
.edge-conceptual      { stroke: #888; stroke-width: 1.0; stroke-dasharray: 5 4; fill: none; }
.edge-speculative     { stroke: #aaa; stroke-width: 0.9; stroke-dasharray: 1 3; fill: none; }
.edge-evidence:hover, .edge-conceptual:hover, .edge-speculative:hover {
  stroke: #c2410c !important; cursor: pointer;
}

/* ============================================================
   v0.4 — readability layer (UX only, no semantic changes)
   ============================================================ */

/* Help panel — collapsible "How to read this Atlas" overlay */
#help-panel {
  position: absolute;
  top: 56px; right: 16px;
  width: 420px;
  max-height: calc(100vh - 110px);
  background: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  padding: 18px 22px;
  font-size: 12px;
  line-height: 1.6;
  color: #333;
  z-index: 50;
  overflow-y: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: none;
}
#help-panel.open { display: block; }
#help-panel h2 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
#help-panel .help-subtitle {
  font-size: 10px;
  color: #888;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
#help-panel h3 {
  margin: 14px 0 4px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
}
#help-panel p { margin: 4px 0 6px 0; }
#help-panel .help-close {
  float: right;
  cursor: pointer;
  color: #888;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
#help-panel .help-close:hover { color: #222; }
#help-panel .help-disclaimer {
  margin-top: 14px;
  padding: 8px 10px;
  background: #f4f4f4;
  border-left: 3px solid #888;
  font-size: 11px;
  font-style: italic;
  color: #555;
}

/* Onboarding highlight — minimal opacity fade, no glow */
.onboard-highlight {
  outline: 2px solid #c2410c;
  outline-offset: 4px;
  border-radius: 2px;
  transition: outline-color 0.4s ease, outline-offset 0.4s ease;
}
.onboard-highlight.fade { outline-color: rgba(194,65,12,0.0); }
.onboard-banner {
  position: absolute;
  top: 80px; left: 50%;
  transform: translateX(-50%);
  background: rgba(35,35,35,0.92);
  color: #fff;
  padding: 8px 16px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 200;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Reader mode — larger labels, wider panel, higher minimum opacity */
body.reader-mode .node-label  { font-size: 12px; }
body.reader-mode .layer-label { font-size: 13px; }
body.reader-mode #panel       { width: 460px; font-size: 14px; line-height: 1.6; }
body.reader-mode #legend      { font-size: 12px; }
body.reader-mode #help-panel  { font-size: 13px; }
body.reader-mode #tooltip     { font-size: 12px; max-width: 360px; line-height: 1.5; }

/* Tooltip readability improvements (always-on) */
#tooltip { max-width: 320px; line-height: 1.5; padding: 8px 12px; }
#tooltip .ttlabel { font-weight: 600; margin-bottom: 3px; font-size: 12px; }
#tooltip .ttmeta {
  font-size: 10px;
  opacity: 0.85;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 4px;
  margin-top: 4px;
}
#tooltip .ttmeta .tt-class { color: #ffd089; font-weight: 600; }
#tooltip .ttmeta .tt-tier  { color: #aac8ff; font-weight: 600; }

@media print {
  #controls, #tooltip, #archival-footer, #help-panel, #epistemic-footer { display: none; }
  #panel { display: none; }
  body { background: #fff; }
}

/* ============================================================
   v0.7 — Domain hover cognitive preview layer (READ-ONLY)
   ============================================================
   Animation runs ONLY during a single mouseenter→mouseleave cycle.
   No idle motion. No glow. No infinite loops. No particle systems.
   No semantic mutation: this layer is visual-only over the graph.
   ============================================================ */

.domain-hit {
  fill: rgba(0,0,0,0);
  stroke: none;
  cursor: zoom-in;
  pointer-events: all;
}
.domain-hit:hover { fill: rgba(0,0,0,0.014); }

.domain-frame {
  fill: none;
  stroke-width: 1.0;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.domain-frame.active { opacity: 0.55; }

.domain-frame-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.domain-frame-label.active { opacity: 0.85; }

/* "Click to enter" hint — affordance only; deep zoom NOT wired in v0.7. */
.domain-frame-hint {
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  fill: #888;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  font-style: italic;
}
.domain-frame-hint.active { opacity: 0.65; }

#dim-veil {
  fill: rgba(252,252,252,0.0);
  pointer-events: none;
  transition: fill 0.45s ease;
}
body.domain-active #dim-veil { fill: rgba(252,252,252,0.28); }

body.domain-active .node-grp:not(.in-domain) { opacity: 0.55 !important; }
body.domain-active .edge:not(.in-domain-edge) { opacity: 0.40 !important; }

@keyframes cmci-breathe {
  0%   { transform: scale(1.000); }
  50%  { transform: scale(1.060); }
  100% { transform: scale(1.000); }
}
.node-grp.in-domain .node-shape {
  transform-origin: center center;
  transform-box: fill-box;
  animation: cmci-breathe 3.5s ease-in-out 1;
}

body.reader-mode .domain-frame-label { font-size: 13px; }
body.reader-mode .domain-frame-hint  { font-size: 10px; }

@media print {
  #dim-veil, .domain-frame, .domain-frame-label, .domain-frame-hint, .domain-hit { display: none; }
}

/* ============================================================
   v0.7.3 — Atmospheric background layer (decorative, opt-in)
   ============================================================
   Sits behind the SVG, behind layer bands, behind everything.
   pointer-events: none — never intercepts hover/click.
   Default OFF: enabled by body.atmosphere-on class.
   A near-opaque white veil ABOVE the image enforces graph readability.
   Print + prefers-reduced-motion suppress the layer entirely.
   ============================================================ */

#map-container { position: relative; }   /* anchor for absolutely-positioned bg */

#atlas-bg, #atlas-bg-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Hidden by default — only painted when body.atmosphere-on. */
  display: none;
  z-index: 0;
}

#atlas-bg {
  background-image: url("background.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Restraint stack — keeps the image atmospheric, never illustrative.
     opacity, blur, desaturation and contrast clamp combine to leave
     only a vague color/luminance gradient under the graph. */
  opacity: 0.10;
  filter: blur(8px) saturate(0.55) brightness(0.78) contrast(0.82);
  transition: opacity 0.4s ease;
}

#atlas-bg-veil {
  /* Archival paper veil — pulls the apparent contrast down to a level
     where the graph reads as primary even on a busy background. */
  background: rgba(252, 252, 252, 0.84);
  z-index: 1;
}

/* The SVG must paint above veil + image */
#map-svg { position: relative; z-index: 2; }

/* Show only when explicitly enabled */
body.atmosphere-on #atlas-bg,
body.atmosphere-on #atlas-bg-veil { display: block; }

/* Domain hover dims background a touch more, never animates it */
body.atmosphere-on.domain-active #atlas-bg { opacity: 0.07; }

/* Reduced-motion users get no atmosphere even if class is set */
@media (prefers-reduced-motion: reduce) {
  #atlas-bg, #atlas-bg-veil { display: none !important; }
}

/* Print: kill the atmosphere outright */
@media print {
  #atlas-bg, #atlas-bg-veil { display: none !important; }
}