/* Vendor Catalogue Editor — .vce-* (VC2).
 *
 * Tokens and structure ported from VCE-Prototype.html, token for token, scoped
 * under .vce-page so nothing leaks into the rest of the app. Family A (teal
 * #0588b6/#03658e, ink #0f2740, 1.5px hairlines, 16px cards, shadow
 * 0 10px 30px rgba(15,23,42,.06)).
 *
 * RESPONSIVE RULES LIVE IN EXACTLY ONE @media (max-width:1180px) BLOCK AT THE
 * END OF THIS FILE — and it must STAY the last block: a later rule at equal
 * specificity silently wins (the social-module lesson).
 */

.vce-page{
  --vce-teal:#0588b6; --vce-teal-deep:#03658e;
  --vce-ink:#0f2740; --vce-muted:#5b7183;
  --vce-bg:#f4f7fa; --vce-card:#ffffff;
  --vce-line:#e3eaf1; --vce-line-strong:#cfdae4;
  --vce-green:#0e8a5f; --vce-green-bg:#e7f6ef;
  --vce-amber:#9a6b00; --vce-amber-bg:#fdf3dc;
  --vce-red:#b3362c;  --vce-red-bg:#fdeceb;
  --vce-blue:#2563a8; --vce-blue-bg:#e8f1fb;
  --vce-chip:#eef4f8;
  --vce-shadow:0 10px 30px rgba(15,23,42,.06);
  --vce-radius:16px;
  color:var(--vce-ink);
  font-size:14px; line-height:1.45;
}
html[data-theme="dark"] .vce-page{
  --vce-ink:#e8eef4; --vce-muted:#9db0c0;
  --vce-bg:#0d1722; --vce-card:#152232;
  --vce-line:#233648; --vce-line-strong:#31485e;
  --vce-chip:#1d3040;
  --vce-green-bg:#11301f; --vce-amber-bg:#332905; --vce-red-bg:#361412; --vce-blue-bg:#12263c;
  --vce-shadow:0 10px 30px rgba(0,0,0,.35);
}
.vce-page *{box-sizing:border-box}
.vce-wrap{max-width:1280px;margin:0 auto;padding:26px 28px 80px}

/* Header */
.vce-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.vce-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vce-teal)}
.vce-title{font-size:25px;font-weight:700;margin:2px 0 4px}
.vce-sub{color:var(--vce-muted);max-width:640px}

