/* Genesys V3 · the interface's stylesheet.
 *
 * Lifted out of index.html on 5 September 2026, unchanged. It was 79KB of the 419KB
 * that file had grown to. It is in the service worker's shell list, so it is there
 * offline like everything else.
 *
 * The 2 wordmarks used to be carried in here as base64 text, 37,105 characters on a
 * single line, which is most of what made this file unmanageable. They are ordinary
 * PNG files now, so the browser caches them separately and this stays readable.
 *
 * ---------------------------------------------------------------------------
 * CONTRAST, MEASURED · 17 September 2026
 *
 * The first person to use this product in anger reported that dark mode text
 * is not clearly visible in places. Both palettes were then measured against
 * WCAG AA rather than adjusted by eye, over 20 foreground and background pairs
 * each, at the size each pair is actually used.
 *
 *   dark     3 of 20 failed
 *   light   11 of 20 failed
 *
 * THE THEME NOBODY COMPLAINED ABOUT WAS THE WORSE ONE. --faint carried most of
 * it: 2.66 : 1 in light and 3.84 : 1 in dark against a requirement of 4.5, and
 * it draws .mode, .lbl, .hint, .empty and every column heading in the product.
 *
 * Each replacement below was solved rather than chosen. Hue and saturation are
 * held and lightness is walked until the token clears 4.5 : 1 against every
 * background it appears on, so the palette keeps its character and stops
 * failing. What each one now measures is written beside it.
 *
 * A contrast pass cannot see a colour set by an inline style, and there are
 * some. If the reviewer names the screens they found unreadable, that is still
 * worth having.
 * ---------------------------------------------------------------------------
 */
:root{
  --paper:#F4F6F9;--surface:#FFF;--surface2:#FBFCFD;
  --ink:#14202B;--muted:#5D6B7A;
  /* was #8C9AA8, which measured 2.66 : 1 on paper. Now 4.55 / 4.93 / 4.80
     against paper, surface and surface2. */
  --faint:#637282;
  --rule:#DFE5EC;--rule2:#EDF1F5;
  /* was #1E76F0: 3.95 on paper, 4.28 on surface, 3.80 on its own wash.
     Now 4.71 / 5.10 / 4.52, and white on it as a button is 5.10. */
  --brand:#0F68E4;--deep:#0B4FB0;--brandwash:#EAF2FE;
  /* was #D0342C, which measured 4.40 on its own wash. Now 4.51 there. */
  --bad:#CD332B;--badwash:#FDEDEC;
  /* was #C77700: 3.46 on surface and 3.18 on its own wash, which is the
     .tag.w a clinician reads at 11px. Now 4.55 / 4.92 / 4.52. This is the
     largest visible change in the file and it reads browner. */
  --warn:#A36100;--warnwash:#FDF4E7;
  /* was #0F8A7E: 4.24 on surface, 3.82 on its own wash. Now 4.62 / 5.01 / 4.52. */
  --good:#0E7D72;--goodwash:#E9F6F4;
  --shadow:0 1px 2px rgba(20,32,43,.06),0 8px 24px rgba(20,32,43,.05);
  --content:1240px;--r:10px;
}
[data-theme="dark"]{
  --paper:#0A121C;--surface:#101A26;--surface2:#0D1622;
  --ink:#EAF2FA;--muted:#8DA2B6;
  /* was #63788C: 4.12 on paper, 3.84 on surface, 3.98 on surface2.
     Now 4.85 / 4.52 / 4.69. The only dark token that had to move. */
  --faint:#6E8498;
  --rule:#22303F;--rule2:#1A2634;
  --brand:#4C8DFF;--deep:#7EAEFF;--brandwash:#12243C;
  --bad:#FF6B60;--badwash:#2A1615;--warn:#FBBF24;--warnwash:#2A2113;
  --good:#5DE4CF;--goodwash:#0F2A28;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:"Inter Tight",system-ui,sans-serif;font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Archivo,system-ui,sans-serif;letter-spacing:-.02em;margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.app{display:grid;grid-template-columns:224px 1fr;grid-template-rows:60px 1fr;min-height:100vh}
.topbar{grid-column:1 / -1;display:flex;align-items:center;gap:10px;padding:0 18px;min-width:0;
  background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
.topbar .greet{font-family:Archivo;font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.topbar .greet span{display:block;font-family:"Inter Tight";font-weight:400;font-size:11.5px;color:var(--muted);letter-spacing:0}
.topbar .sp{flex:1}
/* The ward tab. Colour follows severity, never volume: one patient marked sick
   with nothing recorded since outranks five children missing a weight. */
.wardtab{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;
  border:1px solid transparent;font-size:12.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer}
.wardtab .pip{width:9px;height:9px;border-radius:99px;flex:none}
.wardtab.red{background:color-mix(in srgb,var(--bad) 13%,transparent);
  border-color:color-mix(in srgb,var(--bad) 40%,transparent);color:var(--bad)}
.wardtab.red .pip{background:var(--bad);box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 60%,transparent);
  animation:wardpulse 2.4s ease-out infinite}
.wardtab.amber{background:color-mix(in srgb,var(--warn) 14%,transparent);
  border-color:color-mix(in srgb,var(--warn) 40%,transparent);color:var(--warn)}
.wardtab.amber .pip{background:var(--warn)}
.wardtab.green{background:color-mix(in srgb,var(--good) 11%,transparent);
  border-color:color-mix(in srgb,var(--good) 32%,transparent);color:var(--good)}
.wardtab.green .pip{background:var(--good)}
.wardtab.grey{background:var(--surface2);border-color:var(--rule);color:var(--muted)}
.wardtab.grey .pip{background:var(--muted)}
@keyframes wardpulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 55%,transparent)}
  70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent}}
