/* Staff density sheet (Referrals density build, 2026-09-09).
   Loaded after pure.css from base.html; every rule is scoped to body.staff,
   which base.html sets for an internal user who is not in office view. The
   office-facing pages (dashboard, new referral, patient page, login, the
   print covers) never carry the class and keep pure.css's spacing.
   Tokens and layouts come from the html.compact block of
   Referral-Portal_Density-Mockup_2026-09-09.html (BrentOS, pure-advisory).
   Brent, 2026-09-09: dense for every staff page, no per-user toggle.
   Brand holds: Montserrat, Pure Blue, Pure Black for attention (never
   red/amber), pills for actions only. This is a spacing and type scale,
   not a new look. Every new grid track is minmax(0, ...) (the 2026-09-07
   lesson: a 1fr track's min-content floor clips at 1512px). */

body.staff {
  --maxw: 2400px; --main-pad: 12px 20px 24px;
  --nav-h: 48px; --logo-w: 110px;
  --card-pad: 12px 14px; --card-r: 12px; --card-gap: 12px;
  --row-pad: 5px 8px; --row-gap: 10px; --row-h: 30px;
  --fs: 13px; --row-fs: 12.5px; --meta-fs: 12px; --th: 12px; --ctl-h: 30px;
  --h1: 18px; --h2: 13px; --stat-n: 18px;
  --hair: 1px solid var(--gray);
  font-size: var(--fs); line-height: 1.4;
}

/* ---- chrome: nav, main, footer ---- */
body.staff nav {
  height: var(--nav-h); padding: 0 20px; gap: 18px;
  box-shadow: none; border-bottom: var(--hair);
}
body.staff nav .logo img { width: var(--logo-w); }
/* Staff menus (nav cleanup, 2026-10-05): six groups from app/nav.py. The
   old flat row clipped its last links (overflow: hidden) on a laptop; six
   labels fit at any staff width. A group's panel opens on hover or keyboard
   focus; its label is itself a link to the group's first page.
   The stacking rule is for the top menu only (body > nav): a page's own
   <nav> (escalation queue buttons, tab rows) that caught it painted over the
   menu panels, being later in the page at the same z-index (2026-11-02). */
