:root{
 --paper:#F4F6FA; --card:#FFFFFF; --sunk:#FAFBFD;
 --ink:#131A2E; --ink2:#59637C; --ink3:#8A93A8;
 --line:#DCE2ED; --line2:#C2CAD9;
 --navy:#16244C; --amber:#FDB913; --amber-ink:#7A5400; --amber-soft:#FEF4DC;
 --good:#17693A; --good-soft:#E7F3EB;
 --bad:#A32318; --bad-soft:#FBECEA;
 --sh:0 1px 2px rgba(19,26,46,.05),0 10px 26px -14px rgba(19,26,46,.22);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --paper:#0C111B; --card:#151C2A; --sunk:#111826;
 --ink:#E9EDF5; --ink2:#9CA6BB; --ink3:#737E95;
 --line:#253044; --line2:#33405C;
 --navy:#DCE5FA; --amber:#FFC63A; --amber-ink:#FFD470; --amber-soft:#2A2314;
 --good:#5FCB8B; --good-soft:#12261A;
 --bad:#FF8E80; --bad-soft:#2A1512;
 --sh:0 1px 2px rgba(0,0,0,.3),0 10px 26px -14px rgba(0,0,0,.65);
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:'Source Sans 3',system-ui,sans-serif;
 font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Montserrat,system-ui,sans-serif;color:var(--navy);margin:0;text-wrap:balance}
.wrap{max-width:1000px;margin:0 auto;padding-inline:18px;padding-block:0 120px}

