/* Recipes and allergens (fill-order part 2). Same cards, category colour edges and calm tints as part 1.
   Contains = red, may contain or not checked yet = amber, fine = green. */
/* one neat pill everywhere: slim, consistent height, label centred both ways (overrides the older demo pill in biz.css) */
.al-chip { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 24px; height: auto; margin: 0; padding: 2px 10px;
  border-radius: 99px; border: 1px solid; font-family: var(--sans); font-size: 13.5px; font-weight: 700; line-height: 1.15; letter-spacing: .01em; text-align: center; vertical-align: middle; white-space: normal; }
.al-chip.c { background: var(--res-red); border-color: var(--res-red-edge); color: #fff; }
.al-chip.m { background: var(--res-amber-bg); border-color: var(--res-amber-edge); color: var(--res-amber-ink); }
.al-chip.o { background: var(--field); border-color: var(--rule); color: var(--ink-2); font-weight: 600; }
.al-chip.ok { background: var(--ok-wash); border-color: var(--ok); color: var(--ok); }
.al-unchecked { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--res-amber-ink); }
.rb-tools { display: flex; gap: 8px; margin: 8px 0 12px; } .rb-tools .input { flex: 1; } .rb-tools .btn { flex: none; }
.rb-list .tu, .tu-list a.tu { align-items: center; }
.dish-head { margin: 6px 0 12px; padding-left: 12px; border-left: 6px solid var(--cat, var(--brand)); }
.dish-head h1 { margin: 2px 0 2px; font-size: 32px; line-height: 1.1; }
.al-note { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); }
.al-note.amber { background: var(--res-amber-bg); border: 1px solid var(--res-amber-edge); color: var(--res-amber-ink); border-radius: 8px; padding: 8px 10px; }
.more-coming { display: inline-block; margin-left: 6px; font-size: 10.5px; padding: 1px 7px; border-radius: 99px; border: 1px dashed var(--mute); color: var(--mute); letter-spacing: .08em; }
.dish-desc { margin: 0; font-size: 16px; }
.dish-method { margin: 0; padding-left: 22px; } .dish-method li { margin: 4px 0; }
.al-ticks { margin-top: 8px; }
.al-tick { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.al-tick > span { flex: 1; font-size: 14.5px; }
.rf-ing { display: grid; grid-template-columns: 1fr 88px 40px; gap: 6px; align-items: center; margin-bottom: 8px; }
.rf-g { position: relative; display: block; } .rf-g .input { padding-right: 24px; text-align: right; } .rf-g span { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--mute); font-size: 14px; }
.rf-al { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: -2px; } .rf-al:empty { display: none; }

