:root{
  --bg:#F5F0E8; --card:#FFFFFF; --side:#FFFBEB; --row-alt:#FDFAF5; --row-hover:#FEF9EC;
  --line:#E8D5B0; --line-soft:#F0E4C8; --ink:#1A0A00; --ink-2:#44260A; --muted:#8C6A3A;
  --label:#A07840; --accent:#D97706; --accent-deep:#B45309; --accent-pale:#FFFBEB;
  --ok:#15803D; --ok-bg:#ECFDF3; --warn:#92400E; --warn-bg:#FEF6E7; --bad:#B91C1C; --bad-bg:#FEF2F2;
  --info:#1D4ED8; --info-bg:#EFF4FF;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.5 "Segoe UI",Inter,system-ui,sans-serif;
  font-variant-numeric:tabular-nums}
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:19px;margin:0}
h2{font-size:14px;margin:0 0 10px;letter-spacing:.2px}
h3{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--label);margin:0 0 8px}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.side{width:212px;flex:0 0 212px;background:var(--side);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
/* One gutter down the whole sidebar.
   The logo, the group headings, every menu item and the footer all start at the same x — it was
   14px, 16px and 17px before, which is close enough to look like a mistake rather than a choice.
   The 6px on .nav is the inset the hover and active backgrounds sit in; 6 + 6 lands the text on
   the same 12px as the logo and the footer. */
/* The brand block and the top bar are the same height, so their bottom borders form one
   unbroken line across the seam between sidebar and content. They were 53px and 52px — one pixel
   out, which is exactly enough to look like a mistake. */
.side{--side-gutter:12px;--side-inset:6px;--bar-height:56px}
.brand{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);
  height:var(--bar-height);padding:0 var(--side-gutter);box-sizing:border-box}
.brand{text-decoration:none;gap:8px}
/* Height drives both marks and the width follows, because they are not square: the leaf is
   609x832 (taller than wide) and the wordmark 1180x154 (seven times wider than tall). Forcing
   either into a box squashes the artwork — the first attempt made the leaf a 28px square and
   flattened it. */
.brand .lg{height:34px;width:auto;flex:0 0 auto;display:block}
.brand .wordmark{height:19px;width:auto;min-width:0;display:block}
.nav{padding:10px var(--side-inset);flex:1;overflow-y:auto}
/* The group headings carry the shape of the menu, so they are allowed to be seen: a size up, a
   darker ink than the items beneath them, and a hairline above each one so the four sections read
   as four sections rather than one long list with occasional small words in it. */
.nav .grp{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--accent-deep);
  font-weight:800;padding:14px calc(var(--side-gutter) - var(--side-inset)) 6px;
  margin-top:8px;border-top:1px solid var(--line-soft)}
.nav .grp:first-of-type{margin-top:4px;border-top:0}
/* the icon keeps its own column so the labels line up whatever shape the glyph is, and it never
   squashes when a name is long enough to wrap */
.nav .nav-ico{flex:0 0 15px;opacity:.72}
.nav a:hover .nav-ico,.nav a.on .nav-ico{opacity:1}
.nav a{display:flex;align-items:center;gap:8px;border-radius:6px;color:var(--ink-2);font-size:12.5px;
  padding:7px calc(var(--side-gutter) - var(--side-inset))}
