/* ============================================================
   MIDWINTER — base + atmosphere
   ============================================================ */

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--night-0);
  color: var(--text-hi);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* ---- Atmosphere layer 1: candle glow from above ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--glow), var(--glow-2);
  pointer-events: none;
  z-index: 0;
  transition: opacity 1200ms var(--ease);
}

/* ---- Atmosphere layer 2: grain ---- */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Typography ---- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 460;
  letter-spacing: -0.012em;
  margin: 0;
  font-variation-settings: 'opsz' 40;
}

/* opsz is capped at 88 and weight held at 440: above that Fraunces'
   horizontals thin out so far that the € crossbars disappear and the
   glyph reads as a C. Verified at 2x DPI. */
.display-xl {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 88;
  font-weight: 440;
  letter-spacing: -0.022em;
  line-height: 0.94;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
}

.num { font-variant-numeric: tabular-nums; }

/* ---- Controls ---- */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

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

:where(a) { color: var(--ember); text-underline-offset: 3px; }

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

input[type='text'],
input[type='url'],
input[type='number'],
select,
textarea {
  background: var(--night-0);
  border: var(--edge);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  min-height: var(--tap);
  width: 100%;
  transition: border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}

input::placeholder, textarea::placeholder { color: var(--text-low); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.14);
}

/* number inputs: no spinners, they're useless on money */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type='number'] { -moz-appearance: textfield; }

/* ---- Utility ---- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack > * + * { margin-top: var(--flow, 12px); }

[hidden] { display: none !important; }

/* budget-state colour, usable on any element */
.over { color: var(--cranberry); }
.under { color: var(--holly); }
.neutral { color: var(--text-hi); }

/* ---- Privacy blur ------------------------------------------
   Applied to money figures and item names when blur is on.    */
.blurred .sensitive {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
  transition: filter var(--mid) var(--ease);
}

/* ---- Scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: var(--night-4) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--night-4);
  border-radius: 10px;
  border: 3px solid var(--night-0);
}

/* ============================================================
   REDUCED MOTION
   The app must be complete and pleasant with zero motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .no-motion-hide { display: none !important; }
}