/* ============================================================
   AuDHD Life Pro — global theme system
   Three themes, switched by data-theme attribute on <html>:
   "blush" (default) · "neutral" (low-sensory) · "dark"
   Every color in the app comes from these variables — modules
   and charts must never hardcode hex values.
   ============================================================ */

/* ---------- Fonts (self-hosted since v1.0.14) ----------
   Served from the app's own folder and precached, so they work offline and
   no request ever goes to Google. Same files Google Fonts serves (v17).
   DM Sans is a variable font: one file covers weights 400–600.
   Licences: assets/fonts/OFL-*.txt (SIL Open Font License 1.1). */
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/dm-serif-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/dm-serif-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Atkinson Hyperlegible (A7, v2.3.0) — the "Easier reading" font, by the
   Braille Institute. Only downloaded when chosen; precached for offline.
   Licence: assets/fonts/OFL-atkinson-hyperlegible.txt (SIL OFL 1.1). */
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/atkinson-hyperlegible-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/atkinson-hyperlegible-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/atkinson-hyperlegible-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/atkinson-hyperlegible-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root,
:root[data-theme="blush"] {
  --bg-main: #FAF7F5;
  --bg-secondary: #F6EEEB;
  --bg-card: #FFFDFC;
  --bg-card-elevated: #F8F0EE;
  --text-primary: #2F2F2F;
  --text-secondary: #6F6560;
  --text-muted: #746B66;
  --border: #E8DDD9;
  --divider: #DDD1CD;
  --accent: #EFD6D2;
  --accent-hover: #96655D;
  --accent-light: #F7E8E5;
  --accent-text: #7A5E59;
  --accent2: #BFCABF;
  --accent2-hover: #7E927F;
  --accent2-light: #EEF3EF;
  --accent2-text: #5F705F;
  --success: #7B8F7C;
  --warning: #A9805F;
  --warning-text: #7F6146;   /* AA text on any surface; --warning is for fills/borders */
  --error: #9E5F53;
  --error-text: #8A5A50;
  --info: #8C6F7B;           /* dusty mauve — stays in the rose/sage family */
  --on-accent: #6B4F4A;      /* readable text on accent fills */
  --on-dark: #FFFFFF;
  /* Chart series — the blush pastel set. Segments are separated by a
     background-coloured gap, never an outline. */
  --chart-1: #9DB5A0;   /* sage */
  --chart-2: #F0D6D3;   /* blush pink, pale */
  --chart-3: #C4D3C7;   /* sage, light */
  --chart-4: #E3B189;   /* apricot */
  --chart-5: #D5A29C;   /* dusty rose */
  --chart-6: #CBB2AE;   /* soft taupe-rose */
  /* Status tones for risk/level charts — drawn from the same set. */
  --chart-good: #9DB5A0;
  --chart-caution: #E3B189;
  --chart-alert: #D5A29C;
  --scrollbar-track: #F1E7E3;
  --scrollbar-thumb: #C9B8B3;
  --check-fill: #677A68;       /* ticked checkbox — white ✓ at 4.6:1 */
  --shadow: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lift: 0 6px 18px rgba(0,0,0,0.07);
}

:root[data-theme="neutral"] {
  --bg-main: #F6F5F3;
  --bg-secondary: #EFEEEB;
  --bg-card: #FFFFFF;
  --bg-card-elevated: #F4F3F1;
  --text-primary: #2E3135;
  --text-secondary: #62686F;
  --text-muted: #666C73;
  --border: #E4E7EA;
  --divider: #DDE0E3;
  --accent: #5A7288;
  --accent-hover: #487197;
  --accent-light: #E9EEF3;
  --accent-text: #3D5A75;
  --accent2: #7D9482;
  --accent2-hover: #62795F;
  --accent2-light: #EAF0EB;
  --accent2-text: #4C6350;
  --success: #7C9381;
  --warning: #97865E;
  --warning-text: #766B53;
  --error: #906D6D;
  --error-text: #855E5E;
  --info: #7A8FA3;
  --on-accent: #FFFFFF;
  --on-dark: #FFFFFF;
  /* Chart series — only this theme's own slate-blue + sage-green hues,
     alternating light→deep. All ≥3:1 on every surface. */
  --chart-1: #72879B;   /* blue, light */
  --chart-2: #748B79;   /* green, light */
  --chart-3: #487197;   /* blue, deep (= accent-hover) */
  --chart-4: #62795F;   /* green, deep (= accent2-hover) */
  --chart-5: #3D5A75;   /* blue, deepest (= accent-text) */
  --chart-6: #4C6350;   /* green, deepest (= accent2-text) */
  /* Risk ramp darkened in v1.0.13 to clear 3:1 on every Neutral surface
     (was #9FB6A4 / #D3C39B / #C99E9E at 1.6–2.4:1). Same hues. */
  --chart-good: #719378;
  --chart-caution: #A28847;
  --chart-alert: #B67C7C;
  --scrollbar-track: #E7E6E3;
  --scrollbar-thumb: #BCC1C6;
  --check-fill: #667B6A;       /* ticked checkbox — white ✓ at 4.6:1 */
  --shadow: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lift: 0 6px 18px rgba(0,0,0,0.07);
}

