/* Pure Infusion brand system, pure-infusion-design skill.
   Pure Blue #4BAEF0 · Light Blue #DCEEFB · Pure Black #201D1D ·
   Cool Grays #E7E7E7 / #808285 · white canvas · Montserrat 300/400/600.
   Pill buttons, 20px card radius, soft blue shadows, gentle ease-out,
   attention color = Pure Black (never red/amber). */
:root {
  --blue: #4BAEF0; --light: #DCEEFB; --white: #fff; --black: #201D1D;
  --gray: #E7E7E7; --gray-mid: #808285; --gray-text: #5B5E66; --bg: #F7FAFD;
  --deep: #1D6FA8;
  /* --blue's own channels, for an alpha-stepped single-hue bar (a stacked
     reasons bar needs several opacities of the one approved hue, which a
     var()-held hex color cannot express on its own without a literal in the
     template; see app/routes/dropped.py::_reasons_segments). */
  --blue-rgb: 75, 174, 240;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: 'Montserrat', -apple-system, sans-serif;
  background: var(--bg); color: var(--black);
  font-size: 15px; line-height: 1.55; font-weight: 400;
}
a { color: var(--blue); text-decoration: none; }

.demo-banner {
  background: var(--black); color: #fff; text-align: center;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 16px; font-weight: 600;
}
nav {
  background: #fff; display: flex; align-items: center; gap: 26px;
  padding: 14px 32px; box-shadow: 0 2px 14px rgba(75,174,240,.10);
}
nav .logo img { width: 150px; height: auto; display: block; }
nav .links { display: flex; gap: 20px; flex: 1; }
nav .links a { color: var(--black); font-weight: 600; font-size: 13px; }
nav .links a.active, nav .links a:hover { color: var(--blue); }
nav .who { font-size: 12px; color: var(--gray-mid); text-align: right; }
nav .who b { display: block; color: var(--black); }

/* UI review 2026-10-09, finding 3: office pages carry no body.staff class,
   so dense.css's own nav breakpoint (body.staff nav, scoped to the staff
   six-menu nav) never reaches them, and the office nav (logo / links /
   user) squeezed into a narrow row and ran off-screen at phone width.
   Stack it under 600px; staff pages are unaffected since body.staff nav's
   higher-specificity rule in dense.css still wins there. */
@media (max-width: 600px) {
  body:not(.staff) nav {
    flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 14px 18px;
  }
  body:not(.staff) nav .links { flex: none; width: 100%; flex-wrap: wrap; gap: 14px 20px; }
  body:not(.staff) nav .who { text-align: left; width: 100%; }
}

main { max-width: 1060px; margin: 0 auto; padding: 34px 24px 60px; }

.eyebrow {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gray-mid); font-weight: 600; margin-bottom: 6px;
}
h1 { font-weight: 300; font-size: 30px; margin-bottom: 4px; }
h1 b { font-weight: 600; }
h2 { font-weight: 600; font-size: 17px; color: var(--blue); margin: 0 0 12px; }
.sub { color: var(--gray-mid); margin-bottom: 24px; }

.card {
  background: #fff; border-radius: 20px; padding: 22px 24px;
  box-shadow: 0 4px 22px rgba(75,174,240,.10); margin-bottom: 18px;
}
.card.attention { border: 2px solid var(--black); }
.card.callout { background: var(--light); box-shadow: none; }
.card.dark { background: var(--black); color: #fff; }

.btn {
  display: inline-block; background: var(--blue); color: #fff; border: 0;
  font: 600 13px 'Montserrat', sans-serif; letter-spacing: .04em;
  padding: 11px 26px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(75,174,240,.35);
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(75,174,240,.45); }
.btn.secondary { background: #fff; color: var(--blue); border: 2px solid var(--blue); box-shadow: none; }
.btn.dark { background: var(--black); box-shadow: none; }
.btn.small { padding: 7px 18px; font-size: 12px; }
/* Modal dismiss: an X, never the word Close, so it can't be mistaken for
   closing the order (Brent, 2026-10-10). */
.modal-x { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--black); font-size: 22px; line-height: 30px; text-align: center; cursor: pointer; }
.modal-x:hover, .modal-x:focus-visible { background: var(--gray); }

.chips { display: flex; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.chip {
  padding: 7px 16px; border-radius: 999px; background: #fff; color: var(--gray-mid);
  font-size: 12px; font-weight: 600; border: 1px solid var(--gray); cursor: pointer;
}
.chip.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.chip.black { background: var(--black); color: #fff; border-color: var(--black); }

.badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
}
.badge.blue { background: var(--light); color: #1d7fc4; }
.badge.black { background: var(--black); color: #fff; }
.badge.gray { background: var(--gray); color: var(--gray-mid); }

/* STAT / VIP marks (app/templating.py::pmarks): bolt and crown, next to the
   patient or order on every staff screen. Black is the attention color. */
.pmarks { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 6px; white-space: nowrap; }
.pmark {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 4px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; font-style: normal;
}
.pmark svg { width: 11px; height: 11px; fill: currentColor; flex: none; }
.pmark.pm-stat { background: var(--black); color: white; }
.pmark.pm-vip { background: var(--light); color: var(--deep); }
.pmark.icon { padding: 2px 4px; }

/* 7-dot tracker */
.tracker { display: flex; align-items: center; gap: 4px; }
.tracker .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--light); flex: none;
}
.tracker .dot.done { background: var(--blue); }
.tracker .dot.attn { background: var(--black); }
.tracker .bar { height: 2px; flex: 1; background: var(--light); min-width: 8px; }
.tracker .bar.done { background: var(--blue); }

/* vertical journey */
.journey { list-style: none; padding: 0; }
.journey li { display: flex; gap: 14px; padding: 9px 0; align-items: flex-start; }
.journey .jdot {
  width: 15px; height: 15px; border-radius: 50%; background: var(--light);
  margin-top: 2px; flex: none;
}
.journey li.done .jdot { background: var(--blue); }
.journey li.attn .jdot { background: var(--black); }
.journey li.future { color: var(--gray-mid); }
.journey .when { font-size: 12px; color: var(--gray-mid); }

/* UI review 2026-10-09, finding (c)8: every wide table sits in its own
   horizontal scroller instead of widening the page. Shared across sales,
   escalate and sales manager; .inbox had its own copy already (line further
   down), kept as-is. */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
     color: var(--gray-mid); padding: 8px 10px; border-bottom: 1px solid var(--gray); }
td { padding: 9px 10px; border-bottom: 1px solid #F0F4F8; vertical-align: top; }

label { display: block; font-size: 12px; font-weight: 600; margin: 14px 0 5px; }
input:not([type]), input[type=text], input[type=date], input[type=tel], input[type=email],
select, textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--gray);
  border-radius: 12px; font: 400 14px 'Montserrat', sans-serif; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }

.inline-form { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.inline-form input, .inline-form select { width: auto; flex: 1 1 140px; }
.inline-form button { flex: 0 0 auto; }

.view-banner { background: var(--blue); color: #fff; text-align: center;
  padding: 8px 14px; font-size: 13px; }
.view-banner a { color: #fff; font-weight: 600; text-decoration: underline; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 760px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } }

.stat { background: var(--light); border-radius: 20px; padding: 18px 20px; }
.stat .n { font-size: 30px; font-weight: 300; }
.stat .l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
           color: var(--gray-mid); font-weight: 600; }
.stat.dark { background: var(--black); color: #fff; }
.stat.dark .l { color: rgba(255,255,255,.65); }

.meter { height: 10px; background: var(--light); border-radius: 999px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--blue); border-radius: 999px;
           transition: width .3s ease-out; }

.check-item { display: flex; align-items: center; gap: 12px; padding: 10px 0;
              border-bottom: 1px solid #F0F4F8; }
.check-item .ok { color: var(--blue); font-weight: 600; }
.check-item .why { font-size: 11px; color: var(--gray-mid); }

.msg { margin-bottom: 12px; max-width: 82%; }
.msg .bubble { padding: 12px 16px; border-radius: 16px; background: var(--light); }
.msg.pure .bubble { background: var(--black); color: #fff; }
.msg .meta { font-size: 11px; color: var(--gray-mid); margin-top: 3px; }
.msg.pure { margin-left: auto; text-align: right; }

.push-bar { display: flex; gap: 10px; align-items: center; background: var(--light);
            border-radius: 999px; padding: 9px 20px; font-size: 12px; margin-bottom: 20px; }
.push-bar b { font-weight: 600; }

footer {
  background: var(--black); color: #fff; margin-top: 60px;
  padding: 34px 32px; text-align: center;
}
footer img { width: 170px; height: auto; opacity: .95; }
footer .close { font-weight: 300; font-size: 15px; margin-top: 12px; letter-spacing: .02em; }
footer .fine { font-size: 11px; color: rgba(255,255,255,.55); margin-top: 14px; }
.flash { background: var(--light); border-radius: 14px; padding: 12px 18px;
         margin-bottom: 18px; font-size: 13px; }
.linkbox { word-break: break-all; background: #fff; border-radius: 10px; padding: 10px 12px;
           font-size: 12px; margin-top: 8px; border: 1px dashed var(--blue); }

/* ---- Referrals v2 components (Pure Intake mockup, 2026-09-06) ---- */

.asof { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--light); color: var(--deep); font-size: 12px; font-weight: 600; }
.asof i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); display: inline-block; }

