@font-face{font-family:'Jost';src:url(/assets/fonts/Jost-300.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Jost';src:url(/assets/fonts/Jost-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url(/assets/fonts/Jost-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Emberline';src:url(/assets/fonts/Emberline-Display.woff) format('woff');font-weight:100 900;font-display:swap}
@font-face{font-family:'Emberline Text';src:url(/assets/fonts/Emberline-Text.woff) format('woff');font-weight:100 900;font-display:swap}
:root{
--bg:#17181a;--bg-deep:#111214;--panel:#1e1f22;--raised:#26282b;
--text:#e9e6e0;--soft:#c2bfb9;--muted:#b4b1ab;
--rule:#2e3034;--rule-strong:#34363a;--field:#6b6d72;--button:#7c7e84;
--accent:#c8a46e;--up:#9cc59c;--down:#e58a7f;
/* The kitchen's two waits, kept apart from the brass: an ember amber and an oxblood, far apart in lightness so they part for a colour-blind cook too. */
--slow:var(--accent);--slow-ink:var(--bg-deep);--late:#b3261e;--late-ink:#fff;
--body:'Jost','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
--display:'Emberline','Hiragino Mincho ProN','Yu Mincho',Georgia,serif;
--display-small:'Emberline Text','Emberline','Hiragino Mincho ProN','Yu Mincho',Georgia,serif;
--page:1320px;--gutter:clamp(20px,5vw,64px)}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:300 17px/1.6 var(--body)}
a{color:var(--text);-webkit-tap-highlight-color:rgb(200 164 110/.25)}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.accent{color:var(--accent)}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--gutter);top:8px;z-index:5;padding:10px 16px;background:var(--accent);color:var(--bg)}

/* Square's test system: said once, loudly, on every screen. */
.sandbox{background:var(--accent);color:var(--bg);text-align:center;font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:5px 12px}

.bar{background:var(--bg-deep);border-bottom:1px solid var(--rule)}
.bar-in{max-width:var(--page);margin:0 auto;padding:clamp(6px,1.4vw,14px) var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 32px}
.mark{font:400 24px/1 var(--display-small);letter-spacing:.02em;text-decoration:none;padding:14px 0}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 clamp(16px,3vw,32px);font-weight:400;font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.nav a{text-decoration:none;padding:14px 0;border-bottom:1px solid transparent}
.nav a[aria-current=page]{color:var(--accent);border-bottom-color:var(--accent)}
.who{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--muted)}
.who a{color:var(--muted);text-decoration:none}
.who a:hover,.who a[aria-current=page]{color:var(--accent)}
.signin .plain{align-self:center}
.who form{margin:0}