:root[data-theme="dark"] {
  --bg-main: #1A1B1D;
  --bg-secondary: #222426;
  --bg-card: #36383B;
  --bg-card-elevated: #3E4044;
  --text-primary: #FFFFFF;
  --text-secondary: #FCFBF8;
  --text-muted: #DBD8D3;
  --border: #45474B;
  --divider: #4C4E52;
  --accent: #8E9B84;
  --accent-hover: #A3AE99;
  --accent-light: #394137;
  --accent-text: #DFE5D9;
  --accent2: #8294A8;
  --accent2-hover: #97A7B9;
  --accent2-light: #333B44;
  --accent2-text: #D6DFE8;
  --success: #8FA784;
  --warning: #C5A37A;
  --warning-text: #CBA87E;
  --error: #C07A6B;
  --error-text: #EA9583;
  --info: #8294A8;
  --on-accent: #1A1B1D;
  --on-dark: #FFFFFF;
  /* Chart series — only this theme's own sage + blue hues, as tints that
     read against a dark card. All ≥3:1 on every surface. */
  --chart-1: #A3AE99;   /* sage (= accent-hover) */
  --chart-2: #97A7B9;   /* blue (= accent2-hover) */
  --chart-3: #C3CCBA;   /* sage, lighter */
  --chart-4: #B9C6D4;   /* blue, lighter */
  --chart-5: #8E9B84;   /* sage, base (= accent) */
  --chart-6: #8294A8;   /* blue, base (= accent2) */
  --chart-good: #A9C4A8;
  --chart-caution: #D8C097;
  --chart-alert: #D9A79E;
  /* Track sits below the app background so the bar reads as a recess, not a
     bright stripe; thumb stays well clear of it (≈3.5:1). */
  --scrollbar-track: #121315;
  --scrollbar-thumb: #616569;
  --check-fill: #8FA784;       /* = success; dark ✓ ink already passes */
  --shadow: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-lift: 0 6px 18px rgba(0,0,0,0.35);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: calc(16px * var(--text-scale, 1));
  line-height: var(--line-height, 1.55);
  word-spacing: var(--word-spacing, normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .font-display {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: calc(1.75rem * var(--text-scale, 1)); }
h2 { font-size: calc(1.3rem * var(--text-scale, 1)); }
h3 { font-size: calc(1.1rem * var(--text-scale, 1)); }
p { margin: 0; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Scrollbars ---------- */
/* Firefox */
html { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
/* WebKit / Blink */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 3px solid var(--scrollbar-track);
}
::-webkit-scrollbar-corner { background: var(--scrollbar-track); }

a { color: var(--accent-text); }
button { font-family: inherit; font-size: calc(15px * var(--text-scale, 1)); cursor: pointer; }
input, select, textarea {
  font-family: inherit;
  font-size: calc(16px * var(--text-scale, 1));
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  width: 100%;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}
/* #app receives programmatic focus after each route change (a11y target);
   never draw the focus ring around the whole page column. */
#app:focus, #app:focus-visible { outline: none; }
label { font-size: calc(15px * var(--text-scale, 1)); color: var(--text-secondary); display: block; margin-bottom: 6px; }
/* Form problems sit right under the field, in the calm warning tone — never red-alarm. */
.field-error { font-size: calc(14px * var(--text-scale, 1)); color: var(--warning-text); margin-top: 6px; }
[aria-invalid="true"] { border-color: var(--warning) !important; }

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100dvh; }
/* Bottom padding clears the floating Overwhelmed pill (and on phones the
   bottom nav beneath it) with room to spare, so scrolling to the end never
   leaves the last card sitting underneath a floating button. */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 20px 16px calc(148px + env(safe-area-inset-bottom));
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 1024px) {
  .main-content { padding: 32px 32px 96px; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.card-elevated { background: var(--bg-card-elevated); }
.card + .card { margin-top: 14px; }
.widget-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .widget-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Grid children must shrink (time/date inputs overflow their column otherwise)
   and must not inherit the stacked-card margin — it skews row heights. */
.widget-grid > * { min-width: 0; }
.widget-grid > .card { margin-top: 0; }
/* `.card + .card` misses whenever a grid sits between two cards, so a grid
   stacked under a card inside a wrapper div rendered flush against it. */
.card + .widget-grid,
.widget-grid + .card,
.widget-grid + .widget-grid { margin-top: 14px; }
/* Uniform vertical rhythm between every top-level block on a page, so cards,
   grids, and wrapper divs never touch. Utility .mt-* classes still win. */
.main-content > * + * { margin-top: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; padding: 11px 18px; min-height: 44px;
  border: 1px solid transparent; font-size: calc(15px * var(--text-scale, 1)); font-weight: 500;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-dark); }
:root[data-theme="dark"] .btn-primary:hover { color: var(--on-accent); }
.btn-secondary { background: var(--accent2-light); color: var(--accent2-text); border-color: var(--accent2); }
.btn-secondary:hover { background: var(--accent2); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-secondary); }
.btn-danger { background: transparent; color: var(--error-text); border-color: var(--error); }
.btn-danger:hover { background: var(--error); color: var(--on-dark); }
.btn-sm { padding: 7px 12px; min-height: 44px; min-width: 44px; font-size: calc(15px * var(--text-scale, 1)); border-radius: 10px; }
/* A real button that reads as plain text — for titles that open something.
   Keeps keyboard + screen-reader access without changing how the row looks. */
.link-button {
  background: none; border: none; padding: 2px 0; margin: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; display: block; width: 100%; overflow-wrap: anywhere;
  border-radius: 6px;
}
.link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Visible only to screen readers. */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-secondary); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: calc(15px * var(--text-scale, 1)); min-height: 36px; cursor: pointer;
  transition: background 150ms ease;
}
.chip.selected { background: var(--accent-light); border-color: var(--accent-hover); color: var(--accent-text); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Star rating chips — the plain .selected tint reads as "maybe chosen" on a row
   of near-identical stars, so the picked one gets a filled, ringed treatment. */
.star-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.star-pick .chip { min-height: 44px; padding: 6px 12px; letter-spacing: 1px; opacity: 0.75; }
.star-pick .chip.selected {
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent-hover);
  font-weight: 600;
  opacity: 1;
  box-shadow: var(--shadow-lift);
}

