/* ==========================================================================
   THE TIDY APPS CORE DESIGN SYSTEM
   Modern, Empathetic, Ultra-Performant Stylesheet for:
   thetidyway.com | tidylife.me | thetidy.me
   Design system v2 (direction 2): tokens and patterns from the Tidy design system.
   ========================================================================== */

/* Self-hosted fonts (WP-45, KIDREV-9): no page asks Google Fonts, so no visitor's
   address (a child's included) goes to a third party for a typeface. Variable woff2
   files from @fontsource-variable 5.2.8 (plus-jakarta-sans, jetbrains-mono), latin and
   latin-ext; licences (SIL OFL 1.1) beside them. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/plus-jakarta-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/plus-jakarta-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: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-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: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-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;
}

/* Direction 2 faces (design system v2): Atkinson Hyperlegible 400/700 from @fontsource 5.2.8 and
   Fraunces (wght + opsz axes) from @fontsource-variable 5.2.8, latin and latin-ext; licences (SIL OFL 1.1) beside them. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../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-display: swap;
  font-weight: 400;
  src: url('../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-display: swap;
  font-weight: 700;
  src: url('../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;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../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: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/fraunces-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: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/fraunces-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;
}

/* @design-system tokens: begin. Generated from design-system/tokens.json by scripts/design_system_sync.py. Change the design system, pull, then apply. */
:root {
  --bg: #f6f2ea;
  --surface: #fffdf8;
  --surface-raised: #fffdf8;
  --surface-subtle: #ece5d8;
  --text-main: #14211f;
  --text-body: #2e3b38;
  --text-muted: #55615c;
  --border: #ddd4c4;
  --border-control: #7a7469;
  --border-focus: var(--primary);
  --focus-ring: #0f766e;
  --primary: #0f766e;
  --primary-dark: #0b4f4a;
  --primary-light: #e2ede8;
  --action: var(--primary);
  --action-hover: var(--primary-dark);
  --on-action: #ffffff;
  --field: #0b4f4a;
  --on-field: #ffffff;
  --on-field-muted: #cfe3dc;
  --accent: #e3a33b;
  --on-accent: #14211f;
  --accent-light: #f7e6c4;
  --accent-dark: #8a5210;
  --success: var(--primary);
  --success-light: var(--primary-light);
  --success-ink: var(--primary);
  --danger: #c4472f;
  --danger-light: #f6dfd8;
  --danger-ink: #a3341f;
  --on-danger: #ffffff;
  --rail: #ddd4c4;
  --scrim: rgba(20, 33, 31, 0.45);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --touch-min: 48px;
  --touch-kid: 56px;
  --measure: 640px;
  --rail-track: 6px;
  --bead: 24px;
  --nav-rail: 248px;
  --index-width: 320px;
  --row-min: 56px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-tile: 22%;
  --radius-full: 9999px;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-md: 0 8px 24px -8px rgba(20, 33, 31, 0.18);
  --shadow-lg: 0 16px 40px -12px rgba(20, 33, 31, 0.22);
  --font-sans: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --type-display: 500 48px/54px var(--font-display);
  --type-display-size: 48px;
  --type-display-line: 54px;
  --type-display-tracking: -0.02em;
  --type-brief: 500 32px/38px var(--font-display);
  --type-brief-size: 32px;
  --type-brief-line: 38px;
  --type-brief-tracking: -0.01em;
  --type-h1: 600 32px/38px var(--font-display);
  --type-h1-size: 32px;
  --type-h1-line: 38px;
  --type-h1-tracking: -0.01em;
  --type-h2: 600 24px/30px var(--font-display);
  --type-h2-size: 24px;
  --type-h2-line: 30px;
  --type-figure-lg: 500 40px/44px var(--font-display);
  --type-figure-lg-size: 40px;
  --type-figure-lg-line: 44px;
  --type-h3: 700 20px/26px var(--font-sans);
  --type-h3-size: 20px;
  --type-h3-line: 26px;
  --type-body-lg: 400 18px/26px var(--font-sans);
  --type-body-lg-size: 18px;
  --type-body-lg-line: 26px;
  --type-body: 400 16px/24px var(--font-sans);
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-sm: 400 14px/20px var(--font-sans);
  --type-body-sm-size: 14px;
  --type-body-sm-line: 20px;
  --type-label: 700 16px/20px var(--font-sans);
  --type-label-size: 16px;
  --type-label-line: 20px;
  --type-caption: 700 13px/16px var(--font-sans);
  --type-caption-size: 13px;
  --type-caption-line: 16px;
  --type-figure: 700 16px/24px var(--font-sans);
  --type-figure-size: 16px;
  --type-figure-line: 24px;
  --type-kid-title: 700 28px/34px var(--font-sans);
  --type-kid-title-size: 28px;
  --type-kid-title-line: 34px;
  --type-kid-body: 400 18px/26px var(--font-sans);
  --type-kid-body-size: 18px;
  --type-kid-body-line: 26px;
  --type-kid-button: 700 20px/24px var(--font-sans);
  --type-kid-button-size: 20px;
  --type-kid-button-line: 24px;
}
[data-theme="dark"] {
  --bg: #101917;
  --surface: #18231f;
  --surface-raised: #22302d;
  --surface-subtle: #141e1b;
  --text-main: #f3efe6;
  --text-body: #d3cbbd;
  --text-muted: #a39b8d;
  --border: #2c3a36;
  --border-control: #7f8984;
  --border-focus: var(--primary);
  --focus-ring: #8fd6c8;
  --primary: #5cc0b0;
  --primary-dark: #8fd6c8;
  --primary-light: #173b36;
  --action: var(--primary);
  --action-hover: var(--primary-dark);
  --on-action: #0b1513;
  --field: #0d5650;
  --on-field: #ffffff;
  --on-field-muted: #cfe3dc;
  --accent: #e3a33b;
  --on-accent: #14211f;
  --accent-light: #3a2b12;
  --accent-dark: #f0c26e;
  --success: var(--primary);
  --success-light: var(--primary-light);
  --success-ink: var(--primary);
  --danger: #ec7a62;
  --danger-light: #3d1a13;
  --danger-ink: #f2a491;
  --on-danger: #0b1513;
  --rail: #2f3d39;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
}
/* @design-system tokens: end */

