/* Approved visual direction, applied to existing module surfaces.
   Geometry, visibility, permission states, scrolling, and interaction rules
   remain owned by each module. Semantic warning and incident colors are not
   remapped to brand colors. Load after the module's original styles. */

/* Messages: preserve the inbox density and fixed mobile conversation layout. */
html body .messages-shell .messages-layout {
  border-color: var(--visual-line);
  border-radius: var(--visual-radius);
  background: var(--visual-surface);
  box-shadow: var(--visual-shadow-soft);
}
html body .messages-shell :is(.inbox-pane, .thread-pane, .thread-header, .message-composer) {
  border-color: var(--visual-line);
  background: var(--visual-surface);
  color: var(--visual-text);
}
html body .messages-shell .inbox-search {
  border-radius: var(--visual-radius-control);
  background: var(--visual-surface);
  box-shadow: inset 0 0 0 1px var(--visual-line);
  color: var(--visual-muted);
}
html body .messages-shell .conversation-row {
  background: var(--visual-surface);
  color: var(--visual-text);
}
html body .messages-shell .conversation-row:is(:hover, :focus-visible, .selected) {
  background: var(--visual-canvas);
}
html body .messages-shell .conversation-avatar:not(.on-campus) {
  background: var(--visual-surface-soft);
  border-color: var(--visual-line);
  color: var(--visual-accent);
  font-weight: 700;
}
html body .messages-shell .conversation-avatar.system { border-radius: var(--visual-radius-control); }
html body .messages-shell :is(.conversation-preview, .conversation-subject, .conversation-meta, .message-day) {
  color: var(--visual-muted);
}
html body .messages-shell .message-list { background: var(--visual-canvas); }
html body .messages-shell .message-block:not(.outgoing):not(.system) .message-bubble {
  background: var(--visual-surface);
  border-color: var(--visual-line);
  color: var(--visual-text);
  box-shadow: var(--visual-shadow-soft);
}
html body .messages-shell .message-block.outgoing .message-bubble {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
  box-shadow: var(--visual-shadow-soft);
}
html body .messages-shell .message-block.outgoing :is(.message-author, .message-time) {
  color: #fff;
  opacity: .88;
}
html body .messages-shell .message-block:not(.outgoing) .message-time {
  color: var(--visual-muted);
  opacity: 1;
}
html body .messages-shell :is(.thread-back, .unread-divider) { color: var(--visual-accent); }
html body .messages-shell .thread-header .eyebrow { color: var(--visual-muted); }
html body .messages-shell #message-form #send-message:not(:disabled) {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
}
html body .messages-shell .message-composer textarea { border-radius: var(--visual-radius-control); }
html body .messages-shell :is(.messages-tools button, .messages-tools a, .message-filters button, .thread-home, .quiet-button) {
  border-radius: var(--visual-radius-control);
  font-weight: 600;
}
html body .messages-shell :is(.message-filters button.active, #open-compose, .page-unread, .unread-count):not(:disabled) {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
}
html body :is(.message-tools-dialog, #message-actions, .compose-dialog) { box-shadow: var(--visual-shadow-dialog); }

/* Member scheduling and the existing administrative scheduling workspace. */
html body .scheduling-shell :is(section.view, .team-group, .scheduling-signin-card, .unavailable-panel, .unavailable-sunday) {
  border-color: var(--visual-line);
  background: var(--visual-surface);
  color: var(--visual-text);
  box-shadow: var(--visual-shadow-soft);
}
html body.member-schedule-view .scheduling-shell section.view,
html body .scheduling-shell :is(.team-group, .scheduling-signin-card, .unavailable-panel, .special-event-card, .special-event-session-group, .special-event-my-summary) {
  border-radius: var(--visual-radius);
}
html body .scheduling-shell .person-card:not(.has-open-callout) {
  border-radius: var(--visual-radius-control);
  border-color: var(--visual-line);
}
html body .scheduling-shell .my-duty:not(.has-open-callout) {
  border-width: 1px;
  border-color: var(--visual-line);
  background: var(--visual-surface);
  box-shadow: var(--visual-shadow-soft);
}
html body .scheduling-shell .my-duty:not(.has-open-callout):not(.source-off-duty) .my-duty-date {
  border-radius: var(--visual-radius-control);
  padding: 9px 12px;
  background: var(--visual-deep);
  color: #fff;
  font-weight: 650;
}
html body .scheduling-shell #add-time-off:not(:disabled) {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
  font-weight: 650;
}
html body .scheduling-shell :is(.my-duty-date, .my-duty-post, .special-event-card-heading h4, .marketplace-card > strong) {
  color: var(--visual-text);
}
html body .scheduling-shell :is(.my-duty-time, .time-off-date small, .marketplace-row-time, .special-event-row-date) {
  color: var(--visual-muted);
}
html body .scheduling-shell :is(.team-group-heading, .note:not(.amber)) {
  background: var(--visual-surface-soft);
  border-color: var(--visual-line);
}
html body .scheduling-shell .team-group-heading h3 { color: var(--visual-text); }
html body .scheduling-shell :is(.my-duty .post-order-link, .special-event-my-summary > summary) {
  color: var(--visual-accent);
}
html body .scheduling-shell :is(.special-event-card, .special-event-session-group, .special-event-my-summary) {
  border-color: var(--visual-line);
  background: var(--visual-surface);
}
html body .scheduling-shell #marketplace .marketplace-card,
html body .scheduling-shell #special-events :is(.special-event-row, .personal-event-session) {
  border-bottom-color: var(--visual-line);
  color: var(--visual-text);
}
html body .scheduling-shell #special-events .special-event-swipe .special-event-row {
  background: var(--visual-surface);
}
html body .scheduling-shell :is(.time-off-panel button, .time-off-row button, .my-duty-callout button,
  .marketplace-back, .special-events-back, #special-events-list-back, #marketplace-refresh,
  .special-event-member-action button, .special-event-messaging button, .special-event-message-link,
  .special-event-create-submit, .special-event-confirmed-add button, .special-event-volunteer-actions button,
  .special-event-manager-controls button, .special-events-actions button, .marketplace-actions button,
  .shift-marketplace-entry button, .special-events-entry button, .master-board-heading button, .master-builder-link) {
  border-radius: var(--visual-radius-control);
  font-weight: 650;
}
html body .scheduling-shell :is(.time-off-panel input, .special-event-edit-fields input,
  .special-event-note-field textarea, .special-event-messaging-schedule input) {
  border-radius: var(--visual-radius-control);
  border-color: var(--visual-line);
  background: var(--visual-surface);
  color: var(--visual-text);
}
html[data-theme="light"] .scheduling-shell :is(.special-events-actions button, .marketplace-actions button,
  .shift-marketplace-entry button, .special-events-entry button, .special-event-create-submit,
  .special-event-member-action button:not(.quiet), .special-event-confirmed-add button,
  .special-event-volunteer-actions button:not(.quiet), .special-event-manager-controls button:not(.quiet)):not(:disabled) {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
}
html[data-theme="light"] .scheduling-shell #marketplace .marketplace-row-body button:not(:disabled) {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
  border-radius: var(--visual-radius-control);
}
html body .scheduling-shell :is(nav.tabs button, nav.tabs a) { font-weight: 650; }
html[data-theme="light"] .scheduling-shell :is(nav.tabs button, nav.tabs a):not(.active) {
  background: var(--visual-canvas);
  color: var(--visual-muted);
}
html[data-theme="light"] .scheduling-shell nav.tabs button.active {
  border-color: var(--visual-line);
  color: var(--visual-brand);
  background: var(--visual-surface);
}