/* ---------- Nav: bottom bar (mobile) ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--bg-card); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(60px + env(safe-area-inset-bottom));
}
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-decoration: none; color: var(--text-muted); font-size: calc(11px * min(var(--text-scale, 1), 1.1)); min-width: 44px; /* the bar has fixed room: grows a little, never collides */
}
.bottom-nav a.active { color: var(--accent-text); }
.bottom-nav a svg { width: 22px; height: 22px; }
@media (min-width: 1024px) { .bottom-nav { display: none; } }

/* Overwhelmed pill — always present, low profile */
.overwhelm-pill {
  position: fixed; bottom: calc(72px + env(safe-area-inset-bottom)); left: 16px; z-index: 39;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 16px; font-size: calc(14px * var(--text-scale, 1)); color: var(--text-secondary);
  box-shadow: var(--shadow-lift); display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; min-height: 44px;
}
@media (min-width: 1024px) { .overwhelm-pill { bottom: 20px; left: 276px; } }

/* Brain dump floating button. Phones and tablets already have Brain Dump in
   the bottom nav, so the floating copy only appears on desktop — two of the
   same button were covering the Next up card on phones. */
.fab-dump {
  position: fixed; bottom: 20px; right: 16px; z-index: 39;
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px;
  padding: 12px 18px; font-size: calc(15px * var(--text-scale, 1)); box-shadow: var(--shadow-lift);
  display: none; align-items: center; gap: 8px; text-decoration: none; min-height: 48px;
}
@media (min-width: 1024px) { .fab-dump { display: inline-flex; } }

