:root {
  --ink: #1b2733; --muted: #5d6b7a; --line: #d3dce5; --line2: #e6ecf1; --bg: #edf2f6; --card: #fff;
  --accent: #0f6e8c; --accent-d: #0b5870; --accent-2: #e3f1f6; --gold: #f2a81d; --warn: #fff4dc; --err: #b3261e; --err-bg: #fdecea;
  --ok: #1d7a3a; --ok-bg: #e6f4ea; --radius: 10px; --field: #c9d3dd;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 14px/1.45 "Segoe UI", system-ui, Arial, sans-serif; color: var(--ink); background: var(--bg); }
button { font: inherit; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 8px; padding: 6px 14px; min-height: 32px; font-weight: 600; }
button:hover { background: var(--accent-d); border-color: var(--accent-d); }
button.ghost { background: #fff; color: var(--accent); } button.ghost:hover { background: var(--accent-2); }
button.small, select.small { min-height: 28px; padding: 3px 11px; font-size: 13px; }
button:focus-visible { outline: 3px solid #0f6e8c55; outline-offset: 1px; }
input, select, textarea { font: inherit; border: 1px solid var(--field); border-radius: 7px; padding: 4px 9px; background: #fff; width: 100%; min-height: 32px; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #0f6e8c26; }
input::placeholder, textarea::placeholder { color: #9aa6b2; }
textarea { resize: vertical; line-height: 1.45; }
textarea.grow { min-height: 54px; overflow: hidden; resize: none; }
label, .flabel { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0; }
label > input, label > select, label > textarea { display: block; margin-top: 3px; font-weight: 400; font-size: 14px; }
.allergyin > input, .cadd > input, .calcall > input, .hochecks input, .cchecks input, .comoitem label > *, .hofilter input { display: inline-block; }
label small { font-weight: 400; }
kbd { font: 10.5px/1 "Segoe UI", Arial; padding: 2px 4px; border: 1px solid currentColor; border-radius: 3px; opacity: .6; margin-left: 4px; }
.err { color: var(--err); font-weight: 600; } .ok { color: var(--ok); } .muted { color: var(--muted); font-size: 12px; } .small { font-size: 12px; }
.rxmark { font-family: Georgia, "Times New Roman", serif; color: var(--accent); font-weight: 700; }

/* field widths: each box about as wide as what goes in it */
input.w-age { width: 72px; } select.w-sex { width: 100px; } input.w-uhid { width: 120px; } input.w-mob { width: 140px; } input.w-mail { width: 230px; }
select.w-lang { width: 118px; } input.w-date { width: 145px; } select.w-visit { width: 118px; } select.w-doc { width: 170px; } input.w-num { width: 82px; } input.w-bp { width: 96px; }
.bmibox { min-width: 104px; } .bmi { display: flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 3px; font-weight: 700; font-size: 15px; }
.bmi small { font-weight: 600; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--line2); color: var(--muted); }
.bmi small.hi { background: var(--warn); color: #8a5a00; } .bmi small.ok { background: var(--ok-bg); color: var(--ok); }

/* wrong entries */
input.bad, select.bad, textarea.bad { border-color: var(--err); background: #fff6f6; box-shadow: 0 0 0 2px #b3261e1f; }
.ferr { display: block; color: var(--err); font-size: 11.5px; font-weight: 600; line-height: 1.3; margin-top: 2px; white-space: normal; }
.ferr:empty { display: none; }

/* auth */
.authpage main.auth { max-width: 380px; margin: 12vh auto; background: var(--card); padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px #0002; border-top: 4px solid var(--gold); }
.auth h1 { margin: 0 0 4px; font-size: 22px; } .auth .sub { color: var(--muted); margin: 0 0 16px; }
.auth label { margin-top: 10px; } .auth button { width: 100%; margin-top: 14px; padding: 9px; }

/* header */
header.top { display: flex; gap: 16px; align-items: center; padding: 0 18px; height: 52px; background: linear-gradient(90deg, #0b5870, #128099); color: #fff; border-bottom: 3px solid var(--gold); position: sticky; top: 0; z-index: 30; }
header.top .brand { font-size: 17px; } header.top .brand .rxmark { color: #ffd479; }
header.top #ctxinfo, header.top .keys { color: #ffffffb8; font-size: 12px; }
header.top .scope { margin: 0 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #ffffffd0; }
header.top .scope select { width: auto; min-height: 30px; padding: 2px 6px; font-weight: 600; border-color: transparent; }
header.top .who { margin-left: 8px; font-size: 13px; } header.top a { color: #fff; }
.hbtn { background: #ffffff22; border-color: #ffffff55; min-height: 32px; display: none; } .hbtn:hover { background: #ffffff38; border-color: #fff; }
body.haspt .hbtn { display: inline-block; }
@media (max-width: 1250px) { header.top .keys { display: none; } }

/* layout */
main.app { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; padding: 16px; align-items: start; max-width: 1680px; margin: 0 auto; }
aside.left { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; }
aside h4 { margin: 16px 0 6px; display: flex; gap: 6px; align-items: center; } aside h4 input { width: auto; font-size: 12px; min-height: 28px; padding: 2px 6px; }
#newpt { width: 100%; margin-top: 8px; }
.res { display: block; width: 100%; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); margin: 6px 0; padding: 8px 10px; font-weight: 400; border-radius: 8px; }
.res:hover, .res:focus { border-color: var(--accent); background: var(--accent-2); } .res small { display: block; color: var(--muted); }
.empty { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 40px; text-align: center; color: var(--muted); }
.empty h2 { color: var(--ink); margin-top: 0; }
/* a patient open: the search list becomes a drawer ( ☰ Patients or / ) and the form gets the width */
body.haspt main.app { grid-template-columns: minmax(0, 1fr); }
body.haspt aside.left { position: fixed; top: 52px; left: 0; bottom: 0; width: 330px; max-height: none; border-radius: 0 12px 12px 0; z-index: 40; transform: translateX(-105%); transition: transform .18s ease; box-shadow: 6px 0 24px #0003; }
body.haspt.drawer aside.left { transform: none; }
.scrim { display: none; } body.haspt.drawer .scrim { display: block; position: fixed; inset: 52px 0 0 0; background: #0f172a40; z-index: 35; }
.work { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.formcol { min-width: 0; }

/* patient banner */
.banner { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 12px; padding: 12px 16px 10px; box-shadow: 0 1px 3px #0f2a3a10; }
.brow { display: flex; gap: 10px 14px; align-items: flex-start; flex-wrap: wrap; }
.brow label { flex: 0 0 auto; }
.brow .fname { flex: 1 1 240px; } .brow .bname { font-size: 19px; font-weight: 700; color: #0b3d4f; min-height: 36px; }
.allergy-row, .como-row { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line2); align-items: center; gap: 6px 8px; }
.rowlbl { width: 110px; flex: none; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.allergyin { width: 300px; } .allergyin input { margin-top: 0; }
.langin { margin-left: auto; display: flex; align-items: center; gap: 8px; } .langin > select { display: inline-block; margin: 0; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { min-height: 28px; padding: 3px 12px; border-radius: 999px; background: #f6f8fa; color: #3e4c5a; border: 1px solid var(--field); font-size: 13px; font-weight: 600; }
.chip:hover { background: var(--accent-2); border-color: var(--accent); color: var(--accent-d); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.add { border-style: dashed; }
.chip.allergy { background: var(--err-bg); color: var(--err); border-color: #f2b8b5; display: inline-block; }
.chip.quiet { display: inline-block; font-size: 12px; }
#nkda { background: #fff; }
#como .chip.on { background: #6d3fb0; border-color: #6d3fb0; }
#comomore { width: auto; max-width: 150px; min-height: 28px; font-size: 13px; border-radius: 999px; padding: 2px 8px; }

/* tabs */
.tabs { display: flex; gap: 8px; margin: 14px 0 0; }
.tabs button { background: #fff; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-weight: 600; min-height: 34px; }
.tabs button:hover { color: var(--accent); border-color: var(--accent); background: #fff; }
.tabs button.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.tabs button.on .count { background: #fff; }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-2); color: var(--accent); font-size: 12px; text-align: center; }
.count:empty { display: none; }
#tab-rec, #tab-calc, #tab-ho { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 16px; margin-top: 12px; }

/* prescription sections: each a card with its own colour and number */
.sec { --sc: #475569; --st: #f1f5f9; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--sc); border-radius: 12px; padding: 0 16px 14px; margin-top: 14px; box-shadow: 0 1px 3px #0f2a3a10; }
.sec[data-sec="complaints"]   { --sc: #4f5bd5; --st: #eef0ff; }
.sec[data-sec="inv_reviewed"] { --sc: #1f7ab8; --st: #eaf4fb; }
.sec[data-sec="diagnosis"]    { --sc: #8246c2; --st: #f4edfb; }
.sec[data-sec="meds"]         { --sc: #0f8a6f; --st: #e7f6f1; }
.sec[data-sec="advice"]       { --sc: #b7791f; --st: #fdf6e7; }
.sec[data-sec="inv_advised"]  { --sc: #cf5a2e; --st: #fdf0ea; }
.sec[data-sec="followup"]     { --sc: #2f855a; --st: #e9f6ee; }
.sec[data-sec="private"]      { --sc: #6b4f3a; --st: #f6efe9; border-style: dashed; border-top-style: solid; }
.sech { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 -16px 12px; padding: 8px 16px; background: var(--st); color: var(--sc); font-size: 15px; font-weight: 700; border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--line2); }
.sech small { font-size: 12px; font-weight: 400; color: var(--muted); }
.sech .rxmark { color: var(--sc); font-size: 17px; }
#rxsecs { counter-reset: sec; }
#rxsecs .sech::before { counter-increment: sec; content: counter(sec); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sc); color: #fff; font-size: 12px; }
.sechact { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; } .sechact select { width: auto; }
.sec.flash, .banner.flash { outline: 3px solid var(--gold); outline-offset: 2px; }
.vitals { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-top: 8px; } .field .flabel { margin: 0 0 3px; }

/* medicines */
table.items { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 8px; table-layout: fixed; }
table.items th { font-size: 11.5px; color: var(--muted); text-align: left; font-weight: 700; padding: 0 4px 5px; text-transform: uppercase; letter-spacing: .03em; }
table.items th small { text-transform: none; font-weight: 400; letter-spacing: 0; }
table.items td { padding: 5px 4px; vertical-align: top; border-bottom: 1px solid var(--line2); }
table.items th:nth-child(1) { width: 86px; } table.items th:nth-child(3) { width: 104px; } table.items th:nth-child(4) { width: 104px; }
table.items th:nth-child(5) { width: 19%; } table.items th:nth-child(6) { width: 112px; } table.items th:nth-child(7) { width: 38px; }
table.items select, table.items input { min-height: 30px; padding: 3px 7px; }
button.x { background: #fff; color: var(--err); border-color: var(--line); padding: 3px 8px; min-height: 30px; }
button.x:hover { background: var(--err-bg); border-color: var(--err); }
#addrow { margin-top: 2px; }

/* investigation picker */
.advrow { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } .advrow .picker { flex: 1 1 380px; } .advrow #invblocks { flex: 0 1 auto; }
.picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--field); border-radius: 8px; padding: 4px; min-height: 36px; cursor: text; background: #fff; }
.picker:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #0f6e8c26; }
.picker .tag { display: inline-flex; align-items: center; gap: 4px; background: var(--st, var(--accent-2)); border: 1px solid #f0c9b8; color: var(--ink); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 13px; }
.picker .tv { width: 90px; min-height: 24px; padding: 1px 6px; font-size: 13px; border-radius: 999px; }
.picker .tx { background: transparent; border: 0; color: var(--muted); min-height: 22px; padding: 0 6px; }
.picker .tin { flex: 1 1 220px; border: 0; min-height: 28px; box-shadow: none; }

/* follow-up */
.fu { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fu .grow { flex: 1 1 260px; width: auto; }
#fuprev { margin-top: 6px; }

/* sticky save bar */
.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -4px 16px #0f2a3a14; }
.savebar #status { margin-right: auto; font-size: 13px; }
.state { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.state.unsaved { background: var(--warn); color: #8a5a00; } .state.saved { background: var(--ok-bg); color: var(--ok); } .state.new { background: var(--line2); color: var(--muted); }

/* checks panel (all warnings live here, so the form never shifts) */
.rail { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 12px; padding: 10px 12px 12px; box-shadow: 0 1px 3px #0f2a3a10; }
.railh { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--line2); }
#railsum:not(:empty) { background: var(--warn); color: #8a5a00; border-radius: 999px; padding: 0 8px; font-weight: 700; font-size: 12px; }
.railnone { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.rgrp { margin-top: 10px; } .rgrp h5 { margin: 0 0 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rail .dxwarn { margin-top: 0; }
.rail .warn { cursor: pointer; align-items: flex-start; font-size: 12.5px; line-height: 1.35; padding: 5px 4px 5px 9px; }
.rail .warn:hover { filter: brightness(.97); }
.rail .warn .tx { align-self: flex-start; }
@media (max-width: 1180px) { .work { grid-template-columns: minmax(0, 1fr); } .rail { position: static; max-height: none; } }

/* print preview */
.modal { position: fixed; inset: 0; z-index: 60; background: #0f172a8c; display: flex; align-items: center; justify-content: center; }
.modalbox { width: min(920px, 96vw); height: 94vh; background: #fff; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 40px #0006; }
.modalh { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.modalbox iframe { flex: 1; border: 0; width: 100%; background: #888; }
body.modalopen { overflow: hidden; }
.preview .toolbar.pvbar { background: #fff7e0; border-bottom: 2px solid var(--gold); font-size: 13px; }
.pverr { margin: 20px; padding: 14px; background: #fff; color: var(--err); font-weight: 600; border-radius: 8px; }
.adminlinks { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--line2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 14px; } .adminlinks a { color: var(--accent); }

/* records */
.rsec { margin-top: 12px; } .rsec h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; margin: 5px 0; font-size: 13px; background: #fff; }
.card.app { border-left: 4px solid var(--gold); }
.card .ch { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .card .acts { margin-left: auto; } .card a { color: var(--accent); }
.card .src { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.card ol { margin: 4px 0; padding-left: 20px; } .card pre { white-space: pre-wrap; font: 13px/1.45 "Segoe UI", Arial, sans-serif; margin: 6px 0 0; max-height: 420px; overflow: auto; }
.card summary { cursor: pointer; }
.none { color: var(--muted); font-style: italic; margin: 2px 0 6px; } .none.big { font-size: 15px; padding: 12px; background: var(--warn); border-radius: 6px; font-style: normal; color: #6b4a00; }
.placeholder { padding: 20px; color: var(--muted); }

@media (max-width: 1100px) {
  main.app { grid-template-columns: 1fr; } aside.left { position: static; max-height: none; }
  .grid6 { grid-template-columns: repeat(3, 1fr); } .grid2 { grid-template-columns: 1fr; }
}

/* print view */
.printpage { background: #888; }
.toolbar { background: #fff; padding: 8px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.toolbar button[data-n] { padding: 2px 8px; background: #fff; color: var(--accent); min-height: 26px; } .toolbar .hint { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--muted); }
.sheet { width: 210mm; min-height: 297mm; margin: 12px auto; background: #fff url(letterhead.jpg) top left / 210mm 297mm no-repeat; }
.nobg .sheet { background-image: none; }
.content { font: 10.5pt/1.36 Arial, "Nirmala UI", sans-serif; color: #000; }
/* first-page header: the date sits on the pre-printed "Date:" line; facts stay left of the box at top right */
.content .date { height: 6mm; padding-left: 5mm; font-size: 11pt; font-weight: bold; }
.content .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; max-width: 118mm; min-height: 14mm; margin: 0 0 2mm; align-content: start; }
.content .facts div { display: flex; gap: 2mm; } .content .facts .wide { grid-column: 1 / -1; }
.content .facts dt { color: #444; font-size: 9pt; min-width: 17mm; } .content .facts dd { margin: 0; font-weight: bold; }
.content section { margin: 0 0 2.2mm; break-inside: avoid; }
.content h3 { font-size: 9pt; margin: 0; text-transform: uppercase; letter-spacing: .03em; color: #333; }
.content .rx { margin-top: 3mm; } .content .rxsym { width: 7mm; height: 7.7mm; display: block; margin: 0 0 1mm; }
.content .rx { break-inside: auto; }
table.meds { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
table.meds th { text-align: left; font-size: 8.5pt; font-weight: normal; color: #444; border-bottom: .3mm solid #000; padding: 0 2mm .8mm 0; }
table.meds td { padding: 1.1mm 2mm 1.1mm 0; border-bottom: .1mm solid #bbb; vertical-align: top; }
table.meds td.n { width: 6mm; } table.meds tr { break-inside: avoid; }
table.meds th:nth-child(3), table.meds td:nth-child(3) { width: 20mm; } table.meds th:nth-child(5), table.meds td:nth-child(5) { width: 22mm; }
table.meds th:nth-child(4), table.meds td:nth-child(4) { width: 36mm; }
.content .sign { margin: 10mm 4mm 0 auto; width: 58mm; text-align: center; break-inside: avoid; font-size: 10pt; }
.content .sign small { font-size: 8pt; }
.content .sigline { height: 12mm; border-bottom: 1px solid #000; margin-bottom: 1mm; }
@media print {
  .no-print { display: none !important; }
  html, body, .printpage { background: #fff !important; }
  .sheet { width: auto; min-height: 0; margin: 0; padding: 0 !important; background: none !important; }
}

/* handouts tab */
.hotop { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; } .hotop label { margin: 0; } .hotop select { width: 140px; }
.hotop .hoadmin { margin-left: auto; color: var(--accent); font-size: 13px; }
.hogrid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.hopick h4 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.hopick h4:first-child { margin-top: 0; } .hopick .flabel { margin-top: 8px; }
.hochecks label { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 400; color: var(--ink); margin: 4px 0; }
.hochecks input { width: auto; min-height: 0; }
#hoprint { margin-top: 16px; width: 100%; }
.chip[disabled] { opacity: .4; cursor: default; }
.hoprev { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; background: #fbfcfd; max-height: 640px; overflow: auto; font-family: "Segoe UI", "Nirmala UI", Arial, sans-serif; }
.hoprev .hob h4 { margin: 10px 0 4px; } .hoprev .hob ul { margin: 0; padding-left: 20px; } .hoprev .hob.draft { opacity: .55; }
.badge { font-size: 11px; font-weight: 600; background: var(--warn); color: #8a5a00; border-radius: 4px; padding: 1px 6px; }
.howarn { background: var(--warn); color: #6b4a00; padding: 6px 10px; border-radius: 6px; font-size: 13px; margin: 4px 0 8px; flex-basis: 100%; }

/* handout review page */
main.horeview { max-width: 1340px; margin: 0 auto; padding: 14px; font-family: "Segoe UI", "Nirmala UI", Arial, sans-serif; }
.horeview h2 { font-size: 16px; color: var(--accent); margin: 22px 0 6px; }
.hofilter { display: flex; gap: 16px; align-items: center; } .hofilter label { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ink); } .hofilter input { width: auto; min-height: 0; }
.hocard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin: 8px 0; }
.hocol { display: flex; flex-direction: column; gap: 5px; } .hocolh { display: flex; justify-content: space-between; align-items: center; }
.hocol .hot { font-weight: 600; } .hocol textarea { font: 13px/1.5 "Segoe UI", "Nirmala UI", Arial, sans-serif; }
.hoacts { display: flex; gap: 6px; align-items: center; } .hoacts small { margin-right: auto; }
.st { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; } .st.approved { background: var(--ok-bg); color: var(--ok); } .st.draft { background: var(--warn); color: #8a5a00; }
@media (max-width: 1100px) { .hogrid, .hocard { grid-template-columns: 1fr; } }

/* handouts on paper: start on a new page, under the letterhead box */
.content .handouts.only { padding-top: 18mm; }
.content .hohead { font-size: 9pt; color: #333; margin: 0 0 3mm; border-bottom: .2mm solid #999; padding-bottom: 1mm; }
.content .handouts { font-size: 10pt; }
.content .hob { break-inside: avoid; margin: 0 0 3mm; }
.content .hob.long { break-inside: auto; } .content .hob.long li { break-inside: avoid; } .content .hob.long h3 { break-after: avoid; }   /* 04-Oct-2026 */
.pages .hob.hpart { margin-bottom: 0; }
.content .hob h3 { font-size: 11pt; text-transform: none; letter-spacing: 0; color: #000; margin: 0 0 1mm; }
.content .hob ul { margin: 0; padding-left: 5mm; } .content .hob li { margin: 0 0 .5mm; }
.content [lang="gu"], .content [lang="hi"] { font-family: "Nirmala UI", "Noto Sans Gujarati", "Noto Sans Devanagari", Arial, sans-serif; line-height: 1.42; }
@media print { .sheet2 { break-before: page; } }
.toolbar .howarn { flex-basis: auto; margin: 0; }

/* records: rendered note Markdown */
.card .md { margin: 6px 0 0; max-height: 480px; overflow: auto; line-height: 1.5; }
.md .mdh { font-weight: 700; color: var(--accent); margin: 8px 0 2px; } .md .mdh:first-child { margin-top: 0; }
.md ul, .md ol { margin: 2px 0; padding-left: 20px; } .md li.sub { margin-left: 18px; list-style-type: circle; }
.md hr { border: 0; border-top: 1px solid var(--line2); margin: 6px 0; } .md .gap { height: 6px; }
.md table.mdt { border-collapse: collapse; margin: 4px 0; font-size: 12.5px; } .md .mdt th, .md .mdt td { border: 1px solid var(--line); padding: 2px 6px; text-align: left; vertical-align: top; }
.md .mdt th { background: var(--accent-2); } .md code { background: var(--line2); padding: 0 3px; border-radius: 3px; font-size: 12px; }
.md .mdq { border-left: 3px solid var(--gold); background: #fffaf0; padding: 4px 8px; margin: 4px 0; border-radius: 0 4px 4px 0; }
.md .mdpre { white-space: pre-wrap; font: 12px/1.4 Consolas, monospace; background: var(--line2); padding: 6px; border-radius: 4px; }
.md mark { background: #fff2a8; }

/* calculators tab */
.calcall { display: flex; gap: 6px; align-items: center; margin: 0 0 0 auto; font-weight: 400; color: var(--ink); } .calcall input { width: auto; min-height: 0; }
.calcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; align-items: start; }
.calc { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: #fff; }
.calc h4 { margin: 0 0 4px; color: var(--accent); } .calc label { margin: 5px 0 0; } .calc label small { font-weight: 400; }
.calc input, .calc select { min-height: 30px; padding: 3px 6px; }
.cres { margin: 10px 0 4px; padding: 8px; background: var(--accent-2); border-radius: 6px; } .cres b { font-size: 17px; } .cres span { color: var(--muted); }
.cwarn { margin-top: 4px; color: var(--err); font-size: 12px; font-weight: 600; }
.cadd { display: flex !important; gap: 6px; align-items: center; color: var(--ink) !important; font-weight: 600; } .cadd input { width: auto; min-height: 0; }
.csrc { font-size: 11px; color: var(--muted); margin-top: 4px; } .csrc summary { cursor: pointer; }
.cchecks { margin-top: 6px; } .cchecks label { display: flex; gap: 6px; align-items: flex-start; font-weight: 400; color: var(--ink); margin: 2px 0; font-size: 13px; }
.cchecks input[type=checkbox] { width: auto; min-height: 0; margin-top: 3px; }
.calc.tnm { margin-top: 10px; } .tnmrow { display: flex; gap: 10px; } .tnmrow label:first-child { flex: 1; } .tnmrow select { min-height: 30px; }
#tnmsel { display: contents; } #tnmtable { margin: 4px 0; } #tnmaxes select { max-width: 100%; }
.tnmcard h5 { margin: 12px 0 4px; } .tnmcard details { margin: 6px 0; } .tnmcard summary { cursor: pointer; font-weight: 600; }
.tnmt td:first-child { white-space: nowrap; } .tnmt td:nth-child(3) { font-size: 12px; }
.tnmtry { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0; } .tnmtry select { max-width: 220px; } .tnmout { font-weight: 600; }

/* module 1: diagnosis, lifecycle stage, template, warnings */
.dxrow { display: flex; gap: 10px 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; } .dxrow:first-child { margin-top: 0; } .dxrow label { margin-top: 0; } .dxrow .grow { flex: 1 1 260px; }
.dxrow select { width: auto; max-width: 280px; } #lifecycle { min-width: 190px; }
.dxcode { display: inline-flex; gap: 5px; align-items: center; min-height: 32px; }
.codechip { font-size: 12px; border: 1px solid var(--accent); color: var(--accent); border-radius: 4px; padding: 2px 7px; background: #fff; white-space: nowrap; }
.dxcert .chip { min-height: 30px; } .dxprev { margin-top: 4px; font-size: 13px; color: var(--ink); font-weight: 600; } .dxprev:empty { display: none; }
#dxstagerow select { min-width: 64px; } #dxedition { min-width: 160px; }
.dxtpl { margin-top: 6px; font-size: 13px; } .dxtpl:empty, .dxwarn:empty, #dxsugg:empty { display: none; }
.chip.sugg { border-style: dashed; color: var(--accent); margin-top: 6px; }
.dxwarn { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.warn { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 3px 4px 3px 9px; border-radius: 5px; border-left: 4px solid; }
.warn.info { background: var(--accent-2); border-color: var(--accent); } .warn.caution { background: var(--warn); border-color: var(--gold); color: #6b4a00; }
.warn.stop { background: var(--err-bg); border-color: var(--err); color: var(--err); font-weight: 600; }
.warn .tx { margin-left: auto; background: transparent; border: 0; color: var(--muted); min-height: 22px; padding: 0 6px; }
.content small.codes { font-size: 8pt; color: #444; white-space: nowrap; }

/* module 1 review page */
.dxreview .tabs { margin-bottom: 8px; } .dxreview .hofilter input[type=search] { width: 360px; min-height: 32px; }
.dxcard { grid-template-columns: 1fr; } .dxcard code { font-size: 12px; color: var(--muted); }
.dxgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; } .dxgrid .w2 { grid-column: span 3; }
.dxgrid label { margin-top: 4px; } .dxgrid textarea { font: 13px/1.4 Consolas, "Segoe UI", monospace; }
table.dxmap { border-collapse: collapse; width: 100%; background: #fff; font-size: 13px; } .dxmap th, .dxmap td { border: 1px solid var(--line); padding: 3px 8px; text-align: left; vertical-align: top; }
.dxmap th { background: var(--accent-2); } .dxmap tr.unmapped td { background: #fffaf0; }
@media (max-width: 1100px) { .dxgrid { grid-template-columns: 1fr; } .dxgrid .w2 { grid-column: span 1; } }

/* module 2: generic under a brand, medicine warnings */
#items small.gen { display: block; font-size: 11px; color: var(--muted, #667); margin-top: 2px; min-height: 0; }
#items small.gen:empty { display: none; }
#medsugg { margin-top: 6px; }
#medwarn { margin-top: 4px; }
.content small.gen { font-size: 8.5pt; color: #333; font-weight: normal; }

/* ---------- module 3: investigations — REVIEWED (results brought) and ADVISED (tests ordered) look different on purpose ---------- */
.invhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.upbtn { display: inline-flex; align-items: center; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; padding: 2px 10px; font-size: 13px; background: #fff; }
#invrows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.invrow { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px; }
.invrow.draft { border: 2px dashed #c98a00; background: #fffaf0; }
.invr1, .invr2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.invr2 { margin-top: 4px; }
.invname { flex: 1 1 260px; font-weight: 600; } .invdate { width: 150px; } .invkind { width: 110px; }
.invsum { flex: 1 1 300px; }
.iv { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.iv input { border: 0; border-radius: 0; min-height: 26px; padding: 1px 5px; font-size: 13px; }
.iv .invl { background: #eef3f7; color: var(--muted); } .iv .invv { font-weight: 700; } .iv .invu { color: var(--muted); }
.iv.flag .invv { color: var(--err); } .iv .fl { color: var(--err); padding: 0 5px; align-self: center; font-size: 12px; }
#invmsg:empty, #invblocks:empty, #invwarn:empty { display: none; }
#invblocks { margin: 4px 0 6px; } #invblocks .lbl { font-size: 12px; color: var(--muted); margin-right: 4px; }
.st.retired { background: #eee; color: #666; }
@media print { .invrow.draft { display: none; } }

/* module 4: comorbidities — chips cycle present → No → clear; one detail row per coded condition */
.chip.no { background: #fff; color: var(--muted); border-style: dashed; text-decoration: line-through; }
.chip.free { border-style: dotted; color: var(--ink); }
.comodet { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .comodet:empty, #comosugg:empty, #comowarn:empty { display: none; }
.comoitem { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; padding: 3px 8px; border-left: 3px solid var(--accent); background: #f7f9fc; }
.comoitem label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.comoitem select, .comoitem input { font-size: 13px; padding: 1px 4px; min-height: 24px; }
.comoitem .cmulti { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; }
.comoitem .cmulti label { color: var(--ink); }
small.auto { color: var(--accent); font-weight: 600; }
.covtiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.covtile { display: flex; flex-direction: column; align-items: flex-start; min-width: 120px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.covtile b { font-size: 20px; } .covtile span { font-size: 12px; color: var(--muted); } .covtile.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.rxtest { flex: 1; font-size: 12px; } .rxtest input { width: 260px; }

/* module 11: warnings engine — allergy box, checks count in the save bar, review screen */
.allergyin { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.allergyin input { font-size: 13px; }
.savebar .checks { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; margin-right: 8px; }
.checks .ck { padding: 1px 7px; border-radius: 10px; text-decoration: none; border: 1px solid; }
.checks .ck.stop { background: var(--err-bg); color: var(--err); border-color: var(--err); font-weight: 700; }
.checks .ck.caution { background: var(--warn); color: #6b4a00; border-color: var(--gold); }
.checks .ck.info { color: #555; border-color: #bbb; }
.warn.flash { outline: 3px solid #e0a640; }
.warnreview .wrow-muted { opacity: .55; }
.warnreview .mdt td small { color: #666; }
.warnreview .sevsel { width: auto; }

/* medicine instructions on paper: one line under each medicine, in the patient's language */
table.meds tbody.med { break-inside: avoid; }
table.meds tbody.med:has(tr.howto) tr:first-child td { border-bottom: 0; padding-bottom: .2mm; }
table.meds tr.howto td { padding: 0 2mm 1.3mm 0; font-size: 9.6pt; line-height: 1.35; color: #111; }
table.meds tr.howto td:nth-child(2) { width: auto; }
.content [lang="gu"], .content [lang="hi"] { font-family: "Nirmala UI", "Noto Sans Gujarati", "Noto Sans Devanagari", Arial, sans-serif; }

/* module rows inside the new section cards */
.invhead { display: none; }
#invrows { margin-top: 0; }
.dxwarn:empty, #dxsugg:empty, #medsugg:empty, #comosugg:empty { display: none; }
#comosugg { margin-top: 8px; } #comodet { margin-top: 8px; }
#invblocks .lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
#invmore { width: auto; }
.savebar .checks { margin-right: 4px; }

/* ---------- organ-system prompts (prompts.js; approved on /?p=prompts) ---------- */
/* prompts round 3: Organ system · Lifecycle stage · Consultation in one row of three equal columns; one column on a narrow screen */
/* round 3b: flex, not grid — each label + select keeps its own box (no overlap); the three wrap only when the column is too narrow */
.orgbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 10px; }
.orgbar label { flex: 1 1 210px; display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 12px; color: var(--muted); white-space: nowrap; }
.orgbar select { flex: 1 1 0; width: 0; min-width: 110px; font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
.orgbar #orgnote { flex: 1 1 100%; }
.orgbar #orgnote:empty { display: none; }
.grid2 > div { min-width: 0; }
.pchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.pchips:empty { display: none; }
.chip.pchip { min-height: 24px; padding: 1px 10px; font-size: 12.5px; font-weight: 500; background: #fff; border-color: #b9d9e4; color: var(--accent-d); }
.chip.pchip.gen { border-color: var(--line); color: #3e4c5a; }
.chip.pchip:hover { background: var(--accent-2); border-color: var(--accent); }
.chip.pchip.used { background: #f2f9fb; }
.ppop { position: absolute; z-index: 50; width: 360px; max-width: calc(100vw - 16px); background: #fff; border: 1px solid var(--accent); border-radius: 10px;
  box-shadow: 0 8px 24px #1b273333; padding: 10px 12px; display: grid; gap: 8px; }
.ppoph { font-weight: 700; font-size: 13px; }
.ppin { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.ppin label { font-size: 12px; color: var(--muted); font-weight: 600; display: grid; gap: 2px; }
.ppprev { font-size: 13px; color: var(--ink); min-height: 1.4em; }
.ppacts { display: flex; gap: 6px; justify-content: flex-end; }
.promptreview .prow { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 6px 0; display: grid; gap: 6px; }
.promptreview .prow.padd { border-color: var(--accent); }
.promptreview .prowh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.promptreview .prowh select { width: auto; }
.promptreview .prowb { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 8px; }
.promptreview .prowb label { font-size: 12px; color: var(--muted); font-weight: 600; display: grid; gap: 2px; }
.promptreview .prowf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.promptreview .psample { flex: 1; font-size: 13px; }
.promptreview .pgrp { margin: 18px 0 4px; font-size: 15px; }
/* prompts round 2: numbers on chips, stage / sex tags, history + GPE + local examination + referral + private notes */
.pn { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin: 0 6px 0 -5px; padding: 0 3px; border-radius: 9px; background: var(--accent-2); color: var(--accent-d); font-size: 11px; font-weight: 700; }
.chip.pchip.gen .pn { background: var(--line2); color: #3e4c5a; }
.orgbar #orgnote.sexnote { color: #8a5a00; background: var(--warn); border-radius: 6px; padding: 2px 8px; }
.gperow, .lerow, .refrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.gperow .grow { flex: 1 1 260px; min-width: 200px; } .gperow input { width: 100%; }
.chip.gpe { min-height: 26px; padding: 1px 10px; font-size: 12.5px; }
.chip.gpe.absent { background: var(--ok-bg); border-color: #8cc8a0; color: var(--ok); }
.chip.gpe.present { background: var(--err-bg); border-color: #e3a29d; color: var(--err); font-weight: 700; }
.chip.gpe.all { border-style: dashed; }
.chip.lereg { min-height: 26px; padding: 1px 10px; font-size: 12.5px; background: #fff; }
.chip.lereg.sugg { border-color: var(--accent); }
.chip.lereg.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lebox { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px 14px; margin: 8px 0 10px; }
.lebox:empty { display: none; }
.lereg-box { position: relative; border: 1px solid var(--line2); border-radius: 8px; padding: 6px 8px 8px; background: #fbfcfe; }
.lereg-box .lex { position: absolute; top: 4px; right: 6px; min-height: 22px; padding: 0 7px; }
.refrow input { width: auto; flex: 1 1 160px; } .refrow input.w-mob { flex: 0 1 150px; }
.privnote { margin-top: 4px; padding: 4px 8px; border-left: 3px solid #6b4f3a; background: #f6efe9; font-size: 13px; }
.promptreview .prowt { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.promptreview .prowt select { width: auto; }
.promptreview .pstages { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; color: var(--muted); }
.promptreview .pstages label { display: inline-flex; gap: 3px; align-items: center; font-weight: 500; }
@media (max-width: 760px) { .lebox { grid-template-columns: 1fr; } }
.promptreview .hofilter select { width: auto; }
.promptreview .st.retired { background: #eee; color: #666; }
@media (max-width: 700px) { .promptreview .prowb { grid-template-columns: 1fr; } }

/* prompts round 3: past surgical history rows · who signs */
.pshbox { margin-top: 10px; }
.pshhead { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
#pshadd { white-space: nowrap; }
.pshrows { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.pshrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pshrow input[data-pk=surgery] { flex: 2 1 180px; } .pshrow input[data-pk=indication] { flex: 2 1 150px; }
.pshrow input.w-when { flex: 0 1 140px; width: 140px; } .pshrow select { flex: 0 1 150px; width: 150px; } .pshrow input[data-pk=detail] { flex: 2 1 150px; }
.pshrow.free input.pshfree { flex: 1 1 100%; }
.pshrow .pshsrc { color: #8a5a00; background: var(--warn); border-radius: 6px; padding: 1px 6px; font-size: 11px; }
.pshrow .pshx { padding: 2px 8px; }
#pshwarn { color: #8a5a00; } #pshwarn:empty, #pshprev:empty { display: none; }
.savebar .signdoc { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ---------- print cosmesis (Dr Shah, 03-Oct-2026): the look of the teleconsult paper — Arial, navy headings over a teal rule,
   a boxed patient strip (small grey labels, navy values), numbered reports with a bold lead. Position on the letterhead is unchanged. ---------- */
/* Physical consults print in BLACK & WHITE (Dr Shah, 03-Oct-2026): the teleconsult paper's navy / teal become black / dark grey here;
   the colour version is for the teleconsult Word document. */
.content { --navy: #000; --teal: #555; font: 10pt/1.42 Arial, "Nirmala UI", sans-serif; color: #000; }
.content .facts { display: flex; flex-wrap: wrap; gap: 0; max-width: 118mm; min-height: 0; margin: 0 0 3.5mm; border-top: .3mm solid #222; border-left: .3mm solid #222; }
.content .facts div { display: block; flex: 1 1 auto; padding: .5mm 2.2mm .8mm; border-right: .3mm solid #222; border-bottom: .3mm solid #222; }
.content .facts .wide { flex-basis: 100%; }
.content .facts dt { font-size: 6.8pt; line-height: 1.2; text-transform: uppercase; letter-spacing: .05em; color: #444; min-width: 0; }
.content .facts dd { margin: 0; color: var(--navy); font-weight: bold; font-size: 10pt; line-height: 1.3; }
.content section { margin: 0 0 3mm; }
.content h3 { font-size: 9.5pt; font-weight: bold; color: var(--navy); text-transform: uppercase; letter-spacing: .02em; border-bottom: .4mm solid var(--teal); padding: 0 0 .6mm; margin: 0 0 1.3mm; }
.content .txt { color: #000; }
.content section.dx .txt { font-weight: bold; color: #111; } .content section.dx small.codes { font-weight: normal; }
.content small.codes { color: #444; }
.content ol.invl { margin: 0; padding: 0; list-style: none; }
.content ol.invl li { margin: 0 0 1.2mm; break-inside: avoid; }
.content ol.invl b { color: var(--navy); }
.content .rxsym path { stroke: var(--navy); }
table.meds { font-size: 10pt; }
table.meds th { color: var(--navy); font-weight: bold; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .05em; border-bottom: .4mm solid var(--teal); }
table.meds td { border-bottom: .1mm solid #999; }
table.meds td.n { color: var(--navy); font-weight: bold; }
.content .sign b { color: var(--navy); }
.content .sign small { color: #444; }
table.meds td b, table.meds td b * { color: #000; }
/* round 4: referral doctors list (/?p=refdocs) */
.reftable { border-collapse: collapse; width: 100%; } .reftable td { padding: 6px 0; border-bottom: 1px solid #e3e7ee; }
.refedit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .refedit input { width: auto; flex: 1 1 160px; } .refedit input.w-mob { flex: 0 1 140px; }
/* round 4: Charts tab — one small chart per series, shared time axis. One hue (navy) per line; limit dashed; events as letters on the axis. */
.chgridbox { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.chcard { margin: 0; padding: 10px 12px 6px; border: 1px solid #e3e7ee; border-radius: 8px; background: #fff; }
.chcard figcaption { font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.chsum { margin-left: auto; color: #444; font-size: 12px; }
.chsvg { display: block; overflow: visible; }
.chgrid { stroke: #e9edf3; stroke-width: 1; } .chaxis, .chtickx { stroke: #9aa3b2; stroke-width: 1; }
.chtick { font: 10.5px system-ui, sans-serif; fill: #6b7280; } .chlast { font: 600 11px system-ui, sans-serif; fill: #1f2937; }
.chline { fill: none; stroke: #1B3A6B; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chuln { stroke: #6b7280; stroke-width: 1.2; stroke-dasharray: 5 4; } .chulnl { font: 10px system-ui, sans-serif; fill: #6b7280; }
.chpt .hit { fill: transparent; cursor: pointer; } .chpt .dot { fill: #1B3A6B; stroke: #fff; stroke-width: 2; }
.chpt.flag .dot { fill: #fff; stroke: #1B3A6B; stroke-width: 2; } .chpt.now .dot { fill: #fff; stroke: #1B3A6B; stroke-width: 2.5; }
.chpt:hover .dot { r: 6; }
.chev line { stroke: #9aa3b2; stroke-width: 1; stroke-dasharray: 2 3; } .chev text { font: 700 10px system-ui, sans-serif; fill: #374151; }
.chevents { grid-column: 1 / -1; font-size: 12px; color: #374151; line-height: 1.6; }
.chtip { position: absolute; z-index: 50; max-width: 290px; padding: 7px 9px; font-size: 12px; line-height: 1.4; background: #fff; color: #1f2937;
  border: 1px solid #cfd6e1; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12); pointer-events: none; }
.chtbl { border-collapse: collapse; margin-top: 12px; font-size: 12.5px; } .chtbl td, .chtbl th { padding: 4px 8px; border-bottom: 1px solid #e3e7ee; text-align: left; vertical-align: top; }
.chtbl tr.flag td { background: #fff8e6; } .chempty { margin-top: 14px; }
@media (max-width: 1020px) { .chgridbox { grid-template-columns: 1fr; } }
.chsvg { max-width: 100%; height: auto; }

/* ---------- round 5: SCRC / Apollo letterhead, plain back pages, honest page-by-page preview ---------- */
.content .date .dlbl { display: none; }                       /* Apollo paper has a pre-printed "Date:" line */
.lh-scrc .content .date { text-align: right; padding: 0; }     /* SCRC paper has none: print the date at top right */
.lh-scrc .content .date .dlbl { display: inline; font-weight: normal; }
.lh-scrc .content .handouts.only { padding-top: 0; }           /* page 1 already starts below the SCRC header */
.content .handouts.newpage { padding-top: 0; }
@media screen {
  body.paged .flow { display: none; }
  .pages .pg { position: relative; width: 210mm; height: 297mm; margin: 12px auto; background: #fff; overflow: visible; }
  .pages .pg.lh { background: #fff url(letterhead.jpg) top left / 210mm 297mm no-repeat; }
  .lh-scrc .pages .pg.lh { background-image: url(letterhead_scrc.jpg); }
  .nobg .pages .pg.lh { background-image: none; }
  .pages .pgend { position: absolute; left: 8mm; right: 8mm; border-top: .5mm dashed #c33; height: 0; }
  .pages .pgend span { position: absolute; right: 0; top: .5mm; font: 600 8pt Arial, sans-serif; color: #c33; background: #fff; padding: 0 1.5mm; }
  .pages .pgtag { position: absolute; top: 4mm; right: 8mm; font: 600 8pt Arial, sans-serif; color: #888; }
  .pages .pg.over { outline: 3px solid #c33; }
  .pages .pg.over::after { content: "Text runs past the footer on this page"; position: absolute; bottom: 2mm; left: 8mm; font: 700 9pt Arial, sans-serif; color: #c33; background: #fff; padding: 0 2mm; }
}
.toolbar .lhwarn, .pvbar .lhwarn { color: var(--err); font-weight: 600; }
.savebar .lhsel { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; }
.savebar .lhsel select { width: auto; min-height: 30px; }
.banner .more-row label { font-size: 12px; } .banner .addrin { flex: 1 1 220px; } .w-dob { width: 140px; } .w-city { width: 120px; }

/* Checks panel = a drawer from the left, opened by the top-bar Checks button (Alt+C); the form takes the full width (Dr Shah 03-Oct-2026) */
.work { grid-template-columns: minmax(0, 1fr); }
.rail { position: fixed; top: 52px; left: 0; bottom: 0; width: 340px; max-height: none; border-radius: 0 12px 12px 0; z-index: 40;
  transform: translateX(-105%); transition: transform .18s ease; box-shadow: 6px 0 24px #0003; }
body.checks .rail { transform: none; }
body.haspt.checks .scrim { display: block; position: fixed; inset: 52px 0 0 0; background: #0f172a40; z-index: 35; }
#chkbtn .chkn:not(:empty) { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #fff; color: #0b5870; font-weight: 700; font-size: 12px; line-height: 18px; }
#chkbtn.has { background: var(--gold); border-color: var(--gold); color: #3a2600; }
#chkbtn.has .chkn { background: #3a2600; color: #fff; }
@media (max-width: 1180px) { .rail { position: fixed; max-height: none; } }

/* ---------- Focus view (default; "Show everything" in the top bar turns it off, per PC) ---------- */
body.focusv .need { outline: 2px solid var(--gold) !important; outline-offset: 1px; background-color: #fffbea !important; }
body.focusv #items.need, body.focusv #pk-adv.need { outline-offset: 3px; }
.tofill { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12.5px; margin-right: auto; }
.tofill b { color: #8a5a00; } .tofill .tfok { color: var(--ok); }
.tofill .tfi { min-height: 24px; padding: 1px 9px; font-size: 12px; font-weight: 600; background: #fff4d0; color: #6b4500; border: 1px solid var(--gold); border-radius: 999px; }
.tofill .tfi:hover { background: var(--gold); }
#dxmore { display: none; }
.linkbtn { background: none; border: 0; color: var(--accent); min-height: 0; padding: 2px 0; font-weight: 600; font-size: 13px; }
.linkbtn:hover { background: none; text-decoration: underline; }
body.focusv #dxmore { display: inline-block; margin: 4px 0; }
/* chips only where the cursor is */
body.focusv .sec:not(:focus-within) .pchips, body.focusv .sec:not(:focus-within) #dxsugg, body.focusv .sec:not(:focus-within) #medsugg,
body.focusv .sec:not(:focus-within) #invblocks, body.focusv .sec:not(:focus-within) .lechips { opacity: .28; }
/* Dr Shah 03-Oct-2026: "too much movement of screen while filling — not acceptable": chips never appear / disappear (that moved everything below);
   they stay in place, faded until the cursor is in their section. */
body.focusv .pchips, body.focusv #dxsugg, body.focusv #medsugg, body.focusv #invblocks, body.focusv .lechips { transition: opacity .12s; }
/* grey help text */
body.focusv .sech small, body.focusv #ptsrc, body.focusv #allergysrc, body.focusv #comosrc, body.focusv #pmhsrc, body.focusv #htsrc,
body.focusv .refrow small, body.focusv .flabel small, body.focusv label small { display: none; }
body.focusv #medlang { display: none; }
/* the coding grid behind "Coding & staging" */
body.focusv .dxbox:not(.showcode) #dxcoderow, body.focusv .dxbox:not(.showcode) #dxhistrow, body.focusv .dxbox:not(.showcode) #dxstagerow,
body.focusv .dxbox:not(.showcode) #dxstageprev { display: none; }
/* empty optional extras folded to a heading */
body.focusv .folded > :not(.sech):not(.rowlbl) { display: none !important; }
body.focusv .folded { cursor: pointer; opacity: .75; }
body.focusv .sec.folded { padding-bottom: 6px; }
body.focusv .sec.folded > .sech::after, body.focusv .refrow.folded > .rowlbl::after { content: " ＋"; color: var(--accent); }
body.focusv .banner .more-row.folded { display: none; }
body:not(.focusv) .tofill { display: none; }

/* focus view: one-line top bar and save bar */
header.top .hbtn { white-space: nowrap; }
header.top .brand, header.top .scope, header.top .who { white-space: nowrap; }
@media (max-width: 1600px) { header.top .keys, header.top #ctxinfo { display: none; } }
.savebar { flex-wrap: wrap; row-gap: 6px; }
.savebar .tofill { flex: 1 0 100%; margin: 0; }
.savebar .tofill:empty { display: none; }
.savebar button, .savebar .lhsel, .savebar .signdoc { white-space: nowrap; }

/* round 6 (03-Oct-2026): decongestion, layout fixed while filling — allergy + comorbidities share one banner row; the tabs are slimmer and
   carry Organ / Stage / Consult on the same line (Prescription tab only); nothing here shows or hides on focus or typing */
.allergy-row .como-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 0 14px; padding: 0 0 0 14px; border: 0; border-left: 1px dashed var(--line2); }
.allergy-row .allergyin { width: 240px; }
.tabs { gap: 6px; margin: 10px 0 0; align-items: center; position: relative; }
.tabs button { padding: 3px 12px; min-height: 28px; font-size: 13px; }
.tabs kbd { display: none; }
.tabs .orgbar { flex: 1 1 auto; margin: 0 0 0 10px; flex-wrap: nowrap; gap: 10px; min-width: 0; }
.tabs .orgbar label { flex: 1 1 150px; font-size: 12px; }
.tabs .orgbar select { min-width: 90px; min-height: 28px; padding-top: 2px; padding-bottom: 2px; }
.tabs .orgbar #orgnote { position: absolute; right: 0; top: 100%; z-index: 4; flex: none; margin-top: 2px; box-shadow: 0 2px 8px #0f2a3a22; }
.tabs .orgbar[hidden] { display: flex !important; visibility: hidden; }
#tab-rx { margin-top: 10px; }
.tofill { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
/* round 6: the "Advice" block — medicines, general advice, tests advised and follow-up are one numbered section (4) with sub-sections 4.1–4.4 */
.agrp { margin-top: 18px; padding: 0 12px 12px; border: 2px solid #0b5d73; border-radius: 14px; background: #f3f9fb; }
.agrph { margin: 0 -12px; padding: 9px 16px; display: flex; align-items: center; gap: 10px; background: #0b5d73; color: #fff; font-size: 16px; font-weight: 700; border-radius: 11px 11px 0 0; letter-spacing: .02em; }
.agrph small { font-size: 12px; font-weight: 400; color: #d6eef4; }
#rxsecs .agrph::before { counter-increment: sec; counter-reset: asub; content: counter(sec); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #0b5d73; font-size: 13px; }
#rxsecs { counter-reset: sec asub; }
#rxsecs .agrp .sech::before { counter-increment: asub; content: counter(sec) "." counter(asub); width: auto; min-width: 22px; padding: 0 6px; border-radius: 11px; }
.agrp .sec { margin-top: 12px; }
/* round 6: record fields that are already filled look read-only (still editable; the box returns on focus / hover) */
.banner .lk:not(:focus) { background: #eef2f5; border-color: #eef2f5; color: #334155; box-shadow: none; }
.banner select.lk:not(:focus) { background-image: none; }
.banner .lk:not(:focus):hover { border-color: var(--line); cursor: text; }
.banner .lk { transition: background-color .12s, border-color .12s; }
.tofill b small { font-weight: 400; color: var(--muted); }
/* round 6: the floating clear button over a text box */
#clrx { position: absolute; z-index: 30; width: 19px; height: 19px; min-height: 0; padding: 0; border-radius: 50%; border: 0; background: #cbd5e1; color: #fff; font-size: 11px; line-height: 19px; text-align: center; cursor: pointer; opacity: .85; }
#clrx:hover { background: #c0392b; opacity: 1; }
/* round 6: Save as template in the Advice header */
.agrph #savetpl { margin-left: auto; background: #fff; color: #0b5d73; border-color: #fff; font-size: 12.5px; }
/* round 6: suggestions on the right — one panel, only the chips of the box with the cursor (wide screens; narrow screens keep them under each box) */
.sugpanel { display: none; }
@media (min-width: 1100px) {
  #work .formcol { margin-right: 332px; }
  #tab-rx .pchips { display: none !important; }
  .sugpanel { display: block; position: fixed; right: 12px; top: 64px; bottom: 12px; width: 312px; overflow: auto; z-index: 6; background: var(--card);
    border: 1px solid var(--line); border-top: 4px solid #0b5d73; border-radius: 12px; padding: 0 12px 12px; box-shadow: 0 2px 10px #0f2a3a14; }
  .sugpanel h4 { position: sticky; top: 0; margin: 0 -12px 8px; padding: 9px 12px; background: #f3f9fb; color: #0b5d73; font-size: 13.5px; border-bottom: 1px solid var(--line2); }
  .sugpanel .sugt { margin: 10px 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  .sugpanel .sugstrip { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
  .sugpanel .spchip { justify-content: flex-start; text-align: left; white-space: normal; height: auto; min-height: 28px; line-height: 1.3; padding: 4px 9px; }
}
.chip.spchip.used { background: #f2f9fb; }

/* round 7: demographics fold — only Name / Age / Sex / UHID on screen; the rest behind one fixed-width toggle (never moves anything) */
.banner .demofold:not(.open) { display: none; }
.demotgl { align-self: flex-end; width: 330px; height: 36px; flex: 0 0 330px; text-align: left; border: 1px dashed var(--line); background: transparent; border-radius: 8px;
  padding: 0 10px; font-size: 13px; color: #0b3d4f; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demotgl:hover { background: #f1f5f9; } .demotgl small { font-size: 11.5px; color: #64748b; } .demotgl small.warnish { color: #b45309; }

/* round 7: comorbidity prompts in the right panel — on wide screens the banner shows only the ticked ones */
.comoadd { border: 1px dashed var(--line); background: transparent; color: #6d3fb0; border-radius: 999px; font-size: 12.5px; padding: 2px 10px; min-height: 26px; cursor: pointer; }
.chip.spchip.cchip.on { background: #6d3fb0; border-color: #6d3fb0; color: #fff; }
@media (min-width: 1100px) {
  #como .chip[data-cid]:not(.on), #como [data-none]:not(.on), #comomore, #comosugg { display: none !important; }
  .como-row { cursor: pointer; }
}
@media (max-width: 1099px) { .comoadd { display: none; } }
/* round 7: bottom-bar print language; tabs line never overlaps (badges stay inline; the Organ/Stage/Consult bar wraps below when there is no room) */
.savebar .langin { margin-left: 0; font-size: 12.5px; }
.tabs { flex-wrap: wrap; row-gap: 6px; }
.tabs button { white-space: nowrap; flex: 0 0 auto; }
.tabs .orgbar { flex: 1 1 470px; min-width: 470px; }
.tabs .orgbar label { flex: 1 1 0; min-width: 140px; }
.tabs .orgbar select { flex: 1 1 0; width: 0; min-width: 0; }
@media (min-width: 1100px) { #gpechips { display: none !important; } .gperow { cursor: pointer; } }
.sugpanel .chip.gchip.absent { background: var(--ok-bg); border-color: #8cc8a0; color: var(--ok); }
.sugpanel .chip.gchip.present { background: var(--err-bg); border-color: #e3a29d; color: var(--err); font-weight: 700; }
.sugpanel .chip.gchip.all { border-style: dashed; }
.refadd { font-size: 12px; padding: 2px 10px; min-height: 26px; } .refrow .refdel { margin-left: 2px; }
.sugpanel .rchip small { font-weight: 400; }
.tabs .orgbar label > select { min-width: 0 !important; max-width: none; }
/* round 7: comorbidity details = one tidy line per condition; fields open on click */
#comodet .comoitem { display: block; padding: 0; background: transparent; border: 0; }
#comodet .comosum { all: unset; cursor: pointer; display: block; padding: 3px 8px; border-radius: 6px; font-size: 12.5px; color: #334155; }
#comodet .comosum:hover { background: #f5f3fb; } #comodet .comosum b { color: #6d3fb0; margin-right: 4px; }
#comodet .comoitem:not(.open) .comof { display: none; }
#comodet .comof { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 8px 8px 22px; background: #faf9fd; border-radius: 6px; margin: 2px 0 4px; }

/* round 8: Treatment Summary tab — the A4 page in a frame */
.tsframe{display:block;width:100%;max-width:860px;height:1180px;border:0;background:#E9ECEE;margin-top:8px}

/* ---------- R9: Treatment protocol (box in Advice — fixed height so choosing never moves the page; picker in the Suggestions panel) ---------- */
.protobox { display: flex; flex-direction: column; justify-content: center; height: 46px; box-sizing: border-box; padding: 4px 10px; border: 1px solid #c9d3da; border-radius: 6px; background: #fff; cursor: pointer; overflow: hidden; margin-right: 34px; }
.protobox:focus { outline: 2px solid #2a7fa8; outline-offset: 0; }
.protobox .ptname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.protobox .ptname:empty { display: none; }
.protobox .ptshort { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.protobox.set { border-color: #2a7fa8; background: #f5fafc; }
.sec[data-sec=protocol] { position: relative; }
.sec[data-sec=protocol] .protox { position: absolute; right: 0; bottom: 8px; }
.sugpanel .prlist { flex-direction: column; flex-wrap: nowrap; }
.sugpanel .spchip.prchip { display: block; width: 100%; box-sizing: border-box; border-radius: 8px; color: #1d2b36; }
.sugpanel .spchip.prchip small { display: block; color: #4a5a66; font-weight: 400; }
.sugpanel .spchip.prchip small.prt { color: #6b7a86; font-style: italic; }
.sugpanel .spchip.prchip.on { border-color: #2a7fa8; background: #e7f3f8; color: #1d2b36; box-shadow: inset 3px 0 0 #2a7fa8; }
.sugpanel .spchip.prchip .prm { font-size: 11px; border: 1px solid #999; border-radius: 3px; padding: 0 3px; margin-left: 4px; }
/* printed attachment page — black & white */
.content .proto { font-size: 10pt; color: #000; }
.content .proto h2 { font-size: 13pt; margin: 0 0 1mm; text-transform: none; letter-spacing: 0; }
.content .proto h3.pname { font-size: 12pt; margin: 0 0 1mm; text-transform: none; letter-spacing: 0; }
.content .proto .pfits { margin: 0 0 3mm; font-style: italic; }
.content .proto h4 { font-size: 9pt; text-transform: uppercase; letter-spacing: .06em; margin: 3mm 0 1mm; border-bottom: .2mm solid #000; padding-bottom: .6mm; }
.content .proto p { margin: 0 0 2mm; line-height: 1.4; }
.content .proto .pph { width: 100%; border-collapse: collapse; }
.content .proto .pph th, .content .proto .pph td { text-align: left; vertical-align: top; padding: 1mm 1.5mm; border-bottom: .2mm solid #999; }
.content .proto .pph th { font-size: 8.5pt; }
.content .proto .pph .pno { width: 5mm; font-weight: 600; } .content .proto .pph .pw { width: 34mm; font-weight: 600; }
.content .proto .pph tr { break-inside: avoid; }
.content .proto .ptr { margin: 0; padding-left: 5mm; } .content .proto .ptr li { margin: 0 0 1mm; break-inside: avoid; }
.content .proto .pj { font-size: 9pt; }
.content .proto .pnote { margin-top: 3mm; font-size: 9pt; }
.content .proto .psign { margin-top: 6mm; text-align: right; }

/* round 10 (04-Oct-2026), Dr Shah: "this section has become fatty" — the save bar is ONE slim row of fixed height. Status = one muted line
   (state · warnings · not-filled · message, cut with …, full text in tooltips); compact Language / Letterhead selects without labels; "Signed by" in
   the Save tooltips; buttons at normal height on the right. A status change never changes the bar's height. */
.savebar { flex-wrap: nowrap; gap: 8px; height: 50px; box-sizing: border-box; padding: 0 12px; margin-top: 14px; }
.savebar .sbstat { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: visible; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.savebar .sbstat > * { flex: none; }
.savebar .state { padding: 0; border-radius: 0; background: none !important; font-size: 12.5px; font-weight: 600; color: var(--muted) !important; }
.savebar .state.unsaved { color: #8a5a00 !important; }
.savebar .state.unsaved::before { content: "● "; font-size: 10px; vertical-align: 1px; }
.savebar .checks { margin: 0; gap: 4px; font-size: 12px; }
.savebar .checks:empty { display: none; }
.savebar .checks .ck { padding: 0 5px; line-height: 17px; font-size: 11.5px; }
.savebar #status { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.savebar #status.ok { color: var(--muted); } .savebar #status.err { color: var(--err); font-weight: 600; }
.savebar #status .linkbtn { font-size: 12.5px; padding: 0; }
.savebar .tofill { flex: none !important; margin: 0 !important; position: relative; overflow: visible; font-size: 12.5px; }
.savebar .tofill:empty { display: none; }
.savebar .tofill > b { color: #8a5a00; font-weight: 600; cursor: default; }
.savebar .tofill > b.tfok { color: var(--ok); }
.savebar .tofill .tflist { display: none; position: absolute; left: -10px; bottom: calc(100% + 8px); z-index: 30; width: max-content; max-width: 560px; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 16px #0f2a3a29; white-space: normal; }
.savebar .tofill .tflist small { flex: 1 0 100%; color: var(--muted); }
.savebar .tofill:hover .tflist, .savebar .tofill:focus-within .tflist { display: flex; }
.savebar .tofill .tflist::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }   /* hover bridge to the item */
.savebar button { min-height: 32px; height: 32px; padding: 0 11px; font-size: 13px; flex: none; }
.savebar kbd { font-size: 9.5px; padding: 1px 3px; margin-left: 5px; opacity: .55; }
.savebar .langin, .savebar .lhsel { margin: 0; flex: none; gap: 0; }
.savebar .langin select, .savebar .lhsel select { width: auto; min-height: 32px; height: 32px; padding: 0 18px 0 7px; font-size: 12.5px; }
.savebar .signdoc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* narrow screens: status on its own line above the buttons — still a fixed height */
@media (max-width: 760px) {
  .savebar { flex-wrap: wrap; height: 88px; align-content: center; row-gap: 6px; padding: 0 10px; }
  .savebar .sbstat { flex: 1 0 100%; height: 20px; }
}
/* 04-Oct-2026: care-at-home handouts suggested for this record (Handouts tab) */
.hochecks label.hosugg::after { content: 'suggested'; font-size: 11px; color: var(--accent, #2a6); border: 1px solid currentColor; border-radius: 8px; padding: 0 6px; }

/* round 11: tumour-location figure — fixed-size thumbnail beside the diagnosis (inside changes only), enlarged in the Suggestions panel, optional in print */
.dxbox { position: relative; min-height: 176px; }
.dxbox > :not(.dxanat):not(.sech) { margin-right: 202px; }
.dxanat { position: absolute; top: 12px; right: 14px; width: 188px; height: 152px; }
.dxanat .anatfig { box-sizing: border-box; width: 188px; height: 124px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.dxanat .anatfig svg { width: 100%; height: 100%; display: block; }
.dxanat .anatfig .muted { padding: 10px; text-align: center; line-height: 1.3; }
.dxanat .anatpr { display: flex; gap: 6px; align-items: center; height: 22px; margin: 5px 0 0; font-size: 12.5px; white-space: nowrap; }
.dxanat.none .anatpr { visibility: hidden; }
.sugpanel .sganat { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line2); }
.sugpanel .sganat svg { width: 100%; height: auto; display: block; }
.sugpanel .sganat p { margin: 4px 0 0; }
.sugpanel .sganat [data-rg]:hover { fill: rgba(42, 127, 168, .18); }
figure.anat { margin: 0; break-inside: avoid; page-break-inside: avoid; }
figure.anat svg { width: 100%; height: auto; display: block; }
figure.anat figcaption { font-size: 7.2pt; line-height: 1.25; color: #000; }
figure.anat .acred { display: block; color: #555; font-size: 6.3pt; }
.pxanat { float: right; width: 50mm; margin: -4mm 0 0 4mm; }
.dx.dxfig::after { content: ''; display: block; clear: both; }
.proto .ppanat { float: right; width: 64mm; margin: 0 0 2mm 5mm; }
.pxanat .acap { display: none; }   /* the Rx already prints the diagnosis, stage and Surgery advised beside it */

/* R11b (Dr Shah: "don't shrink the image too much"): larger printed figure; second-primary picker in the panel */
.pxanat { width: 76mm; margin: -2mm 0 1mm 5mm; }
.proto .ppanat { width: 80mm; }
.sugpanel .sga2 { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 12px; }
.sugpanel .sga2 select, .sugpanel .sga2 input { width: 100%; box-sizing: border-box; }

/* ---------- patient letters (04-Oct-2026): the Letters tab, the printed letter, the signed PDF, the template review ---------- */
.content .ltr { font: 11pt/1.45 Arial, "Nirmala UI", sans-serif; }   /* scoped to .ltr: print.js copies children into a plain .content box */
.content .ltr p { margin: 0 0 3.2mm; }
.content .ltr .ltto { font-weight: bold; margin-top: 4mm; }
.content .ltr .ltsign { margin-top: 6mm; break-inside: avoid; }
.content .ltr .ltsign p { margin: 0 0 1mm; }
.content .ltr .ltgap { height: 14mm; }
.pages .pg .lhimg { position: absolute; left: 0; top: 0; width: 210mm; height: 297mm; z-index: 0; }
.pages .pg .content { position: relative; z-index: 1; }
body.pdf .pages .pg.lh { background-image: none !important; }
@media print {
  body.pdf .pages { display: block !important; }
  body.pdf .pages .pg { position: relative; width: 210mm; height: 297mm; margin: 0; overflow: hidden; break-after: page; }
  body.pdf .pages .pg:last-child { break-after: auto; }
  body.pdf .pages .pgend, body.pdf .pages .pgtag { display: none; }
}
.ltwrap { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(360px, .8fr); gap: 14px; margin-top: 10px; align-items: start; }
.ltpick { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 10px; max-height: 78vh; overflow: auto; }
.ltpick h5 { margin: 10px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ltpick button.lttype { display: block; width: 100%; text-align: left; background: #fff; color: var(--ink); border: 1px solid transparent; font-weight: 500; padding: 5px 8px; min-height: 0; border-radius: 6px; }
.ltpick button.lttype:hover { background: var(--accent-2); }
.ltpick button.lttype.on { border-color: var(--accent); background: var(--accent-2); font-weight: 700; }
.ltpick .ltsaved { display: block; width: 100%; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line2); font-weight: 500; padding: 4px 8px; min-height: 0; margin-bottom: 4px; font-size: 12px; }
.ltpick .ltsaved small { display: block; color: var(--muted); font-weight: 400; }
.ltform { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 12px; }
.ltform h4 { margin: 0 0 2px; } .ltform .ltsrc { margin: 0 0 8px; }
.ltform .ltrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ltform .ltrow label { flex: 1 1 120px; } .ltform .ltrow label.narrow { flex: 0 1 84px; }
.ltform .ltfields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .ltform .ltfields .wide { grid-column: 1 / -1; }
.ltform label input, .ltform label select, .ltform label textarea { width: 100%; }
.ltform .reqm { color: var(--err); }
.ltform fieldset { border: 1px solid var(--line2); border-radius: 8px; margin: 8px 0; padding: 6px 10px 10px; } .ltform legend { font-size: 12px; font-weight: 700; color: var(--muted); }
.ltform textarea.ltbody { min-height: 220px; font: 13px/1.45 Arial, sans-serif; }
.ltform .ltedited { background: var(--warn); border-radius: 6px; padding: 4px 8px; font-size: 12px; margin: 4px 0; }
.ltform .ltbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.ltform .ltmissing { color: var(--err); font-size: 12px; font-weight: 600; }
.ltprev { position: sticky; top: 8px; }
.ltpaper { background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 10px #0002; padding: 9mm 9mm 12mm 11mm; min-height: 130mm; font: 9.5pt/1.45 Arial, sans-serif; color: #000; }
.ltpaper p { margin: 0 0 3mm; } .ltpaper .ltto { font-weight: bold; } .ltpaper .lpdate { text-align: right; margin-bottom: 4mm; }
.ltpaper .ltsign { margin-top: 6mm; } .ltpaper .ltgap { height: 10mm; } .ltpaper .ph { background: #fde7e7; color: var(--err); border-radius: 3px; padding: 0 2px; }
.ltreview .ltt { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 10px 12px; margin: 10px 0; }
.ltreview .ltt header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ltreview .ltt .badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--warn); } .ltreview .ltt .badge.ok { background: #e3f4e8; }
.ltreview .ltt textarea { width: 100%; min-height: 120px; font: 13px/1.45 Arial, sans-serif; } .ltreview .ltt input { width: 100%; }
.ltreview .ltt .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
@media (max-width: 1150px) { .ltwrap { grid-template-columns: 190px minmax(0, 1fr); } .ltprev { grid-column: 1 / -1; position: static; } }

/* ---------- R15: patient explanation pages (explain.php / explain.js) — B&W, exactly one A4 each (explain.js shrinks the font if needed) ---------- */
.content .xp { font-size: 10.5pt; line-height: 1.38; color: #000; }
.content .xp h2 { font-size: 1.3em; margin: 0 0 2mm; text-transform: none; letter-spacing: 0; }
.content .xp h4 { font-size: .86em; text-transform: uppercase; letter-spacing: .05em; margin: 2.6mm 0 1mm; border-bottom: .2mm solid #000; padding-bottom: .5mm; break-after: avoid; }
.content .xp p { margin: 0 0 1.6mm; }
.content .xp ul, .content .xp ol { margin: 0 0 1.6mm; padding-left: 5mm; } .content .xp li { margin: 0 0 .6mm; }
.content .xp .xcall { border: .4mm solid #000; padding: 1.6mm 2.5mm; font-weight: 600; margin: 2mm 0; display: flow-root; }   /* flow-root: the box sits beside a floated figure, never under it */
.content .xp .xred { display: flow-root; }
.content .xp h4:has(+ .xtab), .content .xp .xtab, .xpscreen .xp h4:has(+ .xtab), .xpscreen .xp .xtab { clear: both; }   /* a full-width table and its heading start below a floated figure */
.content .xp .xred { list-style: none; padding-left: 0; } .content .xp .xred li::before { content: "! "; font-weight: 700; }
.content .xp .xred { border-left: 1mm solid #000; padding-left: 2.5mm; }
.content .xp .xsteps li i { font-style: italic; }
.content .xp .xtab { width: 100%; border-collapse: collapse; margin: 0 0 1.6mm; }
.content .xp .xtab th, .content .xp .xtab td { text-align: left; vertical-align: top; padding: .7mm 1.5mm; border-bottom: .2mm solid #888; }
.content .xp .xtab th { font-size: .86em; border-bottom: .3mm solid #000; }
.content .xp .xsurv .xv { width: 22mm; text-align: right; }
.content .xp .xnote { font-size: .86em; font-style: italic; }
.content .xp .xpfig { float: right; width: 92mm; margin: 0 0 2mm 4mm; }
.content .xp .xpfig img { display: block; width: 100%; height: auto; }
.content .xp figcaption { font-size: .8em; color: #222; margin-top: .6mm; }
.content .xp .xpanat { float: right; width: 70mm; margin: 0 0 2mm 4mm; }
.content .xp .xsrc { clear: both; font-size: .72em; color: #333; margin-top: 2.5mm; border-top: .2mm solid #999; padding-top: 1mm; }
.content .xp .xfoot { font-size: .72em; color: #333; margin: 0; }
/* the prescription screen: ticks under Advice */
.xpbox { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.xpticks { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.xptick { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; } .xptick.draft label { color: #999; }
.xptick .xpgo { padding: 0 6px; min-width: 0; line-height: 1.4; }
.xpsubs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.xpbox label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.xpbox input[type=checkbox] { display: inline-block; width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; }
.xpbox .xpsub { color: var(--muted); font-size: 12px; } .xpbox .xpsub select { display: inline-block; width: auto; max-width: 300px; min-height: 28px; margin: 0; padding: 2px 6px; font-size: 12px; }
/* full screen for the consult (/?p=explainshow) */
body.xpshow { background: #e9ecef; margin: 0; }
.xpnav { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; align-items: center; padding: 8px 16px; background: #fff; border-bottom: 1px solid #ccc; flex-wrap: wrap; }
.xpnav button { font-size: 15px; padding: 6px 14px; } .xpnav button.on { background: #1f4e79; color: #fff; border-color: #1f4e79; }
.xpnav .xpkeys { margin-left: auto; color: #777; font-size: 13px; }
.xpscreen { max-width: 1180px; margin: 16px auto 40px; background: #fff; padding: 32px 48px; box-shadow: 0 1px 6px rgba(0,0,0,.15); }
.xpscreen .xp, .xpprev .xp { font: clamp(17px, 1.55vw, 24px)/1.45 Arial, "Nirmala UI", sans-serif; color: #000; }
.xpscreen .xp h2 { font-size: 1.45em; margin: 0 0 .5em; } .xpscreen .xp h4, .xpprev .xp h4 { font-size: .9em; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid #000; margin: 1em 0 .3em; }
.xpscreen .xp .xpfig, .xpprev .xp .xpfig { float: right; width: 46%; margin: 0 0 .6em 1.2em; } .xpscreen .xp .xpfig img, .xpprev .xp .xpfig img { width: 100%; height: auto; display: block; }
.xpscreen .xp figcaption, .xpprev .xp figcaption { font-size: .75em; }
.xpscreen .xp .xcall, .xpprev .xp .xcall { border: 3px solid #000; padding: .4em .7em; font-weight: 600; display: flow-root; }
.xpscreen .xp .xtab, .xpprev .xp .xtab { width: 100%; border-collapse: collapse; } .xpscreen .xp .xtab td, .xpscreen .xp .xtab th, .xpprev .xp .xtab td, .xpprev .xp .xtab th { text-align: left; vertical-align: top; padding: .25em .5em; border-bottom: 1px solid #999; }
.xpscreen .xp .xred, .xpprev .xp .xred { border-left: 6px solid #000; padding-left: 1em; list-style: none; }
.xpscreen .xp .xsrc, .xpscreen .xp .xfoot, .xpprev .xp .xsrc, .xpprev .xp .xfoot { clear: both; font-size: .62em; color: #444; }
.xpscreen .hohead, .xpprev .hohead { font-size: .7em; color: #555; border-bottom: 1px solid #aaa; padding-bottom: .2em; }
:fullscreen .xpnav { display: none; } :fullscreen .xpscreen { margin: 0 auto; box-shadow: none; min-height: 100vh; box-sizing: border-box; }
/* review (/?p=explain) */
.xpreview h2 { margin: 22px 0 8px; } .xpcard { border: 1px solid #d5dde3; border-radius: 6px; padding: 8px 12px; margin: 0 0 10px; background: #fff; }
.xpcardh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .xpcard details { margin: 6px 0 0; } .xpcard summary { cursor: pointer; }
.xpfigs { border-collapse: collapse; font-size: 12px; width: 100%; } .xpfigs td, .xpfigs th { border-bottom: 1px solid #e3e3e3; padding: 3px 6px; text-align: left; vertical-align: top; }
.xpprev { max-width: 900px; border: 1px solid #ccc; padding: 18px 26px; margin: 6px 0 10px; background: #fff; } .xpprev .xp { font-size: 15px; }
@media print { body.xpshow .xpnav { display: none; } }
/* R16: colour screen slides (/?p=explainshow) and their thumbnails on /?p=explain. Everything inside a slide is sized in cqw, so the
   same markup fills a 1366 x 768 monitor and shrinks to a 300 px thumbnail. 16:9, as large as the window allows. */
body.xpshow.xsmode { background: #fff; }
.xpnav .xsdots { display: flex; gap: 8px; margin: 0 auto; } .xpnav .xsdots i { width: 12px; height: 12px; border-radius: 50%; background: #ccc; } .xpnav .xsdots i.on { background: #1f4e79; }
.xpnav .xsdots + .xpkeys { margin-left: 0; }
.xslide { display: none; position: relative; box-sizing: border-box; aspect-ratio: 16 / 9; width: min(100vw, calc((100vh - 52px) * 16 / 9)); margin: 0 auto;
  container-type: inline-size; flex-direction: column; background: #fff; padding: 1.4cqw 2cqw 0; font-family: Helvetica, Arial, "Nirmala UI", sans-serif; color: #111; cursor: pointer; user-select: none; }
.xslide.on { display: flex; }
:fullscreen .xslide { width: min(100vw, calc(100vh * 16 / 9)); }
.xart { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.xart > img, .xart > .xsvg { width: 100%; height: 100%; object-fit: contain; display: block; }
.xart figure.anat { margin: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.xart figure.anat svg { height: 100%; width: auto; max-width: 100%; } .xart figure.anat figcaption { display: none; }
.xart figure.anat ~ .xanatfb { display: none; }
.xcap { font-size: 2.25cqw; line-height: 1.28; text-align: center; margin: .9cqw 5cqw 2.6cqw; min-height: 2.56em; }
.xcap b { color: #1f4e79; }
.xssrc { position: absolute; right: 1.4cqw; bottom: .5cqw; margin: 0; font-size: .9cqw; color: #888; max-width: 70%; text-align: right; }
.xstab { border-collapse: collapse; font-size: 2.05cqw; width: 88%; }
.xstab th { color: #fff; text-align: left; padding: .7cqw 1.4cqw; } .xstab th:first-child { border-top-left-radius: 1cqw; } .xstab th:last-child { border-top-right-radius: 1cqw; }
.xstab td { padding: .6cqw 1.4cqw; border-bottom: .15cqw solid #e5e7eb; } .xstab tbody tr:nth-child(odd) { background: #f7f8fa; }
.xstab td:last-child { font-weight: bold; white-space: nowrap; color: #b3261e; } .xstab .xfig { font-weight: bold; }
.xtiles { display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: 1fr; gap: 1.4cqw; width: 94%; max-height: 100%; }
.xtile { border-radius: 1.4cqw; color: #fff; padding: 1.4cqw; min-height: 15cqw; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-width: 0; }
.xtile b { font-size: calc(1.9cqw + 1.8cqw / var(--cols)); line-height: 1.12; } .xtile span { font-size: 1.85cqw; line-height: 1.25; margin-top: .7cqw; }
.xpsl { margin: .4em 0 .6em; } .xsvar > p { margin: .5em 0 .3em; }
.xsthumbs .xslides { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.xsthumbs .xslide { display: flex; width: 320px; border: 1px solid #ccc; border-radius: 6px; cursor: default; }

/* R18 fonts, self-hosted (the CSP allows only 'self'): Archivo + Figtree, SIL Open Font License, latin subset, variable weight */
@font-face { font-family: Archivo; src: url(fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
/* R18 (Dr Shah 04-Oct-2026): ANIMATION-LED slides — kicker + headline (≤ 8 words) top-left, ONE motion per slide, the figures behind D only on
   reveal slides. Drawn complete at rest (.xgo); explain.js drops and re-adds .xgo on slide entry to replay. Fonts: Archivo / Figtree (fonts/, self-hosted),
   a heavy system sans until they load. Colours: green = good, amber = some problem (treatable), grey = neutral; never red for death. */
.xslide { --xdisp: Archivo, "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif; --xbody: Figtree, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --xnavy: #10233f; --xgreen: #12a37f; --xgreen-d: #0b7a5e; --xgreen-l: #8fd9c2; --xamber: #f2b33d; --xplum: #6b1d55; --xgrey: #d9dfe6; --xmute: #7d8a9b; }
.xslide.xr { padding: 0; font-family: var(--xbody); color: #1d2a3a; }
.xslide.xr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .9cqw; background: var(--xgreen); }
.xslide.xr.xdark::before, .xslide.xr.xk-takehome::before { display: none; }
.xr .xhd { padding: 4.2cqw 5cqw 0; position: relative; z-index: 1; }
.xkick { margin: 0; font: 700 1.35cqw/1.2 var(--xbody); letter-spacing: .16em; text-transform: uppercase; color: var(--xgreen-d); }
.xhead { margin: .6cqw 0 0; font: 900 4.4cqw/1.03 var(--xdisp); color: var(--xnavy); letter-spacing: -.01em; text-wrap: balance; max-width: 66cqw; }
.xr.xgo .xhead { animation: xrise .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes xrise { from { transform: translateY(1.2cqw); opacity: 0; } }
.xr .xart { padding: 1.6cqw 5cqw 3.2cqw; position: relative; }
.xr .xcap { font-size: 1.9cqw; line-height: 1.3; text-align: left; color: #3a4856; margin: -1.6cqw 5cqw 3.2cqw; min-height: 0; }
.xr .xcap b { color: var(--xnavy); }
.xr .xssrc { color: var(--xmute); font-size: 1cqw; right: 2.4cqw; bottom: 1.1cqw; }
/* wall: the tumour grows through the layers (Space = next layer) */
.xwall { width: 100%; }
.xwall svg { width: 100%; height: auto; display: block; }
.xk-wall .xart, .xk-iconarray .xart { position: static; }
.xtlab { position: absolute; right: 5cqw; top: 3.6cqw; text-align: right; }
.xtlab b { display: block; font: 900 7.4cqw/1 var(--xdisp); color: var(--xplum); }
.xtlab > span { display: block; font: 700 1.9cqw var(--xbody); margin-top: .3cqw; }
.xtlab.you b { color: var(--xgreen-d); }
.xtdots { display: flex !important; justify-content: flex-end; gap: .6cqw; margin-top: .8cqw; }
.xtdots i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--xgrey); transition: background .3s; }
.xtdots i.on { background: var(--xplum); } .xtdots i.you.on { background: var(--xgreen-d); }
.xnode { fill: #3fbf7f; stroke: #1e6b34; stroke-width: 4; transition: fill .5s ease; } .xnode.hot { fill: var(--xplum); stroke: #3b0b2e; }
.xring { fill: none; stroke: var(--xplum); stroke-width: 5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.xring.ping { animation: xping 1.4s ease-out 2; }
@keyframes xping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
/* iconarray: 100 people, the number counts up */
.xslide.xk-iconarray { background: linear-gradient(118deg, #fff 0 52%, #eaf5f1 52%); }
.xk-iconarray .xhead, .xk-wall .xhead { max-width: 44cqw; }
.xk-iconarray .xart { align-items: flex-start; justify-content: flex-start; }
.xia { width: 100%; height: 100%; }
.xbig { color: var(--xgreen-d); margin-top: 2cqw; transition: opacity .5s ease, transform .5s ease; }
.xbig b { display: block; font: 900 15cqw/.86 var(--xdisp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.xbig i { display: block; font: 800 3cqw var(--xdisp); font-style: normal; margin-top: .6cqw; }
.xbig > span { display: block; font: 600 2.3cqw/1.25 var(--xbody); color: #1d2a3a; margin-top: .4cqw; }
.xbig small { display: block; font: 600 1.6cqw var(--xbody); color: var(--xmute); margin-top: 1.4cqw; } .xbig small b { display: inline; font: 800 1.6cqw var(--xbody); color: var(--xgreen-d); }
.xready { display: none; font: 600 2cqw/1.4 var(--xbody); color: var(--xmute); margin-top: 5cqw; }
.xready kbd { font: 800 2cqw var(--xdisp); color: var(--xnavy); border: 2px solid var(--xnavy); border-radius: .4cqw; padding: 0 .6cqw; }
.xppl { position: absolute; right: 6cqw; top: 5cqw; width: 30cqw; display: grid; grid-template-columns: repeat(10, 1fr); gap: .6cqw .5cqw; }
.xpp { width: 100%; height: auto; aspect-ratio: 3 / 5; display: block; }
.xpp * { fill: var(--xgrey); transition: fill .25s ease; transition-delay: var(--d, 0ms); }
.xgo .xpp.al * { fill: var(--xgreen); }
.xslide:not(.xgo) .xpp * { transition: none; }
.xpshow .xhide .xrv { opacity: 0; transform: translateY(1cqw); }
.xpshow .xhide .xready { display: block; }
.xpshow .xhide .xpp.al * { fill: var(--xgrey); }
.xpshow .xhide .xbig { position: absolute; }
.xpshow .xhide.xk-bars .xart > * { opacity: 0; }
.xpshow .xhide.xk-bars .xart::after { content: "Figures ready. Press D to show."; position: absolute; font: 600 2cqw var(--xbody); color: var(--xmute); }
.xreveal.xk-bars .xart > * { transition: opacity .5s ease; }
/* journey: the plan as milestones on a drawn line */
.xslide.xdark { background: radial-gradient(circle at 82% 8%, #21436f 0, #0e1f3a 62%); }
.xdark .xkick { color: #8fbcff; } .xdark .xhead { color: #fff; } .xdark .xssrc { color: #9fb0c8; } .xdark .xcap { color: #d7e2f1; } .xdark .xcap b { color: #fff; }
.xk-journey .xart { flex-direction: column; justify-content: center; gap: 4cqw; padding-left: 3cqw; padding-right: 3cqw; }
.xjr { --dot: min(11cqw, calc(66cqw / var(--n))); position: relative; width: 100%; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.xroad { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: calc(var(--dot) / 2 - .5cqw); height: 1cqw; }
.xroad svg { width: 100%; height: 100%; overflow: visible; display: block; }
.xroad line { stroke-dasharray: 1000; stroke-dashoffset: 0; }
.xgo .xroad line { animation: xdraw 2.4s .4s ease both; }
@keyframes xdraw { from { stroke-dashoffset: 1000; } }
.xms { text-align: center; position: relative; min-width: 0; padding: 0 .6cqw; }
.xgo .xms { animation: xpop .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.4s + var(--i) * 2s / var(--n)); }
@keyframes xpop { from { transform: scale(.4); opacity: 0; } }
.xdot { width: var(--dot); height: var(--dot); border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--c); box-shadow: 0 0 0 1cqw rgba(255, 255, 255, .08); }
.xdot svg { width: 50%; height: 50%; }
.xgo .xms.last .xdot { animation: xpulse 1.6s ease-in-out 3.2s 2; }
@keyframes xpulse { 50% { box-shadow: 0 0 0 2.2cqw rgba(255, 255, 255, .22); } }
.xms b { display: block; color: #fff; font: 800 2.3cqw/1.1 var(--xdisp); margin-top: 1.6cqw; }
.xms span { display: block; font: 700 1.9cqw var(--xbody); margin-top: .5cqw; color: color-mix(in srgb, var(--c) 55%, #fff); }
.xgoal { align-self: center; background: rgba(255, 255, 255, .12); color: #fff; font: 700 2.1cqw var(--xbody); padding: 1.1cqw 2.6cqw; border-radius: 3cqw; }
.xgo .xgoal { animation: xfade .6s 2.9s ease both; }
@keyframes xfade { from { opacity: 0; } }
/* outcomebars: how many have NO problem (100 − the approved figure) */
.xk-outcomebars .xart { flex-direction: column; align-items: stretch; justify-content: flex-start; }
.xob { display: grid; gap: 1.8cqw; width: 100%; padding-top: 1cqw; }
.xobr { display: grid; grid-template-columns: 27cqw 1fr 15cqw; align-items: center; gap: 2cqw; }
.xobt { font: 800 2.3cqw/1.12 var(--xdisp); color: var(--xnavy); }
.xobb { position: relative; height: 4.2cqw; border-radius: 2.1cqw; background: #f1f4f7; overflow: hidden; }
.xobb > div { position: absolute; top: 0; bottom: 0; left: 0; }
.xobb .a { width: 100%; background: var(--xamber); }
.xobb .gl { width: var(--gl); background: var(--xgreen-l); } .xobb .g { width: var(--g); background: var(--xgreen); }
.xgo .xobb .gl, .xgo .xobb .g { animation: xgrow 1.1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--k) * .25s); }
.xgo .xobb .a { animation: xfade .5s both; animation-delay: calc(1.6s + var(--k) * .15s); }
@keyframes xgrow { from { width: 0; } }
.xobn { text-align: right; color: var(--xgreen-d); white-space: nowrap; }
.xobn b { font: 900 3.4cqw/1 var(--xdisp); font-variant-numeric: tabular-nums; } .xobn small { font: 700 1.6cqw var(--xbody); margin-left: .4cqw; }
.xobn em { font: 700 1.6cqw var(--xbody); font-style: normal; }
.xobkey { margin-top: auto; padding-top: 1.2cqw; display: flex; gap: 2cqw; font: 600 1.15cqw var(--xbody); color: var(--xmute); }
.xobkey i { display: inline-block; width: 1.4cqw; height: 1.1cqw; border-radius: .3cqw; vertical-align: -.1cqw; margin-right: .5cqw; }
.xobkey i.g { background: var(--xgreen); } .xobkey i.gl { background: var(--xgreen-l); } .xobkey i.a { background: var(--xamber); }
/* takehome: cards flip in */
.xslide.xk-takehome { background: #f3f6f9; } .xk-takehome .xkick { color: var(--xnavy); }
.xth { width: 100%; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2.4cqw; perspective: 120cqw; }
.xthc { position: relative; border-radius: 2cqw; padding: 2.8cqw 2.6cqw; color: #fff; height: 28cqw; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transform-origin: left center; }
.xgo .xthc { animation: xflip .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.3s + var(--k) * .45s); }
@keyframes xflip { from { transform: rotateY(80deg); opacity: 0; } }
.xthc b { font: 900 8cqw/.85 var(--xdisp); opacity: .9; } .xthc span { font: 800 3.2cqw/1.06 var(--xdisp); }
.xthc svg { position: absolute; right: 2cqw; top: 2.2cqw; width: 11cqw; height: 11cqw; opacity: .28; }
/* robotic: small cuts vs one long cut, then the benefits (R18b) */
.xk-robotic .xart { justify-content: flex-start; }
.xrob { width: 100%; display: grid; grid-template-columns: 23cqw 23cqw 1fr; gap: 3cqw; align-items: center; }
.xrobf { margin: 0; text-align: center; } .xrobf svg { width: 100%; height: auto; display: block; }
.xrobf figcaption { font: 800 1.9cqw/1.15 var(--xdisp); margin-top: .8cqw; } .xrobf.rb figcaption { color: var(--xgreen-d); } .xrobf.op figcaption { color: var(--xmute); }
.xrobf.op svg { opacity: .7; }
.xgo .xport { animation: xpop .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.4s + var(--k) * .25s); transform-box: fill-box; transform-origin: center; }
.xcut { stroke-dasharray: 100; }
.xgo .xcut { animation: xdrawc 1s 1.6s ease both; } @keyframes xdrawc { from { stroke-dashoffset: 100; } }
.xrobl { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqw; }
.xrobl li { display: flex; align-items: center; gap: 1.4cqw; font: 800 2.3cqw/1.15 var(--xdisp); color: var(--xnavy); }
.xri { flex: none; width: 5.2cqw; height: 5.2cqw; border-radius: 50%; background: var(--xgreen); display: grid; place-items: center; } .xri svg { width: 60%; height: 60%; }
.xgo .xrobl li { animation: xslidein .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(2.4s + var(--k) * .35s); }
@keyframes xslidein { from { transform: translateX(3cqw); opacity: 0; } }
/* R18d robot_system (Dr Shah 04-Oct-2026 "draw robot - console, arms"): drawn by explain.js (BOT), the parts arrive in order on .xgo:
   console + surgeon, the signal, table + patient, the cart column, boom and four arms, the tower; then the hands and two arms move together */
.xk-robot .xart { padding-top: .4cqw; padding-bottom: 1.2cqw; }
.xbot { margin: 0; width: 100%; height: 100%; } .xbot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.xk-robot .xhead { max-width: 84cqw; }
.xbot .bt { font: 800 30px Archivo, "Arial Black", sans-serif; fill: var(--xnavy); } .xbot .bn { font: 800 20px Archivo, sans-serif; fill: #fff; }
.xbot .bst { font: 700 19px Figtree, sans-serif; fill: #3a4856; }
.xbot g, .xbot path, .xbot rect { transform-box: fill-box; }
.xgo .b-chair, .xgo .b-cab, .xgo .b-surg { animation: xbup .7s cubic-bezier(.2, .8, .2, 1) .2s both; }
.xgo .bl { animation: xfade .5s both; animation-delay: calc(.8s + var(--k) * 1.45s); }
.xgo .bs { animation: xfade .5s both; animation-delay: calc(.9s + var(--k) * .2s); }
.b-sig { stroke-dashoffset: 0; } .xgo .b-sig { animation: xbsig 1s linear 1.3s both, xbflow 1.2s linear 2.3s infinite; }
@keyframes xbsig { from { opacity: 0; } } @keyframes xbflow { to { stroke-dashoffset: -38; } }
.xgo .b-tab { animation: xfade .6s 1.5s both; }
.xgo .b-col { animation: xbup .6s cubic-bezier(.2, .8, .2, 1) 1.8s both; } .xgo .b-boom { animation: xbdrop .5s cubic-bezier(.2, .8, .2, 1) 2.2s both; }
.b-arm { transform-origin: 50% 0; }
.xgo .b-arm { animation: xbarm .55s cubic-bezier(.3, 1.4, .5, 1) both, xbwork 2.4s ease-in-out infinite; animation-delay: calc(2.6s + var(--k) * .25s), calc(5s + var(--k) * .3s); }
.xgo .b-arm:nth-of-type(odd) { animation-name: xbarm, xbwork2; }
.b-hand { transform-origin: 0 0; } .xgo .b-hand { animation: xbhand 2.4s ease-in-out 5s infinite; }
.xgo .b-ins { animation: xfade .4s both; animation-delay: calc(2.9s + var(--k) * .25s); }
.xgo .b-tow { animation: xbup .6s cubic-bezier(.2, .8, .2, 1) 3.7s both; } .xgo .b-scr { animation: xfade .8s 4.2s both; }
.xgo .b-sig2 { animation: xfade .5s 4.2s both; }
@keyframes xbup { from { transform: translateY(40px); opacity: 0; } }
@keyframes xbdrop { from { transform: translateY(-30px); opacity: 0; } }
@keyframes xbarm { from { transform: scaleY(.2); opacity: 0; } }
@keyframes xbwork { 50% { transform: rotate(1.6deg); } } @keyframes xbwork2 { 50% { transform: rotate(-1.6deg); } }
@keyframes xbhand { 50% { transform: translate(3px, -3px) rotate(-3deg); } }
.xk-robot .xcap { margin-top: -.4cqw; }
.xgo.xk-robot .xcap { animation: xfade .6s 4.6s both; }
/* R18d benefit scenes (explain.js BOT): one drawing + one motion each; numbers = 100 − the approved figure, computed on the server */
.xbot .bsub { font: 700 22px Figtree, sans-serif; fill: #3a4856; } .xbot .blab { font: 800 21px Figtree, sans-serif; fill: var(--xnavy); }
.xbot .bchip { font: 800 19px Figtree, sans-serif; fill: #fff; } .xbot .bchip.big { font: 900 34px Archivo, sans-serif; }
.xbot .bbadge { font: 900 40px Archivo, sans-serif; fill: #fff; } .xbot .bres { font: 800 34px Archivo, sans-serif; fill: var(--xnavy); }
.xbot .bvl { font: 800 25px Archivo, sans-serif; fill: var(--xnavy); } .xbot .bvn { font: 900 66px Archivo, sans-serif; } .xbot .bvs2 { font: 700 20px Figtree, sans-serif; fill: var(--xmute); }
.xbot .bvw { font: 700 26px Figtree, sans-serif; fill: #3a4856; }
.xbot .b-chomp, .xbot .b-tipwork, .xbot .b-wrist, .xbot .b-ring, .xbot .b-bend, .xbot .b-lever, .xbot .b-pivot, .xbot .b-fix, .xbot .b-lens { transform-box: view-box; }
.xbot .b-pop { transform-origin: center; }
.b-draw, .b-cutline { stroke-dasharray: 100; }
.xgo .b-draw { animation: xbdraw 2.6s ease-in-out .6s both; } .xgo .b-cutline { animation: xbdraw 1.6s ease-in-out 1s both; } @keyframes xbdraw { from { stroke-dashoffset: 100; } }
.xgo .b-pop { animation: xpop .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.5s + var(--k) * .8s); }
.xgo .b-mid { animation: xfade .5s 3.1s both; }
.xgo .b-chomp { animation: xbchomp .9s ease-in-out .8s 4; } @keyframes xbchomp { 50% { transform: scaleY(2.4); } }
.xgo .b-wrist { animation: xbwrist 5s ease-in-out .8s infinite; }
@keyframes xbwrist { 0%, 8% { transform: rotate(0); } 24% { transform: rotate(-65deg); } 42% { transform: rotate(65deg); } 54% { transform: rotate(0); } 90%, 100% { transform: rotate(360deg); } }
.xgo .b-ring { animation: xbspin 1.4s ease-out 3.2s both; } @keyframes xbspin { from { opacity: 0; transform: rotate(-160deg); } }
.xgo .b-in { animation: xbin .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.4s + var(--k) * 1s); } @keyframes xbin { from { transform: translate(-30px, -110px); opacity: 0; } }
.xgo .b-bend { animation: xbbend .9s ease-in-out 2.3s both; } @keyframes xbbend { from { transform: rotate(-38deg); } }
.xgo .b-cone { animation: xfade .5s 1s both; } .xgo .b-lens { animation: xblens .9s cubic-bezier(.2, .8, .2, 1) 1.3s both; } @keyframes xblens { from { transform: scale(.15); opacity: 0; } }
.xgo .b-sharp { animation: xbsharp 1s ease 2s both; } @keyframes xbsharp { from { filter: blur(7px); } }
.xgo .b-lever { animation: xblever 2.2s ease-in-out .8s infinite alternate; } @keyframes xblever { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.xgo .b-strain { animation: xbstrain 1.1s ease-in-out .8s infinite alternate; } @keyframes xbstrain { from { opacity: .15; } }
.xgo .b-tipwork { animation: xbpivot 1.1s ease-in-out .8s infinite alternate; } @keyframes xbpivot { from { transform: rotate(-40deg); } to { transform: rotate(40deg); } }
.xbot .bbig { font: 900 34px Archivo, sans-serif; fill: #6b7888; } .xbot .bbig.g, .xbot .blab.g { fill: var(--xgreen-d); }
.xgo .b-nerve { animation: xbglow 1.2s ease-in-out 2.6s 3; } @keyframes xbglow { 50% { filter: drop-shadow(0 0 9px #f5c400) brightness(1.15); } }
.xgo .b-res { animation: xslidein .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(3.2s + var(--k) * .45s); }
.xgo .b-lift { animation: xblift 1.2s cubic-bezier(.2, .8, .2, 1) .5s both; } @keyframes xblift { from { transform: translateY(110px); } }
.xgo .b-glow { animation: xfade .6s 1.8s both; }
.xgo .b-down { animation: xblift2 1s cubic-bezier(.2, .8, .2, 1) .5s both; } @keyframes xblift2 { from { transform: translateY(-70px); opacity: 0; } }
.xgo .bvs { animation: xfade .5s both; animation-delay: calc(2.2s + var(--k) * .3s); }
.xgo .bd.on { animation: xfade .2s both; animation-delay: calc(2.4s + var(--i) * 14ms); }
.xsthumbs .xslide.xr { cursor: default; }
@media (prefers-reduced-motion: reduce) { .xslide *, .xslide *::before { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; } }

/* ================= Home dashboard, Patient directory, Directory (04-Oct-2026, home.js) ================= */
header.top .homebtn { display: inline-flex !important; align-items: center; gap: 4px; color: #fff; text-decoration: none; border: 1px solid #ffffff55; border-radius: 8px; padding: 5px 12px; font-weight: 600; }
body.homepage { --hteal: #0f6e8c; --hteal-d: #0a4f66; --ink2: #3a4856; background: #f3f6f9; }
.hometop { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 22px; padding: 0 28px; height: 60px; background: #fffffff2; backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line2); }
.hbrand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); min-width: 0; }
.hbrand b { display: block; font-size: 14.5px; letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hbrand small { display: block; font-size: 11.5px; color: var(--muted); }
.hmark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(140deg, #0b5870, #1690ad); color: #ffd479; font: 700 20px Georgia, serif; box-shadow: 0 2px 6px #0b587040; }
.hnav { display: flex; gap: 2px; margin-left: auto; } .hnav a { padding: 7px 13px; border-radius: 8px; color: var(--ink2); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.hnav a:hover { background: var(--bg); } .hnav a.on { background: var(--accent-2); color: var(--accent-d); }
.hwho { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; } .hwho a { color: var(--accent); }
.hav { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #fff; font-weight: 700; }
main.home { max-width: 1320px; margin: 0 auto; padding: 0 28px 60px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* hero */
.hero { position: relative; margin: 22px 0 0; padding: 34px 36px 64px; border-radius: 20px; color: #fff; overflow: hidden; display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap;
  background: radial-gradient(circle at 88% 10%, #f2a81d55 0, transparent 34%), radial-gradient(circle at 10% 120%, #1fa3c460 0, transparent 45%), linear-gradient(125deg, #083e52 0%, #0b5870 45%, #138aa6 100%); }
.hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #ffffff07 0 2px, transparent 2px 14px); pointer-events: none; }
.herotxt { flex: 1 1 340px; position: relative; z-index: 1; }
.hdate { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; color: #ffffffb0; font-weight: 600; }
.hero h1 { margin: 0; font: 600 32px/1.15 Georgia, "Times New Roman", serif; letter-spacing: -.3px; }
.hsub { margin: 8px 0 0; color: #ffffffc0; font-size: 13px; }
.hsearch { position: relative; z-index: 2; flex: 0 1 460px; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border-radius: 14px; padding: 0 14px; height: 52px; box-shadow: 0 10px 30px #04293a40; }
.hsearch .ic { color: var(--muted); } .hsearch input { border: 0; box-shadow: none; height: 100%; font-size: 15px; padding: 0; background: transparent; } .hsearch input:focus { box-shadow: none; }
.hsearch kbd { color: var(--muted); }
.hsearch.slim { flex: 0 1 360px; height: 44px; box-shadow: 0 1px 2px #0001; border: 1px solid var(--line); }
.hres { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: 12px; box-shadow: 0 18px 40px #0b2a3a33; padding: 6px; max-height: 420px; overflow: auto; }
.hres .hit { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); } .hres .hit small { display: block; color: var(--muted); font-size: 12px; }
.hres .hit:hover, .hres .hit:focus { background: var(--accent-2); outline: none; } .hres .hit.more { color: var(--accent); font-weight: 600; font-size: 13px; border-top: 1px solid var(--line2); border-radius: 0 0 8px 8px; }
.hres .hempty { margin: 10px 12px; }

/* sections + tiles */
.hgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
.hsec { margin-bottom: 30px; --h: #0f6e8c; --hb: #e3f1f6; }
.hue-teal { --h: #0f6e8c; --hb: #e1f1f6; } .hue-indigo { --h: #4152b3; --hb: #e9ecfb; } .hue-violet { --h: #7a45b0; --hb: #f2eafa; }
.hue-amber { --h: #b26a00; --hb: #fdf1dc; } .hue-green { --h: #1d7a4a; --hb: #e3f4ea; } .hue-rose { --h: #b0344f; --hb: #fbe9ed; }
.hsec > header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 2px 12px; padding-left: 12px; border-left: 4px solid var(--h); }
.hsec h2 { margin: 0; font: 600 19px/1.2 Georgia, serif; color: var(--ink); } .hsec header p { margin: 0; color: var(--muted); font-size: 13px; }
.hcount { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--h); background: var(--hb); padding: 3px 10px; border-radius: 999px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.tile { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 15px 15px 15px 14px; min-height: 84px; background: #fff; border: 1px solid #e3e9ef; border-radius: 14px;
  text-decoration: none; color: var(--ink); text-align: left; font: inherit; font-weight: 400; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
button.tile { width: 100%; min-height: 84px; }
.tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--h) 40%, #fff); box-shadow: 0 10px 24px #0b2a3a14; background: #fff; }
.tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--h) 45%, transparent); outline-offset: 2px; }
.tic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--hb); color: var(--h); }
.tile .tt { min-width: 0; padding-right: 22px; } .tile.planned .tt { padding-right: 58px; } .tile b { display: block; font-size: 14.5px; line-height: 1.3; color: var(--ink); } .tile small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.tgo { position: absolute; top: 13px; right: 12px; color: #b6c2cd; opacity: 0; transition: opacity .15s; } .tgo .ic { width: 15px; height: 15px; } .tile:hover .tgo { opacity: 1; color: var(--h); }
.tile.planned { background: #fbfcfd; border-style: dashed; border-color: #d7e0e8; } .tile.planned .tic { background: #f0f3f6; color: #8796a4; } .tile.planned b { color: var(--ink2); }
.tile.planned:hover .tic { background: var(--hb); color: var(--h); }
.tpill { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #8796a4; background: #eef2f5; padding: 2px 7px; border-radius: 999px; }
.tbadge { position: absolute; top: 10px; right: 10px; min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--h); color: #fff; font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.tdone { position: absolute; top: 10px; right: 12px; color: var(--ok); font-weight: 700; }

/* right column cards */
.hside { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.hcard { background: #fff; border: 1px solid #e3e9ef; border-radius: 16px; padding: 14px 14px 10px; box-shadow: 0 1px 2px #0b2a3a0d; }
.hcard > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 4px 8px; }
.hcard h3 { margin: 0; font-size: 14px; letter-spacing: .2px; } .hcard > header a { font-size: 12.5px; color: var(--accent); text-decoration: none; font-weight: 600; }
.hcard .hempty, .hcard .muted { margin: 6px 4px 8px; }
.hempty { color: var(--muted); font-size: 13px; } .hempty a, .linkbtn { color: var(--accent); font-weight: 600; }
.linkbtn { background: none; border: 0; padding: 0; min-height: 0; text-decoration: underline; } .linkbtn:hover { background: none; }
.prow, .lrow { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; text-decoration: none; color: var(--ink); }
a.prow:hover, .prow.due:hover, .lrow:hover { background: #f4f8fa; }
.pav { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-2); color: var(--accent-d); font-weight: 700; font-size: 13px; text-transform: uppercase; }
.pav .ic { width: 18px; height: 18px; }
.hpn { flex: 1; min-width: 0; text-decoration: none; color: var(--ink); } .hpn b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpn small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddate { flex: none; width: 54px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--accent-d); background: var(--accent-2); border-radius: 8px; padding: 5px 0; }
.ddate.today { background: var(--gold); color: #fff; }
.iconbtn { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 9px; border: 1px solid var(--line2); background: #fff; color: var(--accent); text-decoration: none; }
.iconbtn:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-d); } .iconbtn .ic { width: 17px; height: 17px; }

/* home board (04-Oct-2026): today at the hospital · needs doing · celebrate · six shortcuts */
.hero.slim { padding: 26px 32px; margin-bottom: 24px; align-items: center; }
.bsec { margin-bottom: 24px; } .bsec > header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 2px 10px; }
.bsec h2 { margin: 0; font: 600 19px/1.2 Georgia, serif; } .bsrc { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.hcard.sk { min-height: 120px; background: linear-gradient(90deg, #fff 0, #f2f6f9 50%, #fff 100%); background-size: 200% 100%; animation: hsk 1.2s infinite linear; }
@keyframes hsk { to { background-position: -200% 0; } }
.hosp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hday { --h: #0f6e8c; --hb: #e1f1f6; } .hd-a { --h: #4152b3; --hb: #e9ecfb; } .hd-d { --h: #1d7a4a; --hb: #e3f4ea; }
.hday > header { display: flex; align-items: center; gap: 10px; margin: 0 2px 6px; } .hday .tic { width: 36px; height: 36px; border-radius: 10px; }
.hday h3 { flex: 1; margin: 0; font-size: 15px; } .hn { font: 700 26px/1 system-ui, sans-serif; color: var(--h); font-variant-numeric: tabular-nums; }
.hrow { display: block; padding: 8px 6px; border-top: 1px solid #eef2f5; text-decoration: none; color: var(--ink); } .hrow:hover { background: #f4f8fa; }
.hrow b { display: block; font-size: 14px; } .hrow small { display: block; color: var(--muted); font-size: 12.5px; }
.hnext { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--h); } .hnext.red { color: var(--err); }
.tlist, .clist { list-style: none; margin: 0; padding: 0; }
.tlist li, .clist li { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-top: 1px solid #eef2f5; } .tlist li:first-child, .clist li:first-child { border-top: 0; }
.tage { flex: none; width: 46px; text-align: center; font-size: 12px; font-weight: 700; color: var(--accent-d); background: var(--accent-2); border-radius: 8px; padding: 5px 0; font-variant-numeric: tabular-nums; }
.tlist .hpn small { white-space: normal; }
.tlist li.late .tage { background: var(--err); color: #fff; } .tlist li.late .hpn small { color: var(--err); font-weight: 600; }
.ttag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
.cic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fdf1dc; color: #b26a00; }
.csoon { font-size: 12.5px; }
.shorts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 6px 0 10px; }
.short { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 92px; padding: 12px 8px; background: #fff; border: 1px solid #e3e9ef; border-radius: 14px;
  color: var(--accent-d); text-decoration: none; font: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.short:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #0b2a3a14; background: #fff; } .short .ic { width: 26px; height: 26px; } .short b { font-size: 13.5px; color: var(--ink); text-align: center; }
@media (max-width: 900px) { .hosp { grid-template-columns: 1fr; } .shorts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* page head (patients, directory) */
.phead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 28px 0 18px; }
.phead > div:first-child { flex: 1 1 320px; } .phead h1 { margin: 0 0 4px; font: 600 26px/1.2 Georgia, serif; } .phead .muted { font-size: 13px; margin: 0; }
.hbtnp { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--accent); border: 0; color: #fff; text-decoration: none; font-weight: 600; }
.hbtnp:hover { background: var(--accent-d); }
.ptable { padding: 4px 0 0; overflow-x: auto; } .ptable table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ptable th { text-align: left; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.ptable td { padding: 9px 14px; border-bottom: 1px solid #eef2f5; vertical-align: middle; } .ptable tr:hover td { background: #f8fbfc; }
.ptable td a { color: var(--ink); text-decoration: none; } .ptable td a:hover b { color: var(--accent); } .ptable td small { display: block; color: var(--muted); font-size: 12px; }
.ptable td.dx { color: var(--ink2); max-width: 380px; } .ptable td.acts { white-space: nowrap; text-align: right; } .ptable td.acts > * { margin-left: 4px; vertical-align: middle; }
.pbtn { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 9px; background: var(--accent); color: #fff !important; font-weight: 600; font-size: 13px; }
.pbtn:hover { background: var(--accent-d); } .pfoot { padding: 4px 14px 12px; }

/* directory */
.ltabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.ltabs button { background: #fff; color: var(--ink2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 13px; }
.ltabs button span { margin-left: 4px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ltabs button:hover { background: var(--accent-2); border-color: var(--accent-2); } .ltabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; } .ltabs button.on span { color: #ffffffc0; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.lgrid > .hempty, .lgrid > .lnote, .lgrid > .err { grid-column: 1 / -1; }
.lcard { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #e3e9ef; border-radius: 14px; padding: 14px; }
.lcard.todo { border-style: dashed; background: #fffdf7; }
.lh { display: flex; align-items: flex-start; gap: 11px; } .lh > div { flex: 1; min-width: 0; } .lh b { display: block; font-size: 14.5px; } .lh small { display: block; color: var(--muted); font-size: 12.5px; }
.laddr, .lnotes { margin: 0; font-size: 13px; color: var(--ink2); white-space: pre-line; } .lnotes { color: var(--muted); font-size: 12.5px; }
.lfoot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 4px; }
.lfoot .muted { margin-left: auto; }
.lact { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--line2); background: #f7fafc; color: var(--accent-d); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.lact:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-d); } .lact .ic { width: 15px; height: 15px; }
.lact.warnact { background: var(--warn); border-color: #f5dca6; color: #8a5a00; }

/* dialogs + toast */
.hdlg { border: 0; border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 30px 80px #04293a55; color: var(--ink); }
.hdlg.wide { width: min(680px, calc(100vw - 32px)); } .hdlg::backdrop { background: #0b2a3a66; backdrop-filter: blur(2px); }
.hdlg form { padding: 22px 24px 18px; } .hdlg p { font-size: 14px; line-height: 1.55; } .hdlg .muted { font-size: 12.5px; }
.hdlg .ikprev { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13.5px; line-height: 1.5; background: #eef7ef; border-radius: 12px; padding: 12px 14px; margin: 12px 0 4px; max-height: 50vh; overflow: auto; }
.hdlg #ikdoc { margin-left: 8px; } /* module 7: Interakt preview */
.dh { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .dh b { display: block; font-size: 17px; } .dh small { color: var(--muted); font-size: 12.5px; }
.dh .tic { --h: var(--accent); --hb: var(--accent-2); }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .dgrid .full { grid-column: 1 / -1; }
.dact { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .dact .sp { flex: 1; } .dact:not(:has(.sp)) { justify-content: flex-end; }
button.danger { color: var(--err); border-color: #e6b3ae; } button.danger:hover { background: var(--err-bg); }
.htoast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; background: #0b2a3a; color: #fff; padding: 9px 18px; border-radius: 10px; font-weight: 600; transition: .2s; pointer-events: none; z-index: 99; }
.htoast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1180px) { .hgrid { grid-template-columns: 1fr; } .hside { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
@media (max-width: 760px) {
  .hometop { padding: 0 16px; gap: 12px; backdrop-filter: none; background: #fff; } .hbrand small, .hwho .hname { display: none; } .hbrand b { font-size: 13px; } .hbrand > span:last-child { min-width: 0; } .hwho { margin-left: auto; flex: none; }
  .hnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; justify-content: space-around; background: #fff; border-top: 1px solid var(--line2); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); margin: 0; }
  main.home { padding: 0 16px 90px; } .hero { padding: 24px 20px 56px; border-radius: 16px; } .hero.slim { padding: 20px 16px; } .ttag { display: none; } .hero h1 { font-size: 25px; } .hsearch { flex-basis: 100%; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tile { flex-direction: column; gap: 8px; min-height: 0; } .tile .tt { padding-right: 0; } .tile small { font-size: 12px; }
  .tpill { position: static; align-self: flex-start; } .hside { grid-template-columns: 1fr; } .dgrid { grid-template-columns: 1fr; }
  .ptable th:nth-child(3), .ptable td:nth-child(3), .ptable th:nth-child(4), .ptable td:nth-child(4) { display: none; }
}

/* send to patient (/?p=send, 04-Oct-2026) */
.sgrid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px; align-items: start; }
.sto { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; }
.sto label { display: block; font-size: 12px; font-weight: 700; color: var(--ink2); margin: 0 4px 8px; } .sto label input, .sto label textarea { margin-top: 3px; width: 100%; }
.sto label small { font-weight: 500; color: var(--muted); }
.sfind { position: relative; margin: 0 4px 6px; } .sfind input { width: 100%; } .sfind .hres { z-index: 5; }
.snote { font-size: 12.5px; margin: 4px 4px 10px; }
.swho { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 4px 10px; font-size: 15px; font-weight: 700; } .swho a { color: var(--accent-d); text-decoration: none; }
.swho small { color: var(--muted); font-weight: 600; font-size: 12px; } .swho .sdx { flex-basis: 100%; font-weight: 500; }
.sfields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; } .sfields label:first-child { grid-column: 1 / -1; }
.spicked { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 4px 10px; } .slab { flex-basis: 100%; margin: 0; font-size: 12px; font-weight: 700; color: var(--ink2); }
.stag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 4px 3px 8px; border-radius: 999px; background: var(--accent-2); color: var(--accent-d); font-size: 12.5px; font-weight: 600; }
.stag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; } .stag .ic { width: 14px; height: 14px; }
.stag button { display: grid; place-items: center; width: 20px; height: 20px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; } .stag button:hover { background: #fff; }
.smsgl textarea { font-size: 13px; line-height: 1.45; resize: vertical; }
.sbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 4px 6px; }
.sbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 12px; font-weight: 700; font-size: 14px; border: 0; color: #fff; }
.sbtn small { font-weight: 500; opacity: .85; font-size: 11.5px; } .sbtn .ic { width: 19px; height: 19px; }
.sbtn.wa { grid-column: 1 / -1; background: #1a8f4c; } .sbtn.wa:hover:not(:disabled) { background: #12723b; }
.sbtn.mail { background: var(--accent); } .sbtn.mail:hover:not(:disabled) { background: var(--accent-d); }
.sbtn.ik { background: #5b46b8; } .sbtn:disabled { background: #e4e9ee; color: #8794a1; cursor: not-allowed; }
.sfilt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; } .sfilt select { width: auto; margin-left: auto; }
.schips { display: flex; flex-wrap: wrap; gap: 6px; }
.schip { display: inline-flex; align-items: center; gap: 5px; background: #fff; color: var(--ink2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 12.5px; }
.schip .ic { width: 14px; height: 14px; } .schip span { color: var(--muted); } .schip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .schip.on span { color: #ffffffc0; }
.slist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .slist > .hempty { grid-column: 1 / -1; }
.scard { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e9ef; border-radius: 14px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.scard.on { border-color: #1a8f4c; box-shadow: 0 0 0 2px #1a8f4c40; } .scard.draft { border-style: dashed; background: #fffdf7; }
.sthumb { position: relative; aspect-ratio: 16 / 9; background: #0b2a3a; display: grid; place-items: center; color: #fff; }
.sthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sthumb .splay { position: relative; width: 38px; height: 38px; filter: drop-shadow(0 2px 6px #0008); }
.sthumb .sbig { width: 44px; height: 44px; opacity: .9; }
.sk-lp { background: linear-gradient(135deg, #0b5870, #1690ad); } .sk-page { background: linear-gradient(135deg, #4152b3, #7a8be0); } .sk-review { background: linear-gradient(135deg, #b26a00, #f2a81d); } .sk-other { background: #5f6f7d; }
.sbody { padding: 10px 12px 4px; } .sbody b { display: block; font-size: 13.5px; line-height: 1.35; } .sbody small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.sbody p { margin: 6px 0 0; font-size: 12.5px; color: var(--ink2); } .sbody .stopic { color: var(--muted); font-size: 11.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sdraft { color: #8a5a00 !important; font-weight: 600; }
.sfoot { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 12px; margin-top: auto; }
.spick { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 12px; border-radius: 8px; border: 1px solid #1a8f4c; background: #fff; color: #1a8f4c; font-size: 12.5px; font-weight: 700; }
.spick .ic { width: 15px; height: 15px; } .spick[aria-pressed="true"] { background: #1a8f4c; color: #fff; }
.slog, .slogw { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-top: 1px solid #eef2f5; font-size: 13px; } .slog > div { min-width: 0; flex: 1; }
.slog b { display: block; font-weight: 600; overflow-wrap: anywhere; } .slog small { color: var(--muted); font-size: 12px; } .slogw .slog { border: 0; padding: 0; flex: 1; } .slogp { flex: none; font-weight: 600; font-size: 13px; } .slogp a { color: var(--accent-d); }
.sch { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #e3f4ea; color: #1a8f4c; } .sch.email { background: var(--accent-2); color: var(--accent); } .sch.interakt { background: #ece8fb; color: #5b46b8; } .sch .ic { width: 15px; height: 15px; }
.scathead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; } .scathead .muted { margin: 0; font-size: 13px; flex: 1 1 360px; }
@media (max-width: 900px) { .sgrid { grid-template-columns: 1fr; } .sto { position: static; max-height: none; } .slist { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .sfilt select { margin-left: 0; } }

/* Section numbers (Dr Shah, 05-Oct-2026: "each section should carry a name & a number, so my communication becomes easy").
   Fixed per section — the number goes with the section if the order changes or a section is hidden. Never printed.
   They replace the running counter (#rxsecs .sech::before, 1 · 2 · 4.1 …), which renumbered whenever a section was hidden or moved. */
#rxsecs .sech::before, #rxsecs .agrph::before { content: none !important; display: none !important; }
.secno { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; margin-right: 7px; border-radius: 11px;
  background: var(--sc, var(--accent)); color: #fff; font: 700 12px/1 "Segoe UI", system-ui, Arial, sans-serif; vertical-align: 1px; flex: none; }
.brow > .secno { align-self: center; margin-top: 14px; }

@media print { .secno { display: none !important; } }

/* Testing / local copy bar (05-Oct-2026). Fixed to the bottom so it never shifts the page layout; not printed. */
.envbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #b3261e; color: #fff; font-size: 12.5px; padding: 5px 14px; text-align: center; box-shadow: 0 -2px 8px #0003; }
.envbar a { color: #fff; text-decoration: underline; } .envbar-local { background: #6b3fa0; }
body:has(.envbar) { padding-bottom: 30px; }
@media print { .envbar { display: none !important; } body:has(.envbar) { padding-bottom: 0; } }
.secpair { display: inline-flex; align-items: center; white-space: nowrap; }