/* The Mill pre-orders, staff side (staff.js). The proposal's staff,
   email and print-sheet rules (Research/2026-10-19-preorder-proposal),
   then the demo's own pieces: the wide screen, the Toast controls, the
   banner, the inbox and the booking page. */
:root {
  --paper: #ffffff; --paper-ink: #141414; --paper-muted: #4d4d4d; --paper-line: #c9c9c9; --paper-tint: #f2f2f2;
  --warn-ink: #7a4b00; --frame-shadow: rgb(20 30 30 / 22%);
  --font-mail: Arial, Helvetica, sans-serif; --font-shell: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-m-head: var(--font-head); --font-m-body: var(--font-body);
}

/* ---------- Pre-orders, staff side ----------
   The pre-order app's own screens. The Mill's guest-side look (white,
   charcoal and teal, Playfair headings, Raleway text), kept plain for a busy
   shift: big buttons, soft rounded corners, status as words and quiet pills.
   Fixed in both themes, like the guest phones. */
.po { color: var(--m-charcoal); font-family: var(--font-m-body); font-size: 15px; line-height: 1.45; font-variant-numeric: lining-nums; color-scheme: light; }
.po-app { container-type: inline-size; overflow: hidden; border-radius: 16px; background: var(--m-paper); box-shadow: 0 0 0 1px var(--m-line), 0 30px 60px -32px var(--frame-shadow); }
.po-top { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--m-line); background: var(--m-white); }
.po-brand { display: flex; gap: 12px; align-items: center; min-width: 0; }
.po-brand b { display: block; font-family: var(--font-m-head); font-size: 20px; font-weight: 600; line-height: 1.15; }
.po-brand small { display: block; color: var(--m-muted); font-size: 12.5px; font-weight: 500; }
.po-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.po-btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--m-white); box-shadow: inset 0 0 0 1.5px var(--m-line); color: var(--m-charcoal); font-family: var(--font-m-body); font-size: 14px; font-weight: 700; white-space: nowrap; }
.po-btn--go { background: var(--m-teal); box-shadow: none; color: var(--m-white); }
.po-btn--line { box-shadow: inset 0 0 0 1.5px var(--m-teal); color: var(--m-teal); }
.po-btn--amber { background: var(--m-amber-soft); box-shadow: inset 0 0 0 1.5px var(--m-amber-ink); color: var(--m-amber-ink); }
.po-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; justify-content: space-between; padding: 18px 20px 0; }
.po-title { font-family: var(--font-m-head); font-size: 26px; font-weight: 600; line-height: 1.15; }
.po-title small { display: block; margin-top: 2px; color: var(--m-muted); font-family: var(--font-m-body); font-size: 13px; font-weight: 500; }
.po-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--m-white); box-shadow: inset 0 0 0 1px var(--m-line); }
.po-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 9px; color: var(--m-muted); font-size: 14px; font-weight: 700; text-decoration: none; }
.po-tab[aria-current="page"] { background: var(--m-teal); color: var(--m-white); }
.po-feed { display: flex; gap: 8px; align-items: flex-start; padding: 12px 20px 0; color: var(--m-muted); font-size: 13.5px; }
.po-feed .i { margin-top: 1px; color: var(--m-ok); }
.po-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 18px 20px 22px; }
.po-day { display: grid; gap: 8px; }
.po-day__h { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-family: var(--font-m-head); font-size: 18px; font-weight: 600; line-height: 1.2; }
.po-day__h small { color: var(--m-muted); font-family: var(--font-m-body); font-size: 13px; font-weight: 500; }
.po-list { display: grid; list-style: none; border-radius: 14px; background: var(--m-white); box-shadow: 0 0 0 1px var(--m-line); }
.bk { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px 12px; align-items: baseline; padding: 14px 16px; border-top: 1px solid var(--m-line); }
.bk:first-child { border-top: 0; }
.bk > * { min-width: 0; }
.bk__state, .bk__acts { grid-column: 1 / -1; }
@container (min-width: 700px) {
  .bk { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 220px) auto; gap: 16px; align-items: center; }
  .bk__state, .bk__acts { grid-column: auto; }
}
.bk__time { font-size: 17px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.bk__who b { display: block; font-size: 16px; font-weight: 700; }
.bk__who span { color: var(--m-muted); font-size: 13.5px; }
.bk__state { display: grid; gap: 6px; }
.st { justify-self: start; display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.st .i { width: 14px; height: 14px; stroke-width: 2.5; }
.st--done { background: var(--m-ok-soft); color: var(--m-ok); }
.st--prog { background: var(--m-teal-soft); color: var(--m-teal-deep); }
.st--need { background: var(--m-amber-soft); color: var(--m-amber-ink); }
.st--closed { background: var(--m-paper); box-shadow: inset 0 0 0 1px var(--m-line); color: var(--m-muted); }
.st--due { padding-inline: 0; color: var(--m-amber-ink); }
.st--sent { padding-inline: 0; color: var(--m-muted); font-weight: 500; }
.meter { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 3px; max-width: 200px; height: 8px; }
.meter i { border-radius: 2px; background: var(--m-line); }
.meter i.on { background: var(--m-teal); }
.meter i.day { background: repeating-linear-gradient(135deg, var(--m-teal) 0 2px, var(--m-teal-soft) 2px 5px); }
.bk__acts { display: flex; flex-wrap: wrap; gap: 8px; }
@container (max-width: 420px) {
  .po-top { padding-inline: 14px; }
  .po-bar, .po-feed, .po-page { padding-inline: 12px; }
  .po-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .po-tab { justify-content: center; padding: 0 6px; }
  .bk { grid-template-columns: 70px minmax(0, 1fr); column-gap: 10px; padding: 12px 14px; }
  .bk__time { font-size: 16px; }
  .bk__who b { font-size: 15px; }
}

.po-form { display: grid; gap: 14px; padding: 16px 18px 0; }
.po-field { display: grid; gap: 6px; }
.po-field label, .po-field .lbl { font-size: 14px; font-weight: 700; }
.po-hint { color: var(--m-muted); font-size: 12.5px; }
.po-input { min-height: 48px; font-variant-numeric: lining-nums tabular-nums; }
.po-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 360px) {
  .po-row2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
  .po-row2 select { padding: 0 4px 0 10px; }
}
.stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; overflow: hidden; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--m-line); }
.stepper button { min-height: 48px; border: 0; background: var(--m-paper); color: var(--m-charcoal); font-family: var(--font-shell); font-size: 24px; font-weight: 500; }
.stepper input { min-width: 0; min-height: 48px; border: 0; border-inline: 1.5px solid var(--m-line); background: var(--m-white); color: var(--m-charcoal); font-size: 18px; font-weight: 700; text-align: center; }
.po-check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border-radius: 12px; background: var(--m-sage-soft); font-size: 14px; font-weight: 700; }
.po-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--m-teal); }
.po-check span { display: block; color: var(--m-muted); font-size: 13px; font-weight: 500; }
.po-match { display: grid; gap: 4px; margin: 14px 18px 0; padding: 12px 14px; border-radius: 12px; background: var(--m-amber-soft); font-size: 13.5px; }
.po-match b { color: var(--m-amber-ink); font-size: 14px; }