:root {
  /* Design system v2 ("Tidy", direction 2): warm paper, ink, the logo's teal, one marigold accent.
     Source of truth: the Tidy design system's tokens.json. Every name below from v1 is kept so
     existing pages keep working; v1 names now point at v2 values. */

  /* Surfaces and text */

  /* Teal: actions, links, beads, done states */
  --primary-glow: rgba(15, 118, 110, 0.18);

  /* Marigold: the one warm accent, on field only */

  /* Status */

  /* v1 names kept for existing pages. Secondary (was indigo) is now the deep field teal. */
  --secondary: var(--field);
  --secondary-light: var(--primary-light);
  --secondary-dark: #08413d;

  /* One suite colour: v1's per-app accents all resolve to the suite teal. */
  --color-life: var(--primary);
  --color-nest: var(--primary);
  --color-family: var(--primary);
  --color-kid: var(--primary);
  --color-cash: var(--primary);
  --color-wealth: var(--primary);
  --color-cook: var(--primary);
  --color-health: var(--primary);

  /* Typography */
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */

  /* Geometry */

  /* Shadows: only for things that open above the page */
  --shadow-sm: none;
  --shadow-glow: none;

  /* v1 names for the design system's motion tokens */
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-base: var(--duration-base) var(--ease-standard);
}

/* Dark theme: opt-in with data-theme="dark" on <html>. Not switched on by prefers-color-scheme yet,
   because many pages still paint light colours inline. */
[data-theme="dark"] {
  --primary-glow: rgba(92, 192, 176, 0.18);
  /* A step lighter than the field, as dark hovers go; white text stays 5.9:1 (#378). */
  --secondary-dark: #127068;
}

/* Base Reset & Typography */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Layout Containers */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.container-narrow {
  width: 100%;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Global Top Navigation (v1; was .tidy-nav, a name v2 gives the phone tab bar) */
.tidy-topnav {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  transition: all var(--transition-base);
}

.tidy-nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.tidy-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.tidy-brand .brand-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary-dark);
}

.tidy-nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.tidy-nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-body);
  transition: color var(--transition-fast);
}

.tidy-nav-link:hover {
  color: var(--primary);
}

.tidy-nav-cta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Cross-domain Ecosystem Switcher Bar */
.ecosystem-bar {
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  padding: 0.35rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ecosystem-bar .sites-list {
  display: flex;
  gap: 1.25rem;
}

.ecosystem-bar a {
  color: var(--text-muted);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.ecosystem-bar a:hover,
.ecosystem-bar a.active {
  color: var(--primary);
}

/* Button Components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--on-action);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--on-field);
}

.btn-secondary:hover {
  background-color: var(--secondary-dark);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--border);
  color: var(--text-main);
}

.btn-outline:hover {
  border-color: var(--text-main);
  background-color: var(--surface-subtle);
}

.btn-lg {
  padding: 0.95rem 2rem;
  font-size: 1.05rem;
}

.btn-sm {
  padding: 0.45rem 0.95rem;
  font-size: 0.825rem;
}

/* Hero Sections */
.hero-section {
  padding: 5rem 0 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-body);
  margin-bottom: 1.5rem;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-main);
  margin-bottom: 1.25rem;
}

.hero-title .gradient-text {
  color: var(--primary);
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 2.25rem;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Feature Cards Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.75rem;
  margin: 3.5rem 0;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  transition: all var(--transition-base);
  position: relative;
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  border-color: var(--primary);
}

.feature-icon-wrapper {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.feature-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
  letter-spacing: -0.01em;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* App Module Badge Tags */
.module-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--primary-light);
  color: var(--primary);
}

/* Interactive Experience Containers */
.interactive-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  margin: 2.5rem 0;
}

.interactive-header {
  text-align: center;
  margin-bottom: 2rem;
}

.interactive-header h2 {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.interactive-header p {
  color: var(--text-muted);
  font-size: 1rem;
}

/* Pricing Cards */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition-base);
}

.pricing-card.featured {
  border: 2px solid var(--primary);
  transform: scale(1.02);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--on-action);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.85rem;
  border-radius: var(--radius-full);
}

.pricing-price {
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1;
  margin: 1.5rem 0 0.5rem;
}

.pricing-price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pricing-features {
  list-style: none;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--text-body);
}

.pricing-features li .check {
  color: var(--primary);
  font-weight: 800;
}

/* Footer */
.tidy-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 4rem 0 2rem;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer-brand h4 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 320px;
}