.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--black); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.avatar.lite { background: var(--light); color: var(--deep); }

.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 13px; border: 1.5px solid transparent; white-space: nowrap; cursor: pointer; text-decoration: none; font-family: inherit; line-height: 1.2; }
a.pill, button.pill { display: inline-flex; }
button.pill { background: transparent; }
.pill.primary { background: var(--blue); color: #fff; }
.pill.dark { background: var(--black); color: #fff; }
.pill.ghost { background: #fff; color: var(--black); border-color: var(--gray); }
.pill.sm { padding: 7px 14px; font-size: 12px; }

.chip.blue { background: var(--light); color: var(--deep); }
.chip.gray { background: #F0F0F0; color: var(--gray-mid); }
.chip.white { background: #fff; color: var(--black); border: 1px solid var(--gray); }

.lane { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; font-weight: 500; font-size: 13.5px; color: inherit; text-decoration: none; }
.lane.on { background: var(--light); color: var(--deep); font-weight: 600; }
.lane .c { font-size: 12px; color: var(--gray-mid); font-weight: 600; }
.lane.on .c { color: var(--deep); }

.row { display: grid; align-items: center; gap: 16px; padding: 14px 18px; border-top: 1px solid #F0F0F0; }
.row.head { border-top: none; padding: 6px 18px 10px; }
.row.head span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-mid); font-weight: 600; }
.row.hover { background: #FBFDFF; }

.name { font-weight: 600; font-size: 14px; }
.stack { display: flex; flex-direction: column; gap: 2px; }
.hstack { display: flex; align-items: center; gap: 10px; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 13px; }
.kv b { font-weight: 600; }
.kv .k { color: var(--gray-mid); }

.check { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F0F0F0; font-size: 13px; }
.check .box { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--gray); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.check .box.on { background: var(--blue); border-color: var(--blue); }
.check .box.need { background: var(--black); border-color: var(--black); }

.tl { display: grid; grid-template-columns: 78px 1fr; gap: 4px 12px; font-size: 12.5px; }
.tl .t { color: var(--gray-mid); }
.tl .wei { color: var(--deep); font-weight: 600; }

.stat.attn { background: #fff; border: 2px solid var(--black); }
.stat.attn .l { color: var(--black); }

.card.light { background: var(--light); box-shadow: none; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--black); }
.field .in { height: 42px; border: 1.5px solid var(--gray); border-radius: 12px; padding: 0 14px; display: flex; align-items: center; font-size: 14px; background: #fff; }
.field .in.ph { color: var(--gray-mid); }
.field input, .field select, .field textarea { height: 42px; border: 1.5px solid var(--gray); border-radius: 12px; padding: 0 14px; font: 400 14px 'Montserrat', sans-serif; background: #fff; }

.up { border: 1.5px dashed var(--gray); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-size: 13px; background: #fff; }
.up.on { border-style: solid; border-color: var(--blue); background: #F3F9FE; }
.up.need { border-color: var(--black); border-style: solid; }

.ico { width: 18px; height: 18px; flex: none; }

.eyebrow.deep { color: var(--deep); }
.text-deep { color: var(--deep); }

main.wide { max-width: 1360px; }
/* minmax(0, 1fr): a 1fr track's minimum is min-content, so a wide table in the
   content column pushed the desk past main's edge and clipped the fourth tile
   at <=1512px (2026-09-07). Zero-minimum tracks shrink instead. */
.two-col-desk { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; }
.three-col-work { display: grid; grid-template-columns: 380px minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.two-col-office { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
.tiles-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 900px) {
  main.wide { max-width: 100%; }
  .two-col-desk, .three-col-work, .two-col-office, .tiles-4 { grid-template-columns: 1fr; }
  .three-col-work { align-items: auto; }
}

/* UI review 2026-10-09, finding 3: each office patient row (dashboard.html,
   patients.html) sets its own grid-template-columns inline (200px 180px 1fr
   200px) -- those fixed tracks alone run past a 390px viewport, pushing the
   whole page 783px wide and taking the status/tracker and 'Ask Pure' link
   off-screen with it. Stack every row to one column under 600px; needs
   !important since it is overriding an inline style. */
@media (max-width: 600px) {
  .two-col-office .row { grid-template-columns: 1fr !important; gap: 6px; }
}

/* Phone frame (from PHONE_CSS) */
.phone { width: 390px; max-width: 100%; margin: 0 auto; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.phone .top { padding: 64px 22px 14px; border-bottom: 1px solid var(--gray); display: flex; align-items: center; gap: 12px; }
.phone .top img { width: 22px; height: auto; }
.phone .top .t { font-weight: 600; font-size: 15px; }
.phone .top .s { font-size: 12px; color: var(--gray-mid); }
.phone .sms { padding: 14px 18px 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.38; }
.phone .sms .d { text-align: center; font-size: 11px; color: var(--gray-mid); margin: 6px 0 2px; }
.phone .sms .b { background: var(--light); border-radius: 18px; padding: 11px 14px; max-width: 84%; align-self: flex-start; }
.phone .sms .b a { font-weight: 600; }
.phone .sms .me { background: var(--blue); color: #fff; align-self: flex-end; }
.phone .stage { display: grid; grid-template-columns: 22px 1fr; gap: 0 12px; }
.phone .stage .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--light); margin: 4px 5px; }
.phone .stage .dot.done { background: var(--blue); }
.phone .stage .dot.attn { background: var(--black); }
.phone .stage .line { width: 2px; height: 16px; background: var(--light); margin: 0 10px; }
.phone .stage .line.done { background: var(--blue); }

/* Meter with target tick */
.meter { position: relative; }
.meter b { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--black); }

.stat .m { font-size: 11.5px; color: var(--gray-mid); margin-top: 4px; }

.hbar { height: 10px; background: var(--light); border-radius: 999px; overflow: hidden; }
.hbar i { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.hbar.k i { background: var(--black); }

.ch { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #F0F0F0; color: var(--gray-mid); white-space: nowrap; }
.ch.blue { background: var(--light); color: var(--deep); }
.ch.black { background: var(--black); color: #fff; }

.gapnote { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; background: #F0F0F0; color: var(--gray-mid); font-size: 12.5px; line-height: 1.45; }

.wrapch { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.wrapch .ch { white-space: normal; text-align: left; }

.heat { display: flex; align-items: center; justify-content: flex-end; height: 36px; padding: 0 10px; border-radius: 8px; font-weight: 600; font-size: 13px; }

.spark { display: block; }

.lane .c.k { background: var(--black); color: #fff; border-radius: 999px; padding: 1px 8px; }

.field .in.ta { height: auto; min-height: 70px; align-items: flex-start; padding: 10px 14px; }

/* Order type-ahead picker (sales_escalate.html) -- replaces a plain
   <select> over the whole territory book with a bounded search. */
.order-picker { position: relative; }
.order-locked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.order-locked span { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.order-locked a { font-size: 12px; font-weight: 600; color: var(--blue); flex: none; white-space: nowrap; }
.order-results { position: relative; z-index: 5; margin-top: -1px; border: 1.5px solid var(--gray); border-top: none; border-radius: 0 0 12px 12px; max-height: 260px; overflow-y: auto; }
.order-results:empty { border: none; }
.order-results .order-result { padding: 9px 14px; font-size: 13px; cursor: pointer; border-top: 1px solid var(--gray); overflow-wrap: anywhere; }
.order-results .order-result:first-child { border-top: none; }
.order-results .order-result:hover, .order-results .order-result.active { background: var(--light); }
.order-results .order-result.hint { cursor: default; color: var(--gray-mid); }
.order-results .order-result.hint:hover { background: none; }
.order-noscript { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.order-noscript .in { flex: 1; min-width: 180px; }

.tl .attn { font-weight: 600; }
.tl .gapline { color: var(--gray-mid); font-style: italic; }

/* V8 (intake visibility, sales manager + rep phone) */
.meta { color: var(--gray-mid); font-size: 12px; }

.rundot { width: 10px; height: 10px; border-radius: 50%; background: var(--light); display: inline-block; }
.rundot.bad { background: var(--black); }

/* Phone rows and tab bar (mirrors the mockup's PHONE_CSS .prow/.tabbar) */
.phone .prow { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 0; border-top: 1px solid var(--gray); align-items: center; min-height: 44px; }
.phone .tabbar { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--gray); padding: 10px 0 18px; }
.phone .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--gray-mid); text-decoration: none; }
.phone .tabbar a.on { color: var(--black); }

/* The rep's phone layout on /sales: the desktop table renders by default;
   at or under 480px it hides and the phone markup (.sales-phone, already
   wrapped in .phone) takes over. Scoped to .sales-page (set on <main> by
   sales.html) so no other page's layout is touched. */
.sales-page .sales-phone { display: none; }
@media (max-width: 480px) {
  .sales-page .sales-desktop { display: none; }
  .sales-page .sales-phone { display: flex; }
}

/* ---- Inbox v1 (Document Inbox mockup, 2026-09-08) ---- */

.inbox { width: 100%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; }

@media (max-width: 1100px) {
  .inbox { grid-template-columns: 1fr; }
}

.inbox .tag { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--light); color: var(--deep); margin: 1px 3px 1px 0; white-space: nowrap; }
.inbox .tag.auto { background: var(--bg); color: var(--gray-mid); border: 1px solid var(--gray); }
.inbox .tag.add { background: white; border: 1px dashed var(--gray-mid); color: var(--gray-mid); }

.inbox .ev { display: block; font-size: 12px; color: var(--black); line-height: 1.5; }
.inbox .ev b { font-weight: 600; }
.inbox .ev small { color: var(--gray-mid); }

.inbox .orig { font-size: 12px; color: var(--gray-mid); display: block; }
.inbox .orig a { color: var(--blue); font-weight: 500; }

.inbox .drawer { background: white; border: 1px solid var(--gray); border-radius: 14px; padding: 18px 20px; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
.inbox .drawer h4 { margin: 14px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.inbox .drawer .pdf { background: var(--bg); border: 1px solid var(--gray); border-radius: 10px; height: 300px; display: grid; place-items: center; color: var(--gray-mid); font-size: 12.5px; text-align: center; padding: 16px; margin-bottom: 14px; position: relative; }
.inbox .drawer .pdf .pdf-larger { position: absolute; top: 8px; right: 8px; background: white; border: 1px solid var(--gray); border-radius: 999px; padding: 4px 12px; font-size: 11.5px; color: var(--blue); text-decoration: none; }
.inbox .drawer .pdf .pdf-larger:hover { background: var(--bg); }

/* "View larger" modal (2026-09-09) -- sits outside .inbox so swapDrawer's
   outerHTML replace of #inbox-drawer never touches it. Near-full-viewport,
   same border radius as .inbox .drawer above. */
#inbox-pdf-modal { width: 92vw; height: 92vh; max-width: none; max-height: none; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
#inbox-pdf-modal::backdrop { background: rgba(32,29,29,.55); }
#inbox-pdf-modal .pdf-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--gray); }
#inbox-pdf-modal .pdf-modal-head span { font-size: 13px; font-weight: 600; color: var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#inbox-pdf-modal iframe { display: block; width: 100%; height: calc(92vh - 49px); border: 0; background: white; }
body.pdf-modal-open { overflow: hidden; }
/* Inbox C6 (2026-09-11): the three-pane page (app/static/inbox-v2.css, every rule
   scoped under .inbox-v2) takes the full width and no main padding. This is the
   one rule that has to sit on an ancestor of the scope, so it lives here. */
main.inbox-v2-main, body.staff main.inbox-v2-main { max-width: 100%; padding: 0; margin: 0; }

.inbox .note { background: var(--bg); border: 1px solid var(--gray); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; color: var(--black); margin-bottom: 14px; }
.inbox .note b { font-weight: 600; }

.inbox .filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 12px; align-items: center; }
.inbox .cnt { margin-left: auto; font-size: 12.5px; color: var(--gray-mid); }

.inbox .chip { display: inline-flex; align-items: center; gap: 6px; background: white; border: 1px solid var(--gray); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; color: var(--black); }

.inbox .pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--gray-mid); }

.inbox .tablewrap { overflow-x: auto; }
.inbox table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--gray); border-radius: 14px; overflow: hidden; font-size: 13px; }
.inbox thead th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-mid); padding: 10px 11px; background: var(--bg); border-bottom: 1px solid var(--gray); white-space: nowrap; }
.inbox tbody td { padding: 10px 11px; border-bottom: 1px solid var(--gray); vertical-align: middle; }
.inbox tbody tr:last-child td { border-bottom: 0; }
.inbox tbody tr[data-id] { cursor: pointer; }
.inbox tbody tr:hover td { background: var(--bg); }
.inbox tbody tr.sel td { background: var(--light); }

.inbox .dt { white-space: nowrap; }
.inbox .dt .two { display: block; }
.inbox .dt .two small { display: block; color: var(--gray-mid); font-size: 11.5px; margin-top: 1px; }

.inbox tr.sel { background: var(--light); }

.inbox .attn { color: var(--black); font-weight: 600; }

.inbox .empty { padding: 20px; text-align: center; color: var(--gray-mid); font-size: 13px; }

.inbox .kv { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.inbox .kv li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--gray); align-items: flex-start; }
.inbox .kv li:first-child { border-top: 0; padding-top: 0; }
.inbox .kv span { color: var(--gray-mid); flex: none; }
.inbox .kv b { font-weight: 500; text-align: right; }

.inbox .tl { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.inbox .tl li { position: relative; padding: 5px 0 5px 20px; }
.inbox .tl li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--gray); box-shadow: 0 0 0 1px var(--gray); }
.inbox .tl li.now::before { background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.inbox .tl li.next::before { background: white; box-shadow: 0 0 0 1px var(--gray-mid); }
.inbox .tl li::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: -6px; width: 1px; background: var(--gray); }
.inbox .tl li:last-child::after { display: none; }
.inbox .tl small { display: block; color: var(--gray-mid); }
.inbox .tl b { font-weight: 600; }


/* /sales notes icon + note modal (2026-10-09). Rows with a note carry the icon
   only; it opens #note-modal with the whole note, line breaks kept. Driven by
   app/static/note_modal.js. */
.note-open { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--gray); border-radius: 999px; background: white; color: var(--blue); cursor: pointer; }
.note-open:hover, .note-open:focus-visible { background: var(--light); color: var(--deep); }
.note-open .ico { width: 15px; height: 15px; }
#note-modal { width: min(640px, 92vw); max-height: 80vh; margin: auto; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
#note-modal::backdrop { background: rgba(32,29,29,.55); }
#note-modal .note-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gray); }
#note-modal .note-modal-head b { font-size: 14px; color: var(--black); }
#note-modal .note-modal-head .meta { font-size: 11.5px; margin-top: 2px; }
#note-modal .note-modal-body { padding: 16px 18px 20px; font-size: 13.5px; line-height: 1.55; color: var(--black); white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; max-height: calc(80vh - 70px); }
body.note-modal-open { overflow: hidden; }
/* The "i" icon (2026-10-09): page explanations live behind it instead of on
   the page. Hover shows the title line; click or tap opens #info-modal
   (base.html, app/static/info_modal.js). Sits inline after a heading or label. */
.info { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.info-btn { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--gray-mid); cursor: pointer; }
.info-btn:hover, .info-btn:focus-visible { background: var(--light); color: var(--deep); }
.info-btn .ico { width: 16px; height: 16px; }
#info-modal { width: min(560px, 92vw); max-height: 80vh; margin: auto; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
#info-modal::backdrop { background: rgba(32,29,29,.55); }
#info-modal .info-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gray); }
#info-modal .info-modal-head b { font-size: 14px; color: var(--black); }
#info-modal .info-modal-body { padding: 14px 18px 18px; font-size: 13.5px; line-height: 1.55; color: var(--black); overflow-y: auto; max-height: calc(80vh - 64px); }
#info-modal .info-modal-body p { margin: 0 0 10px; }
#info-modal .info-modal-body p:last-child { margin-bottom: 0; }
body.info-modal-open { overflow: hidden; }
/* New escalation dialog on the Escalations page (2026-10-13): the rep form
   (_escalate_form.html) in a dialog; head reuses .info-modal-head. */
.esc-modal { width: min(760px, calc(100vw - 32px)); max-height: 90vh; margin: auto; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.esc-modal::backdrop { background: rgba(32,29,29,.55); }
.esc-modal .info-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gray); }
.esc-modal .info-modal-head b { font-size: 14px; color: var(--black); }
.esc-modal .modal-x { text-decoration: none; }
/* Escalated in place (2026-10-23, escalate_modal.js): the confirmation sits
   where the user is, bottom right, instead of at the top of a page they may
   have scrolled down. */
.esc-toast { position: fixed; right: 16px; bottom: 16px; z-index: 60; margin: 0; max-width: min(460px, calc(100vw - 32px));
  padding-right: 44px; box-shadow: 0 10px 30px rgba(0,0,0,.18); font-size: 14px; }
.esc-toast .modal-x { position: absolute; top: 8px; right: 10px; }
.esc-modal-body { padding: 16px 18px 18px; overflow-y: auto; max-height: calc(90vh - 60px); }
@media (max-width: 640px) { .esc-modal-body [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } }
body.esc-modal-open { overflow: hidden; }
/* Escalation threads (2026-10-20): a row opens its ticket-style log in
   #esc-thread-modal; the rep's posts sit left on white, intake's right on
   light blue, so who said what reads at a glance. */
.esc-row { cursor: pointer; }
.esc-row:hover td { background: var(--light); }
.esc-row.unread td:first-child { box-shadow: inset 3px 0 0 var(--black); }
.esc-snippet { max-width: 260px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* The ticket panel (2026-10-30, Brent's approved mockup): reference line
   and More, a banner for whose move it is, facts with their own Edit, then
   hand-offs, history and one composer. <details> does the opening, so no
   script is needed; escalation_thread.js only closes More on an outside
   click. A missed reply target is Pure Black, like the list. */
.esc-p-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.esc-p-ref { min-width: 0; }
.esc-more { position: relative; flex: none; }
.esc-more > summary { list-style: none; }
.esc-more > summary::-webkit-details-marker { display: none; }
.esc-more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(380px, calc(100vw - 48px)); background: var(--white); border: 1px solid var(--gray); border-radius: 12px; box-shadow: 0 10px 30px rgba(32,29,29,.14); padding: 6px; display: flex; flex-direction: column; }
.esc-more-item > summary, .esc-more-link { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--black); cursor: pointer; text-decoration: none; list-style: none; }
.esc-more-item > summary::-webkit-details-marker { display: none; }
.esc-more-item > summary:hover, .esc-more-link:hover, .esc-more-item[open] > summary { background: var(--bg); }
.esc-more-item[open] > summary { font-weight: 600; }
.esc-more-item form { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 10px; }
.esc-more-item form .pill { align-self: flex-start; }
.esc-more-label { display: flex; gap: 6px; align-items: center; }
.esc-next { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--light); }
.esc-next.attn { background: var(--white); border: 2px solid var(--black); }
.esc-next-text { flex: 1; min-width: 0; font-size: 14px; color: var(--black); }
.esc-next-text .meta { margin-top: 2px; }
.esc-facts { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 16px 0 0; font-size: 13px; }
.esc-facts dt { color: var(--gray-text); }
.esc-facts dd { margin: 0; color: var(--black); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; min-width: 0; }
.esc-watch-names .esc-watcher + .esc-watcher::before { content: ", "; }
.esc-inline-edit > summary { list-style: none; color: var(--deep); font-size: 12px; cursor: pointer; }
.esc-inline-edit > summary::-webkit-details-marker { display: none; }
.esc-inline-edit[open] { flex-basis: 100%; }
.esc-inline-edit[open] > summary { display: none; }
.esc-inline-edit form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; background: var(--bg); border-radius: 8px; }
.esc-watch-form { display: inline; }
.esc-link-btn { border: 0; background: none; padding: 0; color: var(--deep); font: inherit; font-size: 12px; cursor: pointer; }
.esc-link-btn:hover, .esc-inline-edit > summary:hover { text-decoration: underline; }
.esc-sec { margin-top: 18px; }
.esc-sec-h { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--gray-text); }
.esc-sec .esc-log { margin-top: 0; }
.esc-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.esc-mode { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.esc-mode input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.esc-mode label { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--gray-text); background: var(--bg); cursor: pointer; }
.esc-mode input:checked + label { background: var(--black); color: var(--white); font-weight: 600; }
.esc-mode input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }
.esc-mode .info { margin-left: 6px; }
.esc-propose-reason { display: inline-flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.esc-propose-reason label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.esc-reply-actions .esc-propose-reason select { width: auto; max-width: 210px; min-width: 0; }
.esc-watch-names { display: inline; }
.esc-reply-label { display: flex; gap: 6px; align-items: center; }
.esc-copy-note { margin-top: 6px; }
.esc-resolved-note { margin-top: 14px; }
@media (max-width: 640px) { .esc-facts { grid-template-columns: 1fr; gap: 2px; } .esc-facts dd { margin-bottom: 8px; } }
.esc-log { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--gray); display: flex; flex-direction: column; gap: 10px; }
.esc-post { max-width: 85%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--gray); background: var(--white); }
.esc-post.intake { align-self: flex-end; background: var(--light); border-color: var(--light); }
/* Internal note (2026-10-29): intake's own, never shown to the sales side. Dashed
   and muted so it cannot be mistaken for a reply to the requester. */
