/* Emonics BGC Tracker — design tokens shared with the portal and the other
   consoles (org-hierarchy static/app.css, eos-portal static/portal.css): same
   navy/orange/bg/border palette, same spacing scale, same radii, so this reads
   as part of one product family rather than a bolted-on tool.

   This is a surface the executive team opens on a laptop. It is laid out for a
   1440px window: a wide pipeline board with real breathing room, a radar that
   states the number that matters before the list, and division panels that stay
   legible without hovering. Density is a deliberate non-goal — a background
   check that is quietly late is the failure mode this screen exists to prevent,
   so "late" has to be visible from across a desk. */

:root {
  --navy: #1E2A5E;
  --navy-dark: #141b40;
  --navy-mid: #2c3a72;
  --navy-tint: rgba(30, 42, 94, 0.06);
  --navy-tint-2: rgba(30, 42, 94, 0.11);
  --orange: #E65F3C;
  --orange-dark: #c94d2d;
  --orange-tint: rgba(230, 95, 60, 0.12);
  --icon-bg: #FDF0EC;
  --ink: #1a1f36;
  --ink-soft: #3d4560;
  --muted: #6b7280;
  --muted-light: #98a0b0;
  --bg: #F4F5F9;
  --card: #ffffff;
  --border: #E5E8F0;
  --border-soft: #EEF0F6;
  --error: #b91c1c;
  --error-bg: #fef2f2;
  --amber: #b45309;
  --amber-bg: #fef3c7;
  --green: #15803d;
  --green-bg: #dcfce7;
  --blue: #1d4ed8;
  --blue-bg: #e0e7ff;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.22);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, Menlo, monospace;

  /* The exec-presentation width. Content is centered in a 1440px shell rather
     than stretched edge to edge on a 27" display, where a full-bleed board
     turns into a horizon-scanning exercise. */
  --shell: 1440px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); }

/* ==================== login ==================== */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange);
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

.login-card .logo { display: block; height: 40px; width: auto; margin: 0 auto var(--space-5); }
.login-card h1 { font-size: 22px; font-weight: 700; color: var(--navy); text-align: center; margin: 0 0 var(--space-1); }
.login-card .sub { text-align: center; color: var(--muted); margin: 0 0 var(--space-5); font-size: 13px; }
.login-card label { display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin: 0 0 var(--space-2); letter-spacing: 0.02em; }
.login-card input[type="email"], .login-card input[type="text"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.login-card input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.12); }
.login-card input[name="code"] { letter-spacing: 0.5em; text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.login-card .row { margin-bottom: var(--space-4); }
.login-card button {
  width: 100%; padding: 11px 14px; border: none; border-radius: var(--radius-sm);
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background .12s ease;
}
.login-card button:hover:not(:disabled) { background: var(--navy-dark); }
.login-card button:disabled { opacity: 0.6; cursor: default; }
.login-msg { text-align: center; color: var(--muted); font-size: 12px; margin: var(--space-2) 0 0; min-height: 16px; }
.login-footer { text-align: center; color: var(--muted); font-size: 12px; letter-spacing: 0.02em; margin: var(--space-5) 0 0; }

/* ==================== app shell / header ====================

   The canonical lockup treatment: the two-line Emonics lockup on a WHITE CHIP.
   The asset is dark ink on transparent, so on navy it needs its own light
   ground — a chip rather than the on-dark variant, because the chip is what
   every recently-designed console in the fleet converged on and it keeps one
   asset doing the work on both light and dark surfaces.

   Logo links home (the portal), and "All tools" sits beside it as an explicit
   text affordance — an image alone is not a discoverable way back out.
   Sizing is evidence-based, not taste: a measured height ladder on this exact
   asset found the two-line lockup illegible at 26px and legible at 36px
   (org-hierarchy's finding, 2026-07-25). Height-only + width:auto so the asset
   is never distorted. */

.app-header {
  background: var(--navy);
  border-bottom: 2px solid var(--orange);
}

.app-header-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  flex-wrap: wrap;
}

