/* ============================================================
   alg-ui.css — gpreasoning.uk algorithm page UI (opt-in), with alg-ui.js
   The approved protocol design's shared parts on algorithm pages: consult bar,
   References & sources at the end, urgency tokens, Copy to notes, search,
   "Updated" badge, Give to patient (QR), drug boxes, "Red flags" step name.
   Component rules are those of protocol-ui.css (same class names); the decision
   flow, progress bar, Why? drawers and Steps | Snapshot tabs are not restyled.
   Safe on any page: every rule is scoped to html.au or to classes alg-ui.js adds.
   All added chrome is hidden in print; print-only originals keep Ctrl+P unchanged.
   ============================================================ */

/* ---- 4. ONE urgency scheme, site-wide tokens (accepted 13 Oct 2026; WCAG AA:
   white on colour ≥5.3:1, colour on its tint ≥4.7:1). Labels are never changed,
   so colour is never the only signal. ---- */
:root{
  --u-999:#7f1712;      --u-999-bg:#fbe9e7;      --u-999-bd:#e9b4ad;
  --u-same-day:#b3261e; --u-same-day-bg:#fdecea; --u-same-day-bd:#f2c0bb;
  --u-2ww:#6a3fa0;      --u-2ww-bg:#f1ebf8;      --u-2ww-bd:#d6c6ec;
  --u-urgent:#8f4f00;   --u-urgent-bg:#fdf3e2;   --u-urgent-bd:#efd2a1;
  --u-routine:#2b7a3e;  --u-routine-bg:#e8f4eb;  --u-routine-bd:#b9dcc2;
  --pxa-focus:#15202b;
}
@media screen{
  .px-print-only{display:none!important}
}
@media print{
  .px-screen-only,.px-chrome,.pxa-chrome,.pxa-toast,.pxa-sheet,.pxa-qr,.pc-bar,.pc-copybar,.au-refs{display:none!important}
  .pxa-rf-h .pxa-rf-orig{display:inline!important;font:inherit!important;color:inherit!important;margin:0!important}
  mark.pxa-hit{background:none!important;box-shadow:none!important}
}

