/*
 * Store Platform — the calm v3 style Med approved (spec §11, docs/mockups/*):
 * white and grey, near-black text, ONE black button per screen, the store
 * colour only in the small store badge, status = small dot + plain word.
 * No gradients, no coloured boxes. Logical properties only, so Arabic mirrors.
 * Dark: the same calm style with the colours turned around (the one black
 * button becomes the one light button). It follows the computer, or the
 * choice in the name menu (data-theme on <html>: js/theme-boot.js, js/theme.js).
 */

:root {
  --bg: #f4f4f5;
  --surface: #fff;
  --surface-2: #fafafa;
  --line: #e4e4e7;
  --line-soft: #f4f4f5;
  --line-strong: #d4d4d8;
  --text: #18181b;
  --text-2: #3f3f46;
  --soft: #52525b;
  --muted: #63636b; /* smallest text colour: 5.9:1 on white, 5.4:1 on the grey page */
  --faint: #a1a1aa; /* dots, borders, never text */
  --quiet: #71717a; /* quiet words: a secondary choice (Clear), a sub-status */
  --primary: #18181b;
  --primary-hover: #27272a;
  --on-primary: #fff; /* text on the one primary button */
  --backdrop: rgba(24, 24, 27, .35);
  --dot-you: #2563eb;
  --dot-wait: #a1a1aa;
  --dot-ok: #16a34a;
  --dot-bad: #dc2626;
  --dot-warn: #d97706;
  --ok: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-28: 28px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Arabic", "Geeza Pro", sans-serif;
  color-scheme: light;
}

/* Dark colours: the same names, so every rule above and below keeps working.
   Written twice (CSS cannot share them): the computer's dark mode unless
   "Light" is chosen, and "Dark" chosen. Small text stays readable:
   --muted #a1a1aa is 6.9:1 on the dark surface. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0f11;
    --surface: #18181b;
    --surface-2: #1f1f23;
    --line: #2e2e33;
    --line-soft: #232327;
    --line-strong: #3f3f46;
    --text: #f4f4f5;
    --text-2: #d4d4d8;
    --soft: #b4b4bc;
    --muted: #a1a1aa;
    --faint: #52525b;
    --quiet: #8e8e96;
    --primary: #f4f4f5;
    --primary-hover: #e4e4e7;
    --on-primary: #18181b;
    --backdrop: rgba(0, 0, 0, .6);
    --dot-you: #60a5fa;
    --dot-wait: #71717a;
    --dot-ok: #22c55e;
    --dot-bad: #f87171;
    --dot-warn: #fbbf24;
    --ok: #4ade80;
    --warn: #fbbf24;
    --bad: #f87171;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f0f11;
  --surface: #18181b;
  --surface-2: #1f1f23;
  --line: #2e2e33;
  --line-soft: #232327;
  --line-strong: #3f3f46;
  --text: #f4f4f5;
  --text-2: #d4d4d8;
  --soft: #b4b4bc;
  --muted: #a1a1aa;
  --faint: #52525b;
  --quiet: #8e8e96;
  --primary: #f4f4f5;
  --primary-hover: #e4e4e7;
  --on-primary: #18181b;
  --backdrop: rgba(0, 0, 0, .6);
  --dot-you: #60a5fa;
  --dot-wait: #71717a;
  --dot-ok: #22c55e;
  --dot-bad: #f87171;
  --dot-warn: #fbbf24;
  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
}

/* Arabic script needs a little more size and line height to read calmly:
   15 px text, small text never under 13 px, the "Test" badge 12 px. */
:lang(ar) body { font-size: 15px; line-height: 1.65; }
:lang(ar) .tag { font-size: 12px; }
:lang(ar) .status-sub { font-size: 13px; }

/* Mixed text (web/js/bidi.js): each piece of product data, money or English
   label inside a sentence is a <bdi class="iso">. In an Arabic line a piece
   with no Arabic in it (.iso-keep) stays one block: never split over two
   lines with Arabic words in between, never reordered. */
[dir="rtl"] .iso-keep { display: inline-block; max-width: 100%; }

/* A page with the sticky footer (.foot): a focused field is scrolled clear of it. */
html:has(#main .foot) { scroll-padding-block-end: 96px; }

/* A focused row is scrolled clear of the sticky bulk bar. */
html.has-bulk { scroll-padding-block-end: 96px; }

[hidden] { display: none !important; }

h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; font-weight: 650; line-height: 1.3; }
h2 { font-size: 14px; font-weight: 650; }

/* Links: no underline until hover (C6). */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Programmatic focus targets (tabindex="-1": <main> after a page move, the
   panel heading) take the focus for screen readers only: no ring, also after
   a keyboard move. Controls (buttons, fields, links) keep theirs. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  inset-inline-start: var(--s-16);
  inset-block-start: -60px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  padding: var(--s-8) var(--s-12);
  z-index: 100;
}
.skip:focus { inset-block-start: var(--s-8); }

.ic { flex: none; vertical-align: -3px; }
[dir="rtl"] .ic-back,
[dir="rtl"] .ic-external { transform: scaleX(-1); }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.small-grey { color: var(--muted); font-size: 13px; margin-block-start: 2px; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.x { color: var(--bad); }
.num { text-align: end; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-8);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: default; }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-size: 14px;
  padding: 12px 20px;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-block { display: flex; width: 100%; }

.btn-quiet {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  padding: 5px 8px;
}
.btn-quiet:hover { background: var(--line-soft); color: var(--text); }

