/* =====================================================================
   PAGE ACCENTS — "Quant Terminal" per-page recolour, batch 2.
   Each dashboard page matches its Command Center tile colour (the same
   system as Calorie=green and Workout=blue, which live in their own
   css files). Pitch-black window + token swap so every var(--gold*)
   accent (rail-active, masthead, buttons, rings) recolours for free.
   Scoped with :has([data-page="X"]) so NO other page is touched.

   Base colours come from the single-source --tab-* map in dashboard.css:
     Tasks   gold        Workout blue       Calorie green
     Content purple      Notes   dark orange
     Health  coral       Assistant teal
   ===================================================================== */

/* Desktop Command Center tiles: remap the two tiles whose local vars
   didn't match the canonical map, so the desktop nav == mobile == pages. */
.tile.t-content { --purple: var(--tab-content); }
.tile.t-notes   { --pink:   var(--tab-notes); }

/* ---------- TASKS (gold) — keep the default tokens, just go pitch black ---------- */
body:has([data-page="tasks"]) {
  background:
    radial-gradient(900px 520px at 86% -10%, rgba(212,175,55,0.09), transparent 58%),
    radial-gradient(700px 480px at -8% 112%, rgba(142,115,32,0.06), transparent 55%),
    #000;
}

/* ---------- CONTENT (purple #A55EE6 — more violet, less blue) ---------- */
body:has([data-page="content"]) {
  background:
    radial-gradient(900px 520px at 86% -10%, rgba(165,94,230,0.11), transparent 58%),
    radial-gradient(700px 480px at -8% 112%, rgba(120,56,192,0.07), transparent 55%),
    #000;
}
.app:has([data-page="content"]) {
  --gold:      var(--tab-content);
  --gold-hi:   #C6A0F5;
  --gold-lo:   #7838C0;
  --gold-10:   rgba(165,94,230,0.10);
  --gold-18:   rgba(165,94,230,0.18);
  --gold-30:   rgba(165,94,230,0.30);
  --gold-grad: linear-gradient(135deg,#C6A0F5 0%,#A55EE6 45%,#7838C0 100%);
}
.app:has([data-page="content"]) .page-head.masthead { box-shadow: inset 0 -1px 0 rgba(165,94,230,0.08); }
.app:has([data-page="content"]) .eyebrow .dot { box-shadow: 0 0 10px #A55EE6; }
.app:has([data-page="content"]) .rail-btn.active::before { box-shadow: 0 0 12px rgba(165,94,230,0.6); }
[data-page="content"] .card {
  background: linear-gradient(180deg, rgba(165,94,230,0.05), rgba(255,255,255,0.006));
  border-color: rgba(165,94,230,0.15);
}
[data-page="content"] .mc-day.today { box-shadow: inset 0 0 0 1px rgba(165,94,230,0.5); }
[data-page="content"] .content-summary { border-color: rgba(165,94,230,0.12); }

/* ---------- NOTES (dark orange #D2691E) ---------- */
body:has([data-page="notes"]) {
  background:
    radial-gradient(900px 520px at 86% -10%, rgba(210,105,30,0.11), transparent 58%),
    radial-gradient(700px 480px at -8% 112%, rgba(138,62,16,0.07), transparent 55%),
    #000;
}
.app:has([data-page="notes"]) {
  --gold:      var(--tab-notes);
  --gold-hi:   #EC8A3E;
  --gold-lo:   #8A3E10;
  --gold-10:   rgba(210,105,30,0.10);
  --gold-18:   rgba(210,105,30,0.18);
  --gold-30:   rgba(210,105,30,0.30);
  --gold-grad: linear-gradient(135deg,#EC8A3E 0%,#D2691E 45%,#8A3E10 100%);
}
.app:has([data-page="notes"]) .page-head.masthead { box-shadow: inset 0 -1px 0 rgba(210,105,30,0.08); }
.app:has([data-page="notes"]) .eyebrow .dot { box-shadow: 0 0 10px #D2691E; }
.app:has([data-page="notes"]) .rail-btn.active::before { box-shadow: 0 0 12px rgba(210,105,30,0.6); }
.notes2 .notes2-list { border-color: rgba(210,105,30,0.12); }
.notes2 .notes2-item.active {
  background: rgba(210,105,30,0.08);
  box-shadow: inset 2px 0 0 #D2691E;
}
.notes2 .notes2-new:hover { border-color: rgba(210,105,30,0.45); }

/* ---------- HEALTH (coral #EC6A78) — page already tints per-panel; add black + tokens ---------- */
body:has([data-page="health"]) {
  background:
    radial-gradient(900px 520px at 86% -10%, rgba(236,106,120,0.10), transparent 58%),
    radial-gradient(700px 480px at -8% 112%, rgba(196,68,82,0.07), transparent 55%),
    #000;
}
.app:has([data-page="health"]) {
  --gold:      var(--tab-health);
  --gold-hi:   #FF9AA4;
  --gold-lo:   #C44452;
  --gold-10:   rgba(236,106,120,0.10);
  --gold-18:   rgba(236,106,120,0.18);
  --gold-30:   rgba(236,106,120,0.30);
  --gold-grad: linear-gradient(135deg,#FF9AA4 0%,#EC6A78 45%,#C44452 100%);
}
.app:has([data-page="health"]) .page-head.masthead { box-shadow: inset 0 -1px 0 rgba(236,106,120,0.08); }
.app:has([data-page="health"]) .eyebrow .dot { box-shadow: 0 0 10px #EC6A78; }
.app:has([data-page="health"]) .rail-btn.active::before { box-shadow: 0 0 12px rgba(236,106,120,0.6); }
/* Heart/Sleep switcher thumb FOLLOWS the active view: coral on Heart, blue on Sleep
   (matches each panel's own tint — Heart coral, Sleep periwinkle). */
.hl-page .hl-tabs:has(#hl-tab-heart.on)::before {
  background: linear-gradient(180deg, #FF9AA4, #C9455A);
  box-shadow: 0 4px 14px rgba(236,106,120,.32), inset 0 1px 0 rgba(255,255,255,.32);
}
.hl-page .hl-tabs:has(#hl-tab-sleep.on)::before {
  background: linear-gradient(180deg, #AFC1FF, #5E78E0);
  box-shadow: 0 4px 14px rgba(120,150,255,.32), inset 0 1px 0 rgba(255,255,255,.32);
}
.hl-page .hl-tabs:has(#hl-tab-heart.on) .hl-tab.on { color: #2a0d12; }
.hl-page .hl-tabs:has(#hl-tab-sleep.on) .hl-tab.on { color: #0a1030; }

/* ---------- ASSISTANT (teal #2FB6C4) ---------- */
/* assistant.jsx uses var(--gold*) for its bubbles/mic/send, so the token
   swap below recolours the whole chat. */
body:has([data-page="assistant"]) {
  background:
    radial-gradient(900px 520px at 86% -10%, rgba(47,182,196,0.11), transparent 58%),
    radial-gradient(700px 480px at -8% 112%, rgba(28,126,138,0.07), transparent 55%),
    #000;
}
.app:has([data-page="assistant"]) {
  --gold:      var(--tab-assistant);
  --gold-hi:   #5FD8E4;
  --gold-lo:   #1C7E8A;
  --gold-10:   rgba(47,182,196,0.10);
  --gold-18:   rgba(47,182,196,0.18);
  --gold-30:   rgba(47,182,196,0.30);
  --gold-grad: linear-gradient(135deg,#5FD8E4 0%,#2FB6C4 45%,#1C7E8A 100%);
}
.app:has([data-page="assistant"]) .page-head.masthead { box-shadow: inset 0 -1px 0 rgba(47,182,196,0.08); }
.app:has([data-page="assistant"]) .eyebrow .dot { box-shadow: 0 0 10px #2FB6C4; }
.app:has([data-page="assistant"]) .rail-btn.active::before { box-shadow: 0 0 12px rgba(47,182,196,0.6); }
/* Desktop Command Center Assistant tile: was clay → teal to match the page + mobile */
.tile.t-claude { --clay: var(--tab-assistant); }
.qcc .t-claude .claude-av {
  background: radial-gradient(circle at 35% 30%, #7FE3EE, var(--tab-assistant));
  box-shadow: 0 0 22px rgba(47,182,196,0.35);
  color: #06303a;
}
.qcc .t-claude:hover .claude-av { box-shadow: 0 0 30px rgba(47,182,196,0.55); }