/* KATE Scraper Platform — operator UI.
 *
 * One hand-written stylesheet, no build step. Aims: dense but readable at
 * 1280px, everything scannable at a glance, status carried by colour *and*
 * text (never colour alone). Design tokens live in :root so a colour is
 * defined exactly once.
 */

:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-alt: #fafbfc;
  --border: #e2e5ea;
  --border-strong: #cfd4dc;
  --text: #1b1f24;
  --text-soft: #4a5158;
  --muted: #7a828c;

  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-soft: #eff4ff;

  --ok-fg: #146c2e;
  --ok-bg: #e6f4ea;
  --ok-border: #b7e0c3;

  --bad-fg: #b3261e;
  --bad-bg: #fdecea;
  --bad-border: #f4c4c0;

  --warn-fg: #8a5300;
  --warn-bg: #fdf3e0;
  --warn-border: #f0dcb4;

  --idle-fg: #5b636c;
  --idle-bg: #eef0f3;
  --idle-border: #dcdfe4;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

/* The login page has no chrome, so the <main> itself does the centring. */
body.centred { min-height: 100vh; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 22px; font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
h3 { font-size: 13px; font-weight: 600; margin: 18px 0 6px; color: var(--text-soft); }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

code, .mono, pre { font-family: var(--mono); font-size: 0.92em; }
code {
  background: var(--idle-bg);
  border-radius: 3px;
  padding: 1px 4px;
}

.muted { color: var(--muted); }
.sub { color: var(--muted); font-size: 12px; }
.strong { font-weight: 600; }
.strike { text-decoration: line-through; }
.wrap { overflow-wrap: anywhere; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.inline { display: inline; }
.req { color: var(--muted); font-weight: 400; font-size: 11px; }
.warn-text { color: var(--warn-fg); font-size: 12px; }
.err-text { color: var(--bad-fg); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 6px 20px;
  min-height: 48px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.brandmark {
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brandmark:hover { text-decoration: none; color: var(--accent); }

.topnav { display: flex; gap: 4px; }
.topnav a {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
}
.topnav a:hover { background: var(--idle-bg); text-decoration: none; }
.topnav a.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 500; }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.whoami { color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- page */
.page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 20px 64px;
}
.page-login {
  padding: 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.page-login .flashes { width: 340px; max-width: 100%; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.page-sub { color: var(--muted); font-size: 13px; margin: 0; }
.page-head-actions { display: flex; align-items: center; gap: 8px; padding-top: 4px; }

.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.crumbs .sep { padding: 0 4px; color: var(--border-strong); }

/* min() keeps a column from forcing the page wider than the viewport when the
 * window is narrower than the track's ideal minimum. */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}

/* ---------------------------------------------------------------- cards */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}
.cols > .card { margin-bottom: 0; }
.card-sub { color: var(--muted); font-size: 12px; margin: 0 0 12px; }
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.card-head h2 { margin: 0; }
.card-error { border-color: var(--bad-border); background: #fffbfa; }
.table-wrap { padding: 16px 0 0; overflow-x: auto; }
.table-wrap > h2, .table-wrap > p { padding: 0 16px; }
.empty { text-align: left; }
.empty h2 { font-size: 16px; }

.live-card { padding: 12px 16px; }

/* ---------------------------------------------------------------- tables */
table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.grid th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--panel-alt);
}
table.grid th.num { text-align: right; }
table.grid td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover td { background: var(--panel-alt); }
table.grid .col-name { min-width: 190px; }
table.grid .col-actions { text-align: right; white-space: nowrap; }
table.grid .col-problem { max-width: 320px; }
table.grid .col-problem .err-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.grid-tight { font-size: 12px; }
table.grid-tight td, table.grid-tight th { padding: 5px 8px; }

tr.row-editing td { background: var(--accent-soft) !important; }
tr.detail-row td { padding-top: 0; border-bottom: 1px solid var(--border); }
tr.detail-row:hover td { background: transparent; }

.counts { display: inline-flex; gap: 6px; color: var(--text-soft); font-size: 12px; }

.expected-list { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.expected-item {
  font-size: 12px;
  color: var(--text-soft);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

/* ---------------------------------------------------------------- pills */
.pill, .chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  padding: 0 7px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: baseline;
}
.chip { font-weight: 500; }

.pill-completed, .chip-passed, .pill-check-pass {
  color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border);
}
.pill-failed, .chip-failed, .pill-check-fail {
  color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-border);
}
.pill-running, .chip-partial, .pill-check-missing {
  color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border);
}
.pill-pending, .pill-cancelled, .pill-muted, .pill-unknown,
.chip-muted, .chip-skipped {
  color: var(--idle-fg); background: var(--idle-bg); border-color: var(--idle-border);
}

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
.dot-running { background: #d18b00; animation: pulse 1.6s ease-in-out infinite; }
.dot-pending { background: var(--muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .dot-running { animation: none; } }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--panel-alt); text-decoration: none; }
.btn:active { background: var(--idle-bg); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--panel); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-primary[disabled]:hover { background: var(--accent); }