@media(prefers-reduced-motion:reduce){.wardtab.red .pip{animation:none}}
.iconbtn{position:relative;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.iconbtn:hover{background:var(--surface2);color:var(--ink)}
.iconbtn .dot{position:absolute;top:5px;right:5px;min-width:15px;height:15px;padding:0 4px;border-radius:99px;
  background:var(--bad);color:#fff;font-family:"IBM Plex Mono";font-size:9.5px;display:grid;place-items:center}
/* White on the dark theme's --bad measures 2.79 : 1. The badge takes the same
   dark ink the buttons already take, which is 6.80 : 1. */
[data-theme="dark"] .iconbtn .dot{color:#08111C}
.who2{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border-radius:99px}
.who2:hover{background:var(--surface2)}
.who2 .nm2{font-size:12.5px;font-weight:600;line-height:1.25;text-align:left;max-width:170px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who2 .nm2 span{display:block;font-weight:400;color:var(--muted);font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1150px){ .who2 .nm2{display:none} }
.avatar{width:32px;height:32px;border-radius:99px;object-fit:cover;background:var(--brandwash);color:var(--brand);
  display:grid;place-items:center;font-family:Archivo;font-weight:700;font-size:11.5px;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.pop{position:absolute;top:52px;right:16px;width:340px;max-height:60vh;overflow:auto;z-index:60;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);padding:10px}
.pop h4{font-family:Archivo;font-size:13px;padding:6px 8px 8px}
.ws{display:flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid var(--rule);border-radius:99px;
  font-size:12.5px;color:var(--muted);max-width:230px;flex:none}
.ws:hover{border-color:var(--brand);color:var(--brand)}
.ws b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws.on b{color:var(--brand)}
.demo{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warn);border:1px solid var(--warn);border-radius:3px;padding:1px 5px}
.pop .fgroup{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:10px 8px 5px}
.pop .it{padding:9px 8px;border-radius:8px;font-size:13px;line-height:1.45}
.pop .it:hover{background:var(--surface2)}
.pop .it.unread{background:var(--brandwash)}
.pop .it b{display:block;font-size:12.5px}
.pop .it small{color:var(--muted);font-size:11.5px}
.photo-drop{display:flex;align-items:center;gap:14px;padding:12px;border:1px dashed var(--rule);border-radius:10px;background:var(--surface2)}
.photo-drop .avatar{width:64px;height:64px;font-size:18px}
.side{background:var(--surface);border-right:1px solid var(--rule);display:flex;flex-direction:column;
      position:sticky;top:60px;height:calc(100vh - 60px);padding:16px 14px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav button{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
      font-size:13.5px;color:var(--muted);text-align:left;width:100%}
.side nav button:hover{background:var(--surface2);color:var(--ink)}
.side nav button[aria-current="true"]{background:var(--brandwash);color:var(--brand);font-weight:600}
.side nav button svg{flex:none;opacity:.9}
.side nav .count{margin-left:auto;font-family:"IBM Plex Mono";font-size:11px;opacity:.8}
.side .grp{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--faint);padding:16px 12px 7px}
.side .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);padding-left:12px}
.side .foot .who{text-align:left;font-size:11.5px;line-height:1.45;color:var(--muted)}
.content{min-width:0}
@media(max-width:860px){
  .app{grid-template-columns:1fr;grid-template-rows:56px auto 1fr}
  .topbar .greet span{display:none}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
        border-right:0;border-bottom:1px solid var(--rule);padding:10px}
  .side nav{flex-direction:row;flex-wrap:wrap;flex:1}
  .side nav button{width:auto}
  .side .grp{display:none}
  .side .foot{margin-top:0;padding-top:0;border-top:0;display:flex;align-items:center;gap:8px}
  .side .foot .who{display:none}
}
.brand{display:flex;align-items:center;gap:9px;font-family:Archivo;font-weight:700;letter-spacing:-.03em;font-size:17px}
.brand small{font-family:"IBM Plex Mono";font-size:10px;font-weight:400;letter-spacing:.14em;color:var(--brand);border:1px solid var(--brand);border-radius:3px;padding:1px 4px}
.spacer{flex:1}
.who{font-size:12.5px;color:var(--muted);text-align:right;line-height:1.35}
.who b{color:var(--ink);display:block;font-weight:600}
.tg{font-size:12px;padding:6px 10px;border:1px solid var(--rule);border-radius:99px;color:var(--muted)}
.tg[aria-pressed="true"]{border-color:var(--brand);color:var(--brand);background:var(--brandwash)}
.strip{background:var(--warnwash);color:var(--warn);border-bottom:1px solid var(--rule);font-size:12px}
.strip.off{background:var(--badwash);color:var(--bad)}
.strip.pending{background:var(--brandwash);color:var(--brand)}
/* main sits in the grid column that starts after the 224px sidebar, so
   "margin:0 auto" centred the content inside THAT column and pushed it right.
   On a 1920px screen that left a 228px dead strip on each side and the whole
   interface drifting away from its own menu.
   Anchor it to the left instead and keep the reading width as a cap, so wide
   screens gain usable space rather than symmetrical emptiness. */