.main{flex:1 0 auto;width:100%;max-width:var(--page);margin:0 auto;padding:clamp(36px,6vw,80px) var(--gutter) clamp(56px,8vw,112px);display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.foot{border-top:1px solid var(--rule)}
.foot-in{max-width:var(--page);margin:0 auto;padding:26px var(--gutter) 34px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;font-size:14px;letter-spacing:.06em;color:var(--muted)}
.foot .mark{font-size:20px;padding:0;color:var(--text)}

/* A screen's title: a small brass line above, the title in Emberline, a sentence below. */
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.eyebrow{margin:0 0 10px;font-weight:400;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
h1{margin:0;font:400 clamp(36px,4.6vw,62px)/1.04 var(--display);letter-spacing:.01em;text-wrap:balance}
.lede{margin:14px 0 0;max-width:36em;color:var(--muted)}
.section{display:flex;flex-direction:column;gap:22px;min-width:0}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;border-bottom:1px solid var(--accent);padding-bottom:12px}
h2{margin:0;font:400 clamp(22px,2.2vw,28px)/1.1 var(--display-small)}
.aside{font-size:14px;color:var(--muted)}
.label{margin:0;font-weight:400;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(40px,5vw,64px) clamp(32px,5vw,72px)}

/* The day's figures: each under a rule with its label, as the website sets out its visit details. */
.figures{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:32px clamp(28px,4vw,56px)}
.figure{display:flex;flex-direction:column;gap:6px;min-width:0;border-top:1px solid var(--rule-strong);padding-top:18px}
.figure dt{font-weight:400;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.figure dd{margin:0;font:400 clamp(30px,3vw,40px)/1.1 var(--display-small);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.figure.lead{border-top-color:var(--accent)}
/* The lead figure is set large, so it takes two columns: a five-figure day must not break across lines. */
@media (min-width:641px){.figure.lead{grid-column:span 2}}
.figure.lead dd{overflow-wrap:normal;white-space:nowrap}
.figure.lead dt{color:var(--accent)}
.figure.lead dd{font:400 clamp(44px,5.4vw,72px)/1 var(--display);color:var(--accent)}
.figure .delta{font:300 14px/1.4 var(--body);letter-spacing:0;color:var(--muted)}
.up{color:var(--up)}.down{color:var(--down)}

/* Buttons and fields: square-cornered, as on the website. */
.btn,button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid var(--button);background:rgb(18 19 21/.55);color:var(--text);font:400 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0;white-space:nowrap}
.btn:hover,button:hover{border-color:var(--accent);color:var(--accent)}
.primary,.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:500}
.plain{min-height:0;padding:0;border:0;background:none;color:var(--muted);font:inherit;letter-spacing:0;text-transform:none;text-decoration:underline}
.days{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.days form{display:flex;align-items:flex-end;gap:10px;margin:0}
form.row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:0}
label{display:flex;flex-direction:column;gap:8px;font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
input{min-height:46px;padding:0 14px;background:var(--bg);color:var(--text);border:1px solid var(--field);border-radius:0;font:300 17px var(--body);letter-spacing:0;text-transform:none;color-scheme:dark}

/* Tables: the one place lines carry the structure. */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:14px 20px 14px 0;text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:baseline}
th:last-child,td:last-child{padding-right:0}
th{padding-top:0;font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
td.name{white-space:normal;min-width:10em;font-weight:400}
.num{text-align:right}
tfoot td{border-bottom:0;font-weight:400}
.total td{border-top:1px solid var(--accent);border-bottom:0}
.sub{font-size:15px;color:var(--muted)}

/* How guests paid: a row each, with a bar for its share of the day. */
.mix{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.mix li{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:baseline}
.mix .what{font-weight:400}
.mix .amount{font-variant-numeric:tabular-nums}
.mix progress{grid-column:1/-1;display:block;width:100%;height:4px;border:0;background:var(--rule);appearance:none}
.mix progress::-webkit-progress-bar{background:var(--rule)}
.mix progress::-webkit-progress-value{background:var(--accent)}
.mix progress::-moz-progress-bar{background:var(--accent)}

/* Sales by the hour. */
.hours{display:block;width:100%;height:auto;overflow:visible}
.hours .bar-fill{fill:var(--accent)}
.hours .bar-rest{fill:var(--rule)}
.hours .axis{stroke:var(--rule-strong);stroke-width:1}
.hours text{font:400 11px var(--body);letter-spacing:.08em;fill:var(--muted)}
.hours .peak{fill:var(--text)}

.empty{margin:0;padding:clamp(28px,5vw,48px) 24px;border:1px solid var(--rule);background:var(--panel);color:var(--muted);text-align:center}
.empty strong{display:block;margin-bottom:4px;font:400 22px/1.2 var(--display-small);color:var(--text)}
.note{margin:0;padding:16px 20px;border-left:2px solid var(--accent);background:var(--panel)}
.note.bad{border-left-color:var(--down)}
.tag{display:inline-block;padding:2px 9px;border:1px solid var(--rule-strong);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tag.ok{border-color:var(--up);color:var(--up)}
.tag.no{border-color:var(--down);color:var(--down)}

/* Forms: the menu editor. Fields in pairs, English beside Japanese. */
.form{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px);margin:0;max-width:980px}
fieldset{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:20px;min-width:0}
legend{padding:0 0 12px;margin-bottom:8px;width:100%;border-bottom:1px solid var(--accent);font:400 clamp(20px,2vw,24px)/1.1 var(--display-small)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.pair .hint{grid-column:1/-1}
textarea,select{padding:10px 14px;background:var(--bg);color:var(--text);border:1px solid var(--field);border-radius:0;font:300 17px/1.5 var(--body);letter-spacing:0;text-transform:none;color-scheme:dark;width:100%}
select{min-height:46px}
textarea{resize:vertical}
label input:not([type=checkbox]),label select,label textarea{width:100%}
.hint{margin:0;font-size:15px;color:var(--muted);max-width:60em}
.problem{margin:-10px 0 0;font-weight:400;font-size:15px;color:var(--down)}
.check{flex-direction:row;align-items:flex-start;gap:12px;font:300 17px/1.5 var(--body);letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer}
.check input{width:20px;height:20px;min-height:0;margin:3px 0 0;flex:none;accent-color:var(--accent)}
.check strong{font-weight:400;color:var(--text)}
.options{display:flex;flex-direction:column;gap:14px}
.option-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,1fr);gap:12px;align-items:end}
.form-actions{display:flex;flex-wrap:wrap;gap:12px}
.tax-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px}
.form.tax{gap:0}
.tax-delete{margin:-6px 0 28px;justify-content:space-between}
.danger{border-top:1px solid var(--rule);padding-top:clamp(28px,4vw,44px);max-width:980px}
.danger .section-head{border-bottom-color:var(--down)}
.danger h2{font-size:clamp(20px,2vw,24px)}
.danger button[type=submit]:hover{border-color:var(--down);color:var(--down)}
/* A row's own buttons: small, so a table of them stays calm. */
.acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
td.acts{display:table-cell;text-align:right}
td.acts>*{margin-left:6px;vertical-align:middle}
form.inline{display:inline-flex;margin:0}
.mini{display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:36px;padding:0 12px;border:1px solid var(--button);background:none;color:var(--text);font:400 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;border-radius:0;white-space:nowrap}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.mini.primary,.mini.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:500}
.option{display:block}
/* A hidden item steps back, but the tag that says why stays at full strength. */
tr.dim td.name,tr.dim td.num,tr.dim td.name .sub,tr.dim .option .sub{color:color-mix(in srgb,var(--text) 50%,var(--bg))}
tr.out td.name{color:var(--muted)}
.on-phone{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:640px){.option-row{grid-template-columns:1fr 1fr}.option-row label:last-child{grid-column:1/-1}
/* A table of things to act on becomes a list: name and price on one line, its buttons beneath. */
.rows thead{display:none}
.rows tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.rows td{border:0;padding:0;white-space:normal}
.rows td.name{min-width:0}
.rows td.acts{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;text-align:left}
.rows td.acts>*{margin-left:0}
.section-head .acts{justify-content:flex-start}}

