/* Care Station — Tasking Queue stylesheet.
 *
 * Mirrors demo-styles.css for visual continuity; adapted for the
 * real auth + data flow. Colors and spacing match the demo so the
 * production page feels like the demo the user already validated.
 */

/* Inter — self-hosted variable font (latin, weights 400–700), OFL.
   Self-hosted rather than Google Fonts so no external request fires
   from a page that may render PHI. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
}

/* ─────────────────────────────────────────────────────────────────
 * Reset + tokens
 * ───────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Form controls don't inherit font-family by default — without this, bare
   <button>/<input>/<select>/<textarea> fall back to the UA font (Arial),
   which is why some buttons rendered in a different font than the Inter
   around them. Element-specific font-family rules still win on specificity. */
button, input, select, textarea { font-family: inherit; }

:root {
  /* Surface */
  --bg-page:      #f7f8fb;
  --bg-surface:   #ffffff;
  --bg-banner:    #fef3c7;
  --bg-banner-strong: #fde68a;
  --border:       #dfe4eb;
  --border-strong:#c4ccd6;

  /* Text */
  --text-primary: #1f2633;
  --text-muted:   #657080;
  --text-faint:   #9aa4b2;

  /* Brand + semantic colors */
  --brand:        #315f8a;
  --brand-hover:  #25496a;
  --brand-bg:     #edf3f9;
  --severe:       #9f2f28;
  --severe-bg:    #fbefed;
  --due:          #b45309;
  --due-bg:       #f7ead0;
  --red:          #9f2f28;
  --red-l:        #fbefed;
  --amber:        #b45309;
  --amber-l:      #f7ead0;
  --urgent:       #876318;
  --urgent-bg:    #f5ecd4;
  --normal:       #657080;
  --normal-bg:    #eef1f4;
  --success:      #7b6424;
  --success-bg:   #f4eedc;
  --routing-hub:  #5d6680;
  --routing-hub-bg: #eef1f6;

  /* Per-tenant themable surfaces — these names mirror the keys in
   * app-themes.js PRESETS. Adding a new var here needs a matching
   * entry in every preset, or the preset will silently fall back to
   * whatever bigeasy hardcoded for that slot. */
  --accent-strip: #b99a4b;

  --channel-intercom:     #315f8a;
  --channel-healthie:     #7b6424;
  --channel-bask:         #59677f;
  --channel-email:        #657080;
  --channel-outlook:      #657080;
  --channel-manual:       #64748b;
  --channel-api:          #f97316;
  --channel-unknown:      #d1d5db;
  --channel-unknown-text: #374151;

  --wait-fresh-bg:    #f4eedc;
  --wait-fresh-text:  #7b6424;
  --wait-short-bg:    #f1f5f9;
  --wait-short-text:  #475569;
  --wait-medium-bg:   #fef3c7;
  --wait-medium-text: #92400e;
  --wait-stale-bg:    #fee2e2;
  --wait-stale-text:  #991b1b;

  --pull-tag-provider-bg:   #eef1f6;
  --pull-tag-provider-text: #48536a;
  --pull-tag-clinical-bg:   #edf3f9;
  --pull-tag-clinical-text: #25496a;
  --pull-provider-accent:   #15835b;
  --pull-provider-accent-2: #0f6b49;

  /* Sizing */
  --topbar-h:     72px;
  --accent-h:     3px;
  --app-page-max: 1100px;
  --app-page-pad-x: 24px;
  --app-page-pad-y: 28px;
  --radius:       8px;
  --radius-sm:    6px;
  --radius-lg:    12px;
  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-pop:   0 10px 25px rgba(0, 0, 0, 0.15);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-page);
  min-height: 100vh;
  padding-bottom: var(--accent-h); /* keep content above the fixed bottom accent */
}

/* Brand-color frame strips at the top and bottom of the viewport.
   Top is normal flow (scrolls with the topbar — same pattern as the
   topbar itself); bottom is fixed so it stays visible. */
.app-accent {
  background: var(--accent-strip);
  height: var(--accent-h);
  width: 100%;
}
.app-accent-bottom {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
}

/* ─────────────────────────────────────────────────────────────────
 * Auth pages
 * ───────────────────────────────────────────────────────────────── */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 220px),
    var(--bg-page);
}
.auth-page .app-accent-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
}
.auth-page .card {
  width: 100%;
  max-width: 608px;
  padding: 42px 44px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.auth-page .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}