/* The quiet choice next to an action (Clear): grey words, no border, no fill. */
.btn-text {
  border-color: transparent;
  background: none;
  color: var(--quiet);
  font-weight: 500;
}
.btn-text:hover { background: var(--line-soft); color: var(--text); }

.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--soft);
  text-decoration: none;
  cursor: pointer;
}
.link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}
.back:hover { color: var(--text); text-decoration: none; }

.ext { display: inline-flex; align-items: center; gap: var(--s-4); }

/* ------------------------------------------------------------ app shell */

.app {
  max-width: 1240px;
  margin: var(--s-24) auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  min-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}

.top {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: var(--s-12) var(--s-20);
  border-block-end: 1px solid var(--line);
  position: relative;
}

.store {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 5px;
  padding-inline: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: var(--surface);
  font: inherit;
  color: var(--text);
  min-width: 0;
}
button.store { cursor: pointer; }
button.store:hover { background: var(--surface-2); }

.store-mark {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--badge, var(--text));
  color: var(--badge-text, var(--surface));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.store-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store .ic-caret { color: var(--faint); }

.nav { display: flex; gap: var(--s-4); }
.nav a {
  padding: 5px 11px;
  border-radius: 6px;
  color: var(--soft);
  text-decoration: none;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { background: var(--line-soft); color: var(--text); font-weight: 600; }

.top-end {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.menu-wrap { position: relative; }

.menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  z-index: 50;
}
.menu-end { inset-inline-start: auto; inset-inline-end: 0; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: var(--s-8);
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: var(--text);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover, .menu-item[aria-checked="true"], .menu-item[aria-current="true"] { background: var(--line-soft); }
.menu-sub { color: var(--muted); font-size: 13px; }
.menu-sep { border-block-start: 1px solid var(--line-soft); margin-block: var(--s-4); }
.menu-label { color: var(--muted); font-size: 13px; padding: 6px var(--s-8) 2px; }
.menu-langs { display: flex; gap: var(--s-4); padding: 2px var(--s-4) var(--s-4); }
.menu-langs .menu-item { justify-content: center; }
.menu-who { padding: var(--s-8); }
.menu-who b { display: block; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.page { padding: var(--s-24) var(--s-28) var(--s-28); }
.page-narrow { max-width: 1080px; margin-inline: auto; width: 100%; }

.loading { padding: var(--s-28); color: var(--muted); }

.empty {
  color: var(--muted);
  padding: var(--s-20) var(--s-20);
}

/* toast: white, a small dot, plain words; at the bottom centre, just above
   a sticky footer or bulk bar (--toast-lift, set by ui.js announce). The dot:
   grey while something runs, green when done, red when it failed. An error
   stays until it is closed. .toast-flip: moved to the top so it does not
   cover the focused element. */
.toast {
  position: fixed;
  inset-block-start: auto;
  inset-block-end: calc(24px + var(--toast-lift, 0px));
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--s-12) 10px var(--s-16);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  z-index: 200;
}
.toast.toast-flip { inset-block-start: 76px; inset-block-end: auto; }
.toast .dot { align-self: flex-start; margin-block-start: 7px; }
.toast-text { flex: 1; min-width: 0; }
.toast-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-inline-start: var(--s-4);
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.toast-close:hover { background: var(--line-soft); color: var(--text); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot-you { background: var(--dot-you); }
.dot-wait { background: var(--dot-wait); }
.dot-ok { background: var(--dot-ok); }
.dot-bad { background: var(--dot-bad); }
.dot-warn { background: var(--dot-warn); }

/* A quiet word next to a SKU or a name ("Test"): grey outline, no fill, no colour. */
.tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .02em;
  vertical-align: 1px;
  white-space: nowrap;
}
.meta .tag { margin-inline-start: 0; align-self: center; }

.err { padding: var(--s-12) 0; }

/* ------------------------------------------------------------ dialog */

.dlg {
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  padding: 22px;
  width: calc(100% - 32px);
  max-width: 440px;
  color: var(--text);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .14);
}
.dlg-wide { max-width: 560px; }
.dlg::backdrop { background: var(--backdrop); }
.dlg-title { font-size: 16px; margin-block-end: var(--s-12); }
.dlg-body { display: grid; gap: 10px; color: var(--text-2); }
.dlg-body ol { margin: 0; padding-inline-start: var(--s-20); display: grid; gap: var(--s-8); }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--s-8); margin-block-start: var(--s-20); flex-wrap: wrap; }
.dlg code, .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--line-soft);
  border-radius: 4px;
  padding: 1px 5px;
}

.key-row { display: flex; gap: var(--s-8); }
.key-row input { flex: 1; min-width: 0; }
/* Connect add-on: what a download changes, as a status line (dot + words). */
.dlg-warn { display: flex; align-items: baseline; gap: var(--s-8); color: var(--text); }
.dlg-warn .dot { transform: translateY(-1px); }
.dlg-body .link { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------ forms */

.field { display: grid; gap: 6px; }
.field label, .label { font-weight: 600; font-size: 13px; }
.hint { color: var(--muted); font-size: 13px; }

/* One field style: 40 px high, 12 px at the sides, 14 px words (16 px on a
   phone, so it does not zoom in on focus). */
.input, input[type="text"], input[type="password"], input[type="search"], textarea {
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  min-width: 0;
}
.input, input[type="text"], input[type="password"], input[type="search"] { height: 40px; padding: 0 12px; }
textarea { padding: 8px 12px; resize: vertical; min-height: 84px; line-height: 1.45; }
.input:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); }
/* A field that blocks the save: red (orange is only for warnings). */
[aria-invalid="true"] { border-color: var(--bad); }
.input-money { width: 104px; text-align: end; font-variant-numeric: tabular-nums; }
.input-wide { width: 100%; }

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 1; accent-color: var(--muted); }

