/* ============================================================
   COMFORT THEME - CALM, READABLE, SOFT-DEPTH UI
   ============================================================ */

[data-theme="comfort"] {
  --comfort-bg: #f3f2ee;
  --comfort-surface: #f8f7f4;
  --comfort-surface-raised: #fbfaf7;
  --comfort-surface-recessed: #ece9e2;
  --comfort-text-primary: #292a2b;
  --comfort-text-secondary: #5e6163;
  --comfort-text-muted: #7c7e80;
  --comfort-accent-primary: #4f6f8f;
  --comfort-accent-secondary: #557c86;
  --comfort-success: #62806a;
  --comfort-warning: #a37b46;
  --comfort-error: #975c56;
  --comfort-border: rgba(120, 114, 103, 0.45);
  --comfort-shadow-small: 0 2px 5px rgba(75, 72, 67, 0.12), -1px -1px 0 rgba(255, 255, 255, 0.7) inset;
  --comfort-shadow-medium: 0 6px 16px rgba(77, 74, 69, 0.14), -1px -1px 0 rgba(255, 255, 255, 0.72) inset;
  --comfort-shadow-large: 0 14px 32px rgba(73, 70, 65, 0.2), -1px -1px 0 rgba(255, 255, 255, 0.74) inset;
  --comfort-inset-shadow: inset 0 2px 5px rgba(76, 72, 66, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.66);

  --bg: var(--comfort-bg);
  --bg-elev: var(--comfort-surface);
  --bg-glass: rgba(248, 247, 244, 0.9);
  --text: var(--comfort-text-primary);
  --text-soft: var(--comfort-text-secondary);
  --primary: var(--comfort-accent-primary);
  --primary-strong: #425f79;
  --primary-soft: rgba(79, 111, 143, 0.18);
  --accent: var(--comfort-accent-secondary);
  --accent-soft: rgba(85, 124, 134, 0.16);
  --urge-accent: #a66f4a;
  --urge-accent-soft: rgba(166, 111, 74, 0.18);
  --avoidance-accent: #687482;
  --avoidance-accent-soft: rgba(104, 116, 130, 0.2);
  --action-card-shadow: var(--comfort-shadow-medium);
  --action-card-border: rgba(255, 255, 255, 0.55);
  --border: var(--comfort-border);
  --chip: #efede7;
  --danger: var(--comfort-error);
  --warning-bg: rgba(163, 123, 70, 0.18);
  --warning-text: #5e4930;
  --shadow: var(--comfort-shadow-medium);
  --dropdown-bg: #f7f6f2;
  --dropdown-border: rgba(126, 122, 114, 0.32);
  --dropdown-text: var(--comfort-text-primary);
  --dropdown-focus-border: var(--comfort-accent-primary);
  --dropdown-focus-shadow: 0 0 0 3px rgba(79, 111, 143, 0.22);
  --read-input-text: var(--comfort-text-primary);
  --read-placeholder: #66686a;
  --modal-backdrop: rgba(47, 49, 50, 0.34);
}




[data-theme="comfort"] body,
[data-theme="comfort"] .app-bg {
  background: linear-gradient(180deg, #f3f2ee 0%, #efede9 100%);
}




[data-theme="comfort"] .topbar,
[data-theme="comfort"] .card,
[data-theme="comfort"] .chart-card,
[data-theme="comfort"] .summary-panel,
[data-theme="comfort"] .settings-block,
[data-theme="comfort"] .time-record-card,
[data-theme="comfort"] .optional-group,
[data-theme="comfort"] .history-item,
[data-theme="comfort"] .results-type-row,
[data-theme="comfort"] .filter-row,
[data-theme="comfort"] .chore-session-card,
[data-theme="comfort"] .chore-game-mode-card,
[data-theme="comfort"] .chore-game-mode-status,
[data-theme="comfort"] .chore-selection-summary,
[data-theme="comfort"] .chore-settings-card,
[data-theme="comfort"] .end-week-progress-card,
[data-theme="comfort"] .end-week-completion-state,
[data-theme="comfort"] .end-week-group-card,
[data-theme="comfort"] .motivation-modal-card {
  background: linear-gradient(165deg, var(--comfort-surface-raised), var(--comfort-surface));
  border: 1px solid var(--comfort-border);
  box-shadow: var(--comfort-shadow-medium);
}




/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="comfort"] .btn-title:where(:not([data-cosmetic-skin] *)),
[data-theme="comfort"] .stat-card .value,
[data-theme="comfort"] :is(h1, h2, h3, h4, h5, h6):where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))),
[data-theme="comfort"] .results-section-title:where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: var(--comfort-text-primary) !important;
}




