:root {
  color-scheme: light;
  --background: #f4f7fb;
  --surface: #ffffff;
  --text: #172033;
  --muted: #5b6475;
  --border: #cbd5e1;
  --accent: #1459a8;
  --accent-hover: #0f447f;
  --focus: #f59e0b;
  --error-bg: #fef2f2;
  --error-border: #dc2626;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}

.site-brand {
  font-size: 2rem;
  font-weight: 700;
}

.content-container {
  width: min(100% - 2rem, 56rem);
  margin: 0 auto;
}

main.content-container {
  padding: 1.5rem 0 2rem;
}

h1,
h2,
p {
  margin-top: 0;
}

.notice,
.panel {
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  background: var(--surface);
}

.notice {
  margin-bottom: 0;
  padding: 0.875rem 1rem;
  color: var(--muted);
}

.panel {
  padding: 1rem;
}

.form-guidance {
  color: var(--muted);
}

form {
  display: grid;
  gap: 1rem;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

legend {
  padding: 0 0.35rem;
  font-weight: 700;
}

.form-grid,
.checkbox-grid {
  display: grid;
  gap: 1rem;
}

.field-group {
  display: grid;
  gap: 0.4rem;
}

#pregnancy-breastfeeding-field[hidden] {
  display: none;
}

label {
  font-weight: 600;
}

input,
select,
button {
  min-height: 2.75rem;
  font: inherit;
}

input,
select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: #ffffff;
  color: var(--text);
  padding: 0.6rem 0.75rem;
}

input[type="checkbox"] {
  width: 1.25rem;
  min-height: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--accent);
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

button {
  border: 0;
  border-radius: 0.7rem;
  background: var(--accent);
  color: #ffffff;
  cursor: pointer;
  font-weight: 700;
  padding: 0.75rem 1rem;
}

button:hover {
  background: var(--accent-hover);
}

button:disabled {
  background: #94a3b8;
  color: #f8fafc;
  cursor: not-allowed;
}

.error-container {
  border: 1px solid var(--error-border);
  border-radius: 0.75rem;
  background: var(--error-bg);
  color: #7f1d1d;
  padding: 0.75rem 1rem;
}

.auth-container {
  max-width: 36rem;
}

.terms-container {
  max-width: 44rem;
}

.terms-content {
  margin: 1.25rem 0;
  padding: 1rem;
  border-left: 0.25rem solid var(--accent);
  background: #f8fafc;
}

.terms-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.secondary-button {
  border: 1px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
}

.secondary-button:hover {
  background: #e8f0fa;
}

.auth-container form {
  margin-top: 1rem;
}

.field-error {
  margin: 0;
  color: #7f1d1d;
  font-weight: 600;
}

