:root {
  --canvas: #f5f4ef;
  --surface: #ffffff;
  --surface-subtle: #eeefea;
  --ink: #111512;
  --text-muted: #58615b;
  --border: #ced4cc;
  --border-strong: #98a39a;
  --accent: #1746a2;
  --accent-subtle: #e8eefb;
  --highlight: #c7f36b;
  --positive: #12613f;
  --positive-subtle: #e9f5ee;
  --warning: #7a4a00;
  --warning-subtle: #fff7e8;
  --negative: #a12622;
  --negative-subtle: #fff0ef;
  --focus: #005fcc;
  --on-accent: #ffffff;
  --forced-canvas: Canvas;
  --forced-ink: CanvasText;
  --forced-link: LinkText;
  --forced-highlight: Highlight;
  --forced-highlight-text: HighlightText;
  --font-ui:
    "Wanted Sans Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --text-caption: 0.75rem;
  --text-meta: 0.8125rem;
  --text-compact: 0.875rem;
  --text-body: 1rem;
  --text-row-title: 1.125rem;
  --text-lede: 1.25rem;
  --text-section: 1.5rem;
  --text-score: 1.75rem;
  --text-title-min: 2rem;
  --text-title-fluid: 5vw;
  --text-title-max: 3rem;
  --leading-tight: 1.15;
  --leading-title: 1.3;
  --leading-compact: 1.5;
  --leading-body: 1.6;
  --weight-medium: 650;
  --weight-bold: 750;
  --weight-heavy: 800;
  --tracking-tight: -0.025em;
  --tracking-label: 0.06em;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --border-width: 0.0625rem;
  --focus-width: 0.1875rem;
  --focus-offset: 0.125rem;
  --focus-clearance: calc(
    var(--focus-width) +
    var(--focus-offset) +
    var(--border-width)
  );
  --radius-control: 0.5rem;
  --radius-result: 0.625rem;
  --radius-pill: 999rem;
  --target-min: 2.75rem;
  --search-mobile: 3.25rem;
  --masthead-min: 3.5rem;
  --content-max: 90rem;
  --measure: 46rem;
  --rank-width: 3rem;
  --score-width: 6rem;
  --field-min: 7rem;
  --search-field-min: 15rem;
  --header-panel-min: 16rem;
  --detail-rail-min: 18rem;
  --detail-main-fr: 1.45fr;
  --detail-rail-fr: 0.75fr;
  --detail-columns: 12;
  --detail-fact-columns: 2;
  --detail-score-columns: 3;
  --detail-sample-columns: 5;
  --detail-span-small: 5;
  --detail-span-half: 6;
  --detail-span-large: 7;
  --grid-full: 1 / -1;
  --rail-offset: 9.75rem;
  --accent-rail: 0.25rem;
  --motion-fast: 120ms;
  --motion-ease: ease;
  --layer-sticky: 20;
  --layer-skip: 100;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html {
  background: var(--canvas);
  scroll-padding-top: var(--rail-offset);
}
body {
  margin: var(--space-0);
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  word-break: keep-all;
  text-wrap: pretty;
}
a {
  display: inline-flex;
  min-width: var(--target-min);
  min-height: var(--target-min);
  align-items: center;
  color: var(--accent);
  text-underline-offset: var(--space-1);
}
button,
input,
select {
  font: inherit;
}
button,
select,
summary {
  cursor: pointer;
}
:where(a, button, input, select, summary, [tabindex]) {
  scroll-margin-block: var(--space-2);
}
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}
.sr-only {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  padding: var(--space-0);
  margin: calc(var(--border-width) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: var(--space-0);
}
.shell {
  width: min(var(--content-max), calc(100% - var(--space-8)));
  margin-inline: auto;
}
.skip-link {
  position: fixed;
  inset: var(--space-2) auto auto var(--space-2);
  z-index: var(--layer-skip);
  padding: var(--space-2) var(--space-3);
  color: var(--on-accent);
  background: var(--ink);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: translateY(var(--space-0));
}

.masthead {
  display: grid;
  min-height: var(--masthead-min);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  border-bottom: var(--border-width) solid var(--border);
}
.brand {
  color: var(--ink);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}
.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.muted {
  color: var(--text-muted);
  font-size: var(--text-compact);
  overflow-wrap: anywhere;
}
.masthead .muted {
  justify-self: end;
}
.catalog-header {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(var(--header-panel-min), 0.6fr);
  gap: var(--space-8);
  padding-block: var(--space-8) var(--space-5);
}
.eyebrow,
.field-index,
.rank,
.score,
.site-domain {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.eyebrow,
.field-index {
  margin: var(--space-0) var(--space-0) var(--space-2);
  color: var(--accent);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
h1,
h2,
h3,
p {
  margin-top: var(--space-0);
}
h1 {
  max-width: var(--measure);
  margin-bottom: var(--space-4);
  font-size: clamp(
    var(--text-title-min),
    var(--text-title-fluid),
    var(--text-title-max)
  );
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2,
h3 {
  line-height: var(--leading-title);
}
.lede {
  max-width: var(--measure);
  margin-bottom: var(--space-0);
  color: var(--text-muted);
  font-size: var(--text-lede);
}
.header-panel,
.detail-panel,
.field-guide,
.method-card {
  min-width: var(--space-0);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-result);
  background: var(--surface);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-0);
}
.stats div {
  padding: var(--space-2);
  background: var(--surface-subtle);
}
.stats dt {
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.stats dd {
  margin: var(--space-1) var(--space-0) var(--space-0);
  font-weight: var(--weight-bold);
}
.query-rail {
  display: block;
  border-block: var(--border-width) solid var(--accent);
  background: var(--accent-subtle);
}
.query-inner {
  padding-block: var(--space-3) var(--space-2);
}
.control-grid {
  display: grid;
  grid-template-columns: minmax(var(--search-field-min), 1.6fr) repeat(
      5,
      minmax(var(--field-min), 1fr)
    );
  gap: var(--space-2);
}
.field {
  display: grid;
  gap: var(--space-1);
  min-width: var(--space-0);
}
.field span {
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
}
.field input,
.field select {
  width: 100%;
  min-width: var(--space-0);
  min-height: var(--target-min);
  padding-inline: var(--space-3);
  color: var(--ink);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.search-field input {
  border-color: var(--accent);
  box-shadow: inset var(--accent-rail) var(--space-0) var(--space-0)
    var(--accent);
}
.control-footer {
  display: flex;
  min-height: var(--target-min);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.control-footer p {
  margin: var(--space-0);
  font-size: var(--text-compact);
}
.content {
  padding-block: var(--space-4) var(--space-10);
}
.page-section {
  padding-block: var(--space-10);
}
.detail-grid,
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.page-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6) var(--space-10);
  border-top: var(--border-width) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-meta);
}

.text-button,
.button,
.action-link {
  display: inline-flex;
  min-width: var(--target-min);
  min-height: var(--target-min);
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  color: var(--accent);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.action-primary {
  color: var(--on-accent);
  border-color: var(--accent);
  background: var(--accent);
}
.site-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}
.site-row {
  display: grid;
  grid-template-columns: var(--rank-width) minmax(0, 1.8fr) minmax(
      var(--header-panel-min),
      1fr
    ) var(--score-width);
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-4);
  padding-inline: var(--space-0);
  border-block: var(--border-width) solid var(--border);
  background: var(--surface);
}
.rank,
.score-cell {
  color: var(--text-muted);
}
.site-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  justify-content: flex-start;
}
.site-title {
  margin-bottom: var(--space-0);
  font-size: var(--text-row-title);
}
.site-domain {
  color: var(--text-muted);
  font-size: var(--text-meta);
  overflow-wrap: anywhere;
}
.best-for,
.caveat {
  margin-block: var(--space-1) var(--space-2);
}
.tags,
.actions,
.status-stack,
.tray-actions,
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.actions {
  margin-top: var(--space-3);
}
.site-row .actions {
  align-items: stretch;
}
.site-row .actions .action-link {
  flex: 1 1 auto;
  width: max-content;
  max-width: 100%;
}
.tag,
.status {
  display: inline-flex;
  min-height: var(--space-8);
  align-items: center;
  padding: var(--space-1) var(--space-2);
  color: var(--text-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  font-size: var(--text-caption);
  line-height: var(--leading-title);
  max-width: 100%;
  min-width: var(--space-0);
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.status-tier-S {
  color: var(--ink);
  border-color: var(--positive);
  background: var(--highlight);
  font-weight: var(--weight-heavy);
}
.status-positive {
  color: var(--positive);
  border-color: var(--positive);
  background: var(--positive-subtle);
}
.status-warning {
  color: var(--warning);
  border-color: var(--warning);
  background: var(--warning-subtle);
}
.status-negative {
  color: var(--negative);
  border-color: var(--negative);
  background: var(--negative-subtle);
}
.compare-option {
  display: inline-flex;
  min-height: var(--target-min);
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-0);
  padding-inline: var(--space-2);
  color: var(--accent);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.compare-label-short {
  font-size: var(--text-meta);
}
.compare-option input {
  width: var(--target-min);
  height: var(--target-min);
  flex: 0 0 var(--target-min);
  margin: var(--space-0);
  accent-color: var(--accent);
}
.site-evidence {
  min-width: var(--space-0);
}
.site-evidence .caveat {
  color: var(--text-muted);
  font-size: var(--text-compact);
}
summary {
  display: inline-flex;
  min-width: var(--target-min);
  min-height: var(--target-min);
  align-items: center;
  color: var(--accent);
}
.score-cell {
  min-width: var(--space-0);
  text-align: right;
}
.score {
  display: block;
  color: var(--ink);
  font-size: var(--text-score);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
}
.score-label {
  color: var(--text-muted);
  font-size: var(--text-meta);
}
.score-grid,
.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-1) var(--space-3);
  margin-block: var(--space-3) var(--space-0);
  text-align: left;
}
.score-grid dt,
.facts dt {
  color: var(--text-muted);
  font-size: var(--text-meta);
}
.score-grid dd,
.facts dd {
  min-width: var(--space-0);
  margin: var(--space-0);
  overflow-wrap: anywhere;
}
.compare-tray {
  position: sticky;
  bottom: var(--space-2);
  z-index: var(--layer-sticky);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-4);
  color: var(--on-accent);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-result);
  background: var(--accent);
}
.compare-tray p {
  margin: var(--space-0);
}
.compare-tray .field-index,
.compare-tray .button {
  color: var(--on-accent);
}
.compare-tray .button {
  border-color: var(--on-accent);
  background: var(--accent);
}
.compare-tray [aria-disabled="true"] {
  color: var(--border);
  cursor: not-allowed;
}
.empty-state {
  border-inline-start: var(--accent-rail) solid var(--warning);
}
.no-js-notice {
  padding: var(--space-3);
  border-inline-start: var(--accent-rail) solid var(--accent);
  background: var(--accent-subtle);
}
.detail-section,
.field-guide {
  margin-top: var(--space-4);
}
.detail-actions {
  margin-block: var(--space-6);
}