.nav a:hover{background:var(--row-hover);text-decoration:none}
.nav a.on{background:var(--accent);color:#fff;font-weight:600}
.nav .n{margin-left:auto;background:rgba(0,0,0,.12);border-radius:9px;padding:0 6px;font-size:10.5px}
.side .foot{border-top:1px solid var(--line);padding:10px var(--side-gutter);font-size:11px;color:var(--muted)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:var(--bar-height, 56px);background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:12px;padding:0 18px;position:sticky;top:0;z-index:5}
.top .who{margin-left:auto;text-align:right;font-size:11.5px;color:var(--muted);line-height:1.3}
.top .who b{display:block;color:var(--ink);font-size:12.5px}
.content{padding:18px;flex:1}
.crumb{display:flex;align-items:baseline;gap:0;min-width:0;overflow:hidden}
.crumb .up{color:var(--muted);font-size:12px;white-space:nowrap}
.crumb .sep{color:var(--muted);font-size:12px;margin:0 7px}
.crumb .title{color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* one line under the top bar: what this screen is, and what you can do on it */
.pagebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;min-height:30px}
.pagebar .lead{margin:0;color:var(--muted);font-size:12.5px;min-width:0}
.pagebar .lead b{color:var(--ink-2);font-weight:600}

/* ---------- bits ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);
  color:var(--ink-2);border-radius:7px;padding:6px 11px;font-size:12.5px;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--row-hover);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--accent-deep)}
.btn.danger{color:var(--bad);border-color:#F3C6C6}
.btn.sm{padding:3px 8px;font-size:11.5px;border-radius:6px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.card + .card{margin-top:14px}
.row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.split{display:flex;gap:14px;align-items:flex-start}
.split .col-main{flex:1;min-width:0}
.split .col-side{width:320px;flex:0 0 320px}
.muted{color:var(--muted)}

/* ---------- top strip: the yield check as one line, not a side panel ---------- */
.strip{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;background:var(--card);
  border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}
.strip .s{display:flex;flex-direction:column;gap:2px;padding:9px 16px;min-width:118px;
  border-right:1px solid var(--line-soft)}
.strip .s:last-child{border-right:0}
.strip .s.bar-cell{flex:1;min-width:150px;justify-content:center}
.strip .l{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--label);font-weight:700}
.strip .v{font-size:14px;font-weight:700}
.strip .v.good{color:var(--ok)}
.strip .v.warn{color:var(--warn)}
.strip .bar{margin:5px 0 0}

/* ---------- multi-select dropdown ---------- */
.multi{position:relative;min-width:190px}
.multi summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:6px;
  padding:5px 9px;background:#fff;display:flex;flex-direction:column;gap:1px;min-height:34px;
  justify-content:center}
.multi summary::-webkit-details-marker{display:none}
.multi summary::after{content:"▾";position:absolute;right:9px;top:9px;color:var(--muted);font-size:11px}
.multi summary:hover{border-color:var(--accent)}
.multi .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--label);font-weight:700}
.multi .val{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-right:14px}
.multi[open] summary{border-color:var(--accent)}
.multi .panel{position:absolute;z-index:200;top:calc(100% + 3px);left:0;min-width:250px;max-width:340px;
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px;
  box-shadow:0 8px 22px rgba(var(--shadow-rgb),.13)}
