/* Approved September 23 visual direction. Additive presentation layer only.
   Navigation, screen flow, state visibility and severity colors stay owned by
   their existing components. The theme script still chooses the saved theme. */
:root {
  --visual-brand: #245d3e;
  --visual-deep: #143c2c;
  --visual-canvas: #ededed;
  --visual-surface: #ffffff;
  --visual-surface-soft: #ffffff;
  --visual-text: #17231c;
  --visual-muted: #626762;
  --visual-line: #d8dcd9;
  --visual-accent: #245d3e;
  --visual-focus: #286d48;
  --visual-radius: 18px;
  --visual-radius-control: 12px;
  --visual-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --visual-shadow-soft: 0 1px 3px rgb(20 60 44 / 4%);
  --visual-shadow-card: 0 2px 5px rgb(20 60 44 / 4%), 0 10px 22px -20px rgb(20 60 44 / 24%);
  --visual-shadow-dialog: 0 8px 28px rgb(9 30 20 / 13%);
}

/* Unthemed legacy tools keep their established light appearance. The member
   app applies data-theme="dark" synchronously when no preference is saved. */
html[data-theme="dark"] {
  --visual-canvas: #111514;
  --visual-surface: #222725;
  --visual-surface-soft: #2a302d;
  --visual-text: #f7f8f7;
  --visual-muted: #b2bcb5;
  --visual-line: #424b45;
  --visual-accent: #a4d6b5;
  --visual-focus: #a4d6b5;
  --visual-shadow-soft: 0 1px 3px rgb(0 0 0 / 10%);
  --visual-shadow-card: 0 2px 7px rgb(0 0 0 / 13%);
  --visual-shadow-dialog: 0 8px 28px rgb(0 0 0 / 32%);
}

:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --theme-canvas: var(--visual-canvas);
  --theme-surface: var(--visual-surface);
  --theme-surface-strong: var(--visual-surface-soft);
  --theme-text: var(--visual-text);
  --theme-muted: var(--visual-muted);
  --theme-border: var(--visual-line);
  --ds-color-canvas: var(--visual-canvas);
  --ds-color-surface: var(--visual-surface);
  --ds-color-surface-supporting: var(--visual-surface-soft);
  --ds-color-text: var(--visual-text);
  --ds-color-text-muted: var(--visual-muted);
  --ds-color-heading: var(--visual-text);
  --ds-color-border: var(--visual-line);
  --ds-color-divider: var(--visual-line);
  --ds-font-family: var(--visual-font);
  --ds-shadow-dialog: var(--visual-shadow-dialog);
  --ds-focus-ring: 2px solid var(--visual-focus);
}

body { font-family: var(--visual-font); }

/* Shared neutral surfaces. No blanket button, label or selected-state palette:
   incident levels, warnings, unavailable days and destructive actions retain
   their established meaning and component styling. */
html body :is(.enroll-view, .welcome-view, .messages-login-required, .prayer-login-required) {
  border-color: var(--visual-line);
  border-radius: var(--visual-radius);
  background: var(--visual-surface);
  color: var(--visual-text);
  box-shadow: var(--visual-shadow-card);
}

html body :is(.enroll-view, .welcome-view) h1 {
  color: var(--visual-text);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
}

html body .enroll-view > p:not(.eyebrow):not(.shared-error),
html body .welcome-view > p:not(.eyebrow):not(.welcome-check) {
  color: var(--visual-muted);
  line-height: 1.55;
}

html body :is(.welcome-assignment, .welcome-guide > div, .install-fallback) {
  border-radius: var(--visual-radius-control);
}

html body .ds-card {
  border-radius: var(--visual-radius);
  box-shadow: var(--visual-shadow-card);
}

html body :is(.ds-empty-state, .shared-empty) {
  color: var(--visual-muted);
  line-height: 1.5;
  font-weight: 450;
}

html body .ds-empty-state { border-radius: var(--visual-radius-control); }

/* Reusable action shapes. Keep primary color decisions scoped to ordinary
   controls; report-specific action tokens continue to win their own cascade. */
html body :is(.ds-button, .shared-primary, .quiet-button, .dialog-button) {
  border-radius: var(--visual-radius-control);
  font-family: var(--visual-font);
  font-weight: 650;
  line-height: 1.35;
}