/* ---------- Nav: sidebar (desktop/tablet) ---------- */
.sidebar {
  display: none;
  width: 250px; flex-shrink: 0;
  background: var(--bg-card); border-right: 1px solid var(--border);
  padding: 20px 12px 40px;
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
@media (min-width: 1024px) { .sidebar { display: block; } }
.sidebar .brand {
  font-family: 'DM Serif Display', serif; font-size: calc(1.35rem * var(--text-scale, 1)); color: var(--text-primary);
  padding: 4px 12px 16px; display: flex; align-items: center; gap: 10px;
}
.sidebar .brand img { width: 30px; height: 30px; border-radius: 9px; }
.nav-group-title {
  font-size: calc(12px * var(--text-scale, 1)); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); padding: 14px 12px 4px; user-select: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
}
/* "Your tools" heading + the fold below it (daily tools picked). */
.nav-tools-title { cursor: default; }
.nav-edit {
  background: none; border: none; font: inherit; font-size: calc(12px * var(--text-scale, 1)); text-transform: none; letter-spacing: 0;
  color: var(--accent-text); cursor: pointer; padding: 4px 6px; border-radius: 6px; min-height: 32px;
}
.nav-edit:hover { text-decoration: underline; }
.nav-section-label {
  font-size: calc(12px * var(--text-scale, 1)); color: var(--text-muted); padding: 18px 12px 0; margin: 14px 0 0;
  border-top: 1px solid var(--divider);
}
.nav-pick-tools {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 8px); margin: 14px 4px 0;
  padding: 10px 12px; min-height: 44px; border-radius: 10px; cursor: pointer; font: inherit; font-size: calc(14px * var(--text-scale, 1));
  background: var(--accent-light); color: var(--accent-text); border: 1px dashed var(--accent-hover);
}

/* "Saved" — quiet, fades in for a moment after every save. Not hidden with
   display:none so its live region can still speak to screen readers. */
.saved-indicator {
  position: fixed; top: 12px; right: 16px; z-index: 90;
  background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px; font-size: calc(13px * var(--text-scale, 1)); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.saved-indicator.show { opacity: 1; transform: none; }
.sidebar a.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  color: var(--text-secondary); font-size: calc(15px * var(--text-scale, 1)); margin: 1px 0;
}
.sidebar a.nav-link:hover { background: var(--bg-secondary); }
.sidebar a.nav-link.active { background: var(--accent-light); color: var(--accent-text); }
.sidebar a.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Progress ring ---------- */
.progress-ring { position: relative; display: inline-grid; place-items: center; }
.progress-ring svg { transform: rotate(-90deg); }
.progress-ring .ring-label {
  position: absolute; font-size: calc(14px * var(--text-scale, 1)); color: var(--text-primary); text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Toggle switch ---------- */
.toggle { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; }
.toggle .track {
  position: absolute; inset: 0; background: var(--border); border-radius: 999px;
  transition: background 150ms ease; pointer-events: none;
}
.toggle .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  background: var(--bg-card); border-radius: 50%; transition: transform 150ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked + .track { background: var(--accent-hover); }
.toggle input:checked + .track::after { transform: translateX(20px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--accent-hover); outline-offset: 2px; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.35);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) { .modal-backdrop { align-items: center; } }
.modal-panel {
  background: var(--bg-card); border-radius: 20px 20px 0 0; width: 100%; max-width: 560px;
  max-height: 88dvh; overflow-y: auto; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
}
@media (min-width: 640px) { .modal-panel { border-radius: 20px; } }

