/* Fonts are self-hosted (SIL Open Font License) so pages don't wait on another server. */
/* Self-hosted Google Fonts (SIL Open Font License): Alfa Slab One, Atkinson Hyperlegible Next. */
@font-face { font-family: 'Alfa Slab One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/AlfaSlabOne-400-normal-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Alfa Slab One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/AlfaSlabOne-400-normal-latin.woff2') format('woff2'); 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; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/AtkinsonHyperlegibleNext-latin.woff2') format('woff2'); 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; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/AtkinsonHyperlegibleNext-italic-latin.woff2') format('woff2'); 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; }

/* Sun Check — shared design system.
   Direction: Inland Empire citrus-crate label. Flat screen-print color (cobalt sky,
   lemon sun, grove green) on cool label stock, a heavy slab for the loud moments,
   a hyper-legible sans for everything people read. Boldness lives in the sunburst
   and the oversized numbers; everything else stays quiet. */

:root {
  --paper: #eef2f8;
  --surface: #ffffff;
  --well: #e1e8f3;
  --ink: #141f48;
  --ink-2: #46527c;
  --line: #c9d3e6;
  --cobalt: #2445b3;
  --cobalt-deep: #1a3591;
  --lemon: #f4cc2a;
  --lemon-deep: #d9ad00;
  --grove: #17694b;
  --stamp: #c42f28;
  --btn: var(--cobalt);
  --btn-press: var(--cobalt-deep);
  --on-btn: #ffffff;
  --on-lemon: #141f48;
  --label-bg: #2445b3;
  --label-ink: #ffffff;
  --focus: #e0a800;
  --scrim: rgba(12, 18, 44, 0.55);
  --seq-0: #e1e8f3;
  --seq-1: #b9c8ec;
  --seq-2: #7f9be0;
  --seq-3: #4466cc;
  --seq-4: #2445b3;
  --shadow: 0 1px 0 rgba(20, 31, 72, 0.06), 0 14px 32px -18px rgba(20, 31, 72, 0.45);
  --grain-opacity: 0.07;
  --grain-blend: multiply;

  --display: "Alfa Slab One", "Rockwell", "Roboto Slab", Georgia, serif;
  --body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Avenir Next", "Segoe UI", sans-serif;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 24px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --track: 34rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1533;
    --surface: #16204a;
    --well: #1e2a58;
    --ink: #eef2fa;
    --ink-2: #b2bcdc;
    --line: #2f3c70;
    --cobalt: #8aa2ff;
    --cobalt-deep: #6f8cff;
    --lemon: #f6d34a;
    --lemon-deep: #f6d34a;
    --grove: #4dbd8e;
    --stamp: #ff7466;
    --btn: #f6d34a;
    --btn-press: #e9c12a;
    --on-btn: #141f48;
    --on-lemon: #141f48;
    --label-bg: #1e3a9e;
    --label-ink: #ffffff;
    --focus: #f6d34a;
    --scrim: rgba(3, 6, 18, 0.7);
    --seq-0: #1e2a58;
    --seq-1: #2b3f86;
    --seq-2: #3f5fc0;
    --seq-3: #6f8cff;
    --seq-4: #b3c3ff;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 16px 34px -18px rgba(0, 0, 0, 0.8);
    --grain-opacity: 0.09;
    --grain-blend: screen;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d1533;
  --surface: #16204a;
  --well: #1e2a58;
  --ink: #eef2fa;
  --ink-2: #b2bcdc;
  --line: #2f3c70;
  --cobalt: #8aa2ff;
  --cobalt-deep: #6f8cff;
  --lemon: #f6d34a;
  --lemon-deep: #f6d34a;
  --grove: #4dbd8e;
  --stamp: #ff7466;
  --btn: #f6d34a;
  --btn-press: #e9c12a;
  --on-btn: #141f48;
  --on-lemon: #141f48;
  --label-bg: #1e3a9e;
  --label-ink: #ffffff;
  --focus: #f6d34a;
  --scrim: rgba(3, 6, 18, 0.7);
  --seq-0: #1e2a58;
  --seq-1: #2b3f86;
  --seq-2: #3f5fc0;
  --seq-3: #6f8cff;
  --seq-4: #b3c3ff;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 16px 34px -18px rgba(0, 0, 0, 0.8);
  --grain-opacity: 0.09;
  --grain-blend: screen;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* Paper grain: a fixed noise layer so flat color reads like printed label stock. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection { background: var(--lemon); color: var(--on-lemon); }
img, svg, canvas { max-width: 100%; }
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--cobalt); text-underline-offset: 3px; }
.display { font-family: var(--display); font-weight: 400; letter-spacing: 0.005em; line-height: 1.02; }
.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* Buttons */
.btn {
  appearance: none;
  border: 0;
  border-radius: var(--r-m);
  background: var(--btn);
  color: var(--on-btn);
  font: 700 1.0625rem/1.2 var(--body);
  min-height: 52px;
  padding: 0.85rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, background 0.15s ease;
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px) scale(0.99); background: var(--btn-press); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn.wide { width: 100%; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:active { background: var(--well); }
.btn.lemon { background: var(--lemon); color: var(--on-lemon); }
.btn.lemon:active { background: var(--lemon-deep); }
.btn.small { min-height: 40px; padding: 0.5rem 0.9rem; font-size: 0.9375rem; border-radius: 11px; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }

.linkbtn {
  appearance: none; background: none; border: 0; padding: 0.35rem 0; cursor: pointer;
  color: var(--cobalt); font: 600 1rem/1.3 var(--body); text-decoration: underline; text-underline-offset: 3px;
}

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  appearance: none;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font: 600 0.9688rem/1.15 var(--body);
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.chip:active { transform: scale(0.98); }

/* Form fields */
.field { display: grid; gap: 0.35rem; }
.field > span { font-weight: 700; font-size: 0.9375rem; }
.input, .textarea, select.input {
  width: 100%;
  border: 0;
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font: 500 1.0625rem/1.35 var(--body);
  padding: 0.8rem 0.9rem;
  min-height: 52px;
}
.textarea { min-height: 7.5rem; resize: vertical; line-height: 1.45; }
.input:focus-visible, .textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2.5px var(--cobalt); }
.check { display: grid; grid-template-columns: 28px 1fr; gap: 0.75rem; align-items: start; cursor: pointer; }
.check input { width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--cobalt); }

