/* ==========================================================
   Plate Cost tool — builds on the Modern Bistro tokens in
   bistro.css (cream, espresso, terracotta, sage, saffron).
   ========================================================== */

.pc {
  --pc-card: #ffffff;
  --pc-line: var(--m2w-cream-deep, #E8DDC6);
  --pc-ok: var(--m2w-sage, #6B7F4E);
  --pc-warn: var(--m2w-terracotta, #C2542D);
  --pc-muted: #7a6e60;
  --pc-radius: 16px;
}

/* ---------- Intro ---------- */
.pc-hero { padding-bottom: 3rem; }
.pc-hero h1 em { font-style: italic; color: var(--m2w-terracotta); }
.pc-why-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--m2w-saffron-soft); color: var(--m2w-espresso);
  font-size: 1.25rem; margin-bottom: 1rem;
}

/* The "kitchen ticket" illustration */
.pc-ticket {
  position: relative;
  background: #fffdf8;
  border: 1px solid var(--pc-line);
  border-radius: 6px;
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 18px 40px rgba(43, 33, 24, 0.12);
  font-variant-numeric: tabular-nums;
  transform: rotate(1.2deg);
  max-width: 420px;
  margin-left: auto;
}
.pc-ticket::before,
.pc-ticket::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background: radial-gradient(circle at 6px -2px, transparent 6px, #fffdf8 6.5px) repeat-x;
  background-size: 12px 10px;
}
.pc-ticket::before { top: -9px; transform: rotate(180deg); }
.pc-ticket::after { bottom: -9px; }
.pc-ticket__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--bs-heading-font-family); font-size: 1.25rem; font-weight: 600;
  border-bottom: 2px dashed var(--pc-line); padding-bottom: 0.75rem; margin-bottom: 0.5rem;
}
.pc-ticket__price { color: var(--m2w-terracotta); }
.pc-ticket__lines { list-style: none; padding: 0; margin: 0 0 0.75rem; font-size: 0.92rem; }
.pc-ticket__lines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; color: var(--m2w-espresso-2); }
.pc-ticket__lines small { color: var(--pc-muted); margin-left: 0.35rem; }
.pc-ticket__total {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
  border-top: 2px dashed var(--pc-line); padding-top: 0.75rem;
}
.pc-ticket__total small { display: block; color: var(--pc-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.pc-ticket__total strong { font-size: 1.15rem; }
.pc-ticket__stamp {
  position: absolute; right: -0.75rem; top: -1rem; background: #fffdf8;
  border: 2px solid var(--pc-ok); color: var(--pc-ok);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem;
  padding: 0.2rem 0.55rem; border-radius: 4px; transform: rotate(-8deg); opacity: 0.85;
}

/* ---------- App shell ---------- */
.pc-app-wrap { padding: 2.5rem 0 4rem; }
.pc-app {
  background: var(--pc-card);
  border: 1px solid var(--pc-line);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  box-shadow: 0 12px 36px rgba(43, 33, 24, 0.06);
}
.pc .pc-steps {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  list-style: none; padding: 0 0 1.25rem; margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--pc-line);
  font-size: 0.92rem; color: var(--pc-muted);
}
.pc-steps li { display: inline-flex; align-items: center; gap: 0.5rem; }
.pc-steps span {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--pc-line); font-weight: 700; font-size: 0.8rem;
}
.pc-steps li.is-current { color: var(--m2w-espresso); font-weight: 600; }
.pc-steps li.is-current span { background: var(--m2w-terracotta); border-color: var(--m2w-terracotta); color: var(--m2w-cream); }
.pc-steps li.is-done span { background: var(--m2w-sage-soft); border-color: var(--m2w-sage-soft); color: var(--m2w-espresso); }

.pc-progress { height: 4px; background: var(--m2w-cream-soft); border-radius: 4px; overflow: hidden; margin-bottom: 1.75rem; }
.pc-progress__bar { height: 100%; width: 0; background: var(--m2w-terracotta); transition: width 0.3s ease; }

