:root{--paper:#f8f9fa;--tray:#ddd;--card:#fff;--card-hover:#f0f0f0;--well:#e9ecef;--ink:#1a1a1a;--muted:#555;--line:#eee;--edge:#ccc;--accent:#1a1a1a;--mark:#555;--add:#1a1a1a;--add-ink:#fff;--add-hover:#333;--danger:#b02a2a;--danger-ink:#fff;--danger-hover:#8f2020;--scrim:#1a1a1a59;--in:#59a14f;--out:#e15759;--hue-0:#4e79a7;--hue-1:#f28e2b;--hue-2:#e15759;--hue-3:#76b7b2;--hue-4:#59a14f;--hue-5:#edc948;--hue-6:#b07aa1;--hue-7:#ff9da7;--hue-8:#9c755f;--hue-9:#bab0ac;--tint:16%;--tint-strong:28%;--mono:ui-monospace,"SF Mono",Menlo,monospace;--space-xs:6px;--space-sm:8px;--space-md:10px;--space-lg:14px;--space-xl:20px;--space-2xl:24px;--radius-inner:4px;--radius-control:4px;--radius-panel:4px;--control:32px;--touch:32px;--panel:320px;--buncss-light:initial;--buncss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#111213;--tray:#454651;--card:#1a1b1e;--card-hover:#232327;--well:#23262b;--ink:#e5e5e5;--muted:#a8a8a8;--line:#2e2e33;--edge:#60616b;--accent:#e5e5e5;--mark:#a8a8a8;--add:#e5e5e5;--add-ink:#111213;--add-hover:#fff;--danger:#ef4444;--danger-ink:#111213;--danger-hover:#ef4444;--scrim:#0000008c;--in:#8cd17d;--out:#ff9d9a;--tint:28%;--tint-strong:40%;--buncss-light: ;--buncss-dark:initial;color-scheme:dark}}@media (pointer:coarse){:root{--control:44px;--touch:44px}}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--paper);color:var(--ink);margin:0;padding:24px 16px 48px;font:15px/1.45 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}body>header{max-width:1100px;margin:0 auto 20px}h1{letter-spacing:-.01em;margin:0;font-size:22px}body>header p{color:var(--muted);margin:4px 0 0}.layout{display:grid;grid-template-columns:minmax(0,1fr)minmax(0,420px);align-items: start;gap:20px;max-width:1100px;margin:0 auto}.people{background:var(--card);border:1px solid var(--edge);border-radius:var(--radius-control);margin-bottom:12px;padding:10px 12px}.people:not(:has(member-row)){display:none}.people h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 6px;font-size:13px}member-row{display:block}member-row .who{display:flex;align-items: center;gap:4px;min-height:28px}member-row [data-col=name]{border-radius:var(--radius-control);padding:1px 4px}member-row[me]>.who [data-col=name]{font-weight:600}member-row[me]>.who [data-col=name]:after{content:" · you";color:var(--muted);font-weight:400}member-row .invited{border-left:1px solid var(--line);margin-left:10px;padding-left:12px}member-row:not([link])>.who>.copy,member-row:not([me])>.who>.out,member-row:not([mine])>.who>[data-delete],member-row:not([me])>.invite{display:none}member-row>.invite{max-width:260px;margin:4px 0 4px 22px}member-row .roles{color:var(--muted);font-size:12px}member-row .give{display:flex;color:var(--muted);gap:10px;margin-top:4px;font-size:13px}member-row .give:empty{display:none}.out{margin:0}.copy .icon-check,.copy[copied] .icon-copy{display:none}.copy[copied] .icon-check{display:block;color:var(--in)}.nobody{text-align:center;max-width:420px;margin:15vh auto 0}.nobody h2{margin:0 0 6px;font-size:18px}.nobody p{color:var(--muted);margin:0}body[data-away]:after{content:"Reconnecting…";position:fixed;border-radius:var(--radius-control);background:var(--card);border:1px solid var(--edge);color:var(--muted);padding:6px 14px;font-size:13px;bottom:16px;left:50%;transform:translate(-50%)}[contenteditable]:focus{outline:2px solid var(--accent);outline-offset:1px}.icon{display:block;width:16px;height:16px}.copy,.out button,button[data-delete]{display:inline-grid;color:var(--muted);border-radius:var(--radius-control);cursor:pointer;background:0 0;border:0;place-items: center;width:24px;height:24px;padding:0}.copy:hover,.out button:hover,button[data-delete]:hover{background:var(--card-hover);color:var(--ink)}button[data-delete]{opacity:0}member-row .who:hover button{opacity:1}button[data-delete]:focus-visible{opacity:1}[data-refused]{outline:2px solid var(--out);outline-offset:2px;border-radius:var(--radius-control)}form[data-refused]:after{content:attr(data-refused);display:block;color:var(--out);margin-top:4px;font-size:13px}input[name]:where(:not([type]),[type=text],[type=search],[type=number]){font:inherit;color:inherit;border:1px solid var(--edge);border-radius:var(--radius-control);background:0 0;width:100%;padding:5px 8px}input[name]:where(:not([type]),[type=text],[type=search],[type=number]):focus{outline:none;border-style:solid;border-color:var(--accent)}.wire{background:var(--card);border:1px solid var(--edge);border-radius:var(--radius-control);position:sticky;overflow:auto;max-height:calc(100vh - 32px);padding:10px 12px;top:16px}.wire h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px;font-size:13px}.wire ol{list-style:none;font:12px/1.45 var(--mono);margin:0;padding:0}.wire li{border-top:1px solid var(--line);word-break:break-all;border-left:3px solid;padding:6px 0 6px 10px}.wire li.in{border-left-color:var(--in)}.wire li.out{border-left-color:var(--out)}.wire .meta{display:block;color:var(--muted)}@media (max-width:760px){.layout{grid-template-columns:minmax(0,1fr)}.wire{position:static;max-height:50vh}}.tool{display:inline-flex;justify-content:center;align-items: center;gap:var(--space-xs);height:var(--touch);padding:0 var(--space-lg);border:1px solid var(--edge);border-radius:var(--radius-control);background:var(--card);color:var(--ink);font:inherit;white-space:nowrap;cursor:pointer;font-size:13px}.tool:hover{background:var(--card-hover)}.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tool.quiet{font-weight:500}.tool.add{border-color:var(--add);background:var(--add);color:var(--add-ink)}.tool.add:hover{background:var(--add-hover)}.tool.danger{border-color:var(--danger);background:var(--danger);color:var(--danger-ink)}.tool.danger:hover{background:var(--danger-hover)}.tool:disabled{opacity:.45;cursor:default}.tool[data-delete]{opacity:1;height:var(--touch);padding:0 var(--space-lg);width:auto}dialog.drawer{position:fixed;z-index:60;overflow:hidden;border:1px solid var(--edge);border-radius:var(--radius-panel)var(--radius-panel)0 0;background:var(--card);color:var(--ink);flex-direction:column;width:100%;max-width:560px;max-height:88dvh;margin:0 auto;padding:0;inset:auto 0 0}dialog.drawer[open]{display:flex;animation:.2s ease-out rise}@media (min-width:820px){dialog.drawer{inset:var(--space-2xl)var(--space-2xl)var(--space-2xl)auto;width:var(--panel);border-radius:var(--radius-panel);max-width:none;height:auto;max-height:none}}dialog.drawer::backdrop{background:var(--scrim)}dialog.modal::backdrop{background:var(--scrim)}.drawer-head{display:flex;justify-content:space-between;align-items: center;gap:var(--space-md);padding:var(--space-lg)var(--space-lg)var(--space-sm);flex:none}.drawer-head h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;font-size:17px;font-weight:600}.drawer-close{width:var(--control);height:var(--control);border:0;padding:0}.drawer-body{overflow:auto;overscroll-behavior:contain;padding:0 var(--space-lg)calc(var(--space-2xl) + env(safe-area-inset-bottom,0px));flex:auto}.drawer-foot{display:flex;gap:var(--space-sm);padding:var(--space-lg)0 0}[data-chosen]{background:color-mix(in srgb,var(--ink)8%,transparent);box-shadow:inset 3px 0 0 var(--accent)}.props{display:flex;flex-direction:column}.prop{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xs);padding:var(--space-sm)0;border-bottom:1px solid var(--line)}.prop:last-child{border-bottom:0}.prop-name{color:var(--muted);font-size:13px;font-weight:600}dialog.modal{width:min(420px,calc(100vw - 2*var(--space-2xl)));padding:var(--space-xl)var(--space-xl)var(--space-2xl);border:1px solid var(--edge);border-radius:var(--radius-panel);background:var(--card);color:var(--ink)}dialog.modal[open]{animation:.16s ease-out rise}dialog.modal h3{margin:0 0 var(--space-lg);font-size:17px}dialog.modal .note{color:var(--muted);margin:0;font-size:13px}.modal-field{display:flex;gap:var(--space-xs);margin-bottom:var(--space-md);color:var(--muted);flex-direction:column;font-size:13px}.modal-foot{display:flex;justify-content:flex-end;gap:var(--space-sm);margin-top:var(--space-lg)}:-webkit-any(.prop,.modal-field) :-webkit-any(input:not([type=checkbox]),select,textarea){height:var(--touch);padding:0 var(--space-md);font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--edge);border-radius:var(--radius-control);border-style:solid;width:100%;font-size:16px}:-moz-any(.prop,.modal-field) :-moz-any(input:not([type=checkbox]),select,textarea){height:var(--touch);padding:0 var(--space-md);font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--edge);border-radius:var(--radius-control);border-style:solid;width:100%;font-size:16px}:is(.prop,.modal-field) :is(input:not([type=checkbox]),select,textarea){height:var(--touch);padding:0 var(--space-md);font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--edge);border-radius:var(--radius-control);border-style:solid;width:100%;font-size:16px}:-webkit-any(.prop,.modal-field) textarea{min-height:calc(3*var(--touch));padding:var(--space-sm)var(--space-md);resize:vertical;height:auto}:-moz-any(.prop,.modal-field) textarea{min-height:calc(3*var(--touch));padding:var(--space-sm)var(--space-md);resize:vertical;height:auto}:is(.prop,.modal-field) textarea{min-height:calc(3*var(--touch));padding:var(--space-sm)var(--space-md);resize:vertical;height:auto}:-webkit-any(.prop,.modal-field) :-webkit-any(input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--edge)}:-moz-any(.prop,.modal-field) :-moz-any(input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--edge)}:is(.prop,.modal-field) :is(input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--edge)}.prop input[type=checkbox]{accent-color:var(--accent);justify-self:start;width:20px;height:20px;margin:0}.refused{margin:var(--space-xs)0 0;color:var(--danger);font-size:13px}.toast{position:fixed;z-index:90;padding:var(--space-sm)var(--space-lg);background:var(--ink);color:var(--card);border-radius:var(--radius-control);opacity:0;pointer-events:none;transition:opacity .2s;font-size:13px;bottom:24px;left:50%;translate:-50%}.toast.show{opacity:1}@keyframes rise{0%{transform:translateY(24px);opacity:.5}to{transform:none;opacity:1}}@media (prefers-reduced-motion:reduce){dialog.drawer[open],dialog.modal[open]{animation:none}.toast{transition:none}}header.cafe{display:flex;align-items:baseline;gap:20px;max-width:1100px;margin:0 auto 16px}header.cafe nav{display:flex;gap:4px}header.cafe nav a{color:var(--muted);text-decoration:none;border-radius:var(--radius-control);padding:4px 10px}header.cafe nav a:hover{background:var(--card-hover);color:var(--ink)}body[data-screen=till] nav [data-for=till],body[data-screen=kitchen] nav [data-for=kitchen]{color:var(--ink);background:var(--card);box-shadow:0 0 0 1px var(--edge)}body:has(member-row[me]):not(:has(member-row[me][roles~=till])) nav [data-for=till]{display:none}body:has(member-row[me]):not(:has(member-row[me][roles~=kitchen])) nav [data-for=kitchen]{display:none}.no-access{display:none;color:var(--muted);padding:24px 0}body[data-screen=till]:has(member-row[me]):not(:has(member-row[me][roles~=till])) .no-access{display:block}body[data-screen=till]:has(member-row[me]):not(:has(member-row[me][roles~=till])) .new-order{display:none}body[data-screen=till]:has(member-row[me]):not(:has(member-row[me][roles~=till])) .statuses{display:none}body[data-screen=kitchen]:has(member-row[me]):not(:has(member-row[me][roles~=kitchen])) .no-access{display:block}body[data-screen=kitchen]:has(member-row[me]):not(:has(member-row[me][roles~=kitchen])) .new-order{display:none}body[data-screen=kitchen]:has(member-row[me]):not(:has(member-row[me][roles~=kitchen])) .statuses{display:none}main.cafe{display:grid;align-content: start;gap:18px}main.cafe .people{margin:0}form.new-order{background:var(--card);border:1px solid var(--edge);border-radius:var(--radius-control);display:grid;gap:8px;padding:12px}form.new-order h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0;font-size:13px}form.new-order input[name=customer]{max-width:260px}form.new-order .menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}menu_item-row{display:block;min-width:0}menu_item-row label{display:grid;grid-template-columns:minmax(0,1fr)auto 3.5em;border:1px solid var(--edge);border-radius:var(--radius-control);align-items: center;gap:8px;height:100%;padding:6px 8px}menu_item-row .price{color:var(--muted);font-size:12px}menu_item-row input{font:inherit;border:1px solid var(--edge);border-radius:var(--radius-control);color:inherit;text-align:right;background:0 0;width:100%;padding:3px 6px}form.new-order>button,button.move{font:inherit;border-radius:var(--radius-control);background:var(--accent);color:var(--card);cursor:pointer;border:0;justify-self:start;padding:6px 14px}body:not([data-screen=till]) form.new-order{display:none}order-row{display:grid;background:var(--card);border:1px solid var(--edge);border-radius:var(--radius-control);gap:4px;padding:8px 10px}order-row header{display:flex;align-items:baseline;gap:8px}order-row .number{font-weight:700}order-row .customer{flex:1}cafe-age{color:var(--muted);font-size:12px}cafe-age[late]{color:var(--out);font-weight:600}cafe-age[late]:after{content:" · late"}order-row .lines{display:grid;font-size:14px}line-row .qty{color:var(--muted)}order-row .total{margin:0;font-weight:600}order-row .says{display:none;margin:0}order-row .link{color:var(--accent);font-size:12px}order-row .moves{display:flex;flex-wrap:wrap;gap:6px}order-row button.move{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:0 0}order-row button.move:hover{background:color-mix(in srgb,var(--accent)12%,transparent)}order-row .moves:empty{display:none}cafe-slide{--slide:0px;position:relative;display:block;border-radius:var(--radius-control);background:color-mix(in srgb,var(--accent)16%,var(--card));user-select:none;touch-action:none;min-width:180px;height:36px}cafe-slide .label{position:absolute;display:grid;color:var(--accent);place-items: center;font-weight:600;inset:0}cafe-slide .knob{position:absolute;top:3px;left:calc(3px + var(--slide));background:var(--accent);color:var(--card);cursor:grab;border:0;border-radius:50%;width:30px;height:30px;font-size:18px}.statuses{display:grid;align-items: start;gap:12px}status-row{display:grid;align-content: start;gap:6px}status-row .called{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:6px 0 0;font-size:13px}status-row .name{color:var(--muted);margin:0;font-size:12px;font-weight:500}status-row .orders{display:grid;gap:8px}status-row:not(:has(order-row)) .orders:after{content:"None";color:var(--muted);font-size:12px}body[data-screen=till] .statuses{grid-template-columns:repeat(3,minmax(0,1fr))}body[data-screen=till] status-row[position="1"]{grid-area:1/1}body[data-screen=till] status-row[position="2"]{grid-area:2/1}body[data-screen=till] status-row[position="3"]{grid-area:1/2/3}body[data-screen=till] status-row[position="4"]{grid-area:1/3}body[data-screen=till] status-row[position="5"]{grid-area:2/3}body[data-screen=till] status-row:-webkit-any([position="2"],[position="5"]) .called{display:none}body[data-screen=till] status-row:-moz-any([position="2"],[position="5"]) .called{display:none}body[data-screen=till] status-row:is([position="2"],[position="5"]) .called{display:none}body[data-screen=till] status-row[finished] order-row{opacity:.75}body[data-screen=kitchen] .statuses{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-screen=kitchen] status-row:not([open]),body[data-screen=kitchen] status-row .called,body[data-screen=kitchen] order-row .link,body[data-screen=kitchen] order-row .total{display:none}body[data-screen=kitchen] status-row .name{text-transform:uppercase;letter-spacing:.06em;font-size:13px}body[data-screen=order] order-row:not([yours]),body[data-screen=order] header.cafe nav,body[data-screen=order] .people,body[data-screen=order] .wire,body[data-screen=order] order-row .link,body[data-screen=order] order-row .age,body[data-screen=order] status-row .called{display:none}body[data-screen=order] .layout{grid-template-columns:minmax(0,560px);justify-content:center}body[data-screen=order] .statuses{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}body[data-screen=order] status-row{display:contents}body[data-screen=order] status-row .name{grid-row:1;text-align:center;border-radius:var(--radius-control);background:var(--card);border:1px solid var(--edge);color:var(--muted);padding:6px 4px}body[data-screen=order] status-row:has(~status-row order-row[yours]) .name{color:var(--ink)}body[data-screen=order] status-row:has(order-row[yours]) .name{background:var(--accent);border-color:var(--accent);color:var(--card);font-weight:600}body[data-screen=order] status-row[position="5"]:not(:has(order-row[yours])) .name{display:none}body[data-screen=order] .statuses:has(status-row[position="5"] order-row[yours]) status-row:-webkit-any([position="2"],[position="3"],[position="4"]) .name{display:none}body[data-screen=order] .statuses:has(status-row[position="5"] order-row[yours]) status-row:-moz-any([position="2"],[position="3"],[position="4"]) .name{display:none}body[data-screen=order] .statuses:has(status-row[position="5"] order-row[yours]) status-row:is([position="2"],[position="3"],[position="4"]) .name{display:none}body[data-screen=order] status-row .orders{grid-row:2;grid-column:1/-1}body[data-screen=order] status-row .orders:after{content:none}body[data-screen=order] order-row .says{display:block;font-size:18px;font-weight:600}@media (max-width:760px){body:-webkit-any([data-screen=till],[data-screen=kitchen]) .statuses{grid-template-columns:minmax(0,1fr)}body:-moz-any([data-screen=till],[data-screen=kitchen]) .statuses{grid-template-columns:minmax(0,1fr)}body:is([data-screen=till],[data-screen=kitchen]) .statuses{grid-template-columns:minmax(0,1fr)}body[data-screen=till] status-row{grid-area:auto!important}}