/* ---------- Toast ---------- */
.toast-wrap {
  position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px;
  width: min(92vw, 380px); pointer-events: none;
}
.toast {
  background: var(--text-primary); color: var(--bg-main);
  border-radius: 12px; padding: 12px 16px; font-size: calc(15px * var(--text-scale, 1));
  box-shadow: var(--shadow-lift); display: flex; align-items: center; gap: 12px;
  pointer-events: auto; animation: toast-in 200ms ease;
}
:root[data-theme="dark"] .toast { background: var(--bg-card-elevated); color: var(--text-primary); border: 1px solid var(--border); }
.toast button { background: none; border: none; color: inherit; text-decoration: underline; padding: 4px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Skeleton loading ---------- */
.skeleton {
  background: var(--bg-secondary); border-radius: 12px; min-height: 20px;
  animation: skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes skeleton-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 36px 20px; color: var(--text-secondary); }
.empty-state .es-icon { margin-bottom: 10px; color: var(--text-muted); }
.empty-state p { max-width: 380px; margin: 0 auto 16px; }

/* ---------- Task rows / list items ---------- */
.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--divider);
  transition: opacity 200ms ease;
}
.list-row:last-child { border-bottom: none; }
.list-row.done { opacity: 0.5; }
.list-row.done .row-title { text-decoration: line-through; }
.list-row.overdue { border-left: 3px solid var(--warning); padding-left: 10px; }
.row-title { font-size: calc(16px * var(--text-scale, 1)); }
.row-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.tag {
  font-size: calc(12px * var(--text-scale, 1)); padding: 2px 9px; border-radius: 999px;
  background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 4px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.checkbox-round {
  width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
  border: 2px solid var(--border); background: transparent; display: grid; place-items: center;
  color: transparent; transition: all 150ms ease; padding: 0;
}
.checkbox-round.checked { background: var(--check-fill); border-color: var(--check-fill); color: var(--on-dark); }

/* ---------- Battery meter (Today) ----------
   Five tappable segments per battery: tap the level you're at, directly.
   Empty = not logged yet — never a made-up default. */
.batt-rows { display: grid; gap: 12px; }
.batt-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.batt-label { font-size: calc(15px * var(--text-scale, 1)); color: var(--text-secondary); }
.batt-val { font-size: calc(14px * var(--text-scale, 1)); color: var(--text-secondary); text-align: right; }
.batt-seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.batt-seg .seg {
  height: 44px; min-width: 0; padding: 0; border-radius: 8px; cursor: pointer;
  background: var(--bg-secondary); border: 1px solid var(--border);
}
.batt-seg .seg.on { background: var(--accent2-hover); border-color: var(--accent2-hover); }
.batt-seg .seg.on.low { background: var(--warning); border-color: var(--warning); }
:root[data-theme="dark"] .checkbox-round.checked { color: var(--bg-main); }

/* ---------- Sliders ---------- */
input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px;
  background: var(--border); padding: 0; border: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-hover); cursor: pointer; border: 3px solid var(--bg-card);
  box-shadow: var(--shadow);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-hover);
  cursor: pointer; border: 3px solid var(--bg-card);
}

/* ---------- Segmented control ---------- */
.segmented { display: inline-flex; background: var(--bg-secondary); border-radius: 12px; padding: 3px; gap: 2px; }
.segmented button {
  border: none; background: transparent; color: var(--text-secondary);
  border-radius: 10px; padding: 8px 14px; min-height: 44px; font-size: calc(14px * var(--text-scale, 1));
}
.segmented button.active { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow); }

/* ---------- Update banner ---------- */
#update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 16px; text-align: center; font-size: calc(15px * var(--text-scale, 1));
}
#update-banner button {
  margin-left: 12px; background: var(--bg-card); color: var(--text-primary);
  border: none; border-radius: 8px; padding: 6px 14px;
}

/* ---------- Emergency (overwhelm) mode ---------- */
.calm-screen { max-width: 560px; margin: 0 auto; padding-top: 8dvh; }
.calm-screen .card { border-radius: 20px; }