.auth-page .brand-icon {
  width: 88px;
  height: 50px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.auth-page .brand-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
}
.auth-page .brand-name a {
  color: inherit;
  text-decoration: none;
}
.auth-page .brand-name a:hover {
  color: var(--brand);
}
.auth-page .brand-tag {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.auth-page h1 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.auth-page .sub {
  margin: 0 0 28px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}
.auth-page .field {
  margin-bottom: 16px;
}
.auth-page label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}
.auth-page input[type="email"],
.auth-page input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 16px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.auth-page input[type="email"]:focus,
.auth-page input[type="password"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}
.auth-page input:-webkit-autofill,
.auth-page input:-webkit-autofill:hover,
.auth-page input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset;
  caret-color: var(--text-primary);
  transition: background-color 9999s ease-in-out 0s;
}
.auth-page .btn {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 120ms ease, border-color 120ms ease, transform 100ms ease;
}
.auth-page .btn:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.auth-page .btn:active {
  transform: scale(0.99);
}
.auth-page .btn:disabled {
  background: var(--text-faint);
  border-color: var(--text-faint);
  cursor: not-allowed;
  transform: none;
}
.auth-page .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  display: none;
}
.auth-page .spinner.on {
  display: block;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.auth-page .msg {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.55;
  display: none;
}
.auth-page .msg.ok {
  background: var(--success-bg);
  border: 1px solid var(--success);
  color: var(--success);
}
.auth-page .msg.err {
  background: var(--severe-bg);
  border: 1px solid var(--severe);
  color: var(--severe);
}
.auth-page .msg.show {
  display: block;
}
.auth-page .check-icon {
  display: block;
  margin-bottom: 12px;
  text-align: center;
  font-size: 36px;
}
.auth-page .footer {
  margin-top: 28px;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.auth-page .footer a {
  color: inherit;
  text-decoration: none;
}
.auth-page .footer a:hover {
  color: var(--brand);
  text-decoration: underline;
}
.auth-page .link-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -6px;
  margin-bottom: 16px;
}
.auth-page .link-row a,
.auth-page .back-link {
  color: var(--brand);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.auth-page .link-row a:hover,
.auth-page .back-link:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}
.auth-page .back-link {
  display: inline-block;
  margin-top: 14px;
}
.auth-page .banner {
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid var(--bg-banner-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-banner);
  color: var(--wait-medium-text);
  font-size: 13px;
  line-height: 1.5;
}
.auth-page .banner strong {
  color: var(--wait-medium-text);
}
.auth-page .phi-notice {
  width: 100%;
  margin-top: 24px;
  padding: 15px 18px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}
.auth-page .phi-notice p {
  margin: 0 0 8px;
}
.auth-page .phi-notice p:last-child {
  margin-bottom: 0;
}
.auth-page .phi-notice strong {
  color: var(--text-primary);
  font-weight: 600;
}
.auth-page .phi-lock {
  margin-right: 6px;
}
.auth-page .auth-centered-title {
  margin-bottom: 10px;
  text-align: center;
}
.auth-page .auth-centered-copy {
  text-align: center;
}
.auth-page .auth-centered-link {
  display: block;
  margin-top: 18px;
  text-align: center;
}

@media (max-width: 600px) {
  .auth-page {
    justify-content: flex-start;
    padding: 26px 14px 32px;
  }
  .auth-page .card {
    padding: 28px 22px;
  }
  .auth-page .brand {
    margin-bottom: 28px;
  }
  .auth-page .brand-icon {
    width: 72px;
    height: 44px;
    font-size: 16px;
  }
  .auth-page .brand-name {
    font-size: 21px;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * Top bar
 * ───────────────────────────────────────────────────────────────── */

.topbar {
  /* Was position:fixed (always visible below the sandbox banner);
     changed to normal flow 2026-05-19 — same reasoning as the sandbox
     banner. The brand + nav don't need to follow the user during a
     long scroll inside a task; they can scroll back up if needed. */
  height: var(--topbar-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto minmax(320px, 1fr);
  align-items: center;
  padding: 0 22px;
  gap: 20px;
}
.topbar-brand {
  display: inline-flex; align-items: center; gap: 12px;
  justify-self: start;
  max-width: 420px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: var(--radius-sm);
  transition: color 120ms ease;
}
.topbar-brand:hover .brand-name {
  color: var(--brand);
}
.topbar-brand:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.brand-icon {
  width: 88px; height: 50px;
  background: var(--brand);
  color: white;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
  letter-spacing: 0.04em;
}
.brand-icon.has-logo {
  background: none;
  padding: 0;
  overflow: hidden;
}
.brand-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.brand-stack { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 700; font-size: 18px; color: var(--text-primary); }
.brand-sub { font-size: 13px; color: var(--text-muted); }

/* Center action rail. Queue/index shows Manual Task Entry; task detail
   swaps in "Back to Queue" in the same fixed slot so the action never
   shifts position or width between views. */
.tab-nav {
  display: grid;
  grid-template-columns: 240px;
  justify-self: center;
}
.tab-btn {
  width: 100%;
  border: 1px solid var(--border);
  background: white;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 120ms ease;
}
.tab-btn:hover:not(.disabled) {
  background: var(--bg-page);
  border-color: var(--text-faint);
}
.tab-btn.active {
  background: var(--brand-bg);
  color: var(--brand);
  border-color: var(--brand);
}
.tab-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* "← Back to Queue" pill — rendered on task detail and secondary pages. */
.tab-btn.tab-btn-back {
  background: white;
  color: var(--text-primary);
  border-color: var(--border);
}
.tab-btn.tab-btn-back:hover:not(.disabled) {
  background: var(--bg-page);
  border-color: var(--text-faint);
}

.topbar-right { display: flex; align-items: center; gap: 16px; justify-content: flex-end; min-width: 0; }

.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 9px 3px 3px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: all 120ms ease;
}
.user-chip:hover {
  background: white;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
}
.chip-avatar {
  width: 28px; height: 28px;
  background: var(--brand-bg);
  color: var(--brand);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}
.chip-name { font-size: 13px; font-weight: 500; }
.dept-badge {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: white;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* ─────────────────────────────────────────────────────────────────
 * Profile panel (slide-out from right)
 * ───────────────────────────────────────────────────────────────── */

.profile-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 200;
}
.profile-overlay.active { opacity: 1; pointer-events: auto; }

.profile-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  transform: translateX(100%);
  transition: transform 240ms ease;
  z-index: 210;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.profile-panel.active { transform: translateX(0); }

.profile-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.profile-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.profile-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.profile-close {
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.profile-close:hover { background: var(--bg-page); color: var(--text-primary); }

.profile-id { display: flex; gap: 10px; align-items: center; }
.profile-avatar {
  width: 42px; height: 42px;
  background: var(--brand);
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.profile-name { font-weight: 600; font-size: 16px; }
.profile-email { font-size: 13px; color: var(--text-muted); }
.profile-role { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

.profile-body { padding: 14px 20px; flex: 0 0 auto; border-bottom: 1px solid var(--border); }
.profile-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.profile-company { font-size: 14px; }

.profile-foot {
  padding: 14px 20px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.profile-foot-sep { height: 1px; background: var(--border); margin: 8px 0; }
.profile-action {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  font-size: 13px;
  cursor: pointer;
  transition: all 120ms ease;
}
.profile-action:hover { background: var(--bg-page); border-color: var(--border-strong); }
.profile-action.danger { color: var(--severe); border-color: #fecaca; }
.profile-action.danger:hover { background: var(--severe-bg); }

.profile-cs-mark {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.02em;
}

/* ─────────────────────────────────────────────────────────────────
 * Main content
 * ───────────────────────────────────────────────────────────────── */

.main-content {
  padding: var(--app-page-pad-y) var(--app-page-pad-x) 32px;
  max-width: 1400px;
  margin-left: auto; margin-right: auto;
}

/* Shared app rail. Queue, manual entry, staff, and reports
   use the same readable width so moving between views does not feel like
   a different product shell. Task detail keeps the wider work canvas. */
.view {
  width: 100%;
  max-width: var(--app-page-max);
  margin-left: auto;
  margin-right: auto;
}

.view-queue {
  max-width: var(--app-page-max);
}
.queue-header {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
/* Title sits with a quiet brand accent bar on the left — the colour
   element migrated off the word "Queue" so it no longer competes with
   the Pull Tasks button for the eye. The ::before
   uses top/bottom insets so the bar aligns to the cap-height rather
   than the full line-height. */
.queue-title {
  position: relative;
  padding-left: 13px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
  line-height: 1.1;
}
.queue-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-hover) 100%);
  box-shadow: 0 1px 2px rgba(31, 37, 33, 0.12);
}
.staff-title,
.events-title,
.manual-task-title {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────
 * Pull row + dropdown
 * ───────────────────────────────────────────────────────────────── */

.pull-row {
  display: flex; gap: 12px; align-items: center;
  position: relative;
}

.pull-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 136px;
  height: 40px;
  background: var(--brand);
  color: white;
  border: 1px solid transparent;
  padding: 0 15px;
  font-size: 14px; font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 120ms ease;
}
.pull-btn:hover:not(:disabled) { background: var(--brand-hover); }
.pull-btn:disabled {
  cursor: not-allowed;
  background: var(--brand-bg);
  border-color: var(--border);
  color: var(--brand);
  box-shadow: none;
  opacity: 1;
}
.pull-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  position: relative;
  font-size: 0;
  line-height: 0;
}
.pull-btn-icon::before,
.pull-btn-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}
.pull-btn-icon::before {
  width: 12px;
  height: 2px;
}
.pull-btn-icon::after {
  width: 2px;
  height: 12px;
}
.pull-btn.pull-btn-blocked .pull-btn-icon {
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.pull-btn.pull-btn-blocked .pull-btn-icon::before,
.pull-btn.pull-btn-blocked .pull-btn-icon::after {
  width: 9px;
  height: 1.5px;
}
.pull-btn.pull-btn-blocked .pull-btn-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.pull-btn.pull-btn-blocked .pull-btn-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.pull-btn-label {
  line-height: 1;
  white-space: nowrap;
}

.refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  background: white;
  border: 1px solid var(--border);
  padding: 0;
  font-size: 13px;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 120ms ease;
}
.refresh-btn:hover { background: var(--bg-page); color: var(--text-primary); }
.refresh-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  transform-origin: center;
}
.refresh-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
.refresh-btn.is-refreshing .refresh-btn-icon {
  animation: queue-refresh-spin 700ms linear infinite;
}
@keyframes queue-refresh-spin {
  to { transform: rotate(360deg); }
}
.recent-work-btn {
  height: 40px;
  background: white;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius);
  padding: 0 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
}
.recent-work-btn:hover {
  background: var(--bg-page);
  border-color: var(--border-strong);
}
.pull-dropdown {
  position: absolute;
  top: 100%; right: 0;
  margin-top: 8px;
  width: 580px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  z-index: 30;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.pull-dropdown.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pull-dropdown-close {
  border: none; background: transparent;
  font-size: 20px; color: var(--text-muted);
  cursor: pointer; padding: 0; width: 24px; height: 24px;
}
.pull-dropdown-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: #fafbfc;
}
.pull-dropdown-toolbar .pull-dropdown-close {
  margin-left: auto;
}
.pull-dropdown-select-all {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 120ms ease;
}
.pull-dropdown-select-all:hover {
  background: var(--bg-page);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.pull-dropdown-body {
  padding: 8px 12px;
  max-height: 360px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.pull-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pull-section-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.pull-category-option {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 100ms ease;
}
.pull-category-option:hover { background: var(--bg-page); }
.pull-category-option input[type="checkbox"] { margin: 0; }
.pull-category-option--required {
  background: var(--bg-page);
}
.pull-category-option--locked {
  cursor: not-allowed;
}
.pull-category-option:not(.pull-category-option--locked) + .pull-category-option--locked {
  margin-top: 6px;
}
.pull-category-option--locked:hover {
  background: var(--bg-page);
}
.pull-category-option--locked input[type="checkbox"] {
  cursor: not-allowed;
}
/* Per-section accent strip — breaks up the dropdown's white space
   and lets staff visually distinguish Provider, Clinical, and
   Customer Service columns at a glance. Matches the brand-blue style on
   .queue-title::before for visual consistency across the page. */
.pull-category-option::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
}
.pull-section--clinical .pull-category-option::before {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-hover) 100%);
}
.pull-section--provider .pull-category-option::before {
  background: linear-gradient(180deg, var(--pull-provider-accent) 0%, var(--pull-provider-accent-2) 100%);
}
.pull-section--customer-service .pull-category-option::before {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
}
.pull-category-name { flex: 1; font-size: 13px; }
.pull-empty-note {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}
.pull-category-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pull-category-tag.idle {
  background: var(--routing-hub-bg);
  color: var(--routing-hub);
}
.pull-category-tag.disabled-tag {
  background: var(--normal-bg);
  color: var(--text-muted);
}
.pull-category-tag.provider {
  background: var(--pull-tag-provider-bg);
  color: var(--pull-tag-provider-text);
}
.pull-category-tag.clinical {
  background: var(--pull-tag-clinical-bg);
  color: var(--pull-tag-clinical-text);
}

.pull-dropdown-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
}
.pull-dropdown-confirm {
  padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border);
}
.pull-dropdown-confirm {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.pull-dropdown-confirm:hover { background: var(--brand-hover); }
.pull-dropdown-confirm:disabled {
  background: var(--text-faint); border-color: var(--text-faint);
  cursor: not-allowed;
}

/* On phone-width viewports the fixed 580px dropdown, anchored to the
 * right edge of .pull-row, runs off the left side of the screen. Let it
 * span the row instead so it stays within the viewport. */
@media (max-width: 600px) {
  .pull-row {
    width: 100%;
    flex-wrap: wrap;
  }
  .recent-work-btn {
    flex: 1 1 160px;
  }
  .pull-btn {
    width: auto;
    flex: 1 1 220px;
  }
  .pull-dropdown {
    width: auto;
    left: 0;
    right: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * Queue table
 * ───────────────────────────────────────────────────────────────── */

.task-table-wrap {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: 0 10px 28px rgba(31, 37, 33, 0.06);
  min-height: 250px;
  --queue-empty-state-height: 240px;
}
.task-table-wrap > .empty-state {
  height: var(--queue-empty-state-height);
  min-height: var(--queue-empty-state-height);
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.task-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 15px;
}
/* Queue table only — fixed tracks stop async rows from reflowing the
   columns after load. Deliberately excludes .staff-table, whose columns
   carry no width classes and must keep sizing to content. */
.task-table:not(.staff-table) {
  table-layout: fixed;
}
.task-table th,
.task-table td {
  box-sizing: border-box;
}
.task-table thead th {
  background: var(--bg-page);
  text-align: left;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
/* Async queue rows used to make the browser recalculate auto-width columns
   after load. Fixed tracks keep the headers and body locked in place. */
.task-table th.th-severity { width: 11%; }
.task-table th.th-time { width: 11%; }
.task-table th.th-patient { width: 26%; }
.task-table th.th-category { width: 18%; }
.task-table th.th-tags { width: 24%; }
.task-table th.th-open { width: 10%; }
.task-table td.open-cell {
  text-align: right;
  white-space: nowrap;
  padding-right: 18px;
}
.open-task-link {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
}
.task-table tbody tr:hover .open-task-link {
  color: var(--brand);
}
.open-task-link:hover {
  text-decoration: underline;
}
.open-task-arrow {
  display: inline-block;
  margin-left: 2px;
  transition: transform 120ms ease;
}
.task-table tbody tr:hover .open-task-arrow {
  transform: translateX(2px);
}
.task-table tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background 100ms ease, box-shadow 140ms ease;
}
/* No zebra striping — clean white rows + hairline dividers read calmer. */
.task-table tbody tr:hover {
  background: var(--brand-bg);
  box-shadow: 0 4px 14px -4px rgba(31, 37, 33, 0.10);
  z-index: 1;
}
.task-table tbody tr:last-child { border-bottom: none; }
.task-table td {
  padding: 9px 16px;
  vertical-align: middle;
}

/* Recently closed page. Uses the same queue header/table surface so
   recovered closed work scans like normal task work. */
.view-recent-closed { max-width: var(--app-page-max); }
.recent-closed-subtitle {
  margin: 7px 0 0 13px;
  color: var(--text-muted);
  font-size: 13px;
}
.recent-closed-table-wrap { min-height: 220px; }
.recent-closed-table th.th-severity { width: 11%; }
.recent-closed-table th.th-time { width: 14%; }
.recent-closed-table th.th-patient { width: 28%; }
.recent-closed-table th.th-category { width: 18%; }
.recent-closed-table th.th-tags { width: 19%; }
.recent-closed-table th.th-open { width: 10%; }
.recent-closed-time {
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .recent-closed-page-head { align-items: flex-start; }
  .recent-closed-page-actions { justify-content: flex-start; }
}

/* Queue guide is currently unsurfaced, but the modal/list styling remains
   so it can return later in a better contextual home. The unstyled
   .queue-help-menu class is the outside-click guard marker. */
/* The legend renders inside a standard .reassign-modal now — the old
   floating-popover shell (.queue-legend-panel/head/title/close) is
   gone; only the list + tag styles remain. */
.queue-legend-list {
  display: grid;
  gap: 11px;
}
.queue-legend-item {
  display: grid;
  grid-template-columns: minmax(118px, auto) 1fr;
  align-items: center;
  gap: 14px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.35;
}
.queue-legend-icon {
  margin-left: 0;
  font-size: 18px;
}
.queue-legend-assigned,
.queue-legend-other,
.queue-legend-tag {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  white-space: nowrap;
}
.queue-legend-assigned {
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--routing-hub-bg);
  color: var(--routing-hub);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.queue-legend-other {
  color: var(--brand);
  font-weight: 600;
}
.queue-legend-tag {
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--success);
  background: var(--bg-surface);
  color: var(--success);
  font-size: 12px;
  font-weight: 600;
}
.queue-legend-tag-prospect {
  background: var(--urgent-bg);
  color: var(--urgent);
  border-color: var(--urgent);
}
.queue-legend-tag-source {
  background: var(--brand-bg);
  color: var(--brand);
  border-color: transparent;
}
@media (max-width: 520px) {
  .queue-legend-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ── Queue-row badges (2026-05-28) ──────────────────────────────────
 * The PRIORITY (severity), CATEGORY, and Tags-cell badges read as
 * filled/padded pills in the queue table; the wait-timer stays flat text.
 * Detail-view rendering keeps its own filled-pill treatment via the
 * unscoped rules earlier in this file. The left-edge severity stripe
 * (rule above) is the other colored signal.
 */
.task-table .severity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
/* Queue rows already carry a colored left stripe, so the priority marker
 * stays compact and tinted instead of becoming the dominant row element. */
.task-table .severity-badge.severe { background: var(--severe-bg); color: var(--severe); }
.task-table .severity-badge.due    { background: var(--due-bg);    color: var(--due);    }
.task-table .severity-badge.urgent { background: var(--urgent-bg); color: var(--urgent); }
.task-table .severity-badge.normal { background: var(--normal-bg); color: var(--normal); }
.task-table .sev-dot { display: none; }

.task-table .wait-timer {
  display: inline;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: normal;
}
/* Every tier is plain colored text — explicit background:none beats the
   general .wait-timer.* rules (equal specificity → later-wins) so no tier
   picks up a box. Urgency reads via amber (medium) / red (stale) text;
   keeping the whole column box-free stops it jumping row-to-row. */
.task-table .wait-timer.fresh  { background: none; color: var(--text-muted); }
.task-table .wait-timer.short  { background: none; color: var(--text-muted); }
.task-table .wait-timer.medium { background: none; color: var(--due);    }
.task-table .wait-timer.stale  { background: none; color: var(--severe); }
.task-table .wait-timer.none   { color: var(--text-faint); }

.task-table .category-tag {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  background: none;
  color: var(--text-muted);
}
.task-table .category-tag.clinical {
  background: none;
  color: var(--brand);
}
/* No category yet — keep the placeholder dash as flat faint text, not
 * an empty pill. Must follow the rule above (equal specificity). */
.task-table .category-tag--none {
  padding: 0;
  background: none;
  color: var(--text-faint);
  font-weight: 500;
}

.task-table .patient-other-tasks {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  padding: 2px 7px;
  background: var(--brand-bg);
  border-radius: 999px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

/* ── Queue "Tags" cell ───────────────────────────────────────────────
 * Muted "little flag" pills — context, not alarms. Directed, source, and
 * patient-kind tags all stay compact so the row height remains stable. */
.task-table .tags-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 260px;
}
.task-table .status-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.task-table .status-tag--assigned { background: var(--routing-hub-bg); color: var(--routing-hub); font-weight: 700; text-transform: uppercase; }
.task-table .status-tag--source   { background: var(--brand-bg); color: var(--brand); }
.task-table .status-tag--patient  { background: var(--bg-surface); color: var(--success); border-color: var(--success); }
.task-table .status-tag--prospect { background: var(--urgent-bg); color: var(--urgent); border-color: var(--urgent); }
/* Nothing to show — flat faint dash, matching .category-tag--none. */
.task-table .tags-none            { color: var(--text-faint); font-weight: 500; }

.task-table .patient-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
/* ───────────────────────────────────────────────────────────────── */

/* Severity-coloured left edge on each row — drives a quick at-a-glance
   prioritisation pass. Applied as an inset box-shadow on the first cell
   because <tr> borders collapse unreliably under border-collapse. The
   classifySeverity() helper in tasking.js puts the severity-* class on
   the <tr>, in lockstep with the .severity-badge classes below. */
.task-table tbody tr.severity-severe > td:first-child {
  box-shadow: inset 3px 0 0 var(--severe);
}
.task-table tbody tr.severity-due > td:first-child {
  box-shadow: inset 3px 0 0 var(--due);
}
.task-table tbody tr.severity-urgent > td:first-child {
  box-shadow: inset 3px 0 0 var(--urgent);
}
.task-table tbody tr.severity-normal > td:first-child {
  box-shadow: inset 3px 0 0 var(--border-strong); /* faint edge so every row keeps a left margin */
}

.severity-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 12px;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
/* Severe and Due are the "act now" tiers — the pill goes fully filled
   in the severity colour with white text so they leap off the table.
   Urgent / Same-day and Routine stay subtle (pale-bg + dark-text);
   keeping the majority quiet preserves contrast for the loud rows. */
.severity-badge.severe   { background: var(--severe);     color: white;          }
.severity-badge.due      { background: var(--due);        color: white;          }
.severity-badge.urgent   { background: var(--urgent-bg);  color: var(--urgent);  }
.severity-badge.normal   { background: var(--normal-bg);  color: var(--normal);  }
.sev-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
/* Filled-pill variants don't need the dot — the whole pill IS the
   colour now, so the dot becomes visual noise. */
.severity-badge.severe .sev-dot,
.severity-badge.due .sev-dot { display: none; }

.channel-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: white;
}
.channel-chip.intercom { background: var(--channel-intercom); }
.channel-chip.healthie { background: var(--channel-healthie); }
.channel-chip.bask     { background: var(--channel-bask); }
.channel-chip.email    { background: var(--channel-email); }
.channel-chip.outlook  { background: var(--channel-outlook); }
.channel-chip.phone    { background: var(--channel-manual); }
.channel-chip.manual   { background: var(--channel-manual); }
.channel-chip.api      { background: var(--channel-api); }
.channel-chip.unknown  { background: var(--channel-unknown); color: var(--channel-unknown-text); }

/* Outlined variant — used in the Task Source card for channels the
   patient has data in but did NOT inbound through. White fill, colored
   ring + text per channel. Same 32px footprint as the solid chip
   (box-sizing: border-box) so the row aligns vertically with the
   inbound chip next to it. These rules sit AFTER the solid colors
   above so equal-specificity selectors land on the override. */
.channel-chip--secondary {
  border: 1.5px solid;
  box-sizing: border-box;
}
.channel-chip--secondary.intercom { background: white; color: var(--channel-intercom); border-color: var(--channel-intercom); }
.channel-chip--secondary.healthie { background: white; color: var(--channel-healthie); border-color: var(--channel-healthie); }
.channel-chip--secondary.bask     { background: white; color: var(--channel-bask); border-color: var(--channel-bask); }
.channel-chip--secondary.email    { background: white; color: var(--channel-email); border-color: var(--channel-email); }
.channel-chip--secondary.outlook  { background: white; color: var(--channel-outlook); border-color: var(--channel-outlook); }
.channel-chip--secondary.phone    { background: white; color: var(--channel-manual); border-color: var(--channel-manual); }
.channel-chip--secondary.manual   { background: white; color: var(--channel-manual); border-color: var(--channel-manual); }
.channel-chip--secondary.api      { background: white; color: var(--channel-api); border-color: var(--channel-api); }
.channel-chip--secondary.unknown  { background: white; color: var(--channel-unknown-text); border-color: var(--channel-unknown); }

.time-cell { white-space: nowrap; }

/* Waiting-time pill: green/gray/amber/red ramp based on minutes since
 * last_patient_message_at. Tabular-nums keeps the timer aligned across
 * rows so the eye can compare wait times by length. */
.wait-timer {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border-radius: 14px;
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wait-timer.fresh  { background: var(--wait-fresh-bg);  color: var(--wait-fresh-text);  }
.wait-timer.short  { background: var(--wait-short-bg);  color: var(--wait-short-text);  }
.wait-timer.medium { background: var(--wait-medium-bg); color: var(--wait-medium-text); }
.wait-timer.stale  { background: var(--wait-stale-bg);  color: var(--wait-stale-text);  }
.wait-timer.none   { background: transparent; color: var(--text-faint); }

.patient-cell { display: flex; flex-direction: column; line-height: 1.3; gap: 2px; }
/* Queue rows: name + "+N other open tasks" share ONE line so every row stays
   single-line and the column holds a uniform height. Wraps if it must. */
.task-table .patient-cell { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.patient-name { font-size: 14px; font-weight: 600; }

/* "Generated Response" pill — used where a compact draft-ready state needs
   to read as positive without competing with primary actions. */
.draft-ready-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: white;
  background: var(--success);
}
/* Same-patient awareness on the queue (PATIENT_IDENTITY_DESIGN.md §6):
   this patient has other open tasks. Brand-tinted so it catches the
   eye without competing with the red/amber severity badge. */
.patient-other-tasks {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-bg);
  border-radius: 6px;
  padding: 5px 10px;
  line-height: 1.4;
  white-space: nowrap;
}

/* Inline status indicator — replaces the dedicated Status column on
 * the queue table (removed 2026-05-17 because most rows showed the
 * default 'Awaiting reply' and made the column noisy). Only renders
 * for non-triaged rows; tooltip carries the full status label. */
.patient-status-icon {
  display: inline-block;
  margin-left: 6px;
  font-size: 16px;
  line-height: 1;
  cursor: help;
}
.patient-status-icon.reviewed         { color: var(--urgent); }
.patient-status-icon.patient-replied  { color: #be185d; }
.patient-status-icon.pending          { color: var(--text-muted); }
.queue-legend-list .patient-status-icon {
  margin-left: 0;
  font-size: 18px;
}

.category-tag {
  display: inline-block;
  font-size: 14px; font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--normal-bg);
  color: var(--text-primary);
}
.category-tag.routing-hub {
  background: var(--routing-hub-bg);
  color: var(--routing-hub);
}
.category-tag.clinical {
  background: var(--brand-bg);
  color: var(--brand-hover);
}

.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.status-badge.triaged    { background: var(--success-bg); color: var(--success); }
.status-badge.reviewed   { background: var(--urgent-bg);  color: var(--urgent);  }
.status-badge.sent       { background: var(--normal-bg);  color: var(--normal);  }
.status-badge.patient_replied { background: #fce7f3; color: #be185d; }

.due-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: var(--due-bg);
  color: var(--due);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
}

/* ─────────────────────────────────────────────────────────────────
 * Empty state
 * ───────────────────────────────────────────────────────────────── */

.empty-state {
  padding: 60px 40px;
  text-align: center;
}
.empty-state.hidden { display: none; }
.empty-icon {
  display: inline-block;
  width: 56px; height: 56px;
  background: var(--success-bg);
  color: var(--success);
  border-radius: 50%;
  font-size: 30px;
  line-height: 56px;
  margin-bottom: 12px;
}
.empty-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.empty-body { font-size: 13px; color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────────
 * Full-page task detail view (replaces the old side panel)
 * ───────────────────────────────────────────────────────────────── */

.view-detail {
  display: flex;
  flex-direction: column;
  max-width: none;
  /* Was 100vh minus banner+topbar (when those were fixed) so the
     detail view filled the visible area below the bars. Now bars are
     in normal flow above the view, and the user can scroll past them.
     min-height of 100vh-48px means the detail view fills the viewport
     once the bars scroll off — no awkward whitespace at the bottom. */
  min-height: calc(100vh - 48px);
}

/* Base chip styling, kept for the Patient Profile deep-link chips
   (.detail-header-chip + .detail-header-bask). The class name dates
   from when these chips lived in a sticky detail header; the header
   has since been removed but the chip styling still applies inside
   .profile-links. Rename is a future cleanup; the styling itself is
   correct. */
.detail-header-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Bask / Healthie deep-link chip. Rendered inside the Patient Profile
   card when the row carries the relevant id and the tenant has a URL
   template configured. */
.detail-header-bask {
  text-decoration: none;
  font-weight: 600;
  color: var(--brand);
  padding: 3px 8px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
}
.detail-header-bask:hover {
  background: var(--brand-bg);
}

/* Inline warning banner for reply-box issues, such as a failed
   conversation-link check. */
.audit-warning-banner {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--amber-l);
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
}
.audit-warning-banner strong {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Page-level audit card — sits above the Patient Profile /
   Classification row so read-only audit mode does not change either
   card's height. Palette mirrors the muted Healthie source pill. */
.audit-view-card {
  padding: 11px 14px;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
}
.audit-view-card strong {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Dispatch-warning banner — rendered above the reply card in the task
   detail view when an outbound send returned a non-2xx (or threw). The
   task is already closed server-side; this banner is the staff's signal
   that the patient did NOT receive the reply, plus the retry affordance.
   Red palette so it's unambiguous: "this needs attention right now."
   The success variant flips to green after a successful retry. */
.dispatch-warning-banner {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
  border: 1px solid #dc2626;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
}
.dispatch-warning-banner strong {
  font-weight: 700;
}
.dispatch-warning-detail {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-word;
}
.dispatch-warning-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dispatch-warning-btn {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid;
}
.dispatch-warning-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.dispatch-warning-btn-primary {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.dispatch-warning-btn-primary:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}
.dispatch-warning-btn-secondary {
  background: #fff;
  color: #991b1b;
  border-color: #dc2626;
}
.dispatch-warning-btn-secondary:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.06);
}
.dispatch-warning-banner-success {
  background: rgba(16, 185, 129, 0.08);
  color: #065f46;
  border-color: #10b981;
}
.dispatch-warning-banner-success .dispatch-warning-btn-primary {
  background: #10b981;
  border-color: #10b981;
}
.dispatch-warning-banner-success .dispatch-warning-btn-primary:hover:not(:disabled) {
  background: #059669;
  border-color: #059669;
}

/* Legacy-chart banner — rendered at the top of the chart (above the
   two-column detail grid) when the task envelope is synthesized from a
   pre-v2-cutover query_history.id. The chart is always read-only for
   these (the synthesized status is 'closed'); the banner is the visible
   signal that the viewer is looking at historical data. Distinct brand
   palette so it doesn't blur into the amber audit-view banner that may
   also be present in the same chart. */
.legacy-chart-banner {
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--brand-bg);
  color: var(--brand-hover);
  border: 1px solid #c7d8e7;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
}
.legacy-chart-banner strong {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.detail-edit-cat-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}
.detail-edit-cat-btn:hover {
  background: var(--bg-page);
  color: var(--brand);
  border-color: var(--brand);
}
.pencil-icon { font-size: 13px; }

.detail-body {
  flex: 1;
}

/* Two-column grid: ~45% task context (left) / ~55% chat + draft (right).
   Uses `fr` units (not percentages) so the 28px gap reduces the column
   widths instead of overflowing — percentage columns with a gap would push the
   right column ~28px past the sticky header, which is exactly what the
   2026-05-17 bug report described. Collapses to a single column on
   narrow viewports, chat-first. */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  gap: 28px;
  align-items: start;
}
.detail-col-left,
.detail-col-right {
  min-width: 0;  /* prevent grid blowout on long content */
}
@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* Chat is the primary content on mobile — show it first. */
  .detail-col-right { order: -1; }
}

