/* Independent page and navigation surfaces; never filter text or artwork. */
html[data-theme] :is(.sidebar, .mobile-nav) {
  background: var(--menu-background);
  color: var(--menu-ink);
  border-color: var(--menu-border);
}
html[data-theme] .sidebar :is(.brand, .profile-button) { color: var(--menu-ink); }
html[data-theme] .sidebar :is(.brand-caption, .profile-button small) { color: var(--menu-muted); }
html[data-theme] .sidebar .profile-button { border-color: var(--menu-border); }
html[data-theme] :is(.nav-item:not(.active), .mobile-nav button:not(.active)) { color: var(--menu-ink); }
html[data-theme] .nav-item:not(.active):hover { background: var(--accent-soft); color: var(--accent-ink); }
html[data-theme] :is(.sidebar, .mobile-nav) :focus-visible { outline-color: var(--menu-ink); }

/* Text outside cards follows the page background; cards keep their own palette. */
html[data-theme] #app .main > :is(.page-top, .detail-page-head, .mobile-brand, .section-head),
html[data-theme] #app .dashboard > section > .section-head,
html[data-theme] #app :is(.daily-step, .calendar-detail, .detail-flat-tasks) > .section-head { color: var(--page-ink); }
html[data-theme] #app :is(.page-top, .detail-page-head) :is(.eyebrow, .page-subtitle),
html[data-theme] #app .main > .demo-notice,
html[data-theme] #app .dashboard > section > .gentle-note,
html[data-theme] #app .daily-step > .daily-step-note,
html[data-theme] #app :is(.dashboard > section, .calendar-detail) > .section-head small,
html[data-theme] #app :is(.slon-stats-range, .slon-stats-footnote) { color: var(--page-muted); }
html[data-theme] #app .main > .demo-notice button,
html[data-theme] #app :is(.page-top, .detail-page-head, .ordering-toolbar) .text-button,
html[data-theme] #app .dashboard > section > .section-head .text-button,
html[data-theme] #app :is(.daily-step, .calendar-detail) > .section-head .text-button,
html[data-theme] #app :is(.dashboard > section, .detail-main, .calendar-detail) > .add-task,
html[data-theme] #app .toolbar .text-button { color: var(--page-ink); }
html[data-theme] #app :is(.dashboard > section, .detail-main, .calendar-detail) > .add-task { border-color: var(--page-muted); }
html[data-theme] #app :is(.dashboard > section, .detail-main, .calendar-detail) > .add-task:hover { background: var(--surface); color: var(--accent-ink); }
html[data-theme] #app .week-day:not(.active),
html[data-theme] #app .week-day:not(.active) b { color: var(--page-muted); }
html[data-theme] #app .week-day:not(.active):hover,
html[data-theme] #app .week-day:not(.active):hover b { background: var(--surface); color: var(--ink); }
html[data-theme] #app .safari-summary { background-color: var(--surface); border-radius: 22px; }

