/* Amazon Store Builder (.asb-*)
 *
 * STRUCTURE AND TOKENS ARE TAKEN FROM THE APPROVED PROTOTYPE (asb-prototype.html),
 * not from a paraphrase of it. Class names, dimensions, orders and rules below match that
 * file rule-for-rule for every element AS2 ships. Where this file adds something the
 * prototype does not have, the addition is commented and says why.
 *
 * ── WHY .asb- AND NOT .amz- ──────────────────────────────────────────────────
 * `.amz-` IS ALREADY TAKEN. Thirty-plus classes (.amz-orders-table, .amz-poll,
 * .amz-status-new, .amz-detail-head, .amz-low-stock …) belong to the Amazon Vendor / EDI
 * family and live in GLOBAL stylesheets — style.css, dark.css, motion.css, polish.css,
 * responsive.css — so they load on every page whether this module is open or not. A
 * `.amz-` class here would not "look similar", it would BE those rules. The prototype
 * reaches the same conclusion in its own header.
 *
 * ── THREE THINGS THIS FILE ADDS THAT THE PROTOTYPE DOES NOT HAVE, AND WHY ────
 * The prototype is a standalone HTML file. It has no RMS globals to fight and no theme
 * switch, so three things it does not need are added here and marked [RMS-ONLY]:
 *   1. DARK MODE. The prototype is light-only; RMS has html[data-theme="dark"] and a
 *      module that ignores it renders white boxes in a dark app. AS1 §3.D records that a
 *      partially-covered dark block is how .ec- ended up with three dark selectors.
 *   2. GLOBAL-RULE DEFENCES. style.css:1 has an unscoped `button{background:#03658e;
 *      color:white}` and polish.css:429 a `button.danger{background:#b42318}` at
 *      specificity (0,1,1) which outranks a bare `.asb-btn` (0,1,0) whatever the load
 *      order — on .ecg- that once painted #b42318 text on a #b42318 background and the
 *      label vanished. style.css:1 also sets a global `input{min-width:170px}`. The
 *      prototype's own rules already restate background+color and set min-width:0 on
 *      inputs, so those are inherited rather than invented; the extra scoped input rule
 *      and the .rk-ownmobile note below are the additions.
 *   3. .rk-ownmobile OPT-OUT. Four global RMS rules silently rewrite any new table on
 *      mobile (the cardifier hides columns, table{min-width:900px}, td nowrap, card
 *      width:100%+margin). The opt-out class is .rk-ownmobile — NOT .rk-deskonly. The
 *      prototype keeps its table on a horizontal scroll at every width, and that is what
 *      this file reproduces; without the opt-out the global cardifier would hide columns
 *      instead, and Widgets and Status are the two the screen exists to show.
 */

/* ---- tokens: identical to the prototype, value for value ------------------ */
:root{
  --asb-primary:#0588b6; --asb-primary-d:#03658e;
  --asb-grad:linear-gradient(135deg,#03658e,#0588b6);
  --asb-ink:#0f2740; --asb-sub:#5b7183;
  --asb-line:#e6edf5; --asb-line-s:#cfdcea;
  --asb-shadow:0 10px 30px rgba(15,23,42,.06);
  --asb-ok:#0f7b52; --asb-warn:#9a6700; --asb-bad:#b42318;
  --asb-card:#fff; --asb-bg-soft:#f6f9fc;
}

.asb-wrap{max-width:1180px;margin:0 auto;padding:18px 16px 60px}

/* ---- page header (mirrors .ecg-head) ------------------------ */
.asb-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin:4px 0 14px}
.asb-eyebrow{font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--asb-primary)}
.asb-title{font-size:25px;font-weight:800;color:var(--asb-ink);margin:4px 0;line-height:1.15}
.asb-sub{font-size:13.5px;color:var(--asb-sub);margin:0;max-width:680px;line-height:1.5}
.asb-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---- buttons: background AND color restated (AS1 3.A trap 1) - */
.asb-btn{appearance:none;border:1.5px solid var(--asb-line-s);background:#fff;
  color:#21506f;font-size:13px;font-weight:700;padding:9px 15px;border-radius:11px;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;
  text-decoration:none;font-family:inherit}
.asb-btn:hover:not(:disabled){border-color:var(--asb-primary);color:var(--asb-primary)}
.asb-btn.primary{border:none;color:#fff;background:var(--asb-grad);
  box-shadow:0 8px 18px rgba(5,136,182,.28)}
