/*
 * Encounter visual workspace.
 *
 * This file is loaded last by OphthoScribe.html and is intentionally reserved
 * for appearance-only changes to the encounter workspace (formerly the SMART-launch experience).
 *
 * Safe scope:
 * - layout, spacing, typography, color, borders, shadows, responsive behavior
 * - selectors scoped under body.os-encounter-mode whenever possible
 *
 * Not safe here:
 * - changing IDs, data attributes, button text, JS behavior, FHIR logic, or SMART launch flow
 *
 * Design source: claude.ai/design bundle JMXAOcBVGbdZsS6rz0xI8w —
 *   the archived design preview (comp 39), project/ui_kits/ophthoscribe-app/app.css.
 *
 * Every value below derives from a token in tokens.css /
 * universal-colour-contract.css. !important is used only where required to
 * beat the inline <style> block that encounter-app.js → injectStyles()
 * appends to <head> at runtime.
 */

/* ────────────────────────────────────────────────────────────────────────
 * Shell foundation
 *
 * In encounter mode we re-point upstream widget-chrome tokens (--exam-card-*,
 * --os-component-*) at the single banner color so competing higher-
 * specificity rules in component-appearance.css / app-shell-tone.css /
 * encounter-paper.css resolve to the same warm tint as our widget
 * contract. Pointing tokens beats specificity wars.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;

  /* Token re-points — widget header + footer = banner color, everywhere. */
  --exam-card-header-bg:           var(--os-enc-banner-bg);
  --exam-card-footer-bg:           var(--os-enc-banner-bg);
  --os-component-header-footer-bg: var(--os-enc-banner-bg);
  --os-card-header-bg:             var(--os-enc-banner-bg);
  --os-card-footer-bg:             var(--os-enc-banner-bg);

  /* Widget contract — aligned with the canonical design bundle
   * (project/ui_kits/ophthoscribe-app/app.css → .w / .w-hdr / .w-body / .w-foot).
   * Body is pure white; header + footer are a quiet --ink 3% wash over
   * surface so they read as a continuous warm strip framing the white body.
   * The search input inside the footer is white to sit on the warm band. */
  --widget-bg:        #fff;
  --widget-body-bg:   #fff;
  --widget-header-bg: color-mix(in srgb, var(--ink) 3%, var(--surface));
  --widget-footer-bg: color-mix(in srgb, var(--ink) 3%, var(--surface));
  --widget-search-bg: #fff;
  --widget-shadow: none;
  --widget-shadow-hover: none;
  --exam-card-shadow: none;
  --os-enc-shadow-card: none;
  --os-safe-page-pad-x: 0px;

  /* History widget spacing tokens.
   * --os-enc-history-body-pad-top: gap from widget banner to first subheading.
   * --os-enc-pady-above-subheading: compact gap from the last bullet of one
   *   section to the next subheading.
   * --os-enc-history-hdr-gap-below: smaller gap below a subheading to its
   *   first bullet entry. */
  --os-enc-history-body-pad-top:     16px;
  --os-enc-pady-above-subheading:    8px;
  --os-enc-history-hdr-gap-below:    3px;

  --widget-body-pad: var(--os-enc-history-body-pad-top) 16px;
  --os-enc-ocular-vitals-measure-width: 176px;
  --os-enc-ocular-vitals-pupils-width: 300px;

  /* Registered widget-header action button token.
   * Applied to Add, Import Last, and N/A through .widget-action-btn. */
  --widget-action-btn-h: 24px;
  --widget-action-btn-min-w: 26px;
  --widget-action-btn-pad-x: 8px;
  --widget-action-btn-radius: 7px;
  --widget-action-btn-bg: rgba(255, 255, 255, 0.72);
  --widget-action-btn-bg-hover: #fff;
  --widget-action-btn-border: color-mix(in srgb, var(--ink) 14%, transparent);
  --widget-action-btn-border-hover: var(--ink);
  --widget-action-btn-color: var(--ink);
  --widget-action-btn-color-active: var(--paper);
  --widget-action-btn-font: var(--font);
  --widget-action-btn-size: 13px;
  --widget-action-btn-weight: 600;
  --widget-action-btn-icon-size: 13px;
  --widget-action-na-font: var(--mono);
  --widget-action-na-size: 10px;
  --widget-action-na-weight: 600;
  --widget-action-na-tracking: 0.12em;
  --widget-action-na-line-height: 1;

  /* Physical exam editable/toggle text token.
   * Used by ocular-vitals controls (Corrected, Goldmann, No RAPD, Equal)
   * and by segment eye toggles (OD/OS/N/A) so the affordance is consistent. */
  --physical-exam-toggle-font: var(--font);
  --physical-exam-toggle-size: 13px;
  --physical-exam-toggle-weight: 500;
  --physical-exam-toggle-tracking: 0;
  --physical-exam-toggle-line-height: 1.45;
  --physical-exam-toggle-color: var(--ink);
  --physical-exam-editable-blue: #2472b8;
}

body.os-encounter-mode .os-encounter {
  background: var(--paper) !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Topbar — brand-forward encounter banner.
 * Larger logo + wordmark per blueprint (banner is more prominent inside
 * the host EHR than the regular OphthoScribe topbar would be).
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode .os-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  padding: 14px 40px !important;
  background: var(--os-enc-banner-bg) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  gap: 24px !important;
}

body.os-encounter-mode .os-logo {
  gap: 12px !important;
  color: var(--ink) !important;
}

body.os-encounter-mode .os-logo .os-eye {
  width: 44px !important;
  height: 44px !important;
}

body.os-encounter-mode .os-logo .wordmark {
  font-family: var(--display) !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-display) !important;
  line-height: 1 !important;
  font-optical-sizing: auto;
  color: var(--accent) !important;
}

body.os-encounter-mode .os-logo .wordmark span {
  color: var(--ink) !important;
}

body.os-encounter-mode .os-topbar-patient-plate {
  grid-column: 2 !important;
  justify-self: center !important;
  display: grid !important;
  justify-items: center !important;
  width: auto !important;
  max-width: min(620px, 52vw) !important;
  padding: 3px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  text-align: center !important;
}

body.os-encounter-mode .os-topbar-patient-main {
  display: grid !important;
  grid-template-columns: 42px minmax(0, max-content) 42px !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 12px !important;
  max-width: min(620px, 52vw) !important;
  min-width: 0 !important;
}

body.os-encounter-mode .os-topbar-patient-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
}

body.os-encounter-mode .os-topbar-patient-actions-left {
  justify-self: end !important;
}

body.os-encounter-mode .os-topbar-patient-actions-right {
  justify-self: start !important;
}

body.os-encounter-mode .os-banner-appointment-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.92) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(31,27,22,0.04), 0 10px 20px -16px rgba(31,27,22,0.20) !important;
  cursor: pointer !important;
}

body.os-encounter-mode .os-banner-appointment-action svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.os-encounter-mode .os-banner-appointment-action:hover,
body.os-encounter-mode .os-banner-appointment-action:focus-visible {
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  outline: none !important;
}

body.os-encounter-mode .os-topbar-patient-name,
body.os-encounter-mode .os-topbar-patient-meta,
body.os-encounter-mode .os-topbar-patient-reason {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.os-encounter-mode .os-cc-provider-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 21000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(31,27,22,0.28) !important;
}

body.os-encounter-mode .os-cc-provider-overlay.open {
  display: flex !important;
}

body.os-encounter-mode .os-cc-provider-panel {
  width: min(920px, calc(100vw - 48px)) !important;
  overflow: hidden !important;
  position: relative !important;
  border: 1px solid var(--widget-border) !important;
  border-radius: var(--widget-radius) !important;
  background: var(--widget-body-bg) !important;
  box-shadow: 0 24px 70px -42px rgba(31,27,22,0.48) !important;
}

body.os-encounter-mode .os-cc-provider-panel header,
body.os-encounter-mode .os-cc-provider-panel footer {
  display: flex !important;
  align-items: center !important;
  background: var(--widget-header-bg) !important;
}

body.os-encounter-mode .os-cc-provider-panel header {
  justify-content: space-between !important;
  min-height: var(--widget-header-min-h) !important;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--widget-header-border) !important;
}