.field-error { color: var(--bad); font-size: 13px; }

/* ------------------------------------------------------------ login */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-16);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  padding: var(--s-28);
  display: grid;
  gap: var(--s-16);
}
.login-card h1 { font-size: 20px; }
.login-card .btn-primary { width: 100%; }
.login-langs { display: flex; justify-content: center; gap: var(--s-4); }
.login-langs button[aria-pressed="true"] { color: var(--text); font-weight: 600; background: var(--line-soft); }

/* ------------------------------------------------------------ home */

.home h1 { margin-block-end: 18px; }

.notices { border: 1px solid var(--line); border-radius: var(--r-10); margin-block-end: 22px; }
.notice {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12) var(--s-16);
  border-block-start: 1px solid var(--line-soft);
}
.notice:first-child { border-block-start: 0; }
.notice > .dot { align-self: flex-start; margin-block-start: 7px; }
.notice-text { flex: 1; min-width: 0; }
.notice-head { overflow-wrap: anywhere; }
.notice-head b { font-weight: 650; }
.notice-sku { color: var(--muted); }
.notice-text .err { padding-block: var(--s-8) 0; }
.notice-why { color: var(--muted); font-size: 13px; }
.notice-actions { display: flex; align-items: center; gap: var(--s-4); flex: none; }

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-12);
  margin-block-end: 22px;
}
.stat {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  padding: 14px var(--s-16);
  text-decoration: none;
  color: var(--text);
}
.stat:hover { border-color: var(--line-strong); background: var(--surface-2); }
.stat-k { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 7px; }
.stat-v { font-size: 20px; font-weight: 600; margin-block-start: var(--s-4); font-variant-numeric: tabular-nums; }
.stat-v.zero { color: var(--muted); font-weight: 500; }

.two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-16); align-items: start; }
.box { border: 1px solid var(--line); border-radius: var(--r-10); padding: var(--s-16); }
.box h2 { margin-block-end: 10px; }
.box p + p { margin-block-start: var(--s-8); }

.jobs { list-style: none; margin: 0; padding: 0; }
.jobs li { border-block-start: 1px solid var(--line-soft); }
.jobs li:first-child { border-block-start: 0; }
.jobs a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-12);
  padding: var(--s-8) 0;
  text-decoration: none;
  color: var(--text);
}
.jobs a:hover .job-name bdi { text-decoration: underline; text-underline-offset: 2px; }
.job-main { min-width: 0; display: grid; gap: 2px; }
.job-name { overflow-wrap: anywhere; }
.job-name .dot { margin-inline-end: var(--s-8); transform: translateY(-1px); }
.job-word { font-weight: 600; }
.job-problem { color: var(--bad); font-size: 13px; padding-inline-start: var(--s-16); }
.job-age { white-space: nowrap; }
.box .btn-primary { margin-block-start: var(--s-12); padding: 10px var(--s-16); }

/* ------------------------------------------------------------ products */

.products {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  min-height: 480px;
}
.list { padding: 6px 0; min-width: 0; display: flex; flex-direction: column; }
.list-body { flex: 1; }

