/* ==========================================================================
   CodeRA - HCC Risk Adjustment Coding Platform
   Compact production-floor density: 13px base, tight padding.
   ========================================================================== */
:root{
  --brand:#1f4e79; --brand-dk:#163a5c; --brand-lt:#2f6ea6;
  --side:#12283f; --side-2:#0d1f31; --side-txt:#a9bdd1;
  --ink:#1e293b; --ink-2:#475569; --ink-3:#64748b;
  --bg:#f4f6f9; --card:#ffffff; --line:#e3e8ef; --line-2:#eef2f7;
  --ok:#15803d; --ok-bg:#ecfdf3; --warn:#b45309; --warn-bg:#fffbeb;
  --err:#b91c1c; --err-bg:#fef2f2; --info:#1d4ed8; --info-bg:#eff6ff;
  --purple:#7c3aed; --teal:#0d9488; --orange:#c2410c;
  --radius:5px; --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 2px rgba(16,24,40,.08);
  --shadow-lg:0 6px 18px rgba(16,24,40,.12);
  --topbar-h:38px; --side-w:176px; --side-slim:40px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:12px/1.38 "Segoe UI",-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brand-lt);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .28rem;font-weight:600;line-height:1.25}
h1{font-size:15px}h2{font-size:13px}h3{font-size:12.2px}h4{font-size:12px}
p{margin:0 0 .4rem}
svg.ic{width:14px;height:14px;flex:0 0 14px;vertical-align:middle}
svg.ic-sm{width:12px;height:12px;flex:0 0 12px}
.muted{color:var(--ink-3)}
.small{font-size:10.6px}
.mono{font-family:"Consolas","SF Mono",Menlo,monospace}
.nowrap{white-space:nowrap}
.right{text-align:right}.center{text-align:center}
.mt0{margin-top:0}.mt1{margin-top:5px}.mt2{margin-top:9px}.mt3{margin-top:13px}
.mb0{margin-bottom:0}.mb1{margin-bottom:5px}.mb2{margin-bottom:9px}
.hide{display:none !important}
/* Off screen but still read aloud. A tick drawn on a button is invisible to a
   screen reader, so anything that reports "done" visually needs a twin here. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- shell ---------- */
/* How tight the whole application sits.
   Three attempts at picking one right size for everybody all missed, because
   the right size depends on the screen and the eyes in front of it. So it is
   a control instead: the operator sets it, the browser remembers it, and the
   layout follows. */
/* Density.
   The zoom sits on the BODY, not on the shell inside it. Put it on the shell
   and the whole application shrinks into the top-left corner of the screen
   with grey around it: percentages resolve against an unzoomed parent, so the
   shell no longer covers the window.
   On the body, width takes care of itself. Height does not - 100vh inside a
   zoomed page resolves to the viewport in zoomed units, which is short by
   exactly the zoom factor - so every full-height rule divides it back out. */
body{zoom:var(--ui-zoom,1)}
.app{display:flex;min-height:calc(100vh / var(--ui-zoom,1))}
.sidebar{width:var(--side-w);flex:0 0 var(--side-w);background:var(--side);color:var(--side-txt);
  display:flex;flex-direction:column;position:sticky;top:0;
  height:calc(100vh / var(--ui-zoom,1));z-index:40}