/* ---------- Kitchen email and paper ---------- */
.mail { overflow: hidden; border-radius: 12px; background: var(--paper); color: var(--paper-ink); font-family: var(--font-mail); font-size: 14px; line-height: 1.45; color-scheme: light; box-shadow: 0 0 0 1px var(--paper-line), 0 30px 60px -32px var(--frame-shadow); }
.mail__head { display: grid; gap: 3px; padding: 16px 20px; border-bottom: 1px solid var(--paper-line); background: var(--paper-tint); font-size: 13px; }
.mail__head div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
.mail__head dt, .mail__head .k { color: var(--paper-muted); }
.mail__subj { margin-top: 6px; font-size: 17px; font-weight: 700; }
.mail__body { display: grid; gap: 14px; padding: 18px 20px 22px; }
.mail__body h4 { font-size: 15px; }
.mail__flag { padding: 10px 12px; border: 2px solid var(--paper-ink); background: var(--paper-tint); font-weight: 700; }
.mail__flag span { display: block; margin-top: 3px; font-weight: 400; }
.mail__warn { padding: 10px 12px; border: 1.5px solid var(--warn-ink); border-radius: 6px; background: var(--m-amber-soft); color: var(--paper-ink); }
.mail table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mail th, .mail td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--paper-line); text-align: left; vertical-align: top; }
.mail th { color: var(--paper-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mail td.q { width: 36px; font-weight: 700; font-variant-numeric: tabular-nums; }
.totals { display: grid; gap: 14px; }
@media (min-width: 560px) { .totals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.totals > * { min-width: 0; }
.mail__guests { display: grid; gap: 8px; list-style: none; }
.mail__guests li { padding-bottom: 8px; border-bottom: 1px solid var(--paper-line); font-size: 13.5px; }
.mail__guests b { display: block; }
.mail__foot { color: var(--paper-muted); font-size: 12.5px; }

.a4 { max-width: 100%; width: 100%; overflow: hidden; padding: 6% 6.5%; background: var(--paper); color: var(--paper-ink); font-family: var(--font-mail); font-size: 11.5px; line-height: 1.4; color-scheme: light; box-shadow: 0 0 0 1px var(--paper-line), 0 30px 60px -32px var(--frame-shadow); }
@media (min-width: 700px) { .a4 { aspect-ratio: 210 / 297; } }
/* The kitchen sheet (staff.js screenSheet): whose table and when, any
   allergies, what to cook, who has what. Black and white, one sheet of A4. */
.ks { font-size: 12px; line-height: 1.4; }
.ks-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px; gap: 14px; align-items: center; padding-bottom: 10px; border-bottom: 2px solid var(--paper-ink); }
.ks-head img { width: 44px; height: 44px; }
.ks-head h2 { font-size: 20px; line-height: 1.15; }
.ks-head p { margin-top: 2px; font-size: 14px; font-weight: 700; }
.ks-tableno { display: flex; gap: 6px; align-items: end; align-self: stretch; padding: 4px 8px; border: 1.5px solid var(--paper-ink); border-radius: 4px; font-size: 11px !important; }
.ks-warn { margin-top: 10px; padding: 6px 10px; border: 1.5px dashed var(--paper-ink); }
.ks-allergies { margin-top: 10px; padding: 6px 10px; border: 2px solid var(--paper-ink); }
.ks-allergies p + p { margin-top: 3px; }
.ks-h { margin: 14px 0 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ks-cook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ks-course { min-width: 0; }
.ks-course h3 { display: flex; justify-content: space-between; padding-bottom: 3px; border-bottom: 1px solid var(--paper-ink); font-size: 13px; }
.ks-course ul { list-style: none; }
.ks-course li { padding: 3px 0; border-bottom: 1px solid var(--paper-line); break-inside: avoid; }
.ks-course li > b { display: inline-block; min-width: 18px; font-variant-numeric: tabular-nums; }
.ks-course small { display: block; margin-left: 18px; font-size: 11px; }
.ks-quiet { color: var(--paper-muted); }
.ks-guests { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.ks-guests thead { display: table-header-group; }
.ks-guests th, .ks-guests td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--paper-line); font-weight: 400; text-align: left; vertical-align: top; }
.ks-guests thead th { border-bottom: 1.5px solid var(--paper-ink); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ks-guests tbody th { font-weight: 700; }
.ks-guests tr { break-inside: avoid; }
.ks-foot { margin-top: 8px; color: var(--paper-muted); font-size: 10px; }

@container (max-width: 640px) {
  .ks-head { grid-template-columns: 44px minmax(0, 1fr); }
  .ks-tableno { grid-column: 1 / -1; min-height: 36px; }
  .ks-cook { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ks-guests { min-width: 520px; }
  .ks-guests-wrap { overflow-x: auto; }
}

/* ---------- Demo additions ---------- */
.screen--wide { max-width: 1180px; background: transparent; }
@media (min-width: 700px) { .screen--wide { min-height: 0; overflow: visible; border-radius: 0; box-shadow: none; } }
.screen--wide .po-app { min-height: 100%; }
@media (max-width: 699px) { .screen--wide .po-app { border-radius: 0; } }
.po-top .po-btn { text-decoration: none; }
.po-btn .i { width: 16px; height: 16px; }
.po-btn .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--m-amber-soft); color: var(--m-amber-ink); font-size: 12px; }
a.po-btn { text-decoration: none; }
.po-split { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .po-split { grid-template-columns: minmax(0, 1fr) 320px; } }
.ctl { display: grid; align-content: start; gap: 10px; margin: 0 20px 22px; padding: 16px; border-radius: 14px; background: var(--m-white); box-shadow: 0 0 0 1px var(--m-line); }
@media (min-width: 1000px) { .ctl { position: sticky; top: calc(var(--bar-h) + 16px); margin: 18px 20px 22px 0; } }
.ctl h2 { font-family: var(--font-head); font-size: 19px; font-weight: 600; }
.ctl h3 { margin-top: 6px; font-size: 14px; font-weight: 700; }
.ctl__lede { color: var(--m-muted); font-size: 13px; }
.ctl__list { display: grid; gap: 8px; }
.ctl__btn { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: var(--m-teal-soft); color: var(--m-teal-deep); text-align: left; }
.ctl__btn:disabled { opacity: 0.55; cursor: default; }
.ctl__btn .i { margin-top: 1px; }
.ctl__btn b { display: block; font-size: 14px; }
.ctl__btn small { display: block; color: var(--m-charcoal); font-size: 12.5px; font-weight: 500; }
.ctl__safe { display: grid; gap: 4px; padding-left: 18px; list-style: disc; color: var(--m-muted); font-size: 13px; }
.po-banner { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 2px 10px; align-items: center; margin: 12px 20px 0; padding: 10px 6px 10px 14px; border-radius: 12px; background: var(--m-ok-soft); color: var(--m-ok); }
.po-banner b { grid-column: 1; font-size: 14.5px; }
.po-banner span { grid-column: 1; color: var(--m-charcoal); font-size: 13.5px; }
.po-banner .m-iconbtn { grid-column: 2; grid-row: 1 / span 2; background: none; color: var(--m-ok); }
.po-detail { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .po-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.po-card { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: var(--m-white); box-shadow: 0 0 0 1px var(--m-line); }
.po-card h3 { font-family: var(--font-head); font-size: 19px; font-weight: 600; }
.po-card p { display: flex; flex-wrap: wrap; gap: 8px; }
.po-log { display: grid; gap: 0; border-top: 1px solid var(--m-line); }
.po-log li { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--m-line); font-size: 14px; }
.po-log span { color: var(--m-muted); font-size: 13px; }
.po-card .po-match { display: grid; margin: 0; }
.po-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.po-form--wide { max-width: 560px; padding: 16px 20px 24px; }
.inbox { display: grid; border-radius: 14px; background: var(--m-white); box-shadow: 0 0 0 1px var(--m-line); }
.inbox li + li { border-top: 1px solid var(--m-line); }
.inbox__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; color: inherit; text-decoration: none; }
.inbox__row b { grid-column: 1; font-size: 15px; }
.inbox__row small { grid-column: 2; grid-row: 1; color: var(--m-muted); font-size: 12.5px; white-space: nowrap; }
.inbox__row.is-new b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--m-teal); }
.inbox__kind { grid-column: 1 / -1; justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--m-teal-soft); color: var(--m-teal-deep); font-size: 12px; font-weight: 700; }
.inbox__kind--cancel, .inbox__kind--undelivered, .inbox__kind--cutoff, .inbox__kind--changed-booking { background: var(--m-amber-soft); color: var(--m-amber-ink); }
.inbox__empty { padding: 18px 16px; color: var(--m-muted); }
.mail__warn b { color: var(--paper-ink); }
.sheet-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.po-page .a4 { max-width: 760px; }
.po-page .mail { max-width: 760px; }
/* No-shows, opens and phone orders: the call list, the booking facts, the
   order taken by phone, and the sheet's "not confirmed" flag. */
