/* Fonts */
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("fonts/SourceCodeVF-Upright.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* Tokens */
:root {
  --color-text: #313130;
  --color-text-muted: #515151;
  --color-bg: #ffffff;
  --color-surface: #f4f4f4;
  --color-border: #b9b9b9;
  --color-accent: #ed6d05;
  --color-accent-strong: #ff8700;
  --color-link: #a24b03;
  --color-header-bg: #171717;
  --color-target: #006792;
  --color-on-dark: #ffffff;
  --color-status-same: #254a25;
  --color-status-deviates: #7a1f1f;
  --color-status-unverified: #313130;
  --color-status-fix: #006792;
  --color-status-core-bug: #5c4400;

  --font-sans: "Source Sans 3", system-ui, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, monospace;

  --size-body: 1.125rem;
  --size-h1: 2.5rem;
  --size-h2: 2rem;
  --size-h3: 1.5rem;
  --size-small: 0.9375rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --radius: 4px;
  --width-content: 72ch;
  --width-wide: 1320px;
  --edge: max(var(--space-3), calc((100% - var(--width-wide)) / 2 + var(--space-3)));
}

@media (max-width: 600px) {
  :root {
    --size-h1: 2rem;
    --size-h2: 1.625rem;
  }
}

/* Base typography */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.5;
  overflow-wrap: break-word;
}

main {
  max-width: var(--width-wide);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

main > * { max-width: var(--width-content); }
main > .compare, main > .swatches { max-width: none; }

h1, h2, h3 { font-weight: 500; line-height: 1.2; margin: var(--space-5) 0 var(--space-3); }
h1 { font-size: var(--size-h1); margin-top: 0; }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

p, ul, ol { margin: 0 0 var(--space-3); }
ul, ol { padding-left: var(--space-4); }
li + li { margin-top: var(--space-1); }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}
.site-header :focus-visible { outline-color: var(--color-accent-strong); }

code, pre { font-family: var(--font-mono); font-size: 0.875em; }
:not(pre) > code {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 0.1em 0.35em;
}
pre {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow-x: auto;
  white-space: pre;
  line-height: 1.45;
}

/* Header and footer */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) var(--edge);
  background: var(--color-header-bg);
  color: var(--color-on-dark);
  border-bottom: 4px solid var(--color-accent);
}
.site-header a {
  color: var(--color-on-dark);
  font-size: var(--size-h3);
  font-weight: 700;
  text-decoration: none;
}
.site-header a:hover { text-decoration: underline; }

.site-footer {
  padding: var(--space-4) var(--edge);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--size-small);
}
.site-footer p { max-width: var(--width-content); margin: 0; }

/* Status badges */
.badge {
  display: inline-block;
  padding: 0 0.5em;
  border: 1px solid;
  border-radius: var(--radius);
  font-size: var(--size-small);
  line-height: 1.5;
  white-space: nowrap;
}
.badge--same { color: var(--color-status-same); background: #def1de; border-color: var(--color-status-same); }
.badge--deviates { color: var(--color-status-deviates); background: #fbe3e3; border-color: var(--color-status-deviates); font-weight: 700; }
.badge--unverified { color: var(--color-status-unverified); background: #f4f4f4; border-color: var(--color-status-unverified); border-style: dashed; }
.badge--fix { color: var(--color-status-fix); background: #e5f1f6; border-color: var(--color-status-fix); }
.badge--core-bug { color: var(--color-status-core-bug); background: #fdf1cf; border-color: var(--color-status-core-bug); border-style: double; border-width: 3px; }

/* Evidence block */
.evidence { margin: var(--space-3) 0 0; }
.evidence figcaption { margin-bottom: var(--space-1); font-size: var(--size-small); }
.evidence__kind {
  display: inline-block;
  margin-right: var(--space-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.evidence__local { color: var(--color-text-muted); }
.evidence code { overflow-wrap: anywhere; }

/* Fact card */
.fact {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius);
  scroll-margin-top: var(--space-4);
}
.fact--same { border-left-color: var(--color-status-same); }
.fact--deviates { border-left-color: var(--color-status-deviates); }
.fact--unverified { border-left-color: var(--color-status-unverified); }
.fact--fix { border-left-color: var(--color-status-fix); }
.fact--core-bug { border-left-color: var(--color-status-core-bug); }
.fact:target { border-color: var(--color-accent); border-left-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.fact > header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.fact h3 { margin: 0; }
.fact__label { margin: 0 0 var(--space-1); font-size: var(--size-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.fact__now > :last-child, .fact__target > :last-child { margin-bottom: 0; }
.fact__target { margin-top: var(--space-3); padding-left: var(--space-3); border-left: 4px solid var(--color-target); }
.fact__target .fact__label { color: var(--color-target); }

/* Comparison table */
.compare { overflow-x: auto; margin: 0 0 var(--space-4); }
.compare table { width: 100%; border-collapse: collapse; }
.compare caption { text-align: left; font-weight: 700; padding-bottom: var(--space-2); }
.compare th, .compare td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.compare thead th { background: var(--color-surface); }
.compare tbody th { font-weight: 500; }
.compare tr.is-deviation > * { box-shadow: inset 4px 0 0 var(--color-status-deviates); }
.compare tr.is-deviation > :not(:first-child) { box-shadow: none; }
.compare tr.is-deviation th { font-weight: 700; }

@media (max-width: 600px) {
  .compare table, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare thead { position: absolute; left: -9999px; }
  .compare tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
  .compare th, .compare td { border: 0; padding: var(--space-1) var(--space-3); }
  .compare td::before { content: attr(data-label); display: block; font-size: var(--size-small); font-weight: 700; color: var(--color-text-muted); }
  .compare tr.is-deviation > :first-child { box-shadow: inset 4px 0 0 var(--color-status-deviates); }
}

.compare td .badge { display: block; width: fit-content; margin-bottom: var(--space-1); }

/* Styleguide */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); padding: 0; list-style: none; }
.swatches li { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; font-size: var(--size-small); }
.swatches span { display: block; height: 3rem; border-bottom: 1px solid var(--color-border); }
.swatches code { display: block; padding: var(--space-1) var(--space-2); background: none; }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }