/* ============================================================
   ADHD Home — Base styles: resets, typography, app shell layout,
   the iPhone/iPad baseline, and print.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 100%;
  overflow-x: clip;
}
/* Settings → Text size. Everything is in rem, so the whole app grows. */
html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="xlarge"] { font-size: 125%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

h1, h2, h3, h4, h5 {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-weight: 400;      /* DM Serif Display ships a single weight */
  color: var(--heading);
  line-height: 1.2;
  margin: 0;
}
p { margin: 0 0 0.5rem; }
p:last-child { margin-bottom: 0; }

.page-title { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); margin-bottom: 0.25rem; overflow-wrap: anywhere; }
.widget-title { font-family: "DM Serif Display", Georgia, serif; font-size: 1.25rem; font-weight: 400; color: var(--heading); }

/* Numbers: lining, tabular figures (DM Sans has an unslashed zero). */
.num, .streak-count, .stat-value, .ring-value {
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 600;
}

small, .text-xs, .caption { font-size: 0.875rem; }
.muted { color: var(--text-muted); }
.hint { font-size: 0.85rem; color: var(--text-muted); }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
button { font-family: inherit; }
button, [role="button"], .chip, .btn, .tab-btn, a { touch-action: manipulation; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- iPhone / iPad form baseline ---- */
.field > * { min-width: 0; max-width: 100%; }
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; min-width: 0; max-width: 100%; text-align: left;
}
input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.25em; }
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1rem) !important; }
}

/* ============================================================
   App shell layout
   Side menu only on real desktops (mouse / trackpad, ≥1024px);
   phones AND iPads get the bottom bar. Every "keep clear of the
   bar" rule below uses the same media queries.
   ============================================================ */
#app { min-height: 100vh; min-height: 100dvh; }

.boot-screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; color: var(--text-muted); text-align: center; padding: 24px; }
.boot-help { display: flex; flex-direction: column; gap: 10px; align-items: center; }

.app-main {
  min-width: 0;
  padding: 24px clamp(16px, 4vw, 40px) calc(96px + env(safe-area-inset-bottom, 0px));
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
}

.app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.app-header > * { min-width: 0; }
.app-header > div:first-child { flex: 1 1 14rem; }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-left: auto; }
.page-subtitle { color: var(--text-muted); font-size: 0.95rem; }

/* ---- Sidebar ---- */
.sidebar { display: none; }
.sidebar .brand-stripe { height: 6px; background: var(--brand-stripe); border-radius: 0; margin: -20px -14px 14px; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.sidebar .brand-mark { width: 34px; height: 34px; flex-shrink: 0; }
.sidebar .brand-name { font-family: "DM Serif Display", serif; font-size: 1.2rem; color: var(--nav-text); }
.sidebar-search { margin: 0 4px 10px; background: var(--nav-active-bg); color: var(--nav-active-text); border-color: var(--nav-hover-bg); justify-content: flex-start; }
.sidebar-search svg { color: var(--nav-icon); }
@media (hover: hover) { .sidebar-search:hover { background: var(--surface); } }

.nav-list { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--nav-text); font-size: 0.95rem; min-height: 42px;
  cursor: pointer; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link .nav-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--nav-icon); display: inline-flex; }
@media (hover: hover) { .nav-link:hover { background: var(--nav-hover-bg); } }
.nav-link[aria-current="page"] {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent-1-deep);
}
/* Rainbow Pastel: menu icons cycle through the six hues. */
:root[data-theme="rainbow"] .nav-list .nav-link:nth-child(6n+1) .nav-icon { color: var(--chip-1-text); }
:root[data-theme="rainbow"] .nav-list .nav-link:nth-child(6n+2) .nav-icon { color: var(--chip-2-text); }
:root[data-theme="rainbow"] .nav-list .nav-link:nth-child(6n+3) .nav-icon { color: var(--chip-3-text); }
:root[data-theme="rainbow"] .nav-list .nav-link:nth-child(6n+4) .nav-icon { color: var(--chip-4-text); }
:root[data-theme="rainbow"] .nav-list .nav-link:nth-child(6n+5) .nav-icon { color: var(--chip-5-text); }
:root[data-theme="rainbow"] .nav-list .nav-link:nth-child(6n+6) .nav-icon { color: var(--chip-6-text); }