.ring-list { display: grid; gap: 8px; }
.ring { display: grid; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--m-line); }
.ring:first-child { border-top: 0; }
.ring__who { display: grid; gap: 4px; min-width: 0; }
.ring__who b { font-size: 16px; font-weight: 700; }
.ring__who > span:not(.st) { color: var(--m-muted); font-size: 13.5px; }
.ring__acts { display: flex; flex-wrap: wrap; gap: 8px; }
@container (min-width: 760px) {
  .ring { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
  .ring__acts { justify-content: flex-end; }
}
.po-facts { display: grid; gap: 6px; font-size: 14px; }
.po-facts div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.po-facts dt { color: var(--m-muted); }
.po-sms { display: block; margin-top: 6px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--m-paper); box-shadow: inset 0 0 0 1px var(--m-line); color: var(--m-charcoal); font-size: 13px; font-weight: 500; }
/* The order taken by phone, on the booker's own screens: their table list
   on the left, the guest's menu on the right. Below 900px they are two steps. */
.po-take__bar { align-items: center; }
.po-taker { display: grid; grid-template-columns: auto minmax(0, 200px); gap: 10px; align-items: center; }
.po-taker label { font-size: 14px; font-weight: 700; }
.po-taker .po-input { min-height: 44px; }
.po-take { display: grid; gap: 20px; padding: 0 20px 22px; }
.po-roster { display: grid; align-content: start; gap: 10px; min-width: 0; }
.po-roster__h { font-size: 14px; }
.po-roster .guest.is-current { background: var(--m-teal-soft); }
.po-roster .guests li:first-child { border-radius: 14px 14px 0 0; }
.po-roster .guests li:last-child { border-radius: 0 0 14px 14px; }
.po-finish { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--m-white); box-shadow: 0 0 0 1px var(--m-line); }
.po-finish .po-check { padding: 0; background: none; }
.po-phone { min-width: 0; }
.po-phone .screen { max-width: none; margin: 0; }
@container (min-width: 900px) {
  .po-take { grid-template-columns: 360px minmax(0, 1fr); align-items: start; }
  .po-roster { position: sticky; top: calc(var(--bar-h) + 12px); }
  /* Unclipped, so the guest's header, section chips and dock stay pinned. */
  .po-phone .screen { min-height: 0; overflow: visible; }
  .po-phone .m-top { top: var(--bar-h); border-radius: 28px 28px 0 0; }
  .po-phone .chips { top: calc(var(--bar-h) + 64px); }
  .po-phone .m-section { scroll-margin-top: calc(var(--bar-h) + 130px); }
  .po-phone .m-dock { border-radius: 0 0 28px 28px; }
}
@container (max-width: 899px) {
  .po-take:not(.has-guest) .po-phone { display: none; }
  .po-take.has-guest .po-roster { display: none; }
  /* A guest open on a phone: just the booker's screen; its back arrow is the table. */
  .po--guest .po-top, .po--guest .po-take__bar { display: none; }
  .po-take.has-guest { padding-inline: 0; }
  .po-take.has-guest .po-phone .screen { border-radius: 0; box-shadow: none; }
  .po-take { padding-inline: 12px; }
  .po-take__bar { align-items: start; }
}
.po-page .a4 { overflow: visible; }

