/* Clinical Precision theme: shared visual system across setup, calibration, testing and dialogs.
   Deliberately excludes optotype geometry, VA sizing, calibration measurements and screening logic. */
:root {
  --cp-navy: #172B45;
  --cp-teal: #087F8C;
  --cp-teal-dark: #066873;
  --cp-teal-light: #E8F7F6;
  --cp-bg: #F5F9FB;
  --cp-card: #FFFFFF;
  --cp-border: #DCE7ED;
  --cp-muted: #667B91;
  --cp-success: #087F5B;
  --cp-warning: #9A6700;
  --cp-danger: #B42318;
  --v11-primary: var(--cp-teal);
  --v11-primary-color: var(--cp-teal);
  --v11-text-primary: var(--cp-navy);
  --v11-text-secondary: var(--cp-muted);
  --v11-border-color: var(--cp-border);
  color-scheme: light;
}
html, body {
  background: var(--cp-bg);
  color: var(--cp-navy);
}
body { accent-color: var(--cp-teal); }
.screen {
  color: var(--cp-navy);
  background-color: var(--cp-bg);
}
.screen :is(h1, h2, h3, h4, .v11-title-page, .v11-heading-card) { color: var(--cp-navy); }
.screen :is(p, .v11-text-helper, .calibration-instructions) { color: var(--cp-muted); }
.screen :is(.v11-card, .modal-content, .va-calibration-card, .calibration-area) {
  border-color: var(--cp-border);
}
.screen :is(input[type="range"], input[type="checkbox"], input[type="radio"]) { accent-color: var(--cp-teal); }
.screen :is(.v11-btn-primary, .primary-btn, .modal-actions .primary-btn, #cal-save-btn) {
  background: var(--cp-teal) !important;
  border-color: var(--cp-teal) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(8, 127, 140, .16);
}
.screen :is(.v11-btn-primary, .primary-btn, #cal-save-btn):active {
  background: var(--cp-teal-dark) !important;
}
.screen :is(.v11-btn-secondary, .secondary-btn, .va-calibration-step) {
  color: var(--cp-navy);
  border-color: var(--cp-border);
  background: #fff;
}
.screen :is(.v11-btn-danger, .danger-btn, #cal-reset-btn) {
  background: #fff !important;
  border-color: #F0C8C5 !important;
  color: var(--cp-danger) !important;
}
.screen :is(.v11-badge-success, .status-success) {
  background: #E8F6EF;
  color: var(--cp-success);
}
.screen :is(.v11-badge-danger, .status-danger) {
  background: #FDEDEC;
  color: var(--cp-danger);
}
.screen :is(.v11-badge-warning, .status-warning) {
  background: #FFF4D6;
  color: var(--cp-warning);
}
.screen :is(.modal-content, #confirmation-modal .modal-content, #checklist-modal .modal-content) {
  background: var(--cp-card);
  color: var(--cp-navy);
  border: 1px solid var(--cp-border);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(23, 43, 69, .16);
}
#setup-screen {
  --home-ink: var(--cp-navy);
  --home-muted: var(--cp-muted);
  --home-violet: var(--cp-teal);
  --home-blue: var(--cp-teal);
  --home-cyan: #56B8B6;
  --home-border: var(--cp-border);
  --home-bg: var(--cp-bg);
  --home-canvas: var(--cp-bg);
  background: var(--cp-bg) !important;
  color: var(--cp-navy) !important;
}
#setup-screen .setup-header h2::after {
  background: var(--cp-teal) !important;
}
#setup-screen #open-calibration-btn,
#setup-screen #open-checklist-btn {
  border: 1px solid var(--cp-border) !important;
  background: var(--cp-card) !important;
  box-shadow: 0 5px 18px rgba(23, 43, 69, .045);
  color: var(--cp-navy) !important;
}
#setup-screen #open-calibration-btn::before,
#setup-screen #open-checklist-btn::before {
  background: var(--cp-teal-light) !important;
  box-shadow: inset 0 0 0 1px rgba(8,127,140,.08);
}
#setup-screen .calibration-status-container {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
#setup-screen .selection-section h3 { color: var(--cp-muted) !important; }
#setup-screen #distance-picker {
  background: #EAF1F5 !important;
  border-color: var(--cp-border) !important;
  box-shadow: none !important;
}
#setup-screen #distance-picker .segment { color: var(--cp-navy); }
#setup-screen #distance-picker .segment.active {
  background: var(--cp-teal) !important;
  box-shadow: 0 3px 8px rgba(8,127,140,.18) !important;
}
#setup-screen #optotype-picker .card {
  background: var(--cp-card) !important;
  border-color: var(--cp-border) !important;
  box-shadow: 0 4px 12px rgba(23,43,69,.035);
}
#setup-screen #optotype-picker .card-icon { color: var(--cp-navy) !important; }
#setup-screen #optotype-picker .card-label { color: var(--cp-muted) !important; }
#setup-screen #optotype-picker .card.active {
  border: 2px solid var(--cp-teal) !important;
  background: var(--cp-teal-light) !important;
  box-shadow: 0 0 0 3px rgba(8,127,140,.07);
}
#setup-screen #optotype-picker .card.active .card-icon,
#setup-screen #optotype-picker .card.active .card-label { color: var(--cp-teal-dark) !important; }
#setup-screen #start-test-btn {
  background: var(--cp-teal) !important;
  border-color: var(--cp-teal) !important;
  box-shadow: 0 8px 20px rgba(8,127,140,.2) !important;
  color: #fff !important;
  text-shadow: none !important;
}
#setup-screen #start-test-btn::before { background: rgba(255,255,255,.18); }
#setup-screen .logo {
  height: 58px !important;
  max-width: 220px !important;
}
#setup-screen .logo-container {
  margin-bottom: 12px !important;
  transform: translateY(-5px);
}
#calibration-screen {
  --cal-ink: var(--cp-navy);
  --cal-muted: var(--cp-muted);
  --cal-line: var(--cp-border);
  --cal-blue: var(--cp-teal);
  --cal-panel: var(--cp-card);
  color: var(--cp-navy);
  background: var(--cp-bg) !important;
}
#calibration-screen .calibration-reference-wrapper {
  border-color: var(--cp-border);
  background: #F0F6F8;
}
#calibration-screen .calibration-line { border-top-color: var(--cp-navy); }
#calibration-screen .calibration-line-endpoint { border-color: var(--cp-navy); }
#calibration-screen .va-calibration-step {
  border-color: var(--cp-border);
  background: #fff;
  color: var(--cp-navy);
}
#calibration-screen .va-calibration-step:active {
  background: var(--cp-teal-light);
  border-color: #9AD3D2;
}
#calibration-screen .va-calibration-tip {
  background: var(--cp-teal-light);
  color: var(--cp-teal-dark);
}
#calibration-screen .calibration-actions {
  background: linear-gradient(to bottom, rgba(245,249,251,0), var(--cp-bg) 18%);
}
#testing-screen .testing-header {
  background: var(--cp-card) !important;
  border-bottom-color: var(--cp-border) !important;
}
#testing-screen .testing-header-title { color: var(--cp-navy) !important; }
#testing-screen .testing-header-meta { color: var(--cp-muted) !important; }
/* Keep the clinical chart area and optotype sizing untouched. */
@media (max-height: 760px) {
  #setup-screen .logo { height: 50px !important; }
}