/* Sample banner */
.vce-sample{display:flex;gap:12px;align-items:center;background:var(--vce-amber-bg);border:1.5px solid #e8cf8f;border-radius:12px;padding:11px 14px;margin:14px 0 20px}
html[data-theme="dark"] .vce-page .vce-sample{border-color:#5c4a12}
.vce-sample b{color:var(--vce-amber)}
.vce-sample .vce-dot{width:9px;height:9px;border-radius:50%;background:var(--vce-amber);flex:0 0 auto}

/* Tabs */
.vce-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.vce-tab{border:1.5px solid var(--vce-line-strong);background:var(--vce-card);color:var(--vce-muted);border-radius:999px;padding:8px 16px;cursor:pointer;font-weight:600;font-size:13px}
.vce-tab.on{background:linear-gradient(135deg,var(--vce-teal),var(--vce-teal-deep));border-color:transparent;color:#fff}
.vce-tab .vce-count{opacity:.75;font-weight:500;margin-left:5px}

/* Cards */
.vce-page .vce-card{background:var(--vce-card);border:1.5px solid var(--vce-line);border-radius:var(--vce-radius);box-shadow:var(--vce-shadow);padding:18px}
.vce-page .vce-card + .vce-card{margin-top:16px}
.vce-page .vce-card h3{margin:0 0 4px;font-size:15px}
.vce-page .vce-card .vce-note{color:var(--vce-muted);font-size:12.5px}
.vce-note{color:var(--vce-muted);font-size:12.5px}

/* Toolbar */
.vce-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.vce-search{flex:1 1 240px;min-width:0;max-width:340px;border:1.5px solid var(--vce-line-strong);border-radius:10px;padding:8px 12px;font-size:13px;background:var(--vce-card);color:var(--vce-ink)}
.vce-chips{display:flex;gap:6px;flex-wrap:wrap}
.vce-chip{border:1.5px solid var(--vce-line-strong);background:var(--vce-chip);color:var(--vce-muted);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer}
.vce-chip.on{background:var(--vce-blue-bg);border-color:var(--vce-teal);color:var(--vce-teal-deep)}
html[data-theme="dark"] .vce-page .vce-chip.on{color:#7fd0ef}
.vce-spacer{flex:1}
.vce-stale{font-size:12px;color:var(--vce-muted);margin:2px 0 12px}
.vce-stale b{color:var(--vce-ink)}

/* Buttons */
.vce-btn{border:none;border-radius:10px;padding:9px 16px;font-weight:600;font-size:13px;cursor:pointer;color:var(--vce-ink);background:var(--vce-chip)}
.vce-btn.pri{background:linear-gradient(135deg,var(--vce-teal),var(--vce-teal-deep));color:#fff}
.vce-btn.sec{background:var(--vce-card);border:1.5px solid var(--vce-teal);color:var(--vce-teal-deep)}
html[data-theme="dark"] .vce-page .vce-btn.sec{color:#7fd0ef}
.vce-btn.ghost{background:transparent;border:1.5px solid var(--vce-line-strong);color:var(--vce-muted)}
.vce-btn:disabled{opacity:.45;cursor:not-allowed}
.vce-btn.sm{padding:6px 12px;font-size:12px;border-radius:8px}

/* Badges + chips */
.vce-badge{display:inline-block;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.02em}
.vce-b-green{background:var(--vce-green-bg);color:var(--vce-green)}
.vce-b-amber{background:var(--vce-amber-bg);color:var(--vce-amber)}
.vce-b-red{background:var(--vce-red-bg);color:var(--vce-red)}
.vce-b-blue{background:var(--vce-blue-bg);color:var(--vce-blue)}
.vce-b-grey{background:var(--vce-chip);color:var(--vce-muted)}
.vce-code-chip{display:inline-block;border:1.5px solid var(--vce-line-strong);border-radius:8px;padding:2px 8px;font-size:11.5px;font-weight:700;color:var(--vce-teal-deep);background:var(--vce-blue-bg)}
html[data-theme="dark"] .vce-page .vce-code-chip{color:#7fd0ef}
.vce-code-chip.off{color:var(--vce-muted);background:var(--vce-chip);border-style:dashed}
.vce-chan{display:inline-block;border-radius:6px;padding:2px 8px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.vce-chan.api{background:var(--vce-green-bg);color:var(--vce-green)}
.vce-chan.off{background:var(--vce-amber-bg);color:var(--vce-amber)}   /* VC-FIX-1: "Not in schema" (was the workbook chip — that channel was never built) */
.vce-chan.unk{background:var(--vce-chip);color:var(--vce-muted)}

/* Catalogue list */
.vce-group{border:1.5px solid var(--vce-line);border-radius:14px;margin-bottom:12px;overflow:hidden;background:var(--vce-card)}
.vce-group-head{display:flex;gap:14px;align-items:center;padding:12px 14px;border-bottom:1.5px solid var(--vce-line)}
/* VC-IMG-2 — the swatch stays as the painted background (loading + fallback);
   the real photo lazy-loads over it and removes itself on a broken URL. */
.vce-thumb{width:44px;height:56px;border-radius:8px;flex:0 0 auto;border:1.5px solid var(--vce-line);position:relative;overflow:hidden}
.vce-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vce-m-photo{width:64px;height:80px;border-radius:10px;border:1.5px solid var(--vce-line);flex:0 0 auto;position:relative;overflow:hidden}
.vce-m-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* VC-IMG-3 — the Photos section's current/new tiles */
.vce-photo-block{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.vce-g-title{font-weight:600}
.vce-g-ids{color:var(--vce-muted);font-size:12px;margin-top:2px}
.vce-row{display:grid;grid-template-columns:92px minmax(150px,1.4fr) 110px 110px 90px 80px 110px 120px;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--vce-line);font-size:13px}
.vce-row:first-of-type{border-top:none}
.vce-row .vce-cell-label{display:none;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--vce-muted)}
.vce-cols{display:grid;grid-template-columns:92px minmax(150px,1.4fr) 110px 110px 90px 80px 110px 120px;gap:10px;padding:8px 14px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--vce-muted);border-bottom:1.5px solid var(--vce-line);background:var(--vce-chip)}
.vce-muted{color:var(--vce-muted)}
.vce-lockrow{font-size:11.5px;color:var(--vce-muted)}
/* An ASIN known only from the identity sync — a state, not a defect. */
.vce-idonly{padding:14px;font-size:12.5px;color:var(--vce-muted);background:var(--vce-chip)}

/* Empty / error states — DIFFERENT SHAPES, so a failed fetch can never be
   mistaken for an empty catalogue even in a screenshot. */
.vce-empty{padding:26px;text-align:center;color:var(--vce-muted)}
.vce-errorbox{border:1.5px solid var(--vce-red);background:var(--vce-red-bg);color:var(--vce-ink);border-radius:12px;padding:14px 16px;font-size:13px}
html[data-theme="dark"] .vce-page .vce-errorbox{color:#f2d8d5}

/* Pager */
.vce-pager{display:flex;gap:10px;align-items:center;justify-content:center;padding-top:12px}
.vce-pagenum{font-size:12.5px;color:var(--vce-muted)}

/* Skeleton */
.vce-skel{height:64px;border-radius:12px;background:linear-gradient(90deg,var(--vce-chip) 25%,var(--vce-line) 50%,var(--vce-chip) 75%);background-size:200% 100%;animation:vce-sh 1.1s infinite;margin-bottom:10px}
@keyframes vce-sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Modal (read-only item view) */
.vce-ov{position:fixed;inset:0;background:rgba(10,20,32,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;z-index:100060}
.vce-ov.open{display:flex}
.vce-modal{background:var(--vce-card);border-radius:var(--vce-radius);box-shadow:var(--vce-shadow);max-width:760px;width:100%;border:1.5px solid var(--vce-line);color:var(--vce-ink)}
.vce-m-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px 12px;border-bottom:1.5px solid var(--vce-line)}
.vce-m-body{padding:16px 20px}
.vce-m-foot{display:flex;gap:10px;align-items:center;padding:14px 20px;border-top:1.5px solid var(--vce-line);flex-wrap:wrap}
.vce-x{border:none;background:transparent;font-size:20px;color:var(--vce-muted);cursor:pointer;line-height:1}
.vce-locked{display:flex;gap:10px;flex-wrap:wrap;background:var(--vce-chip);border:1.5px solid var(--vce-line);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.vce-locked .vce-lk{font-size:12.5px}
.vce-locked .vce-lk b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--vce-muted);font-weight:700}
.vce-sec{border:1.5px solid var(--vce-line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.vce-sec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.vce-sec-h h4{margin:0;font-size:13.5px}
.vce-fields{display:flex;gap:10px;flex-wrap:wrap;font-size:13px}
.vce-val{display:inline-block;background:var(--vce-chip);border:1.5px solid var(--vce-line);border-radius:9px;padding:7px 10px}
.vce-live-line{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--vce-muted);margin-bottom:12px;flex-wrap:wrap}
.vce-raw{margin:6px 0 12px}
.vce-raw summary{cursor:pointer;font-size:12.5px;color:var(--vce-muted);font-weight:600}
.vce-raw pre{margin:8px 0 0;background:var(--vce-chip);border:1.5px solid var(--vce-line);border-radius:10px;padding:10px 12px;font-size:11.5px;max-height:320px;overflow:auto;color:var(--vce-ink)}

/* ── VC3: the edit form (ported from the prototype's .vce-f) ── */
.vce-f{display:flex;flex-direction:column;gap:4px}
.vce-f label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--vce-muted);font-weight:700}
.vce-f input,.vce-f select{border:1.5px solid var(--vce-line-strong);border-radius:9px;padding:7px 10px;font-size:13px;width:110px;min-width:0;background:var(--vce-card);color:var(--vce-ink)}
.vce-f.wide input,.vce-f.wide select{width:150px}

/* VC3: the verdict block (prototype's .vce-verdict, always .show when present) */
.vce-verdict{border-radius:12px;padding:12px 14px;margin-top:4px}
.vce-verdict .vi{display:flex;gap:8px;align-items:flex-start;margin-top:6px;font-size:12.5px}

/* VC3: the pre-submit dialog — INSIDE the modal's stacking context, so it can
   never lose a z-index war with our own overlay. */
.vce-presubmit{position:fixed;inset:0;background:rgba(10,20,32,.35);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100070}
.vce-presubmit-box{background:var(--vce-card);border:1.5px solid var(--vce-line);border-radius:14px;box-shadow:var(--vce-shadow);max-width:480px;width:100%;padding:18px;color:var(--vce-ink)}
.vce-presubmit-box h4{margin:0 0 8px;font-size:15px}
.vce-presubmit-list{margin:6px 0 8px;padding-left:20px;font-size:13px}
.vce-presubmit-list li{margin:2px 0}
.vce-presubmit-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}

/* VC3 — THE D-2 WORKAROUND, COPIED FROM VENDOR AVAILABILITY: while a shared-kit
   confirm (.ui-modal-ov, z-index 4100 in ui-kit.css) is pending, our overlay
   steps BELOW it so the confirm is clickable. Raising ui-kit.css itself is the
   real repair and is deliberately not done here — shared CSS, every screen. */
.vce-ov.vce-behind{z-index:4000}

/* VC3: the Submissions table (prototype's .vce-t). The wrapper scrolls
   sideways so the PAGE never does; rk-ownmobile on the table opts out of the
   global mobile cardifier — this module owns its own mobile shape. */
.vce-subswrap{width:100%;overflow-x:auto}
.vce-t{width:100%;border-collapse:collapse;font-size:13px}
.vce-t th{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--vce-muted);text-align:left;padding:8px 10px;border-bottom:1.5px solid var(--vce-line)}
.vce-t td{padding:10px;border-bottom:1px solid var(--vce-line);vertical-align:middle;color:var(--vce-ink)}

/* ── VC4: the diff expander (ported from the prototype's .vce-diff) ── */
.vce-diff{background:var(--vce-chip);border-radius:10px;padding:10px 12px;margin:6px 0 10px;display:none}
.vce-diff.show{display:block}
.vce-d-row{display:grid;grid-template-columns:220px 1fr 1fr 130px;gap:10px;padding:6px 0;font-size:12.5px;align-items:center}
.vce-d-row + .vce-d-row{border-top:1px solid var(--vce-line)}
.vce-d-h{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--vce-muted)}
/* VC-IMG-5: a photo row's three states. The strip SPANS the two URL columns,
   so the grid keeps its four columns at desktop instead of squeezing to five;
   at ≤1180px the row is already one column, and the tiles simply wrap. */
.vce-d-strip{grid-column:span 2;display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.vce-d-tile{display:flex;flex-direction:column;align-items:flex-start;max-width:90px}
.vce-d-tilelabel{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--vce-muted);margin-bottom:3px}
.vce-d-tile .vce-m-photo{width:72px;height:72px;background:var(--vce-chip)}
/* VC-FIX-10: a photo row spans the whole grid and labels its own pictures, so
   it stops lining up under column headers that repeated the tile captions.
   The name a person recognises (MAIN, PT01…) leads, the verdict sits beside it
   as the answer to the row, and the attribute key is the secondary detail. */
.vce-d-photo{grid-template-columns:1fr;gap:6px;padding:10px 0}
.vce-d-photo .vce-d-strip{grid-column:auto;align-items:flex-end}
.vce-d-photohead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vce-d-slot{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--vce-ink)}
.vce-d-key{font-size:10.5px;color:var(--vce-muted);word-break:break-all}
/* The sent ADDRESS, not an empty frame: our bucket is private, so there is no
   picture to show and never will be. */
.vce-d-sent{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:11px;max-width:100%}
.vce-d-sent code{font-size:10.5px;word-break:break-all}

/* VC-GALLERY-1: every image slot the product type carries, as tiles.
   Three states, and they must not look alike: a picture, a genuinely EMPTY
   slot (fillable), and one that COULD NOT BE READ — the last is drawn as a
   warning and carries no upload control, because an unreadable slot drawn as
   empty invites someone to fill it and overwrite a real photograph. */
.vce-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px;margin-top:10px}
.vce-g-tile{border:1px solid var(--vce-line);border-radius:12px;padding:10px;background:var(--vce-card)}
.vce-g-tile.pending{border-color:var(--vce-teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--vce-teal) 22%,transparent)}
.vce-g-pic{position:relative;width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--vce-chip);display:flex;align-items:center;justify-content:center}
.vce-g-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vce-g-pic span{font-size:11px;color:var(--vce-muted);text-align:center;padding:0 6px}
.vce-g-pic.empty{border:1px dashed var(--vce-line)}
.vce-g-pic.bad{border:1px solid var(--vce-amber);background:color-mix(in srgb,var(--vce-amber) 12%,transparent)}
.vce-g-pic.bad span{color:var(--vce-amber);font-weight:600}
/* VC-GALLERY-3: the picture is Amazon's, not ours. A corner chip ON the
   photograph, because the tile shows a real image and the one thing a person
   must not misread is whose it is. Positioned, so it overrides the centred
   placeholder-text rule above rather than inheriting it. */
