/* Web only. Desktop has the same Expo reset and no responsive overrides. */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1023px) and (max-height: 599px) {
  html, body { background: #105C71; }
  #root {
    box-sizing: border-box;
    height: var(--blt-viewport-height, 100dvh);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  input, textarea, select { font-size: max(16px, 1em) !important; }
  /* RN Web portals sit outside #root. Keep their actions inside the keyboard viewport. */
  div[aria-modal="true"]:not(.blt-alert) {
    box-sizing: border-box;
    top: var(--blt-viewport-top, 0px);
    bottom: auto;
    height: var(--blt-viewport-height, 100dvh);
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
}
.blt-alert-backdrop {
  position: fixed; inset: 0; top: var(--blt-viewport-top, 0px);
  height: var(--blt-viewport-height, 100dvh); z-index: 2147483647;
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: #0007; font-family: Arial, sans-serif;
}
.blt-alert { box-sizing: border-box; width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; border-radius: 20px; padding: 20px; background: white; color: #17324B; }
.blt-alert h2 { font-size: 19px; margin: 0 0 12px; overflow-wrap: anywhere; }
.blt-alert p { font-size: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.blt-alert-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.blt-alert-actions button { flex: 1 1 100px; min-height: 48px; border: 1px solid #D6DDE6; border-radius: 12px; padding: 10px; font: 700 16px Arial, sans-serif; background: #EDF2F7; color: #105C71; cursor: pointer; }
.blt-alert-actions button.blt-alert-danger { color: #B42318; }

/* Explicit appearance choice only; no default/light layout or image changes. */
html[data-blt-theme="dark"], html[data-blt-theme="dark"] body { background: #0B1F2B; color-scheme: dark; }
html[data-blt-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-blt-theme="dark"] textarea, html[data-blt-theme="dark"] select {
  background-color: #0B1F2B !important; color: #E8F1F5 !important; border-color: #1F4B5A !important; color-scheme: dark !important;
}
html[data-blt-theme="dark"] input::placeholder, html[data-blt-theme="dark"] textarea::placeholder { color: #9FB3C3; }
html[data-blt-theme="dark"] .blt-alert { background: #0F2D3A; color: #E8F1F5; }
html[data-blt-theme="dark"] .blt-alert-actions button { background: #133B4A; border-color: #1F4B5A; color: #E8F1F5; }
html[data-blt-theme="dark"] .blt-alert-actions button.blt-alert-danger { color: #FDA4AF; }
html[data-blt-theme="dark"] input:focus-visible, html[data-blt-theme="dark"] textarea:focus-visible,
html[data-blt-theme="dark"] select:focus-visible, html[data-blt-theme="dark"] button:focus-visible,
html[data-blt-theme="dark"] [role="button"]:focus-visible { outline: 2px solid #0EA5A8; outline-offset: 1px; }

/* Only the fixed-appearance journal; authenticated forms keep their chosen theme. */
html [data-testid="task-journal"], html [data-testid="task-journal-expanded"] {
  color-scheme: light; color: #18324A;
}
html[data-blt-theme] [data-testid^="task-journal"] input:not([type="checkbox"]):not([type="radio"]) {
  background-color: #FFFFFF !important; color: #18324A !important;
  border-color: #CAB682 !important; color-scheme: light !important;
}
html[data-blt-theme] [data-testid^="task-journal"] [role="button"]:focus-visible,
html[data-blt-theme] [data-testid^="task-journal"] input:focus-visible {
  outline: 2px solid #C68A12; outline-offset: 1px;
}