.surface-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 22px 0 28px; }
.surface-panel { min-width: 0; border: 1px solid var(--line); border-radius: 18px; padding: 19px; background: var(--surface); color: var(--ink); }
.surface-panel h3 { font-size: 16px; line-height: 1.4; margin: 0 0 7px; }
.surface-description { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; min-height: 40px; }
.surface-panel .background-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.surface-panel .background-option { min-height: 84px; padding: 10px 5px; gap: 7px; background: var(--surface-raised); border-color: var(--line); color: var(--muted); }
.surface-panel .background-option strong { font-size: 11px; line-height: 1.35; }
.surface-panel .background-swatch { width: 39px; height: 30px; border-radius: 8px; }
.surface-custom { border: 1px solid var(--line); border-radius: 13px; padding: 13px; margin-top: 15px; }
.surface-custom[data-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.surface-custom-choice { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ink); font-weight: 700; font-size: 13px; text-align: left; }
.surface-choice-mark { display: inline-grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border: 1px solid var(--muted); border-radius: 50%; }
.surface-custom-choice[aria-pressed="true"] .surface-choice-mark { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.surface-custom-choice[aria-pressed="true"] .surface-choice-mark::after { content: '✓'; font-size: 12px; }
.surface-custom-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px; }
.surface-color-picker { display: flex; flex: 1 1 130px; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; cursor: pointer; }
.surface-color-picker input[type="color"] { width: 48px; height: 44px; flex: 0 0 48px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); cursor: pointer; }
.surface-hex { flex: 0 1 112px; min-width: 0; color: var(--muted); font-size: 10px; font-weight: 600; }
.surface-hex span { display: block; margin-bottom: 5px; letter-spacing: .05em; }
.surface-hex input { width: 100%; min-height: 44px; padding: 8px; border-color: var(--line); background: var(--surface-raised); color: var(--ink); font-family: ui-monospace, monospace; font-size: 14px; }
.surface-hex input[aria-invalid="true"] { border-color: var(--danger); }
.surface-error { margin: 9px 0 0; color: var(--danger); font-size: 12px; line-height: 1.5; }
.surface-error[hidden] { display: none; }
.surface-brightness { margin: 21px 0 17px; }
.surface-slider-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 650; }
.surface-slider-heading output { color: var(--accent-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.surface-brightness input[type="range"] { display: block; width: 100%; height: 42px; padding: 0; margin: 4px 0 0; cursor: pointer; accent-color: var(--accent); border: 0; background: transparent; }
.surface-slider-ends { display: flex; justify-content: space-between; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); }
.surface-slider-ends button { min-height: 32px; color: var(--accent-ink); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.surface-result { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 13px; border-radius: 10px; border: 1px solid #80808040; font-size: 11px; line-height: 1.5; }
.surface-result code { font-size: 11px; font-weight: 600; }
.surface-panel :is(button, input):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 1150px) {
  .surface-settings { grid-template-columns: minmax(0, 1fr); }
  .surface-panel .background-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .surface-description { min-height: 0; }
}
@media (max-width: 480px) {
  .surface-settings { gap: 18px; }
  .surface-panel { padding: 14px; }
  .surface-panel .background-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .surface-panel .background-option { min-height: 76px; }
  .surface-custom { padding: 10px; }
  .surface-custom-fields { gap: 10px; }
  .surface-hex { flex-basis: 105px; }
}

.leading-goals-note { color: var(--muted); font-size: 11px; line-height: 1.5; margin: -7px 0 12px; }

/* Custom card colors apply to the elephant banner too; active buttons keep their contrast. */
html[data-custom-panels="true"] :is(#app, #modal-root) :is(.hero, .side-card, .summary-card, .goal-card, .stat, .stage, .calendar-panel, .group-card, .task-row, .goals-groups, .modal, .surface-panel, .safari-summary, .slon-stats-panel, .slon-stats-metric) {
  --ink: var(--panel-ink);
  --muted: var(--panel-muted);
  --surface: var(--panel-background);
  --surface-soft: var(--panel-soft);
  --surface-raised: var(--panel-raised);
  --line: var(--panel-border);
  --theme-border-strong: var(--panel-border);
  background: var(--panel-background);
  color: var(--panel-ink);
  border-color: var(--panel-border);
}
html[data-custom-panels="true"] :is(#app, #modal-root) :is(.side-card, .summary-card, .goal-card, .stat, .stage, .calendar-panel, .group-card, .task-row, .goals-groups, .modal, .safari-summary) :is(.task-title, .node-title, .stage-heading h3, .stage-progress, .summary-value, .goal-percent, .big-percent, .ring-number, .mini-goal h3, .mini-goal .percent, .modal-top h2, .field, .preference-toggle, .theme-settings h3, .surface-custom-choice, .goal-options .secondary) { color: var(--panel-ink); }
html[data-custom-panels="true"] #app :is(.side-card, .goal-card, .stat, .calendar-panel, .group-card, .goals-groups) > h2,
html[data-custom-panels="true"] #app :is(.side-card, .calendar-panel) .section-head { color: var(--panel-ink); }
html[data-custom-panels="true"] :is(#app, #modal-root) :is(.side-card, .summary-card, .goal-card, .stat, .stage, .calendar-panel, .group-card, .task-row, .goals-groups, .modal, .safari-summary) :is(.task-meta, .task-time, .goal-count, .summary-label, .summary-note, .summary-value span, .summary-counts, .mini-goal small, .preferences-note, .theme-note, .field small, .explanation, .calendar-weekday, .goal-card footer, .notification-note, .settings-status, .leading-goals-note) { color: var(--panel-muted); }
html[data-custom-panels="true"] #app .side-card > p { color: var(--panel-muted); }
html[data-custom-panels="true"] :is(#app, #modal-root) :is(.side-card, .stage, .calendar-panel, .group-card, .goals-groups, .modal, .safari-summary) :is(.text-button, .look-caption, .add-task, .stage-add) { color: var(--panel-ink); }
html[data-custom-panels="true"] :is(#app, #modal-root) :is(.side-card, .stage, .calendar-panel, .group-card, .goals-groups, .modal) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select) { background: var(--panel-soft); color: var(--panel-ink); border-color: var(--panel-border); }
html[data-custom-panels="true"] :is(#app, #modal-root) :is(.side-card, .modal) :is(input, textarea)::placeholder { color: var(--panel-muted); opacity: .85; }
html[data-custom-panels="true"] :is(#app, #modal-root) :is(.side-card, .stage, .calendar-panel, .group-card, .goals-groups, .modal) :is(.secondary, .icon-btn) { background: var(--panel-raised); color: var(--panel-ink); border-color: var(--panel-border); }
html[data-custom-panels="true"] :is(#app, #modal-root) .surface-panel :is(.surface-color-picker, .surface-hex, .surface-description, .surface-slider-ends) { color: var(--panel-muted); }
html[data-custom-panels="true"] :is(#app, #modal-root) .surface-panel :is(.surface-slider-heading, .surface-slider-heading output, .surface-slider-ends button) { color: var(--panel-ink); }
html[data-custom-panels="true"] :is(#app, #modal-root) .surface-panel :is(button, input):focus-visible { outline-color: var(--panel-ink); }
html[data-custom-panels="true"] :is(#app, #modal-root) :is(.task-row.done .task-title, .tree-row.done > .node-title) { color: var(--panel-muted); }



html[data-custom-panels="true"] #app .hero :is(h2, h2 span) { color: var(--panel-ink); }
html[data-custom-panels="true"] #app .hero :is(.hero-kicker, p) { color: var(--panel-muted); }

html[data-custom-panels="true"] #app .mini-goal { --mini-goal-percent: var(--panel-ink); }
html[data-custom-panels="true"] #app .side-card :is(.mini-calendar > span, .legend) { color: var(--panel-muted); }
html[data-custom-panels="true"] #modal-root .goal-preview { background: var(--panel-soft); color: var(--panel-ink); border-color: var(--panel-border); }
html[data-custom-panels="true"] #modal-root .goal-preview h3 { color: var(--panel-ink); }
html[data-custom-panels="true"] #modal-root .goal-preview small { color: var(--panel-muted); }

/* Selected surfaces have their own palette, independent of cards and navigation. */
html[data-custom-highlights="true"] :is(#app, #modal-root) :is(.nav-item.active, .mobile-nav button.active, .chip.active, .tab-row button.active, .appearance-tabs button.active, .calendar-cell.selected, .week-day.active, .animal-choice.selected, .background-option[aria-pressed="true"], .reorder-item.selected, .daily-step-card, .daily-step-empty) {
  background: var(--highlight-background);
  color: var(--highlight-ink);
  border-color: var(--highlight-border);
}
html[data-custom-highlights="true"] :is(#app, #modal-root) :is(.animal-choice.selected, .background-option[aria-pressed="true"], .tab-row button.active, .appearance-tabs button.active) { box-shadow: inset 0 0 0 1px var(--highlight-border); }
html[data-custom-highlights="true"] #app .daily-step-body strong,
html[data-custom-highlights="true"] #app .daily-step-empty h3,
html[data-custom-highlights="true"] #app .week-day.active b,
html[data-custom-highlights="true"] :is(#app, #modal-root) .animal-choice.selected :is(strong, .selection-check) { color: var(--highlight-ink); }
html[data-custom-highlights="true"] #app :is(.daily-step-body small, .daily-step-card > .task-arrow, .daily-step-empty p, .calendar-cell.selected small),
html[data-custom-highlights="true"] :is(#app, #modal-root) .animal-choice.selected small { color: var(--highlight-muted); }
html[data-custom-highlights="true"] #app .daily-step-card.done .daily-step-body strong { color: var(--highlight-muted); text-decoration-color: currentColor; }
html[data-custom-highlights="true"] #app .week-day.active b { background: transparent; }
html[data-custom-highlights="true"] #app .week-day.active .dot { background: var(--highlight-ink); }
html[data-custom-highlights="true"] #app .nav-item.active .count { background: var(--highlight-background); color: var(--highlight-ink); }
html[data-custom-highlights="true"] :is(#app, #modal-root) .background-option[aria-pressed="true"] .background-swatch::after { border-color: var(--highlight-background); }