/* CostRail canonical ticket calculator enforcement.
   This file is intentionally loaded in addition to the legacy layers.
   High-specificity selectors are required because proto-calculator.css is
   currently loaded more than once by the server-rendered shell. */

html body main.wrap .ticket.proto-ticket-stage,
html body main.wrap .ticket.proto-ticket-stage * {
  box-sizing: border-box;
}

html body main.wrap .ticket.proto-ticket-stage {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body main.wrap .ticket.proto-ticket-stage .proto-ticket-body {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(12px, 3vw, 40px) 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

html body main.wrap .ticket.proto-ticket-stage .proto-cards-row,
html body main.wrap .ticket.proto-ticket-stage .live-stubs {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  gap: clamp(8px, 1.5vw, 16px) !important;
  overflow: visible !important;
}

html body main.wrap .ticket.proto-ticket-stage .proto-card {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 112px !important;
  padding: clamp(12px, 2vw, 20px) !important;
  border: 2px solid var(--ink, #1a140c) !important;
  border-radius: 0 !important;
  background: var(--paper-inner, #F7EDD6) !important;
  box-shadow: 4px 5px 0 rgba(26,20,12,.14) !important;
}

html body main.wrap .ticket.proto-ticket-stage .proto-card:nth-child(n) {
  background: var(--white, #FFFBF2) !important;
  color: var(--ink, #1A140C) !important;
  transform: none !important;
}

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

html body main.wrap .ticket.proto-ticket-stage .proto-pack-lines,
html body main.wrap .ticket.proto-ticket-stage .pack-lines {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  overflow: visible !important;
}

html body main.wrap .ticket.proto-ticket-stage .proto-pack-lines .pack-line,
html body main.wrap .ticket.proto-ticket-stage .proto-pack-lines .ingredient-row,
html body main.wrap .ticket.proto-ticket-stage .pack-lines .pack-line,
html body main.wrap .ticket.proto-ticket-stage .pack-lines .ingredient-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(44px, 64px) minmax(0, 1fr) minmax(112px, 140px) !important;
  align-items: center !important;
  gap: clamp(8px, 1.5vw, 16px) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 128px !important;
  padding: clamp(12px, 2vw, 18px) !important;
  margin: 0 !important;
  background: var(--paper-inner, #F7EDD6) !important;
  border: 0 !important;
  border-top: 2px dashed rgba(26,20,12,.55) !important;
  border-bottom: 2px dashed rgba(26,20,12,.55) !important;
  border-radius: 0 !important;
  box-shadow: 0 3px 0 rgba(26,20,12,.12) !important;
}

html body main.wrap .ticket.proto-ticket-stage .pack-line::before,
html body main.wrap .ticket.proto-ticket-stage .pack-line::after,
html body main.wrap .ticket.proto-ticket-stage .ingredient-row::before,
html body main.wrap .ticket.proto-ticket-stage .ingredient-row::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 10px !important;
  background: radial-gradient(circle, var(--paper, #F3E6C9) 3px, transparent 4px) center / 10px 14px repeat-y !important;
  pointer-events: none !important;
}

html body main.wrap .ticket.proto-ticket-stage .pack-line::before,
html body main.wrap .ticket.proto-ticket-stage .ingredient-row::before { left: -5px !important; }
html body main.wrap .ticket.proto-ticket-stage .pack-line::after,
html body main.wrap .ticket.proto-ticket-stage .ingredient-row::after { right: -5px !important; }

html body main.wrap .ticket.proto-ticket-stage .ing-ticket-main { min-width: 0 !important; }
html body main.wrap .ticket.proto-ticket-stage .ing-name {
  width: 100% !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--grease, #c99a24) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

html body main.wrap .ticket.proto-ticket-stage .ing-used {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

html body main.wrap .ticket.proto-ticket-stage .stepper-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  border: 2px solid var(--ink, #1a140c) !important;
  border-radius: 50% !important;
  background: var(--paper-inner, #F7EDD6) !important;
}

html body main.wrap .ticket.proto-ticket-stage .ing-ticket-cost {
  min-width: 0 !important;
  width: 100% !important;
  align-self: center !important;
}

html body main.wrap .ticket.proto-ticket-stage .ticket-stub-box {
  border-left: 2px dashed var(--ink, #1a140c) !important;
  padding-left: 12px !important;
}

html body main.wrap .ticket.proto-ticket-stage .stub-inner {
  border: 2px solid var(--grease, #c99a24) !important;
  padding: 9px 6px !important;
  text-align: center !important;
  background: transparent !important;
}

html body main.wrap .ticket.proto-ticket-stage .stub-label {
  display: block !important;
  font-size: .65rem !important;
  font-weight: 900 !important;
}

html body main.wrap .ticket.proto-ticket-stage .stub-val {
  display: block !important;
  font-size: clamp(1.2rem, 3vw, 2rem) !important;
  white-space: nowrap !important;
}

html body main.wrap .ticket.proto-ticket-stage .proto-add-ingredient-btn {
  width: 100% !important;
  min-height: 64px !important;
  margin: 12px 0 !important;
  border: 3px dashed var(--ink, #1a140c) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body main.wrap .ticket.proto-ticket-stage .pack-remove {
  position: absolute !important;
  right: -8px !important;
  top: -10px !important;
  z-index: 3 !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #b62e25 !important;
  color: #fff !important;
}

@media (max-width: 700px) {
  html body main.wrap .ticket.proto-ticket-stage .proto-cards-row,
  html body main.wrap .ticket.proto-ticket-stage .live-stubs {
    grid-template-columns: 1fr !important;
  }

  html body main.wrap .ticket.proto-ticket-stage .proto-card {
    min-height: 84px !important;
    transform: none !important;
  }

  html body main.wrap .ticket.proto-ticket-stage .proto-pack-lines .pack-line,
  html body main.wrap .ticket.proto-ticket-stage .proto-pack-lines .ingredient-row,
  html body main.wrap .ticket.proto-ticket-stage .pack-lines .pack-line,
  html body main.wrap .ticket.proto-ticket-stage .pack-lines .ingredient-row {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 12px 8px !important;
  }

  html body main.wrap .ticket.proto-ticket-stage .ing-ticket-cost {
    grid-column: 2 !important;
  }

  html body main.wrap .ticket.proto-ticket-stage .ticket-stub-box {
    border-left: 0 !important;
    border-top: 2px dashed var(--ink, #1a140c) !important;
    padding: 8px 0 0 !important;
  }

  html body main.wrap .ticket.proto-ticket-stage .stub-inner {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html body main.wrap .ticket.proto-ticket-stage .stub-star { display: none !important; }
}

/* Prevent the shell from clipping wide ticket content on mobile. */
html,
body,
main.wrap {
  max-width: 100% !important;
  min-width: 0 !important;
}

body { overflow-x: hidden !important; }