.footer-col h5 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-col a {
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--primary);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .tidy-nav-links {
    display: none;
  }
  .pricing-card.featured {
    transform: none;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* ==========================================================================
   PATTERNS (design system v2). Classes match the Tidy design system's components.
   ========================================================================== */
/* @design-system patterns: begin. Generated from design-system/components/bundle.css by scripts/design_system_sync.py. Change the design system, pull, then apply. */
/* Tidy component patterns, direction 2: paper, ink, logo teal, one marigold bead.
   Plain CSS, no framework, no third-party loads. Drop below tokens.css. */

/* ---------- Shared ---------- */
.tidy-page { background: var(--bg); color: var(--text-main); font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tidy-icon { width: 24px; height: 24px; flex-shrink: 0; }
:where(.tidy-page, .tidy-timeline, .tidy-card, .tidy-brief, .tidy-field) a:not([class]) { color: var(--primary); font-weight: 700; text-underline-offset: 3px; }
:where(.tidy-page, .tidy-timeline, .tidy-card, .tidy-brief, .tidy-field) a:not([class]):hover { color: var(--primary-dark); }
@media (prefers-reduced-motion: reduce) {
  .tidy-btn, .tidy-chip, .tidy-dock-tile, .tidy-signal, .tidy-rail__fill, .tidy-rail__bead { transition: none !important; transform: none !important; }
}

/* ---------- Button ---------- */
.tidy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); min-width: var(--touch-min); padding: 0 22px;
  border-radius: var(--radius-full); border: 1.5px solid transparent;
  font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tidy-btn:active { transform: translateY(1px); }
.tidy-btn--primary { background: var(--action); color: var(--on-action); }
.tidy-btn--primary:hover { background: var(--action-hover); }
.tidy-btn--quiet { background: transparent; color: var(--text-main); border-color: var(--border-control); }
.tidy-btn--quiet:hover { background: var(--surface-subtle); }
.tidy-btn--danger { background: var(--danger-ink); color: var(--on-danger); }
.tidy-btn--accent { background: var(--accent); color: var(--on-accent); }          /* on field only */
.tidy-btn--on-field { background: transparent; color: var(--on-field); border-color: var(--on-field-muted); } /* on field only */
.tidy-btn--lg { min-height: var(--touch-kid); padding: 0 var(--space-8); font-size: 20px; line-height: 24px; }
.tidy-btn--block { display: flex; width: 100%; }
.tidy-btn[disabled], .tidy-btn[aria-disabled="true"] { background: var(--surface-subtle); color: var(--text-body); border-color: transparent; cursor: not-allowed; }

/* ---------- Brief: the one sentence that opens a summary screen ---------- */
.tidy-brief { display: flex; flex-direction: column; gap: 10px; max-width: var(--measure); }
.tidy-brief__meta { margin: 0; font-size: 16px; line-height: 22px; color: var(--text-muted); }
.tidy-brief__text { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-main); }

/* ---------- Rail: progress as a rail with a bead ----------
   Markup carries aria-valuenow/aria-valuemax; the page script sets --value (0–100%) via style.setProperty. */
.tidy-rail { display: flex; flex-direction: column; gap: 10px; }
.tidy-rail__label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: 16px; line-height: 22px; }
.tidy-rail__label strong { font-weight: 700; color: var(--text-main); }
.tidy-rail__label span { color: var(--text-muted); }
.tidy-rail__track { position: relative; height: var(--bead); }
.tidy-rail__track::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: var(--rail-track); border-radius: var(--radius-full); background: var(--rail); }
.tidy-rail__fill { position: absolute; left: 0; top: 9px; height: var(--rail-track); width: var(--value, 0%); border-radius: var(--radius-full); background: var(--primary); transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1); }
.tidy-rail__bead { position: absolute; top: 0; left: calc(var(--value, 0%) - 12px); width: var(--bead); height: var(--bead); box-sizing: border-box; border-radius: var(--radius-full); background: var(--primary); border: 4px solid var(--bg); transition: left 250ms cubic-bezier(0.4, 0, 0.2, 1); }

/* ---------- Timeline: a day hung on a rail ---------- */
.tidy-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tidy-timeline__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); padding-bottom: var(--space-4); }
.tidy-timeline__item:last-child { padding-bottom: 0; }
.tidy-timeline__rail { display: flex; flex-direction: column; align-items: center; }
.tidy-timeline__rail::before { content: ""; width: 12px; height: 12px; margin-top: 5px; box-sizing: border-box; border-radius: var(--radius-full); border: 2px solid var(--primary); background: var(--bg); }
.tidy-timeline__rail::after { content: ""; flex-grow: 1; width: 2px; margin-top: 4px; background: var(--rail); }
.tidy-timeline__item:last-child .tidy-timeline__rail::after { display: none; }
.tidy-timeline__item[data-state="next"] .tidy-timeline__rail::before { background: var(--primary); }
.tidy-timeline__item[data-state="done"] .tidy-timeline__rail::before { background: var(--primary); border-color: var(--primary); }
.tidy-timeline__item[data-state="done"] .tidy-timeline__title { color: var(--text-muted); }
.tidy-timeline__title { margin: 0; font-weight: 700; color: var(--text-main); }
.tidy-timeline__body { margin: 0; color: var(--text-muted); }

/* ---------- Panel (replaces the floating card) ---------- */
.tidy-card { background: transparent; color: var(--text-body); border-top: 1px solid var(--border); padding: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tidy-card--boxed { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); }
.tidy-card__eyebrow { margin: 0; font-size: 16px; line-height: 20px; font-weight: 700; color: var(--text-muted); }
.tidy-card__title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--text-main); }
.tidy-card__body { margin: 0; font-size: 16px; line-height: 24px; }
.tidy-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-2); }

/* Field panel: the one thing that needs a person now. One per screen. */
.tidy-card--field { background: var(--field); color: var(--on-field); border: 0; border-radius: var(--radius-lg); padding: var(--space-5); gap: 14px; }
.tidy-card--field .tidy-card__eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--on-field-muted); }
.tidy-card--field .tidy-card__eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--accent); }
.tidy-card--field .tidy-card__title { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 500; color: var(--on-field); }
.tidy-card--field .tidy-card__body { color: var(--on-field-muted); }
.tidy-card--field :focus-visible { outline-color: var(--on-field); }

