/* ============================================================
   HQ 2.0 — futuristic visual system
   Same features, new skin. Every functional selector from HQ 1
   (tracker stickies, rule colors, layout primitives, overlays)
   is preserved — only the look changed.
   ============================================================ */

:root {
  --accent:   #6d63ff;
  --accent2:  #22d3ee;
  --accent3:  #a78bfa;
  --glow:     rgba(109, 99, 255, .35);
  --glow-soft:rgba(109, 99, 255, .16);
  --ink:      #e2e8f0;
  --grad-btn: linear-gradient(135deg, #7c5cfc 0%, #5b6cff 55%, #4f8cff 110%);
  --grad-line:linear-gradient(90deg, transparent, rgba(124,92,252,.55), rgba(34,211,238,.45), transparent);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv11';
  /* deep-space backdrop glows (sit under the Tailwind bg color via background-image) */
  background-image:
    radial-gradient(1100px 600px at 85% -10%, rgba(109, 99, 255, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(34, 211, 238, .06), transparent 60%);
  background-attachment: fixed;
}
::selection { background: rgba(109, 99, 255, .45); color: #fff; }

/* Display type for headings + larger text */
#view .text-2xl, #view .text-xl, #view .text-lg,
#view h1, #view h2, #view h3, .brand-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.015em;
}
#topbar-date { font-variant-numeric: tabular-nums; }

/* ---------- Ambient background FX ---------- */
#bgfx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#bgfx .aurora { position: absolute; border-radius: 50%; will-change: transform; }
#bgfx .a1 {
  width: 55vw; height: 55vw; top: -22vw; right: -12vw;
  background: radial-gradient(circle at center, rgba(109,99,255,.16), transparent 65%);
  animation: hq2Drift1 46s ease-in-out infinite alternate;
}
#bgfx .a2 {
  width: 48vw; height: 48vw; bottom: -20vw; left: -14vw;
  background: radial-gradient(circle at center, rgba(34,211,238,.10), transparent 65%);
  animation: hq2Drift2 58s ease-in-out infinite alternate;
}
#bgfx .a3 {
  width: 34vw; height: 34vw; top: 38%; left: 42%;
  background: radial-gradient(circle at center, rgba(167,139,250,.07), transparent 65%);
  animation: hq2Drift3 70s ease-in-out infinite alternate;
}
#bgfx .bg-grid {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(120, 140, 220, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 140, 220, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
}
@keyframes hq2Drift1 { from { transform: translate(0, 0) scale(1); }   to { transform: translate(-6vw, 5vw) scale(1.12); } }
@keyframes hq2Drift2 { from { transform: translate(0, 0) scale(1); }   to { transform: translate(5vw, -4vw) scale(1.08); } }
@keyframes hq2Drift3 { from { transform: translate(0, 0) scale(1); }   to { transform: translate(-4vw, -5vw) scale(1.18); } }

/* ---------- Chrome: sidebar / top bar / bottom nav (glass) ---------- */
#sidebar {
  background-color: rgba(7, 12, 26, .68);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
#topbar {
  background-color: rgba(7, 12, 26, .62);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
#topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--grad-line);
}
#bottom-nav {
  background-color: rgba(7, 12, 26, .8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Brand */
#brand-logo {
  background-image: linear-gradient(135deg, #7c5cfc, #22d3ee);
  box-shadow: 0 0 16px rgba(109, 99, 255, .45);
  animation: hq2BrandPulse 5s ease-in-out infinite;
}
@keyframes hq2BrandPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(109, 99, 255, .35); }
  50%      { box-shadow: 0 0 24px rgba(109, 99, 255, .6), 0 0 36px rgba(34, 211, 238, .18); }
}
.brand-badge {
  background: linear-gradient(90deg, var(--accent3), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 11px; font-weight: 800; vertical-align: super; letter-spacing: .03em;
}

/* ---------- Nav items ---------- */
.nav-item { position: relative; border-radius: 10px; }
.nav-item svg { transition: transform .2s var(--ease-out); }
.nav-item:hover { transform: translateX(3px); }
.nav-item:hover svg { transform: scale(1.18) rotate(-4deg); }
.nav-item.bg-accent {
  background-image: var(--grad-btn);
  box-shadow: 0 4px 18px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.nav-item.bg-accent::before {
  content: ''; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 3px;
  border-radius: 3px; background: linear-gradient(180deg, var(--accent3), var(--accent2));
  box-shadow: 0 0 8px var(--glow);
}

/* ---------- Cards (every Tailwind bg-card surface) ---------- */
#view .bg-card, #claude-usage .bg-card {
  background-color: rgba(11, 18, 38, .72);
  background-image: linear-gradient(160deg, rgba(124, 92, 252, .055) 0%, transparent 38%);
  border-color: rgba(46, 64, 110, .55);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: transform .18s var(--ease-out), box-shadow .22s ease, border-color .22s ease, background-color .15s ease;
}
/* hover-lift only on true card containers (not selects/inputs that reuse bg-card) */
#view .bg-card.rounded-xl:hover, #view .bg-card.rounded-2xl:hover {
  transform: translateY(-2px);
  border-color: rgba(109, 99, 255, .4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42), 0 0 0 1px rgba(109, 99, 255, .12), 0 0 24px rgba(109, 99, 255, .07);
}
body .rounded-xl { border-radius: 0.9rem; }
body .rounded-2xl { border-radius: 1.15rem; }

