/* style.cards.css
   =========================================
   DEBUG LOG TRACE:
   - Base spatial constraints verified.
   - Pointer-events state hooks safeguarded (.is-pointer-locked).
   - Corrected state selector cross-fallacy: replaced `.is-collapsed` with `[data-diff-collapsed="true"]` to match app DOM logic.
   - REFINED: Interaction snapping eliminated by killing CSS transitions during drag hooks.
   - OPTIMIZED: Applied `contain: layout style` to spatial cards to isolate DOM reflow calculations.
   - OPTIMIZED: Shifted `.card-progress-fill` from expensive `height` repaints to hardware-accelerated `transform: scaleY()`.
   - OPTIMIZED: Pushed `will-change` hints to drag hooks to preempt compositor layer creation.
   ✨ PHANTOM KEYLINE PURGED: Removed conflicting border-image properties; highlight vector driven by stable inset bounds.
   ✨ TRIGONOMETRIC EDGE HIGHLIGHTS: Spatial cards now utilize CSS sin/cos to map structural highlights to the solar orbit.
   ✨ REACTIVE LAMP SHADER: Card borders adapt directly to the Desk Lamp and Night phases via CSS variables.
   ✨ VIBRANT ACCENTS: Boosted the color-mix ratios of --capsuleAccent across card faces, tasks, and max views for stronger project identity.
   ✨ LITE-MODE REPAVED: Absolute visual minimalism. Pure solid circadian backs, unshadowed project lines, zero patterns.
   ✨ Z-INDEX SUPREMACY: Maximized cards now punch through the system UI overlay to guarantee clickability.
   ✨ FLEX-GHOST PURGE: Enforced absolute positioning on fx/pattern layers and nuclear specificity on maximized hide states.
   ✨ GANTT BUBBLE-UP LOCKED: Forced Gantt wrappers to flex-column to prevent 'height: 100%' children from doubling the container scroll area.
   ✨ RESPONSIVE MAX CLAMP: Maximized cards bound dynamically to vw/vh units to automatically resize on browser window adjust events.
   ✨ MAXIMIZED PATTERNS RESTORED: Uncoupled pattern-layer from the max-view display override to bring textures back to the focus view.
   ✨ WORK MODE ACTIVE: Introduced high-contrast, thick-outline, elegantly transitioning visual states for professional focus.
   ========================================= */

/* =========================================
   1. SPATIAL CARDS BASE (FLAT & GROUNDED)
   ========================================= */

.spatial-card, .spatial-face, .node, .node-content { overflow: visible !important; }

.expanded-card-layer[style*="pointer-events: none"] .spatial-face,
.expanded-card-layer.is-pointer-locked .spatial-face {
  overflow: hidden !important; min-width: 280px !important; min-height: 320px !important;
}

.spatial-card {
  position: absolute; width: var(--w, 320px); height: var(--h, 380px); perspective: 1500px;
  z-index: var(--z, 1); border-radius: var(--radiusCard); transition: opacity 0.3s ease !important;
  top: 0 !important; left: 0 !important; 
  contain: layout style; /* GPU ISOLATION: Kept for performance */
  
  /* ✨ OFF-SCREEN CULLING REMOVED: Restores overhanging corner tabs and circular orb glows */
  
  /* ✨ REACTIVE LIGHTING VARIABLES: Defaults to standard Daylight */
  --card-rim: color-mix(in srgb, var(--capsuleAccent) 60%, rgba(255,255,255,0.3));
  --card-glow: color-mix(in srgb, rgb(var(--circadian-bright, 255,255,255)) 15%, transparent);
}

/* ✨ REACTIVE LIGHTING: Moonlit Night */
body.is-night-phase .spatial-card {
  --card-rim: color-mix(in srgb, var(--capsuleAccent) 40%, rgba(160,180,255,0.5));
  --card-glow: color-mix(in srgb, var(--capsuleAccent) 10%, rgba(100,120,255,0.2));
}

/* ✨ REACTIVE LIGHTING: Warm Incandescent Lamp */
body.is-lamp-active .spatial-card {
  --card-rim: color-mix(in srgb, var(--capsuleAccent) 20%, rgba(255,200,80,0.85));
  --card-glow: rgba(255,120,20,0.25);
}

.spatial-card.is-thought-over { z-index: 450 !important; }
.spatial-card.is-dragging, .thought-orb.is-dragging { 
  opacity: 0.98; 
  will-change: transform, opacity; /* HARDWARE ACCELERATION */
}

.spatial-card::after {
  display: none !important;
}

.spatial-card-tilt-wrap { width: 100%; height: 100%; transform-style: preserve-3d; position: relative; border-radius: inherit; box-shadow: none !important; }
.expanded-card-layer, .collapsed-orb-layer { position: absolute; inset: 0; transform-style: preserve-3d; }

