/* ── Bundled type: Public Sans (US design-system face — fitting for a compliance
   tool, and offline-safe) + IBM Plex Mono for data. ───────────────────────── */
@font-face{font-family:'Public Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/public-sans-400.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-weight:500;font-style:normal;font-display:swap;
  src:url('/fonts/public-sans-500.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts/public-sans-600.woff2') format('woff2')}
@font-face{font-family:'Public Sans';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/public-sans-700.woff2') format('woff2')}
@font-face{font-family:'Plex Mono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/plex-mono-400.woff2') format('woff2')}

:root{
  --paper:#FCFCFC; --surface:#ffffff; --surface-2:#F2F2F3;
  --ink:#1B2430; --ink-2:#555D69; --ink-3:#94969A; --line:#E4E4E6;
  --accent:#274B6E; --accent-2:#1D3A56; --accent-soft:#E6ECF2;
  --crit:#BC2B1D; --crit-bg:#FBEBE9;
  --warn:#B4680A; --warn-bg:#FBEEDA;
  --caution:#B4680A; --caution-bg:#FBEEDA;
  --ok:#0E9E6A; --ok-bg:#E1F4EA;
  --idle:#8C9095; --idle-bg:#F2F2F3; --info:#6D5BB5; --info-bg:#EDEAF9;
  /* Rail and the Overview "Today" strip share one material: same three stops, different angle.
     Kept as tokens so the two can never drift apart, and so the dark theme restates them once. */
  --rail:linear-gradient(168deg,#18222E 0%,#1C3A33 62%,#12432F 100%);
  --today:linear-gradient(112deg,#18222E 0%,#1C3A33 62%,#12432F 100%);
  --rail-ink:#fff; --rail-txt:rgba(255,255,255,.82); --rail-dim:rgba(255,255,255,.46);
  --rail-hover:rgba(255,255,255,.09); --rail-sel:rgba(255,255,255,.14); --rail-edge:rgba(255,255,255,.13);
  --rail-cue:#7BEBBE; --rail-alert:#FF9B8E;
  /* The Opselia ring, used as a mask so it picks up the theme's green. The gap is 40deg, not
     the 90deg it was under the old name: the ring doubles as the O, and at 16px a quarter-turn
     of missing stroke reads as a broken circle rather than a letter. Variable name kept as-is
     on purpose — see lib/product.js, it is an internal identifier nobody sees. */
  --opselia-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 4 A8 8 0 1 1 6.86 5.87'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --shadow-sm:0 1px 2px rgba(20,28,40,.05);
  --shadow:0 1px 3px rgba(20,28,40,.05),0 10px 26px rgba(20,28,40,.09);
  --shadow-lg:0 4px 10px rgba(20,28,40,.06),0 22px 52px rgba(20,28,40,.14);
  --radius:15px; --radius-sm:11px;
  --serif:"Segoe UI Variable Display","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --sans:"Segoe UI Variable Text","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
  --mono:"Cascadia Code","SF Mono",ui-monospace,Consolas,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0D1218; --surface:#161D27; --surface-2:#22262C;
  --ink:#ECEEF0; --ink-2:#A6ADB6; --ink-3:#767A80; --line:#2B2F35;
  --accent:#6098C9; --accent-2:#7BAAD6; --accent-soft:#17273A;
  --crit:#E9897F; --crit-bg:#2E1613; --warn:#E5A64A; --warn-bg:#33260E;
  --caution:#E5A64A; --caution-bg:#33260E; --ok:#33C48C; --ok-bg:#123026;
  --idle:#868A90; --idle-bg:#22262C; --info:#A99AE0; --info-bg:#221C38;
  --rail:linear-gradient(168deg,#141C26 0%,#16302B 62%,#123328 100%);
  --today:linear-gradient(112deg,#141C26 0%,#16302B 62%,#123328 100%);
  --rail-ink:#fff; --rail-txt:rgba(255,255,255,.80); --rail-dim:rgba(255,255,255,.44);
  --rail-hover:rgba(255,255,255,.07); --rail-sel:rgba(255,255,255,.12); --rail-edge:rgba(255,255,255,.11);
  --rail-cue:#4BD69E; --rail-alert:#F0A196;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);--shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.3);--shadow-lg:0 2px 4px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --paper:#0D1218; --surface:#161D27; --surface-2:#22262C;
  --ink:#ECEEF0; --ink-2:#A6ADB6; --ink-3:#767A80; --line:#2B2F35;
  --accent:#6098C9; --accent-2:#7BAAD6; --accent-soft:#17273A;
  --crit:#E9897F; --crit-bg:#2E1613; --warn:#E5A64A; --warn-bg:#33260E;
  --caution:#E5A64A; --caution-bg:#33260E; --ok:#33C48C; --ok-bg:#123026;
  --idle:#868A90; --idle-bg:#22262C; --info:#A99AE0; --info-bg:#221C38;
  --rail:linear-gradient(168deg,#141C26 0%,#16302B 62%,#123328 100%);
  --today:linear-gradient(112deg,#141C26 0%,#16302B 62%,#123328 100%);
  --rail-ink:#fff; --rail-txt:rgba(255,255,255,.80); --rail-dim:rgba(255,255,255,.44);
  --rail-hover:rgba(255,255,255,.07); --rail-sel:rgba(255,255,255,.12); --rail-edge:rgba(255,255,255,.11);
  --rail-cue:#4BD69E; --rail-alert:#F0A196;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);--shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.3);--shadow-lg:0 2px 4px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --paper:#FCFCFC; --surface:#fff; --surface-2:#F2F2F3;
  --ink:#1B2430; --ink-2:#555D69; --ink-3:#94969A; --line:#E4E4E6;
  --accent:#274B6E; --accent-2:#1D3A56; --accent-soft:#E6ECF2;
  --crit:#BC2B1D; --crit-bg:#FBEBE9; --warn:#B4680A; --warn-bg:#FBEEDA;
  --caution:#B4680A; --caution-bg:#FBEEDA; --ok:#0E9E6A; --ok-bg:#E1F4EA;
  --idle:#8C9095; --idle-bg:#F2F2F3; --info:#6D5BB5; --info-bg:#EDEAF9;
  --rail:linear-gradient(168deg,#18222E 0%,#1C3A33 62%,#12432F 100%);
  --today:linear-gradient(112deg,#18222E 0%,#1C3A33 62%,#12432F 100%);
  --rail-ink:#fff; --rail-txt:rgba(255,255,255,.82); --rail-dim:rgba(255,255,255,.46);
  --rail-hover:rgba(255,255,255,.09); --rail-sel:rgba(255,255,255,.14); --rail-edge:rgba(255,255,255,.13);
  --rail-cue:#7BEBBE; --rail-alert:#FF9B8E;
  --shadow-sm:0 1px 2px rgba(17,26,31,.05);--shadow:0 1px 2px rgba(17,26,31,.05),0 6px 18px rgba(17,26,31,.06);--shadow-lg:0 2px 4px rgba(17,26,31,.06),0 12px 32px rgba(17,26,31,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hidden{display:none !important}
button{font-family:inherit}

/* ── Interaction: a hand cursor on everything you can click ─────────────── */
button, a, select, summary, label:has(input[type=checkbox]), label:has(input[type=radio]),
[role="tab"], [role="button"], .tile, .clickable, tr.clickable, nav button,
[data-goto], [data-goto-tab], [data-help], [data-ihelp], [data-quick], [data-issue],
[data-rv], [data-catfor], [data-archive], [data-unarchive], [data-attachdoc],
[data-editdoc], [data-deldoc], [data-showarchived], [data-copyemail], [data-copyemail-i]{
  cursor:pointer}
button:disabled, .btn:disabled{cursor:not-allowed}
input[type=text], input[type=password], input[type=search], input[type=file], textarea{cursor:text}

/* ── Links: clean, underline-on-hover — no arrow glyphs ────────────────── */
a{color:var(--accent);text-decoration:none;transition:color .12s ease}
a:hover{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* smoother everything */
button, .btn, .tile, .tag, input, select, textarea{transition:background .13s ease,
  border-color .13s ease, color .13s ease, box-shadow .13s ease, transform .1s ease}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.loginbox{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:30px;width:100%;max-width:370px}
.loginlogo{display:block;width:52px;height:52px;margin:0 auto 16px}
.loginlogo svg{width:52px;height:52px}
.loginbox h1{font-family:var(--serif);font-weight:680;letter-spacing:-.03em;font-size:27px;margin:0 0 4px}
.loginbox p.mut{color:var(--ink-2);font-size:15px;margin:0 0 4px}
.loginbox p.mut:last-of-type{color:var(--ink-3);margin-bottom:22px}
/* A field label is a label, not fine print. It was --ink-3, the same grey used for text the app is
   telling you not to bother reading, so every form looked switched off. */
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-2);font-weight:750;margin:0 0 6px}
input,select,textarea{width:100%;font-family:var(--serif);font-size:14.5px;font-weight:500;
  padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);
  color:var(--ink);transition:border-color .12s ease,box-shadow .12s ease}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
textarea{min-height:76px;resize:vertical;line-height:1.5}
/* Emerald on focus, and a ring rather than a hard outline that clipped the corners. Emerald acts,
   and typing is acting. */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ok);
  box-shadow:0 0 0 3px rgba(14,158,106,.16)}
input::placeholder,textarea::placeholder{color:var(--ink-3);font-weight:450}
.field{margin-bottom:16px}
/* Primary actions carry the logo emerald: save, add, import, run. The rule across the
   app is emerald acts, navy is structure (nav, chrome, links), red destroys. */
.btn{background:linear-gradient(135deg,#15B87C 0%,#0E9E6A 55%,#0A7F55 100%);color:#fff;
  border:1px solid transparent;border-radius:var(--radius-sm);
  padding:9px 15px;font-size:13.5px;font-weight:600;letter-spacing:.005em;cursor:pointer;
  box-shadow:0 1px 2px rgba(10,127,85,.30),0 4px 12px rgba(14,158,106,.28)}
.btn:hover{background:linear-gradient(135deg,#1AC98A 0%,#12AB74 55%,#0C8C5E 100%);
  box-shadow:0 2px 4px rgba(10,127,85,.34),0 8px 20px rgba(14,158,106,.38)}
.btn:active{transform:translateY(.5px)}
.btn:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:var(--ink-3)}
.btn.sm{padding:5px 11px;font-size:12px;border-radius:7px}
.btn.danger{background:var(--crit);color:#fff}
.btn.danger:hover{background:var(--crit)}
/* .add now inherits the emerald from .btn; the class stays as the marker for secondary
   (ghost) adds, which are outlined so they never compete with a form's primary Save. */
.btn.ghost.add{background:var(--surface);color:var(--ok);border-color:rgba(14,158,106,.45);box-shadow:none}
.btn.ghost.add:hover{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
/* Paying a bill is the good outcome on the page, so it carries the emerald glow at rest.
   It is the one control in a dense money row that should catch the eye. */
.btn.pay{background:var(--surface);color:var(--ok);border-color:rgba(14,158,106,.45);
  box-shadow:0 2px 9px rgba(14,158,106,.32)}
.btn.pay:hover{background:var(--ok-bg);border-color:var(--ok);box-shadow:0 4px 15px rgba(14,158,106,.45)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.err{background:var(--crit-bg);color:var(--crit);padding:9px 12px;border-radius:7px;
  font-size:13px;margin-bottom:14px}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
/* The rail carries the same three stops as the Overview "Today" strip, turned to run top to
   bottom: at the strip's 112deg a tall narrow column would only ever show the first colour, and
   the two would not read as one material. It stays deep on purpose so the bright emerald keeps
   its meaning as "act" on the buttons rather than competing with the furniture. */
/* The demo stripe. Fixed to the bottom rather than the top so it never covers a control, and
   pointer-events:none so it can never be in the way of a click during a demo. It cannot be
   dismissed: a demo that can be made to look like a real practice is a liability. */
#demoStripe{position:fixed;left:0;right:0;bottom:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(135deg,#8A6D1F,#8A6D1F 12px,#7A5F19 12px,#7A5F19 24px);
  color:#fff;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;text-align:center;padding:5px 12px;
  box-shadow:0 -6px 18px -10px rgba(0,0,0,.6)}
html.is-demo body{padding-bottom:26px}

.rail{background:var(--rail);border-right:0;padding:16px 14px;
  display:flex;flex-direction:column;gap:12px;position:sticky;top:0;height:100vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:transparent transparent}
.rail:hover{scrollbar-color:rgba(255,255,255,.18) transparent}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb{background:transparent;border-radius:8px}
.rail:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
/* product wordmark: small + muted, sits above the practice identity */
.brandbar{display:flex;align-items:center;gap:8px;padding:1px 4px 8px;border-bottom:1px solid var(--rail-edge)}
.brandbar-mark{width:20px;height:20px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(255,255,255,.10)}
.brandbar-mark svg{width:13px;height:13px}
.brandbar-name{font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--rail-dim)}
/* practice identity = the hero */
.mark{display:flex;align-items:center;gap:11px;padding:4px 4px 6px;min-width:0}
.marklogo{width:40px;height:40px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--rail-cue),var(--ok));box-shadow:var(--shadow-sm);overflow:hidden}
.marklogo svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mark-txt{min-width:0}
.mark b{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.15;letter-spacing:-.02em;display:block;
  overflow-wrap:anywhere;color:var(--rail-ink)}
.mark span{font-size:10.5px;color:var(--rail-dim);letter-spacing:.06em;text-transform:uppercase;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav{display:flex;flex-direction:column;gap:1px}
.nvi{width:21px;height:21px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chev{width:16px;height:16px;flex:0 0 auto;margin-left:auto;stroke:var(--rail-dim);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
/* top-level items + group headers: bigger and bolder */
.navtop,.grphead{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:13px;
  padding:11px 13px;border-radius:11px;font-size:15px;font-weight:600;color:var(--rail-txt);transition:background .12s,color .12s}
.navtop .nvi,.grphead .nvi{color:var(--rail-dim)}
.navtop:hover,.grphead:hover{background:var(--rail-hover);color:var(--rail-ink)}
/* Start here, once the setup list is finished. It used to remove itself, which made a tab vanish
   while somebody was looking at it. Quiet is better than gone: there is a real reason to open it
   again months later, and nothing that disappears is ever explained. */
.navtop.is-done{opacity:.5}
.navtop.is-done:hover{opacity:1}
.navtop.is-done[aria-selected="true"]{opacity:1}
.navtop[aria-selected="true"]{background:var(--rail-sel);color:var(--rail-ink);font-weight:700;
  box-shadow:inset 2.5px 0 0 var(--rail-cue)}
.navtop[aria-selected="true"] .nvi{color:var(--rail-cue)}
.grphead:focus-visible,.navtop:focus-visible{outline:2px solid var(--rail-cue);outline-offset:1px}
.navgrp.open .grphead{color:var(--rail-ink)}
.navgrp.open .chev{transform:rotate(180deg)}
/* items inside a group: hidden until the group is open */
.grpitems{display:none;flex-direction:column;gap:2px;margin:2px 0 6px}
.navgrp.open .grpitems{display:flex}
.grpitems button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:8px 12px 8px 47px;border-radius:9px;font-size:14px;font-weight:550;color:var(--rail-txt);transition:background .12s,color .12s}
.grpitems button:hover{background:var(--rail-hover);color:var(--rail-ink)}
.grpitems button[aria-selected="true"]{background:var(--rail-sel);color:var(--rail-ink);font-weight:700;box-shadow:inset 3px 0 0 var(--rail-cue)}
.grpitems button:focus-visible{outline:2px solid var(--rail-cue);outline-offset:1px}
nav .n{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--rail-dim);font-weight:600}
.grpitems button[aria-selected="true"] .n{color:var(--rail-ink)}
/* An overdue count has to survive on a dark ground, where the light-theme red goes muddy. */
nav .n.alert{color:var(--rail-alert);font-weight:800}
/* a small dot on a closed group that has something needing attention */
.navgrp:not(.open) .grphead[data-alert="1"]::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--rail-alert);margin-left:6px;flex:0 0 auto}
.railfoot{margin-top:auto;border-top:1px solid var(--rail-edge);padding-top:13px;font-size:11.5px;color:var(--rail-dim)}
.railfoot b{color:var(--rail-ink);display:block;font-size:12.5px}
.railfoot .role{display:inline-block;margin-top:4px;font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;background:var(--rail-sel);color:var(--rail-ink);padding:1px 7px;border-radius:20px;font-weight:700}
/* Sign out sits on the dark rail, so the light-theme ghost button is invisible there. */
.railfoot .btn.ghost{background:var(--rail-hover);border-color:var(--rail-edge);color:var(--rail-txt)}
.railfoot .btn.ghost:hover{background:var(--rail-sel);color:var(--rail-ink);border-color:var(--rail-edge)}
main{padding:0 32px 80px;max-width:1280px;min-width:0}
/* ---------- top bar ----------
   Sticky, because on a long tab the filter and the Refresh button are the two things people
   reach for after scrolling, and hunting back to the top for them is the sort of small tax
   nobody reports as a bug. */
/* Breaks out of main's 32px inset so the bar runs edge to edge while the content stays inset. */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  margin:0 -32px;padding:11px 32px;background:var(--surface);border-bottom:1px solid var(--line)}
.tb-find{flex:1;max-width:330px;display:flex;align-items:center;gap:8px;background:var(--surface-2);
  border:0;border-radius:9px;padding:8px 11px;color:var(--ink-3);font:inherit;font-size:12.8px;
  cursor:pointer;text-align:left}
.tb-find:hover{background:var(--accent-soft);color:var(--accent)}
.tb-find:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tb-find svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tb-find span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
kbd{font-family:var(--mono);font-size:10px;background:var(--surface);color:var(--ink-3);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;white-space:nowrap}
.tb-filter{display:flex;align-items:center}
.tb-filter input[type=search]{width:150px;padding:7px 10px;font-size:12.5px}
@media (max-width:900px){.tb-filter,.tb-find kbd{display:none}}

/* ---------- walkthrough ---------- */
.wt-pill{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;align-items:center;gap:9px;
  background:#18222E;color:#fff;border:0;border-radius:26px;padding:9px 15px 9px 12px;font:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer;
  box-shadow:0 3px 10px rgba(10,16,24,.24),0 14px 32px rgba(10,16,24,.22)}
.wt-pill:hover{background:#22303F}
.wt-pill:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.wt-pill svg{width:19px;height:19px;flex:none;color:#15B87C}
.wt-prog{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;
  border-left:1px solid rgba(255,255,255,.22);padding-left:9px}
/* Anything open over the page — a drawer, a dialog, the search palette — takes the bottom right
   back. The pill is fixed above the drawer's own layer, so it sat on top of the Save button. */
body.overlay-open .wt-pill,
body.overlay-open .wt-menu{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px)}
.wt-pill,.wt-menu{transition:opacity .12s ease,transform .12s ease,visibility .12s}
@media (prefers-reduced-motion:reduce){.wt-pill,.wt-menu{transition:none}}
.wt-menu{position:fixed;right:20px;bottom:68px;z-index:71;width:300px;background:var(--surface);
  border-radius:15px;padding:9px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-lg)}
.wt-menu h4{margin:0;font-family:var(--serif);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;padding:7px 9px 8px}
.wt-row{display:flex;flex-direction:column;gap:2px;text-align:left;font:inherit;border:0;background:none;
  border-radius:10px;padding:9px 10px;cursor:pointer;width:100%;color:inherit}
.wt-row:hover{background:var(--surface-2)}
.wt-row:focus-visible{outline:2px solid var(--ok);outline-offset:-2px}
.wt-row .n{font-size:13.2px;font-weight:650;color:var(--ink);display:flex;align-items:center;gap:7px}
.wt-row .tick{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ok);background:var(--ok-bg);border-radius:20px;padding:1px 7px}
.wt-row .w{font-size:11.6px;color:var(--ink-3)}
.wt-veil{position:fixed;inset:0;z-index:72;pointer-events:none}
.wt-spot{position:absolute;border-radius:11px;transition:all .34s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 0 9999px rgba(9,15,22,.62),0 0 0 2px #15B87C}
.wt-pop{position:fixed;z-index:73;width:290px;background:var(--surface);border-radius:15px;
  padding:16px 17px 13px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:8px;
  transition:top .34s cubic-bezier(.4,0,.2,1),left .34s cubic-bezier(.4,0,.2,1)}
.wt-step{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);font-weight:700}
.wt-pop h3{font-family:var(--serif);font-size:15px;font-weight:640;letter-spacing:-.02em;margin:0;color:var(--ink)}
.wt-pop p{font-size:12.8px;color:var(--ink-2);line-height:1.5;margin:0}
.wt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.wt-dots{display:flex;gap:5px}
.wt-dots i{width:5px;height:5px;border-radius:50%;background:var(--line);display:block}
.wt-dots i.on{background:var(--ok);width:15px;border-radius:3px}
.wt-btns{display:flex;gap:6px;align-items:center}
@media (prefers-reduced-motion:reduce){.wt-spot,.wt-pop{transition:none}}
@media (max-width:620px){.wt-pop{width:auto;left:12px!important;right:12px}.wt-pill span:not(.wt-prog){display:none}}

/* ---------- global search ---------- */
.pal{position:fixed;inset:0;z-index:80;background:rgba(9,15,22,.44);display:grid;
  place-items:start center;padding:12vh 18px 18px;backdrop-filter:blur(2px)}
.pal.hidden{display:none}
.pal-box{width:min(620px,100%);background:var(--surface);border-radius:15px;overflow:hidden;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:70vh}
.pal-top{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pal-top svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.pal-top input{flex:1;border:0;background:none;font-size:15px;color:var(--ink);padding:2px 0}
.pal-top input:focus{outline:none}
.pal-res{overflow-y:auto;padding:7px}
.pal-grp{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  font-weight:800;padding:10px 10px 5px}
.pal-row{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;font:inherit;
  text-align:left;padding:8px 10px;border-radius:9px;cursor:pointer;color:inherit}
.pal-row:hover,.pal-row.on{background:var(--surface-2)}
.pal-row.on{box-shadow:inset 2.5px 0 0 var(--ok)}
.pal-nm{flex:1;min-width:0;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-nm mark{background:var(--ok-bg);color:var(--ok);border-radius:3px;padding:0 1px}
.pal-sub{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.pal-empty{padding:26px 16px;text-align:center;color:var(--ink-3);font-size:13px}
.pal-foot{border-top:1px solid var(--line);padding:8px 14px;display:flex;gap:14px;
  font-size:11px;color:var(--ink-3)}
.tb-sp{flex:1}
.tb-me{display:flex;align-items:center;gap:8px}
.tb-role{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--surface-2);color:var(--ink-3);border-radius:20px;padding:3px 9px}
.tb-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;
  font-weight:700;color:#fff;background:linear-gradient(135deg,#15B87C,#0A7F55)}
.head{padding:22px 0 0}
@media (max-width:760px){.topbar{margin:0 -14px;padding:9px 14px}}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:24px}
h1{font-family:var(--serif);font-weight:660;font-size:31px;margin:0 0 4px;letter-spacing:-.03em}
.sub{color:var(--ink-2);font-size:14px}
.sub b{color:var(--ink-2)}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar input[type=search]{width:180px;padding:6px 10px;font-size:12.5px}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:28px}
.tile{background:var(--surface);border:0;border-radius:var(--radius);padding:17px 18px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%;
  transition:transform .14s ease, box-shadow .14s ease}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.tile:active{transform:none}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile .go{position:absolute;right:11px;top:11px;font-size:14px;color:var(--ink-3);opacity:0;
  transition:opacity .12s ease}
.tile:hover .go,.tile:focus-visible .go{opacity:1}
@media (prefers-reduced-motion:reduce){.tile,.tile .go{transition:none}.tile:hover{transform:none}}
.brandlogo{max-width:100%;max-height:44px;border-radius:6px;display:block}
/* when a practice logo is uploaded: stack logo over the name, hide the initials tile */
.mark.has-logo{flex-direction:column;align-items:flex-start;gap:7px}
.mark.has-logo .marklogo{display:none}
.mark.has-logo b{font-size:14px}
.mark.has-logo span{font-size:10px}

/* ---------- dropzone + extraction ---------- */
#drop{border:2px dashed var(--line);border-radius:10px;padding:26px 18px;text-align:center;
  cursor:pointer;color:var(--ink-3);font-size:13px;display:flex;flex-direction:column;
  gap:4px;align-items:center;transition:border-color .12s ease,background .12s ease}
#drop:hover,#drop:focus-visible{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);outline:none}
#drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
#drop b{color:var(--ink)}
#drop:hover b,#drop.over b,#drop:focus-visible b{color:var(--accent)}
@media (prefers-reduced-motion:reduce){#drop{transition:none}}
.sugg{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;margin-top:12px}
.sugg h4{margin:0 0 3px;font-size:13.5px;font-weight:600}
.sugg .file{font-size:11.5px;color:var(--ink-3);margin-bottom:9px}
/* warning upload card: duplicate / heads-up, orange */
.sugg.warn{border-color:var(--warn);border-left:3px solid var(--warn);background:rgba(219,178,79,.12)}
.sugg.warn .file{color:var(--warn)}
.sugg.warn .file b{color:var(--warn)}
.sline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:7px 0;
  border-top:1px solid var(--line);font-size:12.5px}
.sline:first-of-type{border-top:none}
.sline .val{font-family:var(--mono);font-weight:600;font-size:13px}
.sline .ctx{color:var(--ink-3);font-size:11.5px;flex:1 1 200px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conf{font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:1px 6px;border-radius:4px;font-weight:700}
.conf.high{background:var(--ok-bg);color:var(--ok)}
.conf.medium{background:var(--caution-bg);color:var(--caution)}
.conf.low{background:var(--idle-bg);color:var(--idle)}
.tile .n{font-family:var(--sans);font-size:28px;font-weight:700;line-height:1.05;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--bar,var(--ink))}
.tile .l{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.35}
.tile .tsub{font-size:11px;color:var(--ink-3);margin-top:3px;opacity:.9}
.ovbills>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 16px}
.ovbills>summary::-webkit-details-marker{display:none}
.ovbills>summary:hover{background:var(--surface-2)}
.ovbills-tot{font-size:12.5px;color:var(--ink-2);font-family:var(--mono)}
.t-crit{--bar:var(--crit)}.t-warn{--bar:var(--warn)}.t-caut{--bar:var(--caution)}
.t-ok{--bar:var(--ok)}.t-idle{--bar:var(--idle)}

/* ---------- sections ---------- */
.panel{display:none}.panel.on{display:block}
section{background:var(--surface);border:0;border-radius:var(--radius);box-shadow:var(--shadow);
  margin-bottom:22px;overflow:hidden}
/* More air above a table than beside it: the header is the only thing separating one dense
   block from the next, and 18px was not enough to read as a break. */
.sechead{padding:20px 24px 16px;border-bottom:1px solid var(--hair,var(--line));display:flex;justify-content:space-between;
  align-items:flex-start;gap:12px;flex-wrap:wrap}
.sechead h2{font-family:var(--serif);font-weight:660;letter-spacing:-.028em;font-size:19px;margin:0}
.sechead p{margin:5px 0 0;font-size:13.2px;color:var(--ink-3);line-height:1.5}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
/* Smaller and more widely tracked than the body text, so a column heading reads as a label
   rather than as a first row of data. That confusion is most of what makes a table feel like a
   spreadsheet: in Excel the header IS a cell, and here it should not look like one. */
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
  font-weight:700;padding:11px 14px 9px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
/* tabular-nums everywhere in a table body: proportional digits are why a column of money never
   lines up, and mismatched column widths are most of what makes a table read as a Word document.
   Applied to the cell rather than per-number, because nothing in the markup marks a numeric cell. */
/* vertical-align:top pinned every cell to the ceiling of its row, which is exactly how a
   spreadsheet renders and why rows of mixed content looked ragged. Middle instead, and roomier:
   12px vertical is the difference between a data dump and something meant to be read. */
td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
/* A cell holding a paragraph still wants to start at the top. */
td.top,td:has(>.note),td:has(>.tasknote),td:has(>.aud-detail){vertical-align:top}

/* ── sortable column headings ──────────────────────────────────────────────────────────────
   The affordance appears ONLY on headings public/table-sort.js has decided it can actually
   sort, so a heading that looks clickable always is. The caret is reserved space rather than
   something that appears on hover: a column heading that changes width when the pointer
   crosses it makes the whole row twitch. */
th.sortcol{cursor:pointer;user-select:none;position:relative;padding-right:22px;
  transition:color .12s,background .12s}
th.sortcol:hover{color:var(--ink-2);background:var(--surface-2)}
th.sortcol:focus-visible{outline:2px solid var(--ok);outline-offset:-2px}
th.sortcol::after{content:"";position:absolute;right:8px;top:50%;width:7px;height:7px;
  transform:translateY(-50%);opacity:.22;transition:opacity .12s,transform .12s;
  background:currentColor;
  /* a small chevron, drawn as a mask so it takes the heading's own colour in both themes */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 8l4-4 4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 8l4-4 4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
th.sortcol:hover::after{opacity:.5}
th.sortcol.sorted{color:var(--ok)}
th.sortcol.sorted::after{opacity:1}
th.sortcol.sorted.desc::after{transform:translateY(-50%) rotate(180deg)}
@media (prefers-reduced-motion:reduce){th.sortcol,th.sortcol::after{transition:none}}

/* ── the welcome, which is allowed to take up space ────────────────────────────────────────
   A first impression that whispers is a first impression nobody remembers. This one is wider,
   the type is bigger, and the sentences are short enough to read at a glance rather than
   settle in for. */
.modal.big{max-width:640px}
.modal.big header{padding:26px 30px 8px}
.modal.big header h2{font-size:27px;letter-spacing:-.032em}
.modal.big .glyph{width:38px;height:38px;font-size:19px}
.modal.big .body{padding:0 30px 10px}
.modal.big footer{padding:16px 30px 26px}
.modal.big footer .btn{font-size:14.5px;padding:10px 20px}
.modal.big .big{font-family:var(--serif);font-size:21px;font-weight:640;letter-spacing:-.026em;
  line-height:1.35;color:var(--ink);margin:6px 0 16px}
.modal.big .big2{font-size:16px;line-height:1.5;color:var(--ink-2);margin:0 0 10px}
.modal.big .big2 b{color:var(--ink);font-weight:680}
ul.wel{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
ul.wel li{position:relative;padding-left:24px;font-size:16px;line-height:1.45;color:var(--ink-2)}
ul.wel li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--ok)}

/* ── "Update ongoing, please wait" ─────────────────────────────────────────────────────────
   A real block, not a banner: while a deploy is going out, typing into the page is the thing to
   prevent. Opaque rather than blurred, for the same reason the loading ring stopped blurring —
   a smeared page behind a dialog is what makes people uneasy about what they are looking at. */
.upd-scrim{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:color-mix(in srgb,var(--paper) 92%,transparent)}
.upd-box{max-width:420px;text-align:center;display:grid;gap:14px;justify-items:center;
  padding:34px 30px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.upd-ring{width:64px;height:64px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,
    color-mix(in srgb,var(--ok) 25%,transparent) 130deg,var(--ok) 300deg,var(--ok) 360deg);
  -webkit-mask:radial-gradient(circle,transparent 0 23px,#000 25px 32px,transparent 33px);
  mask:radial-gradient(circle,transparent 0 23px,#000 25px 32px,transparent 33px);
  animation:act-spin 1.15s linear infinite}
/* Kept here rather than with the deleted activity widget: the update notice is the only thing
   that turns now, and an animation defined nowhere is a ring that sits still. */
@keyframes act-spin{to{transform:rotate(360deg)}}
@keyframes act-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.upd-msg{font-family:var(--serif);font-size:20px;font-weight:660;letter-spacing:-.02em}
.upd-sub{font-size:13.4px;color:var(--ink-3);line-height:1.5}
@media (prefers-reduced-motion:reduce){.upd-ring{animation:act-pulse 1.6s ease-in-out infinite}}

/* ── the negotiation packet, and anything else meant to be printed and carried ─────────────
   Wider than a normal dialog because it holds a nine-column evidence table. A packet squeezed
   into 540px is a packet nobody reads on screen and therefore nobody trusts on paper. */
.modal.wide{width:min(1080px,100%)}
.modal.wide .body{padding:0 28px 12px}

.pk{font-size:14px;line-height:1.55}
.pk h3.emph3{margin:26px 0 8px}
.pk .pk-note{color:var(--ink-2);font-size:13px;margin:0 0 10px}

/* The ask. One number, large, because it is the only thing anybody has to remember walking in. */
.pk-ask{display:flex;gap:20px;align-items:flex-start;margin:14px 0 18px;padding:18px 20px;
  border-radius:var(--radius-sm);border:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent)}
.pk-ask-n{font-family:var(--serif);font-size:46px;font-weight:700;letter-spacing:-.04em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pk-ask-l{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  margin-bottom:5px}
.pk-ask p{margin:0;color:var(--ink-2)}
.pk-self{margin-top:9px!important;padding-top:9px;border-top:1px solid var(--line)}
/* A contract to leave alone. Green rather than the accent, because the page is telling you the
   answer is "do nothing" and that has to read as a conclusion, not as a weaker ask. */
.pk-hold{background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 10%,transparent),transparent);
  border-color:color-mix(in srgb,var(--ok) 34%,transparent)}
.pk-hold .pk-ask-n{color:var(--ok)}

.pk-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;margin:0 0 6px}
.pk-facts>div{background:var(--surface);padding:11px 13px;display:flex;flex-direction:column;gap:3px}
.pk-facts span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.pk-facts b{font-size:15px;font-variant-numeric:tabular-nums}

