/* --- Pantry ---------------------------------------------------------------- */

.ptools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }

.ptools input[type=search] {
  flex: 1;
  min-width: 200px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.25s ease;
}

.ptools input[type=search]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

.pantry-sticky-tools {
  position: sticky;
  top: 0;
  z-index: 24;
  margin: 0 -10px 14px;
  padding: 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 14px -8px rgba(22,26,49,.1);
}

.pantry-sticky-tools .ptools { margin-bottom: 0; flex-wrap: nowrap; }

@media (max-width: 600px) {
  .pantry-sticky-tools { margin: 0 -8px 12px; padding: 8px; }
  .pantry-sticky-tools .ptools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pantry-sticky-tools .ptools input[type=search] { grid-column: 1/-1; width: 100%; min-width: 0; }
  .pantry-sticky-tools .ptools .tool { width: 100%; padding-inline: 8px; }
}

.pfilters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.pantry-dashboard {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}

.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: left;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.25s ease;
}

.dash-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.dash-card.on { border-color: var(--accent); background: var(--accent-soft); }

.dash-card .dash-top {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dash-card strong { display: block; font-size: 26px; font-weight: 750; line-height: 1.1; margin-top: 5px; color: var(--text); }
.dash-card small { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; }

.expiry-panel {
  grid-column: 1/-1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  box-shadow: var(--shadow-card);
}

.expiry-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}

.expiry-panel-head small { color: var(--text-muted); font-weight: 500; }
.expiry-panel .helper { color: var(--text-muted); font-size: 12.5px; padding: 3px 0; }

.expiry-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 16px; }

.expiry-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  text-align: left;
  min-width: 0;
  cursor: pointer;
}

.expiry-item:hover .expiry-name { color: var(--accent); }
.expiry-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--text-soft); }

.expiry-kind {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 11%, transparent);
  color: var(--blue);
  white-space: nowrap;
}