/* Action bar — inline variant for use inside the right column.
   The old sticky variant is kept for any other surface that wants it. */
.detail-action-bar {
  padding: 14px 18px;
  display: flex;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.detail-action-bar.inline {
  position: static;
  box-shadow: none;
}

/* Chat-box container. White on white card with a thin internal divider
   between bubbles. Patient on the left, staff on the right (chat convention).
   Capped at ~480px tall so a long thread scrolls inside the box rather
   than pushing the action bar off-screen. */
.chat-box {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 160px;
  max-height: 480px;
  overflow-y: auto;
}
.chat-box.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Highlight the bubble for the task you're currently working on. Soft
   ring in the muted brand color — visible enough to flag which entry
   the action bar applies to without competing with the bubble content. */
.chat-message.is-current .chat-bubble {
  box-shadow: 0 0 0 1px rgba(49, 95, 138, 0.30);
}

/* System note for workflow events (follow-up created, task closed
   without reply, etc.). Centered, smaller, monochrome — visually
   distinct from patient/staff bubbles. */
.chat-system-note {
  align-self: center;
  max-width: 90%;
  padding: 8px 14px;
  background: var(--bg-page);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.chat-system-note-title {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 4px;
}
.chat-system-note-body {
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
  color: var(--text-primary);
  font-weight: 400;
}

.chat-message {
  display: flex;
  width: 100%;
}
.chat-message.patient { justify-content: flex-start; }
.chat-message.staff   { justify-content: flex-end;   }

.chat-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
}
.chat-message.patient .chat-bubble {
  background: var(--normal-bg);
  border: 1px solid var(--border);
  border-top-left-radius: 4px;
  color: var(--text-primary);
}
.chat-message.staff .chat-bubble {
  background: var(--brand-bg);
  border: 1px solid #c7d8e7;
  border-top-right-radius: 4px;
  color: var(--brand-hover);
}
.chat-bubble-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  margin-bottom: 4px;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
}
.chat-author { letter-spacing: 0.04em; }
.chat-time { font-variant-numeric: tabular-nums; font-weight: 500; text-transform: none; letter-spacing: 0; }
.chat-bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-bubble-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chat-attachment {
  display: block;
  border-radius: 8px;
}
.chat-attachment-img {
  display: block;
  max-width: 180px;
  max-height: 180px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  object-fit: cover;
  cursor: zoom-in;
}
.chat-attachment-file {
  font-size: 12px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: var(--text-primary);
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────
 * Side panel (legacy — superseded by full-page detail view above;
 * kept temporarily for the reassign modal which still uses overlay)
 * ───────────────────────────────────────────────────────────────── */

.side-panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 300;
}
.side-panel-overlay.active { opacity: 1; pointer-events: auto; }

.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 580px; max-width: 100vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  transform: translateX(100%);
  transition: transform 260ms ease;
  z-index: 310;
  display: flex; flex-direction: column;
}
.side-panel.active { transform: translateX(0); }

.side-panel-head {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.side-panel-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  border: none; background: transparent;
  font-size: 26px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.side-panel-close:hover { background: var(--bg-page); color: var(--text-primary); }
.side-panel-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.side-panel-title {
  font-size: 17px;
  font-weight: 600;
  margin-top: 4px;
}

.side-panel-body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  flex: 1;
}

.detail-section { margin-bottom: 22px; }
.detail-section:last-child { margin-bottom: 0; }
.detail-section-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
}

/* When chat-box is nested inside a detail-card (the unified "label
   inside the card" layout, 2026-05-23), drop the chat-box's own frame
   so the outer card carries the containment and the two boxes don't
   nest visually. The functional bits (max-height, overflow, flex
   layout) stay on .chat-box. */
