:root {
  --bg: #fdf6f0;
  --card: #fffdfb;
  --border: #f0dfd3;
  --text: #3f3236;
  --text-muted: #87766f;
  --text-secondary: #6b5a5e;
  --teal: #2dd4bf;
  --green: #84cc16;
  --lime: #84cc16;
  --lime-light: #ecfccb;
  --amber: #f59e0b;
  --amber-light: #fbbf24;
  --purple: #e8a0bf;
  --coral: #f4978e;
  --red: #ef4444;

  /* Softer, more saturated companions to the palette above - used for the
     Dashboard hero/focus tiles and any future big-illustrated-card work
     (see visual-refresh direction). Kept as their own tokens rather than
     reusing --purple/--lime/--amber directly since those already have an
     established job (task priority pills, gauge states) at a punchier
     saturation than a full-tile background wants. */
  --sage: #8fbe87;
  --sage-soft: #eaf5e7;
  --lavender: #a798d9;
  --lavender-soft: #eeeafd;
  --gold: #d9a84f;
  --gold-soft: #fff4d9;
  --coral-soft: #ffe9e4;
  --teal-soft: #e3f6f5;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background: linear-gradient(160deg, #fdf1e8 0%, #fbeaf0 45%, #eef7f0 100%);
  background-attachment: fixed;
}

body {
  padding-bottom: 84px;
  min-height: 100vh;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 8px;
}

h1,
h2,
h3 {
  margin: 0 0 4px;
}

h1 {
  font-size: 1.4rem;
}

h2 {
  font-size: 1.05rem;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.01em;
}

p {
  color: var(--text-secondary);
  margin: 0;
}

.settings-gear-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(220, 170, 160, 0.18);
  transition: color 0.15s ease, transform 0.1s ease;
}

/* ============================================================
   Dashboard hero + focus grid (visual refresh round 1) - replaces the
   old plain centered .header. One big illustrated card up top instead
   of a stack of same-weight cards, plus four tappable "at a glance"
   tiles surfacing one real number/status each from tabs the household
   would otherwise have to go open individually (Tasks, Chores &
   Schedule, Meals, capacity) - populated from data the app already
   loads on init(), not a new fetch. See app.js's renderFocus* functions,
   called from the same load functions that already feed the fuller
   views those tiles link to, so the tiles never drift from what's on
   the actual tab.
   ============================================================ */
.dashboard-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 20px 20px 22px;
  min-height: 180px;
  background: linear-gradient(135deg, #fff2ea, #f8edf7 55%, #edf8ef);
  box-shadow: 0 12px 34px rgba(104, 72, 70, 0.09);
  margin-bottom: 14px;
}

.dashboard-hero-copy {
  position: relative;
  z-index: 2;
  width: 66%;
}

.dashboard-hero-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 800;
  color: var(--coral);
  margin-bottom: 4px;
}

.dashboard-hero .brand-title {
  text-align: left;
  font-size: 2.1rem;
  line-height: 1;
  margin: 0 0 8px;
}

.dashboard-hero-sub {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
  margin: 0;
}

.dashboard-hero-logout {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.dashboard-hero-art {
  position: absolute;
  right: -12px;
  bottom: -20px;
  width: 44%;
  max-width: 220px;
  filter: drop-shadow(0 9px 10px rgba(84, 59, 58, 0.1));
}

.focus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-bottom: 14px;
}

.focus-tile {
  border: 0;
  border-radius: 22px;
  padding: 15px;
  text-align: left;
  min-height: 118px;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(88, 65, 63, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease;
}

.focus-tile:active {
  transform: scale(0.97);
}

.focus-tile-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.focus-tile-number {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 0.9;
  margin-bottom: 2px;
}

.focus-tile-label {
  font-size: 0.92rem;
  font-weight: 700;
}

.focus-tile-sub {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-muted);
  margin-top: 3px;
}

.focus-tile-tonight { background: var(--coral-soft); }
.focus-tile-family { background: var(--lavender-soft); }
.focus-tile-meals { background: var(--sage-soft); }
.focus-tile-capacity { background: var(--teal-soft); }

.focus-tile-progress {
  height: 8px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 10px;
}

