/* Pardes Lunch Orders - Piece by Piece editorial.
   Built mobile first. Every rule below 768px is the phone, which is where
   almost every parent will use this. */

:root {
  --navy: #343e85;
  --navy-deep: #1c2350;
  --green: #10653c;
  --green-deep: #0a4a2b;
  --green-br: #1c8a55;
  --gold: #b88a3a;
  --brown: #7a5230;

  --paper: #ffffff;
  --off: #f6f7fb;
  --ink: #23263e;
  --body: #474b63;
  --muted: #7c809a;
  --line: #e7e8f1;
  --navy-tint: #edeefb;
  --green-tint: #e7f1ea;

  --measure: 760px;
  --radius: 18px;
  --gut: 16px;
  --shadow-soft: 0 16px 40px rgba(16, 22, 52, .08);
  --shadow-card: 0 6px 18px rgba(16, 22, 52, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: 'Lora', Georgia, serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}

.accent-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--green) 55%, var(--gold) 100%);
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gut);
}
@media (min-width: 400px) {
  :root { --gut: 20px; }
}

.bsd {
  font-family: 'Frank Ruhl Libre', serif;
  color: var(--muted);
  font-size: 14px;
  text-align: right;
  padding-top: 14px;
}

/* Eyebrow: three squares then small-caps Montserrat. The label system for
   this style, replacing Caveat. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 12px;
}
.eyebrow .squares { display: inline-flex; gap: 3px; }
.eyebrow .squares i {
  width: 8px; height: 8px; display: block; border-radius: 1px;
}
.eyebrow .squares i:nth-child(1) { background: var(--navy); }
.eyebrow .squares i:nth-child(2) { background: var(--green); }
.eyebrow .squares i:nth-child(3) { background: var(--gold); }

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--navy);
  font-size: clamp(27px, 6vw, 42px);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 12px;
}
h1 em {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--green);
}

h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--navy);
  font-size: clamp(21px, 4.4vw, 28px);
  letter-spacing: -.02em;
  margin: 0 0 10px;
}

.rule {
  width: 46px; height: 3px; border-radius: 2px;
  background: var(--green);
  margin: 0 0 20px;
}

section { padding: 34px 0; }
section.band { background: var(--off); }

.lede { font-size: 18px; margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 15px; }

strong { color: var(--green-deep); font-weight: 700; }

/* ── Forms ─────────────────────────────────────────────── */

label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
}

input[type="text"], input[type="tel"], input[type="password"] {
  width: 100%;
  /* 16px minimum or iOS zooms the whole page on focus. */
  font-size: 16px;
  font-family: 'Lora', Georgia, serif;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  margin: 0 0 16px;
}
input:focus {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-color: var(--green);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 13px;
  border: none;
  cursor: pointer;
  background: var(--green);
  color: #fff;
  box-shadow: 0 6px 16px rgba(16, 101, 60, .22);
  transition: transform 150ms ease, opacity 150ms ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: none;
}

/* ── Child switcher ────────────────────────────────────── */

.kids {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 4px;
  margin: 0 0 20px;
  -webkit-overflow-scrolling: touch;
}
.kid-tab {
  flex: 0 0 auto;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--body);
  cursor: pointer;
  white-space: nowrap;
}
.kid-tab[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.kid-tab .count {
  display: inline-block;
  margin-left: 7px;
  font-size: 12px;
  opacity: .85;
}

/* ── Calendar ──────────────────────────────────────────── */

.cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 0 0 6px;
}
.cal-head span { min-width: 0; }
.cal-head span {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* No min-width or min-height here. Seven fixed 44px cells plus gaps is wider
   than a 375px screen, and a forced minimum makes the whole page scroll
   sideways instead of the cells shrinking. The cells are square via
   aspect-ratio and land at 45px or more on any phone 372px and up, which
   clears the 44px touch target. Narrower screens get slightly smaller cells,
   which is the right trade against a page that slides around. */
.day {
  aspect-ratio: 1 / 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, border-color 140ms ease;
}
.day.blank { border: none; background: transparent; cursor: default; }
.day.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.day.off {
  background: var(--off);
  border-color: transparent;
  color: #b7bacb;
  cursor: not-allowed;
}
/* A day already paid for reads as settled, not as blocked. */
.day.paid {
  background: var(--green-tint);
  border-color: var(--green-tint);
  color: var(--green-deep);
  cursor: not-allowed;
}
.day:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.day-note {
  min-height: 24px;
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--muted);
}

/* Three across so the row is full. Two columns would orphan the third. */
.quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0 0;
}
.quick button {
  min-height: 44px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
}