.pc-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.pc-back { color: var(--m2w-espresso-2); text-decoration: none; padding-left: 0; }

/* ---------- Intake questions ---------- */
.pc-q { border: 0; padding: 0; margin: 0; min-width: 0; }
.pc-q__title {
  font-family: var(--bs-heading-font-family);
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; line-height: 1.2;
  margin-bottom: 0.5rem; float: none; width: 100%;
}
.pc-q__why { color: var(--pc-muted); margin-bottom: 1.25rem; }
#pc-question:focus { outline: none; }

.pc-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; }
.pc-choices--compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; }
.pc-choice { position: relative; }
.pc-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pc-choice label {
  display: flex; align-items: center; min-height: 64px; height: 100%;
  padding: 0.85rem 1rem 0.85rem 2.75rem; position: relative;
  border: 1.5px solid var(--pc-line); border-radius: 12px; background: var(--m2w-cream);
  cursor: pointer; font-weight: 500; transition: border-color 0.15s ease, background 0.15s ease;
}
.pc-choices--compact .pc-choice label { min-height: 48px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.pc-choice label::before {
  content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pc-line); background: #fff;
}
.pc-choice input:hover + label { border-color: var(--m2w-terracotta); }
.pc-choice input:checked + label { border-color: var(--m2w-terracotta); background: #fff7f2; }
.pc-choice input:checked + label::before { border-color: var(--m2w-terracotta); background: radial-gradient(circle, var(--m2w-terracotta) 45%, #fff 50%); }
.pc-choice input:focus-visible + label { outline: 3px solid var(--m2w-saffron); outline-offset: 2px; }

/* ---------- Workbook + upload ---------- */
.pc-sheet-guide { margin-top: 0.5rem; }
.pc-sheet-guide summary { cursor: pointer; font-weight: 600; }
.pc-sheet-guide li { padding: 0.35rem 0; border-bottom: 1px dashed var(--pc-line); font-size: 0.92rem; }

.pc-upload {
  background: var(--m2w-cream); border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius); padding: 1.5rem;
}
.pc-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 150px; padding: 1.25rem; text-align: center; cursor: pointer;
  border: 2px dashed var(--m2w-cream-deep); border-radius: 14px; background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pc-drop i { font-size: 2rem; color: var(--m2w-terracotta); }
.pc-drop.is-over { border-color: var(--m2w-terracotta); background: #fff7f2; }
.pc-drop.has-file { border-style: solid; border-color: var(--pc-ok); }
.pc-drop__file { font-weight: 600; color: var(--pc-ok); }
.pc-drop:focus-within { outline: 3px solid var(--m2w-saffron); outline-offset: 2px; }
.pc-lead { border: 0; padding: 0; margin-top: 1.25rem; }

/* ---------- Clarifying questions ---------- */
.pc-cq {
  border: 1px solid var(--pc-line); border-radius: 14px; background: var(--m2w-cream);
  padding: 1.1rem 1.25rem; margin: 0 0 0.85rem; min-width: 0;
}
.pc-cq.is-skipped { opacity: 0.6; }
.pc-cq__q { font-weight: 600; font-size: 1.05rem; margin: 0 0 0.25rem; color: var(--m2w-espresso); }
.pc-cq__where { font-size: 0.8rem; color: var(--pc-muted); margin-bottom: 0.75rem; }
.pc-cq__inputs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pc-cq__inputs .pc-value { max-width: 140px; }
.pc-cq__inputs .pc-unit { max-width: 140px; }
.pc-narrow { max-width: 220px; }
.pc-cq__inputs .pc-choices { width: 100%; }
.pc-cq__help { font-size: 0.88rem; color: var(--pc-muted); margin: 0.6rem 0 0; }
.pc-cq__suggested { font-size: 0.82rem; color: var(--pc-ok); margin-top: 0.5rem; }
.pc-cq__error { font-size: 0.85rem; color: var(--m2w-terracotta-dark); margin-top: 0.5rem; font-weight: 600; }

/* ---------- Results ---------- */
.pc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; }
.pc-kpi {
  display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--m2w-cream); border: 1px solid var(--pc-line); border-radius: 14px;
  padding: 1rem 1.1rem; border-top: 4px solid var(--pc-line);
}
.pc-kpi--ok { border-top-color: var(--pc-ok); }
.pc-kpi--warn { border-top-color: var(--pc-warn); }
.pc-kpi__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pc-muted); }
.pc-kpi__value { font-family: var(--bs-heading-font-family); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pc-kpi__note { font-size: 0.82rem; color: var(--pc-muted); }

.pc-insights { padding-left: 1.2rem; }
.pc-insights li { padding: 0.35rem 0; }
.pc-next { background: #fff7f2; border-radius: 12px; padding: 0.85rem 1rem; }
.pc-next:empty { display: none; }

.pc-whatif { background: var(--m2w-cream); border: 1px solid var(--pc-line); border-radius: var(--pc-radius); padding: 1.25rem; }
.pc-whatif-table { font-size: 0.88rem; margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; }

.pc-table-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin: 2rem 0 0.75rem; }
.pc-table { font-variant-numeric: tabular-nums; }
.pc-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pc-muted); cursor: pointer; white-space: nowrap; user-select: none; }
.pc-table thead th[aria-sort="ascending"]::after { content: " ▲"; }
.pc-table thead th[aria-sort="descending"]::after { content: " ▼"; }
.pc-table th[scope="row"] { font-weight: 500; }
.pc-dish-toggle { background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; }
.pc-dish-toggle i { transition: transform 0.15s ease; display: inline-block; color: var(--pc-muted); }
.pc-dish-toggle[aria-expanded="true"] i { transform: rotate(90deg); }
.pc-detail td { background: var(--m2w-cream); }
.pc-lines { list-style: none; padding: 0 0 0 1.4rem; margin: 0; max-width: 560px; font-size: 0.9rem; }
.pc-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; border-bottom: 1px dashed var(--pc-line); }
.pc-over { color: var(--m2w-terracotta-dark); font-weight: 700; }
.pc-raise { color: var(--m2w-terracotta-dark); font-weight: 600; }