.focus-tile-progress span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--teal);
  transition: width 0.3s ease;
}

@media (max-width: 380px) {
  .dashboard-hero-copy { width: 70%; }
  .dashboard-hero-art { width: 38%; right: -16px; }
  .focus-tile { min-height: 108px; padding: 12px; }
  .focus-tile-number { font-size: 1.6rem; }
}

.settings-gear-btn:hover {
  color: var(--text);
}

.settings-gear-btn:active {
  transform: scale(0.94);
}

/* Settings panel - a dropdown from the header gear icon holding
   everything that personalizes the household (branding, family
   roster, capacity hours, tablet display PIN, notifications) rather
   than leaving those forms permanently stacked on the Dashboard. */
.settings-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(63, 50, 54, 0.35);
  z-index: 40;
}

.settings-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 41;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 12px 32px rgba(63, 50, 54, 0.22);
  padding: 16px 16px 24px;
  max-width: 560px;
  margin: 0 auto;
  animation: settings-panel-drop 0.18s ease;
}

@keyframes settings-panel-drop {
  from {
    transform: translateY(-12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.settings-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.settings-panel-header .section-title {
  margin-bottom: 0;
}

.settings-close-btn {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
}

.settings-close-btn:hover {
  color: var(--text);
}

.header .tagline {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* --brand-font / --brand-color are set at runtime by branding.js from
   the household's own chosen dashboard name/font/color (editable at
   setup and from the Hub's Settings card) - the literal values here are
   just the fallback before that script runs. */
.brand-title {
  font-family: var(--brand-font, "Dancing Script", cursive);
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  color: var(--brand-color, var(--coral));
  margin: 0 0 2px;
  line-height: 1.15;
}

/* Daily scripture banner - persists above #app on every tab (outside the
   tab-switched <section class="view"> elements, see index.html). Quiet and
   small on purpose: a calm daily touch, not a loud attention-grabber. */
#scripture-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  text-align: center;
  padding: 8px 16px;
  background: linear-gradient(120deg, #fff3e0, #fdeaf1);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.35;
}

#scripture-text {
  color: var(--text-secondary);
  font-style: italic;
}

#scripture-ref {
  font-family: "Luckiest Guy", cursive;
  color: var(--coral);
  margin-left: 7px;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* Fun display font for prominent, short titles only - page/section
   headings, not dense body or list text (readability at a glance matters
   more than delight there). */
.view-header h1 {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: 1.7rem;
}

.brand-verse {
  font-family: var(--brand-font, "Dancing Script", cursive);
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 10px;
}

.logout-link {
  display: block;
  margin: 8px auto 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

/* Per-view themed headers */
.view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 20px;
  padding: 16px 18px;
}

.view-header h1 {
  margin: 0;
}

.view-header-icon {
  display: flex;
  flex-shrink: 0;
}

#view-tasks .view-header {
  background: linear-gradient(120deg, #ffe8df, #fff9f4);
}
#view-tasks .view-header-icon {
  color: var(--coral);
}

#view-kids .view-header {
  background: linear-gradient(120deg, #ffe1ec, #fff6d8 55%, #e6f7ee);
}
#view-kids .view-header-icon {
  color: #ec4899;
}

#view-routines .view-header {
  background: linear-gradient(120deg, #e3e8fb, #f4e9fb);
}
#view-routines .view-header-icon {
  color: #818cf8;
}

#view-meals .view-header {
  background: linear-gradient(120deg, #ffe9df, #eaf7ee);
}
#view-meals .view-header-icon {
  color: var(--lime);
}

#view-budget .view-header {
  background: linear-gradient(120deg, #e6f7ee, #eaf3fb);
}
#view-budget .view-header-icon {
  color: #0d9488;
}

#view-purge .view-header {
  background: linear-gradient(120deg, #fff2d9, #ffe8df);
}
#view-purge .view-header-icon {
  color: var(--amber);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 16px rgba(220, 170, 160, 0.1);
}

.section-title {
  margin-bottom: 12px;
}

/* Capacity gauges */
.gauge-row {
  display: flex;
  gap: 12px;
}

.gauge {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 2px 16px rgba(220, 170, 160, 0.1);
}

.gauge-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.gauge-track {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 8px;
}