/* legacy .card class */
.card { transition: background-color .15s ease, box-shadow .2s ease, transform .15s var(--ease-out); }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .38), 0 0 18px rgba(109, 99, 255, .08); }

/* ---------- Buttons / accent surfaces ---------- */
.bg-accent {
  background-image: var(--grad-btn);
  box-shadow: 0 2px 14px var(--glow-soft), inset 0 1px 0 rgba(255, 255, 255, .15);
}
button.bg-accent:hover, a.bg-accent:hover { filter: brightness(1.12); box-shadow: 0 4px 20px var(--glow); }
.text-accent { text-shadow: 0 0 14px rgba(109, 99, 255, .35); }

button, .btn, .nav-item, .field, input, select, textarea, a, .thread-item, .stat-drop-wrap {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .18s ease, opacity .15s ease, transform .12s var(--ease-out), filter .15s ease;
}
button { font-family: inherit; }
.btn:active, button:active { transform: translateY(1px) scale(.98); }

/* Glowing focus */
.field:focus, input:not(.trk-input):focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow-soft);
  outline: none;
}

/* ---------- View / element entrance animations ---------- */
@keyframes hqFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hq2Rise { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }
.view-enter { animation: hqFade .22s var(--ease-out); }
.view-enter .v-scroll > * { animation: hq2Rise .38s var(--ease-out) both; animation-delay: .03s; }
.view-enter .v-scroll > *:nth-child(2) { animation-delay: .07s; }
.view-enter .v-scroll > *:nth-child(3) { animation-delay: .11s; }
.view-enter .v-scroll > *:nth-child(4) { animation-delay: .15s; }
.view-enter .v-scroll > *:nth-child(5) { animation-delay: .19s; }
.view-enter .v-scroll > *:nth-child(6) { animation-delay: .23s; }
.view-enter .v-scroll > *:nth-child(7) { animation-delay: .26s; }
.view-enter .v-scroll > *:nth-child(8) { animation-delay: .29s; }

