/* ============================================================
   337 Farms design system
   Clean canvas · bold type · one signature yolk-gold
   ============================================================ */
:root {
  --canvas:   #FBF9F4;
  --canvas-2: #F3EEE2;
  --ink:      #17150F;
  --ink-70:   rgba(23, 21, 15, 0.70);
  --ink-55:   rgba(23, 21, 15, 0.55);
  --line:     rgba(23, 21, 15, 0.12);
  --yolk:     #FDB813;
  --yolk-deep:#EC8A00;
  --shell:    #FFFFFF;

  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

* { box-sizing: border-box; }
/* hidden must win over any display: flex/grid we set below */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--yolk-deep); }

/* film grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Typography helpers ── */
.eyebrow {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--yolk-deep); margin: 0 0 1.1rem;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.03; margin: 0; }

/* ── Header ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px var(--pad);
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.scrolled {
  padding: 10px var(--pad);
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: 7px; }
.brand-mark {
  position: relative; display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: -0.03em; padding-left: 6px;
}
.brand-yolk {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFE49A, var(--yolk) 55%, var(--yolk-deep));
  margin-right: 8px; box-shadow: 0 0 0 3px rgba(253, 184, 19, 0.18);
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink); }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { font-weight: 500; font-size: 0.95rem; color: var(--ink-70); transition: color 0.2s; }
.site-nav a:hover { color: var(--ink); }
/* The page you're on. Every page already marks its own link; nothing was
   drawing it. */
.site-nav a:not(.nav-cta).active { color: var(--ink); font-weight: 600; }
.nav-cta {
  font-weight: 600 !important; padding: 9px 18px; border-radius: 999px;
  background: var(--ink); color: var(--canvas) !important;
}
.nav-cta span { display: inline-block; transition: transform 0.25s var(--ease); }
.nav-cta:hover span { transform: translateX(4px); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 1rem; padding: 15px 26px; border-radius: 999px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
  will-change: transform;
}
.btn-price {
  font-size: 0.82rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
.btn-primary { background: var(--ink); color: var(--canvas); box-shadow: 0 10px 24px -12px rgba(23, 21, 15, 0.5); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -14px rgba(23, 21, 15, 0.55); }
.btn-ghost { color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-3px); }
.btn-dark { background: var(--ink); color: var(--canvas); }
.btn-dark:hover { transform: translateY(-3px); }
.btn-dark .btn-price { background: rgba(255, 255, 255, 0.18); }
.btn-line { color: var(--ink); border: 1.5px solid rgba(23, 21, 15, 0.28); }
.btn-line:hover { border-color: var(--ink); transform: translateY(-3px); }

/* ── Hero ── */
.hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: 104px var(--pad) 88px; overflow: hidden; }
.hero-glow {
  position: absolute; top: -10%; right: -5%; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle, rgba(253, 184, 19, 0.28), rgba(253, 184, 19, 0) 62%);
  z-index: 0; pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(24px, 5vw, 72px);
}
.hero h1 {
  font-size: clamp(2.7rem, 4.6vw, 4.3rem); font-weight: 700; margin: 0 0 1.5rem;
  line-height: 1.04; letter-spacing: -0.04em; font-optical-sizing: auto; text-wrap: balance;
}
.hero h1 em { font-weight: 600; }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-70); max-width: 30ch; margin: 0 0 2rem; }
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 1.5rem; }
.hero-trust { font-size: 0.86rem; letter-spacing: 0.04em; color: var(--ink-55); margin: 0; }

/* egg art */
.hero-art { display: flex; justify-content: center; position: relative; }
.hero-art::after {
  content: ""; position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 52%; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(23, 21, 15, 0.22), transparent 72%);
  filter: blur(9px); z-index: 0; animation: contact 7s ease-in-out infinite;
}
.egg-stage {
  position: relative; z-index: 1; width: min(560px, 100%);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--sy, 0px));
  transition: transform 0.5s var(--ease); transform-style: preserve-3d; will-change: transform;
}
.egg-float { animation: float 7s ease-in-out infinite; }
.egg { width: 100%; height: auto; overflow: visible; }
.egg-white { fill: #FFFDF7; }
.yolk-layer { transition: transform 0.45s var(--ease); }
.egg-yolk { transform-origin: 238px 250px; animation: pulse 6s ease-in-out infinite; }
.egg-yolk-glow { animation: glow 6s ease-in-out infinite; }
@keyframes contact { 0%, 100% { opacity: 0.9; transform: translateX(-50%) scaleX(1); } 50% { opacity: 0.56; transform: translateX(-50%) scaleX(0.84); } }
.egg-badge {
  position: absolute; right: 2%; bottom: 6%;
  background: var(--ink); color: var(--canvas); border-radius: 50%;
  width: 108px; height: 108px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 18px 40px -16px rgba(23, 21, 15, 0.55); transform: rotate(-8deg);
}
.egg-badge-big { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; }
.egg-badge-small { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin-top: 4px; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes glow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* ── Sections ── */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--pad); }
.section-lead { font-size: clamp(1.9rem, 4.6vw, 3.6rem); max-width: 18ch; margin-bottom: clamp(40px, 6vw, 72px); }

/* cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px 36px; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(23, 21, 15, 0.4); border-color: transparent; }
.card-num { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--yolk-deep); margin-bottom: 20px; }
.card h3 { font-size: 1.5rem; margin-bottom: 12px; }
.card p { color: var(--ink-70); margin: 0; font-size: 0.98rem; }

/* stats */
.stats {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.stat { border-top: 2px solid var(--ink); padding-top: 20px; }
.stat-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; letter-spacing: -0.03em; }
.stat-label { font-size: 0.9rem; color: var(--ink-70); }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: s; }
.step {
  display: grid; grid-template-columns: 56px 1fr 2fr; gap: clamp(12px, 3vw, 40px); align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid var(--line); counter-increment: s;
}
.step::before {
  content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; color: var(--yolk-deep);
}
.step-k { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.step-d { color: var(--ink-70); }

/* ── Good to know: nutrition row + safe-handling band ── */
.nutri-row {
  display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between;
  align-items: start; border-top: 2px solid var(--ink); margin-top: 6px;
}
.nutri-stat { padding: 26px 0 0; }
.nutri-stat .nv { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 0.95; letter-spacing: -0.03em; }
.nutri-stat .nk { display: block; margin-top: 8px; color: var(--ink-70); font-size: 0.95rem; }
.nutri-note { color: var(--ink-70); max-width: 66ch; margin: 22px 0 clamp(44px, 6vw, 68px); font-size: 0.98rem; }
.nutri-note span { color: var(--ink-55); }

.handling-band {
  background: var(--ink); color: var(--canvas); border-radius: var(--radius);
  padding: clamp(30px, 4vw, 48px); display: grid; grid-template-columns: 0.85fr 1.4fr;
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.handling-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yolk); margin-bottom: 16px; }
.handling-intro p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
.handling-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; }
.handling-grid li { display: flex; flex-direction: column; gap: 4px; padding-left: 28px; position: relative; }
.handling-grid li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--yolk); font-weight: 800; }
.handling-grid b { font-weight: 600; font-size: 1.02rem; }
.handling-grid span { color: rgba(251, 249, 244, 0.6); font-size: 0.92rem; line-height: 1.4; }
@media (max-width: 760px) {
  .nutri-row { grid-template-columns: 1fr 1fr; justify-content: start; row-gap: 12px; }
  .handling-band { grid-template-columns: 1fr; }
  .handling-grid { grid-template-columns: 1fr; }
}

/* ── Footer ── */
/* Two columns: the farm on the left, the links sized to whatever they say on
   the right. `auto` rather than a fraction, because a fraction is a promise
   about width that a new link breaks, and "Where to buy" split over two lines
   is how you find out. */
.site-footer {
  max-width: var(--maxw); margin: 0 auto; padding: 64px var(--pad) 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px 56px;
  align-items: start;
  border-top: 1px solid var(--line);
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
/* The header's mark is indented to make room for the yolk beside it. There's no
   yolk down here, so the indent was just knocking the name out of line with
   everything under it. */
.footer-brand .brand-mark { font-size: 1.7rem; padding-left: 0; }
.footer-brand p { color: var(--ink-70); max-width: 34ch; margin: 0; }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  justify-content: flex-end; align-items: flex-start;
}
/* A label wraps as a whole or not at all. */
.footer-links a { color: var(--ink-70); font-weight: 500; white-space: nowrap; transition: color 0.2s; }
.footer-links a:hover { color: var(--ink); }
.footer-legal {
  grid-column: 1 / -1; color: var(--ink-55); font-size: 0.82rem;
  border-top: 1px solid var(--line); padding-top: 24px; margin: 6px 0 0;
}

/* ── Buttons: full width ── */
.btn-block { width: 100%; justify-content: center; }

/* ── Interior page hero ── */
.page-hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(120px, 16vh, 190px) var(--pad) 10px; }
.page-title { font-size: clamp(2.6rem, 7vw, 5rem); margin-bottom: 1.2rem; }
.page-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-70); max-width: 46ch; margin: 0; }
.page-lead a { color: var(--yolk-deep); font-weight: 600; }
.page-lead strong { color: var(--ink); }

/* ── Store list ── */
.stores-section { padding-top: clamp(36px, 6vw, 60px); padding-bottom: clamp(40px, 7vw, 80px); }
.store-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.store-card {
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; position: relative; overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.store-card::before {
  content: ""; position: absolute; top: 22px; right: 22px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFE49A, var(--yolk) 55%, var(--yolk-deep));
}
.store-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(23, 21, 15, 0.4); border-color: transparent; }
.store-card h3 { font-size: 1.4rem; margin-bottom: 12px; }
.store-address { color: var(--ink); font-weight: 500; margin: 0 0 6px; }
.store-note { color: var(--ink-70); font-size: 0.95rem; margin: 0; }

/* ── Coming soon (empty store list) ── */
.coming-soon {
  text-align: center; background: var(--shell); border: 1px solid var(--line); border-radius: 28px;
  padding: clamp(44px, 6vw, 72px) var(--pad);
  background-image: radial-gradient(circle at 50% 0%, rgba(253, 184, 19, 0.12), rgba(253, 184, 19, 0) 60%);
}
.cs-badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--yolk-deep);
  border: 1px solid rgba(236, 138, 0, 0.3); border-radius: 999px; padding: 7px 16px; margin-bottom: 26px;
}
.coming-soon h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin-bottom: 16px; max-width: 20ch; margin-inline: auto; }
.coming-soon p { color: var(--ink-70); max-width: 42ch; margin: 0 auto; font-size: 1.08rem; }
.coming-soon p a { color: var(--yolk-deep); font-weight: 600; white-space: nowrap; }

/* ── Wholesale section ── */
.wholesale { border-top: 1px solid var(--line); }
.wholesale-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 6vw, 72px); align-items: start; }
.wholesale-copy .section-lead { margin-bottom: 22px; }
.wholesale-intro { color: var(--ink-70); margin: 0 0 24px; }
.wholesale-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wholesale-points li { padding-left: 28px; position: relative; color: var(--ink); }
.wholesale-points li::before { content: "✳"; position: absolute; left: 0; color: var(--yolk-deep); font-weight: 700; }

/* ── Forms (shared: wholesale + order) ── */
.wholesale-form, .order-form { max-width: 640px; }
.wholesale-form {
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
}
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--yolk-deep); }
.field .opt, .opt { color: var(--ink-55); font-weight: 400; }
.wholesale-form input, .wholesale-form textarea,
.order-form input[type="text"], .order-form input[type="email"], .order-form input[type="tel"], .order-form textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--canvas);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wholesale-form input:focus, .wholesale-form textarea:focus,
.order-form input:focus, .order-form textarea:focus {
  outline: none; border-color: var(--yolk); box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.16);
}
.wholesale-form textarea, .order-form textarea { resize: vertical; }
.wholesale-form .btn-block { margin-top: 6px; }

/* form status messages */
.form-status { margin: 14px 0 0; font-size: 0.92rem; font-weight: 500; padding: 12px 16px; border-radius: 12px; }
.form-status.success { background: rgba(253, 184, 19, 0.16); color: var(--yolk-deep); border: 1px solid rgba(236, 138, 0, 0.3); }
.form-status.error { background: rgba(200, 60, 40, 0.08); color: #9c3320; border: 1px solid rgba(200, 60, 40, 0.25); }

/* ── Order page ── */
.order-page { max-width: 680px; margin: 0 auto; padding: 0 var(--pad) clamp(60px, 10vw, 100px); }
/* The page title is sized for a full-width hero; in a 680px column it broke
   across three lines. Scaled to the column it lives in. */
.order-page .page-hero { padding: clamp(104px, 13vh, 148px) 0 4px; }
.order-page .page-title { font-size: clamp(2.3rem, 5.5vw, 3.4rem); margin-bottom: 0; }
.order-form { margin: 0 auto; }
.form-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--shell); padding: 22px 24px 24px; margin: 0 0 14px; }
/* These were <legend>s, which browsers paint into the notch they cut in the
   fieldset's border, straddling the card edge, breaking the rounded corner,
   and wrapping across it on a narrow phone. They're ordinary headings on a
   labelled group now, so they sit inside the card like everything else. */
.card-legend { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; margin: 0 0 16px; }
.qty-row { display: flex; align-items: center; gap: 12px; margin: 0; }
/* The stepper is the whole point of this card; don't strand it in a corner. */
.form-card .qty-row { justify-content: flex-start; }
.qty-btn {
  width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--canvas);
  font-size: 1.5rem; font-weight: 600; color: var(--ink); cursor: pointer; line-height: 1;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.qty-btn:hover { border-color: var(--ink); }
