/* style.lite.css
   =========================================
   THE LITE MODE OVERRIDE MASTER
   DEBUG LOG TRACE:
   - OPTIMIZED: Verified `contain` variables and GPU layers cascade correctly from master sheets without breaking lite layouts.
   Targeting: Desktop Shell, Spatial Cards, Thoughts Engine, Timeline Spine, & Relational Canvas.
   ✨ BINARY RHYTHM: Pure luminous daytime backdrops switching instantly to deep night spaces.
   ✨ TRUE BLACK MIDNIGHT: Fully responsive to the JS circadian engine's plunge into pure black.
   ✨ WASHED DAYLIGHT: Capped brightness levels to prevent blinding pure white backgrounds during midday.
   ✨ RAW TRANSPARENCY: Projects render as un-shadowed line art.
   ✨ ABSOLUTE PURGE: Global elimination of GPU textures, screen blends, drop shadows, and backdrop blurs.
   ✨ DYNAMIC INK: Projects automatically darken by day and brighten by night.
   ✨ OCCLUSION MATRIX: Primary containers map to environment backgrounds, masking overlaps.
   ========================================= */

/* =========================================================
   1. ROOT VARIABLES: THE BINARY CIRCADIAN SWITCH
   ========================================================= */

/* Default Lite Day State (Pre-Sunset) */
html.lite-mode,
body.lite-mode {
    /* ✨ WASHED DAYLIGHT: Brightens up towards noon, but never hits harsh pure white. Retains a subtle tint. */
    --lite-shell-bg: color-mix(in srgb, var(--bgMid, #ffffff) 20%, #f4f6f8);
    --lite-line: #000000;
    --lite-text: #000000;
    --lite-fill: transparent;
    --lite-muted-text: rgba(0, 0, 0, 0.6);
    --lite-input-bg: rgba(0, 0, 0, 0.05);
    
    /* Global Background Topology Suppression */
    --topology-opacity-desktop: 0.02 !important; 
    --topology-opacity-void: 0.0 !important;
}

/* Instant State Inversion for Lite Night (Post-Sunset) */
html.lite-mode[data-theme*="eve"],
html.lite-mode[data-theme*="dusk"],
html.lite-mode[data-theme*="night"],
html.lite-mode[data-theme*="midnight"],
body.lite-mode[data-theme*="eve"],
body.lite-mode[data-theme*="dusk"],
body.lite-mode[data-theme*="night"],
body.lite-mode[data-theme*="midnight"] {
    /* ✨ TRUE BLACK: Actively traces the JS engine's curve from deep indigo down to absolute #000000 at midnight */
    --lite-shell-bg: rgb(var(--circadian-dark, 0, 0, 0));
    --lite-line: #ffffff;
    --lite-text: #ffffff;
    --lite-fill: transparent;
    --lite-muted-text: rgba(255, 255, 255, 0.6);
    --lite-input-bg: rgba(255, 255, 255, 0.05);
}


/* =========================================================
   2. GLOBAL DESKTOP & SHELL PARITY
   ========================================================= */



body.lite-mode #efBgRoot {
    background: var(--lite-shell-bg) !important;
    transition: background-color 0.1s ease !important;
}

/* Purge global ambient visualizers, dynamic halos, and environmental textures */
/* DEBUG LOG: Removed #macroBackgroundFx and #macroGlowSplash from this list to allow style.focus.css lite-mode blends to execute */
body.lite-mode #efBgTint,
body.lite-mode .star-orbit-ring,
body.lite-mode .genesis-ripple,
body.lite-mode .focus-tunnel,
body.lite-mode .dock-vignette { display: none !important; }

body.lite-mode #ambientCanvas { opacity: 0.2 !important; filter: none !important; }
body.lite-mode:not(.is-idle) #ambientCanvas { display: none !important; }

body.lite-mode #efTopologyCanvas { opacity: 0.02 !important; filter: none !important; }

/* Flat global header formatting */
body.lite-mode .markTitle,
body.lite-mode .poetic-summary,
body.lite-mode .poetic-summary[data-circadian] {
    background: none !important;
    color: var(--lite-text) !important;
    -webkit-text-fill-color: var(--lite-text) !important;
    filter: none !important;
    text-shadow: none !important;
}

body.lite-mode .plain-clock,
body.lite-mode .glitter-text,
body.lite-mode [class^="ctx-"],
body.lite-mode .app-logo-svg {
    text-shadow: none !important;
    color: var(--lite-text) !important;
    filter: none !important;
}

body.lite-mode .scroll-hint-capsule {
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.lite-mode .desktop-tools-dock .tool-icon-btn {
    background: var(--lite-fill) !important;
    border: 1.5px solid var(--lite-line) !important;
    color: var(--lite-text) !important;
}
body.lite-mode .desktop-tools-dock.is-open .tool-icon-btn:hover {
    background: var(--lite-text) !important;
    color: var(--lite-shell-bg) !important;
}





/* =========================================================
   3. SPATIAL CARDS OVERRIDES (Dynamic Project Ink & Occlusion)
   ========================================================= */

body.lite-mode .spatial-card {
    --lite-proj-ink: color-mix(in srgb, var(--capsuleAccent) 65%, var(--lite-line));
    --lite-proj-dim: color-mix(in srgb, var(--capsuleAccent) 30%, var(--lite-line));
}

body.lite-mode .spatial-card::after,
body.lite-mode .spatial-face::before,
body.lite-mode .spatial-card .fx-layer { 
    display: none !important; 
}

/* Base pattern is hidden unless macro triggers (See Section 6) */
body.lite-mode .spatial-card .pattern-layer { display: none !important; }

body.lite-mode .spatial-face { 
    background: var(--lite-shell-bg) !important; 
    border: 1.5px solid var(--lite-proj-ink) !important; 
    box-shadow: none !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.lite-mode .capsuleTitle { 
    color: var(--lite-proj-ink) !important; 
    background: color-mix(in srgb, var(--lite-proj-ink) 10%, transparent) !important; 
    padding: 2px 6px; border-radius: 4px; 
    text-shadow: none !important;
}

body.lite-mode .spatial-face.front .editable-text:not(.capsuleTitle) {
    color: var(--lite-text) !important;
    text-shadow: none !important;
}

body.lite-mode .drag-header { 
    background-color: var(--lite-shell-bg) !important; 
    border-bottom: 1.5px solid var(--lite-proj-dim) !important; 
    box-shadow: none !important; 
}

body.lite-mode .drag-header:hover, 
body.lite-mode .drag-header:active, 
body.lite-mode .spatial-card.is-dragging .drag-header { 
    background-color: var(--lite-proj-ink) !important; 
    border-bottom-color: var(--lite-proj-ink) !important; 
}

body.lite-mode .drag-header:hover .capsuleTitle,
body.lite-mode .drag-header:hover .header-fuzzy-time { 
    color: var(--lite-shell-bg) !important; 
}

body.lite-mode .header-fuzzy-time {
    color: var(--lite-proj-ink) !important;
    text-shadow: none !important;
    background: transparent !important;
}

body.lite-mode .natural-progress-text { 
    background: var(--lite-shell-bg) !important; 
    border: 1.5px solid var(--lite-proj-ink) !important; 
    color: var(--lite-proj-ink) !important; 
    box-shadow: none !important;
}
body.lite-mode .natural-progress-text.is-complete { 
    background: var(--lite-proj-ink) !important; 
    color: var(--lite-shell-bg) !important; 
    border-color: var(--lite-proj-ink) !important; 
}

body.lite-mode .edge-flip-tab, 
body.lite-mode .collapse-tab, 
body.lite-mode .maximize-tab { 
    background: var(--lite-shell-bg) !important; 
    border: 1px solid var(--lite-proj-dim) !important; 
    color: var(--lite-proj-ink) !important; 
    box-shadow: none !important;
}
body.lite-mode .pin-tab { 
    background: var(--lite-shell-bg) !important; 
    color: var(--lite-proj-ink) !important; 
    border: 1px solid var(--lite-proj-ink) !important; 
    box-shadow: none !important;
}

/* Card Interactive Tasks */
body.lite-mode .task-item { 
    background: var(--lite-shell-bg) !important; 
    border: 1px solid color-mix(in srgb, var(--lite-proj-dim) 30%, transparent) !important; 
    box-shadow: none !important;
}
body.lite-mode .task-bg-fill { 
    display: block !important;
    background: var(--lite-proj-ink) !important; 
    opacity: 0.15 !important; 
    border-right: 1.5px solid var(--lite-proj-ink) !important; 
    box-shadow: none !important;
    border-radius: 6px 0 0 6px !important;
}
body.lite-mode .task-item.done .task-bg-fill { 
    opacity: 0.08 !important; 
    background: var(--lite-proj-dim) !important; 
    border-right: none !important; 
}

body.lite-mode .st-box { 
    border: 1.5px solid var(--lite-proj-ink) !important; 
    background: var(--lite-shell-bg) !important; 
    box-shadow: none !important;
}
body.lite-mode .task-item.done .st-box { 
    background: var(--lite-proj-ink) !important; 
    border-color: var(--lite-proj-ink) !important; 
    color: var(--lite-shell-bg) !important; 
}

body.lite-mode .task-item.is-due-soon:not(.done) { 
    border-color: var(--lite-proj-ink) !important; 
    border-width: 2px !important; 
    background: var(--lite-shell-bg) !important; 
}
body.lite-mode .task-item.is-due-soon:not(.done) .st-box { 
    border-color: var(--lite-proj-ink) !important; 
    border-width: 2px !important; 
}

body.lite-mode .st-text { color: var(--lite-text) !important; }
body.lite-mode .task-prog-label { color: var(--lite-muted-text) !important; }

body.lite-mode .st-input { 
    background: var(--lite-input-bg) !important; 
    border: 1px solid var(--lite-proj-dim) !important; 
    color: var(--lite-text) !important; 
    box-shadow: none !important;
}
body.lite-mode .st-toggle-btn { 
    background: var(--lite-shell-bg) !important; 
    border: 1px solid var(--lite-proj-dim) !important; 
    color: var(--lite-proj-ink) !important; 
    box-shadow: none !important;
}
body.lite-mode .st-toggle-btn.active { 
    background: var(--lite-proj-ink) !important; 
    color: var(--lite-shell-bg) !important; 
    border-color: var(--lite-proj-ink) !important; 
}

body.lite-mode .task-item.is-pinned-thought { 
    border-left: 3px solid var(--lite-proj-ink) !important; 
    background: var(--lite-shell-bg) !important; 
}

/* Card Modals (Orbs & Pickers) */
body.lite-mode .collapsed-orb-layer .idle-glass,
body.lite-mode .zenith-orb { 
    background: var(--lite-shell-bg) !important; 
    border: 2px solid var(--lite-proj-ink) !important; 
    box-shadow: none !important;
}
body.lite-mode .collapsed-label { color: var(--lite-text) !important; text-shadow: none !important; }

body.lite-mode .custom-category-menu { background: var(--lite-shell-bg) !important; border: 2px solid var(--lite-proj-ink) !important; box-shadow: none !important; }
body.lite-mode .custom-cat-option { background: var(--lite-shell-bg) !important; border-color: var(--lite-proj-dim) !important; color: var(--lite-text) !important; box-shadow: none !important; }
body.lite-mode .custom-cat-option.is-selected { background: var(--lite-proj-ink) !important; color: var(--lite-shell-bg) !important; border-color: var(--lite-proj-ink) !important; }

body.lite-mode .spatial-card.is-maximized .spatial-card-tilt-wrap { background: var(--lite-shell-bg) !important; border: 2px solid var(--lite-proj-ink) !important; box-shadow: none !important; }
body.lite-mode .project-link-wrap, body.lite-mode .scratchpad-input { background: var(--lite-input-bg) !important; border: 1px solid var(--lite-proj-dim) !important; color: var(--lite-text) !important; box-shadow: none !important; }
body.lite-mode .project-link-btn, body.lite-mode .next-due-banner, body.lite-mode .scratchpad-title { color: var(--lite-text) !important; text-shadow: none !important; }

body.lite-mode .spatial-card.is-urgent-pulse:not(.is-maximized) .spatial-face { border-color: var(--lite-proj-ink) !important; border-width: 2.5px !important; }
body.lite-mode .spatial-card.is-urgent-pulse[data-diff-collapsed="true"] .collapsed-orb-layer .idle-glass { border-color: var(--lite-proj-ink) !important; }


/* =========================================================
   4. THOUGHTS ENGINE OVERRIDES (Deterministic Ink & Solid Pins)
   ========================================================= */

body.lite-mode .thought-orb {
    --lite-pin: color-mix(in srgb, var(--pin-color) 85%, #fff);
    background: var(--lite-shell-bg) !important;
    border: 1.5px solid color-mix(in srgb, var(--lite-pin) 40%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.lite-mode .thought-orb .th-text {
    color: color-mix(in srgb, var(--lite-text) 50%, var(--lite-pin)) !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    transition: color 0.2s ease, background 0.2s ease;
}

body.lite-mode .thought-orb:hover {
    background: color-mix(in srgb, var(--lite-pin) 10%, var(--lite-shell-bg)) !important;
    border-color: var(--lite-pin) !important;
}

body.lite-mode .thought-orb:hover .th-text {
    color: var(--lite-text) !important;
}

body.lite-mode .thought-orb.is-dragging {
    border-width: 2.5px !important;
    border-color: var(--lite-pin) !important;
}

/* Floating Action Controls (Dimmed) */
body.lite-mode .thought-orb .expand-btn,
body.lite-mode .thought-orb .acc-btn,
body.lite-mode .thought-orb .snz-btn,
body.lite-mode .thought-orb .pop-btn {
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--lite-pin) 30%, transparent) !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--lite-text) 50%, var(--lite-pin)) !important;
}

body.lite-mode .thought-orb .expand-btn:hover,
body.lite-mode .thought-orb .acc-btn:hover,
body.lite-mode .thought-orb .snz-btn:hover,
body.lite-mode .thought-orb .pop-btn:hover {
    background: var(--lite-text) !important;
    color: var(--lite-shell-bg) !important;
    border-color: var(--lite-text) !important;
}

/* =========================================================
   ✨ THE PINNED SECTION: FULL COLOR BACKGROUNDS
   ========================================================= */

body.lite-mode div.thought-orb.is-pinned-top {
    background: var(--lite-pin) !important;
    border: 1.5px solid var(--lite-pin) !important;
}

body.lite-mode div.thought-orb.is-pinned-top .th-text {
    color: #000 !important; 
    font-weight: 900 !important;
}

/* Invert Controls for Solid Backgrounds */
body.lite-mode div.thought-orb.is-pinned-top .expand-btn,
body.lite-mode div.thought-orb.is-pinned-top .acc-btn,
body.lite-mode div.thought-orb.is-pinned-top .snz-btn,
body.lite-mode div.thought-orb.is-pinned-top .pop-btn {
    border-color: rgba(0,0,0,0.2) !important;
    color: rgba(0,0,0,0.5) !important;
}

body.lite-mode div.thought-orb.is-pinned-top .expand-btn:hover,
body.lite-mode div.thought-orb.is-pinned-top .acc-btn:hover,
body.lite-mode div.thought-orb.is-pinned-top .snz-btn:hover,
body.lite-mode div.thought-orb.is-pinned-top .pop-btn:hover {
    background: #000 !important;
    color: var(--lite-pin) !important;
    border-color: #000 !important;
}

/* =========================================================
   ✨ TASK ORB EXCEPTIONS (LITE MODE PURITY)
   ========================================================= */

/* Unpinned Task Orbs match regular floating orbs (but stay dashed and square) */
body.lite-mode div.thought-orb.is-task-orb {
    background: var(--lite-shell-bg) !important; /* Kills the circadian fill globally */
    border: 1.5px dashed color-mix(in srgb, var(--lite-pin) 40%, transparent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.lite-mode div.thought-orb.is-task-orb .th-text {
    color: color-mix(in srgb, var(--lite-text) 50%, var(--lite-pin)) !important;
    text-shadow: none !important;
    font-weight: 700 !important;
}

body.lite-mode div.thought-orb.is-task-orb:hover {
    background: color-mix(in srgb, var(--lite-pin) 10%, var(--lite-shell-bg)) !important;
    border-color: var(--lite-pin) !important;
}

body.lite-mode div.thought-orb.is-task-orb:hover .th-text {
    color: var(--lite-text) !important;
}

/* Pinned Task Orbs go full color, identical to regular pinned thoughts */
body.lite-mode div.thought-orb.is-pinned-top.is-task-orb {
    background: var(--lite-pin) !important;
    border: 1.5px solid var(--lite-pin) !important; 
    border-radius: 0 !important;
}

body.lite-mode div.thought-orb.is-pinned-top.is-task-orb .th-text {
    color: #000 !important; 
    font-weight: 900 !important;
    text-shadow: none !important;
}

/* Hint Tags */
body.lite-mode div.thought-orb .th-project-label {
    background: var(--lite-shell-bg) !important;
    border: 1px solid color-mix(in srgb, var(--lite-pin) 40%, transparent) !important;
    color: var(--lite-pin) !important;
    box-shadow: none !important;
}

body.lite-mode div.thought-orb.is-pinned-top .th-project-label {
    background: #000 !important;
    color: var(--lite-pin) !important;
    border: 1px solid #000 !important;
}


/* =========================================================
   5. TIMELINE SPINE OVERRIDES (Dynamic Ink & Occlusion)
   ========================================================= */

body.lite-mode .timeline-wrapper {
    background: var(--lite-shell-bg) !important;
    border-top: 1.5px solid var(--lite-line) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Base spine maps to generic line */
body.lite-mode .timeline-spine {
    background: var(--lite-line) !important;
    opacity: 0.2 !important;
}
body.lite-mode .spine-pulse { display: none !important; }

/* Establish Dynamic Ink variables locally for Timeline Nodes */
body.lite-mode .node {
    --lite-proj-ink: color-mix(in srgb, var(--capsuleAccent) 65%, var(--lite-line));
    --lite-proj-dim: color-mix(in srgb, var(--capsuleAccent) 30%, var(--lite-line));
}

body.lite-mode .node-content {
    /* ✨ OCCLUSION FIX */
    background: var(--lite-shell-bg) !important;
    border: 1.5px solid var(--lite-proj-ink) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.lite-mode .node-content-bg-glow,
body.lite-mode .node-prog-pattern {
    display: none !important;
}

body.lite-mode .node-prog-bar {
    display: block !important;
    background: var(--lite-proj-ink) !important;
    opacity: 0.15 !important;
    border-right: 1.5px solid var(--lite-proj-ink) !important;
    box-shadow: none !important;
    transition: width 0.8s cubic-bezier(0.175,0.885,0.32,1.275) !important;
}

body.lite-mode .node-prog-bar[style*="width: 100%"], 
body.lite-mode .node-prog-bar[style*="width:100%"] {
    border-right: none !important;
    opacity: 0.08 !important;
    background: var(--lite-proj-dim) !important;
}

body.lite-mode .node-orb {
    border: 1.5px solid var(--lite-proj-ink) !important;
    background: var(--lite-shell-bg) !important;
    box-shadow: none !important;
}

body.lite-mode .node-content::after {
    background: var(--lite-proj-dim) !important;
    height: 1.5px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body.lite-mode .node-title,
body.lite-mode .date-marker,
body.lite-mode .laneTitle,
body.lite-mode .gap-month-text,
body.lite-mode .vault-section-title {
    color: var(--lite-text) !important;
    text-shadow: none !important;
}

body.lite-mode .node-pin-btn,
body.lite-mode .node-vault-btn,
body.lite-mode .date-scrubber,
body.lite-mode .timeline-toggle-btn {
    background: var(--lite-fill) !important;
    border: 1px solid var(--lite-proj-dim) !important;
    color: var(--lite-text) !important;
    box-shadow: none !important;
}

body.lite-mode .timeline-toggle-btn.active {
    background: var(--lite-line) !important;
    border-color: var(--lite-line) !important;
    color: var(--lite-shell-bg) !important;
}

/* Time Gap Matrix */
body.lite-mode .time-gap-day { animation: none !important; box-shadow: none !important; opacity: 1 !important; transform: scale(1) !important; }
body.lite-mode .time-gap-day.is-weekend { background: color-mix(in srgb, var(--lite-line) 30%, transparent) !important; opacity: 1 !important; }

/* Project start/target dots map to their specific ink mixture */
body.lite-mode .project-target-day, 
body.lite-mode .time-gap-day.project-start-day { 
    box-shadow: none !important; 
    animation: none !important; 
    transform: scale(1.5) !important; 
    background: color-mix(in srgb, var(--proj-accent, var(--capsuleAccent)) 65%, var(--lite-line)) !important;
}
body.lite-mode .time-gap-day.project-start-day::before { 
    box-shadow: none !important; 
    animation: none !important; 
    opacity: 1 !important; 
    background: color-mix(in srgb, var(--proj-accent, var(--capsuleAccent)) 65%, var(--lite-line)) !important;
}

/* Vault & Sub-nodes */
body.lite-mode .vault-item,
body.lite-mode .vault-thought-node {
    --lite-proj-ink: color-mix(in srgb, var(--capsuleAccent) 65%, var(--lite-line));
    background: var(--lite-shell-bg) !important;
    border: 1px solid var(--lite-proj-ink) !important;
    color: var(--lite-text) !important;
    box-shadow: none !important;
}

body.lite-mode .vault-thought-text { color: var(--lite-text) !important; }

body.lite-mode .vault-thought-dot, 
body.lite-mode .vault-legacy-dot, 
body.lite-mode .vault-dot { 
    box-shadow: none !important; 
    background: var(--lite-proj-ink) !important;
}

body.lite-mode .node.is-urgent-pulse .node-orb-wrap::after, 
body.lite-mode .node.is-urgent-pulse .node-orb-wrap::before { 
    animation: none !important; filter: none !important; box-shadow: none !important; 
    border: 2px solid var(--lite-proj-ink) !important; opacity: 0.8 !important; 
}

/* Vault Sky Field */
body.lite-mode .vault-sky-canvas { background: var(--lite-shell-bg) !important; border: 1px solid var(--lite-line) !important; }
body.lite-mode .desk-vault-star { animation: none !important; opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; box-shadow: none !important; }
body.lite-mode .star-hover-card { background: var(--lite-shell-bg) !important; border: 1px solid var(--lite-line) !important; color: var(--lite-text) !important; box-shadow: none !important; }


/* =========================================================
   6. DEDUPLICATED MACRO OVERLAYS (Inverse Shadows)
   ========================================================= */

/* Un-suppress pattern layer strictly when macro active */
html.lite-mode[data-macro-flavor="creative"] .spatial-card .pattern-layer,
html.lite-mode[data-macro-flavor="life"] .spatial-card .pattern-layer,
html.lite-mode[data-macro-flavor="work"] .spatial-card .pattern-layer,
body.lite-mode[data-macro-flavor="creative"] .spatial-card .pattern-layer,
body.lite-mode[data-macro-flavor="life"] .spatial-card .pattern-layer,
body.lite-mode[data-macro-flavor="work"] .spatial-card .pattern-layer {
    display: block !important;
    visibility: visible !important;
    background-color: var(--lite-line) !important;
    animation: none !important;
    filter: none !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Daytime State (Gentle darker ink tracks) */
html.lite-mode .spatial-card .pattern-layer,
body.lite-mode .spatial-card .pattern-layer {
    opacity: 0.12 !important; 
    mix-blend-mode: color-burn !important; 
}

/* Nighttime State (Ethereal wireframes) */
html.lite-mode[data-theme*="eve"] .spatial-card .pattern-layer,
html.lite-mode[data-theme*="dusk"] .spatial-card .pattern-layer,
html.lite-mode[data-theme*="night"] .spatial-card .pattern-layer,
html.lite-mode[data-theme*="midnight"] .spatial-card .pattern-layer,
body.lite-mode[data-theme*="eve"] .spatial-card .pattern-layer,
body.lite-mode[data-theme*="dusk"] .spatial-card .pattern-layer,
body.lite-mode[data-theme*="night"] .spatial-card .pattern-layer,
body.lite-mode[data-theme*="midnight"] .spatial-card .pattern-layer {
    opacity: 0.08 !important; 
    mix-blend-mode: color-dodge !important;
}

html.lite-mode[data-macro-flavor="creative"] .spatial-card .pattern-layer, body.lite-mode[data-macro-flavor="creative"] .spatial-card .pattern-layer {
    -webkit-mask-image: repeating-radial-gradient(circle at center, black 0, black 1px, transparent 2px, transparent 12px) !important;
    mask-image: repeating-radial-gradient(circle at center, black 0, black 1px, transparent 2px, transparent 12px) !important;
}

html.lite-mode[data-macro-flavor="life"] .spatial-card .pattern-layer, body.lite-mode[data-macro-flavor="life"] .spatial-card .pattern-layer {
    -webkit-mask-image: repeating-linear-gradient(45deg, black 0, black 1px, transparent 2px, transparent 16px), repeating-linear-gradient(-45deg, black 0, black 1px, transparent 2px, transparent 16px) !important;
    mask-image: repeating-linear-gradient(45deg, black 0, black 1px, transparent 2px, transparent 16px), repeating-linear-gradient(-45deg, black 0, black 1px, transparent 2px, transparent 16px) !important;
}

html.lite-mode[data-macro-flavor="work"] .spatial-card .pattern-layer, body.lite-mode[data-macro-flavor="work"] .spatial-card .pattern-layer {
    -webkit-mask-image: repeating-linear-gradient(0deg, black 0, black 1px, transparent 2px, transparent 20px), repeating-linear-gradient(90deg, black 0, black 1px, transparent 2px, transparent 20px) !important;
    mask-image: repeating-linear-gradient(0deg, black 0, black 1px, transparent 2px, transparent 20px), repeating-linear-gradient(90deg, black 0, black 1px, transparent 2px, transparent 20px) !important;
}

html.lite-mode.focus-mode-active .pattern-layer, body.lite-mode.focus-mode-active .pattern-layer { background-color: var(--lite-line) !important; }


/* =========================================================
   7. RELATIONAL CANVAS OVERRIDES (Heart)
   ========================================================= */

body.lite-mode .heart-section { background: var(--lite-shell-bg) !important; }
body.lite-mode .heart-map-svg { filter: none !important; opacity: 0.2 !important; }

body.lite-mode .heart-orb { box-shadow: none !important; filter: none !important; }
body.lite-mode .orb-inner {
    background: var(--lite-shell-bg) !important;
    border: 1.5px solid var(--lite-line) !important;
    color: var(--lite-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
}

/* Lite Mode: Intended (Bright colourful border) */
body.lite-mode .heart-orb[data-status="intended"] .orb-inner,
body.lite-mode .heart-orb[data-state="intended"] .orb-inner {
    border: 2px solid var(--capsuleAccent) !important;
    color: var(--lite-text) !important;
}

/* Lite Mode: Seen (Inverted circadian mapping) */
body.lite-mode .heart-orb[data-status="seen"] .orb-inner,
body.lite-mode .heart-orb[data-state="seen"] .orb-inner {
    background: var(--lite-text) !important;
    border-color: var(--lite-text) !important;
    color: var(--lite-shell-bg) !important;
    box-shadow: none !important;
}

body.lite-mode .heart-orb:hover .orb-inner { background: var(--lite-text) !important; color: var(--lite-shell-bg) !important; box-shadow: none !important; }
body.lite-mode .heart-orb[data-engaged="true"] .orb-inner { border-color: var(--capsuleAccent) !important; box-shadow: none !important; text-shadow: none !important; }
body.lite-mode .heart-orb.is-long-pressing .orb-inner { animation: none !important; box-shadow: none !important; }

body.lite-mode .orb-bg-count, body.lite-mode .nav-arrow { color: var(--lite-text) !important; text-shadow: none !important; }

body.lite-mode .heart-btn {
    background: var(--lite-fill) !important;
    border: 1px solid var(--lite-line) !important;
    color: var(--lite-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}
body.lite-mode.is-aligned-layout .heart-btn { box-shadow: none !important; text-shadow: none !important; }

body.lite-mode .heart-modal {
    background: var(--lite-shell-bg) !important;
    border: 1.5px solid var(--lite-line) !important;
    box-shadow: none !important;
    filter: none !important;
}

body.lite-mode .modal-title, body.lite-mode .modal-desc, body.lite-mode .hm-subtitle { color: var(--lite-text) !important; text-shadow: none !important; }

/* Global UI Buttons inside Modals */
body.lite-mode .modal-btn, body.lite-mode .heart-modal button {
    background: var(--lite-fill) !important;
    border: 1px solid var(--lite-line) !important;
    color: var(--lite-text) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.lite-mode .modal-btn:hover, body.lite-mode .heart-modal button:hover { background: var(--capsuleAccent) !important; color: #000 !important; border-color: var(--lite-line) !important; }

/* Scrubber overrrides */
body.lite-mode .hs-step-btn:hover, body.lite-mode .hs-fill, body.lite-mode .hs-slider::-webkit-slider-thumb { box-shadow: none !important; }
body.lite-mode .hs-fill-energy { animation: none !important; background: rgba(255,255,255,0.4) !important; }
body.lite-mode .hs-tooltip { background: #050508 !important; backdrop-filter: none !important; box-shadow: none !important; border: 1px solid #ff6666 !important; text-shadow: none !important; }
body.lite-mode .hs-center-modal, body.lite-mode #hscmDate, body.lite-mode #hscmRelative { filter: none !important; text-shadow: none !important; }
body.lite-mode .heart-quick-search { background: #050508 !important; backdrop-filter: none !important; box-shadow: none !important; text-shadow: none !important; }
body.lite-mode .heart-inline-modal input { background: #050508 !important; backdrop-filter: none !important; box-shadow: none !important; filter: none !important; text-shadow: none !important;}
body.lite-mode .heart-modal-overlay { background: rgba(0, 0, 0, 0.9) !important; backdrop-filter: none !important; }

/* =========================================================
   8. ACTIVE INTAKE LAYER OVERRIDES (Reveal)
   ========================================================= */

body.lite-mode .intake-overlay { background: var(--lite-shell-bg) !important; }

body.lite-mode .intake-descent-glow,
body.lite-mode .intake-bg-diamonds,
body.lite-mode .intake-radial-progress { display: none !important; }

body.lite-mode .intake-well-status { color: var(--lite-text) !important; text-shadow: none !important; }
body.lite-mode .global-descent-override:hover .intake-well-status { color: var(--capsuleAccent) !important; }

/* Note: .spatial-face and .shape-* overrides were removed from here. 
   They are now managed exclusively in style.intake.css for richer lite-mode designs. */

body.lite-mode .intake-title, body.lite-mode .intake-subtitle { color: var(--lite-text) !important; text-shadow: none !important; }

body.lite-mode .abandon-btn { background: var(--lite-fill) !important; border: 1px solid var(--lite-line) !important; color: var(--lite-text) !important; box-shadow: none !important; }
body.lite-mode .abandon-btn:hover { background: var(--capsuleAccent) !important; color: #000 !important; border-color: var(--lite-line) !important; }

body.lite-mode .etching-mark { background: var(--lite-line) !important; border: none !important; box-shadow: none !important; }

body.lite-mode .intake-card-wrap[data-tooltip]::after { background: var(--lite-shell-bg) !important; border: 1px solid var(--lite-line) !important; color: var(--lite-text) !important; box-shadow: none !important; text-shadow: none !important; }

body.lite-mode .intake-ignite-modal, body.lite-mode .cast-modal-container { background: var(--lite-shell-bg) !important; border: 2px solid var(--lite-line) !important; box-shadow: none !important; color: var(--lite-text) !important; }

/* =========================================================
   9. THE WELL OVERRIDES (Stars & Modals)
   ========================================================= */

body.lite-mode .well-global-tooltip { color: var(--lite-text) !important; text-shadow: none !important; }
body.lite-mode .well-selection-box { border-color: var(--lite-line) !important; background: var(--lite-input-bg) !important; backdrop-filter: none !important; }

body.lite-mode .well-star-node { background: var(--lite-shell-bg) !important; border: 1.5px solid var(--lite-line) !important; box-shadow: none !important; animation: none !important; }

body.lite-mode .well-star-node::after,
body.lite-mode .well-star-node .star-ghost-echo,
body.lite-mode .well-star-node .star-shape-reveal,
body.lite-mode .well-star-node .pattern-layer::after { display: none !important; }

body.lite-mode .well-star-node.is-linking { border-width: 2.5px !important; border-color: var(--vibe, var(--lite-line)) !important; }
body.lite-mode .well-star-node.is-selected::before { border-color: var(--lite-line) !important; animation: none !important; }

body.lite-mode .well-star-node.is-raw { background: var(--lite-shell-bg) !important; border: 1.5px dashed var(--lite-line) !important; box-shadow: none !important; animation: none !important; mix-blend-mode: normal !important; }

body.lite-mode .star-label { text-shadow: none !important; }
body.lite-mode .sl-title, body.lite-mode .sl-meta, body.lite-mode .well-nexus-label { color: var(--lite-text) !important; text-shadow: none !important; }
body.lite-mode .well-nexus-label:hover { color: var(--capsuleAccent) !important; }

body.lite-mode .well-inspector-modal { background: var(--lite-shell-bg) !important; border: 1.5px solid var(--lite-line) !important; box-shadow: none !important; backdrop-filter: none !important; color: var(--lite-text) !important; }
body.lite-mode .ins-label, body.lite-mode .ins-etching-date { color: var(--lite-muted-text) !important; }
body.lite-mode .ins-etching-text { color: var(--lite-text) !important; }

body.lite-mode .well-inspector-modal input[type="text"],
body.lite-mode .well-inspector-modal input[type="month"],
body.lite-mode .well-inspector-modal textarea,
body.lite-mode .well-inspector-modal select { background: var(--lite-input-bg) !important; border: 1px solid var(--lite-line) !important; color: var(--lite-text) !important; box-shadow: none !important; }
body.lite-mode .well-inspector-modal select { background-image: none !important; }
body.lite-mode .well-inspector-modal input[type="text"]:focus,
body.lite-mode .well-inspector-modal textarea:focus,
body.lite-mode .well-inspector-modal select:focus { border-color: var(--capsuleAccent) !important; }

body.lite-mode .importance-slider { background: var(--lite-line) !important; opacity: 0.3 !important; }
body.lite-mode .importance-slider::-webkit-slider-thumb { background: var(--lite-line) !important; box-shadow: none !important; }

body.lite-mode .inspector-toggle-btn { border-color: var(--lite-line) !important; color: var(--lite-text) !important; background: var(--lite-shell-bg) !important; }
body.lite-mode .ins-etching-item { background: var(--lite-input-bg) !important; border-left-color: var(--lite-line) !important; }


/* =========================================================
   10. GANTT COMMAND MATRIX OVERRIDES
   ========================================================= */

body.lite-mode .gantt-draft-window { background: var(--lite-fill) !important; border: 1.5px solid var(--lite-line) !important; box-shadow: none !important; }
body.lite-mode .gantt-timeline-header { background: var(--lite-fill) !important; border-bottom: 1.5px solid var(--lite-line) !important; }
body.lite-mode .gantt-today-line { background: var(--capsuleAccent) !important; box-shadow: none !important; width: 1.5px !important; }
body.lite-mode .gantt-today-label { color: var(--lite-text) !important; text-shadow: none !important; }
body.lite-mode .gantt-marker-line { background: var(--lite-line) !important; opacity: 0.15 !important; }
body.lite-mode .gantt-marker-label, body.lite-mode .gantt-edge-label, body.lite-mode .gantt-group-label { color: var(--lite-muted-text) !important; text-shadow: none !important; }
body.lite-mode .gantt-draft-task-row { border-bottom: 1px solid color-mix(in srgb, var(--lite-line) 15%, transparent) !important; }
body.lite-mode .gantt-draft-task-row:hover { background: var(--lite-input-bg) !important; }
body.lite-mode .gantt-draft-task-name-wrapper { border-right: 1px solid color-mix(in srgb, var(--lite-line) 20%, transparent) !important; }
body.lite-mode .gantt-draft-task-name { color: var(--lite-text) !important; }
body.lite-mode .gantt-connector-line { border-top: 1px dashed color-mix(in srgb, var(--lite-line) 30%, transparent) !important; }
body.lite-mode .gantt-node-pill { box-shadow: none !important; border: 1px solid var(--lite-line) !important; }
body.lite-mode .gantt-inline-scrubber { background: var(--lite-shell-bg) !important; border: 1.5px solid var(--lite-line) !important; color: var(--lite-text) !important; box-shadow: none !important; backdrop-filter: none !important; }
body.lite-mode .gantt-inline-scrubber:hover { background: var(--lite-text) !important; color: var(--lite-shell-bg) !important; border-color: var(--lite-text) !important; box-shadow: none !important; }

/* Deep Focus Mode Pattern Containment */
body.lite-mode .focus-tunnel { display: none !important; }
body.lite-mode .focus-ripple { border-color: var(--lite-line) !important; filter: none !important; }





/* Flat global header formatting */
body.lite-mode .markTitle,
body.lite-mode .poetic-summary,
body.lite-mode .poetic-summary[data-circadian] {
    background: none !important;
    color: var(--lite-text) !important;
    -webkit-text-fill-color: var(--lite-text) !important;
    filter: none !important;
    text-shadow: none !important;
}

/* REMOVED [class^="ctx-"] from this blanket override */
body.lite-mode .plain-clock,
body.lite-mode .glitter-text,
body.lite-mode .app-logo-svg {
    text-shadow: none !important;
    color: var(--lite-text) !important;
    filter: none !important;
}

/* =========================================================
   ✨ CONTEXT HIGHLIGHTS (Dynamic Notebook Legibility)
   Mixes neon base colors with dark/light text ink for contrast
   ========================================================= */
body.lite-mode [class^="ctx-"] { 
    text-shadow: none !important; 
    font-weight: 700 !important; 
}

/* By mixing with --lite-text, these become deep, legible inks during the day, and bright neons at night */
body.lite-mode .ctx-action      { color: color-mix(in srgb, #ff6482 65%, var(--lite-text)) !important; }
body.lite-mode .ctx-inspiration { color: color-mix(in srgb, #88ccff 55%, var(--lite-text)) !important; }
body.lite-mode .ctx-creation    { color: color-mix(in srgb, #88ffaa 45%, var(--lite-text)) !important; }
body.lite-mode .ctx-intent      { color: color-mix(in srgb, #ffaa55 65%, var(--lite-text)) !important; }
body.lite-mode .ctx-connection  { color: color-mix(in srgb, #ff88cc 60%, var(--lite-text)) !important; }
body.lite-mode .ctx-shadow      { color: color-mix(in srgb, #aa88ff 65%, var(--lite-text)) !important; }
body.lite-mode .ctx-vitality    { color: color-mix(in srgb, #ff5555 65%, var(--lite-text)) !important; }
body.lite-mode .ctx-perception  { color: color-mix(in srgb, #55ddff 45%, var(--lite-text)) !important; }
body.lite-mode .ctx-echo        { color: color-mix(in srgb, #aaffaa 45%, var(--lite-text)) !important; }
body.lite-mode .ctx-structure   { color: color-mix(in srgb, #dddddd 45%, var(--lite-text)) !important; }
body.lite-mode .ctx-void        { color: color-mix(in srgb, #888888 65%, var(--lite-text)) !important; }
body.lite-mode .ctx-time        { color: color-mix(in srgb, #ffdd55 55%, var(--lite-text)) !important; }
body.lite-mode .ctx-manual      { color: var(--lite-text) !important; font-style: italic; }