.success-message {
  border: 1px solid #15803d;
  border-radius: 0.75rem;
  background: #f0fdf4;
  color: #14532d;
  padding: 0.75rem 1rem;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (min-width: 42rem) {
  .panel {
    padding: 1.5rem;
  }

  .form-grid,
  .checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  button {
    justify-self: start;
    min-width: 14rem;
  }
}

.results-heading {
  margin-bottom: 1rem;
  font-size: clamp(1.35rem, 5vw, 1.85rem);
}

/* A scenario-wide restriction (see app/global_restrictions.py) that blocks
   every medication in every group at once — shown exactly once, above the
   (all non-selectable) medication cards it explains. Styled distinctly from
   .patient-advisory: this is a blocking classification, not an ordinary
   informational/caution note. */
.global-restrictions {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.global-restriction {
  border-radius: 0.7rem;
  border-left: 0.35rem solid #b91c1c;
  background: #fef2f2;
  color: #7f1d1d;
  padding: 0.65rem 0.85rem;
  font-weight: 600;
  overflow-wrap: anywhere;
  margin: 0;
}

#results-view:focus {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.patient-summary {
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: #f8fafc;
  padding: 1rem;
}

.patient-summary h3,
.result-group h3 {
  margin-bottom: 0.75rem;
}

.patient-summary dl {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  margin: 0;
}

.patient-summary dt {
  color: var(--muted);
  font-weight: 700;
}

.patient-summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.result-group {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.medication-card {
  display: grid;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface);
  padding: 1rem;
  overflow-wrap: anywhere;
}

.medication-heading {
  margin: 0;
  font-size: 1.1rem;
}

.wsicon { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.wsicon-category { position: relative; }
.wsicon-control {
  color: var(--accent); font-weight: 700; cursor: help;
}
.wsicon-control--empty { border-color: var(--border); color: var(--muted); cursor: default; opacity: 0.55; }
.wsicon-panel { max-width: 36rem; }
.wsicon-sources { display: block; font-size: 0.85em; overflow-wrap: anywhere; }
.wsicon-panel ul { margin: 0; padding-left: 1.2rem; }

.status-badge {
  justify-self: start;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-weight: 800;
  line-height: 1.2;
}

.status-badge--available {
  background: #ecfdf5;
  color: #065f46;
}

.status-badge--caution {
  background: #fffbeb;
  color: #92400e;
}

.status-badge--contraindicated {
  background: #f1f5f9;
  color: #334155;
}

.status-badge--insufficient-data {
  background: #eff6ff;
  color: #1e40af;
}

/* Application-support limitation, not a clinical contraindication — see
   app/supported_population.py. Deliberately neutral (slate), not the red
   used for contraindicated/system_error. */
.status-badge--not-supported {
  background: #f1f5f9;
  color: #334155;
}

.status-badge--system-error {
  background: #fef2f2;
  color: #991b1b;
}

.reasons-list {
  margin: 0;
  padding-left: 1.3rem;
}

.reasons-list li + li {
  margin-top: 0.35rem;
}

.prescription-lines {
  display: grid;
  gap: 0.5rem;
}

.prescription-line {
  margin: 0;
  border-left: 0.25rem solid var(--accent);
  border-radius: 0.45rem;
  background: #f8fafc;
  padding: 0.65rem 0.75rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

form[aria-busy="true"] {
  opacity: 0.88;
}

form[aria-busy="true"] button {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

@media (max-width: 30rem) {
  .patient-summary dl {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .patient-summary dd + dt {
    margin-top: 0.6rem;
  }

  .medication-card {
    padding: 0.85rem;
  }
}

.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.secondary-button,
.remove-selected-button {
  border: 1px solid var(--accent);
  background: #ffffff;
  color: var(--accent);
}

.secondary-button:hover,
.remove-selected-button:hover {
  background: #eff6ff;
  color: var(--accent-hover);
}

.selection-control {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.selection-control label {
  overflow-wrap: anywhere;
}

.prescription-line-label {
  font-weight: 700;
}

.selection-control input:disabled,
.selection-control input:disabled + label {
  cursor: not-allowed;
  opacity: 0.58;
}

.selected-prescription-panel {
  position: sticky;
  top: 0.75rem;
  z-index: 1;
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  border: 2px solid var(--accent);
  border-radius: 0.9rem;
  background: #f8fbff;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12);
  padding: 1rem;
}

.selected-prescription-panel[hidden] {
  display: none;
}

.selected-prescription-panel h2 {
  margin-bottom: 0;
}

.selected-prescription-items {
  display: grid;
  gap: 0.75rem;
}

.selected-medicine-item {
  display: grid;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: #ffffff;
  padding: 0.85rem;
}

.selected-medicine-item h3 {
  margin: 0;
  font-size: 1rem;
}

.selected-medicine-prescription-line {
  font-weight: 700;
}

.selected-prescription-lines {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding-left: 1.2rem;
}

.selected-prescription-lines li {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.selected-prescription-text {
  max-height: 14rem;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: #ffffff;
  color: var(--text);
  padding: 0.85rem;
  font: inherit;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.copy-status {
  min-height: 1.5rem;
  color: var(--muted);
  font-weight: 700;
}

.medication-card--available {
  border-color: var(--border);
  background: #ffffff;
}

.medication-card--caution {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: inset 0.35rem 0 0 #f59e0b;
}

.medication-card--contraindicated {
  border-color: #94a3b8;
  background: #f1f5f9;
  box-shadow: inset 0.35rem 0 0 #64748b;
}

.medication-card--insufficient-data {
  border-color: #7c8da6;
  background: #eef4fb;
  box-shadow: inset 0.35rem 0 0 #3b647f;
}

.medication-card--not-supported {
  border-color: #94a3b8;
  background: #f8fafc;
  box-shadow: inset 0.35rem 0 0 #64748b;
}

.medication-card--system-error {
  border-color: var(--error-border);
  background: #fef2f2;
  box-shadow: inset 0.35rem 0 0 var(--error-border);
}

@media (max-width: 30rem) {
  .results-toolbar {
    justify-content: stretch;
  }

  .results-toolbar button,
  .selected-prescription-panel button {
    width: 100%;
  }

  .selected-prescription-panel {
    top: 0.5rem;
    padding: 0.85rem;
  }
}

.landing-page {
  padding-top: 2rem;
}

.scenario-selection {
  display: grid;
  gap: 1rem;
}

.scenario-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.scenario-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  padding: 0.75rem 1rem;
  text-decoration: none;
}

.scenario-link:hover {
  background: var(--accent-hover);
}

.back-to-scenarios {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: var(--accent);
  font-weight: 700;
}

.urti-header {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.urti-header h2,
.scenario-selection h2 {
  margin-bottom: 0;
}

.additional-details {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: #f8fafc;
  padding: 0.85rem;
}

.additional-details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
}

.additional-details[open] {
  display: grid;
  gap: 1rem;
}

.additional-details[open] summary {
  margin-bottom: 0.25rem;
}

.optional-field-guidance {
  margin-bottom: 0.75rem;
  color: var(--muted);
}

.safe-fallback-message,
noscript .safe-fallback-message {
  border: 1px solid var(--focus);
  border-radius: 0.75rem;
  background: #fffbeb;
  color: #78350f;
  font-weight: 700;
  padding: 0.75rem 1rem;
}

.patient-workspace,
.results-panel {
  display: grid;
  gap: 1rem;
}

.results-panel {
  margin-top: 1.25rem;
}

.workspace-header {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.workspace-header h2,
.scenario-workspace h2 {
  margin-bottom: 0;
}

.scenario-workspace {
  display: grid;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

/* The HTML hidden state is the final visibility authority. These workspaces also
   have explicit layout displays, so relying on the user-agent rule alone lets a
   later author rule make hidden clinical controls interactive. */
.scenario-workspace[hidden],
.drug-workspace[hidden],
.results-panel[hidden] {
  display: none !important;
}

.choose-drug-panel { margin-top: 1.5rem; }
.drug-search-combobox { position: relative; max-width: 42rem; }
.drug-search-controls { display: flex; gap: .35rem; align-items: stretch; }
.drug-search-controls input { min-width: 0; flex: 1; }
#drug-search-toggle { min-width: 2.75rem; min-height: 2.75rem; margin: 0; }
#drug-search-input { width: 100%; }
.drug-search-status { min-height: 1.5rem; color: var(--muted-color, #4b5563); }
.drug-search-results { margin: 0; padding: .25rem; list-style: none; border: 1px solid #9ca3af; border-radius: .35rem; background: #fff; box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); max-height: min(18rem, 45vh); overflow-y: auto; overscroll-behavior: contain; }
.drug-search-option { padding: .65rem .75rem; cursor: pointer; border-radius: .25rem; }
.drug-search-option[aria-selected="true"] { background: #e0f2fe; outline: 2px solid #0369a1; }
.drug-detail-workspace { margin-top: 1.5rem; }
.drug-detail-header { margin-top: 1rem; }
.drug-reference-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; overflow-wrap: anywhere; }
.drug-reference-section { border-top: 1px solid #d1d5db; padding-top: .75rem; }
.drug-reference-list { padding-left: 1.25rem; }
.drug-reference-branch { margin-bottom: .6rem; }
.drug-patient-result { border: 2px solid #64748b; border-radius: .4rem; padding: 1rem; }
.drug-detail-error { color: #991b1b; font-weight: 600; }

.scenario-button-grid {
  display: grid;
  gap: 0.75rem;
}

.scenario-selection-header,
.care-setting-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.scenario-selection-header { justify-content: space-between; }

.care-setting-button--clinic { border-color: #15803d; color: #166534; background: #f0fdf4; }
.care-setting-button--hospital { border-color: #b91c1c; color: #991b1b; background: #fef2f2; }
.care-setting-button--clinic[aria-pressed="true"] { color: #fff; background: #166534; }
.care-setting-button--hospital[aria-pressed="true"] { color: #fff; background: #991b1b; }

.scenario-button {
  justify-self: stretch;
}

.scenario-button[aria-pressed="true"] {
  background: var(--accent-hover);
  box-shadow: inset 0 0 0 3px #bfdbfe;
}

.scenario-panels {
  display: grid;
  gap: 1rem;
}

.scenario-panel[hidden] {
  display: none;
}

.scenario-panel {
  min-width: 0;
}

@media (min-width: 42rem) {
  .scenario-button-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scenario-button {
    justify-self: stretch;
  }
}

.scenario-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.scenario-button[aria-pressed="true"] {
  background: var(--accent-hover);
  box-shadow: 0 0 0 3px rgba(20, 89, 168, 0.2);
}

.scenario-panels {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.scenario-panel[hidden] {
  display: none;
}

.demo-scenario-fields {
  background: #fff7ed;
  border-color: #fdba74;
}

.infection-subsection { margin-block: 1rem; padding-inline-start: .75rem; border-inline-start: 3px solid var(--border-color, #d8dee8); }
.medication-card--placeholder { border-style: dashed; }
.infection-placeholder-role { text-transform: capitalize; font-weight: 600; margin-block: .25rem; }
.infection-placeholder-status { color: #596579; margin-block: .25rem; }

.synthetic-warning {
  border: 1px solid #fb923c;
  border-radius: 0.6rem;
  background: #ffedd5;
  color: #7c2d12;
  padding: 0.65rem 0.75rem;
}

.demo-field-layout {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 42rem) {
  .demo-field-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
}

.shared-patient-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
}

.master-patient-summary {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  background: #f8fafc;
}

.master-patient-summary[hidden] {
  display: none;
}

.master-patient-summary h2 {
  margin-bottom: 0;
}

.patient-level-card {
  box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08);
}

.selected-medicine-scenario {
  margin: -0.35rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.patient-workspace .selected-prescription-panel {
  margin-bottom: 0;
}

.patient-workspace .scenario-workspace {
  margin-top: 0.25rem;
}

@media (max-width: 30rem) {
  .shared-patient-actions {
    justify-content: stretch;
  }

  .shared-patient-actions button {
    width: 100%;
  }
}

.field-format-hint {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.gestational-age-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.gestational-age-inputs input {
  width: 6rem;
}

#pregnancy-not-sure-fields,
#pregnancy-pregnant-fields {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

#pregnancy-not-sure-fields[hidden],
#pregnancy-pregnant-fields[hidden] {
  display: none;
}

.patient-advisories:empty,
.patient-advisories-list:empty {
  display: none;
}

.patient-advisories-list {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 0.25rem;
  padding: 0;
  list-style: none;
}

.patient-advisory {
  border-radius: 0.7rem;
  border-left: 0.35rem solid var(--accent);
  background: #eff6ff;
  color: var(--text);
  padding: 0.65rem 0.85rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.patient-advisory--caution {
  border-left-color: #f59e0b;
  background: #fffbeb;
  color: #78350f;
}

.patient-advisory--information {
  border-left-color: #1459a8;
  background: #eff6ff;
  color: #1e3a8a;
}

.site-footer {
  color: #526070;
  font-size: 0.8rem;
  padding: 0.75rem 0 1rem;
  text-align: center;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.header-row h1 {
  margin: 0;
}

.header-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.source-toggle input { width: auto; }

.login-button,
.header-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: 0.7rem;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  white-space: nowrap;
}

.login-button:hover,
.header-link:hover {
  background: var(--accent-hover);
}

@media (max-width: 30rem) {
  .header-row {
    justify-content: flex-start;
  }

  .login-button,
  .header-link {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Source-information (i) control, shown beside any drug's canonical
   prescription line (entirely drug-agnostic). A transient hover/focus
   tooltip, not a persistent click-to-toggle disclosure: the "(i)" affordance
   is a plain focusable <span> (never a <button>, never <details>/<summary>)
   whose associated role="tooltip" panel is shown only while the pointer
   hovers it or it holds keyboard focus, and hidden on pointer leave, blur,
   or Escape (see buildSourceInformationDisclosure in app.js). */
.selection-control {
  flex-wrap: wrap;
}

.source-information {
  position: relative;
  display: inline-block;
  font-size: 0.85rem;
}

.medication-disclosures {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  flex-wrap: nowrap;
}

/* Mouse-hover-only affordance (see app.js's
   buildSourceInformationDisclosure). It is a non-interactive, non-focusable
   <span>, so there is deliberately no :focus-visible, :active, or
   touch/pressed state styling here — styling one would advertise an
   interaction the affordance does not support. */
.source-information-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 800;
  cursor: default;
}

.source-information-tooltip {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  display: grid;
  gap: 0.5rem;
  width: max-content;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  color: var(--text);
  /* The panel holds only static text (no links, buttons or fields), and it
     opens and closes from its trigger alone (hover, focus, Escape), so it
     never needs pointer input itself. Letting pointer input pass through
     means an open panel, wherever placeSourceTooltip puts it, never blocks
     a click on a control it does not belong to. Screen readers and the
     keyboard are unaffected: the role="tooltip" panel stays in the
     accessibility tree through aria-describedby. */
  pointer-events: none;
}

.source-information-tooltip--above {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

/* A note taller than the space on either side of its trigger is capped by
   placeSourceTooltip (inline max-height) and scrolls inside its own box. The
   trigger keeps focus and hover and forwards arrow, Page and wheel input to
   it (scrollSourceTooltip), so pointer-events: none above still applies. The
   note scrolls only programmatically; scrollSourceTooltip lets input at its
   top or end pass through to the page. */
.source-information-tooltip--scroll {
  overflow-y: auto;
}

.source-information-tooltip[hidden] {
  display: none;
}

.source-information-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.1rem;
}

.source-information-list li {
  overflow-wrap: anywhere;
}

.source-information-name {
  font-weight: 700;
}

.source-information-locator,
.source-information-applies-to {
  margin: 0.15rem 0 0;
  color: var(--muted);
}

.source-information-implementation-note {
  margin: 0;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

@media (max-width: 30rem) {
  .source-information-tooltip {
    left: auto;
    right: 0;
    max-width: min(20rem, calc(100vw - 1.5rem));
  }
}

/* Blocking paediatric renal-data acknowledgement modal (see
   app.js's updateRenalSectionVisibility/acknowledgeRenalPaediatricWarning).
   Rendered with the native <dialog>/showModal() top layer, which already
   supplies a ::backdrop and blocks interaction with the rest of the page. */
#renal-paediatric-modal {
  max-width: 28rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
}

#renal-paediatric-modal::backdrop {
  background: rgba(15, 23, 42, 0.5);
}

#renal-paediatric-modal h2 {
  margin-top: 0;
}

#renal-paediatric-modal-acknowledge {
  margin-top: 0.5rem;
}

.selected-medicine-heading-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.selected-medicine-heading-row h3 {
  margin: 0;
}

/* Inventory page */
.inventory-drug-fieldset {
  margin-bottom: 1rem;
}

.inventory-drug-fieldset legend {
  padding: 0;
}

.inventory-presentation-groups {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--border);
}

.inventory-presentation-groups[hidden] {
  display: none;
}

.inventory-presentation-row {
  display: grid;
  gap: 0.4rem;
  padding: 0.5rem 0;
}

.inventory-preference input { position: absolute; opacity: 0; }
.inventory-preference span { color: #667085; cursor: pointer; font-size: 1.5rem; padding: .25rem; }
.inventory-preference input:checked + span { color: #b7791f; }
.inventory-preference input:focus-visible + span { outline: 3px solid #2563eb; outline-offset: 2px; }
.inventory-preference input:disabled + span { cursor: not-allowed; opacity: .4; }
.inventory-category h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.inventory-price-label { padding-left: 1.5rem; }
.inventory-price-label input { width: min(12rem, 50vw); }
@media (max-width: 30rem) {
  .inventory-presentation-groups { padding-left: 0.75rem; }
}

/* Compact patient subsections use native disclosure behavior without changing form semantics. */
.patient-data-disclosure {
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--surface, #fff);
}

.patient-data-disclosure > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 800;
  padding: 0.7rem 0.85rem;
  touch-action: manipulation;
}

.patient-data-disclosure > summary:focus-visible {
  border-radius: 0.5rem;
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.patient-data-disclosure > fieldset {
  border: 0;
  margin: 0;
  padding: 0 0.85rem 0.85rem;
}

.additional-details > .patient-data-disclosure {
  background: #fff;
}
.missing-input-warning {
  border: 2px solid #b4235a !important;
  background: #fff0f5 !important;
}
.missing-input-warning::before { content: "! "; font-weight: 700; }
.missing-input-warning-text { color: #7a123d; font-weight: 700; margin: .35rem 0; }
/* Unified Scenario / Drug workspace (v2.3 Milestone 7). */
.workspace-shell { position: relative; }
.workspace-selector { position: relative; margin: 1rem 0; }
.workspace-selector-button { font-size: 1.35rem; font-weight: 700; }
.workspace-selector-menu { position: absolute; z-index: 20; display: grid; min-width: 12rem; padding: .35rem; background: #fff; border: 1px solid #64748b; border-radius: .4rem; box-shadow: 0 .25rem .75rem rgb(15 23 42 / 18%); }
.workspace-selector-menu[hidden] { display: none; }
.workspace-selector-menu button:focus-visible, .workspace-selector-button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.clinical-mode-controls { display: flex; justify-content: flex-end; margin-top: 1rem; }
.clinical-mode-panel { margin-top: 1rem; }
#clinical-questions { display: flex; flex-wrap: wrap; gap: .5rem; }
.clinical-question-toggle[aria-pressed="true"] { background: #1d4ed8; color: white; }
.result-group--not-indicated { opacity: .62; background: #f1f5f9; }
.selected-medicine-heading-row { display: flex; align-items: start; gap: .55rem; }
.selected-prescription-inclusion { margin-top: .35rem; flex: 0 0 auto; }
.dose-display-fallback { display: block; color: #475569; margin: .25rem 0 .5rem 1.7rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Preserve the backend instruction block's administration line in every view. */
.prescription-line-label,
.selected-medicine-prescription-line,
.drug-prescription-block {
  white-space: pre-wrap;
}

/* Independent source-defined liver conditions remain readable on small screens. */
#liver-information-fieldset .checkbox-list {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}
#liver-information-fieldset .checkbox-list label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}
#liver-information-fieldset .checkbox-list input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

/* Shared access and administration panels. */
.admin-container { max-width: 56rem; }
.admin-container > .panel + .panel { margin-top: 1rem; }
.auth-container, .terms-container, .admin-container { overflow-wrap: anywhere; }
.access-choices { display: grid; gap: 1rem; }
.access-choices > p { margin-bottom: 0; }
.access-actions, .form-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.access-actions > *, .form-actions > * { flex: 1 1 14rem; }
.panel-navigation { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.panel-navigation a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem .6rem; border-radius: .6rem; }
.panel-navigation a[aria-current="page"] { background: var(--accent); color: var(--surface); font-weight: 700; }
.admin-form { display: grid; gap: 1rem; margin: 1rem 0; }
.admin-form label { display: grid; gap: .35rem; min-width: 0; }
.admin-form label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .65rem; }
.admin-form input[type="checkbox"] { flex-shrink: 0; }
.admin-table-scroll { max-width: 100%; overflow-x: auto; margin: 1rem 0; border: 1px solid var(--border); border-radius: .6rem; }
.admin-table-scroll table { width: 100%; min-width: 40rem; border-collapse: collapse; }
.admin-table-scroll th, .admin-table-scroll td { padding: .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.admin-table-scroll th { background: var(--background); }
.admin-table-scroll .admin-form { min-width: 10rem; }
.auth-container input, .admin-container input, .auth-container select, .admin-container select { min-width: 0; max-width: 100%; }
@media (max-width: 30rem) {
  .access-actions, .form-actions { flex-direction: column; }
  .access-actions > *, .form-actions > * { flex-basis: auto; width: 100%; }
  .admin-form button { width: 100%; }
}