:root {
  --theme-canvas: #111514;
  --theme-surface: #222725;
  --theme-surface-strong: #2a302d;
  --theme-text: #f7f8f7;
  --theme-muted: #9ca39f;
  --theme-border: #3a403d;
}

html[data-theme="light"] {
  --theme-canvas: #f5f7f5;
  --theme-surface: #ffffff;
  --theme-surface-strong: #edf1ed;
  --theme-text: #102018;
  --theme-muted: #5d6b63;
  --theme-border: #c8d0ca;
}

/* Global appearance contract
   --------------------------
   Entry, recovery, and authentication screens can remain visible while the
   Sunday shell is active. They must therefore use the same semantic palette
   regardless of which application-state class is currently on <body>. */
html[data-theme] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme] body,
html[data-theme] .shared-shell {
  background: var(--theme-canvas);
  color: var(--theme-text);
}

html[data-theme] :is(.enroll-view, .welcome-view) {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme] :is(.enroll-view, .welcome-view) h1,
html[data-theme] .enroll-view .form-row > span,
html[data-theme] .install-steps {
  color: var(--theme-text);
}

html[data-theme] .enroll-view > p:not(.eyebrow):not(.shared-error),
html[data-theme] .welcome-view > p:not(.eyebrow):not(.welcome-check),
html[data-theme] .test-banner span {
  color: var(--theme-muted);
}

html[data-theme] .install-fallback {
  border-color: var(--church-green);
  background: var(--theme-surface-strong);
  color: var(--theme-muted);
}

html[data-theme] :is(.enroll-view, .welcome-view, .operation-dialog, .compose-dialog) :is(input, select, textarea) {
  border-color: var(--theme-border);
  background: var(--theme-surface-strong);
  color: var(--theme-text);
}

html[data-theme] :is(input, textarea)::placeholder {
  color: var(--theme-muted);
  opacity: 1;
}

html[data-theme="light"] body.shared-app-active,
html[data-theme="light"] body.shared-app-active .shared-shell,
html[data-theme="light"] .sunday-screen {
  background: var(--theme-canvas);
  color: var(--theme-text);
}

html[data-theme="light"] body.shared-app-active .test-banner {
  border-color: var(--theme-border);
  background: var(--theme-surface-strong);
}

html[data-theme="light"] .sunday-screen {
  --phone-canvas: var(--theme-canvas);
  --phone-surface: var(--theme-surface);
  --phone-surface-strong: var(--theme-surface-strong);
  --phone-text: var(--theme-text);
  --phone-muted: var(--theme-muted);
  --phone-border: var(--theme-border);
}

.theme-logo-light { display: none; }
html[data-theme="light"] .theme-logo-dark { display: none; }
html[data-theme="light"] .theme-logo-light { display: block; }

html[data-theme="light"] .sunday-screen .account-menu,
html[data-theme="light"] .sunday-screen .account-identity,
html[data-theme="light"] .sunday-screen .account-menu-item {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="light"] .sunday-screen .account-identity { background: var(--theme-surface-strong); }
html[data-theme="light"] .sunday-screen .account-identity strong { color: var(--theme-text); }
html[data-theme="light"] .sunday-screen .account-identity span { color: var(--theme-muted); }
html[data-theme="light"] .sunday-screen .header-icon-button { border-color: var(--theme-border); color: var(--theme-text); }