.tabs {
  display: flex;
  gap: var(--s-4);
  padding: 10px var(--s-20) var(--s-12);
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab {
  padding: 5px 11px;
  border-radius: 6px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--soft);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab[aria-current="page"] { background: var(--line-soft); color: var(--text); font-weight: 600; }
.tab-n { color: var(--muted); margin-inline-start: var(--s-4); font-weight: 400; }

.list-head {
  display: grid;
  grid-template-columns: 20px 40px minmax(0, 1fr) 190px 80px;
  gap: var(--s-12);
  align-items: center;
  padding: 6px var(--s-20);
  color: var(--muted);
  font-size: 13px;
}

.row {
  position: relative;
  display: grid;
  grid-template-columns: 20px 40px minmax(0, 1fr) 190px 80px;
  align-items: center;
  gap: var(--s-12);
  padding: 11px var(--s-20);
  border-block-start: 1px solid var(--line-soft);
  cursor: pointer;
}
.row:hover { background: var(--surface-2); }
.row.sel { background: var(--surface-2); }
.row.sel::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--text);
}
.thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--line);
  object-fit: cover;
  display: block;
}
.thumb-56 { width: 56px; height: 56px; border-radius: var(--r-8); }
.row-name { font-weight: 500; overflow-wrap: anywhere; text-decoration: none; color: var(--text); }
.row-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.sku { color: var(--muted); font-size: 13px; }
.status { display: grid; gap: 1px; color: var(--text-2); min-width: 0; }
/* The dot sits on the first line of the word, also when the word wraps. */
.status-line { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.status-line .dot { margin-block-start: calc((1lh - 8px) / 2); }
.status-word { overflow-wrap: anywhere; }
/* "not started": its own quiet line under the word. */
.status-sub { display: block; font-size: 12px; color: var(--quiet); padding-inline-start: 15px; }
.status-problem { color: var(--bad); font-size: 13px; padding-inline-start: 15px; overflow-wrap: anywhere; }
.since { color: var(--muted); font-size: 13px; text-align: end; white-space: nowrap; }

/* The Archived tab: thumb, the product (who, when, the step), the SKU state, Restore. */
.list-head.list-head-archived,
.row.row-archived { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 260px) auto; }
.row.row-archived { cursor: default; align-items: start; }
.row.row-archived:hover { background: none; }
.archived-main { display: grid; gap: 2px; min-width: 0; }
.archived-meta { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.archived-restore { display: grid; justify-items: end; gap: var(--s-4); max-width: 220px; }
.archived-why { margin: 0; text-align: end; }

.bulk {
  position: sticky;
  inset-block-end: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px var(--s-20);
  border-block-start: 1px solid var(--line);
  background: var(--surface-2);
}
.bulk-count { font-weight: 600; margin-inline-end: auto; }
.bulk-note { flex-basis: 100%; order: 9; }
.bulk-results:not(:empty) { padding: 0 var(--s-20) var(--s-12); }
.bulk-results ul { margin: var(--s-4) 0 0; padding-inline-start: 34px; }
.bulk-results li { color: var(--soft); }

/* side panel */
.side {
  border-inline-start: 1px solid var(--line);
  padding: 22px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.side-empty { color: var(--muted); padding-block-start: var(--s-8); }
.side-back { display: none; margin-block-end: var(--s-12); }
.side-head { display: flex; gap: var(--s-12); align-items: center; margin-block-end: 22px; }
.side-title { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; align-items: center; gap: var(--s-12); padding: 10px 0; color: var(--muted); }
.step-ic {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex: none;
}
.steps li.done { color: var(--muted); }
.steps li.done .step-ic { border-color: var(--dot-ok); color: var(--dot-ok); }
.steps li.now { color: var(--text); font-weight: 600; }
.steps li.now .step-ic { border-color: var(--text); background: var(--text); color: var(--surface); }
.step-sub { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }

/* One problem line everywhere (ui.js problemLine): dot + sentence, what to
   do, small grey details, an optional action. */
.problem { margin-block-start: var(--s-16); padding-block-start: var(--s-12); border-block-start: 1px solid var(--line-soft); }
.problem.err, .form-msg .problem, .side-action .problem { margin-block-start: var(--s-12); padding-block-start: 0; border: 0; }
.problem-head { display: flex; align-items: baseline; gap: var(--s-8); font-weight: 600; }
.problem-head .dot { transform: translateY(-1px); }
.problem > p:not(.problem-head), .problem-action { padding-inline-start: var(--s-16); }
.problem .problem-do { color: var(--soft); margin-block-start: 2px; }
.problem-action { margin-block-start: var(--s-8); }

.side-spacer { flex: 1; min-height: var(--s-16); }
.side-action { margin-block-start: var(--s-24); }
.side-action .btn-primary { width: 100%; }
.side-action .side-hint + .btn, .side-action .btn + .btn { margin-block-start: 10px; }
.side-hint { color: var(--muted); font-size: 13px; text-align: center; margin-block-start: var(--s-8); text-wrap: balance; }
.side-more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4) var(--s-12); margin-block-start: 10px; font-size: 13px; }
/* Secondary actions under the black button read as links. */
.side-more a, .side-more .link { text-decoration: underline; text-underline-offset: 3px; }

.side-section { margin-block-start: 22px; padding-block-start: var(--s-16); border-block-start: 1px solid var(--line-soft); }
.side-section h3 { font-size: 13px; font-weight: 600; color: var(--muted); margin-block-end: var(--s-8); text-transform: none; }
.links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.links a { color: var(--text-2); }
.facts-mini { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-12); font-size: 13px; }
.facts-mini dt { color: var(--muted); }
.facts-mini dd { margin: 0; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.log li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.log .log-when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.log .log-text { overflow-wrap: anywhere; }
.log-who { color: var(--muted); }
.log-all { margin-block-start: 10px; font-size: 13px; }
.log-all summary { color: var(--soft); cursor: pointer; padding-block: 2px; }
.log-all summary:hover { color: var(--text); }
.log-all[open] summary { margin-block-end: var(--s-8); }
.archive { margin-block-start: 22px; text-align: center; }

/* ------------------------------------------------------------ price screen */

.head { display: flex; gap: 14px; align-items: center; margin: 14px 0 6px; }
.head h1 { overflow-wrap: anywhere; }
.meta { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: var(--s-4) 10px; }
.meta a { color: var(--muted); }
.stepline { color: var(--muted); font-size: 13px; margin: 18px 0 20px; }
.stepline b { color: var(--text); }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12); margin-block-end: 22px; }
.fact { border: 1px solid var(--line); border-radius: var(--r-10); padding: var(--s-12) 14px; }
.fact-k { color: var(--muted); font-size: 13px; }
.fact-v { font-weight: 600; margin-block-start: 2px; }
.fact-v .sep { color: var(--faint); font-weight: 400; }
.fact .small-grey { margin-block-start: var(--s-4); }
.fact-warn { color: var(--warn); }
.mark { font-weight: 700; }

.name-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-16); margin-block-end: 22px; align-items: start; }

.naming { color: var(--muted); font-size: 13px; margin-block-end: var(--s-8); }

.vt { width: 100%; border-collapse: collapse; }
.vt th {
  text-align: start;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  padding: var(--s-8) 10px;
  border-block-end: 1px solid var(--line);
  white-space: nowrap;
}
.vt th.num { text-align: end; }
.th-sub { display: block; font-weight: 400; white-space: normal; }
.profit-line { color: var(--muted); font-size: 13px; margin-block-start: var(--s-8); }
.single-line { color: var(--muted); font-size: 13px; margin-block-start: var(--s-4); }
.vt td { padding: var(--s-12) 10px; border-block-end: 1px solid var(--line-soft); vertical-align: middle; }
.vt td.num { text-align: end; }
.vt .col-sell { width: 44px; }
.vt .vname-input { width: 100%; min-width: 140px; font-weight: 500; }
.vt .vname-inputs { display: grid; gap: 6px; }
.vsrc { color: var(--muted); font-size: 13px; margin-block-start: var(--s-4); overflow-wrap: anywhere; }