/* ---------- Staff side, second pass ----------
   The guest pages' language for the team's screens: rows you tap like the
   booker's guest list, status in words, one main action per screen, the
   photo header on This week, and the demo's own buttons and notes in the
   demo bar's charcoal so they never read as the product. */
.demo-bar__tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--m-amber-soft); color: var(--m-amber-ink); font-size: 12px; font-weight: 700; }

/* Top bar: brand, two tabs, one "add" button. */
.po-top { gap: 10px 16px; padding: 12px 20px; }
.po-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.po-nav__tab, .po-nav__add { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--m-charcoal); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.po-nav__tab[aria-current="page"] { background: var(--m-teal-soft); color: var(--m-teal-deep); }
.po-nav__add { background: var(--m-teal); color: var(--m-white); }
.po-nav .i { width: 18px; height: 18px; }
.po-nav .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--m-amber-soft); color: var(--m-amber-ink); font-size: 12px; }
@container (max-width: 560px) {
  .po-top { padding: 10px 12px; }
  .po-nav { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; }
  .po-nav__tab { gap: 6px; padding: 0 6px; font-size: 13.5px; }
  .po-nav__tab .i { display: none; }
  .po-nav__tab { white-space: nowrap; }
  .po-nav__tab { justify-content: center; padding: 0 8px; }
  .po-nav__add { padding: 0 13px; }
  .po-nav__add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* This week's header: the booker's photo band. */
.po-hero { position: relative; display: grid; align-content: end; min-height: 168px; padding: 18px 20px 18px; background: var(--m-charcoal); color: var(--m-white); }
.po-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.po-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--m-photo-shade); }
.po-hero > :not(.po-hero__photo) { position: relative; z-index: 2; }
.po-hero__h { font-family: var(--font-head); font-size: clamp(25px, 3.4cqi, 34px); font-weight: 600; line-height: 1.1; text-wrap: balance; }
.po-hero__when { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 6px; font-size: 15px; font-weight: 600; }
.po-hero__when span { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 500; opacity: 0.92; }
.po-hero__when .i { width: 15px; height: 15px; }