.pk-table td,.pk-table th{white-space:nowrap}
.pk-table td:nth-child(2){white-space:normal;min-width:180px}

.pk-list{margin:0;padding-left:18px}
.pk-list li{margin-bottom:7px;line-height:1.5}

/* Which button is aiming the ask. There was no `.on` state on .btn, and a toggle that does not
   show which side it is on is worse than no toggle. */
.pk-switch{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:13px;color:var(--ink-3)}
.pk-switch .btn.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* The fact sheet: a label, the value to transcribe, when it expires, and why it is asked for.
   Four columns rather than a definition list, because the eye copying a number down needs the
   value to sit in the same place on every row. */
.fs{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.fsr{display:grid;grid-template-columns:minmax(180px,1.1fr) minmax(150px,1fr) minmax(140px,.8fr) 1.4fr;
  gap:12px;padding:9px 13px;align-items:baseline;font-size:13.5px}
.fsr+.fsr{border-top:1px solid var(--line)}
.fsr-l{color:var(--ink-2);font-weight:560}
.fsr-v .mono{font-size:14px;font-weight:640;color:var(--ink);user-select:all}
.fsr-n{font-size:12px;line-height:1.45}
/* Colour only where something is wrong. A sheet where every row is tinted teaches nobody to look. */
.fsr.expired{background:color-mix(in srgb,var(--crit) 8%,transparent)}
.fsr.expiring{background:color-mix(in srgb,var(--warn) 8%,transparent)}
.fsr.missing .fsr-v,.fsr.not_held .fsr-v{color:var(--ink-3)}
/* Expired, but in a state the practice does not bill from. Still shown, still labelled, not
   painted red: red on something that stops no money is what makes red stop meaning anything. */
.fsr.nobill{background:transparent}
.fsr.nobill .fsr-l,.fsr.nobill .fsr-v .mono{color:var(--ink-2)}

.fs-keep{margin-top:10px}
.fs-keep>summary h2{font-size:14.5px}
@media (max-width:760px){.fsr{grid-template-columns:1fr 1fr}.fsr-n{grid-column:1/-1}}

.fs-gaps{margin:2px 0 6px;padding:14px 16px;border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);
  background:color-mix(in srgb,var(--warn) 7%,transparent)}
.fs-gaps h3.emph3{margin-top:0}

.pk-prov{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.pk-prov b{color:var(--ink-2)}

/* ── where every plan sits, on one scale ───────────────────────────────────────────────────
   The chart that replaces the two-yardsticks paragraph. Government plans pile into a column on
   the Medicare line; commercial ones scatter. The shape is the explanation. */
.scaleq{margin:4px 0 16px}
.scaleq-plot{position:relative;height:var(--h,190px);border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}

.sq-tick{position:absolute;top:0;bottom:0;width:0}
.sq-tick i{position:absolute;top:0;bottom:20px;left:0;width:1px;
  background:color-mix(in srgb,var(--line) 70%,transparent)}
.sq-tick em{position:absolute;bottom:3px;left:0;transform:translateX(-50%);font-style:normal;
  font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* The two lines that carry the argument, drawn heavier than the grid and labelled in place. */
.sq-ref{position:absolute;top:0;bottom:0;width:0;z-index:3}
.sq-ref i{position:absolute;top:0;bottom:20px;left:0;width:2px;border-radius:1px}
.sq-ref em{position:absolute;top:5px;left:6px;font-style:normal;font-size:11px;line-height:1.3;
  white-space:nowrap;padding:2px 6px;border-radius:5px;font-weight:600;
  background:var(--surface);border:1px solid var(--line)}
.sq-ref em b{display:block;font-variant-numeric:tabular-nums;font-size:12.5px}
.sq-ref-a i{background:var(--ink-3)}
.sq-ref-a em{color:var(--ink-2)}
.sq-ref-b i{background:color-mix(in srgb,var(--ok) 80%,transparent)}
.sq-ref-b em{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
/* A label that would run off the right edge flips to the left of its line. */
.sq-ref:nth-last-child(n+2) em{transform:none}

.sq-dot{position:absolute;border-radius:50%;transform:translate(-50%,-50%);z-index:2;
  border:1.5px solid var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.16)}
.sq-gov{background:color-mix(in srgb,var(--ink-3) 55%,transparent)}
.sq-neg{background:color-mix(in srgb,var(--ok) 72%,transparent)}
.sq-low{background:color-mix(in srgb,var(--crit) 72%,transparent)}
.sq-idle{background:color-mix(in srgb,var(--line) 90%,transparent)}
.scaleq-cap{margin:10px 0 0;font-size:13.4px;line-height:1.55;color:var(--ink-2)}
.scaleq-cap b{color:var(--ink)}

/* ── ranked bars with the benchmark drawn through them ─────────────────────────────────────
   "Below Medicare" becomes a bar that stops short of a line, rather than two numbers to compare. */
.rankb{position:relative;margin:6px 0 14px}
.rb-row{display:grid;grid-template-columns:minmax(120px,1.5fr) minmax(90px,3fr) 52px auto;
  gap:10px;align-items:center;padding:3px 0;font-size:13px}
.rb-name{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-track{position:relative;height:15px;border-radius:4px;background:var(--surface-2,color-mix(in srgb,var(--line) 45%,transparent))}
.rb-fill{display:block;height:100%;border-radius:4px;min-width:2px}
.rb-ok  {background:color-mix(in srgb,var(--ok) 70%,transparent)}
.rb-warn{background:color-mix(in srgb,var(--warn) 70%,transparent)}
.rb-crit{background:color-mix(in srgb,var(--crit) 70%,transparent)}
.rb-gov {background:color-mix(in srgb,var(--ink-3) 48%,transparent)}
.rb-idle{background:color-mix(in srgb,var(--line) 90%,transparent)}
.rb-val{font-variant-numeric:tabular-nums;font-weight:640;text-align:right}
.rb-note{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
/* The benchmark runs the height of the chart, through the bars, not beside them. */
.rb-ref{position:absolute;top:0;bottom:0;z-index:2;pointer-events:none}
.rb-ref i{position:absolute;top:0;bottom:0;left:0;width:2px;
  background:color-mix(in srgb,var(--ink) 40%,transparent)}
.rb-ref em{position:absolute;top:-4px;left:5px;font-style:normal;font-size:10.5px;font-weight:600;
  color:var(--ink-2);background:var(--surface);padding:1px 5px;border-radius:4px;white-space:nowrap;
  border:1px solid var(--line)}
@media (max-width:720px){
  .rb-row{grid-template-columns:1fr 52px;gap:6px}
  .rb-track{grid-column:1/-1}
  .rb-note{display:none}
}

/* ── one bar instead of a paragraph ────────────────────────────────────────────────────────
   A proportion is something to SEE, not something to parse out of a sentence. Used for the
   payer mix and for coverage, so both read the same way. */
.mixbar{margin:0 0 14px}
.mixbar-track{display:flex;height:34px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface)}
.mixbar-track .mx{display:block;height:100%;min-width:2px;transition:width .2s ease}
@media (prefers-reduced-motion:reduce){.mixbar-track .mx{transition:none}}
.mx-gov {background:color-mix(in srgb,var(--ink-3) 42%,transparent)}
.mx-neg {background:color-mix(in srgb,var(--ok) 68%,transparent)}
.mx-seen{background:color-mix(in srgb,var(--ok) 68%,transparent)}
.mx-miss{background:color-mix(in srgb,var(--warn) 55%,transparent)}
.mx-idle{background:color-mix(in srgb,var(--line) 90%,transparent)}

.mixbar-keys{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:9px}
.mxk{display:flex;align-items:baseline;gap:7px;font-size:13px}
.mxk .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto;transform:translateY(1px)}
.mxk b{font-variant-numeric:tabular-nums;font-size:14.5px}
.mxk-l{color:var(--ink-2)}
.mxk-v{color:var(--ink-3);font-variant-numeric:tabular-nums}
.mxk-n{color:var(--ink-3);font-size:11.5px;font-style:italic}
.mixbar-cap{margin:10px 0 0;font-size:13.4px;line-height:1.55;color:var(--ink-2)}

.profile{margin:0 0 18px}
.profile h3.emph3{margin-top:0}

/* A long explanation, folded. The heading carries the one thing worth knowing; the rest is there
   for anybody who wants it and out of the way of everybody who does not. */
.longer{margin:10px 0 14px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.longer>summary{padding:10px 14px;cursor:pointer;font-size:13.4px;color:var(--ink-2);list-style:none}
.longer>summary::-webkit-details-marker{display:none}
.longer>summary b{color:var(--ink)}
.longer>summary::after{content:'›';float:right;color:var(--ink-3);transition:transform .15s ease;display:inline-block}
.longer[open]>summary::after{transform:rotate(90deg)}
.longer[open]>summary{border-bottom:1px solid var(--line)}
.longer-body{padding:12px 14px;font-size:13.4px;line-height:1.6;color:var(--ink-2)}
.longer-body b{color:var(--ink)}
.longer-body p{margin:0 0 10px}
.longer-body p:last-child{margin-bottom:0}

/* ── what the page can and cannot see ──────────────────────────────────────────────────────
   Always present, never only-when-bad. A panel that appears only in trouble teaches people that
   its absence means "fine", and then the day it fails to render reads as a clean bill of health. */
.conf{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2, transparent)}
.conf>summary{padding:12px 16px;cursor:pointer;list-style:none}
.conf>summary::-webkit-details-marker{display:none}
.conf>summary h2{font-size:15px;margin:0 0 3px;font-weight:660;letter-spacing:-.01em}
.conf>summary span{display:block;font-size:12.8px;line-height:1.5;color:var(--ink-2)}
.conf>summary::after{content:'›';float:right;margin-top:-22px;color:var(--ink-3);
  transition:transform .15s ease;display:inline-block}
.conf[open]>summary::after{transform:rotate(90deg)}
.conf-body{padding:2px 16px 16px}
.conf-body h3.emph3{margin:16px 0 6px}
/* The left edge carries the coverage, so it reads before the words do. */
.conf-ok  {border-left:3px solid var(--ok)}
.conf-warn{border-left:3px solid var(--warn)}
.conf-crit{border-left:3px solid var(--crit)}
.conf-idle{border-left:3px solid var(--line)}

/* ── old data, said out loud ───────────────────────────────────────────────────────────────
   Not a refusal to show the numbers: hiding them sends somebody to a spreadsheet. It says what
   they are FOR at this age, which is a more useful thing than a warning triangle. */
.stalebox{margin:0 0 14px;padding:14px 17px;border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--warn) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 38%,transparent);
  font-size:13.6px;line-height:1.55;color:var(--ink-2)}
.stalebox b{color:var(--ink);font-weight:660}

/* ── picking a document to attach ──────────────────────────────────────────────────────────
   A list you can read and search, rather than a select box of filenames. What each document is
   already attached to is shown, because picking one MOVES it. */
.doc-picklist{display:grid;gap:2px;max-height:52vh;overflow:auto;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:6px}
.doc-pick{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:9px;
  cursor:pointer;margin:0}
.doc-pick:hover{background:var(--surface-2)}
.doc-pick input{margin-top:3px;accent-color:var(--ok);flex:none}
.doc-pick .dp-main{min-width:0}
.doc-pick .dp-main b{display:block;font-size:13.4px;font-weight:620;line-height:1.35;
  word-break:break-word}
.doc-pick .dp-meta{display:block;font-size:11.8px;color:var(--ink-3);margin-top:2px}
/* A spreadsheet is rarely the answer here, so it sinks rather than disappearing. */
.doc-pick.sheet{opacity:.62}
.doc-pick.sheet:hover{opacity:1}

/* ── Data integrity: the checks, before their findings ─────────────────────────────────────
 *
 * A page that shows only findings cannot tell a clean practice from a check that never ran, and
 * those are opposite facts. Each check states the question it answers, the source it read with
 * the address, when it last ran and how much it covered. Green means "looked, found nothing";
 * grey means "never looked", and grey is the state that should worry you.
 */
.chk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:12px;
  margin:0 0 22px}
.chk{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;box-shadow:var(--shadow-sm);display:grid;gap:9px;align-content:start}
.chk-top{display:flex;align-items:center;gap:9px}
.chk-dot{width:9px;height:9px;border-radius:50%;background:var(--idle);flex:none}
.chk.clean .chk-dot{background:var(--ok)}
.chk.found .chk-dot{background:var(--warn)}
.chk.never .chk-dot{background:var(--ink-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink-3) 18%,transparent)}
.chk-name{font-family:var(--serif);font-size:15px;font-weight:660;letter-spacing:-.02em}
.chk-verdict{margin-left:auto;font-size:12.2px;font-weight:640;color:var(--ink-3);white-space:nowrap}
.chk.clean .chk-verdict{color:var(--ok)}
.chk.found .chk-verdict{color:var(--warn)}
.chk.never{border-color:color-mix(in srgb,var(--ink-3) 40%,transparent);
  background:linear-gradient(0deg,color-mix(in srgb,var(--ink-3) 5%,transparent),
             color-mix(in srgb,var(--ink-3) 5%,transparent)),var(--surface)}
.chk.never .chk-verdict{color:var(--ink-2)}
.chk-ask{font-size:12.8px;color:var(--ink-2);line-height:1.45}
/* Switched off, and saying so. Quieter than the others, never absent: a check nobody can see is
   indistinguishable from one that passed. */
.chk.off{opacity:.72;border-style:dashed}
.chk.off .chk-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--ink-3)}
.chk.off .chk-verdict{color:var(--ink-3)}
/* The evidence. A definition list because that is what it is: a label and the fact behind it. */
.chk-ev{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:12.2px}
.chk-ev dt{color:var(--ink-3)}
.chk-ev dd{margin:0;color:var(--ink-2)}
.chk-ev dd a{color:var(--ok);text-decoration:none}
.chk-ev dd a:hover{text-decoration:underline}
.chk-ev .never{color:var(--crit);font-weight:700}
.chk-act{margin-top:2px}

/* ── Tasks: a queue of cards, with the suggestions beside it ───────────────────────────────
 *
 * The seven-column table put the word "critical" in column one fourteen times, which is fourteen
 * things shouting at one volume, and hid what a task needs behind an edit dialog. A card leads
 * with the sentence and says the three things that decide whether you pick it up: when it is due,
 * whose it is, and how much of what would close it is already true.
 */
.cmdbar{position:sticky;top:0;z-index:6;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:11px 26px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(9px)}
.cmdbar .sortsel{margin-left:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:6px 10px;font:inherit;font-size:12.6px;color:var(--ink-2);width:auto}
.taskcols{display:grid;grid-template-columns:1fr 300px;gap:20px;padding:18px 26px 24px;align-items:start}
@media (max-width:1100px){.taskcols{grid-template-columns:1fr}}

.lanehead{display:flex;align-items:center;gap:11px;margin:16px 2px 9px;font-size:12.6px;
  color:var(--ink-3)}
.lanehead:first-child{margin-top:2px}
.lanehead .r{flex:1;height:1px;background:var(--line)}
.lane{display:grid;gap:9px}

/* A card is as wide as text stays readable, not as wide as the window. On a large screen the
   old full-bleed card put a short sentence in the left third and nothing in the other two. */
.lane{max-width:900px}
.tk{display:grid;grid-template-columns:auto 38px minmax(0,1fr);gap:14px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 15px;box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .14s,box-shadow .14s,border-color .14s}
.tk:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--ok) 30%,var(--line))}
/* EVERY CARD IS WHITE. Urgency is carried by the words, "11 days overdue" in red, and nothing
   else: a tinted card was a second alarm saying the same thing more loudly. */
.tk.donerow{opacity:.6}

/* The text takes the whole card. These caps are sized for a table cell, where 38ch keeps a
   column readable; inside a card they pinned the note to half the width and left the rest of
   the card empty beside it. */
.tk .note,.tk .tasknote,.tk .answered{max-width:none;width:100%;box-sizing:border-box}
.tk .tasknote{padding:7px 10px;border-radius:8px;font-size:12.6px;margin-top:8px}
.tk .note{margin-top:6px;font-size:12.6px}
.tk > input[type=checkbox]{margin-top:6px;width:16px;height:16px;accent-color:var(--ok);cursor:pointer}
.tkmain{min-width:0}
.tk .tt{font-size:15.2px;font-weight:620;letter-spacing:-.018em;line-height:1.35}
.tk:hover .tt{color:var(--ok)}
.tk .hash{font-size:11.5px;color:var(--ink-3);font-weight:500;margin-left:6px;
  font-variant-numeric:tabular-nums}
.tk .tm{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12.6px;color:var(--ink-3);
  margin-top:5px}
.tk .tm .k{color:var(--crit);font-weight:640}
.tk .tm .k.w{color:var(--warn)} .tk .tm .k.n{color:var(--ink-3);font-weight:500}
.tk .tm .who{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.tk .tm .who .a{width:19px;height:19px;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;font-size:9.5px;font-weight:750;font-family:var(--serif)}
.tk .tm .src{font-size:11.6px}
.tnx{margin-top:8px;font-size:13.2px;color:var(--ink-2);line-height:1.45}
.tnx .lb{color:var(--ink-3)}
.tnx b{color:var(--ink);font-weight:620}
.tnx .lnk{border:0;background:none;padding:0;margin-left:7px;font:inherit;font-size:13px;
  font-weight:640;color:var(--ok);cursor:pointer}
.tnx .lnk:hover{text-decoration:underline}
.tk .answered{margin-top:9px;padding:9px 12px;border-radius:10px;font-size:13px;color:var(--ink-2);
  background:color-mix(in srgb,var(--ok) 9%,transparent)}
.tk .answered b{color:var(--ink)}
.tkacts{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:9px}
.tkacts button,.tkacts .btn{border:0;background:none;padding:0;font:inherit;font-size:12.8px;
  font-weight:640;color:var(--ok);cursor:pointer;box-shadow:none}
.tkacts button:hover{text-decoration:underline}
.tkacts a{font-size:12.8px}
/* Quick actions appear on hover, so a queue of forty is forty sentences and not forty toolbars. */
/* Labelled controls, wrapping under the text rather than squeezed into a column beside it.
   Visible on hover and on focus, always visible on touch. */
.tkquick{grid-column:3 / -1;display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line);opacity:0;max-height:0;overflow:hidden;
  transition:opacity .12s}
