/* Harvest receiver onboarding.
   Design tokens and component rules are David's, lifted from
   design/harvest-redesign.html so this is a port rather than an approximation.

   Built for the stated target device: an older Android phone on 3G with a
   capped data plan. No framework, no CSS-in-JS, no icon font, no images.
   Everything below is one file that gzips to a few KB. */

@import url('/fonts/fonts.css');

:root {
  /* David's palette, unchanged */
  --cream: #FBF3E7;
  --paper: #FFFDF8;
  --ink: #22301F;
  --ink-soft: #5B6555;
  --gold: #E3A33E;
  --gold-deep: #B97A1F;
  --clay: #B14D28;
  --leaf: #4F7942;
  --sage: #6FA88F;
  --line: rgba(34, 48, 31, 0.12);
  --line-soft: rgba(34, 48, 31, 0.07);
  --shadow: 0 10px 30px rgba(34, 48, 31, 0.10), 0 2px 8px rgba(34, 48, 31, 0.06);

  /* Tap targets. 48px is the floor for a cold hand on a cracked screen. */
  --tap-min: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px; /* never below 16: iOS zooms the viewport on smaller inputs */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* App shell -------------------------------------------------------------- */

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}

.screen { display: none; flex-direction: column; flex: 1; }
.screen.active { display: flex; }

/* Progress --------------------------------------------------------------- */

.progress { display: flex; gap: 6px; margin-bottom: 20px; }
.progress span {
  height: 4px; flex: 1; border-radius: 100px; background: var(--line-soft);
}
.progress span.done { background: var(--leaf); }

/* Type ------------------------------------------------------------------- */

.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

.greeting {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.greeting em { font-style: italic; font-weight: 600; color: var(--leaf); }

.sub {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0 0 20px;
  line-height: 1.5;
}

/* Chips ------------------------------------------------------------------ */

.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

.filter-chip {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 16px;      /* David's 9px/14px, opened up to clear the tap floor */
  min-height: var(--tap-min);
  border-radius: 100px;
  border: 1.4px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
}

.filter-chip.active {
  background: var(--chip-active-color, var(--ink));
  border-color: var(--chip-active-color, var(--ink));
  color: #fff;
}

/* Selection is carried by a checkmark as well as colour, so it survives
   greyscale, glare, and colour vision deficiency. */
.filter-chip.active::before { content: '\2713\00a0'; font-weight: 700; }

/* Inputs ----------------------------------------------------------------- */

.field {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  padding: 15px 16px;
  min-height: var(--tap-min);
  border-radius: 16px;
  border: 1.6px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 12px;
}

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

/* Buttons ---------------------------------------------------------------- */

.spacer { flex: 1; min-height: 16px; }

.onboard-btn {
  width: 100%;
  padding: 16px;
  min-height: var(--tap-min);
  border-radius: 100px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  border: none;
  cursor: pointer;
  margin-bottom: 10px;
}

.onboard-btn.primary { background: var(--btn-color, var(--ink)); color: var(--cream); }

.onboard-btn.primary:disabled {
  background: var(--line);
  color: var(--ink-soft);
  cursor: not-allowed;
}

.onboard-btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1.6px solid var(--line);
}

.onboard-btn:focus-visible,
.filter-chip:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }

.onboard-back {
  width: var(--tap-min); height: var(--tap-min);
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--paper);
  border: 1.4px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 14px;
}

/* Results ---------------------------------------------------------------- */

.result-card {
  background: var(--paper);
  border: 1.6px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
}

.result-card h4 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.result-card p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 6px; line-height: 1.45; }
.result-card .tag {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(79, 121, 66, 0.12); color: var(--leaf);
}

.notice {
  background: rgba(227, 163, 62, 0.14);
  border: 1.4px solid rgba(185, 122, 31, 0.3);
  border-radius: 16px;
  padding: 14px;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 14px;
}

/* Landing ---------------------------------------------------------------- */

.wordmark {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 44px;
  margin: 0 0 8px;
}

.landing-foot {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 14px;
}

/* Headings are focused programmatically on screen change so a screen reader
   lands in the right place. That must not paint a focus ring around a heading
   nobody tabbed to. Real keyboard focus still shows, via :focus-visible above. */
[tabindex="-1"]:focus { outline: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}