/* The Rails design system: base (docs/design/DESIGN-SYSTEM.md 2.2, 2.3, 2.5, 6).
   Reset, the 17 px root, the system stack, the six type styles' element defaults, focus,
   tabular figures, the flat surfaces and the reading measure. Every value is a token from
   tokens.css, which must be linked before this file. */

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

html {
  font-size: var(--type-body-size);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--type-family);
  font-size: var(--type-body-rem);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Element defaults follow the six styles; a class from tokens.css overrides them. */
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: var(--type-large-title-rem); line-height: var(--type-large-title-line); font-weight: var(--type-large-title-weight); letter-spacing: var(--type-large-title-tracking); }
h2 { font-size: var(--type-title-rem); line-height: var(--type-title-line); font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); }
h3, h4 { font-size: var(--type-headline-rem); line-height: var(--type-headline-line); font-weight: var(--type-headline-weight); letter-spacing: var(--type-headline-tracking); }
small { font-size: var(--type-footnote-rem); line-height: var(--type-footnote-line); font-weight: var(--type-footnote-weight); }

/* No monospace anywhere in product UI: a value that must be shown is Footnote in the text face. */
code, kbd, samp, pre { font-family: inherit; font-size: inherit; }
pre { white-space: pre-wrap; margin: 0; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }

/* The hidden attribute wins over a component's own display (a .btn is inline-flex). */
[hidden] { display: none !important; }

/* Numbers that line up: prices, counts, times. */
.num { font-variant-numeric: tabular-nums; }

/* Focus: a 2 px ring, offset 2, on every control, never removed. */
:focus-visible { outline: var(--space-focus-ring) solid var(--focus); outline-offset: var(--space-focus-ring); }

/* The flat surfaces (2.5): content sits on them with hairlines and no shadow at rest. */
.ground { background: var(--ground); color: var(--ink); }
.surface { background: var(--surface); color: var(--ink); }
.raised { background: var(--raised); color: var(--ink); }
.hairline { border: var(--space-hairline) solid var(--hairline); }
.hairline-top { border-top: var(--space-hairline) solid var(--hairline); }
.hairline-bottom { border-bottom: var(--space-hairline) solid var(--hairline); }
.muted { color: var(--muted); }

/* The reading measure for text on the web. */
.measure { max-width: var(--space-measure); }

/* Screen-reader-only text: the word that names a state the face shows as an animation. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Increase Contrast: every hairline becomes control. The viewer's choice on the root, or the
   browser's setting when nothing is chosen. */
:root[data-contrast="more"], [data-contrast="more"] { --hairline: var(--control); }
@media (prefers-contrast: more) {
  :root:not([data-contrast="normal"]) { --hairline: var(--control); }
}

/* Scrollbars are never the platform's: thin, no track, a translucent ink thumb that is faint at rest and
   firmer while the pointer is over what scrolls. */
:where(*) { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--ink) 14%, transparent) transparent; }
:where(*):hover { scrollbar-color: color-mix(in oklch, var(--ink) 30%, transparent) transparent; }