/* Bottom sheet */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 60; background: var(--scrim);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade 0.18s ease;
}
.sheet {
  width: 100%; max-width: 36rem; max-height: 92dvh; overflow: auto;
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-l) var(--r-l) 0 0;
  padding: 0.5rem var(--gutter-r) calc(1.25rem + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
  box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, 0.45);
  animation: rise 0.24s cubic-bezier(.2, .8, .2, 1);
}
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0.25rem auto 0.9rem; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.sheet-head h2 { font: 400 1.5rem/1.1 var(--display); }
.iconbtn {
  appearance: none; border: 0; background: var(--well); color: var(--ink);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none;
}
.iconbtn svg { width: 20px; height: 20px; }

/* Toast */
.toast {
  position: fixed; left: 50%; z-index: 80; transform: translateX(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--paper);
  border-radius: 999px; padding: 0.7rem 0.8rem 0.7rem 1.15rem;
  display: flex; align-items: center; gap: 0.9rem;
  font-weight: 600; font-size: 0.9688rem; box-shadow: var(--shadow);
  max-width: calc(100vw - 32px);
  animation: rise 0.2s ease;
}
.toast button {
  appearance: none; border: 0; background: var(--lemon); color: var(--on-lemon);
  font: 700 0.875rem/1 var(--body); border-radius: 999px; padding: 0.55rem 0.8rem; cursor: pointer;
}

/* Demo ribbon */
.demo-ribbon {
  background: var(--ink); color: var(--paper);
  font-size: 0.8125rem; font-weight: 600; text-align: center;
  padding: 0.4rem var(--gutter-r) 0.4rem var(--gutter-l);
}
.demo-ribbon b { color: var(--lemon); }

@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@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; }
}

/* Thin custom scrollbars in the label palette */
* { scrollbar-width: thin; scrollbar-color: var(--cobalt) transparent; }