/* main fills the column beside the sidebar. It used to be capped and centred,
   which left dead space either side on a wide screen and pulled the interface
   away from its own menu.
   The cap is gone rather than merely larger: this is a dashboard of cards and
   grids, and they distribute across the width. Where a screen is a single
   column of prose, that block carries its own reading width instead, so long
   lines are controlled where they actually occur rather than by emptying the
   whole page. */
.stripin{margin:0;padding:8px 26px;display:flex;gap:10px;align-items:center}
main{margin:0;padding:26px 26px 90px}
main .head p, main .hint, main p.sub{max-width:78ch}
.head{display:flex;align-items:flex-end;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.head h1{font-size:26px;font-weight:700}
.head p{margin:0;color:var(--muted);font-size:13.5px}
.mode{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:22px}
.grid{display:grid;gap:18px}
.split{grid-template-columns:1fr 340px}
@media(max-width:1000px){.split{grid-template-columns:1fr}}
.search{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px 18px;box-shadow:var(--shadow)}
.search input{flex:1;border:0;background:none;font-size:19px;font-family:Archivo}
.search input:focus{outline:none}
.hint{font-size:12px;color:var(--faint);margin:9px 2px 0;line-height:1.55}
.row{display:flex;align-items:center;gap:14px;padding:0 16px;min-height:54px;border-bottom:1px solid var(--rule2);width:100%;text-align:left}
.row:last-child{border-bottom:0}
.row:hover{background:var(--surface2)}
.av{width:34px;height:34px;border-radius:8px;background:var(--brandwash);color:var(--brand);display:grid;place-items:center;font-family:Archivo;font-weight:700;font-size:12px;flex:none}
.nm{font-weight:600;display:block}.sub{font-size:12px;color:var(--muted);display:block}
.grow{flex:1;min-width:0}
.tag{font-size:11px;font-family:"IBM Plex Mono";padding:2px 7px;border-radius:99px;border:1px solid var(--rule);color:var(--muted);white-space:nowrap}
.tag.b{background:var(--brandwash);border-color:transparent;color:var(--brand)}
.tag.r{background:var(--badwash);border-color:transparent;color:var(--bad)}
.tag.w{background:var(--warnwash);border-color:transparent;color:var(--warn)}
.tag.g{background:var(--goodwash);border-color:transparent;color:var(--good)}
.btn{background:var(--brand);color:#fff;padding:10px 16px;border-radius:8px;font-size:13.5px;font-weight:600}
.btn:hover{background:var(--deep)} [data-theme="dark"] .btn{color:#08111C}
.btn.quiet{background:none;color:var(--muted);border:1px solid var(--rule)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.lbl{font-size:11px;font-family:"IBM Plex Mono";letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:7px}
.fld{width:100%;padding:11px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--surface2)}
.fld:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
.vin{display:flex;align-items:baseline;gap:6px;border:1px solid var(--rule);border-radius:8px;padding:8px 11px;background:var(--surface2)}
.vin input{width:100%;border:0;background:none;font-family:"IBM Plex Mono";font-size:19px}
.vin input:focus{outline:none}
.vin span{font-size:11px;color:var(--faint);font-family:"IBM Plex Mono"}
.abn .vin{border-color:var(--bad);background:var(--badwash)} .abn .lbl{color:var(--bad)}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule);border-radius:99px;padding:8px 14px;font-size:13.5px;margin:0 8px 8px 0;background:var(--surface2)}
.chip[data-on="1"]{background:var(--brandwash);border-color:var(--brand);color:var(--brand);font-weight:600}
.note{font-size:12.5px;color:var(--muted);background:var(--surface2);border:1px solid var(--rule);border-radius:8px;padding:11px 13px;line-height:1.55}
.note.bad{background:var(--badwash);border-color:var(--bad);color:var(--bad)}
.note.good{background:var(--goodwash);border-color:var(--good);color:var(--good)}
.big{font-family:Archivo;font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1}
.bar{display:flex;gap:10px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);flex-wrap:wrap}
.mid{min-height:100vh;display:grid;grid-template-columns:1fr 460px}
.scene{position:relative;overflow:hidden;background:
   radial-gradient(1200px 800px at 30% 40%, var(--brandwash), transparent 70%), var(--paper)}
