/* ============================================================
   /check pages — page-level layer (B3). First adopter of tokens.css.
   Every rule is scoped under .wb-check so nothing leaks into the
   legacy site; only --wb-* tokens are used (dark default, light via
   prefers-color-scheme / [data-theme] handled in tokens.css).
   Component internals live in the scoped .razor.css files under
   Components/Shared/Check and Components/Pages/Check.
   ============================================================ */

.wb-check,
.wb-check *,
.wb-check *::before,
.wb-check *::after { box-sizing: border-box; }

.wb-check {
  color-scheme: dark;
  font-family: var(--wb-font-sans);
  font-size: var(--wb-text-md);
  line-height: var(--wb-leading-normal);
  color: var(--wb-text);
  /* Transparent: sits on the site body (legacy #0E0B1F + bloom today, --wb-bg once Part C lands) so there is
     no seam through .wb-main padding; cards/tiles carry --wb-surface-1. */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  margin: 0 auto;
  padding-bottom: var(--wb-space-8);
}
:root[data-theme="light"] .wb-check { color-scheme: light; }
@media (prefers-color-scheme: light) { :root[data-theme="auto"] .wb-check { color-scheme: light; } }
.wb-check p { margin: 0; }
.wb-check a { color: var(--wb-accent); text-decoration: none; }
.wb-check a:hover { color: var(--wb-accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.wb-check h1, .wb-check h2, .wb-check h3, .wb-check h4 {
  margin: 0;
  color: var(--wb-text-strong);
  font-weight: var(--wb-weight-semibold);
  line-height: var(--wb-leading-tight);
  letter-spacing: var(--wb-tracking-tight);
}
.wb-check code, .wb-check .mono { font-family: var(--wb-font-mono); font-size: 0.92em; }
.wb-check button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.wb-check :focus-visible { outline: none; box-shadow: var(--wb-focus-ring); border-radius: var(--wb-radius-sm); }
.wb-check svg.i {
  width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.wb-check .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* layout */
.wb-check .wrap { max-width: var(--wb-container); margin: 0 auto; padding: 0 var(--wb-space-4); }
.wb-check .wrap-narrow { max-width: var(--wb-container-narrow); margin: 0 auto; padding: 0 var(--wb-space-4); }

/* buttons */
.wb-check .btn {
  display: inline-flex; align-items: center; gap: var(--wb-space-2);
  height: 2.25rem; padding: 0 var(--wb-space-3);
  border: 1px solid var(--wb-border-strong); border-radius: var(--wb-radius-md);
  background: var(--wb-surface-1); color: var(--wb-text-strong);
  font-size: var(--wb-text-sm); font-weight: var(--wb-weight-medium); white-space: nowrap; line-height: 1;
  text-decoration: none;
  transition: background var(--wb-dur) var(--wb-ease), border-color var(--wb-dur) var(--wb-ease);
}
.wb-check .btn:hover { background: var(--wb-surface-2); border-color: var(--wb-text-dim); text-decoration: none; color: var(--wb-text-strong); }
.wb-check .btn:disabled, .wb-check .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.wb-check .btn-primary { background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-text-on-accent); }
.wb-check .btn-primary:hover { background: var(--wb-accent-hover); border-color: var(--wb-accent-hover); color: var(--wb-text-on-accent); }
.wb-check .btn-sm { height: 1.75rem; padding: 0 var(--wb-space-2); font-size: var(--wb-text-xs); border-radius: var(--wb-radius-sm); }
.wb-check .btn-ghost { border-color: transparent; background: transparent; color: var(--wb-text-muted); }
.wb-check .btn-ghost:hover { background: var(--wb-surface-2); color: var(--wb-text-strong); }

/* chips + id tags */
.wb-check .chip {
  display: inline-flex; align-items: center; gap: .3em; height: 1.375rem; padding: 0 .5rem;
  border-radius: var(--wb-radius-sm); border: 1px solid var(--wb-border); background: var(--wb-surface-2);
  color: var(--wb-text-muted); font: var(--wb-weight-medium) var(--wb-text-xs)/1 var(--wb-font-mono); white-space: nowrap;
}
.wb-check .chip-pass { color: var(--wb-pass); background: var(--wb-pass-subtle); border-color: transparent; }
.wb-check .chip-warn { color: var(--wb-warn); background: var(--wb-warn-subtle); border-color: transparent; }
.wb-check .chip-fail { color: var(--wb-fail); background: var(--wb-fail-subtle); border-color: transparent; }
.wb-check .chip-info { color: var(--wb-info); background: var(--wb-info-subtle); border-color: transparent; }
.wb-check .chip-neutral { color: var(--wb-neutral); background: var(--wb-neutral-subtle); border-color: transparent; }
.wb-check .chip-accent { color: var(--wb-accent); background: var(--wb-accent-subtle); border-color: transparent; }
.wb-check .id {
  font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); color: var(--wb-text-dim);
  border: 1px solid var(--wb-border); border-radius: 4px; padding: 0 .35rem; line-height: 1.25rem; white-space: nowrap;
}

/* status dots (shared by check rows, page grid, compare table) */
.wb-check .st { display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; font-size: .7rem; flex: 0 0 auto; }
.wb-check .st-pass { color: var(--wb-pass); background: var(--wb-pass-subtle); }
.wb-check .st-warn { color: var(--wb-warn); background: var(--wb-warn-subtle); }
.wb-check .st-fail { color: var(--wb-fail); background: var(--wb-fail-subtle); }
.wb-check .st-na { color: var(--wb-neutral); background: var(--wb-neutral-subtle); }
.wb-check .st-info { color: var(--wb-info); background: var(--wb-info-subtle); }

/* cards */
.wb-check .card { background: var(--wb-surface-1); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg); min-width: 0; max-width: 100%; }
.wb-check .card-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-2) var(--wb-space-3);
  padding: var(--wb-space-3) var(--wb-space-4); border-bottom: 1px solid var(--wb-border); min-height: 2.75rem;
}
.wb-check .card-h h2, .wb-check .card-h h3 { font-size: var(--wb-text-md); font-weight: var(--wb-weight-semibold); }
.wb-check .card-h .counts { margin-left: auto; display: flex; gap: var(--wb-space-1); flex-wrap: wrap; }
.wb-check .card-h .chip.right { margin-left: auto; }
.wb-check .card-b { padding: var(--wb-space-4); }