.gauge-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.gauge-fill.ok {
  background: var(--lime);
}

.gauge-fill.warn {
  background: var(--amber);
}

.gauge-fill.over {
  background: var(--red);
}

.gauge-value {
  font-size: 0.9rem;
  font-weight: 600;
}

.gauge-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Savings Goals (Budget tab) - progress bar reuses .gauge-track/.gauge-fill
   above; this is just the surrounding card spacing + the pacing guide line. */
.savings-goal-progress {
  padding: 0 14px 4px;
}

.savings-goal-guide {
  padding: 0 14px 12px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.savings-goal-guide.success {
  color: var(--lime);
  font-weight: 600;
}

.savings-contribution-history {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Brain dump */
textarea.dump-input {
  width: 100%;
  min-height: 90px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  padding: 12px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

textarea.dump-input:focus {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}

.btn {
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--teal);
  color: #04201c;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: wait;
}

.btn-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.status-msg {
  font-size: 0.85rem;
  margin-top: 8px;
  min-height: 1.1em;
}

.status-msg.error {
  color: var(--red);
}

.status-msg.success {
  color: var(--green);
}

/* Task list */
.task-group {
  margin-bottom: 20px;
}

.task-group-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.task-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.task-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
}

.task-check.done {
  background: var(--green);
  border-color: var(--green);
}

.task-check.done::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #04200f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.task-body {
  flex: 1;
  min-width: 0;
}

.task-title {
  font-size: 0.95rem;
  word-break: break-word;
}

.task-title.done {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-meta {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.priority-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.priority-high {
  background: var(--red);
}

.priority-medium {
  background: var(--amber-light);
}

.priority-low {
  background: var(--text-muted);
}

.empty-state {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 12px 4px;
}

.today-tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.today-tasks-header .section-title {
  margin-bottom: 0;
}

.today-tasks-remaining {
  font-size: 0.78rem;
  font-weight: 600;
}

.today-tasks-remaining.ok {
  color: var(--green);
}

.today-tasks-remaining.warn {
  color: var(--amber);
}

.today-tasks-remaining.over {
  color: var(--red);
}

.today-tasks-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.today-tasks-overflow {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.tonight-task-item {
  margin-bottom: 8px;
}

.tonight-task-item .task-row {
  margin-bottom: 0;
  border-radius: 12px 12px 0 0;
  border-bottom: none;
}

.tonight-task-actions {
  display: flex;
  gap: 6px;
  padding: 6px 10px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
}

.tonight-task-actions .swap-toggle-btn {
  margin-top: 0;
  padding: 4px 10px;
  font-size: 0.72rem;
}

.today-tasks-add-row {
  margin-top: 6px;
}

/* Kids */
#view-kids .kid-column {
  margin-bottom: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 4px 18px rgba(230, 170, 150, 0.12);
  border-left: 6px solid var(--coral);
}

#view-kids .kid-column:nth-of-type(4n+2) {
  border-left-color: var(--teal);
}

#view-kids .kid-column:nth-of-type(4n+3) {
  border-left-color: var(--lime);
}

#view-kids .kid-column:nth-of-type(4n+4) {
  border-left-color: #a78bfa;
}

/* .kid-column-accent overrides the nth-of-type fallback above with the
   member's own configured color once one is known (see
   applyMemberAccent() in app.js). */
#view-kids .kid-column.kid-column-accent {
  border-left-color: var(--accent, #a78bfa);
}

#view-kids .kid-column h2 {
  font-size: 1.25rem;
  color: var(--text);
}

.kid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.streak-badge {
  display: inline-flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #92400e;
  background: linear-gradient(90deg, #fff4d6, #ffe8b8);
  border: none;
  border-radius: 999px;
  padding: 6px 16px;
}

.kid-empty-state {
  font-size: 1rem;
  font-weight: 600;
  color: var(--lime);
}

.chore-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 8px;
}

#view-kids .task-check {
  width: 34px;
  height: 34px;
  border-width: 3px;
  border-color: var(--lime);
}

#view-kids .chore-row .task-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.chore-day {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  min-width: 34px;
}

.add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.add-form label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: -4px;
}

.add-form input,
.add-form select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
}

