/* Expo Rail — canonical calculator surface.
   Brand reference: warm paper, ink, mustard, brick red, torn tickets.
   This layer intentionally overrides legacy dark/orange SaaS styling. */

:root {
  --expo-paper: var(--paper, #F3E6C9);
  --expo-paper-light: var(--paper-inner, #F7EDD6);
  --expo-paper-deep: var(--line, #C9B896);
  --expo-ink: var(--ink, #1A140C);
  --expo-muted: var(--ink-muted, #5C5346);
  --expo-mustard: var(--grease, #E2B93A);
  --expo-mustard-light: var(--grease, #E2B93A);
  --expo-red: var(--ticket-red, #B42318);
  --expo-red-dark: var(--ticket-red, #B42318);
  --expo-green: var(--ok, #2F5D32);
  --expo-line: var(--ink, #1A140C);
  --expo-shadow: 0 8px 0 rgba(43, 33, 24, .12), 0 18px 28px rgba(43, 33, 24, .12);
}

html, body { background: var(--paper, #F3E6C9) !important; color: var(--ink, #1A140C) !important; }
body {
  background-image:
    radial-gradient(rgba(74, 49, 23, .055) .7px, transparent .7px),
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(231,211,170,.16)) !important;
  background-size: 5px 5px, 100% 100% !important;
}

/* The header is a light printed masthead, never a dark SaaS bar. */
.rail {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  color: var(--expo-ink) !important;
  border-top: 0 !important;
  border-bottom: 3px solid var(--expo-ink) !important;
  box-shadow: none !important;
  padding: 18px clamp(18px, 4vw, 44px) 12px !important;
  grid-template-columns: auto 1fr !important;
  gap: 24px !important;
  align-items: end !important;
}
.mark { color: var(--expo-ink) !important; font-size: clamp(1.45rem, 2.4vw, 2.25rem) !important; letter-spacing: -.045em !important; line-height: 1 !important; }
.mark .proto-pot-icon { color: var(--expo-ink) !important; }
.nav { gap: 8px !important; }
.nav a { color: var(--expo-ink) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font-size: 1rem !important; font-weight: 800 !important; padding: 9px 13px !important; }
.nav a:hover { color: var(--expo-red) !important; background: transparent !important; text-decoration: underline !important; }
.nav a[aria-current="page"] { color: var(--expo-mustard) !important; background: transparent !important; border: 0 !important; box-shadow: inset 0 -4px 0 var(--expo-mustard) !important; }
.nav-toggle { background: var(--expo-paper-light) !important; color: var(--expo-ink) !important; border: 2px solid var(--expo-ink) !important; box-shadow: 3px 3px 0 var(--expo-ink) !important; }
.nav-sheet { background: var(--expo-paper-light) !important; border: 2px solid var(--expo-ink) !important; box-shadow: 5px 5px 0 var(--expo-ink) !important; }
.nav-sheet a { color: var(--expo-ink) !important; }
.nav-sheet a[aria-current="page"] { color: var(--expo-ink) !important; background: var(--expo-mustard-light) !important; }

.wrap { width: min(1040px, calc(100% - 32px)) !important; padding: 26px 0 56px !important; }
.ticket, .recipe-card, .dish-board { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.ticket-body { padding: 0 !important; }

/* Summary: three deliberately uneven paper tickets. */
.proto-summary-badge-wrap { display: flex !important; justify-content: center !important; margin: 8px 0 18px !important; }
.proto-summary-badge { border: 2px solid var(--expo-mustard) !important; border-radius: 2px !important; background: var(--expo-paper-light) !important; color: var(--expo-ink) !important; padding: 12px 22px !important; box-shadow: none !important; transform: none; }
.badge-star { color: var(--expo-mustard) !important; }
.proto-cards-row { display: grid !important; grid-template-columns: 1fr !important; gap: 0.5rem !important; align-items: stretch !important; margin: 0 auto 24px !important; max-width: 930px !important; }
.proto-card { min-height: 0 !important; padding: 28px 24px 20px !important; display: flex !important; align-items: center !important; gap: 14px !important; border: 2px solid var(--expo-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(--expo-ink) !important; transform: none !important; z-index: 1; }
.proto-card-icon { flex: 0 0 auto !important; }
.proto-card-title { font-family: var(--font-display) !important; font-size: clamp(.85rem, 1.4vw, 1.1rem) !important; font-weight: 900 !important; letter-spacing: .02em !important; }
.proto-card-val { font-family: var(--font-display) !important; font-size: clamp(2rem, 4vw, 3.7rem) !important; line-height: .98 !important; font-weight: 900 !important; letter-spacing: -.045em !important; white-space: nowrap !important; }
.proto-card-line { height: 4px !important; background: var(--expo-mustard) !important; margin-top: 12px !important; }
.card-suggest .proto-card-line { background: var(--expo-mustard-light) !important; }
.proto-cards-row > .ticket-target { display: none !important; }

/* Dish identity and hero image. */
.proto-dish-board { max-width: 930px !important; margin: 0 auto !important; }
.proto-dish-head { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
.proto-title-line { display: flex !important; align-items: baseline !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; margin: 10px 0 2px !important; }
.proto-kicker { font-family: var(--font-display) !important; font-weight: 900 !important; font-size: clamp(1.7rem, 3.2vw, 2.5rem) !important; }
.proto-script-title-wrap { position: relative !important; display: inline-flex !important; }
.proto-script-input { width: min(100%, 480px) !important; border: 0 !important; border-bottom: 9px solid var(--expo-mustard-light) !important; border-radius: 0 !important; background: transparent !important; color: var(--expo-ink) !important; font-family: var(--font-display, "Arial Narrow", Impact, sans-serif) !important; font-size: clamp(1.8rem, 4vw, 3.25rem) !important; font-weight: 800 !important; line-height: 1 !important; padding: 0 4px 5px !important; text-align: center !important; box-shadow: none !important; }
.proto-hero-art-wrap { display: flex !important; justify-content: center !important; padding: 0 0 18px !important; }
.proto-hero-dish-img { display: block !important; width: min(100%, 560px) !important; height: auto !important; max-height: 330px !important; object-fit: contain !important; mix-blend-mode: multiply !important; filter: saturate(.98) contrast(1.02) !important; }
.proto-meta-strip { display: flex !important; justify-content: center !important; align-items: end !important; flex-wrap: wrap !important; gap: 12px !important; margin: 0 auto 24px !important; padding: 12px 18px !important; border: 2px solid rgba(43,33,24,.18) !important; border-radius: 30px !important; background: rgba(255,250,240,.32) !important; }
.meta-pill { color: var(--expo-ink) !important; font-weight: 900 !important; }
.meta-pill input, .meta-pill .stepper-wrap { background: var(--expo-paper-light) !important; border: 2px solid #cdbd9f !important; color: var(--expo-ink) !important; border-radius: 5px !important; }

/* Ingredient rows are long, perforated paper slips rather than cards/forms. */
.proto-pack-lines { display: grid !important; gap: 8px !important; }
.ing-ticket { position: relative !important; display: grid !important; grid-template-columns: 72px minmax(0, 1fr) 160px !important; align-items: center !important; gap: 18px !important; min-height: 142px !important; padding: 18px 24px 18px 18px !important; background: var(--expo-paper-light) !important; border: 0 !important; border-radius: 0 !important; box-shadow: 0 5px 0 rgba(43,33,24,.10), 0 10px 18px rgba(43,33,24,.08) !important; clip-path: polygon(0 4%, 2% 0, 5% 2%, 9% 0, 14% 2%, 20% 0, 27% 2%, 35% 0, 44% 2%, 53% 0, 63% 2%, 73% 0, 84% 2%, 93% 0, 100% 3%, 99% 97%, 94% 100%, 87% 98%, 80% 100%, 72% 98%, 64% 100%, 54% 98%, 44% 100%, 35% 98%, 25% 100%, 16% 98%, 7% 100%, 0 97%); }
.ing-ticket::after { content: ""; position: absolute; right: 176px; top: 0; bottom: 0; border-left: 2px dashed rgba(43,33,24,.8); pointer-events: none; }
.ing-ticket-icon { display: flex !important; align-items: center !important; justify-content: center !important; font-size: 2.7rem !important; filter: grayscale(.85) contrast(1.25) !important; }
.ing-ticket-main { min-width: 0 !important; }
.ing-name { width: 100% !important; border: 0 !important; border-bottom: 3px solid var(--expo-mustard) !important; border-radius: 0 !important; background: transparent !important; color: var(--expo-ink) !important; font-family: var(--font-display) !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; gap: 8px !important; flex-wrap: wrap !important; margin-top: 8px !important; }
.used-label { font-weight: 900 !important; }
.stepper-wrap { border: 0 !important; background: transparent !important; }
.stepper-btn { width: 46px !important; height: 46px !important; min-width: 46px !important; border: 2px solid #d1c3a8 !important; border-radius: 50% !important; background: var(--expo-paper-light) !important; color: var(--expo-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; border: 2px solid #d1c3a8 !important; color: var(--expo-ink) !important; }
.ing-pack { margin-top: 8px !important; color: #a87918 !important; font-weight: 800 !important; }
.ing-pack summary { cursor: pointer !important; }
.ing-pack-fields { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding-top: 8px !important; }
.ing-ticket-cost { justify-self: end !important; width: 150px !important; }
.ticket-stub-box { background: transparent !important; border: 3px solid var(--expo-mustard) !important; border-radius: 12px !important; padding: 10px !important; text-align: center !important; }
.stub-label { color: #a87918 !important; font-family: var(--font-display) !important; font-size: 1rem !important; font-weight: 900 !important; }
.stub-val { color: var(--expo-ink) !important; font-family: var(--font-display) !important; font-size: 2rem !important; font-weight: 900 !important; }
.stub-star { display: block !important; color: var(--expo-mustard) !important; }
.pack-remove { top: 5px !important; right: 5px !important; background: var(--expo-red) !important; color: white !important; border: 2px solid var(--expo-paper-light) !important; border-radius: 50% !important; width: 30px !important; height: 30px !important; }

.proto-add-ingredient-btn, .add-ing { width: 100% !important; min-height: 64px !important; margin-top: 12px !important; background: transparent !important; color: var(--expo-ink) !important; border: 3px dashed var(--expo-ink) !important; border-radius: 14px !important; box-shadow: none !important; font-family: var(--font-display) !important; font-size: clamp(1.35rem, 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; }
.btn { background: var(--expo-ink) !important; color: var(--expo-paper-light) !important; border: 2px solid var(--expo-ink) !important; border-radius: 4px !important; box-shadow: 4px 4px 0 var(--expo-red) !important; font-weight: 900 !important; }
.btn-ghost { background: var(--expo-paper-light) !important; color: var(--expo-ink) !important; box-shadow: 3px 3px 0 var(--expo-mustard) !important; }
.sticky-margin-bar { background: var(--expo-paper-light) !important; border: 2px solid var(--expo-ink) !important; color: var(--expo-ink) !important; box-shadow: 4px 4px 0 var(--expo-ink) !important; }

@media (max-width: 700px) {
  .rail { padding: 14px 16px 10px !important; align-items: center !important; }
  .mark-full { display: inline !important; font-size: 1.25rem !important; }
  .wrap { width: calc(100% - 20px) !important; padding-top: 16px !important; }
  .proto-cards-row { grid-template-columns: 1fr !important; gap: 8px !important; padding: 0 8px !important; }
  .proto-card { min-height: 118px !important; padding: 18px !important; transform: none !important; }
  .proto-card-val { font-size: clamp(2.2rem, 11vw, 3.3rem) !important; }
  .proto-title-line { justify-content: flex-start !important; }
  .proto-kicker { font-size: 1.65rem !important; }
  .proto-script-input { text-align: left !important; font-size: 2rem !important; }
  .proto-hero-dish-img { max-height: 250px !important; }
  .proto-meta-strip { justify-content: stretch !important; border-radius: 18px !important; }
  .meta-pill { flex: 1 1 90px !important; }
  .ing-ticket { grid-template-columns: 44px minmax(0, 1fr) !important; gap: 10px !important; padding: 18px 12px !important; }
  .ing-ticket::after { display: none !important; }
  .ing-ticket-icon { font-size: 1.8rem !important; }
  .ing-ticket-cost { grid-column: 2 !important; justify-self: stretch !important; width: auto !important; }
  .ticket-stub-box { display: inline-flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important; }
  .stub-val { font-size: 1.8rem !important; }
  .ing-used { align-items: stretch !important; }
  .stepper-wrap { max-width: 100% !important; }
  .ing-used input[name="amountUsed"] { min-width: 0 !important; width: 88px !important; }
  .sticky-margin-bar { left: 10px !important; right: 10px !important; bottom: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .proto-card, .proto-script-input { transform: none !important; transition: none !important; }
}