.scene canvas{position:absolute;inset:0;display:block}
.scene::after{content:"";position:absolute;inset:auto 0 0 0;height:52%;z-index:1;pointer-events:none;
   background:linear-gradient(to top, var(--paper) 14%, transparent)}
.scene .tagline{position:absolute;left:56px;bottom:56px;max-width:440px;z-index:2;pointer-events:none}
.scene .tagline h2{font-size:30px;font-weight:700;line-height:1.12;letter-spacing:-.03em}
.scene .tagline p{color:var(--muted);font-size:14px;margin-top:10px;line-height:1.55}
.formside{display:grid;place-items:center;padding:24px;background:var(--surface);border-left:1px solid var(--rule)}
.signin{max-width:360px;width:100%}
@media(max-width:900px){
  /* A portrait iPad is 834px wide, so it lands here and used to get a 230px
     band. The scene geometry sits above centre and the fade below covers the
     bottom half, which between them left nothing visible. Taller band, and the
     fade is reduced to match. */
  /* 46vh on a tablet leaves room for the whole form. On a phone the same
     fraction pushed the Sign in button below the fold, which is a worse fault
     than an invisible ornament, so the band is capped by width as well. */
  .mid{grid-template-columns:1fr;grid-template-rows:min(38vh,380px) 1fr}
  .scene::after{height:32%}
  .scene .tagline{left:24px;bottom:20px;max-width:none}
  .scene .tagline h2{font-size:20px} .scene .tagline p{display:none}
  .formside{border-left:0;border-top:1px solid var(--rule)}
}
@media(max-width:900px) and (max-height:520px){
  /* A phone in landscape has no room for both. The form wins. */
  .mid{grid-template-rows:140px 1fr}
  .scene::after{height:24%}
}
@media(max-width:560px){
  /* A phone in portrait: the form must be reachable without scrolling. */
  .mid{grid-template-rows:min(26vh,210px) 1fr}
  .scene::after{height:26%}
  .scene .tagline{bottom:14px} .scene .tagline h2{font-size:17px}
}
.empty{color:var(--faint);font-size:13px;padding:22px 16px;text-align:center}
/* Ten fields in the first section, four of which actually save the record.
   Marking them is the difference between a clerk knowing what to chase and a
   clerk treating all ten as compulsory at a busy desk. */
.req{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--bad);
  border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);border-radius:99px;
  padding:1px 5px;margin-left:6px;vertical-align:middle;font-weight:600}
/* There are 79 of these across the app, and every one of them asserts that
   something is not there. While the data is still arriving that assertion is
   false, and on the results screen it said nothing was waiting while a critical
   result was loading. Rather than edit 79 call sites, main carries aria-busy
   while loading and every empty state is replaced by a neutral line until the
   data has actually arrived. */
