/* Reset, element defaults, the browser's own surfaces themed from tokens.css,
   and small text/utility classes shared by every component. */

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

/* Author rules elsewhere set `display` on some of these same elements (grid
   for .app-main at wider breakpoints, flex for header rows); without this,
   those rules win the cascade over the UA stylesheet's [hidden] and the
   element would show even while hidden. */
[hidden] {
  display: none !important;
}

html, body, h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd, form, fieldset {
  margin: 0;
  padding: 0;
}

fieldset {
  border: none;
}

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
  scrollbar-color: var(--line-strong) transparent;
}

body {
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

button, input {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

button:disabled {
  cursor: default;
  opacity: 0.6;
}

a {
  color: inherit;
}

input {
  background: var(--surface);
  border: var(--stroke) solid var(--line-strong);
  border-radius: var(--r-small);
  padding: var(--s-3) var(--s-4);
  min-height: var(--tap);
}

/* Browser-native surfaces, themed instead of left to device defaults. */
::selection {
  background: var(--selection);
}

html {
  caret-color: var(--focus);
  accent-color: var(--focus);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-small);
}

/* Type scale utilities. One label anatomy everywhere: t-label, then t-data
   (or larger, bold), then an optional t-small state line. */
.t-display {
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
}

.t-title {
  font-size: var(--t-title);
  line-height: var(--lh-tight);
}

.t-data {
  font-size: var(--t-data);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.t-head {
  font-size: var(--t-head);
  line-height: var(--lh-tight);
}

.t-body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.t-small {
  font-size: var(--t-small);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
}

.t-label {
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

.w-regular { font-weight: var(--w-regular); }
.w-medium { font-weight: var(--w-medium); }
.w-bold { font-weight: var(--w-bold); }

.ink-2 { color: var(--ink-2); }
.loss { color: var(--loss); }
.blue-text { color: var(--blue-text); }

.hairline {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

.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;
}

/* Icons: 24 px grid, --stroke width, currentColor, round caps and joins. */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: var(--stroke);
  flex-shrink: 0;
}

/* Loading skeletons: shaped blocks in --track, never a spinner. */
.skeleton-block {
  background: var(--track);
  border-radius: var(--r-small);
  animation: skeleton-pulse var(--d-skeleton) ease-in-out infinite;
}

.skeleton-block--sky { height: var(--sky-height); border-radius: 0; }
.skeleton-block--strip { height: var(--strip-height); border-radius: 0; }
.skeleton-block--row { height: var(--tap); margin-bottom: var(--s-2); }
.skeleton-block--title { height: 1.75rem; width: 60%; margin-bottom: var(--s-3); }
.skeleton-block--text { height: 1.1rem; width: 85%; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Numbers that change cross-fade instead of sliding or counting. */
@keyframes value-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.value-swap {
  animation: value-fade var(--d-value) ease;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-block {
    animation: none;
  }
  .value-swap {
    animation: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}