.po-split .po-page { align-content: start; }
.po-day__h { font-size: 20px; font-weight: 600; }

/* Needs you today: one line per table that needs a person. */
.needs { display: grid; gap: 8px; }
.needs__h { display: flex; gap: 8px; align-items: center; font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.needs__h span { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--m-amber-soft); color: var(--m-amber-ink); font-family: var(--font-body); font-size: 13px; font-weight: 700; }
.needs__h .i { color: var(--m-ok); }
.todos { display: grid; list-style: none; border-radius: 14px; background: var(--m-white); box-shadow: 0 0 0 1px var(--m-line); }
.todos li + li { border-top: 1px solid var(--m-line); }
.todo { display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 12px; align-items: center; min-height: 60px; padding: 10px 14px; color: inherit; text-decoration: none; }
.todo__dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--m-amber-soft); color: var(--m-amber-ink); }
.todo__dot .i { width: 18px; height: 18px; }
.todo__main { display: grid; min-width: 0; }
.todo__main b { font-size: 15px; font-weight: 700; }
.todo__main span { color: var(--m-muted); font-size: 13px; }
.todo__go, .bk__go { width: 20px; height: 20px; color: var(--m-muted); }

/* Booking rows: the whole row opens the booking. */
.po-list > li + li { border-top: 1px solid var(--m-line); }
.po-list .bk { position: relative; grid-template-columns: 70px minmax(0, 1fr) 20px; gap: 6px 12px; align-items: center; border-top: 0; color: inherit; text-decoration: none; }
.po-list .bk__state { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.po-list .bk__go { grid-column: 3; grid-row: 1 / span 2; }
.po-list .bk__who span { font-size: 13px; }
.po-list .bk .meter { flex: 1 1 140px; max-width: 200px; }
@container (min-width: 760px) {
  .po-list .bk { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 300px) 20px; gap: 16px; }
  .po-list .bk__state { grid-column: 3; }
  .po-list .bk__go { grid-column: 4; grid-row: auto; }
}
.st .i { flex: none; }