/* ---------- Badge ---------- */
.tidy-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 13px; line-height: 16px; font-weight: 700; background: var(--surface-subtle); color: var(--text-body); }
.tidy-badge .tidy-icon { width: 14px; height: 14px; }
.tidy-badge--live    { background: var(--primary-light); color: var(--primary); }
.tidy-badge--preview { background: var(--accent-light); color: var(--accent-dark); }
.tidy-badge--demo    { background: var(--field); color: var(--on-field); }
.tidy-badge--waiting { background: var(--accent-light); color: var(--accent-dark); }

/* ---------- Chip ---------- */
.tidy-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: 1.5px solid var(--border-control); background: transparent; color: var(--text-body); font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700; cursor: pointer; }
.tidy-chip[aria-pressed="true"] { background: var(--primary-light); color: var(--text-main); border-color: var(--primary); }
.tidy-chip[aria-pressed="true"]::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--primary); }
@media (pointer: coarse) { .tidy-chip { min-height: var(--touch-min); } }

/* ---------- Notice ---------- */
.tidy-notice { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--primary-light); color: var(--text-main); font-size: 16px; line-height: 22px; }
.tidy-notice__icon { color: var(--primary); margin-top: -1px; }
.tidy-notice__title { margin: 0; font-weight: 700; }
.tidy-notice__body { margin: 0; }
.tidy-notice__action { align-self: center; min-height: var(--touch-min); padding: 0 var(--space-2); background: none; border: 0; font: inherit; font-weight: 700; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tidy-notice--warning { background: var(--accent-light); }
.tidy-notice--warning .tidy-notice__icon, .tidy-notice--warning .tidy-notice__action { color: var(--accent-dark); }
.tidy-notice--error { background: var(--danger-light); }
.tidy-notice--error .tidy-notice__icon, .tidy-notice--error .tidy-notice__action { color: var(--danger-ink); }

/* ---------- Field ---------- */
.tidy-field { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--measure); }
.tidy-field label { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--text-main); }
.tidy-field input, .tidy-field select, .tidy-field textarea { min-height: var(--touch-min); padding: 0 var(--space-4); border: 1.5px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-main); font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
.tidy-field textarea { padding: var(--space-3) var(--space-4); min-height: 96px; }
.tidy-field input:focus-visible, .tidy-field select:focus-visible, .tidy-field textarea:focus-visible { border-color: var(--border-focus); }
.tidy-field__hint { margin: 0; font-size: 16px; line-height: 22px; color: var(--text-muted); }
.tidy-field__error { margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--danger-ink); }
.tidy-field [aria-invalid="true"] { border-color: var(--danger-ink); border-width: 2px; }

/* ---------- Bottom nav (phones) ---------- */
.tidy-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px 14px; background: var(--bg); border-top: 1px solid var(--border); font-family: var(--font-sans); }
.tidy-nav__item { position: relative; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-muted); text-decoration: none; font-size: 13px; line-height: 16px; font-weight: 700; }
.tidy-nav__item .tidy-icon { width: 26px; height: 26px; }
.tidy-nav__item[aria-current="page"] { color: var(--primary); }
.tidy-nav__item[aria-current="page"]::before { content: ""; position: absolute; top: 2px; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--primary); }

/* ---------- App header ---------- */
.tidy-app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--space-2); background: var(--bg); font-family: var(--font-sans); }
.tidy-app-header__brand { display: flex; align-items: center; gap: 10px; }
.tidy-app-header__logo { display: block; width: 32px; height: 32px; }
.tidy-app-header__name { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--text-main); }
.tidy-icon-btn { width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-full); border: 1.5px solid var(--border-control); background: transparent; color: var(--text-main); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }

/* ---------- Dock ---------- */
.tidy-dock { background: var(--surface-raised); color: var(--text-main); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-4); font-family: var(--font-sans); }
.tidy-dock__heading { margin: var(--space-4) var(--space-1) var(--space-2); font-size: 16px; line-height: 20px; font-weight: 700; color: var(--text-muted); }
.tidy-dock__heading:first-child { margin-top: 0; }
.tidy-dock__group { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-2); }
.tidy-dock-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 96px; padding: var(--space-2) var(--space-1); border-radius: var(--radius-md); color: var(--text-main); text-decoration: none; text-align: center; font-size: 15px; line-height: 18px; font-weight: 700; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.tidy-dock-tile:hover { background: var(--surface-subtle); }
.tidy-dock-tile[aria-current="page"] { background: var(--primary-light); }
.tidy-dock-tile__mark { width: 44px; height: 44px; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-action); }
.tidy-dock-tile__state { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--text-muted); }
.tidy-dock-tile[data-state="soon"] .tidy-dock-tile__mark { background: var(--surface-subtle); color: var(--text-muted); }
.tidy-dock-tile[data-state="preview"] .tidy-dock-tile__mark { background: var(--accent-light); color: var(--accent-dark); }
.tidy-dock-tile[data-state="preview"] .tidy-dock-tile__state { color: var(--accent-dark); }

/* ---------- Demo bar ---------- */
.tidy-demo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-2) var(--space-5); background: var(--field); color: var(--on-field); font-family: var(--font-sans); font-size: 16px; line-height: 22px; }
.tidy-demo-bar__text { display: flex; align-items: center; gap: var(--space-2); }
.tidy-demo-bar__text::before { content: ""; width: 10px; height: 10px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--accent); }
.tidy-demo-bar a { min-height: var(--touch-min); display: inline-flex; align-items: center; color: var(--on-field); font-weight: 700; text-underline-offset: 3px; }
.tidy-demo-bar :focus-visible { outline-color: var(--on-field); }