main[aria-busy="true"] .empty{visibility:hidden;position:relative}
main[aria-busy="true"] .empty::after{
  content:"Loading.";visibility:visible;position:absolute;inset:0;
  display:grid;place-items:center;color:var(--faint)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--rule);border-top-color:var(--brand);border-radius:99px;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

.enc{grid-template-columns:190px 1fr 320px}
@media(max-width:1140px){.enc{grid-template-columns:1fr}}
.budget{display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono";font-size:11.5px;color:var(--muted);border:1px solid var(--rule);border-radius:99px;padding:5px 11px}
.budget b{color:var(--ink);font-weight:500}
.budget.over{border-color:var(--bad);color:var(--bad)} .budget.over b{color:var(--bad)} .budget .keys{color:var(--bad)}
.track{position:sticky;top:26px;align-self:start}
.step{display:flex;gap:11px;align-items:flex-start;padding:10px 11px;width:100%;text-align:left;border-radius:8px;position:relative}
.step:hover{background:var(--surface2)} .step[aria-current="true"]{background:var(--brandwash)}
.step .n{width:22px;height:22px;border-radius:99px;border:1px solid var(--rule);display:grid;place-items:center;font-family:"IBM Plex Mono";font-size:11px;color:var(--faint);flex:none;background:var(--surface)}
.step[aria-current="true"] .n{border-color:var(--brand);color:var(--brand)}
.step.done .n{background:var(--good);border-color:var(--good);color:#fff}
[data-theme="dark"] .step.done .n{color:#08111C}
.step.skip .n{background:var(--rule);border-color:var(--rule);color:var(--muted)}
.step .t{font-size:13.5px;font-weight:600;display:block} .step .d{font-size:11.5px;color:var(--muted);display:block}
.step::after{content:"";position:absolute;left:21.5px;top:33px;bottom:-5px;width:1px;background:var(--rule)}
.step:last-of-type::after{display:none}
.ctxrow{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--rule2);font-size:13px}
.ctxrow:last-child{border-bottom:0}
.ctxrow span:first-child{color:var(--muted);flex:none} .ctxrow span:last-child{text-align:right}
.chip[data-on="no"]{color:var(--muted);text-decoration:line-through}
.chip .x{opacity:.55;font-size:15px;line-height:1;margin-left:2px}
.chip code{font-family:"IBM Plex Mono";font-size:11px;opacity:.7}
.sys{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--rule);border-radius:9px;margin-bottom:8px;background:var(--surface2)}
.sys.ok{border-color:var(--good);background:var(--goodwash)} .sys.fnd{border-color:var(--warn);background:var(--warnwash)}
.sys .who{font-size:11px;font-family:"IBM Plex Mono";color:var(--faint);display:block}
.sys .acts{display:flex;gap:7px}
.sys .acts button{font-size:12.5px;padding:6px 11px;border-radius:7px;border:1px solid var(--rule);background:var(--surface)}
.sys .acts button:hover{border-color:var(--brand);color:var(--brand)}
.prop{border:1px dashed var(--brand);background:var(--brandwash);border-radius:9px;padding:13px 15px;margin:14px 0}
.prop .ph{font-size:11px;font-family:"IBM Plex Mono";letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:7px}
.prop .src{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.5}
.prop .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.prop .acts button{font-size:12.5px;padding:6px 11px;border-radius:7px;border:1px solid var(--rule);background:var(--surface)}
.prop .acts .yes{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
[data-theme="dark"] .prop .acts .yes{color:#08111C}
.rec{background:var(--surface2);border:1px solid var(--rule);border-radius:9px;padding:13px 15px;font-size:13.5px;line-height:1.6}
.rec .by{font-size:11px;color:var(--faint);font-family:"IBM Plex Mono";margin-top:9px;display:block}
.ledger{position:sticky;top:26px;align-self:start;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow)}
.ledger h3{font-size:12px;font-family:"IBM Plex Mono";letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:400;margin-bottom:3px}
.ledger .sum{font-family:Archivo;font-size:15px;font-weight:600;margin-bottom:12px}
.li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule2);font-size:13px}
.li:last-child{border-bottom:0}
.li i{font-style:normal;color:var(--good);flex:none;font-size:12px;margin-top:2px}
.li .amt{margin-left:auto;font-family:"IBM Plex Mono";font-size:12.5px;color:var(--muted)}
.kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--rule2);font-size:14px}
.kv:last-child{border-bottom:0}

