:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #fff;
  --text: #16181d;
  --muted: #6b7079;
  --line: #e0e4e9;
  --blue: #2563eb;
  --green: #14804a;
  --red: #b42318;
  --amber: #9a5b05;
  /* No web font is shipped. "Inter" was absent everywhere and the generic
     `system-ui` keyword resolves to a fixed-width face on Linux hosts without
     a system-ui mapping, so the app rendered entirely in monospace. Named
     platform faces with a `sans-serif` backstop always resolve proportionally. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", "Noto Sans", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  display: inline-flex;
  min-height: 38px;
  padding: 0 13px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd1d8;
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

button.primary:disabled {
  border-color: #c3c8d0;
  background: #d5d9df;
  color: #5c626b;
  opacity: 1;
}

button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

button.compact {
  min-height: 32px;
  padding: 0 8px;
  font-size: 12px;
}

.icon-button {
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 24px;
  font-weight: 400;
}

input,
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #cbd1d8;
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
}

textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.5;
}

:is(button, input, select, textarea, a):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* The card button fills its rounded, overflow-hidden parent, so an outset
   ring would be clipped away entirely. This one sits inside the card. */
.card-summary:focus-visible {
  outline-offset: -3px;
  border-radius: 16px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: var(--blue);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 23px;
}

h3 {
  margin-bottom: 8px;
  font-size: 14px;
}

.muted,
.helper {
  color: var(--muted);
}

.helper {
  font-size: 12px;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  /* Fully opaque: at 96% the scrolled card content read through the header. */
  background: var(--surface);
}

.header-inner {
  display: grid;
  grid-template-columns: auto auto minmax(220px, 1fr) auto;
  width: min(1180px, calc(100% - 40px));
  margin: auto;
  padding: 14px 0;
  align-items: center;
  gap: 24px;
}

.app-tabs {
  display: flex;
  align-items: center;
}

.app-tabs {
  gap: 2px;
}

.app-tab {
  min-height: 34px;
  padding: 0 10px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

.app-tab:hover {
  background: #f1f3f6;
  color: var(--text);
}

.app-tab.active {
  background: #e9eef8;
  color: #244a8f;
}

.shared-search {
  display: flex;
  min-width: 0;
  gap: 8px;
}

.search {
  min-width: 0;
  flex: 1;
  background: var(--bg);
}

.toolbar,
.toolbar-actions,
.pill-row,
.source-links,
.submit-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-controls {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
}

.profile-avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
  font-weight: 700;
}

.field,
.quality-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.page {
  width: min(1180px, calc(100% - 40px));
  margin: auto;
  padding: 28px 0 48px;
}

.people-page {
  display: grid;
  gap: 16px;
}

.people-header {
  display: grid;
  gap: 12px;
}

.people-header .muted {
  margin-top: 4px;
}

.people-status {
  min-height: 19px;
  grid-column: 1 / -1;
  font-size: 12px;
}

.people-status.error {
  color: var(--red);
}

.people-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 540px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.people-results-panel {
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: #fafbfc;
}

.panel-heading {
  display: flex;
  padding: 0 6px 8px;
  align-items: baseline;
  justify-content: space-between;
}

.people-results {
  display: grid;
}

.people-placeholder,
.record-empty {
  padding: 12px 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.person-result {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 9px;
  border-color: transparent;
  background: transparent;
  text-align: left;
}

.person-result:hover,
.person-result.active {
  background: #eef3fc;
}

.person-result strong,
.person-result small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-result strong {
  margin-bottom: 3px;
  font-size: 12px;
}

.person-result small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
}

.person-empty {
  display: grid;
  min-height: 540px;
  place-content: center;
  color: var(--muted);
  text-align: center;
}

.person-empty h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 16px;
}

.person-dossier-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 20px 22px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.person-dossier-header .person-avatar {
  width: 46px;
  height: 46px;
  font-size: 13px;
}

.person-dossier-header p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.dossier-counts {
  color: var(--muted);
  font-size: 11px;
}

.dossier-section {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.dossier-section:last-child {
  border-bottom: 0;
}

.dossier-section > h3 {
  margin-bottom: 10px;
}

.graph-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fafbfd;
}

.person-graph {
  display: block;
  width: 100%;
}

.graph-line {
  stroke: #c7d1df;
}

.graph-node circle {
  fill: white;
  stroke: #93a4ba;
  stroke-width: 1.3;
}

