/* _diagram_base.css — Shared design system for The Deeper Law figures */

/* Palette aligned with the cosmic reader (book-template-cosmic.html):
   deep-space surfaces, parchment text, luminous gold. The PEACOCK system —
   encoding trio (gold #cfa356 / green #2ba876 / red #d0564c) plus a royal-
   blue-forward categorical set (blue/purple/orange/teal) and an ember→gold
   ordinal ramp. Every trio clears colour-blind separation ΔE ≥ 12 in both
   themes; the full 7-colour set leans on the figures' direct labels for the
   hardest warm pair on parchment. Gold is pinned (Nell's call). Light-mode
   gold is a darker bronze by necessity (contrast on parchment), not a bug.
   Craft tokens (type scale, glow tiers, spacing, stroke) live below the
   colour blocks; shared SVG <defs> are injected by _diagram_helpers.js so
   figures reference url(#d-soft) / url(#d-orb) with zero duplication. */
:root, [data-theme="dark"] {
    --d-bg: #07080c;
    --d-bg-card: rgba(15, 17, 23, 0.78);
    --d-bg-canvas: #0c0e14;
    --d-bg-hover: #161923;
    --d-text: #f0ece4;
    --d-text-secondary: #c4b89e;
    --d-text-muted: #8a8375;
    --d-accent-gold: #cfa356;
    --d-accent-gold-bg: rgba(201, 166, 102, 0.08);
    --d-accent-gold-border: rgba(201, 166, 102, 0.3);
    --d-accent-green: #2ba876;
    --d-accent-green-bg: rgba(43, 168, 118, 0.1);
    --d-accent-green-dark: #1f8a5c;
    --d-accent-red: #d0564c;
    --d-border: rgba(201, 166, 102, 0.14);
    --d-border-light: rgba(201, 166, 102, 0.2);
    --d-border-mid: rgba(201, 166, 102, 0.28);
    --d-border-canvas: rgba(201, 166, 102, 0.1);
    --d-cell-active: #cfa356;
    --d-cell-bg: #141721;
    --d-slider-track: #232734;
    --d-slider-thumb: #cfa356;
    --d-glow-gold: rgba(207, 163, 86, 0.45);
    --d-glow-gold-strong: rgba(207, 163, 86, 0.75);
    --d-breadcrumb-bg: rgba(15, 17, 23, 0.6);
    --d-breadcrumb-border: rgba(201, 166, 102, 0.2);
    --d-btn-bg: rgba(201, 166, 102, 0.12);
    --d-btn-border: rgba(201, 166, 102, 0.38);
    --d-btn-hover: rgba(201, 166, 102, 0.22);
    --d-conclusion-bg: rgba(43, 168, 118, 0.08);
    --d-conclusion-border: rgba(43, 168, 118, 0.3);
    --d-conclusion-glow: rgba(43, 168, 118, 0.4);
}

[data-theme="light"] {
    --d-bg: #faf8f5;
    --d-bg-card: rgba(245, 242, 238, 0.9);
    --d-bg-canvas: #f0ede8;
    --d-bg-hover: #ece8e0;
    --d-text: #1a1a1a;
    --d-text-secondary: #555;
    --d-text-muted: #666;
    --d-accent-gold: #8a6e10;
    --d-accent-gold-bg: rgba(138, 110, 16, 0.08);
    --d-accent-gold-border: rgba(138, 110, 16, 0.25);
    --d-accent-green: #17734c;
    --d-accent-green-bg: rgba(23, 115, 76, 0.08);
    --d-accent-green-dark: #0f5a38;
    --d-accent-red: #9e3428;
    --d-border: #ccc;
    --d-border-light: #ddd;
    --d-border-mid: #bbb;
    --d-border-canvas: #ddd;
    --d-cell-active: #8a6e10;
    --d-cell-bg: #e8e4dc;
    --d-slider-track: #ccc;
    --d-slider-thumb: #8a6e10;
    --d-glow-gold: rgba(138, 110, 16, 0.3);
    --d-glow-gold-strong: rgba(138, 110, 16, 0.6);
    --d-breadcrumb-bg: rgba(245, 242, 238, 0.8);
    --d-breadcrumb-border: rgba(138, 110, 16, 0.2);
    --d-btn-bg: rgba(138, 110, 16, 0.1);
    --d-btn-border: rgba(138, 110, 16, 0.35);
    --d-btn-hover: rgba(138, 110, 16, 0.2);
    --d-conclusion-bg: rgba(23, 115, 76, 0.06);
    --d-conclusion-border: rgba(23, 115, 76, 0.25);
    --d-conclusion-glow: rgba(23, 115, 76, 0.3);
}