/* ---- interface kit ---- */
.scrim{position:fixed;inset:0;background:rgba(10,18,28,.45);backdrop-filter:blur(2px);
  display:grid;place-items:center;padding:20px;z-index:200;animation:fade .12s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:0 20px 60px rgba(10,18,28,.28);
  width:100%;max-width:460px;max-height:88vh;display:flex;flex-direction:column;animation:pop .14s ease}
.modal.wide{max-width:720px}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
.mhead{display:flex;align-items:center;gap:12px;padding:18px 20px 0}
.mhead h2{font-size:18px;flex:1}
.mintro{margin:8px 20px 0;color:var(--muted);font-size:13px;line-height:1.55}
.mbody{padding:16px 20px;overflow:auto;flex:1}
.mfoot{display:flex;gap:9px;justify-content:flex-end;padding:14px 20px 18px;border-top:1px solid var(--rule2)}
.fgroup{margin-bottom:15px}
.fgroup:last-child{margin-bottom:0}
.fld.bad{border-color:var(--bad);background:var(--badwash)}
.quick{margin-top:8px}
.chip.sm{padding:5px 10px;font-size:12px;margin:0 6px 6px 0}
.chip.dash{border-style:dashed;color:var(--muted)}
.cg{display:flex;flex-wrap:wrap}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.danger{background:var(--bad)}
.btn.ghost{background:none;color:var(--brand);border:1px solid var(--rule)}
/* ---- workbench ---- */
.pbanner{display:flex;align-items:flex-start;gap:16px;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.pbanner .pname{font-family:Archivo;font-size:20px;font-weight:700;letter-spacing:-.02em}
.avatar.lg{width:56px;height:56px;border-radius:12px;font-size:17px}
.acc{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 18px;border-bottom:1px solid var(--rule2)}
.acc:hover{background:var(--surface2)}
.acc.open{background:var(--brandwash)}
.acc-n{width:21px;height:21px;border-radius:99px;border:1px solid var(--rule);background:var(--surface);flex:none;
  display:grid;place-items:center;font-size:11px;color:var(--good)}
.acc-n.done{background:var(--good);border-color:var(--good);color:#fff}
[data-theme="dark"] .acc-n.done{color:#08111C}
.acc-t{font-weight:600;font-size:14.5px;display:block}
.acc-d{font-size:12px;color:var(--muted);display:block;margin-top:1px}
.accbody{padding:16px 18px 18px;border-bottom:1px solid var(--rule2);background:var(--surface)}
.vrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.vcard{border:1px solid var(--rule);border-radius:10px;padding:11px 13px;background:var(--surface2)}
.vcard.abn{border-color:var(--bad);background:var(--badwash)}
.vval{font-family:"IBM Plex Mono";font-size:22px;margin:2px 0 2px}
.vval span{font-size:11px;color:var(--muted);margin-left:3px}
.spark{display:block}
.tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:12.5px}
.tbl th{text-align:left;font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:400;padding:6px 8px;border-bottom:1px solid var(--rule)}
.tbl td{padding:7px 8px;border-bottom:1px solid var(--rule2)}
.setcard{border:1px solid var(--rule);border-radius:10px;padding:14px;background:var(--surface2)}
.setcard.on{border-color:var(--brand);background:var(--brandwash)}
.findrow{display:flex;gap:8px}
.prow{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--rule2)}
.prow:last-of-type{border-bottom:0}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin:18px 0 16px;overflow-x:auto}
.tabs button{padding:9px 14px;font-size:13px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-current="true"]{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}