.vce-g-pic .vce-g-whose{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-size:9.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;text-align:center;color:#fff;background:rgba(15,39,64,.72)}
.vce-g-name{font-size:12px;font-weight:600;margin-top:8px}
.vce-g-key{font-size:10.5px;margin-top:2px;word-break:break-all}
.vce-g-key code{font-size:10px}
.vce-g-hint{font-size:10.5px;margin-top:2px}
.vce-g-pend{font-size:10.5px;margin-top:4px;color:var(--vce-teal);font-weight:600}
.vce-g-act{margin-top:8px}
/* VC-GALLERY-2: the three slots Amazon exposes through NO API. They borrow the
   locked trio's language (the chip ground and the padlock), and they are not a
   fourth STATE of a readable slot — they carry no picture, no control and no
   claim about whether the slot is filled, because RMS cannot see them at all. */
.vce-g-tile.locked{background:var(--vce-chip);border-style:dashed}
.vce-g-pic.locked{border:1.5px solid var(--vce-line-strong);background:transparent}
.vce-g-pic.locked span{font-weight:700;letter-spacing:.04em;color:var(--vce-muted)}
.vce-g-tile.locked .vce-g-name{color:var(--vce-muted)}
.vce-g-act a.vce-btn{display:inline-block;text-decoration:none}
/* VC-SUBS-1: selecting submission rows for deletion. The danger button borrows
   the module's red token rather than introducing a colour — deleting evidence
   should look like what it is. */
.vce-subpick{width:34px;text-align:center}
.vce-t tr.picked{background:var(--vce-blue-bg)}
.vce-btn.vce-danger{background:var(--vce-red-bg);color:var(--vce-red);border:1.5px solid var(--vce-red)}

/* VC4: bulk selection + queue */
.vce-selbox{margin-right:6px;vertical-align:middle;accent-color:var(--vce-teal)}
.vce-bulkbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1.5px solid var(--vce-teal);background:var(--vce-blue-bg);border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:12.5px}
.vce-bulkprog{border:1.5px solid var(--vce-line);border-radius:12px;padding:8px 12px;margin-top:4px;max-height:300px;overflow-y:auto}
.vce-bulkrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0;font-size:12.5px}
.vce-bulkrow + .vce-bulkrow{border-top:1px solid var(--vce-line)}
.vce-bulksku{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* VC-FIX-1 — the schema panel's product-type picker. flex-wrap carries it on
   narrow screens, so the ONE media block below needs no new rule for it. */
.vce-skpick{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vce-skpick input{flex:1 1 200px;min-width:0;border:1.5px solid var(--vce-line-strong);border-radius:9px;padding:7px 10px;font-size:12.5px;background:var(--vce-card);color:var(--vce-ink)}

/* Status grid */
.vce-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.vce-page .vce-grid .vce-card + .vce-card{margin-top:0}
.vce-kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--vce-line);font-size:12.5px;align-items:center}
.vce-kv:first-of-type{border-top:none}
.vce-kv code{font-size:12px;color:var(--vce-ink)}
.vce-st-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px}

/* ═══ THE ONE RESPONSIVE BLOCK — keep this the LAST @media in the file ═══ */
@media (max-width:1180px){
  .vce-wrap{padding:18px 14px 70px}
  .vce-cols{display:none}
  .vce-row{grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px 14px}
  .vce-row .vce-cell-label{display:block}
  .vce-row > div{min-width:0}
  .vce-m-foot{flex-direction:column;align-items:stretch}
  .vce-search{max-width:none}
  .vce-fields{flex-direction:column}
  .vce-locked{flex-direction:column}
  /* VC3 */
  .vce-f{flex:1 1 130px}
  .vce-f input,.vce-f select,.vce-f.wide input,.vce-f.wide select{width:100%}
  .vce-presubmit-box{max-width:none}
  .vce-t{min-width:640px}   /* the WRAPPER scrolls; the page never does */
  /* VC4 — the prototype's own mobile rule for the diff rows, verbatim */
  .vce-d-row{grid-template-columns:1fr;gap:2px}
  .vce-bulkbar{font-size:12px}
}