/* Shared visual system. Loaded after page styles; layout and visibility stay with
   each feature. Use these tokens for new components instead of local colors. */
:root {
  --site-bg: #081426;
  --site-panel: #11243c;
  --site-panel-raised: #18314d;
  --site-field: #0b1c31;
  --site-border: #36516e;
  --site-text: #f5f8ff;
  --site-muted: #bbcee5;
  --site-blue: #2563d9;
  --site-blue-hover: #3474ee;
  --site-link: #a6d2ff;
  --site-focus: #8ac6ff;
  --site-radius: 12px;
  --site-shadow: 0 12px 32px rgb(0 8 24 / 24%);
  --site-dialog-shadow: 0 28px 80px rgb(0 5 18 / 55%);
  --site-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html:root,
body.site-blue,
body.site-blue :is(.admin-app-shell, .ann-app, .community-announcements, .messenger-panel, .messenger-route-main) {
  color-scheme: dark;
  --bg: var(--site-bg);
  --surface: var(--site-panel);
  --surface-strong: var(--site-panel-raised);
  --text: var(--site-text);
  --muted: var(--site-muted);
  --primary: var(--site-blue);
  --primary-2: #3985e8;
  --accent: var(--site-link);
  --accent-2: #6baaff;
  --ui-panel: var(--site-panel);
  --ui-field: var(--site-field);
  --ui-border: var(--site-border);
  --shadow: var(--site-shadow);
  --radius: var(--site-radius);
  --catalog-panel: var(--site-panel);
  --catalog-field: var(--site-field);
  --catalog-border: var(--site-border);
  --ann-bg: var(--site-bg);
  --ann-surface: var(--site-panel);
  --ann-surface-strong: var(--site-panel-raised);
  --ann-border: var(--site-border);
  --ann-border-strong: #52769a;
  --ann-text: var(--site-text);
  --ann-muted: var(--site-muted);
  --admin-bg: var(--site-bg);
  --admin-bg-soft: var(--site-field);
  --admin-surface: var(--site-panel);
  --admin-surface-subtle: var(--site-field);
  --admin-surface-raised: var(--site-panel-raised);
  --admin-border: var(--site-border);
  --admin-border-strong: #52769a;
  --admin-text: var(--site-text);
  --admin-text-muted: var(--site-muted);
  --admin-accent: var(--site-link);
  --admin-radius-sm: 8px;
  --admin-radius-md: var(--site-radius);
  --admin-radius-lg: 16px;
  --admin-focus-ring: 0 0 0 3px rgb(138 198 255 / 25%);
}
html:root { background: var(--site-bg); }
body.site-blue {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 10% 0, #163860 0, transparent 55%), var(--site-bg) !important;
  color: var(--site-text) !important;
  font-family: var(--site-font) !important;
  font-size: 16px;
  line-height: 1.55;
  accent-color: var(--site-blue);
  scrollbar-color: #52769a var(--site-bg);
}
body.site-blue *, body.site-blue *::before, body.site-blue *::after { box-sizing: border-box; }
body.site-blue :is(button, input, select, textarea) { font-family: var(--site-font); }
body.site-blue :is(h1,h2,h3,h4,h5,h6) {
  color: var(--site-text);
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 700;
}
body.site-blue h1 { font-size: clamp(1.85rem, 1.4rem + 1.8vw, 3rem); }
body.site-blue h2 { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.8rem); }
body.site-blue :is(.title, .page-title, .section-title) {
  color: var(--site-text) !important;
  -webkit-text-fill-color: var(--site-text);
  background-image: none;
  text-shadow: none;
}
body.site-blue :is(.muted, .subtitle, .page-description, .help-text, .hint, .field small) { color: var(--site-muted); }
body.site-blue :is(p, li, td, label) { overflow-wrap: break-word; }
body.site-blue a { color: var(--site-link); text-underline-offset: 3px; }
body.site-blue a:hover { color: #d6eaff; }
body.site-blue :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--site-focus) !important;
  outline-offset: 3px;
}
body.site-blue ::selection { color: #fff; background: #245bb3; }

/* Shared surfaces, including legacy public-page cards. */
body.site-blue :is(
  .glass-card, .card, .panel, .admin-panel, .admin-card, .settings-card,
  .product-card, .tool-card, .resource-card, .ann-panel, .ann-card,
  .profileSummaryCard, .serviceCard, .receivedCard, .needCard, .donationCard,
  .classifiedCard, .cls-card, .empty-state-card, .notifications-card,
  .site-route-card, .access-card, .code-card, .inventory-card,
  .messenger-guide-hero, .messenger-guide-section, .messenger-guide-card,
  .admin-report-chart, .resource-step
) {
  background: var(--site-panel) !important;
  color: var(--site-text) !important;
  border: 1px solid var(--site-border) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: var(--site-shadow);
  backdrop-filter: none;
}
body.site-blue :is(.glass-card, .settings-card, .empty-state-card) { padding: clamp(16px, 2vw, 24px); }
body.site-blue hr { border: 0; border-top: 1px solid var(--site-border); }

/* Form controls share contrast, sizing, focus and disabled states. The type
   exclusions keep switches, sliders, colors and camera/scanner inputs intact. */
body.site-blue :is(
  input:where(:not(:is([type=checkbox], [type=radio], [type=range], [type=color], [type=hidden], [type=button], [type=submit], [type=image]))),
  select, textarea, .input, .select
) {
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--site-field) !important;
  color: var(--site-text) !important;
  border: 1px solid var(--site-border) !important;
  border-radius: 8px !important;
  font-size: 1rem;
  line-height: 1.45;
  box-shadow: none;
}
body.site-blue textarea { resize: vertical; }
body.site-blue :is(input, textarea)::placeholder { color: #9db5d0; opacity: 1; }
body.site-blue select option { background: var(--site-field); color: var(--site-text); }
body.site-blue input::file-selector-button {
  margin-right: 12px;
  padding: 7px 12px;
  border: 1px solid #507396;
  border-radius: 6px;
  background: #214567;
  color: var(--site-text);
  font: inherit;
  cursor: pointer;
}
body.site-blue input:-webkit-autofill {
  -webkit-text-fill-color: var(--site-text);
  box-shadow: 0 0 0 1000px var(--site-field) inset;
}
body.site-blue :is(input, textarea, select)[aria-invalid=true] { border-color: #f99ca6 !important; }
body.site-blue :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .55; }
body.site-blue .field { gap: 8px; }
body.site-blue :is(.field > span, .field > label) { font-size: .9rem; font-weight: 600; color: var(--site-text); }
body.site-blue .field small { font-size: .85rem; font-weight: 400; line-height: 1.5; }

/* All actions use the same blue family. Destructive actions remain recognizable. */
body.site-blue button { color: var(--site-text); }
body.site-blue :is(.btn, .button, button[type=submit], input[type=submit], .swal2-confirm,
  .pwaInstallModalBtn, .modal-btn, .resource-file--pdf a, .msg-listing-action) {
  min-height: 44px;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--site-blue) !important;
  color: #fff !important;
  border: 1px solid #548eef !important;
  border-radius: 8px !important;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
body.site-blue :is(.btn, .button, button[type=submit], .swal2-confirm):hover:not(:disabled) {
  background: var(--site-blue-hover) !important;
  transform: none;
  filter: none;
}
body.site-blue :is(.btn-ghost, .btn-secondary, .button.secondary, .btn.secondary, .swal2-cancel, .modal-btn-neutral, .pwaInstallModalBtn--ghost) {
  background: #1b3553 !important;
  color: var(--site-text) !important;
  border: 1px solid var(--site-border) !important;
}
body.site-blue :is(.btn-danger, .btn-delete, .swal2-deny, .modal-btn-warn) {
  background: #822b40 !important;
  color: #fff !important;
  border-color: #c86578 !important;
}
body.site-blue :is(.btn-danger, .btn-delete):hover:not(:disabled) { background: #9a3450 !important; }
body.site-blue :is(.badge, .chip, .tag) {
  border-radius: 999px;
  background: #1c3b5e;
  border-color: #476b91;
  color: var(--site-text);
}
body.site-blue :is(.badge-success, .status-success) { background: #164c48; color: #d8fff2; }
body.site-blue :is(.badge-warning, .status-warning) { background: #59451f; color: #fff0c3; }
body.site-blue :is(.badge-danger, .status-error, .error-message) { color: #ffc0cb; }

/* Navigation and interactive selections use one consistent highlight. */
body.site-blue :is(.header, .site-header, .main-header, .mobile-nav, .admin-nav-panel, .admin-mobile-navigation) {
  background: var(--site-panel) !important;
  color: var(--site-text);
  border-color: var(--site-border) !important;
}
body.site-blue :is(.admin-tab, .account-tab, .tab-button, .tab-btn, .cal-controls button) {
  border-radius: 8px;
  color: var(--site-text);
}
body.site-blue :is(.admin-tab.active, .account-tab.active, .tab-button.active, .tab-btn.active,
  .conversation-item.active, .conversation-item.is-space-channel.active, [role=tab][aria-selected=true]) {
  background: #214b7b !important;
  color: #fff !important;
  border-color: #719bcb !important;
}
body.site-blue :is(.page-eyebrow, .admin-page-eyebrow, .eyebrow, .messenger-guide-kicker) { color: var(--site-link); }

/* Panels only: overlays retain each component's positioning, display and open
   contracts. No generic rule opens a hidden modal or changes its z-index. */
body.site-blue :is(
  dialog, .swal2-popup, .login-popup-container, .form-box,
  .resource-modal__dialog, .resource-video-modal__dialog, .product-editor__dialog,
  .cal-modal-dialog, .npc-pages-dialog, .admin-user-dialog, .admin-pin-dialog,
  .ann-view-dialog, .messenger-admin-modal__dialog, .spaces-admin-modal-dialog,
  .resource-admin-dialog > form, .popover-content, .custom-checkout-dialog,
  .checkout-modal-shell, .giveToModal, .classifiedConfirmModal,
  .pwaInstallModal, .pwaNotificationsModal, .donatePopup,
  .addGoalPopup, .joinGoalPopup, .addNeedPopup, .viewNeedPopup,
  .editClassifiedsPopup, .addClassifiedsPopup, .userSettingsPopup,
  .admin-upload-loader__card, .material-icon-picker__dialog, .toast,
  .notification-panel
) {
  background: var(--site-panel-raised) !important;
  color: var(--site-text) !important;
  border: 1px solid #52769a !important;
  border-radius: 16px !important;
  box-shadow: var(--site-dialog-shadow) !important;
  font-family: var(--site-font);
}
body.site-blue :is(dialog, .swal2-popup, .resource-modal__dialog, .login-popup-container,
  .custom-checkout-dialog, .checkout-modal-shell, .giveToModal, .pwaInstallModal,
  .donatePopup, .addGoalPopup, .joinGoalPopup, .addNeedPopup, .viewNeedPopup) {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px);
  overscroll-behavior: contain;
}
body.site-blue dialog::backdrop { background: rgb(2 9 22 / 78%); backdrop-filter: blur(5px); }
body.site-blue :is(.popUpBackground, .resource-modal__backdrop, .resource-video-modal__backdrop,
  .custom-checkout-backdrop, .giveToModalBackdrop, .addGoalPopupBackdrop,
  .joinGoalPopupBackdrop, .addNeedPopupBackdrop, .viewNeedPopupBackdrop,
  .pwaInstallModalBackdrop, .donatePopupBackdrop, .editClassifiedsModalBackdrop) {
  background: rgb(2 9 22 / 78%) !important;
  backdrop-filter: blur(5px);
}
body.site-blue :is(.modal-head, .resource-modal__header, .resource-video-modal__header,
  .resource-admin-dialog__head, .checkout-modal-head, .checkout-modal-foot,
  .home-dialog-header, .admin-user-modal-head) { border-color: var(--site-border) !important; }
body.site-blue :is(.resource-modal__close, .checkout-modal-close, .closeLoginPopup, .donatePopupClose, .pwaInstallModalClose) {
  background: #244363 !important;
  color: #fff !important;
  border: 1px solid #52769a;
  border-radius: 8px;
}
body.site-blue :is(.swal2-title, .swal2-html-container, .toast .title, .toast .message) { color: var(--site-text) !important; }
body.site-blue :is(.resource-modal__body, .modal-body, .home-dialog-description) { line-height: 1.65; }

/* Tables, chat and media retain their feature layout. */
body.site-blue :is(.table, .admin-table, table) { color: var(--site-text); border-color: var(--site-border); }
body.site-blue :is(.table, .admin-table, table) th { background: #193654 !important; color: #e8f2ff !important; border-color: var(--site-border); }
body.site-blue :is(.table, .admin-table, table) td { border-color: var(--site-border); }
body.site-blue :is(.messenger-panel, .messenger-left, .messenger-right, .messenger-body, .messenger-header, .composer) {
  background: var(--site-panel) !important;
  color: var(--site-text);
  border-color: var(--site-border) !important;
}
body.site-blue .msg-bubble { background: #21415f; color: #fff; }
body.site-blue :is(.msg-row.own, .msg-row.self, .message.sent) .msg-bubble { background: #235ab2; color: #fff; }
body.site-blue .resource-button { color: var(--site-text); background: var(--site-panel); border-color: var(--site-border); }
body.site-blue audio { color-scheme: dark; }
body.site-blue details > summary { color: var(--site-text); cursor: pointer; }
body.site-blue :is(.resource-step, .resource-more-options) { border-color: var(--site-border); }
body.site-blue :is(.resource-step h5 > span, .resource-button > .material-symbols-rounded) { background: #244b78; color: #d6eaff; }
@media (max-width: 560px) {
  body.site-blue { font-size: 15px; }
  body.site-blue :is(input, select, textarea) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.site-blue *, body.site-blue *::before, body.site-blue *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* Remaining legacy editors and home/store panels use the same surfaces. */
body.site-blue :is(.popup-container, .edit-popup, .editClassifiedsItemContainer,
  .announcementsPopup, .addAnnouncementPopup, .announceModal, .site-notifications,
  .addProductOptions, .userSettingsContainer) {
  background: var(--site-panel-raised) !important;
  color: var(--site-text) !important;
  border: 1px solid #52769a !important;
  border-radius: 16px !important;
  box-shadow: var(--site-dialog-shadow) !important;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
body.site-blue :is(.contactInfo, .contactCard, .info-box, .announcementMessage,
  .committedSummary, .recentDonations, .manageUsersPageDonationItem,
  .unknownItemDonationsListITem, .mobile-nav-sidebar, .admin-workspace,
  .messenger-guide-grid > div) {
  background: var(--site-panel) !important;
  color: var(--site-text) !important;
  border-color: var(--site-border) !important;
  border-radius: var(--site-radius);
}
body.site-blue :is(.donationInfo h4, .unknownItemDonationsListITem h3,
  .popup-heading, .editClassifiedsItemConatinerHeading, .viewNeedPopup h1) { color: var(--site-text) !important; }
body.site-blue :is(.doneButton, .linkToProductButton, .addAnnouncementButton,
  .announcementTypeBtn, .popup-buttons button, .form button,
  .editClassifiedsItemContainer button, .header-action-button) {
  min-height: 44px;
  padding: 10px 16px;
  background: var(--site-blue) !important;
  color: #fff !important;
  border: 1px solid #548eef !important;
  border-radius: 8px;
  font: 600 .95rem/1.4 var(--site-font);
  cursor: pointer;
}
body.site-blue .announcementTypeBtn:not(.selected) { background: #1b3553 !important; border-color: var(--site-border) !important; }
body.site-blue :is(.site-notifications-nav-count, .mobile-menu-notification-count, .conversation-unread, .headerCartBadge) { color: #fff !important; background: var(--site-blue); }
body.site-blue :is(.edit-popup-overlay, .editClassifiedsItemContainerParentContainer) { background: rgb(2 9 22 / 78%) !important; backdrop-filter: blur(5px); }
body.site-blue :is(.grad-overlay, .blob, .stars, .ring) { opacity: .12; }
body.site-blue [hidden]:not([hidden="until-found"]) { display: none !important; }
body.site-blue :is(button.btn-danger, a.btn-danger, button.btn-delete, a.btn-delete, button.swal2-deny, button.modal-btn-warn) {
  background: #822b40 !important;
  color: #fff !important;
  border-color: #c86578 !important;
}
body.site-blue :is(button.btn-danger, a.btn-danger, button.btn-delete, a.btn-delete):hover:not(:disabled) { background: #9a3450 !important; }

body.site-blue :is(.community-announcements, .home-hero, .home-hero__panel) { background: var(--site-panel) !important; color: var(--site-text); border: 1px solid var(--site-border); border-radius: var(--site-radius); }
body.site-blue .announceBackdrop { background: rgb(2 9 22 / 78%) !important; }
body.site-blue :is(.btn.ghost, .btn.secondary) { background: #1b3553 !important; color: #fff !important; border-color: var(--site-border) !important; }
body.site-blue :is(.detail-dialog, .tool-modal-card, .messenger-dialog) {
  background: var(--site-panel-raised) !important;
  color: var(--site-text) !important;
  border: 1px solid #52769a !important;
  border-radius: 16px !important;
  box-shadow: var(--site-dialog-shadow) !important;
}
body.site-blue :is(.messenger-dialog-backdrop, .tool-modal-backdrop, .detail-backdrop, .swal2-container.swal2-backdrop-show) { background: rgb(2 9 22 / 78%) !important; }
/* Contrast corrections: light Google-branded controls need dark text even
   though ordinary links on the dark site use pale blue. */
body.site-blue :is(a.google-login, a.google-request-button),
body.site-blue :is(a.google-login, a.google-request-button):is(:hover, :focus-visible, :active) {
  background: #fff !important;
  color: #172b43 !important;
  border: 1px solid #c4d2e2 !important;
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  text-shadow: none;
}
body.site-blue :is(a.google-login, a.google-request-button) span { color: inherit; }
body.site-blue .login-popup-container .popup-header { padding-right: 28px; }
body.site-blue .login-popup-container .popup-header h2 { font-size: 1.65rem; }
body.site-blue .login-popup-container :is(.popup-header p, .google-primary-copy, .hint, .auth-footer, .remember-device) {
  color: #e3edfa;
  font-size: .9375rem;
  line-height: 1.5;
}
body.site-blue .login-popup-container .field-label { color: #f5f8ff; font-size: .9375rem; }
body.site-blue .login-popup-container .popup-tabs { margin-top: 14px; flex-wrap: wrap; }
body.site-blue .login-popup-container .popup-tabs .tab-btn {
  min-height: 42px;
  padding: 9px 16px;
  font-size: .9375rem;
  color: #fff;
  background: #284564;
  border: 1px solid #6b89aa;
}
body.site-blue .login-popup-container a.google-login { min-height: 52px; }
body.site-blue .login-popup-container .auth-password-details summary {
  min-height: 46px;
  font-size: .9375rem;
  color: #fff;
  background: #284564;
  border: 1px solid #6b89aa;
}
body.site-blue .login-popup-container .form .password-toggle {
  min-width: 36px;
  width: 36px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  background: #284564 !important;
  color: #fff !important;
}
body.site-blue .login-popup-container .password-wrap input { padding-right: 52px !important; }

/* These legacy controls previously assumed a light teal primary color. */
body.site-blue :is(.account-tab-button.active, .messenger-tab.active,
  .messenger-group-builder [data-create-group], .messenger-details-section .new-btn,
  .messenger-details-primary, .messenger-dialog-footer .new-btn,
  .messenger-wizard-actions .new-btn, .mobile-day.is-selected,
  .mobile-day-event-count, .mobile-calendar-add, .msg.me, .msg-bubble.me) {
  background: var(--site-blue) !important;
  color: #fff !important;
}
body.site-blue .account-tab-button.active .account-tab-count { color: #fff; background: #143a74; }
body.site-blue .event-chip { color: var(--event-foreground, #fff); }
body.site-blue .event-chip :is(.chip-title, .chip-time, .chip-type) { color: inherit; }
body.site-blue .tool-library :is(.tool-add-action, .post-action) { background: var(--site-blue) !important; color: #fff !important; }
/* Keep the login controls legible even before the icon font loads. */
body.site-blue .login-popup-container .closeLoginPopup {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  top: 12px;
  right: 12px;
  font-size: 24px;
  line-height: 1;
}
body.site-blue .login-popup-container .auth-password-details summary::after {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin: 0 3px 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
body.site-blue .login-popup-container .auth-password-details[open] summary::after { transform: rotate(225deg); margin-bottom: 0; }

/* Control rhythm: keep labels, fields and action groups comfortably separated.
   Composite search controls have one outer frame; the inner input is unframed. */
body.site-blue {
  --site-control-gap: 12px;
  --site-label-gap: 8px;
  --site-form-gap: 18px;
  --site-section-gap: 24px;
}
body.site-blue :is(.field, .admin-search-field) { min-width: 0; gap: var(--site-label-gap); }
body.site-blue :is(.form, .resource-step, .auth-password-fields) { gap: 16px; }
body.site-blue :is(.resource-admin-grid, .admin-export-fields, .tool-form-grid, .form-grid) { row-gap: var(--site-form-gap); column-gap: 20px; }
body.site-blue :is(.button-row, .button-actions, .form-actions, .dialog-actions,
  .modal-actions, .card-actions, .tool-form-actions, .tool-admin-actions,
  .resource-admin-actions, .resource-admin-action-buttons, .checkout-modal-options,
  .notifications-card__actions, .admin-image-chooser__actions) { gap: var(--site-control-gap); flex-wrap: wrap; }
body.site-blue :is(.form-actions, .dialog-actions, .modal-actions, .resource-admin-actions) { margin-top: 20px; }
body.site-blue :is(.checkout-modal-custom-form, .custom-checkout-grid) label { display: grid; align-content: start; gap: var(--site-label-gap); min-width: 0; }
body.site-blue .login-popup-container .auth-password-fields > label:not(.remember-device) { display: grid; gap: var(--site-label-gap); }
body.site-blue .inventory-shell .inventory-actions { gap: 20px; padding: 18px; margin-bottom: 24px; }
body.site-blue .inventory-shell .filters-row { gap: 16px; }
body.site-blue .quickActionsMenu { gap: 10px; }
body.site-blue :is(.inventory-shell .search-row, .cart-inventory-search-field,
  .checkout-modal-search-field, .admin-image-chooser__search) {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--site-border);
  border-radius: 8px;
  background: var(--site-field);
}
body.site-blue :is(.inventory-shell .search-row, .cart-inventory-search-field,
  .checkout-modal-search-field, .admin-image-chooser__search) > input {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 10px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.site-blue :is(.inventory-shell .search-row, .cart-inventory-search-field,
  .checkout-modal-search-field, .admin-image-chooser__search):focus-within {
  outline: 2px solid var(--site-focus);
  outline-offset: 2px;
  border-color: var(--site-focus);
}
body.site-blue :is(.inventory-shell .search-row, .cart-inventory-search-field,
  .checkout-modal-search-field, .admin-image-chooser__search) > input:focus-visible { outline: none !important; }
body.site-blue .inventory-shell .search-icon { width: 20px; flex: 0 0 20px; }
body.site-blue .inventory-shell .search-clear { position: static; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; }
@media (min-width: 1000px) {
  body.site-blue .admin-nav-panel { top: calc(var(--site-header-height, 0px) + 16px); max-height: calc(100dvh - var(--site-header-height, 0px) - 32px); }
}

/* The edge-to-edge navigation drawer uses square corners. */
body.site-blue .mobile-nav-sidebar,
body.site-blue .mobile-nav-sidebar :is(.mobile-nav-close, .mobile-nav-buttons a, .mobile-nav-buttons button) { border-radius: 0 !important; }
/* Dialog close controls occupy their own header space, never the image/body. */
body.site-blue :is(.detail-dialog__header, .pwaInstallModalHeader) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
body.site-blue .detail-dialog__header > .eyebrow { align-self: center; }
body.site-blue .detail-dialog__header h2 { margin: 6px 0 0; }
body.site-blue :is(.detail-dialog__header, .pwaInstallModalHeader,
  .resource-modal__header, .resource-video-modal__header, .custom-checkout-modal-head,
  .cart-inventory-head, .site-notifications__header, .collaborators-dialog__header,
  .tool-modal-head, .view-header, .checkout-modal-head, .announceHeader) > :is(div, h2, h3) {
  min-width: 0;
  overflow-wrap: anywhere;
}
body.site-blue :is(.resource-modal__header, .resource-video-modal__header, .view-header) :is(h2, h3) { overflow-wrap: anywhere; }
body.site-blue button:is(.detail-close, .resource-modal__close, .custom-checkout-close,
  .cart-inventory-close, .checkout-modal-close, .modal-close, .collaborators-dialog__close,
  .tool-modal-close, .view-close, .announceClose, .ann-modal-close, .pwaInstallModalClose,
  .mobile-nav-close, [data-notifications-close]) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 !important;
  gap: 0;
  line-height: 1;
}
body.site-blue .detail-dialog__header .detail-close,
body.site-blue .pwaInstallModalHeader .pwaInstallModalClose { position: static; margin: 0; }
body.site-blue .detail-dialog { scrollbar-gutter: stable; }
body.site-blue .detail-dialog .detail-layout { margin-top: 0; }
body.site-blue .detail-dialog :is(.detail-layout, .detail-body, .detail-head, .detail-controls) { min-width: 0; }
body.site-blue .detail-dialog .detail-head h2 { overflow-wrap: anywhere; }
body.site-blue .detail-dialog .detail-controls { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
body.site-blue .detail-dialog .detail-actions { gap: 12px; }
body.site-blue .detail-dialog .detail-actions .btn { min-width: 0; flex: 1 1 160px; max-width: 100%; }
body.site-blue #requestItemForm { display: grid; gap: 16px; }
body.site-blue #requestItemForm > p:empty { display: none; }
body.site-blue .detail-request-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
body.site-blue .detail-request-actions > button { min-width: 0; max-width: 100%; }

body.site-blue .modal-header > :is(div, h2, h3) { min-width: 0; overflow-wrap: anywhere; }
body.site-blue :is(.modal-footer, .checkout-modal-foot, .pwaInstallModalActions, .custom-checkout-actions, .account-need-dialog__actions) { flex-wrap: wrap; gap: 12px; }
body.site-blue :is(.modal-footer, .detail-actions, .pwaInstallModalActions, .custom-checkout-actions) > :is(.btn, .pwaInstallModalBtn) { height: auto; min-width: 0; max-width: 100%; white-space: normal; }
body.site-blue .pwaInstallModalActions > .pwaInstallModalBtn { flex: 1 1 140px; }