: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 minmax(240px, 520px) auto;
  width: min(1180px, calc(100% - 40px));
  margin: auto;
  padding: 14px 0;
  align-items: center;
  gap: 24px;
}

.search {
  background: var(--bg);
}

.toolbar,
.toolbar-actions,
.pill-row,
.source-links,
.review-verdicts,
.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;
}

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

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

/* The download sits on the tab row because it exports 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: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;
}

.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;
}

/* 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;
}

.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;
}

/* Signal, sector and source are the primary scan targets on a card, so they
   sit directly under the name with a persistent label and value. */
.card-facets {
  display: flex;
  margin-bottom: 8px;
  gap: 6px;
  flex-wrap: wrap;
}

.facet {
  display: inline-flex;
  overflow: hidden;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.7;
}

.facet-label {
  padding: 0 7px;
  background: #f2f4f7;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10.5px;
  white-space: nowrap;
}

.facet-value {
  overflow: hidden;
  padding: 0 8px;
  color: var(--text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facet.signal .facet-label {
  background: #e5eeff;
  color: #2855a2;
}

.facet.signal .facet-value {
  color: #2855a2;
}

.facet.unknown {
  border-style: dashed;
}

.facet.unknown .facet-value {
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
}

.card-context,
.pill-row,
.source-links,
.review-verdicts {
  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;
}

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

.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);
}

.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;
}

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

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

.decision-brief-heading {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.decision-brief-heading h3 {
  margin-bottom: 0;
}

.ask-candidate {
  min-height: 30px;
  padding: 0 11px;
  border-color: #b9caf1;
  color: #244f9e;
  font-size: 13px;
  white-space: nowrap;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.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);
}

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

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

.review-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.decision-field {
  width: min(220px, 45%);
}

.signal-reviews {
  margin: 12px 0;
}

.signal-review {
  display: grid;
  grid-template-columns: 1fr minmax(190px, 42%);
  padding: 10px 0;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #dce5f4;
}

.signal-review:last-child {
  border-bottom: 0;
}

.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;
}

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

.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;
  }

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

  .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;
  }

  .detail-grid,
  .signal-review {
    grid-template-columns: 1fr;
  }

  .review-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .decision-field {
    width: 100%;
  }

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

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

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

  .decision-brief-heading {
    align-items: start;
    flex-direction: column;
  }
}

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