/* ---------- Sign-in gate ---------- */
.tidy-gate { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-5); background: var(--bg); font-family: var(--font-sans); }
.tidy-gate__card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.tidy-gate__mark { display: block; width: 56px; height: 56px; }
.tidy-gate__title { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; color: var(--text-main); }
.tidy-gate__lead { margin: 0 0 var(--space-2); color: var(--text-body); }
.tidy-gate__note { margin: 0; color: var(--text-muted); }
.tidy-gate__note a { color: var(--primary); font-weight: 700; }

/* ---------- Kid signal ---------- */
.tidy-signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 480px) { .tidy-signals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tidy-signal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 120px; padding: var(--space-3); border-radius: var(--radius-lg); border: 2px solid var(--border-control); background: var(--surface); color: var(--text-main); font-family: var(--font-sans); font-size: 20px; line-height: 24px; font-weight: 700; cursor: pointer; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.tidy-signal .tidy-icon { width: 44px; height: 44px; color: var(--primary); }
.tidy-signal:active { transform: scale(0.97); }
.tidy-signal[aria-pressed="true"] { background: var(--primary-light); border-color: var(--primary); }

/* ---------- Places and settings: NavRail, PlaceHeader, PlaceSubnav, SettingsIndex, SettingsRow, ScopeNote, DangerZone ---------- */

/* Nav rail: from 1024px, the BottomNav's five places on the left. */
.tidy-navrail { display: flex; flex-direction: column; gap: var(--space-6); width: var(--nav-rail); box-sizing: border-box; padding: var(--space-5) var(--space-3); background: var(--bg); border-right: 1px solid var(--border); font-family: var(--font-sans); }
.tidy-navrail__brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--space-2); }
.tidy-navrail__logo { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.tidy-navrail__name { margin: 0; font-size: 18px; line-height: 22px; font-weight: 700; color: var(--text-main); }
.tidy-navrail__household { margin: 0; font-size: 14px; line-height: 18px; color: var(--text-muted); }
.tidy-navrail__list { display: flex; flex-direction: column; gap: var(--space-1); }
.tidy-navrail__item { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); padding: 0 var(--space-4) 0 var(--space-6); border-radius: var(--radius-full); color: var(--text-muted); text-decoration: none; font-size: 16px; line-height: 20px; font-weight: 700; }
.tidy-navrail__item:hover { background: var(--surface-subtle); color: var(--text-main); }
.tidy-navrail__item[aria-current="page"] { background: var(--primary-light); color: var(--text-main); }
.tidy-navrail__item[aria-current="page"] .tidy-icon { color: var(--primary); }
.tidy-navrail__item[aria-current="page"]::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: var(--radius-full); background: var(--primary); }
.tidy-navrail__foot { margin-top: auto; align-self: flex-start; }

/* Place header: a place's name, and for parents the link to its settings (or, on a settings page, the way back). */
.tidy-place-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.tidy-place-header__title { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-main); text-wrap: balance; }
.tidy-settings-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); box-sizing: border-box; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-full); border: 1.5px solid var(--border-control); background: transparent; color: var(--text-main); font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700; text-decoration: none; cursor: pointer; }
.tidy-settings-link:hover { background: var(--surface-subtle); }
.tidy-settings-link .tidy-icon { width: 20px; height: 20px; color: var(--primary); }

/* Place subnav: sections inside one place. Scrolls inside itself, never the page. */
.tidy-subnav { display: flex; gap: var(--space-1); overflow-x: auto; margin: 0 0 var(--space-4); padding-bottom: 2px; scrollbar-width: none; font-family: var(--font-sans); }
.tidy-subnav::-webkit-scrollbar { display: none; }
.tidy-subnav__item { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-4); border-radius: var(--radius-full); color: var(--text-muted); text-decoration: none; font-size: 16px; line-height: 20px; font-weight: 700; }
.tidy-subnav__item:hover { color: var(--text-main); }
.tidy-subnav__item[aria-current="page"] { background: var(--primary-light); color: var(--text-main); }
.tidy-subnav__item[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: var(--radius-full); background: var(--primary); }

/* Settings: the More page's index, its groups and rows; from 1024px the open page sits beside the index. */
.tidy-settings { display: grid; gap: var(--space-8); font-family: var(--font-sans); }
@media (min-width: 1024px) { .tidy-settings { grid-template-columns: var(--index-width) minmax(0, 1fr); align-items: start; } }
.tidy-settings-index { display: flex; flex-direction: column; gap: var(--space-6); }
.tidy-settings-group { display: flex; flex-direction: column; }
.tidy-settings-group__title { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700; color: var(--text-main); }
.tidy-scope-note { margin: 2px 0 var(--space-2); font-family: var(--font-sans); font-size: 16px; line-height: 22px; color: var(--text-muted); }
.tidy-settings-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.tidy-settings-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4); width: 100%; min-height: var(--row-min); box-sizing: border-box; padding: var(--space-3) var(--space-2); border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text-main); font-family: var(--font-sans); font-size: 16px; line-height: 22px; text-align: left; text-decoration: none; }
a.tidy-settings-row, button.tidy-settings-row { cursor: pointer; }
a.tidy-settings-row:hover, button.tidy-settings-row:hover { background: var(--surface-subtle); }
.tidy-settings-row > .tidy-icon { color: var(--primary); }
.tidy-settings-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tidy-settings-row__title { font-weight: 700; line-height: 20px; color: var(--text-main); }
.tidy-settings-row__summary { color: var(--text-muted); }
.tidy-settings-row__end { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.tidy-settings-row__end .tidy-icon { width: 20px; height: 20px; }
.tidy-settings-row[aria-current="true"] { background: var(--primary-light); }
.tidy-settings-row[aria-current="true"] .tidy-settings-row__summary { color: var(--text-body); }  /* text-muted is under 4.5:1 on primary-light in dark */
.tidy-settings-row--locked > .tidy-icon { color: var(--text-muted); }
.tidy-settings-row--danger .tidy-settings-row__title { color: var(--danger-ink); }
.tidy-back-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); margin-left: calc(-1 * var(--space-2)); padding: 0 var(--space-3) 0 var(--space-1); border-radius: var(--radius-full); color: var(--primary); font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700; text-decoration: none; }
.tidy-back-link:hover { background: var(--surface-subtle); color: var(--primary-dark); }