/* ---------- Utility ---------- */
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: calc(14px * var(--text-scale, 1)); } .text-xs { font-size: calc(12px * var(--text-scale, 1)); }
.text-lg { font-size: calc(18px * var(--text-scale, 1)); } .text-xl { font-size: calc(22px * var(--text-scale, 1)); }
.w-full { width: 100%; }
.hidden { display: none !important; }
.page-header { margin-bottom: 18px; }
.page-header .sub { color: var(--text-secondary); margin-top: 4px; }
.chart-box { position: relative; height: 220px; }
/* "Show the numbers" under every chart (built by ChartWrapper). */
.chart-data { margin-top: 8px; }
.chart-data > summary {
  cursor: pointer; font-size: calc(14px * var(--text-scale, 1)); color: var(--text-secondary);
  min-height: 44px; display: flex; align-items: center;
}
.chart-data[open] > summary { margin-bottom: 4px; }
.chart-table { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--text-scale, 1)); font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: 6px 8px; border-bottom: 1px solid var(--divider); text-align: right; }
.chart-table th[scope="row"], .chart-table thead th:first-child { text-align: left; font-weight: 400; color: var(--text-secondary); }
.chart-table thead th { font-weight: 500; color: var(--text-secondary); }
.chart-data { overflow-x: auto; }

/* ---------- V2.1: fresh start, body check-in, "Did I already…?" ---------- */
.fresh-choices { display: grid; gap: 8px; margin-bottom: 12px; }
.fresh-choice { justify-content: flex-start; text-align: left; width: 100%; padding: 12px 14px; }
.fresh-choice > svg { flex-shrink: 0; }
.fresh-label { display: block; font-weight: 500; }
.fresh-sub { display: block; font-size: calc(14px * var(--text-scale, 1)); font-weight: 400; margin-top: 2px; }
.list-row.let-go { opacity: 0.75; }

.body-row { padding: 10px 0; }
.body-row + .body-row { border-top: 1px solid var(--divider); }
.body-q { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--text-primary); }
.body-q svg { flex-shrink: 0; color: var(--text-secondary); }
.body-tips:not(:empty) { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--bg-secondary); }
.body-tips-title { font-weight: 500; margin-bottom: 8px; color: var(--text-primary); }

.stamp-row { display: flex; align-items: center; gap: 8px; }
.stamp-row + .stamp-row { margin-top: 8px; }
.stamp-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 14px; min-height: 60px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); font: inherit;
}
.stamp-btn.stamped { background: var(--accent2-light); border-color: var(--accent2); }
.stamp-icon {
  width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bg-card); color: var(--text-secondary);
}
.stamp-btn.stamped .stamp-icon { color: var(--accent2-text); }
.stamp-label { display: block; font-size: calc(16px * var(--text-scale, 1)); font-weight: 500; overflow-wrap: anywhere; }
.stamp-when { display: block; font-size: calc(14px * var(--text-scale, 1)); color: var(--text-secondary); }
.stamp-btn.stamped .stamp-when { color: var(--accent2-text); }