.spatial-face {
  position: absolute; inset: 0; border-radius: var(--radiusCard);
  background: linear-gradient(var(--bgAngle, 180deg), 
      color-mix(in srgb, var(--capsuleAccent) 45%, color-mix(in srgb, rgb(var(--circadian-accent, 255,255,255)) 15%, var(--bgMid))), 
      color-mix(in srgb, var(--capsuleAccent) 15%, color-mix(in srgb, rgb(var(--circadian-dark, 5,5,8)) 80%, #000)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--capsuleAccent) 40%, rgba(255,255,255,0.15));
  padding: 24px;
  
  /* ✨ TRIGONOMETRIC HIGHLIGHT: Consumes the reactive variables and maps them to the solar angle */
  box-shadow: inset calc(sin(var(--bgAngle, 180deg)) * 3px) calc(cos(var(--bgAngle, 180deg)) * -3px) 0 var(--card-rim),
              inset calc(sin(var(--bgAngle, 180deg)) * 30px) calc(cos(var(--bgAngle, 180deg)) * -30px) 60px -30px var(--card-glow) !important;
              
  transition: box-shadow 1s ease, border-color 0.2s ease; /* Ensure smooth cross-fades for the lamp */
  display: flex; flex-direction: column; backface-visibility: hidden;
}

.spatial-face::before {
  display: none !important;
}

.spatial-face.front { z-index: 2; pointer-events: auto; }
.spatial-face.back { z-index: 1; pointer-events: none; }

.spatial-card.is-flipped .spatial-face.back { z-index: 10 !important; }
.spatial-card.is-flipped .spatial-face.front { z-index: 1 !important; }

.fx-layer {
  position: absolute !important; inset: 0 !important; overflow: hidden; border-radius: inherit; pointer-events: none;
  z-index: 0; 
  background: color-mix(in srgb, var(--capsuleAccent) 12%, transparent); 
}

.spatial-card .pattern-layer {
  position: absolute !important; inset: 0 !important; pointer-events: none; z-index: 0;
}

/* =========================================
   2. TYPOGRAPHY (TITLE & BLURB)
   ========================================= */

.capsuleTitle {
  margin: 4px 0 16px 0; font-size: 26px; font-weight: 900; cursor: text; line-height: 1.15;
  position: relative; z-index: 10; flex-shrink: 0; word-wrap: break-word; text-align: left !important;
  transition: color 0.2s ease, background 0.2s ease; outline: none;
  color: #fff; text-shadow: none !important;
  background: color-mix(in srgb, var(--capsuleAccent) 25%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
}
.spatial-card:hover .capsuleTitle, .capsuleTitle:focus { background: color-mix(in srgb, var(--capsuleAccent) 40%, transparent); }

.spatial-face.front .editable-text:not(.capsuleTitle) {
  display: block !important; 
  column-count: 1 !important; 
  white-space: pre-wrap !important; 
  overflow-wrap: break-word; word-break: break-word; 
  padding: 0px 8px 16px 4px; margin-top: 0 !important; margin-bottom: 16px !important; 
  flex-grow: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; width: 100%; box-sizing: border-box;
  text-align: left !important; line-height: 1.6 !important; outline: none;
  color: color-mix(in srgb, var(--capsuleAccent) 25%, rgba(255,255,255,0.85));
  text-shadow: none !important;
  transition: color 0.2s ease;
}
.spatial-card:hover .spatial-face.front .editable-text:not(.capsuleTitle),
.spatial-face.front .editable-text:not(.capsuleTitle):focus {
  color: #fff;
}
.spatial-face.front .editable-text:not(.capsuleTitle)::-webkit-scrollbar { width: 4px; }
.spatial-face.front .editable-text:not(.capsuleTitle)::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--capsuleAccent) 40%, transparent); border-radius: 4px; }
.spatial-face.front .editable-text:not(.capsuleTitle):hover::-webkit-scrollbar-thumb { background: var(--capsuleAccent); }

/* =========================================
   3. HEADER & OVERALL PROGRESS
   ========================================= */

.drag-header {
  position: relative; z-index: 10; cursor: grab; margin: -12px -12px 12px -12px; padding: 12px 12px 16px 12px;
  border-radius: var(--radiusCard) var(--radiusCard) 0 0; 
  background-color: color-mix(in srgb, var(--capsuleAccent) 8%, color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 60%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--capsuleAccent) 30%, rgba(255,255,255,0.1));
  box-shadow: none !important;
  display: flex; justify-content: space-between; align-items: center;
  transition: background-color 0.2s ease, border-color 0.2s ease; flex-shrink: 0;
}
.drag-header:hover {
  background-color: color-mix(in srgb, var(--capsuleAccent) 25%, var(--bgMid)); 
  border-bottom: 1px solid var(--capsuleAccent);
}
.drag-header:active, .spatial-card.is-dragging .drag-header {
  cursor: grabbing; background-color: color-mix(in srgb, var(--capsuleAccent) 35%, var(--bgMid));
  border-bottom: 2px solid var(--capsuleAccent);
}

