/* =====================================================================
   Hospitality Ops Desk – design system
   A back-office instrument for the licensed trade: till-roll white,
   bottle-green accent (user-rebrandable), deep green-black ink, and
   computed figures presented as printed chits. Tabular figures on all
   money. One stylesheet for the app, its printed documents, and the
   landing page.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  --paper: #F4F7F5;
  --surface: #FFFFFF;
  --ink: #13211B;
  --ink2: #43524B;
  --ink3: #66746D;
  --line: #DEE5E1;
  --line2: #C3CEC8;

  --accent: #175E48;            /* overridden from Settings */
  --accent-rgb: 23, 94, 72;     /* overridden from Settings */
  --accent-ink: #FFFFFF;        /* computed for contrast    */
  --accent-strong: #124B3A;     /* computed darker shade    */

  --ok: #156B3E; --ok-soft: #E6F2EB; --ok-line: #BCDCC9;
  --warn: #8A5800; --warn-soft: #FBF2DE; --warn-line: #EAD6A4;
  --bad: #AE241B; --bad-soft: #FBEBE9; --bad-line: #EFC7C2;
  --blue: #2A5D88; --blue-soft: #E8F0F7;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

  --r: 12px; --r-sm: 8px;
  --sh: 0 1px 2px rgba(19, 33, 27, .05), 0 6px 18px rgba(19, 33, 27, .05);
}

/* ---------- reset & base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 15px/1.55 var(--sans);
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0 0 .6em; } p:last-child { margin-bottom: 0; }
a { color: var(--accent-strong); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
::selection { background: rgba(var(--accent-rgb), .18); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 60; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }

.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.r { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.sub { display: block; font-size: 12px; color: var(--ink3); font-weight: 400; margin-top: 1px; }
.is-ok { color: var(--ok); font-weight: 600; }
.is-warn { color: var(--warn); font-weight: 600; }
.is-bad { color: var(--bad); font-weight: 600; }
.is-muted { opacity: .55; }
.mini-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); margin: 18px 0 8px; font-weight: 700; }
.icn { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   APP SHELL
   ===================================================================== */
.app { display: grid; min-height: 100vh; grid-template-columns: 1fr; }
.app__col { display: flex; flex-direction: column; min-width: 0; }

/* --- left rail (desktop) --- */
.rail {
  display: none; position: sticky; top: 0; height: 100vh;
  background: var(--surface); border-right: 1px solid var(--line);
  flex-direction: column; padding: 18px 14px;
}
.rail__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); padding: 4px 8px 16px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.brand__t { display: grid; line-height: 1.15; }
.brand__t strong { font-size: 15px; letter-spacing: -0.01em; }
.brand__t span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink3); }
.brandmark {
  width: 36px; height: 36px; border-radius: 9px; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .02em; overflow: hidden; flex: 0 0 auto;
}
.brandmark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.brandmark--sm { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }

.nav { display: grid; gap: 2px; }
.nav__item {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 9px;
  color: var(--ink2); text-decoration: none; font-weight: 600; font-size: 14px; position: relative;
  transition: background .12s, color .12s;
}
.nav__item:hover { background: rgba(var(--accent-rgb), .07); color: var(--ink); }
.nav__item.is-active { background: rgba(var(--accent-rgb), .1); color: var(--accent-strong); }
.nav__item.is-active::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.rail__foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink3); }
.rail__foot .ver { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; }

/* --- top bar (mobile) --- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line); padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.topbar__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-size: 14px; min-width: 0; }
.topbar__brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
.crumb { margin-left: auto; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 700; }
.topbar__gear { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--ink2); }
.topbar__gear:hover { background: var(--paper); }

/* --- bottom nav (mobile) --- */
.bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(52px, 1fr);
  overflow-x: auto; scrollbar-width: none;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}
.bnav__item { display: grid; justify-items: center; gap: 2px; padding: 7px 2px; text-decoration: none; color: var(--ink3); font-size: 10.5px; font-weight: 600; border-radius: 9px; }
.bnav__item .icn { width: 21px; height: 21px; }
.bnav__item.is-active { color: var(--accent-strong); background: rgba(var(--accent-rgb), .1); }

/* --- main --- */
.main { flex: 1; width: 100%; max-width: 1140px; margin: 0 auto; padding: 18px 16px 96px; }
.module { display: grid; gap: 16px; }

/* --- sample banner --- */
.sample {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  background: var(--warn-soft); border-bottom: 1px solid var(--warn-line); color: var(--warn);
  padding: 7px 14px; font-size: 13px; font-weight: 600; text-align: center;
}