/* ── Running total, pinned so it is always answerable ──── */

.total-bar {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 14px var(--gut) calc(14px + env(safe-area-inset-bottom));
  margin: 24px calc(-1 * var(--gut)) 0;
  box-shadow: 0 -8px 24px rgba(16, 22, 52, .06);
}
.total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 12px;
}
.total-row .label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.total-row .amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 27px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
}

/* ── Review ────────────────────────────────────────────── */

.receipt { border-top: 1px solid var(--line); margin: 20px 0 0; }
.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.receipt-row .who {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
}
.receipt-row .detail { font-size: 15px; color: var(--muted); margin-top: 2px; }
.receipt-row .cash {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.receipt-total {
  display: flex;
  justify-content: space-between;
  padding: 18px 0 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 21px;
  color: var(--navy);
}

/* Gold left border for the honest aside, per the editorial system. */
.honest {
  border-left: 3px solid var(--gold);
  background: #fdfaf4;
  padding: 14px 16px;
  border-radius: 0 12px 12px 0;
  margin: 20px 0 0;
  font-size: 16px;
}

.notice {
  border-left: 3px solid var(--navy);
  background: var(--navy-tint);
  padding: 14px 16px;
  border-radius: 0 12px 12px 0;
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--ink);
}
.notice.warn { border-left-color: var(--gold); background: #fdfaf4; }

.hidden { display: none !important; }

footer {
  background: var(--navy-deep);
  color: #b9bdd8;
  padding: 26px 0;
  font-size: 14px;
  margin-top: 40px;
}
footer a { color: #fff; }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  margin-right: 9px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .btn { transition: none; }
}

@media (min-width: 768px) {
  body { font-size: 18px; }
  section { padding: 46px 0; }
  .day { font-size: 16px; }
  .total-bar { position: static; margin: 28px 0 0; border-radius: 14px; border: 1px solid var(--line); box-shadow: none; }
}

/* ── Logo ──────────────────────────────────────────────── */

.logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 8px auto 22px;
}
@media (min-width: 768px) {
  .logo { width: 194px; margin: 12px auto 26px; }
}

/* ── Weekly menu ───────────────────────────────────────── */
/* Same five meals every week, so it is stated once rather than repeated into
   every calendar square. Mirrors the laminated card in the office: day label,
   then the dish underneath. */

.menu-block {
  background: var(--green-tint);
  border-radius: 12px;
  padding: 18px 18px 6px;
  margin: 22px 0 0;
}
.menu-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  text-align: center;
  margin: 0 0 12px;
}
.menu { margin: 0; }
.menu dt {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}
.menu dd {
  margin: 3px 0 0;
  padding: 0 0 12px;
  border-bottom: 1px solid #d5e3da;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.menu dd:last-of-type { border-bottom: none; }
.menu dt + dd + dt { margin-top: 12px; }

@media (min-width: 620px) {
  /* Wide enough for two columns: day on the left, dish on the right. */
  .menu { display: grid; grid-template-columns: 108px 1fr; column-gap: 16px; }
  .menu dt { padding: 12px 0 0; }
  .menu dd { padding: 10px 0 12px; }
  .menu dt + dd + dt { margin-top: 0; }
  .menu dt:first-of-type { padding-top: 0; }
  .menu dd:first-of-type { padding-top: 0; }
}

/* On a wide screen seven cells across the full 760px reading measure gives
   99px date squares, which look like empty tiles rather than a calendar. Cap
   the grid so cells stay a sensible size and the month reads as a month. */
@media (min-width: 620px) {
  .cal, .cal-head {
    max-width: 434px;
    gap: 6px;
  }
  .day { font-size: 17px; border-radius: 12px; }
}

/* ── Login: one screen, centred ─────────────────────────
   The whole login has to be visible without scrolling on a phone and on a
   laptop. A parent who has to scroll to find the button is a parent who emails
   the office instead. Centring it also stops it reading as a page fragment
   floating against a wide left margin. */

#step-login {
  min-height: calc(100svh - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px 0 24px;
  max-width: 420px;
  margin: 0 auto;
}
#step-login .rule { margin: 0 auto 18px; }
#step-login h1 { font-size: clamp(24px, 5.4vw, 34px); margin: 0 0 10px; }
#step-login form { width: 100%; margin-top: 4px !important; }
#step-login label { text-align: left; }
#step-login .logo { width: 116px; margin: 0 auto 14px; }
#step-login input { margin-bottom: 13px; }
#step-login .notice { text-align: left; }

@media (min-width: 768px) {
  #step-login { min-height: calc(100svh - 220px); }
  #step-login .logo { width: 140px; margin-bottom: 18px; }
}

/* Short phones (SE, mini) cannot fit a large logo and full type. Shrink rather
   than scroll. */
@media (max-height: 700px) {
  #step-login .logo { width: 88px; margin-bottom: 10px; }
  #step-login h1 { font-size: 23px; }
  #step-login { min-height: 0; padding-top: 4px; }
}

/* The page is centred, so the footer is too. */
footer .wrap { text-align: center; }

/* ── The pick and review screens are one centred column ──
   Levi: the page read as left-stranded on a laptop and wordy everywhere. One
   ~500px column, centred headings, and the calendar centred inside it. */

#step-pick, #step-review {
  max-width: 500px;
  margin: 0 auto;
}
#step-pick .eyebrow, #step-review .eyebrow { justify-content: center; }
#step-pick h2, #step-review h2 { text-align: center; }
#step-pick .rule, #step-review .rule { margin-left: auto; margin-right: auto; }