.esc-post.note { background: var(--bg); border: 1px dashed var(--gray-mid); }
.esc-post-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 12.5px; margin-bottom: 4px; }
.esc-post-head .esc-post-at { margin-left: auto; }
.esc-post-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; color: var(--black); overflow-wrap: anywhere; }
.esc-post-event { align-self: center; font-size: 12px; }
.esc-reply { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gray); display: flex; flex-direction: column; gap: 6px; }
.esc-reply textarea { width: 100%; min-height: 80px; }
.esc-reply-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; }
.esc-signoff { margin-top: 14px; padding: 12px 14px; border: 2px solid var(--black); border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.esc-signoff p { margin: 0; font-size: 13.5px; flex: 1 1 260px; }
.esc-reply-err { color: var(--black); font-weight: 600; }
.esc-close { margin-top: 10px; }
/* New-reply bar (2026-10-20): pinned over every staff page while an
   escalation thread has an unread reply. Attention is Pure Black. */
.esc-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 9px 48px 9px 16px; background: var(--black); color: var(--white); font-size: 13px; font-weight: 600; }
.esc-bar[hidden] { display: none; }
.esc-bar .esc-bar-open { color: var(--white); background: var(--blue); border-radius: 999px; padding: 3px 12px; text-decoration: none; }
.esc-bar .esc-bar-open:hover, .esc-bar .esc-bar-open:focus-visible { background: var(--white); color: var(--black); }
.esc-bar .esc-bar-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--white); font-size: 20px; line-height: 28px; cursor: pointer; }
.esc-bar .esc-bar-x:hover, .esc-bar .esc-bar-x:focus-visible { background: rgba(255,255,255,.15); }
@media (max-width: 640px) { .esc-post { max-width: 100%; } }
/* PHI confirm before a patient-level download (2026-10-13): one dialog for every
   export, app/templates/_phi_download_modal.html + app/static/phi_download.js. */