/* ---------- Animations & reduced motion ---------- */
.check-pop { animation: check-pop 150ms ease; }
@keyframes check-pop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.fade-in { animation: fade-in 150ms ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Print ---------- */
@media print {
  /* Paper is always white, whatever theme is on screen. Setting `body` alone
     wasn't enough: text reads colour variables, so printing in Dark put
     near-white text on white paper. Override the variables for every theme
     (same specificity as the theme blocks, and later in the file). */
  :root, :root[data-theme] {
    --text-primary: #000; --text-secondary: #333; --text-muted: #555;
    --bg-main: #fff; --bg-secondary: #fff; --bg-card: #fff; --bg-card-elevated: #fff;
    --border: #999; --divider: #bbb;
    --accent-text: #000; --accent2-text: #000; --warning-text: #000; --error-text: #000;
    --check-fill: #fff; --on-dark: #000;
  }
  .sidebar, .bottom-nav, .overwhelm-pill, .wait-pill, .fab-dump, .toast-wrap, .saved-indicator,
  #update-banner, .modal-backdrop, .skeleton { display: none !important; }
  .app-shell { display: block; min-height: 0; }
  .main-content { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; break-inside: avoid; }
  /* Hide controls, but keep checkboxes: a printed checklist needs its boxes
     (☐ to tick by hand, ✓ where it's already done). */
  button:not(.checkbox-round), .btn { display: none !important; }
  .checkbox-round { border: 1.5px solid #000 !important; background: #fff !important; color: #000 !important; }
  input, select, textarea { border: none; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- V2.3: Reading & comfort (A7) ----------
   Set on <html> by applyA11y() in storage.js; the defaults set nothing. */
:root[data-text="large"] { --text-scale: 1.125; }
:root[data-text="larger"] { --text-scale: 1.25; }
:root[data-spacing="roomy"] { --line-height: 1.85; --word-spacing: 0.08em; }
:root[data-spacing="roomy"] p, :root[data-spacing="roomy"] li { margin-bottom: 0.15em; }
:root[data-font="readable"] body,
:root[data-font="readable"] body * { font-family: 'Atkinson Hyperlegible', Verdana, sans-serif !important; letter-spacing: 0.01em; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
.a11y-label { font-size: calc(15px * var(--text-scale, 1)); color: var(--text-secondary); margin-bottom: 6px; }
.a11y-seg { display: flex; flex-wrap: wrap; }
.a11y-seg button { flex: 1 1 auto; }

/* ---------- V2.6.1: free demo (only active with html.is-demo, set by the demo build) ---------- */
html.is-demo .demo-hide { display: none !important; }
.demo-bar {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--accent-light); color: var(--accent-text);
  border-bottom: 1px solid var(--border); font-size: calc(14px * var(--text-scale, 1)); text-align: center;
}
.demo-bar .btn { min-height: 36px; padding: 4px 14px; text-decoration: none; white-space: nowrap; }
.demo-card { border-color: var(--accent-hover); background: var(--accent-light); }
@media print { .demo-bar { display: none !important; } }

/* ---------- V2.5: dashboard refresh, Wait Mode (B4), Breakdown library (B8) ---------- */
.glance { margin-top: 6px; color: var(--text-secondary); font-size: calc(15px * var(--text-scale, 1)); }
.card-title-icon { display: flex; align-items: center; gap: 8px; }
.card-title-icon svg { flex-shrink: 0; color: var(--text-secondary); }
#today-hero > .card { margin-bottom: 14px; }
.all-done { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--accent2-light); color: var(--accent2-text); }
.today-grid { align-items: start; }
.today-grid > [hidden] { display: none !important; }
/* Gap-free packing on two columns; spans are set by utils/todayLayout.js. */
.today-grid.masonry-on { grid-auto-rows: 2px; row-gap: 0; }
.tc-row { gap: 10px; }

.wait-pill {
  position: fixed; bottom: calc(72px + env(safe-area-inset-bottom)); right: 16px; z-index: 39;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: calc(100vw - 236px);
  padding: 9px 14px; border-radius: 999px; text-decoration: none;
  background: var(--accent2-light); color: var(--accent2-text); border: 1px solid var(--accent2); box-shadow: var(--shadow-lift);
  font-size: calc(14px * var(--text-scale, 1));
}
.wait-pill[hidden] { display: none; }
.wait-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait-pill svg { flex-shrink: 0; }
.wait-pill-time { flex-shrink: 0; font-weight: 600; white-space: nowrap; }
@media (min-width: 1024px) { .wait-pill { bottom: 80px; max-width: 320px; } }
.wait-big { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(44px, 14vw, 80px); line-height: 1.1; text-align: center; color: var(--text-primary); }
.wait-bar { height: 12px; border-radius: 999px; background: var(--bg-secondary); overflow: hidden; }
.wait-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent2); transition: width 1s linear; }
.list-row.wait-wanted { background: var(--bg-secondary); border-radius: 10px; padding-left: 10px; padding-right: 10px; }

.bd-list-item { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 12px 4px; background: none; border: none; border-bottom: 1px solid var(--divider); color: var(--text-primary); font: inherit; cursor: pointer; min-height: 44px; }
.bd-list-item:last-child { border-bottom: none; }
.bd-list-item svg { flex-shrink: 0; color: var(--text-secondary); }
.bd-phase { font-weight: 500; color: var(--text-secondary); margin: 14px 0 2px; font-size: calc(14px * var(--text-scale, 1)); text-transform: uppercase; letter-spacing: 0.04em; }
.bd-phase:first-child { margin-top: 0; }
.bd-step.tiny { padding-left: 22px; }
.bd-step.tiny .row-title { font-size: calc(15px * var(--text-scale, 1)); color: var(--text-secondary); }

/* ---------- V2.4: pattern cards (B6) and appointment report (B5) ---------- */
.pattern-card { padding: 12px 0; }
.pattern-card + .pattern-card { border-top: 1px solid var(--divider); }
.pattern-title { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-primary); }
.pattern-title svg { flex-shrink: 0; color: var(--text-secondary); }
.report-table { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--text-scale, 1)); margin: 6px 0 4px; }
.report-table th, .report-table td { text-align: left; vertical-align: top; padding: 5px 8px 5px 0; border-bottom: 1px solid var(--divider); overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.report-table th { font-weight: 500; color: var(--text-secondary); }
.report-stats { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 4px 0 8px; }
.report-note { font-size: calc(13px * var(--text-scale, 1)); color: var(--text-muted); margin-top: 18px; }
.print-sheet-page section { break-inside: avoid; }

/* ---------- V2.3: Scripts & Cards (B7) ---------- */
.show-card {
  position: fixed; inset: 0; z-index: 1000; cursor: pointer;
  background: var(--bg-main); color: var(--text-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 24px; text-align: center; overflow-y: auto;
}
.show-card-text { font-family: 'DM Serif Display', Georgia, serif; font-size: clamp(30px, 8vw, 68px); line-height: 1.2; max-width: 920px; overflow-wrap: anywhere; }
.show-card-sub { font-size: clamp(18px, 4.5vw, 30px); line-height: 1.4; color: var(--text-secondary); margin-top: 22px; max-width: 760px; overflow-wrap: anywhere; white-space: pre-wrap; }
.show-card-hint { margin-top: 36px; font-size: calc(14px * var(--text-scale, 1)); color: var(--text-muted); }
.show-card .show-card-close { position: absolute; top: 16px; right: 16px; }

.card-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.card-tile {
  text-align: left; padding: 16px; border-radius: 14px; min-height: 88px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); font: inherit;
  display: flex; flex-direction: column; gap: 6px;
}
.card-tile-text { font-family: 'DM Serif Display', Georgia, serif; font-size: calc(19px * var(--text-scale, 1)); line-height: 1.25; overflow-wrap: anywhere; }
.card-tile-sub { font-size: calc(14px * var(--text-scale, 1)); color: var(--text-secondary); overflow-wrap: anywhere; }
.script-body { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-secondary); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }

.print-sheet { position: fixed; inset: 0; z-index: 1000; background: var(--bg-main); overflow-y: auto; padding: 16px 16px 48px; }
.print-sheet-actions { max-width: 760px; margin: 0 auto 12px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.print-sheet-page { max-width: 760px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; }
.print-sheet-page h1 { margin-bottom: 4px; }
.print-sheet-page h2 { margin: 18px 0 6px; }
.print-sheet-page p, .print-sheet-page li { white-space: pre-wrap; overflow-wrap: anywhere; }
.print-sheet-page .ps-meta { color: var(--text-secondary); margin-bottom: 12px; }

@media print {
  body.print-sheet-open > *:not(.print-sheet) { display: none !important; }
  .print-sheet { position: static; padding: 0; overflow: visible; background: #fff; }
  .print-sheet-page { border: none; padding: 0; max-width: none; }
  .print-sheet-actions { display: none !important; }
}

/* ---------- Device sync (v2.6.0) ---------- */
.sync-code { font-size: calc(40px * var(--text-scale, 1)); font-weight: 600; letter-spacing: 0.12em; text-align: center; margin: 8px 0 4px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.sync-code-input { font-size: calc(24px * var(--text-scale, 1)); letter-spacing: 0.15em; text-align: center; font-variant-numeric: tabular-nums; }
.sync-pics { display: flex; justify-content: center; gap: 22px; margin: 12px 0 14px; flex-wrap: wrap; }
.sync-pics > span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; }
.sync-pic { font-size: 40px; line-height: 1; }
.sync-key { display: block; width: 100%; font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: calc(15px * var(--text-scale, 1)); line-height: 1.6; letter-spacing: 0.04em; word-break: break-all; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); }
button.sync-key { cursor: pointer; }
.sync-key-hidden { filter: blur(6px); user-select: none; }
.sync-more summary { cursor: pointer; color: var(--text-secondary); min-height: 44px; display: flex; align-items: center; }