/* Inventory Control — used one-handed on a phone in a stockroom.
   Big scan box, big tap targets, nothing that needs a mouse. */

:root {
  --ink: #1a1a18;
  --muted: #6f6c66;
  --line: #e3e0d9;
  --paper: #faf8f4;
  --card: #ffffff;
  --accent: #1f4d3d;
  --ok: #2f6b4f;
  --warn: #9a6a12;
  --bad: #a33a2c;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.topbar {
  background: var(--accent);
  color: #fff;
  padding: 14px 18px;
}
.topbar__title { display: flex; align-items: center; gap: 12px; }
.topbar__mark { font-size: 26px; }
.topbar h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.topbar__sub { margin: 2px 0 0; font-size: 13px; opacity: 0.82; }

.page { max-width: 900px; margin: 0 auto; padding: 18px 16px 64px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.card--scan { border-color: var(--accent); border-width: 2px; }
.card--choose { border-color: var(--warn); border-width: 2px; }
.card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card__title { margin: 0 0 10px; font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); }
.card__head .card__title { margin: 0; }
.card__hint { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.counter { color: var(--ink); }

.field { margin-bottom: 12px; }
.field__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field__note { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

.input {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.input--scan { font-size: 26px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 16px 14px; letter-spacing: 0.04em; }
.input--qty { width: 74px; text-align: right; padding: 7px 8px; }

.btn {
  font: inherit;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.btn:disabled { opacity: 0.55; cursor: default; }
.btn--tiny { font-size: 13px; padding: 7px 11px; background: #fff; color: var(--accent); }
.btn--choice {
  display: block; width: 100%; text-align: left; margin-bottom: 8px;
  background: #fff; color: var(--ink); border-color: var(--line); padding: 13px 14px;
}
.btn--choice .muted { display: block; font-size: 13px; }

.summary { margin: 6px 0 0; font-size: 15px; }
.summary .warn, .warn { color: var(--warn); font-weight: 600; }
.muted { color: var(--muted); }

.tablewrap { overflow-x: auto; }
.vtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.vtable th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); border-bottom: 1px solid var(--line); padding: 0 10px 8px 0;
  white-space: nowrap;
}
.vtable td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.vtable .num { text-align: right; }
.vtable code { font-size: 12px; }
.row--unknown { background: #fdf7ec; }

.pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pill--ok { background: #e6f1ea; color: var(--ok); }
.pill--warn { background: #fbf0d9; color: var(--warn); }
.pill--bad { background: #f8e6e3; color: var(--bad); }
.pill--grey { background: #eeece7; color: var(--muted); }

.card--off { border-color: var(--warn); }
.card--product { border-color: var(--accent); border-width: 2px; }

.off {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  gap: 12px; padding: 13px 12px; margin-bottom: 8px; text-align: left;
  font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.off:hover { border-color: var(--accent); }
.off__name { display: flex; flex-direction: column; gap: 2px; }
.off__name .muted { font-size: 13px; }

/* Never scanned: Shopify claims stock, nothing was found. Reads as quieter
   than a mismatch because it is a question, not yet a finding. */
.row--unscanned { background: #f4f2ee; }
.row--unscanned td { color: var(--muted); }
.row--unscanned strong { color: var(--ink); }

.waiting { padding: 12px 0; border-bottom: 1px solid var(--line); }
.waiting:last-child { border-bottom: 0; }
.waiting__code { margin-bottom: 8px; }
.waiting__code .muted { font-size: 13px; margin-left: 8px; }

.miss {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.miss:last-child { border-bottom: 0; }

.alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.alert--warn { background: #fbf0d9; color: #6d4a0c; border: 1px solid #ead9b0; }
.alert--error { background: #f8e6e3; color: #7d2b20; border: 1px solid #eec7c0; }

@media (max-width: 620px) {
  .page { padding: 14px 12px 56px; }
  .vtable { font-size: 13px; }
  .card__head { flex-direction: column; align-items: flex-start; }
}

.stamp{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;
  font-size:13px;margin-left:6px}

/* ------------------------------------------------------------------ *
 * The size grid — Gale's layout: numbers across the top, widths down
 * the left, colour telling you at a glance what agrees with Shopify.
 * ------------------------------------------------------------------ */

.grid { border-collapse: separate; border-spacing: 3px; font-size: 14px; }
.grid th {
  font-size: 12px; font-weight: 700; color: var(--ink);
  text-transform: none; letter-spacing: 0; border: 0;
  padding: 4px 6px; text-align: center; white-space: nowrap;
}
/* The width label has to stay put when a long run scrolls sideways,
   or you lose track of which row you are reading. */
.grid__run {
  position: sticky; left: 0; z-index: 1;
  background: var(--paper); text-align: right !important;
  padding-right: 10px !important; min-width: 74px;
}
.grid__corner { position: sticky; left: 0; z-index: 2; background: var(--paper); }

.g {
  min-width: 56px; padding: 7px 6px; text-align: center;
  border-radius: 6px; border: 1px solid var(--line); vertical-align: middle;
  line-height: 1.15;
}
.g__count { display: block; font-size: 17px; font-weight: 650; }
.g__diff  { display: block; font-size: 13px; font-weight: 700; }
.g__note  { display: block; font-size: 10px; text-transform: uppercase;
            letter-spacing: .04em; opacity: .75; }

/* Counted and agrees. */
.g--ok { background: #e6f1ea; border-color: #bcd8c7; color: #1f4d3d; }
/* Counted and does not agree — the number you would write to Shopify. */
.g--off { background: #fbe4e0; border-color: #eab8ae; color: #8c2f22; }
/* Never scanned. Shopify claims stock but nothing was found — a question,
   not a finding, so it is quiet rather than red. */
.g--unscanned { background: #f4f2ee; border-color: var(--line); color: var(--muted); }
.g--ghost { background: #f7f1e4; border-color: #e6d9bd; color: #6d5a29; }
/* A hole in the run: this size does not exist for this width. */
.g--none { background: transparent; border: 1px dashed #e8e5dd; min-width: 56px; }

.card--product { border-left: 3px solid var(--line); }
.card--haswork { border-left-color: var(--bad); }
.p__id { min-width: 0; }
.p__title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.p__sub { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.p__report { margin: 12px 0 12px; font-size: 14px; }
.ok { color: var(--ok); font-weight: 600; }

.card--applyall { border: 2px solid var(--accent); }
.btn--big { font-size: 15px; padding: 13px 20px; font-weight: 650; white-space: nowrap; }

.stamp--saved {
  margin: 8px 0 0; font-size: 13px; font-weight: 600;
  color: var(--ok); background: #e6f1ea; border-radius: 6px; padding: 7px 10px;
}
.alert--ok { background: #e6f1ea; color: #1f4d3d; border: 1px solid #bcd8c7; }

@media (max-width: 620px) {
  .g { min-width: 48px; padding: 6px 4px; }
  .g__count { font-size: 15px; }
  .grid__run { min-width: 60px; font-size: 11px; }
}

/* Browsing a category ------------------------------------------------ */
.card--browse { border-left: 3px solid var(--warn); }
.type__sum { margin: 14px 0 10px; font-size: 15px; }
.type__miss { margin-top: 6px; }
.type__miss h3 {
  margin: 0 0 4px; font-size: 14px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--bad);
}
.type__miss .muted { margin: 0 0 10px; font-size: 13px; }
.type__all { margin-top: 14px; }
.type__all summary {
  cursor: pointer; font-size: 14px; color: var(--accent);
  padding: 8px 0; font-weight: 600;
}
.card--product.card--browsed { border-left-color: var(--warn); }

/* A style in the category list -------------------------------------- *
   Title first, then the stock in Gale's own shorthand so it reads
   without opening. Sold out is red — that is a style to think about
   archiving, not one to go looking for on a shelf. */
.style {
  display: flex; width: 100%; gap: 12px; align-items: flex-start;
  justify-content: space-between; text-align: left; font: inherit;
  cursor: pointer; padding: 11px 12px; margin-bottom: 6px;
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 8px;
}
.style:hover { border-color: var(--accent); }
.style__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.style__title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.style__stock {
  font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink); line-height: 1.35; word-break: break-word;
}
.style__scan { font-size: 12px; color: var(--muted); }

.style--ok        { border-left-color: var(--ok); }
.style--off       { border-left-color: var(--bad); }
.style--unscanned { border-left-color: var(--line); }
.style--gone      { border-left-color: var(--bad); background: #fdf3f1; }
.style--gone .style__title { color: var(--bad); }
.style--gone .style__stock { color: var(--bad); font-style: italic; }

.type__all--gone summary { color: var(--bad); }
.type__all > .muted { font-size: 13px; margin: 4px 0 10px; }

/* Archived, but still on the shelf. The whole point of flagging this: a pair
   found in the back room must be countable and bringable back, not invisible. */
.stamp--archived {
  margin: 8px 0 0; font-size: 13px; padding: 8px 11px; border-radius: 6px;
  color: #6d4a0c; background: #fbf0d9; border: 1px solid #ead9b0;
}
.stamp--archived a { color: #6d4a0c; }

.archive__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
.archive__bar .muted { font-size: 13px; flex: 1; min-width: 190px; }
.btn--danger { background: var(--bad); border-color: var(--bad); font-weight: 650; }

.type__against { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; }
.type__against label { font-size: 13px; font-weight: 600; color: var(--muted); flex: none; }
.type__against .input { flex: 1; padding: 8px 10px; font-size: 14px; }

/* A light box round each group's contents, so an open group reads as one
   panel rather than rows floating on the page. ---------------------- */
.group[open] { background: #fcfbf9; }
.group[open] > summary { border-bottom: 1px solid var(--line); }
.group > .style-wrap { margin: 8px 14px; }
.group > .style-wrap:first-of-type { margin-top: 12px; }
.group > .style-wrap:last-child { margin-bottom: 14px; }

/* A style row and the panel that opens underneath it, in place. ------ */
.style-wrap { border: 1px solid var(--line); border-radius: 8px; background: #fff;
  overflow: hidden; }
.style-wrap:has(.style--open) { border-color: var(--accent); }
.style { border: 0; border-left: 3px solid var(--line); border-radius: 0;
  margin: 0; width: 100%; }
.style__caret { flex: none; color: var(--muted); font-size: 12px; padding-top: 2px; }
.style--open { background: #f7f6f2; }

.style-body { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.style__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Minus and plus, for a trigger pulled twice by accident. ------------ */
.g__adj { display: flex; gap: 3px; justify-content: center; margin-top: 4px; }
.g__btn {
  font: inherit; font-size: 13px; line-height: 1; font-weight: 700;
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid currentColor; border-radius: 4px;
  background: rgba(255, 255, 255, 0.75); color: inherit; opacity: 0.75;
}
.g__btn:hover { opacity: 1; background: #fff; }
.g__btn:disabled { opacity: 0.3; cursor: default; }

/* Archived but still holding stock — the one that costs money. */
.group--back > summary { color: var(--accent); }
.group--back > summary .group__count { background: #e6f1ea; color: var(--ok); }
.group--back[open] { background: #f4f8f5; }

/* ------------------------------------------------------------------ *
 * The three group boxes.
 *
 * These went missing once already: the command that appended them was
 * chained behind a step that failed, so the shell never ran it. Gale had
 * to ask twice. Keep them here, at the end, on their own.
 *
 * Each group is a rectangle whether it is open or shut — the box IS the
 * thing he asked for, so it must not depend on state.
 * ------------------------------------------------------------------ */

.group {
  display: block;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.group:last-of-type { margin-bottom: 0; }

.group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
}
.group > summary::-webkit-details-marker { display: none; }
.group > summary::marker { content: ""; }
.group > summary:hover { background: #faf9f6; }

/* Our own caret, so it turns with the panel. */
.group > summary::before {
  content: "\25B8";
  flex: none;
  font-size: 13px;
  color: var(--muted);
  transition: transform .12s ease;
  display: inline-block;
}
.group[open] > summary::before { transform: rotate(90deg); }

.group__title { flex: 1; min-width: 0; }
.group__count {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  background: #eeece7;
  color: var(--muted);
  border-radius: 999px;
  padding: 2px 11px;
}
.group__note {
  margin: 0 14px 4px;
  font-size: 13px;
  color: var(--muted);
}

.group--miss > summary { color: var(--bad); }
.group--miss > summary .group__count { background: #f8e6e3; color: var(--bad); }
.group--gone > summary { color: var(--bad); }

/* A bar that fills while a batch runs. Eighty-two writes is long enough that
   a disabled button alone reads as "stuck". */
.progress {
  position: relative; height: 26px; margin: 10px 0 2px;
  background: #eeece7; border-radius: 999px; overflow: hidden; min-width: 220px;
}
.progress__fill {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--accent); transition: width .2s ease;
}
.progress__text {
  position: relative; display: block; line-height: 26px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--ink);
  mix-blend-mode: difference; filter: invert(1) grayscale(1) contrast(9);
}

/* ---- RW Product Images ------------------------------------------- */
.searchbar { display: flex; gap: 10px; margin-bottom: 8px; }
.searchbar .input { flex: 1; }

.filters {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; margin-top: 8px; border-top: 1px solid var(--line);
  font-size: 14px;
}
.filters .spacer { flex: 1; }
.filters label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.filters input[type=checkbox] { width: 18px; height: 18px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-top: 12px; }
.tile {
  position: relative; display: block; border: 2px solid var(--line);
  border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff;
}
.tile input { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; z-index: 2; }
.tile img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: contain;
  background: #f4f2ee; }
.tile__meta { display: flex; flex-direction: column; gap: 1px; padding: 7px 8px;
  font-size: 11px; line-height: 1.3; }
.tile--on { border-color: var(--accent); }
/* Off-shape images are the ones he is hunting; make them findable at a glance. */
.tile--off { border-color: #eab8ae; }
.tile--off.tile--on { border-color: var(--bad); }

.card--go { border: 2px solid var(--accent); }
.card--back { border-left: 3px solid var(--warn); }

.drop {
  border: 2px dashed var(--line); border-radius: 10px; padding: 26px 18px;
  text-align: center; background: #fcfbf9; margin: 4px 0 12px;
}
.drop--over { border-color: var(--accent); background: #f2f7f4; }
.drop p { margin: 4px 0; }

.result {
  display: flex; gap: 12px; align-items: baseline; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.result:last-child { border-bottom: 0; }
.result span:nth-child(2) { flex: 1; min-width: 0; }
.result .muted { margin-left: 8px; font-size: 13px; }
.result--ok > span:first-child { color: var(--ok); font-weight: 700; }
.result--bad > span:first-child { color: var(--bad); font-weight: 700; }

/* The app's name is in the sidebar; the heading should say the JOB. */
.topbar__lead { margin: 3px 0 0; font-size: 14px; opacity: 0.92; }
.topbar__sub { margin-top: 4px; }

/* Keeping the original is the default; deleting is the deliberate act. */
.keepold {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; margin: 4px 0 14px;
  background: #f7f5f0; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; font-size: 14px;
}
.keepold input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.keepold span { display: flex; flex-direction: column; gap: 3px; }
.keepold .muted { font-size: 13px; line-height: 1.45; }

/* ---------------------------------------------------------------- *
 * Fixing the framing
 *
 * The before and after have to be big enough to actually judge — the whole
 * point is that Gale looks rather than trusts.
 * ---------------------------------------------------------------- */

.card--frame { border-left: 4px solid #7a5cc4; }

.frame__bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 14px; border-bottom: 1px solid #e6e6e6; margin-bottom: 6px;
}
.keepold--inline { margin: 0; flex: 0 1 auto; max-width: 380px; }

.frame__row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr minmax(180px, 1.1fr);
  gap: 14px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid #eee;
}
.frame__tick { display: flex; justify-content: center; }
.frame__tick input { width: 20px; height: 20px; }

.frame__pair { margin: 0; }
.frame__pair img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: contain;
  background: #fff; border: 1px solid #e2e2e2; border-radius: 6px;
}
.frame__pair figcaption {
  font-size: 12px; color: #666; padding-top: 5px; text-align: center;
}
.frame__why { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

@media (max-width: 720px) {
  .frame__row { grid-template-columns: 28px 1fr 1fr; }
  .frame__why { grid-column: 2 / -1; }
}

/* The whole-search sweep. Deliberately a different colour from the
   hand-picked card, because one acts on a hundred products and one does not. */
.card--sweep { border-left: 4px solid #1f6f5c; }
.sweepmode { display: grid; gap: 10px; margin: 4px 0 14px; }
.sweepmode label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid #e2e2e2; border-radius: 6px; padding: 11px 13px; background: #fff;
}
.sweepmode label:has(input:checked) { border-color: #1f6f5c; background: #f3f9f7; }
.sweepmode input { margin-top: 3px; }
.sweepmode span span { display: block; font-size: 12px; margin-top: 3px; }
.keepold--inline { margin: 0; flex: 0 1 auto; max-width: 380px; }