/* EMS Event Medical — Clinical Protocols Volume 1
   Stylesheet v1.0
   Mobile-first, clinical-grade, print-ready
*/

:root {
  /* Brand */
  --ems-black: #000000;
  --ems-yellow: #FFC107;
  --ems-yellow-dim: #c79400;
  --ems-red: #C8102E;
  --ems-gold: #B8860B;
  --white: #FFFFFF;

  /* Scope tiers — aligned to EMS Pharmacology Matrix (5 paramedic tiers + CC Doctor) */
  --scope-emtb-bg: #2E7D32;
  --scope-emtb-fg: #FFFFFF;
  --scope-emta-bg: #E65100;
  --scope-emta-fg: #FFFFFF;
  --scope-p1-bg: #1976D2;
  --scope-p1-fg: #FFFFFF;
  --scope-paranurse-bg: #388E3C;
  --scope-paranurse-fg: #FFFFFF;
  --scope-icp-bg: #C62828;
  --scope-icp-fg: #FFFFFF;
  --scope-ccdoctor-bg: #4A148C;
  --scope-ccdoctor-fg: #FFFFFF;
  --scope-paeds-bg: #FF6FA1;
  --scope-paeds-fg: #000000;
  --scope-mass-bg: #1F4E79;
  --scope-mass-fg: #FFFFFF;

  /* Legacy aliases — kept for any unmigrated references */
  --scope-medic-bg: #E65100;
  --scope-medic-fg: #FFFFFF;
  --scope-paramedic-bg: #388E3C;
  --scope-paramedic-fg: #FFFFFF;
  --scope-icpara-bg: #C62828;
  --scope-icpara-fg: #FFFFFF;
  --scope-critcare-bg: #4A148C;
  --scope-critcare-fg: #FFFFFF;

  /* Body systems */
  --sys-airway: #4FA8E0;
  --sys-cardiac: #C8102E;
  --sys-neuro: #7030A0;
  --sys-trauma: #E8762B;
  --sys-medical: #2E7D32;
  --sys-obsgyn: #D81B60;
  --sys-mental: #00897B;
  --sys-env: #6D4C41;
  --sys-tox: #9CCC2E;
  --sys-proc: #546E7A;
  --sys-paeds: #FF6FA1;
  --sys-mass-gath: #1F4E79;

  /* Utility */
  --alert-red: #B71C1C;
  --warn-amber: #B45309;
  --info-blue: #0D47A1;
  --ok-green: #1B5E20;
  --grey-light: #F5F5F5;
  --grey-med: #D5D5D5;
  --grey-dark: #404040;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.15);

  --sidebar-width: 320px;
  --header-height: 64px;
  --topbar-height: 56px;

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-stack);
  font-size: 16px;
  line-height: 1.5;
  color: #111;
  background: #fafafa;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   APP LAYOUT
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }
  .sidebar { display: none; position: fixed; top: var(--header-height); left: 0; bottom: 0; width: 85%; max-width: 360px; z-index: 100; }
  .sidebar.open { display: flex; }
  .sidebar-overlay { display: none; position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 99; }
  .sidebar-overlay.open { display: block; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.app-header {
  grid-area: header;
  background: var(--ems-black);
  color: var(--ems-yellow);
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: var(--shadow-md);
  z-index: 50;
}

.app-header .menu-toggle {
  display: none;
  background: transparent;
  color: var(--ems-yellow);
  border: 0;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  margin-right: 8px;
}
@media (max-width: 900px) { .app-header .menu-toggle { display: block; } }

.app-header .logo {
  height: 44px;
  width: auto;
  margin-right: 12px;
}

.app-header h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ems-yellow);
  flex: 1;
  letter-spacing: 0.3px;
}
.app-header .subtitle {
  font-weight: 400;
  font-size: 13px;
  color: #ccc;
  display: block;
  margin-top: 2px;
}

.app-header .actions {
  display: flex;
  gap: 8px;
}
.app-header .btn-icon {
  background: transparent;
  color: var(--ems-yellow);
  border: 1px solid var(--ems-yellow-dim);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.app-header .btn-icon:hover { background: var(--ems-yellow-dim); color: var(--ems-black); }

/* 000 SOP button — red emphasis so it stands out for emergencies */
.app-header .btn-icon.btn-sop {
  background: var(--ems-red);
  color: #fff;
  border-color: var(--ems-red);
  font-weight: 700;
}
.app-header .btn-icon.btn-sop:hover {
  background: #a60d24;
  color: #fff;
  border-color: #a60d24;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar {
  grid-area: sidebar;
  background: #fff;
  border-right: 1px solid #ddd;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.search-box {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 12px;
  border-bottom: 1px solid #eee;
  z-index: 10;
}
.search-box input {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--ems-black);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}
.search-box input:focus {
  outline: 0;
  border-color: var(--ems-yellow);
  box-shadow: 0 0 0 3px rgba(255,193,7,0.25);
}

.scope-filter {
  padding: 12px;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scope-pill {
  border: 0;
  border-radius: 99px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.scope-pill.active { opacity: 1; }
.scope-pill[data-scope="EMT_B"] { background: var(--scope-emtb-bg); color: var(--scope-emtb-fg); }
.scope-pill[data-scope="EMT_A"] { background: var(--scope-emta-bg); color: var(--scope-emta-fg); }
.scope-pill[data-scope="P1"] { background: var(--scope-p1-bg); color: var(--scope-p1-fg); }
.scope-pill[data-scope="PARA_NURSE"] { background: var(--scope-paranurse-bg); color: var(--scope-paranurse-fg); }
.scope-pill[data-scope="ICP"] { background: var(--scope-icp-bg); color: var(--scope-icp-fg); }
.scope-pill[data-scope="CC_DOCTOR"] { background: var(--scope-ccdoctor-bg); color: var(--scope-ccdoctor-fg); }

.paeds-toggle {
  padding: 12px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, var(--scope-paeds-bg) 0%, var(--scope-paeds-bg) 6px, #fff 6px);
}
.paeds-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}
.paeds-toggle input { width: 18px; height: 18px; accent-color: var(--scope-paeds-bg); }

.chapter-list {
  list-style: none;
  flex: 1;
}
.chapter {
  border-bottom: 1px solid #f0f0f0;
}
.chapter-header {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ems-black);
  color: var(--ems-yellow);
  border-left: 5px solid var(--ems-yellow);
}
.chapter-header:hover { filter: brightness(1.15); }
.chapter-header .chev { transition: transform 0.15s; }
.chapter.collapsed .chev { transform: rotate(-90deg); }
.chapter.collapsed .protocol-list { display: none; }

.protocol-list { list-style: none; }
.protocol-item {
  padding: 9px 16px 9px 28px;
  font-size: 13.5px;
  cursor: pointer;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.1s;
}
.protocol-item:hover { background: #f6f6f6; }
.protocol-item.active {
  background: #fffbe6;
  border-left-color: var(--ems-yellow);
  font-weight: 600;
}
.protocol-item .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: #888;
  flex-shrink: 0;
}

/* Sidebar tabs (top-level groups) */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
}
.sidebar-tab {
  flex: 1;
  padding: 10px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  background: #f0f0f0;
  border-right: 1px solid #ddd;
}
.sidebar-tab:last-child { border-right: 0; }
.sidebar-tab.active { background: var(--ems-yellow); color: var(--ems-black); }

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
.main {
  grid-area: main;
  overflow-y: auto;
  background: #fafafa;
}

.welcome {
  max-width: 760px;
  margin: 40px auto;
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.welcome h2 {
  color: var(--ems-black);
  background: var(--ems-yellow);
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 22px;
}

.welcome p { margin-bottom: 12px; line-height: 1.6; }

.welcome .legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.welcome .legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  background: #fafafa;
  border-left: 6px solid;
}
.welcome .legend-item .swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.welcome .governance {
  background: #fff8e1;
  border-left: 6px solid var(--warn-amber);
  padding: 16px;
  border-radius: 6px;
  margin: 20px 0;
}

/* ==========================================================================
   PROTOCOL VIEW
   ========================================================================== */
.protocol-view {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* Protocol header — code + title + system band + scope band */
.protocol-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fafafa;
  padding: 16px 16px 0;
}

.protocol-title-row {
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 4px;
}
.protocol-code {
  background: var(--ems-yellow);
  color: var(--ems-black);
  padding: 22px 28px;
  font-weight: 900;
  font-size: 26px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: flex;
  align-items: center;
  min-width: 160px;
  justify-content: center;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  border-right: 3px solid rgba(0,0,0,0.15);
}
.protocol-title {
  background: var(--ems-black);
  color: var(--ems-yellow);
  padding: 16px 20px;
  font-size: 22px;
  font-weight: 700;
  flex: 1;
  display: flex;
  align-items: center;
}