/* Switch: an on/off setting inside a SettingsRow; the row's title names it. */
.tidy-switch { position: relative; flex-shrink: 0; width: 52px; height: 32px; padding: 0; border-radius: var(--radius-full); border: 1.5px solid var(--border-control); background: var(--surface-subtle); cursor: pointer; }
.tidy-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: var(--radius-full); background: var(--text-muted); transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.tidy-switch::after { content: ""; position: absolute; inset: -9px -4px; }  /* a 48px tap target */
.tidy-switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }
.tidy-switch[aria-checked="true"]::before { left: 23px; background: var(--on-action); }
.tidy-switch[aria-disabled="true"] { cursor: not-allowed; }

/* Danger zone: leaving or deleting, last in Privacy & records. */
.tidy-danger-zone { border: 1.5px solid var(--danger); border-radius: var(--radius-md); padding: var(--space-1) var(--space-5) var(--space-3); }
.tidy-danger-zone__title { margin: var(--space-4) 0 var(--space-2); font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 700; color: var(--text-main); }
.tidy-danger-zone .tidy-settings-list li:last-child .tidy-settings-row { border-bottom: 0; }
.tidy-danger-zone .tidy-settings-row { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }  /* the button goes under its consequence */
.tidy-danger-zone .tidy-settings-row > .tidy-icon { margin-top: 1px; }
.tidy-danger-zone .tidy-settings-row__end { grid-column: 2; }

@media (prefers-reduced-motion: reduce) {
  .tidy-switch::before { transition: none !important; }
}

/* ---------- Learning and sharing: GoalRow, TeachBack, ShareCheck, LearnPost, SomedayRail ---------- */

/* Goal row: one goal of any kind (Do, Learn, Try), flat on the paper. */
.tidy-goals { list-style: none; margin: 0; padding: 0; }
.tidy-goal { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: start; min-height: var(--row-min); padding: var(--space-3) 0; border-top: 1px solid var(--border); color: var(--text-body); text-decoration: none; }
.tidy-goals > li:last-child .tidy-goal { border-bottom: 1px solid var(--border); }
.tidy-goal > .tidy-icon { margin-top: 1px; color: var(--primary); }
.tidy-goal__title { margin: 0; font-weight: 700; line-height: 22px; color: var(--text-main); }
.tidy-goal__meta { margin: 2px 0 0; color: var(--text-muted); }
.tidy-goal__kind { font-weight: 700; color: var(--text-body); }
.tidy-goal__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.tidy-goal__points { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tidy-goal__steps { display: flex; gap: 6px; margin-top: var(--space-2); }
.tidy-goal__steps span { width: 12px; height: 12px; box-sizing: border-box; border-radius: var(--radius-full); border: 2px solid var(--primary); }
.tidy-goal__steps span[data-done] { background: var(--primary); }
.tidy-goal[data-state="done"] .tidy-goal__title { color: var(--text-muted); }
.tidy-goal[data-state="done"] .tidy-goal__points { color: var(--text-muted); }
a.tidy-goal:hover { background: var(--surface-subtle); }
/* Kid rows: the whole row opens the goal; 72px, kid type. */
.tidy-goal--kid { grid-template-columns: 32px minmax(0, 1fr) auto; min-height: 72px; padding: var(--space-4) var(--space-2); align-items: center; font-size: 18px; line-height: 26px; }
.tidy-goal--kid > .tidy-icon { width: 32px; height: 32px; margin-top: 0; }
.tidy-goal--kid .tidy-goal__title { font-size: 20px; line-height: 26px; }
.tidy-goal--kid .tidy-goal__meta { font-size: 18px; line-height: 26px; }
.tidy-goal--kid .tidy-goal__end > .tidy-icon { color: var(--text-muted); }

/* Kid choice: a big radio card. Used for "Who can see it?" and "Where should your points go?". */
.tidy-choices { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
.tidy-choices legend { margin-bottom: var(--space-3); padding: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--text-main); }
.tidy-choice { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; min-height: var(--touch-kid); padding: var(--space-3) var(--space-4); border: 2px solid var(--border-control); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-main); font-size: 18px; line-height: 26px; cursor: pointer; }
.tidy-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tidy-choice__mark { width: 24px; height: 24px; box-sizing: border-box; border-radius: var(--radius-full); border: 2px solid var(--border-control); background: var(--surface); }
.tidy-choice__label { font-weight: 700; }
.tidy-choice__hint { display: block; font-weight: 400; color: var(--text-muted); }
.tidy-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.tidy-choice:has(input:checked) .tidy-choice__mark { border: 7px solid var(--primary); }
.tidy-choice:has(input:checked) .tidy-choice__hint { color: var(--text-body); }
.tidy-choice:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Teach-back: a kid shows what they learned. Say it, show it or write it. */
.tidy-teachback { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--measure); }
.tidy-teachback__goal { margin: var(--space-1) 0 0; font-size: 18px; line-height: 26px; color: var(--text-muted); }
.tidy-teachback__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.tidy-teachback__modes .tidy-signal { min-height: 104px; }
.tidy-teachback__starters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tidy-teachback__starters .tidy-chip { min-height: var(--touch-min); font-size: 18px; }
.tidy-teachback .tidy-field textarea { font-size: 18px; line-height: 26px; min-height: 120px; }
.tidy-teachback__note { margin: calc(-1 * var(--space-3)) 0 0; font-size: 18px; line-height: 26px; color: var(--text-muted); text-align: center; }

