/* landing/viz-panels.css
   Wiring layer for the checksum-pinned @cytognosis/website-template
   (v0.2.0, see TEMPLATE_VERSION.lock + scripts/fetch-template.mjs).

   This file exists so the template's animated figures (landing/viz/*.js,
   which ship as-is from the fetched, checksum-verified bundle) render
   correctly on pages that keep their OWN hand-authored theme
   (landing/styles.css, landing/platform.css, etc.) everywhere else. Per
   TRACK-B_WEBSITE_PLAN, the fetch/vendor step is not a full token
   migration in this pass — do not wire this into pages that don't host
   a template viz figure.

   Deliberately scoped, NOT a full load of the template's own
   template.css: that file also carries header/hero/nav/footer/section
   rules (.hero, .container, .btn, a, body, h1-h6, ...) that would
   reskin the whole page if loaded wholesale. Only two things are
   pulled in here:
     1. The template's own `--cg-*` color custom properties, spacing,
        and shadow tokens (via <link> to the fetched, checksum-pinned
        landing/viz-tokens.generated.css — see scripts/fetch-template.mjs).
        Pure :root custom-property files, no element selectors, so they
        cannot clash with this site's own --violet/--azure/etc. tokens
        (different names, same v11.2.1 hex values by design).
     2. The `.viz-figure`/`.viz-panel*` dark-panel wrapper rules and the
        `.cg-adaptive-*` worked-example component, copied verbatim from
        the template's template.css (sections "10. VIZ FIGURES" and
        "11. ADAPTIVE PANEL"), scoped to class names that exist nowhere
        else in this site's CSS (verified 2026-08-03).
   Re-check for drift against the vendored template.css on every
   template version bump; this file is hand-maintained, not generated.
   ────────────────────────────────────────────────────────────────── */

/* Local aliases so .viz-panel__label / .cg-adaptive-* don't need the
   template's own tokens/fonts.css (which @imports Google Fonts and
   would add an unwanted network dependency just for two label styles).
   Same font stacks the rest of this site already references inline. */
:root {
  --tpl-code: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --tpl-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --tpl-accent: 'Newsreader', Georgia, 'Times New Roman', serif;
}

/* ════════════════════════════════════════════════════════
   VIZ FIGURES — dark inset panels for template viz modules
   Copied from @cytognosis/website-template v0.2.0 template.css
   §10 (verbatim) + §11 (verbatim), scoped class names only.
   ════════════════════════════════════════════════════════ */
.viz-figure {
  padding: var(--space-3xl, 64px) 0;
}
.viz-figure__head {
  max-width: 640px;
  margin-bottom: var(--space-2xl, 48px);
}
.viz-figure__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl, 48px);
}
@media (min-width: 1024px) {
  .viz-figure__grid { grid-template-columns: repeat(2, 1fr); }
}

.viz-panel {
  background: var(--cg-neutral-900);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-xl, 32px) var(--space-lg, 24px);
  box-shadow: var(--shadow-lg);
}
.viz-panel__label {
  font-family: var(--tpl-code);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cg-day-300);
  margin-bottom: var(--space-md, 16px);
}
.viz-panel svg {
  width: 100%;
  height: auto;
  display: block;
}
.viz-panel__caption {
  margin-top: var(--space-md, 16px);
  font-size: 0.85rem;
  color: var(--cg-day-300);
  line-height: 1.6;
}

.viz-panel__rule {
  height: 3px;
  border-radius: var(--radius-pill, 9999px);
  margin-bottom: var(--space-md, 16px);
}
.viz-panel__rule--tech {
  background: var(--cg-gradient-tech);
}
.viz-panel__rule--health {
  background: var(--cg-gradient-health);
}

@media (min-width: 1024px) {
  .viz-panel--wide { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════
   ADAPTIVE PANEL (T0-T3 worked-example rail)
   Copied verbatim from template.css §11.
   ════════════════════════════════════════════════════════ */
.cg-adaptive { --accent: var(--cg-azure-400); }
.cg-adaptive-intro { max-width: 68ch; margin-bottom: var(--space-xl, 32px); }
.cg-adaptive-kicker { color: var(--cg-day-100); font-size: 0.95rem; line-height: 1.65; }

.cg-adaptive-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg, 24px); }
.cg-adaptive-rail-line {
  position: absolute; top: 26px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cg-azure-500), var(--cg-violet-500) 50%, var(--cg-teal-500));
  border-radius: var(--radius-pill, 9999px); opacity: 0.35;
}