/* allergen lookup grid: sticky dish column, 14 narrow columns, prints for the pass */
.alg-wrap { overflow-x: auto; margin: 10px -4px 8px; padding: 0 4px; -webkit-overflow-scrolling: touch; }
.alg { border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 100%; background: var(--card); }
.alg th, .alg td { border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.alg thead th { background: var(--field); position: sticky; top: 0; z-index: 1; }
.alg .alg-h { width: 26px; min-width: 26px; padding: 6px 0; vertical-align: bottom; }
.alg .alg-h span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--ink-2); display: inline-block; }
.alg .alg-dish { position: sticky; left: 0; z-index: 2; background: var(--card); text-align: left; min-width: 132px; max-width: 150px; padding: 7px 8px 7px 9px; font-weight: 600; border-left: 5px solid var(--cat, var(--rule)); line-height: 1.25; }
.alg thead .alg-dish { z-index: 3; background: var(--field); vertical-align: bottom; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); border-left-color: var(--rule); }
.alg .alg-dish a { color: var(--ink); text-decoration: none; display: block; }
.alg .alg-dish small { display: block; font-size: 11px; font-weight: 700; color: var(--res-amber-ink); } .alg .alg-dish small.ex { color: var(--mute); font-weight: 600; }
.alg td { text-align: center; font-weight: 800; font-size: 14px; padding: 0; height: 34px; }
.alg td.c { background: var(--res-red); color: #fff; }
.alg td.m { background: var(--res-amber-bg); color: var(--res-amber-ink); box-shadow: inset 0 0 0 1px var(--res-amber-edge); }
.alg tr.unchk .alg-dish { background: var(--res-amber-bg); }
.alg-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.alg-key .k { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; font-style: normal; font-weight: 800; font-size: 12px; vertical-align: -5px; margin-right: 4px; border: 1px solid var(--rule); }
.alg-key .k.c { background: var(--res-red); color: #fff; border-color: var(--res-red-edge); } .alg-key .k.m { background: var(--res-amber-bg); color: var(--res-amber-ink); border-color: var(--res-amber-edge); } .alg-key .k.u { background: var(--res-amber-bg); }
.print-only { display: none; }

/* guest allergy check: whole rows green, amber or red, like the whiteboard and temperatures */
.gs-box { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px; margin: 6px 0 12px; }
.gs-box .eyebrow { margin: 0 0 6px; }
.tu.res-safe { background: var(--ok-wash); border-color: var(--ok); border-left-color: var(--ok); }
.tu.res-safe .tu-range { color: var(--ok); }
.tu.res-red .tu-name { color: #fff; }
.why-sheet .why-head { border-top: 6px solid var(--res-red); border-radius: 18px 18px 0 0; }
.why-item { padding: 10px 0; border-bottom: 1px dashed var(--rule); } .why-item h3 { margin: 0; font-size: 18px; color: var(--res-red); }
.swap-list { list-style: none; margin: 0; padding: 0; } .swap-list li { padding: 8px 10px; border: 1px solid var(--ok); background: var(--ok-wash); border-radius: 8px; margin-top: 6px; }
.swap-list li span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.swap-list li.clash { border-color: var(--res-amber-edge); background: var(--res-amber-bg); } .swap-list .clash-note { color: var(--res-amber-ink) !important; font-weight: 700; }
.swap-row .tu-name { font-weight: 600; } .swap-arrow { color: var(--mute); }

/* Natasha's Law label, in the existing label shell */
.nat-labels { max-width: 420px; margin: 10px 0; }
.lbl-card.nat { padding: 14px 16px; } .lbl-card.nat > b { font-size: 21px; margin-bottom: 6px; }
.nat-ings { margin: 6px 0; font-size: 14.5px; line-height: 1.45; } .nat-ings b, .nat-may b { display: inline; font-size: inherit; font-weight: 800; }
.nat-lab { font-weight: 700; }
.nat-may, .nat-allergy { margin: 4px 0; font-size: 13.5px; } .nat-allergy b { display: inline; font-size: inherit; }

@media print {
  .topbar, .bottomnav, .no-print, .hidden-note, .chips, .alg-key + .btn-row, .tp-actions, .pv-banner, .toast, .sheet-wrap, .sw-update, .page-head, .head { display: none !important; }
  .print-only { display: block; } .print-title b { display: block; font-size: 16pt; } .print-title span { font-size: 10pt; }
  .alg-wrap { overflow: visible; margin: 6px 0; } .alg { font-size: 9.5pt; width: 100%; }
  .alg th, .alg td { border: 1px solid #555 !important; } .alg .alg-dish, .alg thead th { position: static; background: #fff !important; }
  .alg td.c { background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .alg td.m { background: #fff !important; box-shadow: none; }
  .alg a { color: #000; }
  .lbl-card.nat { border: 1px solid #000; }
  @page { margin: 10mm; }
}
.tu.res-red .tag { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; }

/* sending recipes in to me, and the calm line afterwards */
.send-card { padding: 14px; margin: 10px 0 14px; border-left: 6px solid var(--brand); }
.send-card.pend { border-left-color: var(--res-amber-edge); background: var(--res-amber-bg); }
.send-card.sent { border-left-color: var(--ok); background: var(--ok-wash); }
.send-thanks { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.3; color: var(--ink); }
.send-sign { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ok); }
/* No / Contains per allergen; "may contain" only from a supplier's label */
.seg.seg2 { grid-template-columns: repeat(2, 1fr); width: 156px; flex: none; } .seg2 button { min-height: 40px; font-size: 13.5px; }
.seg2 button[data-v="c"][aria-pressed="true"] { background: var(--res-red); color: #fff; }
[data-may] .chip[aria-pressed="true"] { background: var(--res-amber-bg); border-color: var(--res-amber-edge); color: var(--res-amber-ink); font-weight: 700; }


/* specials */
.sp-group h4 { color: var(--res-amber-ink); }
.sp-card { padding: 12px; margin: 10px 0 14px; } .sp-photo { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--rule); }
.sp-item .sp-toggle { margin: 6px 0 0 auto; display: flex; }
.sp-item { display: flex; flex-direction: column; }
.sp-thumb { width: 52px; height: 52px; flex: none; border-radius: 8px; object-fit: cover; border: 1px solid var(--rule); background: var(--field); display: grid; place-items: center; color: var(--mute); }
.sp-mode { grid-template-columns: 1fr 1fr; }
.sp-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 6px; min-height: 40px; }
.sp-part { background: var(--card); font-weight: 700; } .sp-part .i { width: 14px; height: 14px; margin-left: 4px; } .sp-plus { font-weight: 800; color: var(--mute); }
.sp-preview { padding: 10px 12px; margin: 6px 0; border-left: 6px solid var(--brand); }
.sp-lib { margin-top: 8px; } .sp-lib .tu .i { color: var(--brand); }
.sp-on { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-top: 14px; } .sp-on input { width: 22px; height: 22px; }
.sp-cost { padding: 12px; margin: 10px 0; border-left: 6px solid var(--brand); } .sp-cost .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 15px; }

/* menus and the recipe book: the dish name and small letters only (GF DF V VG N), with a small key */
.diet { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 2px; }
.diet abbr { text-decoration: none; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 4px; padding: 0 4px; line-height: 16px; }
.diet abbr.diet-q { border-color: var(--res-amber-edge); color: var(--res-amber-ink); }
.dish-head h1 .diet { vertical-align: 6px; }
.diet-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 8px; font-size: 12.5px; color: var(--mute); }
.diet-key b { font-weight: 700; color: var(--ink-2); margin-right: 2px; }
.mn-row .tu-name { display: inline; }
.mn-list li + li, .rb-list li + li { margin-top: 5px; }
.mn-group h4 { margin-bottom: 6px; }
.mn-seg { margin: 4px 0 12px; } .mn-seg a { display: grid; place-items: center; min-height: 44px; font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--brand); text-align: center; padding: 4px; line-height: 1.15; }
.mn-seg a + a { border-left: 1px solid var(--brand-rule); } .mn-seg a.on { background: var(--brand); color: var(--brand-ink); }
.mn-foot { margin-top: 12px; }
.al-text { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.rb-cats { margin: 0 0 6px; }
.rb-block { margin: 14px 0 6px; }
.rb-sec { margin: 0 0 4px; font-size: 21px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.rb-course { margin: 12px 0 2px; font-size: 16px; color: var(--ink); }
.rb-group { margin: 10px 0 5px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }

/* a dish or recipe page: title, one light allergen line, then a plain ingredients list */
.dish-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.dish-al { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.dish-al.amber { color: var(--res-amber-ink); font-weight: 600; }
.dish-used { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); } .dish-used a { color: var(--brand); font-weight: 600; }
.dish-lead { margin: 0 0 12px; font-size: 16px; }
.mk-card { padding: 10px 12px; margin: 0 0 12px; } .mk-card .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 15px; } .mk-card .kv > span:nth-child(odd) { color: var(--mute); }
.section .mk-card { margin: 0; }
.ri-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ri-list > li { border-bottom: 1px solid var(--rule); }
.ri { display: flex; align-items: baseline; gap: 10px; padding: 9px 2px; width: 100%; font: inherit; color: var(--ink); text-align: left; background: none; border: 0; text-decoration: none; }
.ri-name { flex: 1; min-width: 0; font-size: 16px; }
.ri-al, .ri-from { font-size: 12.5px; color: var(--mute); }
.ri-amt { flex: none; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ri-sub { align-items: center; } .ri-link { color: var(--brand); font-weight: 600; border-bottom: 1px solid currentColor; } .ri-sub .i { width: 16px; height: 16px; color: var(--mute); flex: none; }
.ri-edit { cursor: pointer; } .ri-edit .i { width: 16px; height: 16px; color: var(--brand); flex: none; align-self: center; }
.ri-help { margin: 0 0 6px; }
.ri-toggle { margin-top: 8px; font-size: 13.5px; color: var(--mute); }

/* cost (Supervisors and above) */
.cost-card { padding: 12px; margin: 16px 0; border-left: 6px solid var(--brand); }
.cost-card .eyebrow { margin: 0 0 6px; }
.cost-t { width: 100%; border-collapse: collapse; font-size: 15px; }
.cost-t td { padding: 6px 0; border-bottom: 1px dashed var(--rule); vertical-align: top; }
.cost-t td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 10px; }
.cost-t small { display: block; font-size: 12.5px; color: var(--mute); }
.cost-t tr.tot td { font-weight: 700; border-bottom: 1px solid var(--ink-2); }
.cost-t tr.gp td { font-weight: 700; color: var(--ok); border-bottom: 0; }

.fr { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .72em; color: var(--mute); margin-left: 4px; }
.mk-change { padding: 0 0 0 6px; font-size: 13.5px; }

/* guest allergy check: slim centred pills, whole rows green, yellow (with the swap) or red */
.gc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-chip { min-height: 32px; padding: 3px 12px; background: var(--card); border-color: var(--rule); color: var(--ink); cursor: pointer; }
.gc-chip[aria-pressed="true"] { background: var(--res-red); border-color: var(--res-red-edge); color: #fff; }
.gc-type { margin: 12px 0 0; }
.qs-sum { margin: 6px 0 10px; font-size: 14.5px; } .qs-sum .g { color: var(--ok); } .qs-sum .y { color: var(--res-amber-ink); } .qs-sum .r { color: var(--res-red); }
.qs-list li + li { margin-top: 5px; }
.qs-row { padding-top: 11px; padding-bottom: 11px; width: 100%; text-align: left; } .qs-row .tu-name { font-size: 17px; }
.qs-line { display: block; font-size: 13.5px; font-weight: 700; color: var(--res-amber-ink); margin-top: 2px; }
.tu.res-red .qs-line { color: #fff; font-weight: 600; }
.qs-word { flex: none; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tu.res-safe .qs-word { color: var(--ok); } .tu.res-amber .qs-word { color: var(--res-amber-ink); } .tu.res-red .qs-word { color: #fff; }

/* function menus: the week strip, a day's functions, the store and the builder */
a.chip { text-decoration: none; }
.fx-week { margin: 2px 0 12px; }
.fx-week-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fx-week-head b { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.fx-week-head a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--brand); }
.fx-week-head .fx-next svg, .fx-week-head .fx-next .i { transform: scaleX(-1); }
.fx-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fx-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); text-decoration: none; color: var(--ink); }
.fx-day.today { border: 2px solid var(--brand); }
.fx-day.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.fx-dow { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.fx-num { font-size: 18px; font-weight: 700; line-height: 1.15; }
.fx-dot { min-width: 20px; height: 20px; border-radius: 99px; background: var(--res-amber-edge); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }
.fx-dot.none { background: transparent; }
.fx-day.on .fx-dot:not(.none) { background: #fff; color: var(--brand); }
.fx-dayhead { margin: 14px 0 8px; font-size: 21px; }
.fx-event { padding: 12px 12px 14px; margin: 0 0 12px; border-left: 6px solid var(--res-amber-edge); }
.fx-ev-head { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.fx-ev-head .eyebrow { margin: 0 0 4px; } .fx-ev-head h3 { margin: 4px 0 0; font-size: 21px; }
.fx-guests { flex: none; text-align: center; padding: 5px 9px; border-radius: 8px; background: var(--field); border: 1px solid var(--rule); }
.fx-guests b { display: block; font-size: 20px; line-height: 1.1; } .fx-guests span { display: block; font-size: 11.5px; color: var(--mute); }
.fx-notes { margin: 8px 0 4px; font-size: 14.5px; color: var(--ink-2); }
.fx-course { margin-top: 12px; } .fx-course h4 { margin: 0 0 6px; }
.fx-pick { font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--mute); }
.fx-also { margin: 6px 0 0; font-size: 13.5px; }
.fx-count { flex: none; font-weight: 800; font-size: 15px; margin-right: 4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-count::before { content: '× '; font-weight: 500; color: var(--mute); }
.fx-fc { padding: 12px; margin: 12px 0; } .fx-fc h3 { margin: 0 0 8px; } .fx-fc .eyebrow { margin: 12px 0 6px; }
.fx-pickn { max-width: 160px; }
.fx-chosen { list-style: none; margin: 0; padding: 0; } .fx-chosen li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fx-chosen .chip { flex: 1; justify-content: flex-start; } .fx-n { width: 96px !important; flex: none; }

/* the menu grid: one square a menu, rows filled where they can be, any part row centred */
.mn-grid { --c: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 16px; }
.mn-grid > .mn-tile { flex: 0 0 calc((100% - (var(--c) - 1) * 10px) / var(--c)); box-sizing: border-box; min-height: 108px; }
.mn-grid.mn-odd > .mn-tile:first-child { flex-basis: 100%; min-height: 0; }
.mn-tile small { font-weight: 600; }
@media (min-width: 560px) { .mn-grid { --c: var(--c2, 3); } .mn-grid.mn-odd > .mn-tile:first-child { flex-basis: calc((100% - (var(--c) - 1) * 10px) / var(--c)); min-height: 108px; } }
@media (min-width: 900px) { .mn-grid { --c: var(--c3, 5); } .mn-grid > .mn-tile { min-height: 132px; } }
.mn-tools { justify-content: center; }
/* guest allergy check: the menu filter and one block a menu */
.gc-menu { margin: 0 0 12px; } .gc-menu select { width: 100%; }
.gc-menu-group h4 { display: flex; align-items: center; gap: 8px; } .gc-menu-group h4 .i { width: 18px; height: 18px; color: var(--brand); }
/* allergen table, all dishes: a heading row for each menu */
.alg .alg-sec th { background: var(--field); text-align: left; padding: 9px 9px 5px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); border-right: 0; }
.alg .alg-sec th span { position: sticky; left: 9px; }

/* whiteboard and ordering */
.ex-line { margin: 0 0 8px; }
.or-c { text-align: center; justify-content: center; }
.or-tiles { margin-top: 10px; }
.or-tiles .mn-tile { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.wb-line.plain { align-items: center; }
.wb-line .chev { width: 18px; height: 18px; flex: none; opacity: .5; align-self: center; }
.wb-line .who b { color: var(--ink); }
.wb-note { font-size: 14px; color: var(--ink-2); margin: 2px 0; }
.wb-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
.wb-flag .i { width: 13px; height: 13px; }
.wb-line.flagged.f1 .wb-flag { color: #6E4E0E; } .wb-line.flagged.f2 .wb-flag { color: var(--warn-ink); } .wb-line.flagged.f3 .wb-flag { color: #fff; }
.wb-st { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--mute); }
.wb-st .i { width: 14px; height: 14px; } .wb-st.ok { color: var(--ok); }
.or-actions { justify-content: center; margin-top: 12px; }
.or-add { padding: 14px; margin-top: 18px; } .or-add h3 { margin: 0 0 8px; }
.or-sheet { padding: 6px 14px; }
.or-lines { list-style: none; margin: 0; padding: 0; }
.or-lines li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--rule); }
.or-lines li:last-child { border-bottom: 0; }
.or-lines .grow { flex: 1; min-width: 0; } .or-lines small { display: block; color: var(--mute); font-size: 12.5px; }
.or-q { font-weight: 700; white-space: nowrap; } .or-m { width: 72px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.or-total { text-align: right; margin: 6px 0 10px; border-top: 1px solid var(--rule); padding-top: 8px; }
.or-text { white-space: pre-wrap; font-family: var(--sans); font-size: 14px; background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; margin: 14px 0; color: var(--ink); }
.or-st { font-weight: 700; } .or-st.amber { color: var(--res-amber-ink); } .or-st.red { color: var(--res-red); }
.wb-line.flagged.f3 .who b, .wb-line.flagged.f3 .wb-note { color: #fff; }
/* orders by supplier: ordering groups that open into their suppliers, most used first */
.og-list { max-width: 560px; margin: 14px auto 0; display: flex; flex-direction: column; gap: 10px; }
.og { background: var(--card, #fff); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.og.has { border-color: var(--accent, #c9a24a); }
.og.unsorted { border-color: var(--res-amber-ink, #9a6b00); background: #fbf1d8; }
.og-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.og-head > .i:first-child { width: 24px; height: 24px; flex: none; color: var(--ink-2); }
.og-head .grow { flex: 1; min-width: 0; } .og-head b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; color: var(--ink); }
.og-head small { display: block; font-size: 13px; color: var(--mute); }
.og.has .og-head small { color: var(--ink-2); font-weight: 600; }
.og-n { font-size: 12px; color: var(--mute); white-space: nowrap; }
.og-head > .i:last-child { width: 18px; height: 18px; flex: none; opacity: .5; transform: rotate(90deg); transition: transform .15s; }
.og.open .og-head > .i:last-child { transform: rotate(-90deg); }
.og-body { display: none; border-top: 1px solid var(--rule); }
.og.open .og-body { display: block; }
.og-sups { list-style: none; margin: 0; padding: 0; }
.og-sups li + li { border-top: 1px dashed var(--rule); }
.og-sups a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; }
.og-sups .grow { flex: 1; min-width: 0; } .og-sups b { display: block; font-weight: 700; font-size: 15.5px; }
.og-sups small { display: block; font-size: 12px; color: var(--mute); line-height: 1.35; }
.og-sups small:first-of-type { color: var(--ink-2); font-weight: 600; }
.og-rank { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--paper-2, #efe7da); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--ink-2); }
.og-sups li:first-child .og-rank { background: var(--ink, #1f2f4d); color: #fff; }
.og-ready { font-size: 12px; font-weight: 700; color: var(--ok, #2e6b2e); white-space: nowrap; }
.og-sups a > .i { width: 16px; height: 16px; opacity: .5; flex: none; }
.or-x { flex: none; align-self: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); background: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--mute); }
.or-x .i { width: 14px; height: 14px; }
.or-lines .btn.small { align-self: center; white-space: nowrap; }
/* add to the board: type-ahead like an address form */
.ac-wrap { position: relative; }
.ac-list { list-style: none; margin: 4px 0 0; padding: 4px 0; background: #fff; border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow: auto; }
.ac-list[hidden] { display: none; }
.ac-list li + li { border-top: 1px solid var(--rule); }
.ac-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 48px; }
.ac-list b { display: block; font-weight: 600; font-size: 15.5px; } .ac-list u { text-decoration: none; font-weight: 800; }
.ac-list small { display: block; font-size: 12px; color: var(--mute); }
.ac-list .grow { flex: 1; min-width: 0; } .ac-new .i { width: 18px; height: 18px; color: var(--ink-2); }
.or-add { margin-top: 12px; }
/* how each supplier takes orders, and the tick-off sheet */
.og-how { display: flex !important; align-items: center; gap: 4px; margin-top: 2px; color: var(--ink-2) !important; }
.og-how .i { width: 13px; height: 13px; }
.or-how { padding: 14px; margin: 14px 0 0; text-align: center; }
.or-how-h { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; text-align: left; }
.or-how-h > .i { width: 26px; height: 26px; color: var(--brand); flex: none; }
.or-how-h b { display: block; font-size: 16px; } .or-how-h small { display: block; color: var(--mute); font-size: 13px; }
.or-ticks { padding: 12px 14px; margin-top: 14px; }
.or-ticks ul { list-style: none; margin: 0; padding: 0; }
.or-ticks li + li { border-top: 1px dashed var(--rule); }
.or-ticks label { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.or-ticks input { width: 24px; height: 24px; flex: none; accent-color: var(--ok); }
.or-ticks .grow { flex: 1; min-width: 0; } .or-ticks b { display: block; } .or-ticks small { display: block; color: var(--mute); font-size: 12.5px; }
.or-ticks label.on b, .or-ticks label.on .or-q { text-decoration: line-through; color: var(--mute); }
.btn.small { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.pl-files { list-style: none; margin: 8px 0 4px; padding: 0; font-size: 14px; }
.pl-files li { display: flex; align-items: center; gap: 6px; padding: 4px 0; } .pl-files .i { width: 15px; height: 15px; color: var(--ok); }
.pl-send .photo-btn { margin-bottom: 4px; }
/* add to the board: amount with steppers, units as big separate buttons */
.amt { margin: 4px 0 12px; }
.amt-l { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.amt-row { display: flex; align-items: stretch; gap: 8px; justify-content: center; }
.amt-b { width: 56px; min-height: 52px; flex: none; border-radius: 12px; border: 1.5px solid var(--brand-rule, var(--rule)); background: var(--field, #fff); font-size: 26px; font-weight: 600; color: var(--brand); cursor: pointer; }
.amt-n { flex: 1; min-width: 0; max-width: 160px; text-align: center; font-size: 24px; font-weight: 700; min-height: 52px; }
.useg { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 8px; margin-top: 10px; }
.useg.n1 { --n: 1; } .useg.n2 { --n: 2; } .useg.n3 { --n: 3; } .useg.n4 { --n: 2; }
.useg button { min-height: 52px; padding: 8px 6px; border-radius: 12px; border: 1.5px solid var(--rule); background: #fff; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; line-height: 1.2; }
.useg button.on { background: var(--brand, #1f2f4d); border-color: var(--brand, #1f2f4d); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.amt-other { margin-top: 8px; }
.amt-info { text-align: center; margin: 10px 0 0; font-size: 15px; color: var(--ink-2); min-height: 1.3em; }
/* order history by supplier */
.oh-st { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.oh-st.ok { background: var(--ok-wash); color: var(--ok); } .oh-st.amber { background: var(--res-amber-bg, #fbf1d8); color: var(--res-amber-ink, #6e4e0e); } .oh-st.red { background: #f6dede; color: var(--res-red, #a01818); }
.oh-list { list-style: none; margin: 10px auto 0; padding: 0; max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.oh-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; background: var(--card, #fff); border: 1px solid var(--rule); border-left: 5px solid var(--ok); border-radius: 12px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.oh-row.amber { border-left-color: var(--res-amber-edge, #c9a24a); } .oh-row.red { border-left-color: var(--res-red, #a01818); }
.oh-date { flex: none; width: 46px; text-align: center; font-size: 13px; line-height: 1.25; color: var(--ink-2); }
.oh-row .grow { flex: 1; min-width: 0; } .oh-row .grow b { display: block; font-size: 15px; } .oh-row small { display: block; font-size: 12.5px; color: var(--mute); }
.oh-row > .i { width: 16px; height: 16px; opacity: .5; flex: none; }
.og-sups .oh-st { margin-left: 4px; }

/* ---------- prep and mise en place (js/prep.js) and the forecast amounts (js/forecast.js) ---------- */
.fc { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--brand-2); line-height: 1.3; }
.wb-fc { margin-top: 2px; font-family: var(--sans); }
.wb-line.flagged .wb-fc { color: inherit; opacity: .9; }
.amt-r { flex: none; margin-left: auto; padding-left: 10px; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.fc-ed { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 99px; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.fc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; }
.fc-top p { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.fc-top .linkish { font-size: 14px; font-weight: 700; }
.fc-sub { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.fc-cmin span { font-size: 14px; }
.fc-sheet + .sheet-foot { display: flex; gap: 10px; } .fc-sheet + .sheet-foot .btn { flex: 1; }
.pp-tabs { margin: 4px 0 12px; }
.pp-note { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); }
.pp-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 12px; }
.pp-key span { text-align: center; font-size: 12.5px; font-weight: 700; padding: 6px 4px; border-radius: 8px; line-height: 1.2; }
.pp-key .l1, .pp-row.l1 { background: #CFE6C9; color: #1F4A1A; }
.pp-key .l2, .pp-row.l2 { background: #F7DE82; color: #4F3A00; }
.pp-key .l3, .pp-row.l3 { background: #E9897C; color: #3E0F09; }
button.pp-dish { cursor: pointer; }
.pp-dish .pp-pen { flex: none; margin-left: -4px; }
.pp-pen { width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; color: var(--faint); }
.pp-row .amt-r { color: inherit; opacity: .85; }
.pp-row[disabled] { cursor: default; }
.pp-event { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 10px 12px; border-radius: 12px; background: var(--brand-wash); }
.pp-event > svg { flex: none; width: 22px; height: 22px; color: var(--brand); }
.pp-event > div { flex: 1; min-width: 0; } .pp-event b { display: block; } .pp-event small { color: var(--ink-2); }
.pp-foot { margin: 16px 0 2px; padding-top: 12px; border-top: 1px solid var(--rule); text-align: center; }
.pp-status { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.pp-ok { min-height: 56px; font-size: 17px; }
.pp-who { margin: 0; font-weight: 700; color: var(--brand); }
.pp-set { margin: 10px 0 0; font-size: 13.5px; color: var(--mute); }
.pp-empty { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; color: var(--ink-2); }
.pp-empty svg { width: 20px; height: 20px; color: var(--ok, green); }
.pp-undo { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.25); font-weight: 600; max-width: 520px; margin: 0 auto; }
.pp-undo button { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 0; background: #fff; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.pp-dn .nw { white-space: nowrap; }

/* ---------- invoice price flags (js/invoices.js) and the rep's Call / Email buttons (js/ordering.js) ---------- */
.inv-sum { margin: 6px 0 12px; padding: 10px 12px; border-radius: 10px; font-weight: 700; }
.inv-sum.bad { background: #FBE3E0; color: #7A1A10; } .inv-sum.ok { background: var(--ok-wash); color: var(--ok); }
.inv-lines { list-style: none; margin: 0; padding: 0; }
.inv-line { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--card); font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.inv-line .grow { flex: 1; min-width: 0; } .inv-line b { display: block; font-size: 16.5px; } .inv-line small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-2); }
.inv-line.red { background: #B00000; border-color: #7A0000; color: #fff; } .inv-line.red small { color: #FFE3DF; font-weight: 700; }
.inv-line.checked { border-left: 6px solid var(--ok); }
.inv-tot { flex: none; font-weight: 800; font-size: 15px; }
.inv-limit { margin: 18px 0 6px; } .inv-limit p { margin: 0 0 4px; font-weight: 700; color: var(--ink-2); }
.inv-why { margin: 4px 0 12px; } .inv-why h3 { margin: 0 0 4px; font-size: 19px; } .inv-why p { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.rep-btn { min-height: 58px; font-size: 17px; flex-wrap: wrap; justify-content: center; text-align: center; }
.rep-btn small { flex-basis: 100%; font-size: 12.5px; font-weight: 600; opacity: .85; }

/* every flag's buttons (BizOrdering.flagFoot): one big next step, an equal pair, then small "More options" */
.fa-foot { display: grid; gap: 10px; }
.fa-main { min-height: 58px; font-size: 17px; }
.fa-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fa-pair.one { grid-template-columns: 1fr; }
.fa-half { min-height: 50px; justify-content: center; padding: 8px 10px; font-size: 15.5px; }
.fa-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; padding-top: 2px; font-size: 14px; }
.fa-more span { flex-basis: 100%; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.fa-more .linkish { min-height: 36px; font-size: 14.5px; font-weight: 700; }

/* prep lists read like a list: thin rows, bolder dish names */
.pp-group { margin: 14px 0 4px; }
.pp-dish { display: flex; align-items: baseline; gap: 8px; width: 100%; margin: 0 0 5px; padding: 1px 0 1px 10px; border: 0; border-left: 5px solid var(--cat, var(--brand)); background: none; font: inherit; text-align: left; color: var(--ink); }
.pp-dn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--serif, inherit); font-size: 19.5px; font-weight: 700; line-height: 1.2; color: var(--brand); }
.pp-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; margin: 0 0 3px; padding: 6px 12px; border-radius: 9px; border: 1px solid transparent; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.pp-row b { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.pp-row .amt-r { font-size: 14px; }
.pp-row.l0 { background: var(--card); border-color: var(--rule); color: var(--ink); }
.pp-row.q { background: #fff; border-color: var(--rule); color: var(--faint); }
.pp-row.q b { font-weight: 500; }
.pp-q { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-style: normal; font-size: 12px; font-weight: 800; line-height: 1; color: var(--faint); }
.pp-note .pp-q { width: 17px; height: 17px; font-size: 11px; vertical-align: -3px; }
.pp-filter button { border: 2px solid transparent; font: inherit; font-size: 13.5px; font-weight: 800; padding: 8px 4px; border-radius: 9px; cursor: pointer; text-align: center; line-height: 1.2; min-height: 40px; }
.pp-filter .l1 { background: #CFE6C9; color: #1F4A1A; } .pp-filter .l2 { background: #F7DE82; color: #4F3A00; } .pp-filter .l3 { background: #E9897C; color: #3E0F09; }
.pp-filter button.on { border-color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.pp-filter button.dim { opacity: .45; }
.pp-fnote { margin: -4px 0 10px; text-align: center; font-size: 13px; color: var(--ink-2); }

/* stock counts: thin rows by supplier, the whole row fills amber (below par) or red (well below or out) */
.sk-sup { margin: 12px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.sk-sup:first-child { margin-top: 2px; }
.check-line { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 600; }
.check-line input { width: 20px; height: 20px; }
.sk-value { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--brand-wash); }
.sk-value span { font-weight: 700; color: var(--ink-2); } .sk-value b { font-size: 20px; color: var(--brand); }

/* the stock guide: a guide, not a rule */
.sk-tabs.n3 button { font-size: 14.5px; }
.gd-calm { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--brand-wash); font-size: 14px; color: var(--ink-2); }
.gd-calm > svg { flex: none; width: 20px; height: 20px; color: var(--brand); margin-top: 1px; }
.gd-in .field { margin-bottom: 12px; }
.gd-src { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mute); }
.gd-learn { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #EEF2E3; color: #3E5A1F; font-weight: 700; }
.gd-pre { padding: 0 6px; font-size: 17px; color: var(--ink-2); }
.gd-mix { margin: 2px 0 0; font-size: 14px; }
.gd-out .gd-big { margin: 4px 0 0; font-family: var(--serif, inherit); font-size: 32px; font-weight: 700; color: var(--brand); line-height: 1.1; }
.gd-out .gd-big small { font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.gd-sum { margin: 2px 0 10px; font-size: 13.5px; color: var(--mute); }
.gd-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 7px 2px; border: 0; border-top: 1px solid var(--rule); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.gd-row b { display: block; font-size: 15.5px; } .gd-row small { display: block; font-size: 12.5px; color: var(--mute); }
.gd-row .grow { flex: 1; min-width: 0; }
.gd-v { flex: none; font-weight: 800; font-size: 15px; } .gd-v.ok { color: #2F6B2A; }
.gd-pen { flex: none; width: 15px; height: 15px; color: var(--faint); }
.gd-pars { padding-top: 2px; padding-bottom: 2px; } .gd-pars .gd-row:first-child { border-top: 0; }
.cmp { display: grid; gap: 6px; }
.cmp-row { padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; }
.cmp-row.green { background: #CFE6C9; color: #1F4A1A; } .cmp-row.amber { background: #F7DE82; color: #4F3A00; } .cmp-row.red { background: #E9897C; color: #3E0F09; }
.cmp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .cmp-h b { font-size: 15.5px; } .cmp-gap { font-weight: 800; font-size: 14.5px; }
.cmp-row p { margin: 2px 0 0; font-size: 13.5px; } .cmp-row p.cmp-w { opacity: .8; font-size: 12.5px; }
.cmp-tot { margin-top: 8px; border-width: 2px; border-color: rgba(0,0,0,.15); }
.gd-in .rf-g { display: flex; align-items: center; gap: 4px; } .gd-in .rf-g .input { flex: 1; min-width: 0; }

/* ---------- pars: one small, light figure on the right ("6 kg", "2 box", "24 pc") ---------- */
.par-f { flex: none; align-self: center; font-family: var(--sans, inherit); font-style: normal; font-weight: 400; font-size: 12px; letter-spacing: .02em; color: var(--mute); opacity: .85; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wb-line.flagged .par-f { color: inherit; opacity: .6; }
.or-lines li .par-f { margin-right: 8px; }
.bp-line { align-items: center; }
.bp-line .hand { font-size: 19px; }
.bp-add { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; border: 1.5px solid currentColor; background: rgba(255,255,255,.55); font: inherit; font-size: 13px; font-weight: 700; color: inherit; cursor: pointer; }
.bp-add svg { width: 14px; height: 14px; }

/* ---------- stock take: neutral, no colours ---------- */
.st-saved { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: 12px; color: var(--mute); }
.st-saved svg { width: 14px; height: 14px; }
.st-shelf { margin: 10px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.st-shelf:first-child { margin-top: 0; }
.st-item { border-bottom: 1px solid var(--rule); }
.st-item.editing { background: var(--card); border-radius: 10px; box-shadow: 0 0 0 1px var(--rule); border-bottom-color: transparent; margin: 4px 0; }
.st-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 5px 4px; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.st-row[disabled] { cursor: default; }
.st-row .grow { flex: 1; min-width: 0; }
.st-row b { display: block; font-size: 15px; line-height: 1.2; }
.st-row small { display: block; font-size: 12px; color: var(--mute); }
.st-n { flex: none; min-width: 44px; text-align: right; font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.st-n.blank { color: var(--mute); font-weight: 400; }
.st-n small { display: block; font-weight: 400; font-size: 11.5px; color: var(--mute); }
.st-v { flex: none; width: 66px; text-align: right; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.st-bv { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-right: 6px; font-variant-numeric: tabular-nums; }
.st-ed { padding: 2px 10px 12px; }
.st-es { list-style: none; margin: 0 0 8px; padding: 0; }
.st-es li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--rule); font-size: 14px; }
.st-es small { color: var(--mute); }
.st-fr { display: flex; gap: 8px; margin: 8px 0 4px; }
.st-fr button { flex: 1; min-height: 40px; border-radius: 10px; border: 1.5px solid var(--rule); background: var(--paper, #fff); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.st-packs { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 8px; }
.st-packs.n1 { --n: 1; } .st-packs.n2 { --n: 2; } .st-packs.n3 { --n: 3; }
.st-packs .btn { min-height: 52px; font-size: 16px; justify-content: center; }
.st-foot { display: flex; gap: 8px; margin-top: 10px; }
.st-foot .btn { flex: 1; justify-content: center; }
.st-done { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; font-size: 13px; color: var(--ink-2); }
.st-done svg { width: 15px; height: 15px; }
.st-adone { margin-top: 10px; }
.st-start .useg { margin-top: 4px; }
.st-review { padding: 12px 14px; }
.st-rh { margin: 10px 0 2px; font-weight: 700; font-size: 14px; }
.st-rh:first-child { margin-top: 0; }
.st-rl { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.st-gp { padding: 12px 14px; margin-bottom: 12px; }
.st-gp h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.st-gt { width: 100%; border-collapse: collapse; font-size: 14px; }
.st-gt td { padding: 5px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.st-gt td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-gt td small { display: block; font-size: 11.5px; color: var(--mute); }
.st-gt tr.sum td { font-weight: 700; }
.st-gt tr.gp td { font-weight: 800; font-size: 16px; border-bottom: 0; padding-top: 8px; }

/* ---------- smart dish pricing ---------- */
.pr-menu { padding: 12px 14px; margin-bottom: 10px; }
.pr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 6px; }
.pr-kpis div { display: flex; flex-direction: column; }
.pr-kpis span { font-size: 11.5px; color: var(--mute); line-height: 1.2; }
.pr-kpis b { font-size: 20px; color: var(--brand); font-variant-numeric: tabular-nums; }
.pr-kpis small { font-size: 11px; color: var(--mute); line-height: 1.25; }
.pr-bal { margin: 4px 0 0; font-size: 14px; font-weight: 600; }
.pr-rule { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); margin: 0 0 6px; }
.pr-rule svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pr-row { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 5px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rule); border-left-width: 5px; background: var(--card); font: inherit; text-align: left; color: inherit; cursor: pointer; }
.pr-row .grow { flex: 1; min-width: 0; }
.pr-row b { display: block; font-size: 15px; line-height: 1.2; }
.pr-row small { display: block; font-size: 12px; opacity: .8; }
.pr-row.g { background: #DCEFD9; border-color: #5E9E58; }
.pr-row.y { background: #FBF0D2; border-color: #C08A1E; }
.pr-row.r { background: #F6D3CD; border-color: #B8412F; }
.pr-n { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.pr-n b { font-size: 15px; }
.pr-r { flex: none; width: 48px; text-align: right; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.pr-set { padding: 12px 14px; margin-top: 12px; }

/* column labels over the par / count / value columns */
.col-h { position: relative; height: 15px; margin: 0 0 2px; }
.col-h span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); opacity: .8; white-space: nowrap; line-height: 15px; }
.st-colh { margin: 0 0 4px; }
.st-row .par-f { width: 48px; text-align: center; }
.st-row .st-n { width: 104px; min-width: 0; text-align: center; }
.st-row .st-v { width: 66px; text-align: center; }
.wb-line .par-f, .or-lines li .par-f { width: 48px; text-align: center; margin-right: 0; }
button.wb-line.flagged { width: calc(100% + 12px); padding-right: 5px; }
.or-lines li .or-q { min-width: 58px; text-align: right; }
.st-row { gap: 6px; }
.st-row .par-f { width: 44px; } .st-row .st-n { width: 86px; } .st-row .st-v { width: 60px; }

/* stock take: count sheets to print (A4, one per area) and counted sheets sent in */
.st-tools { margin-top: 16px; flex-wrap: wrap; gap: 8px; }
.ps-wrap { display: flex; flex-direction: column; gap: 16px; }
.ps-page { background: #fff; color: #111; border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 18px 16px 14px; font-size: 12px; overflow-x: auto; }
.ps-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 1.5px solid #111; padding-bottom: 8px; margin-bottom: 8px; }
.ps-brand { margin: 0; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #666; font-weight: 700; }
.ps-head h2 { margin: 2px 0 1px; font-size: 18px; line-height: 1.15; }
.ps-sub { margin: 0; font-size: 10.5px; color: #555; }
.ps-who { flex: none; font-size: 10px; color: #444; }
.ps-who p { margin: 0 0 8px; display: flex; gap: 6px; align-items: flex-end; } .ps-who span { display: inline-block; width: 92px; border-bottom: 1px solid #888; height: 12px; }
.ps-t { width: 100%; border-collapse: collapse; }
.ps-t th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: #666; font-weight: 700; padding: 4px 4px; border-bottom: 1px solid #999; }
.ps-t td { padding: 5px 4px; border-bottom: 1px solid #ddd; vertical-align: middle; }
.ps-t .ps-item { font-weight: 600; } .ps-t .ps-pack { color: #555; font-size: 10.5px; } .ps-t .ps-par { text-align: center; color: #555; width: 44px; }
.ps-t th:nth-child(3) { text-align: center; }
.ps-t .ps-count { width: 76px; } .ps-t .ps-count span { display: block; height: 22px; border: 1.2px solid #444; border-radius: 3px; }
.ps-t .ps-ini { width: 82px; } .ps-t .ps-ini span { display: block; height: 14px; border-bottom: 1px solid #999; }
.ps-t tr.ps-shelf td { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #444; background: #f3f3f3; padding: 3px 4px; border-bottom: 1px solid #ccc; }
.ps-foot { margin: 10px 0 0; font-size: 9.5px; color: #666; }
.st-lrow { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.st-lrow .grow { flex: 1; min-width: 0; } .st-lrow b { display: block; font-size: 14.5px; } .st-lrow small { color: var(--mute); font-size: 12px; }
.st-lrow [data-ln] { width: 64px; text-align: center; } .st-lrow [data-lu] { width: 104px; }
@media print {
  .ps-wrap { display: block; gap: 0; }
  .ps-page { border: 0; box-shadow: none; border-radius: 0; padding: 0; font-size: 10.5pt; break-after: page; page-break-after: always; overflow: visible; }
  .ps-page:last-child { break-after: auto; page-break-after: auto; }
  .ps-t tr { break-inside: avoid; } .ps-t thead { display: table-header-group; }
  .ps-t tr.ps-shelf td { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ps-head h2 { font-size: 17pt; } .ps-t td { padding: 6px 4px; } .ps-t .ps-count span { height: 24px; }
}


/* create a dish (js/pricing.js) */
.dn-card .field { margin-bottom: 8px; }
.dn-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.dn-row .grow { flex: 1; min-width: 0; } .dn-row b { display: block; font-size: 15px; line-height: 1.2; } .dn-row small { display: block; font-size: 12px; color: var(--mute); }
.dn-g { width: 64px; flex: none; text-align: right; padding: 6px 8px; } .dn-u { font-size: 13px; color: var(--mute); } .dn-c { width: 56px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dn-add { margin-top: 10px; } .dn-addrow { display: flex; gap: 8px; align-items: flex-end; margin-top: 6px; } .dn-addrow > .input:first-child, .dn-addrow > select { flex: 1; min-width: 0; } .dn-addrow .field { flex: 1; margin: 0; }
.dn-sum { margin-top: 12px; } .dn-pc { width: 70px; display: inline-block; text-align: right; padding: 4px 6px; }
.dn-rate { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.dn-chip { padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--rule); }
.dn-chip.g { background: #DCEFD9; border-color: #5E9E58; } .dn-chip.y { background: #FFF1C7; border-color: #D9A92B; } .dn-chip.r { background: #F7D9D4; border-color: #C0504D; }
.dn-all { width: auto; margin: 0; padding: 5px 12px; }
.ws-form .field { margin-bottom: 8px; } .ws-tot { margin: 12px 0 4px; } .ws-day { margin: 14px 0 4px; }
.ws-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); } .ws-row .grow { flex: 1; min-width: 0; }
.ws-row b { display: block; font-size: 15px; } .ws-row small { display: block; font-size: 12px; color: var(--mute); } .ws-c { font-weight: 600; font-variant-numeric: tabular-nums; }
.wf-sec { margin-bottom: 14px; } .wf-row > svg { flex: none; width: 20px; height: 20px; } .wf-acts { display: flex; flex-direction: column; gap: 8px; } .wf-acts .linkish { align-self: center; }
.st-trow { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; margin: 0 0 5px; border-radius: 10px; border: 1px solid var(--rule); border-left-width: 5px; background: var(--card, #fff); }
.st-trow .grow { flex: 1; min-width: 0; font-size: 14px; } .st-trow b { font-variant-numeric: tabular-nums; } .st-trow small { font-size: 12px; color: var(--mute); width: 68px; text-align: right; }
.st-trow.y { background: #FBF0D2; border-color: #C08A1E; } .st-trow.r { background: #F6D3CD; border-color: #B8412F; }
.st-trendflag { display: block; cursor: default; } .st-sug { margin: 0; padding-left: 18px; } .st-sug li { margin: 0 0 6px; font-size: 14.5px; line-height: 1.35; }
.st-next { margin-top: 14px; } .st-next .field { margin-bottom: 10px; }
.st-notdue { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; } .st-notdue > svg { flex: none; width: 22px; height: 22px; color: var(--brand); } .st-notdue small { display: block; color: var(--mute); margin-top: 2px; }

/* waste flag note on an order line (js/waste.js noteFor) */
.wf-note { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 2px; padding: 3px 8px; border-radius: 8px; background: #FBF0D2; border: 1px solid #C08A1E; color: #6B4A06; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.wf-note svg { width: 14px; height: 14px; flex: none; }
.mn-changes { margin: 0 0 10px; } .mn-changes p { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; padding: 8px 10px; border-radius: 10px; background: #FBF0D2; border: 1px solid #C08A1E; }
.mn-changes svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.mn-task { display: flex; align-items: center; gap: 10px; cursor: default; } .mn-notice { margin-top: 6px; } .mn-print { margin: 12px 0 0; }
/* printed menu: the client restyles here (fonts, sizes, rules) */
.pm-page { --pm-font: 'Cormorant Garamond', Georgia, serif; --pm-body: Georgia, serif; --pm-ink: #111; --pm-rule: #b9b2a5;
  background: #fff; color: var(--pm-ink); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 28px 22px; font-family: var(--pm-body); max-width: 794px; margin: 0 auto; }
.pm-head { text-align: center; border-bottom: 1px solid var(--pm-rule); padding-bottom: 12px; margin-bottom: 14px; }
.pm-brand { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #555; } .pm-head h1 { margin: 4px 0 0; font-family: var(--pm-font); font-size: 30px; font-weight: 600; }
.pm-course { margin: 0 0 14px; break-inside: avoid-page; } .pm-course h2 { font-family: var(--pm-font); font-size: 19px; text-align: center; margin: 0 0 8px; font-weight: 600; letter-spacing: .04em; }
.pm-dish { margin: 0 0 9px; break-inside: avoid; } .pm-line { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 14.5px; }
.pm-name { flex: 1; font-weight: 700; } .pm-diet { font-size: 11px; letter-spacing: .06em; color: #444; } .pm-price { font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.pm-desc { margin: 2px 0 0; font-size: 12.5px; color: #444; line-height: 1.4; font-style: italic; }
.pm-foot { border-top: 1px solid var(--pm-rule); margin-top: 16px; padding-top: 8px; text-align: center; font-size: 11px; color: #555; } .pm-foot p { margin: 2px 0; }
@media print { .pm-page { border: 0; box-shadow: none; border-radius: 0; padding: 0; max-width: none; font-size: 11pt; } }

/* signature dishes (js/pricing.js): a small gold star by the name and a thin gold edge on the row */
.pr-star { display: inline-block; margin-left: 5px; font-size: .82em; line-height: 1; color: #B8892B; vertical-align: .08em; }
.pr-row.sig { box-shadow: inset 0 0 0 1px #D9B65C; }
.pr-sigline { font-weight: 700; } .pr-sigline small { display: inline; margin-left: 6px; font-weight: 400; }
.pr-row small.pr-edge { color: #6B4A06; font-weight: 700; }
.pr-edgebox { display: block; margin: 12px 0 0; cursor: default; } .pr-edgebox .btn-row { display: flex; gap: 8px; }

/* signature everywhere (t611u): the star sits neatly after the name; the dish page gets a thicker gold bar with a gentle shimmer */
.tu-name .pr-star, .alg-dish .pr-star, .pp-dish .pr-star { font-size: .78em; margin-left: 4px; vertical-align: .1em; }
.dish-head h1 .pr-star { font-size: .55em; vertical-align: .45em; margin-left: 8px; }
.dish-sig { color: #9A7120; font-weight: 800; }
.dish-head.sig { position: relative; border-left: 0; padding-left: 20px; }
.dish-head.sig::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; border-radius: 5px;
  background: linear-gradient(180deg, #A97C22 0%, #D9B65C 30%, #FFF1BF 45%, #D9B65C 60%, #A97C22 100%); background-size: 100% 300%;
  box-shadow: 0 0 6px rgba(217, 182, 92, .45); animation: sig-shimmer 5s ease-in-out infinite; }
@keyframes sig-shimmer { 0%, 100% { background-position: 0 0; } 50% { background-position: 0 100%; } }
@media (prefers-reduced-motion: reduce) { .dish-head.sig::before { animation: none; background-position: 0 50%; } }
.pm-star { font-size: .75em; margin-left: 5px; vertical-align: .12em; }
@media print { .dish-head.sig::before { animation: none; box-shadow: none; } }
.dish-price { margin: 2px 0 4px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .dish-price small { font-size: 12px; font-weight: 400; color: var(--mute); }

/* menu engineering (js/pricing.js): four boxes per course, plain-text label per dish */
.me-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 10px; }
.me-box { border-radius: 10px; border: 1px solid var(--rule); padding: 7px 9px; font-size: 13px; }
.me-box b { display: flex; justify-content: space-between; font-size: 13px; } .me-box b span { font-variant-numeric: tabular-nums; }
.me-box small { display: block; color: var(--mute); font-size: 12px; line-height: 1.3; margin-top: 2px; }
.me-box.t-g { background: #E3F0DF; border-color: #5E9A55; } .me-box.t-y { background: #FBF0D2; border-color: #C08A1E; } .me-box.t-r { background: #F6D3CD; border-color: #B8412F; }
.me-axes { grid-column: 1 / -1; margin: 0; }
.pr-row small.me-l { font-weight: 700; letter-spacing: .01em; }

/* HACCP plan and labels (js/haccp.js) */
.hc-lock { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid #C08A1E; background: #FBF0D2; margin: 0 0 12px; }
.hc-lock.on { border-color: #5E9A55; background: #E3F0DF; } .hc-lock svg { width: 20px; height: 20px; flex: none; margin-top: 1px; } .hc-lock small { display: block; color: var(--mute); }
.hc-text { margin: 0; font-size: 14.5px; line-height: 1.45; white-space: pre-line; }
.hc-rule { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); } .hc-rule small { display: block; color: var(--mute); font-size: 12.5px; }
.hc-span { font-size: 13px; font-weight: 700; text-align: right; max-width: 42%; }
.hc-log { margin: 0; padding-left: 18px; font-size: 14px; } .hc-log small { display: block; color: var(--mute); font-size: 12px; }
.hc-warn { display: flex; gap: 6px; align-items: flex-start; } .hc-warn svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.hl-wrap { display: flex; justify-content: center; margin: 14px 0; }
.hl-label { width: 55mm; box-sizing: border-box; padding: 3mm; background: #fff; color: #000; border: 1px solid #000; border-radius: 2mm; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; line-height: 1.25; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.hl-type { margin: 0; font-size: 7.5pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #000; padding-bottom: 1mm; }
.hl-name { margin: 1.5mm 0; font-size: 10.5pt; font-weight: 700; }
.hl-kv { display: grid; grid-template-columns: auto 1fr; gap: .5mm 3mm; } .hl-kv span { font-size: 8pt; } .hl-kv b { font-size: 9pt; } .hl-end { font-size: 10.5pt !important; }
.hl-al { margin: 1.5mm 0 0; font-size: 7.5pt; }
.lbl-card.nat { max-width: 60mm; }
@media print { .hl-wrap { margin: 0; justify-content: flex-start; } .hl-label { box-shadow: none; } .hc-warn { display: none !important; } }
/* HACCP framework (t622u) */
.hc-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; vertical-align: 1px; }
.hc-tag.L { background: #F6D9D4; color: #8E2A1C; } .hc-tag.G { background: #FBF0D2; color: #7A5A12; } .hc-tag.O { background: #E3EAF3; color: #1F3A5F; }
.hc-type { border: 1px solid var(--rule); border-radius: 12px; padding: 0 12px; margin: 0 0 8px; background: #fff; }
.hc-type summary { cursor: pointer; padding: 10px 0; list-style: none; } .hc-type summary::-webkit-details-marker { display: none; }
.hc-type summary b { display: block; } .hc-type summary small { color: var(--mute); font-size: 12.5px; }
.hc-type[open] { padding-bottom: 10px; } .hc-type .hc-text { margin-bottom: 8px; }
.hc-tab { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 6px; } .hc-tab td, .hc-tab th { border-top: 1px solid var(--rule); padding: 5px 4px; text-align: left; vertical-align: top; }
.hc-tab small { color: var(--mute); } .hc-ccp th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--mute); }
.hc-sub { margin: 8px 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.hc-law { display: flex; gap: 6px; font-size: 13px; line-height: 1.4; margin: 6px 0; color: #5a4a2a; } .hc-law svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.seg.hc-st { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0 0 12px; }
/* validated processes (t624u) */
.hc-vp .hc-vpbadge { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.hc-vp.no { box-shadow: inset 3px 0 0 #B3261E; padding-left: 10px; } .hc-vp.no .hc-vpbadge { background: #F6D9D4; color: #8E2A1C; }
.hc-vp.ok { box-shadow: inset 3px 0 0 #B8902F; padding-left: 10px; } .hc-vp.ok .hc-vpbadge { background: #F7ECCB; color: #6B5114; }
.hc-block { display: flex; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid #B3261E; background: #FBE4E0; color: #6E1E15; margin: 6px 0 12px; } .hc-block svg { width: 20px; height: 20px; flex: none; } .hc-block small { display: block; margin-top: 2px; }
.hc-own { display: flex; gap: 6px; font-size: 13px; color: var(--mute); margin: 4px 0 14px; } .hc-own svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
/* HACCP visual: principles and the food journey (t634u) */
.hp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 720px) { .hp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hp-card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 11px; border-radius: 14px; background: #fff; border: 1px solid var(--rule); color: inherit; text-decoration: none; min-height: 112px; }
.hp-card:active { transform: scale(.98); } .hp-card b { font-size: 14.5px; line-height: 1.25; } .hp-card small { font-size: 12.5px; color: var(--mute); line-height: 1.35; }
.hp-n { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: #1F3A5F; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.hp-ic svg { width: 22px; height: 22px; color: #B8902F; }
.hp-card:nth-child(2) { background: #FBF4E0; border-color: #E2C877; }
.hf-flow { display: flex; flex-direction: column; }
.hf-step { border-radius: 14px; background: #fff; border: 1px solid var(--rule); padding: 11px 12px; }
.hf-step.ccp { border: 1.5px solid #C9A13E; background: #FFFBF0; box-shadow: inset 4px 0 0 #B8902F; }
.hf-step.side { border: 1.5px dashed #9AA3AE; background: #F6F7F8; margin-top: 6px; }
.hf-top { display: flex; align-items: center; gap: 10px; } .hf-top b { display: block; font-size: 15px; } .hf-top small { display: block; color: var(--mute); font-size: 12.5px; }
.hf-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #EEF1F4; flex: none; } .hf-ic svg { width: 20px; height: 20px; }
.hf-step.ccp .hf-ic { background: #F3E3B5; color: #6B5114; }
.hf-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #EEF1F4; color: #55606C; flex: none; }
.hf-step.ccp .hf-badge { background: #B8902F; color: #fff; }
.hf-dl { display: grid; grid-template-columns: 92px 1fr; gap: 4px 10px; margin: 10px 0 0; font-size: 13px; line-height: 1.4; }
.hf-dl dt { color: var(--mute); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; padding-top: 1px; } .hf-dl dd { margin: 0; }
.hf-line { margin: 8px 0 0 44px; font-size: 13px; color: #4A5560; line-height: 1.4; }
.hf-tools { display: flex; gap: 14px; margin: 8px 0 0 44px; } .hf-tools button[disabled] { opacity: .35; }
.hf-arrow { align-self: center; width: 2px; height: 22px; background: #C3CAD2; position: relative; margin: 2px 0 6px; }
.hf-arrow::after { content: ''; position: absolute; left: -4px; bottom: -4px; border: 5px solid transparent; border-top: 6px solid #C3CAD2; border-bottom: 0; }
.hf-sidehead { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); } .hf-sidehead svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.hf-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0; font-size: 12px; color: var(--mute); } .hf-key .k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; } .hf-key .k.ccp { background: #B8902F; } .hf-key .k.pre { background: #fff; border: 1px solid #9AA3AE; }
.hf-suggs { margin-top: 12px; }
@media (min-width: 720px) { .hf-dl { grid-template-columns: 120px 1fr; } }
.hf-top .grow { flex: 1; min-width: 0; } .hf-tools .linkish { font-size: 13px; padding: 0; min-height: 0; } .hf-tools { margin-left: 44px; }
/* HACCP plan sections as cards (t635u) */
.hv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
@media (min-width: 720px) { .hv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hv-tile { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 0 12px; }
.hv-tile summary { list-style: none; cursor: pointer; padding: 12px 0; display: flex; flex-direction: column; gap: 6px; } .hv-tile summary::-webkit-details-marker, .hv-row summary::-webkit-details-marker, .hv-if summary::-webkit-details-marker, .hv-item summary::-webkit-details-marker { display: none; }
.hv-tile[open] { grid-column: 1 / -1; padding-bottom: 12px; } .hv-tile p, .hv-item p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.45; }
.hv-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #F3E3B5; color: #6B5114; flex: none; } .hv-ic svg { width: 20px; height: 20px; }
.hv-num summary { gap: 2px; } .hv-big { font-family: var(--serif, Georgia, serif); font-size: 28px; font-weight: 600; color: #1F3A5F; line-height: 1.1; } .hv-num small { font-size: 12.5px; color: var(--mute); }
.hv-num .hc-tag { align-self: flex-start; margin-top: 3px; }
.hv-row summary, .hv-if summary { display: flex; align-items: center; gap: 10px; }
.hv-pill { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #E3EAF3; color: #1F3A5F; flex: none; white-space: nowrap; }
.hv-link { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; margin: 0 12px 6px 0; } .hv-link svg { width: 14px; height: 14px; }
.hv-ed { font-size: 13px; }
.hv-if { box-shadow: inset 4px 0 0 #B3261E; } .hv-iflab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; background: #F6D9D4; color: #8E2A1C; flex: none; }
.hv-chips { display: flex; flex-wrap: wrap; gap: 6px; } .hv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 6px; border-radius: 999px; background: #FFFBF0; border: 1.5px solid #C9A13E; color: inherit; text-decoration: none; font-size: 13px; }
.hv-chip b { background: #B8902F; color: #fff; border-radius: 999px; padding: 2px 7px; font-size: 11px; }
.hf-step.hf-flash { outline: 3px solid #B8902F; outline-offset: 2px; transition: outline .3s; }
.hv-freqs { display: flex; flex-direction: column; }
.hv-box { border-radius: 14px; border: 1.5px solid #C3CAD2; background: #fff; padding: 10px 12px; }
.hv-box.f-daily { border-color: #8FB3D9; } .hv-box.f-weekly { border-color: #7FAF78; } .hv-box.f-monthly { border-color: #C9A13E; background: #FFFBF0; } .hv-box.f-yearly { border-color: #1F3A5F; }
.hv-boxh { margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.hv-item { border-top: 1px solid var(--rule); } .hv-item:first-of-type { border-top: 0; } .hv-item summary { list-style: none; cursor: pointer; padding: 8px 0; } .hv-item summary b::after { content: ' ›'; color: var(--mute); font-weight: 400; } .hv-item[open] summary b::after { content: ' ⌄'; }
.hv-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.hv-steps li { display: flex; gap: 12px; padding: 0 0 14px; position: relative; } .hv-steps li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: #E2C877; }
.hv-sn { width: 28px; height: 28px; border-radius: 50%; background: #B8902F; color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; flex: none; }
.hv-steps b { display: block; font-size: 14.5px; } .hv-steps small { display: block; font-size: 13px; color: #4A5560; line-height: 1.4; margin-top: 1px; }
.hv-offer { display: flex; gap: 10px; padding: 12px; border-radius: 14px; border: 1.5px solid #C9A13E; background: linear-gradient(135deg, #FFFBF0, #F7ECCB); margin: 0 0 8px; } .hv-offer svg { width: 22px; height: 22px; color: #6B5114; flex: none; } .hv-offer small { display: block; font-size: 13px; color: #5a4a2a; margin-top: 2px; line-height: 1.4; }
/* t720u: one tag look app-wide (chef menus and FOH order list): N red, V/VG green */
.diet abbr.d-N, .diet-key b.d-N { border-color: var(--res-red-edge, #c0392b); background: var(--res-red, #b3261e); color: #fff; }
.diet abbr.d-V, .diet abbr.d-VG, .diet-key b.d-V, .diet-key b.d-VG { border-color: #2e7d4f; background: #e3f2e8; color: #1f5e3a; }
.diet-key b { display: inline-block; font-size: 10.5px; letter-spacing: .04em; border: 1px solid var(--rule); border-radius: 4px; padding: 0 4px; }
/* ---- branded menu templates (js/menu-print.js) ---- */
.mt-page { background: linear-gradient(180deg, var(--mt-paper) 0%, var(--mt-paper2) 100%); color: var(--mt-ink); font-family: var(--mt-body); max-width: 210mm; min-height: 280mm; margin: 0 auto; padding: 12mm 17mm 10mm; border-top: 6px solid var(--mt-lane); box-shadow: 0 2px 14px rgba(0,0,0,.12); display: flex; flex-direction: column; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mt-head { text-align: center; } .mt-head img { height: 15mm; } .mt-word { font-family: var(--mt-disp); font-weight: 600; letter-spacing: .42em; color: var(--mt-lane); margin: 2mm 0 3mm; font-size: 12pt; }
.mt-head h1 { font-family: var(--mt-disp); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mt-lane); font-size: 20pt; margin: 0; } .mt-sub { font-family: var(--mt-disp); font-style: italic; margin: 2mm 0 8mm; font-size: 12pt; }
.mt-feast-card .mt-course h2 { font-family: var(--mt-disp); font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--mt-lane); font-size: 10.5pt; border-bottom: 1px solid var(--mt-rule); padding-bottom: 1.5mm; margin: 6mm 0 3mm; }
.mt-feast-card .mt-dish { text-align: center; margin: 0 0 2.5mm; } .mt-feast-card .mt-name { font-family: var(--mt-disp); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: 11pt; margin: 0; }
.mt-feast-card .mt-desc { font-family: var(--mt-disp); font-style: italic; color: var(--mt-mute); font-size: 10pt; margin: .5mm 0 0; } .mt-diet { font-family: var(--mt-body); letter-spacing: .05em; font-size: 8pt; color: var(--mt-accent); } .mt-price { font-family: var(--mt-body); letter-spacing: 0; font-size: 9.5pt; margin-left: 2mm; }
.mt-foot { margin-top: auto; padding-top: 8mm; text-align: center; font-size: 8.5pt; color: var(--mt-mute); border-top: 1px solid var(--mt-rule); } .mt-foot p { margin: 1mm 0; }
.mt-run { display: flex; justify-content: center; align-items: center; gap: 4mm; letter-spacing: .4em; text-transform: uppercase; font-size: 9pt; color: var(--mt-lane); border-bottom: 1px solid var(--mt-rule); padding-bottom: 4mm; margin-bottom: 6mm; } .mt-run img { height: 8mm; }
.mt-tasting .mt-course { text-align: center; margin: 5mm 0; } .mt-kick { color: var(--mt-accent); letter-spacing: .3em; text-transform: uppercase; font-size: 8.5pt; font-weight: 600; margin: 0 0 3mm; }
.mt-tasting .mt-dish h3 { font-family: var(--mt-disp); font-weight: 500; font-size: 17pt; letter-spacing: .03em; margin: 0; } .mt-tasting .mt-desc { font-size: 10pt; margin: 1mm auto 0; max-width: 140mm; } .mt-meta { font-family: var(--mt-disp); font-style: italic; color: var(--mt-mute); font-size: 10pt; margin: 1mm 0 0; } .mt-orn { color: var(--mt-accent); font-size: 7pt; margin: 3mm 0; }
.mt-layouts { display: inline-flex; gap: 6px; align-items: center; }
@media print { .mt-page { box-shadow: none; margin: 0; max-width: none; min-height: 270mm; } }
/* t857u: the prep engine's suggestion on an untapped line: a dotted border (green needed, yellow soon / stock low, red short or none left) */
.pp-row.l0.sg1 { border: 2px dotted #3E8E33; }
.pp-row.l0.sg2 { border: 2px dotted #C99A00; }
.pp-row.l0.sg3 { border: 2px dotted #C2412F; }
.eod .eod-row { border-top: 1px solid var(--rule); padding: 8px 0; }
.eod .eod-row p { margin: 0 0 6px; }
.eod-no { color: #A2321F; font-weight: 600; } .eod-ok { color: #2F6B27; font-weight: 600; }