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

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fg-body);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { transition: none; }
.pull-refresh {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 80;
  min-width: 112px;
  min-height: 36px;
  padding: 7px 14px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--control-radius) var(--control-radius);
  box-shadow: var(--shadow-card);
  font-size: var(--fg-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -44px);
  will-change: transform, opacity;
}
.pull-refresh.is-ready { color: var(--on-lime); background: var(--lime); }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(var(--lime-rgb), 0.42); color: var(--fg); }

:focus-visible { outline: 3px solid rgba(87, 105, 31, 0.35); outline-offset: 3px; }

.t-hero {
  font-weight: var(--weight-bold);
  font-size: var(--fg-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-page-title {
  font-weight: var(--weight-bold);
  font-size: var(--fg-title);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-card-title {
  font-weight: var(--weight-bold);
  font-size: var(--fg-card);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.t-eyebrow {
  font-size: var(--fg-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  color: var(--muted);
}
.t-data { font-variant-numeric: tabular-nums; }
.t-dim { color: var(--muted); }

.screen { padding: var(--page-gutter); }
.card {
  padding: var(--card-padding);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.field {
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-2);
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  outline: none;
  transition: box-shadow 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out;
}
textarea.field { height: auto; min-height: 96px; padding: var(--space-2); resize: vertical; }
.field:hover { border-color: color-mix(in srgb, var(--muted) 55%, var(--border)); }
.field:focus { border-color: #70851e; box-shadow: var(--focus-ring); }
.field::placeholder { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}