.qty-btn:active { transform: scale(0.94); }
/* The input matches the - and + buttons exactly: same height, radius, border. */
.qty-row input {
  width: 88px; height: 48px; padding: 0; text-align: center;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--shell);
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.qty-row input:focus { outline: none; border-color: var(--yolk); box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.16); }
.total-line { font-size: 1.05rem; color: var(--ink-70); margin: 6px 0 0; }
.total-line strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin-left: 6px; }
.pay-options { display: grid; gap: 10px; }
.radio {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line);
  border-radius: 12px; cursor: pointer; font-weight: 500; transition: border-color 0.2s, background 0.2s;
}
.radio:hover { border-color: rgba(23, 21, 15, 0.3); }
.radio input { accent-color: var(--yolk-deep); width: 18px; height: 18px; }
.radio:has(input:checked) { border-color: var(--yolk); background: rgba(253, 184, 19, 0.08); }
.checkout-mount { margin-top: 24px; }

/* ── Order summary: a paper receipt ──
   It used to be a slab of black, which pulled the whole page towards it for
   what is only a short list of numbers. On paper it sits with the form cards
   instead of shouting over them, and the arithmetic reads the way arithmetic
   should: aligned, hairline-ruled, and quiet until the total. */
.summary {
  background: var(--shell); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px 22px; margin: 0 0 14px;
}
.summary-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--yolk-deep); margin: 0 0 4px;
}
.summary-rows { margin: 0; }
.summary-rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  transition: opacity 0.25s var(--ease);
}
.summary-rows > div:first-child { border-top: 1px solid var(--line); margin-top: 14px; }
.summary-rows dt { color: var(--ink-70); font-size: 0.95rem; }
.summary-rows dt span { color: var(--ink-55); font-size: 0.82rem; }
/* Figures line up in a column, as on a till roll. */
.summary-rows dd {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.summary-rows > div.waived { opacity: 0.45; }
.summary-rows > div.waived dd { text-decoration: line-through; }
.summary-rows > div.discount dt, .summary-rows > div.discount dd { color: var(--yolk-deep); }

/* The one heavy rule on the page: everything above it adds up to this. */
.summary-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 0 0; margin-top: 2px; border-top: 2px solid var(--ink);
}
.summary-total span { font-size: 0.95rem; font-weight: 600; }
.summary-total strong {
  font-family: var(--font-display); font-weight: 800; font-size: 1.9rem;
  letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.summary-note { font-size: 0.85rem; line-height: 1.5; color: var(--ink-55); margin: 14px 0 0; max-width: 44ch; }
.summary.updating .summary-rows, .summary.updating .summary-total { opacity: 0.55; }
.summary-rows, .summary-total { transition: opacity 0.2s var(--ease); }
/* Nothing to pay is the one number worth colouring. */
.summary.is-free .summary-total strong { font-size: 1.7rem; color: var(--yolk-deep); }

/* ── Discount code ── */
.field-hint { font-size: 0.82rem; line-height: 1.45; color: var(--ink-55); margin: 2px 0 0; }
.promo-row { display: flex; gap: 10px; align-items: stretch; }
.promo-row input { flex: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.promo-apply {
  flex: 0 0 auto; font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--ink);
  background: var(--canvas); border: 1.5px solid var(--line); border-radius: 12px; padding: 0 20px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.promo-apply:hover { border-color: var(--ink); }
.promo-status { font-size: 0.86rem; line-height: 1.45; margin: 8px 0 0; font-weight: 500; }
.promo-status.success { color: var(--yolk-deep); }
.promo-status.error { color: #9c3320; }

/* ── Free order: no payment step at all ── */

/* ── Pickup scheduler ── */
.pickup-where { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 12px; }
.pickup-addr { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.pickup-addr strong { font-family: var(--font-display); font-weight: 700; }
.pickup-dir { color: var(--yolk-deep); font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.pickup-dir:hover { text-decoration: underline; }
.pickup-help { color: var(--ink-70); font-size: 0.95rem; line-height: 1.5; margin: 0 0 22px; }
.pickup-card select {
  width: 100%; font: inherit; color: var(--ink); background-color: var(--canvas);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 40px 13px 14px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2317150F' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.pickup-card select:focus { outline: none; border-color: var(--yolk); box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.16); }
.slot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.slot { position: relative; }
.slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.slot span { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; padding: 13px 4px; border: 1.5px solid var(--line); border-radius: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.05; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.slot span small { font-family: var(--font-body); font-weight: 500; font-size: 0.68rem; color: var(--ink-55); }
.slot input:checked + span { border-color: var(--yolk); background: rgba(253, 184, 19, 0.12); }
.slot input:focus-visible + span { border-color: var(--yolk-deep); box-shadow: 0 0 0 3px rgba(253, 184, 19, 0.2); }
@media (max-width: 560px) {
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  /* Five windows in two columns leaves the last one stranded. Let it stretch. */
  .slot-grid > .slot:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Success page ── */
.success-page { min-height: 74vh; display: grid; place-items: center; padding: 140px var(--pad) 80px; }
.success-card {
  background: var(--shell); border: 1px solid var(--line); border-radius: 28px;
  padding: clamp(40px, 6vw, 64px); text-align: center; max-width: 560px;
  box-shadow: 0 40px 80px -50px rgba(23, 21, 15, 0.4);
}
.success-egg { display: flex; justify-content: center; margin-bottom: 20px; animation: float 7s ease-in-out infinite; }
.success-card h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 14px; }
.success-card #message { color: var(--ink-70); margin: 0 auto 28px; max-width: 40ch; }
.success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* interior responsive */
@media (max-width: 900px) {
  .store-list { grid-template-columns: 1fr; }
  .wholesale-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ── Reveal animation: springy pop-in with a hint of character ── */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.985) rotate(var(--rot, 0deg));
  filter: blur(5px);
  transition: opacity 0.7s var(--ease), transform 0.85s var(--spring), filter 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; filter: none; }
/* cards tip in from alternating angles for a playful entrance */
.cards .card:nth-child(odd), .dyk-grid .dyk:nth-child(odd) { --rot: -1.6deg; }
.cards .card:nth-child(even), .dyk-grid .dyk:nth-child(even) { --rot: 1.6deg; }
/* Yolk highlight sweeps under accent words as each headline arrives.
   It was a flat block of colour with a hard top edge, cutting straight across
   the middle of the letters and stopping dead at both ends: a rectangle, not a
   mark anybody made. It fades out towards the top now, sits lower, and carries
   less colour, so it passes behind the word instead of through it. */
.section-lead em, .creed-head em, .page-title em {
  background-image: linear-gradient(
    to top,
    rgba(253, 184, 19, 0.26) 0%,
    rgba(253, 184, 19, 0.26) 44%,
    rgba(253, 184, 19, 0.12) 78%,
    rgba(253, 184, 19, 0) 100%
  );
  background-repeat: no-repeat; background-size: 0% 34%; background-position: 0 92%;
  transition: background-size 0.7s var(--ease) 0.4s;
}
.reveal.in em { background-size: 100% 34%; }
/* yolk progress bar: the site fills up as you explore */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--yolk), var(--yolk-deep));
  transform-origin: left; transform: scaleX(0); pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: left; }
  .hero-art { order: -1; margin-bottom: 10px; }
  .egg-stage { width: min(320px, 70%); }
  .hero-sub { max-width: 46ch; }
  .cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .step { grid-template-columns: 40px 1fr; }
  .step-d { grid-column: 2; }
  .site-footer { grid-template-columns: 1fr; gap: 28px; }
  .footer-links { justify-content: flex-start; gap: 12px 24px; }
}
@media (max-width: 560px) {
  .site-nav { gap: 14px; }
  .site-nav a:not(.nav-cta) { display: none; }
  .btn { width: 100%; justify-content: center; }
  .hero-actions { flex-direction: column; }
}

/* ── The 337 creed ── */
.creed { border-top: 1px solid var(--line); }
.creed .eyebrow { margin-bottom: 1.4rem; }
.creed-head { font-size: clamp(2rem, 5.2vw, 3.8rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; max-width: 18ch; margin-bottom: clamp(24px, 3vw, 40px); }
.creed-head em { font-style: italic; color: var(--yolk-deep); }
.creed-body { font-size: clamp(1.15rem, 1.9vw, 1.5rem); color: var(--ink-70); max-width: 42ch; line-height: 1.45; margin: 0; }
.creed-body strong { color: var(--yolk-deep); font-weight: 700; }
.creed-sig { font-family: "Caveat", cursive; font-size: 2.3rem; line-height: 1.1; color: var(--ink); margin: 30px 0 0; transform: rotate(-2deg); }
.creed-sig span { display: block; font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-55); transform: none; margin-top: 2px; }

/* ── Did you know ── */
.didyouknow .section-lead { margin-bottom: clamp(30px, 5vw, 54px); }
.dyk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 48px) clamp(40px, 6vw, 90px); }
.dyk { border-top: 2px solid var(--ink); padding-top: 22px; }
.dyk-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yolk-deep); margin-bottom: 14px; }
.dyk h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 12px; }
.dyk p { color: var(--ink-70); margin: 0; font-size: 1rem; line-height: 1.55; }
@media (max-width: 760px) { .dyk-grid { grid-template-columns: 1fr; } }

/* ══════════ Fun & interactive layer ══════════ */
.gtk-sub { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-55); margin: 0 0 8px; }

/* Primary CTAs get a yolk fill that sweeps up on hover (site-wide) */
.btn-primary, .btn-dark { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), color 0.3s var(--ease); }
.btn-primary::after, .btn-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--yolk), var(--yolk-deep)); transform: translateY(101%); transition: transform 0.42s var(--ease); }
.btn-primary:hover::after, .btn-dark:hover::after { transform: translateY(0); }
.btn-primary:hover, .btn-dark:hover { color: var(--ink); }
.btn-primary:hover .btn-price, .btn-dark:hover .btn-price { background: rgba(23, 21, 15, 0.16); }
.btn-primary:active, .btn-dark:active { transform: translateY(0) scale(0.98); }

/* Nav CTA gets the same treatment */
.nav-cta { position: relative; overflow: hidden; isolation: isolate; transition: color 0.3s var(--ease); }
.nav-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--yolk), var(--yolk-deep)); transform: translateY(101%); transition: transform 0.4s var(--ease); }
.nav-cta:hover::after { transform: translateY(0); }
.nav-cta:hover { color: var(--ink) !important; }

/* Standard cards: a yolk hairline draws across the top on hover */
.card { position: relative; overflow: hidden; }
.card::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--yolk), var(--yolk-deep)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.card:hover::after { transform: scaleX(1); }
.card:hover .card-num { letter-spacing: 0.06em; }
.card-num { transition: letter-spacing 0.4s var(--ease); }

/* Store cards (where-to-buy) - same delight */
.store-card::after { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--yolk), var(--yolk-deep)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.store-card { overflow: hidden; }
.store-card:hover::after { transform: scaleX(1); }

/* count-up numbers snap to tabular so they don't jitter while animating */
.nutri-stat .nv { font-variant-numeric: tabular-nums; }

/* Egg shout + confetti */
.egg-shout {
  position: absolute; left: 50%; top: 6%; transform: translateX(-50%) rotate(var(--tilt, 0deg));
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: -0.02em; color: var(--ink); background: var(--yolk);
  padding: 8px 20px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(23, 21, 15, 0.5);
  animation: shoutpop 1.3s var(--spring) forwards; pointer-events: none; z-index: 5;
}
@keyframes shoutpop {
  0% { opacity: 0; transform: translateX(-50%) rotate(var(--tilt)) scale(0.4) translateY(20px); }
  16% { opacity: 1; transform: translateX(-50%) rotate(var(--tilt)) scale(1.08) translateY(-6px); }
  26% { transform: translateX(-50%) rotate(var(--tilt)) scale(1) translateY(-10px); }
  78% { opacity: 1; transform: translateX(-50%) rotate(var(--tilt)) scale(1) translateY(-18px); }
  100% { opacity: 0; transform: translateX(-50%) rotate(var(--tilt)) scale(0.94) translateY(-30px); }
}
.egg-bit { position: absolute; left: 50%; top: 45%; font-size: 22px; pointer-events: none; z-index: 4; }

/* Poke the egg - it gives a little squish */
.egg-stage { cursor: pointer; }
.egg { transition: transform 0.2s var(--ease); }
@keyframes eggpop { 0% { transform: scale(1); } 28% { transform: scale(0.9) rotate(-2deg); } 60% { transform: scale(1.05) rotate(1.5deg); } 100% { transform: scale(1); } }
.egg.pop { animation: eggpop 0.55s var(--ease); }

/* ══════════ Mobile menu + sticky order bar ══════════ */
.nav-toggle { display: none; }
.mobile-menu { display: none; }
.mobile-order-bar { display: none; }