.graph-node.root circle {
  fill: #315ca8;
  stroke: #244a8f;
}

.graph-node text {
  fill: #333a45;
  font-size: 9px;
  font-weight: 600;
  text-anchor: middle;
}

.graph-node.root text {
  fill: #fff;
}

.graph-overflow-note {
  padding: 7px;
  border-top: 1px solid #e3e7ed;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 10px;
  gap: 8px;
}

.fact-grid > div {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.fact-grid dt,
.assessment-row span,
.evidence-row span {
  display: block;
  margin-bottom: 4px;
  color: #848b96;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.fact-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.record-list {
  display: grid;
}

.assessment-row,
.evidence-row {
  display: grid;
  padding: 10px 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.assessment-row:last-child,
.evidence-row:last-child {
  border-bottom: 0;
}

.assessment-row h4,
.evidence-row h4 {
  margin: 0 0 3px;
  font-size: 12px;
}

.assessment-row p,
.evidence-row p,
.evidence-index {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

/* The researched evidence index sits under a record's summary. Each item keeps
   the field it supports so a reviewer can see which claim a link backs. */
.evidence-index {
  margin: 6px 0 0;
  padding-left: 16px;
  display: grid;
  gap: 3px;
}

.evidence-index li {
  /* A long provider value must wrap inside the row rather than widen it. */
  overflow-wrap: anywhere;
}

.evidence-index strong {
  color: var(--text);
  font-weight: 600;
}

.queue-header,
.candidate-list {
  display: grid;
}

.queue-header {
  gap: 15px;
  margin-bottom: 18px;
}

/* The downloads sit on the tab row because they export exactly what the
   selected tab shows, not the whole queue. */
.queue-bar {
  display: flex;
  align-items: center;
  /* The tab strip scrolls inside this row rather than widening it. Without an
     explicit floor the row takes its content width from the grid and pushes
     the whole page sideways on a phone. */
  min-width: 0;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

/* One row of queues, ordered by falling system conviction. Narrow viewports
   scroll it sideways rather than wrapping a label away from its count. */
.queue-tabs {
  display: flex;
  overflow-x: auto;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  gap: 2px;
  scrollbar-width: none;
}

.queue-tabs::-webkit-scrollbar {
  display: none;
}

/* The 36px icon-button primitive, filled so it reads as an action against the
   flat tabs. The margin clears the 38px tab's selected underline rather than
   letting the circle sit on the divider. */
.queue-download {
  flex: none;
  margin-bottom: 4px;
  border-radius: 999px;
  background: #eef0f3;
  color: #4a505a;
}

.queue-download svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.queue-download-text {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.queue-download:hover:not(:disabled) {
  background: #e3e6ea;
  color: var(--text);
}

.queue-tab {
  flex: none;
  padding: 0 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #565c66;
  white-space: nowrap;
}

/* What the system ruled out and what a human already closed are reference,
   not work, so they sit past a divider and read quieter. */
.queue-tab.group-start {
  margin-left: 14px;
  border-left: 1px solid var(--line);
  padding-left: 20px;
}

.queue-tab.secondary {
  color: #7c828c;
  font-weight: 500;
}

.queue-tab.secondary .count {
  background: transparent;
  color: #7c828c;
}

/* Selection must beat the quiet treatment, so it is declared last. */
.queue-tab.active {
  border-bottom-color: var(--blue);
  color: var(--text);
  font-weight: 600;
}

.queue-tab.active .count {
  background: var(--blue);
  color: white;
}

.queue-hint {
  margin: -6px 0 0;
  font-size: 13px;
}

.queue-status {
  margin: -6px 0 0;
  padding: 9px 11px;
  border: 1px solid #e4c97a;
  border-radius: 8px;
  background: #fff9e8;
  color: #6d5411;
  font-size: 13px;
}

.queue-status .link {
  display: inline;
  margin: 0 0 0 4px;
}

.count,
.pill {
  border-radius: 999px;
  font-size: 12px;
}

.count {
  padding: 2px 7px;
  background: #eef0f3;
}

.toolbar,
.submit-row {
  justify-content: space-between;
  gap: 16px;
}

/* The submit button is the row's only child, so it anchors to the right. */
.submit-row {
  justify-content: flex-end;
}


/* Refinements live inline in the toolbar. There is no panel to open and no
   toggle to find: a control is on screen only when it can change the result. */
.toolbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.toolbar-actions .field {
  display: block;
}

.toolbar-actions select {
  min-width: 0;
  padding: 0 30px 0 10px;
  color: #4a505a;
  font-size: 13px;
}

/* Every refinement is multi-select, so each is a button that summarises its
   selection over a checkbox list rather than a single-value <select>. */
.multi {
  position: relative;
}

.multi-toggle {
  gap: 6px;
  max-width: 240px;
  font-size: 13px;
  font-weight: 500;
}

.multi-toggle .chevron svg {
  width: 13px;
  height: 13px;
}

.multi.open .chevron {
  transform: rotate(180deg);
}

/* An applied refinement is visibly committed, not just another dropdown. */
.multi-toggle.applied {
  border-color: var(--blue);
  background: #f3f7ff;
  color: var(--blue);
  font-weight: 600;
}

.multi-panel {
  position: absolute;
  z-index: 25;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  overflow-y: auto;
  min-width: 220px;
  max-height: 320px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgb(20 26 38 / 18%);
}

.multi-panel label {
  display: flex;
  padding: 6px 8px;
  gap: 9px;
  align-items: center;
  border-radius: 7px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.multi-panel label:hover {
  background: #f1f4f9;
}

.multi-separator {
  height: 1px;
  margin: 5px 8px;
  background: var(--line);
}

/* The global text-input sizing above would render each checkbox as an 84x40
   field, so a checkbox opts back out to its intrinsic box. */
.multi-panel input[type="checkbox"] {
  width: 15px;
  min-height: 0;
  height: 15px;
  flex: none;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--blue);
}

/* Right-click quick actions on a candidate avatar. */
.action-menu {
  position: fixed;
  z-index: 50;
  display: grid;
  min-width: 210px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgb(20 26 38 / 20%);
}

.action-menu button {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-weight: 500;
  justify-content: flex-start;
}

.action-menu button:hover:not(:disabled) {
  background: #f1f4f9;
}

.link {
  min-height: 0;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  text-decoration: underline;
}

.candidate-list {
  gap: 12px;
}

.company-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  white-space: nowrap;
}

.company-group-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-height: 0;
  padding: 0;
  accent-color: var(--blue);
}

.candidate-company-group {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.candidate-company-group h2 {
  margin: 0 4px 4px;
  font-size: 14px;
}

.candidate-company-group h2 span {
  color: var(--muted);
  font-weight: 400;
}

.candidate-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.candidate-card.expanded {
  border-color: #a9c0f7;
}

.card-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  padding: 17px 18px;
  align-items: start;
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font-weight: 400;
}

.person-avatar {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: #eef1f5;
  color: #445064;
}

.card-body {
  min-width: 0;
}

.card-titlebar {
  display: flex;
  margin-bottom: 6px;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.card-title {
  font-size: 16px;
}

.card-context,
.pill-row,
.source-links {
  flex-wrap: wrap;
}

.card-context {
  display: flex;
  margin-bottom: 9px;
  gap: 5px 12px;
  color: var(--muted);
  font-size: 13px;
}

.detail-meta {
  margin-top: 8px;
}

.card-evidence {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* The expanded decision brief owns the full thesis. Keeping the collapsed
   preview above it made the same prose appear twice on one card. */
.candidate-card.expanded .card-evidence {
  display: none;
}

.card-side {
  display: grid;
  justify-items: end;
  gap: 9px;
}

/* queue row */

/* The row is a focusable div, not a button, so it names its own affordance. */
.card-summary {
  cursor: pointer;
}

/* Line 2: the trigger sentence. One line, ellipsised; the full sentence is
   the span's title. */
.card-trigger {
  display: block;
  overflow: hidden;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-trigger-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: none;
}

.card-trigger-link:hover,
.card-trigger-link:focus-visible {
  text-decoration: underline;
}

.card-trigger-company {
  color: var(--muted);
}

/* Line 3: chips sit on the same baseline as the plain facts beside them. */
.card-context {
  align-items: center;
}

.card-context .pill.flag {
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.card-doubt-count {
  color: var(--amber);
  font-weight: 600;
}

/* The modal shows the same summary over the details; the sentence may wrap
   there, since the card has the room and the details repeat nothing. */
.card-summary-static .card-trigger {
  overflow: visible;
  white-space: normal;
}

/* end queue row */

.pill {
  padding: 2px 8px;
  background: #eff1f4;
  color: #4e5560;
}

.pill.signal {
  background: #eef4ff;
  color: #2855a2;
}

.pill.valid {
  background: #eaf8f0;
  color: var(--green);
}

.pill.false {
  background: #fff0ee;
  color: var(--red);
}

.pill.missing {
  background: #fff6e8;
  color: var(--amber);
}

.pill.valid.strong {
  background: var(--green);
  color: white;
}

/* A readiness caveat is not a recommendation, so it never borrows a
   decision tone. */
.pill.readiness {
  border: 1px dashed #c6ccd4;
  background: transparent;
  color: var(--muted);
}

.pill.reviewed-marker {
  border: 1px solid #b9c7dd;
  background: #eef3fb;
  color: #3f587c;
}

.chevron {
  display: inline-flex;
  color: var(--muted);
  transition: transform 120ms ease;
}

.chevron svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.card-details {
  display: grid;
  border-top: 1px solid var(--line);
}

.monitoring-plan {
  display: grid;
  padding: 16px 18px;
  gap: 10px;
  border: 1px solid #ead7a5;
  border-radius: 12px;
  background: #fffbf1;
}

.monitoring-plan .brief-heading {
  display: flex;
  margin: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.monitoring-plan p {
  color: #3e4550;
  line-height: 1.5;
}

.monitoring-plan .evidence-list {
  padding-left: 20px;
}

.monitoring-plan .evidence-list li:last-child {
  margin-bottom: 0;
}

.evidence-list {
  margin: 0;
  padding-left: 18px;
}

.evidence-list li {
  margin-bottom: 8px;
  color: #343941;
  line-height: 1.5;
}

.evidence-list.supporting li::marker {
  color: var(--green);
}

.event-metadata {
  display: flex;
  margin: 4px 0;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--muted);
  font-size: 12px;
}

.quality-panel,
.review-summary {
  border: 1px solid #cfdbf2;
  border-radius: 13px;
}

.error {
  margin-top: 7px;
  color: var(--red);
  font-size: 12px;
}

.review-summary {
  display: grid;
  gap: 12px;
  border-color: #cfe6d8;
  background: #f8fcfa;
}

.review-note {
  padding-top: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

/* Everyone who has ruled on this candidate, behind a disclosure: the current
   verdict is what a reviewer acts on, and who reached it before them is
   context they open when the attribution matters. */
.review-history > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}

.review-history-entry {
  margin-top: 11px;
  padding-left: 11px;
  border-left: 2px solid #cfe6d8;
}

.review-history-entry .review-note {
  padding-top: 5px;
  font-size: 13px;
}

/* The standing review, quoted while someone else amends it. */
.prior-review-note {
  margin-bottom: 11px;
  padding: 11px 13px;
  border-left: 2px solid #cfdbf2;
  border-radius: 0 8px 8px 0;
  background: #f6f8fc;
}

.prior-review-note .review-note {
  padding-top: 5px;
  font-size: 13px;
}

.review-actions button,
.quality-panel .submit-row .secondary {
  min-height: 38px;
  padding: 0 14px;
  border-color: #c7d0dc;
  background: var(--surface);
}

.review-actions .quiet-danger {
  color: #9b2c2c;
}

/* An expanded card is one complete investment narrative followed by the
   evidence record and the reviewer's response. Nothing in that sequence is
   hidden behind a disclosure control. */
.card-details {
  padding: 24px 24px 26px 78px;
  gap: 24px;
}

.section-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.candidate-narrative {
  display: grid;
  gap: 22px;
}

.narrative-conclusion {
  padding: 18px 20px;
  border-left: 4px solid #315ca8;
  border-radius: 0 9px 9px 0;
  background: #f4f7fd;
}

.conclusion-heading,
.review-heading,
.review-subheading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.conclusion-heading h3 {
  color: #214f9e;
  font-size: 21px;
}

.conclusion-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.evidence-basis {
  color: var(--muted);
  font-size: 12px;
  margin: 2px 0 0;
}

.narrative-conclusion p {
  max-width: 980px;
  margin-top: 8px;
  color: #262b33;
  font-size: 15px;
  line-height: 1.62;
}

.evidence-record h3,
.evidence-table-section h3,
.supporting-evidence h3 {
  margin-bottom: 10px;
  font-size: 15px;
}

/* The four regions of the full card. The number and the label are the only
   ornament: the reviewer reads the card top to bottom, and the marker says
   which of the four questions the section answers. */
.card-region {
  display: grid;
  padding-top: 20px;
  gap: 16px;
}

.card-region:first-child {
  padding-top: 0;
}

.region-label {
  display: flex;
  margin: 0;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.13em;
}

.region-marker {
  display: inline-flex;
  width: 19px;
  height: 19px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: #52627c;
  font-size: 11px;
  letter-spacing: 0;
}

.card-doubt-region,
.card-proof-region,
.card-verdict-region {
  display: grid;
  gap: 20px;
}

.doubt-flags,
.proof-flags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* The tooltip says how the match was made and what it does not check, so the
   mark that carries it has to be visible on the chip itself. It is drawn
   rather than typed: a circled-i character is missing from enough system font
   stacks to render as a blank box. */
.flag-method {
  display: inline-flex;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentcolor;
  border-radius: 999px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 700;
  opacity: 0.75;
}

/* No cap and no disclosure control: every open question is on the card. */
.doubt-list li {
  margin-bottom: 9px;
}

.doubt-tag {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f1e7e7;
  color: #8a4b4b;
  font-size: 10px;
  font-weight: 700;
}

.doubt-no-signal .brief-copy {
  color: #3e4550;
  font-size: 14px;
  line-height: 1.55;
}

/* One row per claim, with the source that proves it one click away. Wide
   content scrolls inside the table rather than the card. */
.evidence-table-section {
  overflow-x: auto;
}

.evidence-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.evidence-table th {
  padding: 0 10px 6px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
}

.evidence-table td {
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--line);
  color: #343941;
  line-height: 1.5;
  vertical-align: top;
}

.evidence-table td:last-child,
.evidence-table th:last-child {
  padding-right: 0;
}

.evidence-stance {
  font-weight: 650;
  white-space: nowrap;
}

.evidence-stance.supporting {
  color: var(--green);
}

.evidence-stance.contradicting {
  color: #9b2c2c;
}

.evidence-stance.context {
  color: var(--muted);
}

.evidence-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Career: the person's affiliations grouped by organisation, as two dated
   columns, Current and Past, with Education as one compact list beneath.
   Each entry is a table entry, not a sentence — monogram, organisation, then
   a line per role with its dates — so the column reads at a glance and never
   competes with the headline that may already state the current company. */
.career h3 {
  margin-bottom: 10px;
  font-size: 15px;
}

.career-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}

.career-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 10px;
  list-style: none;
}

.career-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.career-body {
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
}

.career-org {
  color: #262b33;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.career-org a {
  color: #214f9e;
  text-decoration: underline;
  text-decoration-color: #b7c7e6;
  text-underline-offset: 2px;
}

.career-org a:hover,
.career-org a:focus-visible {
  text-decoration-color: currentColor;
}

/* A role line never wraps its dates under itself: a long role folds inside
   its own box and the dates stay beside its first line, so the dates of one
   line are never mistaken for the next line's. */
.career-meta {
  display: flex;
  gap: 4px 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.career-role {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A second role at the same organisation is its own line under the name. */
.career-meta + .career-meta {
  margin-top: 2px;
}

.career-dates {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Education: full width under the columns, one line per institution —
   institution · degree(s) · years — with no monogram, because a degree is
   context for the career rather than a chapter of it. */
.career-education {
  margin-top: 18px;
}

.career-education-list {
  gap: 4px;
}

.career-education-row {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.career-education-row .career-org {
  display: inline;
}

.career-sep {
  color: var(--muted);
}

/* The verification mark is the edge's own status, read from the graph. It is
   small because it qualifies the row rather than headlining it. */
.career-mark {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
  background: #eef1f5;
  color: #52627c;
}

.career-mark.verified {
  background: #e3f3ea;
  color: var(--green);
}

.career-mark.needs_review {
  background: #fbefdb;
  color: var(--amber);
}

/* A logo slot drawn in CSS: two letters on a tinted disc, the tint hashed from
   the organisation name so the same organisation looks the same on every card.
   No image is fetched for it. */
.career-monogram {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: #eef1f5;
  color: #445064;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.career-monogram.tone-0 { background: #e6edf9; color: #2b4f8f; }
.career-monogram.tone-1 { background: #e4f3ea; color: #1f6b43; }
.career-monogram.tone-2 { background: #fbeee0; color: #8a5215; }
.career-monogram.tone-3 { background: #f4e7f0; color: #7b3468; }
.career-monogram.tone-4 { background: #e5f2f4; color: #24646f; }
.career-monogram.tone-5 { background: #f6e8e4; color: #8a3d2e; }
.career-monogram.tone-6 { background: #ecebf8; color: #4b4590; }
.career-monogram.tone-7 { background: #eef1e2; color: #56631f; }

.career-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.company-peers {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.company-peer-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.company-peer {
  display: inline-flex;
  width: auto;
  padding: 7px 10px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.company-peer:hover,
.company-peer:focus-visible {
  border-color: #8ba8e5;
  background: #f7f9fd;
}

.company-peer span:last-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.company-peer-person {
  display: grid;
  gap: 4px;
  text-align: left;
}

.company-peer-person small {
  color: var(--muted);
  font-weight: 400;
}

.evidence-record {
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.evidence-record-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.entry-events {
  grid-column: span 2;
}

.source-records h3 {
  margin-bottom: 8px;
}

.source-links a {
  font-size: 12px;
}

.source-group {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

/* card trigger region */
/* The first region of the full card: why this person is here, read in under
   five seconds without scrolling. Chips, the event headline, its provenance,
   the why paragraph, and the link rail, top to bottom, closed by a rule so
   the conclusion below reads as the next question rather than the same one. */
.card-trigger-region {
  display: grid;
  padding-bottom: 22px;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.trigger-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.trigger-chips .pill {
  padding: 3px 9px;
  font-weight: 600;
}

/* The sector is context, not an event pattern, so it is outlined rather than
   filled. */
.trigger-chips .pill.sector {
  border: 1px solid #c9d1dc;
  background: transparent;
  color: #4d5766;
}

.trigger-headline {
  max-width: 980px;
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.trigger-headline a {
  color: #214f9e;
  text-decoration: underline;
  text-decoration-color: #b7c7e6;
  text-underline-offset: 3px;
}

.trigger-headline a:hover,
.trigger-headline a:focus-visible {
  text-decoration-color: currentColor;
}

.trigger-provenance {
  display: flex;
  margin: -4px 0 0;
  gap: 6px 12px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.trigger-provenance .pill.found-on {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.trigger-why .brief-copy {
  max-width: 980px;
  margin-top: 8px;
  color: #262b33;
  font-size: 15px;
  line-height: 1.62;
}

/* Labelled buttons rather than bare hostnames: one click per source, and the
   rail wraps at narrow widths rather than scrolling. */
.link-rail {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.link-rail-item {
  display: inline-flex;
  min-height: 32px;
  padding: 0 10px 0 8px;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.link-rail-item:hover,
.link-rail-item:focus-visible {
  border-color: #8ba8e5;
  background: #f7f9fd;
  color: #214f9e;
}

.link-rail-item .link-glyph {
  width: 15px;
  height: 15px;
  flex: none;
}

.link-rail-item .link-external {
  width: 10px;
  height: 10px;
  flex: none;
  color: var(--muted);
}
/* end card trigger region */

.review-summary {
  padding: 19px;
}

.quality-panel {
  display: grid;
  padding: 4px 0 0;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.review-heading h3 {
  margin: 0;
  font-size: 19px;
}

.review-heading p {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.review-heading p strong {
  color: var(--green);
  font-size: 13px;
}

.decision-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  gap: 8px;
  border: 0;
}

.decision-option {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 46px;
  padding: 9px 12px;
  align-items: center;
  gap: 10px;
  border: 1px solid #d5dbe4;
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.decision-option:hover {
  border-color: #aab7ca;
}

.decision-option:has(input:checked) {
  border-color: #315ca8;
  background: #f5f8ff;
  box-shadow: inset 3px 0 #315ca8;
}

.decision-option input[type="radio"] {
  width: 16px;
  min-height: 0;
  height: 16px;
  padding: 0;
  accent-color: #315ca8;
}

.decision-option strong {
  font-size: 13px;
}

.feedback-section {
  padding-top: 16px;
  border-top: 1px solid #d8dee7;
}

.review-subheading h4 {
  font-size: 14px;
}

.review-subheading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.feedback-block {
  display: grid;
  margin-top: 10px;
  gap: 8px;
}

.feedback-shortcuts {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.feedback-shortcuts button {
  min-height: 28px;
  padding: 0 9px;
  border-color: #d5dbe4;
  border-radius: 999px;
  color: #4d5766;
  font-size: 10.5px;
  font-weight: 600;
}

.feedback-shortcuts button:hover {
  border-color: #9eacc0;
  background: #fff;
}

.feedback-block textarea {
  min-height: 96px;
  background: var(--surface);
  font-size: 12px;
}

.quality-panel .submit-row {
  display: flex;
  justify-content: flex-end;
}

.quality-panel .submit-row .primary {
  width: 170px;
  min-height: 42px;
}

.candidate-card.expanded .card-side .pill,
.candidate-card.expanded .card-side .helper {
  display: none;
}

.empty {
  padding: 72px 20px;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}

/* The full card opens in a modal over the queue, which stays painted and
   scrolled where it was. The page behind cannot scroll while it is open; the
   card scrolls inside the panel. */
body.modal-open {
  overflow: hidden;
}

.card-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  padding: 28px 16px;
  align-items: flex-start;
  justify-content: center;
  background: rgb(20 26 38 / 55%);
}

.card-modal-panel {
  display: flex;
  overflow: hidden;
  width: min(1040px, 100%);
  max-height: 100%;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 60px rgb(20 26 38 / 30%);
}

.card-modal-panel:focus-visible {
  outline-offset: -3px;
}

/* Close, the card's own link, and the pager — in that order, so the link is
   the first thing read after the name. */
.card-modal-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px 14px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #fbfbfc;
}

.card-modal-close {
  font-size: 26px;
  line-height: 1;
}

.card-modal-link {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.card-modal-link input {
  min-height: 34px;
  padding: 4px 10px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  text-overflow: ellipsis;
}

.card-modal-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.card-modal-pager button {
  width: 32px;
  padding: 0;
  font-size: 18px;
}

.card-modal-content {
  overflow: auto;
  flex: 1 1 auto;
  overscroll-behavior: contain;
}

.card-modal-content .candidate-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.card-summary-static {
  cursor: default;
}

/* The row whose card is open in the modal, so the list underneath still
   shows where the reviewer is. */
.candidate-card.open {
  border-color: #a9c0f7;
  box-shadow: inset 3px 0 0 var(--blue);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  display: none;
  padding: 11px 14px;
  border-radius: 10px;
  background: #1c222c;
  color: white;
}

.toast.show {
  display: block;
}

@media (max-width: 720px) {
  .header-inner {
    grid-template-columns: 1fr auto;
    padding: 14px;
    gap: 8px;
  }

  .shared-search {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .app-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .app-tab {
    flex: 1;
  }

  .page {
    width: calc(100% - 24px);
    padding-top: 20px;
  }

  .toolbar,
  .submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  /* Five stacked selects filled the whole first screen on a phone. Paired up,
     the refinements cost three short rows instead of five tall ones. */
  .toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .toolbar-actions .field:last-of-type {
    grid-column: 1 / -1;
  }

  .card-summary {
    grid-template-columns: auto 1fr;
    padding: 15px;
  }

  /* queue row */
  .card-trigger {
    overflow: visible;
    white-space: normal;
  }
  /* end queue row */

  .card-side {
    grid-column: 2;
    justify-items: start;
  }

  .card-details {
    padding: 18px 15px 15px;
  }

  /* One column on a phone: Current above Past. */
  .career-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Edge to edge on a phone: the panel is the screen. */
  .card-modal {
    padding: 0;
  }

  .card-modal-panel {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .card-modal-header {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px 10px;
  }

  .card-modal-pager {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .evidence-record-content,
  .decision-options {
    grid-template-columns: 1fr;
  }

  .entry-events {
    grid-column: auto;
  }

  .conclusion-heading,
  .review-heading,
  .review-subheading {
    display: grid;
    align-items: start;
  }

  .quality-panel {
    padding: 0 0 15px;
  }

  .review-heading {
    align-items: start;
  }

  .review-heading p {
    display: grid;
    justify-items: end;
    gap: 1px;
  }

  .quality-panel .submit-row button {
    width: 100%;
  }

  .people-header,
  .people-workspace {
    grid-template-columns: 1fr;
  }

  .people-results-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .person-dossier-header {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 20px 16px;
  }

  .dossier-section {
    padding: 19px 16px;
  }

  .fact-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
}