/* Food Cost page demos (/js/foodcost-demo.js). Every class here is prefixed fc-.
   Tokens and shared parts (.frame, .button, .status, .pill, .notice) come from /styles.css.
   Layout responds to the demo's own width through a container query, so the demos
   work wherever the page places them. */

.fc-app { container: fc-app / inline-size; font-size: 13px; line-height: 1.45; color: var(--ink); text-align: left; }
.fc-app [hidden] { display: none !important; }
.fc-app p { line-height: 1.45; }
.fc-app small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.fc-muted { color: var(--muted); }
.fc-none { color: var(--muted); }
.fc-hint { font-size: 12px; color: var(--muted); }
.fc-fine { font-size: 11.5px; color: var(--muted); }
.fc-kicker { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fc-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.fc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fc-app [tabindex="-1"]:focus { outline: none; }

/* Header strip, app head, steps */

.fc-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px 6px 16px; background: var(--band); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.fc-reset { flex: none; min-height: 30px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--panel); font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color var(--dur-2); }
.fc-reset:hover { border-color: #b9c6bf; }
.fc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); }
.fc-title { font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.fc-sub { margin-top: 2px; font-size: 12px; color: var(--muted); }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.fc-steps { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.fc-steps li { display: inline-flex; align-items: center; gap: 7px; }
.fc-step-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--panel); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fc-steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.fc-steps li[aria-current="step"] .fc-step-n { background: var(--green); border-color: var(--green); color: #fff; }
.fc-steps li.fc-done .fc-step-n { background: var(--tint); border-color: var(--tint); color: var(--green-ink); }

/* Controls sized for a dense app panel */

.fc-app .fc-btn { min-height: 38px; padding: 7px 14px; gap: 8px; font-size: 13.5px; }
.fc-app .fc-btn-s { min-height: 32px; padding: 5px 11px; font-size: 12.5px; }
.fc-app .fc-btn .icon { width: 16px; height: 16px; }
.fc-app .button:disabled { background: var(--sunken); border-color: var(--line); color: var(--muted); cursor: not-allowed; transform: none; }
.fc-wide { width: 100%; }

.fc-input { display: block; width: 100%; min-height: 64px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); font: 13.5px/1.5 var(--font); color: var(--ink); resize: vertical; transition: border-color var(--dur-2); }
.fc-input:focus { border-color: var(--green); }
.fc-input:focus-visible { outline-offset: 2px; }
.fc-input[readonly] { background: var(--band); color: var(--ink-2); }
.fc-input::placeholder { color: var(--muted); }

/* Demo 1 · recipe editor */

.fc-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.fc-main { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 16px 18px 18px; }
.fc-cost { display: grid; align-content: start; gap: 18px; padding: 16px 18px 18px; border-left: 1px solid var(--line); background: #fcfdfc; }

.fc-recdot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
.fc-recdot.fc-is-paused { background: var(--disabled); }
.button.primary .fc-recdot { box-shadow: 0 0 0 2px #fff; }
.fc-recbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 7px 8px 7px 12px; border: 1px solid #f0d4d1; border-radius: var(--r); background: #fffbfa; }
.fc-rectime { margin-right: auto; font-size: 13px; color: var(--ink-2); }
.fc-rectime b { font-weight: 600; font-variant-numeric: tabular-nums; }
.fc-working { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font-size: 13px; color: var(--secondary); }
.fc-spin { width: 14px; height: 14px; flex: none; border: 2px solid var(--line-strong); border-top-color: var(--green); border-radius: 50%; animation: fc-spin 700ms linear infinite; }
@keyframes fc-spin { to { transform: rotate(360deg); } }

.fc-tx { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--band); }
.fc-tx .fc-label { margin-bottom: -4px; }

.fc-draft { display: grid; gap: 8px; }
.fc-draft-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.fc-draft-head .fc-label { margin-bottom: 0; }

/* Tables (shared by both demos) */

.fc-tablewrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.fc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fc-table th { font-weight: 600; text-align: left; }
.fc-table thead th { padding: 7px 8px; background: var(--band); border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.fc-table td, .fc-table tbody th { padding: 9px 8px; border-bottom: 1px solid var(--line-faint); vertical-align: top; }
.fc-table tbody tr:last-child > * { border-bottom: 0; }
.fc-table tr > :first-child { padding-left: 12px; }
.fc-table tr > :last-child { padding-right: 12px; }
.fc-table .fc-c-qty, .fc-table .fc-c-cost { text-align: right; white-space: nowrap; }
.fc-c-cost { font-weight: 600; }
.fc-c-src { color: var(--secondary); }
.fc-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--r-xs); background: var(--sunken); font-size: 11px; font-weight: 600; line-height: 18px; color: var(--secondary); white-space: nowrap; }
.fc-est > * { background: #fffdf7; }

.fc-table tr.fc-q > td { padding: 0; border-bottom: 1px solid var(--line-faint); }
.fc-qbox { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-left: 2px solid var(--amber-dot); background: #fffdf7; color: var(--ink-2); }
.fc-qbox .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--amber); }
.fc-qbox .fc-row { margin-top: 8px; }
.fc-matchnote { margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--blue-dot); border-radius: var(--r-s); background: #f8fbfe; font-size: 12px; color: var(--ink-2); }

/* Cost panel */

.fc-big { margin-top: 4px; font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fc-big + .fc-fine { margin-top: 4px; }
.fc-pricerow { display: flex; align-items: flex-start; gap: 10px; }
.fc-rangewrap { flex: 1; min-width: 0; }
.fc-range { display: block; width: 100%; height: 28px; margin: 0; accent-color: var(--green); cursor: pointer; }
.fc-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-money { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--panel); font-size: 13.5px; color: var(--muted); }
.fc-money:focus-within { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 2px; }
.fc-num { width: 56px; padding: 0; border: 0; background: transparent; font: 600 13.5px var(--font); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.fc-num:focus-visible { outline: none; }
.fc-num::-webkit-outer-spin-button, .fc-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.fc-metrics { display: grid; gap: 6px; }
.fc-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--secondary); }
.fc-metric b { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fc-bar { position: relative; height: 7px; margin-top: 6px; border-radius: 4px; background: #f2f5f3; box-shadow: inset 0 0 0 1px var(--line-faint); }
.fc-bar-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--green-bar); transition: width var(--dur-3) var(--ease-out), background-color var(--dur-2); }
.fc-bar.fc-is-over .fc-bar-fill { background: var(--amber-dot); }
.fc-bar-target { position: absolute; top: -4px; bottom: -4px; left: 30%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); }
.fc-bar-label { position: relative; height: 16px; font-size: 11px; color: var(--secondary); }
.fc-bar-label span { position: absolute; left: 30%; transform: translateX(-50%); white-space: nowrap; }
.fc-over { font-size: 12px; font-weight: 600; color: var(--amber-ink); }
.fc-metrics .fc-fine { margin-top: -2px; }