/* ============================================================
   PEACOCK CRAFT SYSTEM — categorical + ramp + type + light + space
   Additive layer: everything above is the legacy trio (repointed to
   Peacock); everything here is new. Both themes. See _diagram_helpers.js
   for the shared SVG <defs> (filters/gradients) figures reference by id.
   ============================================================ */
:root, [data-theme="dark"] {
    /* Categorical set — fixed order: gold, green, red, blue, purple, orange, teal.
       Roles: blue=physics/information/prediction · purple=complexity/society/
       abstraction · orange=energy/dispersal/2nd-law/heat · teal=optionality/
       possibility/minds/emergence. */
    --d-cat-gold: #cfa356;
    --d-cat-green: #2ba876;
    --d-cat-red: #d0564c;
    --d-cat-blue: #2f80d8;
    --d-cat-purple: #7d4fd0;
    --d-cat-orange: #dd6a2a;
    --d-cat-teal: #14a2a0;
    --d-cat-love: #d76b9e;   /* minted love/care accent (Nell, 2026-07-04): warm rose, outside the base Peacock set — for love/care/welfare concepts (fig-10) */
    /* aliases for figures that reference --d-accent-* for the extended hues */
    --d-accent-blue: #2f80d8;
    --d-accent-purple: #7d4fd0;
    --d-accent-orange: #dd6a2a;
    --d-accent-teal: #14a2a0;
    --d-accent-love: #d76b9e;

    /* Region / glow derivations — brand-consistent soft fields (replaces the
       Flat-UI #2ecc71 / #e74c3c that some figures reached for locally). */
    --d-accent-gold-glow: rgba(207, 163, 86, 0.36);
    --d-accent-gold-region: rgba(207, 163, 86, 0.10);
    --d-accent-green-glow: rgba(43, 168, 118, 0.36);
    --d-accent-green-region: rgba(43, 168, 118, 0.12);
    --d-accent-red-glow: rgba(208, 86, 76, 0.30);
    --d-accent-red-region: rgba(208, 86, 76, 0.12);
    --d-accent-blue-glow: rgba(47, 128, 216, 0.32);
    --d-accent-blue-region: rgba(47, 128, 216, 0.12);
    --d-accent-love-glow: rgba(215, 107, 158, 0.34);
    --d-accent-love-region: rgba(215, 107, 158, 0.12);

    /* Ordinal ramp — single family, deep ember → luminous gold. Order is
       encoded by lightness+size+position, NOT by hue. A "hottest event"
       (e.g. the Big Bang) gets a white spark ON TOP of ramp-0 so the hottest
       is never the dimmest — a per-figure move, documented in the toolkit. */
    --d-ramp-0: #9a5228;  /* legibility floor: the earliest node must read on near-black (≈3.4:1) */
    --d-ramp-1: #b3652c;
    --d-ramp-2: #c98038;
    --d-ramp-3: #d89a44;
    --d-ramp-4: #e2b45a;
    --d-ramp-5: #ecc873;
    --d-ramp-6: #f8dd93;

    /* Type scale — one Georgia voice. HTML chrome in rem (below); SVG <text>
       uses user-units chosen from {16, 12, 10.5, 9.5} proportional to a
       ~560-wide viewBox (scale to each figure's own width). */
    --d-fs-title: 1.6rem;
    --d-fs-label: 0.95rem;
    --d-fs-annot: 0.82rem;
    --d-fs-micro: 0.72rem;
    --d-tracking-caps: 0.16em;

    /* Glow tiers — THREE only (Nell: restraint; first pass was "a little
       excessive"). Values are feGaussianBlur stdDeviation for the shared
       filters + emission opacities. Treat as a ceiling, not a target. */
    --d-glow-ambient: 2;      /* hairline atmosphere / ambient curves */
    --d-glow-focal: 3.4;      /* data marks / the focal curve */
    --d-glow-hero: 6;         /* the single focal point: well / hub emission */
    --d-emit-well: 0.36;      /* radial-gradient peak opacity, well/hub */
    --d-emit-halo: 0.24;      /* node halo opacity (0.18–0.28) */

    /* Spacing + stroke — stroke values are SVG user-units (a convention). */
    --d-space: 8px;
    --d-stroke-data: 2.6;     /* data marks */
    --d-stroke-axis: 1;       /* axes */
    --d-stroke-grid: 0.75;    /* hairline grid */
    --d-plate-top: #0a0b11;   /* cosmic plate gradient (also in shared defs) */
    --d-plate-bot: #070709;
}

