/* =====================================================================
   Catering Quote Tool — designed face
   ---------------------------------------------------------------------
   Elena Ruiz. Warm, unhurried, dead-simple for one non-technical
   operator on phone OR laptop. Interface craft of Linear/Notion/Stripe,
   the warm editorial calm of Apartamento/Cereal.

   Type: a display serif voice carries the hero number and headings
   (Iowan Old Style / Palatino / Georgia lineage — present on every
   modern device, no network fetch, true offline). A humanist sans
   carries the interface. The pairing is the design — serif for the
   money, sans for the machine.

   The hero quote number is the single loudest thing on the screen.
   Everything else is quiet furniture arranged so it reads in seconds.

   Structural class/ID hooks are Devin's engine contract — DO NOT rename.
   ===================================================================== */

:root {
  /* ---- palette: warm, restrained, one family ---- */
  --olive:      #33420f;   /* deep herb green — headings, hero ground */
  --olive-2:    #435313;
  --olive-soft: #5f6f3a;
  --honey:      #edc558;   /* warm accent — the money color */
  --honey-deep: #c99a1e;
  --terracotta: #b4531a;   /* warnings only, used sparingly */

  --paper:      #faf7ef;   /* warm off-white app ground */
  --card:       #ffffff;
  --sand:       #f1ecdd;   /* soft blocks, selected states */
  --sand-deep:  #e6dfc9;

  --ink:        #2a2c1e;   /* warm near-black text */
  --muted:      #7a7a63;   /* secondary text, hints */
  --faint:      #a4a48c;
  --line:       #e3ddc9;   /* hairlines */
  --line-soft:  #efe9d8;

  --good:       #4a7a2e;
  --warn:       #b4531a;

  --radius:     18px;
  --radius-sm:  12px;
  --radius-xs:  9px;

  --shadow-sm:  0 1px 2px rgba(51,66,15,.05);
  --shadow:     0 1px 3px rgba(51,66,15,.06), 0 10px 30px rgba(51,66,15,.05);
  --shadow-hero:0 2px 8px rgba(28,32,10,.14), 0 24px 60px rgba(28,32,10,.22);

  /* ---- type stacks: real, and local for offline ---- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue",
           system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

  --tnum: "tnum" 1, "lnum" 1;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint warm paper texture, no image needed */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1200px 600px at 15% -5%, rgba(237,197,88,.06), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(51,66,15,.05), transparent 55%);
}

.app {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 8px;
}

/* =====================================================================
   HEADER — quiet furniture. Deliberately understated so the hero
   number below it is the loudest thing on the page.
   ===================================================================== */
.app-header {
  padding: 26px 22px 14px;
  padding-top: calc(26px + env(safe-area-inset-top, 0));
}
.app-header__title h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.42rem;
  letter-spacing: -.01em;
  color: var(--olive);
  line-height: 1.1;
}
.app-header__sub {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .84rem;
  letter-spacing: .01em;
}

/* ---- nav: a soft segmented control ---- */
.app-nav {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}
.nav-btn {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--olive-soft);
  font-family: var(--sans);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .18s, background .18s, box-shadow .18s;
}
.nav-btn:hover { color: var(--olive); }
.nav-btn.is-active {
  background: var(--card);
  color: var(--olive);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}

/* =====================================================================
   SCREENS
   ===================================================================== */