/* Sunday Studio stays a dense, light leader workspace. */
html body.visual-studio {
  --green: var(--visual-brand);
  --muted: var(--visual-muted);
  --line: var(--visual-line);
  background: var(--visual-canvas);
  color: var(--visual-text);
  font-family: var(--visual-font);
}
html body.visual-studio header {
  background: var(--visual-surface);
  border-color: var(--visual-line);
}
html body.visual-studio :is(.panel, .studio-secondary .panel) {
  border-radius: var(--visual-radius);
  border-color: var(--visual-line);
  background: var(--visual-surface);
  box-shadow: var(--visual-shadow-soft);
}
html body.visual-studio :is(.panel-head, .studio-secondary .panel-head) {
  background: var(--visual-surface);
  border-color: var(--visual-line);
}
html body.visual-studio :is(.nav button, .segmented button, .schedule-tools > summary, .studio-back,
  .field input, .field select, .rules-filter input, .rules-filter select) {
  border-radius: var(--visual-radius-control);
}
html body.visual-studio :is(.nav button.active, .team-views button[aria-pressed="true"], .segmented button[aria-pressed="true"]) {
  background: var(--visual-canvas);
  color: var(--visual-brand);
  border-color: var(--visual-line);
  box-shadow: var(--visual-shadow-soft);
}
html body.visual-studio :is(.heading h1, .schedule-title h1, .panel-head h2) { letter-spacing: -.025em; }
html body.visual-studio .note:not(.amber) { background: var(--visual-surface); border-color: var(--visual-line); }
html body.visual-studio :is(.search-info, .rule-person, .rail-card, .member-hero, .offer .request) {
  background: var(--visual-surface);
  border-color: var(--visual-line);
}
html body.visual-studio :is(.roster-table th, .timeline th, .time-label) { background: var(--visual-canvas); }

