/* style.desktop.css
   =========================================
   GLOBAL SHELL, THEMES, AND DESKTOP UI
   ✨ ASCENDED: Typographic Poetic Header & Absolute Z-Index Control.
   ✨ HYBRID ARCHITECTURE: Dynamic Environmental Flare + Flat UI Elements
   ========================================= */

:root {
  --efAccent: rgba(255,255,255,0.86);
  --text: rgba(255,255,255,0.86);
  --radiusCard: 22px;
  --maxW: 1000px;
  --padX: 24px;
  --bgTop: #08080a;
  --bgMid: #110914;
  --bgBot: #000000;
  --tintStr: 0.15;
  --partColor: 255,255,255;
  --glowBoost: 1;
}

html, body {
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 100vh; 
  overflow: hidden !important; 
  user-select: none;
  font-family: 'Neuton', serif;
  color: var(--text);
  background-color: transparent !important; 
}

/* Global Text Interactions */
.editable-text, .st-input, .thought-input, .scratchpad-input {
  user-select: auto !important; 
  cursor: text !important; 
  outline: none;
  pointer-events: auto !important;
}

body.is-scrubbing { cursor: ew-resize !important; }

/* Backgrounds & Canvas (Circadian gradients and flares completely preserved) */
#efBgRoot {
    position: fixed; inset: 0;
    background: linear-gradient(var(--bgAngle, 180deg), var(--bgTop) 0%, var(--bgMid) 55%, var(--bgBot) 100%);
}





#macroGlowSplash {
    position: absolute; inset: 0; width: 100vw; height: 100vh; pointer-events: none;
    opacity: 0; transition: opacity 1.5s ease-in-out, background 1.5s ease; mix-blend-mode: screen; 
}

#macroGlowSplash.fx-creative { opacity: 0.95; background: radial-gradient(ellipse at 50% 0%, rgba(110, 60, 255, 0.7) 0%, rgba(60, 100, 255, 0.2) 60%, transparent 100%); }
#macroGlowSplash.fx-life { opacity: 0.95; background: radial-gradient(ellipse at 50% 0%, rgba(255, 40, 100, 0.7) 0%, rgba(255, 20, 60, 0.2) 60%, transparent 100%); }
#macroGlowSplash.fx-work { opacity: 0.85; background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 60%, transparent 100%); }


.dynamic-aura-layer { position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 50% var(--bgFocus, 0%), var(--dynamic-aura) 0%, transparent 70%); }
#efBgTint { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(800px circle at var(--mouseX, 50%) var(--mouseY, 50%), color-mix(in srgb, var(--dynamic-aura, var(--efAccent)) 30%, transparent) 0%, transparent 100%); transition: opacity 1s ease, filter 1s ease; will-change: background; }
body.canvas-empty #efBgTint { opacity: 0.02; filter: grayscale(100%); }
body.canvas-populated #efBgTint { opacity: var(--tintStr); filter: grayscale(0%); }
body.is-idle #efBgTint { opacity: 0 !important; }

#ambientCanvas { position: fixed; inset: 0; pointer-events: none; opacity: var(--star-opacity, 0.4); filter: blur(1px); transition: opacity 1.5s ease, filter 3s ease; will-change: transform, filter, opacity; transform: translateZ(0); }

/* App Shell Layout */
.app-wrapper { position: relative; width: 100%; height: 100vh; overflow: hidden; transform-origin: center top; }
.spatial-desktop-container { position: absolute; inset: 0; width: 100%; height: 100vh; }
#pinnedSection { position: absolute; left: 0; right: 0; bottom: 0; top: 0; }
.desktop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#idleLayer { position: fixed; inset: 0; pointer-events: none; opacity: 0; overflow: hidden; transition: opacity 1.5s ease; }
body.is-idle #idleLayer { pointer-events: all; cursor: crosshair; opacity: 1; }