.detail-card > .chat-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.detail-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
.detail-meta-item { display: flex; flex-direction: column; gap: 3px; }
.detail-meta-key { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.detail-meta-val { font-size: 13px; }

/* Legacy single-block message rendering — superseded by .chat-box +
   .chat-bubble above. Kept temporarily in case any other surface
   reaches for it. */
.detail-message-box {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  white-space: pre-wrap;
  line-height: 1.55;
}

.detail-ai-box {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}
/* Vertical-stack field layout: each Classification field is a small
   uppercase label sitting above its control. The prior side-by-side
   layout (label-left, value-right) made the small Category pill and
   the larger Urgency select compete for the same row, and the row
   asymmetry read as broken. Stacking gives both controls their own
   row at full width, which also fills more of the card's height so
   it sits better beside the taller Patient Profile card. */
.detail-ai-line {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 0;
  font-size: 14px;
}
.detail-ai-line:first-child { padding-top: 4px; }
.detail-ai-line:last-child  { padding-bottom: 4px; }
.detail-ai-line + .detail-ai-line { border-top: 1px solid var(--border); }
.ai-key {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ai-val { font-weight: 500; }
.ai-val-category,
.ai-val-urgency {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Urgency select stretches to fill the value row — gives the control
   visible presence at full card width rather than hugging its own
   content size. */
.ai-val-urgency .detail-urgency-select { flex: 1; }
/* Inside the Classification card, the category pill needs to read at
   parity with the surrounding 14px row text. The base .category-tag is
   shared with the queue list cells (still 11px), so scope the bump to
   only its in-card placement. */
.ai-val-category .category-tag {
  font-size: 13px;
  padding: 4px 10px;
}

.workflow-actions-card {
  border-color: var(--border-strong);
}
.workflow-action-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.workflow-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.workflow-action-row--prescription {
  background: white;
  border-color: var(--border-strong);
}
.workflow-action-row--prescription-change {
  grid-template-columns: 1fr;
  background: white;
  border-color: var(--border-strong);
}
.workflow-action-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.workflow-action-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.workflow-action-heading-text {
  min-width: 0;
}
.workflow-action-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0;
}
.workflow-action-badge--rx {
  color: white;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.12);
}
.workflow-action-badge--prescription {
  background: var(--pull-provider-accent);
}
.workflow-action-badge--prescription-change {
  background: var(--severe);
}
.workflow-action-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.workflow-action-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.workflow-action-status {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
}
.workflow-action-status--active {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--border-strong);
}
.workflow-action-status--integration_pending {
  color: var(--urgent);
  background: var(--urgent-bg);
  border-color: var(--border-strong);
}
.workflow-action-row--prescription .workflow-action-status--integration_pending,
.workflow-action-row--prescription-change .workflow-action-status--integration_pending {
  color: var(--severe);
  background: var(--severe-bg);
}
.workflow-action-status--disabled {
  color: var(--text-muted);
}
.workflow-action-description,
.workflow-action-meta {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.workflow-action-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.workflow-action-field {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.workflow-standing-orders {
  margin-top: 2px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.workflow-standing-orders-label {
  margin-bottom: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
}
.workflow-standing-orders-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.workflow-action-btn {
  min-height: 38px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: white;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
}
.workflow-action-btn:hover:not(:disabled) {
  background: var(--brand-hover);
}
.workflow-action-btn:disabled {
  color: var(--text-muted);
  background: var(--bg-surface);
  border-color: var(--border);
  cursor: not-allowed;
}
.workflow-rx-change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}
.workflow-rx-summary {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.workflow-rx-summary-title {
  margin-bottom: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.workflow-rx-summary-lines,
.workflow-rx-summary-empty {
  color: var(--text-primary);
  font-size: 0.875rem;
  line-height: 1.45;
}
.workflow-rx-summary-empty {
  color: var(--text-muted);
}
.workflow-rx-change-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  color: var(--text-muted);
  font-weight: 700;
}
.workflow-decision-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.workflow-action-btn--approve {
  border-color: var(--success);
  background: var(--success);
}
.workflow-action-btn--approve:hover:not(:disabled) {
  background: var(--due);
}
.workflow-action-btn--deny {
  color: var(--text-primary);
  background: white;
  border-color: var(--border-strong);
}
.workflow-action-btn--deny:hover:not(:disabled) {
  background: var(--bg-page);
}
.workflow-action-btn--approve:disabled,
.workflow-action-btn--deny:disabled {
  color: var(--text-muted);
  background: var(--bg-surface);
  border-color: var(--border);
}
@media (max-width: 720px) {
  .workflow-action-row {
    grid-template-columns: 1fr;
  }
  .workflow-rx-change {
    grid-template-columns: 1fr;
  }
  .workflow-rx-change-arrow {
    min-height: 20px;
  }
  .workflow-action-btn {
    width: 100%;
  }
  .workflow-decision-actions {
    flex-direction: column;
  }
}

.detail-urgency-select {
  appearance: auto;
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  cursor: pointer;
}
.detail-urgency-select:disabled {
  opacity: 0.6;
  cursor: progress;
}
.urgency-edited-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-page);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.detail-draft-textarea {
  width: 100%;
  min-height: 140px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
}
.detail-draft-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(49, 95, 138, 0.12);
}

.detail-internal-note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  white-space: pre-wrap;
  color: #78350f;
}

.detail-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 8px;
}
.action-btn {
  padding: 9px 18px;
  font-size: 13px; font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: white;
  cursor: pointer;
  transition: all 120ms ease;
}
.action-btn:hover { background: var(--bg-page); }
.action-btn.primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.action-btn.primary:hover { background: var(--brand-hover); }
.action-btn.warning {
  background: var(--due-bg);
  color: var(--due);
  border-color: #fed7aa;
}
.action-btn.warning:hover { background: #fed7aa; }
.action-btn.neutral {
  background: var(--bg-page);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.action-btn.neutral:hover { background: white; border-color: var(--text-muted); }
.action-btn.ghost {
  background: transparent;
  color: var(--brand);
  border-color: transparent;
}
.action-btn.ghost:hover { background: var(--bg-page); }
.action-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Shared form controls for admin surfaces and modals. Keep new forms on
 * these classes before adding view-specific input/select styling. */
.app-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.app-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.app-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.app-input,
.app-select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-surface);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.app-input:focus,
.app-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(49, 95, 138, 0.12);
}

/* Release to queue — deliberately a quiet, muted link, not a button.
   It is a rare super-user emergency action; it should be reachable
   but never draw the eye or invite routine use. */
.release-link {
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-faint);
  text-decoration: underline;
  cursor: pointer;
}
.release-link:hover { color: var(--text-muted); }
.release-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

/* Small inline chip showing how many follow-ups are staged on the
   currently-open task. Sits next to the Follow-up button in the left
   column. */
.followup-count-chip {
  align-self: center;
  padding: 4px 10px;
  background: var(--bg-page);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong);
}

/* "Care Station suggests" sidecar — white background so the draft
   text reads clearly. The dashed border carries the "this is optional"
   signal so staff doesn't mistake it for the reply they have to send. */
.suggestion-card {
  background: white;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.suggestion-text {
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text-primary);
}
.suggestion-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
}
.suggestion-status[hidden] {
  display: none;
}
.suggestion-status--ready {
  color: var(--brand);
  border-color: var(--border-strong);
}
.suggestion-status--error {
  color: var(--text-muted);
}
.suggestion-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  flex: 0 0 auto;
  animation: suggestion-spin 800ms linear infinite;
}
@keyframes suggestion-spin {
  to { transform: rotate(360deg); }
}
.suggestion-actions {
  display: flex;
  justify-content: flex-end;
}

/* Clinical tripwire card — rendered in place of the suggestion card when
   the safety pipeline matched a watchlist keyword. Red palette + alert
   header signal "do not auto-respond"; no insert button and no thumbs
   row exist on this card on purpose (see tasking.js suggestionSection
   branch). The reply box below is untouched — staff still hand-write
   and send manually. */
.tripwire-card {
  border: 1px solid var(--severe);
  background: var(--severe-bg);
}
.tripwire-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--severe);
  margin-bottom: 12px;
}
.tripwire-icon {
  font-size: 18px;
  line-height: 1;
}
.tripwire-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: white;
  border: 1px solid var(--severe);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.tripwire-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.tripwire-key {
  flex: 0 0 130px;
  color: var(--text-muted);
  font-weight: 500;
}
.tripwire-val {
  color: var(--text-primary);
}
.tripwire-val-strong {
  font-weight: 700;
  font-size: 14px;
}
.tripwire-val-tag {
  background: var(--severe-bg);
  color: var(--severe);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tripwire-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.tripwire-block-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.tripwire-block-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
}

/* Right-column reply textarea — taller than the old draft box so staff
   can compose a real reply without scrolling inside the field. */
.detail-reply-textarea {
  width: 100%;
  min-height: 260px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 14px;
  /* Darker grey border so the reply textarea reads as the focus area
     of the right column. Previously used the default --border which
     was too light and made the textarea blend into the page. */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  resize: vertical;
}
.detail-reply-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(49, 95, 138, 0.12);
}
.detail-reply-disabled-wrap {
  position: relative;
}
.detail-reply-textarea.is-disabled,
.detail-reply-textarea:disabled {
  background: var(--bg-page);
  color: var(--text-muted);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 1;
  resize: none;
}
.detail-reply-textarea.is-disabled::placeholder,
.detail-reply-textarea:disabled::placeholder {
  color: var(--text-faint);
}
.detail-reply-disabled-icon {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: help;
}
.detail-reply-disabled-icon svg {
  width: 18px;
  height: 18px;
}
.detail-reply-disabled-icon:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.reply-target-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.reply-target-label {
  font-weight: 600;
  color: var(--text-muted);
}
.reply-target-static {
  color: var(--text-primary);
  font-weight: 600;
}

/* Right-column action bar now hosts BOTH Close (no reply) on the left
   and Send on the right — completion actions grouped at the bottom of
   the reply column. justify-content: space-between separates them so
   they don't crowd together. */
.detail-action-bar-send {
  justify-content: space-between;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────────
 * Send-action tiles (2026-05-23 redesign).
 *
 * Two side-by-side tiles, one per action. Two-step arm-then-commit:
 * first click on a tile arms it (turns blue, swaps the hint for
 * "Click again to …"); second click on the same tile commits.
 * Clicking the OTHER tile while one is armed re-arms to that one —
 * no commit — so the staffer can switch choices without losing
 * reply text.
 *
 * Replaces the earlier dropdown design (one neutral button that
 * opened a list above it); with only two options, putting both on
 * screen is clearer than hiding them behind a click.
 * ───────────────────────────────────────────────────────────────── */

.send-action-area {
  width: 100%;
}
.send-action-tiles {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}
.send-action-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 20px 22px;
  font-family: inherit;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-page);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 140ms ease;
}
.send-action-tile:hover:not(:disabled) {
  border-color: var(--text-muted);
  background: white;
}
.send-action-tile:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.send-action-tile-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  color: var(--text-muted);
}
.send-action-tile-label {
  font-size: 17px;
  font-weight: 600;
  color: inherit;
}
.send-action-tile-status {
  display: grid;
  width: 100%;
}
.send-action-tile-status > * {
  grid-area: 1 / 1;
}
.send-action-tile-hints {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.send-action-tile-hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Primary / secondary variants give each tile a distinct identity in
   the neutral state. Send is the inviting "do it" path (subtle
   brand-blue tint + colored icon); Close is the reserved "exit" path
   (plain neutral palette). Armed state overrides both — once a tile is
   armed it goes full brand-blue regardless of variant. */
.send-action-tile-primary {
  background: var(--brand-bg);
  border-color: #c7d8e7;
}
.send-action-tile-primary:hover:not(:disabled) {
  background: #dfeaf4;
  border-color: var(--brand);
}
.send-action-tile-primary .send-action-tile-icon {
  color: var(--brand);
}
.send-action-tile-secondary {
  background: var(--bg-surface);
  border-color: var(--border-strong);
}
.send-action-tile-secondary:hover:not(:disabled) {
  background: var(--bg-page);
  border-color: var(--text-muted);
}
.send-action-tile-secondary .send-action-tile-icon {
  color: var(--text-muted);
}

/* "Click again to …" microcopy is part of the armed-state swap.
   The status area reserves the neutral hint height, then swaps
   visibility so arming a tile doesn't resize the action row. */
.send-action-tile-confirm {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: inherit;
  opacity: 0.92;
  visibility: hidden;
}
.send-action-tile.armed {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.send-action-tile.armed:hover:not(:disabled) {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.send-action-tile.armed .send-action-tile-icon { color: white; }
.send-action-tile.armed .send-action-tile-hints { visibility: hidden; }
.send-action-tile.armed .send-action-tile-confirm { visibility: visible; }

/* Patient-facing toggle row in the spawn-followup modal. Renders as
   a flex row so the checkbox sits next to the description text. */
.spawn-followup-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}
.spawn-followup-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.sandbox-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--bg-banner-strong);
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────
 * Toast
 * ───────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--text-primary);
  color: white;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 500;
  max-width: 380px;
}
.toast.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.toast.success { background: var(--success); }
.toast.warn { background: var(--urgent); }
.toast.error { background: var(--severe); }

/* ─────────────────────────────────────────────────────────────────
 * Reassign modal
 * ───────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 400;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

.reassign-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 12px));
  width: 460px; max-width: calc(100vw - 32px);
  /* Centered + position:fixed means viewport overflow is unreachable in
     BOTH directions (page scroll can't help), so the dialog must never
     exceed the viewport: cap it and let the body scroll between the
     pinned head and foot. */
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 410;
}
.reassign-modal.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.reassign-head {
  padding: 18px 22px 12px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
}
.reassign-title { font-weight: 600; font-size: 15px; }
.reassign-close {
  width: 30px; height: 30px;
  border: none; background: transparent;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.reassign-body {
  padding: 18px 22px;
  /* min-height: 0 lets the flex child actually shrink below its content
     so the overflow scroll engages when the modal hits its viewport cap. */
  min-height: 0;
  overflow-y: auto;
}
.reassign-helper {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--bg-page);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-primary);
}
.reassign-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.reassign-label--spaced {
  margin-top: 12px;
}
.reassign-select, .reassign-note {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  font-family: inherit;
}
.reassign-note { min-height: 120px; resize: vertical; }
.chart-note-textarea { min-height: 180px; }

.bundle-send-copy {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}
.bundle-send-list {
  display: grid;
  gap: 8px;
}
.bundle-send-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
}
.bundle-send-label {
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bundle-send-state {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

/* Manual task entry page — promoted from a modal so the form cannot
   vanish from backdrop clicks or an adjacent Cancel/Create misclick. */
.manual-task-view {
  min-height: calc(100vh - 48px);
}
.manual-task-page {
  max-width: var(--app-page-max);
  margin: 0 auto;
  padding: 0;
}
.manual-task-page-head {
  position: relative;
  margin-bottom: 16px;
  padding-left: 13px;
}
.manual-task-page-head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--channel-api) 100%);
  box-shadow: 0 1px 2px rgba(31, 37, 51, 0.12);
}
.manual-task-title {
  margin: 0;
  font-weight: 750;
  color: var(--text-primary);
}
.manual-task-subtitle {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.4;
}
.manual-task-panel {
  padding: 20px 22px 18px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.manual-task-panel .reassign-label {
  margin-bottom: 7px;
  color: var(--text-primary);
  letter-spacing: 0.06em;
}
.manual-task-optional-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.manual-task-optional-note {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.manual-task-panel .reassign-select,
.manual-task-panel .reassign-note {
  display: block;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.manual-task-panel .reassign-select:focus,
.manual-task-panel .reassign-note:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}
.manual-task-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 14px 18px;
  align-items: start;
}
.manual-task-field {
  min-width: 0;
}
.manual-task-name-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.manual-task-note-field {
  grid-column: 2;
}
.manual-task-note-field {
  grid-row: 1 / span 6;
}
.manual-task-panel .manual-task-note-field .reassign-note {
  min-height: 232px;
}
.manual-task-choice-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.manual-task-choice {
  position: relative;
  min-width: 0;
}
.manual-task-choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.manual-task-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}
.manual-task-choice input:focus-visible + span {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}
.manual-task-choice input:checked + span {
  border-color: var(--brand);
  background: var(--brand-bg);
  color: var(--brand-hover);
}
.manual-task-tiebreaker {
  grid-column: 1 / -1;
}
.manual-task-tiebreaker-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}
.manual-task-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}
.manual-task-create-btn {
  min-width: 180px;
  min-height: 42px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius);
}
.create-task-modal {
  width: 760px;
}
.create-task-modal .reassign-head {
  padding: 20px 22px 14px;
}
.create-task-modal .reassign-title {
  font-size: 16px;
  font-weight: 750;
  color: var(--text-primary);
}
.create-task-body {
  padding: 20px 22px 18px;
}
.create-task-body .release-body-line {
  margin: 0 0 18px;
  padding: 10px 12px;
  background: var(--brand-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.create-task-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 15px 20px;
  align-items: start;
}
.create-task-field {
  min-width: 0;
}
.create-task-note-field {
  grid-column: 2;
  grid-row: 1 / span 3;
}
.create-task-modal .reassign-label {
  margin-bottom: 7px;
  color: var(--text-primary);
  letter-spacing: 0.06em;
}
.create-task-modal .reassign-select,
.create-task-modal .reassign-note {
  display: block;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.create-task-modal .reassign-select:focus,
.create-task-modal .reassign-note:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-bg);
}
.create-task-note-field .reassign-note {
  min-height: 220px;
}
.create-task-modal .reassign-foot {
  padding: 14px 22px 18px;
}
.create-task-modal .reassign-confirm {
  min-width: 160px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--radius);
}
@media (max-width: 760px) {
  .manual-task-page {
    padding: 0;
  }
  .manual-task-page-head {
    margin-bottom: 12px;
  }
  .manual-task-grid,
  .manual-task-name-row,
  .manual-task-tiebreaker-grid {
    grid-template-columns: 1fr;
  }
  .manual-task-tiebreaker,
  .manual-task-note-field {
    grid-column: auto;
  }
  .manual-task-note-field {
    grid-row: auto;
  }
  .manual-task-panel .manual-task-note-field .reassign-note {
    min-height: 120px;
  }
  .manual-task-actions {
    justify-content: stretch;
  }
  .manual-task-create-btn {
    width: 100%;
  }
  .create-task-grid {
    grid-template-columns: 1fr;
  }
  .create-task-note-field {
    grid-column: auto;
    grid-row: auto;
  }
  .create-task-note-field .reassign-note {
    min-height: 130px;
  }
  .create-task-modal .reassign-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .create-task-modal .reassign-confirm,
  .create-task-modal .reassign-cancel {
    width: 100%;
    min-height: 40px;
  }
}
.reassign-foot {
  padding: 14px 22px 18px;
  display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--border);
}
.reassign-cancel, .reassign-confirm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 14px; font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border);
}
.reassign-cancel { background: white; }
.reassign-cancel:hover { background: var(--bg-page); }
.reassign-confirm {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.reassign-confirm:hover { background: var(--brand-hover); }

/* ─────────────────────────────────────────────────────────────────
 * Reports & Operations view (super-user)
 * ───────────────────────────────────────────────────────────────── */

.events-header {
  position: relative;
  margin-bottom: 16px;
  padding-left: 13px;
}
.events-title {
  position: relative;
  font-weight: 700;
  margin: 0;
}
.events-title::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 0.12em;
  bottom: 0.12em;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-hover) 100%);
  box-shadow: 0 1px 2px rgba(31, 37, 33, 0.12);
}
.events-subtitle { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }

.events-subtabs {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.events-subtab {
  border: 1px solid transparent;
  background: transparent;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 120ms ease;
}
.events-subtab:hover {
  background: var(--bg-page);
  color: var(--text-primary);
}
.events-subtab.active {
  background: var(--brand-bg);
  color: var(--brand);
  border-color: #c7d8e7;
}
.events-subtab-count { font-size: 11px; opacity: 0.7; margin-left: 4px; }

/* Staff sub-tabs. Visual twin of .events-subtab, but a separate
 * class so the two tab systems stay isolated (showEventsView sweeps
 * '.events-subtab' globally; these must not be caught by that). */
.admin-subtabs {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.admin-subtab {
  border: 1px solid transparent;
  background: transparent;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 120ms ease;
}
.admin-subtab:hover {
  background: var(--bg-page);
  color: var(--text-primary);
}
.admin-subtab.active {
  background: var(--brand-bg);
  color: var(--brand);
  border-color: #c7d8e7;
}

/* ─────────────────────────────────────────────────────────────────
 * Staff admin view (super-user)
 * ───────────────────────────────────────────────────────────────── */

.staff-header {
  position: relative;
  margin-bottom: 16px;
  padding-left: 13px;
}
/* Title mirrors .queue-title — brand accent bar + same scale — for
 * cross-view consistency. */
.staff-title {
  position: relative;
  font-weight: 700;
  margin: 0;
}
.staff-title::before {
  content: '';
  position: absolute;
  left: -13px; top: 0.12em; bottom: 0.12em;
  width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-hover) 100%);
  box-shadow: 0 1px 2px rgba(31, 37, 33, 0.12);
}
.staff-subtitle { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }

.admin-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.staff-invite-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.staff-card-head { margin-bottom: 10px; }
.staff-card-title { font-size: 18px; font-weight: 700; margin: 0; color: var(--text-primary); }
.staff-card-sub { font-size: 13px; color: var(--text-muted); margin: 3px 0 0; }

.staff-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 14px;
}
.staff-form-field { display: flex; flex-direction: column; }
.staff-form-field-full { grid-column: 1 / -1; }
.staff-form-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.staff-form-optional {
  font-weight: 400;
  color: var(--text-faint);
  font-size: 11px;
}
.staff-form-field input,
.staff-form-field select {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.staff-form-field input:focus,
.staff-form-field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(49, 95, 138, 0.12);
}

.staff-form-actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 9px;
}
.staff-form-submit {
  background: var(--brand);
  color: white;
  border: 1px solid var(--brand);
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms ease;
}
.staff-form-submit:hover { background: var(--brand-hover); }
.staff-form-submit:disabled {
  background: var(--text-faint);
  border-color: var(--text-faint);
  cursor: not-allowed;
}
.staff-form-msg { font-size: 13px; line-height: 1.45; }
.staff-form-msg.ok  { color: var(--success); }
.staff-form-msg.err { color: var(--severe); }

.staff-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.staff-refresh-btn {
  background: white;
  border: 1px solid var(--border);
  color: var(--text-muted);
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 120ms ease;
}
.staff-refresh-btn:hover {
  color: var(--text-primary);
  background: var(--bg-page);
}

.staff-list-wrap {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: none;
  min-height: 200px;
}
.staff-table {
  min-width: 920px;
}
.staff-table th, .staff-table td { vertical-align: middle; }
.staff-table td.staff-name-cell { font-weight: 600; }
.staff-table td.staff-email-cell { color: var(--text-muted); font-size: 14px; }
.staff-table td.staff-meta-cell { color: var(--text-muted); font-size: 14px; }

.staff-status-dot {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.staff-status-dot::before {
  content: ''; flex: none;
  width: 8px; height: 8px; border-radius: 999px;
}
.staff-status-dot.active::before  { background: var(--success); }
.staff-status-dot.pending::before { background: var(--due); }

.staff-role-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  background: var(--brand-bg);
  color: var(--brand);
  border: 1px solid #c7d8e7;
}
.staff-role-badge.non-clinical {
  background: var(--routing-hub-bg);
  color: var(--routing-hub);
  border-color: #d4dbe6;
}

.staff-name-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.staff-name-display { font-weight: 600; font-size: 15px; }
.staff-profile-id {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
}

.staff-role-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.staff-flag-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.staff-flag-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.staff-flag-checkbox input[type=checkbox] {
  width: 13px; height: 13px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--brand);
}
.staff-flag-readonly {
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  border: 1px dashed var(--border);
}

.staff-editor-row > td {
  background: var(--bg-page);
  border-top: 1px solid var(--border);
  padding: 16px 18px;
}
.staff-editor-form {
  max-width: 880px;
}
.staff-editor-note,
.staff-editor-actions {
  grid-column: 1 / -1;
}
.staff-editor-note {
  padding: 10px 12px;
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.staff-editor-flags {
  justify-content: flex-end;
}
.staff-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

/* ── License chips + state type-ahead — shared by the licensed-states
 * modal. Chips show held licenses; the type-ahead powers the modal's
 * single-state and compact home-state pickers. */
.license-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.license-chips-empty { font-size: 12px; color: var(--text-faint); }
.license-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 2px 4px 2px 9px;
}
.license-chip.suspended {
  background: var(--bg-page);
  color: var(--text-faint);
  border-style: dashed;
}
.license-chip-state { letter-spacing: 0.3px; }
.license-chip-meta { font-weight: 500; font-size: 11px; color: var(--text-muted); }
.license-chip.suspended .license-chip-meta { color: var(--text-faint); }
.license-chip-status {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  padding: 0 6px;
  cursor: pointer;
}
.license-chip-status:hover { color: var(--brand); }
.license-chip-remove {
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 2px 4px;
  cursor: pointer;
}
.license-chip-remove:hover { color: var(--severe); background: var(--severe-bg); }
.license-typeahead { position: relative; }
.license-typeahead-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 20;
  min-width: 200px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}
.license-typeahead-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
}
.license-typeahead-item:hover { background: var(--brand-bg); color: var(--brand); }
.license-typeahead-code { font-weight: 600; color: var(--text-muted); }
.license-typeahead-item:hover .license-typeahead-code { color: var(--brand); }
.license-expiry {
  font-family: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  color: var(--text-primary);
  outline: none;
}
.license-expiry:focus { border-color: var(--brand); background: var(--bg-surface); }

/* Needs-location pre-flight card (#7c) — patients on an open clinical/
 * provider task whose state isn't resolved yet. Warning-toned (orange),
 * hidden by JS when the bucket is empty. */
.license-needs-location {
  border: 1px solid var(--due);
  background: var(--due-bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.needs-location-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #9a3412;
  cursor: pointer;
  user-select: none;
}
.needs-location-head:focus-visible { outline: 2px solid var(--due); outline-offset: 2px; border-radius: 4px; }
.needs-location-chevron { flex-shrink: 0; font-size: 11px; line-height: 1.5; }
.needs-location-title { flex: 1 1 auto; min-width: 0; }
.needs-location-toggle { flex-shrink: 0; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.needs-location-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
/* The `hidden` attribute on the list must beat the author display:flex above
 * (UA [hidden]{display:none} loses to a class selector), so override it here. */
.needs-location-list[hidden] { display: none; }
.needs-location-item { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.needs-location-left { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.needs-location-name { font-weight: 600; color: var(--text-primary); }
.needs-location-meta { color: var(--text-muted); text-transform: capitalize; white-space: nowrap; }
/* Observed state(s). Kept as bold text, not a pill, so the row doesn't
 * gain background density on top of the amber card. */
.needs-location-state { font-weight: 700; letter-spacing: 0.02em; color: var(--text-primary); }
.needs-location-state.conflict { color: #9a3412; }
.needs-location-state.empty { font-weight: 500; font-style: italic; letter-spacing: 0; color: var(--text-muted); }

/* Licensed-states modal — built on the .reassign-modal frame; these style
 * the body contents (sections, the state picker, the add rows). Replaces
 * the old in-row drawer. */
.license-modal { width: 540px; }
.license-modal-section { margin-bottom: 18px; }
.license-modal-section:last-child { margin-bottom: 0; }
.license-modal-label {
  font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;
}
.license-modal-hint { font-weight: 500; font-size: 12px; color: var(--text-muted); }
.license-modal-note { font-size: 13px; color: var(--text-muted); }
.license-add-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.license-field { display: flex; flex-direction: column; gap: 4px; }
.license-field-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.license-picker-input,
.license-modal .license-expiry {
  font-family: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-primary); outline: none;
}
.license-picker-input { width: 220px; }
.license-modal .license-expiry { width: 150px; }
.license-picker-input:focus,
.license-modal .license-expiry:focus {
  border-color: var(--brand); box-shadow: 0 0 0 2px rgba(49, 95, 138, 0.12);
}
.license-add-btn { align-self: flex-end; }

/* "Manage licenses (N)" trigger in the roster's role cell. */
.staff-license-btn {
  margin-top: 2px;
  align-self: flex-start;
  background: var(--brand-bg);
  color: var(--brand);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}
.staff-license-btn:hover { background: #dbeafe; }

.staff-status-stack { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.staff-status-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.staff-link-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand);
  cursor: pointer;
}
.staff-link-btn:hover { text-decoration: underline; }
.staff-link-btn:disabled { color: var(--text-faint); cursor: default; text-decoration: none; }
.staff-link-btn.danger { color: var(--severe); }

.events-refresh-btn {
  margin-left: auto;
  background: white;
  border: 1px solid var(--border);
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 120ms ease;
}
.events-refresh-btn:hover { background: var(--bg-page); color: var(--text-primary); }

.events-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.events-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.events-filter-select {
  padding: 5px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  cursor: pointer;
}
.events-filter-input {
  flex: 1;
  min-width: 200px;
  padding: 5px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
}
.events-filter-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(49, 95, 138, 0.1);
}
.events-filter-status {
  font-size: 12px;
  color: var(--text-muted);
}

.events-body {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-card);
}

.events-load-more-row {
  text-align: center;
  margin-top: 12px;
}
.events-load-more-btn {
  background: white;
  border: 1px solid var(--border);
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 120ms ease;
}
.events-load-more-btn:hover:not(:disabled) {
  background: var(--bg-page);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.events-load-more-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.events-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 13px;
}
.events-table thead th {
  background: var(--bg-page);
  text-align: left;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.events-table tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.events-table tbody tr:hover { background: var(--bg-page); }
.events-table tbody tr:last-child { border-bottom: none; }
.events-table td {
  padding: 10px 12px;
  vertical-align: middle;
}
.events-table th.num,
.events-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.events-section-label {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Conversations subtab — operational monitor inside the existing
   events surface. Keep it flat: the events body supplies the frame. */
.conversations-panel {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.conversations-section {
  min-width: 0;
}
.conversations-section .events-section-label {
  margin-top: 0;
}
.conversations-table tbody tr {
  cursor: default;
}
.conversations-table tbody tr:hover {
  background: transparent;
}
.conversations-table a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.conversations-table a:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}
.conversations-empty {
  padding: 16px 12px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Identity-review subtab — near-match cards (PATIENT_IDENTITY_DESIGN
   §7). Each card pairs a provisional record with the existing patient
   it might be, and offers Merge / Keep-separate. */
.identity-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.identity-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
}
.identity-card-reason { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.identity-card-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.identity-card-bodies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.identity-patient { background: var(--bg-surface); padding: 12px 14px; }
.identity-patient-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.identity-patient-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.identity-patient-dob { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.identity-key-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--text-primary);
}
.identity-key-list li { padding: 2px 0; word-break: break-all; }
.identity-key-chan { color: var(--text-muted); }
.identity-key-empty { color: var(--text-faint); font-style: italic; }
.identity-card-actions {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.identity-merge-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: white;
  cursor: pointer;
}
.identity-merge-btn:hover:not(:disabled) {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.identity-keep-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--text-muted);
  cursor: pointer;
}
.identity-keep-btn:hover:not(:disabled) {
  border-color: var(--text-muted);
  color: var(--text-primary);
}
.identity-merge-btn:disabled,
.identity-keep-btn:disabled { opacity: 0.5; cursor: default; }

.source-id-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.source-id-summary-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.source-id-summary-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.source-id-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.source-id-toggle input {
  margin: 0;
}

.source-id-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.source-id-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
}
.source-id-patient-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.source-id-patient-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.source-id-key-list {
  display: grid;
  gap: 1px;
  background: var(--border);
}
.source-id-key-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-surface);
}
.source-id-key-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.source-id-key-chip {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  background: var(--bg-page);
}
.source-id-key-value {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--text-primary);
}
.source-id-key-time,
.source-id-key-usage {
  font-size: 12px;
  color: var(--text-muted);
}
.source-id-key-action {
  display: flex;
  justify-content: flex-end;
}
.source-id-retire-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--text-muted);
  cursor: pointer;
}
.source-id-retire-btn:hover:not(:disabled) {
  border-color: var(--severe);
  color: var(--severe);
}
.source-id-retire-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 720px) {
  .source-id-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .source-id-key-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .source-id-key-action {
    justify-content: flex-start;
  }
}