.btn-danger { color: var(--bad-fg); border-color: var(--bad-border); }
.btn-danger:hover { background: var(--bad-bg); }

.btn-quiet { border-color: transparent; background: transparent; color: var(--text-soft); }
.btn-quiet:hover { background: var(--idle-bg); }

.btn-sm { font-size: 12px; padding: 3px 9px; }
.btn-block { width: 100%; text-align: center; padding: 8px 12px; }

.actions { display: flex; gap: 8px; align-items: center; }

/* ---------------------------------------------------------------- forms */
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px;
}

.field { display: block; }
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 3px;
}
.field-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

input[type="text"], input[type="password"], input[type="number"], textarea, select {
  font: inherit;
  font-size: 13px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; }
.input-tiny { width: 78px; }
.input-narrow { max-width: 150px; }

.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { margin: 0; }
input[type="checkbox"] { accent-color: var(--accent); }
.check-standalone { margin-top: 10px; }

.run-form { display: flex; gap: 6px; align-items: center; }

.kv-editor { width: 100%; border-collapse: collapse; margin: 6px 0 8px; }
.kv-editor th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  padding: 0 6px 4px 0;
}
.kv-editor td { padding: 0 6px 6px 0; vertical-align: top; }
.kv-editor td:last-child { width: 32px; padding-right: 0; }

dl.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 4px 14px; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 12px; }
dl.kv dd { margin: 0; font-size: 13px; }

/* ---------------------------------------------------------------- login */
.login-card {
  width: 340px;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-title { font-size: 17px; margin: 0; }
.login-sub { color: var(--muted); font-size: 13px; margin: -12px 0 0; }
.login-error { margin: 0; }

/* ---------------------------------------------------------------- flashes */
.flashes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 13px;
}
.flash-text { flex: 1; }
.flash-close {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.flash-close:hover { opacity: 1; }
.flash-success { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
.flash-error { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-border); }
.flash-warn { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); }
.flash-info { color: var(--text-soft); background: var(--panel-alt); }

.poll-note { font-size: 12px; color: var(--warn-fg); }

/* ---------------------------------------------------------------- tabs */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
}
.tab {
  padding: 7px 14px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-soft);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px;
}
.tab:hover { background: var(--panel-alt); text-decoration: none; }
.tab.active {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
  font-weight: 600;
}

/* ---------------------------------------------------------------- progress */
.progress { min-width: 200px; flex: 1; }
.progress-inline { max-width: 520px; }
.progress-track {
  height: 6px;
  background: var(--idle-bg);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: #d18b00;
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.progress-block { margin-top: 14px; }
.live-note { font-size: 12px; color: var(--muted); margin-top: 8px; }

.live-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
tr.live-row td { background: var(--warn-bg) !important; padding: 8px 12px; }
tr.live-row[hidden] { display: none; }

/* ---------------------------------------------------------------- run page */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
  gap: 12px 18px;
}
.stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}
.stat-value { font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.options-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.err-block {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--bad-fg);
  overflow-wrap: anywhere;
}

.files { list-style: none; margin: 0; padding: 0; }
.files li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.files li:last-child { border-bottom: none; }
.files li.primary a { font-weight: 600; }
.files .num { margin-left: auto; }

.validation-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
details.golden {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
details.golden > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  background: var(--panel-alt);
  font-size: 13px;
}
details.golden > summary::-webkit-details-marker { display: none; }
details.golden.golden-bad > summary { background: var(--bad-bg); }
details.golden.golden-ok > summary { background: var(--ok-bg); }
details.golden table { border-top: 1px solid var(--border); }
tr.check-fail td { background: var(--bad-bg); }
tr.check-missing td { background: var(--warn-bg); }

