/* Change 0363 (owner 2026-10-10) — EXCLUSIVE and NOT ON THE SHOWROOM, made to be seen.
   Two states an offer item can be in that matter more than the rest of its row, so they stop being small text:
   - EXCLUSIVE (VIP Offer only, change 0362) wears the VIP Offers gold (--color-vip, "everywhere a record says it came
     out of a VIP Offer"), a gem, and a gold accent down the row's left edge. It is the offer's selling point.
   - NOT ON THE SHOWROOM (change 0361) wears the warning amber, an eye-off, and an amber accent: no client of the offer
     sees that item, and the operator is shown the two ways out.
   Shared by the VIP Offers pages and the Showroom console; kept out of css/app.css, which the showroom app ports. */

/* ---- the two marks, as pills ---- */
.pm-onlytag, .pm-offshow, .badge-excl, .badge-offshow {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 1px 8px 1px 6px; border-radius: 999px; border: 1px solid;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.6;
}
.pm-onlytag, .badge-excl {
  color: var(--color-vip);
  background: color-mix(in oklab, var(--color-vip) 12%, transparent);
  border-color: color-mix(in oklab, var(--color-vip) 50%, transparent);
}
.pm-offshow, .badge-offshow {
  color: var(--color-warn-ink);
  background: color-mix(in oklab, var(--color-warn) 14%, transparent);
  border-color: color-mix(in oklab, var(--color-warn) 55%, transparent);
}
/* the icon rides the pill itself, so every place that writes the words gets it */
.pm-onlytag::before, .badge-excl::before, .pm-offshow::before, .badge-offshow::before {
  content: ""; width: 11px; height: 11px; flex: none; background: currentColor;
  -webkit-mask: var(--mark-icon) no-repeat center / contain; mask: var(--mark-icon) no-repeat center / contain;
}
.pm-onlytag, .badge-excl {
  --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9Z'/%3E%3Cpath d='M11 3 8 9l4 13 4-13-3-6'/%3E%3Cpath d='M2 9h20'/%3E%3C/svg%3E");
}
.pm-offshow, .badge-offshow {
  --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}
/* the badge form drops the old inline icon its markup carried */
.badge-excl > i, .badge-excl > svg, .badge-offshow > i, .badge-offshow > svg { display: none; }

/* ---- the row: an accent down the left edge, a breath of the colour across it ---- */
#pmProdTable tbody tr:has(.pm-onlytag, .badge-excl) {
  background: color-mix(in oklab, var(--color-vip) 6%, transparent);
}
#pmProdTable tbody tr:has(.pm-onlytag, .badge-excl) > td:first-child {
  box-shadow: inset 3px 0 0 var(--color-vip);
}
#pmProdTable tbody tr:has(.pm-offshow, .badge-offshow) {
  background: color-mix(in oklab, var(--color-warn) 7%, transparent);
}
#pmProdTable tbody tr:has(.pm-offshow, .badge-offshow) > td:first-child {
  box-shadow: inset 3px 0 0 var(--color-warn);
}
/* the item's own switches, read in the offer's gold */
#pmProdTable .pm-onlyopts { color: var(--color-vip); font-weight: 600; }
/* the composer's switch label takes the gold once it is on */
.pm-only:has(.switch[aria-checked="true"]) .pm-only__label, .pm-only:not(:has(.switch)) .pm-only__label { color: var(--color-vip); }

/* ---- the way out of Not on the Showroom ---- */
.excl-cta { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.excl-cta:hover { text-decoration: underline; }

/* ---- the summary over the table: what is exclusive, what nobody can see ---- */
.excl-banners { display: grid; gap: 8px; margin: 0 12px 12px; }
.excl-banners:empty, .excl-banner[hidden] { display: none; }
.excl-banner {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 8px; border: 1px solid;
  font-size: 13px; line-height: 1.45; color: var(--color-text);
}
.excl-banner > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.excl-banner b { font-weight: 700; }
.excl-banner--vip {
  background: color-mix(in oklab, var(--color-vip) 10%, transparent);
  border-color: color-mix(in oklab, var(--color-vip) 45%, transparent);
}
.excl-banner--vip > svg, .excl-banner--vip b { color: var(--color-vip); }
.excl-banner--warn {
  background: color-mix(in oklab, var(--color-warn) 12%, transparent);
  border-color: color-mix(in oklab, var(--color-warn) 55%, transparent);
}
.excl-banner--warn > svg, .excl-banner--warn b { color: var(--color-warn-ink); }
.excl-banner .excl-banner__acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- a count where the operator chooses where to look ---- */
.excl-count {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--color-vip);
  background: color-mix(in oklab, var(--color-vip) 14%, transparent);
}
.excl-count > svg { width: 11px; height: 11px; }

/* ---- the console: a row the Showroom may not publish ---- */
tr.sf-locked { background: color-mix(in oklab, var(--color-vip) 6%, transparent); }
tr.sf-locked > td:first-child { box-shadow: inset 3px 0 0 var(--color-vip); }