.events-time {
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.events-id {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--text-faint);
}
.events-preview {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.events-reason {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
}
.events-reason.ok      { background: var(--success-bg); color: var(--success); }
.events-reason.skipped { background: var(--normal-bg);  color: var(--normal);  }

/* Learning-signal subtab — three small aggregate cards. Layout is
   a CSS grid: side-by-side on wide screens, stacked on narrow. */

.learning-summary {
  padding: 12px 16px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.learning-summary b { color: var(--text-primary); font-weight: 600; }

.productivity-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.productivity-window-row .events-refresh-btn {
  margin-left: 0;
}
.productivity-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 10px;
}
.productivity-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 12px 13px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.productivity-tile.good { border-left-color: var(--success); }
.productivity-tile.watch { border-left-color: var(--due); }
.productivity-tile.neutral { border-left-color: var(--brand); }
.productivity-tile-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.productivity-tile-value {
  font-size: 27px;
  line-height: 1;
  font-weight: 760;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.productivity-tile-detail {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.productivity-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.25fr) minmax(300px, 1fr) minmax(300px, 1fr);
  gap: 12px;
}
.productivity-card-wide { grid-column: span 2; }
.productivity-card {
  min-width: 0;
  border-top: 3px solid var(--brand-bg);
}
.productivity-card .learning-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.productivity-highlight-list,
.productivity-staff-list,
.productivity-day-list,
.productivity-mix-list,
.productivity-owner-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.productivity-highlight {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
}
.productivity-highlight-rank,
.productivity-staff-rank {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brand-bg);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.productivity-highlight-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.productivity-highlight-main span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.productivity-highlight-main strong {
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.productivity-highlight-main small {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.productivity-highlight-value {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: white;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.productivity-staff-row {
  display: grid;
  grid-template-columns: 32px minmax(160px, 1fr) minmax(180px, 1.2fr) minmax(260px, 1.4fr);
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}
.productivity-staff-person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.productivity-staff-person strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.productivity-staff-person span {
  font-size: 12px;
  color: var(--text-muted);
}
.productivity-staff-score {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.productivity-score-head,
.productivity-mix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.productivity-score-head strong,
.productivity-mix-head strong {
  color: var(--text-primary);
  font-size: 13px;
}
.productivity-score-track {
  height: 8px;
  border-radius: 999px;
  background: var(--normal-bg);
  overflow: hidden;
}
.productivity-score-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent-strip));
}
.productivity-staff-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 6px;
}
.productivity-staff-metrics span {
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.productivity-staff-metrics strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.productivity-forecast {
  display: grid;
  gap: 10px;
}
.productivity-forecast-main {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--bg-page);
  display: grid;
  gap: 3px;
}
.productivity-forecast-main.good { background: var(--success-bg); border-color: var(--success); }
.productivity-forecast-main.watch { background: var(--due-bg); border-color: var(--due); }
.productivity-forecast-main strong {
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.productivity-forecast-label,
.productivity-forecast-main span {
  font-size: 12px;
  color: var(--text-muted);
}
.productivity-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.productivity-mini-grid div,
.productivity-capacity,
.productivity-backlog-stats span {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  padding: 8px 9px;
}
.productivity-mini-grid span,
.productivity-capacity span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.productivity-mini-grid strong,
.productivity-capacity strong,
.productivity-backlog-stats strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.productivity-capacity.good { background: var(--success-bg); }
.productivity-capacity.watch { background: var(--due-bg); }

.productivity-legend {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.productivity-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.productivity-legend span::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.productivity-legend .needed::before { background: var(--border-strong); }
.productivity-legend .solved::before { background: var(--brand); }
.productivity-day-row {
  display: grid;
  grid-template-columns: 82px minmax(110px, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.productivity-day-date {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.productivity-day-bars {
  position: relative;
  height: 18px;
  background: var(--normal-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.productivity-day-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
}
.productivity-day-bar.needed { background: var(--border-strong); }
.productivity-day-bar.solved { background: var(--brand); height: 8px; top: 5px; bottom: auto; }
.productivity-day-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 84px;
  justify-content: flex-end;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.productivity-day-meta strong { color: var(--text-primary); }
.productivity-day-meta em {
  margin-left: 6px;
  font-style: normal;
  font-weight: 800;
}
.productivity-day-meta em.good { color: var(--success); }
.productivity-day-meta em.watch { color: var(--due); }
.productivity-day-meta em.neutral { color: var(--text-muted); }

.productivity-mix-row {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  display: grid;
  gap: 6px;
}
.productivity-mix-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.productivity-backlog-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.productivity-backlog-stats span {
  font-size: 12px;
  color: var(--text-muted);
}
.productivity-owner-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  font-size: 12px;
  color: var(--text-muted);
}
.productivity-owner-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 13px;
}
.productivity-owner-row em {
  font-style: normal;
  font-weight: 700;
  color: var(--due);
}

@media (max-width: 1280px) {
  .productivity-kpis { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .productivity-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .productivity-kpis { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .productivity-grid {
    grid-template-columns: 1fr;
  }
  .productivity-card-wide { grid-column: auto; }
  .productivity-staff-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .productivity-staff-score,
  .productivity-staff-metrics {
    grid-column: 1 / -1;
  }
  .productivity-staff-metrics { grid-template-columns: repeat(2, 1fr); }
  .productivity-backlog-stats { grid-template-columns: repeat(2, 1fr); }
  .productivity-owner-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .productivity-kpis { grid-template-columns: 1fr; }
  .productivity-day-row { grid-template-columns: 1fr; }
  .productivity-day-meta { justify-content: flex-start; }
  .productivity-highlight { grid-template-columns: 32px minmax(0, 1fr); }
  .productivity-highlight-value { grid-column: 1 / -1; justify-self: start; }
}

.learning-grid {
  display: grid;
  /* Calibration card is denser (5 columns of data); give it ~1.7×
     the room of the other two so headers don't truncate. */
  grid-template-columns: minmax(440px, 1.7fr) minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .learning-grid { grid-template-columns: 1fr; }
}

.kb-review-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kb-candidates-card {
  min-width: 0;
}
.kb-candidates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kb-review-toggle-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.kb-review-toggle-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-page);
}
.kb-review-intro {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.kb-review-intro h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}
.kb-review-intro p {
  margin: 4px 0 0;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}
.kb-review-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.kb-review-stats span {
  min-width: 78px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.kb-review-stats strong {
  display: block;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.1;
}
.kb-workbench-card {
  gap: 12px;
}
.kb-workbench-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.kb-workbench-header p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
.kb-workbench-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.kb-workbench-lane {
  min-width: 0;
}
.kb-workbench-lane-title {
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kb-workbench-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.kb-workbench-item:last-child {
  margin-bottom: 0;
}
.kb-workbench-item.rewrite-kb {
  border-left-color: var(--normal);
}
.kb-workbench-item-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
}
.kb-workbench-badge {
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  background: var(--brand-bg);
  color: var(--brand);
}
.kb-workbench-item.rewrite-kb .kb-workbench-badge {
  background: var(--normal-bg);
  color: var(--normal);
}
.kb-workbench-item h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 15px;
}
.kb-workbench-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.kb-workbench-note {
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  color: var(--text-primary) !important;
}
.kb-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kb-review-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.kb-review-item.cleanup {
  border-left: 4px solid var(--due);
}
.kb-review-item.kb-draft {
  border-left: 4px solid var(--brand);
}
.kb-review-item.kb-rewrite {
  border-left: 4px solid var(--normal);
}
.kb-review-heading {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.kb-review-kind {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--brand-bg);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.kb-review-item.cleanup .kb-review-kind {
  background: var(--due-bg);
  color: var(--due);
}
.kb-review-item.kb-rewrite .kb-review-kind {
  background: var(--normal-bg);
  color: var(--normal);
}
.kb-review-item h4 {
  margin: 0;
  font-size: 15px;
  color: var(--text-primary);
}
.kb-review-item p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.kb-review-evidence {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.kb-review-evidence span {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  color: var(--text-muted);
  font-size: 12px;
}
.kb-review-evidence strong {
  color: var(--text-primary);
}
.kb-review-examples {
  margin-top: 12px;
}
.kb-review-examples > span {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.kb-review-examples blockquote {
  margin: 0 0 8px;
  padding: 9px 10px;
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
}
.kb-review-examples blockquote:last-child {
  margin-bottom: 0;
}
.kb-review-examples p {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
}
.kb-review-examples footer {
  margin-top: 5px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
}
.kb-review-closest {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.kb-review-closest > span,
.kb-review-next-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.kb-review-closest ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.kb-review-closest li {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
}
.kb-review-closest em {
  color: var(--text-faint);
  font-style: normal;
}
.kb-review-muted {
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 12px;
}
.kb-review-decision {
  align-self: stretch;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--bg-page);
  border: 1px solid var(--border);
}
.kb-review-decision p {
  margin: 0 0 12px;
}
.kb-review-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kb-review-choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.kb-workbench-draft-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
}
.kb-workbench-draft-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
}
.kb-review-saved {
  margin: 0 0 10px;
  padding: 7px 8px;
  border: 1px solid var(--success);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
  color: var(--success);
  font-size: 12px;
  line-height: 1.35;
}
.kb-review-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.kb-review-input,
.kb-review-select,
.kb-review-note {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: white;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
}
.kb-review-input,
.kb-review-select {
  padding: 6px 8px;
}
.kb-review-note {
  min-height: 68px;
  padding: 8px;
  line-height: 1.4;
  resize: vertical;
}
.kb-workbench-draft-content {
  min-height: 132px;
}
.kb-workbench-original-content {
  background: var(--bg-surface);
  color: var(--text-muted);
}
.kb-review-input:focus,
.kb-review-select:focus,
.kb-review-note:focus {
  border-color: var(--brand);
  outline: 2px solid var(--brand-bg);
  outline-offset: 1px;
}
.kb-candidate-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.kb-candidate-status.tracked {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
.kb-candidate-status.reviewed {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}
.kb-candidate-status.ignored {
  background: var(--normal-bg);
  border-color: var(--border-strong);
  color: var(--normal);
}
.kb-candidate-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.kb-candidate-action-btn {
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.kb-candidate-action-btn.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: white;
}
.kb-candidate-action-btn.selected:not(.primary) {
  border-color: var(--brand);
  background: var(--brand-bg);
  color: var(--brand);
}
.kb-candidate-action-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-page);
}
.kb-candidate-action-btn.primary:hover:not(:disabled) {
  border-color: var(--brand-hover);
  background: var(--brand-hover);
  color: white;
}
.kb-candidate-action-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
@media (max-width: 900px) {
  .kb-review-intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .kb-review-stats {
    justify-content: flex-start;
  }
  .kb-review-item {
    grid-template-columns: 1fr;
  }
  .kb-workbench-lanes {
    grid-template-columns: 1fr;
  }
  .kb-workbench-draft-grid {
    grid-template-columns: 1fr;
  }
  .kb-review-choice-row {
    grid-template-columns: 1fr;
  }
}

.learning-card {
  min-width: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: auto;
}
.learning-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.learning-card-help {
  margin: 0 0 4px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
.learning-empty {
  margin: 0;
  padding: 16px 12px;
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
}

.learning-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}
.learning-table-scroll {
  width: 100%;
  overflow-x: auto;
}
.learning-table-scroll .learning-table {
  min-width: 640px;
}
.learning-table thead th {
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.learning-table tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.learning-table tbody tr:last-child td { border-bottom: none; }
.learning-table tbody tr.dim td { color: var(--text-faint); }
.learning-table th.num,
.learning-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Event detail modal (JSON inspector) */

.event-detail-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 12px));
  width: 720px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 410;
  display: flex; flex-direction: column;
}
.event-detail-modal.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.event-detail-head {
  padding: 16px 22px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
}
.event-detail-title { font-weight: 600; font-size: 14px; }
.event-detail-close {
  width: 30px; height: 30px;
  border: none; background: transparent;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.event-detail-close:hover { background: var(--bg-page); color: var(--text-primary); }
.event-detail-body {
  padding: 16px 22px 22px;
  overflow-y: auto;
  flex: 1;
}
.event-detail-json {
  background: #0f172a;
  color: #e2e8f0;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────
 * Release-to-queue confirmation modal
 * ───────────────────────────────────────────────────────────────── */

.release-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 12px));
  width: 460px; max-width: calc(100vw - 32px);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 410;
}
.release-modal.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.release-head {
  padding: 18px 22px 14px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
}
.release-title { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.release-close {
  width: 30px; height: 30px;
  border: none; background: transparent;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.release-close:hover { background: var(--bg-page); color: var(--text-primary); }
.release-body { padding: 16px 22px 4px; }
.release-body-line {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}
.release-body-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--bg-banner);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 10px 0;
}
.release-foot {
  padding: 14px 22px 20px;
  display: flex; justify-content: flex-end; gap: 8px;
}
.release-cancel, .release-confirm {
  padding: 8px 16px;
  font-size: 13px; font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.release-cancel {
  background: white;
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.release-cancel:hover { background: var(--bg-page); }
.release-confirm {
  background: var(--due);
  color: white;
  border: 1px solid var(--due);
}
.release-confirm:hover { background: #c2410c; }
.release-confirm.danger { background: var(--severe); border-color: var(--severe); }
.release-confirm.danger:hover { background: #b91c1c; border-color: #b91c1c; }
.staff-remove-target { font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────
 * Related-tasks (sibling) panel — shown in task detail when the
 * conversation has follow-up children (or this task IS a follow-up,
 * so other tasks share the same parent).
 * ───────────────────────────────────────────────────────────────── */

/* "Create a New Task" — secondary action in the Current Tasks card
   header (top right), beside the section label. Outlined and on-brand
   so it reads as a real, clickable button, but not filled — that keeps
   it clearly secondary to the filled-blue Send Reply primary. */
.create-task-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand);
  background: white;
  color: var(--brand);
  cursor: pointer;
  transition: all 140ms ease;
}
.create-task-btn:hover:not(:disabled) {
  background: var(--brand-bg);
}
.create-task-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Side-by-side container for the Patient Profile and Classification &
   routing cards in task detail. Patient Profile gets the wider 60%
   column because it holds profile/contact rows; Classification &
   routing keeps 40% so the Category row (label +
   colored pill + edit pencil) doesn't collide. Stacks to one column
   on narrow viewports — see the 900px media query below. */
.detail-cards-row {
  display: grid;
  /* minmax(0, …fr) overrides the implicit min-content floor that fr
     units carry — without it, a wide chip or select inside either
     card would push the column past its share and the ratio would
     collapse back toward 50/50. */
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: 16px;
}

/* Tasking block — the Related tasks panel stacked above the Create
   task button, so all task-structural UI sits in one place. */
.detail-tasking {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sibling-box .detail-section-label {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.sibling-box .detail-section-label > span:first-child {
  font-size: 16px;
  font-weight: 700;
}

.sibling-box .detail-section-label .create-task-btn {
  margin-left: 8px;
}

/* Card frame for the two side-by-side detail panels. Each card holds
   its uppercase label plus content; the inner content boxes drop their
   own border/background so the card supplies the single frame. */
.detail-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.detail-card .detail-ai-box,
.detail-card .sibling-list {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

/* Awaiting-triage notice — replaces the Classification card when a
   task is opened before the background worker has triaged it. */
.detail-pending-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pending-triage-icon { font-size: 20px; line-height: 1.35; }
.pending-triage-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.pending-triage-title { font-size: 14px; font-weight: 600; }
.pending-triage-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 4px 0 10px;
}

/* Patient Profile card — key/value rows match the Classification
   card's line style for visual consistency; the deep-link chips sit
   in a wrap row under a divider. */
.profile-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  font-size: 14px;
}
.profile-row + .profile-row { border-top: 1px solid var(--border); }
.profile-row--multiline { align-items: flex-start; }
.profile-key { color: var(--text-muted); white-space: nowrap; }
.profile-val { font-weight: 500; text-align: right; word-break: break-word; }
.profile-phone-link {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  word-break: break-all;
}
.profile-phone-link:hover { text-decoration: underline; }
.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
/* Source-system deep-link dropdowns. Each ingestion source (Healthie,
   Intercom, Bask) renders as one <details> styled as a channel-colored
   pill: a chip segment on the left holding the two-letter code, the
   system label + ▾ on the right. Whole pill is the clickable
   disclosure. Container .task-source-ingestion is already a flex/wrap
   layout so the pills sit side-by-side and wrap on narrow widths. */
.source-dropdown {
  position: relative;
}
.source-dropdown-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: stretch;  /* chip segment fills the pill height */
  gap: 0;
  padding: 0;            /* padding lives on the inner segments */
  font-size: 13px;
  font-weight: 600;
  /* Per-channel rules below set color/background/border-color. The
     muted palette matches the staff chat bubble's tone: a Tailwind
     100-step body, 200-step border + chip, 900-step text — so each
     pill carries the same visual weight as the chat surface, just
     in its channel's hue. */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: filter 120ms ease;
  user-select: none;
  overflow: hidden;       /* clip the chip segment to the pill radius */
}
.source-dropdown-summary::-webkit-details-marker { display: none; }
.source-dropdown-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  /* Background set per-channel below — one Tailwind step darker than
     the pill body so the chip reads as distinct without dark overlay. */
}
.source-dropdown-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
}
.source-dropdown-label::after {
  content: "\25BE";  /* ▾ */
  font-size: 10px;
  opacity: 0.85;
}
.source-dropdown-summary:hover,
.source-dropdown[open] .source-dropdown-summary {
  filter: brightness(0.96);
}
/* Per-channel pill palette. Muted channel-adjacent tints keep source
   context visible without pulling the page back into bright app colors. */
.source-dropdown-healthie .source-dropdown-summary {
  background: #f6efd9; color: #745816; border-color: #dfcc91;
}
.source-dropdown-healthie .source-dropdown-chip { background: #ead9a7; }
.source-dropdown-intercom .source-dropdown-summary {
  background: var(--brand-bg); color: var(--brand-hover); border-color: #c7d8e7;
}
.source-dropdown-intercom .source-dropdown-chip { background: #dfeaf4; }
.source-dropdown-bask .source-dropdown-summary {
  background: #eef1f6; color: #48536a; border-color: #d4dbe6;
}
.source-dropdown-bask .source-dropdown-chip { background: #e0e6ef; }
.source-dropdown-genhealth .source-dropdown-summary {
  background: #e2f2ef; color: #2f6258; border-color: #bfded8;
}
.source-dropdown-genhealth .source-dropdown-chip { background: #c9e6e0; }
.source-dropdown-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  z-index: 20;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.source-dropdown-item {
  display: block;
  padding: 7px 10px;
  border-radius: 4px;
  color: var(--text, #1f2328);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
}
.source-dropdown-item:hover {
  background: var(--brand-bg);
  text-decoration: underline;
}

.sibling-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 10px;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
}

.sibling-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
}
.sibling-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.sibling-row:last-child { border-bottom: none; }
.sibling-row.current {
  background: var(--bg-page);
  box-shadow: inset 3px 0 0 var(--brand);
}
/* Provider-level row in Related Tasks — only surfaces when the RN
   has escalated to a Provider, so it should read as important at a
   glance. Soft amber tint stands out without alarm-red. Defined
   after .sibling-row.current so the provider tint wins when both
   classes apply. */
.sibling-row--provider {
  background: var(--due-bg);
  box-shadow: inset 3px 0 0 var(--due);
}
.sibling-label { font-weight: 500; }
/* Lane tag in Related Tasks — marks the non-clinical lane of a fanned
   dual-concern message using the muted routing-hub color family. */
.sibling-lane-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--routing-hub-bg);
  color: var(--routing-hub);
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
/* Cross-conversation marker in Related Tasks — a task on a different
   conversation for the same patient. Muted (not the lane tag's
   purple): it is a context cue, not a clinical signal. */
.sibling-otherconv-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  color: var(--text-muted);
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
/* Follow-on count in Related Tasks — how many coalesced messages are
   folded into this task. Muted: the task is the actionable unit, the
   count is just context. */
.sibling-followon-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 8px;
  white-space: nowrap;
}
.sibling-priority-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}
.sibling-priority-tag--urgent {
  color: var(--severe);
  background: var(--severe-bg);
  border: 1px solid var(--severe-bg);
}
.sibling-priority-tag--same-day {
  color: var(--due);
  background: var(--due-bg);
  border: 1px solid var(--due-bg);
}
.sibling-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  min-width: 210px;
}
.sibling-claim-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: white;
  cursor: pointer;
  transition: all 120ms ease;
}
.sibling-claim-btn:hover:not(:disabled) {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
/* "Claimed" — the current task, once claimed: a disabled, greyed twin
   of .sibling-claim-btn. Non-clickable; signals the task is held.
   Replaced the old "(this task)" text badge. */
.sibling-claimed-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--normal-bg);
  color: var(--text-muted);
  cursor: not-allowed;
  white-space: nowrap;
}
/* Greyed the instant it's clicked (claimSiblingFromPanel disables it);
   the panel then re-renders, swapping the button for the owner pill. */