/* A gift card, shown as the card it will be. */
.giftcard{width:100%;max-width:440px;aspect-ratio:85.6/53.98;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,4vw,28px);background:var(--bg-deep);border:1px solid var(--rule-strong);border-radius:14px;box-shadow:0 18px 40px rgb(0 0 0/.45)}
.giftcard .mark{padding:0;font-size:clamp(18px,3vw,24px)}
.giftcard .number{font:400 clamp(17px,3.6vw,24px)/1.2 ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.giftcard .row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.giftcard .balance{font:400 clamp(24px,5vw,34px)/1 var(--display-small);color:var(--accent)}
.card-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px clamp(32px,5vw,72px);align-items:start}

/* Sign-in: the brass glow from the website's hero, behind one quiet form. */
.signin{flex:1;display:flex;align-items:center;justify-content:center;padding:clamp(24px,6vw,72px) var(--gutter);background:radial-gradient(ellipse 60% 50% at 50% 38%,rgb(200 164 110/.13),transparent 70%),var(--bg-deep)}
.signin-in{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.signin .crest{width:76px;height:76px}
.signin h1{font-size:clamp(40px,8vw,56px)}
.signin form{width:100%;display:flex;flex-direction:column;gap:18px;text-align:left;margin:0}
.signin .rule{width:72px;height:1px;background:var(--accent)}
/* On a phone a table keeps only the columns that matter most; what was dropped is said another way. */
.narrow,.who-short{display:none}
@media (max-width:640px){.who-name{display:none}.who-short{display:inline}table{font-size:15px}th,td{padding-right:10px}th{letter-spacing:.16em}.sub{font-size:13px}.wide{display:none}.narrow{display:inline}}
/* The menu's lists: the same columns in the same place in every section, so prices can be read down the page. */
@media (min-width:641px){
table.menu-items{table-layout:fixed}
table.menu-items th:nth-last-child(3),table.menu-items td:nth-last-child(3){width:230px}
table.menu-items th:nth-last-child(2),table.menu-items td:nth-last-child(2){width:170px}
table.menu-items th:last-child,table.menu-items td:last-child{width:250px}
table.menu-items .grip-cell{width:0}
table.menu-items.movable .grip-cell,.can-drag table.menu-items .grip-cell{width:44px}
}
/* The top bar: who is signed in stays beside the name, whatever the length of either; the sections take the row beneath. */
@media (max-width:1500px){.bar-in{gap:0 24px}.nav{order:3;flex-basis:100%}}
/* Japanese: break between phrases, never one character from the end of a word; and no wide tracking, which pulls kana apart. */
:lang(ja){line-break:strict;word-break:auto-phrase}
td.name .sub:lang(ja),h2 .aside:lang(ja){display:inline-block}
:lang(ja):is(.mini,.btn,button,.eyebrow,th,label,legend,.label,.tag,.nav a,.lane-head h2){letter-spacing:.08em}
@media (max-width:640px){.pair{grid-template-columns:1fr}.on-phone{display:block;font-size:13px}.mini{min-height:44px;font-size:12px}.rows td.acts{gap:12px}.who a,.who .plain{padding:11px 0}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* A heading that sorts is a link the size of the heading, with a quiet mark that brightens when it is the sort in use. */
th a.sort{display:inline-flex;align-items:baseline;gap:8px;color:inherit;text-decoration:none;padding:6px 0;margin:-6px 0}
th a.sort:hover,th[aria-sort] a.sort{color:var(--accent)}
.sort-mark{font-size:13px;letter-spacing:0;opacity:.45}
th[aria-sort] .sort-mark,th a.sort:hover .sort-mark{opacity:1}

/* Pages: what is shown, then the way to the rest. */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:22px}
.pager-count{margin:0;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.pager ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pager .gap{min-width:20px;text-align:center;color:var(--muted)}
.mini.on{border-color:var(--accent);color:var(--accent)}
.mini.off{opacity:.35;cursor:default}
.mini.off:hover{border-color:var(--rule-strong);color:var(--text)}

/* The handle a row is dragged by. It takes no room until the script that makes it work is running. */
.grip-cell{width:0;padding:0 !important;border-bottom-color:var(--rule)}
.can-drag .grip-cell{width:34px;padding-right:10px !important}
.grip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:36px;margin:-8px 0;padding:0;border:1px solid transparent;background:none;color:var(--muted);cursor:grab;touch-action:none;vertical-align:middle}
.grip svg{fill:currentColor}
.grip:hover,.grip:focus-visible{color:var(--accent);border-color:var(--rule-strong)}
.grip:focus-visible{outline-offset:-2px}
.section-head .grip{margin-right:10px}
.grip[hidden]{display:none}
/* With the handle there, the arrow buttons would say the same thing twice. */
.can-drag>[data-id] form.move,.can-drag>[data-id]>.section-head form.move{display:none}
.dragging{background:var(--raised);outline:1px solid var(--accent);outline-offset:-1px;position:relative;z-index:1}
.dragging .grip{cursor:grabbing;color:var(--accent)}
section.dragging{outline-offset:12px;background:none}
.drag-active,.drag-active *{cursor:grabbing !important;user-select:none}
.section-head .grip{margin:0 4px 0 -8px}

/* The menu's sections sit in a wrapper so they can be dragged; it spaces them as the page would. */
.sections{display:flex;flex-direction:column;gap:inherit}

/* The word on what just happened, bottom centre, gone after a moment. */
.toast{position:fixed;left:50%;bottom:28px;z-index:20;transform:translate(-50%,12px);max-width:min(92vw,520px);padding:12px 20px;background:var(--panel);border:1px solid var(--rule-strong);border-left:3px solid var(--accent);color:var(--text);font-size:15px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast[data-tone=bad]{border-left-color:var(--down)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
/* Stacked on a phone: the handle sits before the name. */
@media (max-width:640px){.rows .grip-cell{display:none}.rows .can-drag .grip-cell{display:block;width:auto;padding:0 !important}.rows .can-drag>tr{grid-template-columns:auto minmax(0,1fr) auto}.pager{justify-content:flex-start}}
@media print{.pager,.grip,.toast,.sort-mark{display:none !important}}
/* What is on all cards: one figure beside the title, held up to Square's limit in words. */
.outstanding{flex:0 1 340px;grid-template-columns:1fr}
.outstanding .figure dd:first-of-type{color:var(--accent)}

/* Selling or topping up: the one form where a click creates value, so it stands apart as an object, in a frame of its own. */
.load{max-width:760px;padding:clamp(22px,4vw,36px);background:var(--panel);border:1px solid var(--rule-strong);border-top:2px solid var(--accent)}
.load .section-head .aside{font:400 15px/1.2 ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.load-form{display:flex;flex-direction:column;gap:22px;margin:0}
.load-amount{max-width:280px}
.load-amount input{font:400 28px/1 var(--display-small);font-variant-numeric:tabular-nums;min-height:58px}
.load-form .hint{margin-top:-12px}
.load-paid{gap:14px}
.load-paid legend{font:400 12px/1.4 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);border-bottom:0;padding:0;margin-bottom:4px}
.load-paid .check{padding:14px 18px;border:1px solid var(--rule-strong);background:var(--bg)}
.load-paid .check input{width:20px;flex:none}
.load-paid .check span{color:var(--text)}
.load-paid .check:has(input:checked){border-color:var(--accent)}
.load-taken{padding:16px 18px;border:1px solid var(--rule-strong);background:var(--bg)}
.load-taken:has(input:checked){border-color:var(--accent)}
.load-fixed{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:18px 32px}
.load-fixed div{border-top:1px solid var(--rule-strong);padding-top:12px}
.load-fixed dt{font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.load-fixed dd{margin:6px 0 0;color:var(--text)}
.load-fixed div:first-child dd{font:400 28px/1.1 var(--display-small);color:var(--accent);font-variant-numeric:tabular-nums}
.load .form-actions .primary{min-width:min(100%,240px)}
@media (max-width:640px){.load{padding:20px 16px}.load .form-actions .primary{width:100%}}
/* The end-of-day report. On screen it matches its sibling, the takings page. */
.print-only{display:none}
.downloads{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.generated{margin:0;font-size:15px}
.signoff .lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:36px clamp(24px,4vw,56px)}
.signoff .line{display:flex;flex-direction:column;gap:34px}
.signoff .line span{font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.signoff .line i{display:block;border-bottom:1px solid var(--soft);height:0}

/* On paper: A4 portrait, black on white, nothing that is not the figures. */
@page{size:A4 portrait;margin:14mm}
@media print{
.bar,.sandbox,.nav,.foot,.skip,.days,.downloads,.hint{display:none !important}
.print-only{display:inline}
html{color-scheme:light}
body{display:block;min-height:0;background:#fff !important;color:#000 !important;font:300 11pt/1.45 var(--body)}
*,*::before,*::after{box-shadow:none !important;text-shadow:none !important;background:transparent !important;color:#000 !important;border-color:#000 !important}
.main{display:block;max-width:none;padding:0}
.main>*+*{margin-top:9mm}
h1{font-size:24pt}
.eyebrow,.accent,.figure dt,th,.sub,.muted,.aside,.hint,.delta,.signoff .line span{color:#000 !important}
.section-head{border-bottom:1px solid #000}
.figures{grid-template-columns:repeat(3,1fr);gap:6mm 8mm}
.figure,.figure.lead{border-top:1px solid #000}
.figure.lead{grid-column:auto}
.figure dd,.figure.lead dd{font-size:18pt;color:#000 !important}
.scroll{overflow:visible}
table{page-break-inside:auto}
tr,.figure,.signoff,.section-head{break-inside:avoid;page-break-inside:avoid}
thead{display:table-header-group}
th,td{border-bottom:1px solid #999}
.test-figures{border:2pt solid #000 !important;border-left-width:6pt !important;padding:3mm 4mm;font-weight:500;color:#000 !important}
.empty{border:1px solid #000}
.signoff .line{gap:12mm}
.signoff .line i{border-bottom:1px solid #000}
}
/* The staff list: one person a row, name and role on the left, what can be done on the right. */
.people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.person{display:grid;grid-template-columns:minmax(12em,1fr) auto;align-items:end;gap:14px 32px;padding:20px 0;border-bottom:1px solid var(--rule)}
.person:first-child{padding-top:4px}
.person-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;min-width:0;align-self:center}
.person-name{font:400 clamp(20px,2vw,24px)/1.2 var(--display-small);overflow-wrap:anywhere;margin-right:4px}
.tag.you{border-color:var(--accent);color:var(--accent)}
.person-acts{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;gap:12px 20px}
.person-acts form.row{gap:8px;flex-wrap:nowrap}
.person-acts label{gap:6px;font-size:11px}
.person-acts select,.person-acts input{min-height:36px;font-size:15px}
.person-acts select{width:auto;padding:4px 10px}
.person-acts input{width:13em}
.person-self{text-align:right;justify-self:end;max-width:28em}
.person .note{grid-column:1/-1}
.mini.remove:hover{border-color:var(--down);color:var(--down)}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.staff-add,.account-form{gap:22px;max-width:none}
.staff-add .pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));align-items:start}
.languages{flex-direction:row;flex-wrap:wrap;gap:12px 28px}
.languages .check{align-items:center}
#language .muted{margin:0}
.languages .check input{width:20px;margin:0}
@media (max-width:860px){.person{grid-template-columns:1fr}.person-acts{justify-content:flex-start}.person-self{text-align:left;justify-self:start}}
@media (max-width:640px){.person-acts{flex-direction:column;align-items:stretch}.person-acts form.row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}.person-acts input,.person-acts select{width:100%}.person-acts .mini{min-height:40px}}
/* A screen for a wall: the window is the board, with one thin strip above it. */
.wall{display:flex;flex-direction:column;min-height:100vh}
.wall-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding:4px clamp(14px,2vw,28px);background:var(--bg-deep);border-bottom:1px solid var(--rule)}
.wall-bar .mark{font-size:20px;padding:10px 0}
.wall-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px}
.wall-tools form{margin:0}
.wall-tools [aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.wall-main{flex:1;width:100%;padding:clamp(14px,2vw,28px);display:flex;flex-direction:column;gap:20px}
.board{flex:1;display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px)}
.board-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px}
/* The count of what is on the board: said once, plainly; the columns' own counts carry the detail. */
.board-head h1{font:500 clamp(18px,1.6vw,24px)/1.2 var(--body);letter-spacing:.02em}
.board-as-of{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}
.board.behind .board-as-of{color:var(--down)}
.board-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.board-acts form{margin:0}
.sample-note{flex:none;border-left-color:var(--accent)}
.board-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}

/*
 * The board is read at arm's length, in a rush, by someone whose hands are
 * busy. So: a column for each stage (new, cooking, ready), tickets in strict
 * order of arrival, each one a plain tile whose whole head takes the colour
 * of its wait, and one wide button. Tiles and columns sit flush, parted by
 * a single dark line; nothing is decorated.
 */
/* One line, however many things there are: it must never push the tickets down. It can be swiped along. */
.all-day{flex:none;display:flex;align-items:baseline;gap:8px 20px;padding:10px 14px;background:var(--bg-deep);border:1px solid var(--rule-strong);overflow:hidden}
.all-day h2{flex:none;font:500 12px/1.6 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.all-day ul{list-style:none;margin:0;padding:0 40px 0 0;display:flex;flex-wrap:nowrap;gap:6px 26px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.all-day ul::-webkit-scrollbar{display:none}
.all-day li{flex:none;display:flex;align-items:baseline;gap:8px;white-space:nowrap;font-size:clamp(17px,1.5vw,22px)}
.all-day-count{flex:none;white-space:nowrap;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums}
.all-day-count::after{content:' ×';font-weight:300;color:var(--muted)}
.all-day-name{font-weight:400}
.all-day-size{color:var(--muted)}
.lanes{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong)}
/* On a wide screen the queue gets the room: New is twice the width and sets its tickets two across. */
@media (min-width:1400px){.lanes{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}.lane-new .tickets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;align-items:stretch}.lane-new .ticket:nth-child(odd){border-right:1px solid var(--rule-strong)}}
.lane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);scroll-margin-top:60px}
.lane-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--bg-deep);border-bottom:3px solid var(--field)}
.lane-head h2{font:500 clamp(15px,1.3vw,19px)/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.lane-count{min-width:1.9em;padding:4px 8px;text-align:center;font:500 clamp(16px,1.4vw,20px)/1 var(--body);font-variant-numeric:tabular-nums;background:var(--raised);color:var(--text)}
.lane-cooking .lane-head{border-bottom-color:var(--accent)}
.lane-ready .lane-head{border-bottom-color:var(--up)}
.lane-empty{margin:0;padding:18px 14px;color:var(--muted);font-size:15px}
/* Each column scrolls by itself, so its head and count never leave the screen. */
.tickets{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--field) transparent;display:flex;flex-direction:column;background:var(--bg)}
/* Each tile draws its own hairlines, so the space where there is no ticket is simply empty. */
.ticket{display:flex;flex-direction:column;background:var(--panel);border-bottom:1px solid var(--rule-strong)}
/* The head: whose order, and how long it has waited, on a band the colour of that wait. */
/* When a narrow column cannot hold the name, its tags and the clock on one line, the tags and clock drop to a second line: the name is never squeezed. */
.ticket-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 14px;background:var(--raised);color:var(--text)}
.ticket-name{flex:1 1 6em;min-width:min(6em,100%);margin:0;font:500 clamp(20px,1.8vw,26px)/1.15 var(--body);letter-spacing:.01em;overflow-wrap:break-word}
.ticket-age{flex:none;margin-left:auto;font:500 clamp(20px,1.8vw,26px)/1 var(--body);font-variant-numeric:tabular-nums}
.ticket-flag{flex:none;font:500 clamp(14px,1.2vw,18px)/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.ticket.due .ticket-flag,.ticket.late .ticket-flag{padding:3px 7px;border:2px solid currentColor}
.ticket-type{flex:none;padding:3px 8px;background:var(--text);color:var(--bg-deep);font:500 clamp(13px,1.1vw,17px)/1.1 var(--body);letter-spacing:.06em;text-transform:uppercase}
.ticket.due .ticket-flag::before{content:attr(data-due)}
.ticket.late .ticket-flag::before{content:attr(data-late)}
.ticket.due .ticket-head{background:var(--accent);color:var(--bg-deep)}
/* Late is a dark red with white type: apart from the amber of a slow ticket in lightness as well as hue, so it reads for a colour-blind cook too. */
.ticket.late .ticket-head{background:var(--late);color:var(--late-ink)}
.ticket.is-ready .ticket-head{background:var(--up);color:var(--bg-deep)}
/* The body takes whatever height the tile has, so the button always sits on the tile's bottom edge: two tickets side by side end level. */
.ticket-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:10px 14px 14px}
.ticket-about{margin:0;font-weight:400;font-size:clamp(14px,1.1vw,18px);color:var(--muted)}
.ticket-due{margin:0;font-weight:500;color:var(--accent)}
.ticket-lines{list-style:none;margin:0;padding:0}
/* The count's column is as wide as the widest count on the ticket (12, 0.5), so it can never run into the name. */
.ticket-lines{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px .5em;align-items:baseline}
.ticket-lines li{display:contents}
.qty{min-width:1.1em;text-align:right;font:500 clamp(22px,2vw,30px)/1.2 var(--body);font-variant-numeric:tabular-nums;color:var(--text)}
.ticket-lines .what{display:flex;flex-direction:column;gap:2px;min-width:0}
.ticket-lines .what strong{font:500 clamp(22px,2vw,30px)/1.2 var(--body);overflow-wrap:anywhere}
.ticket-lines .what .other{font-size:15px;color:var(--muted)}
.ticket-lines .what .variation{font:400 clamp(17px,1.5vw,21px)/1.3 var(--body);color:var(--soft)}
/* Changes to the item: indented, brass, heavy. These are what get missed. */
.ticket-lines .what .modifier{padding-left:14px;font:500 clamp(18px,1.6vw,23px)/1.3 var(--body);color:var(--accent);overflow-wrap:anywhere}
.ticket-lines .what .modifier::before{content:'+ '}
/* What the server typed: the loudest thing on the ticket, never cut short. */
.line-note,.ticket-note{margin:4px 0 0;padding:5px 10px;background:var(--text);color:var(--bg-deep);font:500 clamp(18px,1.6vw,23px)/1.3 var(--body);overflow-wrap:anywhere;align-self:stretch}
/* An allergy is said in a word and edged in red. */
.allergy{box-shadow:inset 6px 0 0 var(--late);padding-left:16px}
.allergy-mark{font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--late)}
.allergy-mark::before{content:'⚠ '}
/* At the pass the question is whose plate and how long it has stood, not what is on it: the same ticket, set smaller. */
.lane-ready .ticket-lines .what strong,.lane-ready .qty{font-size:clamp(17px,1.4vw,21px)}
.lane-ready .ticket-lines .what .other{display:none}
.lane-ready .ticket-lines{gap:4px .5em}
.lane-ready .ticket-body{gap:6px;padding-bottom:10px}
/* One wide button to move the ticket on; a narrow one beside it to step back. */
/* The step back and the wide button, flush, parted by one line like everything else on the board. */
.ticket-acts{display:flex;gap:1px;margin-top:auto;background:var(--rule-strong);border-top:1px solid var(--rule-strong)}
.ticket-acts form{margin:0;display:flex;min-width:0}
.ticket-acts .grow{flex:1}
.ticket-acts input{display:none}
.bump,.step-back{min-height:58px;border:0;background:var(--raised);color:var(--text)}
.bump{width:100%;font:500 15px/1 var(--body);letter-spacing:.24em}
.step-back{min-width:68px;padding:0;font-size:22px;letter-spacing:0;color:var(--muted)}
/* Only where there is a pointer to hover with: on a touch screen a hover colour sticks after the tap. */
@media (hover:hover){.bump:hover{background:var(--accent);color:var(--bg-deep)}.lane-ready .bump:hover{background:var(--up);color:var(--bg-deep)}.step-back:hover{background:var(--rule-strong);color:var(--text)}}
.bump:focus-visible,.step-back:focus-visible{outline-offset:-4px}
.bump:active,.step-back:active{filter:brightness(1.25)}
.bump:disabled,.step-back:disabled{opacity:.5}
/* A new order stays marked until someone starts it: a flash is missed by whoever was looking at the grill. */
.ticket.new{box-shadow:inset 0 0 0 3px var(--text)}
.ticket.new .ticket-body{animation:ticket-in 1.4s ease-in-out infinite alternate}
@keyframes ticket-in{0%{background:rgb(233 230 224/.16)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.ticket.new .ticket-body{animation:none}}

/* What has left the kitchen: one line at the foot, opened only to bring an order back. */
.finished{flex:none;border:1px solid var(--rule-strong);background:var(--bg-deep)}
.finished summary{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 14px;cursor:pointer;list-style:none}
.finished summary::-webkit-details-marker{display:none}
.finished-title{font:500 12px/1.6 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.finished-title::before{content:'+ ';color:var(--accent)}
.finished[open] .finished-title::before{content:'− '}
.was-list{list-style:none;margin:0;padding:0 14px;max-height:30vh;overflow-y:auto}
.was{display:grid;grid-template-columns:minmax(4em,10em) minmax(0,1fr) auto auto;gap:4px 20px;align-items:center;padding:8px 0;border-top:1px solid var(--rule);color:var(--muted);font-size:15px}
.was-name{font-weight:400;color:var(--soft);overflow-wrap:anywhere}
.was-what{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.was-when{font-variant-numeric:tabular-nums;white-space:nowrap}
.was form{margin:0}
.was .mini{min-height:48px}
@media (max-width:640px){.was{grid-template-columns:minmax(0,1fr) auto}.was-what{grid-column:1/-1;grid-row:2}.was-when{grid-column:1;grid-row:3}.was form{grid-column:2;grid-row:1/span 3}}

/*
 * Fitting the screen. From a small tablet up, the board is exactly the
 * height of the window: nothing is ever below the fold but more tickets in a
 * column. On a phone the columns stack and the page scrolls, with the three
 * counts fixed at the top as the way to each.
 */
.lane-chips{display:none}
@media (min-width:700px){
.wall{height:100vh;height:100dvh;overflow:hidden}
.wall-main{min-height:0;overflow:hidden}
.board{min-height:0}
.board>.note{flex:none}
.board-head,.board-foot{flex:none}
}
@media (min-width:700px) and (max-width:1000px){.ticket-lines .what strong,.qty{font-size:19px}.ticket-lines .what .modifier,.line-note,.ticket-note,.ticket-lines .what .variation{font-size:16px}.ticket-name,.ticket-age{font-size:18px}.ticket-head,.ticket-body,.lane-head{padding-left:10px;padding-right:10px}.bump,.step-back{min-height:52px}.step-back{min-width:48px}}
@media (max-width:699px){
.lanes{grid-template-columns:1fr}
.tickets{overflow:visible}
.all-day{display:none}
.wall-tools [data-fullscreen],.wall-tools [href="/kitchen/status"]{display:none}
.sandbox{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane-chips{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong)}
.lane-chips a{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:12px 10px;background:var(--bg-deep);text-decoration:none;font:500 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.lane-chips strong{font:500 18px/1 var(--body);letter-spacing:0}
.lane-chips .chip-cooking{color:var(--accent)}.lane-chips .chip-ready{color:var(--up)}
}
/* A very large screen that does not scale itself (4K at one-to-one): everything twice the size, so it reads from across the room as a 1080p screen does. */
@media (min-width:3000px){.wall{zoom:2;min-height:0;height:50vh;height:50dvh}}
/*
 * The same, chosen by hand on the device ("Text size"): a tablet at arm's
 * length wants the board as it is; a monitor on the wall, read from across
 * the line, wants it half as large again or twice the size. The board is
 * still exactly the window's height, so it shows fewer tickets, larger.
 * Only the tickets and the tally grow: the strip of buttons stays as it is.
 */
@media (min-width:700px){
.wall.size-15 .lanes,.wall.size-15 .all-day{zoom:1.5}
.wall.size-20 .lanes{zoom:2}
.wall.size-20 .all-day{zoom:1.4}
/* Larger tickets leave no room for two across, nor for a wider first column. */
.wall.size-15 .lanes,.wall.size-20 .lanes{grid-template-columns:repeat(3,minmax(0,1fr))}
.wall.size-15 .lane-new .tickets,.wall.size-20 .lane-new .tickets{display:flex}
.wall.size-15 .lane-new .ticket,.wall.size-20 .lane-new .ticket{border-right:0}
/* The summary line and the foot give their room to the tickets. */
.wall.size-20 .board-foot .hint{display:none}
}
.wall-tools [data-size][aria-pressed=true]{border-color:var(--accent);color:var(--accent)}

/* The screen for guests: whose order is being prepared, whose is ready. Names only, as large as fits. */
.callboard{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,48px);align-items:start}
.status-lane{display:flex;flex-direction:column;gap:clamp(12px,2vw,28px);min-width:0}
.status-lane h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6em;font-size:clamp(26px,3.6vw,56px);padding-bottom:clamp(8px,1vw,16px);border-bottom:2px solid var(--field)}
.status-collect h2{border-bottom-color:var(--up);color:var(--up)}
.status-lane h2 [lang=ja]{font:500 .62em/1.2 var(--body);letter-spacing:.04em}
.status-names{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,4.6em),1fr));gap:.3em .8em;font:500 clamp(30px,5vw,84px)/1.15 var(--body);overflow-wrap:anywhere}
/* A long name is cut at two lines, so it cannot push others off the screen. */
.status-names li{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* The more names, the smaller they are set, so that they all stay on the screen. */
.crowd-1 .status-names{font-size:clamp(26px,3.6vw,60px)}
.crowd-2 .status-names{font-size:clamp(22px,2.7vw,44px)}
.crowd-3 .status-names{font-size:clamp(18px,2vw,32px)}
.status-preparing .status-names{color:var(--soft)}
.status-collect .status-names{color:var(--text)}
/* The list of issues. */
.issue-links{display:inline-flex;flex-wrap:wrap;gap:8px}
.newsletter-lede{margin:0;max-width:44em}
.newsletter-settings{gap:22px;max-width:none}
.newsletter-settings .pair{align-items:start}

/* An issue's form: each story is its own group, the notices a tight list of pairs. */
.newsletter-form textarea{min-height:8em}
.issue-line{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),280px))}
.notice-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}