.header-fuzzy-time {
  font-family: 'Noto Sans JP', sans-serif; font-size: 10px; font-weight: 900; text-transform: uppercase;
  letter-spacing: 1px; color: color-mix(in srgb, var(--capsuleAccent) 80%, #fff); white-space: nowrap; padding: 4px 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--capsuleAccent) 15%, transparent); pointer-events: auto !important; text-shadow: none !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.header-fuzzy-time:hover { color: #000; background: var(--capsuleAccent); }

.card-progress-fill {
  position: absolute; bottom: 0; left: 0; right: 0; 
  height: 100%; transform: scaleY(var(--fill-scale, 0)); /* GPU HARDWARE FIX */
  background: color-mix(in srgb, var(--capsuleAccent) 8%, transparent);
  transform-origin: bottom center; border-radius: inherit;
  transition: transform 0.3s ease; pointer-events: none; /* GPU HARDWARE FIX */
}

.natural-progress-text {
  position: relative; z-index: 10; margin-top: 0 !important; align-self: center; pointer-events: auto !important; flex-shrink: 0;
  font-family: 'Noto Sans JP'; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: #fff; border: 1.5px solid color-mix(in srgb, var(--capsuleAccent) 50%, #fff); padding: 8px 20px; border-radius: 999px; text-align: center;
  background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 80%, #000); cursor: ew-resize; user-select: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.natural-progress-text.is-scrubbing { background: #fff; color: #000; }
.natural-progress-text.is-complete { background: var(--capsuleAccent); color: #000; border-color: var(--capsuleAccent); cursor: pointer; pointer-events: auto; }

.undo-btn { margin-right: 8px; font-size: 14px; opacity: 0.7; cursor: pointer; transition: opacity 0.2s; }
.undo-btn:hover { opacity: 1; }

.delete-btn, .hold-btn, .node-vault-btn {
  background: transparent; border: none; color: color-mix(in srgb, var(--capsuleAccent) 40%, #888); cursor: pointer; font-size: 14px; padding: 0; margin-left: 4px;
  transition: color 0.2s, transform 0.2s; text-shadow: none !important; display: inline-flex; align-items: center; justify-content: center;
}
.delete-btn:hover { color: #ff5555; }
.hold-btn:hover { color: #88ccff; }
.node-vault-btn:hover { color: var(--capsuleAccent, #fff); }

.card-bg-tasks { position: absolute; bottom: -1px; left: 0; right: 0; display: flex; gap: 1px; height: 4px; opacity: 1.0; z-index: 10; pointer-events: none; }
.pill-bg-segments { position: absolute; inset: 0; display: flex; gap: 1px; opacity: 0.45; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.pill-label-text { position: relative; z-index: 2; }
.bg-task-shape { flex-grow: 1; height: 100%; background: color-mix(in srgb, var(--capsuleAccent) 20%, transparent); overflow: hidden; }
.bg-task-shape.manual-segment { flex-grow: 1.5; background: color-mix(in srgb, var(--capsuleAccent) 15%, transparent); }
.segment-fill { height: 100%; background: var(--capsuleAccent); transition: width 0.4s ease; box-shadow: none !important; }
body.is-scrubbing .segment-fill { transition: none !important; }
body.is-scrubbing .task-bg-fill, body.is-scrubbing .card-progress-fill, body.is-scrubbing .node-prog-bar, body.is-scrubbing .idle-ring, body.is-scrubbing .task-item { transition: none !important; }

/* =========================================
   4. TABS & CONTROLS (SOLID REACTIVE)
   ========================================= */

.edge-flip-tab {
  position: absolute; right: -28px; top: 60px; width: 28px; height: 110px; 
  background: color-mix(in srgb, var(--capsuleAccent) 20%, rgb(var(--circadian-dark, 0,0,0)));
  border: 1px solid var(--capsuleAccent); 
  border-left: none; border-radius: 0 12px 12px 0; display: flex; align-items: center;
  justify-content: center; cursor: pointer; z-index: 0; transition: background-color 0.2s;
}
.edge-flip-tab:hover { background: var(--capsuleAccent); color: #000; box-shadow: none !important; }
.edge-flip-text { transform: rotate(90deg); font-family: 'Noto Sans JP'; font-weight: 900; font-size: 10px; letter-spacing: 2px; white-space: nowrap; pointer-events: none; }
.edge-flip-text::before { content: attr(data-front); }
.spatial-card.is-flipped .edge-flip-text::before { content: attr(data-back); }
.spatial-card.is-flipped .edge-flip-tab { left: -28px; right: auto; border-radius: 12px 0 0 12px; border-left: 1px solid var(--capsuleAccent); border-right: none; }

.collapse-tab, .maximize-tab { 
  position: absolute; top: -16px; width: 32px; height: 32px; 
  background: color-mix(in srgb, var(--capsuleAccent) 20%, rgb(var(--circadian-dark, 0,0,0))); 
  border: 1px solid var(--capsuleAccent); border-radius: 50%; 
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: #fff; 
  z-index: 410; opacity: 0; transition: opacity 0.2s, background-color 0.2s; box-shadow: none !important;
}
.collapse-tab { left: 16px; }
.maximize-tab { right: 16px; }
.spatial-card:hover .collapse-tab, .spatial-card:hover .maximize-tab { opacity: 1; }
.collapse-tab:hover, .maximize-tab:hover { background: var(--capsuleAccent); color: #000; }
.maximize-tab::before { content: "◰"; }

.zenith-orb { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--capsuleAccent); box-shadow: none !important; cursor: crosshair; z-index: 100; transition: transform 0.2s; }
.zenith-orb:hover { transform: translateX(-50%) scale(1.15); }

.pin-tab { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); background: var(--capsuleAccent); color: #000; padding: 4px 16px; border-radius: 0 0 12px 12px; font-family: 'Noto Sans JP'; font-size: 11px; font-weight: 900; text-transform: uppercase; cursor: pointer; z-index: 0; border: 1px solid #000; box-shadow: none !important; transition: padding 0.2s, background-color 0.2s; }
.pin-tab::before { content: "★ PINNED"; }
.pin-tab:hover { padding-bottom: 8px; background: #fff; }
.focus-mode-active .pin-tab { display: none !important; pointer-events: none; }

.resize-handle { position: absolute; bottom: 0; right: 0; width: 24px; height: 24px; cursor: nwse-resize; z-index: 50; }
.resize-handle::after { content: ""; position: absolute; bottom: 8px; right: 8px; width: 6px; height: 6px; border-right: 2px solid var(--capsuleAccent); border-bottom: 2px solid var(--capsuleAccent); border-radius: 1px; transition: border-color 0.2s; }
.resize-handle:hover::after { border-color: #fff; }

.front-date-scrubber { display: inline-flex !important; justify-content: center; align-items: center; margin: 0 auto 16px auto !important; width: fit-content; z-index: 15; pointer-events: auto !important; position: relative; flex-shrink: 0; background: transparent !important; border: none !important; padding: 0 !important; font-size: 13px !important; letter-spacing: 3px !important; color: color-mix(in srgb, var(--capsuleAccent) 80%, #fff) !important; text-shadow: none !important; transition: color 0.2s ease !important; cursor: ew-resize; }
.front-date-scrubber:hover { color: var(--capsuleAccent) !important; }

/* =========================================
   5. COLLAPSED STATE (PROJECT COLOR ANCHOR)
   ========================================= */

.collapsed-orb-wrap { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: grab; z-index: 10; }
.collapsed-orb-wrap:active { cursor: grabbing; }

.collapsed-orb-layer .idle-glass { position: absolute; inset: 0; border-radius: 50%; background: rgb(var(--circadian-dark, 0,0,0)); border: 3px solid var(--capsuleAccent); box-shadow: none !important; }
.collapsed-orb-layer .idle-ring { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(var(--capsuleAccent) calc(var(--p) * 1%), transparent 0); -webkit-mask: radial-gradient(transparent calc(50% - 2px), black calc(50% - 1px)); opacity: 1.0; filter: none !important; }
.collapsed-orb-layer .idle-core { width: 25%; height: 25%; border-radius: 50%; background: var(--capsuleAccent); box-shadow: none !important; }
.collapsed-label { position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: 'Noto Sans JP'; font-weight: 900; font-size: 11px; letter-spacing: 2px; color: #fff; text-shadow: none !important; pointer-events: none; text-transform: uppercase; }
.collapsed-expand-btn { position: absolute; top: -5px; right: -5px; width: 22px; height: 22px; background: var(--capsuleAccent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #000; font-size: 12px; font-weight: bold; cursor: pointer; box-shadow: none !important; opacity: 0; z-index: 20; transition: opacity 0.2s, transform 0.2s; }
.collapsed-orb-layer:hover .collapsed-expand-btn { opacity: 1; }
.collapsed-expand-btn:hover { transform: scale(1.15); }

/* =========================================
   6. INTERACTIVE TASKS (PROJECT CORE ACCENT)
   ========================================= */

.interactive-tasks {
  display: flex; flex-direction: column; gap: 8px; margin-top: 12px; overflow-y: auto; flex-grow: 1; padding-right: 4px; padding-bottom: 24px; position: relative; z-index: 15;
  transform: translate3d(0, 0, 0); will-change: transform, scroll-position; backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: auto !important;
}
.interactive-tasks::-webkit-scrollbar { width: 4px; }
.interactive-tasks::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--capsuleAccent) 40%, transparent); border-radius: 4px; }

.task-item { position: relative; display: flex; align-items: flex-start; padding: 10px 12px; gap: 10px; background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 75%, var(--capsuleAccent)) !important; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--capsuleAccent) 35%, transparent); contain: layout paint style; transform: translate(0); background-clip: padding-box; overflow: hidden; min-height: 36px; flex-shrink: 0; box-shadow: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease; }
.task-item:hover { background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 65%, var(--capsuleAccent)) !important; border-color: var(--capsuleAccent); }

.task-item.is-due-soon:not(.done) {
  border-color: var(--capsuleAccent) !important;
  background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 60%, var(--capsuleAccent)) !important;
}
.task-item.is-due-soon:not(.done) .st-box {
  border-color: var(--capsuleAccent);
}

.task-bg-fill { position: absolute; top: 0; left: 0; bottom: 0; width: calc(var(--tp, 0) * 1%); background: var(--capsuleAccent); opacity: 0.65; border-radius: 8px; pointer-events: none; transition: width 0.1s linear, opacity 0.2s ease; z-index: 0; box-shadow: none !important; border-right: none; }
.task-item.done .task-bg-fill { width: 100% !important; opacity: 0.3 !important; background: var(--capsuleAccent) !important; }

.st-box { width: 16px; height: 16px; margin-top: 1px; border: 2px solid color-mix(in srgb, var(--capsuleAccent) 70%, #fff); border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; z-index: 2; box-shadow: none !important; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.task-item.done .st-box { background: var(--capsuleAccent); border-color: var(--capsuleAccent); color: #000; font-weight: bold; font-size: 12px; }
.st-text { flex-grow: 1; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; line-height: 18px; color: #fff; z-index: 2; pointer-events: none; transition: opacity 0.2s; }
.task-item.done .st-text { text-decoration: line-through; opacity: 0.6; }
.task-prog-label { font-family: 'Noto Sans JP', sans-serif; font-size: 10px; color: color-mix(in srgb, var(--capsuleAccent) 90%, #fff); z-index: 2; user-select: none; pointer-events: none; }
.task-item.done .task-prog-label { opacity: 0; }

.st-input-wrap { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; flex-shrink: 0; }
.st-input { flex-grow: 1; background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 80%, #000); border: 1.5px solid color-mix(in srgb, var(--capsuleAccent) 40%, #fff); border-radius: 8px; padding: 10px 12px; color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 13px; outline: none; transition: border-color 0.2s, background-color 0.2s; box-shadow: none !important; }
.st-input:focus { border-color: var(--capsuleAccent); background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 60%, #000); }

.st-toggle-btn { background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 80%, #111); border: 1px solid color-mix(in srgb, var(--capsuleAccent) 50%, transparent); color: color-mix(in srgb, var(--capsuleAccent) 90%, #fff); width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s; font-size: 12px; }
.st-toggle-btn:hover { border-color: var(--capsuleAccent); color: #fff; background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 60%, #111); }
.st-toggle-btn.active { background: var(--capsuleAccent); border-color: var(--capsuleAccent); color: #000; box-shadow: none !important; }

.task-drag-handle { cursor: grab; color: var(--capsuleAccent); opacity: 0.5; margin-left: auto; margin-top: -3px; font-size: 16px; padding: 4px 8px; transition: opacity 0.2s; z-index: 5; }
.task-item:hover .task-drag-handle { opacity: 1; }
.task-drag-handle:active { cursor: grabbing; }

.task-item.is-dragging-task { opacity: 0.6 !important; transform: scale(0.98); border: 2px dashed var(--capsuleAccent); transition: none !important; will-change: transform, opacity; }
.task-item.drag-over-top { border-top: 2px solid var(--capsuleAccent) !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.task-item.drag-over-bottom { border-bottom: 2px solid var(--capsuleAccent) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }

.task-item.is-pinned-thought {
    border-left: 4px solid var(--capsuleAccent) !important;
    background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 65%, var(--capsuleAccent)) !important;
    box-shadow: none !important;
}

/* =========================================
   7. NEBULA PICKER
   ========================================= */

.custom-category-wrap { position: relative; display: inline-flex; z-index: 100; }
.custom-category-button { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-family: 'Noto Sans JP', sans-serif; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; background: color-mix(in srgb, var(--capsuleAccent) 30%, rgb(var(--circadian-dark, 0,0,0))); border: 1px solid var(--capsuleAccent); color: #fff; text-shadow: none !important; box-shadow: none !important; transition: background-color 0.2s, color 0.2s; }
.custom-category-button:hover { background: var(--capsuleAccent); color: #000; }
.custom-category-label { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-family: 'Noto Sans JP', sans-serif; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: color-mix(in srgb, var(--capsuleAccent) 90%, #fff); text-shadow: none !important; background: color-mix(in srgb, var(--capsuleAccent) 20%, rgb(var(--circadian-dark, 0,0,0))); border: 1px solid color-mix(in srgb, var(--capsuleAccent) 50%, transparent); }
.custom-category-menu { display: none; position: absolute; top: -15px; left: -15px; width: calc(100% + 30px); height: 380px; min-width: 280px; background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 95%, #fff); border-radius: 24px; border: 2px solid var(--capsuleAccent); padding: 25px; box-sizing: border-box; flex-direction: column; align-items: center; z-index: 490; box-shadow: none !important; contain: strict; }
.custom-category-wrap.is-open .custom-category-menu { display: flex; animation: menuPop 0.15s ease-out forwards; }
@keyframes menuPop { 0% { opacity: 0; transform: scale(0.98) translateY(5px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

.nebula-title { font-size: 10px; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 4px; color: #fff; text-shadow: none !important; margin-bottom: 15px; flex-shrink: 0; }
.nebula-cloud-container { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 8px; overflow-y: auto; padding: 5px; flex-grow: 1; width: 100%; }
.nebula-cloud-container::-webkit-scrollbar { width: 0; }
.custom-cat-option { padding: 6px 12px; border-radius: 999px; font-size: 10px; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; white-space: nowrap; background: color-mix(in srgb, var(--opt-color) 25%, rgb(var(--circadian-dark, 0,0,0))); border: 1px solid var(--opt-color); color: #fff; box-shadow: none !important; transition: background-color 0.15s, color 0.15s, opacity 0.2s; }
.nebula-cloud-container:hover .custom-cat-option { opacity: 0.6; }
.custom-cat-option:hover { opacity: 1 !important; background: var(--opt-color); color: #000; z-index: 10; }
.custom-cat-option.is-selected { background: var(--opt-color); color: #000; border-color: #fff; box-shadow: none !important; opacity: 1; }
.close-nebula { margin-top: 15px; border: 1px solid #ff5555; color: #ff5555; flex-shrink: 0; background: color-mix(in srgb, #ff5555 20%, rgb(var(--circadian-dark, 0,0,0))); font-weight: 900; }
.close-nebula:hover { background: #ff5555; color: #000; box-shadow: none !important; }

/* =========================================
   8. URGENCY SIGNAL (PROJECT ACCENT RIPPLE)
   ========================================= */

.spatial-card.is-urgent-pulse .spatial-face {
    animation: urgentFlatGlow 5s ease-in-out infinite alternate;
}

@keyframes urgentFlatGlow {
    0% { border-color: color-mix(in srgb, var(--capsuleAccent) 40%, rgba(255,255,255,0.15)); }
    100% { border-color: var(--capsuleAccent); }
}

.spatial-card.is-urgent-pulse:not(.is-maximized) .fx-layer {
    display: block !important;
    background: color-mix(in srgb, var(--capsuleAccent) 18%, transparent) !important;
    animation: urgentInternalFillHum 5s infinite alternate ease-in-out !important;
}

@keyframes urgentInternalFillHum {
    0% { opacity: 0.2; }
    100% { opacity: 1; }
}

.spatial-card.is-urgent-pulse[data-diff-collapsed="true"] .idle-core {
    animation: urgentFlatCoreHum 3s infinite alternate ease-in-out !important;
}

@keyframes urgentFlatCoreHum {
    0% { transform: scale(1.1); background: #fff; border-color: var(--capsuleAccent); }
    100% { transform: scale(1.6); background: var(--capsuleAccent); border-color: #fff; }
}

.spatial-card.is-urgent-pulse[data-diff-collapsed="true"] .collapsed-orb-layer .idle-glass {
    animation: urgentFlatOrbPulse 3s infinite alternate ease-in-out !important;
}

@keyframes urgentFlatOrbPulse {
    0% { border-color: var(--capsuleAccent); }
    100% { border-color: #fff; }
}

.spatial-card.is-urgent-pulse:not([data-diff-collapsed="true"]):not(.is-maximized) .spatial-card-tilt-wrap::after, 
.spatial-card.is-urgent-pulse:not([data-diff-collapsed="true"]):not(.is-maximized) .spatial-card-tilt-wrap::before { 
    content: ""; 
    position: absolute; 
    inset: 0;
    border-radius: var(--radiusCard); 
    z-index: 0; 
    pointer-events: none; 
    border: 2px solid var(--capsuleAccent);
}

.spatial-card.is-urgent-pulse:not([data-diff-collapsed="true"]):not(.is-maximized) .spatial-card-tilt-wrap::after { 
    animation: flatSignalRipple 6s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.spatial-card.is-urgent-pulse:not([data-diff-collapsed="true"]):not(.is-maximized) .spatial-card-tilt-wrap::before { 
    border-color: color-mix(in srgb, var(--capsuleAccent) 60%, #fff);
    animation: flatSignalRipple 6s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    animation-delay: -3s;
}

.spatial-card.is-urgent-pulse[data-diff-collapsed="true"] .collapsed-orb-wrap::after, 
.spatial-card.is-urgent-pulse[data-diff-collapsed="true"] .collapsed-orb-wrap::before {
    content: ""; position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 60px;
    margin-left: -30px; margin-top: -30px;
    border-radius: 50%;
    border: 2px solid var(--capsuleAccent);
    z-index: 0; pointer-events: none;
    animation: flatOrbRipple 4.5s cubic-bezier(0.25, 0, 0.2, 1) infinite !important;
}
.spatial-card.is-urgent-pulse[data-diff-collapsed="true"] .collapsed-orb-wrap::before {
    border-color: color-mix(in srgb, var(--capsuleAccent) 60%, #fff);
    animation-delay: -2.25s !important;
}

.spatial-card.is-urgent-pulse.is-maximized .spatial-card-tilt-wrap {
    animation: maxUrgentFlatPulse 5s infinite alternate ease-in-out !important;
}

@keyframes maxUrgentFlatPulse {
    0% { border-color: color-mix(in srgb, var(--capsuleAccent) 40%, rgba(255,255,255,0.2)); }
    100% { border-color: var(--capsuleAccent); }
}

@keyframes flatSignalRipple {
    0% { transform: scale(1); opacity: 0; }
    10% { opacity: 0.8; }
    100% { transform: scale(1.2); opacity: 0; } 
}

@keyframes flatOrbRipple {
    0% { transform: scale(0.8); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* =========================================
   9. MAXIMIZED CARD - UNFOLDED DUAL PANE
   ========================================= */

.show-on-max { display: none !important; }
.spatial-card.is-maximized .show-on-max { display: flex !important; }
.spatial-card.is-maximized div.show-on-max.editable-text { display: block !important; }

.hide-on-max { display: flex !important; }

/* ✨ REFINED: Nuclear specificity override to ensure front face flex blurbs & scrubbers fully collapse */
.spatial-card.is-maximized .hide-on-max,
.spatial-card.is-maximized .spatial-face.front .editable-text.hide-on-max:not(.capsuleTitle),
.spatial-card.is-maximized .spatial-face.front .front-date-scrubber.hide-on-max { 
  display: none !important; 
  margin: 0 !important; 
  padding: 0 !important;
  height: 0 !important; 
  min-height: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* ✨ REFINED: Strip fx layer in max view, but preserve the pattern textures */
.spatial-card.is-maximized .fx-layer {
  display: none !important;
}

.spatial-card.is-maximized .spatial-card-tilt-wrap {
  display: flex !important; 
  flex-direction: row !important; 
  width: 100% !important;
  height: 100% !important;
  background: color-mix(in srgb, var(--capsuleAccent) 25%, rgb(var(--circadian-dark, 5,5,8))) !important; 
  border: 1px solid color-mix(in srgb, var(--capsuleAccent) 40%, rgba(255,255,255,0.15)) !important; 
  border-radius: 24px !important; 
  
  /* ✨ TRIGONOMETRIC HIGHLIGHT FOR MAXIMIZED PANE */
  box-shadow: inset calc(sin(var(--bgAngle, 180deg)) * 3px) calc(cos(var(--bgAngle, 180deg)) * -3px) 0 var(--card-rim),
              inset calc(sin(var(--bgAngle, 180deg)) * 40px) calc(cos(var(--bgAngle, 180deg)) * -40px) 80px -40px var(--card-glow) !important; 
              
  transition: box-shadow 1s ease;
  overflow: hidden !important;
}

.spatial-card.is-maximized .spatial-face {
  position: relative !important; 
  visibility: visible !important; 
  opacity: 1 !important; 
  transform: none !important;
  height: 100% !important; 
  box-sizing: border-box !important; 
  background: transparent !important; 
  border: none !important; 
  box-shadow: none !important; 
  padding: 40px !important;
  display: flex !important; 
  flex-direction: column !important; 
  flex: 1 1 0 !important; 
  pointer-events: auto !important; 
  overflow-y: auto !important; 
  overflow-x: hidden !important;
}

.spatial-card.is-maximized .spatial-face::-webkit-scrollbar { width: 6px; }
.spatial-card.is-maximized .spatial-face::-webkit-scrollbar-thumb { background: var(--capsuleAccent); border-radius: 6px; }

.spatial-card.is-maximized .spatial-face.front { 
  width: 60% !important; 
  border-right: 1px solid color-mix(in srgb, var(--capsuleAccent) 30%, rgba(255,255,255,0.15)) !important; 
  border-radius: 0 !important;
}

.spatial-card.is-maximized .spatial-face.back { 
  width: 40% !important; 
  border-radius: 0 !important;
}

.spatial-card.is-maximized .spatial-face::before,
.spatial-card.is-maximized .pin-tab,
.spatial-card.is-maximized .resize-handle,
.spatial-card.is-maximized .collapse-tab { display: none !important; }

.spatial-card.is-maximized .spatial-face.back .drag-header,
.spatial-card.is-maximized .spatial-face.back .capsuleTitle { display: none !important; }

.spatial-card.is-maximized .spatial-face.back .editable-text { 
  max-height: 25% !important; 
  flex-shrink: 1 !important; 
}

/* =========================================
   10. MAXIMIZED COMPONENTS & STRUCTURAL LOCKS
   ========================================= */

/* ✨ GANTT HEADER LOCK: Prevent internal 100% height from bubbling up and duplicating scroll height */
.spatial-card.is-maximized .gantt-draft-window.show-on-max {
  display: flex !important;
  flex-direction: column !important; /* Overrides default flex-row behavior from .show-on-max */
  width: 100% !important;
}

.gantt-timeline-header {
  display: flex !important; 
  align-items: stretch !important;
  min-height: 28px; /* Clamps the 100% height child div injected by JS */
}

.aether-scratchpad { border-top: 1px solid color-mix(in srgb, var(--capsuleAccent) 40%, transparent); padding-top: 20px; margin-top: 8px; flex-shrink: 0; }
.scratchpad-title { font-family: 'Noto Sans JP'; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: color-mix(in srgb, var(--capsuleAccent) 80%, #fff); margin-bottom: 10px; flex-shrink: 0; }
.scratchpad-input { width: 100%; height: 120px; background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 80%, #000); border: 1.5px solid color-mix(in srgb, var(--capsuleAccent) 30%, #fff); border-radius: 12px; padding: 16px; color: #fff; font-family: 'Neuton', serif; font-size: 16px; line-height: 1.5; outline: none; resize: none; overflow-y: auto; box-sizing: border-box; transition: border-color 0.2s; box-shadow: none !important; }
.scratchpad-input:focus { border-color: var(--capsuleAccent); }

.project-link-wrap { 
  display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 80%, #000); padding: 10px 14px; 
  border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--capsuleAccent) 30%, #fff); transition: border-color 0.2s; 
  flex-shrink: 0; margin-bottom: 16px; box-shadow: none !important;
}
.project-link-wrap:focus-within, .project-link-wrap:hover { border-color: var(--capsuleAccent); }
.project-link-btn { font-family: 'Noto Sans JP'; font-size: 11px; font-weight: 900; letter-spacing: 2px; color: var(--capsuleAccent); text-transform: uppercase; text-decoration: none; cursor: pointer; flex-shrink: 0; transition: color 0.2s; pointer-events: auto; text-shadow: none !important; }
.project-link-btn:hover { color: #fff; }
.project-link-input { background: transparent; border: none; color: #fff; width: 100%; font-size: 12px; font-family: monospace; outline: none; opacity: 0.6; pointer-events: auto; transition: opacity 0.2s; }
.project-link-input:focus { opacity: 1; }

.next-due-container { width: 100%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.next-due-banner { font-family: 'Noto Sans JP', sans-serif; font-size: 10px; font-weight: 900; color: var(--capsuleAccent); text-shadow: none !important; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 20px; box-sizing: border-box; pointer-events: none; }
.next-due-banner strong { color: #fff; font-weight: 900; letter-spacing: 0; }

.header-link-container { display: flex; align-items: center; }
.header-project-link { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-family: 'Noto Sans JP', sans-serif; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; background: color-mix(in srgb, var(--capsuleAccent) 20%, rgb(var(--circadian-dark, 0,0,0))); border: 1px solid var(--capsuleAccent); color: #fff; text-decoration: none; pointer-events: auto; transition: background-color 0.2s; }
.header-project-link:hover { background: var(--capsuleAccent); color: #000; box-shadow: none !important; }

/* =========================================================
   Z-INDEX, STACKING & LIVE WINDOW RESIZE PROTOCOLS
   ========================================================= */

.spatial-card[data-diff-collapsed="true"] { z-index: 2 !important; }
.spatial-card[data-diff-collapsed="false"],
.spatial-card:not([data-diff-collapsed]) { z-index: calc(var(--z, 1) + 100) !important; }
.spatial-card.is-dragging { z-index: 9000 !important; }

/* ✨ REFINED: Bound maximized assets directly to viewport dimensions so scale adjustments fluidly recalculate */
.spatial-card.is-maximized { 
  width: 90vw !important; 
  height: 87vh !important; 
  transform: translate3d(5vw, calc(6.5vh + 20px), 0) !important; 
  z-index: 999900 !important; 
  transition: width 0.15s ease, height 0.15s ease, transform 0.15s ease !important; /* Lock smooth transitions during manual window scaling */
}

/* =========================================================
   LITE MODE: SOLID CIRCADIAN & CLEAN LINE OVERRIDES
   ========================================================= */

body.lite-mode .spatial-card::after { display: none !important; }

body.lite-mode .spatial-face { 
  background: rgb(var(--circadian-dark, 5,5,8)) !important; 
  border: 1.5px solid var(--capsuleAccent) !important; 
  box-shadow: none !important; 
}

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

body.lite-mode .capsuleTitle { color: #fff !important; background: color-mix(in srgb, var(--capsuleAccent) 20%, transparent) !important; padding: 2px 6px; border-radius: 4px; }
body.lite-mode .drag-header { background-color: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 80%, #000) !important; border-bottom: 1px solid color-mix(in srgb, var(--capsuleAccent) 40%, transparent) !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(--capsuleAccent) !important; border-bottom: 2px solid #fff !important; }
body.lite-mode .drag-header:hover .header-fuzzy-time { color: #000 !important; }
body.lite-mode .natural-progress-text { background: rgb(var(--circadian-dark, 0,0,0)) !important; border: 1.5px solid var(--capsuleAccent) !important; color: #fff !important; }
body.lite-mode .natural-progress-text.is-complete { background: var(--capsuleAccent) !important; color: #000 !important; }
body.lite-mode .edge-flip-tab, body.lite-mode .collapse-tab, body.lite-mode .maximize-tab { background: rgb(var(--circadian-dark, 0,0,0)) !important; border: 1px solid var(--capsuleAccent) !important; }
body.lite-mode .pin-tab { background: var(--capsuleAccent) !important; color: #000 !important; border: 1px solid #000 !important; }
body.lite-mode .task-item { background: color-mix(in srgb, rgb(var(--circadian-dark, 0,0,0)) 90%, var(--capsuleAccent)) !important; border: 1px solid color-mix(in srgb, var(--capsuleAccent) 40%, transparent) !important; }
body.lite-mode .task-bg-fill { background: var(--capsuleAccent) !important; opacity: 0.65 !important; }
body.lite-mode .task-item.done .task-bg-fill { opacity: 0.3 !important; background: var(--capsuleAccent) !important; }
body.lite-mode .st-box { border: 2px solid color-mix(in srgb, var(--capsuleAccent) 80%, #fff) !important; }
body.lite-mode .task-item.done .st-box { background: var(--capsuleAccent) !important; }
body.lite-mode .collapsed-orb-layer .idle-glass { background: rgb(var(--circadian-dark, 0,0,0)) !important; border: 2.5px solid var(--capsuleAccent) !important; }
body.lite-mode .zenith-orb { background: #fff !important; border: 2.5px solid var(--capsuleAccent) !important; }
body.lite-mode .custom-category-menu { background: rgb(var(--circadian-dark, 0,0,0)) !important; border: 2px solid var(--capsuleAccent) !important; }
body.lite-mode .custom-cat-option { background: rgb(var(--circadian-dark, 0,0,0)) !important; border-color: var(--opt-color) !important; color: #fff !important; }
body.lite-mode .custom-cat-option.is-selected { background: var(--opt-color) !important; color: #000 !important; }
body.lite-mode .spatial-card.is-maximized .spatial-card-tilt-wrap { background: rgb(var(--circadian-dark, 0,0,0)) !important; border: 2px solid var(--capsuleAccent) !important; box-shadow: none !important; }
body.lite-mode .project-link-wrap, body.lite-mode .scratchpad-input { background: rgb(var(--circadian-dark, 0,0,0)) !important; border: 1.5px solid var(--capsuleAccent) !important; }
body.lite-mode .spatial-card.is-urgent-pulse:not(.is-maximized) .spatial-face { border-color: var(--capsuleAccent) !important; }
body.lite-mode .spatial-card.is-urgent-pulse[data-diff-collapsed="true"] .collapsed-orb-layer .idle-glass { border-color: #fff !important; }

/* =========================================
   11. MOMENTUM (PROJECT OVERLAYS)
   ========================================= */

@keyframes aetherFlow {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes patternPanLeft {
  0% { background-position: 0px 0px; }
  100% { background-position: -400px 0px; }
}

.card-bg-tasks { height: 4px; }
.segment-fill, .node-prog-bar { position: relative; overflow: hidden; }

.segment-fill::after, .node-prog-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    color-mix(in srgb, var(--capsuleAccent) 40%, #fff) 50%, 
    transparent 100%
  );
  background-size: 200% 100%;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
  mix-blend-mode: normal; 
}

.aether-momentum-orbit {
  position: absolute; inset: -8px; border-radius: 50%;
  background: conic-gradient(
    transparent 0deg, 
    var(--capsuleAccent) 80deg, 
    #fff 90deg, 
    transparent 100deg
  );
  -webkit-mask: radial-gradient(transparent calc(50% - 2px), black calc(50% - 1px));
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}

[data-momentum="surge"] .segment-fill::after { opacity: 1; animation: aetherFlow 5s linear infinite; }
[data-momentum="surge"] .aether-momentum-orbit { opacity: 1; animation: aetherOrbit 3s linear infinite; filter: none !important; }
.spatial-card[data-momentum="surge"] .pattern-layer { animation: patternPanLeft 30s linear infinite; }

[data-momentum="peak"] .segment-fill::after { opacity: 0.85; animation: aetherFlow 7s linear infinite; }
[data-momentum="peak"] .aether-momentum-orbit { opacity: 0.8; animation: aetherOrbit 5s linear infinite; filter: none !important; }
.spatial-card[data-momentum="peak"] .pattern-layer { animation: patternPanLeft 60s linear infinite; }

[data-momentum="active"] .segment-fill::after { opacity: 0.65; animation: aetherFlow 9s linear infinite; }
[data-momentum="active"] .aether-momentum-orbit { opacity: 0.5; animation: aetherOrbit 9s linear infinite; }
.spatial-card[data-momentum="active"] .pattern-layer { animation: patternPanLeft 120s linear infinite; }

[data-momentum="steady"] .segment-fill::after { opacity: 0.45; animation: aetherFlow 12s linear infinite; }
[data-momentum="steady"] .aether-momentum-orbit { opacity: 0.35; animation: aetherOrbit 14s linear infinite; }
.spatial-card[data-momentum="steady"] .pattern-layer { animation: patternPanLeft 180s linear infinite; }

[data-momentum="slow"] .segment-fill::after { opacity: 0.25; animation: aetherFlow 16s linear infinite; }
[data-momentum="slow"] .aether-momentum-orbit { opacity: 0.25; animation: aetherOrbit 18s linear infinite; }
.spatial-card[data-momentum="slow"] .pattern-layer { animation: patternPanLeft 240s linear infinite; }

.node[data-momentum="surge"] .node-prog-bar::after { opacity: 0.85; animation: aetherFlow 3s linear infinite; }
.node[data-momentum="peak"] .node-prog-bar::after { opacity: 0.65; animation: aetherFlow 5s linear infinite; }
.node[data-momentum="active"] .node-prog-bar::after { opacity: 0.35; animation: aetherFlow 9s linear infinite; }
.node[data-momentum="steady"] .node-prog-bar::after { opacity: 0.25; animation: aetherFlow 12s linear infinite; }
.node[data-momentum="slow"] .node-prog-bar::after { opacity: 0.15; animation: aetherFlow 16s linear infinite; }

@keyframes aetherOrbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =========================================
   PROJECT DRAG ACTION ZONES (TETHER, DISMISS, SNOOZE)
   ========================================= */

#projectDragZones {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8500; /* SUPREMACY: Above UI docks (600) and Cinema (810), below dragging card (9000) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

/* Requires your GSAP dragStart hook to add 'is-dragging-card' to the body */
body.is-dragging-card #projectDragZones {
    opacity: 1;
    visibility: visible;
    pointer-events: none; /* ← CHANGED: Let clicks pass right through to the card */
}

/* --- Base Typography & Structure --- */
.proj-action-zone, .proj-snooze-segment {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    opacity: 0.5;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease, padding 0.2s ease;
}

.proj-action-zone {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proj-action-zone.is-hovered, .proj-snooze-segment.is-hovered {
    opacity: 1;
}

/* --- 1. Top: Tether Zone --- */
.proj-tether-zone {
    top: 0; left: 0; right: 0; height: 120px;
    background: linear-gradient(to bottom, rgba(136, 204, 255, 0.3), transparent);
    border-bottom: 2px dashed color-mix(in srgb, #88ccff 40%, transparent);
    align-items: flex-start; padding-top: 25px;
    color: #88ccff;
}
.proj-tether-zone.is-hovered {
    background: linear-gradient(to bottom, rgba(136, 204, 255, 0.55), rgba(136, 204, 255, 0.1));
    border-bottom: 2px solid #88ccff;
    padding-top: 35px; /* Physical 'pull' visual */
}

/* --- 2. Bottom: Dismiss Zone --- */
.proj-dismiss-zone {
    bottom: 0; left: 0; right: 0; height: 120px;
    background: linear-gradient(to top, rgba(255, 85, 85, 0.3), transparent);
    border-top: 2px dashed color-mix(in srgb, #ff5555 40%, transparent);
    align-items: flex-end; padding-bottom: 25px;
    color: #ff5555;
}
.proj-dismiss-zone.is-hovered {
    background: linear-gradient(to top, rgba(255, 85, 85, 0.55), rgba(255, 85, 85, 0.1));
    border-top: 2px solid #ff5555;
    padding-bottom: 35px;
}

/* --- 3. Right: Snooze Array --- */
.proj-snooze-wrap {
    position: absolute; top: 0; bottom: 0; right: 0; width: 140px;
    display: flex; flex-direction: column;
    background: linear-gradient(to left, rgba(170, 136, 255, 0.15), transparent);
    border-left: 2px dashed color-mix(in srgb, #aa88ff 30%, transparent);
}

.proj-snooze-segment {
    flex: 1; display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl;
    color: #aa88ff; 
    border-bottom: 1px dashed color-mix(in srgb, #aa88ff 20%, transparent);
    cursor: crosshair;
}
.proj-snooze-segment:last-child { border-bottom: none; }

.proj-snooze-segment.is-hovered {
    background: linear-gradient(to left, rgba(170, 136, 255, 0.4), transparent);
    font-size: 1.1em;
    text-shadow: 0 0 12px color-mix(in srgb, #aa88ff 80%, transparent);
    border-left: 4px solid #aa88ff;
    margin-left: -2px; /* Compensate for the border snap */
}

/* =========================================================
   ✨ LITE MODE: ULTIMATE VISUAL REDUCTION
   ========================================================= */

/* Strip background gradients, boost dash opacity, flatten colors */
body.lite-mode .proj-tether-zone {
    background: var(--bgTop, #08080a) !important;
    border-bottom: 2px dashed var(--capsuleAccent, #88ccff) !important;
    color: var(--text, #fff) !important;
    text-shadow: none !important;
}
body.lite-mode .proj-tether-zone.is-hovered {
    background: color-mix(in srgb, var(--capsuleAccent, #88ccff) 15%, var(--bgTop)) !important;
    border-bottom: 3px solid var(--capsuleAccent, #88ccff) !important;
    color: var(--capsuleAccent, #88ccff) !important;
}

body.lite-mode .proj-dismiss-zone {
    background: var(--bgBot, #000) !important;
    border-top: 2px dashed #ff5555 !important;
    color: var(--text, #fff) !important;
    text-shadow: none !important;
}
body.lite-mode .proj-dismiss-zone.is-hovered {
    background: color-mix(in srgb, #ff5555 15%, var(--bgBot)) !important;
    border-top: 3px solid #ff5555 !important;
    color: #ff5555 !important;
}

body.lite-mode .proj-snooze-wrap {
    background: var(--bgMid, #110914) !important;
    border-left: 2px dashed #aa88ff !important;
}
body.lite-mode .proj-snooze-segment {
    color: var(--text, #fff) !important;
    border-bottom: 1px dashed color-mix(in srgb, #aa88ff 40%, transparent) !important;
    text-shadow: none !important;
}
body.lite-mode .proj-snooze-segment.is-hovered {
    background: color-mix(in srgb, #aa88ff 20%, var(--bgMid)) !important;
    color: #aa88ff !important;
    border-left: 4px solid #aa88ff !important;
}

/* =========================================================
   12. WORK MODE: OUTLINE & HIGH CONTRAST FOCUS
   ========================================================= */

body.is-work-mode .spatial-face {
    background: color-mix(in srgb, rgb(var(--circadian-dark, 5,5,8)) 95%, var(--capsuleAccent)) !important;
    border: 3px solid var(--capsuleAccent) !important;
    box-shadow: none !important;
    transition: background 1.2s ease, border-color 0.5s ease, box-shadow 1.2s ease !important;
}

body.is-work-mode .fx-layer {
    display: none !important;
}

body.is-work-mode .pattern-layer {
    opacity: 0.1 !important;
    mix-blend-mode: screen;
    transition: opacity 1.2s ease;
}

body.is-work-mode .capsuleTitle {
    color: var(--lite-text, #fff) !important;
    background: transparent !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}

body.is-work-mode .spatial-face.front .editable-text:not(.capsuleTitle) {
    color: color-mix(in srgb, var(--lite-text, #fff) 85%, var(--capsuleAccent)) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

body.is-work-mode .drag-header {
    background: transparent !important;
    border-bottom: 2px dashed color-mix(in srgb, var(--capsuleAccent) 50%, transparent) !important;
    transition: background-color 1.2s ease, border-color 0.5s ease !important;
}
body.is-work-mode .drag-header:hover, body.is-work-mode .spatial-card.is-dragging .drag-header {
    border-bottom: 2px solid var(--capsuleAccent) !important;
    background: color-mix(in srgb, var(--capsuleAccent) 10%, transparent) !important;
}

body.is-work-mode .task-item {
    background: transparent !important;
    border: 1.5px solid color-mix(in srgb, var(--capsuleAccent) 40%, transparent) !important;
}
body.is-work-mode .task-item:hover {
    border-color: var(--capsuleAccent) !important;
    background: color-mix(in srgb, var(--capsuleAccent) 10%, transparent) !important;
}

body.is-work-mode .st-input {
    background: transparent !important;
    border: 1.5px dashed color-mix(in srgb, var(--capsuleAccent) 50%, transparent) !important;
    color: var(--lite-text, #fff) !important;
}
body.is-work-mode .st-input:focus {
    border-style: solid !important;
    border-color: var(--capsuleAccent) !important;
}

body.is-work-mode .spatial-card.is-maximized .spatial-card-tilt-wrap {
    background: rgb(var(--circadian-dark, 5,5,8)) !important;
    border: 3px solid var(--capsuleAccent) !important;
    box-shadow: none !important;
    transition: background 1.2s ease, border-color 0.5s ease !important;
}