@media (max-width: 720px) {
  .site-nav { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-right: -10px; background: none; border: 0; cursor: pointer; position: relative; z-index: 2;
  }
  .nav-toggle span { display: block; width: 26px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.32s var(--ease), opacity 0.2s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .mobile-menu {
    display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
    position: fixed; inset: 0; z-index: 25; background: var(--canvas); overflow-y: auto;
    padding: 92px var(--pad) 40px;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  }
  .mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu a {
    font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
    letter-spacing: -0.02em; color: var(--ink); padding: 16px 2px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
  }
  .mobile-menu a::after { content: "→"; font-size: 1rem; color: var(--ink-55); }
  .mobile-menu .mm-cta {
    margin-top: 22px; border-bottom: 0; background: var(--ink); color: var(--canvas);
    border-radius: 999px; padding: 16px 22px; justify-content: center; gap: 10px;
    font-size: 1.05rem; font-weight: 600;
  }
  .mobile-menu .mm-cta::after { content: none; }
  .mobile-menu .mm-cta span { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--canvas); background: rgba(255,255,255,0.18); padding: 3px 10px; border-radius: 999px; }
  body.menu-open { overflow: hidden; }

  .mobile-order-bar {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 22;
    background: var(--ink); color: var(--canvas); padding: 16px 20px; border-radius: 16px;
    font-family: var(--font-body); font-weight: 600; font-size: 1.02rem;
    box-shadow: 0 14px 32px -12px rgba(23, 21, 15, 0.55);
    transform: translateY(160%); transition: transform 0.45s var(--ease);
  }
  .mobile-order-bar.show { transform: none; }
  .mobile-order-bar.typing { transform: translateY(160%); }
  .mobile-order-bar span { background: rgba(255, 255, 255, 0.18); padding: 4px 11px; border-radius: 999px; font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn-primary::after, .btn-dark::after, .nav-cta::after { display: none; }
}

/* ── Contact helper lines ── */
.help-line { text-align: center; font-size: 0.92rem; color: var(--ink-70); margin: 18px 0 0; }
.help-line a, .foot-phone a { color: var(--yolk-deep); font-weight: 600; white-space: nowrap; }
.help-line a:hover, .foot-phone a:hover { text-decoration: underline; }
.foot-phone { color: var(--ink-70); margin: 6px 0 0; font-size: 0.95rem; }

/* ── Checkout step: give the payment hand-off context ── */
.checkout-step { padding-top: 92px; } /* clear the fixed site header */
.checkout-back {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink-70); padding: 8px 0; margin-bottom: 18px;
  transition: color 0.2s var(--ease);
}
.checkout-back:hover { color: var(--ink); }
.checkout-head { font-size: clamp(1.9rem, 5vw, 2.7rem); font-weight: 700; letter-spacing: -0.035em; margin-bottom: 10px; }
.checkout-recap {
  color: var(--ink-70); margin: 0 0 24px; font-size: 1rem;
  background: var(--shell); border: 1px solid var(--line); border-left: 4px solid var(--yolk);
  border-radius: 12px; padding: 14px 18px;
}

/* ── Home: three reasons + buy ── */
.reasons { padding-top: clamp(30px, 5vw, 50px); }
.reason-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.reason-list li {
  padding: 22px 0; border-bottom: 1px solid var(--line);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--ink-70); line-height: 1.5;
}
.reason-list b { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.reasons-more { margin: 22px 0 0; }
.reasons-more a { color: var(--yolk-deep); font-weight: 600; }
.reasons-more a:hover { text-decoration: underline; }

.buy {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(50px, 8vw, 90px) var(--pad) clamp(60px, 9vw, 110px);
  text-align: center;
}
.buy h2 { font-size: clamp(2.2rem, 6.5vw, 4rem); font-weight: 700; letter-spacing: -0.035em; margin-bottom: 12px; }
.buy p { color: var(--ink-70); font-size: 1.08rem; margin: 0 auto 28px; max-width: 38ch; }

/* Prompt shown until contact details are complete */
.await-contact {
  text-align: center; font-size: 0.95rem; color: var(--ink-55);
  background: var(--shell); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 18px; margin: 0;
}

/* The - and + buttons are the control; hide the browser's own spinners. */
.qty-row input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qty-row input[type="number"]::-webkit-outer-spin-button,
.qty-row input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Two-step order form */
#step1-next { margin-top: 6px; }
.step-hint { margin: 12px 0 0; }

/* Returning customer */
.welcome-back {
  background: rgba(253, 184, 19, 0.12); border: 1px solid rgba(236, 138, 0, 0.28);
  border-radius: 12px; padding: 12px 16px; margin: 0 0 16px;
  font-size: 0.95rem; color: var(--ink);
}
.link-btn {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--yolk-deep); font-weight: 600; text-decoration: underline;
}

/* Step 1 folded into a confirmed line */
/* Who we already know you are. It was a bordered card with its own thick left
   rule, which put it in direct competition with the form card underneath it,
   for what is really just a line saying "still you?". It's a quiet row above
   the form now, separated by a hairline rather than boxed off. */
.contact-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 0 2px 16px; margin: 0 0 20px;
  animation: csIn 0.4s var(--ease);
}
@keyframes csIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cs-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs-who strong { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.cs-who span {
  font-size: 0.88rem; color: var(--ink-55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 480px) {
  /* Name and contact stack; "Edit" keeps to the first line rather than
     floating in the middle of a wrapped address. */
  .contact-summary { padding: 0 0 15px; align-items: flex-start; }
  .cs-who span { white-space: normal; line-height: 1.45; }
  .contact-summary .link-btn { padding-top: 2px; }
}

/* A free order needs no announcement of its own. It runs down the same summary
   rows as any other order and lands on the word "Free" where the number goes.
   The title above it does the smiling. */
@keyframes freePop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Shared by the cards that do speak up for themselves, sold out, and the like. */
.card-kicker {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--yolk-deep); margin: 0 0 10px;
}
.card-sub { margin: 12px auto 0; max-width: 34ch; color: var(--ink-55); font-size: 0.95rem; }

/* Choice of delivery or collection, as a segmented control rather than
   two stacked radio boxes. */
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--canvas-2); border-radius: 14px; padding: 5px; }
.segmented label { position: relative; }
.segmented input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.segmented span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 14px 10px; border-radius: 10px; cursor: pointer; text-align: center;
  font-weight: 600; font-size: 0.98rem; color: var(--ink-70);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.segmented span small { font-weight: 500; font-size: 0.78rem; color: var(--ink-55); }
.segmented input:checked + span {
  background: var(--shell); color: var(--ink);
  box-shadow: 0 1px 3px rgba(23, 21, 15, 0.14), 0 0 0 1px rgba(23, 21, 15, 0.05);
}
.segmented input:checked + span small { color: var(--yolk-deep); }
.segmented input:focus-visible + span { box-shadow: 0 0 0 3px rgba(253, 184, 19, 0.35); }

/* Delivery-or-pickup note under the choice */
.fulfil-note { margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-55); }

/* ══════════ How many are left ══════════
   A live count, told quietly.

   This used to be a bordered pill on the home page and a bordered slab with a
   thick left rule on the order page. Both read as stickers applied on top of
   the page, and on the order page it made three boxes in a row: the count, who
   you are, and the first card of the form, all the same shape and weight.
   It's a line of type now. The number carries the weight, the dot says the
   number is live, and nothing is drawn around either. Green while there's
   plenty, amber when it's thin, and the form steps aside when there are none. */
.stock-chip, .stock-strip {
  display: flex; align-items: baseline; gap: 11px;
  padding: 0; background: none; border: 0; border-radius: 0;
  font-size: 1rem; font-weight: 400; color: var(--ink-55);
  letter-spacing: -0.005em;
}
/* The count itself, set in the display face like the headings it sits under. */
.stock-chip b, .stock-strip b {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.1rem; letter-spacing: -0.025em; color: var(--ink);
}
.stock-dot {
  /* Baseline-aligned rows put a bare dot on the text baseline; nudge it up to
     sit against the middle of the words instead. */
  position: relative; flex: 0 0 auto; align-self: center; top: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #4a8f5b;
}
/* One slow breath outwards. It reads as live without asking for attention,
   which a blinking dot does and this doesn't. */
.stock-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: stockPulse 2.8s ease-out infinite;
}
@keyframes stockPulse {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(3.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .stock-dot::after { animation: none; } }

.stock-chip.is-low .stock-dot, .stock-strip.is-low .stock-dot { background: var(--yolk-deep); }
.stock-chip.is-low b, .stock-strip.is-low b { color: var(--yolk-deep); }
.stock-chip.is-out .stock-dot, .stock-strip.is-out .stock-dot { background: #9c3320; }
.stock-chip.is-out .stock-dot::after { animation: none; }

/* Home hero: sits under the paragraph, above the buttons. */
.stock-chip { margin: -0.4rem 0 1.7rem; }
/* Order page: a caption to the title, so it belongs to the heading rather than
   floating between the heading and the form. */
.stock-strip { margin: 14px 0 26px; }
.stock-note { margin: 14px 0 0; font-size: 0.88rem; color: var(--yolk-deep); font-weight: 500; }

/* Sold out: the same calm card the free order uses, wearing a different hat. */
.sold-out {
  display: block; text-align: center;
  background: var(--shell); border: 1px solid var(--line);
  border-radius: 24px; padding: 46px 30px 40px;
  /* This card replaces the page hero, so it carries the hero's top spacing
     and stays clear of the fixed header. */
  margin: clamp(120px, 16vh, 190px) 0 16px;
  background-image: radial-gradient(circle at 50% 0%, rgba(253, 184, 19, 0.1), rgba(253, 184, 19, 0) 62%);
  animation: freePop 0.5s var(--ease);
}
.sold-out .so-egg { display: block; font-size: 40px; line-height: 1; margin: 0 0 16px; }
.sold-out strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 5.4vw, 2.4rem); line-height: 1.1; letter-spacing: -0.035em;
  color: var(--ink); max-width: 16ch; margin: 0 auto;
}
.sold-out strong em { font-style: italic; color: var(--yolk-deep); }
.so-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ══════════ Admin ══════════
   Same paper and ink as the rest of the site, just quieter: this page is a
   workbench, not a shop window. */
.admin-page { max-width: 860px; margin: 0 auto; padding: clamp(110px, 15vh, 160px) var(--pad) clamp(60px, 9vw, 90px); }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.admin-head h1 { font-size: clamp(2rem, 5.4vw, 3rem); }
.admin-who { font-size: 0.9rem; color: var(--ink-55); margin: 8px 0 0; }
.admin-card {
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px); margin: 0 0 18px;
}
.admin-card h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 6px; }
.admin-card .hint { color: var(--ink-55); font-size: 0.92rem; margin: 0 0 20px; }

/* The number that matters */
.stock-hero { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.stock-big {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 12vw, 5.6rem);
  line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.stock-big.is-out { color: #9c3320; }
.stock-unit { font-size: 1.05rem; color: var(--ink-70); font-weight: 500; }
.stock-meta { margin: 18px 0 0; font-size: 0.88rem; color: var(--ink-55); line-height: 1.6; }
.stock-meta b { color: var(--ink); font-weight: 600; }

.stock-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.chip-btn {
  font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--ink);
  background: var(--canvas); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 11px 18px; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.chip-btn:hover { border-color: var(--ink); }
.chip-btn:active { transform: scale(0.97); }
.chip-btn.danger { color: #9c3320; border-color: rgba(156, 51, 32, 0.3); }
.chip-btn.danger:hover { border-color: #9c3320; background: rgba(200, 60, 40, 0.06); }
.chip-btn[disabled] { opacity: 0.5; cursor: default; }

.set-row { display: flex; gap: 10px; align-items: stretch; margin: 20px 0 0; max-width: 380px; }
.set-row input {
  flex: 1; width: 100%; font: inherit; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  color: var(--ink); background: var(--canvas); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 12px 16px; text-align: center;
}
.set-row input:focus { outline: none; border-color: var(--yolk); box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.16); }
.set-row .btn { padding: 12px 22px; font-size: 0.95rem; }
.set-row input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.set-row input[type="number"]::-webkit-outer-spin-button,
.set-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Orders */
.order-rows { list-style: none; margin: 0; padding: 0; }
.order-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.order-row:last-child { border-bottom: 0; padding-bottom: 0; }
.order-qty { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; }
.order-who { font-weight: 600; }
.order-when { color: var(--ink-55); font-size: 0.86rem; text-align: right; white-space: nowrap; }
.order-detail { grid-column: 2 / -1; color: var(--ink-55); font-size: 0.86rem; line-height: 1.5; }
.order-detail a { color: var(--ink-70); }
.tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: rgba(23, 21, 15, 0.06); color: var(--ink-70); margin-right: 8px;
}
.tag.paid { background: rgba(74, 143, 91, 0.14); color: #37704a; }
.tag.pending { background: rgba(253, 184, 19, 0.2); color: var(--yolk-deep); }
.tag.expired, .tag.abandoned { background: rgba(23, 21, 15, 0.06); color: var(--ink-55); }
.tag.free { background: rgba(236, 138, 0, 0.16); color: var(--yolk-deep); }

/* Passkeys */
.key-rows { list-style: none; margin: 0 0 20px; padding: 0; }
.key-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.key-row:last-child { border-bottom: 0; }
.key-face { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.key-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.key-what strong { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.key-what span { font-size: 0.84rem; color: var(--ink-55); }
.key-row .chip-btn { flex: 0 0 auto; padding: 8px 14px; font-size: 0.86rem; }
@media (max-width: 520px) {
  .key-row { flex-wrap: wrap; }
  .key-what { flex-basis: calc(100% - 34px); }
  .key-row .chip-btn { margin-left: 34px; }
}

.empty-note { color: var(--ink-55); margin: 0; }
/* An empty state is the absence of news. At body size it was setting itself
   in type as large as the card title and reading like an announcement. */
.admin-page .empty-note { font-size: 0.85rem; line-height: 1.5; }
.admin-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }
.foot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-health { font-size: 0.86rem; color: var(--ink-55); }
.admin-health b { font-weight: 600; }
.admin-health.bad { color: #9c3320; }

/* ── Sign in: a panel over the top of the page ──
   The dashboard stays where it is and goes soft behind frosted glass. It holds
   nothing but placeholders until the session is real, so the blur is only ever
   scenery. */
.lock-screen {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--canvas) 62%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  animation: lockFade 0.35s var(--ease);
}
/* No color-mix, no backdrop-filter, no problem: fall back to solid paper. */
@supports not (backdrop-filter: blur(2px)) {
  .lock-screen { background: var(--canvas); }
}
@keyframes lockFade { from { opacity: 0; } to { opacity: 1; } }

.lock-card {
  width: min(440px, 100%); margin: 0; text-align: center;
  box-shadow: 0 50px 90px -50px rgba(23, 21, 15, 0.55);
  animation: lockRise 0.5s var(--spring);
}
@keyframes lockRise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.lock-mark { display: block; font-size: 34px; line-height: 1; margin: 2px 0 16px; }
.lock-card h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); margin-bottom: 10px; }
.lock-card .hint { margin-bottom: 24px; text-align: center; }
.lock-card input {
  width: 100%; font: inherit; color: var(--ink); background: var(--canvas);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; text-align: center;
}
.lock-card input:focus { outline: none; border-color: var(--yolk); box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.16); }
.lock-card .code {
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
  letter-spacing: 0.5em; padding-left: 0.5em;
}
.lock-card .btn-block { margin-top: 14px; }
.signin-back { margin: 16px 0 0; text-align: center; font-size: 0.9rem; color: var(--ink-55); }

/* The page underneath */
.admin-page.is-locked { filter: saturate(0.55); opacity: 0.75; user-select: none; }
body.is-locked { overflow: hidden; }

/* Ghost rows: something for the glass to blur that gives nothing away. */
.order-row.ghost { align-items: center; }
.ghost-bar {
  display: block; height: 12px; border-radius: 6px;
  background: rgba(23, 21, 15, 0.09); animation: ghostPulse 2.4s ease-in-out infinite;
}
.ghost-bar.detail { grid-column: 2 / -1; width: 68%; height: 10px; margin-top: 4px; }
@keyframes ghostPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

@media (max-width: 560px) {
  .admin-head { align-items: flex-start; }
  .order-row { grid-template-columns: auto 1fr; }
  .order-when { grid-column: 2; text-align: left; }
  .order-detail { grid-column: 1 / -1; }
}

/* ══════════ Carton feedback: /tasted.html ══════════
   Reached by scanning a sticker on a carton, so this is a phone experience
   first and a desktop one by accident. One question a screen, thumb-sized
   targets, and nothing that looks like a form if it can be helped. */
.ask-body { min-height: 100vh; min-height: 100dvh; }
.ask {
  position: relative; z-index: 2;
  max-width: 560px; margin: 0 auto;
  padding: 22px var(--pad) calc(40px + env(safe-area-inset-bottom));
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}

.ask-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 4.5vh, 38px); }
.ask-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.ask-brand .brand-yolk { width: 10px; height: 10px; margin: 0; }