/* Overlays: blurred backdrop + pop-in panel */
@keyframes hqOverlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes hq2Pop { from { opacity: 0; transform: translateY(10px) scale(.965); } to { opacity: 1; transform: none; } }
[id$="-overlay"] {
  animation: hqOverlay .16s ease;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
[id$="-overlay"] > div { animation: hq2Pop .24s var(--ease-out); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- iPhone safe area for bottom nav ---------- */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* ---------- Tracker spreadsheet (functional rules preserved, re-skinned) ---------- */
.trk-wrap   { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; }
.trk-table  { border-collapse:collapse; font-size:12px; }
.trk-table th, .trk-table td { border:1px solid #1c2949; padding:0; white-space:nowrap; }
.trk-table thead th { position:sticky; top:0; z-index:3; background:#0a1124; color:#8fa3c4; font-weight:600; text-align:center; padding:6px 8px; letter-spacing:.02em; }
.trk-table td { background:#060b18; color:#e2e8f0; text-align:center; height:32px; min-width:40px; }
.trk-table tbody tr:hover td { background:#101b36; }
.trk-table td.sticky-col { position:sticky; z-index:1; background:#060b18; }
.trk-table thead th.sticky-col { z-index:4; background:#0a1124; }
.trk-table tbody tr:hover td.sticky-col { background:#101b36; }
.trk-cell   { width:100%; height:100%; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0 6px; min-height:32px; }
.trk-cell:hover { background:rgba(109,99,255,.14); }
.trk-chk    { width:15px; height:15px; cursor:pointer; accent-color:#6d63ff; }
.trk-input  { width:100%; height:100%; background:transparent; border:none; outline:2px solid #6d63ff; color:#e2e8f0; text-align:center; font-size:12px; padding:0 4px; }
.trk-today  td { background:#0d1730 !important; }
/* Trailing-summary rows (7d / 30d / all-time) pinned under the grid: distinct muted
   band, sticky first cols match, accent divider above the block. */
.trk-table tr.trk-sum td { background:#0b1326 !important; color:#c7d2fe; font-weight:600; height:30px; }
.trk-table tr.trk-sum td.sticky-col { background:#0b1326 !important; }
.trk-table tr.trk-sum.trk-sum-first td { border-top:2px solid #6d63ff; }
.trk-table tr.trk-sum .trk-sum-cell { padding:0 6px; }
/* Rule colors are scoped under `.trk-table td` so they out-specify `.trk-today td`
   (both use !important) — otherwise the current/just-added day's row background
   would mask the per-cell highlighting. Blank cells still show the today tint. */
.trk-table td.trk-color-teal   { background:#0d9488 !important; color:#fff !important; }
.trk-table td.trk-color-orange { background:#f59e0b !important; color:#000 !important; }
.trk-table td.trk-color-green  { background:#10b981 !important; color:#fff !important; }
.trk-table td.trk-color-red    { background:#dc2626 !important; color:#fff !important; }
.trk-table td.trk-color-dyellow{ background:#a16207 !important; color:#fff !important; }
/* N/A cell: disregarded for the day's grade. Muted, no rule color. */
.trk-table td.trk-na .trk-cell { color:#475569; font-size:10px; font-style:italic; }
.trk-table td.trk-na .trk-cell:hover { background:rgba(109,99,255,.14); color:#94a3b8; }
/* Hover-reveal "×" to mark any cell N/A (top-right corner). */
.trk-na-btn { position:absolute; top:0; right:1px; z-index:2; line-height:1; padding:1px 2px;
  font-size:11px; color:#64748b; background:none; border:none; cursor:pointer; opacity:0; }
.trk-table td:hover .trk-na-btn { opacity:.65; }
.trk-na-btn:hover { opacity:1; color:#f87171; }

/* To-do category drag-and-drop drop indicator */
.cat-dragover { box-shadow: inset 0 2px 0 0 var(--accent2), 0 0 12px var(--glow-soft); }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #34406e, #2a3560);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #50509e, #3d4b8c); }

/* Tracker gets a big, easy-to-grab horizontal scrollbar at the bottom */
.trk-wrap::-webkit-scrollbar { height: 16px; width: 12px; }
.trk-wrap::-webkit-scrollbar-track { background: #080e1f; border-radius: 8px; }
.trk-wrap::-webkit-scrollbar-thumb { background: #3a4a80; border-radius: 8px; border: 3px solid #080e1f; }
.trk-wrap::-webkit-scrollbar-thumb:hover { background: #5468b0; }

/* ---------- Layout primitives (unchanged — features depend on these) ---------- */
#view                { position:relative; flex:1; overflow:hidden; z-index:1; }
.v-abs               { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; flex-direction:column; overflow:hidden; }
.v-row               { display:flex; flex:1; overflow:hidden; }
.v-col               { display:flex; flex-direction:column; overflow:hidden; }
.v-scroll            { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.v-shrink            { flex-shrink:0; }

/* ---------- Email iframe wrapper ---------- */

/* ---------- Textarea / input base ---------- */
.field {
  background: rgba(9, 15, 32, .8);
  border: 1px solid #20305a;
  border-radius: 10px;
  color: #e2e8f0;
  outline: none;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
}
.field:focus { border-color: var(--accent); }
.field::placeholder { color: #44537a; }

/* Note editor */
#note-editor {
  font-size: 14px;
  line-height: 1.7;
  resize: none;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

/* ---------- Priority badges ---------- */
.badge-immediate { background: #ef4444; color: #fff; border: 1px solid #ef4444; font-weight: 600; box-shadow: 0 0 12px rgba(239,68,68,.35); }
.badge-high   { background: rgba(239,68,68,.14);  color: #f87171; border: 1px solid rgba(239,68,68,.35); }
.badge-medium { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.32); }
.badge-low    { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.32); }
.badge-backburner { background: rgba(100,116,139,.12); color: #94a3b8; border: 1px solid rgba(100,116,139,.3); }

/* Unread dot */
.unread-dot { width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--accent3),var(--accent2)); box-shadow:0 0 8px var(--glow); flex-shrink:0; }

/* Loading spinner — conic glow ring */
.spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(#0b1226, #0b1226) padding-box,
    conic-gradient(from 0deg, transparent 10%, var(--accent3), var(--accent2)) border-box;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Topbar weather city picker ---------- */
/* #topbar-weather carries Tailwind's `truncate` (overflow:hidden), which clips the
   absolutely-positioned dropdown — and the chip itself — out of view. The id beats
   the utility class, so re-open it here and keep nowrap (truncate's other job). */
#topbar-weather { overflow: visible; white-space: nowrap; }
.wx-wrap { position: relative; display: inline-flex; }
.wx-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 7px; cursor: pointer;
  font-size: 12px; font-weight: 500; color: #64748b;
  border: 1px solid transparent; background: transparent; line-height: 1.5;
}
.wx-btn:hover { color: #cbd5e1; background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .16); }
.wx-btn-open {
  color: #fff; background: rgba(109, 99, 255, .16);
  border-color: rgba(109, 99, 255, .45); box-shadow: 0 0 12px var(--glow-soft);
}
.wx-btn svg { width: 11px; height: 11px; opacity: .8; }
.wx-drop {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  z-index: 60; display: block; width: 190px; overflow: hidden;
  border-radius: 12px; border: 1px solid rgba(148, 163, 184, .16);
  background:
    radial-gradient(120% 100% at 50% -40%, rgba(109, 99, 255, .18), transparent 62%),
    linear-gradient(#0b1226f7, #070c1af7);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .05),
              0 0 26px var(--glow-soft);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  animation: hq2Pop .18s var(--ease-out);
}
.wx-drop-head { display: block; padding: 9px 11px 8px; border-bottom: 1px solid rgba(148, 163, 184, .12); }
.wx-drop-title {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b;
}
.wx-drop-sun {
  display: flex; gap: 10px; margin-top: 4px;
  font-size: 12px; color: #cbd5e1; font-variant-numeric: tabular-nums;
}
.wx-opt {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 11px; cursor: pointer; text-align: left;
  font-size: 12.5px; color: #94a3b8; background: transparent; border: 0;
}
.wx-opt:hover { color: #fff; background: rgba(109, 99, 255, .14); }
.wx-opt-on { color: #fff; font-weight: 600; }
.wx-tick { width: 10px; flex: none; color: var(--accent3); font-size: 11px; }

/* ---------- Confirm dialog (hqConfirm — replaces window.confirm) ---------- */
/* Backdrop blur + panel pop-in are inherited from the [id$="-overlay"] rules above. */
#hqconfirm-overlay {
  position: fixed; inset: 0; z-index: 200; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, .62);
}
.hqc-panel {
  position: relative; width: 100%; max-width: 430px; overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, .14);
  background:
    radial-gradient(120% 100% at 50% -30%, rgba(109, 99, 255, .16), transparent 62%),
    linear-gradient(#0b1226f2, #070c1af2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05),
              0 0 40px var(--glow-soft);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.hqc-panel.hqc-danger {
  background:
    radial-gradient(120% 100% at 50% -30%, rgba(244, 63, 94, .17), transparent 62%),
    linear-gradient(#0b1226f2, #070c1af2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05),
              0 0 40px rgba(244, 63, 94, .12);
}
.hqc-glowline { height: 1px; background: var(--grad-line); }
.hqc-panel.hqc-danger .hqc-glowline {
  background: linear-gradient(90deg, transparent, rgba(244, 63, 94, .7), rgba(251, 146, 60, .45), transparent);
}
.hqc-body { display: flex; gap: 14px; padding: 22px 22px 4px; }
.hqc-icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #c4b5fd;
  background: linear-gradient(135deg, rgba(109, 99, 255, .24), rgba(109, 99, 255, .06));
  border: 1px solid rgba(109, 99, 255, .3);
  box-shadow: 0 0 18px var(--glow-soft);
}
.hqc-panel.hqc-danger .hqc-icon {
  color: #fda4af;
  background: linear-gradient(135deg, rgba(244, 63, 94, .22), rgba(244, 63, 94, .06));
  border-color: rgba(244, 63, 94, .28);
  box-shadow: 0 0 18px rgba(244, 63, 94, .18);
}
.hqc-icon svg { width: 20px; height: 20px; }
.hqc-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -.01em; margin: 3px 0 0;
}
.hqc-text { margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: #8fa3c4; }
.hqc-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 22px 20px; }
.hqc-btn {
  font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 10px;
  cursor: pointer; border: 1px solid transparent;
}
.hqc-cancel { color: #94a3b8; border-color: rgba(148, 163, 184, .18); background: rgba(148, 163, 184, .05); }
.hqc-cancel:hover { color: #fff; border-color: rgba(148, 163, 184, .35); background: rgba(148, 163, 184, .12); }
.hqc-go {
  color: #fff; background-image: var(--grad-btn);
  box-shadow: 0 6px 18px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.hqc-panel.hqc-danger .hqc-go {
  background-image: linear-gradient(135deg, #fb7185 0%, #f43f5e 55%, #e11d48 110%);
  box-shadow: 0 6px 18px rgba(244, 63, 94, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.hqc-go:hover { filter: brightness(1.1); box-shadow: 0 8px 24px rgba(244, 63, 94, .5); }
.hqc-panel:not(.hqc-danger) .hqc-go:hover { box-shadow: 0 8px 24px var(--glow); }
.hqc-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .6); outline-offset: 2px; }

/* Compose overlay */
#compose-overlay {
  position: fixed; inset: 0; background: rgba(2, 4, 10, .65);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}