/* ── MyInsight — Google AI Mode Light Theme ── */

/* DM Sans is vendored (vendor/fonts/dm-sans.css, linked by every page before this
   file). The Google Fonts @import that stood here since the first version was
   blocked by the CSP (no third-party host) and only raised a console error. */

:root {
  --font:         'DM Sans', -apple-system, sans-serif;
  --bg:           #ffffff;
  --bg2:          #f8f9fa;
  --sidebar-bg:   #f0f2f4;
  --surface:      #ffffff;
  --input-bg:     #f1f3f4;
  --border:       #e0e3e7;
  --border-hover: #c4c7cc;
  --text-1:       #1f1f1f;
  --text-2:       #5f6368;
  --text-3:       #9aa0a6;
  --link:         #c96c00;          /* warm orange — suggestion links */
  --blue:         #1a73e8;
  --blue-dark:    #1557b0;
  --blue-light:   #e8f0fe;
  --green:        #1e8e3e;
  --green-light:  #e6f4ea;
  --red:          #d93025;
  --red-light:    #fce8e6;
  --shadow-xs:    0 1px 2px rgba(60,64,67,.08);
  --shadow-sm:    0 1px 6px rgba(60,64,67,.15);
  --shadow:       0 2px 12px rgba(60,64,67,.2);
  --shadow-lg:    0 4px 24px rgba(60,64,67,.25);
  --r-input:      26px;
  --r-card:       14px;
  --r-pill:       999px;
  --sidebar-w:    74px;             /* the rail with words (14 Oct 2026); was 64px icons-only */
  --drawer-w:     280px;
  --max-content:  1100px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #dadce0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #bdc1c6; }

/* ── Icon sidebar ──────────────────────────────────────────────────────────── */
#icon-sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}

.sidebar-icon-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s;
  font-size: 15px;
  margin: 2px 0;
  position: relative;
  text-decoration: none;
}
.sidebar-icon-btn:hover { background: rgba(0,0,0,.06); color: var(--text-1); transform: none; }
/* The rail says two different things and they must not look alike, or two icons
   light up at once and neither one means anything:
     .panel-open  a slide-in panel this button opened. An overlay — it does NOT
                  change the main view, so it is drawn as "pressed", in grey.
     .active      the view you are LOOKING AT. At most one, set only by
                  showMainView(). Declared last so it wins on a button that is
                  both (viewing a story with the Stories panel open). */
.sidebar-icon-btn.panel-open { background: rgba(0,0,0,.06); color: var(--text-1); }
.sidebar-icon-btn.active { background: var(--blue-light); color: var(--blue); }

/* ── Conversation drawer ────────────────────────────────────────────────────── */
#conv-drawer {
  position: fixed;
  top: 0; left: var(--sidebar-w); bottom: 0;
  width: var(--drawer-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 25;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(-1 * var(--drawer-w) - var(--sidebar-w)));
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
#conv-drawer.open {
  transform: translateX(0);
}
#drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.18);
  z-index: 24;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
#drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── Main header ───────────────────────────────────────────────────────────── */
#main-header {
  height: 56px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 8px;
}

.header-icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none; background: transparent;
  color: var(--text-2); cursor: pointer;
  font-size: 14px;
  transition: background .15s, color .15s;
}
.header-icon-btn:hover { background: rgba(0,0,0,.06); color: var(--text-1); transform: none; }
.header-icon-btn.max-active { color: var(--blue); background: var(--blue-light); }
/* A header button that toggles a panel open (today: the brain button and its dock). */
.header-icon-btn.active { color: var(--blue); background: var(--blue-light); }

/* ── Header entity search (Patient ID / TIN / NPI) ─────────────────────────── */
.header-search {
  display: flex; align-items: center;
  background: var(--input-bg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 0 4px 0 14px;
  height: 36px;
  transition: border-color .15s, background .15s, width .2s;
}
.header-search:focus-within { background: var(--surface); border-color: var(--border-hover); box-shadow: var(--shadow-xs); }
.header-search-input {
  border: none; background: transparent; outline: none;
  font: inherit; font-size: 13px; color: var(--text-1);
  width: 170px;
}
.header-search-input:focus { width: 210px; }
.header-search-input::placeholder { color: var(--text-3); }
.header-search-btn {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: transparent; color: var(--text-2);
  cursor: pointer; font-size: 13px;
  transition: background .15s, color .15s;
}
.header-search-btn:hover { background: rgba(0,0,0,.06); color: var(--blue); transform: none; }

/* ── Entity search results modal ───────────────────────────────────────────── */
.es-box { max-width: 760px; width: min(760px, 94vw); }
.es-query-chip {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  background: var(--blue-light); color: var(--blue);
  border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  vertical-align: middle;
}
.es-section { margin-bottom: 22px; }
.es-section:last-child { margin-bottom: 4px; }
.es-section-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 2px solid var(--blue-light);
}
.es-section-head i { color: var(--blue); font-size: 15px; }
.es-section-head h4 { font-size: 14.5px; font-weight: 600; color: var(--text-1); }
.es-badge {
  padding: 1px 9px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-pill); font-size: 11.5px; color: var(--text-2);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
.es-group { margin-bottom: 14px; }
.es-group-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 6px;
}
.es-kv-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 6px 18px;
}
.es-kv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.es-kv-label { font-size: 11.5px; color: var(--text-3); }
.es-kv-value { font-size: 13px; color: var(--text-1); font-weight: 500; overflow-wrap: anywhere; }
.es-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.es-chip {
  padding: 3px 10px; background: var(--green-light); color: var(--green);
  border-radius: var(--r-pill); font-size: 12px; font-weight: 500;
}
.es-note {
  font-size: 12.5px; color: var(--text-2); background: var(--bg2);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 12px;
}
.es-recs-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  margin: 14px 0 8px;
}
.es-recs-title i { color: var(--blue); }
.es-rec-card {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; background: var(--surface);
}
.es-rec-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.es-rec-nb { font-size: 13px; font-weight: 600; color: var(--text-1); }
.es-rec-more { font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.es-rec-sub { font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
/* A card whose storybook is known: the title (and each notebook name) opens it at
   the section behind this list. Styled as a link, not a button — it sits inside a
   heading and a sentence, and a button chrome there reads as a form control. */
.es-rec-open {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--blue-dark); text-align: left;
}
.es-rec-open:hover { text-decoration: underline; }
.es-rec-open:focus-visible {
  text-decoration: underline; outline: 2px solid var(--blue); outline-offset: 2px;
}
.es-rec-open i { font-size: .8em; opacity: .7; margin-left: 3px; }
.es-rec-nblink { font-size: inherit; color: var(--blue-dark); }
.es-rec-filename { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.es-rec-why {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-2);
  background: var(--blue-light); border-radius: 6px;
  padding: 7px 10px; margin-bottom: 8px;
}
.es-rec-why-line { line-height: 1.45; }
.es-rec-why-line strong { color: var(--blue-dark); font-weight: 600; }
.es-rec-action { color: var(--text-1); }
.es-rec-action strong { color: var(--green); }
.es-no-recs {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-3); margin-top: 12px;
}
.es-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.es-table { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.es-table th, .es-table td {
  padding: 5px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.es-table th {
  background: var(--bg2); color: var(--text-2); font-weight: 600;
  position: sticky; top: 0;
}
.es-table tbody tr:last-child td { border-bottom: none; }
.es-empty { text-align: center; padding: 28px 16px; color: var(--text-2); }
.es-empty i { font-size: 24px; color: var(--text-3); display: block; margin-bottom: 10px; }
.es-empty p { font-size: 13.5px; margin-bottom: 8px; }
.es-empty-hint { font-size: 12px; color: var(--text-3); }

/* Name search: the disambiguation list shown when a name matches more than one entity. */
.es-matches { padding: 4px 0 2px; }
.es-matches-head { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.es-matches-head strong { color: var(--text-1); }
.es-match {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; margin-bottom: 6px; text-align: left; cursor: pointer;
  background: var(--bg1); border: 1px solid var(--border); border-radius: 8px;
  font-family: inherit; font-size: 13px; color: var(--text-1);
  transition: background .12s ease, border-color .12s ease;
}
.es-match:hover, .es-match:focus-visible {
  background: var(--blue-light); border-color: var(--blue); outline: none;
}
.es-match-icon {
  flex: 0 0 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg2); color: var(--blue-dark); font-size: 12.5px;
}
.es-match-main { flex: 1 1 auto; min-width: 0; }
/* Both are <span>s inside a <button>, so they need an explicit block display —
   left inline they render as "Blakeslee, Junoprovider NPI · 1716816008" on one line. */
.es-match-name { display: block; font-weight: 600; }
.es-match-sub {
  display: block;
  font-size: 11.5px; color: var(--text-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.es-match-count { flex: 0 0 auto; font-size: 11.5px; color: var(--text-3); }
.es-matches-more { font-size: 12px; color: var(--text-3); margin-top: 8px; }
.es-resolved {
  font-size: 12.5px; color: var(--text-2);
  background: var(--blue-light); border-radius: 6px;
  padding: 7px 10px; margin-bottom: 12px;
}
.es-resolved strong { color: var(--blue-dark); }

/* ── The tabbed patient screen (js/patient-screen.js) ─────────────────────────
   Overview · Medicaid · Pharmacy · Matches · Brain. A fixed-height overlay so a
   tab switch never resizes the box; the identity band and the tab strip stay put
   and only the panel scrolls. Row-by-row tables for the CCLF tabs: sticky header,
   a row number, and every column one click away. */
/* `.modal-box.ps-box`, not `.ps-box`: `.modal-box-lg` (680px) is declared later in
   this file with the same specificity and would clamp the width otherwise. */
.modal-box.ps-box { max-width: 1140px; width: min(1140px, 96vw); height: 88vh; max-height: 88vh; }
.ps-box .modal-header { padding: 14px 22px; }
.ps-title-chip {
  display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px;
  background: var(--bg2); color: var(--text-2); font-size: 12.5px; font-weight: 500;
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}
.ps-body { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; overflow: hidden; }

/* The facts sit beside the name while there is room and drop under it when there
   is not (flex-wrap), so the band never overlaps itself at any box width. */
.ps-band {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 14px 32px; padding: 18px 24px 14px; flex-shrink: 0;
}
.ps-who { flex: 1 1 300px; min-width: 0; }
.ps-name {
  font-size: 21px; font-weight: 600; color: var(--text-1); line-height: 1.25;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0;
}
.ps-id { margin-top: 4px; font-size: 12.5px; color: var(--text-2); }
.ps-num { font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--text-1); font-weight: 500; }
.ps-prev { color: var(--text-3); margin-left: 6px; }
/* An earlier number is a button that opens the panel saying where it comes from. */
.ps-prev-num {
  border: none; background: none; padding: 0 1px; font: inherit; cursor: pointer;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--blue-dark);
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.ps-prev-num:hover { text-decoration-style: solid; }
.ps-prev-num[aria-expanded="true"] { color: var(--text-1); font-weight: 600; text-decoration-style: solid; }
.ps-prev-num:focus-visible, .ps-prev-close:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px;
}
/* Its own row under the name and the facts (the band wraps). Bounded, so a long
   history never pushes the tabs off the screen. */
.ps-prev-panel {
  flex: 1 1 100%; min-width: 0; max-height: 42vh; overflow: auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg2);
  padding: 10px 14px 6px; font-size: 12.5px; color: var(--text-2);
}
.ps-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-prev-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); margin: 0; }
.ps-prev-close {
  border: none; background: none; cursor: pointer; color: var(--text-2);
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
}
.ps-prev-close:hover { background: var(--border); color: var(--text-1); }
.ps-prev-lead { margin: 6px 0 2px; line-height: 1.5; }
.ps-prev-h { font-size: 12px; font-weight: 600; color: var(--text-1); margin: 10px 0 2px; }
.ps-prev-list { list-style: none; margin: 0; padding: 0; }
.ps-prev-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 6px 0; border-top: 1px solid var(--border);
}
.ps-prev-list li:first-child { border-top: none; }
.ps-prev-src { color: var(--text-1); font-weight: 500; }
.ps-prev-meta { color: var(--text-2); }
.ps-prev-file {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 11.5px;
  color: var(--text-2); overflow-wrap: anywhere;
}
.ps-prev-file-block { flex-basis: 100%; }
.ps-prev-go { margin-left: auto; }
.ps-prev-none { color: var(--text-2); }
.ps-prev-none i { margin-right: 6px; color: var(--text-3); }
.ps-pill {
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.ps-pill-active   { background: var(--green-light); color: var(--green); }
.ps-pill-inactive { background: var(--bg2); color: var(--text-2); border-color: var(--border); }
.ps-pill-deceased { background: var(--red-light); color: var(--red); }
.ps-pill-unknown  { background: var(--bg2); color: var(--text-3); border-color: var(--border); }
.ps-facts {
  display: grid; grid-template-columns: repeat(4, minmax(110px, 190px)); gap: 6px 18px;
  margin: 0; flex: 0 1 auto;
}
.ps-fact dt { font-size: 11.5px; color: var(--text-3); }
/* break-word, not anywhere: a date span has spaces to wrap at, and `anywhere` broke
   "2022-05-16 to 2026-03-07" mid-token into "2026-03-" + "07". A single long value
   with no space (a practice name) still breaks. */
.ps-fact dd { font-size: 13px; color: var(--text-1); font-weight: 500; margin: 1px 0 0; overflow-wrap: break-word; }

.ps-tabs {
  display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; overflow-x: auto;
}
.ps-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 12px 9px; border: none; border-bottom: 2px solid transparent;
  background: none; color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap; margin-bottom: -1px;
}
.ps-tab i { font-size: 12.5px; color: var(--text-3); }
.ps-tab:hover { color: var(--text-1); }
.ps-tab[aria-selected="true"] { color: var(--blue-dark); border-bottom-color: var(--blue); }
.ps-tab[aria-selected="true"] i { color: var(--blue); }
.ps-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 6px; }
.ps-count {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 7px; line-height: 1.5;
}
.ps-tab[aria-selected="true"] .ps-count { color: var(--blue-dark); background: var(--blue-light); border-color: transparent; }
.ps-count-wait { color: var(--text-3); }
.ps-h .ps-count, .ps-h4 .ps-count { margin-left: 6px; vertical-align: middle; }

.ps-panel { flex: 1; min-height: 0; overflow: auto; padding: 18px 24px 22px; }
.ps-panel[hidden] { display: none; }
.ps-section { margin-bottom: 26px; }
.ps-section:last-child { margin-bottom: 6px; }
.ps-h { font-size: 14px; font-weight: 600; color: var(--text-1); margin: 0 0 10px; }
.ps-h4 { font-size: 13px; font-weight: 600; color: var(--text-1); margin: 14px 0 2px; }
.ps-lead { font-size: 14px; color: var(--text-1); margin: 0 0 10px; line-height: 1.5; }
.ps-small { font-size: 12px; color: var(--text-3); margin: 4px 0 8px; line-height: 1.5; }
.ps-blank { color: var(--text-3); }
.ps-meaning { color: var(--text-2); font-size: 11.5px; }
.ps-col { font-size: 10.5px; color: var(--text-3); font-weight: 400; margin-left: 5px; font-variant-numeric: tabular-nums; }

.ps-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 22px; margin: 0; }
.ps-kv-dense { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 22px; }
.ps-kv-item { min-width: 0; }
.ps-kv-item dt { font-size: 11.5px; color: var(--text-3); }
.ps-kv-item dd { font-size: 13px; color: var(--text-1); font-weight: 500; margin: 1px 0 0; overflow-wrap: anywhere; }
.ps-kv-dense .ps-kv-item dd { font-weight: 400; }
.ps-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-chip {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--blue-light); color: var(--blue-dark);
}

.ps-every-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ps-every-head .ps-h { margin: 0; }
.ps-filter {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
  color: var(--text-3); background: var(--surface);
}
.ps-filter:focus-within { border-color: var(--blue); }
.ps-filter input { border: none; outline: none; background: none; font: inherit; font-size: 13px; color: var(--text-1); width: 200px; }
.ps-fields { margin-top: 6px; }

.ps-notes { margin: 0 0 14px; }
.ps-notes p { font-size: 12.5px; color: var(--text-2); margin: 0 0 4px; }
.ps-notes i { color: var(--blue); margin-right: 4px; }
.ps-state { font-size: 13.5px; color: var(--text-2); padding: 28px 0; text-align: center; }
.ps-state i { margin-right: 6px; color: var(--text-3); }
.ps-state-error i { color: var(--red); }
.ps-link {
  border: none; background: none; padding: 0; font: inherit; font-size: 12.5px;
  color: var(--blue-dark); cursor: pointer;
}
.ps-link:hover { text-decoration: underline; }
.ps-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* The Medical tab's claim-file picker. A row of pills rather than a second tab strip:
   the tab strip above owns the record's five parts, and two identical strips would
   read as one control that had been split. A file with no row for this patient is
   disabled rather than hidden — "this patient has no procedure row" is an answer. */
.ps-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ps-file {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px;
  cursor: pointer;
}
.ps-file:hover:not([disabled]) { border-color: var(--border-hover); color: var(--text-1); }
.ps-file[aria-selected="true"] {
  background: var(--blue-light); border-color: transparent; color: var(--blue-dark);
  font-weight: 600;
}
.ps-file[aria-selected="true"] .ps-count { background: var(--surface); border-color: transparent; }
.ps-file[disabled] { opacity: .55; cursor: default; }
.ps-file:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ps-file-panel { margin-top: 0; }

.ps-table-bar { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.ps-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: auto; max-height: 56vh; }
.ps-table-wrap-sm { max-height: 220px; margin-top: 8px; }
.ps-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.ps-table th, .ps-table td {
  padding: 6px 10px; text-align: left; white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--border); vertical-align: top;
}
.ps-table th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  font-weight: 600; color: var(--text-2);
}
.ps-table th .ps-col { display: block; margin: 0; }
.ps-table tbody tr:hover td { background: var(--bg2); }
.ps-table .ps-num { text-align: right; font-variant-numeric: tabular-nums; }
.ps-table .ps-rownum { color: var(--text-3); text-align: right; width: 1%; font-variant-numeric: tabular-nums; }
.ps-table td .ps-meaning { display: block; white-space: normal; max-width: 260px; }

.ps-rec { padding: 12px 0; border-top: 1px solid var(--border); }
.ps-rec:first-of-type { border-top: none; padding-top: 4px; }
.ps-rec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ps-rec-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.ps-rec-title.ps-link { font-size: 13.5px; }
.ps-rec-title i { font-size: .8em; opacity: .7; }
.ps-rec-why { margin-top: 4px; }
.ps-rec-why summary { font-size: 12px; color: var(--text-2); cursor: pointer; }
.ps-rec-why p { font-size: 12.5px; color: var(--text-2); margin: 6px 0 0; line-height: 1.45; }
.ps-rec-why strong { color: var(--text-1); font-weight: 600; }
.ps-dash { padding: 12px 0; border-top: 1px solid var(--border); }
.ps-dash:first-of-type { border-top: none; padding-top: 4px; }
.ps-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ps-dash-open { padding: 5px 14px; font-size: 12.5px; }

.ps-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 24px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.ps-sources { min-width: 0; flex: 1; font-size: 12px; color: var(--text-2); }
.ps-src summary { cursor: pointer; color: var(--text-2); }
.ps-src-body { margin-top: 8px; max-height: 160px; overflow: auto; }
.ps-src-group { margin-bottom: 6px; }
.ps-src-tab { font-weight: 600; color: var(--text-1); }
.ps-src ul { margin: 2px 0 0; padding-left: 18px; }
.ps-src li { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 11.5px; color: var(--text-2); }
.ps-pdf { flex-shrink: 0; }

.ps-brain { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ps-brain-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ps-brain-thread { flex: 1; min-height: 0; overflow: auto; padding: 4px 2px; }
.ps-brain-form { flex-shrink: 0; margin-top: 10px; }

@media (max-width: 900px) {
  .ps-band { flex-direction: column; gap: 12px; }
  /* In a column the 300px basis above is a HEIGHT: it left a 300px gap under the
     name on every screen narrower than 900px (a tablet held upright). */
  .ps-who { flex: 0 0 auto; }
  /* Same reason: in a column a 100% basis would be a height. */
  .ps-prev-panel { flex: 0 0 auto; }
  .ps-facts { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}
@media (max-width: 640px) {
  .ps-box { height: 94vh; max-height: 94vh; width: 100vw; max-width: 100vw; border-radius: 12px; }
  .ps-band, .ps-panel, .ps-foot { padding-left: 16px; padding-right: 16px; }
  .ps-tab span:not(.ps-count) { display: none; }
  .ps-tab { padding: 10px 10px 9px; }
  .ps-table-wrap { max-height: 50vh; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-tab, .ps-link { transition: none; }
}

/* ── User dropdown ──────────────────────────────────────────────────────────── */
.user-avatar-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s;
}
.user-avatar-btn:hover { border-color: var(--border-hover); transform: none; }


/* ── Welcome screen ─────────────────────────────────────────────────────────── */
[data-type="welcome"] {
  animation: fadeUp .35s ease-out;
}

.suggestion-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: none; border: none;
  padding: 8px 4px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 14.5px;
  color: var(--link);
  transition: opacity .15s;
}
.suggestion-btn:hover { opacity: .75; transform: none; }
.suggestion-btn i { color: var(--text-3); flex-shrink: 0; }

/* ── Chat input box ────────────────────────────────────────────────────────── */
#input-shell {
  border-radius: var(--r-input);
  background: var(--input-bg);
  border: 1.5px solid transparent;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
#input-shell:focus-within {
  background: var(--surface);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

#message-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text-1);
  line-height: 1.5;
  padding: 14px 18px 4px;
  max-height: 200px;
  overflow-y: auto;
}
#message-input::placeholder { color: var(--text-3); }

#file-upload-input { display: none; }

.attachment-preview-area {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px 0;
}
.attachment-preview-area.hidden { display: none; }

.attach-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--input-bg); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 4px 8px; font-size: 12px;
  color: var(--text-1); max-width: 200px;
}
.attach-chip img {
  width: 24px; height: 24px; object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.attach-chip-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.attach-chip-remove {
  border: none; background: transparent; color: var(--text-3);
  cursor: pointer; padding: 0; font-size: 12px; line-height: 1;
  flex-shrink: 0;
}
.attach-chip-remove:hover { color: var(--text-1); }

.user-attach-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.user-attach-thumb {
  width: 80px; height: 80px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border);
}
.user-attach-file-badge {
  display: flex; align-items: center; gap: 6px;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--text-2);
}

.input-bar {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 6px 10px 10px;
  gap: 8px;
}

.input-action-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: transparent;
  color: var(--text-2); cursor: pointer; font-size: 13px;
  transition: background .15s, color .15s;
}
.input-action-btn:hover { background: rgba(0,0,0,.07); color: var(--text-1); transform: none; }
.input-action-btn.max-on { color: var(--blue); background: var(--blue-light); }

#send-button {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, opacity .15s;
}
#send-button:hover { background: var(--blue-dark); transform: none; }
#send-button:disabled { opacity: .4; cursor: default; }

#stop-button {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border-hover);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
  display: flex; align-items: center; gap: 6px;
  transition: border-color .15s, color .15s;
}
#stop-button:hover { border-color: var(--red); color: var(--red); transform: none; }

/* ── Message bubbles — light theme ──────────────────────────────────────────── */
.msg-row {
  animation: fadeUp .25s ease-out;
  max-width: var(--max-content);
  margin: 0 auto;
  width: 100%;
  padding: 6px 24px;
}

.msg-user-text {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.55;
}

.msg-ai-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}

/* Light prose styles */
.prose-light { color: var(--text-1); line-height: 1.7; font-size: 14.5px; }
.prose-light h1,.prose-light h2 { font-weight: 600; margin: 1rem 0 .5rem; color: var(--text-1); }
.prose-light h3 { font-weight: 600; margin: .75rem 0 .375rem; }
.prose-light p  { margin-bottom: .7rem; }
.prose-light ul { list-style: disc; padding-left: 1.4rem; margin-bottom: .7rem; }
.prose-light ol { list-style: decimal; padding-left: 1.4rem; margin-bottom: .7rem; }
.prose-light li { margin-bottom: .25rem; }
.prose-light strong { font-weight: 600; color: var(--text-1); }
.prose-light a  { color: var(--blue); text-decoration: underline; }
.prose-light code {
  background: var(--input-bg);
  color: #d84315;
  padding: .1rem .35rem;
  border-radius: 4px;
  font-size: .85em;
}
.prose-light pre {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .9rem 1rem;
  overflow-x: auto;
  margin: .75rem 0;
}
.prose-light pre code { background: none; color: var(--text-1); padding: 0; }
.prose-light blockquote {
  border-left: 3px solid var(--blue);
  padding-left: .9rem;
  color: var(--text-2);
  margin: .6rem 0;
}
.prose-light hr { border-color: var(--border); margin: 1rem 0; }
.prose-light table { border-collapse: collapse; width: 100%; margin: .75rem 0; font-size: 13.5px; }
.prose-light th { background: var(--bg2); font-weight: 600; }
.prose-light th, .prose-light td { border: 1px solid var(--border); padding: .55rem .75rem; text-align: left; }

/* Streaming cursor */
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.streaming-cursor::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  animation: blink .8s step-start infinite;
  color: var(--blue);
}

/* ── Joke ticker ────────────────────────────────────────────────────────────── */
.joke-ticker {
  font-size: 11.5px;
  color: var(--text-3);
  font-style: italic;
  margin-top: 8px;
  min-height: 16px;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.joke-ticker.fade { opacity: 0; }

/* ── Follow-up buttons ──────────────────────────────────────────────────────── */
.followup-btn {
  display: block; width: 100%; text-align: left;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.followup-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); transform: none; }

/* ── Sources ────────────────────────────────────────────────────────────────── */
.sources-card {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-2);
}
.sources-card p.sources-title { font-weight: 600; color: var(--text-1); margin-bottom: 6px; }

/* ── Reformat bar ───────────────────────────────────────────────────────────── */
.reformat-bar { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
.reformat-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.reformat-btn:hover { border-color: var(--blue); color: var(--blue); transform: none; }
.csv-export-btn:hover { border-color: var(--green) !important; color: var(--green) !important; }
.csv-export-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Report download card ───────────────────────────────────────────────────── */
.report-card {
  border: 1.5px solid #b7d9b7;
  background: #f0faf0;
  border-radius: var(--r-card);
  padding: 12px 16px;
  display: flex; align-items: flex-start; gap: 12px;
}
.report-download-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--green);
  color: #fff;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s;
}
.report-download-btn:hover { opacity: .85; transform: none; }

/* ── Max Mode status panel ──────────────────────────────────────────────────── */
.max-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: 'DM Mono', monospace, var(--font);
  color: var(--text-2);
  background: var(--bg2);
}
.max-panel-title { font-weight: 600; color: var(--text-1); margin-bottom: 4px; font-size: 12.5px; }

/* ── Conversation history items ─────────────────────────────────────────────── */
.conv-item {
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.conv-item:hover { background: var(--bg2); }
.conv-item.active { background: var(--blue-light); }

/* ── Settings & auth page shell ─────────────────────────────────────────────── */
.page-header {
  height: 56px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}

.back-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none; background: transparent;
  color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.back-btn:hover { background: rgba(0,0,0,.06); color: var(--text-1); }

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--blue);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn-primary:hover { background: var(--blue-dark); transform: none; }
.btn-primary:disabled { opacity: .5; cursor: default; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  text-decoration: none;
}
.btn-secondary:hover { border-color: var(--border-hover); color: var(--text-1); transform: none; }

.btn-danger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--red);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-danger:hover { background: var(--red-light); border-color: var(--red); transform: none; }

/* ── Form inputs ────────────────────────────────────────────────────────────── */
.form-input {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,115,232,.12);
}
.form-input::placeholder { color: var(--text-3); }
.form-input:disabled { background: var(--bg2); color: var(--text-3); cursor: not-allowed; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 6px;
}

/* ── Tabs (settings page) ───────────────────────────────────────────────────── */
.tab-nav { border-bottom: 1px solid var(--border); display: flex; gap: 4px; overflow-x: auto; }
.tab-btn {
  padding: 10px 18px;
  border: none; border-bottom: 2.5px solid transparent;
  background: none;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text-1); transform: none; }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ── Toggle switch ──────────────────────────────────────────────────────────── */
.toggle-track {
  width: 44px; height: 24px;
  border-radius: 12px;
  background: #dadce0;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  border: none;
  flex-shrink: 0;
}
.toggle-track.on { background: var(--blue); }
.toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .2s;
}
.toggle-track.on .toggle-knob { transform: translateX(20px); }