.brand{display:flex;align-items:center;gap:7px;padding:8px 10px 7px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand-mark{width:24px;height:24px;border-radius:5px;background:linear-gradient(135deg,#2f6ea6,#1f4e79);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:11px;letter-spacing:.4px;flex:0 0 24px}
.brand-text{color:#fff;font-weight:600;font-size:12.2px;display:flex;flex-direction:column;line-height:1.15}
.brand-text small{color:#7f9bb5;font-weight:400;font-size:8.6px;letter-spacing:.3px;text-transform:uppercase}
.nav{flex:1;overflow-y:auto;padding:4px 5px 12px}
/* Groups fold away. Administration is thirteen of the twenty-five links and
   is not touched during a coding day, so it starts closed. */
.nav-group{display:flex;align-items:center;gap:5px;width:100%;background:none;border:0;
  cursor:pointer;text-align:left;font-family:inherit;
  font-size:9.2px;text-transform:uppercase;letter-spacing:.6px;color:#63809b;
  padding:8px 7px 2px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:7px;padding:4px 7px;border-radius:4px;
  color:var(--side-txt);font-size:11.6px;margin-bottom:1px}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav-group:hover{color:#9fc0dc}
.nav-group .ng-caret{margin-left:auto;transition:transform .15s;opacity:.6;font-size:8px}
.nav-group.collapsed .ng-caret{transform:rotate(-90deg)}
.nav-sec{display:flex;flex-direction:column;gap:1px;overflow:hidden}
.nav-sec.hidden{display:none}
.nav-item.active{background:var(--brand);color:#fff;font-weight:500}
.nav-item svg{opacity:.85;width:14px;height:14px;flex:0 0 14px}
.nav-badge{margin-left:auto;background:#dc2626;color:#fff;font-style:normal;font-size:9.5px;
  font-weight:700;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px}
.ui-density{display:flex;align-items:center;gap:4px;padding:4px 10px;
  border-top:1px solid rgba(255,255,255,.07);color:#63809b;font-size:9.2px;
  text-transform:uppercase;letter-spacing:.6px}
.ui-density .udl{margin-right:auto}
.ui-density button{background:rgba(255,255,255,.06);border:0;color:#8fb0cc;cursor:pointer;
  font:inherit;font-size:10px;line-height:1;padding:3px 6px;border-radius:3px;letter-spacing:0}
.ui-density button:hover{background:rgba(255,255,255,.14);color:#fff}
.ui-density button.on{background:var(--brand);color:#fff}

.sidebar-foot{padding:5px 10px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;justify-content:space-between;align-items:center;font-size:9.6px;color:#63809b}
.sidebar-foot .sf-role{font-weight:600;color:#8fb0cc;letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-foot .sf-ver{opacity:.7;flex:0 0 auto;margin-left:8px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{height:var(--topbar-h);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:8px;padding:0 10px;position:sticky;top:0;z-index:30}
.page-title{font-size:12.4px;font-weight:600;color:var(--ink)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:5px}
.menu-toggle{display:none}
.icon-btn{background:transparent;border:1px solid transparent;border-radius:4px;width:26px;height:26px;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);position:relative}
.icon-btn:hover{background:var(--line-2)}
.icon-btn .dot{position:absolute;top:0;right:0;background:#dc2626;color:#fff;font-size:8.4px;
  font-weight:700;min-width:14px;height:14px;border-radius:7px;display:grid;place-items:center;padding:0 3px}
.user-btn{display:flex;align-items:center;gap:7px;background:transparent;border:0;cursor:pointer;
  padding:3px 6px;border-radius:5px;color:var(--ink)}
.user-btn:hover{background:var(--line-2)}
.avatar{width:23px;height:23px;border-radius:50%;background:var(--brand);color:#fff;display:grid;
  place-items:center;font-weight:600;font-size:11px;flex:0 0 23px}
.ub-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;font-size:11.4px;font-weight:500}
.ub-text small{color:var(--ink-3);font-size:9.6px;font-weight:400}

.dropdown{position:relative}
.dropdown-menu{display:none;position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);
  border-radius:7px;box-shadow:var(--shadow-lg);min-width:210px;z-index:60;overflow:hidden}
.dropdown.open .dropdown-menu{display:block}
.notif-menu{width:310px}
.dm-head{display:flex;justify-content:space-between;align-items:center;padding:7px 11px;
  border-bottom:1px solid var(--line);font-weight:600;font-size:11.8px}
.dm-head a{font-size:10.5px;font-weight:400}
.dm-item{display:block;padding:6px 11px;border-bottom:1px solid var(--line-2);color:var(--ink);font-size:11.8px}
.dm-item:hover{background:var(--line-2);text-decoration:none}
.dm-item.unread{background:#f5f9ff}
.dm-item strong{display:block;font-weight:600;font-size:11.5px}
.dm-item span{display:block;color:var(--ink-3);font-size:10.5px;margin:1px 0}
.dm-item em{font-style:normal;color:var(--ink-3);font-size:9.6px}
.dm-item.danger{color:var(--err)}
.dm-empty{padding:13px 11px;text-align:center;color:var(--ink-3);font-size:11.5px}
.dm-foot{display:block;text-align:center;padding:6px;font-size:11px;background:var(--line-2)}

.content{padding:9px 10px 46px;flex:1}
.flash-wrap{padding:7px 10px 0}
.flash{display:flex;align-items:flex-start;gap:7px;padding:6px 9px;border-radius:4px;margin-bottom:5px;
  font-size:11.4px;border:1px solid;line-height:1.4}
.flash button{margin-left:auto;background:none;border:0;font-size:15px;line-height:1;cursor:pointer;color:inherit;opacity:.6}
.flash-success{background:var(--ok-bg);border-color:#bbf7d0;color:#14532d}
.flash-error{background:var(--err-bg);border-color:#fecaca;color:#7f1d1d}
.flash-info{background:var(--info-bg);border-color:#bfdbfe;color:#1e3a8a}
.flash-warning{background:var(--warn-bg);border-color:#fde68a;color:#78350f}
/* Row 43: the client bar at the top of a work screen (partials/_workclient.php) */
.wc-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding:6px 10px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.wc-bar label{font-size:9.2px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3);margin:0}
.wc-bar select{height:26px;padding:2px 22px 2px 7px;font-size:12.5px;font-weight:600;min-width:180px;max-width:100%}
.wc-bar .wc-one{font-size:13px}
.wc-bar.wc-ask{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-lt)}
.wc-bar .wc-hint{font-size:11.5px;color:var(--brand-dk);font-weight:600}
.wc-client{font-size:11px;color:var(--ink-3)}

/* ---------- page header ---------- */
.page-head{display:flex;align-items:flex-start;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:14.5px}
.page-head .sub{color:var(--ink-3);font-size:10.8px;margin-top:1px}
.page-head .actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:8px}
.card-head{padding:7px 11px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px}
.card-head h2,.card-head h3{margin:0;font-size:12.2px;font-weight:700;letter-spacing:-.1px}
.card-head .actions{margin-left:auto;display:flex;gap:6px;align-items:center}
.card-body{padding:9px 11px}
.card-body.tight{padding:0}
.card-foot{padding:6px 10px;border-top:1px solid var(--line);background:#fafbfc;
  border-radius:0 0 var(--radius) var(--radius);display:flex;gap:6px;align-items:center}

.grid{display:grid;gap:8px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1180px){.grid-6{grid-template-columns:repeat(3,1fr)}.grid-5{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.grid-2,.grid-3,.grid-4,.grid-5,.grid-6{grid-template-columns:1fr}}

/* ---------- stat tiles ---------- */
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:6px 9px;box-shadow:var(--shadow)}
.stat .lbl{font-size:9.2px;text-transform:uppercase;letter-spacing:.45px;color:var(--ink-3);font-weight:700}
.stat .val{font-size:17px;font-weight:700;line-height:1.2;margin-top:1px}
.stat .sub{font-size:9.6px;color:var(--ink-3)}
.stat.blue .val{color:var(--brand)} .stat.green .val{color:var(--ok)}
.stat.amber .val{color:var(--warn)} .stat.red .val{color:var(--err)}
.stat.purple .val{color:var(--purple)} .stat.teal .val{color:var(--teal)}
.stat.orange .val{color:var(--orange)}
.stat a{display:block;color:inherit}
.stat a:hover{text-decoration:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:4px 9px;border-radius:4px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-size:11.4px;font-weight:500;cursor:pointer;
  line-height:1.3;white-space:nowrap;transition:background .12s,border-color .12s}
.btn:hover{background:#f8fafc;text-decoration:none;border-color:#cbd5e1}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn svg{width:12px;height:12px;flex:0 0 12px}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dk);border-color:var(--brand-dk)}
.btn-success{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-success:hover{background:#166534;border-color:#166534}
.btn-danger{background:#dc2626;border-color:#dc2626;color:#fff}
.btn-danger:hover{background:#b91c1c;border-color:#b91c1c}
.btn-warn{background:#d97706;border-color:#d97706;color:#fff}
.btn-warn:hover{background:#b45309;border-color:#b45309}
.btn-sm{padding:2px 7px;font-size:10.6px;border-radius:4px}
.btn-xs{padding:1px 5px;font-size:10px;border-radius:3px}
.btn-xs svg,.btn-sm svg{width:11px;height:11px;flex:0 0 11px}
.btn-lg{padding:6px 13px;font-size:12.4px}
.btn-block{width:100%}
.btn-link{border:0;background:none;color:var(--brand-lt);padding:1px 3px}
.btn-group{display:inline-flex;gap:4px;flex-wrap:wrap}

/* ---------- tiny copy control ----------
   Deliberately not a .btn. It stands beside a value in a bar whose height IS
   the budget, so it may never be taller than the line it sits on - 14px against
   the bar's 11.6px/1.3 = 15.1px line box, 10px against the workspace's
   9.8px/1.1 = 10.8px one. It inherits its colour, so one rule serves both the
   white demographic bar and the near-black second-window header. */
.copy-btn{position:relative;flex:0 0 auto;display:inline-grid;place-items:center;
  width:14px;height:14px;padding:0;border:0;border-radius:3px;background:transparent;
  color:inherit;opacity:.62;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:opacity .12s,background .12s}
/* var(--line-2) on white is a 1.06:1 fill and reads as nothing at this size */
.copy-btn:hover{opacity:1;background:#e2e8f0}
.copy-btn:focus-visible{opacity:1;outline:2px solid var(--brand-lt);outline-offset:1px}
/* The glyph is 10px and the target is 20px. An absolutely positioned overlay
   costs no layout, and it stops short of the value on the left so it cannot
   swallow the end of a drag-selection across the number. */
.copy-btn::after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-2px}
/* (0,2,1) beats the global svg.ic (0,1,1) on SPECIFICITY rather than on source
   order, so it survives a reshuffle of this file. stroke-width is restated
   because a CSS property beats the element's presentation attribute: 1.7 on a
   24 viewBox drawn at 10px is 0.7 device px, which renders as a smudge. */
.copy-btn svg.ic{width:10px;height:10px;flex:0 0 10px;stroke-width:2.4;pointer-events:none}
.copy-btn .i-ok{display:none}
/* colour alone is not a perceptible event at 10px, so the copied state also
   changes area */
.copy-btn.is-copied{opacity:1;color:var(--ok);background:var(--ok-bg)}
.copy-btn.is-copied .i-copy{display:none}
.copy-btn.is-copied .i-ok{display:block}

/* ---------- forms ---------- */
.form-row{display:grid;gap:7px;margin-bottom:7px}
.form-row.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-row.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:820px){.form-row.c2,.form-row.c3,.form-row.c4{grid-template-columns:1fr}}
label{display:block;font-size:10.4px;font-weight:600;color:var(--ink-2);margin-bottom:2px}
label .req{color:#dc2626}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],
input[type=search],input[type=tel],select,textarea{
  width:100%;padding:4px 7px;border:1px solid #cbd5e1;border-radius:4px;font-size:11.8px;
  font-family:inherit;color:var(--ink);background:#fff;transition:border-color .12s,box-shadow .12s}
input[type=file]{width:100%;font-size:11px;padding:3px 0}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand-lt);box-shadow:0 0 0 2px rgba(47,110,166,.15)}
input:disabled,select:disabled,textarea:disabled{background:#f1f5f9;color:var(--ink-3);cursor:not-allowed}
input.readonly-locked{background:#f1f5f9;color:var(--ink-2)}
textarea{min-height:50px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 5px center;background-size:12px;padding-right:22px}
.hint{font-size:9.6px;color:var(--ink-3);margin-top:1px;line-height:1.3}
.check{display:flex;align-items:flex-start;gap:5px;font-size:11.4px;font-weight:400;color:var(--ink);margin-bottom:3px;cursor:pointer}
.check input{margin-top:1px;width:13px;height:13px;accent-color:var(--brand);cursor:pointer;flex:0 0 13px}
.err-text{color:var(--err);font-size:11px;margin-top:3px}
fieldset{border:1px solid var(--line);border-radius:4px;padding:7px 9px;margin:0 0 7px}
legend{font-size:10.4px;font-weight:700;color:var(--ink-2);padding:0 4px}

/* filter bar */
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end}
.filters .f{min-width:118px}
.filters label{font-size:9.8px;margin-bottom:2px}
.filters input,.filters select{padding:3px 6px;font-size:11px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:11.4px}
table.tbl th{background:#f8fafc;text-align:left;font-weight:700;color:var(--ink-2);font-size:9.4px;
  text-transform:uppercase;letter-spacing:.35px;padding:5px 8px;border-bottom:1.5px solid var(--line);white-space:nowrap}
table.tbl td{padding:4px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tbody tr:hover{background:#f9fbfd}
table.tbl tbody tr.sel{background:#eff6ff}
table.tbl.compact th{padding:3px 6px}
table.tbl.compact td{padding:3px 6px;font-size:11px}
table.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl td .small,table.tbl td .muted{line-height:1.3}
.empty{padding:18px 12px;text-align:center;color:var(--ink-3)}
.empty svg{width:26px;height:26px;opacity:.4;margin-bottom:5px}
.empty p{margin:0 0 5px}

/* ---------- badges ---------- */
.badge{display:inline-block;padding:0 5px;border-radius:20px;font-size:9.4px;font-weight:700;white-space:nowrap;line-height:1.55}
.badge-gray{background:#f1f5f9;color:#475569}
.badge-blue{background:#e0edfb;color:#1e40af}
.badge-green{background:#dcfce7;color:#166534}
.badge-amber{background:#fef3c7;color:#92400e}
.badge-red{background:#fee2e2;color:#991b1b}
.badge-purple{background:#ede9fe;color:#5b21b6}
.badge-orange{background:#ffedd5;color:#9a3412}
.badge-teal{background:#ccfbf1;color:#115e59}
.badge-slate{background:#e2e8f0;color:#334155}
.pill{display:inline-flex;align-items:center;gap:4px;padding:0 5px;border-radius:4px;background:var(--line-2);
  font-size:10px;color:var(--ink-2);font-weight:500}
.lock-ic{color:#b45309}

/* tabs */
.tabs{display:flex;gap:1px;border-bottom:1px solid var(--line);margin-bottom:8px;flex-wrap:wrap}
.tabs a{padding:4px 9px;font-size:11.4px;color:var(--ink-2);border-bottom:2px solid transparent;font-weight:500}
.tabs a:hover{color:var(--brand);text-decoration:none}
.tabs a.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.tabs a .n{background:var(--line-2);border-radius:9px;padding:0 5px;font-size:9.8px;margin-left:4px}

/* pagination */
.pager{display:flex;gap:4px;align-items:center;justify-content:flex-end;padding:5px 10px;font-size:10.8px;color:var(--ink-3)}
.pager a,.pager span{padding:2px 7px;border:1px solid var(--line);border-radius:4px;background:#fff}
.pager .cur{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:flex-start;
  justify-content:center;z-index:100;padding:26px 12px;overflow-y:auto}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:8px;box-shadow:var(--shadow-lg);width:100%;max-width:500px;animation:pop .14s ease-out}
.modal.wide{max-width:740px}
@keyframes pop{from{transform:translateY(-6px);opacity:.6}to{transform:none;opacity:1}}
.modal-head{padding:8px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.modal-head h3{margin:0;font-size:12.8px}
.modal-head .close{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:17px;line-height:1}
.modal-body{padding:10px 12px}
.modal-foot{padding:8px 12px;border-top:1px solid var(--line);display:flex;gap:7px;justify-content:flex-end;background:#fafbfc;border-radius:0 0 8px 8px;flex-wrap:wrap}

/* ---------- login ---------- */
.login-page{min-height:calc(100vh / var(--ui-zoom,1));display:grid;grid-template-columns:1.05fr .95fr}

/* --- artwork panel --- */
.login-art{position:relative;overflow:hidden;color:#fff;padding:40px;
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(150deg,#0d1f31,#12283f 28%,#1f4e79 62%,#2f6ea6);
  background-size:220% 220%;animation:la-bg 28s ease-in-out infinite}
@keyframes la-bg{0%{background-position:0% 20%}50%{background-position:100% 80%}100%{background-position:0% 20%}}

/* slow drifting light */
.la-glow{position:absolute;width:130%;height:130%;top:-30%;left:-25%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(120,190,255,.30),rgba(120,190,255,0) 70%);
  animation:la-drift 22s ease-in-out infinite alternate}
@keyframes la-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(14%,10%,0) scale(1.12)}
  100%{transform:translate3d(-6%,18%,0) scale(1.04)}}

/* faint graph paper that slides diagonally */
.la-grid{position:absolute;inset:-60px;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:46px 46px;animation:la-grid 40s linear infinite}
@keyframes la-grid{from{transform:translate3d(0,0,0)}to{transform:translate3d(46px,46px,0)}}

/* ICD codes drifting upward */
.la-chips{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.la-chips span{position:absolute;bottom:-6%;font:600 11.5px/1 "Consolas","SF Mono",Menlo,monospace;
  color:#bfe0ff;letter-spacing:.5px;white-space:nowrap;opacity:0;
  padding:3px 7px;border:1px solid rgba(191,224,255,.35);border-radius:20px;
  animation-name:la-rise;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes la-rise{
  0%{transform:translate3d(0,0,0) scale(.86);opacity:0}
  12%{opacity:.30}
  80%{opacity:.30}
  100%{transform:translate3d(0,-108vh,0) scale(1.04);opacity:0}}

/* rhythm strip that keeps redrawing itself */
.la-ecg{position:absolute;left:0;right:0;bottom:5%;width:100%;height:110px;pointer-events:none}
.la-ecg path{fill:none;stroke:#8fd0ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 5px rgba(143,208,255,.55));
  animation:la-ecg 7s cubic-bezier(.4,0,.5,1) infinite}
@keyframes la-ecg{
  0%{stroke-dashoffset:1000;opacity:0}
  6%{opacity:.75}
  62%{stroke-dashoffset:0;opacity:.75}
  86%,100%{stroke-dashoffset:0;opacity:0}}

.la-body{position:relative;z-index:2}
.login-art h1{font-size:27px;margin-bottom:10px;line-height:1.15;letter-spacing:-.3px}
.login-art p{color:#c6d9ea;max-width:400px;font-size:13px}
.login-art ul{list-style:none;padding:0;margin:20px 0 0;max-width:400px}
.login-art li{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px;color:#dce9f5;font-size:12px}
.login-art li svg{flex:0 0 15px;margin-top:1px;color:#8fc0e8}

/* --- form panel --- */
.login-side{display:flex;align-items:center;justify-content:center;padding:28px;background:#fff}
.login-box{width:100%;max-width:330px}
.login-box .lb-brand{display:flex;align-items:center;gap:9px;margin-bottom:20px}
.login-box .lb-brand .brand-mark{transition:transform .25s cubic-bezier(.2,.8,.3,1.4)}
.login-box .lb-brand:hover .brand-mark{transform:rotate(-6deg) scale(1.06)}
.login-box h2{font-size:18px;margin-bottom:2px}
.login-box input{padding:7px 9px;font-size:13px;transition:border-color .15s,box-shadow .15s,transform .15s}
.login-box input:focus{transform:translateY(-1px)}
.login-box label{transition:color .15s}
.login-box .form-row:focus-within label{color:var(--brand-lt)}

/* submit button: sheen on hover, spinner while posting */
.lb-submit{position:relative;overflow:hidden;transition:transform .12s,box-shadow .2s}
.lb-submit:hover{box-shadow:0 4px 14px rgba(31,78,121,.30)}
.lb-submit:active{transform:translateY(1px)}
.lb-submit::after{content:"";position:absolute;top:0;bottom:0;left:-140%;width:55%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-20deg);pointer-events:none}
.lb-submit:hover::after{animation:lb-sheen .75s ease-out}
@keyframes lb-sheen{to{left:150%}}
.lb-spin{display:none;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:lb-spin .7s linear infinite}
@keyframes lb-spin{to{transform:rotate(360deg)}}
.lb-submit.is-loading .lb-label{display:none}
.lb-submit.is-loading .lb-spin{display:block}
.lb-submit.is-loading::after{display:none}

/* entrance + error motion */
.rise{animation:rise .55s cubic-bezier(.22,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)}}

@media(max-width:900px){.login-page{grid-template-columns:1fr}.login-art{display:none}}

/* honour the visitor's motion preference */
@media(prefers-reduced-motion:reduce){
  .login-art,.la-glow,.la-grid,.la-chips span,.la-ecg path,.rise,.shake,.lb-spin{
    animation:none !important}
  .rise{opacity:1 !important;transform:none !important}
  .la-ecg path{stroke-dashoffset:0;opacity:.6}
  .la-chips span{opacity:.22}
  .lb-submit::after{display:none}
  .login-box input:focus{transform:none}
}

/* ==========================================================================
   Coding workspace
   ========================================================================== */
/* Each field is as wide as what is in it - not one twelfth of the bar.
   The chart number is 70 characters in real client data and is the field a
   coder reads most; Gender is one. Giving them the same column cut the first
   and wasted the second. */
.demo-bar{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:4px 9px;margin-bottom:8px;
  display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:14px;row-gap:2px;
  position:sticky;top:var(--topbar-h);z-index:20}
.demo-bar .d{min-width:0;padding:1px 0;flex:0 1 auto}
/* the chart number takes what it needs, and is the one allowed to grow */
/* The chart number takes the width of the NUMBER, and no more.
   flex-grow:1 made it absorb all the leftover space on the row, so a 500px
   number sat in a 640px box and left a 140px hole before the next field - the
   bar looked broken even though nothing was truncated. It still may not exceed
   the cap, because a pathological number must not push everything else off. */
/* min-width because the chart number is the only value that swings from 8
   characters to 70, and it is FIRST - so without a floor every field behind it
   moves ~350px between one chart and the next, and a bar you have to re-find on
   every chart is a bar you read label-first instead of by position.
   620 -> 640 because the copy control now lives inside this box: buying its
   ~18px out of new width rather than out of the number means the cap still
   bites exactly where it did before the button existed. */
.demo-bar .d.d-chart{flex:0 1 auto;min-width:220px;max-width:640px}
.demo-bar .k{font-size:8.4px;text-transform:uppercase;letter-spacing:.45px;color:var(--ink-3);font-weight:700;
  line-height:1.3;white-space:nowrap}
.demo-bar .v{font-size:11.6px;font-weight:600;color:var(--ink);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A 70-character number in 12.8px would push everything else off the bar. It
   is monospace and read a character at a time, so it survives being smaller
   far better than it survives being cut in half. */
.demo-bar .v.big{font-size:11.2px;color:var(--brand);letter-spacing:-.2px}
.demo-bar .v small{font-weight:400;color:var(--ink-3);font-size:9.4px}
/* A field whose value is just "-" earns a narrower slot, not a full one. */
.demo-bar .d.d-empty{opacity:.55}
.demo-bar .d.d-empty .v{color:var(--ink-3)}

/* The value and its control share one LINE. The button is a SIBLING of .v and
   never a child: .v is overflow:hidden with text-overflow:ellipsis, so inline
   content inside it is the first thing the ellipsis eats - the button would
   disappear at exactly the length that makes it worth having. */
.demo-bar .v-row{display:flex;align-items:center;gap:4px;min-width:0}
/* load-bearing: a flex item defaults to min-width:auto, and without this .v
   stops honouring its own overflow:hidden and a seventy-character number runs
   straight past the .d-chart cap and shoves Member off the bar. */
.demo-bar .v-row .v{min-width:0}

/* ---- the bar spans the bar -----------------------------------------------
   Every .d is flex:0 1 auto and the container never sets justify-content, so a
   line with room to spare has no consumer for the surplus and all of it lands
   at the right-hand end - 667px of white on a 1920 screen. Growing a data field
   was tried and reverted (see .d-chart above): the hole simply moved from the
   end of the row to the inside of the field, and a gap beside a label reads as
   a value that failed to render, which is worse.
   So the bar becomes two boxes. The RUN holds the roster facts and grows; the
   RAIL holds what the app will let you do with this chart and is welded to the
   right edge. The outer box does NOT wrap, and that is the whole trick: free
   space in a wrapping flex container is distributed per LINE, so anything
   anchored right - by auto margin, by space-between, or by a grown spacer -
   ends up flung to the far right of a short second row. Here only the run
   wraps, inside itself, and the rail cannot move.
   Additive on .db-split, so qa/audit.php and workflow/chart_view.php keep
   today's bar byte for byte until they are migrated. */
.demo-bar.db-split{flex-wrap:nowrap;align-items:stretch}
.demo-bar .db-run{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;
  align-items:flex-start;column-gap:14px;row-gap:2px}
/* Tinted AND outlined. The tint alone is var(--line-2) on white, a 1.06:1
   difference that disappears at this height; it is the border that makes this
   read as a container, and a container is what makes the space to its LEFT
   read as margin instead of as a missing field. */
.demo-bar .db-rail{flex:0 0 auto;display:flex;align-items:flex-start;
  column-gap:14px;row-gap:2px;padding:1px 8px;border-radius:4px;
  background:var(--line-2);border:1px solid var(--line)}

/* The boundary between the fields a coder reads OFF the scanned page - the four
   the confirm panel makes them tick - and the fields they only ever read OUT of
   the bar to paste somewhere else. It sits on the FIRST FIELD of the second
   group rather than on a wrapper box, so fields still wrap one at a time and a
   line still fills to its end; a wrapped group box leaves a hole at the end of
   the row above it. var(--line), not var(--line-2), because a 1px rule 20px
   tall in the palest token in the palette is not visible at all. */
.demo-bar .d.d-gstart{margin-left:10px;padding-left:11px;border-left:1px solid var(--line)}
/* d-empty dims the whole box, which would fade the group rule as well whenever
   the member id happens to be blank - and a landmark that comes and goes with
   the data is not a landmark. Dim the content, keep the rule. */
.demo-bar .d.d-gstart.d-empty{opacity:1}
.demo-bar .d.d-gstart.d-empty .k,.demo-bar .d.d-gstart.d-empty .v{opacity:.55}

@media(max-width:1100px){
  .demo-bar .d.d-chart{max-width:100%;min-width:0}
  /* down here the two halves cannot share a line, so the rail takes a whole row
     on purpose: a deliberate second row reads as two blocks, a ragged wrap
     reads as a mistake */
  .demo-bar.db-split{flex-wrap:wrap}
  .demo-bar .db-rail{flex:0 0 100%;background:none;border:0;border-radius:0;
    border-top:1px solid var(--line);margin-top:1px;padding:2px 0 0}
  .demo-bar .d.d-gstart{margin-left:0;padding-left:0;border-left:0}
}

.find-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:11px;text-align:center;margin-bottom:8px}
.find-box h2{font-size:13px;margin-bottom:1px}
.find-box p{color:var(--ink-3);font-size:11px;margin-bottom:0}
.find-input{display:flex;gap:6px;max-width:420px;margin:8px auto 0}
.find-input input{font-size:13px;padding:6px 10px;letter-spacing:.4px;font-family:"Consolas",monospace;text-align:center}
.find-input .btn{padding:6px 14px;font-size:11.8px}

.confirm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
@media(max-width:640px){.confirm-grid{grid-template-columns:1fr}}
.confirm-item{border:1.5px solid var(--line);border-radius:6px;padding:7px 9px;cursor:pointer;
  display:flex;gap:8px;align-items:flex-start;transition:border-color .12s,background .12s}
.confirm-item:hover{border-color:#94a3b8}
.confirm-item.on{border-color:var(--ok);background:var(--ok-bg)}
.confirm-item input{margin-top:2px;width:14px;height:14px;accent-color:var(--ok);flex:0 0 14px}
.confirm-item > span{display:block;min-width:0}
.confirm-item .k{display:block;font-size:9.4px;text-transform:uppercase;letter-spacing:.45px;color:var(--ink-3);font-weight:700;margin-bottom:1px}
.confirm-item .v{display:block;font-size:12.2px;font-weight:600;word-break:break-word}
.match-count{font-size:11px;color:var(--ink-2);margin-top:6px}
.match-count b{color:var(--ok)}

/* deliberately NO overflow:hidden - it would clip the ICD type-ahead */
.dos-card{border:1px solid var(--line);border-radius:5px;margin-bottom:7px;background:#fff}
.dos-card .dc-head{display:flex;align-items:center;gap:8px;padding:5px 9px;background:#f8fafc;
  border-bottom:1px solid var(--line);border-radius:4px 4px 0 0;flex-wrap:wrap}
.dos-card .dc-head .t{font-weight:600;font-size:11.6px}
.dos-card .dc-head .t .dates{color:var(--brand);font-family:"Consolas",monospace}
.dos-card .dc-head .meta{color:var(--ink-3);font-size:10.2px}
.dos-card .dc-head .actions{margin-left:auto;display:flex;gap:5px}
.dos-card .dc-body{padding:0}
/* Columns are the width of what goes in them and no wider. Stretching them to
   fill the pane spends horizontal space on padding that the chart next door
   needs - an ICD-10 code is seven characters, a page number is three. */
.code-table{width:auto;table-layout:fixed;border-collapse:collapse;font-size:11.4px}
.code-table th,.code-table td{overflow:hidden;text-overflow:ellipsis}
.code-table th{background:#fcfdfe;font-size:9.4px;text-transform:uppercase;letter-spacing:.35px;color:var(--ink-3);
  text-align:left;padding:3px 8px;border-bottom:1px solid var(--line-2);font-weight:700}
.code-table td{padding:4px 8px;border-bottom:1px solid var(--line-2)}
.code-table tr:last-child td{border-bottom:0}
.code-table .c{font-family:"Consolas",monospace;font-weight:700;color:var(--brand);font-size:12.2px}
.code-table .p{font-variant-numeric:tabular-nums;text-align:center}
/* code, delivery value and description share one cell */
.code-table .cd,.aud-tbl .cd{padding-top:5px;padding-bottom:5px}
.code-table .cd-code,.aud-tbl .cd-code{font-family:"Consolas",monospace;font-weight:700;
  color:var(--brand);font-size:12.2px}
.code-table .cd-out,.aud-tbl .cd-out{font-family:"Consolas",monospace;font-size:9.6px;color:var(--ink-3);
  background:#f1f5f9;border-radius:3px;padding:0 4px;margin-left:6px;vertical-align:1px}
.code-table .cd-desc,.aud-tbl .cd-desc{color:var(--ink-2);font-size:10.8px;line-height:1.35;margin-top:1px}
.aud-tbl .cd-hcc{margin-top:3px}
.aud-tbl .cd-hcc:empty{display:none}
.code-add{display:grid;grid-template-columns:186px 80px minmax(0,1fr) 74px;gap:5px;padding:6px 8px;
  background:#f8fafc;border-top:1px solid var(--line);border-radius:0 0 4px 4px;align-items:center}
@media(max-width:820px){.code-add{grid-template-columns:1fr}}
.code-add input{padding:4px 7px;font-size:11.6px}
.ac-wrap{position:relative}
.ac-list{position:absolute;top:calc(100% + 2px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:5px;box-shadow:var(--shadow-lg);max-height:252px;overflow-y:auto;z-index:200;display:none;min-width:330px}
.ac-list.open{display:block}
.ac-item{padding:4px 8px;cursor:pointer;border-bottom:1px solid var(--line-2);font-size:11px;line-height:1.3}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.hl{background:#eff6ff}
.ac-item .code{font-family:"Consolas",monospace;font-weight:700;color:var(--brand);margin-right:6px}
.ac-item .hcc{background:#dcfce7;color:#166534;font-size:8.6px;font-weight:700;padding:0 4px;border-radius:7px;margin-left:4px}
.ac-item .desc{color:var(--ink-2)}
.ac-empty{padding:8px;text-align:center;color:var(--ink-3);font-size:11.4px}

/* ---- one-row service line entry strip ---- */
.dos-strip{background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:var(--shadow);
  padding:6px 8px;margin-bottom:8px}
/* The service-line strip now sits in the right half of a split screen, so it
   has to fit ITS OWN column - not the window. A viewport media query cannot
   know how wide that column is (the coder drags the divider), and a rigid
   grid of nine fixed columns pushed the whole page into sideways scrolling.
   Wrapping flex needs no query: the fields flow onto a second row whenever
   the pane is too narrow, at any split position and any screen size. */
.ds-grid{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
/* The basis decides only WHEN a line wraps - the fields then grow to fill it.
   Keeping the bases modest means the whole strip stays on one row at a normal
   split, and wraps cleanly rather than overflowing when the pane is dragged
   narrow. */
.ds-grid > .ds-f{flex:1 1 96px;min-width:0}
.ds-grid > .ds-wide{flex:2 1 150px}          /* the provider look-up earns more */
.ds-grid > .ds-state{flex:0 0 62px}          /* two letters never need more */
.ds-grid > .ds-act{flex:0 0 auto;align-self:flex-end}
.ds-f{min-width:0}
.ds-f label{display:block;font-size:9.2px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--ink-3);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-f input,.ds-f select{padding:3px 6px;font-size:11.6px;height:24px}
.ds-f select{background-position:right 4px center;background-size:11px;padding-right:19px}
.ds-act .btn{height:24px;padding:0 10px}
.npi-row{display:grid;grid-template-columns:1fr auto;gap:4px;align-items:start}
.npi-row .btn{height:24px;padding:0 6px}
.ds-f .ac-wrap{line-height:0}
.ds-act .btn-group{flex-wrap:nowrap}
.ds-hints{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:4px;
  padding-top:4px;border-top:1px dashed var(--line-2);font-size:9.6px;line-height:1.3}
.ds-hints .dsh-lock{display:inline-flex;align-items:center;gap:3px;color:var(--warn);white-space:nowrap}
.ds-hints .dsh-npi{color:var(--ink-3);min-width:0}
@media(max-width:700px){
  .ds-grid > .ds-f{flex:1 1 132px}
  .ds-grid > .ds-act{flex:1 1 100%;margin-left:0}
}

/* ---- one-row filter bar (chart tracker etc.) ---- */
.filter-bar{background:#fff;border:1px solid var(--line);border-radius:5px;box-shadow:var(--shadow);
  padding:6px 8px;margin-bottom:8px;display:grid;gap:5px;align-items:start;
  grid-template-columns:148px 126px 116px 126px 86px 114px 114px minmax(128px,1fr) auto}
/* THE CHART TRACKER'S OWN TEN TRACKS (owner, 9 Oct: the To box was wider than Search).
   .filter-bar above lists NINE and this bar has TEN fields - Project, Batch, Audit, Coder, Lock, Copies,
   From, To, Search, buttons - so every field sat one track left of where it belonged and the single
   flexible track, minmax(128px,1fr), landed on To. To grew to fill the row; Search got `auto` and shrank.
   Here the flexible track is on Search, where the long text actually goes, and the two dates get a fixed
   width that fits MM/DD/YYYY plus the picker icon. */
.filter-bar-charts{grid-template-columns:148px 130px 124px 134px 88px 118px 118px 118px minmax(160px,1fr) auto}
.filter-bar-charts .ds-f input[type=date]{width:100%}
@media(max-width:1420px){.filter-bar{grid-template-columns:repeat(4,minmax(0,1fr)) auto}
  .filter-bar-charts{grid-template-columns:repeat(4,minmax(0,1fr)) auto}}
@media(max-width:900px){.filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-bar .ds-act{grid-column:span 2;justify-self:end}}

/* ---- thin figure strip that replaces a row of stat tiles ---- */
.stat-strip{display:flex;flex-wrap:wrap;align-items:stretch;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:4px 10px;margin-bottom:8px}
.stat-strip .s{padding:3px 15px 3px 0;margin-right:15px;border-right:1px solid var(--line-2);
  min-width:70px;border-radius:4px}
.stat-strip .s:last-child{border-right:0;margin-right:0;padding-right:0}
.stat-strip .k{font-size:8.8px;text-transform:uppercase;letter-spacing:.45px;color:var(--ink-3);font-weight:700;line-height:1.3}
.stat-strip .v{font-size:15px;font-weight:700;line-height:1.25}
.stat-strip a{color:inherit;display:block;margin:-3px -6px;padding:3px 6px;border-radius:4px;
  transition:background .12s}
.stat-strip a:hover{text-decoration:none;background:#f2f7fc}
.stat-strip a:hover .k{color:var(--brand-lt)}
/* leading caption so two strips on one page stay distinguishable */
.stat-strip .strip-lab{align-self:center;margin-right:14px;padding:2px 8px;border-radius:10px;
  background:#eaf2fa;color:var(--brand);font-size:8.6px;font-weight:800;text-transform:uppercase;
  letter-spacing:.7px;white-space:nowrap}

/* a bulk bar that stays visible and just disables its buttons */
.bulk-bar.bulk-persist{display:flex}
.chart-actions.bulk-bar{background:#fff;border-color:var(--line)}
.chart-actions .ca-stat.muted{color:var(--ink-3);font-weight:400}

/* scrollable list inside a modal (e.g. pick locked charts) */
.modal-scroll{max-height:min(46vh,340px);overflow:auto;border:1px solid var(--line);border-radius:4px}
.modal-scroll table.tbl th{position:sticky;top:0;z-index:2}
.ca-note{width:210px;height:26px;padding:3px 7px;font-size:11.4px}

/* ---- reports ---- */
.rep-filter{grid-template-columns:200px 130px 130px auto}
@media(max-width:700px){.rep-filter{grid-template-columns:repeat(2,minmax(0,1fr))}}
.page-head .rng{display:inline-block;margin-left:5px;padding:0 5px;border:1px solid var(--line);
  border-radius:9px;font-size:9.6px;color:var(--ink-3);background:#fff;line-height:1.6}
.page-head .rng:hover{border-color:var(--brand-lt);color:var(--brand-lt);text-decoration:none}
.page-head .rng.on{background:var(--brand);border-color:var(--brand);color:#fff}

.mini-chart{display:flex;align-items:flex-end;gap:3px;overflow-x:auto;padding-bottom:2px}
.mc-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  min-width:26px;flex:1 0 26px;cursor:default}
.mc-n{font-size:9.2px;font-weight:700;color:var(--ink-2);line-height:1.2}
.mc-bar{display:block;width:100%;max-width:22px;background:linear-gradient(180deg,#3d7fb8,var(--brand));
  border-radius:2px 2px 0 0;transition:background .12s}
.mc-col:hover .mc-bar{background:var(--brand-lt)}
.mc-d{font-size:8.4px;color:var(--ink-3);margin-top:2px;line-height:1.2;white-space:nowrap}

/* ---- collapsible rules strip ---- */
.rules-strip{background:#fff;border:1px solid var(--line);border-radius:5px;margin-bottom:8px;font-size:10.6px}
.rules-strip summary{cursor:pointer;padding:5px 9px;color:var(--ink-2);font-weight:600;list-style:none}
.rules-strip summary::-webkit-details-marker{display:none}
.rules-strip summary::before{content:"\25B8";display:inline-block;margin-right:5px;transition:transform .15s}
.rules-strip[open] summary::before{transform:rotate(90deg)}
/* tick-list used for choosing a project's HCC models */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.pick{display:flex;gap:7px;align-items:flex-start;padding:7px 9px;border:1px solid var(--line);
  border-radius:5px;background:#fff;cursor:pointer;font-size:11.6px;line-height:1.3}
.pick:hover{border-color:var(--brand-lt);background:#fbfdff}
.pick.on{border-color:var(--brand);background:#f5f9ff}
.pick input{margin-top:2px;flex:0 0 auto}
.rs-body{display:flex;flex-wrap:wrap;gap:4px 16px;padding:0 9px 7px;color:var(--ink-3)}
.rs-body b{color:var(--ink-2)}

/* ==== the one-screen workspace ==========================================
   The coding and audit screens fill the window exactly:

     demographic strip   (its own height)
     chart | work        (takes whatever is left, both panes scroll inside)
     action bar          (its own height, always reachable)

   Nothing here scrolls the page, so the Submit button never walks off the
   bottom of the screen and the chart never has to be scrolled back to.     */
/* The shell is pinned to exactly one screen. This has to be done on the
   ANCESTORS: .content carries flex:1, whose flex-basis:0 beats any height set
   further down, and .app has min-height:100vh so it simply grows. Capping the
   height here and letting min-height:0 travel down is what allows the panes to
   scroll instead of the window. */
/* The workspace fills the screen at any density. Without dividing by the
   zoom, 100vh is measured in un-zoomed units and the shell stops short of the
   bottom of the screen the tighter the setting gets. */
.app-ws{height:calc(100vh / var(--ui-zoom,1));min-height:0;overflow:hidden}
.app-ws .main{min-height:0;height:calc(100vh / var(--ui-zoom,1))}
.content-ws{flex:1 1 auto;min-height:0;padding:8px 10px;
  display:flex;flex-direction:column;gap:6px;overflow:hidden}
.content-ws .demo-bar{position:static;flex:0 0 auto;margin-bottom:0}
.content-ws .flash{flex:0 0 auto}
/* The audit screen wraps everything in a <form>, so the bands are not always
   direct children. The form becomes a transparent flex column and the rules
   below match by descendant, not by child - otherwise the panes are clipped
   instead of scrolled, which loses content off the bottom of the screen. */
.content-ws > form{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px}
/* stretch, not start: with align-items:start the panes size to their content
   and grow the page. Stretched to the row height they stay put and scroll
   inside, which is the whole point of a fixed workspace. */
.content-ws .split{flex:1 1 auto;min-height:0;margin-bottom:0;align-items:stretch}
.content-ws .chart-actions{position:static;flex:0 0 auto;margin:0}
/* a workspace pane scrolls inside itself rather than growing the page */
.content-ws .split-pane{min-height:0;height:auto;overflow-y:auto;overflow-x:hidden}
.content-ws .split-left{position:static;height:100%}

/* ---- ultra-compact workspace ------------------------------------------
   A coder lives on this screen all day and wants to see as many codes at once
   as possible. Everything here is tighter than the rest of the app, and scoped
   to .content-ws so no other screen changes.                                */
.content-ws{gap:3px;padding:4px 6px}
.content-ws .ca-stat{font-size:9.6px}
.content-ws .ca-stat b{font-size:10.8px}
.content-ws .cv-name,.content-ws .cv-pick{font-size:9.8px}
.content-ws .cv-meta{font-size:8.6px}
.content-ws .rules-strip{font-size:9.6px}
.content-ws .demo-bar{padding:2px 6px;gap:1px 10px}
.content-ws .demo-bar .k{font-size:7px;letter-spacing:.3px}
.content-ws .demo-bar .v{font-size:9.8px;line-height:1.1}
.content-ws .demo-bar .v.big{font-size:10.6px}
.content-ws .demo-bar .d{padding:0}
/* Anything added to the bar without a twin down here renders at desktop size on
   the one screen whose height is fixed. .content-ws .demo-bar{gap:1px 10px} is a
   shorthand on the OUTER container only - the run and the rail are their own
   flex contexts and inherit nothing from it. */
.content-ws .demo-bar .db-run,.content-ws .demo-bar .db-rail{column-gap:10px;row-gap:1px}
.content-ws .demo-bar .db-rail{padding:0 6px}
/* .content-ws .demo-bar .d{padding:0} is (0,3,0) and sits LATER in this file
   than the .d-gstart rule, so without this twin the group rule loses its gap */
.content-ws .demo-bar .d.d-gstart{margin-left:7px;padding-left:8px}
.content-ws .demo-bar .v-row{gap:3px}
/* 10px against a 9.8 x 1.1 = 10.8px line box: align-items:center takes the
   taller of the two, so the bar grows by exactly nothing and the chart number
   is not nudged off the other eleven values' baseline. */
.content-ws .copy-btn{width:10px;height:10px}
.content-ws .copy-btn svg.ic{width:9px;height:9px;flex:0 0 9px;stroke-width:2.6}

.content-ws .dos-strip{padding:3px 5px;margin-bottom:4px}
.content-ws .ds-grid{gap:4px}
.content-ws .ds-f label{font-size:7.8px;margin-bottom:0}
.content-ws .ds-f input,.content-ws .ds-f select{height:19px;padding:1px 4px;font-size:10.2px}
.content-ws .ds-hints{margin-top:2px;padding-top:2px;font-size:8.4px;gap:8px}
.content-ws .ds-act .btn,.content-ws .npi-row .btn{height:19px;font-size:10px}

.content-ws .dos-card{margin-bottom:4px}
.content-ws .dc-head{padding:2px 6px}
.content-ws .dc-head .t{font-size:9.8px}
.content-ws .dc-head .meta{font-size:8.6px}
.content-ws .code-table{font-size:10px}
.content-ws .code-table th{padding:1px 5px;font-size:8px}
.content-ws .code-table td{padding:1px 5px}
.content-ws .code-table .cd{padding-top:2px;padding-bottom:2px;white-space:nowrap}
.content-ws .code-table .cd-code{font-size:10.6px}
.content-ws .code-table .cd-out{font-size:8.4px;padding:0 3px;margin-left:3px}
.content-ws .code-table select{height:18px;padding:0 3px;font-size:9.6px}
.content-ws .code-table .btn-xs{height:16px;padding:0 4px;font-size:8.8px}
.content-ws .code-add{padding:3px 5px;gap:3px;grid-template-columns:158px 60px minmax(0,1fr) 62px}
.content-ws .code-add input{height:19px;padding:1px 4px;font-size:10.2px}
.content-ws .badge{font-size:8.2px;padding:0 3px}

.content-ws .cv-bar{min-height:22px;padding:2px 5px}
.content-ws .chart-actions{padding:3px 7px;gap:6px}
.content-ws .chart-actions .btn{height:22px;font-size:10.4px}

/* the audit grid, same treatment */
.content-ws .aud-tbl{font-size:9.8px}
.content-ws .aud-tbl th{padding:1px 4px;font-size:7.8px}
.content-ws .aud-tbl td{padding:1px 4px}
.content-ws .aud-tbl .cd-desc{font-size:9.2px;line-height:1.2}
.content-ws .aud-tbl select,.content-ws .aud-tbl input{height:18px;padding:0 3px;font-size:9.6px}
.content-ws .aud-strip{padding:2px 6px;margin-bottom:4px}

/* ---- chart on the left, coding on the right ---- */
/* The chart is the document the coder is reading; the form beside it is a
   handful of short fields that wrap happily and leave most of their pane
   empty. On a 1366-wide laptop the old 44% left the chart 518px - a Letter
   page shrunk past comfortable reading - while the coding side sat with
   ~500px of unused height. */
.split{display:grid;grid-template-columns:58% 6px 1fr;gap:0;align-items:start;margin-bottom:8px}
/* min-width:0 lets a grid child shrink below its content's natural size, which
   is what stops a wide table inside one pane dragging the whole page sideways */
.split-pane{min-width:0;max-width:100%;overflow-x:hidden}
/* The document scrolls in its own column so the coder can keep the note in
   view while the code list grows down the right. */
.split-left{position:sticky;top:calc(var(--topbar-h) + 8px);
  height:calc((100vh / var(--ui-zoom,1)) - var(--topbar-h) - 74px)}
.split-right{min-width:0}
.split-bar{align-self:stretch;cursor:col-resize;background:transparent;position:relative}
.split-bar::after{content:"";position:absolute;left:2px;top:0;bottom:0;width:2px;background:var(--line);
  border-radius:2px;transition:background .12s}
.split-bar:hover::after{background:var(--brand)}
/* while the divider is being dragged the document must not eat the pointer */
.split.dragging .split-left{pointer-events:none}
.split.dragging{cursor:col-resize}
/* a chart with no document yet: give the coding side the room instead */
.split.split-nofile{grid-template-columns:270px 6px 1fr}
@media(max-width:1100px){
  .split,.split.split-nofile{grid-template-columns:1fr}
  .split-bar{display:none}
  .split-left{position:static;height:auto;max-height:60vh;margin-bottom:8px}
}

.cv{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);
  border-radius:5px;box-shadow:var(--shadow);overflow:hidden}
.cv-bar{display:flex;align-items:center;gap:8px;padding:4px 7px;border-bottom:1px solid var(--line);
  background:#fcfdfe;flex:0 0 auto;min-height:29px}
.cv-name{font-size:10.6px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cv-pick{flex:1;min-width:0;height:22px;padding:1px 5px;font-size:10.8px}
.cv-meta{font-size:9.4px;color:var(--ink-3);white-space:nowrap}
.cv-tools{display:flex;gap:3px;margin-left:auto;flex:0 0 auto}
.cv-body{flex:1 1 auto;overflow:auto;background:#f4f6f8;min-height:0}
.cv-frame{width:100%;height:100%;border:0;display:block;background:#fff}
.cv-imgwrap{padding:8px;text-align:center}
.cv-img{max-width:100%;height:auto;box-shadow:var(--shadow);background:#fff}
.cv-text{margin:0;padding:10px 12px;background:#fff;font-family:"Consolas",monospace;font-size:11.5px;
  line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--ink)}
.cv-none{padding:22px 16px;text-align:center;color:var(--ink-3)}
.cv-none .ic{width:26px;height:26px;opacity:.4;margin-bottom:6px}
.cv-none p{margin:3px 0}
/* The chart is on another screen, so the pane beside the grid is not earning
   its width - the coding side takes the room instead. A narrow strip stays, so
   the coder can bring the chart back without hunting for a control. */
/* Both the pane and the drag bar are display:none, so the grid is down to one
   item - it needs one column, not three. Leaving three sized "0 0 1fr" put the
   coding side into the first zero-width column and collapsed the screen. */
body.chart-elsewhere .content-ws .split{grid-template-columns:1fr}
body.chart-elsewhere .split-left,body.chart-elsewhere .split-bar{display:none}
.chart-away{display:none}
body.chart-elsewhere .chart-away{display:flex;align-items:center;gap:8px;
  background:var(--accent-2,#e3eef5);border:1px solid var(--line);border-radius:5px;
  padding:3px 8px;margin-bottom:5px;font-size:10.5px;color:var(--ink-2)}

/* ---- The folder a batch is dropped into ------------------------------
   The path is long and is going to be pasted into an SFTP client, so it is
   selectable, monospaced, and has a Copy button rather than needing a careful
   drag with a trackpad. */
.drop-path{display:flex;align-items:center;gap:8px;background:#0f1b26;color:#cfe0ee;
  border-radius:4px;padding:7px 10px;overflow-x:auto}
.drop-path code{font-size:11.4px;white-space:nowrap;font-family:"Consolas",monospace}
.drop-path .btn{flex:0 0 auto}

/* ---- Get next chart -------------------------------------------------
   The way into coding. It is large on purpose: it is pressed a couple of
   hundred times a day and nothing else on this screen competes with it. */
.next-box{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;margin-bottom:8px;text-align:center}
.btn-xl{font-size:14px;padding:9px 22px;font-weight:600}
.btn-xl svg{width:16px;height:16px}
.next-box .nb-sub{margin-top:7px;font-size:11px;color:var(--ink-3)}
.next-box .nb-empty{display:flex;gap:9px;align-items:flex-start;text-align:left;justify-content:center}
.next-box .nb-empty svg{width:18px;height:18px;color:var(--ok);flex:0 0 18px;margin-top:1px}
.find-fold{margin-bottom:8px}
.find-fold > summary{cursor:pointer;font-size:11px;color:var(--ink-3);padding:3px 2px}
.find-fold > summary:hover{color:var(--brand)}
.find-fold .find-box{margin-top:5px}

/* ---- Confirming the member, beside the chart ------------------------
   The coding side is not rendered while this is on screen, so this pane is
   the whole right-hand column. */
.confirm-pane{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px 14px}
.confirm-pane .cp-head{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.confirm-pane .cp-head h2{margin:0;font-size:13px}
.confirm-pane .cp-head svg{width:16px;height:16px;color:var(--brand)}
.confirm-pane .cp-intro{font-size:11.4px;color:var(--ink-2);line-height:1.45;
  background:var(--info-bg,#eff6ff);border-radius:4px;padding:7px 9px;margin-bottom:10px}
.confirm-pane .cp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media(max-width:900px){.confirm-pane .cp-grid{grid-template-columns:1fr}}
/* A field the roster never carried cannot be matched against anything, so it
   is shown and disabled rather than quietly left out - the coder should see
   that it is missing, not wonder why there are three. */
.confirm-pane .ci-blank{opacity:.5}
.confirm-pane .ci-blank .v{font-style:italic}
.confirm-pane .cp-count{margin-top:8px;font-size:11.4px;color:var(--ink-2)}
.confirm-pane .cp-count.cp-ok{color:var(--ok);font-weight:600}
.confirm-pane .cp-more{margin-top:10px}
.confirm-pane .cp-more > summary{cursor:pointer;font-size:10.6px;color:var(--ink-3)}
.confirm-pane .cp-foot{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line-2)}
.btn-lg{font-size:12.6px;padding:7px 16px;font-weight:600}
.confirm-pane .cp-note{margin:9px 0 0;font-size:10.4px;color:var(--ink-3);line-height:1.45}

/* A document whose filename is not this chart's number. Worth a second look:
   it is what a wrongly-mapped document looks like. */
.cv-name-odd{color:var(--warn);font-weight:600}

/* ---- The sidebar, slimmed ------------------------------------------
   176px of navigation next to a coding screen whose two panes are both short
   of width. Slim keeps every link - the icon stays, the label becomes its
   tooltip - so this costs nothing but the words.

   Keyed off the html element, not body, because the choice is applied in the
   head before the page is painted and body does not exist yet. */
html[data-navslim="1"] .sidebar{width:var(--side-slim);flex:0 0 var(--side-slim)}
html[data-navslim="1"] .sidebar .nav-item{justify-content:center;padding:5px 0;gap:0;position:relative}
html[data-navslim="1"] .sidebar .nav-item > span{display:none}
html[data-navslim="1"] .sidebar .brand-text{display:none}
html[data-navslim="1"] .sidebar .brand{justify-content:center;padding:7px 0}
html[data-navslim="1"] .sidebar-foot{padding:5px 0;justify-content:center}
html[data-navslim="1"] .sidebar-foot .sf-role{display:none}
html[data-navslim="1"] .sidebar .ui-density .udl{display:none}
html[data-navslim="1"] .sidebar .ui-density{justify-content:center}
/* A group heading is a bare text node, so it cannot be hidden by hiding a
   child. It goes entirely - and because Administration is folded by default,
   its section has to be forced open or those icons become unreachable with no
   heading left to click. */
html[data-navslim="1"] .sidebar .nav-group{display:none}
html[data-navslim="1"] .sidebar .nav-sec.hidden{display:block}
html[data-navslim="1"] .sidebar .nav-sec{border-top:1px solid rgba(255,255,255,.07);
  margin-top:3px;padding-top:3px}
/* the count would not fit beside a lone icon, so it rides on it */
html[data-navslim="1"] .sidebar .nav-badge{position:absolute;top:0;right:2px;
  font-size:7.6px;padding:0 3px;line-height:1.35}

/* The hamburger was hidden on desktop and only opened the phone drawer. Now it
   earns its place on both: slim here, drawer there. */
.menu-toggle{display:grid}
.menu-toggle.on{color:var(--brand-lt)}

/* ---- System Requirements -------------------------------------------
   The state column is what the page is for, so it stays put: same width on
   every table, so the eye runs down one line of badges rather than reading. */
.sysreq td{vertical-align:top}
.sysreq td:first-child{white-space:nowrap}
.sysreq .req-tag{margin-left:5px;padding:0 4px;border-radius:2px;background:#eef2f7;
  color:var(--ink-3);font-size:8.6px;font-weight:700;text-transform:uppercase;
  letter-spacing:.3px;vertical-align:1px}

/* The install script. Meant to be read and copied, so it keeps its line
   breaks and scrolls sideways rather than wrapping a command in half. */
.sh-block{margin:0;padding:8px 10px;background:#0f1b26;color:#cfe0ee;border-radius:4px;
  font-size:10.6px;line-height:1.65;overflow-x:auto;white-space:pre;max-height:420px;
  overflow-y:auto}

.sys-notes{margin:0;padding-left:16px;line-height:1.55}
.sys-notes li{margin-bottom:5px}
.sys-notes li:last-child{margin-bottom:0}

/* the documents on one chart, on the manage screen */
.doc-row{display:flex;align-items:center;gap:6px;padding:1px 0}
.doc-row .dr-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:10.5px}
.doc-row .dr-act{flex:0 0 auto;margin:0}

/* ---- the coding grid ------------------------------------------------ */
/* A delete control has no business being a full button in every row: it is
   the least-used thing on the row and was taking a whole column. */
.btn-x{border:0;background:none;cursor:pointer;color:var(--ink-3);font-size:14px;
  line-height:1;padding:0 3px;border-radius:3px}
.btn-x:hover{background:var(--err-bg,#fde8e8);color:var(--err)}
.code-table td.rm{text-align:right;padding-right:2px}
.code-table td.src{white-space:nowrap}
.code-table td.cd .cd-code{font-family:var(--mono,ui-monospace,monospace);font-weight:700}
.code-table td.p{text-align:center;font-variant-numeric:tabular-nums}
.code-table .rs-sel{width:100%;font-size:10.5px;padding:1px 2px}
/* a code the coder turned down stays visible but stops looking captured */
.code-table tr.cr-off td{opacity:.5}
.code-table tr.cr-off td.src,.code-table tr.cr-off td.cd{opacity:.85}

/* an encounter folds away; the header keeps saying what is inside it */
.dos-card{position:relative}
.dc-fold{position:absolute;left:2px;top:3px;z-index:2;border:0;background:none;cursor:pointer;
  color:var(--ink-3);padding:2px 3px;line-height:1;font-size:9px}
.dc-fold:hover{color:var(--ink)}
.dc-caret{display:inline-block;transition:transform .15s}
.dos-card.folded .dc-caret{transform:rotate(-90deg)}
.dos-card.folded .dc-body{display:none}
.dc-head{padding-left:18px}
.dc-count{margin-left:auto;font-size:10px;color:var(--ink-3);white-space:nowrap}
.dc-todo{margin-left:6px;font-size:10px;font-weight:700;color:var(--warn);white-space:nowrap}

/* what the chart says, against what was entered */
.ccheck{background:#fff;border:1px solid var(--line);border-radius:5px;margin-bottom:5px;
  font-size:10.4px;flex:0 0 auto}
.cc-head{display:flex;align-items:center;gap:8px;padding:3px 7px}
.cc-sum{color:var(--ink-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-body{border-top:1px solid var(--line-2);padding:3px 7px;max-height:132px;overflow:auto}
.cc-row{display:grid;grid-template-columns:14px 128px minmax(90px,1fr) 128px minmax(0,1.2fr);
  gap:6px;align-items:baseline;padding:1px 0;border-bottom:1px solid #f4f6f8}
.cc-row:last-child{border-bottom:0}
.cc-mark{font-weight:700;text-align:center}
.cc-lab{color:var(--ink-3)}
.cc-val{font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-say{white-space:nowrap}
.cc-det{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-ok{color:var(--ok)}
.cc-miss{color:var(--err);font-weight:700}
.cc-unk{color:var(--warn)}
.cc-note{padding:3px 0;color:var(--ink-3)}
@media(max-width:1100px){.cc-row{grid-template-columns:14px 1fr;}.cc-say,.cc-det{grid-column:2}}

/* our own PDF viewer - no download, no print, only what a coder needs */
.pv{display:flex;flex-direction:column;height:100%;min-height:0;background:#525659}
.pv-bar{flex:0 0 auto;display:flex;align-items:center;gap:3px;padding:3px 6px;
  background:#3c3f41;border-bottom:1px solid #2b2d2e}
.pv-bar .btn{height:19px;padding:0 7px;font-size:10.4px;background:#5a5e60;color:#f1f5f9;
  border-color:#6b7073}
.pv-bar .btn:hover{background:#6b7073}
.pv-pos{color:#e2e8f0;font-size:10.4px;display:inline-flex;align-items:center;gap:3px}
.pv-pos input{width:34px;height:19px;padding:0 3px;text-align:center;font-size:10.4px;
  background:#2b2d2e;color:#f1f5f9;border:1px solid #6b7073;border-radius:3px}
.pv-sep{width:1px;height:14px;background:#6b7073;margin:0 3px}
.pv-body{flex:1 1 auto;min-height:0;overflow:auto;padding:8px;text-align:center}
.pv-body canvas{box-shadow:0 1px 6px rgba(0,0,0,.45);background:#fff;max-width:none}
/* A page now arrives as a picture the server drew, not as a canvas the browser
   drew. The wrapper is what gives a quarter-turned page the right box to sit
   in - rotating the image alone leaves its old footprint behind. */
.pgv-wrap{position:relative;display:inline-block;margin:0 auto;background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.45)}
.pgv-wrap img{position:absolute;display:block;max-width:none;transform-origin:center center}
.pgv-busy{margin-left:auto;padding-right:2px;color:#cbd5e1;font-size:9.2px;
  letter-spacing:.5px;text-transform:uppercase}

/* ---- Reports: KPI cards, trends and sparklines ---- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px;margin-bottom:9px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:5px;padding:7px 9px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1px;min-width:0}
.kpi-k{font-size:9.4px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-v{font-size:20px;font-weight:600;line-height:1.15;color:var(--ink)}
.kpi-t{font-size:9.8px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
/* Direction is not the same as good news - the rejection rate rising is bad,
   so the colour comes from the metric and never from the arrow. */
.kpi-d{font-weight:700}
.kpi-d.good{color:var(--ok)} .kpi-d.bad{color:var(--err)} .kpi-d.flat{color:var(--ink-3)}
.kpi-s{margin-top:3px;line-height:0}
svg.spark{display:block;overflow:visible}
td svg.spark,th svg.spark{display:inline-block;vertical-align:middle}

/* ---- valid signature, per service line (CMS contract-level RADV) ---- */
/* Narrow on purpose: it sits between State and the Add button on a grid that is
   already full, and Yes/No needs less room than any other control on the row. */
.ds-grid .ds-sig{min-width:104px}
.ds-grid .ds-sigwhy{min-width:210px}
.ds-grid .ds-sigtext{min-width:180px}
.sig-yn{display:inline-flex;gap:10px;align-items:center;height:26px}
.sig-yn label{display:inline-flex;align-items:center;gap:3px;margin:0;font-size:11px;
  font-weight:600;color:var(--ink-2);cursor:pointer;text-transform:none;letter-spacing:0}
.sig-yn input{width:13px;height:13px;margin:0;accent-color:var(--brand)}
/* An unanswered signature is not an acceptable one - it has to look unfinished. */
.sig-yn.missing{outline:1px solid var(--err);border-radius:4px;padding:0 4px}

/* the grain switch - daily / weekly / monthly */
.grain{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.grain a{padding:2px 9px;font-size:10.4px;color:var(--ink-2);background:#fff;border-right:1px solid var(--line)}
.grain a:last-child{border-right:0}
.grain a:hover{background:var(--line-2);text-decoration:none}
.grain a.on{background:var(--brand);color:#fff;font-weight:600}
/* The page area takes focus so the arrow keys turn pages. A click should not
   draw a ring - the coder knows where they clicked - but a keyboard user
   arriving by Tab has to be able to see where they are. */
.pv-body:focus{outline:none}
.pv-body:focus-visible{outline:2px solid var(--accent,#2563eb);outline-offset:-2px}

/* HL7 reads as segments, not as one long pipe-delimited line */
.hl7 .hl7-line{padding:1px 0;border-bottom:1px solid #f1f5f9}
.hl7 .hl7-seg{display:inline-block;min-width:34px;font-weight:700;color:var(--brand)}
.hl7 .hl7-pipe{color:#cbd5e1}

/* ---- chart actions: horizontal bar pinned to the bottom ---- */
.chart-actions{position:sticky;bottom:0;z-index:25;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:5px;padding:6px 10px;margin-top:8px;
  box-shadow:0 -3px 12px rgba(16,24,40,.10)}
.chart-actions .ca-stat{font-size:10.6px;color:var(--ink-3);white-space:nowrap}
.chart-actions .ca-stat b{color:var(--ink);font-size:12px;margin-left:3px}
.chart-actions .ca-gap{flex:1 1 auto;min-width:8px}
.chart-actions .btn{height:26px}

.side-panel{position:sticky;top:calc(var(--topbar-h) + 10px)}
.mini-list{list-style:none;margin:0;padding:0}
.mini-list li{padding:4px 0;border-bottom:1px solid var(--line-2);font-size:11px}
.mini-list li:last-child{border-bottom:0}
.mini-list .cn{font-weight:600;font-family:"Consolas",monospace}

.toast-wrap{position:fixed;top:46px;right:10px;z-index:200;display:flex;flex-direction:column;gap:6px;max-width:340px}
.toast{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:6px;
  box-shadow:var(--shadow-lg);padding:7px 10px;font-size:11.4px;animation:slide .16s ease-out}
.toast.ok{border-left-color:var(--ok)} .toast.err{border-left-color:var(--err)} .toast.warn{border-left-color:var(--warn)}
.toast b{display:block;margin-bottom:1px}
@keyframes slide{from{transform:translateX(12px);opacity:0}to{transform:none;opacity:1}}

/* ---- QA audit: one line per code ---- */
.aud-strip{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:5px;box-shadow:var(--shadow);padding:6px 9px;margin-bottom:8px}
.aud-strip.err{border-left-color:var(--err);background:#fffafa}
.aud-strip .as-lab{font-size:9.2px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3)}
.aud-strip .as-desc{font-weight:600;font-size:11.6px}
.aud-strip .as-meta{font-size:10.2px;color:var(--ink-3)}

/* correct / error radio pair, used at every level */
.as-rd{display:inline-flex;gap:9px;align-items:center;white-space:nowrap;margin-left:auto}
.as-rd .ae-lab{font-size:9.2px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3)}
.as-rd label{display:inline-flex;align-items:center;gap:3px;margin:0;font-size:10.6px;font-weight:600;
  color:var(--ink-2);cursor:pointer;text-transform:none;letter-spacing:0}
.as-rd input{width:13px;height:13px;margin:0;accent-color:var(--brand)}

/* the finding controls stay hidden until Error is picked */
.ad-wrap{display:none;gap:4px;align-items:center;min-width:0;flex:1}
.err .ad-wrap,tr.err .ad-wrap{display:flex}
.ad-cat{width:154px;flex:0 0 154px}
.ad-sev{width:74px;flex:0 0 74px}
.ad-note{flex:1;min-width:90px}
.ad-wrap select,.ad-wrap input{padding:2px 5px;font-size:11px;height:22px}
.ad-wrap select{background-position:right 4px center;background-size:11px;padding-right:18px}

.aud-dos-head{flex-wrap:wrap;gap:8px}
.aud-dos-head .t{font-size:11.6px;font-weight:600}
.aud-dos-head .meta{color:var(--ink-3);font-size:10.4px}
.aud-enc-detail{display:none;padding:5px 9px;background:#fffafa;border-bottom:1px solid var(--line)}
.aud-enc-detail.err{display:block}
.aud-enc-detail .ad-wrap{display:flex}

.aud-tbl tr.err{background:#fffafa}
.aud-tbl td{vertical-align:middle}
.aud-tbl td.as-rd{display:table-cell}
.aud-tbl td.as-rd label{margin-right:7px}

.aud-add{padding:5px 9px;background:#f8fafc;border-top:1px solid var(--line);border-radius:0 0 4px 4px}
.aud-add input{padding:3px 6px;font-size:11.4px;height:23px}
.aud-add-row{display:grid;grid-template-columns:170px 78px auto minmax(0,1fr);gap:5px;align-items:center;margin-bottom:3px}
.aud-add-row .qa-msg{color:var(--ink-3)}
.aud-add-row.bad input{border-color:var(--err)}
.aud-add-row.bad .qa-msg{color:var(--err)}
.aud-add-foot{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:2px}
/* the provider signature, visible on every service line of the audit */
.aud-sig{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 9px;border-bottom:1px solid var(--line);background:#fcfcfd}
.aud-sig .as-lab{font-size:9.2px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3)}
.aud-sig select,.aud-sig input[type=text]{height:23px;padding:2px 6px;font-size:11.4px;max-width:260px}
/* .btn and the form controls set a display of their own, which beats the bare
   hidden attribute - so a Save button meant to wait for a change showed at once */
.aud-sig [hidden],.aud-add [hidden]{display:none!important}
/* an Error still waiting for its category or note */
.ad-wrap.need .ad-cat,.ad-wrap.need .ad-note{outline:2px solid var(--err);outline-offset:0}

/* ===== ONE AUDIT INTERFACE =========================================
   The detail slot of app/views/partials/_audit_panel.php, which our QA audit
   screen and the client's Quality Review screen both draw. It lives in app.css
   because app.css is the one stylesheet both layouts load: putting it in
   clientqa.css would style one screen and not the other, which is the split
   this whole change exists to close.

   STACKED, not inline. The slot sits in the Finding column of the audit table,
   which is about 150px wide in a split pane, and it now holds five controls
   rather than three - the code that applies instead and the page that shows it
   came to our side from the client's. Laid out on one wrapping line, the
   labels wrapped into towers ("WHAT / IS / WRONG") and the note ran off the
   right edge. A label above its control reads at 150px and at 600px, and is
   one layout for both screens. */
/* The slot wraps: the note sits UNDER the fields, not beside them. .ad-wrap
   is a one-line row, and in a 190px table cell the note label printed on
   top of the category select. */
.as-panel{min-width:0;align-items:flex-start;flex-wrap:wrap}
/* align-content:flex-start is NOT optional. A wrapping flex container
   distributes spare height across its LINES by default, and in a tall table
   cell that stretched every select and every textarea to about 150px - two
   empty boxes and a label printed over its own field. */
.as-panel-grid{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:flex-start;
  align-content:flex-start;align-self:flex-start;min-width:0;flex:1}
/* Sentence case, not caps. "CODE THAT APPLIES INSTEAD" is four lines of
   tower in a table cell; "Code that applies instead" is one or two. */
.as-lab-f,.as-note-lab{display:flex;flex-direction:column;align-items:stretch;gap:1px;margin:0;
  flex:1 1 100%;min-width:0;
  font-size:10px;font-weight:600;line-height:1.25;color:var(--ink-3)}
.as-lab-f select,.as-lab-f input,.as-note-lab textarea{width:100%;min-width:0;max-width:100%;
  flex:0 0 auto;font-weight:400;color:var(--ink)}
.as-lab-f select,.as-lab-f input{height:22px}
.as-note-lab textarea{height:34px;min-height:34px;padding:2px 5px;font-size:11px;resize:vertical}
.as-fields{display:flex;flex-wrap:wrap;gap:1px 8px;border:1px solid var(--line);
  border-radius:4px;padding:2px 6px;margin:0;flex:1 1 100%;min-width:0}
.as-fields legend{font-size:10px;font-weight:600;color:var(--ink-3);padding:0 3px}
.as-chk{display:inline-flex;align-items:center;gap:3px;font-size:10.4px;white-space:nowrap;margin:0;
  font-weight:400;color:var(--ink)}
.as-chk input{width:12px;height:12px;margin:0}
/* These two are sentences, not fields. */
.as-why{flex-basis:100%;width:100%;color:var(--err);font-size:10.6px;margin:0 0 3px}
.as-fd{flex-basis:100%;width:100%;font-size:10.4px;margin:3px 0 0;color:var(--ink-2)}
.as-icdhint{font-size:10px;color:var(--ink-3)}
/* The slot is wider than a table cell wherever it is not in one - the chart
   strip and the encounter card - so there it goes back to one line. */
.aud-strip .as-panel-grid,.aud-enc-detail .as-panel-grid{align-items:center}
.aud-strip .as-lab-f,.aud-enc-detail .as-lab-f{flex:0 1 auto}
.aud-strip .as-note-lab,.aud-enc-detail .as-note-lab{flex:1 1 200px}
.aud-strip .as-note-lab textarea,.aud-enc-detail .as-note-lab textarea{height:22px;min-height:22px}
.aud-strip .as-lab-f select,.aud-strip .as-lab-f input,
.aud-enc-detail .as-lab-f select,.aud-enc-detail .as-lab-f input{width:auto;max-width:170px}
/* A control that is refused rather than removed. It has to READ as refused, or
   the reason in its title is the only sign and nobody hovers a disabled box. */
.as-surface [disabled],.as-surface [aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.as-surface .btn[aria-disabled="true"]{pointer-events:none}

/* score pill in the decision bar */
.score-ring{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:24px;
  border-radius:12px;font-weight:700;font-size:12px;padding:0 9px;
  border:2px solid var(--ok);color:var(--ok);background:var(--ok-bg)}
.score-ring.mid{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.score-ring.low{border-color:var(--err);color:var(--err);background:var(--err-bg)}
.aud-actions .ca-comment{flex:1 1 240px;min-width:180px;height:24px;min-height:24px;padding:3px 7px;
  font-size:11.4px;resize:none;transition:height .15s}
.aud-actions .ca-comment:focus{height:52px}

@media(max-width:1180px){
  .ad-cat{width:130px;flex:0 0 130px}
  /* only the explanatory hint - never a row's refusal message */
  .aud-add-foot .small{display:none}
}

/* progress bar */
.bar{height:5px;background:var(--line-2);border-radius:3px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--brand);border-radius:3px}
.bar.green > i{background:var(--ok)}

/* checkbox column */
.cbx{width:28px;text-align:center}
.cbx input{width:13px;height:13px;accent-color:var(--brand);cursor:pointer}
.bulk-bar{display:flex;align-items:center;gap:7px;padding:6px 9px;background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:4px;margin-bottom:7px;font-size:11.4px;flex-wrap:wrap}
.bulk-bar .n{font-weight:700;color:var(--brand)}
.bulk-bar .sp{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}

/* key/value blocks */
.kv{display:grid;grid-template-columns:118px 1fr;gap:2px 8px;font-size:11.4px}
.kv dt{color:var(--ink-3);font-weight:500}
.kv dd{margin:0;font-weight:500}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 8px 14px;border-left:2px solid var(--line);font-size:11px}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li:before{content:"";position:absolute;left:-5px;top:2px;width:8px;height:8px;border-radius:50%;
  background:#fff;border:2px solid var(--brand-lt)}
.timeline .t{font-weight:600}
.timeline .m{color:var(--ink-3);font-size:10.2px}

@media(max-width:1000px){
  .sidebar{position:fixed;left:calc(-1 * var(--side-w));transition:left .2s}
  .sidebar.open{left:0;box-shadow:var(--shadow-lg)}
  .menu-toggle{display:grid}
  .demo-bar{position:static}
}
@media print{
  .sidebar,.topbar,.page-head .actions,.btn,.copy-btn{display:none !important}
  .content{padding:0}
  .card{box-shadow:none;border-color:#ccc}
}

/* client-assistance action + the per-code comment pickers */
.btn-info{background:var(--purple);border-color:var(--purple);color:#fff}
.btn-info:hover{filter:brightness(1.07)}
.cmt-sel{width:100%;height:22px;padding:1px 4px;font-size:10.5px;border:1px solid var(--line-2);
  border-radius:4px;background:#fff;color:var(--ink);font-family:inherit}
.cmt-sel:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 2px rgba(31,78,121,.12)}
.fix-in{width:100%;max-width:96px;height:22px;padding:1px 5px;font-size:11px;border:1px solid var(--brand);
  border-radius:4px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
.fix-in:focus{outline:0;box-shadow:0 0 0 2px rgba(31,78,121,.15)}

/* type-ahead rendered on <body> so a scrolling table cannot clip it */
.ac-fixed{position:fixed;left:0;top:0;right:auto;z-index:1200;max-height:260px;overflow-y:auto;
  box-shadow:0 6px 20px rgba(15,23,42,.18)}


/* --- rendered documents (Doc::render output) -----------------------------
   A reading column, not an app screen. The measure is capped because these
   are papers somebody reads end to end - a full-width line of body text at
   this font size is genuinely hard to follow. Printing matters here: the
   owner will hand these to a health plan, so the print rules drop the app
   chrome and let the text run. */
.doc{max-width:68ch;font-size:12px;line-height:1.62;color:var(--ink-1)}
.doc h2{font-size:13.5px;margin:18px 0 6px;padding-bottom:3px;border-bottom:1px solid var(--line)}
.doc h3{font-size:12.4px;margin:15px 0 5px}
.doc h4,.doc h5,.doc h6{font-size:11.8px;margin:13px 0 4px;color:var(--ink-2)}
.doc h2:first-child,.doc h3:first-child{margin-top:0}
.doc p{margin:0 0 9px}
.doc ul,.doc ol{margin:0 0 9px;padding-left:20px}
.doc li{margin:0 0 3px}
.doc hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.doc code{font-family:ui-monospace,Consolas,monospace;font-size:11px;
  background:var(--chip-bg,#f1f5f9);padding:1px 4px;border-radius:3px}
.doc a{color:var(--link,#1d4ed8)}
.doc blockquote{margin:0 0 9px;padding:6px 11px;border-left:3px solid var(--line);
  background:var(--chip-bg,#f8fafc);color:var(--ink-2)}
.doc .doc-pre{margin:0 0 10px;padding:9px 11px;border:1px solid var(--line);border-radius:4px;
  background:var(--chip-bg,#f8fafc);overflow-x:auto}
.doc .doc-pre code{background:none;padding:0;font-size:10.8px;line-height:1.5}
/* Tables in a document are usually wider than the reading measure, so they get
   the full card width and scroll on their own rather than squeezing the prose. */
.doc .table-wrap{max-width:none;margin:0 0 11px}
.doc .tbl td{vertical-align:top}

@media print{
  .sidebar,.topbar,.actions,.nav-group,.nav-sec,.flash-wrap{display:none !important}
  .card,.card-body{border:0 !important;box-shadow:none !important;padding:0 !important}
  .doc{max-width:none;font-size:11pt;line-height:1.5;color:#000}
  .doc a{color:#000;text-decoration:underline}
  .doc h2,.doc h3{page-break-after:avoid}
  .doc table,.doc .doc-pre,.doc blockquote{page-break-inside:avoid}
}

/* --- encounters found by the reader --------------------------------------
   A chart can hold twenty-three of these. As stacked panels they pushed the
   coding form off the screen, so the list is a GRID OF DATES - the thing a
   coder scans for - and only the one they click is drawn out below it.

   Visibility is the `hidden` attribute, not a `.hidden` class: this stylesheet
   defines `.hidden` only for `.nav-sec`, so the class hid nothing and the first
   version of this panel shipped with all fourteen encounters open. */
.enc-card{margin:0 0 10px}
.enc-card .card-head{display:flex;align-items:baseline;gap:8px;padding:6px 10px;
  border-bottom:1px solid var(--line)}
.enc-count{margin-left:auto;font-size:10.4px;color:var(--ink-3)}

.enc-grid{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px 0}
.enc-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;
  border:1px solid var(--line);border-radius:4px;background:var(--bg-1,#fff);
  font:inherit;font-size:11px;cursor:pointer;color:var(--ink-1);line-height:1.35}
.enc-chip:hover{border-color:var(--ink-3);background:var(--row-hover,#f1f5f9)}
.ec-date{font-variant-numeric:tabular-nums}
/* A chip carrying findings is the one worth opening, so it is the only one
   given weight. Everything else stays quiet. */
.ec-has{border-color:#bfdbfe;background:#eff6ff}
.ec-n{display:inline-block;min-width:14px;text-align:center;font-size:9.6px;font-weight:700;
  background:#1e3a8a;color:#fff;border-radius:8px;padding:0 4px}
.ec-x{color:var(--ink-3)}
.ec-nonbill{opacity:.55}
.ec-rejected{opacity:.4;text-decoration:line-through}
.ec-accepted{border-color:#bbf7d0;background:#f0fdf4}
.ec-tick{color:#16a34a;font-weight:700}
.ec-open{outline:2px solid var(--accent,#2563eb);outline-offset:-1px;
  border-color:transparent;background:var(--bg-1,#fff)}

.enc-hintline{padding:5px 10px 7px}

.enc-body{border-top:1px solid var(--line);padding:8px 10px 10px;
  background:var(--chip-bg,#f8fafc)}
.enc-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin:0 0 7px}
.enc-htype{font-size:11.4px}
.enc-hmeta{flex:1 1 auto;min-width:0;font-size:10.6px;color:var(--ink-3)}
.enc-conf{flex:0 0 auto;min-width:17px;text-align:center;font-weight:600;font-size:10.4px;
  padding:1px 5px;border-radius:3px}
.enc-conf-a{background:#dcfce7;color:#14532d}
.enc-conf-b{background:#dbeafe;color:#1e3a8a}
.enc-conf-c{background:#fef3c7;color:#78350f}

.enc-note{font-size:10.8px;background:#fffbeb;border:1px solid #fde68a;color:#78350f;
  border-radius:4px;padding:4px 8px;margin:0 0 7px}
.enc-note-quiet{background:transparent;border-color:var(--line);color:var(--ink-2)}
.enc-codes td{vertical-align:top;padding-top:3px;padding-bottom:3px}
.enc-quote{color:var(--ink-2);font-family:ui-monospace,Consolas,monospace;font-size:10.2px}
.enc-mk{font-size:9px;background:#dcfce7;color:#14532d;padding:0 4px;border-radius:3px;
  margin-left:4px;vertical-align:1px}
.enc-foot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px}
.enc-refused{margin-left:2px}

.enc-evi{margin-top:7px}
.enc-eviList{display:flex;flex-direction:column;gap:2px}
.enc-eviRow{display:flex;gap:8px;align-items:baseline;font-size:10.6px}
.enc-eviPage{flex:0 0 40px;color:var(--ink-3);font-family:ui-monospace,Consolas,monospace}
.enc-eviKind{flex:0 0 56px;color:var(--ink-3)}
.enc-eviLine{flex:1 1 auto;font-family:ui-monospace,Consolas,monospace;word-break:break-word}

.enc-hint{margin:0 0 6px;font-size:11px;color:#1e3a8a;background:#eff6ff;
  border:1px solid #bfdbfe;border-radius:4px;padding:5px 8px}
/* The one field the reader will not guess. */
input.needs-you{outline:2px solid #f59e0b;outline-offset:1px}
.enc-more{padding:6px 10px 0}
.enc-grid-rest{padding:6px 0 0}
.dsh-suggest{color:#78350f;background:#fffbeb;border:1px solid #fde68a;
  border-radius:3px;padding:1px 6px;font-size:10.6px;margin-left:6px}
.enc-summary{font-size:11px;color:var(--ink-2);margin:0 0 6px;max-width:74ch}
.enc-msg{margin:7px 10px 2px;font-size:11px;color:#1e3a8a;background:#eff6ff;
  border:1px solid #bfdbfe;border-radius:4px;padding:4px 8px}
.enc-msg-bad{color:#7f1d1d;background:var(--err-bg,#fef2f2);border-color:#fecaca}
.enc-chip[disabled]{opacity:.5;cursor:default}

/* What the reader found on the date just clicked. Deliberately plainer than the
   coding grid: these are not codes yet and must not look like rows that can be
   agreed with. */
.enc-codes{margin:4px 10px 8px;border:1px solid var(--line);border-radius:4px;
  background:var(--bg-2,#f8fafc);overflow:hidden}
.enc-codes .ecl-head{font-size:11px;color:var(--ink-2);padding:5px 8px;
  border-bottom:1px solid var(--line);max-width:82ch}
.enc-codes .ecl-tab{width:100%;border-collapse:collapse;font-size:11.5px}
.enc-codes .ecl-tab td{padding:3px 8px;border-top:1px solid var(--line-2,#eef1f5);
  vertical-align:top}
.enc-codes .ecl-tab tr:first-child td{border-top:0}
.enc-codes .ecl-code{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;
  width:1%}
.enc-codes .ecl-desc{color:var(--ink-1)}
.enc-codes .ecl-hcc{font-size:10.5px;color:#3730a3;background:#eef2ff;
  border:1px solid #c7d2fe;border-radius:3px;padding:0 4px;margin-left:5px;
  white-space:nowrap}
.enc-codes .ecl-pg{color:var(--ink-3);white-space:nowrap;text-align:right;width:1%;
  font-variant-numeric:tabular-nums}

/* The service-line header is the fold control, so it has to look like one. */
.dc-head{cursor:pointer;user-select:none}
.dc-head .actions{cursor:default}

/* The two decisions a client can make about machine reading. Given a box of
   their own because they change what the product DOES, not how it looks. */
.proj-ai{border:1px solid var(--line);border-radius:5px;padding:8px 11px 10px;margin:0 0 12px}
.proj-ai legend{font-size:10.4px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);padding:0 5px}
.proj-ai .ck{display:flex;gap:8px;align-items:flex-start;margin:0 0 9px;cursor:pointer}
.proj-ai .ck:last-child{margin-bottom:0}
.proj-ai .ck input{margin-top:2px;flex:0 0 auto}
.proj-ai .ck strong{display:block;font-size:11.4px;font-weight:600}
.proj-ai .ck .hint{display:block;margin-top:2px;max-width:82ch}

/* --- banded rows in the coding grid ---------------------------------------
   Every service line looked identical, and with two on screen it was easy to
   read one and act on the other - which on this screen means putting a code on
   the wrong date of service.

   Two earlier attempts were too faint: #f6f7f9 vs #eef8f0 was 2% apart in
   relative luminance, and #e9edf1 vs #d6ecdd was 4.7% - less than the hover
   step, so hovering separated rows more than the banding did. These are
   MEASURED at 16.9% apart (L 0.877 vs 0.708), which is what makes them read
   as two rows. Black text on the green sits near 14:1, so it is separation
   without glare.

   Colour is a reading aid and carries no meaning by itself. The date, the place
   of service and the code count all say what the row is, so somebody who cannot
   separate green from grey loses nothing - they still see a light row and a
   lighter one. Green is used because every other hue on this screen is already
   spoken for: red is delete and disagree, blue is a link, amber is a warning. */
.dos-card{background:#fff;border:1px solid var(--line);border-radius:5px;
  margin:0 0 7px;overflow:hidden}
.dos-card.dc-alt{background:#eef8f1}

.dos-card .dc-head{background:#eef1f5;border-bottom:1px solid #d3d9e0}
.dos-card.dc-alt .dc-head{background:#c2e3cc;border-bottom-color:#a2d0b0}

/* Hover must beat both bands, or the row stops feeling like a control. */
.dos-card .dc-head:hover{background:#dfe5ec}
.dos-card.dc-alt .dc-head:hover{background:#b0d9be}

/* The open one is the one being worked on: give it an unmistakable edge rather
   than another background, so it reads on top of the banding, not instead of it. */
.dos-card:not(.folded){box-shadow:inset 3px 0 0 var(--accent,#2563eb)}

.code-table tbody tr.cr-alt > td{background:#eef8f1}
/* A refused code must read as refused, not as "the green one". */
.code-table tbody tr.cr-off > td{background:transparent}
.proj-net textarea.ip-list{width:100%;max-width:420px;font-family:ui-monospace,Consolas,monospace;
  font-size:11px;margin:3px 0 2px}
.proj-net #ipListRow{margin:2px 0 0 24px}

/* Where-everything-is page: a plain yes/no that reads at a glance, because the
   question being answered ("is the patient data encrypted?") deserves an answer
   somebody can see from across a desk. */
.ib{display:inline-block;padding:1px 7px;border-radius:9px;font-size:10.6px;font-weight:700;
  letter-spacing:.02em}
.ib-ok{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.ib-no{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* The journey a chart takes. Numbered because the order is the point - a
   reviewer is asking where the record rests and when it goes. */
.flow{margin:0;padding:0 0 0 26px}
.flow li{margin:0 0 9px;padding:0 0 0 4px}
.flow .flow-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.flow .flow-where{font-size:11px;color:#1e3a8a;background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:3px;padding:0 6px}
.flow .flow-n{font-size:11.5px;color:var(--ink-2);max-width:96ch;margin-top:2px}

/* Folder upload: a plain bar, because the useful information is the per-file
   list underneath it - the bar only answers "is it still going". */
.fu-bar{height:6px;background:var(--line-2,#eef1f5);border-radius:3px;overflow:hidden}
.fu-bar-in{height:100%;width:0;background:var(--brand,#2563eb);transition:width .2s}
.ib-warn{background:#fffbeb;color:#78350f;border:1px solid #fde68a}
#fuRows td{vertical-align:top}

/* ---------- The four steps on the folder-import screen ----------
   A state variant of .flow, not a second component. The numbers stay the
   browser's own <ol> markers, so the sequence cannot drift from the markup and
   a step cannot be added without renumbering itself.

   The highlight is painted on an inner box, never on the <li>. A list marker
   sits outside the li's principal box and is not painted by its background, so
   tinting the li would run the rail between the number and its own title and
   leave the number outside the tint. The padding is identical in every state,
   so nothing shifts sideways as the current step moves down the list. */
.flow.gs{margin-bottom:0}
.gs-b{border-radius:4px;padding:4px 9px 6px 10px}
.gs-b.is-now{background:#f5f9ff;box-shadow:inset 3px 0 0 var(--brand)}
.gs-b.is-stop{background:var(--err-bg);box-shadow:inset 3px 0 0 var(--err)}
.gs-b.is-done .flow-n,.gs-b.is-na .flow-n,.gs-b.is-later .flow-n{color:var(--ink-3)}

.gs-st{font-size:11px;color:var(--ink-2);margin-top:3px;max-width:96ch}
.gs-st.ok{color:var(--ok)}
.gs-st.wait{color:var(--warn)}
.gs-st.bad{color:var(--err)}
.gs-do{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px}
.gs-do .gs-note{font-size:10.6px;color:var(--ink-3);max-width:70ch}

/* The Batch ID is the one value on this page that is read off the screen and
   typed by hand into another program. At the slab's 11.4px it would be a needle
   beside the folder path directly beneath it. */
.drop-path .gs-lab{flex:0 0 auto;font-size:8.8px;text-transform:uppercase;
  letter-spacing:.45px;font-weight:700;color:#cfe0ee;opacity:.72}
.drop-path .gs-id{font-size:18px;font-weight:700;letter-spacing:.5px;color:#fff;
  font-family:"Consolas",monospace;font-variant-numeric:tabular-nums}
/* .copy-btn inherits its colour, which is right on the dark slab; only the
   hover fill is a light-surface value that has to be replaced here. */
.drop-path .copy-btn:hover{background:#1e3a52}

@media print{
  .gs-b.is-now,.gs-b.is-stop{background:none;box-shadow:none}
}

/* The Send-charts command slab before a folder has been pasted. Plain prose in
   a slab meant for a command, so it cannot be mistaken for one and copied. */
#sndCmd.is-waiting{font-family:inherit;color:#9fb6c9;font-style:italic}

/* ---------- QA audit screen: density and finding state ----------
   The ICD description was a full line under every code and it dominated a
   screen an auditor reads all day beside a PDF. It is a hover mark now; the
   text is in title and aria-label so it is reachable without a mouse. */
.cd-what{display:inline-block;width:13px;height:13px;line-height:12px;text-align:center;
  border:1px solid var(--line);border-radius:50%;font-size:9px;font-weight:700;
  color:var(--ink-3);background:#fff;cursor:help;vertical-align:1px;margin-left:3px}
.cd-what:hover,.cd-what:focus{border-color:var(--brand);color:var(--brand);outline:none}

/* Tiny, because it sits on every code row and is pressed by accident far more
   often than on purpose. */
.cd-del{padding:0 5px;font-size:13px;line-height:16px;min-width:0}

/* A finding that has been written out must not look like one that was opened
   and abandoned. */
.ad-state{font-size:9.6px;color:var(--ok);white-space:nowrap}
.ad-wrap.is-done .ad-cat,.ad-wrap.is-done .ad-sev{border-color:var(--ok)}

/* The encounter-correction panel on the audit screen. Tinted, because it edits
   what goes to the client rather than recording an opinion about it. */
.aud-fix-enc{background:var(--warn-bg);border-bottom:1px solid var(--line);padding:8px 11px}
.aud-fix-enc .ds-f label{font-size:9.6px}

/* The "hide here" toggle beside Second screen. The chart stays live on both
   screens by default; this is for somebody who would rather have the room. */
.cv-hidepane{display:inline-flex;align-items:center;gap:4px;font-size:11px;
  color:var(--muted);cursor:pointer;user-select:none;margin-left:2px}
.cv-hidepane input{margin:0}

/* ---------------------------------------------------------------- list filters
   Filter::multi / Filter::dates / Filter::search, and the ms-* dropdown app.js
   builds from a <select multiple data-ms>. */
.filter-bar.flt{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin-bottom:12px}
.filter-bar.flt .ds-f{margin:0;min-width:0}
.flt-dates{display:flex;align-items:center;gap:5px}
.flt-dates input{width:138px}
.flt-q input{width:190px}
.ms{position:relative;display:inline-block}
.ms-btn{display:inline-flex;align-items:center;gap:6px;max-width:230px;height:30px;padding:0 26px 0 10px;
  border:1px solid var(--line,#d8dee6);border-radius:6px;background:var(--card,#fff);color:var(--ink,#1f2937);
  font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.ms-btn::after{content:'';position:absolute;right:10px;top:12px;border:4px solid transparent;border-top-color:currentColor;opacity:.6}
.ms-btn.on{border-color:var(--brand,#1f4e79);color:var(--brand,#1f4e79);background:var(--brand-bg,#eef4fb);font-weight:600}
.ms-panel{display:none;position:absolute;left:0;top:34px;z-index:60;width:260px;background:var(--card,#fff);
  border:1px solid var(--line,#d8dee6);border-radius:8px;box-shadow:0 8px 24px rgba(15,23,42,.14);padding:8px}
.ms.open .ms-panel{display:block}
.ms-search{width:100%;height:28px;margin-bottom:6px}
.ms-tools{display:flex;gap:12px;font-size:11.5px;margin:0 2px 6px}
.ms-list{max-height:230px;overflow:auto;border-top:1px solid var(--line,#eef1f5);padding-top:4px}
.ms-opt{display:flex;align-items:center;gap:7px;padding:4px 4px;border-radius:5px;font-size:12.5px;cursor:pointer}
/* The option rows are <label>s; the filter-field caption style (.ds-f label) must not reach them. */
.ds-f .ms label.ms-opt{display:flex;font-size:12.5px;font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--ink,#1e293b);margin:0;white-space:normal;overflow:visible;line-height:1.3}
.ds-f .ms .ms-opt input{height:auto;padding:0;margin:0;flex:none}
.ms-opt:hover{background:var(--hover,#f3f6fa)}
.ms-none{font-size:12px;color:var(--mut,#64748b);padding:6px}
.ms-foot{display:flex;justify-content:flex-end;border-top:1px solid var(--line,#eef1f5);margin-top:6px;padding-top:6px}
@media (max-width:640px){.ms-panel{width:calc(100vw - 40px)}.flt-q input{width:100%}}