/* Product data (AliExpress titles, variant names) keeps its own direction in
   Arabic. Lines that mix words and product data wrap the data in <bdi>. */
.vsrc, .head h1, .side-title, .row-name { unicode-bidi: plaintext; }
.vt tr.off td { color: var(--muted); }
.vt tr.off .vname-input { color: var(--muted); }
.profit { font-weight: 600; white-space: nowrap; }
.profit.low { color: var(--warn); }
.profit-note { display: block; font-weight: 400; font-size: 13px; }
.row-remove { margin-inline-start: var(--s-4); }
.conflict {
  margin-block-start: var(--s-8);
  padding: var(--s-8) 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-8);
  font-size: 13px;
  text-align: start;
  display: grid;
  gap: 6px;
}
.conflict-actions { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.add-row { margin-block-start: var(--s-12); }

.problems-list { margin: var(--s-12) 0 0; padding-inline-start: var(--s-20); color: var(--bad); }

.foot {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  margin-block-start: 26px;
  flex-wrap: wrap;
  /* The one black button stays in sight on a long page. */
  position: sticky;
  inset-block-end: 0;
  z-index: 5;
  background: var(--surface);
  border-block-start: 1px solid var(--line);
  padding-block: 14px;
}
.foot-hint { color: var(--muted); font-size: 13px; flex: 1 1 260px; }
.foot-buttons { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }

.notice-line {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  margin-block-end: var(--s-16);
  color: var(--text-2);
}

/* ------------------------------------------------------------ review screen */

.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s-20);
  align-items: start;
}
.frame-box { min-width: 0; }
.frame-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4) var(--s-12); margin-block-end: var(--s-8); font-size: 13px; color: var(--muted); }
.frame-bar .ext { white-space: nowrap; }
.frame {
  display: block;
  width: 100%;
  height: max(480px, calc(100vh - 300px));
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  background: var(--surface);
}
.frame-fallback {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-10);
  padding: var(--s-24);
  display: grid;
  gap: var(--s-8);
  justify-items: start;
}

.rail { display: grid; gap: var(--s-12); }
.rail h2 { font-size: 14px; }
.sections { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-10); }
.sections > li { border-block-start: 1px solid var(--line-soft); }
.sections > li:first-child { border-block-start: 0; }
.sec-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-8);
  padding: 10px 14px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
.sec-btn:hover { background: var(--surface-2); }
.sec-btn[aria-expanded="true"] { font-weight: 600; }
.sec-state { color: var(--muted); font-size: 13px; font-weight: 400; }
.sec-note { padding: 0 14px 14px; display: grid; gap: var(--s-8); }
.sec-note .btn { justify-self: start; }
.fixline {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  color: var(--text-2);
}
.fixline-problem { margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-10); }

/* The two tabs of a section box ("Edit by hand", "Rewrite with AI") and the
   hand editor (web/js/pages/section-editor.js). The rail keeps its width. */
.sec-tabs { display: flex; flex-wrap: wrap; gap: var(--s-4); padding-block-end: var(--s-8); border-block-end: 1px solid var(--line-soft); }
.sec-tab {
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--soft);
  cursor: pointer;
}
.sec-tab:hover { color: var(--text); background: var(--surface-2); }
.sec-tab[aria-selected="true"] { background: var(--line-soft); color: var(--text); font-weight: 600; }
.sec-panel { display: grid; gap: var(--s-8); min-width: 0; }
.edit-status:empty, .edit-msg:empty { display: none; }
.edit-line { display: flex; align-items: baseline; gap: var(--s-8); font-size: 13px; color: var(--text-2); }
.edit-msg .notice-line { margin: 0; }
.edit-form { display: grid; gap: var(--s-12); min-width: 0; }
.edit-field { display: grid; gap: var(--s-4); min-width: 0; }
.edit-field input, .edit-field textarea { width: 100%; }
/* A short text gets a short box (rows set by the editor), not the 84 px of a note. */
.edit-field textarea { min-height: 0; }
.edit-field input:disabled, .edit-field textarea:disabled { background: var(--surface-2); color: var(--muted); }
.edit-hint { color: var(--muted); font-size: 13px; }
.edit-hint-bad { color: var(--bad); }
/* "Looks written by AI": a soft hint, small and grey, never an error. */
.edit-sign { color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
:lang(ar) .edit-sign { font-size: 13px; }
/* A text that changed in the meantime: a darker border and a short line. */
.edit-mark { font-size: 13px; font-weight: 600; color: var(--text-2); }
.edit-marked input, .edit-marked textarea { border-color: var(--text); }
/* Read-only: the text greyed, with the reason under it. */
.edit-ro .label { color: var(--muted); }
.edit-ro-text {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.edit-card { display: grid; gap: var(--s-8); padding: 10px var(--s-12); border: 1px solid var(--line); border-radius: var(--r-8); min-width: 0; }
.edit-card-title { font-size: 13px; font-weight: 600; color: var(--soft); }
.edit-actions { display: flex; gap: var(--s-8); }

/* A hand list (pages/review-list.js): a card's facts and buttons on one line,
   the add row, "Show all", the cards taken off the page, the add dialog's
   choices. The existing tag, buttons and greys; no new colours. */
.edit-card:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-8); min-width: 0; }
.list-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); min-width: 0; }
.list-facts .tag { margin-inline-start: 0; }
.list-stars { color: var(--text-2); font-size: 13px; letter-spacing: 1px; }
.list-tools { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.list-tools .btn { font-size: 12px; }
.list-foot { display: grid; gap: var(--s-12); min-width: 0; }
.list-show-all { justify-self: start; }
.list-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); min-width: 0; }
.list-off summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding-block: 2px; }
.list-off summary:hover { color: var(--text); }
.list-off-items { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-8); }
.list-off-item { display: grid; gap: var(--s-4); padding: var(--s-8) var(--s-12); border: 1px solid var(--line); border-radius: var(--r-8); min-width: 0; }
.list-off-item .btn { justify-self: start; }
.list-off-text { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.list-choice { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s-8); min-width: 0; }
.list-choice legend { padding: 0; margin-block-end: var(--s-4); }
.list-star-row { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.list-star, .list-kind-opt { display: flex; align-items: center; gap: var(--s-8); font-size: 14px; cursor: pointer; min-width: 0; }
.list-star { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.list-star:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.list-star input, .list-kind-opt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--primary); }
.list-dlg-msg:empty { display: none; }
/* A card's stars: one choice, as high as a text field. */
.edit-field select.edit-stars { justify-self: start; height: 40px; padding: 0 8px; font: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; }
.edit-field select.edit-stars:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); }
.edit-field select.edit-stars:disabled { background: var(--surface-2); color: var(--muted); }