/* The demo's buttons, in charcoal. */
.ctl { background: var(--m-charcoal); box-shadow: none; color: var(--m-white); }
.ctl__tag { display: flex; gap: 8px; align-items: center; font-size: 13px; opacity: 0.92; }
.ctl h2 { color: var(--m-white); }
.ctl__lede, .ctl__safe { color: rgb(255 255 255 / 78%); }
.ctl h3 { color: var(--m-white); }
.ctl__btn { border: 0; background: rgb(255 255 255 / 9%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); color: var(--m-white); }
.ctl__btn small { color: rgb(255 255 255 / 78%); }
.ctl__btn .i { color: var(--m-amber-soft); }

/* What just happened: a demo note, not product UI. */
.po-banner { grid-template-columns: auto minmax(0, 1fr) 44px; gap: 10px; align-items: start; margin: 0; padding: 12px 8px 12px 14px; border-radius: 14px; background: var(--m-charcoal); box-shadow: none; color: var(--m-white); }
.po-banner > div { display: grid; gap: 2px; }
.po-banner b, .po-banner > div span { grid-column: auto; color: var(--m-white); }
.po-banner > div span { color: rgb(255 255 255 / 82%); font-size: 13.5px; }
.po-banner .demo-bar__tag { margin-top: 1px; }
.po-banner .m-iconbtn { grid-column: 3; grid-row: 1; color: var(--m-white); }

