/* Shared tokens, nav, and buttons across all pages. Colors are pulled
   straight from the iOS app's CardieTheme.swift so the website actually
   matches the app's real brand instead of a separate invented palette. */
/* Bright/colorful palette is the default look. "Dark Mode" (toggled via
   the nav button on every page, persisted in localStorage) swaps to the
   values below. Same token names either way, so every component restyles
   for free. */
:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --card: #e3ecf7;
  --card-elevated: #d3e2f3;
  --ink: #1b2536;
  --ink-dim: rgba(27, 37, 54, 0.65);
  --accent: #4d7fe0;
  --teal: #14b8a6;
  --honey: #ff9f1c;
  --honey-light: #ffc861;
  --honey-ink: #3a1f00;
  --honey-pale: #fff6d8;
  --border: rgba(27, 37, 54, 0.14);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10151f;
  --card: #1a2230;
  --card-elevated: #222c3e;
  --ink: #eef2f8;
  --ink-dim: rgba(238, 242, 248, 0.62);
  --accent: #7fa8ff;
  --teal: #6bb3ad;
  --honey: #f2bf59;
  --honey-light: #ffd27a;
  --honey-ink: #2b1c05;
  --honey-pale: #fff6d8;
  --border: rgba(255, 255, 255, 0.1);
}

/* --- Theme families (Appearance card, dashboard) --- */
/* Blue is the bare :root above/its dark variant above — the default look
   new users start on. Each family below only overrides the tokens that
   actually vary by family (background/card/ink/accent/border) — honey and
   teal stay constant across every family. */
:root[data-family="lilac"] {
  --bg: #fdf6ff;
  --card: #f3e4ff;
  --card-elevated: #ead2ff;
  --ink: #2b1b3d;
  --ink-dim: rgba(43, 27, 61, 0.65);
  --accent: #b34bff;
  --border: rgba(43, 27, 61, 0.14);
}
:root[data-family="lilac"][data-theme="dark"] {
  --bg: #121214;
  --card: #1c1c22;
  --card-elevated: #24242b;
  --ink: #f5f3ee;
  --ink-dim: rgba(245, 243, 238, 0.62);
  --accent: #d9b8f0;
  --border: rgba(255, 255, 255, 0.1);
}

:root[data-family="pink"] {
  --bg: #fff5f7;
  --card: #ffe3ea;
  --card-elevated: #ffd2dd;
  --ink: #3d1b26;
  --ink-dim: rgba(61, 27, 38, 0.65);
  --accent: #e0447e;
  --border: rgba(61, 27, 38, 0.14);
}
:root[data-family="pink"][data-theme="dark"] {
  --bg: #1a1216;
  --card: #241a1f;
  --card-elevated: #2e2129;
  --ink: #f8ecef;
  --ink-dim: rgba(248, 236, 239, 0.62);
  --accent: #ff8fb3;
  --border: rgba(255, 255, 255, 0.1);
}

:root[data-family="gray"] {
  --bg: #f7f7f8;
  --card: #eceeef;
  --card-elevated: #e2e4e6;
  --ink: #202224;
  --ink-dim: rgba(32, 34, 36, 0.65);
  --accent: #5b6168;
  --border: rgba(32, 34, 36, 0.14);
}
:root[data-family="gray"][data-theme="dark"] {
  --bg: #131415;
  --card: #1c1d1f;
  --card-elevated: #242628;
  --ink: #f0f1f2;
  --ink-dim: rgba(240, 241, 242, 0.62);
  --accent: #a7acb3;
  --border: rgba(255, 255, 255, 0.1);
}

/* Low Stim — pure black/white, no color tint anywhere, including honey
   (its counter is hidden outside the dashboard entirely — see each
   page's applyThemeFamily). */
:root[data-family="mono"] {
  --bg: #f4f4f4;
  --card: #f0f0f0;
  --card-elevated: #e2e2e2;
  --ink: #000000;
  --ink-dim: rgba(0, 0, 0, 0.6);
  --accent: #000000;
  --teal: #000000;
  --honey: #000000;
  --honey-light: #333333;
  --honey-ink: #ffffff;
  --honey-pale: #e2e2e2;
  --border: rgba(0, 0, 0, 0.16);
}
:root[data-family="mono"][data-theme="dark"] {
  --bg: #000000;
  --card: #141414;
  --card-elevated: #202020;
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.62);
  --accent: #ffffff;
  --teal: #ffffff;
  --honey: #ffffff;
  --honey-light: #cccccc;
  --honey-ink: #000000;
  --honey-pale: #202020;
  --border: rgba(255, 255, 255, 0.16);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
a { color: inherit; }

/* --- Nav --- */
.site-nav {
  width: 100%;
  max-width: 1040px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 0;
}
.site-nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.site-nav .brand img {
  height: 30px;
  width: auto;
  display: block;
  /* The logo art is white-on-transparent, invisible on the default light
     background — flip it dark instead of needing a second logo asset. */
  filter: invert(1);
}
:root[data-theme="dark"] .site-nav .brand img {
  filter: none;
}
.site-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
}
.site-nav .nav-link {
  color: var(--ink-dim);
  text-decoration: none;
  padding: 8px 6px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-nav .nav-link:hover { color: var(--ink); }
@media (max-width: 480px) {
  .site-nav { gap: 8px; padding: 16px 16px 0; }
  .site-nav .nav-right { gap: 6px; font-size: 13px; }
  .site-nav .nav-corner { gap: 6px; }
  .site-nav .nav-link { font-size: 13px; padding: 6px 4px; }
  .site-nav .pill, .site-nav .btn-ghost { font-size: 12px; padding: 6px 10px; white-space: nowrap; flex-shrink: 0; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 22px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  gap: 8px;
  line-height: 1;
}
.btn-primary {
  background: linear-gradient(135deg, var(--honey-light), var(--honey));
  color: var(--honey-ink);
  box-shadow: 0 8px 20px -8px rgba(242, 191, 89, 0.5);
}
.btn-primary:not(:disabled):hover { filter: brightness(1.05); }
.btn-primary:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.btn-outline {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--accent); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  white-space: nowrap;
}
.pill:hover { border-color: var(--accent); color: var(--ink); }

.btn-ghost {
  background: none;
  color: var(--ink-dim);
  border: 1px solid var(--border);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--accent); }