body.os-encounter-mode .os-cc-provider-panel h2 {
  margin: 0 !important;
  font-family: var(--widget-title-font) !important;
  font-size: var(--widget-title-size) !important;
  font-weight: var(--widget-title-weight) !important;
  letter-spacing: var(--widget-title-tracking) !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode .os-cc-provider-close {
  border: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

body.os-encounter-mode .os-cc-provider-fields {
  display: grid !important;
  gap: 12px !important;
  padding: 18px !important;
}

body.os-encounter-mode .os-associated-provider-row {
  display: grid !important;
  grid-template-columns: minmax(130px, 0.55fr) repeat(3, minmax(0, 1fr)) !important;
  align-items: end !important;
  gap: 10px !important;
  position: relative !important;
}

body.os-encounter-mode .os-associated-provider-role {
  align-self: center !important;
  color: var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode .os-cc-provider-fields label {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.os-encounter-mode .os-cc-provider-fields span {
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode .os-cc-provider-fields input {
  min-height: 38px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent) !important;
  border-radius: var(--r-sm) !important;
  background: #fff !important;
  color: var(--ink) !important;
  font: 14px/1.4 var(--font) !important;
  padding: 8px 10px !important;
}

body.os-encounter-mode .os-cc-provider-panel footer {
  justify-content: flex-end !important;
  gap: 10px !important;
  min-height: var(--widget-footer-min-h) !important;
  padding: var(--widget-footer-pad) !important;
  border-top: 1px solid var(--widget-footer-border) !important;
}

body.os-encounter-mode .os-cc-provider-panel footer button {
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent) !important;
  border-radius: var(--r-pill) !important;
  background: #fff !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  font: 700 13px/1 var(--font) !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
}

body.os-encounter-mode .os-cc-provider-panel footer button:disabled {
  cursor: default !important;
  opacity: 0.62 !important;
}

body.os-encounter-mode .os-associated-provider-add {
  margin-right: auto !important;
}

body.os-encounter-mode .os-provider-directory-results {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 2px) !important;
  z-index: 5 !important;
  display: grid !important;
  width: min(480px, 100%) !important;
  max-height: 220px !important;
  overflow: auto !important;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent) !important;
  border-radius: var(--r-sm) !important;
  background: #fff !important;
  box-shadow: 0 14px 34px -24px rgba(31,27,22,0.55) !important;
}

body.os-encounter-mode .os-provider-directory-results[hidden] {
  display: none !important;
}

body.os-encounter-mode .os-provider-directory-results button {
  display: grid !important;
  gap: 2px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
  background: #fff !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  padding: 9px 11px !important;
  text-align: left !important;
}

body.os-encounter-mode .os-provider-directory-results button:hover,
body.os-encounter-mode .os-provider-directory-results button:focus-visible {
  background: color-mix(in srgb, var(--widget-header-bg) 70%, #fff) !important;
  outline: none !important;
}

body.os-encounter-mode .os-provider-directory-results strong {
  font: 700 13px/1.25 var(--font) !important;
}

body.os-encounter-mode .os-provider-directory-results span {
  color: var(--muted) !important;
  font: 700 10px/1.2 var(--mono) !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode .os-associated-provider-confirm,
body.os-encounter-mode .os-associated-provider-edit-guard {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(31,27,22,0.22) !important;
  padding: 18px !important;
}

body.os-encounter-mode .os-associated-provider-confirm[hidden],
body.os-encounter-mode .os-associated-provider-edit-guard[hidden] {
  display: none !important;
}

body.os-encounter-mode .os-provider-chart-badge {
  display: inline-block !important;
  margin-left: 8px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent) !important;
  border-radius: var(--r-pill) !important;
  background: color-mix(in srgb, var(--ink) 7%, transparent) !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  line-height: 1 !important;
  padding: 3px 8px !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
}

body.os-encounter-mode .os-associated-provider-row.is-chart-sourced input[readonly] {
  background: color-mix(in srgb, var(--ink) 5%, #fff) !important;
  color: var(--muted) !important;
  cursor: pointer !important;
}

body.os-encounter-mode .os-associated-provider-restore {
  align-self: end !important;
  justify-self: start !important;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent) !important;
  border-radius: var(--r-pill) !important;
  background: #fff !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  font: 700 11px/1 var(--font) !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
}

body.os-encounter-mode .os-associated-provider-confirm-card {
  display: grid !important;
  gap: 16px !important;
  width: min(390px, calc(100vw - 72px)) !important;
  border: 1px solid var(--widget-border) !important;
  border-radius: var(--widget-radius) !important;
  background: #fff !important;
  box-shadow: 0 22px 60px -34px rgba(31,27,22,0.58) !important;
  padding: 18px !important;
}

body.os-encounter-mode .os-associated-provider-confirm-card p {
  margin: 0 !important;
  color: var(--ink) !important;
  font: 700 15px/1.35 var(--font) !important;
}

body.os-encounter-mode .os-associated-provider-confirm-card div {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

body.os-encounter-mode .os-associated-provider-confirm-card button {
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent) !important;
  border-radius: var(--r-pill) !important;
  background: #fff !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  font: 700 13px/1 var(--font) !important;
  min-height: 34px !important;
  padding: 8px 16px !important;
}

@media (max-width: 720px) {
  body.os-encounter-mode .os-associated-provider-row {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--widget-border) !important;
  }
}

body.os-encounter-mode .os-topbar-patient-name {
  overflow: hidden !important;
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.16 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.os-encounter-mode .os-topbar-patient-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 5px !important;
  min-height: 17px !important;
}

body.os-encounter-mode .os-topbar-patient-demo {
  color: var(--muted) !important;
  font: 500 12.5px/1 var(--font) !important;
}

body.os-encounter-mode .os-topbar-patient-appt {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  font: 600 9.5px/1 var(--mono) !important;
  letter-spacing: 0.08em !important;
  padding: 3px 9px !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode .os-topbar-patient-reason {
  overflow: hidden !important;
  margin-top: 5px !important;
  color: var(--ink) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.os-encounter-mode .os-user-profile {
  justify-self: end !important;
}

body.os-encounter-mode .os-user-name {
  font-size: 17px !important;
  font-weight: 700 !important;
}

body.os-encounter-mode .os-user-role {
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Connection chip — quieter, lozenge-on-paper. */
body.os-encounter-mode .os-connection {
  font-family: var(--font) !important;
  font-size: var(--t-sm) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-ui) !important;
  text-transform: none !important;
  color: var(--muted) !important;
  padding: 6px 12px 6px 10px !important;
  border-radius: var(--r-pill) !important;
  background: color-mix(in srgb, var(--success) 10%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--success) 22%, transparent) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

body.os-encounter-mode .os-connection > span:first-child {
  color: var(--success) !important;
  font-size: var(--t-sm) !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Patient banner — hidden in the EHR-hosted workspace.
 * The host EHR already supplies patient context in the launch frame; the
 * encounter app keeps only the OphthoScribe header and sub-navigation.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode .os-patient-banner {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * SubNav — blueprint tab strip on paper, accent underline on active.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode .os-encounter-tabs {
  height: auto !important;
  padding: 6px 40px 0 !important;
  background: var(--paper) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
  gap: 6px !important;
}

body.os-encounter-mode .os-encounter-tabs button {
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-ui) !important;
  color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
  padding: 14px 16px 16px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
  border-radius: 0 !important;
  margin-bottom: -1px !important;
}

body.os-encounter-mode .os-encounter-tabs button:hover {
  color: var(--ink) !important;
  background: transparent !important;
}

body.os-encounter-mode .os-encounter-tabs button.active {
  color: var(--accent) !important;
  background: transparent !important;
  border-bottom-color: var(--accent) !important;
  font-weight: 600 !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Encounter nav arrows — quiet outline buttons.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode .os-arrow {
  width: 36px !important;
  height: 52px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--accent) !important;
  background: var(--accent) !important;
  color: var(--paper) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease) !important;
}

body.os-encounter-mode .os-arrow:hover {
  background: var(--accent-ink) !important;
  border-color: var(--accent-ink) !important;
  color: var(--paper) !important;
  transform: none !important;
}

body.os-encounter-mode .os-arrow,
body.os-encounter-mode .encounter-widget-arrow,
body.os-encounter-mode .app-subtab-arrow {
  display: none !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Workspace canvas.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode .os-workspace {
  padding: 36px 40px 80px !important;
  max-width: 1680px;
  margin: 0 auto;
}

/* ────────────────────────────────────────────────────────────────────────
 * Encounter widget grid — History tab balances three cards.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  /* Content-sized rows: each history card should grow to fit its own entries,
   * then stop at a viewport cap so long histories scroll inside the widget. */
  align-items: start !important;
  align-content: start !important;
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;
  height: auto !important;
  min-height: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid > .card[data-widget-card] {
  height: auto !important;
  align-self: start !important;
  min-height: 140px !important;
  max-height: min(720px, calc(100vh - 220px)) !important;
}
body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid > .card[data-widget-card] > .card-scroll {
  flex: 0 1 auto !important;
  overflow-y: auto !important;
}

/* The grid's parent (#exam-grid-dev) has `flex: 1 1 0%` and lives in the
 * #col-mid flex column — that stretches the grid into a tall container.
 * Make it content-sized so the grid only takes the space it needs. */
body.os-encounter-mode.encounter-active[data-encounter-tab="history"] #exam-grid-dev {
  flex: 0 0 auto !important;
  height: auto !important;
}

body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .encounter-patient-card-slot {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid > .encounter-patient-card-slot {
  display: flex !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: start !important;
  width: auto !important;
  max-width: min(100%, 430px) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid > .card[data-widget-card="hpi"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid > .card[data-widget-card="ocular-history"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid > .card[data-widget-card="medical-history"] {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body.os-encounter-mode .patient-card {
  background: var(--widget-body-bg, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset, 0 10px 22px -20px rgba(31,27,22,0.18) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 12px 14px !important;
}

body.os-encounter-mode .encounter-patient-card {
  width: max-content !important;
  max-width: min(100%, 390px) !important;
  min-width: min(100%, 260px) !important;
}

body.os-encounter-mode .patient-card__name {
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  font-optical-sizing: auto;
  letter-spacing: -0.012em !important;
  line-height: 1.05 !important;
}

body.os-encounter-mode .patient-card__row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--muted) !important;
  font: 500 12.5px/1 var(--font) !important;
}

body.os-encounter-mode .patient-card__age {
  color: var(--muted) !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

body.os-encounter-mode .patient-card__row .appt-pill {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: var(--accent-soft) !important;
  color: var(--accent-ink) !important;
  font: 600 9.5px/1 var(--mono) !important;
  letter-spacing: 0.08em !important;
  padding: 3px 9px !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode .patient-card__reason {
  color: var(--ink) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-wrap: pretty;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .exam-grid.general-consult-grid {
  grid-template-columns: minmax(360px, 45fr) minmax(0, 55fr) !important;
  align-items: start !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .exam-grid.general-consult-grid > .card[data-widget-card="other-examination"] {
  grid-column: 1 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .exam-grid.general-consult-grid > .card[data-widget-card="anterior-posterior-segment"] {
  grid-column: 2 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="imaging-viewer"] .exam-grid.general-consult-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr) !important;
  grid-template-rows: minmax(560px, calc(100vh - 250px)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="imaging-viewer"] .exam-grid.general-consult-grid > .card[data-widget-card="investigations"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-height: 560px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="imaging-viewer"] .exam-grid.general-consult-grid > .card[data-widget-card="diagnostic-viewer"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 560px !important;
}

body.os-encounter-mode .diagnostic-viewer-preview {
  min-height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  box-sizing: border-box;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    #fff;
  background-size: 44px 44px;
}

body.os-encounter-mode .diagnostic-viewer-preview-inner {
  max-width: 420px;
  text-align: center;
}

body.os-encounter-mode .diagnostic-viewer-preview-title {
  margin-bottom: 10px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.os-encounter-mode .diagnostic-viewer-preview-copy {
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 980px) {
  body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .exam-grid.general-consult-grid {
    grid-template-columns: 1fr !important;
  }

  body.os-encounter-mode.encounter-active[data-encounter-tab="imaging-viewer"] .exam-grid.general-consult-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .exam-grid.general-consult-grid > .card[data-widget-card="other-examination"],
  body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .exam-grid.general-consult-grid > .card[data-widget-card="anterior-posterior-segment"],
  body.os-encounter-mode.encounter-active[data-encounter-tab="imaging-viewer"] .exam-grid.general-consult-grid > .card[data-widget-card="investigations"],
  body.os-encounter-mode.encounter-active[data-encounter-tab="imaging-viewer"] .exam-grid.general-consult-grid > .card[data-widget-card="diagnostic-viewer"] {
    grid-column: 1 !important;
  }
}

/* History page refinement cascade lock: these selectors intentionally beat
 * the base encounter-active theme so cards size to grid-auto-rows. */
body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid > .card[data-widget-card="hpi"],
body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid > .card[data-widget-card="ocular-history"],
body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid > .card[data-widget-card="medical-history"] {
  min-height: 0 !important;
  height: auto !important;
}

/* Universal min-height floor for widget cards. The grid row sizing
 * (above) makes each row as tall as its tallest cell — this floor only
 * applies when ALL cards in a row are at their smallest. */
body.os-encounter-mode .card[data-widget-card] {
  min-height: 140px;
}

/* ────────────────────────────────────────────────────────────────────────
 * Widget contract — applied to every .card[data-widget-card] across every
 * encounter tab. Three regions: header / body / footer. The footer always
 * houses the directory search bar (where one is registered for the widget).
 *
 * Token map: tokens.css → "Widget contract" block (--widget-*).
 * ──────────────────────────────────────────────────────────────────────── */

/* Shell — surface card, hairline border, paper drop shadow. */
body.os-encounter-mode .card[data-widget-card] {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--widget-bg) !important;
  border: 1px solid var(--widget-border) !important;
  border-radius: var(--widget-radius) !important;
  box-shadow: var(--widget-shadow) !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease) !important;
}

body.os-encounter-mode .card[data-widget-card]:hover {
  border-color: var(--widget-border-hover) !important;
  box-shadow: var(--widget-shadow-hover) !important;
}

body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card[data-widget-card],
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card[data-widget-card]:hover {
  overflow: hidden !important;
  box-shadow: none !important;
}

body.os-encounter-mode .exam-grid.general-consult-grid > .card[data-widget-card]::before,
body.os-encounter-mode .exam-grid.general-consult-grid > .card[data-widget-card]:hover::before,
body.os-encounter-mode .exam-grid.general-consult-grid > .card[data-widget-card]:focus-within::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

body.os-encounter-mode .exam-grid.general-consult-grid > .card[data-widget-card]:focus-within {
  box-shadow: var(--widget-shadow) !important;
}

/* Header — pip · uppercase mono title · action row. */
body.os-encounter-mode .card[data-widget-card] > .card-hdr:first-child {
  flex: 0 0 auto !important;
  padding: var(--widget-header-pad) !important;
  min-height: var(--widget-header-min-h) !important;
  background: var(--widget-header-bg) !important;
  border-bottom: 1px solid var(--widget-header-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--widget-header-gap) !important;
  border-radius: var(--widget-radius) var(--widget-radius) 0 0 !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
}

/* Title — needs the .encounter-active + .exam-grid.general-consult-grid
 * chain to outrank component-appearance.css:4989 (which otherwise renders
 * the title at 12px/700 from --os-card-heading-*). */
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card[data-widget-card] > .card-hdr:first-child > .card-title,
body.os-encounter-mode .card[data-widget-card] > .card-hdr:first-child > .card-title {
  flex: 1 !important;
  font-family: var(--widget-title-font) !important;
  font-style: normal !important;
  font-size: var(--widget-title-size) !important;
  font-weight: var(--widget-title-weight) !important;
  letter-spacing: var(--widget-title-tracking) !important;
  text-transform: uppercase !important;
  color: var(--widget-title-color) !important;
  line-height: 1 !important;
}

/* Pip is now a STATE indicator, not a per-widget identity color:
 *   loading (default) → amber, pulsing (reuses os-conn-pulse keyframes
 *     injected at runtime by encounter-app.js)
 *   loaded            → green (success), solid
 *   empty / error     → quieter amber, no pulse
 * The inline `style="background:..."` set by widget-chrome.js is overridden
 * here with !important so the pip reads as state, not widget identity. */
/* `encounter-paper.css` ships a `display: none` on the pip for general-consult
 * cards (legacy decision — pip was hidden in that surface). We need to put it
 * back, and need enough specificity to beat that rule. */
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card[data-widget-card] > .card-hdr:first-child > .card-pip,
body.os-encounter-mode .card[data-widget-card] > .card-hdr:first-child > .card-pip {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: var(--widget-pip-size) !important;
  height: var(--widget-pip-size) !important;
  border-radius: 50% !important;
  box-shadow: var(--widget-pip-ring) !important;
  background: var(--os-enc-loading-dot, #c79a45) !important;
  animation: os-conn-pulse 1.6s ease-in-out infinite !important;
}

/* Loaded — solid green, no pulse. Stays green. */
body.os-encounter-mode .card[data-widget-card]:has([data-os-history-state="loaded"]) > .card-hdr:first-child > .card-pip {
  background: var(--success) !important;
  animation: none !important;
}

/* Empty / error — quiet amber, no pulse (nothing to load further). */
body.os-encounter-mode .card[data-widget-card]:has([data-os-history-state="empty"]) > .card-hdr:first-child > .card-pip,
body.os-encounter-mode .card[data-widget-card]:has([data-os-history-state="error"]) > .card-hdr:first-child > .card-pip {
  background: color-mix(in srgb, var(--ink) 22%, var(--paper)) !important;
  animation: none !important;
}

/* The original amber pulsing loading dot inside .sb-none::before is now
 * carried by the header pip. The ::before pseudo here is repurposed (see
 * the "Body list items" block below) as a quiet bullet that renders in
 * every state — loading / loaded / empty / error. */

/* Body — scrollable, padded. The footer is a sibling flex item below this
 * body (flex: 0 0 auto), so no extra bottom-padding reservation is needed;
 * content cannot slide under it. Matches design's `.w-body { padding: 14px 16px }`. */
body.os-encounter-mode .card[data-widget-card] > .card-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  background: var(--widget-body-bg) !important;
  padding: var(--widget-body-pad) !important;
}

/* Footer band — visible on EVERY widget, banner-color tinted.
 * The chrome always renders an empty .card-footer div at the bottom of
 * each widget card; we expose it as a permanent paper-tinted band that
 * matches the header and the top banner. */
body.os-encounter-mode .card[data-widget-card] > .card-footer {
  flex: 0 0 auto !important;
  min-height: var(--widget-footer-min-h) !important;
  padding: var(--widget-footer-pad) !important;
  background: var(--widget-footer-bg) !important;
  border-top: 1px solid var(--widget-footer-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 0 0 var(--widget-radius) var(--widget-radius) !important;
  border-bottom-right-radius: inherit !important;
  border-bottom-left-radius: inherit !important;
}

/* aria-hidden=true is set by the chrome when the footer is empty; the
 * default browser styling keeps it visible — explicitly so here. */
body.os-encounter-mode .card[data-widget-card] > .card-footer[aria-hidden="true"] {
  visibility: visible !important;
}

/* When NA is active, the JS writes "N/A" into .card-footer
 * (widget-chrome.js:403). Style that placeholder centred + quiet. */
body.os-encounter-mode .card[data-widget-card][data-widget-na="true"] > .card-footer {
  justify-content: center !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Footer search bar.
 *
 * widget-chrome.js → renderDirectorySearch renders .widget-directory
 * directly into .card-footer. The .card-footer band above is already
 * styled as a banner-tinted strip; this section styles the wrapper +
 * input to sit inside it as a full-width row.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode .card[data-widget-card] > .card-footer > .widget-directory {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

body.os-encounter-mode .card[data-widget-card] > .card-footer .widget-directory-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--widget-search-height) !important;
  padding: var(--widget-search-pad) !important;
  background: var(--widget-search-bg) !important;
  border: 1px solid var(--widget-search-border) !important;
  border-radius: var(--widget-search-radius) !important;
  font-family: var(--font) !important;
  font-size: var(--widget-search-font-size) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

body.os-encounter-mode .card[data-widget-card] > .card-footer .widget-directory-input::placeholder {
  color: var(--faint) !important;
  font-style: italic !important;
}

body.os-encounter-mode .card[data-widget-card] > .card-footer .widget-directory-input:focus {
  border-color: var(--widget-search-focus-border) !important;
  box-shadow: var(--widget-search-focus-ring) !important;
  outline: none !important;
  background: var(--widget-search-bg) !important;
}

/* Results dropdown opens UPWARD into the card body, since the wrapper now
 * lives at the bottom of the card. Default (widgets.css line 26) puts it
 * 36px above the bottom of the wrapper — re-anchor to its top edge so it
 * grows into the body area instead of overlapping the footer. */
body.os-encounter-mode .card[data-widget-card] > .card-footer .widget-directory-results {
  bottom: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-bottom: 6px !important;
  border-radius: var(--r-sm) !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Section headers inside widget cards (Symptoms, Diagnoses, PMH, …).
 * Blueprint .section-divider — mono eyebrow + trailing hairline.
 * ──────────────────────────────────────────────────────────────────────── */

/* Section divider — matches design bundle's .section-divider:
 *   mono uppercase eyebrow + trailing hairline that fades to transparent,
 *   margin (not padding) so it doesn't add to the empty-state's own padding,
 *   no top border (the hairline runs after the title, not above it).
 *
 * Section dividers ship under several class names depending on which widget
 * is rendering them: .history-domain-hdr (Ocular/Medical History domains),
 * .vitals-subhdr + .widget-subheading (HPI, Vitals, and most other widgets),
 * .hpi-history-subhdr / .hpi-forms-hdr (HPI sub-headers). The selector list
 * below covers all of them so the divider treatment is uniform. */
body.os-encounter-mode.encounter-active .card .history-domain-hdr,
body.os-encounter-mode.encounter-active .card .widget-subheading,
body.os-encounter-mode.encounter-active .card .vitals-subhdr {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 0 var(--os-enc-history-hdr-gap-below) !important;
  padding: 0 !important;
  border-top: 0 !important;
  line-height: 1 !important;
}

body.os-encounter-mode.encounter-active .card .history-domain-hdr::after,
body.os-encounter-mode.encounter-active .card .widget-subheading::after,
body.os-encounter-mode.encounter-active .card .vitals-subhdr::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 14%, transparent),
    transparent
  ) !important;
}

body.os-encounter-mode.encounter-active .card .history-domain-hdr:first-child,
body.os-encounter-mode.encounter-active .card .widget-subheading:first-child,
body.os-encounter-mode.encounter-active .card .vitals-subhdr:first-child,
body.os-encounter-mode.encounter-active .card > *:first-child .history-domain-hdr,
body.os-encounter-mode.encounter-active .card > *:first-child .widget-subheading,
body.os-encounter-mode.encounter-active .card > *:first-child .vitals-subhdr {
  margin-top: 0 !important;
}

/* The legacy widget chrome draws a 1px hairline between successive section
 * wrappers (the `<section class="sb-block history-domain widget-section">`
 * elements that hold each domain). The design's section-divider is the only
 * separator we want; remove the extra full-width line so the body reads as
 * one continuous scroll. */
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card[data-widget-card] {
  --widget-section-pad-y: 0px;
}

body.os-encounter-mode.encounter-active .card[data-widget-card] .sb-block,
body.os-encounter-mode.encounter-active .card[data-widget-card] .history-domain,
body.os-encounter-mode.encounter-active .card[data-widget-card] .widget-section {
  border-top: 0 !important;
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Inter-section gap: apply --os-enc-pady-above-subheading directly to the
 * section container of every non-first section. This is the only reliable
 * way to create a consistent gap in both block and flex contexts without
 * relying on margin collapse through nested elements. */
body.os-encounter-mode.encounter-active .card[data-widget-card] .card-scroll > .sb-block ~ .sb-block,
body.os-encounter-mode.encounter-active .card[data-widget-card] .card-scroll > .history-domain ~ .history-domain,
body.os-encounter-mode.encounter-active .card .hpi-domain-body > .widget-section + .widget-section,
body.os-encounter-mode.encounter-active .card .hpi-domain-body > .hpi-widget-section ~ .hpi-widget-section {
  margin-top: var(--os-enc-pady-above-subheading) !important;
}

body.os-encounter-mode.encounter-active .card .history-domain [id$="-display"] {
  min-height: 0 !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Body list items — populated AND empty/loading.
 *
 * Matches the design bundle's `.hist-list li` recipe: Geist sans, ink,
 * 12.5px, with a small thematic bullet rendered via ::before. The same
 * treatment applies to:
 *   - .sb-item  : populated list entries
 *   - .sb-none  : "None reported." / "Loading from …" empty / loading copy
 *   - .sb-empty : alternate empty marker
 * and across every os-history-state (loading / loaded / empty / error)
 * so the body reads consistently regardless of fetch state. The state cue
 * lives on the header pip, not the body text.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode.encounter-active .card .sb-none,
body.os-encounter-mode.encounter-active .card .sb-empty,
body.os-encounter-mode.encounter-active .card .sb-item,
body.os-encounter-mode.encounter-active .card .hpi-quick-empty,
body.os-encounter-mode.encounter-active .card [data-os-history-state="loading"] .sb-none,
body.os-encounter-mode.encounter-active .card [data-os-history-state="empty"] .sb-none,
body.os-encounter-mode.encounter-active .card [data-os-history-state="error"] .sb-none {
  display: block !important;
  position: relative !important;
  font-family: var(--font) !important;
  font-style: normal !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  padding: 0 0 0 14px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.os-encounter-mode.encounter-active .card .sb-none::before,
body.os-encounter-mode.encounter-active .card .sb-empty::before,
body.os-encounter-mode.encounter-active .card .sb-item::before,
body.os-encounter-mode.encounter-active .card .hpi-quick-empty::before,
body.os-encounter-mode.encounter-active .card [data-os-history-state="loading"] .sb-none::before,
body.os-encounter-mode.encounter-active .card [data-os-history-state="empty"] .sb-none::before,
body.os-encounter-mode.encounter-active .card [data-os-history-state="error"] .sb-none::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--muted) !important;
  display: block !important;
  margin: 0 !important;
  flex: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Strip inner container padding so the bullet sits flush with the subheading
 * left edge (the subheading is a child of .sb-block / .widget-section with
 * padding-left:16px — bullets need to align with that same gutter). */
body.os-encounter-mode.encounter-active .card .history-list-region,
body.os-encounter-mode.encounter-active .card .history-list-grid,
body.os-encounter-mode.encounter-active .card .widget-section-body,
body.os-encounter-mode.encounter-active .card .hpi-quick-list,
body.os-encounter-mode.encounter-active .card .hpi-single-display {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .card[data-widget-card="hpi"] .hpi-quick-list,
body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .card[data-widget-card="ocular-history"] .history-list-grid,
body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .card[data-widget-card="medical-history"] .history-list-grid {
  gap: 8px 10px !important;
}

/* HPI widget compact body: zero out the 116px display-wrapper floor, the
 * 54px section-body floor, and collapse the hidden storage textarea so none
 * of them create whitespace between the HISTORY and FORMS sections. */
body.os-encounter-mode.encounter-active .card .hpi-single-display {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.os-encounter-mode.encounter-active .card .hpi-widget-section .widget-section-body {
  min-height: 0 !important;
}
body.os-encounter-mode.encounter-active .card .hpi-widget-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Force HPI subheadings to the same rendered height as history-domain-hdr.
 * A higher-specificity rule in encounter-paper overrides the shared
 * font-size: 9.5px on .widget-subheading, so we re-apply it here at a
 * specificity that beats everything. */
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-widget-section .widget-subheading {
  font-size: 9.5px !important;
  line-height: 1 !important;
}
body.os-encounter-mode.encounter-active .card #hpi.hpi-storage-field {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] #hpi {
  display: block !important;
  width: 100% !important;
  min-height: 96px !important;
  box-sizing: border-box !important;
  resize: vertical !important;
  border: 1px solid var(--line, rgba(31,27,22,0.12)) !important;
  border-radius: 8px !important;
  background: var(--widget-body-bg, #fff) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] #hpi:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--os-ring-focus, 0 0 0 3px rgba(194,85,58,0.20)) !important;
}

/* Hide the HPI "floating entry" — the dashed-bordered #hpi-preview chip
 * that the chrome renders next to the textarea. The bulleted .hpi-quick-empty
 * above it carries the empty state now. */
body.os-encounter-mode.encounter-active .card #hpi-preview {
  display: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-slot {
  display: block !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-slot:has(.hpi-inline-form) .hpi-form-empty {
  display: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-empty {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  min-height: 44px !important;
  margin-top: 2px !important;
  padding: 8px 10px !important;
  border: 1px dashed color-mix(in srgb, var(--ink) 16%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--ink) 3%, var(--widget-body-bg, #fff)) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-empty:has(.widget-directory-results.open) {
  min-height: 168px !important;
  align-items: flex-start !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-empty .widget-directory-results {
  left: 10px !important;
  right: auto !important;
  top: 42px !important;
  bottom: auto !important;
  width: min(320px, calc(100vw - 80px)) !important;
  z-index: 80 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-add {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: var(--widget-action-btn-min-w) !important;
  height: var(--widget-action-btn-h) !important;
  min-height: var(--widget-action-btn-h) !important;
  padding: 0 var(--widget-action-btn-pad-x) !important;
  border: 1px solid var(--widget-action-btn-border) !important;
  border-radius: var(--widget-action-btn-radius) !important;
  background: var(--widget-action-btn-bg) !important;
  color: var(--widget-action-btn-color) !important;
  font-family: var(--widget-action-btn-font) !important;
  font-size: var(--widget-action-btn-size) !important;
  font-weight: var(--widget-action-btn-weight) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-add:hover,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-add:focus-visible {
  border-color: var(--widget-action-btn-border-hover) !important;
  background: var(--widget-action-btn-bg-hover) !important;
  color: var(--widget-action-btn-color) !important;
  outline: none !important;
}

/* HPI forms are selected from the directory, but once selected the form title
 * is redundant. Keep only a small remove affordance pinned to the top-right
 * so the controls start immediately under the Forms section header. */
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form {
  position: relative !important;
  margin-top: 4px !important;
  padding: 0 28px 0 0 !important;
  gap: 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-title-row {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-close {
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-close:hover,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-close:focus-visible {
  background: transparent !important;
  color: var(--ink) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-grid {
  gap: 4px !important;
}

/* HPI Forms composition cards: persistent search + clean generated form chrome. */
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-slot {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-search {
  display: block !important;
  position: relative !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-search .widget-directory {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  position: relative !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-search .widget-directory-input {
  width: 100% !important;
  height: 32px !important;
  min-width: 0 !important;
  border-color: color-mix(in srgb, var(--ink) 16%, transparent) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-search .widget-directory-results {
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: 260px !important;
  padding: 6px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface) !important;
  box-shadow: var(--os-shadow-soft) !important;
  z-index: 90 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-search .widget-directory-result {
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 8px 9px !important;
  border-radius: var(--r-sm) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-search .widget-directory-result:hover,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-search .widget-directory-result:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-slot:has(.hpi-inline-form) > .hpi-form-search {
  display: block !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-slot:has(.hpi-inline-form) > .hpi-form-empty:not(:has(.widget-directory-results.open)) {
  display: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-form-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .hpi-form-title-row {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .hpi-form-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .hpi-form-title::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 14%, transparent),
    transparent
  ) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .hpi-form-close {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  opacity: 0.72 !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .hpi-form-close:hover,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .hpi-form-close:focus-visible {
  background: transparent !important;
  color: var(--danger, var(--accent)) !important;
  opacity: 1 !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] [data-form-render-host],
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .hpi-form-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-section,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-symptom,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-modifiers {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-section + .form-list-section {
  margin-top: 4px !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-section-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 4px 0 1px !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-section-label::after {
  content: "" !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 14%, transparent),
    transparent
  ) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-ocular-laterality {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-ocular-laterality-option {
  appearance: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  text-align: left !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-ocular-laterality-option.selected,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-ocular-laterality-option[aria-pressed="true"] {
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-onset-dominant-label {
  color: var(--ink) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-ocular-laterality-option:hover,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-ocular-laterality-option:focus-visible {
  color: var(--accent) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-modifiers {
  margin-left: 14px !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] fieldset.form-group {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] fieldset.form-group + fieldset.form-group {
  padding-top: 12px !important;
  border-top: 1px solid var(--line-soft) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] fieldset.form-group fieldset.form-group {
  margin-top: 8px !important;
  padding: 8px 0 0 10px !important;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
  border-left: 2px solid color-mix(in srgb, var(--accent) 34%, transparent) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] fieldset.form-group > legend {
  float: left !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] fieldset.form-group > legend + * {
  clear: both !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-item {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-item > .field-label {
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-item > :not(.field-label) {
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-line {
  appearance: none !important;
  display: grid !important;
  grid-template-columns: 14px auto auto !important;
  align-items: baseline !important;
  column-gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-line-symptom {
  grid-template-columns: 14px auto !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-line:hover,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-line:focus-visible,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-line[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent-soft) 32%, transparent) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-label,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-value {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-value {
  padding-left: 6px !important;
  color: var(--muted) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-line.has-value .form-list-value {
  color: color-mix(in srgb, var(--ink) 84%, var(--muted)) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-marker {
  display: inline-flex !important;
  width: 14px !important;
  min-width: 14px !important;
  justify-content: flex-start !important;
  color: var(--muted) !important;
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: inherit !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-line[data-current-value="true"] .form-list-marker {
  color: var(--success) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-line[data-current-value="false"] .form-list-marker {
  color: color-mix(in srgb, var(--danger, var(--accent)) 78%, var(--muted)) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-bullet,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-sub-bullet {
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  margin-top: 8px !important;
  border-radius: 50% !important;
  background: var(--muted) !important;
  box-shadow: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-sub-bullet {
  background: color-mix(in srgb, var(--muted) 72%, transparent) !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] .form-list-affordance {
  display: none !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] input,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] select,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] textarea {
  min-width: 0 !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
}

body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] input:focus,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] select:focus,
body.os-encounter-mode.encounter-active .card[data-widget-card="hpi"] .hpi-inline-form[data-form-card-id] textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--os-ring-focus) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  max-height: min(260px, calc(100vh - 16px)) !important;
  overflow-y: auto !important;
  padding: 6px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface) !important;
  box-shadow: var(--os-shadow-soft) !important;
  z-index: 120 !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-option {
  appearance: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 26px !important;
  padding: 5px 8px !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-option:hover,
body.os-encounter-mode.encounter-active .form-choice-menu-option:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-option.selected,
body.os-encounter-mode.encounter-active .form-choice-menu-option[aria-selected="true"],
body.os-encounter-mode.encounter-active .form-choice-menu-option[aria-checked="true"] {
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface)) !important;
  color: var(--accent-ink) !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-option:disabled,
body.os-encounter-mode.encounter-active .form-choice-menu-option[aria-disabled="true"] {
  color: color-mix(in srgb, var(--muted) 70%, transparent) !important;
  cursor: not-allowed !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-option[role="menuitemcheckbox"] {
  padding-left: 24px !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-option[role="menuitemcheckbox"].selected::before,
body.os-encounter-mode.encounter-active .form-choice-menu-option[role="menuitemcheckbox"][aria-checked="true"]::before {
  content: "✓" !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--success) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-quantity {
  margin: 0 0 4px !important;
  padding: 0 !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-input {
  margin: 0 0 4px !important;
  padding: 0 !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-number {
  width: 100% !important;
  min-height: 28px !important;
  padding: 5px 7px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-text {
  width: 100% !important;
  min-width: 180px !important;
  min-height: 28px !important;
  padding: 5px 7px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-number:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--os-ring-focus) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-text:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--os-ring-focus) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .form-choice-menu-units {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu {
  box-sizing: border-box !important;
  gap: 6px !important;
  width: min(760px, calc(100vw - 16px)) !important;
  max-height: calc(100vh - 16px) !important;
  overflow-y: auto !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-title {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-heading {
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-summary {
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-save {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 94px !important;
  justify-content: center !important;
  text-align: center !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-save:disabled {
  opacity: 0.45 !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-clusters {
  display: grid !important;
  gap: 3px !important;
  width: 100% !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-clusters[hidden] {
  display: none !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-cluster-button {
  color: var(--accent) !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-picker {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-column-heading {
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-mode-toggle {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2px !important;
  width: 100% !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-mode-toggle .form-choice-menu-option {
  justify-content: center !important;
  text-align: center !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-fields {
  align-items: center !important;
  display: grid !important;
  gap: 6px !important;
  width: 100% !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-fields[hidden] {
  display: none !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-range-fields {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-number-input {
  min-width: 0 !important;
  width: 100% !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-range-separator {
  color: var(--muted) !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-unit-select {
  min-height: 30px !important;
  width: 100% !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-unit-select:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--os-ring-focus) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-checklist {
  display: grid !important;
  gap: 2px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.os-encounter-mode.encounter-active .form-onset-menu-checklist .form-choice-menu-option {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 700px) {
  body.os-encounter-mode.encounter-active .form-onset-menu-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  body.os-encounter-mode.encounter-active .form-onset-menu {
    width: calc(100vw - 16px) !important;
  }

  body.os-encounter-mode.encounter-active .form-onset-menu-picker {
    grid-template-columns: 1fr !important;
  }

  body.os-encounter-mode.encounter-active .form-onset-menu-checklist {
    grid-template-columns: 1fr !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
 * Physical exam card rhythm — match History section dividers.
 *
 * Eye Examination nests Ocular Vitals, Anterior Segment, and Posterior
 * Segment as card-body blocks inside a single widget. Remove the older
 * body margins and bottom-border divider lines so these sections use the
 * same compact banner-to-heading spacing and trailing-rule headings as the
 * History widgets above.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] > .card-scroll {
  padding: var(--widget-body-pad) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] > .card-scroll > .card-body {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] > .card-scroll > .card-body + .card-body {
  margin-top: 16px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .vitals-subhdr {
  border-bottom: 0 !important;
  margin: 0 0 var(--os-enc-history-hdr-gap-below) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body > .vitals-subhdr {
  margin-bottom: var(--os-enc-history-hdr-gap-below) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body > .ocular-vitals-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  column-gap: clamp(6px, 0.75vw, 10px) !important;
  row-gap: 18px !important;
  padding-top: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-section {
  flex: 0 1 max-content !important;
  width: max-content !important;
  max-width: 360px !important;
  align-items: center !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid {
  display: contents !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.open {
  flex: 0 1 max-content !important;
  width: max-content !important;
  max-width: 360px !important;
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.open,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.compact.open {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.open::before,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.open > .card-hdr::after {
  display: none !important;
  content: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.open > .card-hdr {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto var(--os-enc-history-hdr-gap-below) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  gap: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.open > .card-hdr .card-pip {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.open > .card-hdr .card-title {
  flex: 0 0 auto !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.open > .card-body,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.open > div:not(.card-hdr) {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body .eye-cols,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body .eye-cols {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  gap: 18px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body .eye-cols > div,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body .eye-cols > div {
  position: relative !important;
  display: grid !important;
  grid-template-columns: max-content !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: 0 !important;
  row-gap: 5px !important;
  min-height: 26px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body .eye-tag,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body .eye-tag {
  justify-self: start !important;
  margin: 0 !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body [id^="colour-wrap-"],
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body [id^="cct-wrap-"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  min-width: 0 !important;
  margin: 0 !important;
  gap: 3px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body [id^="colour-wrap-"] {
  min-width: 2ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body [id^="cct-wrap-"] {
  min-width: 6ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body input.stored-input,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body input.stored-input {
  width: auto !important;
  min-width: 2.5ch !important;
  max-width: none !important;
  height: 22px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body input.stored-input {
  width: 2ch !important;
  min-width: 2ch !important;
  max-width: 2ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body input.stored-input {
  width: 3ch !important;
  min-width: 3ch !important;
  max-width: 3ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body input.stored-input::placeholder,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body input.stored-input::placeholder {
  color: var(--ink) !important;
  opacity: 1 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body input.stored-input:focus,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body input.stored-input:focus {
  border-bottom: 1px solid var(--ink-link, var(--blue, #d97757)) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body .input-unit {
  color: var(--ink-faint, var(--text-faint)) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail > .compact-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: 28px 36px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 58px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--ink) 14%, transparent) 28%,
      color-mix(in srgb, var(--ink) 14%, transparent) 72%,
      transparent
    )
    center 32px / min(190px, 46%) 1px no-repeat !important;
  box-shadow: none !important;
  position: relative !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail > .compact-row.other-exam-masonry {
  display: block !important;
  min-height: 58px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail > .compact-row.other-exam-masonry > .refr-body.open {
  transition: top 0.14s var(--ease), left 0.14s var(--ease), width 0.14s var(--ease) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail > .compact-row > .refr-body.open {
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  align-self: start !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail > .compact-row > #cvf-body.open {
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail > .refr-body.open {
  width: 100% !important;
  max-width: 100% !important;
  margin: 30px auto 0 !important;
}

@media (max-width: 760px) {
  body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail > .compact-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail > .compact-row::before {
  content: "OD" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(calc(-100% - 17px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--physical-exam-toggle-color) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail > .compact-row::after {
  content: "OS" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(0) !important;
  margin: 0 !important;
  padding-left: 17px !important;
  color: var(--physical-exam-toggle-color) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  width: max-content !important;
  border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.compact.open {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.compact.open::before,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.open > .card-hdr::after {
  display: none !important;
  content: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.open > .card-hdr {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto var(--os-enc-history-hdr-gap-below) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  gap: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.open > .card-hdr .card-pip {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.open > .card-hdr .card-title,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.open .vitals-subhdr {
  flex: 0 1 auto !important;
  padding: 0 !important;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink)) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.open .vitals-subhdr {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto var(--os-enc-history-hdr-gap-below) !important;
  border: 0 !important;
  background: transparent !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.open > div:not(.card-hdr) {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .eye-tag.od,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .eye-tag.os {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--physical-exam-toggle-color) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .eye-tag.od.na-tag,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .eye-tag.os.na-tag {
  color: var(--physical-exam-toggle-color) !important;
  opacity: 0.48 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .eye-tag.clickable.od:hover,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .eye-tag.clickable.os:hover {
  background: transparent !important;
  color: var(--physical-exam-toggle-color) !important;
  filter: none !important;
  opacity: 0.72 !important;
  text-decoration: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.open .eye-tag.od,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail .refr-body.open .eye-tag.os {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body.open,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body.open {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body.open::before,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body.open::before,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body.open > .card-hdr::after,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body.open > .card-hdr::after {
  display: none !important;
  content: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body.open > .card-hdr,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body.open > .card-hdr {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto var(--os-enc-history-hdr-gap-below) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  gap: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body.open > .card-hdr .card-pip,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body.open > .card-hdr .card-pip {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body.open > .card-hdr .card-title,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body.open > .card-hdr .card-title {
  flex: 0 0 auto !important;
  padding: 0 !important;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink)) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body.open > div:not(.card-hdr),
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body.open > div:not(.card-hdr) {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body .eye-cols,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body .eye-cols,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body .eye-cols {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  gap: 18px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body .eye-cols > div,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body .eye-cols > div,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body .eye-cols > div {
  position: relative !important;
  display: grid !important;
  grid-template-columns: max-content !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: 0 !important;
  row-gap: 5px !important;
  min-height: 26px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body .eye-cols > div:first-child::after,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body .eye-cols > div:first-child::after,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body .eye-cols > div:first-child::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -11px !important;
  width: 1px !important;
  height: 18px !important;
  transform: translateY(-50%) !important;
  background: color-mix(in srgb, var(--ink) 12%, transparent) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body .eye-tag,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body .eye-tag,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body .eye-tag {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body [id^="colour-wrap-"],
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body [id^="cct-wrap-"],
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body [id^="dil-wrap-"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  min-width: 0 !important;
  margin: 0 !important;
  gap: 3px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body [id^="colour-wrap-"] {
  min-width: 2ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body [id^="cct-wrap-"] {
  min-width: 6ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body [id^="dil-wrap-"] {
  min-width: 5ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .eye-cols {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  gap: 22px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .eye-cols > div {
  position: relative !important;
  display: grid !important;
  grid-template-columns: max-content !important;
  justify-items: center !important;
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .eye-cols > div:first-child::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -12px !important;
  width: 1px !important;
  height: 42px !important;
  transform: translateY(-50%) !important;
  background: color-mix(in srgb, var(--ink) 12%, transparent) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body [id^="cvf-wrap-"] {
  display: block !important;
  margin: 0 !important;
}

/* P2-S6: per-eye 4×4 granular grid — a 2×2 of quadrant cells, each a 2×2 of
   boxes (16 boxes total). Quadrant cells carry the dividing rules so the four
   quadrants read distinctly within the combined field. */
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .cvf-field-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 32px) !important;
  grid-template-rows: repeat(2, 32px) !important;
  width: 64px !important;
  height: 64px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .cvf-field-grid .cvf-quad-cell {
  display: grid !important;
  grid-template-columns: repeat(2, 16px) !important;
  grid-template-rows: repeat(2, 16px) !important;
  width: 32px !important;
  height: 32px !important;
  border-right: 1px solid color-mix(in srgb, var(--ink) 30%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .cvf-field-grid .cvf-quad-cell:nth-child(2n) {
  border-right: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .cvf-field-grid .cvf-quad-cell:nth-child(n+3) {
  border-bottom: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .cvf-field-grid button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-right: 1px solid color-mix(in srgb, var(--ink) 10%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent) !important;
  background: transparent !important;
  color: var(--ink-faint, var(--text-faint)) !important;
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .cvf-field-grid .cvf-quad-cell button:nth-child(2n) {
  border-right: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .cvf-field-grid .cvf-quad-cell button:nth-child(n+3) {
  border-bottom: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .cvf-field-grid button:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .cvf-field-grid button.is-marked {
  color: var(--physical-exam-toggle-color) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cvf-body .cvf-field-grid button.is-defect {
  color: var(--danger, #b83f33) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body #mot-extras {
  position: relative !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body #mot-extras .ow-chip,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-lbl,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-supra-na {
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body #mot-extras .ow-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 0 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
  color: var(--muted) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body #mot-extras .ow-chip-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 10px !important;
  color: var(--physical-exam-toggle-color) !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body #mot-extras .ow-chip-toggle.is-plus {
  font-weight: 600 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body #mot-extras .ow-chip-label {
  color: var(--muted) !important;
  cursor: default !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-lbl {
  color: var(--physical-exam-toggle-color) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body #mot-extras .ow-chip-toggle:hover,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-wrap:hover .ow-mot-lbl,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-supra-na:hover {
  opacity: 0.72 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-lbl.set {
  color: var(--physical-exam-toggle-color) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-lbl.abn {
  color: var(--danger, #b83f33) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-supra-na {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-supra-na.active {
  opacity: 0.48 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body #mot-prompts {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-rows: repeat(3, auto) !important;
  grid-auto-columns: max-content !important;
  justify-content: center !important;
  align-items: start !important;
  column-gap: 28px !important;
  row-gap: 4px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 6px auto 10px !important;
  padding: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-prompt-row {
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  align-items: baseline !important;
  justify-content: start !important;
  column-gap: 5px !important;
  padding: 0 !important;
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-prompt-label {
  color: var(--muted) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
  text-transform: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-prompt-value,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-prompt-input {
  color: var(--physical-exam-editable-blue) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-prompt-value {
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-prompt-value:hover {
  opacity: 0.72 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #motility-body .ow-mot-prompt-input {
  width: 90px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--physical-exam-editable-blue) !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-body {
  display: grid !important;
  row-gap: 6px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-row {
  display: grid !important;
  grid-template-columns: minmax(42px, max-content) minmax(74px, max-content) minmax(42px, max-content) !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 18px !important;
  min-height: 22px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-row:first-child {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-lpad,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-rpad {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-eye,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-lbl {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  flex: initial !important;
  justify-self: stretch !important;
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-row-lbl {
  color: var(--muted) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-tog.nr-check-val,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-tog.nr-na-val {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--physical-exam-toggle-color) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-tog.nr-na-val {
  opacity: 0.48 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-tog.nr-check-val:hover,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-tog.nr-na-val:hover,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-row-lbl:hover {
  opacity: 0.72 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-field-val,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-stored {
  display: inline-block !important;
  width: auto !important;
  min-width: 78px !important;
  max-width: 132px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--physical-exam-editable-blue) !important;
  background: transparent !important;
  color: var(--physical-exam-editable-blue) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-align: center !important;
  text-transform: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #neuro-body .ow-stored {
  border-bottom-color: transparent !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-body {
  display: grid !important;
  row-gap: 6px !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-row {
  display: grid !important;
  grid-template-columns: minmax(52px, max-content) minmax(74px, max-content) minmax(52px, max-content) !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 18px !important;
  min-height: 22px !important;
  padding: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-row:first-child {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-lpad,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-rpad {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-eye,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-lbl {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  flex: initial !important;
  justify-self: stretch !important;
  min-width: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-row-lbl {
  color: var(--muted) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-tog.lo-dash-val,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-tog.lo-na-val {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--physical-exam-toggle-color) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-tog.lo-na-val {
  opacity: 0.48 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-tog.lo-dash-val:hover,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-row-lbl:hover,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-stored:hover {
  opacity: 0.72 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-field-val,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .lo-edit-input,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-stored {
  display: inline-block !important;
  width: auto !important;
  min-width: 52px !important;
  max-width: 96px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--physical-exam-editable-blue) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--physical-exam-editable-blue) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-align: center !important;
  text-transform: none !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-stored {
  border-bottom-color: transparent !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body .ow-body > div:last-child {
  border-top: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #lidsorbit-body #lo-hertel-base {
  width: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--physical-exam-editable-blue) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-align: center !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body.open {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: min(100%, 560px) !important;
  justify-self: stretch !important;
  align-self: start !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body.open > div:not(.card-hdr) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ow-chips-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px 12px !important;
  width: min(100%, 620px) !important;
  max-width: 100% !important;
  margin: 0 auto 6px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body #ortho-cross-wrap {
  flex: 0 0 auto !important;
  width: 560px !important;
  max-width: 100% !important;
  height: 340px !important;
  margin: 8px auto 10px !important;
  position: relative !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-zone-inline {
  display: inline-grid !important;
  grid-template-rows: repeat(2, max-content) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 1px !important;
  min-width: 86px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-axis-row {
  display: inline-grid !important;
  grid-template-columns: max-content 17px 30px 24px max-content !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 2px !important;
  opacity: 1 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-axis-label,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-delta {
  color: var(--muted) !important;
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-axis-label {
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-axis-label:hover {
  opacity: 0.72 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-mini-select,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-num-input {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--physical-exam-toggle-color) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: 11px !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-align-last: center !important;
  appearance: none !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-mini-select:hover,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-num-input:hover {
  opacity: 0.72 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body #ortho-extras-row {
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
  padding-top: 8px !important;
  margin-top: 6px !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 18px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body #ortho-sensory-section {
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 18px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-sens-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 3px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-sens-prefix,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-sens-unit {
  color: var(--muted) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
  text-transform: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-sens-value {
  min-width: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--physical-exam-editable-blue) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-align: center !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-sens-value:hover {
  opacity: 0.72 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-sens-select-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 16px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-sens-select {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-lat-select:has(option:checked[value=""]),
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-type-select:has(option:checked[value=""]),
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #orthoptics-body .ortho-num-input:has(option:checked[value=""]) {
  color: var(--physical-exam-toggle-color) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #addon-detail > .compact-row > .refr-body.compact.open {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-self: stretch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body input.stored-input,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body input.stored-input,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body input.stored-input {
  width: auto !important;
  min-width: 2.5ch !important;
  max-width: none !important;
  height: 22px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body input.stored-input {
  width: 2ch !important;
  min-width: 2ch !important;
  max-width: 2ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body input.stored-input {
  width: 3ch !important;
  min-width: 3ch !important;
  max-width: 3ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body input.stored-input {
  width: 2.5ch !important;
  min-width: 2.5ch !important;
  max-width: 2.5ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body input.stored-input::placeholder,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body input.stored-input::placeholder,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body input.stored-input::placeholder {
  color: var(--ink) !important;
  opacity: 1 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body input.stored-input:focus,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body input.stored-input:focus,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body input.stored-input:focus {
  border-bottom: 1px solid var(--ink-link, var(--blue, #d97757)) !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #colour-body .input-unit,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #cct-body .input-unit,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="other-examination"] #other-exam-addon-host #dilation-body .input-unit {
  color: var(--ink-faint, var(--text-faint)) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-section + .ocular-vitals-section {
  border-left: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-section-iop::after {
  display: none !important;
  content: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .vitals-subhdr::after {
  display: block !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-measure-title {
  width: min(100%, var(--os-enc-ocular-vitals-measure-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-measure-title::after {
  display: none !important;
  content: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-title-stack {
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-pupils .ocular-vitals-measure-title {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-title-actions {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-pupils {
  flex-basis: var(--os-enc-ocular-vitals-pupils-width) !important;
  width: var(--os-enc-ocular-vitals-pupils-width) !important;
  max-width: min(100%, 360px) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-pupils {
  width: 100% !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-pupils .ocular-vitals-pupil-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 18px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-row:has(#ocular-vitals-addon-grid > .refr-body.open) .ocular-vitals-section-pupils {
  flex-basis: max-content !important;
  width: max-content !important;
  max-width: 360px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-row:has(#ocular-vitals-addon-grid > .refr-body.open) .ocular-vitals-content-group-pupils,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-row:has(#ocular-vitals-addon-grid > .refr-body.open) .ocular-vitals-section-pupils .ocular-vitals-pupil-controls {
  width: max-content !important;
  max-width: 100% !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-row:has(#ocular-vitals-addon-grid > .refr-body.open) .ocular-vitals-section-pupils .ocular-vitals-pupil-controls {
  justify-content: center !important;
  gap: 12px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-iop .ocular-vitals-iop-time-row {
  order: 1 !important;
  width: min(100%, var(--os-enc-ocular-vitals-measure-width)) !important;
  height: 9.5px !important;
  min-height: 9.5px !important;
  margin: 0 auto 2px !important;
  align-items: center !important;
  justify-content: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-iop .ocular-vitals-field-list {
  order: 2 !important;
  gap: 0 !important;
  margin-top: -2px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-iop .ocular-vitals-eye-row {
  min-height: 24px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-iop .ocular-vitals-iop-time-row .ocular-vitals-time-field {
  width: 90px !important;
  height: 9.5px !important;
  align-items: center !important;
  justify-content: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-iop .ocular-vitals-iop-time-row .ocular-vitals-time-field input {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  height: 9.5px !important;
  min-height: 9.5px !important;
  max-height: 9.5px !important;
  flex: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  cursor: default !important;
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  pointer-events: none !important;
  text-align: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-iop .ocular-vitals-iop-time-row .ocular-vitals-time-field input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-pupils .ocular-vitals-aniso-panel {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 9.5px 0 0 !important;
  border-top: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-pupils .ocular-vitals-aniso-panel .ocular-vitals-field-list {
  width: max-content !important;
  max-width: 100% !important;
  gap: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-pupils .ocular-vitals-aniso-panel .ocular-vitals-eye-row {
  min-height: 24px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-section-pupils {
  flex: 0 1 var(--os-enc-ocular-vitals-pupils-width) !important;
  width: var(--os-enc-ocular-vitals-pupils-width) !important;
  max-width: min(100%, 360px) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-content-group-pupils {
  width: 100% !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-section-pupils .ocular-vitals-pupil-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 18px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-row:has(#ocular-vitals-addon-grid > .refr-body.open) .ocular-vitals-section-pupils {
  flex: 0 1 max-content !important;
  width: max-content !important;
  max-width: 360px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-row:has(#ocular-vitals-addon-grid > .refr-body.open) .ocular-vitals-content-group-pupils,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-row:has(#ocular-vitals-addon-grid > .refr-body.open) .ocular-vitals-section-pupils .ocular-vitals-pupil-controls {
  width: max-content !important;
  max-width: 100% !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-row:has(#ocular-vitals-addon-grid > .refr-body.open) .ocular-vitals-section-pupils .ocular-vitals-pupil-controls {
  justify-content: center !important;
  gap: 12px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body > .ocular-vitals-row {
  display: grid !important;
  grid-template-columns: repeat(3, max-content) !important;
  align-items: start !important;
  justify-items: center !important;
  justify-content: space-evenly !important;
  column-gap: clamp(18px, 3vw, 48px) !important;
  row-gap: 18px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body > .ocular-vitals-row:has(#ocular-vitals-addon-grid > .refr-body.open) {
  grid-template-columns: repeat(4, max-content) !important;
  column-gap: clamp(14px, 2vw, 36px) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body > .ocular-vitals-row:has(#colour-body.open):has(#cct-body.open) {
  grid-template-columns: repeat(5, max-content) !important;
  column-gap: clamp(10px, 1.25vw, 24px) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-region {
  grid-column: auto !important;
  justify-self: stretch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-section,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.open,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-addon-grid > .refr-body.compact.open {
  justify-self: center !important;
  align-self: start !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-section-pupils {
  flex: none !important;
  width: max-content !important;
  max-width: 100% !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-content-group-pupils,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-section-pupils .ocular-vitals-pupil-controls {
  width: max-content !important;
  max-width: 100% !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-section-pupils .ocular-vitals-pupil-controls {
  justify-content: center !important;
  gap: 12px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-column-head,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-field-list,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-iop .ocular-vitals-eye-row {
  width: min(100%, var(--os-enc-ocular-vitals-measure-width)) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-measure-title,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-column-head,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list {
  width: max-content !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision {
  display: grid !important;
  grid-template-columns: max-content max-content max-content minmax(2.5ch, max-content) max-content max-content minmax(2.5ch, max-content) !important;
  column-gap: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-measure-title {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-column-head,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-eye-row {
  display: contents !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-column-head > span {
  justify-self: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-column-head > .ocular-vitals-eye-spacer {
  grid-row: 2 !important;
  grid-column: 1 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-column-head > span:nth-child(2) {
  grid-row: 2 !important;
  grid-column: 3 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-column-head > span:nth-child(3) {
  grid-row: 2 !important;
  grid-column: 6 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-eye-row > .eye-tag {
  justify-self: start !important;
  margin-right: 22px !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(1) > .eye-tag {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(2) > .eye-tag {
  grid-column: 1 !important;
  grid-row: 4 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field {
  display: contents !important;
  width: max-content !important;
  justify-self: center !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field > span {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-vision .input-row {
  display: contents !important;
  width: max-content !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-vision .input-unit {
  display: contents !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-vision .vision-prefix-number {
  justify-self: end !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-vision .vision-prefix-slash {
  justify-self: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(1) .ocular-vitals-field:first-of-type .vision-prefix-number,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(1) .ocular-vitals-field:first-of-type .vision-prefix-slash,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(1) .ocular-vitals-field:first-of-type input {
  grid-row: 3 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(1) .ocular-vitals-field:last-of-type .vision-prefix-number,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(1) .ocular-vitals-field:last-of-type .vision-prefix-slash,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(1) .ocular-vitals-field:last-of-type input {
  grid-row: 3 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(2) .ocular-vitals-field:first-of-type .vision-prefix-number,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(2) .ocular-vitals-field:first-of-type .vision-prefix-slash,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(2) .ocular-vitals-field:first-of-type input {
  grid-row: 4 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(2) .ocular-vitals-field:last-of-type .vision-prefix-number,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(2) .ocular-vitals-field:last-of-type .vision-prefix-slash,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field-list .ocular-vitals-eye-row:nth-child(2) .ocular-vitals-field:last-of-type input {
  grid-row: 4 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field:first-of-type .vision-prefix-number { grid-column: 2 !important; }
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field:first-of-type .vision-prefix-slash { grid-column: 3 !important; }
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field:first-of-type input { grid-column: 4 !important; }
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field:last-of-type .vision-prefix-number { grid-column: 5 !important; }
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field:last-of-type .vision-prefix-slash { grid-column: 6 !important; }
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision .ocular-vitals-field:last-of-type input { grid-column: 7 !important; }

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-vision input.stored-input {
  field-sizing: content !important;
  min-width: 2.5ch !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-right: 22px !important;
  text-align: left !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-section-vision .ocular-vitals-field:last-of-type input.stored-input {
  margin-right: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-eye-column {
  display: grid !important;
  grid-template-columns: max-content max-content minmax(2.5ch, max-content) 12px max-content max-content minmax(2.5ch, max-content) !important;
  column-gap: 0 !important;
  row-gap: 5px !important;
  align-items: center !important;
  justify-content: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-mini-head,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-eye-fields,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-field,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .input-row,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .input-unit {
  display: contents !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-mini-head > span:first-child {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-mini-head > span:last-child {
  grid-column: 6 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-field:first-child .vision-prefix-number { grid-column: 1 !important; grid-row: 2 !important; justify-self: end !important; }
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-field:first-child .vision-prefix-slash { grid-column: 2 !important; grid-row: 2 !important; justify-self: center !important; }
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-field:first-child input { grid-column: 3 !important; grid-row: 2 !important; justify-self: start !important; }

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-field:last-child .vision-prefix-number { grid-column: 5 !important; grid-row: 2 !important; justify-self: end !important; }
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-field:last-child .vision-prefix-slash { grid-column: 6 !important; grid-row: 2 !important; justify-self: center !important; }
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-field:last-child input { grid-column: 7 !important; grid-row: 2 !important; justify-self: start !important; }

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-pair {
  display: grid !important;
  grid-template-columns: repeat(2, max-content) !important;
  align-items: start !important;
  justify-content: center !important;
  column-gap: 22px !important;
  row-gap: 0 !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-column {
  position: relative !important;
  display: grid !important;
  grid-template-columns: max-content !important;
  align-items: center !important;
  justify-items: center !important;
  row-gap: 5px !important;
  width: max-content !important;
  max-width: 100% !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-column-od::after,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body .eye-cols > div:first-child::after,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body .eye-cols > div:first-child::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -11px !important;
  width: 1px !important;
  height: 18px !important;
  transform: translateY(-50%) !important;
  background: color-mix(in srgb, var(--ink) 12%, transparent) !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-content-group-vision {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100% !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair {
  column-gap: 20px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-mini-head,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-fields {
  display: grid !important;
  grid-template-columns: repeat(2, max-content) !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 12px !important;
  width: max-content !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-mini-head > span {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
  color: var(--muted) !important;
  text-align: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-pair .ocular-vitals-field,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-pair .input-row,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-pair .input-unit {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 3px !important;
  transform: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-pair .ocular-vitals-field > span:not(.input-unit) {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-pair .vision-prefix-number,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-pair .vision-prefix-slash {
  display: inline !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-eye-pair input.stored-input {
  flex: 0 0 auto !important;
  margin: 0 !important;
  text-align: center !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair input.stored-input {
  text-align: left !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-iop-time-row {
  margin: 0 auto 5px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-iop-pair {
  column-gap: 14px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-iop-pair .ocular-vitals-pressure-field,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-iop-pair .ocular-vitals-pressure-field .input-row {
  flex: 0 0 auto !important;
  width: max-content !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-iop-pair .ocular-vitals-pressure-field input.stored-input {
  width: 2.5ch !important;
  min-width: 2.5ch !important;
  max-width: 2.5ch !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-aniso-pair {
  column-gap: 14px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-aniso-pair .ocular-vitals-eye-column {
  grid-template-columns: max-content !important;
  row-gap: 4px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-aniso-pair .eye-tag {
  grid-column: 1 / -1 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-aniso-pair .ocular-vitals-field {
  gap: 3px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-title-text,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-column-head > span:not(.ocular-vitals-eye-spacer),
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-row-label {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  color: var(--muted) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-title-text {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .input-unit,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] input.stored-input,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .tog-val,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .dil-val,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .lens-sub-val,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .cd-val {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.45 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] input.stored-input::placeholder {
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  text-transform: none !important;
  line-height: 1.45 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .tog-val,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .dil-val {
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  color: var(--physical-exam-toggle-color) !important;
}

/* Semantic exam editors keep the gray default base (css/widgets.css): the
 * Highlight API paints recognized tokens over it, so the ink toggle color
 * above must not swallow unrecognized/in-progress text. Higher specificity
 * on purpose to win the !important rule above. */
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .tog-val.editing[data-semantic-exam-cell="true"] {
  color: var(--exam-token-ghost, var(--text-faint)) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .tog-val {
  color: var(--physical-exam-toggle-color) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-tag {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .eye-tag.od,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .eye-tag.os,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .od,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .os {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .eye-tag.od,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .od {
  color: #b83f33 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .eye-tag.os,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .os {
  color: #2f5fa8 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .eye-tag.na-tag {
  opacity: 0.58 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .exam-hdr-row .eye-tag.od,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .exam-hdr-row .eye-tag.os {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--physical-exam-toggle-color) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .exam-hdr-row .eye-tag.na-tag {
  color: var(--physical-exam-toggle-color) !important;
  opacity: 0.48 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-hdr-row .eye-tag.od,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-hdr-row .eye-tag.os {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--physical-exam-toggle-color) !important;
  font-family: var(--physical-exam-toggle-font) !important;
  font-size: var(--physical-exam-toggle-size) !important;
  font-weight: var(--physical-exam-toggle-weight) !important;
  letter-spacing: var(--physical-exam-toggle-tracking) !important;
  line-height: var(--physical-exam-toggle-line-height) !important;
  text-transform: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-hdr-row .eye-tag.na-tag {
  color: var(--physical-exam-toggle-color) !important;
  opacity: 0.48 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-hdr-row {
  border-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 2px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-hdr-row:has(#post-hdr-od),
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-hdr-row:has(#post-hdr-os) {
  margin-bottom: 8px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-hdr-row:has(#post-hdr-od) > div:first-child,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-hdr-row:has(#post-hdr-os) > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-hdr-row:has(#post-hdr-od) br,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .exam-hdr-row:has(#post-hdr-os) br {
  display: none !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] #post-hdr-od,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] #post-hdr-os {
  margin-bottom: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] #ant-rows,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] #post-rows {
  min-height: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] #ant-rows > .exam-row:first-child,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] #post-rows > .exam-row:first-child {
  padding-top: 0 !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body .ocular-vitals-eye-pair .eye-tag,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #colour-body .eye-tag,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .eye-exam-vitals-body #ocular-vitals-addon-grid #cct-body .eye-tag {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-eye-column {
  display: grid !important;
  grid-template-columns: max-content max-content minmax(2.5ch, max-content) 12px max-content max-content minmax(2.5ch, max-content) !important;
}

body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-mini-head,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-eye-fields,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .ocular-vitals-field,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .input-row,
body.os-encounter-mode.encounter-active[data-encounter-tab="physical-examination"] .card[data-widget-card="anterior-posterior-segment"] .ocular-vitals-vision-pair .input-unit {
  display: contents !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Inline editing — no popout.
 *
 * The legacy chrome rendered a separate "popout" edit form (an `<div id="X-edit">`
 * containing textareas + add-input) below each section. Users had to click
 * a pencil to open it. We're destroying that interaction:
 *
 *   - Hide the popout form entirely.
 *   - Hide the pencil/edit toggle buttons that opened it.
 *   - Make the displayed text (.sb-item / .sb-none / .hpi-quick-empty) look
 *     clickable, with a subtle hover and a clear contenteditable focus ring.
 *   - The companion JS handler (encounter-app.js → inline edit IIFE)
 *     turns those elements contenteditable on click and persists changes
 *     back to _sbData on blur, calling renderSbDisplay to re-render.
 * ──────────────────────────────────────────────────────────────────────── */

/* Hide every history-section popout. The refraction widget keeps its own
 * inline form (#refraction-history-edit) — it lives in a different layout
 * and is intentionally excluded. */
body.os-encounter-mode.encounter-active .card[data-widget-card] [id$="-edit"]:not(#refraction-history-edit) {
  display: none !important;
}

/* Hide the Edit / Done toggle button row that lived next to each subheading
 * (poh-btn, ocsurg-btn, etc. — chrome ids are `btn-{key}` or similar buttons
 * inside .history-domain-hdr / .widget-subheading). */
body.os-encounter-mode.encounter-active .card[data-widget-card] .history-domain-hdr > button,
body.os-encounter-mode.encounter-active .card[data-widget-card] .widget-subheading > button,
body.os-encounter-mode.encounter-active .card[data-widget-card] [id^="btn-poh"],
body.os-encounter-mode.encounter-active .card[data-widget-card] [id^="btn-ocsurg"],
body.os-encounter-mode.encounter-active .card[data-widget-card] [id^="btn-ocmeds"],
body.os-encounter-mode.encounter-active .card[data-widget-card] [id^="btn-pmh"],
body.os-encounter-mode.encounter-active .card[data-widget-card] [id^="btn-meds"],
body.os-encounter-mode.encounter-active .card[data-widget-card] [id^="btn-allergies"] {
  display: none !important;
}

/* The section reads as plain text with no visible chrome. The native text
 * cursor signals "you can type here"; nothing else changes on hover or
 * focus. The body also gets a text cursor when the user moves over the
 * blank area below the items, since clicking that area creates a new row. */
body.os-encounter-mode.encounter-active .card .sb-item,
body.os-encounter-mode.encounter-active .card .sb-none,
body.os-encounter-mode.encounter-active .card [id$="-display"],
body.os-encounter-mode.encounter-active .card #hpi-quick-list,
body.os-encounter-mode.encounter-active .card #social-display {
  cursor: text !important;
}

/* No focus outline / no background tint while editing — the row should
 * look indistinguishable from a saved row, with just the system caret. */
body.os-encounter-mode.encounter-active .card .sb-item[contenteditable="true"],
body.os-encounter-mode.encounter-active .card .sb-none[contenteditable="true"] {
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  caret-color: var(--ink) !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Widget mini-action buttons (Add · Download · N/A).
 * Generated centrally by widget-chrome.js as .widget-action-btn so every
 * widget header uses the same tokenized button treatment.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-action-btn,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-add-btn,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-download-btn,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-na-btn,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .widget-action-btn,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .widget-add-btn,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .widget-download-btn {
  box-sizing: border-box !important;
  height: var(--widget-action-btn-h) !important;
  min-width: var(--widget-action-btn-min-w) !important;
  width: auto !important;
  border: 1px solid var(--widget-action-btn-border) !important;
  background: var(--widget-action-btn-bg) !important;
  color: var(--widget-action-btn-color) !important;
  border-radius: var(--widget-action-btn-radius) !important;
  padding: 0 var(--widget-action-btn-pad-x) !important;
  font-family: var(--widget-action-btn-font) !important;
  font-size: var(--widget-action-btn-size) !important;
  font-weight: var(--widget-action-btn-weight) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease) !important;
}

body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-action-btn:hover,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-add-btn:hover,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-download-btn:hover,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-na-btn:hover,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .widget-action-btn:hover,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .widget-add-btn:hover,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .widget-download-btn:hover {
  border-color: var(--widget-action-btn-border-hover) !important;
  background: var(--widget-action-btn-bg-hover) !important;
  color: var(--widget-action-btn-color) !important;
}

body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-na-btn,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .assessment-ocular-conditions-control,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .ap-control-btn {
  font-family: var(--widget-action-na-font) !important;
  font-size: var(--widget-action-na-size) !important;
  font-weight: var(--widget-action-na-weight) !important;
  letter-spacing: var(--widget-action-na-tracking) !important;
  line-height: var(--widget-action-na-line-height) !important;
}

/* The A&P "Problem List" opener mirrors the canonical N/A template above (it carries
 * .widget-action-btn but deliberately NOT .widget-na-btn — widget-chrome resolves the
 * real markNA toggle by that class in the same header). Its label is a phrase, so
 * uppercase it here; the real N/A button's text is already literal uppercase. */
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .assessment-ocular-conditions-control,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .ap-control-btn {
  text-transform: uppercase !important;
}

body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-action-btn svg,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-download-btn svg,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .widget-action-btn svg,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .widget-download-btn svg {
  width: var(--widget-action-btn-icon-size) !important;
  height: var(--widget-action-btn-icon-size) !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Investigations add menu and selected-test widgets.
 * Uses the same flat token language as the Physical Examination add-on area. */
body.os-encounter-mode .investigations-addon-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  min-width: 220px;
  max-width: 280px;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px;
  border: 0.5px solid var(--border-md);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.os-encounter-mode .investigations-addon-menu .addon-btn {
  justify-content: flex-start;
  min-height: 26px;
  box-shadow: none;
}

body.os-encounter-mode .investigations-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px 34px;
  align-items: start;
  padding: 18px 18px 8px;
}

body.os-encounter-mode .investigations-addon-grid:empty::after {
  content: "Press + to add Humphrey Visual Field, OCT, IVFA, B-scan, or other investigations.";
  display: block;
  grid-column: 1 / -1;
  min-height: 120px;
  padding: 42px 18px;
  border: 1px dashed color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, rgba(15, 29, 48, 0.018) 0 6px, transparent 6px 12px);
  color: var(--text-faint);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

body.os-encounter-mode .investigation-addon-widget {
  position: relative;
  min-width: 0;
  padding: 0 18px 6px;
  background: transparent;
}

body.os-encounter-mode .investigation-addon-title,
body.os-encounter-mode .investigation-addon-row-label {
  color: var(--physical-exam-heading-color, var(--muted));
  font-family: var(--mono);
  font-size: var(--physical-exam-heading-size, 13px);
  font-weight: 700;
  letter-spacing: var(--physical-exam-heading-tracking, 0.18em);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

body.os-encounter-mode .investigation-addon-title {
  margin-bottom: 16px;
}

body.os-encounter-mode .investigation-addon-row + .investigation-addon-row {
  margin-top: 16px;
}

body.os-encounter-mode .investigation-addon-row-label {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

body.os-encounter-mode .investigation-addon-eye-pair {
  display: inline-grid;
  grid-template-columns: minmax(72px, max-content) 1px minmax(72px, max-content);
  gap: 16px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

body.os-encounter-mode .investigation-addon-divider {
  display: block;
  width: 1px;
  height: 32px;
  background: color-mix(in srgb, var(--ink) 13%, transparent);
}

body.os-encounter-mode .investigation-addon-eye-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

body.os-encounter-mode .inv-generic-value {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--physical-exam-editable-blue);
  cursor: pointer;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  padding: 0;
}

body.os-encounter-mode .inv-generic-value:hover,
body.os-encounter-mode .inv-generic-value:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
  outline: none;
}

body.os-encounter-mode .inv-generic-unit {
  color: var(--physical-exam-unit-color, var(--text-muted));
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
}

body.os-encounter-mode .inv-generic-input {
  width: 80px;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--physical-exam-editable-blue);
  border-radius: 0;
  background: transparent;
  color: var(--physical-exam-editable-blue);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  text-align: center;
  outline: none;
}

body.os-encounter-mode .inv-generic-interp-input {
  width: 130px;
}

body.os-encounter-mode .investigation-addon-remove {
  position: absolute;
  top: -6px;
  right: 0;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--physical-exam-heading-color, var(--muted));
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-na-btn.active,
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .widget-na-btn[aria-pressed="true"],
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card > .card-hdr:first-child .assessment-ocular-conditions-control[aria-expanded="true"],
body.os-encounter-mode.encounter-active .exam-grid.general-consult-grid > .card .ap-section-hdr .ap-control-btn[aria-expanded="true"] {
  background: var(--widget-action-btn-color) !important;
  color: var(--widget-action-btn-color-active) !important;
  border-color: var(--widget-action-btn-color) !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Directory search input inside widget cards.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode .card .widget-directory-input {
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 10px !important;
  height: 30px !important;
  box-shadow: none !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
}

body.os-encounter-mode .card .widget-directory-input::placeholder {
  color: var(--faint) !important;
  font-style: italic !important;
}

body.os-encounter-mode .card .widget-directory-input:focus {
  border-color: var(--accent) !important;
  background: #fff !important;
  box-shadow: var(--os-ring-focus) !important;
  outline: none !important;
}

/* Hide list-numbering badges — blueprint history items are bulleted, not numbered. */
body.os-encounter-mode .history-list-region .sb-item-num {
  display: none !important;
}

/* The legacy "× remove" button on each saved item is hidden in display
 * mode, but reappears as a small subtle affordance while the section is
 * actively being edited (any contenteditable row in the same display). */
body.os-encounter-mode .history-list-region .sb-item-remove,
body.os-encounter-mode [id$="-display"] .sb-item-remove {
  display: none !important;
}

/* #assessment-display is excluded: saved A&P diagnosis rows are display-only
 * (ap-diagnosis-delete-sync F2) — the renderer no longer emits × there, and this
 * :not() keeps the generic reveal from resurrecting one if a row ever carries it. */
body.os-encounter-mode [id$="-display"]:not(#assessment-display):has([contenteditable="true"]) .sb-item-remove,
body.os-encounter-mode #hpi-quick-list:has([contenteditable="true"]) .sb-item-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease) !important;
}

body.os-encounter-mode [id$="-display"]:has([contenteditable="true"]) .sb-item-remove:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  color: var(--ink) !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Previous-notes table — paper-on-paper table with mono eyebrow headers.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode .os-note-table-wrap {
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface) !important;
  box-shadow: var(--os-shadow-soft) !important;
}

body.os-encounter-mode .os-note-table th {
  background: color-mix(in srgb, var(--ink) 3%, var(--surface)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent) !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  padding: 14px 14px !important;
}

body.os-encounter-mode .os-note-table td {
  border-bottom: 1px solid var(--line-soft) !important;
  padding: 14px !important;
  font-size: var(--t-base) !important;
  color: var(--ink) !important;
}

body.os-encounter-mode .os-note-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)) !important;
}

body.os-encounter-mode .os-note-inbox h2 {
  font-family: var(--display) !important;
  font-size: var(--t-md) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
}

body.os-encounter-mode .os-note-open {
  color: var(--accent) !important;
  font-weight: 600 !important;
  font-size: var(--t-base) !important;
}

body.os-encounter-mode .os-note-open:before {
  color: var(--faint) !important;
}

body.os-encounter-mode .os-note-preview-grid {
  width: min(1800px, calc(100vw - 72px)) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

body.os-encounter-mode .os-note-preview-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  width: 100% !important;
}

body.os-encounter-mode .os-note-card {
  width: min(980px, calc(100vw - 112px)) !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

body.os-encounter-mode .os-note-preview-layout .os-note-card {
  width: 100% !important;
  margin: 0 !important;
}

body.os-encounter-mode .os-note-side-rail {
  display: grid !important;
  grid-template-rows: repeat(3, minmax(150px, 1fr)) !important;
  gap: 18px !important;
  min-height: 0 !important;
}

body.os-encounter-mode .os-note-side-card {
  min-height: 150px !important;
  overflow: hidden !important;
}

body.os-encounter-mode .os-note-side-card header {
  height: var(--widget-header-min-h) !important;
  background: var(--exam-card-header-bg, var(--os-enc-banner-bg, #e5ddcf)) !important;
  border-bottom: 1px solid var(--os-enc-banner-border, var(--widget-header-border)) !important;
}

body.os-encounter-mode .os-note-card-header {
  height: var(--widget-header-min-h) !important;
  justify-content: space-between !important;
  padding: 0 22px !important;
  background: var(--exam-card-header-bg, var(--os-enc-banner-bg, #e5ddcf)) !important;
  border-bottom: 1px solid var(--os-enc-banner-border, var(--widget-header-border)) !important;
}

body.os-encounter-mode .os-note-card-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body.os-encounter-mode .os-note-card-body {
  min-height: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

body.os-encounter-mode .os-note-card-footer {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-height: var(--widget-footer-min-h) !important;
  padding: var(--widget-footer-pad) !important;
  border-top: 1px solid var(--os-enc-banner-border, var(--widget-footer-border)) !important;
  background: var(--exam-card-footer-bg, var(--os-enc-banner-bg, #e5ddcf)) !important;
}

body.os-encounter-mode .os-note-preview-shell {
  min-height: 0 !important;
  height: 100% !important;
  padding: 28px !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    #fff !important;
  background-size: 44px 44px !important;
}

body.os-encounter-mode .os-note-preview-shell.os-note-preview-shell-populated {
  padding: 0 !important;
  background: #fff !important;
}

/* Previous Notes split view: document viewer + Ophthalmology/Other note lists. */
body.os-encounter-mode .os-prev-notes-rail {
  grid-template-rows: minmax(180px, 1fr) minmax(180px, 1fr) !important;
}
body.os-encounter-mode .os-prev-note-viewer {
  height: 100% !important;
  min-height: 60vh !important;
  background: #fff !important;
}
body.os-encounter-mode .os-prev-note-frame {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 60vh !important;
  border: 0 !important;
  background: #fff !important;
}
body.os-encounter-mode .os-prev-note-nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
body.os-encounter-mode .os-prev-note-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
body.os-encounter-mode .os-prev-note-arrow[disabled] {
  opacity: 0.4 !important;
  cursor: default !important;
}
body.os-encounter-mode .os-prev-note-counter {
  min-width: 52px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: color-mix(in srgb, var(--ink) 62%, transparent) !important;
}
body.os-encounter-mode .os-prev-note-listbody {
  padding: 8px !important;
  overflow: auto !important;
}
body.os-encounter-mode .os-prev-note-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
body.os-encounter-mode .os-prev-note-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  text-align: left !important;
  padding: 8px 10px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  cursor: pointer !important;
}
body.os-encounter-mode .os-prev-note-item:hover {
  background: #fff !important;
  border-color: color-mix(in srgb, var(--ink) 24%, transparent) !important;
}
body.os-encounter-mode .os-prev-note-item.is-active {
  background: #b5512f !important;
  border-color: #b5512f !important;
  color: #fff !important;
}
body.os-encounter-mode .os-prev-note-item.is-active .os-prev-note-item-type,
body.os-encounter-mode .os-prev-note-item.is-active .os-prev-note-item-provider {
  color: rgba(255, 255, 255, 0.85) !important;
}
body.os-encounter-mode .os-prev-note-item-date {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
body.os-encounter-mode .os-prev-note-item-type {
  font-size: 13px !important;
  font-weight: 700 !important;
}
body.os-encounter-mode .os-prev-note-item-provider {
  font-size: 12px !important;
  color: color-mix(in srgb, var(--ink) 60%, transparent) !important;
}
body.os-encounter-mode .os-prev-note-empty {
  padding: 12px !important;
}

body.os-encounter-mode .os-note-action {
  position: static !important;
  z-index: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 8px 14px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.92) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(31,27,22,0.04), 0 10px 20px -16px rgba(31,27,22,0.20) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

body.os-encounter-mode .os-note-action svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.os-encounter-mode .os-note-action:hover,
body.os-encounter-mode .os-note-action:focus-visible {
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  outline: none !important;
}

body.os-encounter-mode .os-note-preview-paper {
  min-height: 520px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

body.os-encounter-mode .os-note-preview-paper.os-note-preview-populated {
  min-height: 0 !important;
  display: block !important;
}

body.os-encounter-mode .os-note-preview-paper[contenteditable="true"] {
  cursor: text !important;
  outline: none !important;
}

body.os-encounter-mode .os-note-preview-paper[contenteditable="true"]:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent) !important;
}

body.os-encounter-mode .os-note-preview-paper .os-note-preview {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.os-encounter-mode .os-note-preview-empty {
  align-self: center !important;
  max-width: 500px !important;
  text-align: center !important;
  color: var(--text-muted) !important;
}

body.os-encounter-mode .os-note-preview-empty-title {
  margin-bottom: 12px !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

body.os-encounter-mode .os-note-preview-empty p {
  margin: 0 !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Encounter Context JSON / note-preview code blocks.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode .os-context-json {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--mono) !important;
}

body.os-encounter-mode #os-mini-note-preview.os-note-preview-json {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--mono) !important;
}

body.os-encounter-mode .os-field span {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  color: var(--muted) !important;
}

body.os-encounter-mode .os-field textarea {
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

body.os-encounter-mode .os-field textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--os-ring-focus) !important;
  outline: none !important;
}

body.os-encounter-mode .os-actions button {
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-radius: var(--r-pill) !important;
  padding: 10px 18px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) !important;
}

body.os-encounter-mode .os-actions button:hover {
  background: color-mix(in srgb, var(--ink) 5%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--ink) 35%, transparent) !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Read-gap callout — soft danger surface.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode .os-read-gaps {
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent) !important;
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-radius: var(--r-sm) !important;
}

body.os-encounter-mode.encounter-active .card.assessment-card .assessment-plan-free-text {
  background: transparent !important;
  border-color: transparent !important;
  color: #1A2230 !important;
  font-weight: 500 !important;
  text-align: left !important;
}

body.os-encounter-mode.encounter-active .card.assessment-card .assessment-plan-domain:hover .assessment-plan-free-text,
body.os-encounter-mode.encounter-active .card.assessment-card .assessment-plan-free-text:hover {
  background-color: #FAF6EC !important;
  border-top-color: rgba(26,34,48,0.16) !important;
  border-right-color: rgba(26,34,48,0.16) !important;
  border-bottom-color: rgba(26,34,48,0.16) !important;
  border-left-color: rgba(26,34,48,0.16) !important;
}

body.os-encounter-mode.encounter-active .card.assessment-card .assessment-plan-free-text:focus {
  background-color: #FFFFFF !important;
  border-top-color: #1A2230 !important;
  border-right-color: #1A2230 !important;
  border-bottom-color: #1A2230 !important;
  border-left-color: #1A2230 !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Note view modal — readable serif body on warm paper.
 * ──────────────────────────────────────────────────────────────────────── */

body.os-encounter-mode #note-view-modal-body {
  background: var(--surface) !important;
  font-family: var(--display) !important;
}

body.os-encounter-mode .note-view-document-frame {
  min-height: 62vh !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly {
  padding: 14px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  justify-content: center !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-modal-card {
  display: grid !important;
  grid-template-rows: 42px minmax(0, 1fr) !important;
  width: min(1680px, calc(100vw - 28px)) !important;
  height: calc(100vh - 28px) !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-modal-hdr {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px minmax(80px, max-content) 34px 34px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 0 !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly #note-view-modal-title {
  grid-column: 3 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  box-shadow: 0 2px 10px rgba(31, 27, 22, 0.12) !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .workspace-card-viewer-note-nav {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--accent) !important;
  font-size: 24px !important;
  box-shadow: 0 2px 10px rgba(31, 27, 22, 0.12) !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .workspace-card-viewer-note-nav-prev {
  grid-column: 2 !important;
  justify-self: end !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .workspace-card-viewer-note-nav-next {
  grid-column: 4 !important;
  justify-self: start !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-modal-close.workspace-card-viewer-close {
  grid-column: 5 !important;
  justify-self: end !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 2px 10px rgba(31, 27, 22, 0.12) !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-modal-close.workspace-card-viewer-close::before {
  background: var(--accent) !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly #note-view-modal-body {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-document-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-reader {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background: #252525 !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-rail {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 8px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #1f1f1f !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-layout-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-layout-btn[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.86) !important;
  background: #fff !important;
  color: var(--accent) !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-layout-btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-scroll {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  background: #252525 !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-pages {
  display: grid !important;
  align-items: start !important;
  gap: 20px !important;
  min-width: 0 !important;
  padding: 14px !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-pages[data-pdf-layout="1"] {
  grid-template-columns: minmax(0, min(920px, 100%)) !important;
  justify-content: center !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-pages[data-pdf-layout="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-pages[data-pdf-layout="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-page {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-page-canvas {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.42), 0 10px 34px rgba(0, 0, 0, 0.24) !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-page-label {
  margin-top: 8px !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-status {
  padding: 18px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
}

#note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-status-error {
  color: #fff !important;
}

@media (max-width: 1100px) {
  #note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-pages {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
  }

  #note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-reader {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  #note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-rail {
    padding: 10px 5px !important;
  }

  #note-view-modal-overlay.note-view-modal-overlay-readonly .note-view-pdf-layout-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }
}

body.os-encounter-mode .note-view-os-status-pill {
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent) !important;
  background: var(--success-soft) !important;
  color: var(--success) !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Responsive collapse — single-column at narrow widths.
 * ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  body.os-encounter-mode .os-topbar {
    padding: 16px 24px !important;
  }
  body.os-encounter-mode .os-logo .os-eye {
    width: 48px !important;
    height: 48px !important;
  }
  body.os-encounter-mode .os-logo .wordmark {
    font-size: 28px !important;
  }
  body.os-encounter-mode .os-patient-banner {
    padding: 20px 24px 14px !important;
  }
  body.os-encounter-mode .os-encounter-tabs {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.os-encounter-mode .os-workspace {
    padding: 24px 24px 60px !important;
  }
  body.os-encounter-mode.encounter-active[data-encounter-tab="history"] .exam-grid.general-consult-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  body.os-encounter-mode .os-note-preview-grid {
    width: 100% !important;
  }
  body.os-encounter-mode .os-note-preview-layout {
    grid-template-columns: 1fr !important;
  }
  body.os-encounter-mode .os-note-side-rail {
    grid-template-rows: none !important;
  }
}
