/* Breacer — foundation
 * ============================================================================
 * One place for the three things that should be the same across the whole
 * site: typography, numbers and motion. Before this, every value was a
 * separate choice on a separate page, and that is measurable:
 *
 *   29 different font sizes (8.5px through 36px, in steps of 0.5px)
 *    4 easings and 38 transition durations
 *   81 @keyframes
 *    1 (one) place with tabular-nums, in a product that refreshes numbers
 *      all day
 *
 * Nobody sees the difference between 12px and 12.5px. Everybody feels that
 * it is messy. This file replaces those 29 values with 8, and those 38
 * durations with 3.
 *
 * Loaded BEFORE a page's own <style> block, so a page can still override a
 * token where that is really needed.
 */

:root {
  /* --- Typographic scale -----------------------------------------------
   * Eight steps. The bottom four sit close together because a monitoring
   * product has a lot of dense, small text (labels, meta, badges); the top
   * four are spread far apart because headings need to make a difference.
   * Every existing value was moved to the nearest step, with a deviation
   * of at most 1.5px in the dense range.
   */
  --fs-2xs: 11px;    /* microlabels, counters in a badge               */
  --fs-xs: 12px;     /* meta, timestamps, legends (was 11.5)           */
  --fs-sm: 13px;     /* secondary text, help text (was 12.5)           */
  --fs-md: 14px;     /* running text, input fields, buttons            */
  --fs-lg: 16px;     /* card titles, emphasis                          */
  --fs-xl: 20px;     /* section headings                                */
  --fs-2xl: 26px;    /* page headings, large values                    */
  --fs-3xl: 34px;    /* hero                                            */

  /* --- Motion ---------------------------------------------------------------
   * Three durations, two easings. An interface does not need more, and with
   * more you feel that two buttons side by side have a different rhythm.
   *
   * RULE: animate only opacity and transform. Anything that animates
   * height, width, background or filter causes layout or paint work per
   * frame and shows up immediately as stutter on a phone.
   */
  --dur-fast: 120ms;   /* immediate feedback: hover, press              */
  --dur-base: 200ms;   /* transitions: switching tabs, show/hide        */
  --dur-slow: 320ms;   /* something arriving: modal, panel, toast       */
  /* Two more that only the flow and the dashboard need (they stood in
     index.css AND dash.css): a whole screen switching may be seen
     happening, and something leaving is always SHORTER than arriving. */
  --dur-scherm: 450ms;
  --dur-uit: 260ms;

  /* Default: gentle acceleration and deceleration. For almost everything. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Entrance: starts fast, comes to a soft stop. Only for things that
     appear -- not for hover, which then feels sluggish. */
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);

  /* The old names keep existing as an alias: they appear in hundreds of
     places and a search-and-replace of them would produce no visible
     difference at all. */
  --ease-soft: var(--ease);
  /* --ease-spring is a REAL spring (with overshoot), not an alias of
     --ease-enter. Five pages overrode this token locally with this value
     while privacy.html did not, so it was the only one without a spring --
     measured with getComputedStyle. Now one definition, here. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Numbers -----------------------------------------------------------
 * The most important part of this file for THIS product.
 *
 * By default, numbers in Inter have a different width: a 1 is narrower
 * than an 8. For a value that refreshes every minute that means "51.100"
 * jumping to "51.011" with a visible little hop, and every column of
 * amounts sitting crooked underneath each other.
 *
 * tabular-nums gives every digit the same width. One rule, and the
 * difference between "a website with numbers" and "an instrument".
 *
 * Applied to everything that can hold a number, not to running text -- in
 * a sentence, proportional digits are actually more pleasant to read.
 */
.tnum,
.mono,
input[type="number"],
table,
time,
[data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Icons -------------------------------------------------------------
 * Belongs with assets/icons.js. Everything inherits `currentColor`, so an
 * icon colors along with the text next to it — including hover, status and
 * the dimmed secondary color. Exactly what an emoji could not do.
 */
.bi {
  display: block;
  flex: none;
  /* Do not let the stroke width scale along with the size: at 14px and 18px
     the line should look equally thick, otherwise the small variant looks
     bolder. */
  vector-effect: non-scaling-stroke;
}

.chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.18em;
  color: inherit;
  opacity: 0.9;
}

/* The round background of a category icon already existed; only the content
   changed from an emoji to an SVG. */
.cat-icon > .bi { margin: 0 auto; }
.cat-icon.inline { display: inline-flex; vertical-align: -0.18em; }

/* --- Reduced-motion preference ---------------------------------------------
 * One central rule instead of per page. Ambient animations (aurora drift,
 * orbit rotation) are fully stopped here; those are decorative and carry
 * no meaning that gets lost.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Safe area (notch/gesture bar) -----------------------------------------
 * Since the meta viewport carries `viewport-fit=cover`, the page runs into
 * the rounded corners and under the camera cutout. That is exactly what we
 * want for backgrounds and fixed bars -- but not for text.
 *
 * WHY viewport-fit=cover only got added now: without that value,
 * env(safe-area-inset-*) always returns 0 per spec. All safe-area padding
 * in this project (the bottom bar of dashboard and market, the plus-button
 * bottom drawer) therefore NEVER did anything -- including the fix that was
 * once built for "the Alerts tab isn't there on my phone".
 *
 * This rule is a no-op on any device without a cutout, and in portrait on
 * an iPhone (there left/right are 0). It only counts in landscape, and
 * that is exactly where text would otherwise slide under the notch.
 */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}