.multi .filter{margin-bottom:6px}
.multi .opts{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.multi .opts label{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:5px;
  font-size:12.5px;cursor:pointer;white-space:nowrap}
.multi .opts label:hover{background:var(--row-hover)}
.multi .opts input{width:auto;margin:0}

/* ---------- inline add rows ---------- */
.addbar{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.addline{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.addline .field{flex:1;min-width:120px}
.addline .field:first-child{flex:2.2}
.addline.prep{border-top:1px dashed var(--line);padding-top:12px}
.inline-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}

/* ---------- reach into the company master ---------- */
.reach{border-top:1px dashed var(--line);padding-top:10px}
.reach summary{cursor:pointer;font-size:12px;color:var(--accent-deep);font-weight:600;
  list-style:none;padding:2px 0}
.reach summary::-webkit-details-marker{display:none}
.reach summary::before{content:"+ ";font-weight:700}
.reach[open] summary::before{content:"− "}
.reach[open] summary{margin-bottom:10px}

/* ---------- preparation header row ---------- */
tbody tr.secrow td{background:var(--accent-pale);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);font-size:12px;padding:6px 10px}
tbody tr.secrow:hover td{background:var(--accent-pale)}
tbody tr.secrow b{font-size:12.5px}
tbody tr.secrow .chip{margin:0 0 0 6px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.tabs a{display:flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid transparent;
  border-bottom:0;border-radius:8px 8px 0 0;color:var(--ink-2);font-size:12.5px;margin-bottom:-1px}
.tabs a:hover{background:var(--row-hover);text-decoration:none}
.tabs a.on{background:var(--card);border-color:var(--line);color:var(--ink);font-weight:600}
.tabs .n{background:var(--accent-pale);border:1px solid var(--line);border-radius:9px;padding:0 6px;
  font-size:10.5px;color:var(--muted)}
.tabs a.on .n{background:var(--accent);border-color:var(--accent);color:#fff}
.tabs .n.warn{background:var(--warn-bg);border-color:#EBD6A8;color:var(--warn)}

/* ---------- card action bar ---------- */
.cardbar{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cardbar.bottom{border-bottom:0;border-top:1px solid var(--line)}

/* ---------- icon-only row action ---------- */
.iconbtn{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);
  background:var(--card);color:var(--muted);border-radius:6px;cursor:pointer;padding:0}
.iconbtn:hover{color:var(--bad);border-color:#F3C6C6;background:var(--bad-bg)}
.iconbtn[disabled]{opacity:.35;cursor:not-allowed}
.iconbtn[disabled]:hover{color:var(--muted);border-color:var(--line);background:var(--card)}
.iconbtn svg{display:block}
.mono{font-family:"Cascadia Mono",Consolas,monospace;font-size:11.5px}
.right{text-align:right}
.center{text-align:center}
/* ---------- toasts: float, never take part in the layout ---------- */
.toasts{position:fixed;top:64px;right:18px;z-index:60;display:flex;flex-direction:column;gap:8px;
  max-width:440px;pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:9px;
  font-size:12.5px;line-height:1.45;box-shadow:0 10px 26px rgba(var(--shadow-rgb),.18);
  pointer-events:auto;animation:toast-in .16s ease-out}
.toast.ok{background:var(--ok-bg);border:1px solid #BBE5C6;color:var(--ok)}
.toast.bad{background:var(--bad-bg);border:1px solid #F3C6C6;color:var(--bad)}
.toast .x{border:0;background:transparent;color:inherit;opacity:.5;cursor:pointer;font-size:15px;
  line-height:1;padding:0 2px}
.toast .x:hover{opacity:1}
.toast.leaving{opacity:0;transform:translateX(8px);transition:opacity .2s,transform .2s}
@keyframes toast-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}.toast.leaving{transition:none}}

.flash{background:var(--ok-bg);border:1px solid #BBE5C6;color:var(--ok);padding:9px 12px;
  border-radius:8px;margin-bottom:14px;font-size:12.5px}
.errors{background:var(--bad-bg);border:1px solid #F3C6C6;color:var(--bad);padding:9px 12px;
  border-radius:8px;margin-bottom:14px;font-size:12.5px}
.errors ul{margin:4px 0 0 16px;padding:0}

/* ---------- form ---------- */
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--label);font-weight:700}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  border:1px solid var(--line);border-radius:6px;padding:6px 9px;font:inherit;font-size:12.5px;
  background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(217,119,6,.25);border-color:var(--accent)}
.readonly{border:1px dashed var(--line);border-radius:6px;padding:6px 9px;font-size:12.5px;
  background:var(--accent-pale);color:var(--ink-2)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.checks{display:flex;flex-wrap:wrap;gap:8px 16px}
.checks label{display:flex;align-items:center;gap:6px;font-size:12.5px;text-transform:none;
  letter-spacing:0;color:var(--ink-2);font-weight:400}
.inline{display:inline}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--label);text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card)}
td{padding:7px 10px;border-bottom:1px solid var(--line-soft);font-size:12.5px;vertical-align:middle;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
td.key{max-width:320px}
td:has(.multi){overflow:visible}
/* a row is exactly one line high — long names truncate with the full text in the tooltip, so the
   number of rows that fit is a fixed calculation rather than a guess about wrapping */
td .sub{color:var(--muted);font-size:11px;margin-left:6px}
td.wrap{white-space:normal}
tbody tr:nth-child(even){background:var(--row-alt)}
tbody tr:hover{background:var(--row-hover)}
td.key{font-weight:600}
td input,td select{padding:4px 7px;font-size:12px}
.table-wrap{overflow-x:auto}
.totrow{display:flex;gap:12px;align-items:center;padding:8px 10px;background:var(--accent-pale);
  border-top:1px solid var(--line);font-size:12.5px;font-weight:600}
.totrow .sp{flex:1}
.empty{padding:26px;text-align:center;color:var(--muted)}

/* ---------- pills, chips, kv ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:2px 9px;font-size:11px;
  font-weight:600;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-draft{background:#F1F5F9;color:#475569}
.p-pending{background:var(--info-bg);color:var(--info)}
.p-active{background:var(--ok-bg);color:var(--ok)}
.p-archived{background:#F1F5F9;color:#94A3B8}
.p-review{background:var(--warn-bg);color:var(--warn)}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-pale);border:1px solid var(--line);
  color:var(--ink-2);border-radius:20px;padding:2px 4px 2px 10px;font-size:11.5px;margin:0 5px 5px 0}
.chip form{display:inline}
.chip button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;
  line-height:1;padding:0 4px;border-radius:50%}
.chip button:hover{color:var(--bad)}
.chip.plain{padding-right:10px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line-soft);
  font-size:12.5px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600}
.kv .v.warn{color:var(--warn)}
.kv .v.good{color:var(--ok)}
.note{font-size:11.5px;color:var(--muted);line-height:1.5;margin:8px 0 0}
.bar{height:6px;border-radius:4px;background:var(--line-soft);overflow:hidden;margin:6px 0}
.bar i{display:block;height:100%;background:var(--accent)}
.bar.good i{background:var(--ok)}
.log{list-style:none;margin:0;padding:0;font-size:12px}
.log li{padding:6px 0;border-bottom:1px solid var(--line-soft)}
.log li:last-child{border-bottom:0}
.log .when{color:var(--muted);font-size:11px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kpi .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--label);font-weight:700}
.kpi .v{font-size:23px;font-weight:700;margin-top:4px}
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;font-size:12px}
.pager a,.pager .on,.pager .off{padding:3px 9px;border-radius:6px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);line-height:1.6}
.pager a:hover{background:var(--row-hover);text-decoration:none}
.pager .on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pager .off{color:var(--muted);opacity:.6}
.pager .count{margin-left:auto;border:0;background:transparent;color:var(--muted)}
.pager svg{width:14px;height:14px}

/* ---------- login ---------- */
/* ---- sign in ------------------------------------------------------------------------------- */
/* Two panels: what this is, and the way in. The left one collapses on a narrow screen so a phone
   gets the form and nothing else — a pitch is no use to somebody who already works here and is
   holding a trolley. */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}