/* Prayer retains its separate feed, request/praise labels, and response state. */
html[data-theme="light"] {
  --ministry-green: var(--visual-brand);
  --ministry-accent: var(--visual-brand);
  --ministry-soft: var(--visual-surface-soft);
  --ministry-line: var(--visual-line);
  --ministry-paper: var(--visual-surface);
  --ministry-text: var(--visual-text);
  --ministry-muted: var(--visual-muted);
}
html body .prayer-shell .prayer-header { background: var(--visual-deep); border-color: var(--visual-deep); }
html body .prayer-shell .ministry-card {
  border-radius: var(--visual-radius);
  box-shadow: var(--visual-shadow-soft);
}
html body .prayer-shell :is(.share-choices button, .ministry-actions button, .ministry-manage button, .prayer-settings-launch),
html body .prayer-dialog :is(textarea, .dialog-footer button) { border-radius: var(--visual-radius-control); }
html body .prayer-shell .prayer-filters button.active { font-weight: 650; }
html body .prayer-shell .ministry-avatar { background: var(--ministry-soft); }
html body .prayer-dialog { border-radius: var(--visual-radius); box-shadow: var(--visual-shadow-dialog); }

/* Team lists and guides use group surfaces, never a card around every row. */
html body #live-dialog :is(.team-area-group, .coverage-position) {
  border-radius: var(--visual-radius);
  border-color: var(--visual-line);
  background: var(--visual-surface);
  box-shadow: var(--visual-shadow-soft);
}
html body #live-dialog .team-area-own { border-left-color: var(--church-green); }
html body #live-dialog :is(.team-view-toggle, .coverage-team-toggle, .coverage-sort-toggle) {
  background: var(--visual-canvas);
  border-color: var(--visual-line);
  border-radius: var(--visual-radius-control);
}
html body #live-dialog :is(.team-view-toggle, .coverage-team-toggle, .coverage-sort-toggle) button[aria-pressed="true"] {
  background: var(--visual-surface);
  color: var(--visual-accent);
  box-shadow: var(--visual-shadow-soft);
}
html body .guide-sections :is(section, .guide-section-button) {
  border-color: var(--visual-line);
  background: var(--visual-surface);
  color: var(--visual-text);
}
html body .guide-section-button strong { font-weight: 650; }
html body :is(.training-summary, .training-viewer, .radio-guide-section, .video-comment) {
  border-radius: var(--visual-radius-control);
  border-color: var(--visual-line);
}
html body :is(.training-topic-tabs, .training-card-picker, .training-viewer-controls) button {
  border-radius: var(--visual-radius-control);
  font-weight: 650;
}
html[data-theme="light"] :is(.training-topic-tabs button.active, .training-card-picker button.active) {
  background: var(--visual-brand);
  color: #fff;
  border-color: var(--visual-brand);
}
html body .radio-use-guide li { box-shadow: var(--visual-shadow-soft); }
html body .service-order-services {
  border-radius: var(--visual-radius-control);
  background: var(--visual-canvas);
  border-color: var(--visual-line);
}
html body .service-order-services button.active {
  background: var(--visual-surface);
  color: var(--visual-accent);
  box-shadow: var(--visual-shadow-soft);
}
html body .service-order-feedback { border-radius: var(--visual-radius-control); }
html body #issues-log-dialog .issue-list-section > h3 {
  background: var(--visual-surface-soft);
  border-color: var(--visual-line);
}
html body #issues-log-dialog .issue-card {
  background: var(--visual-surface);
  border-bottom-color: var(--visual-line);
}
/* Report severity edges and voluntary response controls retain their meaning. */
html body :is(#issue-dialog, #issue-thread-dialog) {
  --report-button: var(--visual-brand);
  border-radius: var(--visual-radius);
  box-shadow: var(--visual-shadow-dialog);
}
html[data-theme="light"] body :is(#issue-dialog, #issues-log-dialog, #issue-thread-dialog,
  #report-resolution-dialog, #incident-detail-dialog, #poi-gallery-detail-dialog) {
  --issue-action: var(--visual-brand);
}
html body :is(#issue-dialog, #issue-thread-dialog) button,
html body #issue-dialog :is(select, textarea, .issue-details-shell, .incident-level-option),
html body #issue-thread-dialog :is(.thread-message-form textarea, .thread-color-control) {
  border-radius: var(--visual-radius-control);
}
html body #issue-dialog .issue-details-field > label { color: var(--visual-text); }
@media (max-width: 560px) {
  html body :is(#issue-dialog, #issue-thread-dialog) { border-radius: 0; }
}

/* Contacts, service uploads, and map browsing share neutral surfaces. */
html body .profiles-content :is(#people, .card),
html body .service-upload-shell .upload-card,
html body .maplib-shell :is(.browser, .panel) {
  border-radius: var(--visual-radius);
  border-color: var(--visual-line);
  background: var(--visual-surface);
  box-shadow: var(--visual-shadow-soft);
}
html body .profiles-content :is(input, select, textarea, .profiles-tools a, .head-actions a, .status-actions a),
html body .service-upload-shell :is(.upload-button, .upload-primary, .upload-add-row),
html body .maplib-shell :is(.toolbar button, .view-btn, select) { border-radius: var(--visual-radius-control); }
html body .profiles-content .initials { color: var(--visual-accent); background: var(--visual-surface-soft); }
html[data-theme="light"] .profiles-content .primary:not(:disabled):not(.danger),
html[data-theme="light"] .service-upload-shell .upload-primary:not(:disabled):not(.danger) {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
}

/* Team administration and Owner retain their existing access and danger states. */
html body #admin-dialog :is(.admin-card, .admin-nav-entry) {
  border-radius: var(--visual-radius);
  border-color: var(--visual-line);
  background: var(--visual-surface);
  box-shadow: var(--visual-shadow-soft);
}
html body #admin-dialog .admin-card > summary { border-radius: var(--visual-radius); }
html body #admin-dialog .admin-card[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html body #admin-dialog :is(.admin-hub-sections, button, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: var(--visual-radius-control);
}
html body #admin-dialog .admin-hub-sections > button[aria-pressed="true"] {
  background: var(--visual-surface);
  color: var(--visual-accent);
  box-shadow: var(--visual-shadow-soft);
}
html body #admin-dialog .shared-primary:not(:disabled):not(.danger):not(.revoke):not(.urgent):not(.warning) {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
}
html body.visual-owner {
  --ink: var(--visual-text);
  --green: var(--visual-brand);
  --mint: var(--visual-surface-soft);
  --canvas: var(--visual-canvas);
  --surface: var(--visual-surface);
  --muted: var(--visual-muted);
  --line: var(--visual-line);
  background: var(--visual-canvas);
  font-family: var(--visual-font);
}
html body.visual-owner :is(.login-card, .workspace, .activity, .module-control-card, .assessment-workspace, .assessment-answer-section) {
  border-radius: var(--visual-radius);
  border-color: var(--visual-line);
  box-shadow: var(--visual-shadow-soft);
}
html body.visual-owner :is(button, input:not([type="checkbox"]):not([type="radio"]), select) {
  border-radius: var(--visual-radius-control);
}
html body.visual-owner button.primary:not(:disabled):not(.danger):not(.revoke):not(.urgent):not(.warning) {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
}
html body.visual-owner :is(.admin-tab.active, .assessment-list-item.selected) {
  background: var(--visual-canvas);
  color: var(--visual-brand);
}