/* --- lock overlay --- */
.lockov { position: fixed; inset: 0; z-index: 80; background: var(--paper); display: grid; place-items: center; padding: 20px; }
.lock__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 28px; width: min(360px, 100%); display: grid; gap: 12px; text-align: center; justify-items: center; }
.lock__card .icn { width: 30px; height: 30px; color: var(--accent-strong); }
.lock__msg { color: var(--ink2); font-size: 14px; }
body.locked { overflow: hidden; }

/* --- toasts --- */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: grid; gap: 8px; width: min(480px, calc(100% - 28px)); }
.toast { background: var(--ink); color: #fff; border-radius: 10px; padding: 11px 15px; font-size: 13.5px; box-shadow: var(--sh); opacity: 1; transition: opacity .3s, transform .3s; }
.toast--bad { background: var(--bad); }
.toast--warn { background: var(--warn); }
.toast.out { opacity: 0; transform: translateY(6px); }

@media (min-width: 960px) {
  .app { grid-template-columns: 232px 1fr; }
  .rail { display: flex; }
  .topbar, .bnav { display: none; }
  .main { padding: 28px 32px 60px; }
  .toasts { bottom: 24px; }
}

/* =====================================================================
   COMPONENTS
   ===================================================================== */

/* --- cards & module headers --- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 18px; }
.card--hero { border-top: 3px solid var(--accent); }
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card__head h2 { font-size: 16.5px; font-weight: 750; }

.mod-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 4px 2px 0; }
.mod-head h1 { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }
.lede { color: var(--ink2); font-size: 14px; max-width: 60ch; margin-top: 4px; }
.mod-head__stat { text-align: right; }
.stat__n { display: block; font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stat__l { display: block; font-size: 12px; color: var(--ink3); max-width: 280px; }

/* --- the chit (till-receipt) --- */
.chit {
  position: relative; background: var(--surface); border: 1px solid var(--line2); border-top: 0;
  border-radius: 0 0 10px 10px; font-family: var(--mono); font-size: 13px;
  margin-top: 8px; box-shadow: var(--sh);
}
.chit::before {
  content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 7px;
  background: radial-gradient(circle at 5px 7px, var(--surface) 4.4px, transparent 5px) repeat-x;
  background-size: 10px 7px;
  filter: drop-shadow(0 -1px 0 var(--line2));
}
.chit__hd { padding: 12px 14px 8px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); font-weight: 700; border-bottom: 1px solid var(--line); font-family: var(--sans); }
.chit__rows { padding: 8px 14px; display: grid; gap: 5px; }
.crow { display: flex; justify-content: space-between; gap: 14px; }
.crow span:first-child { color: var(--ink2); }
.crow--bad span { color: var(--bad); }
.chit__total { display: flex; justify-content: space-between; gap: 14px; padding: 10px 14px 12px; border-top: 1px dashed var(--line2); font-weight: 700; font-size: 14px; }
.chit--ok .chit__total { color: var(--ok); }
.chit--bad .chit__total { color: var(--bad); }
.chit--bad { border-color: var(--bad-line); }
.chit--bad::before { filter: drop-shadow(0 -1px 0 var(--bad-line)); }

/* --- hero pair + delta band --- */
.hero__pair { display: grid; gap: 16px; }
@media (min-width: 760px) { .hero__pair { grid-template-columns: 1fr 1fr; } }
.hero__delta {
  margin-top: 14px; border: 1px solid var(--bad-line); background: var(--bad-soft);
  border-radius: 10px; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
}
.hero__delta-big { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 800; color: var(--bad); letter-spacing: -0.02em; }
.hero__delta-sub { color: var(--ink2); font-size: 13.5px; max-width: 62ch; }

/* --- notes --- */
.note { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: var(--ink2); margin-top: 12px; }
.note .icn { margin-top: 1px; }
.note--ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.note--warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.note--bad { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }

/* --- help --- */
.help { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.help summary { display: flex; align-items: center; gap: 9px; padding: 13px 16px; cursor: pointer; font-weight: 650; font-size: 14px; list-style: none; color: var(--accent-strong); }
.help summary::-webkit-details-marker { display: none; }
.help .chev { margin-left: auto; transition: transform .15s; color: var(--ink3); }
.help[open] .chev { transform: rotate(90deg); }
.help__body { padding: 2px 16px 16px; color: var(--ink2); font-size: 14px; border-top: 1px solid var(--line); padding-top: 12px; }

/* --- empty states --- */
.empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 34px 18px; }
.empty .icn { width: 34px; height: 34px; color: var(--accent); background: rgba(var(--accent-rgb), .1); border-radius: 50%; padding: 8px; box-sizing: content-box; }
.empty h3 { font-size: 16px; }
.empty p { color: var(--ink2); font-size: 14px; max-width: 46ch; }

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink); border-radius: 9px; padding: 9px 15px;
  font-weight: 650; font-size: 14px; cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--accent-strong); }