/* ── Flash / alert messages ─────────────────────────────────────────────────── */
.flash { padding: 10px 16px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.flash-error   { background: var(--red-light);   border: 1px solid #f8bdba; color: #b31412; }
.flash-success { background: var(--green-light);  border: 1px solid #a8d5b5; color: #137333; }
.flash-info    { background: var(--blue-light);   border: 1px solid #aecbfa; color: #1558b0; }

/* ── RAG not-ready banner ───────────────────────────────────────────────────── */
.rag-not-ready-banner {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: #fffbeb;
  border-bottom: 1px solid #fcd34d;
  color: #92400e;
  font-size: 13.5px;
  flex-shrink: 0;
  z-index: 10;
}
.rag-not-ready-banner.hidden { display: none; }
.rag-not-ready-content { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.rag-not-ready-icon { font-size: 15px; margin-top: 2px; flex-shrink: 0; color: #b45309; }
.rag-not-ready-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; line-height: 1.5; }
.rag-not-ready-title { font-weight: 600; margin-right: 4px; }
.rag-not-ready-link { color: #b45309; text-decoration: underline; font-weight: 500; }
.rag-not-ready-link:hover { color: #92400e; }

/* ── Auth card ──────────────────────────────────────────────────────────────── */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow-sm);
}

/* ── Modals ─────────────────────────────────────────────────────────────────── */
/* Modals start hidden via Tailwind's .hidden class (display:none !important).
   main.js shows them by removing .hidden and adding .flex — both Tailwind classes.
   We must NOT set display here, or we'd conflict with those class changes. */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 50;
  align-items: center; justify-content: center;
  padding: 16px;
}
/* When Tailwind adds .flex class, display:flex kicks in */
.modal-backdrop.flex { display: flex; }
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px;
  max-height: 90vh;
  display: flex; flex-direction: column;
}
.modal-box-lg { max-width: 680px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h3 { font-weight: 600; font-size: 15px; color: var(--text-1); }
.modal-close {
  width: 30px; height: 30px;
  border-radius: 50%; border: none; background: none;
  color: var(--text-2); cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.modal-close:hover { background: var(--bg2); transform: none; }
.modal-body { overflow-y: auto; padding: 20px 24px; flex: 1; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  flex-shrink: 0;
}

/* ── Data preview overlay ───────────────────────────────────────────────────
   The story's own export, shown where the number that summarised it is. Wide, and
   the table scrolls inside its own box so the header row stays put over long lists
   while the footer's two exits stay on screen. */
.dp-box { max-width: 900px; width: min(900px, 95vw); }
.dp-subtitle { font-size: 12.5px; color: var(--text-2); margin: 0 0 12px; }
.dp-masked {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; margin: 0 0 12px;
}
.dp-table-wrap {
  border: 1px solid var(--border); border-radius: 10px;
  overflow: auto; max-height: 52vh;
}
.dp-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.dp-table th, .dp-table td {
  padding: 6px 10px; text-align: left; white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--border);
}
/* Sticky + border-collapse loses the header's border in several browsers, so the
   rules here are inset shadows rather than borders. */
.dp-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface); font-weight: 600; color: var(--text-2);
}
.dp-table tbody tr:hover td { background: var(--bg2); }
.dp-table .dp-num { text-align: right; font-variant-numeric: tabular-nums; }
.dp-note { font-size: 11.5px; color: var(--text-3); margin-top: 10px; }
.dp-empty { font-size: 13px; color: var(--text-2); }
.dp-footer { justify-content: space-between; }
.dp-source {
  font-size: 11.5px; color: var(--text-3); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ── Toast ──────────────────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 60;
  max-width: 340px;
  padding: 12px 18px;
  border-radius: var(--r-card);
  font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px;
}
.toast-success { background: var(--green-light); border: 1px solid #a8d5b5; color: #137333; }
.toast-error   { background: var(--red-light);   border: 1px solid #f8bdba; color: #b31412; }

/* ── Status badge ───────────────────────────────────────────────────────────── */
#status-indicator {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-2);
}

/* ── Stat card (summary modal) ──────────────────────────────────────────────── */
.stat-card {
  background: var(--bg2);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.stat-card .stat-val { font-size: 1.6rem; font-weight: 700; color: var(--text-1); }
.stat-card .stat-lbl { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* ── Dataset summary modal ──────────────────────────────────────────────────── */
.ds-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ds-stat-card { text-align: left; }
.ds-stat-card .stat-val { font-size: 1.8rem; }
.ds-stat-card .stat-lbl { font-size: 12px; margin-top: 4px; }
.ds-rebuild-val { font-size: 1.1rem !important; }
.ds-rag-summary-wrap { margin-top: 16px; }
.ds-rag-summary-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ds-rag-summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 600; }
.ds-rag-summary-date { font-size: 11.5px; color: var(--text-3); }
.ds-rag-summary-text { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; font-size: 13.5px; color: var(--text-2); line-height: 1.65; white-space: pre-wrap; }

/* ── Service card (settings) ────────────────────────────────────────────────── */
.service-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.service-card.selected { border-color: var(--blue); background: var(--blue-light); }
.service-card:hover:not(.selected) { border-color: var(--border-hover); }

/* ── Preset buttons (settings) ──────────────────────────────────────────────── */
.preset-btn, .max-iter-btn, .cr-iter-btn, .acc-thresh-btn {
  padding: 6px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.preset-btn:hover, .max-iter-btn:hover, .cr-iter-btn:hover, .acc-thresh-btn:hover {
  border-color: var(--blue); color: var(--blue); transform: none;
}
.preset-btn.active  { border-color: var(--blue); background: var(--blue-light); color: var(--blue); }
.max-iter-btn.active,.cr-iter-btn.active,.acc-thresh-btn.active {
  border-color: var(--green); background: var(--green-light); color: var(--green);
}

/* ── Log panel ──────────────────────────────────────────────────────────────── */
#log-container {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 11.5px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  height: 280px;
  overflow-y: auto;
  color: var(--text-2);
}

/* ── Animations ─────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.fa-spin { animation: spin 1s linear infinite; }

/* ── Word cycler ────────────────────────────────────────────────────────────── */
.word-cycler {
  display: inline-block;
  min-width: 7rem;
  font-size: .8rem;
  font-style: italic;
  color: var(--text-3);
  opacity: 0;
  margin-left: 8px;
  transition: opacity .8s ease-in-out;
}

/* ── Mobile-only nav controls (hidden by default, shown by media queries) ─────── */
#mobile-menu-btn { display: none; }

/* ── Mobile navigation popover ───────────────────────────────────────────────── */
#mobile-nav-menu {
  display: none;
  position: fixed;
  top: 60px; left: 8px;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  z-index: 150;
  min-width: 180px;
  overflow: hidden;
}
#mobile-nav-menu.open { display: flex; }
.mobile-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border: none; background: transparent;
  font-family: var(--font); font-size: 14px; color: var(--text-2);
  cursor: pointer; text-align: left; width: 100%;
  transition: background .12s;
}
.mobile-nav-item:hover { background: var(--bg2); }
.mobile-nav-item i { width: 16px; text-align: center; color: var(--text-3); }
.mobile-nav-divider { border-top: 1px solid var(--border); margin: 4px 0; }
.mnav-user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

/* Tablet (641px – 900px): recover header real estate, fix iOS viewport height */
@media (max-width: 900px) {
  .app-root { height: 100dvh; }                /* iOS address-bar collapsing fix */
  .util-chip { display: none; }                /* reclaim ~64px in header */
  .header-search-input, .header-search-input:focus { width: 120px; }
  .input-area-wrap {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* Phone (≤640px) */
@media (max-width: 640px) {
  :root { --sidebar-w: 0px; }
  #icon-sidebar { display: none; }
  #mobile-menu-btn { display: flex; }
  #main-header { padding: 0 8px; gap: 4px; }
  .header-app-name { display: none; }
  .word-cycler { display: none; }
  #share-btn, #download-btn, #summary-btn, #view-qa-btn, #max-mode-btn { display: none; }
  #header-search { display: none; }
  #conv-drawer { left: 0; width: min(var(--drawer-w), 85vw); }
  .msg-row { padding: 6px 14px; }
  #message-input { font-size: 16px; }          /* prevent iOS auto-zoom on focus */
  .input-area-wrap {
    padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .input-form { max-width: 100%; }
  .user-dropdown-menu {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Waiting badge in conversation list ─────────────────────────────────────── */
.waiting-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 1px 7px;
  border-radius: var(--r-pill);
  background: #fef9e7; border: 1px solid #f5c518; color: #9c6e00;
}
.active-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--blue-light); border: 1px solid var(--blue); color: var(--blue);
}

/* ── Profile avatar ─────────────────────────────────────────────────────────── */
.avatar-circle {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: #fff;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Sidebar internals ───────────────────────────────────────────────────────── */
.sidebar-logo {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue); border: none;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; flex-shrink: 0;
  cursor: pointer; transition: opacity .15s;
}
.sidebar-logo:hover { opacity: .85; }
.sidebar-logo i { color: #fff; font-size: 14px; }

.sidebar-spacer { flex: 1; }

.sidebar-status-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 20px; margin-bottom: 8px;
}
.sidebar-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f59e0b; display: inline-block;
}

.user-avatar-sidebar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 14px;
  font-family: var(--font); transition: opacity .15s;
}
.user-avatar-sidebar:hover { opacity: .85; transform: none; }

.user-dropdown-menu {
  /* display is managed by JS inline style — no display:none here */
  position: fixed;
  left: calc(var(--sidebar-w) + 8px);
  bottom: 8px;
  width: 230px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  z-index: 100;
}
.dropdown-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.dropdown-header-name {
  font-weight: 600; font-size: 13px; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-header-email {
  font-size: 12px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: 13.5px; color: var(--text-2);
  text-decoration: none; transition: background .12s;
}
.dropdown-link:hover { background: var(--bg2); }
.dropdown-link i { width: 14px; text-align: center; }
.dropdown-divider { border-top: 1px solid var(--border); margin: 4px 0; }
.dropdown-signout-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; width: 100%; border: none; background: none;
  font-family: var(--font); font-size: 13.5px; color: var(--red);
  cursor: pointer; transition: background .12s;
}
.dropdown-signout-btn:hover { background: var(--red-light); transform: none; }
.dropdown-signout-btn i { width: 14px; text-align: center; }

/* ── Conversation drawer internals ───────────────────────────────────────────── */
.drawer-header {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.drawer-title { font-weight: 600; font-size: 14px; color: var(--text-1); flex: 1; }
.drawer-header-action-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: transparent;
  color: var(--text-2); cursor: pointer; font-size: 13px;
  transition: background .15s, color .15s; text-decoration: none; flex-shrink: 0;
}
.drawer-header-action-btn:hover { background: rgba(0,0,0,.07); color: var(--text-1); }
/* Normalize the × close button to match action icons inside drawer headers */
.drawer-header .modal-close { width: 28px; height: 28px; font-size: 14px; }
.drawer-new-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r-card);
  background: var(--surface); color: var(--text-2);
  font-family: var(--font); font-size: 13px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.drawer-new-btn:hover { border-color: var(--blue); color: var(--blue); transform: none; }
.drawer-new-btn i { font-size: 11px; }
.drawer-list-wrap { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.drawer-empty { font-size: 12.5px; color: var(--text-3); font-style: italic; padding: 8px 4px; }

/* ── Main header internals ───────────────────────────────────────────────────── */
.header-app-name { font-size: 16px; font-weight: 600; color: var(--text-1); }
.header-spacer { flex: 1; }
.header-status-text { font-size: 12px; color: var(--text-3); margin-right: 4px; }
/* Utilization chips (CPU, GPU). Idle is #fff — invisible against the header on
   purpose, so a quiet machine shows nothing and only load draws the eye. */
.util-chip {
  display: flex; align-items: center;
  padding: 2px 4px;
  transition: color .3s;
}
.util-chip i { font-size: 14px; color: #fff; transition: color .3s; }
.util-chip.util-active i  { color: #4ade80; }
.util-chip.util-warm i    { color: #f97316; }
.util-chip.util-hot i     { color: #facc15; }
.util-chip.util-critical i{ color: #ef4444; }

/* ── Welcome screen ──────────────────────────────────────────────────────────── */
.welcome-wrap {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100%;
  padding: 40px 24px;
}
.welcome-heading {
  font-size: 2.1rem; font-weight: 500; color: var(--text-1);
  margin-bottom: 32px; text-align: center;
}
.suggestions-list {
  width: 100%; max-width: 540px;
  display: flex; flex-direction: column; gap: 2px;
}
/* ── Welcome-screen question pagination (matches reference screenshot) ──────── */
.suggestion-pagination {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 18px rgba(60,64,67,.16);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
}
/* Left arrow — plain, no background */
.suggestion-page-prev {
  background: none; border: none;
  color: var(--text-3); cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 13px;
  transition: color .15s;
}
.suggestion-page-prev:hover:not(:disabled) { color: var(--text-1); }
.suggestion-page-prev:disabled { opacity: .38; cursor: default; }
/* Right arrow — gray-box background */
.suggestion-page-next {
  background: #f1f3f4; border: none;
  color: var(--text-2); cursor: pointer;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 13px;
  transition: background .15s, color .15s;
}
.suggestion-page-next:hover:not(:disabled) { background: #e8eaed; color: var(--text-1); }
.suggestion-page-next:disabled { opacity: .45; cursor: default; }
/* Number buttons */
.suggestion-page-nums { display: flex; align-items: center; gap: 4px; }
.suggestion-page-num {
  background: none; border: 1px solid #e0e3e7; border-radius: 8px;
  color: var(--text-2); cursor: pointer; width: 34px; height: 34px;
  font-family: var(--font); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.suggestion-page-num:hover:not(.active) { border-color: #c4c7cc; color: var(--text-1); }
.suggestion-page-num.active { background: #1a73e8; border-color: #1a73e8; color: #fff; cursor: default; }
/* Ellipsis */
.suggestion-page-ellipsis {
  color: var(--text-3); font-size: 13px; letter-spacing: 1px;
  width: 24px; text-align: center; -webkit-user-select: none; user-select: none;
}

/* ── Input area ──────────────────────────────────────────────────────────────── */
.input-area-wrap {
  border-top: 1px solid var(--border); padding: 10px 20px 8px;
  background: var(--surface); flex-shrink: 0;
}
.input-form { max-width: var(--max-content); margin: 0 auto; }
.input-footer-note {
  text-align: center; font-size: 11.5px; color: var(--text-3); margin-top: 4px;
}
.deployment-ts-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-3); font-size: 11.5px; font-family: inherit;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color 0.15s;
}
.deployment-ts-btn:hover { color: var(--text-2); }
.deploy-version { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.deploy-desc    { font-size: 14px; color: var(--text-1); line-height: 1.6; white-space: pre-wrap; }

/* #stop-button display is governed by Tailwind .hidden class (added/removed by setInFlightUI).
   The display:flex comes from the primary #stop-button rule above (~line 233).
   Do NOT add display:none here — that duplicates the rule and always wins. */

/* ── Main content shell ──────────────────────────────────────────────────────── */
.main-col {
  display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden;
}
.messages-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }

/* ── Story inline viewer ────────────────────────────────────────────────────── */
#nb-viewer {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.nb-viewer-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.nb-viewer-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Breadcrumbs (24 Oct 2026): the path to the screen, in every viewer bar ──
   Home › the menu the screen is picked from › the screen (the `crumbs` macro in
   index.html). Crumbs are text buttons; the last is the page the reader is on and
   keeps the bar's title style. The separator is DRAWN, so a screen reader reads the
   path rather than a "greater than" sign, and it sits before every visible crumb
   that has a visible crumb before it (a Care Manager's bar shows its title alone). */
.mi-crumbs { min-width: 0; flex: 0 1 auto; }
.mi-crumbs-list {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 2px; margin: 0; padding: 0; list-style: none; min-width: 0;
}
.mi-crumb { display: inline-flex; align-items: center; flex-shrink: 0; min-width: 0; }
.mi-crumb[hidden] { display: none; }
.mi-crumb:not([hidden]) ~ .mi-crumb::before {
  content: ''; flex-shrink: 0;
  width: 6px; height: 6px; margin: 0 2px 0 4px;
  border-top: 1.5px solid var(--text-3); border-right: 1.5px solid var(--text-3);
  transform: rotate(45deg);
}
.mi-crumb-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px; border: 0; border-radius: 6px;
  background: none; color: var(--text-2);
  font-family: var(--font); font-size: 13px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
}
.mi-crumb-link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.mi-crumb-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.mi-crumb-home { padding-left: 0; }
.mi-crumb-home i { font-size: 12px; }
/* The page being read: a long name gives way before the crumbs ahead of it do. */
.mi-crumb-here { flex-shrink: 1; }
.mi-crumb-here > * { padding: 4px 6px; }
.mi-crumb-here .di-title, .mi-crumb-here .db-title {
  display: inline-block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .mi-crumb-mid { display: none; }   /* a phone keeps Home and the page */
}
/* "Back to <dashboard>" on a storybook opened from one: a button, not a crumb —
   it goes where the reader came from, the breadcrumb beside it says where they are. */
.mi-from-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 5px 13px; border-radius: var(--r-pill);
  border: 1.5px solid var(--blue); background: var(--blue-light); color: var(--blue-dark);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background .15s;
}
.mi-from-btn:hover { background: #d2e3fc; }
.mi-from-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mi-from-btn[hidden] { display: none; }
@media (max-width: 640px) {
  .mi-from-label { display: none; }   /* a phone reads "Back" */
}

.nb-viewer-spacer { flex: 1; }

.nb-viewer-run-meta {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.nb-viewer-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.nb-viewer-refresh-btn:hover { border-color: var(--blue); color: var(--blue); }

/* Present (PowerPoint mode) toggle — filled while presentation mode is on */
.nb-viewer-ppt-btn.active,
.nb-viewer-ppt-btn.active:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.nb-history-select {
  max-width: 280px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.nb-history-select:hover, .nb-history-select:focus { border-color: var(--blue); color: var(--blue); }

.nb-viewer-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 14px;
  color: var(--text-2);
}
.nb-viewer-spinner { font-size: 28px; color: var(--blue); }
.nb-viewer-loading-text { font-size: 14px; color: var(--text-2); }

.nb-viewer-iframe {
  display: none;
  flex: 1;
  width: 100%;
  border: none;
  background: var(--bg);
}

/* ── Modals — Tailwind .hidden class hides them; .modal-backdrop base sets layout ── */
/* NOTE: do NOT add display:none here — that duplicates the rule on line ~571 and
   overrides Tailwind flex that main.js uses to show modals. */

/* ── Summary suggestions ──────────────────────────────────────────────────────── */
.summary-suggestion-btn {
  width: 100%; text-align: left; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  padding: 10px 14px; font-family: var(--font); font-size: 13px;
  color: var(--text-2); cursor: pointer; transition: border-color .15s, color .15s;
  display: flex; align-items: center; gap: 8px;
}
.summary-suggestion-btn:hover { border-color: var(--blue); color: var(--blue); transform: none; }
.summary-suggestion-btn i { color: var(--blue); font-size: 11px; flex-shrink: 0; }

/* ── Stat grid ────────────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 20px; }

/* ── Section label ────────────────────────────────────────────────────────────── */
.section-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px;
}

/* ── Topic pill ───────────────────────────────────────────────────────────────── */
.topic-pill {
  display: inline-block; background: var(--blue-light); color: var(--blue);
  padding: 3px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500;
}

/* ── Goal box ─────────────────────────────────────────────────────────────────── */
.goal-box {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px;
}
.goal-icon { font-size: 18px; margin-top: 1px; }
.goal-status { font-weight: 600; font-size: 13.5px; }
.goal-reason { font-size: 13px; color: var(--text-2); margin-top: 3px; }

/* ── Reformat copy btn ────────────────────────────────────────────────────────── */
.reformat-copy-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; font-size: 12.5px;
}

/* ── Body layout root ─────────────────────────────────────────────────────────── */
.app-root {
  display: flex; height: 100vh; overflow: hidden; background: var(--bg);
}

/* ── Drawer button wrapper ────────────────────────────────────────────────────── */
.drawer-btn-wrap { padding: 10px 12px; flex-shrink: 0; }

/* ── Input bar sub-rows ───────────────────────────────────────────────────────── */
.input-bar-left  { display: flex; align-items: center; gap: 4px; }
.input-bar-right { display: flex; align-items: center; gap: 8px; }

/* ── Modal body text ─────────────────────────────────────────────────────────── */
.modal-confirm-msg { font-size: 14px; color: var(--text-2); }

/* ── Modal loading / error states ────────────────────────────────────────────── */
.modal-loading {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px; gap: 12px;
}
.modal-loading-spinner { font-size: 24px; color: var(--blue); }
.modal-loading-text    { font-size: 13.5px; color: var(--text-2); }

.modal-error-wrap { padding: 32px 24px; text-align: center; }
.modal-error-icon { font-size: 22px; color: #f59e0b; margin-bottom: 10px; display: block; }
.modal-error-text { font-size: 13.5px; color: var(--text-2); }

/* ── Reformat loading (smaller padding) ──────────────────────────────────────── */
.modal-loading-sm { padding: 40px; }
.modal-loading-spinner-sm { font-size: 22px; color: var(--blue); }

/* ── Summary sections ────────────────────────────────────────────────────────── */
.summary-section      { margin-bottom: 16px; }
.summary-body-text    { font-size: 13.5px; color: var(--text-1); line-height: 1.65; }
.summary-intent-text  { font-size: 13.5px; color: var(--text-2); font-style: italic; line-height: 1.65; }
.summary-suggestions-col { display: flex; flex-direction: column; gap: 6px; }
.summary-findings-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 6px; }
.summary-findings-list li { font-size: 13.5px; color: var(--text-1); line-height: 1.6; }
.story-chart-item { margin-bottom: 12px; padding: 10px 12px; background: var(--bg2); border-radius: 8px; }
.story-chart-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.story-chart-text  { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* ── Reformat modal title row ────────────────────────────────────────────────── */
.reformat-title { display: flex; align-items: center; gap: 8px; }

/* ── Icon colour helpers ─────────────────────────────────────────────────────── */
.icon-blue { color: var(--blue); }
.icon-red  { color: var(--red); }
.icon-amber { color: #f59e0b; }
.icon-mr   { margin-right: 8px; }
.hidden { display: none !important; }

/* ── Auth pages ──────────────────────────────────────────────────────────────── */
.auth-page  { background: var(--bg2); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-wrap  { width: 100%; max-width: 440px; }
.auth-logo  { text-align: center; margin-bottom: 28px; }
.logo-icon  { width: 52px; height: 52px; border-radius: 50%; background: var(--blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.logo-icon i { color: #fff; font-size: 20px; }
.auth-title { font-size: 1.5rem; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.auth-sub   { font-size: 14px; color: var(--text-2); }
.auth-footer  { text-align: center; margin-top: 20px; font-size: 13.5px; color: var(--text-2); }
.auth-footer a { color: var(--blue); text-decoration: none; font-weight: 500; }
.auth-footer a:hover { text-decoration: underline; }
.forgot-link  { font-size: 12.5px; color: var(--blue); text-decoration: none; }
.forgot-link:hover { text-decoration: underline; }
.btn-full { width: 100%; justify-content: center; padding: 11px 20px; font-size: 14.5px; border-radius: 10px; margin-top: 8px; }
.btn-primary:disabled,
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
/* form utilities shared across auth pages */
.form-group   { margin-bottom: 16px; }
.form-row     { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.form-row .form-label { margin-bottom: 0; }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.name-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* password show/hide */
.pw-wrap   { position: relative; }
.pw-input  { padding-right: 40px; }
.pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 13px; padding: 4px; }
.pw-toggle:hover { color: var(--text-2); transform: translateY(-50%); }
/* page header title (change-password, profile) */
.page-header-title { font-size: 16px; font-weight: 600; color: var(--text-1); }
/* narrow page content (change-password) */
.page-content-sm { max-width: 480px; margin: 0 auto; padding: 28px 20px 48px; }
.card-subtitle   { font-size: 13.5px; color: var(--text-2); margin-bottom: 20px; }
/* profile page */
.profile-grid         { display: grid; grid-template-columns: 220px 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 640px) { .profile-grid { grid-template-columns: 1fr; } }
.avatar-card          { text-align: center; }
.avatar-circle-center { margin: 0 auto; }
.avatar-name  { font-weight: 600; font-size: 16px; color: var(--text-1); margin-top: 12px; }
.avatar-email { font-size: 13px; color: var(--text-3); margin-top: 2px; word-break: break-all; }
.avatar-meta  { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; font-size: 12.5px; color: var(--text-3); display: flex; flex-direction: column; gap: 6px; }
.page-title    { font-size: 1.4rem; font-weight: 600; color: var(--text-1); margin-bottom: 20px; }
.section-title { font-size: 15px; font-weight: 600; color: var(--text-1); margin-bottom: 14px; }
.security-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.lock-note     { font-size: 12px; color: var(--text-3); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.security-desc { font-size: 13.5px; color: var(--text-2); margin-bottom: 16px; }
/* CAPTCHA (forgot-password) */
.captcha-box      { background: var(--input-bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.captcha-row      { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.captcha-icon     { width: 32px; height: 32px; border-radius: 50%; background: var(--blue-light); display: flex; align-items: center; justify-content: center; color: var(--blue); flex-shrink: 0; }
.captcha-question { font-family: monospace; font-size: 15px; font-weight: 600; color: var(--text-1); }
.captcha-refresh  { margin-left: auto; background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 13px; padding: 4px; transition: color .15s; }
.captcha-refresh:hover { color: var(--text-1); transform: none; }
.input-no-spin { -moz-appearance: textfield; appearance: textfield; }
.input-no-spin::-webkit-inner-spin-button,
.input-no-spin::-webkit-outer-spin-button { appearance: none; }
/* password requirements (reset-password) */
.pw-reqs       { background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.pw-reqs-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; }
.pw-req        { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); margin-bottom: 4px; }
.pw-req i      { font-size: 8px; color: var(--text-3); transition: color .15s; }
.pw-req.met    { color: var(--green); }
.pw-req.met i  { color: var(--green); }
.match-msg  { font-size: 12px; margin-top: 4px; }
.match-ok   { color: var(--green); }
.match-fail { color: var(--red); }

/* ── Policy pages ────────────────────────────────────────────────────────────── */
.policy-page { max-width: 760px; }
.policy-meta {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-3); margin-bottom: 20px;
}
.policy-meta span { display: flex; align-items: center; gap: 6px; }
.policy-section { margin-bottom: 16px; }
.policy-section p { font-size: 14px; color: var(--text-2); line-height: 1.7; margin-bottom: 10px; }
.policy-section p:last-child { margin-bottom: 0; }
.policy-section a { color: var(--blue); text-decoration: underline; }
.policy-section a:hover { opacity: .8; }
.policy-list {
  list-style: disc; padding-left: 1.4rem;
  font-size: 14px; color: var(--text-2); line-height: 1.7;
  margin: 8px 0 10px;
}
.policy-list li { margin-bottom: 6px; }
.policy-list strong { color: var(--text-1); font-weight: 600; }
.policy-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--text-2); background: var(--blue-light);
  border: 1px solid #aecbfa; border-radius: 8px;
  padding: 10px 14px; margin-top: 14px;
}
.policy-table {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px; margin: 12px 0;
}
.policy-table th {
  background: var(--bg2); font-weight: 600; color: var(--text-1);
  padding: .5rem .75rem; text-align: left;
  border: 1px solid var(--border);
}
.policy-table td {
  padding: .5rem .75rem; color: var(--text-2);
  border: 1px solid var(--border); vertical-align: top;
}
.policy-links {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 20px 0 8px; border-top: 1px solid var(--border);
  margin-top: 8px;
}
.policy-links-label { font-size: 13px; color: var(--text-3); }
.policy-link-btn { font-size: 13px; padding: 7px 16px; }

/* ── Policy notice (register page) ──────────────────────────────────────────── */
.policy-notice {
  font-size: 12.5px; color: var(--text-3); text-align: center;
  line-height: 1.6; margin-bottom: 14px; padding: 10px 12px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px;
}
.policy-notice a { color: var(--blue); text-decoration: underline; font-weight: 500; }
.policy-notice a:hover { opacity: .8; }

/* ── Settings page ───────────────────────────────────────────────────────────── */
.settings-page { background: var(--bg2); color: var(--text-1); min-height: 100vh; }
.page-content  { max-width: 820px; margin: 0 auto; padding: 28px 20px 48px; }
.tab-content        { display: none; }
.tab-content.active { display: block; }
code { background: var(--input-bg); color: #d84315; padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.section-sep { border-top: 1px solid var(--border); margin: 20px 0; padding-top: 20px; }
.log-line    { line-height: 1.55; word-break: break-all; font-size: 11.5px; padding: 1px 0; }
.log-error   { color: var(--red); }
.log-warning { color: #c57b00; }
.log-normal  { color: var(--text-2); }

/* ── Landing overlay (logo-click home screen) ────────────────────────────────── */
.landing-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.landing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 36px 32px;
  width: 100%; max-width: 520px;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: landingIn .22s ease;
}
@keyframes landingIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.landing-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: 15px; padding: 6px 8px;
  border-radius: 8px; transition: background .15s, color .15s;
}
.landing-close:hover { background: var(--bg2); color: var(--text-1); }
.landing-logo  { text-align: center; margin-bottom: 10px; }
.landing-title { font-size: 1.5rem; font-weight: 700; color: var(--text-1); text-align: center; margin-bottom: 4px; }
.landing-sub   { font-size: 14px; color: var(--text-2); text-align: center; margin-bottom: 28px; }
.landing-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.landing-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 22px 16px; border-radius: 14px;
  border: 1.5px solid var(--border); background: var(--surface);
  cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
  text-align: center;
}
.landing-btn:hover:not(:disabled) {
  border-color: var(--blue); background: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(66,133,244,.1);
}
.landing-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.landing-btn i { font-size: 24px; color: var(--blue); }
.landing-btn-label { font-size: 14px; font-weight: 600; color: var(--text-1); }
.landing-btn-sub   { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.landing-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--text-3); margin-bottom: 12px;
}
.landing-divider::before,
.landing-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.landing-suggestions { display: flex; flex-direction: column; gap: 2px; }

/* ── Org-switch overlay ──────────────────────────────────────────────────────
   Sits above every panel/modal (z-index beats .landing-overlay at 200 and the
   modal backdrops) and swallows all pointer/keyboard input until the reload. */
.org-switch-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  cursor: wait;
}
.org-switch-overlay.hidden { display: none; }
.org-switch-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 40px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  max-width: 400px;
  animation: landingIn .18s ease;
}
.org-switch-spinner { font-size: 30px; color: var(--blue); }
.org-switch-title {
  margin: 18px 0 6px;
  font-size: 16px; font-weight: 600; color: var(--text-1);
}
.org-switch-sub { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.org-switch-sub .org-switch-name { font-weight: 600; color: var(--text-1); }

/* ── Org selector ────────────────────────────────────────────────────────────
   A brand lockup, not a form control: the client's logo at a size its mark can
   be read at, then their name, set off from "MyInsight" by a hairline rule.
   No border — the logo is the visual anchor, and a pill drawn round it both
   shrank it and made the header read as a row of inputs. The click target is
   shown on hover / open / keyboard focus instead. */
.org-selector-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: 4px;
  padding-left: 12px;
}
.org-selector-wrap::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  height: 28px;
  transform: translateY(-50%);
  border-left: 1px solid var(--border);
}
.org-selector-btn,
.org-label-static {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-1);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.org-selector-btn {
  cursor: pointer;
  transition: background .15s;
}
.org-selector-btn:hover,
.org-selector-btn[aria-expanded="true"] { background: rgba(0,0,0,.05); }
.org-selector-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.org-selector-btn > span,
.org-label-static > span {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
/* height sets the size; max-width + contain keep a long wordmark from
   pushing the name off the header without squashing its proportions. */
.org-logo {
  display: block;
  flex-shrink: 0;
  height: 30px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}
/* No logo file: the building icon stands in, in a slot the logo's height. */
.org-selector-btn .fa-building,
.org-label-static .fa-building {
  font-size: 18px;
  color: var(--text-3);
}
/* Font Awesome gives .fas a display, which outranks the browser's [hidden];
   only Tailwind's preflight, injected later, was hiding the stand-in beside a
   logo that loaded. Said here so it does not rest on load order. */
.org-selector-wrap .fa-building[hidden] { display: none; }
.org-chevron {
  font-size: 10px;
  color: var(--text-3);
  transition: transform .15s;
}
.org-selector-btn[aria-expanded="true"] .org-chevron { transform: rotate(180deg); }
.org-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 12px;
  /* Grow to the widest label so no option wraps; never narrower than the
     button, never wider than the viewport. */
  width: max-content;
  min-width: 100%;
  max-width: min(420px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 200;
}
.org-dropdown.hidden { display: none; }
.org-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.org-option .org-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-option:hover {
  background: var(--bg2);
  color: var(--text-1);
}
.org-option-active {
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 600;
}
/* Every option gives its logo the same 56 x 24 slot, so the names line up
   whatever shape each client's logo is. */
.org-option .org-logo {
  width: 56px;
  height: 24px;
  max-width: none;
}
.org-option .fa-building {
  width: 56px;
  text-align: center;
  font-size: 15px;
  color: var(--text-3);
}

@media (max-width: 640px) {
  /* "MyInsight" is hidden here, so there is nothing for the rule to separate. */
  .org-selector-wrap { margin-left: 0; padding-left: 0; }
  .org-selector-wrap::before { display: none; }
  .org-dropdown { left: 0; }
  .org-selector-btn, .org-label-static { gap: 8px; padding: 0 8px; }
  .org-logo { height: 26px; max-width: 90px; }
  .org-selector-btn > span, .org-label-static > span { max-width: 34vw; }
}

/* ── Downloads panel ─────────────────────────────────────────────────────── */
#downloads-panel {
  position: fixed;
  top: 0; left: var(--sidebar-w); bottom: 0;
  width: var(--drawer-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 25;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(-1 * var(--drawer-w) - var(--sidebar-w)));
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
#downloads-panel.open {
  transform: translateX(0);
}

.dl-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.dl-item-body { flex: 1; min-width: 0; }
.dl-item-name {
  font-size: 13px; font-weight: 500; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.dl-item-meta { font-size: 11.5px; color: var(--text-3); margin-bottom: 4px; }
.dl-item-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--blue); text-decoration: none;
  background: var(--blue-light); border-radius: 5px;
  padding: 3px 8px; margin-top: 2px;
  transition: opacity .15s;
}
.dl-item-link:hover { opacity: .8; }
.dl-item-generating { opacity: .65; }

/* ── Agent stats panel ───────────────────────────────────────────────────── */
#agent-stats-panel {
  position: fixed;
  top: 0; left: var(--sidebar-w); bottom: 0;
  width: var(--drawer-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 25;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(-1 * var(--drawer-w) - var(--sidebar-w)));
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
#agent-stats-panel.open { transform: translateX(0); }

.stat-panel-note {
  font-size: 11.5px; color: var(--text-3);
  padding: 10px 16px 4px; margin: 0; flex-shrink: 0;
}
.stat-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.stat-item-body { flex: 1; min-width: 0; }
.stat-item-name {
  font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 5px;
}
.stat-item-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--text-2);
  background: rgba(0,0,0,.04); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 7px;
}
.stat-chip-val { font-weight: 600; color: var(--text-1); }

/* ── Stories panel ───────────────────────────────────────────────────────── */
#notebooks-panel {
  position: fixed;
  top: 0; left: var(--sidebar-w); bottom: 0;
  width: var(--drawer-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 25;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(-1 * var(--drawer-w) - var(--sidebar-w)));
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
#notebooks-panel.open {
  transform: translateX(0);
}

/* ── Dashboards panel ─────────────────────────────────────────────────────── */
#dashboards-panel {
  position: fixed;
  top: 0; left: var(--sidebar-w); bottom: 0;
  width: var(--drawer-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 25;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(-1 * var(--drawer-w) - var(--sidebar-w)));
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
#dashboards-panel.open {
  transform: translateX(0);
}

.nb-drawer-icon {
  margin-right: 8px;
  color: var(--blue);
  font-size: 13px;
}

.nb-controls {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.nb-search-input {
  width: 100%;
  padding: 7px 11px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.nb-search-input:focus { border-color: var(--blue); }
.nb-search-input::placeholder { color: var(--text-3); }

.nb-sort-select {
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12.5px;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.nb-sort-select:focus { border-color: var(--blue); }

.nb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
  margin-bottom: 2px;
}
.nb-item:hover { background: var(--bg2); }
.nb-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* The storybook being read, so the menu a breadcrumb opens shows where the reader is. */
.nb-item-current, .nb-item-current:hover { background: var(--blue-light); }
.nb-item-current .nb-item-name { font-weight: 600; }

.nb-item-icon {
  color: var(--blue);
  font-size: 14px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.nb-item-body { flex: 1; min-width: 0; }
.nb-item-name {
  font-size: 13px; font-weight: 500; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-item-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.nb-item-open {
  color: var(--text-3);
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}
.nb-item:hover .nb-item-open { opacity: 1; }

/* Storybook categories — folders under notebooks/ starting with "__" (config.py's
   is_notebook_category_dir). Collapsed by default; searching force-expands a category
   that has a match (renderNotebooksList in index.html), independent of this state. */
.nb-category { margin-bottom: 2px; }

.nb-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background .15s;
}
.nb-category-header:hover { background: var(--bg2); }
.nb-category-header:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.nb-category-chevron {
  font-size: 10px;
  color: var(--text-3);
  flex-shrink: 0;
  width: 10px;
  text-align: center;
  transition: transform .15s;
}
.nb-category.expanded .nb-category-chevron { transform: rotate(90deg); }

.nb-category-icon {
  color: var(--blue);
  font-size: 13px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.nb-category-label {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nb-category-count {
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg2);
  border-radius: 10px;
  padding: 1px 7px;
  flex-shrink: 0;
}

.nb-category-body {
  display: none;
  padding-left: 8px;
  margin-left: 19px;
  border-left: 1.5px solid var(--border);
}
.nb-category.expanded .nb-category-body { display: block; }

/* ── Story organizer (Configuration page) ──────────────────────────────────── */
.org-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.org-new-category-form { display: flex; align-items: center; gap: 8px; }
.org-new-category-form .form-input { width: 240px; }

.org-section { margin-bottom: 14px; }

.org-dropzone {
  border-radius: var(--r-card);
  border: 1.5px solid var(--border);
  transition: border-color .15s, background .15s;
}
.org-dropzone.drag-over { border-color: var(--blue); background: var(--blue-light); }

.org-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.org-section-header .fa-folder-open, .org-section-header .fa-inbox { color: var(--blue); font-size: 14px; flex-shrink: 0; }
.org-section-label {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-section-label-input {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--text-1);
  padding: 3px 8px; border: 1.5px solid var(--blue); border-radius: 6px;
  font-family: var(--font); outline: none; background: var(--surface);
}
.org-section-count { font-size: 11.5px; color: var(--text-3); background: var(--bg2); border-radius: 10px; padding: 1px 8px; flex-shrink: 0; }

.org-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; border: none;
  background: transparent; color: var(--text-3); cursor: pointer;
  font-size: 12.5px; flex-shrink: 0; transition: background .15s, color .15s;
}
.org-icon-btn:hover { background: var(--bg2); color: var(--text-1); }
.org-icon-btn.org-icon-btn-danger:hover { background: var(--red-light); color: var(--red); }

.org-empty-hint {
  padding: 14px; font-size: 12.5px; color: var(--text-3); font-style: italic;
}

.org-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-top: 1px solid var(--border);
  cursor: grab;
}
.org-item:first-child { border-top: none; }
.org-item.dragging { opacity: .4; }
.org-item .fa-grip-vertical { color: var(--text-3); font-size: 11px; flex-shrink: 0; }
.org-item .fa-book { color: var(--blue); font-size: 13px; flex-shrink: 0; }
.org-item-name {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-item-move-select {
  font-size: 12px; color: var(--text-2); border: 1.5px solid var(--border);
  border-radius: 6px; padding: 4px 8px; background: var(--surface);
  font-family: var(--font); cursor: pointer; max-width: 160px; flex-shrink: 0;
}

/* ── Toast banner ────────────────────────────────────────────────────────── */
#toast-banner {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; align-items: center;
  gap: 8px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 10px;
  font-family: var(--font); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow); pointer-events: all;
  max-width: min(480px, 90vw);
  animation: toastIn .2s ease;
}
.toast.toast-hiding { animation: toastOut .25s ease forwards; }
.toast-error   { background: var(--red-light);   color: var(--red);   border: 1px solid #f5c6c4; }
.toast-warning { background: #fef7e0;             color: #7a5800;      border: 1px solid #f8d775; }
.toast-info    { background: var(--blue-light);   color: var(--blue);  border: 1px solid #c2d7f8; }
.toast-success { background: var(--green-light);  color: var(--green); border: 1px solid #b7dfbf; }
.toast i { flex-shrink: 0; font-size: 15px; }
.toast-msg { flex: 1; line-height: 1.4; }
.toast-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  padding: 2px 4px; border-radius: 5px; opacity: .6;
  color: inherit; font-size: 13px; transition: opacity .15s;
}
.toast-close:hover { opacity: 1; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }

/* ── Page-header extras (config / settings pages) ───────────────────────────── */
.page-header-spacer { flex: 1; }
.page-header-icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: transparent;
  color: var(--text-2); cursor: pointer; font-size: 14px;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.page-header-icon-btn:hover { background: rgba(0,0,0,.06); color: var(--text-1); }

/* ── Share popover ───────────────────────────────────────────────────────────── */
.share-anchor { position: relative; display: flex; align-items: center; }
.share-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  padding: 14px 16px 16px;
}
.share-popover.hidden { display: none; }
.share-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.share-popover-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.share-popover-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 18px; line-height: 1;
  padding: 0 2px; transition: color .15s;
}
.share-popover-close:hover { color: var(--text-1); }
.share-popover-body { display: flex; gap: 8px; align-items: stretch; }
.share-url-input {
  flex: 1; min-width: 0;
  font-size: 12.5px; color: var(--text-2);
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px;
  font-family: var(--font); cursor: text;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-copy-btn {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--blue); color: #fff;
  border: none; border-radius: 8px;
  padding: 7px 13px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s; font-family: var(--font);
}
.share-copy-btn:hover { background: var(--blue-dark); }

/* ── Story-viewer share button ───────────────────────────────────────────────── */
.nb-viewer-share-btn {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 12px;
  font-size: 13px; color: var(--text-2); cursor: pointer;
  transition: background .15s, color .15s; font-family: var(--font);
}
.nb-viewer-share-btn:hover { background: rgba(0,0,0,.05); color: var(--text-1); }

/* ── User Guide modal ────────────────────────────────────────────────────────── */
.guide-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: guideOverlayIn .18s ease-out;
}
.guide-modal-overlay[hidden] { display: none; }

@keyframes guideOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.guide-modal-box {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 1080px;
  height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: guideBoxIn .2s cubic-bezier(.4,0,.2,1);
}

@keyframes guideBoxIn {
  from { transform: translateY(18px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)     scale(1);   opacity: 1; }
}

.guide-modal-header {
  height: 52px;
  position: relative;   /* anchors the centred .guide-modal-release */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

.guide-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-1);
}
.guide-modal-title i { color: var(--blue); }

/* Release note in the modal title bar — same wording, size and clickable release link
   as the footer note (.input-footer-note + .deployment-ts-btn), filled by the
   /api/deployment/latest fetch in index.html. Absolutely centred rather than a third
   flex child, so it is centred on the modal itself and not on the space left over
   between the title and the close button. Stays hidden if the call fails or no
   deployment is recorded. */
.guide-modal-release {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 58%;
  margin: 0;
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Too narrow to sit clear of the title and close button. */
@media (max-width: 900px) { .guide-modal-release { display: none; } }

/* That link opens the Deployment modal from inside the guide overlay (z-index 200),
   so this one has to outrank it — .modal-backdrop's 50 would leave it behind the
   overlay, i.e. an apparently dead link. */
#deployment-modal { z-index: 250; }

.guide-modal-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: 50%;
  color: var(--text-2);
  cursor: pointer;
  font-size: 15px;
  transition: background .12s, color .12s;
}
.guide-modal-close:hover { background: rgba(0,0,0,.07); color: var(--text-1); }

.guide-modal-body {
  flex: 1;
  overflow: hidden;
}

#user-guide-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* dropdown-link as <button> — reset button appearance to match <a> */
button.dropdown-link {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
}

/* ── Analytics (OLAP slice-and-dice) ───────────────────────────────────────── */
#analytics-viewer {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Control-rail width — dragged by #an-rail-resizer, remembered per browser. */
  --an-rail-w: 280px;
}
.an-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.an-body { display: flex; flex: 1; min-height: 0; }

.an-rail {
  width: var(--an-rail-w, 280px);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Drag handle between the rail and the results pane. It sits *outside* the
   rail (its own flex item) so the "disable every control while a query runs"
   sweep over `.an-rail button, .an-rail select` never freezes it, and takes up
   ~1px of layout — the negative margins let its 9px hit area straddle the
   rail's border instead of pushing the panes apart. */
.an-rail-resizer {
  flex: 0 0 auto;
  width: 9px;
  margin: 0 -4px;
  z-index: 3;
  position: relative;
  cursor: col-resize;
  background: none;
  border: 0;
  padding: 0;
  touch-action: none;   /* the pointer drag owns horizontal movement */
}
/* Full-height line: invisible until pointed at, so the rail keeps its clean edge. */
.an-rail-resizer::before {
  content: '';
  position: absolute;
  inset: 0 4px;
  background: transparent;
  transition: background .12s ease;
}
/* Always-visible grip, so the handle is discoverable without hunting for it. */
.an-rail-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  background: var(--border);
  transition: background .12s ease, height .12s ease;
}
.an-rail-resizer:hover::before,
.an-rail-resizer:focus-visible::before,
.an-rail-resizer.an-dragging::before { background: var(--blue); }
.an-rail-resizer:hover::after,
.an-rail-resizer:focus-visible::after,
.an-rail-resizer.an-dragging::after { background: var(--blue); height: 54px; }
.an-rail-resizer:focus { outline: none; }
/* While dragging, the col-resize cursor and no text selection apply page-wide —
   the pointer routinely leaves the 9px handle mid-drag. */
body.an-resizing { cursor: col-resize; -webkit-user-select: none; user-select: none; }
body.an-resizing * { cursor: col-resize !important; }

.an-rail-section { display: flex; flex-direction: column; gap: 8px; }
.an-rail-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-3);
}
.an-rail-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-3); opacity: .8; }
/* Top-N ranking row. Wraps rather than squeezing: three controls sharing one
   280px line left the measure picker showing "first me…" and the direction
   "high…". They rejoin one line as soon as the rail is dragged wider. */