/* section titles + groups */
.wb-check .sec-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wb-space-3); margin: var(--wb-space-6) 0 var(--wb-space-3); scroll-margin-top: var(--wb-space-5); }
.wb-check .sec-title h2 { font-size: var(--wb-text-xl); }
.wb-check .sec-title .sum { color: var(--wb-text-muted); font-size: var(--wb-text-sm); }
.wb-check .sec-title .sum b { color: var(--wb-text-strong); font-family: var(--wb-font-mono); font-weight: var(--wb-weight-medium); }
.wb-check .groups { display: flex; flex-direction: column; gap: var(--wb-space-3); }

/* bars */
.wb-check .bar { height: 3px; border-radius: 2px; background: var(--wb-surface-3); overflow: hidden; }
.wb-check .bar i { display: block; height: 100%; background: var(--wb-text-dim); }
.wb-check .bar.pass i { background: var(--wb-pass); }
.wb-check .bar.good i { background: var(--wb-band-good); }
.wb-check .bar.warn i { background: var(--wb-warn); }
.wb-check .bar.fail i { background: var(--wb-fail); }

/* code blocks */
.wb-check pre.code {
  font-family: var(--wb-font-mono); font-size: var(--wb-text-xs); line-height: 1.55; color: var(--wb-text);
  background: var(--wb-surface-3); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-md);
  padding: var(--wb-space-3); overflow-x: auto; white-space: pre; margin: 0; max-width: 100%;
}

/* alerts / notices */
.wb-check .notice {
  display: flex; gap: var(--wb-space-3); align-items: flex-start;
  padding: var(--wb-space-3) var(--wb-space-4); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-md);
  background: var(--wb-surface-1); color: var(--wb-text-muted); font-size: var(--wb-text-sm);
}
.wb-check .notice-fail { border-color: var(--wb-fail); color: var(--wb-text); }
.wb-check .notice-fail svg.i { color: var(--wb-fail); }
.wb-check .notice-warn { border-color: var(--wb-warn); color: var(--wb-text); }
.wb-check .notice-warn svg.i { color: var(--wb-warn); }
.wb-check .notice-pass { border-color: var(--wb-pass); color: var(--wb-text); }
.wb-check .notice-pass svg.i { color: var(--wb-pass); }

/* kicker */
.wb-check .kicker {
  color: var(--wb-text-dim); font-size: var(--wb-text-xs); letter-spacing: var(--wb-tracking-caps);
  text-transform: uppercase; font-weight: var(--wb-weight-medium); margin-bottom: var(--wb-space-1);
}

/* footer strip of alternate formats */
.wb-check .formats { margin-top: var(--wb-space-7); border-top: 1px solid var(--wb-border); padding-top: var(--wb-space-4); color: var(--wb-text-dim); font-size: var(--wb-text-xs); display: flex; flex-wrap: wrap; gap: var(--wb-space-2) var(--wb-space-4); align-items: center; }
.wb-check .formats a { color: var(--wb-text-muted); font-family: var(--wb-font-mono); }

/* generic form input */
.wb-check .input {
  flex: 1; min-width: 0; height: 2.75rem; padding: 0 var(--wb-space-3);
  border: 1px solid var(--wb-border-strong); border-radius: var(--wb-radius-md);
  background: var(--wb-surface-1); color: var(--wb-text-strong);
  font: var(--wb-weight-normal) var(--wb-text-md)/1 var(--wb-font-mono);
}
.wb-check .input::placeholder { color: var(--wb-text-dim); }
.wb-check .input:focus { outline: none; border-color: var(--wb-accent); box-shadow: 0 0 0 3px var(--wb-accent-subtle); }
.wb-check .input:disabled { opacity: .6; }
.wb-check select.input { font-family: var(--wb-font-sans); }

/* tables (leaderboards, compare) */
.wb-check .tbl-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.wb-check .tbl { width: 100%; border-collapse: collapse; font-size: var(--wb-text-sm); }
.wb-check .tbl th {
  text-align: left; font-weight: var(--wb-weight-medium); color: var(--wb-text-dim); font-size: var(--wb-text-xs);
  letter-spacing: var(--wb-tracking-caps); text-transform: uppercase; padding: var(--wb-space-2) var(--wb-space-3);
  border-bottom: 1px solid var(--wb-border);
}
.wb-check .tbl td { padding: 0 var(--wb-space-3); height: var(--wb-row-h); border-bottom: 1px solid var(--wb-divider); white-space: nowrap; }
.wb-check .tbl tr:last-child td { border-bottom: 0; }
.wb-check .tbl tbody tr:hover td { background: var(--wb-surface-2); }
.wb-check .tbl .host { font-family: var(--wb-font-mono); color: var(--wb-text); max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wb-check .tbl .host a { color: var(--wb-text); }
.wb-check .tbl .num { font-family: var(--wb-font-mono); text-align: right; font-weight: var(--wb-weight-semibold); color: var(--wb-text-strong); }
.wb-check .tbl .num small { color: var(--wb-text-dim); font-weight: var(--wb-weight-normal); }
.wb-check .tbl .dim { color: var(--wb-text-dim); text-align: right; font-size: var(--wb-text-xs); }
.wb-check .tbl .lvl { font-size: var(--wb-text-xs); color: var(--wb-text-muted); }
.wb-check .tbl .right { text-align: right; }
@media (max-width: 480px) { .wb-check .tbl .dim, .wb-check .tbl th:last-child { display: none; } }

/* skip link for in-page nav */
.wb-check .muted { color: var(--wb-text-muted); }
.wb-check .dimtext { color: var(--wb-text-dim); }
.wb-check .empty { padding: var(--wb-space-4); color: var(--wb-text-dim); font-size: var(--wb-text-sm); }