body.staff > nav { position: relative; z-index: 40; }
body.staff nav .menus { display: flex; align-self: stretch; gap: 2px; flex: 1; min-width: 0; }
body.staff nav .menu { position: relative; display: flex; align-items: center; }
body.staff nav .menu .top {
  display: flex; align-items: center; height: 100%; padding: 0 10px;
  color: var(--black); font-weight: 600; font-size: 12.5px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
body.staff nav .menu.active .top { color: var(--blue); border-bottom-color: var(--blue); }
/* Escalations waiting on you (2026-10-29): a count on the group label. Pure
   Black, the attention color. */
body.staff nav .menu .top .nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px;
  background: var(--black); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
body.staff nav .menu:hover .top, body.staff nav .menu:focus-within .top { color: var(--blue); }
body.staff nav .menu .panel {
  display: none; position: absolute; top: 100%; left: 0; min-width: 190px;
  background: #fff; border: var(--hair); border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 22px rgba(var(--blue-rgb), .14); padding: 6px 0;
}
body.staff nav .menu:hover .panel, body.staff nav .menu:focus-within .panel { display: block; }
body.staff nav .menu .panel a {
  display: block; padding: 6px 14px; font-size: 12.5px; font-weight: 400;
  color: var(--black); white-space: nowrap;
}
body.staff nav .menu .panel a:hover, body.staff nav .menu .panel a:focus { background: var(--bg); color: var(--blue); }
body.staff nav .menu .panel a.active { color: var(--blue); font-weight: 600; }

/* The current group's pages as a tab row under the nav. Phone width only
   since 2026-10-11 (Brent: "lose the extra sub menu ... takes up extra
   real estate"); on a laptop the menu's hover panel carries the siblings. */
body.staff .subnav {
  display: none; gap: 18px; padding: 0 20px 0 calc(20px + var(--logo-w) + 18px);
  height: var(--subnav-h); align-items: stretch; background: #fff; border-bottom: var(--hair);
  overflow-x: auto; scrollbar-width: none;
}
/* Page bar (2026-10-11): the strip under the nav where the sub-bar was. A
   page puts its title, its view tabs and a link or two here (base.html
   {% block pagebar %}), so a report's header is one 40px strip. The tabs
   scroll on their own; the bar itself doesn't clip, so the title's info
   popover can hang below it. */
body.staff .pagebar {
  position: relative; z-index: 30; display: flex; align-items: stretch; gap: 22px;
  min-height: 40px; padding: 0 20px; background: #fff; border-bottom: var(--hair);
}
body.staff .pagebar h1 {
  display: block; align-self: center; margin: 0 !important; white-space: nowrap;
  font-size: var(--h1) !important; font-weight: 600;
}
body.staff .pagebar h1 .page-info { margin-left: 6px; vertical-align: middle; }
body.staff .pagebar h1 .page-info .info-btn { width: 20px; height: 20px; }
body.staff .pagebar h1 .page-info .info-btn .ico { width: 16px; height: 16px; }
body.staff .pagebar .tabs {
  display: flex; gap: 6px; align-items: center; align-self: center; min-width: 0; padding: 0 1px;
  overflow-x: auto; scrollbar-width: none;
}
body.staff .pagebar .links {
  display: flex; align-items: center; gap: 14px; margin-left: auto;
  font-size: 12px; white-space: nowrap;
}
body.staff .pagebar .links form { display: flex; align-items: center; gap: 6px; margin: 0; }
body.staff .pagebar .links input[type=search] { width: 240px; height: 28px; padding: 0 10px; font-size: 12.5px; }
body.staff .subnav a {
  display: flex; align-items: center; font-size: 12px; color: var(--gray-mid);
  white-space: nowrap; border-bottom: 2px solid transparent;
}
body.staff .subnav a:hover { color: var(--black); }
body.staff .subnav a.active { color: var(--black); font-weight: 600; border-bottom-color: var(--blue); }
/* Phone width: the six menus drop to their own scrolling row under the logo
   and the name; tapping a menu opens its first page and the tab row below
   carries the rest, so the hover panels stay off (a panel inside a
   scrolling row would clip, and touch has no hover). --nav-h follows so
   inbox-v2's full-height layout still fits. */
@media (max-width: 760px) {
  body.staff { --nav-h: 82px; }
  body.staff nav { flex-wrap: wrap; height: auto; min-height: var(--nav-h); padding: 6px 12px 0; gap: 4px 12px; }
  body.staff nav .who { margin-left: auto; font-size: 12px; }
  body.staff nav .menus {
    order: 3; flex: 0 0 100%; height: 36px; overflow-x: auto; scrollbar-width: none;
  }
  body.staff nav .menu .top { padding: 0 8px; }
  body.staff nav .menu .panel { display: none !important; }
  body.staff:has(> .subnav) { --subnav-h: 34px; }  /* inbox-v2's full-height layout subtracts it */
  body.staff .subnav { display: flex; padding-left: 12px; gap: 14px; }
  body.staff .pagebar { flex-wrap: wrap; gap: 0 14px; padding: 0 12px; }
  body.staff .pagebar h1 { line-height: 36px; }
  body.staff .pagebar .tabs { order: 3; flex: 0 0 100%; height: 34px; }
  body.staff .pagebar .links { margin-left: 0; }
}
body.staff nav .who { white-space: nowrap; }
body.staff nav .who b { display: inline; margin-right: 6px; }

body.staff main, body.staff main.wide { max-width: var(--maxw); padding: var(--main-pad); }

body.staff footer {
  margin-top: 24px; padding: 8px 20px;
  display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 14px;
}
body.staff footer img { width: 90px; }
body.staff footer .close { font-size: 12px; margin: 0; color: rgba(255,255,255,.7); }
body.staff footer .fine { margin: 0; }
body.staff footer .fine:empty { display: none; }

/* ---- page band: eyebrow, h1, sub on one line ----
   Existing templates render the three as block siblings; inline-block puts
   them on one 44px line without a template change. Pages that adopt the
   explicit .band wrapper (Phase B) get the flex version below, with the
   KPI tiles at the right end. !important is deliberate: several templates
   carry inline font-size/margin on h1 and .sub that the density scale has
   to win over. */
body.staff .eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: .08em;
  margin: 0 12px 0 0; vertical-align: baseline;
}
body.staff h1 {
  display: inline-block; font-size: var(--h1) !important; font-weight: 600;
  line-height: 1.15; margin: 0 12px 0 0 !important; vertical-align: baseline;
}
body.staff .sub {
  display: inline; font-size: 12.5px; margin: 0 !important; vertical-align: baseline;
}
body.staff .band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  min-height: 44px; margin-bottom: 10px;
}
body.staff .band .eyebrow, body.staff .band h1, body.staff .band .sub { display: block; margin: 0 !important; }
body.staff .band .kpis { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
body.staff .band .actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
body.staff .band .kpis + .actions { margin-left: 0; }

/* ---- stat tiles: 40px, inline ---- */
body.staff .stat {
  display: flex; align-items: center; gap: 8px; min-width: 120px; min-height: 40px;
  padding: 6px 12px; border-radius: 10px;
}
body.staff .stat .n { font-size: var(--stat-n); font-weight: 600; line-height: 1.1; }
body.staff .stat .l { font-size: 12px; letter-spacing: .04em; line-height: 1.15; }
body.staff .stat .m { font-size: 12px; margin: 0; }
body.staff .tiles-4 { gap: 10px; margin-bottom: 12px !important; }

/* ---- cards ---- */
body.staff .card {
  border-radius: var(--card-r); padding: var(--card-pad);
  box-shadow: none; border: var(--hair); margin-bottom: var(--card-gap); min-width: 0;
}
body.staff .card.attention { border: 2px solid var(--black); }
body.staff .card.dark { border-color: var(--black); }
body.staff .card.light, body.staff .card.callout { border-color: var(--light); }
body.staff h2 { font-size: var(--h2); margin: 0 0 6px; letter-spacing: .02em; }
body.staff h3 { font-size: 12.5px; }
body.staff .meta { font-size: var(--meta-fs); color: var(--gray-text); }
body.staff .name { font-size: 12.5px; }
body.staff .flash { padding: 8px 12px; margin-bottom: 10px; font-size: 12.5px; border-radius: 10px; }
body.staff .gapnote { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
body.staff .push-bar { padding: 6px 14px; font-size: 12px; margin-bottom: 10px; }
body.staff .callout { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
body.staff .lane { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
body.staff .lane .c { font-size: 12px; }

/* ---- STANDARD COMPONENTS (UI consistency pass, 2026-10-12) ----
   Brent: "make all the pages match ... Use the Referrals page as the
   standard ... We need a clean UI pass so this doesn't look like 12
   different tools." Everything below is lifted from /referrals and applies to
   every staff page, so a page does not restyle tables, pills, pickers,
   buttons or tab strips of its own (the page-local <style> blocks that did
   are gone; tests/test_ui_consistency.py keeps them out). One type scale:
   nothing under 12px, secondary text no lighter than --gray-text.
     tag     .chip .badge .ch   12px, 2px 8px, pill        (labels, filters)
     control select, inputs, .pick, .tab, .btn  30px tall   (things you use)
     button  .btn (+ .secondary .dark .ghost); .small/.sm/.pill are aliases
     tab     .tabrow .tab / .pagebar .tabs a   (one strip, black = current)
     table   a plain <table>: bold 12px heads, 3px 8px cells, striped
     bar     .filterbar (RF.bar, .rf-filters and every page's own filters)
     pager   .pager (text and plain links, never a row of chips) */
body.staff .chip, body.staff .badge, body.staff .ch {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600;
  line-height: 1.2; letter-spacing: 0; text-transform: none; border-radius: 999px; vertical-align: middle;
}
body.staff .chip { color: var(--gray-text); }
body.staff .chip.active { color: #fff; }
body.staff .chip.black, body.staff .badge.black, body.staff .ch.black { color: #fff; }
body.staff .chip.blue, body.staff .ch.blue { color: var(--deep); }
body.staff .chip.white { color: var(--black); }
body.staff .chip.gray, body.staff .ch, body.staff .badge.gray { color: var(--gray-text); }
body.staff .chip.gray, body.staff .chip.active, body.staff .chip.white { box-sizing: border-box; }
body.staff a.chip:hover { border-color: var(--blue); }
body.staff .chips { gap: 6px; margin: 8px 0; }
body.staff .chip .n, body.staff .tab .n { font-weight: 600; }
body.staff .asof { padding: 3px 9px; font-size: 12px; }
body.staff .ico { width: 14px; height: 14px; }

/* Buttons: one size (30px) and one weight. .small, .sm and .pill are the
   same button under older names. */
body.staff .btn, body.staff .pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ctl-h);
  padding: 0 16px; font-size: 12.5px; font-weight: 600; line-height: 1.2; letter-spacing: 0;
  border-radius: 999px; box-shadow: none; white-space: nowrap; text-decoration: none; cursor: pointer;
}
body.staff .btn.small, body.staff .btn.sm, body.staff .pill.sm { padding: 0 14px; font-size: 12.5px; }
body.staff .btn.secondary { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
body.staff .btn.ghost, body.staff .pill.ghost { background: #fff; color: var(--black); border: 1px solid var(--gray); }
body.staff .btn.dark, body.staff .pill.dark { background: var(--black); color: #fff; border: 1px solid var(--black); }
body.staff .btn.primary, body.staff .pill.primary { background: var(--blue); color: #fff; border: 1px solid var(--blue); }
body.staff .btn:hover { box-shadow: none; transform: none; }
body.staff .btn.ghost:hover, body.staff .pill.ghost:hover, body.staff .btn.secondary:hover { border-color: var(--blue); }

/* Tab strip: /referrals' saved-view pills. The page bar's tabs
   (base.html {% block pagebar %}) are the same strip. */
body.staff .tabrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
body.staff .tabrow .tab, body.staff .pagebar .tabs a {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--ctl-h); padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--gray); background: #fff; color: var(--black); font-size: 12.5px; font-weight: 400;
  text-decoration: none; white-space: nowrap; cursor: pointer; font-family: inherit;
}
body.staff .tabrow .tab .n { color: var(--gray-text); }
body.staff .tabrow .tab:hover, body.staff .pagebar .tabs a:hover { border-color: var(--blue); color: var(--black); }
body.staff .tabrow .tab.active, body.staff .pagebar .tabs a.active { background: var(--black); border-color: var(--black); color: #fff; font-weight: 400; }
body.staff .tabrow .tab.active .n { color: #fff; }
body.staff .pagebar .tabs a .n { font-weight: 600; color: var(--gray-text); }
body.staff .pagebar .tabs a.active .n { color: #fff; }

/* Tab cards: the same strip when each tab has a line of explanation or a
   count under its name (Referral volume's units, the task cleanup counts). */
body.staff .tabcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 0 0 12px; }
body.staff .tabcard {
  display: block; border: 1px solid var(--gray); border-radius: 10px; padding: 6px 12px; background: #fff;
  color: var(--black); text-decoration: none; font-weight: 400;
}
body.staff .tabcard b { display: block; font-size: 12.5px; font-weight: 600; }
body.staff .tabcard span { display: block; font-size: 12px; color: var(--gray-text); line-height: 1.35; margin-top: 2px; }
body.staff .tabcard:hover { border-color: var(--blue); }
body.staff .tabcard.active { background: var(--black); border-color: var(--black); color: #fff; }
body.staff .tabcard.active span { color: #fff; }

/* Pager (the Referrals footer line). */
body.staff .pager { padding: 8px 12px; color: var(--gray-text); font-size: var(--meta-fs); }
body.staff .pager a { margin-left: 8px; }

/* Picker that opens a panel (Scope, More filters) and the panel itself. */
body.staff .pick {
  display: inline-flex; align-items: center; min-height: var(--ctl-h); padding: 0 12px; border: 1px solid var(--gray);
  border-radius: 999px; font-size: 12.5px; background: #fff; color: var(--black); cursor: pointer; list-style: none; white-space: nowrap;
}
body.staff .pick::-webkit-details-marker { display: none; }
body.staff .pick.ghost { color: var(--gray-text); }

/* Filter bar: one row of pickers, then Apply. Labelled fields (RF.bar, the
   report filters) sit label-over-control and align on the control. */
body.staff .filterbar, body.staff .report-filters {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 10px;
}
body.staff .report-filters, body.staff .filterbar:has(.rf-field) { align-items: flex-end; }
body.staff .rf-field { display: block; margin: 0; }
body.staff .rf-label {
  display: block; margin: 0 0 3px; font-size: 12px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--gray-text);
}
body.staff .filterbar .rf-note, body.staff .filterbar .rf-clear, body.staff .report-filters .rf-note, body.staff .report-filters .rf-clear {
  font-size: 12px; color: var(--gray-text); align-self: center; padding: 0;
}
body.staff .filterbar select, body.staff .filterbar input[type=search], body.staff .filterbar input[type=text],
body.staff .filterbar input[type=date], body.staff .filterbar input[type=number],
body.staff .report-filters select, body.staff .report-filters input[type=date], body.staff .report-filters input[type=search] {
  width: auto; max-width: 260px;
}

/* ---- rows: 30px+, secondary cells one line with ellipsis ----
   UI review 2026-10-09 (cross-cutting pattern 1): the original rule put
   nowrap+ellipsis on every cell, including the identifying one (patient
   name, lens/list name) — at 1280-1440px that cut names, days and list
   names on My referrals, Intake desk, Dropped balls, Auth desk, Call team.
   The full text stays in the DOM (and in `title` where the template sets
   one) either way. Now: secondary cells keep one line + ellipsis; `.name`
   cells (the identifying column) wrap onto up to two lines instead; a
   `.stack` cell (name + meta) stacks vertically — its own class name,
   finally true — so the meta line gets the cell's full width rather than
   splitting it with the name horizontally. */
body.staff .row {
  gap: var(--row-gap); padding: var(--row-pad); min-height: var(--row-h); font-size: var(--row-fs);
}
body.staff .row > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.staff .row > .stack {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-width: 0; white-space: normal;
}
body.staff .row > .stack > .meta {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* The identifying cell: two lines, wrap instead of ellipsis, with a floor
   width so a crowded row gives up a `.drop-1600` column before squeezing
   this one. Applies whether `.name` sits directly in a `.row` (Auth desk)
   or as a `.stack`'s first line (My referrals, Dropped balls, Intake desk,
   Call team). */
body.staff .row .name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.25; min-width: 120px;
}
/* The days-in-stage / days-vs-typical column: its own fixed, right-aligned
   slot so it never shares a cell (and an ellipsis) with the stage text
   again (Intake desk finding 2, review 2026-10-09). */
body.staff .row .days-col {
  flex: none; min-width: 56px; text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
body.staff .row .tracker { flex: none; }
body.staff .row.head {
  padding: 4px 8px; min-height: 0;
  position: sticky; top: 0; background: #fff; z-index: 2;
}
body.staff .row.head span { font-size: var(--th); letter-spacing: .1em; }
body.staff .row:hover:not(.head) { background: #FBFDFF; }
body.staff summary.row { list-style: none; }

/* Secondary columns that give way before the identifying/days columns do
   (review 2026-10-09, cross-cutting pattern 1: "drop secondary columns
   under 1600px rather than 1800"). Opt in per-column with class="drop-1600"
   on both the header cell and the row cell. */
@media (max-width: 1599px) {
  body.staff .row .drop-1600 { display: none; }
  /* Dropped balls' ranked list (dropped.html): dropping the 8-week spark
     column's cell still needs its grid track reclaimed, since the inline
     style sets explicit column widths. */
  body.staff .row.dropped-lens-row {
    grid-template-columns: 34px minmax(170px,1.3fr) 110px 150px minmax(0,1.2fr) 90px !important;
  }
}

/* ---- tables ----
   The Referrals table is the standard for every table: bold one-line heads,
   3px 8px cells, striped rows, light-blue hover. A page does not restyle it;
   it adds only .num (right-aligned numbers), table-layout and widths.
   .matrix is for heat grids whose cells carry their own fill: no stripes. */
body.staff table { font-size: var(--row-fs); line-height: 1.3; }
body.staff th {
  font-size: var(--th); font-weight: 600; color: var(--black); text-transform: none; letter-spacing: 0;
  text-align: left; padding: 3px 8px; white-space: nowrap; line-height: 1.3;
  position: sticky; top: 0; background: #fff; z-index: 2; border-bottom: 1px solid var(--gray);
}
body.staff th a { color: inherit; text-decoration: none; }
body.staff th.sorted a::after { content: " \2195"; color: var(--gray-text); }
body.staff th.sorted:not(:has(a))::after { content: " \2191"; }
body.staff th.sorted.desc:not(:has(a))::after { content: " \2193"; }
body.staff td { padding: 3px 8px; vertical-align: middle; }
body.staff td .meta { font-size: var(--meta-fs); line-height: 1.25; }
body.staff table th.num, body.staff table td.num { text-align: right; font-variant-numeric: tabular-nums; }
body.staff table th.r, body.staff table td.r { text-align: right; font-variant-numeric: tabular-nums; }
body.staff table:not(.matrix) tbody tr:nth-child(even) td { background: #F6F7F9; }
/* A table whose head row sits in the body (no <thead>): stripe from the
   first data row so it matches the ones that have one. */
body.staff table:not(.matrix) tbody:where(:has(> tr:first-child > th)) tr:nth-child(even) td { background: none; }
body.staff table:not(.matrix) tbody:where(:has(> tr:first-child > th)) tr:nth-child(odd) td { background: #F6F7F9; }
body.staff table:not(.matrix) tbody tr:hover td { background: var(--light); }
body.staff td.note-cell, body.staff td.issues-cell, body.staff td.reason-cell { max-width: 360px; white-space: normal; }
body.staff td details > summary { cursor: pointer; color: var(--gray-text); font-size: 12px; }
/* A row of stat tiles, and a row of checkboxes inside a filter bar. */
body.staff .statrow { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
body.staff .checks { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 12px; }
body.staff .checks label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; }
/* Words that mark the row that needs a look: Pure Black, semibold. */
body.staff .over, body.staff .nobody, body.staff .overdue, body.staff .typo-flag { font-weight: 600; color: var(--black); }
body.staff code { font-size: 12px; color: var(--gray-text); word-break: break-all; }
body.staff .tablewrap { overflow-x: auto; }
body.staff tr.total td { font-weight: 600; border-top: 2px solid var(--gray); }
body.staff tfoot td { font-weight: 600; border-top: 1px solid var(--gray); background: #fff; }

/* ---- sortable heads (app/static/sort.js) ---- */
body.staff [data-sort] { cursor: pointer; user-select: none; }
body.staff [data-sort]:hover { color: var(--black); }
body.staff [data-sort].sort-asc, body.staff [data-sort].sort-desc { color: var(--deep); }
body.staff [data-sort].sort-asc::after { content: " \2191"; font-size: 12px; }
body.staff [data-sort].sort-desc::after { content: " \2193"; font-size: 12px; }

/* ---- forms ---- */
body.staff label { font-size: 12px; margin: 8px 0 4px; }
body.staff .filterbar label, body.staff .report-filters label { margin: 0; }
body.staff .filterbar > label:not(.rf-field) { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 12.5px; }
body.staff input:not([type]), body.staff input[type=text], body.staff input[type=date],
body.staff input[type=tel], body.staff input[type=email], body.staff input[type=search],
body.staff input[type=number], body.staff select, body.staff textarea {
  padding: 6px 10px; border-radius: 8px; font-size: 12.5px;
}
body.staff input[type=search] { border: 1px solid var(--gray); background: #fff; font-family: inherit; box-sizing: border-box; }
/* Pickers: one height wherever they sit (the Referrals filter bar's). */
body.staff select, body.staff input:not([type]), body.staff input[type=text], body.staff input[type=date],
body.staff input[type=search], body.staff input[type=number], body.staff input[type=email], body.staff input[type=tel] {
  height: var(--ctl-h); padding-top: 0; padding-bottom: 0;
}
body.staff .field { gap: 4px; }
body.staff .field label { font-size: 12px; }
body.staff .field .in, body.staff .field input, body.staff .field select { height: 32px; border-radius: 8px; padding: 0 10px; font-size: 12.5px; }
body.staff .field textarea { border-radius: 8px; font-size: 12.5px; }
body.staff .field .in.ta { min-height: 52px; padding: 6px 10px; }
body.staff .inline-form { gap: 6px; margin-top: 6px; }
body.staff .up { padding: 8px 10px; font-size: 12px; border-radius: 10px; }

/* ---- detail components ---- */
body.staff .kv { grid-template-columns: 90px 1fr; gap: 2px 10px; font-size: 12px; }
body.staff .check { padding: 4px 0; font-size: 12px; gap: 8px; }
body.staff .check .box { width: 16px; height: 16px; border-radius: 5px; }
body.staff .check-item { padding: 5px 0; gap: 8px; }
body.staff .tl { grid-template-columns: 64px 1fr; gap: 1px 10px; font-size: 12px; }
body.staff .journey li { padding: 4px 0; gap: 10px; }
body.staff .msg { margin-bottom: 8px; }
body.staff .msg .bubble { padding: 6px 10px; border-radius: 10px; font-size: 12.5px; }
body.staff .heat { height: 26px; padding: 0 8px; border-radius: 6px; font-size: 12.5px; }
body.staff .meter { height: 6px; }
body.staff .meter b { top: -2px; height: 10px; }
body.staff .hbar { height: 6px; }
body.staff .avatar { width: 26px; height: 26px; font-size: 12px; }

/* ---- existing grids: tighter gaps, zero-minimum tracks ---- */
body.staff .grid2 { gap: 0 12px; }
body.staff .grid3 { gap: 12px; }
body.staff .two-col-desk { grid-template-columns: 220px minmax(0, 1fr); gap: 12px; }
body.staff .three-col-work { gap: 12px; }
body.staff .two-col-office { gap: 12px; }

/* ---- shared layouts from the mockup (Phase B pages adopt these) ---- */
body.staff .desk-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--card-gap); }
body.staff .strip-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); }
body.staff .mgr-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--card-gap); }
body.staff .work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--card-gap); align-items: start; }
body.staff .side-320 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--card-gap); }

@media (max-width: 1799px) {
  body.staff .desk-top, body.staff .mgr-grid { grid-template-columns: minmax(0, 1fr); }
  body.staff .work { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  body.staff .strip-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.staff .work, body.staff .side-320 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Phase B: auth desk, my referrals, dropped balls (2026-09-09) ---- */
body.staff .next { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
body.staff .next b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staff .next .chip { flex: none; }
body.staff .mine-grid { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--card-gap); align-items: start; }
body.staff .row .wrapch { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
body.staff .row .wrapch .ch { white-space: nowrap; flex: none; }
body.staff .row .wrapch .meta { white-space: nowrap; }
/* My referrals review fix (2026-10-09): the side rail (lanes + week-vs-pod
   card) was only dropping below the list under 1100px, so it kept
   squeezing the list's own columns at 1280-1440px. 1600px matches the
   rest of this pass's "drop secondary columns under 1600px" rule. */
@media (max-width: 1599px) {
  body.staff .mine-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Phase B: patient workspace (2026-09-09) ---- */
body.staff .ws-band { min-height: 0; }
body.staff .ws-band h1 { font-size: var(--h1) !important; }
body.staff .ws-band .actions { margin-left: auto; padding-top: 0 !important; gap: 6px !important; }
body.staff .ws-actions .panel { padding: 8px; border-radius: 10px; }
/* The Pullthrough tab (tracker, activity, rail) is styled in patient_chart.css (.pt-*). */

/* Report pages (app/reports.py, 2026-10-05): the shared header. Each
   report's own styles live in static/reports/<slug>.css. */
body.staff .report-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
body.staff .report-head h1 { font-size: var(--h1); margin: 0; }
body.staff .report-head .meta { color: var(--gray-mid); font-size: var(--meta-fs); }

/* ---- global search (2026-10-09, app/search.py) ----
   One box in the top bar on every staff page; "/" focuses it. The dropdown
   groups hits by type, chips show any typed filters, Enter opens the full
   results page. Attention stays Pure Black, never red or amber. */
body.staff nav .gsearch { position: relative; flex: 0 1 300px; min-width: 160px; }
body.staff nav .gsearch input {
  width: 100%; height: 30px; padding: 0 12px; border: var(--hair); border-radius: 999px;
  background: var(--bg); font: inherit; font-size: 12.5px; color: var(--black);
}
body.staff nav .gsearch input:focus { outline: none; border-color: var(--blue); background: #fff; }
/* Inbox v3 (2026-10-10): the top search scoped to /inbox -- a visible "In
   Inbox" badge plus a real "Everywhere" link to the unscoped global
   search page (app/templates/base.html). */
body.staff nav .gsearch.inbox-scoped { display: flex; align-items: center; gap: 6px; flex: 0 1 380px; }
body.staff nav .gsearch.inbox-scoped input { flex: 1; min-width: 100px; }
body.staff nav .gsearch .scope {
  font-size: 12px; font-weight: 600; background: #fff; border: var(--hair); border-radius: 999px;
  padding: 2px 9px; color: var(--gray-mid); white-space: nowrap;
}
body.staff nav .gsearch .scope-everywhere { font-size: 12px; color: var(--gray-mid); white-space: nowrap; }
body.staff nav .gsearch .scope-everywhere:hover { color: var(--black); }
body.staff nav .gsearch-list {
  position: absolute; top: calc(100% + 6px); right: 0; width: min(480px, 92vw); max-height: 70vh;
  overflow-y: auto; background: #fff; border: var(--hair); border-radius: 10px;
  box-shadow: 0 8px 22px rgba(var(--blue-rgb), .16); padding: 6px 0; z-index: 50;
}
.gsearch-list .gs-chips, .search-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gsearch-list .gs-chips { padding: 6px 12px 8px; border-bottom: var(--hair); }
.gs-chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--light);
  color: var(--black); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.gsearch-list .gs-open { font-size: 12px; font-weight: 600; margin-left: auto; }
.gsearch-list .gs-group {
  padding: 8px 12px 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gray-mid);
}
.gsearch-list a.gs-item { display: block; padding: 5px 12px; color: var(--black); }
.gsearch-list a.gs-item .l { font-size: 12.5px; font-weight: 600; }
.gsearch-list a.gs-item .s { display: block; font-size: 12px; color: var(--gray-mid); }
.gsearch-list a.gs-item:hover, .gsearch-list a.gs-item.on { background: var(--bg); }
.gsearch-list a.gs-item.on .l { color: var(--blue); }
.gsearch-list .gs-more, .gsearch-list .gs-empty { padding: 4px 12px; font-size: 12px; color: var(--gray-mid); }
.gsearch-list .gs-foot { padding: 6px 12px 2px; border-top: var(--hair); margin-top: 4px; font-size: 12px; color: var(--gray-mid); }
@media (max-width: 760px) {
  body.staff nav .gsearch { order: 2; flex: 1 1 140px; }
}

/* ---- Market share (/sales/market-share, 2026-10-13, Brent's approved
   mockup). One bar component: Pure Blue on a light track; .open is Pure
   Black, the work. A head's second line is <small>. Under 760px a
   table.stack becomes stacked rows, label left, value right. ---- */
body.staff th small { display: block; font-size: 12px; font-weight: 400; color: var(--gray-text); }
body.staff .bar { display: flex; align-items: center; gap: 8px; min-width: 150px; }
body.staff .bar .t { flex: 1; height: 8px; min-width: 60px; background: #EEF5FC; border-radius: 999px; overflow: hidden; }
body.staff .bar .t i { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
body.staff .bar.open .t i { background: var(--black); }
body.staff .bar .v { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.staff .na { color: var(--gray-text); }
body.staff .m-only { display: none; }
body.staff .rank {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 12px; font-weight: 700; background: var(--gray); color: var(--gray-text);
}
body.staff .rank.call { background: var(--black); color: #fff; }
/* Market share layout (2026-10-13, Brent: use the screen). Top: filters and
   the two data stamps share one row. Then the one-sentence answer, then two
   panes: the drug table (the picker, ~40%) beside the physician list (~60%).
   Under 1360px the panes stack; at phone width the tables stack to rows. */
body.staff .ms-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; margin: 0 0 8px; }
body.staff .ms-top .report-filters { margin: 0; }
body.staff .ms-stamps { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 0 auto; align-items: center; }
body.staff .ms-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); align-items: start; }
body.staff .ms-grid > .card { margin: 0; min-width: 0; }
@media (min-width: 1360px) {
  body.staff .ms-grid { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
  /* The drug table stays in view while the physician list scrolls. */
  body.staff .ms-left { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; }
  body.staff .ms-notes { columns: 2; column-gap: 28px; }
  body.staff .ms-notes p { break-inside: avoid; }
}
body.staff .ms-stamps .asof.ms-old { background: var(--black); color: #fff; }
body.staff .ms-sec h2 { font-size: 15px; letter-spacing: 0; margin: 0 0 6px; }
body.staff table.ms-drugs, body.staff table.ms-phys { width: 100%; }
body.staff .ms-q { font-weight: 400; color: var(--gray-text); font-size: 12.5px; }
body.staff .ms-answer { font-size: 14px; font-weight: 400; margin: 0 0 10px; line-height: 1.4; }
body.staff .ms-answer b { font-weight: 600; }
body.staff .ms-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 6px; font-size: 12px; color: var(--gray-text); }
body.staff .ms-sw { display: inline-block; width: 18px; height: 8px; border-radius: 999px; margin-right: 4px; background: var(--blue); }
body.staff .ms-sw.open { background: var(--black); }
body.staff .ms-drugs tbody tr, body.staff .ms-phys tbody tr { cursor: pointer; }
body.staff .ms-drugs tbody tr.sel td { background: var(--light); }
body.staff .ms-drugs tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
body.staff .ms-drug { font-weight: 600; color: var(--black); }
body.staff .ms-who {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--black); cursor: pointer; text-align: left;
}
body.staff .ms-who:hover { color: var(--deep); text-decoration: underline; }
body.staff .ms-writes { display: flex; flex-wrap: wrap; gap: 3px; }
body.staff .ms-writes .chip { padding: 1px 7px; }
body.staff .ms-tabs { margin: 0 0 8px; align-items: center; }
body.staff .ms-tabsep { width: 1px; height: 18px; background: var(--gray); margin: 0 4px; }
body.staff .ms-sec .ms-legend { margin: 0 0 4px; }
body.staff .ms-more { margin: 6px 0 0; }
/* Tables: fixed columns on a screen, so long names end in an ellipsis (full
   text in the title tooltip) and numbers stay right-aligned. Phone width
   goes back to stacked rows below. */
body.staff .ms-trunc { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staff .ms-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
body.staff .ms-line .ms-panel { min-width: 0; }
body.staff .ms-line .chip { flex: none; }
body.staff .ms-who { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.staff .ms-wh { display: block; min-width: 0; }
body.staff .ms-drugs th, body.staff .ms-phys th { white-space: normal; vertical-align: bottom; }
body.staff .ms-drugs th, body.staff .ms-phys th { padding-left: 6px; padding-right: 6px; }
body.staff .ms-drugs td, body.staff .ms-phys td { padding-left: 6px; padding-right: 6px; }
@media (min-width: 761px) {
  /* pure.css's .stack is display:flex; undo it for a real table so the head and body share columns. */
  body.staff table.ms-drugs, body.staff table.ms-phys { display: table; flex-direction: initial; gap: 0; table-layout: fixed; }
  body.staff .ms-drugs td, body.staff .ms-phys td { overflow: hidden; }
  body.staff .ms-drugs .bar, body.staff .ms-phys .bar { min-width: 0; gap: 6px; }
  body.staff .ms-drugs .bar .t, body.staff .ms-phys .bar .t { min-width: 24px; }
  body.staff .ms-drugs .bar .v, body.staff .ms-phys .bar .v { min-width: 0; flex: none; }
  body.staff .ms-drugs td { white-space: nowrap; }
  body.staff .ms-drugs col.c-drug { width: 26%; } body.staff .ms-drugs col.c-mkt { width: 9%; }
  body.staff .ms-drugs col.c-share { width: 17%; } body.staff .ms-drugs col.c-wr { width: 13%; }
  body.staff .ms-drugs col.c-reach { width: 16%; } body.staff .ms-drugs col.c-open { width: 19%; }
  body.staff .ms-phys col.c-rank { width: 36px; } body.staff .ms-phys col.c-who { width: 21%; }
  body.staff .ms-phys col.c-where { width: 14%; } body.staff .ms-phys col.c-writes { width: 30%; }
  body.staff .ms-phys col.c-claims { width: 8%; } body.staff .ms-phys col.c-new { width: 10%; }
  body.staff .ms-phys col.c-open { width: 12%; }
}
body.staff .ms-more { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 0; }
body.staff .ms-quiet { margin: 8px 0 0; font-size: 12px; color: var(--gray-text); }
body.staff .ms-quiet summary { cursor: pointer; }
body.staff .ms-quiet p { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
body.staff .ms-hint { align-self: center; }
body.staff .ms-notes { font-size: 12px; color: var(--gray-text); margin: 10px 0 0; }
body.staff .ms-notes p { margin: 0 0 6px; }
body.staff .ms-notes b { color: var(--black); font-weight: 600; }
#info-modal .ms-facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 10px; margin: 6px 0 12px; font-size: 12.5px; }
#info-modal .ms-facts dt { color: var(--gray-text); }
#info-modal .ms-facts dd { margin: 0; }
#info-modal .ms-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
#info-modal .ms-rx { width: 100%; margin: 0 0 8px; }
@media (max-width: 760px) {
  body.staff table.stack thead { display: none; }
  body.staff table.stack, body.staff table.stack tbody, body.staff table.stack tr, body.staff table.stack td { display: block; width: 100%; }
  body.staff table.stack tr { padding: 8px 2px; border-bottom: 1px solid var(--gray); }
  body.staff table.stack tbody tr:nth-child(even) td { background: transparent; }
  body.staff table.stack tbody tr:nth-child(even) { background: #F6F7F9; }
  body.staff table.stack td { border: 0; padding: 2px 6px; }
  body.staff table.stack td[data-l] { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
  body.staff table.stack td[data-l]::before { content: attr(data-l); color: var(--gray-text); font-size: 12px; flex: none; }
  body.staff table.stack td.hide-m { display: none; }
  body.staff table.stack td.num { text-align: right; }
  body.staff table.stack .bar { min-width: 0; flex: 1; max-width: 230px; }
  body.staff table.stack .bar .v { min-width: 0; }
  body.staff table.stack .m-only { display: inline; color: var(--gray-text); }
  body.staff .ms-writes { justify-content: flex-end; }
  body.staff .ms-tabsep { display: none; }
  body.staff .ms-top { align-items: stretch; }
  body.staff .ms-stamps { margin-left: 0; }
  #info-modal .ms-facts { grid-template-columns: 100px minmax(0, 1fr); }
}