.expiry-kind.best { background: color-mix(in srgb, #69449a 11%, transparent); color: #69449a; }
.expiry-when { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.expiry-when.urgent { color: var(--amber); font-weight: 800; }
.expiry-when.expired { color: var(--red); font-weight: 800; }

@media (max-width: 760px) {
  .pantry-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expiry-list { grid-template-columns: 1fr; }
}

/* "BEST BEFORE · Wholemeal Bread · 9 June 2024 · 783 days overdue" is four
   things on one line, and on a phone the date won't wrap and the badge won't
   shrink, so the product name — the only part that tells you which jar to go
   and look at — was collapsing to "W…". Below 560px the name takes a line of
   its own and the badge and the date share the one under it. */
@media (max-width: 560px) {
  .expiry-item { flex-wrap: wrap; row-gap: 1px; padding: 7px 0; }
  .expiry-name { flex: 1 1 100%; order: -1; white-space: normal; }
  .expiry-when { margin-left: auto; }
}

/* the sidebar carries an area header, a caret and a have/total pill on one
   line now, so it gets a little more room than the flat list needed */
.pantry-layout { display: grid; grid-template-columns: 238px 1fr; gap: 20px; align-items: start; }

.psidebar {
  position: sticky;
  top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  box-shadow: var(--shadow-card);
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

.psidebar .sgroup {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-muted);
  padding: 10px 10px 4px;
}

.psidebar button {
  display: flex;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  gap: 6px;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.psidebar button:hover { background: var(--surface-3); color: var(--text); }

.psidebar button.on {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 650;
}

.psidebar button .cnt {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-3);
  border-radius: 999px;
  padding: 1px 7px;
}

.psidebar button.on .cnt {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* ---------- the sidebar, grouped by area --------------------------------
   Each area is a block: a header that selects the whole area, a caret that
   folds its departments away, and the departments themselves indented under
   it. The header keeps its area colour down the left edge so the same three
   colours mean the same three things here as they do in Reports. */
.psb-area { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.psidebar > .psb-area:first-of-type { margin-top: 4px; }
.psb-head { display: flex; align-items: center; gap: 0; }
.psb-head .psb-title { flex: 1; min-width: 0; }
.psb-title {
  font-weight: 700 !important;
  color: var(--text) !important;
  border-left: 3px solid var(--c, var(--accent));
  border-radius: 4px 8px 8px 4px;
  padding: 8px 6px 8px 8px !important;
  gap: 5px !important;
  font-size: 12.5px;
}
.psb-title span:not(.cnt) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psb-title .ic { width: 14px; height: 14px; flex: none; }
.psb-title .cnt { flex: none; padding: 1px 5px !important; font-size: 10px; }
.psb-title.on { color: var(--accent) !important; }
.psb-area.a-food .psb-title      { --c: var(--accent); }
.psb-area.a-bar .psb-title       { --c: var(--amber); }
.psb-area.a-prep .psb-title      { --c: var(--blue); }
.psb-area.a-household .psb-title { --c: var(--gold); }
.psb-caret {
  width: 22px !important; flex: none; padding: 6px 0 !important; justify-content: center;
  color: var(--text-muted) !important;
}
.psb-caret .ic { width: 14px; height: 14px; transition: transform .18s ease; transform: rotate(-90deg); }
.psb-area.open .psb-caret .ic { transform: none; }
.psb-subs { display: none; padding: 2px 0 2px 9px; }
.psb-area.open .psb-subs { display: block; }
.psb-subs button { font-size: 12.5px; padding: 6px 9px; }

@media (max-width: 760px) {
  .pantry-layout { display: block; }
  .psidebar {
    position: static;
    display: flex;
    overflow-x: auto;
    max-height: none;
    padding: 8px;
    gap: 4px;
    margin-bottom: 14px;
    scrollbar-width: thin;
    border-radius: var(--radius);
  }
  .psidebar .sgroup { display: none; }
  .psidebar button { width: auto; white-space: nowrap; flex-shrink: 0; }
  /* on a phone the sidebar is one scrolling strip — the area picker above it
     already does the grouping, so the blocks flatten back out into the row.
     display:contents has to beat the `.psb-area.open .psb-subs` rule above it,
     hence the extra `.psidebar` on the front. */
  .psidebar { align-items: center; }
  .psidebar .psb-area,
  .psidebar .psb-head,
  .psidebar .psb-subs,
  .psidebar .psb-area.open .psb-subs { display: contents; }
  .psidebar .psb-caret { display: none !important; }
  .psidebar .psb-title {
    flex: none; border-left: none; padding-left: 10px !important; font-size: 13px;
  }
  .psidebar .psb-title span:not(.cnt) { flex: none; }
}

/* ---------- the area picker above the filters ---------- */
.pareaseg { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.pareaseg button {
  display: flex; align-items: center; gap: 7px; padding: 8px 13px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-soft); font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pareaseg button:hover { border-color: var(--border-strong); color: var(--text); }
.pareaseg button .ic { width: 14px; height: 14px; }
.pareaseg button .cnt {
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  background: var(--surface-3); border-radius: 999px; padding: 1px 7px;
}
.pareaseg button.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}
.pareaseg button.on .cnt { background: color-mix(in srgb, #000 18%, transparent); color: inherit; }
/* the area you're inside, when a single department of it is selected */
.pareaseg button.within { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) {
  /* four wide pills stack four rows deep on a phone — one swipeable strip instead */
  .pareaseg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .pareaseg::-webkit-scrollbar { display: none; }
  .pareaseg button { flex: none; }
}

/* ---------- the band that opens each area in the list ---------- */
.parea-band {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 24px 0 4px; padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 13%, transparent), transparent 70%);
  border-left: 3px solid var(--c);
}
.parea-band:first-child { margin-top: 4px; }
.parea-band.a-food { --c: var(--accent); }
.parea-band.a-bar { --c: var(--amber); }
.parea-band.a-prep { --c: var(--blue); }
.parea-band.a-household { --c: var(--gold); }
.pab-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 750; color: var(--text); letter-spacing: -.01em;
}
.pab-title .ic { width: 15px; height: 15px; color: var(--c); }
.pab-sub { font-size: 11.5px; color: var(--text-muted); flex: 1; min-width: 140px; }
.pab-count { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

.prow {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  font-size: 13.5px;
  flex-wrap: wrap;
  background: var(--surface);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, background-color 0.25s ease;
}

.prow.have { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.prow.hl { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }

.prow input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.prow .pname { flex: 1; min-width: 150px; cursor: pointer; color: var(--text-soft); }
.prow .pname:hover { color: var(--accent); }
.prow .pname small { display: block; color: var(--text-muted); font-size: 11.5px; }

.prow .pname small.expiry-badge {
  display: table;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 11%, transparent);
  color: var(--blue);
  font-weight: 700;
  font-size: 10.5px;
}

.prow .pname small.expiry-badge.best { background: color-mix(in srgb, #69449a 11%, transparent); color: #69449a; }
.prow .pname small.expiry-badge.urgent { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); }
.prow .pname small.expiry-badge.expired { background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); }

.prow .bc-badge {
  display: inline-block;
  font-size: 10.5px;
  background: color-mix(in srgb, var(--blue) 11%, transparent);
  color: var(--blue);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 6px;
  font-weight: 700;
}

.prow .pqty {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  text-align: right;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, background-color 0.25s ease;
}

.prow .pqty:focus { border-color: var(--accent); }

.prow .punit {
  padding: 6px 4px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text-muted);
  max-width: 76px;
}
/* multipacks count in cans, eggs, sachets — a fixed label, not a unit you pick */
.prow span.punit {
  display: flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 7px 7px; white-space: nowrap; overflow: hidden;
}

.prow .rowbtn {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--text-soft);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.prow .rowbtn:hover { background: var(--surface-3); }
.prow .rowbtn.buyon { background: var(--gold); color: #fff; border-color: transparent; }
.prow .rowbtn.linked { background: color-mix(in srgb, var(--blue) 11%, transparent); color: var(--blue); border-color: transparent; }
.prow .delbtn { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); border-color: transparent; }
.prow.have .pname { color: var(--green-dark); font-weight: 650; }

/* pantry tabs */
.ptabs { display: flex; gap: 8px; margin: 4px 0 14px; }

.ptabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--text-soft);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ptabs button:hover { background: var(--surface-3); }

.ptabs button.on {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}

/* ingredient links */
.ing-links { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; padding: 4px 0 2px 26px; font-size: 12px; }

.lchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 11%, transparent);
  color: var(--blue);
  font-weight: 600;
  border: 1px solid transparent;
  font-size: 12px;
}

.lchip.in { background: var(--accent-soft); color: var(--green-dark); }
.lchip i { font-style: normal; opacity: 0.75; font-weight: 500; }
.lchip button { border: none; background: none; cursor: pointer; color: inherit; font-weight: 800; padding: 0 1px; font-size: .85rem; line-height: 1; }
.lchip button:hover { color: var(--red); }

.linkbtn {
  padding: 3px 10px;
  border-radius: 999px;
  background: none;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.linkbtn:hover { border-color: var(--accent); color: var(--accent); }

/* woolworths chips */
.pricechip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--green-dark);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 1px 7px;
  margin-left: 6px;
  white-space: nowrap;
}