/* Global Loader */
body.is-loading .app-wrapper, body.is-loading #desktopCanvas, body.is-loading #topHeaderZone, body.is-loading .desktop-tools-dock, body.is-loading #ef-sys-wrap { opacity: 0 !important; visibility: hidden !important; }
#globalLoader { position: fixed; inset: 0; background: transparent; z-index: 999; display: flex; justify-content: center; align-items: center; }
.loader-ring { width: 40px; height: 40px; border: 2px solid rgba(255,255,255,0.05); border-top-color: #55ddff; border-radius: 50%; animation: loaderSpin 1s cubic-bezier(0.6,0.2,0.4,0.8) infinite; box-shadow: none; }
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* Logo (Stripped drop shadows, applied crisp line formatting) */
.app-logo-svg { width: 40px; height: 40px; color: var(--capsuleAccent, rgba(255, 255, 255, 0.8)); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: none; }
.app-logo-svg:hover { color: #fff; transform: scale(1.1) rotate(-5deg); }
body.well-mode-active .app-logo-svg { animation: logoBreathe 4s ease-in-out infinite; }
@keyframes logoBreathe { 0%, 100% { opacity: 0.6; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* Header Zone */
.top-header-zone { 
    position: fixed; top: 0; left: 0; right: 0; 
    padding: 24px var(--padX); 
    transform-origin: left top; 
    transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275), opacity 0.3s ease; 
}
.topBar { display: flex; justify-content: space-between; align-items: flex-start; }

/* Refined Mark Title: Sharp text fill mapping to dynamic variables, zero outer halo */
.markTitle { 
    margin: 0; font-family: 'Caveat', cursive; font-size: clamp(24px, 3.5vw, 36px); 
    font-weight: 900; line-height: 1; margin-bottom: 2px;
    background: none; color: var(--capsuleAccent, #fff); -webkit-text-fill-color: var(--capsuleAccent, #fff); 
    filter: none; text-shadow: none; cursor: text; 
}
.markTitle:focus { color: #fff; -webkit-text-fill-color: #fff; outline: none; }

.poetic-summary {
    font-family: 'Neuton', serif;
    font-size: 18px; 
    line-height: 1.4;
    margin-top: 6px;
    max-width: 480px;
    letter-spacing: 0.5px;
    transition: opacity 0.4s ease, color 1s ease;
    background: none; -webkit-background-clip: border-box; -webkit-text-fill-color: currentColor;
    color: var(--text); 
    text-shadow: none;
}

.poetic-summary[data-circadian="morning"] { color: #ccedff; }
.poetic-summary[data-circadian="afternoon"] { color: #e6f5ff; }
.poetic-summary[data-circadian="eve"] { color: #ffebd6; }
.poetic-summary[data-circadian="night"] { color: #ebdcfc; }

.poetic-focus-link {
    cursor: pointer;
    font-family: 'Noto Sans JP', sans-serif; 
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-text-fill-color: currentColor; 
    transition: opacity 0.2s ease;
}
.poetic-focus-link:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.top-right-controls { display:flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.settings-orb-wrapper { display: none !important; }

/* Desktop Tools Dock (Flat UI Base: solid backgrounds, thin clear outlines, no blur) */
.desktop-tools-dock { position: fixed; bottom: 40px; left: 40px; display: flex; flex-direction: column; gap: 15px; }
.tool-icon-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--bgTop); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; outline: none; }
.tool-icon-btn:hover { color: var(--capsuleAccent, #fff); border-color: var(--capsuleAccent, #fff); transform: translateX(6px); }

/* BOTTOM TALLY DOCK */
.scroll-hint-capsule {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  background: transparent; border: none; padding: 6px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  box-shadow: none;
}
.scroll-hint-capsule:hover { transform: translateX(-50%) translateY(-4px); }
.hub-project-tally { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.tally-dot { border-radius: 50%; transition: all 0.4s ease; }

/* Empty States */
.empty-constellation-msg { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); display:flex; flex-direction: column; align-items:center; gap: 20px; }
.empty-msg-text { font-family:'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 6px; color: rgba(255,255,255,0.4); text-align: center; }

/* Focus Mode Overlays */
#cinemaOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.98); opacity: 0; visibility: hidden; pointer-events: none; display:flex; flex-direction: column; align-items:center; justify-content:center; transition: opacity 0.5s ease, visibility 0.5s; }
body.cinema-active #cinemaOverlay { opacity: 1; visibility: visible; pointer-events: all; }

/* Global Body Toggles / Shielding */
body.is-maximized-mode #topHeaderZone, body.focus-mode-active .top-header-zone, body.heart-mode-active .top-header-zone,
body.is-maximized-mode .timeline-spine, body.focus-mode-active .timeline-spine, body.heart-mode-active .timeline-spine,
body.is-maximized-mode .empty-constellation-msg, body.focus-mode-active .empty-constellation-msg, body.heart-mode-active .empty-constellation-msg { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.4s ease; }
body.heart-mode-active .desktop-tools-dock, body.intake-mode-active .desktop-tools-dock, body.well-mode-active .desktop-tools-dock { opacity: 1 !important; pointer-events: auto !important; }
body.is-maximized-mode .desktop-tools-dock, body.focus-mode-active .desktop-tools-dock { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.4s ease; }

/* ASCENDED SHIELDS */
body.is-maximized-mode .scroll-hint-capsule, 
body.focus-mode-active .scroll-hint-capsule,
body.heart-mode-active .scroll-hint-capsule,
body.is-idle .scroll-hint-capsule { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.4s ease; }

body.is-idle .poetic-summary { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.8s ease; }
body.is-idle #macroFilterTrigger, body.is-idle #focusModeTrigger { opacity: 0 !important; pointer-events: none !important; transition: opacity 1.5s ease !important; }
body.is-mobile #macroFilterTrigger { display: none !important; }
body.is-maximized-mode #ambientCanvas, body.is-maximized-mode .star-orbit-ring { opacity: 0 !important; }
body.is-maximized-mode .thought-orb { opacity: 0.1 !important; pointer-events: none; }
#navToMain, #navFromWellToMain { display: none !important; }

/* Desktop Context Typography (Flat, high legibility formatting) */
.glitter-text { color: var(--capsuleAccent, #fff); font-weight: 900; background: none; text-shadow: none; }
.ctx-word { position: relative; display: inline-block; font-weight: 900; cursor: help; }
.ctx-word::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; opacity:0.3; }
.ctx-action { color:#ff8855; text-shadow: none; }
.ctx-inspiration { color:#55ddff; text-shadow: none; }
.ctx-creation { color:#d088ff; text-shadow: none; }
.ctx-intent { color:#ffdd55; text-shadow: none; }
.ctx-time { color:#88ffaa; text-shadow: none; }
.ctx-manual { color:#fff; text-shadow: none; }

/* Ambient Effects (Preserving real-time spatial positioning metrics) */
.genesis-ripple { position: absolute; border: 1px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.star-orbit-ring { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; animation: spinRing 40s linear infinite; z-index: 0; will-change: transform; }
.star-orbit-track { position: absolute; border: 1px dashed rgba(255,255,255,0.15); border-radius: 50%; box-sizing: border-box; }
.orbit-star { position: absolute; width: 5px; height: 5px; background: var(--capsuleAccent, #fff); border-radius: 50%; top: -2.5px; left: -2.5px; box-shadow: none; }
@keyframes spinRing { 100% { transform: rotate(360deg); } }

/* =========================================================
   ✨ THE BULLETPROOF Z-INDEX SANDWICH
   ========================================================= */
#efBgRoot { z-index: -10 !important; pointer-events: auto !important; } 
#macroGlowSplash { z-index: -8 !important; height: 100vh !important; top: 0; }
#macroBackgroundFx { z-index: -6 !important; mix-blend-mode: screen !important; }
#ambientCanvas { z-index: -4 !important; }
#efTopologyCanvas { z-index: -2 !important; opacity: 0.3; transition: opacity 10s cubic-bezier(0.16, 1, 0.3, 1); }
#weatherCanvas { z-index: -1 !important; }

/* The Header sits deeply in the background */
.top-header-zone { z-index: 5 !important; pointer-events: none !important; }
.markTitle, .poetic-summary { pointer-events: auto !important; } 

/* The Canvas Containers are permeable */
#universeTrack, .app-wrapper, .spatial-desktop-container, #pinnedSection { 
    z-index: 10 !important; 
    pointer-events: none !important; 
}

/* The actual items regain their mass */
.spatial-card, .thought-orb, .node { pointer-events: auto !important; }

/* The UI overlays sit on top */
.scroll-hint-capsule { z-index: 100 !important; }
.desktop-tools-dock { z-index: 600 !important; }
#cinemaOverlay { z-index: 810 !important; }

/* Base trigger transitions */
#macroFilterTrigger, #focusModeTrigger { transition: opacity 1.5s ease, visibility 1.5s ease, transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 0.4s ease, background 0.4s ease; pointer-events: auto !important; }



/* Ensure your background roots inside style.desktop.css explicitly catch the new peak parameters */

#efBgRoot {
    position: fixed; inset: 0;
    /* Uses the dynamic angle from JS to place the bright "top" variable precisely where the sun maps */
    background: linear-gradient(var(--bgAngle, 180deg), var(--bgTop) 0%, var(--bgMid) 55%, var(--bgBot) 100%);
    transition: background 1s ease;
}

/* Let the macro filter splash act as the physical radiant bloom during peak hours */
#macroGlowSplash {
    position: absolute; inset: 0; width: 100vw; height: 100vh; pointer-events: none;
    opacity: calc(0.2 * var(--glowBoost, 1)); 
    transition: opacity 1.5s ease-in-out, background 1.5s ease; mix-blend-mode: screen; 
}


/* --- EXTENDED MACRO OVERLAYS --- */
#macroGlowSplash.fx-off-the-clock { opacity: 0.85; background: radial-gradient(ellipse at 50% 0%, rgba(255, 170, 85, 0.6) 0%, rgba(255, 100, 0, 0.15) 60%, transparent 100%); }
#macroGlowSplash.fx-active { opacity: 0.85; background: radial-gradient(ellipse at 50% 0%, rgba(136, 255, 170, 0.6) 0%, rgba(50, 200, 100, 0.15) 60%, transparent 100%); }
#macroGlowSplash.fx-one-month { opacity: 0.85; background: radial-gradient(ellipse at 50% 0%, rgba(85, 221, 255, 0.6) 0%, rgba(0, 150, 255, 0.15) 60%, transparent 100%); }
#macroGlowSplash.fx-overdue { opacity: 0.85; background: radial-gradient(ellipse at 50% 0%, rgba(255, 85, 85, 0.6) 0%, rgba(200, 0, 0, 0.15) 60%, transparent 100%); }

#macroBackgroundFx.fx-off-the-clock {
    opacity: 1;
    background-image: repeating-radial-gradient(circle at center, transparent, transparent 100px, rgba(255, 170, 85, 0.3) 100px, rgba(255, 170, 85, 0.3) 102px);
    animation: macroPulseCircles 20s ease-in-out infinite alternate;
}
#macroBackgroundFx.fx-active {
    opacity: 1;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(136, 255, 170, 0.2) 40px, rgba(136, 255, 170, 0.2) 42px);
    animation: macroDriftLinear 20s linear infinite;
}
#macroBackgroundFx.fx-one-month {
    opacity: 1;
    background-image: repeating-radial-gradient(ellipse at center, transparent, transparent 80px, rgba(85, 221, 255, 0.2) 80px, rgba(85, 221, 255, 0.2) 82px);
    animation: macroZoomTunnel 25s linear infinite;
}
#macroBackgroundFx.fx-overdue {
    opacity: 1;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(255, 85, 85, 0.1) 20px, rgba(255, 85, 85, 0.1) 22px);
    animation: macroDriftLinear 10s linear infinite;
}