/* Kitchen Costing. Aoboshi One for titles (it has one weight, so titles are never bolded), Figtree for everything else. */
:root {
  --bg: #f5f2ec;
  --panel: #ffffff;
  --panel-2: #faf8f4;
  --ink: #1e2321;
  --muted: #6a706c;
  --line: #e6e1d6;
  --field-line: #d9d2c4;
  --brand: #1f5c4a;
  --brand-ink: #ffffff;
  --brand-soft: #e6efe9;
  --top: #1b4537;
  --top-ink: #f3efe6;
  --top-muted: #b9c9c0;
  --field: #ffffff;
  --up: #b42318;
  --up-bg: #fdecea;
  --down: #17663a;
  --down-bg: #e4f3e9;
  --check: #8a5a00;
  --check-bg: #fff4dc;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(30, 35, 33, 0.05), 0 6px 20px rgba(30, 35, 33, 0.05);
  --ring: 0 0 0 3px rgba(31, 92, 74, 0.18);
  --mark: #e0e8a8;
  --mark-ink: #5d6630;
  --serif: "Aoboshi One", Georgia, "Times New Roman", serif;
  --sans: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131715;
    --panel: #1b201e;
    --panel-2: #202624;
    --ink: #e9ece9;
    --muted: #a3aba6;
    --line: #2f3633;
    --field-line: #3b433f;
    --brand: #6cc3a2;
    --brand-ink: #0d1411;
    --brand-soft: #1d3129;
    --top: #0f1312;
    --top-ink: #eef0ec;
    --top-muted: #93a19a;
    --field: #222826;
    --up: #ff8a80;
    --up-bg: #3a1d1b;
    --down: #7fd6a0;
    --down-bg: #17301f;
    --check: #f2c46b;
    --check-bg: #3a2e14;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ring: 0 0 0 3px rgba(108, 195, 162, 0.25);
    --mark: #424a24;
    --mark-ink: #c7d08e;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1 { font: 400 2rem/1.15 var(--serif); margin: 0; letter-spacing: -0.01em; }
h1 .muted { font: 400 1rem var(--sans); letter-spacing: 0; }
h2 { font: 400 1.2rem/1.3 var(--serif); margin: 1.6rem 0 0.6rem; }
code { background: var(--panel-2); padding: 0 4px; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- top ---------- */
.top {
  display: flex; align-items: center; gap: 8px 28px;
  padding: 10px 28px; background: var(--top); color: var(--top-ink);
  position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.brand { display: flex; flex-direction: column; line-height: 1.1; color: var(--top-ink); text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand__name { font: 400 1.3rem var(--serif); }
.brand__sub { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--top-muted); }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 7px 14px; border-radius: 999px; color: var(--top-muted); white-space: nowrap; font-weight: 700; font-size: 0.92rem; }
.nav a:hover { color: var(--top-ink); background: rgba(255, 255, 255, 0.08); text-decoration: none; }
.nav a.on { background: var(--top-ink); color: var(--top); }
/* Commis: the optional Support button, at the far end of the bar. */
.top__support { margin-left: auto; flex: none; font: inherit; font-weight: 700; font-size: 0.86rem; padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28); background: none; color: var(--top-ink); cursor: pointer; }
.top__support:hover { background: rgba(255, 255, 255, 0.08); }
.top__support span:first-child { color: #f2a7a0; }
.support h2 { margin: 0 0 10px; font-size: 1.15rem; }
.support__options { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
/* Icons and short labels are for the phone's bottom bar. */
.nav__icon, .nav__short, .on-phone { display: none; }
.badge { display: inline-block; min-width: 1.5em; padding: 0 6px; margin-left: 2px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 0.72rem; line-height: 1.5; text-align: center; }
.mode { padding: 7px 28px; background: var(--check-bg); color: var(--check); font-size: 0.9rem; }

main { max-width: 1280px; margin: 0 auto; padding: 28px 28px 80px; outline: none; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.filters input[type="search"] { flex: 1 1 260px; min-width: 0; padding-left: 34px;
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.5 3.5'/%3E%3C/svg%3E") no-repeat 11px 50%; }
.filters select { max-width: 100%; }
.picked-total { font-weight: 700; color: var(--brand); }
/* Sections (and the other pick-one rows) read like the index of a printed menu rather than buttons: the names in a
   row with a dot between them, the count as a small raised number, and the ones picked marked as with a highlighter. */
.sections { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 14px; }
.sec { position: relative; font: inherit; font-size: 0.92rem; font-weight: 600; padding: 3px 7px; min-height: 30px;
  border: 0; border-radius: 3px 9px 4px 8px / 8px 4px 9px 3px; background: none; color: var(--muted); cursor: pointer;
  transition: color 0.15s, background-color 0.15s; }
.sec + .sec { margin-left: 13px; }
.sec + .sec::before { content: ""; position: absolute; left: -9px; top: 50%; width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%; background: var(--field-line); pointer-events: none; }
.sec:hover { color: var(--ink); text-decoration: underline 2px var(--field-line); text-underline-offset: 5px; }
.sec:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
@media (min-width: 761px) {
  /* When the names wrap, a line doesn't start with a dot: the row is shifted left by one gap and that strip, where a
     line's first dot falls, is cut off. (On a phone they stay on one line that scrolls sideways.) */
  .sections { margin-left: -13px; clip-path: inset(-8px -8px -8px 13px); }
  .sections .sec:first-child { margin-left: 13px; }
}
.sec[aria-pressed="true"] { color: var(--ink); background-color: var(--mark); text-decoration: none; }
.sec-n { display: inline-block; margin-left: 3px; font-size: 0.7em; font-weight: 600; vertical-align: 0.45em; line-height: 1;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.sec[aria-pressed="true"] .sec-n { color: var(--mark-ink); }
.filters input, .filters select, .in {
  font: inherit; color: var(--ink); background-color: var(--field);
  border: 1px solid var(--field-line); border-radius: var(--radius-sm); padding: 7px 10px; min-height: 38px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.in:hover, .filters input:hover, .filters select:hover { border-color: var(--muted); }
.in:focus, .filters input:focus, .filters select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; }
input[type="file"] { font: inherit; color: var(--muted); max-width: 100%; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 700; font-size: 0.92rem; margin-right: 12px; padding: 7px 16px; min-height: 38px;
  border-radius: var(--radius-sm); border: 1px solid var(--field-line); background: var(--panel); color: var(--ink); cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--brand); }
.check { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); cursor: pointer; }
.hint { color: var(--muted); font-size: 0.9rem; margin: 4px 0 12px; }
.empty { padding: 32px; text-align: center; color: var(--muted); background: var(--panel); border: 1px dashed var(--field-line); border-radius: var(--radius); }

/* A price box with its $ inside. */
.in-money { position: relative; display: inline-flex; align-items: center; }
.in-money__sign { position: absolute; left: 10px; color: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.in-money .in { padding-left: 22px; }

/* ---------- buttons ---------- */
.btn {
  font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; padding: 7px 16px; min-height: 38px; border-radius: var(--radius-sm);
  border: 1px solid var(--field-line); background: var(--panel); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.btn:hover { border-color: var(--brand); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn--main { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn--main:hover { filter: brightness(1.08); }
.btn--danger { color: var(--up); }
.btn--danger:hover { border-color: var(--up); }
.btn--small { padding: 3px 12px; min-height: 30px; font-size: 0.84rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.icon { font: inherit; cursor: pointer; border: 0; background: none; color: var(--muted); padding: 4px 7px; border-radius: 6px; }
.icon:hover:not(:disabled) { background: var(--panel-2); color: var(--ink); }
.icon:disabled { opacity: 0.25; }
.icon--x:hover:not(:disabled) { color: var(--up); background: var(--up-bg); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.sundae-total { font-size: 1.05rem; margin: 16px 0 8px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; background: var(--panel-2); position: sticky; top: 0; white-space: nowrap; }
th.num { text-align: right; }
td.num { white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
table.list tbody tr { transition: background 0.1s; }
table.list tbody tr:hover { background: var(--panel-2); }
table.list td:first-child a { font-weight: 700; color: var(--ink); }
table.list td:first-child a:hover { color: var(--brand); }
table.small td, table.small th { padding: 7px 10px; font-size: 0.9rem; }
table.small th { font-size: 0.7rem; }
.lines .in--num { width: 84px; text-align: right; }
.lines td { padding: 7px 10px; }
.lines td:first-child a { font-weight: 700; color: var(--ink); }
.lines td:first-child a:hover { color: var(--brand); }
.row-actions { white-space: nowrap; text-align: right; }
.has-problem td { background: var(--check-bg); }
.problem { color: var(--check); font-size: 0.82rem; }
.in--cat { width: 130px; min-height: 32px; padding: 4px 8px; font-size: 0.9rem; }
.in--menu { width: 210px; min-height: 32px; padding: 4px 8px; font-size: 0.9rem; }
.in--yield { width: 64px; min-height: 32px; padding: 4px 8px; text-align: right; color: var(--muted); }
.in--yield.in--cut { color: var(--brand); font-weight: 700; }
/* A recipe's lines fit their box without scrolling sideways (a prep's ingredients have the widest rows): tighter
   cells, and the supplier box gives way before anything else. On a phone each line is a card instead. */
@media (min-width: 761px) {
  .lines--recipe th, .lines--recipe td { padding-left: 6px; padding-right: 6px; }
  .lines--recipe th:first-child, .lines--recipe td:first-child { padding-left: 12px; }
  .lines--recipe .in--num { width: 72px; }
  .lines--recipe .in--yield { width: 56px; }
  .lines--recipe .in--sup { width: 100%; min-width: 120px; }
  .lines--recipe .row-actions .icon { padding: 4px 5px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  main { padding-left: 16px; padding-right: 16px; }
  .lines--recipe .in--sup { min-width: 90px; }
}
/* Price history: chart colours are the validated categorical slots 1–3 (light and dark steps). */
:root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; }
@media (prefers-color-scheme: dark) { :root { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; } }
.hist .bar { margin-bottom: 8px; }
.hist-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.hchart { position: relative; margin: 4px 0 14px; outline: none; border-radius: var(--radius-sm); }
.hchart:focus-visible { box-shadow: var(--ring); }
.hchart__svg { display: block; overflow: visible; touch-action: pan-y; }
.hchart__grid { stroke: var(--line); stroke-width: 1; }
.hchart__tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.hchart__line { fill: none; stroke-width: 2; }
.hchart__dot { stroke: var(--panel); stroke-width: 2; }
.hchart__line--1 { stroke: var(--series-1); } .hchart__dot--1 { fill: var(--series-1); }
.hchart__line--2 { stroke: var(--series-2); } .hchart__dot--2 { fill: var(--series-2); }
.hchart__line--3 { stroke: var(--series-3); } .hchart__dot--3 { fill: var(--series-3); }
.hchart__cross { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
.hchart__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; font-size: 0.86rem; color: var(--ink); }
.hchart__legend > span { display: inline-flex; align-items: center; gap: 6px; }
.hchart__tip { position: absolute; top: 4px; min-width: 150px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); font-size: 0.85rem; pointer-events: none; z-index: 2; }
.hchart__date { color: var(--muted); font-size: 0.78rem; margin-bottom: 4px; }
.hchart__row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; vertical-align: middle; margin-right: 6px; }
.hchart__row .key, .hchart__legend .key { margin-right: 0; }
.key--1 { background: var(--series-1); } .key--2 { background: var(--series-2); } .key--3 { background: var(--series-3); }
.hist-list summary { cursor: pointer; font-weight: 700; margin: 10px 0 6px; }
.catlist { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.catrow { display: flex; align-items: center; gap: 6px; }
.catrow .in { flex: 1 1 auto; min-width: 0; min-height: 34px; padding: 5px 9px; }
.catrow .muted { width: 84px; text-align: right; }
.in--add { width: 100%; }
.group-by { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.inv-new { margin-top: 6px; }
.scale-open { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 16px 0 0; }
.scale { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--line); }
.scale h3 { font: 400 1.05rem var(--serif); margin: 12px 0 10px; }
.scale--saved p { margin: 12px 0 8px; }
.scale details summary { cursor: pointer; font-weight: 600; margin: 4px 0 8px; color: var(--brand); }
.scale-open .hint { margin: 0; }
.scale__form { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: 10px; color: var(--muted); }
.scale__form label { display: inline-flex; align-items: center; gap: 8px; }
.scale__form .in--num { width: 90px; text-align: right; }
.scale__base td { background: var(--brand-soft); }
.inv-for { white-space: normal; max-width: 250px; margin-top: 4px; }
.inv-for strong { color: var(--ink); }
.addrow td { background: var(--panel-2); padding: 10px; }
.addrow .in { border-style: dashed; background: var(--field); }
.in--wide { width: 100%; }
.in--sup { max-width: 260px; }
.section-row th { position: static; background: var(--brand-soft); color: var(--brand); font: 400 0.95rem var(--serif); letter-spacing: 0; text-transform: none; padding: 9px 12px; }
.row--up td:first-child { box-shadow: inset 3px 0 var(--up); }
.row--down td:first-child { box-shadow: inset 3px 0 var(--down); }

/* ---------- chips and flags ---------- */
.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.84rem; font-weight: 700; white-space: nowrap; }
.chip--up { background: var(--up-bg); color: var(--up); }
.chip--down { background: var(--down-bg); color: var(--down); }
.fc { display: inline-block; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.fc--ok { background: var(--down-bg); color: var(--down); }
.fc--over { background: var(--up-bg); color: var(--up); }
.flag { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--check-bg); color: var(--check); font-weight: 700; font-size: 0.72rem; cursor: help; vertical-align: 1px; }
.warn { color: var(--check); font-size: 0.8rem; margin-left: 6px; font-weight: 700; }
.tag { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 0.72rem; font-weight: 700; border: 1px solid var(--line); vertical-align: 1px; }

/* ---------- recipe / ingredient page ---------- */
.crumbs { margin: 0 0 12px; font-weight: 700; font-size: 0.92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.btn--back { color: var(--brand); border-color: var(--brand); }
.head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
/* The name reads as the page title; it shows it's editable on hover. */
/* Aoboshi One hangs its g and p low: room for them in the box. */
.in--title { font: 400 2rem/1.5 var(--serif); padding: 2px 10px 4px; margin-left: -11px; width: calc(100% + 11px); max-width: 760px;
  background: transparent; border-color: transparent; }
.in--title:hover { border-color: var(--field-line); background: var(--field); }
.head__meta { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; color: var(--muted); }
.head__meta label { display: inline-flex; gap: 7px; align-items: center; font-size: 0.92rem; }
.head__meta .in--num { width: 84px; text-align: right; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.grid2 > * { min-width: 0; }
.grid2--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.block { display: flex; flex-direction: column; gap: 5px; margin-top: 16px; color: var(--muted); font-size: 0.92rem; font-weight: 700; }
.block .in { font-weight: 400; font-size: 1rem; }
.block .small { font-weight: 400; }
.card > h2:first-child { margin-top: 1.1rem; }
.table-wrap + .btn { margin-top: 10px; }
.block textarea { resize: vertical; line-height: 1.5; }
.plain { padding-left: 18px; }
.plain li { margin: 3px 0; }

.totals { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; position: sticky; top: 84px; display: grid; gap: 10px; }
.totals > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.totals span { color: var(--muted); }
.totals strong { font-variant-numeric: tabular-nums; }
.totals .big { padding-top: 10px; border-top: 1px solid var(--line); }
.totals .big strong { font-size: 1.5rem; }
.totals .in--num { width: 96px; text-align: right; }
.note { margin: 4px 0 0; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.9rem; }
.note--bad { background: var(--up-bg); color: var(--up); }
.note--ok { background: var(--down-bg); color: var(--down); }

.totals--row { position: static; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; margin-bottom: 16px; }
.totals--row > div { flex-direction: column; align-items: flex-start; gap: 2px; }
.totals--row .big { padding-top: 0; border-top: 0; }
.inv .in--num { width: 96px; text-align: right; }
.alert { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 12px; border-left: 4px solid currentColor; }
.alert--up { background: var(--up-bg); color: var(--up); }
.alert--down { background: var(--down-bg); color: var(--down); }
.alert--check { background: var(--check-bg); color: var(--check); }
.alert .btn { flex: none; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 22px 22px; margin: 18px 0; max-width: 760px; }
.kv { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.kv > span:first-child { color: var(--muted); }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr auto; } .kv > span:first-child { grid-column: 1 / -1; } }
.card--wide { max-width: none; }
.row--off td { opacity: 0.5; }
.card--flat { max-width: none; margin: 20px 0 0; }
.signin { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- locked prices ---------- */
.lock { display: grid; gap: 10px; }
.lock__text { margin: 0; }
.lock--on { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--brand-soft); }
.lock--on .actions { margin-top: 0; }
.lock__field { display: inline-flex; align-items: center; gap: 8px; }
.lock__field .in { width: 110px; text-align: right; }
.tag--lock { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.card--side { margin: 16px 0 0; padding: 4px 18px 18px; }
.card--side h2 { font-size: 1.05rem; }

/* ---------- suggestions while typing ---------- */
.suggest { position: fixed; z-index: 30; margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto;
  max-width: min(480px, calc(100vw - 16px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); }
.suggest--above { display: flex; flex-direction: column-reverse; }
/* Full height, so a long list scrolls instead of every name being squashed into the box. */
.suggest--above > li { flex-shrink: 0; }
.suggest li { padding: 7px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest li:hover, .suggest li.on { background: var(--brand-soft); }
.suggest mark { background: none; color: var(--brand); font-weight: 700; }

/* ---------- inventory ---------- */
.btn--same { margin-left: 8px; padding: 1px 10px; min-height: 26px; font-size: 0.8rem; }
.print-only { display: none; }

/* The count sheet on paper: item, last month, a line to write this month's count. */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; font-size: 10pt; line-height: 1.25; }
  .top, .mode, .filters, .hint, .totals, .note, .alert, .bar .actions, .toast, .no-print, .suggest, dialog { display: none !important; }
  .print-only { display: block; }
  .print-sign { margin: 4px 0 14px; }
  main { padding: 0; max-width: none; }
  h1 { font-size: 17pt; color: #000; }
  .bar { margin-bottom: 4px; }
  .table-wrap { border: 0; box-shadow: none; overflow: visible; border-radius: 0; background: none; }
  th, td { padding: 3px 6px; border-bottom: 1px solid #bbb; color: #000 !important; background: none !important; }
  th { position: static; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .section-row th { background: #eee !important; font-size: 10.5pt; padding: 4px 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a, table.list td:first-child a { color: #000; text-decoration: none; font-weight: 700; }
  .tag { border: 0; padding: 0; background: none; color: #555; }
  .muted { color: #333 !important; }
  .inv .in { width: 90px; min-height: 0; height: 18px; padding: 0 4px; border: 0; border-bottom: 1px solid #000; border-radius: 0; background: none; box-shadow: none; color: #000; }
}

/* ---------- invoices ---------- */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 20px; text-align: center; cursor: pointer;
  background: var(--panel); border: 2px dashed var(--field-line); border-radius: var(--radius); color: var(--muted); transition: border-color 0.15s, background 0.15s; }
.drop strong { color: var(--ink); font-size: 1.1rem; }
.drop:hover, .drop--over, .drop:focus-within { border-color: var(--brand); background: var(--brand-soft); }
.drop__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop-or { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; color: var(--muted); }
.drop__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: 1.4rem; font-weight: 700; }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 0; margin: 14px 0 6px; }
.steps li { counter-increment: step; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.92rem; color: var(--muted); }
.steps li strong { color: var(--ink); }
.steps li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 0.8rem; }

/* ---------- Commis: the welcome page, and invoices it couldn't read ---------- */
.signed-out .nav, .signed-out .mode { display: none; }
.welcome { max-width: 440px; margin: 24px auto 0; }
.welcome__name { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; margin: 0; }
.welcome__sub { color: var(--muted); margin: 6px 0 22px; }
.welcome__card h2 { margin-top: 0; }
.welcome__form { display: grid; gap: 2px; }
.welcome__form .block:first-child { margin-top: 4px; }
.welcome__form .btn { margin-top: 18px; justify-self: start; }
.welcome__terms { align-items: flex-start; margin-top: 14px; font-size: 0.92rem; color: var(--ink); }
.welcome__terms input { margin-top: 4px; flex: none; }
.welcome__legal { text-align: center; color: var(--muted); font-size: 0.86rem; margin: 18px 0 0; }
.welcome__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 16px 0 0; font-size: 0.92rem; }
.linkish { font: inherit; padding: 0; border: 0; background: none; color: var(--brand); font-weight: 700; cursor: pointer; text-decoration: underline;
  text-decoration-color: transparent; text-underline-offset: 3px; }
.linkish:hover { text-decoration-color: currentColor; }
.unread { border-color: var(--check); }
/* A menu's page: its link from the Dishes list, the preps it uses, and what goes in its folder. */
.section-row__link { margin-left: 10px; font-size: 0.82rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.menu-preps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.menu-preps li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.menu-picks { display: grid; gap: 10px; margin: 14px 0 6px; }
.menu-pick { align-items: flex-start; color: var(--ink); }
.menu-pick input { margin-top: 3px; flex: none; }
.menu-pick--off { opacity: 0.55; cursor: default; }
/* An item's allergens: two rows picked like the sections (contains, may contain); a dish's or prep's beside its costs. */
.allergen-label { margin: 14px 0 4px; font-weight: 700; }
.allergen-label + .sections { margin-bottom: 4px; }
.allergens-side p { margin: 0 0 6px; }
.unchecked-items { line-height: 1.9; margin: 0; }
.unchecked-items a { white-space: nowrap; }
.starter { border-color: var(--brand); }
.starter h2 { margin-top: 0; }
.starter__secs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 4px; }
.starter .actions { align-items: center; }
.unread h2 { margin-top: 0; }
.unread__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.unread__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.unread__list li > span:first-child { display: grid; gap: 2px; }
.unread__do { display: flex; gap: 8px; }

/* ---------- dialogs and messages ---------- */
.ask { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 22px 24px 16px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.ask::backdrop { background: rgba(20, 25, 23, 0.45); }
.ask p { margin: 0 0 12px; white-space: pre-line; }
.ask .actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.ask .btn { white-space: nowrap; }
.btn--solid-danger { background: var(--up); color: #fff; border-color: var(--up); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 10px; max-width: min(560px, calc(100vw - 32px)); z-index: 10; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); font-weight: 700; font-size: 0.92rem; }
.toast__btn { font: inherit; margin-left: 10px; padding: 2px 10px; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.toast--bad { background: var(--up); color: #fff; }

@media (max-width: 1200px) {
  .grid2 { grid-template-columns: 1fr; }
  .totals { position: static; }
}
/* ---------- phone ---------- */
/* The header scrolls away; the sections are a tab bar at the bottom, in thumb's reach. Boxes are 16px (no zoom on
   iPhone) and 44px tall, chips scroll sideways in one row, and tables become one card per row. */
@media (max-width: 760px) {
  .top { position: static; padding: 10px 16px; }
  /* Room for the name: just the heart on a phone. */
  .top__support { padding: 5px 10px; min-width: 40px; min-height: 36px; }
  .top__support-word { display: none; }
  .brand { flex-direction: row; align-items: baseline; gap: 10px; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); background: var(--top); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); overflow: visible;
  }
  .nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 5px; border-radius: 10px;
    font-size: 0.68rem; font-weight: 600; min-width: 0; }
  .nav a.on { background: rgba(255, 255, 255, 0.13); color: var(--top-ink); }
  .nav__icon { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav__long { display: none; }
  .nav__short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .nav .badge { position: absolute; top: 2px; left: calc(50% + 5px); margin: 0; }
  main { padding: 18px 16px calc(92px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .mode { padding: 7px 16px; }
  .on-phone { display: inline; }
  .off-phone { display: none; }

  h1, .in--title { font-size: 1.6rem; }
  .card { padding: 4px 16px 16px; }
  .grid2--even { grid-template-columns: 1fr; }
  th, td { padding: 8px 9px; }

  /* Fingers, not a mouse. */
  .in:not(.in--title), .filters input, .filters select { font-size: 16px; min-height: 44px; }
  .btn { min-height: 44px; }
  .btn--small, .btn--same { min-height: 36px; padding: 4px 12px; font-size: 0.86rem; }
  .icon { min-width: 38px; min-height: 38px; }
  .sec { min-height: 36px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .filters input[type="search"] { flex: 1 1 100%; }
  .filters select, .filters .check { flex: 1 1 auto; }
  .group-by { margin-left: 0; }
  .bar .actions { width: 100%; }

  /* One row of chips that scrolls sideways, instead of six rows before the list. */
  .sections { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px; scrollbar-width: none; }
  .sections::-webkit-scrollbar { display: none; }
  .sec { flex: none; }
  /* Allergens all stay in sight: they wrap, with the line-start dots cut off as on a computer. */
  .sections--wrap { flex-wrap: wrap; overflow: visible; margin: 0 0 12px -13px; padding: 0; clip-path: inset(-8px -8px -8px 13px); }
  .sections--wrap .sec:first-child { margin-left: 13px; }
  .hist-periods { width: 100%; }
  .hist-periods { flex-wrap: nowrap; }
  .hist-periods .sec { flex: 1 1 0; justify-content: center; padding: 4px 6px; white-space: nowrap; font-size: 0.82rem; }

  .hide-sm { display: none; }

  /* Lists: one card per row, each value labelled with its column (labels come from the table's head, in app.js). */
  table.cards, table.cards tbody { display: block; }
  table.cards thead { display: none; }
  table.cards tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
  table.cards tbody tr[hidden], table.cards td.hide-sm, table.cards td:empty { display: none; }
  table.cards tbody tr:last-child { border-bottom: 0; }
  table.cards td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  table.cards td:first-child { flex: 1 1 100%; font-size: 1rem; }
  table.cards td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
  table.cards tr.section-row { display: block; padding: 0; }
  table.cards tr.section-row th { display: flex; justify-content: space-between; border: 0; }
  table.cards tr.section-row th.num { display: none; }

  /* The count: the item, then last month and this month's box side by side, big enough to type fast. */
  table.inv tbody tr:not(.section-row) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
  table.inv td:nth-child(1) { grid-column: 1; grid-row: 1; }
  table.inv td:nth-child(2) { display: none; }
  table.inv td:nth-child(3) { grid-column: 1; grid-row: 2; }
  table.inv td:nth-child(4) { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  table.inv td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; color: var(--muted); }
  table.inv .in--num { width: 104px; font-size: 18px; }
  table.inv td:nth-child(4)::before { display: none; }
  table.inv tbody tr:not(.section-row) { padding: 9px 14px; }

  /* A recipe's lines: the item and its cost, then amount and unit, the supplier, the price and the buttons. */
  .lines--recipe thead { display: none; }
  .lines--recipe tbody tr:not(.addrow) { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; grid-template-areas: "item item cost" "qty unit yld" "sup sup sup" "price price act";
    gap: 6px 8px; align-items: center; padding: 12px 12px; border-bottom: 1px solid var(--line); }
  .lines--recipe td { display: block; padding: 0; border: 0; }
  .lines--recipe td:nth-child(1) { grid-area: item; font-size: 1rem; }
  .lines--recipe td:nth-child(2) { grid-area: qty; text-align: left; }
  .lines--recipe td:nth-child(3) { grid-area: unit; }
  .lines--recipe td:nth-child(4) { grid-area: yld; }
  .lines--recipe td:nth-child(5) { grid-area: sup; }
  .lines--recipe td:nth-child(6) { grid-area: price; text-align: left; }
  .lines--recipe td:nth-child(7) { grid-area: cost; font-size: 1.05rem; }
  .lines--recipe td:nth-child(8) { grid-area: act; }
  .lines--recipe .in--num { width: 96px; }
  .lines--recipe select.in, .lines--recipe .in--sup { width: 100%; max-width: none; }
  .lines--recipe .addrow, .lines--recipe .addrow td { display: block; }

  /* Supplier prices: who and the name on invoice, then pack price and size, then the price per kg and date. */
  .lines--offers thead { display: none; }
  .lines--offers tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "use sup sup del" "item item item item" "cost cost size size" "price price upd upd";
    gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); }
  .lines--offers td { display: block; padding: 0; border: 0; }
  .lines--offers td:nth-child(1) { grid-area: use; }
  .lines--offers td:nth-child(2) { grid-area: sup; }
  .lines--offers td:nth-child(3) { grid-area: item; }
  .lines--offers td:nth-child(4) { grid-area: cost; text-align: left; }
  .lines--offers td:nth-child(5) { grid-area: size; }
  .lines--offers td:nth-child(6) { grid-area: price; text-align: left; }
  .lines--offers td:nth-child(7) { grid-area: upd; text-align: right; }
  .lines--offers td:nth-child(8) { grid-area: del; }
  .lines--offers td[colspan] { grid-column: 1 / -1; }
  .lines--offers .in { width: 100%; }
  .lines--offers .in-money, .lines--offers .in-money .in { width: 100%; }
  .lines--offers td:nth-child(5) { display: flex; gap: 6px; min-width: 0; }
  .lines--offers td:nth-child(5) .in--num { width: 76px; flex: none; }
  .lines--offers td:nth-child(5) select { flex: 1 1 auto; min-width: 0; }

  /* An invoice's lines: tick and what it says, your item, what one price is for, then the prices. */
  .lines--inv thead { display: none; }
  .lines--inv tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "chk inv inv inv" "item item item item" "pack pack pack pack" "new new now chip";
    gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); }
  .lines--inv td { display: block; padding: 0; border: 0; }
  .lines--inv td:nth-child(1) { grid-area: chk; }
  .lines--inv td:nth-child(2) { grid-area: inv; }
  .lines--inv td:nth-child(3) { grid-area: item; }
  .lines--inv td:nth-child(4) { grid-area: pack; white-space: normal; }
  .lines--inv td:nth-child(5) { grid-area: new; text-align: left; font-size: 1.05rem; }
  .lines--inv td:nth-child(6) { grid-area: now; }
  .lines--inv td:nth-child(7) { grid-area: chip; }
  .lines--inv td:nth-child(3) .in { width: 100%; }
  .inv-for { max-width: none; }

  /* Settings → Categories: the name box gives way so the buttons stay on screen. */
  .catlist > li { min-width: 0; }
  .catrow .muted { width: auto; font-size: 0.78rem; }
  .catrow .icon { min-width: 34px; }

  .drop { padding: 24px 16px; }

  /* The cost-moved marker is the chip on a phone (a bar beside the name looked like a stray line). */
  table.cards tr.row--up td:first-child, table.cards tr.row--down td:first-child { box-shadow: none; }

  /* Netlify's free plan puts its "Powered by Netlify" badge at the bottom right and it can't be hidden: the tab bar
     keeps a strip under it for the badge, so the tabs stay clear. */
  .has-badge .nav { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .has-badge main { padding-bottom: calc(146px + env(safe-area-inset-bottom)); }
  .has-badge .toast { bottom: calc(134px + env(safe-area-inset-bottom)); }
}