/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="comfort"] li,
[data-theme="comfort"] .step-help,
[data-theme="comfort"] .step-label,
[data-theme="comfort"] .btn-sub:where(:not([data-cosmetic-skin] *)),
[data-theme="comfort"] .k,
[data-theme="comfort"] .v,
[data-theme="comfort"] .stat-card .label,
[data-theme="comfort"] :is(p, span:where(:not(.cp-icon, .chore-item-text, .end-week-task-title, .end-week-task-points)), label):where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))),
[data-theme="comfort"] :is(.field-help, .chart-summary, .chart-empty):where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: var(--comfort-text-secondary) !important;
}




[data-theme="comfort"] .empty-state-subtitle,
[data-theme="comfort"] .tagline,
[data-theme="comfort"] input::placeholder,
[data-theme="comfort"] textarea::placeholder {
  opacity: 1;
}

/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="comfort"] .tagline,
[data-theme="comfort"] .empty-state-subtitle:where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: var(--comfort-text-muted) !important;
}




[data-theme="comfort"] .time-record-display-meta,
[data-theme="comfort"] .input-hint {
  color: #66686a !important;
}




[data-theme="comfort"] .primary-btn,
[data-theme="comfort"] .action-btn,
[data-theme="comfort"] .chip-btn,
[data-theme="comfort"] .range-btn,
[data-theme="comfort"] .results-type-btn,
[data-theme="comfort"] .nav-btn,
[data-theme="comfort"] .theme-toggle,
[data-theme="comfort"] .time-record-display,
[data-theme="comfort"] .delete-btn {
  border-radius: 14px;
  /* Buttons must read as raised surfaces against the near-white cards, so they sit a few shades
     below the card tone and keep a clearly visible edge. */
  background: linear-gradient(165deg, #e9e5da, #dbd6c9);
  border: 1px solid rgba(88, 81, 69, 0.62);
  color: var(--comfort-text-primary);
  box-shadow: var(--comfort-shadow-small);
}




[data-theme="comfort"] .primary-btn {
  background: linear-gradient(165deg, #557795, #3f5f7e);
  border-color: rgba(47, 71, 95, 0.75);
  color: #ffffff;
}

/* The floating menu button and the Ledger segmented controls are not .action-btn/.chip-btn, so
   they need the raised treatment of their own to stay visible on the near-white surfaces. */
[data-theme="comfort"] .floating-menu-button {
  background: linear-gradient(145deg, #e4dfd2, #d0cabb);
  border: 1px solid rgba(88, 81, 69, 0.62);
  color: var(--comfort-text-primary);
  box-shadow: 0 10px 20px rgba(53, 51, 48, 0.24);
}

[data-theme="comfort"] .ledger-tab:not(.active),
[data-theme="comfort"] .ledger-range-btn:not(.active) {
  background: linear-gradient(165deg, #e9e5da, #dbd6c9);
  border-color: rgba(88, 81, 69, 0.5);
  box-shadow: var(--comfort-shadow-small);
}

/* Unselected wizard/category cards are buttons too, so they get the same raised treatment. The
   selected state keeps its own accent styling. */
[data-theme="comfort"] .choice-card:not(.selected) {
  background: linear-gradient(165deg, #e9e5da, #dbd6c9);
  border-color: rgba(88, 81, 69, 0.62);
}




[data-theme="comfort"] .primary-btn:active,
[data-theme="comfort"] .action-btn:active,
[data-theme="comfort"] .chip-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(53, 51, 48, 0.2);
}




[data-theme="comfort"] input,
[data-theme="comfort"] select,
[data-theme="comfort"] textarea,
[data-theme="comfort"] .details-select,
[data-theme="comfort"] .wheel-select {
  border-radius: 12px;
  background: linear-gradient(180deg, #f2efe9, #ebe8e1);
  border: 1px solid rgba(129, 125, 117, 0.32);
  box-shadow: var(--comfort-inset-shadow);
}




[data-theme="comfort"] input:focus-visible,
[data-theme="comfort"] select:focus-visible,
[data-theme="comfort"] textarea:focus-visible,
[data-theme="comfort"] .details-select:focus-visible,
[data-theme="comfort"] .wheel-select:focus-visible,
[data-theme="comfort"] .theme-toggle:focus-visible {
  outline: 2px solid rgba(79, 111, 143, 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(79, 111, 143, 0.2), var(--comfort-shadow-small);
}




[data-theme="comfort"] input[type="checkbox"],
[data-theme="comfort"] input[type="radio"] {
  accent-color: var(--comfort-accent-primary);
}




[data-theme="comfort"] .home-game-mode-progress {
  background: linear-gradient(180deg, #ece9e2, #e5e1d9);
  border: 1px solid rgba(126, 122, 114, 0.24);
  box-shadow: var(--comfort-inset-shadow);
}




[data-theme="comfort"] .home-game-mode-progress-fill {
  background: linear-gradient(90deg, #557c86, #4f6f8f);
  box-shadow: 0 1px 3px rgba(52, 71, 89, 0.24);
}




/* Checklist and End of Week row colours for the shared --checklist-row-* contract (chore-mode.css, end-week.css). */
[data-theme="comfort"] {
  --checklist-row-bg: linear-gradient(165deg, #faf8f4, #f1eee8);
  --checklist-row-border: rgba(126, 122, 114, 0.24);
  --checklist-row-checked-bg: linear-gradient(165deg, rgba(213, 223, 214, 0.9), rgba(197, 212, 201, 0.9));
  --checklist-row-checked-border: rgba(98, 128, 106, 0.46);
  --checklist-row-text: var(--comfort-text-secondary);
  --checklist-row-checked-text: var(--comfort-text-secondary);
  --end-week-row-text: var(--comfort-text-primary);
}




[data-theme="comfort"] .chore-checklist-item,
[data-theme="comfort"] .end-week-task-row {
  border-radius: 12px;
  box-shadow: var(--comfort-shadow-small);
}




[data-theme="comfort"] .life-bonus-option,
[data-theme="comfort"] .kv-item,
[data-theme="comfort"] .chart-preference-row,
[data-theme="comfort"] .diagnostics-row,
[data-theme="comfort"] .editable-row {
  background: linear-gradient(165deg, #faf8f4, #f1eee8);
  border: 1px solid rgba(126, 122, 114, 0.24);
  border-radius: 12px;
  box-shadow: var(--comfort-shadow-small);
}




[data-theme="comfort"] .chore-session-actions,
[data-theme="comfort"] .motivation-modal-actions {
  gap: 10px;
}




/* Theme icon default: structural .cp-icon spans are excluded from the broad
   span text rule, so their color comes from here (or a component rule). */
[data-theme="comfort"] .cp-icon {
  display: inline-flex;
  color: var(--comfort-text-secondary);
}

[data-theme="comfort"] .add-step-icon {
  color: #4a647d;
}




[data-theme="comfort"] .cp-icon svg {
  width: 22px;
  height: 22px;
}




[data-theme="comfort"] .game-mode-completion-summary,
[data-theme="comfort"] .game-mode-bonus-card,
[data-theme="comfort"] .rank-badge,
[data-theme="comfort"] .points-badge,
[data-theme="comfort"] .week-badge {
  box-shadow: var(--comfort-shadow-small);
}




[data-theme="comfort"] .rank-badge {
  background: linear-gradient(135deg, #edf1f3, #dfe6ea);
  color: #3f5264 !important;
}




[data-theme="comfort"] .points-badge {
  background: linear-gradient(135deg, #efe4d3, #e5d4b9);
  color: #5a4732 !important;
}




[data-theme="comfort"] .week-badge {
  background: linear-gradient(135deg, #dfe9e2, #d2dfd7);
  color: #3f5948 !important;
}




[data-theme="comfort"] .screen[data-screen="results"] {
  --chart-text-primary: #292a2b;
  --chart-text-secondary: #575b5f;
  --chart-text-muted: #73777b;
  --chart-axis-text: #55595d;
  --chart-axis-title: #2e2e2e;
  --chart-legend-text: #3e4347;
  --chart-value-label: #2e2e2e;
  --chart-grid-line: rgba(124, 130, 136, 0.24);
  --chart-tooltip-bg: rgba(38, 42, 45, 0.94);
  --chart-tooltip-title: #f4f2ed;
  --chart-tooltip-text: #e8e5de;
  --chart-tooltip-border: rgba(206, 192, 172, 0.28);
  /* Results text contract (results.css). */
  --results-heading: var(--comfort-text-primary);
  --results-section-title: #4f5559;
  --results-text: #4f5559;
  --results-empty-title: var(--comfort-text-secondary);
  --results-empty-text: var(--comfort-text-muted);
}




[data-theme="comfort"] .screen[data-screen="results"] .field-help,
[data-theme="comfort"] .screen[data-screen="results"] .step-label,
[data-theme="comfort"] .screen[data-screen="results"] .type-chip,
[data-theme="comfort"] .screen[data-screen="results"] .history-controls label {
  color: #4f5559 !important;
}




[data-theme="comfort"] .screen[data-screen="history"] .history-top strong,
[data-theme="comfort"] .screen[data-screen="history"] .k,
[data-theme="comfort"] .screen[data-screen="history"] .v {
  color: #2f3336 !important;
}




[data-theme="comfort"] .screen[data-screen="history"] .field-help,
[data-theme="comfort"] .screen[data-screen="history"] .history-controls label,
[data-theme="comfort"] .screen[data-screen="history"] .type-chip,
[data-theme="comfort"] .screen[data-screen="history"] .category-pill,
[data-theme="comfort"] .screen[data-screen="history"] .badge-pill,
[data-theme="comfort"] .screen[data-screen="history"] .time-record-display-meta {
  color: #52585c !important;
}




[data-theme="comfort"] .screen[data-screen="history"] .type-chip,
[data-theme="comfort"] .screen[data-screen="history"] .category-pill,
[data-theme="comfort"] .screen[data-screen="history"] .badge-pill {
  border-color: rgba(109, 114, 118, 0.38);
  background: linear-gradient(165deg, #f4f1eb, #ece8e0);
}




[data-theme="comfort"] .screen[data-screen="history"] input[type="date"] {
  color: #4f5559 !important;
}




[data-theme="comfort"] .screen[data-screen="history"] input[type="date"]::-webkit-datetime-edit {
  color: #5a5f63;
}




@media (prefers-color-scheme: dark) {
  [data-theme="comfort"] {
    --comfort-bg: #25292c;
    --comfort-surface: #2e3336;
    --comfort-surface-raised: #33393d;
    --comfort-surface-recessed: #262b2f;
    --comfort-text-primary: #ecebe7;
    --comfort-text-secondary: #b8bab8;
    --comfort-text-muted: #9ea2a0;
    --comfort-accent-primary: #7f9ab3;
    --comfort-accent-secondary: #76919f;
    --comfort-success: #85a18d;
    --comfort-warning: #b79162;
    --comfort-error: #bc7d77;
    --comfort-border: rgba(198, 204, 206, 0.3);
    --comfort-shadow-small: 0 2px 6px rgba(0, 0, 0, 0.36), -1px -1px 0 rgba(255, 255, 255, 0.03) inset;
    --comfort-shadow-medium: 0 8px 18px rgba(0, 0, 0, 0.38), -1px -1px 0 rgba(255, 255, 255, 0.04) inset;
    --comfort-shadow-large: 0 16px 34px rgba(0, 0, 0, 0.46), -1px -1px 0 rgba(255, 255, 255, 0.05) inset;
    --comfort-inset-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* Palette tokens that are still daytime values otherwise: chip surfaces (segmented controls,
       range label) would render near-white, and the strong accent would stay too dark to read. */
    --chip: #343b3f;
    --primary-strong: #a8c4dc;
    --bg-glass: rgba(46, 51, 54, 0.9);
    --dropdown-bg: #333a3e;
    --action-card-border: rgba(255, 255, 255, 0.08);
    /* styles.css's readability layer only flips these for the always-dark themes, so Comfort has
       to flip them itself or inherited text (bare <strong>, table cells) stays near-black. */
    --read-text-main: var(--comfort-text-primary);
    --read-text-soft: var(--comfort-text-secondary);
    --read-text-muted: var(--comfort-text-muted);
    --read-control-text: var(--comfort-text-primary);
    --read-primary-button-text: #1f2529;
    --read-placeholder: #b8bab8;
  }

  /* Comfort switches its text to a light tone when the device is in dark mode, so the button
     surfaces have to follow — otherwise the labels sit on the light daytime gradient. */
  [data-theme="comfort"] .action-btn,
  [data-theme="comfort"] .chip-btn,
  [data-theme="comfort"] .range-btn,
  [data-theme="comfort"] .results-type-btn,
  [data-theme="comfort"] .nav-btn,
  [data-theme="comfort"] .theme-toggle,
  [data-theme="comfort"] .time-record-display,
  [data-theme="comfort"] .delete-btn {
    background: linear-gradient(165deg, #3c4347, #31383b);
    border-color: rgba(206, 212, 214, 0.32);
  }

  /* Choice cards keep dark label text, so they stay on a light surface. */
  [data-theme="comfort"] .choice-card:not(.selected) {
    background: linear-gradient(165deg, #e9e5da, #dbd6c9);
    border-color: rgba(88, 81, 69, 0.62);
  }

  [data-theme="comfort"] .settings-section-card.active {
    color: #cbdcea !important;
  }

  [data-theme="comfort"] .ledger-tab.active,
  [data-theme="comfort"] .ledger-range-btn.active {
    color: #a8cfd6 !important;
    border-color: #a8cfd6;
  }

  /* The accent turns light in dark mode, so accent-filled buttons need dark labels. */
  [data-theme="comfort"] .motivation-action-primary {
    color: #17202a !important;
  }

  [data-theme="comfort"] .primary-btn {
    background: linear-gradient(165deg, #93aec6, #7f9ab3);
    border-color: rgba(147, 174, 198, 0.7);
  }

  [data-theme="comfort"] .floating-menu-button {
    background: linear-gradient(145deg, #3f474c, #333a3e);
    border-color: rgba(206, 212, 214, 0.34);
    color: var(--comfort-text-primary);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  }

  [data-theme="comfort"] .ledger-tab:not(.active),
  [data-theme="comfort"] .ledger-range-btn:not(.active) {
    background: linear-gradient(165deg, #3c4347, #31383b);
    border-color: rgba(206, 212, 214, 0.3);
  }

  [data-theme="comfort"] body,
  [data-theme="comfort"] .app-bg {
    background: linear-gradient(180deg, #25292c 0%, #222629 100%);
  }

  [data-theme="comfort"] .primary-btn {
    color: #1f2529;
  }

  [data-theme="comfort"] .screen[data-screen="results"] {
    --chart-text-primary: #ecebe7;
    --chart-text-secondary: #c5c8c7;
    --chart-text-muted: #a5aaa8;
    --chart-axis-text: #bfc4c2;
    --chart-axis-title: #ecebe7;
    --chart-legend-text: #d7dad8;
    --chart-value-label: #ecebe7;
    --chart-grid-line: rgba(170, 176, 173, 0.2);
    --chart-tooltip-bg: rgba(18, 20, 22, 0.94);
    --chart-tooltip-title: #f2f1ec;
    --chart-tooltip-text: #e4e2db;
    --chart-tooltip-border: rgba(196, 201, 199, 0.24);
    --results-section-title: #cdd1cf;
    --results-text: #cdd1cf;
  }

  [data-theme="comfort"] .time-record-display-meta,
  [data-theme="comfort"] .input-hint {
    color: #b8bab8 !important;
  }

  [data-theme="comfort"] .screen[data-screen="results"] .field-help,
  [data-theme="comfort"] .screen[data-screen="results"] .step-label,
  [data-theme="comfort"] .screen[data-screen="results"] .type-chip,
  [data-theme="comfort"] .screen[data-screen="results"] .history-controls label {
    color: #cdd1cf !important;
  }

  [data-theme="comfort"] .screen[data-screen="history"] .history-top strong,
  [data-theme="comfort"] .screen[data-screen="history"] .k,
  [data-theme="comfort"] .screen[data-screen="history"] .v {
    color: #ecebe7 !important;
  }

  [data-theme="comfort"] .screen[data-screen="history"] .field-help,
  [data-theme="comfort"] .screen[data-screen="history"] .history-controls label,
  [data-theme="comfort"] .screen[data-screen="history"] .type-chip,
  [data-theme="comfort"] .screen[data-screen="history"] .category-pill,
  [data-theme="comfort"] .screen[data-screen="history"] .badge-pill,
  [data-theme="comfort"] .screen[data-screen="history"] .time-record-display-meta {
    color: #c2c7c5 !important;
  }

  [data-theme="comfort"] .screen[data-screen="history"] .type-chip,
  [data-theme="comfort"] .screen[data-screen="history"] .category-pill,
  [data-theme="comfort"] .screen[data-screen="history"] .badge-pill {
    border-color: rgba(186, 191, 188, 0.36);
    background: linear-gradient(165deg, #32373b, #2b3033);
  }

  [data-theme="comfort"] .screen[data-screen="history"] input[type="date"] {
    color: #c5c9c7 !important;
  }

  [data-theme="comfort"] .screen[data-screen="history"] input[type="date"]::-webkit-datetime-edit {
    color: #bfc4c2;
  }}