:root {
  --bg: #F5F4F0; --card: #FFFFFF; --ink: #1C1F22; --muted: #5B6168; --line: #E2DFD8; --soft: #EFEDE8;
  --accent: #B83A26; --blue: #1F5FA8; --orange: #B45A00; --green: #2E7D4F; --rail: #1C1F22;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; }
button, input { font: inherit; color: inherit; }
.loading { padding: 40px; color: var(--muted); }

/* Layout */
.shell { min-height: 100vh; display: flex; }
.rail { width: 92px; background: var(--rail); display: flex; flex-direction: column; align-items: center; padding: 20px 0; gap: 6px; flex: none; }
.logo { width: 44px; height: 44px; border-radius: 10px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; margin-bottom: 14px; }
.rail button { width: 76px; padding: 10px 0; border: 0; border-radius: 10px; background: none; color: #D9D6CF; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.rail button.on { background: #33373B; color: #fff; }
.rail button:disabled { opacity: .35; cursor: default; }
.rail .spacer { flex: 1; }
main { flex: 1; min-width: 0; padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 18px; }
.kicker { font-size: 14px; color: var(--muted); font-weight: 500; }
h1 { margin: 4px 0 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
h2 { margin: 0; font-size: 18px; font-weight: 700; }
.sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.row > .grow { flex: 1; min-width: 0; }
.list > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--soft); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tag { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 3px 8px; background: var(--soft); color: var(--muted); white-space: nowrap; }
.tag.ok { background: #E3F0E6; color: var(--green); }
.tag.warn { background: #FFF1DF; color: var(--orange); }
.tag.bad { background: #FBE6E2; color: var(--accent); }
.error { color: var(--accent); font-size: 14px; min-height: 1.2em; }
.note { background: #EAF1FA; border: 1px solid #C8D9EE; border-radius: var(--radius); padding: 14px 18px; font-size: 14px; }

/* Controls: 44px minimum touch targets */
.btn { height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; color: var(--blue); font-weight: 600; cursor: pointer; padding: 8px 0; font-size: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[inputmode=numeric] { height: 48px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font-size: 16px; background: #fff; font-weight: 500; }
input:focus-visible, button:focus-visible { outline: 3px solid #9DBDE6; outline-offset: 1px; }

/* Sign-in screens */
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.panel { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.panel h1 { font-size: 28px; }
.names-wrap { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 16px; }
.names-wrap .link { align-self: flex-start; }
.names { width: 100%; max-width: 900px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.names button { height: 84px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-size: 19px; font-weight: 700; cursor: pointer; }
.names button .small { display: block; font-weight: 500; margin-top: 2px; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pinpad button { height: 72px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-size: 28px; font-weight: 600; cursor: pointer; }
.pinpad button.go { background: var(--ink); color: #fff; font-size: 18px; }
.dots { display: flex; justify-content: center; gap: 14px; height: 20px; }
.dots span { width: 16px; height: 16px; border-radius: 8px; border: 2px solid #B9B4AA; }
.dots span.on { background: var(--ink); border-color: var(--ink); }

@media (max-width: 700px) {
  .shell { flex-direction: column; }
  .rail { width: 100%; flex-direction: row; padding: 8px 12px; overflow-x: auto; }
  .logo { margin: 0 8px 0 0; }
  main { padding: 20px 16px 32px; }
  h1 { font-size: 28px; }
}

/* Margins */
.mrow { display: grid; grid-template-columns: minmax(140px, 1.1fr) 240px 170px 64px minmax(170px, 1.2fr) 110px 92px; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--soft); }
.mrow.head { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.mrow .name { font-weight: 600; font-size: 15px; }
.mrow .num { text-align: right; }
.mrow.off { opacity: .55; }
.mrow > div:last-child { text-align: right; }
.row.tight { gap: 8px; }
.pricebar { display: flex; height: 20px; border-radius: 5px; overflow: hidden; }
.pricebar .food { background: var(--accent); }
.pricebar .left { background: #D9E6D9; }
.total { height: 20px; border-radius: 5px; background: var(--green); min-width: 2px; }
.tag.blue { background: #E6EEF8; color: var(--blue); }
.nowrap { white-space: nowrap; }
.asks { display: flex; flex-direction: column; }
.ask { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--soft); font-size: 14px; }
.row.wrap { flex-wrap: wrap; gap: 8px; }
.btn.small-btn { height: 40px; padding: 0 12px; font-size: 14px; }
select { height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; font-size: 14px; max-width: 220px; }
input[type=date] { height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; font-size: 14px; }
.trend { display: flex; flex-direction: column; gap: 2px; }
.spark polyline { fill: none; stroke: #8A8F96; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: #8A8F96; }
.spark.up polyline { stroke: var(--green); } .spark.up circle { fill: var(--green); }
.spark.down polyline { stroke: var(--accent); } .spark.down circle { fill: var(--accent); }
.trend-up { color: var(--green); font-weight: 700; }
.trend-down { color: var(--accent); font-weight: 700; }
.trend-flat { color: var(--muted); font-weight: 600; }
:is(.mrow, .srow).head .sort { background: none; border: 0; padding: 6px 0; text-align: left; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 36px; }
:is(.mrow, .srow).head .sort.num { text-align: right; }
:is(.mrow, .srow).head .sort:hover, .mrow.head .sort.on { color: var(--ink); }

/* Charts */
.chart { position: relative; width: 100%; max-width: 980px; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg .grid { stroke: #ECEAE4; stroke-width: 1; }
.chart-svg .axis { stroke: #CFCBC2; stroke-width: 1; }
.chart-svg .tick { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart-svg .direct { fill: var(--ink); font-size: 12px; font-weight: 600; font-family: inherit; }
.chart-svg .hair { stroke: #8A8F96; stroke-width: 1; }
.chart-svg .avg { stroke: #8A8F96; stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart-svg .seg { cursor: default; }
.chart-svg .seg:hover, .chart-svg .seg:focus { opacity: .8; outline: none; }
.chart-svg rect:focus { outline: none; }
.tip { position: absolute; z-index: 5; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.08); padding: 8px 10px; font-size: 13px; pointer-events: none; min-width: 160px; }
.tip-title { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; white-space: nowrap; }
.tip-key { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.lchip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; color: var(--muted); cursor: pointer; }
.lchip.on { color: var(--ink); font-weight: 600; }
.lchip:disabled { cursor: default; opacity: 1; }
.lkey { width: 12px; height: 12px; border-radius: 3px; border: 2px solid; }
.lkey.line { height: 4px; border-width: 1px; border-radius: 2px; width: 16px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.mrow .name.linkish { font-weight: 600; font-size: 15px; }
.plate-detail { padding: 6px 0 14px 16px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.plate-detail .list > div { padding: 6px 0; font-size: 14px; }
input.amount { width: 90px; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font-size: 15px; }

/* Prep */
.countrow, .reviewrow, .workrow, .editrow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--soft); }
.countrow .name, .reviewrow .name, .workrow .name { font-weight: 600; font-size: 16px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .btn { width: 44px; padding: 0; font-size: 20px; }
.stepper input.amount { width: 70px; text-align: center; height: 44px; }
.changed { color: var(--orange); }
.workrow .name { font-size: 18px; }
.workrow.done { opacity: .55; }
.check { width: 56px; height: 56px; flex: none; border-radius: 14px; border: 3px solid #CFCBC2; background: #fff; font-size: 26px; color: #fff; cursor: pointer; }
.check.started { border-color: var(--orange); background: #FFF6EB; }
.check.on { background: var(--green); border-color: var(--green); }
.check.small { width: 40px; height: 40px; border-radius: 10px; font-size: 20px; }
.editrow { align-items: flex-start; }
.editfields { display: flex; flex-direction: column; gap: 8px; }
.editrow input[type=text] { height: 40px; min-width: 220px; }
.editrow .unit-in { min-width: 120px; width: 130px; }
.row.wrap.tight { flex-wrap: wrap; }
.countrow .grow, .reviewrow .grow, .workrow .grow, .editrow .grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 6px; }
input[type=checkbox] { width: 20px; height: 20px; }
.list > div.wrap { flex-wrap: wrap; }
.list > div > form.grow { flex: 1; display: grid; gap: 8px; min-width: 0; }
.list select { max-width: 200px; }
.list > div > form .grow > input { width: 100%; box-sizing: border-box; min-width: 0; }

/* Today */
.today { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.todos { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.todo { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.todo-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.todo.due .todo-label { color: var(--orange); }
.todo.ask .todo-label { color: var(--blue); }
.todo.alert .todo-label { color: var(--accent); }
.todo-title { font-size: 16px; font-weight: 600; }
.todo-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.todo-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.glance { display: flex; flex-direction: column; gap: 12px; }
.card.tight { padding: 16px 18px; gap: 8px; }
.strong { font-weight: 600; }
.big { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.list.compact > div { padding: 7px 0; font-size: 14px; gap: 8px; }
.right { text-align: right; }
.chip { height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 14px; color: var(--muted); cursor: pointer; }
.chip.on { color: var(--ink); font-weight: 600; border-color: var(--ink); }
@media (max-width: 1000px) {
  .today { grid-template-columns: 1fr; }
  .todo { grid-template-columns: 1fr; gap: 8px; }
  .todo-actions { justify-content: flex-start; }
}
.todo.has-answers .todo-actions { grid-column: 2 / -1; justify-content: flex-start; align-items: center; }
.todo .todo-label { align-self: start; padding-top: 3px; }
header.row.wrap > .grow { flex: 1 1 280px; }
@media (max-width: 1000px) { .todo.has-answers .todo-actions { grid-column: auto; } }

/* Kitchen | Bar */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.seg button { height: 40px; padding: 0 16px; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--ink); color: #fff; }
.srow { display: grid; grid-template-columns: minmax(160px, 1.6fr) 70px 80px 90px minmax(150px, 1fr) minmax(130px, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--soft); }
.srow.head { border-top: 0; padding-top: 0; }
.srow .name { font-weight: 600; font-size: 15px; }
.srow .num { text-align: right; }
.srow .num-end { justify-content: flex-end; }
.srow.off { opacity: .55; }

/* Recipe cards */
.clist, .ilist, .dlist { display: flex; flex-direction: column; }
.crow { display: grid; grid-template-columns: minmax(200px, 1fr) 90px 80px 140px 90px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--soft); }
.crow.head { border-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 0; }
.crow .name { font-weight: 600; font-size: 15px; }
.crow .num { text-align: right; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.irow { display: grid; grid-template-columns: 90px 110px minmax(160px, 1fr) 70px 44px; gap: 8px; align-items: center; padding: 6px 0; }
.irow.head { font-size: 12px; font-weight: 600; color: var(--muted); }
.irow input, .editor label input, .editor textarea { height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 15px; background: #fff; width: 100%; min-width: 0; }
.editor textarea { height: auto; padding: 10px 12px; font: inherit; }
.irow select, .editor select { width: 100%; max-width: none; height: 44px; }
.irow .num { text-align: right; }
.warn-text { color: var(--orange); }
input.short { width: 80px; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; font-size: 15px; }
label.inline { flex-direction: row; align-items: center; gap: 8px; }
.link.danger { color: var(--accent); }
.drow { display: grid; grid-template-columns: 28px minmax(180px, 1fr) minmax(260px, 1.3fr) 56px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--soft); }
.drow input[type=checkbox] { width: 22px; height: 22px; }
.drow select { max-width: 340px; width: 100%; }
.drow.flagged { background: linear-gradient(90deg, #FFF8EE, transparent); }
@media (max-width: 1000px) {
  .editor { grid-template-columns: 1fr; }
  .crow { grid-template-columns: 1fr auto; }
  .crow > :nth-child(3), .crow > :nth-child(4) { grid-column: auto; }
  .crow.head { display: none; }
  .drow { grid-template-columns: 28px 1fr; }
  .drow > :nth-child(3), .drow > :nth-child(4) { grid-column: 2; }
}
.editor select.fit { width: auto; min-width: 100px; }

/* Recipe book */
.book { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.book-list { display: flex; flex-direction: column; }
.book-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: none; border: 0; border-top: 1px solid var(--soft); padding: 11px 0; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; min-height: 44px; }
.book-item:hover { color: var(--blue); }
input.search { height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font-size: 16px; min-width: 220px; background: #fff; }
.recipe { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.recipe .seg { align-self: flex-start; flex-wrap: wrap; }
table.ingredients { border-collapse: collapse; width: 100%; font-size: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.ingredients td { padding: 12px 16px; border-top: 1px solid var(--soft); vertical-align: top; }
table.ingredients tr:first-child td { border-top: 0; }
table.ingredients td.amt { width: 34%; font-weight: 700; white-space: nowrap; }
.card-link { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.method h3 { margin: 0 0 6px; font-size: 16px; }
.method p { margin: 0 0 8px; font-size: 17px; line-height: 1.5; }
.sheet-wrap { position: fixed; inset: 0; background: rgba(20, 22, 24, .45); display: flex; justify-content: flex-end; z-index: 20; }
.sheet { width: min(640px, 100%); height: 100%; overflow-y: auto; background: var(--bg); padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 16px; box-shadow: -8px 0 30px rgba(0,0,0,.15); }
.sheet-title { font-size: 28px; margin: 4px 0 0; }
.tlist { display: flex; flex-direction: column; }
.trow { display: grid; grid-template-columns: 28px minmax(160px, 1fr) minmax(200px, 1.2fr) minmax(200px, 1.4fr); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--soft); }
.trow input[type=checkbox] { width: 22px; height: 22px; }
.trow input[type=text] { height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 15px; width: 100%; }
.trow .strike { color: var(--muted); }
.trow.off { opacity: .6; }
@media (max-width: 800px) { .trow { grid-template-columns: 28px 1fr; } .trow > :nth-child(n+3) { grid-column: 2; } }

/* Orders */
.olist { display: flex; flex-direction: column; }
.orow { display: grid; grid-template-columns: minmax(200px, 1.6fr) minmax(120px, .8fr) 120px 190px 80px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--soft); }
.orow.head { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.orow .num { text-align: right; }
.orow.zero .strong { font-weight: 500; }
.others summary, .settings summary { cursor: pointer; padding: 10px 0; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 4px; }
.order-foot { border-top: 1px solid var(--line); padding-top: 14px; }
.order-total { display: flex; flex: 1; min-width: 160px; }
pre.order-text { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font: 15px/1.5 'Plus Jakarta Sans', system-ui, sans-serif; white-space: pre-wrap; margin: 0; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.stack { display: flex; flex-direction: column; gap: 12px; }
input[type=time] { height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; font-size: 14px; }
@media print {
  .rail, header .btn, .order-foot, .settings, .others, .row.wrap > .btn, button { display: none !important; }
  main { padding: 0; }
}

/* ------------------------------------------------------------------ the restaurant's look
   Napoli: black and white, a wide-set geometric wordmark in a thin frame. Jost stands in for
   Twentieth Century (no web license); colour is kept for meaning only: late, due, done. */
:root {
  --bg: #EDEDEA; --card: #FFFFFF; --ink: #000000; --muted: #5C5C58; --line: #D4D4CF; --soft: #E9E9E5;
  --accent: #B3261E; --blue: #1F4F8F; --orange: #A04F00; --green: #2B6B43; --rail: #000000;
  --radius: 4px;
}
html, body { font-family: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif; font-size: 16px; }
h1, h2, .big, .btn, .tag, label { font-family: inherit; }

/* Page titles take the wordmark's spacing; everything else stays sentence case. */
header h1 { font-weight: 400; text-transform: uppercase; letter-spacing: .16em; font-size: 30px; line-height: 1.15; }
h2 { font-weight: 600; letter-spacing: .01em; }
.kicker { letter-spacing: .02em; }
.big { font-weight: 500; letter-spacing: .01em; }

/* The bar at the left: the logo at the top, the section you're in framed like the logo. */
.rail { width: 96px; padding: 16px 0; gap: 4px; }
.logo { width: 80px; height: auto; background: none; border-radius: 0; margin: 0 0 18px; display: block; }
.brand-logo.rail { width: 80px; display: block; }
.brand-word { color: #fff; border: 1px solid #fff; text-align: center; letter-spacing: .3em; font-weight: 400; }
.brand-word.rail { font-size: 11px; padding: 10px 0 10px .3em; }
.rail button { width: 80px; border-radius: 0; border: 1px solid transparent; color: #BDBDB8; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 11px 0 9px; }
.rail button.on { background: none; border-color: #fff; color: #fff; }
.rail button:not(.on):not(:disabled):hover { color: #fff; }

/* Square-cornered, thin-lined, like the frame around the name. */
.card, .note, .panel, .todo, .btn, .chip, .seg, select, input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=time], input[inputmode=numeric], input[inputmode=decimal], input.short, .names button, .pinpad button, .check, table.ingredients, pre.order-text { border-radius: var(--radius); }
.btn { font-weight: 500; letter-spacing: .02em; }
.btn.dark, .pinpad button.go { background: #000; border-color: #000; }
.seg button.on { background: #000; }
.chip.on { border-color: #000; }
.tag { border-radius: 2px; font-weight: 600; letter-spacing: .02em; }
.note { background: #F7F7F5; border-color: var(--line); border-left: 3px solid #000; }
input:focus-visible, button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.rail button:focus-visible { outline-color: #fff; }

/* Today's labels: colour carries the urgency; no shouting. */
.todo-label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.todo { border-color: var(--line); }

/* Sign-in: the mark on black, the form beneath it. */
.center { background: #000; }
.stage { width: 100%; max-width: 900px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.stage > .panel { max-width: 420px; }
.brand-logo.stage { width: min(360px, 80vw); display: block; }
.brand-word.stage { font-size: 34px; padding: 22px 28px 22px calc(28px + .3em); }
.names-wrap { color: #fff; }
.names-wrap .sub, .names-wrap .kicker { color: #BDBDB8; }
.names-wrap .link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.names button { border-color: #fff; background: #000; color: #fff; font-weight: 500; letter-spacing: .04em; }
.names button:hover { background: #fff; color: #000; }
.stage > .panel .link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.logo-preview { background: #000; padding: 18px; display: flex; justify-content: center; }
.logo-preview .brand-logo { width: 240px; }

@media (max-width: 700px) {
  .rail { width: 100%; padding: 8px 12px; }
  .logo { width: 72px; margin: 0 8px 0 0; }
  .brand-logo.rail { width: 72px; }
  .rail button { width: 72px; }
  header h1 { font-size: 24px; letter-spacing: .12em; }
}
.trow input[type=text], .irow input, .editor textarea, .book-item { border-radius: var(--radius); }
.rail { width: 108px; }
.logo, .brand-logo.rail { width: 96px; }
.rail button { width: 92px; letter-spacing: .08em; font-size: 10px; }
.btn.blue { background: #000; border-color: #000; }
.panel h1 { font-weight: 400; text-transform: uppercase; letter-spacing: .14em; font-size: 22px; }
@media (max-width: 700px) { .rail { width: 100%; } .logo, .brand-logo.rail { width: 72px; } .rail button { width: 76px; } }

/* Square corners everywhere; buttons set like the labels on the left bar. */
:root { --radius: 0px; }
.tag, .names button, .pinpad button, .check, .btn, .chip, .seg, .seg button, .book-item, table.ingredients, pre.order-text, .sheet { border-radius: 0; }
.btn, .chip, .seg button, .names button, .pinpad button.go {
  text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; font-weight: 500;
}
.btn.small-btn { font-size: 11.5px; padding: 0 14px; }
.stepper .btn { letter-spacing: 0; font-size: 18px; }
.names button { font-size: 15px; letter-spacing: .12em; }
.tag-button { border: 0; cursor: pointer; font-family: inherit; min-height: 32px; padding: 4px 10px; } .tag-button:hover { background: #000; color: #fff; }
.brand-word.rail { width: 96px; overflow: hidden; }

/* Square's dish photos */
img.thumb { width: 56px; height: 56px; object-fit: cover; flex: none; background: var(--soft); }
img.thumb.small { width: 40px; height: 40px; }
.book-item.with-photo { flex-direction: row; align-items: center; gap: 14px; }
img.hero { width: 100%; max-height: 300px; object-fit: cover; display: block; background: var(--soft); }

/* Recipe coverage */
button.cov-card { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
button.cov-card:hover { border-color: #000; }
.cov-bar { display: flex; height: 14px; background: var(--soft); overflow: hidden; }
.cov-bar.big { height: 28px; }
.cov-complete { background: #000; }
.cov-gaps { background: var(--orange); }
.cov-nocard { background: repeating-linear-gradient(135deg, #CFCFCA 0 4px, #E9E9E5 4px 8px); }
.cov-legend { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cov-legend > div { display: flex; align-items: center; gap: 8px; }
.cov-key { width: 12px; height: 12px; flex: none; }
.cov-legend .grow { flex: 1; }

/* ------------------------------------------------------------------ the page formula
   Every screen: the bar on the left, the work in the middle, boxes to glance at on the right.
   Tables size to the middle column (container queries), not to the screen. */
.page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.page.solo { grid-template-columns: minmax(0, 1fr); }
.page-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; container: main / inline-size; }
.page-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.page-side .card.tight { gap: 10px; }
.side-actions { display: flex; flex-direction: column; gap: 8px; }
.side-actions > .btn { width: 100%; justify-content: center; }
.side-actions > .link { align-self: flex-start; }
.progress { height: 8px; background: var(--soft); }
.progress > div { height: 100%; background: #000; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.picks { display: flex; flex-direction: column; }
.pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-top: 1px solid var(--soft); background: none; text-align: left; font: inherit; font-size: 15px; color: inherit; cursor: pointer; }
.pick .grow { flex: 1; min-width: 0; }
.pick:hover { color: var(--blue); }
.pick.on { font-weight: 600; box-shadow: inset 3px 0 0 #000; padding-left: 12px; }
.page-side .seg { display: flex; }
.page-side .seg button { flex: 1; padding: 0 8px; }
.page-side input[type=date] { width: 100%; min-width: 0; }
.page-side img.hero { max-height: 240px; }
.dates { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
@media (max-width: 1000px) {
  .page { grid-template-columns: minmax(0, 1fr); }
  .page-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
  .page.side-first .page-side { order: -1; }
}

/* Performance: five columns that fit beside the boxes. */
.mrow { grid-template-columns: minmax(130px, 1.3fr) minmax(170px, 1fr) 64px minmax(140px, 1fr) 100px; }
.mrow.head { display: grid; }
.mrow > div:last-child { text-align: left; }
.mrow .plate-cell { display: flex; flex-direction: column; gap: 4px; }
.mrow .name-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* Narrower middle (iPad landscape, portrait): the trend steps out. Narrower still: two columns. */
@container main (max-width: 680px) {
  .mrow { grid-template-columns: minmax(110px, 1fr) minmax(140px, 1fr) 60px minmax(120px, 1fr); }
  .mrow > :nth-child(5) { display: none; }
}
@container main (max-width: 470px) {
  .mrow { grid-template-columns: 1fr 1fr; }
  .mrow > :first-child { grid-column: 1 / -1; }
  .mrow.head { display: none; }
}
.pricebar .food { flex: none; } .pricebar .left { flex: 1; }
.pricebar, .mrow .total { flex: none; min-width: 4px; }
.srow { grid-template-columns: minmax(130px, 1.4fr) 56px 72px 76px minmax(120px, 1fr) minmax(100px, 1fr); }
@container main (max-width: 600px) { .srow { grid-template-columns: 1fr 1fr 1fr; } .srow.head { display: none; } }

/* Orders */
.orow { grid-template-columns: minmax(150px, 1.6fr) minmax(100px, .8fr) 104px 170px 72px; }
.orow .order-cell { display: flex; flex-direction: column; gap: 2px; }
@container main (max-width: 620px) {
  .orow { grid-template-columns: 1fr 1fr; }
  .orow > :first-child { grid-column: 1 / -1; }
  .orow.head { display: none; }
}
.vendor-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.vendor-row .when { text-align: right; }
@container main (max-width: 520px) { .vendor-row { grid-template-columns: 1fr; } .vendor-row .when { text-align: left; } }
.page-side .order-total .big { font-size: 34px; }

/* Recipe cards list */
@container main (max-width: 600px) { .crow { grid-template-columns: 1fr auto; } .crow.head { display: none; } }
.page-side-boxes { display: contents; }
.recipe .card h2 { margin-bottom: 4px; }
@media print { .page-side { display: none !important; } .page { display: block; } }
.order-side .order-total { min-width: 0; }
.list > div > .grow { flex: 1; min-width: 0; }
.list > div > button.grow { text-align: left; }
.page-side details.settings summary { display: block; line-height: 1.5; }
.lchip, .lkey { border-radius: 0; }
.page-main > .error:empty { display: none; }
@media (max-width: 700px) { .rail button { width: auto; min-width: 64px; padding: 8px 8px 6px; flex: none; } }

/* Snoozing on Today */
.snooze-link { color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.snooze-link:hover { color: var(--ink); }
details.snoozed summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 4px; }
details.snoozed[open] summary { margin-bottom: -1px; }
.snoozed-row { display: flex; align-items: center; gap: 12px; }
.snoozed-row .grow { flex: 1; min-width: 0; }
.todo.choosing .todo-actions { grid-column: 2 / -1; justify-content: flex-start; align-items: center; }
@media (max-width: 1000px) { .todo.choosing .todo-actions { grid-column: auto; } }

/* The prep list editor: one tight line per item, the details in small type under it. */
.editrow.compact { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0; }
.edit-main { display: grid; grid-template-columns: minmax(150px, 2.2fr) minmax(108px, 1fr) 56px 136px auto; gap: 6px; align-items: center; }
.edit-main.tasks { grid-template-columns: minmax(150px, 1fr) 110px auto; }
.editrow .edit-main input, .editrow .edit-main input[type=text], .edit-main select { height: 36px; min-width: 0; width: 100%; max-width: none; padding: 0 8px; font-size: 14px; }
.edit-main input[type=text]:first-child { font-weight: 600; }
.edit-tools { display: flex; gap: 4px; }
.edit-tools .btn.small-btn { width: 32px; height: 32px; padding: 0; font-size: 14px; letter-spacing: 0; }
.edit-tools .remove:hover { border-color: var(--accent); color: var(--accent); }
.edit-more { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.edit-more .row.tight { gap: 6px; }
.edit-more .lchip { height: 26px; padding: 0 6px; font-size: 12px; }
.edit-more .row.tight.wrap { gap: 4px; }
.edit-more select { height: 30px; font-size: 13px; max-width: 190px; padding: 0 6px; }
.editrow .edit-more input.amount, .editrow .edit-more input.unit-in, .editrow .edit-more input[type=text] { height: 30px; width: 90px; min-width: 0; padding: 0 6px; font-size: 13px; }
.edit-more .btn.small-btn { height: 30px; font-size: 11px; padding: 0 10px; }
@container main (max-width: 560px) {
  .edit-main { grid-template-columns: 1fr 132px 56px; }
  .edit-main > select { grid-column: 1 / 2; }
  .edit-main > .edit-tools { grid-column: 2 / 4; justify-content: flex-end; }
  .edit-main.tasks { grid-template-columns: 1fr 100px; }
  .edit-main.tasks > .edit-tools { grid-column: 1 / -1; }
}

/* Prep: a station per row, its usual time on the right of the box */
.station-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; }
.station-days { display: flex; flex-direction: column; gap: 12px; }
.station-time { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--soft); padding-left: 20px; }
.station-time.empty { justify-content: center; min-height: 80px; }
.big-ish { font-size: 22px; font-weight: 500; }
svg.time-bars rect { fill: #CFCFCA; }
svg.time-bars rect.last { fill: #000; }
svg.time-bars line.usual { stroke: var(--orange); stroke-width: 1; stroke-dasharray: 3 3; }
@container main (max-width: 560px) {
  .station-body { grid-template-columns: 1fr; }
  .station-time { border-left: 0; padding-left: 0; border-top: 1px solid var(--soft); padding-top: 12px; }
}

/* Small horizontal bars in the right column */
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar { display: grid; grid-template-columns: 82px minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 14px; }
.hbar.two-line { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "label value" "track track"; row-gap: 3px; }
.hbar.two-line .hbar-label { grid-area: label; }
.hbar.two-line .hbar-track { grid-area: track; }
.hbar.two-line .hbar-value { grid-area: value; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 10px; background: var(--soft); position: relative; }
.hbar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #000; }
.hbar-value { text-align: right; font-size: 13px; }

/* Pace by cook: centred on the usual */
.pace { display: flex; flex-direction: column; gap: 10px; }
.pace-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 92px; grid-template-areas: "name track value" "name n n"; column-gap: 8px; row-gap: 0; align-items: center; font-size: 14px; }
.pace-name { grid-area: name; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.pace-track { grid-area: track; height: 12px; background: var(--soft); position: relative; }
.pace-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: #000; }
.pace-fill { position: absolute; top: 0; bottom: 0; }
.pace-fill.quick { background: var(--green); }
.pace-fill.slow { background: var(--orange); }
.pace-fill.even { background: #000; }
.pace-value { grid-area: value; text-align: right; font-size: 13px; font-weight: 600; }
.pace-n { grid-area: n; text-align: right; }
.hbar.two-line .hbar-label { white-space: normal; }
.block { display: block; }
.check, .check.small, .check.on { border-radius: 0; }
.station-time .big-ish { white-space: nowrap; }

/* Live prep */
.live-strip { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: #F7F7F5; border-left: 3px solid #000; }
.live-strip.done { flex-direction: row; align-items: center; gap: 10px; border-left-color: var(--green); }
.tag.live { background: #000; color: #fff; }
.tag.live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 6px; vertical-align: 1px; animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tag.live::before { animation: none; } }
.ink { color: var(--ink); font-weight: 600; }
.live-row .right { white-space: pre-line; text-align: right; font-weight: 600; }

/* Performance: filters across the top */
.toolbar { gap: 10px; padding: 14px 20px; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tool-label { width: 72px; flex: none; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-end { margin-left: auto; }
.toolbar input[type=date] { width: 150px; }
@media (max-width: 700px) { .tool-label { width: 100%; } .tool-end { margin-left: 0; } }

/* Donut: share of the whole, with the numbers beside it */
.donut-wrap { position: relative; width: 180px; height: 180px; margin: 4px auto 0; }
svg.donut { width: 100%; height: 100%; display: block; }
svg.donut .slice { stroke: var(--card); stroke-width: 2; cursor: pointer; transition: opacity .15s; }
svg.donut .slice.dim { opacity: .25; }
svg.donut .slice:focus { outline: none; stroke: #000; }
.donut-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 46px; }
.donut-big { font-size: 20px; font-weight: 600; line-height: 1.1; }
.donut-centre .small { line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.donut-legend { display: flex; flex-direction: column; }
.donut-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--soft); font-size: 14px; cursor: default; }
.donut-row.on { background: var(--soft); }
.donut-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-row .small { width: 52px; text-align: right; }
.movers svg.spark { flex: none; }
.dates-inline[hidden] { display: none; }
.toolbar input[type=date] { width: 140px; }

/* Reports */
.rtable { display: flex; flex-direction: column; }
.rrow { display: grid; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--soft); font-size: 14px; }
.rrow.head { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.rrow .num { text-align: right; }
.rrow .num .vs { display: block; }
.rrow.types { grid-template-columns: minmax(130px, 1.3fr) 90px minmax(100px, 1fr) 64px 76px 78px; }
.rrow.servers { grid-template-columns: minmax(90px, 1.2fr) 56px 80px 80px 74px minmax(100px, 1fr) 82px; }
.rrow.tables { grid-template-columns: 56px 50px 58px 58px minmax(120px, 1.4fr) 76px 78px; }
.rrow.items { grid-template-columns: 24px minmax(130px, 1.5fr) minmax(140px, 1.3fr) 64px 76px 78px; }
.rrow .hbar-track { flex: 1; }
.mix { display: flex; height: 10px; background: var(--soft); }
.mix-table { background: #000; } .mix-togo { background: #8A8A85; } .mix-online { background: var(--orange); }
@container main (max-width: 640px) {
  .rrow.types, .rrow.servers, .rrow.tables, .rrow.items { grid-template-columns: 1fr 1fr 1fr; }
  .rrow.head { display: none; }
  .rrow > :first-child { grid-column: 1 / -1; }
}
@media print {
  .toolbar, header .btn { display: none !important; }
  .report-print .page-side { display: grid !important; grid-template-columns: repeat(3, 1fr); }
  .card { break-inside: avoid; }
}

/* Filters on one row: toggles and a period dropdown */
.toolbar.one-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 12px 18px; }
.tool-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.one-row .tool-label { width: auto; }
select.tool-select { height: 40px; max-width: 300px; font-size: 14px; }
.seg.wrap-seg { flex-wrap: wrap; }
.rrow.head .sort { background: none; border: 0; padding: 6px 0; text-align: left; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 36px; }
.rrow.head .sort.num { text-align: right; }
.rrow.head .sort:hover, .rrow.head .sort.on { color: var(--ink); }
@media (max-width: 700px) { .toolbar.one-row .tool-end { margin-left: 0; } }

/* Prime cost, recipes vs. purchases, hours */
.rrow.prime { grid-template-columns: minmax(96px, 1.2fr) 84px repeat(3, 84px) 56px 64px; }
.rrow.usage { grid-template-columns: minmax(140px, 1.6fr) 90px 100px 90px 96px; }
.chart-svg .strong-tick { fill: var(--ink); font-weight: 600; }
.good-text { color: var(--green); }
.heat { display: grid; gap: 2px; font-size: 12px; }
.heat-head { font-weight: 600; color: var(--muted); text-align: center; padding-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat-hour { color: var(--muted); text-align: right; padding-right: 8px; align-self: center; white-space: nowrap; }
.heat-cell { height: 30px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; color: var(--ink); overflow: hidden; white-space: nowrap; }
.heat-cell.dark { color: #fff; }
@container main (max-width: 640px) { .heat-cell { font-size: 0; } .heat-head { font-size: 11px; } }

/* Ingredient prices: the trail, the cost lines, the price chart */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.crumb { background: #fff; border: 1px solid var(--line); padding: 8px 12px; font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline; min-height: 40px; }
.crumb b { font-weight: 600; }
.crumb:hover { border-color: #000; }
.crumb.on { background: #000; color: #fff; border-color: #000; }
.crumb-sep { color: var(--muted); font-size: 18px; }
button.rrow { background: none; border: 0; border-top: 1px solid var(--soft); font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
button.rrow.clickable:hover, button.rrow.clickable:focus-visible { background: #F7F7F5; }
.chev { color: var(--muted); font-size: 18px; text-align: right; }
.rrow.dishcost { grid-template-columns: minmax(140px, 1fr) 90px 80px 76px 20px; }
.rrow.costline { grid-template-columns: minmax(140px, 1.4fr) 90px 80px minmax(110px, 1fr) 20px; }
.rrow.proddish { grid-template-columns: minmax(140px, 1.4fr) 96px 72px 84px 64px 20px; }
.list.compact > .lrow, .lrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 0; border-top: 1px solid var(--soft); font-size: 14px; }
.lrow:hover .grow { text-decoration: underline; }
.search-hits:empty { display: none; }
.page-side input[type=search] { width: 100%; box-sizing: border-box; }
.chart-svg .switch-line { stroke: #8A8F96; stroke-width: 1; stroke-dasharray: 2 3; }
.switches { display: grid; gap: 4px; }
@container main (max-width: 640px) {
  .rrow.dishcost, .rrow.costline { grid-template-columns: 1fr 1fr 1fr; }
  /* These two keep their columns and headings, just tighter: they read across. */
  .rrow.prime { grid-template-columns: minmax(64px, 1fr) repeat(4, minmax(56px, auto)) 40px 50px; gap: 8px; font-size: 13px; }
  .rrow.usage { grid-template-columns: minmax(100px, 1.4fr) repeat(4, minmax(58px, auto)); gap: 8px; font-size: 13px; }
  .rrow.head.prime, .rrow.head.usage { display: grid; }
  .rrow.prime > :first-child, .rrow.usage > :first-child { grid-column: auto; }
  .rrow.dishcost > .chev, .rrow.costline > .chev, .rrow.proddish > .chev { display: none; }
  .rrow.proddish { grid-template-columns: repeat(4, 1fr); }
}

/* Working: a spinner on what was pressed, a thin bar along the top, the old page faded until the new one is ready */
.busy { cursor: progress; }
.busy::after { content: ''; display: inline-block; width: .8em; height: .8em; margin-left: .5em; vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
select.busy, input.busy { opacity: .6; }
.rail button.busy::after { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
body::before { content: ''; position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #000; z-index: 1000; opacity: 0; pointer-events: none; }
body.working::before { opacity: 1; animation: workbar 1.6s ease-out infinite; }
@keyframes workbar { 0% { width: 0; margin-left: 0; } 60% { width: 70%; margin-left: 15%; } 100% { width: 0; margin-left: 100%; } }
main.stale { opacity: .55; pointer-events: none; transition: opacity .15s .1s; }
.todo.done-row { opacity: .85; border-left: 3px solid var(--green); }
.todo.done-row .todo-label { color: var(--green); }
@media (prefers-reduced-motion: reduce) { .busy::after, body.working::before { animation-duration: 3s; } }
.includes .link { font-size: 12px; }
select.small-select { height: 32px; font-size: 12px; max-width: 160px; }

/* Menu: one chip per category, then Needs you */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-row .chip { display: inline-flex; align-items: center; gap: 8px; }
.chip-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip.on .chip-count { color: inherit; }
.chip.needs { border-color: var(--blue); color: var(--blue); }
.chip.needs.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.tag.ask { background: #E6EEF8; color: var(--blue); }
.page-side select { width: 100%; }
[hidden] { display: none !important; }

/* Today as home: a tile per tab, and the to-do list in groups */
.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .home-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-tile { --tab: #000; display: grid; gap: 4px; text-align: left; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--tab); padding: 12px 14px 14px; font: inherit; color: inherit; cursor: pointer; min-height: 112px; align-content: start; }
.home-tile:hover, .home-tile:focus-visible { border-color: var(--tab); border-top-width: 4px; }
.tile-name { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tab); }
.tile-name svg { width: 16px; height: 16px; }
.tile-big { font-size: 22px; font-weight: 500; line-height: 1.2; }
.tile-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.todo-head h2 { margin: 0; }
.todo-group { display: grid; gap: 10px; }
.todo-group + .todo-group, .todo-group + details { margin-top: 18px; }
.todo-group-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 2px; border-bottom: 2px solid #000; }
.todo-group.tabbed .todo-group-head { border-bottom-color: var(--tab); }
.todo-group-head h3 { margin: 0; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.todo-group.tabbed .todo-group-head h3 { color: var(--tab); }
.todo { --tab: #999; border-left: 4px solid var(--tab); }
.todo-label { display: grid; gap: 2px; }
.tab-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tab); }
.todo-group.tabbed .tab-tag { display: none; }
.more-link { justify-self: start; }

/* Clickable pies: a layer down on a click, back up from the middle */
.drill { display: grid; gap: 8px; }
svg.donut .slice:not(.can-open) { cursor: default; }
svg.donut .donut-hole { fill: transparent; cursor: pointer; }
.donut-centre .donut-back { pointer-events: auto; background: none; border: 0; padding: 2px 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--blue); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.donut-row { width: 100%; background: none; border: 0; border-top: 1px solid var(--soft); font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.donut-row:hover .grow { text-decoration: underline; }
.donut-row.loading { opacity: .5; }
.donut-row .chev { font-size: 16px; width: 10px; }
.donut-trail { font-size: 13px; display: flex; flex-wrap: wrap; align-items: baseline; }
.donut-trail .linkish { color: var(--blue); }
.leaving { overflow: hidden; opacity: 0; transition: height .2s ease, opacity .15s ease, padding .2s ease, margin .2s ease; padding-top: 0 !important; padding-bottom: 0 !important; }
.drill { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.drill > * { min-width: 0; }
.donut-trail { gap: 4px; }
button.donut-row { display: flex; min-width: 0; }
.row-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.row-actions .take-off { font-size: 13px; }

/* Menu lines: the dish, then plates a day, food cost, last sold, Take off */
.mlist { display: grid; }
.mline { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--soft); font-size: 15px; }
.mline.mhead { border-top: 0; padding: 0 0 4px; font-size: 12px; }
.mline .mname { min-width: 0; display: grid; gap: 2px; }
.mright { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.mcell { width: 70px; text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.mcell.c-act { width: 64px; }
.mhead .sort { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.mhead .sort.left { text-align: left; width: auto; }
.mhead .sort.on, .mhead .sort:hover { color: var(--ink); }
.mline .tag { font-size: 12px; }
@container main (max-width: 640px) {
  .mcell { width: 58px; font-size: 13px; }
  .mcell.c-act { width: 56px; }
  .mline { gap: 8px; }
}
@container main (max-width: 480px) {
  .mline { grid-template-columns: 40px minmax(0, 1fr); }
  .mright { grid-column: 2; justify-content: flex-start; }
  .mcell { width: auto; text-align: left; }
  .mhead .mright, .mcell.c-last { display: none; }
}
.mhead .sort { white-space: nowrap; }

/* Who's signed in: bottom of the left bar, always in view */
@media (min-width: 701px) { .rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; box-sizing: border-box; } }
.me { position: relative; width: 100%; display: flex; justify-content: center; }
.rail .me-chip { width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border: 1px solid #555; background: none; color: #fff; cursor: pointer; font: inherit; }
.rail .me-chip:hover, .rail .me-chip[aria-expanded="true"] { border-color: #fff; }
.me-dot { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #000; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; letter-spacing: .04em; flex: none; }
.me-level { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #BDBDB8; }
.me-panel { position: absolute; left: calc(100% + 8px); bottom: 0; width: 250px; background: var(--card); color: var(--ink); border: 1px solid #000; padding: 14px; display: grid; gap: 10px; z-index: 50; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.me-panel .me-big { display: flex; gap: 10px; align-items: center; }
.me-panel .me-dot { background: #000; color: #fff; }
@media (max-width: 700px) {
  .rail .spacer { display: none; }
  .me { width: auto; margin-left: auto; }
  .rail .me-chip { width: auto; flex-direction: row; padding: 6px 10px; }
  .me-panel { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); }
}
@media (min-width: 701px) { .me-panel { position: fixed; left: 116px; bottom: 16px; } }
.rail > * { flex: none; }
.rail > .spacer { flex: 1 1 auto; }
.rail > .logo { height: auto; }
.rail .logo img, .rail img.brand-logo { height: auto; max-height: 96px; object-fit: contain; }
/* Phones: the bar runs across the top and scrolls sideways, so who's signed in sits in the bottom-right corner instead */
@media (max-width: 700px) {
  .me { position: fixed; right: 12px; bottom: 12px; z-index: 60; margin: 0; }
  .rail .me-chip { background: #000; border-color: #000; padding: 6px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
  .rail .me-chip .me-level { display: none; }
  .me-panel { position: absolute; right: 0; left: auto; top: auto; bottom: calc(100% + 8px); }
  main { padding-bottom: 84px; }
}
@media (max-width: 700px) { .rail .me-chip { padding: 4px; gap: 0; } }
.me-out { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fff; border-top: 1px solid #555; padding-top: 4px; width: 100%; text-align: center; }
.rail .me-chip:hover .me-out { text-decoration: underline; }
.rail .me-chip.busy::after { display: none; }
@media (max-width: 700px) { .me-out { border-top: 0; padding: 0 8px 0 6px; width: auto; } }

/* Ideas */
.idea { --tab: #000; border-left: 4px solid var(--tab); display: grid; gap: 10px; }
.idea .tab-tag { color: var(--tab); }
.idea-top { display: flex; gap: 16px; align-items: flex-start; }
.idea-title { margin: 2px 0 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.idea-money { text-align: right; display: grid; white-space: nowrap; }
.idea-money b { font-size: 22px; font-weight: 600; }
.idea-why { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 2px; }
.idea-try { font-size: 14px; }
.home-tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.home-tile { padding: 12px 12px 14px; }
.tile-big { font-size: 20px; }
@media (max-width: 1240px) { .home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A tighter left bar: the logo up top, the tabs closer to it; only Logout has a box */
.rail { padding-top: 8px; gap: 2px; }
.rail > .logo { margin: 0 0 6px; }
.rail .me-chip { border: 0; padding: 4px 0 6px; gap: 3px; }
.rail .me-chip:hover, .rail .me-chip[aria-expanded="true"] { border: 0; }
.me-out { border: 1px solid #777; border-top: 1px solid #777; padding: 4px 8px; width: auto; margin-top: 2px; }
.rail .me-chip:hover .me-out { border-color: #fff; text-decoration: none; }
@media (max-width: 700px) { .rail .me-chip { padding: 4px; border-radius: 999px; } .me-out { border: 0; padding: 0 8px 0 6px; margin: 0; } }

/* Pies: Expand opens one large in the middle of the page */
.pie-tools { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.pie-expand { font-size: 12px; white-space: nowrap; }
.pie-big .drill.large { gap: 12px; }
.pie-big-body { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.drill.large .donut-wrap { width: 360px; height: 360px; margin: 0; }
.drill.large .donut-big { font-size: 28px; }
.drill.large .donut-legend { display: block; columns: 2 220px; column-gap: 20px; }
.drill.large .donut-row { break-inside: avoid; }
@container main (max-width: 700px) { .pie-big-body { grid-template-columns: minmax(0, 1fr); } .drill.large .donut-wrap { width: min(320px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; } }

/* Units and containers */
.unit-list { display: grid; }
.unit-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.4fr) auto 110px auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--soft); }
.unit-row input { min-width: 0; width: 100%; box-sizing: border-box; }
.unit-row input.amount { width: 70px; }
@container main (max-width: 700px) { .unit-row { grid-template-columns: 1fr 1fr; } }
.review-weight { min-width: 64px; text-align: right; }

/* The chef's ? : the reasoning behind a number. */
.why-wrap { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.why { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--muted); background: transparent; font-size: 12px; font-weight: 700; line-height: 20px; padding: 0; color: inherit; cursor: pointer; }
.why-wrap.open .why { background: var(--ink); color: var(--card); border-color: var(--ink); }
.why-pop { display: none; position: absolute; left: -8px; top: 30px; z-index: 30; width: min(320px, 70vw); padding: 10px 12px; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.12); font-size: 13px; line-height: 1.4; font-weight: 400; text-align: left; white-space: normal; }
.why-wrap.open .why-pop { display: block; }
@media (hover: hover) { .why-wrap:hover .why-pop { display: block; } }

/* Online ordering: pickup windows */
.wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.wcell { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--soft); }
.wcell.past { opacity: .5; }
.wcell input.amount, .wgrid input.amount { width: 64px; height: 36px; text-align: center; }
.wgrid-wrap { overflow-x: auto; }
.wgrid { border-collapse: collapse; }
.wgrid th, .wgrid td { padding: 4px 6px; text-align: center; }
.wgrid tbody th { text-align: right; white-space: nowrap; }
.wgrid tr.all td, .wgrid tr.all th { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.wgrid input.amount.dirty { border-color: var(--orange); background: #FFF6EA; font-weight: 600; }
.plan-save { position: sticky; bottom: 0; background: var(--card); padding: 10px 0; border-top: 1px solid var(--line); z-index: 1; }

/* A recipe line with a problem: red where it is, the reason under it. */
.irow-msg:empty { display: none; }
.irow-msg { color: var(--danger, #B42318); font-size: 13px; margin: -2px 0 6px; }
.irow.bad-amount input[aria-label="Amount"], .irow.bad-name input[list], .irow.bad-unit select { border-color: var(--danger, #B42318); box-shadow: 0 0 0 1px var(--danger, #B42318); }

/* Sell online: a switch on each dish on the Menu screen */
.sell-switch { display: inline-flex; flex-direction: row; white-space: nowrap; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; justify-self: start; }
.sell-switch input { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 10px; background: #C8C5BE; position: relative; margin: 0; cursor: pointer; transition: background .15s; flex: none; }
.sell-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.sell-switch input:checked { background: var(--ink, #111); }
.sell-switch input:checked::after { left: 16px; }
.sell-switch input:focus-visible { outline: 2px solid var(--ink, #111); outline-offset: 2px; }
.online-find input[type=search] { flex: 1; min-width: 0; }

/* Recipe editor: yields, moving lines, what a rough line still needs, steps. */
.tag.rough { background: #FFF6E0; color: #8A5A00; }
.tag.ok { background: #E8F3EC; color: var(--green); }
.yields { display: flex; flex-direction: column; gap: 6px; }
.yields input.short { width: 90px; height: 40px; }
.yields input.yunit { width: 160px; height: 40px; }
.irow { grid-template-columns: 64px 100px minmax(110px, 1fr) 58px auto; gap: 6px; }
.imove { display: flex; gap: 3px; }
.imove .btn.small-btn { min-width: 30px; width: 30px; padding: 0; }
.irow-hint:empty { display: none; }
.irow-hint { color: #8A5A00; font-size: 13px; margin: -2px 0 6px; }
.irow-hint .link { font-size: 13px; color: #8A5A00; text-decoration: underline; }
.newunit { padding: 8px 10px; background: #FFF8E6; margin: 0 0 8px; }
.newunit input.short { width: 100px; height: 36px; }
.steps { display: flex; flex-direction: column; gap: 8px; }
.step { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: start; }
.stepn { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-top: 6px; }
.step textarea { min-height: 48px; }

.steps-view { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps-view li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 8px; font-size: 17px; line-height: 1.45; margin: 10px 0; }
.steps-view li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.yeq { width: 12px; text-align: center; }

/* The nightly count: a row of taps per item, the estimate beside it (never picked). */
.countrow.tapped { flex-direction: column; align-items: stretch; gap: 8px; }
.taps { display: flex; flex-wrap: wrap; gap: 6px; }
.tap { min-width: 52px; height: 48px; padding: 0 10px; border: 1px solid var(--line); background: var(--card); font-size: 17px; font-weight: 600; cursor: pointer; }
.tap.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.tap.other { font-size: 13px; font-weight: 500; color: var(--muted); }
.tap.other.on { color: var(--card); }
.estimate { color: var(--blue); background: #EEF3FA; padding: 4px 8px; white-space: nowrap; }

/* Pause online orders, on Today. */
.online-pause { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; text-align: left; }
.online-pause > .grow { flex: 1 1 260px; }
.online-pause[hidden] { display: none; }

/* Arranging the online menu: drag sections and items by their handles. */
.arrange { display: flex; flex-direction: column; gap: 18px; }
.arr-cat-head { display: flex; align-items: center; gap: 8px; }
.arr-cat-head h3 { margin: 0; }
.arr-fold { margin-left: auto; white-space: nowrap; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.9em; padding: 6px 4px; cursor: pointer; }
.arr-cat.folded .arr-items { display: none; }
.arr-items { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.arr-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.arr-cat.dragging, .arr-item.dragging { opacity: 0.85; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); position: relative; z-index: 2; }
.drag-handle { touch-action: none; cursor: grab; border: 0; background: none; font-size: 20px; line-height: 1; padding: 6px 4px; color: var(--muted, #777); min-width: 32px; min-height: 40px; }
.drag-handle:active { cursor: grabbing; }
.nowrap { white-space: nowrap; }
.arr-item > .grow { flex: 1 1 auto; min-width: 0; }
.online-find { flex-wrap: wrap; }
.online-find input[type=search] { flex: 1 1 220px; height: 40px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5C58' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 18px; padding: 0 14px 0 42px; font-size: 15px; -webkit-appearance: none; appearance: none; transition: border-color .15s; }
.online-find input[type=search]:hover, .online-find input[type=search]:focus { border-color: var(--ink); }
.online-find input[type=search]::placeholder { color: var(--muted); }

/* New recipe: start from a copy of another. */
.base-pick { padding: 8px 10px; border: 1px dashed var(--line, #d8d8d8); border-radius: 8px; }
.base-pick .base-in { min-width: 220px; flex: 1 1 220px; max-width: 360px; }

/* Recipe lines: where each price comes from (vendor and invoice date), between the name and the cost. */
.irow { grid-template-columns: 64px 100px minmax(110px, 1fr) 112px 58px auto; }
.isrc { font-size: 11.5px; line-height: 1.25; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 4px 7px; min-height: 36px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.isrc:empty { border-color: transparent; }
.isrc b { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.isrc span { white-space: nowrap; }
/* How old a price is: yellow past 3 months, red past 6. The key under the lines matches. */
.isrc.age-yellow { background: #FFF6E0; border-color: #EBD9A8; }
.isrc.age-yellow b, .isrc.age-yellow span { color: #8A5A00; }
.isrc.age-red { background: #FDECEA; border-color: #F2B8B5; }
.isrc.age-red b, .isrc.age-red span { color: #B42318; }
.ilist-wrap { container-type: inline-size; }
.age-keys:empty { display: none; }
.age-keys { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 10px; font-size: 12.5px; }
.age-key { display: flex; gap: 8px; align-items: flex-start; }
.age-key i { flex: none; width: 14px; height: 14px; border-radius: 4px; margin-top: 1px; border: 1px solid; }
.age-key.age-yellow { color: #8A5A00; } .age-key.age-yellow i { background: #FFF6E0; border-color: #EBD9A8; }
.age-key.age-red { color: #B42318; } .age-key.age-red i { background: #FDECEA; border-color: #F2B8B5; }
/* The cost of an old price: plain beside the Price from box; with no room for the box, yellow or red,
   and a tap says why. */
.cost-tip { margin-left: 0; }
.age-tap-hint { display: none; }
@container (max-width: 640px) { .age-tap-hint { display: block; padding-left: 22px; } }
.cost-tip .why-pop { left: auto; right: -4px; top: 28px; }
.cost-tap { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: default; pointer-events: none; }
@container (max-width: 640px) {
  .cost-tap { pointer-events: auto; cursor: pointer; font-weight: 600; text-decoration: underline dotted; text-underline-offset: 3px; }
  .cost-tap.age-yellow { color: #8A5A00; }
  .cost-tap.age-red { color: #B42318; }
}
/* Not enough room for it all (iPad portrait, or landscape beside the cost box): the Price from box goes. */
.ilist { container-type: inline-size; }
@container (max-width: 640px) {
  .irow { grid-template-columns: 58px 92px minmax(96px, 1fr) 52px auto; gap: 5px; }
  .irow .isrc, .irow.head > :nth-child(4) { display: none; }
}
@media (max-width: 640px) { .irow { grid-template-columns: 64px 90px 1fr auto; } .isrc, .irow.head > :nth-child(4), .irow .icost, .irow.head > :nth-child(5) { display: none; } }

/* Recipe editor steps: the numbers line up with "Steps", and "+ Add a step" with "+ Add a line". */
.editor .steps { padding-left: 0; font-size: inherit; }
.stepn { margin-left: 0; }

/* Recipe checks. */
.rchecks { display: flex; flex-direction: column; margin-top: 10px; }
.rcheck { padding: 12px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.rcheck h3 { margin: 0; font-size: 16px; }
.rcheck-likely { font-size: 14px; background: var(--soft); border-radius: 8px; padding: 8px 10px; }
.rcheck-pick .pick-in { min-width: 220px; flex: 1 1 220px; max-width: 360px; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
.rcheck-done { font-size: 14px; color: var(--muted); }

/* Recipes: the clean-book home and the tree. */
.attn-h { margin-bottom: 8px; }
.attn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.attn-tile { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 2px; }
.attn-tile b { font-size: 24px; line-height: 1.1; } .attn-tile .t { font-size: 13px; font-weight: 600; } .attn-tile .s { font-size: 12px; color: var(--muted); }
.attn-tile.red b { color: #B42318; } .attn-tile.amber b { color: #8A5A00; } .attn-tile.blue b { color: var(--blue); }
.attn-tile.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ttable { display: flex; flex-direction: column; }
.rt-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 92px 60px 70px 64px 62px 14px; gap: 10px; align-items: center; padding: 10px 4px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; text-align: left; width: 100%; cursor: pointer; color: inherit; }
.rt-row.head { font-size: 12px; color: var(--muted); font-weight: 600; cursor: default; border-top: 0; padding-top: 4px; }
.rt-row .num, .lrow2 .num { text-align: right; font-variant-numeric: tabular-nums; }
.nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .nm b { font-weight: 600; }
.mks { display: flex; gap: 4px; flex-wrap: wrap; }
.mk { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.mk-red, .mk-notBought, .mk-noCost { background: #FDECEA; color: #B42318; }
.mk-yellow, .mk-rough { background: #FFF6E0; color: #8A5A00; }
.up-bad { color: #B42318; font-weight: 600; font-size: 12px; } .down-good { color: var(--green); font-weight: 600; font-size: 12px; }
.chev { color: var(--muted); }
.sub-h { margin: 16px 0 4px; font-size: 15px; }
.all-clear { text-align: center; padding: 28px 16px; } .all-clear .big { font-size: 40px; }
.good-text { color: var(--green); }
.lrow2 { display: grid; grid-template-columns: minmax(0, 1.5fr) 82px 124px 62px 50px 14px; gap: 10px; align-items: center; padding: 9px 4px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; text-align: left; width: 100%; color: inherit; }
.lrow2.clickable { cursor: pointer; } .lrow2.clickable:hover, .rt-row:not(.head):hover { background: var(--soft); }
.lrow2.head { font-size: 12px; color: var(--muted); font-weight: 600; border-top: 0; }
.src { font-size: 11.5px; line-height: 1.25; border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; color: var(--muted); overflow: hidden; }
.src b { display: block; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src.age-red { background: #FDECEA; border-color: #F2B8B5; color: #B42318; } .src.age-red b { color: #B42318; }
.src.age-yellow { background: #FFF6E0; border-color: #EBD9A8; color: #8A5A00; } .src.age-yellow b { color: #8A5A00; }
.right-col { text-align: right; }
.chart-wrap svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.cost-chart .grid { stroke: var(--line); stroke-width: 1; } .cost-chart .tick { font-size: 11px; fill: var(--muted); }
.cost-chart .cost-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; }
.cost-chart .cost-dot { fill: var(--blue); stroke: var(--card); stroke-width: 2; }
.cost-chart .end-label { font-size: 12px; font-weight: 600; fill: var(--ink); }
.cost-chart .hover-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.cost-chart .hover-box { fill: var(--card); stroke: var(--line); }
.cost-chart .hover-date { font-size: 11px; fill: var(--muted); } .cost-chart .hover-cost { font-size: 13px; font-weight: 600; fill: var(--ink); }
.moved { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.alertlist { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.alertlist .a { display: flex; gap: 8px; align-items: flex-start; }
.rstale { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); }
.search-wrap { position: relative; }
.search-big { height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font-size: 15px; width: 320px; max-width: 100%; background: #fff; }
.search-pop { position: absolute; top: 48px; left: 0; right: 0; min-width: 320px; z-index: 40; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.12); padding: 6px 10px; max-height: 60vh; overflow: auto; }
.az { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.az-row, .cook-list button { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 12px 6px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 16px; text-align: left; cursor: pointer; color: inherit; width: 100%; }
.cook-list { display: flex; flex-direction: column; margin-top: 6px; }
@media (max-width: 1000px) {
  .attn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-row { grid-template-columns: minmax(0, 1.6fr) 80px 66px 56px 12px; }
  .rt-row > :nth-child(3), .rt-row > :nth-child(5) { display: none; }
  .lrow2 { grid-template-columns: minmax(0, 1.5fr) 76px 60px 46px 12px; }
  .lrow2 > :nth-child(3) { display: none; }
  .search-big { width: 240px; }
}
.alertlist:empty { display: none; }
.alertlist:empty + .rstale { border-top: 0; margin-top: 2px; padding-top: 0; }

/* Counting: the tally and Done follow along down a long list; Full is one tap for "at par". */
@media (min-width: 1001px) { .page.sticky-side > .page-side { position: sticky; top: 16px; align-self: start; } }
.tap.full { border-color: var(--green); color: var(--green); font-weight: 700; padding-left: 14px; padding-right: 14px; }
.tap.full.on { background: var(--green); color: #fff; }
.count-end { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); align-items: center; }

/* The newer pieces use the theme's corners: boxes like cards, markers like tags. */
.attn-tile, .search-big, .search-pop, .src, .isrc, .rcheck-likely, .rcheck-pick .pick-in, .base-pick, .search-wrap input { border-radius: var(--radius); }
.mk { border-radius: 2px; }

/* Variations and modifiers on an item's page, and the Modifiers page. */
.item-extras { display: flex; flex-direction: column; gap: 14px; }
.mod-head { margin-top: 4px; } .mod-head h2 { margin: 0; }
.mod-list { display: flex; flex-direction: column; }
.mod-row { border-top: 1px solid var(--line); }
.mod-line { display: grid; grid-template-columns: minmax(0, 1fr) 96px 70px 14px; gap: 10px; align-items: center; padding: 10px 4px; width: 100%; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.mod-line:hover:not(:disabled) { background: var(--soft); } .mod-line:disabled { cursor: default; }
.mod-line .nm > span:first-child { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mod-line .num { text-align: right; font-variant-numeric: tabular-nums; }
.mod-edit { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin: 0 0 10px; background: var(--soft); border-radius: var(--radius); }
.mod-edit input.short { width: 80px; } .mod-edit .grow-in { flex: 1 1 220px; min-width: 180px; height: 40px; }
.rt-row.vars { grid-template-columns: minmax(0, 1.6fr) 70px 80px 90px 100px; cursor: default; }
.rt-row.vars:hover { background: none; }

/* Food cost against the goal (Performance, top right): green under, amber near, red over. */
:root { --fc-good: #2E7D4F; --fc-near: #B7791F; --fc-bad: #B42318; }
.fc-under { color: var(--fc-good); } .fc-near { color: #8A5A00; } .fc-over { color: var(--fc-bad); }
.fc-chart .fc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fc-chart .fc-dot { fill: var(--blue); stroke: var(--card); stroke-width: 1.5; }
.fc-chart .fc-dot.fc-under { fill: var(--fc-good); } .fc-chart .fc-dot.fc-near { fill: var(--fc-near); } .fc-chart .fc-dot.fc-over { fill: var(--fc-bad); }
.fc-chart .fc-goal { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 3; opacity: .55; }
.fc-chart .fc-goal-label { font-size: 11px; font-weight: 600; fill: var(--ink); opacity: .7; }
.fc-panel { margin: 6px 0 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.fc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.fc-pct { font-size: 20px; }
.fc-chart .fc-band { fill: var(--fc-good); opacity: .08; }

/* Full price and specials apart (Performance). */
.price-line { margin-top: 6px; }
.price-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 10px; }
.price-split .ps-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 2px; }
.price-split .ps-pct { font-weight: 700; }

/* Performance: categories as tiles across the top (cost against the goal, gross profit). */
.cat-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; margin-bottom: 4px; scrollbar-width: thin; }
.cat-tile { flex: 0 0 auto; min-width: 150px; display: grid; gap: 2px; text-align: left; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; scroll-snap-align: start; font: inherit; color: var(--ink); }
.cat-tile:hover { border-color: var(--ink); }
.cat-tile.on { border: 2px solid var(--ink); padding: 9px 13px; }
.cat-tile .cat-name { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.cat-tile .cat-pct { font-weight: 700; font-size: 15px; }
.cat-tile .cat-sub { font-size: 12px; color: var(--muted); }

.price-pair { display: grid; line-height: 1.2; white-space: nowrap; }
.fc-panel.large { border-top: none; padding-top: 0; }
.fc-panel.large .fc-pct { font-size: 26px; }
.fc-head .pie-expand { margin-left: 4px; }

/* The menu matrix (Performance, Charts). */
.matrix-chart .grid { stroke: var(--line); stroke-width: 1; } .matrix-chart .tick { font-size: 11px; fill: var(--muted); }
.matrix-chart .mx-axis { font-size: 12px; fill: var(--muted); font-weight: 600; }
.matrix-chart .mx-avg { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 4; opacity: .45; }
.matrix-chart .mx-quad { font-size: 12px; fill: var(--muted); font-style: italic; }
.matrix-chart .mx-dot { fill-opacity: .6; stroke-width: 1.5; }
.matrix-chart .mx-dish:hover .mx-dot, .matrix-chart .mx-dish:focus .mx-dot { fill-opacity: .9; stroke-width: 3; }
.matrix-chart .mx-dish { cursor: default; outline: none; }
.matrix-chart .mx-label { font-size: 12px; fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.matrix-chart .hover-box { fill: var(--card); stroke: var(--line); } .matrix-chart .hover-date { font-size: 11px; fill: var(--muted); } .matrix-chart .hover-cost { font-size: 13px; font-weight: 600; fill: var(--ink); }
.matrix-chart .mx-label { pointer-events: none; } .matrix-chart .mx-leader { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.price-moved { color: var(--blue); font-weight: 600; }

/* Invoices typed in. */
.inv-head { gap: 8px; margin: 10px 0; } .inv-head select, .inv-head input { min-width: 160px; }
.inv-lines { display: grid; gap: 8px; margin-bottom: 8px; }
.inv-line { display: grid; grid-template-columns: minmax(180px, 1fr) 90px 80px 100px auto; gap: 8px; align-items: center; }
.inv-line > .small { grid-column: 1 / -1; margin-top: -4px; }
.inv-line [hidden] { display: none; }
.inv-row { display: flex; gap: 12px; align-items: center; }
@media (max-width: 700px) { .inv-line { grid-template-columns: 1fr 1fr; } }
.inv-line .search-wrap, .inv-line input { width: 100%; min-width: 0; box-sizing: border-box; }

/* Invoice photos. */
.scan-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.scan-thumb { display: grid; gap: 4px; justify-items: start; }
.scan-thumb img { width: 110px; height: 140px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); }
.scan-pdf { width: 110px; height: 140px; display: grid; place-items: center; text-align: center; font-size: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; }
.scan-pages { display: grid; gap: 8px; }
.scan-pages img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); display: block; }
.scan-lines { display: grid; gap: 0; margin: 8px 0; }
.scan-line { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.2fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.scan-line.flagged { background: linear-gradient(90deg, rgba(201,138,20,.06), transparent 60%); }
.scan-read { display: flex; gap: 10px; align-items: flex-start; }
.scan-ours { display: grid; gap: 6px; }
.scan-ours .search-wrap input { width: 100%; box-sizing: border-box; }
.scan-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.warn-note { border-left-color: var(--orange); }
.error-text { color: var(--accent); }
@media (max-width: 900px) { .scan-line { grid-template-columns: 1fr; } }
.spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.9s linear infinite; margin: 20px auto; }
.scan-alts { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.scan-thumb.warn img { outline: 2px solid var(--orange); }

.cmp-score { display: flex; gap: 28px; margin: 10px 0; } .cmp-score b { font-size: 26px; display: block; }
.cmp-row summary { display: flex; gap: 10px; cursor: pointer; padding: 6px 0; } .cmp-line { padding: 4px 0 4px 12px; border-left: 2px solid var(--line); margin: 4px 0; }
.new-ing { display: grid; gap: 6px; padding: 8px; }

/* Online settings: the order page's header photo and text, previewed as customers see it. */
.online-settings-head { align-items: center; gap: 12px; }
.online-settings-head h2 { margin: 0; }
.page-preview { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.page-preview img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; display: block; }
.page-empty { aspect-ratio: 3 / 1; display: flex; align-items: center; justify-content: center; }
.notice-text { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.5; background: #fff; resize: vertical; }

.pass-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.pass-form input { width: 100%; }

/* A recipe's history: one row per saved version, an earlier one opened to read or put back. */
.history { display: flex; flex-direction: column; gap: 10px; }
.history-row { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.history-row:first-child { border-top: 0; padding-top: 0; }
.history-detail:empty { display: none; }
.history-detail { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px; }
.history-lines { margin: 0; padding-left: 18px; }
.history-row > .link { align-self: flex-start; }