.cg-adaptive-stage {
  position: relative;
  padding: var(--space-lg, 24px) var(--space-md, 16px) var(--space-md, 16px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
}
.cg-adaptive-stage-head { display: flex; gap: var(--space-sm, 8px); align-items: flex-start; }
.cg-adaptive-ix {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cg-neutral-950); border: 2px solid var(--accent, var(--cg-azure-400));
  display: grid; place-items: center;
  font-family: var(--tpl-display); font-weight: 700; font-size: 0.85rem;
  color: var(--accent, var(--cg-azure-300)); letter-spacing: -0.02em; flex-shrink: 0;
}
.cg-adaptive-tag {
  display: inline-block; font-family: var(--tpl-code); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent, var(--cg-azure-300));
  margin-bottom: var(--space-xs, 4px);
}
.cg-adaptive-title { font-size: 0.92rem; font-weight: 600; color: var(--cg-day-50); letter-spacing: -0.01em; line-height: 1.3; }
.cg-adaptive-body { font-size: 0.82rem; line-height: 1.6; color: var(--cg-day-300); }

.cg-marker-chips { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.cg-marker-chips li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 10px; background: rgba(139, 63, 199, 0.1); border: 1px solid rgba(139, 63, 199, 0.22);
  border-radius: var(--radius-sm, 6px); font-family: var(--tpl-code); font-size: 0.72rem;
}
.cg-m-name { color: var(--cg-day-50); font-weight: 600; letter-spacing: 0.02em; }
.cg-m-note { color: var(--cg-day-300); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }

.cg-readouts { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.cg-readouts li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
  padding: 7px 10px; border-radius: var(--radius-sm, 6px); font-family: var(--tpl-code); font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
.cg-r-name { color: var(--cg-day-50); font-weight: 600; }
.cg-r-delta { color: var(--cg-day-200); font-variant-numeric: tabular-nums; }
.cg-r-arrow { font-size: 0.65rem; }
.cg-readouts .cg-trend-up { border-color: rgba(224, 48, 158, 0.35); background: rgba(224, 48, 158, 0.1); }
.cg-readouts .cg-trend-up .cg-r-delta, .cg-readouts .cg-trend-up .cg-r-arrow { color: var(--cg-magenta-300); }
.cg-readouts .cg-trend-down { border-color: rgba(242, 99, 85, 0.35); background: rgba(242, 99, 85, 0.1); }
.cg-readouts .cg-trend-down .cg-r-delta, .cg-readouts .cg-trend-down .cg-r-arrow { color: var(--cg-coral-300); }
.cg-readouts .cg-trend-flat .cg-r-delta, .cg-readouts .cg-trend-flat .cg-r-arrow { color: var(--cg-day-300); }

.cg-hypotheses { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.cg-hypotheses li { display: grid; grid-template-columns: 1fr 64px 30px; gap: 8px; align-items: center; font-family: var(--tpl-code); font-size: 0.7rem; }
.cg-h-label { color: var(--cg-day-100); font-size: 0.68rem; line-height: 1.3; }
.cg-h-bar { height: 6px; border-radius: var(--radius-pill, 9999px); background: rgba(255, 255, 255, 0.08); overflow: hidden; display: block; }
.cg-h-bar i { display: block; height: 100%; background: var(--cg-gradient-health); border-radius: var(--radius-pill, 9999px); }
.cg-h-p { color: var(--cg-day-200); text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cg-hyp-lead .cg-h-p { color: var(--cg-teal-300); }
.cg-hyp-lead .cg-h-label { color: var(--cg-day-50); font-weight: 600; }

.cg-adaptive-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.cg-diff-col { padding: 8px 10px; border-radius: var(--radius-sm, 6px); font-family: var(--tpl-code); font-size: 0.68rem; line-height: 1.5; }
.cg-diff-h { display: block; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; font-weight: 600; }
.cg-diff-add { background: rgba(20, 163, 163, 0.1); border: 1px solid rgba(20, 163, 163, 0.28); }
.cg-diff-add .cg-diff-h { color: var(--cg-teal-300); }
.cg-diff-add li { color: var(--cg-day-50); padding: 2px 0; }
.cg-diff-drop { background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.08); }
.cg-diff-drop .cg-diff-h { color: var(--cg-day-300); }
.cg-diff-drop li { color: var(--cg-day-300); padding: 2px 0; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.25); }

.cg-adaptive-foot {
  display: flex; align-items: center; gap: 10px; margin-top: var(--space-lg, 24px);
  padding: 14px 18px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent, var(--cg-azure-400)) 10%, transparent), transparent);
  border-left: 3px solid var(--accent, var(--cg-azure-400)); border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  font-family: var(--tpl-accent); font-style: italic; font-size: 0.9rem; color: var(--cg-day-100); line-height: 1.55;
}

@media (max-width: 1100px) { .cg-adaptive-rail { grid-template-columns: 1fr 1fr; } .cg-adaptive-rail-line { display: none; } }
@media (max-width: 640px) { .cg-adaptive-rail { grid-template-columns: 1fr; } }

/* ── minimum touch target for any interactive control inside a
   viz-panel (none currently ship interactive controls, kept as a
   guardrail if a future figure adds one) ── */
.viz-panel button, .viz-panel [role="button"] {
  min-height: 44px;
}