.brand-group { display: flex; align-items: center; gap: var(--space-3); flex: none; min-width: 0; }

.brand-home { display: block; line-height: 0; flex: none; }

.brand-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.brand-chip img { display: block; height: 36px; width: auto; }

.brand-word {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.app-nav { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; }

.navbtn {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.navbtn:hover { background: rgba(255, 255, 255, 0.16); }
.navbtn.active { background: var(--orange); border-color: var(--orange); font-weight: 600; }
.navbtn.active:hover { background: var(--orange); }
.navbtn[hidden] { display: none !important; }

.app-account { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex: none; }
.userpill { font-size: 12px; color: rgba(255, 255, 255, 0.85); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tierpill {
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}

/* ==================== main ==================== */

.app-main { max-width: var(--shell); margin: 0 auto; padding: var(--space-6); }
.view { display: none; }
.view.active { display: block; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); flex-wrap: wrap; }
.page-title { font-size: 26px; font-weight: 700; color: var(--navy); margin: 0 0 var(--space-1); letter-spacing: -0.01em; }
.page-sub { color: var(--muted); margin: 0; font-size: 13px; }
.page-head-actions { display: flex; align-items: center; gap: var(--space-2); }

.btn-primary {
  background: var(--orange); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 9px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s ease;
}
.btn-primary:hover:not(:disabled) { background: var(--orange-dark); }
.btn-primary:disabled { opacity: .55; cursor: default; }

.btn-secondary {
  background: #fff; color: var(--navy); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-secondary:hover { background: var(--navy-tint); }

.btn-ghost { background: none; border: none; color: var(--navy); font: inherit; font-size: 13px; cursor: pointer; padding: 4px 6px; }
.btn-ghost:hover { text-decoration: underline; }

/* ==================== stat row ==================== */

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }

.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
}
.stat .stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-2); }
.stat .stat-value { font-size: 32px; font-weight: 700; color: var(--navy); line-height: 1; font-variant-numeric: tabular-nums; }
.stat .stat-note { font-size: 12px; color: var(--muted); margin: var(--space-2) 0 0; }
.stat.alarm { border-color: rgba(185, 28, 28, 0.3); background: linear-gradient(180deg, #fff 0%, #fffafa 100%); }
.stat.alarm .stat-value { color: var(--error); }
.stat.warn .stat-value { color: var(--amber); }
.stat.good .stat-value { color: var(--green); }

/* ==================== division panel ==================== */

.division-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }

.division-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm); cursor: pointer; text-align: left;
  font: inherit; color: inherit; transition: border-color .12s ease, box-shadow .12s ease;
}
.division-card:hover { border-color: var(--navy-mid); box-shadow: var(--shadow); }
.division-card.selected { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-tint); }
.division-card h3 { margin: 0 0 var(--space-3); font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: 0.01em; }
.division-metrics { display: flex; gap: var(--space-5); }
.division-metric .n { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.division-metric .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; }
.division-metric.overdue .n { color: var(--error); }
.division-metric.due_soon .n { color: var(--amber); }

/* ==================== radar ==================== */

.section-head { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-4); }
.section-title { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0; }
.section-note { font-size: 12px; color: var(--muted); }

.radar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }

.radar-col { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.radar-col-head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.radar-col-head h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.radar-col-head .n { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.radar-col.overdue .radar-col-head { background: var(--error-bg); }
.radar-col.overdue .radar-col-head h4, .radar-col.overdue .radar-col-head .n { color: var(--error); }
.radar-col.due_soon .radar-col-head { background: var(--amber-bg); }
.radar-col.due_soon .radar-col-head h4, .radar-col.due_soon .radar-col-head .n { color: var(--amber); }
.radar-col.on_track .radar-col-head { background: var(--green-bg); }
.radar-col.on_track .radar-col-head h4, .radar-col.on_track .radar-col-head .n { color: var(--green); }

.radar-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.radar-item { border-bottom: 1px solid var(--border-soft); }
.radar-item:last-child { border-bottom: none; }
.radar-item button {
  width: 100%; text-align: left; background: none; border: none; font: inherit; color: inherit;
  padding: var(--space-3) var(--space-5); cursor: pointer; display: flex; align-items: center; gap: var(--space-3);
}
.radar-item button:hover { background: var(--navy-tint); }
.radar-item .who { flex: 1 1 auto; min-width: 0; }
.radar-item .name { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-item .meta { font-size: 12px; color: var(--muted); }
.radar-item .age { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.radar-col.overdue .radar-item .age { color: var(--error); }
.radar-col.due_soon .radar-item .age { color: var(--amber); }
.radar-col.on_track .radar-item .age { color: var(--muted); }

.radar-empty { padding: var(--space-5); color: var(--muted-light); font-size: 13px; text-align: center; }

/* ==================== pipeline board ==================== */

.board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }

.board-col { background: rgba(255, 255, 255, 0.6); border: 1px solid var(--border); border-radius: var(--radius); min-height: 120px; }
.board-col-head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.board-col-head h4 { margin: 0; font-size: 12px; font-weight: 700; color: var(--navy); letter-spacing: 0.02em; }
.board-col-head .n { font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.board-col.terminal { background: rgba(244, 245, 249, 0.7); }
.board-col.terminal .board-col-head h4 { color: var(--muted); }

.board-list { list-style: none; margin: 0; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }

.card {
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-3); cursor: pointer; text-align: left;
  font: inherit; color: inherit; width: 100%; box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.card:hover { box-shadow: var(--shadow); border-color: var(--navy-mid); }
.card.overdue { border-left-color: var(--error); }
.card.due_soon { border-left-color: var(--amber); }
.card.on_track { border-left-color: var(--green); }
.card .card-name { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .card-meta { font-size: 11px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.card .card-ref { font-family: var(--mono); font-size: 10px; color: var(--muted-light); letter-spacing: 0.02em; }

.board-col-empty { padding: var(--space-4); color: var(--muted-light); font-size: 12px; text-align: center; }

/* ==================== chips ==================== */

.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 2px 8px; letter-spacing: 0.02em; white-space: nowrap;
}
.chip.div-FT { background: var(--blue-bg); color: var(--blue); }
.chip.div-C2C { background: var(--navy-tint-2); color: var(--navy); }
.chip.div-Healthcare { background: var(--icon-bg); color: var(--orange-dark); }
.chip.status-requested { background: var(--navy-tint-2); color: var(--navy); }
.chip.status-initiated { background: var(--blue-bg); color: var(--blue); }
.chip.status-in_progress { background: var(--amber-bg); color: var(--amber); }
.chip.status-completed_clear { background: var(--green-bg); color: var(--green); }
.chip.status-completed_flagged { background: var(--error-bg); color: var(--error); }
.chip.status-cancelled { background: var(--border-soft); color: var(--muted); }
.chip.source { background: var(--border-soft); color: var(--ink-soft); }

/* ==================== designed empty state ====================

   Not a shrug. It names what this console is for, states the one number that
   is true (zero), and offers the single action that changes that. A tool whose
   first screen is a blank panel gets closed and not reopened. */

.empty-state {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-6); text-align: center; box-shadow: var(--shadow-sm);
  max-width: 620px; margin: var(--space-6) auto;
}
.empty-mark {
  width: 64px; height: 64px; border-radius: 50%; background: var(--icon-bg);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5);
}
.empty-mark svg { width: 30px; height: 30px; }
.empty-state h2 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 var(--space-2); }
.empty-state p { color: var(--muted); margin: 0 auto var(--space-5); max-width: 44ch; font-size: 13px; }
.empty-state .empty-actions { display: flex; gap: var(--space-3); justify-content: center; }

/* ==================== detail ==================== */

.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); flex-wrap: wrap; }
.detail-title { font-size: 24px; font-weight: 700; color: var(--navy); margin: 0 0 var(--space-2); }
.detail-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }

.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-soft); }
.panel-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--navy); letter-spacing: 0.01em; }
.panel-body { padding: var(--space-5); }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); margin: 0; }
.facts .fact { min-width: 0; }
.facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.facts dd { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: break-word; }
.facts dd.empty { color: var(--muted-light); font-style: italic; }
.facts .fact.wide { grid-column: 1 / -1; }

.aging-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; margin-bottom: var(--space-4); }
.aging-banner.overdue { background: var(--error-bg); color: var(--error); }
.aging-banner.due_soon { background: var(--amber-bg); color: var(--amber); }
.aging-banner.on_track { background: var(--green-bg); color: var(--green); }
.aging-banner.untracked { background: var(--border-soft); color: var(--muted); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--space-5) var(--space-5); border-left: 2px solid var(--border); }
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--navy); border: 2px solid #fff;
}
.timeline li.flagged::before { background: var(--error); }
.timeline li.cleared::before { background: var(--green); }
.timeline .t-head { font-weight: 600; font-size: 13px; }
.timeline .t-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.timeline .t-reason { font-size: 13px; color: var(--ink-soft); background: var(--bg); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-top: var(--space-2); }

.action-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ==================== forms / intake ==================== */

.form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); max-width: 720px; }
.form-body { padding: var(--space-6); }
.field { margin-bottom: var(--space-5); }
.field > label { display: block; font-size: 12px; font-weight: 700; color: var(--navy); letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: var(--space-2); }
.field .hint { font-size: 12px; color: var(--muted); margin: var(--space-1) 0 var(--space-2); }
.field input[type="text"], .field input[type="search"], .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; background: #fff; color: var(--ink);
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 42, 94, 0.12); }

.segmented { display: inline-flex; background: var(--border-soft); border-radius: var(--radius-sm); padding: 3px; gap: 3px; }
.segmented .seg { background: none; border: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 6px 14px; border-radius: 4px; cursor: pointer; }
.segmented .seg.active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }

.readonly-identity { display: flex; align-items: center; gap: var(--space-3); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.readonly-identity .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.readonly-identity .who .n { font-weight: 600; }
.readonly-identity .who .e { font-size: 12px; color: var(--muted); }
.readonly-identity .lock { margin-left: auto; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.picker { position: relative; }
.picker-results { list-style: none; margin: var(--space-2) 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; max-height: 300px; overflow-y: auto; box-shadow: var(--shadow); }
.picker-results:empty { display: none; }
.picker-results li { border-bottom: 1px solid var(--border-soft); }
.picker-results li:last-child { border-bottom: none; }
.picker-results button { width: 100%; text-align: left; background: none; border: none; font: inherit; padding: var(--space-3) var(--space-4); cursor: pointer; display: flex; align-items: center; gap: var(--space-3); }
.picker-results button:hover, .picker-results button:focus { background: var(--navy-tint); outline: none; }
.picker-results .p-main { flex: 1 1 auto; min-width: 0; }
.picker-results .p-name { font-weight: 600; }
.picker-results .p-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The duplicate-email disclosure. Deliberately loud: this is the label that
   stops a check being filed against the wrong person. */
.dup-warn {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  background: var(--amber-bg); color: var(--amber); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.preferred-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); background: var(--green-bg); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }

.selected-subject { display: flex; align-items: center; gap: var(--space-3); background: var(--navy-tint); border: 1px solid var(--navy-tint-2); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.selected-subject .s-main { flex: 1 1 auto; min-width: 0; }
.selected-subject .s-name { font-weight: 700; color: var(--navy); }
.selected-subject .s-sub { font-size: 12px; color: var(--ink-soft); }

.form-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-soft); background: var(--bg); }
.form-msg { font-size: 13px; color: var(--muted); min-height: 18px; flex: 1 1 auto; }
.form-msg.error { color: var(--error); font-weight: 600; }
.form-msg.ok { color: var(--green); font-weight: 600; }