.top{background:var(--navy);color:#fff;padding-block:22px}
:root:not([data-theme="light"]) .top{background:#0A1020}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .top{background:#0A1020}}
.top .wrap{padding-block:0}
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* The real AERA mark already carries the wordmark, so the page title sits beside it
   behind a rule rather than being spelled out a second time. */
.brand img{height:38px;width:auto;flex:none;display:block}
.brand small{font-size:11.5px;font-weight:600;letter-spacing:.13em;
 text-transform:uppercase;color:#A9B7D8;padding-left:12px;
 border-left:1px solid rgba(169,183,216,.4)}
@media(max-width:430px){.brand img{height:30px}
 .brand small{font-size:10.5px;padding-left:10px;letter-spacing:.1em}}
.top h1{color:#fff;font-size:clamp(23px,4.6vw,32px);font-weight:800;letter-spacing:-.02em;margin-top:16px}
.top p{color:#BCC8E4;margin:7px 0 0;max-width:60ch;font-size:15.5px}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);
 padding:18px;margin-top:16px}
.card>h2{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
 margin-bottom:14px}
.lb{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
 color:var(--ink2);margin-bottom:5px}
input[type=text],input[type=email],input[type=tel],input[type=number],select{
 width:100%;height:40px;padding:0 11px;font:inherit;font-size:15px;color:var(--ink);
 background:var(--card);border:1px solid var(--line2);border-radius:8px;-webkit-appearance:none}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.f3,.f2{grid-template-columns:1fr}}

.btn{font:inherit;font-weight:700;font-size:15px;border-radius:9px;padding:10px 16px;cursor:pointer;
 border:1px solid transparent;background:var(--amber);color:#2A1D00}
.btn:hover{filter:brightness(1.05)}
.btn.o{background:transparent;border-color:var(--line2);color:var(--navy)}
.btn.o:hover{border-color:var(--navy);filter:none}
.btn.s{font-size:13.5px;padding:7px 12px;border-radius:8px}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.btn.wide{width:100%}
.x{font:inherit;font-size:17px;line-height:1;color:var(--ink3);background:transparent;border:0;
 cursor:pointer;padding:6px 8px;border-radius:6px}
.x:hover{color:var(--bad);background:var(--bad-soft)}

.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.seg button{font:inherit;font-size:14px;font-weight:700;padding:8px 16px;border:0;cursor:pointer;
 background:transparent;color:var(--ink2)}
.seg button.on{background:var(--navy);color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg button.on{color:#0C111B}}

.tabs{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.tab{font:inherit;font-size:14px;font-weight:700;padding:8px 14px;border-radius:9px;cursor:pointer;
 border:1px solid var(--line2);background:var(--card);color:var(--ink2);white-space:nowrap}
.tab.on{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tab.on{color:#0C111B}}
.tab small{display:block;font-size:10.5px;font-weight:600;opacity:.75;letter-spacing:.04em}
.daytab{display:inline-flex;align-items:stretch;border:1px solid var(--line2);border-radius:9px;
 overflow:hidden;background:var(--card)}
.daytab>button:first-child{font:inherit;font-size:14px;font-weight:700;padding:8px 12px;border:0;
 cursor:pointer;background:transparent;color:var(--ink2);white-space:nowrap;text-align:left}
.daytab>button:first-child small{display:block;font-size:10.5px;font-weight:600;opacity:.75;
 letter-spacing:.04em}
.daytab .dx{font:inherit;font-size:15px;line-height:1;border:0;border-left:1px solid var(--line);
 background:transparent;color:var(--ink3);cursor:pointer;padding:0 9px}
.daytab .dx:hover{background:var(--bad-soft);color:var(--bad)}
.daytab.on{background:var(--navy);border-color:var(--navy)}
.daytab.on>button:first-child{color:#fff}
.daytab.on .dx{color:#B9C6E6;border-left-color:rgba(255,255,255,.25)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .daytab.on>button:first-child{color:#0C111B}
 :root:not([data-theme="light"]) .daytab.on .dx{color:#0C111B}}

.meal{border:1px solid var(--line);border-radius:10px;background:var(--sunk);margin-bottom:12px;
 overflow:hidden}
.meal>.mh{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--card);
 border-bottom:1px solid var(--line)}
.meal>.mh input{height:34px;font-weight:700;border-color:transparent;background:transparent;
 max-width:230px;padding-left:6px}
.msel{height:34px;max-width:210px;font:inherit;font-size:15px;font-weight:700;color:var(--ink);
 background:transparent;border:1px solid transparent;border-radius:8px;padding:0 28px 0 6px;
 cursor:pointer;-webkit-appearance:none;appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
  linear-gradient(135deg,currentColor 50%,transparent 50%);
 background-position:calc(100% - 14px) 15px,calc(100% - 9px) 15px;
 background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.msel:hover{border-color:var(--line2);background-color:var(--card)}
.meal>.mh input:hover{border-color:var(--line2);background:var(--card)}
.meal>.mh .mac{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
 color:var(--ink2);font-variant-numeric:tabular-nums;text-align:right}
.rows{display:grid}
/* A coach picking twenty dishes recognises the food long before they finish reading its
   name, so the photo earns the space it takes. */
.thumb{width:54px;height:54px;border-radius:8px;background:var(--line) center/cover no-repeat;flex:none}
.thumb.none{display:grid;place-items:center;font-size:19px;color:var(--ink3);background:var(--sunk);
 border:1px dashed var(--line2)}
.row{display:grid;grid-template-columns:22px 54px 1fr 104px 92px 34px;gap:10px;align-items:center;
 padding:9px 12px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .nm{min-width:0;font-size:14.5px;font-weight:600;line-height:1.25}
.row .nm small{display:block;font-weight:400;font-size:11.5px;color:var(--ink2);margin-top:2px;
 font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.row .nm em{font-style:normal;color:var(--amber-ink);background:var(--amber-soft);border-radius:4px;
 padding:1px 6px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
 margin-left:6px;white-space:nowrap}
/* The number on its own never said whether it was the cooked weight or the raw one.
   It says so now, under every box, and it changes with the switch. */
.wcell{min-width:0}
.wcell small{display:block;text-align:right;font-size:10.5px;font-weight:700;
 letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin-top:2px}
.row input[type=number]{height:36px;text-align:right;font-weight:700;
 font-variant-numeric:tabular-nums}
.row .pr{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:600;
 font-variant-numeric:tabular-nums}
.row .pr small{display:block;font-size:10.5px;font-weight:500;color:var(--ink3)}
@media (max-width:620px){
 .row{grid-template-columns:22px 44px 1fr 34px;grid-template-areas:"g t n x" "g t w x" "g t p x";
  row-gap:4px;align-items:start}
 .row .thumb{width:44px;height:44px;grid-area:t}
 .row .nm{grid-area:n}.row .wcell{grid-area:w;max-width:104px}
 .row .pr{grid-area:p;text-align:left}.row .x{grid-area:x}
}
/* Packaging is a real charge, so it is shown as one rather than folded into a total. */
.mfoot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;padding:9px 12px;
 border-top:1px dashed var(--line2);background:var(--card);
 font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink2);
 font-variant-numeric:tabular-nums}
.mfoot .pk{color:var(--amber-ink)}
.mfoot b{margin-left:auto;font-size:13.5px;color:var(--ink)}
@media (max-width:620px){.mfoot b{margin-left:0;width:100%}}
/* Press and hold the grip to move an item. Pointer events rather than HTML5 drag, because
   HTML5 drag does nothing at all on a phone and a coach is often standing on a gym floor. */
.grip{display:grid;align-content:center;gap:3px;width:22px;padding:6px 4px;border:0;
 background:transparent;cursor:grab;touch-action:none}
.grip span{display:block;height:2px;border-radius:2px;background:var(--line2)}
.grip:hover span{background:var(--ink3)}
.row.dragging{opacity:.4}
.row.over{box-shadow:inset 0 2px 0 var(--amber)}
@media (max-width:620px){.grip{grid-area:g}}
.addrow{display:flex;gap:8px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--line)}
.empty{padding:14px 12px;color:var(--ink3);font-size:14.5px}

.dtot{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 4px}
.tile{background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.tile .l{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.tile .v{font-family:Montserrat,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em;
 margin-top:2px;font-variant-numeric:tabular-nums}
@media (max-width:620px){.dtot{grid-template-columns:1fr 1fr}}

/* search popover */
.scrim{position:fixed;inset:0;background:rgba(10,16,32,.55);display:none;z-index:40;
 align-items:flex-start;justify-content:center;padding:24px 16px}
.scrim.open{display:flex}
.pop{background:var(--card);border-radius:12px;width:100%;max-width:560px;max-height:82vh;
 display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px -12px rgba(0,0,0,.5)}
.pop header{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;
 align-items:center}
.pop header h3{font-size:16px;font-weight:700;flex:1}
.pop .sb{padding:12px 16px;border-bottom:1px solid var(--line)}
.pop .hint{font-size:12.5px;color:var(--ink3);margin:7px 0 0}
.res{overflow-y:auto;padding:6px}
.res button{display:grid;grid-template-columns:52px 1fr;gap:11px;align-items:center;width:100%;
 text-align:left;font:inherit;background:transparent;border:0;border-radius:9px;padding:8px 10px;
 cursor:pointer;color:var(--ink)}
.res button:hover,.res button:focus-visible{background:var(--sunk)}
.res b{display:block;font-size:14.5px;font-weight:600}
.res small{display:block;font-size:11.5px;color:var(--ink2);font-family:'IBM Plex Mono',monospace;
 font-variant-numeric:tabular-nums;margin-top:1px}
.res .none{padding:14px 12px;color:var(--ink3);font-size:14.5px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.chip{font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;cursor:pointer;
 border:1px solid var(--line2);background:transparent;color:var(--ink2)}
.chip:hover{border-color:var(--navy);color:var(--navy)}
.own{border-top:1px solid var(--line);padding:12px 16px;background:var(--sunk)}
.pop.ownonly .sb,.pop.ownonly .res{display:none}
.pop.ownonly .own{border-top:0;background:var(--card)}

/* finish bar */
.finish{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line2);
 padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));margin-top:22px;z-index:20}
.finish .wrap{padding-block:0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.finish .sum{font-size:13.5px;color:var(--ink2);margin-right:auto;
 font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}

.note{border-left:3px solid var(--amber);background:var(--amber-soft);padding:11px 14px;
 border-radius:0 6px 6px 0;font-size:14.5px;margin-top:12px}
.note.bad{border-color:var(--bad);background:var(--bad-soft)}
.note.ok{border-color:var(--good);background:var(--good-soft)}
pre.sheet{margin:0;padding:14px;background:var(--sunk);border:1px solid var(--line);border-radius:9px;
 overflow-x:auto;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.65;
 font-variant-numeric:tabular-nums;max-height:46vh}
.foot{margin-top:30px;font-size:13.5px;color:var(--ink3)}
.foot a{color:var(--ink2)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}