/* Share check: the parent's yes before a kid's share leaves the household. Lives in a field panel. */
.tidy-sharecheck__quote { margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); color: var(--text-main); font-size: 18px; line-height: 26px; }
.tidy-sharecheck__quote footer { margin-top: var(--space-2); font-size: 16px; line-height: 22px; color: var(--text-muted); }
.tidy-sharecheck__media { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-subtle); object-fit: cover; }
.tidy-sharecheck__who, .tidy-sharecheck__check { margin: 0; color: var(--on-field-muted); }
.tidy-sharecheck__who strong, .tidy-sharecheck__check strong { color: var(--on-field); }

/* Learn post: a teach-back as the household and its circle see it. No counts, ever. */
.tidy-learnpost { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.tidy-learnpost__head { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.tidy-learnpost__head > .tidy-icon { margin-top: 1px; color: var(--primary); }
.tidy-learnpost__title { margin: 0; font-weight: 700; line-height: 22px; color: var(--text-main); }
.tidy-learnpost__meta { margin: 2px 0 0; color: var(--text-muted); }
.tidy-learnpost__text { margin: 0; font-size: 18px; line-height: 26px; color: var(--text-main); max-width: var(--measure); }
.tidy-learnpost__media { display: block; width: 100%; max-width: 360px; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--surface-subtle); object-fit: cover; }
.tidy-learnpost__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tidy-learnpost__responses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tidy-learnpost__response { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--primary-light); color: var(--text-main); }
.tidy-learnpost__response > .tidy-icon { margin-top: 1px; color: var(--primary); }
.tidy-learnpost__response p { margin: 0; }
.tidy-learnpost__answer { color: var(--text-body); }
.tidy-learnpost__response .tidy-btn { margin-top: var(--space-2); }
.tidy-learnpost__audience { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--text-muted); }
.tidy-learnpost__audience .tidy-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.tidy-learnpost--kid .tidy-learnpost__audience .tidy-icon { margin-top: 3px; }
.tidy-learnpost--kid .tidy-learnpost__title { font-size: 20px; line-height: 26px; }
.tidy-learnpost--kid .tidy-learnpost__response, .tidy-learnpost--kid .tidy-learnpost__audience, .tidy-learnpost--kid .tidy-learnpost__meta { font-size: 18px; line-height: 26px; }

/* Someday rail: points saved toward an experience together. A Rail with a kid's words. */
.tidy-someday { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.tidy-someday__head { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.tidy-someday__head > .tidy-icon { margin-top: 1px; color: var(--primary); }
.tidy-someday__note { margin: 0; color: var(--text-muted); }
.tidy-someday--kid .tidy-rail__label, .tidy-someday--kid .tidy-someday__note { font-size: 18px; line-height: 26px; }
.tidy-someday[data-state="waiting"] .tidy-rail__track { display: none; }  /* nothing to fill until a parent says yes */
.tidy-someday[data-state="reached"] .tidy-someday__note { color: var(--text-main); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .tidy-choice, .tidy-choice__mark { transition: none !important; }
}

/* Suggestion: one quiet line of guidance from the household's principles, under the brief. No box, border, shadow or icon. */
.tidy-suggestion { display: flex; flex-direction: column; max-width: var(--measure); }
.tidy-suggestion[hidden], .tidy-suggestion__why[hidden] { display: none; }
.tidy-suggestion__line { margin: 0; font-size: 18px; line-height: 26px; color: var(--text-body); }
.tidy-suggestion__why { padding: var(--space-2) 0 0; }
.tidy-suggestion__quote { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 24px; color: var(--text-body); }
.tidy-suggestion__source { margin: var(--space-1) 0 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.tidy-suggestion__actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.tidy-suggestion__link { min-height: var(--touch-min); padding: 0; background: none; border: 0; font: inherit; font-weight: 700; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tidy-suggestion__link:hover { color: var(--primary-dark); }

/* ---------- Person access: AccessRow, AskParent, UpForGrabs ---------- */

/* Shared: text for screen readers only, and a polite live line that says what just happened. */
.tidy-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tidy-live { margin: var(--space-2) 0 0; color: var(--text-body); }
.tidy-live:empty { display: none; }

/* Access sheet: what an AccessRow opens. Four levels as radios; adult sizes. On phones it sits at the bottom as a sheet. */
.tidy-access-sheet { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); box-sizing: border-box; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.tidy-access-sheet__title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--text-main); }
.tidy-access-sheet .tidy-choice { min-height: var(--touch-min); font-size: 16px; line-height: 22px; }
.tidy-access-sheet__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Ask a parent: in place of something this person can't open. A button, never a link. */
.tidy-ask { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); min-height: var(--row-min); padding: var(--space-3) 0; border-top: 1px solid var(--border); color: var(--text-body); }
.tidy-ask > .tidy-icon { color: var(--text-muted); }
.tidy-ask__title { margin: 0; font-weight: 700; line-height: 22px; color: var(--text-main); }
.tidy-ask__note { margin: 2px 0 0; color: var(--text-muted); }
.tidy-ask--kid { grid-template-columns: 32px minmax(0, 1fr) auto; min-height: 72px; padding: var(--space-4) var(--space-2); font-size: 18px; line-height: 26px; }
.tidy-ask--kid > .tidy-icon { width: 32px; height: 32px; }
.tidy-ask--kid .tidy-ask__title { font-size: 20px; line-height: 26px; }
.tidy-ask--kid .tidy-badge { font-size: 16px; line-height: 20px; padding: 6px 12px; white-space: normal; text-align: center; }
@media (max-width: 479px) {
  .tidy-ask, .tidy-ask--kid { grid-template-columns: 24px minmax(0, 1fr); row-gap: var(--space-2); }
  .tidy-ask--kid { grid-template-columns: 32px minmax(0, 1fr); }
  .tidy-ask > .tidy-btn, .tidy-ask > .tidy-badge { grid-column: 2; justify-self: start; }
}

/* Goal rows: offered (a parent's idea waiting on the kid) and taken (an up-for-grabs job someone else has). */
.tidy-goal[data-state="taken"] .tidy-goal__title { color: var(--text-muted); }
.tidy-goal--kid .tidy-goal__end .tidy-btn { white-space: nowrap; }
@media (max-width: 479px) {
  .tidy-goal--kid:has(.tidy-goal__end .tidy-btn) { grid-template-columns: 32px minmax(0, 1fr); row-gap: var(--space-2); }
  .tidy-goal--kid .tidy-goal__end:has(.tidy-btn) { grid-column: 2; align-items: flex-start; }
}

/* Dialog: one task above the page (#654). A centred dialog from 640px; below 640px it is a bottom sheet, always. The page provides the behaviour (focus moves in and stays in, Escape closes, focus goes back to the opener): see the Dialog card. */
.tidy-dialog-scrim { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: var(--space-5); background: var(--scrim); }
.tidy-dialog-scrim[hidden] { display: none; }
.tidy-dialog { display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; width: 100%; max-width: 540px; max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); color: var(--text-body); box-shadow: var(--shadow-lg); }
.tidy-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.tidy-dialog__title { margin: 0; padding-top: 11px; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--text-main); }
.tidy-dialog__close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--touch-min); height: var(--touch-min); margin: 0 -12px 0 0; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.tidy-dialog__close:hover { background: var(--surface-subtle); color: var(--text-main); }
.tidy-dialog__body > :first-child { margin-top: 0; }
.tidy-dialog__body > :last-child { margin-bottom: 0; }
.tidy-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@keyframes tidy-sheet-in { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 639px) {
  .tidy-dialog-scrim { align-items: flex-end; padding: 0; }
  .tidy-dialog { max-width: none; max-height: 92vh; padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-md); animation: tidy-sheet-in 250ms cubic-bezier(0.4, 0, 0.2, 1); }
  .tidy-dialog__actions > .tidy-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tidy-dialog { animation: none; }
  .tidy-dialog__close { transition: none; }
}

