/* ============================================================
 * measurelab.ai — site-wide theme
 *
 * Sits on top of the spec at /assets/colors_and_type.css (the
 * SEAM Design System source of truth). The spec defines hex
 * tokens and base resets for the dark surface; this file:
 *
 *   1. Mirrors the spec values as RGB-triplet tokens so Tailwind
 *      can compose alpha utilities (bg-primary/10 etc).
 *   2. Adds the marketing-site light theme (data-theme="light")
 *      derived from the design system's site-light/light.css
 *      (cream surface, slate ink, deep accent green).
 *   3. Adds mode-aware overrides for treatments that don't
 *      translate by recolouring tokens alone (glass-panel,
 *      blueprint-grid, gradient text, code panels, the SEAM
 *      italic-em headline treatment, logo swap).
 * ============================================================ */

@import url("/assets/colors_and_type.css");
/* Marketing-site editorial italic for the .seam-em headline word.
 * (Not in the admin spec; the product doesn't use it.) */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");

/* ── Tailwind composition aliases (RGB triplets) ─────────────── */
:root,
[data-theme="dark"] {
    --foreground: 255 255 255;
    --background: 0 21 37;
    --primary: 136 244 105;
    --primary-container: 109 215 80;
    --on-primary: 7 57 0;
    --secondary: 113 212 234;
    --tertiary: 255 211 182;
    --surface: 0 21 37;
    --surface-container-lowest: 0 15 29;
    --surface-container-low: 6 29 46;
    --surface-container: 11 33 50;
    --surface-container-high: 23 44 61;
    --surface-container-highest: 34 55 73;
    --on-surface: 207 229 252;
    --on-surface-variant: 190 202 181;
    --outline: 137 148 129;
    --outline-variant: 63 74 57;
    --error: 255 180 171;

    --tech-orange: 255 133 6;
    --tech-sky: 135 233 255;
    --tech-mint: 64 250 163;
    --tech-yellow: 251 188 2;
}

/* ── LIGHT theme — marketing-site values per site-light.css ──── */
[data-theme="light"] {
    /* Override the spec's hex tokens for light surfaces. The spec
     * dark values from colors_and_type.css are replaced wholesale
     * for the marketing site's cream-and-slate palette. */
    --color-surface:                  #faf8f3;
    --color-surface-dim:              #faf8f3;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low:    #ffffff;
    --color-surface-container:        #f1ede3;
    --color-surface-container-high:   #eae6dc;
    --color-surface-container-highest:#dcd7c8;
    --color-surface-bright:           #ffffff;
    --color-surface-variant:          #eae6dc;

    --color-primary:                  #2f8f1a;
    --color-primary-container:        #1f6e0d;
    --color-on-primary:               #ffffff;

    --color-secondary:                #1d8da6;
    --color-tertiary:                 #c2501e;

    --color-error:                    #bb2020;

    --color-on-surface:               #0b1d2a;
    --color-on-surface-variant:       #5a6b78;
    --color-on-background:            #0b1d2a;
    --color-outline:                  #8d9aa6;
    --color-outline-variant:          #e6e1d4;

    /* The white-alpha border tints don't read on cream. Re-derive
     * from the slate ink at low alpha. */
    --border-subtle:   rgba(11, 29, 42, 0.06);
    --border-medium:   rgba(11, 29, 42, 0.10);
    --border-strong:   rgba(11, 29, 42, 0.18);

    /* RGB-triplet aliases for Tailwind */
    --foreground: 11 29 42;
    --background: 250 248 243;
    --primary: 47 143 26;
    --primary-container: 31 110 13;
    --on-primary: 255 255 255;
    --secondary: 29 141 166;
    --tertiary: 194 80 30;
    --surface: 255 255 255;
    --surface-container-lowest: 255 255 255;
    --surface-container-low: 255 255 255;
    --surface-container: 241 237 227;
    --surface-container-high: 234 230 220;
    --surface-container-highest: 220 215 200;
    --on-surface: 11 29 42;
    --on-surface-variant: 90 107 120;
    --outline: 141 154 166;
    --outline-variant: 230 225 212;
    --error: 187 32 32;

    --tech-orange: 194 80 30;
    --tech-sky: 12 100 130;
    --tech-mint: 22 132 75;
    --tech-yellow: 162 110 0;

    color-scheme: light;
}