.honey-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 700;
  color: var(--honey-ink);
  background: var(--honey-pale);
  border: none;
}
.honey-pill .honey-amount { font-weight: 700; transition: transform 0.2s ease; }
.honey-pill.bump .honey-amount { transform: scale(1.2); }
.honey-emoji { font-size: 15px; line-height: 1; }
.honey-chevron { opacity: 0.45; font-weight: 700; margin-left: -1px; }

/* Top-right corner group: honey pill sits just left of the Light/Dark
   toggle, both pinned to the far right of the nav regardless of how
   long the middle nav-right group (links, account pill) grows. */
.nav-corner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* --- Shared icon set (see icons.mjs) --- */
.icon-svg {
  flex-shrink: 0;
  color: currentColor;
  vertical-align: -3px;
}
.icon-btn-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.icon-btn-svg:hover { color: var(--ink); }
.icon-btn-svg.danger:hover { color: #ff9b9b; }

/* Gentle, quiet motion for milestones/sprint-complete — replaces emoji
   "celebration" with a soft fade+rise instead of confetti/fireworks. */
@keyframes gentle-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.gentle-in { animation: gentle-rise 0.4s ease both; }

.fun-toggle {
  background: rgba(43, 27, 61, 0.06);
  color: var(--ink-dim);
}
:root[data-theme="dark"] .fun-toggle {
  background: rgba(255, 255, 255, 0.05);
}

/* --- Footer --- */
.site-footer {
  width: 100%;
  max-width: 1040px;
  margin-top: auto;
  padding: 48px 24px 44px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-dim);
}
.site-footer a {
  color: var(--ink-dim);
  text-decoration: underline;
}
.site-footer a:hover { color: var(--ink); }
.site-footer .footer-links { margin-top: 6px; }
.site-footer .footer-contact { margin-top: 4px; font-size: 12px; }

/* ===================================================================
   Accessibility engine — driven by attributes on <html>, set from the
   dashboard's Accessibility panel and persisted per-account (see
   fetchAccessibilityPrefs/saveAccessibilityPref in firebase-init.js).
   Each control here is a real, independent opt-in; none of them are
   bundled together, since different people need different combinations
   (a low-vision reader wants larger text but not necessarily reduced
   motion; someone with vestibular sensitivity wants reduced motion but
   not larger text, etc).
   =================================================================== */

/* --- Reduce motion (WCAG 2.3.3) --- the standard recipe: collapse every
   animation/transition to effectively instant rather than removing them
   outright, so state changes (a flipped card, a closed panel) still
   land in the right end state without the motion itself. Respects the
   OS-level prefers-reduced-motion signal as the default even before a
   signed-in preference loads (see each page's inline head script). */
:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *::before,
:root[data-reduce-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* --- Larger text --- scales the whole page, the same way native browser
   zoom does, rather than only the elements that happen to use rem units
   (this site's font-sizes are mostly fixed px, inherited from the iOS
   app's own type scale, so a root-font-size trick alone wouldn't reach
   most text). */
:root[data-font-size="large"] body { zoom: 1.15; }
:root[data-font-size="xlarge"] body { zoom: 1.3; }

/* --- Text spacing (WCAG 1.4.12 minimums) --- line/letter/word spacing
   floors that measurably help dyslexic and low-vision readers track a
   line of text. */
:root[data-text-spacing="true"] body {
  line-height: 1.5 !important;
}
:root[data-text-spacing="true"] p,
:root[data-text-spacing="true"] .content,
:root[data-text-spacing="true"] li {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

/* --- Dyslexia-friendly font --- Atkinson Hyperlegible (Braille
   Institute): designed and tested for letterform distinction rather than
   a decorative "dyslexia font," with research behind its legibility
   gains for a broader group of readers, not just dyslexic ones. Loaded
   only when this attribute is present (see each page's <head>). */
:root[data-dyslexia-font="true"] body {
  font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
:root[data-dyslexia-font="true"] input,
:root[data-dyslexia-font="true"] textarea,
:root[data-dyslexia-font="true"] button,
:root[data-dyslexia-font="true"] select {
  font-family: inherit;
}

/* --- Larger tap targets (WCAG 2.5.5/2.5.8) --- icon-only buttons in
   particular (.icon-btn-svg) sit right at the AA floor by default;
   this pushes every interactive control comfortably past it for anyone
   whose fine-motor control or impulsivity makes small, closely-packed
   targets error-prone. */
:root[data-large-targets="true"] .icon-btn-svg {
  padding: 10px;
  min-width: 40px;
  min-height: 40px;
}
:root[data-large-targets="true"] .btn {
  padding: 16px 26px;
  min-height: 48px;
}
:root[data-large-targets="true"] .pill,
:root[data-large-targets="true"] .btn-ghost {
  padding: 11px 18px;
  min-height: 40px;
}
:root[data-large-targets="true"] .nav-link {
  padding: 12px 10px;
}

/* --- Hide the fidget toy --- opt-out for anyone who finds it more
   distracting than regulating (see /dump's fidget-toy and fidget-hint). */
:root[data-hide-fidget="true"] .fidget-toy,
:root[data-hide-fidget="true"] .fidget-hint {
  display: none !important;
}