/* Mr. Patel's Workday — fx layer (chunk 2: lively, futuristic graphics).
   Loaded AFTER css/app.css + css/v3.css. Purely visual: no layout metrics
   change (backgrounds, shadows, filters, glows only — the Today header area
   gains a 1px gradient hairline painted inside its existing box).
   Language: 2026 Wayne-tech — deep blue-black space, steel-ice accents,
   soft glows on brand elements only, no neon. All motion is transform /
   opacity / filter, transitions <300ms; ambient loops are slow and are
   disabled under prefers-reduced-motion. */

:root {
  --fx-ice: #a8dcff;
  --fx-steel: #7fb6e8;
  --fx-line: rgba(150, 200, 255, 0.28);
}

/* ---------- deep-space backdrop (behind everything, fixed) ---------- */
html { background: #04060a; }
body {
  background-color: #04060a;
  background-image:
    radial-gradient(ellipse 90% 480px at 50% -120px, rgba(96, 150, 215, 0.14), transparent 70%),
    radial-gradient(rgba(190, 220, 255, 0.13) 1px, transparent 1.4px),
    radial-gradient(rgba(190, 220, 255, 0.07) 1px, transparent 1.3px),
    linear-gradient(rgba(140, 180, 230, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 180, 230, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, #070b13, #04060a 320px);
  background-size: 100% 100%, 190px 190px, 110px 110px, 100% 54px, 54px 100%, 100% 100%;
  background-position: 0 0, 0 0, 43px 61px, 0 0, 0 0, 0 0;
  background-attachment: fixed;
}

/* ---------- glass chrome: header + tab bar ---------- */
header#app-header {
  background: rgba(7, 11, 18, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: rgba(150, 200, 255, 0.10);
  box-shadow: 0 1px 0 rgba(150, 200, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.35);
}
nav#tabbar {
  background: rgba(10, 14, 22, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.panel {
  background: rgba(13, 17, 25, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* ---------- brand mark: icy glow + slow pulse ---------- */
.brand-logo {
  filter: drop-shadow(0 0 6px rgba(160, 210, 255, 0.35));
  animation: fx-batpulse 4.5s ease-in-out infinite;
}
@keyframes fx-batpulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(160, 210, 255, 0.28)); }
  50% { filter: drop-shadow(0 0 10px rgba(160, 210, 255, 0.50)); }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-name {
    background-image: linear-gradient(180deg, #ffffff, #b9c9da);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .view-head h1 {
    background-image: linear-gradient(180deg, #ffffff, #bcd6ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .login h1 {
    background-image: linear-gradient(180deg, #ffffff, #bcd6ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------- Today launch screen: hairline + quote glow ---------- */
.view-head {
  background-image: linear-gradient(90deg, rgba(140, 200, 255, 0.55), rgba(140, 200, 255, 0.06) 55%, transparent);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
}
.quote { position: relative; z-index: 0; }
.quote::before {
  content: ""; position: absolute; z-index: -1;
  left: -12px; right: -12px; top: -6px; bottom: -6px; border-radius: 12px;
  background: radial-gradient(ellipse 70% 100% at 30% 50%, rgba(110, 170, 235, 0.13), transparent 70%);
  animation: fx-glowpulse 5s ease-in-out infinite;
}
@keyframes fx-glowpulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (min-width: 720px) {
  .quote { font-size: 15px; }
}

/* ---------- progress: glowing fill + shimmer sweep ---------- */
.progress {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(150, 200, 255, 0.06);
}
.progress > div {
  position: relative;
  background: linear-gradient(90deg, #4f9fd8, var(--fx-ice));
  box-shadow: 0 0 10px rgba(140, 205, 255, 0.55), 0 0 2px rgba(170, 220, 255, 0.8);
}
.progress > div::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: fx-shimmer 2.8s ease-in-out infinite;
}
@keyframes fx-shimmer {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* ---------- glassy raised panels ---------- */
.task, .card, .note-card, .archive-item, .quickadd {
  background-image: linear-gradient(180deg, rgba(190, 220, 255, 0.045), rgba(190, 220, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(200, 228, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.28);
}
.upnext {
  border-color: rgba(150, 200, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(200, 228, 255, 0.08), 0 0 22px rgba(110, 175, 240, 0.14), 0 8px 22px rgba(0, 0, 0, 0.28);
}
.desk-clock { color: #dcebf8; text-shadow: 0 0 14px rgba(140, 200, 255, 0.35); }

/* ---------- sections + chips ---------- */
.section-dot { box-shadow: 0 0 6px rgba(200, 225, 255, 0.35); filter: brightness(1.15); }
.section-name { color: #c3d2e2; }
.chip {
  background-image: linear-gradient(180deg, rgba(160, 205, 255, 0.10), rgba(160, 205, 255, 0.03));
  border-color: var(--fx-line);
}
.chip.suggest, .folder-chips .chip.active {
  border-color: rgba(168, 220, 255, 0.6);
  box-shadow: 0 0 10px rgba(140, 200, 255, 0.25);
}

/* ---------- controls: micro-motion + focus glow ---------- */
.btn { transition: background 150ms ease-out, box-shadow 200ms ease-out, transform 120ms ease-out; }
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 0 14px rgba(150, 205, 255, 0.30); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(140, 200, 255, 0.15); }
.toast { box-shadow: 0 0 18px rgba(110, 175, 240, 0.18), 0 10px 28px rgba(0, 0, 0, 0.4); }

/* ---------- login: big glowing bat mark, systems-online energy ---------- */
.login { position: relative; z-index: 0; }
.login::before {
  content: ""; position: absolute; z-index: -1;
  top: -50px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 170, 235, 0.20), transparent 65%);
  animation: fx-glowpulse 5s ease-in-out infinite;
}
.login-logo {
  filter: drop-shadow(0 0 16px rgba(140, 200, 255, 0.45));
  animation: fx-batpulse 4.5s ease-in-out infinite;
}
.login::after {
  content: "● SYSTEMS ONLINE"; display: block; margin-top: 22px;
  font-size: 11px; letter-spacing: 0.35em; color: rgba(150, 200, 240, 0.55);
  animation: fx-glowpulse 3.6s ease-in-out infinite;
}
.login .btn-primary { box-shadow: 0 0 18px rgba(140, 200, 255, 0.35); }

/* ---------- momentum strip + bat-signal payoff (Today view) ---------- */
.momentum {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 2px; padding: 8px 12px;
  border: 1px solid rgba(150, 200, 255, 0.14); border-radius: var(--radius-panel);
  background-image: linear-gradient(180deg, rgba(160, 205, 255, 0.07), rgba(160, 205, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(200, 228, 255, 0.05);
  font-size: 13.5px; color: var(--dim);
}
.momentum .num { color: var(--text); font-weight: 600; }
.momentum-stats { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.momentum-dot { color: var(--faint); }
.momentum-signal {
  border-color: rgba(168, 220, 255, 0.55); color: var(--text);
  box-shadow: 0 0 26px rgba(120, 185, 250, 0.30), inset 0 0 22px rgba(140, 200, 255, 0.10);
  cursor: pointer;
}
.momentum-bat {
  width: 46px; height: auto; flex: 0 0 auto;
  animation: momentum-glow 2.4s ease-in-out infinite;
}
@keyframes momentum-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(160, 215, 255, 0.50)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(170, 222, 255, 0.95)); transform: scale(1.05); }
}
.momentum-line { font-weight: 700; letter-spacing: 0.01em; }

/* ---------- reduced motion: everything rests ---------- */
@media (prefers-reduced-motion: reduce) {
  .brand-logo, .login-logo, .login::before, .login::after,
  .quote::before, .progress > div::after, .momentum-bat { animation: none; }
  .btn { transition: none; }
}