/* ---------------------------------------------------------------- log */
.log-details > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.logblock {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  background: #1c2128;
  color: #d7dde5;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0;
  max-height: 460px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.card-error .logblock { max-height: 320px; }

/* The container must not inherit pre-wrap, or the newlines between the
 * server-rendered <div class="event"> elements become blank lines. */
.events { display: block; white-space: normal; }
.event { display: flex; gap: 10px; align-items: baseline; }
.event-ts { color: #7d8896; flex: 0 0 auto; }
.event-level {
  flex: 0 0 46px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #7d8896;
}
.event-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.event-warn .event-level, .event-warn .event-msg { color: #f0b757; }
.event-error .event-level, .event-error .event-msg { color: #ff8f85; }
.event-stage .event-level, .event-stage .event-msg { color: #7fc8ff; }
.event-result .event-level, .event-result .event-msg { color: #86e0a3; }

/* ---------------------------------------------------------------- markdown */
.markdown { font-size: 13.5px; line-height: 1.62; max-width: 860px; }
.markdown h1 { font-size: 19px; margin: 20px 0 8px; }
.markdown h2 { font-size: 16px; margin: 22px 0 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.markdown h3 { font-size: 14px; margin: 16px 0 6px; color: var(--text); }
.markdown h1:first-child, .markdown h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.markdown p { margin: 0 0 10px; }
.markdown ul, .markdown ol { margin: 0 0 10px; padding-left: 22px; }
.markdown li { margin-bottom: 3px; }
.markdown blockquote {
  margin: 0 0 12px;
  padding: 6px 12px;
  border-left: 3px solid var(--border-strong);
  background: var(--panel-alt);
  color: var(--text-soft);
}
.markdown pre {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.markdown pre code { background: none; padding: 0; }
.markdown table {
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 12.5px;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.markdown th, .markdown td {
  border: 1px solid var(--border);
  padding: 5px 9px;
  text-align: left;
  vertical-align: top;
}
.markdown th { background: var(--panel-alt); font-weight: 600; }
.markdown hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.md-fallback { white-space: pre-wrap; }

/* ================================================================ review UI
 * Everything below serves the manager's weekly pass: the brand cards, the runs
 * list, and the four panels of the run page (changes / catalog / validation /
 * preview). Tones reuse the tokens above so "bad" is the same red everywhere.
 */

/* ---------------------------------------------------------------- tones */
.chip-ok, .chip-passed { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
.chip-warn, .chip-changes, .chip-partial { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); }
.chip-bad, .chip-failed { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-border); }
.chip-info { color: var(--accent-dark); background: var(--accent-soft); border-color: #cfe0ff; }
.pill-changes { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); }

/* NEEDS REVIEW is the one badge allowed to shout. */
.chip-review {
  color: #fff;
  background: #b3261e;
  border-color: #8c1d18;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pill-check-changed { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); }
.pill-check-new_in_scrape { color: var(--accent-dark); background: var(--accent-soft); border-color: #cfe0ff; }
tr.check-changed td { background: var(--warn-bg); }
tr.check-new_in_scrape td { background: var(--accent-soft); }

.vsum { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; }
.vsum-part { white-space: nowrap; }
.vsum-ok { color: var(--ok-fg); }
.vsum-warn { color: var(--warn-fg); }
.vsum-bad { color: var(--bad-fg); font-weight: 600; }
.vsum-info { color: var(--accent-dark); }

/* ---------------------------------------------------------------- brand cards */
.brand-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}
.brand-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 8px; }
.brand-card-review { border-left: 3px solid var(--bad-fg); }
.brand-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.brand-card-head h2 { font-size: 16px; }
.brand-card-flags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.brand-line {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.brand-line-body { min-width: 0; overflow-wrap: anywhere; }
.found-line { font-variant-numeric: tabular-nums; }
.catalog-line.catalog-ok { color: var(--ok-fg); }
.catalog-line.catalog-warn { color: var(--warn-fg); }
.catalog-line.catalog-bad { color: var(--bad-fg); font-weight: 600; }
.brand-live { margin-top: 6px; }
.brand-live[hidden] { display: none; }
.brand-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- filters */
.filterbar {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12px 16px;
}
.filter-field { min-width: 180px; }
.filter-check { padding-bottom: 6px; }
.filterbar .actions { margin-left: auto; padding-bottom: 2px; }

.pager {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 12px 0 4px;
}

table.grid tr.clickable { cursor: pointer; }
/* "178 products / 21 363 rows" must not wrap into four lines in a narrow column. */
.runs-table td.num { white-space: nowrap; }
table.grid tr.row-review td { background: #fff7f6; }
table.grid tr.row-review:hover td { background: #ffeeec; }
.col-attention { max-width: 260px; }
.col-attention .chip { margin: 0 3px 3px 0; }

/* ---------------------------------------------------------------- run page */
.card-review {
  border-color: var(--bad-border);
  background: var(--bad-bg);
  color: var(--bad-fg);
}
.card-review h2 { color: var(--bad-fg); }
.card-reviewed { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.reasons { margin: 0; padding-left: 20px; font-size: 13px; }
.reasons li { margin-bottom: 2px; }

.card-warn { border-color: var(--warn-border); background: #fffdf7; }
.card-alarm { border-color: var(--bad-border); background: #fff6f5; box-shadow: 0 0 0 2px var(--bad-bg); }
.alarm-text {
  color: var(--bad-fg);
  font-weight: 600;
  background: var(--bad-bg);
  border: 1px solid var(--bad-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-top: 10px;
}

.cols-tight { gap: 12px; margin-top: 10px; }

.diff-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
  gap: 10px 16px;
  margin-bottom: 6px;
}
.diff-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--panel-alt);
}
.diff-stat .stat-label { display: block; text-transform: none; letter-spacing: 0; font-size: 11px; }
.diff-num { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; display: block; }
.diff-hot { border-color: var(--warn-border); background: var(--warn-bg); }
.diff-hot .diff-num { color: var(--warn-fg); }
.diff-bad { border-color: var(--bad-border); background: var(--bad-bg); }
.diff-bad .diff-num { color: var(--bad-fg); }

.keylist { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.keychip {
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-alt);
}
.keychip-new { color: var(--accent-dark); background: var(--accent-soft); border-color: #cfe0ff; }
.keychip-gone { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-border); }

.table-scroll { overflow-x: auto; max-width: 100%; }
table.difftable { table-layout: fixed; }
/* Fixed widths so a product whose price moved (empty field columns) lines up with
 * one whose description changed, instead of the price sliding to mid-table. */
table.difftable th:nth-child(1) { width: 18%; }
table.difftable th:nth-child(2) { width: 15%; }
table.difftable th:nth-child(3) { width: 15%; }
table.difftable td { vertical-align: top; }
table.difftable tr.diff-first td { border-top: 1px solid var(--border-strong); }
table.difftable tr.diff-cont td { border-bottom: none; }
.old-value { color: var(--muted); max-width: 320px; }
.new-value { color: var(--text); max-width: 320px; }
/* Struck through only where the old value really is gone (the run-to-run diff).
 * In the validation and golden-vs-scrape tables the left column is what the shop
 * still expects, so striking it would read as "deleted" and mean the opposite. */
.difftable .old-value { text-decoration: line-through; }
.arrow { color: var(--muted); padding: 0 3px; }
.price-old { color: var(--muted); text-decoration: line-through; }
.price-new { font-weight: 600; }
.delta-up { color: var(--bad-fg); }
.delta-down { color: var(--ok-fg); }
.delta-set { color: var(--accent-dark); }
.delta-cleared { color: var(--warn-fg); }

.catalog-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.catalog-big { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.catalog-big.catalog-ok { color: var(--ok-fg); }
.catalog-big.catalog-warn { color: var(--warn-fg); }
.catalog-big.catalog-bad { color: var(--bad-fg); }
.catalog-of { color: var(--text-soft); }
.progress-fill.fill-ok { background: #2e9e5b; }
.progress-fill.fill-warn { background: #d18b00; }
.progress-fill.fill-bad { background: var(--bad-fg); }

.filterchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filterchip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  background: var(--panel);
}
.filterchip:hover { background: var(--panel-alt); text-decoration: none; }
.filterchip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filterchip-count { font-variant-numeric: tabular-nums; opacity: 0.75; }
.summary-link { margin-left: auto; }
.pad { padding: 8px 10px; }

/* ---------------------------------------------------------------- preview */
/* Deliberately shop-like rather than admin-like: the point of this panel is to
 * look enough like the storefront that a mis-mapped column is obvious. */
.pdp {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(260px, 1fr) minmax(260px, 380px);
  gap: 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
  margin-bottom: 18px;
}
.pdp-gallery { display: flex; flex-direction: column; gap: 6px; }
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pdp-main { aspect-ratio: 1 / 1; }
.ph-empty, .img-broken { background: repeating-linear-gradient(45deg, #f4f5f7, #f4f5f7 6px, #ebedf0 6px, #ebedf0 12px); }
.ph-empty span, .ph-empty-text { color: var(--muted); font-size: 11px; }
.img-broken::after {
  content: "image failed";
  color: var(--bad-fg);
  font-size: 10px;
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
}
.thumbs { display: flex; gap: 5px; flex-wrap: wrap; }
.thumb { width: 46px; height: 46px; }

/* ---- shop (golden) images: brand goldens tab + run Validation panel ---------
   Fixed boxes on purpose: the frame reserves its space before the remote image
   arrives, so a slow or 404-ing media host never reflows the table it sits in. */
table.grid .col-thumb { width: 62px; padding: 4px 6px; }
.thumb-cover { flex: 0 0 auto; }
.thumb-cover img { object-fit: cover; }
a.thumb-cover:hover { border-color: var(--accent); }
.imgstrip { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin: 4px 0; }
.imgstrip-wrap { margin-bottom: 6px; }
.imgstrip-wrap > summary { cursor: pointer; }
.img-compare { display: flex; flex-wrap: wrap; gap: 4px 28px; padding: 6px 10px 2px; }
.img-compare-side { min-width: 0; }
.img-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1px 4px;
  font-size: 9px;
  line-height: 1.4;
  background: var(--panel-alt);
  border-top-right-radius: var(--radius-sm);
  color: var(--muted);
}

.pdp-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pdp-cats { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pdp-title { font-size: 19px; margin: 0; color: var(--text); }
.pdp-price { font-size: 18px; display: flex; align-items: baseline; gap: 6px; }
.price-value { font-weight: 700; }
.price-request { color: var(--warn-fg); font-size: 14px; font-weight: 600; }
.pdp-selectors { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0; }
.selector { display: flex; flex-direction: column; }
.selector-value {
  font-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  background: var(--panel);
}
.pdp-desc {
  font-size: 13px;
  color: var(--text-soft);
  max-height: 190px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.attr-table { background: var(--panel); }
.attr-table th.attr-name {
  text-align: left;
  width: 40%;
  background: var(--panel);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--text-soft);
  white-space: normal;
}
.docs { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.doc {
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  background: var(--panel);
}
.pdp-golden { min-width: 0; border-left: 1px solid var(--border); padding-left: 16px; }
.pdp-golden h3 { margin-top: 0; }
.compare-table { background: var(--panel); }
.compare-table td { max-width: 220px; overflow-wrap: anywhere; }

.swatches { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--panel-alt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.swatch img { width: 100%; height: 100%; object-fit: cover; }
.swatch-sm { width: 18px; height: 18px; }
.swatches-lg .swatch { width: 32px; height: 32px; }
.swatch-blank { font-size: 9px; color: var(--muted); }

.plp {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 12px;
}
.plp-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}
.plp-card:hover { border-color: var(--border-strong); text-decoration: none; box-shadow: var(--shadow); }
.plp-card-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.plp-image { aspect-ratio: 4 / 3; }
.plp-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plp-price { font-size: 13px; font-variant-numeric: tabular-nums; }
.plp-foot { display: flex; gap: 6px; align-items: baseline; justify-content: space-between; margin-top: auto; }

/* ---------------------------------------------------------------- editors */
.sched-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sched-row select { width: auto; min-width: 150px; }
.sched-row input[type="time"] { width: auto; }
.sched-row [hidden] { display: none; }
input[type="time"], input[type="date"] {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
}

.code-area {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  tab-size: 2;
}
.errbox, .warnbox {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.errbox { color: var(--bad-fg); background: var(--bad-bg); border: 1px solid var(--bad-border); }
.warnbox { color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-border); }
.errbox ul, .warnbox ul { margin: 6px 0 0; padding-left: 20px; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 1100px) {
  .pdp { grid-template-columns: minmax(180px, 240px) 1fr; }
  .pdp-golden { grid-column: 1 / -1; border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 12px; }
}

@media (max-width: 900px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .cols { grid-template-columns: 1fr; }
  .topbar-inner { gap: 12px; }
  .brand-cards { grid-template-columns: 1fr; }
  .pdp { grid-template-columns: 1fr; }
  .filterbar .actions { margin-left: 0; }
  .brand-line { grid-template-columns: 74px 1fr; }
}


/* ---------------------------------------------------------------- nav search */
.navsearch { position: relative; flex: 1 1 240px; max-width: 380px; min-width: 160px; }
.navsearch input[type="search"] {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.navsearch input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.navsearch-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
.navsearch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.navsearch-row:last-child { border-bottom: 0; }
.navsearch-row:hover, .navsearch-row.is-active { background: var(--accent-soft); text-decoration: none; }
.navsearch-row img, .navsearch-noimg {
  width: 32px; height: 32px; flex: 0 0 32px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--idle-bg);
  border: 1px solid var(--border);
}
.navsearch-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.navsearch-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navsearch-key { font-family: var(--mono); font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navsearch-brand { flex: 0 0 auto; }
.navsearch-empty { padding: 10px; color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- product page */
.pdp-cover {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.pdp-group {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 14px 0 4px;
}
.pdp-label { text-align: left; width: 180px; font-weight: 500; color: var(--text-soft); vertical-align: top; }
.pdp-list { margin: 0; padding-left: 16px; }
.pdp-list li { font-size: 12px; }

/* ---------------------------------------------------------------- timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item { border-left: 2px solid var(--border-strong); padding: 0 0 14px 12px; margin-left: 6px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.timeline-when { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- review queue */
.review-pane .card-head { align-items: flex-start; }
.review-nav { display: flex; align-items: center; gap: 8px; }
.review-table { table-layout: fixed; width: 100%; }
.review-field { width: 180px; }
.review-half { width: 30%; }
.review-decide { width: 220px; }
.review-decide .check { display: block; font-size: 12px; margin-bottom: 2px; }
.review-edit {
  width: 100%;
  margin-top: 4px;
  font-size: 12px;
  font-family: var(--mono);
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.review-actions { align-items: center; gap: 8px; padding: 12px 0 0; flex-wrap: wrap; }
.review-table .old-value, .review-table .new-value { vertical-align: top; font-size: 12px; }

/* ---------------------------------------------------- category mapping tab */
.mapping-grid td { vertical-align: top; }
.mapping-grid .col-targets { min-width: 320px; }
.target-editor { display: flex; flex-direction: column; gap: 4px; }
.target-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; align-items: center; }
.target-row input { width: 100%; min-width: 220px; }
.target-row .target-display { grid-column: 1 / -1; }
.mapping-row.mapping-unmapped td:first-child { border-left: 3px solid var(--warn-border); }
.mapping-row.mapping-disabled td { color: var(--muted); }
.input-file { font-size: 12px; max-width: 220px; }
a.chip { text-decoration: none; }

/* ------------------------------------------------- review summary (run page)
 * The first screen: one verdict sentence, then counters that say what KIND of
 * thing each number is and jump to the section that lists it. */
.card-summary { border-left: 4px solid var(--border-strong); }
.card-summary.summary-bad { border-left-color: var(--bad-fg); }
.card-summary.summary-warn { border-left-color: #d18b00; }
.card-summary.summary-ok { border-left-color: #2e9e5b; }
.summary-limited { font-size: 13px; color: var(--text-soft); margin: 0 0 6px; }
.summary-verdict { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.verdict-bad { color: var(--bad-fg); }
.verdict-warn { color: var(--warn-fg); }
.verdict-ok { color: var(--ok-fg); }
.summary-reviewed { margin-top: 10px; }
.counters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 8px 10px;
}
.counter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-alt);
  min-width: 0;
}
.counter-main { color: inherit; display: flex; align-items: baseline; gap: 6px; }
.counter-main:hover { text-decoration: none; }
.counter-main:hover .counter-label { text-decoration: underline; }
.counter-num { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.counter-label { font-size: 13px; font-weight: 600; }
.counter-kind { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.counter-queue { font-size: 12px; margin-top: 2px; }
.counter-bad { border-color: var(--bad-border); background: var(--bad-bg); }
.counter-bad .counter-num, .counter-bad .counter-label { color: var(--bad-fg); }
.counter-warn { border-color: var(--warn-border); background: var(--warn-bg); }
.counter-warn .counter-num, .counter-warn .counter-label { color: var(--warn-fg); }
.counter-info { border-color: #cfe0ff; background: var(--accent-soft); }
.counter-info .counter-num, .counter-info .counter-label { color: var(--accent-dark); }
.counter-muted .counter-num, .counter-muted .counter-label { color: var(--idle-fg); }

/* ---------------------------------------------------- before -> after tables */
table.beforeafter .old-value, table.beforeafter .new-value { max-width: 360px; }
table.pricetable td.num { white-space: nowrap; }
table.fieldtable th:nth-child(3), table.fieldtable th:nth-child(4) { width: 26%; }
tr.row-cosmetic td { background: var(--panel-alt) !important; color: var(--text-soft); }
.plinks { display: inline-flex; gap: 6px; flex-wrap: wrap; font-size: 11px; font-weight: 400; margin-left: 4px; }
.plink { color: var(--accent); white-space: nowrap; }
.plist { list-style: none; margin: 0; padding: 0; }
.plist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.plist li:last-child { border-bottom: none; }
.failure { margin-bottom: 12px; }
.failure-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 13px; }
.setdiff { display: inline-flex; flex-wrap: wrap; gap: 3px 4px; }
.setdiff .keychip { font-size: 11px; }

/* Missing goldens: collapsed groups of key chips, one per reason. */
details.mgroup {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
details.mgroup > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 10px;
  cursor: pointer;
  background: var(--panel-alt);
  font-size: 13px;
}
details.mgroup > summary::-webkit-details-marker { display: none; }
details.mgroup.mgroup-bad > summary { background: var(--bad-bg); }
details.mgroup > .plist, details.mgroup > .mgroup-body { padding: 6px 10px; }
.mgroup-body + .mgroup-body { border-top: 1px solid var(--border); }

/* Passing fields of one golden sit behind a click. */
details.okfields > summary { cursor: pointer; padding: 4px 10px; }
tr.check-pass td { background: var(--panel); }

/* Clipped long values. */
.clip { display: inline; }
.linklike {
  border: none;
  background: none;
  padding: 0 0 0 4px;
  font: inherit;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}
.linklike:hover { text-decoration: underline; }
.vsum-muted { color: var(--muted); }

/* ---- run page: field changes grouped by product, category + image diffs ---- */
.fgroup { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 0 12px; overflow: hidden; }
.fgroup-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
               padding: 8px 12px; background: var(--bg-soft, #f5f6f8); border-bottom: 1px solid var(--border); }
.fgroup table { margin: 0; }
.fcol-field { width: 170px; }
.catdiff div { padding: 1px 0; }
.cat-kept { color: var(--muted); }
.cat-removed { color: #b42318; text-decoration: line-through; }
.cat-added { color: #067647; font-weight: 600; }
table.beforeafter .catdiff.old-value { text-decoration: none; }
.imgdiff .imgstrip { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.imgdiff .thumb { width: 56px; height: 56px; object-fit: cover; }
/* review queue: widths that add up, and headers that wrap instead of colliding */
.review-field { width: 16%; }
.review-half { width: 30%; }
.review-decide { width: 24%; }
.review-table th { white-space: normal; overflow-wrap: anywhere; }
.variant-scroll { max-height: 420px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.variant-table { max-width: 640px; }
.row-muted td { opacity: .55; }

/* ---- decide on the run page ------------------------------------------- */
.decide-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--panel-alt); }
.decide-bar .decide-stats b { font-weight: 600; color: var(--text); }
.decide-head { width: 190px; }
td.decide { white-space: nowrap; vertical-align: top; }
.decide-btns { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: middle; }
.dbtn { font: inherit; font-size: 12px; line-height: 1; padding: 4px 7px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text-soft); }
.dbtn:hover { background: var(--idle-bg); color: var(--text); }
.dbtn-approve.active { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
.dbtn-reject.active { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-border); }
.dbtn-edit.active { color: var(--accent-dark); background: var(--accent-soft); border-color: #cfe0ff; }
.chip-decision { vertical-align: middle; }
.chip-d-pending { color: var(--muted); background: var(--panel-alt); border-color: var(--border); }
.chip-d-approved { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-border); }
.chip-d-rejected { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-border); }
.chip-d-edited { color: var(--accent-dark); background: var(--accent-soft); border-color: #cfe0ff; }
.decide-note { display: block; margin-top: 3px; white-space: normal; overflow-wrap: anywhere; max-width: 180px; }
.decide-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.plist-decide li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
[data-decide-row].saving { opacity: 0.6; }
[data-decide-row].save-error .decide-note { color: var(--bad-fg); }
.editable { cursor: text; }
.editable:hover [data-value] { outline: 1px dashed var(--border); outline-offset: 2px; border-radius: 2px; }
.inline-edit { font: inherit; font-size: 12px; width: 100%; min-width: 120px; box-sizing: border-box;
  padding: 3px 6px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--panel); }
textarea.inline-edit { min-height: 84px; resize: vertical; font-family: inherit; }
td.num .inline-edit { text-align: right; max-width: 120px; }

/* ---- categories: mapping overview + products view ---------------------- */
.subnav { display: flex; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--border); }
.subtab { padding: 8px 12px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--text-soft); text-decoration: none; }
.subtab:hover { background: var(--panel-alt); text-decoration: none; }
.subtab.active { color: var(--text); background: var(--panel); border-color: var(--border); font-weight: 600; }
.maplist { list-style: none; margin: 0; padding: 0; }
.maprow { display: grid; grid-template-columns: minmax(180px, 1fr) 28px minmax(240px, 2fr) auto;
  gap: 4px 12px; align-items: start; padding: 10px 16px; border-top: 1px solid var(--border); }
.maprow:first-child { border-top: none; }
.maprow-unmapped .map-src { border-left: 3px solid var(--warn-border); padding-left: 8px; margin-left: -11px; }
.maprow-disabled { color: var(--muted); }
.map-arrow { color: var(--muted); font-size: 18px; line-height: 1; text-align: center; padding-top: 2px; }
.map-arrow-col { width: 28px; }
.map-dst { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.catchip { display: inline-flex; flex-direction: column; gap: 1px; padding: 4px 8px; margin: 1px 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-alt); font-size: 12px; }
.catchip-unknown { border-color: var(--warn-border); background: var(--warn-bg); }
.catchip-shop { background: var(--panel); }
.catprod td { vertical-align: top; }
.keychips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0 0; }
@media (max-width: 800px) {
  .maprow { grid-template-columns: 1fr; }
  .map-arrow { text-align: left; }
}

/* A copy-me command line on the Settings page. */
.codeblock { padding: 10px 12px; margin: 6px 0 10px; font-size: 12px; line-height: 1.5;
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ===================================================== onboarding a new brand
   The wizard (/brands/new), the brand's Setup tab and the file lists. Built out
   of the same primitives as everything else — .card, .chip, .btn, .plist — so a
   page that did not exist yesterday does not look like it. */

.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  padding: 10px 12px;
}
.step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-soft);
  border: 1px solid transparent;
}
a.step:hover { background: var(--panel-alt); text-decoration: none; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--idle-bg);
  color: var(--idle-fg);
  font-size: 11px;
  font-weight: 600;
  flex: 0 0 auto;
}
.step-done { color: var(--ok-fg); }
.step-done .step-num { background: var(--ok-bg); color: var(--ok-fg); }
.step-current {
  background: var(--accent-soft);
  border-color: #cfe0ff;
  color: var(--accent-dark);
  font-weight: 600;
}
.step-current .step-num { background: var(--accent); color: #fff; }
.step-todo { color: var(--muted); }

.wizard-actions { flex-wrap: wrap; }

/* One question: label, widget, and the `why` under it. The hint is the point of
   the whole form, so it is never smaller than the other hints on the site. */
.qfield + .qfield { margin-top: 2px; }
.qfield-bad > .field-label { color: var(--bad-fg); }
.qfield-bad input[type="text"], .qfield-bad textarea, .qfield-bad select {
  border-color: var(--bad-border);
  background: #fffbfa;
}
.qmulti { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 2px 0; }
.qmulti .check { font-size: 12.5px; }
.qexample { display: block; color: var(--text-soft); font-style: italic; }

/* The single next action, in both the ways it can be taken. */
.card-next { border-left: 4px solid var(--accent); }
.nextact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
}
.nextact-compact { padding: 8px 10px; }
.nextact-body { display: flex; align-items: baseline; gap: 8px; flex: 1 1 320px; min-width: 0; }
.nextact-what { font-size: 13.5px; overflow-wrap: anywhere; }
.nextact-stage { flex: 0 0 auto; text-transform: lowercase; }
.nextact-ways { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nextact-tool {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 7px;
  color: var(--text-soft);
  overflow-wrap: anywhere;
  user-select: all;                 /* one click selects the whole call to copy */
}

/* The stage checklist. */
.stagelist { list-style: none; margin: 0; padding: 0; }
.stagerow {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.stagerow:last-child { border-bottom: none; }
.stagemark {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.stagerow-done .stagemark { color: var(--ok-fg); }
.stagerow-current .stagemark { color: var(--accent); }
.stagerow-current { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 8px; }
.stagename { font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.stagerow-todo .stagename { font-weight: 500; color: var(--text-soft); }

/* Uploaded files: what it is, why it was sent, and where a scraper opens it. */
.filelist .filerow { display: flex; flex-direction: column; gap: 2px; }
.filerow-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.filerow-note { color: var(--text-soft); }
.filerow-path { font-size: 11px; color: var(--muted); }
.filerow-foot { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.uploadform {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
.uploadform .field { flex: 1 1 220px; }
.uploadform .actions { flex: 0 0 auto; }

/* Run exports. */
.exportlist .exportrow { display: flex; flex-direction: column; gap: 2px; }
.exportrow-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.tab-chip { margin-left: 6px; text-transform: lowercase; }