/* The booking page. */
.po-booking { gap: 16px; }
.po-detail { display: grid; gap: 16px; }
.po-col { display: grid; align-content: start; gap: 14px; min-width: 0; }
@container (min-width: 900px) { .po-detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.po-head { display: grid; gap: 10px; padding: 18px; border-radius: 14px; background: var(--m-white); box-shadow: 0 0 0 1px var(--m-line); }
.po-head__h { font-family: var(--font-head); font-size: 26px; font-weight: 600; line-height: 1.12; text-wrap: balance; }
.po-head__when { margin-top: -6px; color: var(--m-muted); font-size: 15px; font-weight: 600; }
.po-head .progress__nums { align-items: center; }
.po-act { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: var(--m-teal-soft); }
.po-act h2 { font-family: var(--font-head); font-size: 20px; font-weight: 600; line-height: 1.2; }
.po-act p { font-size: 14.5px; }
.po-act__phone { display: flex; gap: 10px; align-items: center; font-size: 22px; font-weight: 700; }
.po-act__phone .i { color: var(--m-teal); }
.po-act__h { margin-top: 2px; font-weight: 700; }
.po-act__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.po-act .chip-m { min-height: 44px; background: var(--m-white); }
.po-act .chip-m[aria-pressed="true"] { background: var(--m-teal); }
.po-main { display: grid; gap: 10px; }
.po-quiet { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; color: var(--m-muted); font-size: 13.5px; }
.po-card h2 { font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.po-facts div { grid-template-columns: 96px minmax(0, 1fr); }
.po-log li { gap: 6px; padding: 12px 0; }
.po-log__h { display: flex; flex-wrap: wrap; gap: 2px 10px; justify-content: space-between; }
.po-log__h span { color: var(--m-muted); font-size: 13px; }
.po-log .bubble { max-width: 100%; font-size: 14px; }
.po-card .po-quiet { display: flex; }

/* Emails to the pub: rows like Needs you today; unread in bold with a dot. */
.inbox .todo__main b { font-weight: 600; }
.inbox .is-new .todo__main b { font-weight: 800; }
.todo__dot--mail { background: var(--m-teal-soft); color: var(--m-teal-deep); }
.stepper button { display: grid; place-items: center; min-width: 48px; background: var(--m-paper); color: var(--m-charcoal); font-family: var(--font-body); font-size: 24px; line-height: 1; }
.stepper .i { width: 22px; height: 22px; stroke-width: 2.4; }

/* The menu editor. */
.mtabs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.mtabs nav { display: flex; flex-wrap: wrap; gap: 8px; }
.msec { display: grid; gap: 8px; }
.msec h3 { font-family: var(--font-head); font-size: 19px; font-weight: 600; }
.msec ul { display: grid; list-style: none; border-radius: 14px; background: var(--m-white); box-shadow: 0 0 0 1px var(--m-line); }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) 104px 116px 64px; gap: 12px; align-items: center; padding: 10px 14px; }
.mrow + .mrow { border-top: 1px solid var(--m-line); }
.mrow__name { display: grid; min-width: 0; }
.mrow__name b { font-size: 15px; }
.mrow__name span { overflow: hidden; color: var(--m-muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.mrow__price { display: flex; gap: 4px; align-items: center; font-weight: 700; }
.mrow__price .m-input { min-height: 40px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.mrow .chip-m { min-height: 40px; justify-content: center; }
.mrow--off .mrow__name b { color: var(--m-muted); }
.mrow--gone { grid-template-columns: minmax(0, 1fr) auto; background: var(--m-paper); }
.mrow--gone .mrow__name b { color: var(--m-muted); text-decoration: line-through; }
.madd { gap: 12px; }
.madd h2 { font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.madd__row { display: grid; grid-template-columns: 1.2fr 1.4fr 0.6fr; gap: 12px; }
.madd .m-btn { justify-self: start; width: auto; }
@container (max-width: 640px) {
  .mrow { grid-template-columns: minmax(0, 1fr) 96px; }
  .mrow .chip-m, .mrow .m-link { grid-row: 2; }
  .mrow .chip-m { justify-self: start; }
  .madd__row { grid-template-columns: 1fr; }
}

@media print {
  .demo-bar, .po-top, .sheet-actions, .toast-msg { display: none !important; }
  body, .stage, .po-app { background: #fff !important; box-shadow: none !important; padding: 0 !important; }
  /* overflow: hidden clips a box's last printed fragment in Chrome */
  .po-app, .po-page { overflow: visible !important; }
  /* fitted to one sheet by staff.js fitSheet() */
  .ks { zoom: var(--ks-fit, 1); }
  /* the app shell's screen heights and padding would print as a blank last page */
  .stage, .screen, .screen--wide .po-app { min-height: 0 !important; }
  .po-page { padding: 0 !important; }
  .a4 { box-shadow: none; aspect-ratio: auto; padding: 0; max-width: none !important; }
}
/* A4 with room for the running head and page count (Chrome draws them). */
@page { size: A4; margin: 11mm 11mm 13mm; @bottom-left { font: 8pt Arial, sans-serif; color: var(--paper-muted); } @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt Arial, sans-serif; color: var(--paper-muted); } }