html body :is(.shared-primary, .ds-button--primary, .dialog-button.primary):not(:disabled):not(.danger):not(.ds-button--urgent):not(.revoke) {
  border-color: var(--visual-brand);
  background: var(--visual-brand);
  color: #ffffff;
  box-shadow: var(--visual-shadow-soft);
}

html body :is(.quiet-button, .ds-button:not(.ds-button--primary):not(.ds-button--urgent), .dialog-button:not(.primary):not(.danger)):not(.danger):not(.revoke):not(.urgent):not(.warning) {
  border-color: var(--visual-line);
  background: var(--visual-surface);
  color: var(--visual-accent);
}

@media (hover: hover) {
  html body :is(.shared-primary, .ds-button--primary, .dialog-button.primary):not(:disabled):not(.danger):not(.ds-button--urgent):not(.revoke):hover {
    border-color: var(--visual-deep);
    background: var(--visual-deep);
  }
}

/* Dialog frames retain their established dimensions, fixed positioning,
   fullscreen breakpoints and independently scrolling content. */
html body :is(.operation-dialog, .compose-dialog, .notification-settings-dialog):not(.nav-destination):not(.lockdown-dialog) {
  border-color: var(--visual-line);
  background: var(--visual-surface);
  color: var(--visual-text);
  box-shadow: var(--visual-shadow-dialog);
}

html body :is(.operation-dialog, .compose-dialog):not(.nav-destination):not(.lockdown-dialog)::backdrop {
  background: rgb(8 24 16 / 48%);
}

html body :is(.operation-dialog > .dialog-heading, .operation-dialog > form > .dialog-heading, .compose-dialog > form > header) {
  border-color: var(--visual-line);
  background: var(--visual-surface);
  color: var(--visual-text);
}

html body :is(.dialog-heading h2, .compose-dialog header h2) {
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.25;
}

html body :is(.dialog-heading > button, .compose-dialog header > button) {
  border-radius: var(--visual-radius-control);
  border-color: var(--visual-line);
  background: var(--visual-surface);
  color: var(--visual-text);
}

@media (min-width: 601px) {
  html body :is(.operation-dialog, .compose-dialog, .notification-settings-dialog):not(.nav-destination):not(.lockdown-dialog) {
    border-radius: var(--visual-radius);
  }
}

/* Only text entry controls receive the common field finish. Checkbox/radio,
   upload, disabled, incident and access-state behavior is untouched. */
html body :is(.enroll-view, .welcome-view, .operation-dialog, .compose-dialog, .notification-settings-dialog) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select,
  textarea
):not(:disabled):not([aria-invalid="true"]) {
  border-color: var(--visual-line);
  border-radius: var(--visual-radius-control);
  background: var(--visual-surface-soft);
  color: var(--visual-text);
  font-family: var(--visual-font);
  box-shadow: inset 0 1px 2px rgb(12 32 21 / 2%);
}

html body :is(.enroll-view, .welcome-view, .operation-dialog, .compose-dialog) :is(input, textarea)::placeholder {
  color: var(--visual-muted);
  opacity: 1;
}

html body :is(.enroll-view .form-row > span, .compose-dialog label, .operation-dialog form > label:not(.responding-check)) {
  font-weight: 600;
}

html body :is(.ds-button, .shared-primary, .quiet-button, .dialog-button):focus-visible,
html body :is(.enroll-view, .welcome-view, .compose-dialog) :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--visual-focus);
  outline-offset: 3px;
}

/* Account lists remain flat inside their elevated popover. */
html body .account-menu {
  border-color: var(--visual-line);
  border-radius: var(--visual-radius);
  box-shadow: var(--visual-shadow-dialog);
}

html body .account-menu-item {
  font-family: var(--visual-font);
  font-weight: 550;
  line-height: 1.4;
}

/* Mobile form text must stay readable without Safari focus zoom.
   This shared rule includes dialogs and dynamically generated controls.
   Important overrides compact component and inline font sizes.
   Deliberate pinch zoom and map zoom remain available. */
@media (any-pointer: coarse), (max-width: 1024px) {
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]),
  select, textarea, [contenteditable="true"], [contenteditable="plaintext-only"] {
    font-size: max(16px, 1rem) !important;
  }
}