.btn--ghost { background: transparent; color: var(--ink2); border-color: var(--line2); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn--sm { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn--danger { color: var(--bad); border-color: var(--bad-line); }
.btn--danger:hover { background: var(--bad-soft); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-row--end { justify-content: flex-end; margin-top: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .15); cursor: pointer; padding: 0; }
input[type="color"] { width: 42px; height: 30px; border: 1px solid var(--line2); border-radius: 7px; padding: 2px; background: #fff; cursor: pointer; }

/* --- fields --- */
.fld { display: grid; gap: 5px; min-width: 0; }
.fld__l, .fld legend.fld__l { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink3); font-weight: 700; }
fieldset.fld { border: 0; padding: 0; margin: 0; }
.fld--inline { grid-auto-flow: column; align-items: center; gap: 8px; }
.inp, select.inp, textarea.inp {
  width: 100%; border: 1px solid var(--line2); border-radius: var(--r-sm); background: #fff; color: var(--ink);
  padding: 9px 11px; font: inherit; font-size: 14px; min-width: 0;
}
textarea.inp { resize: vertical; }
.inp:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inp--sm { padding: 6px 9px; font-size: 13.5px; width: auto; max-width: 130px; }
.inp--ro { background: var(--paper); display: inline-block; }
.inp.r { font-variant-numeric: tabular-nums; }
.unit { font-size: 12px; color: var(--ink3); }
input[type="date"].inp { min-height: 38px; }

.grid { display: grid; gap: 12px; margin-bottom: 12px; }
.grid:last-child { margin-bottom: 0; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--fore { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
@media (max-width: 760px) { .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
.seg-row { align-items: end; }

/* --- segmented control --- */
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 9px; overflow: hidden; background: #fff; }
.seg__btn { border: 0; background: transparent; padding: 8px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.seg__btn + .seg__btn { border-left: 1px solid var(--line); }
.seg__btn.is-on { background: var(--accent); color: var(--accent-ink); }

/* --- checkboxes --- */
.ckb { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.ckb input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent); }
.ckb--lone { padding: 6px 0; }
.alg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; }

/* --- tables --- */
.tbl-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.8px; }
.tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); padding: 8px 10px; border-bottom: 1.5px solid var(--line2); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl td.r { font-family: var(--mono); font-size: 12.8px; }
.tbl tfoot td { border-top: 2px solid var(--line2); border-bottom: 0; font-weight: 650; background: var(--paper); }
.tbl__group td { background: var(--paper); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 750; color: var(--ink3); padding: 7px 10px; }
.tbl--tight td { padding: 7px 10px; }
.th-btn { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

/* training matrix cells */
.tbl--matrix td { padding: 6px 6px; }
.cell { width: 100%; min-width: 92px; border-radius: 7px; border: 1px dashed var(--line2); background: transparent; padding: 7px 6px; font-size: 12.5px; font-family: var(--mono); cursor: pointer; color: var(--ink3); }
.cell--green { background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--ok); font-weight: 650; }
.cell--amber { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); font-weight: 650; }
.cell--red { background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--bad); font-weight: 700; }

/* --- chips & badges --- */
.rag { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.rag--green { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); }
.rag--amber { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }
.rag--red { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad-line); }
.rag--none { background: var(--paper); color: var(--ink3); border: 1px solid var(--line); }

.achips { line-height: 1.9; }
.achip { display: inline-block; background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--bad); border-radius: 6px; padding: 1.5px 7px; font-size: 12px; font-weight: 600; margin: 1px 4px 1px 0; }
.achip--may { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }

.qbadge { display: inline-block; border-radius: 6px; padding: 2.5px 9px; font-size: 11.5px; font-weight: 750; letter-spacing: .02em; white-space: nowrap; }
.q-star { background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); }
.q-plough { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }
.q-puzzle { background: var(--blue-soft); color: var(--blue); border: 1px solid #C4D7E6; }
.q-dog { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad-line); }