/* ==================== modal ==================== */

.modal-backdrop { position: fixed; inset: 0; background: rgba(20, 27, 64, 0.45); display: flex; align-items: center; justify-content: center; padding: var(--space-6); z-index: 60; }
.modal-backdrop[hidden] { display: none; }
.modal { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 460px; overflow: hidden; }
.modal-head { padding: var(--space-5) var(--space-5) var(--space-3); }
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--navy); }
.modal-head p { margin: var(--space-2) 0 0; font-size: 13px; color: var(--muted); }
.modal-body { padding: 0 var(--space-5) var(--space-4); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--bg); border-top: 1px solid var(--border-soft); }

/* ==================== footer ==================== */

.app-footer { max-width: var(--shell); margin: 0 auto; padding: var(--space-5) var(--space-6) var(--space-7); color: var(--muted); font-size: 12px; }

/* ==================== responsive ==================== */

@media (max-width: 1280px) {
  .board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .division-row, .radar { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .board { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .app-main { padding: var(--space-4); }
}

/* ==================== TASK QUEUE (Directive 2) ====================

   The operator's primary worksurface. A BGC request is a work task: open it, see
   everything needed to phone the consultant, call them, work the ladder.

   The layout is built around that motion. Contact details are the largest thing
   on a task after the name — not a detail line — because the whole job starts
   with dialling a number. An uncontacted task is visually louder than an old one,
   matching the queue's sort: nobody has told this consultant a check is happening
   yet, and that outranks age. */

.queue { display: flex; flex-direction: column; gap: var(--space-4); }

.task {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 220px);
  gap: var(--space-5);
  padding: var(--space-5);
  align-items: start;
}
.task.uncontacted { border-left-color: var(--orange); background: linear-gradient(180deg, #fffdfc 0%, #fff 60%); }
.task.overdue { border-left-color: var(--error); }
.task.due_soon { border-left-color: var(--amber); }
.task.on_track { border-left-color: var(--green); }

.task-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.task-name { font-size: 19px; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -0.01em; }
.task-ref { font-family: var(--mono); font-size: 11px; color: var(--muted-light); }

/* The call block. Deliberately the most prominent element after the name. */
.call-block { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.call-line { display: flex; align-items: center; gap: var(--space-2); }
.call-line .call-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); width: 42px; flex: none;
}
.call-value { font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.call-value a { color: var(--navy); text-decoration: none; }
.call-value a:hover { text-decoration: underline; }
.call-value.email { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.call-value.missing { color: var(--error); font-weight: 600; font-size: 14px; }

.contact-warning {
  display: flex; align-items: flex-start; gap: var(--space-2);
  background: var(--error-bg); color: var(--error);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  font-size: 12px; font-weight: 600; margin-bottom: var(--space-3);
}

.task-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }

.task-facts { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.task-fact .k { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.task-fact .v { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.task-fact .v.empty { color: var(--muted-light); font-style: italic; }
.task-note {
  background: var(--bg); border-left: 3px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  font-size: 13px; color: var(--ink-soft);
}

.link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--navy); border: 1px solid var(--navy-tint-2);
  border-radius: var(--radius-sm); padding: 7px 12px;
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.link-btn:hover { background: var(--navy-tint); }
.link-btn svg { width: 13px; height: 13px; }

.task-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; }
.task-actions .btn-primary, .task-actions .btn-secondary { width: 100%; text-align: center; }
.task-actions .action-sep { height: 1px; background: var(--border-soft); margin: var(--space-1) 0; }

.uncontacted-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.contacted-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--green-bg); color: var(--green);
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}

.queue-section-head { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); }
.queue-section-head h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.queue-section-head .n { font-size: 13px; font-weight: 700; color: var(--navy); }

@media (max-width: 1180px) {
  .task { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .task-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .task-actions .btn-primary, .task-actions .btn-secondary { width: auto; }
}
@media (max-width: 720px) {
  .task { grid-template-columns: 1fr; }
}