.pricechip.special { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); }
.pricechip s { opacity: 0.6; font-weight: 600; margin-left: 3px; }
.pricechip .cup { font-weight: 500; opacity: 0.75; margin-left: 4px; }

.aislechip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius: 6px;
  padding: 1px 7px;
  margin-left: 6px;
  white-space: nowrap;
}

/* The aisle is a chip so it reads as a label rather than more of the name,
   and the chip holds its line so "Fruit & Veg" never breaks after the "&".
   Most aisles are two words; "Toilet Paper, Tissues & Serviettes" is not,
   and at 320px it hung off the end of the row. Narrow screens get to break
   it — an ugly two-line chip beats a row that runs off the phone. */
@media (max-width: 560px) {
  .aislechip { white-space: normal; }
}

.pthumb { width: 38px; height: 38px; object-fit: contain; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); flex-shrink: 0; }
.lp-row .pthumb { width: 32px; height: 32px; }
.ed-thumb { width: 74px; height: 74px; object-fit: contain; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); float: right; margin: 0 0 8px 10px; }
.li-item .aislechip, .li-item .pricechip { font-size: 11px; }
.sync-status { color: var(--text-muted); font-size: 12px; font-weight: 700; align-self: center; white-space: nowrap; }

@media print {
  .aislechip { background: none; border: 1px solid #999; color: #000; }
  .pricechip { background: none; color: #000; }
}

.ing-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.ing-tools .hint2 { color: var(--text-muted); font-size: 12px; flex: 1; min-width: 220px; }

/* link picker */
.lp-list { max-height: 52vh; overflow-y: auto; margin-top: 10px; }
.lp-row { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 9px; cursor: pointer; transition: background-color 0.12s ease; }
.lp-row:hover { background: var(--surface-3); }
.lp-row input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.lp-row .lp-name { flex: 1; color: var(--text-soft); font-size: 13.5px; }
.lp-row .lp-name small { display: block; color: var(--text-muted); font-size: 11.5px; }
.lp-row .lp-stock { font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }

.lp-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  outline: none;
  margin-top: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.25s ease;
}

.lp-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

.wiz-arrow { color: var(--text-muted); padding: 0 4px; }
.wiz-score { font-size: 10.5px; border-radius: 999px; padding: 2px 8px; font-weight: 800; }
.wiz-score.strong { background: var(--accent-soft); color: var(--green-dark); }
.wiz-score.maybe { background: color-mix(in srgb, var(--amber) 12%, transparent); color: var(--amber); }

/* link field */
.linkfield { position: relative; width: 100%; }
.linkfield .chips-inline { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }

.link-sug {
  position: absolute;
  z-index: 40;
  left: 0; right: 0; top: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  max-height: 220px;
  overflow-y: auto;
  display: none;
}

.link-sug.show { display: block; }
.link-sug button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; cursor: pointer; font-size: 13px; color: var(--text-soft); }
.link-sug button:hover { background: var(--surface-3); }
.link-sug button small { color: var(--text-muted); margin-left: 6px; }

