:root {
  --bg: #F5F4F0; --card: #FFFFFF; --ink: #1C1F22; --muted: #5B6168; --line: #E2DFD8; --soft: #EFEDE8;
  --accent: #B83A26; --rail: #1C1F22;
  --radius: 14px;
  /* Links, and only links, are blue. */
  --link: #1F4F8F;
  /* Status, and only status: green good, yellow caution, red a problem. The -mark shade is for
     bars, dots and edges; the plain one for text; -soft behind it; -line for a border on -soft. */
  --good: #2B6B43; --good-soft: #E3F0E6; --good-line: #C9E2D1;
  --caution: #8A5A00; --caution-mark: #D4A017; --caution-soft: #FFF4D6; --caution-line: #EBD9A8;
  --problem: #B3261E; --problem-soft: #FBE6E2; --problem-line: #F0C4BC;
  /* Telling series apart (charts, area tiles): never red, yellow, green or blue, so never read as
     status or a link. Fixed order, each next to the one before checked apart for colour-blind eyes. */
  --series-1: #2F3338; --series-2: #A8A49A; --series-3: #7C5CC4; --series-4: #0F7C80; --series-5: #C77BB0; --series-6: #5E4A8C;
  --series-7: #B9A6E3; --series-8: #6F7378; --series-9: #6FB3B6; --series-10: #3F5F61; --series-11: #E3B3D3; --series-12: #8C7FA8;
  --series-other: #D6D2C9;
}
* { 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, textarea { 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: var(--good-soft); color: var(--good); }
.tag.warn { background: var(--caution-soft); color: var(--caution); }
.tag.bad { background: var(--problem-soft); color: var(--problem); }
.error { color: var(--problem); font-size: 14px; min-height: 1.2em; }
.note { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; font-size: 14px; }
.note.bad-note { background: var(--problem-soft); border-color: var(--problem-line); border-left: 3px solid var(--problem); }

/* 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(--ink); color: #fff; border-color: var(--ink); }
.btn:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; color: var(--link); 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 var(--ink); 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(--series-2); }
.pricebar.fc-under .food { background: var(--good); } .pricebar.fc-near .food { background: var(--caution-mark); } .pricebar.fc-over .food { background: var(--problem); }
.pricebar .left { background: var(--soft); }
.total { height: 20px; border-radius: 5px; background: var(--series-1); min-width: 2px; }
.tag.blue { background: var(--soft); color: var(--ink); }
.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(--good); } .spark.up circle { fill: var(--good); }
.spark.down polyline { stroke: var(--problem); } .spark.down circle { fill: var(--problem); }
.trend-up { color: var(--good); font-weight: 700; }
.trend-down { color: var(--problem); 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(--caution); }
.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(--caution-mark); background: var(--caution-soft); }
.check.on { background: var(--good); border-color: var(--good); }
.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: 17px; height: 17px; accent-color: var(--ink); } /* black like the rest of the app, not the browser’s blue */
input[type=radio] { accent-color: var(--ink); }
.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(--caution); }
.todo.ask .todo-label { color: var(--caution); }
.todo.alert .todo-label { color: var(--problem); }
.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; }
/* Every page's head: the area small on top, the title, a line under it; on the right the search, the other
   buttons, the one main button. On a phone: the title, then the search full width, then the buttons. */
.head-tools { justify-content: flex-end; align-items: center; }
.page-head .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
@media (max-width: 700px) {
  .head-tools { flex: 1 1 100%; justify-content: flex-start; }
  .head-tools > .head-search { flex: 1 1 100%; }
  .head-search .search-wrap, .head-search .search-big { width: 100%; }
  .head-search .search-pop { min-width: 0; }
}
/* Sections within a page: the chip row (Menu's), right under the head. */
.page-tabs .count-badge { margin-left: -2px; }
@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(--caution); }
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(--ink); }
.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, var(--caution-soft), 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(--link); }
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 th { padding: 8px 16px 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; }
table.ingredients .yield-col { width: 1%; white-space: nowrap; text-align: right; font-size: 15px; }
table.ingredients td.yield-col .row { justify-content: flex-end; }
table.ingredients td.yield-col input.amount { width: 4.5em; }
table.ingredients .yield-btn { font-size: 16px; padding: 0; }
table.ingredients .yield-col .small { font-size: 12px; }
table.ingredients td.amt { width: 34%; font-weight: 700; white-space: nowrap; }
.card-link { color: var(--link); 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; }
/* A new version is ready: a small note at the bottom that never covers the work (web/app.js, A new version). */
.update-note { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,.18); font-size: 15px; }
.update-note .btn { flex: none; }
@media (max-width: 520px) { .update-note { flex-wrap: wrap; } .update-note > span { flex-basis: 100%; } }
.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; }
  button.photo-frame { display: block !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; --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(--problem); }
.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(--link); }
.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); }
/* "Why?" (whyLink): a minor link; its line opens in place under the item. */
.why-link { font-size: 13px; }
.why-line { margin-top: 4px; }
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(--ink); color: var(--ink); }
.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(--muted); 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(--good); }
.pace-fill.slow { background: var(--caution-mark); }
.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(--good); }
.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.rtotal { border-top: 2px solid var(--ink); font-weight: 600; }
.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: var(--series-1); } .mix-togo { background: var(--series-2); } .mix-online { background: var(--series-3); }
@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; }
.rrow.prime.prime-core { grid-template-columns: minmax(96px, 1.2fr) 84px repeat(4, 80px) 56px 64px; }
.chart-svg .strong-tick { fill: var(--ink); font-weight: 600; }
.good-text { color: var(--good); }
.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; }
/* Ingredient prices on core: a row wraps its numbers under the name rather than run off a phone. */
.lrow.core-price-row { flex-wrap: wrap; row-gap: 2px; }
.lrow.core-price-row > .grow { min-width: 0; flex: 1 1 55%; }
.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(--good); }
.todo.done-row .todo-label { color: var(--good); }
/* Saving (owner, Nov 7): the line folded at once, a spinner until the server has it; then Done and Undo. */
.todo.done-row.saving { border-left-color: var(--line); opacity: .7; }
.todo.done-row.saving .todo-label { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.todo-spin { width: 11px; height: 11px; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@media (prefers-reduced-motion: reduce) { .todo-spin { animation-duration: 2.4s; } }
@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(--caution-mark); color: var(--caution); }
.chip.needs.on { background: var(--caution-soft); color: var(--caution); border-color: var(--caution-mark); }
.tag.ask { background: var(--caution-soft); color: var(--caution); }
.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(--ink); }
.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(--ink); }
/* A to-do's edge says how pressing it is: red a problem, yellow due or waiting on an answer. */
.todo { border-left: 4px solid var(--line); }
.todo.alert { border-left-color: var(--problem); } .todo.due, .todo.ask { border-left-color: var(--caution-mark); }
.todo-label { display: grid; gap: 2px; }
.tab-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.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(--link); 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(--link); }
.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(--ink); }
.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(--caution-mark); background: var(--caution-soft); 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(--problem); 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(--problem); box-shadow: 0 0 0 1px var(--problem); }

/* 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: var(--caution-soft); color: var(--caution); }
.tag.ok { background: var(--good-soft); color: var(--good); }
.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-yield:empty { display: none; }
.irow-yield { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 6px; }
.irow-yield input.short { width: 64px; }
.iline > .irow-yield, .iline > .irow-hint, .iline > .irow-msg { padding-left: 32px; }
.irow-hint { color: var(--caution); font-size: 13px; margin: -2px 0 6px; }
.irow-hint .link { font-size: 13px; color: var(--caution); text-decoration: underline; }
.newunit { padding: 8px 10px; background: var(--caution-soft); 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: 26px 34px 1fr auto; gap: 8px; align-items: start; }
.step.dragging { opacity: 0.9; background: var(--card); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); position: relative; z-index: 2; }
.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(--muted); background: var(--soft); 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: 26px 64px 100px minmax(110px, 1fr) 112px 54px 58px 30px; }
.iline.dragging { opacity: 0.9; background: var(--card); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); position: relative; z-index: 2; }
.irow .drag-handle, .step .drag-handle { min-width: 26px; padding: 6px 0; }
.iyield { display: flex; justify-content: flex-end; }
.yield-btn { border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; display: inline-flex; gap: 3px; align-items: baseline; white-space: nowrap; }
.yield-btn.none { color: var(--muted); font-weight: 400; }
.yield-btn.own { color: var(--caution); }
.yield-btn .yield-edit { font-size: 11px; color: var(--muted); }
.yield-btn:hover .yield-edit, .yield-btn:focus-visible .yield-edit { color: var(--ink); }
.irow-yield.summary-only { display: none; }
.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: var(--caution-soft); border-color: var(--caution-line); }
.isrc.age-yellow b, .isrc.age-yellow span { color: var(--caution); }
.isrc.age-red { background: var(--problem-soft); border-color: var(--problem-line); }
.isrc.age-red b, .isrc.age-red span { color: var(--problem); }
.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: var(--caution); } .age-key.age-yellow i { background: var(--caution-soft); border-color: var(--caution-line); }
.age-key.age-red { color: var(--problem); } .age-key.age-red i { background: var(--problem-soft); border-color: var(--problem-line); }
/* 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: var(--caution); }
  .cost-tap.age-red { color: var(--problem); }
}
/* 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: 26px 58px 92px minmax(96px, 1fr) 48px 52px 30px; gap: 5px; }
  .irow .isrc, .irow.head > :nth-child(5) { display: none; }
}
@media (max-width: 640px) { .irow { grid-template-columns: 26px 64px 90px 1fr 30px; } .isrc, .irow.head > :nth-child(5), .irow .iyield, .irow.head > :nth-child(6), .irow .icost, .irow.head > :nth-child(7) { display: none; } .irow-yield.summary-only { display: flex; } }

/* 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: var(--problem); } .attn-tile.amber b { color: var(--caution); }
.attn-tile.core-low-tile.none b { color: var(--good); }
.core-low-none { padding: 6px 0; }
.core-partly { align-self: flex-start; width: auto; }
.core-partly-head { cursor: pointer; font: inherit; }
.attn-tile.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
/* Lowest performers' list (owner, Oct 31): a dish's line, its trend and plates a day, then the tags that apply. */
.core-low-row .core-low-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.core-low-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.core-low-trend { display: inline-flex; align-items: center; gap: 4px; }
.core-low-trend svg { width: 56px; height: 18px; }
.core-low-tags .tag { font-size: 12px; }
.core-leave-out { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.core-leave-out input[type=text] { width: 140px; }
.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: var(--problem-soft); color: var(--problem); }
.mk-yellow, .mk-rough { background: var(--caution-soft); color: var(--caution); }
.up-bad { color: var(--problem); font-weight: 600; font-size: 12px; } .down-good { color: var(--good); 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; }
.no-recipe-line { align-items: center; gap: 12px; margin-top: 6px; }
.good-text { color: var(--good); }
.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: var(--problem-soft); border-color: var(--problem-line); color: var(--problem); } .src.age-red b { color: var(--problem); }
.src.age-yellow { background: var(--caution-soft); border-color: var(--caution-line); color: var(--caution); } .src.age-yellow b { color: var(--caution); }
.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(--series-1); stroke-width: 2; stroke-linejoin: round; }
.cost-chart .cost-dot { fill: var(--series-1); 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(--ink); color: var(--ink); font-weight: 700; padding-left: 14px; padding-right: 14px; }
.tap.full.on { background: var(--ink); 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. */
.fc-under { color: var(--good); } .fc-near { color: var(--caution); } .fc-over { color: var(--problem); }
.fc-chart .fc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.fc-chart .fc-dot { fill: var(--series-1); stroke: var(--card); stroke-width: 1.5; }
.fc-chart .fc-dot.fc-under { fill: var(--good); } .fc-chart .fc-dot.fc-near { fill: var(--caution-mark); } .fc-chart .fc-dot.fc-over { fill: var(--problem); }
.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(--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). */

.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(--ink); font-weight: 600; }
/* The matrix's hidden dishes: chips above, a ticked list beside (below when the column is narrow), Hide for a picked dish. */
.matrix-chart .mx-hit { fill: transparent; cursor: pointer; }
.matrix-chart .mx-dish { cursor: pointer; }
.matrix-chart .mx-dish.picked .mx-dot { fill-opacity: .9; stroke-width: 3; }
.mx-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mx-hidden .link { padding: 0 6px; }
.mx-body { display: grid; grid-template-columns: minmax(0, 1fr) 152px; gap: 14px; align-items: start; }
.mx-main { min-width: 0; }
.mx-list { display: flex; flex-direction: column; max-height: 372px; overflow-y: auto; border-left: 1px solid var(--line); padding-left: 12px; }
.mx-row { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 30px; font-size: 13px; font-weight: 400; cursor: pointer; }
.mx-row span { min-width: 0; overflow-wrap: anywhere; }
.mx-row input { flex: none; margin: 0; }
.mx-pick { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.mx-pick:empty { display: none; }
@container main (max-width: 640px) {
  .mx-body { grid-template-columns: minmax(0, 1fr); }
  .mx-list { border-left: 0; border-top: 1px solid var(--line); padding: 6px 0 0; max-height: 240px; }
  .mx-row { min-height: 40px; }
}

/* 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-other > .grow { grid-column: 1 / 4; } .inv-other > .money-in { grid-column: 4; }
@media (max-width: 700px) { .inv-other > .grow { grid-column: 1 / -1; } .inv-other > .money-in { grid-column: 1; } }
.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-thumb-open { padding: 0; border: 0; background: none; cursor: zoom-in; display: block; }
.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%); }
/* How sure the match is: green matched before, yellow a guess or something to look at, red nothing found. */
.scan-line { border-left: 5px solid transparent; padding-left: 12px; }
.scan-line.conf-green { border-left-color: var(--good); }
.scan-line.conf-yellow { border-left-color: var(--caution-mark); }
.scan-line.conf-red { border-left-color: var(--problem); }
.scan-line.conf-grey { border-left-color: #B9B9B4; }
.conf-grey .scan-conf { color: #77776F; }
.scan-conf { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.conf-green .scan-conf { color: var(--good); }
.conf-yellow .scan-conf { color: var(--caution); }
.conf-red .scan-conf { color: var(--problem); }
.scan-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.scan-suggest[hidden] { display: none; }
.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(--caution-mark); }
.note.caution-note { background: var(--caution-soft); border-color: var(--caution-line); border-left: 3px solid var(--caution); color: var(--caution); font-weight: 600; }
.error-text { color: var(--problem); }
@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(--caution-mark); }

.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; }
.changed-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--soft); border-radius: var(--radius); }
.changed-row label.inline { justify-content: flex-start; font-weight: 600; }
.changed-row label.inline input[type=checkbox] { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; margin: 0; accent-color: var(--ink); }

/* ------------------------------------------------------------------ the Floor
   The front of house's board on a POS iPad: big enough to read across a counter, dense enough to fit a shift. */
.floor { min-height: 100vh; padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 16px; max-width: 1400px; margin: 0 auto; }
.floor-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.floor-head > .grow { flex: 1 1 220px; min-width: 0; }
.floor-head h1 { font-size: 28px; }
.floor-search { height: 44px; flex: 1 1 260px; max-width: 420px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; font-size: 16px; background: var(--card); }
.floor-board { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.floor-main, .floor-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1000px) { .floor-board { grid-template-columns: 1fr; } }

.floor-stats { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 15px; }
.floor-stats b { font-size: 22px; }
.floor-res { display: flex; flex-direction: column; }
.res { display: grid; grid-template-columns: 62px 70px 34px minmax(0, 1fr); gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--soft); align-items: baseline; }
.res.past { opacity: .45; }
.res.notable .res-name { font-weight: 700; }
.res-time { font-weight: 700; font-size: 16px; }
.res-table { font-weight: 600; color: var(--muted); }
.res-size { font-weight: 700; text-align: center; background: var(--soft); border-radius: var(--radius); padding: 1px 0; }
.res-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.res-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 16px; }
.res-name .star { color: var(--ink); }
.small.strong { font-weight: 600; }

.menu-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.menu-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--card); }
.menu-card.new { grid-column: span 2; border-left: 4px solid var(--ink); }
@media (max-width: 700px) { .menu-card.new { grid-column: auto; } }
.menu-card h3 { margin: 0; font-size: 19px; }
.menu-card ul, .print-card ul, .dish-lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.menu-card.new ul { columns: 2; display: block; }
.allergy { font-size: 13px; font-weight: 600; color: var(--problem); }
.floor-gelato ol { margin: 0; padding-left: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; font-size: 16px; }
.floor-gelato li .tag { margin-left: 6px; }
.floor-note { padding: 8px 0; border-top: 1px solid var(--soft); display: flex; flex-direction: column; gap: 2px; }
.floor-note:first-of-type { border-top: 0; }

.checks { display: flex; flex-direction: column; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 2px; border: 0; border-top: 1px solid var(--soft); background: none; text-align: left; cursor: pointer; font-size: 15px; }
.check-row .box { width: 24px; height: 24px; flex: none; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; border-radius: 4px; }
.check-row.done .box { background: var(--ink); color: #fff; }
.check-row.done .grow { color: var(--muted); text-decoration: line-through; }
.floor-side textarea, .page textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: inherit; font-size: 15px; resize: vertical; }

.floor-modal { position: fixed; inset: 0; background: rgba(20, 22, 24, .55); display: flex; align-items: center; justify-content: center; z-index: 30; padding: 16px; }
.floor-modal-panel { width: min(720px, 100%); max-height: 92vh; overflow-y: auto; background: var(--bg); padding: 22px; display: flex; flex-direction: column; gap: 16px; border-radius: var(--radius); }
.floor-modal-panel.narrow { width: min(420px, 100%); }
.floor-modal-panel .pinpad { max-width: 340px; width: 100%; align-self: center; }
.floor-modal-panel .names { max-width: none; }

.pick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 4px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font-size: 15px; }
.list > .pick-row { padding: 12px 4px; }
.allergy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.allergy-chips .chip { height: 36px; }
.chip.on { background: var(--ink); color: #fff; }
.sheet h3 { margin: 6px 0 0; }

.italy-map { width: 100%; max-width: 320px; height: auto; display: block; }
.italy-map .map-dot { cursor: pointer; }
.italy-map .map-dot:focus { outline: none; }
.italy-map .map-dot:focus circle { stroke: var(--link); stroke-width: 1; }
.wine-top { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.wine-top .italy-map { max-width: 200px; }
.wine-photo { max-height: 260px; max-width: 120px; object-fit: contain; }
.wine-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.card.suggest { background: #F7F7F5; }
.button-picks { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; padding: 6px 0; }
.post-row { padding: 8px 0; border-top: 1px solid var(--soft); }
.post-row input[type=text] { height: 40px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 10px; font-size: 15px; }
.post-row input[type=text]:first-child { width: 160px; }
.post-row input[type=text]:nth-child(3) { flex: 1 1 200px; }
.ing-row { padding: 12px 0; border-top: 1px solid var(--soft); display: flex; flex-direction: column; gap: 8px; }
.ing-head { display: flex; align-items: center; gap: 10px; }
.ing-head > .grow { flex: 1; min-width: 0; }
.ing-row input[type=text] { height: 36px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 10px; font-size: 14px; width: 220px; }

/* Cut-out cards: two to a row, like the printed menu updates. Only they print. */
.print-cards { display: none; }
/* A card's look, for printing and for measuring it first (off screen, at its printed width). */
.print-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 12pt; overflow: hidden; min-height: 0; }
.print-card h3 { margin: 0; font-size: 15pt; text-transform: uppercase; letter-spacing: .06em; }
.print-card .kicker { font-size: 10pt; }
.print-card .kicker.pans { margin-top: 4px; }
.print-card .allergy { color: #000; font-size: 10pt; }
.print-card.small-type { font-size: 10pt; gap: 4px; }
.print-card.small-type h3 { font-size: 13pt; }
.print-measure { position: absolute; left: -10000px; top: 0; width: 3.85in; visibility: hidden; }
.print-picks { display: flex; flex-direction: column; gap: 2px; }
.print-pick { font-size: 16px; min-height: 40px; }
.print-pick input { width: 20px; height: 20px; }
@media print {
  body.printing-cards > *:not(.print-cards) { display: none !important; }
  @page { size: letter; margin: 0.4in; }
  body.printing-cards .print-cards { display: block; }
  /* One letter page per card, repeated to fill it: two across, rows that never stretch, each cut line drawn once. */
  .print-page { display: grid; grid-template-columns: 1fr 1fr; height: 10.15in; border-top: 1px dashed #888; border-left: 1px dashed #888; box-sizing: border-box; break-after: page; page-break-after: always; break-inside: avoid; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .print-page.rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .print-page.rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .print-page.rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .print-card { border-right: 1px dashed #888; border-bottom: 1px dashed #888; }
}
.gelato-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 18px; }
.gelato-edit .row > input[type=text], .pan-edit .row > input[type=text] { flex: 1 1 0; min-width: 0; }
.pan-edit { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.pan-edit input.short { flex: none; width: 90px; }
.page-side input[type=text] { width: 100%; }
.card > .row.wrap > .grow { flex: 1 1 220px; }
.card > .row.wrap > .grow > input[type=text] { width: 100%; }
.post-row [hidden] { display: none; }
.ing-row .allergy-chips .chip { height: 32px; padding: 0 10px; font-size: 13px; }
.ing-row { padding: 10px 0; gap: 6px; }
.plain-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.swap-row { padding: 8px 0; border-top: 1px solid var(--soft); }
.swap-row select { width: 100%; }
.list > .ing-row { align-items: stretch; flex-direction: column; }
.ing-row .allergy-chips .chip { letter-spacing: .04em; }
.floor-gelato ul { margin: 0; padding-left: 20px; }

/* The board, compact: what to know tonight on the left, a narrow column of glanceables on the right. */
.floor-know { gap: 10px; }
.know-group { display: flex; flex-direction: column; }
.know-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 10px 0 4px; }
.know-group.diet .know-label { color: var(--problem); }
.know-row { display: grid; grid-template-columns: 52px 64px 28px minmax(0, 1fr) 14px; gap: 10px; align-items: baseline; width: 100%; padding: 10px 2px; border: 0; border-top: 1px solid var(--soft); background: none; text-align: left; cursor: pointer; font-size: 15px; }
.know-row.past { opacity: .45; }
.know-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.know-why { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.know-group.diet .know-why { color: var(--problem); font-weight: 600; white-space: normal; }
.chev { color: var(--muted); }
.mini-row { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--soft); background: none; text-align: left; cursor: pointer; font-size: 15px; }
.mini-row:first-of-type { border-top: 0; }
.mini-row .grow { display: flex; flex-direction: column; gap: 2px; }
.mini-row .allergy { font-weight: 500; }
.talk-line { padding-top: 6px; border-top: 1px solid var(--soft); }
.new-button { flex-direction: row; align-items: center; gap: 10px; text-align: left; cursor: pointer; width: 100%; font: inherit; }
.new-button .grow { display: flex; flex-direction: column; gap: 2px; }
.gelato-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 15px; }
.gelato-mini .v { color: var(--muted); font-size: 13px; }
.btn.due { border-color: var(--caution-mark); color: var(--caution); }
@media (min-width: 1001px) { .floor-board { grid-template-columns: minmax(0, 1fr) 320px; } }
.new-card h3 { margin: 0; }
.new-card ul { margin: 0; padding-left: 18px; }
.new-photo { width: 100%; max-height: 220px; object-fit: cover; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .quiz-options { grid-template-columns: 1fr; } }
.quiz-option { min-height: 64px; padding: 10px 14px; border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 16px; text-align: left; cursor: pointer; border-radius: var(--radius); }
.quiz-option.right { border-color: var(--good); background: var(--good-soft); font-weight: 600; }
.quiz-option.wrong { border-color: var(--problem); background: var(--problem-soft); }
.warn-note { background: var(--problem-soft); border-color: var(--problem-line); color: var(--problem); font-weight: 600; }
.special-form { padding: 12px; background: var(--soft); }
.special-form[hidden] { display: none; }
.allergen-edit { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.allergen-edit:empty { display: none; }
.arow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--soft); }
.arow .aname { font-weight: 600; min-width: 160px; }
.arow .allergy-chips .chip { height: 32px; padding: 0 10px; font-size: 13px; letter-spacing: .04em; }
.big-allergy { font-size: 16px; }

/* Inventory */
.inv-list .inv-last { text-align: right; }
.inv-section { gap: 4px; }
.inv-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(0, 2fr) minmax(110px, auto); gap: 6px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--soft); }
.inv-row.arrange { grid-template-columns: minmax(0, 1fr) auto; }
.inv-parts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-part { display: inline-flex; gap: 6px; align-items: center; }
.inv-part select { height: 40px; max-width: 170px; }
.inv-worth { text-align: right; }
.inv-add { padding-top: 8px; }
.inv-sec-head input[type=text] { font-size: 17px; font-weight: 700; width: 100%; height: 40px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 10px; }
@media (max-width: 800px) { .inv-row { grid-template-columns: 1fr; } .inv-worth { text-align: left; } }
.verdict { margin-top: 4px; padding: 6px 10px; font-size: 14px; font-weight: 600; border-radius: var(--radius); border-left: 4px solid; }
.verdict.ok { background: var(--good-soft); color: var(--good); }
.verdict.with { background: var(--caution-soft); color: var(--caution); }
.verdict.unsure { background: var(--caution-soft); color: var(--caution); }
.verdict.no { background: var(--problem-soft); color: var(--problem); }
.verdict-row { align-items: flex-start; }
/* The logo on a board keeps its own shape: as tall as the header line, as wide as it needs. */
/* The board's logo: its own size (it used the menu rail's class and took the rail's padding, which squashed it). */
.brand-logo.board { width: auto; height: 56px; max-width: 200px; object-fit: contain; display: block; }
.brand-word.board { color: var(--ink); border-color: var(--ink); font-size: 13px; padding: 10px 14px 10px calc(14px + .3em); }
/* Last price by vendor: a nudge when another vendor was cheaper. */
.price-nudge { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius); border-left: 4px solid var(--caution-mark); background: var(--caution-soft); color: var(--caution); display: grid; gap: 2px; }
.price-nudge.odd { border-left-color: var(--caution-mark); background: var(--caution-soft); }
/* A sheet scrolls rather than squeezing its parts (the Can't have / Can have tabs collapsed to a line). */
.sheet > * { flex-shrink: 0; }
.sheet > .seg { align-self: flex-start; }
/* A checklist reminder: read, not ticked. */
.check-row.read { cursor: default; color: var(--ink); }
.check-row.read .dot { width: 24px; flex: none; text-align: center; color: var(--muted); font-size: 20px; }
button.tag { cursor: pointer; border: 1px solid var(--line); background: var(--card); }
button.tag.on { background: var(--ink); color: #fff; border-color: var(--ink); }
/* The quiz bank. */
.quiz-row { padding: 10px 0; border-top: 1px solid var(--soft); }
.quiz-row.off .strong { color: var(--muted); text-decoration: line-through; }
.quiz-form { padding: 10px; background: var(--bg); }
.quiz-form input, .quiz-form textarea, .quiz-form select { width: 100%; }
.ok-text { color: var(--good); }
/* Today for managers: routine work as tiles, what needs fixing in the middle, the numbers down the side. */
.today-tiles { margin-bottom: 18px; }
.home-tile.due { box-shadow: inset 0 -3px 0 var(--caution-mark); }
.attention .more-link { margin: 6px 0 0 2px; }
.dash-side { display: flex; flex-direction: column; gap: 12px; }
.dash-head { align-items: center; }
.dash-title { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); text-align: left; }
.dash-title:hover { color: var(--ink); }
.dash-stats { display: flex; gap: 22px; margin-top: 4px; }
.dash-stats > div { display: flex; flex-direction: column; }
.dash-chart-wrap { width: 100%; margin-top: 6px; }
.dash-chart { width: 100%; height: auto; display: block; overflow: visible; }
.dash-chart .axis { stroke: #CFCBC2; stroke-width: 1; }
.dash-chart .tick { fill: var(--muted); font-size: 11px; font-family: inherit; }
.dash-chart .strong-tick { fill: var(--ink); font-weight: 700; font-size: 12px; }
.dash-chart .bar-now { fill: var(--ink); }
.dash-chart .bar-before { fill: #CFCBC2; }
.dash-chart .prime-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.dash-chart .prime-dot { fill: var(--ink); stroke: var(--card); stroke-width: 2; }
.dash-legend { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.dash-legend .key { width: 10px; height: 10px; display: inline-block; margin-left: 8px; }
.dash-legend .key:first-child { margin-left: 0; }
.dash-legend .key-now { background: var(--ink); }
.dash-legend .key-before { background: #CFCBC2; }
.attention .todo-body .small.muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Inventory arrange: drag items within and across sections, and the sections themselves. */
.inv-items { min-height: 8px; }
.inv-items.empty { min-height: 44px; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; }
.inv-items.empty::before { content: 'Drop items here'; font-size: 13px; color: var(--muted); }
.inv-row.arrange { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.inv-row.arrange .drag-handle { display: flex; align-items: center; justify-content: center; }
.inv-row.dragging, .inv-section.dragging { opacity: 0.9; background: var(--card); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); position: relative; z-index: 2; }
.dragging-items { user-select: none; }
.inv-sections { display: flex; flex-direction: column; gap: 14px; }
.inv-row.arrange .inv-name { flex: 1; min-width: 0; }
.tonight-part { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--soft); }
/* The wine map with its legend: regions north to south, each with its wines, a line to its dot. */
.italy-map.legend-map { max-width: 620px; }
.legend-map .legend-wine { cursor: pointer; }
.legend-map .legend-wine:hover, .legend-map .legend-wine:focus { fill: var(--ink); text-decoration: underline; outline: none; }
.legend-map .legend-head:focus text { text-decoration: underline; }
.legend-compact .italy-map { max-width: 240px; margin: 0 auto; }
.legend-list { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.legend-list li > div { display: flex; flex-direction: column; align-items: flex-start; }
/* Find a pairing on the board. */
.pair-finder { gap: 8px; }
.pair-finder .seg { display: flex; }
.pair-finder .seg button { flex: 1; }
.pair-finder input[type=search] { width: 100%; }
.pair-out { display: flex; flex-direction: column; }
.pair-row { padding: 8px 0; }
.pair-pick { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0 6px; border-bottom: 1px solid var(--soft); }
.pair-finder .tag { margin-left: 6px; font-size: 11px; }
/* Search boxes look like the app's other text boxes (the board's big search and .search keep their own). */
input[type=search]:not(.floor-search):not(.search) { height: 48px; border: 1px solid var(--line); padding: 0 14px; font-size: 16px; background: #fff; font-weight: 500; border-radius: var(--radius); box-sizing: border-box; }
/* The left menu fits the screen without scrolling: smaller buttons and icons, tighter gaps,
   and tighter still on short screens (an iPad in landscape with the browser's bars). */
@media (min-width: 701px) {
  .rail { padding: 12px 0; gap: 2px; }
  .rail button { padding: 7px 0 6px; gap: 3px; font-size: 9.5px; }
  .rail button svg { width: 19px; height: 19px; }
  .rail .logo { margin-bottom: 6px; }
}
@media (min-width: 701px) and (max-height: 760px) {
  .rail { padding: 8px 0; gap: 0; }
  .rail button { padding: 5px 0 4px; gap: 2px; }
  .rail button svg { width: 17px; height: 17px; }
  .rail .logo, .rail .logo .brand-logo, .brand-logo.rail { width: 80px; }
  .rail .me-chip { padding: 2px 0 4px; }
}
/* A wine's pairings, edited one by one. */
.pair-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--soft); }
.pair-edit .pair-name { min-width: 140px; }
.pair-edit input[type=text] { flex: 1; min-width: 180px; height: 40px; }
.pair-add select { min-width: 180px; }
.pair-add { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.pair-hits { display: flex; flex-wrap: wrap; gap: 6px; }
.pair-editor > .btn { align-self: flex-start; }

/* The dough count: dough, takeout, gluten-free, side by side; stacked on a phone. */
.dough-widget { gap: 10px; }
.dough-head { align-items: center; gap: 10px; flex-wrap: wrap; }
.dough-head h2 { margin: 0; font-size: 18px; }
.dough-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dough-tile { background: var(--soft); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; border: 2px solid transparent; }
.dough-label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.dough-big { font-size: 44px; font-weight: 800; line-height: 1.05; }
.dough-under { font-size: 13px; color: var(--muted); }
.dough-tile.unset .dough-big { color: var(--muted); }
.dough-tile.low { background: var(--caution-soft); border-color: var(--caution-line); }
.dough-tile.low .dough-big { color: var(--caution); }
.dough-tile.watch { background: var(--caution-soft); border-color: var(--caution-line); }
.dough-tile.watch .dough-big, .dough-tile.watch .dough-pace { color: var(--caution); }
.dough-tile.red { background: var(--problem-soft); border-color: var(--problem-line); }
.dough-tile.red .dough-big, .dough-tile.red .dough-pace { color: var(--problem); }
.dough-tile.out { background: var(--problem-soft); border-color: var(--problem-line); }
.dough-tile.out .dough-big { color: var(--problem); }
.dough-alert { font-size: 13px; font-weight: 700; color: var(--problem); }
.dough-steps { margin-top: 6px; flex-wrap: wrap; gap: 6px; }
.dough-steps .btn { min-width: 48px; }
.dough-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.dough-field input { width: 140px; font-size: 22px; }
.dough-total { margin-top: -4px; }
@media (max-width: 700px) { .dough-tiles { grid-template-columns: 1fr; } .dough-big { font-size: 36px; } }
/* Dough & takeout presets: seven days and the row names fit the card without scrolling. */
.takeout-grid th, .takeout-grid td { padding: 4px 3px; }
.takeout-grid input.amount { width: 60px; padding: 0 4px; font-size: 15px; }
.takeout-grid tbody th { white-space: normal; max-width: 92px; line-height: 1.2; }
/* Takeout first and biggest: it's the number the kitchen steers. The whole dough count beside it shows the split. */
.dough-tiles { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.dough-tile.main .dough-big { font-size: 56px; }
.dough-split { display: flex; gap: 14px; font-size: 14px; }
.dough-split b { font-size: 18px; margin-left: 2px; }
.btn.stop-btn { border-color: var(--ink); color: var(--ink); }
@media (max-width: 700px) { .dough-tiles { grid-template-columns: 1fr; } .dough-tile.main .dough-big { font-size: 44px; } }
.dough-banner { background: var(--problem); color: #fff; font-weight: 700; font-size: 17px; border-radius: 10px; padding: 10px 14px; }
.dough-banner.watch { background: var(--caution-soft); color: var(--caution); border: 2px solid var(--caution-line); }

/* The daily report: dine-in, to go and online side by side; the menu by category, folding open to its items. */
.way-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.way-tile { background: var(--soft); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.way-big { font-size: 28px; font-weight: 800; }
.day-cat { border-top: 1px solid var(--soft); }
.day-cat > summary { display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; }
.day-cat > summary::-webkit-details-marker { display: none; }
.day-cat > summary::before { content: '›'; color: var(--muted); transition: transform .15s; display: inline-block; width: 10px; }
.day-cat[open] > summary::before { transform: rotate(90deg); }
.day-items { padding: 0 0 10px 22px; }
.day-item { display: grid; grid-template-columns: minmax(0, 1fr) 56px 150px 90px; gap: 10px; padding: 4px 0; font-size: 14px; border-top: 1px dashed var(--soft); }
.day-item.head { border-top: none; }
.day-item .num { text-align: right; }
@media (max-width: 700px) { .way-tiles { grid-template-columns: 1fr; } .day-item { grid-template-columns: minmax(0, 1fr) 40px 70px; } .day-item > :nth-child(3) { display: none; } }
@media print { .day-cat:not([open]) > .day-items { display: block; } }

/* Boards built from widgets: three columns on an iPad, a wide widget takes two; two columns, then one, on narrower screens. */
.floor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 14px; align-items: start; }
.floor-grid > .widget { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.floor-grid > .widget.wide { grid-column: span 2; }
.floor-grid > .widget > .card { margin: 0; }
@media (max-width: 1000px) { .floor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .floor-grid { grid-template-columns: 1fr; } .floor-grid > .widget.wide { grid-column: auto; } }
/* A small widget too narrow for three dough tiles stacks them. */
.widget.small .dough-tiles { grid-template-columns: 1fr; }
/* Sized by the space it's given, not the screen: in a side column (the Live page), takeout across
   the top with its buttons on one line, dough and gluten-free side by side under it. */
.dough-widget { container-type: inline-size; }
@container (max-width: 640px) {
  .dough-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dough-tile.main { grid-column: 1 / -1; }
  .dough-tile.main .dough-big { font-size: 48px; }
  .dough-big { font-size: 34px; }
  .dough-split { flex-wrap: wrap; gap: 2px 12px; }
  .dough-split span { white-space: nowrap; }
  .dough-label { letter-spacing: .02em; }
  .dough-steps .stop-btn { margin-left: auto; }
}
@container (max-width: 360px) {
  .dough-tiles { grid-template-columns: 1fr; }
  .dough-steps .stop-btn { flex-basis: 100%; margin-left: 0; }
}
/* Adjust: the night's number, what's sold, what's left. */
.adjust-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; margin: 6px 0 2px; }
.adjust-sold { display: grid; gap: 4px; font-size: 14px; font-weight: 600; padding-bottom: 8px; }
.adjust-sold b { font-size: 22px; }
.adjust-left { display: grid; gap: 4px; }
.adjust-left-label { font-size: 14px; font-weight: 600; }
.adjust-grid .dough-field input { width: 120px; }
.adjust-note { color: var(--caution); font-weight: 600; min-height: 1em; }
/* Online orders: the state in big letters, big buttons. */
.online-state { border-radius: 12px; padding: 12px 14px; background: var(--soft); }
.online-state.on { background: var(--good-soft); color: var(--good); }
.online-state.paused { background: var(--caution-soft); color: var(--caution); }
.online-state.off { background: var(--problem-soft); color: var(--problem); }
.online-big { font-size: 26px; font-weight: 800; }
.online-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.big-btn { height: 56px; font-size: 16px; }
.online-actions .big-btn.dark, .online-actions .stop-btn { grid-column: span 2; }
.sold-widget .dough-big { font-size: 52px; }
/* The board editor. */
.wedit-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--soft); flex-wrap: wrap; }
.wedit-row .grow { min-width: 160px; }
.ipad-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--soft); }
.ipad-row select { width: 100%; }
.online-actions .big-btn { width: 100%; min-width: 0; padding: 0 8px; white-space: normal; line-height: 1.15; }
.wedit-row .grow { flex: 1 1 100%; }
.inbox-row { display: flex; flex-direction: column; align-items: stretch !important; gap: 2px; }
section[aria-label="Email inbox"] .list.compact > div { flex-wrap: wrap; }
section[aria-label="Email inbox"] .grow { min-width: 0; overflow-wrap: anywhere; }
section[aria-label="Email inbox"] input[type=text] { width: 100%; }

/* Capture an invoice. A computer with a mouse: a button in Invoices & orders' headers. A phone or an iPad (any
   touch screen, any width): a round chip in the bottom-right corner on every screen, and no header button. */
.capture-bar { margin: 0; }
.capture-bar .error:empty { display: none; }
.capture-bar .error { max-width: 240px; }
.capture-btn { display: inline-flex; align-items: center; gap: 10px; --lens: #000; }
.capture-btn:not(.dark) { --lens: #fff; }
.capture-btn .cam-icon { width: 20px; height: 20px; }
.capture-corner { display: none; }
.phone-only { display: none; }
@media (max-width: 700px) {
  .phone-only { display: inline-flex; align-items: center; justify-content: center; }
  /* Where Logout was (Log out is in Settings on a phone). */
  .rail .me { display: none; }
  .settings-logout { align-self: flex-start; flex: none; }
}
@media (max-width: 700px), (pointer: coarse) {
  .capture-bar { display: none; }
  .capture-corner { display: block; position: fixed; right: 12px; bottom: 12px; z-index: 60; }
  .capture-corner .error:empty { display: none; }
  .capture-corner .error { position: absolute; right: 0; bottom: calc(100% + 6px); width: max-content; max-width: 70vw; background: var(--card); padding: 6px 8px; }
  .rail .cam-chip { display: flex; flex-direction: row; align-items: center; gap: 0; width: auto; padding: 4px; border: 0; border-radius: 999px; background: #000; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; font: inherit; }
  .cam-chip .me-dot { color: #000; }
  .cam-chip .me-dot .cam-icon { width: 20px; height: 20px; }
  .cam-chip .me-out { border: 0; padding: 0 8px 0 6px; margin: 0; width: auto; }
  .rail .cam-chip.busy::after { display: none; }
  .cam-chip.busy .me-dot { opacity: .5; }
}

/* Invoice check: every tick box the same size, and the vendor, date and number on one line. */
.scan-read > input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 2px 0 0; }
.inv-head { align-items: flex-start; }
.inv-head > input, .inv-head > div > input { height: 48px; box-sizing: border-box; }

/* Checking an invoice: the invoice itself beside the lines, as large as the column allows, in view while scrolling. */
@media (min-width: 1100px) { .page.wide-side { grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr); } }
.scan-preview { gap: 8px; }
.scan-preview img { width: 100%; display: block; border: 1px solid var(--line); border-radius: var(--radius); }
.scan-frame { width: 100%; height: calc(100vh - 170px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
@media (min-width: 1001px) { .page.wide-side.sticky-side > .page-side .scan-preview { max-height: calc(100vh - 110px); overflow: auto; } }

/* A photo the way up it goes (photoFrame): as wide as its column; turned on its side, its new shape. A tap opens it. */
.photo-wrap { position: relative; }
.photo-rotate { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card, #fff); color: var(--ink, #1C1F22); font-size: 20px; line-height: 1; padding: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.photo-rotate:disabled { opacity: .5; }
.photo-frame { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--soft); cursor: zoom-in; }
.photo-frame img, .scan-preview .photo-frame img, .scan-pages .photo-frame img { display: block; width: 100%; border: 0; border-radius: 0; }
.photo-frame.side img { position: absolute; top: 50%; left: 50%; max-width: none; }
/* Full screen (photoViewer): fitted, zoomed and moved by hand; the bar on top. */
.photo-viewer { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--rail); }
.pv-bar { display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
.pv-bar .grow { flex: 1; min-width: 0; }
.pv-btn { min-width: 44px; padding: 0 14px; }
.pv-count { color: #fff; font-variant-numeric: tabular-nums; font-size: 14px; }
.pv-err { color: var(--problem-line); font-size: 13px; font-weight: 600; }
.pv-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; }
.pv-stage:active { cursor: grabbing; }
.pv-stage img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
body:has(.photo-viewer) { overflow: hidden; }

/* Invoice check, tighter: smaller type and inputs so more lines fit beside the invoice. */
.scan-line { padding-top: 8px; padding-bottom: 8px; gap: 10px; font-size: 13px; }
.scan-line .scan-read b { font-size: 14px; line-height: 1.25; }
.scan-line .scan-read .small { font-size: 12px; }
.scan-line .scan-conf { font-size: 10.5px; margin-bottom: 2px; }
.scan-line .scan-ours { display: grid; gap: 4px; align-content: start; }
.scan-line .scan-ours input[type=text], .scan-line .scan-ours input.amount { height: 34px; font-size: 14px; padding: 0 10px; }
.scan-line .scan-ours input.amount { width: 78px; }
.scan-line .scan-ours .row.tight { gap: 6px; }
.scan-line .scan-ours .small, .scan-line .scan-alts { font-size: 12px; }
.scan-line .scan-alts { line-height: 1.5; }
.scan-line .scan-suggest { margin: 2px 0; gap: 6px; }
.scan-line .scan-suggest .btn { height: 30px; font-size: 11px; padding: 0 10px; }
.scan-line .scan-flags .tag { font-size: 11px; padding: 1px 6px; }
.scan-line .scan-read > input[type="checkbox"] { width: 18px; height: 18px; }
.scan-line .new-ing { gap: 6px; }
.scan-line .new-ing select { height: 34px; font-size: 13px; }
.scan-line .scan-alts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.scan-line .scan-alts button.link { padding: 0; min-height: 0; height: auto; font-size: 12px; line-height: 1.4; }
/* The vendor, date and number on one line, sized to fit beside the invoice. */
.scan-head { display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr); gap: 8px; align-items: start; margin: 4px 0 8px; }
.scan-head input { height: 40px !important; font-size: 15px; min-width: 0 !important; width: 100%; box-sizing: border-box; }
.scan-head input[type=date] { width: auto; }
.scan-head .small { margin-top: 2px; }

/* Sections inside a menu button (Recipes | Ingredients, Orders | Invoices). */
.count-badge, .rail-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--caution-mark); color: #000; font-size: 11px; font-weight: 700; letter-spacing: 0; line-height: 1; }
.rail button { position: relative; }
.rail .rail-badge { position: absolute; top: 4px; right: 14px; }
.rail .rail-badge[hidden] { display: none; }
.rail-label { display: block; text-align: center; line-height: 1.25; }
/* Ingredients list */
.ing-tools { gap: 10px; margin-bottom: 8px; }
.ing-tools .search-big { max-width: 320px; }
.core-ing-new { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line, #ddd); border-radius: 6px; }
.core-ing-new input { min-width: 220px; }
.ing-list { display: grid; }
.ing-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr) 110px; gap: 12px; align-items: baseline; padding: 9px 4px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ing-row:hover { background: rgba(0,0,0,.03); }
.ing-row.ing-head { cursor: default; border-top: 0; font-size: 12px; }
.ing-row.ing-head:hover { background: none; }
.ing-row .num { text-align: right; }
@media (max-width: 700px) { .ing-row { grid-template-columns: minmax(0, 1fr) auto; } .ing-row > :nth-child(3) { grid-column: 1 / -1; font-size: 12px; } .ing-row.ing-head > :nth-child(3), .ing-row.ing-head > :nth-child(4) { display: none; } .ing-row > .num { grid-row: 1; grid-column: 2; } .ing-row > :nth-child(2) { display: none; } }

/* The colour label and the tags sit under the printed line, on the left. */
.scan-line .scan-read .scan-conf { margin: 4px 0 2px; }
.scan-line .scan-read .scan-flags { margin-top: 2px; }

/* In a header the button sits with the others, the same height. */
.head-tools > .capture-bar { margin: 0; align-self: center; }

/* Vendors list and a vendor's items */
.ven-list, .ven-items { display: grid; }
.ven-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 110px 110px; gap: 12px; align-items: baseline; padding: 10px 4px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ven-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 110px 110px; gap: 12px; align-items: baseline; padding: 8px 4px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ven-row:hover, .ven-item:hover { background: rgba(0,0,0,.03); }
.ven-row.ven-head, .ven-item.ven-head { cursor: default; border-top: 0; font-size: 12px; }
.ven-row.ven-head:hover, .ven-item.ven-head:hover { background: none; }
.ven-row .num, .ven-item .num { text-align: right; }
.ven-row .tag { margin-left: 4px; }
@media (max-width: 700px) {
  .ven-row { grid-template-columns: minmax(0, 1fr) auto; } .ven-row > :nth-child(2), .ven-row > :nth-child(4) { grid-column: 1 / -1; } .ven-row > :nth-child(3) { display: none; } .ven-row > .num { grid-row: 1; grid-column: 2; }
  .ven-row.ven-head > :not(:first-child):not(.num) { display: none; }
  .ven-item { grid-template-columns: minmax(0, 1fr) auto; } .ven-item > :nth-child(3) { display: none; } .ven-item > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 12px; } .ven-item > .num { grid-row: 1; grid-column: 2; }
}

/* Today: the tiles fill the middle column and wrap; the side column starts at the top. */
.page-main > .today-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 4px; }
@media (max-width: 560px) { .page-main > .today-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dough in trays: the balls under each day in Settings; trays + loose balls on the board's Adjust. */
.takeout-grid .balls-row td { text-align: center; padding-top: 0; }
.dough-trays { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.dough-trays .plus { font-size: 22px; padding-bottom: 10px; }
.dough-trays .dough-field input { width: 110px; }
.dough-total { display: grid; padding-bottom: 8px; font-size: 20px; }

/* A board: wide widgets down the left, small ones stacked down the right. */
.floor-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.floor-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.floor-col > .widget { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.floor-col > .widget > .card { margin: 0; }
.floor-grid.all-wide { grid-template-columns: 1fr; }
.floor-grid.all-wide > .widget.wide { grid-column: auto; }
/* Service → Settings → Boards */
.board-card { gap: 10px; }
.bmap { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.bmap-col { display: grid; gap: 6px; align-content: start; background: rgba(0,0,0,.03); border-radius: var(--radius); padding: 10px; }
.bmap-w { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; }

/* Online orders widget: how long an order takes to make. */
.online-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.online-lead-n { font-size: 22px; }
.online-lead .lead-btn { min-width: 52px; height: 44px; font-size: 16px; }
.online-lead .small:last-child { flex-basis: 100%; }

/* An iPad with a manager signed in: the Invoice button floats bottom-right at any width (Logout moves up). */
.capture-corner.always { display: block; position: fixed; right: 16px; bottom: 16px; z-index: 60; }
.capture-corner.always .cam-chip { display: flex; flex-direction: row; align-items: center; gap: 0; width: auto; padding: 4px; border: 0; border-radius: 999px; background: #000; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; font: inherit; }
.capture-corner.always .cam-chip .me-dot { color: #000; width: 40px; height: 40px; }
.capture-corner.always .cam-chip .me-dot .cam-icon { width: 22px; height: 22px; }
.capture-corner.always .cam-chip .me-out { border: 0; padding: 0 12px 0 8px; margin: 0; width: auto; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.capture-corner.always .cam-chip.busy::after { display: none; }
.capture-corner.always .error:empty { display: none; }

/* Online orders widget: the three pauses on one line, smaller. */
.online-actions .pause-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.online-actions .pause-row .pause-btn { flex: 1; height: 40px; font-size: 13px; padding: 0 6px; }

/* Came in: 2 cases of 250 clamshells. */
.came-in .row { gap: 6px; }
.came-in .pack-name { width: 6em; }
.came-in select { max-width: 13em; }
.came-base { flex: 1; min-width: 12em; }
.scan-newunit { margin-top: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; }
.scan-newunit .row { gap: 6px; }
/* Inventory: off the count for now. */
.inv-off { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.inv-name .inv-off { margin-top: 6px; }
.inv-off .btn.small-btn { color: var(--muted); }
.inv-name .inv-off .btn.small-btn { height: 30px; padding: 0 10px; font-size: 10.5px; }
@media (max-width: 640px) { .inv-row.arrange { flex-wrap: wrap; } .inv-row.arrange .inv-name { flex-basis: calc(100% - 40px); } .inv-row.arrange > .inv-off, .inv-row.arrange > select { margin-left: 32px; } .inv-row.arrange > .inv-off { flex-wrap: nowrap; } .inv-row.arrange > .inv-off .btn.small-btn { height: 32px; padding: 0 10px; font-size: 10.5px; } }
.inv-paused .list > div { gap: 8px; }
.scan-line .scan-ours .came-in input.amount { width: 58px; }
.scan-line .scan-ours .came-in input.pack-name { width: 4.8em; height: 34px; font-size: 14px; padding: 0 8px; }
.scan-line .scan-ours .came-in select { max-width: 9.5em; height: 34px; font-size: 14px; }

/* Service, live. */
.live-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 10px; }
.live-figures .big { font-size: 30px; line-height: 1.1; }
.live-check-group { margin-top: 10px; }
.live-check { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.live-check .tick { width: 1.2em; color: var(--muted); }
.live-check.done .tick { color: var(--good); }
.live-check:not(.done) .grow { font-weight: 600; }
.live-ready > div { padding: 3px 0; font-size: 14px; }
@media (max-width: 700px) { .live-figures { grid-template-columns: 1fr 1fr; } }
.live-sold { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.live-sold > .card { margin: 0; }
@media (max-width: 700px) { .live-sold { grid-template-columns: 1fr; } }
.live-ready-bar { padding: 0; margin-bottom: -4px; } /* the page's 18px less 4: the 14px between the boxes below */
.live-ready-bar .live-ready-head { display: flex; gap: 14px; align-items: center; width: 100%; padding: 14px 20px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.live-ready-bar.missing .live-ready-head { background: var(--caution-soft); }
.live-ready-body { padding: 0 20px 16px; border-top: 1px solid var(--line); }
.live-ready-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 14px 0; }
.live-ready-cols .small { padding: 2px 0; }
@media (max-width: 700px) { .live-ready-cols { grid-template-columns: 1fr; } }
.live-ready-bar .live-ready-head .grow { flex: 1; }
.live-ready-cols.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.live-ready-cols .row.tight { gap: 6px; align-items: baseline; }
.live-ready-bar.missing .live-ready-head { background: var(--caution-soft); }
@media (max-width: 900px) { .live-ready-cols.four { grid-template-columns: 1fr 1fr; } }

/* The count's number and what it means: under each other on a board, side by side in a strip. */
.dough-main, .dough-info { display: flex; flex-direction: column; gap: 4px; }
.dough-main { flex: 1; }
/* The strip (the Live page, under the sales): three counts on one short row. */
.dough-widget.strip { gap: 8px; }
.dough-widget.strip .dough-tiles { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
.dough-widget.strip .dough-tile { padding: 10px 14px; gap: 6px; }
.dough-widget.strip .dough-main { flex-direction: row; align-items: center; gap: 14px; }
.dough-widget.strip .dough-big { font-size: 38px; min-width: 1.2em; }
.dough-widget.strip .dough-tile.main .dough-big { font-size: 46px; }
.dough-widget.strip .dough-info { gap: 2px; min-width: 0; }
.dough-widget.strip .dough-steps { margin-top: 0; gap: 6px; }
.dough-widget.strip .dough-steps .btn { height: 30px; min-width: 32px; padding: 0 7px; font-size: 11px; letter-spacing: .06em; }
.dough-widget.strip .dough-steps { gap: 5px; flex-wrap: wrap; }
/* Stop takeout on the same row, right after Adjust. */
.dough-widget.strip .dough-steps .stop-btn { margin-left: 0; }
/* The number never gives up its room to the words beside it (165 over "20 trays + 5"). */
.dough-widget.strip .dough-big { white-space: nowrap; padding-right: 4px; flex: 0 0 auto; }
.dough-widget.strip .dough-info { flex: 1 1 0; }
@container (max-width: 640px) {
  .dough-widget.strip .dough-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* On a phone: one above the other, the number beside its words and the buttons below. */
@container (max-width: 520px) {
  .dough-widget.strip .dough-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .dough-widget.strip .dough-tiles { grid-template-columns: 1fr; }
}
.dough-widget.strip .dough-split { gap: 12px; }
.dough-widget.strip .dough-split b { font-size: 15px; }
/* The online orders box beside it, tighter on the Live page so both stay on the first screen. */
.floor-cols.live .online-state { padding: 8px 12px; }
.floor-cols.live .online-big { font-size: 22px; }
.floor-cols.live .online-lead { margin: 8px 0 2px; }
.floor-cols.live .online-lead .lead-btn { height: 38px; }
.floor-cols.live .online-actions .btn.big-btn { height: 42px; font-size: 13px; }

/* A board's dough alerts, across the top. */
.dough-alerts { display: grid; gap: 8px; margin-bottom: 14px; }
.dough-alerts:empty { display: none; }

/* Tonight's dough and takeout not confirmed yet: the top bar is red until they are. */
.live-ready-bar.unconfirmed { border-color: var(--problem); }
.live-ready-bar.unconfirmed .live-ready-head { background: var(--problem-soft); }
.live-ready-bar .confirm-flag { color: var(--problem); }
.live-confirm { display: grid; gap: 4px; align-content: start; }
.live-confirm > .btn { justify-self: start; margin-top: 6px; }
.live-ready-bar.unconfirmed .live-confirm { background: var(--problem-soft); margin: -6px; padding: 6px; }

/* Pickup windows: the evening's total. */
.wtotal { padding: 10px 0 2px; border-top: 1px solid var(--line); margin-top: 6px; }
.wgrid tfoot tr.wgrid-total th, .wgrid tfoot tr.wgrid-total td { background: none; color: var(--ink); border-top: 2px solid var(--ink); padding-top: 8px; text-align: center; font-size: 15px; }
.wgrid tfoot tr.wgrid-total th { text-align: right; padding-right: 10px; }

/* An error line with nothing to say takes no room (the gap under the last thing in a card). */
.error:empty { display: none; }

/* Vendors at a glance */
.dash-chart .bar-hit { fill: transparent; }
.dash-chart .bar-hit:hover { fill: rgba(0, 0, 0, .04); }
.ven-days .ven-day { width: 3em; flex: none; }
.ven-move { display: flex; flex-direction: column; gap: 2px; width: 100%; background: none; border: 0; padding: 6px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-bottom: 1px solid var(--line); }
.ven-move:hover .ven-move-name { text-decoration: underline; }
.ven-move-name { font-weight: 600; }

.key-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.key-row:first-of-type { border-top: 0; }
/* v0.2 Settings → Register: label and value lines, the Toast form's field hints. */
.reg-lines > div { align-items: baseline; flex-wrap: wrap; }
.reg-label { flex: 0 0 120px; font-size: 13px; }
.reg-lines > .reg-perms { display: grid; gap: 2px; padding: 0 0 8px 128px; border-top: 0; }
.reg-lines > .reg-perms[hidden] { display: none; }
.reg-form { display: grid; gap: 12px; margin: 8px 0; max-width: 520px; }
.reg-form .reg-hint { font-weight: 400; }
@media (max-width: 600px) { .reg-label { flex-basis: 100%; } .reg-lines > .reg-perms { padding-left: 0; } }

/* Gelato pans: in the back, into the cabinet */
.gelato-widget .gelato-stock > div { align-items: baseline; gap: 10px; }
.gelato-recent { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.gelato-entry { display: flex; flex-direction: column; gap: 0; }
.gelato-recent .gelato-entry + .gelato-entry { margin-top: 4px; }
.flavor-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.flavor-picks .btn { min-height: 44px; }
.gelato-amounts { gap: 24px; margin: 8px 0; }
.wide-btn { width: 100%; min-height: 48px; margin: 6px 0; }

/* The new-ingredient form inside the search popup: everything fits its width, no scroll bars. */
.search-pop { overflow-x: hidden; }
.search-pop:has(.new-ing) { max-height: none; overflow: visible; }
.new-ing .row { flex-wrap: wrap; }
.new-ing input, .new-ing select { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Possible duplicates: two names side by side, keep one or keep both */
.dup-banner { margin-bottom: 12px; }
.dup-banner-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.dup-banner-text { flex: 1 1 320px; min-width: 0; }
.dup-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dup-side { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.dup-side.kept { border-color: var(--ink); }
.dup-side .btn { align-self: flex-start; margin-top: 6px; }
.dup-foot { margin-top: 10px; gap: 10px; align-items: center; }
.dup-names { display: flex; flex-direction: column; gap: 8px; }
.dup-name { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.dup-name.kept { border-color: var(--ink); }
.dup-name.off { opacity: .6; }
.dup-name-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dup-name-body > .row .tag { margin-left: auto; }
.dup-tick, .dup-keep { display: flex; align-items: center; gap: 6px; padding-top: 2px; cursor: pointer; white-space: nowrap; flex: none; }
.dup-keep { width: 72px; }
.dup-tick input, .dup-keep input { width: 20px; height: 20px; margin: 0; }
.list.compact > .dup-recent { display: block; }
.dup-keepas { margin-top: 10px; gap: 10px; align-items: center; }
.dup-keepas input { min-width: 0; flex: 1 1 240px; }
@media (max-width: 700px) { .dup-sides { grid-template-columns: 1fr; } }

/* Service: four tabs; each post's card opens to its name, kind and tables */
.post-edit { margin-top: 8px; }
.post-edit summary { cursor: pointer; color: var(--muted); }
.post-edit[open] summary { margin-bottom: 8px; }
.page-main > .online-pause { margin-bottom: 0; }
/* Before service, one row per thing: mark · what · tonight's value · its button. Tinted while still to do. */
.live-ready-body.ready-rows { padding: 0 0 6px; }
.ready-row { display: grid; grid-template-columns: 18px minmax(150px, 200px) minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 8px 20px; border-top: 1px solid var(--soft); font-size: 14px; }
.ready-row:first-child { border-top: 0; }
.ready-row.need { background: var(--problem-soft); border-top-color: var(--problem-line); }
.ready-mark { color: var(--good); font-size: 13px; }
.ready-row.need .ready-mark { color: var(--problem); }
.ready-label { font-weight: 600; }
.ready-value { min-width: 0; }
.ready-value.muted { color: var(--muted); }
.ready-act { justify-self: end; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ready-act .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .ready-row { grid-template-columns: 16px minmax(0, 1fr) auto; padding: 8px 14px; }
  .ready-mark { grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
  .ready-label { grid-column: 2; }
  .ready-value { grid-column: 2; grid-row: 2; }
  .ready-act { grid-column: 3; grid-row: 1 / span 2; }
  .ready-row .ready-label:empty { display: none; }
  .ready-row .ready-label:empty + .ready-value { grid-row: 1; }
}
.live-ready-bar { gap: 0; }
@media (max-width: 640px) {
  .ready-row.last .ready-value { grid-column: 2 / span 2; grid-row: 1; }
  .ready-row.last .ready-act { grid-column: 2 / span 2; grid-row: 2; justify-self: start; }
}

/* The count: one line per item. Name (and one small line), how many, worth, Counting · Not now · Never. */
.inv-row.count { grid-template-columns: 18px minmax(140px, 1fr) 230px 130px 32px; padding: 6px 0; gap: 4px 12px; }
.inv-row.count > .drag-handle { color: #B9B6AE; cursor: grab; touch-action: none; font-size: 16px; align-self: center; }
.inv-pencil { border: 0; background: none; font-size: 18px; color: var(--muted); cursor: pointer; padding: 4px 8px; }
.inv-sec-edit { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin: 6px 0; background: var(--soft); border-radius: 8px; }
.inv-more { width: 32px; height: 32px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; transition: transform .15s; }
.inv-more[aria-expanded="true"] { transform: rotate(90deg); color: var(--ink); }
.inv-row.count.recount { background: var(--caution-soft); box-shadow: inset 3px 0 0 var(--caution-mark); }
.inv-count-in.counted { border-color: var(--good); background: var(--good-soft); font-weight: 700; }
.inv-alert { color: var(--caution); font-weight: 600; }
.inv-facts { margin: 8px 0; color: var(--muted); }
.inv-toggle { height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); font-size: 12px; font-weight: 600; letter-spacing: .02em; cursor: pointer; }
.inv-toggle.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.inv-row.count .inv-switch { white-space: nowrap; }
.inv-row.count .inv-name .inv-worth { text-align: left; font-size: 12px; }
.inv-nums { display: flex; align-items: center; gap: 14px; min-width: 100px; }
@media (max-width: 1300px) { .inv-row.count { grid-template-columns: 18px minmax(130px, 1fr) 220px 112px 32px; } }

.inv-row.count .inv-par.unset { visibility: hidden; } .inv-row.count:hover .inv-par.unset, .inv-row.count .inv-par.unset:focus, .inv-row.count .inv-par.unset[aria-expanded="true"] { visibility: visible; }

.inv-row.count > .inv-par-panel { grid-column: 1 / -1; }
.inv-row.count .inv-name .small { line-height: 1.3; }
.inv-row.count .inv-parts { flex-wrap: nowrap; }
.inv-row.count .inv-part input { height: 36px; width: 72px; }
.inv-row.count .inv-part select { height: 36px; }
.inv-row.count .inv-plus { height: 36px; width: 36px; padding: 0; font-size: 18px; }
.inv-row.count .inv-worth { font-size: 13px; }
.inv-switch button { height: 32px; padding: 0 10px; font-size: 11.5px; letter-spacing: .02em; }
.inv-switch button.on.counting { background: var(--ink); color: #fff; }
.inv-switch button.on.paused, .inv-switch button.on.never { background: var(--ink); color: #fff; }
.inv-row.count.off .inv-name, .inv-row.count.off .inv-parts, .inv-row.count.off .inv-worth { opacity: .4; }
.inv-row.count.off .inv-parts { pointer-events: none; }
/* Narrow (an iPad upright, a phone): the name with its par under it, the count box beside them, the arrow. */
@container main (max-width: 720px) {
  .inv-row.count { grid-template-columns: minmax(0, 1fr) auto 28px; gap: 2px 8px; }
  .inv-row.count > .drag-handle { display: none; }
  .inv-row.count > .inv-name { grid-column: 1; grid-row: 1; }
  .inv-row.count > .inv-parts { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .inv-row.count > .inv-more { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .inv-row.count > .inv-nums { grid-column: 1; grid-row: 2; min-width: 0; }
  .inv-row.count > .inv-par-panel { grid-column: 1 / -1; }
  .inv-row.count .inv-par { font-size: 12px; }
}
@container main (max-width: 420px) {
  .inv-switch button { padding: 0 7px; font-size: 10.5px; }
  .inv-row.count .inv-parts { flex-wrap: nowrap; }
  .inv-row.count .inv-part input { width: 58px; }
  .inv-row.count .inv-part select { max-width: 112px; }
  .inv-row.count .inv-worth { font-size: 12px; }
}
/* The count gets the whole width below a big screen, its boxes above it: one line per item on an iPad turned sideways. */
@media (max-width: 1200px) {
  .page.count-page { grid-template-columns: minmax(0, 1fr); }
  .page.count-page .page-side { order: -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; position: static; }
}
.inv-row.count .inv-plus { flex-shrink: 0; min-width: 36px; }
/* On a phone the list comes first; the totals, Finish and what to look at come after it. */
@media (max-width: 720px) { .page.count-page .page-side { order: 2; } .inv-row.count .inv-unit-unset { max-width: 112px; } }

/* A saved invoice: the header, then one line per item (ingredient · came in · cost), then the charges. */
.inv-view-head { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.inv-view-head .link.strong { font-size: 16px; padding: 0; text-align: left; }
.inv-view-lines { display: flex; flex-direction: column; }
.inv-view-line { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(90px, auto); gap: 4px 16px; align-items: start; padding: 10px 0; border-top: 1px solid var(--soft); }
.inv-view-cols { padding: 4px 0; border-top: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.inv-view-cols .num, .inv-view-price { text-align: right; }
.inv-view-ing { font-weight: 600; font-size: 15px; padding: 0; text-align: left; }
.inv-view-line.uncounted { opacity: .6; }
.inv-view-sub { padding: 14px 0 4px; }
/* Where MarginEdge's reading differed: grey, one a line, under the note. */
.inv-view-vsme { display: flex; flex-direction: column; gap: 2px; }
.inv-view-foot { border-top: 2px solid var(--ink); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ven-inv { gap: 12px; }
.ven-inv .chev { color: var(--muted); }
.clickable { cursor: pointer; }
.clickable:hover b { text-decoration: underline; }
@container main (max-width: 560px) {
  .inv-view-line { grid-template-columns: minmax(0, 1fr) auto; }
  .inv-view-came { grid-column: 1; grid-row: 2; }
  .inv-view-price { grid-column: 2; grid-row: 1 / span 2; }
  .inv-view-cols span:nth-child(2) { display: none; }
}

/* Done: the numbers confirmed, the book in. The rows go green, and the bar once both are. */
.ready-row.done { background: var(--good-soft); border-top-color: var(--good-line); }
.live-ready-bar.all-set { border-color: var(--good); }
.live-ready-bar.all-set .live-ready-head { background: var(--good-soft); }
/* Still something the night needs (the book): the same red as its row, not a different yellow. */
.live-ready-bar.missing .live-ready-head { background: var(--problem-soft); }
.live-ready-bar.all-set .live-ready-head { background: var(--good-soft); }

/* Groups: a picker, marked while it's only suggested; the sort screen's rows. */
.group-pick { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.group-sel { height: 32px; font-size: 13px; padding: 0 8px; }
.group-sel.suggested { border-style: dashed; border-color: var(--caution-mark); }
.group-ok { height: 32px; padding: 0 10px; font-size: 11px; }
.group-sub { height: 32px; width: 160px; font-size: 13px; }
.group-line { margin-top: -4px; }
.core-group-line { margin-top: 4px; }
.scan-group { display: flex; gap: 8px; align-items: center; margin: 6px 0 2px; }
.group-rows { display: flex; flex-direction: column; }
.group-row { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--soft); }
.group-row select { height: 34px; max-width: 200px; }
.ing-groups { flex-wrap: wrap; }
.group-row > .grow { flex: 1; min-width: 0; }
.group-pick input.group-sub, .group-pick select.group-sel { height: 32px; padding: 0 8px; font-size: 13px; }

/* What a dish goes out in: each item, how many, when (every order, dine-in, to go), its cost; then the two costs. */
.pack-rows { display: flex; flex-direction: column; }
.pack-row { display: grid; grid-template-columns: minmax(0, 1.3fr) auto auto 70px auto; gap: 6px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--soft); }
.pack-row .num { text-align: right; }
.pack-served button { height: 32px; padding: 0 10px; font-size: 11.5px; }
.pack-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--soft); }
.pack-add .grow { flex: 1 1 220px; position: relative; }
.pack-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 12px; border-top: 2px solid var(--ink); }
.pack-totals b { font-size: 20px; }
@container main (max-width: 640px) {
  .pack-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pack-row .pack-served { grid-column: 1 / -1; }
  .pack-totals { grid-template-columns: 1fr 1fr; }
}
.pack-row > .row.tight { min-width: 110px; }

.rename-in { min-width: 280px; font-size: 18px; font-weight: 600; }
/* The group on an invoice line: one short line, label, picker, ✓ OK. */
.scan-line .scan-group { flex-wrap: wrap; }
.scan-line .scan-group .group-pick { flex-wrap: nowrap; }
.scan-line .scan-group select.group-sel { width: auto; min-width: 0; height: 32px; font-size: 13px; }
.scan-line .scan-group .btn.group-ok { height: 32px; min-height: 0; padding: 0 10px; font-size: 11px; width: auto; }

.wine-photo-row { gap: 12px; align-items: center; margin-top: 8px; }
.wine-thumb { width: 56px; height: 72px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.finish-row { gap: 12px; flex-wrap: wrap; }
.finish-row.amber { box-shadow: inset 3px 0 0 var(--caution-mark); padding-left: 10px; }
.finish-row.red { box-shadow: inset 3px 0 0 var(--problem); padding-left: 10px; background: color-mix(in srgb, var(--problem) 6%, transparent); }
.finish-bar { width: 80px; height: 6px; border-radius: 3px; background: var(--soft); overflow: hidden; flex: none; }
.finish-bar > span { display: block; height: 100%; background: var(--series-1); }

.count-note { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--soft); }
.count-note:first-child { border-top: 0; }
.count-note .tag { flex: none; min-width: 112px; text-align: center; }
@media (max-width: 600px) { .count-note { flex-direction: column; gap: 4px; } .count-note .tag { min-width: 0; } }

.rrow.vintage { grid-template-columns: minmax(0, 2.4fr) 1.3fr 0.7fr 1.2fr auto; align-items: center; }
.rrow.vintage.on { background: var(--soft); }
.rrow.vintage .tag { margin-left: 6px; }
@media (max-width: 700px) { .rrow.vintage { grid-template-columns: 1fr auto; } .rrow.vintage > :nth-child(3), .rrow.vintage > :nth-child(4) { display: none; } }

.tonight-covers { align-items: baseline; gap: 8px; }

.home-edit { margin-top: 12px; align-items: center; gap: 6px; }

.yield-card .yield-own { margin-top: 10px; gap: 6px; }
.yield-card > .row { margin-top: 6px; }
.yield-test { display: grid; grid-template-columns: auto 5.5em auto; gap: 6px 8px; align-items: center; justify-content: start; margin-top: 6px; }
.yield-follow { display: flex; align-items: center; gap: 8px; justify-content: flex-start; text-align: left; font-weight: 400; }
.yield-follow input { width: 18px; height: 18px; margin: 0; flex: none; }

.rail-version { color: rgba(255, 255, 255, .55); font-size: 10px; letter-spacing: .06em; font-family: ui-monospace, Menlo, monospace; margin: -10px 0 6px; min-height: 12px; text-align: center; }
@media (max-width: 700px) { .rail-version { display: none; } }
.yield-follow { width: 100%; align-self: stretch; flex-direction: row !important; }
.yield-follow > span { text-align: left; }

.alert-tools { display: inline-flex; gap: 4px; }
.btn.alert-switch.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.alert-gear { min-width: 0; padding: 0 12px; }

/* Possible duplicates: a card being answered dims; answered, it folds to one line until the list redraws. */
.dup-group.dup-saving { opacity: .55; }
.dup-group.dup-answered { display: flex; align-items: center; justify-content: center; text-align: center; }
.dup-status { margin-top: 8px; }

/* Printed menu: one letter page, as it prints. Columns spread their dishes to fill the page (--pm-gap),
   the add-ons box sits at the bottom of its column, and a column that's too long comes down a little (--pm-scale). */
.pm-preview { min-width: 0; }
.pm-scaler { transform-origin: top left; }
.pm-scaler .pm-sheet { box-shadow: 0 2px 14px rgba(0, 0, 0, .14); }
.pm-sheet { width: 8.5in; height: 11in; box-sizing: border-box; padding: 0.42in 0.5in 0.32in; background: #fff; color: #111; font-family: 'Jost', 'Futura', 'Century Gothic', sans-serif; display: flex; flex-direction: column; overflow: hidden; letter-spacing: .005em; }
.pm-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.12in; }
.pm-logo { height: 0.95in; filter: invert(1); }
.pm-legend { font-size: 9.5pt; line-height: 1.4; }
.pm-legend > div { display: flex; justify-content: flex-end; align-items: center; gap: 5px; }
.pm-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.32in; }
.pm-cols.n1 { grid-template-columns: 1fr; } .pm-cols.n3 { grid-template-columns: 1fr 1fr 1fr; }
.pm-col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-bottom: 3px; font-size: calc(10.2pt * var(--pm-scale, 1)); } /* the padding keeps the add-ons box’s bottom border inside the column */
.pm-sec { display: flex; flex-direction: column; }
.pm-sec + .pm-sec { margin-top: calc(var(--pm-gap, 8px) * 1.3); }
.pm-heading { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.45em; font-weight: 500; margin-bottom: 2px; }
.pm-hnote { font-size: .55em; font-weight: 400; }
.pm-title { font-size: 1.45em; font-weight: 400; line-height: 1.15; }
.pm-sub-title { font-size: 1.2em; font-weight: 600; margin: 4px 0 2px; }
.pm-sub { font-size: .98em; margin-bottom: 2px; }
.pm-item { margin-top: var(--pm-gap, 8px); break-inside: avoid; }
.pm-title + .pm-item, .pm-sub + .pm-item, .pm-sub-title + .pm-item { margin-top: calc(var(--pm-gap, 8px) * .5); }
.pm-name { display: flex; align-items: baseline; font-size: 1.14em; line-height: 1.2; }
.pm-n { flex: 0 1 auto; }
.pm-icons { display: inline-flex; gap: 3px; margin-left: 6px; align-self: center; }
.pm-ic { display: inline-flex; }
.pm-i { width: 11px; height: 11px; }
.pm-price { margin-left: auto; padding-left: 10px; white-space: nowrap; }
.pm-desc { line-height: 1.28; margin-top: 1px; }
.pm-notes { font-style: italic; }
.pm-wine .pm-name { font-size: 1em; }
.pm-add { margin-top: 2px; }
.pm-box { margin-top: auto; border: 1.2px solid #111; padding: 9px 12px 3px; line-height: 1.32; }
.pm-sec:has(+ .pm-box) { margin-bottom: 14px; }
.pm-box-t { font-weight: 600; margin-bottom: 8px; }
.pm-box p { margin: 0 0 8px; }
.pm-foot { text-align: center; font-size: 9.6pt; line-height: 1.35; margin-top: 8px; }
.pm-foot i { font-style: italic; } .pm-foot b { font-weight: 600; }
.pm-editor .pm-field { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 8px; flex-direction: row; }
.pm-editor .pm-field input { height: 36px; }
.pm-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--soft); }
.pm-row .drag-handle { min-height: 30px; }
.pm-row.dragging { background: var(--card); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); position: relative; z-index: 2; }
.pm-wine-edit { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; margin-top: 4px; }
.pm-wine-edit input { height: 34px; font-size: 13px; }
.pm-wine-edit input:last-child { grid-column: 1 / -1; }
.pm-group { display: flex; flex-wrap: wrap; gap: 4px; }
.pm-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.pm-tick { flex-direction: row !important; align-items: center; }
.pm-notes-list { margin: 4px 0 0; padding-left: 18px; }
.mswitches { gap: 14px; }
/* v0.2 Menu rows (owner, Oct 31): Sell online and Dine-in menu smaller, side by side on one line. */
.dish-sq-cell > .row.tight.wrap.mswitches { flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
.dish-sq-cell .sell-switch { font-size: 11px; gap: 4px; }
.dish-sq-cell .sell-switch .sw-long { display: none; }
.dish-sq-cell .sell-switch > span:last-child::first-letter { text-transform: uppercase; }
.dish-sq-cell .sell-switch input { width: 24px; height: 14px; border-radius: 7px; }
.dish-sq-cell .sell-switch input::after { top: 2px; left: 2px; width: 10px; height: 10px; }
.dish-sq-cell .sell-switch input:checked::after { left: 12px; }
#print-root { display: none; }
#print-root.measuring { display: block; position: absolute; left: -20000px; top: 0; }
@media print {
  @page { size: letter; margin: 0; }
  body.printing-menu > *:not(#print-root) { display: none !important; }
  body.printing-menu { background: #fff; }
  body.printing-menu #print-root { display: block; }
  #print-root .pm-sheet { page-break-after: always; break-after: page; box-shadow: none; }
  #print-root .pm-sheet:last-child { page-break-after: auto; break-after: auto; }
  .pm-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.ing-link { font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 4px; text-align: left; }
.allergen-side .big-allergy { font-size: 18px; }
.day-cat-stats { margin-right: 14px; }
@media (max-width: 640px) { .day-cat-stats .muted { display: none; } }

/* This week, on Today. */
.week-day { padding: 8px 0; border-top: 1px solid var(--soft); }
.week-day.today { border-top: 0; }
.week-event { margin-top: 4px; }
.week-event .tag { min-width: 44px; text-align: center; }
.week-add input, .week-add select { height: 38px; }
.week-cals { margin-top: 8px; }
.week-cals > summary { cursor: pointer; color: var(--muted); }
.week-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
.week-head > b { white-space: nowrap; }
.week-event .row .small.grow { flex: 1 1 auto; min-width: 0; }

/* Weather on Today: an icon for the sky, the high bold and the low beside it, the chance of rain when it matters. */
.wx { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sky-icon { display: inline-flex; line-height: 0; }
.wx-temps b { font-size: 16px; }
.wx-rain { font-size: 12px; color: #2F7FD8; }
.wx-rain.wet { font-weight: 700; }
.wx-hours { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.wx-hour { display: flex; flex-direction: column; align-items: center; gap: 1px; }

/* The printed menu's editor tabs, kept in view while scrolling a long column. */
.pm-ed-tabs { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 4px 0; }
.pm-ed-tabs .chip { white-space: nowrap; padding: 0 10px; }
.pm-preview .pm-sec { cursor: pointer; }
.pm-preview .pm-sec:hover { outline: 1px dashed #bbb; outline-offset: 3px; }
.pm-sec-edit.pm-flash { box-shadow: 0 0 0 2px var(--ink); transition: box-shadow .3s; }

/* This week on Today: Weather and Events tabs; the weather a line a day, lined up in columns. */
.week-top { align-items: center; margin-bottom: 6px; }
.week-tabs { gap: 6px; }
.week-tabs .chip { height: 30px; padding: 0 10px; font-size: 12px; white-space: nowrap; gap: 6px; }
.wx-week { display: grid; grid-template-columns: 1fr auto auto auto auto 52px; align-items: center; column-gap: 8px; }
.wx-week > * { padding: 5px 0; }
.wx-day { white-space: nowrap; }
.wx-hi { font-size: 16px; text-align: right; }
.wx-lo { text-align: right; }
.wx-week .wx-rain { text-align: right; white-space: nowrap; }
.wx-dot { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--ink); font-size: 12px; }
.week-day.first { border-top: 0; }

/* The × on a printed-menu topping: red, so it reads against the chip. */
.pm-chip .pm-chip-x { color: var(--ink); font-weight: 700; font-size: 15px; }

/* This week: what a kind of night has done before, and the nights behind it. */
.week-effect > summary { cursor: pointer; list-style: none; }
.week-effect > summary::-webkit-details-marker { display: none; }
.week-effect > summary::after { content: ' ›'; }
.week-effect[open] > summary::after { content: ' ⌄'; }
.week-nights { margin: 4px 0 4px 16px; padding: 0; }
.week-nights li { margin: 2px 0; }

/* The printed menu's picker (owner, Oct 28): Dine-in, Drinks, To-go, Catering, then Custom menus. */
.pm-menus { display: flex; flex-direction: column; gap: 10px; }
.pm-custom { border-top: 1px solid var(--soft); padding-top: 10px; }
.pm-custom input[type=search] { width: 100%; }
.pm-custom input[type=text] { flex: 1 1 220px; min-width: 0; }
.pm-menu-row { display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font: inherit; color: inherit; }
.pm-menu-row:hover, .pm-menu-row:focus { background: var(--soft); outline: none; }
.pm-menu-row.on { border-color: var(--ink); font-weight: 600; }
.pm-menu-this { border-top: 1px solid var(--soft); padding-top: 10px; }
.pm-menu-this input[type=text] { flex: 0 1 260px; min-width: 0; }
.pm-menu-this .small.muted { overflow-wrap: anywhere; }

/* The printed menu's add-ons: search every option in Square. */
.pm-find { width: 100%; }
.pm-find-results { display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 0; max-height: 260px; overflow-y: auto; }
.pm-find-results:empty { display: none; }
.pm-find-hit { display: flex; gap: 10px; align-items: baseline; text-align: left; padding: 8px 10px; border: 0; border-top: 1px solid var(--soft); background: var(--card); cursor: pointer; font: inherit; }
.pm-find-hit:hover, .pm-find-hit:focus { background: var(--soft); outline: none; }
.pm-find-results > .small { padding: 8px 10px; }

/* The menu for guests (/menu): the printed pages on a computer; one readable column on a phone. */
body.guest-menu { background: #ECECE8; margin: 0; }
.gm-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #000; }
.gm-bar .btn { background: #fff; color: #000; border-color: #fff; }
.gm-tabs { display: flex; gap: 18px; }
.gm-tabs a { color: #fff; text-decoration: none; font: 500 14px/1 'Jost', sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.gm-pages { max-width: 848px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 24px; }
.gm-page { scroll-margin-top: 64px; }
.gm-page .pm-scaler .pm-sheet { box-shadow: 0 2px 14px rgba(0, 0, 0, .14); }
.pm-flow .pm-sheet { width: auto; height: auto; padding: 22px 18px 18px; overflow: visible; box-shadow: 0 1px 8px rgba(0, 0, 0, .1); }
.pm-flow .pm-top { flex-direction: column; align-items: center; gap: 10px; }
.pm-flow .pm-logo { height: 70px; }
.pm-flow .pm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 11px; }
.pm-flow .pm-cols { display: block; }
.pm-flow .pm-col { overflow: visible; padding: 0; font-size: 15px; --pm-gap: 12px; }
.pm-flow .pm-col + .pm-col { margin-top: 22px; }
/* One column on a phone: the add-ons box after everything else (owner, Nov 2: it came between the appetizers and the pizzas). */
.pm-flow .pm-cols { display: flex; flex-direction: column; }
.pm-flow .pm-col { display: contents; }
.pm-flow .pm-col + .pm-col > :first-child { margin-top: 22px; }
.pm-flow .pm-box { order: 1; margin-top: 22px; }
.pm-flow .pm-box { margin-top: 18px; }
.pm-flow .pm-desc { font-size: .9em; color: #333; }
.pm-flow .pm-foot { font-size: 12px; margin-top: 18px; }
@media print { body.guest-menu .gm-bar, body.guest-menu .gm-pages { display: none !important; } }
/* Inside the website's Menu popup (/menu?embed): no black bar or print button. A warm grey bar across the top holds
   the tabs on the left (the website puts its "To go? Order online" and × on the right, over the bar's empty end), and they switch pages in place (web/menu-tabs.js sets data-gm-show): the first
   page shows until another is picked.
   The popup is plain white like the page, so the page needs no shadow; on a computer the website scales the whole
   page to fit the screen, so nothing scrolls inside. */
.gm-embed .gm-bar .btn { display: none; }
body.guest-menu.gm-embed { background: #fff; }
@media (min-width: 760px) { body.guest-menu.gm-embed { overflow: hidden; } }
.gm-embed .gm-bar { position: static; background: #EEEBE6; justify-content: flex-start; height: 52px; padding: 0 280px 0 28px; }
@media (max-width: 759px) { .gm-embed .gm-bar { padding-right: 60px; } }
.gm-embed .gm-tabs { gap: 28px; align-items: baseline; }
/* "Dine-in:" before the tabs, as the website says "To go?" before Order online (owner, Oct 29): quiet, not a tab. */
.gm-embed .gm-tabs::before { content: 'Dine-in:'; margin-right: -14px; color: rgba(17, 17, 17, .55); font: 400 11px/1 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.gm-embed .gm-tabs a { color: rgba(17, 17, 17, .5); font-weight: 400; font-size: 13px; letter-spacing: .2em; padding: 5px 0; border-bottom: 1px solid transparent; }
.gm-embed .gm-tabs a:hover { color: #111; }
.gm-embed:not([data-gm-show]) .gm-tabs a:first-child,
.gm-embed[data-gm-show="1"] .gm-tabs a:nth-child(1),
.gm-embed[data-gm-show="2"] .gm-tabs a:nth-child(2),
.gm-embed[data-gm-show="3"] .gm-tabs a:nth-child(3),
.gm-embed[data-gm-show="4"] .gm-tabs a:nth-child(4) { color: #111; border-color: #111; }
.gm-embed .gm-pages { padding-top: 16px; position: relative; }
/* A page not showing stays laid out off to the side, so its spacing still measures right (pmFit). */
.gm-embed:not([data-gm-show]) .gm-page:not(:first-child),
.gm-embed[data-gm-show="1"] .gm-page:not(:nth-child(1)),
.gm-embed[data-gm-show="2"] .gm-page:not(:nth-child(2)),
.gm-embed[data-gm-show="3"] .gm-page:not(:nth-child(3)),
.gm-embed[data-gm-show="4"] .gm-page:not(:nth-child(4)) { position: absolute; left: -10000px; top: 0; visibility: hidden; }
.gm-embed .gm-pages .pm-sheet { box-shadow: none; }
/* A third less margin than the printed page (0.42in 0.5in 0.32in), for a tighter look on screen; printing is unchanged.
   The top the same as the sides (owner, Oct 29): the pages' 16px above as beside, and the sheet's own top as its sides. */
.gm-embed .gm-pages:not(.pm-flow) .pm-sheet { padding: 0.33in 0.33in 0.21in; }
.pm-flow .pm-price { white-space: normal; text-align: right; }
.pm-desc-tick { flex-direction: row !important; align-items: center; gap: 4px; }
.pm-desc-tick input { margin: 0; }

/* Wine cards: the form (new or edit), and the wines sold with no card. */
.wine-form { border: 2px solid var(--ink); }
.wine-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.wine-fields .wine-field:nth-child(n+7) { grid-column: 1 / -1; }
@media (max-width: 700px) { .wine-fields { grid-template-columns: 1fr; } }
.wine-field input, .wine-field textarea { width: 100%; }
.wine-fill { padding: 10px; background: var(--soft); margin-bottom: 4px; }
.wine-missing { border-top: 1px solid var(--soft); }
.wine-missing-name { display: flex; gap: 8px; align-items: center; width: 100%; padding: 8px 0; border: 0; background: none; text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
.wine-missing.open .wine-missing-name { font-weight: 600; }
.wine-missing-acts { padding: 0 0 10px; }

/* Online menu: a line per item, lined up row to row; options when opened. */
.online-row { border-top: 1px solid var(--soft); font-size: 14px; }
.online-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 140px 128px 136px 28px; align-items: center; gap: 8px; padding: 6px 0; }
.online-line > * { margin: 0; }
.online-line img.thumb { display: block; }
.online-line .btn { width: 100%; height: 34px; min-height: 0; padding: 0 8px; }
.online-name { border: 0; background: none; padding: 0; text-align: left; font: inherit; cursor: pointer; min-width: 0; line-height: 1.3; }
.online-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.online-pizza { display: flex; flex-direction: row !important; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.online-pizza input { margin: 0; }
.online-more { display: flex; align-items: center; justify-content: center; width: 28px; height: 34px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); }
.online-more svg { transition: transform .15s; }
.online-more.open svg { transform: rotate(90deg); }
.online-extra { margin: 0 0 10px 48px; display: flex; flex-direction: column; gap: 8px; }
.online-acts { display: contents; }
@media (max-width: 760px) {
  .online-line { grid-template-columns: 36px minmax(0, 1fr) 28px; row-gap: 6px; }
  .online-tags { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; }
  .online-tags:empty { display: none; }
  .online-more { grid-column: 3; grid-row: 1; }
  .online-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; grid-column: 2 / -1; }
  .online-acts .btn { width: auto; }
  .online-extra { margin-left: 0; }
}

/* Back to where you came from, on a page without its own ←. */
.nav-back { display: inline-flex; align-items: center; border: 0; background: none; padding: 0; margin: 0 0 6px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.nav-back:hover { color: var(--ink); text-decoration: underline; }
h1 > .nav-back { font-size: .75em; margin: 0 .35em 0 -.1em; vertical-align: .08em; line-height: 1; letter-spacing: 0; color: var(--muted); }
h1 > .nav-back:hover { text-decoration: none; color: var(--ink); }

/* Pickup windows tonight, live: a column per window, filled by the pizzas taken. */
.wlive { margin-bottom: 14px; }
.wlive-head { gap: 6px 16px; align-items: baseline; }
.wlive-row { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 4px; }
.wlive-cell { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wlive-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wlive-bar { position: relative; width: 100%; height: 44px; background: var(--soft); display: flex; align-items: flex-end; }
.wlive-bar span { display: block; width: 100%; background: var(--ink); }
.wlive-n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Green under half, yellow half or more, red full (owner, Nov 4): the same on the tiles. */
.wlive-cell.half .wlive-bar span { background: var(--caution-mark); }
.wlive-cell.full .wlive-bar span { background: var(--problem); }
.wlive-cell.full .wlive-n { color: var(--problem); }
.wlive-cell.closing { opacity: .7; }
.wlive-cell.closing .wlive-bar { background: repeating-linear-gradient(135deg, var(--soft) 0 5px, transparent 5px 9px); }
.wlive-cell.past { opacity: .35; }
.wlive-key { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.wlive-key .k::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; background: var(--ink); }
.wlive-key .k.half::before { background: var(--caution-mark); }
.wlive-key .k.full::before { background: var(--problem); }
.wlive-key .k.closing::before { background: repeating-linear-gradient(135deg, var(--soft) 0 2px, var(--muted) 2px 4px); }
.wlive-key .k.past::before { opacity: .35; }

/* Wine: the list, short and by style; each wine opens its own page. */
.wine-list { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.wine-group-head { display: flex; gap: 8px; align-items: baseline; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.wine-row { display: grid; grid-template-columns: 40px 1fr auto 14px; gap: 12px; align-items: center; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--soft); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.wine-row:hover .wine-row-name .strong { text-decoration: underline; }
.wine-row-img { width: 40px; height: 52px; object-fit: contain; border-radius: var(--radius); background: #fff; border: 1px solid var(--soft); }
.wine-row-img.empty { display: block; background: var(--soft); }
.wine-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wine-row-name { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wine-row-price { white-space: nowrap; color: var(--muted, #666); }
@media (max-width: 700px) { .wine-row { grid-template-columns: 40px 1fr 14px; } .wine-row-price { display: none; } }
.wine-head { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.wine-head.has-photo { grid-template-columns: 120px 1fr; }
.wine-head.has-map { grid-template-columns: 1fr 150px; }
.wine-head.has-photo.has-map { grid-template-columns: 120px 1fr 150px; }
.wine-head .wine-facts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 20px; }
.wine-map .italy-map { max-width: 150px; }
.wine-sheet .wine-photo { max-height: 220px; max-width: 120px; }
@media (max-width: 700px) { .wine-head.has-photo, .wine-head.has-map, .wine-head.has-photo.has-map { grid-template-columns: 90px 1fr; } .wine-map { display: none; } }
.wine-block { margin-top: 16px; }
.wine-block ul { margin: 6px 0 0; padding-left: 18px; }
.wine-pair { padding: 8px 0; border-top: 1px solid var(--soft); }
.wine-pair:first-of-type { border-top: 0; }

/* How the oven filled: a column each 15 minutes. Series colors: the chart palette's first three. */
.oven-wrap { display: flex; gap: 8px; margin-top: 12px; }
.oven-keys, .oven-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.oven-keys { align-items: flex-end; flex: 0 0 auto; }
.oven-chart { display: flex; gap: 3px; flex: 1; overflow-x: auto; padding-bottom: 4px; }
.oven-col { flex: 1 0 34px; }
.oven-n { height: 16px; font-size: 12px; font-weight: 600; }
.oven-bar, .oven-bar-key { height: 140px; }
.oven-bar { width: 100%; display: flex; flex-direction: column-reverse; gap: 2px; background: none; border-bottom: 1px solid var(--line); }
.oven-bar-key { display: flex; align-items: center; }
.oven-bar span { display: block; width: 100%; border-radius: 4px 4px 0 0; min-height: 2px; }
.oven-time { height: 16px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.oven-sub { height: 18px; font-size: 12px; }
.oven-dine { background: var(--series-1); }
.oven-online { background: var(--series-3); }
.oven-togo { background: var(--series-2); }
.oven-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.oven-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* What it goes out in: shown on the recipe's page, set in the recipe editor (inside its card, no card of its own). */
.pack-row.view { grid-template-columns: minmax(0, 1.3fr) auto auto 70px; }
.editor .pack-card { border: 0; box-shadow: none; padding: 0; margin: 18px 0 4px; background: none; }
.editor .pack-add select { width: auto; min-width: 90px; }
.editor .pack-add input.short, .editor .pack-row input.short { width: 70px; }
.pack-card > .link { display: block; text-align: left; margin-top: 8px; }

/* Takeout & online: on or paused and tonight's windows, one box. */
.online-live .online-pause { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--soft); }
.online-live .wlive { margin: 0; }

/* Found a bug / Feature request */
.rail button.off-link { width: 84px; padding: 8px 2px 0; line-height: 1.35; border: 0; color: #8E8E89; font-size: 10px; letter-spacing: .04em; text-transform: none; }
.rail button.off-link:hover { color: #fff; text-decoration: underline; }
@media (max-width: 700px) { .rail button.off-link { padding: 8px 6px; white-space: nowrap; } }
.floor-off { display: block; margin: 28px auto 12px; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.add-viewer { margin-top: 12px; display: grid; gap: 6px; }
/* An area's settings: the round ⚙ just before the ? in its header (lit on the settings page), and the page it opens:
   one row per setting (name and value, the line on what it changes, a preview while editing, its history folded). */
.head-gear { width: 44px; height: 44px; flex: none; border-radius: 50% !important; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; }
.head-gear svg { width: 20px; height: 20px; }
.head-gear:hover { border-color: var(--ink); }
.head-gear.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.set-page { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.set-card { gap: 0; }
.set-card > h2 { margin-bottom: 8px; }
.set-card > .set-what { margin-bottom: 4px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; padding: 12px 0; border-top: 1px solid var(--soft); }
.set-label { font-weight: 600; overflow-wrap: anywhere; }
.set-value { justify-self: end; text-align: right; }
.set-row > .set-what, .set-row > .set-preview, .set-row > .set-history, .set-row > .set-extra, .set-row > .error { grid-column: 1 / -1; }
.set-row > .error:empty { display: none; }
.set-row.set-removed .set-label { text-decoration: line-through; color: var(--muted); }
.set-control { justify-content: flex-end; }
.set-control input.set-input { height: 44px; width: 96px; font-size: 16px; text-align: right; }
.set-control input.set-name { height: 44px; width: 220px; max-width: 100%; }
.set-control select.set-select, .set-value > select.set-select { height: 44px; max-width: 200px; }
.set-control .btn.small-btn { height: 44px; }
.set-file { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.set-file:focus-within { outline: 2px solid #000; outline-offset: 2px; }
.set-file-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.set-preview { display: grid; gap: 2px; margin-top: 4px; }
.set-preview:empty { display: none; }
.set-line { display: flex; align-items: baseline; gap: 6px; font-weight: 600; }
.set-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; transform: translateY(-1px); }
.set-extra { margin-top: 4px; }
.set-history { margin-top: 2px; }
.set-history > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; list-style: none; width: fit-content; }
.set-history > summary::-webkit-details-marker { display: none; }
.set-history > summary::after { content: '▸'; margin-left: 6px; }
.set-history[open] > summary::after { content: '▾'; }
.set-history .set-when { min-width: 150px; }
@media (max-width: 600px) {
  .set-row { grid-template-columns: 1fr; }
  .set-value { justify-self: start; text-align: left; }
  .set-control { justify-content: flex-start; }
  .set-history .set-when { min-width: 0; }
}
.sheet > .card { box-shadow: none; }
.fact-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.fact-row > :last-child { text-align: right; }

/* Invoices by where they stand */
.inv-group { border-left: 4px solid var(--st, var(--line)); }
.inv-group.st-check { --st: var(--caution-mark); }
.inv-group.st-partial { --st: var(--caution-mark); }
.inv-group.st-done { --st: var(--good); }
/* Voided: kept, out of prices; no status colour. */
.inv-group.st-void { --st: var(--line); }
.card.voided .core-ivrow:not(.head) { opacity: 0.55; }
.inv-group .st-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st); flex: none; }
.inv-group h2 { margin: 0; }
.inv-st { display: flex; align-items: center; gap: 12px; }
.inv-st .inv-open { text-align: left; }
.inv-st .num { min-width: 84px; text-align: right; }

/* Read right on its own */
.acc-box .big { margin: 4px 0 2px; }
.acc-weeks { display: flex; align-items: flex-end; gap: 3px; height: 48px; margin-top: 10px; }
.acc-weeks span { flex: 1; background: var(--series-1); border-radius: 2px 2px 0 0; min-width: 4px; }
.acc-vendors { display: grid; gap: 6px; margin-top: 6px; }
.acc-vendor { display: grid; grid-template-columns: minmax(0, 1fr) 80px 40px; gap: 8px; align-items: center; text-align: left; border: 0; background: none; padding: 4px 0; font: inherit; color: inherit; }
button.acc-vendor { cursor: pointer; }
button.acc-vendor:hover .acc-name > span:first-child { text-decoration: underline; }
.acc-name { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 14px; }
.acc-bar { height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; }
.acc-bar > span { display: block; height: 100%; background: var(--series-1); }
.acc-vendor > b { text-align: right; font-size: 14px; }

/* Save without a check: a big switch, red off, green on */
.big-toggle { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: 999px; background: var(--muted); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-align: left; transition: background .2s; }
.big-toggle.on { background: var(--ink); flex-direction: row-reverse; }
.big-toggle-knob { width: 34px; height: 34px; border-radius: 50%; background: #fff; flex: none; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.big-toggle-label { flex: 1; font-size: 14px; letter-spacing: .02em; }
.big-toggle:disabled { opacity: .6; }
.cmp-fold > summary { cursor: pointer; list-style: none; }
.cmp-fold > summary::-webkit-details-marker { display: none; }
.cmp-fold[open] > summary { margin-bottom: 10px; }

/* An ingredient's page: view first; Edit brings out the controls */
.view-only { display: none; }
main.ing-view .view-only { display: inline; }
main.ing-view .edit-only { display: none !important; }
main.ing-view .allergy-chips .chip { pointer-events: none; }
main.ing-view .allergy-chips .chip:not(.on) { display: none; }
main.ing-view .inv-switch button:not(.on) { display: none; }
main.ing-view .inv-switch button { pointer-events: none; }
main.ing-view .pm-diet-t:has(+ .allergy-chips:not(:has(.chip.on))) { display: none; }

/* The side menu fits a laptop screen without scrolling: tighter under the logo and between buttons */
.rail { padding-top: 4px; gap: 0; }
.rail > .logo { margin: 0 0 2px; }
.rail .logo img, .rail img.brand-logo { max-height: 64px; }
.rail > button { padding-top: 8px; padding-bottom: 6px; }
.rail .rail-version { line-height: 1.2; }
.rail > button { padding-top: 7px; padding-bottom: 5px; }
.rail button.off-link { width: 96px; padding: 4px 0 6px; font-size: 9.5px; line-height: 1.25; }
.inv-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) 70px minmax(0, 1fr) minmax(0, 1.2fr) 110px 56px; gap: 12px; align-items: center; }
.inv-head { padding: 8px 0 6px; border-bottom: 1px solid var(--line); }
.inv-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.inv-sort.on { color: var(--ink); font-weight: 600; }
.inv-sort.num { text-align: right; }
.inv-row-g { padding: 9px 0; border-bottom: 1px solid var(--line); }
.inv-row-g:last-child { border-bottom: 0; }
.inv-v { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row-g .num { text-align: right; }
.inv-act { text-align: right; }
@media (max-width: 700px) { .inv-grid { grid-template-columns: minmax(0, 1fr) 56px 90px; } .inv-grid > :nth-child(3), .inv-grid > :nth-child(4), .inv-grid > :nth-child(6) { display: none; } }
/* Events (owner, Oct 29): who, the date, guests, the evening, where it stands, the arrow; on a phone who, date, tag. */
.inv-grid.ev-grid { grid-template-columns: minmax(0, 2fr) 104px 56px minmax(0, 1fr) 180px 14px; cursor: pointer; }
.inv-grid.ev-grid.inv-head { cursor: default; }
.ev-min-line { padding: 2px 0 12px; }
.ev-time-in { width: 8.5em; }
@media (max-width: 700px) { .inv-grid.ev-grid { grid-template-columns: minmax(0, 1fr) 84px auto; } .inv-grid.ev-grid > :nth-child(5) { display: block; } .inv-grid.ev-grid > :nth-child(2) { display: block; } .inv-grid.ev-grid > :nth-child(3), .inv-grid.ev-grid > :nth-child(4), .inv-grid.ev-grid > :nth-child(6) { display: none; } }
.ev-status-row { gap: 12px; align-items: center; margin: 0 0 14px; }
.ev-told .lrow { align-items: baseline; }
.ev-told .ev-answer { text-align: right; font-weight: 600; max-width: 60%; white-space: pre-line; }
.ev-line { padding: 6px 0; border-bottom: 1px solid var(--line); }
.ev-line .set-name { min-width: 180px; }
.ev-add { margin-top: 10px; }
.ev-found .lrow { width: 100%; text-align: left; gap: 10px; }
.ev-total { border-top: 1px solid var(--line); }
.ev-total .ev-total-label { text-decoration: none; }
.ev-printed { margin-top: 12px; gap: 8px; }
.ev-email { overflow-wrap: anywhere; }
.ev-upcoming .lrow { width: 100%; gap: 10px; text-align: left; align-items: center; }
.ev-upcoming .ev-up-day { flex: none; min-width: 92px; font-size: 13px; }
.inv-total { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, #ddd); }
.inv-total .money-in { width: 120px; }
.inv-charges { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 14px; }
.inv-charge { display: flex; align-items: center; gap: 12px; } .inv-charge .money-in { width: 120px; }
.inv-editor .inv-line { grid-template-columns: minmax(160px, 1fr) 72px 96px 110px 64px; }
.inv-editor .inv-line > .row.tight { justify-content: flex-end; }
.inv-editor .inv-line > .row.tight.inv-pack { grid-column: 1 / -1; justify-content: flex-start; margin-top: -2px; }
.inv-editor .inv-line .inv-pack input.amount { width: 80px; }
.inv-pack select { width: auto; }
/* A phone: the ingredient across, then how much, the unit, the total and its buttons two by two. */
@media (max-width: 700px) { .inv-editor .inv-line { grid-template-columns: 1fr 1fr; } .inv-editor .inv-line > :first-child { grid-column: 1 / -1; } }
.scan-split input[type=text] { width: 180px; }
.inv-editor .inv-line input, .inv-editor .inv-line .search-wrap input { height: 44px; padding-top: 0; padding-bottom: 0; }

/* Pars on the count lists: a dot for how the par sits against what's used. */
.par-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: #B9B6AE; flex: none; }
.par-dot.red { background: var(--problem); } .par-dot.yellow { background: var(--caution-mark); } .par-dot.green { background: var(--good); }
.inv-par { display: inline-flex; align-items: center; font-size: 13px; white-space: nowrap; color: var(--ink); }
.inv-expected { white-space: nowrap; }
.inv-par-panel { padding: 10px 12px; background: var(--soft); border-radius: 8px; }
.par-why { margin-bottom: 6px; } .par-why.red { color: var(--problem); } .par-why.yellow { color: var(--caution); }
.inv-par-edit { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.inv-par-edit input.short { width: 72px; }

/* Pars from a sheet. */
.paste-box { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.pars-row { display: grid; grid-template-columns: 24px minmax(160px, 1fr) minmax(220px, 340px) 190px; gap: 8px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--soft); }
.pars-row select { width: 100%; } .pars-row .row.tight select { width: auto; flex: 1; } .pars-row input.short { width: 70px; }
@media (max-width: 800px) { .pars-row { grid-template-columns: 24px 1fr; } .pars-row > select, .pars-row > .row { grid-column: 2; } }

.inv-unit { font-size: 14px; white-space: nowrap; }
.inv-unit-unset { border-color: var(--caution-mark); }
/* The unit reads as words with a small caret; the picker lies over it, so a tap opens its choices. */
.inv-unit-choose { position: relative; display: inline-flex; flex-direction: row; align-items: center; font-weight: 400; margin: 0; gap: 4px; cursor: pointer; white-space: normal; line-height: 1.2; }
.inv-unit-choose::after { content: ''; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; flex: none; }
.inv-unit-choose select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.inv-unit-choose:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 720px) { .inv-row.count .inv-unit-choose { max-width: 76px; font-size: 13px; } }

@media (hover: none) { .inv-row.count .inv-par.unset { display: none; } }


.inv-row.count.flash { background: #EAF4EE; transition: background .4s; }

.inv-name-link { padding: 0; text-align: left; font-size: inherit; color: var(--ink); } .inv-name-link:hover { text-decoration: underline; }

.inv-total.off { background: var(--caution-soft); border-top-color: var(--caution-mark); padding: 12px; border-radius: 8px; }

/* An ingredient's stock, on its page. */
.stock-facts { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.stock-chart { margin-top: 2px; }
.stock-chart .chart-svg { width: 100%; height: auto; }
.stock-keys { display: flex; gap: 12px; flex-wrap: wrap; }
.stock-key { display: inline-flex; align-items: center; gap: 5px; }
.stock-key .k-dot { width: 8px; height: 8px; border-radius: 50%; }
.stock-key .k-line { width: 14px; height: 2px; border-radius: 1px; }
.stock-gap { display: grid; gap: 2px; }
.bad-text { color: var(--problem); font-weight: 600; }
.gap-row { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; }
.gap-row .linkish { text-align: left; }
.gap-row > span:last-child { white-space: nowrap; }
.gap-row .par-dot { margin-top: 5px; }

/* What it goes out in, being edited: lines like the recipe's own. */
.pack-edit { display: flex; flex-direction: column; margin: 6px 0 10px; }
.pack-edit-row { display: grid; grid-template-columns: 70px 110px minmax(0, 1fr) 150px 70px 36px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--soft); }
.pack-edit-row.head { border-top: 0; padding-bottom: 2px; }
.pack-edit-row .search-wrap { position: relative; }
.pack-edit-row input, .pack-edit-row select { width: 100%; min-width: 0; }
@container main (max-width: 720px) {
  .pack-edit-row { grid-template-columns: 60px 1fr 1fr 36px; }
  .pack-edit-row.head, .pack-edit-row > .num { display: none; }
  .pack-edit-row .search-wrap { grid-column: 1 / -1; grid-row: 1; }
}
.pack-case:empty { display: none; }
.pack-case { padding: 2px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* A vendor's tables: sortable by their column titles. */
.ven-item.ven-head .sort, .ven-inv-row.ven-head .sort { background: none; border: 0; padding: 4px 0; text-align: left; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ven-head .sort.num { text-align: right; }
.ven-head .sort.on, .ven-head .sort:hover { color: var(--ink); }
.ven-inv-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 120px 60px minmax(0, 1fr) 100px 14px; gap: 12px; align-items: baseline; padding: 8px 4px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ven-inv-row:hover { background: rgba(0,0,0,.03); }
.ven-inv-row.ven-head { cursor: default; border-top: 0; }
.ven-inv-row.ven-head:hover { background: none; }
.ven-inv-row .num { text-align: right; }
.ven-inv-row .chev { color: var(--muted); }
@container main (max-width: 720px) {
  .ven-inv-row { grid-template-columns: minmax(0, 1fr) auto 14px; }
  .ven-inv-row > :nth-child(3), .ven-inv-row > :nth-child(4) { display: none; }
  .ven-inv-row > :nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12px; }
}

/* The order sheet: pars first, the rest folded. */
.others input[type=search] { margin: 0 0 8px; max-width: 360px; }
.orow .row.tight .short { width: 70px; }
.oline .orow { border-top: 1px solid var(--soft); }
.order-setpar { padding: 0 0 10px; }
.order-setpar:not([hidden]) { display: flex; }
.orow[hidden] { display: none; }

/* Pars against what came in. */
.orow.cmp-row { grid-template-columns: minmax(180px, 1.6fr) 90px 90px 80px 80px 100px; }
.orow.cmp-row.off { background: var(--caution-soft); }
.orow.cmp-row.cmp-total { border-top: 2px solid var(--ink); }
.cmp-nopar { padding-top: 8px; }
@container main (max-width: 720px) {
  .orow.cmp-row { grid-template-columns: 1fr 1fr 1fr; }
  .orow.cmp-row > :first-child { grid-column: 1 / -1; }
  .orow.cmp-row > :nth-child(2), .orow.cmp-row > :nth-child(3) { display: none; }
}

/* An ingredient's map. */
.imap-card .imap { max-width: none; }
.imap-svg { width: 100%; height: auto; display: block; }
:root { --map-vendor: var(--series-4); --map-item: var(--series-3); --map-dish: var(--series-5); --map-sales: var(--series-8); }
.imap-node rect { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.imap-node.k-vendor > rect:first-child { fill: color-mix(in srgb, var(--map-vendor) 8%, #fff); stroke: color-mix(in srgb, var(--map-vendor) 35%, #fff); }
.imap-node.k-item > rect:first-child { fill: color-mix(in srgb, var(--map-item) 8%, #fff); stroke: color-mix(in srgb, var(--map-item) 35%, #fff); }
.imap-node.k-dish > rect:first-child { fill: color-mix(in srgb, var(--map-dish) 8%, #fff); stroke: color-mix(in srgb, var(--map-dish) 35%, #fff); }
.imap-node.k-sales > rect:first-child { fill: var(--soft); stroke: var(--line); }
.imap-node .imap-band { stroke: none; }
.imap-node.k-vendor .imap-band { fill: var(--map-vendor); } .imap-node.k-item .imap-band { fill: var(--map-item); }
.imap-node.k-dish .imap-band { fill: var(--map-dish); } .imap-node.k-sales .imap-band { fill: var(--map-sales); }
.imap-node.center > rect:first-child { stroke-width: 2.5; }
.imap-node.center.k-item > rect:first-child { stroke: var(--map-item); } .imap-node.center.k-dish > rect:first-child { stroke: var(--map-dish); }
.imap-node.group > rect:first-child { stroke-dasharray: 4 3; }
.imap-dot { stroke: #fff; stroke-width: 1.5; }
.imap-dot.warn { fill: var(--caution-mark); } .imap-dot.bad { fill: var(--problem); } .imap-dot.cheaper { fill: var(--good); }
.imap-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.imap-key { display: inline-flex; align-items: center; gap: 5px; }
.imap-keybox { width: 12px; height: 12px; border-radius: 3px; }
.imap-keybox.k-vendor { background: var(--map-vendor); } .imap-keybox.k-item { background: var(--map-item); } .imap-keybox.k-dish { background: var(--map-dish); } .imap-keybox.k-sales { background: var(--map-sales); }
.imap-keydot { width: 9px; height: 9px; border-radius: 50%; }
.imap-keydot.warn { background: var(--caution-mark); } .imap-keydot.bad { background: var(--problem); } .imap-keydot.cheaper { background: var(--good); }
/* An amount resting on an estimate (the new foundation's map): dashed, like its line. */
.imap-keydash { width: 18px; height: 0; border-top: 2px dashed #A3A8AE; }
.imap-node { cursor: pointer; }
.imap-node.center { cursor: default; }
.imap-node:hover rect, .imap-node:focus rect { stroke: var(--ink); }
.imap-name { font-size: 13px; font-weight: 600; fill: var(--ink); }
.imap-sub { font-size: 11px; fill: var(--muted); }
.imap-label { font-size: 11px; fill: var(--good); font-weight: 600; }
.imap-hit { cursor: pointer; }
.imap-hit:focus { outline: none; }
.imap-heads { position: relative; height: 18px; margin: 6px 0 2px; }
.imap-heads span { position: absolute; top: 0; font-weight: 600; }
.imap-sub.cheaper { fill: var(--good); font-weight: 600; }
@container main (max-width: 720px) { .imap-heads { display: none; } }
/* The map, expanded over the page. */
.imap-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(28,31,34,.45); display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow: auto; }
.imap-overlay .imap-big { width: min(1400px, 100%); margin: 0; container-type: inline-size; container-name: main; }
.imap-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 4px 0 2px; }
@media (max-width: 600px) { .imap-overlay { padding: 8px; } }
.inv-day { align-items: center; gap: 6px; } .inv-day select { min-width: 150px; }
/* Phone count rows: long names wrap inside their column; the count box sits in the same place on every row. */
@container main (max-width: 720px) {
  .inv-row.count { grid-template-columns: minmax(0, 1fr) 156px 28px; }
  .inv-row.count > .inv-name { min-width: 0; }
  .inv-row.count .inv-name-link { white-space: normal; overflow-wrap: anywhere; text-align: left; }
  .inv-row.count > .inv-parts { justify-self: end; max-width: 156px; }
  .inv-row.count .inv-parts .small.muted { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 800px) { .pars-row > *:not(:first-child) { grid-column: 2; min-width: 0; } .pars-row select { width: 100%; } }
input.bad { border-color: var(--problem); background: var(--problem-soft); }
.kicker .tag { margin-left: 8px; text-transform: none; letter-spacing: 0; }
/* Phone: team rows and the add row wrap instead of running off the side. */
@media (max-width: 600px) {
  .person-row { flex-wrap: wrap; row-gap: 6px; }
  .person-row > .grow { flex-basis: 100%; }
  .add-viewer .row { flex-wrap: wrap; }
  .add-viewer .row > .grow { flex-basis: 100%; min-width: 0; }
  .add-viewer .row > .grow input { width: 100%; box-sizing: border-box; }
}
@container main (max-width: 640px) {
  /* Prime cost on a phone: Hours drops out so the rest fits across. */
  .rrow.prime { grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 1.2fr)) minmax(0, 1fr); gap: 4px; font-size: 12px; }
  .rrow.prime > :nth-child(6) { display: none; }
  /* On core, Supplies (beside it in the summary) and Hours drop out. */
  .rrow.prime.prime-core { grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 1.2fr)) minmax(0, 1fr); gap: 4px; font-size: 12px; }
  .rrow.prime.prime-core > :nth-child(6) { display: block; }
  .rrow.prime.prime-core > :nth-child(5), .rrow.prime.prime-core > :nth-child(7) { display: none; }
}
@media (max-width: 600px) {
  .add-row > input { min-width: 0; flex: 1 1 auto; }
}
/* Phone: where a table's column titles are hidden, each value shows its own. */
@container main (max-width: 640px) { .rrow:not(.head):not(.prime):not(.usage) > [data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); letter-spacing: .02em; } }
@container main (max-width: 600px) { .srow:not(.head) > [data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); } }
@container main (max-width: 470px) { .mrow:not(.head) > [data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); } }
.last-paid { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.clash { margin: 4px 0; } .clash .tag { white-space: normal; }

/* Merge into… and + Add a Square button, inline in the box that offers them. */
.merge-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.merge-panel input[type=search] { width: 100%; height: 44px; font-size: 15px; }
.merge-list { max-height: 280px; overflow-y: auto; }
.merge-list .lrow { text-align: left; }
.merge-keep { display: flex; flex-direction: column; gap: 6px; }
.merge-keep .chip { height: auto; min-height: 40px; padding: 8px 12px; text-align: left; white-space: normal; overflow-wrap: anywhere; }

/* Coming up: planned dishes by stage, and the form that plans one. New on its Square button: yellow (watch) until okayed. */
.tag.new { background: var(--soft); color: var(--ink); }
.mline.is-new { background: var(--soft); box-shadow: inset 3px 0 0 var(--ink); padding-left: 8px; }
.plan-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; padding: 12px 0 16px; border-top: 1px solid var(--soft); }
.plan-form .plan-wide { grid-column: 1 / -1; }
.plan-form input, .plan-form select { width: 100%; }
.plan-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.plan-field .lrow, .plan-field .small { font-weight: 400; }
.plan-buttons { max-height: 260px; overflow-y: auto; }
.plan-buttons .lrow { text-align: left; }
.plan-picked:empty { display: none; }
.plan-group { margin-top: 12px; }
.plan-group h3 { font-size: 14px; margin: 0 0 2px; gap: 6px; }
.plan-cost { gap: 14px; font-variant-numeric: tabular-nums; }

/* Split…: whose lines move (one picked), the two names, which recipes use the new one. */
.split-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.split-groups { display: flex; flex-direction: column; gap: 6px; }
.split-group.chip { height: auto; min-height: 44px; padding: 8px 12px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.split-group.chip.on .small.muted { color: inherit; opacity: .8; }
.split-names { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
.split-names input { width: 100%; height: 40px; }
.split-recipes { display: flex; flex-direction: column; }
.split-recipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--soft); }
.split-recipe .chip.small-chip { height: auto; min-height: 34px; padding: 4px 10px; font-size: 13px; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.rcheck h3 .two-prices { font-weight: 400; }
.split-group.chip > .small { text-transform: none; letter-spacing: normal; }

/* Split: each side's pack size; yellow until it has one. */
.split-pack .amount { width: 80px; }
.split-pack .amount.unsure, .came-in .amount.unsure { border-color: var(--caution-mark); background: var(--caution-soft); }
.split-packs { display: grid; gap: 6px; }

/* A file picker fits its box (a browser draws it at its own width otherwise). */
.file-pick { min-width: 0; }
input[type=file] { max-width: 100%; min-width: 0; }

/* Phones and touch iPads: the Invoice chip floats in the corner, so the page ends clear of it, and it steps
   aside while a sheet or a dialog is open (their Save buttons sit at the bottom). */
@media (max-width: 700px), (pointer: coarse) {
  .shell:has(.capture-corner) > main { padding-bottom: 104px; }
  body:has(.sheet-wrap, .floor-modal, .imap-overlay, .photo-viewer) .capture-corner { display: none; }
}
.floor:has(.capture-corner.always) { padding-bottom: 104px; }
body:has(.sheet-wrap, .floor-modal, .imap-overlay, .photo-viewer) .capture-corner.always { display: none; }

/* The recipe editor on a phone: each line's name on its own row (amount and unit under it), not squeezed to a few letters. */
@media (max-width: 480px) {
  .irow.head { display: none; }
  .irow:not(.head) { grid-template-columns: 26px 72px 1fr 30px; row-gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
  .irow:not(.head) > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .irow:not(.head) > :nth-child(4) { grid-column: 2 / 4; grid-row: 1; }
  .irow:not(.head) > :nth-child(8) { grid-column: 4; grid-row: 1; }
  .irow:not(.head) > :nth-child(2) { grid-column: 2; grid-row: 2; }
  .irow:not(.head) > :nth-child(3) { grid-column: 3; grid-row: 2; }
}

/* The map, expanded on a phone or a touch iPad: the whole screen, the map at a size to read, panned with a
   finger (− and + zoom). */
.imap-zoom { display: none; }
@media (max-width: 700px), (pointer: coarse) and (max-width: 1100px) {
  .imap-zoom { display: inline-flex; }
  .imap-overlay { padding: 0; }
  .imap-overlay .imap-big { min-height: 100%; border-radius: 0; border: 0; }
  .imap-overlay .imap-scroll { overflow: auto; -webkit-overflow-scrolling: touch; max-height: calc(100dvh - 150px); margin: 0 -16px; padding: 0 16px; }
  .imap-overlay .imap-pan { width: calc(var(--zoom, 1) * 1340px); }
  .imap-overlay .imap-pan .imap-heads { display: block; }
}

/* Help: the round ? at the far right of every header; the panel it opens beside the page (the page moves over to make
   room, so the steps can be followed on it; full screen on a phone); Help as its own page (#/help). */
.help-q { width: 44px; height: 44px; flex: none; border-radius: 50% !important; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.help-q:hover { border-color: var(--ink); }
body.help-open .help-q { background: var(--ink); color: #fff; border-color: var(--ink); }
.page-head .head-tools { align-items: center; }
.floor-head .help-q { margin-left: 4px; }
.help-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; z-index: 65; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgba(0,0,0,.12); display: flex; flex-direction: column; }
.help-panel-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.help-panel-title { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.help-panel-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.help-panel-body > * { flex: none; }
.help-panel-top > .grow { flex: 1; min-width: 0; }
.help-panel-body .help-search { width: 100%; }
.help-panel-head .help-panel-h { font-size: 22px; margin-top: 2px; }
.help-panel .card { padding: 14px 16px; }
.help-panel .help-steps { gap: 20px; }
.help-panel .help-step { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
.help-panel .help-n { width: 26px; height: 26px; font-size: 13px; }
.help-panel .help-step-body p { font-size: 15px; }
.help-groups.in-panel { grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 701px) { body.help-open .shell, body.help-open .floor { margin-right: 420px; } }
@media (max-width: 700px) { .help-panel { width: 100%; border-left: 0; } body.help-open { overflow: hidden; } }
.help-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.help-hits .lrow, .help-group .lrow, .help-mine .lrow, .help-related .lrow { text-align: left; min-height: 44px; font-size: 15px; }
.help-group .lrow > .grow, .help-hits .lrow > .grow, .help-mine .lrow > .grow, .help-related .lrow > .grow { flex: 1; min-width: 0; }
.help-hit .grow { display: flex; flex-direction: column; gap: 2px; }
.help-hit:hover .grow { text-decoration: none; }
.help-hit:hover .help-hit-title { text-decoration: underline; }
.help-hit-title { font-weight: 600; }
.help-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.help-article { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.help-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.help-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.help-n { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.help-step-body p { margin: 4px 0 12px; font-size: 16px; line-height: 1.5; }
.help-shot-link { display: block; max-width: 100%; }
.help-shot { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.help-ref { color: var(--link); }
@media (max-width: 700px) {
  .help-step { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .help-n { width: 26px; height: 26px; font-size: 13px; }
  .help-step-body p { font-size: 15px; }
}

/* View first (Allergens & names, Boards & iPads, Units, Printed menu, a station's prep list): Needs a check
   on top in yellow, the page as plain lines below, a line opened in place to change. */
.head-slot { display: contents; }
.head-slot:empty { display: none; }
.core-lrow2.core-cant-row { background: var(--caution-soft); }
.core-cant { cursor: pointer; border: 0; font: inherit; }
.needs-check { background: var(--caution-soft); border-color: var(--caution-line); border-left: 4px solid var(--caution-mark); }
.needs-check .nc-group { display: block; }
.needs-check .nc-label { display: block; }
.needs-check .nc-label { color: var(--caution); padding-bottom: 4px; }
.needs-check .vrow { border-top-color: var(--caution-line); }
.needs-check .vrow.vtap:hover { background: var(--caution-soft); }
.needs-check .link { display: block; }
.vlist { display: block; min-width: 0; }
.vrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 4px; border: 0; border-top: 1px solid var(--soft); background: none; font: inherit; color: inherit; text-align: left; box-sizing: border-box; }
.vrow.vtap { cursor: pointer; }
.vrow.vtap:hover { background: var(--soft); }
.vrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vrow-main > * { overflow-wrap: anywhere; }
.vrow-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; max-width: 55%; }
.vrow-right { text-align: right; white-space: nowrap; }
.vrow .chev { color: var(--muted); flex: none; }
.vrow-acts { display: flex; align-items: center; gap: 10px; flex: none; }
.vrow-edit { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 14px; border-top: 1px solid var(--ink); }
.vrow-edit > .row > b { font-size: 15px; }
/* One ingredient's allergens opened in place: the editor's own layout, not the Ingredients list's grid (same class). */
.vrow-edit .ing-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; border-top: 0; padding: 0 0 4px; cursor: default; }
.vrow-edit .ing-row:hover { background: none; }
/* The phone rule for that list hid the allergen chips here too (nothing could be ticked on a phone). */
.vrow-edit .ing-row > .allergy-chips, .list > .ing-row > .allergy-chips { display: flex; grid-column: auto; }
.vrow-edit .ing-row > :nth-child(3), .list > .ing-row > :nth-child(3) { font-size: inherit; grid-column: auto; }
.vrow-edit > .card { border: 0; padding: 0; background: none; }
.vempty { padding: 10px 4px; }
.vgroup-h { padding: 14px 4px 4px; }
@media (max-width: 700px) {
  .vrow { flex-wrap: wrap; row-gap: 4px; }
  .vrow-main { flex-basis: calc(100% - 30px); }
  .vrow-tags { max-width: none; justify-content: flex-start; flex: 1; }
  .vrow .chev { margin-left: auto; }
}

/* MarginEdge's photos read again: the box on Invoices, and what's still priced only by MarginEdge. */
.backfill-box .progress { margin: 6px 0 4px; }
.backfill-box .row.tight .amount { width: 72px; }
.backfill-box .list.compact { margin-top: 6px; }
.miss-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 64px minmax(0, 1fr) 104px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.miss-grid:last-child { border-bottom: 0; }
.miss-grid > :last-child { justify-self: end; }
@media (max-width: 700px) { .miss-grid { grid-template-columns: minmax(0, 1fr) 56px 96px; } .miss-grid > :nth-child(2), .miss-grid > :nth-child(4) { display: none; } }

/* The new foundation (Napoli (fresh)): the owner's restaurant switch in the rail, recipes and ingredients read only.
   Physics is grey; an estimate is marked ≈ and keeps the ink colour (yellow only when stale or contradicted). */
.rail .rail-place { width: 92px; padding: 6px 4px 5px; border: 1px solid #555; border-radius: 0; color: #fff; font-size: 11px; letter-spacing: 0; text-transform: none; gap: 2px; margin-bottom: 10px; line-height: 1.25; }
.rail .rail-place:hover { border-color: #fff; }
.rail .rail-place-name { text-align: center; white-space: normal; }
.rail .rail-place-swap { font-size: 13px; color: #BDBDB8; }
@media (max-width: 700px) { .rail .rail-place { width: auto; min-width: 0; flex-direction: row; gap: 6px; margin: 0 6px 0 0; padding: 6px 10px; } .rail .rail-place-name { white-space: nowrap; } }
.pick-row.on { font-weight: 600; }
.core-rrow, .core-irow { display: grid; 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; }
.core-rrow { grid-template-columns: minmax(0, 1.6fr) 120px 92px 84px 14px; }
.core-irow { grid-template-columns: minmax(0, 1.4fr) 180px minmax(0, 1fr) 14px; }
.core-rrow.head, .core-irow.head, .core-lrow.head { font-size: 12px; color: var(--muted); font-weight: 600; cursor: default; border-top: 0; padding-top: 4px; }
.core-rrow:not(.head):hover, .core-irow:not(.head):hover { background: var(--soft); }
.core-rrow .nm, .core-irow .nm, .core-lrow .nm { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.core-rrow .num, .core-irow .num, .core-lrow .num { text-align: right; font-variant-numeric: tabular-nums; }
.core-lrow { display: grid; grid-template-columns: minmax(0, 1.5fr) 120px 96px 52px; gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); }
.core-lrow .linkish { font-weight: 600; text-align: left; }
.cost-link { font-weight: 600; }
.ulist { display: flex; flex-direction: column; }
.urow { display: grid; grid-template-columns: minmax(0, 1.2fr) 18px minmax(0, .7fr) minmax(0, 1.8fr); gap: 8px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.urow:first-child { border-top: 0; }
.urow .u-eq, .cstep .u-eq { text-align: center; font-weight: 700; }
.urow.k-physics { color: var(--muted); font-size: 14px; }
.urow .u-src { text-align: right; }
.urow .u-src .tag { margin-left: 2px; }
.chain { margin: 0 0 10px 8px; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.cstep { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.cstep.k-physics { color: var(--muted); }
@media (max-width: 700px) {
  .core-rrow { grid-template-columns: minmax(0, 1fr) 100px 52px 12px; }
  .core-rrow > :nth-child(3) { display: none; }
  .core-irow { grid-template-columns: minmax(0, 1fr) 150px 12px; }
  .core-irow > :nth-child(3) { display: none; }
  .core-lrow { grid-template-columns: minmax(0, 1fr) 84px 72px; }
  .core-lrow > :nth-child(4) { display: none; }
  .urow { grid-template-columns: minmax(0, 1fr) 16px minmax(0, .8fr); }
  .urow .u-src { grid-column: 1 / -1; text-align: left; padding-left: 0; }
}
.core-side-item { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.core-side-item + .core-side-item { padding-top: 10px; border-top: 1px solid var(--line); }
.pick-row > .grow { flex: 1; }
/* Napoli (fresh)'s invoices: the check's questions in yellow, a saved invoice's lines, bringing in Napoli's photos. */
.core-top { align-items: center; gap: 8px; margin-bottom: 4px; }
.core-recipe-bar { align-items: center; gap: 8px; margin-left: auto; }
.core-recipe-bar .head-search { min-width: 240px; }
.core-ask { background: var(--caution-soft); border: 1px solid var(--caution-line); border-left: 3px solid var(--caution-mark); border-radius: var(--radius); padding: 6px 8px; }
.note.core-ask { color: inherit; font-weight: 400; }
.note.core-ask.answered { background: var(--card); border-color: var(--line); border-left-color: var(--line); }
/* Come by Save & next: the one before, said saved, above the next check. */
.core-saved { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.core-editor .core-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; }
.core-editor .core-ask-q { font-size: 16px; }
.core-editor .core-ask input { min-width: 180px; }
.scan-line .core-ask .amount { width: 70px; }
.core-new input[type=text] { flex: 1; min-width: 140px; }
.scan-keep-off { flex: none; width: 18px; }
.core-ivrow { display: grid; grid-template-columns: minmax(0, 1.6fr) 150px 120px 84px; gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--line); }
.core-ivrow.head { font-size: 12px; color: var(--muted); font-weight: 600; border-top: 0; padding-top: 4px; }
.core-ivrow .nm { min-width: 0; }
.core-ivrow .nm .linkish { font-weight: 600; text-align: left; }
.core-ivrow .num { text-align: right; font-variant-numeric: tabular-nums; }
.core-ivrow.sub { padding-left: 22px; }
.core-ivrow.other { color: var(--muted); }
.core-q { flex-wrap: wrap; gap: 8px; }
.core-q .amount { width: 76px; }
.core-q .search-wrap { min-width: 220px; }
label.bring-row { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line); cursor: pointer; font-weight: 400; }
.bring-row:first-child { border-top: 0; }
.bring-row input[type=checkbox] { width: 18px; height: 18px; flex: none; margin: 0; }
.bring-row.done { color: var(--muted); cursor: default; }
.bring-row .num { min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .core-ivrow { grid-template-columns: minmax(0, 1fr) 96px 72px; }
  .core-ivrow > :nth-child(2) { display: none; }
  .bring-row .num { min-width: 60px; }
}
.bring-row > .grow { flex: 1; min-width: 0; }
@media (max-width: 700px) { .scan-head.core-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .scan-head.core-head > :first-child { grid-column: 1 / -1; } }

/* The new foundation, phase 3: capturing a recipe, the editor, measuring, Getting started. */
.core-rcheck .core-rhead { align-items: center; gap: 8px; margin-bottom: 4px; }
.core-rhead .core-rname { flex: 1; min-width: 180px; font-weight: 600; font-size: 16px; }
.core-rhead .amount.short, .core-erow .amount { width: 70px; }
.core-rcheck .scan-read { display: flex; gap: 10px; align-items: flex-start; }
.core-editor { display: grid; gap: 10px; }
.core-elines { display: grid; }
.core-erow { border-top: 1px solid var(--line); padding: 8px 0; display: grid; gap: 6px; }
.core-eline { display: grid; grid-template-columns: minmax(0, 1fr) 76px 120px 80px 22px; gap: 8px; align-items: center; }
.core-eline .search-wrap input { width: 100%; box-sizing: border-box; }
.core-eline .num { text-align: right; font-variant-numeric: tabular-nums; }
.core-eline .link { font-size: 18px; line-height: 1; }
.core-eq:empty { display: none; }
.core-eq .core-ask { gap: 6px; }
.core-eq .amount { width: 70px; }
.core-etotal { display: flex; gap: 8px; align-items: center; border-top: 2px solid var(--line); padding-top: 8px; }
.core-etext { display: grid; gap: 8px; }
.core-etext textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.core-dish.done { border-left: 4px solid var(--good); }
.core-done { color: var(--good); font-weight: 700; font-variant-numeric: tabular-nums; }
.core-gap { flex-wrap: wrap; gap: 8px; }
.core-gap .capture-bar { display: inline-flex; }
.core-gap .capture-btn { padding: 4px 10px; min-height: 30px; font-size: 13px; }
.core-typed .amount.short { width: 64px; }
.core-typed .core-approx { font-size: 18px; color: var(--muted); }
.core-noprice { justify-content: flex-end; margin-top: 6px; }
.core-noprice .capture-bar, .core-capture-as .capture-bar { display: inline-flex; }
.core-capture-as .capture-btn { padding: 4px 10px; min-height: 30px; font-size: 13px; }
/* Capture a recipe stays in the header on a phone (the corner button is Capture an invoice). */
@media (max-width: 700px), (pointer: coarse) { .head-tools > .capture-bar.recipe-capture { display: block; } }
.core-typed input[type=text] { width: 120px; }
.core-task { gap: 8px; flex-wrap: wrap; }
.core-task .amount { width: 76px; }
.core-ver + .core-ver { border-top: 1px solid var(--line); padding-top: 6px; }
.core-unlinked .nm { color: var(--caution); }
.bring-covers { padding: 0 0 6px 30px; }
.seg button.hint { box-shadow: inset 0 -2px 0 var(--caution-mark); }
@media (max-width: 640px) {
  .core-eline { grid-template-columns: 70px minmax(0, 1fr) 72px 20px; }
  .core-eline > .search-wrap { grid-column: 1 / -1; }
  .core-rhead .core-rname { min-width: 100%; }
}
label.core-check { font-weight: 400; cursor: pointer; padding: 4px 0; }
label.core-check input { flex: none; margin: 0; }
.core-gap .capture-btn .cam-icon { width: 16px; height: 16px; }
.core-rhead select { max-width: 130px; }
.core-rhead .core-rname { flex: 1 1 200px; }
.core-vers { display: grid; gap: 6px; margin-top: 6px; }
.core-ver .lrow { border-top: 0; padding: 4px 0; }
.core-actions { justify-items: start; text-align: left; }
.seg.core-sort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.seg.core-sort button { padding: 7px 4px; font-size: 11px; letter-spacing: .03em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .seg.core-sort { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.core-actions { display: flex; flex-direction: column; align-items: flex-start; }
.core-actions .link { text-align: left; padding-left: 0; }

/* The recipes side on core (chunk 1b): a year of each dish's cost on the home, Needs a check's lines, packaging. */
.core-rrow.spark { grid-template-columns: minmax(0, 1.6fr) 92px 60px 112px 84px 76px 14px; }
.core-rrow .mk, .core-rrow .tag { white-space: nowrap; }
.nc-item { border-top: 1px solid var(--caution-line); }
.nc-item:first-child { border-top: 0; }
.nc-item > .vrow { border-top: 0; }
.nc-where { padding: 0 4px 8px; gap: 10px; }
.nc-screen .vlist > .vrow:first-child { border-top: 0; }
.pack-edit-row { padding: 8px 0; border-top: 1px solid var(--soft); }
.pack-edit-row .small-select { max-width: 220px; }
@media (max-width: 700px) {
  .core-rrow.spark { grid-template-columns: minmax(0, 1fr) 84px 84px 12px; }
  .core-rrow.spark > :nth-child(3), .core-rrow.spark > :nth-child(5), .core-rrow.spark > :nth-child(6) { display: none; }
  .pack-totals { grid-template-columns: 1fr 1fr; }
}

/* The onboarding walkthrough: the process as a rail, one card, one action. The sample and the real cost are drawn the same way. */
.walk-rail { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.walk-step { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 13px; font-weight: 600; }
.walk-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.walk-step.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.walk-step.on .walk-dot { background: #fff; color: var(--ink); }
.walk-step.done { color: var(--good); border-color: var(--good-line); background: var(--good-soft); }
.walk-step.done .walk-dot { background: var(--good); color: #fff; }
.walk-card { max-width: 760px; }
.walk-card h2 { font-size: 22px; letter-spacing: -.01em; }
.walk-card h2.walk-pay { font-size: 26px; line-height: 1.2; }
.walk-foot { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.walk-strip .strong { font-size: 16px; }
.walk-chain { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.walk-top, .walk-line { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 12px 16px; min-height: 48px; }
.walk-top { background: var(--soft); }
.walk-big { font-size: 24px; letter-spacing: -.01em; }
.walk-line { border-top: 1px solid var(--line); padding-left: 28px; }
.walk-line.on { background: var(--soft); }
.walk-line .num { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.walk-top::after, .walk-line::after { content: '›'; color: var(--muted); font-size: 18px; transform: rotate(90deg); transition: transform .12s; }
.walk-top.on::after, .walk-line.on::after { transform: rotate(-90deg); }
.walk-paper { margin: 0 16px 14px 28px; padding: 12px 14px; background: #FFFDF6; border: 1px solid var(--line); border-radius: 4px; box-shadow: 2px 3px 0 var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.walk-paper-head { gap: 8px; }
.walk-printed { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .02em; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); padding: 6px 0; word-break: break-word; }
.walk-math { font-weight: 700; }
.walk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.walk-chips:empty { display: none; }
.walk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); font-weight: 600; font-size: 14px; }
.walk-chip-x { border: 0; background: none; font-size: 20px; line-height: 1; width: 32px; height: 32px; cursor: pointer; color: var(--muted); border-radius: 50%; }
.walk-add { gap: 8px; }
.walk-add input { flex: 1; min-width: 0; }
.walk-checks { display: flex; flex-direction: column; }
.walk-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.walk-row:first-child { border-top: 0; }
.walk-tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--caution-mark); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: none; color: #fff; }
.walk-row.in .walk-tick { background: var(--good); border-color: var(--good); }
.walk-items { max-height: 52vh; overflow: auto; }
.walk-card input[type=search] { height: 48px; border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; font-size: 16px; background: #fff; font-weight: 500; }
.core-walk-editor { border: 0; padding: 0; box-shadow: none; }
@media (max-width: 700px) {
  .walk-step:not(.on) .walk-name { display: none; }
  .walk-step:not(.on) { padding-right: 5px; }
  .walk-when { display: none; }
  .walk-line { padding-left: 16px; }
  .walk-paper { margin-left: 16px; }
  .walk-card h2.walk-pay { font-size: 22px; }
}

/* A long clean name on the "+ New" button wraps instead of running off the card. */
.scan-line .scan-alts .small-btn { white-space: normal; text-align: left; height: auto; max-width: 100%; line-height: 1.3; padding-top: 6px; padding-bottom: 6px; }

/* The switch (chunk 8): readiness lines open into their table, scrolled sideways inside the card on a phone. */
.switch-table-wrap { overflow-x: auto; margin: 8px 0 12px; }
table.switch-table { border-collapse: collapse; width: 100%; font-size: 14px; }
table.switch-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 8px; white-space: nowrap; }
table.switch-table td { padding: 6px 8px; border-top: 1px solid var(--soft); vertical-align: top; }
table.switch-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.switch-open { border-bottom: 1px solid var(--soft); padding-bottom: 8px; }
.switch-part { margin-top: 12px; }
.page-side .list.compact .grow .tag { margin-left: 6px; }

/* Prime: invoices of a week still to check, a link beside its number. */
.unchecked-note { display: block; text-align: left; padding: 2px 0; }

/* The switch's long list: Leave out ticked on each, the row beside it. */
.switch-stale { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line, #e5e5e5); }
.switch-stale > input { flex: none; width: 20px; height: 20px; margin: 0; }
.switch-stale > :last-child { flex: 1; min-width: 0; border-bottom: 0; }
/* The switch's Runs: what and its tags, then when and who, on their own lines. */
.list.compact > .switch-run { display: grid; gap: 2px; }
.switch-run .row.tight { gap: 6px; }
/* The app's search: what each hit is stays on one line beside its name. */
.search-pop .lrow > .small.muted { white-space: nowrap; }

/* The Menu items report's share list: thin bars, one colour. Teal, a hue unlike dine-in, to go and online's
   (series 1-3: charcoal, stone, violet) and unlike the status, link and accent colours; 3.6:1 on the card. */
:root { --share-bar: #129784; }
.share-bars { position: relative; display: grid; gap: 6px; min-width: 0; }
.share-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.share-list { display: flex; flex-direction: column; }
.share-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px 54px; column-gap: 8px; row-gap: 5px; align-items: baseline; align-content: center; min-height: 44px; padding: 6px 4px; border-top: 1px solid var(--soft); font-size: 14px; cursor: pointer; }
.share-row:hover, .share-row:focus-visible { background: var(--soft); outline: none; }
.share-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-pct { text-align: right; font-weight: 600; }
.share-val { text-align: right; }
.share-track { grid-column: 1 / -1; height: 8px; }
.share-fill { display: block; height: 100%; min-width: 2px; background: var(--share-bar); border-radius: 0 4px 4px 0; transition: opacity .15s; }
.share-row:hover .share-fill, .share-row:focus-visible .share-fill { opacity: .8; }
.share-more { justify-self: start; padding: 8px 4px; }

h2.pick-flash { background: var(--soft); box-shadow: 0 0 0 4px var(--soft); }

/* The owner's test restaurant (v0.2's main Settings): Delete in red, its name typed first. */
.btn.bad-btn { border-color: var(--problem); color: var(--problem); }
.btn.bad-btn:disabled { opacity: .45; }
.test-kitchen-confirm { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.test-kitchen-confirm input { height: 44px; min-width: 0; flex: 1 1 180px; }

/* A brand-new restaurant's set-up: the whole screen, no rail; the steps in the middle (like a new computer's). */
.setup-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.setup-top { padding: 14px 24px; gap: 16px; border-bottom: 1px solid var(--line); align-items: center; }
.setup-top .setup-name { font-size: 15px; text-transform: uppercase; letter-spacing: .16em; }
.setup-top .rail-place { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 14px; text-transform: uppercase; letter-spacing: .14em; cursor: pointer; }
.setup-top .rail-place:hover { border-color: var(--ink); }
.setup-top .rail-place-swap { color: var(--muted); }
.setup-top .link { white-space: nowrap; }
.setup-top .me { width: auto; margin: 0; }
.setup-top .me-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.setup-top .me-chip:hover { border-color: var(--ink); }
.setup-top .me-dot { width: 28px; height: 28px; background: var(--ink); color: #fff; font-size: 12px; }
.setup-top .me-level { color: var(--muted); }
.setup-top .me-out { color: var(--ink); border: 0; padding: 0; margin: 0; width: auto; font-size: 11px; }
.setup-main { width: min(760px, 100%); margin: 0 auto; padding: 32px 24px 60px; display: flex; flex-direction: column; gap: 18px; }
.setup-head h1 { font-size: 34px; margin: 2px 0 0; }
.setup-wait { margin-top: 40px; }
.reg-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.reg-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 20px; border: 1px solid var(--ink); background: var(--card); text-align: left; cursor: pointer; font: inherit; }
.reg-choice b { font-size: 18px; text-transform: uppercase; letter-spacing: .1em; }
.reg-choice:hover:not(:disabled) { background: var(--soft); }
.reg-choice.off { border-color: var(--line); cursor: default; opacity: .6; }
@media (max-width: 700px) { .setup-top { padding: 10px 16px; flex-wrap: wrap; gap: 10px; } .setup-top .me-level { display: none; } .setup-top .off-link, .setup-top .link.small { order: 9; width: 100%; } .setup-main { padding: 20px 16px 40px; } .setup-head h1 { font-size: 26px; } }
@media (max-width: 700px) { .setup-top .me { position: static; } }

/* A board's own iPad (owner, Oct 25): ☰ at the top left, Log in at the bottom left, who's logging at the bottom. */
.floor-head .menu-btn { font-size: 22px; padding: 6px 14px; line-height: 1; }
.board-login { position: fixed; left: 16px; bottom: 16px; z-index: 40; background: var(--bg); }
.board-menu .pick-row { min-height: 56px; }
.actor-chip { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 70; display: flex; gap: 12px; align-items: center; background: var(--ink); color: #fff; padding: 10px 16px; font-size: 14px; }
.actor-chip .link { color: #fff; text-decoration: underline; }
.view-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.view-main { width: 100%; max-width: 1180px; margin: 0 auto; }

/* Phones and iPads (owner, Oct 25): the areas behind ☰, a drawer from the left; the page gets the whole screen. */
.shell.touch { flex-direction: column; }
.touch-top { position: sticky; top: 0; z-index: 30; gap: 12px; align-items: center; padding: 10px 16px; background: var(--rail); }
.touch-top .menu-btn { font-size: 22px; padding: 6px 14px; line-height: 1; background: none; color: #fff; border-color: #555; }
.touch-top { flex: none; height: 60px; box-sizing: border-box; flex-wrap: nowrap; }
.touch-top .touch-mark .brand-logo.rail { width: auto; height: 44px; max-width: 120px; object-fit: contain; }
.shell.touch > main { flex: 1; }
.touch-top .touch-mark .brand-word.rail { color: #fff; width: auto; padding: 0; }
/* The mark's size class is "rail", which also picks up the desktop rail's box (background, column, padding): on a touch
   screen without a logo that drew a full-height black box (owner OK Nov 7). The word alone, in the header and drawer. */
.touch-top .touch-mark .brand-word.rail, .nav-drawer .brand-word.rail { background: none; display: block; position: static; height: auto; min-height: 0; flex: none; overflow: visible; }
.touch-top .touch-mark .brand-logo.rail, .nav-drawer .brand-logo.rail { background: none; padding: 0; position: static; }
/* Side sheets open below the touch header (it's sticky on top), so their Done button isn't hidden under it (owner OK Nov 7). */
body:has(.shell.touch) .sheet-wrap { top: 60px; }
.touch-top .touch-where { color: #BDBDB8; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.nav-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(20, 22, 24, .45); display: flex; }
.nav-drawer { width: min(340px, 86vw); height: 100%; overflow-y: auto; background: var(--rail); color: #fff; display: flex; flex-direction: column; gap: 4px; padding: 16px; box-shadow: 8px 0 30px rgba(0,0,0,.25); }
.nav-drawer-top { align-items: center; margin-bottom: 8px; }
.nav-drawer .brand-logo.rail { width: auto; height: 44px; max-width: 140px; object-fit: contain; }
.nav-drawer > * { flex: none; }
.nav-drawer-top .btn { background: none; color: #fff; border-color: #555; }
.nav-drawer .nav-off { background: none; border: 0; text-align: left; padding: 8px 12px; }
.nav-drawer .rail-place { width: 100%; flex-direction: row; justify-content: space-between; margin: 0 0 8px; padding: 10px 12px; border: 1px solid #555; color: #fff; background: none; font: inherit; }
.nav-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1px solid transparent; background: none; color: #D9D6CF; font: inherit; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-align: left; cursor: pointer; }
.nav-row.on { border-color: #fff; color: #fff; }
.nav-row svg { flex: none; }
.nav-drawer .me { width: auto; justify-content: flex-start; margin-top: 12px; }
.nav-drawer .me-chip { flex-direction: row; width: auto; padding: 8px 12px; border: 1px solid #555; background: none; color: #fff; gap: 10px; }
.nav-drawer .me-out { border: 0; padding: 0; margin: 0; }
.nav-off { color: #BDBDB8; margin-top: 8px; }
.shell.touch main { padding-top: 20px; }
.nav-drawer .me { position: static; }

/* Time off: a month a page, Sunday first; a day's cell says what it is (not open, blacked out, yours, who's off). */
.cal-head { align-items: center; margin-bottom: 8px; }
.cal-head h3 { margin: 0; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: 11px; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .1em; padding: 4px 0; }
.cal-cell { min-height: 64px; padding: 6px; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font: inherit; text-align: left; overflow: hidden; }
button.cal-cell { cursor: pointer; }
.cal-cell.blank { border: 0; background: none; }
.cal-num { font-size: 13px; font-weight: 600; }
.cal-cell.locked { background: var(--soft); color: var(--muted); }
.cal-cell.shut { background: repeating-linear-gradient(45deg, var(--soft), var(--soft) 6px, var(--bg) 6px, var(--bg) 12px); }
.cal-cell.closed { background: var(--line); color: var(--muted); }
.cal-cell.closed .cal-tag { color: var(--ink); font-weight: 600; }
.cal-cell.sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.cal-cell.mine.pending, .cal-cell.waiting { box-shadow: inset 0 0 0 2px #C9A227; }
.cal-cell.mine.approved { background: #E3EFE6; }
.cal-cell.today { border-color: var(--ink); }
.cal-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cal-name { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-name.pending { color: #8A5A00; }
/* Each person's colour (owner, Oct 25): a tinted chip with a solid edge; waiting ones dashed. */
.cal-name[style*="--who"] { display: block; padding: 1px 4px; margin-top: 2px; border-left: 3px solid var(--who); background: color-mix(in srgb, var(--who) 32%, #fff); color: var(--ink); border-radius: 2px; }
.cal-name.pending[style*="--who"] { border-left-style: dashed; background: #fff; outline: 1px dashed var(--who); outline-offset: -1px; color: #8A5A00; }
.tf-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--who); margin-right: 6px; vertical-align: 1px; }
.tf-tally-box input[type=search] { width: 100%; margin: 6px 0 4px; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font-size: 14px; }
.tf-tally .th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.tf-tally .th-sort.on { color: var(--ink); font-weight: 700; }
.tf-top { margin-bottom: 12px; }
.tf-tally { width: 100%; border-collapse: collapse; font-size: 13px; }
.tf-tally th { text-align: right; font-size: 11px; color: var(--muted); font-weight: 500; padding: 4px; }
.tf-tally th:first-child, .tf-tally td:first-child { text-align: left; }
.tf-tally td { padding: 6px 4px; border-top: 1px solid var(--line); }
.tf-tally td.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .cal-cell { min-height: 48px; padding: 4px; } .cal-name { font-size: 10px; } }
/* Time off: picking who a name on the old sheet is; a manager's Add time off. */
.tf-pick { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.tf-pick select { width: 100%; }
.tf-add select, .tf-add input[type=text] { width: 100%; }
.tf-add { display: flex; flex-direction: column; gap: 8px; }
.tf-add input[type=date] { min-width: 0; flex: 1; }
.tf-add input[type=date] { font-size: 14px; padding: 0 6px; }
/* The rail on a laptop (owner, Oct 25: with Team it's too many): tighter as the screen gets shorter, so every
   area fits without scrolling. Phones and iPads have ☰ instead. */
@media (min-width: 701px) and (max-height: 940px) {
  .rail { gap: 1px; padding-top: 6px; padding-bottom: 8px; }
  .rail button { padding: 6px 0 5px; gap: 3px; }
  .rail .logo img, .rail img.brand-logo { max-height: 64px; }
  .rail .me-chip { padding: 5px 0; gap: 2px; }
}
@media (min-width: 701px) and (max-height: 800px) {
  .rail button { padding: 4px 0 3px; gap: 2px; font-size: 9.5px; }
  .rail button svg { width: 18px; height: 18px; }
  .rail .logo img, .rail img.brand-logo { max-height: 48px; }
  .rail > .logo { margin-bottom: 2px; }
}
@media (min-width: 701px) and (max-height: 800px) {
  .rail .me-chip .me-level { display: none; }
  .rail .me-chip { padding: 3px 0; }
}
/* Shorter still (a 720-tall laptop): the names alone. */
@media (min-width: 701px) and (max-height: 760px) {
  .rail button svg { display: none; }
  .rail button { padding: 7px 0 6px; }
  /* No icon to sit on: the count becomes a dot in the corner, clear of the name. */
  .rail .rail-badge { min-width: 8px; height: 8px; padding: 0; font-size: 0; top: 3px; right: 3px; }
}
.tf-tally td:first-child { white-space: nowrap; }
/* The schedule on time off (owner, Oct 25). */
.warn-box { background: var(--caution-soft); border: 1px solid var(--caution-line); color: var(--caution); padding: 10px 12px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell.working { box-shadow: inset 3px 0 0 var(--caution-mark); }
.cal-on { display: block; font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.cal-name.clash { outline: 1.5px solid var(--caution-mark); outline-offset: -1px; font-weight: 700; }
.cal-cell.sel .cal-tag { color: #fff; }
.tag-btn { border: 0; cursor: pointer; font-family: inherit; }
.tag-btn:hover { text-decoration: underline; }
/* Team › Staffing (owner, Oct 25). */
.grid-scroll { overflow-x: auto; margin-top: 10px; }
.need-grid, .train-grid { border-collapse: collapse; font-size: 13px; }
.need-grid th, .train-grid th { font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 6px; text-align: center; white-space: nowrap; }
.need-grid tbody th, .train-grid tbody th { text-align: left; color: var(--ink); font-size: 13px; }
.need-grid td, .train-grid td { padding: 3px 4px; text-align: center; border-top: 1px solid var(--line); }
.need-in { width: 3.2em; height: 32px; text-align: center; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.need-grid .side-boh, .train-grid .side-boh { background: color-mix(in srgb, var(--series-4) 7%, transparent); }
.need-grid .side-lead, .train-grid .side-lead { background: color-mix(in srgb, var(--series-3) 7%, transparent); }
.train-grid th.who { min-width: 140px; max-width: 220px; font-weight: 500; white-space: normal; }
.train-grid th.who .jobs { overflow-wrap: anywhere; }
.train-grid th.vert { writing-mode: vertical-rl; transform: rotate(180deg); height: 90px; vertical-align: bottom; }
.train-grid td.gap, .train-grid th.gap { width: 14px; border: 0; background: none; }
.train-grid td.guessed input { opacity: .55; }
.train-grid input[type=checkbox] { width: 18px; height: 18px; }
.avail-note { width: 130px; height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; font-size: 13px; }
.cal-staff { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; }
.cal-staff.short { background: var(--problem-soft); color: var(--problem); }
.cal-staff.tight { background: var(--caution-soft); color: var(--caution); }
.cal-cell.staff-short { box-shadow: inset 0 -3px 0 var(--problem); }
.cal-cell.staff-tight { box-shadow: inset 0 -3px 0 var(--caution-mark); }
.staff-line.short { color: var(--problem); font-weight: 600; }
.staff-line.tight { color: var(--caution); font-weight: 600; }
.staff-key { margin-top: 10px; gap: 6px; align-items: center; color: var(--muted); }
/* Staff on their own phones (owner, Oct 25). */
.qr-box svg { display: block; max-width: 100%; height: auto; }
.qr-box { background: #fff; padding: 6px; border-radius: 8px; width: fit-content; margin: 8px auto; }
.small-qr { margin: 0; }
.phone-link { align-items: flex-start; gap: 16px; }
.phone-join label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.phone-join label.tick-row { flex-direction: row; align-items: center; }
.tick-row input[type=checkbox] { width: 22px; height: 22px; flex: none; }
.phone-out { font-size: 14px; }
.phone-join select, .phone-join input[type=password] { height: 44px; font-size: 16px; }
.phone-shell main { padding: 16px; max-width: 620px; margin: 0 auto; }
.phone-row { width: 100%; text-align: left; }
.block { display: block; }
.phone-h { margin: 18px 0 8px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.phone-day { gap: 10px; font-size: 16px; padding: 6px 0; }
.phone-day input[type=checkbox] { width: 22px; height: 22px; }
.phone-day { align-items: center; border-top: 1px solid var(--line); } .phone-day:first-child { border-top: 0; }
.phone-day input[type=time] { width: 120px; }
.phone-day .seg button { padding: 0 12px; }
.day-add { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Dark, on a board's iPad (owner, Oct 25: the dining room is dim). The same tokens, turned down; the status colours keep
   their meaning (green good, yellow caution, red a problem), lightened to read on dark. Only set by boardTheme(). */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121314; --card: #1C1E20; --ink: #ECEAE6; --muted: #A4A8AE; --line: #34373B; --soft: #25282B;
  --link: #8FB6F2; --rail: #0B0C0D;
  --good: #7ACB98; --good-soft: #1C3124; --good-line: #2C4B37;
  --caution: #E9C46A; --caution-mark: #D4A017; --caution-soft: #362C12; --caution-line: #5A4A1E;
  --problem: #F28B82; --problem-soft: #3B1C19; --problem-line: #5E2B26;
}
html[data-theme="dark"] :is(input, select, textarea, .tip, .check, .crumb, .notice-text, input.search, .search-big, pre.order-text) { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .btn.dark, html[data-theme="dark"] .btn.blue, html[data-theme="dark"] .pinpad button.go { background: var(--ink); border-color: var(--ink); color: #121314; }
html[data-theme="dark"] .names button:hover { background: var(--soft); color: var(--ink); }
html[data-theme="dark"] .me-dot { background: var(--ink); color: #121314; }
html[data-theme="dark"] .cal-name.pending[style*="--who"] { background: var(--card); }
html[data-theme="dark"] .cal-cell.sel { color: #121314; }
html[data-theme="dark"] img { opacity: .92; }
.test-form { padding: 10px 0; border-top: 1px solid var(--line); }
.test-form input[type=text] { height: 40px; max-width: 220px; }
.tests-grid td { text-align: left !important; }
.tests-grid th { text-align: left !important; }

/* Tables & seats (owner, Oct 25): the floor plan, seat numbers, the quiz. Seats are ink, where you stand teal, a seat
   asked about purple; right and wrong are the status colours. */
.fplan { display: block; width: 100%; height: auto; max-width: 100%; }
.fplan.up-close { max-height: min(42vh, 380px); width: auto; margin: 0 auto; }
.fp-wall { fill: none; stroke: var(--ink); stroke-width: 6; }
.fp-room { fill: var(--muted); font-size: 64px; letter-spacing: .2em; text-anchor: middle; font-family: inherit; }
.fp-shape { fill: var(--card); stroke: var(--ink); stroke-width: 3; }
.fp-name { fill: var(--ink); text-anchor: middle; dominant-baseline: central; font-family: inherit; pointer-events: none; }
.fp-name.start { text-anchor: start; }
.fp-hit { fill: transparent; }
.fp-tap { cursor: pointer; }
.fp-tap:hover .fp-shape { fill: var(--soft); }
.fp-tap:focus-visible { outline: 3px solid var(--link); }
.fp-table.pick .fp-shape { stroke: var(--series-3); stroke-width: 9; }
.fp-table.good .fp-shape { fill: var(--good); } .fp-table.good .fp-name { fill: var(--card); }
.fp-table.bad .fp-shape { fill: var(--problem); } .fp-table.bad .fp-name { fill: var(--card); }
.fp-seat circle { fill: var(--ink); }
.fp-seat text { fill: var(--card); font-weight: 600; text-anchor: middle; dominant-baseline: central; font-family: inherit; pointer-events: none; }
.fp-seat.blank circle { fill: var(--card); stroke: var(--ink); stroke-width: 4; }
.fp-seat.fp-tap:hover circle { stroke-width: 8; }
.fp-seat.mark circle { fill: var(--series-3); }
.fp-seat.good circle { fill: var(--good); } .fp-seat.bad circle { fill: var(--problem); }
.fp-you { fill: var(--series-4); }
.seat-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 16px; align-items: start; }
.seat-stage.full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 620px) { .seat-stage { grid-template-columns: minmax(0, 1fr); } .seat-where { max-width: 240px; } }
.seat-where { display: flex; flex-direction: column; gap: 6px; }
.seat-choices { grid-template-columns: repeat(4, minmax(0, 72px)); }
.seat-choices .quiz-option { text-align: center; font-size: 20px; font-weight: 600; }
.seat-rules { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.seat-preview { max-width: 640px; }

/* Team › Training › Roles (owner, Oct 26) */
.tr-role { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tr-role:last-child { border-bottom: 0; padding-bottom: 0; }
.tr-role h3 { margin: 0; }
.tr-names { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-guess { opacity: .55; }
.tr-row { align-items: center; padding: 6px 0; }
.tr-start select { min-width: 160px; }
.tr-bar { height: 6px; background: var(--line); position: relative; min-width: 80px; }
.tr-bar span { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.tr-mini { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-width: 360px; }
.tr-who { text-align: left; display: block; }
.tr-step { align-items: baseline; gap: 10px; padding: 4px 0; }
.tr-kind { width: 96px; flex: none; }
.tr-title { text-align: left; }
.tr-shift { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; border-top: 1px solid var(--line); }
.tr-shift.done { opacity: .75; }
.tr-final { border-top: 1px solid var(--line); padding-top: 12px; align-items: center; }
.tr-form { border: 1px solid var(--line); padding: 12px; background: var(--card); }
.tr-form textarea { width: 100%; }
.lesson-text { display: flex; flex-direction: column; gap: 10px; max-width: 68ch; line-height: 1.55; }
.lesson-text p { margin: 0; }
.lesson-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.lesson-list li.sub { margin-left: 18px; list-style: circle; }
.tr-tick { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; text-align: left; font-weight: 400; cursor: pointer; }
.tr-tick input { margin-top: 3px; flex: none; }

/* Team › Training › Selling (owner, Oct 26) */
.sell-row { border-top: 1px solid var(--line); }
.sell-row:first-child { border-top: 0; }
.sell-row.look { box-shadow: inset 3px 0 0 var(--caution-mark); }
.sell-head { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(5, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 12px 8px; }
.sell-head:focus-visible { outline: 2px solid var(--link); }
.sell-name { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sell-num { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .sell-head { grid-template-columns: 1fr 1fr; } .sell-name { grid-column: 1 / -1; } }
.sell-more { padding: 0 8px 14px; }
.sell-kinds { border-collapse: collapse; max-width: 460px; font-variant-numeric: tabular-nums; }
.sell-kinds th, .sell-kinds td { text-align: right; padding: 4px 10px; border-bottom: 1px solid var(--line); }
.sell-kinds th:first-child, .sell-kinds td:first-child { text-align: left; padding-left: 0; }
.sell-kinds tr.weak td { font-weight: 600; }
label.sell-cat { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; font-weight: 400; }

.sell-d { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.sell-d.up { color: var(--good); } .sell-d.down { color: var(--problem); } .sell-d.level { color: var(--muted); font-weight: 400; }
.sell-house { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sell-kinds { display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.sell-kinds .weak { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Team › Schedule (owner, Oct 26): Week, the day's bars, People, the set-up bar. */
.sched-setup { padding: 0; gap: 0; }
.sched-setup-head { all: unset; box-sizing: border-box; display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px 16px; cursor: pointer; }
.sched-setup-head:focus-visible { outline: 2px solid var(--link); }
.sched-setup.open .sched-setup-head { border-bottom: 1px solid var(--line); }
.sched-setup .cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding: 12px 16px; }
.sched-scroll { overflow-x: auto; }
.sched-week { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-width: 640px; }
.sched-week > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px; min-width: 0; }
.sched-corner { background: var(--soft); }
.sched-day { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--soft); cursor: pointer; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sched-day:hover { background: var(--line); } .sched-day:focus-visible { outline: 2px solid var(--link); }
.sched-day.today { box-shadow: inset 0 3px 0 var(--ink); }
.sched-day .tag { align-self: flex-start; }
.sched-role { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; display: flex; align-items: center; }
.sched-cell { display: flex; flex-direction: column; gap: 4px; }
.sched-pill { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; padding: 3px 6px; border-left: 3px solid var(--who); background: var(--soft); }
.sched-pill.clash { text-decoration: line-through; color: var(--problem); }
.sched-miss { font-size: 12px; color: var(--problem); border: 1px dashed var(--problem); padding: 3px 6px; }
.sched-off { font-size: 12.5px; padding: 3px 6px; border-left: 3px solid var(--who); }
.sched-off.approved { background: var(--problem-soft); color: var(--problem); }
.sched-off.pending { border: 1px dashed var(--caution-mark); border-left: 3px solid var(--who); color: var(--caution); }
.sched-stat { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--line); } .sched-stat:last-child { border-bottom: 0; }
.sched-tl { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.sched-axis { position: relative; height: 18px; margin-left: 120px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.sched-axis span { position: absolute; transform: translateX(-50%); }
.sched-grp { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: 6px; }
.sched-lane { display: grid; grid-template-columns: 120px 1fr; align-items: center; min-height: 26px; }
.sched-who { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-track { position: relative; height: 20px; }
.sched-bar { position: absolute; top: 0; height: 20px; background: var(--who); color: #fff; font-size: 11px; padding: 2px 6px; white-space: nowrap; overflow: hidden; }
.sched-bar.off { background: var(--problem-soft); color: var(--problem); text-decoration: line-through; }
.pg { display: grid; min-width: 820px; }
.pg > * { height: 30px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); font-size: 11px; }
.pg-h { flex-direction: column; height: 38px; color: var(--muted); line-height: 1.1; font-size: 10.5px; }
.pg-h.today { color: var(--ink); font-weight: 700; }
.pg-name { justify-content: flex-start; gap: 6px; padding-left: 4px; font-size: 13px; border-right: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.pg-c { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 30px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pg-c:focus-visible { outline: 2px solid var(--link); }
.pg-c.closed, .pg-h.closed { background: var(--soft); cursor: default; }
.pg-c.shut { background: repeating-linear-gradient(45deg, transparent 0 5px, var(--soft) 5px 10px); }
.pg-on { width: 84%; height: 20px; display: grid; place-items: center; background: var(--ink); color: var(--card); font-weight: 600; }
.pg-off { width: 84%; height: 20px; display: grid; place-items: center; background: var(--problem-soft); border: 1px solid var(--problem); color: var(--problem); }
.pg-ask { width: 84%; height: 20px; display: grid; place-items: center; border: 1px dashed var(--caution-mark); color: var(--caution); }
.pg-n { font-weight: 600; color: var(--muted); }
.pg-key { align-items: center; gap: 6px 10px; } .pg-key .pg-on, .pg-key .pg-off, .pg-key .pg-ask { width: 22px; display: inline-grid; } .pg-key-box { width: 22px; height: 16px; border: 1px solid var(--line); display: inline-block; }
.sched-pill { flex-direction: column; justify-content: flex-start; gap: 0; line-height: 1.25; padding: 3px 7px; }
.sched-pill .sched-who { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sched-pill .sched-hrs { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-h span { line-height: 1.15; }

/* Team layout (owner, Oct 26): set-up bars, view-first grids, numbers down the right. */
.setup-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; }
.setup-body > .card { border: 0; padding: 0; box-shadow: none; background: none; }
.setup-body .cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.st-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line); box-sizing: border-box; vertical-align: middle; }
.st-dot.on { background: var(--ink); border-color: var(--ink); }
.st-dot.on.guessed { background: var(--muted); border-color: var(--muted); opacity: .55; }
.train-grid.view td { padding: 6px 4px; }
.st-cov { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 10px; align-items: center; }
.st-cov-cell { min-width: 0; font-variant-numeric: tabular-nums; }
.st-cov-cell.short, .st-cov-cell.short .muted { color: var(--problem); font-weight: 600; }
.st-cov-cell.tight, .st-cov-cell.tight .muted { color: var(--caution); font-weight: 600; }
.tr-bars { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; gap: 6px 10px; align-items: center; }
.tr-bars > .small:first-child, .tr-bars > .small:nth-child(3n+1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.tr-bar { position: relative; display: flex; height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.tr-bar .n { background: var(--series-1); border-radius: 4px 0 0 4px; }
.tr-bar .now { background: color-mix(in srgb, var(--series-1) 35%, transparent); margin-left: 2px; }
.chart-svg.spark .tick { font-size: 13px; } .chart-svg.spark .direct { font-size: 14px; }
.page-side .chart { max-width: none; }
.sched-setup-head .grow { flex: 1; min-width: 0; }
.sell-look { align-items: flex-start; }
.st-key { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.st-key .st-dot:not(:first-child) { margin-left: 10px; }
.tf-lines { display: flex; flex-direction: column; }
.tf-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.tf-line:first-child { border-top: 0; }
.tf-line .tf-why { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-line .tag { flex: none; }
@media (max-width: 640px) { .tf-line { flex-wrap: wrap; row-gap: 2px; } .tf-line .tf-why { flex-basis: 100%; order: 9; white-space: normal; } }
.tag.sick { background: var(--caution-soft); color: var(--caution); }
.cal-name.sick { font-style: italic; }
.cal-name.sick::after { content: ' · sick'; font-style: normal; color: var(--muted); }
.tf-add .seg { display: flex; } .tf-add .seg button { flex: 1; }

/* Team › Hiring › Interviews (owner, Oct 26): the list, the templates, one interview beside the resume. */
.hire-line { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.hire-line:first-child { border-top: 0; }
.hire-line:hover .strong { text-decoration: underline; } .hire-line:focus-visible { outline: 2px solid var(--link); }
.hire-date { min-width: 96px; }
.hire-qs { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5; }
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hire-new input[type=text], .hire-new select { width: 100%; box-sizing: border-box; }
.hire-top { gap: 12px; margin-bottom: 12px; }
.hire-top .hire-name { font-size: 22px; font-weight: 600; min-width: 220px; flex: 1 1 260px; max-width: 420px; }
.hire-top .hire-pos { min-width: 160px; flex: 0 1 220px; }
.hire-split { display: grid; grid-template-columns: minmax(0, var(--hire-left, 50%)) 12px minmax(0, 1fr); gap: 4px; align-items: start; }
.hire-left { gap: 12px; }
.hire-qlist { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 16px; }
.hire-q { display: flex; flex-direction: column; gap: 6px; }
.hire-q::marker { font-weight: 600; }
.hire-a, .hire-notes { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.45; resize: vertical; }
.hire-q-in { width: 100%; box-sizing: border-box; font-weight: 600; }
.hire-right { position: sticky; top: 64px; }
.hire-resume { display: flex; flex-direction: column; gap: 8px; }
.hire-doc { width: 100%; height: calc(100vh - 140px); min-height: 480px; border: 1px solid var(--line); border-radius: 4px; background: #fff; object-fit: contain; object-position: top; }
img.hire-doc { height: auto; max-height: calc(100vh - 140px); }
.hire-resume.empty { align-items: flex-start; }
.hire-outcome button.on.o-yes { background: var(--good); border-color: var(--good); color: #fff; }
.hire-outcome button.on.o-maybe { background: var(--caution-mark); border-color: var(--caution-mark); color: #1C1F22; }
.hire-outcome button.on.o-no { background: var(--problem); border-color: var(--problem); color: #fff; }
@media (max-width: 900px) { .hire-split { grid-template-columns: 1fr; } .hire-right { position: static; order: -1; } .hire-doc { height: 70vh; } }
.hire-upload { justify-content: flex-start; align-self: flex-start; }
.file-btn { display: inline-flex; align-items: center; }
.hire-new select { max-width: none; }
@media (max-width: 900px) { .hire-doc { height: 45vh; min-height: 320px; } }
.hire-qlist { list-style: decimal; }
.hire-q::marker { color: var(--muted); }
.hire-left > .link { align-self: flex-start; }
/* ---- Hiring › Resumes (owner, Oct 26): the list, a resume's sheet, and the scanner over the whole screen. ---- */
.rs-hide { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
label.rs-file, label.rs-pick { position: relative; display: inline-flex; align-items: center; justify-content: center; }
label.rs-file:focus-within, label.rs-pick:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.rs-line { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding-left: 0; padding-right: 0; }
.rs-line:hover .rs-name { text-decoration: underline; }
.rs-date { flex: none; width: 92px; font-variant-numeric: tabular-nums; }
.rs-name { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-iv { flex: none; }
.rs-none { padding: 8px 0; }
.rs-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.rs-counts .sched-stat { border-bottom: 0; }
@media (max-width: 640px) { .rs-date { width: auto; } .rs-name { max-width: none; } }
.rs-view { border: 1px solid var(--line); background: var(--soft); }
.rs-doc { display: block; width: 100%; height: min(70vh, 760px); border: 0; object-fit: contain; background: #fff; }
img.rs-doc { height: auto; max-height: 70vh; }
.rs-form { max-width: 420px; }
.rs-form .seg { align-self: flex-start; }
.rs-form input[type=date] { align-self: flex-start; }
/* The scanner: over everything (the phone's top bar too, at the same level but later), scrolling by itself; its own
   questions (floor-modal, also 30) come later again, so on top. */
body:has(.rs-scan) .capture-corner { display: none; }
.rs-scan { position: fixed; inset: 0; z-index: 30; background: var(--bg); overflow-y: auto; display: flex; flex-direction: column; padding: 14px 20px calc(24px + env(safe-area-inset-bottom)); gap: 12px; box-sizing: border-box; }
.rs-scan.working { cursor: progress; }
.rs-scan.working .rs-scan-body { pointer-events: none; opacity: .6; }
.rs-scan-top { position: sticky; top: -14px; background: var(--bg); padding: 6px 0; z-index: 2; }
.rs-scan-top h2 { font-size: 22px; }
.rs-status:not(:empty)::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink); vertical-align: -2px; animation: rs-spin .8s linear infinite; }
@keyframes rs-spin { to { transform: rotate(360deg); } }
.rs-scan-body { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 1180px; margin: 0 auto; }
.rs-start { max-width: 560px; margin: 8vh auto 0; text-align: center; align-items: center; }
.rs-start p { font-size: 17px; margin: 0; }
.rs-start .row { justify-content: center; }
.rs-tools { align-items: center; }
.rs-stage { display: flex; justify-content: center; width: 100%; }
.rs-edit { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; background: #000; }
.rs-photo { display: block; }
.rs-handles { position: absolute; inset: 0; touch-action: none; cursor: crosshair; overflow: visible; }
.rs-quad { fill: rgba(255, 255, 255, .12); stroke: #ff3b30; stroke-width: 2.5; stroke-linejoin: round; }
.rs-hit { fill: transparent; }
.rs-dot { fill: rgba(255, 255, 255, .85); stroke: #ff3b30; stroke-width: 3; }
.rs-knob.on .rs-dot { fill: #ff3b30; stroke: #fff; }
.rs-loupe { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.4); pointer-events: none; }
.rs-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.rs-pages.one { grid-template-columns: minmax(0, 560px); justify-content: center; }
.rs-page { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rs-page-head { flex-wrap: wrap; }
.rs-page-head > .strong { white-space: nowrap; flex: 1 0 auto; }
.rs-left { align-self: flex-start; text-align: left; }
@media (max-width: 480px) { .rs-more { display: none; } }
.rs-page .seg button { height: 34px; padding: 0 10px; font-size: 13px; }
.rs-sheet canvas, .rs-thumb canvas { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); border: 1px solid var(--line); }
.rs-foot { border-top: 1px solid var(--line); padding-top: 12px; }
.rs-file-step { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.rs-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.rs-thumbs:has(> :only-child) { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .rs-scan { padding-left: 16px; padding-right: 16px; }
  .rs-file-step { grid-template-columns: 1fr; }
  .rs-file-step .rs-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-pages { grid-template-columns: 1fr; }
}
@media (max-width: 700px) { .rs-file-step .rs-thumbs:has(> :only-child) { max-width: 180px; } }

/* Compact (owner, Oct 26: "shrink all the buttons … about 3/4 of the size"): buttons, chips, switches, boxes and
   lists of choices about ¾ of their size, everywhere but the service boards, kitchen and prep iPads, the PIN pad
   and staff phones (body.compact is set by the app's shell for a person signed in as themselves). */
body.compact .btn { height: 33px; padding: 0 13px; }
body.compact .btn.small-btn { height: 30px; padding: 0 10px; font-size: 11px; }
body.compact .btn, body.compact .chip, body.compact .seg button { font-size: 11.5px; letter-spacing: .08em; }
body.compact .chip { height: 30px; padding: 0 11px; gap: 6px; }
body.compact .seg button { height: 30px; padding: 0 12px; }
body.compact .tag-button { min-height: 26px; padding: 3px 8px; }
body.compact .check.small { width: 30px; height: 30px; font-size: 16px; }
body.compact .stepper .btn { font-size: 15px; }
body.compact .stepper input.amount { height: 33px; width: 56px; }
body.compact input[type=text], body.compact input[type=email], body.compact input[type=password], body.compact input[type=search],
body.compact input[type=number], body.compact input[type=tel], body.compact input[type=url], body.compact input[inputmode=numeric],
body.compact input.search, body.compact input.amount, body.compact input.short {
  height: 36px; padding: 0 11px;
}
/* 16px text in boxes stays: smaller and iPhones and iPads zoom the page in when one is tapped. */
body.compact select, body.compact input[type=date], body.compact input[type=time] { height: 34px; padding: 0 8px; }
@media (pointer: coarse) { body.compact input, body.compact select, body.compact textarea { font-size: 16px; } }
body.compact .irow input, body.compact .editor label input, body.compact .trow input[type=text], body.compact .editrow input[type=text] { height: 36px; }
body.compact .irow select, body.compact .editor select { height: 36px; }
body.compact .book-item { min-height: 36px; padding: 8px 0; }
body.compact .others summary, body.compact .settings summary { min-height: 36px; padding: 6px 0; }
body.compact .chips-row { gap: 6px; }
body.compact .sched-setup-head { padding: 9px 14px; }
body.compact .help-q, body.compact .head-gear { width: 34px; height: 34px; font-size: 16px; }
body.compact .head-gear svg { width: 17px; height: 17px; }
body.compact .capture-corner .cam-chip .me-dot { width: 30px; height: 30px; }
body.compact .capture-corner .cam-chip .me-dot .cam-icon { width: 17px; height: 17px; }
body.compact .cam-chip .me-out { font-size: 11.5px; }

/* Staff phones (owner, Oct 26): For you now, Today, Your shifts, the rest folded. */
.ph-hi { margin-bottom: 4px; }
.ph-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); }
.ph-card.tap { cursor: pointer; } .ph-card.tap:active { background: var(--soft); }
.ph-card.ok { border-left-color: var(--good); } .ph-card.no { border-left-color: var(--problem); }
.ph-card.late { border-left-color: var(--problem); } .ph-card.late .small { color: var(--problem); }
.ph-card.due { border-left-color: var(--caution-mark); } .ph-card.train { border-left-color: var(--series-1); }
.ph-card .progress { margin-top: 6px; }
.ph-calm { padding: 4px 0; }
.ph-wait { margin-top: 6px; }
.ph-today { gap: 10px; }
.ph-note { padding-left: 10px; border-left: 3px solid var(--ink); display: flex; flex-direction: column; gap: 2px; }
.ph-picks { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.ph-next { gap: 6px; }
.ph-when { font-size: 22px; }
.ph-with { display: flex; flex-direction: column; gap: 3px; }
.ph-mate { font-size: 13px; padding: 3px 8px; background: var(--soft); }
.ph-days { display: flex; flex-direction: column; margin-top: 8px; background: var(--card); border: 1px solid var(--line); }
.ph-day { border-top: 1px solid var(--line); } .ph-day:first-child { border-top: 0; }
.ph-day.off { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ph-dhead { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; cursor: pointer; }
.ph-dhead:focus-visible { outline: 2px solid var(--link); }
.ph-dname { flex: 1; font-weight: 600; }
.ph-more { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.tf-why-day { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell.locked, .cal-cell.shut { cursor: pointer; }
/* Small number boxes (the sample schedule's, tests' counts): room for two digits, the number in the middle. */
body.compact input[type=number] { padding: 0 6px; }
body.compact input.need-in[type=number] { width: 56px; height: 34px; padding: 0 4px; text-align: center; }
.need-in { -moz-appearance: textfield; appearance: textfield; }
.need-in::-webkit-inner-spin-button, .need-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.st-from { font-size: 10.5px; color: var(--muted); line-height: 1.1; margin-top: 2px; white-space: nowrap; }
.train-grid td.day { vertical-align: top; }
.st-from-btn { display: block; margin: 2px auto 0; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 11px; line-height: 1.3; color: var(--muted); white-space: nowrap; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; min-height: 0; min-width: 0; }
.st-from-btn.set { color: var(--ink); font-weight: 600; }
.st-time-box { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.st-time { display: block; width: 86px; height: 26px !important; font-size: 11px !important; padding: 0 2px !important; margin: 3px auto 0; }

/* Interviews (owner, Oct 26): answers by kind, a bar that stays in view, the resume panel resized or enlarged. */
.hire-top { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 8px 0; border-bottom: 1px solid var(--line); }
.hire-status.error { color: var(--problem); }
.hire-divider { align-self: stretch; cursor: col-resize; position: relative; min-height: 200px; touch-action: none; }
.hire-divider::after { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: var(--line); }
.hire-divider:hover::after, .hire-divider:focus-visible::after { background: var(--ink); }
.hire-split.big { grid-template-columns: 1fr; }
.hire-split.big > .hire-left, .hire-split.big > .hire-divider { display: none; }
.hire-back-q { align-self: flex-start; }
.hire-pages { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 150px); overflow-y: auto; }
.hire-split.big .hire-pages { max-height: none; }
.hire-page { width: 100%; height: auto; display: block; border: 1px solid var(--line); background: #fff; }
.hire-split.big .hire-doc { height: calc(100vh - 120px); }
.hire-q.heading { list-style: none; margin-left: -22px; } .hire-q.heading h3 { margin: 8px 0 0; }
.hire-a1 { width: 100%; box-sizing: border-box; }
.hire-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.hire-choice { border: 1px solid var(--line); background: var(--card); padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.hire-choice.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.hire-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.hire-part { display: flex; flex-direction: column; gap: 3px; }
.hire-points { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--soft); }
.hire-point { align-items: flex-start; flex-direction: row; } .hire-point input { margin-top: 3px; flex: none; }
.hire-q.k-points > .strong { color: var(--muted); }
.hire-history { border-collapse: collapse; width: 100%; } .hire-history th { text-align: left; font-size: 12px; color: var(--muted); padding: 2px 4px; }
.hire-history td { padding: 2px 4px 2px 0; } .hire-history input { width: 100%; box-sizing: border-box; min-width: 90px; }
.hire-items { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.hire-item { display: flex; flex-direction: column; gap: 6px; }
.hire-item select { flex: none; width: 150px; }
.hire-item-text { flex: 1 1 260px; min-width: 0; }
.hire-item-opts { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; }
.hire-item.k-heading .hire-item-text { font-weight: 700; }
@media (max-width: 900px) { .hire-split { grid-template-columns: 1fr; } .hire-divider { display: none; } .hire-top { position: static; } }
.hire-parts { align-items: end; }
.hire-q .link.small, .hire-q .stack > .link { align-self: flex-start; }
.hire-q .stack { align-items: stretch; }
.phone-day > label.tick-row { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; flex: 1 1 130px; }
.phone-day > label.tick-row span { font-weight: 600; }
/* The board's Alerts switch, just the bell (owner, Oct 26). */
.btn.alert-switch { font-size: 18px; padding: 0 12px; letter-spacing: 0; min-width: 48px; }
/* The day sheet (owner, Oct 26): its switches top left, the day's state in red beside the date. */
.day-acts { margin: 0; align-items: center; }
.day-title { align-items: center; gap: 10px; }
.day-title .sheet-title { margin: 0; }
.tag.day-shut { background: var(--problem); color: #fff; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.tf-import td { padding: 4px 6px; vertical-align: middle; } .tf-import select { max-width: 180px; }

/* Schedule's charts (owner, Oct 26): the next four weeks, hours this week, time off by month. */
.nw-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.nw-wd { font-size: 10.5px; color: var(--muted); text-align: center; }
.nw-day { all: unset; box-sizing: border-box; aspect-ratio: 1; display: grid; place-items: center; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; background: var(--soft); border: 1px solid transparent; }
.nw-day.ok { background: color-mix(in srgb, var(--good) 22%, var(--card)); }
.nw-day.tight { background: var(--caution-mark); color: #1C1F22; }
.nw-day.short { background: var(--problem); color: #fff; }
.nw-day.shut { background: repeating-linear-gradient(45deg, var(--problem-soft), var(--problem-soft) 4px, var(--card) 4px, var(--card) 8px); border-color: var(--problem); color: var(--problem); }
.nw-day.closed { background: var(--line); color: var(--muted); cursor: default; }
.nw-day.past { opacity: .35; cursor: default; }
.nw-day.today { outline: 2px solid var(--ink); outline-offset: -2px; }
.nw-day:focus-visible { outline: 2px solid var(--link); }
.nw-sum { display: flex; flex-wrap: wrap; gap: 10px; }
.nw-k::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 4px; vertical-align: -1px; }
.nw-k.short::before { background: var(--problem); } .nw-k.tight::before { background: var(--caution-mark); } .nw-k.shut::before { border: 1px solid var(--problem); background: var(--problem-soft); }
.hb { display: flex; flex-direction: column; gap: 5px; }
.hb-row { display: grid; grid-template-columns: minmax(0, 92px) 1fr 34px; gap: 8px; align-items: center; font-size: 12.5px; }
.hb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { position: relative; height: 10px; background: var(--soft); }
.hb-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--series-1); }
.hb-row.over .hb-bar { background: var(--problem); } .hb-row.over .hb-n { color: var(--problem); font-weight: 600; }
.hb-40 { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); }
.hb-n { text-align: right; font-variant-numeric: tabular-nums; }
.hb-key { display: inline-block; width: 2px; height: 10px; background: var(--ink); vertical-align: -1px; }
.tm-chart { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; height: 110px; align-items: end; }
.tm-col { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.tm-stack { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.tm-off { background: var(--series-1); } .tm-sick { background: var(--caution-mark); }
.tm-col.ahead .tm-off, .tm-col.ahead .tm-sick { opacity: .45; }
.tm-col.now .tm-m { font-weight: 700; color: var(--ink); }
.tm-m { font-size: 10px; color: var(--muted); }
.tm-key .k { display: inline-block; width: 9px; height: 9px; vertical-align: -1px; } .tm-key .k.off { background: var(--series-1); } .tm-key .k.sick { background: var(--caution-mark); }

/* A line's Merge… under its ingredient (owner, Oct 27): there when a duplicate turns up, quiet otherwise. */
.core-esub { margin: -2px 0 4px; }
.core-esub .core-emerge { font-size: 12px; padding: 0; min-height: 0; color: var(--muted); }
.core-esub .core-emerge:hover { color: var(--ink); }

/* A request on their usual days (owner, Oct 27): worth a look, not a warning. */
.usual-text { color: var(--ink); font-weight: 600; }

/* An ingredient's deliveries (owner, Oct 27): date, as printed, total and per unit, a tap from the invoice. */
.core-delivery { display: grid; grid-template-columns: 56px 1fr auto 12px; gap: 10px; align-items: center; text-align: left; }
.core-delivery .num { text-align: right; }
/* v0.2 Menu: a dish is a Square item, and a dish has a recipe (owner, Oct 27). Each row's two halves, On Square and
   Recipe, with a small arrow between; numbers on the right. Narrow, the recipe half goes under the Square half. */
.dish-halves { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; }
.dish-arrow { color: var(--muted); font-size: 14px; padding-top: 2px; text-align: center; }
.dish-sq, .dish-rc, .dish-sq-cell { display: grid; gap: 2px; min-width: 0; align-content: start; }
.dish-rc .linkish.strong, .dish-sq .linkish.strong { text-align: left; }
.dish-rc .row.tight { gap: 8px; }
.dish-rc .link.small { padding: 2px 0; font-size: 13px; }
.dish-rc .write-btn { height: 30px; padding: 0 10px; font-size: 13px; }
.dish-rc .size-name { min-width: 64px; }
.dish-hist { font-style: italic; }
.mline.dish-line { align-items: start; }
.mline.dish-line > img.thumb, .mline.dish-line > .thumb.blank { margin-top: 2px; }
.thumb.small.blank { width: 40px; height: 40px; display: block; }
.mline.dish-head .dish-halves .sort { padding: 4px 0; }
.mline.dish-line .mright { padding-top: 2px; }
.menu-find { height: 38px; min-width: 220px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 15px; background: #fff; }
@container main (max-width: 700px) {
  .dish-halves { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .dish-arrow { display: none; }
  .dish-line .dish-rc { border-left: 2px solid var(--soft); padding-left: 10px; }
  .dish-line .dish-rc::before { content: 'Recipe'; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
  .mline.dish-head .dish-halves > :nth-child(n+2) { display: none; }
}
@media (max-width: 700px) { .menu-find { min-width: 0; width: 100%; } }

/* How it's doing: Performance's columns, food cost beside them. */
.mrow.how-row { grid-template-columns: minmax(130px, 1.3fr) minmax(170px, 1fr) 60px minmax(130px, 1fr) 64px 100px; }
.mrow.how-row > .num:nth-child(5) { text-align: right; }
@container main (max-width: 760px) {
  .mrow.how-row { grid-template-columns: minmax(110px, 1fr) minmax(140px, 1fr) 56px minmax(110px, 1fr) 56px; }
  .mrow.how-row > :nth-child(6) { display: none; }
  .mrow.how-row > :nth-child(5) { display: block; }
}
@container main (max-width: 470px) {
  .mrow.how-row { grid-template-columns: 1fr 1fr; }
  .mrow.how-row > :first-child { grid-column: 1 / -1; }
  .mrow.how-row > :nth-child(6) { display: flex; }
  .mrow.how-row > :nth-child(5) { display: block; }
  .mrow.how-row > .num { text-align: left; }
}
.how-quad > .card { padding: 14px; gap: 10px; }
.how-quad .mx-body { grid-template-columns: minmax(0, 1fr); }
.how-quad .mx-list { border-left: 0; border-top: 1px solid var(--line); padding: 6px 0 0; max-height: 160px; }
.how-quad h2 { font-size: 14px; }

/* A dish's page. */
.dish-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.dish-stat .big { font-size: 22px; }
.dish-sizes > div { gap: 10px; }
.quad-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.quad-cell { border: 1px solid var(--line); border-radius: 6px; padding: 8px; font-size: 12px; color: var(--muted); min-height: 54px; }
.quad-cell.on { background: var(--soft); border-color: var(--ink); color: var(--ink); font-weight: 600; }
.recipe-for { line-height: 1.5; }
.recipe-for .link.small { padding: 0; }

/* The Menu's Menu | How it's doing switch, at the right end of the section chips (owner, Oct 27). */
.menu-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The Menu's control bar: as tight as the rows around it, the page's own gap (18px) above and below. */
/* The Menu's three versions (owner, Oct 31): In house · Online · Printed, under the title. */
/* The Menu's header on one line (owner, Oct 31): the search as tall as the switches and buttons beside it, all centred. */
.seg.core-menu-tabs { align-self: center; }
.page-head .head-tools > .head-search:has(> .menu-find), .page-head .head-tools > .head-search > .menu-find { height: 34px; }
.page-head .head-tools > .head-search > .menu-find { font-size: 14px; padding: 0 12px; }
/* Menu › Online: the order page's items, in its order. */
.core-online-list > .core-online-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.core-online-row .thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.core-online-row.off { opacity: .7; }
.core-online-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.core-online-name .strong { flex: 1 1 100%; }
.core-online-off > summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.core-menu-ctl.toolbar.one-row { margin: 0; padding: 8px 14px; gap: 8px 18px; }
.core-menu-ctl > .seg:first-child { flex: none; }
.menu-nav > .chips-row { flex: 1 1 auto; min-width: 0; }
.menu-nav > .seg { margin-left: auto; flex: none; }
/* The Menu row's plates a day with its trend curve (owner, Oct 27). */
.mcell.c-trend { width: 170px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mcell.c-trend .spark { flex: none; }
.c-trend-n { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.mhead .mcell.c-trend { display: inline-block; }

/* The week's Available row (owner, Oct 27): who can work and isn't scheduled, in green. */
.sched-free { font-size: 12.5px; padding: 3px 6px; background: var(--good-soft); color: var(--good); border-left: 3px solid var(--good-line); }
.sched-free + .sched-free { margin-top: 3px; }
.sched-free-from { opacity: .8; font-size: 11.5px; }

/* A blacked-out day on the schedule's week (owner, Oct 27): its top bar hatched, with a tag. */
.sched-day.shut { background: repeating-linear-gradient(45deg, var(--soft), var(--soft) 6px, var(--bg) 6px, var(--bg) 12px); }
.tag.sched-shut { background: var(--problem-soft); color: var(--problem); }
/* v0.2 Recipes & ingredients in v0.1's shape (Oct 27 review): the tree's rows, the header's buttons, the side boxes. */
.core-head-acts { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.core-head .right-col .mk { align-self: flex-end; }
.core-lrow2 .core-from { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.core-lrow2 .core-from[aria-expanded="true"] .src { border-color: var(--ink); }
.core-lrow2.clickable:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.core-lrow2 .nm .warn-text { margin-top: 2px; }
.core-lq { padding: 2px 4px 10px; }
.core-lq .amount { width: 72px; }
.core-lchain { padding: 0 4px 10px; }
.core-inv { display: flex; flex-direction: column; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.core-inv > section.card { border: 0; padding: 0; border-radius: 0; background: none; }
.core-inv > .core-counted { margin-top: 8px; }
/* Its units (owner, Oct 28): plain rows, where each came from on hover or a tap; a suggestion's "=" faded and dotted, ✓ OK beside it. */
.core-units-side .urow { grid-template-columns: auto auto 1fr auto; }
.core-units-side .urow > .u-acts { justify-self: end; gap: 12px; }
.core-units-side .urow.k-physics { color: var(--muted); }
.urow > .u-why { grid-column: 1 / -1; font-size: 12px; }
.urow[title] { cursor: help; }
.urow.u-suggested .u-eq { color: var(--muted); opacity: .55; text-decoration: underline dotted; text-underline-offset: 4px; }
/* Units that add up (owner, Nov 1): one chain a group, each number a fact to open; the question; a fact opened. */
.core-units-side .urow.u-chain { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.urow.u-chain .u-eq { font-weight: 700; }
.u-num { font: inherit; color: var(--ink); border-bottom: 1px dotted var(--muted); padding: 0; }
.u-num.on { border-bottom: 2px solid var(--ink); font-weight: 600; }
.u-num:disabled { border-bottom: 0; cursor: default; }
.urow.u-chain.u-off .u-num { color: var(--muted); text-decoration: line-through; }
.core-blank { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; margin: 6px 0; border-radius: 6px; background: var(--caution-soft); border: 1px solid var(--caution-line); }
/* A blank is a gap (owner, Nov 1: "easy to miss"): yellow wherever a units box shows it, its problem line in the warning colour. */
.core-blank > .small > .strong { color: var(--caution); }
.mod-row.core-mod-cant { background: var(--caution-soft); }
.mod-row.core-mod-cant .num.warn-text { font-weight: 600; }
.core-blank .amount { width: 4.5em; }
.core-blank .amount.short { width: 3em; }
.core-blank .small-select { width: auto; min-width: 0; max-width: 6.5em; }
.core-blank .row.tight { gap: 6px; align-items: center; }
.core-blank-side { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
/* The price chart's unit (owner, Nov 6): per case, per each, per g; one nothing ties to the price yet marked. */
.core-price-per { margin: 8px 0 2px; align-items: center; flex-wrap: wrap; }
.seg.core-price-units { flex-wrap: wrap; max-width: 100%; }
.seg.core-price-units button { height: 30px; padding: 0 12px; font-size: 13px; }
.core-price-chart .core-blank { margin-top: 8px; }
.core-priced { margin-top: 2px; }
.core-equation .amount.short { width: 3em; }
.core-base { margin: 2px 0 6px; }
.row.core-units-foot { gap: 20px; margin-top: 6px; align-items: baseline; }
.core-units-foot .core-unit-add { margin-top: 0; }
.core-vendor-product { padding: 8px 0; border-top: 1px solid var(--line); }
.core-vendor-product:first-of-type { border-top: 0; }
.core-all-units .core-unit-row { display: grid; grid-template-columns: minmax(70px, auto) 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); align-items: baseline; }
.core-all-units .core-unit-act { text-align: right; }
.core-conflict { margin: 8px 0; border-left: 3px solid var(--caution); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.core-conflict-ways .btn { white-space: normal; text-align: left; }
.core-fe { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.core-fe-row .amount { width: 90px; }
.core-fe-row .amount.short { width: 3.5em; }
.core-fe-changes { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.core-fe-bar { padding-top: 8px; border-top: 1px solid var(--line); }
.core-this-line { margin-bottom: 12px; }
.core-unit-add { margin-top: 6px; }
.core-unit-sugg .chip { height: 30px; }
.core-none-row { margin-top: 8px; }
.core-allergen-bar { margin-top: 12px; }
.urow .u-ok { height: 26px; padding: 0 8px; font-size: 11px; }
.core-alerts .tag, .last-paid .tag { white-space: normal; }
.core-merged { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.core-merge .merge-keep .chip { text-transform: none; letter-spacing: 0; }
.core-new { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; }
.core-new-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: flex; flex-direction: column; gap: 6px; min-width: 210px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.core-new-menu[hidden] { display: none; }
.core-new-menu .btn { justify-content: flex-start; width: 100%; }
.core-home-tools { align-items: center; gap: 10px; }
.core-home-find { max-width: 360px; }
.rt-row .nm .mks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.core-gap { padding: 0; text-align: left; font-weight: 400; }
.rt-row .num .warn-text { white-space: nowrap; font-weight: 400; }
/* The editor in v0.1's form: headings, drag handles, Price from, numbered steps, the one-line warning. */
.core-elines-head, .core-eline.v01 { display: grid; grid-template-columns: 18px 74px 104px minmax(0, 1fr) 124px 64px 24px; gap: 8px; align-items: center; }
.core-elines-head { font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 0 2px; }
.core-elines-head .num, .core-eline.v01 .num { text-align: right; }
.core-eline.v01 .amount { width: 100%; }
.core-eline.v01 select { width: 100%; min-width: 0; }
.drag-handle { cursor: grab; color: var(--muted); font-size: 16px; user-select: none; text-align: center; }
.dragging { opacity: .5; }
.core-ewarn { margin: 2px 0 4px 26px; align-items: center; }
.core-ewarn .amount { width: 72px; }
.core-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.core-step { display: grid; grid-template-columns: 18px 28px minmax(0, 1fr) 24px; gap: 8px; align-items: start; }
.core-step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--card); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-top: 6px; }
.core-step textarea { width: 100%; box-sizing: border-box; }
/* The steps on the recipe's page, as the editor draws them (owner, Nov 5). */
.core-steps-view { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.core-step-v { grid-template-columns: 28px minmax(0, 1fr); }
.core-step-t { padding-top: 6px; font-size: 17px; line-height: 1.45; white-space: pre-wrap; }
.core-step-note { display: flex; flex-direction: column; gap: 4px; }
.wide-add { width: 100%; justify-content: center; }
/* + Add a line and + Use a by-product side by side; a by-product's rows set apart from the lines (owner, Nov 5). */
.core-addrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.core-byprods { margin-top: 8px; border-top: 2px solid var(--line); }
.core-byprods .lrow:first-child { border-top: 0; }
.core-byprod b { font-weight: 600; }
.core-rhead label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.core-del { color: var(--ink); }
.core-rhead > label > input, .core-rhead > label > select { flex: none; }
.core-rhead > label.grow > input { width: 100%; box-sizing: border-box; }
.core-editor .core-rhead { align-items: flex-end; }
.core-rhead label .core-rname { flex: none; min-width: 0; width: 100%; }
.core-new-menu svg { width: 16px; height: 16px; flex: none; margin-right: 6px; }
.core-new-menu .btn { display: flex; align-items: center; }
.core-undo { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 12px; }
/* The editor's Merge… on a line sits under its name (the What goes in column), not under the drag handle. */
@media (min-width: 701px) { .core-eline.v01 + .core-esub { margin-left: 220px; } }
/* v0.2 Invoices & orders, drawn as v0.1's (inv-parity) */
.side-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; }
.inv-view-line.sub { padding-left: 22px; border-top-style: dashed; }
.inv-view-foot .row { gap: 12px; }
.inv-act .btn.small-btn { height: 30px; padding: 0 10px; font-size: 10.5px; }
.scan-line .scan-group { gap: 6px; align-items: center; margin: 4px 0; }
.scan-line .came-in .came-base:empty { display: none; }
.inv-pack .small.muted { flex-basis: 100%; }
@media (min-width: 701px) { .inv-group.st-partial .inv-grid { grid-template-columns: minmax(0, 2fr) 70px minmax(0, 1fr) minmax(0, 1.1fr) 160px 80px; } }
@media (min-width: 701px) { .inv-group.st-partial .inv-row-g .num { white-space: nowrap; } }
.inv-editor .inv-charge > .link { width: 18px; }
.inv-editor .inv-charge > .inv-x { width: 18px; }
/* The Units panel (owner, Oct 28): one ingredient's units from the right, over the page, in the ingredient page's boxes. */
.core-up { width: min(560px, 100%); box-sizing: border-box; gap: 12px; animation: core-up-in .18s ease-out; }
@keyframes core-up-in { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes pn-up-in { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .core-up { animation: none; } }
.core-up-head { align-items: flex-start; gap: 12px; }
.core-up-head .sheet-title { font-size: 24px; }
.core-up-x { flex: none; min-width: 44px; font-size: 20px; line-height: 1; }
.core-up-body { display: flex; flex-direction: column; gap: 12px; }
.core-up-body > .card { margin: 0; }
.core-up-change { padding: 9px 0; border-top: 1px solid var(--line); }
.core-up-change .short, .core-up .short { width: 72px; }
.core-up .core-inhouse { align-items: center; gap: 6px; }
.core-up-foot { display: flex; justify-content: flex-end; padding: 4px 2px; }
.core-up-link { margin-left: 2px; white-space: nowrap; }
.vrow-main > .core-up-link { align-self: flex-start; padding: 0; }
.inv-unit-q { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.inv-unit-q:empty { display: none; }

/* Settings › Website (v0.2): the website's content, view first; the form's questions by step. */
.site-page .site-long { grid-column: 1 / -1; white-space: pre-wrap; color: var(--ink); }
.site-page .set-row > .site-text, .site-page .set-row > .site-long { grid-column: 1 / -1; }
.site-text { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font: inherit; font-size: 15px; resize: vertical; background: var(--card); color: var(--ink); }
.site-page input.set-name, .site-page input.set-input { height: 44px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; font-size: 15px; background: var(--card); color: var(--ink); }
.site-page input.set-name { width: 260px; max-width: 100%; }
.site-page input.site-wide-input { width: 100%; }
.site-days { justify-content: flex-end; }
.check-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.site-step > .row { align-items: center; margin-bottom: 4px; }
.site-step-n { min-width: 52px; }
.site-step h2 { margin: 0; }
.site-qlist { display: grid; }
.site-q { border-top: 1px solid var(--soft); padding: 8px 0; background: var(--card); }
.site-q.dragging { opacity: 0.9; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); position: relative; z-index: 2; }
.site-q-line { align-items: center; }
.site-q-label { min-width: 0; flex: 1 1 0; }
/* A question's tags (a long condition, a choice that ends the form) wrap inside the card, never past its edge. */
.site-q-label .row { min-width: 0; }
.site-q-label .tag { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.site-q-label .strong { overflow-wrap: anywhere; }
.site-q.open { background: var(--soft); border-radius: var(--radius); padding: 8px 12px; }
.site-panel { display: grid; gap: 12px; padding: 12px 0 4px; }
.site-field { display: grid; gap: 4px; }
.site-page label.site-tick { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; justify-self: start; gap: 8px; min-height: 36px; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer; }
.site-page label.site-tick input { width: 18px; height: 18px; margin: 0; flex: none; }
.site-choices { display: grid; gap: 10px; }
.site-choice { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.site-end { display: grid; gap: 6px; padding-left: 26px; }
.site-if { align-items: center; }
.site-add { padding-top: 8px; }
.site-req.handled { opacity: .75; }
.site-answers dl { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 6px 16px; margin: 8px 0 0; }
.site-answers dt { color: var(--muted); font-size: 14px; }
.site-answers dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) { .site-answers dl { grid-template-columns: 1fr; } .site-answers dd { margin-bottom: 6px; } .site-days { justify-content: flex-start; } }

/* The status bar (owner, Oct 29: "a horizontal bar that stays put at the bottom of the page with those options"):
   where an invoice stands on the left, its buttons on the right, along the bottom of the screen beside the menu rail.
   Its top edge yellow while something's left, green when ready, red when the total doesn't match. */
.inv-tile { position: sticky; z-index: 40; bottom: 0; margin: auto -32px -40px; border-radius: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center;
  padding: 12px 32px calc(12px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 4px solid var(--caution-mark); box-shadow: 0 -2px 14px rgba(0, 0, 0, .10); }
.inv-tile.ready { border-top-color: var(--good); }
.inv-tile.off { border-top-color: var(--problem); }
.inv-tile-status { grid-column: 1; display: block; width: fit-content; padding: 0; border: 0; background: none; font: inherit; font-size: 20px; font-weight: 600; text-align: left; color: var(--caution); cursor: pointer; }
/* Behind Edit, a change kept for the bar's Save (owner, Oct 30): said where it was made, and listed. */
.core-kept { color: var(--caution); margin-top: 2px; }
.core-kept-list:not(:empty) { margin: 10px 0; padding: 8px 10px; border-left: 3px solid var(--caution); background: var(--soft); }
.pack-edit-row.core-dropped { opacity: 0.45; text-decoration: line-through; }
.core-ing-draft { border-left: 3px solid var(--caution); }
.inv-tile-status:disabled { cursor: default; }
.inv-tile.ready .inv-tile-status { color: var(--good); }
.inv-tile.off .inv-tile-status { color: var(--problem); }
.inv-tile-sub { grid-column: 1; color: var(--muted); margin-top: 2px; min-height: 1em; }
.inv-tile-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 700px) {
  .inv-tile { margin: auto -16px -32px; grid-template-columns: 1fr; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .inv-tile-status { font-size: 17px; }
  .inv-tile-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 8px; }
  /* The capture button would sit on the bar: the bar has the invoice's own buttons. */
  body:has(.inv-tile) .capture-corner { display: none; }
}
/* Editing a saved invoice at the check: a counted line folded to what it is, Edit and Leave out beside it. */
.scan-fold { display: none; }
.scan-line.folded .scan-ours { display: none; }
.scan-line.folded .scan-fold { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scan-line.folded .scan-read .scan-conf { margin-bottom: 2px; }
/* A row Edit will remove on Save (owner, Oct 31: nothing goes until the bar's Save). */
.core-gone { opacity: .45; }
.core-gone input, .core-gone select { text-decoration: line-through; }

/* The Menu on a phone (owner, Oct 31): the picture, the name, how it's trending and Sell online; a tap opens the rest. */
.mline.core-mrow-phone { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; cursor: pointer; }
.core-mrow-phone .core-mrow-name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.core-mrow-phone .core-mrow-name .strong { overflow: hidden; text-overflow: ellipsis; }
.core-mrow-phone .core-mtrend { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 56px; }
.core-mrow-phone .core-mtrend svg { width: 56px; height: 20px; }
.core-mrow-phone .sell-switch { font-size: 11px; flex-direction: column; gap: 2px; }
/* Too narrow for the little graph: the arrow and its percentage alone. */
@media (max-width: 359px) { .core-mrow-phone .core-mtrend svg { display: none; } }
.core-menu-tiles { margin-bottom: 12px; }
.core-flag-dismiss { display: inline-flex; align-items: center; gap: 4px; }
.core-mp-photo { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--radius); }
.core-mp-cells { display: flex; flex-direction: column; gap: 10px; }
.core-mp-cells .c-trend { display: flex; align-items: center; gap: 12px; }
.core-mp-cells .mcell { width: auto; }
/* v0.2 Service widgets (owner, Oct 31): ✎ in the corner, by category, Live sales, Online ordering today. */
.core-pencil-wrap { position: relative; height: 100%; }
.core-pencil-wrap > .card { height: 100%; }
.core-has-pencil .dough-head { padding-right: 34px; }
.core-pencil { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: var(--radius, 6px); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.core-pencil:hover { color: var(--ink); border-color: var(--ink); }
.core-cat-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.core-bycat-rows { display: flex; flex-direction: column; margin-top: 6px; }
.core-bycat-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.core-bycat-row b { font-variant-numeric: tabular-nums; }
.core-bycat-row > span { flex: 1; }
.core-bycat-row.core-bycat-total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 2px; font-weight: 700; }
.core-live-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
.core-live-top .big { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.core-live-split { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; margin-bottom: 10px; }
.core-live-key { display: inline-flex; align-items: center; gap: 6px; }
.core-live-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.core-live-key.dineIn i, .core-live-stack .dineIn { background: var(--series-1); }
.core-live-key.toGo i, .core-live-stack .toGo { background: var(--series-2); }
.core-live-key.online i, .core-live-stack .online { background: var(--series-3); }
.core-live-bars { display: flex; align-items: flex-end; gap: 4px; height: 96px; margin-bottom: 6px; }
.core-live-col { flex: 1 1 0; min-width: 8px; height: 100%; display: flex; flex-direction: column; }
.core-live-stack { flex: 1; display: flex; flex-direction: column-reverse; justify-content: flex-start; background: var(--soft); border-radius: 2px; overflow: hidden; }
.core-live-stack span { display: block; width: 100%; }
.core-live-at { font-size: 11px; color: var(--muted); text-align: left; height: 14px; white-space: nowrap; }
.core-online { padding: 10px 14px; }
.core-online-bar { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 4px 0; color: inherit; font: inherit; text-align: left; cursor: default; }
.core-online-bar[role=button] { cursor: pointer; }
.core-online-state { flex: none; padding: 6px 12px; border-radius: var(--radius, 6px); font-weight: 700; white-space: nowrap; }
.core-online-state.on { background: var(--good-soft); color: var(--good); }
.core-online-state.paused { background: var(--caution-soft); color: var(--caution); }
.core-online-state.off { background: var(--problem-soft); color: var(--problem); }
.core-online-state.quiet { background: var(--soft); color: var(--muted); }
.core-online-ready { flex-wrap: nowrap; align-items: center; gap: 8px; }
.core-online-cells { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.core-online-cell { flex: none; display: flex; flex-direction: column; align-items: center; padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--radius, 6px); font-size: 13px; line-height: 1.25; }
.core-online-cell .when { color: var(--muted); font-size: 12px; }
.core-online-cell.full { border-color: var(--problem-line); background: var(--problem-soft); color: var(--problem); }
.core-online-cell.past, .core-online-cell.closing { opacity: .55; }
.core-online-cell.closed { color: var(--muted); text-decoration: line-through; }
.core-online-body { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.core-online-row { align-items: center; gap: 8px; }
.core-online-n { width: 64px; }
.core-online-wins { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.core-online-win { display: flex; align-items: center; gap: 8px; }
.core-online-win.full .strong { color: var(--problem); }
.core-mgr { white-space: nowrap; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.core-mgr input { margin: 0; }

/* v0.2 on an iPad (owner, Oct 31): the phone's tabs along the bottom; on a board's iPad, under the board for a manager signed in. */
.shell.tablet-nav > main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.shell.tablet-nav .capture-corner, .floor.tablet-board .capture-corner { bottom: calc(80px + env(safe-area-inset-bottom)); }
.floor.tablet-board { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.floor.tablet-board .board-login { bottom: calc(80px + env(safe-area-inset-bottom)); }
.tablet-tabs .pn-tab { font-size: 11px; }
.tablet-tabs .pn-tab svg { width: 24px; height: 24px; }

/* The oven chart opened wide from Tonight's windows (owner, Nov 3). */
.core-up.core-up-wide { width: min(1100px, 100%); }
.core-up-wide .oven-card { border: 0; padding: 0; box-shadow: none; }
.core-up-wide .oven-card h2 { display: none; }

/* The team's phone: four places always at the bottom (owner, Nov 3). */
.phone-shell.has-ph-bar > main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.ph-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; background: #000; }
.ph-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: #9a9a9a; font: inherit; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; position: relative; }
.ph-tab.on { color: #fff; }
.ph-tab.on::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; background: #fff; }
.ph-cover { margin-top: 8px; display: grid; gap: 6px; }
.ph-tags { gap: 6px; }
.ph-with { display: grid; gap: 8px; }
.ph-side { display: grid; gap: 2px; }
.ph-ic { position: relative; display: inline-flex; }
.ph-badge { position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: #f5c400; color: #000; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; letter-spacing: 0; }

/* Tonight's windows, one piece for Service and Settings (owner, Nov 3). */
.wt-all { display: flex; flex-direction: column; gap: 12px; }
.wt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wt { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); background: var(--card, #fff); }
.wt.next { border-color: var(--ink); }
.wt.past { opacity: .6; }
.wt-when { display: flex; justify-content: space-between; align-items: center; gap: 6px; white-space: nowrap; }
.wt-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wt.closed .wt-tag { background: var(--soft); padding: 2px 6px; }
.wt-bar { height: 6px; background: var(--soft); position: relative; }
/* Under half: plain, not green (owner, Nov 5: green means something done well, and it read as a traffic light). */
.wt-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.wt.half .wt-bar > span { background: var(--caution-mark); }
.wt.full .wt-bar > span { background: var(--problem); }
.wt-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.btn.wt-close { min-height: 32px; }
.wt-stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; }
.btn.wt-step { height: 44px; padding: 0; font-size: 22px; font-weight: 600; letter-spacing: 0; }
.wt-n { font-size: 18px; }
.wt-note { color: var(--muted); }
.wt.full .wt-note { color: var(--problem); font-weight: 700; }
.wt-earlier > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 8px 12px; border: 1px dashed var(--line); list-style: none; }
.wt-earlier[open] > summary { margin-bottom: 10px; }
.core-online-cell { gap: 2px; min-width: 52px; }
.core-online-cell .mini { display: block; width: 100%; height: 4px; background: var(--soft); position: relative; }
.core-online-cell .mini > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--good); }
.core-online-cell.full .mini > span { background: #e0a800; }
.core-online-cell.full { border-color: #e0a800; background: var(--caution-soft); color: #a07800; }
.core-online-cell.next { border-color: var(--ink); }
.core-online-cell.closed { text-decoration: none; border-style: dashed; }
.core-online-controls { margin-top: 8px; }

/* Pre-shift notes: the managers' notepad (owner, Nov 3). */
.ps-list { display: flex; flex-direction: column; }
.ps-row { display: grid; grid-template-columns: 22px 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--soft); background: var(--card, #fff); }
.ps-row.dragging { opacity: .7; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.ps-grip { cursor: grab; color: var(--muted); text-align: center; touch-action: none; user-select: none; font-size: 16px; }
.ps-text { width: 100%; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; padding: 4px 0; }
.ps-text:focus { outline: none; border-bottom-color: var(--line); }
.ps-row.done .ps-text { text-decoration: line-through; color: var(--muted); }
.ps-x { font-size: 18px; color: var(--muted); padding: 0 4px; }
.ps-new { grid-template-columns: 22px minmax(0, 1fr) auto; }
.ps-row.ps-head { grid-template-columns: 22px minmax(0, 1fr) auto; padding-top: 12px; border-top: 0; }
.ps-row.ps-head:first-child { padding-top: 2px; }
.ps-head .ps-text { font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.ps-row:not(.ps-head):not(.ps-newhead) { padding-left: 14px; }
.ps-row.ps-new .ps-text::placeholder { color: var(--muted); }
.ps-newhead { margin-top: 8px; border-top: 1px solid var(--line); }

/* Announcements (owner, Nov 3): on their phone's Today (pinned at the top, new with Got it, the rest folded), and the
   managers' list, form and detail. */
.ph-card.ann { align-items: flex-start; border-left-color: var(--series-1); }
.ph-card.ann.pinned { border-left-color: var(--caution-mark); background: var(--caution-soft); }
.ph-card.ann.seen { border-left-color: var(--line); }
.ph-card.notify { border-left-color: var(--series-1); }
.ph-card.ann .btn { flex: none; }
.ph-pinned { margin-bottom: 4px; }
.ann-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 2px 0 4px; }
.ann-photo { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; margin: 6px 0; cursor: zoom-in; }
.ann-photo-big { display: block; max-width: 100%; height: auto; }
.ph-older summary { cursor: pointer; padding: 2px 0; }
.ph-older .stack { margin-top: 10px; }
.ann-row .ann-tags { flex: none; flex-wrap: wrap; justify-content: flex-end; }
.ann-form textarea { width: 100%; font: inherit; }
.ann-form label.tick-row, .ann-compose label.tick-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; text-align: left; font-weight: 400; }
.ann-form label.tick-row input[type=checkbox], .ann-compose label.tick-row input[type=checkbox] { width: 20px; height: 20px; flex: none; margin: 1px 0 0; }
.ann-compose .row.tight { align-items: center; gap: 10px; }
.ann-compose input[type=date], .ann-compose input[type=datetime-local] { width: auto; }
.ann-form .row.tight { align-items: center; gap: 10px; }
.ann-form input[type=date], .ann-form input[type=datetime-local] { width: auto; }
.ann-thumb { display: flex; align-items: center; gap: 10px; }
.ann-thumb img { max-height: 90px; max-width: 140px; border-radius: 6px; }
.ann-person { padding: 6px 0; border-top: 1px solid var(--soft); gap: 10px; }
.ann-detail .ann-photo { cursor: default; }

/* Announcements, Nov 4: the message bubble by Help, the managers' pane (rows, tiles, pin and bin, the composer's To: box)
   and a team phone's short rows. */
.msg-q { position: relative; }
.msg-q svg { width: 20px; height: 20px; }
.msg-q .rail-badge { position: absolute; top: -4px; right: -4px; }
.ann-pane .ann-list { display: flex; flex-direction: column; gap: 8px; }
.ann-item { border: 1px solid var(--line); background: var(--card); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ann-item.pinned { border: 2px solid var(--ink); }
.ann-item.waiting-got { background: var(--caution-soft); border-color: var(--caution-mark); }
.ann-item.all-got { background: var(--good-soft); border-color: var(--good); }
.ann-item.pinned.waiting-got, .ann-item.pinned.all-got { border-width: 2px; }
.ann-item.new { border-left: 4px solid var(--series-1); }
.ann-head { display: flex; align-items: flex-start; gap: 8px; }
.ann-tap { cursor: pointer; min-width: 0; }
.ann-first { overflow-wrap: anywhere; }
.ann-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--series-1); margin-right: 6px; vertical-align: middle; flex: none; }
.ann-acts { flex: none; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; border-radius: 6px; }
.icon-btn:hover { border-color: var(--line); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.ann-pin.on { color: var(--ink); }
.ann-pin.on svg path { fill: currentColor; }
.ann-reads { align-items: center; }
.ann-tiles { display: flex; flex-wrap: wrap; gap: 3px; }
.ann-tile { min-width: 24px; height: 20px; padding: 0 3px; font-size: 10px; font-weight: 700; letter-spacing: .02em; border-radius: 4px; border: 0; cursor: pointer; font-family: inherit; line-height: 20px; }
.ann-tile.unread { background: var(--soft); color: var(--muted); }
.ann-tile.read { background: var(--good-soft); color: var(--good); }
.ann-tile.confirmed { background: var(--good); color: #fff; }
.ann-who:empty { display: none; }
.ann-compose textarea { width: 100%; font: inherit; }
.ann-to { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); padding: 10px; background: var(--paper, var(--card)); }
.ann-to-label { padding-top: 6px; }
.ann-groups .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ann-today-tick { margin-left: 4px; }
.ann-search { width: 100%; }
.ann-results { display: flex; flex-direction: column; }
.ann-results:empty { display: none; }
.ann-hit { text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--soft); background: var(--card); font: inherit; cursor: pointer; }
.ann-hit:hover { background: var(--soft); }
.ann-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ann-chips:empty { display: none; }
.ann-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 14px; background: var(--soft); font-size: 14px; }
.ann-x { border: 0; background: none; font-size: 16px; line-height: 1; padding: 2px 6px; cursor: pointer; color: var(--muted); }
.ann-x:hover { color: var(--ink); }
.ph-ann { border: 1px solid var(--line); border-left: 4px solid var(--line); background: var(--card); }
.ph-ann.new { border-left-color: var(--series-1); }
.ph-ann.pinned { border: 2px solid var(--ink); border-left-width: 4px; }
.ph-ann.done { opacity: .85; }
.ph-ann-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.ph-ann-first { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-ann-head .grow { min-width: 0; }
.ph-ann-pin svg { width: 16px; height: 16px; }
.ph-ann.open > :not(.ph-ann-head) { margin: 0 12px 10px; }
.phone-shell .setup-top .msg-q { width: 38px; height: 38px; margin-right: 8px; }
.core-pickups .wlive { margin-bottom: 8px; }
.core-pickups .wlive-head b { white-space: nowrap; }
.core-pickups .wlive-head .btn { margin-left: auto; }
.core-pickups .core-online-ready { margin-left: auto; }

/* A manager's Me (owner, Nov 4): the team phone's pages inside the app; Tonight and For you at the top of their Today. */
.me-page { max-width: 620px; display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.me-page .ph-hi { display: none; }
.heads-up { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.heads-line { display: flex !important; flex-direction: row !important; width: 100%; align-items: center; gap: 10px; text-align: left; padding: 8px 4px; border: 0; border-top: 1px solid var(--soft); background: none; font: inherit; color: inherit; cursor: pointer; }
.heads-line:first-of-type { border-top: 0; }
.heads-line:hover { background: var(--soft); }
.heads-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.heads-line.hu-alert .heads-dot { background: var(--problem); }
.heads-line.hu-ask .heads-dot { background: var(--caution-mark); }
.heads-line.hu-ok .heads-dot { background: var(--good); }
.heads-line.hu-info .heads-dot { background: var(--series-1); }

/* The tight-day card on its day in Team › Time off (owner, Nov 5). */
.staff-alert { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--caution-line); border-left: 3px solid var(--caution-mark); background: var(--caution-soft); }
.staff-alert.short { border-color: var(--problem-line); border-left-color: var(--problem); background: var(--problem-soft); }

/* The preview's week heading (the time clock's screens use it). */
.dt-nav h2 { margin: 0; }

/* Scheduling (owner, Nov 5–6): the owner's hidden preview at /dev-team, laid out as Team › Schedule will be. A row per
   shift (its role and times), the days across (Tue–Sat); shifts coloured by role, a shade per shift: published solid, a
   change not sent white with a bar, open red, not started dashed. */
.dt-tools { gap: 8px; margin: -4px 0 4px; }
.dt-status { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.dt-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; color: var(--muted); }
.dt-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.dt-sw { display: inline-block; width: 18px; height: 11px; vertical-align: middle; background: var(--c, #2F5DA8); }
.dt-sw.draft { background: #fff; border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--c, #2F5DA8); }
.dt-sw.ghost { background: transparent; border: 1px dashed var(--muted); }
.dt-sw.none { background: repeating-linear-gradient(135deg, transparent 0 4px, #C9C6BE 4px 5px); }
.dt-weeknav button { white-space: nowrap; }
@media (min-width: 1001px) { .dt-wrap > .page { grid-template-columns: minmax(0, 1fr) 340px; } }
.dt-card { padding: 0; overflow: hidden; gap: 0; border-radius: 4px; }
.dt-grid { display: grid; min-width: 640px; }
.dt-grid > * { min-width: 0; border-bottom: 1px solid var(--line); }
.dt-grid > .dt-corner { border-bottom: 2px solid var(--ink); border-right: 1px solid var(--line); }
.dt-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 8px 10px; }
.dt-grid > .dt-head { border-bottom: 2px solid var(--ink); }
.dt-head.today .dt-dname { text-decoration: underline; text-underline-offset: 4px; }
.dt-dname { font-size: 16px; font-weight: 600; }
.dt-pill { font-size: 12px; padding: 1px 7px; white-space: nowrap; }
.dt-pill.ready { color: var(--muted); padding-left: 0; }
.dt-pill.tight { background: var(--caution-soft); color: var(--caution); }
.dt-pill.short { background: var(--problem-soft); color: var(--problem); font-weight: 700; }
.dt-pill.black { background: #000; color: #fff; }
.dt-rowhead { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px 10px 14px; border-right: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--c); }
.dt-rname { font-weight: 600; font-size: 15px; }
.dt-once { color: var(--caution); font-weight: 600; }
.dt-cell { display: flex; flex-direction: column; gap: 5px; padding: 6px; border-right: 1px solid var(--soft); }
button.dt-cell { all: unset; box-sizing: border-box; cursor: pointer; padding: 6px; border-right: 1px solid var(--soft); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.dt-cell.dt-none, button.dt-cell.dt-none { background: repeating-linear-gradient(135deg, transparent 0 6px, #E4E1DA 6px 7px); min-height: 46px; }
.dt-plus { opacity: 0; color: var(--muted); font-size: 18px; }
button.dt-none:hover .dt-plus, button.dt-none:focus-visible .dt-plus { opacity: 1; }
@media (hover: none) { .dt-plus { opacity: .45; } }
.dt-slot { position: relative; display: flex; align-items: stretch; min-height: 34px; background: var(--c); color: #fff; }
.dt-slot.draft { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: inset 5px 0 0 var(--c); }
.dt-slot.open { background: var(--card); color: var(--problem); border: 1px dashed var(--problem); }
.dt-slot.ghost { background: transparent; color: var(--muted); border: 1px dashed #C9C6BE; }
.dt-slot.picked { outline: 2px solid var(--ink); outline-offset: 1px; }
.tf-import .tf-imp-st { white-space: nowrap; }
.tf-import .tf-imp-st select { display: block; margin-top: 4px; max-width: 9em; }
.dc-own { color: #8A6A00; }
.dt-x { all: unset; position: absolute; top: -7px; right: -7px; z-index: 2; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; background: var(--card); color: var(--ink); border: 1px solid var(--line); font-size: 13px; line-height: 15px; text-align: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.dt-slot:hover .dt-x, .dt-slot.picked .dt-x, .dt-x:focus-visible { opacity: 1; }
.dt-x:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (hover: none) { .dt-x { opacity: 1; } }
.dt-slot.drop { outline: 2px dashed var(--link); outline-offset: 1px; }
.dt-slot[draggable="true"] { cursor: grab; }
.dt-slot-main { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 7px; cursor: pointer; line-height: 1.2; }
span.dt-slot-main { cursor: default; }
button.dt-slot-main:focus-visible { outline: 2px solid var(--link); }
.dt-slot.draft .dt-slot-main { padding-left: 11px; }
.dt-who { flex: 0 1 auto; min-width: 2.6em; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-slot.open .dt-who { font-weight: 600; }
.dt-t { font-size: 11.5px; opacity: .85; white-space: nowrap; }
.dt-note { flex: 0 20 auto; margin-left: auto; font-size: 12.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dt-ns { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: clip; min-width: 0; flex: 0 5 auto; }
.dt-slot.conflict .dt-ns, .dt-slot:has(.dt-mark) .dt-ns { display: none; }
.dt-note + .dt-ns { margin-left: 6px; }
.dt-av { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; background: var(--c, var(--ink)); color: #fff; }
.dt-slot.published .dt-av { background: #fff; color: var(--c); }
.dt-av.big { width: 30px; height: 30px; font-size: 13px; }
.dt-mark { flex: none; align-self: center; margin-right: 5px; width: 18px; height: 18px; border: 0; border-radius: 9px; background: var(--problem); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; padding: 0; cursor: pointer; box-shadow: 0 0 0 1.5px #fff; }
.dt-why .strong { color: var(--problem); }
.dt-addrow { all: unset; box-sizing: border-box; grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; padding: 12px 14px; cursor: pointer; }
.dt-addrow:hover, .dt-addrow:focus-visible { background: #FAFAF7; }
.dt-addrow-t { color: var(--link); font-weight: 600; font-size: 15px; }
.dt-addhead { display: flex; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line, #EAE7E0); }
.dt-addday, .dt-addday-none { border-top: 1px solid var(--line, #EAE7E0); }
.dt-addday { all: unset; box-sizing: border-box; border-top: 1px solid var(--line, #EAE7E0); display: flex; align-items: center; justify-content: center; padding: 10px 6px; color: var(--link); font-weight: 600; font-size: 13px; cursor: pointer; border-radius: 6px; }
.dt-addday:hover, .dt-addday:focus-visible { background: #FAFAF7; }
.dt-addday:disabled { color: var(--muted, #999); cursor: default; }
.dt-empty { grid-column: 1 / -1; padding: 16px; }
.dt-foot { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 14px; }
.dt-open-word { color: var(--problem); }
/* The right side: who could fill the shift picked; the shift that day; what to look at. */
.dt-k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dt-fh { margin: 0; font-size: 19px; }
.dt-fillbox, .dt-startbox { gap: 6px !important; }
.dt-find { width: 100%; box-sizing: border-box; height: 40px; border: 1px solid var(--line); padding: 0 10px; font-size: 14px; margin: 6px 0 2px; }
.dt-fill { display: flex; flex-direction: column; }
.dt-grp { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 10px 0 4px; font-weight: 600; }
.dt-person { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--soft); cursor: pointer; }
.dt-person:hover, .dt-person:focus-visible { background: var(--soft); }
.dt-person .dt-av { width: 22px; height: 22px; }
.dt-person.cant, .dt-person.other { opacity: .55; }
.dt-person.cant .dt-av, .dt-person.other .dt-av { background: var(--muted); }
.dt-pmain { min-width: 0; }
.dt-pname { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dt-rchip { font-size: 11px; padding: 0 5px; border: 1px solid var(--line); color: var(--muted); }
.dt-rchip.on { border-color: var(--ink); color: var(--ink); }
.dt-reason { color: var(--muted); }
.dt-hcount { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; white-space: nowrap; }
.dt-holder { gap: 8px; padding: 4px 0; }
.dt-note-row input { flex: 1; min-width: 0; }
.dt-danger { color: var(--problem); }
.dt-links { align-items: flex-start; gap: 0; }
.dt-links .link { text-align: left; padding: 6px 0; }
.dt-issue > .grow { flex: 1; min-width: 0; }
.dt-issues { display: flex; flex-direction: column; gap: 8px; }
.dt-issue { display: flex; gap: 10px; align-items: center; padding: 4px 0 4px 12px; border-left: 3px solid var(--caution-mark); }
.dt-issue.bad { border-left-color: var(--problem); }
.dt-issue .link { white-space: nowrap; }
.dt-totals { font-size: 14px; white-space: pre-wrap; }
/* Starting a week: where from, then what would come in. */
.dt-start { gap: 10px; }
.dt-opts { display: flex; flex-direction: column; gap: 8px; }
.dt-opt { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.dt-opt.on { border: 2px solid var(--ink); padding: 9px 11px; }
.dt-opt-main { flex: 1; min-width: 0; }
.dt-opt input[type=date] { width: auto; max-width: 150px; }
.dt-optstate { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dt-red { color: var(--problem); margin-top: 2px; }
.dt-rule { border-top: 2px solid var(--line); }
.dt-plan { display: flex; flex-direction: column; gap: 6px; }
.dt-dots { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.dt-dots li { position: relative; padding-left: 18px; }
.dt-dots li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: #C9C6BE; }
.dt-dots li.ink::before { background: var(--ink); }
.dt-dots li.red::before { background: var(--problem); }
.dt-dots .link { padding: 0; }
.dt-dots .link.on { text-decoration: underline; text-underline-offset: 3px; }
.dt-opts .dt-check { display: flex; flex-direction: row; gap: 8px; align-items: center; justify-content: flex-start; text-align: left; }
.dt-opts .dt-check input { width: 20px; height: 20px; margin: 0; }
.dt-save-t { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--soft); }
.dt-save-t input { flex: 1; min-width: 0; height: 40px; }
/* Publishing. */
.dt-pub { gap: 12px; }
.dt-pub > .link, .sheet > .dt-start > .link { align-self: flex-start; }
.dt-pc { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--soft); }
.dt-ch { font-size: 11.5px; padding: 0 5px; }
.dt-ch.new { background: var(--good-soft); color: var(--good); }
.dt-ch.removed { background: var(--problem-soft); color: var(--problem); }
.dt-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-pub-note { width: 100%; box-sizing: border-box; font: inherit; padding: 10px; border: 1px solid var(--line); background: var(--card); }
.dt-previews .ph-card { align-items: flex-start; }
/* The calendar: a week column with its flag (a dark rule after it, the dates on top), the days across. */
.dt-calcard { padding: 0; overflow: hidden; gap: 0; border-radius: 4px; }
.dt-cal { display: grid; min-width: 680px; }
.dt-chd { padding: 8px 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.dt-chd.w { border-right: 2px solid var(--ink); }
.dt-wk { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-right: 2px solid var(--ink); border-bottom: 1px solid var(--line); cursor: pointer; background: var(--card); }
.dt-wk:hover, .dt-wk:focus-visible { background: #FAFAF7; }
.dt-wk-dates { font-size: 15px; font-weight: 600; }
.dt-wk-by { font-size: 12px; color: var(--muted); margin-top: -2px; }
.dt-wk-alert { font-size: 12px; color: var(--problem); border-top: 1px solid var(--soft); padding-top: 6px; }
.dt-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; }
.dt-flag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dt-flag.ok { background: #E3F1E6; color: #1E6B34; }
.dt-flag.warn { background: #FFF1C9; color: #7A5800; }
.dt-cday { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 12px; min-height: 108px; border-right: 1px solid var(--soft); border-bottom: 1px solid var(--line); cursor: pointer; background: var(--card); }
.dt-cday:hover, .dt-cday:focus-visible { background: #FAFAF7; }
.dt-cday.out .dt-cnum b { color: var(--muted); font-weight: 500; }
.dt-cday.today .dt-cnum b { background: #000; color: #fff; padding: 0 6px; }
.dt-cday.closed { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--soft) 6px 7px); }
.dt-cday.none { cursor: default; background: var(--soft); }
.dt-cnum { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.dt-cday > .dt-pill { align-self: flex-start; }
.dt-cnum b { font-size: 15px; }
.dt-offs { display: flex; flex-wrap: wrap; gap: 4px; }
.dt-offchip { font-size: 12px; border: 1px solid var(--line); padding: 1px 6px; background: var(--card); }
.dt-offchip.pending { border-style: dashed; color: var(--muted); }
/* A day's and a week's panels. */
.dt-dayhead { gap: 12px; align-items: baseline; }
.dt-big { font-size: 18px; font-weight: 600; }
.dt-big.short { color: var(--problem); }
.dt-big.tight { color: var(--caution); }
.dt-big.ready { color: var(--muted); font-weight: 500; }
.dt-dayrows { display: flex; flex-direction: column; }
.dt-dayrow { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--soft); }
.dt-bub { display: flex; gap: 8px; align-items: center; padding: 6px 10px; font-size: 14px; background: var(--c); color: #fff; min-height: 20px; }
.dt-bub i { margin-left: auto; opacity: .85; font-size: 12.5px; }
.dt-bub.draft { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: inset 5px 0 0 var(--c); padding-left: 14px; }
.dt-bub.open { background: var(--card); color: var(--problem); border: 1px dashed var(--problem); }
.dt-bub.ghost { background: transparent; color: var(--muted); border: 1px dashed #C9C6BE; }
.dt-offrow { display: flex; gap: 8px; align-items: baseline; }
.dt-town { display: flex; flex-direction: column; gap: 10px; }
.dt-townrow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
/* Events (owner, Nov 7): the app's .tag on a calendar day, cut to the cell's width. */
.dt-evtag { align-self: flex-start; max-width: 100%; box-sizing: border-box; white-space: normal; }
/* Schedule News (owner, Nov 7): the phone's Shifts dot, the phone's own badge as a red dot. */
.ph-badge.dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -2px; right: -6px; background: var(--problem); }
/* The usual week. */
.dt-ucell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px; border-right: 1px solid var(--soft); }
.dt-ucell.none { justify-content: center; }
.dt-ucell.picked { box-shadow: inset 0 0 0 2px var(--ink); }
.dt-ucount { display: inline-flex; min-width: 26px; height: 26px; padding: 0 4px; box-sizing: border-box; align-items: center; justify-content: center; background: var(--c); color: #fff; font-weight: 600; }
.dt-step { display: flex; align-items: center; gap: 4px; }
.dt-step button { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--card); font-size: 16px; cursor: pointer; }
.dt-step button:disabled { opacity: .4; cursor: default; }
.dt-uedit { gap: 6px; }
.dt-uedit input[type=text], .dt-uedit select { width: 100%; box-sizing: border-box; }
.dt-uedit input[type=color] { width: 36px; height: 28px; padding: 0; border: 1px solid var(--line); }
.dt-uslot { padding: 6px 0; border-top: 1px solid var(--soft); }
.dt-endpick select { width: auto; }
/* Placing people (owner, Nov 6): someone held (or dragged), the shifts light up for them: green open and fine, yellow on
   another shift that night (placing moves them), faded with a ⚠ when it needs a yes; a filled one outlined (replace/swap). */
.dt-placing .dt-slot.h-can.open { box-shadow: inset 0 0 0 2px #1E6B34; background: #E3F1E6; border-color: #1E6B34; color: #1E6B34; }
.dt-placing .dt-slot.h-can:not(.open) { outline: 2px solid var(--ink); outline-offset: 1px; }
.dt-placing .dt-slot.h-twice { box-shadow: inset 0 0 0 2px #8A6400; background: #FFF4D1; color: var(--ink); border-color: #8A6400; }
.dt-placing .dt-slot.h-ask { opacity: .42; }
.dt-placing .dt-slot.h-ask::after { content: '⚠'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #8A6400; font-size: 13px; }
.dt-placing .dt-slot.h-same { outline: 2px dashed var(--ink); outline-offset: 1px; }
.dt-slot.dt-over { transform: scale(1.03); opacity: 1 !important; z-index: 2; transition: transform .08s; }
.dt-pre { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.dt-pre s { opacity: .7; }
.dt-ghost-line { display: block; font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.dt-ghost-line.w { color: #FFD27A; }
.dt-drag-src { opacity: .5; }
.dt-roles .dt-slot, .dt-roles .dt-chip, .dt-roles .dt-person { -webkit-user-select: none; user-select: none; }
.dt-ghost { position: fixed; z-index: 90; pointer-events: none; padding: 6px 10px; background: var(--ink); color: #fff; font-weight: 600; font-size: 13px; transform: translate(16px, 18px); box-shadow: 0 8px 20px rgba(0,0,0,.25); white-space: nowrap; }
.dt-ghost .over40 { color: #FF9A8F; }
.dt-mark.ok { background: #8A6400; }
@media (prefers-reduced-motion: reduce) { .dt-slot.dt-over { transform: none; } }
/* The question at the bottom (one yes; Replace or Swap; a day's open shifts). */
.dt-ask { position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 0 16px calc(18px + env(safe-area-inset-bottom)); pointer-events: none; }
.dt-ask-card { pointer-events: auto; background: var(--card); border: 1px solid var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,.2); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; max-width: 480px; width: 100%; max-height: 70vh; overflow-y: auto; }
.dt-ask-t { font-size: 15px; }
.dt-ask-why { color: #8A6400; font-weight: 600; font-size: 14px; }
.dt-picks { display: flex; flex-direction: column; gap: 6px; }
.dt-pick { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--c); cursor: pointer; background: var(--card); }
.dt-pick:hover, .dt-pick:focus-visible { background: #FAFAF7; }
.dt-pick .dt-pick-why { grid-column: 1 / -1; color: var(--muted); }
.dt-pick.h-ask .dt-pick-why { color: #8A6400; }
.dt-pick.h-twice .dt-pick-why { color: #8A6400; }
/* Holding someone: who, and Done. */
.dt-holdbar { display: flex; gap: 10px; align-items: center; background: #FFF4D1; border: 1px solid #EBD9A8; padding: 8px 10px; font-size: 14px; }
/* The team, as chips (nothing picked). */
.dt-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dt-chip { all: unset; box-sizing: border-box; display: grid; gap: 3px; padding: 6px 7px; border: 1px solid var(--line); background: var(--card); cursor: pointer; min-width: 0; touch-action: manipulation; }
@media (pointer: fine) { .dt-chip { cursor: grab; } }
.dt-chip:hover, .dt-chip:focus-visible { background: #FAFAF7; }
.dt-chip.held { outline: 2px solid var(--ink); outline-offset: 1px; background: var(--soft); }
.dt-placing .dt-chip:not(.held) { opacity: .5; }
.dt-chip-nm { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-chip-meta { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.dt-chip-av { font-size: 11px; color: var(--problem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-rsq { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
/* People (Square's look): a row a person, the days across; blocks in their shift's colour; a footer of labor per day. */
.dt-pg { display: grid; min-width: 640px; }
.dt-pg > * { min-width: 0; border-bottom: 1px solid var(--line); }
.dt-pg-h { padding: 10px 8px; font-weight: 600; font-size: 14px; border-bottom: 2px solid var(--ink) !important; }
.dt-pg-h.first, .dt-pg-name, .dt-pg-foot.first { border-right: 1px solid var(--line); }
.dt-pg-name { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; justify-content: center; padding: 8px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); cursor: pointer; min-height: 58px; }
.dt-pg-name:hover, .dt-pg-name:focus-visible { background: #FAFAF7; }
.dt-pg-name.held { box-shadow: inset 4px 0 0 var(--ink); background: var(--soft); }
.dt-pg-name.open { cursor: default; background: var(--soft); }
.dt-pg-cell { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 5px; border-right: 1px solid var(--soft); min-height: 58px; }
.dt-pg-cell.open { background: var(--soft); }
.dt-pg-cell.na { background: repeating-linear-gradient(135deg, transparent 0 6px, #E4E1DA 6px 7px); }
.dt-pg-cell.held { background: #FFFBEA; }
.dt-pg-add { all: unset; box-sizing: border-box; flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; color: transparent; cursor: pointer; font-size: 18px; }
.dt-pg-add.small { flex: 0 0 auto; min-height: 22px; font-size: 14px; }
.dt-pg-add:hover, .dt-pg-add:focus-visible, .dt-pg-cell.held .dt-pg-add { color: var(--muted); background: rgba(0,0,0,.03); }
@media (hover: none) { .dt-pg-add { color: #C9C6BE; } }
.dt-blk { position: relative; box-sizing: border-box; display: flex; background: var(--c); color: #fff; font-size: 12.5px; line-height: 1.25; }
.dt-blk-main { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 5px 7px; cursor: pointer; }
.dt-blk b { font-weight: 600; }
.dt-blk span { opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-blk.draft { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--c); }
.dt-blk.draft .dt-blk-main { padding-left: 10px; }
.dt-blk.open { background: var(--card); color: var(--problem); border: 1px dashed var(--problem); }
.dt-blk-main:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
/* People like Shifts (owner, Nov 7): the shift picked outlined, its × on hover, lit for someone held or dragged, a day lit as a drop. */
.dt-blk.picked { outline: 2px solid var(--ink); outline-offset: 1px; }
.dt-blk:hover .dt-x, .dt-blk.picked .dt-x { opacity: 1; }
.dt-blk .dt-pre { font-size: inherit; opacity: 1; }
.dt-placing .dt-blk.h-can.open { box-shadow: inset 0 0 0 2px #1E6B34; background: #E3F1E6; border-color: #1E6B34; color: #1E6B34; }
.dt-placing .dt-blk.h-can:not(.open) { outline: 2px solid var(--ink); outline-offset: 1px; }
.dt-placing .dt-blk.h-twice { box-shadow: inset 0 0 0 2px #8A6400; background: #FFF4D1; color: var(--ink); border-color: #8A6400; }
.dt-placing .dt-blk.h-ask { opacity: .42; }
.dt-placing .dt-blk.h-same { outline: 2px dashed var(--ink); outline-offset: 1px; }
.dt-blk.dt-over { transform: scale(1.03); opacity: 1 !important; z-index: 2; transition: transform .08s; }
.dt-pg-cell.h-can { background: #EEF6F0; }
.dt-pg-cell.h-twice { background: #FFF8E2; }
.dt-pg-cell.dt-over { box-shadow: inset 0 0 0 2px var(--ink); }
.dt-pg-cell.dt-over.h-ask { box-shadow: inset 0 0 0 2px #8A6400; }
.dt-roles .dt-blk, .dt-roles .dt-pg-name { -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .dt-blk.dt-over { transform: none; } }
.dt-pg-off { display: block; padding: 6px 8px; background: #E9E7E1; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.dt-pg-off.pending { background: transparent; border: 1px dashed #C9C6BE; }
.dt-pg-foot { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 10px; border-top: 2px solid var(--ink); background: #FAFAF7; }
.dt-pg-foot b { font-size: 15px; }
/* View as: a phone-sized frame with the team phone's own pieces. */
.dt-phone { position: relative; width: 390px; max-width: 100%; height: 760px; border: 10px solid #111; border-radius: 36px; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
.dt-ph-top { padding: 14px 16px 8px; background: #000; color: #fff; font-weight: 600; }
.dt-ph-main { flex: 1; overflow-y: auto; padding: 14px 14px 84px; display: flex; flex-direction: column; gap: 10px; }
.dt-ph-more { padding: 0 14px 12px; }
.dt-phone .ph-day .ph-dhead { cursor: default; }
.dt-ph-bar { position: absolute; height: 64px; padding-bottom: 0; }
.dt-ph-bar .ph-tab { display: flex; }

/* An iPad (owner, Nov 5: the builder is used on one): narrower columns, the week scrolls beside the bucket. */
@media (max-width: 1180px) { .dt-grid { min-width: 600px; } }

/* Menu: a dish just put on (owner, Nov 5), lit up for a moment. */
.mline.just-on { animation: just-on 2.4s ease-out 1; }
@keyframes just-on { 0%, 40% { background: var(--soft); box-shadow: inset 3px 0 0 var(--ink); } 100% { background: transparent; box-shadow: none; } }
.core-menu-refresh { margin-left: 8px; }

/* Recipe editor (owner, Nov 6): one "Add a line:" row; by-product and packaging rows in the list; ⋯ More in the bar. */
.core-addrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.core-addrow > b { font-size: 15px; margin-right: 4px; }
.core-bprow .amount, .core-bprow select { border-style: dashed; }
.core-bpname { border: 1px dashed var(--line); padding: 8px 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.core-bpfrom { border-style: dashed !important; }
.core-bprow .core-bpcost { color: var(--muted); }
.core-bprow .core-bpcost small { text-transform: none; letter-spacing: 0; white-space: nowrap; font-size: 11.5px; }
.core-bpcost small, .core-pkcost small { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.core-pkrow { background: var(--soft); }
.core-pkpick { width: 100%; min-width: 0; }
.core-pkserve button { font-size: 11.5px; padding: 4px 10px; }
.core-etotals { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; border-top-color: var(--line); }
@media (max-width: 700px) { .core-etotals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.core-more { position: relative; display: inline-block; }
.core-more-menu { position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 210px; background: var(--card); border: 1px solid var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 50; display: grid; }
.core-more-menu[hidden] { display: none; }
.core-more-menu > button { text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 11px 14px; font: inherit; color: var(--ink); cursor: pointer; }
.core-more-menu > button:last-child { border-bottom: 0; }
.core-more-menu > .core-more-del { color: var(--problem); }
.inv-tile.asking { border-top-color: var(--caution); background: color-mix(in srgb, var(--caution) 12%, var(--card)); }
.inv-tile .core-newdish { min-width: 260px; }

/* Printed menu: a dish's icons, a tap each (owner, Nov 6); the recipe's on and fixed. */
.pm-icon-chips { gap: 4px; }
.pm-ichip { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; padding: 2px 8px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.pm-ichip .pm-ic { width: 12px; height: 12px; opacity: .45; }
.pm-ichip.on { border-color: var(--ink); color: var(--ink); }
.pm-ichip.on .pm-ic { opacity: 1; }
.pm-ichip.locked { cursor: default; background: var(--soft); }
.pm-ichip small { font-size: 10px; color: var(--muted); letter-spacing: .04em; }

/* The line under a dish in the printed menu's editor (owner, Nov 6). */
.pm-line-box { flex: 1 1 260px; min-width: 0; }
.pm-line-in { flex: 1; min-width: 0; font-size: 13px; padding: 4px 8px; }

/* One person's time off history (owner, Nov 6). */
.tf-who { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-align: left; }
.tf-who:hover { text-decoration: underline; }
.tf-hstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tf-hstat { border: 1px solid var(--line, #d4d4cf); padding: 8px 10px; }
.tf-hn { font-size: 22px; font-weight: 700; }
.tf-hyear { margin: 10px 0 0; font-size: 15px; letter-spacing: .08em; }
.tf-hrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line, #d4d4cf); }
.tf-hrow.cancelled .strong { text-decoration: line-through; color: var(--muted, #5c5c58); }

/* The staff phone, Nov 6 (owner): no bar across the top, News in the bottom bar, time off in Shifts, shifts in their role's color. */
.ph-kick { width: 100%; display: flex; align-items: center; gap: 10px; max-width: 620px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 16px 0; box-sizing: border-box; }
.ph-kick-name { flex: 1; letter-spacing: .24em; font-size: 12px; text-transform: uppercase; color: var(--muted); }
.ph-me-wrap { position: relative; }
.ph-me { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; background: #000; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.ph-me:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.ph-me-menu { position: absolute; right: 0; top: 42px; z-index: 20; background: var(--card); border: 1px solid var(--line); padding: 10px 14px; display: grid; gap: 6px; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.ph-back { max-width: 620px; margin: 0 auto; padding: calc(10px + env(safe-area-inset-top)) 16px 0; box-sizing: border-box; }
.ph-no-top > main { padding-top: 8px; }
.ph-shift { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: var(--c); color: #fff; font-weight: 600; }
.ph-shift-time { font-weight: 400; white-space: nowrap; opacity: .95; }
.ph-next .ph-shift { margin: 6px 0 4px; padding: 10px 12px; font-size: 16px; }
.ph-days-c .ph-dhead, .ph-days-c .ph-day.off, .ph-days-c .ph-day.asked { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 12px; }
.ph-days-c .ph-dname { display: grid; line-height: 1.15; }
.ph-days-c .ph-dname small { font-weight: 400; color: var(--muted); font-size: 12px; }
.ph-day.is-today { box-shadow: inset 4px 0 0 #000; }
.ph-day.asked { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ph-offbar { padding: 8px 10px; background: #E3F1E6; color: #1E6B34; font-weight: 600; }
.ph-askbar { padding: 7px 10px; border: 1px dashed #9a9a94; color: var(--muted); }
.ph-more { padding: 0 14px 12px; display: grid; gap: 6px; }
.ph-withrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ph-sq { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
.ph-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.ph-big { position: relative; justify-content: center; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; font-weight: 600; padding: 12px 6px; }
.ph-shift-col { display: grid; gap: 4px; min-width: 0; }

/* Scheduling preview, Phone & covers (web/app.js coreDtCovers): layout only. The phone is .dt-phone with the live staff
   phone's own pieces inside (ph-*, phone-shell); the manager's side is the app's cards, lists, buttons and tags. */
.sp-wrap { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.sp-left { display: flex; flex-direction: column; gap: 10px; flex: none; width: 390px; max-width: 100%; }
.sp-right { flex: 1 1 380px; min-width: 0; max-width: 640px; }
.sp-left select { flex: 1; max-width: none; }
.dt-phone .sp-scroll { flex: 1; overflow-y: auto; }
.dt-phone .ph-dhead { cursor: pointer; }
.shell.phone-nav .sp-left { width: 100%; }
/* Covers and trades, the rules (owner, Nov 7): the question asked first and "Just taken." on top of the phone's page;
   the manager's choice between accepted offers. */
.dt-phone .ph-card.sp-ask { border-left-color: var(--caution-mark); margin-bottom: 12px; }
.dt-phone .ph-card.sp-err { border-left-color: var(--problem); margin-bottom: 12px; align-items: center; }
.sp-choice { padding: 10px 0; border-top: 1px solid var(--line); }
.sp-choice:first-child { border-top: 0; padding-top: 0; }
/* The time clock (owner, Nov 5–7): the restaurant's iPad, the boards' own pieces (.names, .pinpad, .dots, .btn). */
.dc-screen { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.dc-top { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--card); border-bottom: 1px solid var(--line); }
.dc-try { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.dc-now { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-body { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; }
.dc-h { margin: 0; }
.names .dc-sub { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; }
.dc-pinwrap, .dc-act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 40px; align-items: start; }
.dc-who { display: flex; flex-direction: column; gap: 14px; }
.dc-who .link { align-self: flex-start; }
.dc-dots { justify-content: flex-start; }
.dc-shift { display: flex; flex-direction: column; gap: 2px; font-size: 18px; }
.dc-actions { display: flex; flex-direction: column; gap: 12px; }
.dc-actions .link { align-self: center; }
.dc-big { height: 72px; font-size: 18px; width: 100%; }
.dc-done { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-top: 6vh; }
.dc-done .dc-big { max-width: 320px; }
@media (max-width: 900px), (orientation: portrait) {
  .dc-pinwrap, .dc-act { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dc-pinwrap .pinpad, .dc-actions { max-width: 520px; width: 100%; justify-self: center; }
}
@media (max-width: 600px) { .dc-top { flex-wrap: wrap; padding: 10px 16px; } .dc-try { flex-basis: 100%; } .dc-body { padding: 20px 16px 32px; } }

/* Timecards (owner, Nov 7): a manager's phone first; the app's cards, lists, tags and side panels. */
.dc-nav { align-items: center; }
.dc-nav h2 { margin: 0; }
.dc-rowbtn { all: unset; box-sizing: border-box; cursor: pointer; min-width: 0; padding: 2px 0; }
.dc-rowbtn:focus-visible { outline: 2px solid var(--link); }
.list > div.dc-day { padding-left: 14px; }
.dc-label { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.dc-tfield { display: flex; flex-direction: column; gap: 6px; }
.dc-trow { align-items: center; gap: 10px; }
.dc-trow > .btn { flex: none; min-width: 64px; }
.dc-tshow { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.dc-time { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.dc-reasons button { height: auto; min-height: 40px; padding: 6px 12px; }
.dc-brow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-brow input[type=time] { height: 40px; border: 1px solid var(--line); padding: 0 8px; font: inherit; }
.dc-num { width: 72px; height: 40px; border: 1px solid var(--line); padding: 0 8px; font: inherit; }
.sheet input[type=date], .sheet .list input[type=time] { height: 40px; border: 1px solid var(--line); padding: 0 8px; font: inherit; }
.sheet label > select { max-width: none; }
.sheet-wrap.dc-sheet { z-index: 40; }
.dc-json { max-height: 320px; overflow: auto; background: var(--card); border: 1px solid var(--line); padding: 10px; font-size: 11.5px; white-space: pre; }
.sheet .stack > .link { align-self: flex-start; }

/* The schedule preview's views on a phone: one row that scrolls sideways, never wrapping (Nov 7). */
@media (max-width: 700px) { .seg.dt-views { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .seg.dt-views button { white-space: nowrap; flex: none; } }

/* One shift, one panel (owner, Nov 7, from Square's Edit shift): beside the week, not over it; Who, Shift, Start, End,
   Note, then Remove shift and Save. Narrower than the page's two columns (an iPad upright): it stays on the right, the
   week scrolling beside it. */
.dt-shiftpanel { gap: 12px !important; }
/* Stuck beside the week: never taller than the screen (its bottom, Save, always reachable). */
@media (min-width: 1001px) { .dt-shiftpanel { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; } }
.dt-sp-top { align-items: flex-start; gap: 8px; }
.dt-sp-x { all: unset; box-sizing: border-box; flex: none; width: 32px; height: 32px; display: grid; place-items: center; font-size: 20px; line-height: 1; border-radius: 50%; background: var(--soft); cursor: pointer; }
.dt-sp-x:hover, .dt-sp-x:focus-visible { background: var(--line); }
.dt-sp-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dt-sp-l { font-size: 12px; font-weight: 600; color: var(--muted); }
.dt-sp-who { gap: 8px; align-items: center; min-height: 40px; padding: 0 0 2px; border-bottom: 1px solid var(--soft); }
.dt-sp-who .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-shiftpanel select, .dt-shiftpanel input[type=text] { width: 100%; max-width: none; box-sizing: border-box; height: 40px; }
.dt-shiftpanel input.st-time { width: 132px; height: 40px !important; font-size: 14px !important; padding: 0 8px !important; margin: 0; box-sizing: border-box; }
.dt-sp-times { display: flex; flex-direction: column; gap: 12px; }
.dt-sp-times .dt-endpick select { width: auto; flex: 1; min-width: 0; }
.dt-sp-foot { gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--soft); }
.dt-danger-btn { color: var(--problem); }
.dt-shiftpanel .dt-fillbox { display: flex; flex-direction: column; }
.dt-shiftpanel .dt-fill { max-height: 34vh; overflow-y: auto; overscroll-behavior: contain; }
.dt-shiftpanel .dt-links { padding-top: 2px; }
@media (max-width: 1000px) {
  .dt-shiftpanel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(360px, 100vw); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 0; border-width: 0 0 0 1px; box-shadow: -10px 0 28px rgba(0, 0, 0, .14); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .dt-shiftpanel .dt-fill { max-height: none; overflow: visible; }
  .dt-roles:has(.dt-shiftpanel) .page-main { padding-right: min(360px, 100vw); }
}
@media (max-width: 600px) { .dt-roles:has(.dt-shiftpanel) .page-main { padding-right: 0; } }

/* The schedule's new look (owner, Nov 7, "Schedule Look Sketch" v2; 8:55pm: not sent = white with a SOLID edge in its colour, open = solid grey): inside the white schedule box only, the rest stays
   Ops. Soft tinted shifts with rounded corners and their times under the name; no column lines or hatching; quiet day
   pills; a dot for the row's colour. Published = the tint; not sent yet = white, dashed in its colour; open = grey dashed. */
.dt-grid > * { border-bottom-color: var(--soft); }
.dt-grid > .dt-corner, .dt-grid > .dt-head { border-bottom: 1px solid var(--soft); border-right: 0; }
.dt-head { padding: 14px 6px 10px; }
.dt-dname { font-size: 14px; }
.dt-pill { border-radius: 999px; padding: 2px 8px; font-weight: 500; }
.dt-pill.ready { background: #E4F2E7; color: #1E6B34; padding-left: 8px; }
.dt-pill.short { font-weight: 600; }
.dt-rowhead { border-right: 0; box-shadow: none; padding: 10px 10px 10px 8px; }
.dt-rname { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dt-rname::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.dt-rowhead > .small { padding-left: 17px; }
.dt-cell { border-right: 0; padding: 5px 4px; }
.dt-cell.dt-none, button.dt-cell.dt-none { background: none; position: relative; }
button.dt-cell.dt-none::after { content: '+'; position: absolute; inset: 5px 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #B9B7B0; font-size: 18px; opacity: 0; transition: opacity .15s; }
button.dt-cell.dt-none:hover::after, button.dt-cell.dt-none:focus-visible::after { opacity: 1; background: #F7F6F3; }
.dt-slot { border-radius: 8px; background: color-mix(in srgb, var(--c) 15%, #fff); color: color-mix(in srgb, var(--c) 82%, #000); min-height: 42px; }
.dt-slot.draft { background: var(--card); color: color-mix(in srgb, var(--c) 82%, #000); border: 1.5px solid color-mix(in srgb, var(--c) 70%, #fff); box-shadow: none; }
.dt-slot.open { background: var(--card); color: var(--problem); border: 1.5px solid #D2CEC5; }
.dt-slot.ghost { border: 1.5px dashed #DDD9D0; border-radius: 8px; }
.dt-slot.picked { outline-offset: 2px; }
.dt-slot:not(.ghost):hover { filter: brightness(.97); }
.dt-slot-main { flex-direction: column; align-items: stretch; justify-content: center; gap: 1px; padding: 6px 9px; }
.dt-slot.draft .dt-slot-main, .dt-slot.open .dt-slot-main { padding: 4.5px 7.5px; }
.dt-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.dt-who { font-size: 13.5px; font-weight: 600; }
.dt-slot.open .dt-who { font-weight: 500; }
.dt-t { font-size: 12px; opacity: .8; }
.dt-t.own { opacity: 1; font-weight: 600; }
.dt-note { font-size: 12px; }
.dt-ns { font-size: 11px; }
.dt-slot .dt-av { display: none; }
/* The team's boxes in the right pane, rounded to match the shifts (owner, Nov 7). */
.dt-chip { border-radius: 8px; }
.dt-sw { border-radius: 3px; background: color-mix(in srgb, var(--c, #2F5DA8) 22%, #fff); }
.dt-sw.draft { background: #fff; border: 1.5px solid color-mix(in srgb, var(--c, #2F5DA8) 70%, #fff); box-shadow: none; box-sizing: border-box; }
.dt-sw.ghost { border: 1.5px dashed #C9C6BE; box-sizing: border-box; }
.dt-mark { position: absolute; top: 6px; right: 6px; margin: 0; width: 16px; height: 16px; line-height: 16px; font-size: 10.5px; box-shadow: none; }
/* People's blocks, the same way. */
.dt-pg-h { border-bottom: 1px solid var(--soft) !important; font-size: 14px; }
.dt-pg-h.first, .dt-pg-name, .dt-pg-foot.first { border-right: 0; }
.dt-pg-name { border-right: 0; border-bottom-color: var(--soft); }
.dt-pg-cell { border-right: 0; }
.dt-pg-cell.na { background: #F7F6F3; }
.dt-blk { border-radius: 8px; background: color-mix(in srgb, var(--c) 15%, #fff); color: color-mix(in srgb, var(--c) 82%, #000); }
.dt-blk-main { padding: 6px 9px; }
.dt-blk span { opacity: .8; }
.dt-blk.draft { background: var(--card); color: color-mix(in srgb, var(--c) 82%, #000); border: 1.5px solid color-mix(in srgb, var(--c) 70%, #fff); box-shadow: none; }
.dt-blk.draft .dt-blk-main { padding-left: 7.5px; }
.dt-blk.open { background: var(--card); color: var(--problem); border: 1.5px solid #D2CEC5; }
/* Schedule preview, how people are told (owner, Nov 7): the Notifications list and changes seen (Phone & covers), schedule
   News on the phone like a cover or trade item, Shifts opened at a day, and what a publish sent. */
.sp-nrow { align-items: center; }
.sp-ntags { flex: none; }
.ph-card.sp-sched { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border-left-color: #2F5DA8; align-items: flex-start; }
.ph-card.sp-sched:active { background: var(--soft); }
.ph-card.sp-sched .ann-dot { margin-top: 6px; }
.ph-card.sp-sched .chev { align-self: center; color: var(--muted); }
.ph-day.sp-focus { box-shadow: inset 4px 0 0 #2F5DA8; background: #EEF3FB; }
.dt-sent > div { align-items: flex-start; }
.dt-sent-how { margin-top: 4px; }
/* Shifts and days (owner, Nov 7, 3:42pm): a shift is a position with no times; the row head says "Closer · Server". The
   usual week drawn as the Shifts week is, without names; its Shifts list; Alt (Option) dragging copies a shift. */
.dt-rrole { font-weight: 400; color: var(--muted); white-space: nowrap; }
/* An empty day's button: no column line, the soft row line (as the new look's other cells). */
button.dt-cell { border-right: 0; border-bottom-color: var(--soft); }
.dt-usualwk .dt-tools { margin: 0; align-items: center; }
.dt-usualwk .dt-tools .dt-status { margin: 0; }
.dt-ukeep { margin: -8px 0 2px; }
.dt-usual .dt-slot.published { cursor: grab; }
.dt-usual button.dt-cell.dt-adding::after { opacity: 1; background: #F7F6F3; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.dt-copy-over { box-shadow: inset 0 0 0 2px var(--ink); border-radius: 10px; background: #F7F6F3 !important; }
.dt-slot.dt-drag-src.dt-copy-src, .dt-blk.dt-drag-src.dt-copy-src { opacity: 1; outline: 2px dashed color-mix(in srgb, var(--c) 70%, #fff); outline-offset: 1px; }
.dt-ghost-line.r { color: #9FE0B0; }
.dt-copyto .btn { min-width: 48px; }
.dt-upanel .dt-sp-foot { margin-top: 2px; }
@media (hover: none) { .dt-alt-tip { display: none; } }
/* The Shifts list. */
.dt-slist { gap: 0; }
.dt-srow { display: grid; grid-template-columns: 10px minmax(110px, 1fr) minmax(120px, 150px) auto; grid-template-areas: 'dot name role del' '. shades uses uses'; gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--soft); }
.dt-srow .dt-sdot { grid-area: dot; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.dt-srow > input { grid-area: name; min-width: 0; }
.dt-srow > select { grid-area: role; min-width: 0; }
.dt-srow > .dt-danger { grid-area: del; justify-self: end; }
.dt-srow > .dt-shades { grid-area: shades; gap: 6px; }
.dt-srow > .dt-suses { grid-area: uses; justify-self: end; }
.dt-shade { all: unset; width: 22px; height: 22px; border-radius: 6px; background: var(--c); cursor: pointer; box-sizing: border-box; }
.dt-shade.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.dt-shade:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.dt-snew input { flex: 1; min-width: 140px; }

/* The picked shift (owner, Nov 7, 10pm): a compact card, then the team as tiles regrouped for it. */
.dt-sp-card { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
.dt-shiftpanel .dt-sp-times { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.dt-sp-team { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.dt-shiftpanel .dt-fill { max-height: none; overflow: visible; gap: 6px; }
.dt-fill .dt-grp { padding: 6px 0 0; }
.dt-chip.dt-person { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 3px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 8px; }
.dt-chip.dt-person.can .dt-chip-av { color: var(--muted); }
.dt-chip.dt-person.cant, .dt-chip.dt-person.other { opacity: .6; }
.dt-chip.dt-person.held { opacity: 1; cursor: default; }
.dt-sp-more summary { cursor: pointer; color: var(--link); padding: 4px 0; }
.dt-sp-more[open] summary { margin-bottom: 8px; }
/* Add a shift's shifts as the week's boxes (owner, Nov 7, 10pm). */
.dt-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.dt-kind { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; min-height: 42px; border-radius: 8px; cursor: pointer;
  background: color-mix(in srgb, var(--c) 15%, #fff); color: color-mix(in srgb, var(--c) 82%, #000); border: 1.5px solid transparent; }
.dt-kind.other { --c: #5C5C58; background: var(--card); border: 1.5px dashed #D2CEC5; color: var(--ink); }
.dt-kind:hover, .dt-kind:focus-visible { filter: brightness(.97); }
.dt-kind.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.sheet .dt-sp-times { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 12px; }
.sheet .dt-sp-times input.st-time { width: 132px; height: 40px !important; font-size: 14px !important; padding: 0 8px !important; margin: 0; box-sizing: border-box; }
.sheet .dt-sp-times select { height: 40px; }
.sheet .dt-sp-f { align-items: stretch; }

/* Less above the week (owner, Nov 8, "B"): Team and its tag on one line; the tabs; then the week, its status, Week ▾ and Publish. */
.page-head.dt-head { padding-bottom: 0; margin-bottom: 4px; flex-direction: row; align-items: center; }
.page-head.dt-head > .grow { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.page-head.dt-head h1 { margin: 0; }
.page-head.dt-head .sub { margin: 0; }
.dt-views.seg button { height: 36px; padding: 0 14px; font-size: 13px; }
.dt-roles > .tf-top { margin-bottom: 0; }
.dt-weekline { align-items: center; gap: 8px 12px; }
.dt-weekline .dt-status { margin: 0; }
.dt-weekstep { align-items: center; }
.dt-weekstep button { height: 36px; padding: 0 12px; font-size: 17px; color: var(--muted); }
.dt-weekstep-l { padding: 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.core-more-menu.down { top: calc(100% + 6px); bottom: auto; }
.dt-foot .dt-legend { margin: 0; }
/* The picked shift in two lines (owner, Nov 8); Edit opens its fields in place. */
.dt-sp-sum { display: flex; flex-direction: column; gap: 4px; }
.dt-sp-l1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dt-sp-nm { font-size: 19px; font-weight: 700; }
.dt-sp-rl { color: var(--muted); font-size: 14px; }
.dt-sp-tm { margin-left: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dt-sp-note { color: var(--muted); }
.dt-sp-l2 { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.dt-sp-l2 > .grow { flex: 1; }
.dt-sp-l2 .dt-sp-person { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-shiftpanel .dt-sp-card { padding-top: 10px; border-top: 1px solid var(--soft); }
.dt-shiftpanel .dt-sp-top { align-items: center; }

/* Availability (owner, Nov 8): everyone's usual week in People's grid (its rows, borders and type; a cell's words and
   a change coming under them), and one person's week in the schedule's right panel, a day at a time. */
.da-t, .da-sub { flex: none; }
.da-t { padding-left: 6px; font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.da-sub { padding-left: 6px; font-size: 11px; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-sub.da-ask { color: var(--caution); font-weight: 600; }
.da-day { padding-top: 10px; border-top: 1px solid var(--soft); }
.da-week > .da-day:first-child { padding-top: 0; border-top: 0; }
.da-day .seg { display: flex; width: 100%; box-sizing: border-box; }
.da-day .seg button, .dt-shiftpanel .da-day .seg button { flex: 1 1 auto; min-width: 0; padding: 0 6px; white-space: nowrap; font-size: 11.5px; letter-spacing: .04em; }
.da-times { align-items: center; gap: 6px; }
.da-times .dt-endpick select { width: auto; }

/* Messages, the team chat (owner, Nov 8; web/app.js coreDtMessages, coreSpMessages): the threads beside the conversation.
   Threads are plain bordered rows; a message is a plain block, theirs in the app's soft grey, mine dark as .btn.dark. */
.dt-areas .dm-tabn { margin-left: 6px; }
.dm-tabn[hidden] { display: none; }
.dm-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.dm-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dm-list { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--card); }
.dm-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; box-sizing: border-box; padding: 8px 12px 8px 9px; border: 0; border-top: 1px solid var(--soft); border-left: 3px solid transparent; background: none; color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.dm-row:first-child { border-top: 0; }
.dm-row.on { border-left-color: var(--ink); background: var(--soft); }
.dm-row > .grow { flex: 1; min-width: 0; }
.dm-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-right { min-width: 0; }
.dm-head h2 { margin: 0; }
.dm-msgs { display: flex; flex-direction: column; gap: 12px; min-height: 220px; max-height: calc(100vh - 380px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; }
.dm-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 78%; }
.dm-msg.mine { align-self: flex-end; align-items: flex-end; }
.dm-bubble { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.dm-msg.mine .dm-bubble { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Messages polish (owner, Nov 9): who's seen it as faces. */
.dm-seen { gap: 4px; align-items: center; }
.dm-seenface { border: 0; background: none; padding: 0; cursor: pointer; line-height: 0; }
.dm-seenface .dt-av { width: 22px; height: 22px; font-size: 9.5px; }
.dm-body { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-reacts .link { padding: 2px 0; }
.dm-compose textarea { width: 100%; box-sizing: border-box; }
.dm-compose .dm-urgent { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.dm-compose .dm-urgent input { width: 20px; height: 20px; margin: 0; }
.dm-intro { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; cursor: pointer; }
.dm-banner { display: flex; flex-direction: column; gap: 4px; }
.dm-log { padding-top: 8px; }
.dm-code { font: 600 28px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 8px; width: 240px; max-width: 100%; box-sizing: border-box; padding: 10px 12px; text-align: center; }
.dm-phrow { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dm-phrow > .grow { flex: 1; min-width: 0; }
.dm-phrow.new { border-left-color: var(--ink); }
.dt-phone .dm-msgs { min-height: 0; max-height: none; overflow: visible; }
.dt-phone .dm-msg { max-width: 88%; }
@media (max-width: 760px) { .dm-wrap { grid-template-columns: minmax(0, 1fr); } .dm-msgs { max-height: 60vh; } }
/* Messages in the side panel (owner, Nov 8 evening): a conversation fills the panel, its messages scrolling between the
   line under the title and the composer at the bottom; an announcement is the live .ann-item, across. */
.dm-spbox { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dm-sp.dm-spt > .core-up-body { flex: 1 1 0; min-height: 0; }
.dm-spt .dm-spbox { flex: 1 1 0; min-height: 0; }
.dm-spt .dm-msgs { flex: 1 1 0; min-height: 160px; max-height: none; }
.dm-back { align-self: flex-start; padding: 0; }
.dm-spfoot { padding-top: 4px; }
.dm-reacts .btn.small-btn { margin-right: 4px; }

/* The new Today (owner, Nov 8; the r3 mockups): the week as floor-plan cards, the side panel's contents, Month's
   layers. Nov 9 (mockup E): the panel over the page and the rows under the days are in their own block below. */
.dy-modes button { min-width: 64px; }
.dy-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dy-top .seg button { min-width: 34px; height: 34px; }
.dy-label { font-size: 17px; font-weight: 600; padding: 0 4px; }
.dy-up { color: var(--good); }
.dy-down { color: var(--problem); }
.dy-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.dy-day { box-sizing: border-box; cursor: pointer; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--line); padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.35; min-width: 0; }
.dy-day:hover { border-color: var(--muted); border-top-color: var(--line); }
.dy-day.today { border-top-color: var(--ink); }
.dy-day.picked { outline: 2px solid var(--ink); outline-offset: -1px; }
/* Closed (owner, Nov 8: no stripes): a plain grey card; the date stays dark; "Closed" in grey. A blackout day is open. */
.dy-day.dy-cl { background: var(--soft); }
.dy-closed { color: var(--muted); font-weight: 600; }
.dy-blackout { color: var(--problem); font-weight: 600; font-size: 12px; }
.dy-moreline { color: var(--muted); }
.dy-h { display: flex; align-items: center; gap: 4px 7px; flex-wrap: wrap; }
.dy-dn { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dy-num { font-size: 21px; font-weight: 500; line-height: 1; }
.dy-today { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--card); padding: 2px 5px; }
.dy-wx { margin-left: auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; }
.dy-lo { color: var(--muted); }
.dy-rain { color: var(--link); font-size: 12px; }
.dy-it { display: block; cursor: pointer; }
.dy-it:hover .dy-flag, .dy-it:hover > span:not(.dy-flag) { text-decoration: underline; text-underline-offset: 2px; }
.dy-flag { display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 2px 6px; }
.dy-flag.short { background: var(--problem-soft); color: var(--problem); }
.dy-flag.tight { background: var(--caution-soft); color: var(--caution); }
.dy-flag.black { background: var(--ink); color: var(--card); letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.dy-full { color: var(--muted); font-size: 12.5px; }
.dy-line { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.dy-line > span:last-child { min-width: 0; }
.dy-tag { flex: none; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 5px; background: var(--soft); color: var(--ink); }
.dy-tag.good { background: var(--good-soft); color: var(--good); }
.dy-tag.ev { background: color-mix(in srgb, var(--series-3) 14%, var(--card)); color: var(--series-6); }
.dy-more { color: var(--muted); font-size: 12px; white-space: nowrap; }
.dy-note { color: var(--ink); font-size: 12.5px; }
.dy-note::before { content: '— '; color: var(--muted); }
.dy-go { color: var(--muted); font-size: 18px; line-height: 1; }
.dy-bad { color: var(--problem); font-weight: 600; }
.dy-warn { color: var(--caution); font-weight: 600; }
/* The panel: a day, Waiting on you's rows and lines, an event */
.dy-ptitle { margin: 0; font-size: 18px; }
.dy-wy-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 6px 0; font-size: 13.5px; line-height: 1.35; cursor: pointer; }
.dy-m { color: var(--muted); font-size: 12.5px; }
.dy-w { color: var(--caution); font-size: 12px; }
.dy-acts { display: flex; gap: 6px; justify-content: flex-end; text-align: right; }
.dy-open { align-self: flex-start; }
.dy-alert { border-left: 3px solid var(--problem); background: var(--problem-soft); padding: 8px 10px; font-size: 14px; }
.dy-alert.bad b { color: var(--problem); }
.dy-alert.warn { border-left-color: var(--caution); background: var(--caution-soft); }
.dy-alert.warn b { color: var(--caution); }
.dy-sp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; font-size: 13.5px; }
.dy-r { color: var(--muted); text-align: right; }
.dy-r.in { color: var(--good); }
.dy-r.late { color: var(--caution); font-weight: 600; }
.dy-sp-row .dy-open { color: var(--problem); font-weight: 600; }
.dy-pl { display: flex; flex-direction: column; }
.dy-pl-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--soft); font-size: 14px; }
.dy-ok { color: var(--good); font-weight: 700; }
.dy-bar { height: 6px; background: var(--soft); margin-top: 4px; }
.dy-bar i { display: block; height: 100%; background: var(--series-3); }
@container main (max-width: 800px) {
  .dy-lo, .dy-rain, .dy-note, .dy-line > span:last-child, .dy-busy .muted, .dy-more { display: none; }
  .dy-day { padding: 8px 9px 10px; }
  .dy-line { gap: 4px; }
}
/* Month: the layers over the calendar */
.dy-layers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dy-layers .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.dy-layers .chip.on { background: var(--card); color: var(--ink); border-color: var(--ink); }
.dy-layers .chip.on::before { content: '✓'; font-size: 12px; }
.dy-sw { width: 10px; height: 10px; display: inline-block; background: var(--sw); }
.dy-sw.blackouts { background: repeating-linear-gradient(135deg, var(--card) 0 3px, var(--problem) 3px 5px); }
.dy-sw.closed { border: 1px solid var(--line); }
.dy-month .cal-grid .cal-cell { min-height: 96px; height: 96px; }
.dy-month .cal-grid .cal-cell.dy-cl { background: var(--soft); color: var(--ink); }
.dy-month .cal-grid .cal-cell.dy-cl .cal-tag { color: var(--muted); }
.dy-mk { display: block; font-size: 11px; line-height: 1.25; padding: 1px 4px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; }
.dy-mk.town { background: color-mix(in srgb, var(--series-4) 14%, var(--card)); color: var(--series-10); }
.dy-mk.home { background: var(--good-soft); color: var(--good); }
.dy-mk.ev { background: color-mix(in srgb, var(--series-3) 14%, var(--card)); color: var(--series-6); }
.dy-mk.mgmt { background: var(--soft); color: var(--ink); border-left: 3px solid var(--ink); }
.dy-mk.bo { color: var(--problem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; padding-left: 0; }

/* The time clock's gaps (owner, Nov 8): the clock's steps in the practice board's sheet (one column), a shift not clocked
   out on their phone (the problem mark, as a refused tap), the time fields on the phone. */
.dc-insheet .dc-pinwrap, .dc-insheet .dc-act { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.dc-insheet .pinpad { max-width: 360px; width: 100%; }
.dt-phone .ph-card.dc-phfix { border-left-color: var(--problem); margin-bottom: 12px; }
/* The practice board's clock: a round icon button, the same as the board's "?" (.help-q), not tied to Help's open state. */
.dc-bclock { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; margin-left: 4px; }
.dc-bclock:hover { border-color: var(--ink); }
/* A fix request's row: on a narrow screen Approve / Decline go under what's asked, not squeezing it. */
.list > div.dc-ask > .dc-rowbtn { flex: 1 1 240px; }
.dc-phtime { height: 40px; border: 1px solid var(--line); padding: 0 8px; font: inherit; background: var(--card); color: var(--ink); }

/* Team › Roles (owner, Nov 8): a role a row (its colour, name, Manager, how many trained, Edit), Front beside Kitchen on a
   computer; the colours to pick from as round swatches, the picked one ringed. */
.dr-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.dr-row { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 0; border-top: 1px solid var(--line); }
.dr-row.on { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.dr-sw { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; padding: 0; }
.dr-sw.on { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Bubbles, one family (owner, Nov 8): People's days without a shift and Availability's days as bubbles the size and
   shape of People's shift blocks, the words always inside. People: Time-off a step darker grey, Not available a lighter
   grey, a day they can work white with the not-started shifts' dashed edge (its hours small when only part of the day),
   a + on hover. Availability: the .tag ok / warn / bad tints, a change coming on a second line; the day open outlined. */
.db-bub { all: unset; box-sizing: border-box; position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 32px; min-width: 0; padding: 0 8px; border-radius: 8px; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; }
button.db-bub { cursor: pointer; }
button.db-bub:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.db-bub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.db-off { background: #E9E7E1; color: var(--muted); font-weight: 600; }
.db-na { background: #F2F1ED; color: var(--muted); }
.db-empty { background: var(--card); border: 1.5px dashed #DDD9D0; padding: 0 6.5px; color: var(--muted); font-size: 11.5px; }
.db-plus { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #B9B7B0; font-size: 18px; opacity: 0; }
.db-hrs + .db-plus { justify-content: flex-end; padding-right: 8px; }
.dt-pg-cell.held .db-plus, button.db-empty:focus-visible .db-plus { opacity: 1; }
@media (hover: hover) { button.db-empty:hover { background: #F7F6F3; } button.db-empty:hover .db-plus { opacity: 1; } }
.db-all { background: var(--good-soft); color: var(--good); font-weight: 600; }
.db-part { background: var(--caution-soft); color: var(--caution); font-weight: 600; font-variant-numeric: tabular-nums; }
.db-no { background: var(--problem-soft); color: var(--problem); font-weight: 600; }
.db-bub.db-two { flex-direction: column; align-items: stretch; justify-content: center; gap: 1px; }
.db-sub { font-size: 10.5px; font-weight: 400; color: var(--muted); }
.db-sub.db-ask { color: var(--caution); font-weight: 600; }
.db-bub.db-on { outline: 2px solid var(--ink); outline-offset: 1px; }
/* An iPad's narrower days: a touch smaller, as People's blocks, so "5:30pm–Close" fits. */
@media (max-width: 1300px) { .db-bub { padding: 0 5px; font-size: 11.5px; } .db-empty { padding: 0 3.5px; font-size: 11px; } }

/* Timecards tightened (owner, Nov 8): rows like the People grid (one line, 40px, 14px names, 13px detail, hours to the
   right in tabular figures); one list newest first under day headings; a status dot (the -mark shades, as dots are) with
   its words in the plain shade; the filters on one row under the period. */
.list.tc-c > div { min-height: 40px; padding: 4px 0; gap: 10px; font-size: 14px; }
.list.tc-c .dc-rowbtn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list.tc-c .block { display: inline; }
.list.tc-c .small.block { margin-left: 8px; font-size: 13px; }
.list.tc-c .btn.small-btn { height: 32px; }
.tc-filters { margin-top: -6px; }
.tc-list { display: flex; flex-direction: column; }
.tc-day { padding: 14px 0 6px; scroll-margin-top: 16px; }
.tc-list > .tc-day:first-child { padding-top: 2px; }
.tc-row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 9px minmax(56px, .9fr) minmax(70px, 1fr) minmax(156px, 1.3fr) minmax(86px, .9fr) 64px minmax(0, 1.6fr);
  align-items: center; gap: 10px; height: 40px; border-top: 1px solid var(--soft); font-size: 13px; color: var(--muted); cursor: pointer; }
.tc-row.tc-p { grid-template-columns: 9px minmax(110px, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) 64px; }
.tc-row:hover { background: #F7F6F3; }
.tc-row:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.tc-row > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-row .tc-nm { font-size: 14px; font-weight: 600; color: var(--ink); }
.tc-hrs { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.tc-row.yellow .tc-why { color: var(--caution); font-weight: 600; }
.tc-row.red .tc-why { color: var(--problem); font-weight: 600; }
.tc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
.tc-dot.yellow { background: var(--caution-mark); }
.tc-dot.red { background: var(--problem); }
.tc-total { min-height: 40px; border-top: 1px solid var(--soft); font-size: 14px; }
@media (max-width: 700px) {
  .tc-filters select { flex: 1 1 0; min-width: 8em; max-width: none; }
  .tc-row, .tc-row.tc-p { grid-template-columns: 9px auto minmax(0, 1fr) 58px; grid-template-areas: "dot nm time hrs" ". role why why"; height: auto; min-height: 48px; row-gap: 1px; column-gap: 10px; padding: 6px 0; }
  .tc-row.tc-p { grid-template-areas: "dot nm n hrs" ". role role role"; }
  .tc-row .tc-dot { grid-area: dot; } .tc-row .tc-nm { grid-area: nm; } .tc-row .tc-time { grid-area: time; text-align: right; } .tc-row .tc-hrs { grid-area: hrs; }
  .tc-row .tc-role { grid-area: role; } .tc-row .tc-why { grid-area: why; } .tc-row .tc-n { grid-area: n; text-align: right; } .tc-row .tc-brk { display: none; }
  .list.tc-c .block, .list.tc-c .small.block { display: block; margin-left: 0; }
  .list.tc-c .dc-rowbtn { white-space: normal; }
}

/* Past nights like it (owner, Nov 9): an event on Today opens itself in the column, with the last 5 of its kind against a
   usual night that weekday; its lines under In town open it too. */
.gh-past { display: flex; flex-direction: column; gap: 6px; }
.gh-nights { row-gap: 8px; margin-top: 4px; }
.gh-sales { color: var(--ink); font-variant-numeric: tabular-nums; }
.gh-town { cursor: pointer; }
.gh-town .dy-go { margin-left: auto; }

/* One date picker (owner, Nov 9: Square's report picker's layout, the app's own look): a popover under its button,
   the shortcuts down the left (the picked one shaded), the month on the right, the days typed in boxes under it. A range
   is a grey band between its two black days; today is outlined; a dot marks a day with something on it. On a phone it's
   the sheet from the bottom, the shortcuts a row of chips. */
.dp-pop { position: absolute; z-index: 50; display: flex; gap: 12px; padding: 12px; background: var(--card); border: 1px solid var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.dp-sc { display: flex; flex-direction: column; min-width: 120px; padding-right: 12px; border-right: 1px solid var(--line); }
.dp-sc > button { height: 36px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; white-space: nowrap; }
.dp-sc > button:hover:not(:disabled) { background: var(--soft); }
.dp-sc > button.on { background: var(--soft); font-weight: 600; }
.dp-sc > button:disabled { color: var(--muted); opacity: .5; cursor: default; }
.dp-cal { width: 280px; display: flex; flex-direction: column; gap: 10px; }
.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.dp-title { flex: 1; height: 40px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.dp-d { position: relative; height: 36px; padding: 0; border: 1px solid transparent; background: none; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.dp-d:hover { border-color: var(--line); }
.dp-d.dp-today { border-color: var(--ink); }
.dp-d.dp-in { background: var(--soft); }
.dp-d.dp-on { background: var(--ink); border-color: var(--ink); color: var(--card); font-weight: 600; }
.dp-d.dp-no { color: var(--muted); opacity: .45; cursor: default; }
.dp-d.dp-no:hover { border-color: transparent; }
.dp-dot { position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.dp-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.dp-months > button { height: 40px; border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.dp-months > button.on { background: var(--ink); border-color: var(--ink); color: var(--card); font-weight: 600; }
.dp-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-boxes.dp-one { grid-template-columns: minmax(0, 1fr); }
.dp-boxes label { gap: 4px; }
.dp-boxes input[type=text] { width: 100%; height: 40px; box-sizing: border-box; padding: 0 10px; font-size: 14px; }
.dp-at button { color: var(--ink); }
.dt-weekstep button.dp-wk { padding: 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.dp-phone { display: flex; flex-direction: column; gap: 12px; }
.dp-phone .dp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.dp-phone .dp-chips > .chip { flex: none; }
.dp-phone .dp-cal { width: 100%; }
.dp-phone .dp-d { height: 44px; font-size: 16px; }
.dp-phone .dp-boxes input[type=text] { height: 48px; font-size: 16px; }

/* Today's day tiles: the weather stays on the date's line (owner, Nov 9: "the weather is also jumping around"): one
   line in every tile; a narrow tile drops the rain, then the low, never wraps the high under the date. */
.dy-day { container-type: inline-size; }
.dy-h { flex-wrap: nowrap; min-width: 0; }
.dy-h .dy-wx { flex-shrink: 1; min-width: 0; overflow: hidden; }
@container (max-width: 200px) { .dy-h .dy-rain { display: none; } }
@container (max-width: 160px) { .dy-h .dy-lo { display: none; } }
@container (max-width: 125px) { .dy-h .dy-wx svg { display: none; } }

/* Messages live (owner, Nov 9; web/app.js coreDmPickBody, coreMsgPhone): New message picks one or several people, a
   tick on each one picked and To: above; on the staff phone a conversation runs down the page. */
.dm-to { min-height: 32px; align-items: center; }
.dm-pick.on { background: var(--soft); }
.dm-tick { flex: none; width: 18px; text-align: center; font-weight: 700; }
.phone-shell .dm-msgs { min-height: 0; max-height: none; overflow: visible; }
.phone-shell .dm-msg { max-width: 88%; }
.dm-phrow .dt-av { flex: none; }

/* Messages in Square's layout (owner, Nov 9; web/app.js coreDmList, coreDmThread, coreDmMsg, coreDmComposer): the list
   with a round pencil, a search, a picture a row and thin lines between; a conversation on white under a slim bar, date
   breaks, theirs light grey on the left, mine in ink on the right, the box fixed at the bottom; grey text buttons. */
.dm-tbtn { background: none; border: 0; padding: 6px 0; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.dm-tbtn:hover { color: var(--ink); }
.dm-tbtn[hidden], .dm-pencil[hidden] { display: none; }
.dm-pencil { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; }
.dm-title { align-items: center; }
.dm-findrow { gap: 8px; }
.dm-findwrap { position: relative; display: flex; flex-direction: row; align-items: center; gap: 0; font-weight: 400; }
.dm-findwrap svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.dm-findrow .dm-findwrap .dm-find[type=search] { width: 100%; height: 44px; box-sizing: border-box; border: 1px solid var(--line); background: var(--card); padding: 0 12px 0 38px; font-size: 16px; -webkit-appearance: none; appearance: none; }
.dm-sqlist { border: 0; background: none; }
.dm-row.dm-sq { align-items: flex-start; gap: 12px; min-height: 0; padding: 12px 2px; border-left: 0; border-top: 1px solid var(--line); }
.dm-row.dm-sq:first-child { border-top: 0; }
.dm-row.dm-sq.on { background: var(--soft); }
.dm-rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-rowtext > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-sq .dm-nm { font-size: 16px; }
.dm-rowside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 2px; }
.dm-pic { flex: none; position: relative; width: 44px; height: 44px; }
.dm-pic > .dt-av { width: 44px; height: 44px; font-size: 15px; }
.dm-store { display: inline-grid; place-items: center; border-radius: 50%; background: var(--card); border: 1px solid var(--line); box-sizing: border-box; color: var(--ink); }
.dm-pic2 > .dt-av { position: absolute; width: 31px; height: 31px; font-size: 11.5px; box-sizing: border-box; }
.dm-pic2 > .dt-av:first-child { left: 0; top: 0; }
.dm-pic2 > .dt-av:last-child { right: 0; bottom: 0; border: 2px solid var(--bg); }
/* A conversation: the slim bar, then the messages filling the space, the box at the bottom. */
.dm-th { display: flex; flex-direction: column; min-height: 0; background: var(--card); }
.dm-top { flex: none; display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.dm-topname { flex: 1; min-width: 0; padding: 0 6px; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-top .dm-tbtn { flex: none; padding: 6px 8px; white-space: nowrap; }
.dm-ib { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; }
.dm-ib.on { background: var(--soft); }
.dm-thbody, .dm-pane { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.dm-th .dm-pins { flex: none; max-height: 35%; overflow-y: auto; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.dm-th .dm-msgs { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; gap: 3px; padding: 4px 16px 12px; }
.dm-info { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.dm-person { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.dm-break { align-self: center; text-align: center; padding: 14px 0 4px; }
.dm-none { padding: 12px 0; }
.dm-msgs .dm-msg { max-width: 86%; gap: 3px; }
.dm-msg.first { margin-top: 8px; }
.dm-by { margin-left: 38px; }
.dm-line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; max-width: 100%; }
.dm-face { flex: none; width: 30px; }
.dm-msgs .dm-bubble { min-width: 0; padding: 9px 14px; border: 0; border-radius: 18px; background: var(--soft); }
.dm-msgs .dm-msg.mine .dm-bubble { background: var(--ink); color: var(--card); }
.dm-url { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-word; }
.dm-rxbtn { flex: none; align-self: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); display: inline-grid; place-items: center; cursor: pointer; }
.dm-rxbtn:hover, .dm-rxbtn[aria-expanded="true"] { color: var(--ink); background: var(--soft); }
.dm-rx { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 2px 8px; font: inherit; font-size: 13px; cursor: pointer; }
.dm-rx.on { border-color: var(--ink); font-weight: 600; }
.dm-rxpick { margin-left: 38px; padding: 3px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.dm-rxpick[hidden] { display: none; }
.dm-rx.dm-rx1 { border-color: transparent; border-radius: 50%; padding: 2px 5px; font-size: 18px; }
.dm-rx.dm-rx1.on { border-color: var(--ink); }
.dm-msg:not(.mine) > .dm-reacts, .dm-msg > .dm-reply { margin-left: 38px; }
.dm-msg > .dm-reply { align-self: flex-start; padding: 2px 0; }
.dm-msg.mine > .dm-reacts { justify-content: flex-end; }
.dm-msg .dm-seen { align-self: flex-end; padding-top: 2px; }
.dm-seen .dm-seenface .dt-av { width: 20px; height: 20px; font-size: 9px; }
.dm-annwrap { align-self: stretch; margin: 8px 0; }
.dm-th .dm-compose { flex: none; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--card); }
.dm-compose { display: flex; flex-direction: column; gap: 6px; }
.dm-boxrow { display: flex; align-items: flex-end; gap: 8px; }
.dm-boxrow .dm-urgent { flex: none; align-self: center; gap: 5px; font-size: 12px; }
.dm-boxrow .dm-urgent input { width: 16px; height: 16px; }
.dm-box { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 4px; padding: 3px 3px 3px 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.dm-box:focus-within { border-color: var(--ink); }
.dm-compose .dm-box textarea { flex: 1; min-width: 0; height: 38px; max-height: 132px; padding: 8px 0; border: 0; outline: none; resize: none; background: none; font-size: 16px; line-height: 1.35; }
.dm-send { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--card); display: inline-grid; place-items: center; cursor: pointer; }
.dm-send.words { width: auto; padding: 0 12px; border-radius: 18px; font-size: 12px; font-weight: 600; }
/* The staff phone: the conversation fills the screen above the tab bar; the box sits just over it. */
.phone-shell.dm-phshell { background: var(--card); }
.phone-shell.dm-phshell > main { height: 100vh; height: 100dvh; padding: env(safe-area-inset-top) 0 calc(64px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow: hidden; }
.dm-phshell .dm-th { flex: 1 1 0; }
.dm-phshell .dm-top { position: sticky; top: 0; z-index: 1; background: var(--card); }
/* The web panel: the same, inside it (its own title row steps aside for the slim bar). */
.dm-sp.dm-spt { padding: 0; gap: 0; }
.sheet-wrap.pn-up-wrap > .dm-sp.dm-spt { padding: 0 0 env(safe-area-inset-bottom); }
.dm-sp.dm-spt > .core-up-head { display: none; }
.dm-spt .dm-spbox { gap: 0; }
.dm-spt .dm-th { flex: 1 1 0; }
.dm-sp .core-up-head .dm-pencil { align-self: center; }

/* Availability's × (owner, Nov 9; web/app.js coreDaXLine): a change's line with a small round × at its end, on the
   phone and in the manager's panel. */
.avx-line { align-items: flex-start; gap: 8px; }
.avx-line > .grow { flex: 1; min-width: 0; }
.avx-x { all: unset; box-sizing: border-box; flex: none; width: 28px; height: 28px; display: grid; place-items: center; font-size: 17px; line-height: 1; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; }
.avx-x:hover, .avx-x:focus-visible { background: var(--line); }

/* MarginEdge's recipe book (owner, Nov 9): Recipes & ingredients › MarginEdge, read only. The list by kind (a row: the
   recipe, its type, In ops on the right, a tap opening it there); a recipe's facts in one row, its batch, its lines. */
.core-me-filters { gap: 8px; align-items: center; }
.core-me-filters .small-select { min-width: 160px; }
.core-me-list { display: flex; flex-direction: column; }
.core-me-grp { display: flex; align-items: baseline; gap: 8px; padding: 14px 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.core-me-row { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--soft); padding: 0 4px; }
.core-me-row:hover { background: var(--soft); }
.core-me-row.off .strong { color: var(--muted); font-weight: 500; }
.core-me-open { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 10px 0; font-size: 15px; }
.core-me-open .grow { min-width: 0; overflow-wrap: anywhere; }
.core-me-inops { flex: none; min-width: 58px; text-align: center; }
.core-me-facts { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.core-me-fact { flex: 1 1 130px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin: -1px 0 0 -1px; }
.core-me-scale { align-items: center; gap: 10px; }
.core-me-scale .seg button { height: 34px; padding: 0 12px; }
.core-me-tablewrap { overflow-x: auto; }
.core-me-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.core-me-table th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 4px 8px 6px; }
.core-me-table td { padding: 9px 8px; border-top: 1px solid var(--soft); vertical-align: top; }
.core-me-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.core-me-table tfoot td { border-top: 1px solid var(--line); font-weight: 600; }
.core-me-subs { border-color: var(--caution-line); background: var(--caution-soft); }
.core-me-sub { align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--caution-line); }
.core-me-upload { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
@media (max-width: 700px) {
  .core-me-filters .small-select { min-width: 0; width: 100%; }
  .core-me-yl { display: none; }
  .core-me-table td, .core-me-table th { padding-left: 4px; padding-right: 4px; }
}

/* Held at the vendor (owner, Nov 9): a hold line's way said at a glance, neutral (green is something done, blue is a
   link): "Paid · held at Piedmont → Piedmont's warehouse", "From Piedmont's warehouse · no charge · Piedmont's warehouse
   → here"; at the check, the three ways to pick on a red line; on Inventory, what each vendor holds and Correct. */
.core-hold-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
.tag.hold-way { background: var(--card); color: var(--ink); border: 1px solid var(--ink); white-space: normal; }
.hold-dir { color: var(--muted); font-weight: 700; white-space: nowrap; }
.core-hold-ask { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.core-hold-ask:not(.answered) { background: var(--problem-soft); border-color: var(--problem-line); border-left-color: var(--problem); }
.core-hold-ask.answered { background: var(--card); border-color: var(--line); border-left-color: var(--ink); }
.core-hold-paper q { font-style: italic; color: var(--ink); }
.core-hold-seg { flex-wrap: wrap; align-self: flex-start; max-width: 100%; }
.core-hold-seg button { height: auto; min-height: 40px; padding: 6px 12px; white-space: normal; text-align: left; }
.core-hold-picked:empty, .core-hold-ask .warn-text:empty { display: none; }
.core-hold-sum { font-size: 14px; font-weight: 600; margin: 8px 0; }
.core-held-line { margin-top: 8px; }
.core-held-row { padding: 6px 0; border-top: 1px solid var(--line); }
.core-held-row:first-child { border-top: 0; }
.core-held-row .amount { width: 80px; }
.core-held-row > .row > .grow { flex: 1; min-width: 0; }
.core-held-row > .row > .link { margin-left: auto; }
.core-held-vendor + .core-held-vendor { margin-top: 16px; }
.core-held-vendor h3 { margin: 0 0 4px; font-size: 16px; }
@media (max-width: 640px) { .core-hold-seg { display: flex; flex-direction: column; width: 100%; } .core-hold-seg button { width: 100%; } }

/* What an invoice line came in (owner, Nov 9; web/app.js coreCameAs): "On this invoice" at the top of Units…, Came in
   [2] [each ▾] and the paper's word; under a changed line, what the paper printed. */
.core-came-as { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.core-came-as .small-select { min-width: 120px; }
.core-paper-unit { margin-top: 2px; }

/* Answered in Today's panel (owner, Nov 9; web/app.js dyAnswers): a Team line's answers under it, across the line
   ("Approve anyway?" beside its button); Give it to…'s short pick in a thin box; what was answered on top of the panel,
   plain. The Units panel's "Its price · none yet" box (owner, Nov 9; coreUpNoPrice), the same gap as This line over it. */
.dy-wy-it > .dy-ans { grid-column: 1 / -1; cursor: default; }
.dy-ans { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 2px; }
.dy-ans-in { display: flex; flex-direction: column; gap: 6px; }
.dy-ans-in .row.tight { gap: 6px; }
.dy-ans-ask { align-self: center; font-size: 13.5px; font-weight: 600; }
.dy-give { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.dy-give-row { display: flex; align-items: center; gap: 10px; }
.dy-said { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--line); background: var(--bg); font-size: 13.5px; }
.core-up-price { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

/* A recipe's head, shorter (owner, Nov 9: "that box was too tall"; web/app.js coreRecipe): the price and its share
   on one line on the right, the can't-cost or partly-costed tag under the name on the left. */
.core-head-cost { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.core-head .grow > .mk { display: inline-block; margin-top: 6px; }
.shell.phone-nav .core-head-cost { justify-content: flex-start; }

/* Time off's requests on a phone (owner, Nov 10: "time off on phones displays weirdly"; web/app.js timeOffTab's row):
   who, when and why take the full width, the note and Approve / Deny under them, not squeezed side by side. */
@media (max-width: 720px) {
  .list > .row.wrap:has(> .grow .tf-dot) > .grow,
  .list > .row.wrap:has(> .grow .tf-dot) > .stack { flex: 1 1 100%; min-width: 0; }
  .list > .row.wrap:has(> .grow .tf-dot) > .stack input { width: 100%; box-sizing: border-box; }
}

/* Today, mockup E (owner, Nov 9): the open days as boxes as tall as what's on them (no section labels, a line between
   the parts; red only on the next two open days, yellow further out); Waiting on you as rows under them, full width, a
   coloured edge (red, yellow, or plain for backlog) and › always in the same column; Last night, Prime cost and The
   week so far down the right in the page's side boxes; the side panel over the page from the right, the page dimmed
   behind it (a sheet from the bottom on a phone). Its markup: web/app.js dyDayCard, dyRows, dyInfoBoxes, dyOverlay. */
@media (min-width: 1001px) { .page.dy-page:not(.solo) { grid-template-columns: minmax(0, 1fr) 340px; } }
.dy-page .page-main { gap: 14px; }
.dy-day { gap: 8px; padding: 10px 12px 12px; }
.dy-day .dy-sec { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; border-top: 1px solid var(--soft); min-width: 0; }
.dy-day .dy-big { font-size: 15px; font-weight: 600; }
.dy-day .dy-gap.bad { color: var(--problem); }
.dy-day .dy-gap.warn { color: var(--caution); }
.dy-day .dy-ev .dy-tag { display: inline-block; margin-right: 5px; }
.dy-day .dy-blackout { font-size: 12.5px; }
.dy-rows { display: flex; flex-direction: column; gap: 8px; }
.dy-row { display: grid; grid-template-columns: 190px repeat(4, minmax(0, 1fr)) 20px; gap: 14px; align-items: start; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--line); padding: 11px 14px; cursor: pointer; font-size: 13px; line-height: 1.35; }
.dy-row:hover, .dy-row:focus-visible { border-color: var(--muted); }
.dy-row.red { border-left-color: var(--problem); }
.dy-row.yellow { border-left-color: var(--caution-mark); }
.dy-row-h { display: flex; align-items: baseline; gap: 10px; }
.dy-row-h b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.dy-row-n { margin-left: auto; font-size: 20px; font-weight: 500; line-height: 1; }
.dy-row.red .dy-row-n { color: var(--problem); }
.dy-row.yellow .dy-row-n { color: var(--caution); }
.dy-row-p { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dy-row-k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dy-row-k i { font-style: normal; margin-left: 4px; }
.dy-row-k.red { color: var(--problem); }
.dy-row-k.yellow { color: var(--caution); }
.dy-row-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dy-row-w { font-style: normal; color: var(--problem); }
.dy-row > .dy-go { grid-column: -2 / -1; text-align: right; }
.dy-rows-none { padding: 4px 2px; }
.dy-meter { position: relative; height: 8px; background: var(--soft); }
.dy-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--series-1); }
.dy-meter b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--problem); }
.dy-bars { display: flex; align-items: flex-end; gap: 10px; padding-top: 4px; }
.dy-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--muted); }
.dy-pair { display: flex; gap: 3px; width: 100%; height: 56px; align-items: flex-end; }
.dy-pair i { flex: 1; display: block; }
.dy-pair i.was, .dy-key i.was { background: var(--series-2); }
.dy-pair i.now, .dy-key i.now { background: var(--series-1); }
.dy-key { display: flex; align-items: center; gap: 5px; }
.dy-key i { display: inline-block; width: 9px; height: 9px; }
.dy-key i.now { margin-left: 8px; }
.sheet-wrap.dy-ov { z-index: 40; }
.dy-ov > .dt-shiftpanel { position: relative; inset: auto; width: min(420px, 100vw); height: 100%; max-height: none; margin: 0; border-radius: 0; border-width: 0 0 0 1px; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px; box-shadow: -8px 0 30px rgba(0, 0, 0, .15); animation: core-up-in .18s ease-out; }
.dy-ov.shown > .dt-shiftpanel { animation: none; }
.dy-ov .dy-ptitle { font-size: 24px; font-weight: 500; }
.dy-ov .dy-psec { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--soft); }
.dy-ov .dy-pbtns { padding-top: 4px; }
.dy-ov .dy-sp-row .link.dy-r { color: var(--link); font-weight: 600; justify-self: end; padding: 0; font-size: 13.5px; }
.dy-ov .dy-back { align-self: flex-start; padding: 0; }
.dy-ov .dy-w.bad { color: var(--problem); }
@media (prefers-reduced-motion: reduce) { .dy-ov > .dt-shiftpanel { animation: none; } }
@media (max-width: 1000px) {
  .dy-row { grid-template-columns: 150px repeat(2, minmax(0, 1fr)) 20px; }
  .dy-row > .dy-row-p:nth-of-type(even) { grid-column: 2; }
  .dy-row > .dy-row-p:nth-of-type(odd) { grid-column: 3; }
  .dy-row > .dy-go { grid-row: 1; grid-column: 4; }
}
@media (max-width: 600px) {
  .dy-strip { display: flex; overflow-x: auto; scrollbar-width: none; }
  .dy-strip > .dy-day { flex: 0 0 168px; }
  .dy-row { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 10px; }
  .dy-row > .dy-row-h, .dy-row > .dy-row-p:nth-of-type(n) { grid-column: 1; }
  .dy-row > .dy-go { grid-row: 1; grid-column: 2; }
  .sheet-wrap.dy-ov { flex-direction: column; justify-content: flex-end; }
  .dy-ov > .dt-shiftpanel { width: 100%; height: auto; max-height: 85vh; border-width: 0; border-radius: 16px 16px 0 0; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .15); animation-name: pn-up-in; }
  .dy-ov > .dt-shiftpanel > .dt-sp-top { padding-top: 18px; }
}

/* People tidied (owner, Nov 7: "the rows are too tall and don't match in size, different greys and white"; "a tight
   grid, the more we see on one page the better"): one row height for everyone, shifts on one line, two backgrounds
   (white can work, one light grey can't, with why), smaller type on the left, open shifts in the right pane by day. */
.dt-pg { --dt-row: 44px; }
.dt-pg-h { padding: 7px 8px; font-size: 13px; }
.dt-pg-name { min-height: 0; height: var(--dt-row); padding: 0 10px; gap: 1px; justify-content: center; overflow: hidden; }
.dt-pg-nm { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-pg-meta { display: flex; align-items: center; gap: 2px; font-size: 11.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; }
.dt-pg-meta .dt-rsq { width: 7px; height: 7px; }
.dt-pg-cell { min-height: 0; height: var(--dt-row); box-sizing: border-box; padding: 5px 4px; gap: 2px; justify-content: center; background: #fff; }
.dt-pg-cell.cant { background: #F2F1ED; }
.dt-pg-why { font-size: 11.5px; color: var(--muted); padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
/* The + only on a white day's hover or focus (a tap still offers that night's open shifts). */
.dt-pg-add, .dt-pg-add.small { position: absolute; inset: 0; min-height: 0; flex: none; border-radius: 0; background: none; color: transparent; font-size: 16px; }
.dt-pg-cell .dt-blk { z-index: 1; }
.dt-pg-cell .dt-pg-add:hover, .dt-pg-cell .dt-pg-add:focus-visible, .dt-pg-cell.held .dt-pg-add { color: transparent; background: none; }
.dt-pg-cell:not(.cant):not(:has(.dt-blk)) .dt-pg-add:hover, .dt-pg-cell:not(.cant):not(:has(.dt-blk)) .dt-pg-add:focus-visible,
.dt-pg-cell.held:not(.cant):not(:has(.dt-blk)) .dt-pg-add { color: #A9A69E; }
.dt-pg-cell:not(.cant):not(.held):not(:has(.dt-blk)) .dt-pg-add:hover { background: #F7F6F3; }
.dt-pg-cell .dt-pg-add:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
@media (hover: none) { .dt-pg-add { color: transparent; } }
/* A shift on one line: "Opener 3:45–Vol". */
.dt-pg .dt-blk { flex: none; height: 32px; font-size: 12px; line-height: 1; }
.dt-pg .dt-blk-main { flex-direction: row; align-items: center; gap: 5px; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.dt-pg .dt-blk.draft .dt-blk-main { padding: 0 6.5px; }
.dt-pg .dt-blk b { flex: none; }
.dt-pg .dt-blk span { min-width: 0; }
.dt-pg .dt-blk .dt-x { top: -6px; right: -5px; width: 16px; height: 16px; line-height: 13px; font-size: 12px; }
/* Two shifts the same day: stacked small, the row doesn't grow. */
.dt-pg-cell.two { padding: 3px 4px; }
.dt-pg-cell.two .dt-blk { height: 17px; font-size: 10.5px; border-radius: 5px; }
.dt-pg-cell.two .dt-blk-main { padding: 0 6px; gap: 4px; }
.dt-pg-cell.two .dt-blk .dt-x { top: 50%; right: 2px; transform: translateY(-50%); width: 14px; height: 14px; line-height: 11px; font-size: 11px; }
/* The open shifts a day, a thin line under the day names. */
.dt-pg-cnt { all: unset; box-sizing: border-box; height: 24px; display: flex; align-items: center; padding: 0 8px; font-size: 11.5px; color: #8C8A83; border-bottom: 1px solid var(--soft); cursor: pointer; }
.dt-pg-cnt.first { cursor: default; color: var(--muted); padding: 0 10px; }
.dt-pg-cnt.some { color: var(--problem); font-weight: 600; }
.dt-pg-cnt:not(.first):hover { background: #F7F6F3; }
.dt-pg-cnt:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
/* The right pane's open shifts, by day. */
.dt-op-list { display: flex; flex-direction: column; max-height: calc(100vh - 300px); min-height: 120px; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; }
.dt-op-day .dt-grp { padding: 8px 0 4px; }
.dt-op-day:first-child .dt-grp { padding-top: 2px; }
.dt-op-day.none .dt-grp { padding-bottom: 0; }
.dt-op-n { color: var(--problem); letter-spacing: .06em; }
.dt-op-ok { color: #1E6B34; letter-spacing: .06em; font-weight: 500; }
.dt-op-blks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.dt-opb { height: 30px; font-size: 12px; line-height: 1; }
.dt-opb .dt-blk-main { flex-direction: row; align-items: center; gap: 5px; padding: 0 7px; white-space: nowrap; overflow: hidden; }
.dt-opb .dt-blk-main b { flex: none; font-weight: 600; }
.dt-opb .dt-blk-main span { min-width: 0; color: var(--muted); opacity: 1; }
.dt-opb .dt-x { top: 50%; right: 5px; transform: translateY(-50%); width: 16px; height: 16px; line-height: 13px; font-size: 12px; }
/* A finger: no × on every block (the shift panel's Take off and Remove shift do it); a picked block keeps its ×. */
@media (hover: none) { .dt-pg .dt-blk:not(.picked) .dt-x, .dt-opb:not(.picked) .dt-x { display: none; } }
/* An iPad's narrower days: a touch smaller so "Opener 3:45–Vol" fits. */
@media (max-width: 1300px) {
  .dt-pg .dt-blk, .dt-opb { font-size: 11.5px; }
  .dt-pg .dt-blk-main, .dt-opb .dt-blk-main { padding: 0 5px; gap: 3px; }
  .dt-pg .dt-blk.draft .dt-blk-main { padding: 0 3.5px; }
  .dt-pg-cell { padding-left: 3px; padding-right: 3px; }
}
@media (min-width: 1001px) and (max-width: 1300px) { .dt-wrap > .page:has(.dt-pgcard) { grid-template-columns: minmax(0, 1fr) 296px; } }
.dt-opb:hover { border-color: #C9C6BE; }
.dt-opb.picked .dt-blk-main, .dt-opb .dt-blk-main:focus-visible { padding-right: 24px; }
@media (hover: hover) { .dt-opb:hover .dt-blk-main { padding-right: 24px; } }
.dt-op-day.dt-flash { animation: dt-flash 1.2s ease-out; }
@keyframes dt-flash { 0% { background: #FFF4D1; } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .dt-op-day.dt-flash { animation: none; } }
@media (max-width: 1000px) { .dt-op-list { max-height: none; overflow: visible; } }

/* Dragging an open shift in People (owner, Nov 7): only its own night takes it; the other days fade, a drop there just says so. */
.dt-pg-cell.dt-dim { opacity: .35; }
.dt-ghost-line.x { color: #BDBDB8; font-weight: 500; }
.dt-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; background: var(--ink); color: #fff; padding: 10px 16px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }

/* Service notes (owner, Nov 7): a repeating note tagged; the other nights' folded away by day; days picked in Add and Edit. */
.note-rep { color: var(--link); font-weight: 600; }
.note-fold { margin-top: 10px; border-top: 1px solid var(--soft); padding-top: 8px; }
.note-fold > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.note-fold[open] > summary { color: var(--ink); }
.note-day { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 10px 0 2px; }
.note-days { gap: 10px; }
.dt-daychecks { gap: 10px; }
.dt-daychecks label { display: inline-flex; align-items: center; gap: 4px; }

/* v0.2 on a phone (owner, Oct 27): tabs along the bottom, one tidy header, switches on a line, chips that swipe. Set only
   by corePhoneShell (the new foundation, at a phone's width): v0.1, iPads, the boards and computers never get .phone-nav. */
.shell.phone-nav { flex-direction: column; }
.shell.phone-nav > main { padding-top: 16px; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.shell.phone-nav:has(.capture-corner) > main { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
.pn-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; background: #000; }
.pn-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 2px; border: 0; background: none; color: #9A9A9A; font: inherit; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.pn-tab svg { width: 22px; height: 22px; flex: none; }
.pn-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-tab.on { color: #fff; }
.pn-tab.on::before { content: ''; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px; background: #fff; }
.pn-tab .rail-badge { position: absolute; top: 6px; left: calc(50% + 6px); }
.pn-tab .rail-badge[hidden] { display: none; }
.shell.phone-nav .capture-corner { bottom: calc(76px + env(safe-area-inset-bottom)); }
body:has(.shell.phone-nav) .update-note { bottom: calc(80px + env(safe-area-inset-bottom)); }

/* The header: title left, search and ⋯ right; the page's search full width under the title once the lens is tapped. */
.page-head.pn-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 12px; }
.page-head.pn-head > .head-tools { display: none; }
.pn-icons { display: flex; gap: 8px; flex: none; padding-top: 4px; }
.pn-icon { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px !important; background: var(--card); color: var(--ink); cursor: pointer; }
.pn-icon svg { width: 20px; height: 20px; }
.pn-icon.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.pn-icons > .phone-primary { align-self: center; }
.pn-icons > .help-q { width: 44px; height: 44px; border-radius: 50% !important; }
.pn-head > .head-search { display: none; grid-column: 1 / -1; margin-top: 12px; }
.pn-head.pn-searching > .head-search { display: block; }
.pn-head > .head-search input, .pn-head > .head-search .search-wrap { width: 100%; min-width: 0; max-width: none; box-sizing: border-box; }
.pn-head .pn-back { margin-bottom: 6px; }
/* Switches: Kitchen | Bar and the page's view, one line, each sharing it; their words never wrap. */
.pn-switches { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 14px; }
.pn-switches:empty { display: none; }
.pn-switches > .seg { flex: 1 1 auto; display: flex; min-width: 0; margin: 0; }
.pn-switches > .seg button { flex: 1 1 auto; min-width: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.compact .pn-switches > .seg button { font-size: 11px; letter-spacing: .04em; }
.shell.phone-nav .menu-nav { display: block; }
.shell.phone-nav .core-menu-ctl > .seg:first-child { display: flex; width: 100%; }
.shell.phone-nav .core-menu-ctl > .seg:first-child > button { flex: 1 1 0; }
/* Section chips (and a few rows of buttons): one row that swipes sideways, never several lines; a fade at the right edge
   while there's more to see (corePhoneSwipe). A page's own chip row runs to the screen's edges. */
.shell.phone-nav main .pn-swipe { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.shell.phone-nav main .pn-swipe::-webkit-scrollbar { display: none; }
.shell.phone-nav main .pn-swipe > * { flex: none; }
.shell.phone-nav main .pn-swipe.pn-more-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.shell.phone-nav main > .chips-row, .shell.phone-nav main > .menu-nav > .chips-row, .shell.phone-nav main > div > .chips-row.page-tabs { margin-left: -16px; margin-right: -16px; padding: 0 16px; scroll-padding: 0 16px; }

/* The sheets from the bottom: ⋯ (the header's other buttons) and More (the other areas, the restaurant, Log out). */
.sheet-wrap.pn-sheet-wrap { z-index: 70; justify-content: stretch; align-items: flex-end; }
.pn-sheet { width: 100%; max-height: 85vh; overflow-y: auto; box-sizing: border-box; background: var(--card); color: var(--ink); border-radius: 16px 16px 0 0; padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,.15); }
.pn-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 8px; }
.pn-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.pn-row:disabled { opacity: .45; cursor: default; }
.pn-row.on { font-weight: 700; }
.pn-row > svg { flex: none; width: 22px; height: 22px; color: var(--muted); }
.pn-row.on > svg { color: var(--ink); }
.pn-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-row-text small { color: var(--muted); font-size: 13px; margin-top: 2px; }
.pn-row .rail-badge[hidden] { display: none; }
.pn-row.pn-lent { cursor: default; }
.pn-more-foot { display: flex; flex-direction: column; margin-top: 12px; }
.pn-more-foot .rail-place { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.pn-me { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.pn-me .me { position: static; margin: 0; width: auto; }
.pn-me .me-chip { display: flex; flex-direction: row; align-items: center; gap: 8px; width: auto; padding: 4px 4px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.pn-me .me-dot { background: var(--ink); color: var(--card); }
.pn-me .me-level { color: var(--muted); }
.pn-me .me-out { color: var(--ink); border: 0; margin: 0; padding: 0 10px 0 2px; width: auto; }
.pn-row.pn-off { color: var(--muted); font-size: 14px; border-bottom: 0; }
.pn-me > .grow { flex: 1 1 auto; min-width: 0; }

/* v0.2 on a phone, stage 2 (owner, Oct 27): each page's own controls, tidied the same way. All under .phone-nav. */
/* Six tabs (managers and the owner): the words a little smaller so they fit a 320 phone without cutting. */
.pn-tabs.pn-tabs-6 .pn-tab { font-size: min(10px, 2.65vw); letter-spacing: .03em; }
.pn-tabs.pn-tabs-6 .pn-tab svg { width: 21px; height: 21px; }
/* Buttons tucked into the header's ⋯ (CORE_PHONE_TUCK). */
.shell.phone-nav main .pn-tucked { display: none; }
/* A back ← in the header: a link above the title, not a big button. */
.shell.phone-nav .pn-head .pn-back > .btn { height: auto; padding: 2px 0; border: 0; background: none; color: var(--link); font-size: 13px; letter-spacing: .02em; }
/* A recipe's, an ingredient's or a dish's top row (CSS only, owner, Oct 27): where you are on one line that swipes, the
   row's buttons (Map, Edit, Merge…) on the line under it, from the left. */
.shell.phone-nav .core-top { gap: 8px; }
.shell.phone-nav .core-top > .crumbs { flex: 1 1 100%; min-width: 0; }
.shell.phone-nav .core-top > .grow { display: none; }
.shell.phone-nav .core-top .crumb { white-space: nowrap; }
/* Page switches in the page (Team's Week | Month | People | Time off, a report's Against): one line, words never wrapping. */
.shell.phone-nav main .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.shell.phone-nav main .seg button { white-space: nowrap; }
.shell.phone-nav .tf-top { gap: 8px 10px; align-items: center; }
.shell.phone-nav .tf-top > .seg { flex: 1 1 100%; display: flex; }
.shell.phone-nav .tf-top > .seg button { flex: 1 1 auto; padding: 0 6px; }
.shell.phone-nav .tf-top > .grow { display: none; }
.shell.phone-nav .tf-top > .small.muted { flex: 1 1 0; min-width: 0; }
/* A set-up bar's head: its name and the arrow on the first line, how it's set under them. */
.shell.phone-nav .sched-setup-head { flex-wrap: wrap; row-gap: 2px; padding: 12px 14px; }
.shell.phone-nav .sched-setup-head > .strong { flex: 1 1 auto; }
.shell.phone-nav .sched-setup-head > .chev { order: 2; }
.shell.phone-nav .sched-setup-head > .grow { order: 3; flex: 1 1 100%; }
/* The Team week as a list of days (corePhoneWeek). */
.pn-week { display: grid; border-top: 1px solid var(--line); }
.pn-week-day { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pn-week-day > .sched-day { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; width: 100%; min-height: 0; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.pn-week-day > .sched-day > .small.muted { margin-left: auto; }
.pn-week-day > .sched-day.today { box-shadow: none; }
.pn-week-day > .sched-day:hover { background: none; }
.pn-week-day > .sched-day.today > .strong { text-decoration: underline; text-underline-offset: 3px; }
.pn-week-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 8px; align-items: start; }
.pn-week-role { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.pn-week-row > .sched-cell { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 4px; padding: 0; border: 0; min-width: 0; }
.pn-week-row > .sched-cell > * { margin: 0; }
/* Each person a small tag, name then hours on one line, side by side while they fit. */
.pn-week-row .sched-pill { display: inline-flex; flex-direction: row; align-items: baseline; gap: 6px; width: auto; max-width: 100%; padding: 3px 8px; }
.pn-week-row .sched-pill .sched-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pn-week-row .sched-pill .sched-hrs { white-space: nowrap; }
.pn-week-row .sched-off, .pn-week-row .sched-free { width: auto; }
.pn-week-row .sched-free + .sched-free { margin-top: 0; }
/* Team's four weeks by person: the names stay at the left while the days swipe. */
.shell.phone-nav .pg-name { position: sticky; left: 0; z-index: 1; background: var(--card); }
/* The Menu's dish rows (owner, Oct 27: "each row compact and orderly"): the dish and its Dine-in switch on top, the recipe
   on one line under it, the plates a day and Take off on the last. */
.shell.phone-nav .mline.dish-line { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 10px; padding: 12px 0; }
.shell.phone-nav .dish-line .dish-halves { display: contents; }
.shell.phone-nav .dish-line .dish-sq-cell { grid-column: 2; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
.shell.phone-nav .dish-line .dish-sq { grid-column: 1 / -1; }
.shell.phone-nav .dish-line .dish-sq-cell > .small.muted { grid-column: 1; }
.shell.phone-nav .dish-line .dish-sq-cell > .mswitches { grid-column: 2; grid-row: 2; justify-content: flex-end; gap: 10px; }
.shell.phone-nav .dish-line .sell-switch { font-size: 12px; gap: 6px; }
.shell.phone-nav .dish-line .dish-rc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; border-left: 0; padding: 0; }
.shell.phone-nav .dish-line .dish-rc::before { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
/* No recipe yet: the line says so, so its Recipe heading steps aside for Write its recipe and Other… to fit. */
.shell.phone-nav .dish-line .dish-rc:has(.write-btn)::before { display: none; }
.shell.phone-nav .dish-line .dish-rc > .row { display: contents; }
.shell.phone-nav .dish-line .dish-rc > .error:empty { display: none; }
.shell.phone-nav .dish-line .dish-rc .write-btn { height: 28px; }
.shell.phone-nav .dish-line .mright { grid-column: 1 / -1; flex-wrap: nowrap; justify-content: flex-start; gap: 10px; padding-top: 0; }
.shell.phone-nav .dish-line .mright .c-trend { width: auto; justify-content: flex-start; }
.shell.phone-nav .dish-line .mright .c-trend-n { flex-direction: row; align-items: baseline; gap: 6px; }
.shell.phone-nav .dish-line .mright .c-act { width: auto; margin-left: auto; text-align: right; }
.shell.phone-nav .dish-line .mright .take-off { padding: 4px 0; }
/* Today's items: the area and the kind on one line; the buttons from the left, every one in sight (a second line when
   they don't fit: swiped away, Write recipe and Snooze were missed). */
.shell.phone-nav .todo-label { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.shell.phone-nav .todo-actions { justify-content: flex-start; gap: 6px 8px; }
/* Reports' choices: the name on the left, the choice filling the rest. */
.shell.phone-nav .toolbar .tool-field { display: grid; grid-template-columns: 62px minmax(0, 1fr); width: 100%; }
.shell.phone-nav .core-menu-ctl .tool-field { grid-template-columns: 84px minmax(0, 1fr); }
.shell.phone-nav .seg.core-menu-tabs { display: flex; width: 100%; }
/* Lowest performers' tile alone on its line (two to a line on a phone): the line's width. */
.shell.phone-nav .attn > .core-low-tile:nth-child(odd):last-child { grid-column: 1 / -1; }
/* Lowest performers' list on a phone: Leave out under the dish, not squeezed beside it. */
.shell.phone-nav .core-low-row { flex-wrap: wrap; }
.shell.phone-nav .core-low-row .core-low-main { flex-basis: calc(100% - 60px); }
.shell.phone-nav .core-low-row > .core-leave-out { margin-left: 52px; }
/* With Kitchen | Bar on the same line there's no room for both: the menus on a line of their own. */
.pn-switches:has(> .core-menu-tabs) { flex-wrap: wrap; }
.pn-switches > .seg.core-menu-tabs { flex: 1 1 100%; }
.shell.phone-nav .seg.core-menu-tabs > button { flex: 1 1 0; }
.shell.phone-nav .core-online-list > .core-online-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
.shell.phone-nav .core-online-row .core-online-arrows { grid-column: 2 / -1; justify-self: end; }
.shell.phone-nav .toolbar .tool-field > .tool-select { width: 100%; min-width: 0; }
.shell.phone-nav .toolbar .tool-field > .seg { display: flex; }
.shell.phone-nav .toolbar .tool-field > .seg button { flex: 1 1 auto; }
.shell.phone-nav .toolbar .tool-field > :nth-child(n+3) { grid-column: 1 / -1; }
/* Service's dough and takeout days: the row names narrower, staying at the left while the days swipe. */
.shell.phone-nav .takeout-grid tbody th { font-size: 12px; white-space: normal; min-width: 84px; max-width: 96px; line-height: 1.25; position: sticky; left: 0; z-index: 1; background: var(--card); }
/* An invoice's check: Total and its box on one line, the lines-and-charges check above them. */
.shell.phone-nav .inv-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
.shell.phone-nav .inv-total > :first-child { grid-column: 1 / -1; }
.shell.phone-nav .inv-total > b:not(.small) { justify-self: end; }
/* Ingredients: the search full width, the groups' chips under it with the count at the end. */
.shell.phone-nav .ing-tools > .search-big { flex: 1 1 100%; width: 100%; max-width: none; }
.shell.phone-nav .ing-tools > .chips-row { flex: 1 1 100%; min-width: 0; }
.shell.phone-nav .ing-tools > .grow { display: none; }
/* A save bar that sticks to the bottom: above the tabs, its Save at the left (the Invoice chip is on the right). */
.shell.phone-nav .plan-save { bottom: calc(64px + env(safe-area-inset-bottom)); }
.shell.phone-nav .plan-save > .grow { order: 2; }

/* v0.2 Recipes & ingredients on a phone (owner, Oct 27), after the parity rework: CSS only, under .phone-nav. */
/* The home's search, full width. */
.shell.phone-nav .core-home-tools > .core-home-find { flex: 1 1 100%; width: 100%; max-width: none; }
.shell.phone-nav .core-home-tools > .grow { display: none; }
/* A list of dishes (Needs a look, Every dish): two lines a dish. The name and its marks on the left, the plate cost and
   the food cost on the right, the arrow last; the 12 months' cost under the name. The heading keeps the same places. */
.shell.phone-nav .rt-row:not(.vars) { grid-template-columns: minmax(0, 1fr) auto auto 12px; gap: 4px 12px; }
.shell.phone-nav .rt-row:not(.vars) > :nth-child(1) { grid-column: 1; grid-row: 1; }
.shell.phone-nav .rt-row:not(.vars) > :nth-child(2) { grid-column: 1; grid-row: 2; }
.shell.phone-nav .rt-row:not(.vars) > :nth-child(4) { grid-column: 2; grid-row: 1; }
.shell.phone-nav .rt-row:not(.vars) > :nth-child(6) { grid-column: 3; grid-row: 1; }
.shell.phone-nav .rt-row:not(.vars) > :nth-child(7) { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
.shell.phone-nav .rt-row:not(.vars) > :nth-child(3), .shell.phone-nav .rt-row:not(.vars) > :nth-child(5) { display: none; }
.shell.phone-nav .rt-row.head:not(.vars) > :nth-child(2) { display: none; }
.shell.phone-nav .rt-row:not(.vars) > :nth-child(2):empty, .shell.phone-nav .rt-row:not(.vars) > :nth-child(2):not(:has(*:not(:empty))):not(:has(svg)) { display: none; }
/* A recipe's What goes in (owner, Oct 27: "the chevron sits on its own line… make each line a compact two-line row"):
   the name and the amount on top; where the price comes from, the cost and the share under them; the arrow at the right. */
.shell.phone-nav .core-lines > .lrow2.head { display: none; }
.shell.phone-nav .lrow2.core-lrow2 { grid-template-columns: minmax(0, 1fr) auto 40px 12px; gap: 4px 10px; align-items: center; padding: 10px 4px; }
.shell.phone-nav .lrow2.core-lrow2 > :nth-child(1) { grid-column: 1; grid-row: 1; }
.shell.phone-nav .lrow2.core-lrow2 > :nth-child(2) { grid-column: 2 / 4; grid-row: 1; text-align: right; }
.shell.phone-nav .lrow2.core-lrow2 > :nth-child(3) { display: block; grid-column: 1; grid-row: 2; justify-self: start; width: auto; max-width: 100%; }
.shell.phone-nav .lrow2.core-lrow2 > :nth-child(4) { grid-column: 2; grid-row: 2; }
.shell.phone-nav .lrow2.core-lrow2 > :nth-child(5) { grid-column: 3; grid-row: 2; }
.shell.phone-nav .lrow2.core-lrow2 > :nth-child(6) { grid-column: 4; grid-row: 1 / span 2; align-self: center; }
.shell.phone-nav .core-lrow2 .core-from .src { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; max-width: 100%; }
.shell.phone-nav .core-lrow2 .core-from .src b { display: inline; white-space: normal; }
/* The recipe editor: one line a row in three short lines. The amount, its unit and × on top; what goes in under them;
   where its price comes from and its cost under that; Merge… under the name. The column headings step aside. */
.shell.phone-nav .core-editor { grid-template-columns: minmax(0, 1fr); }
.shell.phone-nav .core-editor > * { min-width: 0; }
.shell.phone-nav .core-editor .core-rhead > label.grow { flex: 1 1 0; min-width: 0; }
.shell.phone-nav .core-editor .core-rhead .core-rname { min-width: 0; }
.shell.phone-nav .core-elines-head { display: none; }
.shell.phone-nav .core-eline.v01 { grid-template-columns: 18px 72px minmax(0, 1fr) 64px 24px; gap: 6px 8px; }
.shell.phone-nav .core-eline.v01 > .drag-handle { grid-column: 1; grid-row: 1; }
.shell.phone-nav .core-eline.v01 > .amount { grid-column: 2; grid-row: 1; }
.shell.phone-nav .core-eline.v01 > select { grid-column: 3 / 5; grid-row: 1; }
.shell.phone-nav .core-eline.v01 > .search-wrap { grid-column: 2 / -1; grid-row: 2; }
.shell.phone-nav .core-eline.v01 > .core-efrom { grid-column: 2 / 4; grid-row: 3; min-width: 0; }
.shell.phone-nav .core-eline.v01 > .num { grid-column: 4; grid-row: 3; }
.shell.phone-nav .core-eline.v01 > .link { grid-column: 5; grid-row: 1; }
.shell.phone-nav .core-eline.v01 .core-efrom .src { display: inline-flex; flex-wrap: wrap; gap: 0 6px; max-width: 100%; }
.shell.phone-nav .core-eline.v01 .core-efrom .src b { display: inline; white-space: normal; }
.shell.phone-nav .core-eline.v01 + .core-esub, .shell.phone-nav .core-erow > .core-eq { margin-left: 26px; }
.shell.phone-nav .core-step { grid-template-columns: 18px 28px minmax(0, 1fr) 24px; }
/* All recipes A–Z: one column on a phone, each name whole. */
.shell.phone-nav .az { grid-template-columns: minmax(0, 1fr); }
/* The editor's last row: Save and Cancel, then Merge into… and Delete recipe from the left (not pushed to the right edge). */
.shell.phone-nav .core-editor > .row.wrap > .grow { display: none; }
/* A recipe's head: its cost a batch and a portion under the big number, from the left like the rest of the card. */
.shell.phone-nav .core-head .right-col { text-align: left; }
/* Reports on the phone (v0.2): Recipes vs. purchases keeps all five columns, tighter, inside the screen; the custom
   dates wrap so Show stays on it. */
.shell.phone-nav .rrow.usage { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.shell.phone-nav .rrow.usage > * { min-width: 0; overflow-wrap: anywhere; }
.shell.phone-nav .dates-inline { flex-wrap: wrap; }
.shell.phone-nav .dates-inline input[type=date] { flex: 1 1 120px; min-width: 0; }
/* The Units panel on a phone (owner, Oct 28): the whole screen over the page and its tabs, Done at the top, sticky. */
.sheet-wrap.pn-up-wrap { z-index: 70; }
.sheet-wrap.pn-up-wrap > .core-up { width: 100%; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); box-shadow: none; animation-name: pn-up-in; }
.pn-up-wrap .core-up-head { position: sticky; top: 0; z-index: 1; background: var(--bg); padding: 12px 0 8px; border-bottom: 1px solid var(--line); align-items: center; }
.pn-up-wrap .core-up-head .sheet-title { font-size: 20px; }
.pn-up-wrap .core-up-x { min-width: 64px; height: 40px; font-size: 15px; }
.pn-up-wrap .core-up .core-units-side .urow { grid-template-columns: auto auto 1fr; }
.pn-up-wrap .core-up .core-units-side .urow > .u-acts { grid-column: 1 / -1; justify-self: start; }
.pn-up-wrap .core-q .row.tight.wrap { width: 100%; }
/* Its units on a phone: ✓ OK, Change and Remove on a line of their own under the fact. */
.shell.phone-nav .core-units-side .urow { grid-template-columns: auto auto 1fr; }
.shell.phone-nav .core-units-side .urow > .u-acts { grid-column: 1 / -1; justify-self: start; }