/* One egg per question, filling as you go. */
.ask-dots { display: flex; gap: 7px; list-style: none; margin: 0; padding: 0; }
.ask-dot { width: 8px; height: 10px; border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%; background: rgba(23, 21, 15, 0.13); transition: background 0.35s var(--ease), transform 0.35s var(--spring); }
.ask-dot.is-done { background: var(--yolk-deep); }
.ask-dot.is-now { background: var(--yolk); transform: scale(1.35); }

/* Screens are stacked; only one is ever on. */
.ask-card {
  display: none; flex-direction: column; flex: 1; justify-content: center;
  padding-bottom: clamp(16px, 6vh, 56px);   /* sit a touch above true centre */
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.45s var(--ease), transform 0.5s var(--spring);
}
.ask-card.is-on { display: flex; opacity: 1; transform: none; }
.ask-card.is-gone { display: none; }

.ask-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yolk-deep); margin: 0 0 10px; }
.ask-h {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 7.8vw, 2.85rem); line-height: 1.03; letter-spacing: -0.04em;
  margin: 0 0 14px; text-wrap: balance;
}
.ask-h em { font-style: italic; color: var(--yolk-deep); }
.ask-p { color: var(--ink-70); font-size: 1rem; line-height: 1.5; margin: 0 0 22px; max-width: 32ch; }
.ask-fine { color: var(--ink-55); font-size: 0.82rem; line-height: 1.45; margin: 14px 0 0; max-width: 38ch; }
.ask-label { display: block; font-size: 0.85rem; font-weight: 600; margin: 4px 0 8px; }
/* One question a screen leaves a lot of empty phone. Rather than pin the button
   to the bottom and leave a hole under the question, the whole screen (question,
   answers, action) is one group centred in the space. Nothing floats, and on a
   short screen the button lands under your thumb anyway. */
.ask-go { margin-top: 6px; }
.ask-skip {
  display: block; margin: 14px auto 0; padding: 10px 8px; text-align: center;
  color: var(--ink-55); font-weight: 500; font-size: 0.92rem; text-decoration: none;
}
.ask-skip:hover { color: var(--ink); }

/* Rating: five eggs that fill with yolk up to the one you tap. */
.egg-rate { display: flex; gap: clamp(8px, 2.6vw, 13px); margin: 4px 0 16px; }
.egg-pip {
  flex: 1; aspect-ratio: 1 / 1.24; max-width: 64px;
  border: 2px solid var(--line); background: var(--shell); cursor: pointer;
  border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
  transition: border-color 0.25s, background 0.4s var(--ease), transform 0.3s var(--spring);
}
.egg-pip:hover { border-color: rgba(236, 138, 0, 0.5); transform: translateY(-3px); }
.egg-pip.is-on {
  border-color: var(--yolk-deep);
  background: radial-gradient(circle at 50% 42%, #FFE49A 0%, var(--yolk) 46%, var(--yolk-deep) 100%);
  transform: translateY(-2px);
}
.egg-pip:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.35); }
.ask-rate-word { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink-55); margin: 0; min-height: 1.6em; transition: color 0.3s; }
.ask-rate-word.is-said { color: var(--ink); }

/* One-of choices. Big enough to hit without looking. */
.ask-choices { display: grid; gap: 10px; margin: 0 0 16px; }
.ask-choice {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--shell); cursor: pointer; font: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.15s var(--ease);
}
.ask-choice b { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em; }
.ask-choice span { font-size: 0.88rem; color: var(--ink-55); }
.ask-choice:hover { border-color: rgba(23, 21, 15, 0.3); }
.ask-choice:active { transform: scale(0.985); }
.ask-choice.is-on { border-color: var(--yolk); background: rgba(253, 184, 19, 0.1); }
.ask-choice:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.3); }

/* The price slider. It rests at mid-scale and reads "Slide to answer" until
   it's touched, so the resting position never reads as our suggestion, and an
   untouched slider stays a skipped question rather than a $7.50 answer. */
.price-ask { margin: 6px 0 20px; }
.price-read {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 9vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.15;
  color: var(--ink-55); margin: 0 0 14px; min-height: 1.15em;
  transition: color 0.25s;
}
.price-read.is-said { color: var(--ink); }
.price-range {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 34px; margin: 0;
  background: transparent; cursor: pointer;
}
.price-range::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px; background: var(--line);
}
.price-range::-moz-range-track {
  height: 10px; border-radius: 999px; background: var(--line);
}
/* A yolk for a thumb, the same one the rating eggs fill with. */
.price-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; margin-top: -11px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #FFE49A 0%, var(--yolk) 48%, var(--yolk-deep) 100%);
  border: 2px solid var(--shell); box-shadow: 0 2px 8px rgba(23, 21, 15, 0.22);
  transition: transform 0.15s var(--spring);
}
.price-range::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--shell);
  background: radial-gradient(circle at 50% 38%, #FFE49A 0%, var(--yolk) 48%, var(--yolk-deep) 100%);
  box-shadow: 0 2px 8px rgba(23, 21, 15, 0.22);
  transition: transform 0.15s var(--spring);
}
.price-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.price-range:active::-moz-range-thumb { transform: scale(1.12); }
.price-range:focus-visible { outline: none; }
.price-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.35); }
.price-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.35); }
.price-ends {
  display: flex; justify-content: space-between; margin-top: 2px;
  font-size: 0.82rem; font-weight: 500; color: var(--ink-55);
}

/* Many-of chips. */
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.ask-chip {
  font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--ink);
  padding: 11px 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--shell);
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s var(--ease);
}
.ask-chip:hover { border-color: rgba(23, 21, 15, 0.3); }
.ask-chip:active { transform: scale(0.96); }
.ask-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--canvas); font-weight: 600; }
.ask-chip:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.3); }

.ask-text {
  width: 100%; font: inherit; color: var(--ink); background: var(--shell);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0 0 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ask-text::placeholder { color: var(--ink-55); }
.ask-text:focus { outline: none; border-color: var(--yolk); box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.16); }
.ask-area { resize: vertical; min-height: 130px; line-height: 1.55; }

.ask-done { justify-content: center; text-align: center; align-items: center; }
.ask-done .ask-p { max-width: 32ch; }
.ask-done-egg { display: block; font-size: 46px; line-height: 1; margin: 0 0 18px; animation: float 6s ease-in-out infinite; }
.ask-done-actions { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ask-card { transition: none; }
  .ask-done-egg { animation: none; }
}

/* ── Admin: what people said ── */
.fb-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px; margin: 0 0 26px; }
.fb-head { border-top: 2px solid var(--ink); padding-top: 12px; }
.fb-head b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fb-head span { display: block; font-size: 0.82rem; color: var(--ink-55); margin-top: 5px; line-height: 1.35; }

.fb-block { margin: 0 0 22px; }
.fb-block h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; margin: 0 0 10px; }
.fb-bar { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; align-items: center; gap: 12px; padding: 5px 0; }
.fb-bar-label { font-size: 0.9rem; color: var(--ink-70); }
.fb-bar-track { height: 9px; border-radius: 999px; background: rgba(23, 21, 15, 0.07); overflow: hidden; }
.fb-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--yolk), var(--yolk-deep)); }
.fb-bar-n { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

.fb-more { border-top: 1px solid var(--line); padding: 14px 0 0; margin: 0 0 4px; }
.fb-more summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; padding: 2px 0; }
.fb-more summary::marker { color: var(--yolk-deep); }
.fb-count { color: var(--ink-55); font-weight: 500; }
/* A few hundred cartons is the plan, so these lists scroll inside the card
   rather than turning the page into a mile of quotes. */
.fb-list {
  list-style: none; margin: 12px 0 6px; padding: 0 2px 0 0;
  max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
}
.fb-list li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; line-height: 1.5; }
.fb-list li:last-child { border-bottom: 0; }
.fb-list li span { display: block; font-size: 0.78rem; color: var(--ink-55); margin-top: 4px; }
.fb-list li em { color: var(--ink-55); font-style: normal; font-weight: 600; }
.fb-list .fb-empty { color: var(--ink-55); }

/* ══════════ The farm log ══════════
   The hen house, the feed bin and the books. They reuse the feedback card's
   stat tiles and bars, because they are the same thing said about a different
   number, and adding a second visual language for "a figure and its caption"
   would only make the page look like two pages. */
.farm-heads { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px; margin: 0 0 14px; }
.farm-stat { border-top: 2px solid var(--ink); padding-top: 12px; }
.farm-stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.farm-stat span { display: block; font-size: 0.82rem; color: var(--ink-55); margin-top: 5px; line-height: 1.35; }
.farm-summary { font-size: 0.88rem; color: var(--ink-55); margin: 0 0 22px; line-height: 1.5; }
.farm-sub { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.02em; margin: 26px 0 12px; }
.hint.tight { margin-top: 8px; }

/* Logging something. Two fields side by side on anything wider than a phone,
   stacked below that, because a date input and a number input squeezed into
   half a phone are two fields nobody can hit. */
.log-form { display: grid; gap: 10px; margin: 0 0 12px; }
.log-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 460px) { .log-row { grid-template-columns: 1fr; } }
.log-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.log-field > span { font-size: 0.8rem; font-weight: 600; color: var(--ink-70); }
.log-form input, .log-form select {
  width: 100%; font: inherit; color: var(--ink); background: var(--canvas);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.log-form input:focus, .log-form select:focus {
  outline: none; border-color: var(--yolk); box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.16);
}
.log-already {
  font-size: 0.85rem; color: var(--yolk-deep); font-weight: 500;
  margin: 0 0 12px; line-height: 1.45;
}

/* Fourteen days of something, as columns. A day nobody logged keeps its slot
   and shows nothing, so a gap in the record looks like a gap rather than
   closing up and pretending the week was continuous. */
.chart-wrap { margin: 4px 0 22px; }
.day-chart {
  display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px;
  align-items: end; height: 116px;
}
.day-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.day-bar {
  display: block; width: 100%; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--yolk), var(--yolk-deep));
  min-height: 3px; transition: height 0.5s var(--ease);
}
.day-col.is-blank .day-bar { background: rgba(23, 21, 15, 0.08); height: 3px !important; }
.day-tick { font-size: 0.62rem; color: var(--ink-55); font-variant-numeric: tabular-nums; }

/* How long the bin lasts. Amber when it's a week or less, which is the point
   at which it stops being a statistic and starts being an errand. */
.feed-runway {
  font-size: 0.92rem; line-height: 1.5; color: var(--ink-70);
  border-left: 3px solid rgba(23, 21, 15, 0.12); padding-left: 14px;
  margin: 0 0 22px;
}
.feed-runway.is-low { border-left-color: var(--yolk-deep); color: var(--ink); font-weight: 500; }

.book-projection { font-size: 0.9rem; line-height: 1.55; color: var(--ink-70); margin: 18px 0 0; }
.farm-days li b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.exp-drop { font-size: 0.78rem; }

/* ══════════ Farm visuals ══════════ */

/* The month's feed order, in sacks. The figure is the answer; the row of
   glyphs is why. A part-filled last sack is the whole point: 3.4 sacks is a
   four-sack trip, and seeing the 0.4 makes that obvious rather than asserted. */
.sack-plan { margin: 0 0 24px; }
.sack-figure { display: flex; align-items: baseline; gap: 10px; }
.sack-count {
  font-family: var(--font-display); font-weight: 800; font-size: 3.4rem;
  line-height: 1; letter-spacing: -0.04em; color: var(--yolk-deep);
  font-variant-numeric: tabular-nums;
}
.sack-unit { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.sack-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 10px; }
.sack {
  position: relative; width: 26px; height: 34px; border-radius: 4px 4px 6px 6px;
  border: 1.5px solid var(--yolk-deep); background: var(--shell); overflow: hidden;
}
.sack.is-full { background: linear-gradient(180deg, var(--yolk), var(--yolk-deep)); }
.sack-part { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--yolk), var(--yolk-deep)); }
.sack-note { font-size: 0.9rem; line-height: 1.55; color: var(--ink-70); margin: 0; }