/* --- checklist / flags --- */
.cklist, .flaglist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.ck { display: flex; gap: 9px; align-items: flex-start; font-size: 13.8px; color: var(--ink2); }
.ck .icn { margin-top: 1px; color: var(--ink3); }
.ck--ok .icn { color: var(--ok); }
.ck--bad { color: var(--bad); } .ck--bad .icn { color: var(--bad); }
.ck--warn { color: var(--warn); } .ck--warn .icn { color: var(--warn); }
.ck label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.ck input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); }

/* --- rota board --- */
.board { display: grid; grid-template-columns: repeat(7, minmax(148px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.day { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 148px; align-content: start; }
.day__head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 14px; }
.day__stats { display: grid; gap: 4px; font-family: var(--mono); font-size: 12px; }
.day__list { display: grid; gap: 7px; align-content: start; }
.day__empty { color: var(--ink3); text-align: center; padding: 8px 0; }
.day__add { justify-content: center; }
.shift {
  display: grid; gap: 2px; text-align: left; background: var(--surface); border: 1px solid var(--line2);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 9px; cursor: pointer; width: 100%;
}
.shift:hover { border-color: var(--accent); }
.shift--flag { border-left-color: var(--bad); }
.shift__who { font-weight: 650; font-size: 13.5px; }
.shift__time { font-size: 12px; color: var(--ink2); }
.shift__cost { font-family: var(--mono); font-size: 12px; color: var(--ink2); }
.shift__warn { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; color: var(--bad); font-weight: 650; }
.shift__warn .icn { width: 14px; height: 14px; }

/* --- doc buttons --- */
.doc-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.doc-btn { display: grid; gap: 5px; justify-items: start; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px; cursor: pointer; transition: border-color .12s, background .12s; }
.doc-btn:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .05); }
.doc-btn .icn { color: var(--accent-strong); width: 21px; height: 21px; }
.doc-btn strong { font-size: 14px; }
.doc-btn span { font-size: 12.5px; color: var(--ink3); }