[data-theme="light"] {
    --d-cat-gold: #8a6e10;
    --d-cat-green: #17734c;
    --d-cat-red: #9e3428;
    --d-cat-blue: #1a63c0;
    --d-cat-purple: #4f38a8;
    --d-cat-orange: #c85620;
    --d-cat-teal: #0d7d7f;
    --d-cat-love: #a83e77;   /* light-mode love accent: deeper rose, legible on parchment */
    --d-accent-blue: #1a63c0;
    --d-accent-purple: #4f38a8;
    --d-accent-orange: #c85620;
    --d-accent-teal: #0d7d7f;
    --d-accent-love: #a83e77;

    --d-accent-gold-glow: rgba(138, 110, 16, 0.24);
    --d-accent-gold-region: rgba(138, 110, 16, 0.08);
    --d-accent-green-glow: rgba(23, 115, 76, 0.26);
    --d-accent-green-region: rgba(23, 115, 76, 0.10);
    --d-accent-red-glow: rgba(158, 52, 40, 0.24);
    --d-accent-red-region: rgba(158, 52, 40, 0.10);
    --d-accent-blue-glow: rgba(26, 99, 192, 0.24);
    --d-accent-blue-region: rgba(26, 99, 192, 0.10);
    --d-accent-love-glow: rgba(168, 62, 119, 0.24);
    --d-accent-love-region: rgba(168, 62, 119, 0.10);

    /* Light-mode ramp: a warm sequence that stays legible on parchment
       (all steps darker than #faf8f5); order carried by position+size+label. */
    --d-ramp-0: #8a3a12;
    --d-ramp-1: #a1521c;
    --d-ramp-2: #ac6a22;
    --d-ramp-3: #a87c24;
    --d-ramp-4: #98741a;
    --d-ramp-5: #8a6410;
    --d-ramp-6: #74580e;

    --d-plate-top: #faf8f5;
    --d-plate-bot: #f0ede8;
}

/* ============================================================
   COSMIC SCENE KIT — cinematic framing + SVG token fills
   The repeated pieces from the hero figures (57/06/07), codified so
   figures INHERIT rather than re-declare them across the sweep. The
   bloom/nebula/vignette/plate GRADIENTS + blur filters live in
   _diagram_helpers.js shared <defs> (url(#d-plate) / url(#d-halo) /
   url(#d-atmo) / url(#d-vignette) / url(#d-neb-*) / url(#d-blur-*)).
   Restraint lock (Nell): under-do bloom — drama comes from atmosphere +
   scale; never glow text; soft radial pools, never hard tint blocks.
   ============================================================ */

