/* Base: reset, type, the few elements every page shares (docs/design.md §4, §6).
   Radius is 0 and there are no shadows, anywhere: depth comes from tone only. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font: 400 18px/28px var(--font);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; }
h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; }
h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
strong, th { font-weight: 600; }
small { font-size: 14px; line-height: 20px; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Focus is never removed (WCAG 2.4.7): a 3 px ink outline, offset so it clears the edge. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.on-ink :focus-visible { outline-color: var(--sheet); }

[x-cloak] { display: none !important; }
/* An element's own `display` must not beat the `hidden` attribute (a message that is not the one shown). */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: absolute;
  left: var(--s4);
  top: -200px;
  z-index: 100;
  padding: var(--s3) var(--s4);
  background: var(--ink);
  color: var(--sheet);
  font-weight: 600;
}
.skip-link:focus { top: var(--s4); }

/* The wordmark: the one place the product name is set in type. */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wrap {
  width: min(100% - 2 * var(--pad), var(--wrap));
  margin-inline: auto;
}

/* Controls: 48 px tall. The primary button is solid ink; on hover it becomes the
   highlighter, "this is what you are about to act on" (docs/design.md §6). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--control);
  padding: 0 var(--s6);
  background: var(--ink);
  color: var(--sheet);
  border: 2px solid var(--ink);
  font: 600 16px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--mark); color: var(--ink); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--inverse { background: var(--sheet); color: var(--ink); border-color: var(--sheet); }
.btn--wide { width: 100%; }
.btn[aria-disabled="true"] { background: var(--ground); border: 2px dashed var(--ink-3); color: var(--ink-3); cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: var(--ground); color: var(--ink-3); }

/* The highlighter: background behind text that matched the keyword, nothing else. */
mark, .mark {
  background: var(--mark);
  color: var(--ink);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Numbers are tables (docs/design.md §1). Rules separate rows and carry no decoration. */
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.table caption { text-align: left; font-weight: 600; padding-bottom: var(--s3); }
.table th, .table td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.table th { font-weight: 600; }
.table .num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.table .total th, .table .total td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; }
.table--prose { font-size: 18px; line-height: 28px; }
.table--prose th, .table--prose td { padding: var(--s4) var(--s6) var(--s4) 0; }

/* Sentiment markers: three shapes (up, down, flat) and always a word, so the meaning
   survives greyscale and colour-vision deficiency. The sprite draws them. */
.s-pos { color: var(--pos); }
.s-neg { color: var(--neg); }
.s-neu { color: var(--neu); }
.glyph { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; }

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