.fc-donebox { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.fc-accepted { display: grid; gap: 8px; }
.fc-accepted .notice p { line-height: 1.45; }
.fc-estnote { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12px; color: var(--ink-2); }

.fc-notes { display: grid; gap: 4px; padding: 12px 18px 14px; border-top: 1px solid var(--line); background: var(--band); font-size: 12.5px; color: var(--secondary); }
.fc-notes p { max-width: 860px; line-height: 1.5; }
.fc-notes strong { color: var(--ink); }

/* Demo 2 · invoice photo and review */

.pill.fc-warn { background: var(--amber-tint); color: var(--amber-ink); }
.pill.fc-warn::before { background: var(--amber-dot); }
.fc-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fc-trail li { display: inline-flex; align-items: center; gap: 6px; }
.fc-trail li + li::before { content: ""; width: 10px; height: 1px; background: var(--line-strong); }
.fc-trail .fc-past .pill { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.fc-trail .fc-past .pill::before { background: var(--disabled); }

.fc-inv-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fc-photo-col { display: grid; align-content: start; gap: 10px; padding: 20px; border-right: 1px solid var(--line); background: #e9edea; }
.fc-photo { position: relative; }
.fc-paper { margin: 0; padding: 18px 18px 14px; border: 1px solid #e2dfd3; border-radius: 2px; background: #fdfcf7; box-shadow: 0 1px 2px rgba(13, 31, 26, .08), 0 12px 24px -14px rgba(13, 31, 26, .35); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: #2b2b27; font-variant-numeric: tabular-nums; }
.fc-paper-top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed #cfccc0; }
.fc-paper-co { font-weight: 600; letter-spacing: .04em; }
.fc-paper-meta { text-align: right; }
.fc-paper-cols, .fc-paper-lines li { display: grid; grid-template-columns: 5.5ch minmax(0, 1fr) 4.5ch 7ch 7.5ch; gap: 0 8px; }
.fc-paper-cols { padding: 8px 4px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #77756b; }
.fc-paper-cols > :nth-child(n+3), .fc-paper-lines li > :nth-child(n+3) { text-align: right; }
.fc-paper-lines { border-bottom: 1px dashed #cfccc0; padding-bottom: 6px; }
.fc-paper-lines li { padding: 3px 4px; border-radius: 2px; transition: background-color var(--dur-2), box-shadow var(--dur-2); }
.fc-paper-lines li.fc-is-flagged { background: var(--amber-tint); box-shadow: inset 2px 0 0 var(--amber-dot); }
.fc-paper-lines li.fc-is-reading, .fc-paper-lines li.fc-is-linked { background: var(--blue-tint); box-shadow: inset 2px 0 0 var(--blue-dot); }
.fc-paper-total { display: flex; justify-content: space-between; padding: 8px 4px 0; font-weight: 600; font-size: 12.5px; }
.fc-paper-foot { padding: 10px 4px 0; font-size: 11px; color: #77756b; }

.fc-finder { position: absolute; inset: -9px; pointer-events: none; }
.fc-finder i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--ink-2); }
.fc-finder i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.fc-finder i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.fc-finder i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.fc-finder i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.fc-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.fc-flash.fc-is-on { animation: fc-flash 240ms var(--ease-out); }
@keyframes fc-flash { from { opacity: .92; } to { opacity: 0; } }
.fc-photo-cap { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12px; color: var(--secondary); }
.fc-photo-cap .icon { width: 15px; height: 15px; color: var(--muted); }

.fc-review { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 16px 18px 18px; }
.fc-start { display: grid; justify-items: start; gap: 10px; max-width: 460px; padding: 8px 0; }
.fc-start-title { font-size: 15px; font-weight: 600; }
.fc-start .fc-btn { margin-top: 4px; }
.fc-revhead .fc-label { margin-bottom: 2px; }

.fc-rev thead th:nth-child(1) { width: 31%; }
.fc-rev thead th:nth-child(2) { width: 21%; }
.fc-rev thead th:nth-child(3) { width: 23%; }
.fc-print { display: flex; gap: 8px; }
.fc-ln { flex: none; min-width: 12px; font-family: var(--mono); font-size: 11px; line-height: 19px; color: var(--muted); }
.fc-c-pack { color: var(--secondary); }
.fc-c-pack b { color: var(--ink); white-space: nowrap; }
.fc-ok { display: inline-flex; align-items: flex-start; gap: 5px; font-weight: 600; color: var(--green-ink); }
.fc-ok .icon { width: 15px; height: 15px; margin-top: 1px; color: var(--green); }
.fc-recon { white-space: nowrap; }
.fc-fee { color: var(--secondary); }
.fc-table tr.fc-has-q { background: #fffdf7; }
.fc-table .fc-has-q > * { border-bottom-color: transparent; }
.fc-table tfoot td { padding: 8px 12px; border-top: 1px solid var(--line); background: var(--band); font-size: 12px; }
.fc-approve { display: grid; justify-items: start; gap: 6px; }

.fc-result-wrap { padding: 16px 18px 18px; border-top: 1px solid var(--line); }
.fc-result { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.fc-result-head { padding: 11px 14px 12px; border-bottom: 1px solid var(--line); background: var(--wash); }
.fc-result-title { margin-top: 3px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fc-tablewrap.fc-flat { border: 0; border-radius: 0; }
.fc-c-dish small { font-weight: 400; }
.fc-c-chg { white-space: nowrap; }
.fc-before { color: var(--muted); }
.fc-over-row .fc-c-chg:nth-of-type(2) b { color: var(--amber-ink); }
.fc-result-notes { display: grid; gap: 5px; padding: 10px 14px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--secondary); }
.fc-result-notes li { display: flex; align-items: flex-start; gap: 7px; }
.fc-result-notes .icon { width: 15px; height: 15px; margin-top: 1px; color: var(--green); }

.fc-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 11px 18px 12px; border-top: 1px solid var(--line); background: var(--band); font-size: 12px; color: var(--secondary); }
.fc-facts li { display: inline-flex; align-items: flex-start; gap: 7px; }
.fc-facts .icon { width: 15px; height: 15px; margin-top: 1px; color: var(--green); }

/* Narrower demos: stack the side panels */

@container fc-app (max-width: 860px) {
  .fc-body, .fc-inv-body { grid-template-columns: minmax(0, 1fr); }
  .fc-cost { border-left: 0; border-top: 1px solid var(--line); }
  .fc-photo-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .fc-photo-col > * { width: 100%; max-width: 520px; margin-inline: auto; }
}

/* Phone width: tables reflow into compact rows, labels shrink */

@container fc-app (max-width: 560px) {
  .fc-strip { padding-left: 12px; font-size: 11.5px; }
  .fc-head, .fc-main, .fc-cost, .fc-review, .fc-result-wrap, .fc-notes, .fc-facts { padding-left: 14px; padding-right: 14px; }
  .fc-steps { gap: 6px 10px; padding: 9px 14px; }
  .fc-trail .fc-past, .fc-trail li + li::before { display: none; }
  .fc-steps li:not([aria-current]) .fc-step-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fc-photo-col { padding: 16px 14px; }
  .fc-paper { padding: 14px 12px 12px; font-size: 11px; }
  .fc-paper-cols { display: none; }
  .fc-paper-lines li { grid-template-columns: 5.5ch minmax(0, 1fr) auto auto; grid-template-areas: "code desc desc desc" ". qty price amt"; }
  .fc-p-code { grid-area: code; }
  .fc-p-desc { grid-area: desc; }
  .fc-p-qty { grid-area: qty; }
  .fc-p-price { grid-area: price; }
  .fc-p-amt { grid-area: amt; min-width: 7.5ch; }

  .fc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fc-table tbody tr { display: grid; column-gap: 10px; row-gap: 2px; padding: 9px 12px; border-bottom: 1px solid var(--line-faint); }
  .fc-table tbody tr:last-child { border-bottom: 0; }
  .fc-table tbody td, .fc-table tbody th, .fc-table tr > :first-child, .fc-table tr > :last-child { display: block; padding: 0; border: 0; }
  .fc-table tbody tr.fc-q, .fc-table tbody tr.fc-empty { display: block; padding: 0; }
  .fc-table tbody tr.fc-empty { padding: 9px 12px; }

  .fc-lines tbody tr { grid-template-columns: 22px 62px minmax(0, 1fr) auto; grid-template-areas: "qty unit name cost" "qty unit src src"; column-gap: 8px; }
  .fc-lines .fc-c-unit small { white-space: nowrap; }
  .fc-lines .fc-c-qty { grid-area: qty; font-weight: 600; text-align: left; }
  .fc-lines .fc-c-unit { grid-area: unit; }
  .fc-lines .fc-c-name { grid-area: name; font-weight: 600; }
  .fc-lines .fc-c-src { grid-area: src; font-size: 11.5px; }
  .fc-lines .fc-c-cost { grid-area: cost; }

  .fc-rev tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "print print" "match pack" "check check"; row-gap: 6px; }
  .fc-rev .fc-c-print { grid-area: print; font-weight: 600; }
  .fc-rev .fc-c-match { grid-area: match; }
  .fc-rev .fc-c-pack { grid-area: pack; }
  .fc-rev .fc-c-check { grid-area: check; }
  .fc-rev [data-label]::before, .fc-dishes [data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
  .fc-rev tr > .fc-c-check, .fc-rev tr > .fc-c-match, .fc-rev tr > .fc-c-pack { padding-left: 20px; }
  .fc-rev .fc-c-check { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  .fc-rev .fc-c-check small { margin-top: 0; }

  .fc-dishes tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "dish flag" "cost pct"; row-gap: 6px; }
  .fc-dishes .fc-c-dish { grid-area: dish; }
  .fc-dishes .fc-c-flag { grid-area: flag; justify-self: end; }
  .fc-dishes .fc-c-chg:nth-of-type(1) { grid-area: cost; }
  .fc-dishes .fc-c-chg:nth-of-type(2) { grid-area: pct; }
  .fc-big { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .fc-spin, .fc-flash.fc-is-on { animation: none; }
  .fc-bar-fill, .fc-paper-lines li, .fc-input, .fc-reset { transition: none; }
}