/* Star atmosphere + vignette are the DEEP-SPACE (dark) reading only;
   parchment gets neither. Deduped here from 06 & 57. */
[data-theme="light"] .scene-stars,
[data-theme="light"] .scene-vignette { opacity: 0; }

/* Framing for a focal scene container (SVG or div). Compose with
   .cosmic-breakout when the scene should command the frame. */
.cosmic-scene {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--d-border-light);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.34);
}

[data-theme="light"] .cosmic-scene { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); }

/* Break out of the narrow text column — the hero scene is wider than the copy. */
.cosmic-breakout {
    width: min(94vw, 780px);
    height: auto;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* SVG <text>/marks theme-switch via fill (NOT color — a latent bug in the
   originals). Reference these so semantic figures inherit the palette;
   d-prefixed so they never collide with a figure's own local classes. */
.d-fill-text   { fill: var(--d-text); }
.d-fill-sec    { fill: var(--d-text-secondary); }
.d-fill-muted  { fill: var(--d-text-muted); }
.d-fill-gold   { fill: var(--d-accent-gold); }
.d-fill-green  { fill: var(--d-accent-green); }
.d-fill-red    { fill: var(--d-accent-red); }
.d-fill-blue   { fill: var(--d-cat-blue); }
.d-fill-purple { fill: var(--d-cat-purple); }
.d-fill-orange { fill: var(--d-cat-orange); }
.d-fill-teal   { fill: var(--d-cat-teal); }
.d-fill-love   { fill: var(--d-accent-love); }
.d-fill-bg     { fill: var(--d-bg); }
.d-stroke-gold  { stroke: var(--d-accent-gold); }
.d-stroke-green { stroke: var(--d-accent-green); }
.d-stroke-red   { stroke: var(--d-accent-red); }
.d-stroke-love  { stroke: var(--d-accent-love); }
.d-stroke-sec   { stroke: var(--d-text-secondary); }
.d-stroke-muted { stroke: var(--d-text-muted); }
/* quiet-chrome axis: gold hairline (set stroke-opacity 0.11–0.22 per figure) */
.d-axis { stroke: var(--d-accent-gold); }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    background: var(--d-bg);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201, 166, 102, 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 85% 110%, rgba(74, 111, 165, 0.05) 0%, transparent 70%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    color: var(--d-text);
}

[data-theme="light"] body {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(138, 110, 16, 0.04) 0%, transparent 70%);
}

::selection { background: rgba(201, 166, 102, 0.3); }

h1 {
    font-size: 1.7rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--d-accent-gold);
    text-shadow: 0 0 24px var(--d-glow-gold);
    text-align: center;
}

[data-theme="light"] h1 { text-shadow: none; }

.subtitle {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--d-text-muted);
    margin-bottom: 1.4rem;
    text-align: center;
}

/* Gold hairline between subtitle and figure body — the reader's motif */
.subtitle::after {
    content: '';
    display: block;
    width: 120px;
    height: 1px;
    margin: 1.1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--d-accent-gold), transparent);
    opacity: 0.55;
}

.insight-box {
    margin-top: 2rem;
    padding: 1.5rem 2rem;
    background: var(--d-accent-gold-bg);
    border: 1px solid var(--d-accent-gold-border);
    border-left: 3px solid var(--d-accent-gold);
    border-radius: 0 8px 8px 0;
    max-width: 680px;
    text-align: center;
    line-height: 1.8;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .insight-box { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }

.insight-box h2 {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--d-accent-gold);
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
}

.insight-box p {
    color: var(--d-text-secondary);
    font-style: italic;
}

.insight-box em {
    color: var(--d-accent-gold);
    font-style: normal;
    font-weight: 500;
}

canvas {
    border: 1px solid var(--d-border-canvas);
    border-radius: 10px;
    background: var(--d-bg-canvas);
    display: block;
}