.nav-badge {
  margin-left: auto;
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  font-size: 0.75rem; font-weight: 600;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-footer { padding: 12px 12px 4px; border-top: 1px solid var(--nav-hover-bg); margin-top: 10px; color: var(--nav-text); font-size: 0.8rem; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .sidebar {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; width: 248px;
    background: var(--nav-bg);
    padding: 20px 14px;
    overflow-y: auto;
    z-index: 800;
  }
  .app-layout { padding-left: 248px; }
  .app-main { padding-bottom: 48px; }
}

/* ---- Bottom bar (phones + iPads + touch laptops) ---- */
.bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 900;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: var(--nav-bg);
  border-top: 1px solid var(--nav-hover-bg);
  -webkit-touch-callout: none; user-select: none;
}
.bottom-nav::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-stripe); }
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: 64px; min-width: 0;
  border: none; background: none;
  color: var(--nav-text); font-size: 0.72rem;
  cursor: pointer; border-radius: 12px; text-decoration: none;
}
.bottom-nav-item .nav-icon { width: 22px; height: 22px; color: var(--nav-icon); display: inline-flex; }
.bottom-nav-item[aria-current="page"] { color: var(--nav-active-text); font-weight: 600; }
.bottom-nav-item[aria-current="page"] .nav-icon { background: var(--nav-active-bg); border-radius: 999px; width: 44px; height: 28px; align-items: center; justify-content: center; box-shadow: inset 0 -2px 0 var(--accent-1-deep); }
.bottom-nav-item .nav-badge { position: absolute; transform: translate(14px, -14px); margin: 0; min-width: 18px; height: 18px; font-size: 0.68rem; }
.bottom-nav-item { position: relative; }
body.sheet-open .bottom-nav { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .bottom-nav { display: none; }
}

/* ============================================================
   Responsive dashboard grid
   ============================================================ */
.widget-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) { .widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .widget-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.widget-grid > * { min-width: 0; }
.widget-grid .col-span-2 { grid-column: span 1; }
@media (min-width: 640px) { .widget-grid .col-span-2 { grid-column: span 2; } }
.widget-grid .col-span-all { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack > * { min-width: 0; }

.autofit-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

.page-view { animation: pageFade 0.15s ease-out; }
.page-view.no-anim, .page-view.no-anim * { animation: none !important; }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 2000; padding: 10px 14px; background: var(--surface); color: var(--text); border-radius: 10px; }
.skip-link:focus { left: 12px; }

/* ============================================================
   Print — only the page content, in natural document flow,
   always dark ink on white whatever the theme.
   ============================================================ */
@media print {
  :root, :root[data-theme] {
    --bg: #fff; --surface: #fff; --surface-alt: #fff; --text: #111; --heading: #111; --text-muted: #444;
    --border: #bbb; --divider: #ddd; color-scheme: light;
  }
  .sidebar, .bottom-nav, .fab, .toast-stack, #install-banner, #update-banner, .modal-overlay,
  .btn, .btn-icon, .tabs, .gentle-banner, .no-print, .demo-bar, .search-trigger, .hero-art, .now-next .btn {
    display: none !important;
  }
  .print-keep { display: initial !important; }
  body, #app, .app-layout { min-height: auto !important; background: #fff !important; color: #111 !important; }
  .app-layout { display: block; padding: 0 !important; }
  .app-main { padding: 0; max-width: none; }
  .card { box-shadow: none !important; border: 1px solid #bbb !important; break-inside: avoid; margin-bottom: 12px; background: #fff !important; }
  .widget-grid { display: block; }
  .widget-grid > * { margin-bottom: 12px; }
  .page-view, .page-view * { animation: none !important; }
  textarea { display: none; }
  .print-text { display: block !important; white-space: pre-wrap; }
  a { color: #111; text-decoration: none; }
  @page { margin: 14mm; }
}
.print-text { display: none; }

/* Motion: the device setting AND the in-app Calm mode both stop it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
html[data-calm="on"] *, html[data-calm="on"] *::before, html[data-calm="on"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}