@import url('../fonts/fonts.css?v=20260829234957');

/*
 * Buttons — "Bounce" design system.
 *
 * Warm paper ground, ink text, and a set of seven saturated button colours.
 * Colour is functional here, not decorative: a button's colour is what your
 * thumb aims at, and the same colour identifies that button in every chart,
 * legend and table. So the palette is fixed and assigned deliberately, never
 * cycled automatically.
 */

:root {
  /* -- ground -- */
  --paper:        #FFFBF2;
  --paper-raised: #FFFDF8;
  --paper-sunk:   #F0E9DA;
  --ink:          #191512;
  --ink-soft:     #4A423A;
  --muted:        #7C7168;
  --faint:        #A79C8E;
  --line:         #F0E9DA;
  --line-strong:  #E6DDCC;

  /* -- button palette: seven hues, distinguishable at a glance and in the dark -- */
  --c-flame:  #FF5A3C;
  --c-pine:   #1F7A5A;
  --c-amber:  #E8B21A;
  --c-indigo: #3D5AFE;
  --c-teal:   #0E7C86;
  --c-violet: #7A4BC4;
  --c-rust:   #B3541E;

  /* Text that sits on a filled swatch. Amber is the one light enough to need ink. */
  --on-color:      #FFFBF2;
  --on-color-dim:  rgba(255, 251, 242, .74);
  --on-amber:      #191512;
  --on-amber-dim:  rgba(25, 21, 18, .62);

  --accent:  var(--c-flame);
  --success: var(--c-pine);
  --danger:  #C42B16;

  /* -- type -- */
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', Verdana, sans-serif;
  --font-body:    'Space Grotesk', 'Trebuchet MS', Verdana, sans-serif;

  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  19px;
  --fs-xl:  26px;
  --fs-2xl: 30px;
  --fs-3xl: 46px;

  /* -- space -- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 28px; --s7: 40px; --s8: 56px;

  /* -- shape -- */
  --r-chip:   999px;
  --r-sm:     14px;
  --r-md:     22px;
  --r-card:   26px;
  --r-button: 30px;

  /* -- motion -- */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(.2, .85, .3, 1);

  /* -- layout -- */
  --tap-min: 44px;
  --btn-h:   118px;
  --nav-h:   68px;
  --safe-t:  env(safe-area-inset-top, 0px);
  --safe-b:  env(safe-area-inset-bottom, 0px);
  --page-max: 640px;
}

:root[data-theme="dark"] {
  --paper:        #17140F;
  --paper-raised: #221D17;
  --paper-sunk:   #262019;
  --ink:          #FFFBF2;
  --ink-soft:     #E4DBCC;
  --muted:        #A79C8E;
  --faint:        #7C7168;
  --line:         #262019;
  --line-strong:  #322A22;
  --on-amber:     #191512;
  --danger:       #FF7A63;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #17140F;
    --paper-raised: #221D17;
    --paper-sunk:   #262019;
    --ink:          #FFFBF2;
    --ink-soft:     #E4DBCC;
    --muted:        #A79C8E;
    --faint:        #7C7168;
    --line:         #262019;
    --line-strong:  #322A22;
    --on-amber:     #191512;
    --danger:       #FF7A63;
  }
}

* { box-sizing: border-box; }

/*
 * The browser's [hidden] rule is a user-agent style, so ANY author rule that
 * sets display — .sheet { display: flex }, .toast { display: flex } — silently
 * beats it and the element stays on screen. The app toggles visibility with the
 * hidden attribute throughout, so this has to win.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overscroll-behavior-y: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0;
  text-wrap: pretty;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Numbers that change in place must not jitter. */
.tabular { font-variant-numeric: tabular-nums; }

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

/* ---- motion ------------------------------------------------------- *
 * Buttons slide up as a grid paints and spring on press. That press
 * feedback is the app's only confirmation that a tap registered before
 * the network answers, so it is functional, not decoration.
 * -------------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes row-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.rise    { animation: rise .38s var(--ease-out) both; }
.slide-up { animation: slide-up .3s var(--ease-out) both; }
.row-in  { animation: row-in .28s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}