/* Photos in the hand editor (pages/photo-slots.js, gallery-editor.js,
   photo-picker.js): thumbnails with a light border, grey words, the
   existing buttons. No new colours. */
.photo-slot { display: grid; gap: var(--s-8); min-width: 0; padding-block-end: var(--s-12); border-block-end: 1px solid var(--line-soft); }
.edit-card .photo-slot { padding-block-end: var(--s-8); }
.photo-row { display: flex; align-items: flex-start; gap: var(--s-12); min-width: 0; }
.photo-thumb { flex: none; display: block; width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: var(--line-soft); }
.photo-auto { opacity: .6; }
.photo-info { display: grid; gap: 2px; min-width: 0; }
.photo-state { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.photo-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); min-width: 0; }
.photo-actions .btn { white-space: normal; text-align: center; }
/* A real file input, visually hidden but reachable by keyboard; its label is the button. */
.file-input { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-input:focus-visible + .btn { outline: 2px solid var(--text); outline-offset: 2px; }
.file-input:disabled + .btn { opacity: .5; cursor: default; pointer-events: none; }
.photo-msg:empty, .gal-msg:empty { display: none; }
.photo-msg .problem, .gal-msg .problem, .gal-line .problem { margin: 0; padding: 0; border: 0; }
.photo-alt-row { display: flex; gap: var(--s-8); min-width: 0; }
.photo-alt-row input { flex: 1; min-width: 0; }
.gallery { display: grid; gap: var(--s-8); padding: var(--s-12) 14px; border: 1px solid var(--line); border-radius: var(--r-10); min-width: 0; }
.gal-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-8); }
.gal-head h2 { font-size: 14px; }
.gal-count { color: var(--muted); font-size: 13px; }
.gal-top { display: grid; gap: var(--s-8); min-width: 0; }
.gal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-8); }
.gal-item { position: relative; display: block; width: 56px; height: 56px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--line-soft); cursor: pointer; }
.gal-item img, .gal-blank { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-item[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.gal-item:disabled { cursor: default; }
.gal-n { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; min-width: 16px; padding: 0 4px; border-radius: 4px; background: var(--surface); color: var(--text); font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; }
.gal-n-main { background: var(--primary); color: var(--on-primary); }
.gal-legend { display: grid; gap: 0; }
.gal-legend .edit-hint { font-size: 12px; }
:lang(ar) .gal-legend .edit-hint { font-size: 13px; }
.gal-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.gal-line-name { overflow-wrap: anywhere; }
.gal-line-actions { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.gal-tools { display: grid; gap: var(--s-8); padding-block-start: var(--s-8); border-block-start: 1px solid var(--line-soft); min-width: 0; }
.gal-buttons { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.gal-buttons .btn { white-space: normal; }
.pick-lists { display: grid; gap: var(--s-12); }
.pick-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.pick-group legend { padding: 0; margin-block-end: var(--s-8); }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-8); }
.pick-opt { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-8); border: 1px solid var(--line); border-radius: var(--r-8); cursor: pointer; min-width: 0; }
.pick-opt:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.pick-name { display: flex; align-items: center; gap: var(--s-8); font-size: 13px; font-weight: 600; }
.pick-name input { margin: 0; accent-color: var(--primary); }
.pick-thumb { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: var(--line-soft); }
.pick-alt { overflow-wrap: anywhere; }

/* The "Bundle offer" part of the product panel (pages/bundle-editor.js):
   folded away like "All activity", cards with a light border, the preview
   as a small table, dots and grey words. No new colours. */
.bundle-sum { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding-block: 2px; }
.bundle-sum:hover { color: var(--text); }
.bundle-state { font-weight: 400; margin-inline-start: var(--s-8); }
.bundle-state:not(:empty)::before { content: "· "; color: var(--faint); }
.bundle-body { display: grid; gap: var(--s-12); margin-block-start: var(--s-12); min-width: 0; }
.bundle-status:empty, .bundle-msg:empty, .bundle-preview:empty, .bundle-codes:empty { display: none; }
.bundle-status { display: grid; gap: var(--s-8); justify-items: start; }
.bundle-msg .problem, .bundle-msg .notice-line { margin: 0; padding: 0; border: 0; }
.bundle-form { display: grid; gap: var(--s-12); min-width: 0; }
.bundle h4 { margin: var(--s-4) 0 0; font-size: 13px; font-weight: 600; }
.bundle-line { display: flex; align-items: baseline; gap: var(--s-8); font-size: 13px; color: var(--text-2); }
.bundle-line .dot, .bundle-lines .dot { flex: none; transform: translateY(-1px); }
.bundle-check { display: flex; align-items: center; gap: var(--s-8); font-size: 13px; font-weight: 600; min-width: 0; cursor: pointer; }
.bundle-check span { min-width: 0; overflow-wrap: anywhere; }
.bundle-modes, .bundle-variants { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 6px; }
.bundle-modes legend, .bundle-variants legend { padding: 0; margin-block-end: 6px; }
.bundle-variants .bundle-check { font-weight: 400; }
.bundle-radio { display: flex; align-items: flex-start; gap: var(--s-8); font-size: 13px; cursor: pointer; }
.bundle-main input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); cursor: pointer; }
.bundle-main select {
  font: inherit;
  font-size: 14px;
  height: 40px;
  padding: 0 8px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  min-width: 0;
  max-width: 100%;
}
.bundle-main select:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); }
.bundle-card { display: grid; gap: var(--s-8); padding: 10px var(--s-12); border: 1px solid var(--line); border-radius: var(--r-8); min-width: 0; }
.bundle-card-off { background: var(--surface-2); }
.bundle-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-8); min-width: 0; flex-wrap: wrap; }
.bundle-card-price { font-size: 13px; color: var(--soft); white-space: nowrap; }
.bundle-qty select { width: 88px; }
.bundle-chips { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.bundle-chip { padding: 4px 8px; font-weight: 500; }
.bundle-search { display: flex; gap: var(--s-8); min-width: 0; }
.bundle-search input { flex: 1; min-width: 0; }
.bundle-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.bundle-pick { display: grid; gap: 2px; width: 100%; padding: var(--s-8) 10px; border: 1px solid var(--line); border-radius: var(--r-8); background: var(--surface); font: inherit; color: var(--text); text-align: start; cursor: pointer; }
.bundle-pick:hover { background: var(--surface-2); }
.bundle-pick-name { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.bundle-addon { display: grid; gap: var(--s-8); min-width: 0; }
.bundle-addon-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.bundle-actions { display: flex; gap: var(--s-8); }
.bundle-preview, .bundle-codes { display: grid; gap: var(--s-8); padding-block-start: var(--s-12); border-block-start: 1px solid var(--line-soft); min-width: 0; }
.bt-wrap { min-width: 0; }
.bt { width: 100%; border-collapse: collapse; font-size: 13px; }
.bt th, .bt td { padding: 6px var(--s-4); text-align: start; vertical-align: baseline; border-block-end: 1px solid var(--line-soft); }
.bt thead th { color: var(--muted); font-weight: 500; border-block-end-color: var(--line); }
.bt tbody th { font-weight: 600; overflow-wrap: anywhere; }
.bt tbody th .tag { font-weight: 600; }
.bt .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt .bt-profit { font-weight: 600; }
.bt tr:has(+ .bt-lines) > * { border-block-end: 0; }
.bt .bt-lines td { padding-block-start: 0; }
.bundle-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; color: var(--text-2); }
.bundle-lines li { display: flex; align-items: baseline; gap: var(--s-8); min-width: 0; overflow-wrap: anywhere; }
.bundle-codes .btn-block { white-space: normal; text-align: center; }
.bundle-wait { color: var(--text-2); }
/* Kept simple (Med, 1 Oct 2026): ★ for the tier chosen at the start, folds for the
   rest, and a save bar at the bottom of the screen, dark while something is not saved. */
.bundle-star { flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--faint); font-size: 15px; line-height: 1; cursor: pointer; }
.bundle-star:hover { color: var(--text-2); }
.bundle-star[aria-pressed="true"] { color: #b7791f; border-color: #e3c27a; background: rgba(250, 204, 21, .14); }
.bundle-card-head .bundle-check { flex: 1; }
.bundle-fold { min-width: 0; }
.bundle-fold > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding-block: 2px; }
.bundle-fold > summary:hover { color: var(--text); }
.bundle-fold[open] > summary { margin-block-end: var(--s-8); }
.bundle-fold[open] { display: grid; gap: var(--s-12); }
.bundle-fold[data-fold="addon"], .bundle-fold[data-fold="settings"] { padding-block-start: var(--s-12); border-block-start: 1px solid var(--line-soft); }
.bundle-round { margin-block-start: 2px; }
.bundle-savebar { position: sticky; inset-block-end: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: 10px var(--s-12); border: 1px solid var(--line); border-radius: var(--r-8); background: var(--surface); }
.bundle-save-state { font-size: 13px; color: var(--muted); }
.bundle-savebar.is-unsaved { background: var(--text); border-color: var(--text); }
.bundle-savebar.is-unsaved .bundle-save-state { color: var(--surface); font-weight: 600; }
.bundle-savebar.is-unsaved .btn { background: var(--surface); color: var(--text); border-color: var(--surface); }

