*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#EAF9FC;--surface:#FFF;--s2:#F0FBFD;--s3:#E4F6FA;
  --border:#CDE9F0;--border2:#B8DCE6;
  --text:#03045E;--muted:#3D6B85;--faint:#9FC7D4;
  --accent:#0077B6;--al:#CAF0F8;
  --green:#023E8A;--gl:#CAF0F8;
  --amber:#0096C7;--aml:#CAF0F8;
  --red:#03045E;--rl:#CAF0F8;
  --r:10px;--rl2:14px;
}
body{font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;min-height:100vh}

/* NAV */
.top-bar{background:var(--text);color:#fff;padding:0 28px;height:54px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.logo{font-family:'Instrument Serif',serif;font-size:16px}.logo span{color:#48CAE4}
.tabs{display:flex;gap:3px}
.tab{padding:5px 13px;border-radius:18px;font-size:11px;font-weight:500;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.4);cursor:pointer;transition:all .15s}
.tab.active{background:rgba(123,159,255,.25);color:#48CAE4;border-color:rgba(123,159,255,.35)}
.tab.done{background:rgba(10,110,63,.25);color:#00B4D8;border-color:rgba(10,110,63,.3)}
.top-meta{font-size:11px;color:rgba(255,255,255,.4)}
.top-meta strong{color:rgba(255,255,255,.8)}

/* SIDEBAR */
.menu-btn{background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;margin-right:14px;transition:background .15s;flex-shrink:0}
.menu-btn:hover{background:rgba(255,255,255,.1)}
.menu-btn svg{width:18px;height:18px}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;opacity:0;pointer-events:none;transition:opacity .2s}
.sidebar-overlay.open{opacity:1;pointer-events:auto}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:252px;background:var(--text);color:#fff;z-index:200;transform:translateX(-100%);transition:transform .25s;display:flex;flex-direction:column;padding:18px 0;overflow-y:auto}
.sidebar.open{transform:translateX(0)}
.sidebar-hd{padding:0 20px 16px;font-family:'Instrument Serif',serif;font-size:17px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:8px}
.sidebar-hd span{color:#48CAE4}
.side-link{display:flex;align-items:center;gap:10px;padding:11px 20px;color:rgba(255,255,255,.6);font-size:13px;font-weight:500;text-decoration:none;transition:all .15s;border-left:3px solid transparent;cursor:pointer}
.side-link:hover{color:#fff;background:rgba(255,255,255,.05)}
.side-link.active{color:#48CAE4;background:rgba(123,159,255,.12);border-left-color:#48CAE4}
.side-link svg{width:16px;height:16px;flex-shrink:0}

.wrap{max-width:900px;margin:0 auto;padding:28px 22px 110px}

/* PAGES */
.page{display:none}
.page.active{display:block}

/* PATIENT STRIP */
.pt-strip{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl2);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.pt-av{width:40px;height:40px;border-radius:50%;background:var(--al);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.pt-n{font-size:15px;font-weight:600;letter-spacing:-.2px}
.pt-s{font-size:11px;color:var(--muted);margin-top:1px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;padding:3px 8px;border-radius:16px;font-size:11px;font-weight:500}
.tg{background:var(--s3);color:var(--muted)}
.tb{background:var(--al);color:var(--accent)}
.tgn{background:var(--gl);color:var(--green)}
.ta{background:var(--aml);color:var(--amber)}
.tr{background:var(--rl);color:var(--red)}

/* CARD */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl2);margin-bottom:14px;overflow:hidden}
.card-hd{padding:13px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);background:var(--s2)}
.card-ico{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.ic-blue{background:var(--al);color:var(--accent)}
.ic-green{background:var(--gl);color:var(--green)}
.ic-amber{background:var(--aml);color:var(--amber)}
.ic-red{background:var(--rl);color:var(--red)}
.ic-gray{background:var(--s3);color:var(--muted)}
.card-title{font-size:13px;font-weight:600}
.card-sub{font-size:11px;color:var(--muted);margin-left:auto}
.card-body{padding:18px}

/* FORM */
.fg{display:flex;flex-direction:column;gap:4px;margin-bottom:13px}
.fg:last-child{margin-bottom:0}
label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;line-height:1.35;min-height:2.7em;display:flex;align-items:flex-end}
/* Required-field asterisk - red, so mandatory fields stand out from optional
   ones at a glance (wrap the "*" in <span class="req"> in the label text). */
.req{color:var(--red);font-weight:800;margin-left:2px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=date],input[type=time],input[type=number],select,textarea{
  font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:14px;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:7px;
  padding:8px 11px;outline:none;transition:border .15s;width:100%;box-sizing:border-box
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;min-height:64px;line-height:1.6}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px}
.g3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:13px}
.g4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:11px}
.full{grid-column:1/-1}
.static-field{
  font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:13px;color:var(--muted);
  background:var(--s2);border:1px solid var(--border);border-radius:7px;
  padding:8px 11px;width:100%;box-sizing:border-box;min-height:34.5px;
  display:flex;align-items:center
}

/* DATE PICKER */
.date-field{position:relative;display:flex}
.date-field input{padding-right:32px}
.cal-btn{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:25px;height:25px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:5px;color:var(--muted);transition:all .12s}
.cal-btn:hover{background:var(--s2);color:var(--accent)}
.cal-btn svg{width:14px;height:14px;pointer-events:none}
.datepicker{position:absolute;display:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:10px;z-index:800;width:236px;font-size:12px}
.datepicker.show{display:block}
.timepicker{position:absolute;display:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:10px;z-index:500;width:190px;font-size:12px}
.timepicker.show{display:block}
.tp-cols{display:flex;gap:6px}
.tp-col{flex:1;display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;scrollbar-width:thin}
.tp-col-hd{font-size:10px;font-weight:700;color:var(--muted);text-align:center;padding:3px 0 5px;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;background:var(--surface)}
.tp-item{padding:6px 4px;text-align:center;border-radius:5px;cursor:pointer;font-size:12px;user-select:none}
.tp-item:hover{background:var(--s2);color:var(--accent)}
.tp-item.sel{background:var(--accent);color:#fff}
.dp-head{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.dp-nav{width:24px;height:24px;border:1px solid var(--border);background:var(--surface);border-radius:5px;cursor:pointer;font-size:13px;color:var(--muted);flex-shrink:0;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif}
.dp-nav:hover{background:var(--s2);color:var(--accent)}
.dp-month,.dp-year{font-size:11px;padding:4px 3px;border:1px solid var(--border);border-radius:5px;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;background:var(--surface);color:var(--text)}
.dp-month{flex:1.3}
.dp-year{flex:1}
.dp-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;font-size:10px;color:var(--faint);font-weight:600;margin-bottom:3px}
.dp-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.dp-day{display:flex;align-items:center;justify-content:center;height:25px;border-radius:5px;cursor:pointer;font-family:'DM Mono',monospace}
.dp-day:hover{background:var(--al);color:var(--accent)}
.dp-day.empty{cursor:default}
.dp-day.empty:hover{background:none}
.dp-day.today{font-weight:700;color:var(--accent)}
.dp-day.sel{background:var(--accent);color:#fff}
.dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.dp-today,.dp-clear{font-size:11px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--accent);padding:3px 6px;border-radius:4px;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif}
.dp-today:hover,.dp-clear:hover{background:var(--al)}
.dp-clear{color:var(--muted)}

/* SECTION DIVIDER */
.sdiv{display:flex;align-items:center;gap:10px;margin:18px 0 12px}
.sdiv span{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sdiv::before,.sdiv::after{content:'';flex:1;height:1px;background:var(--border)}

/* RESULT GROUP HEADER - one level above .sdiv. Groups the sub-sections of a
   single test (e.g. Sway's Vestibular vs Neurocognitive halves) so the two
   domains read as distinct without splitting them into separate tests. */
.res-group{display:flex;align-items:baseline;gap:9px;margin:26px 0 4px;padding:8px 12px;border-left:3px solid var(--accent);background:var(--s2);border-radius:0 var(--r) var(--r) 0}
.res-group:first-child{margin-top:6px}
.res-group b{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.res-group span{font-size:11px;color:var(--muted)}
.res-group+.sdiv{margin-top:14px}

/* YES/NO TOGGLE ROW */
.yn-list{display:flex;flex-direction:column;gap:4px}
.yn-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:7px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface)}
.yn-comment{flex-basis:100%;width:100%;margin-top:8px}
.yn-comment-input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:7px;padding:7px 10px;font-size:12px;background:#fff;color:var(--text)}
.yn-comment-input::placeholder{color:var(--muted)}
.yn-row:hover{background:var(--s2)}
.yn-label{font-size:12px;flex:1}
/* A question that does not apply to this patient - pregnancy on a male
   chart. Greyed rather than hidden: the row staying in place shows the
   question was considered and skipped, not lost, and keeps the list the
   same length for anyone reading down it. */
.yn-row-gated{opacity:.5;background:var(--s2)}
.yn-row-gated .yn-label{color:var(--muted)}
.yn-row-gated .yn-label::after{content:' — not applicable';font-size:10.5px;font-style:italic;opacity:.8}
.yn-row-gated .yn-btn{cursor:not-allowed;pointer-events:none;color:var(--muted);background:none;border-color:var(--border)}
.yn-btns{display:flex;gap:4px;flex-shrink:0}
.yn-btn{padding:3px 12px;border-radius:5px;border:1px solid var(--border);background:none;font-size:11px;font-weight:600;cursor:pointer;transition:all .12s;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif}
.yn-btn.yes.active{background:var(--gl);color:var(--green);border-color:var(--green)}
.yn-btn.no.active{background:var(--rl);color:var(--red);border-color:var(--red)}
.yn-btn.na.active{background:var(--s3);color:var(--muted);border-color:var(--border2)}

/* SYMPTOM SCORE */
.sym-score-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.sym-score-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border:1px solid var(--border);border-radius:7px;font-size:12px;transition:background .15s,border-color .15s}
.sym-score-item.scored{background:var(--rl);border-color:var(--red)}
.sym-score-item:has(.sym-btn.active){background:var(--al);border-color:var(--accent)}
.sym-btns{display:flex;gap:3px}
.sym-btn{width:28px;height:24px;border-radius:4px;border:1px solid var(--border);background:none;font-size:11px;font-weight:600;cursor:pointer;font-family:'DM Mono',monospace;transition:all .12s}
.sym-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.score-total{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.score-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.score-val{font-size:20px;font-weight:700;color:var(--accent);font-family:'DM Mono',monospace}
.score-out{font-size:11px;color:var(--faint)}
.score-totals-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.score-cat{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;text-align:center}
.score-cat-lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.score-cat-val{font-size:18px;font-weight:700;font-family:'DM Mono',monospace;color:var(--accent)}

/* ICD CHECKBOXES */
.icd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px}
.icd-item{display:flex;align-items:flex-start;gap:7px;padding:6px 9px;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .12s;user-select:none}
.icd-item:hover{border-color:var(--accent);background:var(--al)}
.icd-item.checked{background:var(--al);border-color:var(--accent)}
.icd-box{width:15px;height:15px;border:1.5px solid var(--border2);border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;margin-top:1px;transition:all .12s}
.icd-item.checked .icd-box{background:var(--accent);border-color:var(--accent);color:#fff}
.icd-code{font-family:'DM Mono',monospace;font-size:10px;color:var(--accent);flex-shrink:0;min-width:70px}
.icd-desc{font-size:11px;line-height:1.4}
.icd-search{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:7px;font-size:13px;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;outline:none;margin-bottom:10px}
.icd-search:focus{border-color:var(--accent)}
.icd-selected-count{font-size:11px;color:var(--accent);font-weight:600;margin-bottom:8px}

/* BOILERPLATE BOX */
.bpbox{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-size:12px;color:var(--muted);line-height:1.75;font-style:italic}
.bpbox strong{color:var(--text);font-style:normal}
.bpfield{color:var(--accent);font-style:normal;font-weight:600}

/* BTNS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;font-size:13px;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-weight:500;cursor:pointer;border:none;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#023E8A}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border)}.btn-ghost:hover{background:var(--s2)}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{opacity:.9}
.btn-sm{padding:6px 13px;font-size:12px}

/* ACTION BAR */
.action-bar{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:11px 28px;display:flex;align-items:center;justify-content:space-between;z-index:40}
.ab-left{font-size:12px;color:var(--muted)}
.ab-left strong{color:var(--text)}
.ab-btns{display:flex;gap:8px}

.toast{position:fixed;bottom:76px;right:22px;background:var(--green);color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:500;z-index:300;transform:translateY(28px);opacity:0;transition:all .3s;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}
.toast.err{background:var(--red)}

/* DAY 2 RESULT UPLOADS */
.day2-upload-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.day2-upload-box{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:12px;display:flex;flex-direction:column;gap:9px}
.day2-upload-title{font-size:12px;font-weight:700;color:var(--text)}
.day2-upload-note{font-size:11px;color:var(--muted);line-height:1.45}
.day2-upload-box input[type=file]{font-size:12px;width:100%;border:none;background:transparent;cursor:pointer;color:var(--muted);font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif}
.day2-upload-box input[type=file]::file-selector-button{display:inline-flex;align-items:center;padding:6px 13px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12px;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-weight:500;cursor:pointer;margin-right:8px;transition:background .15s}
.day2-upload-box input[type=file]::file-selector-button:hover{background:var(--s2)}
.day2-upload-preview{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;border-top:1px solid var(--border);padding-top:8px}
.day2-upload-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:8px;border:1px solid var(--border);border-radius:8px;background:var(--s2);padding:6px}
.day2-upload-item img{width:42px;height:42px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
.day2-pdf-icon{width:42px;height:42px;border-radius:6px;border:1px solid var(--border2);background:var(--rl);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;font-family:Inter,'DM Sans',sans-serif}
.day2-pdf-item{grid-template-columns:42px minmax(0,1fr) auto}.day2-pdf-item .day2-upload-note{grid-column:2/3}
.day2-upload-name{font-size:11px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day2-upload-remove{border:none;background:transparent;color:var(--red);font-size:11px;font-weight:700;cursor:pointer;padding:4px 6px;border-radius:5px}
.day2-upload-remove:hover{background:var(--rl)}

.day2-upload-empty{font-size:11px;color:var(--muted);padding:6px 0}
.day2-upload-eye-tag,.day2-upload-part-tag{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:10px;background:var(--al);color:var(--accent);font-size:10px;font-weight:700;vertical-align:middle}
.day2-results-preview{background:#fff;border:1px solid var(--border);border-radius:10px;padding:22px 24px;font-family:Georgia,'Times New Roman',serif;color:#111;line-height:1.45;min-height:120px}
.day2-result-empty{font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:12px;color:var(--muted);text-align:center;padding:28px 10px}
.day2-result-section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #d8d8d8}
.day2-result-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.day2-result-heading{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px;color:#111}
.day2-result-subheading{font-size:12px;font-weight:700;margin:12px 0 6px;color:#111}
.day2-result-line{font-size:12px;margin:3px 0;color:#111}
.day2-result-line strong{font-weight:700}
.day2-result-kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:6px 0 12px}
.day2-result-table{width:100%;border-collapse:collapse;font-size:11px;margin:8px 0 14px;font-family:Georgia,'Times New Roman',serif}
.day2-result-table th,.day2-result-table td{border:1px solid #000;padding:5px 6px;text-align:left;vertical-align:top;color:#111}
.day2-result-table th{font-weight:700;background:#f1f1f1}

.spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:4px}
@keyframes spin{to{transform:rotate(360deg)}}

/* RESULTS / DAY 2 */
.api-banner{display:flex;flex-wrap:wrap;gap:10px}
.api-pill{flex:1;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 13px;display:flex;align-items:center;gap:10px}
.api-dot{width:9px;height:9px;border-radius:50%;background:var(--amber);flex-shrink:0}
.api-name{font-size:12px;font-weight:600}
.api-status{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:1px}

.res-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:11px;color:var(--muted);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.res-meta strong{color:var(--text)}

.src-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:12px;margin-left:auto;flex-shrink:0}
.src-sway{background:var(--al);color:var(--accent)}
.src-reflex{background:var(--gl);color:var(--green)}
.src-shoebox{background:var(--aml);color:var(--amber)}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:8px 0 16px}
.stat-box{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:11px 10px;text-align:center}
.stat-val{font-size:21px;font-weight:700;line-height:1.2;font-family:'DM Mono',monospace}
.stat-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}

.meter-row{margin-bottom:14px}
.meter-row:last-child{margin-bottom:0}
.meter-hd{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;gap:10px;flex-wrap:wrap}
.meter-hd .ml{font-weight:600}
.meter-hd .mv{font-family:'DM Mono',monospace;color:var(--muted);font-size:11px;white-space:nowrap}
.meter{position:relative;height:8px;border-radius:4px;margin:7px 0 3px;
  background:linear-gradient(to right,var(--rl) 0%,var(--rl) 10%,var(--aml) 10%,var(--aml) 25%,var(--s3) 25%,var(--s3) 75%,#CAF0F8 75%,#CAF0F8 90%,#90E0EF 90%,#90E0EF 100%)}
.meter-marker{position:absolute;top:-3px;width:3px;height:14px;background:var(--text);border-radius:1px;transform:translateX(-1px)}
.meter-scale{display:flex;justify-content:space-between;font-size:9px;color:var(--faint)}
.meter-sub{font-size:10px;color:var(--faint);margin-top:2px}

.dtable{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0 16px}
.dtable th,.dtable td{padding:7px 10px;border:1px solid var(--border);text-align:left;vertical-align:middle}
.dtable th{background:var(--s2);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.dtable td.num{font-family:'DM Mono',monospace;text-align:center}
.dtable td.flag{color:var(--red);font-weight:700;background:var(--rl)}
.dtable tr:nth-child(even) td{background:var(--s2)}

.sev-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600;margin-top:4px}
.sev-min{background:var(--gl);color:var(--green)}
.sev-mild{background:var(--aml);color:var(--amber)}
.sev-mod{background:var(--rl);color:var(--red)}

.hm-wrap{margin:10px 0 18px}
.hm-cap{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}
.hearing-meter{display:flex;height:24px;border-radius:6px;overflow:hidden;border:1px solid var(--border);position:relative}
.hm-zone{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden}
.hm-sig{background:#48CAE4}
.hm-loss{background:#90E0EF;color:#0096C7}
.hm-good{background:var(--s3);color:var(--muted)}
.hm-marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text);transform:translateX(-1px)}
.hm-marker-lbl{position:absolute;top:-17px;font-size:9px;font-weight:600;color:var(--text);white-space:nowrap;transform:translateX(-50%)}

.det-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0 16px}
.det-item{display:flex;align-items:center;gap:7px;background:var(--gl);border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:12px}
.det-item svg{width:14px;height:14px;color:var(--green);flex-shrink:0}

/* REVIEW CHECKLIST */
.chk-grid{display:flex;flex-direction:column;gap:8px}
.chk-item{display:flex;align-items:center;justify-content:space-between;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:11px 14px;font-size:13px;font-weight:500;gap:10px}
.chk-name{display:flex;align-items:center;gap:10px}
.chk-num{width:22px;height:22px;border-radius:50%;background:var(--surface);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--muted);flex-shrink:0}


/* ---------- PERSISTENT SIDEBAR + PATIENT WORKFLOW ADDITIONS ---------- */
body.sidebar-visible .sidebar{transform:translateX(0)}
body.sidebar-visible .top-bar{margin-left:250px;width:calc(100% - 250px)}
body.sidebar-visible #topbarLogo, body.sidebar-visible .top-bar .topbar-logo{display:none!important}
body.sidebar-visible .page{margin-left:250px}
body.sidebar-visible .action-bar{left:250px;right:0}
.top-bar,.page,.action-bar{transition:margin-left .25s,width .25s,left .25s,filter .2s}
body.modal-open .top-bar,body.modal-open .page,body.modal-open .action-bar{filter:blur(4px)}
.side-section-label{padding:12px 20px 6px;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.28)}
.side-divider{height:1px;background:rgba(255,255,255,.08);margin:8px 18px}
.plain-check{display:flex!important;align-items:center!important;gap:9px!important;min-height:auto!important;text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:600!important;color:var(--text)!important;cursor:pointer;user-select:none}
.plain-check input{width:16px;height:16px;accent-color:var(--accent)}
.chk-label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;padding:2px 0}
.chk-label input[type=checkbox]{accent-color:var(--primary,#0077B6);width:14px;height:14px;cursor:pointer}
.dn-static-box{background:var(--bg,#f7f8fa);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:13px;line-height:1.55;color:var(--text);white-space:pre-wrap;min-height:32px}
.dn-time-grid{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.dn-time-row{display:flex;align-items:center;gap:16px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px}
.dn-time-label{flex:1;color:var(--muted);font-size:12px}
.dn-time-val{white-space:nowrap;font-size:13px}
.dn-time-val strong{color:var(--primary)}
.it-wrap{position:relative}
.it-display{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:#fff;cursor:pointer;font-size:13px;min-height:36px;transition:border-color .15s}
.it-display:hover{border-color:var(--primary,#0077B6)}
.it-panel{position:fixed;z-index:9999;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.18);overflow:hidden;min-width:320px}
.it-list{max-height:220px;overflow-y:auto;padding:4px 4px 6px}
.ace-loc-opt{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text)}
.ace-loc-opt:hover{background:rgba(0,119,182,.08)}
.ace-loc-opt.checked{background:rgba(0,119,182,.10);font-weight:600}
.ace-loc-opt input{width:15px;height:15px;accent-color:var(--primary,#0077B6);cursor:pointer;margin:0;flex:none}
.it-group-hdr{padding:6px 10px 3px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary,#0077B6);border-top:1px solid var(--border);margin-top:2px}
.it-item{padding:5px 10px 5px 18px;border-radius:5px;cursor:pointer;font-size:12px;line-height:1.4}
.it-item:hover{background:var(--bg,#f5f6fa)}
.it-item-active{background:var(--primary,#0077B6)!important;color:#fff}
.it-item-clear{padding:6px 10px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--border);margin-bottom:2px}
.patient-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.patient-list-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}
.patient-list-panel{background:transparent;border:none;border-radius:0;overflow:visible;display:flex;flex-direction:column;gap:10px}
.patient-list-head{padding:12px 14px;border-bottom:1px solid var(--border);background:var(--s2);display:flex;align-items:center;justify-content:space-between;gap:10px}
.patient-list-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.patient-row{
  padding:16px;border:1px solid rgba(0,119,182,.08);border-radius:14px;
  background:rgba(255,255,255,.64);box-shadow:0 1px 2px rgba(15,23,42,.03);
  cursor:pointer;transition:all .2s var(--ease,ease);display:flex;gap:13px;align-items:center
}
.patient-row:hover{background:rgba(255,255,255,.88);border-color:rgba(0,119,182,.2);box-shadow:var(--e2,0 2px 4px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.06));transform:translateY(-1px)}
.patient-row.active{border-color:rgba(0,119,182,.55);background:linear-gradient(135deg,rgba(0,119,182,.08),rgba(0,119,182,.04))}
.patient-row-main{flex:1;min-width:0}
.patient-row-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.patient-row-sub{font-size:11px;color:var(--muted);margin-top:1px}
.pl-balance-pill{display:inline-flex;align-items:center;gap:4px;margin-top:6px;white-space:nowrap;padding:3px 9px;border-radius:8px;font-size:11px;font-weight:800;line-height:1;letter-spacing:.01em;background:rgba(0,150,199,.1);color:#0077B6;border:1px solid rgba(0,150,199,.24)}
.pl-balance-pill.is-clear{background:rgba(0,180,216,.08);color:#00B4D8;border-color:rgba(0,180,216,.2);font-weight:700}
html[data-theme="dark"] .pl-balance-pill{background:rgba(0,150,199,.16);color:#48cae4;border-color:rgba(0,150,199,.34)}
html[data-theme="dark"] .pl-balance-pill.is-clear{background:rgba(0,180,216,.12);color:#90e0ef;border-color:rgba(0,180,216,.26)}
.pld-status.preg{background:rgba(219,39,119,.1);color:#be185d;border-color:rgba(219,39,119,.26)}
.pld-status.preg.is-stale{background:rgba(245,158,11,.13);color:#b06f08;border-color:rgba(245,158,11,.32)}
html[data-theme="dark"] .pld-status.preg{background:rgba(244,114,182,.16);color:#f9a8d4;border-color:rgba(244,114,182,.34)}
html[data-theme="dark"] .pld-status.preg.is-stale{background:rgba(251,191,36,.16);color:#fbbf24;border-color:rgba(251,191,36,.35)}
.patient-empty{padding:18px 14px;color:var(--muted);font-size:12px;text-align:center}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.detail-item{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:9px 10px;min-height:54px}
.detail-label{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.detail-value{font-size:13px;color:var(--text);word-break:break-word}
.detail-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.ro-ace-dash{color:var(--faint)}
.ro-ace-tabbar{
  display:flex;gap:8px;flex-wrap:wrap;padding:12px 10px;margin:0 2px 18px;
  position:sticky;top:60px;z-index:5;
  background:rgba(255,255,255,0.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.55);border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.10),0 1px 0 rgba(255,255,255,0.9) inset;
  transition:box-shadow .3s
}
.ro-ace-tab{
  padding:7px 15px;border-radius:18px;font-size:11px;font-weight:700;letter-spacing:.01em;
  border:1px solid var(--border);color:var(--muted);cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,rgba(255,255,255,0.85),rgba(240,251,253,0.65));
  box-shadow:0 1px 2px rgba(15,23,42,0.05);transition:all .18s var(--ease,ease)
}
.ro-ace-tab:hover{
  background:linear-gradient(135deg,#CAF0F8,#ADE8F4);color:var(--accent);
  border-color:rgba(0,119,182,0.35);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,119,182,0.18)
}
.ro-ace-tab.active{
  background:linear-gradient(135deg,#0077B6,#00B4D8)!important;color:#fff!important;
  border-color:#0077B6!important;box-shadow:0 4px 14px rgba(0,119,182,0.35)!important
}
html[data-theme="dark"] .ro-ace-tab.active{
  background:linear-gradient(135deg,rgba(0,119,182,.6),rgba(0,180,216,.45))!important;
  color:#fff!important;border-color:rgba(72,202,228,.55)!important
}
.ro-ace-section{
  margin-bottom:22px;scroll-margin-top:74px;padding:18px 20px;
  background:rgba(202,240,248,0.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.7);border-radius:var(--rl2,14px);
  box-shadow:var(--e1,0 1px 2px rgba(15,23,42,0.04));
}
.ro-ace-section-title{
  display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;letter-spacing:-.2px;
  color:var(--text);margin-bottom:14px;padding-bottom:10px;
  border-bottom:1px solid rgba(0,119,182,0.18)
}
/* Field boxes need real separation from this section's own (already
   tinted) background - the shared .detail-item glass tone is too close to
   it to read clearly, so give them a solid white card + a visible border
   scoped to just this view. */
.ro-ace-section .detail-item{
  background:rgba(255,255,255,0.94)!important;
  border:1px solid rgba(0,119,182,0.16)!important;
  box-shadow:0 1px 4px rgba(15,23,42,0.06);
}
.ro-ace-subgroup{
  background:rgba(255,255,255,0.55)!important;
  border:1px solid rgba(0,119,182,0.22)!important;
  box-shadow:0 1px 4px rgba(15,23,42,0.06)
}
.ro-ace-subgroup .detail-item{
  background:rgba(0,119,182,0.05)!important;
  border-color:rgba(0,119,182,0.12)!important;
  box-shadow:none
}
.ro-ace-subgroup-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
html[data-theme="dark"] .ro-ace-tabbar{background:var(--surface)!important;border-color:var(--border)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-theme="dark"] .ro-ace-section{background:var(--surface)!important;border-color:var(--border)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-theme="dark"] .ro-ace-section .detail-item{background:var(--s2)!important;border-color:var(--border)!important;box-shadow:none!important}
html[data-theme="dark"] .ro-ace-subgroup{background:rgba(255,255,255,0.03)!important;border-color:var(--border)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-theme="dark"] .ro-ace-subgroup .detail-item{background:rgba(255,255,255,0.05)!important;border-color:var(--border)!important}
html[data-theme="dark"] .ro-ace-tab{background:var(--s2)!important;border-color:var(--border)!important;color:var(--muted)!important}
html[data-theme="dark"] .ro-ace-tab:hover{background:rgba(0,119,182,.22)!important;color:#48CAE4!important;border-color:rgba(72,202,228,.4)!important}
.section-tools{display:flex;gap:6px;align-items:center;margin-left:auto;flex-wrap:wrap}
.patient-detail-empty{background:var(--surface);border:1px dashed var(--border2);border-radius:var(--rl2);padding:36px 18px;text-align:center;color:var(--muted)}
.ace-save-panel{display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--rl2);padding:16px 18px;margin-bottom:14px}
.ace-save-panel.show{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:700;display:none;align-items:center;justify-content:center;padding:24px}
.modal-overlay.show{display:flex}
.modal{width:min(680px,100%);max-height:88vh;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.26)}
.modal-hd{padding:15px 18px;border-bottom:1px solid var(--border);background:var(--s2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-title{font-size:14px;font-weight:700;color:var(--text)}
.modal-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.modal-close{border:1px solid var(--border);background:var(--surface);border-radius:7px;width:30px;height:30px;cursor:pointer;color:var(--muted);font-size:18px;line-height:1}
.modal-body{padding:18px}
.modal-ft{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--s2)}
.small-muted{font-size:11px;color:var(--muted)}
.draft-status{font-size:10px;color:var(--green);font-weight:600;letter-spacing:.03em;opacity:.6;transition:opacity .4s;margin-left:8px}
#aceProgressStrip{position:sticky;top:54px;z-index:45;display:none;background:rgba(255,255,255,0.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.55);border-bottom:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:11px 18px 10px;margin-bottom:16px;box-shadow:0 8px 32px rgba(0,0,0,0.10),0 1px 0 rgba(255,255,255,0.9) inset;transition:box-shadow .3s}
#aceProgressStrip:hover{box-shadow:0 12px 40px rgba(0,0,0,0.13),0 1px 0 rgba(255,255,255,0.9) inset}
.field-incomplete{border-color:var(--red)!important;background:var(--rl)!important;box-shadow:0 0 0 2px rgba(176,42,26,.12)!important}
.label-incomplete{color:var(--red)!important}
#missingFieldsPopover{position:absolute;top:calc(100% + 6px);left:0;z-index:300;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:8px 6px;min-width:270px;max-width:380px;display:none;max-height:320px;overflow-y:auto}
#missingFieldsPopover.show{display:block}
.mfp-section{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:4px 8px 3px;margin-top:4px}
.mfp-section:first-child{margin-top:0}
.mfp-item{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:6px 8px;border-radius:6px;font-size:12px;color:var(--text);background:none;border:none;cursor:pointer;transition:background .12s;line-height:1.3}
.mfp-item:hover{background:var(--rl);color:var(--red)}
.mfp-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex-shrink:0}
.side-sublink{display:flex;align-items:center;gap:10px;padding:9px 20px 9px 34px;color:rgba(255,255,255,.5);font-size:12px;font-weight:500;text-decoration:none;transition:all .15s;border-left:3px solid transparent;cursor:pointer}
.side-sublink:hover{color:#fff;background:rgba(255,255,255,.05)}
.side-sublink.active{color:#48CAE4;background:rgba(123,159,255,.1);border-left-color:#48CAE4}
.side-sublink svg{width:14px;height:14px;flex-shrink:0}

/* Collapsible sidebar group (e.g. "Appointment" containing Appointments /
   Appointment Configs / Patient Encounters). The toggle row reuses .side-link
   so it automatically picks up every theme's hover/active styling; only the
   chevron and collapse mechanics are new. */
.side-group-toggle{position:relative}
.side-group-toggle span{flex:1;min-width:0}
.side-group-chevron{width:13px;height:13px;flex:none;opacity:.55;transition:transform .2s}
.side-group.open .side-group-chevron{transform:rotate(180deg)}
.side-group-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.side-group.open .side-group-body{grid-template-rows:1fr}
.side-group-body-inner{overflow:hidden;min-height:0}

@media(max-width:860px){
  body.sidebar-visible .top-bar,body.sidebar-visible .page{margin-left:0;width:auto}
  body.sidebar-visible .action-bar{left:0}
  body.sidebar-visible .sidebar-overlay{opacity:1;pointer-events:auto}
  .patient-list-layout{grid-template-columns:minmax(0,1fr)}
  .detail-grid,.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
}

/* GRAMMAR CORRECTION */
.gc-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.02em;padding:3px 9px 3px 8px;border-radius:10px;margin-top:5px;opacity:1;transition:opacity .5s ease;pointer-events:none;width:fit-content}
.gc-badge.gc-done{color:var(--green);background:var(--gl);border:1px solid rgba(10,110,63,.25)}
.gc-badge.gc-done::before{content:'✓ ';font-size:9px;opacity:.7}
.gc-badge.gc-checking{color:var(--accent);background:var(--al);border:1px solid rgba(26,60,143,.2)}
.gc-badge.gc-checking::before{content:'';display:inline-block;width:8px;height:8px;border:1.5px solid rgba(26,60,143,.3);border-top-color:var(--accent);border-radius:50%;animation:gc-spin .7s linear infinite}
.gc-badge.gc-error{color:var(--red);background:var(--rl);border:1px solid rgba(176,42,26,.2);cursor:pointer;pointer-events:auto}
.gc-badge.gc-error::before{content:'✗ ';font-size:9px}
@keyframes gc-spin{to{transform:rotate(360deg)}}
.gc-fade{opacity:0}
.gc-loading{box-shadow:0 0 0 2px rgba(26,60,143,.15)!important;border-color:var(--accent)!important;transition:border-color .15s,box-shadow .15s}

/* ======================================================
   GLASSMORPHISM REDESIGN - Modern aesthetic overrides
   ====================================================== */

/* New design-system tokens */
:root {
  --bg: #EAF9FC;
  --surface: rgba(255,255,255,0.82);
  --s2: rgba(248,250,255,0.68);
  --s3: rgba(240,245,255,0.58);
  --border: rgba(0,119,182,0.13);
  --border2: rgba(0,119,182,0.23);
  --text: #0F172A;
  --muted: #64748B;
  --faint: #94A3B8;
  --accent: #0077B6;
  --al: rgba(0,119,182,0.09);
  --green: #00B4D8;
  --gl: rgba(0,180,216,0.09);
  --amber: #0096C7;
  --aml: rgba(0,150,199,0.09);
  --red: #03045E;
  --rl: rgba(3,4,94,0.09);
  --r: 14px;
  --rl2: 18px;
  --topbar-bg: linear-gradient(135deg,#03045E 0%,#023E8A 60%,#0077B6 100%);
  --sidebar-grad: linear-gradient(165deg,#03045E 0%,#023E8A 35%,#012247 70%,#010225 100%);
}

/* Gradient background */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 12% 40%, rgba(0,119,182,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(0,180,216,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(0,180,216,0.04) 0%, transparent 60%);
  background-attachment: fixed;
}

/* Top bar */
.top-bar {
  background: var(--topbar-bg);
  height: 60px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0 32px;
}
.logo { font-size: 17px; letter-spacing: -0.3px; }
.logo span {
  background: linear-gradient(135deg,#00B4D8,#ADE8F4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tab { padding: 7px 15px; border-radius: 20px; transition: all 0.2s ease; }
.tab:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.82); }
.tab.active {
  background: linear-gradient(135deg,rgba(0,119,182,0.38),rgba(0,119,182,0.28));
  color: #90E0EF;
  border-color: rgba(72,202,228,0.4);
  box-shadow: 0 0 14px rgba(0,119,182,0.22);
}
.tab.done { background: linear-gradient(135deg,rgba(0,180,216,0.3),rgba(0,180,216,0.2)); color: #90E0EF; border-color: rgba(0,180,216,0.35); }
.menu-btn { border-radius: 8px; transition: all 0.18s ease; }
.menu-btn:hover { background: rgba(255,255,255,0.13); transform: scale(1.05); }

/* Sidebar */
.sidebar {
  background: var(--sidebar-grad);
  width: 252px;
  box-shadow: 4px 0 40px rgba(0,0,0,0.38);
  border-right: 1px solid rgba(255,255,255,0.05);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  padding: 24px 0;
}
.sidebar-hd {
  font-size: 18px;
  letter-spacing: -0.3px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0 22px 20px;
  margin-bottom: 10px;
}
.sidebar-hd span {
  background: linear-gradient(135deg,#00B4D8,#ADE8F4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.side-section-label { padding: 14px 22px 7px; font-size: 9.5px; letter-spacing: 0.1em; color: rgba(255,255,255,0.28); }
.side-divider { background: rgba(255,255,255,0.07); margin: 10px 20px; }
.side-link {
  padding: 12px 22px;
  margin: 2px 10px 2px 0;
  border-radius: 0 10px 10px 0;
  color: rgba(255,255,255,0.52);
  font-size: 13px;
  transition: all 0.18s ease;
  border-left: 3px solid transparent;
}
.side-link:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.07); transform: translateX(3px); }
.side-link.active {
  background: linear-gradient(90deg,rgba(0,119,182,0.28) 0%,rgba(0,119,182,0.1) 100%);
  color: #90E0EF;
  border-left-color: #48CAE4;
}
.side-sublink {
  padding: 10px 22px 10px 36px;
  margin: 2px 10px 2px 0;
  border-radius: 0 9px 9px 0;
  color: rgba(255,255,255,0.44);
  font-size: 12px;
  transition: all 0.18s ease;
  border-left: 3px solid transparent;
}
.side-sublink:hover { color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.06); transform: translateX(2px); }
.side-sublink.active { background: linear-gradient(90deg,rgba(0,119,182,0.2) 0%,rgba(0,119,182,0.07) 100%); color: #90E0EF; border-left-color: #48CAE4; }
.sidebar-overlay.open { background: rgba(15,23,42,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Sidebar width layout fix */
body.sidebar-visible .top-bar { margin-left: 0; width: 100%; padding-left: 280px; }
body.sidebar-visible .page { margin-left: 248px; }
body.sidebar-visible .action-bar { left: 0; right: 0; padding-left: 280px; }
@media(max-width:860px) {
  body.sidebar-visible .top-bar, body.sidebar-visible .page { margin-left: 0 !important; width: auto !important; }
  body.sidebar-visible .action-bar { left: 0 !important; }
}

/* Content wrap - full-width pages. Content spans the available viewport (minus
   the sidebar) instead of sitting in a narrow centered column, and the base
   text is nudged up a touch to suit the wider canvas. */
.wrap { max-width: none; margin: 0 auto; padding: 36px 40px 130px; font-size: 15px; }

/* Glassmorphism cards */
.card {
  background: var(--surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: var(--rl2);
  box-shadow: 0 4px 24px rgba(0,119,182,0.07), 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.5) inset;
  margin-bottom: 20px;
  transition: box-shadow 0.25s ease, transform 0.22s ease;
}
.card:hover {
  box-shadow: 0 10px 42px rgba(0,119,182,0.12), 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.62) inset;
  transform: translateY(-2px);
}
.card-hd { background: rgba(248,250,255,0.65); border-bottom: 1px solid rgba(0,119,182,0.08); padding: 16px 22px; }
.card-body { padding: 22px 22px; }
.card-ico { border-radius: 9px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.ic-blue { background: linear-gradient(135deg,#CAF0F8,#ADE8F4); color: var(--accent); }
.ic-green { background: linear-gradient(135deg,#ADE8F4,#90E0EF); color: var(--green); }
.ic-amber { background: linear-gradient(135deg,#CAF0F8,#90E0EF); color: var(--amber); }
.ic-red { background: linear-gradient(135deg,#CAF0F8,#FECACA); color: var(--red); }
.ic-gray { background: linear-gradient(135deg,#F1F5F9,#E2E8F0); color: var(--muted); }

/* Patient strip */
.pt-strip {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: var(--rl2);
  box-shadow: 0 4px 20px rgba(0,119,182,0.08), 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.6) inset;
  padding: 18px 24px;
  margin-bottom: 24px;
}
.pt-av {
  background: linear-gradient(135deg,#CAF0F8,#CAF0F8);
  color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,119,182,0.18);
  font-weight: 700;
}

/* Tags */
.tag { border-radius: 20px; font-weight: 600; }
.tb { background: linear-gradient(135deg,rgba(0,119,182,0.12),rgba(0,119,182,0.08)); color: var(--accent); border: 1px solid rgba(0,119,182,0.2); }
.tgn { background: linear-gradient(135deg,rgba(0,180,216,0.12),rgba(0,180,216,0.08)); color: var(--green); border: 1px solid rgba(0,180,216,0.2); }
.ta { background: linear-gradient(135deg,rgba(0,150,199,0.12),rgba(72,202,228,0.08)); color: var(--amber); border: 1px solid rgba(0,150,199,0.2); }
.tr { background: linear-gradient(135deg,rgba(3,4,94,0.12),rgba(2,62,138,0.08)); color: var(--red); border: 1px solid rgba(3,4,94,0.2); }
.tg { background: rgba(100,116,139,0.1); color: var(--muted); border: 1px solid rgba(100,116,139,0.18); }

/* Form elements */
.fg { margin-bottom: 16px; gap: 6px; }
label { color: var(--muted); }
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=date],input[type=time],input[type=number],select,textarea {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,119,182,0.15);
  border-radius: 10px;
  padding: 10px 13px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.55) inset;
}
input:focus,select:focus,textarea:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 0 0 3px rgba(0,119,182,0.12), 0 1px 3px rgba(0,0,0,0.04);
}
.g2 { gap: 16px; }
.g3 { gap: 16px; }
.g4 { gap: 14px; }

/* Buttons */
.btn { border-radius: 10px; font-weight: 600; transition: all 0.2s ease; letter-spacing: -0.1px; padding: 10px 18px; }
.btn-sm { padding: 7px 15px; font-size: 12px; }
.btn-primary {
  background: linear-gradient(135deg,#0096C7,#0077B6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,119,182,0.38), 0 1px 3px rgba(0,0,0,0.1);
}
.btn-primary:hover {
  background: linear-gradient(135deg,#023E8A,#023E8A);
  box-shadow: 0 7px 22px rgba(0,119,182,0.48), 0 2px 6px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,119,182,0.3); }
.btn-ghost {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(0,119,182,0.16);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(255,255,255,0.6) inset;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.97);
  border-color: rgba(0,119,182,0.28);
  box-shadow: 0 4px 14px rgba(0,119,182,0.1), 0 1px 3px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.btn-green {
  background: linear-gradient(135deg,#48CAE4,#00B4D8);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,180,216,0.38);
}
.btn-green:hover {
  background: linear-gradient(135deg,#023E8A,#00B4D8);
  box-shadow: 0 7px 22px rgba(0,180,216,0.48);
  transform: translateY(-1px);
  opacity: 1;
}

/* Action bar */
.action-bar {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,0.82);
  box-shadow: 0 -4px 28px rgba(0,119,182,0.09), 0 -1px 0 rgba(0,119,182,0.06);
  padding: 14px 32px;
}

/* Toast */
.toast { background: linear-gradient(135deg,#48CAE4,#00B4D8); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,180,216,0.38); bottom: 84px; }
.toast.err { background: linear-gradient(135deg,#03045E,#023E8A); box-shadow: 0 8px 24px rgba(3,4,94,0.38); }

/* Modals */
.modal-overlay { background: rgba(15,23,42,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,0.82);
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(15,23,42,0.28), 0 4px 16px rgba(0,119,182,0.1), 0 0 0 1px rgba(255,255,255,0.7) inset;
}
.modal-hd { background: rgba(248,250,255,0.75); border-bottom: 1px solid rgba(0,119,182,0.08); border-radius: 22px 22px 0 0; padding: 17px 22px; }
.modal-close { background: rgba(241,245,249,0.85); border: 1px solid rgba(0,119,182,0.12); border-radius: 8px; transition: all 0.18s ease; }
.modal-close:hover { background: rgba(3,4,94,0.1); color: var(--red); border-color: rgba(3,4,94,0.2); }
.modal-body { padding: 22px; }
.modal-ft { background: rgba(248,250,255,0.65); border-top: 1px solid rgba(0,119,182,0.08); border-radius: 0 0 22px 22px; padding: 14px 22px; }

/* Stat boxes */
.stat-box {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: 0 2px 12px rgba(0,119,182,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-box:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,119,182,0.11), 0 2px 6px rgba(0,0,0,0.06); }
.stat-val { color: var(--accent); }
.stat-grid { gap: 12px; margin: 10px 0 20px; }

/* Score boxes */
.score-total {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 2px 12px rgba(0,119,182,0.06);
  margin-top: 14px;
}
.score-totals-row { gap: 10px; margin-top: 14px; }
.score-cat {
  background: rgba(255,255,255,0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.68);
  border-radius: 12px;
  padding: 10px 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.score-cat:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,119,182,0.1); }
.score-cat-val { color: var(--accent); }

/* ACE progress strip */
#aceProgressStrip {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.78) !important;
  box-shadow: 0 8px 32px rgba(0,119,182,0.1), 0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.65) inset !important;
  border-radius: 18px;
  top: 60px;
  margin-top: 0;
  padding: 14px 22px 12px;
}
#aceProgressStrip:hover {
  box-shadow: 0 12px 40px rgba(0,119,182,0.14), 0 3px 10px rgba(0,0,0,0.05), 0 0 0 1px rgba(255,255,255,0.78) inset !important;
}

/* YN rows */
.yn-row {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,119,182,0.1);
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.18s ease;
}
.yn-row:hover { background: rgba(255,255,255,0.95); border-color: rgba(0,119,182,0.2); box-shadow: 0 4px 12px rgba(0,119,182,0.07); }
.yn-list { gap: 6px; }
.yn-btn { border-radius: 7px; transition: all 0.18s ease; font-weight: 600; }
.yn-btn.yes.active { background: linear-gradient(135deg,rgba(0,180,216,0.15),rgba(0,180,216,0.1)); color: var(--green); border-color: rgba(0,180,216,0.3); box-shadow: 0 2px 8px rgba(0,180,216,0.15); }
.yn-btn.no.active { background: linear-gradient(135deg,rgba(3,4,94,0.15),rgba(2,62,138,0.1)); color: var(--red); border-color: rgba(3,4,94,0.3); box-shadow: 0 2px 8px rgba(3,4,94,0.15); }
.yn-btn.na.active { background: rgba(100,116,139,0.12); color: var(--muted); border-color: rgba(100,116,139,0.25); }

/* ICD items */
.icd-item { background: rgba(255,255,255,0.72); border: 1px solid rgba(0,119,182,0.1); border-radius: 9px; padding: 8px 11px; transition: all 0.18s ease; }
.icd-item:hover { border-color: rgba(0,119,182,0.28); background: rgba(255,255,255,0.95); box-shadow: 0 4px 12px rgba(0,119,182,0.08); }
.icd-item.checked { background: linear-gradient(135deg,rgba(0,119,182,0.08),rgba(0,119,182,0.05)); border-color: rgba(0,119,182,0.28); box-shadow: 0 2px 8px rgba(0,119,182,0.1); }
.icd-item.checked .icd-box { background: linear-gradient(135deg,#0096C7,#0077B6); border-color: #0077B6; box-shadow: 0 2px 6px rgba(0,119,182,0.35); }
.icd-grid { gap: 7px; }
.icd-search { background: rgba(255,255,255,0.82); border: 1px solid rgba(0,119,182,0.15); border-radius: 10px; padding: 9px 13px; margin-bottom: 12px; }
.icd-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,119,182,0.12); }

/* Sym score */
.sym-score-grid { gap: 10px; }
.sym-score-item { background: rgba(255,255,255,0.72); border: 1px solid rgba(0,119,182,0.1); border-radius: 10px; padding: 9px 12px; transition: all 0.18s ease; }
.sym-score-item.scored { background: var(--rl); border-color: rgba(3,4,94,0.3); }
.sym-score-item:has(.sym-btn.active) { background: linear-gradient(135deg,rgba(0,119,182,0.08),rgba(0,119,182,0.05)); border-color: rgba(0,119,182,0.25); box-shadow: 0 2px 8px rgba(0,119,182,0.08); }
.sym-btn.active { background: linear-gradient(135deg,#0096C7,#0077B6); border-color: #0077B6; box-shadow: 0 2px 6px rgba(0,119,182,0.35); }

/* Datepicker / timepicker */
.datepicker,.timepicker { background: rgba(255,255,255,0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.84); border-radius: 16px; box-shadow: 0 16px 48px rgba(15,23,42,0.15), 0 4px 14px rgba(0,119,182,0.09); padding: 14px; }
.dp-day.sel { background: linear-gradient(135deg,#0096C7,#0077B6); box-shadow: 0 2px 8px rgba(0,119,182,0.35); }
.dp-day:hover { background: rgba(0,119,182,0.09); color: var(--accent); }
.dp-nav { background: rgba(255,255,255,0.82); border-color: rgba(0,119,182,0.15); border-radius: 7px; }
.dp-nav:hover { background: rgba(0,119,182,0.08); color: var(--accent); border-color: rgba(0,119,182,0.25); }
.tp-item.sel { background: linear-gradient(135deg,#0096C7,#0077B6); }
.tp-item:hover { background: rgba(0,119,182,0.09); color: var(--accent); }

/* Review checklist */
.chk-grid { gap: 10px; }
.chk-item {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,119,182,0.1);
  border-radius: 12px;
  padding: 14px 18px;
  transition: all 0.2s ease;
}
.chk-item:hover { background: rgba(255,255,255,0.94); box-shadow: 0 4px 14px rgba(0,119,182,0.09); }

/* Patient list - ACE Queue / Incomplete / Completed ACE: each row its own
   glass card (matching .pld-patient-row in the Patient Lists sidebar), not
   one big panel with divided rows. */
.patient-list-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.patient-list-head { background: rgba(248,250,255,0.72); border-bottom: 1px solid rgba(0,119,182,0.08); padding: 14px 16px; }
.patient-row {
  padding: 16px;
  border: 1px solid rgba(0,119,182,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
  transition: all 0.2s ease;
}
.patient-row:hover { background: rgba(255,255,255,0.92) !important; border-color: rgba(0,119,182,0.22); box-shadow: 0 4px 14px rgba(0,119,182,0.1); transform: translateY(-1px); }
.patient-row.active { background: linear-gradient(135deg,rgba(0,119,182,0.09) 0%,rgba(0,119,182,0.04) 100%) !important; border-color: rgba(0,119,182,0.5); }
.patient-detail-empty { background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); border: 1px dashed rgba(0,119,182,0.2); border-radius: var(--rl2); padding: 48px 24px; }
.patient-list-layout { gap: 18px; }

/* Detail items */
.detail-grid { gap: 12px; }
.detail-item { background: rgba(255,255,255,0.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.68); border-radius: 12px; padding: 12px 14px; }

/* API pills */
.api-banner { gap: 12px; }
.api-pill {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0,119,182,0.06);
  transition: all 0.2s ease;
}
.api-pill:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0,119,182,0.11); }

/* Bpbox */
.bpbox { background: rgba(248,250,255,0.75); backdrop-filter: blur(8px); border: 1px solid rgba(0,119,182,0.1); border-radius: 12px; padding: 14px 16px; }

/* Section divider */
.sdiv { margin: 22px 0 16px; }
.sdiv::before,.sdiv::after { background: linear-gradient(90deg,transparent,rgba(0,119,182,0.15),transparent); }

/* Meter */
.meter { height: 9px; border-radius: 6px; margin: 9px 0 4px; }
.meter-row { margin-bottom: 18px; }

/* Severity badges */
.sev-min { background: linear-gradient(135deg,rgba(0,180,216,0.12),rgba(0,180,216,0.08)); color: var(--green); border: 1px solid rgba(0,180,216,0.2); }
.sev-mild { background: linear-gradient(135deg,rgba(0,150,199,0.12),rgba(72,202,228,0.08)); color: var(--amber); border: 1px solid rgba(0,150,199,0.2); }
.sev-mod { background: linear-gradient(135deg,rgba(3,4,94,0.12),rgba(2,62,138,0.08)); color: var(--red); border: 1px solid rgba(3,4,94,0.2); }

/* Det items */
.det-item { background: linear-gradient(135deg,rgba(0,180,216,0.08),rgba(0,180,216,0.05)); border: 1px solid rgba(0,180,216,0.15); border-radius: 10px; padding: 10px 13px; transition: all 0.18s ease; }
.det-item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,180,216,0.1); }
.det-grid { gap: 10px; margin: 10px 0 20px; }

/* Tables */
.dtable th { background: rgba(248,250,255,0.82); }
.dtable tr:nth-child(even) td { background: rgba(248,250,255,0.5); }
.dtable td.flag { background: linear-gradient(135deg,rgba(3,4,94,0.1),rgba(2,62,138,0.06)); color: var(--red); }
.dtable { margin: 10px 0 20px; }

/* Src tags */
.src-sway { background: linear-gradient(135deg,rgba(0,119,182,0.12),rgba(0,119,182,0.08)); color: var(--accent); border: 1px solid rgba(0,119,182,0.2); }
.src-reflex { background: linear-gradient(135deg,rgba(0,180,216,0.12),rgba(0,180,216,0.08)); color: var(--green); border: 1px solid rgba(0,180,216,0.2); }
.src-shoebox { background: linear-gradient(135deg,rgba(0,150,199,0.12),rgba(72,202,228,0.08)); color: var(--amber); border: 1px solid rgba(0,150,199,0.2); }

/* Hearing meter */
.hm-sig { background: linear-gradient(135deg,#03045E,#023E8A); }
.hm-loss { background: linear-gradient(135deg,#0096C7,#48CAE4); color: #fff; }
.hm-good { background: linear-gradient(135deg,#E2E8F0,#F1F5F9); color: var(--muted); }
.hm-wrap { margin: 12px 0 22px; }

/* Day2 uploads */
.day2-upload-grid { gap: 14px; }
.day2-upload-box { background: rgba(255,255,255,0.82); backdrop-filter: blur(12px); border: 1px solid rgba(0,119,182,0.12); border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0,119,182,0.05); }
.day2-upload-item { background: rgba(248,250,255,0.75); border: 1px solid rgba(0,119,182,0.1); border-radius: 10px; }
.day2-results-preview { background: rgba(255,255,255,0.94); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.78); border-radius: 14px; box-shadow: 0 4px 16px rgba(0,119,182,0.06); padding: 26px 28px; }
.day2-upload-eye-tag,.day2-upload-part-tag { background: linear-gradient(135deg,rgba(0,119,182,0.1),rgba(0,119,182,0.07)); color: var(--accent); border: 1px solid rgba(0,119,182,0.2); }

/* Inline boxes */
.dn-time-row { background: rgba(248,250,255,0.72); border: 1px solid rgba(0,119,182,0.1); border-radius: 10px; padding: 10px 14px; }
.dn-time-grid { gap: 8px; margin-bottom: 6px; }
.dn-static-box { background: rgba(248,250,255,0.72); border: 1px solid rgba(0,119,182,0.1); border-radius: 8px; padding: 10px 12px; }

/* It-wrap (treatment selector) */
.it-display { background: rgba(255,255,255,0.82); border: 1px solid rgba(0,119,182,0.15); border-radius: 10px; padding: 9px 12px; }
.it-display:hover { border-color: rgba(0,119,182,0.3); }
.it-panel { background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.86); border-radius: 12px; box-shadow: 0 10px 32px rgba(15,23,42,0.14); }

/* ACE save panel */
.ace-save-panel { background: rgba(255,255,255,0.84); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.72); border-radius: var(--rl2); box-shadow: 0 4px 20px rgba(0,119,182,0.07); padding: 18px 22px; }

/* Missing fields popover */
#missingFieldsPopover { background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.84); border-radius: 14px; box-shadow: 0 14px 44px rgba(15,23,42,0.15); padding: 10px 8px; }

/* Field incomplete */
.field-incomplete { border-color: rgba(3,4,94,0.5) !important; background: rgba(3,4,94,0.05) !important; box-shadow: 0 0 0 3px rgba(3,4,94,0.1) !important; }

/* Res meta */
.res-meta { gap: 20px; padding-bottom: 14px; margin-bottom: 18px; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(241,245,249,0.5); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: rgba(0,119,182,0.22); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,119,182,0.38); }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 2px; }

/* Scroll-triggered section reveals (premium-minimal) */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.in { will-change: auto; }

/* ============================================================
   PROFESSIONAL POLISH LAYER - refined design system
   ============================================================ */

:root {
  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Layered "soft" elevation - realistic stacked shadows */
  --e1: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.05);
  --e2: 0 2px 4px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06);
  --e3: 0 4px 8px rgba(15,23,42,0.04), 0 12px 28px rgba(15,23,42,0.09);
  --e4: 0 8px 16px rgba(15,23,42,0.06), 0 24px 56px rgba(15,23,42,0.14);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Crisper global rendering */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { letter-spacing: -0.1px; }

/* Refined text selection */
::selection { background: rgba(0,119,182,0.18); color: #0F172A; }

/* Accessible focus ring on all interactive elements */
.btn:focus-visible, .tab:focus-visible, .side-link:focus-visible, .side-sublink:focus-visible,
.yn-btn:focus-visible, .sym-btn:focus-visible, .icd-item:focus-visible, .patient-row:focus-visible {
  outline: 2px solid rgba(0,119,182,0.55);
  outline-offset: 2px;
}

/* ---- Top bar: subtle depth + hairline accent ---- */
.top-bar { position: sticky; top: 0; }
.top-bar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(72,202,228,0.45), rgba(72,202,228,0.45), transparent);
  opacity: 0.6;
}
.top-meta { font-size: 11px; }
.top-meta strong { color: rgba(255,255,255,0.92); font-weight: 600; }

/* ---- Cards: cleaner hairline + soft layered elevation ---- */
.card {
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: var(--e2), var(--glass-edge);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover {
  box-shadow: var(--e3), var(--glass-edge);
  border-color: rgba(0,119,182,0.14);
  transform: translateY(-3px);
}
.card-title { font-weight: 600; letter-spacing: -0.2px; }

/* ---- Patient strip: gradient avatar ring ---- */
.pt-strip { box-shadow: var(--e2), var(--glass-edge); }
.pt-av {
  position: relative;
  background: linear-gradient(135deg,#0096C7,#0077B6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,119,182,0.32), 0 0 0 3px rgba(255,255,255,0.65), 0 0 0 4px rgba(0,119,182,0.12);
}
.pt-n { font-weight: 600; letter-spacing: -0.3px; }

/* ---- Buttons: refined sheen + crisp elevation ---- */
.btn { position: relative; overflow: hidden; letter-spacing: -0.1px; }
.btn-primary {
  background: linear-gradient(135deg,#0096C7 0%,#0077B6 100%);
  box-shadow: var(--e1), 0 4px 14px rgba(0,119,182,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 55%);
  opacity: 0; transition: opacity 0.25s var(--ease); pointer-events: none;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover {
  box-shadow: var(--e2), 0 8px 22px rgba(0,119,182,0.42), inset 0 1px 0 rgba(255,255,255,0.25);
  transform: translateY(-1.5px);
}
.btn-primary:active { transform: translateY(0) scale(0.985); }
.btn-green { box-shadow: var(--e1), 0 4px 14px rgba(0,180,216,0.3), inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-green:active, .btn-ghost:active { transform: translateY(0) scale(0.985); }
.btn-ghost { box-shadow: var(--e1), var(--glass-edge); }

/* ---- Tabs: smoother, calmer ---- */
.tab { font-weight: 500; letter-spacing: 0.1px; transition: all 0.22s var(--ease); }

/* ---- Sidebar links: refined active indicator ---- */
.side-link, .side-sublink { transition: color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease); }
.side-link.active { box-shadow: inset 0 0 18px rgba(0,119,182,0.12); }
.side-link svg, .side-sublink svg { transition: transform 0.2s var(--ease); }
.side-link:hover svg, .side-sublink:hover svg { transform: scale(1.12); }

/* ---- Inputs: cleaner, calmer focus ---- */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=date],input[type=time],input[type=number],select,textarea {
  box-shadow: var(--e1); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus,select:focus,textarea:focus { box-shadow: 0 0 0 3px rgba(0,119,182,0.14), var(--e1); }
label { letter-spacing: 0.05em; }

/* ---- Section divider: cleaner type ---- */
.sdiv span { color: var(--faint); letter-spacing: 0.08em; }

/* ---- Tags / badges: crisper ---- */
.tag, .sev-badge, .src-tag { letter-spacing: 0.01em; }

/* ---- Stat / score values: tabular figures ---- */
.stat-val, .score-val, .score-cat-val, .num, .dtable td.num { font-variant-numeric: tabular-nums; }

/* ---- Modals: deeper, smoother entrance ---- */
.modal { box-shadow: var(--e4), var(--glass-edge); animation: modalIn 0.32s var(--ease-out) backwards; }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-title { letter-spacing: -0.2px; }

/* ---- Toast: smoother spring entrance ---- */
.toast { border: 1px solid rgba(255,255,255,0.25); box-shadow: var(--e3); }

/* ---- Spinner: refined ---- */
.spinner { border-width: 2px; }

/* ---- Empty states ---- */
.patient-detail-empty, .day2-result-empty, .patient-empty { transition: border-color 0.25s var(--ease); }

/* ---- Sidebar reset link hover ---- */
.side-link[onclick*="clearAllPortalData"]:hover { background: rgba(3,4,94,0.14) !important; color: #90E0EF !important; }

/* ---- Smooth scroll + sticky-nav offset for anchored jumps ---- */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }

/* ---- Scroll-aware sticky nav: lifts on scroll ---- */
.top-bar { transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease); }
.top-bar.scrolled {
  box-shadow: 0 6px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.08);
}
.top-bar.scrolled::after { opacity: 1; }

/* ---- Card hover: refined premium-minimal lift ---- */
.card { transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.35s var(--ease); }
.card:hover { transform: translateY(-4px); }
.card-hd { transition: background 0.3s var(--ease); }

/* ---- Button micro-interactions: tactile press across the board ---- */
.btn { transition: transform 0.18s var(--spring), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); }
.yn-btn, .sym-btn, .icd-box, .dp-nav, .cal-btn, .tp-item, .modal-close, .mfp-item, .dp-day {
  transition: transform 0.16s var(--spring), background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.yn-btn:hover, .sym-btn:hover { transform: translateY(-1px); }
.yn-btn:active, .sym-btn:active, .icd-item:active, .dp-day:active, .tp-item:active, .menu-btn:active { transform: scale(0.94); }
.btn:active { transform: translateY(0) scale(0.97); }

/* ---- Sidebar links: smooth indent micro-interaction ---- */
.side-link:active, .side-sublink:active { transform: translateX(2px) scale(0.99); }

/* ---- Respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}


/* Patient Lists collapsible selected-patient details */
.patient-detail-accordion{overflow:hidden}
.patient-detail-accordion summary.card-hd{cursor:pointer;list-style:none;user-select:none}
.patient-detail-accordion summary.card-hd::-webkit-details-marker{display:none}
.patient-detail-accordion .accordion-chevron{margin-left:4px;color:var(--muted);font-size:18px;line-height:1;transition:transform .18s var(--ease),color .18s var(--ease);flex-shrink:0}
.patient-detail-accordion[open] .accordion-chevron{transform:rotate(180deg);color:var(--accent)}
.patient-detail-accordion:not([open]) .card-hd{border-bottom:none}
.patient-detail-accordion .section-tools{margin-left:auto}
.patient-detail-list{display:flex;flex-direction:column;gap:10px}
.patient-detail-record{border:1px solid var(--border);border-radius:12px;background:var(--s2);padding:13px 14px}
.patient-detail-record-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.patient-detail-record-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--accent)}
.patient-detail-record-actions{display:flex;gap:6px;flex-wrap:wrap}
.patient-detail-empty-text{color:var(--muted);font-size:13px;line-height:1.5}
.patient-search-bar{padding:10px 14px;border-bottom:1px solid var(--border);background:rgba(248,250,255,0.45)}
.patient-search-tools{display:flex;gap:7px;align-items:center}
.patient-search-input{flex:1;min-width:0;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:12px;color:var(--text);background:rgba(255,255,255,0.86);border:1px solid var(--border);border-radius:9px;padding:8px 10px;outline:none}
.patient-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,119,182,0.12)}
.patient-search-summary{padding:6px 14px 0;color:var(--muted);font-size:11px}



/* ============================================================
   PATIENT LISTS REDESIGN - dashboard-style patient detail view
   ============================================================ */
.patient-list-redesign-wrap{max-width:none;padding-top:26px}
.patient-list-dashboard{grid-template-columns:360px minmax(0,1fr);gap:24px;align-items:start}
.pld-sidebar-card{background:rgba(255,255,255,0.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.78);border-radius:22px;box-shadow:var(--e2),var(--glass-edge);height:calc(100vh - 150px);max-height:calc(100vh - 150px);display:flex;flex-direction:column;overflow:hidden}
.pld-sidebar-head{padding:22px 22px 18px;border-bottom:1px solid rgba(0,119,182,.08);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pld-page-title{font-size:22px;font-weight:800;letter-spacing:-.55px;color:var(--text);line-height:1.15}
.pld-page-sub{font-size:13px;color:var(--muted);line-height:1.6;margin-top:8px;max-width:230px}
.pld-search-bar{padding:18px 18px 12px!important;background:transparent!important;border-bottom:none!important}
.pld-search-tools{gap:10px!important}
.pld-search-input-wrap{position:relative;flex:1;min-width:0}
.pld-search-input-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted);pointer-events:none}
.pld-search-input-wrap .patient-search-input{width:100%;height:44px;padding-left:42px!important;border-radius:11px!important;background:rgba(255,255,255,.9)!important;font-size:13px!important;box-shadow:var(--e1)!important}
.pld-icon-btn{width:44px;height:44px;border-radius:11px;border:1px solid rgba(0,119,182,.16);background:rgba(255,255,255,.92);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--e1);transition:all .2s var(--ease)}
.pld-icon-btn:hover{color:var(--accent);border-color:rgba(0,119,182,.32);box-shadow:var(--e2);transform:translateY(-1px)}
.pld-icon-btn svg{width:18px;height:18px}
.pld-search-btn{height:44px;min-width:78px;justify-content:center}
.pld-clear-btn{height:44px;border:none;background:transparent;color:var(--muted);font-weight:700;font-size:12px;cursor:pointer;padding:0 4px;display:none}
.patient-search-summary:not(:empty)+.x{display:block}
.pld-sidebar-card .patient-search-summary{padding:8px 4px 0!important}
/* Inactive Patients toggle - small and low-priority: a quiet
   text link in the sidebar footer, sitting above the Add New Patient CTA */
/* Active / Inactive / All switch under the patient list */
.pld-view-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0 0 10px;padding:3px;border-radius:11px;background:rgba(100,116,139,.09)}
.pld-seg-btn{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:7px 6px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:-.1px;cursor:pointer;white-space:nowrap;transition:color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease)}
.pld-seg-btn:hover{color:var(--accent)}
.pld-seg-btn.is-on{color:var(--accent);background:var(--surface);box-shadow:0 1px 3px rgba(15,23,42,.1)}
.pld-seg-count{background:rgba(100,116,139,.16);color:inherit;border-radius:999px;padding:1px 6px;font-size:10px;font-weight:800;line-height:1.5}
.pld-seg-btn.is-on .pld-seg-count{background:var(--al)}
html[data-theme="dark"] .pld-view-seg{background:rgba(148,163,184,.12)}
html[data-theme="dark"] .pld-seg-btn.is-on{background:var(--s2);color:#ADE8F4}
html[data-theme="dark"] .pld-seg-count{background:rgba(148,163,184,.2)}
.pld-patient-rows{display:flex;flex-direction:column;gap:10px;padding:6px 18px 18px;overflow:auto;flex:1;min-height:0}
.pld-patient-row{position:relative;display:grid!important;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;border:1px solid rgba(0,119,182,.08)!important;border-radius:14px;background:rgba(255,255,255,.64);padding:14px!important;box-shadow:0 1px 2px rgba(15,23,42,.03);transition:all .2s var(--ease);cursor:pointer}
.pld-patient-row:hover{background:rgba(255,255,255,.88)!important;border-color:rgba(0,119,182,.2)!important;box-shadow:var(--e2);transform:translateY(-1px)}
.pld-patient-row.active{background:linear-gradient(135deg,rgba(0,119,182,.08),rgba(0,119,182,.04))!important;border-color:rgba(0,119,182,.55)!important;box-shadow:0 0 0 1px rgba(0,119,182,.18) inset,var(--e2);padding-left:14px!important}
.pld-patient-row.active::before{content:'';position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:4px;background:linear-gradient(180deg,#0096C7,#0077B6)}
.pld-patient-row .pt-av{margin-top:1px;width:44px!important;height:44px!important;font-size:13px!important;background:linear-gradient(135deg,#0096C7,#0077B6)!important;color:#fff!important;box-shadow:0 6px 18px rgba(0,119,182,.28)}
.pld-patient-row .patient-row-name{font-size:14px;font-weight:800;letter-spacing:-.2px}
.pld-patient-row .patient-row-sub{font-size:11.5px;line-height:1.5;color:var(--muted)}
/* One wrapping row of chips - status badges and the balance together - so
   they flow onto a second line instead of squeezing the name column. */
.pld-row-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:7px}
.pld-row-chips:empty{display:none}
.pld-row-chips .pld-status{padding:4px 8px;font-size:10.5px;border-radius:7px}
.pld-row-chips .pl-balance-pill{margin-top:0;font-size:10.5px;padding:4px 8px;border-radius:7px}
/* Meta items break BETWEEN parts, never through one. */
.pld-patient-row .patient-row-sub{display:flex;flex-wrap:wrap;gap:2px 8px}
.pld-meta-item{white-space:nowrap}
.pld-sidebar-foot{margin-top:auto;padding:16px 18px 20px;border-top:1px solid rgba(0,119,182,.08)}
.pld-add-patient-btn{width:100%;justify-content:center;height:48px;border-radius:12px;font-size:14px}
.pld-detail-empty{min-height:360px;display:flex;align-items:center;justify-content:center}
.pld-detail-shell{display:flex;flex-direction:column;gap:18px}
.pld-profile-card{background:rgba(255,255,255,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.78);border-radius:22px;box-shadow:var(--e2),var(--glass-edge);overflow:hidden}
.pld-profile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:26px 28px 18px}
.pld-profile-main{display:flex;align-items:flex-start;gap:18px;min-width:0}
.pld-profile-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#EAF9FC,#CAF0F8);display:flex;align-items:center;justify-content:center;color:#0077B6;font-size:26px;font-weight:900;box-shadow:0 0 0 6px rgba(255,255,255,.7),0 10px 30px rgba(0,119,182,.12)}
.pld-profile-name{font-size:26px;font-weight:900;letter-spacing:-.7px;color:var(--text);line-height:1.15;margin-bottom:12px}
.pld-profile-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:14.5px}
.pld-profile-meta span{display:inline-flex;align-items:center;gap:7px}
.pld-profile-meta svg{width:17px;height:17px;color:var(--muted)}
.pld-profile-actions{display:flex;gap:10px;align-items:center;flex-shrink:0}
.pld-menu-btn{width:42px;height:42px;border-radius:10px;border:1px solid rgba(0,119,182,.12);background:rgba(255,255,255,.9);color:var(--muted);font-size:22px;cursor:pointer;box-shadow:var(--e1);line-height:1;display:flex;align-items:center;justify-content:center}
.pld-menu-btn:hover{color:var(--red);border-color:rgba(3,4,94,.2);background:rgba(3,4,94,.06)}
.pld-status-row{display:flex;gap:10px;flex-wrap:wrap;padding:0 28px 20px;margin-left:90px}
.pld-status{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:9px;font-size:12px;font-weight:800;line-height:1;border:1px solid transparent;white-space:nowrap}
.pld-status.green{background:rgba(0,180,216,.09);color:#00B4D8;border-color:rgba(0,180,216,.22)}
.pld-status.blue{background:rgba(0,119,182,.09);color:#0077B6;border-color:rgba(0,119,182,.22)}
.pld-status.purple{background:rgba(0,180,216,.09);color:#00B4D8;border-color:rgba(0,180,216,.22)}
.pld-status.gold{background:rgba(0,150,199,.09);color:#0096C7;border-color:rgba(0,150,199,.22)}
/* Signed/locked record marker - amber, matching the in-record lock banner. */
.pld-status.signed{background:rgba(245,158,11,.13);color:#b06f08;border-color:rgba(245,158,11,.32)}
html[data-theme="dark"] .pld-status.signed{background:rgba(251,191,36,.16);color:#fbbf24;border-color:rgba(251,191,36,.35)}
.pld-status.red{background:rgba(3,4,94,.09);color:#03045E;border-color:rgba(3,4,94,.22)}
.pld-status.gray{background:rgba(100,116,139,.1);color:#64748B;border-color:rgba(100,116,139,.18)}
.pld-tabs{display:flex;gap:14px;border-top:1px solid rgba(0,119,182,.08);padding:0 26px;background:rgba(248,250,255,.38);overflow:auto}
.pld-tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:17px 8px 16px;border:none;background:transparent;color:var(--muted);font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
.pld-tab svg{width:17px;height:17px;color:currentColor}.pld-tab:hover{color:var(--accent)}
.pld-tab.active{color:var(--accent)}.pld-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,#0096C7,#0077B6)}
.pld-panel{display:flex;flex-direction:column;gap:18px}
.pld-card{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.78);border-radius:18px;box-shadow:var(--e2),var(--glass-edge);padding:18px}
.pld-section-title{font-size:18px;font-weight:900;letter-spacing:-.3px;color:var(--text);margin-bottom:14px}
/* Auto-fit so the Overview cards balance themselves - four across on a wide
   screen, folding to three then two as it narrows, instead of leaving one card
   stranded on its own row. */
/* Auto-fit columns; cards stretch to a common height so the row reads as one
   band rather than three ragged blocks. */
.pld-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:14px;align-items:stretch}
/* Column layout so a card's footer action pins to the bottom once the cards
   are stretched to a common height. */
.pld-info-card{display:flex;flex-direction:column;border:1px solid rgba(0,119,182,.1);background:rgba(255,255,255,.68);border-radius:13px;padding:16px;min-height:142px}
.pld-info-title{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:900;color:var(--text);margin-bottom:12px}
.pld-info-title svg{width:18px;height:18px;color:var(--accent)}
/* ---------- PATIENT-FACING FORMS (opened via #pf= invite link) ----------
   .pf-mode hides the entire staff shell so only #patientFormsView shows. Keyed
   off html.pf-mode (set synchronously) so the staff UI never flashes. */
#patientFormsView{display:none}
html.pf-mode body > *:not(#patientFormsView){display:none!important}
html.pf-mode #patientFormsView{display:block}
html.pf-mode,html.pf-mode body{background:var(--bg);height:auto;overflow:auto}
.pf-wrap{max-width:760px;margin:0 auto;padding:32px 18px 60px}
.pf-lang-bar{display:flex;justify-content:flex-end;margin-bottom:14px;animation:pfLangIn .45s cubic-bezier(.22,1,.36,1) both}
@keyframes pfLangIn{from{opacity:0;transform:translateY(-8px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.pf-lang-wrap{
  position:relative;display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 13px;border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.35));
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 4px 18px rgba(15,23,42,.10),0 1px 2px rgba(15,23,42,.05),inset 0 1px 0 rgba(255,255,255,.7);
  cursor:pointer;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease,border-color .22s ease,background .22s ease
}
.pf-lang-wrap:hover{transform:translateY(-2px) scale(1.03);border-color:rgba(0,119,182,.4);box-shadow:0 8px 24px rgba(0,119,182,.18),0 2px 6px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.8)}
.pf-lang-wrap:active{transform:translateY(0) scale(.97)}
.pf-lang-wrap svg{width:13px;height:13px;color:var(--accent);flex-shrink:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.pf-lang-wrap:hover svg{transform:rotate(-18deg) scale(1.15)}
.pf-lang-sel{width:auto;font-family:inherit;font-size:12px;font-weight:700;padding:2px 20px 2px 2px;border:none;border-radius:0;background:transparent;color:var(--text);cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;background-size:12px}
.pf-lang-sel:focus{box-shadow:none}
.pf-lang-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,119,182,.16),0 8px 24px rgba(0,119,182,.14)}
html[data-theme="dark"] .pf-lang-wrap{background:linear-gradient(135deg,rgba(30,41,59,.65),rgba(30,41,59,.35));border-color:rgba(255,255,255,.12);box-shadow:0 4px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] .pf-lang-wrap:hover{box-shadow:0 8px 24px rgba(0,119,182,.28),inset 0 1px 0 rgba(255,255,255,.1)}
.pf-brand{text-align:center;margin-bottom:22px}
.pf-brand-name{font-size:24px;font-weight:900;letter-spacing:-.02em;color:var(--text)}
.pf-brand-name span{color:var(--accent)}
.pf-brand-sub{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.pf-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 22px 24px;margin-bottom:16px;box-shadow:0 6px 22px rgba(15,23,42,.05)}
.pf-card-title{font-size:16px;font-weight:900;color:var(--text);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.pf-intro{background:linear-gradient(135deg,var(--al),#fff)}
.pf-hello{font-size:20px;font-weight:900;color:var(--text)}
.pf-intro-sub{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.7}
.pf-chip{display:inline-block;font-size:11px;font-weight:700;color:var(--accent);background:#fff;border:1px solid var(--border2);border-radius:999px;padding:2px 10px;margin:0 4px 4px 0}
/* Step wizard */
.pf-step-line{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.pf-steps{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.pf-step-chip{font-size:11.5px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--border2);border-radius:999px;padding:4px 12px}
.pf-step-chip.is-active{color:#fff;background:var(--accent);border-color:var(--accent)}
.pf-step-chip.is-done{color:var(--green);background:var(--gl);border-color:transparent}
.pf-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.pf-nav-back{align-self:auto}
.pf-link{background:none;border:none;color:var(--accent);font-family:inherit;font-size:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}
.pf-sig-saved{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 0}
.pf-sig-shown{max-height:56px;max-width:240px;border-bottom:1px solid #111}
.pf-sig-shown-typed{font-family:'Segoe Script',cursive;font-size:26px;color:#111;border-bottom:1px solid #111;padding:0 8px 2px;line-height:1.1}
.pf-sig-meta{font-size:12.5px;color:var(--muted)}
.pf-sig-note{font-size:12.5px;color:var(--text);background:var(--al);border-radius:9px;padding:9px 12px;margin-bottom:14px}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pf-fg{display:flex;flex-direction:column;min-width:0}
.pf-fg.pf-full{grid-column:1/-1}
.pf-fg label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pf-req{color:var(--red);margin-left:3px}
.pf-fg input,.pf-fg select{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--border2);border-radius:10px;font-family:inherit;font-size:14px;color:var(--text);background:#fff;outline:none;transition:border-color .12s,box-shadow .12s}
.pf-fg input:focus,.pf-fg select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,119,182,.14)}
.pf-consent{font-size:13.5px;line-height:1.7;color:var(--text);margin:0 0 14px}
.pf-doc-bar{margin-bottom:10px}
.pf-doc-sel{padding:9px 12px;border:1px solid var(--border2);border-radius:9px;font-family:inherit;font-size:13px;color:var(--text);background:#fff;max-width:340px;width:100%}
.pf-doc-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:4px 0 8px}
.pf-doc-frame{display:block;width:100%;height:min(64vh,560px);border:1px solid var(--border2);border-radius:12px;background:#fff;margin-bottom:14px}
.pf-check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.pf-check input{width:18px;height:18px;accent-color:var(--accent)}
.pf-check.pf-flash{background:rgba(220,38,38,.1);border-radius:8px;box-shadow:0 0 0 6px rgba(220,38,38,.1);transition:background .2s,box-shadow .2s}
.pf-fg canvas{border:1px solid var(--border2);border-radius:10px;background:#fff;cursor:crosshair;touch-action:none;width:100%;max-width:360px;height:120px;box-sizing:border-box}
.pf-sig-typed{font-family:'Segoe Script',cursive;font-size:18px!important}
.pf-signer{display:flex;gap:18px;margin-top:12px;font-size:13px;color:var(--text)}
.pf-signer label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:600}
.pf-btn-ghost{margin-top:8px;align-self:flex-start;padding:7px 14px;border:1px solid var(--border2);border-radius:8px;background:#fff;color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.pf-actions{display:flex;justify-content:flex-end;margin-top:8px}
.pf-btn{padding:14px 34px;border:none;border-radius:12px;background:var(--accent);color:#fff;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(0,119,182,.28);transition:transform .12s,box-shadow .12s}
.pf-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,119,182,.34)}
.pf-foot{text-align:center;font-size:11.5px;color:var(--faint);margin-top:18px;line-height:1.6}
.pf-done{text-align:center;padding:44px 24px}
.pf-done-ico{width:64px;height:64px;border-radius:50%;background:var(--al);color:var(--accent);font-size:34px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.pf-done-title{font-size:22px;font-weight:900;color:var(--text)}
.pf-done-sub{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6}
.pf-error{display:flex;align-items:center;gap:14px;color:var(--text);font-size:14px}
.pf-err-ico{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(220,38,38,.12);color:#dc2626;font-size:20px;font-weight:900;display:flex;align-items:center;justify-content:center}
.pf-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:#dc2626;color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999}
.pf-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){.pf-grid{grid-template-columns:minmax(0,1fr)}.pf-card{padding:18px 16px 20px}}

/* FORM-SELECTION CHECKLIST - the "Forms to Send" card (Forms page) and the
   "Forms to include" panel (New Invite) share one look. */
.fts-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.fts-title{font-size:15px;font-weight:900;color:var(--text)}
.fts-sub{font-size:12px;color:var(--muted);line-height:1.45;margin-top:3px;max-width:640px}
.fts-count,.msg-forms-count{flex:none;font-size:10.5px;font-weight:800;color:var(--accent);background:var(--al);border-radius:999px;padding:2px 9px}
.fts-list,.msg-forms-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.fts-item,.msg-form-item{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer;font-size:13.5px;font-weight:600;color:var(--text);transition:border-color .12s,background .12s,box-shadow .12s}
.fts-item:hover,.msg-form-item:hover{border-color:var(--accent);background:var(--s2)}
.fts-item.is-on,.msg-form-item.is-on{border-color:var(--accent);background:var(--al)}
.fts-item input,.msg-form-item input{width:16px;height:16px;flex:none;cursor:pointer;accent-color:var(--accent)}
.msg-forms-count{margin-left:6px}
.msg-forms-hint{font-size:11px;color:var(--faint);margin-top:8px}
.msg-history-forms{display:inline-flex;flex-wrap:wrap;gap:5px;margin-left:8px;vertical-align:middle}
.msg-form-pill{font-size:10px;font-weight:700;color:var(--accent);background:var(--al);border-radius:999px;padding:1px 8px}
.msg-status-pill{font-size:10px;font-weight:800;color:var(--muted);background:var(--s3);border-radius:999px;padding:1px 8px;margin-left:6px;white-space:nowrap}
.msg-status-pill.is-done{color:var(--green);background:var(--gl)}
html[data-theme="dark"] .fts-item,html[data-theme="dark"] .msg-form-item{background:var(--s2);border-color:var(--border)}
html[data-theme="dark"] .fts-item.is-on,html[data-theme="dark"] .msg-form-item.is-on{background:rgba(72,202,228,.12)}

/* Read-only intake field whose value is pulled from another record (e.g. the
   patient's Registration City/State/Zip) - visibly not-editable here. */
.int-readonly{background:var(--s3)!important;color:var(--muted)!important;cursor:default}
.int-pull-hint{font-size:11px;color:var(--faint);margin-top:5px}
.int-pull-hint a{color:var(--accent);text-decoration:none;font-weight:600}
.int-pull-hint a:hover{text-decoration:underline}

/* No-vehicle-involved MOI box. This free-text field replaces the entire
   auto-generated collision narrative in the PDF, so it gets a distinct
   highlighted card rather than blending in as a plain textarea, making it
   obvious that it is the one field driving that whole PDF section. */
.moi-novehicle-highlight{
  background:linear-gradient(160deg,rgba(0,119,182,.10),rgba(0,180,216,.04))!important;
  border:1.5px solid rgba(0,150,199,.55)!important;
  border-radius:14px!important;
  padding:14px 16px 16px!important;
  margin:2px 0 6px!important;
  box-shadow:
    0 0 0 1px rgba(0,150,199,.16),
    0 6px 22px rgba(0,150,199,.22),
    0 0 46px rgba(0,180,216,.28),
    inset 0 1px 0 rgba(255,255,255,.5)!important;
  position:relative;
  overflow:hidden
}
.moi-novehicle-highlight::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#0096C7,#00B4D8);
  box-shadow:0 0 14px 1px rgba(0,180,216,.7)
}
.moi-novehicle-highlight #moiNoVehicleText{
  border:1.5px solid rgba(0,150,199,.55)!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(0,150,199,.14),0 0 22px rgba(0,180,216,.20)!important
}
.moi-novehicle-highlight #moiNoVehicleText:focus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 5px rgba(0,119,182,.22),0 0 30px rgba(0,180,216,.32)!important
}
.moi-novehicle-hint{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--accent);margin-top:8px}
.moi-novehicle-hint svg{width:14px;height:14px;flex:none}
html[data-theme="dark"] .moi-novehicle-highlight{
  background:linear-gradient(160deg,rgba(72,202,228,.15),rgba(72,202,228,.04))!important;
  border-color:rgba(72,202,228,.5)!important;
  box-shadow:
    0 0 0 1px rgba(72,202,228,.22),
    0 6px 22px rgba(0,0,0,.34),
    0 0 50px rgba(72,202,228,.30),
    inset 0 1px 0 rgba(255,255,255,.08)!important
}
html[data-theme="dark"] .moi-novehicle-highlight #moiNoVehicleText{
  background:var(--s2)!important;
  border-color:rgba(72,202,228,.4)!important
}
html[data-theme="dark"] .moi-novehicle-hint{color:#48CAE4}

/* DOCUSIGN-STYLE FILLABLE DOCUMENT - the form is laid out as a sheet of paper
   with the blanks replaced by highlighted inline fields, so the document being
   signed is the thing being filled in. */
.tab-badge{display:inline-block;margin-left:7px;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--al);border-radius:999px;padding:1px 7px;vertical-align:middle}
.doc-sign-badge{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--s3);border-radius:999px;padding:1px 8px}
.doc-sign-badge.is-signed{color:var(--green);background:var(--gl)}
.doc-sign-badge.is-patient{color:var(--accent);background:var(--al)}
/* Banner shown on the Documents tab when the patient has submitted via link */
.doc-sub-banner{display:flex;align-items:flex-start;gap:12px;background:var(--gl);border:1px solid rgba(2,62,138,.16);border-radius:12px;padding:12px 15px;margin-bottom:14px}
.doc-sub-ico{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center}
.doc-sub-title{font-size:13px;font-weight:800;color:var(--green)}
.doc-sub-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:11.5px;color:var(--muted);margin-top:4px}
.ds-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 10px}
.ds-hint{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.ds-hint-dot{width:10px;height:10px;border-radius:3px;background:#FDE68A;border:1px solid #F0C000;flex:none}
.ds-paper{background:#fff;color:#161616;border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 22px rgba(15,23,42,.07);padding:44px 46px 52px;max-width:820px;margin:0 auto;font-family:'Inter',Arial,sans-serif;font-size:13.5px;line-height:1.9}
.ds-letterhead{margin-bottom:26px}
.ds-lh-name{font-size:21px;font-weight:900;letter-spacing:-.01em;color:#111}
.ds-lh-dr{font-size:12.5px;font-weight:700;margin-top:7px;color:#111}
.ds-lh-addr{font-size:11.5px;color:#333;line-height:1.65}
.ds-title{font-size:15.5px;font-weight:800;text-decoration:underline;margin:26px 0 20px;color:#111}
.ds-para{margin:0 0 18px;color:#161616}
.ds-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ds-label{font-size:13.5px;color:#161616;flex:none}
.ds-label-after{margin-left:2px}
.ds-gap{height:16px}
/* The fillable field - DocuSign's yellow highlight, underline instead of a box
   so it still reads as a blank on the form. */
.ds-field{flex:1;min-width:150px;background:#FEF6D3;border:none;border-bottom:1px solid #999;border-radius:3px 3px 0 0;padding:3px 7px;font-family:'Inter',Arial,sans-serif;font-size:13.5px;color:#161616;outline:none;transition:background .12s,box-shadow .12s}
.ds-field::placeholder{color:#B08900;opacity:.75}
.ds-field:hover{background:#FDEFB2}
.ds-field:focus{background:#FFF9DE;box-shadow:0 0 0 2px rgba(240,192,0,.5);border-bottom-color:#F0C000}
.ds-sig{flex:1;min-width:170px;min-height:30px;border-bottom:1px solid #999;display:inline-flex;align-items:flex-end}
.ds-sig-filled{border-bottom-color:#161616}
.ds-sig-filled img{max-height:34px;max-width:100%;display:block}
.ds-sig-typed{font-family:'Segoe Script',cursive;font-size:19px;color:#161616;line-height:1.2;padding-bottom:2px}
@media(max-width:720px){.ds-paper{padding:26px 20px 32px}.ds-field{min-width:120px}}
/* The paper stays white in dark mode - it's a document, not a UI surface. */
html[data-theme="dark"] .ds-paper{background:#fff!important;color:#161616!important}

/* POLICY LIMITS - a patient can carry several policies, so these render as an
   add/edit list rather than a single key/value row. */
/* DIAGNOSIS - ICD-10 codes carried over from the patient's ACE. Full-width
   Overview section; the list auto-fits as many columns as the width allows so
   every code is visible without running down the page. */
.dx-card{padding-bottom:20px}
.dx-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.dx-head-left{display:flex;align-items:center;gap:9px;min-width:0}
.dx-head-ico{flex:none;width:30px;height:30px;border-radius:9px;background:var(--al);color:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.dx-head-ico svg{width:16px;height:16px}
.dx-head-title{font-size:16px;font-weight:900;color:var(--text);letter-spacing:-.01em}
.dx-head-sub{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-top:2px}
.dx-head-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dx-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;font-size:10.5px;font-weight:800;color:#fff;background:var(--accent);border-radius:999px;padding:0 7px}
.dx-chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--s3);color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.01em}

/* grid-auto-rows:1fr keeps every tile the same height, so a one-line code and a
   three-line MVC description sit on an even grid instead of a ragged one. */
.dx-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));grid-auto-rows:1fr;gap:9px}
.dx-item{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid transparent;border-radius:11px;background:var(--s2);min-width:0;transition:background .14s,border-color .14s,transform .14s,box-shadow .14s}
.dx-item:hover{background:var(--surface);border-color:var(--border2);transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,23,42,.06)}
/* Nudged down so the code pill's text sits on the description's first line */
.dx-code{flex:none;margin-top:1px;font-family:'DM Mono',monospace;font-size:11.5px;font-weight:500;color:var(--accent);background:var(--al);border-radius:6px;padding:3px 7px;letter-spacing:-.01em;white-space:nowrap}
/* Wraps in full - every code and its whole description stay readable */
.dx-desc{flex:1;min-width:0;font-size:13.5px;color:var(--text);line-height:1.45;word-break:break-word}

/* Contents-style index of the patient's policies in the Overview card */
.pl-firm{display:flex;align-items:baseline;gap:8px;padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--border);font-size:14px;line-height:1.35}
.pl-firm span{color:var(--muted);flex:none}
.pl-firm strong{color:var(--text);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-firm .pl-firm-none{color:var(--faint);font-weight:500}
.pl-toc{display:flex;flex-direction:column;gap:2px}
.pl-toc-row{display:flex;align-items:baseline;gap:7px;width:100%;text-align:left;background:transparent;border:none;padding:5px 4px;border-radius:6px;cursor:pointer;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;transition:background .12s}
.pl-toc-row:hover{background:rgba(0,119,182,.06)}
.pl-toc-n{flex:none;font-size:10px;font-weight:800;color:var(--accent);background:var(--al);border-radius:999px;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center}
.pl-toc-amt{flex:none;font-size:14px;font-weight:700;color:var(--text)}
.pl-toc-dots{flex:1;min-width:12px;border-bottom:1px dotted var(--border2);transform:translateY(-3px)}
.pl-toc-note{flex:none;max-width:52%;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-toc-empty{font-size:13px;color:var(--faint);padding:6px 2px}
/* margin-top:auto drops the action to the card's bottom edge, so the buttons
   line up across the row however much content each card carries. */
.pl-block{margin-top:auto;padding-top:12px}
.pl-row{display:inline-flex;align-items:center;gap:6px;width:auto;padding:5px 9px;border:1px solid var(--border);border-radius:7px;background:var(--surface);cursor:pointer;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--text);line-height:1.3;transition:border-color .12s,background .12s}
.pl-row:hover{border-color:var(--accent);background:var(--s2)}
.pl-row-count{flex:none;font-size:10px;font-weight:800;color:var(--accent);background:var(--al);border-radius:999px;padding:0 6px}
.pl-row-chev{flex:none;width:13px;height:13px;color:var(--faint)}
/* Modal views */
.pl-modal-bar{display:flex;justify-content:flex-end;margin-bottom:12px}
.pl-list{display:flex;flex-direction:column;gap:8px}
.pl-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.pl-item-main{min-width:0;flex:1}
.pl-item-amt{font-size:15px;font-weight:800;color:var(--text)}
.pl-item-note{font-size:13px;color:var(--muted);margin-top:3px;white-space:pre-wrap;word-break:break-word}
.pl-item-meta{font-size:10px;color:var(--faint);margin-top:5px}
.pl-item-actions{display:flex;gap:6px;flex-shrink:0}
.pl-item-actions .pl-del{color:var(--red)}
.pl-empty{font-size:12px;color:var(--faint);padding:8px 0}

.pl-toc-amt-nd{color:var(--muted);font-style:italic;font-weight:600}

.pl-nd-toggle{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1.5px solid var(--border2);border-radius:11px;background:var(--surface);cursor:pointer;margin-bottom:16px;transition:border-color .15s,background .15s}
.pl-nd-toggle:hover{border-color:var(--accent)}
.pl-nd-toggle input{position:absolute;opacity:0;width:0;height:0}
.pl-nd-toggle-box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border2);background:var(--s2);display:flex;align-items:center;justify-content:center;color:transparent;transition:background .15s,border-color .15s,color .15s}
.pl-nd-toggle-box svg{width:13px;height:13px}
.pl-nd-toggle-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.pl-nd-toggle-copy strong{font-size:13px;font-weight:700;color:var(--text)}
.pl-nd-toggle-copy span{font-size:11.5px;color:var(--muted);line-height:1.4}
.pl-nd-toggle:has(input:checked){border-color:var(--accent);background:var(--al)}
.pl-nd-toggle:has(input:checked) .pl-nd-toggle-box{background:var(--accent);border-color:var(--accent);color:#fff}

.pl-amount-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;transition:opacity .15s}
.pl-amt-input{display:flex;align-items:center;border:1px solid var(--border2);border-radius:9px;background:var(--surface);overflow:hidden;transition:border-color .12s,box-shadow .12s}
.pl-amt-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,119,182,.14)}
.pl-amt-input span{flex:none;padding:0 0 0 11px;color:var(--muted);font-weight:700;font-size:14px}
.pl-amt-input input{flex:1;min-width:0;border:none;background:transparent;padding:10px 11px 10px 4px;font-family:inherit;font-size:14px;color:var(--text);outline:none}
.pl-amt-input input:disabled{color:var(--faint)}

.pl-chips{display:flex;flex-wrap:wrap;gap:7px}
.pl-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:var(--al);border:1px solid rgba(0,119,182,.18);font-size:12.5px;font-weight:700;color:var(--text)}
.pl-chip b{font-weight:700;color:var(--accent);text-transform:uppercase;font-size:9.5px;letter-spacing:.03em}
.pl-nd-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:var(--s2);border:1px solid var(--border2);font-size:12.5px;font-weight:700;color:var(--muted)}
.pl-nd-badge svg{width:13px;height:13px}
html[data-theme="dark"] .pl-nd-toggle{background:var(--surface)}
html[data-theme="dark"] .pl-amt-input{background:var(--s2)}
.pld-kv{display:grid;grid-template-columns:minmax(92px,auto) minmax(0,1fr);gap:8px 10px;font-size:14px;line-height:1.35}.pld-kv-label{color:var(--muted)}.pld-kv-value{color:var(--text);font-weight:600;word-break:break-word;white-space:pre-wrap}
.pld-exam-list{display:flex;flex-direction:column;gap:8px}
.pld-exam-row{display:grid;grid-template-columns:auto minmax(160px,1fr) auto auto;align-items:center;gap:18px;border:1px solid rgba(0,119,182,.1);background:rgba(255,255,255,.66);border-radius:12px;padding:12px 14px}
.pld-exam-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;flex-shrink:0}.pld-exam-avatar.ie{background:rgba(0,180,216,.1);color:#00B4D8}.pld-exam-avatar.re{background:rgba(2,62,138,.1);color:#023E8A}.pld-exam-avatar.fe{background:rgba(0,150,199,.12);color:#0096C7}.pld-exam-title{font-size:15px;font-weight:900;color:var(--text);letter-spacing:-.2px}.pld-exam-sub{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px}.pld-exam-date{font-size:14px;color:var(--text);font-weight:700;white-space:nowrap;text-align:right}.pld-exam-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:nowrap}.pld-exam-actions .btn-primary{min-width:132px;justify-content:center}.pld-exam-actions .btn-ghost{min-width:88px;justify-content:center}
.pld-exam-row.no-avatar{grid-template-columns:minmax(160px,1fr) auto auto}
.pld-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;align-items:stretch}.pld-mini-card{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.78);border-radius:18px;box-shadow:var(--e2),var(--glass-edge);padding:18px;display:flex;flex-direction:column}.pld-mini-head{display:flex;gap:14px;align-items:flex-start}.pld-mini-info{min-width:0}.pld-mini-card .pld-mini-actions{display:flex;gap:8px;margin-top:auto;padding-top:16px;flex-wrap:wrap}.pld-mini-card .pld-mini-actions .btn{flex:1 1 auto;justify-content:center;white-space:nowrap;max-width:260px}
.pld-mini-grid--solo .pld-mini-card{flex-direction:row;align-items:center;gap:18px}.pld-mini-grid--solo .pld-mini-head{flex:1 1 auto}.pld-mini-grid--solo .pld-mini-actions{margin-top:0;padding-top:0;flex:none}.pld-mini-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900}.pld-mini-avatar.ace{background:rgba(3,4,94,.1);color:#03045E}.pld-mini-avatar.dn{background:rgba(0,119,182,.1);color:#0077B6}.pld-mini-avatar.bi{background:rgba(0,150,199,.12);color:#0096C7}.pld-mini-title{font-size:16px;font-weight:900;color:var(--text)}.pld-mini-sub{font-size:13px;color:var(--muted);line-height:1.45;margin-top:3px}
/* ── Comparison tab: two full PDF viewers side by side ─────────────────── */
.cmp-intro{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.cmp-intro strong{color:var(--text)}
.cmp-test-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cmp-test-tab{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 15px;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:12.5px;font-weight:800;color:var(--muted);cursor:pointer;transition:all .18s var(--ease)}
.cmp-test-tab:hover{border-color:rgba(0,119,182,.34);color:var(--text)}
.cmp-test-tab.active{background:linear-gradient(135deg,#0096C7,#0077B6);border-color:transparent;color:#fff;box-shadow:0 5px 14px rgba(0,119,182,.28)}
.cmp-test-count{font-size:10.5px;font-weight:900;background:rgba(100,116,139,.18);color:inherit;border-radius:999px;padding:1px 7px;line-height:1.5}
.cmp-test-tab.active .cmp-test-count{background:rgba(255,255,255,.26)}
.cmp-two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.cmp-col2{display:flex;flex-direction:column;border:1px solid rgba(0,119,182,.14);border-radius:14px;background:rgba(255,255,255,.55);overflow:hidden;min-width:0}
.cmp-col2-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.cmp-col2-side{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;background:rgba(0,119,182,.12);color:#0077B6}
.cmp-col2-select{flex:1;min-width:0;height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:12.5px;font-weight:700;padding:0 10px;cursor:pointer}
.cmp-col2-sub{font-size:11.5px;color:var(--muted);font-weight:700;padding:0 14px 10px 50px;margin-top:-2px}
.cmp-col2-viewer{position:relative;height:calc(100vh - 300px);min-height:480px;border-top:1px solid rgba(0,119,182,.1);background:#f1f5f9}
.cmp-pdf-frame{width:100%;height:100%;border:none;display:block;background:#fff}
.cmp-doc-img-wrap{width:100%;height:100%;overflow:auto;display:flex;justify-content:center;background:#fff;padding:12px}
.cmp-doc-img{max-width:100%;height:auto;align-self:flex-start}
.cmp-doc-text{width:100%;height:100%;overflow:auto;white-space:pre-wrap;font-size:12.5px;line-height:1.55;color:var(--text);background:#fff;padding:16px}
.cmp-empty-viewer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;font-size:13px;color:var(--muted);text-align:center;padding:28px}
.cmp-empty-title{font-size:16px;font-weight:900;color:var(--text);letter-spacing:-.2px}
.cmp-empty-text{font-size:13px;color:var(--muted);line-height:1.55;max-width:340px}
.cmp-col2--empty{border-style:dashed;background:rgba(0,119,182,.02)}
.cmp-col2-empty-label{font-size:12.5px;font-weight:800;color:var(--muted)}
html[data-theme="dark"] .cmp-col2--empty{background:rgba(255,255,255,.02)}
html[data-theme="dark"] .cmp-col2{background:var(--s2);border-color:var(--border)}
html[data-theme="dark"] .cmp-col2-viewer{background:var(--s3);border-top-color:var(--border)}
html[data-theme="dark"] .cmp-test-count{background:rgba(148,163,184,.24)}
@media(max-width:1024px){.cmp-two-col{grid-template-columns:minmax(0,1fr)}.cmp-col2-viewer{height:calc(100vh - 260px);min-height:520px}}
.exam-detail-pdf-row{margin-top:16px;padding-top:16px;border-top:1px solid rgba(0,119,182,.1)}.exam-detail-pdf-label{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}.exam-detail-pdf-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.exam-pdf-badge{font-weight:900;font-size:10px;color:#0077B6;letter-spacing:.04em;background:rgba(0,119,182,.1);padding:2px 6px;border-radius:5px}
.exam-pdf-dd-trigger{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 12px;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:12.5px;font-weight:700;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}
.exam-pdf-dd-trigger:hover{background:var(--s2);border-color:rgba(0,119,182,.32)}
.exam-pdf-dd-trigger.active{background:var(--s2);border-color:#0077B6;box-shadow:0 0 0 3px rgba(0,119,182,.12)}
.exam-pdf-dd-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#0077B6;color:#fff;font-size:11px;font-weight:800}
.exam-pdf-dd-caret{width:13px;height:13px;color:var(--muted);transition:transform .15s}
.exam-pdf-dd-trigger.active .exam-pdf-dd-caret{transform:rotate(180deg)}
.exam-pdf-panel{flex-basis:100%;width:100%;display:none;margin-top:12px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,.06);padding:6px}
.exam-pdf-panel.open{display:block;animation:examPdfDdIn .14s ease}
@keyframes examPdfDdIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.exam-pdf-panel-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:9px 11px 6px}
.exam-pdf-file{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:none;border-radius:9px;padding:10px 11px;cursor:pointer;transition:background .12s}
.exam-pdf-file:hover{background:rgba(0,119,182,.08)}
.exam-pdf-file-ico{flex:none;font-weight:900;font-size:10px;color:#0077B6;background:rgba(0,119,182,.1);padding:4px 7px;border-radius:6px}
.exam-pdf-file-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.exam-pdf-file-name{font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exam-pdf-file-meta{font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:11px;color:var(--muted)}
.exam-pdf-file.is-latest .exam-pdf-file-meta{color:#00B4D8;font-weight:700}
.exam-pdf-file-view{flex:none;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:12px;font-weight:700;color:#0077B6}
.day2-result-note{margin-top:14px;padding:12px 14px;background:rgba(0,150,199,.08);border:1px solid rgba(0,150,199,.24);border-radius:10px;color:#0096C7;font-size:12.5px;line-height:1.5;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif}
.pld-detail-list{display:flex;flex-direction:column;gap:10px}.pld-record-card{border:1px solid rgba(0,119,182,.1);background:rgba(255,255,255,.7);border-radius:13px;padding:14px}.pld-record-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}.pld-record-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;font-weight:900;color:var(--text)}
.pld-empty-state{border:1px dashed rgba(0,119,182,.22);border-radius:14px;padding:24px;text-align:center;color:var(--muted);background:rgba(255,255,255,.54)}
.pld-doc-row{display:grid;grid-template-columns:minmax(140px,.8fr) 90px minmax(0,1.2fr) 80px;gap:10px;align-items:start;padding:12px 0;border-bottom:1px solid rgba(0,119,182,.08);font-size:13px;word-break:break-word}.pld-doc-row:last-child{border-bottom:none}.pld-doc-head{font-weight:900;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.pld-doc-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.pld-doc-preview{grid-column:1/-1;margin-top:10px;background:rgba(255,255,255,.82);border:1px solid rgba(0,119,182,.12);border-radius:12px;padding:14px;box-shadow:var(--e1)}.pld-doc-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.pld-doc-preview-title{font-size:13px;font-weight:900;color:var(--text)}.pld-doc-preview-body{height:min(76vh,820px);min-height:560px;overflow:hidden;border-radius:10px;background:rgba(248,250,255,.72);border:1px solid rgba(0,119,182,.08);padding:0;color:var(--text);font-family:Inter,'DM Sans',sans-serif}.pld-doc-pdf-frame{width:100%;height:100%;border:0;background:#fff;border-radius:10px}.pld-doc-preview-fallback{height:100%;overflow:auto;padding:14px;font-size:12px;line-height:1.55;color:var(--text)}
/* ── Documents tab - categorized, interactive ─────────────────────────────── */
.doc-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.doc-total-badge{font-size:11px;font-weight:800;color:#0077B6;background:rgba(0,119,182,.1);padding:4px 11px;border-radius:20px;white-space:nowrap}
.doc-groups{display:flex;flex-direction:column;gap:12px}
.doc-group{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.6);transition:box-shadow .15s,border-color .15s}
.doc-group:hover{box-shadow:0 6px 18px rgba(15,23,42,.06)}
.doc-group-head{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:none;padding:13px 15px;cursor:pointer;transition:background .12s;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif}
.doc-group-head:hover{background:rgba(0,119,182,.045)}
.doc-group-ico{flex:none;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;letter-spacing:.02em}
.doc-group-ico.grp-ie{background:rgba(0,180,216,.12);color:#00B4D8}
.doc-group-ico.grp-re{background:rgba(0,180,216,.12);color:#00B4D8}
.doc-group-ico.grp-fe{background:rgba(0,150,199,.14);color:#0096C7}
.doc-group-ico.grp-patient{background:rgba(0,119,182,.12);color:#0077B6}
.doc-group-ico.grp-ace{background:rgba(3,4,94,.12);color:#03045E}
.doc-group-titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.doc-group-title{font-size:14px;font-weight:900;color:var(--text)}
.doc-group-sub{font-size:11.5px;color:var(--muted)}
.doc-group-count{flex:none;padding:3px 10px;border-radius:20px;background:var(--s2);color:var(--muted);font-size:11px;font-weight:800;white-space:nowrap}
.doc-group-caret{flex:none;width:16px;height:16px;color:var(--muted);transition:transform .2s}
.doc-group.collapsed .doc-group-caret{transform:rotate(-90deg)}
.doc-group-body{display:flex;flex-direction:column;padding:2px 8px 8px}
.doc-group.collapsed .doc-group-body{display:none}
.doc-file{border-radius:10px;transition:background .12s}
.doc-file+.doc-file .doc-file-row{border-top:1px solid rgba(0,119,182,.07)}
.doc-file-row{display:flex;align-items:center;gap:13px;padding:10px}
.doc-file:hover{background:rgba(0,119,182,.05)}
.doc-file.is-open{background:rgba(0,119,182,.06)}
.doc-file-ico{flex:none;font-size:9px;font-weight:900;color:#fff;width:32px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;letter-spacing:.03em;box-shadow:0 2px 6px rgba(15,23,42,.12)}
.doc-file-ico.pdf{background:linear-gradient(160deg,#023E8A,#03045E)}
.doc-file-ico.img{background:linear-gradient(160deg,#00B4D8,#0077B6)}
.doc-file-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.doc-file-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-file-tags{display:flex;gap:6px;flex-wrap:wrap}
.doc-src-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:20px;letter-spacing:.02em}
.doc-src-chip .doc-src-app{font-weight:600;opacity:.85}
.doc-src-chip.src-sway{background:rgba(0,180,216,.1);color:#00B4D8}
.doc-src-chip.src-reflex{background:rgba(0,180,216,.1);color:#00B4D8}
.doc-src-chip.src-shoebox{background:rgba(0,150,199,.12);color:#0096C7}
.doc-src-chip.src-doc,.doc-src-chip.src-id{background:rgba(0,119,182,.1);color:#0077B6}
.doc-src-chip.src-upload{background:rgba(0,180,216,.12);color:#00B4D8}
.doc-file-ico.file{background:linear-gradient(160deg,#94A3B8,#64748B)}
.doc-file-act{flex:none;display:flex;gap:8px;align-items:center}
.doc-del-btn{color:var(--red)!important;border-color:rgba(3,4,94,.22)!important}
.doc-file .pld-doc-preview{margin:0 10px 10px}
/* Add Document segment */
.doc-add{border:1px solid rgba(0,119,182,.16);background:linear-gradient(180deg,rgba(0,119,182,.045),rgba(0,119,182,.015));border-radius:14px;padding:14px 16px;margin-bottom:16px}
.doc-add-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.doc-add-ico{flex:none;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff;font-size:20px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 9px rgba(0,119,182,.32)}
.doc-add-title{font-size:14px;font-weight:900;color:var(--text)}
.doc-add-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.doc-add-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.doc-add-select{flex:1 1 220px;min-width:200px;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--text);background:#fff;border:1px solid var(--border);border-radius:9px;padding:9px 12px;cursor:pointer;outline:none;box-shadow:none}
.doc-add-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,119,182,.12)}
.doc-add-note-input{cursor:text;font-weight:500;flex:1 1 260px}
.doc-add-btn{flex:none;white-space:nowrap}
/* Document filter bar */
.doc-filter-bar{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.doc-filter-input-wrap{position:relative;flex:1;min-width:0}
.doc-filter-input-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted);pointer-events:none}
/* !important throughout: a later generic input[type=text] rule (higher
   specificity than a bare class since it's element+attribute) otherwise
   clobbers the left padding here, pushing the typed text in behind the
   search icon instead of alongside it. */
.doc-filter-input{width:100%!important;box-sizing:border-box!important;height:38px!important;padding:0 12px 0 36px!important;border:1px solid var(--border)!important;border-radius:9px!important;background:var(--surface)!important;color:var(--text)!important;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif!important;font-size:13px!important;outline:none;transition:border-color .12s,box-shadow .12s}
.doc-filter-input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(0,119,182,.12)!important}
.doc-filter-clear{flex:none;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;transition:border-color .12s,color .12s}
.doc-filter-clear:hover{border-color:var(--accent);color:var(--accent)}
html[data-theme="dark"] .doc-filter-input,html[data-theme="dark"] .doc-filter-clear{background:var(--s2)!important;border-color:var(--border)!important;color:var(--text)!important}
@media(max-width:1180px){.patient-list-dashboard{grid-template-columns:320px minmax(0,1fr)}.pld-overview-grid,.pld-mini-grid{grid-template-columns:minmax(0,1fr)}.pld-exam-row{grid-template-columns:auto minmax(0,1fr)}.pld-exam-date,.pld-exam-actions{grid-column:2/-1;justify-content:flex-start}.pld-exam-row.no-avatar{grid-template-columns:minmax(0,1fr)}.pld-exam-row.no-avatar .pld-exam-date,.pld-exam-row.no-avatar .pld-exam-actions{grid-column:1/-1;justify-content:flex-start}}
@media(max-width:860px){.patient-list-dashboard{grid-template-columns:minmax(0,1fr)}.pld-sidebar-card{min-height:auto}.pld-patient-rows{max-height:none}.pld-profile-top{flex-direction:column}.pld-status-row{margin-left:0;padding-left:22px}.pld-overview-grid,.pld-mini-grid{grid-template-columns:minmax(0,1fr)}.pld-tabs{padding:0 16px}.pld-exam-row{grid-template-columns:auto minmax(0,1fr)}.pld-exam-date,.pld-exam-actions{grid-column:1/-1}.pld-exam-row.no-avatar{grid-template-columns:minmax(0,1fr)}.pld-profile-avatar{width:58px;height:58px;font-size:20px}.pld-profile-name{font-size:22px}}


/* Dedicated Daily Note page + patient count polish */
.pld-sidebar-head #listTotalTag{display:inline-flex;align-items:center;justify-content:center;min-height:28px;min-width:88px;line-height:1;padding:0 11px;text-align:center;white-space:nowrap;align-self:flex-start}
.pdn-shell{display:flex;flex-direction:column;gap:18px}
.pdn-hero{background:rgba(255,255,255,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.78);border-radius:22px;box-shadow:var(--e2),var(--glass-edge);padding:24px 26px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pdn-title-row{display:flex;align-items:center;gap:16px;min-width:0}.pdn-avatar{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#CAF0F8,#CAF0F8);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;box-shadow:0 0 0 5px rgba(255,255,255,.75),0 8px 22px rgba(0,119,182,.13)}
.pdn-title{font-size:24px;font-weight:900;letter-spacing:-.6px;color:var(--text);line-height:1.15}.pdn-sub{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.45}.pdn-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.pdn-card{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.78);border-radius:18px;box-shadow:var(--e2),var(--glass-edge);padding:20px}/* Eight tiles, so four columns fill two rows exactly. Three columns left the last row two-thirds full with a hole at the end. */.pdn-view-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.pdn-view-item{border:1px solid rgba(0,119,182,.1);background:rgba(255,255,255,.68);border-radius:13px;padding:13px}.pdn-view-label{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}.pdn-view-value{font-size:14px;font-weight:700;color:var(--text);word-break:break-word}.pdn-note-box{border:1px solid rgba(0,119,182,.1);background:rgba(248,250,255,.66);border-radius:13px;padding:15px;font-size:13px;line-height:1.65;color:var(--text);white-space:pre-wrap;min-height:120px}.pdn-locked-field{background:rgba(248,250,255,.82)!important;color:var(--text)!important;font-weight:700;cursor:not-allowed}.pdn-action-bar-title{font-size:12px;color:var(--muted)}.pdn-action-bar-title strong{color:var(--text)}
@media(max-width:1080px){.pdn-view-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:860px){.pdn-hero{padding:20px}.pdn-actions{justify-content:flex-start}}@media(max-width:560px){.pdn-view-grid{grid-template-columns:minmax(0,1fr)}}



/* Billing tables and Daily Notes Shoebox PDF upload */
.pld-billing-table-wrap{overflow-x:auto;border:1px solid rgba(0,119,182,.12);border-radius:14px;background:rgba(255,255,255,.72);margin-top:12px}
.pld-billing-table{width:100%;border-collapse:collapse;font-size:12px;min-width:640px}
.pld-billing-table th{background:rgba(248,250,255,.9);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:9px 10px;border-bottom:1px solid rgba(0,119,182,.12)}
.pld-billing-table td{padding:9px 10px;border-bottom:1px solid rgba(0,119,182,.08);vertical-align:top}
.pld-billing-table tr:last-child td{border-bottom:none}
.pld-billing-table .num{text-align:right;font-family:'DM Mono',monospace;white-space:nowrap}
.pld-billing-subtotal{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:10px 12px;border-top:1px solid rgba(0,119,182,.1);background:rgba(248,250,255,.55)}
.pld-billing-subtotal strong{color:var(--text)}
.billing-edit-grid{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.72)}
.billing-edit-head,.billing-edit-row{display:grid;grid-template-columns:100px minmax(220px,1fr) 130px 96px;gap:0;align-items:center}
.billing-edit-head{background:var(--s2);border-bottom:1px solid var(--border)}
.billing-edit-head div{padding:9px 10px;font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.billing-edit-row{border-bottom:1px solid var(--border)}
.billing-edit-row:last-child{border-bottom:none}
.billing-edit-cell{padding:8px 10px;min-width:0}
.billing-edit-cell input{height:36px}
.billing-edit-row.marked-delete{opacity:.58;background:var(--rl)}
.billing-edit-row.marked-delete .billing-edit-cell input{background:rgba(255,255,255,.65)!important}
.billing-edit-actions{display:flex;align-items:center;justify-content:center;gap:6px;height:100%}
.billing-edit-restore{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--border);border-radius:12px;background:var(--s2);padding:10px 12px;margin-bottom:10px}
.dn-pdf-preview{margin-top:8px}
.dn-pdf-item{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border);border-radius:10px;background:var(--s2);padding:8px 10px;font-size:12px}
.dn-pdf-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:600}
.dn-pdf-actions{display:flex;gap:6px;flex-shrink:0}
.dn-pdf-empty{font-size:11px;color:var(--muted);padding:6px 0}
.pld-doc-image{display:block;max-width:100%;height:auto;max-height:100%;margin:0 auto;border-radius:10px;background:#fff}
.pld-doc-image-wrap{height:100%;overflow:auto;padding:14px;background:#fff;text-align:center}
@media(max-width:700px){.billing-edit-head{display:none}.billing-edit-row{grid-template-columns:minmax(0,1fr)}.billing-edit-cell{padding:8px 10px}.billing-edit-cell::before{display:block;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}.billing-edit-cell.code::before{content:'Code'}.billing-edit-cell.desc::before{content:'Description'}.billing-edit-cell.charge::before{content:'Charge'}.billing-edit-actions{justify-content:flex-start;padding:0 10px 10px}}

/* ───────────────────────── AUTH / LOGIN ───────────────────────── */
.auth-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;
  background:
    radial-gradient(1100px 600px at 50% -12%, rgba(70,130,215,.20), transparent 60%),
    radial-gradient(900px 520px at 50% 118%, rgba(36,84,160,.16), transparent 60%),
    linear-gradient(160deg,#081020 0%,#0b1830 46%,#081120 100%)}
.auth-overlay::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(125,165,235,.12) 1px,transparent 1.5px);
  background-size:27px 27px;
  -webkit-mask-image:radial-gradient(125% 100% at 50% 38%,#000 28%,transparent 76%);
  mask-image:radial-gradient(125% 100% at 50% 38%,#000 28%,transparent 76%);opacity:.75}
.auth-overlay.hidden{display:none}

.auth-card{position:relative;width:100%;max-width:420px;padding:38px 36px 32px;border-radius:26px;text-align:center;
  background:linear-gradient(180deg,rgba(32,56,92,.55),rgba(15,29,52,.46));
  border:1px solid rgba(145,175,225,.18);
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.auth-card::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:58%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(155,205,255,.95),transparent);
  box-shadow:0 0 26px 5px rgba(120,180,255,.55)}

.auth-icon{width:56px;height:56px;margin:0 auto 22px;border-radius:17px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(78,120,185,.6),rgba(28,50,92,.5));
  border:1px solid rgba(165,205,255,.28);box-shadow:0 8px 26px rgba(24,66,140,.5),inset 0 1px 0 rgba(255,255,255,.18)}
.auth-icon svg{width:26px;height:26px;color:#CAF0F8}

.auth-logo{font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-weight:600;font-size:29px;letter-spacing:-.01em;color:rgba(234,241,252,.96);margin-bottom:8px;line-height:1.18}
.auth-logo span{color:#48CAE4}
.auth-sub{font-size:14px;color:rgba(192,207,230,.6);margin-bottom:28px}

.auth-card .fg{margin-bottom:13px;text-align:left}
.auth-field{position:relative;background:rgba(11,22,40,.55);border:1px solid rgba(135,165,215,.18);border-radius:14px;padding:9px 15px;transition:border .18s,box-shadow .18s}
.auth-field:focus-within{border-color:rgba(125,175,255,.55);box-shadow:0 0 0 3px rgba(80,140,240,.15)}
.auth-card .fg label{display:block;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.01em;text-transform:none;color:rgba(182,200,226,.55);margin:0 0 1px;min-height:auto}
.auth-card input[type=text],.auth-card input[type=password]{font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:15px;width:100%;background:transparent;border:none;border-radius:0;padding:0;color:#eaf1fb;outline:none;box-shadow:none}
.auth-card input[type=text]:focus,.auth-card input[type=password]:focus{box-shadow:none!important;border:none!important;background:transparent!important}
.auth-card input::placeholder{color:rgba(150,170,202,.42)}

.auth-btn{width:100%;color:#fff;border:none;border-radius:14px;padding:13px;font-size:15px;font-weight:600;cursor:pointer;margin-top:8px;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,#0096C7,#0077B6);box-shadow:0 10px 28px rgba(40,100,220,.42),inset 0 1px 0 rgba(255,255,255,.25);transition:filter .15s,transform .05s}
.auth-btn:hover{filter:brightness(1.07)}
.auth-btn:active{transform:translateY(1px)}
.auth-btn svg{width:16px;height:16px}

.auth-err{background:rgba(220,72,72,.14);color:#90E0EF;border:1px solid rgba(220,72,72,.32);border-radius:12px;padding:10px 14px;font-size:12.5px;font-weight:500;margin-bottom:16px;display:none;text-align:left}
.auth-err.show{display:block}
.auth-hint{margin-top:22px;padding-top:18px;border-top:1px solid rgba(140,170,220,.14);font-size:11px;color:rgba(172,192,222,.46);line-height:1.7;text-align:center}
.auth-hint strong{color:rgba(202,217,242,.72)}

/* topbar user chip */
.user-chip{display:flex;align-items:center;gap:8px;position:relative;margin-left:14px}
.user-chip-btn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:18px;padding:4px 6px 4px 10px;cursor:pointer;font-size:11px;font-weight:500;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;transition:background .15s}
.user-chip-btn:hover{background:rgba(255,255,255,.16)}
.user-chip-av{width:24px;height:24px;border-radius:50%;background:#48CAE4;color:#15140F;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.user-chip-role{font-size:9px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.04em}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.22);min-width:170px;padding:6px;z-index:60;display:none}
.user-menu.open{display:block}
.user-menu-info{padding:8px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}
.user-menu-name{font-size:13px;font-weight:600;color:var(--text)}
.user-menu-sub{font-size:10px;color:var(--muted);text-transform:capitalize}
.user-menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;font-size:12.5px;color:var(--text);cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif}
.user-menu-item:hover{background:var(--s2)}
.user-menu-item.danger{color:var(--red)}
.user-menu-item svg{width:14px;height:14px}

/* lawyer Final Case Report (FCR) card */
.fcr-card{position:relative;overflow:hidden;padding:0!important}
.fcr-hero{position:relative;padding:24px 26px;background:linear-gradient(135deg,#0077B6 0%,#0077B6 52%,#00B4D8 100%);color:#fff;overflow:hidden}
.fcr-hero::after{content:'';position:absolute;right:-50px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.09)}
.fcr-hero::before{content:'';position:absolute;right:60px;bottom:-80px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.06)}
.fcr-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;position:relative;z-index:1}
.fcr-hero-id{display:flex;align-items:center;gap:15px;min-width:0}
.fcr-hero-icon{width:54px;height:54px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px rgba(0,0,0,.18)}
.fcr-hero-icon svg{width:27px;height:27px;color:#fff}
.fcr-hero-title{font-size:21px;font-weight:900;letter-spacing:-.5px;line-height:1.12}
.fcr-hero-sub{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:6px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fcr-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.34);border-radius:20px;padding:3px 11px}
.fcr-pill svg{width:11px;height:11px}
.fcr-hero-actions{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.fcr-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13.5px;font-weight:800;border-radius:12px;padding:11px 17px;cursor:pointer;transition:transform .16s var(--spring),box-shadow .16s,background .16s;border:1px solid transparent;white-space:nowrap}
.fcr-btn svg{width:16px;height:16px}
.fcr-btn-primary{background:#fff;color:#023E8A;box-shadow:0 7px 20px rgba(0,0,0,.2)}
.fcr-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.28)}
.fcr-btn-ghost{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.4)}
.fcr-btn-ghost:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)}
.fcr-btn:active{transform:translateY(0) scale(.97)}
.fcr-body{padding:22px 24px}
.fcr-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.fcr-meta{border:1px solid var(--border);background:rgba(255,255,255,.62);border-radius:14px;padding:13px 15px;transition:transform .16s,box-shadow .16s,border-color .16s}
.fcr-meta:hover{transform:translateY(-2px);box-shadow:var(--e2);border-color:rgba(0,119,182,.25)}
.fcr-meta-label{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.fcr-meta-label svg{width:13px;height:13px;color:var(--accent)}
.fcr-meta-value{font-size:15.5px;font-weight:800;color:var(--text);margin-top:6px;word-break:break-word;letter-spacing:-.2px}
.fcr-foot{display:flex;align-items:center;gap:9px;margin-top:16px;padding:12px 15px;border-radius:12px;background:linear-gradient(135deg,rgba(0,119,182,.07),rgba(0,180,216,.05));border:1px solid rgba(0,119,182,.13);font-size:12px;color:var(--muted);font-weight:600}
.fcr-foot svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
@media(max-width:560px){.fcr-hero-actions{width:100%}.fcr-btn{flex:1;justify-content:center}}
/* lawyer firm-view billing summary (emerald hero variant) */
.fcr-hero--bill{background:linear-gradient(135deg,#00B4D8 0%,#0077B6 55%,#023E8A 100%)}
.bill-total{text-align:right;position:relative;z-index:1;flex-shrink:0}
.bill-total-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.82)}
.bill-total-value{font-size:34px;font-weight:900;letter-spacing:-1.2px;line-height:1.05;margin-top:4px;color:#fff}
@media(max-width:560px){.bill-total{text-align:left;width:100%}}
/* add-account form: align password input + create button on one even row */
.ac-form-actions{align-items:start}
.ac-form-actions .fg{margin-bottom:0}
.ac-form-actions input[type=text],.ac-form-actions input[type=email],.ac-form-actions .btn{height:42px;box-sizing:border-box}
.ac-form-actions .btn{width:100%;justify-content:center}
.ac-spacer-label{visibility:hidden}
@media(max-width:680px){.ac-form-actions{grid-template-columns:minmax(0,1fr)}.ac-spacer-label{display:none}}
/* ===== access control - modern glass matrix ===== */
.ac-table-wrap{overflow:auto;max-height:calc(100vh - 170px);border-radius:16px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(248,250,255,.32))}
.ac-matrix{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:680px}
.ac-matrix thead th{position:sticky;top:0;z-index:6;font-size:9px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding:15px 5px 13px;text-align:center;white-space:normal;line-height:1.25;vertical-align:bottom;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid rgba(255,255,255,.55);box-shadow:0 12px 26px -14px rgba(15,23,42,.28),0 1px 0 rgba(255,255,255,.85) inset}
.ac-matrix thead th:first-child{text-align:left;padding-left:18px;width:23%;border-top-left-radius:16px}
.ac-matrix thead th:last-child{width:78px;border-top-right-radius:16px}
.ac-matrix tbody td{padding:12px 5px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--border)}
.ac-matrix tbody tr:last-child td{border-bottom:none}
.ac-user-row{transition:background .18s}
.ac-user-row:hover{background:rgba(0,119,182,.05)}
.ac-user-row td:first-child{text-align:left;padding-left:18px}
.ac-user-row td:last-child{text-align:right;padding-right:16px;white-space:nowrap}

/* account identity cell */
.ac-user-cell{display:flex;align-items:center;gap:11px;min-width:0}
.ac-user-cell>div:last-child{min-width:0}
.ac-user-name{overflow:hidden;text-overflow:ellipsis}
.ac-user-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-user-av{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,#0077B6,#00B4D8);box-shadow:0 4px 11px rgba(0,119,182,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.ac-user-av.admin{background:linear-gradient(135deg,#48CAE4,#00B4D8);box-shadow:0 5px 14px rgba(0,180,216,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.ac-user-name{font-weight:800;color:var(--text);font-size:13.5px;line-height:1.2}
.ac-user-meta{font-size:11px;color:var(--muted);margin-top:1px}
.ac-role-badge{display:inline-block;background:var(--al);color:var(--accent);border:1px solid rgba(0,119,182,.2);border-radius:20px;padding:2px 9px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-top:6px}
.ac-role-badge.admin{background:rgba(0,180,216,.1);color:#00B4D8;border-color:rgba(0,180,216,.24)}
.ac-role-badge.inactive{background:rgba(107,114,128,.12);color:#6B7280;border-color:rgba(107,114,128,.28);margin-left:5px}

/* custom interactive checkbox */
.ac-matrix input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--border2);background:rgba(255,255,255,.7);cursor:pointer;position:relative;transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s,background .16s,border-color .16s;vertical-align:middle}
.ac-matrix input[type=checkbox]:hover:not(:disabled){border-color:var(--accent);transform:scale(1.13);box-shadow:0 0 0 4px rgba(0,119,182,.1)}
.ac-matrix input[type=checkbox]:checked{background:linear-gradient(135deg,#0077B6,#00B4D8);border-color:transparent;box-shadow:0 3px 9px rgba(0,119,182,.38)}
.ac-matrix input[type=checkbox]:checked::after{content:'';position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ac-matrix input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}
.ac-matrix input[type=checkbox]:disabled:checked{background:linear-gradient(135deg,#9aa6b8,#cbd5e1);box-shadow:none}

/* action icon buttons - wraps into a 2x2 grid instead of overflowing the
   Actions column's fixed width when all 4 (edit/reset/lock/delete) don't
   fit on one line, especially at the narrower mobile column widths below. */
.ac-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;max-width:74px;margin:0 auto}
.ac-icon-btn{background:rgba(255,255,255,.6);border:1px solid var(--border);border-radius:9px;width:32px;height:32px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:all .15s;flex:0 0 auto}
.ac-icon-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--al);transform:translateY(-1px)}
.ac-icon-btn:disabled{opacity:.4;cursor:not-allowed}
.ac-icon-btn.danger:hover:not(:disabled){border-color:var(--red);color:var(--red);background:rgba(3,4,94,.07)}
.ac-icon-btn svg{width:15px;height:15px}

/* ===== section (sub-tab) editor - glass panel ===== */
.ac-sub-row > td{padding:2px 16px 16px;border-bottom:1px solid var(--border)!important}
.ac-sections{position:relative;border-radius:16px;padding:16px 18px;margin-left:52px;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(238,244,255,.5));
  border:1px solid rgba(255,255,255,.85);box-shadow:var(--e2),inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:acSecIn .28s cubic-bezier(.16,1,.3,1)}
@keyframes acSecIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.ac-sections::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#0077B6,#00B4D8)}
.ac-sections.disabled{opacity:.6}
.ac-sections.disabled::before{background:var(--faint)}
.ac-sections-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:13px}
.ac-sections-title{font-size:11px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;gap:7px}
.ac-sections-title svg{width:14px;height:14px;color:var(--accent)}
.ac-sections-badge{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:20px;padding:3px 10px;display:inline-flex;align-items:center;gap:4px}
.ac-sections-badge.full{background:rgba(0,180,216,.12);color:#00B4D8;border:1px solid rgba(0,180,216,.26)}
.ac-sections-badge.limited{background:rgba(0,150,199,.14);color:#0096C7;border:1px solid rgba(0,150,199,.3)}
.ac-sections-hint{font-size:10.5px;color:var(--muted);font-weight:600}
.ac-sections-spacer{flex:1}
.ac-sections-quick{display:flex;gap:6px}
.ac-quick-btn{font-family:inherit;font-size:10.5px;font-weight:800;color:var(--muted);background:rgba(255,255,255,.65);border:1px solid var(--border);border-radius:9px;padding:5px 11px;cursor:pointer;transition:all .14s}
.ac-quick-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--al);transform:translateY(-1px)}
.ac-section-chips{display:flex;flex-wrap:wrap;gap:9px}
.ac-chip{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:var(--muted);background:rgba(255,255,255,.66);border:1.5px solid var(--border);border-radius:24px;padding:7px 15px 7px 9px;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,border-color .18s,color .18s,background .18s;user-select:none;position:relative}
.ac-chip:hover:not(.disabled){border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,119,182,.16)}
.ac-chip.on{background:linear-gradient(135deg,rgba(0,119,182,.13),rgba(91,155,255,.16));border-color:var(--accent);color:var(--accent);box-shadow:0 4px 12px rgba(0,119,182,.18)}
.ac-chip.disabled{cursor:not-allowed;opacity:.5}
.ac-chip-box{width:19px;height:19px;border-radius:6px;border:2px solid var(--border2);display:inline-flex;align-items:center;justify-content:center;transition:all .16s;flex-shrink:0;background:rgba(255,255,255,.6)}
.ac-chip.on .ac-chip-box{background:linear-gradient(135deg,#0077B6,#00B4D8);border-color:transparent;box-shadow:0 2px 6px rgba(0,119,182,.4)}
.ac-chip-box svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.4);transition:all .18s cubic-bezier(.34,1.56,.64,1)}
.ac-chip.on .ac-chip-box svg{opacity:1;transform:scale(1)}
.ac-chip input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.ac-sections-foot{font-size:10.5px;color:var(--faint);margin-top:13px;line-height:1.5;display:inline-flex;align-items:center;gap:6px}
.ac-sections-foot svg{width:13px;height:13px;flex-shrink:0}

/* ============================================================
   PORTAL-WIDE PREMIUM POLISH - gradient page headers + card headers
   Applies to every page via the shared .pt-strip / .card-hd classes.
   ============================================================ */
.pt-strip{
  background:linear-gradient(135deg,#0077B6 0%,#023E8A 52%,#03045E 100%)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 14px 36px rgba(49,46,129,.30),inset 0 1px 0 rgba(255,255,255,.16)!important;
  color:#fff;position:relative;overflow:hidden;padding:22px 26px!important
}
.pt-strip::after{content:'';position:absolute;right:-50px;top:-80px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.085);pointer-events:none}
.pt-strip::before{content:'';position:absolute;right:90px;bottom:-100px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.pt-strip>*{position:relative;z-index:1}
.pt-strip .pt-n{color:#fff;letter-spacing:-.3px}
.pt-strip .pt-s{color:rgba(255,255,255,.82)}
.pt-strip .pt-av{background:rgba(255,255,255,.18)!important;color:#fff!important;border:1px solid rgba(255,255,255,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px rgba(0,0,0,.18)!important}
.pt-strip .tag{background:rgba(255,255,255,.17)!important;color:#fff!important;border:1px solid rgba(255,255,255,.32)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-weight:700}
/* premium card headers */
.card-hd{background:linear-gradient(135deg,rgba(0,119,182,.055),rgba(0,180,216,.035))!important;position:relative}
.card-hd .card-title{letter-spacing:-.2px}
.card-ico{box-shadow:0 4px 12px rgba(0,119,182,.18),inset 0 1px 0 rgba(255,255,255,.5)!important}
/* premium primary action buttons across the portal */
.btn-primary{background:linear-gradient(135deg,#0096C7 0%,#0077B6 100%)!important}
.btn-green{background:linear-gradient(135deg,#48CAE4 0%,#00B4D8 100%)!important}

/* ============================================================
   PREMIUM SIDEBAR
   ============================================================ */
.sidebar{
  background:
    radial-gradient(150% 46% at 50% 103%, rgba(0,180,216,.34) 0%, transparent 62%),
    radial-gradient(130% 55% at 0% 0%, rgba(0,119,182,.30) 0%, transparent 60%),
    linear-gradient(180deg,#0F1A3D 0%,#023E8A 40%,#03045E 76%,#010225 100%)!important;
  border-right:1px solid rgba(72,202,228,.26)!important;
  box-shadow:6px 0 46px rgba(30,27,75,.5)!important;
  padding:22px 0 16px!important
}
.sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:190px;background:radial-gradient(120% 100% at 25% 0%,rgba(59,130,246,.30),transparent 72%);pointer-events:none}
.sidebar-hd{border-bottom:1px solid rgba(72,202,228,.14)!important}
.sidebar>*{position:relative;z-index:1}
.sidebar-hd{font-size:18px;letter-spacing:-.3px;border-bottom:1px solid rgba(255,255,255,.08)!important;padding:0 22px 18px!important;margin-bottom:12px!important}
.sidebar-hd span{filter:drop-shadow(0 0 10px rgba(72,202,228,.5))}
.side-section-label{color:rgba(255,255,255,.32)!important;font-weight:800!important;letter-spacing:.12em!important}
.side-divider{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)!important;height:1px!important}

.side-link,.side-sublink{
  margin:2px 12px 2px 0!important;border-radius:0 12px 12px 0!important;
  transition:color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)!important;
  border-left:3px solid transparent!important
}
.side-link:hover,.side-sublink:hover{background:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.95)!important;transform:translateX(3px)!important}
.side-link svg,.side-sublink svg{transition:transform .2s var(--ease),color .2s var(--ease)}
.side-link:hover svg,.side-sublink:hover svg{transform:scale(1.14);color:#ADE8F4}

.side-link.active,.side-sublink.active{
  background:linear-gradient(90deg,rgba(59,130,246,.34) 0%,rgba(2,62,138,.22) 100%)!important;
  color:#fff!important;border-left-color:transparent!important;
  box-shadow:0 8px 22px rgba(49,46,129,.42),inset 0 0 0 1px rgba(144,224,239,.16)!important;
  position:relative
}
.side-link.active::after,.side-sublink.active::after{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#00B4D8,#ADE8F4);box-shadow:0 0 14px rgba(72,202,228,.75)}
.side-link.active svg,.side-sublink.active svg{color:#ADE8F4}

/* sublink count badges */
#incompleteAceCount{background:linear-gradient(135deg,rgba(0,150,199,.5),rgba(72,202,228,.35))!important;color:#FFE3A3!important;box-shadow:inset 0 0 0 1px rgba(72,202,228,.4)}
#completedAceCount,#pendingDay2Count{background:linear-gradient(135deg,rgba(0,180,216,.5),rgba(0,180,216,.35))!important;color:#90E0EF!important;box-shadow:inset 0 0 0 1px rgba(0,180,216,.4)}

/* reset / clear sits at the very bottom with a danger tint */
.side-link[onclick*="clearAllPortalData"]{margin-top:auto!important;color:rgba(255,140,140,.8)!important}
.side-link[onclick*="clearAllPortalData"]:hover{background:rgba(3,4,94,.16)!important;color:#90E0EF!important;transform:translateX(3px)!important}

/* ============================================================
   PREMIUM TOP BAR
   ============================================================ */
.top-bar{
  background:
    radial-gradient(130% 280% at 92% 50%, rgba(139,92,246,.40) 0%, transparent 52%),
    radial-gradient(120% 240% at 8% 0%, rgba(0,119,182,.42) 0%, transparent 58%),
    linear-gradient(110deg,#0F1A3D 0%,#023E8A 44%,#03045E 100%)!important;
  border-bottom:1px solid rgba(72,202,228,.28)!important;
  box-shadow:0 8px 32px rgba(30,27,75,.5)!important
}
.top-bar::after{height:2px!important;background:linear-gradient(90deg,transparent,rgba(72,202,228,.9),rgba(72,202,228,.9),rgba(72,202,228,.9),transparent)!important;opacity:.85!important;box-shadow:0 0 16px rgba(72,202,228,.6)}
.top-bar .logo span{filter:drop-shadow(0 0 10px rgba(72,202,228,.6))}
.menu-btn{border-radius:10px}
.menu-btn:hover{background:rgba(72,202,228,.22)!important;transform:scale(1.06)}
.top-meta{color:rgba(255,255,255,.55)}
.top-meta strong{color:#fff;font-weight:700}

/* user chip */
.user-chip-btn{
  background:linear-gradient(135deg,rgba(0,119,182,.30),rgba(59,130,246,.18))!important;
  border:1px solid rgba(144,224,239,.3)!important;
  box-shadow:0 5px 16px rgba(49,46,129,.34),inset 0 1px 0 rgba(255,255,255,.14)!important;
  border-radius:24px!important;padding:5px 12px 5px 6px!important;
  transition:transform .16s var(--spring),box-shadow .18s,background .18s!important
}
.user-chip-btn:hover{background:linear-gradient(135deg,rgba(0,119,182,.44),rgba(59,130,246,.3))!important;transform:translateY(-1px);box-shadow:0 8px 22px rgba(49,46,129,.46),inset 0 1px 0 rgba(255,255,255,.18)!important}
.user-chip-av{width:28px!important;height:28px!important;background:linear-gradient(135deg,#00B4D8,#ADE8F4)!important;color:#0F172A!important;font-weight:800!important;box-shadow:0 3px 10px rgba(72,202,228,.5),inset 0 1px 0 rgba(255,255,255,.4)!important}
.user-chip-name{font-weight:700}
.user-chip-role{color:rgba(191,219,254,.72)!important;font-weight:700!important;letter-spacing:.05em!important}

/* user dropdown menu polish */
.user-menu{border-radius:14px!important;box-shadow:0 18px 50px rgba(15,23,42,.22),0 4px 14px rgba(0,119,182,.1)!important;border:1px solid rgba(0,119,182,.12)!important}

/* ============================================================
   SMOOTH PROFESSIONAL INTERACTIONS
   ============================================================ */
/* staggered entrance for sidebar nav */
@keyframes ctgSideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
.sidebar a.side-link,.sidebar a.side-sublink{animation:ctgSideIn .5s var(--ease-out) backwards}
.sidebar a:nth-of-type(1){animation-delay:.03s}
.sidebar a:nth-of-type(2){animation-delay:.07s}
.sidebar a:nth-of-type(3){animation-delay:.11s}
.sidebar a:nth-of-type(4){animation-delay:.15s}
.sidebar a:nth-of-type(5){animation-delay:.19s}
.sidebar a:nth-of-type(6){animation-delay:.23s}
.sidebar a:nth-of-type(7){animation-delay:.27s}
.sidebar a:nth-of-type(8){animation-delay:.31s}
.sidebar a:nth-of-type(9){animation-delay:.35s}
.sidebar a:nth-of-type(10){animation-delay:.39s}
.sidebar a:nth-of-type(11){animation-delay:.43s}

/* active indicator: static glow (no pulsing) */
.side-link.active::after,.side-sublink.active::after{box-shadow:0 0 11px rgba(72,202,228,.5)}

/* refined hover: soft inner ring + lift glow */
.side-link:hover,.side-sublink:hover{box-shadow:inset 0 0 0 1px rgba(72,202,228,.16),0 5px 16px rgba(30,27,75,.34)!important}

/* logo interaction */
.sidebar-hd{transition:transform .3s var(--ease)}
.sidebar-hd:hover{transform:translateY(-1px)}
.sidebar-hd:hover span{filter:drop-shadow(0 0 14px rgba(72,202,228,.85))}

/* top bar chip + menu micro-interactions */
.user-chip-av{transition:transform .4s var(--spring)}
.user-chip-btn:hover .user-chip-av{transform:rotate(8deg) scale(1.08)}
.menu-btn svg{transition:transform .3s var(--spring)}
.menu-btn:hover svg{transform:rotate(90deg)}
.user-chip-btn:active{transform:translateY(0) scale(.97)}

/* page-header hero: subtle hover lift for that 'alive' feel */
.pt-strip{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.pt-strip:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(49,46,129,.36),inset 0 1px 0 rgba(255,255,255,.18)!important}

/* ============================================================
   POLISHED EMPTY STATES (ACE Queue, empty lists, etc.)
   ============================================================ */
.patient-empty{
  padding:46px 24px!important;text-align:center;color:var(--muted)!important;
  font-size:13.5px!important;font-weight:600;line-height:1.55;
  display:flex;flex-direction:column;align-items:center;gap:15px;
  animation:ctgSideIn .45s var(--ease-out)
}
.patient-empty::before{
  content:'';width:60px;height:60px;border-radius:19px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/27px no-repeat,
    linear-gradient(135deg,rgba(0,119,182,.13),rgba(0,180,216,.09));
  border:1px solid rgba(0,119,182,.18);
  box-shadow:0 10px 24px rgba(0,119,182,.12),inset 0 1px 0 rgba(255,255,255,.65)
}
/* card bodies that hold these states get a hairline-soft tint */
#pendingAceRows,#incompleteAceRows,#completedAceRows,#patientListRows:empty{min-height:0}
/* unify detail empty-states with the same premium card feel */
.pld-empty-state{border:1px dashed rgba(0,119,182,.24)!important;background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(238,244,255,.45))!important;border-radius:16px!important;padding:30px 24px!important;font-weight:600;color:var(--muted)}

/* "Select a patient" detail panel empty-state */
.patient-detail-empty.pld-detail-empty{
  flex-direction:column;gap:18px;text-align:center;color:var(--muted)!important;
  font-size:14px!important;font-weight:600;line-height:1.55;
  border:1px dashed rgba(0,119,182,.22)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(238,244,255,.5))!important;
  animation:ctgSideIn .45s var(--ease-out)
}
.patient-detail-empty.pld-detail-empty::before{
  content:'';width:68px;height:68px;border-radius:21px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3Cline x1='9' y1='12' x2='15' y2='12'/%3E%3Cline x1='9' y1='16' x2='13' y2='16'/%3E%3C/svg%3E") center/31px no-repeat,
    linear-gradient(135deg,rgba(0,119,182,.13),rgba(0,180,216,.09));
  border:1px solid rgba(0,119,182,.18);
  box-shadow:0 12px 30px rgba(0,119,182,.13),inset 0 1px 0 rgba(255,255,255,.65)
}

/* ============================================================
   PATIENT LISTS - LEVEL-UP
   ============================================================ */
.pld-sidebar-head{background:linear-gradient(135deg,rgba(0,119,182,.06),rgba(0,180,216,.04))!important;border-bottom:1px solid rgba(0,119,182,.1)!important}
.pld-sidebar-head .pt-av{background:linear-gradient(135deg,#0077B6,#023E8A)!important;color:#fff!important;box-shadow:0 6px 18px rgba(0,119,182,.35),inset 0 1px 0 rgba(255,255,255,.4)!important}
.pld-page-title{background:linear-gradient(120deg,#0F172A 0%,#023E8A 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pld-sidebar-head .tag{background:linear-gradient(135deg,rgba(0,119,182,.15),rgba(0,180,216,.1))!important;border:1px solid rgba(0,119,182,.24)!important;color:var(--accent)!important;font-weight:800!important}

/* search */
.pld-search-input-wrap .patient-search-input{transition:box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s!important}
.pld-search-input-wrap .patient-search-input:focus{box-shadow:0 0 0 4px rgba(0,119,182,.14),var(--e1)!important;border-color:var(--accent)!important;background:#fff!important}
.pld-search-input-wrap:focus-within svg{color:var(--accent)}
.pld-search-btn{background:linear-gradient(135deg,#0096C7,#0077B6)!important;color:#fff!important;border:none!important;box-shadow:0 5px 14px rgba(0,119,182,.32)!important;transition:transform .16s var(--spring),box-shadow .18s!important}
.pld-search-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,119,182,.44)!important}
.pld-search-btn:active{transform:translateY(0) scale(.97)}

/* patient rows */
.pld-patient-row{transition:transform .2s var(--spring),box-shadow .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)!important}
.pld-patient-row:hover{transform:translateY(-2px)!important;box-shadow:0 12px 28px rgba(0,119,182,.16)!important;border-color:rgba(0,119,182,.3)!important}
.pld-patient-row .pt-av{background:linear-gradient(135deg,#0077B6,#023E8A)!important;box-shadow:0 6px 16px rgba(0,119,182,.32),0 0 0 3px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.35)!important;transition:transform .2s var(--spring),box-shadow .2s!important}
.pld-patient-row:hover .pt-av{transform:scale(1.06) rotate(-3deg)}
.pld-patient-row.active .pt-av{box-shadow:0 7px 20px rgba(0,119,182,.5),0 0 0 3px rgba(0,119,182,.28),inset 0 1px 0 rgba(255,255,255,.35)!important}
.pld-patient-row .pld-status.green{background:linear-gradient(135deg,rgba(0,180,216,.14),rgba(0,180,216,.08))!important;border-color:rgba(0,180,216,.3)!important}

/* Add New Patient - gradient + animated shimmer */
.pld-add-patient-btn{position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(49,46,129,.36)!important}
.pld-add-patient-btn::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:ctgShimmer 4s ease-in-out infinite;pointer-events:none}
@keyframes ctgShimmer{0%,55%{left:-70%}100%{left:140%}}
.pld-add-patient-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(49,46,129,.5)!important}


/* ============================================================
   REQUESTED LOGIN REDESIGN - aligned with FCR / Billing / ACE banners
   ============================================================ */
.auth-overlay{
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(0,119,182,.22), transparent 64%),
    radial-gradient(820px 520px at 88% 72%, rgba(0,180,216,.20), transparent 66%),
    linear-gradient(135deg,#EAF9FC 0%,#CAF0F8 50%,#EAF9FC 100%)!important;
}
.auth-overlay::before{
  background-image:radial-gradient(rgba(0,119,182,.16) 1px,transparent 1.5px)!important;
  opacity:.55!important;
  -webkit-mask-image:radial-gradient(110% 100% at 50% 45%,#000 18%,transparent 78%)!important;
  mask-image:radial-gradient(110% 100% at 50% 45%,#000 18%,transparent 78%)!important;
}
.auth-card{
  max-width:460px!important;
  padding:0!important;
  overflow:hidden!important;
  text-align:left!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 24px 70px rgba(49,46,129,.22),0 0 0 1px rgba(255,255,255,.6) inset!important;
  -webkit-backdrop-filter:blur(24px)!important;
  backdrop-filter:blur(24px)!important;
}
.auth-card::before{display:none!important}
.auth-hero{
  position:relative;
  overflow:hidden;
  padding:25px 28px 22px;
  color:#fff;
  background:linear-gradient(135deg,#0077B6 0%,#023E8A 52%,#03045E 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.auth-hero::after{content:'';position:absolute;right:-52px;top:-78px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.09);pointer-events:none}
.auth-hero::before{content:'';position:absolute;right:82px;bottom:-105px;width:175px;height:175px;border-radius:50%;background:rgba(255,255,255,.055);pointer-events:none}
.auth-hero-top{position:relative;z-index:1;display:flex;align-items:center;gap:15px}
.auth-brand-copy{min-width:0}
.auth-icon{width:56px!important;height:56px!important;margin:0!important;border-radius:16px!important;background:rgba(255,255,255,.18)!important;border:1px solid rgba(255,255,255,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px rgba(0,0,0,.18)!important;flex-shrink:0}
.auth-icon svg{color:#fff!important;width:27px!important;height:27px!important}
.auth-logo{font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif!important;font-size:25px!important;font-weight:900!important;letter-spacing:-.6px!important;color:#fff!important;margin:0!important;line-height:1.1!important}
.auth-logo span{color:#CAF0F8!important;filter:drop-shadow(0 0 10px rgba(255,255,255,.3))}
.auth-sub{font-size:12.5px!important;color:rgba(255,255,255,.82)!important;margin:6px 0 0!important;font-weight:600!important}
.auth-hero-foot{position:relative;z-index:1;display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.auth-pill{display:inline-flex;align-items:center;border-radius:20px;padding:4px 10px;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.32);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.auth-body{padding:26px 28px 28px;background:rgba(255,255,255,.88)}
.auth-card .fg{margin-bottom:14px!important;text-align:left!important}
.auth-field{background:rgba(255,255,255,.86)!important;border:1px solid rgba(0,119,182,.15)!important;border-radius:14px!important;padding:11px 14px!important;box-shadow:0 1px 3px rgba(0,0,0,.04),0 0 0 1px rgba(255,255,255,.55) inset!important}
.auth-field:focus-within{border-color:rgba(0,119,182,.55)!important;box-shadow:0 0 0 3px rgba(0,119,182,.12),0 1px 3px rgba(0,0,0,.04)!important}
.auth-card .fg label{font-size:10px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--muted)!important;margin:0 0 3px!important;min-height:auto!important}
.auth-card input[type=text],.auth-card input[type=password]{color:var(--text)!important;font-size:15px!important}
.auth-card input::placeholder{color:var(--faint)!important}
.auth-btn{border-radius:13px!important;padding:13px 15px!important;background:linear-gradient(135deg,#0096C7 0%,#0077B6 100%)!important;box-shadow:0 9px 24px rgba(0,119,182,.34)!important;font-weight:800!important;transition:transform .16s var(--spring),box-shadow .18s,filter .18s!important}
.auth-btn:hover{filter:brightness(1.04)!important;transform:translateY(-1px)!important;box-shadow:0 13px 30px rgba(0,119,182,.42)!important}
.auth-btn:active{transform:translateY(0) scale(.98)!important}
.auth-err{background:var(--rl)!important;color:var(--red)!important;border:1px solid rgba(3,4,94,.22)!important;border-radius:12px!important;margin-bottom:16px!important}
.auth-hint{margin-top:19px!important;padding-top:16px!important;border-top:1px solid rgba(0,119,182,.12)!important;font-size:11px!important;color:var(--muted)!important;line-height:1.65!important;text-align:center!important}
.auth-hint strong{color:var(--accent)!important}
.auth-forgot-row{display:flex;justify-content:flex-end;margin:-6px 1px 14px}
.auth-forgot-link{background:none;border:none;padding:2px 1px;font-size:12px;font-weight:700;color:#0077B6;cursor:pointer;text-decoration:none;letter-spacing:.01em;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.auth-forgot-link:hover{color:#023E8A;border-bottom-color:rgba(2,62,138,.45)}
.auth-forgot-link:disabled{opacity:.5;cursor:not-allowed}
/* Role identity chip - appears under the username the moment it matches a known
   account, colored by role so the person confirms which access level they'll get. */
.auth-role-hint{display:flex;align-items:center;gap:9px;margin:0 2px 13px;padding:9px 13px;border-radius:13px;border:1px solid rgba(0,119,182,.24);background:rgba(0,119,182,.08);font-size:12px;animation:authRoleIn .24s ease both}
.auth-role-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#0077B6;box-shadow:0 0 0 3px rgba(0,119,182,.12)}
.auth-role-label{font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:11px;color:#0077B6}
.auth-role-name{margin-left:auto;color:var(--muted);font-weight:600;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-role-inactive{color:#03045E;background:rgba(3,4,94,.1);font-weight:800;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:7px;margin-left:8px;flex:0 0 auto}
@keyframes authRoleIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
/* Role hue drawn from the CTG palette (deep navy -> light cyan). */
.auth-role-hint.role-admin{background:rgba(3,4,94,.07);border-color:rgba(3,4,94,.22)}.auth-role-hint.role-admin .auth-role-dot{background:#03045E;box-shadow:0 0 0 3px rgba(3,4,94,.12)}.auth-role-hint.role-admin .auth-role-label{color:#03045E}
.auth-role-hint.role-compliance{background:rgba(0,119,182,.09);border-color:rgba(0,119,182,.26)}.auth-role-hint.role-compliance .auth-role-dot{background:#0077B6}.auth-role-hint.role-compliance .auth-role-label{color:#0077B6}
.auth-role-hint.role-provider{background:rgba(0,150,199,.09);border-color:rgba(0,150,199,.26)}.auth-role-hint.role-provider .auth-role-dot{background:#0096C7}.auth-role-hint.role-provider .auth-role-label{color:#0077B6}
.auth-role-hint.role-ta{background:rgba(0,180,216,.1);border-color:rgba(0,180,216,.3)}.auth-role-hint.role-ta .auth-role-dot{background:#00B4D8;box-shadow:0 0 0 3px rgba(0,180,216,.14)}.auth-role-hint.role-ta .auth-role-label{color:#0096C7}
.auth-role-hint.role-lawyer{background:rgba(72,202,228,.12);border-color:rgba(72,202,228,.34)}.auth-role-hint.role-lawyer .auth-role-dot{background:#48CAE4;box-shadow:0 0 0 3px rgba(72,202,228,.16)}.auth-role-hint.role-lawyer .auth-role-label{color:#0096C7}
html[data-theme="dark"] .auth-role-hint{background:rgba(0,180,216,.1);border-color:rgba(0,180,216,.26)}
html[data-theme="dark"] .auth-role-label{color:#90E0F8}
html[data-theme="dark"] .auth-role-inactive{color:#CAF0F8;background:rgba(202,240,248,.12)}
html[data-theme="dark"] .auth-role-hint.role-admin{background:rgba(0,119,182,.14);border-color:rgba(0,119,182,.32)}html[data-theme="dark"] .auth-role-hint.role-admin .auth-role-dot{background:#0077B6;box-shadow:0 0 0 3px rgba(0,119,182,.2)}html[data-theme="dark"] .auth-role-hint.role-admin .auth-role-label{color:#48CAE4}
html[data-theme="dark"] .auth-role-hint.role-compliance .auth-role-dot{background:#0096C7}html[data-theme="dark"] .auth-role-hint.role-compliance .auth-role-label{color:#48CAE4}
html[data-theme="dark"] .auth-role-hint.role-provider .auth-role-dot{background:#00B4D8}html[data-theme="dark"] .auth-role-hint.role-provider .auth-role-label{color:#90E0F8}
html[data-theme="dark"] .auth-role-hint.role-ta .auth-role-dot{background:#48CAE4}html[data-theme="dark"] .auth-role-hint.role-ta .auth-role-label{color:#90E0F8}
html[data-theme="dark"] .auth-role-hint.role-lawyer .auth-role-dot{background:#CAF0F8;box-shadow:0 0 0 3px rgba(202,240,248,.16)}html[data-theme="dark"] .auth-role-hint.role-lawyer .auth-role-label{color:#CAF0F8}
@media(max-width:520px){.auth-card{max-width:100%!important}.auth-hero{padding:22px 22px 19px}.auth-body{padding:23px 22px 25px}.auth-logo{font-size:22px!important}.auth-hero-top{align-items:flex-start}.auth-icon{width:50px!important;height:50px!important}}

/* ============================================================
   REQUESTED NAV REFINEMENT - darker top/sidebar + green accent
   Scope: only global navigation and account dropdown.
   ============================================================ */
:root{
  --ctg-nav-navy:#071222;
  --ctg-nav-blue:#023E8A;
  --ctg-nav-royal:#023E8A;
  --ctg-nav-green:#0077B6;
  --ctg-nav-green-bright:#00B4D8;
  --ctg-nav-violet:#03045E;
}
.sidebar{
  background:
    radial-gradient(130% 52% at 0% 0%, rgba(30,64,175,.34) 0%, transparent 56%),
    radial-gradient(115% 48% at 100% 42%, rgba(15,118,110,.24) 0%, transparent 58%),
    radial-gradient(120% 46% at 42% 100%, rgba(49,46,129,.26) 0%, transparent 62%),
    linear-gradient(180deg,#071222 0%,#0B1730 34%,#10203A 70%,#0A1D25 100%)!important;
  border-right:1px solid rgba(52,211,153,.22)!important;
  box-shadow:10px 0 38px rgba(2,6,23,.62)!important;
}
.sidebar::before{
  background:
    radial-gradient(95% 76% at 18% 0%,rgba(59,130,246,.22),transparent 64%),
    radial-gradient(88% 60% at 95% 18%,rgba(52,211,153,.16),transparent 62%)!important;
}
.sidebar-hd{
  color:#F8FAFC!important;
  border-bottom:1px solid rgba(52,211,153,.16)!important;
}
.sidebar-hd span{color:#48CAE4!important;filter:drop-shadow(0 0 12px rgba(52,211,153,.36))!important}
.side-section-label{color:rgba(191,219,254,.42)!important}
.side-divider{background:linear-gradient(90deg,transparent,rgba(52,211,153,.16),rgba(72,202,228,.12),transparent)!important}
.side-link,.side-sublink{color:rgba(226,232,240,.68)!important}
.side-link:hover,.side-sublink:hover{
  background:linear-gradient(90deg,rgba(0,119,182,.15),rgba(15,118,110,.12))!important;
  color:#FFFFFF!important;
}
.side-link:hover svg,.side-sublink:hover svg{color:#00B4D8!important}
.side-link.active,.side-sublink.active{
  background:linear-gradient(90deg,rgba(0,119,182,.34) 0%,rgba(15,118,110,.30) 100%)!important;
  box-shadow:0 10px 24px rgba(2,6,23,.42),inset 0 0 0 1px rgba(52,211,153,.20)!important;
}
.side-link.active::after,.side-sublink.active::after{
  background:linear-gradient(180deg,#48CAE4,#00B4D8)!important;
  box-shadow:0 0 16px rgba(52,211,153,.62)!important;
}
.side-link.active svg,.side-sublink.active svg{color:#90E0EF!important}
#incompleteAceCount{background:rgba(0,150,199,.38)!important;color:#CAF0F8!important}
#completedAceCount,#pendingDay2Count{background:rgba(0,180,216,.40)!important;color:#90E0EF!important}

.top-bar{
  overflow:visible!important;
  background:
    radial-gradient(80% 280% at 8% 0%, rgba(0,119,182,.35) 0%, transparent 55%),
    radial-gradient(76% 240% at 92% 50%, rgba(15,118,110,.32) 0%, transparent 60%),
    linear-gradient(112deg,#071222 0%,#0E1B36 45%,#132B3A 76%,#092821 100%)!important;
  border-bottom:1px solid rgba(52,211,153,.24)!important;
  box-shadow:0 10px 30px rgba(2,6,23,.52)!important;
}
.top-bar::after{
  background:linear-gradient(90deg,transparent,rgba(72,202,228,.82),rgba(52,211,153,.88),rgba(72,202,228,.72),transparent)!important;
  box-shadow:0 0 16px rgba(52,211,153,.46)!important;
}
.menu-btn:hover{background:rgba(52,211,153,.16)!important}
.top-meta{color:rgba(226,232,240,.62)!important}
.top-meta strong{color:#CAF0F8!important}
.user-chip{position:relative!important;z-index:1200!important}
.user-chip-btn{
  background:linear-gradient(135deg,rgba(30,64,175,.34),rgba(15,118,110,.26))!important;
  border:1px solid rgba(94,234,212,.28)!important;
  box-shadow:0 6px 16px rgba(2,6,23,.32),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.user-chip-btn:hover{background:linear-gradient(135deg,rgba(0,119,182,.42),rgba(15,118,110,.34))!important}
.user-chip-av{background:linear-gradient(135deg,#48CAE4,#00B4D8)!important;color:#06121F!important}
.user-chip-role{color:rgba(167,243,208,.78)!important}

/* Fix account dropdown visibility after nav redesign */
.user-menu{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  z-index:3000!important;
  min-width:218px!important;
  padding:8px!important;
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(8,20,35,.98))!important;
  border:1px solid rgba(94,234,212,.22)!important;
  box-shadow:0 20px 60px rgba(2,6,23,.62),0 0 0 1px rgba(72,202,228,.08) inset!important;
  color:#E2E8F0!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.user-menu.open{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.user-menu-info{border-bottom:1px solid rgba(148,163,184,.18)!important}
.user-menu-name{color:#F8FAFC!important}
.user-menu-sub{color:rgba(167,243,208,.70)!important}
.user-menu-item{color:#E2E8F0!important;border:1px solid transparent!important}
.user-menu-item:hover{background:rgba(0,119,182,.18)!important;border-color:rgba(72,202,228,.16)!important}
.user-menu-item.danger{color:#90E0EF!important}
.user-menu-item.danger:hover{background:rgba(3,4,94,.16)!important;border-color:rgba(248,113,113,.18)!important;color:#FECACA!important}

@media(max-width:860px){
  .user-menu{position:fixed!important;top:58px!important;right:12px!important}
}

/* ============================================================
   REQUESTED NAV ADJUSTMENT - reversed, darker blue-purple only
   Scope: global top bar, sidebar, and account dropdown visibility.
   ============================================================ */
:root{
  --ctg-nav-ink:#050B1D;
  --ctg-nav-midnight:#0B1430;
  --ctg-nav-indigo:#03045E;
  --ctg-nav-royal-blue:#023E8A;
  --ctg-nav-soft-blue:#48CAE4;
  --ctg-nav-soft-violet:#48CAE4;
}

/* Sidebar now carries the slightly darker banner-style blue/purple treatment. */
.sidebar{
  background:
    radial-gradient(120% 46% at 12% 0%, rgba(0,119,182,.34) 0%, transparent 58%),
    radial-gradient(110% 48% at 100% 32%, rgba(0,180,216,.28) 0%, transparent 62%),
    radial-gradient(92% 42% at 45% 100%, rgba(59,130,246,.18) 0%, transparent 60%),
    linear-gradient(180deg,#080F28 0%,#0E1738 36%,#171044 72%,#090D22 100%)!important;
  border-right:1px solid rgba(72,202,228,.26)!important;
  box-shadow:10px 0 38px rgba(2,6,23,.58)!important;
}
.sidebar::before{
  background:
    radial-gradient(92% 70% at 10% 0%,rgba(72,202,228,.20),transparent 64%),
    radial-gradient(88% 62% at 94% 24%,rgba(72,202,228,.16),transparent 62%)!important;
}
.sidebar-hd{
  color:#F8FAFC!important;
  border-bottom:1px solid rgba(72,202,228,.20)!important;
}
.sidebar-hd span{color:#ADE8F4!important;filter:drop-shadow(0 0 12px rgba(72,202,228,.42))!important}
.side-section-label{color:rgba(219,234,254,.42)!important}
.side-divider{background:linear-gradient(90deg,transparent,rgba(72,202,228,.18),rgba(72,202,228,.16),transparent)!important}
.side-link,.side-sublink{color:rgba(226,232,240,.70)!important}
.side-link:hover,.side-sublink:hover{
  background:linear-gradient(90deg,rgba(0,119,182,.18),rgba(0,180,216,.14))!important;
  color:#FFFFFF!important;
  box-shadow:inset 0 0 0 1px rgba(72,202,228,.14),0 5px 16px rgba(15,23,42,.32)!important;
}
.side-link:hover svg,.side-sublink:hover svg{color:#ADE8F4!important}
.side-link.active,.side-sublink.active{
  background:linear-gradient(90deg,rgba(0,119,182,.38) 0%,rgba(0,180,216,.30) 100%)!important;
  box-shadow:0 10px 24px rgba(2,6,23,.42),inset 0 0 0 1px rgba(144,224,239,.18)!important;
}
.side-link.active::after,.side-sublink.active::after{
  background:linear-gradient(180deg,#00B4D8,#ADE8F4)!important;
  box-shadow:0 0 16px rgba(72,202,228,.58)!important;
}
.side-link.active svg,.side-sublink.active svg{color:#CAF0F8!important}
#incompleteAceCount{background:rgba(0,150,199,.36)!important;color:#CAF0F8!important}
#completedAceCount,#pendingDay2Count{background:rgba(0,119,182,.38)!important;color:#CAF0F8!important}

/* Top bar uses the reversed, deeper midnight-indigoblue color weight. */
.top-bar{
  overflow:visible!important;
  background:
    radial-gradient(76% 260% at 8% 0%, rgba(30,64,175,.30) 0%, transparent 56%),
    radial-gradient(70% 240% at 90% 50%, rgba(0,180,216,.24) 0%, transparent 60%),
    linear-gradient(112deg,#050B1D 0%,#0B1430 45%,#11194A 78%,#03045E 100%)!important;
  border-bottom:1px solid rgba(72,202,228,.24)!important;
  box-shadow:0 10px 30px rgba(2,6,23,.50)!important;
}
.top-bar::after{
  background:linear-gradient(90deg,transparent,rgba(72,202,228,.82),rgba(72,202,228,.82),rgba(72,202,228,.70),transparent)!important;
  box-shadow:0 0 16px rgba(72,202,228,.45)!important;
}
.menu-btn:hover{background:rgba(72,202,228,.16)!important}
.top-meta{color:rgba(226,232,240,.62)!important}
.top-meta strong{color:#CAF0F8!important}
.user-chip{position:relative!important;z-index:1200!important}
.user-chip-btn{
  background:linear-gradient(135deg,rgba(0,119,182,.34),rgba(0,180,216,.24))!important;
  border:1px solid rgba(144,224,239,.28)!important;
  box-shadow:0 6px 16px rgba(2,6,23,.32),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.user-chip-btn:hover{background:linear-gradient(135deg,rgba(0,119,182,.42),rgba(0,180,216,.32))!important}
.user-chip-av{background:linear-gradient(135deg,#00B4D8,#ADE8F4)!important;color:#050B1D!important}
.user-chip-role{color:rgba(191,219,254,.78)!important}

/* Keep the account dropdown/logout menu visible and usable. */
.user-menu{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  z-index:3000!important;
  min-width:218px!important;
  padding:8px!important;
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(16,18,44,.98))!important;
  border:1px solid rgba(144,224,239,.22)!important;
  box-shadow:0 20px 60px rgba(2,6,23,.62),0 0 0 1px rgba(72,202,228,.08) inset!important;
  color:#E2E8F0!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
.user-menu.open{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.user-menu-info{border-bottom:1px solid rgba(148,163,184,.18)!important}
.user-menu-name{color:#F8FAFC!important}
.user-menu-sub{color:rgba(191,219,254,.72)!important}
.user-menu-item{color:#E2E8F0!important;border:1px solid transparent!important}
.user-menu-item:hover{background:rgba(0,119,182,.18)!important;border-color:rgba(72,202,228,.16)!important}
.user-menu-item.danger{color:#90E0EF!important}
.user-menu-item.danger:hover{background:rgba(3,4,94,.16)!important;border-color:rgba(248,113,113,.18)!important;color:#FECACA!important}

@media(max-width:860px){
  .user-menu{position:fixed!important;top:58px!important;right:12px!important}
}

/* ============================================================
   REQUESTED NAV REDESIGN - match FCR / Billing / ACE banner style
   Scope: global top bar, sidebar, and account dropdown only.
   ============================================================ */
:root{
  --ctg-banner-deep:#03045E;
  --ctg-banner-navy:#0B1F4A;
  --ctg-banner-blue:#023E8A;
  --ctg-banner-indigo:#03045E;
  --ctg-banner-violet:#03045E;
  --ctg-banner-line:#90E0EF;
  --ctg-banner-soft:#ADE8F4;
}

/* Shared banner language: deep blue-violet base, soft orb overlays, thin light accent. */
.top-bar{
  position:sticky!important;
  top:0!important;
  z-index:1800!important;
  overflow:visible!important;
  height:60px!important;
  padding:0 28px!important;
  background:
    radial-gradient(180px 135px at 15% -38px,rgba(255,255,255,.16) 0%,transparent 68%),
    radial-gradient(260px 160px at 88% 140%,rgba(72,202,228,.30) 0%,transparent 64%),
    radial-gradient(260px 180px at 12% 120%,rgba(0,119,182,.30) 0%,transparent 66%),
    linear-gradient(135deg,#03045E 0%,#023E8A 42%,#0077B6 70%,#010225 100%)!important;
  border-bottom:1px solid rgba(199,210,254,.34)!important;
  box-shadow:0 14px 34px rgba(15,23,42,.42),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.top-bar::before{
  content:'';
  position:absolute;
  right:148px;
  bottom:-74px;
  width:150px;
  height:150px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  pointer-events:none;
}
.top-bar::after{
  content:''!important;
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  bottom:-1px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,rgba(144,224,239,.94),rgba(199,210,254,.88),rgba(72,202,228,.84),transparent)!important;
  opacity:.95!important;
  box-shadow:0 0 18px rgba(72,202,228,.52)!important;
}
.top-bar > *{position:relative;z-index:1}
.top-bar .logo,
.sidebar-hd{
  font-family:'Instrument Serif',serif!important;
  color:#fff!important;
  text-shadow:0 1px 18px rgba(144,224,239,.18)!important;
}
.top-bar .logo{font-size:18px!important;letter-spacing:.1px!important}
.top-bar .logo span,
.sidebar-hd span{
  color:#CAF0F8!important;
  filter:drop-shadow(0 0 12px rgba(144,224,239,.48))!important;
}
.menu-btn{
  width:36px!important;
  height:36px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.085)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
  transition:background .18s var(--ease),transform .18s var(--spring),border-color .18s!important;
}
.menu-btn:hover{
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.28)!important;
  transform:translateY(-1px) scale(1.03)!important;
}
.top-meta{
  color:rgba(226,232,240,.68)!important;
  font-weight:600!important;
}
.top-meta strong{color:#FFFFFF!important;font-weight:800!important}

/* Sidebar uses the same banner family, but slightly deeper for navigation contrast. */
.sidebar{
  width:252px!important;
  position:fixed!important;
  background:
    radial-gradient(260px 180px at 5% -34px,rgba(255,255,255,.13) 0%,transparent 66%),
    radial-gradient(270px 220px at 106% 18%,rgba(72,202,228,.22) 0%,transparent 64%),
    radial-gradient(280px 240px at 28% 112%,rgba(0,180,216,.24) 0%,transparent 68%),
    linear-gradient(180deg,#03045E 0%,#0B1F4A 38%,#023E8A 72%,#010225 100%)!important;
  border-right:1px solid rgba(199,210,254,.22)!important;
  box-shadow:12px 0 42px rgba(2,6,23,.54),inset -1px 0 0 rgba(255,255,255,.06)!important;
  padding:20px 0 16px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.sidebar::before{
  content:''!important;
  position:absolute!important;
  top:76px!important;
  right:-80px!important;
  width:176px!important;
  height:176px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.048)!important;
  pointer-events:none!important;
}
.sidebar::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(144,224,239,.68),rgba(72,202,228,.40),transparent);
  pointer-events:none;
}
.sidebar>*{position:relative;z-index:1}
.sidebar-hd{
  margin:0 16px 14px!important;
  padding:14px 14px 16px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px rgba(2,6,23,.18)!important;
  font-size:18px!important;
  line-height:1.18!important;
}
.side-section-label{
  padding:13px 22px 7px!important;
  color:rgba(219,234,254,.50)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}
.side-divider{
  height:1px!important;
  margin:10px 20px!important;
  background:linear-gradient(90deg,transparent,rgba(144,224,239,.24),rgba(72,202,228,.20),transparent)!important;
}
.side-link,.side-sublink{
  position:relative!important;
  margin:3px 13px 3px 12px!important;
  border-left:0!important;
  border-radius:14px!important;
  color:rgba(241,245,249,.70)!important;
  background:transparent!important;
  transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)!important;
}
.side-link{padding:11px 13px!important;font-size:13px!important;font-weight:750!important}
.side-sublink{padding:10px 13px 10px 26px!important;font-size:12px!important;font-weight:700!important}
.side-link svg,.side-sublink svg{
  color:rgba(219,234,254,.74)!important;
  filter:drop-shadow(0 0 8px rgba(144,224,239,.16));
  transition:color .18s var(--ease),transform .18s var(--spring)!important;
}
.side-link:hover,.side-sublink:hover{
  color:#FFFFFF!important;
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.065))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 10px 22px rgba(2,6,23,.22)!important;
  transform:translateX(2px)!important;
}
.side-link:hover svg,.side-sublink:hover svg{color:#FFFFFF!important;transform:scale(1.08)!important}
.side-link.active,.side-sublink.active{
  color:#FFFFFF!important;
  background:
    radial-gradient(120px 48px at 100% 0%,rgba(255,255,255,.17) 0%,transparent 72%),
    linear-gradient(135deg,rgba(0,119,182,.72) 0%,rgba(0,119,182,.58) 55%,rgba(0,180,216,.46) 100%)!important;
  box-shadow:0 13px 26px rgba(30,64,175,.28),inset 0 1px 0 rgba(255,255,255,.20),inset 0 0 0 1px rgba(255,255,255,.18)!important;
}
.side-link.active::before,.side-sublink.active::before{
  content:'';
  position:absolute;
  left:8px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#FFFFFF,#ADE8F4,#48CAE4);
  box-shadow:0 0 14px rgba(191,219,254,.70);
}
.side-link.active::after,.side-sublink.active::after{display:none!important}
.side-link.active{padding-left:18px!important}
.side-sublink.active{padding-left:31px!important}
.side-link.active svg,.side-sublink.active svg{color:#FFFFFF!important}
#incompleteAceCount,
#completedAceCount,
#pendingDay2Count{
  margin-left:auto!important;
  border:1px solid rgba(255,255,255,.20)!important;
  background:rgba(255,255,255,.13)!important;
  color:#FFFFFF!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
}
#sideReset{
  color:rgba(254,202,202,.80)!important;
}
#sideReset:hover{
  background:rgba(3,4,94,.14)!important;
  box-shadow:inset 0 0 0 1px rgba(248,113,113,.18),0 10px 22px rgba(2,6,23,.22)!important;
  color:#FECACA!important;
}

/* User chip follows the same banner-pill style and keeps the logout menu above everything. */
.user-chip{position:relative!important;z-index:2600!important}
.user-chip-btn{
  min-height:38px!important;
  border-radius:999px!important;
  padding:5px 13px 5px 6px!important;
  background:rgba(255,255,255,.105)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  color:#FFFFFF!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 22px rgba(2,6,23,.18)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.user-chip-btn:hover{
  background:rgba(255,255,255,.17)!important;
  border-color:rgba(255,255,255,.34)!important;
  transform:translateY(-1px)!important;
}
.user-chip-av{
  background:linear-gradient(135deg,#FFFFFF 0%,#CAF0F8 48%,#ADE8F4 100%)!important;
  color:#0B1F4A!important;
  font-weight:900!important;
  box-shadow:0 4px 12px rgba(15,23,42,.26)!important;
}
.user-chip-role{color:rgba(219,234,254,.78)!important;font-weight:700!important}
.user-menu{
  display:none;
  position:absolute!important;
  top:calc(100% + 11px)!important;
  right:0!important;
  z-index:5000!important;
  min-width:232px!important;
  padding:9px!important;
  overflow:hidden!important;
  border-radius:18px!important;
  background:
    radial-gradient(150px 120px at 100% 0%,rgba(72,202,228,.18),transparent 70%),
    linear-gradient(180deg,rgba(15,23,42,.985),rgba(17,24,60,.985))!important;
  border:1px solid rgba(199,210,254,.24)!important;
  box-shadow:0 24px 70px rgba(2,6,23,.66),inset 0 1px 0 rgba(255,255,255,.10)!important;
  color:#E2E8F0!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
.user-menu.open{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important}
.user-menu-info{
  padding:11px 11px 12px!important;
  border-bottom:1px solid rgba(199,210,254,.16)!important;
}
.user-menu-name{color:#FFFFFF!important;font-weight:900!important}
.user-menu-sub{color:rgba(219,234,254,.72)!important;font-weight:700!important}
.user-menu-item{
  border-radius:12px!important;
  color:#E2E8F0!important;
  border:1px solid transparent!important;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .16s var(--ease)!important;
}
.user-menu-item:hover{
  background:rgba(72,202,228,.14)!important;
  border-color:rgba(144,224,239,.18)!important;
  color:#FFFFFF!important;
  transform:translateX(1px)!important;
}
.user-menu-item.danger{color:#90E0EF!important}
.user-menu-item.danger:hover{
  background:rgba(3,4,94,.16)!important;
  border-color:rgba(248,113,113,.20)!important;
  color:#FECACA!important;
}

body.sidebar-visible .top-bar{margin-left:250px!important;width:calc(100% - 250px)!important;padding-left:28px!important}
body.sidebar-visible .page{margin-left:250px!important}
body.sidebar-visible .action-bar{left:250px!important;right:0!important;padding-left:28px!important}
body.sidebar-visible #topbarLogo,
body.sidebar-visible .top-bar .topbar-logo{display:none!important}

@media(max-width:860px){
  /* On mobile the sidebar is an overlay (it doesn't push content), so the
     bars go back to full width with no sidebar clearance - reset the
     padding-left added above for the desktop pushed-layout (back to the
     bars' own 28px gutter; the page has none). */
  body.sidebar-visible .top-bar{margin-left:0!important;width:auto!important;padding-left:28px!important}
  body.sidebar-visible .page{margin-left:0!important;width:auto!important;padding-left:0!important}
  body.sidebar-visible .action-bar{left:0!important;padding-left:28px!important}
  .sidebar{width:min(292px,86vw)!important}
  .user-menu{position:fixed!important;top:62px!important;right:12px!important}
}

/* Requested cleanup: remove the large sidebar circle overlay while preserving the banner-style navigation. */
.sidebar::before{display:none!important;content:none!important;}

/* Login page chrome only - keeps the previous login card/banner design intact. */
body.auth-active .top-bar{
  margin-left:0!important;
  width:100%!important;
  left:0!important;
  z-index:1100!important;
}
/* The Day-1 ACE section tabs (1 Patient / 2 Mechanism / ...) belong to the ACE
   editor only - never show them on the login screen, even if a prior session
   left them visible. */
body.auth-active #day1Tabs{display:none!important}
body.auth-active .sidebar,
body.auth-active .sidebar-overlay,
body.auth-active .menu-btn{
  display:none!important;
}
body.auth-active #topbarLogo,
body.auth-active .top-bar .topbar-logo{
  display:block!important;
}
body.auth-active .page,
body.auth-active .action-bar{
  margin-left:0!important;
  left:0!important;
  width:auto!important;
}
body.auth-active .auth-overlay{
  top:54px!important;
  z-index:1000!important;
}

/* Premium polish layer, additive, with no structural or JS changes. Indigo
   #0077B6 and violet #00B4D8 plus micro-interactions. Pages fade via opacity
   only, never transform, so the fixed bottom action bar cannot shift during
   a transition. */
:root{
  --brand-1:#0077B6;--brand-2:#00B4D8;--brand-cyan:#48CAE4;
  --brand-grad:linear-gradient(135deg,#0077B6 0%,#00B4D8 100%);
  --ring:0 0 0 3px rgba(0,119,182,.16);
}

/* Primary buttons - gradient, lift, press, focus ring */
.btn-primary{
  background:var(--brand-grad)!important;
  box-shadow:0 3px 10px rgba(0,119,182,.28),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s var(--ease,ease),box-shadow .2s var(--ease,ease),filter .2s ease;
}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,119,182,.36),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,119,182,.3)}
.btn{transition:transform .18s var(--ease,ease),box-shadow .18s var(--ease,ease),background .18s ease,filter .18s ease}
.btn-ghost:hover{border-color:rgba(0,119,182,.32);transform:translateY(-1px)}
.btn-green:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,180,216,.28)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important;filter:none!important}

/* Keyboard accessibility - clear indigo focus ring */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(0,119,182,.55);outline-offset:2px;border-radius:8px
}
input:focus,select:focus,textarea:focus{border-color:var(--brand-1)}

/* Cards - richer resting elevation + hover depth (shadow only, no transform) */
.card,.pld-card,.pld-detail-shell,.pld-mini-card,.pld-profile-card{transition:box-shadow .25s var(--ease,ease),border-color .25s ease}
.card:hover,.pld-card:hover{box-shadow:var(--e3,0 8px 24px rgba(15,23,42,.10))}

/* (Sidebar already has a dedicated premium redesign - left untouched.) */

/* Subtle page entrance - opacity only (safe with fixed action bar) */
@keyframes ctgFadeIn{from{opacity:0}to{opacity:1}}
.page.active{animation:ctgFadeIn .28s var(--ease-out,ease) both}

/* Premium thin scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(0,119,182,.35) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(0,119,182,.28);border-radius:10px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(0,119,182,.45);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* Brand text selection */
::selection{background:rgba(0,180,216,.22)}

/* Button ripple (spans injected by inline script) */
.ctg-ripple{position:absolute;border-radius:50%;transform:scale(0);opacity:.6;pointer-events:none;animation:ctgRipple .6s var(--ease-out,ease-out);z-index:0}
@keyframes ctgRipple{to{transform:scale(2.6);opacity:0}}

/* Login password show/hide toggle */
.ctg-pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;background:transparent;color:rgba(150,170,202,.6);cursor:pointer;border-radius:9px;transition:color .15s,background .15s}
.ctg-pw-toggle:hover{color:#eaf1fb;background:rgba(255,255,255,.06)}
.ctg-pw-toggle.on{color:#48CAE4}
.auth-card input#authPass{padding-right:40px!important}

/* Drag & drop upload zones (Add Document + exam Test 1/2/3 + file fields) */
.doc-add,.day2-upload-box,.fg{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.doc-add.drag-over{border-color:var(--brand-1);background:linear-gradient(180deg,rgba(0,119,182,.10),rgba(0,180,216,.05));box-shadow:0 0 0 3px rgba(0,119,182,.14)}
.doc-add.drag-over .doc-add-sub::after{content:" — drop to upload";color:var(--brand-1);font-weight:700}
.day2-upload-box.drag-over,.fg.drag-over{outline:2px dashed var(--brand-1);outline-offset:3px;border-radius:12px;background:rgba(0,119,182,.06)}
.day2-upload-box.drag-over .day2-upload-title::after{content:" — drop to upload";color:var(--brand-1);font-weight:700;font-size:11px}

/* Honor reduced-motion preferences */
@media(prefers-reduced-motion:reduce){
  .page.active{animation:none}
  .ctg-ripple{display:none}
  .btn,.btn-primary,.btn-ghost,.btn-green{transition:none!important}
  .btn-primary:hover,.btn-ghost:hover,.btn-green:hover{transform:none!important}
}


/* Theme toggle button and dark mode. UI only: PDF output, extraction and app
   logic are untouched, and report and document previews stay paper white. */
.ctg-theme-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-right:12px;border:1px solid rgba(199,210,254,.30);background:rgba(255,255,255,.08);color:#CAF0F8;border-radius:11px;cursor:pointer;transition:background .16s,transform .16s,box-shadow .16s}
.ctg-theme-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.3)}
.ctg-theme-btn:active{transform:translateY(0)}
.ctg-theme-btn svg{width:18px;height:18px}
.ctg-theme-btn .ctg-sun{display:none}
html[data-theme="dark"] .ctg-theme-btn .ctg-sun{display:block}
html[data-theme="dark"] .ctg-theme-btn .ctg-moon{display:none}

html[data-theme="dark"]{
  --bg:#02023A;--surface:#03045E;--s2:#052B66;--s3:#073B72;
  --border:#0A4A82;--border2:#0F5C96;
  --text:#E4F7FC;--muted:#9BA8C6;--faint:#6E7C9C;
  --al:#063A5E;
  --e1:0 1px 2px rgba(0,0,0,.5);--e2:0 6px 18px rgba(0,0,0,.5);
  --e3:0 12px 34px rgba(0,0,0,.55);--e4:0 24px 60px rgba(0,0,0,.65);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.05);
  --gl:rgba(0,180,216,.14);--aml:rgba(72,202,228,.16);--rl:rgba(2,62,138,.16);
}
html[data-theme="dark"] body{
  background:
    radial-gradient(900px 520px at 100% -6%,rgba(0,119,182,.40),transparent 60%),
    radial-gradient(820px 520px at 0% 104%,rgba(0,180,216,.40),transparent 60%),
    #02023A;
  color:var(--text);
}
/* Elevated card surfaces */
html[data-theme="dark"] .pld-card,
html[data-theme="dark"] .pld-info-card,
html[data-theme="dark"] .pld-mini-card,
html[data-theme="dark"] .pld-profile-card,
html[data-theme="dark"] .pld-sidebar-card,
html[data-theme="dark"] .pld-record-card,
html[data-theme="dark"] .pld-patient-row,
html[data-theme="dark"] .pld-billing-table-wrap,
html[data-theme="dark"] .doc-group,
html[data-theme="dark"] .pl-row,
html[data-theme="dark"] .pl-item,
html[data-theme="dark"] .exam-pdf-panel,
html[data-theme="dark"] .fcr-meta,
html[data-theme="dark"] .it-panel,
html[data-theme="dark"] .icd-box,
html[data-theme="dark"] .ac-table-wrap,
html[data-theme="dark"] .pt-strip,
html[data-theme="dark"] .modal{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)}
/* Recessed / nested surfaces */
html[data-theme="dark"] .pld-exam-row,
html[data-theme="dark"] .dx-item,
html[data-theme="dark"] .pld-empty-state,
html[data-theme="dark"] .doc-add,
html[data-theme="dark"] .day2-upload-box,
html[data-theme="dark"] .exam-detail-pdf-row,
html[data-theme="dark"] .card-hd,
html[data-theme="dark"] .modal-hd,
html[data-theme="dark"] .ac-chip,
html[data-theme="dark"] .it-display,
html[data-theme="dark"] .action-bar,
html[data-theme="dark"] .patient-search-wrap{background:var(--s2)!important;border-color:var(--border)!important;color:var(--text)}
/* Form controls */
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=time],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .doc-add-select,
html[data-theme="dark"] .patient-search-input,
html[data-theme="dark"] .icd-search{background:var(--s2)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--faint)}
/* Ghost / icon buttons */
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .pld-icon-btn,
html[data-theme="dark"] .pld-menu-btn,
html[data-theme="dark"] .pld-search-btn,
html[data-theme="dark"] .ac-icon-btn,
html[data-theme="dark"] .ac-quick-btn,
html[data-theme="dark"] .fcr-btn-ghost{background:var(--s2)!important;color:var(--text)!important;border-color:var(--border)!important}
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .ac-quick-btn:hover{background:var(--s3)!important}
/* Text that is hard-coded dark in light mode */
html[data-theme="dark"] .pt-n,
html[data-theme="dark"] .pld-profile-name,
html[data-theme="dark"] .pld-section-title,
html[data-theme="dark"] .pld-mini-title,
html[data-theme="dark"] .pld-exam-title,
html[data-theme="dark"] .pld-record-title,
html[data-theme="dark"] .pld-doc-preview-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .doc-group-title,
html[data-theme="dark"] .doc-file-name,
html[data-theme="dark"] .detail-value,
html[data-theme="dark"] .fcr-meta-value,
html[data-theme="dark"] .exam-pdf-file-name,
html[data-theme="dark"] .pld-info-title,
html[data-theme="dark"] .ac-user-name{color:var(--text)!important}
/* Larger headings & page titles */
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] .pld-title,html[data-theme="dark"] .pld-list-title,
html[data-theme="dark"] .modal-title,html[data-theme="dark"] .fcr-hero-title{color:var(--text)!important}
/* Tabs */
html[data-theme="dark"] .pld-tabs{border-color:var(--border)!important}
html[data-theme="dark"] .pld-tab{color:var(--muted)}
html[data-theme="dark"] .pld-tab.active{color:#ADE8F4}
/* Section divider label chip sits on the surface */
html[data-theme="dark"] .sdiv span{background:var(--surface)!important;color:var(--faint)!important}
html[data-theme="dark"] .res-group{background:var(--s2)}
html[data-theme="dark"] .res-group b{color:#ADE8F4}
/* Keep document viewers & the printed-report preview on white paper */
html[data-theme="dark"] .day2-results-preview{background:#fff!important;color:#161616!important}
html[data-theme="dark"] .pld-doc-preview-body,
html[data-theme="dark"] .pld-doc-image-wrap{background:#fff!important}
/* Login screen - dark mode (hero gradient kept; body/fields go dark) */
html[data-theme="dark"] .auth-overlay{
  background:
    radial-gradient(900px 520px at 12% 18%,rgba(0,119,182,.22),transparent 64%),
    radial-gradient(820px 520px at 88% 72%,rgba(0,180,216,.18),transparent 66%),
    linear-gradient(158deg,#0E1533 0%,#0A0F26 52%,#090C1E 100%)!important;
}
html[data-theme="dark"] .auth-overlay::before{opacity:.26!important}
html[data-theme="dark"] .auth-body{background:var(--surface)!important}
html[data-theme="dark"] .auth-field{background:var(--s2)!important;border-color:var(--border)!important;box-shadow:none!important}
html[data-theme="dark"] .auth-card input[type=text],
html[data-theme="dark"] .auth-card input[type=password]{background:transparent!important;color:var(--text)!important}
html[data-theme="dark"] .auth-card .fg label{color:var(--muted)!important}
html[data-theme="dark"] .auth-card input::placeholder{color:var(--faint)!important}
/* Dark-mode fixes: empty detail placeholder + gradient page title */
html[data-theme="dark"] .patient-detail-empty,
html[data-theme="dark"] .patient-detail-empty.pld-detail-empty{background:linear-gradient(135deg,var(--surface),var(--s2))!important;border-color:var(--border)!important;color:var(--muted)!important}
html[data-theme="dark"] .patient-detail-empty.pld-detail-empty::before{box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)!important;border-color:rgba(72,202,228,.28)!important}
html[data-theme="dark"] .pld-page-title{background:linear-gradient(120deg,#ADE8F4 0%,#48CAE4 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}

/* ============================================================
   DARK MODE - inner surface completion + cohesive layout
   ============================================================ */
/* Detail cells (exam cards, ACE, overview grids) */
html[data-theme="dark"] .detail-item{background:var(--s2)!important;border-color:var(--border)!important}
html[data-theme="dark"] .detail-value{color:var(--text)!important}
html[data-theme="dark"] .detail-label{color:var(--muted)!important}
/* Patient-detail tab bar */
html[data-theme="dark"] .pld-tabs{background:var(--s2)!important;border-top-color:var(--border)!important}
html[data-theme="dark"] .pld-tab{color:var(--muted)!important}
html[data-theme="dark"] .pld-tab.active{color:#ADE8F4!important}
/* Billing tables */
html[data-theme="dark"] .pld-billing-table-wrap{background:var(--surface)!important;border-color:var(--border)!important}
html[data-theme="dark"] .pld-billing-table th{background:var(--s3)!important;color:var(--muted)!important;border-color:var(--border)!important}
html[data-theme="dark"] .pld-billing-table td{color:var(--text)!important;border-bottom-color:var(--border)!important}
html[data-theme="dark"] .pld-billing-table tr:last-child td,
html[data-theme="dark"] .pld-billing-table tfoot td,
html[data-theme="dark"] .pld-billing-subtotal{background:var(--s2)!important;color:var(--text)!important}
/* Info / import / note boxes */
html[data-theme="dark"] .bpbox{background:var(--s2)!important;border-color:var(--border)!important;color:var(--muted)!important}
/* Completed / pending / incomplete ACE list rows */
html[data-theme="dark"] .patient-list-panel,
html[data-theme="dark"] .patient-row,
html[data-theme="dark"] .patient-empty{background:var(--surface)!important;border-color:var(--border)!important}
html[data-theme="dark"] .patient-row:hover{background:var(--s2)!important}
html[data-theme="dark"] .patient-row-name{color:var(--text)!important}
html[data-theme="dark"] .patient-row-sub,html[data-theme="dark"] .patient-empty{color:var(--muted)!important}
/* Access Control sticky matrix header + sections */
html[data-theme="dark"] .ac-matrix thead th{background:rgba(18,26,46,.9)!important;color:var(--muted)!important;border-bottom-color:var(--border)!important;box-shadow:0 12px 26px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)!important}
html[data-theme="dark"] .ac-matrix tbody td{border-bottom-color:var(--border)!important}
html[data-theme="dark"] .ac-sections{background:var(--s2)!important;border-color:var(--border)!important}
html[data-theme="dark"] .ac-user-meta,html[data-theme="dark"] .ac-sections-foot{color:var(--faint)!important}

/* ---- Cohesion: make sidebar + top bar + canvas read as one surface ---- */
html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 760px at 11% -10%,rgba(0,119,182,.40),transparent 56%),
    radial-gradient(1000px 720px at 102% -4%,rgba(0,180,216,.40),transparent 55%),
    linear-gradient(158deg,#0E1533 0%,#0A0F26 52%,#090C1E 100%)!important;
}
/* Dissolve the hard seam between the sidebar and the canvas */
html[data-theme="dark"] .sidebar{
  border-right:1px solid rgba(72,202,228,.12)!important;
  box-shadow:24px 0 60px -24px rgba(0,0,0,.6)!important;
}

/* ============================================================
   Unify the sidebar header with the top bar - one continuous
   header strip instead of a floating logo card.
   ============================================================ */
.sidebar{padding-top:0!important}
.sidebar-hd{
  margin:0 0 8px!important;
  padding:0 22px!important;
  height:60px!important;               /* match the 60px top bar */
  display:flex!important;
  align-items:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-bottom:1px solid rgba(199,210,254,.22)!important;  /* continues the top-bar underline */
}

/* Seamless top: logo strip tone flows into the top bar; no vertical seam / cross.
   Sidebar-header gradient ENDS at #03045E on its right edge - the exact color the
   top bar STARTS with - so the junction is invisible and the underline is one line. */
.sidebar{border-right:0!important}
.sidebar-hd{
  background:linear-gradient(90deg,#023E8A 0%,#03045E 100%)!important;
  border-bottom:1px solid rgba(199,210,254,.34)!important;
}

/* Dark mode, full surface sweep across all pages: every hard-coded white or
   light surface mapped to a dark token. Excludes report, PDF and image
   previews, coloured buttons and avatars, the FCR and patient hero gradients,
   and the login card, which is handled separately. */
html[data-theme="dark"]{
  /* remap legacy light tints so anything using them adapts too */
}
/* Elevated cards / panels / popovers */
html[data-theme="dark"] .pld-card,
html[data-theme="dark"] .pld-info-card,
html[data-theme="dark"] .pld-profile-card,
html[data-theme="dark"] .pld-sidebar-card,
html[data-theme="dark"] .pld-record-card,
html[data-theme="dark"] .pld-patient-row,
html[data-theme="dark"] .pdn-hero,
html[data-theme="dark"] .doc-group,
html[data-theme="dark"] .pl-row,
html[data-theme="dark"] .pl-item,
html[data-theme="dark"] .exam-pdf-panel,
html[data-theme="dark"] .it-panel,
html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .timepicker,
html[data-theme="dark"] .ace-save-panel,
html[data-theme="dark"] #missingFieldsPopover,
html[data-theme="dark"] #aceProgressStrip,
html[data-theme="dark"] .ac-table-wrap,
html[data-theme="dark"] .billing-edit-grid,
html[data-theme="dark"] .fcr-meta,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .pt-strip{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)}
/* Recessed / nested surfaces, inputs, list rows, small controls */
html[data-theme="dark"] .card-hd,
html[data-theme="dark"] .modal-hd,
html[data-theme="dark"] .modal-ft,
html[data-theme="dark"] .patient-list-head,
html[data-theme="dark"] .patient-search-bar,
html[data-theme="dark"] .pld-exam-row,
html[data-theme="dark"] .dx-item,
html[data-theme="dark"] .pld-empty-state,
html[data-theme="dark"] .doc-add,
html[data-theme="dark"] .doc-add-select,
html[data-theme="dark"] .day2-upload-box,
html[data-theme="dark"] .day2-upload-item,
html[data-theme="dark"] .dn-time-row,
html[data-theme="dark"] .dn-static-box,
html[data-theme="dark"] .yn-row,
html[data-theme="dark"] .icd-item,
html[data-theme="dark"] .icd-search,
html[data-theme="dark"] .sym-score-item,
html[data-theme="dark"] .chk-item,
html[data-theme="dark"] .it-display,
html[data-theme="dark"] .it-group-hdr,
html[data-theme="dark"] .dp-nav,
html[data-theme="dark"] .ac-chip,
html[data-theme="dark"] .ac-sections,
html[data-theme="dark"] .ac-icon-btn,
html[data-theme="dark"] .ac-quick-btn,
html[data-theme="dark"] .pld-icon-btn,
html[data-theme="dark"] .pld-menu-btn,
html[data-theme="dark"] .pld-search-btn{background:var(--s2)!important;border-color:var(--border)!important;color:var(--text)}
/* Hover states */
html[data-theme="dark"] .yn-row:hover,
html[data-theme="dark"] .icd-item:hover,
html[data-theme="dark"] .chk-item:hover,
html[data-theme="dark"] .pld-patient-row:hover,
html[data-theme="dark"] .dp-day:hover,
html[data-theme="dark"] .tp-item:hover{background:var(--s3)!important}
/* Table heads / striped rows / chip box */
html[data-theme="dark"] .dtable th{background:var(--s3)!important;color:var(--muted)!important}
html[data-theme="dark"] .dtable tr:nth-child(even) td{background:rgba(255,255,255,.03)!important}
html[data-theme="dark"] .dtable td,html[data-theme="dark"] .dtable th{border-color:var(--border)!important}
html[data-theme="dark"] .ac-chip-box{background:var(--s3)!important;border-color:var(--border2)!important}
html[data-theme="dark"] .billing-edit-row.marked-delete .billing-edit-cell input{background:var(--s3)!important}
/* Titles / values that are hard-coded dark */
html[data-theme="dark"] .pdn-title,
html[data-theme="dark"] .pt-n{color:var(--text)!important}

/* ============================================================
   DARK MODE - ACE score boxes, result preview, button text
   ============================================================ */
/* Score summary cards + total bar */
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .score-total,
html[data-theme="dark"] .score-cat,
html[data-theme="dark"] .score-totals-row{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)}
html[data-theme="dark"] .stat-lbl,
html[data-theme="dark"] .score-cat .lbl,
html[data-theme="dark"] .score-total .lbl{color:var(--muted)!important}
/* Yes/No/N/A + 0/1 buttons - readable inactive text (active states keep their color) */
html[data-theme="dark"] .yn-btn{color:#C3CADE}
html[data-theme="dark"] .sym-btn{color:#C3CADE}
/* On-screen result preview (not the PDF) - dark instead of a white sheet.
   Real document/PDF/image viewers below stay white. */
html[data-theme="dark"] .day2-results-preview{background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important}
html[data-theme="dark"] .day2-result-empty{color:var(--muted)!important}
html[data-theme="dark"] .day2-result-heading,
html[data-theme="dark"] .day2-result-subheading,
html[data-theme="dark"] .day2-result-line{color:var(--text)!important}
html[data-theme="dark"] .day2-results-preview th{background:var(--s2)!important;color:var(--muted)!important}
html[data-theme="dark"] .day2-results-preview td{color:var(--text)!important}
html[data-theme="dark"] .day2-results-preview td,
html[data-theme="dark"] .day2-results-preview th,
html[data-theme="dark"] .day2-result-section{border-color:var(--border)!important}
/* Keep real document viewers on white paper */
html[data-theme="dark"] .pld-doc-preview-body,
html[data-theme="dark"] .pld-doc-image-wrap{background:#fff!important}

/* Remove overlapping decorative orbs that spill outside their containers
   (top bar circle bleeding into content, patient-strip circles) - both themes. */
.top-bar::before{display:none!important}
.pt-strip::before,.pt-strip::after{display:none!important}

/* Access Control header: keep long single-word labels (e.g. "Registration") from clipping */
.ac-matrix{min-width:820px}
.ac-matrix thead th{padding-left:4px!important;padding-right:4px!important;letter-spacing:.02em!important;overflow-wrap:break-word;word-break:break-word}
.ac-matrix thead th:first-child{width:19%!important}

/* AC header: single-word labels (Registration/Exams) on one line; multi-word wrap at spaces */
.ac-matrix{min-width:840px}
.ac-matrix thead th{font-size:8px!important;letter-spacing:.01em!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important}
/* Remove the browser's native password reveal icon (we provide our own eye toggle) */
input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none!important}

/* Dark mode: daily-note form card + inner surfaces + file picker */
html[data-theme="dark"] .pdn-card{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text)}
html[data-theme="dark"] .pdn-view-item,
html[data-theme="dark"] .pdn-note-box,
html[data-theme="dark"] .pdn-locked-field{background:var(--s2)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] .pdn-view-value,
html[data-theme="dark"] .pdn-title{color:var(--text)!important}
html[data-theme="dark"] input[type=file]{color:var(--muted)}
html[data-theme="dark"] input[type=file]::file-selector-button,
html[data-theme="dark"] input[type=file]::-webkit-file-upload-button{background:var(--s2)!important;color:var(--text)!important;border:1px solid var(--border)!important}

/* Dark mode: guarantee readable text in all inputs (incl. the patient search) */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;caret-color:var(--text)}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:var(--faint)!important;-webkit-text-fill-color:var(--faint)!important;opacity:1}
html[data-theme="dark"] .pld-search-input-wrap .patient-search-input,
html[data-theme="dark"] .pld-search-input-wrap .patient-search-input:focus{background:var(--s2)!important;color:var(--text)!important;-webkit-text-fill-color:var(--text)!important}
/* keep the login card inputs on their own (dark card) mapping */
html[data-theme="dark"] .auth-card input{-webkit-text-fill-color:var(--text)!important}

/* Vertically center the Clear button's label so it aligns with the search row */
.pld-clear-btn{align-items:center!important;justify-content:center!important;line-height:1!important}

/* Clear button: match the Search button's box + vertical centering */
.pld-search-tools .pld-clear-btn{height:44px!important;align-items:center!important;justify-content:center!important;line-height:normal!important;padding:0 14px!important;border-radius:11px!important;align-self:center!important;margin:0!important}
.pld-search-tools .pld-clear-btn:hover{background:rgba(0,119,182,.10);color:var(--accent)}
html[data-theme="dark"] .pld-search-tools .pld-clear-btn:hover{background:rgba(72,202,228,.14)}

/* Clear: framed button to match Search */
.pld-search-tools .pld-clear-btn{border:1px solid var(--border)!important;background:var(--surface)!important;color:var(--text)!important;min-width:70px;box-shadow:var(--e1)}
.pld-search-tools .pld-clear-btn:hover{background:var(--s2)!important;border-color:var(--accent)!important;color:var(--accent)!important}
html[data-theme="dark"] .pld-search-tools .pld-clear-btn{background:var(--s2)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] .pld-search-tools .pld-clear-btn:hover{background:var(--s3)!important;border-color:var(--accent)!important;color:#fff!important}

/* Clear button = IDENTICAL frame to Search (overrides all earlier Clear styling) */
.pld-search-tools .pld-clear-btn{
  height:44px!important;min-width:78px!important;padding:10px 18px!important;border-radius:10px!important;
  align-items:center!important;justify-content:center!important;gap:6px!important;
  font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif!important;font-size:12px!important;font-weight:600!important;letter-spacing:-.1px!important;
  border:none!important;background:linear-gradient(135deg,#0096C7,#0077B6)!important;color:#fff!important;
  box-shadow:0 5px 14px rgba(0,119,182,.32)!important;cursor:pointer;
}
html[data-theme="dark"] .pld-search-tools .pld-clear-btn{background:var(--s2)!important;color:var(--text)!important}

/* Dark mode: card icon badges (PT/numbers) + PDF icon - were light gradients */
html[data-theme="dark"] .ic-blue{background:linear-gradient(135deg,rgba(0,119,182,.26),rgba(0,180,216,.18))!important;color:#ADE8F4!important}
html[data-theme="dark"] .ic-green{background:rgba(0,180,216,.17)!important;color:#00B4D8!important}
html[data-theme="dark"] .ic-amber{background:rgba(72,202,228,.18)!important;color:#48CAE4!important}
html[data-theme="dark"] .ic-red{background:rgba(2,62,138,.18)!important;color:#023E8A!important}
html[data-theme="dark"] .day2-pdf-icon{background:rgba(2,62,138,.18)!important;color:#023E8A!important;border-color:var(--border)!important}

/* ============================================================
   DASHBOARD (aggregate overview)
   ============================================================ */
.dash-hero{margin-bottom:16px}
.dash-hero .pt-av{background:linear-gradient(135deg,#0077B6,#00B4D8)!important;color:#fff!important}
.dash-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.dash-kpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--e1);padding:14px 14px 12px 18px}
.dash-kpi-accent{position:absolute;left:0;top:0;bottom:0;width:4px}
.dash-kpi.k-indigo .dash-kpi-accent{background:linear-gradient(180deg,#0077B6,#00B4D8)}
.dash-kpi.k-blue .dash-kpi-accent{background:#0077B6}
.dash-kpi.k-green .dash-kpi-accent{background:#00B4D8}
.dash-kpi.k-amber .dash-kpi-accent{background:#48CAE4}
.dash-kpi-label{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dash-kpi-value{font-size:28px;font-weight:900;color:var(--text);line-height:1.15;margin-top:6px;letter-spacing:-.5px}
.dash-kpi-value.is-amber{color:#0096C7}
.dash-kpi-sub{font-size:11.5px;color:var(--muted);margin-top:3px;min-height:1em}
.dash-two-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin-bottom:14px;align-items:stretch}
.dash-card{padding:16px!important}
.dash-card-flex{display:flex;flex-direction:column}
.dash-card-fill{flex:1;display:flex;flex-direction:column;justify-content:center}
.dash-card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.dash-card-hd .pld-section-title{margin-bottom:0}
.dash-card-link{background:none;border:none;padding:0;color:var(--accent);font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.dash-card-link:hover{text-decoration:underline}
.dash-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dash-cta-mini{flex:1;min-width:100px;height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--border);background:var(--s2);color:var(--text);font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:background .14s,border-color .14s}
.dash-cta-mini:hover{background:var(--s3);border-color:rgba(0,119,182,.32);color:var(--accent)}
.dash-appt-list{display:flex;flex-direction:column;gap:7px}
/* Rows became real <button>s (keyboard-operable, a proper click target
   they used to be inert <div>s dressed up to look clickable) so the UA's
   button defaults need resetting back to how the div version read. */
.dash-appt-row{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  font:inherit;cursor:pointer;background:var(--s2);border:1px solid var(--border);
  border-radius:10px;padding:9px 11px;transition:background .14s,border-color .14s,transform .14s}
.dash-appt-row:hover{background:var(--s3);border-color:rgba(0,119,182,.3);transform:translateY(-1px)}
.dash-appt-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Already-happened today - present, not hidden, but not competing for the
   eye with what is still ahead. */
.dash-appt-row.is-past{opacity:.55}
.dash-appt-row.is-past:hover{opacity:.85}
.dash-appt-dot{flex:none;width:7px;height:7px;border-radius:50%}
.dash-appt-main{min-width:0;display:flex;flex-direction:column;flex:1}
.dash-appt-name{font-size:12.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-appt-amt{flex:none;font-size:12.5px;font-weight:800;color:var(--text)}
/* The appointment-specific row parts (sub-line, booking status pill, visit
   type chip) and the scrolling full-list wrapper went with the schedule list
   they were written for. What remains is what Billing & Collections uses. */

.dash-schedule-card{padding-bottom:14px!important}

.dash-funnel{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.dash-funnel{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.dash-funnel-row{display:grid;grid-template-columns:112px minmax(0,1fr) auto;align-items:center;gap:12px}
.dash-funnel-label{font-size:12px;font-weight:700;color:var(--text)}
.dash-funnel-track{height:12px;border-radius:6px;background:var(--s2);border:1px solid var(--border);overflow:hidden}
.dash-funnel-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#0077B6,#00B4D8);min-width:6px;transition:width .5s var(--ease-out,ease)}
.dash-funnel-val{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap;display:flex;align-items:baseline;gap:6px}
.dash-funnel-pct{font-size:11px;font-weight:700;color:var(--muted)}
.dash-hint{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.5}
.dash-mini-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:4px}
.dash-mini{background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:12px}
.dash-mini-val{font-size:20px;font-weight:900;color:var(--text);line-height:1;letter-spacing:-.4px}
.dash-mini-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:6px}
/* The Today/Upcoming tiles open the calendar - a real button, not a number
   that only looks like it should do something. */
.dash-mini-link{width:100%;text-align:left;font:inherit;cursor:pointer;transition:background .14s,border-color .14s,transform .14s}
.dash-mini-link:hover{background:var(--s3);border-color:rgba(0,119,182,.3);transform:translateY(-1px)}
.dash-mini-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dash-recent{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.dash-recent-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:11px 13px;cursor:pointer;transition:background .14s,border-color .14s,transform .14s}
.dash-recent-row:hover{background:var(--s3);border-color:rgba(0,119,182,.3);transform:translateY(-1px)}
.dash-recent-av{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0077B6,#00B4D8);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.dash-recent-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dash-recent-name{font-size:13.5px;font-weight:800;color:var(--text)}
.dash-recent-sub{font-size:11.5px;color:var(--muted)}
html[data-theme="dark"] .dash-kpi{background:var(--surface)!important;border-color:var(--border)!important}
html[data-theme="dark"] .dash-kpi-value.is-amber{color:#48CAE4}
@media(max-width:900px){.dash-kpi-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dash-two-row{grid-template-columns:minmax(0,1fr)}}

/* ── Dashboard: modern welcome hero + CTAs + icon KPIs ──────── */
.dash-welcome{position:relative;overflow:hidden;border-radius:20px;margin-bottom:16px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:radial-gradient(240px 160px at 88% -30%,rgba(72,202,228,.45),transparent 70%),linear-gradient(135deg,#03045E 0%,#0077B6 46%,#00B4D8 100%);
  box-shadow:0 18px 44px rgba(0,119,182,.28),inset 0 1px 0 rgba(255,255,255,.16)}
.dash-welcome-glow{position:absolute;right:-40px;bottom:-90px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);pointer-events:none}
.dash-welcome-main{position:relative;z-index:1;min-width:0}
.dash-greeting{font-size:25px;font-weight:900;letter-spacing:-.6px;color:#fff;line-height:1.15}
.dash-greeting span{color:#ADE8F4}
.dash-date{font-size:12.5px;font-weight:600;color:rgba(224,231,255,.72);margin-top:5px}
.dash-summary{font-size:13px;color:rgba(233,236,255,.86);margin-top:14px}
.dash-summary strong{color:#fff;font-weight:800}
.dash-welcome-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap}
.dash-cta{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:11px;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .16s var(--spring,ease),background .16s,box-shadow .16s;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff}
.dash-cta:hover{background:rgba(255,255,255,.24);transform:translateY(-1px)}
.dash-cta-primary{background:#fff;border-color:#fff;color:#0077B6;box-shadow:0 6px 16px rgba(2,6,23,.2)}
.dash-cta-primary:hover{background:#CAF0F8;color:#023E8A}
.dash-kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.dash-kpi-ico{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.dash-kpi-ico svg{width:16px;height:16px}
.dash-kpi.k-indigo .dash-kpi-ico{background:rgba(0,119,182,.14);color:#0077B6}
.dash-kpi.k-blue .dash-kpi-ico{background:rgba(59,130,246,.14);color:#0077B6}
.dash-kpi.k-green .dash-kpi-ico{background:rgba(0,180,216,.15);color:#00B4D8}
.dash-kpi.k-amber .dash-kpi-ico{background:rgba(72,202,228,.16);color:#0096C7}
.dash-kpi{transition:transform .16s var(--ease,ease),box-shadow .16s var(--ease,ease)}
.dash-kpi:hover{transform:translateY(-2px);box-shadow:var(--e2)}
html[data-theme="dark"] .dash-kpi.k-amber .dash-kpi-ico{color:#48CAE4}
@media(max-width:720px){.dash-welcome{padding:22px}.dash-greeting{font-size:22px}.dash-welcome-actions{width:100%}}

/* Access Control matrix - fit to container width, no horizontal scrollbar */
#page-accessControl .wrap{max-width:none}
.ac-table-wrap{overflow-x:hidden!important;overflow-y:auto!important}
.ac-matrix{min-width:0!important;width:100%!important;table-layout:fixed}
.ac-matrix thead th{font-size:8px!important;padding:12px 3px 11px!important;white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;line-height:1.18!important}
.ac-matrix thead th:first-child{width:17%!important;padding-left:14px!important}
.ac-matrix thead th:last-child{width:76px!important}
.ac-matrix tbody td{padding:11px 3px!important}
.ac-matrix input[type=checkbox]{width:19px!important;height:19px!important}
.ac-icon-btn{width:28px!important;height:28px!important}
.ac-actions{max-width:64px!important;gap:4px!important}
@media(max-width:1000px){.ac-matrix thead th{font-size:7.5px!important}.ac-user-name{font-size:12px!important}}

/* Access Control: more breathing room (match the ACE page's spacing) */
.ac-matrix tbody td{padding-top:16px!important;padding-bottom:16px!important}
.ac-matrix thead th{padding-top:16px!important;padding-bottom:14px!important}
.ac-sub-row > td{padding:12px 16px 22px!important}
.ac-sections{padding:18px 20px!important;margin-top:2px}
.ac-section-chips{gap:10px!important}
.ac-user-row td{border-bottom:1px solid var(--border)}

#page-dashboard .dash-kpi,
#page-dashboard .dash-card,
#page-dashboard .dash-mini,
#page-dashboard .dash-recent-row{
  -webkit-backdrop-filter:blur(30px) saturate(190%)!important;
  backdrop-filter:blur(30px) saturate(190%)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(226,232,255,.38))!important;
  border:1px solid rgba(255,255,255,.6)!important;
  box-shadow:0 12px 34px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.7)!important;
}
#page-dashboard .dash-funnel-track{background:rgba(15,23,42,.06)!important;border-color:rgba(15,23,42,.08)!important}
html[data-theme="dark"] #page-dashboard .dash-kpi,
html[data-theme="dark"] #page-dashboard .dash-card,
html[data-theme="dark"] #page-dashboard .dash-mini,
html[data-theme="dark"] #page-dashboard .dash-recent-row{
  background:linear-gradient(135deg,rgba(72,202,228,.13),rgba(72,202,228,.06))!important;
  border:1px solid rgba(199,210,254,.17)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
html[data-theme="dark"] #page-dashboard .dash-funnel-track{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.1)!important}
html[data-theme="dark"] #page-dashboard .dash-recent-row:hover{background:rgba(255,255,255,.1)!important;border-color:rgba(72,202,228,.4)!important}
/* Hover keeps the glass feel */
#page-dashboard .dash-kpi:hover{box-shadow:0 18px 46px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.75)!important}
html[data-theme="dark"] #page-dashboard .dash-kpi:hover{box-shadow:0 20px 52px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.1)!important}
/* KPI accent: inset rounded tab (not a full-height edge line clashing with the glass) */
#page-dashboard .dash-kpi{overflow:hidden}
#page-dashboard .dash-kpi-accent{top:14px!important;bottom:14px!important;left:0!important;width:4px!important;border-radius:0 4px 4px 0!important}

/* AC matrix: no sticky header / internal scroll - header scrolls with the page */
.ac-table-wrap{overflow:visible!important;max-height:none!important}
.ac-matrix thead th{position:static!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-theme="dark"] .ac-matrix thead th{background:transparent!important}
.ac-matrix thead th{background:transparent!important}

/* Site-wide ambient brand colour field and glassmorphism. Containers get
   frosted glass while inputs, tables and rows stay solid for readability. The
   sidebar, top bar, report previews and the PDF and image viewers are left
   as they are. */
/* Light: subtle brand color wash behind every page */
body{
  background:
    radial-gradient(760px 540px at 6% 0%,rgba(0,119,182,.13),transparent 60%),
    radial-gradient(820px 600px at 98% 8%,rgba(0,180,216,.11),transparent 60%),
    radial-gradient(640px 560px at 80% 100%,rgba(0,180,216,.08),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
/* Dark: vivid glow field */
html[data-theme="dark"] body{
  background:
    radial-gradient(760px 540px at 6% 0%,rgba(0,119,182,.40),transparent 58%),
    radial-gradient(820px 600px at 98% 8%,rgba(0,180,216,.40),transparent 58%),
    radial-gradient(660px 580px at 80% 100%,rgba(0,180,216,.40),transparent 60%),
    radial-gradient(560px 500px at 22% 94%,rgba(0,180,216,.40),transparent 60%),
    #0A0F23 !important;
  background-attachment:fixed!important;
}
/* Wrappers made transparent so glass cards float on the color field */
.pld-detail-shell,.pld-panel{background:transparent!important;border:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* Frosted-glass container surfaces (light theme = white glass) */
.card,
.pld-card,
.pld-sidebar-card,
.pld-profile-card,
.pld-mini-card,
.pld-record-card,
.patient-list-panel,
.pt-strip,
.modal,
.doc-group,
.exam-pdf-panel{
  background:rgba(255,255,255,.52)!important;
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  backdrop-filter:blur(22px) saturate(165%);
  border:1px solid rgba(255,255,255,.58)!important;
  box-shadow:0 14px 36px rgba(15,23,42,.10),inset 0 1px 0 rgba(255,255,255,.6)!important;
}
/* Dark theme = smoked, faintly indigo-tinted glass */
html[data-theme="dark"] .card,
html[data-theme="dark"] .pld-card,
html[data-theme="dark"] .pld-sidebar-card,
html[data-theme="dark"] .pld-profile-card,
html[data-theme="dark"] .pld-mini-card,
html[data-theme="dark"] .pld-record-card,
html[data-theme="dark"] .patient-list-panel,
html[data-theme="dark"] .pt-strip,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .doc-group,
html[data-theme="dark"] .exam-pdf-panel{
  background:linear-gradient(135deg,rgba(72,202,228,.12),rgba(72,202,228,.055))!important;
  border:1px solid rgba(199,210,254,.16)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
/* Card header sits on the glass - keep it translucent, not a solid strip */
.card-hd{background:rgba(255,255,255,.14)!important;border-bottom:1px solid rgba(255,255,255,.22)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-theme="dark"] .card-hd{background:rgba(255,255,255,.05)!important;border-bottom:1px solid rgba(199,210,254,.12)!important}

/* Page-header banners stay a colored glass gradient (their text/avatar/tags are white) */
.pt-strip,
html[data-theme="dark"] .pt-strip{
  background:linear-gradient(135deg,rgba(2,62,138,.92) 0%,rgba(2,62,138,.9) 52%,rgba(2,62,138,.92) 100%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(165%)!important;
  backdrop-filter:blur(16px) saturate(165%)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 16px 40px rgba(49,46,129,.32),inset 0 1px 0 rgba(255,255,255,.18)!important;
  color:#fff!important;
}

/* One vivid ambient color field for every page (dashboard-level intensity) */
#page-dashboard.active{background:transparent!important}
body{
  background:
    radial-gradient(820px 600px at 8% 0%,rgba(0,119,182,.20),transparent 60%),
    radial-gradient(880px 640px at 96% 8%,rgba(0,180,216,.17),transparent 60%),
    radial-gradient(700px 620px at 80% 100%,rgba(0,180,216,.11),transparent 60%),
    radial-gradient(600px 560px at 20% 92%,rgba(0,180,216,.10),transparent 60%),
    var(--bg)!important;
  background-attachment:fixed!important;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(820px 600px at 8% 0%,rgba(0,119,182,.40),transparent 58%),
    radial-gradient(880px 640px at 96% 8%,rgba(0,180,216,.40),transparent 58%),
    radial-gradient(740px 660px at 80% 100%,rgba(0,180,216,.40),transparent 60%),
    radial-gradient(640px 580px at 20% 92%,rgba(0,180,216,.40),transparent 60%),
    #0A0F23 !important;
  background-attachment:fixed!important;
}

/* Modals: sticky header and footer on scroll, over a crisp light surface. The
   AI Grammar modal read grey because the site-wide glass let the coloured
   page show through. The header now pins the way the Access Control matrix
   header does when the body scrolls. */
.modal{position:relative}
.modal-hd{position:sticky;top:0;z-index:6}
.modal-ft{position:sticky;bottom:0;z-index:6}
/* Crisp, near-solid white surface in light mode */
.modal{
  background:rgba(255,255,255,.97)!important;
  -webkit-backdrop-filter:blur(30px) saturate(150%)!important;
  backdrop-filter:blur(30px) saturate(150%)!important;
  border:1px solid rgba(255,255,255,.92)!important;
  box-shadow:0 26px 80px rgba(15,23,42,.30),0 4px 16px rgba(0,119,182,.10)!important;
}
.modal-hd{
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid rgba(0,119,182,.10)!important;
  -webkit-backdrop-filter:blur(30px) saturate(150%)!important;
  backdrop-filter:blur(30px) saturate(150%)!important;
}
.modal-ft{
  background:rgba(248,250,255,.98)!important;
  border-top:1px solid rgba(0,119,182,.10)!important;
  -webkit-backdrop-filter:blur(30px) saturate(150%)!important;
  backdrop-filter:blur(30px) saturate(150%)!important;
}
.modal .bpbox{background:rgba(248,250,255,.94)!important;border-color:rgba(0,119,182,.14)!important}
/* Dark mode keeps its smoked surface but stays opaque enough to read */
html[data-theme="dark"] .modal{
  background:linear-gradient(135deg,rgba(24,32,55,.985),rgba(19,27,48,.985))!important;
  border-color:var(--border)!important;
}
html[data-theme="dark"] .modal-hd{background:rgba(20,28,49,.985)!important}
html[data-theme="dark"] .modal-ft{background:rgba(17,24,44,.985)!important}
html[data-theme="dark"] .modal .bpbox{background:var(--s2)!important;border-color:var(--border)!important}

/* Make the modal body the scroll region: header + footer are fixed panes,
   the middle scrolls. (Replaces the sticky approach so it reliably scrolls.) */
.modal{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.modal-hd{position:static!important;flex:0 0 auto}
.modal-ft{position:static!important;flex:0 0 auto}
.modal-body{flex:1 1 auto;overflow:auto!important;min-height:0}

/* Access Control: the column header pins to the viewport, under the top bar,
   as the whole page scrolls. One scrollbar, and the page labels stay visible
   while ticking. */
#page-accessControl .card{overflow:visible!important}
#page-accessControl .card:hover{transform:none!important}
.ac-table-wrap{overflow:visible!important;max-height:none!important;min-height:0!important}
.ac-matrix thead th{
  position:sticky!important;
  top:60px!important;              /* sits right under the 60px top bar */
  z-index:30!important;
}

/* Dark mode: date/time field clock+calendar buttons blend into the input
   (were reading as a mismatched nested box). */
html[data-theme="dark"] .date-field input{background:var(--s2)!important;border-color:var(--border)!important;color:var(--text)!important}
html[data-theme="dark"] .cal-btn{background:transparent!important;color:var(--muted)!important}
html[data-theme="dark"] .cal-btn:hover{background:var(--s3)!important;color:#ADE8F4!important}

/* Access Control sticky header: fully solid so scrolling rows never show through */
.ac-matrix thead th{
  background:#CAF0F8!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html[data-theme="dark"] .ac-matrix thead th{
  background:#052B66!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Dark mode: native <input type=time>/<date> render in dark theme so the
   browser's clock/calendar picker box isn't a light square. */
html[data-theme="dark"] input[type=time],
html[data-theme="dark"] input[type=date]{color-scheme:dark}
html[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(.7) brightness(1.3);opacity:.8;cursor:pointer
}

/* ===================== Appointments (week grid) ===================== */
.appt-toolbar{flex-wrap:wrap;row-gap:8px}
.appt-nav{display:flex;gap:6px;align-items:center}
/* Each facility gets its own row under a facility-colored pill label
   grouped rather than merged into one long undifferentiated line, and when
   a single facility is selected only that one row renders. */
.appt-legend{display:flex;flex-direction:column;gap:7px;font-size:10.5px;color:var(--muted);margin:0 4px}
.appt-legend-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.appt-legend-group-label{font-size:10px;font-weight:800;color:#fff;padding:3px 10px;border-radius:20px;white-space:nowrap;flex:0 0 auto}
.appt-legend-group-label.fac-a{background:linear-gradient(135deg,#0077B6,#48CAE4)}
.appt-legend-group-label.fac-b{background:linear-gradient(135deg,#03045E,#0077B6)}
.appt-legend-item{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.appt-legend-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

/* facility filter tabs */
.appt-facility-tabs{display:flex;gap:5px;background:var(--s3);padding:3px;border-radius:10px}
.appt-facility-tab{padding:6px 12px;border-radius:7px;font-size:11px;font-weight:700;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.appt-facility-tab:hover{color:var(--text)}
.appt-facility-tab.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.1)}

.appt-body-scroll{overflow-x:auto;padding:14px}
.appt-facilities-row{display:flex;gap:16px;align-items:flex-start}

.appt-facility-panel{border:1px solid var(--border);border-radius:12px;overflow:hidden;flex:1 1 0;min-width:0;background:var(--surface)}
/* "compact"/"wide-day"/"compact-month" only apply when both facilities share the
   row - each panel still grows to fill spare width, but won't shrink past a
   readable minimum (that's when the row scrolls horizontally instead). When a
   single facility is selected these classes are omitted so it fills the page. */
.appt-facility-panel.compact{flex:1 1 480px;min-width:480px}

.appt-facility-head{padding:10px 14px;font-size:12.5px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px}
.appt-facility-head.fac-a{background:linear-gradient(135deg,#0077B6,#48CAE4)}
.appt-facility-head.fac-b{background:linear-gradient(135deg,#03045E,#0077B6)}
.appt-facility-count{margin-left:auto;background:rgba(255,255,255,.22);padding:2px 9px;border-radius:10px;font-size:10.5px;font-weight:700}

.appt-header{display:flex;border-bottom:1px solid var(--border);background:var(--s2)}
.appt-header-gutter{width:48px;flex:0 0 48px}
.appt-header-day{flex:1;min-width:0;text-align:center;padding:9px 3px;border-left:1px solid var(--border)}
.appt-header-dayname{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.appt-header-daynum{font-size:14px;font-weight:800;margin-top:3px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:var(--text)}
.appt-header-day.today .appt-header-daynum{background:var(--accent);color:#fff}

/* overflow-x is visible (not hidden) so a hover-expanded narrow block (below)
   can pop out past its column instead of being clipped - this box was only
   ever relying on the y-scroll, never needed x-clipping of its own. */
.appt-grid-scroll{max-height:640px;overflow-y:auto;overflow-x:visible;overflow-anchor:none}
.appt-header{position:sticky;top:0;z-index:3}
.appt-grid{display:flex;position:relative}
.appt-gutter{width:48px;flex:0 0 48px;position:relative}
/* Flush with the top of its gridline (not straddling it) - a negative
   translateY here would clip the very first label against the scroll box's
   own top edge, and made labels read as belonging to the row above them. */
.appt-gutter-label{position:absolute;right:7px;font-size:8px;color:var(--faint);font-weight:600;white-space:nowrap;line-height:1}
.appt-gutter-label.hour{font-size:9.5px;color:var(--muted);font-weight:800}
.appt-daycols{display:flex;flex:1;min-width:0}
.appt-daycol{
  flex:1;min-width:0;position:relative;border-left:1px solid var(--border);
  background-color:var(--surface);
}
.appt-daycol.today{background-color:var(--al)}

/* Individual 15-minute slot rows - hover-highlighted like EnableMyPractice's
   calendar, and each carries its own click-to-schedule target. */
.appt-slot{border-top:1px solid var(--border);box-sizing:border-box;cursor:pointer;transition:background .08s}
.appt-slot.hour{border-top:1px solid var(--border2)}
.appt-slot:first-child{border-top:none}
.appt-slot:hover{background:var(--s3)}
.appt-daycol.today .appt-slot:hover{background:rgba(0,119,182,.16)}
html[data-theme="dark"] .appt-daycol.today .appt-slot:hover{background:rgba(0,119,182,.28)}
/* 24-hour mode: minutes outside business hours (8 AM - 7 PM) are dimmed
   an explicit gray overlay (not a theme var) so it reads clearly regardless
   of how translucent --s2/--s3 happen to be in the active theme. */
.appt-slot.outside-biz{background:rgba(100,110,130,.16)}
.appt-slot.outside-biz:hover{background:rgba(100,110,130,.26)}
html[data-theme="dark"] .appt-slot.outside-biz{background:rgba(0,0,0,.22)}
html[data-theme="dark"] .appt-slot.outside-biz:hover{background:rgba(0,0,0,.32)}

.appt-hours-toggle{
  padding:8px 14px;font-size:11px;font-weight:700;color:var(--accent);cursor:pointer;
  border-top:1px solid var(--border);background:var(--s2);user-select:none
}
.appt-hours-toggle:hover{background:var(--s3);text-decoration:underline}

.appt-block{
  position:absolute;border-radius:8px;padding:4px 8px;font-size:10.5px;line-height:1.3;
  overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.18);border-left:4px solid;
  box-shadow:0 2px 6px rgba(2,6,35,.28),inset 0 1px 0 rgba(255,255,255,.20);
  transition:transform .12s,box-shadow .12s,filter .12s;color:var(--text);
  /* Dark halo/outline behind the always-white text so it stays legible on the
     lighter visit-type fills (turquoise, yellow) as well as the dark ones. */
  text-shadow:0 0 2px rgba(0,0,0,.5),0 1px 1.5px rgba(0,0,0,.45);
  display:flex;flex-direction:column;justify-content:center
}
.appt-block:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(2,6,35,.4),inset 0 1px 0 rgba(255,255,255,.24);filter:brightness(1.05);z-index:5}
.appt-block-time{font-weight:800;font-size:10px;opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
/* Wrap onto multiple lines and use the block's actual height instead of
   forcing everything onto one line and cutting it off with "..." - a tall
   block (a longer appointment) has plenty of room to show the full name. */
.appt-block-name{
  font-weight:800;font-size:11px;word-break:break-word;overflow:hidden;
  display:-webkit-box;line-clamp:4;-webkit-line-clamp:4;-webkit-box-orient:vertical
}
/* Visit type line - follows the block's own contrast text color (set inline:
   white on dark fills, navy on light fills) so it stays readable on the solid
   visit-type background in both themes, reading as a slightly softer sub-label
   under the name. */
.appt-block-visittype{
  font-size:10px;font-weight:800;color:currentColor;opacity:.96;margin-top:2px;overflow:hidden;
  letter-spacing:.1px;white-space:normal;word-break:break-word;flex:0 0 auto;
  display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
html[data-theme="dark"] .appt-block-visittype{color:currentColor}
.appt-block.narrow{
  padding:3px 5px;
  align-items:flex-start;justify-content:center
}
.appt-block.narrow .appt-block-time{font-size:9px}
.appt-block.narrow .appt-block-visittype{font-size:9px;opacity:.96}
.appt-block.narrow .appt-block-name{
  font-size:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:100%
}
/* Week-view blocks (1-2 overlaps - crowded 3+ slots go vertical instead, see
   below) are wide enough to wrap the name and visit type onto a second line
   rather than cutting them off after one word with "...". Clamp to 2 lines so a
   long value still stays tidy. */
.appt-block.appt-week .appt-block-name{
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  white-space:normal;word-break:break-word;overflow:hidden;max-height:none
}
.appt-block.appt-week .appt-block-visittype{
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  white-space:normal;word-break:break-word;overflow:hidden
}
/* Vertical name-only lane - a crowded (3+) week slot renders each appointment
   as a thin lane with the patient's name running DOWN the column, so the full
   name stays readable instead of squashing into "8:3/Ja/Vis" fragments. */
.appt-block.appt-vert{
  align-items:center;justify-content:center;padding:6px 1px
}
.appt-block.appt-vert .appt-block-vname{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-weight:800;font-size:11px;line-height:1;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:100%
}

html[data-theme="dark"] .appt-daycol{background-color:var(--surface)}
html[data-theme="dark"] .appt-daycol.today{background-color:rgba(0,119,182,.14)}
html[data-theme="dark"] .appt-daycol.today:hover{background-color:rgba(0,119,182,.14)}
html[data-theme="dark"] .appt-block{border-color:rgba(255,255,255,.14);box-shadow:0 1px 4px rgba(0,0,0,.55);color:#fff}
html[data-theme="dark"] .appt-facility-tabs{background:var(--s2)}

html[data-theme="dark"] .appt-facility-panel{background:#0B1636;border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .appt-daycol{background-color:#0B1636;border-left-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .appt-header{background:#0F1C44;border-bottom-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .appt-header-day{border-left-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .appt-slot{border-top-color:rgba(255,255,255,.06)}
html[data-theme="dark"] .appt-slot.hour{border-top-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .appt-slot:hover{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .appt-daycol.today{background-color:rgba(0,150,199,.13)}
html[data-theme="dark"] .appt-daycol.today:hover{background-color:rgba(0,150,199,.13)}
html[data-theme="dark"] .appt-daycol.today .appt-slot:hover{background:rgba(0,150,199,.22)}
html[data-theme="dark"] .appt-gutter-label{color:#8494B6}
html[data-theme="dark"] .appt-gutter-label.hour{color:#C7D4EE}
html[data-theme="dark"] .appt-hours-toggle{background:#0F1C44;border-top-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .appt-hours-toggle:hover{background:#16265A}

.appt-hover-card{
  position:fixed;z-index:950;display:none;width:280px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.22);overflow:hidden
}
.appt-hover-card.show{display:block}
.appt-hover-accent{height:4px;width:100%}
.appt-hover-hd{display:flex;align-items:center;gap:10px;padding:12px 14px 11px}
.appt-hover-av{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0
}
.appt-hover-idblock{min-width:0}
.appt-hover-name{font-size:13.5px;font-weight:800;color:var(--text);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appt-hover-visit{font-size:10.5px;color:var(--muted);margin-top:1px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appt-hover-updated{
  padding:7px 14px;font-size:10.5px;color:var(--muted);background:var(--s2);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)
}
.appt-hover-updated strong{color:var(--text);font-weight:700}
.appt-hover-body{padding:11px 14px 13px}
.appt-hover-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:10px}
.appt-hover-cell{display:flex;flex-direction:column;gap:2px}
.appt-hover-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
.appt-hover-val{font-size:12.5px;font-weight:700;color:var(--text)}
.appt-hover-val-muted{color:var(--muted);font-weight:600}
.appt-hover-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:9px;border-top:1px dashed var(--border)
}
.appt-hover-row .appt-hover-label{text-transform:none;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:0}
/* Background/text color set inline per-instance (see apptHoverCardHTML) to
   match the appointment's own visit-type accent - not a fixed class here. */
.appt-hover-status{padding:2px 9px;border-radius:10px;font-size:10.5px;font-weight:800}
html[data-theme="dark"] .appt-hover-card{box-shadow:0 20px 50px rgba(0,0,0,.55)}
/* Pregnancy hover popover - reuses the appt-hover-card system, with a five-cell
   grid (Est. due date sits alone on the last row) and a pink footer that turns
   amber when the recorded figure has aged past term. */
/* The pregnancy card has no avatar slot: the gestational-age chip that used to
   sit there said nothing the "Gestational age now" cell below does not already
   say, and a solid crimson badge on a clinical popover reads as an alert. */
.preg-hover-card .appt-hover-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.preg-hover-card .appt-hover-cell:last-child{grid-column:1 / -1}
.preg-hover-card .appt-hover-updated{color:#9d174d;background:rgba(219,39,119,.06)}
.preg-hover-card .appt-hover-updated.is-warn{color:#b06f08;background:rgba(245,158,11,.1)}
.preg-approx{font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);opacity:.75}
html[data-theme="dark"] .preg-hover-card .appt-hover-updated{color:#f9a8d4;background:rgba(244,114,182,.08)}
html[data-theme="dark"] .preg-hover-card .appt-hover-updated.is-warn{color:#fbbf24;background:rgba(251,191,36,.1)}
/* The pill is now interactive - show it. */
.pld-status.preg{cursor:help}
.pld-status.preg:focus-visible{outline:2px solid rgba(219,39,119,.5);outline-offset:2px}
/* Referral Direct Booking - Video visit toggle, styled like the calendar's own. */
.rf-video{margin-top:2px}
.rf-videochk{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--text);cursor:pointer;font-size:13px}
.rf-videochk input[type=checkbox]{width:16px;height:16px;cursor:pointer}
.rf-videohint{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4}

.appt-facility-panel.wide-day{flex:1 1 320px;min-width:320px}

/* ---- month view ---- */
.appt-facility-panel.compact-month{flex:1 1 460px;min-width:460px}
.appt-month-headerrow .appt-header-day{padding:8px 3px}
.appt-month-grid{display:flex;flex-direction:column}
.appt-month-week{display:flex}
.appt-month-cell{
  flex:1;min-width:0;min-height:88px;border-left:1px solid var(--border);border-top:1px solid var(--border);
  padding:4px 4px 6px;cursor:pointer;background:var(--surface);transition:background .12s
}
.appt-month-week:first-child .appt-month-cell{border-top:none}
.appt-month-cell:hover{background:var(--s3)}
.appt-month-cell.outside{background:var(--s2);color:var(--faint)}
.appt-month-cell.outside:hover{background:var(--s3)}
.appt-month-cell.today{background:var(--al)}
.appt-month-daynum{font-size:10.5px;font-weight:700;color:var(--text);display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%}
.appt-month-cell.outside .appt-month-daynum{color:var(--faint)}
.appt-month-cell.today .appt-month-daynum{background:var(--accent);color:#fff}
.appt-month-chip{
  font-size:9px;padding:2px 4px;border-radius:4px;margin-top:2px;border-left:2px solid;
  overflow:hidden;cursor:pointer;color:var(--text);line-height:1.3
}
.appt-month-chip:hover{filter:brightness(.96)}
.appt-month-chip-time{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.appt-month-chip-visittype{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px;font-weight:600;color:var(--accent);opacity:.95}
html[data-theme="dark"] .appt-month-chip-visittype{color:#ADE8F4}
.appt-month-more{font-size:9px;color:var(--muted);font-weight:700;margin-top:2px;cursor:pointer}
.appt-month-more:hover{color:var(--accent)}

/* ---- agenda view ---- */
.appt-agenda-table{width:100%;border-collapse:collapse;font-size:12.5px}
.appt-agenda-table th{text-align:left;padding:8px 14px;border-bottom:1px solid var(--border);font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--s2)}
.appt-agenda-table td{padding:8px 14px;border-bottom:1px solid var(--border)}
.appt-agenda-daterow td{background:var(--s3);font-weight:800;font-size:11.5px;color:var(--accent);padding:7px 14px}
.appt-agenda-row{cursor:pointer;transition:background .12s}
.appt-agenda-row:hover{background:var(--s2)}
.appt-agenda-time{white-space:nowrap;color:var(--muted);font-weight:600;font-size:11.5px}
.appt-agenda-fac-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
.appt-agenda-fac-dot.fac-a{background:var(--accent)}
.appt-agenda-fac-dot.fac-b{background:#00B4D8}
.appt-agenda-type{color:var(--muted);font-size:11.5px}

.appt-facility-select{width:auto;min-width:210px;font-weight:700;font-size:12px;padding:7px 11px}

/* ---- right-click context menu ---- */
.appt-context-menu{
  position:fixed;display:none;z-index:900;min-width:190px;padding:5px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.22)
}
.appt-context-menu.show{display:block}
.appt-context-menu button{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:none;background:none;
  border-radius:7px;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;text-align:left
}
.appt-context-menu button:hover{background:var(--al);color:var(--accent)}
.appt-context-menu button svg{width:15px;height:15px;flex:0 0 auto}
html[data-theme="dark"] .appt-context-menu{box-shadow:0 12px 32px rgba(0,0,0,.5)}

.appt-block-ctx{min-width:200px}
.appt-ctx-sub{position:relative}
.appt-ctx-caret{margin-left:auto;font-size:10px;color:var(--muted)}
.appt-ctx-sub:hover>button{background:var(--al);color:var(--accent)}
.appt-ctx-sub:hover>button .appt-ctx-caret{color:var(--accent)}
.appt-ctx-submenu{
  position:absolute;left:100%;top:-6px;display:none;min-width:225px;padding:5px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.22);margin-left:2px
}
.appt-ctx-sub:hover .appt-ctx-submenu{display:block}
.appt-block-ctx.flip-left .appt-ctx-submenu{left:auto;right:100%;margin-left:0;margin-right:2px}
.appt-ctx-submenu-scroll{max-height:min(340px,60vh);overflow-y:auto}
.appt-ctx-submenu button{font-size:12px;padding:7px 10px}
.appt-ctx-submenu button.active{color:var(--accent);font-weight:700}
.appt-ctx-check{margin-left:auto;color:var(--accent);font-weight:800}
.appt-context-menu button.appt-ctx-danger{color:var(--red)}
.appt-context-menu button.appt-ctx-danger:hover{background:var(--rl);color:var(--red)}
html[data-theme="dark"] .appt-ctx-submenu{box-shadow:0 12px 32px rgba(0,0,0,.5)}

@media(max-width:860px){
  .appt-facility-panel.compact,.appt-facility-panel.compact-month,.appt-facility-panel.wide-day{width:100%;flex-basis:100%}
  .appt-facilities-row{flex-direction:column}
}

/* ===================== AR Summary (Billing) ===================== */
.ar-info-strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px}
.ar-info-name{font-size:16px;font-weight:800;color:var(--text)}
.ar-info-meta{font-size:12px;color:var(--muted);line-height:1.6}
.ar-info-meta strong{color:var(--text);font-weight:700}

.ar-dates-row{display:flex;flex-wrap:wrap;gap:0;padding:0}
.ar-date-block{flex:1 1 160px;padding:14px 18px;border-right:1px solid var(--border)}
.ar-date-block:last-child{border-right:none}
.ar-date-label{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px}
.ar-date-value{font-size:13px;font-weight:700;color:var(--text)}

.ar-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.ar-summary-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;transition:transform .15s,box-shadow .15s}
.ar-summary-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.ar-summary-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.ar-summary-value{font-size:21px;font-weight:800;color:var(--text);font-family:'DM Mono',monospace}

.ar-action-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.ar-status-tabs{display:flex;gap:5px;flex-wrap:wrap}
.ar-tab{padding:6px 12px;border-radius:8px;font-size:11px;font-weight:700;border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.ar-tab:hover{border-color:var(--accent);color:var(--accent)}
.ar-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

.ar-table-scroll{overflow-x:auto}
.ar-table{width:100%;border-collapse:collapse;font-size:12px;min-width:1180px}
.ar-table th{text-align:left;padding:9px 12px;background:var(--s2);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--border);position:sticky;top:0}
.ar-table td{padding:9px 12px;white-space:nowrap;border-bottom:1px solid var(--border);color:var(--text)}
.ar-table tr{cursor:pointer;transition:background .12s}
.ar-table tr:hover td{background:var(--s2)}
.ar-claim-id{font-weight:800;font-family:'DM Mono',monospace;color:var(--text)}
/* Status shown as a solid pill (not a full-row tint) so it reads with the
   same contrast in light and dark theme - the row itself stays on the
   table's normal text color, with just a thin left-border accent as a
   secondary visual cue. */
.ar-status-pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:800;white-space:nowrap}
/* Collection Management - patient-grouped rows */
.wc-patient-row>td{font-weight:600}
.wc-patient-name{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--text)}
.wc-caret{width:14px;height:14px;color:var(--muted);flex:0 0 auto;transition:transform .15s}
.wc-caret.open{transform:rotate(90deg)}
.wc-bill-count{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:800;background:var(--s2);color:var(--muted);border:1px solid var(--border)}
.ar-table tr.wc-bill-row{cursor:default}
.ar-table tr.wc-bill-row>td{background:var(--s2);color:var(--muted);font-size:11.5px}
.ar-table tr.wc-bill-row:hover>td{background:var(--s2)}
.ar-table tr.wc-bill-row .ar-claim-id{color:var(--text)}

.ar-old-note{padding:8px 10px;border-radius:8px;background:var(--s2);margin-bottom:6px;font-size:12px}
.ar-old-note-date{font-size:10px;color:var(--muted);font-weight:700;margin-bottom:2px}

/* ---- Make a Payment: one CTA for the whole account, replacing the per-claim
   Payment buttons that used to sit in the receivables table. The
   only filled, full-width control on the page - collecting is the action this
   page exists for, and it should not look like Print Summary. ---- */
.ar-pay-cta{width:100%;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;padding:15px 20px;border:0;border-radius:14px;cursor:pointer;font-family:inherit;color:#fff;background:linear-gradient(135deg,#0077B6 0%,#00B4D8 100%);box-shadow:0 10px 24px rgba(0,119,182,.26);transition:transform .14s,box-shadow .14s,filter .14s}
.ar-pay-cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,119,182,.34);filter:brightness(1.05)}
.ar-pay-cta:active{transform:translateY(0);box-shadow:0 6px 16px rgba(0,119,182,.26)}
.ar-pay-cta svg{width:20px;height:20px;flex:none;opacity:.95}
.ar-pay-cta-main{font-size:15px;font-weight:800;letter-spacing:.01em}
.ar-pay-cta-sub{font-size:12px;font-weight:700;opacity:.92;padding-left:14px;border-left:1px solid rgba(255,255,255,.38);font-family:'DM Mono',monospace}

/* ---- New Payment modal ---- */
.ar-pay-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px;border-radius:12px;background:var(--s2);border:1px solid var(--border)}
.ar-pay-head-who{min-width:0}
.ar-pay-head-name{font-size:15px;font-weight:800;color:var(--text)}
.ar-pay-head-meta{font-size:11.5px;color:var(--muted);margin-top:2px}
.ar-pay-head-stats{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.ar-pay-head-stats>div{display:flex;flex-direction:column;gap:3px}
.ar-pay-head-stats span{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ar-pay-head-stats strong{font-size:14px;font-weight:800;color:var(--text);font-family:'DM Mono',monospace}

.ar-pay-amount{display:flex;gap:6px}
.ar-pay-amount input{flex:1;min-width:0}
.ar-pay-full{flex:none;padding:0 12px;border-radius:9px;border:1px solid var(--border);background:var(--s2);color:var(--muted);font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;transition:all .15s}
.ar-pay-full:hover{border-color:var(--accent);color:var(--accent)}

/* Check number and check date, dimmed when the money did not arrive as a
   check - the fields stay in place so the layout does not jump. */
.fg.is-off{opacity:.45}
.fg.is-off input{cursor:not-allowed}

.ar-pay-auto{margin:12px 0 0;font-size:12px}
.ar-pay-alloc{margin-top:10px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--s2)}
.ar-pay-alloc-hd{padding:8px 12px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--border)}
.ar-pay-alloc-empty{padding:12px;font-size:12px;color:var(--muted)}
.ar-pay-alloc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;font-size:12px;color:var(--text);border-bottom:1px solid var(--border)}
.ar-pay-alloc-row:last-child{border-bottom:none}
.ar-pay-alloc-row strong{font-family:'DM Mono',monospace;font-weight:800}
.ar-pay-alloc-row.is-unapplied{color:var(--muted)}
.ar-pay-alloc-row.is-unapplied strong{color:var(--amber)}

/* ---- Payment history ---- */
.ar-pay-hist-count{margin-left:auto;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:800;background:var(--s2);color:var(--muted);border:1px solid var(--border)}
.ar-pay-table{min-width:1160px}
.ar-pay-table tr{cursor:default}
.ar-pay-comment{max-width:260px;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}

@media(max-width:720px){
  .ar-pay-cta{flex-direction:column;gap:6px}
  .ar-pay-cta-sub{padding-left:0;border-left:none}
  .ar-pay-head-stats{margin-left:0}
}

html[data-theme="dark"] .ar-summary-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.3)}

@media(max-width:720px){
  .ar-dates-row{flex-direction:column}
  .ar-date-block{border-right:none;border-bottom:1px solid var(--border)}
  .ar-date-block:last-child{border-bottom:none}
}

.ar-combo{position:relative;width:100%}
.ar-combo-input{width:100%;box-sizing:border-box}
.ar-combo-panel{
  position:fixed;z-index:900;display:none;
  max-height:min(320px,60vh);overflow-y:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.22);padding:5px
}
.ar-combo-panel.show{display:block}
.ar-combo-option{
  display:flex;align-items:baseline;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;
  font-size:12.5px;line-height:1.35
}
.ar-combo-option:hover{background:var(--al)}
.ar-combo-code{flex:0 0 auto;font-weight:800;font-family:'DM Mono',monospace;color:var(--accent);min-width:28px}
.ar-combo-text{color:var(--text);overflow-wrap:anywhere}
.ar-combo-empty{padding:10px 12px;font-size:11.5px;color:var(--muted);text-align:center}
html[data-theme="dark"] .ar-combo-panel{box-shadow:0 16px 40px rgba(0,0,0,.55)}

.chk-patient-panel,.pchrt-dx-icd-combo .ar-combo-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;width:auto}
.chk-patient-hint{border-bottom:1px solid var(--border);margin-bottom:4px;padding-bottom:8px;font-style:italic}
.chk-patient-combo{position:relative}
.chk-patient-input{padding-right:34px!important}
.chk-patient-caret{position:absolute;top:0;right:0;width:34px;height:100%;border:0;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chk-patient-caret svg{width:15px;height:15px}
.chk-patient-caret:hover{color:var(--text)}

@media(max-width:640px){
  .ar-combo-panel{max-height:min(260px,50vh)}
}

/* ---- Invite Patient (Messaging) ---- */
.msg-tabs{display:flex;gap:6px;padding:10px 18px;border-bottom:1px solid var(--border);background:var(--s2);overflow-x:auto;scrollbar-width:thin;scrollbar-color:#48CAE4 transparent}
.msg-tabs::-webkit-scrollbar{height:8px}
.msg-tabs::-webkit-scrollbar-track{background:transparent}
.msg-tabs::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#0096C7,#48CAE4);border-radius:6px}
.msg-tabs::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg,#0077B6,#0096C7)}
.msg-tab{
  padding:9px 16px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;
  border-radius:8px;white-space:nowrap;transition:color .12s,background .12s,box-shadow .12s
}
.msg-tab:hover{color:var(--text);background:var(--al)}
.msg-tab.active{color:#fff;background:linear-gradient(135deg,#0096C7,#0077B6);box-shadow:0 2px 8px rgba(0,150,199,.35)}
.msg-tab-body{display:none}
.msg-tab-body.active{display:block}

/* ---- Invite Patient compact redesign: 3-step compose, templates
   tucked behind one button, auto-generated message collapsed by default ---- */
.msg-compose-hd,.msg-tpl-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--s2);flex-wrap:wrap}
.msg-compose-title{font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:.02em}
.msg-compose-actions{display:flex;gap:8px;flex-wrap:wrap}
.msg-compose-body{padding:14px 16px 16px}
.msg-step-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 8px}
.msg-step-n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#0096C7,#0077B6);color:#fff;font-size:10px;font-weight:800;flex:none}
.msg-deliver-row{display:flex;align-items:center;gap:16px;margin:16px 0 4px;flex-wrap:wrap}
.msg-msg-collapse{margin-top:12px;border:1px solid var(--border);border-radius:10px;background:var(--s2);overflow:hidden}
.msg-msg-collapse>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 13px}
.msg-msg-collapse>summary::-webkit-details-marker{display:none}
.msg-msg-lead{font-weight:800;color:var(--text);font-size:12px}
.msg-msg-note{color:var(--muted);font-size:11px}
.msg-msg-collapse[open]>summary{border-bottom:1px solid var(--border)}
.msg-msg-collapse .msg-editor{border:none;border-radius:0}
.msg-tpl-seg{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:3px}
.msg-tpl-seg-btn{border:none;background:transparent;color:var(--muted);font:800 11.5px/1 'Inter','DM Sans',sans-serif;padding:6px 11px;border-radius:7px;cursor:pointer;transition:background .12s,color .12s}
.msg-tpl-seg-btn:hover{color:var(--text)}
.msg-tpl-seg-btn.active{background:linear-gradient(135deg,#0096C7,#0077B6);color:#fff}
#msgTemplatesToggle.active{background:var(--al);border-color:var(--accent);color:var(--accent)}

/* ---- Daily Notes compact redesign: tighter cards, cleaner
   optional-screening button, prominent primary Save. Scoped to the page so no
   other screen is affected; field ids / handlers are untouched. ---- */
#page-dailyNotes .wrap{max-width:640px}
#page-dailyNotes .pt-strip{margin-bottom:16px!important}
#page-dailyNotes .card{margin-bottom:13px!important}
#page-dailyNotes .card-body{padding:16px 18px!important}
#page-dailyNotes .g2{gap:14px!important}
#page-dailyNotes .card-body>.g2:not(:last-child){margin-bottom:12px!important}
.dn-optional-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:22px;border:1.5px dashed var(--border2);background:var(--surface);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.02em;transition:border-color .15s,color .15s,background .15s}
.dn-optional-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--al)}
.dn-optional-btn svg{width:14px;height:14px}

/* Signed daily note (HIPAA 164.312(c)(1)). Amber rather than red: the record is
   closed, which is a normal good state, not an error. */
.dn-lock{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 13px;padding:11px 14px;border:1px solid #e6b872;border-radius:12px;
  background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(245,158,11,.04))}
.dn-lock-main{display:flex;align-items:center;gap:11px;min-width:0}
.dn-lock-main svg{width:19px;height:19px;flex:none;color:#c77d0a}
.dn-lock-title{font-size:12.5px;font-weight:800;color:#8a5a06;letter-spacing:-.1px}
.dn-lock-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.dn-lock .btn{flex:none}
/* Amendment trail. Sits on its own full-width row inside the (wrapping) lock
   banner, so the banner header stays compact while the history stays readable. */
.dn-lock-history{flex:1 0 100%;margin-top:2px}
.dn-lock-history:empty{display:none}
.dn-ver-list{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(199,125,10,.25)}
.dn-ver-row{display:flex;gap:10px;align-items:flex-start}
.dn-ver-tag{flex:none;min-width:74px;text-align:center;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em;background:rgba(0,119,182,.12);color:#0077B6}
.dn-ver-tag.amend{background:rgba(245,158,11,.18);color:#b06f08}
.dn-ver-body{min-width:0;flex:1}
.dn-ver-title{font-size:12px;font-weight:800;color:var(--text)}
.dn-ver-meta{font-size:11px;color:var(--muted);margin-top:1px}
.dn-ver-reason{font-size:11.5px;color:var(--text);margin-top:3px}
.dn-ver-text{font-size:11.5px;color:var(--muted);margin-top:3px;padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.5);white-space:pre-wrap}
/* Amendment approval state. Pending is amber (awaiting action), approved is
   green, rejected greys the whole row back without hiding it. */
.dn-ver-state{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.02em;vertical-align:middle}
.dn-ver-state.pending{background:rgba(245,158,11,.2);color:#a35f05}
.dn-ver-state.approved{background:rgba(16,185,129,.16);color:#0f9d6b}
.dn-ver-state.rejected{background:rgba(224,52,42,.14);color:#c22e25}
.dn-ver-row.is-rejected{opacity:.6}
.dn-ver-actions{display:flex;gap:6px;margin-top:7px}
.dn-ver-actions .btn{padding:4px 10px;font-size:11px}
html[data-theme="dark"] .dn-ver-state.pending{color:#fbbf24}
html[data-theme="dark"] .dn-ver-state.approved{color:#34d399}
html[data-theme="dark"] .dn-ver-state.rejected{color:#f87171}
html[data-theme="dark"] .dn-ver-list{border-top-color:rgba(251,191,36,.25)}
html[data-theme="dark"] .dn-ver-tag{background:rgba(72,202,228,.16);color:#48CAE4}
html[data-theme="dark"] .dn-ver-tag.amend{background:rgba(251,191,36,.18);color:#fbbf24}
html[data-theme="dark"] .dn-ver-text{background:rgba(255,255,255,.06)}
/* Collapsible field-level diff inside the inline amendment history. */
.dn-ver-diff{margin-top:5px}
.dn-ver-diff summary{cursor:pointer;font-size:11px;font-weight:700;color:#0077B6;list-style:none}
.dn-ver-diff summary::-webkit-details-marker{display:none}
.dn-ver-diff summary::before{content:'▸ ';font-size:9px}
.dn-ver-diff[open] summary::before{content:'▾ '}
.dn-ver-diff-row{display:flex;align-items:baseline;gap:8px;font-size:11px;padding:4px 2px;border-bottom:1px dashed var(--border)}
.dn-ver-diff-row:last-child{border-bottom:none}
.dn-ver-diff-path{flex:0 0 140px;font-weight:700;color:var(--text)}
.dn-ver-diff-before{flex:1;color:var(--muted);text-decoration:line-through;word-break:break-word}
.dn-ver-diff-arrow{flex:none;color:var(--muted)}
.dn-ver-diff-after{flex:1;color:var(--text);font-weight:600;word-break:break-word}
html[data-theme="dark"] .dn-ver-diff summary{color:#48CAE4}
/* Same field-level diff, laid out as a table for the Pending Amendments
   "View" modal, where there's room to show it expanded and side-by-side. */
.pa-diff-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.pa-diff-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:4px 8px;border-bottom:1px solid var(--border)}
.pa-diff-table td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top;word-break:break-word}
.pa-diff-table tr:last-child td{border-bottom:none}
.pa-diff-table .pa-diff-before{color:var(--muted);text-decoration:line-through}
.pa-diff-table .pa-diff-arrow{color:var(--muted);text-align:center;width:24px}
.pa-diff-table .pa-diff-after{color:var(--text);font-weight:700}
html[data-theme="dark"] .dn-lock{border-color:rgba(251,191,36,.45);
  background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(251,191,36,.05))}
html[data-theme="dark"] .dn-lock-title{color:#fbbf24}
html[data-theme="dark"] .dn-lock-main svg{color:#fbbf24}
/* A locked form should read as read-only, not as broken. */
#page-dailyNotes input:disabled,#page-dailyNotes textarea:disabled,#page-dailyNotes select:disabled{
  background:var(--s2);color:var(--text);opacity:.85;cursor:default}

/* ---- Meeting Rooms compact redesign: tighter cards, the section
   label no longer floats on 36px of dead space, cohesive smaller action
   buttons. Scoped to the page so nothing else shifts. ---- */
#page-meetings .card-body{padding:14px 16px}
#page-meetings .sdiv{margin:2px 0 11px}
#page-meetings .mtg-row-actions .btn,#page-meetings .mtg-rec-actions .btn{padding:5px 11px;font-size:11.5px}

/* Patient Requests deadline pills (164.524 / 164.526). */
.pr-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.pr-pill.ok{background:rgba(16,185,129,.14);color:#0f9d6b}
.pr-pill.soon{background:rgba(245,158,11,.16);color:#c77d0a}
.pr-pill.over{background:rgba(224,52,42,.14);color:#c22e25}
.pr-pill.done{background:var(--s2);color:var(--muted);border:1px solid var(--border)}
/* Recipient type shown under the recipient name in the Disclosure Register. */
.dl-sub{display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin-top:1px}
html[data-theme="dark"] .pr-pill.soon{color:#fbbf24}
html[data-theme="dark"] .pr-pill.over{color:#f87171}
html[data-theme="dark"] .pr-pill.ok{color:#34d399}

/* ---- Dashboard refresh: interactive KPI cards (tinted corner
   glow, distinct green/amber accents + icon chips, hover lift) and glassy hero
   stat pills. Placed after the base .dash-* rules so these enhancements win. ---- */
.dash-kpi{transition:transform .16s var(--ease-out,ease),box-shadow .18s ease,border-color .18s ease}
.dash-kpi::after{content:"";position:absolute;top:-34px;right:-34px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--kpi-glow,rgba(0,119,182,.15)),transparent 68%);pointer-events:none;z-index:0}
.dash-kpi:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.10);border-color:rgba(0,119,182,.28)}
.dash-kpi-top,.dash-kpi-value,.dash-kpi-sub{position:relative;z-index:1}
.dash-kpi.k-indigo{--kpi-glow:rgba(0,119,182,.16)}
.dash-kpi.k-blue{--kpi-glow:rgba(0,180,216,.16)}
.dash-kpi.k-green{--kpi-glow:rgba(16,185,129,.17)}
.dash-kpi.k-amber{--kpi-glow:rgba(245,158,11,.18)}
.dash-kpi.k-green .dash-kpi-accent{background:linear-gradient(180deg,#10b981,#34d399)}
.dash-kpi.k-amber .dash-kpi-accent{background:linear-gradient(180deg,#f59e0b,#fbbf24)}
.dash-kpi.k-green .dash-kpi-ico{background:rgba(16,185,129,.14);color:#0f9d6b}
.dash-kpi.k-amber .dash-kpi-ico{background:rgba(245,158,11,.16);color:#c77d0a}
.dash-kpi-value.is-amber{color:#c77d0a}
html[data-theme="dark"] .dash-kpi-value.is-amber{color:#fbbf24}
html[data-theme="dark"] .dash-kpi.k-green .dash-kpi-ico{color:#34d399}
html[data-theme="dark"] .dash-kpi.k-amber .dash-kpi-ico{color:#fbbf24}
.dash-kpi-ico{width:34px;height:34px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.dash-kpi-ico svg{width:17px;height:17px}
.dash-summary{display:flex;flex-wrap:wrap;gap:8px}
.dash-stat{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);font-size:12px;color:rgba(233,236,255,.9)}
.dash-stat strong{color:#fff;font-weight:800;font-size:13.5px}

#dashboardMount>.pld-card{margin-bottom:14px}

/* Invite message body. The Design / HTML / Preview tab styling was removed
   with the tabs themselves on 2026-08-09 - they all edited one plain-text
   body, so the choice was decorative. */
.msg-editor{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.msg-editor-textarea{
  display:block;width:100%;box-sizing:border-box;border:none;outline:none;resize:vertical;
  padding:12px 14px;font-size:13px;line-height:1.55;font-family:inherit;background:var(--surface);color:var(--text)
}

.msg-defaults-row{padding:16px 0;border-bottom:1px solid var(--border)}
.msg-defaults-row:last-child{border-bottom:none;padding-bottom:0}
.msg-defaults-row:first-child{padding-top:0}
.msg-defaults-row .msg-defaults-label{font-size:12.5px;font-weight:800;margin-bottom:8px;color:var(--text)}
.msg-defaults-row textarea{
  width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:9px;padding:10px 12px;
  font-size:13px;line-height:1.5;font-family:inherit;background:var(--surface);color:var(--text);resize:vertical
}
.msg-defaults-row .msg-defaults-actions{display:flex;justify-content:flex-end;margin-top:8px}

.msg-history-empty{padding:30px 20px;text-align:center;color:var(--muted);font-size:12.5px}
.msg-history-row{
  display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--border);font-size:12.5px
}
.msg-history-row:last-child{border-bottom:none}
.msg-history-name{font-weight:700;color:var(--text);flex:0 0 160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-history-type{color:var(--muted);flex:0 0 170px}
.msg-history-chan{flex:0 0 110px}
.msg-history-time{margin-left:auto;color:var(--faint);font-size:11px;white-space:nowrap}
.msg-history-actions{display:flex;align-items:center;gap:6px;flex:none;padding-left:6px}
.msg-act{padding:5px 10px;border:1px solid var(--border2);border-radius:7px;background:var(--surface);color:var(--muted);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:color .12s,border-color .12s,background .12s}
.msg-act:hover{color:var(--accent);border-color:var(--accent);background:var(--s2)}
.msg-act-del:hover{color:var(--red);border-color:rgba(3,4,94,.34);background:var(--rl)}
@media(max-width:820px){.msg-history-row{flex-wrap:wrap}.msg-history-actions{margin-left:auto}}

html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=time],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#052B66!important;color:#E4F7FC!important;border-color:#0A4A82!important
}
html[data-theme="dark"] input[type=text]:focus,
html[data-theme="dark"] input[type=date]:focus,
html[data-theme="dark"] input[type=time]:focus,
html[data-theme="dark"] input[type=password]:focus,
html[data-theme="dark"] input[type=number]:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  background:#052B66!important;color:#E4F7FC!important;border-color:#0077B6!important
}
.msg-chan-pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;background:var(--al);color:var(--accent);margin-right:4px}


/* --- text selection + form-control accent -------------------- */
::selection{background:rgba(0,180,216,.35)}
input[type=checkbox],input[type=radio]{accent-color:#0096C7}

/* --- ocean scrollbars ---------------------------------------- */
html{scrollbar-color:#0096C7 transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0096C7,#0077B6);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#00B4D8,#0096C7);border:2px solid transparent;background-clip:padding-box}

/* --- richer light-theme canvas (maximized glow field) --------- */
body{
  background-image:
    radial-gradient(ellipse 80% 60% at 12% 40%, rgba(0,150,199,0.16) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(0,180,216,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(72,202,228,0.14) 0%, transparent 60%)!important;
}
html[data-theme="dark"] body{background-attachment:fixed!important}

/* --- page fade-in (opacity only: safe for fixed/sticky kids) -- */
@keyframes ctgPageIn{from{opacity:0}to{opacity:1}}
.page.active{animation:ctgPageIn .3s ease}

/* --- buttons: lift, press, sheen sweep ------------------------ */
.btn{transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .18s,border-color .18s,color .18s,filter .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-primary{position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(0,119,182,.30),inset 0 1px 0 rgba(255,255,255,.22)!important}
.btn-primary:hover{box-shadow:0 10px 26px rgba(0,150,199,.45),inset 0 1px 0 rgba(255,255,255,.28)!important;filter:brightness(1.06)}
.btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.btn-primary:hover::after{left:130%}
.btn-ghost:hover{border-color:rgba(0,150,199,.55)!important;color:#0077B6;box-shadow:0 4px 12px rgba(0,150,199,.16)}
html[data-theme="dark"] .btn-ghost:hover{color:#90E0EF!important;border-color:rgba(72,202,228,.55)!important;box-shadow:0 4px 14px rgba(0,180,216,.25)!important}

/* --- cards: hover elevation + teal edge glow ------------------ */
.card{transition:box-shadow .25s ease,border-color .25s ease}
.card:hover{border-color:rgba(0,150,199,.35);box-shadow:0 10px 32px rgba(0,119,182,.14),0 2px 8px rgba(2,62,138,.08)}
html[data-theme="dark"] .card:hover{border-color:rgba(72,202,228,.35)!important;box-shadow:0 12px 36px rgba(0,0,0,.5),0 0 24px rgba(0,180,216,.10)}
.card-hd::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,#00B4D8,#48CAE4,transparent);transition:width .35s ease;pointer-events:none}
.card:hover .card-hd::after{width:42%}

/* --- hero strip: deeper ocean glow ---------------------------- */
.pt-strip{box-shadow:0 16px 42px rgba(2,62,138,.35),0 0 30px rgba(0,180,216,.18),inset 0 1px 0 rgba(255,255,255,.18)!important}

/* --- animated logo gradient ----------------------------------- */
@keyframes ctgGradShift{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.logo span,.sidebar-hd span{
  background:linear-gradient(90deg,#48CAE4,#90E0EF,#00B4D8,#48CAE4);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:ctgGradShift 7s linear infinite;
}
/* "Group" in the top bar sits on a dark-blue header. Keep it bright and legible
   with a vivid gradient and a static glow - no pulsing/throbbing. */
.top-bar .logo span{
  background:linear-gradient(90deg,#48CAE4,#FFFFFF,#00E5FF,#90E0EF,#48CAE4)!important;
  background-size:300% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  font-weight:700!important;
  letter-spacing:.2px!important;
  filter:drop-shadow(0 0 7px rgba(144,224,239,.85)) drop-shadow(0 1px 2px rgba(3,4,94,.6))!important;
  animation:none!important;
}

/* --- sidebar links: slide + inner glow ------------------------ */
.side-link,.side-sublink{transition:background .18s,color .18s,transform .18s,border-color .18s}
.side-link:hover,.side-sublink:hover{transform:translateX(2px)}
.side-link.active{box-shadow:inset 0 0 22px rgba(0,180,216,.10)}

/* --- inputs: soft teal focus (no hard ring/rectangle) --------- */
input[type=text]:focus,input[type=date]:focus,input[type=time]:focus,
input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus{
  box-shadow:0 3px 12px rgba(0,119,182,.14)!important;
  border-color:#0096C7!important;
}
html[data-theme="dark"] input[type=text]:focus,html[data-theme="dark"] input[type=date]:focus,
html[data-theme="dark"] input[type=time]:focus,html[data-theme="dark"] input[type=password]:focus,
html[data-theme="dark"] input[type=number]:focus,html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  box-shadow:0 0 14px rgba(0,180,216,.16)!important;
  border-color:#48CAE4!important;
}

/* --- modals: glass blur backdrop + pop-in --------------------- */
.modal-overlay{-webkit-backdrop-filter:blur(7px) saturate(1.15);backdrop-filter:blur(7px) saturate(1.15);background:rgba(2,6,35,.45)!important}
@keyframes ctgModalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-overlay.show .modal{animation:ctgModalIn .28s cubic-bezier(.22,1,.36,1)}
.modal{box-shadow:0 30px 80px rgba(2,6,35,.45),0 0 0 1px rgba(0,150,199,.10),0 0 40px rgba(0,180,216,.08)}

/* --- toasts: ocean glow --------------------------------------- */
.toast{box-shadow:0 10px 30px rgba(0,150,199,.40),0 0 20px rgba(0,180,216,.25)!important;border:1px solid rgba(255,255,255,.25)}

/* --- tables: row hover wash ----------------------------------- */
.dtable tr:hover td{background:rgba(0,180,216,.07)}
html[data-theme="dark"] .dtable tr:hover td{background:rgba(0,180,216,.10)}

/* --- tabs: square active state (see .msg-tab.active above) ---- */
.msg-tab{position:relative}

/* --- tags / pills: gentle lift -------------------------------- */
.tag{transition:transform .15s,box-shadow .15s}
.tag:hover{transform:translateY(-1px)}

/* --- theme toggle: playful spin ------------------------------- */
.ctg-theme-btn svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.ctg-theme-btn:hover{box-shadow:0 6px 18px rgba(0,180,216,.35)!important;border-color:rgba(72,202,228,.5)!important}
.ctg-theme-btn:hover svg{transform:rotate(18deg)}

/* --- appointment blocks: hover glow (color coding untouched) -- */
.appt-block:hover{box-shadow:0 6px 18px rgba(2,6,35,.35),0 0 12px rgba(0,180,216,.18)!important}

/* --- keyboard focus: cyan ring on buttons/links only. Text
   inputs/select/textarea are excluded so typing never shows a hard
   outline rectangle - their focus is the soft border+glow above. --- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(0,180,216,.8)!important;outline-offset:2px;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none!important}

/* Patient Comments: stacked Edit/Delete fit the narrow action column; Delete
   reads as the destructive one (muted, distinct from the teal Edit hover). */
#pcTableWrap .btn-sm{width:100%;min-width:0;padding:6px 8px}
.pc-del-btn{color:#9FB8CC!important}
.pc-del-btn:hover{color:#E4F7FC!important;border-color:rgba(0,150,199,.5)!important;background:rgba(2,62,138,.35)!important}


/* Deep-navy backdrop with soft blue glow field */
html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 720px at 80% -10%, rgba(0,119,182,.32), transparent 58%),
    radial-gradient(1000px 680px at 4% 112%, rgba(0,180,216,.20), transparent 58%),
    linear-gradient(180deg,#050A2E 0%,#03072A 44%,#01040F 100%)!important;
  background-attachment:fixed!important;
}

/* Deep-navy glass surfaces (excludes .pt-strip so the colored hero stays) */
html[data-theme="dark"] .card,
html[data-theme="dark"] .pld-card,
html[data-theme="dark"] .pld-sidebar-card,
html[data-theme="dark"] .pld-profile-card,
html[data-theme="dark"] .pld-mini-card,
html[data-theme="dark"] .pld-record-card,
html[data-theme="dark"] .pld-info-card,
html[data-theme="dark"] .patient-list-panel,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .doc-group,
html[data-theme="dark"] .ac-table-wrap,
html[data-theme="dark"] .exam-pdf-panel{
  background:linear-gradient(160deg,rgba(10,24,64,.66),rgba(3,10,38,.72))!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(144,224,239,.14)!important;
  border-radius:20px!important;
  box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(202,240,248,.08),0 0 0 1px rgba(0,119,182,.06)!important;
}
html[data-theme="dark"] .card:hover{
  border-color:rgba(0,180,216,.30)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 34px rgba(0,180,216,.12),inset 0 1px 0 rgba(202,240,248,.10)!important;
}
/* Card header reads as translucent glass on the deep surface */
html[data-theme="dark"] .card-hd{
  background:rgba(144,224,239,.05)!important;
  border-bottom:1px solid rgba(144,224,239,.10)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
}

/* Sidebar as one deep-navy glass slab with a faint cyan seam */
html[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,rgba(6,14,48,.90),rgba(2,6,26,.94))!important;
  border-right:1px solid rgba(144,224,239,.08)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)
}
/* Active nav item: soft blue glow pill (colour is the existing accent) */
html[data-theme="dark"] .side-link.active{
  background:linear-gradient(135deg,rgba(0,119,182,.28),rgba(0,180,216,.14))!important;
  box-shadow:inset 0 0 20px rgba(0,180,216,.14),0 0 0 1px rgba(144,224,239,.14)!important;
  border-radius:12px!important
}

/* Rounder pill controls to match the reference */
html[data-theme="dark"] .btn{border-radius:12px}
html[data-theme="dark"] .tag,html[data-theme="dark"] .msg-chan-pill{border-radius:999px}

/* Interactive motion layer: entrance and hover micro-interactions across the
   portal. Motion only, with no colour, content or calendar colour-coding
   changes. Continuous and entrance animations run only when the user has not
   asked to reduce motion, and a reduce block below neutralises everything. */
@media (prefers-reduced-motion:no-preference){
  /* Page content glides up as you navigate */
  @keyframes ctgRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  .page.active .wrap{animation:ctgRise .5s cubic-bezier(.22,1,.36,1) both}

  /* Hero-banner ambient glow circles drift */
  @keyframes ctgFloatA{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,-12px)}}
  @keyframes ctgFloatB{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,10px)}}
  .pt-strip::after{animation:ctgFloatA 8s ease-in-out infinite}
  .pt-strip::before{animation:ctgFloatB 11s ease-in-out infinite}

  /* Active sidebar item: static soft blue glow (dark theme), no pulsing */
  html[data-theme="dark"] .side-link.active{box-shadow:inset 0 0 18px rgba(0,180,216,.10),0 0 0 1px rgba(144,224,239,.12)}
}

/* ---- Hover / press micro-interactions (user-initiated; always on) ---- */
.card{transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .28s!important}
.card:hover{transform:translateY(-5px)}
.card-ico{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.card:hover .card-ico{transform:rotate(-8deg) scale(1.1)}

.side-link,.side-sublink{transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,box-shadow .2s,color .2s}
.side-link:hover,.side-sublink:hover{transform:translateX(4px)}
.side-link svg,.side-sublink svg,.side-link .side-ico,.side-sublink .side-ico{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.side-link:hover svg,.side-sublink:hover svg,.side-link:hover .side-ico,.side-sublink:hover .side-ico{transform:scale(1.18) rotate(-4deg)}

.btn{transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .18s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.95)}

.pt-av,.user-chip-av,.pld-avatar,.ac-user-av,.card-ico{will-change:transform}
.pt-av,.user-chip-av{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.pt-av:hover,.user-chip-av:hover{transform:scale(1.1) rotate(-4deg)}

.tag,.msg-chan-pill,.sev-badge{transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s}
.tag:hover,.msg-chan-pill:hover{transform:translateY(-1px) scale(1.04)}

.msg-tab,.appt-facility-tab,.pld-tab{transition:color .2s,background .2s,transform .18s}
.msg-tab:hover,.appt-facility-tab:hover,.pld-tab:hover{transform:translateY(-1px)}

/* Theme toggle + icon buttons spin-pop on hover */
.ctg-theme-btn svg,.pld-icon-btn svg,.ac-icon-btn svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.ctg-theme-btn:hover svg{transform:rotate(20deg) scale(1.1)}
.pld-icon-btn:hover svg,.ac-icon-btn:hover svg{transform:scale(1.15)}

/* Table rows nudge in on hover */
.dtable tbody tr,.dtable tr{transition:transform .14s,background .14s}
.dtable tbody tr:hover,.dtable tr:hover{transform:translateX(2px)}

/* Accessibility: honour reduced-motion by neutralising all motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
}

/* Write Off button - refined outlined pill with a hover-fill, replacing the
   plain ghost look. Palette-consistent (teal), with a clear scissors icon. */
.btn-writeoff{
  gap:6px;
  border:1px solid rgba(2,62,138,.45)!important;
  color:#0077B6!important;
  background:rgba(0,119,182,.06)!important;
}
.btn-writeoff svg{width:14px;height:14px;flex:0 0 auto}
.btn-writeoff:hover:not(:disabled){
  background:linear-gradient(135deg,#0096C7,#0077B6)!important;
  border-color:transparent!important;color:#fff!important;
  box-shadow:0 6px 16px rgba(0,119,182,.32)!important;
}
.btn-writeoff:disabled{opacity:.5;cursor:not-allowed}
html[data-theme="dark"] .btn-writeoff{
  color:#48CAE4!important;border-color:rgba(72,202,228,.40)!important;background:rgba(0,180,216,.08)!important;
}
html[data-theme="dark"] .btn-writeoff:hover:not(:disabled){color:#fff!important;box-shadow:0 6px 18px rgba(0,180,216,.30)!important}

/* Refined ghost buttons - premium outlined pill used across the portal
   (Print Statement, Print Summary, Add Task, Patient Details -> , etc.).
   Excludes .btn-writeoff so that button keeps its own distinct treatment. */
.btn-ghost:not(.btn-writeoff){
  background:var(--surface)!important;color:var(--text)!important;
  border:1px solid var(--border2)!important;font-weight:600!important;
  border-radius:10px!important;box-shadow:0 1px 2px rgba(2,6,35,.06)!important;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,border-color .18s,color .18s,background .18s!important;
}
.btn-ghost:not(.btn-writeoff):hover{
  background:var(--s2)!important;border-color:rgba(0,150,199,.55)!important;color:#0077B6!important;
  box-shadow:0 6px 15px rgba(0,150,199,.16)!important;transform:translateY(-2px)!important;
}
.btn-ghost:not(.btn-writeoff):active{transform:translateY(0) scale(.97)!important}
html[data-theme="dark"] .btn-ghost:not(.btn-writeoff){
  background:rgba(144,224,239,.05)!important;color:#E4F7FC!important;
  border:1px solid rgba(144,224,239,.16)!important;box-shadow:0 1px 3px rgba(0,0,0,.4)!important;
}
html[data-theme="dark"] .btn-ghost:not(.btn-writeoff):hover{
  background:rgba(0,180,216,.12)!important;border-color:rgba(72,202,228,.5)!important;color:#fff!important;
  box-shadow:0 7px 18px rgba(0,180,216,.24)!important;
}

#page-arSummary .card,
#page-arSummary .ar-summary-grid{margin-bottom:10px!important}
#page-arSummary .ar-info-strip{padding:11px 18px!important}
#page-arSummary .ar-info-name{font-size:15px}
#page-arSummary .ar-date-block{padding:10px 16px!important}
#page-arSummary .ar-date-label{margin-bottom:3px}
#page-arSummary .ar-summary-grid{gap:10px!important}
#page-arSummary .ar-summary-card{padding:12px 15px!important}
#page-arSummary .ar-summary-label{margin-bottom:5px}
#page-arSummary .ar-summary-value{font-size:19px}
#page-arSummary .ar-billing-body{padding:14px 18px!important}
#page-arSummary #arNotesInput{min-height:54px}
#page-arSummary .ar-action-toolbar{padding:10px 18px!important}

.page:not(#page-appointment) .card{margin-bottom:11px}
.page:not(#page-appointment) .card-body{padding:14px 18px}
.page:not(#page-appointment) .pt-strip{margin-bottom:14px}


/* ============================================================
   REQUESTED LOGIN / SIDEBAR / REGISTRATION / APPOINTMENTS UPDATE
   Scoped overrides only; unrelated page designs remain unchanged.
   ============================================================ */

/* Login: invalid-credentials text must remain clearly visible in dark mode. */
html[data-theme="dark"] .auth-err{color:#fff!important}

/* The original top bar now sits above the opened sidebar. The sidebar begins
   immediately below the 60px bar and no longer repeats the website name. */
.sidebar{
  top:60px!important;
  bottom:0!important;
  height:auto!important;
  padding-top:0!important;
  z-index:1700!important;
}
.sidebar-hd{display:none!important}
.sidebar-overlay{top:60px!important}
.sidebar>.side-section-label:first-child{padding-top:14px!important}
body.sidebar-visible .top-bar{
  margin-left:0!important;
  width:100%!important;
  padding-left:28px!important;
}
body.sidebar-visible #topbarLogo,
body.sidebar-visible .top-bar .topbar-logo{display:block!important}
body.sidebar-visible .page{margin-left:250px!important}
body.sidebar-visible .action-bar{left:250px!important;right:0!important;padding-left:28px!important}
@media(max-width:860px){
  body.sidebar-visible .page{margin-left:0!important}
  body.sidebar-visible .action-bar{left:0!important}
}

/* Registration: field and selection labels use full black in light mode. */
html:not([data-theme="dark"]) #page-registration label{color:#000!important}

/* Appointments: gray/faint interface copy becomes black in light mode,
   including both scheduling modals. */
html:not([data-theme="dark"]) #page-appointment,
html:not([data-theme="dark"]) #apptModal,
html:not([data-theme="dark"]) #breakBlockModal,
html:not([data-theme="dark"]) #apptContextMenu,
html:not([data-theme="dark"]) #apptBlockContextMenu,
html:not([data-theme="dark"]) #apptHoverCard,
html:not([data-theme="dark"]) #patientCommentsModal{
  --muted:#000;
  --faint:#000;
}

/* Compact scheduled-today card in the existing 60px top bar. */
.appt-topbar-summary{
  align-items:center;
  gap:9px;
  min-height:36px;
  padding:5px 12px 5px 7px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 15px rgba(0,0,0,.16);
  color:#fff;
  white-space:nowrap;
}
.appt-topbar-summary-icon{
  width:27px;height:27px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:rgba(144,224,239,.18);color:#CAF0F8;flex:0 0 auto
}
.appt-topbar-summary-icon svg{width:15px;height:15px}
.appt-topbar-summary-copy{display:flex;flex-direction:column;line-height:1.1}
.appt-topbar-summary-copy strong{font-size:11px;font-weight:800;color:#fff}
.appt-topbar-summary-copy small{font-size:8.5px;font-weight:600;color:rgba(255,255,255,.66);margin-top:2px}

/* The appointments page itself never scrolls. Its calendar canvas consumes
   the remaining viewport and owns all horizontal/vertical scrolling. */
body.appointments-active{overflow:hidden}
#page-appointment{height:calc(100vh - 60px);overflow:hidden}
#page-appointment .appt-page-wrap{
  max-width:100%!important;
  height:100%;
  padding:10px 16px 12px!important;
  display:flex;
  overflow:hidden;
}
#page-appointment .appt-calendar-card{
  width:100%;height:100%;margin:0!important;
  display:flex;flex-direction:column;overflow:hidden
}
#page-appointment .appt-calendar-card:hover{transform:none!important}
#page-appointment .appt-calendar-card>.card-hd{flex:0 0 auto}
#page-appointment .appt-calendar-card>.card-body{
  flex:1 1 auto;min-height:0;padding:0!important;overflow:hidden
}
#page-appointment #apptGridMount{height:100%;min-height:0}
#page-appointment .appt-body-scroll{
  height:100%;min-height:0;padding:10px;
  overflow-x:auto;overflow-y:auto
}
#page-appointment .appt-body-scroll-day .appt-facilities-row,
#page-appointment .appt-body-scroll-week .appt-facilities-row{
  height:100%;min-height:0;align-items:stretch
}
#page-appointment .appt-body-scroll-day .appt-facility-panel,
#page-appointment .appt-body-scroll-week .appt-facility-panel{
  height:100%;min-height:0;display:flex;flex-direction:column
}
#page-appointment .appt-grid-scroll{
  flex:1 1 auto;min-height:0;max-height:none!important;
  overflow-y:auto;overflow-x:visible
}
#page-appointment .appt-hours-toggle{flex:0 0 auto}
#page-appointment .appt-body-scroll-month .appt-facilities-row{height:auto;min-height:100%;align-items:flex-start}
#page-appointment .appt-body-scroll-month .appt-facility-panel{height:auto;align-self:flex-start}
#page-appointment .appt-toolbar{flex-wrap:nowrap;gap:10px;padding:10px 14px}
#page-appointment #apptWeekRangeLabel{flex:1;min-width:160px}
.appt-toolbar-controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.appt-toolbar-controls .appt-facility-select{order:0}
.appt-toolbar-controls .appt-facility-tabs{order:1}
.appt-undo-slot{order:2;display:inline-flex}
.appt-toolbar-controls .btn-primary{order:3}
/* Undo delete - amber, so it reads as a time-limited safety action distinct
   from the primary New Appointment button beside it. Only shown while the
   signed-in account has a delete it can still undo within the hour. */
.appt-undo-btn{border-color:rgba(194,84,10,.45)!important;color:#B24A06!important;
  background:rgba(194,84,10,.08)!important;font-weight:700}
.appt-undo-btn:hover{background:#B24A06!important;border-color:#B24A06!important;color:#fff!important}
.appt-undo-ico{font-weight:900;margin-right:2px}
html[data-theme="dark"] .appt-undo-btn{color:#E8A87C!important;border-color:rgba(232,132,47,.5)!important;background:rgba(232,132,47,.14)!important}
html[data-theme="dark"] .appt-undo-btn:hover{background:#E8842F!important;border-color:#E8842F!important;color:#20130a!important}

/* Facility color keys now live at the bottom of their respective modals. */
.appt-modal-color-key{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.appt-modal-color-title{font-size:10px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;color:var(--text);margin-bottom:9px}
.appt-modal-color-items{display:flex;flex-wrap:wrap;gap:7px 12px}
.appt-modal-color-items span{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--text)}
.appt-modal-color-items i{display:inline-block;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:0 0 auto}

@media(max-width:1100px){
  #page-appointment .appt-toolbar{flex-wrap:wrap}
  #page-appointment #apptWeekRangeLabel{order:3;flex-basis:100%}
  .appt-toolbar-controls{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
}
@media(max-width:700px){
  .appt-topbar-summary-copy small{display:none}
  .appt-topbar-summary{padding-right:8px}
  #page-appointment .appt-page-wrap{padding:8px!important}
  .appt-toolbar-controls{width:100%;justify-content:flex-start}
  .appt-toolbar-controls .appt-facility-select{min-width:0;flex:1 1 190px}
}


/* ============================================================
   FOLLOW-UP: PATIENT DEVICE + APPOINTMENT MODAL / DATE STATUS
   ============================================================ */

/* Appointment modal helper text belongs inside the controls and remains
   intentionally gray, even though the surrounding light-mode appointment
   interface uses black copy for readability. */
#apptModal input::placeholder,
#apptModal textarea::placeholder,
#breakBlockModal input::placeholder,
#breakBlockModal textarea::placeholder{
  color:#6B7280!important;
  -webkit-text-fill-color:#6B7280!important;
  opacity:1!important;
}
html[data-theme="dark"] #apptModal input::placeholder,
html[data-theme="dark"] #apptModal textarea::placeholder,
html[data-theme="dark"] #breakBlockModal input::placeholder,
html[data-theme="dark"] #breakBlockModal textarea::placeholder{
  color:#9CA3AF!important;
  -webkit-text-fill-color:#9CA3AF!important;
}

/* Scheduled-today information now sits directly to the right of the active
   date/range inside the appointments toolbar instead of occupying the site
   top bar. */
#page-appointment .appt-date-summary{
  flex:1 1 auto;
  min-width:260px;
  display:flex;
  align-items:center;
  gap:10px;
}
#page-appointment .appt-date-summary #apptWeekRangeLabel{
  flex:0 1 auto;
  min-width:0;
}
.appt-date-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:4px 9px 4px 6px;
  border:1px solid var(--border2);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--e1);
  white-space:nowrap;
  flex:0 0 auto;
}
.appt-date-status-icon{
  width:20px;
  height:20px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--al);
  color:var(--accent);
  flex:0 0 auto;
}
.appt-date-status-icon svg{width:12px;height:12px}
.appt-date-status strong{font-size:10.5px;font-weight:800;color:var(--text)}

@media(max-width:1100px){
  #page-appointment .appt-date-summary{order:3;flex-basis:100%;min-width:0}
  #page-appointment #apptWeekRangeLabel{order:initial;flex-basis:auto}
}
@media(max-width:620px){
  #page-appointment .appt-date-summary{align-items:flex-start;flex-direction:column;gap:6px}
  .appt-date-status{white-space:normal}
}

/* ACCESS CONTROL - four-tab layout and registered law-firm management */
.ac-page-tabs{display:flex;align-items:stretch;gap:8px;margin:0 0 16px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow-x:auto}
.ac-page-tab{flex:1;min-width:max-content;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:8px;padding:10px 14px;font:700 12px/1.25 'Inter','DM Sans',sans-serif;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ac-page-tab:hover{background:var(--s2);color:var(--text)}
.ac-page-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.ac-page-panel{display:none}
.ac-page-panel.active{display:block}
.ac-law-firm-add{display:flex;align-items:flex-end;gap:10px}
.ac-law-firm-add>.btn{height:37px;flex-shrink:0}
.ac-law-firm-list{display:flex;flex-direction:column;gap:8px}
.ac-law-firm-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;background:var(--s2)}
.ac-law-firm-index{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--al);color:var(--accent);font-size:11px;font-weight:800}
.ac-law-firm-name{min-width:0;flex:1;font-size:13px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.ac-audit-placeholder{display:flex;align-items:center;gap:14px;padding:18px;border:1px dashed var(--border2);border-radius:12px;background:var(--s2)}
.ac-audit-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--aml);color:var(--amber);font-size:12px;font-weight:900}
.ac-audit-title{font-size:14px;font-weight:800;color:var(--text);margin-bottom:3px}
/* Email + two-factor pair on the account form. The two columns are stretched
   to equal height and the toggle is a bordered card, so the row reads as one
   deliberate pair rather than an input with a checkbox floating beside it. */
/* Both columns carry a label row (the toggle's is an invisible spacer), so
   the input and the card share a top edge; the card then stretches to the
   bottom of the taller column so the pair reads as one even block. */
.ac-security-row{align-items:stretch}
.ac-mfa-field{margin-bottom:13px}
.ac-field-note{margin-top:5px;line-height:1.45}
/* This card is a <label> inside .fg, so it inherits the form-label styling
   (uppercase, tracked-out, tiny). Reset those here - the card is prose, not
   a field label. */
.ac-mfa-card{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid var(--border2);border-radius:10px;background:var(--s2);cursor:pointer;transition:border-color .15s,background .15s;width:100%;flex:1;box-sizing:border-box;text-transform:none;letter-spacing:normal}
.ac-mfa-card *{text-transform:none;letter-spacing:normal}
.ac-mfa-card:hover{border-color:var(--brand,#3b7cc4)}
.ac-mfa-card input{width:16px;height:16px;margin:1px 0 0;cursor:pointer;flex-shrink:0}
.ac-mfa-card:has(input:checked){border-color:var(--brand,#3b7cc4);background:var(--bl,rgba(59,124,196,.07))}
.ac-mfa-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.ac-mfa-title{font-size:13px;font-weight:700;color:var(--text);line-height:1.3}
.ac-mfa-note{font-size:11.5px;color:var(--muted);line-height:1.45}

/* Emailed sign-in code step */
.auth-mfa-lead{font-size:13px;line-height:1.55;color:var(--muted);margin-bottom:16px}
.auth-code-input{letter-spacing:.42em;font-size:22px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.auth-mfa-actions{display:flex;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.auth-linkbtn{background:none;border:none;padding:0;font-size:12.5px;font-weight:700;color:var(--brand,#1f7ac4);cursor:pointer;text-decoration:underline}
.auth-linkbtn:disabled{opacity:.5;cursor:not-allowed;text-decoration:none}

/* Automatic-logoff warning. Sits above everything, including the call
   overlay, because losing the session affects the whole app. */
.ctg-idle-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;background:rgba(9,22,40,.55);backdrop-filter:blur(3px);padding:20px}
.ctg-idle-card{max-width:400px;width:100%;background:var(--s1,#fff);border-radius:16px;padding:26px 28px;text-align:center;box-shadow:0 24px 60px rgba(9,22,40,.3)}
.ctg-idle-icon{width:46px;height:46px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--aml,rgba(245,158,11,.15));color:var(--amber,#b45309);font-size:22px;font-weight:900}
.ctg-idle-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:7px}
.ctg-idle-copy{font-size:13.5px;line-height:1.6;color:var(--muted);margin-bottom:20px}
.ctg-idle-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.ac-audit-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:14px}
.ac-audit-filters .fg{min-width:150px;flex:0 1 auto;margin-bottom:0}
/* Sits on the same baseline as the inputs beside it rather than relying on a
   blank spacer label, which drifted whenever the label line-height changed. */
.ac-audit-clear{align-self:end;height:38px;padding:0 18px;white-space:nowrap}
.ac-audit-filters .fg input,.ac-audit-filters .fg select{height:38px}
.ac-audit-summary{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:10px}
/* The table can be wide on small screens; it scrolls inside its own box so
   the page itself never scrolls sideways. */
.ac-audit-tablewrap{overflow-x:auto;border:1px solid var(--border2);border-radius:12px;background:var(--surface)}
.ac-audit-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px;min-width:870px}
.ac-audit-table thead th{text-align:left;padding:11px 14px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--s2);border-bottom:1px solid var(--border2);white-space:nowrap;position:sticky;top:0;z-index:1}
.ac-audit-table tbody td{padding:11px 14px;border-bottom:1px solid var(--border2);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-audit-table tbody tr:nth-child(even){background:rgba(0,119,182,.02)}
.ac-audit-table tbody tr:last-child td{border-bottom:none}
.ac-audit-table tbody tr:hover{background:var(--al)}
.ac-audit-table tbody tr.is-alert{background:rgba(224,52,42,.04)}
.ac-audit-table tbody tr.is-alert:hover{background:rgba(224,52,42,.08)}
.ac-audit-when{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
/* Session duration. Tabular figures so the column scans vertically, and the
   ">= 2h 15m" form is quieter than an exact one - it is a floor,
   not a measurement, and should not draw the eye first. */
.ac-audit-session{white-space:nowrap;font-variant-numeric:tabular-nums}
.ac-audit-session-exact{font-weight:700;color:var(--text)}
.ac-audit-session-approx{font-weight:600;color:var(--muted);cursor:help}
/* Location above the address it was guessed from. The place is what a
   reviewer scans for, so it reads first; the address stays underneath
   because the place is an estimate and the address is the evidence. */
.ac-audit-ip{line-height:1.35;overflow:hidden}
.ac-audit-place{font-size:12px;font-weight:700;color:var(--text);display:flex;align-items:baseline;gap:5px;min-width:0}
.ac-audit-place.is-local{font-weight:600;color:var(--muted)}
/* The name gives up its width, never the marker: a truncated place is still
   readable, but an "approx." that quietly disappears turns an estimate into
   what looks like a statement of fact. */
.ac-audit-placename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ac-audit-place i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);opacity:.75;cursor:help;flex-shrink:0}
.ac-audit-addr{display:block;font-size:11px;color:var(--muted);font-family:'DM Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.ac-audit-action{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:800;font-size:11px;letter-spacing:.01em;white-space:nowrap;background:var(--s3,rgba(0,0,0,.04));color:var(--muted)}
.ac-audit-action.act-ok{background:rgba(16,185,129,.14);color:#0f9d6b}
.ac-audit-action.act-neutral{background:var(--s3,rgba(0,0,0,.05));color:var(--muted)}
.ac-audit-action.act-info{background:rgba(0,119,182,.12);color:#0077B6}
.ac-audit-action.act-warn{background:rgba(245,158,11,.16);color:#c77d0a}
.ac-audit-action.act-danger{background:rgba(224,52,42,.14);color:#c22e25}
html[data-theme="dark"] .ac-audit-action.act-ok{color:#34d399}
html[data-theme="dark"] .ac-audit-action.act-info{color:#48CAE4}
html[data-theme="dark"] .ac-audit-action.act-warn{color:#fbbf24}
html[data-theme="dark"] .ac-audit-action.act-danger{color:#f87171}
/* Target reads as "what kind of thing" + "which one" - the kind is the quiet
   label, the name is what the eye should land on. */
.ac-audit-table td.ac-audit-target{white-space:normal}
.ac-audit-kind{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ac-audit-target-name{display:block;font-weight:700;color:var(--text);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The stored `detail` payload, under the target it belongs to. It wraps: a
   translation row lists six languages and clipping it to one line hid most of
   them behind an ellipsis. `overflow-wrap:anywhere` keeps a long unbroken
   token (a URL, a key) inside the column instead of pushing the cell wide. */
.ac-audit-detail{display:block;font-size:11px;color:var(--muted);margin-top:2px;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.ac-audit-dash{color:var(--muted);opacity:.5}
/* Security-relevant events (failed sign-ins, lockouts, deletions) are the
   ones a reviewer is scanning for, so they're tinted rather than uniform. */
.ac-audit-empty{padding:26px 14px;text-align:center;color:var(--muted);font-weight:600}
.ac-audit-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.ac-audit-pager .btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:680px){.ac-page-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ac-page-tab{min-width:0}.ac-law-firm-add{align-items:stretch;flex-direction:column}.ac-law-firm-add>.btn{width:100%;justify-content:center}}

/* Access Control: a compact collapsible account list, replacing the old wide
   checkbox matrix with nested account, page and section controls while
   leaving the rest of the portal untouched. */
#acMatrixMount.ac-table-wrap{overflow:visible!important;max-height:none!important;padding:10px!important}
.ac-list-view{display:flex;flex-direction:column;gap:8px;width:100%}
/* Role group header in the accounts list - provider first, admin last. */
.ac-role-group{display:flex;align-items:center;gap:8px;margin:14px 2px 2px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ac-role-group:first-child{margin-top:2px}
.ac-role-group-n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--s3);color:var(--muted);font-size:10px;letter-spacing:0}
html[data-theme="dark"] .ac-role-group-n{background:var(--s2)}
.ac-account-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;box-shadow:0 8px 22px rgba(15,23,42,.04)}
.ac-account-card>summary{list-style:none}
.ac-account-card>summary::-webkit-details-marker,.ac-page-perm>summary::-webkit-details-marker{display:none}
.ac-account-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 9px;cursor:pointer;min-height:42px;background:var(--s2);border-bottom:1px solid transparent}
.ac-account-card[open]>.ac-account-summary{border-bottom-color:var(--border)}
.ac-account-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.ac-account-left .ac-role-badge{margin-top:0;flex:0 0 auto}
.ac-role-badge.inactive{background:var(--rl);color:var(--red);border-color:rgba(3,4,94,.22)}
.ac-account-caret,.ac-page-caret{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;font-weight:800;line-height:1;transition:transform .15s ease;flex:0 0 auto}
.ac-account-card[open]>.ac-account-summary .ac-account-caret,.ac-page-perm[open]>.ac-page-summary .ac-page-caret{transform:rotate(90deg);color:var(--accent)}
.ac-account-labels{display:flex;flex-direction:column;gap:0;min-width:0}.ac-account-labels .ac-user-name{font-size:13px;line-height:1.15}.ac-account-labels .ac-user-meta{font-size:10.5px;line-height:1.2}
.ac-account-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:nowrap;flex:0 0 auto}
.ac-act{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:8px;cursor:pointer;padding:0;transition:background .12s,border-color .12s,color .12s,opacity .12s}
.ac-act svg{width:15px;height:15px;pointer-events:none}
.ac-act:hover:not(:disabled){background:var(--al);border-color:var(--accent);color:var(--accent)}
.ac-act.danger:hover:not(:disabled){background:var(--rl);border-color:rgba(3,4,94,.28);color:var(--red)}
.ac-act.on:hover:not(:disabled){background:rgba(16,185,129,.12);border-color:#10b981;color:#059669}
.ac-act:disabled{opacity:.38;cursor:not-allowed}
.ac-account-detail{padding:8px 10px 10px;background:var(--surface)}
.ac-admin-note{margin:0 0 8px;padding:7px 9px;border:1px solid var(--border);border-radius:9px;background:var(--al);color:var(--accent);font-size:11px;font-weight:700}
.ac-page-list{display:flex;flex-direction:column;gap:5px}.ac-page-group-label{margin:6px 0 1px;padding:0 2px;color:var(--muted);font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.ac-page-perm{border:1px solid var(--border);border-radius:9px;background:var(--s2);overflow:hidden}.ac-page-perm.off{opacity:.72}
.ac-page-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;cursor:pointer;min-height:34px}
.ac-page-main{display:flex;align-items:center;gap:7px;min-width:0}.ac-page-title{font-size:12px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-page-summary input[type=checkbox],.ac-section-row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:5px;border:1.8px solid var(--border2);background:var(--surface);cursor:pointer;position:relative;flex:0 0 auto;margin:0;transition:background .12s,border-color .12s,transform .12s}
.ac-page-summary input[type=checkbox]:hover:not(:disabled),.ac-section-row input[type=checkbox]:hover:not(:disabled){border-color:var(--accent);transform:scale(1.06)}
.ac-page-summary input[type=checkbox]:checked,.ac-section-row input[type=checkbox]:checked{background:linear-gradient(135deg,#0077B6,#00B4D8);border-color:transparent}
.ac-page-summary input[type=checkbox]:checked::after,.ac-section-row input[type=checkbox]:checked::after{content:'';position:absolute;left:4.7px;top:2px;width:4.5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ac-page-summary input[type=checkbox]:disabled,.ac-section-row input[type=checkbox]:disabled{opacity:.55;cursor:not-allowed}
.ac-mini-badge{font-size:9.5px;font-weight:900;letter-spacing:.02em;border-radius:999px;padding:3px 7px;white-space:nowrap;border:1px solid var(--border);color:var(--muted);background:var(--surface)}
.ac-mini-badge.full{background:rgba(0,180,216,.12);color:#0077B6;border-color:rgba(0,119,182,.22)}.ac-mini-badge.limited{background:rgba(0,150,199,.13);color:#0096C7;border-color:rgba(0,150,199,.25)}
.ac-section-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:5px;padding:0 8px 8px 31px}.ac-section-row{display:flex;align-items:center;gap:7px;min-height:28px;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:5px 7px;color:var(--text);font-size:11.3px;font-weight:700;text-transform:none;letter-spacing:0;cursor:pointer}.ac-section-row.disabled{opacity:.55;cursor:not-allowed}.ac-section-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ac-section-empty{grid-column:1/-1;color:var(--muted);font-size:11px;padding:5px 0}
html[data-theme="dark"] .ac-account-card,html[data-theme="dark"] .ac-page-perm{background:var(--surface)!important;border-color:var(--border)!important;box-shadow:none!important}html[data-theme="dark"] .ac-account-summary,html[data-theme="dark"] .ac-page-perm{background:var(--s2)!important}html[data-theme="dark"] .ac-account-detail,html[data-theme="dark"] .ac-act,html[data-theme="dark"] .ac-section-row,html[data-theme="dark"] .ac-mini-badge{background:var(--surface)!important;border-color:var(--border)!important;color:var(--muted)!important}html[data-theme="dark"] .ac-mini-badge.full{color:#90E0EF!important}html[data-theme="dark"] .ac-mini-badge.limited{color:#48CAE4!important}
@media(max-width:920px){.ac-account-summary{align-items:flex-start;flex-direction:column}.ac-account-actions{max-width:none;width:100%;justify-content:flex-start}.ac-section-list{grid-template-columns:minmax(0,1fr);padding-left:24px}.ac-page-title{white-space:normal}}

/* ---------- Forms page header - light palette variant ----------
   The global .pt-strip is the deep navy gradient; the Forms page uses the
   light surface palette instead. Scoped by page id so every other header
   keeps the navy look. */
#page-intakeForm .pt-strip{background:linear-gradient(135deg,#FFFFFF 0%,var(--al) 100%)!important;border:1px solid var(--border)!important;box-shadow:0 10px 26px rgba(2,62,138,.10),inset 0 1px 0 rgba(255,255,255,.8)!important;color:var(--text)}
#page-intakeForm .pt-strip::after{background:rgba(0,119,182,.06)}
#page-intakeForm .pt-strip::before{background:rgba(0,119,182,.04)}
#page-intakeForm .pt-strip .pt-n{color:var(--text)}
#page-intakeForm .pt-strip .pt-av{background:var(--al)!important;color:var(--accent)!important;border:1px solid var(--border2)!important;box-shadow:none!important}
html[data-theme="dark"] #page-intakeForm .pt-strip{background:var(--surface)!important;border-color:var(--border)!important;color:var(--text);box-shadow:none!important}
html[data-theme="dark"] #page-intakeForm .pt-strip .pt-av{background:var(--s2)!important;color:#ADE8F4!important;border-color:var(--border)!important}

/* ---------- Appointment Configs ----------
   Matches the portal's own premium-minimal language (soft accent panels,
   pill toggles, icon badges) rather than the plain EHR grid this replaces. */
.acfg-pad{padding:18px 20px 22px}

/* The create/edit form sits on its own soft tinted panel, visually distinct
   from the browse table below it - same idea as .pld-card / .doc-sub-banner. */
.acfg-form-panel{background:linear-gradient(160deg,var(--s2),var(--surface) 70%);border:1px solid var(--border);border-radius:16px;padding:20px 22px 18px;margin-bottom:22px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
html[data-theme="dark"] .acfg-form-panel{background:var(--s2);box-shadow:none}

.acfg-section-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.acfg-section-ico{flex:none;width:32px;height:32px;border-radius:10px;background:var(--al);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,119,182,.16),inset 0 1px 0 rgba(255,255,255,.5)}
.acfg-section-ico svg{width:17px;height:17px}
.acfg-section-title{font-size:15px;font-weight:900;color:var(--text);letter-spacing:-.01em}
html[data-theme="dark"] .acfg-section-ico{background:rgba(72,202,228,.14);color:#ADE8F4;box-shadow:none}

.acfg-checkrow{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.acfg-form-actions{display:flex;justify-content:flex-end;gap:8px}

/* Pill toggle chip - reuses the fts-item/msg-form-item language app-wide, but
   sized for a dense row of flags rather than a full-width checklist tile. */
.acfg-chk{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);transition:border-color .12s,background .12s,color .12s,box-shadow .12s}
.acfg-chk:hover{border-color:var(--accent);color:var(--text)}
.acfg-chk:has(input:checked){border-color:var(--accent);background:var(--al);color:var(--accent);box-shadow:0 2px 8px rgba(0,119,182,.12)}
.acfg-chk input{width:14px;height:14px;flex:none;cursor:pointer;accent-color:var(--accent)}
.acfg-chk.is-disabled{opacity:.55;cursor:not-allowed}
.acfg-chk.is-disabled input{cursor:not-allowed}
html[data-theme="dark"] .acfg-chk{background:var(--s2)}
html[data-theme="dark"] .acfg-chk:has(input:checked){background:rgba(72,202,228,.14);color:#ADE8F4}

.acfg-inline-check{display:flex;align-items:center;min-height:38px}

/* Compact multi-select dropdown (Scheduler -> Facility) - one line, same
   height/border/radius as the select boxes on either side of it. */
.acfg-msel{position:relative}
.acfg-msel-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:8px 11px;cursor:pointer;text-align:left;transition:border-color .15s}
.acfg-msel-btn:hover{border-color:var(--accent)}
.acfg-msel.open .acfg-msel-btn{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,119,182,.14)}
.acfg-msel-btn svg{flex:none;width:15px;height:15px;color:var(--muted);transition:transform .15s}
.acfg-msel.open .acfg-msel-btn svg{transform:rotate(180deg)}
.acfg-msel-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;display:none;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:0 14px 32px rgba(0,0,0,.14);padding:6px}
.acfg-msel.open .acfg-msel-panel{display:block}
.acfg-msel-row{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text)}
.acfg-msel-row:hover{background:var(--al)}
.acfg-msel-row input{width:14px;height:14px;flex:none;cursor:pointer;accent-color:var(--accent)}
html[data-theme="dark"] .acfg-msel-btn{background:var(--s2)}
html[data-theme="dark"] .acfg-msel-panel{background:var(--s2);box-shadow:0 16px 40px rgba(0,0,0,.5)}

/* Color select + live swatch preview */
.acfg-color-row{display:flex;align-items:center;gap:9px}
.acfg-color-row select{flex:1}
.acfg-swatch-lg{flex:none;width:22px;height:22px;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.35)}

/* Full color picker (Color Legend custom statuses only - these are
   reference-only rows, unlike Visit Type colors which stay palette-locked). */
.acfg-color-native{flex:none;width:42px;height:38px;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer}
.acfg-color-native::-webkit-color-swatch-wrapper{padding:2px}
.acfg-color-native::-webkit-color-swatch{border:none;border-radius:5px}
.acfg-color-hex{flex:1;font-family:'DM Mono',monospace;text-transform:uppercase}

/* Browse table */
.acfg-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px}
.acfg-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:760px}
.acfg-table th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--s2);padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.acfg-table td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.acfg-table tbody tr:last-child td{border-bottom:none}
.acfg-table tbody tr{transition:background .12s}
.acfg-table tbody tr:nth-child(even){background:rgba(0,119,182,.02)}
.acfg-table tbody tr:hover{background:var(--al)}
.acfg-off td{opacity:.5}
.acfg-swatch{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:middle;border:1px solid rgba(0,0,0,.15)}
.acfg-legend-bar{display:inline-block;width:30px;height:13px;border-radius:4px;vertical-align:middle;margin-right:7px;border:1px solid rgba(0,0,0,.15)}
.acfg-row-active{background:var(--al)}
html[data-theme="dark"] .acfg-row-active{background:rgba(72,202,228,.1)}
.acfg-badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--al);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.acfg-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.acfg-del{color:var(--red)}
.acfg-flags{font-size:11px;color:var(--muted)}
html[data-theme="dark"] .acfg-table th{background:var(--s2)}
html[data-theme="dark"] .acfg-table tbody tr:nth-child(even){background:rgba(72,202,228,.03)}
html[data-theme="dark"] .acfg-table tbody tr:hover{background:rgba(72,202,228,.1)}

/* Employee Order For RS - drag-to-reorder rows, and the shared
   title+action-button header used by that tab and Default Facility For RS */
.acfg-order-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.acfg-order-head strong{font-size:13px}
.acfg-drag-row{cursor:grab}
.acfg-drag-row:active{cursor:grabbing}
.acfg-drag-handle{width:26px;color:var(--faint);font-size:15px;letter-spacing:-2px;text-align:center}

/* Classes / Services policy settings */
.acfg-settings-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:22px}
.acfg-settings-headcopy{display:flex;flex-direction:column;gap:3px}
.acfg-settings-headcopy strong{font-size:15px;font-weight:900;color:var(--text);letter-spacing:-.01em}
.acfg-settings-headcopy span{font-size:11.5px;color:var(--muted);line-height:1.5;max-width:520px}

.acfg-toggle-list{border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:24px;background:var(--surface)}
.acfg-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.acfg-toggle-row:last-child{border-bottom:0}
.acfg-toggle-row:hover{background:var(--s2)}
.acfg-toggle-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.acfg-toggle-copy strong{font-size:12.5px;font-weight:700;color:var(--text)}
.acfg-toggle-copy small{font-size:10.5px;color:var(--muted);font-weight:500}
.acfg-toggle-switch{position:relative;width:38px;height:22px;flex:none}
.acfg-toggle-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.acfg-toggle-switch i{position:absolute;inset:0;background:var(--border2);border-radius:999px;transition:background .15s;pointer-events:none}
.acfg-toggle-switch i::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .15s}
.acfg-toggle-switch input:checked+i{background:var(--accent)}
.acfg-toggle-switch input:checked+i::after{transform:translateX(16px)}
.acfg-toggle-switch input:focus-visible+i{box-shadow:0 0 0 3px rgba(0,119,182,.25)}

.acfg-policy-list{display:flex;flex-direction:column;gap:12px}
.acfg-policy-card{display:flex;gap:13px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--s2)}
.acfg-policy-ico{flex:none;width:32px;height:32px;border-radius:10px;background:var(--al);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px}
.acfg-policy-copy{min-width:0}
.acfg-policy-copy>strong{display:block;font-size:11.5px;font-weight:800;color:var(--text);margin-bottom:5px}
.acfg-policy-row{font-size:12.5px;color:var(--text);display:flex;align-items:center;flex-wrap:wrap;gap:6px;line-height:1.8}
.acfg-policy-row input[type=number]{width:62px;flex:none;text-align:center;padding:6px 4px}
.acfg-policy-row select{width:auto;flex:none;padding:6px 26px 6px 10px}
html[data-theme="dark"] .acfg-toggle-switch i{background:var(--border)}
html[data-theme="dark"] .acfg-policy-card{background:var(--s3)}

.acfg-role-picker{padding:13px 16px;border-top:1px solid var(--border)}
.acfg-role-picker-label{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px}
.acfg-role-pills{display:flex;flex-wrap:wrap;gap:8px}
.acfg-role-pill{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--s2);border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.acfg-role-pill input{position:absolute;opacity:0;width:0;height:0}
.acfg-role-pill:has(input:checked){background:var(--al);color:var(--accent);border-color:transparent}
.acfg-role-pill:has(input:disabled){opacity:.5;cursor:default}
.acfg-role-pill:has(input:focus-visible){box-shadow:0 0 0 3px rgba(0,119,182,.25)}
html[data-theme="dark"] .acfg-role-pill{background:var(--s3)}

/* Encounter Visit Type Count / Order Set / PlanSet - dual visit-type
   checklists with a search filter, plus a side panel for the pick + save */
.acfg-dual-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(220px,260px);gap:16px;align-items:start;margin-bottom:18px}
.acfg-vtbox{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.acfg-vtbox-hd{font-size:11px;font-weight:800;padding:10px 12px;background:var(--s2);border-bottom:1px solid var(--border)}
.acfg-vtbox-filter{width:100%;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:9px 12px}
.acfg-vtbox-list{max-height:260px;overflow-y:auto;padding:4px}
.acfg-vtchk-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:12.5px;cursor:pointer}
.acfg-vtchk-row:hover{background:var(--al)}
.acfg-vtbox-side{display:flex;flex-direction:column;gap:13px}
.acfg-inline-add{display:flex;gap:6px}
.acfg-inline-add input{flex:1;min-width:0}
.acfg-details-empty{font-size:11px;color:var(--muted);padding:14px 10px;text-align:center}
@media(max-width:1000px){.acfg-dual-panel{grid-template-columns:minmax(0,1fr)}}

/* Visit Type / Eligibility sub-tabs */
.acfg-subtabs{display:flex;gap:4px;padding:14px 20px 0;border-bottom:1px solid var(--border)}
.acfg-subtab{padding:9px 18px;border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;background:var(--s2);color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:color .12s,background .12s}
.acfg-subtab:hover{color:var(--accent)}
.acfg-subtab.active{background:var(--surface);color:var(--accent);position:relative;top:1px}
html[data-theme="dark"] .acfg-subtab{background:var(--s2);border-color:var(--border)}
html[data-theme="dark"] .acfg-subtab.active{background:var(--surface);color:#ADE8F4}

/* ---------- Working Hours ---------- */
.acfg-wh-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;align-items:start}
.acfg-wh-form{min-width:0}
.acfg-quickadd{display:flex;gap:6px;margin-top:8px}
.acfg-quickadd input{flex:1}
.acfg-wh-list-wrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.acfg-wh-list-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;padding:9px 12px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--s2);border-bottom:1px solid var(--border)}
.acfg-wh-list-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;padding:9px 12px;font-size:12px;color:var(--text);border-bottom:1px solid var(--border);align-items:center}
.acfg-wh-list-row:last-child{border-bottom:none}
.acfg-wh-list-row.is-active{background:var(--al)}
.acfg-wh-list-actions{display:flex;gap:8px;white-space:nowrap}
.acfg-wh-list-actions a{color:var(--accent);font-size:11px;font-weight:700;cursor:pointer;text-decoration:none}
.acfg-wh-list-actions a:hover{text-decoration:underline}
.acfg-wh-list-actions a.acfg-del{color:var(--red)}
.acfg-wh-daytable td{padding:8px 12px}
.acfg-wh-day{font-weight:800;font-size:11px;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.acfg-wh-daytable .date-field input{min-width:110px}
.acfg-wh-excl{text-align:center}
.acfg-wh-excl input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.acfg-dur-input{width:90px}
.acfg-dur-status{width:110px}
html[data-theme="dark"] .acfg-wh-list-hd{background:var(--s2)}
html[data-theme="dark"] .acfg-wh-list-row.is-active{background:rgba(72,202,228,.12)}
@media(max-width:860px){.acfg-wh-layout{grid-template-columns:minmax(0,1fr)}}

/* Visit Group Durations - three searchable/selectable columns */
.acfg-vg-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 200px;gap:16px;margin-bottom:16px}
.acfg-vg-col-hd{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.acfg-vg-search{margin-bottom:8px}
.acfg-vg-list{border:1px solid var(--border);border-radius:11px;background:var(--surface);max-height:260px;overflow-y:auto;padding:4px}
.acfg-vg-slots .acfg-vg-slot-row{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text)}
.acfg-vg-slots .acfg-vg-slot-row:hover{background:var(--al)}
.acfg-vg-slots .acfg-vg-slot-row:has(input:checked){background:var(--al);color:var(--accent);font-weight:700}
.acfg-vg-slot-row input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
html[data-theme="dark"] .acfg-vg-list{background:var(--s2)}
@media(max-width:900px){.acfg-vg-cols{grid-template-columns:minmax(0,1fr)}}

/* ============================================================================
   PATIENT ENCOUNTERS - read-only management view over appointments
   ============================================================================ */
.enc-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.enc-topbar-title{font-size:18px;font-weight:900;letter-spacing:-.02em;color:var(--text)}
.enc-topbar-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.enc-icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.enc-icon-btn:hover{background:var(--al);color:var(--accent);border-color:var(--accent)}
.enc-icon-btn svg{width:16px;height:16px}

.enc-filter-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:visible;box-shadow:var(--e2,0 2px 10px rgba(15,23,42,.05));margin-bottom:16px}
.enc-filter-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border:0;border-radius:16px 16px 0 0;background:linear-gradient(135deg,var(--accent),#023E8A);color:#fff;font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.02em;cursor:pointer}
.enc-filter-head:not(.open){border-radius:16px}
.enc-filter-head svg{width:16px;height:16px;transition:transform .2s}
.enc-filter-head.open svg{transform:rotate(180deg)}
.enc-filter-body{padding:18px 20px 16px}
.enc-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 26px}
.enc-col{display:flex;flex-direction:column;gap:11px}
.enc-field{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:10px}
.enc-field>label{font-size:11.5px;font-weight:600;color:var(--muted);text-align:left;text-transform:none;letter-spacing:0;line-height:1.3;margin:0;min-height:0;display:block}
.enc-field input[type=text],.enc-field select{width:100%;box-sizing:border-box;height:34px;padding:6px 10px;font-size:12.5px}
.enc-field .acfg-msel-btn{height:34px;padding:6px 10px;font-size:12.5px;border-radius:7px}
.enc-field-inline{grid-template-columns:120px auto}
.enc-field-inline input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.enc-field-radios{grid-column:1/-1;grid-template-columns:minmax(0,1fr)}
.enc-radio-row{display:flex;gap:22px;flex-wrap:wrap;padding:2px 0}
.enc-radio-row label{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--text);cursor:pointer;text-transform:none;letter-spacing:0;min-height:0}
.enc-radio-row input{accent-color:var(--accent);cursor:pointer}
.enc-range{display:flex;align-items:center;gap:6px}
.enc-range span{font-size:10.5px;color:var(--muted);font-weight:600}
.enc-range input{min-width:0}
.enc-icd{background:#FFFBE6!important;border-color:#F5D97A!important;color:#8A6D00!important;font-style:italic}
html[data-theme="dark"] .enc-icd{background:rgba(245,197,24,.12)!important;border-color:rgba(245,197,24,.35)!important;color:#F5D97A!important}
.enc-filter-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}

.enc-results-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.enc-totals{font-size:12.5px;color:var(--text)}
.enc-totals strong{color:var(--muted);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.enc-results-actions{display:flex;gap:7px}

.enc-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.enc-table{width:100%;border-collapse:collapse;font-size:12px;min-width:1100px}
.enc-table th{position:sticky;top:0;text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--s2);padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;z-index:1}
.enc-table td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text);white-space:nowrap;vertical-align:middle}
.enc-table tbody tr:last-child td{border-bottom:none}
.enc-table tbody tr:nth-child(even){background:rgba(0,119,182,.02)}
.enc-table tbody tr:hover{background:var(--al)}
.enc-th-actions{min-width:150px}
.enc-th-select{width:34px}
/* CPT codes can still be a long comma-joined string once populated - wrap it
   instead of forcing a single endless line. ICD codes no longer render
   inline at all (see .enc-icd-btn below), so every row stays a uniform,
   evenly-aligned single line regardless of how many diagnosis codes it has. */
.enc-col-cptCodes{white-space:normal!important;max-width:340px;min-width:240px}
/* Compact "See ICD Codes (N)" button - opens the full list in a popup
   (encViewIcdCodes/encShowIcdModal) instead of inflating the row. */
.enc-icd-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid rgba(0,119,182,.24);border-radius:999px;background:rgba(0,119,182,.06);color:var(--accent);font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s}
.enc-icd-btn:hover{background:rgba(0,119,182,.14);border-color:rgba(0,119,182,.4)}
html[data-theme="dark"] .enc-icd-btn{background:rgba(72,202,228,.10);border-color:rgba(72,202,228,.28);color:#ADE8F4}
html[data-theme="dark"] .enc-icd-btn:hover{background:rgba(72,202,228,.18)}
/* Chip list rendered inside the ICD Codes modal */
.enc-icd-chips{display:flex;flex-direction:column;gap:7px}
.enc-icd-chip{display:flex;align-items:baseline;gap:9px;padding:8px 11px;border:1px solid rgba(0,119,182,.14);border-radius:9px;background:rgba(0,119,182,.04)}
.enc-icd-chip-code{flex:none;font-family:'DM Mono',monospace;font-size:11px;font-weight:800;color:var(--accent);background:rgba(0,119,182,.12);border-radius:5px;padding:2px 7px;white-space:nowrap}
.enc-icd-chip-desc{font-size:12.5px;line-height:1.5;color:var(--text);word-break:break-word}
html[data-theme="dark"] .enc-icd-chip{background:rgba(72,202,228,.06);border-color:rgba(72,202,228,.16)}
html[data-theme="dark"] .enc-icd-chip-code{background:rgba(72,202,228,.16);color:#ADE8F4}
.enc-links{display:flex;gap:9px;white-space:nowrap}
.enc-links a{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:none;font-size:11px}
.enc-links a:hover{text-decoration:underline}
.enc-note-status{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(245,197,24,.16);color:#8A6D00;font-size:10px;font-weight:700}
html[data-theme="dark"] .enc-note-status{background:rgba(245,197,24,.14);color:#F5D97A}
.enc-dash{color:var(--faint)}
.enc-empty{text-align:center;color:var(--muted);padding:34px 18px!important;font-size:12.5px}
.enc-table input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.enc-cols-panel{min-width:210px;left:auto;right:0}
.enc-col-checkall{border-bottom:1px solid var(--border);margin-bottom:4px;font-weight:800}
/* The shared .acfg-msel-panel uses translucent --surface, which let the page
   bleed through here; the encounters dropdowns need a solid, scrollable menu.
   Also cancel the portal-wide uppercase-label rule so option text (which sits
   inside a <label>) reads in normal case. */
#encMount .acfg-msel-panel{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;max-height:300px;overflow-y:auto;box-shadow:0 16px 40px rgba(15,23,42,.22);border-color:var(--border2)}
#encMount .acfg-msel-row{text-transform:none;letter-spacing:0;font-weight:500;min-height:0}
#encMount .acfg-msel-row span{text-transform:none;letter-spacing:0}
#encMount .acfg-msel-btn span{text-transform:none;letter-spacing:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme="dark"] #encMount .acfg-msel-panel{background:#131B30;border-color:rgba(199,210,254,.18)}
#chkTable{min-width:0;table-layout:fixed}
#chkTable td,#chkTable th{white-space:normal;word-break:break-word}
html[data-theme="dark"] .enc-table th{background:var(--s2)}
html[data-theme="dark"] .enc-table tbody tr:nth-child(even){background:rgba(72,202,228,.03)}
html[data-theme="dark"] .enc-table tbody tr:hover{background:rgba(72,202,228,.1)}
@media(max-width:1100px){.enc-filter-grid{grid-template-columns:minmax(0,1fr)}.enc-field{grid-template-columns:130px minmax(0,1fr)}}

/* ============================================================================
   NOTIFICATION - SMS/Email notification settings (under Invite Patient)
   ============================================================================ */
/* Amber is the neutral/checking state. The notice now reports real server
   capability, so it needs a "this is fine" colour as well as a warning one
   a permanent amber banner on a correctly configured system is noise that
   teaches people to ignore the banner. */
.notif-notice{display:flex;align-items:flex-start;gap:9px;background:var(--aml);color:var(--amber);border-radius:10px;padding:11px 14px;font-size:12px;font-weight:600;line-height:1.5;margin-bottom:18px}
.notif-notice svg{flex:none;margin-top:1px}
.notif-notice-ok{background:rgba(63,174,99,.10);color:#2c8a4b}
.notif-notice-warn{background:rgba(224,52,42,.09);color:#c0291f}
.notif-notice strong{font-weight:800}

/* ============================================================================
   CONTACTS - external directory (list + add/edit form)
   ============================================================================ */
.ct-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.ct-tab{border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;background:var(--s2);color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:700;padding:10px 20px;cursor:pointer;transition:color .12s,background .12s;position:relative;top:1px}
.ct-tab:hover{color:var(--text)}
.ct-tab.active{background:var(--surface);color:var(--accent);border-color:var(--border);box-shadow:0 -2px 0 var(--accent) inset}

.ct-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.ct-toolbar-left,.ct-toolbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ct-cat{display:inline-flex;align-items:center;gap:8px}
.ct-cat>span{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;min-height:0}
.ct-cat select{height:34px;padding:6px 10px;font-size:12.5px;min-width:150px}

.ct-alpha{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:12px;padding:8px 10px;background:var(--s2);border:1px solid var(--border);border-radius:12px}
.ct-alpha-btn{min-width:26px;height:26px;padding:0 6px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:background .12s,color .12s}
.ct-alpha-btn:hover{background:var(--al);color:var(--accent)}
.ct-alpha-btn.active{background:linear-gradient(135deg,var(--accent),#023E8A);color:#fff;box-shadow:0 3px 9px rgba(0,119,182,.3)}

.ct-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.ct-table{width:100%;border-collapse:collapse;font-size:12px;min-width:1150px}
.ct-table thead th{text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--s2);padding:9px 11px;border-bottom:1px solid var(--border);white-space:nowrap}
.ct-filter-row th{padding:5px 8px;background:var(--surface);border-bottom:1px solid var(--border)}
.ct-filter-row input{width:100%;min-width:70px;box-sizing:border-box;height:28px;padding:4px 7px;font-size:11px}
.ct-table td{padding:9px 11px;border-bottom:1px solid var(--border);color:var(--text);white-space:nowrap;vertical-align:middle}
.ct-table tbody tr:last-child td{border-bottom:none}
.ct-table tbody tr:nth-child(even){background:rgba(0,119,182,.02)}
.ct-table tbody tr:hover{background:var(--al)}
.ct-th-mini{width:116px}
.ct-td-mini{text-align:center}
.ct-row-actions{display:inline-flex;align-items:center;gap:6px}
.ct-edit-btn,.ct-del-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:7px;background:var(--surface);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.ct-edit-btn{color:var(--accent)}
.ct-edit-btn:hover{background:var(--al);border-color:var(--accent)}
.ct-edit-btn svg{width:14px;height:14px}
.ct-del-btn{color:#E5484D}
.ct-del-btn:hover{background:rgba(229,72,77,.1);border-color:#E5484D}
.ct-del-btn svg{width:14px;height:14px}
.ct-sync-tag{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:var(--al);color:var(--accent);font-size:11px;font-weight:800;cursor:help}
.ct-td-npi a,.ct-links a{color:var(--accent);font-weight:600;cursor:pointer;text-decoration:none;font-size:11px}
.ct-td-npi a:hover{text-decoration:underline}
.ct-dash{color:var(--faint)}
.ct-empty{text-align:center;color:var(--muted);padding:34px 18px!important;font-size:12.5px}
.ct-row-synced{background:var(--al)!important}
.ct-synced-badge{display:inline-flex;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--surface);border:1px solid var(--border2);border-radius:999px;padding:4px 9px;cursor:help}
html[data-theme="dark"] .ct-table thead th{background:var(--s2)}
html[data-theme="dark"] .ct-filter-row th{background:var(--surface)}
html[data-theme="dark"] .ct-table tbody tr:nth-child(even){background:rgba(72,202,228,.03)}
html[data-theme="dark"] .ct-table tbody tr:hover{background:rgba(72,202,228,.1)}

/* Add/Edit Contact form */
.ct-form{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px 22px;box-shadow:var(--e2,0 2px 10px rgba(15,23,42,.05))}
.ct-form-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.ct-form-head-actions{display:flex;gap:8px}
.ct-fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.ct-fld-cat{max-width:240px}
.ct-fld label{font-size:11px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;min-height:0;line-height:1.3;display:block;margin:0}
.ct-fld input,.ct-fld select,.ct-fld textarea{width:100%;box-sizing:border-box;font-size:13px}
.ct-fld input,.ct-fld select{height:36px}
.ct-fld textarea{resize:vertical;min-height:66px;padding:8px 11px}
.ct-sec-hd{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--al);border-radius:8px;padding:8px 12px;margin:20px 0 14px}
.ct-grid{display:grid;gap:14px 18px;margin-bottom:2px;align-items:start}
.ct-grid-name{grid-template-columns:repeat(6,minmax(0,1fr))}
.ct-grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ct-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ct-grid-addr{grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.8fr)}
.ct-form-checks{display:flex;gap:22px;margin:18px 0 6px}
.ct-chk{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;text-transform:none;letter-spacing:0;min-height:0}
.ct-chk input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.ct-form-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
@media(max-width:1000px){.ct-grid-name{grid-template-columns:repeat(3,minmax(0,1fr))}.ct-grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ct-grid-addr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:640px){.ct-grid-name,.ct-grid-2,.ct-grid-3,.ct-grid-addr{grid-template-columns:minmax(0,1fr)}}

/* ============================================================================
   PATIENT CHART - details accordion + notes list + note editor
   ============================================================================ */
.pchrt-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pchrt-topbar-title{font-size:18px;font-weight:900;letter-spacing:-.02em;color:var(--text)}
.pchrt-patient-pick{display:inline-flex;align-items:center;gap:9px}
.pchrt-patient-pick label{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;min-height:0}
.pchrt-patient-pick select{height:36px;min-width:240px;padding:6px 12px;font-size:13px}
.pchrt-noselect{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:60px 24px;color:var(--muted)}
.pchrt-noselect strong{font-size:15px;color:var(--text)}

.pchrt-grid{display:grid;grid-template-columns:280px 300px minmax(0,1fr);gap:16px;align-items:start}
.pchrt-grid-2col{grid-template-columns:300px minmax(0,1fr)}
.pchrt-details,.pchrt-notes,.pchrt-editor{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--e2,0 2px 10px rgba(15,23,42,.05))}
/* Note editor now lives in a modal (#pchrtNoteModal) instead of a permanent
   grid column - the modal already supplies its own card chrome, so strip
   the editor's own border/shadow/min-height to avoid a card-in-a-card look. */
#pchrtNoteModal .pchrt-editor{border:0;box-shadow:none;border-radius:0;min-height:0}
#pchrtNoteModal .pchrt-editor-surface,#pchrtNoteModal .pchrt-editor-area,#pchrtNoteModal .pchrt-editor-html,#pchrtNoteModal .pchrt-editor-preview{min-height:260px}
#pchrtNoteModal .modal{display:flex;flex-direction:column;max-height:88vh}
#pchrtNoteModal .modal-body{overflow:auto}

/* left accordion */
.pchrt-details-head{font-size:12px;font-weight:800;color:var(--text);padding:12px 14px;background:var(--s2);border-bottom:1px solid var(--border)}
.pchrt-details-head span{font-weight:500;color:var(--muted);font-size:10.5px}
.pchrt-acc{border-bottom:1px solid var(--border)}
.pchrt-acc:last-child{border-bottom:0}
.pchrt-acc-head{width:100%;display:flex;align-items:center;gap:8px;padding:11px 14px;border:0;background:transparent;color:var(--text);font-family:inherit;font-size:12.5px;font-weight:650;cursor:pointer;text-align:left;transition:background .12s}
.pchrt-acc-head:hover{background:var(--al)}
.pchrt-acc.open>.pchrt-acc-head{background:var(--al);color:var(--accent)}
.pchrt-acc-head>span:first-child{flex:1;min-width:0}
.pchrt-acc-count{font-size:10px;font-weight:800;color:#fff;background:var(--accent);border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.pchrt-acc-count:empty{display:none}
.pchrt-acc-head svg{width:15px;height:15px;color:var(--muted);transition:transform .18s;flex:none}
.pchrt-acc.open .pchrt-acc-head svg{transform:rotate(180deg)}
.pchrt-acc-body{padding:6px 12px 12px;background:var(--s2)}
.pchrt-acc-empty{font-size:11px;color:var(--muted);padding:8px 2px}
.pchrt-acc-list{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-direction:column;gap:4px}
.pchrt-acc-list li{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:12px}
.pchrt-acc-primary{font-weight:650;color:var(--text)}
.pchrt-acc-secondary{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pchrt-acc-list li:has(.pchrt-acc-secondary) .pchrt-acc-primary{flex:none}
.pchrt-acc-del{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 2px;border-radius:5px}
.pchrt-acc-del:hover{color:var(--red);background:var(--rl)}
.pchrt-acc-add{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px}
.pchrt-acc-add input{height:32px;padding:5px 8px;font-size:12px}

/* Diagnosis top-tab: encounter-level diagnosis list */
.pchrt-dx-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px;padding:14px;background:var(--s2);border:1px solid var(--border);border-radius:12px}
.pchrt-dx-add input,.pchrt-dx-add select{height:34px;padding:6px 10px;font-size:12.5px;width:auto}
.pchrt-dx-add input[type=date]{width:150px}
.pchrt-dx-icd-combo{width:130px;flex:none}
.pchrt-dx-add .pchrt-dx-icd-combo .ar-combo-input{width:100%;box-sizing:border-box}
.pchrt-dx-add input#pchrtDxName{width:180px;flex:1}
.pchrt-dx-add input#pchrtDxSnomed{width:130px}
.pchrt-dx-sync{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--al);color:var(--accent);border-radius:10px;padding:10px 14px;font-size:12px;font-weight:600;margin-bottom:12px}
.pchrt-dx-ace-badge{font-size:9.5px;font-weight:800;letter-spacing:.04em;color:var(--accent);background:var(--al);border-radius:999px;padding:3px 9px}

/* middle notes list */
.pchrt-notes-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:var(--s2);border-bottom:1px solid var(--border);font-size:12px;font-weight:800;color:var(--text)}
.pchrt-notes-empty{padding:22px 16px;font-size:12px;color:var(--muted);font-style:italic}
.pchrt-notes-list{display:flex;flex-direction:column;max-height:640px;overflow-y:auto}
.pchrt-note-row{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;border:0;border-bottom:1px solid var(--border);background:transparent;padding:11px 14px;cursor:pointer;font-family:inherit;transition:background .12s}
.pchrt-note-row:hover{background:var(--al)}
.pchrt-note-row.active{background:var(--al);box-shadow:inset 3px 0 0 var(--accent)}
.pchrt-note-title{font-size:12.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px}
.pchrt-note-signed{font-size:8.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#0A6E3F;background:rgba(10,110,63,.12);border-radius:999px;padding:1px 7px}
.pchrt-note-date{font-size:10.5px;color:var(--muted)}

/* right editor (renders inside the New/Edit Note modal - see #pchrtNoteModal) */
.pchrt-editor{display:flex;flex-direction:column;min-height:520px}
.pchrt-editor-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;padding:14px 20px;background:var(--s2);border-bottom:1px solid var(--border)}
.pchrt-editor-toolbar-left{display:flex;gap:10px;flex-wrap:wrap}
.pchrt-editor-toolbar-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pchrt-select-group{display:flex;flex-direction:column;gap:4px}
.pchrt-select-group>span{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pchrt-select-group select{height:34px;padding:6px 10px;font-size:12.5px;min-width:150px}
.pchrt-toolbar-div{width:1px;align-self:stretch;background:var(--border);margin:0 2px}
.pchrt-signed-chip{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#0A6E3F;background:rgba(10,110,63,.12);border-radius:999px;padding:6px 12px}
.pchrt-note-titlebar{padding:14px 20px;border-bottom:1px solid var(--border)}
.pchrt-note-titlebar input{width:100%;box-sizing:border-box;height:42px;padding:0 4px;border:0;border-bottom:2px solid transparent;border-radius:0;font-size:16px;font-weight:700;background:transparent;transition:border-color .15s}
.pchrt-note-titlebar input:focus{border-bottom-color:var(--accent);box-shadow:none}
.pchrt-format-bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:8px 20px;border-bottom:1px solid var(--border);background:var(--surface)}
.pchrt-fbar-group{display:flex;align-items:center;gap:2px;background:var(--s2);border-radius:8px;padding:2px}
.pchrt-format-bar button{min-width:30px;height:30px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.pchrt-format-bar button:hover{background:var(--surface);border-color:var(--border)}
.pchrt-fbar-select{height:30px;padding:3px 7px;font-size:12px}
.pchrt-fbar-div{width:1px;height:20px;background:var(--border);margin:0 6px}
.pchrt-editor-surface{flex:1;min-height:300px;display:flex}
.pchrt-editor-area,.pchrt-editor-html,.pchrt-editor-preview{flex:1;width:100%;box-sizing:border-box;padding:16px 18px;font-size:13.5px;line-height:1.6;color:var(--text);overflow-y:auto;min-height:300px}
.pchrt-editor-area{outline:none}
.pchrt-editor-area:focus{background:rgba(0,119,182,.015)}
.pchrt-editor-area:empty::before{content:'Start typing the clinical note…';color:var(--faint)}
.pchrt-editor-html{border:0;resize:none;font-family:'DM Mono',monospace;font-size:12px;background:var(--s2)}
.pchrt-editor-preview .pchrt-dim,.pchrt-dim{color:var(--faint)}
.pchrt-editor-tabs{display:flex;gap:4px;padding:8px 12px;border-top:1px solid var(--border);background:var(--s2)}
.pchrt-etab{border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700;padding:6px 14px;cursor:pointer;transition:background .12s,color .12s}
.pchrt-etab:hover{color:var(--text)}
.pchrt-etab.active{background:linear-gradient(135deg,var(--accent),#023E8A);color:#fff;border-color:transparent}
html[data-theme="dark"] .pchrt-details-head,html[data-theme="dark"] .pchrt-notes-head,html[data-theme="dark"] .pchrt-editor-toolbar,html[data-theme="dark"] .pchrt-acc-body,html[data-theme="dark"] .pchrt-editor-tabs{background:var(--s2)}
@media(max-width:720px){.pchrt-grid,.pchrt-grid-2col{grid-template-columns:minmax(0,1fr)}}

/* Registration list: a filterable, paginated grid over the patient roster.
   Full-bleed workspace page with a fixed header and toolbar and the table
   filling the rest of the viewport, matching Internal Messaging's full-screen
   treatment rather than sitting in the default 900px centred .wrap. */
#page-registrationList.active{height:calc(100vh - 54px);overflow:hidden;display:flex;flex-direction:column}
#page-registrationList .wrap{max-width:none!important;width:100%;box-sizing:border-box;margin:0;padding:20px 26px 18px;flex:1;min-height:0;display:flex;flex-direction:column}
#regListMount{flex:1;min-height:0;display:flex;flex-direction:column}
.rl-page{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px}

.rl-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;flex:0 0 auto}
.rl-header-title{font-size:19px;font-weight:900;letter-spacing:-.02em;color:var(--text)}
.rl-header-sub{font-size:12px;color:var(--muted);margin-top:2px}
.rl-tags{display:flex;gap:8px}
.rl-tag{border:0;border-radius:9px;padding:9px 18px;font-family:inherit;font-size:11.5px;font-weight:800;letter-spacing:.02em;cursor:pointer;color:#fff;opacity:.55;transition:opacity .15s,transform .15s,box-shadow .15s}
.rl-tag:hover{opacity:.85;transform:translateY(-1px)}
.rl-tag.active{opacity:1;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.rl-tag-missing{background:linear-gradient(135deg,#E8112D,#B22222)}
.rl-tag-verify{background:linear-gradient(135deg,#F5D913,#F5C518);color:#4A3B00}

.rl-toolbar-card{flex:0 0 auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--e2,0 2px 10px rgba(15,23,42,.05));padding:14px 18px}
.rl-toolbar-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rl-toolbar-row-2{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);gap:26px}
.rl-toolbar-div{width:1px;height:22px;background:var(--border);margin:0 3px}
.rl-toolbar-spacer{flex:1}
.rl-lock{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:var(--text)}
.rl-lock span{text-transform:none;letter-spacing:0;min-height:0}
.rl-switch{position:relative;width:38px;height:22px;border:0;border-radius:999px;background:var(--border2);cursor:pointer;padding:0;flex:none}
.rl-switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .15s}
.rl-switch.on{background:var(--accent)}
.rl-switch.on i{transform:translateX(16px)}
.rl-special{display:flex;flex-direction:column;gap:4px}
.rl-special-kicker{font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);min-height:0}
.rl-special-lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;min-height:0}
.rl-special select{height:34px;padding:6px 10px;font-size:12.5px;min-width:210px;margin-top:2px}

.rl-table-wrap{flex:1;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--e2,0 2px 10px rgba(15,23,42,.05))}
.rl-table{width:100%;border-collapse:collapse;font-size:12px;min-width:2000px}
.rl-table thead th{position:sticky;top:0;text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--s2);padding:10px 11px;border-bottom:1px solid var(--border);white-space:nowrap;z-index:2}
.rl-table thead th.rl-sortable{cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .12s,color .12s}
.rl-table thead th.rl-sortable:hover{background:var(--al);color:var(--accent)}
.rl-table thead th.rl-sorted{color:var(--accent)}
.rl-sort-ind{margin-left:3px;font-size:8px;color:var(--accent);vertical-align:middle}
html[data-theme="dark"] .rl-table thead th.rl-sortable:hover{background:rgba(72,202,228,.12)}
.rl-filter-row th{padding:6px 8px;background:var(--surface);top:33px}
.rl-filter-row input,.rl-filter-row select{width:100%;min-width:80px;box-sizing:border-box;height:28px;padding:4px 7px;font-size:11px}
.rl-table td{padding:9px 11px;border-bottom:1px solid var(--border);color:var(--text);white-space:nowrap;vertical-align:middle}
.rl-table tbody tr:last-child td{border-bottom:none}
.rl-table tbody tr:nth-child(even){background:rgba(0,119,182,.02)}
.rl-table tbody tr:hover{background:var(--al)}
.rl-name-cell a{color:var(--accent);font-weight:700;cursor:pointer;text-decoration:none}
.rl-name-cell a:hover{text-decoration:underline}
.rl-sticky{position:sticky;left:0;background:var(--surface);z-index:1;box-shadow:2px 0 0 var(--border)}
thead .rl-sticky{z-index:3;background:var(--s2)}
.rl-table tbody tr:nth-child(even) .rl-sticky{background:#F4F9FC}
.rl-dash-cell{color:var(--faint)}
.rl-dash{color:var(--faint)}
.rl-ellipsis{max-width:150px;overflow:hidden;text-overflow:ellipsis}
.rl-payer-cell{color:#8A6D00;background:rgba(245,197,24,.16);font-weight:700;border-radius:999px!important;display:inline-block;padding:3px 10px!important;margin:4px 0}
.rl-empty{text-align:center;color:var(--muted);padding:34px 18px!important;font-size:12.5px}
html[data-theme="dark"] .rl-table thead th,html[data-theme="dark"] .rl-filter-row th,html[data-theme="dark"] .rl-sticky{background:var(--s2)}
html[data-theme="dark"] .rl-table tbody tr:nth-child(even){background:rgba(72,202,228,.03)}
html[data-theme="dark"] .rl-table tbody tr:nth-child(even) .rl-sticky{background:var(--s2)}
html[data-theme="dark"] .rl-table tbody tr:hover{background:rgba(72,202,228,.1)}
html[data-theme="dark"] .rl-payer-cell{background:rgba(245,197,24,.14);color:#F5D97A}

.rl-pagebar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rl-page-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.rl-page-nav button{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:background .12s,color .12s}
.rl-page-nav button:hover:not(:disabled){background:var(--al);color:var(--accent)}
.rl-page-nav button.active{background:linear-gradient(135deg,var(--accent),#023E8A);color:#fff;border-color:transparent}
.rl-page-nav button:disabled{opacity:.4;cursor:not-allowed}
.rl-page-nav select{height:30px;padding:3px 8px;font-size:12px;margin-left:10px}
.rl-page-nav span{font-size:11.5px;color:var(--muted);margin-left:6px}
.rl-page-count{font-size:11.5px;color:var(--muted)}
@media(max-width:1000px){.rl-header{flex-direction:column;align-items:stretch}.rl-toolbar-row-2{flex-direction:column;align-items:stretch;gap:14px}.rl-special select{width:100%}}

/* ============================================================================
   INTERNAL MESSAGING - Teams-style localStorage prototype
   ============================================================================ */
.im-sidebar-unread{margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:999px;background:#E8112D;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;line-height:1}
body.internal-messaging-active{overflow:hidden}
#page-internalMessaging.active{display:block;height:calc(100vh - 54px);overflow:hidden}
#page-internalMessaging.active{
  background:
    radial-gradient(720px 540px at 8% 0%,rgba(0,119,182,.16),transparent 60%),
    radial-gradient(780px 580px at 96% 12%,rgba(0,180,216,.14),transparent 60%),
    radial-gradient(640px 560px at 68% 100%,rgba(0,180,216,.11),transparent 60%),
    var(--bg);
}
html[data-theme="dark"] #page-internalMessaging.active{
  background:
    radial-gradient(720px 540px at 8% 0%,rgba(0,119,182,.36),transparent 58%),
    radial-gradient(780px 580px at 96% 12%,rgba(0,180,216,.34),transparent 58%),
    radial-gradient(640px 560px at 68% 100%,rgba(0,180,216,.24),transparent 60%),
    #0A0F23;
}
.im-page-shell{height:100%;display:grid;grid-template-columns:310px minmax(0,1fr) 300px;background:transparent;border-top:1px solid rgba(255,255,255,.4);overflow:hidden;position:relative}
.im-left-panel,.im-main-panel,.im-details-panel{min-width:0;min-height:0;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(22px) saturate(165%);backdrop-filter:blur(22px) saturate(165%)}
.im-left-panel{border-right:1px solid rgba(255,255,255,.5);display:flex;flex-direction:column;background:rgba(255,255,255,.34)}
.im-left-head{height:72px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.im-kicker{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:2px}
.im-left-title{font-size:17px;font-weight:800;letter-spacing:-.025em;color:var(--text)}
.im-icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer;font:inherit;transition:background .15s,border-color .15s,color .15s,transform .15s}
.im-icon-btn:hover:not(:disabled){background:var(--al);border-color:var(--accent);color:var(--accent)}
.im-icon-btn:active:not(:disabled){transform:scale(.96)}
.im-icon-btn:disabled{opacity:.4;cursor:not-allowed}
.im-icon-btn svg{width:17px;height:17px;stroke-linecap:round;stroke-linejoin:round}
.im-new-chat-btn{background:var(--accent);border-color:var(--accent);color:#fff}
.im-new-chat-btn:hover:not(:disabled){background:#023E8A;color:#fff}
.im-search-wrap{position:relative;display:flex;align-items:center;margin:12px 12px 9px}
.im-search-wrap>svg{position:absolute;left:11px;width:15px;height:15px;color:var(--muted);pointer-events:none}
.im-search-wrap input{height:38px;padding:8px 38px 8px 34px;background:var(--surface);border-radius:9px;font-size:12px}
.im-search-wrap>button{position:absolute;right:5px;width:27px;height:27px;border:0;background:transparent;color:var(--muted);font-size:19px;cursor:pointer;border-radius:6px}
.im-search-wrap>button:hover{background:var(--s3);color:var(--text)}
.im-conversation-list{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 12px;scrollbar-width:thin}
.im-conversation-row{width:100%;border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 9px;border-radius:10px;cursor:pointer;text-align:left;font:inherit;margin:1px 0;transition:background .12s,box-shadow .12s}
.im-conversation-row:hover{background:rgba(255,255,255,.55)}
.im-conversation-row.active{background:rgba(255,255,255,.72);box-shadow:0 4px 16px rgba(3,4,94,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.im-conversation-row.unread .im-conversation-name{font-weight:800}
.im-avatar{width:40px;height:40px;flex:0 0 auto;border-radius:50%;background:linear-gradient(145deg,var(--accent),#023E8A);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.02em;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.im-avatar-small{width:40px;height:40px}
.im-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.im-presence-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border:2px solid var(--surface);border-radius:50%;background:var(--faint)}
.im-presence-dot.online{background:#22A06B}
.im-conversation-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.im-conversation-name{font-size:12.5px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-conversation-preview{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-mini-icon{font-size:9px;margin-left:5px;vertical-align:1px}
.im-conversation-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;align-self:stretch;padding-top:1px}
.im-conversation-meta time{font-size:9.5px;color:var(--faint);white-space:nowrap}
.im-conversation-meta b{min-width:18px;height:18px;border-radius:999px;padding:0 5px;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:9px}
.im-list-empty{padding:30px 18px;text-align:center;color:var(--muted);font-size:12px;line-height:1.6}
.im-main-panel{display:flex;min-width:0;position:relative;background:rgba(255,255,255,.42)}
.im-chat-empty{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--muted);text-align:center;padding:30px}
.im-chat-empty strong{font-size:15px;color:var(--text)}
.im-chat-empty span{font-size:12px}
.im-empty-art{width:72px;height:72px;border-radius:24px;background:var(--al);display:flex;align-items:center;justify-content:center;font-size:31px;margin-bottom:4px}
.im-chat-view{width:100%;min-width:0;display:none;flex-direction:column;min-height:0}
.im-chat-head{height:72px;flex:0 0 72px;padding:10px 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:5}
.im-chat-heading{min-width:0;display:flex;flex-direction:column;gap:2px}
.im-chat-title{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-chat-status{font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.im-status-dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.im-status-dot.online{background:#22A06B}
.im-head-actions{margin-left:auto;display:flex;gap:6px}
.im-head-actions .im-icon-btn:disabled{opacity:.4;cursor:not-allowed}
#imCallBtn.has-live-call{position:relative;color:#22A06B;border-color:rgba(34,160,107,.4);background:rgba(34,160,107,.08)}
#imCallBtn.has-live-call::after{content:'';position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:#22A06B;box-shadow:0 0 0 2px var(--surface);animation:imCallLiveDot 1.6s ease-in-out infinite}
@keyframes imCallLiveDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.im-mobile-back{display:none}

/* ---------- Voice calling ---------- */
.im-call-overlay{position:fixed;inset:0;z-index:2000;pointer-events:none;display:flex;align-items:flex-end;justify-content:center}
.im-call-overlay.show{pointer-events:auto}
/* Minimized: only the small bar itself should catch clicks - the rest of
   the full-viewport overlay div must stay click-through so the portal
   underneath is still usable. */
.im-call-overlay.im-call-active-bar{pointer-events:none}
.im-call-overlay.im-call-active-bar .im-call-bar{pointer-events:auto}
.im-call-overlay.im-call-incoming,.im-call-overlay.im-call-outgoing,.im-call-overlay.im-call-active-modal{
  align-items:center;
  background:radial-gradient(circle at 25% 15%,rgba(0,180,216,.30),transparent 55%),radial-gradient(circle at 80% 85%,rgba(0,119,182,.24),transparent 55%),linear-gradient(160deg,rgba(1,10,28,.94),rgba(0,42,82,.90));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)
}
.im-call-card,.im-call-modal{
  position:relative;border-radius:26px;padding:38px 44px 34px;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 30px 70px rgba(0,10,30,.5),0 0 60px rgba(0,180,216,.12),inset 0 1px 0 rgba(255,255,255,.35);
  animation:imCallCardIn .32s cubic-bezier(.22,1,.36,1) both
}
.im-call-modal{padding:44px 56px 40px;min-width:300px}
@keyframes imCallCardIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.im-call-avatar{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#00B4D8,var(--accent) 55%,#023E8A);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;letter-spacing:.02em;box-shadow:0 8px 28px rgba(0,180,216,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.im-call-avatar.small{width:34px;height:34px;font-size:13px;flex-shrink:0}
.im-call-avatar.big{width:112px;height:112px;font-size:36px}
.im-call-avatar.tiny{width:38px;height:38px;font-size:13px}
.im-call-avatar svg{width:46%;height:46%}
.im-call-roster{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:340px;margin-top:18px}
.im-call-roster-chip{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;color:rgba(255,255,255,.85);font-weight:700;max-width:56px}
.im-call-roster-chip span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.im-call-modal.is-group .im-call-sub{margin-bottom:2px}
.im-call-avatar.pulsing{position:relative}
.im-call-avatar.pulsing::before,.im-call-avatar.pulsing::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(0,180,216,.55);animation:imCallPulse 1.8s ease-out infinite}
.im-call-avatar.pulsing::after{animation-delay:.6s}
@keyframes imCallPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.im-call-name{font-size:19px;font-weight:800;color:#fff;margin-top:14px;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.im-call-sub{font-size:12.5px;color:rgba(255,255,255,.72);font-weight:600}
#imCallDuration.im-call-sub{font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* ---------------- Call shell (meeting layout) ----------------
   Audio-only stays a compact centred card; as soon as a camera is on the
   shell widens into stage + filmstrip + roster panel. */
.im-call-shell{display:flex;flex-direction:column;background:linear-gradient(160deg,#123a63,#0a1f38);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(4,14,26,.5);width:min(420px,94vw);max-height:92vh;transition:width .18s ease}
.im-call-shell.has-video{width:min(1080px,96vw)}
.im-call-head{display:flex;align-items:center;gap:12px;padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,.09)}
.im-call-head-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.im-call-head-copy strong{font-size:14px;font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-call-head-copy span{font-size:11.5px;color:rgba(255,255,255,.62);font-weight:600}
.im-call-body{display:flex;gap:12px;padding:14px 16px;min-height:0;flex:1}
.im-call-shell:not(.has-video) .im-call-body{flex-direction:column}
.im-call-stagewrap{flex:1;min-width:0;display:flex;flex-direction:column}

.im-call-audioface{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 0 8px}

/* Stage: the person on camera, large. */
.im-stage{display:flex;flex-direction:column;gap:10px;min-height:0}
.im-stage-main{position:relative;border-radius:14px;overflow:hidden;background:#08182b;aspect-ratio:16/9;min-height:220px}
.im-stage-name{position:absolute;left:12px;bottom:11px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(6,18,32,.62);padding:5px 12px;border-radius:999px;backdrop-filter:blur(5px)}
.im-stage-timer{position:absolute;left:12px;top:11px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(6,18,32,.62);padding:4px 11px;border-radius:999px;font-variant-numeric:tabular-nums;backdrop-filter:blur(5px)}

/* Filmstrip: everyone else, scrolling sideways rather than shrinking away. */
.im-stage-strip{display:flex;gap:9px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}
.im-stage-thumb{position:relative;flex:0 0 148px;height:92px;border-radius:11px;overflow:hidden;background:#08182b;display:flex;align-items:center;justify-content:center}
.im-stage-thumb.is-audio{background:rgba(255,255,255,.07)}
.im-thumb-name{position:absolute;left:6px;bottom:5px;font-size:10.5px;font-weight:700;color:#fff;background:rgba(6,18,32,.66);padding:2px 8px;border-radius:999px;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-thumb-mic{position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(220,68,68,.9)}
.im-thumb-mic svg{width:11px;height:11px;color:#fff}
.im-stage-thumb.is-self{outline:2px solid rgba(255,255,255,.28);outline-offset:-2px}

.im-call-video-surface{position:absolute;inset:0}
.im-call-video-surface video{width:100%;height:100%;object-fit:cover;display:block}
/* A shared screen must be shown whole - cropping it would cut off exactly the
   edges of the document or slide someone is presenting. */
.im-stage-main.is-screen{background:#04101c}
.im-stage-main.is-screen video{object-fit:contain}
/* Own preview mirrored, as every video app does - an unmirrored self-view
   feels wrong because it doesn't match a mirror. */
.im-stage-thumb.is-self video,.im-stage-main:has(#imCallLocalVideo) video{transform:scaleX(-1)}

/* Roster panel */
.im-call-panel{flex:0 0 232px;display:flex;flex-direction:column;background:rgba(255,255,255,.06);border-radius:14px;overflow:hidden}
.im-call-shell:not(.has-video) .im-call-panel{flex:1 1 auto;max-height:190px}
.im-panel-head{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.08)}
.im-panel-count{background:rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:1px 8px;font-size:11px}
.im-panel-list{overflow-y:auto;padding:6px}
.im-panel-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px}
.im-panel-row:hover{background:rgba(255,255,255,.06)}
.im-panel-name{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-panel-icons{display:flex;gap:5px;flex-shrink:0}
.im-panel-icons i{display:flex;align-items:center;justify-content:center;width:19px;height:19px}
.im-panel-icons i svg{width:13px;height:13px;color:rgba(255,255,255,.85)}
.im-panel-icons i.off svg{color:rgba(255,120,120,.9)}
.im-panel-empty{padding:14px 10px;text-align:center;font-size:11.5px;color:rgba(255,255,255,.55)}
.im-panel-name em{display:block;font-style:normal;font-size:10px;font-weight:700;color:#5ec27a;letter-spacing:.03em}

/* "You're presenting" bar - confirms sharing is live and offers a way to stop
   without hunting for Chrome's own bar, which is easy to lose behind windows. */
.im-presenting-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;margin-bottom:10px;border-radius:10px;background:rgba(94,194,122,.14);border:1px solid rgba(94,194,122,.35);font-size:12.5px;font-weight:600;color:#d8f5e2}
.im-presenting-dot{width:8px;height:8px;border-radius:50%;background:#5ec27a;flex-shrink:0;animation:imPresentPulse 1.8s ease-in-out infinite}
@keyframes imPresentPulse{0%,100%{opacity:1}50%{opacity:.35}}
.im-presenting-bar button{margin-left:auto;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer}
.im-presenting-bar button:hover{background:rgba(255,255,255,.26)}

/* Controls */
.im-call-foot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.09)}
.im-call-foot .im-call-actions{margin-top:0}
.im-call-round-btn.on{background:rgba(255,255,255,.24)}
/* Controls stay visible but inert while the call is still connecting, so the
   panel doesn't shift once they become usable. */
.im-call-round-btn:disabled{opacity:.4;cursor:wait}
.im-call-round-btn:disabled:hover{transform:none}
.im-call-endbtn{display:flex;align-items:center;gap:8px;height:48px;padding:0 22px;border:none;border-radius:999px;background:#e5484d;color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;transition:transform .15s,background .15s}
.im-call-endbtn:hover{background:#d13c41;transform:translateY(-1px)}
.im-call-endbtn svg{width:19px;height:19px;transform:rotate(135deg)}

@media (max-width:820px){
  .im-call-shell.has-video{width:96vw}
  .im-call-body{flex-direction:column}
  .im-call-panel{flex:1 1 auto;max-height:160px}
}

.im-call-mic-select{margin-top:14px;max-width:230px;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:6px 10px;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.im-call-mic-select:focus,.im-call-mic-select:active,.im-call-mic-select:hover{background:rgba(255,255,255,.14);color:#fff;outline:none}
.im-call-mic-select option{color:#111;background:#fff}
.im-call-actions{display:flex;align-items:center;gap:22px;margin-top:26px}
.im-call-btn{width:56px;height:56px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}
.im-call-btn svg{width:24px;height:24px}
.im-call-btn:hover{transform:translateY(-2px) scale(1.06)}
.im-call-btn:active{transform:translateY(0) scale(.95)}
.im-call-btn.accept{background:linear-gradient(135deg,#2FCB8F,#1A9A6B);box-shadow:0 8px 22px rgba(34,160,107,.45)}
.im-call-btn.decline{background:linear-gradient(135deg,#FF6B6B,#E5484D);box-shadow:0 8px 22px rgba(229,72,77,.45)}
.im-call-btn.decline svg{transform:rotate(135deg)}
.im-call-btn.small{width:38px;height:38px}
.im-call-btn.small svg{width:16px;height:16px}
.im-call-round-btn{width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.10);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .15s,border-color .15s,box-shadow .15s}
.im-call-round-btn svg{width:20px;height:20px}
.im-call-round-btn:hover{transform:translateY(-2px) scale(1.05);background:rgba(255,255,255,.18)}
.im-call-round-btn:active{transform:translateY(0) scale(.95)}
.im-call-round-btn.on{background:linear-gradient(135deg,rgba(0,180,216,.55),rgba(0,119,182,.55));border-color:rgba(0,180,216,.7);box-shadow:0 0 0 4px rgba(0,180,216,.14),0 6px 18px rgba(0,119,182,.35)}
.im-call-round-btn.active-danger{background:linear-gradient(135deg,#FF6B6B,#E5484D);border-color:#E5484D;box-shadow:0 6px 18px rgba(229,72,77,.4)}
.im-call-min-btn{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .15s}
.im-call-min-btn svg{width:15px;height:15px}
.im-call-min-btn:hover{background:rgba(255,255,255,.2);transform:scale(1.08)}
.im-call-active-bar{align-items:flex-end;justify-content:flex-end;padding:20px}
.im-call-bar{display:flex;align-items:center;gap:12px;cursor:pointer;
  background:linear-gradient(160deg,rgba(0,42,82,.75),rgba(0,10,28,.75));
  border:1px solid rgba(0,180,216,.35);
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  color:#fff;padding:9px 14px 9px 9px;border-radius:40px;
  box-shadow:0 12px 30px rgba(0,10,30,.4),0 0 30px rgba(0,180,216,.14);
  animation:imCallBarIn .3s cubic-bezier(.22,1,.36,1) both;transition:transform .15s
}
.im-call-bar:hover{transform:translateY(-1px)}
@keyframes imCallBarIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.im-call-bar-copy{display:flex;flex-direction:column;gap:1px;margin-right:4px}
.im-call-bar-copy strong{font-size:12.5px;font-weight:800}
.im-call-bar-copy span{font-size:11px;color:rgba(255,255,255,.65);font-variant-numeric:tabular-nums}
.im-call-mute-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .15s}
.im-call-mute-btn svg{width:15px;height:15px}
.im-call-mute-btn:hover{background:rgba(255,255,255,.18);transform:scale(1.06)}
.im-call-mute-btn.muted{background:linear-gradient(135deg,#FF6B6B,#E5484D);border-color:#E5484D}
.im-call-log-row{display:flex;margin:6px 0}
.im-call-log-row.mine{justify-content:flex-end}
.im-call-log-card{display:flex;align-items:center;gap:12px;max-width:270px;padding:11px 16px 11px 11px;border-radius:18px;
  background:linear-gradient(160deg,#0c1c30,#080e1a);border:1px solid rgba(0,180,216,.22);
  box-shadow:0 6px 18px rgba(0,8,26,.4),0 0 22px rgba(0,119,182,.12),inset 0 1px 0 rgba(255,255,255,.07)}
.im-call-log-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#00B4D8,var(--accent) 55%,#023E8A);color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 4px 12px rgba(0,119,182,.4);transition:transform .15s}
.im-call-log-avatar svg{width:18px;height:18px}
.im-call-log-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.im-call-log-text strong{font-size:13.5px;font-weight:800;color:#fff;line-height:1.25}
.im-call-log-text span{font-size:11.5px;color:rgba(255,255,255,.6);font-weight:600}
.im-call-log-card.im-call-log-declined .im-call-log-avatar svg,
.im-call-log-card.im-call-log-noanswer .im-call-log-avatar svg{transform:rotate(135deg)}
.im-call-log-card.im-call-log-declined .im-call-log-avatar,
.im-call-log-card.im-call-log-noanswer .im-call-log-avatar{filter:saturate(.55) brightness(.9)}
.im-message-search{display:none;flex:0 0 auto;padding:0 10px;border-bottom:1px solid var(--border);background:var(--s2)}
.im-message-search.open{display:block}
.im-message-search .im-search-wrap{margin:8px 0}
.im-message-list{flex:1;min-height:0;overflow-y:auto;padding:12px 24px 16px;scroll-behavior:smooth;scrollbar-width:thin;background:transparent}
.im-message-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;text-align:center;padding:30px}
.im-date-divider{display:flex;align-items:center;gap:10px;margin:13px 0 10px;color:var(--muted);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.im-date-divider::before,.im-date-divider::after{content:'';height:1px;background:var(--border);flex:1}
.im-date-divider span{padding:0 4px;white-space:nowrap}
.im-message{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:10px;align-items:start;padding:5px 2px;margin:3px 0;border-radius:10px;transition:background .12s,box-shadow .2s}
.im-message.mine{grid-template-columns:auto minmax(0,1fr) 36px}
.im-message:hover{background:transparent}
.im-message.flash{background:transparent;box-shadow:none}
.im-message-avatar{width:34px;height:34px;border-radius:50%;font-size:10px;margin-top:3px;grid-column:1;grid-row:1}
.im-message-avatar-spacer{width:34px;grid-column:1;grid-row:1}
.im-message.mine .im-message-avatar,.im-message.mine .im-message-avatar-spacer{grid-column:3;grid-row:1}
.im-message-content{position:relative;grid-column:2;grid-row:1;justify-self:start;min-width:min(190px,100%);width:fit-content;max-width:min(850px,100%);padding:9px 12px 10px;background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(202,240,248,.92));-webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);border:1px solid rgba(0,119,182,.2);border-radius:11px;box-shadow:0 2px 8px rgba(3,4,94,.09),inset 0 1px 0 rgba(255,255,255,.85);transition:background .14s,transform .14s,box-shadow .14s}
.im-message.mine .im-message-content{justify-self:end;background:linear-gradient(135deg,#00B4D8,#0077B6 55%,#023E8A);border-color:rgba(255,255,255,.32);box-shadow:0 4px 14px rgba(0,119,182,.32),inset 0 1px 0 rgba(255,255,255,.32)}
.im-message:hover .im-message-content{background:linear-gradient(135deg,rgba(255,255,255,1),rgba(202,240,248,1));box-shadow:0 8px 20px rgba(3,4,94,.14),inset 0 1px 0 rgba(255,255,255,.9);border-color:rgba(0,119,182,.3);transform:translateY(-1px)}
.im-message.mine:hover .im-message-content{background:linear-gradient(135deg,#1AC4E8,#0086CB 55%,#034A9E);box-shadow:0 8px 22px rgba(0,119,182,.4),inset 0 1px 0 rgba(255,255,255,.38)}
.im-message.flash .im-message-content{background:linear-gradient(135deg,rgba(0,180,216,.8),rgba(0,119,182,.65))}
.im-message.deleted .im-message-content{background:rgba(255,255,255,.85);border-color:rgba(0,119,182,.14);box-shadow:0 1px 4px rgba(3,4,94,.05);opacity:.82}
html[data-theme="dark"] .im-message-content{background:linear-gradient(135deg,rgba(9,74,138,.92),rgba(3,4,94,.85));border-color:rgba(144,224,239,.28);box-shadow:0 3px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] .im-message.mine .im-message-content{background:linear-gradient(135deg,#00B4D8,#0077B6 55%,#023E8A);border-color:rgba(144,224,239,.4);box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15)}
html[data-theme="dark"] .im-message:hover .im-message-content{background:linear-gradient(135deg,rgba(10,86,158,1),rgba(3,4,94,.95));box-shadow:0 6px 18px rgba(0,0,0,.4)}
html[data-theme="dark"] .im-message.mine:hover .im-message-content{background:linear-gradient(135deg,#1AC4E8,#0086CB 55%,#034A9E)}
.im-message-meta{height:19px;display:flex;align-items:baseline;gap:7px;font-size:10px;color:var(--muted)}
.im-message-meta strong{font-size:11.5px;color:var(--text);font-weight:750}
.im-message-meta time{color:var(--faint)}
.im-message-meta>span{font-size:9px;color:var(--faint)}
.im-message.mine .im-message-meta{justify-content:flex-end}
.im-message.mine .im-message-meta strong{color:#fff}
.im-message.mine .im-message-meta time,.im-message.mine .im-message-meta>span{color:rgba(255,255,255,.78)}
.im-message-pin{margin-left:2px;color:var(--accent)!important}
.im-message.mine .im-message-pin{color:#fff!important}
.im-message-body{font-size:13px;line-height:1.5;color:var(--text);overflow-wrap:anywhere;padding:1px 0 2px}
.im-message.mine .im-message-body{color:#fff}
.im-message-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.im-message.mine .im-message-body a{color:#fff;text-decoration-color:rgba(255,255,255,.6)}
.im-message-body code{font-family:'DM Mono',monospace;background:var(--s3);border:1px solid var(--border);padding:1px 4px;border-radius:4px;font-size:11.5px}
.im-message.mine .im-message-body code{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);color:#fff}
.im-message-body mark{background:#FFF0A8;color:#222;border-radius:2px;padding:0 1px}
.im-message.mine .im-mention{background:rgba(255,255,255,.28);color:#fff}
.im-message.mine .im-mention.is-me{background:rgba(255,255,255,.45);color:#03045E}
.im-message.mine .im-reply-quote{background:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.75);color:rgba(255,255,255,.88)}
.im-message.mine .im-reply-quote strong{color:#fff}
.im-message.mine .im-read-receipt{color:rgba(255,255,255,.75)}
.im-deleted-body{font-size:12px;color:var(--muted);font-style:italic;padding:3px 0}
.im-deleted-body button{border:0;background:none;color:var(--accent);font:inherit;font-weight:700;cursor:pointer}
.im-message-actions{position:absolute;top:-45px;right:8px;display:flex;align-items:center;gap:2px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);border:1px solid rgba(255,255,255,.75);border-radius:10px;padding:3px;box-shadow:0 7px 20px rgba(3,4,94,.16);z-index:22;white-space:nowrap}
.im-message.mine .im-message-actions{right:auto;left:8px}
.im-message:hover .im-message-actions,.im-message-actions:focus-within{opacity:1;transform:none}
.im-message:hover,.im-message:has(.im-message-menu.open),.im-message:has(.im-reaction-picker.open){z-index:30}
html[data-theme="dark"] .im-message-actions{background:rgba(19,27,48,.9);border-color:rgba(199,210,254,.2)}
.im-message-actions>button,.im-message-more-wrap>.im-message-more{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.im-message-actions>button:hover,.im-message-more-wrap>.im-message-more:hover{background:var(--al);color:var(--accent)}
.im-message-actions .im-quick-reaction{font-size:19px;line-height:1;transition:background .12s,transform .12s}
.im-message-actions .im-quick-reaction:hover{transform:scale(1.12)}
.im-message-more-wrap{position:relative;display:inline-flex}
.im-message-more-wrap>.im-message-more{font-size:17px;font-weight:900;letter-spacing:1px;padding-bottom:7px}
.im-message-menu{display:none;position:absolute;right:0;top:38px;z-index:50;width:205px;padding:5px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.8);border-radius:12px;box-shadow:0 16px 40px rgba(3,4,94,.24),inset 0 1px 0 rgba(255,255,255,.8)}
.im-message-menu.open{display:flex;flex-direction:column}
.im-message-menu button{width:100%;height:35px;border:0;border-radius:7px;background:transparent;color:var(--text);font:inherit;display:flex;align-items:center;gap:9px;padding:0 10px;cursor:pointer;text-align:left}
.im-message-menu button:hover{background:rgba(0,119,182,.12);color:var(--accent)}
.im-message-menu button span{width:20px;font-size:15px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.im-message-menu button b{font-size:11px;font-weight:600}
html[data-theme="dark"] .im-message-menu{background:linear-gradient(135deg,rgba(24,32,55,.95),rgba(19,27,48,.95));border-color:rgba(199,210,254,.2);box-shadow:0 16px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme="dark"] .im-message-menu button:hover{background:rgba(72,202,228,.14)}
.im-reply-quote{display:flex;flex-direction:column;gap:1px;width:100%;max-width:560px;border:0;border-left:3px solid var(--accent);background:var(--s2);border-radius:0 7px 7px 0;padding:6px 9px;margin:1px 0 5px;text-align:left;color:var(--muted);cursor:pointer}
.im-reply-quote strong{font-size:9.5px;color:var(--accent)}
.im-reply-quote span{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-reactions{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.im-message.mine .im-reactions{justify-content:flex-end}
.im-reactions button{min-width:36px;height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:11px;padding:0 9px;cursor:pointer;box-shadow:0 1px 3px rgba(3,4,94,.04)}
.im-reactions button span{font-size:18px;line-height:1}
.im-reactions button.mine{border-color:var(--accent);background:var(--al);color:var(--accent)}
.im-reactions button:hover{border-color:var(--accent);background:var(--al)}
.im-reaction-picker{display:none;position:absolute;right:42px;top:39px;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.8);border-radius:12px;padding:6px;box-shadow:0 16px 40px rgba(3,4,94,.22),inset 0 1px 0 rgba(255,255,255,.8);gap:3px;flex-wrap:wrap;width:222px}
.im-reaction-picker.open{display:flex}
.im-reaction-picker button{width:38px;height:38px;border:0;background:transparent;border-radius:8px;font-size:21px;cursor:pointer;transition:background .12s,transform .12s}
.im-reaction-picker button:hover{background:rgba(0,119,182,.12);transform:scale(1.13)}
html[data-theme="dark"] .im-reaction-picker{background:linear-gradient(135deg,rgba(24,32,55,.95),rgba(19,27,48,.95));border-color:rgba(199,210,254,.2);box-shadow:0 16px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme="dark"] .im-reaction-picker button:hover{background:rgba(72,202,228,.14)}
.im-read-receipt{font-size:9px;color:var(--faint);margin-top:4px}
.im-message.mine .im-read-receipt{text-align:right}
.im-message-attachments{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.im-image-attachment{width:min(320px,100%);display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface);text-decoration:none;color:var(--text)}
/* contain, not cover: a shared screenshot should be readable in full rather
   than centre-cropped. The checkered-neutral background fills the letterbox. */
.im-image-attachment img{display:block;width:100%;max-height:260px;object-fit:contain;background:var(--s3)}
.im-image-attachment:hover{border-color:var(--accent)}
.im-file-attachment.is-unavailable{opacity:.72;cursor:default;border-style:dashed}
.im-file-attachment.is-unavailable:hover{border-color:var(--border);background:var(--surface)}
.im-image-attachment span{font-size:10px;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-file-attachment{min-width:210px;max-width:360px;display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:9px;padding:8px 10px;background:var(--surface);text-decoration:none;color:var(--text)}
.im-file-attachment:hover{border-color:var(--accent);background:var(--al)}
.im-file-icon{font-size:18px}
.im-file-attachment>span:last-child,.im-attachment-preview>div>span:last-child{min-width:0;display:flex;flex-direction:column}
.im-file-attachment strong,.im-attachment-preview strong{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-file-attachment small,.im-attachment-preview small{font-size:9px;color:var(--muted)}
.im-typing{height:0;overflow:hidden;padding:0 24px;background:var(--s2);color:var(--muted);font-size:10.5px;display:flex;align-items:center;gap:7px;transition:height .15s,padding .15s}
.im-typing.show{height:26px;padding:3px 24px}
.im-typing-dots{display:inline-flex;gap:2px}
.im-typing-dots i{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:imTypingBounce 1.1s infinite ease-in-out}
.im-typing-dots i:nth-child(2){animation-delay:.15s}.im-typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes imTypingBounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
.im-composer{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.4);padding:8px 16px 12px;background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.im-compose-box{position:relative;border:1px solid rgba(255,255,255,.6);border-radius:11px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 7px rgba(3,4,94,.04),inset 0 1px 0 rgba(255,255,255,.6);transition:border-color .15s,box-shadow .15s}
.im-compose-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,119,182,.08)}
.im-format-row{height:34px;display:flex;align-items:center;gap:2px;padding:3px 6px;border-bottom:1px solid var(--border)}
.im-format-row button{width:27px;height:27px;border:0;background:transparent;border-radius:6px;color:var(--muted);cursor:pointer;font:inherit;font-size:11px;display:flex;align-items:center;justify-content:center}
.im-format-row button:hover{background:var(--s3);color:var(--accent)}
.im-format-row button svg{width:15px;height:15px}
.im-compose-hint{margin-left:auto;font-size:9px;color:var(--faint);padding-right:4px}
.im-mention-menu{display:none;position:absolute;left:8px;bottom:48px;z-index:46;width:min(340px,calc(100% - 16px));max-height:270px;overflow-y:auto;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:0 14px 34px rgba(3,4,94,.18);scrollbar-width:thin}
.im-mention-menu.open{display:flex;flex-direction:column}
.im-mention-option{width:100%;min-height:48px;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;text-align:left;cursor:pointer;font:inherit}
.im-mention-option:hover,.im-mention-option.active{background:var(--al);color:var(--accent)}
.im-mention-option .im-member-avatar{width:34px;height:34px;flex:0 0 auto}
.im-mention-option>span:last-child{min-width:0;display:flex;flex-direction:column;gap:1px}
.im-mention-option strong{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-mention-option small{font-size:9.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-mention{display:inline;padding:1px 4px;border-radius:4px;background:rgba(0,119,182,.14);color:#005F8F;font-weight:750;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.im-mention.is-me{background:rgba(0,119,182,.24);color:#03045E}
html[data-theme="dark"] .im-mention{background:rgba(72,202,228,.2);color:#90E0EF}
html[data-theme="dark"] .im-mention.is-me{background:rgba(72,202,228,.32);color:#CAF0F8}
.im-compose-row{display:flex;align-items:flex-end;gap:8px;padding:7px}
.im-compose-row textarea{border:0!important;box-shadow:none!important;background:transparent!important;resize:none;min-height:25px;max-height:160px;padding:3px 5px;font-size:13px;line-height:1.5;margin:0}
.im-send-btn{width:34px;height:34px;flex:0 0 auto;border:0;border-radius:9px;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.im-send-btn:hover{background:#023E8A}.im-send-btn:active{transform:scale(.95)}
.im-send-btn svg{width:17px;height:17px;stroke-linecap:round;stroke-linejoin:round}
.im-emoji-picker{display:none;position:absolute;left:4px;bottom:74px;width:300px;max-height:185px;overflow-y:auto;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:0 12px 32px rgba(3,4,94,.18);z-index:30}
.im-emoji-picker.open{display:grid}
.im-emoji-picker button{height:36px;border:0;background:transparent;border-radius:7px;font-size:20px;cursor:pointer}
.im-emoji-picker button:hover{background:var(--s3);transform:scale(1.1)}
.im-context-preview,.im-attachment-preview{display:none;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--border);border-bottom:0;border-radius:9px 9px 0 0;padding:7px 10px;background:var(--s2);margin:0 4px}
.im-context-preview.show,.im-attachment-preview.show{display:flex}
.im-context-preview>div,.im-attachment-preview>div{min-width:0;display:flex;align-items:center;gap:8px}
.im-context-preview>div{flex-direction:column;align-items:flex-start;gap:0}
.im-context-preview strong{font-size:9.5px;color:var(--accent)}
.im-context-preview span{max-width:620px;font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-context-preview>button,.im-attachment-preview>button{border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.im-composer-disabled{padding:14px 18px;border-top:1px solid var(--border);background:var(--s2);color:var(--muted);font-size:11px;text-align:center}
.im-details-panel{border-left:1px solid var(--border);overflow-y:auto;display:block;scrollbar-width:thin}
.im-details-head{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border)}
.im-details-head strong{font-size:13px}
.im-details-hero{padding:20px 16px 16px;display:flex;align-items:center;flex-direction:column;text-align:center;gap:5px;border-bottom:1px solid var(--border)}
.im-details-hero>strong{font-size:14px}.im-details-hero>span{font-size:10.5px;color:var(--muted)}
.im-details-avatar{width:54px;height:54px;border-radius:50%;font-size:17px;margin-bottom:3px}
.im-avatar-edit{border:0;padding:0;cursor:pointer;font-family:inherit}
.im-avatar-edit-badge{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;box-shadow:0 0 0 2px var(--surface);opacity:0;transform:scale(.8);transition:opacity .15s,transform .15s}
.im-avatar-edit:hover .im-avatar-edit-badge,.im-avatar-edit:focus-visible .im-avatar-edit-badge{opacity:1;transform:scale(1)}
.im-avatar-remove{border:0;background:transparent;color:var(--accent);font:inherit;font-size:9.5px;font-weight:700;cursor:pointer;padding:1px 0}
.im-avatar-remove:hover{text-decoration:underline}
.im-details-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:12px;border-bottom:1px solid var(--border)}
.im-details-actions button{min-width:0;height:55px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font:inherit;font-size:9px;cursor:pointer}
.im-details-actions button:hover{background:var(--al);color:var(--accent);border-color:var(--accent)}
.im-details-actions button span{font-size:16px}
.im-details-section{padding:13px 14px;border-bottom:1px solid var(--border)}
.im-details-section-title{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
.im-details-section-title span{font-size:9px;background:var(--s3);border-radius:999px;padding:2px 6px}
.im-mediafiles-section{padding:0 0 13px}
.im-mediafiles-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--border)}
.im-mediafiles-tab{border:0;background:transparent;color:var(--muted);font:inherit;font-size:11.5px;font-weight:700;padding:11px 4px 10px;cursor:pointer;position:relative}
.im-mediafiles-tab b{font-size:9.5px;font-weight:700;color:var(--faint);margin-left:3px}
.im-mediafiles-tab.active{color:var(--accent)}
.im-mediafiles-tab.active b{color:var(--accent)}
.im-mediafiles-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
.im-mediafiles-tab+.im-mediafiles-tab{margin-left:14px}
.im-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:10px 14px 0}
.im-media-thumb{aspect-ratio:1;border:0;border-radius:8px;overflow:hidden;padding:0;cursor:pointer;background:var(--s2)}
.im-media-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .15s}
.im-media-thumb:hover img{transform:scale(1.06)}
.im-files-list{display:flex;flex-direction:column;gap:6px;padding:10px 14px 0}
.im-file-row{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:9px;padding:8px 9px;background:var(--surface);text-decoration:none;color:var(--text)}
.im-file-row:hover{border-color:var(--accent);background:var(--al)}
.im-file-row .im-file-icon{font-size:16px;flex:0 0 auto}
.im-file-row>span:last-child{min-width:0;display:flex;flex-direction:column}
.im-file-row strong{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-file-row small{font-size:9px;color:var(--muted)}
.im-mediafiles-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:26px 20px 6px;color:var(--muted)}
.im-mediafiles-empty>span:first-child{font-size:26px;margin-bottom:2px}
.im-mediafiles-empty strong{font-size:11.5px;color:var(--text)}
.im-mediafiles-empty>span:last-child{font-size:10px;line-height:1.5;max-width:220px}
.im-member-list{display:flex;flex-direction:column;gap:4px}
.im-member-list>div{display:flex;align-items:center;gap:9px;padding:6px;border-radius:8px}
.im-member-list>div:hover{background:var(--s2)}
.im-member-avatar{width:32px;height:32px;border-radius:50%;font-size:9px}
.im-member-list>div>span:last-child{min-width:0;display:flex;flex-direction:column}
.im-member-list strong{font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-member-list small{font-size:9px;color:var(--muted)}
.im-pinned-list{display:flex;flex-direction:column;gap:5px}
.im-pinned-list button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:7px 8px;text-align:left;color:var(--text);cursor:pointer;width:100%}
.im-pinned-list button:hover{border-color:var(--accent);background:var(--al)}
.im-pinned-list strong{font-size:9.5px;color:var(--accent)}
.im-pinned-list span{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.im-details-empty{font-size:10px;color:var(--muted);padding:7px 0}
.im-details-danger{padding:15px}.im-details-danger button{width:100%;height:34px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--red);font:inherit;font-size:10.5px;cursor:pointer}.im-details-danger button:hover{background:var(--rl);border-color:var(--red)}
.im-no-access{grid-column:1/-1;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;text-align:center;color:var(--muted);padding:30px}.im-no-access strong{font-size:15px;color:var(--text)}.im-no-access span{font-size:12px}
.im-undo-bar{position:absolute;left:50%;bottom:18px;transform:translate(-50%,18px);opacity:0;pointer-events:none;z-index:80;display:flex;align-items:center;gap:10px;min-width:260px;max-width:calc(100% - 32px);padding:10px 12px;border-radius:10px;background:var(--text);color:#fff;box-shadow:0 10px 30px rgba(3,4,94,.25);font-size:11px;transition:opacity .18s,transform .18s}
.im-undo-bar.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.im-undo-bar button{margin-left:auto;border:0;background:none;color:#48CAE4;font:inherit;font-weight:800;cursor:pointer}.im-undo-bar #imUndoCountdown{font-size:9px;color:rgba(255,255,255,.55)}
.im-modal-overlay{position:fixed;inset:0;z-index:900;background:rgba(3,4,94,.38);display:none;align-items:center;justify-content:center;padding:18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.im-modal-overlay.show{display:flex}
.im-modal{width:min(520px,100%);max-height:min(720px,92vh);display:flex;flex-direction:column;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);border:1px solid rgba(255,255,255,.7);border-radius:14px;box-shadow:0 24px 70px rgba(3,4,94,.28),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden}
.im-modal-head{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.im-modal-title{font-size:16px;font-weight:800}.im-modal-body{padding:15px 16px;overflow-y:auto}.im-modal-body .im-search-wrap{margin:3px 0 10px}.im-modal-foot{padding:11px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.im-member-picker{max-height:330px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;padding:5px;background:var(--s2);scrollbar-width:thin}
.im-member-option{min-height:52px;display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;cursor:pointer;text-transform:none;letter-spacing:0;color:var(--text)}
.im-member-option:hover{background:var(--surface)}
.im-member-option input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent)}
.im-member-option>span:last-child{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.im-member-option strong{font-size:11.5px}.im-member-option small{font-size:9.5px;color:var(--muted);font-weight:400}

/* Dark theme: smoked, indigo-tinted glass instead of a white haze */
html[data-theme="dark"] .im-left-panel,
html[data-theme="dark"] .im-main-panel,
html[data-theme="dark"] .im-details-panel{
  background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  backdrop-filter:blur(22px) saturate(165%);
}
html[data-theme="dark"] .im-left-panel{background:rgba(255,255,255,.03);border-right-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .im-details-panel{border-left-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .im-page-shell{border-top-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .im-left-head,
html[data-theme="dark"] .im-chat-head{background:rgba(255,255,255,.035);border-bottom-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .im-conversation-row:hover{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .im-conversation-row.active{background:rgba(72,202,228,.1);box-shadow:0 4px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] .im-composer{background:rgba(255,255,255,.03);border-top-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .im-compose-box{background:rgba(255,255,255,.045);border-color:rgba(199,210,254,.16);box-shadow:0 2px 7px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .im-modal{background:linear-gradient(135deg,rgba(24,32,55,.9),rgba(19,27,48,.9));border-color:rgba(199,210,254,.16)}

/* Conversation details panel: collapses to 0 width on desktop when closed
   (the × / (i) toggle), matching Messenger - the middle chat column grows
   to fill the freed space instead of leaving the panel always on-screen. */
@media(min-width:1221px){
  .im-page-shell{grid-template-columns:310px minmax(0,1fr) 0px;transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1)}
  .im-page-shell.im-details-open{grid-template-columns:310px minmax(0,1fr) 300px}
  .im-details-panel{overflow:hidden;opacity:0;transition:opacity .15s}
  .im-page-shell.im-details-open .im-details-panel{overflow-y:auto;opacity:1;transition:opacity .2s .05s}
}

@media(max-width:1220px){
  .im-page-shell{grid-template-columns:290px minmax(0,1fr)}
  .im-details-panel{position:absolute;right:0;top:0;bottom:0;width:min(320px,90%);z-index:40;transform:translateX(100%);box-shadow:-12px 0 35px rgba(3,4,94,.13);transition:transform .2s}
  .im-details-panel.open{transform:translateX(0)}
}
@media(max-width:760px){
  #page-internalMessaging.active{height:calc(100vh - 54px)}
  .im-page-shell{display:block}
  .im-left-panel,.im-main-panel{position:absolute;inset:0;transition:transform .2s}
  .im-main-panel{transform:translateX(100%);z-index:5}
  .im-page-shell.im-mobile-thread .im-left-panel{transform:translateX(-26%);pointer-events:none}
  .im-page-shell.im-mobile-thread .im-main-panel{transform:translateX(0)}
  .im-mobile-back{display:inline-flex;border:0;background:transparent;font-size:19px}
  .im-left-head,.im-chat-head{height:62px;flex-basis:62px}
  .im-message-list{padding:10px 12px 14px}
  .im-message{grid-template-columns:32px minmax(0,1fr) auto;row-gap:3px}
  .im-message.mine{grid-template-columns:auto minmax(0,1fr) 32px}
  .im-message-content{padding:8px 10px 9px;border-radius:10px;max-width:100%}
  .im-message-actions{position:static;opacity:1;transform:none;width:max-content;max-width:100%;margin:1px 0 5px;box-shadow:none;background:transparent;border:0;padding:0;overflow-x:auto}
  .im-message.mine .im-message-actions{left:auto;margin-left:auto}
  .im-message-actions>button,.im-message-more-wrap>.im-message-more{width:29px;height:29px}
  .im-message-actions .im-quick-reaction{font-size:18px}
  .im-message-avatar{width:31px;height:31px}.im-message-avatar-spacer{width:31px}
  .im-message-menu{top:34px}
  .im-reaction-picker{top:auto;bottom:37px;right:0;left:auto}
  .im-message.mine .im-reaction-picker{left:auto;right:0}
  .im-compose-hint{display:none}.im-composer{padding:7px 8px 9px}.im-format-row{overflow-x:auto}.im-emoji-picker{width:280px;max-width:calc(100vw - 28px)}.im-mention-menu{width:calc(100% - 12px);left:6px;bottom:47px;max-height:220px}
  .im-details-panel{width:min(330px,92%)}
  .im-chat-title{font-size:13px}
}
@media(max-width:430px){
  .im-conversation-row{grid-template-columns:40px minmax(0,1fr) auto;padding:9px 7px}
  .im-message-body{font-size:12.5px}.im-message-meta strong{font-size:11px}
  .im-head-actions{gap:3px}.im-head-actions .im-icon-btn{width:31px;height:31px}
  .im-chat-head{padding:8px 9px;gap:7px}
  .im-details-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}

#page-patientMessaging.active{display:block;height:calc(100vh - 54px);overflow:hidden;
  background:
    radial-gradient(900px 520px at 100% 0%,rgba(0,180,216,.10),transparent 62%),
    radial-gradient(760px 520px at 0% 8%,rgba(0,119,182,.09),transparent 60%),
    var(--s2,#F1F5F9);
}
html[data-theme="dark"] #page-patientMessaging.active{
  background:
    radial-gradient(900px 520px at 100% 0%,rgba(0,180,216,.16),transparent 62%),
    radial-gradient(760px 520px at 0% 8%,rgba(0,119,182,.15),transparent 60%),
    #0A0F23;
}
#page-patientMessaging.active{height:calc(100vh - 54px)}
#page-patientMessaging.active>#pmMount{height:100%}
.pm-shell{height:100%;display:flex;flex-direction:column;min-height:0}
.pm-no-access{padding:40px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:13px;text-align:center}
.pm-no-access strong{font-size:15px;color:var(--text)}

/* ---------- hero strip ---------- */
.pm-hero{flex:0 0 auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:20px 26px;
  background:linear-gradient(120deg,#062B52 0%,#0A4B85 46%,#0077B6 100%);color:#fff;position:relative;overflow:hidden}
.pm-hero::after{content:'';position:absolute;right:-60px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,180,216,.34),transparent 68%);pointer-events:none}
.pm-hero-lead{display:flex;align-items:center;gap:15px;min-width:0;position:relative;z-index:1}
.pm-hero-ico{width:48px;height:48px;flex:none;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);color:#7FE3FF}
.pm-hero-ico svg{width:24px;height:24px}
.pm-hero-kicker{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7FE3FF;margin-bottom:3px}
.pm-hero-title{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pm-hero-sub{margin:4px 0 0;font-size:11.5px;color:rgba(255,255,255,.72);max-width:430px;line-height:1.45}
.pm-hero-tiles{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap;position:relative;z-index:1}
.pm-tile{min-width:92px;padding:10px 15px;border-radius:13px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  display:flex;flex-direction:column;gap:2px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pm-tile b{font-size:21px;font-weight:800;line-height:1;letter-spacing:-.02em}
.pm-tile b i{font-style:normal;font-size:12px;font-weight:600;color:rgba(255,255,255,.55)}
.pm-tile span{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.pm-tile-warn{background:rgba(243,188,78,.2);border-color:rgba(243,188,78,.45)}
.pm-tile-warn b{color:#FFD98A}
.pm-hero-refresh{position:relative;z-index:1;width:38px;height:38px;flex:none;border-radius:11px;cursor:pointer;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;transition:all .16s}
.pm-hero-refresh svg{width:17px;height:17px}
.pm-hero-refresh:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}

/* ---------- body split ---------- */
.pm-body{flex:1;min-height:0;display:grid;grid-template-columns:334px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr)}

/* ---------- directory (cards, not chat rows) ---------- */
.pm-directory{min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface)}
.pm-dir-head{flex:0 0 auto;padding:14px 14px 10px;border-bottom:1px solid var(--border)}
.pm-dir-search{position:relative;display:flex;align-items:center}
.pm-dir-search>svg{position:absolute;left:12px;width:15px;height:15px;color:var(--muted);pointer-events:none}
.pm-dir-search input{width:100%;height:40px;box-sizing:border-box;padding:9px 12px 9px 36px!important;border:1px solid var(--border)!important;
  border-radius:11px!important;background:var(--s2)!important;font-family:inherit;font-size:12.5px;color:var(--text);outline:none;transition:border-color .14s,box-shadow .14s}
.pm-dir-search input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(0,119,182,.13)}
.pm-dir-filters{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}
.pm-dir-filter{padding:5px 11px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);
  font-family:inherit;font-size:10.5px;font-weight:700;cursor:pointer;transition:all .14s}
.pm-dir-filter:hover{border-color:var(--accent);color:var(--accent)}
.pm-dir-filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pm-dir-list{flex:1;min-height:0;overflow-y:auto;padding:10px;scrollbar-width:thin}
.pm-dir-empty{display:flex;flex-direction:column;align-items:center;gap:5px;padding:44px 20px;text-align:center;color:var(--muted)}
.pm-dir-empty svg{width:26px;height:26px;color:var(--faint);margin-bottom:4px}
.pm-dir-empty strong{font-size:13px;color:var(--text)}
.pm-dir-empty span{font-size:11.5px;line-height:1.5}
.pm-dir-card{width:100%;display:flex;flex-direction:column;gap:9px;padding:12px;margin-bottom:8px;text-align:left;cursor:pointer;
  border:1px solid var(--border);border-radius:14px;background:var(--surface);font-family:inherit;
  box-shadow:0 1px 2px rgba(15,23,42,.04);transition:transform .16s,border-color .16s,box-shadow .16s}
.pm-dir-card:hover{transform:translateY(-2px);border-color:rgba(0,119,182,.4);box-shadow:0 8px 20px rgba(0,119,182,.12)}
.pm-dir-card.active{border-color:var(--accent);background:var(--al);box-shadow:0 6px 18px rgba(0,119,182,.16)}
.pm-dir-card.active::before{content:'';position:absolute}
.pm-dir-card.muted{opacity:.68}
.pm-dir-card-top{display:flex;align-items:center;gap:11px;min-width:0}
.pm-av{width:40px;height:40px;flex:none;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;position:relative;
  background:linear-gradient(140deg,#00B4D8,#0077B6 58%,#023E8A);color:#fff;font-size:13px;font-weight:800;
  box-shadow:0 3px 10px rgba(0,119,182,.26),inset 0 1px 0 rgba(255,255,255,.3)}
.pm-av-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#E8112D;border:2px solid var(--surface)}
.pm-av-lg{width:60px;height:60px;border-radius:19px;font-size:19px}
.pm-dir-card-id{min-width:0;display:flex;flex-direction:column;gap:2px}
.pm-dir-name{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-dir-meta{font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-dir-chips{display:flex;gap:5px;flex-wrap:wrap}
.pm-chip{display:inline-flex;align-items:center;gap:4px;padding:3.5px 8px;border-radius:7px;font-size:9.5px;font-weight:800;letter-spacing:.02em;line-height:1}
.pm-chip svg{width:10px;height:10px}
.pm-chip.sms{background:rgba(0,119,182,.12);color:var(--accent)}
.pm-chip.email{background:rgba(0,180,216,.16);color:#0096C7}
.pm-chip.none{background:rgba(148,163,184,.2);color:var(--muted)}

/* ---------- workspace ---------- */
.pm-workspace{min-width:0;min-height:0;overflow-y:auto;padding:20px 24px 28px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin}
.pm-workspace>*{flex:none}
.pm-blank{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:50px 30px}
.pm-blank-art{width:76px;height:76px;border-radius:24px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;
  background:linear-gradient(140deg,#00B4D8,#0077B6 58%,#023E8A);color:#fff;box-shadow:0 14px 34px rgba(0,119,182,.3)}
.pm-blank-art svg{width:36px;height:36px}
.pm-blank strong{font-size:16px;color:var(--text)}
.pm-blank span{font-size:12.5px;color:var(--muted);max-width:390px;line-height:1.6}
.pm-card{border:1px solid var(--border);border-radius:17px;background:var(--surface);box-shadow:0 2px 8px rgba(15,23,42,.05)}
.pm-card-hd{display:flex;align-items:center;gap:9px;padding:14px 18px;border-bottom:1px solid var(--border)}
.pm-card-hd svg{width:16px;height:16px;color:var(--accent)}
.pm-card-hd h4{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--text)}
.pm-card-count{margin-left:auto;font-size:10px;font-weight:800;color:var(--accent);background:var(--al);border-radius:999px;padding:3px 9px}

/* patient hero card */
.pm-patient-card{position:relative;padding:18px 20px;overflow:hidden}
.pm-patient-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#00B4D8,#0077B6 50%,#023E8A)}
.pm-back-btn{display:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--muted);
  align-items:center;justify-content:center;cursor:pointer;margin-bottom:12px}
.pm-back-btn svg{width:16px;height:16px}
.pm-pc-top{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.pm-pc-id{min-width:0;flex:1}
.pm-pc-id h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-pc-id span{font-size:11.5px;color:var(--muted)}
.pm-pc-actions{display:flex;gap:7px;flex-wrap:wrap}
.pm-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.pm-btn svg{width:14px;height:14px}
.pm-btn:disabled{opacity:.4;cursor:not-allowed}
.pm-btn-ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--al)}
.pm-btn-call{background:linear-gradient(135deg,#2FCB8F,#1A9A6B);border-color:#1A9A6B;color:#fff;box-shadow:0 4px 12px rgba(26,154,107,.28)}
.pm-btn-call:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 18px rgba(26,154,107,.36)}
.pm-btn-primary{background:linear-gradient(135deg,#00B4D8,#0077B6 60%,#023E8A);border-color:#0077B6;color:#fff;box-shadow:0 4px 12px rgba(0,119,182,.28)}
.pm-btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,119,182,.38)}
.pm-btn-danger{color:#E5484D;padding:9px 11px}
.pm-btn-danger:hover:not(:disabled){border-color:#E5484D;background:rgba(229,72,77,.08);color:#E5484D}
.pm-pc-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;margin-top:16px}
.pm-cline{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;background:var(--s2);border:1px solid var(--border);font-size:12.5px;color:var(--text)}
.pm-cline svg{width:14px;height:14px;flex:none;color:var(--accent)}
.pm-cline span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.pm-cline.missing{color:var(--faint);background:rgba(148,163,184,.09);border-style:dashed}
.pm-cline.missing svg{color:var(--faint)}
.pm-cline-tag{flex:none;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--al);border-radius:5px;padding:3px 7px}
.pm-pc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}
.pm-pcstat{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 6px;border-radius:11px;background:var(--s2);border:1px solid var(--border)}
.pm-pcstat b{font-size:18px;font-weight:800;color:var(--accent);line-height:1}
.pm-pcstat span{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pm-pcstat.warn b{color:#C6851F}

/* composer card */
.pm-composer-card{overflow:visible}
.pm-tabs{display:flex;gap:4px;padding:10px 12px 0;border-bottom:1px solid var(--border)}
.pm-tab{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border:none;border-bottom:2.5px solid transparent;background:transparent;
  color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .15s;margin-bottom:-1px}
.pm-tab svg{width:14px;height:14px}
.pm-tab:hover:not(:disabled):not(.active){color:var(--accent)}
.pm-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.pm-tab:disabled{opacity:.35;cursor:not-allowed}
.pm-tab-body{padding:16px 18px 15px}
.pm-form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;flex-wrap:wrap}
.pm-to{font-size:12px;color:var(--muted);min-width:0}
.pm-to strong{color:var(--text);font-weight:700}
.pm-mini{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--border);border-radius:9px;background:var(--surface);
  color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .14s}
.pm-mini svg{width:13px;height:13px}
.pm-mini:hover{border-color:var(--accent);color:var(--accent);background:var(--al)}
.pm-tpl-wrap{position:relative}
.pm-tpl-menu{position:absolute;top:calc(100% + 7px);right:0;width:330px;max-height:290px;overflow-y:auto;display:none;z-index:40;
  padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:0 16px 40px rgba(15,23,42,.2)}
.pm-tpl-menu.open{display:block}
.pm-tpl-item{width:100%;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:none;border-radius:10px;background:transparent;
  text-align:left;cursor:pointer;font-family:inherit;transition:background .12s}
.pm-tpl-item:hover{background:var(--al)}
.pm-tpl-item strong{font-size:12.5px;font-weight:700;color:var(--text)}
.pm-tpl-item span{font-size:11px;color:var(--muted);line-height:1.4}
.pm-tpl-empty{padding:16px;text-align:center;font-size:11.5px;color:var(--muted)}
.pm-input,.pm-textarea{width:100%;box-sizing:border-box;padding:11px 13px!important;border:1px solid var(--border)!important;border-radius:11px!important;
  background:var(--s2)!important;font-family:inherit;font-size:13px;color:var(--text);outline:none;transition:border-color .14s,box-shadow .14s}
.pm-textarea{resize:none;line-height:1.55;max-height:220px;min-height:74px}
.pm-input:focus,.pm-textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(0,119,182,.13);background:var(--surface)!important}
.pm-input+.pm-textarea{margin-top:9px}
.pm-form-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;flex-wrap:wrap}
.pm-counter{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pm-counter.over{color:#C6851F;font-weight:700}
.pm-foot-right{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-left:auto}
.pm-queue-note{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--faint);cursor:help}
.pm-queue-note svg{width:12px;height:12px}
.pm-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;min-width:0}
.pm-field label{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pm-field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pm-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--s2);border:1px solid var(--border);gap:3px;width:fit-content}
.pm-seg-btn{padding:8px 18px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .14s}
.pm-seg-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(0,119,182,.24)}
.pm-outcomes{display:flex;flex-wrap:wrap;gap:7px}
.pm-outcome{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);
  font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .14s}
.pm-outcome:hover{border-color:var(--accent);color:var(--accent)}
.pm-outcome.active{background:linear-gradient(135deg,#00B4D8,#0077B6);border-color:#0077B6;color:#fff;box-shadow:0 4px 12px rgba(0,119,182,.28)}
/* ---------- hero view switcher ---------- */
.pm-hero-views{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);position:relative;z-index:1}
.pm-hero-view{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:none;border-radius:9px;background:transparent;
  color:rgba(255,255,255,.72);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .16s;white-space:nowrap}
.pm-hero-view svg{width:14px;height:14px}
.pm-hero-view:hover:not(.active){background:rgba(255,255,255,.12);color:#fff}
.pm-hero-view.active{background:#fff;color:#0A4B85;box-shadow:0 3px 10px rgba(0,10,30,.22)}

/* composer destination picker + links back to the Contact Book (these live on
   the Messages view, not the book itself) */
.pm-to-pick{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.pm-to-select{padding:6px 10px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--surface)!important;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--text);cursor:pointer;outline:none;max-width:300px}
.pm-to-select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(0,119,182,.13)}
.pm-to-tag{margin-left:7px;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:5px;
  background:rgba(0,119,182,.12);color:var(--accent)}
.pm-to-hint{margin-left:7px;font-size:10px;font-style:italic;color:var(--faint)}
/* contact line as a destination picker (2+ numbers / emails on file).
   Trigger shows only the value; the menu carries the who. */
.pm-cline-pick{padding:6px 10px 6px 12px;position:relative}
.pm-cline-pick.open{z-index:30}
.pm-dest{position:relative;flex:1;min-width:0}
.pm-dest-btn{display:flex;align-items:center;gap:8px;width:100%;padding:5px 9px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);font-family:inherit;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;text-align:left;transition:all .14s}
.pm-dest-btn>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-dest-btn svg{width:13px;height:13px;flex:none;color:var(--accent);transition:transform .18s}
.pm-dest-btn:hover{border-color:var(--accent);background:var(--al)}
.pm-cline-pick.open .pm-dest-btn{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,119,182,.13)}
.pm-cline-pick.open .pm-dest-btn svg{transform:rotate(180deg)}
.pm-dest-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:250px;display:none;z-index:40;padding:5px;
  border-radius:12px;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 16px 40px rgba(15,23,42,.18);max-height:270px;overflow-y:auto}
.pm-dest-menu.open{display:block;animation:pmDestIn .16s ease both}
@keyframes pmDestIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.pm-dest-opt{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;border-radius:9px;background:transparent;
  cursor:pointer;text-align:left;font-family:inherit;transition:background .12s}
.pm-dest-opt:hover{background:var(--al)}
.pm-dest-opt.on{background:var(--al)}
.pm-dest-opt-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pm-dest-opt-copy strong{font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-dest-opt-copy span{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent)}
.pm-dest-opt i{flex:none;width:14px;height:14px;color:var(--accent);display:flex}
.pm-dest-opt i svg{width:14px;height:14px}
html[data-theme="dark"] .pm-dest-btn,
html[data-theme="dark"] .pm-dest-menu{background:#141D33;border-color:rgba(199,210,254,.16)}
.pm-cline-tag.book{background:rgba(0,180,216,.16);color:#0096C7}
.pm-pc-book{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:9px;
  border:1px dashed var(--border2,var(--border));border-radius:10px;background:transparent;color:var(--muted);
  font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .14s}
.pm-pc-book svg{width:14px;height:14px}
.pm-pc-book:hover{border-color:var(--accent);color:var(--accent);background:var(--al)}
.pm-timeline-card{overflow:hidden}
html[data-theme="dark"] .pm-to-select{background:rgba(255,255,255,.05)!important;border-color:rgba(199,210,254,.14)!important}

/* ---------- contact book - master/detail directory ---------- */
.pm-bookwrap{flex:1;min-height:0;overflow:hidden}
.pmc{height:100%;display:grid;grid-template-columns:330px minmax(0,1fr);background:var(--surface)}
.pmc-rail{min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--surface)}
.pmc-rail-hd{display:flex;align-items:center;gap:8px;padding:15px 16px 11px}
.pmc-rail-hd h3{margin:0;flex:1;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.pmc-hd-btn{width:32px;height:32px;flex:none;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .14s}
.pmc-hd-btn svg{width:15px;height:15px}
.pmc-hd-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--al)}
.pmc-hd-btn:disabled{opacity:.35;cursor:not-allowed}
.pmc-hd-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.pmc-hd-btn.primary:hover:not(:disabled){background:#023E8A;border-color:#023E8A;color:#fff}
/* Five tabs in a ~330px rail: allow a nudge of horizontal scroll rather than
   letting them wrap or clip, and hide the scrollbar so it stays tidy. */
.pmc-tabs{display:flex;gap:1px;padding:0 10px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.pmc-tabs::-webkit-scrollbar{display:none}
.pmc-tab{flex:none;padding:9px 8px;border:none;border-bottom:2.5px solid transparent;background:transparent;color:var(--muted);
  font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;margin-bottom:-1px;white-space:nowrap;transition:all .14s}
.pmc-tab:hover:not(.active){color:var(--accent)}
.pmc-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.pmc-search{position:relative;display:flex;align-items:center;margin:11px 12px 8px}
.pmc-search>svg{position:absolute;left:11px;width:15px;height:15px;color:var(--muted);pointer-events:none}
.pmc-search input{width:100%;height:36px;box-sizing:border-box;padding:8px 12px 8px 34px!important;border:1px solid var(--border)!important;
  border-radius:9px!important;background:var(--s2)!important;font-family:inherit;font-size:12.5px;color:var(--text);outline:none;transition:border-color .13s,box-shadow .13s}
.pmc-search input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(0,119,182,.13)}
.pmc-list{flex:1;min-height:0;overflow-y:auto;padding:0 8px 16px;scrollbar-width:thin}
.pmc-group{display:flex;align-items:center;gap:8px;padding:10px 8px 6px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pmc-group span{margin-left:auto;font-size:10px;letter-spacing:0;color:var(--faint);text-transform:none}
.pmc-row{width:100%;display:flex;align-items:flex-start;gap:11px;padding:10px;border:none;border-radius:11px;background:transparent;
  cursor:pointer;text-align:left;font-family:inherit;position:relative;transition:background .13s,box-shadow .13s}
.pmc-row .pmc-av{margin-top:1px}
.pmc-row:hover{background:var(--s2)}
.pmc-row.active{background:var(--al);box-shadow:inset 3px 0 0 var(--accent)}
.pmc-row.active .pmc-row-name{color:var(--accent)}
.pmc-fav{width:26px;height:26px;flex:none;border:none;border-radius:7px;background:transparent;color:var(--faint);
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:all .15s cubic-bezier(.34,1.56,.64,1)}
.pmc-fav svg{width:14px;height:14px}
.pmc-row:hover .pmc-fav{opacity:1}
.pmc-fav:hover{color:#E8A317;background:rgba(232,163,23,.12);transform:scale(1.12)}
.pmc-fav.on{opacity:1;color:#E8A317}
.pmc-fav.on svg{fill:#E8A317}
.pmc-fav-btn.on{color:#E8A317;border-color:rgba(232,163,23,.42);background:rgba(232,163,23,.12)}
.pmc-fav-btn.on svg{fill:#E8A317}
.pmc-fav-btn.on:hover{color:#E8A317;border-color:#E8A317;background:rgba(232,163,23,.2)}
.pmc-av{width:36px;height:36px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 2px 8px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.28)}
.pmc-av.lg{width:88px;height:88px;font-size:30px;box-shadow:0 10px 28px rgba(15,23,42,.22),inset 0 2px 0 rgba(255,255,255,.3)}
.pmc-row-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pmc-row-name{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmc-src{flex:none;width:13px;height:13px;color:var(--accent);display:inline-flex}
.pmc-src svg{width:13px;height:13px}
.pmc-row-sub{display:flex;align-items:center;gap:5px;min-width:0;font-size:11.5px;color:var(--muted);line-height:1.5}
.pmc-row-sub svg{width:11px;height:11px;flex:none;opacity:.75}
.pmc-row-sub em{font-style:normal;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmc-row-sub b{flex:none;font-size:9px;font-weight:800;color:var(--accent);background:var(--al);border-radius:4px;padding:1px 5px}
.pmc-row-sub.none{color:var(--faint);font-style:italic}
.pmc-empty{display:flex;flex-direction:column;align-items:center;gap:5px;padding:40px 18px;text-align:center;color:var(--muted)}
.pmc-empty>svg{width:24px;height:24px;color:var(--faint);margin-bottom:3px}
.pmc-empty strong{font-size:13px;color:var(--text)}
.pmc-empty span{font-size:11.5px;line-height:1.5}

/* detail pane */
.pmc-detail{min-width:0;min-height:0;overflow-y:auto;position:relative;background:var(--s2);scrollbar-width:thin}
.pmc-detail-top{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;gap:7px;padding:14px 18px 0}
.pmc-blank{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:50px 30px}
.pmc-blank-art{width:70px;height:70px;border-radius:22px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;
  background:linear-gradient(140deg,#00B4D8,#0077B6 58%,#023E8A);color:#fff;box-shadow:0 12px 30px rgba(0,119,182,.28)}
.pmc-blank-art svg{width:32px;height:32px}
.pmc-blank strong{font-size:16px;color:var(--text)}
.pmc-blank span{font-size:12.5px;color:var(--muted);max-width:340px;line-height:1.6}
.pmc-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 24px 22px}
.pmc-hero h2{margin:10px 0 0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text);text-align:center}
.pmc-hero-sub{font-size:12px;color:var(--muted)}
.pmc-actions{display:flex;gap:14px;margin-top:16px}
.pmc-act{width:46px;height:46px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .16s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 3px rgba(15,23,42,.06)}
.pmc-act svg{width:19px;height:19px}
.pmc-act:hover:not(:disabled){transform:translateY(-2px);border-color:var(--accent);color:#fff;background:var(--accent);box-shadow:0 6px 16px rgba(0,119,182,.3)}
.pmc-act:disabled{opacity:.35;cursor:not-allowed}
.pmc-cards{max-width:720px;margin:0 auto;padding:0 24px 30px;display:flex;flex-direction:column;gap:12px}
.pmc-card{border:1px solid var(--border);border-radius:15px;background:var(--surface);padding:15px 17px;
  box-shadow:0 1px 3px rgba(15,23,42,.05);transition:box-shadow .16s,border-color .16s}
.pmc-card:hover{box-shadow:0 6px 18px rgba(15,23,42,.07);border-color:rgba(0,119,182,.28)}
.pmc-card-t{font-size:12px;font-weight:800;color:var(--text);margin-bottom:10px}
.pmc-source{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent)}
.pmc-source svg{width:15px;height:15px}
.pmc-source-add{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--s2);border-radius:6px;padding:3px 9px}
.pmc-val{padding:9px 0;border-bottom:1px solid var(--border)}
.pmc-val:last-child{border-bottom:none;padding-bottom:0}
.pmc-val:first-child{padding-top:0}
.pmc-val-lbl{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:3px}
.pmc-val-lbl i{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:5px;
  background:rgba(0,119,182,.12);color:var(--accent)}
.pmc-val-lbl i.alt{background:rgba(0,180,216,.16);color:#0096C7}
.pmc-val-link{display:inline-block;padding:0;border:none;background:none;font-family:inherit;font-size:15px;font-weight:700;color:var(--accent);
  cursor:pointer;text-decoration:none;word-break:break-all}
.pmc-val-link:hover:not(:disabled){text-decoration:underline}
.pmc-val-link:disabled{color:var(--text);cursor:default}
.pmc-val-note{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;font-style:italic}
.pmc-none{font-size:12.5px;color:var(--faint);font-style:italic}
.pmc-delete{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border:1px solid var(--border);border-radius:14px;
  background:var(--surface);color:var(--accent);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .14s}
.pmc-delete svg{width:15px;height:15px}
.pmc-delete:hover{border-color:var(--accent);background:var(--al)}

/* ---------- edit contact dialog ---------- */
.pm-modal-overlay{position:fixed;inset:0;z-index:2200;display:none;align-items:center;justify-content:center;padding:22px;
  background:radial-gradient(900px 600px at 20% 10%,rgba(0,180,216,.20),transparent 60%),
             radial-gradient(760px 560px at 85% 90%,rgba(0,119,182,.18),transparent 60%),
             rgba(4,14,32,.58);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  animation:pmFadeIn .2s ease both}
@keyframes pmFadeIn{from{opacity:0}to{opacity:1}}
.pm-modal-overlay.show{display:flex}
.pm-modal{width:min(430px,100%);max-height:88vh;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;position:relative;
  background:linear-gradient(165deg,rgba(255,255,255,.94),rgba(255,255,255,.86));
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 34px 80px rgba(4,14,32,.44),0 0 60px rgba(0,180,216,.10),inset 0 1px 0 rgba(255,255,255,.85);
  animation:pmModalIn .26s cubic-bezier(.22,1,.36,1) both}
/* thin gradient rule across the top, matching the portal's card language */
.pm-modal::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#00B4D8,#0077B6 52%,#023E8A)}
@keyframes pmModalIn{from{opacity:0;transform:translateY(16px) scale(.955)}to{opacity:1;transform:translateY(0) scale(1)}}
.pm-modal-x{width:30px;height:30px;flex:none;border-radius:9px;border:1px solid var(--border);background:rgba(255,255,255,.7);color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .14s}
.pm-modal-x svg{width:14px;height:14px}
.pm-modal-x:hover{border-color:#E5484D;color:#E5484D;background:rgba(229,72,77,.1);transform:rotate(90deg)}
html[data-theme="dark"] .pm-modal{background:linear-gradient(165deg,rgba(22,31,52,.95),rgba(16,23,40,.9));border-color:rgba(199,210,254,.18);
  box-shadow:0 34px 80px rgba(0,0,0,.6),0 0 60px rgba(0,180,216,.10),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] .pm-modal-x{background:rgba(255,255,255,.06);border-color:rgba(199,210,254,.16)}
.pme-modal{width:min(620px,100%)}
.pme-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--border)}
.pme-head h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--text)}
.pme-body{padding:18px 22px;overflow-y:auto}
.pme-ident{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.pme-ident-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.pme-ident-copy strong{font-size:16px;font-weight:800;color:var(--text)}
.pme-ident-copy span{font-size:11px;color:var(--muted)}
.pme-sec{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 11px;font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);padding-bottom:7px;border-bottom:1px solid var(--border)}
/* All secondary/grey helper text in this dialog shares one size and colour so
   the sections don't look inconsistently weighted. */
.pme-sec i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.pme-row{display:grid;grid-template-columns:minmax(0,1fr) 108px 128px 30px;gap:12px;align-items:end;margin-bottom:16px}
.pme-row-reg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:22px}
.pme-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.pme-f label{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.pme-f label span{font-size:11px;font-weight:500;color:var(--faint);margin-left:2px}
.pme-f input,.pme-f select{width:100%;box-sizing:border-box;padding:7px 2px!important;border:none!important;border-bottom:1px solid var(--border2,var(--border))!important;
  border-radius:0!important;background:transparent!important;font-family:inherit;font-size:14px;color:var(--text);outline:none;transition:border-color .14s}
.pme-f input:focus,.pme-f select:focus{border-bottom-color:var(--accent)!important;border-bottom-width:2px!important;box-shadow:none}
.pme-f input::placeholder{color:var(--faint)}
.pme-f-note{grid-column:1/-1;margin-top:-4px}
.pme-x{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .14s;margin-bottom:2px}
.pme-x svg{width:13px;height:13px}
.pme-x:hover{border-color:#E5484D;color:#E5484D;background:rgba(229,72,77,.08)}
.pme-noextra{font-size:12.5px;color:var(--faint);font-style:italic;margin-bottom:14px}
.pme-add{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px dashed var(--border2,var(--border));border-radius:10px;
  background:transparent;color:var(--accent);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .14s}
.pme-add svg{width:14px;height:14px}
.pme-add:hover{border-color:var(--accent);background:var(--al)}
.pme-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 18px;border-top:1px solid var(--border)}

html[data-theme="dark"] .pmc,
html[data-theme="dark"] .pmc-rail,
html[data-theme="dark"] .pmc-card,
html[data-theme="dark"] .pmc-delete,
html[data-theme="dark"] .pmc-act,
html[data-theme="dark"] .pmc-hd-btn,
html[data-theme="dark"] .pme-x{background:#121A2E;border-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .pmc-detail{background:#0E1526}
html[data-theme="dark"] .pmc-row:hover{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .pmc-row.active{background:rgba(0,119,182,.22)}
html[data-theme="dark"] .pmc-search input{background:rgba(255,255,255,.05)!important;border-color:rgba(199,210,254,.14)!important}
html[data-theme="dark"] .pmc-tabs,
html[data-theme="dark"] .pmc-val,
html[data-theme="dark"] .pme-head,
html[data-theme="dark"] .pme-foot,
html[data-theme="dark"] .pme-sec{border-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .pmc-hd-btn.primary{background:var(--accent);border-color:var(--accent)}

@media(max-width:980px){
  .pmc{grid-template-columns:minmax(0,1fr);position:relative}
  .pmc-rail,.pmc-detail{position:absolute;inset:0;transition:transform .22s ease}
  .pmc-detail{transform:translateX(100%);z-index:4}
  .pmc:has(.pmc-detail .pmc-hero) .pmc-detail{transform:translateX(0)}
  .pme-row{grid-template-columns:minmax(0,1fr) 30px;row-gap:10px}
  .pme-row .pme-f-sm{grid-column:1/2}
}
@media(max-width:560px){
  .pme-row-reg{grid-template-columns:minmax(0,1fr)}
  .pmc-cards{padding:0 14px 24px}
  .pmc-hero{padding:4px 14px 18px}
}
/* ---------- call log (auto-recorded, shown as a timeline) ---------- */
.pm-tl{padding:8px 4px 4px}
.pm-tl-day{display:flex;align-items:center;gap:10px;margin:12px 0 10px;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.pm-tl-day::after{content:'';flex:1;height:1px;background:var(--border)}
.pm-tl-item{position:relative;display:flex;gap:14px;padding:0 0 16px 0}
/* connecting rail between entries */
.pm-tl-item::before{content:'';position:absolute;left:15px;top:34px;bottom:0;width:2px;background:var(--border)}
.pm-tl-item:last-child::before{display:none}
.pm-tl-dot{width:32px;height:32px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  background:linear-gradient(140deg,#00B4D8,#0077B6 58%,#023E8A);color:#fff;box-shadow:0 3px 10px rgba(0,119,182,.3)}
.pm-tl-dot svg{width:14px;height:14px}
.pm-cl-noanswer .pm-tl-dot,.pm-cl-busy .pm-tl-dot,.pm-cl-wrong .pm-tl-dot{filter:saturate(.45) brightness(.95)}
.pm-cl-noanswer .pm-tl-dot svg,.pm-cl-busy .pm-tl-dot svg,.pm-cl-wrong .pm-tl-dot svg{transform:rotate(135deg)}
.pm-tl-body{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--border);border-radius:13px;background:var(--s2)}
html[data-theme="dark"] .pm-tl-body{background:rgba(255,255,255,.04);border-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .pm-tl-item::before,
html[data-theme="dark"] .pm-tl-day::after{background:rgba(199,210,254,.16)}

/* ---------- call log rows ---------- */
.pm-btn-sm{padding:7px 13px;font-size:11.5px}
.pm-calllog-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 20px;text-align:center;color:var(--muted)}
.pm-calllog-empty>svg{width:28px;height:28px;color:var(--faint);margin-bottom:3px}
.pm-calllog-empty strong{font-size:13.5px;color:var(--text)}
.pm-calllog-empty span{font-size:12px;line-height:1.55;max-width:400px}
/* outcome accent runs down the entry, matching the dot */
.pm-tl-item .pm-tl-body{border-left:3px solid var(--accent)}
.pm-cl-noanswer .pm-tl-body,.pm-cl-busy .pm-tl-body,.pm-cl-wrong .pm-tl-body{border-left-color:#C6851F}
.pm-cl-voicemail .pm-tl-body{border-left-color:#0096C7}
.pm-cl-main{display:flex;align-items:center;gap:12px}
.pm-cl-id{flex:1;min-width:0}
.pm-cl-line1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pm-cl-line1 strong{font-size:13px;font-weight:800;color:var(--text)}
.pm-cl-badge{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--al);color:var(--accent)}
.pm-cl-noanswer .pm-cl-badge,.pm-cl-busy .pm-cl-badge,.pm-cl-wrong .pm-cl-badge{background:rgba(226,163,61,.16);color:#C6851F}
.pm-cl-line2{font-size:11px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-cl-dur{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.pm-cl-dur b{font-size:16px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.pm-cl-dur span{font-size:8.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.pm-cl-dur[data-muted] b{color:var(--faint)}
.pm-cl-outcomes{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--border)}
.pm-cl-outcomes-label{flex:none;margin-right:3px;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
/* NOTE: the plain `.pm-outcome` rule below sets a light background, and
   `.pm-outcome.active` (defined earlier) sets white text - equal specificity,
   so the later background won and the selected label rendered white-on-white.
   The active rules here are scoped one level deeper so they always win. */
.pm-cl-outcomes .pm-outcome{padding:5px 11px;font-size:10.5px;background:var(--surface);color:var(--muted);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s}
.pm-cl-outcomes .pm-outcome:hover{border-color:var(--accent);color:var(--accent);background:var(--al)}
.pm-cl-outcomes .pm-outcome.active{
  background:linear-gradient(135deg,#00B4D8,#0077B6);border-color:#0077B6;color:#fff;
  box-shadow:0 3px 10px rgba(0,119,182,.32);font-weight:800}
.pm-cl-outcomes .pm-outcome.active::before{content:'✓';margin-right:5px;font-weight:900;font-size:10px;opacity:.95}
.pm-cl-outcomes .pm-outcome.active:hover{color:#fff;transform:translateY(-1px)}
/* the chosen reason picks up the same accent as the row's left edge */
.pm-cl-noanswer .pm-cl-outcomes .pm-outcome.active,
.pm-cl-busy .pm-cl-outcomes .pm-outcome.active,
.pm-cl-wrong .pm-cl-outcomes .pm-outcome.active{
  background:linear-gradient(135deg,#EDB44C,#C6851F);border-color:#C6851F;box-shadow:0 3px 10px rgba(198,133,31,.32)}
.pm-cl-voicemail .pm-cl-outcomes .pm-outcome.active{
  background:linear-gradient(135deg,#22C3E6,#0096C7);border-color:#0096C7;box-shadow:0 3px 10px rgba(0,150,199,.32)}
.pm-cl-addnote{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 12px;border:1px dashed var(--border2,var(--border));
  border-radius:9px;background:transparent;color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .14s}
.pm-cl-addnote svg{width:13px;height:13px}
.pm-cl-addnote:hover{border-color:var(--accent);color:var(--accent);background:var(--al)}
.pm-cl-note{display:flex;gap:9px;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--border);
  cursor:pointer;font-size:12.5px;line-height:1.55;color:var(--text);transition:border-color .14s}
.pm-cl-note:hover{border-color:var(--accent)}
.pm-cl-note>svg{width:14px;height:14px;flex:none;color:var(--accent);margin-top:2px}
.pm-cl-note>span{flex:1;min-width:0;word-break:break-word}
.pm-cl-noteedit{margin-top:10px}
.pm-cl-noteactions{display:flex;justify-content:flex-end;gap:7px;margin-top:8px}
/* manual "past call" form */
.pm-manual{margin:4px 0 14px;padding:15px 16px;border:1px dashed var(--accent);border-radius:13px;background:var(--al)}
.pm-manual-hd{display:flex;align-items:center;gap:8px;margin-bottom:13px;font-size:11.5px;font-weight:800;color:var(--accent)}
.pm-manual-hd svg{width:14px;height:14px}
.pm-manual-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.pm-manual .pm-input,.pm-manual .pm-textarea{background:var(--surface)!important}

.pm-locked{padding:18px 20px;font-size:12.5px;color:var(--muted);text-align:center}
.pm-locked-warn{display:flex;align-items:center;gap:12px;text-align:left;border-color:rgba(226,163,61,.45);
  background:linear-gradient(140deg,rgba(226,163,61,.13),var(--surface))}
.pm-locked-warn>svg{width:22px;height:22px;flex:none;color:#C6851F}
.pm-locked-warn>span{flex:1}
.pm-locked-warn strong{color:var(--text)}

/* ---------- activity - rendered as a conversation ---------- */
.pm-chat{padding:10px 18px 20px;display:flex;flex-direction:column}
.pm-tl-empty{padding:30px 20px;text-align:center;font-size:12px;color:var(--muted)}
.pm-chat-day{display:flex;align-items:center;gap:10px;margin:14px 0 12px;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.pm-chat-day::before,.pm-chat-day::after{content:'';flex:1;height:1px;background:var(--border)}
.pm-chat-msg{display:flex;align-items:flex-start;gap:10px;margin:4px 0 12px;max-width:100%}
.pm-chat-msg.out{flex-direction:row-reverse}
.pm-chat-av{width:32px;height:32px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:20px;
  background:linear-gradient(140deg,#94A3B8,#64748B);color:#fff;font-size:11px;font-weight:800;
  box-shadow:0 2px 7px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.25)}
.pm-chat-av.out{background:linear-gradient(140deg,#00B4D8,#0077B6 58%,#023E8A)}
.pm-chat-col{min-width:0;max-width:min(78%,560px);display:flex;flex-direction:column}
.pm-chat-msg.out .pm-chat-col{align-items:flex-end}
.pm-chat-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;padding:0 3px;flex-wrap:wrap}
.pm-chat-msg.out .pm-chat-meta{flex-direction:row-reverse}
.pm-chat-meta strong{font-size:11.5px;font-weight:800;color:var(--text)}
.pm-chat-meta time{font-size:10px;color:var(--faint)}
.pm-chat-bubble{position:relative;padding:10px 14px;border-radius:16px;min-width:0;
  background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 8px rgba(15,23,42,.06)}
.pm-chat-msg.in .pm-chat-bubble{border-top-left-radius:5px}
.pm-chat-msg.out .pm-chat-bubble{border-top-right-radius:5px;color:#fff;border-color:rgba(0,180,216,.4);
  background:linear-gradient(140deg,#00B4D8,#0077B6 55%,#023E8A);box-shadow:0 6px 18px rgba(0,119,182,.28)}
.pm-chat-subject{font-size:13px;font-weight:800;margin-bottom:4px;color:inherit}
.pm-chat-text{font-size:13px;line-height:1.6;word-break:break-word;color:inherit}
.pm-chat-foot{display:flex;align-items:center;gap:8px;margin-top:5px;padding:0 3px;flex-wrap:wrap}
.pm-chat-msg.out .pm-chat-foot{flex-direction:row-reverse}
.pm-chat-foot>span{font-size:10px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
/* status badges (shared) */
.pm-badge{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.pm-badge svg{width:10px;height:10px}
.pm-badge.queued{background:rgba(226,163,61,.16);color:#C6851F}
.pm-badge.ok{background:rgba(34,160,107,.14);color:#1A9A6B}
.pm-badge.failed{background:rgba(229,72,77,.13);color:#E5484D}
html[data-theme="dark"] .pm-chat-bubble{background:rgba(255,255,255,.06);border-color:rgba(199,210,254,.16)}
html[data-theme="dark"] .pm-chat-msg.out .pm-chat-bubble{background:linear-gradient(140deg,#00B4D8,#0077B6 55%,#023E8A)}
html[data-theme="dark"] .pm-chat-day::before,
html[data-theme="dark"] .pm-chat-day::after{background:rgba(199,210,254,.16)}
@media(max-width:600px){.pm-chat-col{max-width:82%}.pm-chat{padding:8px 12px 16px}}

/* ---------- call overlay ---------- */
.pm-call-overlay{position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(circle at 25% 12%,rgba(0,180,216,.3),transparent 55%),radial-gradient(circle at 80% 88%,rgba(0,119,182,.24),transparent 55%),linear-gradient(160deg,rgba(2,12,30,.95),rgba(0,42,82,.92));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pm-call-overlay.show{display:flex}
.pm-call-modal{width:min(420px,100%);max-height:92vh;overflow-y:auto;border-radius:26px;padding:24px 28px 22px;display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 30px 70px rgba(0,10,30,.5),inset 0 1px 0 rgba(255,255,255,.32);animation:pmCallIn .3s cubic-bezier(.22,1,.36,1) both}
@keyframes pmCallIn{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.pm-call-note{display:flex;align-items:flex-start;gap:8px;width:100%;padding:9px 12px;margin-bottom:16px;border-radius:11px;
  background:rgba(226,163,61,.16);border:1px solid rgba(226,163,61,.38);color:#F3D08A;font-size:11px;line-height:1.45;font-weight:600}
.pm-call-note svg{width:14px;height:14px;flex:none;margin-top:1px;color:#F3BC4E}
.pm-call-av{width:100px;height:100px;border-radius:32px;display:flex;align-items:center;justify-content:center;position:relative;
  background:linear-gradient(140deg,#00B4D8,#0077B6 58%,#023E8A);color:#fff;font-size:31px;font-weight:800;
  box-shadow:0 8px 28px rgba(0,180,216,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.pm-call-av::before,.pm-call-av::after{content:'';position:absolute;inset:0;border-radius:32px;border:2px solid rgba(0,180,216,.5);animation:pmCallPulse 1.9s ease-out infinite}
.pm-call-av::after{animation-delay:.65s}
@keyframes pmCallPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.pm-call-name{font-size:19px;font-weight:800;color:#fff;margin-top:15px}
.pm-call-num{font-size:12.5px;color:rgba(255,255,255,.7);font-weight:600;margin-top:2px}
.pm-call-timer{font-size:15px;font-weight:800;color:#7FE3FF;font-variant-numeric:tabular-nums;margin-top:9px;letter-spacing:.04em}
.pm-keypad{width:100%;margin-top:16px}
.pm-keypad-display{height:30px;text-align:center;font-size:17px;font-weight:700;color:#fff;letter-spacing:.14em;font-variant-numeric:tabular-nums;overflow:hidden}
.pm-keypad-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px}
.pm-keypad-grid button{height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;
  font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;transition:background .14s,transform .14s}
.pm-keypad-grid button:hover{background:rgba(255,255,255,.2)}
.pm-keypad-grid button:active{transform:scale(.94)}
.pm-call-ctls{display:flex;gap:16px;margin-top:22px}
.pm-cctl{display:flex;flex-direction:column;align-items:center;gap:6px;width:70px;padding:0;border:none;background:transparent;
  color:rgba(255,255,255,.85);font-family:inherit;font-size:10px;font-weight:700;cursor:pointer}
.pm-cctl>svg{width:50px;height:50px;padding:15px;box-sizing:border-box;border-radius:17px;border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.1);transition:all .16s cubic-bezier(.34,1.56,.64,1)}
.pm-cctl:hover>svg{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.pm-cctl.on>svg{background:#fff;color:#023E8A;border-color:#fff}
.pm-call-hang{width:62px;height:62px;margin-top:24px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:linear-gradient(135deg,#FF6B6B,#E5484D);color:#fff;box-shadow:0 8px 24px rgba(229,72,77,.45);transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s}
.pm-call-hang svg{width:25px;height:25px;transform:rotate(135deg)}
.pm-call-hang:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 12px 30px rgba(229,72,77,.55)}
.pm-call-hint{font-size:10.5px;color:rgba(255,255,255,.5);margin-top:12px}
/* disposition modal reuses the field styles, re-skinned for the dark overlay */
.pm-disp-modal{align-items:stretch;padding:24px 26px 20px}
.pm-disp-head{margin-bottom:16px;display:flex;flex-direction:column;gap:3px}
.pm-disp-head strong{font-size:17px;font-weight:800;color:#fff}
.pm-disp-head span{font-size:12px;color:rgba(255,255,255,.65)}
.pm-disp-modal .pm-field label{color:rgba(255,255,255,.6)}
.pm-disp-modal .pm-input,.pm-disp-modal .pm-textarea{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important}
.pm-disp-modal .pm-input:focus,.pm-disp-modal .pm-textarea:focus{border-color:#7FE3FF!important;background:rgba(255,255,255,.16)!important;box-shadow:none}
.pm-disp-modal .pm-textarea::placeholder{color:rgba(255,255,255,.4)}
.pm-disp-modal .pm-input[readonly]{opacity:.6}
.pm-disp-modal .pm-seg{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.pm-disp-modal .pm-seg-btn{color:rgba(255,255,255,.7)}
.pm-disp-modal .pm-seg-btn.active{background:#fff;color:#023E8A}
.pm-disp-modal .pm-outcome{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
.pm-disp-modal .pm-outcome:hover{background:rgba(255,255,255,.18);color:#fff}
.pm-disp-modal .pm-outcome.active{background:linear-gradient(135deg,#00B4D8,#0077B6);border-color:#00B4D8;color:#fff}
.pm-disp-modal .pm-btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
.pm-disp-modal .pm-btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff}
.pm-disp-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:6px}

/* ---------- dark mode ---------- */
html[data-theme="dark"] .pm-directory,
html[data-theme="dark"] .pm-card{background:#121A2E;border-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .pm-dir-head,
html[data-theme="dark"] .pm-card-hd,
html[data-theme="dark"] .pm-tabs{border-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .pm-dir-search input,
html[data-theme="dark"] .pm-input,
html[data-theme="dark"] .pm-textarea,
html[data-theme="dark"] .pm-cline,
html[data-theme="dark"] .pm-pcstat,
html[data-theme="dark"] .pm-tl-text,
html[data-theme="dark"] .pm-seg{background:rgba(255,255,255,.05)!important;border-color:rgba(199,210,254,.14)!important}
html[data-theme="dark"] .pm-dir-card{background:#141D33;border-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .pm-dir-card:hover{border-color:rgba(0,180,216,.45)}
html[data-theme="dark"] .pm-dir-card.active{background:rgba(0,119,182,.2);border-color:var(--accent)}
html[data-theme="dark"] .pm-dir-filter,
html[data-theme="dark"] .pm-btn,
html[data-theme="dark"] .pm-mini,
html[data-theme="dark"] .pm-outcome{background:rgba(255,255,255,.05);border-color:rgba(199,210,254,.14)}
html[data-theme="dark"] .pm-tpl-menu{background:#141D33;border-color:rgba(199,210,254,.16)}
html[data-theme="dark"] .pm-tl-item::before,
html[data-theme="dark"] .pm-tl-day::after{background:rgba(199,210,254,.16)}
html[data-theme="dark"] .pm-av-dot{border-color:#141D33}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .pm-hero{gap:16px;padding:16px 20px}
  .pm-hero-sub{display:none}
  .pm-body{grid-template-columns:290px minmax(0,1fr)}
  .pm-pc-contact{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:880px){
  .pm-body{grid-template-columns:minmax(0,1fr);position:relative}
  .pm-directory,.pm-workspace{position:absolute;inset:0;transition:transform .22s ease}
  .pm-workspace{transform:translateX(100%);background:var(--s2);z-index:5}
  .pm-shell.pm-show-detail .pm-directory{transform:translateX(-22%);pointer-events:none}
  .pm-shell.pm-show-detail .pm-workspace{transform:translateX(0)}
  .pm-back-btn{display:inline-flex}
  .pm-hero-tiles{width:100%;margin-left:0}
  .pm-tile{flex:1;min-width:0}
  .pm-workspace{padding:16px 14px 24px}
}
@media(max-width:520px){
  .pm-hero-title{font-size:18px}
  .pm-pc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm-field-row{grid-template-columns:minmax(0,1fr)}
  .pm-call-ctls{gap:10px}
  .pm-form-foot{flex-direction:column;align-items:stretch}
  .pm-foot-right{margin-left:0;justify-content:space-between}
}

/* Data Privacy consent on the patient-facing form. */
.pf-dpa-intro{font-size:13.5px;line-height:1.6;color:#4a5568;margin-bottom:16px}
.pf-dpa-row{display:flex;align-items:flex-start;gap:11px;margin-bottom:15px;cursor:pointer}
.pf-dpa-row input{margin-top:3px;flex-shrink:0;width:17px;height:17px;cursor:pointer}
.pf-dpa-label{display:block;font-weight:600;font-size:13.5px;color:#1a202c}
.pf-dpa-sub{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;color:#5a6675}
.pf-dpa-note{font-size:12.5px;color:#5a6675;margin:14px 0 4px;font-style:italic}

/* ---------- Meeting Rooms ---------- */
.mtg-rows{display:flex;flex-direction:column;gap:6px}
.mtg-row{display:flex;align-items:center;gap:12px;padding:9px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface);transition:border-color .12s,box-shadow .12s}
.mtg-row:hover{border-color:var(--accent);box-shadow:0 3px 10px rgba(0,119,182,.06)}
.mtg-row.is-live{border-color:#5ec27a;background:rgba(94,194,122,.06)}
.mtg-row-main{flex:1;min-width:0}
.mtg-row-title{font-weight:650;font-size:13.5px;display:flex;align-items:center;gap:9px}
.mtg-live{font-size:10px;font-weight:800;color:#2f9e56;letter-spacing:.04em}
.mtg-row-sub{font-size:12px;color:var(--muted);margin-top:2px}
.mtg-row-actions{display:flex;gap:7px;flex-shrink:0}
.mtg-lobby{margin-bottom:14px;border-color:var(--accent)}
.mtg-lobby-row{display:flex;align-items:center;gap:11px;padding:8px 0}
.mtg-lobby-name{flex:1;font-size:13px;font-weight:600}
.mtg-admit,.mtg-deny{width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.mtg-admit{background:#2f9e56}
.mtg-deny{background:#e05252}
.mtg-modal{position:fixed;inset:0;background:rgba(8,14,22,.6);display:none;align-items:center;justify-content:center;z-index:9000}
/* The call overlay sits at 9500, so anything opened from inside a call has
   to sit above it - at 9000 the record-consent dialog opened invisibly
   behind the video and only became visible after leaving the meeting. */
#mtgRecModal{z-index:9600}
.mtg-modal.show{display:flex}
.mtg-modal-card{background:var(--surface);border-radius:14px;padding:22px;max-width:560px;width:92%}
.mtg-modal-title{font-weight:700;font-size:15px;margin-bottom:6px}
.mtg-modal-card input{width:100%;font-size:12.5px}

/* In-call: dark stage with a floating control bar along the bottom of the video. */
.mtg-call{position:fixed;inset:0;background:#0f1216;z-index:9500;display:flex}
.mtg-call-inner{display:flex;width:100%;height:100%;gap:12px;padding:12px;box-sizing:border-box}
.mtg-stage{position:relative;flex:1;border-radius:16px;overflow:hidden;background:#12161c;display:flex;flex-direction:column}
/* Header sits over the video, so it fades rather than sitting on a bar - and
   the gradient runs further than the text it carries, or the title becomes
   unreadable the moment someone with a bright camera takes the top-left tile. */
.mtg-stage-head{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:13px 18px 26px;z-index:3;color:#fff;
  background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,.28) 55%,transparent);
  pointer-events:none}
.mtg-stage-head > *{pointer-events:auto}
.mtg-stage-name{font-size:14.5px;font-weight:650;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* Tabular figures stop the clock jittering as the digits change. */
.mtg-stage-timer{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.82;
  flex:none;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.mtg-video-main{flex:1;position:relative;display:flex;align-items:center;justify-content:center}
.mtg-video-main video{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.mtg-novideo{color:rgba(255,255,255,.5);font-size:13px}
.mtg-rail{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;
  flex-direction:row;align-items:center;gap:8px;z-index:5;
  padding:8px 10px;border-radius:999px;
  background:rgba(18,23,30,.55);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.11);box-shadow:0 8px 32px rgba(0,0,0,.38)}
.mtg-rbtn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.10);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);color:#eaf1f8;
  transition:transform .14s cubic-bezier(.2,.8,.3,1),background .16s,color .16s,border-color .16s}
.mtg-rbtn:hover{transform:scale(1.06);background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.22)}
.mtg-rbtn:focus-visible{outline:2px solid #6fbcf0;outline-offset:2px}
.mtg-rbtn svg{width:19px;height:19px}
/* Camera and microphone are reached for constantly; everything else is
   occasional. The class is kept because docked mode picks the two device
   buttons out by it - sizing is now uniform across the bar. */
.mtg-rbtn-primary{width:50px;height:50px}
.mtg-rbtn-primary svg{width:22px;height:22px}
/* A hairline divider, now vertical - the bar runs across, not down. Unused by
   the five-control bar, kept for the docked card and anything that adds one. */
.mtg-rail-sep{width:1px;height:26px;margin:0 4px;background:rgba(255,255,255,.13);flex:none}
.mtg-rail-sep.wide{margin:0 8px}
/* "off" means a device is switched off - muted, camera down. Red-tinted so it
   reads as a state at a glance rather than just a dimmer button. */
.mtg-rbtn.off{background:rgba(240,85,47,.20);border-color:rgba(240,85,47,.40);color:#ff9d82}
.mtg-rbtn.on{background:#3f9d5f;border-color:rgba(255,255,255,.22);color:#fff;box-shadow:0 0 0 3px rgba(63,157,95,.20)}
.mtg-rbtn.rec{background:rgba(240,60,60,.24);border-color:rgba(240,60,60,.5);color:#ff8a8a}
.mtg-rbtn.mtg-hang{background:#e14526;border-color:rgba(255,255,255,.18);color:#fff;width:50px;height:50px;
  box-shadow:0 4px 18px rgba(225,69,38,.42)}
.mtg-rbtn.mtg-hang:hover{background:#f0552f}
.mtg-rbtn.mtg-hang svg{width:23px;height:23px}
@media(prefers-reduced-motion:reduce){.mtg-rbtn{transition:none}.mtg-rbtn:hover{transform:none}}
.mtg-strip{position:absolute;left:18px;bottom:18px;display:flex;gap:10px;z-index:4}
.mtg-self{width:150px;height:96px;border-radius:10px;overflow:hidden;background:#1d232b;border:2px solid rgba(255,255,255,.16)}
.mtg-self video{width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* Roster / chat panel. Frosted to match the rail, and given real row rhythm
   the flat list with no separation made five people read as one block of text. */
.mtg-side{width:296px;flex-shrink:0;border-radius:16px;color:#e8edf2;display:flex;flex-direction:column;overflow:auto;
  background:rgba(21,26,33,.72);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 10px 36px rgba(0,0,0,.34)}
.mtg-side.hidden{display:none}
.mtg-side-head{display:flex;justify-content:space-between;padding:14px 16px 8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.mtg-side-row{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:2px 8px;font-size:13px;border-radius:10px;
  transition:background .14s}
.mtg-side-row:hover{background:rgba(255,255,255,.06)}
/* Row actions stay out of the way until the row is hovered or focused, so a
   five-person roster is names first and controls second. */
.mtg-side-row .mtg-side-mute{opacity:0;transition:opacity .14s,background .12s,color .12s,border-color .12s}
.mtg-side-row:hover .mtg-side-mute,
.mtg-side-row:focus-within .mtg-side-mute{opacity:1}
@media(hover:none){.mtg-side-row .mtg-side-mute{opacity:1}}
@media(max-width:900px){.mtg-side{display:none}}

/* Guest-facing meeting page (patients / law firms, no account). */
.mtg-guest{min-height:100vh;background:linear-gradient(160deg,#eaf6fb,#f7fbfd)}
/* In call the guest page becomes a full-viewport stage, exactly like the staff
   overlay. It previously kept the scrolling document layout, where the stage's
   `height:100%` had no fixed parent height to resolve against, so the entire
   call collapsed into a thin strip across the top of the page. */
.mtg-guest.incall{position:fixed;inset:0;background:#0f1216;display:flex;overflow:hidden}
.mtg-guest.incall>.mtg-call-inner{width:100%;height:100%}
.mtg-guest-wrap{max-width:460px;margin:0 auto;padding:56px 20px}
.mtg-guest-brand{text-align:center;font-size:23px;font-weight:800;color:#0f2233}
.mtg-guest-brand span{color:#1c86c9}
.mtg-guest-sub{text-align:center;font-size:10.5px;letter-spacing:.14em;color:#7c8b99;margin:4px 0 22px;font-weight:700}
.mtg-guest-card{background:#fff;border-radius:14px;padding:26px 24px;box-shadow:0 6px 26px rgba(16,44,66,.09);text-align:center}
.mtg-guest-title{font-size:17px;font-weight:700;color:#12293c}
.mtg-guest-meta{font-size:12.5px;color:#6b7a88;margin-top:5px}
.mtg-guest-label{display:block;text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;color:#54626f;margin:20px 0 6px}
.mtg-guest-card input{width:100%;padding:11px 13px;border:1px solid #d7e2ea;border-radius:9px;font-size:14px;box-sizing:border-box}
.mtg-guest-note{font-size:12px;color:#7c8b99;margin-top:10px}
.mtg-guest-btn{width:100%;margin-top:16px;padding:12px;border:none;border-radius:9px;background:#1c86c9;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.mtg-guest-btn:hover{background:#1873ad}
.mtg-guest-err{color:#b8342a}
.mtg-guest-foot{text-align:center;font-size:11px;color:#93a2b0;margin-top:18px}
.mtg-guest-spin{width:30px;height:30px;margin:0 auto 14px;border:3px solid #dcebf4;border-top-color:#1c86c9;border-radius:50%;animation:mtgSpin .9s linear infinite}
@keyframes mtgSpin{to{transform:rotate(360deg)}}
/* The page strip is dark, so the subtitle needs its own colour - inheriting
   .small-muted left it near-black on dark blue and effectively unreadable. */
.mtg-strip-sub{font-size:12px;color:rgba(255,255,255,.82);margin-top:3px;line-height:1.45}
#page-meetings .pt-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#page-meetings .pt-n{color:#fff}
/* Meeting create/schedule dialog. */
.mtg-modal-card{text-align:left}
.mtg-f-label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
.mtg-modal-card input:not([type=checkbox]):not([type=radio]),.mtg-modal-card select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:9px;font-size:13.5px;box-sizing:border-box;background:var(--surface);color:var(--text)}
.mtg-f-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
.mtg-f-err{color:#c0392b;font-size:12.5px;min-height:17px;margin-top:10px}
.mtg-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}

/* Call grid - every participant gets a tile, and the grid reflows with the
   head count and the viewport instead of a single fixed speaker frame. */
/* The bottom padding is what clears the control bar, which floats over the
   video. It used to be on the right, for the rail that lived there. */
.mtg-grid{flex:1;display:flex;flex-wrap:wrap;gap:10px;padding:52px 16px 92px;box-sizing:border-box;
  min-height:0;justify-content:center;align-content:center}
.mtg-tile{position:relative;background:#1b2129;border-radius:12px;overflow:hidden;flex:0 0 auto;
  width:min(420px,44vw);
  display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;aspect-ratio:16/9}
.mtg-tile-video{position:absolute;inset:0}
/* Faces sit in the upper third of a camera frame, not the middle. Tiles stretch
   to fill the grid, so they are rarely 16:9 and `cover` has to crop - centring
   that crop took the tops of people's heads off. Biasing it upward keeps the
   head and shoulders in frame at any tile shape. */
.mtg-tile-video video{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}
/* Not constraining tile size here: centring or capping the grid
   items stops them stretching, which is what left dead space around a short
   row of tiles before. Filling stays; only the crop position changes. */
.mtg-tile-avatar{position:relative;width:66px;height:66px;border-radius:50%;background:linear-gradient(140deg,#2f7fc4,#1a5f9e);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;letter-spacing:.02em}
.mtg-tile-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:7px;padding:16px 12px 9px;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.35) 55%,transparent);color:#fff}
.mtg-tile-name{font-size:13px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
.mtg-tile-mic{display:flex;flex-shrink:0}
.mtg-tile-mic svg{width:14px;height:14px;color:#ff6b5a}
.mtg-side-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtg-side-mic svg{width:14px;height:14px;color:#ff6b5a}
/* Host mute controls. The per-row button only appears for people who are
   currently unmuted - muting someone else is one-way, so there is nothing to
   toggle back. */
.mtg-side-mute{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  padding:0;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:transparent;
  color:rgba(255,255,255,.62);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.mtg-side-mute svg{width:14px;height:14px}
.mtg-side-mute:hover{background:rgba(255,107,90,.16);border-color:rgba(255,107,90,.5);color:#ff8a7a}
.mtg-side-mute:focus-visible{outline:2px solid #4aa8e0;outline-offset:2px}
.mtg-mute-all{margin:0 0 10px;width:100%}
/* Sidebar footer. Destructive and diagnostic actions were identical ghost
   buttons - the same visual weight for "close the appointment for the patient"
   and "show me some debug output". */
.mtg-side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:12px;
  border-top:1px solid rgba(255,255,255,.09)}
.mtg-danger-btn{width:100%;padding:10px 12px;border-radius:9px;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:650;letter-spacing:.01em;
  color:#ff9d82;background:rgba(240,85,47,.13);border:1px solid rgba(240,85,47,.42);
  transition:background .14s,color .14s}
.mtg-danger-btn:hover{background:rgba(240,85,47,.24);color:#ffb9a4}
.mtg-danger-btn:focus-visible{outline:2px solid #f0552f;outline-offset:2px}
.mtg-quiet-btn{width:100%;padding:6px;border:none;background:none;cursor:pointer;font:inherit;
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.35);transition:color .14s}
.mtg-quiet-btn:hover{color:rgba(255,255,255,.65)}
.mtg-quiet-btn:focus-visible{outline:2px solid #4aa8e0;outline-offset:2px;border-radius:6px}
/* Raised hand. Marked on the tile as well as in the roster, because in a busy
   call nobody is watching the side panel. */
.mtg-side-hand{flex:none;display:flex;color:#ffc857}
.mtg-side-hand svg{width:15px;height:15px}
.mtg-tile.handup{outline:2px solid #ffc857;outline-offset:-2px}
.mtg-tile{transition:box-shadow .16s ease-out,outline-color .16s ease-out}
.mtg-tile.speaking{outline:3px solid #35d07f;outline-offset:-3px;
  box-shadow:0 0 0 1px rgba(53,208,127,.45),0 0 24px 4px rgba(53,208,127,.38)}
@media(prefers-reduced-motion:reduce){.mtg-tile{transition:none}}
.mtg-tile-hand{position:absolute;top:9px;left:9px;z-index:3;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:rgba(20,24,30,.82);color:#ffc857;
  box-shadow:0 2px 10px rgba(0,0,0,.45);animation:mtgHandIn .22s ease-out}
.mtg-tile-hand svg{width:17px;height:17px}
@keyframes mtgHandIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.mtg-tile-hand{animation:none}}
/* Above the call.
   .mtg-call is z-index 9500 and .mtg-modal is 9000, so this dialog opened
   Behind the full-screen meeting - the rename button worked perfectly and
   nothing appeared to happen, which read as "the button is dead". */
#mtgPromptModal{z-index:9600}
#ctgConfirmModal{z-index:9700}
#forgotPasswordModal,#changePasswordModal{z-index:1100}
#mtgPromptModal input{width:100%;padding:10px 12px;border-radius:9px;font-size:13.5px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eaf4fb;margin-bottom:4px}
#mtgPromptModal input:focus{outline:2px solid #4aa8e0;outline-offset:1px}
.mtg-end-all{margin:12px;width:calc(100% - 24px)}

/* Narrow screens: the roster becomes a slide-over and tiles stack. The bar is
   along the bottom at every size now; it only needs to sit a little tighter. */
@media(max-width:900px){
  .mtg-call-inner{padding:8px;gap:0}
  .mtg-grid{padding:52px 12px 88px}
  .mtg-rail{bottom:12px;gap:7px}
  .mtg-side{position:absolute;right:8px;top:8px;bottom:8px;width:min(280px,78vw);z-index:6;box-shadow:0 8px 40px rgba(0,0,0,.5)}
  .mtg-side.hidden{display:none}
}

/* Presentation layout - a shared screen gets its own frame with the cameras
   alongside it, instead of replacing whoever was on the stage. */
/* Presenting: the shared screen is the reason everyone is looking, so it gets
   the room. Tighter padding and a narrower participant strip than the tile
   grid uses - a shared document is letterboxed to avoid cropping it, and every
   pixel of chrome around it comes straight out of how readable that text is. */
.mtg-present{flex:1;display:flex;gap:8px;padding:44px 10px 88px;box-sizing:border-box;min-height:0}
.mtg-present-main{position:relative;flex:1;min-width:0;background:#10151b;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.mtg-present-main .mtg-tile-video{position:absolute;inset:0}
.mtg-present-main video{width:100%;height:100%;object-fit:contain;background:#10151b}
.mtg-present-strip{width:150px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0}
/* Fullscreen: the only way to genuinely give a shared screen the whole display.
   Letterboxing is unavoidable while the frame shares the stage with a roster
   and a rail - this removes them. */
.mtg-present-main:fullscreen{border-radius:0;background:#000}
.mtg-present-main:fullscreen video{object-fit:contain}
.mtg-present-bar-btns{display:flex;gap:6px;flex:none}
.mtg-present-strip .mtg-tile{flex:0 0 auto;width:100%;height:auto}
@media(max-width:900px){
  .mtg-present{flex-direction:column;padding:52px 12px 92px}
  .mtg-present-strip{width:100%;flex-direction:row;height:88px}
  .mtg-present-strip .mtg-tile{height:88px;width:auto;flex:0 0 156px}
  .mtg-grid{padding:52px 12px 92px}
}

/* Background picker - floats above the control bar, over the video. */
/* Frosted to match the bar it hangs off. `bottom` clears the bar's height and
   padding so the panel no longer touches the buttons. */
.mtg-bg-panel{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);width:246px;display:none;
  background:rgba(20,25,32,.82);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:15px;
  box-shadow:0 12px 44px rgba(0,0,0,.5);z-index:7;color:#e8edf2}
.mtg-bg-panel.show{display:block}
.mtg-bg-panel.busy{opacity:.55;pointer-events:none}
.mtg-bg-title{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:10px}
.mtg-bg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mtg-bg-grid>*{margin:0}
/* box-sizing is the whole fix: the tiles are <button> (border-box by default)
   while the upload control is a <label> (content-box), so its 2px border made
   it 4px bigger than everything else and knocked the row out of line. */
.mtg-bg-opt{position:relative;box-sizing:border-box;width:100%;aspect-ratio:16/10;border-radius:9px;
  overflow:hidden;cursor:pointer;border:2px solid transparent;background:#2a323b;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;line-height:1;font-family:inherit}
.mtg-bg-opt:hover{border-color:rgba(255,255,255,.35)}
.mtg-bg-opt.on{border-color:#5ec27a}
.mtg-bg-opt img{width:100%;height:100%;object-fit:cover;display:block}
.mtg-bg-none,.mtg-bg-blur{font-size:10.5px;font-weight:700;color:#cfd8e0}
.mtg-bg-blur{filter:blur(1px)}
.mtg-bg-add{font-size:22px;font-weight:300;color:#9fb0c0;border:2px dashed rgba(255,255,255,.25)}
.mtg-bg-add input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.mtg-bg-add:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.mtg-bg-x{position:absolute;top:2px;right:3px;width:16px;height:16px;border-radius:50%;
  background:rgba(0,0,0,.65);color:#fff;font-size:9px;line-height:16px;text-align:center;opacity:0}
.mtg-bg-opt:hover .mtg-bg-x{opacity:1}
.mtg-bg-note{font-size:10.5px;color:rgba(255,255,255,.45);margin-top:10px;line-height:1.4}
/* Camera off: the panel states why the choices are unavailable instead of
   letting every click fail into a toast. */
.mtg-bg-warn{font-size:11px;line-height:1.45;color:#ffc978;background:rgba(255,176,71,.12);
  border:1px solid rgba(255,176,71,.3);border-radius:8px;padding:7px 9px;margin:0 0 10px}
.mtg-bg-grid.is-off{opacity:.42}
.mtg-bg-opt:disabled{cursor:not-allowed}
.mtg-bg-add.is-off{pointer-events:none}
@media(max-width:900px){
  .mtg-bg-panel{right:12px;left:12px;width:auto;top:auto;bottom:78px;transform:none}
  .mtg-bg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.mtg-menu{position:absolute;left:50%;bottom:88px;transform:translateX(-50%) translateY(6px);
  width:274px;display:none;padding:7px;border-radius:16px;z-index:8;color:#eaf1f8;
  background:linear-gradient(180deg,rgba(24,31,41,.94),rgba(14,19,26,.96));
  -webkit-backdrop-filter:blur(22px) saturate(165%);backdrop-filter:blur(22px) saturate(165%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 18px 52px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;transition:opacity .14s ease,transform .18s cubic-bezier(.2,.8,.3,1)}
.mtg-menu.show{display:block;opacity:1;transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){.mtg-menu{transition:none}}
.mtg-menu-item{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;
  border:none;background:none;padding:10px 12px;border-radius:11px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:#eaf1f8;text-align:left;line-height:1.25;
  transition:background .13s,color .13s}
.mtg-menu-item:hover{background:rgba(255,255,255,.11)}
.mtg-menu-item:focus-visible{outline:2px solid #6fbcf0;outline-offset:-2px}
.mtg-menu-item svg{width:18px;height:18px;flex:0 0 auto;opacity:.78;stroke-width:1.9}
/* An item that is currently doing something says so in colour, the same green
   the bar uses for an active control. */
.mtg-menu-item.on{color:#8fe6b0}
.mtg-menu-item.on svg{opacity:1}
.mtg-menu-tag{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.06em;
  background:rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:2px 8px;line-height:1.5}
.mtg-menu-tag.rec{background:#e0342a}
.mtg-menu-sep{height:1px;background:rgba(255,255,255,.1);margin:6px 10px}
/* Narrow: the menu is wider than the bar, so pin it to the viewport instead of
   letting it hang off the side. */
@media(max-width:420px){
  .mtg-menu{left:10px;right:10px;width:auto;transform:translateY(6px)}
  .mtg-menu.show{transform:translateY(0)}
}
/* A short window must never crop the menu. It was drawn from the bar upwards
   with no ceiling, so in a small window the top items were cut off the screen
   with no way to reach them. Scroll the menu instead of losing it. */
.mtg-menu{max-height:calc(100vh - 118px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.mtg-menu::-webkit-scrollbar{width:8px}
.mtg-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}

.mtg-ask{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  padding:14px;box-sizing:border-box;background:rgba(6,9,13,.68);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mtg-ask-card{width:min(360px,100%);box-sizing:border-box;border-radius:14px;padding:16px 16px 14px;
  background:linear-gradient(180deg,rgba(28,35,45,.99),rgba(17,22,29,1));
  border:1px solid rgba(255,255,255,.15);box-shadow:0 22px 64px rgba(0,0,0,.62);color:#eaf1f8;
  font-family:inherit;max-height:100%;overflow-y:auto}
.mtg-ask-title{font-size:14px;font-weight:800;margin-bottom:6px}
.mtg-ask-body{font-size:12.5px;line-height:1.55;color:rgba(234,241,248,.84)}
.mtg-ask-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.mtg-ask-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#eaf1f8;
  font:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:9px;cursor:pointer}
.mtg-ask-btn:hover{background:rgba(255,255,255,.17)}
.mtg-ask-btn:focus-visible{outline:2px solid #6fbcf0;outline-offset:2px}
.mtg-ask-btn.primary{background:#2f8fd0;border-color:#2f8fd0;color:#fff}
.mtg-ask-btn.primary:hover{background:#3ba0e4}
.mtg-ask-btn.primary.danger{background:#e14526;border-color:#e14526}
.mtg-ask-btn.primary.danger:hover{background:#f0552f}
/* A floating window is 300px tall - generous padding would push the buttons
   out of it, which is the same failure in a different disguise. */
@media(max-height:360px){
  .mtg-ask{padding:9px}
  .mtg-ask-card{padding:12px 13px 11px;border-radius:12px}
  .mtg-ask-title{font-size:12.5px}
  .mtg-ask-body{font-size:11.5px;line-height:1.45}
  .mtg-ask-actions{margin-top:11px;gap:6px}
  .mtg-ask-btn{padding:7px 11px;font-size:11.5px}
}

/* Toasts for the floating window, for the same reason: showToast() writes into
   the portal's document, which is not the window being looked at. */
/* Above the bar, not over it - this only ever draws in the floating window,
   where the bar sits about 50px off the bottom and a toast at bottom:10px
   buried the very controls the message is about. */
.mtg-toast-host{position:fixed;left:10px;right:10px;bottom:62px;z-index:99998;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.mtg-toast{max-width:100%;box-sizing:border-box;padding:8px 12px;border-radius:10px;
  font-size:11.5px;font-weight:650;line-height:1.4;color:#eaf1f8;text-align:center;
  background:rgba(20,26,34,.96);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
.mtg-toast.ok{border-color:rgba(63,157,95,.55);color:#b6f0cb}
.mtg-toast.err{border-color:rgba(225,69,38,.6);color:#ffbdae}
/* Pop-out control on the presenting frame. */
.mtg-popout{margin-left:auto;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:11px;
  font-weight:700;padding:4px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.mtg-popout:hover{background:rgba(255,255,255,.3)}
/* Diagnostics readout - plain and copyable. */
.mtg-diag{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9999;
  width:min(560px,92vw);max-height:78vh;overflow:auto;background:#12171d;color:#dfe7ee;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;box-shadow:0 14px 50px rgba(0,0,0,.6)}
.mtg-diag.show{display:block}
.mtg-diag-head{display:flex;align-items:center;gap:8px;padding:12px 14px;font-weight:700;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.mtg-diag-head button{margin-left:auto;border:none;background:rgba(255,255,255,.16);color:#fff;
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer}
.mtg-diag-head button+button{margin-left:6px}
.mtg-diag pre{margin:0;padding:14px;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word}

/* Patient Privacy Notice - full page, shown before any intake question. */
.pf-pn{max-width:860px;margin:0 auto;padding:34px 22px 44px;color:#1f2b36}
.pf-pn-head{text-align:center;margin-bottom:26px}
.pf-pn-title{font-size:26px;font-weight:800;color:#0f2233;letter-spacing:-.01em}
.pf-pn-sub{font-size:12.5px;color:#6b7a88;margin-top:6px}
.pf-pn-body{background:#fff;border-radius:14px;padding:28px 30px;box-shadow:0 6px 26px rgba(16,44,66,.09)}
.pf-pn-sec{margin-bottom:22px}
.pf-pn-sec:last-child{margin-bottom:0}
.pf-pn-sec h3{font-size:14px;font-weight:750;color:#0f2233;margin:0 0 8px;letter-spacing:-.005em}
.pf-pn-sec p{font-size:13.5px;line-height:1.65;color:#3d4b58;margin:0 0 8px}
.pf-pn-sec ul{margin:6px 0 0;padding-left:20px}
.pf-pn-sec li{font-size:13.5px;line-height:1.6;color:#3d4b58;margin-bottom:4px}
.pf-pn-foot{background:#fff;border-radius:14px;padding:22px 26px;margin-top:16px;
  box-shadow:0 6px 26px rgba(16,44,66,.09);border:2px solid #1c86c9}
.pf-pn-agree{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.pf-pn-agree input{margin-top:3px;width:19px;height:19px;flex-shrink:0;cursor:pointer}
.pf-pn-agree span{font-size:13px;line-height:1.6;color:#2b3946}
.pf-pn-btn{width:100%;margin-top:18px;padding:14px;border:none;border-radius:10px;background:#1c86c9;
  color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.pf-pn-btn:disabled{background:#c3d3de;cursor:not-allowed}
.pf-pn-btn:not(:disabled):hover{background:#1873ad}
@media(max-width:640px){
  .pf-pn{padding:22px 14px 36px}
  .pf-pn-title{font-size:21px}
  .pf-pn-body,.pf-pn-foot{padding:20px 18px}
}

/* PHI access warning - present on every portal screen. Muted so it does not
   compete with clinical work, but never hidden: a warning nobody sees is not a
   warning. */
/* Pinned to the bottom of the viewport on short pages, and scrolling normally
   on long ones. `sticky` + `top:100vh` does that without turning the body into
   a flex column, which would disturb the sidebar/content layout the whole app
   is built on. */
/* Site footer.
   `top:100vh` holds it at the bottom of the viewport on short pages without
   fixing it there, so it never floats over content. The deep bottom padding
   clears the fixed .action-bar, which used to sit on top of it and cut it off. */
body{display:flex;flex-direction:column;min-height:100vh}
/* Same gradient the sidebar uses, so the footer reads as part of the same
   product rather than a bolted-on band. Not var(--text): that is redefined
   further up as #0F172A, a slate grey that does not belong to this palette. */
.ctg-phi-footer{margin-top:auto;width:100%;padding:34px 28px 84px;
  background:var(--sidebar-grad,linear-gradient(165deg,#03045E 0%,#023E8A 35%,#012247 70%,#010225 100%));
  color:rgba(255,255,255,.66);text-align:center}
.ctg-phi-inner{max-width:860px;margin:0 auto}
.ctg-phi-brand{font-family:'Instrument Serif',serif;font-size:17px;font-weight:600;color:#fff;letter-spacing:.01em}
/* "Group" gets the same cyan gradient as the sidebar and top-bar logo. */
.ctg-phi-brand span{background:linear-gradient(90deg,#48CAE4,#90E0EF,#00B4D8,#48CAE4);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ctg-phi-links{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin:16px 0 20px}
.ctg-phi-links button{border:none;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.78);cursor:pointer}
.ctg-phi-links button:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ctg-phi-text{margin:0;font-size:11px;line-height:1.7;color:rgba(255,255,255,.5)}
.ctg-phi-text strong{color:rgba(255,255,255,.82);font-weight:700}
.ctg-phi-base{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  font-size:11px;color:rgba(255,255,255,.45)}
/* The meeting call overlay and patient-facing forms take over the screen. */
html.pf-mode .ctg-phi-footer{display:none!important}
@media(max-width:700px){
  .ctg-phi-footer{padding:24px 16px 90px}
  .ctg-phi-links{gap:18px;margin:13px 0 16px}
  .ctg-phi-base{justify-content:center;text-align:center}
}

/* PHI notice - link on the login card, and a modal both it and the footer open. */
.auth-phi-link{display:block;text-align:center;width:100%;margin-top:16px;
  padding:9px;border:1px solid var(--border);border-radius:9px;background:transparent;cursor:pointer;
  font-size:11.5px;font-weight:600;color:var(--muted);font-family:inherit}
.auth-phi-link:hover{color:var(--text);border-color:var(--accent)}
/* On the login screen the footer collapses to one line - the full text belongs
   in the modal there, not squeezed under the sign-in card. */
/* On the login screen the footer is a quiet single band, not a full site footer. */
body.auth-active .ctg-phi-footer{margin-top:18px;padding:18px 20px 20px;background:transparent}
body.auth-active .ctg-phi-brand,body.auth-active .ctg-phi-base{display:none}
body.auth-active .ctg-phi-links button{color:var(--muted)}
body.auth-active .ctg-phi-links button:hover{color:var(--text)}
body.auth-active .ctg-phi-text{color:var(--muted)}
body.auth-active .ctg-phi-text strong{color:var(--text)}
.ctg-phi-modal{position:fixed;inset:0;background:rgba(6,12,20,.74);display:none;align-items:center;
  justify-content:center;z-index:10000;padding:20px;backdrop-filter:blur(3px)}
.ctg-phi-modal.show{display:flex}
.ctg-phi-card{background:#fff;border:1px solid #d8e7f0;border-radius:14px;max-width:580px;width:100%;
  box-shadow:0 24px 70px rgba(0,0,0,.45);overflow:hidden;backdrop-filter:none}
.ctg-phi-card-head{padding:18px 24px;font-size:15.5px;font-weight:800;
  color:#0f2540;background:#f4fafd;border-bottom:1px solid #dceaf3}
.ctg-phi-card-body{padding:20px 24px}
.ctg-phi-card-body p{font-size:13.5px;line-height:1.7;color:#33475b;margin:0 0 13px}
.ctg-phi-card-body p:last-child{margin-bottom:0}
.ctg-phi-card-body strong{color:#0f2540;font-weight:800}
.ctg-phi-card-foot{padding:4px 24px 22px;display:flex;justify-content:flex-end}
.ctg-phi-card-foot button{border:none;border-radius:9px;background:#1c86c9;color:#fff;
  font-size:13.5px;font-weight:700;padding:11px 24px;cursor:pointer;font-family:inherit}
.ctg-phi-card-foot button:hover{background:#1873ad}
/* Dark theme gets its own solid surface, not a tint of the page behind it. */
html[data-theme="dark"] .ctg-phi-card{background:#101c28;border-color:#24384a}
html[data-theme="dark"] .ctg-phi-card-head{background:#16273a;color:#eaf4fb;border-bottom-color:#24384a}
html[data-theme="dark"] .ctg-phi-card-body p{color:#bcd2e2}
html[data-theme="dark"] .ctg-phi-card-body strong{color:#fff}

/* The Language picker sits in the PMH list where every other row has a
   Yes / No / N-A button group. It was inline-styled and ended up a different
   size, so that one row never lined up. Sized to match the group it replaces. */
.yn-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  color:var(--text);text-align:left;line-height:1.35;text-overflow:ellipsis;
  padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.yn-select:hover{border-color:var(--accent)}

/* ---------------------------------------------------------------- Green room
   Device check shown before anyone is in the meeting. Used by both the staff
   pre-join dialog and the guest page, so it carries its own dark palette
   rather than inheriting either surrounding theme. */
.mtg-gr{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);gap:18px;align-items:start}
.mtg-gr-stage{position:relative;background:#11161c;border-radius:14px;overflow:hidden;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center}
/* Mirrored, like every other video app - an unmirrored self-view reads as
   broken to the person looking at it. */
.mtg-gr-stage video{width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:scaleX(-1);display:block}
.mtg-gr-off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:18px;color:rgba(255,255,255,.62);font-size:13px;line-height:1.5}
.mtg-gr-warn{color:#ffb4a6;max-width:34ch}
.mtg-gr-toggles{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:12px;z-index:2}
.mtg-gr-btn{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.94);color:#1a2129;box-shadow:0 3px 14px rgba(0,0,0,.32)}
.mtg-gr-btn svg{width:19px;height:19px}
.mtg-gr-btn.off{background:#f0552f;color:#fff}
.mtg-gr-side{min-width:0}
.mtg-gr-title{font-size:16px;font-weight:800;color:var(--text);line-height:1.3}
.mtg-gr-sub{font-size:12.5px;color:var(--muted);margin:3px 0 14px}
.mtg-gr-lb{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:12px 0 5px}
.mtg-gr-side select,.mtg-gr-side input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:9px;
  font-size:13px;box-sizing:border-box;background:var(--surface);color:var(--text)}
.mtg-gr-side select:disabled{opacity:.6}
/* Transcription consent on the guest join screen. The checkbox has to undo the
   full-width text-input rule above, or it stretches across the panel. */
.mtg-gr-consent{display:flex;gap:9px;align-items:flex-start;margin:12px 0 0;font-size:12.5px;line-height:1.45;
  color:var(--text);cursor:pointer;text-transform:none;letter-spacing:normal;font-weight:500}
.mtg-gr-consent span{text-transform:none;letter-spacing:normal}
.mtg-gr-side .mtg-gr-consent input{width:16px;height:16px;flex:none;margin:2px 0 0;padding:0;accent-color:var(--primary,#0077b6)}
.mtg-gr-consent em{display:block;font-style:normal;color:var(--muted);font-size:11.5px;margin-top:2px}
/* Bars move with real input - the only honest proof a microphone is working. */
.mtg-gr-meter{display:flex;gap:3px;align-items:flex-end;height:16px;margin-top:8px}
.mtg-gr-meter i{flex:1;height:100%;border-radius:2px;background:var(--border);transition:background .07s}
.mtg-gr-meter i.on{background:#3fae63}
.mtg-gr-action{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.mtg-gr-status{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
.mtg-gr-spin{width:15px;height:15px;flex-shrink:0;border:2px solid rgba(28,134,201,.25);border-top-color:#1c86c9;
  border-radius:50%;animation:mtgSpin .9s linear infinite}
.mtg-gr-go{padding:12px;border:none;border-radius:9px;background:#1c86c9;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.mtg-gr-go:hover{background:#1873ad}
.mtg-gr-go:disabled{opacity:.6;cursor:default}
.mtg-gr-cancel,.mtg-gr-retry{padding:10px;border:1px solid var(--border);border-radius:9px;background:transparent;
  color:var(--text);font-size:13px;font-weight:600;cursor:pointer}
@media(max-width:760px){.mtg-gr{grid-template-columns:minmax(0,1fr)}}

/* The guest green room is wider than the narrow join card that preceded it. */
.mtg-guest-wrap.wide{max-width:880px}
.mtg-guest-card.mtg-gr-card{text-align:left;padding:20px}

.mtg-modal-card.mtg-gr-modal{max-width:820px}
/* Knock rows in the in-call roster: buttons pushed to the right edge. */
.mtg-side-knock{gap:9px}
.mtg-side-knock .mtg-side-name{flex:1}
.mtg-side-knock .mtg-admit,.mtg-side-knock .mtg-deny{width:26px;height:26px;font-size:12px}

/* Background chooser inside the green room. */
.mtg-gr-bgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:2px}
.mtg-gr-bg,.mtg-gr-bgs button{position:relative;aspect-ratio:16/10;border-radius:8px;border:2px solid var(--border);
  background:var(--s2);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:0;font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mtg-gr-bgs button.on{border-color:#1c86c9;box-shadow:0 0 0 2px rgba(28,134,201,.25)}
.mtg-gr-bgs img{width:100%;height:100%;object-fit:cover;display:block}
.mtg-gr-bgblur{filter:blur(1.2px)}
.mtg-gr-bgx{position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:rgba(0,0,0,.62);
  color:#fff;font-size:8px;font-style:normal;display:flex;align-items:center;justify-content:center;line-height:1}
.mtg-gr-bgadd{font-size:17px;color:var(--muted)}
.mtg-gr-bgadd.busy{opacity:.5;pointer-events:none}
.mtg-gr-bgnote{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.45}

/* ------------------------------------------------------------- Recording
   A recorded clinical session is PHI and Maryland needs all-party consent, so
   the indicator is loud and always on screen - it IS the notice,
   not decoration. */
.mtg-rec-dot{display:inline-flex;align-items:center;gap:6px;background:#e0342a;color:#fff;font-size:11px;
  font-weight:800;letter-spacing:.08em;padding:3px 9px;border-radius:20px;margin-left:10px}
.mtg-rec-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:#fff;animation:mtgRecPulse 1.4s ease-in-out infinite}
@keyframes mtgRecPulse{0%,100%{opacity:1}50%{opacity:.25}}
.mtg-rbtn.rec{background:#e0342a;color:#fff}
.mtg-rec-law{background:rgba(224,52,42,.08);border:1px solid rgba(224,52,42,.32);border-radius:10px;
  padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--text);margin:4px 0 6px}
.mtg-rec-parties{display:flex;flex-wrap:wrap;gap:6px}
.mtg-rec-party{background:var(--s2);border:1px solid var(--border);border-radius:20px;padding:4px 11px;font-size:12.5px}
.mtg-rec-check{display:flex;align-items:flex-start;gap:9px;margin:16px 0 4px;font-size:12.5px;line-height:1.5}
.mtg-rec-check input{margin-top:2px;flex-shrink:0}

/* Recordings list on the meetings page. */
.mtg-rec-row{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px 14px;align-items:center;
  padding:9px 8px;border-bottom:1px solid var(--border);border-radius:8px;transition:background .12s}
.mtg-rec-row:hover{background:var(--s2)}
.mtg-rec-row:last-child{border-bottom:none}
.mtg-rec-title{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mtg-rec-sub{font-size:12px;color:var(--muted);margin-top:3px}
/* Five buttons (Play, Download, Share, Transcript, Delete) no longer fit on
   one line beside the title, so the last ones were being clipped off the
   right edge. Let the row give the actions their own line when needed. */
.mtg-rec-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.mtg-rec-actions .btn,.mtg-rec-actions a.btn{white-space:nowrap}
.mtg-rec-open{grid-column:1/-1}
.mtg-rec-open:not(:empty){margin-top:10px}
.mtg-rec-badge{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;
  border-radius:20px;background:var(--s2);color:var(--muted);border:1px solid var(--border)}
.mtg-rec-badge.ready{background:rgba(63,174,99,.14);color:#2c8a4b;border-color:rgba(63,174,99,.4)}
.mtg-rec-badge.recording{background:rgba(224,52,42,.14);color:#c22e25;border-color:rgba(224,52,42,.4)}
.mtg-rec-badge.failed,.mtg-rec-badge.tfailed{background:rgba(224,52,42,.1);color:#c22e25;border-color:rgba(224,52,42,.35)}
.mtg-rec-badge.tready{background:rgba(28,134,201,.12);color:#1873ad;border-color:rgba(28,134,201,.35)}

/* Transcript viewer. Speaker colour is what makes a diarised transcript
   readable at a glance - without it it is just a wall of text again. */
.mtg-tx{border:1px solid var(--border);border-radius:10px;background:var(--s2);overflow:hidden}
.mtg-tx-head{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:11.5px;font-weight:700;
  color:var(--muted);border-bottom:1px solid var(--border)}
.mtg-tx-head button{margin-left:auto}
.mtg-tx-body{max-height:380px;overflow:auto;padding:6px 0}
.mtg-tx-line{display:grid;grid-template-columns:52px 92px minmax(0,1fr);gap:10px;padding:5px 12px;font-size:13px;line-height:1.5}
.mtg-tx-at{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;padding-top:2px}
.mtg-tx-sp{font-size:11px;font-weight:800;padding-top:3px}
.mtg-tx-sp.s0{color:#1873ad}.mtg-tx-sp.s1{color:#2c8a4b}.mtg-tx-sp.s2{color:#a3562b}
.mtg-tx-sp.s3{color:#7a4bb5}.mtg-tx-sp.s4{color:#b5344b}.mtg-tx-sp.s5{color:#20808d}
.mtg-tx-t{word-break:break-word}
/* A translation of the line above it. Indented and quieter: the
   spoken words stay primary, the translation is an aid to reading them.
   Not .mtg-tx-tr - that name is already the Subtitles toggle button. */
.mtg-tx-xlate{display:block;margin-top:3px;padding-left:14px;position:relative;font-size:12.5px;color:var(--muted,#5a6a85)}
.mtg-tx-xlate::before{content:"→";position:absolute;left:0;opacity:.65}
.mtg-tx-xlate-k{font-weight:700;margin-right:6px;opacity:.8}
@media(max-width:700px){
  .mtg-rec-row{grid-template-columns:minmax(0,1fr)}
  .mtg-rec-actions{justify-content:flex-start}
  .mtg-tx-line{grid-template-columns:46px minmax(0,1fr);}
  .mtg-tx-sp{grid-column:2}
}

/* Consent row: checkbox left, text beside it - never stretched or wrapped into
   a column. `.plain-check` sets align-items:center with !important, so the
   top alignment for this multi-line label is set here at higher specificity. */
.mtg-modal-card .mtg-rec-check{display:flex!important;align-items:flex-start!important;gap:10px!important;
  margin:16px 0 4px!important;font-size:12.5px!important;font-weight:600!important;line-height:1.5!important;
  padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--s2)}
.mtg-modal-card .mtg-rec-check input[type=checkbox]{width:17px!important;height:17px!important;
  flex:0 0 17px!important;margin:1px 0 0!important;padding:0!important}
.mtg-modal-card .mtg-rec-check span{flex:1 1 auto;min-width:0}

/* The REC badge doubles as the stop control for whoever is hosting - the
   circular rail icon alone was not a discoverable way to stop a recording. */
button.mtg-rec-dot{border:none;cursor:pointer;font-family:inherit}
button.mtg-rec-dot:hover{background:#c22e25}
.mtg-rec-dot .mtg-rec-stop{border-left:1px solid rgba(255,255,255,.45);margin-left:7px;padding-left:8px;font-weight:700}

/* Pre-join recording warning. Shown only while a meeting is actually being
   recorded - a permanent banner would be ignored, which defeats the point. */
.mtg-gr-recwarn{display:flex;align-items:flex-start;gap:10px;background:rgba(224,52,42,.1);
  border:1px solid rgba(224,52,42,.45);border-radius:10px;padding:11px 13px;margin-bottom:14px;
  font-size:12.5px;line-height:1.5;color:var(--text)}
.mtg-gr-recwarn-dot{width:9px;height:9px;border-radius:50%;background:#e0342a;flex-shrink:0;margin-top:5px;
  animation:mtgRecPulse 1.4s ease-in-out infinite}

/* Mid-meeting notice: recording started while you were already in the room. */
.mtg-rec-toastbar{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:10px;background:rgba(224,52,42,.96);color:#fff;
  padding:11px 18px;border-radius:26px;font-size:13px;font-weight:600;
  box-shadow:0 6px 26px rgba(0,0,0,.4);max-width:min(560px,86vw);animation:mtgRecIn .25s ease-out}
@keyframes mtgRecIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ------------------------------------------- HIPAA Authorized User Policy gate
   A full-screen page between logging in and the portal. Its own
   surface rather than a modal: this is a document to be read, and a dismissible
   box invites dismissal. */
.hp-gate{position:fixed;inset:0;z-index:10000;background:linear-gradient(160deg,#eaf6fb,#f7fbfd);
  display:flex;align-items:center;justify-content:center;padding:22px;box-sizing:border-box}
body.hp-open{overflow:hidden}
.hp-shell{width:100%;max-width:940px;max-height:100%;background:#fff;border-radius:16px;
  box-shadow:0 18px 60px rgba(16,44,66,.18);display:flex;flex-direction:column;overflow:hidden}
.hp-head{padding:24px 30px 18px;border-bottom:1px solid #e6eef4;flex-shrink:0}
.hp-brand{font-size:14px;font-weight:800;color:#0f2233;letter-spacing:.01em}
.hp-brand span{color:#1c86c9}
.hp-head h1{font-size:21px;font-weight:800;color:#12293c;margin:7px 0 0;line-height:1.3}
.hp-meta{font-size:12px;color:#7c8b99;margin-top:6px}
/* The document scrolls, not the page - the accept controls stay pinned so the
   reader always knows where the decision is. */
.hp-body{overflow-y:auto;padding:6px 30px 18px;flex:1;min-height:0}
.hp-sec{padding:16px 0;border-bottom:1px solid #f0f5f9}
.hp-sec:last-child{border-bottom:none}
.hp-sec h3{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  color:#12293c;margin:0 0 9px;text-transform:uppercase}
.hp-sec h3 span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:#e8f3fa;color:#1873ad;font-size:11px;flex-shrink:0}
.hp-sec p{font-size:13.5px;line-height:1.65;color:#33475b;margin:0 0 9px}
.hp-sec p:last-child{margin-bottom:0}
.hp-sec ul{margin:0 0 9px;padding-left:20px}
.hp-sec li{font-size:13.5px;line-height:1.6;color:#33475b;margin-bottom:4px}
.hp-ack{background:#f4fafd;border:1px solid #d9ecf7;border-radius:12px;padding:18px 20px;margin:14px 0 4px}
.hp-ack h3 span{background:#1c86c9;color:#fff}
.hp-foot{flex-shrink:0;border-top:1px solid #e6eef4;padding:16px 30px 18px;background:#fbfdfe}
.hp-check{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.55;color:#12293c;
  font-weight:600;cursor:pointer;padding:13px 15px;border:1px solid #cfe3ef;border-radius:11px;background:#fff}
.hp-check input{width:18px;height:18px;flex:0 0 18px;margin-top:1px;accent-color:#1c86c9;cursor:pointer}
.hp-actions{display:flex;align-items:center;gap:10px;margin-top:13px;flex-wrap:wrap}
.hp-err{flex:1;min-width:0;font-size:12.5px;color:#b8342a}
.hp-out{padding:11px 18px;border:1px solid #d7e2ea;border-radius:9px;background:#fff;color:#54626f;
  font-size:13.5px;font-weight:600;cursor:pointer}
.hp-go{padding:11px 22px;border:none;border-radius:9px;background:#1c86c9;color:#fff;font-size:14px;
  font-weight:700;cursor:pointer}
.hp-go:hover:not(:disabled){background:#1873ad}
.hp-go:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:640px){
  .hp-gate{padding:0}
  .hp-shell{border-radius:0;max-height:100vh}
  .hp-head,.hp-body,.hp-foot{padding-left:18px;padding-right:18px}
  .hp-actions{flex-direction:column-reverse;align-items:stretch}
  .hp-err{order:3;text-align:center}
}
/* Explains a recording Azure never handed back - see mtgLoadRecordings. */
.mtg-rec-warn{grid-column:1/-1;margin-top:8px;padding:10px 12px;border-radius:9px;font-size:11.5px;
  line-height:1.6;background:rgba(224,52,42,.08);border:1px solid rgba(224,52,42,.3);color:var(--text)}
.mtg-rec-warn code{background:rgba(0,0,0,.07);padding:1px 5px;border-radius:4px;font-size:11px}
/* The guest notice must sit above the in-call stage (z-index 9500), or it
   opens invisibly behind the video - the same trap the record dialog hit. */
#mtgGuestNotice{z-index:9700}

/* ------------------------------------------------- Shared recording viewer
   Its own surface: whoever opens the link has no account and must never see
   portal chrome. Mirrors the guest meeting page. */
.rs-page{min-height:100vh;background:linear-gradient(160deg,#eaf6fb,#f7fbfd)}
.rs-wrap{max-width:820px;margin:0 auto;padding:48px 20px 60px}
.rs-brand{text-align:center;font-family:'Instrument Serif',serif;font-size:20px;color:#0f2233}
.rs-brand span{color:#1c86c9}
.rs-sub{text-align:center;font-size:10.5px;letter-spacing:.14em;color:#7c8b99;margin:4px 0 22px;font-weight:700}
.rs-card{background:#fff;border-radius:14px;padding:22px;box-shadow:0 6px 26px rgba(16,44,66,.09)}
.rs-title{font-size:18px;font-weight:800;color:#12293c}
.rs-meta{font-size:12.5px;color:#6b7a88;margin:5px 0 16px}
.rs-media{width:100%;border-radius:10px;background:#000;display:block}
audio.rs-media{background:transparent}
.rs-note{font-size:13px;color:#6b7a88;padding:14px 0}
.rs-err{color:#b8342a;font-size:14px}
.rs-tx{margin-top:18px;border:1px solid #dceaf3;border-radius:10px;background:#f7fbfd;overflow:hidden}
.rs-tx-head{display:flex;align-items:center;gap:10px;padding:10px 13px;font-size:11.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:#54626f;border-bottom:1px solid #dceaf3}
.rs-copy{margin-left:auto;border:none;background:none;font:inherit;font-size:11.5px;font-weight:800;
  color:#1c86c9;cursor:pointer;text-transform:none;letter-spacing:0}
.rs-tx-body{max-height:460px;overflow:auto;padding:8px 0}
.rs-tx-line{display:grid;grid-template-columns:52px 92px minmax(0,1fr);gap:10px;padding:5px 13px;
  font-size:13.5px;line-height:1.55;color:#33475b}
.rs-at{color:#8296a6;font-size:11.5px;font-variant-numeric:tabular-nums;padding-top:2px}
.rs-sp{font-size:11px;font-weight:800;padding-top:3px}
.rs-sp.s0{color:#1873ad}.rs-sp.s1{color:#2c8a4b}.rs-sp.s2{color:#a3562b}
.rs-sp.s3{color:#7a4bb5}.rs-sp.s4{color:#b5344b}.rs-sp.s5{color:#20808d}
.rs-t{word-break:break-word}
.rs-foot{text-align:center;font-size:11.5px;line-height:1.6;color:#7c8b99;margin-top:20px}
@media(max-width:640px){
  .rs-wrap{padding:28px 14px 40px}
  .rs-tx-line{grid-template-columns:46px minmax(0,1fr)}
  .rs-sp{grid-column:2}
}
/* Share dialog: must sit above the meetings page but below the in-call stage. */
#mtgShareModal{z-index:9200}
.mtg-share-out{margin-top:14px;padding:13px;border:1px solid rgba(63,174,99,.4);border-radius:10px;
  background:rgba(63,174,99,.08)}
.mtg-share-lead{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:9px}
.mtg-share-out input{margin-bottom:9px}
.mtg-share-list{margin-top:16px}
.mtg-share-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.mtg-share-row:last-child{border-bottom:none}
.mtg-share-row.dead{opacity:.5}
.mtg-share-row>div:first-child{flex:1;min-width:0}
.mtg-share-name{font-size:13px;font-weight:700;color:var(--text)}
.mtg-share-sub{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ------------------------------------------------------- Backup & Restore */
.bk-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.bk-table{width:100%;border-collapse:collapse;font-size:13px}
.bk-table th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border)}
.bk-table td{padding:10px;border-bottom:1px solid var(--border);color:var(--text)}
.bk-table tr:last-child td{border-bottom:none}
.bk-actions-h{text-align:right}
.bk-actions{text-align:right;white-space:nowrap}
.bk-actions .btn{margin-left:6px}
/* The two restore paths are visually different - one is safe and
   one is destructive, and they must never be mistaken for each other. */
.bk-safe{border-color:#3fae63!important;color:#2c8a4b!important}
.bk-safe:hover{background:rgba(63,174,99,.1)!important}
.bk-danger{border-color:#e0342a!important;color:#c0291f!important}
.bk-danger:hover{background:rgba(224,52,42,.1)!important}
.bk-danger-btn{background:#e0342a;color:#fff;border:none}
.bk-danger-btn:hover:not(:disabled){background:#c0291f}
.bk-danger-btn:disabled{opacity:.45;cursor:not-allowed}
.bk-mini{margin-top:14px}
.bk-mini td,.bk-mini th{padding:6px 10px;font-size:12.5px}
.bk-warn{border-radius:10px;padding:13px 15px;font-size:13px;line-height:1.6;margin-bottom:6px}
.bk-warn p{margin:8px 0 0}
.bk-warn-danger{background:rgba(224,52,42,.09);border:1px solid rgba(224,52,42,.45);color:var(--text)}
.bk-warn-safe{background:rgba(63,174,99,.09);border:1px solid rgba(63,174,99,.4);color:var(--text)}
.bk-ok{color:#2c8a4b;font-size:13px;font-weight:600}
.bk-bad{color:#c0291f;font-size:13px;font-weight:600}
.bk-confirm{display:block;margin-top:16px;font-size:12.5px;color:var(--text)}
.bk-confirm input{width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--border);border-radius:9px;
  font-size:14px;letter-spacing:.08em;box-sizing:border-box;background:var(--surface);color:var(--text)}
.bk-spin{width:26px;height:26px;margin:16px auto 4px;border:3px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:mtgSpin .9s linear infinite}
#bkModal .modal-body code{background:rgba(0,0,0,.07);padding:2px 6px;border-radius:4px;font-size:11.5px;word-break:break-all}
.bk-sched{border:1px solid rgba(63,174,99,.4);background:rgba(63,174,99,.08);border-radius:10px;
  padding:12px 14px;margin-bottom:14px;font-size:12.5px;line-height:1.6;color:var(--text)}
.bk-sched-late{border-color:rgba(224,152,42,.5);background:rgba(224,152,42,.1)}
.bk-sched-off{border-color:rgba(224,52,42,.45);background:rgba(224,52,42,.08)}
/* ACS-backed green-room preview: the surface that can actually show blur or a
   background image, since effects belong to a LocalVideoStream. */
.mtg-gr-acs{position:absolute;inset:0;display:none}
.mtg-gr-acs video{width:100%;height:100%;object-fit:cover;object-position:center 35%;
  transform:scaleX(-1);display:block}
.mtg-gr-bgs.busy{opacity:.55;pointer-events:none}
/* In-call device picker - same corner treatment as the background panel. */
.mtg-dev-panel{width:270px}
.mtg-dev-lb{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:12px 0 5px}
.mtg-dev-panel select{width:100%;padding:8px 10px;border-radius:8px;font-size:12.5px;
  background:rgba(255,255,255,.1);color:#eaf4fb;border:1px solid rgba(255,255,255,.18)}
.mtg-dev-panel select option{background:#171c22;color:#eaf4fb}
.mtg-dev-panel select:disabled{opacity:.6}
.yn-comment-structured{display:inline-flex;align-items:center}
.yn-comment-structured select{
  width:auto;flex:none;height:29px;padding:0 4px 0 8px;
  border:1px solid var(--border);border-radius:0;
  font-size:12px;font-family:inherit;font-weight:600;
  background:var(--surface);color:var(--text);cursor:pointer
}
.yn-comment-structured .yn-cmt-num{width:58px;border-radius:7px 0 0 7px;border-right:none}
.yn-comment-structured .yn-cmt-unit{width:84px;border-radius:0 7px 7px 0}
/* Focus lifts the segment above its neighbour so the shared edge doesn't clip
   the highlight, and restores the border the number half gives up. */
.yn-comment-structured select:focus{border-color:var(--accent);outline:none;position:relative;z-index:1}
.yn-comment-structured .yn-cmt-num:focus{border-right:1px solid var(--accent)}

/* Guests edit their own display name here - see mtgGuestSaveName. */
.mtg-name-row{display:flex;gap:6px;align-items:center}
.mtg-name-row input{flex:1;min-width:0;padding:8px 10px;border-radius:8px;font-size:12.5px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#eaf4fb}
.mtg-name-row input:focus{outline:2px solid #4aa8e0;outline-offset:1px}
.mtg-name-row .btn{flex:none}

/* In-meeting chat, in the side panel behind a People / Chat tab strip. */
.mtg-side-tabs{display:flex;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.10)}
.mtg-side-tab{flex:1;border:none;background:none;padding:14px 8px;cursor:pointer;font:inherit;
  font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5);position:relative;transition:color .14s,background .14s}
.mtg-side-tab:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.04)}
.mtg-side-tab:focus-visible{outline:2px solid #48CAE4;outline-offset:-2px}
.mtg-side-tab.active{color:#fff;box-shadow:inset 0 -2px 0 #48CAE4}
.mtg-side-tab span{display:inline-block;margin-left:6px;font-size:10.5px;background:rgba(255,255,255,.16);
  border-radius:9px;padding:1px 6px}
.mtg-side-tab .mtg-side-dot{background:#e0342a;color:#fff}
/* Live transcript panel. Shares the sidebar with People and Chat. */
.mtg-tx-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.09);flex-shrink:0}
.mtg-tx-toggle{flex:1;padding:8px 12px;border-radius:9px;cursor:pointer;font:inherit;font-size:12px;font-weight:650;
  color:#eaf1f8;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);transition:background .14s,border-color .14s}
.mtg-tx-toggle:hover:not(:disabled){background:rgba(255,255,255,.17)}
.mtg-tx-toggle:disabled{opacity:.6;cursor:default}
.mtg-tx-toggle.on{background:rgba(224,52,42,.18);border-color:rgba(224,52,42,.5);color:#ff9d90}
.mtg-tx-toggle:focus-visible{outline:2px solid #48CAE4;outline-offset:2px}
/* Save-to-file sits beside the toggle, not inside it - one is a live control,
   the other takes a copy away. */
.mtg-tx-save{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(255,255,255,.06);
  color:#cfe3f2;cursor:pointer;transition:background .14s,color .14s,border-color .14s}
.mtg-tx-save svg{width:16px;height:16px}
.mtg-tx-save:hover:not(:disabled){background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.26)}
.mtg-tx-save:disabled{opacity:.35;cursor:default}
.mtg-tx-save:focus-visible{outline:2px solid #48CAE4;outline-offset:2px}
.mtg-tx-live{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#57c298;flex:none}
.mtg-tx-live i{width:7px;height:7px;border-radius:50%;background:#57c298;animation:mtgTxPulse 1.6s ease-in-out infinite}
@keyframes mtgTxPulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.mtg-tx-live i{animation:none}}
.mtg-tx-err{margin:10px 14px 0;padding:8px 10px;border-radius:8px;font-size:11.5px;line-height:1.5;
  color:#ffc978;background:rgba(255,176,71,.12);border:1px solid rgba(255,176,71,.3)}
.mtg-tx-list{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.mtg-tx-row{display:flex;flex-direction:column;gap:2px}
.mtg-tx-who{display:flex;align-items:baseline;gap:7px;font-size:11px;font-weight:700;color:#8fd0f0}
.mtg-tx-at{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.mtg-tx-text{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.9)}
/* In-progress speech: visibly provisional, and never stored. */
.mtg-tx-partial{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.42);font-style:italic}
.mtg-side-live{display:inline-block;width:6px;height:6px;border-radius:50%;background:#57c298;margin-left:6px;vertical-align:middle}
/* Amber: somebody else is transcribing, not me. */
.mtg-side-live.other{background:#e9ac4b}
/* Handover notice - shown to a colleague who joined a session already being
   transcribed, so the file arriving at the end is not a surprise. */
.mtg-tx-note{margin:12px 14px 0;padding:9px 11px;border-radius:8px;font-size:11.5px;line-height:1.5;
  color:#cfe3f2;background:rgba(72,202,228,.10);border:1px solid rgba(72,202,228,.28)}

.mtg-chat-list{flex:1;min-height:0;overflow-y:auto;padding:12px 14px}
.mtg-chat-empty{font-size:12px;line-height:1.6;color:rgba(255,255,255,.5)}
.mtg-chat-row{margin-bottom:13px}
.mtg-chat-who{font-size:11.5px;font-weight:800;color:#9fd8f0;display:flex;align-items:center;gap:7px}
.mtg-chat-guest{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(255,255,255,.14);color:rgba(255,255,255,.72);border-radius:8px;padding:1px 6px}
.mtg-chat-at{margin-left:auto;font-weight:600;color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums}
.mtg-chat-body{font-size:13px;line-height:1.55;color:#e8edf2;margin-top:3px;word-break:break-word;white-space:pre-wrap}
.mtg-chat-compose{flex-shrink:0;border-top:1px solid rgba(255,255,255,.12);padding:10px 12px;
  display:flex;gap:8px;align-items:flex-end}
.mtg-chat-compose textarea{flex:1;min-width:0;resize:none;border-radius:9px;padding:8px 10px;font:inherit;
  font-size:12.5px;background:rgba(255,255,255,.1);color:#eaf4fb;border:1px solid rgba(255,255,255,.18)}
.mtg-chat-compose textarea::placeholder{color:rgba(255,255,255,.4)}
/* Guest side: same chat, lighter chrome to match the guest stage. */
.mtg-guest .mtg-chat-list{padding:12px}
/* Guest chat sits beside the stage, same width as the staff roster. */
.mtg-guest-chat{width:300px;flex-shrink:0;background:#171c22;border-radius:14px;color:#e8edf2;
  display:flex;flex-direction:column;overflow:hidden}
.mtg-call.mini .mtg-guest-chat{display:none!important}
.mtg-rbtn-dot{position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;
  background:#e0342a;border:2px solid #fff}
.mtg-rbtn{position:relative}
@media(max-width:900px){.mtg-guest-chat{position:absolute;right:8px;top:8px;bottom:8px;width:min(300px,80vw);z-index:6}}
.mtg-gr-bgnote.warn{color:#c0291f;font-weight:600}
/* Below this width the buttons cannot share a line with the title at all. */
@media(max-width:1200px){
  .mtg-rec-row{grid-template-columns:minmax(0,1fr)}
  .mtg-rec-actions{justify-content:flex-start;margin-top:4px}
}
/* "Background not working?" - an on-screen diagnosis, so nobody needs the console. */
.mtg-gr-why{border:none;background:none;padding:0;margin-top:8px;font:inherit;font-size:11.5px;
  font-weight:700;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.mtg-gr-why:hover{opacity:.8}
#mtgGrWhyBox{z-index:9800}
.mtg-gr-diag{background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:12px 14px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.7;color:var(--text);
  white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto;margin:0}
/* Five buttons fit any window this runs in. The bar is capped anyway, and it
   stays overflow:visible - a box that scrolls also clips, and a clipped bar
   cannot paint a button's label above itself. Below 380px the buttons shrink
   (further down) rather than the bar scrolling. */
.mtg-rail{max-width:calc(100% - 20px);overflow:visible}

/* End-of-meeting / not-admitted screens. Same navy-and-cyan palette as the
   portal, rather than one line of unstyled text. */
.mtg-guest-card.mtg-end{padding:38px 30px 34px;text-align:center}
.mtg-end-icon{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:linear-gradient(160deg,#CAF0F8,#90E0EF);color:#03045E}
.mtg-end-icon svg{width:30px;height:30px}
.mtg-end-icon-warn{background:linear-gradient(160deg,#ffe0dc,#ffc9c2);color:#a3271d}
.mtg-end-title{font-size:20px;font-weight:800;color:#0f2233;letter-spacing:-.01em}
.mtg-end-sub{font-size:13.5px;line-height:1.65;color:#54626f;margin:9px auto 0;max-width:38ch}
.mtg-end-note{font-size:12px;line-height:1.6;color:#7c8b99;margin:18px auto 0;max-width:40ch;
  padding-top:16px;border-top:1px solid #e6eef4}


/* The desktop rule that indents the bar for a docked sidebar sets both a
   margin and a 280px padding-left. The existing mobile reset undoes the
   margin and the width but not the padding, so on a narrow screen the bar
   kept a 280px hole on its left and pushed everything in it off the end. */
@media(max-width:900px){
  body.sidebar-visible .top-bar{padding-left:16px!important;padding-right:16px!important}
}

@media(max-width:760px){
  .top-bar{padding:0 14px!important;gap:10px}
  body.sidebar-visible .top-bar{padding-left:14px!important;padding-right:14px!important}
  /* Each of the three bar groups may shrink, but none may collapse a child
     below its own text - that is what broke the name in two. */
  .top-bar>div{min-width:0}
  .top-bar>div:last-child{flex:0 0 auto}
  .menu-btn{margin-right:10px}

  /* !important is not decoration here: `.top-bar .logo` carries
     font-size:18px!important further up the file, which quietly beat every
     size set below it. That is why the name went on wrapping, and later
     truncating, no matter what this layer asked for. */
  .top-bar .logo,.top-bar .topbar-logo{font-size:15px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}

  body.topbar-has-tabs .top-bar .tabs{
    position:fixed;left:0;right:0;top:60px;z-index:49;
    margin:0;padding:8px 12px;gap:7px;
    background:linear-gradient(180deg,#062a6b 0%,#04205a 100%);
    border-bottom:1px solid rgba(72,202,228,.26);
    box-shadow:0 8px 22px rgba(2,6,35,.42);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;
    /* Soft right edge, so a pill cut off there reads as "more this way"
       rather than as a rendering fault. */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%)}
  body.topbar-has-tabs .top-bar .tabs::-webkit-scrollbar{display:none}
  /* Bigger than the desktop pills, not smaller: this is now the primary way
     round a seven-section form on a touchscreen. */
  body.topbar-has-tabs .top-bar .tab{
    flex:0 0 auto;padding:8px 15px;font-size:12.5px;font-weight:600;
    background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72)}
  body.topbar-has-tabs .top-bar .tab.active{
    background:#48CAE4;border-color:#48CAE4;color:#03045E;font-weight:800;
    box-shadow:0 2px 10px rgba(72,202,228,.4)}
  body.topbar-has-tabs .top-bar .tab.done{
    background:rgba(0,180,216,.22);border-color:rgba(0,180,216,.38);color:#90E0EF}
  /* The page starts below the new strip instead of under it. */
  body.topbar-has-tabs .wrap{padding-top:68px!important}
  /* Two stacked sticky headers plus a status readout is more chrome than a
     phone screen can spare - the progress strip scrolls away with the page
     it describes. (It also still pinned itself to 54px, the bar's height
     before the restyle made it 60, so it sat six pixels underneath.) */
  body.topbar-has-tabs #aceProgressStrip{position:static;top:auto}
  #aceProgressStrip{top:60px}

  /* Tapping a pill scrolls the section to the very top of the document,
     which on a phone is underneath the bar and the tab strip. */
  #sec-header,#sec-moi,#sec-hpi,#sec-pmh,#sec-ace,#sec-dx,#sec-plan{scroll-margin-top:116px}

  /* Page gutters. 40px each side spent a fifth of a 390px screen on nothing.
     The bottom keeps enough room to scroll clear of the fixed action bar. */
  .wrap{padding:20px 14px 112px!important}
  /* The registration list is a flex column that fills the viewport and does
     its own scrolling - it has no fixed bar to clear, and the reserved space
     would show as dead room under the table. */
  #page-registrationList .wrap{padding:14px 12px 12px!important}
  .card-hd{padding:14px 16px}
  .card-body,.page:not(#page-appointment) .card-body{padding:15px 16px}
  .pt-strip{padding:14px 16px}
  /* The bar's own children wrap, but its button group did not - a four-button
     exam bar ran straight off the right edge and "Save Day 1" was
     unreachable. The status line takes its own row above them. */
  .action-bar{padding:10px 14px!important;flex-wrap:wrap;gap:8px}
  .action-bar .ab-left{flex:1 1 100%;font-size:11.5px}
  .action-bar .ab-btns{flex:1 1 100%;flex-wrap:wrap;justify-content:stretch;gap:8px}
  .action-bar .ab-btns>.btn{flex:1 1 auto;justify-content:center}
  .modal-overlay{padding:10px}
  .modal-hd,.modal-body,.modal-ft{padding-left:15px;padding-right:15px}
  .modal{max-height:92vh}
  /* Clear of the action bar, which is taller once its buttons wrap. */
  .toast{bottom:96px;left:12px;right:12px;max-width:none}

  /* Touch targets. 9px of vertical padding is a 32px button - under the 44px
     everyone's thumb actually needs. */
  .btn{padding:11px 16px}
  .btn-sm{padding:9px 13px}
}

@media(max-width:560px){
  /* The account chip's name and role were the widest thing competing with
     the practice name, and both are repeated in the menu it opens - so the
     chip keeps its avatar and gives the row back to the logo. */
  .user-chip{margin-left:8px}
  .user-chip-btn{padding:4px;gap:0}
  /* !important because the name column carries an inline display:flex - a
     plain rule here loses to it and the chip stays full width. */
  .user-chip-btn>span:not(.user-chip-av),.user-chip-btn>svg{display:none!important}
  .user-menu{min-width:190px}

  .dash-welcome{padding:18px 16px}
  .dash-greeting{font-size:20px}
  .dash-cta{flex:1 1 auto;justify-content:center}
  .dash-kpi{padding:13px 12px 11px 15px}
  .dash-kpi-value{font-size:23px;letter-spacing:-.3px}
  .dash-funnel-row{grid-template-columns:88px minmax(0,1fr) auto}
}

/* Below this the KPI value and its label cannot share a 2-up cell without one
   of them being cut - a currency figure is not a number to abbreviate. */
@media(max-width:400px){
  .dash-kpi-grid{grid-template-columns:minmax(0,1fr)}
}

/* Last resort. With the section tabs moved out of the bar the full name fits
   comfortably down to about 340px, so this only catches the genuinely tiny
   screens - where it substitutes the short mark rather than letting the name
   truncate mid-word. */
@media(max-width:339px){
  .top-bar .topbar-logo{font-size:0!important;flex:0 0 auto;overflow:visible;text-overflow:clip}
  .top-bar .topbar-logo::after{
    content:attr(data-short);
    font-family:'Instrument Serif',serif;font-size:19px;letter-spacing:.5px;
    background:linear-gradient(135deg,#00B4D8,#ADE8F4);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 0 10px rgba(72,202,228,.45))}
}

/* Text inputs under 16px make iOS Safari zoom the whole page on focus, and it
   does not zoom back out - every subsequent tap then lands on a page wider
   than the screen, which is the overlapping that gets reported as a layout
   bug. 16px is the threshold, not a design choice. */
@media(max-width:640px){
  input[type=text],input[type=email],input[type=tel],input[type=password],
  input[type=search],input[type=date],input[type=time],input[type=number],
  select,textarea{font-size:16px}
  /* Label-beside-field grids that assumed a desktop column. */
  .enc-field,.enc-field-inline{grid-template-columns:minmax(0,1fr);gap:4px}
  .pme-row{grid-template-columns:minmax(0,1fr);gap:8px}
}

@media(max-width:760px){
  .ac-table-wrap{overflow-x:auto!important}
  .ac-matrix{min-width:720px!important;table-layout:auto}
  .ac-matrix thead th{font-size:9.5px!important;padding:12px 6px 11px!important;white-space:nowrap!important}
  .ac-matrix thead th:first-child{width:auto!important}
}

/* The calendar keeps all seven days and scrolls to them. Squeezing a week
   into 390px gives 45px columns, where an appointment block shows neither a
   time nor a name - a scroll costs one gesture and keeps the detail. */
@media(max-width:760px){
  /* Header row and slot grid are two separate flex rows that line up only
     because their columns share a sizing rule - so the minimum has to be set
     on both, or the day names slide out of register with their columns. */
  .appt-daycol,.appt-header-day{min-width:92px}
  /* Except in month view, where seven narrow date cells are the normal
     layout and nothing needs to scroll. */
  .appt-month-headerrow .appt-header-day{min-width:0}
  #page-appointment .appt-body-scroll{padding:8px}
  .appt-block{font-size:10px;padding:3px 6px}
}

@media(max-width:760px){
  .im-details-panel{
    left:0;right:0;width:100%;max-width:none;z-index:60;
    border-left:0;box-shadow:none;
    background:#fff!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html[data-theme="dark"] .im-details-panel{background:#03045E!important}
  /* Three icon-and-label buttons do not fit a phone row without the labels
     wrapping into each other. */
  .im-details-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .im-details-head{position:sticky;top:0;z-index:2;background:inherit}
}

/* 100vh on a phone browser is the window without the address bar, so a
   viewport-height page hides its own last rows behind it. dvh tracks the
   space actually visible. Guarded, since the fallback above must stand where
   dvh is unsupported. */
@supports(height:100dvh){
  @media(max-width:900px){
    #page-appointment{height:calc(100dvh - 60px)}
    /* These two also subtract 54px for a bar that has been 60px tall since
       the theme was restyled, so their last six pixels sat under it. */
    #page-internalMessaging.active,#page-patientMessaging.active{height:calc(100dvh - 60px)}
  }
}


.arm-wrap{max-width:1000px}
.arm-strip{align-items:flex-start}
.arm-strip-title{font-size:19px;font-weight:900;letter-spacing:-.02em;color:#fff}
.arm-strip-sub{font-size:12.5px;line-height:1.6;color:rgba(233,240,255,.82);margin-top:5px;max-width:66ch}

.arm-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.arm-form .fg{margin-bottom:0;gap:6px}
.arm-form .fg>label{margin:0;line-height:1.3}
.arm-form input,.arm-form select{height:42px;box-sizing:border-box}
.arm-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:16px}
.arm-actions{display:flex;gap:9px;margin-left:auto}
.arm-chk{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;font-weight:700;color:var(--text);user-select:none}
.arm-chk input{width:17px;height:17px;cursor:pointer;flex:none;margin:0}
.arm-chk:hover span{color:var(--accent)}
.arm-hint{margin:14px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted)}
.arm-hint strong{color:var(--text);font-weight:800}

.arm-name{font-weight:700;color:var(--text)}
.arm-use{margin-left:8px;font-size:10.5px;color:var(--muted)}
.arm-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;
  padding:3px 9px;border-radius:999px;background:var(--s3);color:var(--muted);border:1px solid var(--border)}
.arm-badge svg{width:12px;height:12px}
.arm-badge-video{background:var(--al);color:var(--accent);border-color:rgba(0,119,182,.3)}

/* ---- Video visit control inside the appointment modal ---- */
.appt-tele-row{margin:14px 0 4px}
.appt-tele{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:13px;cursor:pointer;
  border:1px solid var(--border);background:var(--s2);transition:border-color .15s,background .15s}
.appt-tele:hover{border-color:var(--accent)}
.appt-tele.on{border-color:var(--accent);background:var(--al)}
.appt-tele input{width:17px;height:17px;flex:0 0 auto;pointer-events:none}
.appt-tele-ico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--s3);color:var(--muted)}
.appt-tele.on .appt-tele-ico,.appt-tele-live .appt-tele-ico{background:var(--al);color:var(--accent)}
.appt-tele-ico svg{width:17px;height:17px}
.appt-tele-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.appt-tele-copy strong{font-size:13px;font-weight:800;color:var(--text)}
.appt-tele-copy small{font-size:11px;line-height:1.5;color:var(--muted)}
.appt-tele-live{cursor:default;border-color:rgba(0,119,182,.45);background:var(--al)}
.appt-tele-actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}

.appt-link-box{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;
  word-break:break-all;padding:12px 14px;border-radius:10px;background:var(--s2);
  border:1px solid var(--border);color:var(--text)}

/* A booked video visit keeps its subtle raised edge - the camera badge that
   used to sit in the top-right corner is gone (it read as decoration once a
   column filled with overlapping blocks); the hover card names the visit
   type in words instead. */
.appt-block.has-room{box-shadow:0 2px 6px rgba(2,6,35,.28),inset 0 0 0 1px rgba(255,255,255,.35)}

@media(max-width:760px){
  .arm-form{grid-template-columns:minmax(0,1fr)}
  .arm-actions{margin-left:0;width:100%}
  .arm-actions .btn{flex:1 1 auto;justify-content:center}
  .appt-tele{flex-wrap:wrap}
  .appt-tele-actions{width:100%;margin-left:0;justify-content:flex-start}
}

/* ============================================================
   COMMAND CENTER - the day's rooms on one wall
   ============================================================ */

.cc-wrap{max-width:1300px}
.cc-strip{align-items:flex-start;gap:18px}
.cc-title{font-size:19px;font-weight:900;letter-spacing:-.02em;color:#fff}
.cc-sub{font-size:12.5px;color:rgba(233,240,255,.8);margin-top:4px}
.cc-head-right{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap}
.cc-counts{display:flex;gap:9px}
.cc-count{min-width:66px;padding:8px 12px;border-radius:11px;text-align:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.19)}
.cc-count strong{display:block;font-size:17px;font-weight:900;color:#fff;line-height:1.1}
.cc-count span{font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:rgba(233,240,255,.7)}
.cc-count.on{background:rgba(87,194,152,.26);border-color:rgba(87,194,152,.5)}
.cc-count.warn{background:rgba(255,176,71,.26);border-color:rgba(255,176,71,.55)}

/* The one switch that hands the calendar the wheel. The loudest
   control on the page - nobody should be unsure whether it is on. */
.cc-onair{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.02em;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;transition:all .16s}
.cc-onair:hover{background:rgba(255,255,255,.2)}
.cc-onair i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45)}
.cc-onair.on{background:#e0342a;border-color:#e0342a;box-shadow:0 4px 16px rgba(224,52,42,.45)}
.cc-onair.on i{background:#fff;animation:ccPulse 1.6s ease-in-out infinite}
@keyframes ccPulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.cc-onair.on i{animation:none}}

.cc-pilot{display:flex;align-items:center;gap:14px;padding:15px 18px;margin-bottom:14px;
  border-radius:16px;border:1px solid var(--accent);background:var(--al);box-shadow:var(--e1)}
.cc-pilot-ico{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff}
.cc-pilot-ico svg{width:20px;height:20px}
.cc-pilot-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.cc-pilot-copy strong{font-size:14px;font-weight:800;color:var(--text)}
.cc-pilot-copy small{font-size:11.5px;line-height:1.5;color:var(--muted)}
.cc-pilot-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.cc-pilot-live{border-color:#e0342a;background:rgba(224,52,42,.08)}
.cc-pilot-live .cc-pilot-ico{background:#e0342a}
.cc-pilot-queued{border-color:rgba(255,176,71,.6);background:rgba(255,176,71,.1)}
.cc-pilot-queued .cc-pilot-ico{background:#d98324}

.cc-filter{position:relative;display:inline-block;margin-bottom:14px}
.cc-filter-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--border2);box-shadow:var(--e1);font-weight:700;font-size:13px;color:var(--text);
  transition:transform .15s,box-shadow .15s,background .15s}
.cc-filter-btn:hover{transform:translateY(-1px);box-shadow:var(--e2)}
.cc-filter-btn svg{width:15px;height:15px;flex:none}
.cc-filter-btn.active{border-color:var(--cc-filter-c,#0077B6);color:var(--cc-filter-c,#0077B6)}
.cc-filter-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cc-filter-dot{width:7px;height:7px;border-radius:50%;background:var(--cc-filter-c,#0077B6)}
.cc-filter-backdrop{position:fixed;inset:0;z-index:40;background:transparent}
.cc-filter-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:41;min-width:220px;
  padding:7px;border-radius:14px;display:flex;flex-direction:column;gap:2px;max-height:360px;overflow:auto;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 18px 44px rgba(2,10,40,.24);
  animation:ccFilterIn .14s ease-out}
/* A fresh DOM node with backdrop-filter can paint one unblurred frame before
   the browser catches up - on its own that reads as a flash/blink rather than
   a menu opening. Fading and lifting it in over the same node makes that
   first frame part of an intentional entrance instead of a glitch. */
@keyframes ccFilterIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cc-filter-menu{animation:none}}
.cc-filter-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:9px 12px;border-radius:9px;border:none;background:transparent;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--text);text-align:left;font-family:inherit}
.cc-filter-opt:hover{background:rgba(0,119,182,.10)}
.cc-filter-opt.active{background:var(--cc-filter-c,#0077B6);color:#fff}
.cc-filter-count{font-size:12px;font-weight:700;opacity:.7;font-variant-numeric:tabular-nums}
.cc-filter-opt.active .cc-filter-count{opacity:.9}

.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.cc-tile{position:relative;padding:14px 15px 12px;border-radius:14px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--e1);
  transition:transform .15s,box-shadow .15s,border-color .15s}
.cc-tile:hover{transform:translateY(-2px);box-shadow:var(--e2)}
/* A colour bar rather than a tinted card: status has to be readable across the
   room, without making the patient's name harder to read up close. */
.cc-tile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--border2)}
.cc-tile-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* nowrap so the time stays one line - when it wrapped ("1:00 / AM") it
   cramped the badge row into wrapping too. */
.cc-time{font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
/* The status badges sit together on the right, side by side, so "Checked in"
   and "Ready for provider" show at once. flex-wrap is a last resort on a very
   narrow tile; the compact handover sizing below keeps them on one line in the
   normal 3-column layout. */
.cc-badges{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.cc-state{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--s3);color:var(--muted)}
.cc-state.cc-state-checkedin,.cc-state.cc-state-ready{padding:3px 7px;letter-spacing:.02em;white-space:nowrap}
.cc-state.cc-state-checkedin{background:rgba(46,125,50,.16)!important;color:#1b5e20!important}
.cc-state.cc-state-ready{background:rgba(123,31,162,.16)!important;color:#6A1B9A!important}
html[data-theme="dark"] .cc-state.cc-state-checkedin{background:rgba(129,199,132,.22)!important;color:#A5D6A7!important}
html[data-theme="dark"] .cc-state.cc-state-ready{background:rgba(186,104,200,.26)!important;color:#E1BEE7!important}
/* Running order. Quiet for #2 onward - it is reference, not a call to act
   while the one the provider is due to see next is stated in words and given
   the accent, because that is the single thing this board exists to answer. */
.cc-rank{display:inline-block;margin-top:8px;font-size:9.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  background:var(--s3);border-radius:999px;padding:3px 9px;
  font-variant-numeric:tabular-nums}
.cc-rank-first{background:var(--accent);color:#fff;letter-spacing:.07em}
html[data-theme="dark"] .cc-rank-first{background:#00B4D8;color:#04202B}
/* The first tile carries a full accent edge instead of the status stripe, so
   "who is next" survives a glance from across the room. */
.cc-tile-first::before{background:var(--accent)!important;width:5px}
html[data-theme="dark"] .cc-tile-first::before{background:#00B4D8!important}

.cc-name{font-size:14.5px;font-weight:800;color:var(--text);margin-top:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The matching Provider's Calendar block, merged in under the patient's name.
   Carries that block's own category colour so it reads as the same entry the
   week grid shows, not a second unrelated label. */
/* margin-right, because a patient can have more than one block in a day and
   two pills flowing onto the same line must not touch. */
.cc-blocktitle{display:inline-block;max-width:100%;margin-top:4px;margin-right:4px;
  padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;
  letter-spacing:.01em;color:var(--block-color);
  border:1px solid color-mix(in srgb,var(--block-color) 45%,transparent);
  background:color-mix(in srgb,var(--block-color) 14%,transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The block's own window, set apart from the category by a middle dot and a
   lighter weight so the pill still reads category-first at a glance. */
.cc-blocktime{font-weight:600;opacity:.8}
.cc-blocktime::before{content:" · ";opacity:.65}
/* On the dark theme the darker categories (Deep Red, Green, Burnt Orange) sit
   too close to the tile behind them to read, so the text is lifted toward
   white while the pill keeps the category's own colour. */
html[data-theme="dark"] .cc-blocktitle{
  color:color-mix(in srgb,var(--block-color) 45%,#fff);
  border-color:color-mix(in srgb,var(--block-color) 60%,transparent);
  background:color-mix(in srgb,var(--block-color) 22%,transparent)}
.cc-meta{font-size:11.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-wait{margin-top:8px;font-size:11.5px;font-weight:700;color:#a35a06}
.cc-tile-actions{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.cc-inperson-note{font-size:11px;color:var(--faint);align-self:center}

.cc-waiting::before{background:#f0a020}
.cc-waiting .cc-state{background:rgba(255,176,71,.2);color:#a35a06}
.cc-live::before{background:#2fa36b}
.cc-live .cc-state{background:rgba(47,163,107,.18);color:#1f7a4d}
.cc-over::before{background:#e0342a}
.cc-over .cc-state{background:rgba(224,52,42,.16);color:#a3271d}
.cc-due::before{background:var(--accent)}
.cc-due .cc-state{background:var(--al);color:var(--accent)}
/* No-show - its own color, not the same red as "running over":
   that one means a call is live and simply late; this one means nobody has
   shown up at all and probably needs a phone call. */
.cc-missed::before{background:#C2185B}
.cc-missed .cc-state{background:rgba(194,24,91,.16);color:#a3134a}
/* Finished - a quiet, closed-out blue-gray. Distinct from "In session"'s
   green, which means the opposite: still open, still needs attention. */
.cc-done{opacity:.62}
.cc-done::before{background:#64748B}
.cc-done .cc-state{background:rgba(100,116,139,.18);color:#4b5b70}
/* In person - not part of the video queue at all, so it gets a neutral
   identity of its own rather than inheriting whatever color happened to be
   left over. */
.cc-inperson{opacity:.78}
.cc-inperson::before{background:transparent}
.cc-inperson .cc-state{background:rgba(136,146,164,.20);color:#5c6478}
/* Checked in - green, as asked for. A different green from "In
   session"'s teal-mint, so the two never look like the same status at a
   glance: this one means "confirmed present, still waiting to be seen";
   live means "the visit is actually happening right now." */
.cc-checkedin::before{background:#2E7D32}
.cc-checkedin .cc-state{background:rgba(46,125,50,.16);color:#1b5e20}
/* Ready for provider - the one state that is an active summons, so it gets a
   hue of its own rather than a second shade of the check-in green it follows. */
.cc-ready::before{background:#7B1FA2}
.cc-ready .cc-state{background:rgba(123,31,162,.16);color:#6A1B9A;font-weight:900}
html[data-theme="dark"] .cc-ready .cc-state{background:rgba(186,104,200,.22);color:#E1BEE7}
/* Decided-and-done: muted, because these are a record rather than a job. */
.cc-cancelled::before{background:#78909C}
.cc-cancelled .cc-state{background:rgba(120,144,156,.18);color:#546E7A}
.cc-reschedule::before{background:#8D6E63}
.cc-reschedule .cc-state{background:rgba(141,110,99,.18);color:#6D4C41}
html[data-theme="dark"] .cc-cancelled .cc-state{color:#B0BEC5}
html[data-theme="dark"] .cc-reschedule .cc-state{color:#D7CCC8}

html[data-theme="dark"] .cc-wait{color:#ffc978}
html[data-theme="dark"] .cc-waiting .cc-state{color:#ffc978}
html[data-theme="dark"] .cc-live .cc-state{color:#57c298}
html[data-theme="dark"] .cc-over .cc-state{color:#ff9d90}
html[data-theme="dark"] .cc-missed .cc-state{color:#ff9dc4}
html[data-theme="dark"] .cc-done .cc-state{color:#b8c4d9}
html[data-theme="dark"] .cc-inperson .cc-state{color:#c7cedb}
html[data-theme="dark"] .cc-checkedin .cc-state{color:#81c995}

@media(max-width:760px){
  .cc-head-right{margin-left:0;width:100%}
  .cc-counts{flex:1}
  .cc-count{flex:1 1 auto}
  .cc-onair{width:100%;justify-content:center}
  .cc-grid{grid-template-columns:minmax(0,1fr)}
  .cc-pilot{flex-wrap:wrap}
  .cc-pilot-actions{width:100%;margin-left:0}
}

/* Appointment alert: the card that finds you on any page. Bottom right, above
   the toast lane and below modals. A card rather than a toast, because a
   toast leaves on its own and an appointment that has arrived does not stop
   having arrived. */
.ctg-alert{position:fixed;right:22px;bottom:22px;z-index:9600;width:330px;max-width:calc(100vw - 32px);
  display:none;overflow:hidden;border-radius:16px;
  background:var(--surface);border:1px solid var(--accent);
  box-shadow:0 18px 48px rgba(2,6,35,.32),0 0 0 1px rgba(0,150,199,.12)}
.ctg-alert.show{display:block;animation:ctgAlertIn .32s cubic-bezier(.22,1,.36,1)}
@keyframes ctgAlertIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ctg-alert.show{animation:none}}

.ctg-alert-bar{height:4px;background:var(--accent)}
.ctg-alert.waiting{border-color:#f0a020}
.ctg-alert.waiting .ctg-alert-bar{background:#f0a020;
  background-image:linear-gradient(90deg,#f0a020,#ffcf7a,#f0a020);background-size:200% 100%;
  animation:ctgAlertPulse 2.2s linear infinite}
@keyframes ctgAlertPulse{0%{background-position:0 0}100%{background-position:200% 0}}
@media(prefers-reduced-motion:reduce){.ctg-alert.waiting .ctg-alert-bar{animation:none}}

/* The whole body is the button - a small "join" target on a card that appears
   while you are mid-sentence is the wrong place to demand precision. */
.ctg-alert-body{padding:15px 17px 14px;cursor:pointer}
.ctg-alert-body:hover{background:var(--s2)}
.ctg-alert-kicker{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ctg-alert.waiting .ctg-alert-kicker{color:#a35a06}
.ctg-alert-name{font-size:16px;font-weight:900;color:var(--text);margin-top:4px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctg-alert-meta{font-size:11.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctg-alert-cta{font-size:12px;font-weight:800;color:var(--accent);margin-top:10px}
.ctg-alert-perm{display:block;width:100%;padding:9px 14px;border:0;border-top:1px solid var(--border);
  background:var(--s2);color:var(--muted);font:inherit;font-size:11px;text-align:left;cursor:pointer}
.ctg-alert-perm:hover{background:var(--s3);color:var(--accent)}
.ctg-alert-x{position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:7px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:15px;line-height:1}
.ctg-alert-x:hover{background:var(--s3);color:var(--text)}
html[data-theme="dark"] .ctg-alert.waiting .ctg-alert-kicker{color:#ffc978}

@media(max-width:760px){
  /* Full width at the bottom, clear of the fixed action bar. */
  .ctg-alert{right:12px;left:12px;bottom:78px;width:auto}
}

@media(min-width:861px){
  body.sidebar-visible .ctg-phi-footer{margin-left:248px;width:auto}
}
/* Same easing as .top-bar/.page, so opening the sidebar moves the whole
   column as one piece rather than sliding the footer in behind it. */
.ctg-phi-footer{transition:margin-left .25s,width .25s}

body.patient-messaging-active,
body.internal-messaging-active{overflow:hidden}
html:has(body.patient-messaging-active),
html:has(body.internal-messaging-active){overflow:hidden}

/* Both pages subtracted 54px for a top bar that has been 60px tall since the
   restyle, so their last six pixels - the send box's bottom edge - sat under
   it. */
#page-patientMessaging.active,
#page-internalMessaging.active{height:calc(100vh - 60px)}

/* A flex or grid child will not shrink below its content unless told to, which
   is what stops an `overflow-y:auto` list from ever becoming scrollable. The
   list panes already ask to scroll; these let them. */
.pmc-rail,.pm-directory,.im-left-panel{min-height:0}
.pmc,.pm-body{min-height:0}

.mtg-rail{align-items:center;padding:9px 11px;gap:9px}
.mtg-rbtn,
.mtg-rbtn-primary,
.mtg-rbtn.mtg-hang{width:46px;height:46px;flex:0 0 auto}
/* One optical weight for every glyph, so a slashed icon does not look heavier
   than a plain one. */
.mtg-rbtn svg,
.mtg-rbtn-primary svg,
.mtg-rbtn.mtg-hang svg{width:20px;height:20px;display:block;stroke-width:1.9}
/* Separators span the bar's height rather than floating at whatever height the
   tallest neighbour happened to be. */
.mtg-rail-sep{height:26px;margin:auto 2px;background:rgba(255,255,255,.16)}
.mtg-rail-sep.wide{margin:auto 6px}
/* Leave stays unmistakable through colour and a lift, not through size. */
.mtg-rbtn.mtg-hang{box-shadow:0 6px 20px rgba(225,69,38,.5)}
.mtg-rbtn.mtg-hang:hover{transform:scale(1.08)}

/* A guest is told their words are being written down, even though they have no
   transcript panel any more. Quiet, permanent, next to the recording dot. */
.mtg-stage-note{margin-left:10px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#9fd8ef;background:rgba(72,202,228,.16);border:1px solid rgba(72,202,228,.34);
  border-radius:999px;padding:2px 9px;white-space:nowrap}

/* flex-start, not space-between: the REC badge belongs next to the title it
   applies to, and the wall clock claims the right edge with margin-left:auto.
   Under space-between a recording badge drifted into the middle of the header
   with a gap on either side of it. */
.mtg-stage-head{padding:14px 18px 30px;justify-content:flex-start}
.mtg-stage-id{display:flex;align-items:center;gap:11px;min-width:0;flex:0 1 auto;
  padding:7px 15px 7px 12px;border-radius:999px;
  background:rgba(12,17,24,.52);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 6px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10)}

/* Elapsed time. Tabular figures stop the digits jittering; the live dot is
   what separates "the call is running" from "a number is printed here". */
.mtg-stage-timer{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:13.5px;font-weight:750;font-variant-numeric:tabular-nums;letter-spacing:.01em;
  color:#fff;opacity:1;text-shadow:none}
.mtg-stage-timer::before{content:'';width:7px;height:7px;border-radius:50%;flex:none;
  background:#38d39f;box-shadow:0 0 0 3px rgba(56,211,159,.20);
  animation:mtgLivePulse 2.4s ease-in-out infinite}
@keyframes mtgLivePulse{0%,100%{opacity:1;box-shadow:0 0 0 3px rgba(56,211,159,.20)}
  50%{opacity:.55;box-shadow:0 0 0 5px rgba(56,211,159,.06)}}
@media(prefers-reduced-motion:reduce){.mtg-stage-timer::before{animation:none}}

/* The divider that makes it read as "time | name" rather than one run-on
   string. A rule rather than a literal pipe character, so it stays the same
   weight at every font size. */
.mtg-stage-div{width:1px;height:15px;flex:none;background:rgba(255,255,255,.26)}

.mtg-stage-name{font-size:14px;font-weight:650;letter-spacing:-.01em;color:#fff;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none}

/* Wall clock, right-hand corner - quieter than the elapsed timer. */
.mtg-stage-clock{flex:none;margin-left:auto;font-size:12.5px;font-weight:650;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.88);
  padding:6px 13px;border-radius:999px;
  background:rgba(12,17,24,.45);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.11)}

@media(max-width:600px){
  .mtg-stage-id{gap:8px;padding:6px 12px 6px 10px}
  .mtg-stage-name{font-size:12.5px}
  .mtg-stage-clock{display:none}
}

.mtg-rail{padding:10px 12px;gap:10px;border-radius:999px;
  background:linear-gradient(180deg,rgba(24,31,41,.62),rgba(14,19,26,.68));
  -webkit-backdrop-filter:blur(22px) saturate(165%);backdrop-filter:blur(22px) saturate(165%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 44px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.10);
  overflow:visible}

/* Bigger targets. 46px was under the 48px both Apple and Google settle on for
   a comfortable touch target, and this rail is used one-handed on tablets in
   clinic rooms. */
.mtg-rbtn,
.mtg-rbtn-primary,
.mtg-rbtn.mtg-hang{width:50px;height:50px}
.mtg-rbtn svg,
.mtg-rbtn-primary svg,
.mtg-rbtn.mtg-hang svg{width:21px;height:21px}
.mtg-rbtn{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.mtg-rbtn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.30)}
.mtg-rbtn:active{transform:scale(.94)}

/* Busy: the camera toggle can take ten seconds, and while it ran the button
   still looked clickable - so it collected three more clicks that raced each
   other and left the camera on with the icon saying off. It now disables
   itself and spins for as long as its own action is in flight. */
/* pointer-events, not a :hover override - a hover rule here would have to beat
   .mtg-rbtn.off on specificity and would grey out a muted microphone. This way
   the button simply stops responding and keeps its own colour. */
.mtg-rbtn[disabled]{cursor:default;pointer-events:none}
.mtg-rbtn.busy{opacity:.72}
.mtg-rbtn.busy::before{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid transparent;border-top-color:rgba(255,255,255,.9);
  animation:mtg-btn-spin .75s linear infinite}
@keyframes mtg-btn-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .mtg-rbtn.busy::before{animation:none;border-color:rgba(255,255,255,.45)}
}

/* The label chip. Built on the button's own ::after so it needs no extra
   markup and can never be left behind when the bar re-renders. */
.mtg-rbtn::after{
  content:attr(data-lbl);
  position:absolute;left:50%;bottom:calc(100% + 13px);transform:translateX(-50%) translateY(6px);
  padding:7px 12px;border-radius:10px;white-space:nowrap;
  font-size:12px;font-weight:650;letter-spacing:.01em;line-height:1;color:#f2f7fc;
  background:rgba(10,14,20,.88);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;z-index:9;
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.3,1)}
.mtg-rbtn:hover::after,
.mtg-rbtn:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.mtg-rbtn:not([data-lbl])::after{display:none}
@media(prefers-reduced-motion:reduce){.mtg-rbtn::after{transition:opacity .16s ease}}

/* State reads through colour, and the ring is what makes an "on" control
   legible against a bright video frame behind it. */
.mtg-rbtn.on{background:linear-gradient(160deg,#3fae72,#2f8f5c);
  box-shadow:0 0 0 3px rgba(63,157,95,.22),0 6px 18px rgba(47,143,92,.35)}
.mtg-rbtn.off{background:rgba(240,85,47,.24);border-color:rgba(240,85,47,.46);
  box-shadow:0 0 0 3px rgba(240,85,47,.12)}
.mtg-rbtn.rec{box-shadow:0 0 0 3px rgba(224,52,42,.22),0 6px 18px rgba(224,52,42,.38)}
.mtg-rbtn.mtg-hang{background:linear-gradient(160deg,#ee5334,#d13a1e);
  box-shadow:0 8px 24px rgba(225,69,38,.55)}
.mtg-rbtn.mtg-hang::after{background:rgba(150,30,14,.92);border-color:rgba(255,255,255,.20)}

/* The bar shrinks with the WINDOW'S WIDTH now, not its height - five circles
   across need horizontal room, and the popped-out share window is the narrow
   case that broke the old rail. Height only matters far enough down that the
   bar starts eating the stage. */
@media(max-width:560px){
  .mtg-rail{gap:7px;padding:8px 9px}
  .mtg-rbtn,.mtg-rbtn-primary,.mtg-rbtn.mtg-hang{width:44px;height:44px}
  .mtg-rbtn svg,.mtg-rbtn-primary svg,.mtg-rbtn.mtg-hang svg{width:19px;height:19px}
  .mtg-rbtn::after{font-size:11.5px;padding:6px 10px}
}
@media(max-width:420px){
  .mtg-rail{gap:5px;padding:6px 7px;bottom:10px}
  .mtg-rbtn,.mtg-rbtn-primary,.mtg-rbtn.mtg-hang{width:40px;height:40px}
  .mtg-rbtn svg,.mtg-rbtn-primary svg,.mtg-rbtn.mtg-hang svg{width:18px;height:18px}
}
@media(max-width:330px){
  .mtg-rbtn,.mtg-rbtn-primary,.mtg-rbtn.mtg-hang{width:36px;height:36px}
  .mtg-rbtn svg,.mtg-rbtn-primary svg,.mtg-rbtn.mtg-hang svg{width:16px;height:16px}
}
@media(max-height:620px){
  .mtg-rail{gap:7px;padding:8px 9px;bottom:10px}
  .mtg-rbtn,.mtg-rbtn-primary,.mtg-rbtn.mtg-hang{width:42px;height:42px}
  .mtg-rbtn svg,.mtg-rbtn-primary svg,.mtg-rbtn.mtg-hang svg{width:18px;height:18px}
  .mtg-grid{padding-bottom:74px}
  .mtg-present{padding-bottom:70px}
}
@media(max-height:460px){
  .mtg-rail{gap:5px;padding:6px 7px;bottom:8px}
  .mtg-rbtn,.mtg-rbtn-primary,.mtg-rbtn.mtg-hang{width:36px;height:36px}
  .mtg-rbtn svg,.mtg-rbtn-primary svg,.mtg-rbtn.mtg-hang svg{width:16px;height:16px}
  .mtg-grid{padding:38px 10px 60px}
  .mtg-present{padding:38px 8px 58px}
}


#page-commandCenter .cc-wrap{max-width:1360px}

/* ---------- the header strip ---------- */
/* .pt-strip already supplies the navy glass. What it does not supply is depth:
   one soft aurora wash across the top-right keeps the panel from reading as a
   flat rectangle of blue, and it is drawn on ::before rather than as an extra
   element so the markup stays untouched. */
#page-commandCenter .pt-strip.cc-strip{
  align-items:center;
  padding:24px 28px!important;
  overflow:hidden;
  box-shadow:0 20px 52px rgba(2,29,66,.34),0 0 40px rgba(0,180,216,.13),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
}
#page-commandCenter .cc-strip::before{
  content:'';position:absolute;display:block!important;
  right:-14%;top:-140%;width:62%;height:340%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(72,202,228,.30),transparent 72%);
  filter:blur(6px);
}
/* Sized up across this whole page from where it started - the person reading
   it is a senior clinician glancing at a board across a desk, not someone
   inspecting a phone six inches from their face. Every number, label and
   button below is larger than this app's normal scale. */
#page-commandCenter .cc-title{
  font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  background:linear-gradient(96deg,#FFFFFF 0%,#CAF0F8 62%,#90E0EF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#fff;
}
/* text-wrap:balance so the subtitle does not break with one orphaned word on
   its own line. */
#page-commandCenter .cc-sub{
  font-size:16px;line-height:1.5;color:rgba(202,240,248,.88);margin-top:8px;max-width:62ch;
  text-wrap:balance;
}
#page-commandCenter .cc-head-right{gap:16px}

/* ---------- the three counters ---------- */
/* Read as gauges, not as buttons: a hairline glass tile, the number set large
   in tabular figures, the word underneath spelled out rather than abbreviated.
   Live and Waiting only take on colour when they are non-zero - a board of
   grey zeroes is the normal state and should stay quiet. */
#page-commandCenter .cc-counts{gap:10px}
#page-commandCenter .cc-count{
  position:relative;min-width:96px;padding:12px 16px 11px;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 4px 14px rgba(2,10,40,.18);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .22s;
}
#page-commandCenter .cc-count:hover{transform:translateY(-2px)}
#page-commandCenter .cc-count strong{font-size:32px;font-weight:800;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
#page-commandCenter .cc-count span{font-size:12px;font-weight:700;letter-spacing:.04em;margin-top:3px;
  color:rgba(202,240,248,.82)}
#page-commandCenter .cc-count.on{
  background:linear-gradient(160deg,rgba(56,211,159,.34),rgba(56,211,159,.14));
  border-color:rgba(120,240,196,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 20px rgba(47,163,107,.28)}
#page-commandCenter .cc-count.warn{
  background:linear-gradient(160deg,rgba(255,176,71,.36),rgba(255,176,71,.14));
  border-color:rgba(255,201,120,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 20px rgba(214,138,36,.30)}
/* A counter that is not zero earns a slow breathing edge - enough to catch a
   passing eye across the room, not enough to nag at someone reading the board. */
#page-commandCenter .cc-count.warn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,176,71,.42);animation:ccBreathe 2.6s ease-out infinite}
@keyframes ccBreathe{0%{box-shadow:0 0 0 0 rgba(255,176,71,.42)}
  70%,100%{box-shadow:0 0 0 10px rgba(255,176,71,0)}}
@media(prefers-reduced-motion:reduce){#page-commandCenter .cc-count.warn::after{animation:none}}

/* ---------- Auto-Pilot ---------- */
/* The loudest control on the page, and the only one whose state has to be
   readable without reading: off is glass, on is a solid red pill with a live
   dot. The label carries the state in words too, because "a red thing is lit"
   is not something to bet a patient's appointment on. */
#page-commandCenter .cc-onair{
  padding:14px 24px;font-size:15px;font-weight:700;gap:11px;min-height:48px;
  background:rgba(255,255,255,.11);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(2,10,40,.20);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),background .2s,box-shadow .2s,border-color .2s;
}
#page-commandCenter .cc-onair:hover{transform:translateY(-2px);background:rgba(255,255,255,.20)}
#page-commandCenter .cc-onair:active{transform:translateY(0) scale(.98)}
#page-commandCenter .cc-onair:focus-visible{outline:2px solid #90E0EF;outline-offset:3px}
#page-commandCenter .cc-onair.on{
  background:linear-gradient(160deg,#f0553a,#cf2b1f);border-color:rgba(255,255,255,.28);
  box-shadow:0 8px 26px rgba(224,52,42,.52),inset 0 1px 0 rgba(255,255,255,.26)}
#page-commandCenter .cc-onair i{box-shadow:0 0 0 3px rgba(255,255,255,.12)}

/* ---------- "Start My Day" - the provider-only daily prompt ---------- */
#page-commandCenter .cc-startday{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:22px 26px;margin-bottom:16px;border-radius:20px;
  background:linear-gradient(120deg,#0077B6,#00B4D8 65%,#48CAE4);
  box-shadow:0 16px 44px rgba(0,119,182,.38),inset 0 1px 0 rgba(255,255,255,.24);
  color:#fff;
}
#page-commandCenter .cc-startday-ico{
  flex:none;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.30)}
#page-commandCenter .cc-startday-ico svg{width:28px;height:28px}
#page-commandCenter .cc-startday-copy{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:6px}
#page-commandCenter .cc-startday-copy strong{font-size:21px;font-weight:800;letter-spacing:-.01em}
#page-commandCenter .cc-startday-copy span{font-size:15px;line-height:1.55;color:rgba(255,255,255,.92);max-width:64ch}
#page-commandCenter .cc-startday-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}
#page-commandCenter .cc-startday-actions .btn-ghost{
  min-height:48px;padding:12px 18px;font-size:14.5px;font-weight:700;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);color:#fff}
#page-commandCenter .cc-startday-actions .btn-ghost:hover{background:rgba(255,255,255,.24)}
/* The one button on this whole page that outranks everything else: white on
   the brand gradient, the same "unmistakably the answer" role New Patient
   plays on the dashboard hero. */
#page-commandCenter .cc-startday-btn{
  min-height:52px;padding:13px 26px;border:none;border-radius:14px;cursor:pointer;
  background:#fff;color:#0077B6;font:inherit;font-size:17px;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 8px 22px rgba(2,10,40,.28);
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s,background .16s;
}
#page-commandCenter .cc-startday-btn:hover{transform:translateY(-2px);background:#CAF0F8;box-shadow:0 12px 28px rgba(2,10,40,.34)}
#page-commandCenter .cc-startday-btn:active{transform:translateY(0)}
#page-commandCenter .cc-startday-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:640px){
  #page-commandCenter .cc-startday{padding:20px}
  #page-commandCenter .cc-startday-actions{width:100%}
  #page-commandCenter .cc-startday-actions .btn-ghost,
  #page-commandCenter .cc-startday-btn{flex:1 1 auto;justify-content:center;text-align:center}
}
html[data-theme="dark"] #page-commandCenter .cc-startday{
  box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.20)}

/* ---------- the Auto-Pilot card ---------- */
#page-commandCenter .cc-pilot{
  position:relative;padding:17px 20px;margin-bottom:16px;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.56);
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:0 16px 40px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.7);
}
/* The card's state lives on its top edge, so a stack of cards is scannable
   down one line rather than by reading each one. */
#page-commandCenter .cc-pilot::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#00B4D8 55%,transparent)}
#page-commandCenter .cc-pilot-ico{
  width:50px;height:50px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(150deg,#0096C7,#0077B6);
  box-shadow:0 8px 20px rgba(0,119,182,.34),inset 0 1px 0 rgba(255,255,255,.34)}
#page-commandCenter .cc-pilot-ico svg{width:24px;height:24px}
#page-commandCenter .cc-pilot-live{border-color:rgba(224,52,42,.42);
  background:linear-gradient(140deg,rgba(255,255,255,.66),rgba(224,52,42,.10))}
#page-commandCenter .cc-pilot-live::before{background:linear-gradient(90deg,#e0342a,#ff8a6b 55%,transparent)}
#page-commandCenter .cc-pilot-live .cc-pilot-ico{
  background:linear-gradient(150deg,#f0553a,#cf2b1f);box-shadow:0 8px 20px rgba(224,52,42,.40)}
#page-commandCenter .cc-pilot-queued{border-color:rgba(255,176,71,.50);
  background:linear-gradient(140deg,rgba(255,255,255,.66),rgba(255,176,71,.12))}
#page-commandCenter .cc-pilot-queued::before{background:linear-gradient(90deg,#d98324,#ffc978 55%,transparent)}
#page-commandCenter .cc-pilot-queued .cc-pilot-ico{
  background:linear-gradient(150deg,#e6982f,#c06f14);box-shadow:0 8px 20px rgba(217,131,36,.36)}
#page-commandCenter .cc-pilot-copy{gap:5px}
#page-commandCenter .cc-pilot-copy strong{font-size:18px;letter-spacing:-.01em}
#page-commandCenter .cc-pilot-copy small{font-size:14px;line-height:1.5}
#page-commandCenter .cc-pilot-actions .btn{min-height:44px;padding:10px 18px;font-size:14px;font-weight:700}

/* ---------- the status filter ---------- */
/* A native select over a row of chips - one control, keyboard and
   screen-reader friendly for free, and its own closed state already reads as
   "Checked in (3)" without anything extra on screen to explain that a filter
   is active. */
#page-commandCenter .cc-filter{margin-bottom:18px}
#page-commandCenter .cc-filter-btn{min-height:48px;padding:12px 20px;border-radius:13px;font-size:15px}
#page-commandCenter .cc-filter-btn svg{width:18px;height:18px}
#page-commandCenter .cc-filter-dot{width:8px;height:8px}
#page-commandCenter .cc-filter-menu{min-width:250px;padding:9px}
#page-commandCenter .cc-filter-opt{padding:12px 14px;border-radius:11px;font-size:15px;min-height:44px}
#page-commandCenter .cc-filter-count{font-size:13px}

html[data-theme="dark"] #page-commandCenter .cc-filter-btn{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--text)}
html[data-theme="dark"] #page-commandCenter .cc-filter-btn.active{border-color:var(--cc-filter-c,#48CAE4);color:var(--cc-filter-c,#90E0EF)}
html[data-theme="dark"] #page-commandCenter .cc-filter-dot{background:var(--cc-filter-c,#48CAE4)}
html[data-theme="dark"] #page-commandCenter .cc-filter-menu{
  background:rgba(22,32,54,.92);border-color:rgba(255,255,255,.14);box-shadow:0 18px 44px rgba(0,0,0,.5)}
html[data-theme="dark"] #page-commandCenter .cc-filter-opt{color:var(--text)}
html[data-theme="dark"] #page-commandCenter .cc-filter-opt:hover{background:rgba(72,202,228,.14)}
html[data-theme="dark"] #page-commandCenter .cc-filter-opt.active{background:var(--cc-filter-c,#0077B6);color:#fff}

/* ---------- the tiles ---------- */
/* Wider minimum than this app's other card grids - fewer, bigger
   tiles per row read easier at a glance than more, smaller ones. */
#page-commandCenter .cc-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
#page-commandCenter .cc-tile{
  padding:18px 19px 16px;border-radius:16px;
  background:rgba(255,255,255,.54);
  -webkit-backdrop-filter:blur(22px) saturate(165%);backdrop-filter:blur(22px) saturate(165%);
  border:1px solid rgba(255,255,255,.60);
  box-shadow:0 12px 30px rgba(15,23,42,.09),inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s,border-color .24s;
}
#page-commandCenter .cc-tile:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.86);
  box-shadow:0 22px 48px rgba(15,23,42,.15),inset 0 1px 0 rgba(255,255,255,.8);
}
/* The status edge, kept from the original for the reason the original gives
   colour that carries across a room without tinting the patient's name. It is
   now a gradient that fades downward, so four tiles in a row read as a set of
   lights rather than four hard bars. */
#page-commandCenter .cc-tile::before{
  width:4px;border-radius:16px 0 0 16px;
  background:linear-gradient(180deg,var(--border2),transparent 92%)}
/* A wash of the status colour behind the top of the card. Very low opacity:
   the point is that a waiting room feels warm at a glance, not that the card
   turns orange. */
#page-commandCenter .cc-tile::after{
  content:'';position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,119,182,.07),transparent);opacity:0}
#page-commandCenter .cc-waiting::after,
#page-commandCenter .cc-live::after,
#page-commandCenter .cc-over::after,
#page-commandCenter .cc-due::after{opacity:1}

#page-commandCenter .cc-time{font-size:15px;font-weight:800;letter-spacing:.01em}
#page-commandCenter .cc-state{
  font-size:12.5px;font-weight:700;padding:5px 12px;letter-spacing:.02em;
  border:1px solid transparent;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#page-commandCenter .cc-name{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-top:10px}
#page-commandCenter .cc-meta{font-size:14px;margin-top:4px}
#page-commandCenter .cc-blocktitle{font-size:12.5px;margin-top:7px;padding:3px 11px}
#page-commandCenter .cc-tile-actions{margin-top:15px;gap:9px}
#page-commandCenter .cc-wait{font-size:14px;padding:6px 13px}
#page-commandCenter .cc-inperson-note{font-size:13px}

/* Per-status colour: edge, wash and pill move together. */
#page-commandCenter .cc-waiting::before{background:linear-gradient(180deg,#ffb047,transparent 92%)}
#page-commandCenter .cc-waiting::after{background:linear-gradient(180deg,rgba(255,176,71,.16),transparent)}
#page-commandCenter .cc-waiting .cc-state{background:rgba(255,176,71,.22);border-color:rgba(255,176,71,.42)}
#page-commandCenter .cc-live::before{background:linear-gradient(180deg,#38d39f,transparent 92%)}
#page-commandCenter .cc-live::after{background:linear-gradient(180deg,rgba(47,163,107,.14),transparent)}
#page-commandCenter .cc-live .cc-state{background:rgba(47,163,107,.18);border-color:rgba(47,163,107,.38)}
#page-commandCenter .cc-over::before{background:linear-gradient(180deg,#e0342a,transparent 92%)}
#page-commandCenter .cc-over::after{background:linear-gradient(180deg,rgba(224,52,42,.13),transparent)}
#page-commandCenter .cc-over .cc-state{background:rgba(224,52,42,.16);border-color:rgba(224,52,42,.36)}
#page-commandCenter .cc-due::before{background:linear-gradient(180deg,#0096C7,transparent 92%)}
#page-commandCenter .cc-due .cc-state{background:rgba(0,150,199,.16);border-color:rgba(0,150,199,.38)}
#page-commandCenter .cc-missed::before{background:linear-gradient(180deg,#C2185B,transparent 92%)}
#page-commandCenter .cc-missed::after{background:linear-gradient(180deg,rgba(194,24,91,.14),transparent);opacity:1}
#page-commandCenter .cc-missed .cc-state{background:rgba(194,24,91,.18);border-color:rgba(194,24,91,.38)}
#page-commandCenter .cc-done::before{background:linear-gradient(180deg,#64748B,transparent 92%)}
#page-commandCenter .cc-done .cc-state{background:rgba(100,116,139,.20);border-color:rgba(100,116,139,.40)}
#page-commandCenter .cc-inperson .cc-state{background:rgba(136,146,164,.22);border-color:rgba(136,146,164,.42)}
#page-commandCenter .cc-checkedin::before{background:linear-gradient(180deg,#2E7D32,transparent 92%)}
#page-commandCenter .cc-checkedin::after{background:linear-gradient(180deg,rgba(46,125,50,.14),transparent);opacity:1}
#page-commandCenter .cc-checkedin .cc-state{background:rgba(46,125,50,.20);border-color:rgba(46,125,50,.42)}

/* A live room and a room with someone knocking are the two states worth
   spending motion on. Everything else stays still. */
#page-commandCenter .cc-live{box-shadow:0 12px 30px rgba(15,23,42,.09),
  0 0 0 1px rgba(56,211,159,.30),inset 0 1px 0 rgba(255,255,255,.65)}
#page-commandCenter .cc-waiting{box-shadow:0 12px 30px rgba(15,23,42,.09),
  0 0 0 1px rgba(255,176,71,.38),inset 0 1px 0 rgba(255,255,255,.65)}
#page-commandCenter .cc-wait{
  display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  padding:5px 11px;border-radius:999px;font-size:11px;
  background:rgba(255,176,71,.18);border:1px solid rgba(255,176,71,.40)}
#page-commandCenter .cc-wait::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#e08a12;flex:none;
  animation:ccBlink 1.8s ease-in-out infinite}
@keyframes ccBlink{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){#page-commandCenter .cc-wait::before{animation:none}}

/* Finished and in-person rooms recede rather than disappear - still countable,
   never competing with the rooms that need someone. */
#page-commandCenter .cc-done{opacity:.58;box-shadow:0 4px 14px rgba(15,23,42,.05)}
#page-commandCenter .cc-done:hover{opacity:.9}
#page-commandCenter .cc-inperson{opacity:.74;background:rgba(255,255,255,.36)}

/* Tile buttons: full-height glass chips, so a two-button row reads as a pair
   of targets rather than as text with a border round it. */
#page-commandCenter .cc-tile-actions .btn{
  border-radius:10px;padding:11px 18px;min-height:44px;font-size:14.5px;font-weight:700;
  transition:transform .16s,box-shadow .16s}
#page-commandCenter .cc-tile-actions .btn:hover{transform:translateY(-1px)}
/* Open / Copy Link now read as blue secondary actions - blue text and border
   on a faint blue tint, filling solid blue on hover. Distinct from the solid
   "Join now" primary, which stays the loudest thing on the tile. */
/* !important throughout: the base .btn-ghost:not(.btn-writeoff) rule sets
   background/border/color with !important, so plain overrides - even at higher
   specificity - lose to it. These have to match that weapon to win. */
#page-commandCenter .cc-tile-actions .btn-ghost{
  background:rgba(0,119,182,.10)!important;border:1.5px solid #0077B6!important;color:#0077B6!important}
#page-commandCenter .cc-tile-actions .btn-ghost:hover{
  background:#0077B6!important;border-color:#0077B6!important;color:#fff!important;
  box-shadow:0 5px 14px rgba(0,119,182,.28)!important;transform:translateY(-1px)!important}
#page-commandCenter .cc-tile-actions .btn-primary{
  background:linear-gradient(150deg,#0096C7,#0077B6);border-color:transparent;
  box-shadow:0 5px 16px rgba(0,119,182,.32)}

/* ---------- dark theme ---------- */
html[data-theme="dark"] #page-commandCenter .cc-tile,
html[data-theme="dark"] #page-commandCenter .cc-pilot{
  background:linear-gradient(140deg,rgba(72,202,228,.13),rgba(72,202,228,.05));
  border-color:rgba(199,210,254,.16);
  box-shadow:0 18px 44px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] #page-commandCenter .cc-tile:hover{
  border-color:rgba(144,224,239,.34);
  box-shadow:0 26px 56px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.10)}
html[data-theme="dark"] #page-commandCenter .cc-state{background:rgba(255,255,255,.07)}
html[data-theme="dark"] #page-commandCenter .cc-live{box-shadow:0 18px 44px rgba(0,0,0,.38),
  0 0 0 1px rgba(56,211,159,.34),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] #page-commandCenter .cc-waiting{box-shadow:0 18px 44px rgba(0,0,0,.38),
  0 0 0 1px rgba(255,176,71,.40),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme="dark"] #page-commandCenter .cc-wait{color:#ffc978;background:rgba(255,176,71,.13)}
html[data-theme="dark"] #page-commandCenter .cc-inperson{background:rgba(255,255,255,.04)}
html[data-theme="dark"] #page-commandCenter .cc-tile-actions .btn-ghost{
  background:rgba(72,202,228,.12)!important;border:1.5px solid rgba(72,202,228,.5)!important;color:#90E0F8!important}
html[data-theme="dark"] #page-commandCenter .cc-tile-actions .btn-ghost:hover{
  background:#48CAE4!important;border-color:#48CAE4!important;color:#04202B!important;box-shadow:none!important}

/* ---------- phones ---------- */
@media(max-width:760px){
  #page-commandCenter .pt-strip.cc-strip{padding:18px 18px!important}
  #page-commandCenter .cc-title{font-size:19px}
  #page-commandCenter .cc-count{min-width:0;padding:9px 10px}
  #page-commandCenter .cc-count strong{font-size:19px}
  #page-commandCenter .cc-grid{grid-template-columns:minmax(0,1fr);gap:11px}
}

.mtg-pager{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:14px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.58);
  box-shadow:0 8px 22px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.6);
}
.mtg-pager-count{font-size:11.5px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.mtg-pager-btns{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}

.mtg-pager-num,.mtg-pager-step{
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;
  min-width:34px;height:34px;padding:0 11px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.62);border:1px solid rgba(0,119,182,.18);color:var(--text);
  font-variant-numeric:tabular-nums;
  transition:background .16s,border-color .16s,transform .14s,box-shadow .16s;
}
.mtg-pager-num:hover:not(.active),.mtg-pager-step:hover:not(:disabled){
  background:#fff;border-color:rgba(0,119,182,.38);transform:translateY(-1px)}
.mtg-pager-num:active,.mtg-pager-step:active:not(:disabled){transform:translateY(0) scale(.97)}
.mtg-pager-num:focus-visible,.mtg-pager-step:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The current page is a filled chip, not just a bolder number - at 34px a
   weight change alone is not enough to find at a glance. */
.mtg-pager-num.active{
  background:linear-gradient(150deg,#0096C7,#0077B6);border-color:transparent;color:#fff;
  box-shadow:0 5px 16px rgba(0,119,182,.34);cursor:default}
/* Disabled means "there is no previous page", which is information. Faded, but
   still legible - a control that vanishes reads as a bug. */
.mtg-pager-step:disabled{opacity:.40;cursor:not-allowed;transform:none}
.mtg-pager-gap{padding:0 2px;color:var(--faint);font-size:12px;font-weight:700;user-select:none}

html[data-theme="dark"] .mtg-pager{
  background:linear-gradient(140deg,rgba(72,202,228,.11),rgba(72,202,228,.045));
  border-color:rgba(199,210,254,.16);
  box-shadow:0 14px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07)}
html[data-theme="dark"] .mtg-pager-num,
html[data-theme="dark"] .mtg-pager-step{
  background:rgba(255,255,255,.07);border-color:rgba(199,210,254,.18);color:var(--text)}
html[data-theme="dark"] .mtg-pager-num:hover:not(.active),
html[data-theme="dark"] .mtg-pager-step:hover:not(:disabled){
  background:rgba(255,255,255,.14);border-color:rgba(144,224,239,.34)}
html[data-theme="dark"] .mtg-pager-num.active{
  background:linear-gradient(150deg,#0096C7,#0077B6);border-color:transparent;color:#fff}

/* On a phone the count goes on its own line above full-width controls, rather
   than being squeezed onto one row with the buttons. */
@media(max-width:600px){
  .mtg-pager{flex-direction:column;align-items:stretch;gap:10px}
  .mtg-pager-btns{margin-left:0;justify-content:center}
  .mtg-pager-count{text-align:center}
}

.mtg-side-grip{
  align-self:center;flex:0 0 auto;
  width:22px;height:74px;padding:0;margin:0 -3px;
  display:flex;align-items:center;justify-content:center;
  position:relative;cursor:pointer;
  border-radius:8px;
  background:rgba(24,31,41,.62);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(233,240,248,.62);
  box-shadow:0 6px 20px rgba(0,0,0,.34);
  transition:background .16s,color .16s,border-color .16s,width .16s;
  /* backdrop-filter makes this element a stacking context, which traps the
     label's z-index:9 inside it - so the handle as a whole has to outrank the
     control rail (5) and the background panel (7), or the label is painted
     underneath the rail and comes out sliced in half. It did. */
  z-index:8;
}
.mtg-side-grip:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.26)}
.mtg-side-grip:active{background:rgba(255,255,255,.24)}
.mtg-side-grip:focus-visible{outline:2px solid #6fbcf0;outline-offset:2px}
.mtg-side-grip svg{width:15px;height:15px;display:block;transition:transform .22s cubic-bezier(.2,.8,.3,1)}
/* Open: the chevron points right, the way the panel is about to go. Collapsed:
   it points back left, at the panel it will bring out. One glyph, so it can
   never contradict the state. */
.mtg-side-grip svg{transform:rotate(0deg)}
.mtg-side-grip.collapsed svg{transform:rotate(180deg)}
/* Collapsed it is the only thing in the gutter, so it earns a little more
   presence - otherwise a 22px sliver against the window edge is easy to miss. */
.mtg-side-grip.collapsed{
  width:26px;height:88px;
  background:rgba(24,31,41,.78);border-color:rgba(255,255,255,.18);color:rgba(233,240,248,.85)}

/* Unread chat while collapsed. Shutting the panel must not be a way to
   silently miss a message from a patient. */
.mtg-side-grip-dot{
  position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:#e0342a;color:#fff;
  font-size:10px;font-weight:800;font-style:normal;line-height:1;
  border:2px solid rgba(18,23,30,.9);box-shadow:0 2px 8px rgba(224,52,42,.5)}

/* Label chip, matching the rail's. Drawn to the LEFT so it never lands
   off-screen when the handle is pinned to the window edge. */
.mtg-side-grip::after{
  content:attr(data-lbl);
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(6px);
  padding:7px 12px;border-radius:10px;white-space:nowrap;
  font-size:12px;font-weight:650;line-height:1;color:#f2f7fc;
  background:rgba(10,14,20,.90);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;z-index:9;
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.3,1)}
.mtg-side-grip:hover::after,
.mtg-side-grip:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
@media(prefers-reduced-motion:reduce){
  .mtg-side-grip svg,.mtg-side-grip::after{transition:none}
}

/* Under 900px the panel is already a slide-over, driven by "People and chat"
   in the ⋮ menu, and the gutter the handle lives in does not exist. Hide it
   rather than let it float over a tile. */
@media(max-width:900px){.mtg-side-grip{display:none}}

/* Guest link, invite row and modal - reachable from inside the call.
   .mtg-modal is z-index 9000 and .mtg-call is 9500, so the link dialog opened
   behind the call overlay and looked like a dead button. Bumped the same way
   #mtgRecModal and #mtgPromptModal already are. */
#mtgLinkModal{z-index:9600}
.mtg-invite{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-bottom:10px;padding:10px 12px;border-radius:10px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.01em;color:#eaf4fb;
  background:linear-gradient(150deg,rgba(0,150,199,.34),rgba(0,119,182,.22));
  border:1px solid rgba(120,205,235,.34);
  transition:background .16s,border-color .16s,transform .14s}
.mtg-invite:hover{background:linear-gradient(150deg,rgba(0,150,199,.52),rgba(0,119,182,.34));
  border-color:rgba(144,224,239,.55);transform:translateY(-1px)}
.mtg-invite:active{transform:translateY(0) scale(.99)}
.mtg-invite:focus-visible{outline:2px solid #6fbcf0;outline-offset:2px}
.mtg-invite svg{width:15px;height:15px;flex:none}

.mtg-guest-head{display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px 6px;font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.52)}
.mtg-guest-head span{font-size:10.5px;font-weight:800;color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.13);border-radius:999px;padding:1px 8px}

/* A quiet marker, not a warning. Joining by link is the normal way a patient
   attends - this says which door they came through, nothing more. */
.mtg-guest-tag{flex:none;margin-left:6px;font-size:9px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#9fd8ef;
  background:rgba(72,202,228,.14);border:1px solid rgba(72,202,228,.30);
  border-radius:999px;padding:2px 7px}

/* Removing someone is destructive, so the control stays quiet until you go
   looking for it and only turns red under the pointer. A red button sitting
   permanently beside a patient's name in a clinical room is an invitation to
   a mis-click. */
.mtg-side-remove{
  flex:none;width:28px;height:28px;padding:0;margin-left:4px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:transparent;border:1px solid transparent;color:rgba(255,255,255,.40);
  transition:background .15s,color .15s,border-color .15s}
.mtg-side-remove:hover{background:rgba(224,52,42,.18);border-color:rgba(224,52,42,.44);color:#ff9d90}
.mtg-side-remove:focus-visible{outline:2px solid #ff9d90;outline-offset:1px;color:#ff9d90}
.mtg-side-remove svg{width:15px;height:15px;display:block}
/* Touch has no hover, so there the control is always legible. */
@media(hover:none){.mtg-side-remove{color:rgba(255,157,144,.85);border-color:rgba(224,52,42,.30)}}

.mtg-side-guest .mtg-side-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mtg-chat-compose{align-items:stretch}
.mtg-chat-compose textarea{border-radius:10px}
.mtg-chat-compose .btn{
  align-self:stretch;flex:0 0 auto;min-width:68px;
  display:flex;align-items:center;justify-content:center;
  padding:0 16px;border-radius:10px;
  font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap}
/* On a phone the panel is narrow enough that a side-by-side pair squeezes the
   message box; Send takes its own full-width row underneath instead. */
@media(max-width:600px){
  .mtg-chat-compose{flex-wrap:wrap}
  .mtg-chat-compose textarea{flex:1 1 100%}
  .mtg-chat-compose .btn{width:100%;min-height:38px}
}

#page-commandCenter .cc-onair.on{
  background:linear-gradient(160deg,#3fbe86,#2c9463);
  border-color:rgba(150,240,200,.45);
  box-shadow:0 8px 26px rgba(47,163,107,.48),inset 0 1px 0 rgba(255,255,255,.26)}
#page-commandCenter .cc-onair.on i{background:#eafff6;box-shadow:0 0 0 3px rgba(255,255,255,.22)}

/* The tile the appointment alert sent you to. A board of ten rooms with no
   sign of which one you were called about is barely better than no board, so
   the tile is scrolled to and marked. The mark fades after 12 seconds: it
   means this is the one you came for, not that the room is special. */
#page-commandCenter .cc-tile.cc-focus{
  transform:translateY(-3px);
  border-color:rgba(0,180,216,.75)!important;
  box-shadow:0 0 0 3px rgba(0,180,216,.28),0 22px 48px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.75);
  animation:ccFocusIn .5s cubic-bezier(.2,.8,.3,1)}
@keyframes ccFocusIn{
  0%{box-shadow:0 0 0 0 rgba(0,180,216,.55),0 12px 30px rgba(15,23,42,.09)}
  100%{box-shadow:0 0 0 3px rgba(0,180,216,.28),0 22px 48px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.75)}}
@media(prefers-reduced-motion:reduce){#page-commandCenter .cc-tile.cc-focus{animation:none}}
html[data-theme="dark"] #page-commandCenter .cc-tile.cc-focus{
  box-shadow:0 0 0 3px rgba(0,180,216,.35),0 26px 56px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.10)}


.mtg-call{transition:inset .22s cubic-bezier(.2,.8,.3,1),width .22s cubic-bezier(.2,.8,.3,1),
  height .22s cubic-bezier(.2,.8,.3,1),border-radius .22s}
@media(prefers-reduced-motion:reduce){.mtg-call{transition:none}}

.mtg-call.docked{
  inset:auto;
  right:20px;bottom:20px;
  width:360px;height:250px;
  border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.10);
  /* Above portal content, below every dialog - a docked call must never cover
     a confirm box it might itself have raised. */
  z-index:9400;
}
.mtg-call.docked .mtg-call-inner{padding:0;gap:0}
.mtg-call.docked .mtg-stage{border-radius:16px}

/* The roster/chat panel and its handle have nowhere to go at 360px. They come
   back with the call. */
.mtg-call.docked .mtg-side,
.mtg-call.docked .mtg-side-grip,
.mtg-call.docked .mtg-menu,
.mtg-call.docked .mtg-bg-panel{display:none!important}

/* Header shrinks to a single readable line. */
.mtg-call.docked .mtg-stage-head{padding:8px 10px 20px}
.mtg-call.docked .mtg-stage-id{gap:7px;padding:4px 9px 4px 7px}
.mtg-call.docked .mtg-stage-timer{font-size:11.5px}
.mtg-call.docked .mtg-stage-name{font-size:11.5px;max-width:130px}
.mtg-call.docked .mtg-stage-clock,
.mtg-call.docked .mtg-stage-note{display:none}

/* The bar is already horizontal; docked it just tightens up and drops the two
   controls that need the full window - present, and the ⋮ menu whose sheet is
   taller than the card. Microphone, camera and leave stay, plus restore in the
   header. The card is 360px wide; anything more would be unusable. */
.mtg-call.docked .mtg-rail{
  bottom:8px;gap:7px;padding:6px 9px;border-radius:999px;max-width:calc(100% - 16px)}
.mtg-call.docked .mtg-rail > *{display:none}
.mtg-call.docked .mtg-rail > .mtg-rbtn-primary,
.mtg-call.docked .mtg-rail > .mtg-hang{display:flex}
.mtg-call.docked .mtg-rbtn,
.mtg-call.docked .mtg-rbtn-primary,
.mtg-call.docked .mtg-rbtn.mtg-hang{width:34px;height:34px}
.mtg-call.docked .mtg-rbtn svg,
.mtg-call.docked .mtg-rbtn-primary svg,
.mtg-call.docked .mtg-rbtn.mtg-hang svg{width:15px;height:15px}
/* Labels sit above the bar everywhere; docked they just get smaller. */
.mtg-call.docked .mtg-rbtn::after{
  bottom:calc(100% + 9px);transform:translateX(-50%) translateY(5px);font-size:11px;padding:5px 9px}
.mtg-call.docked .mtg-rbtn:hover::after,
.mtg-call.docked .mtg-rbtn:focus-visible::after{transform:translateX(-50%) translateY(0)}

/* Tiles keep their own fitted size; only the padding they sit in changes. The
   bottom clears the bar (48px tall, 8px off the edge) - at 46 the tile's name
   label was drawn underneath it. */
.mtg-call.docked .mtg-grid{padding:34px 8px 62px}
.mtg-call.docked .mtg-tile-bar{font-size:10px;padding:3px 6px}
.mtg-call.docked .mtg-tile-name{font-size:10px}
.mtg-call.docked .mtg-present-strip{display:none}

/* ---- confirm-patient-present button ---- */
.mtg-checkin-btn{
  flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;
  margin-left:10px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  background:rgba(12,17,24,.50);border:1px solid rgba(255,255,255,.16);color:rgba(233,240,248,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .15s,color .15s,border-color .15s,transform .15s}
.mtg-checkin-btn svg{width:16px;height:16px;flex:none}
.mtg-checkin-btn:hover{background:rgba(255,255,255,.20);color:#fff;border-color:rgba(255,255,255,.30)}
.mtg-checkin-btn:active{transform:scale(.97)}
.mtg-checkin-btn:focus-visible{outline:2px solid #6fbcf0;outline-offset:2px}
.mtg-checkin-btn[disabled]{opacity:.6;cursor:default;pointer-events:none}
.mtg-checkin-btn.is-done{
  background:linear-gradient(150deg,#3fae72,#2f8f5c);border-color:rgba(255,255,255,.24);
  color:#fff;cursor:default}

/* Ready for Provider - inherits the check-in button's shape so the two read as
   one pair, but carries the accent while it is still actionable: it is the
   button that actually summons a clinician, and it should be the one the eye
   lands on once the patient is confirmed present. */
/* NEUTRAL while it is still a thing to do - it must not look already-done when
   you walk into the room. Matches Confirm Patient Present exactly, so the two
   read as an unpressed pair. It only lights up (is-done, below) once clicked. */
.mtg-ready-btn{
  flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;
  margin-left:8px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  background:rgba(12,17,24,.50);border:1px solid rgba(255,255,255,.16);color:rgba(233,240,248,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .15s,color .15s,border-color .15s,transform .15s}
/* Explicitly interactive and above its neighbours. The stage header is
   pointer-events:none with only direct children re-enabled, so anything that
   changes this button's nesting silently makes it unclickable - stating it
   here means that cannot happen twice. The icon never eats the press. */
.mtg-ready-btn{pointer-events:auto;position:relative;z-index:2}
.mtg-ready-btn svg{width:16px;height:16px;flex:none;pointer-events:none}
.mtg-ready-btn:hover{background:rgba(142,36,170,.28);color:#fff;border-color:rgba(225,190,231,.4)}
.mtg-ready-btn:active{transform:scale(.97)}
.mtg-ready-btn:focus-visible{outline:2px solid #E1BEE7;outline-offset:2px}
.mtg-ready-btn[disabled]{opacity:.6;cursor:default;pointer-events:none}
/* DONE - now it lights up. This purple is the confirmation the provider has
   actually been summoned, so it belongs on the finished state, not before. */
.mtg-ready-btn.is-done{
  background:linear-gradient(150deg,#8E24AA,#6A1B9A);border-color:rgba(255,255,255,.24);
  color:#fff;cursor:default}
@media(max-width:900px){.mtg-ready-btn{display:none}}
/* Hidden wherever the stage header has no room for it - a phone, the docked
   card, the floating mini window - but never without a way back to it: the
   ⋮ menu carries the identical action (see mtgRenderMore in meetings.js), so
   this is only ever hiding a shortcut, not the only door. */
@media(max-width:900px){.mtg-checkin-btn{display:none}}
.mtg-call.docked .mtg-checkin-btn,
.mtg-call.mini .mtg-checkin-btn,
.mtg-call.docked .mtg-ready-btn,
.mtg-call.mini .mtg-ready-btn{display:none}

.mtg-touch{position:fixed;left:20px;bottom:110px;z-index:9600;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
body.mtg-docked .mtg-touch,
body.mtg-mini .mtg-touch{display:none}
.mtg-touch-btn{
  position:relative;width:52px;height:52px;border-radius:50%;flex:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(20,26,36,.62);border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 10px 28px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.14);
  transition:background .15s,border-color .15s,transform .15s}
.mtg-touch-btn svg{width:22px;height:22px}
.mtg-touch-btn:hover{background:rgba(255,255,255,.22);transform:scale(1.05)}
.mtg-touch-btn:active{transform:scale(.96)}
.mtg-touch-btn:focus-visible{outline:2px solid #6fbcf0;outline-offset:3px}
.mtg-touch-btn.urgent{border-color:rgba(255,176,71,.55)}
.mtg-touch-dot{
  position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;
  background:#ff9f1c;border:2px solid #12161c;
  animation:mtgTouchPulse 1.8s ease-in-out infinite}
@keyframes mtgTouchPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,159,28,.5)}50%{box-shadow:0 0 0 5px rgba(255,159,28,0)}}
@media(prefers-reduced-motion:reduce){.mtg-touch-dot{animation:none}}
.mtg-touch-panel{
  width:252px;max-height:min(70vh,420px);overflow-y:auto;padding:14px;border-radius:16px;
  background:rgba(20,26,36,.78);border:1px solid rgba(255,255,255,.18);color:#fff;
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  animation:mtgTouchPanelIn .14s ease-out}
@keyframes mtgTouchPanelIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mtg-touch-panel{animation:none}}
/* One row per candidate - plural, see mtgTouchQueue in
   meetings.js: a TA can have more than one room staged, and only ever
   showing the single "best" one made the second patient invisible. */
.mtg-touch-row{padding:6px 2px}
.mtg-touch-sep{border:none;border-top:1px solid rgba(255,255,255,.12);margin:10px 0}
.mtg-touch-kicker{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#ffb047}
.mtg-touch-name{font-size:16px;font-weight:800;margin-top:4px}
/* Same merged Provider's Calendar block as .cc-blocktitle, on the in-call
   panel's dark ground - the colour is lifted toward white so a dark category
   (Deep Red) is still readable here. */
.mtg-touch-block{display:inline-block;max-width:100%;margin-top:4px;margin-right:4px;
  padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;
  color:color-mix(in srgb,var(--block-color) 45%,#fff);
  border:1px solid color-mix(in srgb,var(--block-color) 55%,transparent);
  background:color-mix(in srgb,var(--block-color) 22%,transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtg-touch-blocktime{font-weight:600;opacity:.82}
.mtg-touch-blocktime::before{content:" · ";opacity:.65}
/* Handover status in the in-call panel - smaller than the block pill above it
   so both fit the narrow column; green "Checked in", purple "Ready for
   provider", tuned to read on the dark panel. */
.mtg-touch-stats{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.mtg-touch-stat{display:inline-block;padding:1.5px 7px;border-radius:999px;
  font-size:9.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  white-space:nowrap}
.mtg-touch-stat.is-checkedin{background:rgba(129,199,132,.20);color:#A5D6A7;border:1px solid rgba(129,199,132,.34)}
.mtg-touch-stat.is-ready{background:rgba(186,104,200,.24);color:#E1BEE7;border:1px solid rgba(186,104,200,.42)}
.mtg-touch-time{font-size:12.5px;color:rgba(233,240,248,.72);margin-top:5px}
.mtg-touch-row .btn{width:100%;margin-top:10px;justify-content:center}
.mtg-touch-empty{font-size:13px;color:rgba(233,240,248,.8);line-height:1.5;padding:2px}
@media(max-width:900px){.mtg-touch{display:none}}

/* ---- the dock / restore button ---- */
.mtg-dock-btn{
  flex:none;margin-left:8px;width:30px;height:30px;padding:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(12,17,24,.50);border:1px solid rgba(255,255,255,.13);
  color:rgba(233,240,248,.80);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .15s,color .15s,border-color .15s}
.mtg-dock-btn:hover{background:rgba(255,255,255,.20);color:#fff;border-color:rgba(255,255,255,.28)}
.mtg-dock-btn:focus-visible{outline:2px solid #6fbcf0;outline-offset:2px}
.mtg-dock-btn svg{width:15px;height:15px;display:block}
/* Docked, the button is the card's most important control - it is the way
   back - so it stops being quiet. */
.mtg-call.docked .mtg-dock-btn{margin-left:auto;width:26px;height:26px;
  background:rgba(255,255,255,.16);color:#fff}
.mtg-call.docked .mtg-dock-btn svg{width:13px;height:13px}

/* The appointment alert shares the bottom-right corner. Move it above the card
   rather than letting the two stack on top of each other. */
body.mtg-docked .ctg-alert{bottom:288px}

/* Phones: the card spans the width instead of floating in a corner, because
   360px on a 390px screen is not a corner. */
@media(max-width:620px){
  .mtg-call.docked{right:10px;left:10px;width:auto;height:190px}
  body.mtg-docked .ctg-alert{bottom:228px}
}

.mtg-mini-body{margin:0;height:100%;overflow:hidden;background:#0f1216}
.mtg-call.mini{
  position:static;inset:auto;width:100%;height:100vh;border-radius:0;
  transition:none;z-index:auto}
.mtg-call.mini .mtg-call-inner{padding:0;gap:0}
.mtg-call.mini .mtg-stage{border-radius:0}
/* No room for the roster, the chat or the drag handle in a window this size
   and the window itself is already draggable by its own title bar. */
.mtg-call.mini .mtg-side,
.mtg-call.mini .mtg-side-grip,
.mtg-call.mini .mtg-bg-panel,
.mtg-call.mini .mtg-menu,
.mtg-call.mini .mtg-dock-btn,
.mtg-call.mini .mtg-stage-clock,
.mtg-call.mini .mtg-present-strip{display:none!important}
.mtg-call.mini .mtg-stage-head{padding:7px 9px 18px}
.mtg-call.mini .mtg-stage-id{gap:6px;padding:3px 8px 3px 6px}
.mtg-call.mini .mtg-stage-timer,
.mtg-call.mini .mtg-stage-name{font-size:11px}
.mtg-call.mini .mtg-stage-name{max-width:150px}
.mtg-call.mini .mtg-grid{padding:30px 6px 44px}

/* The controls that matter with the portal in front of you: microphone,
   camera, screen share, leave. The ⋮ menu needs the full window. */
.mtg-call.mini .mtg-rail{
  bottom:7px;gap:6px;padding:5px 8px;border-radius:999px;
  max-width:calc(100% - 12px);overflow:visible}
.mtg-call.mini .mtg-rail > *{display:none}
.mtg-call.mini .mtg-rail > .mtg-rbtn-primary,
.mtg-call.mini .mtg-rail > .mtg-hang{display:flex}
.mtg-call.mini .mtg-rbtn,
.mtg-call.mini .mtg-rbtn-primary,
.mtg-call.mini .mtg-rbtn.mtg-hang{width:32px;height:32px}
.mtg-call.mini .mtg-rbtn svg,
.mtg-call.mini .mtg-rbtn-primary svg,
.mtg-call.mini .mtg-rbtn.mtg-hang svg{width:14px;height:14px}
/* A tooltip cannot be drawn outside an OS window, so it stays tight to the bar. */
.mtg-call.mini .mtg-rbtn::after{
  bottom:calc(100% + 7px);font-size:10.5px;padding:4px 8px}

/* Screen share is worth reaching while floating - it is the control you are
   most likely to want when the meeting is over another application. */
.mtg-call.mini .mtg-rail > .mtg-rbtn-share,
.mtg-call.docked .mtg-rail > .mtg-rbtn-share{display:flex}

/* Dragging the docked card: kill the size transition so it tracks the pointer
   exactly instead of easing behind it. */
.mtg-call.docked .mtg-stage-head{cursor:move;pointer-events:auto}
.mtg-call.docked.dragging{transition:none;cursor:grabbing}
.mtg-call.docked.dragging *{user-select:none}

#page-patientMessaging{
  /* WhatsApp layout, PORTAL colours - the accent is the portal blue (#0077B6)
     rather than WhatsApp green. Variable names keep the wa- prefix for
     continuity; only the values are portal blue. */
  --wa-green:#0077B6; --wa-green-d:#023E8A;
  --wa-out:#d4e9f8; --wa-in:#ffffff; --wa-bg:#e9eef3;
  --wa-panel:#ffffff; --wa-head:#eef2f6; --wa-badge:#0096C7;
  --wa-text:#0b2027; --wa-sub:#667781; --wa-line:#e4e9ee;
}
/* the big banner -> portal blue */
#page-patientMessaging .pm-hero{background:linear-gradient(90deg,#0077B6,#0096C7)!important}

/* ---- chat list (left) ---- */
#page-patientMessaging .pm-directory{background:var(--wa-panel)!important;border-right:1px solid var(--wa-line)!important}
#page-patientMessaging .pm-dir-head{background:var(--wa-head)!important;border-bottom:1px solid var(--wa-line)!important;padding:8px 12px 10px!important}
#page-patientMessaging .pm-dir-search input{background:#fff!important;border:1px solid transparent!important;border-radius:20px!important;height:36px!important}
#page-patientMessaging .pm-dir-search input:focus{border-color:transparent!important;box-shadow:none!important}
#page-patientMessaging .pm-dir-filter.active{background:var(--wa-green)!important;border-color:var(--wa-green)!important;color:#fff!important}
#page-patientMessaging .pm-dir-filter:hover{border-color:var(--wa-green)!important;color:var(--wa-green-d)!important}
#page-patientMessaging .pm-dir-list{padding:0!important}
/* flat rows, not cards - WhatsApp spacing: ~72px tall, 49px avatar, 15px
   gutter, and a divider that starts after the avatar (indented) rather than
   spanning the full width. */
#page-patientMessaging .pm-dir-card{border:none!important;border-radius:0!important;box-shadow:none!important;margin:0!important;
  padding:0 14px 0 0!important;background:transparent!important;position:relative;min-height:72px;
  flex-direction:row!important;align-items:center!important;gap:0!important;transition:background .12s!important}
#page-patientMessaging .pm-dir-card::after{content:'';position:absolute;left:78px;right:0;bottom:0;height:1px;background:var(--wa-line)}
#page-patientMessaging .pm-dir-card:last-child::after{display:none}
#page-patientMessaging .pm-dir-card:hover{transform:none!important;background:#f5f6f6!important;box-shadow:none!important}
#page-patientMessaging .pm-dir-card.active{background:#f0f2f5!important;box-shadow:none!important}
#page-patientMessaging .pm-dir-card-top{flex:1 1 auto!important;gap:15px!important;min-width:0;padding:9px 0 9px 15px!important}
#page-patientMessaging .pm-av{border-radius:50%!important;width:49px!important;height:49px!important;
  background:linear-gradient(140deg,#0096C7,#0077B6 60%,#023E8A)!important;color:#fff!important;box-shadow:none!important;font-size:17px!important;font-weight:500!important}
#page-patientMessaging .pm-av-dot{background:var(--wa-badge)!important;border-color:#fff!important}
#page-patientMessaging .pm-dir-name{font-size:16px!important;font-weight:400!important;color:var(--wa-text)!important}
#page-patientMessaging .pm-dir-meta{font-size:13px!important;color:var(--wa-sub)!important;margin-top:2px}
/* capability chips -> compact grey tags on the right */
#page-patientMessaging .pm-dir-chips{flex:none!important;margin-left:8px}
#page-patientMessaging .pm-chip{background:transparent!important;color:var(--wa-sub)!important;padding:2px 4px!important;font-size:9px!important}
#page-patientMessaging .pm-chip.sms,#page-patientMessaging .pm-chip.email{color:var(--wa-green-d)!important}

/* ---- chat canvas (right) ---- */
#page-patientMessaging .pm-workspace{background:var(--wa-bg)!important}
#page-patientMessaging .pm-blank-art,#page-patientMessaging .pm-tl-empty svg{background:var(--wa-green)!important}
/* conversation header card -> flat white bar */
#page-patientMessaging .pm-patient-card{background:var(--wa-head)!important;border:none!important;border-radius:0!important;box-shadow:none!important}
#page-patientMessaging .pm-av-lg{border-radius:50%!important;background:linear-gradient(140deg,#0096C7,#0077B6 60%,#023E8A)!important;box-shadow:none!important}
#page-patientMessaging .pm-btn-call,#page-patientMessaging .pm-btn-primary{background:var(--wa-green)!important;border-color:var(--wa-green)!important;color:#fff!important}
#page-patientMessaging .pm-btn-call:hover,#page-patientMessaging .pm-btn-primary:hover{background:var(--wa-green-d)!important;border-color:var(--wa-green-d)!important}
/* conversation card -> transparent so bubbles sit on the beige */
#page-patientMessaging .pm-timeline-card{background:transparent!important;border:none!important;box-shadow:none!important}
#page-patientMessaging .pm-timeline-card>.pm-card-hd{background:transparent!important;border:none!important}
/* date pill */
#page-patientMessaging .pm-chat-day span{background:#fff!important;color:var(--wa-sub)!important;box-shadow:0 1px 1px rgba(11,20,26,.1);border-radius:8px;padding:5px 12px;font-size:11px}
#page-patientMessaging .pm-chat-day::before,#page-patientMessaging .pm-chat-day::after{background:transparent!important}
/* hide the per-bubble avatar + name row and the below-bubble foot - WhatsApp
   1:1 has neither; time + tick now live inside the bubble stamp. */
#page-patientMessaging .pm-chat-av{display:none!important}
#page-patientMessaging .pm-chat-meta{display:none!important}
#page-patientMessaging .pm-chat-foot{display:none!important}
#page-patientMessaging .pm-chat-col{max-width:min(65%,520px)!important}
#page-patientMessaging .pm-chat-msg{margin:2px 0!important}
/* bubbles: incoming white (left), outgoing green (right), tight padding, a
   small tail, and display:flow-root so the floated stamp is contained without
   an overflow:hidden that would clip the tail. */
#page-patientMessaging .pm-chat-bubble{border:none!important;border-radius:7.5px!important;
  box-shadow:0 1px .5px rgba(11,20,26,.13)!important;position:relative;display:flow-root;
  padding:6px 9px 8px 9px!important}
#page-patientMessaging .pm-chat-msg.in .pm-chat-bubble{background:var(--wa-in)!important;color:var(--wa-text)!important;border-top-left-radius:0!important}
#page-patientMessaging .pm-chat-msg.out .pm-chat-bubble{background:var(--wa-out)!important;color:var(--wa-text)!important;border-top-right-radius:0!important}
#page-patientMessaging .pm-chat-text{color:var(--wa-text)!important;display:inline;font-size:14.2px!important;line-height:19px!important}
#page-patientMessaging .pm-chat-msg.in .pm-chat-bubble::after{content:'';position:absolute;top:0;left:-8px;border:6px solid transparent;border-top-color:var(--wa-in);border-right:0}
#page-patientMessaging .pm-chat-msg.out .pm-chat-bubble::after{content:'';position:absolute;top:0;right:-8px;border:6px solid transparent;border-top-color:var(--wa-out);border-left:0}
/* in-bubble time + tick, floated bottom-right so short lines sit beside the
   time and long ones wrap above it (the WhatsApp behaviour). */
#page-patientMessaging .pm-chat-stamp{float:right;margin:0 0 -2px 10px;position:relative;top:6px;
  font-size:11px;line-height:1;color:var(--wa-sub);white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
#page-patientMessaging .pm-tick{font-size:11px;letter-spacing:-2px}
#page-patientMessaging .pm-tick.read{color:#53bdeb}
#page-patientMessaging .pm-tick.pend{color:var(--wa-sub)}
#page-patientMessaging .pm-tick.fail{color:#e0342a;letter-spacing:0;font-weight:800}

#page-patientMessaging .pm-workspace.pm-pinned{overflow:hidden!important;padding:0!important;gap:0!important}
#page-patientMessaging .pm-workspace.pm-pinned .pm-patient-card{flex:0 0 auto!important}
#page-patientMessaging .pm-workspace.pm-pinned .pm-timeline-card{flex:1 1 auto!important;min-height:0!important;
  overflow-y:auto!important;background:var(--wa-bg)!important;padding:12px 6% 10px!important}
#page-patientMessaging .pm-workspace.pm-pinned .pm-composer-card{flex:0 0 auto!important;
  border-top:1px solid var(--wa-line)!important}
#page-patientMessaging .pm-workspace.pm-pinned .pm-chat{padding:0!important}
#page-patientMessaging .pm-timeline-card>.pm-card-hd{display:none!important}

/* ---- composer -> WhatsApp input bar ---- */
#page-patientMessaging .pm-composer-card{background:var(--wa-head)!important;border:none!important;border-radius:0!important;box-shadow:none!important;padding:8px 12px!important}
#page-patientMessaging .pm-pc-book{display:none!important}          /* redundant with the Contact Book button */
#page-patientMessaging .pm-tabs{border:none!important;background:transparent!important;padding:0 0 6px!important;margin:0!important}
/* channel selector: one compact dropdown instead of the three-tab strip */
#page-patientMessaging .pm-chan{position:relative;display:inline-block}
#page-patientMessaging .pm-chan-btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:16px;background:#fff;color:var(--wa-green-d);font-size:12.5px;font-weight:700;
  box-shadow:0 1px 1px rgba(11,20,26,.08)}
#page-patientMessaging .pm-chan-btn::-webkit-details-marker{display:none}
#page-patientMessaging .pm-chan-btn svg{width:15px;height:15px}
#page-patientMessaging .pm-chan[open] .pm-chan-btn svg:last-child{transform:rotate(180deg)}
#page-patientMessaging .pm-chan-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:30;min-width:150px;
  background:#fff;border-radius:10px;box-shadow:0 6px 24px rgba(11,20,26,.2);padding:5px;display:flex;flex-direction:column;gap:2px}
#page-patientMessaging .pm-chan-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border:none;border-radius:7px;
  background:transparent;cursor:pointer;font-size:13px;color:var(--wa-text);text-align:left}
#page-patientMessaging .pm-chan-opt svg{width:16px;height:16px;color:var(--wa-sub)}
#page-patientMessaging .pm-chan-opt:hover{background:#f0f2f5}
#page-patientMessaging .pm-chan-opt.on{color:var(--wa-green-d);font-weight:700}
#page-patientMessaging .pm-chan-opt[disabled]{opacity:.45;cursor:default}
/* the input row: templates icon · field · round send */
#page-patientMessaging .pm-inputbar{display:flex;align-items:flex-end;gap:8px}
#page-patientMessaging .pm-inputbar .pm-textarea{flex:1;background:#fff!important;border:none!important;border-radius:22px!important;
  box-shadow:0 1px 1px rgba(11,20,26,.08)!important;min-height:44px!important;padding:11px 16px!important;margin:0!important}
#page-patientMessaging .pm-tpl-icon{width:40px;height:44px;display:flex;align-items:center;justify-content:center;
  border:none!important;background:transparent!important;color:var(--wa-sub)!important;border-radius:50%;cursor:pointer}
#page-patientMessaging .pm-tpl-icon:hover{background:rgba(0,0,0,.05)!important}
#page-patientMessaging .pm-tpl-icon svg{width:22px;height:22px}
/* Templates menu opens UPWARD out of the bottom-pinned input bar. Opening
   downward (the default) put it below the composer, where the workspace's
   overflow:hidden clipped it out of view. */
#page-patientMessaging .pm-tpl-menu{top:auto!important;bottom:calc(100% + 8px)!important;left:0!important;right:auto!important}
#page-patientMessaging .pm-send-btn{width:46px;height:46px;flex:none;border-radius:50%!important;padding:0!important;
  display:flex;align-items:center;justify-content:center;background:var(--wa-green)!important;border:none!important}
#page-patientMessaging .pm-send-btn:hover{background:var(--wa-green-d)!important}
#page-patientMessaging .pm-send-btn svg{width:20px;height:20px;margin:0!important}
#page-patientMessaging .pm-input{background:#fff!important;border:none!important;border-radius:20px!important;box-shadow:0 1px 1px rgba(11,20,26,.08)!important;margin-bottom:8px!important}

/* ---- dark theme -> WhatsApp dark ---- */
html[data-theme="dark"] #page-patientMessaging{
  --wa-green:#0096C7; --wa-green-d:#0077B6;
  --wa-out:#0e3a5c; --wa-in:#16262e; --wa-bg:#0a1216;
  --wa-panel:#111e24; --wa-head:#16262e; --wa-text:#e6eff2; --wa-sub:#7b939d; --wa-line:#263a43;
}
html[data-theme="dark"] #page-patientMessaging .pm-chat-text,
html[data-theme="dark"] #page-patientMessaging .pm-dir-name{color:var(--wa-text)!important}

/* Rounder UI font - Inter/DM Sans stay as the fallback stack, so
   nothing breaks if the Google Fonts request is ever blocked.
   Not applied to .ds-paper/.ds-field (the document/PDF
   preview) or anything using DM Mono for data - those are untouched. */
body{font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif}

.side-account-card{
  margin:10px 14px 4px;padding:11px;border-radius:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:9px;
}
.side-account-who{display:flex;align-items:center;gap:9px;min-width:0}
.side-account-av{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.side-account-info{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.side-account-name{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-account-role{font-size:10.5px;color:rgba(255,255,255,.55)}
.side-account-out{
  display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:12px;font-weight:700;
  font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif;
  transition:background .15s;
}
.side-account-out:hover{background:rgba(255,255,255,.16)}
.side-account-out svg{width:13px;height:13px;flex-shrink:0}


.side-link.active,.side-sublink.active{
  color:#FFFFFF!important;
  background:rgba(255,255,255,.13)!important;
  -webkit-backdrop-filter:blur(14px) saturate(150%)!important;
  backdrop-filter:blur(14px) saturate(150%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 6px 18px rgba(2,6,23,.20)!important;
}
.side-link.active::before,.side-sublink.active::before{display:none!important}
.side-link.active{padding-left:13px!important}
.side-sublink.active{padding-left:26px!important}
.side-link.active svg,.side-sublink.active svg{color:#CAF0F8!important;filter:none!important}

.page,
#page-dashboard.active{
  background:
    radial-gradient(820px 540px at 102% -14%, rgba(0,119,182,.20), transparent 68%),
    radial-gradient(490px 410px at 78% 6%,    rgba(0,119,182,.12), transparent 70%),
    radial-gradient(385px 665px at -6% 40%,   rgba(0,119,182,.14), transparent 72%),
    radial-gradient(540px 435px at 60% 112%,  rgba(0,119,182,.10), transparent 72%),
    transparent!important;
  min-height:calc(100vh - 54px);
}
html[data-theme="dark"] .page,
html[data-theme="dark"] #page-dashboard.active{
  background:
    radial-gradient(820px 540px at 102% -14%, rgba(72,202,228,.20), transparent 68%),
    radial-gradient(490px 410px at 78% 6%,    rgba(72,202,228,.12), transparent 70%),
    radial-gradient(385px 665px at -6% 40%,   rgba(72,202,228,.14), transparent 72%),
    radial-gradient(540px 435px at 60% 112%,  rgba(0,119,182,.14),  transparent 72%),
    transparent!important;
}

label{min-height:0}
.g2,.g3,.g4{align-items:end}
/* Textareas and anything explicitly full-width still want to fill
   their cell rather than sit on the baseline. */
.g2>.full,.g3>.full,.g4>.full{align-self:stretch}

/* Field borders were rgba(0,119,182,.15) - at that alpha over the page
   the input edge is nearly invisible, so a form reads as floating text
   rather than as fillable fields. Roughly doubled, which is still a
   soft brand-tinted hairline, not a hard box. */
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=search],input[type=date],input[type=time],input[type=number],
select,textarea{
  border-color:rgba(0,119,182,.30);
}
html[data-theme="dark"] input[type=text],html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=tel],html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=search],html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=time],html[data-theme="dark"] input[type=number],
html[data-theme="dark"] select,html[data-theme="dark"] textarea{
  border-color:rgba(144,224,239,.22);
}


/* --- page header banner ------------------------------------ */
/* .pt-strip is the blue block at the top of essentially every page
   and was a flat two-stop gradient. It is the largest single piece
   of brand colour in the product, so it carries the most benefit
   from the same lighting the rail now has. */
.pt-strip,
html[data-theme="dark"] .pt-strip{
  background:
    radial-gradient(circle 240px at 94% -30%,  rgba(255,255,255,.18) 0%, rgba(255,255,255,.10) 45%, transparent 72%),
    radial-gradient(circle 150px at 74% 150%,  rgba(255,255,255,.11) 0%, rgba(255,255,255,.06) 45%, transparent 74%),
    radial-gradient(circle 90px  at 40% -60%,  rgba(255,255,255,.09) 0%, rgba(255,255,255,.05) 48%, transparent 76%),
    radial-gradient(circle 120px at 8%  160%,  rgba(0,180,216,.16)  0%, rgba(0,180,216,.09)  45%, transparent 74%),
    linear-gradient(135deg,rgba(2,62,138,.94) 0%,rgba(2,62,138,.88) 52%,rgba(3,4,94,.94) 100%)!important;
}

/* --- card headers ------------------------------------------ */
/* A flat tint bar. A single wide sheen from the leading edge gives
   the header a light source consistent with the banner above it,
   without adding a second border or changing its height. */
.card-hd{
  background:
    radial-gradient(420px 120px at 0% 0%, rgba(0,119,182,.10) 0%, rgba(0,119,182,.05) 45%, transparent 78%),
    linear-gradient(135deg,rgba(0,119,182,.055),rgba(0,180,216,.035))!important;
}
html[data-theme="dark"] .card-hd{
  background:
    radial-gradient(420px 120px at 0% 0%, rgba(72,202,228,.12) 0%, rgba(72,202,228,.06) 45%, transparent 78%),
    rgba(255,255,255,.05)!important;
}

/* --- empty states ------------------------------------------ */
.pld-empty-state{
  border:1px solid rgba(0,119,182,.16)!important;
  background:
    radial-gradient(520px 200px at 50% -20%, rgba(0,119,182,.07) 0%, transparent 72%),
    linear-gradient(135deg,rgba(255,255,255,.62),rgba(238,244,255,.42))!important;
}
html[data-theme="dark"] .pld-empty-state{
  border:1px solid rgba(144,224,239,.14)!important;
  background:
    radial-gradient(520px 200px at 50% -20%, rgba(72,202,228,.10) 0%, transparent 72%),
    rgba(255,255,255,.035)!important;
}

/* --- patient detail empty state ---------------------------- */
.patient-detail-empty,
.patient-detail-empty.pld-detail-empty{
  border:1px solid rgba(0,119,182,.16)!important;
  background:
    radial-gradient(620px 260px at 50% -15%, rgba(0,119,182,.08) 0%, transparent 72%),
    rgba(255,255,255,.72)!important;
}
html[data-theme="dark"] .patient-detail-empty,
html[data-theme="dark"] .patient-detail-empty.pld-detail-empty{
  border:1px solid rgba(144,224,239,.14)!important;
  background:
    radial-gradient(620px 260px at 50% -15%, rgba(72,202,228,.11) 0%, transparent 72%),
    rgba(255,255,255,.035)!important;
}

.g2>.fg,.g3>.fg,.g4>.fg{margin-bottom:0}
.g2,.g3,.g4{margin-bottom:13px}

.fg select{height:40px}

.fg input[type=date],.fg input[type=time]{height:40px}
/* Re-asserted. The rule above is (0,2,1) - the same specificity as
   .ac-audit-filters' own height rule further up the file - so it would win on
   source order and silently resize the audit date filters, which run shorter on
   purpose to fit the filter bar. */
.ac-audit-filters .fg input[type=date],.ac-audit-filters .fg input[type=time]{height:38px}

html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=search]{
  background:#052B66!important;color:#E4F7FC!important;border-color:#0A4A82!important;
}
html[data-theme="dark"] input[type=email]:focus,
html[data-theme="dark"] input[type=tel]:focus,
html[data-theme="dark"] input[type=search]:focus{
  border-color:rgba(0,180,216,.55)!important;
}

.card>.card-hd:first-child{
  border-radius:inherit;
  border-bottom-left-radius:0;border-bottom-right-radius:0;
}

.pt-strip select,
.pt-strip input[type=text],
.pt-strip input[type=search],
.pt-strip input[type=date],
.pt-strip input[type=email]{
  background:rgba(255,255,255,.17)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.32)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  backdrop-filter:blur(6px)!important;
  font-weight:700!important;
}
.pt-strip select:focus,
.pt-strip input:focus{
  border-color:rgba(255,255,255,.55)!important;
  background:rgba(255,255,255,.24)!important;
}
.pt-strip input::placeholder{color:rgba(255,255,255,.62)!important}
.pt-strip select option{color:#03045E;background:#fff;font-weight:600}

.ac-matrix tbody tr,.pld-billing-table tbody tr,.pa-diff-table tbody tr,.bk-table tbody tr{transition:background .12s}
.ac-matrix tbody tr:nth-child(even),.pld-billing-table tbody tr:nth-child(even),.pa-diff-table tbody tr:nth-child(even),.bk-table tbody tr:nth-child(even){background:rgba(0,119,182,.02)}
.ac-matrix tbody tr:hover,.pld-billing-table tbody tr:hover,.pa-diff-table tbody tr:hover,.bk-table tbody tr:hover{background:var(--al)}
html[data-theme="dark"] .ac-matrix tbody tr:nth-child(even),
html[data-theme="dark"] .pld-billing-table tbody tr:nth-child(even),
html[data-theme="dark"] .pa-diff-table tbody tr:nth-child(even),
html[data-theme="dark"] .bk-table tbody tr:nth-child(even){background:rgba(72,202,228,.03)}
html[data-theme="dark"] .ac-matrix tbody tr:hover,
html[data-theme="dark"] .pld-billing-table tbody tr:hover,
html[data-theme="dark"] .pa-diff-table tbody tr:hover,
html[data-theme="dark"] .bk-table tbody tr:hover{background:rgba(72,202,228,.1)}

/* CMS-1500 claim form, the Forms > Claim Form tab. On-screen capture UI only:
   the printed facsimile carries its own stylesheet inside the print window
   (cfPrintCSS in claimform.js), so nothing here affects printed output. */
.cf-wrap{padding:16px 18px 22px}
.cf-note{font-size:12px;line-height:1.55;color:var(--muted);background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:11px 14px;margin-bottom:18px}
.cf-sec{margin:22px 0 12px}
.cf-sec:first-of-type{margin-top:4px}
.cf-sec-t{font-size:12.5px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.cf-sec-s{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.cf-ro{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:4px}
.cf-ro-item{background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;min-width:0}
.cf-ro-item span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.cf-ro-item b{font-size:12.5px;color:var(--text);font-weight:600;word-break:break-word}
.cf-yn{display:flex;align-items:center;gap:14px;padding-top:9px}
.cf-yn .plain-check{margin:0}
.cf-clear{background:none;border:0;padding:0;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;text-decoration:none;border-bottom:1px solid transparent}
.cf-clear:hover{color:var(--accent);border-bottom-color:rgba(0,119,182,.4)}
.cf-dx{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.cf-dx-cell{display:flex;align-items:center;gap:6px}
.cf-dx-cell span{font-size:11px;font-weight:800;color:var(--muted);width:12px;flex:none}
.cf-dx-cell input{min-width:0}
.cf-lines-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.cf-lines{width:100%;min-width:960px;border-collapse:collapse}
.cf-lines th{font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--text);text-align:left;padding:8px 6px 9px;border-bottom:1px solid var(--border);white-space:normal;vertical-align:bottom;line-height:1.25;min-width:74px}
/* the form's own box letter, above the plain-English name */
.cf-lines th .cf-th-b{display:block;font-size:8.5px;font-weight:800;letter-spacing:.08em;color:var(--accent);opacity:.85;margin-bottom:2px}
.cf-lines td{padding:5px 6px;border-bottom:1px solid var(--line-soft,var(--border));vertical-align:middle}
.cf-lines tr:last-child td{border-bottom:0}
.cf-lines .cf-ln{font-size:11px;font-weight:800;color:var(--muted);width:22px;text-align:center}
.cf-lines .cf-i{height:34px;font-size:12.5px;padding:6px 8px;width:100%}
.cf-lines .cf-xs{max-width:64px}
.cf-lines .cf-sm{max-width:110px}
.cf-del{background:none;border:0;font-size:17px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:6px}
.cf-del:hover{color:var(--red);background:var(--rl)}
.cf-lines-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.cf-total{font-size:12.5px;color:var(--muted)}
.cf-total b{font-family:'DM Mono','IBM Plex Mono',monospace;font-size:15px;color:var(--text);margin-left:6px}
.cf-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--border)}
.cf-saved{font-size:11.5px;color:var(--muted);margin-left:auto}
html[data-theme="dark"] .cf-note,html[data-theme="dark"] .cf-ro-item{background:var(--s3)}
.cf-pulled{border-color:rgba(0,119,182,.32);background:var(--al,var(--s2))}
.cf-pulled b{color:var(--accent);font-weight:800}
.cf-demo-flag{font-size:12px;line-height:1.55;color:var(--amber);background:var(--aml);border:1px solid rgba(154,91,0,.28);border-radius:12px;padding:11px 14px;margin-bottom:18px}
.cf-demo-flag b{color:var(--amber);font-weight:800}

/* Claim-page dividers inside the 24-Services grid: where the printed form
   will break, and which Billing tables land on that sheet. */
.cf-lines .cf-grp td{background:var(--s2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:9px 12px}
.cf-lines .cf-grp b{font-size:11.5px;font-weight:800;color:var(--text);letter-spacing:.02em}
.cf-lines .cf-grp span{font-size:11.5px;font-weight:700;color:var(--accent);margin-left:10px}
.cf-lines .cf-grp i{float:right;font-style:normal;font-size:11px;font-weight:600;color:var(--muted)}
html[data-theme="dark"] .cf-lines .cf-grp td{background:var(--s3)}

/* ---------- Live caption translation (meeting transcript pane) ----------
   Everything here sits on the dark meeting surface, so the colours come from
   the same white-alpha family as .mtg-tx-toggle and .mtg-tx-text - not from
   the app's light-surface tokens, which disappear against it. */
.mtg-tx-tr{flex:none;padding:8px 12px;border-radius:9px;cursor:pointer;font:inherit;font-size:12px;font-weight:650;
  color:#eaf1f8;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  transition:background .14s,border-color .14s,color .14s}
.mtg-tx-tr:hover{background:rgba(255,255,255,.17)}
.mtg-tx-tr.on{background:rgba(72,202,228,.18);border-color:rgba(72,202,228,.55);color:#8fd0f0}
.mtg-tx-tr:focus-visible{outline:2px solid #48CAE4;outline-offset:2px}

/* Translation and subtitle toggles, on their own row under the transcript
   controls - the bar above is 296px wide and was already full. */
.mtg-tx-tools{display:flex;gap:8px;padding:10px 14px 0}
.mtg-tx-tools .mtg-tx-tr{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Two rows, one grid. The label column is a fixed width so both dropdowns
   start at the same x - previously each label sized itself and the controls
   stepped raggedly. The value column takes the rest, which is what stops
   "Detect automatically" being clipped mid-word. */
.mtg-tx-langs{display:flex;flex-direction:column;gap:8px;padding:10px 14px 4px}
.mtg-tx-langs-hd{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.62;margin-bottom:2px}
.mtg-tx-langs-ft{font-size:10.5px;opacity:.55;font-style:italic;margin-top:2px}
.mtg-tx-langs .mtg-tx-lang{grid-template-columns:96px minmax(0,1fr)}
.mtg-tx-lang{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:start;
  column-gap:10px;cursor:pointer}
/* Centred against the dropdown, not against the whole row - otherwise the
   "heard" chip wrapping underneath drags the label down with it and the two
   rows stop reading as a pair. The min-height matches the control. */
.mtg-tx-lang-k{display:flex;align-items:center;min-height:30px;
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.5);line-height:1.25}
.mtg-tx-lang-v{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.mtg-tx-langs select{flex:1 1 140px;min-width:0;width:100%;
  padding:6px 26px 6px 9px;border-radius:8px;font:inherit;font-size:12px;font-weight:600;
  color:#eaf1f8;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  /* The native arrow is drawn in the OS light palette on some platforms and
     vanishes against this surface, so it is painted here instead. */
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a8c3da' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:10px 7px}
.mtg-tx-langs select:hover{background-color:rgba(255,255,255,.14)}
.mtg-tx-langs select:focus-visible{outline:2px solid #48CAE4;outline-offset:2px}
/* Options are painted by the OS against the page background - naming a dark
   colour here keeps them readable in the browsers that honour it. */
.mtg-tx-langs select option{background:#132234;color:#eaf1f8}

/* What auto-detect actually heard, so the choice is visible rather than magic.
   A chip rather than loose text: it sits beside the control it describes and
   wraps below it when the panel is too narrow for both. */
.mtg-tx-heard{flex:0 0 auto;font-style:normal;font-size:9px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#8fd0f0;
  background:rgba(72,202,228,.14);border:1px solid rgba(72,202,228,.3);
  border-radius:999px;padding:2px 7px;white-space:nowrap}

/* The original under the translation: available for checking, never competing
   with the line the reader actually needs. */
.mtg-tx-orig{font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.45);margin-top:3px;
  padding-left:8px;border-left:2px solid rgba(255,255,255,.16)}

/* Clear of the control rail, not resting on it. The rail is a 44px button
   plus 10px padding and a border either side - 66px - sitting 16px off the
   bottom, so its top edge is at 82px. Anything less than that plus real
   breathing room reads as the caption sitting ON the buttons. */
.mtg-cc{position:absolute;left:50%;transform:translateX(-50%);bottom:112px;z-index:6;
  width:min(720px,88%);display:flex;flex-direction:column;align-items:center;gap:4px;
  pointer-events:none}
.mtg-cc-line{max-width:100%;background:rgba(6,12,22,.86);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:5px 12px;
  font-size:14.5px;line-height:1.4;color:#fff;text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.5);word-break:break-word}
/* Inline, and quieter than the words - it identifies the speaker without
   competing with what they actually said. */
.mtg-cc-line b{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8fd0f0;margin-right:7px;white-space:nowrap}
/* Each line lives out its own span: in quickly, hold while it is read, then
   away - so subtitles clear themselves the way broadcast captions do rather
   than stacking up and blinking out together. The duration is set per line
   from its length. */
@keyframes mtgCCLife{
  0%{opacity:0;transform:translateY(6px)}
  7%{opacity:1;transform:none}
  84%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-3px)}
}
.mtg-cc-line{animation:mtgCCLife var(--life,6s) ease forwards}
/* Still being spoken: visibly provisional, and it does not age out - it is
   replaced by the finished phrase the moment there is one. */
.mtg-cc-line.live{color:rgba(255,255,255,.72);font-style:italic;animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){
  @keyframes mtgCCLife{0%{opacity:0}7%{opacity:1}84%{opacity:1}100%{opacity:0}}
}
@media(max-width:900px){.mtg-cc{bottom:98px;width:94%}
  .mtg-cc-line{font-size:13px;padding:4px 10px}
  .mtg-cc-line b{font-size:9.5px;margin-right:5px}}

/* ---------- Referrals (law firm ↔ clinic) ---------- */
.rf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:4px 0 20px}
.rf-head-t h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.rf-head-t p{margin:5px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}
.rf-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rf-head-actions a.btn{text-decoration:none}

.rf-card .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rf-firm-chip{font-size:11.5px;font-weight:700;color:var(--accent);background:var(--al,var(--s2));border:1px solid rgba(0,119,182,.28);border-radius:999px;padding:4px 11px}
.rf-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.rf-tab{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:10px 17px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:color .15s,border-color .15s,background .15s}
.rf-tab:hover{color:var(--text);border-color:rgba(0,119,182,.35)}
.rf-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.rf-badge{font-size:11px;font-weight:800;background:rgba(255,255,255,.22);border-radius:999px;padding:1px 7px}
.rf-tab:not(.active) .rf-badge{background:var(--s2);color:var(--text)}

.rf-sec{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:26px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.rf-sec:first-of-type{margin-top:4px}
.rf-hint{font-size:11.5px;line-height:1.55;color:var(--muted);margin:8px 0 0}
.rf-book{border-top:1px solid var(--border);margin-top:20px;padding-top:4px}
.rf-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--border)}

/* Referrals: wide layout - form left, rail right. The rail is what keeps a
   full-width page from being one card adrift in empty space, and it carries
   the submit action so it stays reachable without scrolling to the bottom of
   a long form. */
.rf-split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media(min-width:1180px){.rf-split{grid-template-columns:minmax(0,1fr) 340px}}
.rf-main{min-width:0}
.rf-side{min-width:0}
@media(min-width:1180px){.rf-side{position:sticky;top:18px}}
.rf-card>.card-body{padding:22px 24px 26px}
.rf-side-card>.card-body{padding:20px}
.rf-side-kicker{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rf-side-firm{font-size:15px;font-weight:800;color:var(--text);margin:3px 0 16px;line-height:1.3;word-break:break-word}
.rf-steps{list-style:none;counter-reset:rfstep;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:13px}
.rf-steps li{counter-increment:rfstep;position:relative;padding-left:30px}
.rf-steps li:before{content:counter(rfstep);position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:var(--al,var(--s2));color:var(--accent);border:1px solid rgba(0,119,182,.28);font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.rf-steps b{display:block;font-size:12.5px;font-weight:700;color:var(--text);line-height:1.4}
.rf-steps span{display:block;font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:2px}
.rf-steps a{color:var(--accent);font-weight:700;cursor:pointer}
.rf-side-actions{display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--border)}
.rf-side-actions .btn{width:100%;justify-content:center}
.rf-side-note{margin:13px 0 0;font-size:11px;line-height:1.55;color:var(--muted)}
/* One auto-fit grid per section: a wide screen packs five or six fields per
   row instead of stretching three to the full width. */
.rf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px 18px}
.rf-card .rf-sec:first-of-type{margin-top:22px}
.rf-rows{display:flex;flex-direction:column;gap:10px}
.rf-row{border:1px solid var(--border);border-left:3px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden;transition:border-color .15s ease}
/* Status as a left stripe as well as a pill: at full width the pill is a
   long way from the left edge, and the stripe is what makes a stack of rows
   scannable without reading any of them. */
.rf-row.st-new{border-left-color:#9a5b00}
.rf-row.st-accepted,.rf-row.st-scheduled{border-left-color:var(--accent)}
.rf-row.st-declined,.rf-row.st-withdrawn{border-left-color:var(--border)}
.rf-row.open{border-color:rgba(0,119,182,.35)}
.rf-row-head{display:grid;align-items:center;gap:8px 14px;padding:14px 16px;cursor:pointer;
  grid-template-columns:16px minmax(130px,1fr) 106px 150px auto 264px}
.rf-row-head.is-firm{grid-template-columns:16px minmax(130px,1fr) 106px 150px auto}
.rf-row-head:hover{background:var(--s2)}
.rf-row-main{display:flex;align-items:center;gap:9px;min-width:0}
.rf-row-main b{font-size:14.5px;font-weight:800;color:var(--text);letter-spacing:-.01em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rf-row-main .rf-gone{flex:none}
.rf-row-meta{display:grid;align-items:center;gap:14px;font-size:11.5px;color:var(--muted);
  grid-template-columns:186px 152px}
.rf-row-head:not(.is-firm) .rf-row-meta{grid-template-columns:186px 148px 152px}
.rf-kind{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--s2);border:1px solid var(--border);border-radius:999px;padding:3px 10px}
.rf-kind.book{color:var(--accent);border-color:rgba(0,119,182,.3)}
.rf-status{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-radius:999px;padding:3px 10px;border:1px solid transparent}
/* Blockified by the grid, so they stretch to fill their track: every pill the
   same size as every other pill in its column, label centred inside it. */
.rf-status,.rf-kind{min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-new{color:#9a5b00;background:var(--aml,rgba(154,91,0,.12));border-color:rgba(154,91,0,.28)}
.rf-accepted,.rf-scheduled{color:#0077b6;background:var(--al,rgba(0,119,182,.1));border-color:rgba(0,119,182,.28)}
.rf-declined,.rf-withdrawn{color:var(--muted);background:var(--s2);border-color:var(--border)}
.rf-gone{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;border-radius:999px;padding:2px 9px;
  color:#b4453e;background:rgba(180,69,62,.1);border:1px solid rgba(180,69,62,.28)}
.rf-gone svg{width:11px;height:11px;flex:none}
html[data-theme="dark"] .rf-gone{color:#e79c96;background:rgba(180,69,62,.18);border-color:rgba(180,69,62,.42)}
.rf-linked.is-gone{display:flex;align-items:flex-start;gap:7px;color:#b4453e}
.rf-linked.is-gone svg{width:14px;height:14px;flex:none;margin-top:2px}
html[data-theme="dark"] .rf-linked.is-gone{color:#e79c96}
.rf-row-body{border-top:1px solid var(--border);padding:16px}
/* Four labelled panels rather than a dozen identical tiles: the tiles were all
   the same weight and wrapped into a ragged block with orphans on the last
   row, so nothing grouped and nothing led. Same label column width in every
   panel, so the values line up across the whole detail. */
.rf-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:12px;align-items:stretch}
.rf-panel{background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:13px 15px 14px;min-width:0}
.rf-panel h4{display:flex;align-items:center;gap:7px;margin:0 0 11px;padding-bottom:9px;
  border-bottom:1px solid var(--border);font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.rf-panel-i{width:13px;height:13px;flex:none;opacity:.9}
.rf-panel dl{display:grid;grid-template-columns:100px minmax(0,1fr);gap:7px 12px;margin:0}
.rf-panel dt{font-size:11px;font-weight:600;color:var(--muted);line-height:1.5}
.rf-panel dd{margin:0;font-size:12.5px;font-weight:600;color:var(--text);line-height:1.5;word-break:break-word}
/* The slot is the point of a booking request, so that panel is tinted
   rather than being the fourth identical grey box. */
.rf-panel.is-req{background:var(--al,rgba(0,119,182,.07));border-color:rgba(0,119,182,.26)}
.rf-panel.is-req h4{color:var(--accent);border-bottom-color:rgba(0,119,182,.22)}
.rf-notes{margin-top:12px;background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:10px 13px}
.rf-notes span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.rf-notes p{margin:0;font-size:12.5px;line-height:1.6;color:var(--text);white-space:pre-wrap}
.rf-linked{margin-top:12px;font-size:12px;color:var(--muted)}
.rf-linked a{color:var(--accent);font-weight:700;cursor:pointer}
.rf-row-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:15px}
.rf-empty{font-size:12.5px;color:var(--muted);padding:44px 20px;text-align:center}
.rf-err{color:var(--red)}
.rf-dash{color:var(--muted);opacity:.7}
html[data-theme="dark"] .rf-panel,html[data-theme="dark"] .rf-notes{background:var(--s3)}
html[data-theme="dark"] .rf-panel.is-req{background:rgba(0,119,182,.13)}
/* Below the width the fixed tracks need, the columns stop being columns and
   the head goes back to wrapping - aligned pills are not worth a row that
   overflows its card. */
@media(max-width:1100px){
  .rf-row-head,.rf-row-head.is-firm{display:flex;align-items:center;flex-wrap:wrap;gap:9px 12px}
  .rf-row-main{flex:1 1 200px}
  .rf-row-main b{white-space:normal;overflow:visible}
  .rf-row-meta,.rf-row-head:not(.is-firm) .rf-row-meta{display:flex;flex-wrap:wrap;gap:12px;
    grid-template-columns:none}
  .rf-row-quick{width:auto;margin-left:auto}
  .rf-req:empty{display:none}
}
@media(max-width:700px){
  .rf-row-head,.rf-row-head.is-firm{align-items:flex-start;gap:10px}
  .rf-row-main{flex:1 1 100%}
  .rf-row-meta{flex:1 1 100%}
  .rf-row-quick{margin-left:0;flex:1 1 100%;width:auto}
  .rf-quick{flex:1 1 0;justify-content:center}
}
#page-referrals .wrap{padding-left:30px;padding-right:30px}


.rf-i{width:15px;height:15px;flex:none}
.rf-head-actions .btn{padding:10px 17px;font-size:13px;font-weight:700}
.rf-refresh{gap:8px}

.rf-cta-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(0,119,182,.13),rgba(0,119,182,.03));
  border:1px solid rgba(0,119,182,.24);border-radius:16px;padding:17px 22px;margin:0 0 18px}
.rf-cta-copy b{display:block;font-size:14.5px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.rf-cta-copy span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.rf-cta-btns{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.rf-cta{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:12px;font-family:inherit;
  font-size:14px;font-weight:700;line-height:1;cursor:pointer;border:1px solid transparent;text-decoration:none;
  white-space:nowrap;transition:transform .16s var(--ease,ease),box-shadow .18s,background .18s,color .18s}
.rf-cta .rf-i{width:17px;height:17px}
.rf-cta-go{background:var(--accent);color:#fff;box-shadow:0 7px 18px rgba(0,119,182,.32)}
.rf-cta-go:hover{background:#023E8A;transform:translateY(-1px);box-shadow:0 11px 24px rgba(0,119,182,.36)}
.rf-cta-alt{background:var(--surface);color:var(--accent);border-color:rgba(0,119,182,.38)}
.rf-cta-alt:hover{background:var(--al,var(--s2));border-color:var(--accent);transform:translateY(-1px)}
.rf-cta-go:active,.rf-cta-alt:active{transform:translateY(0)}

.rf-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 16px}
.rf-toolbar-end{justify-content:flex-end}
.rf-search{position:relative;display:flex;align-items:center;flex:0 1 330px;min-width:220px}
.rf-search>.rf-i{position:absolute;left:13px;color:var(--muted);pointer-events:none}
.rf-search input{width:100%;padding:10px 34px 10px 36px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-family:inherit;font-size:13px}
.rf-search input::-webkit-search-cancel-button{display:none}
.rf-search input:focus{outline:none;border-color:rgba(0,119,182,.55);box-shadow:0 0 0 3px rgba(0,119,182,.15)}
.rf-search-x{position:absolute;right:8px;width:22px;height:22px;border:0;border-radius:50%;background:var(--s2);
  color:var(--muted);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rf-search-x:hover{color:var(--text)}

.rf-chev{flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:transform .18s ease,color .18s ease}
.rf-row.open .rf-chev{transform:rotate(90deg);color:var(--accent)}
.rf-row-head:hover .rf-chev{color:var(--accent)}
.rf-row-head:focus-visible{outline:2px solid rgba(0,119,182,.55);outline-offset:-2px;border-radius:10px}
.rf-row-meta span{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.rf-row-meta .rf-i{width:13px;height:13px;opacity:.8}
.rf-req{font-weight:700;color:var(--accent)}
.rf-row-quick{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.rf-quick{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;font-family:inherit;
  font-size:12.5px;font-weight:700;line-height:1;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s}
.rf-quick .rf-i{width:14px;height:14px}
.rf-quick-go{background:var(--accent);color:#fff}
.rf-quick-go:hover{background:#023E8A}
.rf-quick-no{background:var(--surface);border-color:var(--border);color:var(--muted)}
.rf-quick-no:hover{color:var(--text);border-color:rgba(0,119,182,.4)}
.rf-quick[disabled]{opacity:.5;cursor:default}

.rf-empty-i{width:36px;height:36px;color:var(--muted);opacity:.5;margin-bottom:12px}
.rf-empty b{display:block;font-size:14.5px;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.01em}
.rf-empty p{margin:0 auto;max-width:430px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.rf-empty .btn{margin-top:16px}
html[data-theme="dark"] .rf-cta-bar{background:linear-gradient(135deg,rgba(0,119,182,.20),rgba(0,119,182,.05));border-color:rgba(0,119,182,.34)}
html[data-theme="dark"] .rf-cta-alt{background:var(--s3);color:#7fc4ec;border-color:rgba(0,119,182,.5)}
html[data-theme="dark"] .rf-quick-no{background:var(--s3)}
html[data-theme="dark"] .rf-search input{background:var(--s3)}
@media(max-width:820px){
  .rf-cta-bar{flex-direction:column;align-items:stretch}
  .rf-cta{justify-content:center;width:100%}
  .rf-search{flex:1 1 100%}
}

/* ---------- Preferred-time picker (referral modal) ----------
   Quarter-hour grid instead of a browser time field: the firm needs to see
   which slots the clinic can still take, and red is doing the explaining. */
.rf-timef{position:relative}
.rf-time-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px;border-radius:10px;border:1px solid #e2e9f5;background:#f7f9fd;color:#0f2f66;
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left}
.rf-time-btn:hover{border-color:#bfd3ee}
.rf-time-btn.open{border-color:#1f6fd0;box-shadow:0 0 0 3px rgba(31,111,208,.16)}
.rf-time-btn .ph{color:#9aa9c4;font-weight:500}
.rf-time-btn svg{width:15px;height:15px;color:#7b8db0;flex:none}
.rf-time-pop{position:fixed;z-index:9900;padding:13px;border-radius:14px;
  background:linear-gradient(150deg,rgba(255,255,255,.84),rgba(236,244,254,.72));
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 22px 52px rgba(3,25,64,.26),0 2px 8px rgba(3,25,64,.10),
             inset 0 1px 0 rgba(255,255,255,.85);
  animation:rfTimePopIn .16s cubic-bezier(.22,1,.36,1)}
@keyframes rfTimePopIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rf-time-pop{animation:none}}
/* Translucent so the glass reads as one surface rather than opaque chips
   sitting on top of it. */
.rf-time-pop .rf-slot{background:rgba(255,255,255,.66);border-color:rgba(31,111,208,.16)}
.rf-time-pop .rf-slot:hover:not(:disabled){background:rgba(238,245,254,.96);border-color:#1f6fd0}
.rf-time-pop .rf-slot.busy{background:rgba(253,236,234,.86);border-color:rgba(243,194,189,.9)}
.rf-time-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px 9px;
  border-bottom:1px solid rgba(31,111,208,.14);margin-bottom:9px}
.rf-time-hd b{font-size:13px;font-weight:800;color:#123a7a}
.rf-time-hd i{font-style:normal;font-size:11.5px;color:#7b8db0}
.rf-time-note{font-size:11.5px;color:#7b8db0;padding:0 2px 8px}
.rf-time-note.err{color:#b4453e}
.rf-time-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.rf-slot{padding:8px 4px;border-radius:8px;border:1px solid #e2e9f5;background:#fff;color:#243c68;
  font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.rf-slot:hover:not(:disabled){border-color:#1f6fd0;background:#eef5fe;color:#123a7a}
.rf-slot.on{background:#1f6fd0;border-color:#1f6fd0;color:#fff;font-weight:800}
.rf-slot.busy{background:#fdecea;border-color:#f3c2bd;color:#b4453e;cursor:not-allowed;
  text-decoration:line-through;text-decoration-color:rgba(180,69,62,.55)}
.rf-time-legend{display:flex;align-items:center;gap:6px;padding-top:10px;margin-top:9px;
  border-top:1px solid rgba(31,111,208,.14);font-size:11px;color:#7b8db0}
.rf-time-legend .k{width:10px;height:10px;border-radius:3px;border:1px solid #e2e9f5;background:#fff}
.rf-time-legend .k.busy{background:#fdecea;border-color:#f3c2bd;margin-left:10px}
.rf-time-legend em{margin-left:auto;font-style:normal;font-weight:700;color:#123a7a}
@media(max-width:560px){.rf-time-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.rf-time-pop{min-width:0}}

/* Referral submission wizard. Its own visual language rather than the
   portal's card styles, because this is a focused one-task dialog and the
   reference design it follows is navy on white with soft-filled inputs.
   Scoped under .rf-modal so none of it leaks into the rest of the portal. */
.rf-modal-open{overflow:hidden}
.rf-modal-back{position:fixed;inset:0;z-index:9800;background:rgba(3,25,64,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:34px 18px;overflow:auto}
.rf-modal{width:100%;max-width:880px;background:#fff;border-radius:18px;box-shadow:0 26px 70px rgba(3,25,64,.4);display:flex;flex-direction:column;max-height:calc(100vh - 68px);overflow:hidden;color:#0f2f66}
.rf-modal-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 28px 18px;border-bottom:1px solid #e6ecf7}
.rf-modal-hd h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em;color:#123a7a}
.rf-modal-hd p{margin:4px 0 0;font-size:12.5px;color:#7b8db0}
.rf-x{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:#eef2f9;color:#4a6396;font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rf-x:hover{background:#e2e9f5;color:#123a7a}


.rf-modal-body{padding:24px 28px 26px;overflow:auto;flex:1}
.rf-fsec{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#1f6fd0;padding-bottom:11px;margin:6px 0 16px;border-bottom:1px solid #e6ecf7}
.rf-fsec:not(:first-child){margin-top:26px}
.rf-fsec svg{width:15px;height:15px;flex:none}
.rf-f{margin-bottom:15px;min-width:0}
.rf-f label{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#274b86;margin-bottom:6px;min-height:0}
.rf-f label i{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;color:#8fa0be}
.rf-f input,.rf-f select,.rf-f textarea{width:100%;background:#f7f9fd;border:1px solid #e2e9f5;border-radius:9px;padding:11px 13px;font:inherit;font-size:13.5px;color:#0f2f66;outline:none}
.rf-f input::placeholder,.rf-f textarea::placeholder{color:#a7b4cc}
.rf-f input:focus,.rf-f select:focus,.rf-f textarea:focus{border-color:#1f6fd0;background:#fff;box-shadow:0 0 0 3px rgba(31,111,208,.13)}
.rf-f textarea{resize:vertical;min-height:96px}
.rf-f label.rf-videochk{display:inline-flex;align-items:center;gap:9px;margin-bottom:0;min-height:0;
  font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:#0f2f66}
.rf-f .rf-videochk input[type=checkbox]{-webkit-appearance:checkbox;appearance:checkbox;
  width:16px;height:16px;flex:none;margin:0;padding:0;border:0;border-radius:0;background:none;
  box-shadow:none;accent-color:#1f6fd0}
.rf-modal .rf-videohint{color:#7b8db0}
/* A value the form works out for itself (Age, from the date of birth). Muted
   and not focusable, so it reads as a result rather than an empty field
   somebody forgot to fill in. */
.rf-f input.rf-auto{background:#eef3fa;color:#4a5f83;cursor:default;font-weight:600}
.rf-f input.rf-auto:focus{border-color:#e2e9f5;background:#eef3fa;box-shadow:none}

.rf-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px}
@media(max-width:620px){.rf-pair{grid-template-columns:minmax(0,1fr)}}

.rf-modal-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 28px 20px;border-top:1px solid #e6ecf7;background:#fff}
.rf-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.rf-btn svg{width:15px;height:15px}
.rf-btn-quiet{background:#eef2f9;color:#4a6396}
.rf-btn-quiet:hover{background:#e2e9f5}
.rf-btn-go{background:#123a7a;color:#fff;box-shadow:0 6px 16px rgba(18,58,122,.28)}
.rf-btn-go:hover{background:#0f3068}
.rf-btn-go:disabled{opacity:.6;cursor:default;box-shadow:none}


.rf-done-back{align-items:center}
.rf-done{width:100%;max-width:560px;background:#fff;border-radius:18px;box-shadow:0 26px 70px rgba(3,25,64,.4);padding:44px 44px 40px;text-align:center;color:#0f2f66}
.rf-done-tick{width:74px;height:74px;margin:0 auto 22px;border-radius:50%;background:linear-gradient(140deg,#2f8ae0,#31c0f3);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 26px rgba(47,138,224,.35)}
.rf-done-tick svg{width:34px;height:34px}
.rf-done h2{margin:0 0 16px;font-size:31px;font-weight:800;letter-spacing:-.025em;color:#123a7a}
.rf-done p{margin:0 0 14px;font-size:14px;line-height:1.65;color:#6b7fa3}
/* Submit a Patient Referral: the two-step form that replaced the external
   referral website. Same navy-on-white language as Direct Booking, plus a
   stepper and the Yes/No questionnaire. */
.rf-modal.is-refer{max-width:945px;border-radius:28px}
.rf-modal.is-refer .rf-modal-hd{padding:26px 30px 20px}
.rf-modal.is-refer .rf-x{border-radius:12px;width:44px;height:44px;background:#f1f4fa;border:1px solid #e3e9f4}
.rf-modal.is-refer .rf-modal-body{padding:0 30px 26px}
.rf-modal.is-refer .rf-btn{border-radius:14px;padding:13px 24px}
.rf-modal.is-refer .rf-btn-quiet{background:#f1f4fa;border:1px solid #e3e9f4;color:#6b7fa3}
.rf-modal.is-refer .rf-btn-go{background:#133d8d}
.rf-modal.is-refer .rf-btn-go:hover{background:#0f3276}
.rf-stepper{display:flex;align-items:center;gap:14px;margin:0 -30px 28px;padding:22px 30px;background:#f4f7fc;border-bottom:1px solid #e6ecf7}
.rf-stepper i{flex:1;height:1px;background:#d8e1ef}
.rf-stp{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:14px;
  font-size:14px;font-weight:700;color:#7b8db0;white-space:nowrap}
.rf-stp span{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:#dde5f1;color:#6b7fa3}
.rf-stp.is-on{background:#fff;color:#123a7a;box-shadow:0 4px 14px rgba(18,58,122,.1)}
.rf-stp.is-on span{background:#2f7de1;color:#fff}
.rf-stp.is-done{color:#12b5e5}
.rf-stp.is-done span{background:#22c3ee;color:#fff}
.rf-ref-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:24px;border-top:1px solid #e6ecf7}
.rf-q-info{display:flex;align-items:center;gap:10px;margin:0 0 22px;padding:14px 16px;border-radius:12px;
  background:#eef5ff;border:1px solid #cfe0fb;color:#2f7de1;font-size:14px}
.rf-q-info svg{width:17px;height:17px;flex:none}
.rf-q-group{border:1px solid #e3e9f4;border-radius:14px;overflow:hidden;margin:0 0 16px}
.rf-q-group>header{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#f4f7fc;border-bottom:1px solid #e3e9f4;
  font-size:15px;font-weight:800;color:#123a7a}
.rf-q-group>header span{width:29px;height:29px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:#133d8d;color:#fff;font-size:13px;font-weight:800}
.rf-q{padding:16px 18px 18px;transition:background .15s}
.rf-q+.rf-q{border-top:1px solid #e9eef6}
.rf-q p{margin:0 0 13px;font-size:14.5px;color:#34445f;line-height:1.5}
.rf-q.is-missing{background:#fff6f5}
.rf-q.is-missing p{color:#b4453e}
.rf-yns{display:flex;gap:8px}
.rf-yn{min-width:80px;height:45px;padding:0 18px;border-radius:13px;border:1px solid #e0e7f2;background:#f4f7fc;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:#6b7fa3;transition:background .12s,border-color .12s,color .12s}
.rf-yn:hover{border-color:#b9cbe8;color:#123a7a}
.rf-yn.is-on{background:#133d8d;border-color:#133d8d;color:#fff;box-shadow:0 4px 12px rgba(19,61,141,.25)}
@media(max-width:620px){
  .rf-stepper{gap:8px;padding:16px 18px;margin:0 -18px 22px}
  .rf-stp{padding:8px 10px;font-size:12.5px}
  .rf-modal.is-refer .rf-modal-body{padding:0 18px 22px}
}
.rf-done .rf-btn{margin-top:12px}

/* Clinic-side read-back of the questionnaire. */
.rf-symp{margin-top:12px;background:var(--s2);border:1px solid var(--border);border-radius:10px;padding:11px 14px}
.rf-symp>span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.rf-symp-yes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:7px 18px}
.rf-symp-yes li{font-size:12.5px;line-height:1.5;color:var(--text);padding-left:15px;position:relative}
.rf-symp-yes li:before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.rf-symp-yes b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.rf-symp-none{margin:0;font-size:12.5px;color:var(--muted)}
html[data-theme="dark"] .rf-symp{background:var(--s3)}

body.sp-open{overflow:hidden}

.sp-back{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-start;justify-content:center;
  padding:11vh 18px 24px;
  background:radial-gradient(720px 420px at 50% 18%,rgba(0,150,199,.28),transparent 68%),
             rgba(1,6,32,.58);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  animation:spFade .16s ease}
@keyframes spFade{from{opacity:0}to{opacity:1}}

.sp-card{width:100%;max-width:640px;display:flex;flex-direction:column;max-height:min(620px,74vh);
  border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(232,247,253,.76));
  -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 40px 90px rgba(1,6,32,.4),0 8px 24px rgba(1,6,32,.16),
             0 0 70px rgba(0,150,199,.3),0 0 140px rgba(0,180,216,.16),
             inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(0,119,182,.05);
  animation:spIn .2s cubic-bezier(.22,1,.36,1)}
@keyframes spIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.sp-back,.sp-card{animation:none}}
html[data-theme="dark"] .sp-card{
  background:linear-gradient(160deg,rgba(9,32,78,.9),rgba(3,4,94,.78));
  border-color:rgba(72,202,228,.2);
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4),
             0 0 80px rgba(0,180,216,.3),0 0 160px rgba(72,202,228,.18),
             inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(72,202,228,.1)}

/* ---- query row ---- */
.sp-inputrow{display:flex;align-items:center;gap:12px;padding:17px 18px;
  border-bottom:1px solid rgba(0,119,182,.12)}
html[data-theme="dark"] .sp-inputrow{border-bottom-color:rgba(72,202,228,.14)}
.sp-searchi{width:18px;height:18px;flex:none;color:var(--accent);
  filter:drop-shadow(0 0 7px rgba(0,150,199,.55))}
html[data-theme="dark"] .sp-searchi{color:#48CAE4;filter:drop-shadow(0 0 9px rgba(72,202,228,.6))}
#spInput{flex:1;min-width:0;border:0!important;background:transparent!important;padding:0!important;
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.4;
  color:var(--text);caret-color:var(--accent);outline:none;box-shadow:none!important}
#spInput::placeholder{color:var(--muted);font-weight:500;letter-spacing:0;opacity:.85}

/* Keycaps. The esc pill and the footer hints are the same object, so they are
   built from one look rather than two - the palette is keyboard-first and the
   keys it responds to should be legible as keys. */
.sp-esc,.sp-foot b{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:6px;
  font-family:inherit;font-size:10px;font-weight:800;letter-spacing:.06em;
  background:rgba(0,119,182,.09);border:1px solid rgba(0,119,182,.2);color:var(--muted)}
html[data-theme="dark"] .sp-esc,html[data-theme="dark"] .sp-foot b{
  background:rgba(72,202,228,.12);border-color:rgba(72,202,228,.24)}
.sp-esc{flex:none;text-transform:uppercase;cursor:pointer;transition:color .14s,border-color .14s,background .14s}
.sp-esc:hover{color:var(--accent);border-color:rgba(0,119,182,.42);background:rgba(0,119,182,.14)}

/* ---- results ---- */
.sp-list{overflow:auto;padding:8px 8px 12px;flex:1;min-height:0}
.sp-group{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);opacity:.72;padding:15px 12px 7px}
.sp-group:first-child{padding-top:7px}
html[data-theme="dark"] .sp-group{color:#48CAE4;opacity:.68}

.sp-row{position:relative;width:100%;display:flex;align-items:center;gap:12px;
  padding:8px 11px;border:0;border-radius:12px;background:transparent;
  text-align:left;cursor:pointer;font:inherit;color:var(--text);
  transition:background .12s ease}
.sp-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* The tile is what lights up. A bare stroke glyph was too faint to carry the
   selection, and eight identical outlines stacked read as noise rather than as
   information. */
.sp-tile{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,119,182,.08);color:var(--muted);
  transition:background .14s ease,color .14s ease,box-shadow .14s ease}
html[data-theme="dark"] .sp-tile{background:rgba(72,202,228,.1)}
.sp-i{width:16px;height:16px}

.sp-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sp-txt b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-txt i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-enter{flex:none;font-size:14px;color:var(--muted);opacity:0;transition:opacity .14s ease}

/* THE selected row - the one thing this component has to get right, because
   it is the only answer to "what does Enter do". Hover does not
   restyle anything: a second highlight chasing the mouse made it ambiguous
   which row the keyboard would take. */
.sp-row.on{background:linear-gradient(100deg,rgba(0,150,199,.17),rgba(0,180,216,.06));
  box-shadow:0 0 0 1px rgba(0,180,216,.26),0 4px 22px rgba(0,150,199,.26)}
.sp-row.on::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,#0096C7,#48CAE4);
  box-shadow:0 0 12px rgba(0,180,216,.85)}
.sp-row.on .sp-tile{background:linear-gradient(135deg,#0096C7,#00B4D8);color:#fff;
  box-shadow:0 2px 8px rgba(0,150,199,.34),0 0 18px rgba(0,180,216,.6)}
.sp-row.on .sp-txt i{color:var(--text);opacity:.72}
.sp-row.on .sp-enter{opacity:1;color:var(--accent)}
html[data-theme="dark"] .sp-row.on{background:linear-gradient(100deg,rgba(0,150,199,.32),rgba(0,180,216,.1));
  box-shadow:0 0 0 1px rgba(72,202,228,.34),0 4px 26px rgba(0,180,216,.34)}
html[data-theme="dark"] .sp-row.on .sp-enter{color:#48CAE4}

/* An empty result is a moment for direction, not an apology. */
.sp-empty{padding:38px 24px 42px;text-align:center;display:flex;flex-direction:column;gap:6px}
.sp-empty b{font-size:13.5px;font-weight:700;color:var(--text)}
.sp-empty span{font-size:11.5px;color:var(--muted)}

/* ---- footer ---- */
.sp-foot{display:flex;align-items:center;gap:16px;padding:10px 18px;flex-wrap:wrap;
  border-top:1px solid rgba(0,119,182,.12);background:rgba(255,255,255,.34);
  font-size:11px;font-weight:600;color:var(--muted)}
html[data-theme="dark"] .sp-foot{border-top-color:rgba(72,202,228,.14);background:rgba(255,255,255,.03)}
.sp-foot span{display:inline-flex;align-items:center;gap:6px}
.sp-foot-note{margin-left:auto;font-weight:500;opacity:.8}
@media(max-width:560px){.sp-foot-note{display:none}.sp-back{padding-top:6vh}}

/* Top-bar affordance - a keyboard-only feature nobody is told about does not
   exist. Collapses to just the icon before it can squeeze the practice name. */
.topbar-search{display:inline-flex;align-items:center;gap:8px;margin-right:10px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:10px;
  padding:6px 10px 6px 11px;color:rgba(255,255,255,.85);font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.topbar-search:hover{background:rgba(255,255,255,.18);border-color:rgba(72,202,228,.5);color:#fff;
  box-shadow:0 0 18px rgba(72,202,228,.45)}
.topbar-search svg{width:14px;height:14px;flex:none}
.topbar-search kbd{font:inherit;font-size:10px;font-weight:800;letter-spacing:.04em;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.14);
  border-radius:5px;padding:1px 5px;color:#fff}
@media(max-width:900px){.topbar-search span,.topbar-search kbd{display:none}.topbar-search{padding:6px}}

/* ---- Pregnancy status editor ---- */
.pld-status.preg.is-editable{cursor:pointer}
.pld-status.preg.is-editable:hover{filter:brightness(.97)}
.pld-status.preg.is-editable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Neutral, not pink: this chip's whole job is to stop asserting a pregnancy,
   so it must not keep wearing the colour that means one. */
.pld-status.preg.is-ended{background:var(--s2);color:var(--muted);border-color:var(--border)}
.preg-hover-cta{padding:8px 14px 12px;font-size:10.5px;color:var(--muted);opacity:.8}
.preg-edit-lede{font-size:12px;line-height:1.55;color:var(--muted);margin-bottom:14px}
.preg-edit-choice{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.preg-edit-choice label{display:flex;align-items:center;gap:9px;min-height:0;padding:10px 12px;
  border:1px solid var(--border);border-radius:10px;background:var(--s2);cursor:pointer;
  text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--text)}
.preg-edit-choice label:hover{border-color:var(--accent)}
.preg-edit-choice input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--accent)}
.preg-edit-choice span{flex:1}
.preg-edit-day1{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  font-size:11.5px;line-height:1.55;color:var(--muted)}
.preg-edit-spacer{flex:1}
#pregEditModal .modal-ft{justify-content:flex-start}

/* The header status chips carry the things a clinician needs to catch at a
   glance, so they are sized a step up from the row chips rather than matching
   them. Scoped to the detail header - the compact list rows keep their own
   smaller sizing (.pld-row-chips above). */
.pld-status-row .pld-status{padding:7px 13px;font-size:13px;border-radius:10px;gap:6px}

/* Pregnancy glows. It is the one chip on this row that is time-sensitive and
   changes what is safe to do next, so it is the one allowed to draw the eye.
   The stale variant glows amber instead - same signal, different urgency. */
.pld-status-row .pld-status.preg{
  box-shadow:0 0 0 1px rgba(219,39,119,.2),0 2px 10px rgba(219,39,119,.3),0 0 20px rgba(219,39,119,.24)}
.pld-status-row .pld-status.preg.is-stale{
  box-shadow:0 0 0 1px rgba(245,158,11,.24),0 2px 10px rgba(245,158,11,.32),0 0 20px rgba(245,158,11,.26)}
/* No glow once it no longer asserts a pregnancy - the chip is a neutral record
   at that point and should recede. */
.pld-status-row .pld-status.preg.is-ended{box-shadow:none}
html[data-theme="dark"] .pld-status-row .pld-status.preg{
  box-shadow:0 0 0 1px rgba(244,114,182,.3),0 2px 12px rgba(244,114,182,.34),0 0 24px rgba(244,114,182,.28)}
html[data-theme="dark"] .pld-status-row .pld-status.preg.is-stale{
  box-shadow:0 0 0 1px rgba(251,191,36,.32),0 2px 12px rgba(251,191,36,.34),0 0 24px rgba(251,191,36,.26)}
html[data-theme="dark"] .pld-status-row .pld-status.preg.is-ended{box-shadow:none}

/* ---- Notes Form integration (chart tab + test bench) ---- */

/* Test bench. Constrained: this is a settings-and-diagnostics page, and a
   single column of facts stretched across a 1900px monitor is unreadable. */
.nf-wrap{max-width:940px}
.nf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin:0 0 22px}
.nf-head-t h1{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.nf-head-t p{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted);max-width:62ch}
.nf-card{margin-bottom:16px}
.nf-card .card-hd{display:flex;align-items:center;gap:12px}
.nf-card-right{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap}

.nf-pill{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  border-radius:999px;padding:4px 11px;border:1px solid transparent;white-space:nowrap}
.nf-pill.is-on{color:var(--accent);background:var(--al,var(--s2));border-color:rgba(0,119,182,.3)}
.nf-pill.is-off{color:#9a5b00;background:var(--aml,rgba(154,91,0,.1));border-color:rgba(154,91,0,.28)}
.nf-pill.is-err{color:#b4453e;background:rgba(180,69,62,.1);border-color:rgba(180,69,62,.28)}
html[data-theme="dark"] .nf-pill.is-off{color:#fbbf24;background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.32)}
html[data-theme="dark"] .nf-pill.is-err{color:#e79c96;background:rgba(180,69,62,.18);border-color:rgba(180,69,62,.4)}

/* Facts read as a spec sheet: label left, value right, hairline between. */
.nf-facts{display:flex;flex-direction:column}
.nf-fact{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.nf-fact:last-child{border-bottom:none;padding-bottom:0}
.nf-fact:first-child{padding-top:0}
.nf-fact span{color:var(--muted)}
.nf-fact b{color:var(--text);font-weight:700;text-align:right}
.nf-fact b.nf-bad{color:#b4453e}
.nf-tokenbox{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.nf-verdicts{margin:6px 0 0;padding-left:18px}
.nf-verdicts li{margin-bottom:6px;line-height:1.6}
.nf-verdicts li:last-child{margin-bottom:0}

/* The setup checklist owns the not-configured state, so it leads the card
   rather than sitting under the facts as a footnote. */
.nf-steps{list-style:none;counter-reset:nfstep;margin:0 0 20px;padding:0 0 18px;
  border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:15px}
.nf-steps li{counter-increment:nfstep;position:relative;padding-left:34px}
.nf-steps li:before{content:counter(nfstep);position:absolute;left:0;top:0;
  width:23px;height:23px;border-radius:50%;background:var(--al,var(--s2));color:var(--accent);
  border:1px solid rgba(0,119,182,.28);font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.nf-steps b{display:block;font-size:13px;font-weight:700;color:var(--text);line-height:1.4}
.nf-steps span{display:block;font-size:12px;color:var(--muted);line-height:1.6;margin-top:3px}
.nf-steps code,.nf-note code,.nf-warn code{font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px;color:var(--text);background:var(--s2);border:1px solid var(--border);
  border-radius:5px;padding:1px 5px}

.nf-note{margin:0 0 14px;font-size:12px;line-height:1.6;color:var(--muted);max-width:70ch}
/* The hint under the probe row reads as a sentence, so its one action is
   a link rather than a button competing with Probe itself. */
.nf-probe+.nf-note{margin:14px 0 0}
.nf-linkbtn{background:none;border:none;padding:0;font:inherit;color:var(--accent);
  font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.nf-linkbtn:hover{opacity:.8}
.nf-linkbtn:disabled{color:var(--muted);cursor:default;text-decoration:none;opacity:.7}
.nf-probe{display:flex;gap:10px;flex-wrap:wrap}
.nf-probe input{flex:1 1 280px;min-width:0;max-width:420px}
.nf-probe .btn{flex:none}

.nf-empty{padding:30px 20px;text-align:center;font-size:12.5px;color:var(--muted);
  display:flex;flex-direction:column;gap:6px}
.nf-empty b{font-size:13.5px;color:var(--text)}
.nf-empty.nf-err b{color:#b4453e}
html[data-theme="dark"] .nf-empty.nf-err b{color:#e79c96}

/* The single most useful thing this page reports: what the adapter could not
   read. Called out above the notes, not left for someone to notice. */
.nf-warn,.nf-ok-note{border-radius:11px;padding:12px 14px;margin:0 0 14px;
  font-size:12px;line-height:1.6}
.nf-warn{background:rgba(154,91,0,.08);border:1px solid rgba(154,91,0,.26);
  display:flex;flex-direction:column;gap:3px}
.nf-warn b{color:#9a5b00;font-weight:800}
.nf-warn span{color:var(--muted)}
.nf-ok-note{background:var(--al,var(--s2));border:1px solid rgba(0,119,182,.24);color:var(--accent);font-weight:600}
html[data-theme="dark"] .nf-warn{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.3)}
html[data-theme="dark"] .nf-warn b{color:#fbbf24}

.nf-raw{margin:0;padding:13px;background:var(--s2);border:1px solid var(--border);
  border-radius:11px;font-family:'DM Mono',ui-monospace,monospace;font-size:11px;line-height:1.55;
  color:var(--text);overflow:auto;max-height:460px;white-space:pre}

/* ---- Chart tab ---- */
.nf-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.nf-link-chip{font-size:11px;font-weight:700;color:var(--accent);background:var(--al,var(--s2));
  border:1px solid rgba(0,119,182,.28);border-radius:999px;padding:3px 10px}
/* ---- Notes, gathered by day ---- */
/* One day of care reads as one entry, and the rail down the left says the
   notes inside it are in the order they were saved - top one first - without
   printing a single timestamp. The practice does not read the clock; it
   reads the day's work in the order it happened. */
.nf-daysum{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.nf-days{display:flex;flex-direction:column;gap:14px}
.nf-day{border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.nf-day-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;background:var(--s2);border-bottom:1px solid var(--border)}
.nf-day-hd h4{margin:0;font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.nf-day-hd span{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.nf-day-notes{position:relative;padding:15px 16px 15px 32px}
.nf-day-notes:before{content:'';position:absolute;left:20px;top:22px;bottom:22px;width:1px;
  background:var(--border)}
.nf-daynote{position:relative;padding-bottom:13px}
.nf-daynote:last-child{padding-bottom:0}
.nf-daynote:before{content:'';position:absolute;left:-15px;top:5px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px var(--surface)}
.nf-daynote+.nf-daynote{border-top:1px solid var(--border);padding-top:13px}
.nf-daynote+.nf-daynote:before{top:18px}
.nf-text{margin:0;font-size:12.5px;line-height:1.7;color:var(--text);white-space:pre-wrap}
.nf-daynote-raw .nf-raw{max-height:220px}
/* The keys the payload really used. A diagnosis, so it stays quiet. */
.nf-keys{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;margin:0 0 13px;font-size:11.5px}
.nf-keys>span{color:var(--muted);font-weight:700}
.nf-keys code{font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;
  background:var(--s2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;color:var(--text)}
/* Provenance matters: these notes are read live from another system and are
   Not part of this chart's stored record. Say so where they are shown. */
.nf-foot{margin:14px 0 0;font-size:11px;color:var(--muted);font-style:italic}

/* ---- Notes Form page, full-width layout ---- */
/* Uses the whole content sheet: tools on the left, the notes fill the rest. */
#page-notesFormTest .nf-wrap{max-width:none}
.nfb-ico{width:16px;height:16px;flex:none}
.nfb-hero{position:relative;overflow:hidden;border-radius:22px;padding:24px 28px 20px;margin:0 0 18px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,rgba(0,180,216,.55) 0%,transparent 55%),
    linear-gradient(125deg,#03045E 0%,#023E8A 48%,#0077B6 100%);
  box-shadow:0 18px 40px rgba(3,4,94,.18)}
.nfb-hero:after{content:'';position:absolute;right:-60px;bottom:-90px;width:320px;height:320px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 40px rgba(255,255,255,.03),0 0 0 90px rgba(255,255,255,.025);pointer-events:none}
.nfb-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.nfb-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#90E0EF}
.nfb-hero h1{margin:6px 0 0;font-size:28px;font-weight:800;letter-spacing:-.025em;color:#fff}
.nfb-hero p{margin:6px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.78);max-width:60ch}
.nfb-hero-actions{display:flex;gap:8px;position:relative;z-index:1}
.nfb-glass{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:10px;cursor:pointer;
  font:600 12.5px 'Plus Jakarta Sans','Inter',sans-serif;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);transition:background .15s}
.nfb-glass:hover{background:rgba(255,255,255,.2)}
.nfb-flow{display:flex;align-items:center;gap:14px;margin:22px 0 18px;position:relative;z-index:1}
.nfb-node{display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:14px;flex:none;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.nfb-node .nfb-ico{width:22px;height:22px;color:#90E0EF}
.nfb-node b{display:block;font-size:13.5px;font-weight:800;color:#fff;line-height:1.2}
.nfb-node span{display:block;font-size:11px;color:rgba(255,255,255,.65)}
.nfb-wire{position:relative;flex:1;height:2px;min-width:60px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px)}
.nfb-wire em{position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-style:normal;white-space:nowrap;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.72)}
.nfb-wire i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#90E0EF;
  box-shadow:0 0 10px #48CAE4;opacity:0}
.nfb-hero.is-live .nfb-wire i{animation:nfbFlow 2.4s linear infinite}
.nfb-hero.is-live .nfb-wire i:nth-child(2){animation-delay:.8s}
.nfb-hero.is-live .nfb-wire i:nth-child(3){animation-delay:1.6s}
@keyframes nfbFlow{0%{left:100%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.nfb-hero.is-live .nfb-wire i{animation:none;opacity:1;left:50%}}
.nfb-meta{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
.nfb-meta>span{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.85);padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.nfb-meta .nfb-state{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:#fff}
.nfb-state i{width:8px;height:8px;border-radius:50%;background:#fbbf24}
.is-live .nfb-state i{background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.25);animation:nfbPulse 2s ease-in-out infinite}
.is-wait .nfb-state i{background:rgba(255,255,255,.6)}
@keyframes nfbPulse{50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}}

.nfb-grid{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:18px;align-items:start}
.nfb-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.nfb-col>.nf-card{margin:0}
.nfb-col:first-child{position:sticky;top:16px}
@media (max-width:1100px){.nfb-grid{grid-template-columns:1fr}.nfb-col:first-child{position:static}}
.nfb-card{border-radius:18px}
.nfb-title{display:flex;align-items:center;gap:10px}
.nfb-title-ico{width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--al,var(--s2));color:var(--accent);flex:none}
.nfb-title-ico .nfb-ico{width:15px;height:15px}

.nfb-search{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:13px;
  background:var(--s2);border:1.5px solid var(--border);transition:border-color .15s,box-shadow .15s}
.nfb-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,119,182,.12)}
.nfb-search>.nfb-ico{color:var(--muted)}
.nfb-search input{flex:1;min-width:0;border:none!important;background:transparent!important;box-shadow:none!important;
  outline:none;padding:8px 2px!important;font-size:13px;font-family:'DM Mono',ui-monospace,monospace;color:var(--text)}
.nfb-search .btn{flex:none;border-radius:9px}
.nfb-search.is-off{opacity:.65}
.nfb-safe{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 0;padding:12px 13px;text-align:left;cursor:pointer;
  border-radius:13px;border:1px dashed rgba(0,119,182,.35);background:transparent;font-family:inherit;color:var(--text);
  transition:background .15s,border-color .15s}
.nfb-safe:hover:not(:disabled){background:var(--al,var(--s2));border-color:var(--accent)}
.nfb-safe:disabled{opacity:.55;cursor:default}
.nfb-safe-ico{width:32px;height:32px;border-radius:10px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(22,163,74,.1);color:#15803d}
.nfb-safe b{display:block;font-size:12.5px;font-weight:700}
.nfb-safe small{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:2px}
.nfb-safe>span:nth-child(2){flex:1}
.nfb-chev{width:14px;height:14px;color:var(--muted);transition:transform .2s}
.nfb-audit{display:flex;align-items:center;gap:7px;margin:12px 0 0;font-size:11px;color:var(--muted)}
.nfb-audit .nfb-ico{width:13px;height:13px}

.nfb-count{font-size:11px;font-weight:800;color:var(--accent);background:var(--al,var(--s2));border-radius:999px;padding:2px 9px}
.nfb-pts{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto;margin:-4px -6px}
.nfb-pt{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;border:1px solid transparent;
  background:none;cursor:pointer;text-align:left;font-family:inherit;color:var(--text);transition:background .12s}
.nfb-pt:hover:not(:disabled){background:var(--s2)}
.nfb-pt.is-on{background:var(--al,var(--s2));border-color:rgba(0,119,182,.28)}
.nfb-pt:disabled{opacity:.55;cursor:default}
.nfb-av{width:32px;height:32px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,#0077B6,#00B4D8)}
.nfb-pt-t{flex:1;min-width:0}
.nfb-pt-t b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfb-pt-t small{display:block;font-size:10.5px;color:var(--muted);font-family:'DM Mono',ui-monospace,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nfb-fold>summary{list-style:none;cursor:pointer}
.nfb-fold>summary::-webkit-details-marker{display:none}
.nfb-fold:not([open])>summary{border-bottom:none}
.nfb-fold[open]>summary .nfb-chev,.nfb-adapter[open]>summary .nfb-chev{transform:rotate(90deg)}
.nfb-fold .nf-fact{flex-direction:column;align-items:flex-start;gap:3px}
.nfb-fold .nf-fact b{text-align:left;word-break:break-all;font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;font-weight:500}
.nfb-inspect{margin-top:14px}
.nfb-btn-soft{display:inline-flex;align-items:center;gap:7px}
.nfb-btn-soft .nfb-ico{width:14px;height:14px}
.nfb-skel{display:flex;flex-direction:column;gap:10px}
.nfb-skel i,.nfb-skel-day i{display:block;height:10px;border-radius:6px;
  background:linear-gradient(90deg,var(--s2) 0%,var(--s3,var(--border)) 50%,var(--s2) 100%);background-size:200% 100%;
  animation:nfbShimmer 1.3s linear infinite}
@keyframes nfbShimmer{to{background-position:-200% 0}}

.nfb-result{min-height:calc(100vh - 290px)}
.nfb-result>.card-body{padding-bottom:22px}
.nfb-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  min-height:calc(100vh - 400px);padding:40px 24px;font-size:12.5px;color:var(--muted)}
.nfb-empty>span:last-child{max-width:46ch;line-height:1.6}
.nfb-empty b{font-size:15px;color:var(--text);font-weight:800}
.nfb-empty-ico{width:64px;height:64px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;
  color:var(--accent);background:linear-gradient(145deg,var(--al,var(--s2)),var(--s2));box-shadow:inset 0 0 0 1px rgba(0,119,182,.14)}
.nfb-empty-ico .nfb-ico{width:28px;height:28px}
.nfb-empty.is-ok .nfb-empty-ico{color:#15803d;background:rgba(22,163,74,.1);box-shadow:inset 0 0 0 1px rgba(22,163,74,.2)}
.nfb-empty.is-err .nfb-empty-ico{color:#b4453e;background:rgba(180,69,62,.1);box-shadow:inset 0 0 0 1px rgba(180,69,62,.2)}
.nfb-empty.is-err b{color:#b4453e}
.nfb-loading{display:flex;flex-direction:column;gap:14px}
.nfb-skel-day{display:flex;gap:14px}
.nfb-skel-day i.d{width:58px;height:66px;border-radius:14px;flex:none}
.nfb-skel-day>div{flex:1;display:flex;flex-direction:column;gap:10px;padding-top:6px}
.nfb-skel-day i.s{width:60%}

.nfb-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--s2);border:1px solid var(--border)}
.nfb-seg button{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:none;border-radius:7px;background:none;
  cursor:pointer;font:600 11.5px 'Plus Jakarta Sans','Inter',sans-serif;color:var(--muted)}
.nfb-seg button .nfb-ico{width:13px;height:13px}
.nfb-seg button.is-on{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px rgba(3,4,94,.1)}
.nfb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 14px}
.nfb-stats>div{padding:13px 15px;border-radius:13px;background:var(--s2);border:1px solid var(--border)}
.nfb-stats b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text);line-height:1.15}
.nfb-stats .nfb-span b{font-size:14px;padding-top:5px}
.nfb-stats b i{font-style:normal;color:var(--accent)}
.nfb-stats span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nfb-adapter{margin:0 0 18px;border-radius:12px;border:1px solid rgba(22,163,74,.25);background:rgba(22,163,74,.05)}
.nfb-adapter>summary{display:flex;align-items:center;gap:8px;padding:9px 13px;cursor:pointer;list-style:none;
  font-size:12px;font-weight:700;color:#15803d}
.nfb-adapter>summary::-webkit-details-marker{display:none}
.nfb-adapter>summary .nfb-chev{margin-left:auto}
.nfb-adapter.is-bad{border-color:rgba(154,91,0,.28);background:rgba(154,91,0,.05)}
.nfb-adapter.is-bad>summary{color:#9a5b00}
.nfb-adapter-body{padding:0 13px 13px}
.nfb-adapter-body .nf-warn,.nfb-adapter-body .nf-ok-note{margin:0}

.nfb-days{position:relative;display:flex;flex-direction:column;gap:16px}
.nfb-days:before{content:'';position:absolute;left:29px;top:20px;bottom:20px;width:2px;border-radius:2px;
  background:linear-gradient(var(--al,var(--border)),var(--border))}
.nfb-day{position:relative;display:flex;gap:16px;align-items:flex-start}
.nfb-date{position:relative;z-index:1;width:60px;flex:none;border-radius:14px;overflow:hidden;text-align:center;
  background:var(--surface);border:1px solid var(--border);box-shadow:0 4px 14px rgba(3,4,94,.07)}
.nfb-date span{display:block;padding:3px 0;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#0077B6,#00B4D8)}
.nfb-date b{display:block;font-size:22px;font-weight:800;line-height:1.2;padding-top:4px;color:var(--text)}
.nfb-date small{display:block;font-size:10px;font-weight:700;color:var(--muted);padding-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.nfb-date.is-undated b{padding-top:10px;color:var(--muted)}
.nfb-day-body{flex:1;min-width:0;border-radius:16px;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(3,4,94,.04);overflow:hidden;transition:box-shadow .2s,border-color .2s}
.nfb-day-body:hover{border-color:rgba(0,119,182,.3);box-shadow:0 8px 24px rgba(3,4,94,.08)}
.nfb-day-body>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--border);background:linear-gradient(90deg,var(--s2),transparent)}
.nfb-day-body h4{margin:0;font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.nfb-day-body header span{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--accent);background:var(--al,var(--s2));padding:3px 9px;border-radius:999px}
.nfb-notes{list-style:none;margin:0;padding:6px 18px;counter-reset:nfbn}
.nfb-note{counter-increment:nfbn;position:relative;padding:12px 0 12px 34px}
.nfb-note+.nfb-note{border-top:1px dashed var(--border)}
.nfb-note:before{content:counter(nfbn);position:absolute;left:0;top:12px;width:22px;height:22px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:var(--accent);
  background:var(--al,var(--s2))}
.nfb-note p{margin:0;font-size:13px;line-height:1.7;color:var(--text);white-space:pre-wrap}
.nfb-note.is-raw .nf-raw{max-height:220px}
.nfb-foot{margin:18px 0 0;font-size:11px;color:var(--muted);text-align:center}
/* ---- Daily Notes: RecoverArc days alongside notes entered here ---- */
.dn-arc-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#15803d;
  background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.26);border-radius:999px;padding:4px 11px;
  max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-arc-chip i{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:none;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.dn-src{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 9px;
  color:#15803d;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.26)}
.dn-src.is-manual{color:var(--muted);background:var(--s2);border-color:var(--border)}
.dn-arc{border-left:3px solid #22c55e!important}
.dn-arc:not(.is-open) .pld-record-head{margin-bottom:0}
.dn-arc-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.dn-arc-ex{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:12px 14px}
.dn-arc-ex h5{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.dn-arc-row{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:10px;padding:6px 0;font-size:12.5px;line-height:1.55;
  border-top:1px dashed var(--border)}
.dn-arc-ex h5+.dn-arc-row{border-top:none}
.dn-arc-row span{color:var(--muted);font-weight:600}
.dn-arc-row b{color:var(--text);font-weight:500;white-space:pre-wrap}
.dn-arc-row.is-text{grid-template-columns:1fr}
.dn-arc-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 12px;
  padding:13px 16px;border-radius:13px;border:1px dashed rgba(22,163,74,.4);background:rgba(22,163,74,.05)}
.dn-arc-banner b{display:block;font-size:13px;font-weight:800;color:var(--text)}
.dn-arc-banner span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.dn-arc-banner.is-loading b{color:#15803d}
.dn-arc-banner.is-muted{border-color:var(--border);background:var(--s2)}
.dn-arc-banner.is-err{border-color:rgba(180,69,62,.35);background:rgba(180,69,62,.05)}
.dn-arc-banner.is-err b{color:#b4453e}
html[data-theme="dark"] .dn-arc-chip,html[data-theme="dark"] .dn-src:not(.is-manual),html[data-theme="dark"] .dn-arc-banner.is-loading b{color:#4ADE80}
html[data-theme="dark"] .nfb-safe-ico,html[data-theme="dark"] .nfb-empty.is-ok .nfb-empty-ico{color:#4ADE80;background:rgba(74,222,128,.12)}
html[data-theme="dark"] .nfb-adapter>summary{color:#4ADE80}
html[data-theme="dark"] .nfb-adapter.is-bad>summary{color:#fbbf24}
@media (max-width:640px){
  .nfb-hero{padding:20px 18px}
  .nfb-flow{flex-direction:column;align-items:stretch}
  .nfb-wire{height:26px;width:2px;min-width:0;margin:0 auto;background:repeating-linear-gradient(180deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px)}
  .nfb-wire em,.nfb-wire i{display:none}
  .nfb-days:before{left:23px}
  .nfb-date{width:48px}
}

.modal-ft{flex-wrap:wrap;align-items:center;row-gap:8px}
.modal-ft > .btn{flex:0 0 auto}
.rf-modal-ft{flex-wrap:wrap;row-gap:10px}
/* Narrow screens: one button per row, full width, rather than a
   ragged two-up grid. */
@media (max-width:560px){
  .modal-ft > .btn{flex:1 1 100%;justify-content:center}
}

img,svg,video,canvas,iframe{max-width:100%}
img,video{height:auto}
/* Long words break only when they would otherwise overflow; this has no
   effect on white-space:nowrap text (ellipsised names, table numerals). */
body{overflow-wrap:break-word}
.card-title,.card-sub,.detail-value,.dx-desc,.pl-item-note,.pld-kv-value,.pld-doc-row,
.pdn-view-value,.fcr-meta-value,.dn-ver-diff-before,.dn-ver-diff-after,
.pa-diff-table td,.ac-law-firm-name,.ar-combo-text{overflow-wrap:anywhere}

/* Amber "save it as it stands" action, for Save as Incomplete. Dark text on
   amber rather than white - white on #F59E0B fails contrast, and this button
   sits directly beside a filled blue one, where the difference has to read at
   a glance rather than on inspection. */
.btn-warn{background:linear-gradient(135deg,#FBBF24 0%,#F59E0B 100%);color:#3B2A06;
  box-shadow:0 6px 18px rgba(217,119,6,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-warn:hover{filter:brightness(1.05);
  box-shadow:0 10px 26px rgba(245,158,11,.42),inset 0 1px 0 rgba(255,255,255,.42)}
.btn-warn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(217,119,6,.3)}


:root{
  --side-gap:14px;
  --side-w:252px;
  --rail-w:78px;
  /* Distance from the viewport edge to the content: gap + rail + gap. Flipped
     by .sidebar-rail below, which is what makes the content slide with the
     sidebar instead of having to be animated separately. */
  --side-x:280px;
  --side-ease:cubic-bezier(.4,0,.2,1);
  --side-dur:240ms;
}
body.sidebar-rail{--side-x:106px}

/* ---------- the card itself ---------- */
body:not(.auth-active) .sidebar{
  top:var(--side-gap)!important;
  left:var(--side-gap)!important;
  bottom:var(--side-gap)!important;
  height:auto!important;
  width:var(--side-w)!important;
  border-radius:24px!important;
  border:1px solid rgba(3,4,94,.07)!important;
  box-shadow:0 20px 48px rgba(3,4,94,.13),0 3px 10px rgba(3,4,94,.06)!important;
  padding:0 12px 12px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  transition:width var(--side-dur) var(--side-ease),
             transform var(--side-dur) var(--side-ease)!important;
}
body:not(.auth-active).sidebar-rail .sidebar{width:var(--rail-w)!important}

/* Light theme takes the reference's white card; dark theme keeps the portal's
   existing deep indigo, which is already what the reference's dark pair shows.
   The gradient from the earlier passes is replaced rather than layered - two
   backgrounds on one element is how the last three passes fought each other. */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar{
  background:#fff!important;
  color:#5A6A85!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar{
  background:linear-gradient(180deg,#050B1D 0%,#03045E 58%,#062E52 100%)!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.5)!important;
}
/* The decorative arcs read as smudges on a white card; they were designed
   against the dark rail, so they stay only there. */
html:not([data-theme="dark"]) .sidebar::after{display:none!important;content:none!important}

/* ---------- brand ---------- */
.side-brand{
  display:flex;align-items:center;gap:8px;
  padding:16px 4px 14px;margin-bottom:6px;
  position:sticky;top:0;z-index:3;
}
html:not([data-theme="dark"]) .side-brand{background:#fff}
html[data-theme="dark"] .side-brand{background:transparent}
.side-brand-mark{
  display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;
  cursor:pointer;text-decoration:none;border-radius:12px;padding:2px;
}
.side-brand-mark:focus-visible{outline:2px solid #0077B6;outline-offset:2px}
.side-brand-icon{
  flex:none;width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0077B6 0%,#03045E 100%);
  color:#fff;box-shadow:0 6px 16px rgba(0,119,182,.34);
}
.side-brand-icon svg{width:20px;height:20px}
/* The mark is artwork now, not a stroke icon. The PNG carries its own padding
   (the brain occupies 84% of a square canvas), so this box can sit close to the
   tile edge without the shape touching the rounded corners. */
.side-brand-icon img{width:26px;height:26px;object-fit:contain;display:block}
/* The wordmark replaces live text, so it is sized in em: the existing
   .side-brand-name font-size overrides at each breakpoint (14 / 15.5 / 17.5px)
   keep driving it without a matching height rule at every one of them. */
.side-brand-name img{height:1.8em;width:auto;max-width:100%;object-fit:contain;display:block}
/* Two words on two lines rather than one truncated line - "Concussion Therapy
   Group" does not fit beside a 38px mark and a collapse button at any size
   that is still readable. */
.side-brand-name{
  font-family:'Instrument Serif',serif;font-size:15.5px;line-height:1.12;
  letter-spacing:-.01em;min-width:0;
}
html:not([data-theme="dark"]) .side-brand-name{color:#03045E}
html[data-theme="dark"] .side-brand-name{color:#fff}
.side-brand-name span{color:#0077B6}
html[data-theme="dark"] .side-brand-name span{color:#48CAE4}

/* ---------- collapse / expand control ---------- */
.side-collapse{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  transition:background .16s,color .16s,transform var(--side-dur) var(--side-ease);
}
.side-collapse svg{width:15px;height:15px}
html:not([data-theme="dark"]) .side-collapse{
  background:#F1F5FB;border:1px solid rgba(3,4,94,.08);color:#5A6A85;
}
html:not([data-theme="dark"]) .side-collapse:hover{background:#E4EDF9;color:#03045E}
html[data-theme="dark"] .side-collapse{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#CAF0F8;
}
html[data-theme="dark"] .side-collapse:hover{background:rgba(255,255,255,.19);color:#fff}
body.sidebar-rail .side-collapse{transform:rotate(180deg)}
.side-collapse:focus-visible{outline:2px solid #0077B6;outline-offset:2px}

/* ---------- nav items ---------- */
body:not(.auth-active) .sidebar .side-link,
body:not(.auth-active) .sidebar .side-sublink{
  border-radius:12px!important;
  margin:2px 0!important;
  transition:background .16s,color .16s!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink{
  color:#5A6A85!important;background:transparent!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link:hover,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink:hover{
  background:#F1F5FB!important;color:#03045E!important;
}
/* The icons were tinted rgba(219,234,254,.74) with a glow for the dark rail;
   on white that is very close to invisible, and it is the only thing showing
   at all once the labels are gone in rail mode. */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link svg,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink svg{
  color:#7B8DB0!important;filter:none!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link:hover svg,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink:hover svg{
  color:#0077B6!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-section-label{
  color:#94A3B8!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-divider{
  background:rgba(3,4,94,.08)!important;border:0!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-group-chevron{
  color:#94A3B8!important;
}

/* Active page: one solid pill, matching the reference. A single
   treatment - an earlier pass stacked a gradient, a glowing accent bar and an
   inset ring on this same element, which is what made it read busier than the
   mockup even when the rest of the rail matched. */
/* The theme prefix is load-bearing, not decoration: the idle rules above are
   html:not([data-theme]) body ... .side-link - (0,4,2) - and an active rule
   written as body ... .side-link.active is only (0,4,1), so the idle colour won
   and the pill never painted. Matching the prefix puts this at (0,5,2). */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link.active,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink.active{
  background:linear-gradient(135deg,#0077B6 0%,#023E8A 100%)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(0,119,182,.32)!important;
  /* Inherited from the frosted-glass active pill built for the dark rail. */
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link.active svg,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink.active svg{color:#fff!important;opacity:1!important}
body:not(.auth-active) .sidebar .side-link.active::before,
body:not(.auth-active) .sidebar .side-link.active::after,
body:not(.auth-active) .sidebar .side-sublink.active::before,
body:not(.auth-active) .sidebar .side-sublink.active::after{display:none!important;content:none!important}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link.active,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink.active{
  background:rgba(255,255,255,.96)!important;color:#03045E!important;
  box-shadow:0 8px 20px rgba(0,0,0,.28)!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link.active svg,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink.active svg{color:#0077B6!important}

/* The two ACE count chips carry inline colours picked for the dark rail. */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar #incompleteAceCount,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar #completedAceCount,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar #pendingDay2Count{
  background:#E4EDF9!important;color:#023E8A!important;
}
body:not(.auth-active) .sidebar .active #incompleteAceCount,
body:not(.auth-active) .sidebar .active #completedAceCount,
body:not(.auth-active) .sidebar .active #pendingDay2Count{
  background:rgba(255,255,255,.24)!important;color:#fff!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .active #incompleteAceCount,
html[data-theme="dark"] body:not(.auth-active) .sidebar .active #completedAceCount,
html[data-theme="dark"] body:not(.auth-active) .sidebar .active #pendingDay2Count{
  background:#E4EDF9!important;color:#023E8A!important;
}

/* ---------- account card / reset, bottom of the rail ---------- */
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-card{
  background:#F7FAFF!important;border:1px solid rgba(3,4,94,.08)!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-name{color:#03045E!important}
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-role{color:#7B8DB0!important}
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-out{
  background:#fff!important;border:1px solid rgba(3,4,94,.12)!important;color:#5A6A85!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-out:hover{
  border-color:#0077B6!important;color:#023E8A!important;
}

/* ---------- RAIL (collapsed) ----------
   Most nav labels are bare text nodes rather than elements, so there is nothing
   to select and hide - font-size:0 on the row is what collapses them, with the
   icon sized by its own width/height and therefore unaffected. */
body.sidebar-rail:not(.auth-active) .sidebar .side-link,
body.sidebar-rail:not(.auth-active) .sidebar .side-sublink{
  font-size:0!important;
  justify-content:center!important;
  padding:11px 0!important;
  gap:0!important;
  width:52px!important;
  margin:3px auto!important;
  border-radius:14px!important;
}
body.sidebar-rail:not(.auth-active) .sidebar .side-link svg,
body.sidebar-rail:not(.auth-active) .sidebar .side-sublink svg{
  width:19px!important;height:19px!important;margin:0!important;flex:none!important;
}
body.sidebar-rail:not(.auth-active) .sidebar .side-link>span,
body.sidebar-rail:not(.auth-active) .sidebar .side-sublink>span,
body.sidebar-rail:not(.auth-active) .sidebar .side-group-chevron,
body.sidebar-rail:not(.auth-active) .sidebar .side-section-label,
body.sidebar-rail:not(.auth-active) .sidebar .side-group-body,
body.sidebar-rail:not(.auth-active) .side-brand-name,
body.sidebar-rail:not(.auth-active) .side-account-info{display:none!important}
body.sidebar-rail:not(.auth-active) .side-brand{
  flex-direction:column;gap:10px;padding:14px 0 12px;
}
body.sidebar-rail:not(.auth-active) .side-brand-mark{justify-content:center;flex:none}
body.sidebar-rail:not(.auth-active) .side-account-card{
  padding:8px!important;justify-content:center!important;
}
body.sidebar-rail:not(.auth-active) .side-account-who{justify-content:center!important}
body.sidebar-rail:not(.auth-active) .side-account-out{
  font-size:0!important;justify-content:center!important;padding:8px!important;
}
body.sidebar-rail:not(.auth-active) .side-account-out svg{width:16px!important;height:16px!important}
body.sidebar-rail:not(.auth-active) .sidebar .side-divider{margin-left:12px!important;margin-right:12px!important}

/* ---------- header removed: the controls float over the content ---------- */
body:not(.auth-active) .top-bar{
  position:fixed!important;
  top:0!important;
  left:var(--side-x)!important;
  right:0!important;
  width:auto!important;
  margin-left:0!important;
  height:64px!important;
  padding:0 24px!important;
  background:none!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  z-index:60!important;
  /* The strip spans the whole content width but must not swallow clicks meant
     for the page underneath it - only the controls themselves are live. */
  pointer-events:none!important;
  transition:left var(--side-dur) var(--side-ease)!important;
}
body:not(.auth-active) .top-bar>*{pointer-events:auto}
body:not(.auth-active) .top-bar>div:first-child{pointer-events:none}
/* The brand lives in the rail now, and the hamburger is a phone control. */
body:not(.auth-active) .top-bar .topbar-logo,
body:not(.auth-active) #topbarLogo{display:none!important}
body:not(.auth-active) .menu-btn{display:none!important}

/* Each control group becomes its own floating pill so it stays readable over
   whatever is scrolling beneath it. */
body:not(.auth-active) .top-bar>div:last-child{
  display:flex;align-items:center;gap:8px;
  padding:6px;border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(3,4,94,.08);
  box-shadow:0 10px 28px rgba(3,4,94,.12);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
html[data-theme="dark"] body:not(.auth-active) .top-bar>div:last-child{
  background:rgba(11,20,48,.78);border-color:rgba(255,255,255,.1);
  box-shadow:0 10px 28px rgba(0,0,0,.44);
}
body:not(.auth-active) .top-bar #day1Tabs{
  padding:5px 8px;border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(3,4,94,.08);
  box-shadow:0 10px 28px rgba(3,4,94,.12);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
html[data-theme="dark"] body:not(.auth-active) .top-bar #day1Tabs{
  background:rgba(11,20,48,.78);border-color:rgba(255,255,255,.1);
}
/* Those controls were drawn white-on-dark for the old solid bar. */
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .topbar-search,
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .ctg-theme-btn,
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .user-chip-btn{
  color:#334155!important;background:transparent!important;border-color:rgba(3,4,94,.1)!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .topbar-search:hover,
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .ctg-theme-btn:hover,
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .user-chip-btn:hover{
  background:#F1F5FB!important;color:#03045E!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .user-chip-role{color:#7B8DB0!important}
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .topbar-search kbd{
  background:#EEF3FA!important;color:#5A6A85!important;border-color:rgba(3,4,94,.1)!important;
}

/* ---------- content follows the rail ---------- */
body.sidebar-visible:not(.auth-active) .page{
  margin-left:var(--side-x)!important;
  /* The fixed strip no longer reserves space in the flow the way the sticky
     bar did, so the first card would otherwise start underneath the controls. */
  padding-top:64px!important;
  transition:margin-left var(--side-dur) var(--side-ease)!important;
}
body.sidebar-visible:not(.auth-active) .action-bar{
  left:var(--side-x)!important;right:0!important;padding-left:28px!important;
  transition:left var(--side-dur) var(--side-ease)!important;
}
body.sidebar-visible:not(.auth-active) .ctg-phi-footer{margin-left:var(--side-x)!important;width:auto!important}

/* ---------- phones: the rail mechanic is off, the drawer is back ---------- */
@media(max-width:860px){
  body:not(.auth-active) .sidebar{
    top:0!important;left:0!important;bottom:0!important;
    width:var(--side-w)!important;border-radius:0!important;
    box-shadow:0 24px 60px rgba(3,4,94,.3)!important;
  }
  /* A phone gets the full labelled drawer, never the icon rail - the rail's
     only purpose is reclaiming width that a phone does not have to give. */
  body.sidebar-rail:not(.auth-active) .sidebar{width:var(--side-w)!important}
  body.sidebar-rail:not(.auth-active) .sidebar .side-link,
  body.sidebar-rail:not(.auth-active) .sidebar .side-sublink{
    font-size:13px!important;justify-content:flex-start!important;
    width:auto!important;margin:2px 0!important;padding:10px 12px!important;gap:11px!important;
  }
  body.sidebar-rail:not(.auth-active) .sidebar .side-link>span,
  body.sidebar-rail:not(.auth-active) .sidebar .side-sublink>span,
  body.sidebar-rail:not(.auth-active) .side-account-info{display:flex!important}
  body.sidebar-rail:not(.auth-active) .sidebar .side-group-chevron{display:block!important}
  body.sidebar-rail:not(.auth-active) .sidebar .side-section-label{display:block!important}
  body.sidebar-rail:not(.auth-active) .side-brand-name{display:block!important}
  body.sidebar-rail:not(.auth-active) .side-account-out{font-size:12px!important;padding:8px 12px!important}
  body.sidebar-rail:not(.auth-active) .side-brand{flex-direction:row;padding:16px 4px 14px}
  body:not(.auth-active) .side-collapse{display:none!important}
  body:not(.auth-active) .menu-btn{display:inline-flex!important}
  body:not(.auth-active) .top-bar{left:0!important;padding:0 14px!important}
  body.sidebar-visible:not(.auth-active) .page{margin-left:0!important}
  body.sidebar-visible:not(.auth-active) .action-bar{left:0!important}
  body.sidebar-visible:not(.auth-active) .ctg-phi-footer{margin-left:0!important}
}

/* Respect a reduced-motion preference: the state still changes, it just
   arrives immediately. */
@media(prefers-reduced-motion:reduce){
  .sidebar,.top-bar,.page,.action-bar,.side-collapse{transition:none!important}
}



/* ---------- 1. scrollbar no longer rides the rounded corner ---------- */
body:not(.auth-active) .sidebar{
  scrollbar-width:thin!important;
  scrollbar-color:rgba(3,4,94,.22) transparent!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar{
  scrollbar-color:rgba(202,240,248,.26) transparent!important;
}
body:not(.auth-active) .sidebar::-webkit-scrollbar{width:8px}
body:not(.auth-active) .sidebar::-webkit-scrollbar-track{background:transparent}
body:not(.auth-active) .sidebar::-webkit-scrollbar-thumb{
  background:rgba(3,4,94,.2);
  border-radius:99px;
  /* Transparent border + background-clip keeps the thumb off the card's
     rounded edge; without the inset it paints over the corner radius. */
  border:2px solid transparent;
  background-clip:content-box;
}
body:not(.auth-active) .sidebar::-webkit-scrollbar-thumb:hover{background:rgba(3,4,94,.36);background-clip:content-box}
html[data-theme="dark"] body:not(.auth-active) .sidebar::-webkit-scrollbar-thumb{
  background:rgba(202,240,248,.24);background-clip:content-box;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar::-webkit-scrollbar-thumb:hover{
  background:rgba(202,240,248,.4);background-clip:content-box;
}
/* 8px of a 78px rail is a tenth of it - the rail scrolls on the wheel instead. */
body.sidebar-rail:not(.auth-active) .sidebar{scrollbar-width:none!important}
body.sidebar-rail:not(.auth-active) .sidebar::-webkit-scrollbar{width:0;display:none}

html[data-theme="dark"] .side-brand{background:#050B1D!important}
html:not([data-theme="dark"]) .side-brand{background:#fff!important}
.side-brand{
  /* Clear the card's side padding so the opaque strip reaches both edges and
     nothing can show up the sides as it passes underneath. */
  margin-left:-12px!important;margin-right:-12px!important;
  padding-left:16px!important;padding-right:16px!important;
}
body.sidebar-rail:not(.auth-active) .side-brand{padding-left:0!important;padding-right:0!important}

/* ---------- 3. rail fly-out menus (groups + account) ---------- */
.side-fly{
  position:fixed;z-index:2000;min-width:212px;max-width:280px;
  padding:10px;border-radius:16px;
  animation:sideFlyIn .16s cubic-bezier(.4,0,.2,1);
}
@keyframes sideFlyIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.side-fly{animation:none}}
html:not([data-theme="dark"]) .side-fly{
  background:#fff;border:1px solid rgba(3,4,94,.09);
  box-shadow:0 18px 44px rgba(3,4,94,.18),0 2px 8px rgba(3,4,94,.08);
}
html[data-theme="dark"] .side-fly{
  background:#0B1430;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.side-fly-hd{
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px 0;
}
html:not([data-theme="dark"]) .side-fly-hd{color:#03045E}
html[data-theme="dark"] .side-fly-hd{color:#fff}
.side-fly-sub{font-size:11px;padding:2px 8px 0}
html:not([data-theme="dark"]) .side-fly-sub{color:#7B8DB0}
html[data-theme="dark"] .side-fly-sub{color:#90A4C8}
.side-fly-body{display:flex;flex-direction:column;gap:2px;margin-top:9px}
/* The children are clones of real .side-sublink rows, so they arrive carrying
   the rail's font-size:0 and centring. Undo that - in here they are labelled. */
.side-fly .side-sublink{
  display:flex!important;align-items:center;gap:10px!important;
  font-size:12.5px!important;font-weight:700!important;
  padding:9px 11px!important;margin:0!important;width:auto!important;
  border-radius:10px!important;border-left:0!important;cursor:pointer;
  text-align:left!important;justify-content:flex-start!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.side-fly .side-sublink svg{width:16px!important;height:16px!important;flex:none!important;filter:none!important}
html:not([data-theme="dark"]) .side-fly .side-sublink{color:#5A6A85!important;background:transparent!important}
html:not([data-theme="dark"]) .side-fly .side-sublink svg{color:#7B8DB0!important}
html:not([data-theme="dark"]) .side-fly .side-sublink:hover{background:#F1F5FB!important;color:#03045E!important}
html:not([data-theme="dark"]) .side-fly .side-sublink:hover svg{color:#0077B6!important}
html[data-theme="dark"] .side-fly .side-sublink{color:rgba(241,245,249,.82)!important;background:transparent!important}
html[data-theme="dark"] .side-fly .side-sublink:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
.side-fly .side-sublink.active{
  background:linear-gradient(135deg,#0077B6 0%,#023E8A 100%)!important;color:#fff!important;
}
.side-fly .side-sublink.active svg{color:#fff!important}
.side-fly .side-sublink:focus-visible{outline:2px solid #0077B6;outline-offset:-2px}
.side-fly-out{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 11px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;text-align:left;
}
.side-fly-out svg{width:16px;height:16px;flex:none}
html:not([data-theme="dark"]) .side-fly-out{background:#F7FAFF;border:1px solid rgba(3,4,94,.1);color:#5A6A85}
html:not([data-theme="dark"]) .side-fly-out:hover{border-color:#0077B6;color:#023E8A;background:#F1F5FB}
html[data-theme="dark"] .side-fly-out{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#CAF0F8}
html[data-theme="dark"] .side-fly-out:hover{background:rgba(255,255,255,.14);color:#fff}
.side-fly-out:focus-visible{outline:2px solid #0077B6;outline-offset:2px}
/* The group icon stays lit while its menu is open. */
body.sidebar-rail:not(.auth-active) .sidebar .side-group-toggle[aria-expanded="true"]{
  background:rgba(0,119,182,.14)!important;
}

/* ---------- 4. account card while collapsed ----------
   It was being squeezed to a 24px sliver with the Log out button stacked under
   it as a stray vertical pill. Collapsed it is one avatar button; the name,
   role and Log out live in the fly-out. */
body.sidebar-rail:not(.auth-active) .side-account-card{
  width:52px!important;height:52px!important;
  /* .sidebar is a flex column that overflows, so every child is shrinkable by
     default - the card was collapsing to 2px tall no matter what height it was
     given. Nothing in a scrolling column should shrink. */
  flex:none!important;
  margin:6px auto 4px!important;padding:0!important;
  border-radius:16px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer;overflow:hidden;
  transition:background .16s,border-color .16s;
}
body.sidebar-rail:not(.auth-active) .side-account-out{display:none!important}
body.sidebar-rail:not(.auth-active) .side-account-who{
  margin:0!important;padding:0!important;gap:0!important;
}
body.sidebar-rail:not(.auth-active) .side-account-av{
  width:34px!important;height:34px!important;font-size:13px!important;flex:none!important;
}
body.sidebar-rail:not(.auth-active) .side-account-card:focus-visible{outline:2px solid #0077B6;outline-offset:2px}
html:not([data-theme="dark"]) body.sidebar-rail:not(.auth-active) .side-account-card:hover{
  background:#E4EDF9!important;border-color:rgba(0,119,182,.35)!important;
}
html[data-theme="dark"] body.sidebar-rail:not(.auth-active) .side-account-card:hover{
  background:rgba(255,255,255,.12)!important;
}
/* Reset / Clear All Data is destructive and unlabelled in a rail - keep it for
   the expanded state only rather than leaving a bare red bin icon. */
body.sidebar-rail:not(.auth-active) #sideReset{display:none!important}

/* ---------- 5. footer, matched to the floating layout ----------
   It was a full-bleed slab butted against the rail with square corners, which
   read as a different design from the cards above it. Now it is inset to the
   same gutter, rounded, and quieter than the content it follows. */
body:not(.auth-active) .ctg-phi-footer{
  margin:26px 14px 14px var(--side-x)!important;
  width:auto!important;
  border-radius:22px!important;
  padding:30px 32px 32px!important;
  transition:margin-left var(--side-dur) var(--side-ease)!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-phi-footer{
  background:linear-gradient(165deg,#F7FAFF 0%,#EEF4FC 100%)!important;
  border:1px solid rgba(3,4,94,.08)!important;
  box-shadow:0 10px 30px rgba(3,4,94,.06)!important;
}
html[data-theme="dark"] body:not(.auth-active) .ctg-phi-footer{
  background:linear-gradient(165deg,rgba(11,20,48,.92) 0%,rgba(3,4,94,.72) 100%)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.34)!important;
}
/* Its type was white-on-navy; on the light card that is invisible. */
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-phi-brand{color:#03045E!important}
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-phi-links button{color:#5A6A85!important}
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-phi-links button:hover{color:#0077B6!important}
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-phi-text{color:#6B7C99!important}
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-phi-text strong{color:#03045E!important}
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-phi-base{border-top-color:rgba(3,4,94,.1)!important}
@media(max-width:860px){
  body:not(.auth-active) .ctg-phi-footer{margin:20px 10px 10px!important;padding:22px 18px 24px!important}
}

/* Same shrink trap for the rest of the rail's fixed-size furniture: a flex
   column that overflows will compress any child that has not opted out. */
body:not(.auth-active) .side-brand,
body:not(.auth-active) .side-account-card,
body:not(.auth-active) .sidebar .side-link,
body:not(.auth-active) .sidebar .side-sublink,
body:not(.auth-active) .sidebar .side-divider,
body:not(.auth-active) .sidebar .side-section-label{flex:none!important}

/* The footer's bottom row and the gradient-filled "Group" were both drawn as
   white-on-navy; on the light card the base row was invisible at 45% white and
   the cyan wordmark had almost no contrast. */
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-phi-base{color:#7B8DB0!important}
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-phi-brand span{
  background:linear-gradient(90deg,#0077B6,#023E8A,#0077B6)!important;
  background-size:300% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}

/* Top-right controls: drop the wrapper and float them individually. The three
   controls sat inside one frosted pill, which read as a leftover fragment of
   the header bar that was removed. The container is gone and each control
   carries its own surface, so it stays legible over whatever scrolls beneath. */
body:not(.auth-active) .top-bar>div:last-child{
  background:none!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  padding:0!important;gap:10px!important;
}
body:not(.auth-active) .top-bar .ctg-theme-btn,
body:not(.auth-active) .top-bar .topbar-search,
body:not(.auth-active) .top-bar .user-chip-btn{
  backdrop-filter:blur(12px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(150%)!important;
  border-radius:999px!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .ctg-theme-btn,
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .topbar-search,
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .user-chip-btn{
  background:rgba(255,255,255,.86)!important;
  border:1px solid rgba(3,4,94,.08)!important;
  box-shadow:0 6px 18px rgba(3,4,94,.11)!important;
  color:#334155!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .ctg-theme-btn:hover,
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .topbar-search:hover,
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .user-chip-btn:hover{
  background:#fff!important;border-color:rgba(0,119,182,.3)!important;color:#03045E!important;
  box-shadow:0 10px 24px rgba(3,4,94,.15)!important;
}
html[data-theme="dark"] body:not(.auth-active) .top-bar .ctg-theme-btn,
html[data-theme="dark"] body:not(.auth-active) .top-bar .topbar-search,
html[data-theme="dark"] body:not(.auth-active) .top-bar .user-chip-btn{
  background:rgba(11,20,48,.82)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.42)!important;
}
html[data-theme="dark"] body:not(.auth-active) .top-bar .ctg-theme-btn:hover,
html[data-theme="dark"] body:not(.auth-active) .top-bar .topbar-search:hover,
html[data-theme="dark"] body:not(.auth-active) .top-bar .user-chip-btn:hover{
  background:rgba(23,37,78,.92)!important;border-color:rgba(255,255,255,.2)!important;
}
/* Keep the round button actually round rather than a stretched pill. */
body:not(.auth-active) .top-bar .ctg-theme-btn{width:38px!important;height:38px!important;padding:0!important}

body:not(.auth-active) .top-bar::after,
body:not(.auth-active) .top-bar::before{
  content:none!important;display:none!important;
}

.dash-two-row>.dash-card{display:flex;flex-direction:column}
.dash-two-row>.dash-card>.dash-mini-grid{flex:1;grid-auto-rows:1fr}
/* The tiles get taller, so their number and label centre rather than hugging
   the top of a half-empty box. */
.dash-two-row>.dash-card>.dash-mini-grid>.dash-mini{
  display:flex;flex-direction:column;justify-content:center;
}

body:not(.auth-active) .top-bar{height:56px!important}
body.sidebar-visible:not(.auth-active) .page{padding-top:56px!important}
body:not(.auth-active) .page>.wrap{padding-top:10px!important}
@media(max-width:860px){
  body:not(.auth-active) .top-bar{height:52px!important}
  body.sidebar-visible:not(.auth-active) .page{padding-top:52px!important}
}


/* ---------- the floating control group is retired ---------- */
body:not(.auth-active) .top-bar>div:last-child,
body:not(.auth-active) .top-bar .topbar-search,
body:not(.auth-active) .top-bar .user-chip{display:none!important}

/* No band. #day1Tabs still lives in the fixed strip and is the one thing that
   can still need room up there, so the padding comes back only on the two
   pages that show it - app.js already sets body.topbar-has-tabs for exactly
   that case. */
body.sidebar-visible:not(.auth-active) .page{padding-top:0!important}
body:not(.auth-active) .page>.wrap{padding-top:14px!important}
body:not(.auth-active) .top-bar{height:0!important;padding:0!important;overflow:visible!important}
body.topbar-has-tabs:not(.auth-active) .top-bar{height:56px!important;padding:0 24px!important}
body.topbar-has-tabs.sidebar-visible:not(.auth-active) .page{padding-top:56px!important}

/* ---------- theme toggle, in the sidebar ---------- */
.side-tools{padding:4px 0 6px;flex:none}
.ctg-theme-btn{
  display:flex!important;align-items:center;gap:11px;width:100%;
  padding:10px 12px!important;border-radius:12px!important;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;text-align:left;
  transition:background .16s,color .16s;
}
.ctg-theme-btn svg{width:17px;height:17px;flex:none}
/* One icon at a time: moon while light (what you would switch to), sun while dark. */
.ctg-theme-btn .ctg-sun{display:none}
html[data-theme="dark"] .ctg-theme-btn .ctg-moon{display:none}
html[data-theme="dark"] .ctg-theme-btn .ctg-sun{display:block}
.ctg-theme-label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctg-theme-switch{
  flex:none;width:34px;height:19px;border-radius:99px;position:relative;
  transition:background .18s;
}
.ctg-theme-switch i{
  position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#fff;transition:transform .18s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
html[data-theme="dark"] .ctg-theme-switch i{transform:translateX(15px)}
html:not([data-theme="dark"]) .ctg-theme-btn{background:transparent!important;color:#5A6A85!important;border:0!important}
html:not([data-theme="dark"]) .ctg-theme-btn:hover{background:#F1F5FB!important;color:#03045E!important}
html:not([data-theme="dark"]) .ctg-theme-switch{background:#CBD8E8}
html[data-theme="dark"] .ctg-theme-btn{background:transparent!important;color:rgba(241,245,249,.82)!important;border:0!important}
html[data-theme="dark"] .ctg-theme-btn:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
html[data-theme="dark"] .ctg-theme-switch{background:#0077B6}
.ctg-theme-btn:focus-visible{outline:2px solid #0077B6;outline-offset:2px}
/* Collapsed: icon only, centred, like every other rail row. */
body.sidebar-rail:not(.auth-active) .ctg-theme-btn{
  width:52px!important;margin:0 auto!important;justify-content:center!important;
  padding:11px 0!important;gap:0!important;font-size:0!important;
}
body.sidebar-rail:not(.auth-active) .ctg-theme-label,
body.sidebar-rail:not(.auth-active) .ctg-theme-switch{display:none!important}

/* The account card now opens a menu, so it reads as a control. */
body:not(.auth-active) .side-account-card{cursor:pointer}
body:not(.auth-active) .side-account-card:focus-visible{outline:2px solid #0077B6;outline-offset:2px}
.side-fly-out.is-out svg{opacity:.9}

/* The account initial was white on a 14%-white chip - fine on the old dark
   rail, invisible on the light card (both expanded and collapsed). Give it a
   solid brand fill so the letter reads in either theme. */
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-av{
  background:linear-gradient(135deg,#0077B6 0%,#023E8A 100%)!important;
  color:#fff!important;
  box-shadow:0 3px 9px rgba(0,119,182,.3)!important;
}
html[data-theme="dark"] body:not(.auth-active) .side-account-av{
  background:linear-gradient(135deg,#0096C7 0%,#023E8A 100%)!important;color:#fff!important;
}

/* Flush at 14px read cramped against the top of the window. This sits the
   content a little lower - enough to breathe, still far short of the 100px
   band it replaced. The sidebar card stays at 14px, so the offset reads as
   deliberate spacing rather than the two columns being out of alignment. */
body:not(.auth-active) .page>.wrap{padding-top:32px!important}
@media(max-width:860px){body:not(.auth-active) .page>.wrap{padding-top:20px!important}}


/* ---------- spacing rhythm ----------
   The nav is 25+ rows deep, so "generous" is bought at the group boundaries
   rather than by inflating every row - taller rows here just add scrolling,
   which is the opposite of the reference's calm. */
body:not(.auth-active) .sidebar .side-link,
body:not(.auth-active) .sidebar .side-sublink{
  margin:3px 0!important;
  /* border-radius and margin-right animate too, so the shape change on
     selection is part of the same transition as the colour. */
  transition:background .18s var(--side-ease),
             color .18s var(--side-ease),
             margin-right .22s var(--side-ease),
             border-radius .22s var(--side-ease),
             box-shadow .22s var(--side-ease)!important;
}
body:not(.auth-active) .sidebar .side-divider{
  margin-top:14px!important;margin-bottom:6px!important;
}
body:not(.auth-active) .sidebar .side-section-label{
  padding-top:8px!important;padding-bottom:8px!important;
  font-size:9.5px!important;letter-spacing:.11em!important;
}
/* A group's children read as one block, not as more top-level rows. */
body:not(.auth-active) .sidebar .side-group-body-inner{padding-bottom:2px}

/* ---------- the integrated active pill ----------
   -12px clears the card's own side padding so the fill reaches the rail's inner
   edge (the same trick .side-brand already uses to span the card). Rounded on
   the left only; the right side IS the rail edge, so it must not be. */
body:not(.auth-active) .sidebar .side-link.active,
body:not(.auth-active) .sidebar .side-sublink.active{
  margin-right:-12px!important;
  border-radius:14px 0 0 14px!important;
  position:relative!important;
  z-index:1!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link.active,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink.active{
  background:linear-gradient(135deg,#0077B6 0%,#023E8A 100%)!important;
  color:#fff!important;
  /* Shadow is cast down and to the left only - spread on the right would draw
     a seam along the very edge the pill is meant to merge into. */
  box-shadow:-6px 8px 20px -6px rgba(0,119,182,.42)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link.active,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink.active{
  background:rgba(255,255,255,.96)!important;
  color:#03045E!important;
  box-shadow:-6px 8px 20px -6px rgba(0,0,0,.34)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link.active svg,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink.active svg{
  color:#fff!important;opacity:1!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link.active svg,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink.active svg{
  color:#0077B6!important;opacity:1!important;
}

/* ---------- hover stays inset, so the two states are never confusable ----------
   The inactive row keeps its four-sided radius; the active row is the only one
   anchored to the edge. */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link:not(.active):hover,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink:not(.active):hover{
  background:#EFF4FC!important;color:#03045E!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link:not(.active):hover,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink:not(.active):hover{
  background:rgba(255,255,255,.08)!important;color:#fff!important;
}
/* Rounds 1-2 dropped the old translateX(3px) hover nudge for the floating pill;
   with an edge-anchored active row a horizontal nudge would read as the row
   trying to become active, so it stays dropped here too. */
body:not(.auth-active) .sidebar .side-link:hover,
body:not(.auth-active) .sidebar .side-sublink:hover{transform:none!important}

body.sidebar-rail:not(.auth-active) .sidebar .side-link.active,
body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active{
  margin:3px auto!important;
  border-radius:14px!important;
}
html:not([data-theme="dark"]) body.sidebar-rail:not(.auth-active) .sidebar .side-link.active,
html:not([data-theme="dark"]) body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active{
  box-shadow:0 8px 18px -6px rgba(0,119,182,.5)!important;
}
html[data-theme="dark"] body.sidebar-rail:not(.auth-active) .sidebar .side-link.active,
html[data-theme="dark"] body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active{
  box-shadow:0 8px 18px -6px rgba(0,0,0,.4)!important;
}

/* ---------- TABLET: 861-1180px ----------
   Rounds 1-2 jumped straight from the 252px desktop card to the phone drawer,
   so a tablet gave up a fifth of its width to the nav. Narrower card, same 13px
   labels - the brief asks for readable labels at this tier, not an icon rail. */
@media(min-width:861px) and (max-width:1180px){
  :root{--side-w:220px;--side-gap:12px;--side-x:244px}
  body:not(.auth-active) .sidebar{border-radius:20px!important}
  body:not(.auth-active) .sidebar .side-link{padding-left:12px!important;padding-right:12px!important}
  body:not(.auth-active) .sidebar .side-sublink{padding-left:24px!important;padding-right:12px!important}
  body:not(.auth-active) .side-brand-name{font-size:14px}
  body:not(.auth-active) .sidebar .side-link,
  body:not(.auth-active) .sidebar .side-sublink{line-height:1.3!important}
  body:not(.auth-active) .sidebar .side-link svg,
  body:not(.auth-active) .sidebar .side-sublink svg{align-self:center}
}

@media(max-width:860px){
  body:not(.auth-active) .sidebar .side-link.active,
  body:not(.auth-active) .sidebar .side-sublink.active{
    margin-right:-12px!important;
    border-radius:12px 0 0 12px!important;
  }
  /* The phone drawer is the full labelled nav even when the rail flag is set
     (round 1), so the rail's centring override must not apply at this width. */
  body.sidebar-rail:not(.auth-active) .sidebar .side-link.active,
  body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active{
    margin:3px -12px 3px 0!important;
    border-radius:12px 0 0 12px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body:not(.auth-active) .sidebar .side-link,
  body:not(.auth-active) .sidebar .side-sublink{transition:none!important}
}


/* ---------- desktop: 1181px and up ---------- */
@media(min-width:1181px){
  :root{--side-w:268px;--side-x:296px}
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link{
    padding:12px 14px!important;gap:12px!important;font-size:13.5px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink{
    padding:11px 14px 11px 30px!important;gap:12px!important;font-size:13px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link svg,
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink svg{
    width:18px!important;height:18px!important;
  }
}

/* ---------- large screens: 1600px and up ----------
   Where the user actually works. The reference's proportions only read as
   "generous" at this scale; below it they would just crowd the canvas. */
@media(min-width:1600px){
  :root{--side-w:296px;--side-x:324px}
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link{
    padding:14px 16px!important;gap:14px!important;font-size:14.5px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink{
    padding:12px 16px 12px 34px!important;gap:14px!important;font-size:13.5px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link svg,
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink svg{
    width:20px!important;height:20px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link,
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink{
    margin-top:4px!important;margin-bottom:4px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-section-label{
    font-size:10.5px!important;padding:12px 16px 8px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-divider{
    margin:18px 16px 8px!important;
  }
  /* The brand has to grow with the rail or it reads as a small logo stranded
     at the top of a wide panel. */
  body:not(.auth-active):not(.sidebar-rail) .side-brand{padding:22px 4px 18px!important}
  body:not(.auth-active):not(.sidebar-rail) .side-brand-icon{
    width:44px!important;height:44px!important;border-radius:14px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .side-brand-icon svg{width:23px!important;height:23px!important}
  body:not(.auth-active):not(.sidebar-rail) .side-brand-name{font-size:17.5px!important}
  body:not(.auth-active):not(.sidebar-rail) .side-account-card{padding:12px!important}
  body:not(.auth-active):not(.sidebar-rail) .side-account-name{font-size:13.5px!important}
}

/* ---------- the active pill scales with the rail ----------
   -12px is the card's side padding and does not change with the tier, so the
   pill stays flush at every width; only its corner radius grows so it stays
   proportional to a taller row. */
@media(min-width:1600px){
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link.active,
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink.active{
    border-radius:16px 0 0 16px!important;
  }
}

/* ---------- quieter scrollbar ----------
   The reference shows no scrollbar at all. This nav is 25+ rows so it must
   still scroll, but the permanent grey track was the most un-reference-like
   thing on the screen. Thumb fades in on hover; the track never paints. */
body:not(.auth-active) .sidebar{scrollbar-color:transparent transparent!important}
body:not(.auth-active) .sidebar:hover{scrollbar-color:rgba(3,4,94,.22) transparent!important}
html[data-theme="dark"] body:not(.auth-active) .sidebar:hover{
  scrollbar-color:rgba(202,240,248,.26) transparent!important;
}
body:not(.auth-active) .sidebar::-webkit-scrollbar-thumb{
  background:transparent!important;background-clip:content-box!important;
  transition:background .2s;
}
body:not(.auth-active) .sidebar:hover::-webkit-scrollbar-thumb{
  background:rgba(3,4,94,.2)!important;background-clip:content-box!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar:hover::-webkit-scrollbar-thumb{
  background:rgba(202,240,248,.24)!important;background-clip:content-box!important;
}


/* ---------- flush, full-height panel ---------- */
body:not(.auth-active) .sidebar{
  top:0!important;left:0!important;bottom:0!important;height:100%!important;
  border-radius:0!important;
  border:0!important;
  box-shadow:none!important;   /* any right-edge shadow re-draws the seam */
}
/* No gap any more: the content starts exactly where the rail ends, which is
   what lets the active pill meet it. --side-w is still set per tier by round 4,
   so this follows every breakpoint automatically. */
:root{--side-x:var(--side-w)}
body.sidebar-rail{--side-x:var(--rail-w)}

/* ---------- the panel, in portal colours ---------- */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar{
  /* Near-flat. A full #03045E->#0077B6 sweep made the lower half
     bright enough that the pale active pill lost contrast against it, and the
     reference's panel is a single flat colour, not a gradient. */
  background:linear-gradient(180deg,#03045E 0%,#04216B 100%)!important;
  color:rgba(202,240,248,.82)!important;
}
/* Arcs stay OFF in light theme. They were re-enabled here at first, but the
   reference's panel is clean and flat - on a solid navy rail they read as a
   smudge behind the brand rather than as a flourish. */

/* ---------- everything inside the panel flips to light-on-dark ---------- */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink{
  color:rgba(202,240,248,.82)!important;background:transparent!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link:not(.active):hover,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink:not(.active):hover{
  background:rgba(255,255,255,.10)!important;color:#fff!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link svg,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink svg{
  color:rgba(202,240,248,.72)!important;filter:none!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link:not(.active):hover svg,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink:not(.active):hover svg{
  color:#90E0EF!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-section-label{
  color:rgba(202,240,248,.45)!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-divider{
  background:rgba(255,255,255,.12)!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-group-chevron{
  color:rgba(202,240,248,.5)!important;
}
/* The sticky brand strip must be the panel's own top colour or the nav scrolls
   visibly through it (the same bug round 2 fixed for dark). */
html:not([data-theme="dark"]) .side-brand{background:#03045E!important}
html:not([data-theme="dark"]) .side-brand-name{color:#fff!important}
html:not([data-theme="dark"]) .side-brand-name span{color:#48CAE4!important}
html:not([data-theme="dark"]) .side-collapse{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#CAF0F8!important;
}
html:not([data-theme="dark"]) .side-collapse:hover{
  background:rgba(255,255,255,.2)!important;color:#fff!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-card{
  background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12)!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-name{color:#fff!important}
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-role{color:rgba(202,240,248,.6)!important}
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-out{
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.14)!important;color:#CAF0F8!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .side-account-out:hover{
  background:rgba(255,255,255,.16)!important;color:#fff!important;border-color:rgba(255,255,255,.24)!important;
}
/* Idle count chips: the inline colours in index.html were picked for a dark
   rail, so in light theme they now need the dark-rail treatment, not the pale
   one round 1 gave them. */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar #incompleteAceCount,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar #completedAceCount,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar #pendingDay2Count{
  background:rgba(255,255,255,.14)!important;color:#CAF0F8!important;
}

/* The connection. Pill fill is the page's own tone beside the rail, sampled
   between #CDEDF5 and #D8ECF4, and #D9EFF7 sits in that range, so the pill
   and the canvas read as one surface meeting at the rail edge.
   margin-right:-12px still carries it to the edge, and there is no gap left. */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link.active,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink.active{
  background:#D9EFF7!important;
  color:#03045E!important;
  font-weight:700!important;
  /* No shadow at all: a drop shadow under the pill would paint a line exactly
     where the pill is supposed to merge into the page. */
  box-shadow:none!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link.active svg,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink.active svg{
  color:#0077B6!important;opacity:1!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .active #incompleteAceCount,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .active #completedAceCount,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .active #pendingDay2Count{
  background:rgba(3,4,94,.10)!important;color:#023E8A!important;
}
/* Dark theme: keep the light pill (see the block header) but drop its shadow
   too, so the seam is clean in both themes. */
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link.active,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink.active{
  box-shadow:none!important;font-weight:700!important;
}

/* ---------- scrollbar on a dark panel ---------- */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar:hover{
  scrollbar-color:rgba(202,240,248,.28) transparent!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar:hover::-webkit-scrollbar-thumb{
  background:rgba(202,240,248,.26)!important;background-clip:content-box!important;
}

/* ---------- phone drawer keeps the flush panel ---------- */
@media(max-width:860px){
  body:not(.auth-active) .sidebar{border-radius:0!important;box-shadow:none!important}
}


:root{--frame:14px;--sheet:#EAF6FB;--ground:#03045E;--sheet-r:24px;--notch-r:16px}
html[data-theme="dark"]{--sheet:#0B1531;--ground:#050B1D}

/* ---------- 1. the ground the sheet is inset into ---------- */
body:not(.auth-active){background:var(--ground)!important}
/* Flat, so the frame reads as one colour with the rail. The near-flat gradient
   round 5 gave the rail would otherwise not match the frame beside it. */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar{background:var(--ground)!important}
html[data-theme="dark"] body:not(.auth-active) .sidebar{background:var(--ground)!important}
html:not([data-theme="dark"]) .side-brand{background:var(--ground)!important}
html[data-theme="dark"] .side-brand{background:var(--ground)!important}
/* The decorative arcs belong to the old floating rail; on a flat frame they
   break the illusion that rail and frame are one surface. */
.sidebar::after{display:none!important;content:none!important}

/* ---------- 2. the sheet ----------
   No left margin: its left edge must sit exactly on the rail's right edge, or
   the active row has nothing to be continuous with. Round 5's
   --side-x:var(--side-w) already guarantees that. */
body.sidebar-visible:not(.auth-active) .page{
  background:var(--sheet)!important;
  border-radius:var(--sheet-r)!important;
  margin-top:var(--frame)!important;
  margin-right:var(--frame)!important;
  margin-bottom:var(--frame)!important;
  min-height:calc(100vh - (var(--frame) * 2))!important;
  /* The rounded corners have to actually cut the content inside them. */
  overflow:hidden!important;
}
/* An earlier pass paints #page-dashboard.active with its own gradient and
   another sets it transparent; both outrank a plain .page rule, so the
   dashboard needs naming explicitly or it alone stays unsheeted. */
#page-dashboard.active{background:var(--sheet)!important}

/* ---------- 3. the controls move inside the sheet ----------
   Left at --side-x already; without the right/top inset the floating pills
   would hang over the frame instead of sitting on the sheet. */
body:not(.auth-active) .top-bar{
  top:var(--frame)!important;right:var(--frame)!important;padding:0 26px!important;
}
body.sidebar-visible:not(.auth-active) .action-bar{right:var(--frame)!important}
/* The footer is a sibling of .page, so it needs the same inset to stay inside
   the frame rather than sitting on bare ground. */
body.sidebar-visible:not(.auth-active) .ctg-phi-footer{
  margin-right:var(--frame)!important;margin-bottom:var(--frame)!important;
  border-radius:var(--sheet-r)!important;
}

/* ---------- 4. THE CONNECTION: the active row IS the sheet ---------- */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link.active,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink.active,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link.active,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink.active{
  background:var(--sheet)!important;
  box-shadow:none!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link.active,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink.active{
  color:#03045E!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link.active,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink.active{
  color:#EAF6FB!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link.active svg,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink.active svg{
  color:#48CAE4!important;
}

body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link.active::before,
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink.active::before{
  content:''!important;display:block!important;
  position:absolute!important;
  right:0!important;left:auto!important;
  top:calc(var(--notch-r) * -1)!important;bottom:auto!important;
  width:var(--notch-r)!important;height:var(--notch-r)!important;
  background:radial-gradient(circle var(--notch-r) at 0 0,var(--ground) 99%,var(--sheet) 100%)!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  pointer-events:none!important;
}
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link.active::after,
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink.active::after{
  content:''!important;display:block!important;
  position:absolute!important;
  right:0!important;left:auto!important;
  bottom:calc(var(--notch-r) * -1)!important;top:auto!important;
  width:var(--notch-r)!important;height:var(--notch-r)!important;
  background:radial-gradient(circle var(--notch-r) at 0 100%,var(--ground) 99%,var(--sheet) 100%)!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  pointer-events:none!important;
}
/* The rail centres its pill, and the phone drawer floats over the page - in
   neither case is there a sheet edge to be continuous with, so no corners. */
@media(max-width:860px){
  body:not(.auth-active) .sidebar .side-link.active::before,
  body:not(.auth-active) .sidebar .side-link.active::after,
  body:not(.auth-active) .sidebar .side-sublink.active::before,
  body:not(.auth-active) .sidebar .side-sublink.active::after{display:none!important}
  body.sidebar-visible:not(.auth-active) .page{
    margin-left:0!important;margin-right:0!important;margin-top:0!important;
    margin-bottom:0!important;border-radius:0!important;min-height:100vh!important;
  }
  body:not(.auth-active) .top-bar{top:0!important;right:0!important}
}


:root{--over:12px}

/* ---------- 1. no reserved scrollbar strip, in any browser ---------- */
body:not(.auth-active) .sidebar{
  scrollbar-width:none!important;      /* Firefox + Chrome standard property */
  -ms-overflow-style:none!important;   /* legacy Edge */
}
body:not(.auth-active) .sidebar::-webkit-scrollbar{
  width:0!important;height:0!important;display:none!important;
}
/* The rail still scrolls on wheel/trackpad, and the reference has no scrollbar
   either. Round 1 already accepted exactly this trade for the collapsed rail. */

/* Belt and braces: overshoot the sheet edge instead of trying to land on it.
   .sidebar is overflow-x:hidden, so the pill is clipped at the padding box
   it can never spill past the rail - but any residual reserved width, sub-pixel
   rounding or browser zoom is now covered rather than left as a hairline. */
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link.active,
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink.active{
  margin-right:calc(-12px - var(--over))!important;
  padding-right:26px!important;   /* keep the label off the clipped edge */
}
/* The corner pieces are positioned from the row's right edge, which now sits
   --over PAST the clip. Left at right:0 they would be sliced in half and the
   arc would vanish, so they are pulled back by exactly the overshoot to land
   on the sheet edge again. */
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link.active::before,
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink.active::before,
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link.active::after,
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink.active::after{
  right:var(--over)!important;
}
/* The corner pieces are positioned from that same right edge, so they follow
   the overshoot automatically - but they must not be clipped away with it,
   hence they stay inside the row's own box. */

/* ---------- 2. the footer is the same box as the sheet ---------- */
body.sidebar-visible:not(.auth-active) .page{
  border-radius:var(--sheet-r) var(--sheet-r) 0 0!important;
  margin-bottom:0!important;
  /* Leave room for the footer instead of filling the viewport on its own,
     so the pair together fill it rather than the sheet pushing the footer
     out of sight. */
  min-height:calc(100vh - var(--frame) - 210px)!important;
}
body.sidebar-visible:not(.auth-active) .ctg-phi-footer{
  margin-top:0!important;
  margin-left:var(--side-x)!important;
  margin-right:var(--frame)!important;
  margin-bottom:var(--frame)!important;
  border-radius:0 0 var(--sheet-r) var(--sheet-r)!important;
  width:auto!important;
}
/* Same fill, no border, no shadow - a border or shadow along its top edge would
   redraw the very seam this is removing. */
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-phi-footer,
html[data-theme="dark"] body:not(.auth-active) .ctg-phi-footer{
  background:var(--sheet)!important;
  border:0!important;
  box-shadow:none!important;
}
@media(max-width:860px){
  body.sidebar-visible:not(.auth-active) .page{
    border-radius:0!important;min-height:100vh!important;margin-bottom:0!important;
  }
  body.sidebar-visible:not(.auth-active) .ctg-phi-footer{
    margin:0!important;border-radius:0!important;
  }
}


/* ---------- 1. let the group's clip box reach the rail edge ----------
   Padding grows the clip box (overflow clips at the PADDING box) while the
   matching negative margin keeps the content box, so sub-item layout width is
   unchanged and only the overflow boundary moves. */
body:not(.auth-active):not(.sidebar-rail) .side-group-body-inner{
  margin-right:calc(-12px - var(--over))!important;
  padding-right:calc(12px + var(--over))!important;
}
body:not(.auth-active):not(.sidebar-rail) .side-group.open>.side-group-body>.side-group-body-inner{
  padding-top:var(--notch-r)!important;margin-top:calc(var(--notch-r) * -1)!important;
  padding-bottom:var(--notch-r)!important;margin-bottom:calc(var(--notch-r) * -1)!important;
}

body.sidebar-rail:not(.auth-active) .sidebar .side-link.active,
body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active{
  width:auto!important;
  margin:3px calc(-12px - var(--over)) 3px 0!important;
  padding:11px calc(12px + var(--over)) 11px 0!important;
  border-radius:14px 0 0 14px!important;
  justify-content:center!important;
  box-shadow:none!important;
}
/* Round 6 scoped the arcs :not(.sidebar-rail) because the pill was centred
   then. It reaches the sheet now, so they belong in both modes. */
body.sidebar-rail:not(.auth-active) .sidebar .side-link.active::before,
body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active::before{
  content:''!important;display:block!important;
  position:absolute!important;
  right:var(--over)!important;left:auto!important;
  top:calc(var(--notch-r) * -1)!important;bottom:auto!important;
  width:var(--notch-r)!important;height:var(--notch-r)!important;
  background:radial-gradient(circle var(--notch-r) at 0 0,var(--ground) 99%,var(--sheet) 100%)!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;pointer-events:none!important;
}
body.sidebar-rail:not(.auth-active) .sidebar .side-link.active::after,
body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active::after{
  content:''!important;display:block!important;
  position:absolute!important;
  right:var(--over)!important;left:auto!important;
  bottom:calc(var(--notch-r) * -1)!important;top:auto!important;
  width:var(--notch-r)!important;height:var(--notch-r)!important;
  background:radial-gradient(circle var(--notch-r) at 0 100%,var(--ground) 99%,var(--sheet) 100%)!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;pointer-events:none!important;
}

/* ---------- phones keep the plain drawer ---------- */
@media(max-width:860px){
  body:not(.auth-active) .side-group-body-inner{
    margin-right:0!important;padding-right:0!important;
    padding-top:0!important;margin-top:0!important;
    padding-bottom:0!important;margin-bottom:0!important;
  }
  body.sidebar-rail:not(.auth-active) .sidebar .side-link.active::before,
  body.sidebar-rail:not(.auth-active) .sidebar .side-link.active::after,
  body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active::before,
  body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active::after{display:none!important}
}

/* ============================================================================
   NAV REDESIGN - round 9: thinner frame, dark-mode palette, logo alignment

   ============================================================================ */

/* ---------- 1. thinner blue border around the sheet ----------
   One variable drives the frame on all three sides plus the top bar, action bar
   and footer insets, so this is the only value that has to change. */
:root{--frame:10px}

html[data-theme="dark"]{--ground:#03045E;--sheet:#070E24}
/* On a saturated navy rail the idle nav needs a touch more light than it did
   against near-black, or the labels sink into the panel. */
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink{
  color:rgba(214,240,252,.86)!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link svg,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink svg{
  color:rgba(214,240,252,.78)!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-section-label{
  color:rgba(202,240,248,.5)!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-divider{
  background:rgba(255,255,255,.14)!important;
}
/* The active row is the sheet, so in dark it is DARKER than the rail it sits
   in - the notch reads as the page cut into the panel, which is the same
   gesture as the light theme, not an inversion of it. */
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link.active,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink.active{
  color:#EAF6FB!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-link.active svg,
html[data-theme="dark"] body:not(.auth-active) .sidebar .side-sublink.active svg{
  color:#48CAE4!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar .active #incompleteAceCount,
html[data-theme="dark"] body:not(.auth-active) .sidebar .active #completedAceCount,
html[data-theme="dark"] body:not(.auth-active) .sidebar .active #pendingDay2Count{
  background:rgba(255,255,255,.14)!important;color:#CAF0F8!important;
}

/* 2px less than the nav-icon inset at each tier: .side-brand-mark carries its
   own padding:2px, so the mark lands exactly on the icon column. Verified by
   comparing getBoundingClientRect().left of .side-brand-icon against the
   Dashboard row's svg. */
body:not(.auth-active):not(.sidebar-rail) .side-brand{
  padding-left:24px!important;padding-right:16px!important;
}
@media(min-width:1600px){
  body:not(.auth-active):not(.sidebar-rail) .side-brand{
    padding-left:26px!important;padding-right:18px!important;
  }
}
@media(min-width:861px) and (max-width:1180px){
  body:not(.auth-active):not(.sidebar-rail) .side-brand{padding-left:22px!important}
}


/* ---------- 1. the bar starts where the sheet starts ---------- */
body.sidebar-visible:not(.auth-active) .top-bar{
  left:var(--side-x)!important;
  right:var(--frame)!important;
  top:var(--frame)!important;
}
@media(max-width:860px){
  body.sidebar-visible:not(.auth-active) .top-bar{left:0!important;right:0!important;top:0!important}
}

/* ---------- 2. the action bar sits inside the frame ---------- */
body.sidebar-visible:not(.auth-active) .action-bar{
  bottom:var(--frame)!important;
  left:var(--side-x)!important;
  right:var(--frame)!important;
  border-radius:0 0 var(--sheet-r) var(--sheet-r)!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .action-bar{
  background:#fff!important;
  border-top:1px solid rgba(3,4,94,.10)!important;
  box-shadow:0 -8px 24px rgba(3,4,94,.08)!important;
}
html[data-theme="dark"] body:not(.auth-active) .action-bar{
  background:#0B1531!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 -8px 24px rgba(0,0,0,.4)!important;
}
@media(max-width:860px){
  body.sidebar-visible:not(.auth-active) .action-bar{
    bottom:0!important;left:0!important;right:0!important;border-radius:0!important;
  }
}

/* ---------- 3. give the floating controls an edge on the sheet ----------
   rgba(255,255,255,.82) over #EAF6FB is all but the same value, which is why
   the group read as an empty white bar. Solid white plus a real border
   separates it from the sheet without changing the layout. */
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar>div:last-child,
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar #day1Tabs{
  background:#fff!important;
  border:1px solid rgba(3,4,94,.10)!important;
  box-shadow:0 6px 18px rgba(3,4,94,.10)!important;
}
html[data-theme="dark"] body:not(.auth-active) .top-bar>div:last-child,
html[data-theme="dark"] body:not(.auth-active) .top-bar #day1Tabs{
  background:#0B1531!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.44)!important;
}
/* The search field was white on white inside a white pill - three surfaces,
   no edges. Tint it so the input reads as an input. */
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .topbar-search{
  background:#F1F7FC!important;
  border:1px solid rgba(3,4,94,.10)!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .topbar-search:hover{
  background:#E8F2FA!important;border-color:rgba(3,4,94,.18)!important;
}
html[data-theme="dark"] body:not(.auth-active) .top-bar .topbar-search{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}

/* ---------- 4. the form's own sticky strip clears the floating bar ----------
   #aceProgressStrip sits at the top of the Day 1 form; with the bar floating
   over the sheet it needs the same clearance the page already reserves. */
body.topbar-has-tabs.sidebar-visible:not(.auth-active) .page{padding-top:64px!important}

/* ---------- 5. the Day 1 section tabs, readable on the sheet ----------
   Base `.tab` (styles.css line ~18) is white-on-transparent with a white
   border: correct for the old dark bar, invisible on the light pill. */
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .tab{
  background:#F1F7FC!important;
  border:1px solid rgba(3,4,94,.12)!important;
  color:#5A6A85!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .tab:hover{
  background:#E4EDF9!important;color:#03045E!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .tab.active{
  background:linear-gradient(135deg,#0077B6 0%,#023E8A 100%)!important;
  border-color:transparent!important;color:#fff!important;font-weight:700!important;
  box-shadow:0 3px 10px rgba(0,119,182,.32)!important;
}
/* "done" must stay distinct from both idle and active - it is how a user sees
   which of the seven sections are already filled in. */
html:not([data-theme="dark"]) body:not(.auth-active) .top-bar .tab.done{
  background:#DFF3E6!important;border-color:rgba(22,124,74,.24)!important;color:#186B45!important;
}
html[data-theme="dark"] body:not(.auth-active) .top-bar .tab{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:rgba(214,240,252,.78)!important;
}
html[data-theme="dark"] body:not(.auth-active) .top-bar .tab:hover{
  background:rgba(255,255,255,.13)!important;color:#fff!important;
}
html[data-theme="dark"] body:not(.auth-active) .top-bar .tab.active{
  background:#48CAE4!important;border-color:#48CAE4!important;color:#03045E!important;font-weight:700!important;
}
html[data-theme="dark"] body:not(.auth-active) .top-bar .tab.done{
  background:rgba(0,180,216,.22)!important;border-color:rgba(0,180,216,.38)!important;color:#90E0EF!important;
}

/* ============================================================================
   NAV REDESIGN - round 11: sticky regression, Day 1 spacing, bigger tabs

   ============================================================================ */

body.sidebar-visible:not(.auth-active) .page{overflow:visible!important}

/* The strip is sticky against the viewport again, so it has to clear the
   floating top bar rather than the old solid one: frame + bar height. */
body.topbar-has-tabs:not(.auth-active) #aceProgressStrip{
  top:calc(var(--frame) + 66px)!important;
}

/* ---------- 2. air between the progress strip and the patient strip ---------- */
body:not(.auth-active) #aceProgressStrip{margin-bottom:26px!important}

body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs{
  flex:0 1 auto!important;
  min-width:0!important;
  margin:0 auto!important;
  justify-content:center!important;
  gap:8px!important;
  padding:7px 10px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs::-webkit-scrollbar{display:none}
body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs .tab{
  /* Natural width, not stretched - bigger buttons, but only as wide as they
     need to be, so seven of them cannot force an overflow. */
  flex:0 0 auto!important;
  min-width:0!important;
  text-align:center!important;
  font-size:13px!important;
  font-weight:600!important;
  padding:11px 20px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
}
/* Below this the seven labels cannot all be read at once; let them size to
   their text and scroll instead of squeezing every one to nothing. */
@media(max-width:1400px){
  body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs .tab{
    padding:9px 14px!important;font-size:12px!important;
  }
  body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs{margin:0 12px!important}
}


#ctgFrame{
  position:fixed;
  top:var(--frame);left:var(--side-x);right:var(--frame);bottom:var(--frame);
  border-radius:var(--sheet-r);
  /* Paints the ground outward from the hole in every direction. The spread has
     to beat the largest viewport dimension; 200vmax is comfortably past it. */
  box-shadow:0 0 0 200vmax var(--ground);
  pointer-events:none;          /* never swallow a click meant for the page */
  z-index:100;                  /* above content (1), below the rail (200) */
  transition:left var(--side-dur) var(--side-ease);
}
/* The login screen keeps its own full-bleed treatment. */
body.auth-active #ctgFrame{display:none!important}
@media(prefers-reduced-motion:reduce){#ctgFrame{transition:none}}

/* ---------- the sheet is now the canvas, the overlay does the framing ----------
   .page no longer carries the fill, the radius or the three margins: the hole
   in #ctgFrame defines all of that, and anything .page painted itself would
   scroll away again. */
body:not(.auth-active){background:var(--sheet)!important}
body.sidebar-visible:not(.auth-active) .page{
  background:transparent!important;
  border-radius:0!important;
  margin-top:0!important;margin-right:0!important;margin-bottom:0!important;
  min-height:calc(100vh - (var(--frame) * 2))!important;
  padding-bottom:24px!important;
}
#page-dashboard.active{background:transparent!important}
/* Same for the footer: it sits on the shared canvas now, so it needs no fill,
   no radius and no inset of its own - it is simply the bottom of the sheet. */
body.sidebar-visible:not(.auth-active) .ctg-phi-footer{
  background:transparent!important;
  border:0!important;box-shadow:none!important;
  border-radius:0!important;
  margin-right:0!important;margin-bottom:0!important;
}

/* Content must clear the frame's rounded corners rather than run under them. */
body:not(.auth-active) .page>.wrap{
  padding-left:max(40px,calc(var(--sheet-r) + 8px))!important;
  padding-right:max(40px,calc(var(--sheet-r) + 8px))!important;
}

@media(max-width:860px){
  #ctgFrame{display:none!important}
  body.sidebar-visible:not(.auth-active) .page{min-height:100vh!important}
  body:not(.auth-active) .page>.wrap{padding-left:18px!important;padding-right:18px!important}
}

/* ---------- frame thickness, on request ----------
   10px -> 18px. This one value drives the #ctgFrame overlay inset, the top-bar
   and action-bar insets and the page's min-height, so nothing else changes. */
:root{--frame:18px}



:root{--rail-top:#03045E;--rail-bot:#0077B6}

/* The rail carries the gradient in both themes; dark simply starts deeper. */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar,
html[data-theme="dark"] body:not(.auth-active) .sidebar{
  background:linear-gradient(180deg,var(--rail-top) 0%,var(--rail-bot) 100%)!important;
}
html[data-theme="dark"]{--rail-top:#01021F;--rail-bot:#023E8A}
/* The brand strip is sticky, so it must match the gradient's TOP stop exactly
   or the nav scrolls through a visible band behind the logo. */
html:not([data-theme="dark"]) .side-brand,
html[data-theme="dark"] .side-brand{background:var(--rail-top)!important}

/* The :not(.sidebar-rail) is load-bearing, not decoration: round 6's arc rules
   carry it, which makes them (0,4,2) against a bare (0,3,2) here - without it
   this rule loses and the flat-ground arc keeps painting, showing as a dark
   square against the gradient. Same specificity trap as the round-1 pill. */
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link.active::before,
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink.active::before,
body.sidebar-rail:not(.auth-active) .sidebar .side-link.active::before,
body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active::before{
  background:radial-gradient(circle var(--notch-r) at 0 0,transparent 99%,var(--sheet) 100%)!important;
}
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link.active::after,
body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink.active::after,
body.sidebar-rail:not(.auth-active) .sidebar .side-link.active::after,
body.sidebar-rail:not(.auth-active) .sidebar .side-sublink.active::after{
  background:radial-gradient(circle var(--notch-r) at 0 100%,transparent 99%,var(--sheet) 100%)!important;
}

html:not([data-theme="dark"]) body:not(.auth-active) .sidebar{
  background:linear-gradient(180deg,var(--rail-top) 0%,#023E8A 45%,var(--rail-bot) 100%)!important;
}
html[data-theme="dark"] body:not(.auth-active) .sidebar{
  background:linear-gradient(180deg,var(--rail-top) 0%,#012A63 45%,var(--rail-bot) 100%)!important;
}

/* ---------- rail states, on the palette's three light tones ---------- */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink{
  color:#CAF0F8!important;                     /* Light Cyan */
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link svg,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink svg{
  color:#90E0EF!important;                     /* Frosted Blue */
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link:not(.active):hover svg,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink:not(.active):hover svg{
  color:#CAF0F8!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-section-label{
  color:rgba(144,224,239,.72)!important;       /* Frosted Blue, dimmed */
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-group-chevron{
  color:rgba(202,240,248,.62)!important;
}
/* Active row keeps the sheet fill; its icon takes Turquoise Surf so the
   selected item reads against the light pill. */
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link.active svg,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink.active svg{
  color:#00B4D8!important;                     /* Turquoise Surf */
}
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-link.active,
html:not([data-theme="dark"]) body:not(.auth-active) .sidebar .side-sublink.active{
  color:#03045E!important;                     /* Deep Twilight */
}
/* The brand mark uses the same two stops as the rail, rotated, so it reads as
   part of the gradient rather than a chip stuck on it. */
.side-brand-icon{
  background:linear-gradient(135deg,#00B4D8 0%,#0077B6 55%,#03045E 100%)!important;
  box-shadow:0 6px 16px rgba(0,180,216,.34)!important;
}


/* ============================================================================
   NAV REDESIGN - round 14: page transition, login header, glass login

   ============================================================================ */

@keyframes ctgSheetOut{
  from{opacity:0;transform:scale(.985)}
  to{opacity:1;transform:none}
}
body.sidebar-visible:not(.auth-active) .page.active>.wrap{
  animation:ctgSheetOut .34s cubic-bezier(.22,1,.36,1) both!important;
  transform-origin:50% 22%!important;
  will-change:transform,opacity;
}
@media(prefers-reduced-motion:reduce){
  body.sidebar-visible:not(.auth-active) .page.active>.wrap{animation:none!important}
}

/* ---------- 2. the login screen loses its header bar ----------
   .top-bar is z-index:1100, ABOVE the auth overlay's 1000, which is the only
   reason it was visible on the sign-in screen at all. The brand already appears
   on the card itself, so the strip was a duplicate. */
body.auth-active .top-bar{display:none!important}
/* The overlay was pinned at top:54px so it would start BELOW that header. With
   the header gone it has to cover the whole viewport, or a 54px band of the
   signed-in app shows above the sign-in screen. */
body.auth-active .auth-overlay,
.auth-overlay{top:0!important;inset:0!important}

/* ---------- 3. glassmorphism sign-in ----------
   Structure and copy are untouched; this is purely the surface. Ground is the
   palette's Deep Twilight with Bright Teal / Turquoise / Frosted blooms behind
   the glass, so the blur has something to refract. */
body.auth-active .auth-overlay,
.auth-overlay{
  background:#03045E!important;
  overflow:hidden!important;
}
.auth-overlay::before,
.auth-overlay::after{
  content:''!important;display:block!important;
  position:absolute!important;
  border-radius:50%!important;
  filter:blur(90px)!important;
  pointer-events:none!important;
  z-index:0!important;
}
/* Two large blooms, off-centre and overlapping the card, so the
   frosted panel sits ON the colour rather than beside it. */
.auth-overlay::before{
  width:760px!important;height:760px!important;
  left:-120px!important;top:-160px!important;
  background:radial-gradient(circle at 30% 30%,#00B4D8 0%,rgba(0,180,216,0) 70%)!important;
  opacity:.85!important;
}
.auth-overlay::after{
  width:820px!important;height:820px!important;
  right:-160px!important;bottom:-200px!important;
  background:radial-gradient(circle at 60% 60%,#0077B6 0%,rgba(0,119,182,0) 72%)!important;
  opacity:.9!important;
}

.auth-card{
  position:relative!important;z-index:1!important;
  background:rgba(202,240,248,.10)!important;
  backdrop-filter:blur(26px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(150%)!important;
  border:1px solid rgba(202,240,248,.26)!important;
  border-radius:26px!important;
  box-shadow:0 30px 80px rgba(1,2,40,.55),inset 0 1px 0 rgba(255,255,255,.22)!important;
  overflow:hidden!important;
}
/* The hero was a solid navy block; on glass it becomes a tinted band so the
   card reads as one continuous pane. */
.auth-hero{
  background:linear-gradient(135deg,rgba(0,180,216,.22) 0%,rgba(0,119,182,.14) 100%)!important;
  border-bottom:1px solid rgba(202,240,248,.18)!important;
}
.auth-body{background:transparent!important}
.auth-logo{color:#fff!important}
.auth-logo span{color:#90E0EF!important}
.auth-sub{color:rgba(202,240,248,.78)!important}
.auth-icon{
  background:linear-gradient(135deg,#00B4D8 0%,#0077B6 100%)!important;
  color:#fff!important;border-color:rgba(202,240,248,.3)!important;
  box-shadow:0 8px 20px rgba(0,180,216,.35)!important;
}
.auth-pill{
  background:rgba(202,240,248,.14)!important;
  border:1px solid rgba(202,240,248,.24)!important;
  color:#CAF0F8!important;
}
/* Fields: translucent, light text, teal focus ring. */
.auth-field{
  background:rgba(3,4,94,.24)!important;
  border:1px solid rgba(202,240,248,.22)!important;
}
.auth-field:focus-within{
  border-color:#00B4D8!important;
  box-shadow:0 0 0 3px rgba(0,180,216,.26)!important;
}
.auth-field label{color:rgba(202,240,248,.72)!important}
.auth-field input{color:#fff!important;background:transparent!important}
.auth-field input::placeholder{color:rgba(202,240,248,.45)!important}
.auth-btn{
  background:linear-gradient(135deg,#00B4D8 0%,#0077B6 100%)!important;
  color:#fff!important;border:0!important;
  box-shadow:0 12px 28px rgba(0,180,216,.38)!important;
}
.auth-btn:hover{
  background:linear-gradient(135deg,#48CAE4 0%,#0096C7 100%)!important;
  box-shadow:0 16px 34px rgba(0,180,216,.46)!important;
}
.auth-forgot-link{color:#90E0EF!important}
.auth-forgot-link:hover{color:#CAF0F8!important}
.auth-phi-link{
  background:rgba(202,240,248,.08)!important;
  border:1px solid rgba(202,240,248,.2)!important;
  color:#CAF0F8!important;
}
.auth-phi-link:hover{background:rgba(202,240,248,.16)!important}
.auth-note,.auth-foot{color:rgba(202,240,248,.66)!important}
.auth-note a,.auth-foot a,.auth-note strong{color:#90E0EF!important}
.auth-role-hint{
  background:rgba(0,180,216,.14)!important;
  border:1px solid rgba(0,180,216,.28)!important;color:#CAF0F8!important;
}
/* Errors stay red - this is the one place the palette must not win. */
.auth-err{
  background:rgba(220,38,38,.16)!important;
  border:1px solid rgba(248,113,113,.42)!important;
  color:#FECACA!important;
}



#ctgFrame{
  /* The hole is defined by the mask now, so the box is the whole viewport. */
  top:0!important;left:0!important;right:0!important;bottom:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:linear-gradient(180deg,var(--rail-top) 0%,#023E8A 45%,var(--rail-bot) 100%)!important;

  --m-corner-tl:radial-gradient(circle var(--sheet-r) at 100% 100%,transparent 99%,#000 100%);
  --m-corner-tr:radial-gradient(circle var(--sheet-r) at 0 100%,transparent 99%,#000 100%);
  --m-corner-bl:radial-gradient(circle var(--sheet-r) at 100% 0,transparent 99%,#000 100%);
  --m-corner-br:radial-gradient(circle var(--sheet-r) at 0 0,transparent 99%,#000 100%);

  -webkit-mask-image:
    linear-gradient(#000 0 0),linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),linear-gradient(#000 0 0),
    var(--m-corner-tl),var(--m-corner-tr),var(--m-corner-bl),var(--m-corner-br);
  mask-image:
    linear-gradient(#000 0 0),linear-gradient(#000 0 0),
    linear-gradient(#000 0 0),linear-gradient(#000 0 0),
    var(--m-corner-tl),var(--m-corner-tr),var(--m-corner-bl),var(--m-corner-br);

  -webkit-mask-size:
    100% var(--frame),100% var(--frame),
    var(--side-x) 100%,var(--frame) 100%,
    var(--sheet-r) var(--sheet-r),var(--sheet-r) var(--sheet-r),
    var(--sheet-r) var(--sheet-r),var(--sheet-r) var(--sheet-r);
  mask-size:
    100% var(--frame),100% var(--frame),
    var(--side-x) 100%,var(--frame) 100%,
    var(--sheet-r) var(--sheet-r),var(--sheet-r) var(--sheet-r),
    var(--sheet-r) var(--sheet-r),var(--sheet-r) var(--sheet-r);

  -webkit-mask-position:
    left 0 top 0,left 0 bottom 0,
    left 0 top 0,right 0 top 0,
    left var(--side-x) top var(--frame),right var(--frame) top var(--frame),
    left var(--side-x) bottom var(--frame),right var(--frame) bottom var(--frame);
  mask-position:
    left 0 top 0,left 0 bottom 0,
    left 0 top 0,right 0 top 0,
    left var(--side-x) top var(--frame),right var(--frame) top var(--frame),
    left var(--side-x) bottom var(--frame),right var(--frame) bottom var(--frame);

  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
html[data-theme="dark"] #ctgFrame{
  background:linear-gradient(180deg,var(--rail-top) 0%,#012A63 45%,var(--rail-bot) 100%)!important;
}



/* ---------- vivid blooms, positioned to sit behind the card ---------- */
.auth-overlay::before{
  width:1000px!important;height:1000px!important;
  left:calc(50% - 720px)!important;top:calc(50% - 620px)!important;
  background:radial-gradient(circle at 50% 50%,#00B4D8 0%,rgba(0,180,216,.55) 42%,rgba(0,180,216,0) 72%)!important;
  filter:blur(110px)!important;opacity:1!important;
}
.auth-overlay::after{
  width:1100px!important;height:1100px!important;
  left:calc(50% + 40px)!important;top:calc(50% - 300px)!important;
  right:auto!important;bottom:auto!important;
  background:radial-gradient(circle at 50% 50%,#0077B6 0%,rgba(72,202,228,.5) 40%,rgba(0,119,182,0) 72%)!important;
  filter:blur(110px)!important;opacity:1!important;
}
/* A third bloom, on the overlay's own child, so the glass has colour on both
   sides rather than a single wash. */
.auth-overlay .auth-card::after{
  content:''!important;position:fixed!important;
  width:760px!important;height:760px!important;
  left:calc(50% - 180px)!important;top:calc(50% + 40px)!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 50% 50%,#90E0EF 0%,rgba(144,224,239,0) 70%)!important;
  filter:blur(120px)!important;opacity:.55!important;
  z-index:-1!important;pointer-events:none!important;
}

/* ---------- the card: wide, two-panel, properly transparent ---------- */
.auth-card{
  display:flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
  width:min(94vw,1080px)!important;
  max-width:1080px!important;
  background:rgba(255,255,255,.09)!important;
  backdrop-filter:blur(30px) saturate(165%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(165%)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:28px!important;
  box-shadow:0 40px 100px rgba(1,2,40,.6),inset 0 1px 0 rgba(255,255,255,.35)!important;
  overflow:visible!important;      /* the third bloom escapes the card */
  position:relative!important;
}

/* ---------- left panel: the brand statement ---------- */
.auth-hero{
  flex:1 1 44%!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  gap:22px!important;
  padding:60px 48px!important;
  background:transparent!important;
  border-bottom:0!important;
  border-right:1px solid rgba(255,255,255,.16)!important;
}
.auth-hero-top{display:block!important}
.auth-icon{
  width:54px!important;height:54px!important;border-radius:16px!important;
  margin-bottom:20px!important;
}
.auth-logo{
  font-size:44px!important;line-height:1.05!important;font-weight:800!important;
  letter-spacing:-.02em!important;color:#fff!important;
}
.auth-logo span{color:#90E0EF!important}
/* The reference's short gradient rule under the heading. */
.auth-brand-copy{position:relative!important}
.auth-sub{
  color:rgba(202,240,248,.8)!important;font-size:14px!important;margin-top:14px!important;
  padding-top:18px!important;position:relative!important;
}
.auth-sub::before{
  content:''!important;position:absolute!important;left:0!important;top:0!important;
  width:96px!important;height:4px!important;border-radius:99px!important;
  background:linear-gradient(90deg,#00B4D8 0%,#90E0EF 60%,#CAF0F8 100%)!important;
}
.auth-hero-foot{margin-top:6px!important;display:flex!important;flex-wrap:wrap!important;gap:8px!important}

/* ---------- right panel: the form ---------- */
.auth-body{
  flex:1 1 56%!important;
  padding:60px 48px!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;
}

/* ---------- underline fields, not boxes ---------- */
.auth-field{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(202,240,248,.38)!important;
  border-radius:0!important;
  padding:6px 2px 8px!important;
  transition:border-color .18s,box-shadow .18s!important;
}
.auth-field:focus-within{
  border-bottom-color:#48CAE4!important;
  box-shadow:0 2px 0 -1px rgba(72,202,228,.5)!important;
}
.auth-field label{
  color:rgba(202,240,248,.62)!important;
  font-size:10.5px!important;letter-spacing:.1em!important;
}
.auth-field input{
  color:#fff!important;background:transparent!important;
  font-size:15px!important;padding:6px 0 2px!important;
}
.auth-field input::placeholder{color:rgba(202,240,248,.4)!important}

.auth-btn{
  border-radius:14px!important;
  padding:15px 20px!important;font-size:15px!important;font-weight:700!important;
  margin-top:4px!important;
}
.auth-phi-link{border-radius:12px!important}

/* ---------- narrow screens: back to a single column ---------- */
@media(max-width:860px){
  .auth-card{flex-direction:column!important;width:min(94vw,460px)!important}
  .auth-hero{
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.16)!important;
    padding:34px 28px!important;
  }
  .auth-body{padding:30px 28px 34px!important}
  .auth-logo{font-size:30px!important}
  .auth-overlay .auth-card::after{display:none!important}
}

#authOverlay .auth-card .auth-field label{
  color:rgba(202,240,248,.66)!important;
  font-size:10.5px!important;letter-spacing:.11em!important;font-weight:700!important;
}
#authOverlay .auth-card .auth-hint,
#authOverlay .auth-card .auth-hint *{
  color:rgba(202,240,248,.62)!important;
}
#authOverlay .auth-card .auth-hint a,
#authOverlay .auth-card .auth-hint strong,
#authOverlay .auth-card .auth-hint b{color:#90E0EF!important}
#authOverlay .auth-card .ctg-pw-toggle{color:rgba(202,240,248,.6)!important}
#authOverlay .auth-card .ctg-pw-toggle:hover{color:#CAF0F8!important}
#authOverlay .auth-card .auth-forgot-link{color:#90E0EF!important}

#authOverlay .auth-card .auth-field{
  background:transparent!important;
  border-top:0!important;border-left:0!important;border-right:0!important;
  border-bottom:1px solid rgba(202,240,248,.38)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:6px 2px 8px!important;
}
#authOverlay .auth-card .auth-field:focus-within{
  border-bottom-color:#48CAE4!important;
  box-shadow:0 1px 0 0 rgba(72,202,228,.55)!important;
}

@media(min-width:861px){
  body:not(.auth-active) .page>.wrap,
  body:not(.auth-active) #page-appointment.page>.wrap.appt-page-wrap{
    padding-left:40px!important;
    padding-right:40px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media(min-width:861px){
  body.sidebar-visible:not(.auth-active) .page{
    margin-right:var(--frame)!important;
    padding-bottom:calc(24px + var(--frame))!important;
  }
}



#authOverlay,
body.auth-active #authOverlay{
  background:#EFF7FC!important;
}
/* Soft blooms - still behind the card, still the palette, just gentler. */
#authOverlay::before{
  background:radial-gradient(circle at 50% 50%,rgba(0,180,216,.55) 0%,rgba(0,180,216,.16) 44%,rgba(0,180,216,0) 72%)!important;
  opacity:1!important;
}
#authOverlay::after{
  background:radial-gradient(circle at 50% 50%,rgba(0,119,182,.42) 0%,rgba(72,202,228,.18) 42%,rgba(0,119,182,0) 72%)!important;
  opacity:1!important;
}
#authOverlay .auth-card::after{
  background:radial-gradient(circle at 50% 50%,rgba(144,224,239,.55) 0%,rgba(144,224,239,0) 70%)!important;
  opacity:.75!important;
}

/* ---------- the card: frosted white ---------- */
#authOverlay .auth-card{
  background:rgba(255,255,255,.62)!important;
  backdrop-filter:blur(28px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(150%)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 30px 80px rgba(3,4,94,.16),0 2px 8px rgba(3,4,94,.06),
             inset 0 1px 0 rgba(255,255,255,.95)!important;
}
#authOverlay .auth-hero{
  background:linear-gradient(135deg,rgba(255,255,255,.45) 0%,rgba(202,240,248,.28) 100%)!important;
  border-right-color:rgba(3,4,94,.10)!important;
}
#authOverlay .auth-body{background:transparent!important}

/* ---------- type ---------- */
#authOverlay .auth-logo{color:#03045E!important}
#authOverlay .auth-logo span{color:#0077B6!important}
#authOverlay .auth-sub{color:#5A6A85!important}
#authOverlay .auth-pill{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(3,4,94,.10)!important;
  color:#023E8A!important;
}
#authOverlay .auth-card .auth-field label{color:#7B8DB0!important}
#authOverlay .auth-card .auth-field{
  border-bottom-color:rgba(3,4,94,.20)!important;
}
#authOverlay .auth-card .auth-field:focus-within{
  border-bottom-color:#0077B6!important;
  box-shadow:0 1px 0 0 rgba(0,119,182,.45)!important;
}
#authOverlay .auth-card .auth-field input{color:#03045E!important}
#authOverlay .auth-card .auth-field input::placeholder{color:#9AABC4!important}
#authOverlay .auth-card .ctg-pw-toggle{color:#7B8DB0!important}
#authOverlay .auth-card .ctg-pw-toggle:hover{color:#0077B6!important}
#authOverlay .auth-card .auth-forgot-link{color:#0077B6!important}
#authOverlay .auth-card .auth-forgot-link:hover{color:#023E8A!important}
#authOverlay .auth-card .auth-hint,
#authOverlay .auth-card .auth-hint *{color:#6B7C99!important}
#authOverlay .auth-card .auth-hint a,
#authOverlay .auth-card .auth-hint strong,
#authOverlay .auth-card .auth-hint b{color:#0077B6!important}
#authOverlay .auth-phi-link{
  background:rgba(255,255,255,.7)!important;
  border:1px solid rgba(3,4,94,.12)!important;
  color:#023E8A!important;
}
#authOverlay .auth-phi-link:hover{background:#fff!important;border-color:#0077B6!important}
#authOverlay .auth-role-hint{
  background:rgba(0,180,216,.12)!important;
  border:1px solid rgba(0,180,216,.30)!important;color:#023E8A!important;
}
/* The button already reads on light - it is the one saturated element and the
   page's only primary action, so it stays as is. */

/* Error keeps real red, now tuned for a light card. */
#authOverlay .auth-err{
  background:rgba(220,38,38,.10)!important;
  border:1px solid rgba(220,38,38,.32)!important;
  color:#B91C1C!important;
}

#authOverlay .auth-card .auth-hero{
  border-radius:28px 0 0 28px!important;
}
@media(max-width:860px){
  /* Stacked, the hero is the TOP panel, so the rounding moves with it. */
  #authOverlay .auth-card .auth-hero{border-radius:28px 28px 0 0!important}
}


/* ============================================================================
   ROUND 19 - content drops below the bar, iOS lettering, bigger tiles,
   right-to-left reveal
   ============================================================================ */

/* 1. Content was sitting under the floating top bar. Measured: the bar
   occupies y = --frame to --frame+56, but .page had padding-top:0 and .wrap
   only 32px, so the first card started at y=32 inside the bar's band. .page
   now reserves the bar's full height plus breathing room. */
@media(min-width:861px){
  body.sidebar-visible:not(.auth-active) .page{
    padding-top:calc(var(--frame) + 62px)!important;
  }
  body.topbar-has-tabs.sidebar-visible:not(.auth-active) .page{
    padding-top:calc(var(--frame) + 66px)!important;
  }
  /* Appointments used a 10px wrap padding-top against every other page's 32px
 - the same id-scoped rule that held its side padding at 16px. */
  body:not(.auth-active) .page>.wrap,
  body:not(.auth-active) #page-appointment.page>.wrap.appt-page-wrap{
    padding-top:26px!important;
  }
}

/* ---------- 2. iOS lettering ----------
   -apple-system/SF first so Apple devices get the real thing; Inter next,
   which is the closest match available on Windows and is already loaded. */
body:not(.auth-active),
body:not(.auth-active) button,
body:not(.auth-active) input,
body:not(.auth-active) select,
body:not(.auth-active) textarea,
body:not(.auth-active) .card,
body:not(.auth-active) .page,
body:not(.auth-active) .sidebar,
body:not(.auth-active) .top-bar,
#authOverlay,#authOverlay *{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',
              'Inter','Segoe UI',system-ui,'Plus Jakarta Sans',sans-serif!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.011em;          /* SF sits very slightly tighter */
}
/* The on-screen document / PDF preview keeps its own face - changing it would
   change printed output, which is explicitly out of scope. Declared after the
   sweep above so it wins. */
.ds-paper,.ds-paper *,.ds-field,.ds-field *{
  font-family:'Inter',Arial,sans-serif!important;letter-spacing:normal!important;
}
/* The serif brand marks are deliberate and stay. */
.side-brand-name,.auth-logo,.ctg-phi-brand,.logo{
  font-family:'Instrument Serif',serif!important;letter-spacing:normal!important;
}

/* ---------- 3. bigger text in the content area ----------
   Most of the app sets explicit px, so this lifts the inherited base and the
   controls; anything with its own px size keeps it. */
@media(min-width:861px){
  body:not(.auth-active) .page>.wrap{font-size:15.5px!important}
  body:not(.auth-active) .page input,
  body:not(.auth-active) .page select,
  body:not(.auth-active) .page textarea,
  body:not(.auth-active) .page button{font-size:14.5px!important}
}

/* ---------- 4. bigger nav tiles ---------- */
@media(min-width:1181px){
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link{
    padding:14px 16px!important;font-size:15px!important;gap:13px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink{
    padding:13px 16px 13px 32px!important;font-size:14.5px!important;gap:13px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link svg,
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink svg{
    width:20px!important;height:20px!important;
  }
}
@media(min-width:1600px){
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link{
    padding:16px 18px!important;font-size:16px!important;gap:15px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink{
    padding:14px 18px 14px 38px!important;font-size:15px!important;gap:15px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-link svg,
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-sublink svg{
    width:22px!important;height:22px!important;
  }
  body:not(.auth-active):not(.sidebar-rail) .sidebar .side-section-label{
    font-size:11px!important;
  }
}

/* ---------- 5. the reveal runs right to left ----------
   Previously a centre-origin scale. The content now enters from the right and
   settles leftwards, with the origin on the right edge so it reads as the sheet
   opening out from the content side rather than arriving from nowhere. */
@keyframes ctgSheetRTL{
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:none}
}
body.sidebar-visible:not(.auth-active) .page.active>.wrap{
  animation:ctgSheetRTL .36s cubic-bezier(.22,1,.36,1) both!important;
  transform-origin:100% 50%!important;
}
@media(prefers-reduced-motion:reduce){
  body.sidebar-visible:not(.auth-active) .page.active>.wrap{animation:none!important}
}


body.sidebar-visible:not(.auth-active) .page.active>.wrap{
  will-change:auto!important;
  /* `both` keeps the animation's end state applied forever, which can hold the
     layer open too. `backwards` only pre-applies the start state; the end state
     is the element's natural one, so nothing lingers. */
  animation-fill-mode:backwards!important;
}

/* ---------- font back to what it was before round 19 ---------- */
body:not(.auth-active),
body:not(.auth-active) button,
body:not(.auth-active) input,
body:not(.auth-active) select,
body:not(.auth-active) textarea,
body:not(.auth-active) .card,
body:not(.auth-active) .page,
body:not(.auth-active) .sidebar,
body:not(.auth-active) .top-bar,
#authOverlay,#authOverlay *{
  font-family:'Plus Jakarta Sans','Inter','DM Sans',sans-serif!important;
  letter-spacing:normal!important;
  -webkit-font-smoothing:auto!important;
  -moz-osx-font-smoothing:auto!important;
}
/* The two exclusions have to be restated after the sweep, or the sweep wins. */
.ds-paper,.ds-paper *,.ds-field,.ds-field *{
  font-family:'Inter',Arial,sans-serif!important;letter-spacing:normal!important;
}
.side-brand-name,.auth-logo,.ctg-phi-brand,.logo{
  font-family:'Instrument Serif',serif!important;letter-spacing:normal!important;
}

/* Content top, eased back up. Reserving --frame + 62px put the first card at
   y=106, clear of the bar but overcorrected. --frame + 44px puts it at y=88:
   still below the bar's controls, whose visual bottom is about 66, with some
   22px of air, without the content looking pushed down the page. */
@media(min-width:861px){
  body.sidebar-visible:not(.auth-active) .page{
    padding-top:calc(var(--frame) + 44px)!important;
  }
  body.topbar-has-tabs.sidebar-visible:not(.auth-active) .page{
    padding-top:calc(var(--frame) + 50px)!important;
  }
}


/* ---------- 1. the scrollbar gutter is part of the frame ---------- */
html:has(body:not(.auth-active))::-webkit-scrollbar-track,
html:has(body:not(.auth-active))::-webkit-scrollbar-corner{
  background:var(--ground)!important;
}
/* Firefox has no track pseudo-element; the two-value form is the equivalent. */
html:has(body:not(.auth-active)){
  scrollbar-color:rgba(202,240,248,.42) var(--ground)!important;
}
/* The thumb is drawn with a transparent border and background-clip, so on the
   navy track that border showed as ground rather than as padding around the
   pill. Restated here against the new track colour. */
html:has(body:not(.auth-active))::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#48CAE4,#00B4D8)!important;
  border:2px solid transparent!important;
  background-clip:content-box!important;
  border-radius:99px!important;
}
html:has(body:not(.auth-active))::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#90E0EF,#48CAE4)!important;
  background-clip:content-box!important;
}
/* The drawer layout has no frame at all, so the gutter goes back to normal. */
@media(max-width:860px){
  html:has(body:not(.auth-active))::-webkit-scrollbar-track,
  html:has(body:not(.auth-active))::-webkit-scrollbar-corner{background:transparent!important}
  html:has(body:not(.auth-active)){scrollbar-color:#0096C7 transparent!important}
}

/* ---------- 2. the reveal runs left to right ---------- */
@keyframes ctgSheetLTR{
  from{opacity:0;transform:translateX(-30px)}
  to{opacity:1;transform:none}
}
body.sidebar-visible:not(.auth-active) .page.active>.wrap{
  animation:ctgSheetLTR .36s cubic-bezier(.22,1,.36,1) backwards!important;
  transform-origin:0 50%!important;
}
@media(prefers-reduced-motion:reduce){
  body.sidebar-visible:not(.auth-active) .page.active>.wrap{animation:none!important}
}

/* ---------- 3. content sits 34px below the sheet's top edge ---------- */
@media(min-width:861px){
  body.sidebar-visible:not(.auth-active) .page{
    padding-top:calc(var(--frame) + 16px)!important;
  }
  /* 18 + 58 + 18 = 94: unchanged, and still 20px clear of the tab bar's
     bottom at --frame + 56. */
  body.topbar-has-tabs.sidebar-visible:not(.auth-active) .page{
    padding-top:calc(var(--frame) + 58px)!important;
  }
  body:not(.auth-active) .page>.wrap,
  body:not(.auth-active) #page-appointment.page>.wrap.appt-page-wrap{
    padding-top:18px!important;
  }
}


/* ---------- 1. Dark mode row, in rail colours ---------- */
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-theme-btn{
  background:transparent!important;border:0!important;
  color:rgba(202,240,248,.82)!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-theme-btn svg{
  color:rgba(202,240,248,.72)!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-theme-btn:hover{
  background:rgba(255,255,255,.10)!important;color:#fff!important;
}
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-theme-btn:hover svg{
  color:#90E0EF!important;
}
/* The track reads as OFF against the rail rather than as a pale chip stuck to
   it; ON keeps the palette's turquoise so the state is unmistakable. */
html:not([data-theme="dark"]) body:not(.auth-active) .ctg-theme-switch{
  background:rgba(255,255,255,.20)!important;
}
html[data-theme="dark"] body:not(.auth-active) .ctg-theme-switch{
  background:#00B4D8!important;
}
body:not(.auth-active) .ctg-theme-switch i{
  background:#fff!important;box-shadow:0 1px 3px rgba(3,4,94,.45)!important;
}

/* ---------- 2. the canvas is the ground, not the sheet ---------- */
html:has(body:not(.auth-active)){background:var(--ground)!important}
@media(max-width:860px){
  html:has(body:not(.auth-active)){background:var(--sheet)!important}
}


/* body must not paint the ground itself. A negative-z-index positioned child
   paints before the block-level descendants' backgrounds, so body's own
   background would cover the sheet layer completely - measured: the whole hole
   came out navy. The ground goes on `html` (round 22) and body stays clear. */
body:not(.auth-active){background:transparent!important}
body:not(.auth-active)::before{
  content:''!important;
  position:fixed!important;
  top:var(--frame)!important;
  left:var(--side-x)!important;
  right:var(--frame)!important;
  bottom:var(--frame)!important;
  background:var(--sheet)!important;
  border-radius:var(--sheet-r)!important;
  /* Behind body's in-flow content but in front of body's own background. The
     content is unpositioned, so anything at z-index:0 here would paint OVER
     the whole app. */
  z-index:-1!important;
  pointer-events:none!important;
  transition:left var(--side-dur) var(--side-ease)!important;
}
@media(prefers-reduced-motion:reduce){
  body:not(.auth-active)::before{transition:none!important}
}
/* The drawer layout has no frame and no hole - the sheet is the whole window. */
@media(max-width:860px){
  body:not(.auth-active){background:var(--sheet)!important}
  body:not(.auth-active)::before{display:none!important}
}


html.pf-mode,
html.pf-mode body{
  background-image:none!important;
  background-attachment:scroll!important;
}
html:not([data-theme="dark"]).pf-mode,
html:not([data-theme="dark"]).pf-mode body{
  background-color:#F2F7FA!important;
}
html[data-theme="dark"].pf-mode,
html[data-theme="dark"].pf-mode body{
  background-color:var(--bg)!important;
}


.req-star{color:#DC2626;margin-left:3px;font-weight:800}
html[data-theme="dark"] .req-star{color:#F87171}

.fg.is-missing>label{color:#DC2626!important}
html[data-theme="dark"] .fg.is-missing>label{color:#F87171!important}
.fg.is-missing input,
.fg.is-missing select,
.fg.is-missing .date-field input{
  border-color:#DC2626!important;
  box-shadow:0 0 0 3px rgba(220,38,38,.13)!important;
}
.fg.is-missing input:focus,
.fg.is-missing select:focus,
.fg.is-missing .date-field input:focus{
  border-color:#DC2626!important;
  box-shadow:0 0 0 3px rgba(220,38,38,.22)!important;
}


.side-brand-icon{
  background:
    radial-gradient(118% 96% at 20% 6%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(135deg,#00B4D8 0%,#0077B6 55%,#03045E 100%)!important;
  box-shadow:0 6px 18px rgba(0,180,216,.42)!important;
}

/* ---- login hero ---- */
.auth-icon{
  background:
    radial-gradient(118% 96% at 20% 6%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(135deg,#00B4D8 0%,#0077B6 55%,#023E8A 100%)!important;
  box-shadow:0 10px 26px rgba(0,180,216,.34)!important;
  border:1px solid rgba(202,240,248,.28)!important;
}
/* Sized as a share of the tile rather than in px, so the 520px breakpoint's
   50px tile scales the mark with it instead of needing its own rule. */
.auth-icon img{width:56%;height:56%;object-fit:contain;display:block}
/* Same trick in em against .auth-logo's own font-size, which drops 44px -> 22px
   on small screens. */
.auth-logo img{height:1.3em;width:auto;max-width:100%;object-fit:contain;display:block}


.side-brand-icon{
  background:none!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
}
.side-brand-icon img{width:100%!important;height:100%!important}

.auth-icon{
  background:none!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
  width:76px!important;height:76px!important;
}
.auth-icon img{width:100%!important;height:100%!important}
@media(max-width:520px){
  .auth-icon{width:58px!important;height:58px!important}
}


.auth-hero-top{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
}
.auth-icon{width:68px!important;height:68px!important;margin:0!important;flex:none!important}
.auth-logo img{height:1.36em!important}
.auth-sub{margin-top:0!important}

@media(max-width:520px){
  .auth-hero-top{align-items:center!important;gap:13px!important}
  .auth-icon{width:54px!important;height:54px!important}
}


@media(min-width:1600px){
  body.sidebar-rail:not(.auth-active) .side-brand-icon{width:44px!important;height:44px!important}
}


/* ---- login hero: navy into cyan, left to right ---- */
.auth-logo{
  background-image:linear-gradient(100deg,#03045E 0%,#0077B6 55%,#00B4D8 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  white-space:nowrap;
}
.auth-logo span{
  color:inherit!important;
  -webkit-text-fill-color:transparent!important;
  filter:none!important;
}

/* ---- sidebar: the pale end of the palette, because the rail is navy ----
   Sized up to fill the space beside the mark. nowrap so it never wraps onto
   a second line in the narrow rail; the rail-collapsed rules above already
   hide it entirely, so this only ever applies to the expanded sidebar. */
.side-brand-name{
  font-size:25px!important;
  line-height:1.06!important;
  white-space:nowrap;
  font-weight:800!important;
  letter-spacing:normal!important;
  background-image:linear-gradient(115deg,#FFFFFF 0%,#CAF0F8 45%,#48CAE4 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}
.side-brand-name span{
  color:inherit!important;
  -webkit-text-fill-color:transparent!important;
}
/* The wide-screen breakpoint (min-width:1600px, line ~12156) sets 17.5px with
   !important, so it has to be matched selector-for-selector or it wins there.
   The 861-1180px rule sets 14px without !important, so the base above already
   beats it - no companion rule needed for that one. */
@media(min-width:1600px){
  body:not(.auth-active):not(.sidebar-rail) .side-brand-name{font-size:27px!important}
}

body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs{
  gap:14px!important;
}
body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs .tab{
  padding:11px 22px!important;
}
.top-bar #day1Tabs .tab .tab-n{
  display:inline-block;
  margin-right:8px;
  font-weight:800;
  opacity:.5;
}
.top-bar #day1Tabs .tab.active .tab-n{opacity:.75}

/* Below 1400px the labels are already tightened; keep the gap proportional so
   the strip does not go back to looking like one block. */
@media(max-width:1400px){
  body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs{gap:10px!important}
  body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs .tab{padding:9px 16px!important}
  .top-bar #day1Tabs .tab .tab-n{margin-right:6px}
}

body.topbar-has-tabs:not(.auth-active) .top-bar{
  height:72px!important;
  padding-top:16px!important;
  align-items:flex-start!important;
}
body.topbar-has-tabs.sidebar-visible:not(.auth-active) .page{padding-top:72px!important}
body.topbar-has-tabs:not(.auth-active) #aceProgressStrip{
  top:calc(var(--frame) + 82px)!important;
}
body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs{
  flex:1 1 auto!important;
  min-width:0!important;
  /* 24px bar gutter + 16px = the 40px the content wrap uses. */
  margin:0 16px!important;
  justify-content:space-between!important;
}

body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs{
  justify-content:flex-start!important;
  gap:8px!important;
}
body.topbar-has-tabs:not(.auth-active) .top-bar #day1Tabs .tab{
  flex:1 1 0!important;
  min-width:0!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}


#sidebar .side-glide{
  position:absolute;z-index:0;pointer-events:none;
  margin:0;padding:0;border:0;box-shadow:none;
  background:var(--glide-bg);
  border-radius:var(--glide-r,16px) 0 0 var(--glide-r,16px);
  animation:none;transition:none;
}
#sidebar .side-glide::before,
#sidebar .side-glide::after{
  content:'';position:absolute;left:auto;right:0;
  width:var(--notch-r,16px);height:var(--notch-r,16px);
  pointer-events:none;border:0;border-radius:0;box-shadow:none;
}
#sidebar .side-glide::before{
  top:calc(var(--notch-r,16px) * -1);bottom:auto;
  background:radial-gradient(circle var(--notch-r,16px) at 0 0,transparent 99%,var(--glide-bg) 100%);
}
#sidebar .side-glide::after{
  bottom:calc(var(--notch-r,16px) * -1);top:auto;
  background:radial-gradient(circle var(--notch-r,16px) at 0 100%,transparent 99%,var(--glide-bg) 100%);
}
/* The destination row, while the copy is on its way: no fill, no corners, and
   its label darkens as the sheet slides in under it (--glide-in is set per
   glide from its duration) rather than before. */
html body #sidebar a.side-glide-target.active{
  background:transparent!important;background-image:none!important;box-shadow:none!important;
  transition:color .18s ease var(--glide-in,.22s)!important;
}
html body #sidebar a.side-glide-target.active::before,
html body #sidebar a.side-glide-target.active::after{opacity:0!important}
html body #sidebar a.side-glide-target.active svg{transition:color .18s ease var(--glide-in,.22s)!important}
/* The row being left: its fill goes the instant it loses .active (the copy is
   exactly on top of it), so nothing is left behind when the copy pulls away.
   Only the label fades, as the sheet uncovers it. */
html body #sidebar a.side-glide-source:not(.active),
html body #sidebar a.side-glide-source:not(.active) svg{transition:color .16s ease!important}

/* Scrolling the rail to its end no longer drags the page along behind it. */
body:not(.auth-active) #sidebar{overscroll-behavior:contain}

/* ---------- 2. layers nobody needed ----------
   `will-change:transform` on every avatar and card icon gave each its own
   compositing layer - 61 on a 60-patient list - and was the single largest
   scroll cost measured. Transitions still promote them while they run. */
.pt-av,.user-chip-av,.pld-avatar,.ac-user-av,.card-ico,#ptAv{will-change:auto!important}

/* ---------- 3. blurs that blurred a flat colour ----------
   Each of these sits over the flat sheet, where a backdrop blur changes nothing
   visible (pixel diff: max 3-5/255) but still costs a render surface every
   frame the page scrolls. Floating chrome over moving content keeps its blur. */
#page-patientLists .pld-patient-row,
#page-patientLists .pld-sidebar-card,
#patientDetail,
#page-referrals .card,
#page-appointment .appt-calendar-card{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* ---------- 4. the Add Patient shimmer, on the compositor ----------
   It animated `left`, forcing a layout on every frame for as long as Patient
   Lists was open. Same sweep, as a transform: 210% of the button is 466.67% of
   the 45%-wide highlight. */
@keyframes ctgShimmerX{
  0%,55%{transform:translateX(0) skewX(-20deg)}
  100%{transform:translateX(466.67%) skewX(-20deg)}
}
.pld-add-patient-btn::after{left:-70%!important;animation-name:ctgShimmerX!important}

/* One frame at landing: the row's fill appears without its fade, under the copy. */
html body #sidebar a.side-glide-landing,
html body #sidebar a.side-glide-landing svg{transition:color .18s ease!important}

@media(max-width:860px){
  /* 1. A real top bar. Desktop retired the top band (round 3), which left the
     phone's menu button - the only way to open navigation - centred in a
     0px-tall fixed bar: half of it above the screen, and styled white-on-white
     against the light page. A brand-navy band, like the rail, gives it room. */
  body:not(.auth-active) .top-bar{
    height:56px!important;padding:0 12px!important;
    background:linear-gradient(90deg,#03045E 0%,#023E8A 100%)!important;
    box-shadow:0 6px 18px rgba(3,4,94,.18)!important;
    pointer-events:auto!important;
  }
  body:not(.auth-active) .top-bar .menu-btn{color:#fff!important}
  body:not(.auth-active) .top-bar .topbar-logo{color:#fff!important}
  body:not(.auth-active):not(.topbar-has-tabs) .page{padding-top:56px!important}
  /* the open drawer sits above the band, not under it */
  body.sidebar-visible:not(.auth-active) .sidebar{z-index:1200!important}
  body.sidebar-visible:not(.auth-active) .sidebar-overlay{z-index:1150!important}

  /* 2. Day 1 diagnosis list: two 160px columns left each ICD description 38px
     wide, nine lines tall. One column on a phone. */
  #icdGrid{grid-template-columns:1fr!important}

  /* 3. Patient queue rows (Completed / Incomplete / Pending): avatar, details
     and two buttons shared one line, crushing the details to ~60px. The
     buttons now drop under the details. */
  .patient-row:has(> .btn){flex-wrap:wrap!important;row-gap:8px!important}
  .patient-row:has(> .btn) > .patient-row-main{flex:1 1 calc(100% - 56px)!important;min-width:0!important}
  .patient-row:has(> .btn) > .btn:first-of-type{margin-left:auto!important}

  /* 4. Encounter / check-in tables scroll sideways instead of squeezing their
     headers to a few letters per line. */
  .enc-table-wrap .enc-table{min-width:720px!important}

  /* 5. Opening a patient scrolls to the details (app.js); keep them clear of the band. */
  #patientDetail{scroll-margin-top:68px}

  /* 7. The menu button could not be tapped. It lives in .top-bar>div:first-child,
     which desktop sets to pointer-events:none so the transparent strip does not
     swallow clicks - and the button inherited it, so every tap fell through to
     the bar. The button is the only live thing in that group. */
  body:not(.auth-active) .top-bar .menu-btn{pointer-events:auto!important;cursor:pointer}

  /* 8. Patient profile card. Desktop puts the details in a column beside a 72px
     avatar; at phone width that left the ID / dates indented under the name with
     half the card empty on the left. Avatar and name now share one row and the
     details run the full width beneath them. */
  body:not(.auth-active) .pld-profile-top{padding:18px 18px 12px!important;gap:14px!important}
  body:not(.auth-active) .pld-profile-main{
    display:grid!important;grid-template-columns:52px minmax(0,1fr);
    align-items:center;gap:12px 14px!important;width:100%;
  }
  body:not(.auth-active) .pld-profile-main > div:not(.pld-profile-avatar){display:contents}
  body:not(.auth-active) .pld-profile-avatar{
    width:52px!important;height:52px!important;font-size:18px!important;
    box-shadow:0 0 0 3px rgba(255,255,255,.75),0 6px 16px rgba(0,119,182,.12)!important;
  }
  body:not(.auth-active) .pld-profile-name{font-size:21px!important;line-height:1.2;margin:0!important;overflow-wrap:anywhere}
  body:not(.auth-active) .pld-profile-meta{
    grid-column:1/-1;display:grid!important;grid-template-columns:minmax(0,1fr);
    gap:6px!important;margin:0!important;font-size:14px!important;
  }
  body:not(.auth-active) .pld-profile-meta span{flex-wrap:wrap}
  /* the three actions share the row evenly and wrap if a label grows */
  body:not(.auth-active) .pld-profile-actions{display:flex!important;flex-wrap:wrap;gap:8px!important;width:100%}
  body:not(.auth-active) .pld-profile-actions > .btn{flex:1 1 0;justify-content:center;margin:0!important}
  /* Edit Demographics takes the first row; the smaller two share the second,
     instead of Delete alone stretched across a whole row. */
  body:not(.auth-active) .pld-profile-actions > .btn:first-child:not(:only-child){flex-basis:100%}
  body:not(.auth-active) .pld-status-row{padding:0 18px 12px!important;margin-left:0!important}
  /* Tabs scroll sideways without the desktop scrollbar, which drew a bar under
     the row that ran past the card's rounded corner. */
  body:not(.auth-active) .pld-tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 16px}
  body:not(.auth-active) .pld-tabs::-webkit-scrollbar{display:none;height:0}
  /* a soft fade at the right edge says the row continues */
  body:not(.auth-active) .pld-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);padding-right:40px!important}
  body:not(.auth-active) .pld-tabs > *{flex:none}
}
/* 9. Touch screens keep :hover after a tap, so the desktop hover (icon turned
   90 degrees, button scaled up) stuck on the menu button after the drawer closed. */
@media(max-width:860px) and (hover:none){
  body:not(.auth-active) .top-bar .menu-btn:hover{transform:none!important}
  body:not(.auth-active) .top-bar .menu-btn:hover svg{transform:none!important}
}
/* 6. iPhone zooms the whole page on any field under 16px. Touch phones only. */
@media(max-width:860px) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select,textarea{font-size:16px!important}
}

@media(min-width:861px){
  html:not([data-theme="dark"]) body:not(.auth-active) #sidebar .side-brand{
    background:linear-gradient(180deg,var(--rail-top) 0%,#023E8A 45%,var(--rail-bot) 100%) 0 0/100% 100vh no-repeat!important;
  }
  html[data-theme="dark"] body:not(.auth-active) #sidebar .side-brand{
    background:linear-gradient(180deg,var(--rail-top) 0%,#012A63 45%,var(--rail-bot) 100%) 0 0/100% 100vh no-repeat!important;
  }
}
/* The strip's square bottom-right corner still overlapped the top of the curve
   above a selected Dashboard row by ~1px for 6 rows. Rounding that corner lets
   the curve (drawn by the row underneath) show through. */
@media(min-width:861px){
  body:not(.auth-active) #sidebar .side-brand{border-bottom-right-radius:12px!important}
}
body:not(.auth-active) #page-dashboard .dash-welcome{
  box-shadow:0 22px 40px -16px rgba(0,119,182,.34),inset 0 1px 0 rgba(255,255,255,.16)!important;
}
body:not(.auth-active) #page-dashboard .pld-card{
  box-shadow:0 16px 32px -14px rgba(15,23,42,.14),inset 0 1px 0 rgba(255,255,255,.6)!important;
}


/* ───────── CTG One mark and wordmark (2026-09-17) ─────────
   The brand art is SVG now: a mark and a wordmark, each in a light set for the
   navy rail and a dark set for the pale login panel. The wordmark is the real
   logo typeface converted to outlines, so it no longer depends on a font being
   installed. Heights stay in `em` of the logo's own font-size, so every
   breakpoint rule already in this file keeps driving them the way it drove the
   PNG art. Appended because .side-brand-name and .auth-logo are each set
   several times above with !important - see the sidebar-rail notes. */
.side-brand-name img{height:0.75em;width:auto;max-width:100%;object-fit:contain;display:block}
.auth-logo img{height:0.75em!important;width:auto;max-width:100%;object-fit:contain;display:block}
.auth-logo{line-height:1!important;display:flex;align-items:center}


/* ───────── CTG One emblem, landscape aspect (2026-09-18) ─────────
   The new mark is 900x631, where the art it replaced was nearly square. Inside
   a square box `object-fit:contain` fits a landscape image to its WIDTH, so the
   mark rendered ~48px tall in a 68px box - shorter than the wordmark's capitals,
   which reads as an afterthought. Size both brand boxes by HEIGHT and let the
   width follow, so the mark stays slightly taller than the caps.
   Appended because .auth-icon and .side-brand-icon are each set several times
   above with !important. */
.auth-icon{width:auto!important;height:58px!important}
.auth-icon img{width:auto!important;height:100%!important;object-fit:contain}
@media(max-width:520px){.auth-icon{height:44px!important}}

.side-brand-icon{width:auto!important;height:34px!important}
.side-brand-icon img{width:auto!important;height:100%!important;object-fit:contain}
@media(min-width:1600px){
  /* Matches the specificity of the wide-screen step-up above, which is
     body:not(.auth-active):not(.sidebar-rail) - a shorter selector loses to it
     even with !important. */
  body:not(.auth-active):not(.sidebar-rail) .side-brand-icon{width:auto!important;height:38px!important}
  body.sidebar-rail:not(.auth-active) .side-brand-icon{width:auto!important;height:38px!important}
}

/* Password reveal. The account password box used to be type="text", so an
   admin setting somebody's password had it in clear view of the room. It is
   masked now, with an eye to show it deliberately - which is also the only
   honest answer to "show me the existing password": there isn't one to show,
   the stored value is a bcrypt hash. Appended, like the other overrides in
   this file, because .fg input is set several times above. */
.pw-field{position:relative;display:block}
.pw-field input{width:100%;padding-right:44px!important}
.pw-reveal{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:0;border-radius:8px;
  background:transparent;color:#5b6b8c;cursor:pointer;
  transition:background .15s ease,color .15s ease
}
.pw-reveal:hover{background:rgba(3,48,96,.08);color:#033060}
.pw-reveal:focus-visible{outline:2px solid #0077B6;outline-offset:1px}
.pw-reveal svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* The slash is only drawn while the password is hidden, so the icon reads as
   "currently hidden - press to show". */
.pw-reveal[aria-pressed="true"] .pw-slash{display:none}

/* The Full Name / Username / Account Type row. `.g2,.g3,.g4{align-items:end}`
   bottom-aligns every cell, so the hint under Full Name pushed its input UP by
   exactly the hint's height and the three fields stopped lining up. Top-align
   this one row: the labels and inputs match, and the hint hangs below where it
   belongs. Scoped to this row so no other .g3 in the app changes. */
.ac-ident-row{align-items:start}