/* --- recipe rows / dish live bar --- */
.recipe-row { display: grid; grid-template-columns: 1fr 92px minmax(90px, auto) 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.recipe-row__cost { font-family: var(--mono); font-size: 12.5px; color: var(--ink2); }
.dish-live { display: flex; flex-wrap: wrap; gap: 8px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; font-size: 13.5px; margin-top: 12px; font-variant-numeric: tabular-nums; }

/* --- advice list --- */
.advice-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.advice { display: flex; gap: 10px; align-items: flex-start; }
.advice p { font-size: 13px; color: var(--ink2); margin: 1px 0 0; }
.advice .qbadge { margin-top: 1px; min-width: 96px; text-align: center; }

/* --- matrix SVG --- */
.matrix { width: 100%; height: auto; display: block; }
.mx-bg { fill: #fff; stroke: var(--line); }
.mx-q { stroke: var(--line2); stroke-dasharray: 5 4; stroke-width: 1.4; }
.mx-quad { font: 700 11px var(--sans); fill: var(--ink3); letter-spacing: .06em; text-transform: uppercase; }
.ax { font: 11px var(--sans); fill: var(--ink3); }
.ax--t { font-weight: 650; fill: var(--ink2); }
.dot { stroke: #fff; stroke-width: 1.6; }
.dot--star { fill: var(--ok); } .dot--plough { fill: #C08A10; } .dot--puzzle { fill: var(--blue); } .dot--dog { fill: var(--bad); }
.dot-label { font: 600 11px var(--sans); fill: var(--ink2); }

/* --- allergen matrix (screen) --- */
.tbl--alg th, .tbl--alg td { text-align: center; }
.tbl--alg .mx-name { text-align: left; min-width: 170px; }
.tbl--alg .mx-al { padding: 6px 3px; }
.vtxt { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; min-height: 64px; letter-spacing: .04em; }
.mx-cell { font-family: var(--mono); font-size: 14px; }
.mx-cell.is-has { color: var(--bad); font-weight: 800; }
.mx-cell.is-may { color: var(--warn); font-weight: 700; }
.mx-legend { font-size: 12px; color: var(--ink3); margin-top: 8px; }
.mx-notes { font-size: 12px; color: var(--ink2); margin: 6px 0 0; padding-left: 18px; }

/* --- dialogs --- */
.dlg { border: 1px solid var(--line2); border-radius: 14px; padding: 0; width: min(620px, calc(100% - 28px)); box-shadow: 0 18px 50px rgba(19, 33, 27, .22); }
.dlg--wide { width: min(780px, calc(100% - 28px)); }
.dlg::backdrop { background: rgba(19, 33, 27, .45); }
.dlg__body { padding: 20px; display: grid; gap: 13px; }
.dlg h3 { font-size: 16.5px; }

/* =====================================================================
   LANDING PAGE  (.ld-)
   ===================================================================== */
.ld-body { background: var(--paper); }
.ld-wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }
.ld-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.ld-top nav { display: flex; gap: 8px; flex-wrap: wrap; }
.ld-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: -0.01em; }
.ld-tag { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }

.ld-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); background: rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 999px; padding: 5px 12px; }
.ld-hero { display: grid; gap: 34px; padding: 42px 0 26px; align-items: center; }
@media (min-width: 900px) { .ld-hero { grid-template-columns: 1.05fr .95fr; padding: 64px 0 40px; } }
.ld-hero h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 850; letter-spacing: -0.03em; line-height: 1.06; margin: 16px 0 14px; }
.ld-sub { font-size: 17px; color: var(--ink2); max-width: 56ch; }
.ld-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.btn--lg { padding: 13px 22px; font-size: 15.5px; border-radius: 11px; }
.ld-micro { font-size: 12.5px; color: var(--ink3); }
.ld-section { padding: 34px 0; }
.ld-section h2 { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.ld-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.ld-lede { color: var(--ink2); max-width: 68ch; font-size: 15.5px; }
.ld-grid { display: grid; gap: 14px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ld-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--sh); }
.ld-feature .icn { width: 22px; height: 22px; color: var(--accent-strong); }
.ld-feature h3 { font-size: 15.5px; margin: 9px 0 6px; }
.ld-feature p { font-size: 13.8px; color: var(--ink2); }
.ld-hook { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 22px; box-shadow: var(--sh); }
.ld-why li { margin-bottom: 8px; color: var(--ink2); }
.ld-quote { border: 1.5px dashed var(--line2); border-radius: var(--r); padding: 18px; background: repeating-linear-gradient(-45deg, #fff 0 10px, var(--paper) 10px 20px); color: var(--ink3); font-size: 14px; display: grid; gap: 8px; }
.ld-quote strong { color: var(--ink2); }

.ld-prices { display: grid; gap: 14px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--sh); display: grid; gap: 10px; align-content: start; }
.price-card--hot { border: 2px solid var(--accent); position: relative; }
.price-flag { position: absolute; top: -11px; left: 18px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; }
.price-name { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.price-n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.price-n small { font-size: 14px; font-weight: 600; color: var(--ink3); }
.price-founder { font-size: 12.5px; color: var(--accent-strong); font-weight: 700; }
.price-sub { font-size: 12.5px; color: var(--ink3); font-weight: 600; margin-top: -2px; }
.ld-sub { max-width: 760px; margin: 0 auto 22px; text-align: center; color: var(--ink2); font-size: 15px; line-height: 1.55; }
.ld-compare { max-width: 720px; margin: 22px auto 0; padding: 16px 20px; border: 1px solid var(--line2); border-left: 3px solid var(--gold); border-radius: 8px; background: var(--surface); }
.ld-compare p { margin: 0; font-size: 13.5px; line-height: 1.6; }
.price-card ul { margin: 4px 0 8px; padding-left: 18px; color: var(--ink2); font-size: 13.8px; display: grid; gap: 5px; }
.ld-guarantee { text-align: center; color: var(--ink2); font-size: 14px; margin-top: 16px; }
.ld-faq { display: grid; gap: 9px; margin-top: 18px; max-width: 780px; }
.ld-final { text-align: center; padding: 54px 0 60px; }
.ld-final h2 { margin-bottom: 18px; }
.ld-foot { border-top: 1px solid var(--line); padding: 22px 0 34px; font-size: 12.5px; color: var(--ink3); }
.ld-shot { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--sh); padding: 18px; }
.ld-shot .fld--inline { margin-bottom: 4px; }


/* =====================================================================
   ROTA v2 – colour-separated takings, views, checklist
   ===================================================================== */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink2); }