/* Standalone tools retain their tables, local-storage notices, and editors. */
html body.standalone-app :is(.import-step, .upload-kind-picker, .team-layout, .placement-layout) {
  border-radius: var(--visual-radius);
  border-color: var(--visual-line);
  background: var(--visual-surface);
  box-shadow: var(--visual-shadow-soft);
}
html body.standalone-app :is(.tool-actions a, .upload-zone, .file-drop, .placement-status, .floor-tab) {
  border-radius: var(--visual-radius-control);
  border-color: var(--visual-line);
}
html[data-theme="light"] body.standalone-app :is(.dialog-button.primary, .primary-upload, .save-profile,
  .add-person button, .setup-tab.active, .upload-tab.active, .live-tab.active):not(:disabled):not(.danger):not(.revoke):not(.urgent):not(.warning) {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
}

/* Guest apps: deliberately specific to win over their late module styles. */
html body.guest-app :is(.panel, .now-card, .identity, .planned-strip, .info-section, .location-plan),
html body.guest-app :is(.panel.campus-switch, .panel.close-support-day, .panel.qr-first) {
  border-radius: var(--visual-radius);
  box-shadow: var(--visual-shadow-soft);
}
html body.guest-app :is(button, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: var(--visual-radius-control);
}
html body.guest-app .topbar { background: var(--visual-surface); border-color: var(--visual-line); }
html[data-theme="light"] body.guest-app :is(.primary, .primary-action, #message-form button):not(:disabled):not(.danger):not(.revoke):not(.urgent):not(.warning) {
  background: var(--visual-brand);
  border-color: var(--visual-brand);
  color: #fff;
}
/* Guest partner pages intentionally remain light, including when the stored
   member preference is dark. Existing guest CSS uses !important for this. */