.asb-btn.primary:hover:not(:disabled){color:#fff;filter:brightness(1.06)}
.asb-btn.danger{background:#fff;border-color:#f1c9c5;color:var(--asb-bad)}
.asb-btn.danger:hover:not(:disabled){background:#fdf1f0;border-color:var(--asb-bad);color:var(--asb-bad)}
.asb-btn:disabled{opacity:.5;cursor:not-allowed}
.asb-btn-sm{padding:6px 11px;font-size:12.5px;border-radius:9px}

/* ---- cards -------------------------------------------------- */
.asb-card{background:var(--asb-card);border:1.5px solid var(--asb-line);
  border-radius:18px;box-shadow:var(--asb-shadow);padding:18px;margin-bottom:16px}
.asb-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.asb-card-head h3{font-size:15.5px;font-weight:800;color:var(--asb-ink);margin:0}
.asb-spacer{flex:1}
.asb-step{width:24px;height:24px;border-radius:50%;background:var(--asb-grad);
  color:#fff;font-size:12.5px;font-weight:800;display:inline-flex;
  align-items:center;justify-content:center;flex:0 0 auto}

/* ---- chips -------------------------------------------------- */
.asb-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  font-weight:800;padding:3px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.asb-chip.ok{color:var(--asb-ok);background:#eaf7f1;border-color:#bde3d1}
.asb-chip.warn{color:var(--asb-warn);background:#fff8e6;border-color:#f2dda0}
.asb-chip.bad{color:var(--asb-bad);background:#fdf1f0;border-color:#f1c9c5}
.asb-chip.neutral{color:#41607d;background:var(--asb-bg-soft);border-color:var(--asb-line-s)}

/* ---- banners ------------------------------------------------ */
.asb-banner{border:1.5px solid var(--asb-line-s);background:#eef7fb;color:#21506f;
  border-radius:13px;padding:11px 14px;font-size:13px;margin-bottom:14px;
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;line-height:1.45}
.asb-banner.warn{border-color:#f2dda0;background:#fff8e6;color:#7a5200}
.asb-banner.bad{border-color:#f1c9c5;background:#fdf1f0;color:var(--asb-bad)}
.asb-banner .asb-spacer{flex:1}

/* ---- tables ------------------------------------------------- */
.asb-tablewrap{overflow-x:auto;border:1.5px solid var(--asb-line);border-radius:13px;
  -webkit-overflow-scrolling:touch}
.asb-table{border-collapse:collapse;width:100%;font-size:12.5px}
.asb-table th{text-align:left;padding:9px 11px;background:var(--asb-bg-soft);
  color:var(--asb-ink);font-weight:800;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;border-bottom:1.5px solid var(--asb-line);white-space:nowrap}
.asb-table td{padding:9px 11px;border-bottom:1px solid var(--asb-line);
  color:var(--asb-ink);vertical-align:middle}
.asb-table tbody tr:hover td{background:#f3f9fc}
.asb-table td.empty{color:#9db0c2}
/* [RMS-ONLY] The prototype sets `tbody tr{cursor:pointer}` because every row opens the
   editor. AS2 has no editor to open, so a pointer cursor would promise a click that does
   nothing. Restored in AS3 with the row handler it belongs to. */
.asb-sub-cell{font-size:11px;color:var(--asb-sub)}
.asb-of{color:#9db0c2}
/* Over Amazon's 20-block page cap. Shown, never hidden — a page above the cap means Amazon
   changed it, and that should be visible rather than clamped away. */
.asb-table td.asb-over-cap{color:var(--asb-warn);font-weight:800}
.asb-table td.asb-over-cap .asb-of{color:var(--asb-warn);font-weight:700}

/* ---- account switcher --------------------------------------- */
.asb-acct{display:inline-flex;border:1.5px solid var(--asb-line-s);border-radius:11px;
  overflow:hidden;background:#fff}
.asb-acct button{appearance:none;border:0;background:#fff;color:#5b7183;font-size:12.5px;
  font-weight:800;padding:8px 14px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px}
.asb-acct button.on{background:var(--asb-grad);color:#fff}
.asb-acct .swatch{width:8px;height:8px;border-radius:2px}

/* ---- store hero card ---------------------------------------- */
.asb-storegrid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.asb-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.asb-kpi{border:1.5px solid var(--asb-line);border-radius:13px;padding:12px 13px;background:var(--asb-bg-soft)}
.asb-kpi-l{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--asb-sub)}
.asb-kpi-v{font-size:21px;font-weight:800;color:var(--asb-ink);margin-top:3px;line-height:1.1}
.asb-kpi-d{font-size:11.5px;color:var(--asb-sub);margin-top:2px}
.asb-kpi-v.dash{color:#9db0c2}

.asb-rec{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--asb-line)}
.asb-rec:last-child{border-bottom:0}
.asb-rec-ico{width:26px;height:26px;border-radius:8px;background:#eef7fb;color:var(--asb-primary-d);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto;font-weight:800}
.asb-rec-t{font-size:13px;font-weight:700;color:var(--asb-ink)}
.asb-rec-s{font-size:12px;color:var(--asb-sub);line-height:1.45;margin-top:1px}

/* ---- empty / skeleton --------------------------------------- */
.asb-empty{text-align:center;padding:34px 18px;color:var(--asb-sub)}
.asb-empty-ico{font-size:30px;margin-bottom:9px}
.asb-empty h4{margin:0 0 6px;font-size:15px;color:var(--asb-ink);font-weight:800}
.asb-empty p{margin:0 auto 14px;font-size:13px;line-height:1.55;max-width:460px}
.asb-empty code{background:var(--asb-bg-soft);border:1px solid var(--asb-line);
  border-radius:5px;padding:1px 5px;font-size:12px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.asb-skel-l{height:11px;border-radius:6px;
  background:linear-gradient(90deg,#eef3f8 25%,#e2eaf3 37%,#eef3f8 63%);
  background-size:400% 100%;animation:asb-sheen 1.3s ease infinite;margin-bottom:8px}
.asb-skel-l.s{width:40%}.asb-skel-l.m{width:68%}.asb-skel-l.w{width:88%}
@keyframes asb-sheen{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.asb-skel-l{animation:none}}
/* [RMS-ONLY] The prototype draws its skeleton with an inline-styled div. Named here so the
   module does not ship inline styles. Same border, radius and padding as the prototype's. */
.asb-skel{border:1.5px solid var(--asb-line);border-radius:13px;padding:15px;margin-bottom:10px;background:#fff}

/* ---- settings ----------------------------------------------- */
.asb-row{display:flex;align-items:center;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--asb-line);flex-wrap:wrap}
.asb-row:last-child{border-bottom:0}
.asb-row-t{font-size:13.5px;font-weight:700;color:var(--asb-ink)}
.asb-row-s{font-size:12px;color:var(--asb-sub);margin-top:2px;line-height:1.45;max-width:600px}
.asb-row-main{flex:1}
.asb-toggle{width:42px;height:24px;border-radius:999px;background:#cfdcea;position:relative;
  cursor:pointer;flex:0 0 auto;transition:.18s;border:0;padding:0}
.asb-toggle:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.asb-toggle.on{background:var(--asb-primary)}
.asb-toggle.on:after{left:21px}
.asb-toggle:disabled{opacity:.45;cursor:not-allowed}
/* [RMS-ONLY] The prototype's toggle is a bare <button> with no focus ring. This module is
   reached by keyboard in a real app, so it gets one. */
.asb-toggle:focus-visible{outline:2px solid var(--asb-primary);outline-offset:2px}
.asb-mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px}

/* ---- screen switch ------------------------------------------
   [RMS-ONLY, borrowed idiom] The prototype navigates its seven screens with .proto-tab,
   which it marks prototype-only chrome. AS2 ships two of those screens behind ONE RMS nav
   entry and still needs a switch, so this reuses the prototype's own tab styling — the
   underline-on-active shape — rather than inventing a third idiom. */
.asb-nav{display:flex;gap:2px;border-bottom:1.5px solid var(--asb-line);margin-bottom:16px;overflow-x:auto}
.asb-navtab{appearance:none;border:0;background:none;padding:13px 14px;font-size:13px;
  font-weight:700;color:#5b7183;cursor:pointer;border-bottom:2.5px solid transparent;
  white-space:nowrap;font-family:inherit;margin-bottom:-1.5px}
.asb-navtab:hover:not(.on){color:var(--asb-primary)}
.asb-navtab.on{color:var(--asb-primary-d);border-bottom-color:var(--asb-primary)}

/* ---- sample-mode flag ---------------------------------------
   [RMS-ONLY] The prototype's equivalent is .proto-bar, which it labels prototype-only
   chrome — a dark strip pinned above the app. Inside RMS that would sit above the real
   topbar and belong to no module, so the same message is carried by the prototype's own
   warn-banner family instead, with a pill so it reads at a glance. */
.asb-samplepill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  background:var(--asb-warn);color:#fff;white-space:nowrap}

/* ---- inputs -------------------------------------------------
   [RMS-ONLY] style.css:1 sets a global `input,select,textarea{min-width:170px}` that
   overflows any narrow container. The prototype's own .asb-input already sets min-width:0;
   this scopes the same defence to anything unclassed inside the module. */
.asb-wrap input:not([type="checkbox"]):not([type="radio"]),
.asb-wrap select,
.asb-wrap textarea{min-width:0;width:100%;box-sizing:border-box}

/* ================= DARK MODE — [RMS-ONLY], every surface above ================= */
html[data-theme="dark"]{
  --asb-ink:#e6edf6; --asb-sub:#9fb0c4;
  --asb-line:#243049; --asb-line-s:#2f3d5a;
  --asb-card:#161f33; --asb-bg-soft:#1a2438;
  --asb-shadow:0 10px 30px rgba(0,0,0,.3);
}
html[data-theme="dark"] .asb-card,
html[data-theme="dark"] .asb-skel{background:#161f33}
html[data-theme="dark"] .asb-btn{background:#1d2941;border-color:#2f3d5a;color:#cfdcea}
html[data-theme="dark"] .asb-btn:hover:not(:disabled){border-color:#6fc7e6;color:#6fc7e6}
html[data-theme="dark"] .asb-btn.primary{color:#fff}
html[data-theme="dark"] .asb-btn.danger{background:#1d2941;border-color:#5b2a26;color:#f5a29a}
html[data-theme="dark"] .asb-acct{background:#161f33;border-color:#2f3d5a}
html[data-theme="dark"] .asb-acct button{background:#1d2941;color:#b8c6d8}
html[data-theme="dark"] .asb-acct button.on{color:#fff}
html[data-theme="dark"] .asb-nav{border-color:#243049}
html[data-theme="dark"] .asb-navtab{color:#9fb0c4}
html[data-theme="dark"] .asb-navtab.on{color:#6fc7e6;border-bottom-color:#6fc7e6}
html[data-theme="dark"] .asb-banner{background:#14283a;border-color:#244152;color:#b7d3e2}
html[data-theme="dark"] .asb-banner.warn{background:#2c2413;border-color:#4a3d1c;color:#e3c06a}
html[data-theme="dark"] .asb-banner.bad{background:#2a1616;border-color:#5b2a26;color:#f5a29a}
html[data-theme="dark"] .asb-kpi{background:#1a2438;border-color:#243049}
html[data-theme="dark"] .asb-kpi-v.dash{color:#66788c}
html[data-theme="dark"] .asb-rec-ico{background:#1d2941;color:#6fc7e6}
html[data-theme="dark"] .asb-rec{border-color:#243049}
html[data-theme="dark"] .asb-tablewrap{border-color:#243049}
html[data-theme="dark"] .asb-table th{background:#1a2438;color:#e6edf6;border-color:#243049}
html[data-theme="dark"] .asb-table td{border-color:#243049;color:#e6edf6}
html[data-theme="dark"] .asb-table tbody tr:hover td{background:#1d2941}
/* ── !important IS REQUIRED ON EVERY td COLOUR IN DARK MODE, AND HERE IS WHY ──
   dark.css:81 is
       html[data-theme="dark"] td { background:… !important; color:var(--d-text) !important; … }
   an unscoped, GLOBAL, !important rule on every table cell in the app. !important beats any
   specificity a normal declaration can reach, so a module rule for a td colour in dark mode
   does not lose on specificity — it cannot win at all without !important of its own.

   MEASURED, not reasoned: with the plain rule, a td rendered #e6edf6 (dark.css's --d-text)
   while the <span> INSIDE it rendered the intended amber — because the span is not a td and
   dark.css's selector never matched it. That split is the fingerprint of this trap.

   It also hid a real AS2 bug: td.empty below was written without !important, so the em-dash
   cells have been rendering as ordinary body text in dark mode rather than muted. The base
   `.asb-table td` rule loses too, but invisibly — its colour and --d-text are both #e6edf6.

   Anything that must actually differ from dark.css's default therefore states !important. */
html[data-theme="dark"] .asb-table td.empty{color:#66788c !important}
/* --asb-warn (#9a6700) is too dark on a dark card, so this is the amber the dark chips use. */
html[data-theme="dark"] .asb-table td.asb-over-cap,
html[data-theme="dark"] .asb-table td.asb-over-cap .asb-of{color:#e3c06a !important}
html[data-theme="dark"] .asb-chip.ok{color:#7ddcae;background:#10301f;border-color:#1d5237}
html[data-theme="dark"] .asb-chip.warn{color:#e3c06a;background:#2c2413;border-color:#4a3d1c}
html[data-theme="dark"] .asb-chip.bad{color:#f5a29a;background:#2a1616;border-color:#5b2a26}
html[data-theme="dark"] .asb-chip.neutral{color:#b8c6d8;background:#1a2438;border-color:#2f3d5a}
html[data-theme="dark"] .asb-row{border-color:#243049}
html[data-theme="dark"] .asb-toggle{background:#2f3d5a}
html[data-theme="dark"] .asb-empty code{background:#1a2438;border-color:#2f3d5a}
html[data-theme="dark"] .asb-skel-l{background:linear-gradient(90deg,#1d2941 25%,#243049 37%,#1d2941 63%);
  background-size:400% 100%}

/* ---- mobile: house breakpoint 1180px (AS1 3.D) -------------- */
@media (max-width:1180px){
  .asb-storegrid{grid-template-columns:1fr}
  .asb-kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .asb-title{font-size:21px}
  /* [RMS-ONLY] Comfortable touch targets; the prototype is not driven on a phone. */
  .asb-btn,.asb-navtab,.asb-acct button{min-height:40px}
  .asb-head-actions{width:100%}
  .asb-acct{width:100%}
  .asb-acct button{flex:1;justify-content:center}
}

/* ══════════════════════════ AS3 — PAGE EDITOR + REVIEW ══════════════════════
   Structures and values taken from asb-prototype.html's editor and diff screens. A rule
   marked [RMS-ONLY] is not in the prototype and says why — that file is standalone, with no
   global stylesheet to fight and no keyboard users. */

/* [RMS-ONLY] The page name in the Overview table, as the way into the editor. A plain <a>
   would need an href this SPA has no route for; a button carries the same affordance and the
   same keyboard behaviour. `color` and `background` are re-stated because style.css line 1
   sets `button{color:white}` globally — without them the name renders white on white. */
.asb-pagelink{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:800;
  color:var(--asb-primary-d);cursor:pointer;text-align:left}
.asb-pagelink:hover{text-decoration:underline}
.asb-pagelink:focus-visible{outline:2px solid var(--asb-primary);outline-offset:2px;border-radius:4px}
html[data-theme="dark"] .asb-pagelink{color:#6fc7e6}

/* ---- editor shell ---- */
.asb-editor{display:grid;grid-template-columns:1fr 350px;gap:16px;align-items:start}
.asb-canvas{background:#fff;border:1.5px solid var(--asb-line);border-radius:18px;
  box-shadow:var(--asb-shadow);overflow:hidden}
.asb-canvas-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1.5px solid var(--asb-line);background:var(--asb-bg-soft);flex-wrap:wrap}
.asb-canvas-in{padding:14px;display:flex;flex-direction:column;gap:11px;background:#fbfdff}

/* ---- a block card ---- */
.asb-w{border:1.5px solid var(--asb-line);border-radius:13px;background:#fff;
  position:relative;cursor:pointer;transition:.15s}
.asb-w:hover{border-color:#bfe0ef;box-shadow:0 6px 18px rgba(15,23,42,.07)}
.asb-w.sel{border-color:var(--asb-primary);box-shadow:0 0 0 3px rgba(5,136,182,.14)}
/* [RMS-ONLY] The prototype selects by mouse only. A card is a real control here, so it takes
   focus and shows it — without this the keyboard reorder buttons cannot be reached at all. */
.asb-w:focus-visible{outline:2px solid var(--asb-primary);outline-offset:2px}
.asb-w-bar{display:flex;align-items:center;gap:8px;padding:7px 11px;
  border-bottom:1px solid var(--asb-line);font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--asb-sub)}
.asb-w-body{padding:12px}
.asb-w-handle{cursor:grab;color:#9db0c2;font-size:13px;letter-spacing:-1px}
.asb-w-ico{width:20px;height:20px;border-radius:6px;background:#eef7fb;color:var(--asb-primary-d);
  display:flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 auto}
.asb-w.locked{background:#fbfcfd;border-style:dashed;cursor:default}
.asb-w.locked:hover{border-color:var(--asb-line-s);box-shadow:none}
/* [RMS-ONLY] Keyboard reorder. Drag-only would make the canvas unusable without a mouse;
   these perform exactly what the handle performs. */
.asb-w-move{display:inline-flex;gap:2px}
.asb-w-move button{appearance:none;border:1px solid var(--asb-line-s);background:#fff;color:#5b7183;
  font-size:11px;font-weight:800;line-height:1;padding:3px 6px;border-radius:6px;cursor:pointer;font-family:inherit}
.asb-w-move button:hover:not(:disabled){border-color:var(--asb-primary);color:var(--asb-primary)}
.asb-w-move button:disabled{opacity:.35;cursor:not-allowed}

/* ---- block approximations ---- */
.asb-hero{height:118px;border-radius:9px;background:linear-gradient(120deg,#0f3d57,#0588b6 55%,#63c6e6);
  display:flex;align-items:center;padding:0 22px;color:#fff}
.asb-hero h4{margin:0;font-size:19px;font-weight:800;letter-spacing:-.2px}
.asb-hero p{margin:4px 0 0;font-size:12px;opacity:.9}
.asb-prose{font-size:13px;line-height:1.55;color:var(--asb-ink)}
.asb-prose b{font-weight:800}
.asb-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.asb-tile{border:1px solid var(--asb-line);border-radius:10px;overflow:hidden;background:#fff}
.asb-tile-img{height:62px;background:#eef3f8;display:flex;align-items:center;
  justify-content:center;color:#9db0c2;font-size:17px;overflow:hidden}
.asb-tile-img img{width:100%;height:100%;object-fit:contain}
.asb-tile-b{padding:7px 8px}
.asb-tile-t{font-size:10.5px;font-weight:700;color:var(--asb-ink);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.asb-tile-m{font-size:9.5px;color:var(--asb-sub);margin-top:3px;display:flex;
  align-items:center;gap:4px;flex-wrap:wrap}
.asb-dot{width:5px;height:5px;border-radius:50%;flex:0 0 auto}
.asb-dot.ok{background:var(--asb-ok)} .asb-dot.bad{background:var(--asb-bad)}
.asb-dot.warn{background:var(--asb-warn)}
.asb-tile.dead{border-color:#f1c9c5;background:#fffbfb}
.asb-tile.pick{cursor:pointer}
.asb-tile.pick:hover{border-color:var(--asb-primary)}
.asb-tile.on{border-color:var(--asb-primary);box-shadow:0 0 0 2px rgba(5,136,182,.18)}
.asb-iwt{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center}
.asb-ph{background:#eef3f8;border-radius:9px;height:82px;display:flex;
  align-items:center;justify-content:center;color:#9db0c2;font-size:18px}
.asb-bannerblk{background:#eef7fb;border:1px solid #cfe4f0;border-radius:9px;padding:11px 14px;
  font-size:12.5px;font-weight:700;color:#21506f;text-align:center}
.asb-lockednote{font-size:12.5px;color:var(--asb-sub);line-height:1.55}

/* ---- inspector ---- */
.asb-insp{background:#fff;border:1.5px solid var(--asb-line);border-radius:18px;
  box-shadow:var(--asb-shadow);position:sticky;top:64px;overflow:hidden}
.asb-insp-head{padding:12px 15px;border-bottom:1.5px solid var(--asb-line);
  display:flex;align-items:center;gap:9px;background:var(--asb-bg-soft)}
.asb-insp-head h3{margin:0;font-size:14px;font-weight:800;color:var(--asb-ink);flex:1}
.asb-insp-body{padding:15px;max-height:560px;overflow-y:auto}
.asb-field{margin-bottom:13px}
.asb-label{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--asb-sub);margin-bottom:5px}
/* min-width:0 defeats style.css:1's global input{min-width:170px}, which otherwise overflows
   this 350px panel and every dialog below it. */
.asb-input,.asb-ta,.asb-sel{width:100%;min-width:0;border:1.5px solid var(--asb-line-s);
  border-radius:10px;padding:9px 11px;font-size:13px;color:var(--asb-ink);
  background:#fbfdff;font-family:inherit;outline:none;box-sizing:border-box}
.asb-input:focus,.asb-ta:focus,.asb-sel:focus{border-color:var(--asb-primary);
  box-shadow:0 0 0 3px rgba(5,136,182,.14);background:#fff}
.asb-ta{min-height:74px;resize:vertical;line-height:1.5}
.asb-hint{font-size:11.5px;color:var(--asb-sub);margin-top:5px;line-height:1.45}
.asb-count{font-size:11px;color:var(--asb-sub);float:right;font-weight:700}
.asb-count.over{color:var(--asb-bad)}
.asb-picked{display:flex;gap:7px;align-items:center;border:1px solid var(--asb-line);
  border-radius:9px;padding:6px 8px;margin-bottom:6px;background:#fbfdff}
.asb-picked .pi{width:30px;height:30px;border-radius:6px;background:#eef3f8;
  display:flex;align-items:center;justify-content:center;color:#9db0c2;font-size:12px;flex:0 0 auto;overflow:hidden}
.asb-picked .pi img{width:100%;height:100%;object-fit:contain}
.asb-picked .pt{flex:1;min-width:0}
.asb-picked .pn{font-size:11.5px;font-weight:700;color:var(--asb-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asb-picked .pm{font-size:10.5px;color:var(--asb-sub);display:flex;align-items:center;gap:4px;margin-top:1px}
.asb-x{appearance:none;border:0;background:none;color:#9db0c2;cursor:pointer;
  font-size:15px;padding:0 3px;line-height:1;font-family:inherit}
.asb-x:hover{color:var(--asb-bad)}
/* [RMS-ONLY] The read-only editor for amz_store_view: real page, real values, inert controls.
   Absent controls would look like a broken screen; disabled ones read as "not yours to change". */
.asb-insp-body.ro .asb-input,.asb-insp-body.ro .asb-ta,.asb-insp-body.ro .asb-sel{
  background:#f4f7fa;color:var(--asb-sub);cursor:not-allowed}

/* ---- diff ---- */
.asb-diff-row{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--asb-line);align-items:start}
.asb-diff-row:last-child{border-bottom:0}
.asb-mark{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;flex:0 0 auto}
.asb-mark.add{background:#eaf7f1;color:var(--asb-ok)}
.asb-mark.chg{background:#fff8e6;color:var(--asb-warn)}
.asb-mark.del{background:#fdf1f0;color:var(--asb-bad)}
/* [RMS-ONLY DIVERGENCE] The prototype uses #9db0c2 here. MEASURED against the mark's own
   background it is 2.11:1 — below the 3:1 floor for any glyph and far below 4.5:1 for a
   character. These two marks carry the = and the padlock, and the padlock row is the one
   line on the screen that tells an operator a block RMS cannot edit is going back
   untouched. --asb-sub is the same grey the row's own subtitle already uses: 4.83:1. */
.asb-mark.same{background:var(--asb-bg-soft);color:var(--asb-sub)}
.asb-diff-t{font-size:13px;font-weight:700;color:var(--asb-ink)}
.asb-diff-s{font-size:12px;color:var(--asb-sub);line-height:1.5;margin-top:2px}
.asb-was{background:#fdf1f0;border-radius:4px;padding:1px 5px;text-decoration:line-through;
  text-decoration-color:#d9a09a;color:#8c3a33}
.asb-now{background:#eaf7f1;border-radius:4px;padding:1px 5px;color:#0d5c3e}

/* ---- modal ---- */
.asb-modal{position:fixed;inset:0;z-index:6000;display:none;align-items:center;
  justify-content:center;padding:18px}
.asb-modal.on{display:flex}
.asb-modal-bg{position:absolute;inset:0;background:rgba(9,24,40,.5);backdrop-filter:blur(2px)}
.asb-modal-shell{position:relative;background:#fff;border-radius:19px;width:min(720px,100%);
  max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 26px 70px rgba(9,24,40,.3);overflow:hidden}
.asb-modal-head{display:flex;align-items:center;gap:12px;padding:15px 19px;
  border-bottom:1.5px solid var(--asb-line)}
.asb-modal-head h3{margin:0;font-size:16px;font-weight:800;color:var(--asb-ink);flex:1}
.asb-modal-body{padding:17px 19px;overflow-y:auto}
.asb-modal-foot{display:flex;gap:9px;justify-content:flex-end;padding:13px 19px;
  border-top:1.5px solid var(--asb-line);flex-wrap:wrap}

/* ================= DARK MODE — every AS3 surface ================= */
html[data-theme="dark"] .asb-canvas,
html[data-theme="dark"] .asb-insp,
html[data-theme="dark"] .asb-modal-shell{background:#161f33;border-color:#243049}
html[data-theme="dark"] .asb-canvas-bar{background:#1a2438;border-color:#243049}
html[data-theme="dark"] .asb-canvas-in{background:#131b2b}
html[data-theme="dark"] .asb-w{background:#161f33;border-color:#243049}
html[data-theme="dark"] .asb-w.locked{background:#141c2c}
html[data-theme="dark"] .asb-w-bar{border-color:#243049}
html[data-theme="dark"] .asb-w-ico{background:#1d2941;color:#6fc7e6}
html[data-theme="dark"] .asb-w-move button{background:#1d2941;border-color:#2f3d5a;color:#b8c6d8}
html[data-theme="dark"] .asb-insp-head{background:#1a2438;border-color:#243049}
html[data-theme="dark"] .asb-input,
html[data-theme="dark"] .asb-ta,
html[data-theme="dark"] .asb-sel{background:#111a2b;border-color:#2f3d5a;color:#e6edf6}
html[data-theme="dark"] .asb-insp-body.ro .asb-input,
html[data-theme="dark"] .asb-insp-body.ro .asb-ta,
html[data-theme="dark"] .asb-insp-body.ro .asb-sel{background:#0e1624;color:#9fb0c4}
html[data-theme="dark"] .asb-tile{background:#161f33;border-color:#243049}
html[data-theme="dark"] .asb-tile-img,html[data-theme="dark"] .asb-ph{background:#1a2438;color:#66788c}
html[data-theme="dark"] .asb-tile.dead{background:#241618;border-color:#5b2a26}
html[data-theme="dark"] .asb-picked{background:#1a2438;border-color:#243049}
html[data-theme="dark"] .asb-picked .pi{background:#1d2941}
html[data-theme="dark"] .asb-diff-row{border-color:#243049}
html[data-theme="dark"] .asb-mark.add{background:#10301f;color:#7ddcae}
html[data-theme="dark"] .asb-mark.chg{background:#2c2413;color:#e3c06a}
html[data-theme="dark"] .asb-mark.del{background:#2a1616;color:#f5a29a}
html[data-theme="dark"] .asb-mark.same{background:#1a2438;color:#9fb0c4}
html[data-theme="dark"] .asb-was{background:#2a1616;color:#f5a29a;text-decoration-color:#8c3a33}
html[data-theme="dark"] .asb-now{background:#10301f;color:#7ddcae}
html[data-theme="dark"] .asb-modal-head,html[data-theme="dark"] .asb-modal-foot{border-color:#243049}
html[data-theme="dark"] .asb-bannerblk{background:#14283a;border-color:#244152;color:#b7d3e2}
html[data-theme="dark"] .asb-lockednote{color:#9fb0c4}
html[data-theme="dark"] .asb-modal-foot{background:#161f33}

/* ================= MOBILE — 1180px, the house breakpoint ================= */
@media (max-width:1180px){
  /* The inspector stacks BELOW the canvas and stops being sticky — a sticky panel on a phone
     eats the viewport it is meant to help with. */
  .asb-editor{grid-template-columns:1fr}
  .asb-insp{position:static;max-height:none}
  .asb-insp-body{max-height:none}
  .asb-tiles{grid-template-columns:repeat(2,1fr)}
  .asb-modal{padding:0;align-items:flex-end}
  .asb-modal-shell{width:100%;max-height:94vh;border-radius:19px 19px 0 0}
  .asb-modal-foot{position:sticky;bottom:0;background:#fff}
  .asb-modal-foot .asb-btn{flex:1;justify-content:center}
}
@media (max-width:620px){
  .asb-iwt{grid-template-columns:1fr}
  .asb-canvas-bar{gap:7px}
}

/* ══════════════════════ AS4 — PUBLISH & VERSIONS ═══════════════════════════
   Structures and values taken from asb-prototype.html's Publish & versions screen and its
   confirm dialogs. A rule marked [RMS-ONLY] is not in the prototype and says why. */

/* ---- the four-step moderation strip ---- */
.asb-steps{display:flex;gap:0;margin:2px 0 4px;flex-wrap:wrap}
.asb-stp{flex:1;min-width:130px;padding:11px 12px;border:1.5px solid var(--asb-line);
  border-right:0;background:#fff}
.asb-stp:first-child{border-radius:12px 0 0 12px}
.asb-stp:last-child{border-right:1.5px solid var(--asb-line);border-radius:0 12px 12px 0}
.asb-stp.done{background:#eaf7f1;border-color:#bde3d1}
.asb-stp.now{background:#fff8e6;border-color:#f2dda0}
/* [RMS-ONLY] The prototype has no rejected state on the strip — its only publish is in
   progress. A rejection has to be visible here or the strip would show "In progress"
   forever on a publish Amazon has already answered. */
.asb-stp.bad{background:#fdf1f0;border-color:#f1c9c5}
.asb-stp-l{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--asb-sub)}
.asb-stp-v{font-size:13px;font-weight:800;color:var(--asb-ink);margin-top:3px}
.asb-stp-v.wait{color:#9db0c2}
.asb-stp-d{font-size:11px;color:var(--asb-sub);margin-top:2px}

/* ---- the version timeline ---- */
.asb-tl{position:relative;padding-left:26px}
.asb-tl:before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--asb-line)}
.asb-tl-i{position:relative;padding:11px 0;border-bottom:1px solid var(--asb-line)}
.asb-tl-i:last-child{border-bottom:0}
.asb-tl-i:before{content:"";position:absolute;left:-22px;top:17px;width:10px;height:10px;
  border-radius:50%;background:#fff;border:2.5px solid var(--asb-line-s)}
.asb-tl-i.live:before{border-color:var(--asb-ok);background:var(--asb-ok)}
.asb-tl-i.rev:before{border-color:var(--asb-warn);background:#fff}
.asb-tl-t{font-size:13px;font-weight:700;color:var(--asb-ink);display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.asb-tl-s{font-size:12px;color:var(--asb-sub);margin-top:2px}
/* [RMS-ONLY] Amazon's rejection sentence is quoted here. It arrives from outside the
   company and is escaped before it reaches the DOM; this only styles it. */
.asb-tl-reason{display:block;margin-top:4px;padding:7px 10px;border-radius:8px;
  background:#fff8e6;border:1px solid #f2dda0;color:#7a5200;font-size:12px;line-height:1.5}
.asb-tl-reason.hard{background:#fdf1f0;border-color:#f1c9c5;color:#8c3a33}

/* ---- confirm dialog list ---- */
.asb-confirm-l{background:var(--asb-bg-soft);border:1.5px solid var(--asb-line);
  border-radius:12px;padding:12px 14px;margin:12px 0;font-size:13px;line-height:1.6}
.asb-confirm-l div{display:flex;gap:8px;padding:3px 0}
.asb-confirm-l span:first-child{color:var(--asb-sub);min-width:96px;font-weight:700;font-size:12px}

/* ---- [RMS-ONLY] the first-write notice ----
   Not in the prototype, which never has a first time. Amazon offers no sandbox, so the very
   first push to a store is the one moment nothing about the path has been proven. It is
   INFORMATION inside the confirm — not a second confirmation, not a stored acknowledgement. */
.asb-firstwrite{border:1.5px solid #cfe4f0;background:#eef7fb;border-radius:12px;
  padding:11px 13px;margin:12px 0;font-size:12.5px;line-height:1.55;color:#21506f}
.asb-firstwrite b{font-weight:800}

/* ================= DARK MODE — AS4 surfaces ================= */
html[data-theme="dark"] .asb-stp{background:#161f33;border-color:#243049}
html[data-theme="dark"] .asb-stp.done{background:#10301f;border-color:#1d5138}
html[data-theme="dark"] .asb-stp.now{background:#2c2413;border-color:#4a3d1c}
html[data-theme="dark"] .asb-stp.bad{background:#2a1616;border-color:#5b2a26}
html[data-theme="dark"] .asb-stp-v{color:#e6edf6}
html[data-theme="dark"] .asb-stp-v.wait{color:#66788c}
html[data-theme="dark"] .asb-tl:before,
html[data-theme="dark"] .asb-tl-i{border-color:#243049}
html[data-theme="dark"] .asb-tl:before{background:#243049}
html[data-theme="dark"] .asb-tl-i:before{background:#161f33;border-color:#2f3d5a}
html[data-theme="dark"] .asb-tl-t{color:#e6edf6}
html[data-theme="dark"] .asb-tl-reason{background:#2c2413;border-color:#4a3d1c;color:#e3c06a}
html[data-theme="dark"] .asb-tl-reason.hard{background:#2a1616;border-color:#5b2a26;color:#f5a29a}
html[data-theme="dark"] .asb-confirm-l{background:#1a2438;border-color:#243049}
html[data-theme="dark"] .asb-firstwrite{background:#14283a;border-color:#244152;color:#b7d3e2}

@media (max-width:620px){
  /* The four steps stack rather than squeeze; at 130px minimum they would otherwise wrap
     into an unreadable two-by-two with the borders no longer joining up. */
  .asb-steps{display:block}
  .asb-stp{border-right:1.5px solid var(--asb-line);border-bottom:0;border-radius:0}
  .asb-stp:first-child{border-radius:12px 12px 0 0}
  .asb-stp:last-child{border-radius:0 0 12px 12px;border-bottom:1.5px solid var(--asb-line)}
}

/* ══════════════════════════ AS5 — PERFORMANCE ══════════════════════════════ */

/* [RMS-ONLY] The prototype's "See what was in v11 →" is an <a href="#">. This is a button
   because it opens a dialog rather than navigating, and it restates BOTH background and
   color: style.css line 1 sets an unscoped `button{background:#03658e;color:white}`, which
   without these would paint white text on the timeline's white row. */
.asb-linkbtn{appearance:none;border:0;background:none;padding:0;font:inherit;font-size:12px;
  font-weight:700;color:var(--asb-primary-d);cursor:pointer;text-decoration:none}
.asb-linkbtn:hover{text-decoration:underline}
.asb-linkbtn:focus-visible{outline:2px solid var(--asb-primary);outline-offset:2px;border-radius:4px}
html[data-theme="dark"] .asb-linkbtn{color:#6fc7e6}

/* The needs-attention thumbnail. Sized in the markup; this only supplies the frame so an
   imageless product's placeholder glyph sits where the picture would have been. */
.asb-table .asb-tile-img{border:1px solid var(--asb-line);background:#eef3f8}
html[data-theme="dark"] .asb-table .asb-tile-img{background:#1a2438;border-color:#243049}

/* dark.css:81 sets `color` on EVERY td with !important, so a scoped td colour here loses on
   the cascade whatever its specificity. The em-dash cell and the over-cap cell both need to
   win, so both carry !important — and the tests assert the COMPUTED colour rather than the
   presence of the rule, because a rule that loses still exists. */
html[data-theme="dark"] .asb-table td.empty{color:#66788c !important}

/* ══════════════════════ AS6 — MOBILE VARIANT NOTICE ════════════════════════
   [RMS-ONLY] The prototype has no notion of a block carrying a separate phone version, so
   there is nothing to copy. Deliberately quiet: a neutral information tone, not a warning.
   Nothing is wrong when this shows — there is simply more in the block than the desktop
   canvas can display. */
.asb-mobilenote{display:flex;gap:8px;align-items:flex-start;
  border:1px solid #cfe4f0;background:#eef7fb;border-radius:10px;
  padding:9px 11px;margin-bottom:13px;font-size:12px;line-height:1.5;color:#21506f}
html[data-theme="dark"] .asb-mobilenote{background:#14283a;border-color:#244152;color:#b7d3e2}

/* ══════════════════════ AS6 — THE UPLOAD CONTROL ═══════════════════════════ */
.asb-upload{border:1.5px dashed var(--asb-line-s);border-radius:12px;padding:12px;
  margin-bottom:13px;background:var(--asb-bg-soft)}
.asb-upload-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.asb-upload input[type=file]{font-size:12px;font-family:inherit;min-width:0;flex:1}
.asb-ai{margin-top:10px;font-size:12px;line-height:1.5;color:var(--asb-ink)}
.asb-ai b{display:block;font-weight:800;margin-bottom:4px}
.asb-ai label{display:inline-flex;align-items:center;gap:5px;margin-right:14px;cursor:pointer}
/* The progress and outcome line. One element, three states, so they cannot both show. */
.asb-upload-state{margin-top:9px;font-size:12px;line-height:1.5;padding:8px 10px;border-radius:9px;display:none}
.asb-upload-state.on{display:block}
.asb-upload-state.busy{background:#eef7fb;border:1px solid #cfe4f0;color:#21506f}
.asb-upload-state.ok{background:#eaf7f1;border:1px solid #bde3d1;color:#0d5c3e}
.asb-upload-state.bad{background:#fdf1f0;border:1px solid #f1c9c5;color:#8c3a33}
html[data-theme="dark"] .asb-upload{background:#1a2438;border-color:#2f3d5a}
html[data-theme="dark"] .asb-ai{color:#e6edf6}
html[data-theme="dark"] .asb-upload-state.busy{background:#14283a;border-color:#244152;color:#b7d3e2}
html[data-theme="dark"] .asb-upload-state.ok{background:#10301f;border-color:#1d5138;color:#7ddcae}
html[data-theme="dark"] .asb-upload-state.bad{background:#2a1616;border-color:#5b2a26;color:#f5a29a}
/* ══════════════ MEDIA — FAILED IMAGES, VIDEOS, AND THE THREE PICKER STATES ═══
   Added with the media fixes. All five <img> call sites in this module now fall back to a
   glyph rather than a broken-image icon, and the surface says so once. */

/* The once-per-surface line. Plain .asb-banner colours already — this only controls where
   it sits and how it hides, because §3e says this is INFORMATION and it must not look like
   an error. the hidden attribute alone loses to .asb-banner's display:flex, hence the explicit rule. */
.asb-media-note{margin:0 0 12px}
.asb-media-note[hidden]{display:none}

/* A box whose image failed. The glyph is already in place; this only stops it inheriting the
   img-sized layout and keeps it centred like a missing image has always been. */
.asb-tile-img[data-img-failed],.asb-picked .pi[data-img-failed]{font-size:inherit}

/* The type label on a picker tile. A video and a broken image used to look identical. */
.asb-kind{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;border-radius:4px;padding:1px 4px;margin-right:4px}
.asb-kind.vid{background:#e6eefb;color:#2c4d86}
.asb-kind.unk{background:#f1eee6;color:#7a6a3f}
.asb-tile.vid .asb-tile-img{background:#e9eef7;color:#7d8fa8}

/* The failed-request state of the image picker. The other states keep the neutral empty
   styling; only the failure is toned, because only the failure needs acting on. */
.asb-empty.warn h4{color:#7a5200}
.asb-empty.warn .asb-empty-ico{color:var(--asb-warn)}

html[data-theme="dark"] .asb-kind.vid{background:#1b2c4a;color:#9dbdf0}
html[data-theme="dark"] .asb-kind.unk{background:#2c2413;color:#e3c06a}
html[data-theme="dark"] .asb-tile.vid .asb-tile-img{background:#1d2941;color:#6d829c}
html[data-theme="dark"] .asb-empty.warn h4{color:#e3c06a}
/* The one settings row that is a text field rather than a switch: the store name, which is
   the only way RMS can find a store at all. Save is a button, not save-on-blur - this value
   decides which storefront gets read and written. */
.asb-setrow-text{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.asb-setrow-text .asb-input{width:230px;min-width:0}
@media (max-width:640px){
  .asb-row:has(.asb-setrow-text){flex-wrap:wrap}
  .asb-setrow-text{width:100%}
  .asb-setrow-text .asb-input{flex:1;width:auto}
}
/* "View on Amazon" — rendered ONLY where Brand Home supplied a real page URL, never from a
   constructed pattern. Quiet by default so it does not compete with the page name beside it. */
.asb-viewlink{font-size:10.5px;font-weight:700;color:var(--asb-accent,#1f6f8b);text-decoration:none;
  border-bottom:1px dotted currentColor;margin-left:6px;white-space:nowrap}
.asb-viewlink:hover{text-decoration:none;border-bottom-style:solid}
html[data-theme="dark"] .asb-viewlink{color:#7fc4e0}

/* ---- unconfirmed store candidates ---------------------------- */
/* Amazon returned these; nothing has proved they are ours. The card is deliberately quieter
   than a store card - it must not read as "here is your store" at a glance, which is exactly
   how one probe result came to be rendered as G4's storefront. */
.asb-cand-card{border-left:3px solid var(--asb-warn)}
.asb-step.warn{background:var(--asb-warn)}
.asb-cand-why{font-size:13px;color:var(--asb-sub);line-height:1.5;margin:0 0 10px;max-width:720px}
.asb-candlist{display:flex;flex-direction:column;gap:10px}
.asb-cand{border:1px solid var(--asb-line-s);border-radius:10px;padding:11px 12px;
  background:var(--asb-bg-soft)}
.asb-cand-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.asb-cand-top b{font-size:14px;color:var(--asb-ink)}
.asb-cand-exp{font-size:12px;color:var(--asb-sub);line-height:1.45;margin-top:5px;max-width:680px}
/* Amazon's own words. Quoted, not paraphrased - it names the customer, profile, advertiser
   and entity, which is everything the Ads console is searched by. */
.asb-cand-ref{margin-top:9px;border-top:1px dashed var(--asb-line-s);padding-top:8px}
.asb-cand-ref-h{font-size:12px;font-weight:700;color:var(--asb-warn);line-height:1.45}
.asb-cand-ref-q{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;line-height:1.5;color:var(--asb-ink);background:var(--asb-card);
  border:1px solid var(--asb-line-s);border-radius:8px;padding:8px 10px;margin-top:6px;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.asb-cand-ref-s{font-size:11px;color:var(--asb-sub);margin-top:4px}
.asb-cand-act{margin-top:12px;border-top:1px solid var(--asb-line-s);padding-top:11px}
.asb-cand-act p{font-size:12.5px;color:var(--asb-sub);line-height:1.5;margin:0 0 9px;max-width:680px}
html[data-theme="dark"] .asb-cand{background:#16202e}
html[data-theme="dark"] .asb-cand-ref-h{color:#e3c06a}