/* ================================================================
   RESET
================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--t2);
  line-height: var(--lh-loose);
  background: var(--bg);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--sans); border: none; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ================================================================
   SHARED COMPONENTS
================================================================ */

/* Buttons — all min 48px height for touch */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch);
  padding: 0 24px;
  border-radius: var(--r2);
  font-family: var(--sans); font-size: var(--t2); font-weight: 600;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  cursor: pointer; border: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { background: var(--border) !important; color: var(--text-3) !important; border-color: transparent !important; pointer-events: none; box-shadow: none !important; transform: none !important; }
.btn { transition: background var(--fast), opacity 0.2s var(--ease), transform var(--fast), box-shadow var(--fast), filter 0.2s var(--ease); }

.btn-dark  { background: var(--dark-1); color: #fff; }
.btn-dark:hover  { background: #111110; }

.btn-sage  { background: var(--sage); color: #fff; }
.btn-sage:hover  { background: var(--sage-hover); }

.btn-ghost { background: transparent; color: var(--text-2); border: 1.5px solid var(--border); }
.btn-ghost:hover { border-color: var(--text-3); color: var(--text-1); }

.btn-white {
  background: #fff; color: var(--text-1);
  font-weight: 700; box-shadow: var(--sh-lg);
}
.btn-white:hover { background: var(--bg); box-shadow: 0 20px 56px rgba(0,0,0,0.18); transform: translateY(-1px); }

.btn-full { width: 100%; }

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t0); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 5px 13px; border-radius: var(--r5);
}
.pill-dark { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.14); color: var(--text-inv-2); }
.pill-sage { background: var(--sage-subtle); color: var(--sage); }
.pill-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--sage-mid); flex-shrink: 0; }

/* Icon box */
.ib { width: 44px; height: 44px; border-radius: var(--r2); background: var(--sage-subtle); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ib svg { width: 22px; height: 22px; }
.ib-inv { background: rgba(255,255,255,0.12); }
.ib-sm  { width: 36px; height: 36px; border-radius: var(--r1); }
.ib-sm svg { width: 18px; height: 18px; }

/* Signal dot */
.sig { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sig svg { width: 13px; height: 13px; }
.sig-good  { background: var(--good-bg); }
.sig-ok    { background: var(--ok-bg); }
.sig-needs { background: var(--needs-bg); }

/* Status tag */
.tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r5); }
.tag-good  { background: var(--good-bg);  color: var(--good-text); }
.tag-ok    { background: var(--ok-bg);    color: var(--ok-text); }
.tag-needs { background: var(--needs-bg); color: var(--needs-text); }

/* Reveal */
.rv { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.10s; } .d2 { transition-delay: 0.20s; }
.d3 { transition-delay: 0.30s; } .d4 { transition-delay: 0.40s; }