.lg { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.lg::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.lg--cost::before { background: var(--ink); }
.lg--fore::before { background: var(--blue); }
.lg--act::before { background: var(--ok); }
.val-cost { color: var(--ink); } .val-fore { color: var(--blue); } .val-act { color: var(--ok); }

.dstat { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 650; }
.dstat em { font-style: normal; font-family: var(--sans); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }

.fa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.fa-cell { display: grid; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 8px; align-content: start; }
.fa-day { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.fld__l--fore { color: var(--blue); } .fld__l--act { color: var(--ok); }
.inp--fore { border-color: #AECBE2; } .inp--fore:focus-visible { outline-color: var(--blue); }
.inp--act { border-color: var(--ok-line); } .inp--act:focus-visible { outline-color: var(--ok); }
.fa-cell .inp--sm { width: 100%; max-width: none; }

.wchk { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wchk__day h4 { font-size: 13px; margin-bottom: 6px; }
.help--flat { border: 0; background: transparent; margin-top: 12px; }
.help--flat summary { padding: 8px 0; }
.help--flat .help__body { border-top: 0; padding: 0 0 6px; }

.btn--flip .icn { transform: rotate(180deg); }
.is-flagged td { background: var(--bad-soft); }

.mgrid__head { display: grid; grid-template-columns: 40px repeat(7, 1fr); gap: 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink3); font-weight: 750; padding: 0 0 6px; }
.mgrid { display: grid; gap: 6px; }
.mgrid__wk { display: grid; grid-template-columns: 40px repeat(7, 1fr); gap: 6px; }
.mgrid__wn { display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink3); background: var(--paper); border-radius: 8px; }
.mcell { display: grid; gap: 2px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; cursor: pointer; min-height: 74px; align-content: start; }
.mcell:hover { border-color: var(--accent); }
.mcell--out { opacity: .4; }
.mcell--today { outline: 2px solid var(--accent); outline-offset: 1px; }
.mcell__d { font-weight: 800; font-size: 12.5px; }
.mmini { font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* =====================================================================
   TIME CLOCK – kiosk
   ===================================================================== */
.kiosk { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kbtn { display: grid; gap: 3px; justify-items: center; background: var(--paper); border: 1.5px solid var(--line2); border-radius: 12px; padding: 16px 10px; cursor: pointer; transition: border-color .12s, background .12s; }
.kbtn:hover { border-color: var(--accent); }
.kbtn__name { font-weight: 750; font-size: 15px; }
.kbtn__state { font-size: 11.5px; color: var(--ink3); font-family: var(--mono); }
.kbtn--in { background: var(--ok-soft); border-color: var(--ok-line); }
.kbtn--in .kbtn__state { color: var(--ok); font-weight: 700; }

/* =====================================================================
   TODAY – copilot, health score, inspection
   ===================================================================== */
.score-of { font-size: 14px; color: var(--ink3); font-weight: 600; }
.prio { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.prio a { color: inherit; text-decoration: none; }
.prio a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-grid { display: grid; gap: 14px 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hp { display: grid; gap: 4px; }
.hp__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 650; }
.hp__row strong { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; }
.hp__bar { height: 7px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.hp__bar span { display: block; height: 100%; border-radius: 999px; background: var(--line2); transition: width .3s; }
.bar-ok { background: var(--ok) !important; }
.bar-warn { background: #C08A10 !important; }
.bar-bad { background: var(--bad) !important; }

/* =====================================================================
   IMPORTS – choices + review grid
   ===================================================================== */
.imp-choice { display: grid; gap: 5px; justify-items: start; text-align: left; padding: 14px; height: auto; white-space: normal; }
.imp-choice strong { font-size: 14.5px; }
.imp-choice .sub { font-weight: 500; }
.tbl--tight td, .tbl--tight th { padding: 5px 7px; }
.tbl--tight .inp--sm { min-width: 64px; }
.tbl--tight td:nth-child(2) .inp--sm { min-width: 180px; width: 100%; }
tr.is-off td { opacity: .45; }


/* =====================================================================
   MISE BRAND – plate mark, serif wordmark, landing refinement
   ===================================================================== */
:root { --gold: #C6A15B; --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif; }

.mise-plate { color: var(--accent); flex: 0 0 auto; }
.ld-brand .mise-plate { width: 40px; height: 40px; }
.mise-word { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--serif); font-weight: 600; font-size: 23px; letter-spacing: .02em; color: var(--ink); }
.mise-tagline { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }

.ld-kicker { color: var(--gold); letter-spacing: .18em; }
.ld-hero h1, .ld-section h2, .ld-final h2 { font-family: var(--serif); font-weight: 600; letter-spacing: .005em; }

/* quiet rhythm between sections: hairline + a breath of tinted paper */
.ld-section { border-top: 1px solid var(--line); }
.ld-alt { background: #EEF3EF; }
.ld-alt.ld-founder { background: linear-gradient(180deg, #EEF3EF, #E9EFE9); }

/* the suite – a tasting-menu card in the hero */
.ld-menu { background: var(--surface); border: 1px solid var(--line2); border-radius: 4px; padding: 26px 28px 22px; box-shadow: 0 18px 44px -22px rgba(19, 33, 27, .35); }
.ld-menu__head { text-align: center; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.ld-menu ul { list-style: none; margin: 0; padding: 0; }
.ld-menu li { display: grid; gap: 1px; padding: 9px 0; border-bottom: 1px dotted var(--line2); text-align: center; }
.ld-menu li:last-child { border-bottom: 0; }
.ld-menu strong { font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.ld-menu span { font-size: 11.5px; color: var(--ink3); font-style: italic; }

/* flagship: hook + live chit side by side */
.ld-flag { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; margin-top: 18px; }
@media (max-width: 860px) { .ld-flag { grid-template-columns: 1fr; } }

/* quotes with a gold rule – restrained, not gilded */
.ld-quote { border-left: 2px solid var(--gold); background: var(--surface); }
.ld-quote p { font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.55; }
.ld-quote strong { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }

.ld-founder blockquote { max-width: 780px; margin: 14px auto 0; text-align: center; }
.ld-founder blockquote p { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.6; color: var(--ink); }
.ld-founder blockquote strong { display: block; margin-top: 16px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.ld-founder blockquote strong::before { content: ""; display: block; width: 42px; height: 1px; background: var(--gold); margin: 0 auto 12px; }

.ld-foot-brand .mise-plate { width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; }

.bnav::-webkit-scrollbar { display: none; }
.stk-h { font-size: 13.5px; margin: 18px 0 8px; display: flex; align-items: baseline; gap: 10px; }
.stk-h:first-of-type { margin-top: 4px; }

.card--slim { padding: 14px 18px; }
.evrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.evcol { display: grid; gap: 4px; justify-items: start; padding: 8px 10px; border: 1px dashed var(--line2); border-radius: 8px; min-height: 52px; }
.evcol--on { border-style: solid; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
@media (max-width: 860px) { .evrow { grid-template-columns: repeat(2, 1fr); } }

.evchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.evchip { font-size: 10px; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: 2px 8px; background: #EEF3EF; border: 1px solid var(--line2); }
.evchip--bh { background: color-mix(in srgb, var(--gold) 18%, #fff); border-color: var(--gold); }
.evchip--music { border-color: var(--accent); } .evchip--sport { border-color: #3E5F8A; } .evchip--quiz { border-color: #7A5EA8; }
.fa-cell--event { outline: 1px solid var(--gold); outline-offset: -1px; border-radius: 8px; }

.ld-vig { margin: 0; background: var(--surface); border: 1px solid var(--line2); border-radius: 6px; padding: 18px 20px; box-shadow: 0 14px 30px -20px rgba(19,33,27,.35); }
.ld-vig figcaption { font-family: var(--serif); font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.ld-vig ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.ld-vig li { padding: 7px 0 7px 16px; border-bottom: 1px dotted var(--line2); position: relative; }
.ld-vig li:last-child { border-bottom: 0; }
.ld-vig li::before { content: ""; position: absolute; left: 0; top: 13px; width: 7px; height: 7px; border-radius: 50%; }
.v-bad::before { background: #B4442C; } .v-warn::before { background: var(--gold); } .v-ok::before { background: var(--accent); }
.ld-screen { width: 100%; border: 1px solid var(--line2); border-radius: 6px; }

.rcpt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.rcpt { position: relative; margin: 0; display: grid; gap: 4px; }
.rcpt img { width: 100%; height: 130px; object-fit: cover; border: 1px solid var(--line2); border-radius: 8px; background: #fff; }
.rcpt__open { padding: 0; border: 0; background: none; cursor: zoom-in; }
.rcpt__x { position: absolute; top: 4px; right: 4px; background: var(--surface); }
.rcpt figcaption { font-size: 11.5px; }
.dlg__body--wide { max-width: 560px; }

.site-switch { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); text-decoration: none; border: 1px solid var(--line2); border-radius: 999px; padding: 4px 12px; margin-right: 10px; }
.site-switch:hover { color: var(--accent); border-color: var(--accent); }

.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 6px; }
.tcell { display: grid; gap: 6px; justify-items: start; padding: 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--surface); }
.tcell--ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line2)); }
.tcell--bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 6%, var(--surface)); }
.tcell__head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.tcell__last { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

/* =====================================================================
   PRINT
   ===================================================================== */
#print-root { display: none; }
@page { size: A4; margin: 12mm; }

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  /* Printing a prepared document: only the document. */
  body.printing .app, body.printing .toasts, body.printing .lockov, body.printing .sample { display: none !important; }
  body.printing #print-root { display: block; }
  /* Printing the live screen (no prepared doc): hide chrome, keep content. */
  .rail, .topbar, .bnav, .toasts, .btn, .doc-grid, .sample, .day__add, dialog { display: none !important; }
  .app { display: block; }
  .card { border: 1px solid #bbb; box-shadow: none; break-inside: avoid; }
  a { color: #000; text-decoration: none; }

  .p-doc { font-family: var(--sans); color: #000; }
  .p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .p-brand { display: flex; gap: 10px; align-items: center; }
  .p-logo { max-height: 42px; max-width: 120px; object-fit: contain; }
  .p-biz { font-weight: 800; font-size: 15pt; letter-spacing: -0.01em; }
  .p-sub { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .12em; color: #555; }
  .p-meta { text-align: right; }
  .p-title { font-weight: 750; font-size: 12pt; }
  .p-date { font-size: 9pt; color: #555; }
  .p-rule { height: 2.6mm; background: var(--accent); margin: 4mm 0 6mm; border-radius: 1mm; }
  .p-body { font-size: 10pt; line-height: 1.5; }
  .p-block { margin-bottom: 7mm; }
  .p-block h2 { font-size: 13pt; margin-bottom: 2.5mm; letter-spacing: -0.01em; }
  .p-block h3 { font-size: 10.5pt; margin: 4mm 0 2mm; }
  .p-lede { color: #444; }
  .p-break { page-break-after: always; }
  .p-break:last-child { page-break-after: auto; }
  .p-dim { color: #555; font-size: 8.5pt; }

  .p-tbl { width: 100%; border-collapse: collapse; font-size: 9.2pt; margin: 2mm 0; }
  .p-tbl th { text-align: left; border-bottom: 1.6px solid #000; padding: 1.6mm 2mm; font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; }
  .p-tbl td { border-bottom: 1px solid #ccc; padding: 1.8mm 2mm; vertical-align: top; }
  .p-tbl .r, .p-kv .r { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 8.8pt; }
  .p-tbl tr { break-inside: avoid; }
  .p-tbl--sm { font-size: 7.8pt; } .p-tbl--sm td, .p-tbl--sm th { padding: 1.2mm 1.4mm; }

  .p-kv { width: 100%; border-collapse: collapse; font-size: 10pt; margin: 2mm 0 4mm; }
  .p-kv th { text-align: left; width: 34%; color: #444; font-weight: 650; padding: 1.8mm 2mm 1.8mm 0; vertical-align: top; border-bottom: 1px solid #ddd; font-size: 9pt; }
  .p-kv td { padding: 1.8mm 0; border-bottom: 1px solid #ddd; }
  .p-sign { margin-top: 8mm; } .p-sign th, .p-sign td { border-bottom: 0; }
  .p-line { border-bottom: 1px solid #555 !important; min-width: 70mm; height: 9mm; }

  .p-foot { margin-top: 8mm; padding-top: 3mm; border-top: 1px solid #999; font-size: 7.5pt; color: #555; }

  /* PPDS label sheet */
  .ppds-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; }
  .ppds { border: 1.2px solid #000; border-radius: 2mm; padding: 4mm; font-size: 8.6pt; line-height: 1.4; break-inside: avoid; display: grid; gap: 1.6mm; align-content: start; min-height: 46mm; }
  .ppds__name { font-size: 11.5pt; font-weight: 800; letter-spacing: -0.01em; border-bottom: 1px solid #000; padding-bottom: 1.2mm; }
  .ppds__ings .al, .ppds .al { font-weight: 800; text-decoration: underline; }
  .ppds__may { font-style: italic; }
  .ppds__meta { display: flex; flex-wrap: wrap; gap: 1mm 4mm; font-size: 8pt; }
  .ppds__biz { font-size: 7.4pt; color: #333; border-top: 1px dashed #999; padding-top: 1.2mm; }

  /* allergen matrix print */
  .p-alg { font-size: 8pt; }
  .p-alg th { padding: 1mm; }
  .p-alg .vtxt { min-height: 30mm; font-size: 7.6pt; }
  .p-alg .mx-cell { text-align: center; font-family: var(--mono); }
  .p-alg .mx-cell.is-has { font-weight: 800; }
  .mx-legend { font-size: 8pt; }
}