/* The shop preview of the bundle offer (pages/bundle-shop.js): the storefront
   block with its own stylesheet (css/offer.css, a copy of the app's) in a
   plain white card, white in the dark theme too (it is the shop's look,
   and the shop is light). A tier the shop hides today is faded with a dashed
   border. On wide screens the panel grows while the offer is open (the list
   drops its time column so names keep room), and the preview stays beside
   the form as you scroll. */
.bundle-main { display: grid; gap: var(--s-12); min-width: 0; }
.bundle-shop { display: grid; gap: var(--s-8); min-width: 0; align-content: start; }
.bundle-shop:empty { display: none; }
.shop-frame { padding: var(--s-16); border: 1px solid var(--line); border-radius: var(--r-12); background: #fff; color: #18181b; color-scheme: light; min-width: 0; }
.shop-frame .msb { margin-top: 0; }
.shop-frame .shop-hidden { border-style: dashed; opacity: .5; }
@media (min-width: 1280px) {
  .products:has(.bundle[open]) { grid-template-columns: minmax(0, 1fr) 760px; }
  .products:has(.bundle[open]) :is(.list-head, .row):not(.row-archived, .list-head-archived) { grid-template-columns: 20px 40px minmax(0, 1fr) 120px; }
  .products:has(.bundle[open]) :is(.list-head, .row) .since { display: none; }
  .bundle-body:has(> .bundle-shop:not(:empty)) { grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--s-24); align-items: start; }
  .bundle-body > .bundle-main { grid-column: 1; grid-row: 1; }
  .bundle-body > .bundle-shop { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: var(--s-16); }
}

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 1100px) {
  .products { grid-template-columns: minmax(0, 1fr) 340px; }
  .list-head, .row { grid-template-columns: 20px 40px minmax(0, 1fr) 150px; }
  .list-head .since, .row .since { display: none; }
  .review-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 860px) {
  .app { margin: 0; border: 0; border-radius: 0; min-height: 100vh; box-shadow: none; }
  /* 16 px in fields: phones do not zoom in on focus. */
  .input, input[type="text"], input[type="password"], input[type="search"], textarea, .bundle-main select, .edit-field select.edit-stars { font-size: 16px; }
  /* Touch targets: 24 px at least, 44 px for the main button. */
  input[type="checkbox"] { width: 24px; height: 24px; }
  .btn, .link, .tab, .nav a, .sec-btn, .sec-tab { min-height: 32px; }
  .btn-primary { min-height: 44px; }
  .toast.toast-flip { inset-block-start: var(--s-12); }
  .top { flex-wrap: wrap; gap: 10px; padding: 10px var(--s-16); }
  .nav { order: 3; width: 100%; }
  .top-label { display: none; }
  .page { padding: var(--s-16); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd number of cards: the last one takes the whole row. */
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .notice { flex-wrap: wrap; }
  .notice-actions { width: 100%; justify-content: flex-end; }

  .products { grid-template-columns: minmax(0, 1fr); }
  .products.has-sel .list { display: none; }
  .products:not(.has-sel) .side { display: none; }
  .side { border-inline-start: 0; padding: var(--s-16); }
  .side-back { display: inline-flex; }
  /* One row that scrolls sideways (the chosen tab is moved into view). */
  .tabs { padding-inline: var(--s-16); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { display: inline-flex; align-items: center; }
  .list-head { display: none; }
  .row { grid-template-columns: 24px 40px minmax(0, 1fr); padding: 11px var(--s-16); }
  .row .status { grid-column: 3; }
  .row.row-archived { grid-template-columns: 40px minmax(0, 1fr); }
  .row.row-archived .status, .row.row-archived .archived-restore { grid-column: 2; }
  .archived-restore { justify-items: start; max-width: none; }
  .archived-why { text-align: start; }
  .bulk { padding-inline: var(--s-16); }

  /* the 3 facts become one card */
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-10); }
  .fact { border: 0; border-radius: 0; padding: 10px var(--s-12); }
  .fact + .fact { border-block-start: 1px solid var(--line-soft); }
  .name-row { grid-template-columns: minmax(0, 1fr); }

  /* the variant table becomes one small card per variant: the tick next to
     the name, the 3 prices in one row with small labels, the profit below */
  .vt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vt, .vt tbody { display: block; }
  .vt tr[data-row] {
    display: grid;
    grid-template-columns: 24px repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "sell name name name"
      ".    cost price compare"
      ".    profit profit profit";
    gap: 6px var(--s-8);
    align-items: start;
    border: 1px solid var(--line);
    border-radius: var(--r-10);
    padding: 10px var(--s-12);
    margin-block-end: 10px;
  }
  .vt td { border: 0; padding: 0; text-align: start; min-width: 0; }
  .vt td.num { text-align: start; }
  .vt td.col-sell { grid-area: sell; width: auto; padding-block-start: 6px; }
  .vt td.cell-variant { grid-area: name; }
  .vt td.cell-cost { grid-area: cost; }
  .vt td.cell-price { grid-area: price; }
  .vt td.cell-compare { grid-area: compare; }
  .vt td.cell-profit { grid-area: profit; display: flex; align-items: baseline; gap: var(--s-8); }
  .vt td.cell-cost::before, .vt td.cell-price::before, .vt td.cell-compare::before, .vt td.cell-profit::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.3;
    margin-block-end: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vt td.cell-profit::before { display: inline; margin: 0; }
  .vt .input-money { width: 100%; }
  .vt .vname-input { min-width: 0; }
  .vt .vsrc { margin-block-start: 2px; }
  .vt tr.conflict-row, .vt tr.conflict-row td { display: block; }

  .review-grid { grid-template-columns: minmax(0, 1fr); }
  .frame { height: 70vh; }
  .foot { align-items: stretch; gap: var(--s-8); padding-block: 12px; }
  html:has(#main .foot) { scroll-padding-block-end: 150px; }
  .foot-buttons { width: 100%; justify-content: flex-end; }
}

@media (max-width: 420px) {
  .store-name { max-width: 120px; }
  .foot-buttons .btn-primary { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

.form-msg:not(:empty) { margin-block-start: var(--s-12); }