.system-band {
  padding: 8px 20px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.system-band[data-system="CARDIAC"] { background: var(--sys-cardiac); }
.system-band[data-system="AIRWAY"] { background: var(--sys-airway); }
.system-band[data-system="NEURO"] { background: var(--sys-neuro); }
.system-band[data-system="TRAUMA"] { background: var(--sys-trauma); }
.system-band[data-system="MEDICAL"] { background: var(--sys-medical); }
.system-band[data-system="OBSGYN"] { background: var(--sys-obsgyn); }
.system-band[data-system="MENTAL"] { background: var(--sys-mental); }
.system-band[data-system="ENV"] { background: var(--sys-env); }
.system-band[data-system="TOX"] { background: var(--sys-tox); color: #000; }
.system-band[data-system="PROC"] { background: var(--sys-proc); }
.system-band[data-system="PAEDS"] { background: var(--sys-paeds); color: #000; }
.system-band[data-system="MASS_GATH"] { background: var(--sys-mass-gath); }

.scope-band {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 8px;
}
.scope-tier {
  padding: 8px 4px;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  border-right: 1px solid #fff;
  line-height: 1.25;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scope-tier:last-child { border-right: 0; }
.scope-tier.in-scope[data-tier="EMT_B"] { background: var(--scope-emtb-bg); color: var(--scope-emtb-fg); }
.scope-tier.in-scope[data-tier="EMT_A"] { background: var(--scope-emta-bg); color: var(--scope-emta-fg); }
.scope-tier.in-scope[data-tier="P1"] { background: var(--scope-p1-bg); color: var(--scope-p1-fg); }
.scope-tier.in-scope[data-tier="PARA_NURSE"] { background: var(--scope-paranurse-bg); color: var(--scope-paranurse-fg); }
.scope-tier.in-scope[data-tier="ICP"] { background: var(--scope-icp-bg); color: var(--scope-icp-fg); }
.scope-tier.in-scope[data-tier="CC_DOCTOR"] { background: var(--scope-ccdoctor-bg); color: var(--scope-ccdoctor-fg); }
.scope-tier.out-scope { background: #eee; color: #aaa; cursor: not-allowed; }

/* Tap-to-jump on in-scope tiles */
.scope-tier.in-scope { cursor: pointer; transition: transform 0.12s ease, filter 0.12s ease; }
.scope-tier.in-scope:hover { filter: brightness(1.08); }
.scope-tier.in-scope:active { transform: scale(0.98); }
.scope-tier.in-scope:focus-visible { outline: 3px solid var(--ems-yellow); outline-offset: 2px; }

/* Yellow flash highlight on the target scope-block when a tier is tapped */
@keyframes ems-flash-highlight {
  0%   { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); background: transparent; }
  20%  { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.85); background: rgba(255, 235, 130, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); background: transparent; }
}
.scope-block.flash-highlight { animation: ems-flash-highlight 1.4s ease-out; }

/* Protocol body */
.protocol-body { padding: 0 16px 60px; }

.summary-card {
  background: #fff;
  border-left: 6px solid var(--info-blue);
  padding: 14px 18px;
  margin: 16px 0;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  font-size: 15px;
  line-height: 1.55;
}

.section-header {
  background: var(--ems-black);
  color: var(--ems-yellow);
  padding: 10px 16px;
  margin: 22px 0 12px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.subsection-header {
  color: var(--ems-black);
  font-size: 15px;
  font-weight: 700;
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ems-yellow);
}

.protocol-body ul, .protocol-body ol {
  margin-left: 22px;
  margin-bottom: 12px;
}
.protocol-body li {
  margin-bottom: 5px;
  line-height: 1.55;
}

/* Info / alert / pearl boxes */
.info-box {
  margin: 14px 0;
  padding: 12px 16px 12px 18px;
  border-radius: 6px;
  border-left: 6px solid;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.info-box .ib-title {
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.info-box.alert  { border-left-color: var(--alert-red); background: #ffebee; }
.info-box.alert .ib-title { color: var(--alert-red); }
.info-box.warn   { border-left-color: var(--warn-amber); background: #fff8e1; }
.info-box.warn .ib-title { color: var(--warn-amber); }
.info-box.info   { border-left-color: var(--info-blue); background: #e3f2fd; }
.info-box.info .ib-title { color: var(--info-blue); }
.info-box.pearl  { border-left-color: var(--ok-green); background: #e8f5e9; }
.info-box.pearl .ib-title { color: var(--ok-green); }
.info-box.paeds  { border-left-color: var(--scope-paeds-bg); background: #fce4ec; }
.info-box.paeds .ib-title { color: #ad1457; }
.info-box.mass   { border-left-color: var(--scope-mass-bg); background: #e3ebf5; }
.info-box.mass .ib-title { color: var(--scope-mass-bg); }
.info-box.dtp    { border-left-color: #f57c00; background: #fff3e0; }
.info-box.dtp .ib-title { color: #e65100; }
.info-box ul { margin-left: 20px; }
.info-box li { margin-bottom: 3px; }

/* Scope tier blocks (Medic/Para/IC/CC treatment columns) */
.scope-block {
  margin: 14px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid #e0e0e0;
}
.scope-block-header {
  padding: 10px 16px;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scope-block[data-tier="EMT_B"] .scope-block-header { background: var(--scope-emtb-bg); color: var(--scope-emtb-fg); }
.scope-block[data-tier="EMT_A"] .scope-block-header { background: var(--scope-emta-bg); color: var(--scope-emta-fg); }
.scope-block[data-tier="P1"] .scope-block-header { background: var(--scope-p1-bg); color: var(--scope-p1-fg); }
.scope-block[data-tier="PARA_NURSE"] .scope-block-header { background: var(--scope-paranurse-bg); color: var(--scope-paranurse-fg); }
.scope-block[data-tier="ICP"] .scope-block-header { background: var(--scope-icp-bg); color: var(--scope-icp-fg); }
.scope-block[data-tier="CC_DOCTOR"] .scope-block-header { background: var(--scope-ccdoctor-bg); color: var(--scope-ccdoctor-fg); }
.scope-block-body { padding: 14px 18px; background: #fff; }
.scope-block-body h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #555;
  margin: 10px 0 6px;
}
.scope-block-body ol, .scope-block-body ul { margin-left: 20px; }
.scope-block-body .drug-mini {
  display: inline-flex;
  align-items: center;
  background: #fff3e0;
  color: #e65100;
  padding: 4px 10px 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  margin: 2px 4px 2px 0;
  border: 1px solid #ffcc80;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, transform 0.1s;
  user-select: none;
}
.scope-block-body .drug-mini:hover {
  background: #ffe0b2;
  border-color: #ff9800;
}
.scope-block-body .drug-mini:active {
  transform: translateY(1px);
}

/* Dark mode for drug pills */
[data-theme="dark"] .scope-block-body .drug-mini {
  background: #3d2817;
  color: #ffb74d;
  border-color: #6d4c2a;
}
[data-theme="dark"] .scope-block-body .drug-mini:hover {
  background: #4a3220;
  border-color: #8b6234;
}

/* Tables */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}
table.data-table th {
  background: var(--ems-black);
  color: var(--ems-yellow);
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
table.data-table td {
  padding: 9px 12px;
  border-top: 1px solid #eee;
  vertical-align: top;
}
table.data-table tr:nth-child(even) td { background: #fafafa; }

/* Flow chart (CSS-based, no SVG) */
.flow-chart {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 24px 16px;
  margin: 18px 0;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.flow-chart h3 {
  margin-bottom: 16px;
  color: var(--ems-black);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.flow-node {
  display: inline-block;
  min-width: 220px;
  max-width: 90%;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  margin: 4px 0;
  white-space: pre-line;
  box-shadow: var(--shadow-sm);
  border: 2px solid #000;
}
.flow-node.start { background: var(--info-blue); color: #fff; border-radius: 999px; }
.flow-node.end { background: var(--ok-green); color: #fff; border-radius: 999px; }
.flow-node.action { background: #fff; color: #000; }
.flow-node.decision { background: var(--warn-amber); color: #fff; transform: skewX(-10deg); }
.flow-node.decision span { display: inline-block; transform: skewX(10deg); }
.flow-node.branch { background: #607d8b; color: #fff; }
.flow-node.colour-red { background: var(--alert-red); color: #fff; border-color: var(--alert-red); }
.flow-node.colour-blue { background: var(--info-blue); color: #fff; }
.flow-node.colour-amber { background: var(--warn-amber); color: #fff; }
.flow-node.colour-green { background: var(--ok-green); color: #fff; }
.flow-node.colour-grey { background: #607d8b; color: #fff; }

.flow-arrow {
  font-size: 22px;
  color: #555;
  margin: 2px 0;
  font-weight: 800;
}
.flow-row {
  display: flex;
  justify-content: space-around;
  gap: 16px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.flow-branch {
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}

/* Drug calculator widget */
.drug-calc {
  background: #fff;
  border: 2px solid var(--scope-paeds-bg);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 14px 0;
  box-shadow: var(--shadow-sm);
}
.drug-calc h4 {
  color: var(--scope-paeds-bg);
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.drug-calc .calc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  flex-wrap: wrap;
}
.drug-calc input[type=number] {
  width: 90px;
  padding: 6px 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}
.drug-calc input[type=number]:focus {
  outline: 0;
  border-color: var(--scope-paeds-bg);
}
.drug-calc .calc-output {
  background: var(--scope-paeds-bg);
  color: #000;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}

/* DTP cross-reference badges */
.dtp-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.dtp-ref {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.dtp-ref:hover { background: #ffcc80; }

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  background: var(--ems-black);
  color: var(--ems-yellow);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px 10px 0 0;
}
.modal-header h3 { font-size: 18px; }
.modal-header button {
  background: transparent;
  color: var(--ems-yellow);
  border: 0;
  font-size: 24px;
  cursor: pointer;
}
.modal-body { padding: 18px; }
.modal-body h4 { margin: 12px 0 6px; color: var(--ems-black); font-size: 14px; text-transform: uppercase; }
.modal-body table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.modal-body table td, .modal-body table th { padding: 6px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
.modal-body table th { background: #f5f5f5; }

/* ==========================================================================
   PRINT STYLESHEET
   ========================================================================== */
@media print {
  @page { margin: 15mm 12mm 18mm 12mm; size: A4 portrait; }
  body { background: #fff !important; font-size: 10pt; }
  .app { display: block; height: auto; overflow: visible; }
  .app-header, .sidebar, .sidebar-overlay, .menu-toggle, .actions, .search-box, .scope-filter, .paeds-toggle, .modal-overlay { display: none !important; }
  .main { overflow: visible; background: #fff; }
  .protocol-view { max-width: 100%; padding: 0; }
  .protocol-header { position: static; padding: 0; }
  .protocol-title-row, .scope-block-header, .section-header { box-shadow: none !important; }
  .info-box, .scope-block, .flow-chart, .summary-card, table.data-table {
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .scope-block { page-break-inside: avoid; }
  .flow-chart { page-break-inside: avoid; }
  /* Each protocol on its own page when printing whole book */
  .protocol-view { page-break-after: always; }
  /* keep colours */
  .protocol-code, .protocol-title, .scope-tier.in-scope, .system-band, .scope-block-header, table.data-table th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ==========================================================================
   UTILITY
   ========================================================================== */
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-muted { color: #666; }
.small { font-size: 12px; }

/* Loading state */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #888;
  font-size: 16px;
}

/* ==========================================================================
   PIN LOCK SCREEN
   ========================================================================== */
.lock-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.lock-screen.active { display: flex; }

/* When the app is locked, prevent scrolling/interaction underneath */
.app.locked { overflow: hidden; }

.lock-content {
  background: #0a0a0a;
  border: 2px solid var(--ems-yellow);
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(255, 193, 7, 0.15), 0 0 0 1px rgba(255,193,7,0.1);
}

.lock-logo {
  height: 70px;
  width: auto;
  margin-bottom: 12px;
}

.lock-title {
  color: var(--ems-yellow);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.lock-subtitle {
  color: #aaa;
  font-size: 13px;
  margin-bottom: 22px;
  line-height: 1.5;
}

.pin-form {
  margin: 0 auto;
}

#pinInput {
  width: 100%;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 12px;
  padding: 14px 12px;
  background: #1a1a1a;
  color: var(--ems-yellow);
  border: 2px solid #333;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-bottom: 8px;
}
#pinInput:focus {
  outline: 0;
  border-color: var(--ems-yellow);
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.2);
}
#pinInput::placeholder { color: #555; letter-spacing: 8px; }

.pin-message {
  min-height: 22px;
  color: #ff6b6b;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.pin-message.locked { color: #ff9800; }

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.pin-key {
  background: #1f1f1f;
  color: #fff;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 16px 0;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.pin-key:hover { background: #2a2a2a; }
.pin-key:active { background: var(--ems-yellow); color: #000; transform: scale(0.97); }
.pin-key-action {
  background: #2a2a2a;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--ems-yellow);
}

.pin-submit {
  width: 100%;
  background: var(--ems-yellow);
  color: #000;
  border: 0;
  border-radius: 10px;
  padding: 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: inherit;
}
.pin-submit:hover { background: #ffd34d; }
.pin-submit:active { transform: scale(0.98); }

.lock-footer {
  color: #666;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 22px;
}

/* Shake animation on wrong PIN */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.pin-form.shake { animation: shake 0.4s; }

/* Make sure lock screen never prints */
@media print {
  .lock-screen { display: none !important; }
}

/* ==========================================================================
   DARK MODE OVERRIDES
   When body has .light-mode → use the light scheme (default existing styles)
   When body lacks .light-mode → DARK MODE is active (default)
   Note: header is always dark in both modes (it's the brand bar)
   ========================================================================== */

/* By default app is now DARK — override the previously-light surfaces */
body {
  background: #0f0f0f;
  color: #e8e8e8;
}

.main {
  background: #0f0f0f;
}

.welcome {
  background: #1a1a1a;
  color: #e8e8e8;
}

.welcome h2 {
  /* keep yellow on black brand block */
}

.welcome .legend-item {
  background: #222;
  color: #e8e8e8;
}

.welcome .governance {
  background: #2a2410;
  color: #f0e0a0;
}

.welcome .governance > div {
  background: #1a1a1a !important;
  color: #e8e8e8;
}

.sidebar {
  background: #1a1a1a;
  border-right-color: #333;
}

.search-box {
  background: #1a1a1a;
  border-bottom-color: #333;
}

.search-box input {
  background: #2a2a2a;
  color: #fff;
  border-color: var(--ems-yellow);
}
.search-box input::placeholder { color: #888; }

.scope-filter {
  border-bottom-color: #333;
}

.paeds-toggle {
  background: linear-gradient(90deg, var(--scope-paeds-bg) 0%, var(--scope-paeds-bg) 6px, #1a1a1a 6px) !important;
  border-bottom-color: #333;
  color: #e8e8e8;
}

.chapter {
  border-bottom-color: #2a2a2a;
}

.protocol-item {
  color: #d8d8d8;
}
.protocol-item:hover { background: #2a2a2a; }
.protocol-item.active {
  background: #3a2f00;
  color: #fff;
}
.protocol-item .code { color: #aaa; }

.summary-card {
  background: #1f2937;
  color: #e8e8e8;
}

.subsection-header {
  color: var(--ems-yellow);
}

.protocol-header {
  background: #0f0f0f;
}

/* Info boxes — dark variants */
.info-box {
  background: #1a1a1a;
  color: #e8e8e8;
}
.info-box.alert  { background: #2a1414; color: #ffcdd2; }
.info-box.warn   { background: #2a2414; color: #ffe082; }
.info-box.info   { background: #142030; color: #bbdefb; }
.info-box.pearl  { background: #14241a; color: #c8e6c9; }
.info-box.paeds  { background: #2a1525; color: #f8bbd0; }
.info-box.mass   { background: #14202a; color: #bbdefb; }
.info-box.dtp    { background: #2a1c10; color: #ffcc80; }

.scope-block {
  border-color: #333;
}
.scope-block-body {
  background: #1a1a1a;
  color: #e8e8e8;
}
.scope-block-body h4 { color: #aaa; }

table.data-table {
  background: #1a1a1a;
  color: #e8e8e8;
}
table.data-table tr:nth-child(even) td { background: #222; }
table.data-table td { border-top-color: #2a2a2a; }

.flow-chart {
  background: #1a1a1a;
  border-color: #333;
}
.flow-chart h3 { color: var(--ems-yellow); }
.flow-node.action { background: #2a2a2a; color: #fff; border-color: #555; }
.flow-arrow { color: #888; }

.drug-calc {
  background: #1a1a1a;
}
.drug-calc input[type=number] {
  background: #2a2a2a;
  color: #fff;
  border-color: #555;
}

.dtp-ref {
  background: #2a1c10;
  color: #ffcc80;
  border-color: #ff9800;
}
.dtp-ref:hover { background: #3a2c20; }

.modal {
  background: #1a1a1a;
  color: #e8e8e8;
}
.modal-body h4 { color: var(--ems-yellow); }
.modal-body table th { background: #2a2a2a; color: #e8e8e8; }
.modal-body table td, .modal-body table th { border-bottom-color: #333; }

/* ==========================================================================
   LIGHT MODE — when .light-mode is on body, restore the original light styles
   ========================================================================== */
body.light-mode {
  background: #fafafa;
  color: #111;
}
body.light-mode .main { background: #fafafa; }
body.light-mode .welcome { background: #fff; color: #111; }
body.light-mode .welcome .legend-item { background: #fafafa; color: #111; }
body.light-mode .welcome .governance { background: #fff8e1; color: #111; }
body.light-mode .welcome .governance > div { background: #fff !important; color: #111; }

body.light-mode .sidebar { background: #fff; border-right-color: #ddd; }
body.light-mode .search-box { background: #fff; border-bottom-color: #eee; }
body.light-mode .search-box input {
  background: #fff;
  color: #111;
  border-color: var(--ems-black);
}
body.light-mode .search-box input::placeholder { color: #999; }
body.light-mode .scope-filter { border-bottom-color: #eee; }
body.light-mode .paeds-toggle {
  background: linear-gradient(90deg, var(--scope-paeds-bg) 0%, var(--scope-paeds-bg) 6px, #fff 6px) !important;
  border-bottom-color: #eee;
  color: #111;
}
body.light-mode .chapter { border-bottom-color: #f0f0f0; }
body.light-mode .protocol-item { color: #111; }
body.light-mode .protocol-item:hover { background: #f6f6f6; }
body.light-mode .protocol-item.active { background: #fffbe6; color: #111; }
body.light-mode .protocol-item .code { color: #888; }
body.light-mode .summary-card { background: #fff; color: #111; }
body.light-mode .subsection-header { color: var(--ems-black); }
body.light-mode .protocol-header { background: #fafafa; }

body.light-mode .info-box  { background: #fff; color: #111; }
body.light-mode .info-box.alert { background: #ffebee; color: #111; }
body.light-mode .info-box.warn  { background: #fff8e1; color: #111; }
body.light-mode .info-box.info  { background: #e3f2fd; color: #111; }
body.light-mode .info-box.pearl { background: #e8f5e9; color: #111; }
body.light-mode .info-box.paeds { background: #fce4ec; color: #111; }
body.light-mode .info-box.mass  { background: #e3ebf5; color: #111; }
body.light-mode .info-box.dtp   { background: #fff3e0; color: #111; }

body.light-mode .scope-block { border-color: #e0e0e0; }
body.light-mode .scope-block-body { background: #fff; color: #111; }
body.light-mode .scope-block-body h4 { color: #555; }
body.light-mode table.data-table { background: #fff; color: #111; }
body.light-mode table.data-table tr:nth-child(even) td { background: #fafafa; }
body.light-mode table.data-table td { border-top-color: #eee; }

body.light-mode .flow-chart { background: #fff; border-color: #ddd; }
body.light-mode .flow-chart h3 { color: var(--ems-black); }
body.light-mode .flow-node.action { background: #fff; color: #000; border-color: #000; }
body.light-mode .flow-arrow { color: #555; }

body.light-mode .drug-calc { background: #fff; }
body.light-mode .drug-calc input[type=number] { background: #fff; color: #111; border-color: #ccc; }
body.light-mode .dtp-ref { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
body.light-mode .dtp-ref:hover { background: #ffcc80; }

body.light-mode .modal { background: #fff; color: #111; }
body.light-mode .modal-body h4 { color: var(--ems-black); }
body.light-mode .modal-body table th { background: #f5f5f5; color: #111; }
body.light-mode .modal-body table td, body.light-mode .modal-body table th { border-bottom-color: #eee; }

/* ==========================================================================
   PRINT STYLESHEET — always forces LIGHT theme regardless of current mode
   ========================================================================== */
@media print {
  body, body.light-mode { background: #fff !important; color: #111 !important; }
  .welcome, .welcome .legend-item, .welcome .governance > div,
  .summary-card, .info-box, .scope-block-body, table.data-table,
  .flow-chart, .modal, .drug-calc {
    background: #fff !important;
    color: #111 !important;
  }
  .info-box.alert  { background: #ffebee !important; }
  .info-box.warn   { background: #fff8e1 !important; }
  .info-box.info   { background: #e3f2fd !important; }
  .info-box.pearl  { background: #e8f5e9 !important; }
  .info-box.paeds  { background: #fce4ec !important; }
  .info-box.mass   { background: #e3ebf5 !important; }
  .info-box.dtp    { background: #fff3e0 !important; }
  .protocol-item { color: #111 !important; }
  .flow-node.action { background: #fff !important; color: #000 !important; border-color: #000 !important; }
}

/* Welcome inline-style overrides — make grey text legible in dark mode */
.welcome p[style*="color:#555"],
.welcome p[style*="color:#666"] {
  color: #aaa !important;
}
body.light-mode .welcome p[style*="color:#555"] { color: #555 !important; }
body.light-mode .welcome p[style*="color:#666"] { color: #666 !important; }

/* ==========================================================================
   INTRODUCTION SPLASH — appears after PIN, before app
   Dismissed via Next button; re-shows on each new session
   ========================================================================== */

.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  animation: fadeIn 0.4s ease-out;
}
.intro-splash.dismissed { display: none; }

.intro-content {
  max-width: 720px;
  width: 100%;
  background: #fff;
  color: #1a1a1a;
  padding: 32px 36px;
  border-radius: 12px;
  border-top: 6px solid var(--ems-yellow);
  box-shadow: 0 12px 60px rgba(0,0,0,0.5);
  text-align: center;
  margin: 30px auto;
}

.intro-logo {
  width: 110px;
  height: auto;
  margin: 0 auto 14px;
  display: block;
}

.intro-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
  color: #000;
  letter-spacing: 0.3px;
}

.intro-subtitle {
  font-size: 14px;
  color: #555;
  margin: 0 0 22px;
  font-style: italic;
}

.intro-body {
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
  color: #1a1a1a;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 18px 0;
  margin-bottom: 22px;
}
.intro-body p {
  margin: 0 0 12px;
}
.intro-body p:last-child {
  margin-bottom: 0;
}
.intro-body strong { color: #000; }

/* SIGN-OFF block — exact typography per Dr Hammond's spec
   - Name: 12pt
   - Postnominals: 9pt (3pt smaller)
   - Rest of credentials: 10pt
*/
.intro-signoff {
  text-align: center;
  margin: 18px 0 22px;
  padding: 16px 12px;
  background: #fafafa;
  border-radius: 6px;
  border-left: 4px solid var(--ems-yellow);
}
.intro-signoff .signoff-name {
  font-size: 12pt;
  font-weight: 700;
  color: #000;
  margin: 0 0 4px;
  letter-spacing: 0.2px;
}
.intro-signoff .signoff-postnominals {
  font-size: 9pt;
  color: #444;
  margin: 0 0 14px;
  letter-spacing: 0.3px;
  line-height: 1.35;
}
.intro-signoff .signoff-credentials {
  font-size: 10pt;
  color: #333;
  line-height: 1.5;
}
.intro-signoff .signoff-credentials p {
  margin: 0 0 3px;
}
.intro-signoff .signoff-credentials p:last-child {
  margin-bottom: 0;
}

.intro-next {
  background: var(--ems-yellow);
  color: #000;
  border: none;
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.intro-next:hover {
  background: #ffd54f;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.intro-next:active {
  transform: translateY(1px);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive */
@media (max-width: 600px) {
  .intro-content {
    padding: 22px 18px;
    margin: 10px auto;
  }
  .intro-title { font-size: 19px; }
  .intro-body { font-size: 13px; }
  .intro-signoff .signoff-name { font-size: 11pt; }
  .intro-signoff .signoff-postnominals { font-size: 8pt; }
  .intro-signoff .signoff-credentials { font-size: 9pt; }
  .intro-next {
    padding: 12px 28px;
    font-size: 15px;
    width: 100%;
  }
  /* v3.7.2: 6 tiles is too cramped on phones — split into two rows of 3 */
  .scope-band {
    grid-template-columns: repeat(3, 1fr);
  }
  .scope-tier {
    font-size: 10px;
    padding: 6px 3px;
    border-bottom: 1px solid #fff;
  }
  /* Reset: now that it's a grid, we need new last-child rules */
  .scope-tier:nth-child(3n) { border-right: 0; }
  .scope-tier:nth-child(n+4) { border-bottom: 0; }
}

/* Don't print the splash */
@media print {
  .intro-splash { display: none !important; }
}

/* ==========================================================================
   PHARMACOLOGY AUTHORITY BADGES (X / C1 / C2 / S / E / -)
   Rendered inline next to drug names within scope-block treatment lists
   to show the per-tier administration authority. Mirrors the EMS
   Pharmacology Matrix exactly.
   ========================================================================== */
.auth-badge {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  margin-right: 6px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  border-radius: 4px;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: 0.3px;
  cursor: help;
  border: 1px solid transparent;
}
.auth-x   { background: #C8E6C9; color: #1B5E20; border-color: #2E7D32; }
.auth-c1  { background: #FFF59D; color: #F57F17; border-color: #F57F17; }
.auth-c2  { background: #A5D6A7; color: #1B5E20; border-color: #388E3C; }
.auth-s   { background: #BBDEFB; color: #0D47A1; border-color: #1976D2; }
.auth-s1  { background: #BBDEFB; color: #0D47A1; border-color: #1976D2; }
.auth-s2  { background: #BBDEFB; color: #0D47A1; border-color: #1976D2; }
.auth-e   { background: #FFE0B2; color: #E65100; border-color: #E65100; }
.auth-dash{ background: #FFCDD2; color: #B71C1C; border-color: #B71C1C; }

/* Dark mode adjustments — keep badges readable on dark scope-block bodies */
[data-theme="dark"] .auth-x   { background: #1B5E20; color: #C8E6C9; }
[data-theme="dark"] .auth-c1  { background: #5D4037; color: #FFF59D; }
[data-theme="dark"] .auth-c2  { background: #2E7D32; color: #A5D6A7; }
[data-theme="dark"] .auth-s,
[data-theme="dark"] .auth-s1,
[data-theme="dark"] .auth-s2  { background: #0D47A1; color: #BBDEFB; }
[data-theme="dark"] .auth-e   { background: #BF360C; color: #FFE0B2; }
[data-theme="dark"] .auth-dash{ background: #B71C1C; color: #FFCDD2; }

/* Make drug-mini comfortable with an inline badge */
.drug-mini {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* Mobile sizing for protocol code badge — keep prominent but fit narrower screens */
@media (max-width: 600px) {
  .protocol-code {
    font-size: 20px;
    padding: 16px 18px;
    min-width: 120px;
    letter-spacing: 1px;
  }
}

/* ==========================================================================
   VOLUME SELECTOR — top-of-header pill group, switches between
   Volume 1 (MGEM) and Volume 2 (General Clinical)
   ========================================================================== */
.volume-selector {
  display: inline-flex;
  background: rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 3px;
  margin: 0 14px;
  gap: 2px;
}
.vol-pill {
  background: transparent;
  border: 0;
  color: #ddd;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  transition: background-color 0.15s, color 0.15s;
  letter-spacing: 0.4px;
  min-width: 60px;
}
.vol-pill:hover { background: rgba(255,255,255,0.06); }
.vol-pill.active {
  background: var(--ems-yellow);
  color: #000;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.vol-pill-sub {
  font-size: 9px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 1px;
  letter-spacing: 0.2px;
}

/* Mobile: tighten the volume selector */
@media (max-width: 700px) {
  .volume-selector { margin: 0 8px; }
  .vol-pill { padding: 6px 11px; min-width: 48px; }
  .vol-pill-sub { display: none; }
}
@media (max-width: 480px) {
  /* Very narrow: stack the volume selector below title */
  .volume-selector { margin: 6px 0; order: 99; }
}

/* Hide print volume selector */
@media print {
  .volume-selector { display: none !important; }
}

/* ==========================================================================
   SIDEBAR AUTHORITY LEGEND — collapsible quick reference
   ========================================================================== */
.sidebar-legend {
  margin: 8px 12px 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  overflow: hidden;
}
.sidebar-legend > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--text);
  user-select: none;
  background: var(--bg-elevated, transparent);
  transition: background-color 0.12s;
}
.sidebar-legend > summary:hover { background: rgba(255,255,255,0.05); }
.sidebar-legend > summary::-webkit-details-marker { display: none; }
.sidebar-legend > summary::after {
  content: '▾';
  font-size: 10px;
  margin-left: 8px;
  opacity: 0.6;
  transition: transform 0.15s;
}
.sidebar-legend[open] > summary::after { transform: rotate(180deg); }
.sidebar-legend-tap {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.6;
}
.sidebar-legend[open] .sidebar-legend-tap { display: none; }
.sidebar-legend-body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
}
.sidebar-legend-body .legend-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  line-height: 1.3;
}
.sidebar-legend-body .auth-badge {
  flex-shrink: 0;
  min-width: 26px;
  text-align: center;
}

/* Help button visual emphasis */
#helpBtn {
  font-weight: 700;
}

/* ==========================================================================
   COPYRIGHT — splash screen block + print footer
   ========================================================================== */
.intro-copyright {
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: #444;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.intro-copyright p { margin: 0 0 6px; }
.intro-copyright p:first-child {
  font-weight: 700;
  color: #000;
  font-size: 13px;
}
.intro-copyright p:last-child { margin-bottom: 0; }
[data-theme="dark"] .intro-copyright {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: #bbb;
}
[data-theme="dark"] .intro-copyright p:first-child { color: #fff; }

/* Print: copyright on every printed page footer */
@media print {
  body::after {
    content: "© EMS Event Medical 2026 — Clinical use only — Confidential";
    position: fixed;
    bottom: 4mm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9pt;
    color: #888;
  }
}

/* ============================================================
   v3.8.0 — Quick Protocols (P-OP-*) styling
   ============================================================ */

/* Sidebar: ch00 "Quick Protocols" header — visually pop with EMS yellow band */
.chapter-header[data-chapter="ch00"] {
  background: linear-gradient(90deg, var(--ems-yellow) 0%, #FFD54F 100%);
  color: #000;
  font-weight: 800;
  letter-spacing: 0.3px;
  border-left: 4px solid #000;
}
.chapter-header[data-chapter="ch00"] .chev {
  color: #000;
}
[data-theme="dark"] .chapter-header[data-chapter="ch00"] {
  background: linear-gradient(90deg, var(--ems-yellow) 0%, #FFB300 100%);
  color: #000;
  border-left-color: var(--ems-yellow);
}

/* Quick protocol items inherit normal styling but with a subtle yellow left border */
.chapter-header[data-chapter="ch00"] + .protocol-list .protocol-item {
  border-left: 3px solid var(--ems-yellow);
  background: rgba(255, 193, 7, 0.04);
}
[data-theme="dark"] .chapter-header[data-chapter="ch00"] + .protocol-list .protocol-item {
  background: rgba(255, 193, 7, 0.08);
}

/* Role-summary callout in scope-block — leads each Quick Protocol tier block */
.role-summary {
  background: #FFFDF7;
  color: #1a1a1a;
  border-left: 4px solid var(--ems-yellow);
  padding: 10px 14px;
  margin: 0 0 12px 0;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 4px;
}
.role-summary strong {
  color: #B45309;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  margin-right: 6px;
}
[data-theme="dark"] .role-summary {
  background: #2a2410;
  color: #f5f1e3;
  border-left-color: var(--ems-yellow);
}
[data-theme="dark"] .role-summary strong {
  color: #FFC107;
}

/* Escalate-if callout in scope-block — appears at end of tier role block */
.escalate-block {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(220, 38, 38, 0.06);
  border-left: 4px solid #DC2626;
  border-radius: 4px;
}
.escalate-block .escalate-title {
  color: #B91C1C;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.escalate-block ul {
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.55;
}
.escalate-block li {
  margin-bottom: 3px;
}
[data-theme="dark"] .escalate-block {
  background: rgba(220, 38, 38, 0.12);
}
[data-theme="dark"] .escalate-block .escalate-title {
  color: #FCA5A5;
}

/* Inline SVG flowchart wrapper for Quick Protocols */
.flow-chart-svg {
  background: var(--bg-card, #FFFDF7);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--border, #ddd);
}
.flow-chart-svg h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--ems-yellow-dark, #B45309);
}
.flow-svg-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}
.flow-svg-img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 4px;
}
[data-theme="dark"] .flow-chart-svg {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
@media print {
  .flow-svg-img {
    max-width: 100%;
    page-break-inside: avoid;
  }
}

/* ============================================================
   v3.9.1 — DTP Manual sidebar link + browser view
   ============================================================ */

/* Sidebar link button — sits between legend and chapter list */
.dtp-manual-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 8px 0 12px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2410 100%);
  border: 2px solid var(--ems-yellow, #FFC107);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: filter 0.15s, transform 0.05s;
}
.dtp-manual-link:hover { filter: brightness(1.2); }
.dtp-manual-link:active { transform: translateY(1px); }
.dtp-manual-link.active {
  background: linear-gradient(135deg, var(--ems-yellow, #FFC107) 0%, #E0A800 100%);
  color: #000;
}
.dtp-manual-link.active .dtp-manual-sub { color: #333; }
.dtp-manual-link.active .dtp-manual-count {
  background: rgba(0,0,0,0.15);
  color: #000;
}

.dtp-manual-icon {
  font-size: 22px;
  line-height: 1;
}
.dtp-manual-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.dtp-manual-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ems-yellow, #FFC107);
  letter-spacing: 0.3px;
}
.dtp-manual-link.active .dtp-manual-title { color: #000; }
.dtp-manual-sub {
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
}
.dtp-manual-count {
  background: var(--ems-yellow, #FFC107);
  color: #000;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}
body.light-mode .dtp-manual-link {
  background: linear-gradient(135deg, #fffbe6 0%, #fff4cc 100%);
  color: #1a1a1a;
}
body.light-mode .dtp-manual-link .dtp-manual-title { color: #B45309; }
body.light-mode .dtp-manual-link .dtp-manual-sub { color: #6b6b6b; }

/* DTP browser view — shown in main panel when sidebar link tapped */
.dtp-manual-view {
  padding: 0;
}
.dtp-manual-view.hidden { display: none !important; }

.dtp-browser-header {
  background: #000;
  border: 2px solid var(--ems-yellow, #FFC107);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.dtp-browser-header h2 {
  margin: 0;
  color: var(--ems-yellow, #FFC107);
  font-size: 22px;
  letter-spacing: 0.5px;
  flex: 1;
  min-width: 240px;
}
.dtp-browser-header .dtp-browser-sub {
  color: #ccc;
  font-size: 13px;
  margin-top: 4px;
  display: block;
  font-weight: 400;
  letter-spacing: 0;
}

.dtp-browser-search {
  flex: 1;
  min-width: 220px;
  padding: 10px 14px;
  background: #2a2a2a;
  border: 1px solid var(--ems-yellow, #FFC107);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}
.dtp-browser-search::placeholder { color: #888; }

.dtp-browser-info {
  background: var(--bg-card, #1a1a1a);
  border-left: 4px solid var(--ems-yellow, #FFC107);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #ccc;
  line-height: 1.55;
}
body.light-mode .dtp-browser-info {
  background: #FFFDF7;
  color: #444;
}

.dtp-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.dtp-browser-card {
  background: var(--bg-card, #1a1a1a);
  border: 1px solid var(--border, #333);
  border-left: 4px solid var(--ems-yellow, #FFC107);
  border-radius: 6px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text, #f5f1e3);
  transition: transform 0.05s, border-color 0.15s, background 0.15s;
}
.dtp-browser-card:hover {
  border-color: var(--ems-yellow, #FFC107);
  background: var(--bg-card-hover, #2a2a2a);
}
.dtp-browser-card:active { transform: translateY(1px); }
.dtp-browser-card.placeholder {
  border-left-color: #888;
  opacity: 0.65;
}
.dtp-browser-card .dtp-card-id {
  font-size: 11px;
  color: var(--ems-yellow, #FFC107);
  font-weight: 700;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 3px;
}
.dtp-browser-card .dtp-card-name {
  font-size: 15px;
  font-weight: 700;
  display: block;
  line-height: 1.3;
}
.dtp-browser-card .dtp-card-schedule {
  font-size: 11px;
  color: #aaa;
  margin-top: 4px;
  display: block;
}
body.light-mode .dtp-browser-card {
  background: #FFFDF7;
  color: #1a1a1a;
}
body.light-mode .dtp-browser-card:hover { background: #fffbe6; }
body.light-mode .dtp-browser-card .dtp-card-id { color: #B45309; }
body.light-mode .dtp-browser-card .dtp-card-schedule { color: #6b6b6b; }

.dtp-browser-letter-header {
  grid-column: 1 / -1;
  margin: 8px 0 4px 0;
  padding: 6px 10px;
  background: var(--ems-yellow, #FFC107);
  color: #000;
  font-weight: 800;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 1px;
}

.dtp-browser-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px;
  color: var(--text-muted, #888);
  font-style: italic;
}

/* =====================================================================
   v3.9.6 — Tier consolidation + Paediatric mode visual upgrades
   ===================================================================== */

/* P1 senior-clinician guidance banner — sits at top of every P1 scope-block-body */
.p1-guidance-banner {
  background: #FFF8E1;
  border: 2px solid #F57F17;
  border-left-width: 6px;
  color: #4A2C00;
  padding: 10px 14px;
  margin: 0 0 14px 0;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}
.p1-guidance-banner strong {
  color: #C62828;
}
/* Dark mode variant */
body:not(.light-mode) .p1-guidance-banner {
  background: #3a2e10;
  border-color: #FFB300;
  color: #FFE082;
}
body:not(.light-mode) .p1-guidance-banner strong {
  color: #FF8A65;
}

/* Bubblegum-pink Paediatric section — header is now bold + prominent */
.section-header.paeds-header {
  background: var(--scope-paeds-bg) !important;
  color: #000 !important;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  padding: 14px 18px;
  border-radius: 8px 8px 0 0;
  border-bottom: 4px solid #C2185B;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.section-header.paeds-header::before {
  content: "👶 ";
  font-size: 18px;
}

/* Paeds-mode body indicator — subtle pink top accent so user always knows mode is on */
body.paeds-mode #protocolView::before {
  content: "👶 PAEDIATRIC MODE — paediatric data and dosing visible";
  display: block;
  background: var(--scope-paeds-bg);
  color: #000;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 6px 18px;
  text-align: center;
  border-bottom: 2px solid #C2185B;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Paeds drug pill — bubblegum styling so it visually flags as paediatric-specific */
.drug-mini.paeds-pill {
  background: var(--scope-paeds-bg);
  color: #000;
  border: 1px solid #C2185B;
  font-weight: 600;
}
.drug-mini.paeds-pill:hover {
  background: #FF4081;
}

/* =====================================================================
   v3.9.7 — Tier-filter guidance banners (EMT-B / P1)
   ===================================================================== */
.tier-filter-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  margin: 0 0 18px 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  border-left: 6px solid;
}
.tier-filter-banner .tier-banner-icon {
  flex: 0 0 auto;
  font-size: 22px;
  line-height: 1;
}
.tier-filter-banner.emt-b {
  background: #E8F5E9;
  border-color: #2E7D32;
  color: #1B3A1F;
}
.tier-filter-banner.emt-b strong {
  color: #1B5E20;
}
.tier-filter-banner.p1 {
  background: #E3F2FD;
  border-color: #1976D2;
  color: #0D2B45;
}
.tier-filter-banner.p1 strong {
  color: #0D47A1;
}
/* Dark mode */
body:not(.light-mode) .tier-filter-banner.emt-b {
  background: #1F3322;
  color: #C8E6C9;
}
body:not(.light-mode) .tier-filter-banner.emt-b strong {
  color: #81C784;
}
body:not(.light-mode) .tier-filter-banner.p1 {
  background: #1A2A3A;
  color: #BBDEFB;
}
body:not(.light-mode) .tier-filter-banner.p1 strong {
  color: #64B5F6;
}

/* =====================================================================
   v3.9.8 — Drug Calculator + Clinical Scores
   ===================================================================== */

/* Sidebar buttons */
.dtp-manual-link.calc-link .dtp-manual-icon { color: #1976D2; }
.dtp-manual-link.scores-link .dtp-manual-icon { color: #6A1B9A; }
.dtp-manual-link.active {
  border-color: var(--ems-yellow);
  background: rgba(255, 193, 7, 0.08);
}

/* === Calculator main view === */
.calc-view {
  padding: 18px 20px 30px;
  max-width: 900px;
  margin: 0 auto;
}
.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.calc-header h2 {
  font-size: 22px;
  margin: 0;
  color: var(--ems-yellow);
}
.calc-mode-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid;
}
.calc-mode-pill.adult { background: #E3F2FD; color: #0D47A1; border-color: #1976D2; }
.calc-mode-pill.paeds { background: var(--scope-paeds-bg); color: #000; border-color: #C2185B; }
body:not(.light-mode) .calc-mode-pill.adult { background: #1A2A3A; color: #BBDEFB; }

.calc-safety-banner {
  background: #FFF8E1;
  border: 2px solid #F57F17;
  border-left-width: 6px;
  color: #4A2C00;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.55;
}
body:not(.light-mode) .calc-safety-banner {
  background: #3a2e10;
  color: #FFE082;
  border-color: #FFB300;
}

.calc-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
body:not(.light-mode) .calc-card {
  background: #1f1f1f;
  border-color: #333;
}
.calc-card h3 {
  font-size: 16px;
  margin: 0 0 12px 0;
  color: var(--ems-yellow);
}
.calc-card h4 {
  font-size: 14px;
  margin: 0 0 10px 0;
}

.calc-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.calc-row label {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}
.calc-row input,
.calc-row select {
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid var(--border, #ccc);
  border-radius: 6px;
  background: var(--input-bg, #fff);
  color: var(--text, #000);
}
body:not(.light-mode) .calc-row input,
body:not(.light-mode) .calc-row select {
  background: #2a2a2a;
  color: #f0f0f0;
  border-color: #444;
}

.calc-btn-secondary {
  padding: 8px 14px;
  border: 1px solid var(--border, #ccc);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: inherit;
}
.calc-btn-secondary:hover { background: rgba(0,0,0,0.05); }
body:not(.light-mode) .calc-btn-secondary:hover { background: rgba(255,255,255,0.08); }

/* Concentration banner — explicit, big */
.calc-concentration-banner {
  background: #E1F5FE;
  border-left: 6px solid #0288D1;
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 15px;
}
body:not(.light-mode) .calc-concentration-banner {
  background: #0d2436;
  color: #BBDEFB;
}
.calc-conc-warning {
  margin-top: 6px;
  color: #C62828;
  font-weight: 600;
  font-size: 13px;
}
body:not(.light-mode) .calc-conc-warning { color: #FF8A65; }

/* Indication picker */
.calc-indication-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calc-indication-btn {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  border: 2px solid var(--border, #ccc);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.calc-indication-btn:hover { border-color: #1976D2; background: rgba(25, 118, 210, 0.04); }
.calc-indication-btn.active {
  border-color: var(--ems-yellow);
  background: rgba(255, 193, 7, 0.10);
  font-weight: 600;
}
.calc-ind-route { font-size: 12px; opacity: 0.7; }
.calc-ind-pop {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(0,0,0,0.06);
}
body:not(.light-mode) .calc-ind-pop { background: rgba(255,255,255,0.08); }
.calc-indication-btn.pop-paeds .calc-ind-pop {
  background: var(--scope-paeds-bg);
  color: #000;
}
.calc-indication-btn.pop-newborn .calc-ind-pop {
  background: #FF8A80;
  color: #000;
}

/* Working table */
.calc-working {
  border-color: var(--ems-yellow);
  border-width: 2px;
}
.calc-working-table {
  background: rgba(255, 193, 7, 0.05);
  border-radius: 8px;
  padding: 14px 16px;
}
.calc-row-pair {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
}
body:not(.light-mode) .calc-row-pair { border-bottom-color: rgba(255,255,255,0.08); }
.calc-row-pair:last-child { border-bottom: none; }
.calc-row-pair span { opacity: 0.75; }
.calc-row-pair strong { font-size: 15px; }
.calc-row-pair.calc-final {
  background: rgba(76, 175, 80, 0.10);
  margin: 6px -16px;
  padding: 12px 16px;
  border: none;
}
.calc-row-pair.calc-final span { opacity: 1; font-weight: 600; }
.calc-row-pair.calc-final strong { font-size: 18px; color: #1B5E20; }
body:not(.light-mode) .calc-row-pair.calc-final strong { color: #81C784; }

.calc-max-block {
  background: #FFEBEE;
  border: 2px solid #C62828;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 14px;
  color: #B71C1C;
}
body:not(.light-mode) .calc-max-block {
  background: #3D1F1F;
  color: #FFCDD2;
}

.calc-warning-box {
  background: #FFF8E1;
  border: 1px solid #F57F17;
  border-left-width: 6px;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #4A2C00;
}
body:not(.light-mode) .calc-warning-box {
  background: #3a2e10;
  color: #FFE082;
}

.calc-notes-box {
  background: rgba(0,0,0,0.04);
  border-left: 4px solid var(--text-muted, #777);
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  margin-top: 12px;
  font-size: 13px;
}
body:not(.light-mode) .calc-notes-box { background: rgba(255,255,255,0.06); }

.calc-highrisk-banner {
  background: #FFEBEE;
  border: 2px solid #C62828;
  border-left-width: 6px;
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 14px;
  font-size: 14px;
  color: #B71C1C;
}
body:not(.light-mode) .calc-highrisk-banner {
  background: #3D1F1F;
  color: #FFCDD2;
}

/* Confirmation */
.calc-confirm-card {
  margin-top: 16px;
  padding: 14px;
  background: rgba(76, 175, 80, 0.06);
  border: 2px solid #4CAF50;
  border-radius: 8px;
}
body:not(.light-mode) .calc-confirm-card {
  background: rgba(76, 175, 80, 0.10);
}
.calc-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
body:not(.light-mode) .calc-check-row { border-bottom-color: rgba(255,255,255,0.08); }
.calc-check-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #2E7D32;
  flex: 0 0 auto;
}
.calc-check-row input[type="text"] {
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid var(--border, #ccc);
  border-radius: 4px;
}

.calc-btn-confirm {
  margin-top: 14px;
  padding: 14px 24px;
  width: 100%;
  background: #2E7D32;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.calc-btn-confirm:hover { background: #1B5E20; }
.calc-btn-confirm:disabled {
  background: #aaa;
  cursor: not-allowed;
}
.calc-confirm-hint {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 10px;
  line-height: 1.5;
}

/* Audit list */
.calc-audit-row {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 13px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: start;
}
body:not(.light-mode) .calc-audit-row { border-bottom-color: rgba(255,255,255,0.08); }
.calc-audit-row.bypass {
  background: rgba(255, 152, 0, 0.08);
  margin: 0 -16px;
  padding: 10px 16px;
  border-left: 4px solid #FF9800;
}
.calc-audit-time { font-size: 12px; opacity: 0.75; font-family: monospace; }
.calc-audit-detail { font-size: 12px; opacity: 0.85; }

/* === Clinical Scores view === */
.scores-view {
  padding: 18px 20px 30px;
  max-width: 900px;
  margin: 0 auto;
}
.scores-header h2 {
  margin: 0 0 6px 0;
  color: var(--ems-yellow);
}
.scores-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0;
  border-bottom: 2px solid var(--border, #ddd);
  padding-bottom: 0;
}
.scores-tab {
  padding: 10px 18px;
  background: transparent;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  margin-bottom: -2px;
}
.scores-tab.active {
  border-color: var(--ems-yellow);
  background: rgba(255, 193, 7, 0.08);
  color: var(--ems-yellow);
}
.scores-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 0 8px 8px 8px;
  padding: 18px;
}
body:not(.light-mode) .scores-card {
  background: #1f1f1f;
  border-color: #333;
}
.scores-card h3 { margin: 0 0 6px 0; }
.scores-desc { opacity: 0.85; font-size: 14px; margin-bottom: 18px; }

.score-component {
  margin-bottom: 18px;
}
.score-component h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
  color: var(--ems-yellow);
}
.score-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.score-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 2px solid var(--border, #ccc);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: inherit;
  text-align: left;
}
.score-opt:hover { border-color: #1976D2; }
.score-opt.active {
  border-color: var(--ems-yellow);
  background: rgba(255, 193, 7, 0.10);
  font-weight: 600;
}
.score-opt-pts {
  background: var(--ems-yellow);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 13px;
  flex: 0 0 auto;
}

.score-result { margin-top: 24px; }
.score-incomplete {
  text-align: center;
  padding: 16px;
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  font-size: 14px;
  opacity: 0.75;
}
body:not(.light-mode) .score-incomplete { background: rgba(255,255,255,0.04); }
.score-final {
  padding: 18px;
  border-radius: 10px;
  border: 2px solid;
  text-align: center;
}
.score-final.mild { background: #E8F5E9; border-color: #2E7D32; color: #1B5E20; }
.score-final.mod { background: #FFF8E1; border-color: #F57F17; color: #4A2C00; }
.score-final.severe { background: #FFEBEE; border-color: #C62828; color: #B71C1C; }
body:not(.light-mode) .score-final.mild { background: #1F3322; color: #C8E6C9; }
body:not(.light-mode) .score-final.mod { background: #3a2e10; color: #FFE082; }
body:not(.light-mode) .score-final.severe { background: #3D1F1F; color: #FFCDD2; }
.score-total {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}
.score-max { font-size: 24px; opacity: 0.6; }
.score-breakdown { font-size: 14px; opacity: 0.85; margin-top: 4px; }
.score-band { font-size: 18px; font-weight: 700; margin: 10px 0; }
.score-advice { font-size: 14px; line-height: 1.5; }

/* Mobile adjustments */
@media (max-width: 700px) {
  .calc-view, .scores-view { padding: 14px; }
  .calc-indication-btn {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .calc-audit-row {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   v3.9.9 — Deteriorating Patient Panic Button
   ===================================================================== */

/* The big red button — sits in the protocol header title row */
.protocol-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.deterioration-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #C62828;
  color: #fff;
  border: 3px solid #B71C1C;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(198, 40, 40, 0.35);
  flex: 0 0 auto;
}
.deterioration-btn:hover { background: #B71C1C; box-shadow: 0 4px 12px rgba(198, 40, 40, 0.55); }
.deterioration-btn:active { transform: translateY(1px); }
.deterioration-icon { font-size: 18px; line-height: 1; }
.deterioration-label { white-space: nowrap; }
.deterioration-btn.armed {
  background: #FF6F00;
  border-color: #E65100;
  animation: detPulse 0.6s ease-in-out infinite alternate;
}
@keyframes detPulse {
  from { transform: scale(1); box-shadow: 0 2px 8px rgba(255, 111, 0, 0.4); }
  to { transform: scale(1.05); box-shadow: 0 4px 16px rgba(255, 111, 0, 0.7); }
}
.deterioration-btn.fired {
  background: #2E7D32;
  border-color: #1B5E20;
  animation: none;
}
@media (max-width: 700px) {
  .deterioration-btn { padding: 8px 12px; font-size: 12px; }
  .deterioration-icon { font-size: 16px; }
}

/* The persistent sticky banner — bottom of screen */
.deterioration-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #C62828;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  z-index: 200;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
  animation: detBannerSlideIn 0.3s ease-out;
}
@keyframes detBannerSlideIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.det-banner-icon {
  font-size: 24px;
  flex: 0 0 auto;
}
.det-banner-content {
  flex: 1 1 auto;
  min-width: 0;
}
.det-banner-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.det-banner-detail {
  font-size: 12px;
  opacity: 0.95;
  margin-top: 2px;
}
.det-banner-action {
  background: #fff;
  color: #C62828;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
.det-banner-action:hover { background: #FFCDD2; }
.det-banner-clear {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  flex: 0 0 auto;
}
.det-banner-clear:hover { background: rgba(255,255,255,0.15); }

@media (max-width: 700px) {
  .deterioration-banner {
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .det-banner-action { font-size: 12px; padding: 6px 10px; }
}

/* The vitals modal */
.det-modal-overlay {
  z-index: 300;
}
.det-modal {
  max-width: 600px;
  width: 95%;
}
.det-modal-context {
  background: rgba(0,0,0,0.04);
  padding: 12px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.7;
}
body:not(.light-mode) .det-modal-context { background: rgba(255,255,255,0.05); }

.det-modal-warning {
  background: #FFF8E1;
  border: 2px solid #F57F17;
  border-left-width: 6px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: #4A2C00;
  margin-bottom: 16px;
}
body:not(.light-mode) .det-modal-warning {
  background: #3a2e10;
  color: #FFE082;
  border-color: #FFB300;
}

.det-vitals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 16px;
}
.det-vitals-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}
.det-vitals-grid input {
  padding: 9px 11px;
  font-size: 16px;
  border: 1px solid var(--border, #ccc);
  border-radius: 5px;
  background: var(--input-bg, #fff);
  color: var(--text, #000);
}
body:not(.light-mode) .det-vitals-grid input {
  background: #2a2a2a;
  color: #f0f0f0;
  border-color: #444;
}
.det-modal textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border, #ccc);
  border-radius: 5px;
  background: var(--input-bg, #fff);
  color: var(--text, #000);
  font-family: inherit;
  resize: vertical;
  margin-bottom: 16px;
}
body:not(.light-mode) .det-modal textarea {
  background: #2a2a2a;
  color: #f0f0f0;
  border-color: #444;
}

.det-modal-pcr-reminder {
  background: #E3F2FD;
  border-left: 6px solid #1976D2;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: #0D2B45;
  margin: 16px 0 12px;
}
body:not(.light-mode) .det-modal-pcr-reminder {
  background: #1A2A3A;
  color: #BBDEFB;
}

.det-modal-pcr-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
}
.det-modal-pcr-check input { width: 22px; height: 22px; accent-color: #2E7D32; }

@media (max-width: 700px) {
  .det-vitals-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .det-vitals-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   v3.9.10 — Time-Stamped Intervention Log
   ===================================================================== */
.intervention-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #1976D2;
  color: #fff;
  border: 2px solid #0D47A1;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(25, 118, 210, 0.3);
  flex: 0 0 auto;
}
.intervention-btn:hover { background: #0D47A1; }
.intervention-btn:active { transform: translateY(1px); }
.intervention-icon { font-size: 16px; }
.intervention-label { white-space: nowrap; }
@media (max-width: 700px) {
  .intervention-btn { padding: 8px 10px; font-size: 11px; }
}

.intervention-modal-overlay { z-index: 280; }
.intervention-modal { max-width: 720px; width: 95%; }

.intv-event-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.04);
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
body:not(.light-mode) .intv-event-bar { background: rgba(255,255,255,0.05); }
.intv-event-bar label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  flex: 1 1 200px;
}
.intv-event-bar select {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--border, #ccc);
  border-radius: 4px;
  background: var(--input-bg, #fff);
  color: var(--text, #000);
  flex: 1 1 auto;
  max-width: 100%;
}
body:not(.light-mode) .intv-event-bar select {
  background: #2a2a2a;
  color: #f0f0f0;
  border-color: #444;
}

.intv-no-event {
  background: #FFF8E1;
  border: 2px dashed #F57F17;
  padding: 16px;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}
body:not(.light-mode) .intv-no-event {
  background: #3a2e10;
  color: #FFE082;
}

.intv-quickpick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.intv-quickpick-btn {
  padding: 12px 10px;
  background: rgba(25, 118, 210, 0.08);
  border: 2px solid #1976D2;
  border-radius: 6px;
  color: var(--text, inherit);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  line-height: 1.35;
}
.intv-quickpick-btn:hover {
  background: rgba(25, 118, 210, 0.18);
  transform: translateY(-1px);
}
.intv-quickpick-btn:active { transform: translateY(0); }
.intv-quickpick-btn.logged {
  background: #2E7D32;
  border-color: #1B5E20;
  color: #fff;
}

.intv-clinician-row {
  margin: 12px 0;
  font-size: 13px;
}
.intv-clinician-row label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.intv-clinician-row input {
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid var(--border, #ccc);
  border-radius: 4px;
  background: var(--input-bg, #fff);
  color: var(--text, #000);
}
body:not(.light-mode) .intv-clinician-row input {
  background: #2a2a2a;
  color: #f0f0f0;
  border-color: #444;
}

#intvTimeline {
  background: rgba(0,0,0,0.03);
  border-radius: 6px;
  padding: 12px;
  max-height: 320px;
  overflow-y: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px;
}
body:not(.light-mode) #intvTimeline { background: rgba(255,255,255,0.04); }
.intv-timeline-empty {
  text-align: center;
  opacity: 0.6;
  padding: 20px;
  font-style: italic;
}
.intv-timeline-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
body:not(.light-mode) .intv-timeline-row { border-bottom-color: rgba(255,255,255,0.06); }
.intv-timeline-row:last-child { border-bottom: none; }
.intv-timeline-time {
  font-weight: 700;
  color: #1976D2;
  flex: 0 0 90px;
}
body:not(.light-mode) .intv-timeline-time { color: #64B5F6; }
.intv-timeline-text { flex: 1 1 auto; }
.intv-timeline-meta {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

/* =====================================================================
   v3.9.11 — APGAR Serial Scoring UI
   ===================================================================== */

.apgar-start-card,
.apgar-active-card { padding: 18px; }

.apgar-start-prompt {
  background: rgba(0,0,0,0.04);
  padding: 16px;
  border-radius: 8px;
  margin-top: 12px;
}
body:not(.light-mode) .apgar-start-prompt { background: rgba(255,255,255,0.04); }

.apgar-start-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.apgar-start-row label {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}
.apgar-start-row input {
  padding: 9px 12px;
  font-size: 16px;
  border: 1px solid var(--border, #ccc);
  border-radius: 5px;
  background: var(--input-bg, #fff);
  color: var(--text, #000);
}
body:not(.light-mode) .apgar-start-row input {
  background: #2a2a2a;
  color: #f0f0f0;
  border-color: #444;
}

.apgar-recent-details {
  font-size: 13px;
  border-top: 1px solid var(--border, #ddd);
  padding-top: 12px;
}
.apgar-recent-details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}

.apgar-history-row {
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border, #ddd);
  border-radius: 6px;
  background: var(--card-bg, #fff);
}
body:not(.light-mode) .apgar-history-row {
  background: #1f1f1f;
  border-color: #333;
}

.apgar-session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.apgar-session-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(255, 105, 180, 0.08);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
  border-left: 4px solid #C2185B;
}
body:not(.light-mode) .apgar-session-meta {
  background: rgba(255, 105, 180, 0.12);
}

.apgar-timepoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.apgar-timepoint-btn {
  padding: 14px 12px;
  border-radius: 8px;
  border: 2px solid var(--border, #ccc);
  background: var(--card-bg, #fff);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: var(--text, inherit);
  transition: all 0.15s;
  position: relative;
}
.apgar-timepoint-btn:hover {
  border-color: #C2185B;
  transform: translateY(-1px);
}
.apgar-timepoint-btn.pending {
  opacity: 0.6;
}
.apgar-timepoint-btn.due {
  border-color: #1976D2;
  background: rgba(25, 118, 210, 0.08);
}
.apgar-timepoint-btn.overdue {
  border-color: #F57F17;
  background: rgba(245, 127, 23, 0.10);
}
.apgar-timepoint-btn.completed {
  border-color: #2E7D32;
  background: rgba(76, 175, 80, 0.08);
}
.apgar-timepoint-btn.critical {
  border-width: 3px;
}
body:not(.light-mode) .apgar-timepoint-btn {
  background: #1f1f1f;
  border-color: #333;
}

.apgar-tp-label {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}
.apgar-tp-score {
  font-size: 22px;
  font-weight: 700;
  color: #2E7D32;
  margin: 4px 0;
}
body:not(.light-mode) .apgar-tp-score { color: #81C784; }
.apgar-tp-detail {
  font-size: 11px;
  font-family: ui-monospace, Menlo, monospace;
  opacity: 0.85;
}
.apgar-tp-time {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 4px;
}
.apgar-tp-status {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 6px;
}

.apgar-scoring-form {
  background: rgba(255, 105, 180, 0.05);
  border: 2px solid #C2185B;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}
body:not(.light-mode) .apgar-scoring-form {
  background: rgba(255, 105, 180, 0.10);
}
.apgar-scoring-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.apgar-scoring-header h4 {
  margin: 0;
  color: #C2185B;
}
.apgar-form-close {
  background: transparent;
  border: 1px solid var(--border, #ccc);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: inherit;
}
.apgar-form-result {
  background: #E8F5E9;
  border-left: 4px solid #2E7D32;
  padding: 10px 12px;
  border-radius: 0 6px 6px 0;
  margin: 12px 0;
  font-size: 14px;
}
body:not(.light-mode) .apgar-form-result {
  background: #1F3322;
  color: #C8E6C9;
}

.apgar-trend-table-wrap {
  overflow-x: auto;
  margin-bottom: 8px;
}
.apgar-trend-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: ui-monospace, Menlo, monospace;
}
.apgar-trend-table th,
.apgar-trend-table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border, #e0e0e0);
}
.apgar-trend-table th {
  background: rgba(0,0,0,0.04);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
body:not(.light-mode) .apgar-trend-table th {
  background: rgba(255,255,255,0.06);
}
body:not(.light-mode) .apgar-trend-table td,
body:not(.light-mode) .apgar-trend-table th {
  border-bottom-color: rgba(255,255,255,0.10);
}
.apgar-trend-row.trend-mild { background: rgba(76, 175, 80, 0.06); }
.apgar-trend-row.trend-mod { background: rgba(245, 127, 23, 0.06); }
.apgar-trend-row.trend-severe { background: rgba(198, 40, 40, 0.08); }

@media (max-width: 700px) {
  .apgar-timepoint-grid { grid-template-columns: 1fr 1fr; }
  .apgar-trend-table { font-size: 11px; }
  .apgar-trend-table th, .apgar-trend-table td { padding: 6px 4px; }
}

/* ============================================================================
   v3.9.24 PATCH — Dark/Light Mode Readability Audit Fixes (Hammond 29 Apr 26)
   ----------------------------------------------------------------------------
   Comprehensive audit of stylesheet found six categories of dark-mode
   readability issues. This patch fixes them ADDITIVELY — no existing rule
   is modified.

   Issue inventory:
     1. Reversible Causes / 4Hs & 4Ts cards — light cream/pink bg + light
        text inherited from dark body → invisible
     2. .sidebar-tab — light grey #f0f0f0 bg with no text colour declared,
        inherits dark body's #e8e8e8 text → invisible
     3. .scope-tier.out-scope — #eee bg + #aaa text, very low contrast
        (functional in light mode, jarringly bright in dark mode)
     4. .auth-x/.auth-c1/.auth-c2/.auth-s/.auth-s1/.auth-s2/.auth-e/.auth-dash
        — dark variants gated on [data-theme="dark"] selector which is
        likely never set (rest of file uses body:not(.light-mode))
     5. .scope-block-body .drug-mini — same issue as #4 (uses [data-theme])
     6. Custom-rendered cards using inline-style hardcoded light backgrounds
        (the original Reversible Causes symptom — also catches future
        similar JS-rendered components)

   ============================================================================ */


/* ============ #1 + #6: Inline-style background colour catchers =============
   Catches any element rendered with style="background:#fff8e1" etc., which
   bypasses class-based dark-mode rules. Forces matching dark variant.
   Also catches text inside (color: inherit) so children don't override. */

body:not(.light-mode) [style*="background:#fff8e1"],
body:not(.light-mode) [style*="background: #fff8e1"],
body:not(.light-mode) [style*="background:#FFF8E1"],
body:not(.light-mode) [style*="background: #FFF8E1"],
body:not(.light-mode) [style*="background:#fff3e0"],
body:not(.light-mode) [style*="background: #fff3e0"],
body:not(.light-mode) [style*="background:#FFF3E0"],
body:not(.light-mode) [style*="background:#fffbe6"],
body:not(.light-mode) [style*="background: #fffbe6"] {
  background: #2a2414 !important;
  color: #ffe082 !important;
}
body:not(.light-mode) [style*="background:#fce4ec"],
body:not(.light-mode) [style*="background: #fce4ec"],
body:not(.light-mode) [style*="background:#FCE4EC"] {
  background: #2a1525 !important;
  color: #f8bbd0 !important;
}
body:not(.light-mode) [style*="background:#e3f2fd"],
body:not(.light-mode) [style*="background: #e3f2fd"],
body:not(.light-mode) [style*="background:#E3F2FD"] {
  background: #142030 !important;
  color: #bbdefb !important;
}
body:not(.light-mode) [style*="background:#e8f5e9"],
body:not(.light-mode) [style*="background: #e8f5e9"],
body:not(.light-mode) [style*="background:#E8F5E9"] {
  background: #14241a !important;
  color: #c8e6c9 !important;
}
body:not(.light-mode) [style*="background:#ffebee"],
body:not(.light-mode) [style*="background: #ffebee"],
body:not(.light-mode) [style*="background:#FFEBEE"] {
  background: #2a1414 !important;
  color: #ffcdd2 !important;
}
body:not(.light-mode) [style*="background:#e3ebf5"],
body:not(.light-mode) [style*="background: #e3ebf5"] {
  background: #14202a !important;
  color: #bbdefb !important;
}

/* Make children of these forced-coloured cards inherit the readable text */
body:not(.light-mode) [style*="background:#fff8e1"] *,
body:not(.light-mode) [style*="background: #fff8e1"] *,
body:not(.light-mode) [style*="background:#fff3e0"] *,
body:not(.light-mode) [style*="background: #fff3e0"] *,
body:not(.light-mode) [style*="background:#FFF8E1"] *,
body:not(.light-mode) [style*="background:#fce4ec"] *,
body:not(.light-mode) [style*="background: #fce4ec"] *,
body:not(.light-mode) [style*="background:#e3f2fd"] *,
body:not(.light-mode) [style*="background: #e3f2fd"] *,
body:not(.light-mode) [style*="background:#e8f5e9"] *,
body:not(.light-mode) [style*="background: #e8f5e9"] *,
body:not(.light-mode) [style*="background:#ffebee"] *,
body:not(.light-mode) [style*="background: #ffebee"] *,
body:not(.light-mode) [style*="background:#fffbe6"] *,
body:not(.light-mode) [style*="background:#e3ebf5"] * {
  color: inherit !important;
}

/* Class-based fallback for custom JS-rendered card classes */
body:not(.light-mode) [class*="reversible-cause"],
body:not(.light-mode) [class*="rev-cause"],
body:not(.light-mode) [class*="cause-card"] {
  color: #e8e8e8;
}


/* ============ #2: .sidebar-tab dark-mode fix =============
   Light grey #f0f0f0 bg with no text colour declared. */

body:not(.light-mode) .sidebar-tab {
  background: #2a2a2a;
  color: #d8d8d8;
  border-right-color: #333;
}
body:not(.light-mode) .sidebar-tabs {
  border-bottom-color: #333;
}
/* Active tab keeps yellow brand colour */
body:not(.light-mode) .sidebar-tab.active {
  background: var(--ems-yellow);
  color: var(--ems-black);
}


/* ============ #3: .scope-tier.out-scope contrast =============
   Original: #eee bg + #aaa text — very low contrast in any mode.
   Light mode: keep but darken the text. Dark mode: darker bg + lighter text. */

body:not(.light-mode) .scope-tier.out-scope {
  background: #2a2a2a;
  color: #777;
  border-color: #444;
}
body.light-mode .scope-tier.out-scope {
  /* keep #eee bg but darken text from #aaa to #888 for AA contrast */
  color: #888;
}


/* ============ #4 + #5: Auth-badge & drug-mini dual selector =============
   Existing rules use [data-theme="dark"] which may never be set. Add
   parallel rules with body:not(.light-mode) to match the rest of file. */

body:not(.light-mode) .auth-x   { background: #1B5E20; color: #C8E6C9; }
body:not(.light-mode) .auth-c1  { background: #5D4037; color: #FFF59D; }
body:not(.light-mode) .auth-c2  { background: #2E7D32; color: #A5D6A7; }
body:not(.light-mode) .auth-s,
body:not(.light-mode) .auth-s1,
body:not(.light-mode) .auth-s2  { background: #0D47A1; color: #BBDEFB; }
body:not(.light-mode) .auth-e   { background: #BF360C; color: #FFE0B2; }
body:not(.light-mode) .auth-dash{ background: #B71C1C; color: #FFCDD2; }

body:not(.light-mode) .scope-block-body .drug-mini {
  background: #3d2817;
  color: #ffb74d;
  border-color: #6d4c2a;
}
body:not(.light-mode) .scope-block-body .drug-mini:hover {
  background: #4a3220;
  border-color: #8b6234;
}


/* ============ Misc: paeds-toggle gradient white-stripe dark-mode fix =====
   Line 258 has a white stripe in the gradient — that's already overridden
   at line 1110 in dark section, but the light-mode body rule at line 1225
   restores it. This is correct. No action. */


/* ============ Misc: out-scope tier — also fix scope-tier-pill if used ===== */
body:not(.light-mode) .scope-pill:not(.active) {
  /* fade out inactive pills more in dark mode */
  filter: brightness(0.85);
}


/* End v3.9.24 readability patch */

/* ===========================================================
   v3.9.25 — Two-screen splash: LANDING (screen 1) + GOVERNANCE
   =========================================================== */

/* When intro-content is also intro-detail and "dismissed", hide it
   (lets us toggle screen 1 vs screen 2 inside the same overlay). */
.intro-content.dismissed { display: none; }

/* Screen 1 — Landing card (dark, dramatic) */
.intro-landing {
  background: #0d0d0d;
  color: #fff;
  border-top: 6px solid var(--ems-yellow);
  text-align: center;
  padding: 40px 36px 28px;
  max-width: 620px;
}

.intro-landing-logo {
  width: 130px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(255,193,7,0.25));
}

.intro-landing-title {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--ems-yellow);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.intro-landing-subtitle {
  font-size: 14px;
  color: #bbb;
  margin: 0 0 24px;
  font-style: italic;
  letter-spacing: 0.5px;
}

.intro-landing-story {
  font-size: 15px;
  line-height: 1.65;
  color: #e8e8e8;
  margin: 0 auto 26px;
  max-width: 520px;
  padding: 16px 20px;
  background: rgba(255,193,7,0.06);
  border-left: 3px solid var(--ems-yellow);
  border-radius: 4px;
  text-align: left;
}

.intro-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 auto 22px;
  max-width: 480px;
}

.intro-stat {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 14px 6px;
}

.intro-stat-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--ems-yellow);
  line-height: 1.1;
}

.intro-stat-label {
  font-size: 10px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

.intro-landing-aligned {
  font-size: 11px;
  color: #888;
  margin: 0 0 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.intro-landing-footer {
  font-size: 11px;
  color: #666;
  margin: 18px 0 0;
  letter-spacing: 0.4px;
}

/* Mobile: stack stats 2x2 */
@media (max-width: 480px) {
  .intro-stats { grid-template-columns: repeat(2, 1fr); max-width: 280px; }
  .intro-landing { padding: 30px 20px 22px; }
  .intro-landing-title { font-size: 24px; }
  .intro-landing-story { font-size: 14px; padding: 12px 14px; }
}

/* Screen 2 — Governance / CMD sign-off block */
.intro-cmd-signoff {
  text-align: center;
  margin: 22px 0 18px;
  padding: 20px 16px 18px;
  background: #fff;
  border: 2px solid var(--ems-yellow);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(255,193,7,0.12);
}

.intro-cmd-signoff .cmd-label {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 6px;
}

.intro-cmd-signoff .cmd-signature {
  display: block;
  height: 56px;
  width: auto;
  margin: 4px auto 6px;
}

.intro-cmd-signoff .cmd-name {
  font-size: 14pt;
  font-weight: 700;
  color: #000;
  margin: 0 0 2px;
  letter-spacing: 0.2px;
}

.intro-cmd-signoff .cmd-role {
  font-size: 10pt;
  color: #444;
  margin: 0 0 10px;
  font-style: italic;
}

.intro-cmd-signoff .cmd-meta {
  font-size: 9pt;
  color: #777;
  margin: 0;
  border-top: 1px solid #eee;
  padding-top: 8px;
  letter-spacing: 0.3px;
}

/* "Event Medical Director" label on Mike's block */
.intro-signoff .signoff-label {
  font-size: 11px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 8px;
}

/* Mike's signature image inside splash signoff block */
.intro-signoff .signoff-signature {
  display: block;
  height: 64px;
  width: auto;
  margin: 4px auto 6px;
}

/* Button row at bottom of detail screen (Back + Enter) */
.intro-button-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.intro-back {
  background: transparent;
  color: #444;
  border: 1.5px solid #ccc;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.intro-back:hover {
  background: #f5f5f5;
  border-color: #999;
}