.sibling-claim-btn:disabled {
  background: var(--bg-page);
  border-color: var(--border);
  color: var(--text-faint);
  cursor: default;
}
.sibling-takeover-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 120ms ease;
}
.sibling-takeover-btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
}
.sibling-takeover-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.sibling-open-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand);
  background: white;
  color: var(--brand);
  cursor: pointer;
  transition: all 120ms ease;
}
.sibling-open-btn:hover {
  background: var(--brand);
  color: white;
}
/* Ownership pill — compact staff initials + label, adapted from the old
   mini-avatar status badge pattern. The initials segment gives staff a
   quick Slack/Teams lookup cue without making ownership feel heavy. */
.owner-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  width: 128px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
}
.owner-pill-initials {
  align-self: stretch;
  width: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-bg);
  color: var(--brand);
  border-right: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.owner-pill-label {
  min-width: 0;
  padding: 0 11px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.owner-pill--closed {
  background: var(--bg-surface);
  border-color: var(--success);
}
.owner-pill--closed .owner-pill-initials {
  background: var(--success-bg);
  color: var(--success);
  border-right-color: var(--success);
}
.owner-pill--closed .owner-pill-label {
  color: var(--success);
}
/* A spawned follow-up still waiting on its parent task to close
   (status pending_parent). Surfaced in Related Tasks so an in-flight
   escalation is visible here, not only in the activity log. */
.sibling-row.pending {
  background: linear-gradient(to right, rgba(93, 102, 128, 0.10), transparent);
  margin: 0 -8px;
  padding: 6px 8px;
  border-radius: 4px;
  border-left: 3px solid var(--routing-hub);
}
.sibling-pending-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--routing-hub-bg);
  color: var(--routing-hub);
  line-height: 1.2;
  white-space: nowrap;
  vertical-align: middle;
}
.sibling-pending-note {
  font-size: 11px;
  font-weight: 500;
  color: var(--routing-hub);
  white-space: nowrap;
}
/* "Pending Assignment" chip — shown to RN/CSR on Provider-level rows
   in place of a Claim/Take-over button they aren't authorized to use.
   Outlined to match the new button format (.create-task-btn /
   .sibling-claim-btn sizing); due palette keeps it reading as one
   signal with .sibling-row--provider: this row is a Provider task. */
.sibling-pending-assignment {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--due);
  background: white;
  border: 1px solid var(--due);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────
 * Patient history — cross-conversation rollup in task detail (D3).
 * ───────────────────────────────────────────────────────────────── */

.patient-timeline-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.patient-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.patient-tl-msg {
  border-left: 2px solid var(--brand);
  padding: 4px 0 4px 10px;
}
.patient-tl-msg.staff {
  border-left-color: var(--border-strong, var(--border));
}
.patient-tl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.patient-tl-who { font-weight: 600; color: var(--text-primary); }
.patient-tl-chan,
.patient-tl-cat {
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--normal-bg);
  color: var(--text-muted);
}
.patient-tl-time {
  margin-left: auto;
  color: var(--text-faint);
  white-space: nowrap;
}
.patient-tl-replied {
  color: var(--text-faint);
  font-style: italic;
}
.patient-tl-text {
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}
.patient-tl-event {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  padding: 2px 0 2px 10px;
}

/* ─────────────────────────────────────────────────────────────────
 * Integrations subtab — Healthie bridge JWT refresh panel
 * ───────────────────────────────────────────────────────────────── */