/* The add form that lived here is a wizard now — css/add-wizard.css. */
.expiry-picker { display: flex; flex: 1; gap: 8px; align-items: center; flex-wrap: wrap; }
.expiry-picker [id$="ExpiryPrecision"] { min-width: 145px; }
.expiry-picker .expiry-date, .expiry-picker .expiry-month { min-width: 170px; flex: 1; }
.expiry-picker:not(.month-only) .expiry-month { display: none; }
.expiry-picker.month-only .expiry-date { display: none; }
.expiry-readable { width: 100%; color: var(--accent); font-size: 12.5px; font-weight: 700; min-height: 1em; }

.month-guide-wrap { grid-column: 1/-1; width: 100%; margin-top: 4px; }
.month-guide-wrap > summary { cursor: pointer; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); }
.month-guide-wrap > summary:hover { color: var(--text); }
.month-guide {
  display: grid;
  grid-template-columns: repeat(6, minmax(48px, 1fr));
  gap: 4px;
  width: 100%;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.month-guide-title { grid-column: 1/-1; color: var(--text-muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.expiry-picker > .month-guide-wrap { border-top: none; }
.month-guide span { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.month-guide b { color: var(--text); }

@media (max-width: 600px) {
  .expiry-picker [id$="ExpiryPrecision"], .expiry-picker .expiry-date, .expiry-picker .expiry-month { width: 100%; min-width: 0; }
}


.pdept h4 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin: 16px 0 8px;
  font-weight: 700;
}

.pfoot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pfoot .hint { font-size: 12px; color: var(--text-muted); width: 100%; }

/* item edit dialog */
#editSheet { max-width: 480px; padding: 26px; }
#editSheet h3 { margin-bottom: 2px; padding-right: 30px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
#editSheet .esub { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; }

.efield { margin-bottom: 12px; }

.efield label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.efield input, .efield select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.25s ease;
}

.efield input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.efield .inline { display: flex; gap: 8px; }
.efield .inline input { flex: 1; }
.efield .inline select { width: 110px; }
.efield .expiry-picker select, .efield .expiry-picker input { width: auto; }
.efield .expiry-picker .expiry-date, .efield .expiry-picker .expiry-month { flex: 1; min-width: 170px; }
.efield .helper { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.efield .helper a { color: var(--blue); }
.erow-btns { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* scanner */
#scanSheet { max-width: 480px; padding: 24px; max-height: calc(100vh - 56px); overflow-y: auto; }
#scanSheet h3 { margin-bottom: 8px; font-size: 18px; font-weight: 700; color: var(--text); }
#scanVideoWrap { background: var(--surface-3); border-radius: var(--radius-sm); overflow: hidden; margin: 10px 0; display: none; }
#scanVideo { width: 100%; display: block; }
#scanStatus { font-size: 13px; color: var(--text-muted); margin: 8px 0; }
.scanrow { display: flex; gap: 8px; margin-top: 10px; }
.scanrow input { flex: 1; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 9px; outline: none; background: var(--surface); color: var(--text); }

/* the big "what just happened" line — visible without leaving the scanner */
.scan-banner {
  margin: 12px 0 6px; padding: 12px 14px; border-radius: 12px;
  font-size: 14px; font-weight: 650; line-height: 1.35;
  border: 1px solid var(--border); background: var(--surface-2, var(--bg)); color: var(--text-soft);
  display: flex; gap: 9px; align-items: flex-start;
}
.scan-banner .sb-ico { font-size: 17px; line-height: 1.1; flex: none; }
.scan-banner .sb-sub { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 3px; }
.scan-banner.ok    { background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 34%, transparent); color: var(--green-dark); }
.scan-banner.ok .sb-sub { color: var(--green-dark); opacity: .85; }
.scan-banner.warn  { background: color-mix(in srgb, var(--amber) 13%, transparent); border-color: color-mix(in srgb, var(--amber) 38%, transparent); color: var(--amber); }
.scan-banner.warn .sb-sub { color: var(--amber); opacity: .9; }
.scan-banner.bad   { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 34%, transparent); color: var(--red); }
.scan-banner.bad .sb-sub { color: var(--red); opacity: .9; }
.scan-banner.busy  { background: color-mix(in srgb, var(--blue) 10%, transparent); border-color: color-mix(in srgb, var(--blue) 30%, transparent); color: var(--blue); }
.scan-banner.busy .sb-sub { color: var(--blue); opacity: .9; }
@keyframes scanflash { from { transform: scale(.985); opacity: .55; } to { transform: none; opacity: 1; } }
.scan-banner.flash { animation: scanflash .18s ease both; }

.scan-inputlbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-muted); margin-top: 14px; }
.scanrow input#manualBc { font-variant-numeric: tabular-nums; font-size: 15px; }
.scanrow input#manualBc:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