.an-topn-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.an-topn-row .an-topn-n { width: 64px; flex: 0 0 auto; }
.an-topn-row .an-topn-by { font-size: 12.5px; color: var(--text-2); flex: 0 0 auto; }
.an-topn-row .an-select { flex: 1 1 auto; min-width: 0; }
.an-topn-row #an-topn-measure { flex: 1 1 150px; }
.an-topn-row #an-topn-dir { flex: 1 1 110px; }
/* Calculated ratio measure chips stand apart from plain aggregations */
.an-chip-ratio { background: #fef7e0; color: #9a6700; }
.an-select, .an-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-1);
}
.an-select:focus, .an-input:focus { outline: none; border-color: var(--blue); }
.an-select-sm { width: auto; }

.an-chip-zone { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; }
.an-empty { font-size: 12px; color: var(--text-3); font-style: italic; }
.an-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--blue-light); color: var(--blue);
  font-size: 12.5px; font-weight: 500;
}
.an-chip-measure { background: #e6f4ea; color: var(--green); }
.an-chip i { cursor: pointer; font-size: 10px; opacity: .7; }
.an-chip i:hover { opacity: 1; }

/* Measure builder. The column picker carries the longest labels in the rail
   ("Distinct patients", "Calculated (ratios)" entries), so it gets a line to
   itself and the aggregation + add button share the next one. */
.an-measure-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.an-measure-add #an-measure-col { flex: 1 1 100%; }
/* Its own natural width — enough for "Count (distinct)", no more — shrinking
   only if the rail is dragged very narrow. */
.an-measure-add #an-measure-agg { flex: 0 1 auto; width: auto; min-width: 0; }
.an-measure-add #an-measure-addbtn { margin-left: auto; }
.an-btn-sm {
  flex-shrink: 0; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer; font-size: 12px;
}
.an-btn-sm:hover { border-color: var(--blue); color: var(--blue); }
.an-btn-ghost {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px; border: 1px dashed var(--border);
  background: none; color: var(--text-2); cursor: pointer; font-size: 12.5px;
}
.an-btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.an-btn-run {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 8px; border: none;
  background: var(--blue); color: #fff; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
}
.an-btn-run:hover { background: #1765cc; }

.an-filter-list { display: flex; flex-direction: column; gap: 6px; container-type: inline-size; }
/* The column/measure picker gets the larger share: its labels are long and
   fixed, while the value typed against it is usually short. */
.an-filter-row { display: grid; grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr) auto; gap: 5px; align-items: center; }
.an-filter-row .an-f-col, .an-filter-row .an-f-op, .an-filter-row .an-f-val { width: 100%; min-width: 0; }
.an-filter-row .an-h-meas, .an-filter-row .an-h-op, .an-filter-row .an-h-val { width: 100%; min-width: 0; }
/* Until the rail is dragged genuinely wide, the column/measure picker takes its
   own line rather than ellipsizing to two characters; it rejoins the operator
   and value on one line once there is room for all four. */
@container (max-width: 460px) {
  .an-filter-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .an-filter-row .an-f-col, .an-filter-row .an-h-meas { grid-column: 1 / -1; }
}

.an-results { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px; overflow: hidden; }
.an-results-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.an-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.an-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: none; background: var(--surface);
  color: var(--text-2); cursor: pointer; font-family: var(--font); font-size: 12.5px;
}
.an-toggle-btn.active { background: var(--blue-light); color: var(--blue); font-weight: 600; }
.an-results-head .an-btn-ghost { align-self: auto; }
.an-results-head select { margin-left: auto; }

.an-loading { padding: 24px; color: var(--text-2); font-size: 14px; }
.an-error {
  padding: 12px 14px; border-radius: 8px; margin-bottom: 12px;
  background: #fce8e6; color: var(--red); font-size: 13px;
}
.an-table-wrap { flex: 1; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.an-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.an-table th, .an-table td {
  padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.an-table thead th {
  position: sticky; top: 0; background: #f8f9fa; color: var(--text-2);
  font-weight: 600; font-size: 12px; z-index: 1;
}
.an-table tbody tr:hover { background: #f8f9fa; }
.an-table .an-num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table .an-total td { font-weight: 700; background: #f1f3f4; border-top: 2px solid var(--border); }

.an-chart-wrap { flex: 1; overflow: auto; }
.an-bars { display: flex; flex-direction: column; gap: 7px; padding: 4px; }
.an-bars-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.an-bar-row { display: grid; grid-template-columns: 160px 1fr 90px; gap: 10px; align-items: center; }
.an-bar-lbl { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar-track { background: #eef1f4; border-radius: var(--r-pill); height: 16px; overflow: hidden; }
.an-bar-fill { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); }
.an-bar-val { font-size: 12.5px; color: var(--text-1); text-align: right; font-variant-numeric: tabular-nums; }

.an-drill-wrap { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; max-height: 45%; display: flex; flex-direction: column; overflow: hidden; }
.an-drill-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.an-drill-head strong { color: var(--text-1); }
.an-drill-head #an-drill-export { margin-left: auto; }
.an-drill-table { max-height: 280px; }

/* results head: left (view/chart/csv) + right (drill) groups */
.an-results-head { justify-content: space-between; }
.an-head-left, .an-head-right { display: flex; align-items: center; gap: 10px; }

/* clickable table rows (drill into a group) */
.an-table tbody tr.an-row-click { cursor: pointer; }
.an-table tbody tr.an-row-click:hover { background: var(--blue-light); }

/* stat cards (no-dimension chart) */
.an-stats { display: flex; flex-wrap: wrap; gap: 16px; padding: 8px; }
.an-stat-card {
  min-width: 160px; padding: 18px 22px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface);
}
.an-stat-val { font-size: 30px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.an-stat-lbl { font-size: 13px; color: var(--text-2); margin-top: 4px; }

/* donut */
.an-donut-wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding: 8px; }
.an-donut { width: 220px; height: 220px; flex-shrink: 0; }
.an-donut-center { font-size: 22px; font-weight: 700; fill: var(--text-1); }
.an-legend { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.an-legend-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.an-leg-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.an-leg-sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; display: inline-block; }

/* line chart */
.an-line { width: 100%; max-width: 700px; height: auto; }
.an-line .an-axis { stroke: var(--border); stroke-width: 1; }
.an-axis-lbl { font-size: 11px; fill: var(--text-3); }

/* rail bottom row: Queries + Assistant side by side */
.an-rail-bottom-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.an-rail-bottom-row .an-btn-ghost { margin-top: 0; }

/* saved queries button in rail */
.an-save-queries-btn { }

/* assistant button — a labelled control in the rail (full width under Run), purple on hover.
   The base rule was missing: only the hover survived an earlier rail layout, so the button
   itself had gone with it and the feature was a tooltipped header icon. */
.an-assistant-rail-btn { display: block; width: 100%; margin-top: 8px; text-align: left; }
.an-assistant-rail-btn:hover { border-color: #7c3aed; color: #7c3aed; }

/* assistant modal */
.an-assistant-modal-box { max-width: 540px; }
.an-assistant-modal-body { display: flex; flex-direction: column; gap: 12px; }
.an-assistant-hint { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0; }
.an-assistant-hint em { color: var(--text-1); font-style: normal; }
.an-assistant-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-family: var(--font); font-size: 13.5px; color: var(--text-1);
  resize: vertical; min-height: 90px; box-sizing: border-box;
}
.an-assistant-textarea:focus { outline: none; border-color: #7c3aed; }
/* build button — purple theme */
#an-assistant-build-btn { background: #7c3aed; }
#an-assistant-build-btn:hover { background: #6d28d9; }
#an-assistant-build-btn:disabled { background: #c4b5fd; cursor: not-allowed; }

/* saved queries modal */
.an-saved-modal-body { display: flex; flex-direction: column; gap: 4px; }
.an-save-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.an-save-row .an-input { flex: 1; min-width: 0; }
.an-saved-section-label { margin-bottom: 6px; }
.an-saved-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.an-saved-empty { padding: 8px 0; }
.an-saved-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.an-saved-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.an-saved-name { font-size: 13px; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-saved-meta { font-size: 11px; color: var(--text-3); }
.an-saved-actions { display: flex; gap: 6px; flex-shrink: 0; }
.an-sq-share-url { display: flex; gap: 6px; align-items: center; padding: 6px 12px 10px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; margin-top: -3px; background: #f8f9fa; }
.an-sq-share-input { flex: 1; min-width: 0; font-size: 12px; }

/* cube tab bar */
.an-cube-tabs { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-left: 12px; }
.an-cube-tab {
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border);
  background: none; cursor: pointer; font-family: var(--font); font-size: 12.5px;
  color: var(--text-2); white-space: nowrap; transition: background .12s, color .12s, border-color .12s;
  display: inline-flex; align-items: center; gap: 6px;
}
.an-cube-tab:hover { border-color: var(--blue); color: var(--blue); }
.an-cube-tab-active { background: var(--blue-light); color: var(--blue); border-color: var(--blue); font-weight: 600; }

/* rail bottom row (Queries + Assistant side by side) */
.an-rail-bottom-row { display: flex; gap: 6px; flex-wrap: wrap; }
.an-rail-bottom-row .an-btn-ghost { flex: 1; justify-content: center; }

/* grouped bars (pivot) */
.an-grp { display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: start; padding: 5px 0; border-bottom: 1px solid #f1f3f4; }
.an-grp-lbl { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; }
.an-grp-bars { display: flex; flex-direction: column; gap: 4px; }

/* ── Data Integrity Check viewer ──────────────────────────────────────────── */
#integrity-viewer {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.di-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.di-title { font-size: 14px; font-weight: 600; color: var(--text-1); display: inline-flex; align-items: center; gap: 8px; }
.di-title i { color: var(--blue); }
.di-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: 12.5px; cursor: pointer;
}
.di-btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.di-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-2); }
.di-loading-text { font-size: 14px; }
.di-error { padding: 12px 14px; border-radius: 8px; margin: 16px; background: #fce8e6; color: var(--red); font-size: 13px; }
.di-body { flex: 1; overflow: auto; padding: 18px 22px; }

.di-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.di-chip { font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: var(--r-pill); }
.di-chip-fail { background: #fce8e6; color: var(--red); }
.di-chip-warn { background: #fef7e0; color: #b06000; }
.di-chip-ok   { background: var(--green-light); color: var(--green); }
.di-chip-info { background: #e8f0fe; color: var(--blue); }

.di-section { margin-bottom: 24px; }
.di-h { font-size: 15px; font-weight: 600; color: var(--text-1); margin: 0 0 10px; }
.di-h-count { color: var(--text-2); font-weight: 400; }
.di-fact { font-size: 13px; color: var(--text-2); margin: 2px 0; }

.di-table-wrap { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; overflow: auto; }
.di-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.di-table th, .di-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.di-table th { background: var(--surface); font-weight: 600; color: var(--text-2); }
.di-table tr:last-child td { border-bottom: none; }
.di-table .di-num { text-align: right; font-variant-numeric: tabular-nums; }
.di-bad { color: var(--red); font-weight: 600; }

.di-finding { border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; margin-bottom: 10px; background: var(--surface); }
.di-finding-fail { border-left-color: var(--red); }
.di-finding-warn { border-left-color: #e37400; }
.di-finding > summary { cursor: pointer; padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-1); list-style: none; display: flex; align-items: center; gap: 9px; }
.di-finding > summary::-webkit-details-marker { display: none; }
.di-finding-body { padding: 0 14px 12px 14px; font-size: 13px; color: var(--text-2); }
.di-finding-body p { margin: 4px 0; }
.di-details { margin: 6px 0 6px 18px; padding: 0; }
.di-details li { margin: 2px 0; }
.di-rec { background: #f8f9fa; border-radius: 6px; padding: 8px 10px; margin-top: 8px !important; color: var(--text-1); }
.di-rec i { color: #e37400; margin-right: 5px; }

.di-sev { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; }
.di-sev-fail { background: #fce8e6; color: var(--red); }
.di-sev-warn { background: #fef7e0; color: #b06000; }
.di-sev-ok   { background: var(--green-light); color: var(--green); }

.di-passblock > summary { cursor: pointer; list-style: none; }
.di-passblock > summary::-webkit-details-marker { display: none; }
.di-passlist { list-style: none; padding: 10px 0 0; margin: 0; }
.di-passlist li { font-size: 12.5px; color: var(--text-2); padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.di-reclist { margin: 0; padding-left: 20px; }
.di-reclist li { font-size: 13px; color: var(--text-1); margin: 6px 0; }

.di-btn-run {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--r-pill); border: none;
  background: var(--blue); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.di-btn-run:hover { filter: brightness(0.95); }
.di-empty { max-width: 460px; margin: 8% auto 0; text-align: center; color: var(--text-2); }
.di-empty-icon { font-size: 40px; color: var(--border); margin-bottom: 14px; }
.di-empty-title { font-size: 16px; font-weight: 600; color: var(--text-1); margin: 0 0 8px; }
.di-empty-sub { font-size: 13px; line-height: 1.5; margin: 0 0 18px; }

/* ── Dashboards ───────────────────────────────────────────────────────────────
   Every dashboard viewer is generated from src/dashboard_registry.py with the id
   <prefix>-viewer, so the shell is styled by class, not by id. showMainView()
   sets display:flex on the active one. The db-* block below is the shared
   vocabulary (bar, cards, tiles, charts) that all dashboards draw from. */
.dash-viewer {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.db-bar {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0;
}
.db-title { font-size: 14px; font-weight: 600; color: var(--text-1); display: inline-flex; align-items: center; gap: 8px; }
.db-title i { color: var(--blue); }
.db-body { flex: 1; overflow: auto; padding: 20px 24px; background: var(--bg2); }
.db-wrap { max-width: var(--max-content); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.db-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.db-tiles-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* A column so a tile's trend can sit at its FOOT (margin-top:auto below): labels wrap
   to different depths, and sparklines left in the flow stepped up and down across the
   row instead of reading as one strip. */
.db-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
}
.db-tile-value { font-size: 24px; font-weight: 600; color: var(--text-1); line-height: 1.2; font-variant-numeric: tabular-nums; }
.db-tiles-sm .db-tile-value { font-size: 20px; }
.db-tile-label { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.35; }
.db-tile-sub   { font-size: 11.5px; color: var(--text-3); margin-top: 4px; line-height: 1.35; }
.db-good { color: var(--green); }
.db-bad  { color: var(--red); }
/* The measure's PUBLISHED external reference ("NHPCO ≈ 15–20%"), which is part of the
   saved payload — not the org's own target, which is the green line on the trend. */
.db-bench { color: #b06000; }

/* A tile that opens the notebook behind its number. Button reset + the same hover
   treatment the clickable action rows use, so "this opens something" reads the same
   way in both cards. */
button.db-tile {
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
button.db-tile:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
button.db-tile:hover .db-tile-label { color: var(--blue); }
button.db-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.db-tile-spark { margin-top: auto; padding-top: 10px; height: 26px; }
.db-tile-spark:empty { display: none; }

/* Sets the org's target for the numbers on this card. Drawn hidden and revealed once
   the trend layer confirms the reader is an org admin. */
.db-bench-btn {
  float: right; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 11.5px; font-weight: 500; color: var(--text-2); cursor: pointer;
}
.db-bench-btn:hover { border-color: var(--green); color: var(--green); transform: none; }
.db-bench-btn i { font-size: 10px; color: var(--green); }

/* ── Benchmark editor (built by dashboard-base.js) ─────────────────────────── */
.bm-box { max-width: 560px; width: min(560px, 94vw); }
.bm-intro { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 16px; }
.bm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--bg2);
}
.bm-row:last-of-type { border-bottom: none; }
.bm-row-label { font-size: 13px; color: var(--text-1); min-width: 0; }
.bm-row-now { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.bm-row-input { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bm-row-input input {
  width: 110px; padding: 6px 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--input-bg); color: var(--text-1);
  text-align: right; font-variant-numeric: tabular-nums;
}
.bm-row-input input:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.bm-row-unit { font-size: 12px; color: var(--text-3); width: 10px; }
.bm-error { margin-top: 14px; font-size: 12.5px; color: var(--red); }

.db-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.db-row > .db-card-wide { grid-column: auto; }
@media (max-width: 900px) { .db-row { grid-template-columns: 1fr; } }

.db-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 16px 18px;
  box-shadow: var(--shadow-xs); min-width: 0;
}
.db-card-full { grid-column: 1 / -1; }
.db-card-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 12px; }
.db-card-note { font-size: 11.5px; font-weight: 400; color: var(--text-3); margin-left: 6px; }
.db-note { font-size: 11.5px; color: var(--text-3); margin-top: 10px; line-height: 1.45; }
.db-empty { font-size: 13px; color: var(--text-3); padding: 14px 0; }
.db-src {
  font-size: 11px; color: var(--text-3); margin-top: 8px;
  border-top: 1px dashed var(--border); padding-top: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.db-src i { margin-right: 4px; opacity: .8; }
.db-src-link {
  font: inherit; font-size: 11.5px; color: var(--blue); background: none; border: none;
  padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.db-src-link:hover, .db-src-link:focus-visible { color: var(--blue-dark); }
.db-src-link-plain { color: var(--text-3); cursor: default; text-decoration: none; }
.db-src-link + .db-src-link::before { content: ' · '; color: var(--text-3); text-decoration: none; }

.db-chart { width: 100%; height: auto; display: block; }
.db-ax { font-size: 10px; fill: var(--text-3); font-family: var(--font); }
.db-pt-label { font-size: 10.5px; font-weight: 600; fill: var(--text-2); font-family: var(--font); }
.db-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.db-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.db-legend-note { color: var(--text-3); }
.db-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

#db-tooltip {
  position: fixed; display: none; z-index: 300; pointer-events: none;
  background: #202124; color: #fff; font-size: 12px; line-height: 1.5;
  padding: 8px 11px; border-radius: 8px; box-shadow: var(--shadow);
  max-width: 260px; font-variant-numeric: tabular-nums;
}

.db-kv { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bg2); flex-wrap: wrap; }
.db-kv:last-of-type { border-bottom: none; }
.db-kv-label { font-size: 12.5px; color: var(--text-2); flex: 1; min-width: 140px; }
.db-kv-val { font-size: 13.5px; font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.db-kv-detail { font-size: 11px; color: var(--text-3); width: 100%; }
/* A waterfall line that is a subtotal, not another step — used by the LEAD
   settlement card so "Benchmark after adjustments" reads as a result. */
.db-kv-total { border-top: 1px solid var(--border); border-bottom: none; padding-top: 9px; margin-top: 3px; }
.db-kv-total .db-kv-label { color: var(--text-1); font-weight: 600; }
.db-kv-total .db-kv-val { font-size: 15px; }
/* A memo line sits outside the arithmetic above it (Enhanced PCC, UCP): dimmed and
   inset so it can never be read as part of the total it follows. */
.db-kv-memo { opacity: 0.72; }
.db-kv-memo .db-kv-label { font-style: italic; padding-left: 12px; }
.db-subhead { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
              color: var(--text-3); margin: 14px 0 4px; }
.db-chip { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
           padding: 1px 6px; border-radius: 999px; background: var(--bg2); color: var(--text-3);
           vertical-align: middle; }

.db-hbars { display: flex; flex-direction: column; gap: 7px; }
.db-hbar-row { display: flex; align-items: center; gap: 9px; }
.db-hbar-label { font-size: 12px; color: var(--text-2); width: 120px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-hbar-track { flex: 1; height: 14px; background: var(--bg2); border-radius: 4px; overflow: hidden; }
.db-hbar-fill { display: block; height: 100%; background: var(--blue); border-radius: 4px 4px 4px 4px; }
.db-hbar-val { font-size: 12px; color: var(--text-1); font-weight: 600; width: 62px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.db-action { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--bg2); }
.db-action:last-of-type { border-bottom: none; }
.db-action-count { font-size: 21px; font-weight: 600; color: var(--blue); min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
.db-action-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.db-action-label { font-size: 13px; font-weight: 500; color: var(--text-1); }
.db-action-detail { font-size: 11.5px; color: var(--text-3); }
/* A row that opens the list behind its number. Rendered as a <button>, so it needs
   the button reset; the negative margin lets the hover surface bleed past the text
   without moving the count column out of line with the unclickable rows. */
button.db-action { width: calc(100% + 16px); margin-left: -8px; padding: 9px 8px;
                   background: none; font: inherit; text-align: left; cursor: pointer;
                   border: none; border-bottom: 1px solid var(--bg2); border-radius: 8px; }
button.db-action:hover { background: var(--bg2); }
button.db-action:hover .db-action-label,
button.db-action:hover .db-action-go { color: var(--blue); }
button.db-action:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.db-action-go { padding-left: 8px; font-size: 17px; line-height: 1;
                color: var(--text-3); flex-shrink: 0; }

/* Count-over-time beside each action list, one point per saved dashboard run.
   Neutral by design — on these lists "up" is not automatically good news, so the
   colour reads as "trend" and the tooltip carries the direction. */
.db-action-spark { display: flex; align-items: center; height: 26px; width: 72px;
                   flex: 0 0 auto; }
.db-spark { display: block; }
.db-spark-area { fill: var(--blue); opacity: .10; stroke: none; }
.db-spark-line { fill: none; stroke: var(--blue); stroke-width: 1.5;
                 stroke-linejoin: round; stroke-linecap: round; }
.db-spark-base { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
.db-spark-dot  { fill: var(--blue); }
/* The org's benchmark for this number. Green because it is the target, and solid
   because it is a fact about the goal — the dashed rule above is the starting value. */
.db-spark-bench { stroke: var(--green); stroke-width: 1.25; }

.db-table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: auto; }
.db-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.db-table th, .db-table td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.db-table th { background: var(--surface); font-weight: 600; color: var(--text-2); }
.db-table tr:last-child td { border-bottom: none; }
.db-table .db-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Summary Dashboard ──────────────────────────────────────────────────────
 * Reads as a document, not a card deck: a white reading surface, a sticky rail
 * carrying reading position, and chapters whose headings state the finding with
 * the figure set inside the sentence. Chart primitives are shared with the
 * executive dashboard's db-* block above.
 */
/* The narrative dashboards (REACH summary, LEAD summary) drop the card grid for a
   full-bleed story column; the shell itself is .dash-viewer like every other. */
#sdb-body, #lsdb-body { background: var(--bg); padding: 0 24px 96px; }

/* The rail anchors the left edge; the story column centres in the space beside
   it. Centring the rail + column as one block left a gutter outside the rail and
   made it look like it was floating; left-aligning both pinned the story to the
   left edge of a wide screen. Pinning only the rail keeps both right. */
.sdb-story {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 194px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
/* width:100% is load-bearing — auto margins on a grid item make it shrink-to-fit,
   which sizes it to its widest child (the practice table) and overflows once the
   rail drops away. An explicit width keeps it bound to the column. */
.sdb-flow { min-width: 0; width: 100%; max-width: 880px; margin: 0 auto; }

/* Story rail — reading position and coverage in one mark. */
.sdb-rail { position: sticky; top: 0; padding: 34px 0; }
.sdb-rail-inner { border-left: 1px solid var(--border); }
.sdb-rail-group {
  font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-3); padding: 16px 0 6px 16px;
}
.sdb-rail-group:first-child { padding-top: 0; }
.sdb-rail-item {
  display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font-family: var(--font);
  font-size: 12.5px; line-height: 1.35; color: var(--text-2);
  padding: 5px 8px 5px 16px; margin-left: -1px; border-left: 2px solid transparent;
}
.sdb-rail-item:hover { color: var(--text-1); }
.sdb-rail-item.is-current { color: var(--text-1); font-weight: 600; border-left-color: var(--blue); }
.sdb-rail-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: var(--border-hover); transform: translateY(-2px);
}
.sdb-rail-item.is-current .sdb-rail-dot { background: var(--blue); }
.sdb-rail-text { min-width: 0; }
.sdb-rail-missing { color: var(--text-3); }
.sdb-rail-missing .sdb-rail-dot { background: none; box-shadow: inset 0 0 0 1px var(--border-hover); }

/* Opening — the number the rest of the story is an account of. */
.sdb-lede { padding: 44px 0 8px; scroll-margin-top: 8px; }
.sdb-lede-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 18px;
}
.sdb-lede-figure {
  font-size: 76px; font-weight: 500; letter-spacing: -.045em; line-height: 1;
  color: var(--text-1); font-variant-numeric: tabular-nums;
}
.sdb-lede-dir { font-size: 15px; font-weight: 600; margin-top: 10px; }
.sdb-lede-head { font-size: 27px; font-weight: 500; letter-spacing: -.02em; color: var(--text-1); margin: 0; }
.sdb-lede-deck, .sdb-ch-deck {
  font-size: 15px; line-height: 1.6; color: var(--text-2);
  max-width: 64ch; margin: 16px 0 0;
}
.sdb-lede-missing .sdb-lede-deck { max-width: 64ch; }

/* Movement — the turn in the argument. */
.sdb-mv { margin: 60px 0 4px; padding-top: 22px; border-top: 1px solid var(--border); }
.sdb-mv-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--blue);
}
.sdb-mv-thesis { font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 64ch; margin: 10px 0 0; }

/* Chapter — heading states the finding, figure set inside the sentence. */
.sdb-ch { padding: 30px 0 8px; scroll-margin-top: 8px; }
.sdb-ch-head {
  font-size: 21px; font-weight: 400; line-height: 1.4; letter-spacing: -.008em;
  color: var(--text-2); max-width: 30ch; margin: 0;
}
.sdb-fig {
  font-size: 31px; font-weight: 600; letter-spacing: -.03em; color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.sdb-ch-head-muted { color: var(--text-3); font-size: 18px; }
.sdb-ch-missing { padding: 22px 0 4px; }
.sdb-ch-missing .sdb-ch-deck { font-size: 13px; color: var(--text-3); margin-top: 8px; }
.sdb-ch-missing .sdb-ch-foot { margin-top: 12px; }

/* Supporting numbers — a run, not a grid of boxes. */
.sdb-run { display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0 0; }
.sdb-run-item { padding: 0 22px; border-left: 1px solid var(--border); }
.sdb-run-item:first-child { padding-left: 0; border-left: 0; }
.sdb-run-val {
  font-size: 19px; font-weight: 600; color: var(--text-1); line-height: 1.2;
  font-variant-numeric: tabular-nums; margin: 0;
}
.sdb-run-label { font-size: 11.5px; color: var(--text-3); margin: 3px 0 0; line-height: 1.35; }

.sdb-ch-body { margin-top: 26px; }
/* A chart placed straight in the flow keeps a readable width; charts inside
   .sdb-col are already bounded by their column. */
.sdb-ch-body > .db-chart, .sdb-ch-body > .db-legend { max-width: 640px; }
.sdb-ch-body > .db-kv { max-width: 720px; }
.sdb-ch-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.sdb-ch-foot .db-src { margin: 0; }
.sdb-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; color: var(--text-3);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap;
}
/* The clickable variant — a <button>, not a <span>, so it needs its own reset.
   Blue like every other storybook link (.db-src-link) rather than the neutral
   .sdb-tag, so a reader can tell at a glance which tags open something. */
.sdb-tag-link {
  font: inherit; background: none; cursor: pointer; color: var(--blue); border-color: var(--blue);
}
.sdb-tag-link i { font-size: 9px; margin-left: 3px; }
.sdb-tag-link:hover, .sdb-tag-link:focus-visible { color: var(--blue-dark); border-color: var(--blue-dark); }
.sdb-coda { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin: 56px 0 0; max-width: 64ch; }
/* Source paths are long unbreakable tokens; let them wrap instead of widening
   the page at tablet widths. */
.sdb-flow .db-note, .sdb-flow .db-src { overflow-wrap: anywhere; }

/* One reveal, tied to the same observer that drives the rail. */
@media (prefers-reduced-motion: no-preference) {
  .sdb-reveal { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
  .sdb-reveal.is-in { opacity: 1; transform: none; }
}

.sdb-cols { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.sdb-col { flex: 1 1 260px; min-width: 240px; }
.sdb-col-title { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 20px 0 10px; }
.sdb-col > .sdb-col-title:first-child, .sdb-ch-body > .sdb-col-title:first-child { margin-top: 0; }
.sdb-ax-title { font-size: 10.5px; fill: var(--text-2); font-weight: 600; font-family: var(--font); }

.sdb-donut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sdb-donut-svg { width: 150px; height: 150px; flex-shrink: 0; }
.sdb-donut-legend { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sdb-legend-count { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.sdb-donut-pct { font-size: 10.5px; font-weight: 600; fill: #fff; font-family: var(--font); }
.sdb-donut-total { font-size: 17px; font-weight: 600; fill: var(--text-1); font-family: var(--font); font-variant-numeric: tabular-nums; }
.sdb-donut-sub { font-size: 9.5px; fill: var(--text-3); font-family: var(--font); }

.sdb-hollow-dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  background: #fff; border: 2px solid #1a73e8;
}

.sdb-seg-track { display: flex; gap: 2px; }   /* 2px surface gap between segments */
.sdb-seg { display: block; height: 100%; border-radius: 3px; }

.sdb-pairs { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.sdb-pair-row { display: flex; gap: 10px; align-items: center; }
.sdb-pair-label { font-size: 11.5px; color: var(--text-2); width: 128px; flex-shrink: 0; line-height: 1.3; }
.sdb-pair-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sdb-pair-line { display: flex; align-items: center; gap: 7px; }
.sdb-pair-track { flex: 1; height: 9px; background: var(--bg2); border-radius: 3px; overflow: hidden; }
.sdb-pair-fill { display: block; height: 100%; border-radius: 3px; }
.sdb-pair-val { font-size: 11px; font-weight: 600; color: var(--text-1); width: 56px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.sdb-hm-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin: 6px 0 4px; }
.sdb-hm { display: grid; gap: 2px; background: var(--surface); padding: 2px; min-width: 560px; }
.sdb-hm-corner, .sdb-hm-head {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  padding: 7px 8px; background: var(--surface); text-align: center;
}
.sdb-hm-corner { text-align: left; }
.sdb-hm-rowlab {
  font-size: 11.5px; color: var(--text-2); padding: 6px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; background: var(--surface);
}
.sdb-hm-cell {
  font-size: 11.5px; font-weight: 600; color: var(--text-1);
  padding: 6px 4px; text-align: center; border-radius: 4px;
  font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center;
}
.sdb-hm-empty { background: var(--bg2); color: var(--text-3); font-weight: 400; }
.sdb-hm-flag-high { box-shadow: inset 0 0 0 2px var(--red); }
.sdb-hm-flag-low  { box-shadow: inset 0 0 0 2px var(--blue); }

/* Narrow: the rail folds away and the story runs full width. */
@media (max-width: 1000px) {
  .sdb-story { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sdb-rail { display: none; }
}
@media (max-width: 640px) {
  #sdb-body, #lsdb-body { padding: 0 16px 72px; }
  .sdb-lede { padding-top: 30px; }
  .sdb-lede-figure { font-size: 54px; }
  .sdb-ch-head { font-size: 19px; max-width: none; }
  .sdb-fig { font-size: 26px; }
  .sdb-run-item { padding: 0 16px; }
  .sdb-run-item:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ── Ask about this view (brain button → split dock) ─────────────────────────
   .main-split is a row: every main view sits in .main-stack on the left, the QA
   dock on the right. The dock is `hidden` (not display:none by class) so the
   split collapses to exactly the old layout when it is closed — no width, no
   handle, nothing to lay out. */
.main-split {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  --view-qa-w: 400px;
}
.main-stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.view-qa-dock {
  width: var(--view-qa-w);
  flex: 0 0 var(--view-qa-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
}
.view-qa-dock[hidden] { display: none; }

/* Same 9px grab strip as the analytics rail, mirrored: this one lives to the
   LEFT of the panel it sizes, so dragging left widens. It shares the JS's
   .an-dragging / body.an-resizing classes. */
.view-qa-resizer {
  flex: 0 0 auto;
  width: 9px;
  margin: 0 -4px;
  z-index: 3;
  position: relative;
  cursor: col-resize;
  background: none;
  border: 0;
}
.view-qa-resizer[hidden] { display: none; }
.view-qa-resizer::before {
  content: '';
  position: absolute;
  inset: 0 4px;
  background: transparent;
  transition: background .12s ease;
}
.view-qa-resizer::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 34px;
  transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  background: var(--border-hover);
  transition: background .12s ease, height .12s ease;
}
.view-qa-resizer:hover::before,
.view-qa-resizer:focus-visible::before,
.view-qa-resizer.an-dragging::before { background: var(--blue); }
.view-qa-resizer:hover::after,
.view-qa-resizer:focus-visible::after,
.view-qa-resizer.an-dragging::after { background: var(--blue); height: 54px; }
.view-qa-resizer:focus { outline: none; }

.view-qa-bar {
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.view-qa-title {
  font-size: 14px; font-weight: 600; color: var(--text-1);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.view-qa-title i { color: var(--blue); }
.view-qa-icon-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 50%;
  color: var(--text-2); cursor: pointer; font-size: 14px;
}
.view-qa-icon-btn:hover { background: rgba(0,0,0,.06); color: var(--text-1); }

.view-qa-context {
  font-size: 11.5px; color: var(--text-3);
  padding: 8px 16px; border-bottom: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0;
}

.view-qa-thread {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}

.view-qa-empty { display: flex; flex-direction: column; gap: 14px; }
.view-qa-empty-lead { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.view-qa-starters { display: flex; flex-direction: column; gap: 8px; }
.view-qa-starter {
  text-align: left; font-family: inherit; font-size: 12.5px; line-height: 1.45;
  color: var(--text-1); background: var(--bg2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; cursor: pointer;
}
.view-qa-starter:hover { border-color: var(--blue); background: var(--blue-light); }

.view-qa-msg { display: flex; }
.view-qa-msg-user { justify-content: flex-end; align-items: flex-start; gap: 4px; }
.view-qa-msg-ai { flex-direction: column; gap: 6px; align-items: flex-start; }

/* Delete: quiet until you go looking for it. Hidden by opacity rather than
   display so it never reflows the message when it appears, and always shown on
   keyboard focus — a control reachable by Tab but invisible is a trap. */
.view-qa-del {
  flex-shrink: 0;
  width: 24px; height: 24px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 6px;
  color: var(--text-3); cursor: pointer; font-size: 11px;
  opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.view-qa-msg:hover .view-qa-del,
.view-qa-del:focus-visible { opacity: 1; }
.view-qa-del:hover { color: var(--red); background: var(--red-light); }
/* Touch has no hover, so there the control is simply always visible. */
@media (hover: none) {
  .view-qa-del { opacity: 1; }
}
/* The wrapper exists so a turn's delete button can be repainted on its own when
   the server confirms the row was saved — it must take no space while empty. */
.view-qa-msg-ai > [data-part="actions"]:empty,
.view-qa-msg-user > [data-part="actions"]:empty { display: none; }
.view-qa-msg-ai > [data-part="actions"] { margin-left: -4px; }
.view-qa-bubble {
  max-width: 90%; background: var(--input-bg); border-radius: 14px 14px 4px 14px;
  padding: 9px 13px; font-size: 13px; line-height: 1.5; color: var(--text-1);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.view-qa-answer { font-size: 13px; line-height: 1.6; color: var(--text-1); overflow-wrap: anywhere; }
.view-qa-answer p { margin: 0 0 9px; }
.view-qa-answer p:last-child { margin-bottom: 0; }
.view-qa-answer ul, .view-qa-answer ol { margin: 0 0 9px; padding-left: 20px; }
.view-qa-answer li { margin-bottom: 4px; }
.view-qa-answer h1, .view-qa-answer h2, .view-qa-answer h3 {
  font-size: 13.5px; font-weight: 600; margin: 12px 0 6px;
}
.view-qa-answer code {
  font-size: 12px; background: var(--bg2); border-radius: 4px; padding: 1px 4px;
}
/* Quoted source is the point of this panel, so give it room to be read — but
   never let a long line push the dock wider than the user sized it. */
.view-qa-answer pre {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; overflow-x: auto; margin: 0 0 9px; max-width: 100%;
}
.view-qa-answer pre code { background: none; padding: 0; font-size: 11.5px; line-height: 1.5; }
.view-qa-answer table { border-collapse: collapse; font-size: 12px; display: block; overflow-x: auto; }
.view-qa-answer th, .view-qa-answer td { border: 1px solid var(--border); padding: 4px 8px; }

.view-qa-thinking { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.view-qa-error {
  font-size: 12.5px; color: var(--red); background: var(--red-light);
  border-radius: 8px; padding: 9px 12px; line-height: 1.5;
}
/* Blinking caret on the last line while tokens are still arriving, so a slow
   model reads as "writing" rather than "finished with a short answer". */
.view-qa-streaming > :last-child::after {
  content: '';
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--blue);
  animation: view-qa-caret 1s steps(2, start) infinite;
}
@keyframes view-qa-caret { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .view-qa-streaming > :last-child::after { animation: none; }
}
.view-qa-stopped { font-size: 11.5px; color: var(--text-3); font-style: italic; margin-top: 6px; }

.view-qa-sources { font-size: 11.5px; color: var(--text-2); }
.view-qa-sources summary { cursor: pointer; color: var(--text-3); }
.view-qa-sources summary:hover { color: var(--text-2); }
.view-qa-sources ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.view-qa-src { display: flex; flex-direction: column; gap: 1px; padding-left: 9px; border-left: 2px solid var(--border); }
.view-qa-src-name { color: var(--text-1); font-weight: 500; overflow-wrap: anywhere; }
.view-qa-src-note { color: var(--text-3); overflow-wrap: anywhere; }
.view-qa-src-code    { border-left-color: var(--blue); }
.view-qa-src-export  { border-left-color: var(--green); }
.view-qa-src-missing { border-left-color: var(--red); }

.view-qa-form {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px 4px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.view-qa-input {
  flex: 1; min-width: 0; resize: none;
  font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--text-1);
  background: var(--input-bg); border: 1px solid transparent; border-radius: 14px;
  padding: 9px 12px; max-height: 160px; overflow-y: auto;
}
.view-qa-input:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.view-qa-input:disabled { opacity: .6; }
.view-qa-send {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: var(--blue); color: #fff;
  cursor: pointer; font-size: 13px;
}
.view-qa-send:hover:not(:disabled) { background: var(--blue-dark); }
.view-qa-send:disabled { background: var(--border-hover); cursor: default; }
/* Same button, Stop state, while an answer is streaming. */
.view-qa-send.view-qa-stop { background: var(--text-1); }
.view-qa-send.view-qa-stop:hover { background: var(--red); }
.view-qa-note { font-size: 10.5px; color: var(--text-3); padding: 0 14px 8px; line-height: 1.4; }

/* Narrow: there is no room to split, so the dock covers the view instead of
   squeezing it — the answer is still about the page behind it. */
@media (max-width: 900px) {
  .view-qa-dock {
    position: absolute; inset: 0; z-index: 25;
    width: auto; flex-basis: auto;
    box-shadow: var(--shadow-lg);
  }
  .main-split { position: relative; }
  .view-qa-resizer { display: none; }
}

/* ── Patient Overview dashboard ──────────────────────────────────────────────
   The one dashboard the reader drives, so it carries controls the read-only
   dashboards never needed: a dual-handle range slider, a checkbox multi-select,
   a saved-views dropdown and a pager. Everything else reuses .db-card / .an-*.
   Rendered by static/js/patient-overview-dashboard.js. */

.pov-wrap { max-width: 1240px; }

.pov-toolbar {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 12px 16px; box-shadow: var(--shadow-xs);
}
/* `.an-btn-ghost` sets `align-self: flex-start` for the analytics rail, which is a
   vertical column. Here the toolbar is a ROW whose tallest item is the labelled Month
   field, and align-self beats the container's align-items — so Reset filters hung 25px
   above the controls beside it. Put it back on the row's baseline. The Saved views
   button escaped this only because its positioning wrapper, not the button, is the
   flex item; naming both keeps them from diverging if that wrapper ever goes. */
.pov-toolbar > .an-btn-ghost,
.pov-toolbar .mi-views > .an-btn-ghost { align-self: flex-end; }
.pov-toolbar-spacer { flex: 1 1 auto; }
.pov-toolbar-field { display: flex; flex-direction: column; gap: 4px; }
.pov-toolbar-field > span {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}
.pov-count { font-size: 13px; color: var(--text-2); white-space: nowrap; padding-bottom: 6px; }
.pov-count strong { color: var(--text-1); font-variant-numeric: tabular-nums; font-size: 15px; }

.pov-warn {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fef7e0; border: 1px solid #f5d98a; color: #7a5300;
  border-radius: var(--r-card); padding: 10px 14px; font-size: 12.5px; line-height: 1.5;
}
.pov-warn i { margin-top: 2px; }

/* Top row: the donuts + the state selector. `stretch`, not `start`: the selector card
   holds far less than a donut, and letting it end short leaves a ragged edge that reads
   as a layout bug rather than as an empty control.

   The track floor is sized for the SHIPPED set — six donuts and the selector, seven
   cards — to split 4 + 3 at the wrap's max width (4 x 270 + 3 x 16 gap = 1128 <= 1240,
   and a fifth track would need 1414). The old 230px floor fitted the earlier five cards
   on one row, but seven at five-a-row is 5 + 2 with three fifths of the second row
   empty. The config order puts the ED and hospital-stay cards — the two with the
   longest legends — on the second row beside the selector, so their height stretches
   a row that has room for it rather than the top one. A donut is 148px and its legend
   sits beneath it, so an org that configures more filters wraps rather than shrinks. */
.pov-top {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  align-items: stretch;
}
.pov-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 16px 18px;
  box-shadow: var(--shadow-xs); min-width: 0;
}
.pov-card-title {
  font-size: 14px; font-weight: 600; color: var(--text-1);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
/* "This chart filters" — an icon, because the words wrapped under the longer titles
   once the row held five cards and pushed those donuts out of line with the rest. */
.pov-card-hint { font-size: 10px; color: var(--text-3); flex-shrink: 0; cursor: help; }
.pov-clear-btn {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-family: var(--font); font-size: 11.5px; color: var(--blue); padding: 0;
}
.pov-clear-btn:hover { text-decoration: underline; }
.pov-skeleton { height: 148px; border-radius: 10px; background: var(--input-bg); }

/* donut */
.pov-donut-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pov-donut { width: 148px; height: 148px; flex-shrink: 0; }
.pov-donut-total { font-size: 20px; font-weight: 700; fill: var(--text-1); }
.pov-donut-sub   { font-size: 9px; fill: var(--text-3); letter-spacing: .06em; text-transform: uppercase; }
.pov-donut-arc { transition: opacity .12s ease; }
.pov-donut-arc.pov-clickable { cursor: pointer; }
.pov-donut-arc.pov-clickable:hover { opacity: .82 !important; }
.pov-donut-arc:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.pov-donut-empty { font-size: 12.5px; color: var(--text-3); padding: 30px 0; text-align: center; }

.pov-legend { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 120px; }
.pov-leg {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px solid transparent; border-radius: 8px; background: none;
  padding: 4px 7px; cursor: pointer; font-family: var(--font); text-align: left;
}
.pov-leg:hover:not(:disabled) { background: var(--bg2); }
.pov-leg:disabled { cursor: default; }
.pov-leg-on { border-color: var(--border-hover); background: var(--bg2); }
.pov-leg-dim { opacity: .55; }
.pov-leg-sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pov-leg-lbl {
  font-size: 12.5px; color: var(--text-2); flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pov-leg-val { font-size: 12.5px; color: var(--text-1); font-variant-numeric: tabular-nums; }
/* A slice label with a fuller name behind it (the ED card's ACG abbreviations): the
   dotted underline is <abbr>'s own convention for "hover for the full name". */
.pov-leg-abbr { text-decoration: underline dotted; text-underline-offset: 3px;
                text-decoration-color: var(--text-3); }

/* multi-select */
.pov-card-select { position: relative; }
.pov-select-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 8px 11px; font-family: var(--font); font-size: 13px; color: var(--text-1);
  cursor: pointer; text-align: left;
}
.pov-select-btn:hover { border-color: var(--border-hover); }
.pov-select-btn i { margin-left: auto; font-size: 10px; color: var(--text-3); }
.pov-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pov-select-panel {
  position: absolute; z-index: 30; left: 18px; right: 18px; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); padding: 8px;
}
.pov-select-search {
  width: 100%; box-sizing: border-box; padding: 7px 10px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 7px;
  font-family: var(--font); font-size: 12.5px; background: var(--input-bg);
}
.pov-select-search:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.pov-select-list { max-height: 240px; overflow-y: auto; }
.pov-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text-1);
}
.pov-opt:hover { background: var(--bg2); }
.pov-opt input { accent-color: var(--blue); flex-shrink: 0; }
.pov-opt-lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pov-opt-n { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.pov-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pov-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--blue-light); color: var(--blue-dark);
  border: none; border-radius: var(--r-pill); padding: 3px 9px;
  font-family: var(--font); font-size: 11.5px; cursor: pointer;
}
.pov-chip:hover { background: #d6e4fd; }
.pov-chip i { font-size: 9px; opacity: .7; }

.pov-masked-note {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12.5px; color: var(--text-3); line-height: 1.5;
  background: var(--bg2); border-radius: 8px; padding: 10px 12px;
}

/* dual-handle range sliders */
.pov-ranges {
  display: grid; gap: 14px 26px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.pov-range-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.pov-range-label {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pov-range-info { font-size: 10px; color: var(--text-3); margin-left: 4px; cursor: help; }
.pov-range-val {
  margin-left: auto; font-size: 12px; color: var(--text-1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pov-range-active .pov-range-val { color: var(--blue); font-weight: 600; }

/* Two overlaid inputs: the tracks are transparent and only the thumbs take
   pointer events, so both handles are grabbable on the one rail. */
.pov-range-track { position: relative; height: 26px; }
.pov-range-rail {
  position: absolute; left: 0; right: 0; top: 11px; height: 4px;
  background: var(--input-bg); border-radius: var(--r-pill);
}
.pov-range-fill {
  position: absolute; top: 11px; height: 4px;
  background: var(--blue); border-radius: var(--r-pill);
}
.pov-range-track input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 26px; margin: 0;
  background: none; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.pov-range-track input[type="range"]:focus { outline: none; }
.pov-range-track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--blue);
  box-shadow: var(--shadow-xs); cursor: grab;
}
.pov-range-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--blue);
  box-shadow: var(--shadow-xs); cursor: grab;
}
.pov-range-track input[type="range"]::-moz-range-track { background: none; border: none; }
.pov-range-track input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--text-1); outline-offset: 2px;
}
.pov-range-track input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--text-1); outline-offset: 2px;
}

/* Average / median marks. They sit between the fill and the inputs in the DOM, so
   they paint over the blue fill and under the thumbs with no z-index. The surface
   ring is what keeps a thin dark tick legible where it crosses the fill. Identity
   is carried by SHAPE — solid vs dashed — not by colour, so the pair survives
   greyscale, print and forced-colours; the same two glyphs key the line below. */
.pov-range-mark {
  position: absolute; top: 6px; width: 2px; height: 14px;
  margin-left: -1px; border-radius: 1px; pointer-events: none;
  box-shadow: 0 0 0 1.5px var(--surface);
}
.pov-range-mark-avg { background: var(--text-2); }
.pov-range-mark-med {
  background: repeating-linear-gradient(var(--text-2) 0 3px, transparent 3px 5px);
}

.pov-range-stats {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11px; color: var(--text-3); line-height: 1.4;
}
.pov-range-stats:empty { display: none; }
.pov-stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pov-stat b { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pov-stat-key { display: inline-block; width: 2px; height: 9px; border-radius: 1px; }
.pov-stat-key-avg { background: var(--text-2); }
.pov-stat-key-med {
  background: repeating-linear-gradient(var(--text-2) 0 3px, transparent 3px 5px);
}

/* the list */
.pov-list-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.pov-list-head .pov-card-title { margin-bottom: 0; }
.pov-list-spacer { flex: 1 1 auto; }
.pov-table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: 10px;
  transition: opacity .15s ease;
}
.pov-busy { opacity: .45; }
.pov-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.pov-table th, .pov-table td {
  padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pov-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg2); color: var(--text-2); font-weight: 600;
  font-size: 11.5px; letter-spacing: .02em;
}
.pov-table th.pov-sortable { cursor: pointer; -webkit-user-select: none; user-select: none; }
.pov-table th.pov-sortable:hover { color: var(--blue); }
.pov-table th.pov-sortable:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.pov-table th.pov-sorted { color: var(--blue); }
.pov-table th.pov-sorted i { font-size: 9px; }
.pov-table tbody tr:hover { background: var(--bg2); }
/* A row that drills through to the patient overlay. Only rows that CAN open one carry
   this class, so the pointer is never a promise the click cannot keep — a masked org,
   an org without entity search, or a config that hides the key column all render the
   table plain. Matches the analytics panel's `.an-row-click` affordance. */
.pov-table tbody tr.pov-row-click { cursor: pointer; }
.pov-table tbody tr.pov-row-click:hover { background: var(--blue-light); }
.pov-table tbody tr.pov-row-click:focus-visible {
  outline: 2px solid var(--blue); outline-offset: -2px; background: var(--blue-light);
}
.pov-table tbody tr:last-child td { border-bottom: none; }
.pov-table .pov-num { text-align: right; font-variant-numeric: tabular-nums; }
.pov-empty { text-align: center; color: var(--text-3); padding: 28px 0 !important; }

.pov-pager {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; flex-wrap: wrap;
}
.pov-pager-info { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pov-pager-btns { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pov-page {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  font-family: var(--font); font-size: 12.5px; color: var(--text-1);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.pov-page:hover:not(:disabled):not(.pov-page-on) { border-color: var(--blue); color: var(--blue); }
.pov-page:disabled { opacity: .4; cursor: default; }
.pov-page-on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.pov-page-gap { color: var(--text-3); padding: 0 2px; }

/* saved views */
/* ── Saved views (shared: Patient Overview, Cost Summarization, Patient
   Summarization) ──────────────────────────────────────────────────────────
   Rendered by ui/static/js/dashboard-views.js, so the prefix is `mi-` rather
   than any one dashboard's. A host page positions `.mi-views` in its own
   toolbar; everything inside it is the control's. */
.mi-views { position: relative; }
.mi-views-panel {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 4px); width: 268px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); padding: 8px;
}
.mi-view-row { display: flex; align-items: center; gap: 4px; }
.mi-view-apply {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
  border: none; background: none; border-radius: 6px; padding: 6px 8px;
  font-family: var(--font); font-size: 12.5px; color: var(--text-1);
  cursor: pointer; text-align: left; min-width: 0;
}
.mi-view-apply span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-view-apply i { color: var(--text-3); font-size: 11px; }
.mi-view-apply:hover { background: var(--blue-light); color: var(--blue-dark); }
.mi-view-del {
  border: none; background: none; color: var(--text-3);
  cursor: pointer; padding: 6px 7px; border-radius: 6px; font-size: 11px;
}
.mi-view-del:hover { color: var(--red); background: var(--red-light); }
.mi-view-empty { font-size: 12px; color: var(--text-3); padding: 8px; font-style: italic; }
.mi-view-save-row {
  display: flex; gap: 6px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
}
.mi-view-name { flex: 1 1 auto; min-width: 0; }
.mi-view-note { font-size: 10.5px; color: var(--text-3); margin-top: 7px; line-height: 1.45; }
.mi-view-err { font-size: 11.5px; color: var(--red); margin-top: 6px; }

@media (max-width: 700px) {
  .pov-toolbar { align-items: stretch; }
  .pov-count { padding-bottom: 0; }
  .pov-pager-btns { margin-left: 0; }
}

/* ── Knowledge base ("How the numbers are calculated") ──────────────────────────
   Reuses the integrity viewer's bar (.di-bar / .di-title / .di-loading / .di-error)
   so the two read as the same kind of screen; only the two-column body is new.
   The audience reads at high-school level, so the body is set at a comfortable
   measure (~68 characters) rather than filling a wide monitor edge to edge. */
#knowledge-viewer {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.kb-layout { flex: 1; display: flex; min-height: 0; }
.kb-index {
  width: 268px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg2);
  padding: 10px 8px;
}
.kb-index-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: none; background: transparent; border-radius: 10px;
  padding: 9px 11px; margin-bottom: 2px; font-family: inherit;
  border-left: 3px solid transparent;
}
.kb-index-item:hover { background: var(--surface); }
.kb-index-item.active { background: var(--blue-light); border-left-color: var(--blue); }
.kb-index-title {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--text-1);
  line-height: 1.35;
}
.kb-index-item.active .kb-index-title { color: var(--blue-dark); }
.kb-index-summary {
  font-size: 12px; color: var(--text-2); line-height: 1.4; margin-top: 3px;
  /* Two lines, then ellipsis: the rail is a table of contents, not the page. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
.kb-body {
  padding: 26px 34px 60px;
  max-width: 78ch;
  font-size: 15px;
  line-height: 1.68;
  color: var(--text-1);
}
.kb-body h1 {
  font-size: 25px; font-weight: 700; line-height: 1.25;
  margin: 0 0 6px; color: var(--text-1);
}
.kb-body h2 {
  font-size: 18.5px; font-weight: 650; margin: 34px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border); color: var(--text-1);
}
.kb-body h3 { font-size: 15.5px; font-weight: 650; margin: 24px 0 6px; color: var(--text-1); }
.kb-body p { margin: 0 0 14px; }
/* The app resets list markers globally; a prose page wants them back. */
.kb-body ul { list-style: disc; margin: 0 0 14px; padding-left: 24px; }
.kb-body ol { list-style: decimal; margin: 0 0 14px; padding-left: 26px; }
.kb-body li { display: list-item; }
.kb-body li { margin-bottom: 6px; }
.kb-body strong { font-weight: 650; }
.kb-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em; background: var(--input-bg); color: var(--text-1);
  padding: 1.5px 5px; border-radius: 5px;
}
.kb-body pre {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; overflow-x: auto; margin: 0 0 16px; line-height: 1.5;
}
.kb-body pre code { background: none; padding: 0; font-size: 12.5px; }
.kb-body blockquote {
  margin: 0 0 16px; padding: 10px 14px;
  border-left: 3px solid var(--blue); background: var(--blue-light);
  border-radius: 0 8px 8px 0; color: var(--text-1);
}
.kb-body blockquote p:last-child { margin-bottom: 0; }
/* A wide table scrolls inside its own box; the page itself never scrolls sideways. */
.kb-body table {
  border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 13.5px;
  display: block; overflow-x: auto;
}
.kb-body th, .kb-body td {
  border: 1px solid var(--border); padding: 7px 10px; text-align: left;
  vertical-align: top;
}
.kb-body th { background: var(--bg2); font-weight: 650; }
.kb-body hr { border: none; border-top: 1px solid var(--border); margin: 30px 0; }
.kb-body a { color: var(--link); }

@media (max-width: 860px) {
  .kb-layout { flex-direction: column; }
  .kb-index {
    width: auto; border-right: none; border-bottom: 1px solid var(--border);
    max-height: 168px;
  }
  .kb-body { padding: 18px 18px 48px; }
}

/* ── 3QHS MyInsight University ─────────────────────────────────────────────────
   Same bar as the integrity viewer and the knowledge base (.di-bar / .di-title),
   so the three read as one kind of screen. Below it: a stage that plays the
   selected lesson IN THE PAGE, and a card list that swaps what is on it.

   Every byte on this page comes from this box: the films are served by
   /api/university/media and so are their poster frames, grabbed at publish time
   by scripts/publish_training_videos.py. img-src stays 'self' data: blob:, and a
   lesson published without a poster falls back to the artwork drawn here. */
#university-viewer {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.uni-main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
.uni-page { max-width: 940px; margin: 0 auto; padding: 26px 34px 60px; }
.uni-lede {
  font-size: 15px; line-height: 1.6; color: var(--text-2);
  margin: 0 0 22px; max-width: 68ch;
}

/* ── The stage ─────────────────────────────────────────────────────────────── */
.uni-stage { margin: 0 0 38px; }
.uni-stage-head {
  display: flex; align-items: flex-end; gap: 14px;
  margin-bottom: 10px;
}
.uni-stage-heading { flex: 1; min-width: 0; }
.uni-stage-title {
  font-size: 18px; font-weight: 650; color: var(--text-1);
  margin: 0; line-height: 1.3;
}
.uni-stage-note {
  font-size: 13px; color: var(--text-2); margin: 4px 0 0; line-height: 1.45;
}
.uni-fs-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }

/* Watch progress, from the server's record for this person. */
.uni-summary { font-size: 13px; color: var(--text-2); margin: -6px 0 18px; }
.uni-meter {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; max-width: 420px;
}
/* `display:flex` above would otherwise beat the hidden attribute. */
.uni-meter[hidden] { display: none; }
.uni-meter-bar {
  flex: 1; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--border);
}
.uni-meter-fill {
  display: block; width: 0; height: 100%;
  background: var(--blue); transition: width .2s;
}
.uni-meter.done .uni-meter-fill { background: var(--green); }
.uni-meter-label { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.uni-meter.done .uni-meter-label { color: var(--green); font-weight: 600; }

/* The frame is what Full screen expands, so it carries the aspect ratio and the
   black ground — in full screen the letterboxing around a 16:9 video is this. */
.uni-stage-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* The player itself. `object-fit: contain` keeps a film that is not exactly 16:9
   letterboxed inside the frame rather than cropped by it. */
.uni-video {
  display: block; width: 100%; height: 100%; border: 0;
  background: #000; object-fit: contain;
}

/* The poster, standing in for the player until a click asks for one. The image
   is the film's own first slide; the gradient shows through when a lesson was
   published without one. */
.uni-poster {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: 0; border: none; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, #1f2a37 0%, #31506f 100%);
  color: #fff;
  transition: filter .15s;
}
.uni-poster:hover { filter: brightness(1.12); }
.uni-poster:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.uni-poster-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* The play affordance sits ON the poster, so it needs its own ground to stay
   legible over whatever frame the film opens on. */
.uni-poster-badge {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 18px 30px 16px;
  border-radius: 14px;
  background: rgba(16, 22, 30, .55);
  backdrop-filter: blur(2px);
}
.uni-poster i { font-size: 64px; line-height: 1; }
.uni-poster-cap { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.uni-stage-msg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; margin: 0; padding: 0 24px;
  color: #e8eaed; font-size: 14px; text-align: center;
}

/* Full screen. Two selectors, two rules on purpose: a browser that does not know
   one of these pseudo-classes drops the WHOLE rule it appears in, so combining
   them into one selector list would lose the styling everywhere. */
.uni-stage-frame:fullscreen {
  aspect-ratio: auto; width: 100vw; height: 100vh;
  border-radius: 0; box-shadow: none;
}
.uni-stage-frame:-webkit-full-screen {
  aspect-ratio: auto; width: 100vw; height: 100vh;
  border-radius: 0; box-shadow: none;
}

/* ── The lesson list ───────────────────────────────────────────────────────── */
.uni-section { margin-bottom: 34px; }
.uni-section-title {
  font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2); margin: 0 0 12px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.uni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 16px;
}
/* A card is a <button>: it puts its lesson on the stage and navigates nowhere. */
.uni-card {
  display: flex; flex-direction: column;
  padding: 0; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  color: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.uni-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.uni-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.uni-card.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.uni-thumb {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1f2a37 0%, #31506f 100%);
  color: #fff; font-size: 38px;
  overflow: hidden;
}
.uni-card:hover .uni-thumb { opacity: .92; }
.uni-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* How long the lesson runs, where a video library puts it. */
.uni-dur {
  position: absolute; right: 7px; bottom: 7px;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(16, 22, 30, .82);
  color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
}
/* How far this viewer got. Zero-width until there is something to show, so an
   unwatched lesson carries no mark at all. */
.uni-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(255, 255, 255, .28);
}
.uni-progress-fill {
  display: block; width: 0; height: 100%;
  background: var(--blue);
  transition: width .2s;
}
.uni-card.watched .uni-progress-fill { background: var(--green); }
/* The finished mark on the picture. Present on every card, shown only on a
   watched one, so a lesson finishing mid-page needs no repaint. */
.uni-check {
  position: absolute; left: 7px; top: 7px;
  display: none; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 4px;
  background: var(--green); color: #fff;
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
}
.uni-check i { font-size: 11px; }
.uni-card.watched .uni-check { display: inline-flex; }
.uni-card.watched .uni-card-foot { color: var(--green); font-weight: 600; }
.uni-section-count {
  float: right; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--text-3);
}
.uni-section-count.all { color: var(--green); }
.uni-card-body { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px 14px; }
.uni-card-title { font-size: 14.5px; font-weight: 650; color: var(--text-1); line-height: 1.35; }
.uni-card.active .uni-card-title { color: var(--blue-dark); }
.uni-card-note { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.uni-card-foot {
  font-size: 11.5px; color: var(--text-3); margin-top: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.uni-empty { font-size: 14px; color: var(--text-2); font-style: italic; }

@media (max-width: 860px) {
  .uni-page { padding: 18px 18px 48px; }
  .uni-stage-head { align-items: stretch; flex-direction: column; gap: 8px; }
  .uni-fs-btn { align-self: flex-start; }
  .uni-poster i { font-size: 48px; }
}

/* ── Feedback overlay ─────────────────────────────────────────────────────────
   Reuses the User Guide's overlay/box/header shell (.guide-modal-*) so the two
   windows opened from the same menu look like one product; .fb-box narrows it and
   lets it size to its content, since a short form in a fixed 88vh box is mostly
   empty space. */
.fb-box { max-width: 760px; height: auto; max-height: 92vh; }

.fb-tabs {
  display: flex; gap: 2px; flex-shrink: 0;
  padding: 0 20px; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.fb-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 14px; border: none; background: none;
  font-family: var(--font); font-size: 13.5px; font-weight: 500;
  color: var(--text-2); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.fb-tab:hover { color: var(--text-1); }
.fb-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.fb-tab i { font-size: 12px; }

/* Counts what is waiting on the reader, so it is an alert colour rather than a
   neutral total. */
.fb-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--red); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}

.fb-body { overflow-y: auto; padding: 20px 24px; flex: 1; min-height: 0; }
.fb-pane { display: none; }
.fb-pane.active { display: block; }
.fb-pane:focus { outline: none; }

/* ── The detected page ── */
.fb-context {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; margin-bottom: 18px;
  background: var(--blue-light); border-radius: 10px;
  color: var(--text-1);
}
.fb-context i { color: var(--blue); margin-top: 2px; font-size: 13px; }
.fb-context-lead {
  display: block; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--blue);
}
.fb-context-page { display: block; font-size: 13.5px; margin-top: 2px; }

.fb-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px;
}
@media (max-width: 560px) { .fb-grid { grid-template-columns: 1fr; } }

#fb-form .form-label { display: block; margin: 14px 0 5px; }
#fb-form .form-label:first-child,
.fb-grid .form-label { margin-top: 0; }
.fb-optional { font-weight: 400; color: var(--text-3); }

.fb-textarea {
  border-radius: 12px; resize: vertical; min-height: 96px;
  line-height: 1.55; font-family: var(--font);
}

.fb-hint { font-size: 12px; color: var(--text-3); margin-top: 5px; }
.fb-hint.fb-over { color: var(--red); }

/* The PHI sentence. Amber rather than red: it is a thing to think about before
   attaching, not an error that has already happened. */
.fb-notice {
  font-size: 12.5px; line-height: 1.5; color: #7c4a03;
  background: #fff8e6; border: 1px solid #f5dca6;
  border-radius: 8px; padding: 9px 12px; margin-top: 8px;
}
/* The no-PII/PHI rule sits ABOVE its text box, so it takes its space below. */
.fb-notice-phi { margin: 0 0 8px; }

.fb-file-input { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.fb-file-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.fb-file {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; background: var(--bg2);
}
.fb-file i { color: var(--text-2); }
.fb-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-file-size { color: var(--text-3); font-size: 12px; }
.fb-file-remove {
  border: none; background: none; cursor: pointer; color: var(--text-3);
  padding: 2px 4px; font-size: 13px;
}
.fb-file-remove:hover { color: var(--red); }

.fb-error { color: var(--red); font-size: 13px; margin-top: 12px; }
.fb-error-block {
  color: var(--red); font-size: 13px; background: var(--red-light);
  border-radius: 8px; padding: 12px 14px;
}
.fb-warn { color: #7c4a03; }

.fb-footer { justify-content: flex-end; gap: 10px; }
.fb-footer-note { margin-right: auto; font-size: 12px; color: var(--text-3); }

/* ── Thank-you ── */
.fb-thanks { text-align: center; padding: 26px 8px 12px; }
.fb-thanks-icon { font-size: 42px; color: var(--green); }
.fb-thanks h3 { margin: 14px 0 6px; font-size: 18px; font-weight: 600; color: var(--text-1); }
.fb-thanks-ref {
  display: inline-block; margin: 2px 0 12px; padding: 4px 12px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--text-1);
}
.fb-thanks-text {
  font-size: 13.5px; color: var(--text-2); line-height: 1.6;
  max-width: 440px; margin: 0 auto;
}
.fb-thanks-actions {
  display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap;
}

/* ── History ── */
.fb-history-list { display: grid; gap: 8px; }
.fb-empty { font-size: 13.5px; color: var(--text-3); line-height: 1.6; }
.fb-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font-family: var(--font);
  transition: border-color .15s, background .15s;
}
.fb-row:hover { border-color: var(--border-hover); background: var(--bg2); }
.fb-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-ref {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-2);
}
.fb-row-subject {
  font-size: 14px; font-weight: 500; color: var(--text-1); margin-top: 5px;
}
.fb-row-meta { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.fb-new {
  font-size: 11px; font-weight: 600; color: var(--red);
  background: var(--red-light); border-radius: var(--r-pill); padding: 2px 8px;
}

/* One chip class per status. Named from the status KEY, so a status added in
   src/feedback.py renders unstyled-but-legible rather than breaking the row. */
.fb-chip {
  font-size: 11.5px; font-weight: 600; border-radius: var(--r-pill);
  padding: 2px 9px; background: var(--bg2); color: var(--text-2);
}
.fb-chip-open        { background: var(--blue-light);  color: var(--blue); }
.fb-chip-in_progress { background: #fff3d6;            color: #8a5a00; }
.fb-chip-resolved    { background: var(--green-light); color: var(--green); }
.fb-chip-closed      { background: #eceff1;            color: #546170; }

/* ── One request ── */
.fb-back {
  display: inline-flex; align-items: center; gap: 7px;
  border: none; background: none; cursor: pointer; padding: 0 0 14px;
  font-family: var(--font); font-size: 13px; color: var(--blue);
}
.fb-back:hover { text-decoration: underline; }
.fb-thread-head { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.fb-thread-subject { font-size: 16px; font-weight: 600; color: var(--text-1); margin: 7px 0 4px; }
.fb-att-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fb-att {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.5px; color: var(--text-1); text-decoration: none; background: var(--bg2);
}
.fb-att:hover { border-color: var(--border-hover); }

.fb-msgs { display: grid; gap: 12px; padding: 16px 0; }
.fb-msg { border-radius: 12px; padding: 11px 14px; border: 1px solid var(--border); }
/* The user's own words sit on the neutral ground; the team's are tinted, so a thread
   is readable at a glance without relying on the name in the header alone. */
.fb-msg-mine { background: var(--surface); }
.fb-msg-them { background: var(--blue-light); border-color: #cfe0fb; }
.fb-msg-head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12.5px; color: var(--text-1);
}
.fb-msg-when { font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.fb-msg-status {
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
  margin-top: 5px; text-transform: none;
}
.fb-msg-body {
  font-size: 13.5px; color: var(--text-1); line-height: 1.6;
  margin-top: 6px; white-space: pre-wrap; word-break: break-word;
}

.fb-reply { border-top: 1px solid var(--border); padding-top: 14px; }
.fb-reply .form-label { display: block; margin-bottom: 6px; }
.fb-reply .btn-primary { margin-top: 10px; }

/* ── Table pagination (admin console) ─────────────────────────────────────────
   One implementation for every table on /admin — see the `Pager` block in
   admin.html. The bar sits directly under a .data-table-wrap and is painted by
   Pager.paint(), so nothing here is table-specific. */

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--text-2);
}

.pager:empty { display: none; }   /* before the first render */

.pager-left,
.pager-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pager-size-label { color: var(--text-3); }

.pager-size {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg1);
    color: var(--text-1);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
}

.pager-range {
    margin-left: 6px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.pager-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg1);
    color: var(--text-2);
    font-size: 12.5px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.pager-btn:hover:not(:disabled) {
    background: var(--bg2);
    color: var(--text-1);
}

/* Disabled rather than hidden at the ends, so the row never changes width and
   the reader is not left wondering whether a control was ever there. */
.pager-btn:disabled {
    opacity: .4;
    cursor: default;
}

.pager-btn.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
    font-weight: 600;
}

.pager-gap {
    padding: 0 2px;
    color: var(--text-3);
}

@media (max-width: 640px) {
    .pager { justify-content: center; }
    /* The numbers are the first thing to go: First/Prev/Next/Last still reach
       every page, and eleven controls do not fit on a phone. */
    .pager-num { display: none; }
}

/* Visible to a screen reader, not on screen. The pager's arrow buttons carry an
   icon and a title; this is what gives them a real accessible name in a reader
   that ignores both. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Cost Overview dashboard ─────────────────────────────────────────────────
   The second reader-driven dashboard, and deliberately Patient Overview's sibling:
   the same toolbar shape, the same card, table, pager and busy-state conventions,
   the same 1240px wrap. What is new here is the KPI tile row, the bar panels and
   the reconciliation drawer. Rendered by static/js/cost-overview-dashboard.js.

   `cov-` rather than sharing the `pov-` selectors: the two dashboards agree today,
   and a shared class would make every future tweak to one a silent change to the
   other. The duplication is a handful of declarations and it buys independence. */

.cov-wrap { max-width: 1240px; }

.cov-toolbar {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 12px 16px; box-shadow: var(--shadow-xs);
}
/* `.an-btn-ghost` sets align-self: flex-start for the analytics rail's vertical
   column; this toolbar is a ROW whose tallest item is a labelled select, and
   align-self beats the container's align-items — so Reset would hang above the
   controls beside it. Same correction .pov-toolbar carries, for the same reason. */
.cov-toolbar > .an-btn-ghost { align-self: flex-end; }
.cov-toolbar-spacer { flex: 1 1 auto; }
.cov-field { display: flex; flex-direction: column; gap: 4px; }
.cov-field > span {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}
.cov-field-pop select { min-width: 220px; }
.cov-count { font-size: 13px; color: var(--text-2); white-space: nowrap; padding-bottom: 6px; }
.cov-count strong { color: var(--text-1); font-variant-numeric: tabular-nums; font-size: 15px; }

/* What the chosen population means, under the control that chose it. It is the one
   choice on this screen that changes which PEOPLE the numbers are about — every
   other control changes only the window — so it says so in words, not a tooltip. */
.cov-pop-note {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
  padding: 0 4px;
}
.cov-pop-note:empty { display: none; }
.cov-pop-note i { color: var(--text-3); margin-top: 3px; flex-shrink: 0; }
.cov-pop-note b { color: var(--text-1); }

.cov-warn {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fef7e0; border: 1px solid #f5d98a; color: #7a5300;
  border-radius: var(--r-card); padding: 10px 14px; font-size: 12.5px; line-height: 1.55;
}
.cov-warn i { margin-top: 3px; flex-shrink: 0; }
.cov-warn ul { margin: 4px 0 0; padding-left: 18px; }
.cov-warn li { margin-top: 2px; }

.cov-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 16px 18px;
  box-shadow: var(--shadow-xs); min-width: 0;
}
.cov-card-title {
  font-size: 14px; font-weight: 600; color: var(--text-1);
  display: flex; align-items: center; gap: 8px;
}
.cov-info { font-size: 10px; color: var(--text-3); flex-shrink: 0; cursor: help; }
.cov-info:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.cov-empty { text-align: center; color: var(--text-3); padding: 28px 0; font-size: 13px; }

/* ── KPI tiles ──────────────────────────────────────────────────────────────
   Five figures the reader checks before reading anything else. The lead tile is
   the total and carries its own weight; the rest are peers. Every value carries
   the exact dollars in its title attribute, because the face of the tile is the
   compact form and "$52.2M" is not a number anyone can reconcile against. */
.cov-tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.cov-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 14px 16px; box-shadow: var(--shadow-xs);
  min-width: 0;
}
.cov-tile-lead { background: var(--blue-light); border-color: #c9ddfb; }
.cov-tile-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); display: flex; align-items: center; gap: 6px;
}
.cov-tile-value {
  font-size: 25px; font-weight: 600; color: var(--text-1); margin-top: 6px;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.cov-tile-lead .cov-tile-value { color: var(--blue-dark); }
.cov-tile-sub { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }

/* ── the bar panels ─────────────────────────────────────────────────────────
   Small multiples, never a dual axis: medical and pharmacy differ by three orders
   of magnitude, and two y-scales on one frame draw whatever relationship the
   scales were chosen to draw. Each panel is one measure on its own scale, sharing
   the month axis with the others. */
.cov-charts { display: flex; flex-direction: column; gap: 16px; }
.cov-charts-split {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.cov-panel-head { display: flex; align-items: center; gap: 8px; }
.cov-panel-key {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; display: inline-block;
}
.cov-panel-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.cov-panel-total {
  margin-left: auto; font-size: 15px; font-weight: 600; color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.cov-panel-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.cov-panel-foot {
  font-size: 11.5px; color: var(--text-3); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.cov-chart-wrap { margin-top: 10px; height: 150px; }
.cov-chart-tall { height: 230px; }
.cov-chart { width: 100%; height: 100%; display: block; overflow: visible; }
/* Recessive by construction: the grid sits behind the marks and must never compete
   with them for attention. Units are real pixels — the chart's viewBox is its own
   measured size, so nothing here is scaled by an aspect fit. */
.cov-grid { stroke: var(--border); stroke-width: 1; }
.cov-grid-base { stroke: var(--border-hover); }
.cov-ylab, .cov-xlab { font-size: 11px; fill: var(--text-3); font-family: var(--font); }
.cov-bar { shape-rendering: crispEdges; }
.cov-hit { cursor: crosshair; }
.cov-hit:hover { fill: rgba(26, 115, 232, .07); }

/* tooltip rows, inside the shared #db-tooltip element */
.db-tip-title { font-weight: 600; margin-bottom: 5px; }
.db-tip-row { display: flex; align-items: baseline; gap: 14px; justify-content: space-between; }
.db-tip-row span { display: inline-flex; align-items: center; gap: 6px; color: #dadce0; }
.db-tip-key { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.db-tip-sep { margin-top: 5px; padding-top: 5px; border-top: 1px solid #3c4043; }

/* ── the patient list ───────────────────────────────────────────────────── */
.cov-list-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.cov-list-spacer { flex: 1 1 auto; }
.cov-table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: 10px;
  transition: opacity .15s ease;
}
.cov-busy { opacity: .45; }
.cov-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.cov-table th, .cov-table td {
  padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cov-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg2); color: var(--text-2); font-weight: 600;
  font-size: 11.5px; letter-spacing: .02em;
}
.cov-table th.cov-sortable { cursor: pointer; -webkit-user-select: none; user-select: none; }
.cov-table th.cov-sortable:hover { color: var(--blue); }
.cov-table th.cov-sortable:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.cov-table th.cov-sorted { color: var(--blue); }
.cov-table th.cov-sorted i { font-size: 9px; }
.cov-table tbody tr:hover { background: var(--bg2); }
/* Only a row that CAN open the patient overlay carries this, so the pointer is
   never a promise the click cannot keep. */
.cov-table tbody tr.cov-row-click { cursor: pointer; }
.cov-table tbody tr.cov-row-click:hover { background: var(--blue-light); }
.cov-table tbody tr.cov-row-click:focus-visible {
  outline: 2px solid var(--blue); outline-offset: -2px; background: var(--blue-light);
}
.cov-table tbody tr:last-child td { border-bottom: none; }
.cov-table .cov-num { text-align: right; font-variant-numeric: tabular-nums; }
.cov-table td.cov-empty { text-align: center; padding: 28px 0; }

.cov-pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.cov-pager-info { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cov-pager-btns { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cov-page {
  min-width: 30px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  font-family: var(--font); font-size: 12.5px; color: var(--text-1);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.cov-page:hover:not(:disabled):not(.cov-page-on) { border-color: var(--blue); color: var(--blue); }
.cov-page:disabled { opacity: .4; cursor: default; }
.cov-page-on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.cov-page-gap { color: var(--text-3); padding: 0 2px; }

/* ── the reconciliation drawer ─────────────────────────────────────────────
   Collapsed by default, because it answers the second question, not the first.
   It is not decoration: on a cost screen, "why is this number what it is" is what
   a finance reader asks immediately after reading the number. */
.cov-recon { padding: 0; }
.cov-drawer-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; background: none; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text-1);
  padding: 14px 18px;
}
.cov-drawer-toggle i { color: var(--text-3); font-size: 11px; width: 10px; }
.cov-drawer-toggle:hover { color: var(--blue); }
.cov-drawer-toggle:focus-visible {
  outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--r-card);
}
.cov-recon-hint { font-size: 11.5px; font-weight: 400; color: var(--text-3); margin-left: auto; }
.cov-drawer-body { padding: 0 18px 18px; }
.cov-recon-intro, .cov-recon-foot {
  font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 12px;
}
.cov-recon-foot { margin: 12px 0 0; }
.cov-recon-table { font-size: 12px; }
.cov-recon-table td { white-space: normal; vertical-align: top; }
.cov-recon-sub { font-size: 11px; color: var(--text-3); font-weight: 400; margin-top: 2px; }
.cov-recon-notes td { padding-top: 0; border-bottom: 1px solid var(--border); }
.cov-recon-note { font-size: 11.5px; color: var(--text-2); line-height: 1.5; margin-top: 4px; }
.cov-chip {
  display: inline-block; font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--bg2); color: var(--text-3); margin: 3px 4px 0 0;
}
.cov-chip-on { background: var(--blue-light); color: var(--blue-dark); }
.cov-bad { color: var(--red); font-weight: 600; }
.cov-recon-cover { margin-top: 14px; }
.cov-recon-cover h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 6px;
}
.cov-recon-cover ul { margin: 0; padding-left: 18px; }
.cov-recon-cover li { font-size: 12.5px; color: var(--text-2); line-height: 1.6; margin-top: 3px; }

@media (max-width: 720px) {
  .cov-charts-split { grid-template-columns: 1fr; }
  .cov-recon-hint { display: none; }
  .cov-pager-btns { margin-left: 0; }
}

/* ── Cost Overview · the patient-merger drawer ───────────────────────────────
   A second drawer beside Claim reconciliation, reporting the CCLF9 Medicare-number
   cross-reference: what CMS sent, and what it actually merged in this org's files.
   Shares the drawer chrome above via .cov-drawer-toggle / .cov-drawer-body, so a
   third drawer needs no CSS of its own. */

.cov-stats {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.cov-stat {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
/* A non-zero merge count is the one number on this panel worth acting on, so it is
   the one that is coloured. Zero stays neutral — "nothing needed merging" is a good
   outcome, not a warning. */
.cov-stat-bad { background: var(--blue-light); border-color: #c9ddfb; }
.cov-stat-value {
  font-size: 21px; font-weight: 600; color: var(--text-1);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.cov-stat-bad .cov-stat-value { color: var(--blue-dark); }
.cov-stat-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); margin-top: 2px;
}

.cov-verdict {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--green-light); border: 1px solid #b7e1c4; color: #17632c;
  border-radius: var(--r-card); padding: 10px 14px;
  font-size: 12.5px; line-height: 1.55; margin-bottom: 14px;
}
.cov-verdict i { margin-top: 3px; flex-shrink: 0; }
.cov-verdict-act {
  background: var(--blue-light); border-color: #c9ddfb; color: var(--blue-dark);
}

.cov-recon h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); margin: 16px 0 6px;
}
.cov-recon h4:first-of-type { margin-top: 0; }
.cov-recon-note { font-size: 12px; color: var(--text-2); line-height: 1.55; margin-top: 8px; }
.cov-chip-bad { background: var(--red-light); color: #a5271d; }

/* ── Cost Overview · the multi-selects ───────────────────────────────────────
   Practice, provider and patient. Their own row, under the toolbar: that bar is
   the WINDOW (which months, which population) and these are the SUBJECT (whose
   costs), and six controls in one bar made neither group legible. */

.cov-filters {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 14px 16px; box-shadow: var(--shadow-xs);
}
.cov-select { position: relative; min-width: 0; }
.cov-select-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}
.cov-clear {
  margin-left: auto; border: none; background: none; cursor: pointer;
  font-family: var(--font); font-size: 11px; color: var(--blue);
  text-transform: none; letter-spacing: 0; padding: 0; font-weight: 500;
}
.cov-clear:hover { text-decoration: underline; }

.cov-select-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 7px 11px; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 13px; color: var(--text-1);
}
.cov-select-btn:hover { border-color: var(--border-hover); }
.cov-select-btn[aria-expanded="true"] { border-color: var(--blue); }
.cov-select-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cov-select-label {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.cov-select-btn i { color: var(--text-3); font-size: 10px; flex-shrink: 0; }

.cov-select-panel {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); padding: 8px;
  min-width: 260px;
}
.cov-select-search {
  width: 100%; border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 10px; font-family: var(--font); font-size: 12.5px;
  color: var(--text-1); background: var(--input-bg); margin-bottom: 6px;
}
.cov-select-search:focus { outline: none; border-color: var(--blue); background: var(--surface); }
/* Tall enough to show that there is more, short enough not to cover the page. */
.cov-select-list { max-height: 264px; overflow-y: auto; }
.cov-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px;
  border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text-1);
}
.cov-opt:hover { background: var(--bg2); }
.cov-opt input { flex-shrink: 0; cursor: pointer; }
.cov-opt-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.cov-opt-n {
  flex-shrink: 0; font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.cov-opt-empty { padding: 10px 7px; font-size: 12.5px; color: var(--text-3); }

/* The selection, repeated outside the closed dropdown — a button that says
   "3 selected" has hidden the very thing the reader is filtering by. */
.cov-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cov-chip-x {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  border: 1px solid #c9ddfb; background: var(--blue-light); color: var(--blue-dark);
  border-radius: var(--r-pill); padding: 2px 9px; cursor: pointer;
  font-family: var(--font); font-size: 11.5px;
}
.cov-chip-x:hover { border-color: var(--blue); }
.cov-chip-x i { font-size: 9px; flex-shrink: 0; }
.cov-masked-note {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-3); padding: 7px 0;
}

/* ── the PMPM overlay on the Total panel ─────────────────────────────────────
   A second y-scale, used deliberately and only here: PMPM IS the total over the
   month's member-months, so the pair says whether spend moved because care changed
   or because the population did. The right-hand axis is drawn in the line's own
   colour, because an axis that does not say which series it belongs to is worse
   than no axis. */
.cov-ylab-alt { fill: var(--red); }
.cov-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Into a month whose claims are still arriving (see dashboard-window.js). */
.cov-line.cov-line-provisional { stroke-dasharray: 5 4; }
/* A surface-coloured halo under the line keeps it legible where it crosses a bar,
   which is the one place a 2px stroke would otherwise disappear. */
.cov-line-halo {
  fill: none; stroke: var(--surface); stroke-width: 5;
  stroke-linejoin: round; stroke-linecap: round;
}
.cov-dot { stroke: var(--surface); stroke-width: 2; }
.cov-panel-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cov-foot-right {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2);
}
.cov-foot-right b { color: var(--text-1); }
.cov-foot-key {
  width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex-shrink: 0;
}

@media (max-width: 720px) {
  .cov-filters { grid-template-columns: 1fr; }
  .cov-foot-right { margin-left: 0; }
}

/* A month the claim feeds have not reached yet. Dimmed rather than hidden: the
   month is real and belongs on the axis; what is missing is its claims, and a
   reader has to be able to see which months those are. */
.cov-xlab-pending { fill: var(--text-3); opacity: .5; }
.cov-count-filtered { color: var(--blue); }
.db-tip-note {
  color: #fdd663; font-size: 11.5px; line-height: 1.45;
  margin: 0 0 6px; padding-bottom: 5px; border-bottom: 1px solid #3c4043;
}

/* ── Patient Overview II · shared dashboard UI (po2- / dui- / dfx-) ────────────────
   The redesign preview. `dui-` is ui/static/js/dashboard-ui.js (filter bar, chips,
   notices, popups, the list), `dfx-` is dashboard-facets.js (bar-list breakdowns, the
   State picker, the sliders' section) and `po2-` is the page itself. The sliders reuse
   Patient Overview's `.pov-range*` rules above untouched; nothing in this block edits a
   rule any other screen uses.

   Contrast. `--text-3` is re-pointed INSIDE this page only: #9aa0a6 is 2.6:1 on white,
   under WCAG AA's 4.5:1, and it carried real text (labels, averages, counts). #686d72 is
   5.2:1 on white, 4.96:1 on the page's grey (--bg2) and 4.56:1 on --blue-light, which is
   everywhere it is drawn. (#70757a, the obvious pick, fails on --bg2.) */
.po2-wrap { max-width: 1240px; --text-3: #686d72; }

/* One focus ring for every control on the page. Range inputs are excluded — their
   thumbs have their own ring, and a ring round the full-width transparent input would
   outline the whole track. */
.po2-wrap :is(button, select, summary, [tabindex], input:not([type="range"])):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.po2-wrap .an-select:focus-visible, .po2-wrap .an-input:focus-visible { outline-offset: 1px; }

.dui-h2 { font-size: 15px; font-weight: 600; color: var(--text-1); line-height: 1.3; }

/* ── filter bar ───────────────────────────────────────────────────────────── */
.dui-bar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-xs);
  padding: 12px 16px; display: flex; flex-direction: column; gap: 10px;
}
.dui-bar-row { display: flex; align-items: flex-end; gap: 12px 18px; flex-wrap: wrap; }
.dui-bar-spacer { flex: 1 1 auto; }
.dui-bar .mi-views > .an-btn-ghost { align-self: auto; }
.dui-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dui-field-label {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}
.dui-active {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.dui-count { font-size: 13px; color: var(--text-2); margin-right: 2px; }
.dui-count strong { color: var(--text-1); font-size: 15px; font-weight: 600; }
.dui-count:focus { outline: none; }
.dui-count:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.dui-count-hint { color: var(--text-3); }
.dui-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.dui-chips[hidden] { display: none; }
.dui-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 320px;
  border: 1px solid #c9ddfb; background: var(--blue-light); color: var(--blue-dark);
  border-radius: var(--r-pill); padding: 3px 5px 3px 11px;
  font-family: var(--font); font-size: 12.5px; line-height: 1.4; cursor: pointer;
}
.dui-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dui-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; font-size: 10px; flex-shrink: 0;
}
.dui-chip:hover .dui-chip-x { background: #c9ddfb; }
.dui-clear-all {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; color: var(--blue-dark); cursor: pointer;
  font-family: var(--font); font-size: 12.5px; padding: 4px 6px; border-radius: 6px;
}
.dui-clear-all:hover { background: var(--blue-light); }
.dui-clear-all[hidden] { display: none; }

/* ── notice strip ─────────────────────────────────────────────────────────── */
.dui-notice {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fef7e0; border: 1px solid #f5d98a; color: #6b4a00;
  border-radius: 10px; padding: 9px 14px; font-size: 12.5px; line-height: 1.5;
}
.dui-notice > i { margin-top: 3px; }
.dui-notice-body { min-width: 0; }
.dui-notice-head { font-weight: 600; }
.dui-notice-more summary { cursor: pointer; width: max-content; text-decoration: underline; text-underline-offset: 2px; }
.dui-notice-more ul { margin: 6px 0 2px 18px; display: flex; flex-direction: column; gap: 4px; }

/* ── popups: the ⓘ hints and the dropdown menus ───────────────────────────── */
.dui-pop-host { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.dui-hint {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%; border: none; background: none;
  color: var(--text-3); font-size: 12px; cursor: pointer; padding: 0;
}
.dui-hint:hover, .dui-hint[aria-expanded="true"] { background: var(--input-bg); color: var(--blue); }
.dui-pop {
  position: fixed; z-index: 320; overflow: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
  /* A popup may sit inside an uppercase label or a bold title; it reads as its own. */
  font-size: 12.5px; font-weight: 400; line-height: 1.55; letter-spacing: normal;
  text-transform: none; white-space: normal; color: var(--text-1); text-align: left;
}
.dui-pop[hidden] { display: none; }
.dui-pop-hint { width: max-content; max-width: min(420px, calc(100vw - 24px)); padding: 10px 13px; }
.dui-pop-hint p + p, .dui-pop-hint p + .dui-pop-sub { margin-top: 8px; }
.dui-pop-menu { width: 280px; max-width: calc(100vw - 24px); padding: 8px; }
.dui-pop-sub {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); margin: 2px 2px 6px;
}
.dui-pop-dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; }
.dui-pop-dl dt { font-weight: 600; }
.dui-pop-dl dd { margin: 0; color: var(--text-2); }
.dui-pop-foot { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.dui-linkbtn {
  border: none; background: none; color: var(--blue-dark); cursor: pointer; padding: 4px 6px;
  font-family: var(--font); font-size: 12.5px; border-radius: 6px;
}
.dui-linkbtn:hover { background: var(--blue-light); }
.dui-check {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--text-1);
}
.dui-check[hidden] { display: none; }
.dui-check:hover { background: var(--bg2); }
.dui-check input { accent-color: var(--blue); flex-shrink: 0; width: 15px; height: 15px; }

/* ── the State picker (a dropdown in the filter bar) ──────────────────────── */
.dfx-select-btn {
  display: inline-flex; align-items: center; gap: 10px; min-width: 170px; max-width: 280px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 7px 11px; font-family: var(--font); font-size: 13px; color: var(--text-1);
  cursor: pointer; text-align: left;
}
.dfx-select-btn:hover:not(:disabled) { border-color: var(--border-hover); }
.dfx-select-btn:disabled { color: var(--text-3); cursor: default; background: var(--bg2); }
.dfx-select-btn i.fa-chevron-down { margin-left: auto; font-size: 10px; color: var(--text-3); }
.dfx-select-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfx-select-search { margin-bottom: 6px; }
.dfx-select-list { max-height: 260px; overflow-y: auto; }
.dfx-opt-lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfx-opt-n { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ── "Who is in this list": bar-list breakdowns ───────────────────────────── */
.dfx-section { display: flex; flex-direction: column; gap: 10px; }
.dfx-section-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.dfx-section-note { font-size: 12.5px; color: var(--text-3); }
/* 300px floor: three cards a row at the page's 1240px (and at 1280 / 1440 viewports),
   two at a tablet width, one on a phone. Rows stretch so a row of cards ends level. */
.dfx-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch; transition: opacity .15s ease;
}
.dfx-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px 8px; min-width: 0;
}
.dfx-card-head { display: flex; align-items: center; gap: 2px; margin: 0 0 4px 6px; }
.dfx-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.dfx-bars { display: flex; flex-direction: column; gap: 1px; }

/* One row per category: the name and its numbers on the first line, the bar under
   them at full width — so no name is cut off and every bar has room to be read. */
.dfx-bar {
  display: grid; width: 100%;
  grid-template-columns: 14px minmax(0, 1fr) auto 3.4em;
  grid-template-areas: "chk lbl n pct" ". trk trk trk";
  align-items: center; column-gap: 8px; row-gap: 4px;
  padding: 5px 6px 7px; border: 1px solid transparent; border-radius: 8px;
  background: none; font-family: var(--font); text-align: left; color: var(--text-1);
  cursor: pointer;
}
.dfx-bar.dfx-static { cursor: default; }
button.dfx-bar:hover:not(:disabled) { background: var(--bg2); }
.dfx-bar:disabled { cursor: default; }
.dfx-bar-check { grid-area: chk; color: var(--blue-dark); font-size: 10px; visibility: hidden; }
.dfx-bar-label { grid-area: lbl; font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
.dfx-bar-n {
  grid-area: n; font-size: 12.5px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums;
}
.dfx-bar-pct {
  grid-area: pct; font-size: 12px; color: var(--text-2); text-align: right;
  font-variant-numeric: tabular-nums;
}
.dfx-bar-track {
  grid-area: trk; display: block; height: 6px; border-radius: 3px;
  background: var(--input-bg); overflow: hidden;
}
.dfx-bar-fill {
  display: block; height: 100%; min-width: 2px;
  border-radius: 0 3px 3px 0; background: var(--blue);
  transition: width .2s ease;
}
.dfx-zero .dfx-bar-fill { display: none; }
/* `neutral` is the "nothing happened" baseline (No ED visit): most of the roster, so in
   blue it would be the loudest bar on the card. #80868b is 3.7:1 — past the 3:1 a
   graphic needs. */
.dfx-neutral .dfx-bar-fill { background: #80868b; }
/* A card with a choice: the rows NOT chosen step back — their bar only. The text keeps
   full contrast (fading the whole row, as the donut legend did, failed contrast). */
.dfx-dim .dfx-bar-fill { background: #c4c7cc; }
.dfx-on { background: var(--blue-light); border-color: #c9ddfb; }
button.dfx-on:hover:not(:disabled) { background: #dbe7fd; }
.dfx-on .dfx-bar-check { visibility: visible; }
.dfx-on .dfx-bar-label { font-weight: 600; }
.dfx-bar:disabled .dfx-bar-label,
.dfx-bar:disabled .dfx-bar-n,
.dfx-bar:disabled .dfx-bar-pct { color: var(--text-3); }
.dfx-note { font-size: 12.5px; color: var(--text-3); padding: 6px; line-height: 1.5; }

/* ── "Narrow by range": the sliders, folded away ──────────────────────────── */
.dfx-ranges {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
}
.dfx-ranges-h { font-size: inherit; font-weight: inherit; }
.dfx-disclose {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border: none; background: none; border-radius: 12px;
  font-family: var(--font); text-align: left; cursor: pointer; color: var(--text-1);
}
.dfx-disclose:hover { background: var(--bg2); }
.dfx-disclose-ic { font-size: 11px; color: var(--text-2); transition: transform .15s ease; }
.dfx-disclose[aria-expanded="true"] .dfx-disclose-ic { transform: rotate(90deg); }
.dfx-disclose-title { font-size: 15px; font-weight: 600; }
.dfx-disclose-meta { font-size: 12.5px; color: var(--text-3); }
.dfx-disclose-meta b { color: var(--blue-dark); font-weight: 600; }
.dfx-ranges-body { padding: 0 16px 16px; }
.dfx-ranges-body[hidden] { display: none; }
.dfx-ranges-intro { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin-bottom: 14px; max-width: 80ch; }
.dfx-ranges-intro .pov-stat-key { vertical-align: -1px; margin: 0 2px; }
.dfx-ranges .pov-ranges { transition: opacity .15s ease; }
.dfx-range .pov-range-head { align-items: center; gap: 2px; }
.dfx-range .pov-range-head .pov-range-val { padding-left: 6px; }

/* ── the list ─────────────────────────────────────────────────────────────── */
.dui-list {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-xs); padding: 14px 16px; min-width: 0;
}
.dui-list-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.dui-list-spacer { flex: 1 1 auto; }
.dui-tool-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 6px 11px; font-family: var(--font); font-size: 12.5px; color: var(--text-1); cursor: pointer;
}
.dui-tool-btn:hover { border-color: var(--border-hover); }
.dui-tool-meta { color: var(--text-3); font-variant-numeric: tabular-nums; }
.dui-cols-panel .dui-cols-list { max-height: 320px; overflow-y: auto; }
.dui-inline-field { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }

/* The wrapper is its OWN vertical scroller. The page scrolls inside .db-body, and a
   sticky header inside a wrapper that only scrolls sideways never sticks to anything. */
.dui-table-wrap {
  overflow: auto; max-height: min(70vh, 640px);
  border: 1px solid var(--border); border-radius: 10px;
  transition: opacity .15s ease;
}
.dui-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12.5px; }
.dui-table th, .dui-table td {
  padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dui-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg2);
  color: var(--text-2); font-weight: 600; font-size: 12px;
}
.dui-table th.dui-sorted { color: var(--blue-dark); }
.dui-sort {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; background: none;
  font: inherit; color: inherit; cursor: pointer; white-space: nowrap;
}
.dui-sort:hover { color: var(--blue-dark); }
.dui-sort-ic { font-size: 9px; opacity: .55; }
.dui-sorted .dui-sort-ic { opacity: 1; }
.dui-table .dui-num { text-align: right; font-variant-numeric: tabular-nums; }
.dui-table .dui-num .dui-sort { flex-direction: row-reverse; }
.dui-table tbody tr:hover { background: var(--bg2); }
.dui-table tbody tr.dui-row-link { cursor: pointer; }
.dui-table tbody tr.dui-row-link:hover { background: var(--blue-light); }
.dui-table tbody tr:last-child td { border-bottom: none; }
.dui-row-open {
  padding: 0; border: none; background: none; font: inherit; cursor: pointer;
  color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(21, 87, 176, .35);
}
.dui-row-open:hover { text-decoration-color: currentColor; }
.dui-empty { text-align: center; color: var(--text-3); padding: 28px 0 !important; white-space: normal !important; }
.dui-busy { opacity: .5; }

.dui-pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.dui-pager-info { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dui-pager-btns { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* The Download button at the left edge of a pager row. It is an action on the WHOLE
   filtered list, not on the page being shown, which is why it sits apart from the page
   numbers rather than among them. It never disappears on a masked org -- the click
   explains instead, the rule every download in this app follows. */
.dui-download {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  font-family: var(--font); font-size: 12.5px; color: var(--text-1);
  cursor: pointer; white-space: nowrap;
}
.dui-download:hover:not(:disabled) { background: var(--bg2); border-color: var(--text-3); }
.dui-download:disabled { opacity: .6; cursor: default; }
.dui-download i { font-size: 12px; color: var(--text-2); }
.dui-page {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
  font-family: var(--font); font-size: 12.5px; color: var(--text-1);
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.dui-page:hover:not(:disabled):not([aria-current]) { border-color: var(--blue); color: var(--blue-dark); }
.dui-page:disabled { color: var(--text-3); background: var(--bg2); cursor: default; }
.dui-page[aria-current="page"] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.dui-page-gap { color: var(--text-3); padding: 0 2px; }

/* ── where the numbers come from ──────────────────────────────────────────── */
.dui-sources {
  font-size: 12.5px; color: var(--text-2);
  border-top: 1px dashed var(--border); padding-top: 8px;
}
.dui-sources summary { cursor: pointer; color: var(--text-2); width: max-content; max-width: 100%; }
.dui-sources summary i { margin-right: 4px; color: var(--text-3); }
.dui-sources-list { margin: 8px 0 0 20px; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.dui-sources-note { margin-top: 8px; line-height: 1.6; }
.dui-sources code { font-size: 12px; background: var(--input-bg); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.dui-link {
  display: inline-flex; align-items: center; gap: 5px; margin-right: 10px;
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; color: var(--blue-dark);
  text-decoration: underline; text-underline-offset: 2px;
}
.dui-link-plain { margin-right: 10px; }

@media (max-width: 768px) {
  .dui-bar-spacer { display: none; }
  .dfx-select-btn { min-width: 0; width: 100%; max-width: none; }
  .dui-pager-btns { margin-left: 0; }
  .dui-page-num:not([aria-current]) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dfx-bar-fill, .dfx-disclose-ic, .dfx-grid, .dui-table-wrap { transition: none; }
}

/* ── Patient Overview III (po3-) + the opt-in facet pieces it uses ─────────────────
   Laid out from the mockup the user supplied: headline tiles in three panels across the
   top, every filter in a left-hand panel (State, all eight sliders with a histogram over
   each, every category as a checkbox group), and the patient table beside it. Shares
   the dui-/dfx- rules above with Patient Overview II; nothing here edits a rule any
   other screen uses. The same contrast fix applies (--text-3 re-pointed in this page). */
.po3-wrap,
.psm-wrap { max-width: 1400px; --text-3: #686d72; }
.po3-wrap :is(button, select, summary, [tabindex], input:not([type="range"])):focus-visible,
.psm-wrap :is(button, select, summary, [tabindex], input:not([type="range"])):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* ── headline tiles ───────────────────────────────────────────────────────── */
.po3-band { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.po3-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-xs); padding: 12px 14px 14px; min-width: 0;
  display: flex; flex-direction: column;
}
.po3-panel-h { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 10px; }
.po3-tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 auto; }
.po3-tiles-meter { grid-template-columns: 1fr; gap: 8px; }
.po3-tile {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  padding: 10px 12px; font-family: var(--font); text-align: left; color: var(--text-1);
  cursor: pointer;
}
.po3-tile:hover:not(:disabled) { border-color: var(--border-hover); background: var(--bg2); }
.po3-tile[aria-pressed="true"] {
  background: var(--blue-light); border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue);
}
.po3-tile:disabled { cursor: default; background: var(--bg2); }
.po3-tile-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.po3-tile-main { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.po3-tile-value { font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--text-1); }
.po3-spark { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
.po3-spark svg, .po3-rspark svg { display: block; overflow: visible; }
.po3-spark path, .po3-rspark path {
  fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
}
.po3-spark circle, .po3-rspark circle { fill: var(--blue); stroke: var(--surface); stroke-width: 1.5; }
.po3-tile-sub { font-size: 12px; color: var(--text-3); }
.po3-tile-delta { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* A caveat marker, and only that: the tile's figure is not available for this month,
   and the notice strip above says why. */
.po3-badge {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
  background: #b45309; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface);
}
.po3-badge[hidden] { display: none; }
.po3-meter { display: block; height: 8px; border-radius: 4px; background: var(--input-bg); overflow: hidden; }
.po3-meter > span { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 0 4px 4px 0; transition: width .2s ease; }
.po3-meter-tile { gap: 6px; }
.po3-meter-head { display: flex; align-items: baseline; gap: 8px; }
.po3-meter-pct { margin-left: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.po3-tile-share .po3-meter { margin: 2px 0 1px; }

/* ── the side panel + results ─────────────────────────────────────────────── */
.po3-main {
  display: grid; gap: 16px; align-items: start;
  /* 400px: the donut legends need room for a label like "Unplanned readmission" beside
     its count and share, or the words break mid-letter. */
  grid-template-columns: 400px minmax(0, 1fr);
}
/* Everything in the panel is on the page: no inner scrollbar, nothing folded away (asked
   for, 19 Sep 2026). The page itself scrolls. */
.po3-rail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-xs);
  padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.po3-rail .dui-field { width: 100%; }
.po3-rail .dfx-select-btn { width: 100%; max-width: none; }
.po3-results { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* No inner vertical scroll on this page's table either: every row of the page is shown,
   and the page scrolls. It still scrolls sideways if the chosen columns are too wide. */
/* Both screens put every filter in a panel that does not scroll on its own, so the
   table must not either -- one inner scroller beside a tall panel is two scrollbars
   racing each other. */
.po3-wrap .dui-table-wrap,
.psm-wrap .dui-table-wrap { max-height: none; }
.po3-rail-state { border-top: 1px solid var(--border); padding-top: 12px; }
.dfx-flat-h {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-2); margin: 4px 0 2px;
}
.dfx-ranges-flat { display: flex; flex-direction: column; gap: 4px; }
.dfx-ranges-flat .dfx-ranges-intro { margin-bottom: 6px; }
.dfx-ranges-flat .pov-ranges { grid-template-columns: 1fr; gap: 14px; }

/* A distribution over a slider: bars centred on the track's own values, the ones inside
   the handles in blue and the rest grey. The 1px surface borders are the gap between
   bars. Pointer events stay on, for the per-bar tooltip; the handles are below. */
.dfx-hist { position: relative; height: 34px; margin: 2px 0 -4px; overflow: hidden; }
.dfx-hbin {
  position: absolute; bottom: 0; box-sizing: border-box;
  background: #8ab4f8; border: 1px solid var(--surface); border-bottom: none;
  border-radius: 3px 3px 0 0;
}
.dfx-hbin-out { background: #dadce0; }

/* Categories as donuts: the ring beside its legend, and the legend rows are the
   controls. A faded arc or swatch means "not chosen"; the legend TEXT never fades. */
.dfx-donuts { display: flex; flex-direction: column; }
.dfx-dcard { padding: 10px 0 12px; border-top: 1px solid var(--border); }
.dfx-dcard:first-child { border-top: none; padding-top: 2px; }
.dfx-dcard-head { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.dfx-dcard-title { font-size: 13.5px; font-weight: 600; color: var(--text-1); }
.dfx-donut-wrap { display: flex; align-items: center; gap: 12px; }
.dfx-donut { width: 100px; height: 100px; flex-shrink: 0; }
.dfx-donut-total { font-size: 20px; font-weight: 700; fill: var(--text-1); font-family: var(--font); }
.dfx-donut-sub { font-size: 9.5px; fill: var(--text-3); letter-spacing: .06em; text-transform: uppercase; font-family: var(--font); }
.dfx-arc { transition: opacity .12s ease; }
.dfx-arc-live { cursor: pointer; }
.dfx-arc-live:hover { opacity: .82; }
.dfx-arc-dim { opacity: .28; }
.dfx-legend { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.dfx-leg {
  display: grid; grid-template-columns: 11px 10px minmax(0, 1fr) auto 3.2em;
  align-items: center; column-gap: 6px; width: 100%;
  border: 1px solid transparent; border-radius: 7px; background: none;
  padding: 3px 5px; font-family: var(--font); text-align: left; color: var(--text-1); cursor: pointer;
}
div.dfx-leg { cursor: default; }
button.dfx-leg:hover:not(:disabled) { background: var(--bg2); }
.dfx-leg:disabled { cursor: default; }
.dfx-leg-check { color: var(--blue-dark); font-size: 9px; visibility: hidden; }
.dfx-leg-on { background: var(--blue-light); border-color: #c9ddfb; }
button.dfx-leg-on:hover:not(:disabled) { background: #dbe7fd; }
.dfx-leg-on .dfx-leg-check { visibility: visible; }
.dfx-leg-on .dfx-leg-lbl { font-weight: 600; }
.dfx-leg-sw { width: 10px; height: 10px; border-radius: 3px; }
.dfx-leg-dim .dfx-leg-sw { opacity: .3; }
/* Wrap at a space; break inside a word only when one word alone is wider than the cell. */
.dfx-leg-lbl { font-size: 12.5px; line-height: 1.3; overflow-wrap: break-word; }
.dfx-leg-n { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.dfx-leg-pct { font-size: 12px; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.dfx-leg:disabled .dfx-leg-lbl,
.dfx-leg:disabled .dfx-leg-n,
.dfx-leg:disabled .dfx-leg-pct { color: var(--text-3); }

/* ── the table's own cells ────────────────────────────────────────────────── */
.po3-pill {
  display: inline-block; padding: 2px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.po3-pill-active   { background: #e6f4ea; color: #137333; }
.po3-pill-inactive { background: #fef7e0; color: #7a5300; }
.po3-pill-deceased { background: #f1f3f4; color: #3c4043; }
.po3-pill-other    { background: var(--blue-light); color: var(--blue-dark); }
.po3-pill-unknown  { border: 1px dashed var(--border-hover); color: var(--text-2); padding: 1px 9px; }
.po3-rspark { display: inline-flex; align-items: center; vertical-align: middle; }
.po3-wait { color: var(--text-3); }
.po3-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid transparent;
  background: none; color: var(--blue-dark); cursor: pointer; font-size: 12px;
}
.po3-act:hover { background: var(--blue-light); border-color: #c9ddfb; }

@media (max-width: 1180px) {
  .po3-band { grid-template-columns: 1fr; }
  .po3-main { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .po3-meter > span, .dfx-arc { transition: none; }
}

/* ── HCC Summarization (hcs-) ───────────────────────────────────────────────
   Reuses the Patient Overview layout's po3-/dui-/dfx- classes for everything the
   two screens share; only what is this dashboard's own is styled here. */
.hcs-model-row { display: flex; align-items: center; gap: 4px; }
.hcs-model-field .an-select { max-width: 360px; }
.hcs-run-line { font-size: 12px; color: var(--text-3); margin: 4px 0 8px; line-height: 1.5; }
.hcs-views { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.hcs-view {
  border: none; background: var(--surface); color: var(--text-2); font-family: var(--font);
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; cursor: pointer;
}
.hcs-view + .hcs-view { border-left: 1px solid var(--border); }
.hcs-view:hover { background: var(--bg2); }
.hcs-view[aria-pressed="true"] { background: var(--blue-light); color: var(--blue-dark); }
/* Most tiles here are figures, not toggles: an average, a rate and a cohort total are
   not slices of the list. The two work tiles (gaps, suspects) ARE toggles and keep the
   po3 button's hover and pressed treatment. */
.hcs-tile:not(.hcs-tile-pick) { cursor: default; }
.hcs-tile:not(.hcs-tile-pick):hover { border-color: var(--border); background: var(--surface); }
/* The toggle's own mark: quiet until it is pressed, and present whether or not there
   is a pointer to hover with. */
.hcs-tile-pick { padding-right: 30px; }
.hcs-tile-mark {
  position: absolute; top: 10px; right: 11px; font-size: 11px; line-height: 1;
  color: var(--text-3);
}
.hcs-tile-pick:hover:not(:disabled) .hcs-tile-mark { color: var(--text-2); }
.hcs-tile-pick[aria-pressed="true"] .hcs-tile-mark { color: var(--blue-dark); }
.hcs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hcs-band .po3-panel:first-child .hcs-tiles { grid-template-columns: 1fr; }
.hcs-tile .po3-meter { margin: 2px 0 1px; }
.hcs-tile .po3-meter[hidden] { display: none; }
/* The condition cards: the status rows are the breakdown cards' own; the category list
   is a searchable checklist, capped at forty rows with a note. */
.hcs-card { margin-bottom: 10px; }
.hcs-cat-search { width: 100%; margin: 2px 0 6px; font-size: 12.5px; padding: 6px 9px; }
.hcs-cat-list { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; }
.hcs-cat {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center;
  column-gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.hcs-cat:hover { background: var(--bg2); }
.hcs-cat-on { background: var(--blue-light); }
.hcs-cat-on .hcs-cat-label { font-weight: 600; }
.hcs-cat-zero .hcs-cat-label, .hcs-cat-zero .hcs-cat-n { color: var(--text-3); }
.hcs-cat-label { line-height: 1.3; overflow-wrap: anywhere; }
.hcs-cat-n { font-weight: 600; font-variant-numeric: tabular-nums; }
.hcs-state-hints { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
/* Condition status pills — shape and word, colour second. */
.hcs-pill {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.hcs-pill-gap { background: #fff3e0; color: #8a4b00; border-color: #f5d7a8; }
.hcs-pill-suspect { background: #f1ecfb; color: #4a3aa7; border-color: #d9d0f2; }
.hcs-pill-coded { background: #e6f4ea; color: #1e6b3a; border-color: #bfe3cb; }
.hcs-pill-acute { background: #fdecea; color: #a12b23; border-color: #f4c4bf; }
.hcs-pill-superseded { background: var(--bg2); color: var(--text-2); border-color: var(--border); }
.hcs-pill-other { background: var(--bg2); color: var(--text-2); }
/* The worklist's standing caveat: its value column is priced per condition and does
   not total to a patient's opportunity. Shown on the Conditions view only. */
.hcs-worth-note {
  margin: 0; padding: 9px 12px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
.hcs-worth-note[hidden] { display: none; }
/* "Why the score is blank or borrowed": a two-sentence reason in a table whose cells
   never wrap. A bounded box lets it read in place instead of running off the edge. */
/* "est.": a score priced on the ESRD model, whose table rests on a status estimated from claims. */
.hcs-est {
  display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px;
  font-size: 10.5px; font-weight: 600; line-height: 16px; vertical-align: 1px;
  color: var(--text-2, #5f6368); background: var(--bg2, #f1f3f4); border: 1px solid var(--border, #dadce0);
}
.hcs-note-cell {
  display: inline-block; white-space: normal; min-width: 24em; max-width: 36em;
  line-height: 1.4; vertical-align: top;
}
/* Compare models: one row per model over the patients the filters leave, above the
   patient-by-patient table. Shown on the Compare view only. */
.hcs-compare { margin: 0 0 12px; }
.hcs-compare[hidden] { display: none; }
.hcs-compare .dui-table-wrap { max-height: none; }
.hcs-compare-lead {
  margin: 0 0 8px; padding: 9px 12px; border-radius: 8px;
  background: var(--bg2); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
}
.hcs-compare-lead b { color: var(--text-1); font-weight: 600; }
.hcs-compare-model { white-space: normal; min-width: 12em; }
.hcs-compare th.dui-num { white-space: normal; min-width: 6.5em; }
.hcs-compare-model small { display: block; color: var(--text-3); font-size: 11.5px; }
.hcs-compare tr.hcs-compare-current > * { background: var(--blue-light); }
.hcs-worth-note i { color: var(--text-3); margin-right: 4px; }
.hcs-worth-note b { color: var(--text-1); font-weight: 600; }
.hcs-cellbtn { white-space: nowrap; font-size: 12px; padding: 2px 8px; }
.hcs-cellbtn i { font-size: 11px; margin-right: 2px; }
/* The claims drawer: the page's own modal, sized to a table. */
.hcs-claims-box { max-width: 1120px; height: auto; max-height: 88vh; }
.hcs-claims-body { padding: 16px 20px; overflow: auto; }
.hcs-claims-lead { font-size: 13.5px; color: var(--text-1); margin: 0 0 12px; line-height: 1.5; }
.hcs-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;
  margin: 0 0 12px; padding: 0;
}
.hcs-facts > div { background: var(--bg2); border-radius: 8px; padding: 8px 12px; }
.hcs-facts dt { font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.hcs-facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; color: var(--text-1); }
.hcs-fact-sub { font-size: 12px; font-weight: 400; color: var(--text-3); }
.hcs-claims-scope { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: 0 0 12px; }
.hcs-claims-table { max-height: 46vh; }
.hcs-claims-foot { display: flex; align-items: center; gap: 10px; }
.hcs-claims-note { font-size: 12.5px; color: var(--text-3); }
.hcs-yn { font-weight: 600; }
.hcs-yn-yes { color: #1e6b3a; }
.hcs-yn-no { color: #a12b23; }
@media (max-width: 720px) {
  .hcs-band .po3-panel:first-child .hcs-tiles, .hcs-tiles { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Cost Summarization II — the redesign preview (22 Sep 2026)
   The accepted layout's `dui-` chrome, plus the `cov-` pickers and drawers this screen
   shares with the original; only what is new to it is `cv2-`. Contrast is fixed inside
   the wrapper the way the po2/po3 wrappers fix it.
   ══════════════════════════════════════════════════════════════════════════════ */
.cv2-wrap { max-width: 1400px; --text-3: #686d72; }
.cv2-wrap :is(button, select, summary, [tabindex], input:not([type="range"])):focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.cv2-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-xs); padding: 14px 16px; min-width: 0;
}
/* The three pickers sit IN the filter bar: the multiselect's own card frame and its
   per-control chips are dropped here, because the bar has ONE chip row for the page. */
.cv2-wrap .cov-filters { display: contents; }
.cv2-wrap .cov-select { flex: 1 1 140px; min-width: 130px; max-width: 220px; }
.cv2-wrap .cv2-pop { min-width: 200px; }
.cv2-wrap .cov-select .cov-chips { display: none; }
.cv2-wrap .cov-select-head { margin-bottom: 4px; }
.cv2-wrap .cov-select-btn { padding: 6px 10px; font-size: 12.5px; }
.cv2-wrap .cov-pop-note { margin: 0; }
.cv2-wrap .cov-pop-note[hidden] { display: none; }
.cv2-wrap .cv2-reset { align-self: flex-end; }

/* ── the headline ─────────────────────────────────────────────────────────── */
.cv2-headline { padding: 16px 18px; }
.cv2-lead {
  margin: 0; font-size: 17px; line-height: 1.35; color: var(--text-1);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.cv2-big {
  font-size: 38px; font-weight: 700; letter-spacing: -.01em; line-height: 1;
  color: var(--blue-dark); font-variant-numeric: tabular-nums;
}
.cv2-sub {
  margin: 8px 0 0; font-size: 13px; color: var(--text-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
}
.cv2-sub b, .cv2-concentration b { color: var(--text-1); font-weight: 600; }
.cv2-fig { display: inline-flex; align-items: center; gap: 2px; }
.cv2-dot { color: var(--text-3); }
.cv2-muted { color: var(--text-3); font-weight: 400; }
.cv2-inline { padding: 2px 6px; font-size: inherit; }
.cv2-inline[aria-pressed="true"] { background: var(--blue-light); }

/* ── the chart and "Where it went" ────────────────────────────────────────── */
.cv2-grid2 {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
}
.cv2-chart-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.cv2-chart-note { margin-left: auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.cv2-chart-sub { margin: 2px 0 0; font-size: 11.5px; color: var(--text-3); }
.cv2-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 11.5px; color: var(--text-2); }
.cv2-legend[hidden] { display: none; }
.cv2-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.cv2-legend-item i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.cv2-plot { position: relative; height: 220px; margin: 14px 0 0 46px; }
.cv2-gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); pointer-events: none; }
.cv2-gridline-base { border-top-color: var(--border-hover); }
.cv2-ylab {
  position: absolute; left: -46px; width: 40px; top: -7px; text-align: right;
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.cv2-bars { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 3px; }
.cv2-col { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
/* One bar, one button. The 4px data-end and the 3px surface gap are the house mark
   spec; a chosen month is outlined rather than recoloured, so the measure's colour
   never changes meaning. */
.cv2-bar {
  display: flex; flex-direction: column-reverse; width: 100%; border: none; padding: 0; margin: 0;
  background: var(--text-1); border-radius: 4px 4px 0 0; cursor: pointer; min-height: 0;
  transition: filter .12s ease;
}
.cv2-bar:hover { filter: brightness(1.25); }
.cv2-bar[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 2px var(--blue-light); }
.cv2-col.cv2-faded .cv2-bar { opacity: .32; }
/* Past the claims horizon: hatched and faded, because "not reported yet" is a
   different statement from "cost nothing". */
.cv2-col.cv2-dim .cv2-bar {
  opacity: .5;
  background: repeating-linear-gradient(135deg, #b8bcc0 0 4px, #e6e8eb 4px 8px) !important;
}
/* Reported but still filling in (claims for the month can still arrive): the bar keeps
   its own colour and wears a light stripe ON TOP of it, the opposite slant to the
   grey hatch above, so "may still grow" never reads as "nothing reported yet". */
.cv2-col.cv2-provisional .cv2-bar { position: relative; }
.cv2-col.cv2-provisional .cv2-bar::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px);
}
.cv2-seg { display: block; width: 100%; flex: 0 0 auto; }
.cv2-bar-split .cv2-seg:last-child { border-radius: 4px 4px 0 0; }
.cv2-bar-menu-host {
  position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
  opacity: 0; transition: opacity .12s ease; z-index: 2;
}
.cv2-col:hover .cv2-bar-menu-host, .cv2-col:focus-within .cv2-bar-menu-host,
.cv2-bar-menu-host:has([aria-expanded="true"]) { opacity: 1; }
.cv2-bar-menu, .cv2-row-menu {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-2);
  cursor: pointer; font-size: 12px; padding: 0;
}
.cv2-bar-menu:hover, .cv2-row-menu:hover,
.cv2-bar-menu[aria-expanded="true"], .cv2-row-menu[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }
.cv2-xlabs { display: flex; gap: 3px; margin: 6px 0 0 46px; }
.cv2-xlab { flex: 1 1 0; min-width: 0; text-align: center; font-size: 11px; color: var(--text-3); white-space: nowrap; }
.cv2-xlab.cv2-dim { color: #b0b4b8; }
.cv2-lane-head { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0 46px; font-size: 12.5px; }
.cv2-lane-title { font-weight: 600; color: var(--text-1); }
.cv2-lane-sub { color: var(--text-3); font-size: 11.5px; }
.cv2-lane-total { margin-left: auto; color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }
/* The per-member line in its own lane, sharing the x axis with the bars above and on
   its own scale — the one dual-axis chart in the product becomes two stacked frames. */
.cv2-lane {
  position: relative; height: 72px; margin: 6px 0 0 46px;
  border-top: 1px dashed var(--border); border-bottom: 1px solid var(--border-hover);
}
.cv2-lane svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cv2-lane-line { fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cv2-lane-line.cv2-lane-provisional { stroke-dasharray: 5 4; }
.cv2-lane-halo { fill: none; stroke: var(--surface); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.cv2-lane-dot { fill: var(--red); stroke: var(--surface); stroke-width: 1.5; }
.cv2-lane-ylab {
  position: absolute; left: -46px; width: 40px; text-align: right;
  font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.cv2-lane-ytop { top: -7px; }
.cv2-lane-ybot { bottom: -7px; }
.cv2-chart-foot { margin: 12px 0 0; font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.cv2-menu-item {
  display: block; width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  padding: 7px 9px; border-radius: 6px; font-family: var(--font); font-size: 12.5px; color: var(--text-1);
}
.cv2-menu-item:hover, .cv2-menu-item:focus-visible { background: var(--bg2); }

.cv2-rows { display: flex; flex-direction: column; gap: 2px; }
.cv2-row { display: flex; align-items: center; gap: 4px; }
.cv2-rowbtn {
  flex: 1 1 auto; min-width: 0; display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(0, 1fr) 76px minmax(60px, 110px) 46px;
  border: none; background: none; padding: 7px 8px; border-radius: 8px; text-align: left;
  font-family: var(--font); font-size: 12.5px; color: var(--text-1); cursor: pointer;
}
.cv2-rowbtn:hover { background: var(--bg2); }
.cv2-rowbtn[aria-pressed="true"] { background: var(--blue-light); box-shadow: inset 0 0 0 1px var(--blue); }
/* A name wraps to a second line rather than losing its qualifier to an ellipsis —
   "Pharmacy (beneficiary paid)" without the bracket is a different measure. */
.cv2-rowname { font-weight: 500; line-height: 1.3; }
.cv2-rowamt {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
  display: flex; flex-direction: column; align-items: flex-end;
}
.cv2-rowpct { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
/* Unchosen rows fade their marks and their figures, never their names. */
.cv2-row.cv2-faded .cv2-rowamt, .cv2-row.cv2-faded .cv2-rowpct { color: var(--text-3); }
.cv2-row.cv2-faded .cv2-meter i, .cv2-row.cv2-faded .cv2-spark polyline { opacity: .35; }
.cv2-meter { display: block; height: 10px; background: #e6e8eb; border-radius: 2px; position: relative; overflow: hidden; }
.cv2-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); border-radius: 2px; }
.cv2-spark { display: block; width: 100%; height: 22px; }
.cv2-spark polyline { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.cv2-flag { font-size: 10.5px; font-weight: 600; color: #b45309; white-space: nowrap; }
.cv2-amber { color: #b45309; font-weight: 600; }
.cv2-hintline { margin: 6px 0 4px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.cv2-hintline[hidden] { display: none; }
.cv2-where .dfx-flat-h { margin-top: 12px; }

/* ── "Who it went on" ─────────────────────────────────────────────────────── */
.cv2-who-head { display: flex; align-items: flex-end; gap: 12px 18px; flex-wrap: wrap; }
.cv2-tabs { display: flex; gap: 2px; margin-left: auto; }
.cv2-tab {
  border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0;
  background: var(--bg2); padding: 6px 12px; font-family: var(--font); font-size: 12.5px;
  color: var(--text-2); cursor: pointer;
}
.cv2-tab[aria-selected="true"] { background: var(--surface); color: var(--text-1); font-weight: 600; }
.cv2-tab-n { color: var(--text-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.cv2-concentration {
  margin: 10px 0 6px; font-size: 13px; color: var(--text-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
}
.cv2-who [role="tabpanel"][hidden] { display: none; }
.cv2-who .dui-list { border: none; box-shadow: none; padding: 0; }
.cv2-share {
  display: inline-block; width: 56px; height: 8px; background: #e6e8eb; border-radius: 2px;
  vertical-align: middle; margin-right: 6px; position: relative; overflow: hidden;
}
.cv2-share i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); border-radius: 2px; }
.cv2-share-n { font-variant-numeric: tabular-nums; }
.cv2-actions { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cv2-pick[aria-pressed="true"] { background: var(--blue-light); }
.cv2-drill { white-space: nowrap; }

@media (max-width: 1000px) {
  .cv2-grid2 { grid-template-columns: 1fr; }
  .cv2-plot { margin-left: 40px; height: 180px; }
  .cv2-xlabs, .cv2-lane, .cv2-lane-head { margin-left: 40px; }
  .cv2-ylab, .cv2-lane-ylab { left: -40px; width: 36px; }
  .cv2-big { font-size: 30px; }
  .cv2-rowbtn { grid-template-columns: minmax(0, 1fr) 70px minmax(40px, 90px) 42px; }
  .cv2-tabs { margin-left: 0; }
}

/* HCC Summarization: the practice / provider / patient row (the shared multi-select) is
   its own card directly under the model card (asked for 23 Sep 2026 — it used to sit at
   the foot of the rail, below six sliders and seven charts). The SECTION is the card, so
   the component's own chrome is dropped and its three controls spread across the width. */
.hcs-ms .cov-filters {
  background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
/* `.dui-bar` is a flex column with its own 10px gap, so the sentence carries none. */
.hcs-ms-intro { margin: 0; }

/* ── Practice Scorecard (psc-) ─────────────────────────────────────────────
   Everything structural comes from the shared db-* dashboard classes; these
   rules cover only what this screen adds: right-aligned numerics, the expand
   caret, provider sub-rows, sparkline cells and the Benchmarks button. */
.psc-num { text-align: right; font-variant-numeric: tabular-nums; }
.psc-table th[data-sort-col] { cursor: pointer; user-select: none; white-space: nowrap; }
.psc-table th[data-sort-col] .fa-sort { opacity: .35; font-size: 10px; }
.psc-caret { width: 28px; }
.psc-expand {
  border: 0; background: transparent; cursor: pointer; color: var(--text-2, #5f6368);
  padding: 2px 6px; border-radius: 4px;
}
.psc-expand:hover, .psc-expand:focus-visible { background: var(--bg2, #f1f3f4); }
.psc-prov-row td { background: var(--bg2, #f8f9fa); font-size: 12.5px; }
.psc-prov-name { padding-left: 14px; }
.psc-spark-cell { min-width: 90px; }
.psc-spark { display: block; }
.psc-bench-btn { float: right; font-size: 12px; padding: 3px 10px; }
.psc-trend-note { margin-top: 6px; }
.psc-signals td, .psc-signals th { white-space: nowrap; }
/* Practice Scorecard: clickable counts and the member modal */
.psc-drill-btn {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  color: #1a73e8; font: inherit; font-variant-numeric: tabular-nums;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.psc-drill-btn:hover, .psc-drill-btn:focus-visible { text-decoration-style: solid; }
.psc-members-box { max-width: 860px; width: min(92vw, 860px); }
.psc-mm-note { padding: 2px 2px 10px; }
.psc-mm-scroll { max-height: 66vh; overflow: auto; }
.psc-mm-table { width: 100%; }
.psc-mm-row { cursor: pointer; }
.psc-mm-row:hover td, .psc-mm-row:focus-visible td { background: var(--bg2, #f1f3f4); }
/* Vertical rhythm between the scorecard's sections — tiles, metrics card, table,
   notes, sources — matching the spacing the other dashboards carry. Scoped to
   this wrap so nothing else moves. */
.psc-wrap > * + * { margin-top: 16px; }
/* The shared window control (js/dashboard-window.js) and the sentence naming its months.
   Only the Report Card's two windows are live; the sentence says why the others are off. */
.psc-win { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.psc-win-line { flex: 1 1 320px; color: var(--text-2, #5f6368); line-height: 1.45; }

/* ── Quality Scorecard (qsc-) ──────────────────────────────────────────────
   The Practice Scorecard's table classes (psc-num, psc-expand, psc-drill-btn) and the
   shared window control's buttons (dwin-) carry the look; these rules add the row
   levels, the measure cells (a figure over its counts) and the column windows. Muted
   text is #5f6368, not --text-3, which fails contrast on white. */
.qsc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.qsc-head .dui-download, .qsc-head [data-qsc-drill-close] { margin-left: auto; }
.qsc-sub { margin: 0; font-size: 12.5px; color: #5f6368; }
.qsc-table th, .qsc-table td { vertical-align: top; }
/* Six columns in a 1,100px card: names wrap, and each measure column stays narrow
   enough that the last one is never pushed out of view. */
.qsc-table thead th.psc-num { white-space: normal; min-width: 104px; max-width: 150px; }
.qsc-table .qsc-who { min-width: 200px; max-width: 330px; }
/* `.db-table td` outranks `.psc-num` on its own, so the figures need the table's
   class to sit right-aligned under their headings. */
.qsc-table td.psc-num, .qsc-table th.psc-num { text-align: right; }
.qsc-table th.psc-num .qsc-th { justify-content: flex-end; }
.qsc-th { display: inline-flex; align-items: center; gap: 4px; }
.qsc-th-win { display: block; font-weight: 400; font-size: 11px; color: #5f6368; }
.qsc-val { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.qsc-of { display: block; font-size: 11px; color: #5f6368; font-variant-numeric: tabular-nums; }
.qsc-who { text-align: left; font-weight: 500; white-space: normal; }
.qsc-who .psc-expand { margin-right: 4px; }
.qsc-aco th, .qsc-aco td { background: var(--blue-light, #e8f0fe); font-weight: 700; }
.qsc-group th, .qsc-group td { background: #f1f3f4; font-weight: 600; }
.qsc-provider th, .qsc-provider td { background: var(--bg2, #f8f9fa); font-size: 12.5px; }
.qsc-provider .qsc-who { padding-left: 44px; }
.qsc-bucket .qsc-name { font-style: italic; }
.qsc-status {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600; background: #fef7e0; color: #8a5300;
}
.qsc-note { margin-top: 10px; }
.qsc-drill-wrap { max-height: 60vh; overflow: auto; }
.qsc-drill:focus { outline: none; }

/* ── The time window (dwin-) ───────────────────────────────────────────────
   js/dashboard-window.js, shared by Cost Summarization I and II and Patient
   Summarization: a window KIND and the month it ends in, the maturity sentence under
   it. The buttons follow the Practice Scorecard's switch above, so the two windows
   read as one control. The text colour is #5f6368, not --text-3 (#9aa0a6 is 2.6:1 on
   white and fails), because the maturity sentence is information, not decoration. */
.dwin { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.dwin-seg {
  display: inline-flex; border: 1px solid var(--border, #dadce0); border-radius: 8px;
  overflow: hidden; flex: none; align-self: flex-end;
}
.dwin-btn {
  border: 0; background: var(--surface, #fff); color: var(--text-1, #202124);
  cursor: pointer; font: inherit; font-size: 13px; padding: 6px 11px; white-space: nowrap;
}
.dwin-btn + .dwin-btn { border-left: 1px solid var(--border, #dadce0); }
.dwin-btn[aria-pressed="true"] { background: var(--blue, #1a73e8); color: #fff; font-weight: 600; }
.dwin-btn:focus-visible { outline: 2px solid var(--blue, #1a73e8); outline-offset: -2px; }
/* A window this screen cannot answer: kept in its place, switched off, its reason in the
   sentence beside the control (the title repeats it for a pointer). Text stays 4.6:1. */
.dwin-btn.dwin-off, .dwin-btn:disabled { background: #f8f9fa; color: #6b7075; cursor: not-allowed; }
.dwin select:disabled { background: #f8f9fa; color: #5f6368; cursor: default; }
.dwin-ends { display: inline-flex; gap: 12px; align-items: flex-end; }
.dwin-ends[hidden] { display: none; }
.dwin-maturity {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
  font-size: 12.5px; line-height: 1.55; color: #5f6368; padding: 0 4px;
}
.dwin-maturity > i { color: #188038; }
.dwin-maturity-open > i { color: #b06000; }
.dwin-rule summary { cursor: pointer; color: var(--blue, #1a73e8); font-size: 12px; }
.dwin-rule summary:focus-visible { outline: 2px solid var(--blue, #1a73e8); outline-offset: 2px; }
.dwin-rule p { margin: 4px 0 0; max-width: 72ch; }
/* The attribution switch (js/dashboard-attribution.js): a label over the same buttons,
   the two choices compared one click away, and a sentence under the bar saying what it
   does. */
.datt {
  display: inline-flex; flex-direction: column; gap: 4px;
  position: relative; padding-right: 26px;
}
.datt .dwin-seg { align-self: flex-start; }
.datt .dui-pop-host { position: absolute; right: 0; bottom: 4px; }
.datt-more { font-size: 12px; }
.datt-more summary { cursor: pointer; color: var(--blue, #1a73e8); }
.datt-more summary:focus-visible { outline: 2px solid var(--blue, #1a73e8); outline-offset: 2px; }
.datt-more p { margin: 4px 0 0; max-width: 46ch; color: #5f6368; line-height: 1.45; }
.datt-more[open] { position: relative; z-index: 2; }
/* The sentence: dressed as the Patients sentence beside it, under its OWN class.
   Cost Summarization finds its Patients sentence by `.cov-pop-note`, and an element
   wearing that class ahead of it in the page was written over (13 Oct 2026). */
.datt-note {
  display: flex; gap: 9px; align-items: flex-start; margin: 0;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
  padding: 0 4px;
}
.datt-note:empty { display: none; }
.datt-note i { color: var(--text-3); margin-top: 3px; flex-shrink: 0; }
.datt-note b { color: var(--text-1); }

/* ── The scope bar on the snapshot dashboards (dsc-, js/dashboard-scope.js) ──────
   The participant / practice / provider row as one card at the top of the Executive
   and Summary dashboards, a sentence saying whose numbers are shown, and the marker
   each figure carries under a choice: "For your choice", or "Whole ACO" with the
   reason as words beside it (never only a tooltip). */
.dsc-bar {
  display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 12px 16px; box-shadow: var(--shadow-xs);
}
.dsc-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.dsc-row .cov-filters {
  flex: 1 1 520px; background: transparent; border: 0; border-radius: 0; padding: 0;
  box-shadow: none; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.dsc-row .dsc-clear { margin-top: 18px; }
.dsc-sentence {
  display: flex; gap: 9px; align-items: flex-start; margin: 0;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2); padding: 0 2px;
}
.dsc-sentence:empty { display: none; }
.dsc-sentence i { color: var(--text-3); margin-top: 3px; flex-shrink: 0; }
.dsc-sentence b { color: var(--text-1); }
.dsc-tag {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  padding: 1px 7px; border-radius: 999px; vertical-align: middle; white-space: nowrap;
  text-transform: none; line-height: 1.6;
}
.dsc-tag-on { background: #e8f0fe; color: #174ea6; }
.dsc-aco-tag { background: #f1f3f4; color: #4d5156; }
.dsc-why {
  display: block; font-size: 11.5px; line-height: 1.4; color: #5f6368;
  margin-top: 3px; font-weight: 400; text-transform: none; letter-spacing: 0;
}
/* A figure that stays whole-ACO under a choice is greyed but kept readable (large text
   on white at 3.9:1), so it reads as context rather than as the choice's number. */
.dsc-withheld .db-tile-value, .dsc-withheld .db-action-count { color: #80868b; }
.sdb-scope { margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.sdb-scope .dsc-why { display: inline; margin: 0; }
.sdb-flow > .dsc-bar { margin-bottom: 18px; }
/* Under the bar a page redraws ONE wrapper, so the page's 16px between blocks has to
   reach inside it: set on the outer container only, it stopped at the wrapper and the
   tiles and card rows sat flush against each other. */
.db-wrap > [data-db-scoped] { display: flex; flex-direction: column; gap: 16px; }
.psc-wrap > [data-psc-scoped] > * + * { margin-top: 16px; }

/* ── Patient Cost by Year (pcy-) ──────────────────────────────────────────
   One row per patient per month of a year, from the reconciled CCLF facts. Reuses
   the shared table (dui-), the multi-select row (cov-) and the tile band (db-);
   only the year-total row, the blank cell and the adjustments card are its own. */
.pcy-wrap { max-width: 1400px; }
.pcy-wrap .dui-table-wrap { max-height: none; }
.pcy-num { text-align: right; font-variant-numeric: tabular-nums; }
.pcy-blank { color: var(--text-3, #686d72); cursor: help; }
.pcy-year { font-weight: 600; }
.pcy-wrap .dui-table td:has(> .pcy-year),
.pcy-wrap .dui-table td:has(> .dui-row-open > .pcy-year) { background: var(--bg2, #f1f3f4); }
/* Six tiles carry dollar figures to the cent ("$34,945,794.32"): at the family's 24px
   they ran out of their tiles at 1280px (seen shooting the training film), so this
   band is a little wider per tile and a step smaller. */
.pcy-tiles { margin: 14px 0; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
/* Sized to the frame so the six read left to right on ONE row at 1280px -- total,
   what comes off, what is left -- and grow back on a wide screen. */
.pcy-tiles .db-tile-value { font-size: clamp(16px, 1.36vw, 22px); }
.pcy-tile-strong .db-tile-value { color: var(--blue, #1a73e8); }
/* Headings may wrap ("Total Spend with Adjustments") so the ten starting columns fit
   their frame at 1280px instead of pushing the last one out of sight; cells stay on
   one line. */
.pcy-wrap .dui-table thead th,
.pcy-wrap .dui-table thead th .dui-sort { white-space: normal; }
.pcy-wrap .dui-table thead th { vertical-align: bottom; }
.pcy-adj { margin-bottom: 14px; }
.pcy-adj-table td, .pcy-adj-table th { vertical-align: top; white-space: normal; }
/* The description column wraps (its "Scanned: …" line names three files in words);
   the figures never do, or "Taken off" is pushed out of the card. */
.pcy-adj-table .pcy-num { white-space: nowrap; }
.pcy-adj .cov-bad { color: var(--red, #d93025); }
/* The claim-files drawer: all six Part A and Part B files, each with what the page
   does with it. Figures right-aligned and never wrapped (the shared drawer table
   aligns its cells left), and the file column wide enough that a file's name does
   not break in the middle of a phrase. */
.pcy-files { margin-bottom: 14px; }
.pcy-files-table th.pcy-num, .pcy-files-table td.pcy-num { text-align: right; white-space: nowrap; }
.pcy-files-table td:first-child { width: 25%; }
.pcy-files-table tfoot td { border-top: 2px solid var(--border, #dadce0); padding-top: 9px; }

/* ── The rail with words, and Home (13 Oct 2026; everyone's since 14 Oct 2026) ──
   Every page carries `rail-new` on the rail now and Home is every reader's landing,
   so nothing in this block is layout-scoped. What the per-user switch still
   controls (Quick look, the report Summary, first-open cards on dashboards, the
   coloured dashboard bars) is under `body.layout-new` further down. */
#icon-sidebar.rail-new { width: var(--sidebar-w); padding-top: 8px; }
/* Icons at 20px (were 15px — "make those icons bigger", 15 Oct 2026); the button
   grew 52 → 58px so a two-line label ("How it's worked out") still fits under one. */
.rail-new .sidebar-icon-btn {
  width: 62px; height: 58px; border-radius: 10px; margin: 1px 0;
  flex-direction: column; gap: 4px; font-size: 20px;
}
.rail-new .sidebar-icon-label {
  font-size: 10.5px; line-height: 1.1; font-weight: 500; letter-spacing: .01em;
  text-align: center; max-width: 60px; white-space: normal;
}
.rail-new .sidebar-logo { margin-bottom: 6px; }
.rail-new .sidebar-status-wrap { margin-bottom: 6px; }

/* Home */
.home-wrap { max-width: 1180px; margin: 0 auto; padding: 4px 0 40px; }
.home-hello { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.home-hello-text { flex: 1 1 420px; min-width: 0; font-size: 15px; color: var(--text-1); line-height: 1.5; }
.home-hello-text b { font-weight: 600; }
.home-hello-search { flex: 0 1 360px; }
.home-section-title { font-size: 15px; font-weight: 600; margin: 14px 0 8px; color: var(--text-1); }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.home-card {
  display: block; width: 100%; text-align: left; font-family: var(--font);
  border: 1px solid var(--border); border-top: 4px solid var(--task, var(--blue));
  border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs);
  padding: 14px 16px 42px; position: relative; cursor: pointer; color: var(--text-1);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.home-card:hover, .home-card:focus-visible {
  border-color: var(--task, var(--blue)); box-shadow: 0 6px 18px rgba(60,64,67,.14);
  transform: translateY(-2px); outline: none;
}
.home-card.unavailable { cursor: default; border-top-color: var(--border-hover); }
.home-card.unavailable:hover { border-color: var(--border); border-top-color: var(--border-hover); box-shadow: var(--shadow-xs); transform: none; }
.home-card-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.home-card-icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--task-light, var(--blue-light)); color: var(--task, var(--blue));
}
.home-card.unavailable .home-card-icon { background: var(--bg2); color: var(--text-3); }
.home-card-title { font-size: 15px; font-weight: 600; margin: 0; }
.home-card-number { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 2px 0 4px; color: var(--task, var(--text-1)); }
.home-card-number.pending { color: var(--text-3); font-size: 14px; font-weight: 500; }
.home-card-sentence { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.home-card-go {
  position: absolute; right: 12px; bottom: 10px; font-size: 12px; font-weight: 600;
  padding: 3px 11px; border-radius: var(--r-pill);
  background: var(--task-light, var(--blue-light)); color: var(--task-ink, var(--blue));
}
.home-card.unavailable .home-card-go { background: var(--bg2); color: var(--text-2); }
.home-ask { margin-top: 16px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 16px; }
.home-ask-label { font-size: 14px; font-weight: 600; }
.home-ask-sub { font-size: 12.5px; color: var(--text-2); margin-left: 6px; }
.home-ask-form { display: flex; gap: 8px; margin-top: 8px; }
.home-ask-input { flex: 1 1 auto; min-width: 0; border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14px; }
.home-ask-input:focus { outline: none; border-color: var(--blue); }
.home-ask-btn { flex: 0 0 auto; border: none; border-radius: 10px; background: var(--blue); color: #fff; padding: 0 16px; font: inherit; font-weight: 600; cursor: pointer; }
.home-ask-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.home-ask-example { border: 1px solid var(--border); border-radius: 14px; background: var(--bg2); padding: 3px 10px; font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer; }
.home-ask-example:hover { border-color: var(--blue); color: var(--blue); }
.home-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 12.5px; color: var(--text-2); }
.home-foot button { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--blue); cursor: pointer; }
.home-foot button:hover { text-decoration: underline; }
.home-empty { font-size: 13px; color: var(--text-2); padding: 12px 0; }

/* First-open card (one per screen, per person) */
.intro-card {
  border: 1px solid var(--border); border-left: 5px solid var(--task, var(--blue)); border-radius: 12px;
  background: linear-gradient(90deg, var(--task-light, var(--blue-light)) 0%, var(--surface) 80%);
  padding: 14px 16px; margin: 0 0 14px; font-size: 13.5px; line-height: 1.5;
}
.intro-card h4 { margin: 0 0 8px; font-size: 15px; color: var(--task-ink, var(--text-1)); }
.intro-card .intro-line { display: flex; gap: 10px; margin: 5px 0; align-items: flex-start; }
.intro-card .intro-k {
  flex: 0 0 22px; height: 22px; border-radius: 50%; margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--task, var(--blue)); color: #fff;
}
.intro-card .intro-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.intro-card .intro-actions button { font: inherit; font-size: 13px; border-radius: 8px; padding: 6px 12px; cursor: pointer; border: 1.5px solid var(--border); background: var(--surface); }
.intro-card .intro-actions button.primary { background: var(--task, var(--blue)); color: #fff; border-color: var(--task, var(--blue)); font-weight: 600; }

@media (max-width: 760px) {
  .home-cards { grid-template-columns: 1fr; }
  .home-hello-search { flex-basis: 100%; }
}

/* ── Quick look (13 Oct 2026) ────────────────────────────────────────────────
   The bar's question and level toggle (drawn by dashboard-base.js) and the pieces
   every Quick look screen shares: the Show me box, the presets, the headline
   sentence and the side sheet. Prefixes: db-question / db-level for the bar, psq-
   for the Patients screen, cvq- for Cost. */
.db-question { font-size: 13px; color: var(--text-2); margin-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.db-level { display: inline-flex; border: 1.5px solid var(--border); border-radius: var(--r-pill); overflow: hidden; flex-shrink: 0; }
.db-level-btn { font: inherit; font-size: 12.5px; font-weight: 500; padding: 5px 12px; border: none; background: var(--surface); color: var(--text-2); cursor: pointer; }
.db-level-btn + .db-level-btn { border-left: 1.5px solid var(--border); }
.db-level-btn[aria-pressed="true"] { background: var(--task, var(--text-1)); color: #fff; font-weight: 600; }
.db-level-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.psq-wrap .db-card, .cvq-wrap .db-card { margin-bottom: 12px; }
.psq-showme-title, .cvq-showme-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-1); }
.psq-presets, .cvq-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.psq-preset, .cvq-preset {
  font: inherit; font-size: 12.5px; border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text-1); padding: 4px 11px; cursor: pointer;
}
.psq-preset[aria-pressed="true"], .cvq-preset[aria-pressed="true"] { background: var(--task, var(--text-1)); color: #fff; border-color: var(--task, var(--text-1)); font-weight: 600; }
.psq-preset:not(:disabled):not([aria-pressed="true"]):hover, .cvq-preset:not(:disabled):not([aria-pressed="true"]):hover {
  background: var(--task-light, var(--bg2)); border-color: var(--task, var(--border-hover)); color: var(--task-ink, var(--text-1));
}
.psq-preset:disabled, .cvq-preset:disabled { color: var(--text-3); border-style: dashed; cursor: not-allowed; }
.psq-preset-n, .cvq-preset-n { font-variant-numeric: tabular-nums; }
.psq-months, .cvq-months { font-size: 12.5px; color: var(--text-2); margin: 4px 0 0; }
.psq-window { margin-top: 8px; }
.psq-headline, .cvq-headline {
  padding: 14px 18px; border-left: 5px solid var(--task, var(--blue));
  background: linear-gradient(90deg, var(--task-light, var(--blue-light)) 0%, var(--surface) 65%);
}
.psq-headline-main, .cvq-headline-main { font-size: 16px; line-height: 1.45; }
.psq-big, .cvq-big { font-size: 30px; font-weight: 700; letter-spacing: -.01em; line-height: 1; margin-right: 6px; vertical-align: -3px; font-variant-numeric: tabular-nums; color: var(--task, var(--text-1)); }
.psq-headline-sub, .cvq-headline-sub { font-size: 12.5px; color: var(--text-2); margin-top: 6px; line-height: 1.5; }
.psq-list { position: relative; }
.psq-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 0; }
.psq-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow);
  z-index: 40; overflow-y: auto; padding: 14px 16px 24px;
}
.psq-sheet-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.psq-sheet .dfx-ranges-intro { margin: 0 0 8px; }
.psq-sheet-pop { margin: 8px 0; }
.po3-pill-dead { background: #fce8e6; color: #a50e0e; }
@media (max-width: 760px) {
  .db-question { display: none; }
}

/* ── Cost Quick look pieces ──────────────────────────────────────────────── */
.cvq-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cvq-bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding: 0 2px; border-bottom: 1.5px solid var(--border); }
.cvq-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
.cvq-bar-fill { display: block; background: var(--blue); border-radius: 3px 3px 0 0; min-height: 2px; }
.cvq-bar.st-provisional .cvq-bar-fill { background: repeating-linear-gradient(45deg, #fff 0 3px, var(--blue) 3px 6px); }
.cvq-bar.st-not_reported .cvq-bar-fill { background: #fff; border: 1.5px dashed var(--border-strong, #9aa0a6); border-bottom: none; }
.cvq-bar.on .cvq-bar-fill { outline: 2px solid var(--text-1); outline-offset: 1px; }
.cvq-bar:hover .cvq-bar-fill { filter: brightness(.9); }
.cvq-bar:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cvq-bar-lab { font-size: 10px; color: var(--text-2); margin-top: 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvq-key { font-size: 11.5px; color: var(--text-2); margin: 6px 0 0; }
.cvq-key .k { display: inline-block; width: 16px; height: 9px; border-radius: 2px; vertical-align: middle; margin: 0 4px 0 8px; background: var(--blue); }
.cvq-key .k.provisional { background: repeating-linear-gradient(45deg, #fff 0 3px, var(--blue) 3px 6px); }
.cvq-key .k.not_reported { background: #fff; border: 1px dashed var(--border-strong, #9aa0a6); }
.cvq-rows { display: flex; flex-direction: column; gap: 4px; }
.cvq-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr minmax(140px, auto); gap: 8px; align-items: center; font-size: 12.5px; width: 100%; text-align: left; }
.cvq-row-btn { font: inherit; background: none; border: none; padding: 3px 4px; border-radius: 6px; cursor: pointer; color: inherit; }
.cvq-row-btn:hover, .cvq-row-btn:focus-visible { background: var(--bg2); outline: none; }
.cvq-rowname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cvq-rowbar { display: block; height: 10px; background: var(--bg2); border-radius: 2px; overflow: hidden; }
.cvq-rowbar i { display: block; height: 100%; background: var(--blue); border-radius: 2px; }
.cvq-rown { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.cvq-conc { font-size: 12.5px; color: var(--text-2); margin: 0 0 8px; }
.dui-tabs { display: flex; gap: 4px; margin: 0 0 8px; border-bottom: 1px solid var(--border); }
.cvq-tab { font: inherit; font-size: 12.5px; font-weight: 500; border: none; background: none; padding: 6px 10px; cursor: pointer; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cvq-tab[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
@media (max-width: 900px) { .cvq-two { grid-template-columns: 1fr; } }

/* ── Report Summary (13 Oct 2026) ──────────────────────────────────────────
   The view a report opens on in the new layout: findings first, the lists it
   produced, the steps as a list. The iframe (Full report) sits behind it. */
#nb-viewer { position: relative; }
.nb-summary { flex: 1; overflow: auto; }
.nb-summary-wrap { max-width: 980px; margin: 0 auto; }
.nb-summary-wrap .db-card { margin-bottom: 12px; }
.nb-findings { margin: 4px 0 0; padding-left: 0; list-style: none; counter-reset: finding; }
.nb-finding { position: relative; padding: 8px 0 8px 40px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.55; }
.nb-finding:first-child { border-top: none; }
.nb-finding::before { counter-increment: finding; content: counter(finding); position: absolute; left: 0; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--task-light, var(--blue-light)); color: var(--task-ink, var(--blue)); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.nb-finding p { margin: 0 0 6px; }
.nb-finding p:last-child { margin-bottom: 0; }
.nb-finding strong:first-child { color: var(--text-1); }
.nb-exports { display: flex; flex-direction: column; }
.nb-export { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13px; flex-wrap: wrap; }
.nb-export:first-child { border-top: none; }
.nb-export-name { flex: 1 1 260px; font-weight: 500; overflow-wrap: anywhere; }
.nb-export-rows { color: var(--text-2); font-size: 12px; }
.nb-export-actions { display: flex; gap: 6px; }
.nb-steps-intro { margin: 0 0 6px; font-size: 13px; color: var(--text-2); }
.nb-steps { margin: 0 0 10px; padding-left: 22px; font-size: 13px; columns: 2; column-gap: 24px; }
.nb-steps li { break-inside: avoid; padding: 2px 0; }
.nb-open-full { font: inherit; font-size: 13px; }
@media (max-width: 760px) { .nb-steps { columns: 1; } }

/* ── At a Glance and HCC Quick look pieces ──────────────────────────────── */
.glq-rows { display: flex; flex-direction: column; }
.glq-row { display: flex; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; flex-wrap: wrap; }
.glq-row:first-child { border-top: none; }
.glq-n { flex: 0 0 90px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--task, var(--text-1)); }
.glq-words { flex: 1 1 320px; min-width: 0; }
.glq-detail { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.glq-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.glq-sources { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); }
.hcq-state { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: var(--bg2); }
.hcq-state-not-coded { background: #fce8e6; color: #a50e0e; }
.hcq-state-suspect { background: #fef7e0; color: #7a4f01; }
.hcq-state-coded { background: #e6f4ea; color: #137333; }

/* ── Colour in the new layout (14 Oct 2026) ──────────────────────────────────
   After "the new UI looks lifeless — not enough colour". Each screen wears ONE hue,
   named in the registry (`DashboardSpec.hue`) and set as `data-hue` on its viewer
   (dashboard-base.js) and on the Home card that opens it (home.js), so a screen is
   the same colour wherever a reader meets it: the green screen is the money. Every
   rule reads three tokens. A hue marks WHICH screen, never better or worse, and the
   charts keep the colour of their measure (Cost's bars stay blue, as in Full view).
     --task        marks, accents and large numbers   (at least 3:1 on white)
     --task-ink    text set on --task-light            (at least 4.5:1)
     --task-light  tinted backgrounds
   Home and its cards wear hues on every page (Home is everyone's since 14 Oct 2026);
   a dashboard's bar wears its hue only under `body.layout-new`, where a Classic
   dashboard stays as it was. `#home-viewer` carries the product blue. */
body.layout-new, #home-viewer, [data-hue="blue"] { --task: #1a73e8; --task-ink: #1557b0; --task-light: #e8f0fe; }
[data-hue="teal"]   { --task: #00897b; --task-ink: #00695c; --task-light: #e0f2f1; }
[data-hue="green"]  { --task: #1e8e3e; --task-ink: #137333; --task-light: #e6f4ea; }
[data-hue="purple"] { --task: #8430ce; --task-ink: #681da8; --task-light: #f3e8fd; }
[data-hue="orange"] { --task: #d56600; --task-ink: #9a4500; --task-light: #fef0e1; }
[data-hue="indigo"] { --task: #3f51b5; --task-ink: #303f9f; --task-light: #e8eaf6; }
[data-hue="cyan"]   { --task: #12839a; --task-ink: #0b6475; --task-light: #e0f4f7; }
[data-hue="amber"]  { --task: #c27c00; --task-ink: #7a4f01; --task-light: #fef7e0; }
/* Reports are amber, the colour of "What the Reports Found". */
body.layout-new #nb-viewer { --task: #c27c00; --task-ink: #7a4f01; --task-light: #fef7e0; }

/* The bar: a line in the screen's colour under it, and its icon on a tile of it.
   Home's bar on every page; a dashboard's only in the new layout. */
body.layout-new .dash-viewer .db-bar, #home-viewer .db-bar,
body.layout-new #nb-viewer .nb-viewer-bar { box-shadow: inset 0 -3px 0 var(--task); }
body.layout-new .dash-viewer .db-title i, #home-viewer .db-title i {
  width: 26px; height: 26px; border-radius: 8px; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--task); color: #fff;
}

/* Home: the greeting and the year in one tinted band. */
.home-hero {
  border-radius: 16px; padding: 16px 20px 12px; margin: 0 0 6px;
  background: linear-gradient(115deg, #e8f0fe 0%, #f3e8fd 50%, #e0f2f1 100%);
}
.home-hero .home-hello { margin-bottom: 4px; }
.home-hero .home-ask-example { background: var(--surface); }
.home-section-title { font-size: 16px; margin-top: 18px; }

/* Quick look: each card's title carries a short bar in the screen's colour. */
.psq-wrap .db-card-title, .cvq-wrap .db-card-title, .psq-showme-title, .cvq-showme-title, .psq-wrap .dui-h2 {
  display: flex; align-items: center; gap: 8px;
}
.psq-wrap .db-card-title::before, .cvq-wrap .db-card-title::before,
.psq-showme-title::before, .cvq-showme-title::before, .psq-wrap .dui-h2::before {
  content: ''; flex: 0 0 4px; width: 4px; height: 15px; border-radius: 2px; background: var(--task, var(--blue));
}
.psq-preset-n, .cvq-preset-n { font-weight: 600; }

/* ── Financial (the 5-year operating model) ──────────────────────────────────
   The shell around the vendored model: the bar, the toolbar and the empty state.
   The model's own styles are generated into
   financial-model.css by scripts/patch_financial_bundle.py, scoped under .fin-app. */
#financial-viewer {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.fin-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
  padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg2);
}
.fin-scenario-label { font-size: 12.5px; color: var(--text-2); }
#fin-scenario { max-width: 360px; min-width: 180px; }
.fin-drop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 3px; border: 1.5px dashed var(--border); border-radius: var(--r-pill);
  transition: border-color .15s, background .15s;
}
.fin-drop.is-over { border-color: var(--blue); background: var(--blue-light); }
.fin-drop-hint { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.fin-manage { display: inline-flex; align-items: center; gap: 8px; }
.fin-remove-confirm { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); flex-wrap: wrap; }
.fin-danger { color: var(--red); }
.fin-danger:hover { border-color: var(--red); color: var(--red); }
.fin-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 24px; text-align: center; color: var(--text-2);
}
.fin-empty-icon { font-size: 34px; color: var(--link); }
.fin-empty h3 { margin: 0; color: var(--text-1); font-size: 18px; }
.fin-empty p { margin: 0; max-width: 60ch; font-size: 14px; line-height: 1.55; }
.fin-empty p:last-child { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.fin-app.hidden { display: none; }
@media (max-width: 720px) {
  .fin-drop-hint { display: none; }
  #fin-scenario { min-width: 0; max-width: 100%; }
}

/* ── Contract Review (15 Oct 2026) ──────────────────────────────────────────────
   js/contract-review.js. One step on screen at a time; the preview is a sandboxed
   srcdoc iframe, exactly as the story viewer shows a storybook. Muted text is
   --text-2, not --text-3 (2.6:1 on white). */
#contract-review-viewer {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.cr-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 28px; background: var(--bg2); }
.cr-card {
  max-width: 1180px; margin: 0 auto 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 18px 22px; box-shadow: var(--shadow-xs);
}
.cr-h { font-size: 17px; font-weight: 700; color: var(--text-1); margin: 0 0 6px; }
.cr-lede { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin: 0 0 14px; max-width: 900px; }
.cr-muted { font-size: 12px; color: var(--text-2); }
.cr-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  border: 2px dashed var(--border-hover); border-radius: 12px; padding: 22px 16px; cursor: pointer;
  color: var(--text-1); font-size: 13.5px; background: var(--bg2);
}
.cr-drop:hover, .cr-drop:focus, .cr-drop.cr-drag { border-color: var(--blue); background: var(--blue-light); outline: none; }
.cr-drop-icon { font-size: 26px; color: var(--blue); margin-bottom: 4px; }
.cr-file-name { margin-top: 6px; font-weight: 600; color: var(--blue-dark); }
.cr-options { margin: 14px 0 4px; font-size: 13px; color: var(--text-1); }
.cr-options summary { cursor: pointer; font-weight: 600; color: var(--text-2); }
.cr-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: 13px; color: var(--text-1); max-width: 520px; }
.cr-field input[type=text] {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 13px;
  font-family: var(--font); background: var(--surface); color: var(--text-1);
}
.cr-field input[type=text]:focus { border-color: var(--blue); outline: none; }
.cr-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: 13px; }
.cr-ai-note { margin: 2px 0 0 24px; max-width: 760px; }
.cr-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.cr-btn-primary {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--r-pill);
  border: none; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cr-btn-primary:hover { background: var(--blue-dark); }
.cr-btn-primary:disabled { background: var(--border-hover); cursor: not-allowed; }
.cr-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 13px; cursor: pointer;
}
.cr-btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.cr-error { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: var(--red-light); color: #a50e0e; font-size: 13px; }
.cr-reading { display: flex; align-items: center; gap: 14px; }
.cr-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cr-sum { border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 8px; padding: 8px 12px; background: var(--bg2); }
.cr-sum-l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); font-weight: 600; }
.cr-sum-v { font-size: 14px; font-weight: 700; color: var(--text-1); margin-top: 2px; word-break: break-word; }
.cr-sum-s { font-size: 12px; color: var(--text-2); margin-top: 2px; word-break: break-word; }
.cr-signed { border: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 13.5px; }
.cr-signed legend { font-weight: 700; color: var(--text-1); margin-bottom: 4px; width: 100%; }
.cr-signed label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cr-dest {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--blue-light);
  border: 1px solid #c6dafc; font-size: 13px; color: var(--text-1); line-height: 1.6; word-break: break-word;
}
.cr-dest-h { font-size: 14px; margin-bottom: 2px; }
.cr-dest-h i { color: var(--blue); margin-right: 4px; }
.cr-title-field { margin-top: 12px; }
.cr-ok { color: var(--green); }
.cr-preview-head { max-width: 1180px; margin: 4px auto 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.cr-preview {
  display: block; width: 100%; max-width: 1180px; margin: 0 auto; height: 78vh; min-height: 520px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
@media (max-width: 700px) {
  .cr-body { padding: 12px; }
  .cr-card { padding: 14px; }
}

/* ── Contract Review: the clause table (16 Oct 2026) ─────────────────────────── */
.cr-kbar { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
.cr-kcount { font-size: 13px; font-weight: 600; color: var(--text-1); }
.cr-clauses { max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 14px; background: var(--bg); }
.cr-ktable { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.cr-ktable th { position: sticky; top: 0; z-index: 1; background: var(--bg2); color: var(--text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.cr-ktable td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cr-kid { color: var(--text-2); white-space: nowrap; }
.cr-ksec { min-width: 150px; }
.cr-kwhat { min-width: 320px; max-width: 520px; line-height: 1.5; }
.cr-knum { font-weight: 700; color: var(--text-1); margin-bottom: 3px; }
.cr-kred del { color: #b71c1c; }
.cr-kred ins { color: #1b5e20; text-decoration: underline; }
.cr-kverdict { font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-1); }
.cr-kpolicy { width: 140px; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-1); }
.cr-kaction { width: 240px; min-width: 200px; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-1); resize: vertical; font-family: inherit; }
.cr-ksrc { font-size: 11.5px; color: var(--text-2); margin-top: 4px; max-width: 180px; }
.cr-ksugg { color: var(--blue-dark); font-style: italic; }
.cr-krow.cr-v-in_order .cr-kid { color: var(--green); font-weight: 700; }
.cr-krow.cr-v-action .cr-kid { color: var(--amber, #e65100); font-weight: 700; }
.cr-field select { font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-1); max-width: 520px; }

/* ── Contract Review: saved reviews, editing, import results (16 Oct 2026) ──── */
.cr-saved-list { overflow: auto; }
.cr-saved-actions { white-space: nowrap; }
.cr-saved-actions .cr-btn-ghost, .cr-import-results .cr-btn-ghost { padding: 4px 10px; font-size: 12px; }
.cr-v-ok { color: var(--green); font-weight: 700; }
.cr-v-act { color: #e65100; font-weight: 700; }
.cr-v-pend { color: var(--text-2); font-weight: 700; }
.cr-old { display: inline-block; padding: 1px 7px; border-radius: 10px; background: #fff8e1; color: #8a5a00; font-size: 11px; font-weight: 600; }
.cr-editing .cr-signed, .cr-editing .cr-dest, .cr-editing .cr-title-field,
.cr-editing .cr-preview-head, .cr-editing #cr-preview { display: none !important; }
#cr-import-results { margin: 10px 0 4px; overflow: auto; }
.cr-error-cell { color: #a50e0e; }
/* the Contracts dashboard */
.ctd-v { display: inline-block; margin-right: 6px; font-weight: 700; white-space: nowrap; }
.ctd-v-ok { color: var(--green); }
.ctd-v-act { color: #e65100; }
.ctd-v-pend { color: var(--text-2); }
.ctd-signed { background: var(--green-light, #e6f4ea); color: var(--green); }
.ctd-proposed { background: var(--blue-light); color: var(--blue-dark); }
.ctd-old { background: #fff8e1; color: #8a5a00; margin-left: 6px; }
.ctd-btn { font-size: 12px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text-1); cursor: pointer; white-space: nowrap; }
.ctd-btn:hover { border-color: var(--blue); color: var(--blue); }
.ctd-btn-sm { margin-left: 8px; flex-shrink: 0; }
.ctd-actions { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   Workflows (22 Oct 2026) — the care team's worklists from the legacy 3QHS web
   app: the drawer, the viewer, the list, the action buttons and the three modals.
   ══════════════════════════════════════════════════════════════════════════ */

/* The drawer: the same slide-over the Dashboards panel is. */
#workflows-panel {
  position: fixed;
  top: 0; left: var(--sidebar-w); bottom: 0;
  width: var(--drawer-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 25;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(-1 * var(--drawer-w) - var(--sidebar-w)));
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
#workflows-panel.open { transform: translateX(0); }
#workflows-panel .nb-item-name { white-space: normal; }
#workflows-panel .nb-item-meta { white-space: normal; line-height: 1.35; }

/* The viewer: a bar, then a column that scrolls. */
#workflow-viewer {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.wf-body {
  flex: 1; min-height: 0; overflow: auto;
  padding: 14px 18px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.wf-body.wf-busy .wf-table-host, .wf-body.wf-busy .wf-pager { opacity: .5; }

.wf-toolbar { display: flex; flex-direction: column; gap: 10px; }
.wf-filters, .wf-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.wf-filters {
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.wf-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.wf-filter > span { white-space: nowrap; }
.wf-filter .an-select, .wf-filter .an-input { min-width: 150px; }
.wf-filter-search .an-input { min-width: 220px; }
.wf-apply { padding: 7px 14px; font-size: 13px; }
.wf-summary { font-size: 13px; color: var(--text-2); }
.wf-tools-spacer { flex: 1; }

.wf-notices { display: flex; flex-direction: column; gap: 6px; }
.wf-notices:empty { display: none; }
.wf-notice {
  margin: 0; padding: 9px 12px; border-radius: 8px;
  background: var(--blue-light); color: var(--text-1); font-size: 13px;
  display: flex; gap: 8px; align-items: flex-start;
}
.wf-notice i { color: var(--blue); margin-top: 2px; }

/* The list reuses the shared table styles (.dui-table); only what differs is here. */
.wf-table-wrap { max-height: none; }
.wf-table th { vertical-align: bottom; }
.wf-table td { vertical-align: top; }
.wf-table .wf-lines { display: inline-block; min-width: 8em; max-width: 17em; white-space: normal; line-height: 1.35; }
.wf-table .wf-empty { text-align: center; color: var(--text-3); padding: 28px 12px; }

/* What the list draws (24 Oct 2026): sized to fit the screen instead of scrolling
   sideways. A heading wraps once its column is narrower than it; a sentence wraps
   at a reading width; numbers, dates and pills stay on one line. */
.wf-table thead th, .wf-table thead th .dui-sort { white-space: normal; }
.wf-table .wf-th { display: inline-block; max-width: 7.5em; text-wrap: balance; line-height: 1.3; }
.wf-table th, .wf-table td { padding-left: 9px; padding-right: 9px; }
.wf-table td.wf-wrap { white-space: normal; line-height: 1.35; }
.wf-table .wf-tx { display: block; min-width: 11em; max-width: 20em; white-space: pre-line; line-height: 1.35; }
/* A very long text (an outreach note, say) shows five lines; the row details carry
   it in full. */
.wf-table td > .wf-tx-clamp, .wf-table .wf-first > .wf-tx-clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
}
.wf-nb { white-space: nowrap; }
.wf-first { display: inline-flex; align-items: flex-start; gap: 6px; }
.wf-expand {
  flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 6px; padding: 0;
  border: 1px solid transparent; background: none; color: var(--text-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.wf-expand:hover { background: var(--bg2); color: var(--blue-dark); border-color: var(--border); }
.wf-expand:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 1px; }
.wf-expand i { transition: transform .15s; }
.wf-expand[aria-expanded="true"] { color: var(--blue-dark); }
.wf-expand[aria-expanded="true"] i { transform: rotate(90deg); }
.wf-who { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.3; max-width: 12em; white-space: normal; }
.wf-pname {
  padding: 0; border: none; background: none; font: inherit; font-weight: 600; text-align: left;
  color: var(--blue-dark); cursor: pointer;
}
.wf-pname:hover { text-decoration: underline; text-underline-offset: 2px; }
.wf-pname:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; border-radius: 3px; }
.wf-pname-text { font-weight: 600; color: var(--text-1); }
.wf-who-id { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wf-who-facts { font-size: 11.5px; color: var(--text-3); }
.wf-team-practice { display: block; min-width: 8em; white-space: normal; }
.wf-flags { display: block; min-width: 9em; max-width: 14em; white-space: normal; line-height: 1.4; }
/* The first cell and the actions stay in view if a reader turns on more columns
   than fit; their own background, or the cells scrolling under them show through. */
.wf-table .wf-stick-l, .wf-table .wf-stick-r { position: sticky; z-index: 1; background: var(--surface); }
.wf-table .wf-stick-l { left: 0; box-shadow: inset -1px 0 0 var(--border); }
.wf-table .wf-stick-r { right: 0; box-shadow: inset 1px 0 0 var(--border); }
.wf-table thead .wf-stick-l, .wf-table thead .wf-stick-r { z-index: 3; background: var(--bg2); }
.wf-table tbody tr.wf-row:hover > td.wf-stick-l,
.wf-table tbody tr.wf-row:hover > td.wf-stick-r { background: var(--bg2); }
.wf-table tbody tr.wf-row-open > td { border-bottom-color: transparent; }
.wf-table tbody tr.wf-row-open, .wf-table tbody tr.wf-row-open > td.wf-stick-l,
.wf-table tbody tr.wf-row-open > td.wf-stick-r { background: var(--blue-light); }
/* The row details: every column the row does not draw, label over value. Pinned to
   the left of the scroller and no wider than the window, so it reads in place even
   when the table beside it is wider than the screen. */
.wf-detail-row > td { padding: 0 !important; white-space: normal; background: var(--blue-light); }
.wf-detail-box { position: sticky; left: 0; max-width: calc(100vw - 150px); padding: 4px 14px 14px 44px; }
.wf-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 22px; margin: 0; }
.wf-dl-item { min-width: 0; }
.wf-dl dt { font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-bottom: 2px; }
.wf-dl dd { margin: 0; font-size: 12.5px; color: var(--text-1); overflow-wrap: anywhere; }
.wf-dl dd .wf-tx, .wf-dl dd .wf-lines { min-width: 0; max-width: none; }
.wf-dl-wide { grid-column: 1 / -1; }
.wf-dl dd .wf-comment { max-width: none; }
.wf-cols-note { margin: 8px 4px 2px; font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.wf-muted { color: var(--text-3); }

.wf-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  background: var(--bg2); color: var(--text-2); border: 1px solid var(--border);
}
.wf-pill-active   { background: #e6f4ea; color: #137333; border-color: #c6e5cf; }
.wf-pill-inactive { background: var(--bg2); color: var(--text-2); }
.wf-pill-deceased { background: #fce8e6; color: #b3261e; border-color: #f5c2bd; }
.wf-pill-unknown  { background: #fff4e5; color: #8a5300; border-color: #f5d9a8; }
.wf-set { color: var(--blue); font-size: 11.5px; margin-left: 4px; cursor: help; }

.wf-comment {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 0; border: none; background: none; font: inherit; text-align: left; cursor: pointer;
  min-width: 9em; max-width: 15em; color: var(--text-1);
}
.wf-comment:hover .wf-comment-text { text-decoration: underline; text-underline-offset: 2px; }
.wf-comment-text { white-space: normal; line-height: 1.35; }
.wf-comment-meta { font-size: 11.5px; color: var(--text-3); }

/* The three action buttons of the legacy list, side by side. */
/* At most three to a line, so the column stays narrow on a list with five. */
.wf-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; width: max-content; max-width: 114px; }
.wf-act {
  width: 34px; height: 30px; border-radius: 7px; border: 1px solid transparent;
  background: var(--blue); color: #fff; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.wf-act:hover:not(:disabled) { background: var(--blue-dark); transform: none; }
.wf-act:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }
.wf-act:disabled { background: var(--bg2); color: var(--text-3); border-color: var(--border); cursor: not-allowed; }

.wf-pager-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wf-pager-info { font-size: 13px; color: var(--text-2); margin-right: 8px; }
.wf-pager-nav .di-btn-ghost { min-width: 34px; justify-content: center; }
.wf-pager-nav .wf-page-n.is-current { background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); font-weight: 600; }

.wf-sources-box { font-size: 12.5px; color: var(--text-2); }
.wf-sources-box summary { cursor: pointer; width: max-content; }
.wf-sources-box summary i { color: var(--blue); margin-right: 6px; }
.wf-sources-box ul { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 4px; }

/* The modals: the legacy app's label-left, control-right form rows. */
.wf-modal-patient { margin: 0 0 14px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.wf-field { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; margin-bottom: 14px; }
.wf-field-top { align-items: start; }
.wf-label { font-size: 13px; font-weight: 600; color: var(--text-1); }
.wf-field .an-select, .wf-field .an-input { width: 100%; }
.wf-textarea {
  width: 100%; min-height: 110px; resize: vertical; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text-1); font: inherit; font-size: 13px;
}
.wf-textarea:focus { outline: none; border-color: var(--blue); }
.wf-outreach-fields { display: contents; }
.wf-modal-note { margin: -6px 0 12px; font-size: 12.5px; color: var(--text-2); }
.wf-modal-note i { color: var(--amber, #b26a00); margin-right: 6px; }
.wf-modal-error { margin: 0; font-size: 13px; color: var(--red); }

.wf-history { display: flex; flex-direction: column; gap: 10px; }
.wf-history-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg2); }
.wf-history-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-bottom: 4px; }
.wf-history-kind { font-size: 12.5px; font-weight: 600; color: var(--text-1); }
.wf-history-status .wf-history-kind, .wf-history-kind.wf-history-status { color: #8a5300; }
.wf-history-meta { font-size: 11.5px; color: var(--text-3); }
.wf-history-text { font-size: 13px; color: var(--text-1); white-space: pre-wrap; line-height: 1.4; }

/* Assign To (24 Oct 2026): choose a Care Manager and a list, then confirm the count,
   the patients (each one can be unchecked) and the attestation. Muted text here is
   --text-2, not --text-3, which is too light to read on white. */
.wf-assign-lede { margin: 0 0 14px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.wf-assign-count { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text-1); line-height: 1.4; }
.wf-assign-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.wf-assign-tools .an-input { flex: 1 1 220px; min-width: 0; }
.wf-assign-list {
  max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
}
.wf-assign-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.wf-assign-row:last-child { border-bottom: none; }
.wf-assign-row:hover { background: var(--bg2); }
.wf-assign-row input { flex: none; width: 16px; height: 16px; }
.wf-assign-row.is-off { cursor: default; }
.wf-assign-row.is-off .wf-assign-name { color: var(--text-2); }
.wf-assign-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wf-assign-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.wf-assign-meta { font-size: 12px; color: var(--text-2); }
.wf-assign-tags { flex: 0 1 auto; max-width: 45%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.wf-assign-tag { font-size: 11.5px; color: var(--text-2); background: var(--bg2); text-align: right;
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
/* Assign or Remove: the first choice in the overlay. */
.wf-assign-mode { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; }
.wf-assign-mode-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--text-1); cursor: pointer; }
.wf-assign-mode-opt:has(input:disabled) { color: var(--text-2); cursor: default; }
.wf-assign-empty { margin: 0; padding: 14px; font-size: 13px; }
.wf-assign-attest {
  margin: 14px 0 0; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--text-1);
  background: #fef7e0; border-left: 4px solid var(--amber, #b26a00); border-radius: 6px;
}

@media (max-width: 720px) {
  .wf-field { grid-template-columns: 1fr; gap: 4px; }
  .wf-filter .an-select, .wf-filter .an-input, .wf-filter-search .an-input { min-width: 0; width: 100%; }
  .wf-filter { width: 100%; }
}

/* Workflows, round 2 (22 Oct 2026): the legacy filter block — a main row, the shared
   multi-selects beneath it, More Filters, and the C3 page's numeric rule rows. */
/* A column now (round 2): the main row, the pickers, the buttons, More Filters. Stretch,
   not the round-1 rule's centre, or the pickers' grid collapses to one centred column. */
.wf-filters { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
.wf-filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 14px; }
.wf-filter-row:empty { display: none; }
.wf-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wf-ms-host .cov-filters {
  background: transparent; border: none; box-shadow: none; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px;
}
.wf-ms-host:empty { display: none; }
.wf-more { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.wf-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.wf-rules-title { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.wf-rule { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.wf-rule-label { white-space: nowrap; }
.wf-rule .an-select { min-width: 140px; }
.wf-rule-value { width: 90px; min-width: 0; }

/* The worklist's own status (New / WIP / Completed / Removed). */
.wf-lstat {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--bg2); color: var(--text-2); border: 1px solid var(--border);
}
.wf-lstat-new { background: var(--blue-light); color: var(--blue-dark); border-color: #c9ddfb; }
.wf-lstat-wip { background: #fff4e5; color: #8a5300; border-color: #f5d9a8; }
.wf-lstat-completed { background: #e6f4ea; color: #137333; border-color: #c6e5cf; }
.wf-lstat-removed { background: var(--bg2); color: var(--text-3); }
.wf-lstat-blank { background: transparent; border-color: transparent; color: var(--text-3); }
.wf-history-list_status .wf-history-kind, .wf-history-kind.wf-history-list_status { color: var(--blue-dark); }

/* ── Workflows round 3: the SIM assessment form, the patient's Outreach tab, the
   Care Management page ─────────────────────────────────────────────────────── */
/* The Workflows modals open from INSIDE the patient screen's own modal (the Outreach
   tab), so they sit one layer above every .modal-backdrop (z-index 50): with equal
   z-index the patient screen, later in the document, covered them and swallowed the
   clicks. */
#wf-comment-modal, #wf-status-modal, #wf-liststatus-modal, #wf-history-modal,
#wf-assessment-modal, #wf-detail-modal { z-index: 51; }
.wf-act-draft { background: var(--red); }
.wf-act-draft:hover:not(:disabled) { background: #a3261e; }

/* The form: a wide modal whose body scrolls. */
.wf-assessment-box { width: min(1180px, 96vw); max-width: 96vw; }
.wf-assessment-body { max-height: 72vh; overflow: auto; }
.wf-assessment-footer { display: flex; align-items: center; gap: 10px; }
.wf-assessment-footer .wf-modal-error { margin: 0; }
.wf-draft-btn { color: var(--red); border-color: var(--red); }
.wf-draft-btn:hover { color: #a3261e; border-color: #a3261e; }
.wf-asm { display: flex; flex-direction: column; gap: 14px; font-size: 13px; }
.wf-asm-patient { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: flex-start; }
.wf-asm-pname { font-size: 18px; font-weight: 600; color: var(--text-1); }
.wf-asm-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.wf-asm-facts dt { font-size: 11.5px; color: var(--text-3); }
.wf-asm-facts dd { margin: 0; font-weight: 500; color: var(--text-1); }
.wf-asm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 8px 22px; }
.wf-asm-grid-4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.wf-asm-row { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 6px 12px; align-items: start; padding: 4px 0; }
.wf-asm-row[hidden] { display: none; }
.wf-asm-row-off { opacity: .55; }
.wf-asm-label { font-weight: 600; color: var(--text-2); text-align: right; padding-top: 6px; line-height: 1.3; }
.wf-asm-req { color: var(--red); margin-left: 2px; }
.wf-asm-ctl { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
.wf-asm-ctl .an-select, .wf-asm-ctl .an-input, .wf-asm-ctl .wf-textarea { max-width: 100%; }
.wf-asm-ctl .wf-textarea { flex: 1 1 320px; }
.wf-asm-ctl .an-select { flex: 1 1 260px; min-width: 0; }
.wf-asm-note { flex: 1 1 220px; min-width: 160px; }
.wf-asm-radios, .wf-asm-checks, .wf-asm-codes { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.wf-asm-radio, .wf-asm-check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.wf-asm-check-system { color: var(--text-3); }
.wf-asm-code { display: inline-flex; gap: 8px; align-items: center; }
.wf-asm-link { font-size: 12px; color: var(--blue-dark); overflow-wrap: anywhere; }
.wf-asm-figures { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.wf-asm-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 12.5px; }
.wf-asm-table th, .wf-asm-table td { border: 1px solid var(--border); padding: 5px 9px; text-align: left; vertical-align: top; }
.wf-asm-table th { font-weight: 600; color: var(--text-2); width: 22%; }
.wf-asm-table thead th { text-align: center; width: auto; }
.wf-asm-figures-note { margin: 0; font-size: 12px; }
.wf-asm-block { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.wf-asm-block-title { font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.wf-asm-esas .wf-asm-row { grid-template-columns: minmax(130px, 170px) 1fr; }
.wf-asm-scale { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-asm-scale input[type="range"] { width: 220px; accent-color: var(--blue); }
.wf-asm-scale-end { font-size: 12px; color: var(--text-3); }
.wf-asm-scale-val { min-width: 22px; font-weight: 600; text-align: center; }
.wf-asm-scale-cap { font-size: 12px; color: var(--text-3); }
.wf-asm-esas-note { font-size: 11.5px; color: var(--text-3); margin: 8px 0 0; }
.wf-asm-vital { max-width: 120px; }

/* A saved form read back. */
.wf-detail-head div { line-height: 1.7; }
.wf-detail-patient, .wf-detail-title { font-size: 18px; font-weight: 600; margin-top: 6px; }
.wf-detail-table { margin-top: 12px; }
.wf-detail-q { width: 65%; }
.wf-detail-a { text-align: right; font-weight: 600; }
.wf-detail-note { font-weight: 400; color: var(--text-2); }

/* The patient screen's Outreach tab: a sub-nav beside the list. */
.wf-pt { display: flex; gap: 18px; min-height: 0; }
.wf-pt-nav { display: flex; flex-direction: column; gap: 4px; min-width: 150px; border-right: 1px solid var(--border); padding-right: 12px; }
.wf-pt-link, .wf-cm-link {
  text-align: left; border: none; background: none; font: inherit; font-size: 13px;
  color: var(--blue-dark); padding: 7px 10px; border-radius: 8px; cursor: pointer;
}
.wf-pt-link:hover, .wf-cm-link:hover { background: var(--bg2); }
.wf-pt-link[aria-pressed="true"], .wf-cm-link[aria-pressed="true"] { background: var(--blue-light); color: var(--blue-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.wf-pt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.wf-pt-head { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.wf-pt-title, .wf-cm-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-1); }
.wf-pt-assessment .an-select { min-width: 360px; }
.wf-pt-state:empty { display: none; }
.wf-pt-state { font-size: 13px; color: var(--text-2); }
.wf-pt .wf-table-wrap { max-height: 50vh; }

/* The Care Management page: a left nav, the filters, bar lists, the timeline. */
.wf-cm { display: flex; gap: 20px; align-items: flex-start; }
.wf-cm-nav { display: flex; flex-direction: column; gap: 4px; min-width: 190px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface); position: sticky; top: 0; }
.wf-cm-nav-title { font-size: 13px; color: var(--text-2); padding: 4px 10px 6px; }
.wf-cm-nav .wf-cm-link { margin-left: 10px; }
.wf-cm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.wf-cm-window { margin: 0; font-size: 12.5px; color: var(--text-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; align-self: flex-end; }
.wf-cm-filter-value p { margin: 0 0 2px; font-size: 13px; color: var(--text-2); }
.wf-cm-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.wf-cm-chart { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.wf-cm-chart-title { margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--text-1); text-align: center; }
.wf-cm-total { margin: 10px 0 0; font-size: 13px; color: var(--text-1); }
.wf-cm-note { margin: 6px 0 0; font-size: 12px; color: var(--text-3); }
.wf-cm-run { margin: 0; font-size: 12px; color: var(--text-3); text-align: right; }
.wf-bars { display: flex; flex-direction: column; gap: 6px; }
.wf-bar-row { display: grid; grid-template-columns: minmax(120px, 42%) 1fr 48px; gap: 10px; align-items: center; font-size: 13px; }
.wf-bar-name { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-bar-track { height: 18px; background: var(--bg2); border-radius: 4px; overflow: hidden; }
.wf-bar-fill { display: block; height: 100%; background: var(--blue); border-radius: 0 4px 4px 0; }
.wf-bar-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-1); font-weight: 600; }

.wf-tl-toggle-h { width: 34px; }
.wf-tl-toggle { width: 28px; height: 26px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; color: var(--text-2); }
.wf-tl-toggle:hover { border-color: var(--blue); color: var(--blue); }
.wf-tl-detail td { background: var(--bg2); }
.wf-tl { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.wf-tl-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 13px; }
.wf-tl-profile { margin-left: auto; }
/* The line is painted INSIDE the strip (a scroller clips what sticks out), so the
   dots straddle it rather than being cut off at the strip's edge. */
.wf-tl-strip {
  display: flex; gap: 0; overflow-x: auto; padding: 6px 4px 4px; margin-top: 8px;
  background: linear-gradient(var(--border), var(--border)) no-repeat 0 11px / 100% 2px;
}
.wf-tl-point {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 190px;
  border: none; background: none; font: inherit; text-align: left; cursor: pointer; padding: 0 12px 4px 0; position: relative;
}
.wf-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); display: block; margin: 0 0 6px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--blue); }
.wf-tl-point.is-current .wf-tl-dot { background: var(--blue-dark); box-shadow: 0 0 0 3px var(--blue-light); }
.wf-tl-point:hover .wf-tl-name { text-decoration: underline; }
.wf-tl-name { font-weight: 600; color: var(--text-1); font-size: 12.5px; }
.wf-tl-when, .wf-tl-status { font-size: 11.5px; color: var(--text-3); }
.wf-tl-detail-pane { max-height: 380px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--surface); }
.wf-tl-lines td, .wf-tl-lines th { font-size: 12.5px; }
.wf-tl-open { margin-top: 8px; }
@media (max-width: 900px) {
  .wf-cm, .wf-pt { flex-direction: column; }
  .wf-cm-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .wf-pt-nav { flex-direction: row; border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 8px; }
  .wf-asm-row { grid-template-columns: 1fr; }
  .wf-asm-label { text-align: left; padding-top: 0; }
}

/* ── Clinical Performance (js/clinical-performance-dashboard.js) ──────────────────
   The screen's own pieces; tiles, cards, bar lists and tables are the shared db-*
   styles. Nothing here is coloured by the screen's hue (a hue marks WHICH screen). */
.cpd-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-1); }
.cpd-row { margin-top: 4px; }
.cpd-col { min-width: 0; }
.cpd-chart { display: block; width: 100%; height: auto; }
.cpd-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; font-size: 12px; color: var(--text-2); }
.cpd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cpd-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.cpd-legend .cpd-hatch-key { background: repeating-linear-gradient(45deg, #5c6bc0 0 2px, #ffffff 2px 4px); border: 1px solid #5c6bc0; }
.db-hbar-label.cpd-hbar-label { width: 150px; }
.cpd-hbar-extra { flex-shrink: 0; min-width: 8.5em; text-align: right; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* "About these figures:" and one ⓘ per tile that explains itself */
.cpd-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 10px 0 2px 6px; font-size: 12px; color: var(--text-2); }
.cpd-hints-lead { color: var(--text-2); font-weight: 600; }
.cpd-hint-item { display: inline-flex; align-items: center; gap: 2px; }
.cpd-tile-whole { color: var(--text-2); }
/* a note under a bar list or a table, not touching its last row */
.cpd-wrap .db-hbars + .db-card-note, .cpd-wrap .db-table-wrap + .db-card-note { margin-top: 8px; line-height: 1.45; }
/* By practice: seventeen columns do not fit, so the table scrolls and the name stays */
.cpd-table-wrap th { white-space: normal; min-width: 92px; vertical-align: bottom; line-height: 1.3; }
.cpd-table-wrap th:first-child, .cpd-table-wrap td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  min-width: 220px; white-space: normal; box-shadow: 1px 0 0 var(--border);
}
/* The lists the care team works: the patient count in its own block, then the list */
.cpd-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.cpd-list {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  font: inherit; color: inherit; text-align: left;
}
.cpd-list-open { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.cpd-list-open:hover { border-color: var(--blue); box-shadow: var(--shadow-xs); }
.cpd-list-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cpd-list-count {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
  min-width: 76px; padding: 8px 10px; border-radius: 10px; background: var(--bg2);
}
.cpd-list-num { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--text-1); font-variant-numeric: tabular-nums; }
.cpd-list-unit { margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.cpd-list-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cpd-list-label { font-size: 13.5px; font-weight: 600; color: var(--text-1); line-height: 1.3; }
.cpd-list-blurb { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.cpd-list-go { flex-shrink: 0; font-size: 12px; color: var(--text-2); }
.cpd-list-open:hover .cpd-list-go { color: var(--blue); }
/* Where to look first: the sections' own tiles as sentences, the number set large */
.cpd-finding-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cpd-finding {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  font: inherit; color: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.cpd-finding:hover { border-color: var(--blue); box-shadow: var(--shadow-xs); }
.cpd-finding:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cpd-finding-text { font-size: 13.5px; line-height: 1.4; color: var(--text-1); }
.cpd-finding-num { font-size: 20px; font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; color: var(--text-1); }
.cpd-finding-sub { font-size: 12px; color: var(--text-2); }
.cpd-findings .cpd-finding-grid + .db-card-note { margin-top: 10px; }
/* one topic at a time */
.cpd-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto;
  scrollbar-width: thin; margin-top: 4px;
}
.cpd-tab {
  flex-shrink: 0; padding: 10px 14px; border: none; border-bottom: 3px solid transparent; background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.cpd-tab:hover { color: var(--text-1); }
.cpd-tab[aria-selected="true"] { color: var(--task-ink, var(--blue)); border-bottom-color: var(--task, var(--blue)); }
.cpd-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.cpd-panel { display: flex; flex-direction: column; gap: 16px; }
.cpd-panel[hidden] { display: none; }
/* "More figures" and the longer tables, folded until asked for */
.cpd-more { margin-top: 10px; }
.cpd-more > summary {
  cursor: pointer; width: fit-content; padding: 4px 2px; font-size: 12.5px; font-weight: 600; color: var(--blue);
  list-style: none;
}
.cpd-more > summary::-webkit-details-marker { display: none; }
.cpd-more > summary::before { content: '\25B8'; display: inline-block; margin-right: 6px; transition: transform .12s; }
.cpd-more[open] > summary::before { transform: rotate(90deg); }
.cpd-more > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.cpd-more[open] > summary { margin-bottom: 8px; }
.db-tile.cpd-landed { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); transition: box-shadow .2s; }
/* the practice table's column groups */
.cpd-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cpd-group {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer;
}
.cpd-group[aria-pressed="true"] { background: var(--blue-light); border-color: var(--blue); color: var(--blue); font-weight: 600; }
.cpd-group:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cpd-table-wrap[hidden] { display: none; }
@media (max-width: 760px) {
  .cpd-lists { grid-template-columns: 1fr; }
  .cpd-finding-grid { grid-template-columns: 1fr; }
  .db-hbar-label.cpd-hbar-label { width: 110px; }
  /* the counts beside a bar go under it, or they push the page past the screen */
  .cpd-wrap .db-hbar-row { flex-wrap: wrap; row-gap: 2px; }
  .cpd-hbar-extra { flex-basis: 100%; min-width: 0; }
  .cpd-table-wrap th:first-child, .cpd-table-wrap td:first-child { min-width: 150px; }
}

/* ── A Care Manager's Workflows (24 Oct 2026) ───────────────────────────────────
   Workflows is a Care Manager's only screen (body.cm-mode, access_level 5), used on a
   tablet as often as at a desk: their lists as tabs, a search that filters as they
   type, work-queue chips, the legacy filter block behind a Filters button, and cards
   where the screen is touch or narrower than 1,100px. Every rule is scoped to
   body.cm-mode or to a class only their screen draws, so no other reader's screen
   moves. One hue (blue) marks what is chosen; the queue colours are the pills' own. */
.wf-my-tabs {
  display: flex; gap: 2px; padding: 0 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--border); background: var(--surface);
  overflow-x: auto; scrollbar-width: thin;
}
.wf-my-tabs[hidden] { display: none; }
.wf-my-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 12px;
  border: none; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.wf-my-tab i { color: var(--text-3); font-size: 13px; }
.wf-my-tab:hover { color: var(--text-1); }
.wf-my-tab[aria-selected="true"] { color: var(--blue-dark); border-bottom-color: var(--blue); font-weight: 600; }
.wf-my-tab[aria-selected="true"] i { color: var(--blue); }
.wf-my-tab:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: -3px; border-radius: 6px; }
.wf-my-tab-n {
  min-width: 24px; padding: 1px 8px; border-radius: 999px; text-align: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--bg2); color: var(--text-2);
}
.wf-my-tab[aria-selected="true"] .wf-my-tab-n { background: var(--blue-light); color: var(--blue-dark); }

.wf-my-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wf-my-search { position: relative; display: flex; align-items: center; flex: 1 1 300px; max-width: 620px; }
.wf-my-search i { position: absolute; left: 14px; color: var(--text-3); pointer-events: none; }
.wf-my-search .an-input { width: 100%; min-height: 44px; padding-left: 40px; font-size: 15px; border-radius: 10px; }
.wf-my-filters-btn, .wf-my-clear { min-height: 44px; padding-left: 14px; padding-right: 14px; }
.wf-my-filters-btn[aria-expanded="true"] { background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); }
.wf-my-badge {
  margin-left: 6px; min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center;
}
.wf-my-badge[hidden] { display: none; }
.wf-my-clear[hidden] { display: none; }
.wf-my-rest { display: flex; flex-direction: column; gap: 10px; }
.wf-my-filters[hidden] { display: none; }

.wf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-1); cursor: pointer;
}
.wf-chip:hover:not(:disabled) { border-color: var(--blue); }
.wf-chip:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }
.wf-chip-n { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.wf-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.wf-chip[aria-pressed="true"] .wf-chip-n { color: #fff; }
.wf-chip:disabled { color: var(--text-3); cursor: default; }
.wf-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-3); }
.wf-chip-dot-new { background: var(--blue); }
.wf-chip-dot-wip { background: #e0a43a; }
.wf-chip-dot-completed, .wf-chip-dot-active { background: var(--green); }
.wf-chip-dot-deceased { background: var(--red); }
.wf-chip[aria-pressed="true"] .wf-chip-dot { box-shadow: 0 0 0 2px #fff; }

.wf-my-sort { display: inline-flex; align-items: center; gap: 6px; }
.wf-my-sort .wf-filter .an-select { min-width: 0; width: auto; }
.wf-my-dir { min-width: 40px; justify-content: center; }
.wf-my-view { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.wf-my-view button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: none; background: var(--surface); font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer;
}
.wf-my-view button + button { border-left: 1px solid var(--border); }
.wf-my-view button[aria-pressed="true"] { background: var(--blue-light); color: var(--blue-dark); font-weight: 600; }
.wf-my-view button:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: -2px; }

/* The cards: two across where there is room, one on a tablet held upright. */
.wf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 14px; }
.wf-card-empty { margin: 0; padding: 28px 12px; text-align: center; color: var(--text-2); font-size: 14px;
  border: 1px dashed var(--border); border-radius: 12px; grid-column: 1 / -1; }
.wf-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 12px;
}
.wf-card[data-queue="new"] { border-left-color: var(--blue); }
.wf-card[data-queue="wip"] { border-left-color: #e0a43a; }
.wf-card[data-queue="completed"] { border-left-color: var(--green); }
.wf-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.wf-card-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-card-name {
  padding: 2px 0; border: none; background: none; font: inherit; font-size: 16.5px; font-weight: 600;
  color: var(--blue-dark); text-align: left; cursor: pointer; line-height: 1.3;
}
.wf-card-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.wf-card-name:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; border-radius: 4px; }
.wf-card-name-text { color: var(--text-1); cursor: default; }
.wf-card-name-text:hover { text-decoration: none; }
.wf-card-sub { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wf-card-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wf-card-pill { display: inline-flex; align-items: center; gap: 4px; }
.wf-card-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px 16px; margin: 0; }
.wf-card-fact { min-width: 0; }
.wf-card-fact-wide { grid-column: 1 / -1; }
.wf-card-fact dt { font-size: 11.5px; font-weight: 600; color: var(--text-2); margin-bottom: 1px; }
.wf-card-fact dd { margin: 0; font-size: 13.5px; color: var(--text-1); overflow-wrap: anywhere; line-height: 1.4; }
.wf-card-fact .wf-who, .wf-card-fact .wf-flags, .wf-card-fact .wf-team-practice { max-width: none; min-width: 0; }
.wf-card-comment { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 10px; background: var(--bg2); }
.wf-card-comment-label { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.wf-card-comment .wf-comment { max-width: none; min-width: 0; font-size: 13.5px; }
.wf-card-nocomment { margin: 0; font-size: 13px; color: var(--text-3); }
.wf-card-nocomment .wf-card-comment-label { color: var(--text-2); }
.wf-card-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 6px;
  border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--blue-dark); cursor: pointer;
}
.wf-card-more i { transition: transform .15s; font-size: 11px; }
.wf-card-more[aria-expanded="true"] i { transform: rotate(90deg); }
.wf-card-more:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; border-radius: 6px; }
.wf-card-details { margin-top: -6px; padding: 10px 12px; border-radius: 10px; background: var(--blue-light); }
.wf-card-details[hidden] { display: none; }
.wf-card-details .wf-dl { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* The buttons in even columns: a card's four or five buttons wrap into tidy rows. */
.wf-card-actions {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px;
  padding-top: 12px; margin-top: auto; border-top: 1px solid var(--border);
}
.wf-card-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-1); cursor: pointer;
}
.wf-card-act i { color: var(--blue); }
.wf-card-act:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-light); }
.wf-card-act:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }
.wf-card-act.is-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.wf-card-act.is-primary i { color: #fff; }
.wf-card-act.is-primary:hover:not(:disabled) { background: var(--blue-dark); border-color: var(--blue-dark); }
.wf-card-act-draft i { color: var(--red); }
.wf-card-act:disabled { background: var(--bg2); border-color: var(--border); color: var(--text-3); cursor: not-allowed; }
.wf-card-act:disabled i { color: var(--text-3); }

/* The table at a desk: a Care Manager's list holds every status, and "Deceased" with
   its date on one line widened the C3 list past a 1440px screen; the date goes under. */
body.cm-mode .wf-table td:has(> .wf-pill) { white-space: normal; }
/* ... and the newest comment and the conditions wrap a little sooner, so C3 fits a
   1366px laptop too. */
body.cm-mode .wf-table .wf-comment { min-width: 7em; }
body.cm-mode .wf-table .wf-lines { min-width: 7em; }

/* No patients assigned yet. */
.wf-my-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  max-width: 520px; margin: 48px auto; padding: 28px 24px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.wf-my-empty-icon { font-size: 30px; color: var(--blue); }
.wf-my-empty-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-1); }
.wf-my-empty-text { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* A finger, not a mouse pointer: every control a Care Manager touches is 44px high and
   every field 16px type (smaller type makes Safari zoom the page on focus). */
@media (pointer: coarse) {
  body.cm-mode #workflow-viewer .di-btn-ghost,
  body.cm-mode #workflow-viewer .dui-tool-btn,
  body.cm-mode #workflow-viewer .btn-primary { min-height: 44px; }
  body.cm-mode #workflow-viewer .an-select,
  body.cm-mode #workflow-viewer .an-input { min-height: 44px; font-size: 16px; }
  body.cm-mode .wf-my-view button { min-height: 44px; }
  body.cm-mode #workflow-viewer .cov-select-btn { min-height: 44px; }
  body.cm-mode .wf-act { width: 44px; height: 40px; font-size: 15px; }
  body.cm-mode .wf-actions { max-width: 150px; gap: 8px; }
  body.cm-mode .wf-expand { width: 32px; height: 32px; }
  body.cm-mode .wf-pager-nav .di-btn-ghost { min-width: 44px; min-height: 44px; }
  body.cm-mode .modal-box .an-select, body.cm-mode .modal-box .an-input,
  body.cm-mode .modal-box .wf-textarea { min-height: 44px; font-size: 16px; }
  body.cm-mode .modal-footer .btn-primary, body.cm-mode .modal-footer .btn-secondary,
  body.cm-mode .modal-footer .di-btn-ghost { min-height: 44px; padding-left: 18px; padding-right: 18px; }
  body.cm-mode .modal-close { min-width: 44px; min-height: 44px; }
  body.cm-mode .ps-tab { min-height: 46px; padding-left: 14px; padding-right: 14px; }
  body.cm-mode .wf-pt-link { min-height: 44px; }
}
/* The record's Outreach tab, upright: its two views go above the list, not beside it. */
@media (max-width: 900px) {
  body.cm-mode .wf-pt { flex-direction: column; gap: 10px; }
  body.cm-mode .wf-pt-nav {
    flex-direction: row; flex-wrap: wrap; min-width: 0; border-right: none;
    border-bottom: 1px solid var(--border); padding: 0 0 8px;
  }
  body.cm-mode .wf-pt-assessment { width: 100%; }
  body.cm-mode .wf-pt-assessment .an-select { min-width: 0; width: 100%; }
}