/* ==========================================================================
   portion-cost.css — /how-to-cost-a-restaurant-menu-item.html
   Added 2026-09-06.

   SHARED SHELL. This page also links assets/css/menu-engineering.css, which
   holds the estate's article shell: .mg-wrap, .mg-hero, .mg-body, .mg-fig,
   .mg-band, .mg-note, .mg-toc, .mg-formula, .mg-eq, .mg-splitbar, .mg-steps,
   .mg-cta, .mg-btn, .mg-faq, .mg-sources and the motion layer. The equation
   cards, the split bar and the step rail are reused from there rather than
   rewritten, so this file only carries what is genuinely new to this guide.

   TOKENS. Nothing invented. Every value is already on the estate:
     gold      #E1B168  #9a6b12  #B08A55  #D4A656  #F4E6CB
     ink       #1F2937  #111827  #374151  #4B5563  #6b7280  #9CA3AF
     surfaces  #FBF7F0  #F9FAFB  #F3F4F6  #fff
     rules     #E5E7EB  #E9DCC5  #D1D5DB
     type      'Playfair Display' headings, 'Montserrat' body
     radius    6px 8px 10px 50% 999px
     easing    cubic-bezier(0.22,1,0.36,1)

   NO-JS FLOOR. Every start state is scoped under .motion-on, added by script
   only after it confirms the reader has not asked for reduced motion. With
   JavaScript off nothing is ever hidden; every figure is already final.
   ========================================================================== */

/* ---------- 1. pack-to-plate process flow ---------- */

.pc-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: 1fr; counter-reset: pcstep; }
@media (min-width: 620px) { .pc-flow { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .pc-flow { grid-template-columns: repeat(4, 1fr); } }
.pc-flow li {
  counter-increment: pcstep; position: relative; margin: 0;
  border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB;
  padding: 0.75rem 0.875rem 0.75rem 2.5rem; font-size: 0.875rem; line-height: 1.45; color: #1F2937;
}
.pc-flow li::before {
  content: counter(pcstep); position: absolute; left: 0.7rem; top: 0.7rem;
  width: 22px; height: 22px; border-radius: 50%; background: #1F2937; color: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 0.6875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pc-flow li.is-last { background: #FBF7F0; border-color: #E1B168; }
.pc-flow li.is-last::before { background: #9a6b12; }
.pc-flow b { display: block; font-weight: 600; }
.pc-flow span { display: block; font-size: 0.75rem; color: #6b7280; margin-top: 2px; }
.motion-on .pc-flow li { opacity: 0; transform: translateY(8px); }
.motion-on .mg-fig-in .pc-flow li { opacity: 1; transform: none; transition: opacity 400ms cubic-bezier(0.22,1,0.36,1), transform 400ms cubic-bezier(0.22,1,0.36,1); }
.motion-on .mg-fig-in .pc-flow li:nth-child(1) { transition-delay: 80ms; }
.motion-on .mg-fig-in .pc-flow li:nth-child(2) { transition-delay: 200ms; }
.motion-on .mg-fig-in .pc-flow li:nth-child(3) { transition-delay: 320ms; }
.motion-on .mg-fig-in .pc-flow li:nth-child(4) { transition-delay: 440ms; }
.motion-on .mg-fig-in .pc-flow li:nth-child(5) { transition-delay: 560ms; }
.motion-on .mg-fig-in .pc-flow li:nth-child(6) { transition-delay: 680ms; }
.motion-on .mg-fig-in .pc-flow li:nth-child(7) { transition-delay: 800ms; }

/* ---------- 2. yield ---------- */

.pc-yield { display: grid; gap: 0.75rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 640px) { .pc-yield { grid-template-columns: 1fr auto 1fr auto 0.9fr; } }
.pc-box { border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; padding: 0.875rem; text-align: center; }
.pc-box.is-result { background: #FBF7F0; border-color: #E1B168; }
.pc-box .pc-label { display: block; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; margin-bottom: 0.25rem; }
.pc-box .pc-val { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; color: #111827; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pc-op { text-align: center; font-size: 1.25rem; color: #9a6b12; font-weight: 600; line-height: 1; }
/* Height reserved by the border-box, so the fill cannot shift anything. */
.pc-bar { height: 26px; border-radius: 6px; border: 1px solid #E5E7EB; background: #F3F4F6; overflow: hidden; margin-top: 0.6rem; display: flex; }
.pc-bar .pc-use { background: #1F2937; height: 100%; }
.pc-bar .pc-trim { background: #B08A55; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.28) 0 5px, transparent 5px 10px); height: 100%; }
.pc-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; list-style: none; margin: 0.55rem 0 0; padding: 0; font-size: 0.8125rem; color: #374151; }
.pc-key li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.pc-swatch { width: 13px; height: 13px; border-radius: 3px; flex: 0 0 13px; border: 1px solid rgba(0,0,0,0.12); }
.pc-swatch.pc-use { background: #1F2937; }
.pc-swatch.pc-trim { background: #B08A55; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.35) 0 4px, transparent 4px 8px); }
.pc-sum { margin: 0.875rem 0 0; padding: 0.75rem 0.875rem; border: 1px solid #E9DCC5; background: #FBF7F0; border-radius: 8px; text-align: center; font-family: 'Playfair Display', Georgia, serif; font-size: 1.0625rem; color: #111827; line-height: 1.6; }
.pc-sum span { display: block; }
.motion-on .pc-bar .pc-use, .motion-on .pc-bar .pc-trim { width: 0 !important; }
.motion-on .mg-fig-in .pc-bar .pc-use, .motion-on .mg-fig-in .pc-bar .pc-trim { width: var(--mg-w) !important; transition: width 850ms cubic-bezier(0.22,1,0.36,1) 250ms; }
.motion-on .pc-sum { opacity: 0; }
.motion-on .mg-fig-in .pc-sum { opacity: 1; transition: opacity 460ms ease 1150ms; }

/* ---------- 3. component cost build ---------- */

.pc-build { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pc-build { grid-template-columns: 1.15fr 0.85fr; align-items: start; } }
.pc-lines { list-style: none; margin: 0; padding: 0; border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; }
.pc-lines li { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 0.65rem 0.875rem; border-bottom: 1px solid #F3F4F6; font-size: 0.9375rem; color: #374151; background: #fff; }
.pc-lines li:last-child { border-bottom: 0; }
.pc-lines b { color: #111827; font-variant-numeric: tabular-nums; font-weight: 600; }
.pc-total { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin: 0.75rem 0 0; padding: 0.875rem; border: 1px solid #E1B168; background: #FBF7F0; border-radius: 8px; }
.pc-total span { font-size: 0.8125rem; color: #4B5563; }
.pc-total b { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; color: #111827; font-variant-numeric: tabular-nums; }
.pc-channel { border: 1px solid #E5E7EB; border-radius: 8px; background: #F9FAFB; padding: 0.875rem; }
.pc-channel h4 { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #9a6b12; margin: 0 0 0.6rem; }
.pc-channel .pc-lines { border-radius: 6px; }
.motion-on .pc-lines li { opacity: 0; transform: translateX(-6px); }
.motion-on .mg-fig-in .pc-lines li { opacity: 1; transform: none; transition: opacity 380ms cubic-bezier(0.22,1,0.36,1), transform 380ms cubic-bezier(0.22,1,0.36,1); }
.motion-on .mg-fig-in .pc-lines li:nth-child(1) { transition-delay: 100ms; }
.motion-on .mg-fig-in .pc-lines li:nth-child(2) { transition-delay: 220ms; }
.motion-on .mg-fig-in .pc-lines li:nth-child(3) { transition-delay: 340ms; }
.motion-on .mg-fig-in .pc-lines li:nth-child(4) { transition-delay: 460ms; }
.motion-on .mg-fig-in .pc-lines li:nth-child(5) { transition-delay: 580ms; }
.motion-on .pc-total, .motion-on .pc-channel { opacity: 0; transform: translateY(8px); }
.motion-on .mg-fig-in .pc-total { opacity: 1; transform: none; transition: opacity 460ms ease 760ms, transform 460ms cubic-bezier(0.22,1,0.36,1) 760ms; }
.motion-on .mg-fig-in .pc-channel { opacity: 1; transform: none; transition: opacity 460ms ease 1000ms, transform 460ms cubic-bezier(0.22,1,0.36,1) 1000ms; }

/* ---------- 4. batch divided into portions ---------- */

.pc-portions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.875rem 0 0; padding: 0; list-style: none; }
.pc-portions li {
  flex: 0 0 auto; width: 38px; height: 38px; margin: 0; border-radius: 6px;
  border: 1px solid #E1B168; background: #FBF7F0; color: #7a5405;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.motion-on .pc-portions li { opacity: 0; transform: scale(0.8); }
.motion-on .mg-fig-in .pc-portions li { opacity: 1; transform: none; transition: opacity 260ms ease, transform 300ms cubic-bezier(0.22,1,0.36,1); }
.motion-on .mg-fig-in .pc-portions li:nth-child(1){transition-delay:340ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(2){transition-delay:400ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(3){transition-delay:460ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(4){transition-delay:520ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(5){transition-delay:580ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(6){transition-delay:640ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(7){transition-delay:700ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(8){transition-delay:760ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(9){transition-delay:820ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(10){transition-delay:880ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(11){transition-delay:940ms}
.motion-on .mg-fig-in .pc-portions li:nth-child(12){transition-delay:1000ms}

/* ---------- 5. portion drift ---------- */

.pc-drift { margin: 0; }
.pc-driftrow { display: grid; grid-template-columns: minmax(104px, 34%) 1fr auto; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.pc-driftrow dt { font-size: 0.875rem; color: #374151; }
.pc-driftrow dd { margin: 0; }
.pc-drifttrack { height: 24px; background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 5px; overflow: hidden; }
.pc-driftfill { height: 100%; background: #1F2937; }
.pc-driftrow.is-over .pc-driftfill { background: #B08A55; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.26) 0 5px, transparent 5px 10px); }
.pc-driftnum { font-size: 0.875rem; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-diff { margin: 0.75rem 0 0; padding: 0.7rem 0.875rem; border: 1px solid #E9DCC5; background: #FBF7F0; border-radius: 8px; font-size: 0.9375rem; color: #111827; text-align: center; }
.pc-diff b { font-variant-numeric: tabular-nums; }
.motion-on .pc-driftfill { width: 0 !important; }
.motion-on .mg-fig-in .pc-driftfill { width: var(--mg-w) !important; transition: width 800ms cubic-bezier(0.22,1,0.36,1) 200ms; }
.motion-on .pc-diff { opacity: 0; }
.motion-on .mg-fig-in .pc-diff { opacity: 1; transition: opacity 460ms ease 1080ms; }

/* ---------- 6. food-cost percentage gauge beside the split ---------- */

.pc-pct { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.875rem; }
.pc-pct svg { flex: 0 0 58px; }
.pc-ring-track { stroke: #E5E7EB; }
.pc-ring-val { stroke: #B08A55; stroke-linecap: round; }
.pc-pct-txt { font-size: 0.8125rem; color: #374151; line-height: 1.45; }
.pc-pct-txt b { display: block; font-size: 1.05rem; color: #111827; font-variant-numeric: tabular-nums; }
.motion-on .pc-ring-val { stroke-dashoffset: var(--mg-circ); }
.motion-on .mg-fig-in .pc-ring-val { stroke-dashoffset: var(--mg-off); transition: stroke-dashoffset 850ms cubic-bezier(0.22,1,0.36,1) 400ms; }

/* ---------- 7. two routines (vertical rails at every width) ---------- */

.pc-routines { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pc-routines { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.pc-routine h4 {
  font-family: 'Montserrat', sans-serif; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #9a6b12; margin: 0 0 0.875rem;
}
.pc-routine .mg-steps { display: block !important; }
.pc-routine .mg-steps li { padding: 0 0 1.05rem 3rem !important; }
.pc-routine .mg-steps li::before { top: 0; left: 0; width: 30px; height: 30px; font-size: 0.8125rem; }
.pc-routine .mg-steps li::after { left: 14px !important; top: 30px !important; bottom: 0 !important; right: auto !important; width: 2px !important; height: auto !important; }
.pc-routine .mg-steps .mg-ico { position: static; display: block; width: 20px; height: 20px; margin-bottom: 0.35rem; }
.pc-routine .mg-steps b { font-size: 0.9375rem; }
.pc-routine .mg-steps span { font-size: 0.8125rem; }

/* ---------- shared: illustrative-figures flag ---------- */

.pc-illus { font-size: 0.75rem; color: #6b7280; line-height: 1.6; margin: 0.75rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .motion-on .pc-flow li,
  .motion-on .pc-lines li,
  .motion-on .pc-total,
  .motion-on .pc-channel,
  .motion-on .pc-portions li,
  .motion-on .pc-sum,
  .motion-on .pc-diff { opacity: 1 !important; transform: none !important; }
  .motion-on .pc-bar .pc-use,
  .motion-on .pc-bar .pc-trim,
  .motion-on .pc-driftfill { width: var(--mg-w) !important; }
  .motion-on .pc-ring-val { stroke-dashoffset: var(--mg-off) !important; }
}
@media print {
  .pc-flow li, .pc-lines li, .pc-total, .pc-channel, .pc-portions li { opacity: 1 !important; transform: none !important; }
}