/* Initials: a person's initials in a round badge, where a photo would sit (#654, from TidyFamily's #326 badge). It stands beside the name, so it is aria-hidden. Pick a size, or set width and height where it sits. A kid's allowed Google photo can sit inside. */
.tidy-initials { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; overflow: hidden; border-radius: var(--radius-full); background: var(--primary-light); color: var(--primary-dark); font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; line-height: 1; }
.tidy-initials--sm { width: 32px; height: 32px; font-size: 13px; }
.tidy-initials--md { width: 40px; height: 40px; font-size: 16px; }
.tidy-initials--lg { width: 56px; height: 56px; font-size: 20px; }
.tidy-initials > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- The day ahead: CheckIn, Timeline moves, LoadWord, ComingUp, Overlap (tidy-nest #752-#756) ---------- */
.tidy-checkin { display: flex; flex-direction: column; gap: var(--space-3); }
.tidy-checkin__q { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; color: var(--text-main); }
.tidy-checkin__answers { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tidy-checkin__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); }
.tidy-checkin__scope { margin: 0; color: var(--text-muted); }
.tidy-timeline__move { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); padding-bottom: var(--space-4); margin-top: calc(-1 * var(--space-2)); }
.tidy-timeline__move-rail { display: flex; justify-content: center; }
.tidy-timeline__move-rail::before { content: ""; width: 0; border-left: 2px dashed var(--rail); }
.tidy-timeline__move-text { margin: 0; color: var(--text-muted); }
.tidy-timeline__move[data-tight] .tidy-timeline__move-text { color: var(--accent-dark); }
.tidy-timeline__attrib { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.tidy-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.tidy-day-head h3 { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--text-main); }
.tidy-load__why { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.tidy-load__why li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); color: var(--text-body); }
.tidy-load__why li:last-child { border-bottom: 0; }
.tidy-ahead { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tidy-ahead__day { border-top: 1px solid var(--border); }
.tidy-ahead__day:last-child { border-bottom: 1px solid var(--border); }
.tidy-ahead__btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: var(--space-1) var(--space-3); align-items: center; text-align: left; min-height: 64px; padding: var(--space-3) 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.tidy-ahead__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tidy-ahead__date { font-weight: 700; color: var(--text-main); }
.tidy-ahead__line { grid-column: 1; color: var(--text-body); }
.tidy-ahead__chev { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--text-muted); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); }
.tidy-ahead__btn[aria-expanded="true"] .tidy-ahead__chev { transform: rotate(90deg); }
.tidy-ahead__panel { padding: 0 0 var(--space-4); }
.tidy-overlap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tidy-overlap__item { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4) 0; border-radius: var(--radius-sm); background: var(--accent-light); color: var(--text-main); }
.tidy-overlap__line { margin: 0; color: var(--text-main); }
.tidy-overlap__actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
.tidy-overlap .tidy-suggestion__link { display: inline-flex; align-items: center; color: var(--primary-dark); }
@media (prefers-reduced-motion: reduce) { .tidy-ahead__chev { transition: none; } }
/* @design-system patterns: end */