/* Expo Rail v2 — operational calculator override.
   This is intentionally opinionated: no dashboard chrome, no white SaaS cards,
   no unconstrained columns, and no spreadsheet-like form geometry. */

:root {
  --expo2-paper: var(--paper, #F3E6C9);
  --expo2-paper-light: var(--paper-inner, #F7EDD6);
  --expo2-paper-shadow: var(--line, #C9B896);
  --expo2-ink: var(--ink, #1A140C);
  --expo2-muted: var(--ink-muted, #5C5346);
  --expo2-mustard: var(--grease, #E2B93A);
  --expo2-yellow: var(--grease, #E2B93A);
  --expo2-red: var(--ticket-red, #B42318);
  --expo2-green: var(--ok, #2F5D32);
}

html, body {
  background: var(--paper, #F3E6C9) !important;
  color: var(--ink, #1A140C) !important;
}

body {
  background-image:
    radial-gradient(rgba(83, 57, 25, .07) .65px, transparent .65px),
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(218,193,145,.14)) !important;
  background-size: 5px 5px, 100% 100% !important;
}

.rail {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: end !important;
  width: min(1180px, calc(100% - 44px)) !important;
  margin: 0 auto !important;
  padding: 24px 0 14px !important;
  background: transparent !important;
  color: var(--expo2-ink) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--expo2-ink) !important;
  box-shadow: none !important;
}

.mark, .mark-full, .mark-short {
  color: var(--expo2-ink) !important;
  font-family: Impact, "Arial Narrow", sans-serif !important;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
  text-transform: none !important;
}

.mark { gap: 12px !important; }
.mark .proto-pot-icon { color: var(--expo2-ink) !important; }
.nav { justify-self: end !important; gap: 18px !important; }
.nav a {
  color: var(--expo2-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 4px !important;
  font-family: Impact, "Arial Narrow", sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
}
.nav a[aria-current="page"] {
  color: var(--expo2-mustard) !important;
  background: transparent !important;
  box-shadow: inset 0 -5px 0 var(--expo2-mustard) !important;
}
.nav-toggle {
  background: var(--expo2-paper-light) !important;
  color: var(--expo2-ink) !important;
  border: 2px solid var(--expo2-ink) !important;
  box-shadow: 4px 4px 0 var(--expo2-ink) !important;
}
.nav-sheet {
  background: var(--expo2-paper-light) !important;
  border: 2px solid var(--expo2-ink) !important;
  box-shadow: 5px 5px 0 var(--expo2-ink) !important;
}
.nav-sheet a { color: var(--expo2-ink) !important; }

.wrap {
  width: min(1120px, calc(100% - 44px)) !important;
  margin: 0 auto !important;
  padding: 30px 0 60px !important;
}

.ticket, .ticket-body, .recipe-card, .dish-board, .proto-ticket-stage {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.proto-ticket-stage { width: 100% !important; max-width: 100% !important; }
.proto-ticket-body { width: 100% !important; max-width: 100% !important; }

.proto-summary-badge-wrap { margin: 8px 0 24px !important; }
.proto-summary-badge {
  background: var(--expo2-paper-light) !important;
  color: var(--expo2-ink) !important;
  border: 2px solid var(--expo2-mustard) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 12px 24px !important;
  transform: none !important;
}
.badge-star { color: var(--expo2-mustard) !important; }

.proto-cards-row {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin: 0 auto 34px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
  align-items: stretch !important;
}
.proto-card {
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 28px 24px 22px !important;
  border: 2px solid var(--expo2-ink) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  transform: none !important;
}
.proto-card:nth-child(n) { background: var(--white, #FFFBF2) !important; color: var(--expo2-ink) !important; transform: none !important; z-index: 1 !important; }
.proto-card-title { font-family: Impact, "Arial Narrow", sans-serif !important; font-size: clamp(.85rem, 1.6vw, 1.2rem) !important; font-weight: 900 !important; }
.proto-card-val { font-family: Impact, "Arial Narrow", sans-serif !important; font-size: clamp(2.2rem, 4.2vw, 4rem) !important; font-weight: 900 !important; line-height: .95 !important; white-space: nowrap !important; }
.proto-card-line { height: 4px !important; background: var(--expo2-mustard) !important; margin-top: 12px !important; }
.card-suggest .proto-card-line { background: var(--expo2-yellow) !important; }
.proto-cards-row > .ticket-target { display: none !important; }

.proto-dish-board {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin: 0 auto !important;
}
.proto-dish-head { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
.proto-title-line {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 6px 0 8px !important;
}
.proto-kicker { font-family: Impact, "Arial Narrow", sans-serif !important; font-size: clamp(1.5rem, 3vw, 2.6rem) !important; }
.proto-script-title-wrap { position: relative !important; }
.proto-script-input {
  width: min(100%, 520px) !important;
  background: transparent !important;
  color: var(--expo2-ink) !important;
  border: 0 !important;
  border-bottom: 9px solid var(--expo2-yellow) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-display, "Arial Narrow", Impact, sans-serif) !important;
  font-size: clamp(1.8rem, 4vw, 3.3rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  padding: 0 4px 5px !important;
}
.proto-hero-art-wrap { display: flex !important; justify-content: center !important; padding: 0 0 18px !important; }
.proto-hero-dish-img {
  width: min(100%, 560px) !important;
  max-height: 330px !important;
  height: auto !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
}
.proto-meta-strip {
  display: flex !important;
  justify-content: center !important;
  align-items: end !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 26px !important;
  padding: 12px 18px !important;
  background: rgba(255,248,232,.35) !important;
  border: 2px solid rgba(43,33,24,.2) !important;
  border-radius: 30px !important;
}
.meta-pill { color: var(--expo2-ink) !important; font-weight: 900 !important; }
.meta-pill input, .meta-pill .stepper-wrap { background: var(--expo2-paper-light) !important; color: var(--expo2-ink) !important; border: 2px solid #cdbd9f !important; }

.proto-pack-lines { display: grid !important; gap: 9px !important; }
.ing-ticket {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) 160px !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 142px !important;
  padding: 20px 24px 20px 18px !important;
  background: var(--expo2-paper-light) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 5px 0 rgba(43,33,24,.12), 0 10px 18px rgba(43,33,24,.08) !important;
  clip-path: polygon(0 4%,2% 0,6% 2%,12% 0,18% 2%,25% 0,33% 2%,42% 0,51% 2%,61% 0,71% 2%,81% 0,91% 2%,100% 3%,99% 97%,93% 100%,85% 98%,76% 100%,66% 98%,57% 100%,47% 98%,37% 100%,27% 98%,17% 100%,8% 98%,0 97% ) !important;
}
.ing-ticket::after { content: "" !important; position: absolute !important; right: 176px !important; top: 0 !important; bottom: 0 !important; border-left: 2px dashed var(--expo2-ink) !important; pointer-events: none !important; }
.ing-ticket-icon { display: flex !important; justify-content: center !important; align-items: center !important; font-size: 2.8rem !important; filter: grayscale(1) contrast(1.3) !important; }
.ing-name {
  width: 100% !important;
  background: transparent !important;
  color: var(--expo2-ink) !important;
  border: 0 !important;
  border-bottom: 3px solid var(--expo2-mustard) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: Impact, "Arial Narrow", sans-serif !important;
  font-size: clamp(1.25rem, 2.5vw, 2rem) !important;
  font-weight: 900 !important;
  padding: 0 0 6px !important;
}
.ing-used { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 8px !important; }
.used-label { font-weight: 900 !important; }
.stepper-wrap { background: transparent !important; border: 0 !important; }
.stepper-btn {
  width: 46px !important; height: 46px !important; min-width: 46px !important;
  border: 2px solid #d1c3a8 !important; border-radius: 50% !important;
  background: var(--expo2-paper-light) !important; color: var(--expo2-ink) !important;
  box-shadow: 0 3px 0 rgba(43,33,24,.14) !important; font-size: 1.5rem !important; font-weight: 900 !important;
}
.ing-used input, .ing-pack-fields input { min-height: 46px !important; background: transparent !important; color: var(--expo2-ink) !important; border: 2px solid #d1c3a8 !important; }
.ing-pack { margin-top: 8px !important; color: #a87918 !important; font-weight: 800 !important; }
.ing-ticket-cost { justify-self: end !important; width: 150px !important; }
.ticket-stub-box { background: transparent !important; border: 3px solid var(--expo2-mustard) !important; border-radius: 12px !important; padding: 10px !important; text-align: center !important; }
.stub-label { color: #a87918 !important; font-family: Impact, "Arial Narrow", sans-serif !important; font-size: 1rem !important; font-weight: 900 !important; }
.stub-val { color: var(--expo2-ink) !important; font-family: Impact, "Arial Narrow", sans-serif !important; font-size: 2rem !important; font-weight: 900 !important; }
.stub-star { display: block !important; color: var(--expo2-mustard) !important; }
.pack-remove { background: var(--expo2-red) !important; color: #fff !important; border: 2px solid var(--expo2-paper-light) !important; border-radius: 50% !important; }
.proto-add-ingredient-btn, .add-ing {
  width: 100% !important; min-height: 64px !important; margin-top: 12px !important;
  background: transparent !important; color: var(--expo2-ink) !important;
  border: 3px dashed var(--expo2-ink) !important; border-radius: 14px !important; box-shadow: none !important;
  font-family: Impact, "Arial Narrow", sans-serif !important; font-size: clamp(1.3rem, 3vw, 2rem) !important; font-weight: 900 !important;
}
.proto-actions { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 18px !important; }
.proto-actions .btn { background: var(--expo2-ink) !important; color: var(--expo2-paper-light) !important; border: 2px solid var(--expo2-ink) !important; box-shadow: 4px 4px 0 var(--expo2-red) !important; }
.proto-actions .btn-ghost { background: var(--expo2-paper-light) !important; color: var(--expo2-ink) !important; box-shadow: 3px 3px 0 var(--expo2-mustard) !important; }
.sticky-margin-bar { background: var(--expo2-paper-light) !important; color: var(--expo2-ink) !important; border: 2px solid var(--expo2-ink) !important; box-shadow: 4px 4px 0 var(--expo2-ink) !important; }

@media (max-width: 700px) {
  .rail { width: calc(100% - 24px) !important; padding: 16px 0 12px !important; grid-template-columns: 1fr auto !important; }
  .mark, .mark-full, .mark-short { font-size: 1.35rem !important; }
  .nav-desktop { display: none !important; }
  .nav-mobile { display: block !important; }
  .wrap { width: calc(100% - 20px) !important; padding-top: 18px !important; }
  .proto-cards-row { grid-template-columns: 1fr !important; gap: 9px !important; padding: 0 5px !important; }
  .proto-card { min-height: 116px !important; padding: 20px !important; transform: none !important; }
  .proto-card-val { font-size: clamp(2.4rem, 12vw, 3.4rem) !important; }
  .proto-title-line { justify-content: flex-start !important; }
  .proto-hero-dish-img { max-height: 250px !important; }
  .proto-meta-strip { width: 100% !important; border-radius: 18px !important; }
  .ing-ticket { grid-template-columns: 42px minmax(0, 1fr) !important; gap: 10px !important; padding: 20px 14px 20px 10px !important; }
  .ing-ticket::after { display: none !important; }
  .ing-ticket-cost { grid-column: 2 !important; justify-self: start !important; width: auto !important; margin-top: 6px !important; }
  .ticket-stub-box { display: inline-block !important; min-width: 140px !important; }
  .ing-ticket-icon { font-size: 2rem !important; }
  .ing-name { font-size: 1.35rem !important; }
  .ing-used { align-items: flex-start !important; }
  .proto-script-input { max-width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}