/* Shared modal system: these dialogs sit outside .screen in index.html, so they
   must be themed directly rather than through the screen-scoped rules above. */
.modal .modal-content {
  background: var(--cp-card, #fff) !important;
  color: var(--cp-navy, #172B45) !important;
  border: 1px solid var(--cp-border, #DCE7ED) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 48px rgba(23, 43, 69, .18) !important;
}
.modal .modal-content h3 {
  color: var(--cp-navy, #172B45) !important;
  letter-spacing: -.025em;
}
.modal .modal-content p,
.modal .modal-content li {
  color: var(--cp-navy, #172B45);
}
.modal .modal-actions {
  gap: 10px;
}
.modal .modal-actions button,
.modal .modal-content button.primary-btn,
.modal .modal-content button.secondary-btn {
  min-height: 52px;
  border-radius: 13px !important;
  font: inherit;
  font-weight: 650;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.modal .modal-actions button.primary-btn,
.modal .modal-content button#modal-start-btn,
.modal .modal-content button#confirm-action-btn {
  background: var(--cp-teal, #087F8C) !important;
  border: 1px solid var(--cp-teal, #087F8C) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(8, 127, 140, .16);
}
.modal .modal-actions button.primary-btn.danger,
.modal .modal-content button#confirm-action-btn.danger {
  background: var(--cp-danger, #B42318) !important;
  border-color: var(--cp-danger, #B42318) !important;
  color: #fff !important;
}
.modal .modal-actions button.secondary-btn {
  background: #fff !important;
  border: 1.5px solid var(--cp-teal, #087F8C) !important;
  color: var(--cp-teal-dark, #066873) !important;
  box-shadow: none !important;
}
#readiness-modal .modal-content h3 {
  color: var(--cp-navy, #172B45) !important;
}
#readiness-modal .readiness-list {
  padding-left: 0;
  list-style: none;
}
#readiness-modal .readiness-list li {
  margin: 0 0 12px;
  line-height: 1.4;
}
#readiness-modal .modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#readiness-modal .modal-actions button {
  width: 100%;
}
#readiness-modal #modal-start-btn {
  min-height: 56px;
  font-size: 16px;
}
#readiness-modal #modal-cancel-btn {
  min-height: 54px;
}