.pc-pill { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.pc-pill--ok { background: #e7eddc; color: #3f4d2c; }
.pc-pill--warn { background: #f8dfd4; color: var(--m2w-terracotta-dark); }
.pc-pill--muted { background: var(--m2w-cream-soft); color: var(--pc-muted); }
.pc-class { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.45rem; border-radius: 6px; border: 1px solid var(--pc-line); color: var(--pc-muted); }
.pc-class--star { border-color: var(--m2w-saffron); color: #8a6214; }
.pc-class--plowhorse { border-color: var(--m2w-sage); color: #3f4d2c; }

.pc-warnings { margin-top: 1rem; font-size: 0.9rem; }
.pc-warnings summary { cursor: pointer; color: var(--pc-muted); }

.pc-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.5rem; padding: 1.5rem; border-radius: var(--pc-radius);
  background: var(--m2w-espresso); color: var(--m2w-cream);
}
.pc-cta h3, .pc-cta p { color: var(--m2w-cream); }
.pc-cta p { opacity: 0.85; max-width: 560px; }

.pc-faq { background: #fff; padding-top: 4rem; }

@media (max-width: 575.98px) {
  .pc-ticket { transform: none; margin: 0 auto; }
  .pc-steps { gap: 0.4rem 1rem; font-size: 0.82rem; }
  .pc-kpi__value { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-progress__bar, .pc-choice label, .pc-dish-toggle i { transition: none; }
  .pc-ticket { transform: none; }
}