.auth-pitch{background:var(--side);border-right:1px solid var(--line);
  padding:44px 48px;display:flex;flex-direction:column;justify-content:center}
/* the mark stacked over the wordmark, and the panel centred on it: here the logo has room to be a
   logo, rather than the thumbnail it has to be beside the wordmark in the sidebar */
.auth-pitch{align-items:center;text-align:center}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:30px}
.auth-brand .lg{height:160px;width:auto;display:block}
.auth-brand .wordmark{height:34px;width:auto;display:block}
.auth-pitch h1{font-size:25px;line-height:1.3;max-width:14em;margin-bottom:26px;color:var(--ink)}
/* the points stay left-aligned inside the centred column — centred body text is hard to read */
.auth-points{list-style:none;margin:0;padding:0;max-width:30em;text-align:left}
.auth-points li{display:flex;gap:11px;align-items:flex-start;margin-bottom:15px;
  font-size:13px;line-height:1.55;color:var(--ink-2)}
.auth-points svg{flex:0 0 15px;margin-top:2px;color:var(--accent)}
.auth-points b{color:var(--ink)}
.auth-foot{margin-top:36px;font-size:11.5px;color:var(--muted);letter-spacing:.3px}
.auth-foot b{color:var(--ink-2);font-weight:700}

.auth-form{display:grid;place-items:center;padding:32px 24px}
.auth-form .box{width:100%;max-width:352px}
.auth-form h2{font-size:20px;margin-bottom:2px}
.auth-form .sub{color:var(--muted);font-size:12.5px;margin-bottom:20px}
.auth-form .field{margin-bottom:13px}
.auth-form .btn{width:100%;justify-content:center;margin-top:6px}
.auth-form .checks{margin:2px 0 4px}
.auth-help{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:11.5px;line-height:1.5;color:var(--muted)}

@media (max-width:820px){
  .auth{grid-template-columns:1fr}
  .auth-pitch{display:none}
  .auth-form{padding:28px 20px}
}

/* ---- what a page is for, behind an icon --------------------------------------------------- */
/* The text used to be a paragraph at the top of every screen. On a grid page that is not free:
   the page bar counts towards the height the row count is measured against, so a three-line
   explanation costs the reader two rows of their data, every visit, forever. */
.info{position:relative;display:inline-block}
.info summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;color:var(--muted);border:1px solid transparent}
.info summary::-webkit-details-marker{display:none}
.info summary:hover{color:var(--accent);border-color:var(--line);background:var(--card)}
.info[open] summary{color:var(--accent);border-color:var(--accent)}
.info .info-pop{position:absolute;z-index:300;top:calc(100% + 6px);left:0;width:min(430px,80vw);
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 13px;
  box-shadow:0 10px 30px rgba(0,0,0,.13);font-size:12.5px;line-height:1.55;color:var(--muted)}
.info .info-pop b{color:var(--ink)}