@media screen{
/* existing urgency pills (recoloured by label): colour on its tint */
html.au .alg-flow .pill.u-pill{font-weight:700}
html.au .alg-flow .pill.u-pill-999{color:var(--u-999);background:var(--u-999-bg);border-color:var(--u-999-bd)}
html.au .alg-flow .pill.u-pill-same-day{color:var(--u-same-day);background:var(--u-same-day-bg);border-color:var(--u-same-day-bd)}
html.au .alg-flow .pill.u-pill-2ww{color:var(--u-2ww);background:var(--u-2ww-bg);border-color:var(--u-2ww-bd)}
html.au .alg-flow .pill.u-pill-urgent{color:var(--u-urgent);background:var(--u-urgent-bg);border-color:var(--u-urgent-bd)}
html.au .alg-flow .pill.u-pill-routine{color:var(--u-routine);background:var(--u-routine-bg);border-color:var(--u-routine-bd)}
/* red-flag tiles: the left edge and title take the tile's (strongest) urgency */
html.au .alg-flow .rftile.u-tile{border-left-width:4px}
html.au .alg-flow .rftile.u-tile-999{border-left-color:var(--u-999)}       html.au .alg-flow .rftile.u-tile-999 > b{color:var(--u-999)}
html.au .alg-flow .rftile.u-tile-same-day{border-left-color:var(--u-same-day)} html.au .alg-flow .rftile.u-tile-same-day > b{color:var(--u-same-day)}
html.au .alg-flow .rftile.u-tile-2ww{border-left-color:var(--u-2ww)}       html.au .alg-flow .rftile.u-tile-2ww > b{color:var(--u-2ww)}
html.au .alg-flow .rftile.u-tile-urgent{border-left-color:var(--u-urgent)} html.au .alg-flow .rftile.u-tile-urgent > b{color:var(--u-urgent)}
html.au .alg-flow .rftile.u-tile-routine{border-left-color:var(--u-routine)} html.au .alg-flow .rftile.u-tile-routine > b{color:var(--u-routine)}

/* ---------- References & sources (end of page) ---------- */
.au-refs{max-width:720px;margin:28px auto 0;padding:20px 20px 12px;background:#fbf8f1;border:1px solid #e2dfd6;border-radius:14px;font-family:'DM Sans',system-ui,sans-serif}
.au-refs .px-refs-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
/* folds as one block, closed by default (Oct 2026) */
.au-refs.au-refs-fold > .px-refs-head{cursor:pointer;margin-bottom:0}
.au-refs.au-refs-fold[data-open="1"] > .px-refs-head{margin-bottom:14px}
.au-refs.au-refs-fold > .px-refs-head:focus-visible{outline:3px solid #f0b429;outline-offset:3px;border-radius:10px}
.au-refs.au-refs-fold[data-open="0"] > .px-refs-top{display:none}
.au-refs-chev{margin-left:auto;color:#6b6760;font-size:14px;transition:transform .2s}
.au-refs.au-refs-fold[data-open="0"] .au-refs-chev{transform:rotate(-90deg)}
.au-refs .px-refs-ic{width:38px;height:38px;border-radius:11px;background:#0c4a47;color:#f3ede0;display:grid;place-items:center;font-family:'Source Serif 4',Georgia,serif;font-size:20px;flex:none}
.au-refs .px-refs-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b6760}
.au-refs h2{font-family:'Source Serif 4',Georgia,serif;font-weight:500;font-size:22px;line-height:1.15;color:#1a1917;margin:0}
.au-refs .px-refs-top{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.au-refs .px-refs-blk{background:#fff;border:1px solid #e2dfd6;border-radius:12px;padding:12px 14px;min-width:0}
.au-refs .px-refs-blk h3{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b6760;margin:0 0 9px}
.au-meta-clone{display:flex;flex-wrap:wrap;gap:6px}
.au-meta-clone span{font-size:12px;font-weight:600;color:#0c4a47;background:#e9f3f1;border:1px solid #bcd9d4;padding:3px 10px;border-radius:999px}
.au-refs .pv-src{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:0;border:0}
.au-refs .pv-chip{white-space:normal;max-width:100%;overflow:visible;text-overflow:clip;font-family:'DM Sans',system-ui,sans-serif}
.au-refs .pv-chips{gap:6px}
.au-refs .pv-note{font-size:12px;color:#6b6760}
@media (max-width:760px){
  .au-refs{margin:22px 12px 0;padding:16px 14px 6px;border-radius:12px}
  .au-refs .px-refs-top{grid-template-columns:1fr}
  .au-refs h2{font-size:20px}
}

/* ---------- small shared bits ---------- */
@keyframes pxFlash{0%{box-shadow:0 0 0 0 rgba(181,76,43,0)}20%{box-shadow:0 0 0 4px rgba(181,76,43,.38)}100%{box-shadow:0 0 0 0 rgba(181,76,43,0)}}
.px-flash{animation:pxFlash 1.6s ease-out 1}
.pxa-btn{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1.2 'DM Sans',system-ui,sans-serif;color:#0c4a47;background:#fff;
  border:1px solid #d8cfba;border-radius:999px;padding:6px 12px;min-height:34px;cursor:pointer;white-space:nowrap}
.pxa-btn:hover{border-color:#0c4a47;background:#f2f8f7}
.pxa-btn svg{flex:none}
html.au :is(.pxa-btn,.pxa-find-i,.pxa-find button,.pxa-drug-h,.pxa-x,.pxa-qr-url,.pxa-bnf a,.pxa-lf-tab,.pxa-lf-more,.pc-copy):focus-visible{outline:3px solid var(--pxa-focus);outline-offset:2px}
html.au .pxa-upd-a:focus-visible{outline:3px solid #f0b429;outline-offset:2px;border-radius:3px}
html.au .au-refs a:focus-visible,html.au .pxa-chrome a:focus-visible{outline:3px solid var(--pxa-focus);outline-offset:2px;border-radius:6px}
.pxa-toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:9700;max-width:calc(100vw - 32px);
  background:#0c4a47;color:#f3ede0;font:600 14px/1.3 'DM Sans',system-ui,sans-serif;padding:10px 16px;border-radius:999px;box-shadow:0 10px 30px rgba(8,40,38,.3);transition:.2s ease}
.pxa-toast::before{content:"✓ ";color:#9fe0b6}
.pxa-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 1. copy to notes (per step) ---------- */
.au-steptools{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:-2px 0 8px}
.au-steptools .pxa-btn{min-height:32px;padding:5px 11px;font-size:12px}
/* the safety-net script rows and their bar */
html.au .kv > .au-sn-l{box-shadow:inset 4px 0 0 #0c4a47}
.pc-copybar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:#e9f3f1;border:1px dashed #8fbcb6;font-family:'DM Sans',system-ui,sans-serif}
.pc-copy-k{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0c4a47}
.pc-copy-btns{display:flex;flex-wrap:wrap;gap:8px}
.pc-copy{display:inline-flex;align-items:center;gap:8px;font:700 14px/1.2 'DM Sans',system-ui,sans-serif;color:#fff;background:#0c4a47;border:0;border-radius:999px;padding:9px 16px;cursor:pointer;min-height:44px}
.pc-copy:hover{background:#0e5c58}
.pc-copybar .pxa-btn{min-height:44px;font-size:13.5px;padding:8px 14px}
@media (max-width:760px){ .pc-copy,.pc-copybar .pxa-btn{width:100%;justify-content:center} .pc-copy-btns{width:100%} }

/* ---------- consult bar (Option C) ---------- */
html.pd body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.pc-bar{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(12,74,71,.97);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -10px 30px rgba(8,40,38,.22);font-family:'DM Sans',system-ui,sans-serif}
.pc-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;min-width:0;font:inherit;font-size:13px;font-weight:700;
  color:#f3ede0;background:transparent;border:0;border-radius:12px;cursor:pointer;letter-spacing:.01em}
.pc-b svg{width:24px;height:24px}
.pc-b:hover,.pc-b:focus-visible{background:rgba(255,255,255,.1)}
.pc-b:focus-visible{outline:3px solid #f0b429;outline-offset:-3px}
.pc-b[disabled]{opacity:.35;cursor:default}
.pc-b-red{color:#fff;background:#b3261e}
.pc-b-red:hover{background:#9d1f18}
.pc-b[aria-pressed="true"]{background:#f3ede0;color:#0c4a47}
@media (min-width:761px){
  .pc-bar{left:50%;right:auto;bottom:16px;transform:translateX(-50%);width:min(600px,calc(100vw - 32px));border-radius:20px;border:1px solid rgba(255,255,255,.14);padding:8px}
  .pc-b{min-height:54px}
}
@media (max-width:400px){ .pc-b{font-size:11.5px} .pc-b svg{width:22px;height:22px} .pc-bar{padding-left:5px;padding-right:5px;gap:2px} }
/* lift the accessibility button above the bar */
html.pd .rgp-a11y-btn{bottom:calc(96px + env(safe-area-inset-bottom))!important}
html.pd .rgp-a11y-panel{bottom:calc(152px + env(safe-area-inset-bottom))!important}

/* ---------- 5. give to patient: curated leaflets ---------- */
.pxa-qr{margin:4px 0 14px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #c9bfa9;box-shadow:0 10px 30px rgba(20,30,40,.12);max-width:100%;min-width:0;font-family:'DM Sans',system-ui,sans-serif;color:#1a1917}
.pxa-qr-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:15.5px}
.pxa-x{flex:none;font:400 22px/1 system-ui;width:36px;height:36px;border-radius:50%;border:1px solid #e7e0d1;background:#fbf8f1;color:#15202b;cursor:pointer}
.pxa-qr-wait{font-size:13.5px;color:#6b6760}
.pxa-lf-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pxa-lf-tab{display:inline-flex;align-items:center;gap:7px;font:700 13px/1.2 'DM Sans',system-ui,sans-serif;color:#2a3744;background:#fff;border:1px solid #d8cfba;border-radius:999px;padding:7px 13px;cursor:pointer}
.pxa-lf-tab[aria-selected="true"]{background:#0c4a47;border-color:#0c4a47;color:#fff}
.pxa-lf-dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 2px #fff}
.pxa-qr-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:start}
.pxa-qr-code{width:240px;height:240px;display:grid;place-items:center;background:#fff;border:1px solid #e7e0d1;border-radius:12px;font-size:12px;color:#6b6760}
.pxa-qr-code svg{width:100%;height:100%;display:block}
.pxa-lf-tier{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6b6760;margin-bottom:5px}
.pxa-lf-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin-bottom:6px}
.pxa-lf-badge{font:800 11.5px/1.3 'DM Sans',system-ui,sans-serif;color:#fff;border-radius:6px;padding:3px 8px;white-space:nowrap}
.pxa-lf-name{font-size:16px;color:#15202b;line-height:1.3}
.pxa-lf-d{font-size:13.8px;line-height:1.5;color:#2a3744;margin:0 0 8px}
.pxa-qr-url{display:inline-block;font-size:12.5px;font-weight:600;color:#0c4a47;word-break:break-all;margin-bottom:10px}
.pxa-qr-btns{display:flex;gap:8px;flex-wrap:wrap}
.pxa-lf-trans{margin-top:12px;padding:8px 12px;background:#efe9dc;border-radius:10px;font-size:12.8px;line-height:1.5;color:#2a3744}
.pxa-qr-note{margin-top:10px;font-size:12.5px;line-height:1.45;color:#7a3e00;background:#fdf3e2;border:1px solid #efd2a1;border-radius:8px;padding:7px 10px}
.pxa-lf-more{display:inline-block;margin-top:9px;font-size:13px;font-weight:700;color:#0c4a47}
.pxa-qr-priv{margin-top:6px;font-size:11.8px;line-height:1.4;color:#6b6760}
@media (max-width:620px){ .pxa-qr-grid{grid-template-columns:1fr} .pxa-qr-code{margin:0 auto;width:min(270px,100%);height:auto;aspect-ratio:1} .pxa-qr{padding:12px} }

/* ---------- 2. updated badge (dark page header) ---------- */
.alg-header .pxa-upd{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 7px;padding:2px 10px 2px 8px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);font:600 .72rem/1.5 'DM Sans',system-ui,sans-serif;color:#f3ede0}
.alg-header .alg-meta .pxa-upd span{background:none;padding:0;border-radius:0;font-size:inherit}
.alg-header .pxa-upd .pxa-upd-dot,.alg-header .alg-meta .pxa-upd .pxa-upd-dot{width:8px;height:8px;border-radius:50%;background:#7fe0a8;box-shadow:0 0 0 3px rgba(127,224,168,.25)}
.alg-header .pxa-upd-rev .pxa-upd-dot,.alg-header .alg-meta .pxa-upd-rev .pxa-upd-dot{background:#c9e6e2;box-shadow:none}
.alg-header .pxa-upd-a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.alg-header .pxa-upd-a:hover{color:#ffe7a8}

/* ---------- 3. search ---------- */
mark.pxa-hit{background:#ffe58a;color:inherit;border-radius:2px;padding:0 1px;box-shadow:0 0 0 1px #e0b400}
mark.pxa-hit-cur{background:#ff9f43;box-shadow:0 0 0 2px #b85c00}
.pxa-find{display:flex;flex-direction:column;gap:6px;min-width:0;font-family:'DM Sans',system-ui,sans-serif}
.pxa-find-l{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b6760}
.pxa-find-row{display:flex;gap:6px;min-width:0}
.pxa-find-i{flex:1;min-width:0;font:500 16px/1.2 'DM Sans',system-ui,sans-serif;padding:8px 11px;border:1px solid #d8cfba;border-radius:10px;background:#fff;color:#15202b}
.pxa-find-i::-webkit-search-cancel-button{display:none}
.pxa-find button{flex:none;font:700 15px/1 system-ui;width:36px;height:36px;border-radius:9px;border:1px solid #d8cfba;background:#fff;color:#0c4a47;cursor:pointer}
.pxa-find button:disabled{opacity:.4;cursor:default}
.pxa-find-nav{display:flex;align-items:center;gap:6px}
.pxa-find-n{flex:1;font-size:12.5px;font-weight:700;color:#2a3744;font-feature-settings:"tnum"}
.pxa-sheet{position:fixed;left:10px;right:10px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:9600;padding:12px 14px 14px;border-radius:16px;background:#fff;
  border:1px solid #c9bfa9;box-shadow:0 18px 40px rgba(8,40,38,.28);display:flex;flex-direction:column;gap:10px;font-family:'DM Sans',system-ui,sans-serif;color:#1a1917}
.pxa-sheet[hidden]{display:none}
.pxa-sheet-h{display:flex;align-items:center;justify-content:space-between;font-size:15px}
@media (min-width:761px){ .pxa-sheet{left:50%;right:auto;transform:translateX(-50%);width:min(520px,calc(100vw - 32px));bottom:96px} }
.pc-bar .pxa-findbtn svg{width:22px;height:22px}

/* ---------- 6. drug boxes (the text stays visible; Check · BNF opens below) ---------- */
html.au .alg-flow .au-drug{box-shadow:inset 4px 0 0 #0f766e}
.au-drug-bar{margin-top:8px;border:1px solid #9fd3cb;border-radius:9px;background:#f6fbfa;overflow:hidden;font-family:'DM Sans',system-ui,sans-serif}
.au-drug-bar.au-drug-after{margin:-2px 0 10px}
.pxa-drug-h{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:700 12.5px/1.25 'DM Sans',system-ui,sans-serif;color:#0b4f49;background:#e3f3f0;border:0;padding:6px 10px;cursor:pointer;min-height:34px}
.pxa-drug-ic{font-size:13px}
.pxa-drug-n{flex:1;min-width:0}
.pxa-drug-more-l{font-size:11.5px;font-weight:700;color:#0b4f49;background:#fff;border:1px solid #9fd3cb;border-radius:999px;padding:2px 8px;white-space:nowrap}
.pxa-drug-chev{transition:transform .15s}
.au-drug-bar.open .pxa-drug-chev{transform:rotate(180deg)}
.pxa-drug-more{padding:8px 11px 10px;border-top:1px dashed #b7dcd6;background:#fff}
.pxa-check-h{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0b4f49;margin-bottom:4px}
ul.pxa-check{list-style:none;margin:0 0 8px;padding:0}
ul.pxa-check li{font-size:12.8px;line-height:1.45;margin:0 0 4px;color:#2a3744}
.pxa-check b{display:inline-block;font-size:10.5px;font-weight:800;color:#7a3e00;background:#fdf3e2;border:1px solid #efd2a1;border-radius:5px;padding:0 5px;margin-right:4px}
.pxa-check-none{color:#6b6760!important;font-style:italic}
.pxa-bnf{display:flex;flex-wrap:wrap;gap:6px 12px}
.pxa-bnf a{font-size:12.5px;font-weight:700;color:#0c4a47}

/* ---------- 7. "Red flags" step name ---------- */
.pxa-rf-h .pxa-rf-name{display:block}
.pxa-rf-h .pxa-rf-orig{display:block;margin-top:2px;font-family:'DM Sans',system-ui,sans-serif;font-size:.82rem;font-weight:600;line-height:1.35;color:#6b6760}
html.au .alg-flow .node.pxa-rf-step[data-type] .node-num{background:var(--u-same-day)!important;color:#fff!important}
}

/* ---------- 8. "Next steps" protocol links (Upload 120) ----------
   Static <p class="alg-next"> at the end of the Treat step: links to the protocols
   for the main diagnoses the algorithm reaches. Shows on screen and in print. */
.alg-flow .alg-next{margin:12px 0 2px;padding:8px 12px;border:1px solid #bcd9d4;border-left:3px solid #0c4a47;border-radius:8px;
  background:#f2f8f7;font-family:'DM Sans',system-ui,sans-serif;font-size:13px;line-height:1.55;color:#2a3744}
.alg-flow .alg-next b{color:#0c4a47;font-weight:700}
.alg-flow .alg-next a{color:#0c4a47;font-weight:600;text-decoration:underline;text-decoration-color:#9cc7c1;text-underline-offset:2px;white-space:nowrap}
.alg-flow .alg-next a:hover{text-decoration-color:#0c4a47}
@media (max-width:560px){.alg-flow .alg-next a{white-space:normal}}
@media print{.alg-flow .alg-next{margin:3px 0 0 !important;padding:2px 5px !important;background:none !important;border:none !important;border-top:1px solid #c9c4ba !important;border-radius:0 !important}}