#phi-download-modal { width: min(460px, 92vw); margin: auto; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
#phi-download-modal::backdrop { background: rgba(32,29,29,.55); }
#phi-download-modal .phi-download-head { padding: 14px 18px; border-bottom: 1px solid var(--gray); font-size: 14px; color: var(--black); }
#phi-download-modal .phi-download-body { padding: 14px 18px 18px; font-size: 13.5px; line-height: 1.55; color: var(--black); }
#phi-download-modal .phi-download-body p { margin: 0 0 14px; }
#phi-download-modal .phi-download-actions { display: flex; gap: 10px; justify-content: flex-end; }
body.phi-download-open { overflow: hidden; }
/* Page-header "i" (2026-10-10): what used to sit under the title (scope,
   sub-line, data freshness) shows on hover as a popover, on click or tap in
   #info-modal. Hover only on real pointers, so a tap never flashes both. */
h1:has(> .page-info) { margin-bottom: 14px; }
.page-info { position: relative; margin-left: 8px; }
.page-info .info-btn { width: 24px; height: 24px; }
.page-info .info-btn .ico { width: 18px; height: 18px; }
.page-info .info-pop { display: none; position: absolute; top: calc(100% + 6px); left: -8px; z-index: 200; width: min(460px, 80vw); padding: 12px 14px; background: var(--white); border: 1px solid var(--gray); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--black); white-space: normal; text-align: left; }
.page-info .info-pop::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.page-info .info-pop p { margin: 0 0 8px; font-size: 13px; color: var(--black); }
.page-info .info-pop p:last-child { margin-bottom: 0; }
.page-info .info-pop .eyebrow { margin-bottom: 6px; }
@media (hover: hover) {
  .page-info:hover .info-pop, .page-info:has(.info-btn:focus-visible) .info-pop { display: block; }
}
body.info-modal-open .page-info .info-pop { display: none !important; }