/* The spec sets <html> color-scheme: dark in colors_and_type.css. The
 * pre-paint script in each <head> overrides via data-theme; this rule
 * keeps html.color-scheme in step when the user picks light. */
[data-theme="light"] html { color-scheme: light; }

/* The spec body rule sets background and colour from --color-surface
 * and --color-on-surface; those tokens are mode-overridden above so
 * body adapts automatically. Headings keep the spec's white default
 * in dark mode but flip to slate in light. */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .font-headline { color: rgb(var(--foreground)); }

/* Light-mode scrollbar sits on cream, not deep teal */
[data-theme="light"] ::-webkit-scrollbar-track   { background: var(--color-surface); }
[data-theme="light"] ::-webkit-scrollbar-thumb   { background: var(--color-outline-variant); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--color-outline); }

/* ────────────────────────────────────────────────────────────
 * Mode-aware component overrides
 * ──────────────────────────────────────────────────────────── */

/* Glass panel - subtle tinted overlay */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
}
[data-theme="light"] .glass-panel {
    background: rgba(11, 29, 42, 0.03);
}

/* Blueprint grid */
.blueprint-grid {
    background-image: radial-gradient(circle, rgba(136, 244, 105, 0.10) 1px, transparent 1px);
    background-size: 20px 20px;
}
[data-theme="light"] .blueprint-grid {
    background-image: radial-gradient(circle, rgba(47, 143, 26, 0.10) 1px, transparent 1px);
}

/* Gradient text - tracks the active primary pair (dark green pair on
 * dark, deeper green pair on light; both stay green-on-green) */
