/* Element-level painting, shared by the web interface and the HTML report.
 *
 * This build is light-only by decision, which means committing loudly rather
 * than omitting colours: everything below paints its own background and its own
 * foreground instead of inheriting one. A viewer whose OS is set to dark
 * otherwise gets the browser's ground under our text, and the parts CSS cannot
 * reach - select popups, scrollbars, the canvas before first paint - stay dark
 * around a white page. `color-scheme: light` is declared in the generated token
 * block for the same reason.
 *
 * Every value here is a var(). There are no literals in this file, and a test
 * fails if one appears.
 */

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

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p {
  margin: 0;
}

/* Model-authored free text reaches the page (defect evidence, pipeline
 * warnings), and it can contain a URL. Left alone that renders in the user
 * agent's blue and purple - two colours no brand supplied. */
a {
  color: var(--brand-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:visited {
  color: var(--brand-ink);
}

a:hover {
  color: var(--brand-hover);
}

::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

::selection {
  background: var(--brand-wash);
  color: var(--ink);
}

::marker {
  color: var(--ink-muted);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

/* Form controls take the OS accent unless told otherwise, which on Windows is
 * literally a colour the user picked in Settings.
 *
 * The border is --control-line, not --line. A control painted --surface inside
 * a card painted --surface is told apart from it by its edge alone, and --line
 * is a decorative hairline at ~1.5:1. WCAG 1.4.11 asks 3:1 for exactly this,
 * and --control-line is derived to clear it under any brand palette. */
input,
select,
textarea,
button {
  font: inherit;
  font-size: var(--text-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  accent-color: var(--brand);
  caret-color: var(--ink);
}

textarea {
  resize: vertical;
  line-height: var(--leading-snug);
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  background: var(--surface-sunken);
  color: var(--ink-muted);
  border-color: var(--control-line);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

table {
  border-collapse: collapse;
}

pre,
code,
kbd {
  font-family: var(--font-mono);
}

pre {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  overflow: auto;
  max-height: 440px;
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
}

img {
  max-width: 100%;
}

ul,
ol {
  margin: 0;
}

dl,
dd {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}