.tk:hover .tkquick,.tk:focus-within .tkquick{opacity:1;max-height:200px}
@media (hover:none){.tkquick{opacity:1;max-height:200px}}
.tkquick .qsel{background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:5px 9px;font:inherit;font-size:12.4px;color:var(--ink-2);width:auto}
.tkquick .qsel:hover{border-color:var(--ok)}
/* Criticality, said rather than implied. Normal is not shown: only what is above it. */
.prio{font-size:10.6px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:20px}
.prio.critical{background:var(--crit-bg);color:var(--crit)}
.prio.high{background:var(--warn-bg);color:var(--warn)}
.prio.low{background:var(--surface-2);color:var(--ink-3)}

/* the ring: conditions the DATA proves, never the checklist */
.ring{width:38px;height:38px;position:relative;flex:none;margin-top:1px}
.ring svg{transform:rotate(-90deg)}
.ring .tr{stroke:var(--line)}
.ring .fl{stroke:var(--ok);stroke-linecap:round;transition:stroke-dasharray .35s}
.ring.part .fl{stroke:var(--warn)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink-2);font-family:var(--serif)}
.ring.none b{color:var(--ink-3);font-size:13px}
.ring.full b{color:var(--ok)}

/* the rail */
.tasksied{display:grid;gap:14px;align-content:start;position:sticky;top:64px}
/* ── The vendor payment grid ────────────────────────────────────────────────────────────────
   A grid rather than ninety side panels. Dense on purpose: the whole point is seeing many rows at
   once and tabbing across, so the cells are small and the table scrolls inside its own box rather
   than pushing the page sideways. */
.vprof-wrap{margin:10px 0 2px}
.vprof-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* No max-width here: the card is the measure. A ch-capped note leaves half a wide card empty,
   which reads as broken rather than as readable. */
.vprof-note{font-size:12px;line-height:1.55;margin:6px 0 10px}
.vprof-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vprof-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface)}
table.vprof{border-collapse:collapse;width:100%;font-size:12.5px}
table.vprof th{position:sticky;top:0;background:var(--surface-2);text-align:left;font-weight:640;
  color:var(--ink-2);padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
table.vprof td{padding:4px 9px;border-bottom:1px solid var(--line-2, var(--line));vertical-align:middle}
table.vprof tr:last-child td{border-bottom:0}
table.vprof .vp-name{font-weight:560;color:var(--ink);white-space:nowrap;max-width:230px;
  overflow:hidden;text-overflow:ellipsis}
/* The two the ledger cannot answer lead the row and are the only ones tinted: they are the part
   that is genuinely a person's job. */
table.vprof td:nth-child(2) select,table.vprof td:nth-child(3) select{border-color:var(--accent);
  color:var(--ink)}
.vp-in{padding:3px 6px;font-size:12.5px;border:1px solid var(--line);border-radius:7px;
  background:var(--surface);color:var(--ink);width:auto;min-width:82px}
.vp-in.vp-num{width:88px;text-align:right;font-variant-numeric:tabular-nums;min-width:0}
.vp-in.vp-day{width:56px;text-align:right;font-variant-numeric:tabular-nums;min-width:0}
.vp-in:focus{outline:2px solid var(--accent);outline-offset:1px}
.vp-in.vp-saving{opacity:.55}
.vp-in.vp-saved{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok-bg)}
@media (prefers-reduced-motion:no-preference){.vp-in{transition:border-color .15s,box-shadow .15s,opacity .15s}}

.sidecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px 17px}
.sidecard h4{margin:0 0 4px;font-family:var(--serif);font-size:14px;font-weight:660;
  letter-spacing:-.015em}
.sidenote{margin:0 0 12px;font-size:12.4px;color:var(--ink-3);line-height:1.5}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}
.nm2{display:grid;gap:1px}
.nm2 .n{font-family:var(--serif);font-size:26px;font-weight:680;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.nm2 .l{font-size:12.2px;color:var(--ink-3)}
.nm2.c .n{color:var(--crit)} .nm2.w .n{color:var(--warn)} .nm2.g .n{color:var(--ok)}
.stalerow{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);
  font-size:13px;cursor:pointer}
.stalerow:first-child{border-top:0;padding-top:0}
.stalerow:hover .t{color:var(--ok)}
.stalerow .d{font-size:11.5px;font-weight:700;color:var(--warn);flex:none;
  font-variant-numeric:tabular-nums}
.stalerow .d.crit{color:var(--crit)}
.stalerow .t{color:var(--ink-2);min-width:0;line-height:1.4}
.stalerow .t .w{display:block;font-size:11.6px;color:var(--ink-3)}

/* the selection bar, only when something is ticked */
.tasksel{position:sticky;bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--ink);color:var(--paper);border-radius:var(--radius-sm);padding:11px 15px;
  box-shadow:var(--shadow-lg);margin-top:12px}
.tasksel .n{font-weight:680;font-variant-numeric:tabular-nums}
.tasksel .sp{flex:1}
.tasksel button,.tasksel select{border:0;background:color-mix(in srgb,var(--ok) 22%,transparent);
  color:var(--paper);border-radius:9px;padding:6px 12px;font:inherit;font-size:12.8px;
  font-weight:620;cursor:pointer;width:auto}
.tasksel button.go{background:var(--ok);color:#fff}
.tasksel option{color:var(--ink);background:var(--surface)}
@media (prefers-reduced-motion:reduce){.tk,.ring .fl{transition:none}}

/* ── the suggestion cards, in a 300px rail ─────────────────────────────────────────────────
 *
 * `.find` is a three-column row built for the full width of Overview: status, text, buttons. In
 * the Tasks rail those columns became about forty pixels each and the sentence came out one word
 * per line with the buttons on top of it. Same card, stacked: what it is, why, then the two
 * decisions on their own row where they are still one press.
 *
 * The rail also shows only the first few. Eight suggestions in a column beside the work is a
 * second queue competing with the real one, and a list nobody reads to the end is a list that
 * might as well be three long.
 */
.sidecard .find{display:block;padding:12px 0;border-top:1px solid var(--line);background:none}
.sidecard .find:first-of-type{border-top:0;padding-top:2px}
.sidecard .find:hover{background:none}
.sidecard .find .fstat{padding:0 0 6px}
.sidecard .find .ft{font-size:13.4px;font-weight:640;line-height:1.4;display:block}
.sidecard .find .ft .hub-src{display:inline-block;margin:4px 0 0}
.sidecard .find .fw{font-size:12.5px;line-height:1.5;margin-top:4px}
.sidecard .find .fmoney{font-size:15px;margin-top:5px}
.sidecard .find .fright{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px;justify-content:flex-start}
.sidecard .find .fright .btn{white-space:nowrap}
.sidecard .find.extra.hidden{display:none}
.sidecard .find .fw{display:block}
.fmore{margin-top:6px}
.fmore summary{list-style:none;cursor:pointer;font-size:12.2px;color:var(--ok);font-weight:640}
.fmore summary::-webkit-details-marker{display:none}
.fmore summary:hover{text-decoration:underline}
.fmore > div{margin-top:6px;font-size:12.4px;color:var(--ink-2);line-height:1.5;
  white-space:pre-wrap;max-height:260px;overflow:auto}
/* "What the data is saying" uses the issue card, which has the same width problem in a rail. */
.sidecard .issue{padding:11px 12px;margin-bottom:9px}
.sidecard .issue h3{font-size:13.2px;line-height:1.4;flex-wrap:wrap}
.sidecard .issue p{font-size:12.5px;line-height:1.5}
.sidecard .issue .meta{flex-wrap:wrap;gap:7px;font-size:12.2px}
.sidecard .issue.extra.hidden{display:none}
.showmore{width:100%;margin-top:11px;border:1px solid var(--line);background:none;border-radius:9px;
  padding:7px 10px;font:inherit;font-size:12.6px;font-weight:640;color:var(--ink-2);cursor:pointer}
.showmore:hover{border-color:var(--ok);color:var(--ok)}

/* ── triage: filter chips, a quiet caution, and the cards under them ───────────────────────
 *
 * Email review and Claims to fix are the same shape of screen: narrow the pile, then work it one
 * card at a time. So they share these pieces rather than each growing their own.
 */
.chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:0 0 4px}
.ch{border:1px solid var(--line);background:transparent;border-radius:20px;padding:5px 12px;
  font:inherit;font-size:12.8px;font-weight:600;color:var(--ink-3);cursor:pointer;
  display:inline-flex;gap:6px;align-items:center;transition:color .12s,border-color .12s,background .12s}
.ch:hover{color:var(--ink);border-color:var(--ink-3)}
.ch.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ch .c{font-variant-numeric:tabular-nums;opacity:.65}

/* A caution that is TRUE EVERY TIME does not get to look like an alarm. */
.quiet{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-3);
  line-height:1.55;margin:14px 0 0}
.quiet .qd{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:none;margin-top:7px}
.quiet b{color:var(--ink-2);font-weight:620}

/* An email thread waiting on a decision. */
.thr{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:15px 17px;box-shadow:var(--shadow-sm);display:grid;gap:9px;
  transition:transform .14s,box-shadow .14s}
.thr:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.thr.old{border-color:color-mix(in srgb,var(--crit) 34%,transparent);
  background:linear-gradient(0deg,color-mix(in srgb,var(--crit) 5%,transparent),
             color-mix(in srgb,var(--crit) 5%,transparent)),var(--surface)}
.thr .top{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-size:12.8px;color:var(--ink-3)}
.thr .from{font-size:14.6px;font-weight:660;letter-spacing:-.016em;color:var(--ink)}
.thr .idle{font-weight:640}
.thr .idle.crit{color:var(--crit)} .thr .idle.warn{color:var(--warn)}
.thr .subj{font-size:14px;color:var(--ink);font-weight:520;letter-spacing:-.01em}
/* The subject doubles as the way back to the email, so it reads as the heading it is until you
   point at it, rather than as a link competing with the buttons underneath. */
.thr .subj a{color:inherit;text-decoration:none}
.thr .subj a:hover{color:var(--accent);text-decoration:underline}
.thr .sum{font-size:13.4px;color:var(--ink-2);line-height:1.5}
.thr .acts{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding-top:2px}
.thr .acts button{border:0;background:none;padding:0;font:inherit;font-size:13.2px;font-weight:640;
  color:var(--ok);cursor:pointer}
.thr .acts button.n{color:var(--ink-3)}
.thr .acts button:hover{text-decoration:underline}
.thr .acts button.n:hover{color:var(--crit)}
.thr .acts a{font-size:13.2px;color:var(--ink-3)}

/* A denied claim, and the clock on it. */
.clm{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;box-shadow:var(--shadow-sm);display:grid;gap:11px;
  transition:transform .14s,box-shadow .14s}
.clm:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.clm.late{border-color:color-mix(in srgb,var(--crit) 34%,transparent);
  background:linear-gradient(0deg,color-mix(in srgb,var(--crit) 5%,transparent),
             color-mix(in srgb,var(--crit) 5%,transparent)),var(--surface)}
.clm.soon{border-color:color-mix(in srgb,var(--warn) 36%,transparent)}
.clm.donerow{opacity:.62}
.clm .row1{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.clm .tok{font-family:var(--serif);font-size:15px;font-weight:680;letter-spacing:-.02em}
.clm .py{font-size:13.4px;color:var(--ink-2)}
.clm .ln{font-size:12.8px;color:var(--ink-3)}
.clm .amt{margin-left:auto;font-family:var(--serif);font-size:19px;font-weight:680;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
/* The filing window as a meter. "Closing soon" is a word; this is how much is left of what. */
.clock{display:grid;gap:5px}
.clock .bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.clock .bar i{display:block;height:100%;border-radius:3px;background:var(--ok);transition:width .3s}
.clock.soon .bar i{background:var(--warn)} .clock.late .bar i{background:var(--crit)}
.clock .lbl{font-size:12.4px;color:var(--ink-3)}
.clock .lbl b{color:var(--ink-2);font-weight:620}
.clock.late .lbl b{color:var(--crit)}
.clm .cacts{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.clm .cacts button{border:0;background:none;padding:0;font:inherit;font-size:13.2px;font-weight:640;
  color:var(--ok);cursor:pointer}
.clm .cacts button.n{color:var(--ink-3)}
.clm .cacts button:hover{text-decoration:underline}
.clm .cacts button.n:hover{color:var(--crit)}
.clm details.more summary{list-style:none;cursor:pointer;font-size:12.8px;color:var(--ink-3)}
.clm details.more summary::-webkit-details-marker{display:none}
.clm details.more summary:hover{color:var(--ok)}
.clm details.more .body{padding-top:9px;font-size:13.2px;color:var(--ink-2);line-height:1.55}
.clm details.more .body b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.thr,.clm,.clock .bar i{transition:none}}

/* ── a task's checklist ────────────────────────────────────────────────────────────────────
   Steps a person ticks, shown inside the task rather than as four tasks of their own. The bar is
   the whole point: a list of eleven with three done should say so before it is opened. */
.checklist{margin-top:9px;padding:11px 13px 9px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:color-mix(in srgb,var(--ok) 3.5%,transparent);max-width:640px}
.cl-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:10px}
.cl-bar i{display:block;height:100%;border-radius:3px;background:var(--ok);transition:width .25s}
.cl-items{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cl-items li{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13.2px}
.cl-items label{display:flex;align-items:center;gap:9px;flex:1;min-width:0;cursor:pointer;margin:0}
.cl-items input{width:15px;height:15px;accent-color:var(--ok);flex:none;cursor:pointer}
.cl-items .t{color:var(--ink);line-height:1.4}
.cl-items li.on .t{color:var(--ink-3);text-decoration:line-through}
.cl-items .by{font-size:11px;color:var(--ink-3);white-space:nowrap}
.cl-x{border:0;background:none;color:var(--ink-3);font-size:16px;line-height:1;cursor:pointer;
  padding:0 4px;opacity:0;transition:opacity .12s,color .12s}
.cl-items li:hover .cl-x,.cl-x:focus-visible{opacity:1}
.cl-x:hover{color:var(--crit)}
.cl-add{margin-top:9px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.cl-add input{flex:1 1 220px;font-size:13px;padding:6px 10px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.cl-add input:focus{outline:none;border-color:var(--ok)}
.cl-add .dim{font-size:11.5px}
.btn.listdone{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
@media (hover:none){.cl-x{opacity:1}}
@media (prefers-reduced-motion:reduce){.cl-bar i{transition:none}}

/* ── who the practice is, under the page title ─────────────────────────────────────────────
   The practice, then its providers as a roster. Initials rather than a name, because five names
   is a paragraph and a count plus faces answers "whose clinic is this" at a glance. The full
   list is the title attribute. */
.hd-id b{color:var(--ink);font-weight:640;font-variant-numeric:tabular-nums}
.hd-provs{display:inline-flex;align-items:center;gap:0;margin-left:12px;vertical-align:middle}
.hd-av{width:23px;height:23px;border-radius:50%;display:inline-grid;place-items:center;
  font-size:9.5px;font-weight:750;font-family:var(--serif);color:var(--ink-2);
  background:var(--surface-2);box-shadow:0 0 0 2px var(--paper);margin-left:-7px}
.hd-av:first-child{margin-left:0}
.hd-av.more{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.hd-cnt{margin-left:9px;color:var(--ink-3)}

/* ── the tab header: title, one line, the facts ────────────────────────────────────────────
 *
 * Billing has seven tabs and every one is a different reading of the same two exports, so each
 * had grown a paragraph explaining itself, a meta strip repeating half of it, and a sentence
 * under the table repeating the other half. Three statements of one idea, and none of them the
 * first thing you read.
 *
 * The header states it once: WHAT this tab is, in a single line, then the facts of what you are
 * looking at. How the number is worked out sits behind one press, shut until somebody doubts a
 * figure, because that is the only moment it matters.
 *
 * No fill behind text and no monospace anywhere. The formula is set as type, with the operators
 * carrying the colour: it is a sentence about arithmetic, not a piece of code.
 */
.tabhdr{position:relative;padding:26px 26px 22px;
  background-image:radial-gradient(120% 150% at 8% 0%,color-mix(in srgb,var(--ok) 13%,transparent) 0%,transparent 58%)}
.tabhdr::after{content:"";position:absolute;left:26px;right:26px;bottom:0;height:1px;background:var(--line)}
.th-row{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.th-title{flex:1 1 340px;min-width:0}
.tabhdr h2{font-family:var(--serif);font-size:29px;font-weight:700;letter-spacing:-.038em;
  line-height:1.12;margin:0 0 6px}
/* The definition. Larger than body text, quieter than the title. */
.th-lede{margin:0;font-size:17px;line-height:1.42;color:var(--ink-2);letter-spacing:-.012em;
  font-weight:450}
.th-lede b{color:var(--ink);font-weight:620}
.th-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Facts, not chips: type separated by a hairline dot. */
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:15px;font-size:13px;
  color:var(--ink-3);line-height:1.5}
.facts .f{display:inline-flex;align-items:baseline;gap:5px}
.facts .f b{color:var(--ink);font-weight:640;font-variant-numeric:tabular-nums}
.facts .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.4;flex:none}
.facts .src{color:var(--ink-2)}
.facts .live{color:var(--ok);font-weight:620}
.facts .live b{color:var(--ok)}
.facts .warnly{color:var(--warn);font-weight:620}
.facts .warnly b{color:var(--warn)}

/* How this is worked out. Shut by default; a quiet line, not a banner. */
details.calc{border-bottom:1px solid var(--line)}
details.calc > summary{list-style:none;cursor:pointer;padding:13px 26px;font-size:13.5px;
  color:var(--ink-3);display:flex;align-items:center;gap:8px;transition:color .12s}
details.calc > summary::-webkit-details-marker{display:none}
details.calc > summary:hover{color:var(--ok)}
details.calc > summary .cv{font-size:11px;opacity:.7;transition:transform .18s}
details.calc[open] > summary{color:var(--ink-2)}
details.calc[open] > summary .cv{transform:rotate(180deg)}
.calcbody{padding:2px 26px 26px;display:grid;grid-template-columns:1.15fr .85fr;gap:30px}
@media (max-width:900px){.calcbody{grid-template-columns:1fr;gap:20px}}
/* The formula, as type. Operands read as words; the operators carry the colour. */
.fx{font-family:var(--serif);font-size:19px;line-height:1.75;letter-spacing:-.02em;font-weight:600;
  color:var(--ink)}
.fx .op{color:var(--ok);font-weight:500;padding:0 5px}
.fx .un{font-weight:450;color:var(--ink-2);font-size:15px}
.fx .out{border-bottom:2px solid color-mix(in srgb,var(--ok) 30%,transparent);padding-bottom:1px}
.fx + .fx{margin-top:9px}
.why{font-size:13.6px;color:var(--ink-2);line-height:1.6;margin:0}
.why + .why{margin-top:10px}
.why b{color:var(--ink);font-weight:620}
.crule{display:flex;gap:10px;align-items:baseline;font-size:13.4px;padding:7px 0;
  border-top:1px solid var(--line)}
.crule .k{font-variant-numeric:tabular-nums;font-weight:680;flex:none;min-width:78px}
.crule .v{color:var(--ink-2)}
.crule.ok .k{color:var(--ok)} .crule.warn .k{color:var(--warn)} .crule.crit .k{color:var(--crit)}
@media (prefers-reduced-motion:reduce){details.calc > summary .cv{transition:none}}
/* inset the outer columns to match the section header (22px) so content isn't jammed to the card edge */
.scroll th:first-child,.scroll td:first-child{padding-left:24px}
.scroll th:last-child,.scroll td:last-child{padding-right:24px}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--surface-2)}
tbody tr.clickable{cursor:pointer}
.mono{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dim{color:var(--ink-3);font-size:12.5px}
.note{;font-size:12px;color:var(--ink-3);line-height:1.4}
/* audit detail: plain-English, fills the column */
.aud-detail{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.aud-k{color:var(--ink-3);font-weight:600}
.aud-sep{color:var(--ink-3);margin:0 5px}
.tasknote{;font-size:12px;color:var(--ink-2);line-height:1.45;margin-top:4px;
  padding:4px 8px;background:var(--caution-bg);border-left:2px solid var(--caution);border-radius:4px}
.empty{padding:26px;text-align:center;color:var(--ink-3);font-size:13px}

/* ---------- foldable section ----------
   Suggestions are worth having and are not worth a page of scrolling before you reach the actual
   task list. Shut by default: the header states what is inside and how many, and opening it is
   one click. Anything the app merely PROPOSES belongs behind one of these. */
.fold>summary{list-style:none;cursor:pointer;padding:18px 24px;display:flex;align-items:baseline;
  gap:12px;flex-wrap:wrap}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";width:9px;height:9px;margin-left:auto;flex:none;align-self:center;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.fold[open]>summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.fold>summary:hover{background:var(--surface-2)}
.fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fold>summary h2{font-family:var(--serif);font-weight:660;letter-spacing:-.028em;font-size:19px;margin:0}
.fold>summary span{font-size:12.8px;color:var(--ink-3)}
.fold[open]>summary{border-bottom:1px solid var(--line)}

/* Brand roll-up on the scorecard: the contracts inside one payer. */
.sc-roll{margin-bottom:18px}
.umb-part{display:grid;grid-template-columns:minmax(0,1fr) 62px 110px auto;gap:12px;align-items:center;
  padding:7px 0;border-top:1px solid var(--line);font-size:12.6px}
.umb-part:first-child{border-top:none}
.umb-part .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.umb-part .pct{font-family:var(--serif);font-weight:670;font-variant-numeric:tabular-nums;text-align:right}
.umb-part .cl{font-size:11.5px}
@media (max-width:680px){.umb-part{grid-template-columns:1fr auto;row-gap:4px}}

/* ---------- empty states ----------
   Four rules, from the signed-off mock:
     1. Say what the screen is FOR. "Nobody yet" describes the database, and somebody who has
        just signed up does not yet know what a provider record is for or why it comes first.
     2. Carry the next action. If the message names a fix it should also perform it.
     3. Never let zero look like health. Empty and all-clear are both true statements about no
        rows, and only one of them is good news; they must not render the same.
     4. Show the shape, not fake data. A greyed skeleton marked Example says what the screen
        becomes. Realistic sample records get acted on by somebody, eventually. */
.es{padding:24px 24px 22px;display:flex;flex-direction:column;gap:13px}
.es-top{display:flex;gap:14px;align-items:flex-start}
.es-ico{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--ok-bg);color:var(--ok)}
.es-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.es-ico.warn{background:var(--caution-bg);color:var(--caution)}
.es-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.es-txt h4{font-family:var(--serif);font-size:15.5px;font-weight:640;letter-spacing:-.02em;margin:0;color:var(--ink)}
.es-txt p{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0}
.es-txt p b{color:var(--ink);font-weight:650}
.es-btns{display:flex;gap:8px;flex-wrap:wrap}
/* The skeleton. Marked Example so nobody mistakes a placeholder row for a real record. */
.es-ghost{border-radius:11px;background:var(--surface-2);padding:11px 14px;position:relative;overflow:hidden}
.es-ghost::after{content:"Example";position:absolute;top:8px;right:11px;font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.es-gh{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  display:grid;gap:10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.es-grow{display:grid;gap:10px;align-items:center;padding:7px 0}
.es-grow+.es-grow{border-top:1px solid var(--line)}
.es-bar{height:8px;border-radius:4px;background:var(--line)}

/* ---------- first run: the setup path replaces Overview until there is data ---------- */
.setup{background:var(--today);border-radius:var(--radius);padding:20px 23px;margin-bottom:22px;
  color:#fff;position:relative;overflow:hidden}
.setup::after{content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(21,184,124,.30) 0%,rgba(21,184,124,0) 68%);pointer-events:none}
.setup-lab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-cue);font-weight:700;
  display:flex;align-items:center;gap:7px;position:relative}
.setup-lab i{width:6px;height:6px;border-radius:50%;background:var(--rail-cue);display:block;
  box-shadow:0 0 0 3px rgba(123,235,190,.22)}
.setup h3{font-family:var(--serif);font-size:19px;font-weight:620;line-height:1.3;letter-spacing:-.022em;
  margin:7px 0 3px;color:#fff;position:relative;max-width:46ch}
.setup-sub{font-size:12.6px;color:rgba(255,255,255,.62);position:relative}
.setup-steps{display:flex;flex-direction:column;gap:1px;margin-top:15px;background:rgba(255,255,255,.12);
  border-radius:11px;overflow:hidden;position:relative}
.setup-step{display:flex;align-items:center;gap:12px;padding:11px 14px;background:rgba(19,28,26,.55);
  font-size:13px;border:0;font-family:inherit;text-align:left;width:100%;color:#fff;cursor:pointer}
.setup-step:hover{background:rgba(19,28,26,.35)}
.setup-step:focus-visible{outline:2px solid var(--rail-cue);outline-offset:-2px}
.setup-step .n{width:21px;height:21px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;background:rgba(255,255,255,.15);color:#fff}
.setup-step.done .n{background:var(--rail-cue);color:#0C2C20}
.setup-step .t{flex:1;min-width:0}
.setup-step .t b{display:block;font-weight:600;color:#fff}
.setup-step .t span{font-size:11.5px;color:rgba(255,255,255,.55)}
.setup-step.done{cursor:default}
.setup-step.done .t b{color:rgba(255,255,255,.62);text-decoration:line-through}
.setup-step .go{font-size:11.8px;font-weight:650;color:var(--rail-cue);white-space:nowrap}
.setup-step.done .go{display:none}

/* ---------- the Today strip ----------
   One bold thing on the page, and only one. The rest of Overview stays quiet so this has
   something to be loud against. It shares --today with the rail so the two read as one material.
   It is never decorative: renderTodayStrip() writes nothing at all when nothing is pressing,
   because a banner that is always there is a banner people stop seeing. */
.today{background:var(--today);border-radius:var(--radius);padding:20px 23px;margin-bottom:22px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden;color:#fff}
.today::after{content:"";position:absolute;right:-70px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(21,184,124,.30) 0%,rgba(21,184,124,0) 68%);pointer-events:none}
.today-txt{flex:1;min-width:240px;display:flex;flex-direction:column;gap:5px;position:relative}
.today-lab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-cue);font-weight:700;
  display:flex;align-items:center;gap:7px}
.today-lab i{width:6px;height:6px;border-radius:50%;background:var(--rail-cue);display:block;
  box-shadow:0 0 0 3px rgba(123,235,190,.22)}
.today h3{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.32;letter-spacing:-.02em;
  margin:0;max-width:46ch;color:#fff;text-wrap:balance}
.today-sub{font-size:12.6px;color:rgba(255,255,255,.62)}
.today .btn{position:relative;flex:none}
@media (max-width:620px){.today{padding:17px 18px}.today h3{font-size:17.5px}}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:20px;font-size:11px;
  font-weight:600;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.p-crit{background:var(--crit-bg);color:var(--crit)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-caut{background:var(--caution-bg);color:var(--caution)}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-idle{background:var(--idle-bg);color:var(--idle)}
.p-info{background:var(--info-bg);color:var(--info)}
.flat{padding:1px 6px;border-radius:4px;font-size:10.5px;font-weight:600;font-family:var(--mono)}
.f-yes{background:var(--ok-bg);color:var(--ok)}.f-no{background:var(--crit-bg);color:var(--crit)}
.f-pend{background:var(--caution-bg);color:var(--caution)}.f-na{background:var(--idle-bg);color:var(--idle)}
.tag{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:20px;background:var(--surface-2);
  color:var(--ink-3);border:1px solid var(--line);white-space:nowrap;font-weight:500}
.tag.oph{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.tag.lm{background:var(--caution-bg);color:var(--caution);border-color:transparent}
/* tag used as a link (portal/form chips) — reads as clickable */
a.tag{color:var(--accent);background:var(--accent-soft);border-color:transparent}
a.tag:hover{background:var(--accent);color:#fff;text-decoration:none}
/* grouped payer view: AddVal category is the heading, Trizetto rows nest under it */
tr.grp-head td{background:var(--surface-2);border-top:2px solid var(--line);
  padding:9px 13px;font-weight:600}
tr.grp-head:first-child td{border-top:none}
.grp-name{font-family:var(--serif);font-size:14.5px;font-weight:700}
.grp-meta{font-size:11px;color:var(--ink-3);font-weight:400;margin-left:8px}
tr.child td:first-child{padding-left:26px}
tr.child .cpayer{color:var(--ink-2);font-size:12.5px}
.grp-roll{display:inline-flex;gap:4px;margin-left:6px}
.ai-badge{font-size:9.5px;font-weight:700;letter-spacing:.06em;padding:1px 6px;border-radius:4px;
  background:var(--accent-soft);color:var(--accent);vertical-align:2px}
.ai-badge.off{background:var(--idle-bg);color:var(--idle)}
.ai-result{margin-top:12px;background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:12px 14px;font-size:12.5px}
.ai-result h4{margin:0 0 4px;font-size:13px}
.ai-result .row{margin:6px 0;line-height:1.5}
.ai-result .k{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
/* Data Integrity status header */
.di-head{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:16px 18px}
.di-score{display:flex;align-items:center;gap:14px}
.di-score .ring{width:52px;height:52px;flex:none}
.di-score .n{font-family:var(--mono);font-size:24px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.di-score .lbl{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
.di-freshness{font-size:12.5px;color:var(--ink-2);line-height:1.5;flex:1 1 200px}
.di-freshness b{color:var(--ink)}
.di-fresh-pill{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}
.di-fresh-ok{background:var(--ok-bg);color:var(--ok)} .di-fresh-stale{background:var(--caution-bg);color:var(--caution)}
.di-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.di-changed{margin:0 18px 14px;padding:9px 13px;border-radius:8px;background:var(--accent-soft);
  color:var(--accent);font-size:12.5px;border-left:3px solid var(--accent)}
.di-group-head{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  font-weight:700;margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.di-group-head:first-child{margin-top:0}
.di-group-head .c{font-family:var(--mono);background:var(--surface-2);padding:0 7px;border-radius:9px}
.dupe-group{border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:12px}
.dupe-doc{display:flex;align-items:flex-start;gap:9px;padding:7px 0;cursor:pointer}
.dupe-doc input{margin-top:3px;width:auto;flex:none}
.help-panel{margin-top:8px;border-left:3px solid var(--accent);background:var(--surface-2);
  border-radius:0 8px 8px 0;padding:11px 14px}
.help-steps{white-space:pre-wrap;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.help-steps a{color:var(--accent);text-decoration:underline;word-break:break-all}
.help-email{margin-top:11px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.help-email-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.help-email pre{margin:0;white-space:pre-wrap;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.brief-text{width:100%;min-height:170px;padding:11px 13px;font-size:13px;line-height:1.55;
  font-family:inherit;background:var(--surface);border:1px solid var(--line);border-radius:8px;resize:vertical;color:var(--ink-1)}
.brief-actions{margin-top:7px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.reassign-sel{font-size:12px;padding:3px 6px;max-width:120px;vertical-align:middle;cursor:pointer}

/* Leak finder — per-payer leak cards + methodology card */
.leak-card{border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:12px 14px;margin:0 0 10px}
.leak-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;
  padding-bottom:8px;border-bottom:1px solid var(--line);font-size:14.5px}
.leak-total{font-weight:700;font-variant-numeric:tabular-nums;color:var(--crit)}
.leak-fix{padding:7px 0;border-top:1px dashed var(--line)}
.leak-fix:first-of-type{border-top:0}
.leak-fix-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.leak-amt{font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink-1)}
.leak-action{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:3px}
.leak-codes{font-size:12px;margin-top:3px}
/* Opselia's own voice. Wherever the app explains itself, it wears the brand green:
   a near-white card on a soft emerald glow, so guidance is instantly distinguishable
   from the practice's own data without shouting or hurting readability. */
/**
 * Bills to pay, on a narrow window.
 *
 * The table sets five columns to fixed pixel widths (166+116+132+128+88 = 630px) and lets Vendor
 * take whatever is left. Below about 700px there IS nothing left, and because the table is
 * table-layout:fixed with no way to overflow, the Vendor column collapsed to a few pixels: vendor
 * names wrapped to ONE CHARACTER PER LINE, "Surgenex" became eight stacked letters, rows grew to
 * half a screen each, the nowrap headers printed on top of each other and the Pay button was cut
 * off the right edge.
 *
 * A min-width stops the columns collapsing, and the .scroll wrapper gives the table somewhere to
 * go instead — you scroll it sideways rather than reading a word vertically.
 */
.rn-table.rn-bills{min-width:780px}
/**
 * break-word, not anywhere. It only splits a word that cannot fit on a line by itself, so a long
 * vendor name still wraps between words. `anywhere` is what produced the letter-per-line column.
 */
.rn-table.rn-bills td:nth-child(2){word-break:normal;overflow-wrap:break-word}
/* The recurring / payment-plan chips must not be broken up either. */
.rn-table.rn-bills .flagchip{white-space:nowrap}

/* Product P&L tracking: choosing which ledger vendors make up a product.
   Two columns on a wide screen, stacked on a narrow one. The vendor lists scroll in their own
   box so a practice with ninety suppliers does not get a dialog three screens tall. */
.pl-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:10px}
.pl-picker{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;padding:4px}
/* THE NAME AND ITS FIGURES ARE STACKED, not fighting for one line.
   They were flex siblings, and the name carried overflow-wrap:anywhere, which does something
   break-word does not: it drops the element's min-content width to a single character. So a long
   vendor name beside a long "29 entries · $16,385" was free to shrink to one letter wide and
   render straight down the page. Two rows in a grid cannot do that, whatever the column width. */
.pl-vend{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;align-items:baseline;
  padding:6px 7px;border-radius:6px;font-size:12.5px;cursor:pointer}
.pl-vend:hover{background:var(--surface-2)}
.pl-vend input{margin:0;grid-column:1;grid-row:1}
.pl-vend .dim{grid-column:2;font-size:11.5px}
/* break-word, never anywhere: it wraps a genuinely unbreakable string without letting the browser
   count the whole element as one character wide. */
.pl-vname{grid-column:2;min-width:0;color:var(--ink);overflow-wrap:break-word}
.pl-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.pl-item:last-child{border-bottom:0}
.pl-edit{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  padding:12px 14px;background:var(--surface-2)}
.pl-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* A short amber callout for something the person should read before continuing — used by the
   denial import to name the patient columns it is leaving behind. Both colours are theme
   variables, so it follows light and dark like everything else. */
.warnbox{background:var(--warn-bg);border-left:4px solid var(--warn);border-radius:0 8px 8px 0;
  padding:9px 13px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.warnbox b{color:var(--ink-1)}

.explain-card{border:1px solid rgba(14,158,106,.30);border-left:4px solid var(--ok);border-radius:0 12px 12px 0;
  background:var(--surface);
  box-shadow:0 6px 22px rgba(14,158,106,.45),0 2px 6px rgba(14,158,106,.30);
  padding:14px 18px;margin:16px 0 0}
/* the ring mark, masked so it takes the green of whichever theme is showing */
.explain-card h3::before,.explain-card h4::before{content:'';display:inline-block;width:15px;height:15px;
  vertical-align:-2px;margin-right:8px;background-color:var(--ok);
  -webkit-mask:var(--opselia-mark) center/contain no-repeat;mask:var(--opselia-mark) center/contain no-repeat}
/* This is the part that TEACHES the tab, and it used to be the smallest text on the page —
   smaller than the table it was explaining. If it is worth writing, it is worth reading. */
.explain-card h3,.explain-card h4{margin:0 0 11px;font-size:15.5px;color:var(--ink-1)}
.explain-card p{margin:0 0 11px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.explain-card p:last-child{margin-bottom:0}

/* Leak finder: choosing which kind of money to rank by, and what that choice means. */
.leak-modes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.leak-modes-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:var(--ink-3);margin-right:2px}
.leak-mode-note{margin:10px 0 16px;padding:14px 18px;border-radius:0 12px 12px 0;
  border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--surface-2)}
.leak-mode-note p{margin:0 0 8px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.leak-mode-note p:last-child{margin-bottom:0}
.leak-mode-note b{color:var(--ink)}
.leak-mode-note .leak-do{font-size:14px;color:var(--ink)}
.explain-card b{color:var(--ink-1)}
/* access directory: two columns of rows, so a long category fills the width instead of
   running down the page with half the line empty. Every row uses the same track sizes,
   so the columns line up both within a column and across the pair. */
.ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}
.ad-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto auto auto;
  align-items:center;gap:10px;padding:8px 4px;border-top:1px solid var(--line)}
.ad-name{font-size:13px;overflow-wrap:anywhere}
.ad-url{font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}
.ad-go{justify-self:start}
@media (max-width:1180px){.ad-grid{grid-template-columns:minmax(0,1fr)}}

/* ICON RULE: no symbol carries a background at rest, anywhere in the app. An icon that is
   itself a button shows its tinted target on hover; icons that only label something (nav,
   headings, icons inside a button that already has words) never show one at all.
   The single exception is the sidebar brand tile, which is a logo, not a control. */
/* row actions: colour-coded so the destructive one is never mistaken for the safe one */
.rowact{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;border:1px solid transparent;
  transition:background .12s,color .12s,border-color .12s}
.rowact svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* No fill at rest: the hue alone says which action it is, and a list of them stays quiet.
   The tinted target appears on hover, so it still reads as something you can click. */
.rowact.edit{color:var(--accent);background:transparent}
.rowact.edit:hover{background:var(--accent-soft);border-color:var(--accent)}
.rowact.del{color:var(--crit);background:transparent}
.rowact.del:hover{background:var(--crit-bg);border-color:var(--crit)}
.rowact:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* the same symbol inside a button that keeps its words, for whole-record deletes
   where a bare icon would be too easy to hit by accident */
.btn svg.bi{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:6px}

/* An empty tab has to teach, not apologise: what this holds, why it matters, and the two
   ways to fill it. This is the first thing a new practice sees on most screens. */
.emptybox{border:1px dashed var(--line);border-radius:14px;background:var(--surface-2);
  padding:26px 24px;text-align:center;max-width:560px;margin:14px auto}
.emptybox h4{font-family:var(--serif);font-size:15.5px;margin:0 0 7px;color:var(--ink)}
.emptybox p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0 auto;max-width:46em}
.emptyacts{display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:15px}

/* A worklist card is a CLAIM; the denied lines on it are stacked inside, because they get
   corrected together and resubmitted once. */
.wl-claimnote{font-size:12px;color:var(--ink-2);margin:8px 0 2px;line-height:1.5}
.wl-claimnote.crit{color:var(--crit);font-weight:550}
.wl-expired{opacity:.72}
.wl-line{border-top:1px solid var(--line);padding:9px 0 2px;margin-top:8px}
.wl-line:first-of-type{border-top:none}
.wl-linehead{display:flex;gap:8px;align-items:center;font-size:13px;flex-wrap:wrap}

/* Responsibilities pulled out of a job description: the bullet it came from stays visible
   under each one, because "Own the daily flow" only means something next to its source. */
.jd-list{display:flex;flex-direction:column;gap:4px;padding:6px 2px 10px}
.jd-row{display:grid;grid-template-columns:auto 1fr 150px;gap:10px;align-items:start;
  padding:7px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.jd-row:hover{background:var(--surface-2)}
.jd-row.had{opacity:.55}
.jd-row input[type=checkbox]{margin-top:3px}
.jd-name{font-size:13px;line-height:1.45}
.jd-src{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.5;margin-top:2px}
.jd-row select{padding:4px 7px;font-size:12px}
.jdall{cursor:pointer;margin-left:8px}
@media (max-width:620px){.jd-row{grid-template-columns:auto 1fr}.jd-row select{grid-column:2}}

/* Overview: the squares, then what to decide. Same shape as the payer hub on purpose,
   so the two screens read as one idea rather than two dashboards. */
/* Money first, and only money: three figures, big, on one line. These are the numbers you
   want before you have finished sitting down. Deliberately flat — an amount owed is a fact,
   not a status — so the only colour is a month that has gone negative. */
.ov-money{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ovm{background:var(--surface);border:0;padding:18px 20px 17px;text-align:left;font:inherit;color:inherit;
  cursor:pointer;position:relative;transition:background .12s ease}
.ovm:hover{background:var(--surface-2)}
.ovm:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ovm .go{position:absolute;right:13px;top:15px;font-size:14px;color:var(--ink-3);opacity:0;transition:opacity .12s ease}
.ovm:hover .go,.ovm:focus-visible .go{opacity:1}
.ovm .v{font-family:var(--serif);font-size:30px;font-weight:660;line-height:1.05;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.ovm.bad .v{color:var(--crit)}
.ovm .l{font-size:12.5px;color:var(--ink-2);margin-top:7px;font-weight:550}
.ovm .s{font-size:11.5px;color:var(--ink-3);margin-top:1px}
@media (max-width:700px){.ov-money{grid-template-columns:1fr 1fr}.ovm:last-child{grid-column:span 2}}
@media (prefers-reduced-motion:reduce){.ovm,.ovm .go{transition:none}}

/* Then the counts, smaller, in one even row. Same typeface as the money above so the two
   bands read as one dashboard rather than two that happen to be stacked. */
.ov-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));
  border-bottom:1px solid var(--line);margin:0 0 4px}
.ov-stat{padding:12px 18px 13px;border-right:1px solid var(--line)}
.ov-stat:last-child{border-right:none}
.ov-stat.go{cursor:pointer}
.ov-stat.go:hover{background:var(--surface-2)}
.ov-stat.go:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ov-stat .lbl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-stat .val{font-family:var(--serif);font-size:22px;font-weight:660;line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.025em;color:var(--ink)}
.ov-stat .val.bad{color:var(--crit)} .ov-stat .val.mid{color:var(--warn)}
.ov-stat .val.good{color:var(--ink)} .ov-stat .val.dim{color:var(--ink-3)}
.ov-stat .cap{font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.4}

/* who can use a system: several people hold the same portal, so this is a set, not a pick */
.whobox{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow:auto;
  border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:var(--surface)}
.whoitem{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 2px;cursor:pointer}
.whoitem input{margin:0;flex:none}
.whoitem .dim{font-size:11.5px}

/* ── payer hub: one payer, every system that knows something about it ────────── */
.drawer.wide{width:min(820px,100%)}
.hub-head{padding:16px 20px 14px;border-bottom:1px solid var(--line)}
.hub-name{font-family:var(--serif);font-size:19px;font-weight:650;margin:0 0 3px;letter-spacing:-.01em}
.hub-meta{font-size:12.5px;color:var(--ink-2)}
.hub-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-bottom:1px solid var(--line)}
.hub-stat{padding:13px 16px;border-right:1px solid var(--line)}
.hub-stat:last-child{border-right:none}
.hub-stat .lbl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:4px}
.hub-stat .val{font-family:var(--serif);font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hub-stat .cap{font-size:11px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.hub-stat .val.bad{color:var(--crit)} .hub-stat .val.mid{color:var(--warn)} .hub-stat .val.good{color:var(--ok)}
.hub-sect{padding:14px 20px 16px;border-bottom:1px solid var(--line)}
.hub-sect:last-child{border-bottom:none}
.hub-sect h4{font-family:var(--serif);font-size:13px;margin:0 0 9px;letter-spacing:.01em}
.hub-src{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-left:6px;font-weight:400}
/* Four real columns: severity, what it is, what it costs, what to do. The amount had been
   stacked over the buttons, which wasted the width and made the figures impossible to compare
   down the list. */
/* The coloured bar down the left of every row is gone. Repeated forty times it stopped
   meaning anything and just striped the page; severity now sits as one dot beside the title,
   where the eye is already going to read the words. */
/* Three columns, fixed order: what state it is in, what it is, what you can do.
   Before this the middle column held whichever of a pill or a number the server happened to
   send, so one row showed "overdue" and the next "$151,712" in the same slot and nothing lined
   up down the page. Status now always sits first at a fixed width, which is what makes the
   column scannable; the money moved in with the text it belongs to. */
.find{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:16px;align-items:start;
  padding:14px 12px;border-top:1px solid var(--line);border-radius:10px;transition:background .1s}
.find:first-of-type{border-top:none}
.find:hover{background:var(--surface-2)}
.find .bar{display:none}
.find .fstat{padding-top:1px}
.find .fbody{min-width:0}
.find .ft{font-size:13.5px;font-weight:640;line-height:1.35;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;letter-spacing:-.01em}
.find .fw{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:2px}
/* The figure sits under its own sentence rather than in a column of its own, so it reads as
   "this is what that costs" instead of as an unexplained number floating beside the text. */
.find .fmoney{margin-top:6px;font-family:var(--serif);font-size:17px;font-weight:670;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.find .fmoney.crit{color:var(--crit)}
.find .fright{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:720px){
  .find{grid-template-columns:1fr;gap:8px}
  .find .fright{justify-content:flex-start}
}
/* The status pill is the whole of column one, so let it fill the width and read as a label. */
.find .fstat .pill{font-size:10.5px;width:100%;justify-content:center}
.hub-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.hub-row:first-of-type{border-top:none}
.hub-row .nm{flex:1;min-width:0}
.btn.dismiss{background:var(--surface);color:var(--ink-3);border-color:var(--line);box-shadow:none}
.btn.dismiss:hover{background:var(--surface-2);color:var(--ink-2)}

/* callout band: one point, stated plainly, above the thing it is about */
.banner{border:1px solid rgba(14,158,106,.30);border-left:4px solid var(--ok);border-radius:0 12px 12px 0;
  background:var(--surface);
  box-shadow:0 6px 20px rgba(14,158,106,.43),0 2px 5px rgba(14,158,106,.28);
  padding:11px 15px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.banner b{color:var(--ink-1)}
/* a warning or an error is not Opselia explaining, it is Opselia flagging: no green glow */
.banner.warn,.banner.crit,.banner.ok{box-shadow:var(--shadow-sm);border-color:var(--line)}
.banner.warn{border-left-color:var(--warn)}
.banner.crit{border-left-color:var(--crit)}
.banner.ok{border-left-color:var(--ok)}

/* On a dark background the deep emerald muddies, so the glow switches to the lighter
   emerald the dark palette already uses. data-theme must win over the OS preference. */
@media (prefers-color-scheme:dark){
  .explain-card,.banner{border-color:rgba(51,196,140,.36);
    box-shadow:0 6px 22px rgba(51,196,140,.38),0 2px 6px rgba(51,196,140,.26)}
}
:root[data-theme="dark"] .explain-card,:root[data-theme="dark"] .banner{border-color:rgba(51,196,140,.36);
  box-shadow:0 6px 22px rgba(51,196,140,.38),0 2px 6px rgba(51,196,140,.26)}
:root[data-theme="light"] .explain-card,:root[data-theme="light"] .banner{border-color:rgba(14,158,106,.30);
  box-shadow:0 6px 22px rgba(14,158,106,.45),0 2px 6px rgba(14,158,106,.30)}
:root[data-theme="dark"] .banner.warn,:root[data-theme="dark"] .banner.crit,:root[data-theme="dark"] .banner.ok,
:root[data-theme="light"] .banner.warn,:root[data-theme="light"] .banner.crit,:root[data-theme="light"] .banner.ok{
  box-shadow:var(--shadow-sm);border-color:var(--line)}
/* No colour wash on a message band: white card, coloured rule. The tinted fill is what
   read as yellow, and it fought every white card around it. */
.banner.warn{border-left-color:var(--warn);background:var(--surface)}
.banner.crit{border-left-color:var(--crit);background:var(--surface)}
.banner.ok{border-left-color:var(--ok);background:var(--surface)}
.tag.caut{background:var(--caution-bg);color:var(--caution);border-color:transparent}
.tag.crit{background:var(--crit-bg);color:var(--crit);border-color:transparent}
.tag.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}

/* prior-authorization manager (Pre-visit) — collapsible per-CPT groups */
.pa-actions{display:flex;gap:8px;margin:2px 0 10px;flex-wrap:wrap}
details.pa-group{margin-bottom:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
details.pa-group>summary{cursor:pointer;list-style-position:inside;padding:10px 14px;font-family:var(--serif);font-size:14px;font-weight:600;color:var(--accent);letter-spacing:-.01em}
details.pa-group>summary:hover{background:var(--surface-2);border-radius:10px}
details.pa-group[open]>summary{border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.pa-gtitle .mono{font-size:15px;color:var(--ink-1)}
.pa-table td{vertical-align:top}
.pa-table th:nth-child(1),.pa-table td:nth-child(1){width:20%}
.pa-table th:nth-child(3),.pa-table td:nth-child(3){width:12%}
.pa-table th:nth-child(4),.pa-table td:nth-child(4){width:12%}
/* HR: per-employee link lists, review cards, signature modal, matrix */
.hr-list{display:flex;flex-direction:column;gap:2px;margin:2px 0 12px}
.hr-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 2px;border-bottom:1px solid var(--hair,var(--line))}
.hr-row:last-child{border-bottom:0}
.hr-row .empchk{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.hr-review{border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:6px;background:var(--surface-2)}
.hr-note{font-size:12px;color:var(--ink-2);display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding-top:5px}
.signbox{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(580px,94vw);
  max-height:92vh;overflow:auto;background:var(--surface);border-radius:16px;
  box-shadow:0 24px 64px rgba(4,20,14,.28);z-index:60;animation:modal-in .16s ease-out}
.signbox header{display:flex;justify-content:space-between;align-items:flex-start;
  padding:22px 24px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--ok-bg), transparent)}
.signbox header h2{margin:0;font-family:var(--serif);font-size:21px;font-weight:700;
  letter-spacing:-.026em;color:var(--ink);line-height:1.2}
.signbox .x{background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink-3);line-height:1}
.signbody{padding:20px 24px 22px}
.signbody .field{margin-bottom:14px}
.sign-stmt{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:13px;line-height:1.5;margin-bottom:12px;white-space:normal}
.signpad{display:block;width:100%;height:180px;border:1px dashed var(--accent);border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}
.sign-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line)}
.sign-acts .btn{font-size:13.5px;padding:10px 20px}
.matrix-wrap{overflow-x:auto}
.matrix{border-collapse:collapse;font-size:12.5px}
.matrix th,.matrix td{border:1px solid var(--line);padding:6px 9px;text-align:center;white-space:nowrap}
.matrix th:first-child,.matrix td:first-child{text-align:left;position:sticky;left:0;background:var(--surface);font-weight:600;max-width:280px;white-space:normal}
.matrix thead th{background:var(--surface-2);font-size:11px}
.matrix .mx-owner{color:var(--ok);font-weight:700}
.matrix .mx-backup{color:var(--warn)}
/* Leak finder v2 — revenue context, credentialing section, money-map table */
.leak-rev{background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0;padding:10px 14px;margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.5}
.leak-rev b{color:var(--ink-1)}
.leak-cred{border:1px solid var(--crit);background:rgba(200,60,60,.06);border-radius:10px;padding:12px 14px;margin:0 0 18px}
.leak-cred-head{font-weight:700;font-size:13.5px;margin-bottom:8px;color:var(--ink-1)}
.leak-cred-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line)}
.leak-cred-row:first-of-type{border-top:0}
.leak-cred-why{font-size:12px;color:var(--ink-2);margin-top:2px}
.leak-cred-foot{font-size:11.5px;margin-top:9px;line-height:1.5}
.leak-map-head{font-weight:700;font-size:13.5px;margin:2px 0 9px}
.leak-table{width:100%;border-collapse:collapse;font-size:13px}
.leak-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
  padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.leak-row{cursor:pointer}
.leak-row>td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
.leak-row:hover>td{background:var(--surface-2)}
.leak-row td:last-child{text-align:right}
.lb-total{font-weight:700}
.leak-detail>td{padding:4px 12px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.lb{display:inline-block;padding:1px 9px;border-radius:9px;font-size:11px;font-weight:600;white-space:nowrap}
.lb-ok{background:rgba(34,160,90,.14);color:var(--ok)}
.lb-bad{background:rgba(200,60,60,.14);color:var(--crit)}
.lb-idle{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.leak-rev-code{color:var(--ok);font-weight:600;font-size:11.5px}
.pl-row{cursor:pointer}
.pl-row:hover>td{background:var(--surface-2)}
.pl-caret{color:var(--ink-3);font-size:11px;margin-left:3px}
.pl-detail>td{background:var(--surface-2);padding:7px 14px}
.pl-lines{font-size:12px;line-height:1.75;color:var(--ink-2)}
.pl-lines b{color:var(--ink-1)}
.docline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;padding:2px 0}
.docline a{font-family:var(--mono);font-size:11.5px}
.exp-old{color:var(--crit);font-weight:600}
.masked{font-family:var(--mono);color:var(--ink-3);letter-spacing:.06em}
.masked::after{content:" admin only";font-family:var(--sans);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.06em;opacity:.7}

/* Per-claim fix detail, shut until asked for. */
.wl-more{margin-top:2px}
.wl-more>summary{list-style:none;cursor:pointer;font-size:11.8px;color:var(--ink-3);
  padding:5px 0 3px;display:flex;align-items:center;gap:6px;width:fit-content}
.wl-more>summary::-webkit-details-marker{display:none}
.wl-more>summary::before{content:"";width:7px;height:7px;flex:none;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(-45deg);transition:transform .16s}
.wl-more[open]>summary::before{transform:rotate(45deg)}
.wl-more>summary:hover{color:var(--ink)}
.wl-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Bulk bar above Email review. Kept quiet, and the destructive button is a ghost rather than a
   filled one: it should be reachable without being the thing your eye lands on first. */
.rv-bulk{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:0 16px 10px}
.rv-bulk:empty{display:none}
.rv-bulk .dim{font-size:12.5px}
.rv-bulk .dim b{color:var(--ink);font-weight:650}
/* The background MUST be restated here. `.btn.danger` sets a solid red background and is only
   two classes; this rule is three, so it won the colour and lost the background — red text on a
   red button, legible only on hover. A rule that overrides one half of a pair has to override
   the other half too, or it inherits the thing it was written to replace. */
.btn.ghost.danger{background:var(--surface);color:var(--crit);
  border-color:color-mix(in srgb,var(--crit) 32%,transparent);box-shadow:none}
.btn.ghost.danger:hover{background:var(--crit-bg);color:var(--crit);
  border-color:color-mix(in srgb,var(--crit) 45%,transparent)}

/* ---------- issue cards ---------- */
.issues{display:flex;flex-direction:column;gap:10px}
/* No left band here either. One dot in the heading, and the card is otherwise plain, which
   is what lets a genuinely urgent row stand out instead of every row shouting equally. */
.issue{background:var(--surface);border:0;border-radius:12px;padding:15px 17px;box-shadow:var(--shadow)}
.issue.critical{--ic:var(--crit)}.issue.warn{--ic:var(--warn)}.issue.info{--ic:var(--info)}
.issue h3::before{content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--ic,var(--idle))}
.issue.done{opacity:.55}
.issue h3{margin:0 0 5px;font-family:var(--serif);font-size:14.5px;font-weight:640;letter-spacing:-.018em;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.issue p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.55;white-space:pre-wrap}
.issue .meta{margin-top:9px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:11px;color:var(--ink-3)}

/* ---------- drawer ----------
   This is the panel every tab opens to add or edit anything, so it sets the tone for the whole app,
   and the tone was off: a 17px title, labels in the same grey as text you are told to ignore, and a
   Save button the same size as Cancel. It read as a settings dialog from a decade ago.

   What changed: a real title, a subtle emerald wash at the top so the panel has a head rather than
   just a border, roomier fields, and a footer that makes clear which button is the one that acts. */
.scrim{position:fixed;inset:0;background:rgba(8,14,15,.5);z-index:40;backdrop-filter:blur(2px)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--surface);
  border-left:1px solid var(--line);z-index:50;display:flex;flex-direction:column;
  box-shadow:-14px 0 46px rgba(4,20,14,.24);animation:drawer-in .18s ease-out}
@keyframes drawer-in{from{transform:translateX(16px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.drawer{animation:none}}
.drawer header{padding:22px 24px 18px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:flex-start;gap:10px;
  background:linear-gradient(180deg, var(--ok-bg), transparent)}
.drawer header h2{font-family:var(--serif);font-weight:700;letter-spacing:-.026em;font-size:21px;
  margin:0;color:var(--ink);line-height:1.2}
.drawer .body{padding:20px 24px;overflow-y:auto;flex:1}
/* Sticky, because a long form used to hide its own Save button below the fold. */
.drawer footer{padding:16px 24px 20px;border-top:1px solid var(--line);display:flex;gap:10px;
  justify-content:space-between;align-items:center;background:var(--surface)}
/* The action is bigger than the way out. They were the same size, so neither looked like the point. */
.drawer footer .btn{font-size:13.5px;padding:10px 20px}
.drawer footer .btn.ghost{padding:10px 16px}
.x{all:unset;cursor:pointer;font-size:22px;line-height:1;color:var(--ink-3);padding:2px 9px 5px;
  border-radius:9px;transition:background .12s ease,color .12s ease}
.x:hover{background:var(--crit-bg);color:var(--crit)}
.x:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- modal ----------
   For decisions the browser's own confirm() states badly. A confirm() box is chrome-grey,
   shows the site's hostname above the text, cannot be laid out, and reads like a crash.
   The PHI warning is the case that matters: it is a considered check doing its job, and it
   should look like part of the app rather than something that went wrong. */
.modal-scrim{position:fixed;inset:0;background:rgba(8,14,15,.5);z-index:70;display:flex;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  width:min(540px,100%);max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 22px 64px rgba(0,0,0,.30);animation:modal-in .14s ease-out}
@keyframes modal-in{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
.modal header{padding:26px 28px 0;display:flex;gap:14px;align-items:center}
.modal header h2{font-family:var(--serif);font-weight:700;letter-spacing:-.025em;font-size:22px;
  margin:0;color:var(--ink);line-height:1.22}
/* The mark, in the product's green, masked so it follows the theme. A dialog wearing the ring
   reads as the app speaking; a yellow triangle reads as a browser error. */
.modal .glyph{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--ok-bg);font-size:0}
.modal .glyph::after{content:'';width:22px;height:22px;background-color:var(--ok);
  -webkit-mask:var(--opselia-mark) center/contain no-repeat;mask:var(--opselia-mark) center/contain no-repeat}
.modal.warn .glyph{background:var(--warn-bg)}
.modal.warn .glyph::after{background-color:var(--warn)}
.modal.crit .glyph{background:var(--crit-bg)}
.modal.crit .glyph::after{background-color:var(--crit)}
.modal .body{padding:18px 28px 8px;overflow-y:auto;font-size:15px;color:var(--ink-2);line-height:1.62}
.modal .body p{margin:0 0 14px}
.modal .body p:last-child{margin-bottom:0}
.modal .body b{color:var(--ink);font-weight:660}
/* The one line that matters, at the size it matters. */
.modal .body .lede{font-family:var(--serif);font-size:17px;font-weight:620;color:var(--ink);
  letter-spacing:-.015em;line-height:1.4}
/* what the scan actually found — labels and counts only, never a value */
.modal .found{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 15px;padding:13px 15px;
  border-radius:var(--radius-sm);background:var(--ok-bg);
  border:1px solid rgba(14,158,106,.26);font-size:14px;color:var(--ink)}
.modal.warn .found{background:var(--warn-bg);border-color:rgba(180,104,10,.26)}
.modal .found .chip{background:var(--surface);border:1px solid var(--line);border-radius:7px;
  padding:4px 11px;font-size:13.5px;color:var(--ink);font-weight:640}
.modal footer{padding:20px 28px 24px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.modal footer .btn{font-size:14px;padding:10px 20px}

/* ---------- toast + log ---------- */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);
  color:var(--paper);padding:11px 18px;border-radius:8px;font-size:13.5px;z-index:60;
  box-shadow:0 6px 26px rgba(0,0,0,.28);max-width:min(560px,92vw)}
.toast.bad{background:var(--crit);color:#fff}
.toast.warn{background:var(--warn);color:#fff}
.toast-undo{margin-left:6px;background:transparent;border:1px solid var(--paper);color:var(--paper);
  border-radius:6px;padding:3px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.toast-undo:hover{background:var(--paper);color:var(--ink)}
pre.log{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:11px 13px;
  font-family:var(--mono);font-size:11.5px;line-height:1.6;overflow-x:auto;margin:0;color:var(--ink-2)}
.spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-1px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.5s}}

/* ── renewal radar ── */
.rn-chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;
  padding:2px 9px;border-radius:20px;background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--line);white-space:nowrap}
.rn-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.rn-boardcert::before{background:#7a5af0}
.rn-malpractice::before,.rn-lifesupport::before{background:var(--crit)}
.rn-privileges::before{background:var(--caution)}
.rn-payerrevalidation::before{background:#0e9488}
.rn-attestation::before{background:#d97706}
.rn-credential::before{background:var(--ink-3)}
.rn-lead{font-size:10.5px;color:var(--warn);margin-top:3px;font-weight:600;white-space:nowrap}

/* ── service lines + multi-select ── */
.tag.line-oph,.tag.line-sl1{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.tag.line-lm,.tag.line-sl2{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.tag.line-bh,.tag.line-sl3{background:var(--caution-bg);color:var(--caution);border-color:transparent}
.tag.line-rn,.tag.line-sl4{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.linechecks{display:flex;flex-wrap:wrap;gap:8px}
.linecheck{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;
  padding:7px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  transition:border-color .12s,background .12s}
.linecheck input{width:auto;margin:0;flex:none}
.linecheck:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}

/* ── fee analysis ── */
/* explanation card — full page width; every insight/scorecard sheet gets one */
.fee-legend{font-size:12.5px;color:var(--ink-2);margin:12px 2px 14px;line-height:1.6;
  padding:11px 14px;background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--radius-sm)}
.fee-payer{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:8px;background:var(--surface);overflow:hidden}
.fee-payer>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 210px auto;gap:16px;align-items:center;padding:11px 14px}
.fee-payer>summary::-webkit-details-marker{display:none}
.fee-payer>summary:hover{background:var(--surface-2)}
.fee-name{min-width:0}.fee-name b{font-size:13.5px}
.fee-drags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.fee-drag{font-family:var(--mono);font-size:10.5px;background:var(--crit-bg);color:var(--crit);
  padding:1px 7px;border-radius:9px;white-space:nowrap}
.fee-drag b{font-weight:700}
.fee-score{display:flex;align-items:center;gap:9px}
.fee-pct{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
.fee-sub{font-size:11.5px;white-space:nowrap}
.fee-track{position:relative;flex:1;height:8px;background:var(--surface-2);border-radius:5px;min-width:90px}
.fee-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.fee-crit{background:var(--crit)}.fee-warn{background:var(--warn)}.fee-ok{background:var(--ok)}.fee-idle{background:var(--idle)}
.fee-ref{position:absolute;top:-2px;bottom:-2px;left:80%;width:2px;background:var(--ink-3);opacity:.55}
.fee-detail{width:100%;border-collapse:collapse;background:var(--surface-2)}
.fee-detail th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);text-align:left;padding:7px 14px;border-top:1px solid var(--line);white-space:nowrap}
.fee-detail td{padding:6px 14px;font-size:12.5px;border-top:1px solid var(--line)}
@media (max-width:700px){.fee-payer>summary{grid-template-columns:1fr;gap:8px}}

/* ── coverage rules ── */
.cov-hit{padding:12px 14px;border-radius:var(--radius-sm);font-size:13px;line-height:1.5;border-left:3px solid var(--line)}
.cov-bad{background:var(--crit-bg);border-left-color:var(--crit)}
.cov-warn{background:var(--warn-bg);border-left-color:var(--warn)}
.cov-ok{background:var(--ok-bg);border-left-color:var(--ok)}
.cov-none{background:var(--surface-2);border-left-color:var(--ink-3);color:var(--ink-2)}
.cov-alt{color:var(--ink-2)}
.plan-ids{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);
  background:var(--surface-2);padding:2px 9px;border-radius:9px;white-space:nowrap}
.pid{font-family:var(--mono);font-size:10.5px;color:var(--accent);background:var(--accent-soft);
  padding:1px 6px;border-radius:7px;margin-left:6px;white-space:nowrap;font-weight:600}
.period{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3)}
.period input{width:auto;padding:4px 6px;font-size:12px}

/* ── budget & P&L ── */
.ecwbox{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;margin:6px 0 4px}
/* employee checklist */
.emph3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:700;margin:18px 0 6px}
.empchecklist{display:flex;flex-direction:column;gap:5px}
.empitem{display:grid;grid-template-columns:1fr 140px 1fr;gap:8px;align-items:center}
.empchk{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;min-width:0}
.empchk input{width:auto;flex:none;margin:0}
.empitem .empdate{padding:5px 8px;font-size:12.5px}
.empdocs{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.docchip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:7px;padding:2px 4px 2px 8px;font-size:11.5px;max-width:100%}
.docchip a{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docchip .docx{all:unset;cursor:pointer;color:var(--ink-3);font-size:14px;line-height:1;padding:0 4px}
.docchip .docx:hover{color:var(--crit)}
.empitem .empupload,.empitem label.btn,.empautofile label.btn{cursor:pointer}
.empautofile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;margin:0 0 8px}
@media (max-width:560px){.empitem{grid-template-columns:1fr}}
/* collapsible employee cards */
.empcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:0 0 10px;overflow:hidden}
.empcard[open]{border-color:var(--accent-soft);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.empcard>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(130px,1.4fr) 1fr auto;
  gap:14px;align-items:center;padding:13px 16px;user-select:none}
.empcard>summary::-webkit-details-marker{display:none}
.empcard>summary::before{content:'▸';color:var(--ink-3);font-size:11px;margin-right:-6px;transition:transform .12s}
.empcard[open]>summary::before{transform:rotate(90deg)}
.empcard>summary:hover{background:var(--surface-2)}
.empcard[open]>summary{border-bottom:1px solid var(--line);background:var(--surface-2)}
.empname{font-weight:650;font-size:14px}
.emprole{color:var(--ink-2);font-size:13px}
.empprog{color:var(--ink-3);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.empdetail{padding:14px 18px 18px}
/* Providers carry one extra column: the NPI sits beside the name, because that pair is
   what you read off to a payer and what every enrollment is keyed on. */
.provcard>summary{grid-template-columns:auto minmax(150px,1.3fr) 132px 1fr auto}
.empnpi{color:var(--ink-2);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){.empcard>summary{grid-template-columns:auto 1fr auto}.emprole{display:none}
  .provcard>summary{grid-template-columns:auto 1fr auto}.empnpi{display:none}}
.accgrant .accuser,.accgrant .accurl{width:150px}
.badge-miss,.badge-deboard{display:inline-block;font-size:11px;font-weight:650;padding:1px 7px;border-radius:999px;
  background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit)}
.badge-deboard{background:transparent}
.emph3-warn{color:var(--crit)}
/* access / deboarding */
.acclist{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
/* The username is its own column, not a footnote on the system name: on offboarding day
   it is the thing you read down the list for, one account at a time. */
.accrow{display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,.8fr) auto auto;gap:10px;align-items:center;
  padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.accuname{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accrow.todo{border-color:var(--crit);background:var(--crit-bg)}
.accrow.revoked{opacity:.62}
.accportal{font-size:13px;font-weight:550}
.acc-on{color:var(--ok);font-size:12px;font-weight:600}
.acc-off{color:var(--ink-3);font-size:12px}
.accacts{display:flex;align-items:center;gap:6px}
.accgrant{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.accgrant select,.accgrant input{width:auto;padding:6px 9px;font-size:12.5px}
@media (max-width:560px){.accrow{grid-template-columns:1fr auto}.accuname{display:none}}
.provadd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.provadd .provnew{width:auto;flex:1 1 180px;max-width:260px;padding:6px 9px;font-size:12.5px}
/* denial playbook */
.pb-list{display:flex;flex-direction:column}
.pb-row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  padding:10px 12px;border-top:1px solid var(--line)}
.pb-row:first-child{border-top:none}
.pb-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;margin-bottom:3px}
.pb-action{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.pb-cpts{font-size:11.5px;margin-top:3px;display:flex;align-items:center;flex-wrap:wrap;gap:3px;color:var(--ink-2)}
.pb-rate{font-weight:700;color:var(--warn);margin-right:4px}
.den-cov{margin:0 2px 14px;font-size:12px;color:var(--ink-2)}
.den-cov-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:5px}
.den-cov-bar>span{display:block;height:100%;background:var(--ok)}
.den-cov.warn .den-cov-bar>span{background:var(--warn)}
.den-cov-txt{line-height:1.4}
/* billing cheatsheet */
.cs-chip{all:unset;cursor:pointer;font-size:12px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);white-space:nowrap}
.cs-chip:hover{background:var(--surface-2)}
.cs-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.cs-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin:0 0 7px;overflow:hidden}
.cs-card[open]{border-color:var(--accent-soft)}
.cs-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 13px}
.cs-card>summary::-webkit-details-marker{display:none}
.cs-card>summary:hover{background:var(--surface-2)}
.cs-code{font-family:var(--mono);font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap;
  background:var(--accent-soft);color:var(--accent-2)}
.cs-code.cs-denial{background:var(--crit-bg);color:var(--crit)}
.cs-code.cs-ecw{background:var(--warn-bg);color:var(--warn)}
.cs-code.cs-checklist{background:var(--ok-bg);color:var(--ok)}
.cs-ttl{font-weight:550;font-size:13.5px;flex:1;min-width:0}
.cs-cat{font-size:11px;color:var(--ink-3);white-space:nowrap}
.cs-detail{padding:4px 14px 13px;font-size:12.5px;line-height:1.55;color:var(--ink-2);border-top:1px solid var(--line)}
.cs-detail p{margin:8px 0}
.cs-fix{margin-top:8px;padding:9px 11px;background:var(--surface-2);border-left:2px solid var(--accent);border-radius:4px}
.cs-hits{font-size:11px;font-weight:650;padding:1px 8px;border-radius:999px;white-space:nowrap;
  background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn)}
.cs-gaps{background:var(--warn-bg);border:1px solid var(--warn);border-radius:var(--radius-sm);
  padding:11px 13px;margin:0 0 12px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.cs-gapbtn{all:unset;cursor:pointer;font-family:var(--mono);font-size:11.5px;font-weight:700;
  padding:2px 8px;margin:2px 2px 0 0;border-radius:4px;background:var(--surface);border:1px solid var(--warn);color:var(--warn)}
.cs-gapbtn:hover{background:var(--warn);color:#fff}
@media (max-width:560px){.cs-cat{display:none}}
/* "Fix a denial" paste box */
.fixbox{border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent-soft);padding:12px 14px}
.fixbox-head{font-size:13px;font-weight:650;color:var(--accent-2);margin-bottom:8px}
.fixbox .fix-input{width:100%;min-height:52px;font-size:13px;font-family:var(--mono);resize:vertical;
  padding:8px 10px;border-radius:var(--radius-sm)}
.fixbox-note{font-size:11px;color:var(--ink-3);margin-top:7px}
.fix-out:not(:empty){margin-top:10px;display:flex;flex-direction:column;gap:8px}
.fix-codes{font-size:11.5px;color:var(--ink-2)}
.fix-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px}
.fix-cardhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px}
.fix-none{font-size:12.5px;color:var(--ink-2);background:var(--surface);border:1px dashed var(--line);
  border-radius:var(--radius-sm);padding:9px 11px}
.phi-list{columns:2;column-gap:26px;margin:0;padding-left:22px;font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.phi-list li{break-inside:avoid;margin:0 0 2px}
@media (max-width:640px){.phi-list{columns:1}}
/* denials worklist */
.wl-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:11px 13px;margin:0 0 9px}
.wl-card.wl-done{opacity:.6}
.wl-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wl-token{font-family:var(--mono);font-size:13px;font-weight:700;padding:2px 9px;border-radius:5px;
  background:var(--accent-soft);color:var(--accent-2)}
.wl-meta{font-size:12.5px;color:var(--ink-2)}
.wl-fix{margin-top:8px;font-size:13px}
/* partial payments on bills */
.paidline{font-size:11px;color:var(--ink-3);margin-top:2px}
.paychip{white-space:nowrap;font-variant-numeric:tabular-nums}
/* Undo a payment: red, and it lifts on a red glow when you reach for it. Money moving
   back out deserves a half-beat of hesitation. */
.paydel{all:unset;cursor:pointer;color:var(--crit);font-weight:700;padding:1px 5px;font-size:12px;
  border-radius:6px;transition:background .12s,box-shadow .12s}
.paydel:hover{background:var(--crit-bg);box-shadow:0 2px 9px rgba(188,43,29,.34)}
/* bill flag toggles */
.billflags{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle}
/* Vendor name and its status chips read as one line: the chips describe the bill, so they
   belong beside the name, not stacked under it. */
.billvend{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.flagchip{all:unset;cursor:pointer;font-size:10.5px;padding:1px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-3);background:var(--surface)}
.flagchip:hover{border-color:var(--ink-3)}
/* "Recurring" and "payment plan" are FACTS about a bill, not statuses: they never ask you
   to do anything. Neutral, so the amber and red pills in the same row keep all the urgency. */
.flagchip.on{background:var(--surface-2);color:var(--ink-2);border-color:var(--ink-3);font-weight:600}
.recur-miss{display:flex;flex-wrap:wrap;gap:5px 10px;margin-top:6px;font-size:12px}
.recur-item{white-space:nowrap}
.recur-mute{all:unset;cursor:pointer;font-size:10.5px;color:var(--accent-2);padding:0 3px}
.recur-mute:hover{text-decoration:underline}
.recur-muted{margin-top:8px}
.recur-muted>summary{cursor:pointer;font-size:11.5px;color:var(--ink-3)}
/* estimator */
.est-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.est-pick select{width:auto;min-width:200px;padding:8px 10px;font-size:13px}
.est-card{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm);
  background:var(--surface-2);padding:14px 16px;margin-top:10px}
.est-amt{font-size:30px;font-weight:700;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.est-sub{font-size:12px;color:var(--ink-3);margin:2px 0 8px}
.est-rows{font-size:13px;line-height:1.7}
/* Same reasoning as .scenario-disc: a caveat is not a status, so no amber wash. */
.est-caveat{margin-top:10px;padding:9px 11px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:12px;line-height:1.5;color:var(--ink-2)}
/* pre-visit cards */
.pv-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:10px 13px;margin:0 0 7px}
.pv-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px}
.pv-amt{margin-left:auto;font-size:12px;color:var(--crit);white-space:nowrap;font-variant-numeric:tabular-nums}
.pv-action{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
/* schedule-prep SOP */
.sop-list{margin:6px 0 0;padding-left:22px}
.sop-item{margin:0 0 10px;font-size:13px;line-height:1.5}
.sop-step{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sop-acts{margin-left:6px;display:inline-flex;gap:2px}
.sop-detail{font-size:12px;margin-top:2px}
/* playbook library */
.pb-book{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin:0 0 7px;overflow:hidden}
.pb-book[open]{border-color:var(--accent-soft)}
.pb-book>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:11px 13px;font-size:13.5px}
.pb-book>summary::-webkit-details-marker{display:none}
.pb-book>summary:hover{background:var(--surface-2)}
.pb-book[open]>summary{border-bottom:1px solid var(--line)}
.pb-body{padding:12px 14px;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
/* vendor directory cards */
.vendor-tools{padding:8px 16px 2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vendor-tools #vendorSearch{flex:1;min-width:190px;padding:8px 11px;font-size:13px}
.vendor-tools select{padding:7px 10px;font-size:13px}
.vendor-cat-h{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:700;margin:18px 0 8px}
.vendor-cat-h:first-of-type{margin-top:2px}
.vendor-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:12px 14px;margin:0 0 9px}
.vendor-head{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:7px}
.vendor-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 20px;font-size:12.5px;color:var(--ink-2)}
.vendor-rows .vk{display:inline-block;min-width:88px;color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
/* bulk import mapping */
.imp-grid{display:flex;flex-direction:column;gap:5px}
.imp-row{display:grid;grid-template-columns:1fr 150px 1fr;gap:10px;align-items:center}
.imp-h{font-size:12.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-row select{padding:5px 8px;font-size:12.5px}
.imp-sample{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){.imp-row{grid-template-columns:1fr 1fr}.imp-sample{display:none}}
/* About & Help */
/* About / Help — clean, modern help center */
.help-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 22px}
.help-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;
  padding:6px 14px;font-size:12.5px;font-weight:550;cursor:pointer;white-space:nowrap;transition:all .12s}
.help-chip:hover{background:var(--surface-2);border-color:var(--accent-soft);color:var(--ink-1)}
.help-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.help-sec{margin:0 0 28px}
.help-h{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink-1);
  margin:0 0 13px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.help-list{display:flex;flex-direction:column;gap:8px}
.help-item{border:1px solid var(--line);border-radius:11px;background:var(--surface);overflow:hidden;
  transition:box-shadow .14s,border-color .14s}
.help-item:hover{border-color:var(--accent-soft)}
.help-item[open]{border-color:var(--accent-soft);box-shadow:0 3px 14px rgba(0,0,0,.055)}
.help-item>summary{list-style:none;cursor:pointer;padding:14px 17px;font-weight:600;font-size:14px;
  color:var(--ink-1);display:flex;align-items:center;justify-content:space-between;gap:12px}
.help-item>summary::-webkit-details-marker{display:none}
.help-item>summary::after{content:"";width:8px;height:8px;flex:0 0 auto;margin-right:3px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform .18s}
.help-item[open]>summary::after{transform:rotate(45deg)}
.help-item>summary:hover{color:var(--accent)}
.help-body{padding:0 17px 16px;font-size:13.5px;line-height:1.68;color:var(--ink-2)}
.help-body b{color:var(--ink-1);font-weight:650}
.help-body a{color:var(--accent)}
.pb-amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pb-amt b{font-size:15px;color:var(--crit)}
.pb-amt .dim{display:block;font-size:11px}
@media (max-width:560px){.pb-row{flex-direction:column;gap:4px}.pb-amt{text-align:left}}
.cob-note{margin:0 2px 16px;font-size:12.5px}
.cob-note>summary{cursor:pointer;color:var(--accent);font-weight:600}
.cob-note>div{margin-top:8px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius-sm);color:var(--ink-2);line-height:1.5}
.snap-box{margin:0 2px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.snap-box>summary{cursor:pointer;font-weight:650;font-size:13px;padding:10px 12px}
.snap-body{padding:0 12px 12px}
.sc-verdict{margin:2px 2px 16px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface-2);border-left:3px solid var(--accent);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.sc-verdict.good{border-left-color:var(--ok)}
.sc-verdict.warn{border-left-color:var(--warn)}
.sc-vhead{font-size:14px;font-weight:650;color:var(--ink);margin-bottom:6px}
.sc-verdict.good .sc-vhead{color:var(--ok)}
.sc-verdict p{margin:6px 0}
.sc-verdict ul{margin:6px 0;padding-left:18px}
.sc-verdict li{margin:4px 0}
.qadd{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 0 4px}
.qadd input,.qadd select{width:auto;padding:6px 9px;font-size:13px}
.catbar{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:12.5px}
.catname{flex:0 0 40%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catbg{flex:1;height:8px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.catfill{display:block;height:100%;background:var(--accent);border-radius:5px}
.catamt{flex:0 0 auto;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* ledger: spreadsheet grid — vendor rows × month columns */
.ledsec-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:20px;
  padding:18px 4px 10px;margin-top:20px;border-top:2px solid var(--ink-3)}
.ledgrid{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ledgrid th{padding:6px 10px;text-align:right;font-size:10px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink-3);border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:2}
.ledgrid th.ledv{text-align:left}
.ledgrid td{padding:5px 10px;text-align:right;border-bottom:1px solid var(--line)}
.ledgrid td.ledv{text-align:left;font-weight:500}
.ledgrid th.ledv,.ledgrid td.ledv{position:sticky;left:0;background:var(--surface);z-index:1;
  min-width:150px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.ledgrid-cat td{background:var(--surface-2);font-weight:700;text-transform:uppercase;font-size:10px;
  letter-spacing:.05em;color:var(--accent);text-align:left;padding:7px 10px;position:sticky;left:0}
.ledgrid-row{cursor:pointer}
.ledgrid-row:hover td{background:var(--surface-2)}
.ledgrid-row:hover td.ledv{background:var(--surface-2)}
.ledtot{font-weight:700}
.ledgrid-sub td{border-top:2px solid var(--line);border-bottom:2px solid var(--line);font-weight:600;color:var(--ink-2)}
.ledgrid-sub td:first-child{font-style:italic;background:var(--surface)}
.ledgrid-detail td{background:var(--surface-2);white-space:normal;text-align:left;padding:8px 12px}
.ledtx-item{display:inline-block;background:var(--surface);border:1px solid var(--line);border-radius:6px;
  padding:2px 8px;margin:2px 5px 2px 0;cursor:pointer;font-family:var(--mono);font-size:11.5px}
.ledtx-item:hover{border-color:var(--accent);color:var(--accent)}
.ledv-add{display:inline-block;color:var(--accent);font-weight:700;margin-right:6px;opacity:.4;transition:opacity .12s}
.ledgrid-row:hover .ledv-add{opacity:1}
.ledadd-row td{background:var(--surface-2);white-space:normal;text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
.ledadd-form{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ledadd-form .la-title{margin-right:2px}
.ledadd-form input{padding:5px 8px;font-size:12.5px}
.ledgrid .ledgrp{color:var(--ink-3);background:var(--surface-2)}
.ledgrid th.ledgrp{font-style:italic}
.rn-group{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;
  overflow:hidden;background:var(--surface)}
.rn-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:11px 14px;font-weight:600;user-select:none}
.rn-group>summary::-webkit-details-marker{display:none}
.rn-group>summary:hover{background:var(--surface-2)}
.rn-group:has(.g-crit)>summary{box-shadow:inset 3px 0 0 var(--crit)}
.rn-group:has(.g-warn)>summary{box-shadow:inset 3px 0 0 var(--warn)}
.rn-gtitle{font-size:13px}
.rn-gtitle.g-crit{color:var(--crit)} .rn-gtitle.g-warn{color:var(--warn)}
.rn-gtitle.g-mid{color:var(--ink)} .rn-gtitle.g-calm{color:var(--ink-3)}
.rn-gcount{font-family:var(--mono);font-size:11px;background:var(--surface-2);color:var(--ink-3);
  padding:1px 8px;border-radius:9px;font-variant-numeric:tabular-nums}
/* fixed layout + shared colgroup so columns line up across every bill group */
.rn-table{width:100%;border-collapse:collapse;table-layout:fixed}
.rn-table td{padding:9px 14px;border-top:1px solid var(--line);vertical-align:middle;font-size:13px}
.rn-table th{padding:7px 14px;border-top:1px solid var(--line);text-align:left;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);white-space:nowrap}
.rn-table tr:hover td{background:var(--surface-2)}
/* fixed column widths so long plan names wrap in their own cell instead of overprinting Payer ID */
.rn-table th:nth-child(1),.rn-table td:nth-child(1){width:30%}
.rn-table th:nth-child(2),.rn-table td:nth-child(2){width:14%}
.rn-table th:nth-child(3),.rn-table td:nth-child(3){width:17%}
.rn-table th:nth-child(4),.rn-table td:nth-child(4){width:13%}
.rn-table th:nth-child(5),.rn-table td:nth-child(5){width:13%}
.rn-table th:nth-child(6),.rn-table td:nth-child(6){width:13%}
/**
 * The RENEWALS calendar, which reuses .rn-table but has nothing like its columns.
 *
 * .rn-table above was written for Fee analysis, where column 1 is a payer name and 30% is right.
 * The renewals calendar puts a short category chip there instead, so 30% left a finger-wide empty
 * gap between the chip and the item it belongs to, and pushed the dates and status halfway across
 * the screen. The name is the thing being read, so it gets the room.
 *
 * Fixed pixel widths for the columns whose content has a known maximum (a chip, a date, a "in
 * 34d" pill, one button) and the remainder to the name, which is the one that genuinely varies.
 */
/* Same reasoning as .rn-bills: four fixed columns plus one auto column collapses the auto one to
   nothing on a narrow window. Below this width the table scrolls sideways instead of crushing
   the credential name into a vertical column of letters. */
.rn-table.rn-cal{min-width:640px}
.rn-table.rn-cal td:nth-child(1){width:132px}
.rn-table.rn-cal td:nth-child(2){width:auto}
.rn-table.rn-cal td:nth-child(3){width:150px}
.rn-table.rn-cal td:nth-child(4){width:118px}
.rn-table.rn-cal td:nth-child(5){width:76px}
/* The name wraps rather than being clipped; a truncated credential name is unreadable. */
.rn-table.rn-cal td:nth-child(2){white-space:normal;overflow-wrap:anywhere}
/* The date column carries a "start by" line underneath, so it must not be forced onto one line. */
.rn-table.rn-cal td:nth-child(3){white-space:normal;overflow:visible;text-overflow:clip}

.rn-table td:first-child{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.rn-table td:last-child{white-space:nowrap}
.rn-table td:nth-child(2){word-break:break-word}
.rn-table td:nth-child(3),.rn-table td:nth-child(4){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* flexible date field: text box (any format) + a calendar picker button */
.datewrap{display:flex;align-items:center;gap:4px}
.datewrap>[data-datefield]{flex:1;min-width:0}
.datebtn{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:5px 7px;
  cursor:pointer;font-size:14px;line-height:1}
.datebtn:hover{background:var(--surface-2)}
.datehidden{width:1px;height:1.4em;opacity:0;border:0;padding:0;margin:0;flex:0 0 1px;pointer-events:none}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto}
  main{padding:18px 14px 60px}.row2{grid-template-columns:1fr}
}
.leak-period{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--ink-2)}
.leak-period b{color:var(--ink-1)}
.fin-year-bar{display:flex;align-items:center;gap:12px;margin:2px 0 12px;padding:0 2px;flex-wrap:wrap}
.fin-year-wrap{font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center}
.fin-year{padding:5px 9px;font-size:13px;font-weight:600}
.fin-year-static{display:inline-block;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:4px 11px;font-size:12.5px;font-weight:700;color:var(--ink-1)}

/* Trends & forecast */
.tc-row{display:flex;gap:16px;flex-wrap:wrap;margin:4px 0 6px}
.tc-wrap{flex:1;min-width:300px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:10px 12px}
.tc-title{font-size:12.5px;font-weight:600;color:var(--ink-1);margin-bottom:4px}
.tc-svg{width:100%;height:auto;display:block}
.tc-grid{stroke:var(--line);stroke-width:1}
.tc-yl{fill:var(--ink-3);font-size:9px;text-anchor:end}
.tc-xl{fill:var(--ink-3);font-size:9px;text-anchor:middle}
.tc-prev{fill:none;stroke:var(--ink-3);stroke-width:1.5;opacity:.55}
.tc-cur{fill:none;stroke:var(--accent);stroke-width:2.5}
.tc-proj{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:4 4;opacity:.7}
.tc-legend{font-size:12px;color:var(--ink-2);margin:2px 0 8px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tc-k{display:inline-block;width:16px;height:0;border-top:3px solid;margin-right:4px;vertical-align:middle}
.tc-kp{border-color:var(--ink-3)}.tc-kc{border-color:var(--accent)}.tc-kj{border-top-style:dashed;border-color:var(--accent)}
.goal-card{border:1px solid var(--accent-soft);border-radius:11px;background:var(--surface-2);padding:14px 16px;margin:14px 0}
.goal-head{font-size:14px;margin-bottom:11px;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.goal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:10px}
.goal-grid .gk{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.goal-grid .gv{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.goal-note{font-size:13px;line-height:1.6;color:var(--ink-2);padding:9px 11px;background:var(--surface);border-radius:8px;border:1px solid var(--line)}
.goal-note.ok{border-color:var(--ok)}
.goal-levers{margin-top:12px}
.gl-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-bottom:6px}
.gl-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:5px 0;border-top:1px dashed var(--line);font-size:13px}
.gl-row b{font-variant-numeric:tabular-nums}
.yoy-cat{flex:1;min-width:300px}
.yoy-cat h3{font-size:13.5px;margin:0 0 8px}

/* Setup wizard */
.wizard{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:70;width:min(560px,94vw);
  max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.32)}
.wz-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.wz-steps{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap}
.wz-dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line);font-size:11px;font-weight:700}
.wz-dot.on{background:var(--accent);border-color:var(--accent);color:#fff}
.wz-dot.done{background:var(--ok);border-color:var(--ok);color:#fff}
.wz-dl{margin-right:2px}
.wz-sep{width:14px;height:1px;background:var(--line)}
.wz-x{background:none;border:0;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer}
.wz-body{padding:18px}
.wz-body h2{font-size:18px;margin:0 0 4px}
.wz-sub{font-size:13px;color:var(--ink-2);line-height:1.55;margin:0 0 16px}
.wz-body .field{margin-bottom:12px}
.wz-next{margin:6px 0 12px;padding-left:18px;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.wz-next b{color:var(--ink-1)}
.wz-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-top:1px solid var(--line)}

/* Scenario planner (what-if: add a provider) */
.scenario-toggle{margin:16px 0 0}
.scenario-card{border:1px solid var(--accent-soft);border-radius:12px;background:var(--surface-2);padding:14px 16px;margin:16px 0 0}
.scenario-head{display:flex;align-items:center;font-size:14px;margin-bottom:12px}
.scenario-cpts{margin:4px 0 12px}
.scen-table{width:100%;border-collapse:collapse;font-size:12.5px}
.scen-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding:3px 6px;border-bottom:1px solid var(--line)}
.scen-table td{padding:3px 6px;border-bottom:1px solid var(--line)}
.scen-table input{padding:3px 6px;font-size:12.5px}
.scenario-inputs{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 14px}
.scenario-inputs .field{margin:0}
.scenario-inputs label{font-size:11px}
.scenario-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:12px;background:var(--surface);border-radius:9px;border:1px solid var(--line)}
.scen-metric .sk{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.scen-metric .sv{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
/* Was var(--warnbg)/var(--warnln): neither token exists, so both fell through to a
   hard-coded gold. A caveat about how a projection was built is not a status, so it is
   flat now, like every other explanatory note. */
.scenario-disc{margin-top:11px;font-size:12px;line-height:1.55;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
.scenario-disc b{color:var(--ink-1)}

/* Scenario profit waterfall */
.scenario-waterfall{margin:12px 0;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:9px;max-width:420px}
.wf-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px;font-variant-numeric:tabular-nums}
.wf-row.minus{color:var(--ink-2)}
.wf-row.net{border-top:1.5px solid var(--line);margin-top:3px;padding-top:7px;font-size:14.5px}

/* Next-year (out-year) outlook */
.nextyear-card{border:1px dashed var(--accent-soft);border-radius:12px;background:var(--surface);padding:14px 16px;margin:16px 0 0}
.ny-head{display:flex;align-items:center;font-size:14px}

/* Denials worklist: whose pile am I looking at. A shared queue only works if you can see
   one person's slice of it, otherwise three billers work the same claim. */
.wl-who{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.wl-who .tag{cursor:pointer;border:1px solid var(--line);background:var(--surface)}
.wl-who .tag.on{background:var(--accent-soft);color:var(--accent);border-color:transparent;font-weight:650}
.wlassign{padding:2px 6px;font-size:11.5px;max-width:150px}
/* Assign in bulk: the name goes in once, then you tick claims. */
.wl-assign{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;margin:0 0 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.wl-assign input{width:auto;max-width:190px;padding:5px 9px;font-size:12.5px}

.wl-selcount{font-size:12px}
.wlpick{margin:0 2px 0 0;flex:none}
.wl-money{font-family:var(--serif);font-size:14px;font-weight:660;font-variant-numeric:tabular-nums;color:var(--ink)}

/* The bar reads left to right as one sentence: who, then what to do with the ticked ones,
   then how many. The select controls sit right, away from the destructive one. */
.wl-assign{gap:10px}
.wl-assign .btn{white-space:nowrap}
.wl-selcount{font-size:12.5px;align-self:center}


/* ═══════════════════════════════════════════════════════════════════
   Overview — the four cards.

   One card per nav group, so the first screen answers "what is the state
   of the practice" rather than "here are some numbers". Each card owns a
   hue; that hue is the ONLY colour on it, so the palette stays a wayfinding
   device and never becomes decoration. Status colour (crit / warn / ok) is
   separate and still means status, exactly as everywhere else.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --h1a:#FF6B5B; --h1b:#D62E4A;   /* needs attention */
  --h2a:#7B7BF5; --h2b:#4F46E5;   /* records */
  --h3a:#22C99B; --h3b:#0E9E6A;   /* billing */
  --h4a:#FFB547; --h4b:#E07C1F;   /* finance */
  --ov-lift:0 1px 2px rgba(17,24,38,.05), 0 18px 44px -24px rgba(17,24,38,.30);
}
@media (prefers-color-scheme:dark){:root{
  --h1a:#FF8175; --h1b:#E8556E; --h2a:#9A9AFF; --h2b:#6D64F0;
  --h3a:#3FDCAE; --h3b:#1FBF86; --h4a:#FFC369; --h4b:#F0983A;
  --ov-lift:0 1px 2px rgba(0,0,0,.4), 0 20px 48px -26px rgba(0,0,0,.9);
}}
:root[data-theme="dark"]{
  --h1a:#FF8175; --h1b:#E8556E; --h2a:#9A9AFF; --h2b:#6D64F0;
  --h3a:#3FDCAE; --h3b:#1FBF86; --h4a:#FFC369; --h4b:#F0983A;
  --ov-lift:0 1px 2px rgba(0,0,0,.4), 0 20px 48px -26px rgba(0,0,0,.9);
}
:root[data-theme="light"]{
  --h1a:#FF6B5B; --h1b:#D62E4A; --h2a:#7B7BF5; --h2b:#4F46E5;
  --h3a:#22C99B; --h3b:#0E9E6A; --h4a:#FFB547; --h4b:#E07C1F;
  --ov-lift:0 1px 2px rgba(17,24,38,.05), 0 18px 44px -24px rgba(17,24,38,.30);
}

/* Three across on a wide screen rather than two. The old minmax(400px) produced two enormous
   cards that each had to be read in full; at this width the set can be taken in at a glance. */
/* ---------- Overview: one card per category ----------
   Three across, ranked hardest-first, matching the signed-off mock. The category identifies
   itself with a single dot; colour is kept for urgency, so four cards side by side no longer
   throw four competing hues at you before a number has been read. There is deliberately no
   coloured bar along the card edge: it is the most over-used device in dashboards right now,
   and it dates a product fast. */
/* Fixed three across, never auto-fit. auto-fit fits as many as will go, which left six cards as
   4 + 2 on a wide screen and the short row read as something having failed to load. Three is a
   count every card set here is built to be a multiple of. */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:4px 0 20px}
@media (max-width:1080px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.cats{grid-template-columns:1fr}}
.cat{background:var(--surface);border:0;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:17px 18px 15px;display:flex;flex-direction:column;text-align:left;font:inherit;color:inherit;
  cursor:pointer;min-width:0;transition:transform .16s,box-shadow .16s}
.cat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.cat:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.cat-who{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:800;
  display:flex;align-items:center;gap:7px}
.cat-who i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;display:block}
.cat[data-sev="crit"] .cat-who i{background:var(--crit)}
.cat[data-sev="warn"] .cat-who i{background:var(--warn)}
.cat[data-sev="calm"] .cat-who i{background:var(--info)}
/* A solid numeral, so its colour can carry a state. Gradient-clipped text looked identical
   whether the figure was good news or a fire, which meant the colour said nothing at all. */
.cat-fig{font-family:var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.045em;
  font-weight:680;font-size:40px;line-height:1;color:var(--ink);margin:11px 0 3px;
  overflow-wrap:anywhere}
.cat[data-sev="crit"] .cat-fig{color:var(--crit)}
.cat-lbl{font-size:13px;font-weight:650;color:var(--ink)}
.cat-cap{font-size:11.8px;color:var(--ink-3);line-height:1.45;margin-top:2px}
.cat-act{font-size:12px;font-weight:650;color:var(--ok);margin-top:11px}
.cat:hover .cat-act{text-decoration:underline}
/* A card that only reports a number does not pretend to be pressable. */
div.cat{cursor:default}
div.cat:hover{transform:none;box-shadow:var(--shadow)}
/* "62 of 69": the ratio is the sentence, so the denominator is set down rather than shouted. */
.cat-of{font-size:.5em;font-weight:600;letter-spacing:-.01em;color:var(--ink-3)}
.sc-cats{padding:2px 0 16px}
/* On the verdict pages every card IS a verdict, so the figure carries the colour: green good,
   gold worth watching, red acting on. Scoped to .sc-cats deliberately. Overview keeps colour for
   genuine urgency only, because there a green figure beside a red one would read as praise for
   a number that is merely normal. Here, "62 of 69 pay at Medicare" really is good news. */
.sc-cats .cat[data-sev="ok"] .cat-fig{color:var(--ok)}
.sc-cats .cat[data-sev="warn"] .cat-fig{color:var(--warn)}
.sc-cats .cat[data-sev="crit"] .cat-fig{color:var(--crit)}
.sc-cats .cat[data-sev="ok"] .cat-who{color:var(--ok)}
.sc-cats .cat[data-sev="warn"] .cat-who{color:var(--warn)}
.sc-cats .cat[data-sev="crit"] .cat-who{color:var(--crit)}
/* A tint on the card itself, kept very light: enough to group the good from the bad at a glance
   across two rows, not enough to turn the page into a traffic light. */
.sc-cats .cat[data-sev="ok"]{background:color-mix(in srgb,var(--ok) 5%,var(--surface))}
.sc-cats .cat[data-sev="warn"]{background:color-mix(in srgb,var(--warn) 6%,var(--surface))}
.sc-cats .cat[data-sev="crit"]{background:color-mix(in srgb,var(--crit) 5%,var(--surface))}
.ov-dated{margin:0 0 22px}
/* Category labels stay colourless on purpose. Colour on this page already means urgency, and a
   category is a label rather than a state: giving Finance a hue would read as a warning. */
.pill.p-cat{background:none;border:1px solid var(--line);color:var(--ink-2);font-weight:650}
.pill.p-cat::before{display:none}
@media (max-width:760px){
  .cats{grid-template-columns:1fr;padding:4px 0 18px}
  .cat-fig{font-size:34px}
  .ov-dated{margin:0 0 18px}
}
@media (prefers-reduced-motion:reduce){.cat{transition:none}.cat:hover{transform:none}}
/* ---------- "this is a suggestion" mark ----------
   Every page that computes a conclusion carries one. Not decoration and not legal boilerplate:
   it names WHAT was calculated, from WHICH import, and over how much of the data, so somebody
   reading a percentage knows what it rests on before acting on it.

   Deliberately quiet. A red warning banner on every tab is scrolled past within a week, and then
   it protects nobody. This reads as a caption, which is what gets read. */
.calcnote{display:flex;gap:9px;align-items:flex-start;margin:0 0 16px;padding:10px 13px;
  background:var(--surface-2);border-radius:10px;font-size:12.2px;color:var(--ink-3);line-height:1.5}
.calcnote svg{width:14px;height:14px;flex:none;margin-top:2px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}
.calcnote b{color:var(--ink-2);font-weight:650}
.calcnote .src{display:block;margin-top:3px;font-size:11.5px}

/* Mailbox row fields: editable without looking like a form. */
.mbox-f{width:100%;border:1px solid transparent;background:none;border-radius:7px;padding:5px 8px;
  font:inherit;font-size:12.8px;color:var(--ink)}
.mbox-f:hover{border-color:var(--line);background:var(--surface)}
.mbox-f:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.mbox-addr{font-weight:600}

/* The completion-condition picker. Options read as sentences, because the question is what
   would ANSWER the task, not which table to query. */
/* ── "What would answer this" ──
   A native radio was doing the work: a small grey circle taking a whole column, the sentence shoved
   to the right of it, everything in grey. Each option is a ROW you press now. The radio is still
   there for the keyboard and the form, just not the thing you look at: selection is the emerald
   edge, the tick, and the text going dark. */
.cond-list{display:flex;flex-direction:column;gap:7px}
.cond-opt{position:relative;display:block;padding:13px 15px 13px 42px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;
  font-family:var(--serif);font-size:14px;font-weight:560;line-height:1.4;color:var(--ink-2);
  transition:border-color .12s ease,color .12s ease,box-shadow .12s ease}
.cond-opt:hover{border-color:var(--ink-3);color:var(--ink)}
/* The real radio: reachable by keyboard and screen reader, invisible to the eye. */
.cond-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
/* The mark we draw instead. */
.cond-opt span::before{content:'';position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);
  transition:border-color .12s ease,background .12s ease}
.cond-opt span::after{content:'';position:absolute;left:20px;top:50%;
  transform:translateY(-50%) scale(0);width:7px;height:7px;border-radius:50%;background:#fff;
  transition:transform .12s ease}
/* The tick, driven by the sibling selector so it works everywhere, not only where :has() does. */
.cond-opt input:checked + span::before{border-color:var(--ok);background:var(--ok)}
.cond-opt input:checked + span::after{transform:translateY(-50%) scale(1)}
.cond-opt input:checked + span{color:var(--ink);font-weight:640}
/* :has() only decorates the row around it, so a browser without it still shows the selection. */
.cond-opt:has(input:checked){border-color:var(--ok);color:var(--ink);
  box-shadow:0 0 0 1px var(--ok) inset,0 4px 14px rgba(14,158,106,.13)}
.cond-opt:has(input:focus-visible){outline:2px solid var(--ok);outline-offset:2px}
/* "Nothing to check" is a real answer, not a lesser one, so it reads the same. It only gets a rule
   above it to say it is the other kind of answer. */
.cond-opt:last-child{margin-top:5px}

/* The save control. Deliberately the same shape as the "What report do I need?" pill it sits
   beside: two popovers on one line that behaved differently would read as two unrelated features.
   It sits at the right-hand end of the meta line, out of the way of the facts. */
.savep{position:relative;margin-left:auto}
.savep>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;
  padding:3px 11px;background:var(--bg-1);white-space:nowrap}
.savep>summary::-webkit-details-marker{display:none}
.savep>summary::before{content:'';width:11px;height:11px;flex:none;background:currentColor;
  -webkit-mask:var(--ico-save) center/contain no-repeat;mask:var(--ico-save) center/contain no-repeat}
.savep>summary:hover,.savep[open]>summary{color:var(--ink-1);border-color:var(--ink-3)}
.save-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:min(330px,80vw);
  background:var(--bg-1);border:1px solid var(--line);border-radius:10px;padding:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);display:flex;flex-direction:column;gap:2px}