/* Routines */
.routine-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.routine-row:last-child {
  border-bottom: none;
}

.routine-day {
  min-width: 78px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--purple);
  text-transform: capitalize;
}

.routine-title {
  font-size: 0.95rem;
}

.routine-time {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Bottom nav */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  z-index: 10;
}

.tab-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  font-size: 0.68rem;
  cursor: pointer;
  font-family: inherit;
}

.tab-btn .tab-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.tab-btn.active {
  color: var(--teal);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.install-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  margin: 4px 0 14px;
}

/* Meal rotation */
.meal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
}

.meal-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.meal-day {
  min-width: 40px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--purple);
  text-transform: uppercase;
}

.meal-title-block {
  flex: 1;
  min-width: 0;
}

.meal-title {
  font-size: 0.95rem;
}

.meal-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.meal-chevron {
  color: var(--text-muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.meal-card.expanded .meal-chevron {
  transform: rotate(90deg);
  color: var(--teal);
}

.meal-detail {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
}

.meal-card.expanded .meal-detail {
  display: block;
  padding-top: 12px;
}

.meal-detail-row {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.meal-detail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* This Week - day/slot layout */
.day-plan-card {
  margin-bottom: 18px;
}

.day-plan-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--coral);
  margin-bottom: 8px;
}

/* Day header doubles as the collapse toggle for that day's meals (see
   .section-collapse-* below) - flex row so the chevron sits at the end
   of the same line as the day name. */
.day-plan-title.section-collapse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

/* ============================================================
   Generic section collapse/expand (Dashboard's Calendar + Tonight's
   window cards, Tasks tab's Completed section, and each day in the
   Meals tab's This Week view) - one shared pattern: a chevron button
   inside an otherwise-static header toggles a `.section-collapse-body`
   sibling between shown and hidden. `.section-open` is applied to the
   shared ancestor (the `.card` or `.day-plan-card` that both the header
   and body live inside) rather than to the head/body individually, so
   one class toggle drives both the chevron rotation and the body's
   visibility via descendant selectors below. It's present by default in
   markup for sections that start open, or added by JS on first
   expand for sections that start collapsed - either way there's a
   single source of truth per section.
   ============================================================ */
.section-collapse-head {
  flex-wrap: nowrap;
}

.section-collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  border-radius: 8px;
}
.section-collapse-btn:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.section-chevron {
  display: inline-flex;
  transition: transform 0.15s ease;
  transform: rotate(0deg);
}
.section-open .section-chevron {
  transform: rotate(90deg);
  color: var(--teal);
}

.section-collapse-body {
  display: none;
}
.section-open .section-collapse-body {
  display: block;
}

.slot-empty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
}

.slot-empty-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.slot-empty-row .swap-picker {
  flex-basis: 100%;
  margin-top: 0;
}

/* Grocery list */
.grocery-group {
  margin-bottom: 16px;
}

.grocery-group-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.grocery-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
}

.grocery-item-name {
  flex: 1;
}

.grocery-item-amount {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Meals sub-tabs */
.subtabbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.subtab-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.subtab-btn.active {
  background: var(--teal);
  color: #04201c;
  border-color: var(--teal);
  font-weight: 600;
}

.subview {
  display: none;
}

.subview.active {
  display: block;
}

/* Eaters / modifications / ingredients detail */
.eater-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.eater-badge {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
}

.mod-row {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* Per-person color: driven by each element's own --accent custom
   property (set inline from the family member's configured color - see
   applyMemberAccent() in app.js), rather than a fixed rule per real
   name, so any number of configured members share these same rules. */
.mod-person,
.agenda-owner-badge {
  font-weight: 700;
  color: var(--accent, var(--purple));
}

.eater-badge {
  color: var(--accent, var(--text-secondary));
  border-color: color-mix(in srgb, var(--accent, var(--border)) 55%, transparent);
}

/* Schedule tab */
.schedule-preview-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.schedule-preview-day {
  flex-shrink: 0;
  min-width: 84px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}

.schedule-preview-day.is-today {
  border-color: var(--purple);
}

.schedule-preview-weekday {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.schedule-preview-daynum {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 2px 0 6px;
}

.schedule-preview-counts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.schedule-repeat-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0;
}

.schedule-repeat-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.schedule-repeat-controls select,
.schedule-repeat-controls input[type="date"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
}

.schedule-recurrence-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.meal-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chore-badge {
  display: inline-block;
  background: var(--amber-light);
  color: #5c3a00;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.schedule-range-fields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.schedule-range-fields input[type="date"] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
}

.agenda-owner-badge {
  font-weight: 600;
  margin-left: 6px;
}

.agenda-owner-badge:first-child {
  margin-left: 0;
}

.ingredient-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.ingredient-row:last-child {
  border-bottom: none;
}

.ingredient-amount {
  color: var(--text-muted);
  font-size: 0.78rem;
  flex-shrink: 0;
  text-align: right;
}

/* Swap picker */
.swap-toggle-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--teal);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  margin-top: 4px;
}