.app-main { padding: 4px 16px 8px; }
.screen { display: none; }
.screen.is-active { display: block; animation: rise .28s cubic-bezier(.2,.7,.3,1); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   HERO — the unmissable number. Serif, huge, confident.
   ===================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(120% 140% at 20% 0%, #3d4f12 0%, var(--olive) 55%, #2b380c 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 34px 24px 30px;
  text-align: center;
  box-shadow: var(--shadow-hero);
  margin: 8px 0 18px;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05);
  pointer-events: none;
}
.hero__label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .68rem;
  font-weight: 600;
  color: var(--honey);
}
.hero__quote {
  margin: 8px 0 4px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(3.4rem, 15vw, 5.4rem);
  letter-spacing: -.02em;
  line-height: .96;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.hero__perperson {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   CARDS + GRID
   ===================================================================== */
.quote-grid { display: grid; gap: 16px; }
@media (min-width: 760px) {
  .quote-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.card__title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -.005em;
  color: var(--olive);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card__intro { margin: -8px 0 18px; color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* =====================================================================
   FIELDS — big, calm, thumb-friendly
   ===================================================================== */
.field { display: block; margin-bottom: 18px; border: 0; padding: 0; min-inline-size: 0; }
.field:last-child { margin-bottom: 0; }
.field__label {
  display: block;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--olive-soft);
  margin-bottom: 8px;
}
.field__hint { display: block; color: var(--muted); font-size: .8rem; margin-top: 7px; line-height: 1.45; }
.field-row { display: grid; gap: 16px; }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }

input[type="number"], input[type="text"] {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  transition: border-color .15s, box-shadow .15s, background .15s;
  font-variant-numeric: tabular-nums;
}
input::placeholder { color: var(--faint); font-weight: 400; }
input[type="number"]:focus, input[type="text"]:focus {
  outline: none;
  background: var(--card);
  border-color: var(--olive-soft);
  box-shadow: 0 0 0 4px rgba(95,111,58,.14);
}
input.is-error { border-color: var(--warn); box-shadow: 0 0 0 4px rgba(180,83,26,.16); }
fieldset.field legend { padding: 0; float: left; }
fieldset.field legend + * { clear: both; }

/* =====================================================================
   MENU STYLE BUTTONS — warm, tappable cards
   ===================================================================== */
.menu-styles { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 2px; }
@media (min-width: 460px) { .menu-styles { grid-template-columns: 1fr 1fr; } }
.menu-btn {
  text-align: left;
  border: 1.5px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 74px;
  transition: border-color .14s, background .14s, box-shadow .14s, transform .06s;
}
.menu-btn:hover { border-color: var(--olive-soft); background: var(--card); }
.menu-btn:active { transform: translateY(1px); }
.menu-btn.is-selected {
  border-color: var(--olive);
  background: var(--sand);
  box-shadow: 0 0 0 1.5px var(--olive) inset, var(--shadow-sm);
}
.menu-btn__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--olive);
  letter-spacing: -.005em;
}
.menu-btn__desc { font-size: .8rem; color: var(--muted); }
.menu-btn__price {
  font-size: .78rem;
  color: var(--olive-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* =====================================================================
   TOGGLE
   ===================================================================== */
.field--toggle .toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track {
  width: 54px; height: 32px; border-radius: 999px;
  background: var(--sand-deep); position: relative; flex: 0 0 auto;
  transition: background .18s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s;
}
.toggle input:checked + .toggle__track { background: var(--olive); }
.toggle input:checked + .toggle__track::after { transform: translateX(22px); }
.toggle input:focus-visible + .toggle__track { box-shadow: 0 0 0 4px rgba(95,111,58,.22); }
.toggle__text { font-size: .92rem; color: var(--ink); font-weight: 500; }

/* =====================================================================
   BREAKDOWN — reads in two seconds, tabular money
   ===================================================================== */
.card--breakdown { padding-bottom: 0; overflow: hidden; }
.breakdown { list-style: none; margin: 0; padding: 0; }
.breakdown__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.breakdown__label { color: var(--muted); font-size: .9rem; }
.breakdown__value {
  font-weight: 600; font-size: 1.02rem; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.breakdown__row.is-waived { opacity: .5; }
.breakdown__row--subtotal { border-bottom: none; border-top: 1.5px solid var(--line); margin-top: 4px; padding-top: 15px; }
.breakdown__row--subtotal .breakdown__label { color: var(--olive); font-weight: 700; font-size: .96rem; }
.breakdown__row--subtotal .breakdown__value { font-weight: 700; font-size: 1.1rem; color: var(--olive); }
.breakdown__row--markup { color: var(--muted); font-size: .85rem; border-bottom: 0; padding: 10px 0 14px; }
.breakdown__row--markup .breakdown__value { font-weight: 500; color: var(--muted); font-size: .9rem; }
.breakdown__row--quote {
  background: var(--honey);
  margin: 0 -22px;
  padding: 18px 22px;
  border-bottom: 0;
  align-items: center;
}
.breakdown__row--quote .breakdown__label {
  font-family: var(--serif); font-weight: 600; font-size: 1.06rem; color: var(--olive);
}
.breakdown__row--quote .breakdown__value {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--olive);
}

/* =====================================================================
   PROFIT — the emotional payoff, don't bury it
   ===================================================================== */
.profit {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px;
  margin: 20px 0 4px; padding: 0 0 20px;
}
.profit__item {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
  text-align: center;
}
.profit__item:first-child {
  background: linear-gradient(155deg, #eef2e2, #e5ecd0);
  border-color: var(--sand-deep);
}
.profit__label {
  display: block; font-size: .68rem; color: var(--olive-soft);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600; line-height: 1.35;
}
.profit__value {
  display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 600;
  color: var(--olive); font-variant-numeric: tabular-nums lining-nums; margin-top: 5px;
  letter-spacing: -.01em;
}
.profit__item:nth-child(2) .profit__value { font-size: 1.4rem; }

/* =====================================================================
   MARKET COMPARISON
   ===================================================================== */
.market {
  border-top: 1px solid var(--line);
  padding: 16px 0 20px;
}
.market__row { margin: 0 0 7px; font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.market__row strong { color: var(--ink); font-weight: 700; }
.market-note { margin: 0; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.market-note.is-good { color: var(--good); font-weight: 600; }
.market-note.is-warn { color: var(--warn); font-weight: 600; }

/* ---- food flag ---- */
.food-flag {
  margin: 0 0 20px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: #fbeee2; border: 1px solid #eecaa6; color: var(--terracotta);
  font-size: .86rem; font-weight: 600; line-height: 1.5;
}

/* =====================================================================
   SAVE ROW
   ===================================================================== */
.card--save { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.field--inline { flex: 1 1 240px; margin-bottom: 0; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn {
  min-height: 56px; padding: 0 26px; border: 0; border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; transition: transform .06s, filter .16s, box-shadow .16s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--olive); color: #fff; box-shadow: 0 2px 8px rgba(51,66,15,.2); }
.btn--primary:hover { filter: brightness(1.1); box-shadow: 0 4px 14px rgba(51,66,15,.26); }
.btn--ghost { background: transparent; color: var(--olive); border: 1.5px solid var(--line); }
.btn--ghost:hover { background: var(--sand); border-color: var(--olive-soft); }
.btn:disabled { opacity: .7; cursor: default; }
.link-btn {
  background: none; border: 0; color: var(--olive-soft); font-family: var(--sans);
  font-size: .85rem; font-weight: 600; cursor: pointer; padding: 7px 10px; border-radius: var(--radius-xs);
  transition: background .14s, color .14s;
}
.link-btn:hover { color: var(--olive); background: var(--sand); }

/* =====================================================================
   SAVED QUOTES
   ===================================================================== */
.badge {
  background: var(--honey); color: var(--olive); font-size: .78rem; font-weight: 800;
  border-radius: 999px; padding: 2px 11px; min-width: 24px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.quotes-list { list-style: none; margin: 0; padding: 0; }
.quotes-empty { color: var(--muted); padding: 18px 0; font-size: .94rem; }
.quote-item {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.quote-item:last-child { border-bottom: 0; }
.quote-item__main { display: flex; flex-direction: column; gap: 2px; }
.quote-item__name { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.quote-item__meta { font-size: .8rem; color: var(--muted); }
.quote-item__price {
  font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--olive);
  font-variant-numeric: tabular-nums lining-nums;
}
.quote-item__actions { grid-column: 1 / -1; display: flex; gap: 6px; margin-left: -10px; }

/* =====================================================================
   SETTINGS — calm, adjust-without-fear
   ===================================================================== */
.settings-group {
  margin: 26px 0 14px; font-family: var(--serif); font-weight: 600;
  font-size: 1.06rem; color: var(--olive); border-top: 1px solid var(--line); padding-top: 22px;
  letter-spacing: -.005em;
}
.settings-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.settings-group small { color: var(--muted); font-weight: 400; font-family: var(--sans); font-size: .8rem; }
.settings-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .settings-grid { grid-template-columns: 1fr 1fr; } }
.settings-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.settings-actions .btn { flex: 1 1 180px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.app-footer { padding: 24px 22px 44px; color: var(--faint); font-size: .82rem; text-align: center; }
.app-footer p { margin: 0; max-width: 500px; margin-inline: auto; line-height: 1.6; }

/* =====================================================================
   RESPONSIVE — the two faces
   ===================================================================== */
@media (min-width: 760px) {
  .app-header { padding: 34px 26px 16px; }
  .app-main { padding: 4px 24px 12px; }
  .app-header__title h1 { font-size: 1.6rem; }
  .hero { padding: 44px 28px 40px; }
}
@media (max-width: 420px) {
  body { font-size: 16px; }
  .card { padding: 18px; }
  .breakdown__row--quote { margin: 0 -18px; padding: 16px 18px; }
  .card--breakdown { padding-left: 18px; padding-right: 18px; }
}