.save-panel .sv{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:9px 10px;border-radius:7px;font:inherit;color:var(--ink-2)}
.save-panel .sv:hover{background:var(--bg-2)}
.save-panel .sv b{display:block;font-size:12.5px;font-weight:600;color:var(--ink-1);margin-bottom:2px}
.save-panel .sv span{display:block;font-size:11.5px;line-height:1.45;color:var(--ink-3)}
:root{--ico-save:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E")}
/* In a tab header the control sits among real buttons, so it takes their height and weight rather
   than staying a wispy pill next to them. It keeps the pill outline: it opens a menu, it does not
   perform an action, and looking identical to "Add entry" would promise that it does. */
.th-acts .savep>summary,.sechead .savep>summary{padding:5px 11px;font-size:12px;border-radius:7px}
.th-row>.savep,.sechead>.savep{align-self:center}
/* The few panels with no header of any kind get a bar of their own. */
.savebar{display:flex;justify-content:flex-end;padding:14px 24px 0}

/* The provenance line at the foot of a printout: which file, imported when, which service year.
   A printed page of dollar figures with no source stated is the one quoted back as current. */
.printfoot{margin:26px 0 0;padding-top:10px;border-top:1px solid #ddd;color:#555;font-size:11px}

/* ══ BILLING, REDESIGNED ══════════════════════════════════════════════════════
   Ported from the approved mock. The shape of every Billing tab is now:

       meta line   which file this is reading, and the "what report do I need" pill
       answer      one big figure and one sentence, with the workings behind a ?
       picture     the chart that carries the finding
       detail      the table

   What this replaced: four to six grey cards per tab, two to four paragraphs of
   always-open prose, and a formula strip. The founder's words were "the page is
   very busy, different fonts, colours are not great, so many words and grey
   cards". Every rule below exists to answer one of those.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the meta line ───────────────────────────────────────────────────────── */
.bmeta{display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;margin:0 0 20px;
  padding-bottom:13px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.bmeta .f{display:inline-flex;align-items:center;gap:6px}
.bmeta .f b{color:var(--ink-2);font-weight:620;font-variant-numeric:tabular-nums}
.bmeta .file{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.bmeta .sep{color:var(--line)}

/* The import pill. Reference somebody needs once at setup, so it sits at the end
   of the meta line rather than owning a fifth of the page forever. */
.needs{margin-left:auto;position:relative}
.needs > summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:12px;color:var(--ink-3);border:1px solid var(--line);border-radius:99px;
  padding:3px 11px;white-space:nowrap;transition:color .13s,border-color .13s}
.needs > summary::-webkit-details-marker{display:none}
.needs > summary::before{content:'';width:11px;height:11px;flex:0 0 auto;border-radius:2px;
  border:1.5px solid currentColor;opacity:.6}
.needs > summary:hover,.needs[open] > summary{color:var(--ink-2);border-color:var(--ink-3)}
.needs-panel{position:absolute;z-index:30;margin-top:9px;right:0;width:min(560px,calc(100vw - 46px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:17px 19px}
.needs-panel h4{margin:0 0 3px;font-size:13.4px;font-weight:640;color:var(--ink)}
.needs-panel > p{margin:0 0 13px;font-size:12.4px;color:var(--ink-3);line-height:1.55}
.needs-panel .hint{margin:0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.3px;color:var(--ink-2);line-height:1.6}
.needs-panel .hint b{color:var(--ink)}
.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px 16px;margin:0 0 12px}
.col-i{display:flex;align-items:baseline;gap:8px;font-size:12.4px;color:var(--ink-2)}
.col-i code{font-family:var(--mono);font-size:11.5px;color:var(--ink);background:var(--surface-2);
  padding:1px 6px;border-radius:4px;white-space:nowrap}
.col-i .must{color:var(--crit);font-weight:700;font-size:10px}
.col-i .gets{color:var(--ink-3);font-size:11.3px}

/* ── the answer line ─────────────────────────────────────────────────────── */
.answer{margin:0 0 24px}
.answer .fig{font-family:var(--serif);font-size:44px;font-weight:700;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums;display:block;margin-bottom:7px;color:var(--ink)}
.answer .fig.warn{color:var(--warn)} .answer .fig.crit{color:var(--crit)}
.answer .fig.ok{color:var(--ok)}
.answer p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55}
.answer p b{color:var(--ink);font-weight:620}

/* The workings, behind a ?. Every word of the old explanations is still here. */
.workings{margin:14px 0 0}
.workings > summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:12.8px;color:var(--ink-3);border:1px solid var(--line);border-radius:99px;
  padding:4px 12px;transition:color .13s,border-color .13s}
.workings > summary::-webkit-details-marker{display:none}
.workings > summary::before{content:'?';font-weight:700;font-size:11px;width:14px;height:14px;
  border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-2)}
.workings[open] > summary::before{content:'\2212'}
.workings > summary:hover{color:var(--ink-2);border-color:var(--ink-3)}
.workings-body{margin-top:12px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:13.6px;line-height:1.62;color:var(--ink-2)}
.workings-body p{margin:0 0 9px} .workings-body p:last-child{margin:0}
.workings-body b{color:var(--ink);font-weight:620}

/* ── section rhythm. One heading size, one caption size, nothing else. ───── */
.bsec{margin:0 0 30px}
.bsec > h3{font-family:var(--serif);font-size:16px;font-weight:640;letter-spacing:-.012em;
  margin:0 0 3px;color:var(--ink)}
.bsec > p.sub{margin:0 0 14px;font-size:13.4px;color:var(--ink-3)}
.bsec > p.note{font-size:12.6px;color:var(--ink-3);margin:11px 0 0;line-height:1.6}
.bsec > p.note b{color:var(--ink-2)}

/* ── donuts ──────────────────────────────────────────────────────────────── */
.donuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.donut-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px 16px;box-shadow:var(--shadow-sm);text-align:center}
.donut{width:132px;height:132px;border-radius:50%;margin:0 auto 14px;position:relative;
  display:grid;place-items:center}
