/* ---------- Categories tab, and the "off the defaults" markers --------------
   Two columns of cards, one per half of the house, each card folding open into
   the five defaults that category sets. The area colours are the same three
   used by the sidebar and Reports, so a green stripe still means food
   everywhere in the app. */
.catgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}
.catarea { --c: var(--accent); min-width: 0; }
.catarea.a-bar { --c: var(--amber); }
.catarea.a-household { --c: var(--gold); }
.catarea-head { padding: 0 2px 10px; border-bottom: 2px solid var(--c); margin-bottom: 10px; }
.catarea-head b {
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 750; color: var(--text);
}
.catarea-head b .ic { width: 17px; height: 17px; color: var(--c); }
.catarea-head span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.catcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--c);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.catcard.open { border-color: var(--c); box-shadow: var(--shadow-pop); }
.cat-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "name count caret" "pre pre caret" "off off caret";
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
}
.cat-head:hover { background: var(--surface-2); }
.cat-name {
  grid-area: name;
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13.5px; font-weight: 700; color: var(--text);
}
.cat-mine {
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-radius: 999px; padding: 2px 6px;
}
.cat-count { grid-area: count; font-size: 11px; font-weight: 650; color: var(--text-muted); white-space: nowrap; }
.cat-pre { grid-area: pre; font-size: 11.5px; color: var(--text-soft); line-height: 1.5; }
.cat-pre b { color: var(--text); font-weight: 650; }
.cat-pre i { color: var(--text-muted); font-style: normal; }
.cat-off {
  grid-area: off; justify-self: start;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--amber);
  background: color-mix(in srgb, var(--amber) 11%, transparent);
  border-radius: 999px; padding: 2px 8px;
}
.cat-off .ic { width: 12px; height: 12px; }
.cat-head > .ic { grid-area: caret; width: 15px; height: 15px; color: var(--text-muted); transition: transform .18s ease; }
.catcard.open .cat-head > .ic { transform: rotate(180deg); }

.cat-body { padding: 2px 12px 12px; border-top: 1px solid var(--border); }
.cat-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 12px 0;
}
.cat-form .pfield > label { display: flex; align-items: center; gap: 5px; }
.cat-form .pfield > label .ic { width: 13px; height: 13px; }
.cat-form .phelp { font-size: 11px; }
.cat-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 8px; }
.cat-sep { flex-basis: 100%; height: 0; }
.cat-rename {
  flex: 1 1 160px; min-width: 0;
  font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface-2); color: var(--text);
}
.cat-rename:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

.cat-add { display: flex; gap: 7px; margin-top: 4px; }
.cat-add input {
  flex: 1; min-width: 0;
  font-size: 13px; padding: 9px 11px;
  border: 1px dashed var(--border-strong); border-radius: 9px;
  background: var(--surface-2); color: var(--text);
}
.cat-add input:focus { outline: none; border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.cat-foot {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 16px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-soft); line-height: 1.55;
}
.cat-foot .ic { width: 15px; height: 15px; flex: none; color: var(--gold); margin-top: 1px; }

/* the way in, from the bottom of the My Products sidebar */
.psb-manage {
  margin-top: 8px; padding-top: 10px !important;
  border-top: 1px solid var(--border);
  font-size: 12px !important; color: var(--text-muted) !important;
}
.psb-manage .ic { width: 14px; height: 14px; flex: none; }
.psb-manage .ic:last-child { margin-left: auto; }
.psb-manage:hover { color: var(--accent) !important; }

/* ---------- "this one says something different" -----------------------------
   Deliberately quiet on a product row — most houses have a handful of these
   and every one of them may be perfectly deliberate. */
/* the `.prow .pname small` rule in pantry.css is more specific than a lone
   class, so this has to match its weight to keep the chip on one line */
.preset-off, .pname small.preset-off {
  display: inline-flex; align-items: center; gap: 4px; width: fit-content;
  margin-top: 2px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; color: var(--amber);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}
.preset-off .ic { width: 11px; height: 11px; }
.pp-preset {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-top: 12px; padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--border));
  background: color-mix(in srgb, var(--amber) 7%, transparent);
  border-radius: var(--radius-sm);
  font-size: 12.5px; color: var(--text-soft); line-height: 1.5;
}
.pp-preset.ok {
  border-color: var(--border);
  background: var(--surface-2);
}
.pp-preset > .ic { width: 16px; height: 16px; flex: none; color: var(--amber); }
.pp-preset.ok > .ic { color: var(--accent); }
.pp-preset > span { flex: 1 1 260px; min-width: 0; }
.pp-preset b { color: var(--text); font-weight: 650; }

/* one difference, on a Maintenance row */
.me-diff {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--surface-3); font-size: 11.5px; color: var(--text-soft);
}
.me-diff b { color: var(--text); font-weight: 650; }
.me-diff s { color: var(--text-muted); }
.me-diff .ic { width: 11px; height: 11px; color: var(--text-muted); }

@media (max-width: 720px) {
  .catgrid { grid-template-columns: 1fr; }
  .cat-head { grid-template-columns: 1fr auto; grid-template-areas: "name caret" "count caret" "pre pre" "off off"; }
  .cat-count { justify-self: start; }
}