.compare-view {
  margin-top: var(--space-8);
}

.compare-view-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-inline-start: var(--space-4);
  border-inline-start: var(--accent-rail) solid var(--accent);
}

.compare-view-header h2,
.compare-view-header p {
  margin-bottom: var(--space-0);
}

.compare-table {
  width: 100%;
  overflow: hidden;
  border: var(--border-width) solid var(--border-strong);
  border-spacing: var(--space-0);
  border-radius: var(--radius-result);
  background: var(--surface);
}

.compare-row {
  display: grid;
}

.compare-sites-2 .compare-row {
  grid-template-columns: minmax(var(--field-min), 0.7fr) repeat(
      2,
      minmax(0, 1fr)
    );
}

.compare-sites-3 .compare-row {
  grid-template-columns: minmax(var(--field-min), 0.7fr) repeat(
      3,
      minmax(0, 1fr)
    );
}

.compare-sites-4 .compare-row {
  grid-template-columns: minmax(var(--field-min), 0.7fr) repeat(
      4,
      minmax(0, 1fr)
    );
}

.compare-table tbody + tbody .compare-row:first-child {
  border-top: var(--accent-rail) solid var(--accent);
}

.compare-row + .compare-row {
  border-top: var(--border-width) solid var(--border);
}

.compare-label,
.compare-value {
  min-width: var(--space-0);
  padding: var(--space-3);
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: top;
}

.compare-label {
  color: var(--text-muted);
  background: var(--surface-subtle);
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
}

.compare-value + .compare-value {
  border-inline-start: var(--border-width) solid var(--border);
}

.compare-site-heading {
  display: grid;
  align-content: start;
  gap: var(--space-1);
}

.compare-site-heading a {
  align-items: flex-start;
  font-size: var(--text-row-title);
  font-weight: var(--weight-bold);
}

.mobile-label {
  display: none;
  margin-bottom: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}

.compare-diagnostic {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-inline-start: var(--accent-rail) solid var(--warning);
  background: var(--warning-subtle);
}

.compare-diagnostic h2 {
  font-size: var(--text-row-title);
}

.compare-diagnostic p {
  margin-bottom: var(--space-3);
}

@media (max-width: 47.99rem) {
  .compare-view-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .compare-sites-2 .compare-row,
  .compare-sites-3 .compare-row,
  .compare-sites-4 .compare-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .compare-table thead .compare-label {
    border-bottom: var(--border-width) solid var(--border);
  }

  .compare-value + .compare-value {
    border-inline-start: var(--space-0);
    border-top: var(--border-width) solid var(--border);
  }

  .mobile-label {
    display: block;
  }
}

@media (forced-colors: active) {
  .compare-table,
  .compare-label,
  .compare-value,
  .compare-diagnostic {
    color: var(--forced-ink);
    border-color: var(--forced-ink);
    background: var(--forced-canvas);
  }

  .compare-table tbody + tbody .compare-row:first-child,
  .compare-view-header {
    border-color: var(--forced-link);
  }
}

.detail-page {
  padding-block: var(--space-8);
}
.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, var(--detail-main-fr)) minmax(
      var(--detail-rail-min),
      var(--detail-rail-fr)
    );
  gap: var(--space-8);
  align-items: start;
  padding-bottom: var(--space-8);
  border-bottom: var(--border-width) solid var(--border-strong);
}
.detail-intro {
  padding-inline-start: var(--space-4);
  border-inline-start: var(--accent-rail) solid var(--accent);
}
.identity-status,
.resource-actions,
.detail-return {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.identity-status {
  margin-bottom: var(--space-4);
}
.identity-facts {
  display: grid;
  grid-template-columns: repeat(var(--detail-fact-columns), minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  max-width: var(--measure);
  margin-block: var(--space-5) var(--space-0);
}
.identity-facts div,
.evidence-facts div {
  min-width: var(--space-0);
}
.identity-facts dt,
.evidence-facts dt,
.sample-summary dt {
  color: var(--text-muted);
  font-size: var(--text-meta);
}
.identity-facts dd,
.evidence-facts dd,
.sample-summary dd {
  margin: var(--space-1) var(--space-0) var(--space-0);
  overflow-wrap: anywhere;
}
.detail-action-rail {
  display: grid;
  gap: var(--space-4);
}
.outbound-cluster,
.copy-site-link {
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-result);
  background: var(--surface);
}
.outbound-warning {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) var(--space-0) var(--space-0);
  padding: var(--space-3);
  border-inline-start: var(--accent-rail) solid currentColor;
  background: var(--surface-subtle);
  font-size: var(--text-compact);
}
.copy-site-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}
.copy-site-link h2 {
  margin-bottom: var(--space-0);
  font-size: var(--text-row-title);
}
.copy-status,
.copy-fallback {
  grid-column: var(--grid-full);
  margin: var(--space-0);
}
.copy-status {
  min-height: calc(var(--text-compact) * var(--leading-compact));
  font-size: var(--text-compact);
}
.copy-status[data-copy-state="success"] {
  color: var(--positive);
}
.copy-status[data-copy-state="fallback"] {
  color: var(--warning);
}
.copy-fallback {
  display: grid;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-meta);
}
.copy-fallback input {
  width: 100%;
  min-height: var(--target-min);
  padding-inline: var(--space-3);
  color: var(--ink);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
}
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(var(--detail-columns), minmax(0, 1fr));
  gap: var(--space-4);
  padding-block: var(--space-6);
}
.evidence-group {
  min-width: var(--space-0);
  padding: var(--space-5);
  border-top: var(--accent-rail) solid var(--accent);
  border-inline: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
  border-radius: var(--radius-result);
  background: var(--surface);
}
.evidence-score,
.evidence-caveats {
  grid-column: span var(--detail-span-small);
}
.evidence-access,
.evidence-samples {
  grid-column: span var(--detail-span-large);
}
.evidence-rights,
.evidence-freshness {
  grid-column: span var(--detail-span-half);
}
.evidence-heading {
  display: grid;
  grid-template-columns: var(--rank-width) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  margin-bottom: var(--space-4);
}
.evidence-heading p,
.evidence-heading h2 {
  margin-bottom: var(--space-0);
}
.evidence-heading p {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
}
.evidence-heading h2 {
  font-size: var(--text-section);
}
.score-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
}
.score-summary p {
  margin: var(--space-0);
  font-family: var(--font-mono);
}
.score-summary strong {
  font-size: var(--text-score);
}
.evidence-facts,
.sample-summary {
  display: grid;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-4) var(--space-0) var(--space-0);
}
.evidence-facts {
  grid-template-columns: repeat(var(--detail-fact-columns), minmax(0, 1fr));
}
.score-components {
  grid-template-columns: repeat(var(--detail-score-columns), minmax(0, 1fr));
}
.sample-summary {
  grid-template-columns: repeat(var(--detail-sample-columns), minmax(0, 1fr));
}
.sample-summary div {
  padding: var(--space-2);
  background: var(--surface-subtle);
}
.sample-summary dd {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
}
.boundary-note,
.caveat-callout {
  margin-block: var(--space-4) var(--space-0);
  padding: var(--space-3);
  border-inline-start: var(--accent-rail) solid var(--warning);
  background: var(--warning-subtle);
}
.caveat-callout h3,
.evidence-note h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-row-title);
}
.caveat-callout p,
.evidence-note p {
  margin-bottom: var(--space-0);
}
.evidence-note {
  margin-top: var(--space-6);
}
.sample-list {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-6);
}
.sample-link {
  display: grid;
  justify-items: start;
  padding-block: var(--space-2);
}
.sample-url {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.new-tab-disclosure {
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
}
.empty-evidence {
  color: var(--text-muted);
}
.detail-return {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-strong);
}

.detail-page,
.detail-intro,
.detail-action-rail,
.outbound-cluster,
.copy-site-link,
.evidence-grid,
.evidence-note,
.caveat-callout {
  min-width: var(--space-0);
}
.copy-site-link > *,
.evidence-heading > * {
  min-width: var(--space-0);
}
.detail-document .masthead {
  padding-block: var(--focus-clearance);
}
.detail-document .masthead > *,
.detail-document .masthead nav {
  min-width: var(--space-0);
}
.detail-page h1,
.detail-page .lede,
.outbound-warning,
.boundary-note,
.caveat-callout p,
.evidence-note p {
  overflow-wrap: anywhere;
}

.info-page,
.diagnostic-page {
  min-width: var(--space-0);
}

.info-header {
  display: grid;
  grid-template-columns: minmax(0, var(--detail-main-fr)) minmax(
      var(--header-panel-min),
      var(--detail-rail-fr)
    );
  gap: var(--space-8);
  align-items: end;
  padding: var(--space-8) var(--space-6);
  border-inline-start: var(--accent-rail) solid var(--accent);
  background: var(--surface);
}

.info-index {
  margin: var(--space-0);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-title-max);
  font-weight: var(--weight-heavy);
  line-height: var(--leading-tight);
  text-align: end;
}

.methodology-grid,
.privacy-grid {
  margin-top: var(--space-6);
}

.method-card {
  border-top: var(--accent-rail) solid var(--accent);
}

.method-card-wide {
  grid-column: var(--grid-full);
}

.method-facts,
.enum-guide {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
}

.method-facts {
  grid-template-columns: repeat(var(--detail-score-columns), minmax(0, 1fr));
}

.enum-guide {
  grid-template-columns: repeat(var(--detail-fact-columns), minmax(0, 1fr));
}

.method-facts div {
  min-width: var(--space-0);
  padding: var(--space-2);
  background: var(--surface-subtle);
}

.method-facts dt {
  color: var(--text-muted);
  font-size: var(--text-meta);
}

.method-facts dd {
  margin: var(--space-1) var(--space-0) var(--space-0);
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.enum-guide div {
  min-width: var(--space-0);
  padding: var(--space-3);
  border-inline-start: var(--accent-rail) solid var(--accent);
  background: var(--surface-subtle);
}

.enum-guide dt {
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.enum-guide dd {
  margin: var(--space-2) var(--space-0) var(--space-0);
}

.observation-card,
.privacy-boundary {
  border-inline-start: var(--accent-rail) solid var(--warning);
  background: var(--warning-subtle);
}

.info-actions,
.diagnostic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(var(--detail-columns), minmax(0, 1fr));
  gap: var(--space-4);
}

.privacy-primary {
  grid-column: span var(--detail-span-large);
}

.log-card {
  grid-column: span var(--detail-span-small);
}

.privacy-boundary {
  grid-column: var(--grid-full);
  padding: var(--space-5);
  border-radius: var(--radius-result);
}

.privacy-boundary p {
  margin-bottom: var(--space-0);
}

.plain-list {
  display: grid;
  gap: var(--space-3);
  padding-inline-start: var(--space-6);
}

.log-facts {
  grid-template-columns: repeat(var(--detail-fact-columns), minmax(0, 1fr));
}

.diagnostic-page {
  display: grid;
  grid-template-columns: minmax(0, var(--detail-rail-fr)) minmax(
      0,
      var(--detail-main-fr)
    );
  gap: var(--space-8);
  align-items: stretch;
}

.diagnostic-code,
.diagnostic-copy {
  min-width: var(--space-0);
  padding: var(--space-8);
  border-radius: var(--radius-result);
}

.diagnostic-code {
  display: grid;
  place-items: center;
  color: var(--on-accent);
  background: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-title-max);
  font-weight: var(--weight-heavy);
}

.diagnostic-copy {
  border: var(--border-width) solid var(--border);
  background: var(--surface);
}

@media (max-width: 47.99rem) {
  .info-header,
  .diagnostic-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-header,
  .diagnostic-code,
  .diagnostic-copy {
    padding: var(--space-4);
  }

  .info-index {
    text-align: start;
  }

  .method-card-wide,
  .privacy-primary,
  .log-card,
  .privacy-boundary {
    grid-column: var(--grid-full);
  }

  .method-facts,
  .log-facts,
  .enum-guide {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .info-header,
  .method-card,
  .privacy-boundary,
  .diagnostic-code,
  .diagnostic-copy {
    color: var(--forced-ink);
    border-color: var(--forced-ink);
    background: var(--forced-canvas);
  }

  .info-header,
  .method-card {
    border-top-color: var(--forced-link);
  }

  .info-index {
    color: var(--forced-link);
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-row {
    grid-template-columns: var(--rank-width) minmax(0, 1fr) var(--score-width);
  }
  .site-evidence {
    grid-column: 2 / -1;
  }
}

@media (max-width: 47.99rem) {
  .shell {
    width: min(var(--content-max), calc(100% - var(--space-8)));
  }
  .field,
  .search-field,
  .query-inner {
    min-width: var(--space-0);
  }
  .masthead,
  .detail-document .masthead {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-3);
  }
  .masthead nav {
    gap: var(--space-1);
  }
  .masthead .muted {
    justify-self: start;
  }
  .catalog-header,
  .control-grid,
  .detail-grid,
  .detail-hero,
  .method-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .detail-hero {
    gap: var(--space-4);
    padding-bottom: var(--space-5);
  }
  .detail-intro {
    padding-inline-start: var(--space-4);
  }
  .evidence-group {
    grid-column: var(--grid-full);
    padding: var(--space-4);
  }
  .identity-facts,
  .evidence-facts,
  .score-components,
  .sample-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .copy-site-link {
    grid-template-columns: minmax(0, 1fr);
  }
  .catalog-header {
    gap: var(--space-4);
    padding-block: var(--space-5) var(--space-4);
  }
  .field input,
  .field select {
    min-height: var(--target-min);
  }
  .control-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-row {
    grid-template-columns: var(--rank-width) minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-3);
    padding-inline: var(--space-0);
  }
  .site-title-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
  }
  .site-title {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .site-domain {
    grid-column: 1;
    min-width: 0;
  }
  .compare-option {
    grid-column: 2;
    grid-row: 1;
    min-height: var(--target-min);
    padding-inline: var(--space-0);
  }
  .site-evidence,
  .score-cell {
    grid-column: 2;
  }
  .score-cell {
    text-align: left;
  }
  .score {
    display: inline;
    margin-right: var(--space-1);
    font-size: var(--text-lede);
  }
  .compare-tray {
    position: static;
    grid-template-columns: minmax(0, 1fr);
  }
  .page-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition: none;
  }
}

@media (forced-colors: active) {
  body,
  .header-panel,
  .detail-panel,
  .field-guide,
  .method-card,
  .site-row,
  .field input,
  .field select,
  .text-button,
  .button,
  .action-link {
    color: var(--forced-ink);
    border-color: var(--forced-ink);
    background: var(--forced-canvas);
  }
  a,
  .field-index,
  summary {
    color: var(--forced-link);
  }
  .compare-tray {
    color: var(--forced-ink);
    border-color: var(--forced-ink);
    background: var(--forced-canvas);
    forced-color-adjust: none;
  }
  .compare-tray p,
  .compare-tray .field-index,
  .compare-tray .button {
    color: inherit;
  }
  .status-tier-S {
    color: var(--forced-highlight-text);
    border-color: var(--forced-highlight);
    background: var(--forced-highlight);
    forced-color-adjust: none;
  }
  .action-primary,
  .compare-tray .button,
  .copy-fallback input {
    color: var(--forced-link);
    border-color: var(--forced-link);
    background: var(--forced-canvas);
    forced-color-adjust: none;
  }
  .detail-hero,
  .outbound-cluster,
  .copy-site-link,
  .evidence-group,
  .boundary-note,
  .caveat-callout,
  .sample-summary div {
    color: var(--forced-ink);
    border-color: var(--forced-ink);
    background: var(--forced-canvas);
  }
  :focus-visible {
    outline-color: var(--forced-highlight);
  }
}

[hidden] {
  display: none;
}

@media (max-width: 47.99rem) {
  .site-row .actions {
    gap: var(--space-1);
  }
  .site-row .actions .action-link {
    flex: 1 1 calc(33.333% - var(--space-1));
    justify-content: center;
    padding-inline: var(--space-2);
    white-space: nowrap;
  }
}