.pop .it{display:block;width:100%;text-align:left;cursor:pointer}
.pop .it.crit{background:var(--badwash);border-left:3px solid var(--bad)}
.pop .it.urg{background:var(--warnwash);border-left:3px solid var(--warn)}
.iconbtn .dot.crit{background:var(--bad);animation:pulse 1.6s infinite}
.iconbtn .dot.urg{background:var(--warn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.viewer{background:#0b1017;border-radius:10px;display:grid;place-items:center;min-height:320px;overflow:hidden}
.viewer img{max-width:100%;max-height:62vh;display:block}

.propose{border-color:var(--brand);background:linear-gradient(180deg,var(--brandwash),var(--surface) 70%)}

/* A flex child will not shrink below its content unless told to, which is how
   a long report pushed the patient's name into a one-word column. */
.row > .grow{min-width:0}
.row .nm{overflow-wrap:anywhere}
.resval{font-size:15px;text-align:right;max-width:46%;min-width:0;line-height:1.4;
  overflow-wrap:anywhere;color:var(--ink)}
.resval.crit{color:var(--bad);font-size:16px}

.edot{width:11px;height:11px;border-radius:99px;flex:none;background:var(--rule)}
.edot.red{background:var(--bad)}
.edot.orange{background:#E8720C}
.edot.yellow{background:var(--warn)}
.edot.green{background:var(--good)}
.edot.blue{background:#4B5563}

@media print{
  .side,.topbar,.no-print,.mode,.banner{display:none!important}
  main{padding:0!important}
  .cert{border:0!important;box-shadow:none!important;padding:0!important}
  body{background:#fff!important}
  .hint{font-size:10px}
}
.cert .kv{padding:5px 0}

/* ---- brand ---- */
.wordmark.big{height:46px;width:136px;background-image:url("./wordmark-big.png")}
.wordmark{height:22px;width:65px;display:block;background-repeat:no-repeat;background-size:contain;background-position:left center;background-image:url("./wordmark.png")}
[data-theme="dark"] .wordmark{filter:invert(1) hue-rotate(180deg) brightness(1.4)}
.brand{display:flex;align-items:center;gap:8px}
.brand small{font-family:"IBM Plex Mono";font-size:10px;color:var(--muted);
  border:1px solid var(--rule);border-radius:4px;padding:1px 5px}

/* ---- sidebar that stops overflowing ---- */
.side{display:flex;flex-direction:column;overflow:hidden}
.navscroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px;
  scrollbar-width:thin}
.navscroll::-webkit-scrollbar{width:8px}
.navscroll::-webkit-scrollbar-thumb{background:var(--rule);border-radius:99px}
.jump{display:flex;align-items:center;gap:8px;margin:0 12px 12px;padding:8px 10px;
  border:1px solid var(--rule);border-radius:9px;background:var(--surface);
  color:var(--muted);font-size:13px;cursor:pointer;width:calc(100% - 24px)}
.jump:hover{border-color:var(--brand);color:var(--ink)}
.jump span{flex:1;text-align:left}
.jump kbd,.palin kbd{font-family:"IBM Plex Mono";font-size:10px;border:1px solid var(--rule);
  border-radius:4px;padding:1px 5px;color:var(--faint);background:var(--surface2)}
.menubtn{display:none}
.navscrim{display:none}

/* ---- the palette ---- */
.palette-scrim{align-items:flex-start;padding-top:12vh}
.palette{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 24px 70px rgba(10,18,28,.3);width:100%;max-width:600px;overflow:hidden}
.palin{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--rule2);
  color:var(--muted)}
.palin input{flex:1;border:0;background:none;font-family:inherit;font-size:15.5px;color:var(--ink);outline:none}
.palrows{max-height:52vh;overflow:auto}
.palrow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 16px;
  border-bottom:1px solid var(--rule2);cursor:pointer;font-size:14px}
.palrow:last-child{border-bottom:0}
.palrow:hover,.palrow:focus{background:var(--brandwash)}
.palicon{width:20px;color:var(--muted);display:flex}
.palfoot{padding:9px 16px;border-top:1px solid var(--rule2);background:var(--surface2)}

/* ---- narrow screens ---- */
@media (max-width: 1000px){
  .menubtn{display:inline-flex}
  .side{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:150;
    transform:translateX(-100%);transition:transform .18s ease;
    background:var(--surface);border-right:1px solid var(--rule);padding-top:14px}
  .side.open{transform:none;box-shadow:0 0 60px rgba(10,18,28,.25)}
  .navscrim{display:block;position:fixed;inset:0;background:rgba(10,18,28,.4);z-index:140}
  .greet span{display:none}
  .content{width:100%}
  .grid{grid-template-columns:1fr!important}
}
@media (max-width: 620px){
  main{padding:16px 14px!important}
  .head h1{font-size:22px}
  .row{flex-wrap:wrap}
  .pbanner{flex-wrap:wrap}
  .ws b{display:none}
  .demo{display:none}
}

/* ---- toasts ---- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:300;display:flex;flex-direction:column;
  gap:9px;max-width:min(430px,calc(100vw - 36px));pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--surface);
  border:1px solid var(--rule);border-left:3px solid var(--brand);border-radius:10px;
  padding:12px 12px 12px 14px;box-shadow:0 12px 34px rgba(10,18,28,.18);
  font-size:13.5px;line-height:1.5;pointer-events:auto;animation:toastin .16s ease}
.toast.good{border-left-color:var(--good)}
.toast.bad{border-left-color:var(--bad);background:var(--badwash)}
.toast span{flex:1}
.toast button{color:var(--faint);display:flex;padding:1px;cursor:pointer}
.toast button:hover{color:var(--ink)}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:620px){.toasts{right:10px;left:10px;bottom:10px;max-width:none}}

/* ---- the loading bar ---- */
.loadbar{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden;z-index:60;
  background:var(--rule2)}
.loadbar::after{content:"";position:absolute;inset:0;width:40%;background:var(--brand);
  animation:slide 1.05s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.content{position:relative}

/* ---- focus you can actually see ---- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.chip:focus-visible{outline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}
.side nav button:focus-visible{outline-offset:-2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:400;background:var(--surface);
  border:1px solid var(--brand);border-radius:8px;padding:8px 14px}
.skip:focus{left:14px}

.grp button{display:flex;align-items:center;gap:7px;width:100%;text-align:left;
  padding:9px 12px 6px;color:var(--faint);font-family:"IBM Plex Mono";font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:none;border:0}
.grp button:hover{color:var(--muted)}
.grp button span:first-of-type{flex:1}
.grp .count{background:var(--rule);color:var(--muted);border-radius:99px;
  padding:1px 6px;font-size:10px;letter-spacing:0}
.grp .here{width:5px;height:5px;border-radius:99px;background:var(--brand)}

.suggest{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--surface);
  border:1px solid var(--rule);border-radius:10px;margin-top:4px;overflow:hidden;display:none;
  box-shadow:0 14px 34px rgba(10,18,28,.16)}
.suggest.open{display:block}
.suggest button{display:block;width:100%;text-align:left;padding:9px 12px;font-size:13.5px;
  border-bottom:1px solid var(--rule2);cursor:pointer}
.suggest button:last-child{border-bottom:0}
.suggest button:hover{background:var(--brandwash)}
.linkbtn{color:var(--brand);font-size:11px;margin-left:8px;cursor:pointer;text-decoration:underline;
  background:none;border:0;font-family:inherit}

.chip.rx{border-color:var(--brand)}
.chip.rx code{background:var(--brandwash);color:var(--brand)}


.ifthen{display:block;margin-top:6px;padding:7px 10px;border-left:3px solid var(--bad);
  background:var(--badwash);border-radius:0 7px 7px 0;font-size:13px;line-height:1.45}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  border:1px solid var(--rule);border-radius:11px;padding:13px 14px;background:var(--surface)}
button.tile{cursor:pointer}
button.tile:hover{border-color:var(--brand);background:var(--brandwash)}
.tile .tnum{font-family:Archivo;font-weight:700;font-size:26px;line-height:1.05;letter-spacing:-.02em}
.tile .tlab{font-size:12.5px;color:var(--muted);line-height:1.3}
.tile .tsub{font-size:11px;color:var(--faint);font-family:"IBM Plex Mono"}
.tile.bad{border-color:var(--bad);background:var(--badwash)}
.tile.bad .tnum{color:var(--bad)}
.tile.warn{border-color:var(--warn)}
.tile.warn .tnum{color:var(--warn)}
.tile.good .tnum{color:var(--good)}

.ranks{display:flex;flex-direction:column;gap:7px;padding:4px 2px 2px}
.rank{display:flex;align-items:center;gap:10px;font-size:12.5px}
.rank .rlab{width:38%;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .rbar{flex:1;height:9px;background:var(--rule2);border-radius:99px;overflow:hidden}
.rank .rbar i{display:block;height:100%;background:var(--brand);border-radius:99px}
.rank .rval{width:44px;text-align:right;font-size:12px}
.chead .sub{font-size:11px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.chart{border:1px solid var(--rule);border-radius:10px;padding:12px 14px 8px;background:var(--surface)}
.chead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.chead b{font-family:Archivo;font-size:14px}
.chead .sub{flex:1;font-size:11.5px}
.clast{font-family:"IBM Plex Mono";font-size:19px}
.clast small{font-size:10px;color:var(--muted);margin-left:2px}
.csvg{width:100%;height:auto;display:block;overflow:visible}
.cax{font-family:"IBM Plex Mono";font-size:9px;fill:var(--faint)}
.clegend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);padding:4px 0 6px}
.clegend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.single{display:flex;align-items:baseline;gap:8px;padding:14px 0}
.single .mono{font-size:26px}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}