/* ---- type-to-search over a long list ------------------------------------------------------- */
/* The material master runs to ten thousand rows. A native select opens as an alphabetical wall,
   so this filters as you type. Generic costing items sit in their own group at the top: a chef
   reaches for "Oil" far more often than for one of the forty branded oils behind it. */
.combo{position:relative;min-width:230px}
.combo .combo-input{width:100%;padding-right:26px}
.combo .combo-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;
  background:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:2px 4px}
.combo .combo-clear:hover{color:var(--ink)}
.combo .combo-list{position:absolute;z-index:300;top:calc(100% + 4px);left:0;min-width:280px;
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px;
  box-shadow:0 12px 34px rgba(0,0,0,.16);overflow:auto;max-height:320px}
.combo .combo-group{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;
  color:var(--label);padding:7px 8px 4px;position:sticky;top:0;background:var(--card)}
.combo .combo-opt{display:flex;gap:7px;align-items:baseline;padding:5px 8px;border-radius:5px;
  cursor:pointer;font-size:12.5px;white-space:nowrap}
.combo .combo-opt b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:var(--muted)}
.combo .combo-opt .nm{color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.combo .combo-opt:hover,.combo .combo-opt.on{background:var(--accent);color:#fff}
.combo .combo-opt:hover b,.combo .combo-opt.on b,
.combo .combo-opt:hover .nm,.combo .combo-opt.on .nm,
.combo .combo-opt:hover .muted,.combo .combo-opt.on .muted{color:#fff}
.combo .combo-none{margin:6px 8px;color:var(--muted);font-size:12px}

/* ---- the add-ingredient row ---------------------------------------------------------------- */
/* The combo box wrapper must not carry a min-width of its own: it sits in a flex column that is
   already sized, and a wrapper wider than its column spills over whatever comes next — which is
   how the ingredient box came to sit on top of the preparation select. The dropdown keeps its own
   width, and is moved to position:fixed when open anyway. */
.addline .combo{width:100%;min-width:0}
/* a number and a two-letter unit do not need a share of the row */
.addline .field.narrow{flex:0 0 92px;min-width:92px}
.addline .field.tiny{flex:0 0 68px;min-width:68px}
.addline .field.tiny select{padding-left:6px;padding-right:4px}
/* the hero mark: a checkbox, sitting on the baseline with the inputs */
.addline .field.mark{flex:0 0 auto;min-width:0}
.addline .field.mark .inline-check{white-space:nowrap;padding-bottom:7px}
.hero-dot{color:var(--accent);font-weight:700}
.combo .combo-hint{margin:6px 8px;color:var(--muted);font-size:12px}
.combo.busy .combo-input{background-image:none;opacity:.75}

/* ---- a button that is waiting on something slow ------------------------------------------- */
/* The AI review takes twenty-odd seconds. A page that looks identical for that long reads as
   broken, and people press again — which sends a second request and costs money twice. */
.btn.is-busy{opacity:.85;cursor:progress}
.spin{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- recipe history, one entry per line ----------------------------------------------------- */
/* It used to sit in the side column, where a detail like "Started from BomBridge R04366 · 3 Pepper
   And Onion Omelette — 7 of 7 ingredient(s) placed" wrapped three times. Given the full width it
   is one line: what happened, what it was, and when. */
.log.wide li{display:flex;align-items:baseline;gap:12px;padding:7px 0}
.log.wide .act{flex:0 0 108px;font-weight:700;color:var(--ink)}
.log.wide .det{flex:1;min-width:0;color:var(--ink-2)}
.log.wide .when{flex:0 0 auto;margin-left:auto;white-space:nowrap;color:var(--muted);font-size:11px}
@media (max-width:900px){
  .log.wide li{flex-wrap:wrap;gap:4px 10px}
  .log.wide .det{flex:1 0 100%;order:3}
}

/* ---- Recipes Needed: one row, one line ------------------------------------------------------ */
/* The row grew a recipe picker, three buttons, a material search and a bin, and wrapped into three
   lines — which made a list of 700 unreadable. The controls now sit on one line and the table
   scrolls sideways if the window is too narrow, which is the behaviour every other grid here has. */
.needs-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}
.needs-actions .combo{width:200px;min-width:200px}
.needs-actions .btn.sm{flex:0 0 auto}
td.needs-recipe select{min-width:180px;max-width:230px}
.side .foot b{color:var(--ink-2);font-weight:700}