.scan-opts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.scan-opts label { display: flex; gap: 6px; align-items: center; cursor: pointer; }

/* running list of this session's scans */
.scan-feed { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; }
.scan-feed-h { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.scan-feed-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 230px; overflow-y: auto; }
.sf-item { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px;
  padding: 7px 9px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border); }
.sf-item .sf-ico { flex: none; font-size: 13px; }
.sf-item .sf-body { flex: 1; min-width: 0; }
.sf-item .sf-name { font-weight: 650; color: var(--text); display: block; word-break: break-word; }
.sf-item .sf-note { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.sf-item .sf-q { flex: none; font-size: 11.5px; font-weight: 800; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.sf-item.warn { background: color-mix(in srgb, var(--amber) 9%, transparent); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.sf-item.warn .sf-note { color: var(--amber); }
.sf-item.bad  { background: color-mix(in srgb, var(--red) 9%, transparent); border-color: color-mix(in srgb, var(--red) 28%, transparent); }
.sf-item.bad .sf-note { color: var(--red); }
.sf-fix { display: flex; gap: 6px; margin-top: 6px; }
.sf-fix input { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); }
.sf-fix input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.sf-fix button { font: inherit; font-size: 12px; font-weight: 700; padding: 0 11px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-soft); }
.sf-fix button:hover { border-color: var(--accent); color: var(--accent); }


/* ---------- tab subtitles ----------
   The tabs are the only place the two lists are named side by side, so the
   naming does some of the explaining. */
.ptabs .pt-l {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  white-space: nowrap;
}

.ptabs .pt-l i {
  font-style: normal;
  font-weight: 500;
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: .1px;
}

.ptabs button.on .pt-l i { color: color-mix(in srgb, var(--accent) 80%, var(--text-soft)); }

@media (max-width: 1080px) { .ptabs .pt-l i { display: none; } }

/* ---------- product vs recipe ingredient ----------
   Shown on both tabs, with the column you're standing in highlighted. */
.pex {
  position: relative;
  margin: 0 0 16px;
  padding: 16px 18px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.pex-x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.pex-x:hover { background: var(--surface-3); color: var(--text); }

.pex-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}

.pex-col {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* the side you're actually looking at */
.pex-col.here {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.pex-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pex-col.here .pex-tag { color: var(--accent); }
.pex-tag .ic { width: 14px; height: 14px; }
.pex-col b { display: block; margin: 6px 0 4px; font-size: 14px; color: var(--text); }
.pex-col p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.pex-col p i { font-style: normal; font-weight: 650; color: var(--text); }
.pex-col small { display: block; margin-top: 7px; font-size: 11.5px; color: var(--text-muted); }

.pex-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 96px;
}

.pex-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--green-dark);
  font-size: 11.5px;
  font-weight: 750;
  white-space: nowrap;
}

