/* ============================================================
   Coding engine — additive rules on top of meds.css.
   Scoped under .meds-content (the shared content mount) so it
   composes with the reused Meds component library. Adds only
   what meds.css can't express: SVG donut/sparkline, the spell
   footer, the pathway mini-timeline, SNOMED code tokens, the
   expandable audit panel, workbench steps, and the role-tab
   active state. No new colour tokens — palette from styles.css.
   ============================================================ */

/* role tab (navbar Clinician | Hospital admin) active underline parity */
.navbar-nav .nav-link.bordered.active { color: var(--bs-primary); }

/* ---------- SNOMED code tokens (spell timeline) ---------- */
.meds-content .cx-codes { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.meds-content .cx-code {
  display:inline-flex; align-items:center; gap:7px; background:#f7f8fb;
  border:1px solid #e8e9ed; border-radius:9px; padding:5px 10px; font-size:12px; color:#1f2e99;
}
.meds-content .cx-code .dot { flex:0 0 auto; }
.meds-content .cx-code .dot.ring { box-shadow:0 0 0 3px #efeaff; }
.meds-content .cx-code .cx-sctid { font-family:"SFMono-Regular",Menlo,Consolas,monospace; font-size:11px; color:#798599; }
.meds-content .cx-arrow { color:#acb4bc; padding:0 2px; }

/* ---------- expandable per-event audit panel ---------- */
.meds-content .cx-audit { margin-top:10px; border:1px solid #e8e9ed; border-radius:10px; overflow:hidden; }
.meds-content .cx-audit table.po-table th,
.meds-content .cx-audit table.po-table td { padding:9px 12px; font-size:12px; }
.meds-content .cx-event { border:1px solid #e8e9ed; border-radius:11px; padding:12px 14px; }
.meds-content .cx-event + .cx-event { margin-top:10px; }
.meds-content .cx-event-hd { display:flex; align-items:center; gap:10px; }
.meds-content .cx-event-hd .txt { flex:1; min-width:0; }
.meds-content .cx-event-hd .txt b { font-size:13px; color:#1f2e99; }
.meds-content .cx-event-hd .txt span { font-size:12px; color:#81868b; display:block; }

/* worth panel */
.meds-content .cx-worth { display:flex; gap:16px; flex-wrap:wrap; align-items:center; background:#f7f8fb; border:1px solid #e8e9ed; border-radius:10px; padding:10px 13px; margin-top:10px; }
.meds-content .cx-worth .w { font-size:12px; color:#798599; }
.meds-content .cx-worth .w b { display:block; font-size:16px; color:#1f2e99; }

/* ---------- pathway mini timeline (patient overview) ---------- */
.meds-content .cx-timeline { display:flex; align-items:center; gap:0; padding:14px 4px 6px; overflow-x:auto; }
.meds-content .cx-node { display:flex; flex-direction:column; align-items:center; min-width:96px; position:relative; }
.meds-content .cx-node::before { content:""; position:absolute; top:9px; left:-50%; width:100%; height:2px; background:#e0d6ff; z-index:0; }
.meds-content .cx-node:first-child::before { display:none; }
.meds-content .cx-node .n-dot { width:18px; height:18px; border-radius:50%; background:#efeaff; border:2px solid #5E37EF; z-index:1; }
.meds-content .cx-node .n-lbl { font-size:11px; color:#798599; margin-top:6px; text-align:center; }
.meds-content .cx-node .n-val { font-size:12px; font-weight:700; color:#1f2e99; }

/* ---------- SVG donut + sparkline (hospital admin) ---------- */
.meds-content .cx-donut-wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.meds-content .cx-donut { flex:0 0 auto; }
.meds-content .cx-legend { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.meds-content .cx-legend .lg { display:flex; align-items:center; gap:9px; color:#212529; }
.meds-content .cx-legend .lg .sw { width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.meds-content .cx-legend .lg .v { margin-left:auto; font-weight:700; color:#1f2e99; padding-left:18px; }
.meds-content .cx-spark { display:block; }
.meds-content .cx-bar { height:8px; border-radius:5px; background:#eef1f4; overflow:hidden; display:flex; }
.meds-content .cx-bar > span { display:block; height:100%; }

/* ---------- spell table footer ---------- */
.meds-content table.po-table tfoot td { border-top:2px solid #e8e9ed; border-bottom:none; font-size:12px; color:#798599; padding:12px 18px; }
.meds-content table.po-table tfoot .ft-total { font-size:14px; font-weight:700; color:#1f2e99; }
.meds-content .cx-chapter-row td { background:#fafbfc; }

/* ---------- workbench ---------- */
.meds-content .wb-steps { display:flex; flex-direction:column; gap:16px; }
.meds-content .wb-step { border:1px solid #e8e9ed; border-radius:14px; background:#fff; overflow:hidden; }
.meds-content .wb-step .wb-hd { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #e8e9ed; }
.meds-content .wb-step .wb-hd .wb-no { width:28px; height:28px; border-radius:50%; background:#efeaff; color:#5E37EF; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:14px; flex:0 0 auto; }
.meds-content .wb-step .wb-hd .h { font-size:15px; font-weight:700; color:#1f2e99; }
.meds-content .wb-step .wb-bd { padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.meds-content .wb-step.disabled { opacity:.5; pointer-events:none; }
.meds-content .wb-pick { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#f7f8fb; border:1px solid #e8e9ed; border-radius:10px; padding:9px 12px; }
.meds-content .wb-results { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
.meds-content .wb-result { display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; background:#fafbfc; border:1px solid #dfe1e6; border-radius:10px; padding:9px 12px; cursor:pointer; }
.meds-content .wb-result:hover { background:#f5f0fe; border-color:#5E37EF; }
.meds-content .wb-preset { cursor:pointer; }
.meds-content .wb-input { background:#fafbfc; border:1px solid #dfe1e6; border-radius:12px; padding:10px 14px; font-size:13px; color:#212529; width:100%; }
.meds-content .wb-input:focus { border-color:#5E37EF; outline:none; }

/* comparison hero */
.meds-content .cx-uplift { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.meds-content .cx-uplift .up-num { font-size:34px; font-weight:700; color:#00683c; letter-spacing:-.02em; }
.meds-content .cx-arrow-big { color:#acb4bc; font-size:22px; }

/* subtle mono for codes inline */
.meds-content .mono { font-family:"SFMono-Regular",Menlo,Consolas,monospace; }