.appearance-setting {
  display: grid;
  gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

.appearance-setting > span {
  color: var(--theme-muted) !important;
  font-size: .75rem !important;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.appearance-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.appearance-choices button {
  min-height: 44px;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font-weight: 850;
}
.appearance-choices button.selected {
  border-color: var(--theme-text);
  background: var(--theme-text);
  color: var(--theme-canvas);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .messages-shell,
html[data-theme="dark"] .scheduling-shell {
  background: var(--theme-canvas);
  color: var(--theme-text);
}

html[data-theme="dark"] .shared-shell {
  background: var(--theme-canvas);
  color: var(--theme-text);
}

html[data-theme="dark"] .enroll-view,
html[data-theme="dark"] .welcome-view,
html[data-theme="dark"] .test-banner {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="dark"] .enroll-view h1,
html[data-theme="dark"] .welcome-view h1,
html[data-theme="dark"] .install-steps {
  color: var(--theme-text);
}

.enroll-view .form-row > span {
  color: var(--theme-text);
}

html[data-theme="dark"] .enroll-view > p:not(.eyebrow),
html[data-theme="dark"] .welcome-view > p:not(.eyebrow):not(.welcome-check),
html[data-theme="dark"] .test-banner span {
  color: var(--theme-muted);
}

html[data-theme="dark"] .install-fallback {
  background: var(--theme-surface-strong);
  color: var(--theme-text);
}

html[data-theme="dark"] body:has(.messages-shell:not([hidden])),
html[data-theme="dark"] body:has(.scheduling-shell) {
  background: var(--theme-canvas);
}

html[data-theme="dark"] .messages-shell {
  --ds-color-canvas: var(--theme-canvas);
  --ds-color-surface: var(--theme-surface);
  --ds-color-surface-supporting: var(--theme-surface-strong);
  --ds-color-text: var(--theme-text);
  --ds-color-text-muted: var(--theme-muted);
  --ds-color-heading: var(--theme-text);
  --ds-color-border: var(--theme-border);
  --ds-color-divider: var(--theme-border);
}

html[data-theme="dark"] .messages-shell .test-banner,
html[data-theme="dark"] .messages-layout,
html[data-theme="dark"] .inbox-pane,
html[data-theme="dark"] .thread-pane,
html[data-theme="dark"] .thread-view,
html[data-theme="dark"] .message-list,
html[data-theme="dark"] .message-composer,
html[data-theme="dark"] .conversation-row,
html[data-theme="dark"] .message-filters button,
html[data-theme="dark"] .quiet-button {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="dark"] .conversation-row:hover,
html[data-theme="dark"] .conversation-row:focus-visible,
html[data-theme="dark"] .conversation-row.selected,
html[data-theme="dark"] .message-filters button.active {
  background: var(--theme-surface-strong);
  color: var(--theme-text);
}

html[data-theme="dark"] .message-bubble {
  border-color: var(--theme-border);
  background: var(--theme-surface-strong);
  color: var(--theme-text);
}

html[data-theme="dark"] .message-block.outgoing .message-bubble {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

html[data-theme="dark"] .compose-dialog,
html[data-theme="dark"] .compose-dialog header,
html[data-theme="dark"] .compose-dialog header button,
html[data-theme="dark"] .compose-dialog input,
html[data-theme="dark"] .compose-dialog select,
html[data-theme="dark"] .compose-dialog textarea,
html[data-theme="dark"] .operation-dialog,
html[data-theme="dark"] .operation-dialog .dialog-heading,
html[data-theme="dark"] .operation-dialog .dialog-heading > button,
html[data-theme="dark"] .operation-dialog select,
html[data-theme="dark"] .operation-dialog input,
html[data-theme="dark"] .operation-dialog textarea,
html[data-theme="dark"] .operation-dialog .guide-sections section,
html[data-theme="dark"] .operation-dialog .coverage-summary,
html[data-theme="dark"] .operation-dialog .notification-panel,
html[data-theme="dark"] .admin-dialog .admin-card,
html[data-theme="dark"] .admin-dialog .admin-card-content,
html[data-theme="dark"] .admin-dialog .shared-panel-head,
html[data-theme="dark"] .admin-dialog .access-row,
html[data-theme="dark"] .admin-dialog .person-row {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="dark"] .admin-dialog .admin-card > summary:hover,
html[data-theme="dark"] .admin-dialog .admin-card > summary:focus-visible {
  background: var(--theme-surface-strong);
}

html[data-theme="dark"] .admin-dialog .access-row > div > strong,
html[data-theme="dark"] .admin-dialog .access-row .mobile-field,
html[data-theme="dark"] .admin-dialog .access-row .status-pill {
  color: var(--theme-text);
}

/* Team Coverage cards in dark mode: the base cards use light backgrounds
   (--white / --gray-50) that never re-theme, so light dialog text landed
   white-on-white in the Off/Past/Current cards. Re-theme the neutral cards;
   the orange "uncovered" alert is preserved explicitly below. */
html[data-theme="dark"] .operation-dialog .coverage-position {
  border-color: var(--theme-border);
  background: var(--theme-surface-strong);
  color: var(--theme-text);
}
html[data-theme="dark"] .operation-dialog .coverage-position.off,
html[data-theme="dark"] .operation-dialog .coverage-position.past,
html[data-theme="dark"] .operation-dialog .coverage-position.current {
  background: var(--theme-surface);
}
html[data-theme="dark"] .operation-dialog .coverage-person,
html[data-theme="dark"] .operation-dialog .coverage-person > span:first-child strong,
html[data-theme="dark"] .operation-dialog .coverage-position-head strong,
html[data-theme="dark"] .operation-dialog .coverage-position-time,
html[data-theme="dark"] .operation-dialog .coverage-people.plain {
  color: var(--theme-text);
}
html[data-theme="dark"] .operation-dialog .coverage-off-person small,
html[data-theme="dark"] .operation-dialog .coverage-roaming-person small,
html[data-theme="dark"] .operation-dialog .coverage-present-person small,
html[data-theme="dark"] .operation-dialog .coverage-position.past .coverage-position-head strong,
html[data-theme="dark"] .operation-dialog .coverage-wave.past .coverage-person,
html[data-theme="dark"] .operation-dialog .coverage-person.missed > span:first-child {
  color: var(--theme-muted);
}
html[data-theme="dark"] .operation-dialog .coverage-wave.past .coverage-wave-heading {
  background: var(--theme-surface-strong);
  color: var(--theme-muted);
}
html[data-theme="dark"] .operation-dialog .coverage-group-heading {
  background: var(--theme-surface-strong);
  color: var(--theme-text);
}
html[data-theme="dark"] .operation-dialog .coverage-group-heading span { color: var(--theme-muted); }
/* Preserve the orange uncovered alert + its white text (beats the rules above) */
html[data-theme="dark"] .operation-dialog .coverage-position.current.uncovered {
  border-color: var(--orange);
  background: var(--orange);
}
html[data-theme="dark"] .operation-dialog .coverage-position.current.uncovered .coverage-position-head strong,
html[data-theme="dark"] .operation-dialog .coverage-position.current.uncovered .coverage-person > span:first-child {
  color: var(--white);
}

html[data-theme="dark"] .operation-dialog label,
html[data-theme="dark"] .operation-dialog h2,
html[data-theme="dark"] .operation-dialog strong,
html[data-theme="dark"] .compose-dialog label,
html[data-theme="dark"] .compose-dialog h2 {
  color: var(--theme-text);
}

html[data-theme="dark"] .operation-dialog small,
html[data-theme="dark"] .operation-dialog span,
html[data-theme="dark"] .operation-dialog p,
html[data-theme="dark"] .compose-dialog p {
  color: var(--theme-muted);
}

html[data-theme="dark"] .admin-dialog :is(.shared-panel-head p, .people-add-heading span, .add-member-form > label, .people-directory-controls label, .people-results-count) {
  color: #c8ceca;
}

html[data-theme="dark"] .admin-dialog .people-access-row,
html[data-theme="dark"] .admin-dialog .people-access-editor,
html[data-theme="dark"] .admin-dialog .member-access-editor {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="dark"] .admin-dialog .people-access-row[open] > summary,
html[data-theme="dark"] .admin-dialog .person-review-action,
html[data-theme="dark"] .admin-dialog .unscheduled-person-note {
  border-color: var(--theme-border);
  background: var(--theme-surface-strong);
  color: var(--theme-text);
}

html[data-theme="dark"] .admin-dialog :is(.people-access-row, .people-access-editor, .member-access-editor) :is(strong, label),
html[data-theme="dark"] .admin-dialog .person-admin-meta,
html[data-theme="dark"] .admin-dialog .person-admin-meta p {
  color: var(--theme-text);
}

html[data-theme="dark"] .admin-dialog :is(.people-access-row small, .member-access-editor small, .people-access-editor > .mobile-field, .person-admin-meta p) {
  color: #c8ceca;
}

html[data-theme="dark"] .admin-dialog .person-review-action .review-note {
  color: #ffd0a8;
}

html[data-theme="dark"] .admin-dialog .person-badges em {
  border-color: #87918b;
  background: var(--theme-surface);
  color: #e4e8e5;
}

html[data-theme="dark"] .admin-dialog .person-badges .needs-review {
  border-color: #ffb36b;
  color: #ffd0a8;
}

/* Manage People is information-dense and used quickly on a phone. Keep every
   secondary label comfortably brighter than the generic dark-theme muted text. */
html[data-theme="dark"] .admin-dialog .people-access-panel {
  --people-muted: #d8ded9;
  --people-border: #7f8a84;
}

html[data-theme="dark"] .admin-dialog .people-access-panel :is(
  .shared-panel-head p,
  .people-add-heading span,
  .add-member-form > label,
  .people-directory-controls label,
  .people-results-count,
  .people-access-row small,
  .people-access-editor > .mobile-field,
  .member-access-editor small,
  .person-admin-meta,
  .person-admin-meta p
) {
  color: var(--people-muted);
}

html[data-theme="dark"] .admin-dialog .people-access-panel :is(
  .people-team-choice,
  .people-access-choice,
  .member-access-editor,
  .people-directory-controls,
  .people-access-row,
  .people-access-row[open] > summary,
  .person-review-action
) {
  border-color: var(--people-border);
}

html[data-theme="dark"] .admin-dialog .people-access-panel :is(legend, .people-team-choice label, .people-access-choice label, .member-access-editor label) {
  color: #f7f8f7;
}

html[data-theme="dark"] .admin-dialog .people-add-disclosure,
html[data-theme="dark"] .admin-dialog .people-add-disclosure .people-add-form {
  border-color: var(--people-border);
}

html[data-theme="dark"] .admin-dialog .people-add-disclosure > summary strong {
  color: #f7f8f7;
}

html[data-theme="dark"] .admin-dialog .people-add-disclosure > summary span {
  color: var(--people-muted);
}

html[data-theme="dark"] .admin-dialog .people-access-panel :is(input, select) {
  border-color: var(--people-border);
}

html[data-theme="dark"] .admin-dialog .people-access-panel :is(input::placeholder) {
  color: #bfc7c2;
  opacity: 1;
}

/* On Campus is intentionally a light status panel inside the dark Team sheet. */
html[data-theme="dark"] .operation-dialog .on-campus-person strong { color: #102a43; }
html[data-theme="dark"] .operation-dialog .on-campus-person small,
html[data-theme="dark"] .operation-dialog .on-campus-person em { color: #52606d; }

html[data-theme="dark"] .scheduling-shell .brand-lockup { filter: brightness(0) invert(1); }
html[data-theme="dark"] .scheduling-header h1,
html[data-theme="dark"] .scheduling-shell h2,
html[data-theme="dark"] .scheduling-shell h3,
html[data-theme="dark"] .scheduling-shell h4,
html[data-theme="dark"] .scheduling-shell strong { color: var(--theme-text); }

html[data-theme="dark"] .scheduling-shell .note,
html[data-theme="dark"] .scheduling-shell .legend,
html[data-theme="dark"] .scheduling-shell .row-label,
html[data-theme="dark"] .scheduling-shell small,
html[data-theme="dark"] .scheduling-shell .schedule-source { color: var(--theme-muted); }

html[data-theme="dark"] .scheduling-shell section.view,
html[data-theme="dark"] .scheduling-shell nav.tabs button,
html[data-theme="dark"] .scheduling-shell .team-group,
html[data-theme="dark"] .scheduling-shell .team-group-heading,
html[data-theme="dark"] .scheduling-shell .person-card,
html[data-theme="dark"] .scheduling-shell .sunday-block,
html[data-theme="dark"] .scheduling-shell .note,
html[data-theme="dark"] .scheduling-shell select,
html[data-theme="dark"] .scheduling-shell input,
html[data-theme="dark"] .scheduling-shell .chip {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="dark"] .scheduling-shell nav.tabs button.active,
html[data-theme="dark"] .scheduling-shell .chip.on {
  border-color: var(--church-green);
  background: var(--theme-surface-strong);
  color: var(--theme-text);
}

html[data-theme="dark"] body > .banner {
  border-color: var(--theme-border);
  background: var(--theme-surface-strong);
  color: var(--theme-text);
}

html[data-theme="light"] .app-bottom-navigation {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}
html[data-theme="light"] .app-bottom-navigation-item { color: #738078; }
html[data-theme="light"] .app-bottom-navigation-item.active { color: var(--theme-text); }
html[data-theme="light"] .app-nav-badge { border-color: var(--theme-surface); }

/* Keep photo controls and their labels on the same theme palette. Component
   surface tokens can otherwise stay white while dark-mode text becomes white. */
html[data-theme] body #issue-dialog #choose-issue-photo,
html[data-theme] body #issue-dialog #issue-photo-selected,
html[data-theme] #compose-form #choose-compose-photo,
html[data-theme] #compose-form #compose-message {
  background: var(--theme-surface-strong);
  color: var(--theme-text);
  -webkit-text-fill-color: currentColor;
  border-color: var(--theme-border);
}
html[data-theme] body #issue-dialog #choose-issue-photo strong,
html[data-theme] body #issue-dialog #choose-issue-photo svg,
html[data-theme] body #issue-dialog #issue-photo-selected strong,
html[data-theme] body #issue-dialog #issue-photo-selected svg,
html[data-theme] body #issue-dialog #remove-issue-photo,
html[data-theme] #compose-form #remove-compose-photo {
  color: var(--theme-text);
  -webkit-text-fill-color: currentColor;
}
html[data-theme] body #issue-dialog #choose-issue-photo > span,
html[data-theme] body #issue-dialog #issue-photo-selected small {
  color: var(--theme-muted);
  -webkit-text-fill-color: currentColor;
}
html[data-theme] #compose-form #compose-message::placeholder {
  color: var(--theme-muted);
  -webkit-text-fill-color: currentColor;
  opacity: 1;
}
html[data-theme] #compose-form #choose-compose-photo:focus-visible,
html[data-theme] body #issue-dialog #choose-issue-photo:focus-visible {
  outline: 2px solid var(--theme-text);
  outline-offset: -3px;
}
html[data-theme] #compose-form #compose-photo-preview {
  background: var(--theme-surface-strong);
  color: var(--theme-text);
  border-color: var(--theme-border);
}
html[data-theme] #compose-form #compose-photo-preview-name {
  color: var(--theme-text);
}
html[data-theme] #compose-form #compose-photo-preview-size,
html[data-theme] #compose-form #compose-photo-status:not(.error),
html[data-theme] body #issue-dialog .issue-photo-status:not(.error) {
  color: var(--theme-muted);
}