/* An issue's page. */
.issue-title{font-size:clamp(30px,3.8vw,52px);max-width:22em}
.paper-links{display:flex;flex-wrap:wrap;gap:12px}
.sub-head{margin-top:10px;border-bottom-color:var(--rule-strong)}
.sub-head h3{margin:0;font:400 clamp(18px,1.8vw,22px)/1.1 var(--display-small)}
.issue-facts{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:18px 28px}
.issue-facts div{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--rule-strong);padding-top:12px;min-width:0}
.issue-facts dt{font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.issue-facts dd{margin:0;overflow-wrap:anywhere}
.issue-contents{list-style:none;margin:0;padding:0}
.issue-contents li{display:grid;grid-template-columns:minmax(9em,auto) minmax(0,1fr);gap:4px 20px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule)}
.issue-contents li>:last-child{justify-self:end;text-align:right;color:var(--muted);overflow-wrap:anywhere}
.issue-actions{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start}
.issue-action{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0;max-width:26em}
.btn.remove:hover{border-color:var(--down);color:var(--down)}
/* The form is long: its Save stays in reach at the foot of the window. */
.newsletter-form .form-actions{position:sticky;bottom:0;z-index:2;padding:12px 0;background:var(--bg);border-top:1px solid var(--rule)}
/* On a phone an issue is two lines: its number and headline, then its state and what can be done with it. */
@media (max-width:640px){.rows.issues tr{grid-template-columns:auto minmax(0,1fr);align-items:baseline}.rows.issues td.num{text-align:left;color:var(--muted)}.rows.issues td.num::before{content:'No. '}.rows.issues td.state{grid-column:1}.rows.issues td.acts{grid-column:2;justify-content:flex-end}.issue-links .mini{min-height:44px}}
@media (max-width:640px){.issue-contents li{grid-template-columns:1fr}.issue-contents li>:last-child{justify-self:start;text-align:left}.paper-links .btn{flex:1 1 100%}}