/* Experiment cross-reference caption */
.experiment-refs {
    max-width: 680px;
    margin: 2rem auto 0;
    padding: 0.8rem 1.2rem;
    font-size: 0.75rem;
    color: var(--d-text-muted);
    border: 1px solid var(--d-border);
    border-radius: 6px;
    line-height: 1.6;
}

.experiment-refs strong {
    color: var(--d-accent-gold);
    letter-spacing: 0.05em;
}

/* Guided walkthrough overlay */
.walkthrough-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
    transition: opacity 0.3s ease;
}

.walkthrough-card {
    position: fixed;
    z-index: 210;
    max-width: 420px;
    padding: 1.2rem 1.5rem;
    background: var(--d-bg-card);
    border: 1px solid var(--d-accent-gold-border);
    border-left: 3px solid var(--d-accent-gold);
    border-radius: 0 8px 8px 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--d-text);
    font-size: 0.9rem;
    line-height: 1.7;
}

.walkthrough-card .step-label {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--d-accent-gold);
    margin-bottom: 0.5rem;
}

.walkthrough-nav {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

.walkthrough-nav button {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
}

.walkthrough-nav .wt-exit {
    margin-right: auto;
    color: var(--d-text-muted);
    border-color: var(--d-border);
}

.walkthrough-spotlight {
    position: fixed;
    z-index: 205;
    border: 2px solid var(--d-accent-gold);
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
    transition: all 0.4s ease;
    pointer-events: none;
}

.controls {
    margin-top: 2rem;
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: center;
}

button {
    padding: 0.7rem 1.8rem;
    font-family: inherit;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    border: 1px solid var(--d-border-light);
    background: transparent;
    color: var(--d-text-secondary);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.25s ease;
}

button:hover {
    border-color: var(--d-accent-gold);
    color: var(--d-accent-gold);
    background: var(--d-accent-gold-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 12px rgba(201, 166, 102, 0.12);
}

button:focus-visible, .theme-toggle:focus-visible {
    outline: 2px solid var(--d-accent-gold);
    outline-offset: 2px;
}

/* Theme toggle — auto-hidden in iframe mode by _diagram_helpers.js */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--d-border);
    background: var(--d-bg-card);
    color: var(--d-text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
}

.theme-toggle:hover {
    border-color: var(--d-accent-gold);
    color: var(--d-accent-gold);
    transform: scale(1.05);
}

.theme-toggle #theme-icon {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-toggle:active #theme-icon {
    transform: rotate(180deg);
}

/* Color encoding legend */
.encoding-legend {
    position: static;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1rem auto 0;
    font-size: 0.7rem;
    color: var(--d-text-muted);
    opacity: 1;
    transition: opacity 0.3s;
    z-index: 90;
}

.encoding-legend:hover { opacity: 1; }

.diagram-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.encoding-legend .swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
}

.encoding-legend .swatch-gold { background: var(--d-accent-gold); }
.encoding-legend .swatch-green { background: var(--d-accent-green); }
.encoding-legend .swatch-red { background: var(--d-accent-red); }

/* Print */
@media print {
    body { background: white !important; color: #1a1a1a !important; }
    .controls, button, .theme-toggle, .encoding-legend { display: none !important; }
    .insight-box { border: 1px solid #ccc; border-left: 3px solid #8a6e10; background: #fffcf5 !important; }
    canvas { border: 1px solid #ccc !important; }
    h1 { color: #333 !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Mobile base */
@media (max-width: 600px) {
    body { padding: 1rem; }
    h1 { font-size: 1.3rem; letter-spacing: 0.15em; }
    .controls { gap: 0.5rem; }
    button { padding: 0.5rem 1rem; font-size: 0.8rem; }
}

/* Scrollbars — styled to match the cosmic reader; figures embedded in the
   reader never scroll (the iframe bridge hides overflow), these rules cover
   standalone viewing and any inner scrollable panels. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--d-border-mid) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--d-border-mid);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--d-accent-gold);
    background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }