/*
 * Styles for the generated conformance report.
 *
 * Copied verbatim into conformance/results/report.css by SummaryReport, and
 * linked from results.html and every tests/*.html detail page.
 *
 * The report is mostly two kinds of text with very different needs: dense
 * tabular data that wants to stay compact, and running prose that has grown
 * long enough to need a real reading measure. Both draw from one scale below
 * rather than each block picking its own em value.
 */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* One type scale for the whole report, in rem rather than em: a <small>
     inside a cell inside a <details> then lands on the same step as one in
     running prose, instead of compounding a step smaller at every nesting. */
  --text-micro: 0.75rem;    /* 12px — in-cell tags, version stamps */
  --text-fine: 0.8125rem;   /* 13px — diagnostics, hover cards, monospace */
  --text-ui: 0.875rem;      /* 14px — table body, summaries, captions */
  --text-body: 0.9375rem;   /* 15px — running prose */
  --text-lead: 1.0625rem;   /* 17px — the deck under the page title */
  --text-h2: 1.375rem;      /* 22px */
  --text-h1: 1.875rem;      /* 30px */

  --leading-tight: 1.25;    /* headings */
  --leading-ui: 1.45;       /* table cells, tags */
  --leading-prose: 1.65;    /* paragraphs and lists */

  /* The prose measure. Every block of running text shares it, so a paragraph
     and the bullet list beneath it break at the same column instead of the
     list running twice as wide. Tables are exempt — they need the viewport.

     In em, not ch. `ch` is the advance of the "0" glyph, which only equals one
     character in a monospace font; measured against this report's own prose in
     system-ui, "0" is 1.30–1.37x the average character, so a nominal 72ch line
     actually ran 94–99 characters.

     52em lands every block at roughly 115 characters, which is past the 45–75
     range books are set to and is deliberate. The reference point is GitHub,
     whose README prose was measured at 838px / 116 characters on a repo page
     at a 1440px viewport — note that this is not GitHub's well-known 1012px,
     which is a page container holding a sidebar, not a text column. Two things
     make the same character count easier here than there: the leading is 1.65
     against GitHub's 1.50, which is exactly what a long return sweep needs,
     and 15px type makes 115 characters physically shorter than GitHub's 16px.

     Tighter was tried and measured. 34em (75 characters) saved only 7 lines
     out of 109 across the section notes while leaving the prose a narrow strip
     beside the full-width tables it annotates — it cost more in the look of
     the page than it bought back in line length. */
  --measure: 52em;

  --ink: #1b1b1b;
  --ink-muted: #55585e;
  --ink-faint: #8a8d93;
  --link: #0b62c4;
  --rule: #e5e7eb;
  --rule-strong: #d7dae0;
  --surface: #fbfbfb;
  --surface-code: #eef1f4;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

body {
  margin: 24px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-prose);
  color: var(--ink);
  background: #ffffff;
  -webkit-text-size-adjust: 100%;
}

body.detail { max-width: 960px; }

a { color: var(--link); }

/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */

h1,
h2 {
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: -0.015em;
  margin: 0 0 0.3em;
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.01em;
  margin: 2rem 0 0.6rem;
}

h2.section {
  margin-top: 2.75rem;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 0.25em;
}

/* --------------------------------------------------------------------------
   Running prose
   -------------------------------------------------------------------------- */

p { margin: 0 0 0.8em; }

p,
li { text-wrap: pretty; }

/* Everything that is a sentence rather than a cell: one measure, so a section
   note and the list under it wrap at the same column. */
p.lead,
p.section-note,
p.legend-intro,
.legend-facets,
.facets,
.legend-list dd { max-width: var(--measure); }

p.lead {
  font-size: var(--text-lead);
  color: var(--ink-muted);
  margin-top: 0;
}

p.section-note {
  color: var(--ink-muted);
  margin-top: 0.5em;
}

p.updated {
  color: var(--ink-muted);
  font-size: var(--text-ui);
  margin: -0.4em 0 1.2em;
}

p.crumb {
  margin: 0 0 0.75rem;
  font-size: var(--text-ui);
}

p.meta {
  color: var(--ink-muted);
  font-size: var(--text-ui);
  margin-top: 0;
}

.legend-facets {
  margin: 0.4em 0 1.1em;
  padding-left: 1.3em;
}

.legend-facets > li { margin-bottom: 0.35em; }

/* --------------------------------------------------------------------------
   Inline code
   -------------------------------------------------------------------------- */

/* Styled globally, not just inside .doc: the legend and the section notes are
   now full of `// T`, `mixed` and `@extends`, and unstyled they read as an
   accident rather than as a deliberately different kind of token. */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-code);
  padding: 0.1em 0.25em;
  border-radius: 3px;
  /* A chip is one token; without this `// T` breaks after the slashes and the
     two halves land on different lines with a chip edge between them. The
     longest span in the report is 27 characters, so nothing can overflow. */
  white-space: nowrap;
}

/* Inside a code block the chip treatment is noise — the block already is one. */
pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  white-space: inherit;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
}

th,
td {
  padding: 8px;
  border-bottom: 1px solid var(--rule-strong);
  text-align: left;
  vertical-align: top;
}

thead th {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 1;
}

/* Version numbers and release dates line up column-wise. */
time,
.hover-card__trigger { font-variant-numeric: tabular-nums; }

small {
  font-size: var(--text-micro);
  line-height: var(--leading-ui);
}

small a { color: inherit; }

.table-scroll { overflow-x: auto; }

table.analyzer-meta th a {
  text-decoration: none;
  font-weight: 600;
}

.analyzer-meta abbr[title],
.analyzer-meta .succession[title],
.analyzer-meta .noted[title],
.analyzer-meta td a[title] {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

/* --------------------------------------------------------------------------
   Results matrix
   -------------------------------------------------------------------------- */

.test-cell { min-width: 260px; }

.test-link {
  font-weight: 600;
  text-decoration: none;
}

.test-link:hover { text-decoration: underline; }

tr[id]:target {
  outline: 2px solid var(--link);
  outline-offset: -2px;
}

.cell-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.group {
  background: #f3f3f3;
  font-weight: 700;
}

.pass { background: #dff7df; }
.fail { background: #f9d6d6; }
.by-design { background: #f6e7c8; }
.partial { background: #fdf0cf; }
.incidental { background: #fde8d4; color: #8a4b12; }
.reported { background: #dbe7fb; }
.unknown { background: #f0f0f0; }

/* Hatched rather than tinted: this cell is not a verdict on a scale with the
   others, it is the absence of one, and should not read as a shade of pass. */
.not-measured {
  background: repeating-linear-gradient(
    45deg, #f4f4f5, #f4f4f5 5px, #e6e6e8 5px, #e6e6e8 10px
  );
  color: #6b6b70;
}

.not-supported {
  background: #f4f4f5;
  color: #9a9a9a;
  font-style: italic;
}

.falls-back {
  background: #e4eefb;
  color: #2f5c9e;
}

/* Recognized, but enforcement was never asked: neutral, and deliberately not
   on the pass/fail scale the tinted verdict cells share. */
.no-probes {
  background: #eeeeef;
  color: #55555c;
}

.muted {
  background: #f6f6f6;
  color: var(--ink-faint);
}

/* Tags ride along inside a verdict cell, so they stay a step below the cell
   text and never push a row taller than the verdict itself needs. */
.level-tag {
  font-size: var(--text-micro);
  color: var(--ink-muted);
  font-weight: 400;
  cursor: help;
}

.fp-tag {
  display: block;
  font-size: var(--text-micro);
  color: #a33;
  font-weight: 600;
  cursor: help;
}

/* --------------------------------------------------------------------------
   Hover cards
   -------------------------------------------------------------------------- */

.hover-card {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.hover-card__trigger { cursor: help; }

.hover-card__popup {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 10;
  min-width: 220px;
  max-width: 360px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.96);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  font-size: var(--text-fine);
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  /* Same reason as .note-line, plus the popup has a max-width to respect: a
     version string like `6.16.1@f1f5de59…` is one token and overran it. */
  overflow-wrap: anywhere;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.hover-card:hover .hover-card__popup,
.hover-card:focus-within .hover-card__popup {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.hover-card__popup a { color: #9fd0ff; }

.hover-card__notes-label {
  border-bottom: 1px dotted currentColor;
  font-size: var(--text-micro);
}

/* --------------------------------------------------------------------------
   Legend
   -------------------------------------------------------------------------- */

.legend {
  margin: 1.25rem 0 1.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  background: var(--surface);
}

.legend > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-ui);
}

/* Acts as a subhead inside the legend, so it takes the space of one. */
.legend-intro { margin: 1.2em 0 0.4em; }

.legend-list {
  display: grid;
  grid-template-columns: max-content minmax(0, var(--measure));
  gap: 0.5em 1.25em;
  margin: 0;
  align-items: baseline;
}

.legend-list dt,
.legend-list dd { margin: 0; }

.legend-swatch {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.legend-swatch.plain {
  background: none;
  padding: 2px 0;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Detail page
   -------------------------------------------------------------------------- */

/* Not the prose measure: this block arrives hard-wrapped at ~80 columns from
   the docblock and is rendered pre-wrap, so its width is set by where the
   author already broke the lines, not by where a reader would want them. 80
   authored characters occupy about 36em rendered proportionally; 40em is that
   plus the padding and a little slack. Widening it to the full measure would
   only add empty space inside the border. */
.doc {
  white-space: pre-wrap;
  max-width: 40em;
  background: #fafafa;
  border: 1px solid #eee;
  border-left: 3px solid var(--link);
  border-radius: 4px;
  padding: 0.7rem 1rem;
  margin: 0.9rem 0 1.5rem;
  line-height: var(--leading-prose);
}

.detail-results th.tool-name {
  width: 110px;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
}

.status-cell {
  white-space: nowrap;
  font-weight: 600;
}

.diag-cell { width: 100%; }

.facets {
  margin: 0.5em 0 0;
  padding-left: 1.2em;
  font-size: var(--text-ui);
  color: var(--ink-muted);
}

pre.diag {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  line-height: 1.5;
}

pre.source,
pre.shiki {
  padding: 0.9rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  line-height: 1.55;
}

pre.source {
  background: #1e1e1e;
  color: #eaeaea;
}

.none {
  color: var(--ink-faint);
  margin: 0;
  font-style: italic;
}

.note-line {
  font-size: var(--text-ui);
  margin: 0.5em 0 0;
  /* A note is prose in a table cell, and the column is sized from whatever it
     cannot break. One bare URL kept as its own link text is a single 350px
     token, which widened the cell until the whole table overflowed. */
  overflow-wrap: anywhere;
}

details > summary {
  cursor: pointer;
  font-size: var(--text-ui);
  color: var(--ink-muted);
}