#dump-mic.active {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.swap-picker {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  display: none;
}

.swap-picker.open {
  display: block;
}

.swap-option {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

.swap-option:hover,
.swap-option:active {
  background: var(--bg);
}

/* Category / owner filters */
.filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.filter-chip {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.filter-chip.active {
  background: var(--purple);
  color: #3a1626;
  border-color: var(--purple);
  font-weight: 600;
}

.filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.filter-select {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-family: inherit;
  flex: 1;
  min-width: 120px;
}

.owner-checkboxes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.owner-check-label {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}

.owner-check-label input {
  margin: 0;
}

.owner-check-label.checked {
  border-color: var(--teal);
  color: var(--teal);
}

.chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 8px 5px 12px;
  font-size: 0.8rem;
}

.chip-remove {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px 4px;
}

.chore-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.chore-delete-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px 6px;
}

.chore-delete-btn:hover {
  color: var(--pink, #ec4899);
}

/* Task cards (edit-in-place) */
.task-row {
  cursor: pointer;
}

.task-edit-panel {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.task-row.expanded .task-edit-panel {
  display: block;
}

.task-edit-panel .add-form {
  margin-top: 0;
}

.task-edit-panel select,
.task-edit-panel input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
}

.completed-row {
  opacity: 0.7;
}

.completed-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Calendar */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cal-nav-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

.cal-month-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-width: 100px;
  text-align: center;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 12px;
}

.cal-dow {
  font-size: 0.65rem;
  text-align: center;
  color: var(--text-muted);
  text-transform: uppercase;
  padding-bottom: 4px;
}

.cal-day {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  cursor: pointer;
  position: relative;
  color: var(--text-secondary);
}

.cal-day.empty {
  border: none;
  background: none;
  cursor: default;
}

.cal-day.today {
  border-color: var(--teal);
  color: var(--teal);
  font-weight: 700;
}

.cal-day.selected {
  background: var(--purple);
  color: #3a1626;
  font-weight: 700;
}

.cal-day-dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}

.cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
}

.cal-dot.event {
  background: var(--purple);
}

.cal-agenda {
  margin-top: 14px;
}

.cal-event-source {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Synced iCloud events get a small pill + icon so they read as visually
   distinct from Hub-created ones at a glance, not just via text. */
.cal-event-source.is-synced {
  background: var(--lime-light);
  color: #3f6212;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.cal-event-source-icon {
  display: inline-flex;
}

.cal-event-source-icon svg {
  display: block;
}

.cal-owner-filter-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

#cal-owner-filter {
  margin-bottom: 12px;
}

/* Owner "assigned to" badges - a rounded pill with a tinted background
   rather than plain coloured text, so who's assigned reads clearly at a
   glance rather than blending into the row. */
.owner-pill {
  display: inline-block;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 4px;
  /* Driven by the element's own --accent custom property (set inline
     from the member's configured color - see applyMemberAccent() in
     app.js), so any number of configured members share this one rule. */
  background: color-mix(in srgb, var(--accent, var(--border)) 18%, white);
  border: 1px solid color-mix(in srgb, var(--accent, var(--border)) 55%, transparent);
  color: var(--accent, var(--text));
}

.owner-pill:first-child {
  margin-left: 0;
}

/* Family settings card */
.family-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.family-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
  color: white;
  background: var(--accent, var(--purple));
}

.family-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-member-name-input {
  flex: 1 1 120px;
  min-width: 90px;
}

.family-member-photo-input {
  max-width: 140px;
}

.cal-agenda-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.cal-agenda-owners {
  margin-left: auto;
  flex-shrink: 0;
}

/* Meal add/edit form */
.form-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.ingredient-form-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.ingredient-form-row .form-input {
  flex: 1;
  min-width: 90px;
}

/* Grocery cost estimate + budget nudge */
.grocery-cost-input {
  width: 66px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 4px 6px;
  font-size: 0.8rem;
  text-align: right;
}

.grocery-nudge {
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}

.grocery-nudge-ok {
  background: var(--lime-light);
  color: #365314;
}

.grocery-nudge-warn {
  background: #fef3c7;
  color: #92400e;
}

.grocery-nudge-over {
  background: #fee2e2;
  color: #991b1b;
}

/* Budget tab */
.budget-month-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.budget-month-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.budget-month-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.budget-amount-input {
  text-align: right;
}

.trend-row .grocery-item-name {
  flex: 0 0 44px;
}

.trend-status {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
}

.trend-status-surplus {
  background: var(--lime-light);
  color: #365314;
}

.trend-status-deficit {
  background: #fee2e2;
  color: #991b1b;
}

/* Sleep / Shortcuts panel */
.shortcuts-panel {
  margin-top: 10px;
}

.shortcuts-key {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  word-break: break-all;
  text-align: left;
  max-width: 60%;
}

.shortcuts-instructions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.shortcuts-instructions .mod-row {
  font-size: 0.8rem;
}

.notifications-note {
  font-size: 0.82rem;
  margin-bottom: 4px;
}

/* Purge & Organize */
.purge-config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 100px;
}

.purge-config-field label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.btn-block-dashed {
  display: block;
  width: 100%;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  margin-top: 6px;
}

.zone-status-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

.zone-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
}

.zone-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.zone-detail {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  cursor: default;
}

.zone-row.expanded .zone-detail {
  display: block;
}

.purge-box-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.purge-box-row .purge-config-field {
  min-width: 90px;
}

.purge-box-row input {
  max-width: 90px;
}

/* Budget planner */
.planner-scenario-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.planner-scenario-btn {
  flex: 1;
  min-width: 130px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.planner-bar {
  margin-bottom: 12px;
}

.planner-bar-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 5px;
}

.planner-bar-amount {
  font-weight: 700;
}

.planner-savings-card {
  background: var(--lime-light);
  border-color: #bbf7a855;
}

.planner-bottomline-card {
  border: 2px solid var(--teal);
}

.planner-food-banner {
  border-radius: 10px;
  padding: 14px 16px;
  color: #fff;
}

.planner-food-banner-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.planner-food-banner-sub {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-top: 4px;
}

.planner-strike {
  color: var(--coral);
  text-decoration: line-through;
  margin-right: 6px;
}

.planner-target {
  color: var(--green);
  font-weight: 700;
}

/* Celebratory task completion (adult tasks) - deliberately not subtle,
   the equivalent of the kids' flame streak but built from plain colored
   shapes rather than emoji, per the no-emoji rule elsewhere in the UI. */
.celebrate-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -14px);
  background: var(--green);
  color: #fff;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 999;
}

.celebrate-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.celebrate-burst {
  position: fixed;
  top: 18px;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 998;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confetti-burst 0.8s ease-out forwards;
}

.task-steps-panel {
  margin-bottom: 6px;
}

.task-steps-list .inbox-item {
  padding: 8px 12px;
}

.task-steps-list .task-check {
  width: 22px;
  height: 22px;
}

.inbox-item-text.done {
  text-decoration: line-through;
  color: var(--text-muted);
}

.focus-timer-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.focus-timer-display {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.focus-timer-display.done {
  color: var(--coral);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.inbox-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
}

.inbox-input:focus {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}

.inbox-list,
.slipped-tasks-list {
  margin-top: 10px;
}

.inbox-item,
.slipped-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.inbox-item-text,
.slipped-task-title {
  flex: 1;
  min-width: 140px;
}

.slipped-task-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.inbox-item-actions,
.slipped-task-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

@keyframes confetti-burst {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--rot));
    opacity: 0;
  }
}