.cutoff {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 18px;
}

.day-note { text-align: center; }

/* Centre the child tabs without clipping when they overflow on a small phone. */
.kid-tab:first-child { margin-left: auto; }
.kid-tab:last-child { margin-right: auto; }

.back-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.back-link:hover { color: var(--navy); }

/* Fridays are pizza days, picked one at a time like any other day. The gold
   outline is the only thing marking them. No fill: Levi, on the old toggle,
   said a tinted background reads as half-selected. */
.day.pizza:not(.on):not(.off):not(.paid) {
  border-color: var(--gold);
  border-width: 2px;
}

/* Two quick buttons now, so two columns keeps the row full. */
.quick { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 620px) {
  .cal, .cal-head { margin-left: auto; margin-right: auto; }
}

/* ── Kid cards, one per child, photo-portal style ─────── */

#step-kids { max-width: 500px; margin: 0 auto; }
#step-kids .eyebrow { justify-content: center; }
#step-kids h2 { text-align: center; }
#step-kids .rule { margin-left: auto; margin-right: auto; }

.kid-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  text-align: left;
}
.kid-card:hover { border-color: var(--navy); }
.kid-card .kname {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.kid-card .kgrade {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}
.kid-card .kstatus {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--green-deep);
  white-space: nowrap;
}
.kid-card .kstatus.none { color: var(--muted); font-weight: 600; }
.kid-card .chev { font-size: 20px; color: var(--muted); }

/* ── Menu, compact: day and dish side by side, always ── */

.menu { display: grid; grid-template-columns: 96px 1fr; column-gap: 12px; }
.menu dt { padding: 9px 0 0; font-size: 10.5px; }
.menu dd { padding: 8px 0 9px; font-size: 14.5px; line-height: 1.45; margin: 0; }
.menu dt:first-of-type { padding-top: 0; }
.menu dd:first-of-type { padding-top: 0; }
.menu-block { padding: 14px 16px 5px; }
.menu-label { margin: 0 0 8px; }

/* Day labels sit on the first line of their dish, not vertically centred. */
.menu dt { align-self: start; padding-top: 11px; }
.menu dt:first-of-type { padding-top: 3px; }

/* ── Air between the sections of the kid page (Sharone: "too squashed") ── */

.menu-block { margin: 20px 0 30px; }

.cal-hint {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 12px;
}

.quick { margin-top: 14px; }
.day-note { margin-top: 14px; }

/* ── The page fills the screen; the footer sits at the bottom, not mid-air ──
   Sharone: the sign-in page was "half empty on the bottom". The footer now
   pins to the bottom of the viewport on every screen. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
main.wrap {
  flex: 1;
  width: 100%;
  align-self: center;
}

/* The old stacked-menu spacing rule survived into the grid layout and shoved
   every next day label 12px lower, so labels drifted off their dishes. */
.menu dt + dd + dt { margin-top: 0; }

/* One focus ring, not a double outline. */
input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(16, 101, 60, .14);
}

/* Two months stacked. Each is its own block with its own name, so August and
   September never read as one long run of numbers. */
.month-block {
  padding: 18px 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 0 0 16px;
}
.month-block:last-child { margin-bottom: 0; }
.month-name {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 8px;
}
.month-rule {
  width: 36px; height: 3px; border-radius: 2px;
  background: var(--green);
  margin: 0 auto 14px;
}

/* ── Cancelling a paid day for credit ─────────────────── */

/* A paid day that can still be changed invites the tap it can answer. */
.day.paid.can-cancel { cursor: pointer; }

.cancel-panel {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background: var(--paper);
}
.cancel-panel p {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--ink);
}
.cancel-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cancel-actions button {
  min-height: 44px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
}
.cancel-actions #cancel-go {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}