.integrations-panel {
  max-width: 640px;
  margin: 16px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jwt-status-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jwt-status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.jwt-status-ok {
  background: var(--success-bg);
  color: var(--success);
}
.jwt-status-warn {
  background: var(--urgent-bg);
  color: var(--urgent);
}
.jwt-status-expired {
  background: var(--severe-bg);
  color: var(--severe);
}
.jwt-countdown {
  font-size: 13px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.jwt-missing-note {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--severe-bg);
  color: var(--severe);
}
.jwt-paste-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.jwt-paste-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--normal-bg);
  border-radius: var(--radius-sm);
  resize: vertical;
  word-break: break-all;
}
.jwt-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jwt-save-btn {
  background: var(--brand);
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.jwt-save-btn:hover { background: var(--brand-hover); }
.jwt-save-btn:disabled { opacity: 0.55; cursor: default; }
.jwt-save-status {
  font-size: 12px;
  color: var(--text-muted);
}
.jwt-save-ok { color: var(--success); }
.jwt-save-err { color: var(--severe); }
.healthie-backfill-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.healthie-backfill-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 12px;
}
.healthie-backfill-input {
  min-width: 0;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--normal-bg);
  border-radius: var(--radius-sm);
}
.healthie-backfill-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.healthie-backfill-live-btn {
  background: var(--success);
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.healthie-backfill-live-btn:disabled,
.healthie-backfill-live-btn[disabled] {
  opacity: 0.55;
  cursor: default;
}
.healthie-backfill-status {
  min-height: 32px;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--normal-bg);
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
}
.healthie-backfill-ok {
  background: var(--success-bg);
  color: var(--success);
}
.healthie-backfill-err {
  background: var(--severe-bg);
  color: var(--severe);
}
@media (max-width: 720px) {
  .healthie-backfill-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * House Style subtab — approval surface for the weekly house-style
 * candidate.
 * ───────────────────────────────────────────────────────────────── */

.hs-card {
  max-width: 720px;
  margin: 16px auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hs-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hs-badge-approved { background: var(--success-bg); color: var(--success); }
.hs-badge-ready    { background: var(--brand-bg);   color: var(--brand);   }
.hs-badge-pending  { background: var(--urgent-bg);  color: var(--urgent);  }
.hs-badge-blocked  { background: var(--severe-bg);  color: var(--severe);  }
.hs-badge-empty    { background: var(--normal-bg);  color: var(--normal);  }
.hs-metrics {
  font-size: 12px;
  color: var(--text-muted);
}
.hs-summary {
  background: var(--normal-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  margin: 6px 0 0;
}
.hs-no-draft {
  font-size: 13px;
  color: var(--text-muted);
  padding: 16px;
  text-align: center;
  background: var(--normal-bg);
  border-radius: var(--radius-sm);
}
.hs-eval-failures {
  margin: 6px 0 0 18px;
  padding: 0;
  font-size: 12px;
  color: var(--text-primary);
}
.hs-eval-failures li {
  margin: 4px 0;
  line-height: 1.4;
}
.hs-eval-failures code {
  background: var(--severe-bg);
  color: var(--severe);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
}
.hs-eval-ok {
  font-size: 13px;
  color: var(--success);
  padding: 8px 12px;
  background: var(--success-bg);
  border-radius: var(--radius-sm);
}
.hs-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.hs-approve-btn {
  background: var(--success);
  color: #fff;
  border: 0;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
}
.hs-approve-btn:hover:not(:disabled) { filter: brightness(0.92); }
.hs-approve-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hs-reject-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}
.hs-reject-note {
  width: 100%;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  font-family: inherit;
}
.hs-reject-btn {
  background: var(--bg-surface);
  color: var(--severe);
  border: 1px solid var(--severe);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
}
.hs-reject-btn:hover:not(:disabled) { background: var(--severe-bg); }
.hs-reject-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hs-action-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.hs-action-err { color: var(--severe); }

/* ─────────────────────────────────────────────────────────────────
 * Loading state
 * ───────────────────────────────────────────────────────────────── */

.loading-row {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────
 * Responsive (basic)
 * ───────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: minmax(180px, 1fr) auto minmax(120px, 1fr);
    padding: 0 16px;
    gap: 12px;
  }
  .tab-nav {
    grid-template-columns: 180px;
  }
  .brand-sub { display: none; }
  .tab-btn { padding: 6px 10px; }
  .main-content { padding: 16px; }
  .detail-cards-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    padding: 10px 14px 12px;
    gap: 8px 10px;
  }
  .topbar-brand {
    min-width: 0;
    max-width: none;
  }
  .brand-icon {
    width: 72px;
    height: 42px;
  }
  .brand-name {
    white-space: nowrap;
  }
  .topbar-right {
    grid-column: 2;
    grid-row: 1;
    gap: 8px;
  }
  .chip-name {
    display: none;
  }
  .user-chip {
    padding-right: 3px;
  }
  .tab-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    justify-self: stretch;
  }
  .tab-btn {
    min-height: 38px;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * Patient chart modal (PROVIDER_PHASE_4_DESIGN.md §8)
 * Opens from the "View patient chart" button on the Patient Profile
 * card. Tabbed read-only view of allergies / medications / conditions
 * / demographics, mirrored from Healthie (mig 0071 + healthie-chart.js).
 * ───────────────────────────────────────────────────────────────── */

.chart-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-page, #f8fafc);
  color: var(--text-primary, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 6px);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.chart-open-btn:hover {
  background: white;
  border-color: var(--accent, #b99a4b);
}
.chart-open-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Task Source card — full-width bar above the two-column grid. Holds
   the per-channel ingestion pills on the left and the View Patient
   Chart action pushed to the right. Wraps on narrow viewports so the
   chart button drops below the pill row rather than getting clipped. */
.task-source-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.task-source-ingestion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Prominent variant of .chart-open-btn — the entry point into the
   patient chart (the EHR surface) in the top Task Source card. Neutral
   (inherits .chart-open-btn's grey body + hover) so it doesn't add to
   the page's blue weight, and grouped at the LEFT next to the Healthie
   pill (margin-left:0) instead of stranded at the right edge — the
   chart and the Healthie deep-link are the same "look at Healthie"
   action, so they read better together. Kept larger than the base so
   it still stands out as the primary affordance in the bar. */
.chart-open-btn--prominent {
  margin-top: 0;
  margin-left: 0;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
}

.chart-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 12px));
  width: 880px; max-width: calc(100vw - 32px);
  height: calc(100vh - 80px);
  max-height: 820px;
  background: white;
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-pop, 0 12px 32px rgba(15, 23, 42, 0.18));
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 420;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.chart-modal.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.chart-head {
  padding: 14px 22px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}
.chart-title {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.chart-title-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-synced {
  font-size: 12px;
  color: var(--text-muted, #64748b);
}
.chart-synced.stale { color: #b45309; }
.chart-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.chart-source-links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-source-links .source-dropdown-summary {
  min-height: 30px;
}
.chart-source-links .source-dropdown-chip {
  width: 24px;
  min-width: 24px;
}
.chart-source-links .source-dropdown-panel {
  z-index: 430;
}
.chart-refresh {
  padding: 5px 12px;
  font-size: 12px;
  background: var(--bg-page, #f8fafc);
  color: var(--text-primary, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.chart-refresh:hover { background: white; border-color: var(--accent, #b99a4b); }
.chart-refresh:disabled { opacity: 0.5; cursor: wait; }
.chart-close {
  width: 30px; height: 30px;
  border: none; background: transparent;
  font-size: 22px;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}
.chart-close:hover { background: var(--bg-page, #f8fafc); color: var(--text-primary, #0f172a); }

.chart-tabs {
  display: flex;
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding: 0 16px;
  gap: 4px;
  flex-shrink: 0;
}
.chart-tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.chart-tab:hover { color: var(--text-primary, #0f172a); }
.chart-tab.active {
  color: var(--accent, #b99a4b);
  border-bottom-color: var(--accent, #b99a4b);
}
.chart-tab-count {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-page, #f8fafc);
  color: var(--text-muted, #64748b);
  border-radius: 999px;
}
.chart-tab.active .chart-tab-count {
  background: var(--urgent-bg);
  color: var(--accent, #b99a4b);
}
.chart-tab-count:empty { display: none; }

/* On narrow screens let the tab strip scroll sideways rather than wrap
 * or clip, so every tab stays reachable on a phone. */
@media (max-width: 600px) {
  .chart-tabs {
    overflow-x: auto;
  }
  .chart-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ── Task-detail tabs (Layer 1 patient-chart surfacing). Behind the
 * client flag patientChartTabsEnabled(); off = the classic detail view.
 * The top source bar becomes the strip; the Conversation tab holds the
 * unchanged detail body, data tabs swap in read-only chart data. ── */
.task-tabstrip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 6px 10px;
  margin-bottom: 16px;
}
#taskTabViews {
  --task-profile-card-track: minmax(0, 45fr);
  --task-profile-card-min-height: 0px;
}
.task-tab-layout {
  display: grid;
  grid-template-columns: var(--task-profile-card-track) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.task-tab-profile,
.task-tab-main {
  min-width: 0;
}

.task-tab-profile > .detail-section {
  min-width: 0;
}
.task-tab-view:not([data-taskview="conversation"]) .patient-profile-card {
  min-height: var(--task-profile-card-min-height);
}
/* Tabs: full-size and obvious. Active = a soft brand-tint pill (same gentle
 * family as the Healthie/Bask chips), bold brand label — clear, not loud. */
.task-tabstrip .chart-tabs { flex: 1 1 auto; border-bottom: none; flex-wrap: wrap; padding: 0; gap: 4px; }
.task-tabstrip .chart-tab {
  border: none;
  border-bottom: none;
  border-radius: var(--radius);
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.task-tabstrip .chart-tab:hover { color: var(--text-primary); background: var(--bg-page); }
.task-tabstrip .chart-tab.active {
  background: var(--brand-bg);
  color: var(--brand);
  font-weight: 600;
}
.task-tabstrip-sources { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.task-tabstrip-sources .source-dropdown-chip { display: none; }
.task-tabstrip-sources .source-dropdown-summary { font-size: 12px; font-weight: 500; }
.task-tabstrip-sources .source-dropdown-label { padding: 5px 9px; }
.task-tabstrip-sources .source-dropdown-healthie .source-dropdown-summary { background: #f6efd9; color: #745816; border-color: #dfcc91; }
.task-tabstrip-sources .source-dropdown-intercom .source-dropdown-summary { background: var(--brand-bg); color: var(--brand-hover); border-color: var(--border-strong); }
.task-tabstrip-sources .source-dropdown-bask .source-dropdown-summary { background: #eef1f6; color: #48536a; border-color: #d4dbe6; }
.task-tabstrip-sources .source-dropdown-genhealth .source-dropdown-summary { background: #e2f2ef; color: #2f6258; border-color: #bfded8; }
/* Sub-sections inside the combined Clinical Summary tab. */
.chart-subsection { margin-bottom: 22px; }
.chart-subsection:last-child { margin-bottom: 0; }
.chart-subsection-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* Clinical Summary dashboard: groupings as cards in a responsive grid so
 * it reads dense instead of one long sparse column. */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}
.summary-card { padding: 14px 16px; }
/* Demographics: a 2-column-wide card (so other cards sit beside it) with
 * its fields compacted into two label/value columns. Scoped so the chart
 * modal's demographics layout is unaffected. */
.summary-card--demographics { grid-column: span 2; }
.summary-card--demographics .chart-demographic-grid {
  grid-template-columns: max-content 1fr max-content 1fr;
}
.summary-card-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.task-tab-view { display: none; }
.task-tab-view.is-active { display: block; }
.task-tab-data[data-tab="medications"] .chart-entity-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.panel-editbar {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-faint); margin-bottom: 12px;
}

/* Notes tab (Care Station chart notes). */
.chart-note-composer {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.chart-note-label {
  display: block;
}
.chart-note-composer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.chart-note-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chart-note-row {
  padding: 12px 14px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.chart-note-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.chart-note-staff {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}
.chart-note-time {
  color: var(--text-faint);
  font-size: 12px;
}
.chart-note-content {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.chart-data-warning {
  background: var(--bg-banner);
  border: 1px solid var(--bg-banner-strong);
  color: var(--wait-medium-text);
  font-size: 12px;
  padding: 8px 11px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.chart-address-block { font-size: 14px; line-height: 1.5; color: var(--text-primary); }

.chart-body {
  padding: 16px 22px 22px;
  overflow-y: auto;
  flex: 1;
}

.chart-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: 14px;
}

.chart-entity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chart-entity-row {
  padding: 12px 14px;
  background: var(--bg-page, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 6px);
}
.chart-entity-row.retracted {
  opacity: 0.55;
  background: transparent;
}
.chart-entity-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chart-entity-tag {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--text-muted, #64748b);
}
.chart-entity-tag.active   { background: var(--success-bg); color: var(--success); }
.chart-entity-tag.inactive { background: #f1f5f9; color: #64748b; }
.chart-entity-tag.retracted{ background: var(--severe-bg); color: var(--severe); }
.chart-entity-tag.severity-severe   { background: var(--severe-bg); color: var(--severe); }
.chart-entity-tag.severity-moderate { background: var(--urgent-bg); color: var(--urgent); }
.chart-entity-tag.severity-mild     { background: #f1f5f9; color: #475569; }
/* Vital + lab tag variants — Phase 4 v2 (2026-05-25). */
.chart-entity-tag.value     { background: #e2e8f0; color: #0f172a; font-variant-numeric: tabular-nums; }
.chart-entity-tag.normal    { background: var(--success-bg); color: var(--success); }
.chart-entity-tag.abnormal  { background: var(--severe-bg); color: var(--severe); }
.chart-entity-tag.latest    { background: var(--brand-bg); color: var(--brand-hover); }
/* Source-provenance tag (Bask / Healthie) — metadata, intentionally muted
   with an outline so it never competes with clinical status/severity tags. */
.chart-entity-tag.source    { background: transparent; color: var(--text-muted, #64748b); border: 1px solid #e2e8f0; font-weight: 600; letter-spacing: .02em; }
.chart-entity-row.abnormal  { border-left: 3px solid #b91c1c; padding-left: calc(var(--chart-row-pad, 12px) - 3px); }
.chart-suppressed-note {
  margin-top: 10px;
  padding: 6px 10px;
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
  background: #f8fafc;
  border-left: 2px solid #cbd5e1;
  border-radius: 4px;
}
.chart-entity-fields {
  margin-top: 6px;
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 4px 14px;
  font-size: 12.5px;
}
.chart-entity-fields dt { color: var(--text-muted, #64748b); }
.chart-entity-fields dd { margin: 0; color: var(--text-primary, #0f172a); }

.chart-demographic-grid {
  display: grid;
  grid-template-columns: minmax(150px, max-content) 1fr;
  gap: 10px 18px;
  font-size: 13.5px;
  padding: 4px;
}
.chart-demographic-grid dt { color: var(--text-muted, #64748b); font-weight: 500; }
.chart-demographic-grid dd { margin: 0; color: var(--text-primary, #0f172a); }

@media (max-width: 900px) {
  .task-tab-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .task-tab-data[data-tab="medications"] .chart-entity-list {
    grid-template-columns: 1fr;
  }
}