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

html,
body {
  margin: 0;
  padding: 0;
  /*
   * The page never scrolls sideways. Anything that pokes past the shell's
   * edge — a pane sliding in from off-screen, a chip strip mid-flick, a stat
   * grid a long name has forced wider — is clipped rather than allowed to
   * widen the document, which on iOS is what lets the whole app be dragged
   * left and right and shows up as content "cut" at the far edge. `clip`,
   * not `hidden`: hidden would make body a scroll container of its own and
   * the sticky bottom nav would then stick to the end of the content instead
   * of the viewport. On the root element clip propagates to the viewport as
   * hidden, which is exactly the effect wanted there.
   */
  overflow-x: clip;
}

body {
  background: var(--surface-pressed);
  /*
   * Kills the native overscroll bounce at the top of the page, which pull-to-
   * refresh needs the room for: left on, iOS rubber-bands the whole document
   * and the pull reads as the browser stretching rather than as the list
   * offering to reload.
   */
  overscroll-behavior-y: contain;
  color: var(--text);
  /*
   * Plus Jakarta Sans when the webfont lands, the platform UI face until it
   * does. It is the one family the whole app uses — every screen, the Slip
   * Builder included, inherits it from here. It is *not* metric-compatible
   * with the fallbacks, so the swap re-sets the text rather than sliding in
   * unnoticed. That is accepted, not overlooked: see the comment on the font
   * link in index.html.
   *
   * Its figures are proportional by default, which is why the places that must
   * not jitter — the score column, the status pill, the nav badge — ask for
   * `font-variant-numeric: tabular-nums` explicitly. Plus Jakarta Sans ships
   * the `tnum` feature, so those keep working; drop that declaration and a
   * ticking clock would shuffle its own column.
   */
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-base);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/*
 * h4 is in the list because two cards use it for a sub-heading under an h3 —
 * `.pick__market` and `.poll-card__question`. Without it the UA's own
 * `margin-block: 1.33em` survives, which is a 15px hole above and below a
 * heading whose card is spacing itself with `gap`.
 */
h1,
h2,
h3,
h4,
p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
}

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

svg {
  display: block;
  flex: none;
}

/*
 * Hugeicons glyphs. Icon() pins font-size/width/height per call; this centres
 * the glyph in that box and keeps it from being squashed inside a flex row.
 * The set's own .hgi-stroke rule sets font-family with !important, so only
 * layout is overridden here — never the family.
 */
.icon {
  display: grid;
  place-items: center;
  flex: none;
}

:focus {
  outline: none;
}

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

/* Horizontal scroller without visible scrollbar chrome. */
.u-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.u-scroll-x::-webkit-scrollbar {
  display: none;
}

/*
 * Gives a horizontal row its vertical axis back.
 *
 * Lenis ships a stylesheet of its own (styles/vendor/lenis.css) which puts
 * `overscroll-behavior: contain` on anything carrying a `data-lenis-prevent*`
 * attribute — both axes, not just the one the attribute names. On a page's
 * scrolling body that is right and wanted. On a *horizontal* row it is a bug:
 * `contain` stops scroll chaining, so a finger dragged vertically down a card
 * in one of these rows is handed to a scroller that cannot move vertically, and
 * the page behind it sits still. Every carousel, tab row and chip strip in the
 * app carries one of those attributes for the trackpad's sake (see TabBar.js),
 * so every one of them had it.
 *
 * The horizontal axis keeps `contain` — a flick that runs off the end of a row
 * must not start scrolling the page sideways — and only the vertical one is
 * released. Specificity has to clear Lenis's own `.lenis [data-…]` (0-2-0),
 * which is why this is written with three selectors' worth rather than one.
 */
.lenis .u-scroll-x[data-lenis-prevent],
.lenis .u-scroll-x[data-lenis-prevent-wheel],
.lenis .u-scroll-x[data-lenis-prevent-touch] {
  overscroll-behavior-y: auto;
}

.u-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}