/* Reports phase 2 (2026-10-10): a count that opens its own orders on
   Referrals (app/templates/_drill.html). Keeps the number's own color and
   weight; the dotted underline says it's a link. */
a.drill { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
a.drill:hover { text-decoration-style: solid; }
/* Staff name -> Teams chat (app/templates/_staff.html): reads as text, links on hover. */
a.staff-link { color: inherit; text-decoration: underline dotted transparent; text-underline-offset: 3px; }
a.staff-link:hover { text-decoration-color: currentColor; }
/* Copy-order-ID button beside the WeInfuse order number (static/portal.js). */
.copy-btn { font: inherit; font-size: 11.5px; padding: 0 7px; margin-left: 4px; border: 1px solid var(--gray); border-radius: 6px; background: transparent; color: var(--black); cursor: pointer; }
.copy-btn:hover, .copy-btn:focus-visible { background: var(--gray); }
.copy-note { margin-left: 6px; font-size: 11.5px; color: var(--gray-text); }
.name-pending { color: var(--gray-text); font-style: italic; cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* One From/To date control (app/templates/_date_range.html). */
.date-range { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 10px 0 0; }
.date-range input[type=date] { width: auto; max-width: 170px; height: 31px; padding: 4px 8px; border: 1px solid var(--gray); border-radius: 8px; font: inherit; font-size: 13px; }
/* One report filter bar (app/templates/_report_filters.html): its look is the
   shared filter bar in dense.css (body.staff .filterbar, .report-filters). */
.report-filters .rf-dates { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.report-filters .rf-presets { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-bottom: 2px; }
/* A change from the prior period beside a number. */
.delta { font-size: 11.5px; font-weight: 600; color: var(--gray-mid); white-space: nowrap; }

/* Admin > Roles (2026-10-21): a role without "Download spreadsheets" gets
   body.no-export (base.html). The server refuses the download itself
   (app/permissions.py::page_guard); this only hides the buttons. */
.no-export [data-phi-download],
.no-export a[href*=".xlsx"],
.no-export a[href*=".csv"] { display: none !important; }
/* Escalations list, Phase 1 PR 4 (2026-10-29): sortable heads, the bulk bar. */
.esc-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.esc-sort:hover, .esc-sort:focus-visible { text-decoration: underline; }
.esc-bulk { margin: 10px 0 0; padding: 8px 12px; border: 2px solid var(--black); border-radius: 12px; }
.esc-bulk[hidden], .esc-bulk [hidden] { display: none; }