/* Findings receiver UI.
   Every colour resolves through a --tcs-* token from tokens.css.
   Density follows the TCS console: 14px/20px body, 12px/600 table headers. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tcs-page);
  color: var(--tcs-text-primary);
  font-family: var(--tcs-font-sans);
  font-size: var(--tcs-text-base);
  line-height: var(--tcs-leading-base);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--tcs-text-link); text-decoration: none; }
a:hover { color: var(--tcs-text-link-hover); text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--tcs-focus-ring); }
code, pre { font-family: var(--tcs-font-mono); }

/* ---------- header ---------- */
.tcs-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tcs-space-lg);
  padding: var(--tcs-space-md) var(--tcs-space-xl);
  background: var(--tcs-surface);
  border-bottom: 1px solid var(--tcs-border);
}
.tcs-header__brand { display: flex; align-items: center; gap: var(--tcs-space-md); }
.tcs-header__logo { height: 21px; width: auto; display: block; }
.tcs-header h1 {
  margin: 0; font-size: var(--tcs-text-md); line-height: var(--tcs-leading-md);
  font-weight: var(--tcs-weight-medium);
}
.tcs-header__nav { display: flex; gap: var(--tcs-space-lg); font-size: var(--tcs-text-sm); }
.tcs-header__meta { font-size: var(--tcs-text-xs); color: var(--tcs-text-secondary); }

.wrap { max-width: 1280px; margin: 0 auto; padding: var(--tcs-space-xl); }
.foot {
  max-width: 1280px; margin: 0 auto;
  padding: 0 var(--tcs-space-xl) var(--tcs-space-xl);
  font-size: var(--tcs-text-xs); color: var(--tcs-text-tertiary);
}

/* ---------- cards ---------- */
.tcs-card {
  background: var(--tcs-surface);
  border: 1px solid var(--tcs-border);
  border-radius: var(--tcs-radius-sm);
  box-shadow: var(--tcs-shadow-card);
  padding: var(--tcs-space-lg);
}
.tcs-card--flush { padding: 0; overflow: hidden; }
.tcs-card__title {
  margin: 0 0 var(--tcs-space-md);
  font-size: var(--tcs-text-md); line-height: var(--tcs-leading-md);
  font-weight: var(--tcs-weight-medium);
}
.stack > * + * { margin-top: var(--tcs-space-xl); }

/* ---------- KPI row ---------- */
.kpis {
  display: grid; gap: var(--tcs-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.tcs-kpi__label {
  font-size: var(--tcs-text-xs); font-weight: var(--tcs-weight-semibold);
  color: var(--tcs-text-secondary);
}
.tcs-kpi__value {
  font-size: var(--tcs-text-kpi); line-height: var(--tcs-leading-kpi);
  font-weight: var(--tcs-weight-bold); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.tcs-kpi__value--sub {
  font-size: var(--tcs-text-lg); line-height: var(--tcs-leading-lg);
}
.tcs-kpi__note { font-size: var(--tcs-text-xs); color: var(--tcs-text-tertiary); }
.tcs-kpi__value--alert { color: var(--tcs-ind-red-fg); }

/* ---------- chips ---------- */
.tcs-chip {
  display: inline-flex; align-items: center; gap: var(--tcs-space-2xs);
  padding: 1px var(--tcs-space-sm);
  border-radius: var(--tcs-radius-xs);
  border: 1px solid transparent;
  font-size: var(--tcs-text-xs); font-weight: var(--tcs-weight-semibold);
  line-height: var(--tcs-leading-xs); white-space: nowrap;
}
/* Glyph as well as colour: red/orange is unreliable for ~8% of male readers. */
.tcs-chip::before { font-size: 10px; line-height: 1; }
.tcs-chip--critical { color: var(--tcs-ind-red-fg);    background: var(--tcs-ind-red-bg);    border-color: var(--tcs-ind-red-bd); }
.tcs-chip--critical::before { content: "\25CF"; }
.tcs-chip--high     { color: var(--tcs-ind-orange-fg); background: var(--tcs-ind-orange-bg); border-color: var(--tcs-ind-orange-bd); }
.tcs-chip--high::before { content: "\25CF"; }
.tcs-chip--medium   { color: var(--tcs-ind-amber-fg);  background: var(--tcs-ind-amber-bg);  border-color: var(--tcs-ind-amber-bd); }
.tcs-chip--medium::before { content: "\25CB"; }
.tcs-chip--low      { color: var(--tcs-ind-yellow-fg); background: var(--tcs-ind-yellow-bg); border-color: var(--tcs-ind-yellow-bd); }
.tcs-chip--low::before { content: "\25CB"; }
.tcs-chip--info     { color: var(--tcs-ind-blue-fg);   background: var(--tcs-ind-blue-bg);   border-color: var(--tcs-ind-blue-bd); }
.tcs-chip--info::before { content: "\25AB"; }
.tcs-chip--none     { color: var(--tcs-ind-grey-fg);   background: var(--tcs-ind-grey-bg);   border-color: var(--tcs-ind-grey-bd); }
.tcs-chip--plain    { color: var(--tcs-ind-grey-fg);   background: var(--tcs-ind-grey-bg);   border-color: var(--tcs-border); }
.tcs-chip--good     { color: var(--tcs-ind-green-fg);  background: var(--tcs-ind-green-bg);  border-color: var(--tcs-ind-green-bd); }

/* ---------- table ---------- */
/* Nine columns do not fit 1280px on a laptop. Scroll the table, not the page:
   the filter bar and KPI row stay put while you pan the columns. */
.table-scroll { overflow-x: auto; }
.tcs-table { width: 100%; border-collapse: collapse; font-size: var(--tcs-text-base); }
.tcs-table thead th {
  padding: var(--tcs-space-sm) var(--tcs-space-md);
  text-align: left;
  font-size: var(--tcs-text-xs); font-weight: var(--tcs-weight-semibold);
  color: var(--tcs-text-secondary);
  background: var(--tcs-surface-sunken);
  border-bottom: 1px solid var(--tcs-border);
  white-space: nowrap;
}
.tcs-table tbody td {
  padding: var(--tcs-space-sm) var(--tcs-space-md);
  border-bottom: 1px solid var(--tcs-border-mild);
  vertical-align: middle;
}
.tcs-table tbody tr:hover { background: var(--tcs-surface-sunken); }
.tcs-table tbody tr:last-child td { border-bottom: 0; }
.tcs-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tcs-table .mono { font-family: var(--tcs-font-mono); font-size: var(--tcs-text-xs); }
.truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--tcs-text-tertiary); }
.nowrap { white-space: nowrap; }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--tcs-space-md); align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: var(--tcs-space-2xs); }
.field > label {
  font-size: var(--tcs-text-xs); font-weight: var(--tcs-weight-semibold);
  color: var(--tcs-text-secondary);
}
.field select, .field input {
  height: 32px; padding: 0 var(--tcs-space-sm);
  border: 1px solid var(--tcs-border-secondary);
  border-radius: var(--tcs-radius-sm);
  background: var(--tcs-surface);
  color: var(--tcs-text-primary);
  font: var(--tcs-weight-regular) var(--tcs-text-base)/1 var(--tcs-font-sans);
  min-width: 150px;
}
.tcs-btn {
  display: inline-flex; align-items: center; gap: var(--tcs-space-xs);
  height: 32px; padding: 0 var(--tcs-space-md);
  border-radius: var(--tcs-radius-sm);
  font: var(--tcs-weight-medium) var(--tcs-text-base)/1 var(--tcs-font-sans);
  cursor: pointer; border: 1px solid transparent;
}
.tcs-btn--primary { background: var(--tcs-accent-600); color: var(--tcs-text-invert); }
.tcs-btn--primary:hover { background: var(--tcs-accent-700); }
.tcs-btn--tertiary {
  background: var(--tcs-surface); color: var(--tcs-text-primary);
  border-color: var(--tcs-border-secondary); text-decoration: none;
}
.tcs-btn--tertiary:hover { background: var(--tcs-surface-strong); text-decoration: none; }

/* ---------- pager ---------- */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tcs-space-md); padding: var(--tcs-space-md);
  border-top: 1px solid var(--tcs-border);
  font-size: var(--tcs-text-sm); color: var(--tcs-text-secondary);
}
.pager__links { display: flex; gap: var(--tcs-space-sm); }

/* ---------- detail ---------- */
.detail-grid {
  display: grid; gap: var(--tcs-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.kv { display: grid; grid-template-columns: 150px 1fr; gap: var(--tcs-space-xs) var(--tcs-space-md); }
.kv dt { font-size: var(--tcs-text-xs); font-weight: var(--tcs-weight-semibold); color: var(--tcs-text-secondary); }
.kv dd { margin: 0; word-break: break-word; }
pre.raw {
  margin: 0; padding: var(--tcs-space-md);
  background: var(--tcs-surface-sunken);
  border: 1px solid var(--tcs-border);
  border-radius: var(--tcs-radius-sm);
  font-size: var(--tcs-text-xs); line-height: 18px;
  overflow: auto; max-height: 620px;
}
.empty { padding: var(--tcs-space-3xl); text-align: center; color: var(--tcs-text-tertiary); }

@media print {
  body { background: #fff; }
  .tcs-card { box-shadow: none; break-inside: avoid; }
  .tcs-table thead { display: table-header-group; }
  .tcs-table tbody tr { break-inside: avoid; }
  .filters, .tcs-header__nav, .pager__links { display: none; }
}