/* Base: the font, a small reset, document type, focus, icons, and the
   keyframes every part shares. */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--frame);
}
body {
  font: var(--weight-regular) var(--text-body) / 1.5 var(--font);
  letter-spacing: var(--tracking);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
}
/* Hidden means hidden, whatever display a component gives itself. */
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection {
  background: rgb(59 123 246 / 35%);
}

/* Icons come from the sprite in icons.js: <svg class="i"><use href="#i-name"/></svg>. */
.i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.i-sm {
  width: 14px;
  height: 14px;
}
.i-lg {
  width: 18px;
  height: 18px;
}

/* Numbers line up; up and down carry their colour. */
.num {
  font-variant-numeric: tabular-nums;
}
.up {
  color: var(--up-ink);
}
.down {
  color: var(--down-ink);
}

/* ───────── Motion ───────── */
@keyframes tb-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes tb-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}
@keyframes tb-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes tb-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes tb-shimmer {
  to {
    opacity: 0.45;
  }
}
@keyframes tb-ripple {
  0% {
    transform: scale(0.8);
    opacity: 0.45;
  }
  70%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes tb-toast-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(4px);
  }
}
@keyframes tb-toast-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    filter: blur(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* iOS zooms into fields under 16px; touch screens get 16px text in fields. */
@media (pointer: coarse) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}