html body.guest-partner-app { background: #ededed !important; }
html body.guest-partner-app .phone { background: #ededed; }
html body.guest-partner-app :is(header, .card) {
  background: #fff;
  border-color: #d8dcd9;
}
html body.guest-partner-app .card {
  border-radius: 18px;
  box-shadow: 0 2px 5px rgb(0 0 0 / .035);
}
html body.guest-partner-app button.primary:not(:disabled):not(.danger):not(.urgent):not(.warning) {
  background: #245d3e !important;
  border-color: #245d3e !important;
}
html body.guest-partner-app :is(button, input, select) { border-radius: 12px; }
html body.guest-partner-app .tabs button.active {
  background: #245d3e;
  color: #fff;
}
html body.guest-partner-app .tabs { background: #fff; border-color: #d8dcd9; }
html body.guest-partner-app .note { background: #fff; color: #626762; }
html body.guest-partner-app :is(.avatar, .msg.mine .bubble) { background: #ededed; }

/* Operations keeps its map, workspace density, and all issue-level colors. */
html body .ops-shell :is(.ops-map-panel, .ops-access) {
  border-radius: var(--visual-radius);
  border-color: var(--visual-line);
}
html body .ops-shell .ops-view-toggle button {
  border-radius: var(--visual-radius-control);
  font-weight: 650;
}
html body .ops-shell .ops-view-toggle button[aria-pressed="true"] {
  color: var(--visual-accent);
  background: var(--visual-surface);
  border-color: var(--visual-line);
  box-shadow: var(--visual-shadow-soft);
}

/* Optional Home Favorite keeps its content and selection behavior unchanged. */
html body :is(.home-favorite-prompt, .home-favorite-card) {
  border-color: var(--visual-line);
  border-style: solid;
  border-radius: var(--visual-radius);
  background: var(--visual-surface);
  color: var(--visual-text);
  box-shadow: var(--visual-shadow-soft);
}
html body :is(.home-favorite-prompt .eyebrow, .home-favorite-card small, .home-favorite-choices > button b) {
  color: var(--visual-accent);
  font-weight: 650;
}
html body .home-favorite-prompt h2 { color: var(--visual-text); font-weight: 650; }
html body :is(.home-favorite-prompt p:not(.eyebrow), .home-favorite-choices > button small, .home-favorite-note) {
  color: var(--visual-muted);
}
html body .home-favorite-prompt > button:not(:disabled) {
  background: var(--visual-brand);
  color: #fff;
  border-radius: var(--visual-radius-control);
  font-weight: 650;
}
html body .home-favorite-choices > button {
  border-color: var(--visual-line);
  border-radius: var(--visual-radius-control);
  background: var(--visual-surface);
  color: var(--visual-text);
}
html body .home-favorite-choices > button[aria-checked="true"] {
  border-color: var(--visual-accent);
  background: var(--visual-canvas);
  box-shadow: inset 3px 0 0 var(--visual-accent);
}

/* Roadmap owns a separate theme preference. Only its light neutral surfaces
   receive the shared palette; review/acceptance and dark colors remain local. */
html:not([data-roadmap-theme="dark"]) body:has(.roadmap-shell) {
  --board-canvas: #ededed;
  --board-surface: #fff;
  --board-text: #17231c;
  --board-muted: #626762;
  --board-line: #d8dcd9;
  --board-accent: #245d3e;
  --board-selected: #ededed;
}

html body :is(.shared-primary, #send-message, #add-time-off):not(:disabled):not(.danger):not(.revoke):not(.urgent):not(.warning):active {
  filter: brightness(.94);
}