.donut::after{content:'';position:absolute;inset:19px;border-radius:50%;background:var(--surface)}
.donut b{position:relative;z-index:1;font-family:var(--serif);font-size:25px;font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.donut b small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.donut-card h4{font-size:13.6px;font-weight:620;margin:0 0 3px;color:var(--ink)}
.donut-card .amt{font-size:12.4px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin:0 0 12px}
.dkey{display:flex;flex-direction:column;gap:5px;text-align:left;
  border-top:1px solid var(--line);padding-top:11px}
.dkey div{display:flex;align-items:center;gap:7px;font-size:12.2px;color:var(--ink-2)}
.dkey i{width:9px;height:9px;border-radius:2.5px;flex:0 0 auto}
.dkey span{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* Government money is the rail's slate; negotiable money is the product's green. */
.c-gov{background:#3F4C5C} .c-ok{background:var(--ok)} .c-warn{background:var(--warn)}
.c-line{background:var(--line)} .c-crit{background:var(--crit)}
:root[data-theme="dark"] .c-gov{background:#77828F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .c-gov{background:#77828F}}

/* ── the scale: every plan on one axis ───────────────────────────────────── */
.scaleq{margin:4px 0 0}
.scaleq-plot{position:relative;height:206px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.sq-tick{position:absolute;top:0;bottom:22px;width:1px;background:var(--line)}
.sq-tick em{position:absolute;bottom:-19px;left:0;transform:translateX(-50%);font-style:normal;
  font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sq-ref{position:absolute;top:0;bottom:22px;width:2px;border-radius:1px;z-index:3}
.sq-ref em{position:absolute;top:8px;left:7px;font-style:normal;white-space:nowrap;font-size:10.5px;
  font-weight:640;padding:3px 8px;border-radius:6px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.sq-ref em b{display:block;font-size:12.5px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sq-ref-a{background:var(--ink-3)} .sq-ref-a em{color:var(--ink-2)}
.sq-ref-b{background:var(--ok)}
.sq-ref-b em{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.sq-dot{position:absolute;border-radius:50%;transform:translate(-50%,-50%);z-index:2;
  border:1.5px solid var(--surface);transition:transform .12s ease}
.sq-dot:hover{transform:translate(-50%,-50%) scale(1.18);z-index:4}
.sq-gov{background:color-mix(in srgb,#3F4C5C 72%,transparent)}
.sq-ok{background:color-mix(in srgb,var(--ok) 78%,transparent)}
.sq-low{background:color-mix(in srgb,var(--crit) 76%,transparent)}
@media (prefers-reduced-motion:reduce){.sq-dot{transition:none}}

/* ── ranked bars, with the benchmark drawn INSIDE each track ─────────────── */
.rankb{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-sm)}
.rb-row,.rb-head{display:grid;grid-template-columns:minmax(104px,1.3fr) minmax(80px,3fr) 50px 78px;
  gap:11px;align-items:center}
.rb-head{margin:0 0 4px;font-size:10px;font-weight:640;color:var(--ink-2)}
.rb-head .ax{position:relative;height:14px}
.rb-head .ax i{position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line)}
.rb-head .ax b{position:absolute;transform:translateX(-50%);white-space:nowrap;
  background:var(--surface);padding:0 5px}
.rb-row{padding:4px 0;font-size:12.8px}
.rb-name{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-track{position:relative;height:15px;border-radius:4px;background:var(--surface-2)}
.rb-fill{position:relative;z-index:1;display:block;height:100%;border-radius:4px;min-width:2px}
/* Exact by construction: the track IS the scale, so a line at 33% of it is 100% of Medicare on
   every row. The first version positioned this against the whole card with a guessed multiplier
   and drifted as soon as a plan name got longer. */
.rb-bm{position:absolute;top:-3px;bottom:-3px;width:2px;z-index:2;
  background:color-mix(in srgb,var(--ink) 42%,transparent)}
.rb-ok{background:color-mix(in srgb,var(--ok) 72%,transparent)}
.rb-warn{background:color-mix(in srgb,var(--warn) 72%,transparent)}
.rb-crit{background:color-mix(in srgb,var(--crit) 72%,transparent)}
.rb-gov{background:color-mix(in srgb,#3F4C5C 55%,transparent)}
.rb-val{text-align:right;font-weight:660;font-variant-numeric:tabular-nums}
.rb-vol{text-align:right;color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .rb-row,.rb-head{grid-template-columns:1fr 50px}
  .rb-track,.rb-head .ax{grid-column:1/-1}
  .rb-vol{display:none}
}

/* ── proportion bar ──────────────────────────────────────────────────────── */
.mixbar{margin:0 0 14px}
.mixbar-track{display:flex;height:34px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface)}
.mixbar-track .mx{display:block;height:100%;min-width:2px}
.mixbar-keys{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:9px}
.mxk{display:flex;align-items:baseline;gap:7px;font-size:13px}
.mxk .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto;transform:translateY(1px)}
.mxk b{font-variant-numeric:tabular-nums;font-size:14.5px}
.mxk-l{color:var(--ink-2)} .mxk-v{color:var(--ink-3);font-variant-numeric:tabular-nums}
.mxk-n{color:var(--ink-3);font-size:11.5px;font-style:italic}

/* ── the funnel: one set of refusals, narrowed twice ─────────────────────── */
.funnel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-sm)}
.fstep{display:grid;grid-template-columns:minmax(150px,1fr) minmax(120px,2.4fr) 112px;
  gap:14px;align-items:center;padding:8px 0}
.fstep + .fstep{border-top:1px solid var(--line)}
.fstep .lbl b{display:block;font-size:13.2px;color:var(--ink);font-weight:640}
.fstep .lbl span{display:block;font-size:11.6px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.fstep .fbar{height:26px;border-radius:5px;background:var(--surface-2)}
.fstep .fbar i{display:block;height:100%;border-radius:5px}
.fstep .amt{text-align:right;font-family:var(--serif);font-size:17px;font-weight:700;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.fstep .amt small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.f-all i{background:color-mix(in srgb,#3F4C5C 42%,transparent)}
.f-act i{background:color-mix(in srgb,var(--warn) 68%,transparent)}
.f-rule i{background:color-mix(in srgb,var(--ok) 74%,transparent)}
.fstep.here{background:color-mix(in srgb,var(--accent) 5%,transparent);
  margin:0 -20px;padding-left:20px;padding-right:20px}
.fstep .tabtag{font-size:9.5px;font-weight:700;letter-spacing:.05em;padding:2px 7px;
  border-radius:99px;background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);margin-left:7px;vertical-align:middle}

/* ── Bills to pay: the month, then one list ──────────────────────────────────────────────────
   Built from docs/mock-bills-to-pay.html, which is the spec. The page had three tiles, three
   group cards and six collapsibles; the founder's verdict was "too many cards and collapsed
   ones, it's not fluid". This is one list with tabs, sortable columns and a tick per row.
   Tokens only, so both themes come free. */
.bl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 22px 0}
.bl-eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;margin:0 0 7px}
.bl-head h2{font-family:var(--serif);font-size:25px;line-height:1.1;margin:0;letter-spacing:-.02em;
  font-weight:640}
.bl-acts{display:flex;align-items:center;gap:9px}
/* The app's .btn is a green gradient built for a page of cards; in a layout this flat it shouts.
   Same place in the hierarchy, none of the volume. */
.bl-primary{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:8px 17px;
  font-size:12.5px;font-weight:600;font-family:var(--sans);cursor:pointer;transition:opacity .16s ease}
.bl-primary:hover{opacity:.86}
.bl-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.bl-setup{position:relative}
.bl-setup>summary{list-style:none;cursor:pointer;font-size:12.5px;color:var(--ink);
  border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 14px;
  display:inline-flex;align-items:center;gap:8px}
.bl-setup>summary::-webkit-details-marker{display:none}
.bl-setup>summary::after{content:"";width:6px;height:6px;margin-top:-3px;
  border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .18s ease}
.bl-setup[open]>summary::after{transform:rotate(225deg);margin-top:2px}
.bl-setup>summary:hover{border-color:var(--ink-3)}
.bl-setup .sheet{position:absolute;right:0;top:42px;z-index:30;width:320px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px}
.bl-setup .sheet button{display:block;width:100%;text-align:left;border:0;background:none;
  padding:10px 12px;border-radius:var(--radius-sm);color:var(--ink);font-size:13px;
  font-family:var(--sans);cursor:pointer}
.bl-setup .sheet button:hover{background:var(--surface-2)}
.bl-setup .sheet button span{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px}

/* The month, stated once and drawn once. The only place the whole month is visible at all. */
.bl-meter{padding:24px 22px 0}
.bl-figure{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.bl-figure .big{font-family:var(--serif);font-size:36px;letter-spacing:-.03em;font-weight:640;
  font-variant-numeric:tabular-nums;line-height:1}
.bl-figure .cap{color:var(--ink-2);font-size:13.5px}
.bl-figure .late{color:var(--crit);font-size:13.5px;font-weight:620}
.bl-bar{display:flex;height:9px;gap:3px;margin:18px 0 11px}
.bl-bar span{border-radius:999px;min-width:5px}
.bl-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.bl-legend div{display:flex;align-items:center;gap:7px}
.bl-legend i{width:8px;height:8px;border-radius:999px;display:inline-block}
.bl-legend b{font-variant-numeric:tabular-nums;font-weight:620;color:var(--ink)}

.bl-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:26px 22px 0}
.bl-seg{position:relative;display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);
  border-radius:999px}
.bl-seg .ind{position:absolute;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--ink);
  transition:transform .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1)}
.bl-seg.crit-active .ind{background:var(--crit)}
.bl-seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:12.5px;color:var(--ink-2);padding:7px 15px;border-radius:999px;
  display:inline-flex;align-items:center;gap:7px;transition:color .18s ease;white-space:nowrap}
.bl-seg button:hover{color:var(--ink)}
.bl-seg button[aria-pressed="true"]{color:var(--paper)}
.bl-seg button .n{font-size:11px;font-variant-numeric:tabular-nums;opacity:.62}
.bl-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bl-find{margin-left:auto}
.bl-find input{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;
  padding:8px 15px;font-size:12.5px;width:200px;font-family:var(--sans);
  transition:border-color .18s ease,background .18s ease}
.bl-find input:focus{outline:none;border-color:var(--accent);background:var(--surface)}

.bl-list{padding:0 22px 30px}
.bl-sec{position:sticky;top:0;z-index:3;display:flex;align-items:baseline;gap:10px;padding:24px 4px 8px;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3)}
.bl-sec h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;margin:0;color:var(--ink);
  font-weight:700}
.bl-sec .count{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bl-sec .hint{font-size:11.5px;color:var(--ink-3);margin-left:auto}

.bl-row,.bl-colhead{display:grid;grid-template-columns:2px 26px 1fr 120px 104px 92px;
  align-items:center;gap:14px}
.bl-colhead{position:sticky;top:42px;z-index:2;padding:6px 14px 8px 0;
  background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bl-colhead .sort{background:none;border:0;padding:2px 0;cursor:pointer;font-family:var(--sans);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:5px;transition:color .16s ease}
.bl-colhead .sort:hover{color:var(--ink)}
.bl-colhead .sort[aria-sort]{color:var(--ink)}
.bl-colhead .sort .car{font-size:9px;opacity:0;transition:opacity .16s ease}
.bl-colhead .sort:hover .car,.bl-colhead .sort[aria-sort] .car{opacity:1}
.bl-colhead .sort.right{justify-content:flex-end;width:100%}
.bl-colhead .sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.bl-row{padding:12px 14px 12px 0;border-radius:var(--radius-sm);transition:background .14s ease}
.bl-row+.bl-row{box-shadow:0 -1px 0 color-mix(in srgb,var(--ink) 5%,transparent)}
.bl-row:hover,.bl-row.picked{background:color-mix(in srgb,var(--ink) 3%,transparent);box-shadow:none}
.bl-row:hover+.bl-row,.bl-row.picked+.bl-row{box-shadow:none}
.bl-mark{height:26px;border-radius:999px;background:transparent}
.bl-row.is-late .bl-mark{background:var(--crit)}
.bl-row.is-work .bl-mark{background:var(--warn)}
.bl-row.is-soon .bl-mark{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.bl-row.is-left .bl-mark{background:var(--ok)}
.bl-row.is-later .bl-mark,.bl-row.is-paid .bl-mark{background:color-mix(in srgb,var(--ink) 14%,transparent)}

/* Small and quiet until something is selected, which is nearly always. */
.bl-tick{display:flex;align-items:center;justify-content:center}
.bl-tick input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;opacity:.35;
  transition:opacity .14s ease}
.bl-row:hover .bl-tick input,.bl-tick input:checked,.bl-row.picked .bl-tick input,
body.bl-selecting .bl-tick input{opacity:1}
.bl-colhead .bl-tick input{opacity:.5}

.bl-who{min-width:0}
.bl-who .name{font-size:13.5px;font-weight:620;letter-spacing:-.005em}
.bl-who .why{color:var(--ink-3);font-size:11.5px;margin-top:2px}
.bl-row.is-left .bl-who .name,.bl-row.is-paid .bl-who .name{font-weight:500;color:var(--ink-2)}
.bl-amt{text-align:right;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.bl-amt .unknown{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);letter-spacing:0}
.bl-when{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bl-when.late{color:var(--crit);font-weight:620}
.bl-when .none{color:var(--ink-3)}
.bl-do{text-align:right}
.bl-do .act{background:none;border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  font-size:12px;font-family:var(--sans);color:var(--ink);cursor:pointer;opacity:0;
  transform:translateX(4px);transition:opacity .16s ease,transform .16s ease}
.bl-row:hover .bl-do .act,.bl-do .act:focus-visible{opacity:1;transform:none}
.bl-do .act:hover{border-color:var(--ink-3)}

.bl-bulk{position:fixed;left:50%;bottom:24px;transform:translate(-50%,110px);display:flex;
  align-items:center;gap:14px;padding:10px 12px 10px 18px;background:var(--ink);color:var(--paper);
  border-radius:999px;box-shadow:var(--shadow-lg);font-size:12.5px;z-index:60;
  transition:transform .24s cubic-bezier(.4,0,.2,1)}
.bl-bulk.up{transform:translate(-50%,0)}
.bl-bulk b{font-variant-numeric:tabular-nums}
.bl-bulk button{border:0;border-radius:999px;padding:6px 14px;font-size:12.5px;font-family:var(--sans);
  cursor:pointer;background:color-mix(in srgb,var(--paper) 16%,transparent);color:var(--paper)}
.bl-bulk button:hover{background:color-mix(in srgb,var(--paper) 26%,transparent)}
.bl-bulk button.danger{background:var(--crit)}
.bl-bulk .clear{background:none;text-decoration:underline;padding:6px 4px}

.bl-footrow{display:flex;align-items:center;gap:12px;padding:18px 0 4px;font-size:12.5px;color:var(--ink-2)}
.bl-more{background:none;border:0;color:var(--accent);font-size:12.5px;cursor:pointer;padding:14px 4px;
  font-family:var(--sans);font-weight:560}
.bl-more:hover{text-decoration:underline}
.bl-empty{color:var(--ink-3);font-size:13px;padding:40px 4px;text-align:center}

.bl-panels{padding:0 22px 26px}
.bl-panels>details{border-top:1px solid var(--line);padding:12px 0}
.bl-panels>details>summary{cursor:pointer;font-size:12.5px;color:var(--ink-2);list-style:none}
.bl-panels>details>summary::-webkit-details-marker{display:none}
.bl-panels>details[open]>summary{color:var(--ink);font-weight:600;margin-bottom:8px}

@keyframes bl-settle{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.bl-row{animation:bl-settle .16s cubic-bezier(.4,0,.2,1) both}
@media (prefers-reduced-motion:reduce){
  .bl-row,.bl-bulk,.bl-seg .ind,.bl-do .act{animation:none;transition:none}
}
@media (max-width:760px){
  .bl-row,.bl-colhead{grid-template-columns:2px 26px 1fr auto}
  .bl-when,.bl-do,.bl-colhead .c-when,.bl-colhead .c-do{display:none}
  .bl-seg{overflow-x:auto;max-width:100%}
}

/* A row that opens says so. */
.bl-row.opens{cursor:pointer}

/* Editable cells. They look like the text they replace until you point at one, because a page of
   sixty input boxes reads as a form and this is a list. */
.bl-cell{border:1px solid transparent;background:transparent;color:inherit;font:inherit;
  border-radius:7px;padding:3px 6px;width:100%;transition:border-color .14s ease,background .14s ease}
.bl-cellamt{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bl-cellday{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bl-row:hover .bl-cell{border-color:var(--line)}
.bl-cell:hover{border-color:var(--ink-3)}
.bl-cell:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.bl-cell::placeholder{color:var(--ink-3)}
.bl-cell.bl-saving{opacity:.5}
.bl-cell.bl-saved{border-color:var(--ok);background:var(--ok-bg)}

/* The running total under an amount field that is being added up. */
.calcout{font-size:11.5px;margin-top:4px;min-height:14px;color:var(--ink-3)}
.calcout.ok{color:var(--ok);font-variant-numeric:tabular-nums}
.calcout.bad{color:var(--crit)}
/* An entry whose figure was a sum says so, and says what of. */
.calcmark{font-size:10.5px;color:var(--ink-3);cursor:help;margin-left:5px}

/* The list of lines an import refused. Line numbers first, so they can be found in the file. */
.impprobs{margin:10px 0 0;padding-left:18px;max-height:260px;overflow-y:auto;font-size:12.5px;
  line-height:1.65;color:var(--ink-2)}
.impprobs li{margin-bottom:3px}

/* Two records for one company: the pair, and which to keep. */
.dupe-pair{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:8px}
.dupe-why{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
  font-weight:700;margin-bottom:6px}
.dupe-pick{display:flex;align-items:flex-start;gap:9px;padding:5px 0;cursor:pointer;font-size:13px}
.dupe-pick input{margin-top:3px;accent-color:var(--accent)}
.dupe-pick span{display:block}
.dupe-pick .dim{display:block;font-size:11.5px;margin-top:1px}
.dupe-pair .btn{margin-top:8px}

.dupe-manual{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;font-size:12.5px}
.dupe-manual-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:7px 0 5px}
.dupe-manual-row select{width:auto;max-width:230px;padding:5px 8px;font-size:12.5px}
.dupe-manual .dim{font-size:11.5px}

/* ── The Employees tab ────────────────────────────────────────────────────────────────────────
   RESTORED. These rules were deleted as collateral in commit 90a7822, which removed the loading
   widget and took the block sitting next to it. The markup kept rendering, so nothing threw and
   no test failed: the tab simply showed every field as a stacked line of plain text, with labels
   running into values, for two days. Recovered verbatim from 90a7822^ rather than rewritten, so
   this is the design that was signed off and not a fresh guess at it. */
.hrx-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.hrx-find{flex:1;min-width:180px;max-width:290px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-family:var(--serif);font-size:13.5px;color:var(--ink)}
.hrx-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;
  background:var(--surface)}
.hrx-seg button{border:0;border-right:1px solid var(--line);background:var(--surface);
  font-family:var(--serif);font-size:12.5px;font-weight:640;color:var(--ink-3);padding:8px 15px;
  cursor:pointer;white-space:nowrap}
.hrx-seg button:last-child{border-right:0}
.hrx-seg button:hover{color:var(--ink)}
.hrx-seg button.on{color:var(--ok);box-shadow:inset 0 -2px 0 var(--ok)}
.hrx-seg button b{font-variant-numeric:tabular-nums;font-weight:800;margin-left:5px}
.hrx-attbtn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(188,43,29,.4);background:var(--surface);color:var(--crit);border-radius:999px;
  padding:8px 15px;font-family:var(--serif);font-size:12.5px;font-weight:700;cursor:pointer}
.hrx-attbtn.on{background:var(--crit-bg)}
.hrx-attbtn i{width:7px;height:7px;border-radius:50%;background:var(--crit);display:block}
.hrx-list{display:flex;flex-direction:column}
.hrx-row{display:grid;grid-template-columns:auto minmax(150px,1.5fr) minmax(130px,1fr) auto;
  gap:16px;align-items:center;padding:14px 16px;border:0;border-radius:14px;
  background:transparent;cursor:pointer;position:relative;
  transition:background .14s ease,box-shadow .16s ease}
.hrx-row::after{content:'';position:absolute;left:16px;right:16px;bottom:0;height:1px;
  background:var(--line)}
.hrx-row:last-child::after,.hrx-row.open::after{display:none}
.hrx-row:hover{background:var(--surface);box-shadow:0 6px 20px rgba(8,20,16,.08)}
.hrx-row:hover::after{display:none}
.hrx-row.open{background:var(--surface);box-shadow:0 -1px 0 rgba(8,20,16,.02)}
.hrx-av{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:-.02em;
  color:var(--ok);background:var(--surface);border:1.5px solid rgba(14,158,106,.4)}
.hrx-av.off{color:var(--ink-3);border-color:var(--line)}
.hrx-who{min-width:0}
.hrx-name{font-family:var(--serif);font-size:16.5px;font-weight:650;letter-spacing:-.022em;
  color:var(--ink);line-height:1.2}
.hrx-title{font-family:var(--serif);font-size:12.5px;font-weight:500;color:var(--ink-2);
  margin-top:3px;letter-spacing:-.005em}
.hrx-terms{font-family:var(--serif);font-size:12.5px;font-weight:500;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.hrx-terms span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.hrx-flags{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.hrx-stat{display:inline-flex;align-items:center;gap:7px;font-family:var(--serif);font-size:12px;
  font-weight:640;color:var(--ink-2);white-space:nowrap}
.hrx-stat i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:block}
.hrx-stat.off i{background:var(--ink-3)}
.hrx-warn{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);font-size:11.5px;
  font-weight:700;color:var(--crit);background:var(--crit-bg);border-radius:999px;padding:4px 11px;
  white-space:nowrap}
.hrx-card{border:0;border-radius:0 0 14px 14px;background:var(--surface);
  box-shadow:0 10px 26px rgba(8,20,16,.08);margin:0 0 10px}
.hrx-tabs{padding:13px 17px 0}
.hrx-pane{padding:14px 17px 17px}
.hrx-att{padding:2px 0 11px 13px;border-left:3px solid var(--crit);margin:0 0 13px;
  font-family:var(--serif);font-size:13.5px;font-weight:500;color:var(--ink-2);line-height:1.55}
.hrx-att b{font-weight:680;color:var(--crit);display:block;font-size:14px;margin-bottom:2px;
  letter-spacing:-.015em}
.hrx-line{display:flex;align-items:center;gap:12px;padding:4px 0 14px;border:0;
  border-bottom:1px solid var(--line);background:transparent;font-family:var(--serif);
  font-size:13.5px;font-weight:500;color:var(--ink-2);margin-bottom:12px;min-width:0;flex-wrap:wrap}
.hrx-fact{flex:1;min-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrx-fact b{color:var(--ink);font-weight:680}
.hrx-pills{display:flex;gap:7px;flex:none;flex-wrap:wrap}
.hrx-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(14,158,106,.4);
  background:var(--surface);color:var(--ok);border-radius:999px;padding:6px 14px;
  font-family:var(--serif);font-size:12.5px;font-weight:640;cursor:pointer;white-space:nowrap}
.hrx-pill:hover{background:var(--ok-bg)}
.hrx-pill.q{border-color:var(--line);color:var(--ink-3)}
.hrx-pill.q:hover{background:var(--surface);color:var(--ink-2);border-color:var(--ink-3)}
.hrx-pill b{font-variant-numeric:tabular-nums;font-weight:800}
.hrx-rows{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 10px;
  background:var(--surface)}
.hrx-r{display:flex;align-items:center;gap:10px;padding:11px 15px;font-family:var(--serif);
  font-size:13px;font-weight:500;color:var(--ink-2);min-width:0;border-top:1px solid var(--line)}
.hrx-r:first-child{border-top:0}
.hrx-r.cur{box-shadow:inset 3px 0 0 var(--ok)}
.hrx-when{flex:0 0 172px;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrx-what{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrx-what b{font-size:14px;font-weight:680;letter-spacing:-.02em;color:var(--ink);margin-right:8px}
.hrx-acts{flex:none;display:flex;gap:6px;align-items:center}
.hrx-tag{font-size:10px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ok);border:1px solid rgba(14,158,106,.45);border-radius:999px;padding:3px 9px;
  white-space:nowrap;margin-right:8px;display:inline-block}
.hrx-tag.q{color:var(--ink-3);border-color:var(--line)}
.hrx-h3{font-family:var(--serif);font-size:15px;font-weight:680;letter-spacing:-.024em;
  color:var(--ink);margin:18px 0 9px;display:flex;align-items:baseline;gap:9px}
.hrx-h3:first-child{margin-top:2px}
.hrx-h3 em{font-size:11px;font-weight:600;color:var(--ink-3);font-style:normal}
.hrx-mini{display:inline-block;width:66px;height:4px;border-radius:99px;border:1px solid var(--line);
  vertical-align:1px;margin:0 3px 0 9px;overflow:hidden}
.hrx-mini i{display:block;height:100%;background:var(--ok)}
.hrx-fold{border:1px solid var(--line);border-radius:12px;padding:0 15px;margin:2px 0 0}
.hrx-fold>summary{cursor:pointer;padding:11px 0;font-family:var(--serif);font-size:13px;
  font-weight:640;color:var(--ink-2);list-style:none}
.hrx-fold>summary::-webkit-details-marker{display:none}
.hrx-fold>summary::before{content:'+ ';color:var(--ok);font-weight:800}
.hrx-fold[open]>summary::before{content:'– '}
.hrx-fold>summary:hover{color:var(--ink)}
.hrx-foldbody{padding:0 0 14px}
  
  
  
  
.hrx-inline{width:100%}
.hrx-inline>summary{list-style:none}
.hrx-inline>summary::-webkit-details-marker{display:none}
.hrx-inline>summary::marker{content:''}

/* These four belong to the narrow layout and nowhere else. Restoring them without their
   @media wrapper is what made every employee stack down the page at full width: the phone
   rules were winning at 1900px because they came later in the file. */
@media (max-width:760px){
  .hrx-row{grid-template-columns:auto 1fr;gap:12px}
  .hrx-terms,.hrx-flags{grid-column:2}
  .hrx-flags{justify-content:flex-start}
  .hrx-r{flex-wrap:wrap}.hrx-when{flex:0 0 100%}
}

/* ── Start here ────────────────────────────────────────────────────────────────────────────────
 *
 * The page the welcome dialog lands on, until the setup list is finished. It borrows the Today
 * strip's material for its hero on purpose: that gradient is the product's own surface, so the
 * first screen belongs to the app rather than looking like a slide somebody pasted in.
 *
 * NO max-width ON ANY BODY TEXT HERE. The founder's rule, and he had to give it twice: text fills
 * its card. A measure of 60ch inside a 900px card leaves a third of it empty and reads as broken.
 */
.fr-hero{background:var(--today);border-radius:var(--radius);padding:32px 32px 28px;color:#fff;
  box-shadow:var(--shadow-lg);margin-bottom:6px}
.fr-eyebrow{font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.6);margin-bottom:11px}
.fr-hero h1{font-family:var(--serif);font-size:30px;line-height:1.18;font-weight:660;
  letter-spacing:-.022em;margin:0 0 10px;text-wrap:balance}
.fr-hero p{margin:0;color:rgba(255,255,255,.78);font-size:14.4px}
.fr-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.13);
  border-radius:var(--radius-sm);overflow:hidden;margin-top:24px}
.fr-fig{background:rgba(10,18,26,.34);padding:15px 17px 14px}
.fr-n{font-family:var(--serif);font-size:24px;font-weight:680;letter-spacing:-.02em;display:block;line-height:1.1}
.fr-n.good{color:var(--rail-cue)}
.fr-soon{font-size:14.6px;font-weight:600;color:rgba(255,255,255,.94);display:block;line-height:1.3}
.fr-l{font-size:12.3px;color:rgba(255,255,255,.7);margin-top:5px;display:block;line-height:1.42}
.fr-fig a{color:#fff;font-size:12.3px;display:inline-block;margin-top:8px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.32)}
.fr-src{margin-top:15px;font-size:12px;color:rgba(255,255,255,.48)}

.fr-sec{font-family:var(--serif);font-size:18.5px;font-weight:640;letter-spacing:-.015em;margin:34px 0 3px}
.fr-sub{margin:0 0 15px;color:var(--ink-2);font-size:13.4px}

.fr-setup{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.fr-head{display:flex;align-items:baseline;gap:12px;padding:16px 20px 12px}
.fr-head h3{font-family:var(--serif);font-size:16.5px;font-weight:640;margin:0}
.fr-of{color:var(--ink-3);font-size:12.8px;margin-left:auto}
.fr-bar{height:5px;background:var(--surface-2);margin:0 20px;border-radius:3px;overflow:hidden}
.fr-bar i{display:block;height:100%;background:var(--ok);border-radius:3px}
.fr-steps{list-style:none;margin:13px 0 0;padding:0}
.fr-steps li{display:flex;align-items:flex-start;gap:13px;padding:13px 20px;border-top:1px solid var(--line)}
.fr-steps li.next{background:var(--accent-soft)}
.fr-tick{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;background:var(--ok);margin-top:1px}
.fr-tick.todo{background:#fff;border:1.6px solid var(--line);color:var(--ink-3)}
.fr-tick.now{background:var(--accent);color:#fff}
.fr-what{flex:1}
.fr-what b{font-size:13.8px;font-weight:600;display:block}
.fr-what small{display:block;color:var(--ink-2);font-size:12.6px;margin-top:2px}
.fr-steps li.done .fr-what b{color:var(--ink-3);font-weight:520}
.fr-steps li.done .fr-what small{color:var(--ink-3)}
.fr-mins{color:var(--ink-3);font-size:12.2px;white-space:nowrap;margin-top:3px}
.fr-retire{padding:13px 20px;border-top:1px solid var(--line);background:var(--surface-2);
  font-size:12.7px;color:var(--ink-2)}

.fr-loop{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow)}
.fr-step .k{font-size:11.8px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:4px}
.fr-step .v{font-size:13.4px}
.fr-arrow{color:var(--ink-3);font-size:17px}

.fr-calm{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:14px}
.fr-calm div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 15px}
.fr-calm b{display:block;font-size:13.2px;margin-bottom:3px}
.fr-calm span{color:var(--ink-2);font-size:12.5px}
.fr-foot{margin-top:20px;font-size:13px;color:var(--ink-2)}

@media (max-width:860px){
  .fr-figures,.fr-calm{grid-template-columns:1fr}
  .fr-loop{grid-template-columns:1fr;gap:14px}
  .fr-arrow{display:none}
  .fr-steps li{flex-wrap:wrap}
}

/* ── Ask Opselia ──────────────────────────────────────────────────────────────────────────────
 *
 * The control sits in the middle of the top band and carries the only colour there, because it is
 * a thing you DO rather than a place you go. The panel floats over whatever was on screen, so
 * asking never costs somebody their place.
 *
 * Near-black with the practice green under it rather than a grey, so it belongs to the rail it
 * opens over instead of arriving from some other product.
 */
.tb-ask{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;cursor:pointer;
  flex:1 1 300px;max-width:420px;margin:0 auto;padding:7px 12px;border-radius:10px;
  background:var(--accent-soft);border:1px solid transparent;color:var(--accent);
  font-size:13px;transition:border-color .15s,background .15s}
.tb-ask:hover{border-color:var(--accent);background:#DCE6EF}
.tb-ask .tb-ask-ph{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-ask kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;background:#fff;color:var(--ink-3)}
.tb-ask-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px rgba(14,158,106,.15)}

.ask-scrim{position:fixed;inset:0;background:rgba(9,14,17,.5);backdrop-filter:blur(3px);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:9vh 20px}
.ask-scrim[hidden]{display:none}
.ask-panel{width:min(760px,100%);max-height:82vh;display:flex;flex-direction:column;
  background:#0E1519;color:#EAF2EE;border:1px solid rgba(255,255,255,.09);border-radius:18px;
  overflow:hidden;box-shadow:0 40px 90px -30px rgba(6,12,14,.8),0 0 0 1px rgba(123,235,190,.08);
  animation:askrise .2s cubic-bezier(.2,.8,.3,1)}
@keyframes askrise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes askin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ask-panel{animation:none}.ask-dot.think{animation:none}
  .ask-out tr{animation:none!important}}

.ask-field{display:flex;align-items:center;gap:12px;padding:17px 20px;flex:none;
  border-bottom:1px solid rgba(255,255,255,.09)}
.ask-field input{all:unset;flex:1;font-size:19px;letter-spacing:-.015em;color:#EAF2EE}
.ask-field input::placeholder{color:rgba(234,242,238,.3)}
.ask-dot{width:8px;height:8px;border-radius:50%;background:#7BEBBE;flex:none;
  box-shadow:0 0 0 5px rgba(123,235,190,.14)}
.ask-dot.think{animation:askpulse 1.1s ease-in-out infinite}
@keyframes askpulse{0%,100%{box-shadow:0 0 0 4px rgba(123,235,190,.1)}50%{box-shadow:0 0 0 9px rgba(123,235,190,.2)}}
.ask-esc,.ask-back{all:unset;font-family:var(--mono);font-size:11px;color:rgba(234,242,238,.3);
  border:1px solid rgba(255,255,255,.09);border-radius:6px;padding:3px 7px;cursor:pointer;flex:none}
.ask-esc:hover,.ask-back:hover{color:#fff;background:rgba(255,255,255,.07)}
.ask-back{font-size:14px;line-height:1;padding:3px 9px}

.ask-ctx{display:flex;gap:8px;align-items:center;padding:9px 20px;flex:none;font-size:12.2px;
  color:rgba(234,242,238,.56);background:rgba(123,235,190,.05);
  border-bottom:1px solid rgba(255,255,255,.09)}
.ask-ctx[hidden]{display:none}
.ask-ctx button{all:unset;margin-left:auto;cursor:pointer;color:rgba(234,242,238,.3);font-size:15px;padding:0 3px}
.ask-ctx button:hover{color:#fff}
.ask-out{overflow:auto;flex:1}
.ask-src{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:#7BEBBE;border:1px solid rgba(123,235,190,.28);border-radius:5px;padding:2px 7px;white-space:nowrap}

.ask-sughead{padding:12px 20px 4px;font-size:10.8px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(234,242,238,.3)}
.ask-sug{list-style:none;margin:0;padding:6px}
.ask-sug li{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:10px;cursor:pointer;
  font-size:14.2px;color:rgba(234,242,238,.56)}
.ask-sug li .k{font-family:var(--mono);font-size:10.4px;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(234,242,238,.3);margin-left:auto;white-space:nowrap}
.ask-sug li.on{background:rgba(255,255,255,.07);color:#fff}
.ask-think{display:flex;align-items:center;gap:11px;padding:20px;color:rgba(234,242,238,.56);font-size:14px}
.ask-body{padding:20px 20px 4px}
.ask-lede{font-size:17.5px;line-height:1.5;margin:0;letter-spacing:-.012em}
.ask-lede b{font-weight:600}
.ask-lede .fig{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;font-size:19px}
.ask-lede .fig.bad{color:#FF9B8E}
.ask-lede .fig.good{color:#7BEBBE}
.ask-ev{margin:17px 0 0;border:1px solid rgba(255,255,255,.09);border-radius:12px;overflow:hidden;
  background:#131C21}
.ask-ev-top{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12.2px;
  color:rgba(234,242,238,.56);border-bottom:1px solid rgba(255,255,255,.09)}
.ask-ev table{width:100%;border-collapse:collapse}
.ask-ev th{text-align:left;padding:9px 14px;font-family:var(--mono);font-size:10.4px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(234,242,238,.3);font-weight:500}
.ask-ev td{padding:9px 14px;font-size:13.2px;border-top:1px solid rgba(255,255,255,.09)}
.ask-ev td.n,.ask-ev th.n{text-align:right;font-variant-numeric:tabular-nums}
.ask-ev tr.lead td{color:#fff;font-weight:600}
.ask-ev tbody tr{animation:askin .22s ease both}
.ask-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.1);margin-top:5px;overflow:hidden}
.ask-bar i{display:block;height:100%;background:#7BEBBE;opacity:.75;width:0;
  transition:width .45s cubic-bezier(.2,.8,.3,1)}
.ask-bar.bad i{background:#FF9B8E}
.ask-steps{margin:0;padding:12px 14px 14px 34px;font-size:13.6px;line-height:1.62;color:#EAF2EE}
.ask-steps li{margin-bottom:7px}
.ask-warn{margin:15px 0 0;padding:10px 13px;border-radius:10px;font-size:12.7px;
  background:rgba(255,181,71,.1);border:1px solid rgba(255,181,71,.26);color:#FFD9A6}
.ask-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 20px 18px;flex:none;
  border-top:1px solid rgba(255,255,255,.09)}
.ask-act{all:unset;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.05);
  color:#EAF2EE;font-size:12.8px;font-weight:550;padding:8px 14px;border-radius:9px;cursor:pointer}
.ask-act:hover{background:rgba(255,255,255,.1)}
.ask-act.key{background:#7BEBBE;color:#08221A;border-color:transparent;font-weight:650}
.ask-cover{margin-left:auto;font-size:12px;color:rgba(234,242,238,.3)}
.ask-hints{display:flex;flex-wrap:wrap;gap:7px;padding:0 20px 18px}
.ask-hint{font-size:12.4px;color:rgba(234,242,238,.56);border:1px solid rgba(255,255,255,.09);
  border-radius:999px;padding:5px 12px;cursor:pointer}
.ask-hint:hover{color:#fff;border-color:rgba(123,235,190,.4)}
@media (max-width:860px){ .tb-ask{max-width:none} }

/* ── Procedure margin ─────────────────────────────────────────────────────────────────────────
 *
 * One dark surface holds the answer; the setup cards under it stay ordinary. One of those is
 * worth looking at every month and the other is worth looking at once, and the page should say
 * which before anybody reads a word.
 */
.pm-deck{background:#0E1519;border-radius:20px;overflow:hidden;color:#EAF2EE;
  box-shadow:0 40px 90px -40px rgba(6,12,14,.8),0 0 0 1px rgba(123,235,190,.07);margin-bottom:16px}
.pm-top{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;padding:24px 24px 18px;
  background:radial-gradient(120% 160% at 0% 0%,rgba(123,235,190,.10),transparent 60%)}
.pm-top h2{font-family:var(--serif);font-size:25px;font-weight:680;letter-spacing:-.025em;margin:0;color:#fff}
.pm-top p{margin:5px 0 0;color:rgba(234,242,238,.56);font-size:13.4px}
.pm-ctl{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* The two figures the overhead rate is made of, and the rate they produce, side by side: the
   arithmetic is the reassurance, so it is on screen rather than behind a tooltip. */
.pm-rate{font-size:12.8px;color:rgba(234,242,238,.56);padding:7px 12px;border-radius:10px;
  border:1px solid rgba(123,235,190,.2);background:rgba(123,235,190,.07);white-space:nowrap}
.pm-rate b{color:#7BEBBE;font-variant-numeric:tabular-nums}
.pm-rate span{display:block;font-size:11px;opacity:.72;white-space:normal;max-width:210px}
/* A break inside a dialog, where a form turns from what a procedure uses to how long it takes. */
.pm-sep{margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px}
.pm-sep .dim{display:block;font-size:12.3px;margin-top:3px}
.pm-oh{display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.05);border-radius:10px;padding:7px 12px;font-size:12.8px;
  color:rgba(234,242,238,.56)}
.pm-oh input{all:unset;width:70px;color:#fff;font-variant-numeric:tabular-nums;text-align:right}
/* The week, stated once: it is the denominator of the overhead rate and the ceiling every
   procedure runs against, so it sits under the heading rather than inside a settings screen. */
.pm-week{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 24px;
  border-top:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);font-size:12.6px;
  color:rgba(234,242,238,.56)}
.pm-week .k{font-family:var(--mono);font-size:10.3px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(234,242,238,.42)}
.pm-week label{display:flex;align-items:center;gap:7px}
.pm-week input{all:unset;width:44px;color:#fff;text-align:right;font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:1px}
.pm-week input:focus{border-bottom-color:#7BEBBE}
.pm-week .s{margin-left:auto;color:rgba(234,242,238,.42)}

/* Office days and surgery days are separate ceilings, never one bar: doing fewer office visits
   does not buy a single extra Tuesday minute. */
.pm-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.09)}
.pm-day{background:#0E1519;padding:16px 24px 18px}
.pm-day-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pm-day-h b{color:#fff;font-size:14px}
.pm-day-h span{font-size:11.6px;color:rgba(234,242,238,.42)}
.pm-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.08);margin:11px 0 9px;overflow:hidden}
.pm-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#7BEBBE,#4FD6E8);transition:width .4s ease}
.pm-day-f{display:flex;flex-direction:column;gap:4px;font-size:12.4px;color:rgba(234,242,238,.56)}
.pm-day-f b{color:#EAF2EE}

/* What the claims say about where a procedure happens. Stated, not chosen. */
.pm-site{border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:var(--sunk)}
.pm-site b{display:block;font-size:13px}
.pm-site span{display:block;font-size:12.2px;color:var(--dim);margin-top:2px}
.pm-site-check ul{margin:9px 0 8px;padding-left:19px;display:flex;flex-direction:column;gap:5px}
.pm-site-check li{font-size:12.8px}

.pm-empty{padding:22px 24px 26px;color:rgba(234,242,238,.56);font-size:14px}
.pm-empty b{color:#fff}

.pm-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.09)}
.pm-fact{background:#0E1519;padding:17px 24px 19px}
.pm-fact .k{font-family:var(--mono);font-size:10.3px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(234,242,238,.3);display:block}
.pm-fact .v{font-family:var(--serif);font-size:32px;font-weight:700;letter-spacing:-.03em;display:block;
  margin:6px 0 3px;line-height:1}
.pm-fact .v.good{color:#7BEBBE} .pm-fact .v.bad{color:#FF9B8E}
.pm-fact .s{font-size:12.6px;color:rgba(234,242,238,.56)}

.pm-table{width:100%;border-collapse:collapse}
.pm-table th{text-align:left;padding:11px 16px;font-family:var(--mono);font-size:10.3px;
  letter-spacing:.07em;text-transform:uppercase;color:rgba(234,242,238,.3);font-weight:500;
  background:#0A1013;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.pm-table td{padding:12px 16px;font-size:13.4px;border-top:1px solid rgba(255,255,255,.09);vertical-align:top}
.pm-table td.n,.pm-table th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pm-row{cursor:pointer;transition:background .12s}
.pm-row:hover{background:rgba(255,255,255,.035)}
.pm-row td:first-child{position:relative;padding-left:22px}
.pm-row td:first-child::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:#7BEBBE;opacity:.85}
.pm-row.warn td:first-child::before{background:#FFB547}
.pm-row.bad td:first-child::before{background:#FF9B8E}
.pm-row b{color:#fff;font-weight:600}
.pm-cpt{font-family:var(--mono);font-size:10.8px;color:rgba(234,242,238,.3);display:block;margin-top:2px}
.pm-neg{color:#FF9B8E;font-weight:650}
.pm-pos{color:#7BEBBE;font-weight:600}
.pm-by{display:none;background:#0A1013}
.pm-by.show{display:table-row}
.pm-by td{padding:2px 16px 16px 22px}
.pm-why{font-size:13px;color:rgba(234,242,238,.56);padding:10px 0}
.pm-why b{color:#fff}
.pm-mini{width:100%;border-collapse:collapse;border:1px solid rgba(255,255,255,.09);border-radius:11px;overflow:hidden}
.pm-mini th{text-align:left;padding:8px 14px;font-family:var(--mono);font-size:10.3px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(234,242,238,.3);font-weight:500}
.pm-mini td{padding:8px 14px;font-size:12.9px;border-top:1px solid rgba(255,255,255,.09)}
.pm-mini td.n,.pm-mini th.n{text-align:right;font-variant-numeric:tabular-nums}
.pm-warn{padding:13px 20px;background:rgba(255,181,71,.09);border-top:1px solid rgba(255,181,71,.22);
  color:#FFD9A6;font-size:12.8px}
.pm-warn b{color:#FFE9C6}
.pm-foot{padding:13px 20px;border-top:1px solid rgba(255,255,255,.09);background:#0A1013;
  font-size:12.3px;color:rgba(234,242,238,.56);display:flex;gap:18px;flex-wrap:wrap}
.pm-foot b{color:#EAF2EE}
.pm-setup{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:980px){ .pm-facts,.pm-setup{grid-template-columns:1fr} }