@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
:root {
  color-scheme: light dark;
  --background: #fff;
  --foreground: #20252a;
  --muted: #626a73;
  --line: #dce0e4;
  --subtle: #f6f7f8;
  --link: #235ea4;
  --kem: #39664e;
  --signature: #755087;
  --kex: #815d32;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #17191c;
    --foreground: #e4e7eb;
    --muted: #a6adb7;
    --line: #383e46;
    --subtle: #20242a;
    --link: #91bdf4;
    --kem: #9fc6ad;
    --signature: #c8afdb;
    --kex: #d2b48c;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 16px/1.45 "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
main { max-width: 1440px; margin: auto; padding: 28px 32px 48px; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
header, .title, nav, .table-meta { display: flex; align-items: baseline; gap: 20px; }
header { justify-content: space-between; margin-bottom: 24px; }
h1 { font-size: inherit; letter-spacing: -.025em; font-weight: 600; margin: 0; }
.title span, .table-meta, .unknown, .number { color: var(--muted); }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
#filters { display: flex; align-items: end; gap: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-weight: 500; }
.search { flex: 1; }
input, select, button {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  min-height: 36px;
  padding: 6px 10px;
}
input { width: 100%; }
select { min-width: 170px; }
button { cursor: pointer; background: var(--subtle); }
.table-meta { margin: 13px 0 9px; }
.table-meta p { margin: 0; }
.table-scroll { overflow-x: auto; border-top: 1px solid var(--line); }
table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: left; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { padding: 0; font-weight: 500; color: var(--muted); background: var(--subtle); white-space: nowrap; }
.sort-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.sort-button:enabled:hover, th[aria-sort] { color: var(--foreground); }
.sort-button:enabled:hover { background: var(--line); }
.sort-button:focus-visible { outline-offset: -3px; }
.sort-button:disabled { cursor: default; }
.sort-button:disabled .sort-indicator { visibility: hidden; }
.sort-indicator { display: inline-flex; flex-direction: column; gap: 3px; }
.sort-indicator::before, .sort-indicator::after {
  content: "";
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  opacity: .4;
}
.sort-indicator::before { border-bottom: 4px solid currentColor; }
.sort-indicator::after { border-top: 4px solid currentColor; }
th[aria-sort="ascending"] .sort-indicator::before,
th[aria-sort="descending"] .sort-indicator::after { opacity: 1; }
th[aria-sort="ascending"] .sort-indicator::after,
th[aria-sort="descending"] .sort-indicator::before { visibility: hidden; }
tbody th { font-weight: 500; min-width: 180px; max-width: 310px; overflow-wrap: anywhere; }
.candidate-name { display: block; max-width: 30ch; }
tbody tr:hover { background: var(--subtle); }
.number { width: 40px; font-variant-numeric: tabular-nums; }
tr[data-category="KEM"] .category { color: var(--kem); }
tr[data-category="Signature"] .category { color: var(--signature); }
tr[data-category="KEX"] .category,
tr[data-category="NIKE"] .category { color: var(--kex); }
sup { line-height: 0; }
#no-results { padding: 24px 0; color: var(--muted); text-align: center; }
[hidden] { display: none !important; }
.visually-hidden, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus { display: inline-block; margin: 8px 32px; }
@media (max-width: 700px) {
  main { padding: 20px 16px 32px; }
  header { gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
  .title { gap: 12px; }
  nav { gap: 16px; }
  #filters { flex-wrap: wrap; gap: 10px; }
  .search { flex-basis: 100%; }
  #filters label:not(.search) { flex: 1; min-width: 0; }
  select { min-width: 0; width: 100%; }
  #filters button { min-height: 44px; }
  input, select { min-height: 44px; }
  th, td { padding: 8px; }
  thead th { padding: 0; }
  .sort-button { padding: 8px; }
}