/* How much is left in the bin, against a month. */
.runway { margin: 4px 0 22px; }
.runway-track { height: 12px; border-radius: 999px; background: rgba(23, 21, 15, 0.07); overflow: hidden; }
.runway-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #4a8f5b, #6aa877);
  transition: width 0.6s var(--ease);
}
.runway-fill.is-thin { background: linear-gradient(90deg, var(--yolk), var(--yolk-deep)); }
.runway-fill.is-low { background: linear-gradient(90deg, #c2451f, #9c3320); }
.runway .feed-runway { border: 0; padding: 0; margin: 10px 0 0; }

/* Lay rate, against the band a laying flock is supposed to hold. The marker is
   peak-of-cycle; the shaded stretch is "doing fine". */
.lay-rate { margin: 4px 0 22px; }
.lay-track {
  position: relative; height: 14px; border-radius: 999px;
  background: rgba(23, 21, 15, 0.07); overflow: hidden;
}
.lay-good { position: absolute; left: 60%; right: 0; top: 0; bottom: 0; background: rgba(74, 143, 91, 0.14); }
.lay-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--yolk), var(--yolk-deep));
  transition: width 0.6s var(--ease);
}
.lay-fill.is-peak { background: linear-gradient(90deg, #4a8f5b, #6aa877); }
.lay-fill.is-low { background: linear-gradient(90deg, #c2451f, #9c3320); }
.lay-peak { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: 0.45; }
.lay-note { font-size: 0.88rem; line-height: 1.5; color: var(--ink-70); margin: 10px 0 0; }

/* Money in and out, month by month, both to one scale. */
.month-chart {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
  align-items: end; height: 130px;
}
.month-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.month-pair { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; justify-content: center; }
.month-bar { display: block; width: 42%; border-radius: 4px 4px 2px 2px; min-height: 2px; transition: height 0.5s var(--ease); }
.month-bar.is-in { background: linear-gradient(180deg, #6aa877, #4a8f5b); }
.month-bar.is-out { background: linear-gradient(180deg, var(--yolk), var(--yolk-deep)); }
.chart-key { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--ink-55); margin: 10px 0 0; }
.chart-key span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.key-in { background: #4a8f5b; }
.key-out { background: var(--yolk-deep); margin-left: 10px; }

/* The farm's own figure against somebody else's research. Quiet by default;
   it only speaks up when the two disagree enough to be worth a look. */
.bench {
  font-size: 0.88rem; line-height: 1.55; color: var(--ink-55);
  border-left: 3px solid rgba(23, 21, 15, 0.12); padding-left: 14px; margin: 0 0 20px;
}
.bench.is-off { color: var(--ink-70); border-left-color: var(--yolk-deep); }

/* ══════════ Settings ══════════
   A sheet over the page, not another card on it. Everything in here is set
   once and then forgotten; mixing it in with the things the farm does every
   morning is what made the dashboard read as a form to fill in. */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; }

/* ── The two controls that are not sections ──
   Round, quiet, and the same size, so the header reads as a title with a
   couple of affordances rather than as a row of competing buttons. */
.admin-page .head-actions .icon-btn {
  width: 38px; height: 38px; padding: 0; justify-content: center;
  border-radius: 50%; font-size: 1rem; line-height: 1;
}
.admin-page #reloadAll span { display: inline-block; transition: transform 0.35s ease; }
.admin-page #reloadAll.is-spinning span { transform: rotate(360deg); }
.admin-page #reloadAll.is-spinning { pointer-events: none; opacity: 0.55; }

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(23, 21, 15, 0.4);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: sheetFade 0.25s var(--ease);
}
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }

.settings-sheet {
  position: fixed; z-index: 71; top: 0; right: 0; bottom: 0;
  width: min(460px, 100%);
  display: flex; flex-direction: column;
  background: var(--canvas); border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(23, 21, 15, 0.16);
  animation: sheetIn 0.32s var(--ease);
}
@keyframes sheetIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
/* On a phone it comes up from the bottom, which is where a thumb is. */
@media (max-width: 560px) {
  .settings-sheet {
    top: auto; left: 0; width: 100%; max-height: 92vh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
  }
  @keyframes sheetIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.sheet-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; margin: 0; }
.sheet-close {
  font: inherit; font-size: 1.6rem; line-height: 1; color: var(--ink-55);
  background: none; border: 0; cursor: pointer; padding: 4px 10px; border-radius: 10px;
}
.sheet-close:hover { color: var(--ink); background: var(--shell); }
.sheet-close:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(253, 184, 19, 0.3); }

.sheet-body { overflow-y: auto; padding: 6px 22px 30px; -webkit-overflow-scrolling: touch; }
.sheet-group { padding: 22px 0; border-bottom: 1px solid var(--line); }
.sheet-group:last-child { border-bottom: 0; }
.sheet-group h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; margin: 0 0 6px; }
.sheet-group .hint { margin-bottom: 14px; }
/* What the setting is right now, so the sheet reads as the state of things
   rather than a row of empty boxes. */
.sheet-now { font-size: 0.88rem; font-weight: 500; color: var(--ink); margin: 10px 0 0; }
.danger-group h3 { color: #9c3320; }

body.sheet-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   THE ADMIN, AS A TOOL

   Everything above this line dresses a shop: big display type, a yolk
   gradient that sweeps up the buttons, generous air. That is right for
   somebody deciding whether to buy eggs and wrong for somebody standing in
   a coop at six in the morning with one hand free.

   So the admin stops inheriting it. Flat controls, hairline rules, one
   accent used sparingly, and a tighter rhythm so more fits on a phone
   without anything feeling crowded. Scoped to .admin-page and the settings
   sheet, so the storefront is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
.admin-page, .settings-sheet {
  --line-soft: rgba(23, 21, 15, 0.09);
  --field: #fff;
  --gap: 16px;
}

.admin-page { max-width: 780px; padding-top: clamp(84px, 10vh, 112px); }
/* The daily view is meant to fit a screen, so the space above it is bought
   back: a smaller greeting and less air before the first thing you can press. */
.admin-page .admin-head { margin-bottom: 14px; align-items: center; flex-wrap: nowrap; gap: 12px; }
.admin-page .admin-head h1 { min-width: 0; }
.admin-page .admin-who { font-size: 0.76rem; }

/* ── Type ── */
.admin-page .admin-head h1 { font-size: clamp(1.6rem, 4.4vw, 2.1rem); letter-spacing: -0.03em; }
.admin-page .admin-who { font-size: 0.85rem; color: var(--ink-55); margin-top: 4px; }
.admin-card h2, .settings-sheet .sheet-group h3 {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 4px;
}
.admin-card .hint, .settings-sheet .hint {
  font-size: 0.855rem; line-height: 1.5; color: var(--ink-55); margin: 0 0 var(--gap);
}
.admin-page .farm-sub { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-55); margin: 24px 0 10px; }

/* ── Cards ── */
.admin-card {
  border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 18px 18px 20px; margin-bottom: 14px; box-shadow: none;
}
@media (min-width: 560px) { .admin-card { padding: 22px 24px 24px; } }

/* ── Controls: flat, quiet, and the same height as each other ──
   The storefront's primary button lifts on hover and fills with a yolk
   gradient. Lovely on a landing page; on a form you press twenty times a
   week it is noise, and the shadow made every button look like it was
   floating off the card. */
.admin-page .btn, .settings-sheet .btn {
  padding: 0 16px; height: 40px; font-size: 0.9rem; font-weight: 600;
  border-radius: 10px; box-shadow: none; transform: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.admin-page .btn::after, .settings-sheet .btn::after { display: none; }
.admin-page .btn-primary, .settings-sheet .btn-primary { background: var(--ink); color: var(--canvas); }
.admin-page .btn-primary:hover, .settings-sheet .btn-primary:hover {
  background: #2e2a20; color: var(--canvas); transform: none; box-shadow: none;
}
.admin-page .btn-primary:active, .settings-sheet .btn-primary:active { background: #000; transform: none; }
.admin-page .btn-block { width: 100%; }

.admin-page .chip-btn, .settings-sheet .chip-btn {
  height: 34px; padding: 0 13px; font-size: 0.84rem; font-weight: 500;
  border-radius: 9px; border: 1px solid var(--line-soft); background: var(--shell);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.admin-page .chip-btn:hover, .settings-sheet .chip-btn:hover {
  background: rgba(23, 21, 15, 0.05); border-color: rgba(23, 21, 15, 0.2); transform: none;
}
.admin-page .chip-btn:active, .settings-sheet .chip-btn:active { transform: none; }

/* ── Fields ── */
.admin-page input, .admin-page select, .settings-sheet input, .settings-sheet select {
  height: 40px; padding: 0 12px; font-size: 0.95rem; border-radius: 10px;
  border: 1px solid var(--line-soft); background: var(--field); color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-page input:focus, .admin-page select:focus,
.settings-sheet input:focus, .settings-sheet select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23, 21, 15, 0.08);
}
.admin-page .log-field > span {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-55);
}
.admin-page .log-form { gap: 12px; margin-bottom: 4px; }
.admin-page .log-row { gap: 12px; }
.admin-page .set-row { gap: 8px; margin-top: 0; max-width: none; }
.admin-page .set-row .btn, .settings-sheet .set-row .btn { padding: 0 16px; height: 40px; font-size: 0.9rem; }

/* Numbers are read, not typed over: give them tabular figures and drop the
   spinners, which are unhittable on a phone anyway. */
.admin-page input[type="number"], .settings-sheet input[type="number"] {
  -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums;
}
.admin-page input[type="number"]::-webkit-outer-spin-button,
.admin-page input[type="number"]::-webkit-inner-spin-button,
.settings-sheet input[type="number"]::-webkit-outer-spin-button,
.settings-sheet input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Messages ── */
/* A saved confirmation is not an alarm. These were amber boxes with borders,
   which made "Logged 13 eggs" look like something had gone wrong. */
.admin-page .form-status, .settings-sheet .form-status {
  margin: 12px 0 0; padding: 0; background: none; border: 0;
  font-size: 0.855rem; font-weight: 500; color: var(--ink-55);
}
.admin-page .form-status.success, .settings-sheet .form-status.success { color: #3f7a4f; }
.admin-page .form-status.error, .settings-sheet .form-status.error { color: #9c3320; }
.admin-page .log-already { font-size: 0.83rem; color: var(--ink-55); margin: 10px 0 0; font-weight: 400; }

/* ── Figures ── */
/* The 2px black rule over every tile turned four numbers into a fence. */
/* Column count is set further down, where the phone breakpoint lives. */
.admin-page .farm-heads, .admin-page .fb-heads {
  gap: 10px; margin: var(--gap) 0 12px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.admin-page .farm-stat, .admin-page .fb-head { border: 0; padding: 0; }
.admin-page .farm-stat b, .admin-page .fb-head b {
  font-size: 1.45rem; font-weight: 700; letter-spacing: -0.03em;
}
.admin-page .farm-stat span, .admin-page .fb-head span {
  font-size: 0.73rem; color: var(--ink-55); margin-top: 2px; line-height: 1.3;
}
.admin-page .farm-summary { font-size: 0.8rem; color: var(--ink-55); margin: 0 0 4px; }

.admin-page .stock-hero { gap: 10px; }
.admin-page .stock-big { font-size: clamp(2.6rem, 9vw, 3.4rem); letter-spacing: -0.04em; }
.admin-page .stock-unit { font-size: 0.95rem; color: var(--ink-55); }
.admin-page .stock-actions { gap: 7px; margin: 16px 0; }

/* ── Lists and disclosure ── */
.admin-page .fb-more { border-top: 1px solid var(--line-soft); margin-top: 16px; }
.admin-page .fb-more summary { padding: 13px 0; font-size: 0.875rem; font-weight: 500; }
.admin-page .fb-list li { font-size: 0.875rem; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.admin-page .fb-list li:last-child { border-bottom: 0; }
.admin-page .fb-list li span { font-size: 0.78rem; color: var(--ink-55); }
.admin-page .admin-actions { gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }

/* ── Charts, a touch shorter so a card fits a phone screen ── */
.admin-page .day-chart { height: 88px; gap: 3px; }
.admin-page .month-chart { height: 104px; }
.admin-page .day-tick { font-size: 0.58rem; }
.admin-page .chart-wrap { margin: 4px 0 18px; }
.admin-page .sack-count { font-size: 2.6rem; }
.admin-page .sack-unit { font-size: 0.95rem; }
.admin-page .sack-note, .admin-page .lay-note, .admin-page .feed-runway,
.admin-page .bench, .admin-page .book-projection { font-size: 0.83rem; line-height: 1.5; }
.admin-page .bench { border-left-width: 2px; padding-left: 11px; }
.admin-page .fb-bar-label { font-size: 0.83rem; }
.admin-page .fb-block h3 { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-55); }

/* ── Settings sheet ── */
.settings-sheet .sheet-group { padding: 20px 0; }
.settings-sheet .sheet-now { font-size: 0.83rem; color: var(--ink-55); font-weight: 400; }
.settings-sheet .set-row { max-width: none; }

/* The set-row was built for one big centred number box beside a button. With
   two fields in it (scoop weight and sack weight) the button claimed the
   width and squeezed the inputs to nothing. Each field now has its own basis
   and is allowed to grow; the button takes only what its label needs and the
   row wraps rather than crushing anything. */
.admin-page .set-row, .settings-sheet .set-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
  margin: 0; max-width: none;
}
.admin-page .set-row input, .settings-sheet .set-row input {
  flex: 1 1 120px; min-width: 0; width: auto;
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; text-align: left;
}
.admin-page .set-row .btn, .settings-sheet .set-row .btn { flex: 0 0 auto; }
.admin-page .btn-primary, .settings-sheet .btn-primary { box-shadow: none; }

/* ── Charts are SVG now ──
   The div-bar versions are gone, so their box models go with them. What is
   left is a container that lets the drawing size itself. */
.admin-page .day-chart, .admin-page .month-chart {
  display: block; height: auto; grid-template-columns: none; gap: 0;
}
.admin-page .day-chart svg, .admin-page .month-chart svg { display: block; }
.admin-page .chart-foot {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.7rem; color: var(--ink-55); margin: 6px 0 0;
}
.admin-page .chart-foot .foot-mid { text-align: center; flex: 1; }
.admin-page .lay-rate { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 20px; }
.admin-page .lay-dial { flex: 0 0 auto; }
.admin-page .lay-note { flex: 1 1 180px; margin: 0; font-size: 0.83rem; line-height: 1.5; }
.admin-page .chart-key { font-size: 0.72rem; margin-top: 6px; }

/* Four *short* numbers fit a phone row. The books are not short: "−$152.40"
   under a two-word caption needs about 120px, and forcing four of those into a
   430px phone is what had figures running into their neighbours and captions
   wrapping under the wrong number. Two-up to 560px, four above it — still no
   orphan, because four splits evenly either way. */
.admin-page .farm-heads, .admin-page .fb-heads { grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 560px) {
  .admin-page .farm-heads, .admin-page .fb-heads { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
}
.admin-page .farm-stat b, .admin-page .fb-head b { font-size: 1.3rem; }
.admin-page .farm-stat span, .admin-page .fb-head span { font-size: 0.7rem; }
/* Uniform scaling means the height follows the width. */
.admin-page .day-chart svg, .admin-page .month-chart svg { width: 100%; height: auto; }

/* ── Verdicts ──
   A pill says on-target or not in the width of two words. The paragraphs
   these replaced were explaining, every single load, something the farm
   learns once and then only needs reminding of at a glance. */
.admin-page .pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; line-height: 1;
  padding: 6px 10px 6px 8px; border-radius: 999px; margin: 0 8px 6px 0;
}
.admin-page .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-page .pill.is-good { background: rgba(74, 143, 91, 0.13); color: #3f7a4f; }
.admin-page .pill.is-warn { background: rgba(236, 138, 0, 0.14); color: #a35c00; }
.admin-page .pill.is-low  { background: rgba(194, 69, 31, 0.12); color: #9c3320; }
.admin-page .pill-aside { font-size: 0.76rem; color: var(--ink-55); margin: 0 10px 6px 0; display: inline-block; }
.admin-page .lay-note, .admin-page .feed-runway, .admin-page .bench,
.admin-page .book-projection, .admin-page .sack-note {
  display: flex; flex-wrap: wrap; align-items: center; border: 0; padding: 0;
}
.admin-page .bench { margin: 0 0 16px; }
.admin-page .feed-runway { margin: 10px 0 0; }
.admin-page .book-projection { margin: 14px 0 0; }

/* A whole card folded away. Used for the things read now and then rather than
   every morning, so they keep their place on the page without taking up the
   room of something you actually came here to do. */
.admin-page .admin-fold { padding: 0; }
.admin-page .admin-fold > summary {
  list-style: none; cursor: pointer; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.admin-page .admin-fold > summary::-webkit-details-marker { display: none; }
.admin-page .admin-fold > summary::after {
  content: "›"; position: absolute; right: 18px; top: 15px;
  font-size: 1.35rem; line-height: 1; color: var(--ink-55);
  transition: transform 0.2s var(--ease);
}
.admin-page .admin-fold { position: relative; }
.admin-page .admin-fold[open] > summary::after { transform: rotate(90deg); }
.admin-page .admin-fold > summary:hover { background: rgba(23, 21, 15, 0.02); border-radius: 14px; }
.admin-page .fold-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.admin-page .fold-hint { font-size: 0.8rem; color: var(--ink-55); }
.admin-page .fold-body { padding: 4px 18px 20px; }
@media (min-width: 560px) {
  .admin-page .admin-fold > summary { padding: 18px 24px; }
  .admin-page .admin-fold > summary::after { right: 24px; top: 17px; }
  .admin-page .fold-body { padding: 4px 24px 22px; }
}

/* ── Sections ──
   Five jobs that share a sign-in but not a screen: what you do this morning,
   what you owe people, what the flock is telling you, and what it all costs.
   One long scroll made every one of them harder to find. */
/* Five tabs that fit, rather than four and a sliver of a fifth. They were
   sized to their text and allowed to overflow, so on a phone "Survey" sat
   half off the right edge and read as a rendering fault rather than as
   something to scroll to. Now they share the width. */
.admin-page .admin-tabs {
  display: flex; gap: 3px; margin: 0 0 18px; padding: 3px;
  background: rgba(23, 21, 15, 0.05); border-radius: 12px;
}
.admin-page .tab {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 0.85rem; font-weight: 600;
  padding: 8px 6px; border: 0; border-radius: 9px; cursor: pointer;
  background: none; color: var(--ink-55); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
@media (max-width: 430px) {
  .admin-page .tab { font-size: 0.76rem; padding: 8px 2px; gap: 3px; }
}
.admin-page .tab:hover { color: var(--ink); }
.admin-page .tab.is-on { background: var(--canvas); color: var(--ink); box-shadow: 0 1px 2px rgba(23, 21, 15, 0.08); }
.admin-page .tab-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--yolk-deep); color: #fff; font-size: 0.68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Fulfilment ──
   A card a person can work from: who, how many, when they're coming, what is
   still owed, and the two buttons that change any of it. */
.admin-page .order-group { margin: 0 0 20px; }
.admin-page .order-group:last-child { margin-bottom: 0; }
.admin-page .og-head {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-55); margin: 0 0 10px; display: flex; align-items: center; gap: 7px;
}
.admin-page .og-head span {
  background: rgba(23, 21, 15, 0.07); color: var(--ink); border-radius: 999px;
  padding: 1px 7px; font-size: 0.7rem; letter-spacing: 0;
}
/* Overdue is the only group that means somebody is standing about waiting. */
.admin-page .order-group.is-0 .og-head { color: #9c3320; }
.admin-page .order-group.is-0 .og-head span { background: rgba(194, 69, 31, 0.12); color: #9c3320; }

.admin-page .order-card {
  border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 13px 14px; margin-bottom: 8px; background: var(--shell);
}
.admin-page .order-card.is-done { opacity: 0.62; }
.admin-page .oc-head { display: flex; align-items: baseline; gap: 8px; }
.admin-page .oc-qty {
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem;
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.admin-page .oc-who { font-weight: 600; font-size: 0.95rem; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-page .oc-total { font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--ink-70); }
.admin-page .oc-when { font-size: 0.85rem; font-weight: 500; margin: 5px 0 0; }
.admin-page .oc-flags { margin: 8px 0 0; display: flex; flex-wrap: wrap; }
.admin-page .oc-flags .pill { margin-bottom: 0; }
.admin-page .oc-contact {
  margin: 7px 0 0; font-size: 0.78rem; color: var(--ink-55);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.admin-page .oc-contact a { color: var(--ink-70); }
.admin-page .oc-ref { margin-left: auto; font-variant-numeric: tabular-nums; opacity: 0.6; }
.admin-page .oc-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
/* The button that is the next thing to do reads as such. */
.admin-page .chip-btn.is-do { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.admin-page .chip-btn.is-do:hover { background: #2e2a20; border-color: #2e2a20; }

.admin-page .chart-wx { color: #4d6f9e; font-weight: 600; }

/* ── Two numbers, side by side ──
   The whole finding about heat is "this many when it's hot, that many when it
   isn't". Anything more elaborate would be dressing up three weeks of data. */
.admin-page .split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 14px; }
.admin-page .split-half {
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.admin-page .split-half.is-hot { background: rgba(194, 69, 31, 0.05); border-color: rgba(194, 69, 31, 0.16); }
.admin-page .split-half.is-mild { background: rgba(74, 143, 91, 0.05); border-color: rgba(74, 143, 91, 0.16); }
.admin-page .split-half b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.admin-page .split-half span { font-size: 0.76rem; color: var(--ink-70); }
.admin-page .split-half em { font-size: 0.7rem; color: var(--ink-55); font-style: normal; margin-top: 3px; }
.admin-page .heat-verdict { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }

/* What has to sell to cover what is spent. */
.admin-page .breakeven { border-top: 1px solid var(--line-soft); margin: 18px 0 0; padding-top: 16px; }
.admin-page .be-figure { display: flex; align-items: baseline; gap: 9px; margin: 0; }
.admin-page .be-figure b {
  font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.admin-page .be-figure span { font-size: 0.9rem; color: var(--ink-70); }
.admin-page .be-note { display: flex; flex-wrap: wrap; align-items: center; margin: 10px 0 0; }

/* Targets, six small numbers the farm owns. An empty box means "use the
   published default", and the placeholder is that default, so the sheet never
   has to explain itself in a sentence. */
.settings-sheet .target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.settings-sheet .target-grid .log-field > span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-55);
}
.settings-sheet .target-grid input { width: 100%; }
.settings-sheet .sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── Profit and cash, side by side ──
   Two questions that look like one: did the farm earn its keep, and can it
   pay Friday's feed bill. The owner's own money is the reason they differ, so
   showing one number would answer neither. */
.admin-page .two-books { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.admin-page .book-half {
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.admin-page .book-half.is-cash { background: rgba(23, 21, 15, 0.02); }
.admin-page .bh-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-55); }
.admin-page .book-half b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; line-height: 1.1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.admin-page .book-half b.is-down { color: #9c3320; }
.admin-page .book-half b.is-up { color: #3f7a4f; }
.admin-page .bh-sub { font-size: 0.72rem; color: var(--ink-55); line-height: 1.4; }
/* ── What a carton makes ──
   The figure, then the carton drawn as a bar: cost filling from the left,
   what is left over as profit. A margin is a proportion, and a proportion
   reads faster as a length than as a percentage. */
.admin-page .carton-answer { margin: 0 0 14px; }
.admin-page .ca-figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.admin-page .ca-figure b {
  font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1.05;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.admin-page .ca-figure b.is-up { color: #3f7a4f; }
.admin-page .ca-figure b.is-down { color: #9c3320; }
.admin-page .ca-unit { font-size: 0.78rem; color: var(--ink-55); }
.admin-page .ca-bar {
  display: flex; height: 12px; border-radius: 999px; overflow: hidden;
  background: rgba(23, 21, 15, 0.07); margin: 12px 0 9px;
}
.admin-page .cb-cost { background: linear-gradient(90deg, var(--yolk), var(--yolk-deep)); }
.admin-page .cb-profit { background: #3f7a4f; }
.admin-page .ca-line { font-size: 0.82rem; color: var(--ink-70); line-height: 1.5; margin: 0; }
.admin-page .ca-aside { color: var(--ink-55); }
/* The caveats. Deliberately not styled as an error: a short window and unsold
   eggs are facts about the records, not faults. */
.admin-page .ca-caveat {
  font-size: 0.78rem; color: var(--ink-70); line-height: 1.5; margin: 0 0 4px;
  padding: 10px 12px; border-radius: 10px; background: rgba(253, 184, 19, 0.10);
}
.admin-page .ca-note { font-size: 0.72rem; color: var(--ink-55); line-height: 1.5; margin: 10px 0 0; }
.admin-page .carton-waiting { font-size: 0.82rem; color: var(--ink-55); line-height: 1.5; margin: 0 0 18px; }

/* One row per cost, each drawn against the same carton price, so the lines are
   comparable to each other and to the whole. */
.admin-page .carton-costs { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.admin-page .cc-row { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: 10px; }
.admin-page .cc-name { font-size: 0.8rem; color: var(--ink-70); }
.admin-page .cc-track { height: 8px; border-radius: 999px; background: rgba(23, 21, 15, 0.06); overflow: hidden; }
.admin-page .cc-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--yolk), var(--yolk-deep)); }
.admin-page .cc-cost { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .admin-page .cc-row { grid-template-columns: 6.5rem 1fr auto; gap: 8px; }
  .admin-page .cc-name { font-size: 0.74rem; }
}

.admin-page .self-funded { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 4px; }
.admin-page .auto-tag {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(23, 21, 15, 0.07); color: var(--ink-55);
  padding: 2px 5px; border-radius: 4px; vertical-align: 1px;
}

/* The flock, split. Two numbers because a pullet eats from the day it arrives
   and lays from about twenty weeks, and one number can only answer one of
   those questions. */
.admin-page .flock-heads {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 0 0 12px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.admin-page .flock-heads .farm-stat { border: 0; padding: 0; }
.admin-page .flock-next, .admin-page .month-end, .admin-page .feed-heat {
  display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 14px;
}
.admin-page .feed-heat:empty, .admin-page .month-end:empty { margin: 0; }

/* ── Who buys ── */
.admin-page .customer-rows { list-style: none; margin: 0; padding: 0; }
.admin-page .customer { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.admin-page .customer:last-child { border-bottom: 0; }
.admin-page .cu-head { display: flex; align-items: baseline; gap: 10px; }
.admin-page .cu-who { font-weight: 600; font-size: 0.95rem; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-page .cu-spent { font-family: var(--font-display); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.admin-page .cu-meta { font-size: 0.78rem; color: var(--ink-55); margin: 3px 0 0; }
.admin-page .cu-quiet { opacity: 0.85; }
.admin-page .cu-meta a { color: var(--ink-70); }

/* ── Importing a stack ──
   The preview is the point: nothing is committed the farm has not seen, and a
   line that cannot be read says why rather than disappearing. */
.admin-page .import-box {
  width: 100%; font: inherit; font-size: 0.85rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.6; padding: 12px; border-radius: 10px; border: 1px solid var(--line-soft);
  background: var(--field); color: var(--ink); resize: vertical; min-height: 96px;
}
.admin-page .import-box:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23, 21, 15, 0.08); }
.admin-page .import-preview { margin: 12px 0 0; }

/* ── An editable line ──
   Two rows on a phone: what it was and what it cost, then the four things
   most likely to need correcting. Everything is a real control — a preview
   you can only accept or lose is a preview that makes you retype. */
.admin-page .imp-line {
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.admin-page .imp-line:last-child { border-bottom: 0; }
.admin-page .imp-top, .admin-page .imp-bot { display: flex; align-items: center; gap: 6px; }
.admin-page .imp-bot { margin-top: 6px; padding-left: 1.9em; flex-wrap: wrap; }
.admin-page .imp-n {
  flex: 0 0 auto; width: 1.5em; font-size: 0.75rem; color: var(--ink-55);
  font-variant-numeric: tabular-nums;
}
.admin-page .imp-line input, .admin-page .imp-line select {
  font: inherit; font-size: 0.82rem; padding: 6px 8px; min-width: 0;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--field); color: var(--ink);
}
.admin-page .imp-line input:focus, .admin-page .imp-line select:focus {
  outline: none; border-color: var(--ink);
}
.admin-page .imp-note { flex: 1 1 auto; }
.admin-page .imp-money { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; color: var(--ink-55); font-size: 0.82rem; }
.admin-page .imp-amt-in { width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; }
.admin-page .imp-day { flex: 1 1 8.5em; }
.admin-page .imp-cat, .admin-page .imp-flock { flex: 1 1 6.5em; }
.admin-page .imp-sacks { flex: 0 1 5em; }
.admin-page .imp-x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; border: 0;
  background: transparent; color: var(--ink-55); font-size: 1.1rem; line-height: 1;
  cursor: pointer;
}
.admin-page .imp-x:hover { background: rgba(156, 51, 32, 0.1); color: #9c3320; }
.admin-page .imp-line.is-bad .imp-note { border-color: #9c3320; }
.admin-page .imp-why {
  margin: 6px 0 0; padding-left: 1.9em; font-size: 0.75rem; color: #9c3320; font-weight: 500;
}

/* ── Photographing a receipt ──
   The file input itself is hidden and the label is the button: browsers style
   file inputs however they like, and this one has to look like it belongs.
   Hidden with clip rather than display:none so the keyboard can still reach
   it and focus can still be seen. */
.admin-page .shoot { margin: 0 0 14px; }
.admin-page .shoot-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.admin-page .shoot-drop {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; padding: 20px 16px; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--field);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-page .shoot-drop:hover { border-color: var(--ink); background: var(--canvas); }
.admin-page .shoot-input:focus-visible + .shoot-drop {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23, 21, 15, 0.08);
}
.admin-page .shoot-icon { font-size: 1.5rem; line-height: 1; }
.admin-page .shoot-drop b { font-size: 0.92rem; font-weight: 600; }
.admin-page .shoot-drop span:not(.shoot-icon) {
  font-size: 0.78rem; color: var(--ink-55); max-width: 34ch; line-height: 1.45;
}
/* Actions that belong to a whole tab rather than to the card above them, so
   they sit outside the cards and read as such. */
.admin-page .panel-actions { margin-top: 4px; justify-content: flex-end; }

/* The top of the receipt, read back. Two lines: who it was, then everything
   that qualifies it. */
.admin-page .receipt-head {
  display: flex; flex-direction: column; gap: 2px;
  margin: 12px 0 0; padding: 10px 12px;
  border-radius: 10px; background: var(--field); border: 1px solid var(--line-soft);
}
.admin-page .receipt-head b { font-size: 0.9rem; font-weight: 600; }
.admin-page .receipt-head .rh-unknown { color: var(--ink-55); font-weight: 500; font-style: italic; }
.admin-page .receipt-head span { font-size: 0.78rem; color: var(--ink-55); line-height: 1.5; }
.admin-page .receipt-head a { color: var(--ink-70); }

/* The one number on a vendor worth pointing at. */
.admin-page .v-best {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; background: rgba(23, 21, 15, 0.07); color: var(--ink-70);
}

/* Categories the farm owns. Built-ins have no remove button because taking
   one away would orphan every expense already filed under it. */
.settings-sheet .cat-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.settings-sheet .cat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; padding: 5px 9px; border-radius: 999px;
  background: rgba(23, 21, 15, 0.06); color: var(--ink-70);
}
.settings-sheet .cat-chip.is-mine { background: rgba(253, 184, 19, 0.16); color: var(--ink); }
.settings-sheet .cat-drop {
  border: 0; background: none; font: inherit; font-size: 0.9rem; line-height: 1;
  color: var(--ink-55); cursor: pointer; padding: 0 1px;
}
.settings-sheet .cat-drop:hover { color: #9c3320; }

/* Which birds an expense was for. Only drawn when it isn't the hens, so the
   exceptions are what catch the eye rather than the rule. */
.admin-page .flock-tag {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(23, 21, 15, 0.06); color: var(--ink-70);
}



/* ── The action centre ──
   Reads as a checklist, not a dashboard: a mark, what it is, and the one
   control that deals with it. Done lines stay visible and go quiet rather
   than disappearing, so the list doesn't jump around as the morning goes. */
.admin-page .now-list { list-style: none; margin: 0; padding: 0; }
.admin-page .now-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.admin-page .now-row:last-child { border-bottom: 0; }
.admin-page .now-mark {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 700;
  border: 1.5px solid var(--line); color: var(--ink);
}
.admin-page .now-row.is-done .now-mark { background: var(--ink); border-color: var(--ink); color: #fff; }
.admin-page .now-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.admin-page .now-text b { font-size: 0.92rem; font-weight: 600; }
.admin-page .now-text span { font-size: 0.78rem; color: var(--ink-55); }
.admin-page .now-row.is-done .now-text b { font-weight: 500; color: var(--ink-70); }
.admin-page .now-go { flex: 0 0 auto; }


/* ── The AWS bill, month by month ──
   A filed month and a running one are different kinds of fact, so they are
   different weights on the page: the running month is dimmed and italic,
   because a number that will change should not sit at the same visual level
   as one that is on a return. */
.admin-page .aws-rows { list-style: none; margin: 14px 0 0; padding: 0; }
.admin-page .aws-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.admin-page .aws-row:last-child { border-bottom: 0; }
.admin-page .aws-when { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.admin-page .aws-when b { font-size: 0.9rem; font-weight: 600; }
.admin-page .aws-when span { font-size: 0.76rem; color: var(--ink-55); }
.admin-page .aws-amt {
  flex: 0 0 auto; font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.admin-page .aws-mark {
  flex: 0 0 auto; width: 18px; text-align: center;
  font-size: 0.8rem; font-weight: 700; color: #4a8f5b;
}
.admin-page .aws-row.is-running .aws-when b,
.admin-page .aws-row.is-running .aws-amt { color: var(--ink-55); font-style: italic; }

.admin-page #awsChart { margin-top: 14px; height: 118px; }
.admin-page .card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.admin-page .card-head h2 { margin: 0; }

/* ── An expense you can open ──
   The whole row is the target. Three small links side by side asked you to
   choose what to do before you had seen anything; one tap, and the record
   answers that for you. */
.admin-page .exp-open {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; text-align: left; color: inherit;
  background: transparent; border: 0; padding: 11px 4px; cursor: pointer;
  border-radius: 10px;
}
.admin-page .exp-open:hover { background: rgba(23, 21, 15, 0.035); }
.admin-page .exp-open:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.admin-page .eo-main { flex: 1 1 auto; min-width: 0; font-size: 0.86rem; line-height: 1.45; }
.admin-page .eo-main b { font-variant-numeric: tabular-nums; }
.admin-page .eo-meta { flex: 0 0 auto; font-size: 0.76rem; color: var(--ink-55); white-space: nowrap; }
.admin-page .eo-clip { font-size: 0.8rem; }
.admin-page .eo-chev { flex: 0 0 auto; color: var(--ink-55); font-size: 1.15rem; line-height: 1; }
.admin-page .farm-days li:has(.exp-open) { display: block; padding: 0; }

/* The record itself. */
.settings-sheet .exp-hero {
  margin: 0 0 4px; padding: 0 0 14px; border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 2px;
}
.settings-sheet .exp-hero b {
  font-family: var(--font-display); font-weight: 800; font-size: 2.1rem;
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.settings-sheet .exp-hero span { font-size: 0.82rem; color: var(--ink-55); }

.settings-sheet .exp-siblings { list-style: none; margin: 0; padding: 0; }
.settings-sheet .exp-siblings li + li { border-top: 1px solid var(--line-soft); }
.settings-sheet .exp-sib {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: transparent; border: 0; padding: 10px 4px; cursor: pointer;
  font-size: 0.84rem; border-radius: 8px;
}
.settings-sheet .exp-sib:hover { background: rgba(23, 21, 15, 0.04); }
.settings-sheet .exp-sib b { font-variant-numeric: tabular-nums; }

/* The photo, in the sheet rather than in a tab you have to come back from. */
.settings-sheet .exp-receipt {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line-soft); background: var(--field);
}

/* ═══ The daily view ═══
   One screen. The state on top, the four things you might do underneath as
   targets big enough to hit while holding a basket. */
.admin-page .day-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 8px; }
.admin-page .day-stat {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--field); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 14px 16px;
}
.admin-page .day-stat:hover { border-color: var(--ink); }
.admin-page .day-stat b {
  font-family: var(--font-display); font-weight: 800; font-size: 1.9rem;
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.admin-page .day-stat span { font-size: 0.76rem; color: var(--ink-55); }
.admin-page .day-stat.is-hot { border-color: var(--yolk-deep); background: rgba(253, 184, 19, 0.09); }

.admin-page .act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; }
.admin-page .act {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--shell); border: 1px solid var(--line-soft);
  border-radius: 16px; padding: 16px; min-height: 104px;
  transition: border-color 0.15s ease, transform 0.08s ease;
}
.admin-page .act:hover { border-color: var(--ink); }
.admin-page .act:active { transform: scale(0.985); }
.admin-page .act-ico { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
.admin-page .act b { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; }
.admin-page .act-sub { font-size: 0.75rem; color: var(--ink-55); line-height: 1.35; }
/* Done today: quieter, with the tick doing the talking. */
.admin-page .act.is-done { background: var(--field); }
.admin-page .act.is-done b::after { content: ' ✓'; color: #4a8f5b; }
.admin-page .act.is-done .act-sub { color: var(--ink-70); }

.admin-page .flock-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; font: inherit; font-size: 0.84rem; color: var(--ink-70);
  background: transparent; border: 0; border-top: 1px solid var(--line-soft);
  padding: 14px 2px 0; margin: 16px 0 0; cursor: pointer; text-align: left;
}
.admin-page .flock-line:hover { color: var(--ink); }
.admin-page #panel-today .now-list { margin-top: 6px; }

/* ═══ Tapping a number ═══ */
.settings-sheet .tally { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 6px 0 14px; }
.settings-sheet .tally-n {
  font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; min-width: 2.4ch; text-align: center;
}
.settings-sheet .tally-step {
  width: 54px; height: 54px; border-radius: 50%; font-size: 1.6rem; line-height: 1;
  border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer;
}
.settings-sheet .tally-step:active { background: var(--ink); color: var(--shell); }

.settings-sheet .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.settings-sheet .chip-add {
  font: inherit; font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 11px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--field); color: var(--ink);
}
.settings-sheet .chip-add:hover { border-color: var(--ink); }
.settings-sheet .chip-add.is-on { background: var(--ink); color: var(--shell); border-color: var(--ink); }
.settings-sheet .chip-add.is-clear { color: var(--ink-55); }
.settings-sheet .chip-row.is-big .chip-add { min-width: 62px; text-align: center; padding: 15px 14px; font-size: 1rem; }
.settings-sheet .quick-note { font-size: 0.78rem; color: var(--ink-55); margin: 0 0 14px; }
/* The typed field stays, underneath, for the number the chips don't cover. */
.settings-sheet .quick-sheet .log-form { margin-top: 4px; }

/* When it is, and how soon. The window answers "when"; the eta answers
   "how much of a hurry", which is what you want off a card at 7am. */
.admin-page .oc-eta {
  margin-left: 8px; font-size: 0.72rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(23, 21, 15, 0.07); color: var(--ink-70);
}
.admin-page .order-group.is-0 .oc-eta { background: rgba(156, 51, 32, 0.12); color: #9c3320; }
.admin-page .order-group.is-1 .oc-eta { background: rgba(253, 184, 19, 0.18); color: #8a5a00; }
.admin-page .oc-what { margin: 3px 0 0; font-size: 0.78rem; color: var(--ink-55); }
.admin-page .oc-what b { color: #9c3320; font-weight: 600; }

/* ═══ The weather, day by day ═══
   A row per day rather than a chart: five numbers a day is more than a line
   can carry, and the farm is reading for a pattern, not a value. Hot and muggy
   days shade themselves so a run of them shows up without anyone being told
   which column to look at. */
.admin-page .wx-track { margin: 12px 0 8px; }
.admin-page .wx-row {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 4.6em 1.4em 4.4em 3em 4em 2.6em 1fr;
  padding: 7px 6px; border-radius: 8px;
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--line-soft);
}
.admin-page .wx-row:last-child { border-bottom: 0; }
.admin-page .wx-row.is-hot { background: rgba(253, 184, 19, 0.10); }
.admin-page .wx-row.is-muggy { background: rgba(91, 134, 196, 0.13); }
.admin-page .wx-row.is-hot.is-muggy { background: rgba(156, 51, 32, 0.11); }
.admin-page .wx-day { color: var(--ink-55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-page .wx-sky { text-align: center; }
.admin-page .wx-t small, .admin-page .wx-w small { color: var(--ink-55); font-size: 0.86em; }
.admin-page .wx-h { color: #3a6ea8; font-weight: 600; }
.admin-page .wx-r { color: var(--ink-55); font-size: 0.72rem; }
.admin-page .wx-lay { display: flex; align-items: center; gap: 6px; min-width: 0; }
.admin-page .wx-bar {
  flex: 1 1 auto; height: 6px; border-radius: 999px;
  background: rgba(23, 21, 15, 0.08); overflow: hidden; min-width: 20px;
}
.admin-page .wx-bar span { display: block; height: 100%; background: var(--yolk-deep); border-radius: 999px; }
.admin-page .wx-lay b { font-weight: 700; }
.admin-page .wx-lay small { color: var(--ink-55); }
.admin-page .wx-none { color: var(--ink-55); font-style: normal; font-size: 0.72rem; }
.admin-page .wx-key {
  font-size: 0.73rem; color: var(--ink-55); line-height: 1.5; margin: 8px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
}
.admin-page .wx-verdict { margin: 12px 0 0; }
.admin-page .per-dozen { font-size: 0.82rem; color: var(--ink-55); margin: 10px 0 0; }
.admin-page .per-dozen b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* With no owner's money in play there is one figure, not two side by side. */
/* ── One figure, or two ──
   Two boxes side by side read as a comparison, which is what they are when
   profit and cash differ. Alone, the box is just a border around a number
   nobody is comparing it to, so it drops the frame and lets the figure carry
   itself at the size it deserves. */
.admin-page .two-books.is-single { grid-template-columns: 1fr; }
.admin-page .two-books.is-single .book-half { border: 0; padding: 2px 0 0; }
.admin-page .two-books.is-single .book-half b { font-size: 2.1rem; }
.admin-page .wx-plot { margin: 6px 0 0; }

/* The legend swatch is the same mark the plot uses: filled for a muggy
   morning, outlined for a dry one. A key that draws a different shape from
   the chart is a key you have to translate. */
.admin-page .wx-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  border: 1.6px solid var(--yolk-deep); margin-right: 5px; vertical-align: -1px;
}
.admin-page .wx-dot.is-muggy { background: var(--yolk-deep); opacity: 0.85; }
.admin-page .wx-note { color: #c2673a; }

/* Folded away because the plot above already answers the question. Open it
   when you want to read one morning rather than the shape of a fortnight. */
.admin-page #wxDaysWrap { margin-top: 14px; }
.admin-page #wxDaysWrap > summary {
  font-size: 0.82rem; color: var(--ink-70); cursor: pointer; padding: 6px 0;
}
@media (max-width: 460px) {
  .admin-page .wx-row { grid-template-columns: 4.2em 1.2em 4.2em 2.8em 1fr; font-size: 0.74rem; }
  .admin-page .wx-w, .admin-page .wx-r { display: none; }
}


/* ── The flock page ──────────────────────────────────────────────────────
   Live numbers off the farm log, in the storefront's voice rather than the
   dashboard's. Everything here starts blank and fills in, so the layout has
   to hold its shape while it is still a row of dashes. */

/* ── One rhythm ──
   The page had three section paddings and two stray centrings, so it kept
   changing its mind about where the left edge was. Everything now hangs off
   the same measure and the same vertical step. */
.flock-now { padding-top: clamp(24px, 3.5vw, 40px); padding-bottom: clamp(24px, 3.5vw, 40px); }
.fl-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.4vw, 30px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(24px, 3.6vw, 40px) 0;
}
.fl-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fl-stat b {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.fl-stat span { font-size: clamp(0.78rem, 1.1vw, 0.92rem); color: var(--ink-55); line-height: 1.35; }
.fl-asof { font-size: 0.82rem; color: var(--ink-55); margin: 14px 0 0; }

/* Two across on a phone rather than four squeezed ones. */
@media (max-width: 640px) {
  .fl-band { grid-template-columns: 1fr 1fr; row-gap: 24px; }
}

.fl-section { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.fl-section .section-lead { margin-bottom: clamp(24px, 3vw, 36px); }
.fl-body { font-size: clamp(1rem, 1.4vw, 1.12rem); color: var(--ink-70); line-height: 1.65; max-width: 58ch; margin: 0; }

.fl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 760px) { .fl-cols { grid-template-columns: 1fr; } }

/* How much of the flock is laying, against the mark a healthy flock hits.
   The mark is the point: a bar on its own is a number with no opinion. */
.fl-meter {
  position: relative; height: 14px; border-radius: 999px;
  background: rgba(23, 21, 15, 0.08); overflow: visible;
}
.fl-meter-fill {
  display: block; height: 100%; border-radius: 999px; width: 0;
  background: var(--yolk-deep); transition: width 900ms var(--ease);
}
.fl-meter-fill.is-above { background: #4a8f5b; }
/* A quiet week is not an alarm. This used to go rust-red, which read as
   something being wrong with the birds when the honest answer is that hens
   lay less in the heat and less in the dark. Yolk, same as the normal state. */
.fl-meter-fill.is-below { background: var(--yolk); }
.fl-meter-mark {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: var(--ink); opacity: 0.45; border-radius: 2px;
}
.fl-meter-note { font-size: 0.86rem; color: var(--ink-55); margin: 16px 0 0; line-height: 1.5; }
.fl-meter-note b { color: var(--ink); font-weight: 700; }

.fl-heat {
  font-size: clamp(0.95rem, 1.3vw, 1.06rem); color: var(--ink-70); line-height: 1.6;
  max-width: 56ch; margin: 24px 0 0; padding: 20px 22px;
  background: var(--canvas-2); border-radius: var(--radius);
}
.fl-heat b { color: var(--ink); font-weight: 700; }

.fl-breeds {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0 0 clamp(22px, 3vw, 32px); padding: 0;
}
.fl-breeds li {
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  padding: 10px 18px; border-radius: 999px;
  background: var(--shell); border: 1px solid var(--line);
}

/* ── The sun over the farm ──
   The showpiece. Full-bleed-ish, generous, and the only thing on the page that
   is true at the moment you look at it rather than true this week. */
.fl-sun { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.fl-sun-wrap {
  background: linear-gradient(180deg, rgba(253, 184, 19, 0.12), rgba(253, 184, 19, 0) 66%);
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(16px, 2vw, 28px) clamp(14px, 2.4vw, 34px) clamp(22px, 2.8vw, 34px);
}
.fl-sun-arc svg { display: block; }
.fl-sun-feet {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 10px; margin-top: 6px; padding: 0 clamp(4px, 2vw, 22px);
}
.fl-sun-feet span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-sun-feet b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.95rem, 2vw, 1.3rem); letter-spacing: -0.02em;
}
.fl-sun-feet i { font-style: normal; font-size: 0.72rem; color: var(--ink-55); }
.fl-sun-mid { text-align: center; align-items: center; }
.fl-sun-feet span:last-child { text-align: right; align-items: flex-end; }
.fl-sun-mid b { color: var(--yolk-deep); }

/* ── A fortnight of mornings ── */
.fl-chart { margin: 0 0 14px; }
.fl-chart svg { display: block; overflow: visible; }
/* The chart takes focus so arrow keys work, which means it also draws the
   browser's focus ring — fine for a keyboard, wrong for a mouse click. */
.fl-chart svg { outline: none; border-radius: 12px; }
.fl-chart svg:focus-visible { outline: 2px solid var(--yolk-deep); outline-offset: 4px; }
.fl-chart .fl-bar { transition: fill-opacity 0.12s ease; }
.fl-chart .fl-hit { cursor: pointer; }
/* The rest of the fortnight steps back only once you have actually picked a
   morning. Dimming on plain hover makes the chart flinch when the cursor
   merely crosses it. */
.fl-chart svg.is-picking .fl-bar { fill-opacity: 0.3; }
.fl-chart svg.is-picking .fl-bar.is-picked { fill-opacity: 1; }

/* What that morning was, once you have pointed at one. */
.fl-pick {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  margin: 0 0 12px; padding: 12px 16px;
  background: var(--canvas-2); border-radius: 12px;
  font-size: 0.86rem; color: var(--ink-70);
}
.fl-pick b { font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); }

.fl-chart-key {
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center;
  font-size: 0.78rem; color: var(--ink-55); margin: 0;
}
.fl-chart-key span::before {
  content: ''; display: inline-block; margin-right: 7px; vertical-align: middle;
}
.ck-egg::before { width: 11px; height: 11px; border-radius: 3px; background: var(--yolk-deep); }
.ck-temp::before { width: 15px; height: 2px; background: #c2673a; border-radius: 2px; }
.ck-gap::before { width: 5px; height: 5px; border-radius: 50%; background: rgba(23, 21, 15, 0.3); }


/* ── Today, on three dials ── */
.fl-wx { display: flex; flex-wrap: wrap; gap: clamp(16px, 4vw, 44px); margin: 0 0 clamp(20px, 3vw, 30px); }
.fl-dial { position: relative; width: 88px; text-align: center; }
.fl-dial svg { display: block; width: 88px; height: 88px; }
.fl-dial b {
  position: absolute; inset: 0 0 22px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em;
}
.fl-dial span { display: block; font-size: 0.72rem; color: var(--ink-55); margin-top: 4px; }

/* A dot a day for the fortnight, filled when the farm counts it hot. Reads in
   one glance, which the high/low band it replaced never did. */
.fl-wx-band { margin: 0 0 clamp(18px, 2.6vw, 26px); }
.fl-pips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.fl-pip {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(23, 21, 15, 0.10); flex: 0 0 auto;
}
.fl-pip.is-hot { background: #c2673a; }
.fl-pip.is-none { background: none; box-shadow: inset 0 0 0 1.5px rgba(23, 21, 15, 0.12); }
.fl-pips-say { font-size: 0.92rem; color: var(--ink-70); margin: 0; }
.fl-pips-say b { color: var(--ink); font-weight: 700; }

/* ── What is coming ── */
.fl-next {
  background: linear-gradient(140deg, rgba(253, 184, 19, 0.16), rgba(253, 184, 19, 0.04));
  border-radius: clamp(20px, 3vw, 32px); padding: clamp(28px, 4.5vw, 52px);
}
.fl-next h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem); margin: 6px 0 12px; letter-spacing: -0.03em;
}
.fl-next-body { color: var(--ink-70); max-width: 52ch; margin: 0 0 22px; line-height: 1.6; }
.fl-next-bar { height: 8px; border-radius: 999px; background: rgba(23, 21, 15, 0.08); overflow: hidden; }
.fl-next-bar span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--yolk-deep); transition: width 1.1s var(--ease);
}

.fl-daytrend { font-size: 0.9rem; color: var(--ink-70); margin: 14px 0 0; max-width: 56ch; line-height: 1.6; }
.fl-daytrend b { color: var(--ink); }


/* ── Things that draw themselves ─────────────────────────────────────────
   Each visual sits at rest until it is scrolled to, then goes. The section is
   deliberately all transitions rather than keyframes: a transition can be
   handed a final value once and left alone, and it costs nothing when the
   reader has asked not to be moved about. */

/* Bars grow out of the baseline, left to right. */
.fl-chart .fl-grow {
  transform: scaleY(0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fl-chart svg.is-drawn .fl-grow { transform: scaleY(1); }

/* The temperature line draws on behind them. */
.fl-chart .fl-draw { transition: stroke-dashoffset 1.5s ease 0.35s; }
.fl-chart svg.is-drawn .fl-draw { stroke-dashoffset: 0; }

/* The sun's track dots itself in, then the sun turns up on it. */
.fl-sun-arc .fl-track {
  stroke-dasharray: 1 7;
  opacity: 0;
  transition: opacity 0.9s ease 0.15s;
}
.fl-sun-arc svg.is-drawn .fl-track { opacity: 1; }
.fl-sun-arc .fl-sunmark {
  opacity: 0;
  transform: translateY(14px) scale(0.7);
  transform-origin: center;
  transition: opacity 0.6s ease 0.6s, transform 0.8s cubic-bezier(0.34, 1.4, 0.5, 1) 0.6s;
}
.fl-sun-arc svg.is-drawn .fl-sunmark { opacity: 1; transform: none; }

/* Dials sweep round from nothing. */
.fl-dial-arc { transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1); }

/* Pips land one after another. */
.fl-pips .fl-pip {
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.fl-pips.is-drawn .fl-pip { opacity: 1; transform: none; }

/* Nothing above moves for anybody who has asked the page to hold still. */
@media (prefers-reduced-motion: reduce) {
  .fl-chart .fl-grow, .fl-chart svg.is-drawn .fl-grow { transform: none; transition: none; }
  .fl-chart .fl-draw { stroke-dasharray: none; transition: none; }
  .fl-sun-arc .fl-track, .fl-sun-arc .fl-sunmark { opacity: 1; transform: none; transition: none; }
  .fl-dial-arc { transition: none; }
  .fl-pips .fl-pip { opacity: 1; transform: none; transition: none; }
  .fl-meter-fill, .fl-next-bar span { transition: none; }
}

/* The days somebody is at the gate. Checkboxes rather than a schedule builder:
   a farm is about on Saturday morning or it is not, and per-day hours are a
   form nobody fills in twice. */
.admin-page .dow-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.admin-page .dow { position: relative; }
.admin-page .dow input { position: absolute; opacity: 0; width: 0; height: 0; }
.admin-page .dow span {
  display: block; padding: 7px 11px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line-soft); font-size: 0.8rem; font-weight: 600;
  color: var(--ink-55); transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.admin-page .dow input:checked + span {
  border-color: var(--ink); background: var(--ink); color: var(--canvas);
}
.admin-page .dow input:focus-visible + span { outline: 2px solid var(--yolk-deep); outline-offset: 2px; }