.pex-link .ic { width: 14px; height: 14px; }
.pex-mid small { font-size: 10.5px; color: var(--text-muted); }

.pex-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.pex-foot .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--gold); }

.pex-reopen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 7px 13px;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.pex-reopen:hover { border-color: var(--accent); color: var(--accent); }
.pex-reopen .ic { width: 14px; height: 14px; }

@media (max-width: 820px) {
  .pex-grid { grid-template-columns: 1fr; }
  .pex-mid { flex-direction: row; min-width: 0; }
}

/* ---------- a recipe-ingredient row ----------
   No quantity, no unit, no thumbnail — an ingredient isn't a thing you own.
   The row answers one question: is this covered, and by what. */
.ing-row .ing-state {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  opacity: .5;
}

.ing-row .ing-state.on { color: var(--accent); opacity: 1; }
.ing-row .ing-state .ic { width: 18px; height: 18px; }

.ing-row .ing-why {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.ing-row .ing-why.on { color: var(--green-dark); }

.ing-row .ing-links {
  width: auto;
  flex: 2 1 260px;
  padding: 0;
  justify-content: flex-end;
}

/* "I've just got this, there's no product record" — the escape hatch, spelled
   out rather than a bare tick that reads like the stock box one tab over. */
.ing-row .ing-own {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.ing-row .ing-own:hover { border-color: var(--border-strong); color: var(--text-soft); }

.ing-row .ing-own.on {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft);
  color: var(--green-dark);
}

.ing-row .ing-own input { width: 13px; height: 13px; }

@media (max-width: 760px) {
  .ing-row .ing-links { flex-basis: 100%; justify-content: flex-start; padding-left: 26px; }
  .ing-row .ing-own span { display: none; }
}