.text-gradient-primary {
    background: linear-gradient(135deg, rgb(var(--primary)) 0%, rgb(var(--primary-container)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Tech accent helpers (sparingly used; mostly in code panels) */
.tech-accent-orange { color: rgb(var(--tech-orange)); }
.tech-accent-sky { color: rgb(var(--tech-sky)); }
.tech-accent-mint { color: rgb(var(--tech-mint)); }
.tech-accent-yellow { color: rgb(var(--tech-yellow)); }

/* ────────────────────────────────────────────────────────────
 * SEAM signature: italic primary-tinted single word inside a
 * headline. Per spec, one tinted span per H1, max. Uses
 * Fraunces editorial italic on the marketing site.
 * ──────────────────────────────────────────────────────────── */
.seam-em {
    font-family: "Fraunces", "Times New Roman", serif;
    font-style: italic;
    font-weight: 500;
    color: rgb(var(--primary));
    letter-spacing: -0.02em;
}

/* ────────────────────────────────────────────────────────────
 * Hero pattern: deep teal with primary + secondary radial halos
 * per previews/brand.html. Stays dark in both modes (deep
 * inversion block).
 * ──────────────────────────────────────────────────────────── */
.hero-pattern {
    background:
        radial-gradient(1200px 400px at 20% 110%, color-mix(in srgb, #88f469 18%, transparent), transparent 60%),
        radial-gradient(900px 300px at 90% -20%, color-mix(in srgb, #71d4ea 14%, transparent), transparent 60%),
        #001525;
    color: #cfe5fc;
}

/* ────────────────────────────────────────────────────────────
 * Code panels stay dark in both modes (terminals lock dark
 * inside light UIs - GitHub, Stripe, Vercel convention). Apply
 * .code-panel to any block of mono content - YAML mockups, CLI
 * install snippets, audit-log values.
 * ──────────────────────────────────────────────────────────── */
.code-panel {
    background: #061d2e;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #cfe5fc;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    border-radius: 12px;
}
.code-panel code,
.code-panel pre { color: inherit; font-family: inherit; }

/* ────────────────────────────────────────────────────────────
 * Logo swap: dark-surface logo on dark, light-surface logo on
 * light. HTML uses one img tag per variant; visibility toggles
 * by data-theme.
 * ──────────────────────────────────────────────────────────── */
.logo-dark { display: inline-block; }
.logo-light { display: none; }
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: inline-block; }

/* Theme toggle icon visibility */
[data-theme="dark"] [data-theme-icon="light"] { display: none; }
[data-theme="dark"] [data-theme-icon="dark"] { display: inline-block; }
[data-theme="light"] [data-theme-icon="light"] { display: inline-block; }
[data-theme="light"] [data-theme-icon="dark"] { display: none; }

/* ────────────────────────────────────────────────────────────
 * Buttons - clear primary / secondary hierarchy
 *
 * Primary: filled, vivid, single most-important affordance per
 * view. Dark mode = green gradient with primary glow. Light mode =
 * slate-ink fill (per site-light.css btn-primary), turns deep
 * green on hover with a green halo shadow.
 *
 * Secondary: outlined ghost, subtle. Inverts on hover.
 * ──────────────────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgb(var(--primary)), rgb(var(--primary-container)));
    color: rgb(var(--on-primary));
    box-shadow: 0 0 24px color-mix(in srgb, rgb(var(--primary)) 22%, transparent);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 36px color-mix(in srgb, rgb(var(--primary)) 38%, transparent);
}
.btn-primary:active { transform: translateY(0); }

[data-theme="light"] .btn-primary {
    background: rgb(var(--foreground));
    color: rgb(var(--surface));
    border-color: rgb(var(--foreground));
    box-shadow: 0 1px 2px rgba(11, 29, 42, 0.06), 0 12px 24px -10px rgba(11, 29, 42, 0.18);
}
[data-theme="light"] .btn-primary:hover {
    background: rgb(var(--primary-container));
    border-color: rgb(var(--primary-container));
    box-shadow: 0 0 0 1px rgba(47, 143, 26, 0.15), 0 16px 32px -12px rgba(47, 143, 26, 0.30);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 15px;
    border-radius: 10px;
    background: transparent;
    color: rgb(var(--foreground));
    border: 1px solid rgb(var(--outline-variant));
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn-secondary:hover {
    background: color-mix(in srgb, rgb(var(--primary)) 8%, transparent);
    border-color: rgb(var(--primary));
    color: rgb(var(--primary));
    transform: translateY(-1px);
}
.btn-secondary:active { transform: translateY(0); }

/* Smaller variants - for inline nav use */
.btn-primary-sm { padding: 8px 16px; font-size: 13px; border-radius: 8px; }
.btn-secondary-sm { padding: 8px 16px; font-size: 13px; border-radius: 8px; }

/* Larger variants - for hero / closing-CTA emphasis */
.btn-primary-lg { padding: 18px 32px; font-size: 17px; }
.btn-secondary-lg { padding: 18px 32px; font-size: 17px; }

/* ────────────────────────────────────────────────────────────
 * Nav link hover - green pill fill + colour shift
 *
 * Replaces the muted text-only hover. Reads as a clear "this is
 * a link, you can click it" affordance without competing with
 * primary CTAs.
 * ──────────────────────────────────────────────────────────── */
nav[aria-label="Primary navigation"] a:not([class*="btn-"]):not(.logo-dark):not(.logo-light):not(:has(img)),
nav[aria-label="Primary navigation"] button:not([data-theme-toggle]):not(#burger-btn) {
    position: relative;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease;
}
nav[aria-label="Primary navigation"] a:not([class*="btn-"]):not(.logo-dark):not(.logo-light):not(:has(img)):hover,
nav[aria-label="Primary navigation"] button:not([data-theme-toggle]):not(#burger-btn):hover {
    background: color-mix(in srgb, rgb(var(--primary)) 10%, transparent);
    color: rgb(var(--primary));
}

/* In-page sub-nav: animated bottom-border */
nav[aria-label="Primary navigation"] [aria-label="Page sections"] a {
    border-radius: 0;
    background: transparent !important;
}
nav[aria-label="Primary navigation"] [aria-label="Page sections"] a:hover {
    background: transparent !important;
    color: rgb(var(--primary)) !important;
    border-bottom-color: rgb(var(--primary)) !important;
}

/* ────────────────────────────────────────────────────────────
 * Clickable card lift - apply .card-link to any card-style
 * container that links somewhere. Subtle elevation + primary-tint
 * border on hover.
 * ──────────────────────────────────────────────────────────── */
.card-link,
details.group {
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.card-link:hover,
details.group:hover {
    transform: translateY(-2px);
    border-color: rgb(var(--primary)) !important;
    box-shadow: 0 8px 24px -10px color-mix(in srgb, rgb(var(--primary)) 35%, transparent);
}

/* Open FAQ items lock primary border so the active state is clear */
details.group[open] {
    border-color: rgb(var(--primary)) !important;
}

/* ────────────────────────────────────────────────────────────
 * Hard opacity floor for the nav and footer chrome.
 *
 * Belt-and-braces over the Tailwind utility classes - guarantees
 * the navigation is fully opaque regardless of how the CDN handles
 * the <alpha-value> placeholder substitution. Background sits on
 * the <nav> element itself plus its direct chrome children, so
 * scrolled content stops cleanly at the nav boundary.
 * ──────────────────────────────────────────────────────────── */
nav[aria-label="Primary navigation"] {
    background: var(--color-surface-container-lowest);
}
nav[aria-label="Primary navigation"] > div,
nav[aria-label="Primary navigation"] [aria-label="Page sections"],
nav[aria-label="Primary navigation"] #mobile-menu {
    background: var(--color-surface-container-lowest);
}

/* Dropdowns sit over content - lift one elevation step */
nav[aria-label="Primary navigation"] [data-nav-menu] {
    background: var(--color-surface-container);
}

/* Footer also pinned opaque */
footer[role="contentinfo"] {
    background: var(--color-surface-container);
}

/* ────────────────────────────────────────────────────────────
 * Home page three-agent demo: timing overrides
 *
 * The container carries .demo-with-seam alongside [data-stagger].
 * The first four children (header + three broken cards) fall
 * through to the default data-stagger cascade. Children 5-7
 * (footer line, WITH SEAM divider, resolved card) get a longer
 * pause so the user reads "three different answers" before the
 * resolution arrives. The resolved card pulses a green halo once
 * to draw the eye.
 * ──────────────────────────────────────────────────────────── */
[data-stagger].demo-with-seam.is-visible > *:nth-child(5) { transition-delay: 480ms; }
[data-stagger].demo-with-seam.is-visible > *:nth-child(6) { transition-delay: 1500ms; }
[data-stagger].demo-with-seam.is-visible > *:nth-child(7) { transition-delay: 1750ms; }

[data-stagger].demo-with-seam.is-visible > *:nth-child(7) {
    animation: seam-resolved-glow 2.4s ease-out 1.95s 1 forwards;
}
@keyframes seam-resolved-glow {
    0%   { box-shadow: 0 0 32px color-mix(in srgb, rgb(var(--primary)) 14%, transparent); }
    35%  { box-shadow: 0 0 56px color-mix(in srgb, rgb(var(--primary)) 42%, transparent); }
    100% { box-shadow: 0 0 32px color-mix(in srgb, rgb(var(--primary)) 14%, transparent); }
}

/* ────────────────────────────────────────────────────────────
 * Lineage demo (/seam/canvas/): SVG edges draw themselves on
 * scroll-in via stroke-dashoffset; nodes fade in row by row.
 * Wave 1 is the metric->entity link; wave 2 the canonical
 * source; wave 3 the fallbacks (drawn last so the canonical
 * resolves visually first).
 * ──────────────────────────────────────────────────────────── */
.lineage-edge {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate].is-visible .lineage-edge.edge-wave-1 { stroke-dashoffset: 0; transition-delay: 0.4s; }
[data-animate].is-visible .lineage-edge.edge-wave-2 { stroke-dashoffset: 0; transition-delay: 1.1s; }
[data-animate].is-visible .lineage-edge.edge-wave-3 { stroke-dashoffset: 0; transition-delay: 1.6s; }

.lineage-node {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate].is-visible .lineage-node.node-row-1 { opacity: 1; transition-delay: 0s; }
[data-animate].is-visible .lineage-node.node-row-2 { opacity: 1; transition-delay: 0.7s; }
[data-animate].is-visible .lineage-node.node-row-3 { opacity: 1; transition-delay: 1.2s; }

/* ────────────────────────────────────────────────────────────
 * Integration brand icons (/seam/ connections section).
 * SVGs in /assets/logos/integrations/ are mirrored from
 * simple-icons (MIT) and rewritten to fill="currentColor". Used as
 * CSS masks so the icon takes the active text colour - keeps the
 * 16-logo grid monochrome and consistent with the design system.
 * Falls back to Material Symbols for tools without a brand icon.
 * ──────────────────────────────────────────────────────────── */
.integration-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    flex-shrink: 0;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.icon-bigquery     { mask-image: url("/assets/logos/integrations/googlebigquery.svg"); -webkit-mask-image: url("/assets/logos/integrations/googlebigquery.svg"); }
.icon-googlecloud  { mask-image: url("/assets/logos/integrations/googlecloud.svg"); -webkit-mask-image: url("/assets/logos/integrations/googlecloud.svg"); }
.icon-ga4          { mask-image: url("/assets/logos/integrations/googleanalytics.svg"); -webkit-mask-image: url("/assets/logos/integrations/googleanalytics.svg"); }
.icon-gtm          { mask-image: url("/assets/logos/integrations/googletagmanager.svg"); -webkit-mask-image: url("/assets/logos/integrations/googletagmanager.svg"); }
.icon-posthog      { mask-image: url("/assets/logos/integrations/posthog.svg"); -webkit-mask-image: url("/assets/logos/integrations/posthog.svg"); }
.icon-slack        { mask-image: url("/assets/logos/integrations/slack.svg"); -webkit-mask-image: url("/assets/logos/integrations/slack.svg"); }
.icon-atlassian    { mask-image: url("/assets/logos/integrations/atlassian.svg"); -webkit-mask-image: url("/assets/logos/integrations/atlassian.svg"); }
.icon-notion       { mask-image: url("/assets/logos/integrations/notion.svg"); -webkit-mask-image: url("/assets/logos/integrations/notion.svg"); }
.icon-googledrive  { mask-image: url("/assets/logos/integrations/googledrive.svg"); -webkit-mask-image: url("/assets/logos/integrations/googledrive.svg"); }
.icon-gmail        { mask-image: url("/assets/logos/integrations/gmail.svg"); -webkit-mask-image: url("/assets/logos/integrations/gmail.svg"); }
.icon-github       { mask-image: url("/assets/logos/integrations/github.svg"); -webkit-mask-image: url("/assets/logos/integrations/github.svg"); }
.icon-hubspot      { mask-image: url("/assets/logos/integrations/hubspot.svg"); -webkit-mask-image: url("/assets/logos/integrations/hubspot.svg"); }

/* ────────────────────────────────────────────────────────────
 * Type -> instance reveal (/seam/canvas/).
 *
 * Type card always visible. On scroll-in (.is-visible on the figure),
 * three is-a edges draw via stroke-dashoffset and three instance
 * cards fade in beneath them in sequence over ~1.5s.
 * ──────────────────────────────────────────────────────────── */
.ti-edge {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ti-instance {
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate].is-visible .ti-edge.ti-edge-1     { stroke-dashoffset: 0; transition-delay: 0.30s; }
[data-animate].is-visible .ti-instance.ti-instance-1 { opacity: 1; transition-delay: 0.55s; }
[data-animate].is-visible .ti-edge.ti-edge-2     { stroke-dashoffset: 0; transition-delay: 0.65s; }
[data-animate].is-visible .ti-instance.ti-instance-2 { opacity: 1; transition-delay: 0.90s; }
[data-animate].is-visible .ti-edge.ti-edge-3     { stroke-dashoffset: 0; transition-delay: 1.00s; }
[data-animate].is-visible .ti-instance.ti-instance-3 { opacity: 1; transition-delay: 1.25s; }

/* ────────────────────────────────────────────────────────────
 * Staleness + review demo (/seam/ pre-streaming-sim).
 *
 * Three stacked status pills + three stacked last-reviewed lines
 * cycle through GOVERNED -> DUE -> OVERDUE -> back to GOVERNED on
 * a 9s loop. The REVIEW button pulses primary just before the
 * reset to suggest the cause-and-effect.
 * ──────────────────────────────────────────────────────────── */
.staleness-status,
.staleness-reviewed {
    opacity: 0;
    animation: staleness-cycle 9s ease-in-out infinite;
}
.staleness-status.status-governed,
.staleness-reviewed.reviewed-fresh   { animation-delay:  0s; }
.staleness-status.status-due,
.staleness-reviewed.reviewed-due     { animation-delay: -6s; }
.staleness-status.status-overdue,
.staleness-reviewed.reviewed-overdue { animation-delay: -3s; }

@keyframes staleness-cycle {
    0%    { opacity: 1; }
    30%   { opacity: 1; }
    33%   { opacity: 0; }
    97%   { opacity: 0; }
    100%  { opacity: 1; }
}

/* Button pulses near the end of the OVERDUE phase (~88% of the 9s cycle)
 * to suggest "click me to reset" right before the loop snaps back to
 * GOVERNED. */
.staleness-review-btn {
    animation: staleness-button 9s ease-in-out infinite;
}
@keyframes staleness-button {
    0%, 80% {
        border-color: rgb(var(--outline-variant) / 0.5);
        box-shadow: none;
    }
    88% {
        border-color: rgb(var(--primary));
        box-shadow: 0 0 28px color-mix(in srgb, rgb(var(--primary)) 38%, transparent);
        transform: scale(1.02);
    }
    94% {
        border-color: rgb(var(--primary));
        box-shadow: 0 0 14px color-mix(in srgb, rgb(var(--primary)) 18%, transparent);
        transform: scale(1);
    }
    100% {
        border-color: rgb(var(--outline-variant) / 0.5);
        box-shadow: none;
    }
}

/* ────────────────────────────────────────────────────────────
 * Lens demo (/seam/canvas/) - hover an entity or source to focus
 * its lineage. JS toggles .is-focused on the demo container; nodes
 * carry .is-focused (the hovered one), .is-connected (linked via
 * an active edge) or .is-dimmed (everything else).
 *
 * Default state shows everything at full intensity. Focus state
 * dims the unconnected world to 0.2 and lifts the canonical edge
 * weight so the resolution path stands out.
 * ──────────────────────────────────────────────────────────── */
.lens-demo .canvas-node {
    cursor: pointer;
    transition: opacity 0.35s ease;
}
.lens-demo .canvas-node rect {
    transition: stroke 0.35s ease, stroke-width 0.35s ease, fill 0.35s ease;
}
.lens-demo .canvas-edge {
    transition: opacity 0.35s ease, stroke-width 0.35s ease;
}

/* Default state - all visible, edges slightly dimmed so focus reveals contrast */
.lens-demo .canvas-edge { opacity: 0.7; }

/* Focus state - dim the world, lift the connected slice */
.lens-demo.is-focused .canvas-node.is-dimmed { opacity: 0.22; }
.lens-demo.is-focused .canvas-edge.is-dimmed { opacity: 0.06; }
.lens-demo.is-focused .canvas-edge.is-active { opacity: 1; stroke-width: 2.5; }
.lens-demo.is-focused .canvas-edge.is-active.fallback { stroke-width: 2; }
.lens-demo.is-focused .canvas-node.is-focused rect {
    stroke-width: 2;
    fill: rgb(var(--surface-container));
}

/* Auto-demo intro hint hidden until first cycle finishes */
.lens-demo .lens-hint { opacity: 0; }
.lens-demo.intro-done .lens-hint { opacity: 1; }

/* ────────────────────────────────────────────────────────────
 * Audit Log streaming sim (/seam/ post engineered-query-flow).
 * Rows are inserted at the top via JS on a 1.5s interval; oldest
 * drops off after 6. Each row fades + slides in for 300ms. Verdict
 * tag colours follow the spec semantics: primary green = governed,
 * tech-orange = resource-gap, error red = ungoverned.
 * ──────────────────────────────────────────────────────────── */
.audit-stream {
    min-height: 280px;
    padding: 4px 0;
}
.audit-row {
    display: grid;
    grid-template-columns: 70px 110px 80px 1fr 60px;
    gap: 12px;
    padding: 9px 20px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.3;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    animation: audit-row-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.audit-row:last-child { border-bottom: none; }
@keyframes audit-row-in {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.audit-time   { color: rgba(207, 229, 252, 0.4); }
.audit-user   { color: rgba(207, 229, 252, 0.55); }
.audit-tool   { color: rgb(207, 229, 252); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-latency{ color: rgba(207, 229, 252, 0.4); text-align: right; }
.audit-verdict {
    text-align: center;
    padding: 3px 0;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    border: 1px solid;
}
.audit-verdict-governed     { color: #88f469; background: rgba(136, 244, 105, 0.08); border-color: rgba(136, 244, 105, 0.3); }
.audit-verdict-resource-gap { color: #ff8506; background: rgba(255, 133, 6, 0.08);  border-color: rgba(255, 133, 6, 0.3); }
.audit-verdict-ungoverned   { color: #ffb4ab; background: rgba(255, 180, 171, 0.08);border-color: rgba(255, 180, 171, 0.3); }

.audit-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.audit-stat-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 99px;
}
.audit-stat-count { color: rgba(207, 229, 252, 0.85); font-weight: 600; }

/* On narrower viewports, drop the user column to keep rows readable */
@media (max-width: 640px) {
    .audit-row { grid-template-columns: 60px 90px 1fr 50px; gap: 8px; padding: 9px 14px; }
    .audit-user { display: none; }
}

/* ────────────────────────────────────────────────────────────
 * Reduced-motion: skip every animated entrance and any decorative
 * loop. The demo still reads correctly because all final states
 * are visible by default with this rule.
 * ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-animate],
    [data-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    [data-stagger].demo-with-seam.is-visible > *:nth-child(7) {
        animation: none !important;
    }
    .animate-pulse {
        animation: none !important;
    }
    .lineage-edge {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }
    .lineage-node {
        opacity: 1 !important;
        transition: none !important;
    }
    .audit-row {
        animation: none !important;
    }
    .lens-demo .canvas-node,
    .lens-demo .canvas-edge,
    .lens-demo .canvas-node rect {
        transition: none !important;
    }
    .staleness-status,
    .staleness-reviewed,
    .staleness-review-btn {
        animation: none !important;
    }
    .staleness-status.status-overdue,
    .staleness-reviewed.reviewed-overdue {
        opacity: 1 !important;
    }
    .ti-edge {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }
    .ti-instance {
        opacity: 1 !important;
        transition: none !important;
    }
}

/* ────────────────────────────────────────────────────────────
 * Smooth transition between modes (avoid jarring hard cut)
 * ──────────────────────────────────────────────────────────── */
html {
    transition: background-color 0.25s ease, color 0.25s ease;
    scroll-padding-top: 6rem;
}
body, header, section, article, nav, div, aside, footer {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
[id] {
    scroll-margin-top: 6rem;
}
/* Pages with a sub-nav (e.g. /seam/docs/*) need extra clearance for in-page anchors */
body:has([aria-label="Docs sections"]) [id] {
    scroll-margin-top: 9rem;
}

/* Mobile burger menu/close icon swap */
.burger-icon-open { display: none; }
.burger-open .burger-icon-closed { display: none; }
.burger-open .burger-icon-open { display: inline-block; }

/* Inline body-copy links: underlined by default with a soft decoration that lifts on hover */
a.text-primary {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgb(var(--primary) / 0.4);
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.2s ease;
}
a.text-primary:hover {
    text-decoration-color: rgb(var(--primary));
}