/* =====================================================================
   ImproveAB - admin pages
   ---------------------------------------------------------------------
   Scope   .improveab-admin   the plugin's page wrapper in wp-admin
           (All tests, New test, results, Guide, Settings).
   The admin-bar menu and the wp-admin dashboard widget have their own
   files (adminbar.css, dashboard.css).

   Same tokens and the same state rules as the panel (picker.css):
   hover       a fill you see at a glance: paper to sand-3, sand to sand-4
   pressed     one step past hover
   focus       keyboard only (:focus-visible), 2 px paper gap + 2 px ink
   selected    ink fill, paper text
   disabled    only when an action cannot run at all
   waiting     the primary stays enabled (aria-disabled), a line says why
   loading     spinner + verb, width kept (.ad-btn__labels), aria-busy
   error       red edge on the field, message right under it

   Sections 1 to 12 are the shared parts (the waiting primary, red text
   and destroy buttons, tags, letters, fields with typing focus, selects,
   the combobox, the unit field, nav states); buttons, segments and nav
   items grow with their text (min-height), and the tiles fit their
   width. Sections 13 to 23 are the screens.
   Layout switches use a container query on .ad-page, so a page lays out
   by its own width. Every label can grow: nothing that holds words has a
   fixed width, so translations wrap instead of clipping.
   ===================================================================== */

/* ---------- 1. Tokens ------------------------------------------------ */
.improveab-admin {
  --ad-ink: #141414; --ad-ink-hover: #2b2925; --ad-ink-2: #3d3a34; --ad-muted: #5f5b54; --ad-off: #6e6a63;
  --ad-paper: #fff; --ad-page: #efece4; --ad-sand-1: #f7f5f0; --ad-sand-2: #f1efe8; --ad-sand-3: #e8e4da; --ad-sand-4: #ddd8cc; --ad-sand-5: #d2ccbf;
  --ad-hover: var(--ad-sand-3); --ad-press: var(--ad-sand-4); --ad-hover-on-sand: var(--ad-sand-4); --ad-press-on-sand: var(--ad-sand-5);
  --ad-line-1: #e8e4dc; --ad-line-2: #d6d2c9; --ad-line-3: #85817a;
  --ad-amber: #ffb52e; --ad-amber-hover: #f4a716; --ad-amber-press: #e59a0e;
  --ad-amber-50: #fdf7e6; --ad-amber-100: #fff0c7; --ad-amber-300: #e6cf8f; --ad-amber-ink: #8a5b00; --ad-amber-ink-2: #3b2800;
  --ad-red: #b42318; --ad-red-hover: #97190f; --ad-red-50: #fcf1ef; --ad-red-100: #f8dcd7; --ad-red-150: #f5d3cd;
  /* text on the ink fill (current nav item): sub line 12.7:1, an error line 12.6:1 */
  --ad-on-ink-2: #d9d6cf; --ad-red-on-ink: #ffc9c0;
  --ad-green: #1c7a45; --ad-green-100: #d8f5e3; --ad-green-ink: #10331f;
  --ad-blue: #2a55dc; --ad-blue-50: #edf1ff;
  /* variant letters (white letter on each, all 5.3:1 or more) */
  --ad-var-a: #b93a1f; --ad-var-b: #2a55dc; --ad-var-c: #1c7a45; --ad-var-d: #8a5b00; --ad-var-e: #7a3bb0; --ad-var-f: #0b6f6f;
  /* variant lines in charts and bars (3:1 or more on white) */
  --ad-line-a: #e8492a; --ad-line-b: #3d6cff; --ad-line-c: #1c7a45; --ad-line-d: #b07a00; --ad-line-e: #8c46c8; --ad-line-f: #0e8a8a;
  --ad-ring: 0 0 0 2px #fff, 0 0 0 4px #141414;
  --ad-ring-inset: inset 0 0 0 2px #141414, inset 0 0 0 4px #fff;
  --ad-halo: 0 0 0 3px rgba(20, 20, 20, .10);
  --ad-halo-error: 0 0 0 3px rgba(180, 35, 24, .16);
  --ad-shadow-2: 0 10px 28px rgba(20, 20, 20, .14), 0 1px 3px rgba(20, 20, 20, .08);
  --ad-shadow-3: 0 18px 48px rgba(20, 20, 20, .20), 0 2px 6px rgba(20, 20, 20, .08);
  --ad-scrim: rgba(20, 20, 20, .45);
  --ad-font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ad-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--ad-ink); font: 400 14px/1.45 var(--ad-font); -webkit-font-smoothing: antialiased;
}
.improveab-admin *, .improveab-admin *::before, .improveab-admin *::after { box-sizing: border-box; }
.improveab-admin :is(button, a, input, select, textarea) { font: inherit; color: inherit; }
.improveab-admin button { margin: 0; border: 0; background: none; padding: 0; cursor: pointer; }
.improveab-admin :is(p, h1, h2, h3, h4, ul, ol, figure) { margin: 0; }
.improveab-admin :is(ul, ol) { padding: 0; list-style: none; }
/* wp-admin styles bare elements (common.css: p 13px/1.5 with a margin,
   li with a 6 px margin, h1 to h3 in #1d2327). Inside the plugin's pages
   text takes its size and colour from the plugin's own classes. */
.improveab-admin :is(p, li) { margin: 0; font-size: inherit; line-height: inherit; }
.improveab-admin :is(h1, h2, h3, h4) { color: inherit; }
/* a closed disclosure's region stays in the markup with hidden, so
   aria-controls always points at something; no class may show it */
.improveab-admin [hidden] { display: none !important; }
/* a list drawn without bullets keeps its list role in Safari: add
   role="list" to the ul or ol in the markup */
.improveab-admin .ad-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* stroked line icons (class "i"): the look comes from here, not from
   attributes on each svg */
.improveab-admin svg.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 2. Buttons ---------------------------------------------- */
.improveab-admin .ad-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; font: 600 14px/1.2 var(--ad-font); text-align: center; text-decoration: none; transition: background-color 120ms, border-color 120ms, box-shadow 120ms, color 120ms; }
.improveab-admin .ad-btn > svg { width: 16px; height: 16px; flex: none; }
.improveab-admin .ad-btn--sm { min-height: 32px; padding: 0 10px; gap: 6px; border-radius: 8px; font-size: 13px; }
.improveab-admin .ad-btn--lg { min-height: 48px; padding: 0 20px; font-size: 16px; border-radius: 12px; }
.improveab-admin .ad-btn--block { width: 100%; }
.improveab-admin .ad-btn--primary { background: var(--ad-amber); border-color: var(--ad-amber); color: var(--ad-ink); }
.improveab-admin .ad-btn--primary:is(:hover, .is-hover) { background: var(--ad-amber-hover); border-color: var(--ad-amber-hover); }
.improveab-admin .ad-btn--primary:is(:active, .is-pressed) { background: var(--ad-amber-press); border-color: var(--ad-amber-press); box-shadow: inset 0 1px 2px rgba(20,20,20,.22); }
/* waiting for input: still a button, the line above it says why */
.improveab-admin .ad-btn--primary:is([aria-disabled="true"], .is-waiting) { background: var(--ad-amber-50); border-color: var(--ad-amber-300); color: var(--ad-ink); box-shadow: none; }
.improveab-admin .ad-btn--primary:is([aria-disabled="true"], .is-waiting):is(:hover, .is-hover) { background: var(--ad-amber-100); border-color: var(--ad-amber-ink); }
.improveab-admin .ad-btn--secondary { background: var(--ad-paper); border-color: var(--ad-line-2); color: var(--ad-ink); }
.improveab-admin .ad-btn--secondary:is(:hover, .is-hover) { background: var(--ad-hover); border-color: var(--ad-line-3); }
.improveab-admin .ad-btn--secondary:is(:active, .is-pressed, [aria-expanded="true"]) { background: var(--ad-press); border-color: var(--ad-line-3); }
.improveab-admin .ad-btn--text { color: var(--ad-ink-2); padding: 0 10px; }
.improveab-admin .ad-btn--text:is(:hover, .is-hover) { background: var(--ad-hover); color: var(--ad-ink); }
.improveab-admin .ad-btn--text:is(:active, .is-pressed) { background: var(--ad-press); }
.improveab-admin .ad-btn--text.ad-btn--danger { color: var(--ad-red); }
/* red-100 is 1.3:1 on paper, like sand-3; the red text stays 5.1:1 on it */
.improveab-admin .ad-btn--text.ad-btn--danger:is(:hover, .is-hover) { background: var(--ad-red-100); color: var(--ad-red); }
.improveab-admin .ad-btn--text.ad-btn--danger:is(:active, .is-pressed) { background: var(--ad-red-150); }
/* the one filled red button: the confirm step of a delete */
.improveab-admin .ad-btn--destroy { background: var(--ad-red); border-color: var(--ad-red); color: #fff; }
.improveab-admin .ad-btn--destroy:is(:hover, .is-hover) { background: var(--ad-red-hover); border-color: var(--ad-red-hover); }
.improveab-admin .ad-btn[aria-busy="true"] { cursor: progress; }
/* loading keeps the width: both labels share one grid cell, so the wider
   one sets the width in every language. Only the visible one is the
   button's name (visibility: hidden leaves the accessible name too).
   <button class="ad-btn ..." aria-busy="true"><span class="ad-btn__labels">
     <span class="ad-btn__idle">Save settings</span>
     <span class="ad-btn__busy"><span class="ad-spin"></span>Saving…</span>
   </span></button> */
.improveab-admin .ad-btn__labels { display: inline-grid; }
.improveab-admin .ad-btn__labels > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.improveab-admin .ad-btn__labels > span > svg { flex: none; width: 16px; height: 16px; }
.improveab-admin .ad-btn__busy, .improveab-admin .ad-btn[aria-busy="true"] .ad-btn__idle { visibility: hidden; }
.improveab-admin .ad-btn[aria-busy="true"] .ad-btn__busy { visibility: visible; }
.improveab-admin .ad-btn:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); }
.improveab-admin .ad-btn:is(:disabled, .is-disabled):not(.ad-btn--text) { background: var(--ad-sand-1); border-color: var(--ad-line-1); color: var(--ad-off); box-shadow: none; cursor: not-allowed; }
.improveab-admin .ad-btn--text:is(:disabled, .is-disabled) { color: var(--ad-off); background: none; cursor: not-allowed; }
.improveab-admin .ad-icon-btn { position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px; color: var(--ad-ink-2); transition: background-color 120ms, color 120ms; }
.improveab-admin .ad-icon-btn > svg { width: 18px; height: 18px; }
.improveab-admin .ad-icon-btn--sm { width: 30px; height: 30px; border-radius: 7px; }
.improveab-admin .ad-icon-btn--sm > svg { width: 16px; height: 16px; }
.improveab-admin .ad-icon-btn:is(:hover, .is-hover) { background: var(--ad-hover); color: var(--ad-ink); }
.improveab-admin .ad-icon-btn:is(:active, .is-pressed, [aria-expanded="true"]) { background: var(--ad-press); color: var(--ad-ink); }
.improveab-admin .ad-icon-btn:is([aria-pressed="true"], .is-selected) { background: var(--ad-ink); color: #fff; }
.improveab-admin .ad-icon-btn:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); }
.improveab-admin .ad-link { color: var(--ad-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 3px; }
.improveab-admin .ad-link > svg { width: 14px; height: 14px; margin-left: 3px; vertical-align: -2px; }
.improveab-admin .ad-link:is(:hover, .is-hover) { text-decoration-thickness: 2px; }
.improveab-admin .ad-link:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); }
.improveab-admin .ad-spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: improveab-ad-spin .8s linear infinite; }
@keyframes improveab-ad-spin { to { transform: rotate(360deg); } }

/* ---------- 3. Tooltip ---------------------------------------------- */
.improveab-admin .ad-tipwrap { position: relative; display: inline-flex; }
.improveab-admin .ad-tip { position: absolute; z-index: 30; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 6px 8px; border-radius: 6px; background: var(--ad-ink); color: #fff; font: 500 12px/1.35 var(--ad-font); white-space: nowrap; box-shadow: var(--ad-shadow-2); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 120ms 400ms, visibility 0s 520ms; }
.improveab-admin .ad-tip--wrap { white-space: normal; width: 300px; max-width: calc(100vw - 32px); }
.improveab-admin .ad-tip--end { left: auto; right: 0; transform: none; }
.improveab-admin .ad-tip--start { left: 0; transform: none; }
.improveab-admin .ad-tipwrap:is(:hover, .is-hover) > .ad-tip { opacity: 1; visibility: visible; transition-delay: 400ms, 400ms; }
.improveab-admin .ad-tipwrap:is(:has(:focus-visible), .is-focus) > .ad-tip { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }

/* ---------- 4. Segmented control, filter pills ---------------------- */
.improveab-admin .ad-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ad-sand-2); }
.improveab-admin .ad-seg__item { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 7px; color: var(--ad-ink-2); font: 600 14px/1.2 var(--ad-font); white-space: nowrap; transition: background-color 120ms, color 120ms; }
.improveab-admin .ad-seg__item > svg { width: 16px; height: 16px; }
.improveab-admin .ad-seg__item:is(:hover, .is-hover) { background: var(--ad-hover-on-sand); color: var(--ad-ink); }
.improveab-admin .ad-seg__item:is(:active, .is-pressed) { background: var(--ad-press-on-sand); }
.improveab-admin .ad-seg__item:is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="page"], .is-selected) { background: var(--ad-ink); color: #fff; }
.improveab-admin .ad-seg__item:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); z-index: 1; }
.improveab-admin .ad-count { font-weight: 500; opacity: .8; font-variant-numeric: tabular-nums; }

/* ---------- 5. Status pills and tags -------------------------------- */
.improveab-admin .ad-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; font: 600 13px/1 var(--ad-font); white-space: nowrap; }
.improveab-admin .ad-pill > svg { width: 14px; height: 14px; flex: none; }
.improveab-admin .ad-pill--running { background: var(--ad-green-100); color: var(--ad-green-ink); }
.improveab-admin .ad-pill--running > svg { color: var(--ad-green); }
.improveab-admin .ad-pill--paused { background: var(--ad-amber-100); color: var(--ad-amber-ink-2); }
.improveab-admin .ad-pill--draft { background: var(--ad-sand-2); color: var(--ad-ink-2); box-shadow: inset 0 0 0 1px var(--ad-line-2); }
.improveab-admin .ad-pill--stopped { background: var(--ad-paper); color: var(--ad-ink-2); box-shadow: inset 0 0 0 1px var(--ad-line-2); }
.improveab-admin .ad-tag { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 22px; padding: 0 8px; border-radius: 999px; font: 600 12px/1 var(--ad-font); white-space: nowrap; }
.improveab-admin .ad-tag > svg { width: 12px; height: 12px; }
.improveab-admin .ad-tag--plain { padding: 0; color: var(--ad-muted); font-weight: 500; }
.improveab-admin .ad-tag--leading { color: var(--ad-ink); box-shadow: inset 0 0 0 1.5px var(--ad-ink); }
.improveab-admin .ad-tag--winner { background: var(--ad-amber); color: var(--ad-ink); }
.improveab-admin .ad-tag--collecting { background: var(--ad-sand-3); color: var(--ad-ink-2); }
.improveab-admin .ad-tag--warn { background: var(--ad-red-50); color: var(--ad-red); box-shadow: inset 0 0 0 1px var(--ad-red-100); }

/* ---------- 6. Letter badges (same set as the panel) ---------------- */
.improveab-admin .ad-letter { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px; color: #fff; font: 700 12px/1 var(--ad-font); background: var(--ad-var-a); }
.improveab-admin .ad-letter--lg { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; }
.improveab-admin .ad-letter--sm { width: 18px; height: 18px; border-radius: 5px; font-size: 11px; }
.improveab-admin .ad-letter--b { background: var(--ad-var-b); }
.improveab-admin .ad-letter--c { background: var(--ad-var-c); }
.improveab-admin .ad-letter--d { background: var(--ad-var-d); }
.improveab-admin .ad-letter--e { background: var(--ad-var-e); }
.improveab-admin .ad-letter--f { background: var(--ad-var-f); }

/* ---------- 7. List table (All tests) -------------------------------- */
.improveab-admin .ad-card { background: var(--ad-paper); border-radius: 16px; }
.improveab-admin .ad-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.improveab-admin .ad-table th { height: 52px; padding: 0 16px; color: var(--ad-muted); font: 600 12px/1 var(--ad-font); letter-spacing: .08em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--ad-line-1); }
.improveab-admin .ad-table :is(th, td).ad-num { text-align: right; }
.improveab-admin .ad-table td { padding: 14px 16px; border-bottom: 1px solid var(--ad-line-1); vertical-align: middle; transition: background-color 120ms; }
.improveab-admin .ad-table tr:last-child td { border-bottom: 0; }
.improveab-admin .ad-row:is(:hover, :focus-within, .is-hover) td { background: var(--ad-hover); }
.improveab-admin .ad-name { color: var(--ad-ink); font: 600 16px/1.3 var(--ad-font); text-decoration: none; border-radius: 3px; }
.improveab-admin .ad-row:is(:hover, .is-hover) .ad-name, .improveab-admin .ad-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.improveab-admin .ad-name:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); }
.improveab-admin .ad-desc { display: block; margin-top: 3px; color: var(--ad-muted); font-size: 14px; }
.improveab-admin .ad-val { color: var(--ad-ink); font: 600 15px/1.2 var(--ad-font); font-variant-numeric: tabular-nums; }
.improveab-admin .ad-sub { display: block; margin-top: 3px; color: var(--ad-muted); font: 500 12px/1 var(--ad-font); }
.improveab-admin .ad-empty { color: var(--ad-muted); font: 500 14px/1.3 var(--ad-font); }
.improveab-admin .ad-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.improveab-admin .ad-qa { display: inline-flex; align-items: center; gap: 2px; visibility: hidden; }
.improveab-admin .ad-row:is(:hover, :focus-within, .is-hover) .ad-qa { visibility: visible; }
@media (hover: none) { .improveab-admin .ad-qa { visibility: visible; } }
.improveab-admin .ad-check { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--ad-line-3); border-radius: 5px; background: #fff; }
.improveab-admin .ad-row:is(:hover, .is-hover) .ad-check { border-color: var(--ad-ink-2); }

/* ---------- 8. Menu --------------------------------------------------- */
.improveab-admin .ad-menu { display: grid; gap: 1px; min-width: 200px; padding: 4px; border: 1px solid var(--ad-line-2); border-radius: 12px; background: var(--ad-paper); box-shadow: var(--ad-shadow-2); }
.improveab-admin .ad-menu__item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 8px; color: var(--ad-ink); font: 500 14px/1.2 var(--ad-font); text-align: left; width: 100%; }
.improveab-admin .ad-menu__item > svg { width: 16px; height: 16px; color: var(--ad-ink-2); flex: none; }
.improveab-admin .ad-menu__item:is(:hover, .is-hover) { background: var(--ad-hover); }
.improveab-admin .ad-menu__item:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring-inset); }
.improveab-admin .ad-menu__item--danger, .improveab-admin .ad-menu__item--danger > svg { color: var(--ad-red); }
.improveab-admin .ad-menu__sep { height: 1px; margin: 4px 6px; background: var(--ad-line-1); }

/* ---------- 9. Results: tiles, empty chart ------------------------- */
.improveab-admin .ad-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-kpi { display: grid; align-content: start; gap: 8px; padding: 18px 20px 4px 0; }
.improveab-admin .ad-kpi + .ad-kpi { padding-left: 20px; border-left: 1px solid var(--ad-line-1); }
.improveab-admin .ad-kpi__label { display: flex; align-items: center; gap: 6px; color: var(--ad-muted); font: 500 14px/1.2 var(--ad-font); }
.improveab-admin .ad-kpi__value { color: var(--ad-ink); font: 700 30px/1.1 var(--ad-font); font-variant-numeric: tabular-nums; }
.improveab-admin .ad-kpi__value--quiet { color: var(--ad-muted); font: 500 15px/1.4 var(--ad-font); }
.improveab-admin .ad-kpi__lead { display: flex; align-items: flex-start; gap: 8px; font: 600 16px/1.3 var(--ad-font); }
.improveab-admin .ad-kpi__lead > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.improveab-admin .ad-chart-empty { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 280px; padding: 32px; border-radius: 12px; background: var(--ad-sand-1); text-align: center; }
.improveab-admin .ad-chart-empty__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #fff; color: var(--ad-ink-2); box-shadow: inset 0 0 0 1px var(--ad-line-2); }
.improveab-admin .ad-chart-empty__icon > svg { width: 24px; height: 24px; }
.improveab-admin .ad-chart-empty h3 { font: 600 18px/1.3 var(--ad-font); }
.improveab-admin .ad-chart-empty p { max-width: 520px; color: var(--ad-muted); font-size: 15px; line-height: 1.5; }
.improveab-admin .ad-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; color: var(--ad-ink-2); font: 500 13px/1.3 var(--ad-font); }
.improveab-admin .ad-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.improveab-admin .ad-legend i { display: inline-block; flex: none; width: 18px; height: 3px; border-radius: 2px; }
.improveab-admin .ad-progress { display: flex; align-items: center; gap: 10px; color: var(--ad-muted); font: 500 13px/1.2 var(--ad-font); }
.improveab-admin .ad-progress__track { position: relative; flex: 1; min-width: 80px; height: 6px; border-radius: 3px; background: var(--ad-sand-3); overflow: hidden; }
.improveab-admin .ad-progress__bar { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--ad-ink-2); }

/* ---------- 10. Fields ----------------------------------------------- */
.improveab-admin .ad-control { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 10px 14px; border: 1px solid var(--ad-line-3); border-radius: 10px; background: #fff; color: var(--ad-ink); font: 400 15px/1.35 var(--ad-font); box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color 120ms, box-shadow 120ms; }
.improveab-admin .ad-control::placeholder { color: var(--ad-muted); opacity: 1; }
.improveab-admin textarea.ad-control { min-height: 88px; resize: vertical; }
.improveab-admin .ad-control:is(:hover, .is-hover) { border-color: var(--ad-ink-2); }
.improveab-admin .ad-control:is(:focus, .is-typing) { outline: none; border-color: var(--ad-ink); box-shadow: var(--ad-halo); }
.improveab-admin[data-ad-input="keyboard"] .ad-control:focus, .improveab-admin .ad-control.is-focus { border-color: var(--ad-ink); box-shadow: var(--ad-ring); }
.improveab-admin .ad-control:is([aria-invalid="true"], .is-error) { border-color: var(--ad-red); }
.improveab-admin .ad-control:is([aria-invalid="true"], .is-error):is(:focus, .is-typing) { box-shadow: var(--ad-halo-error); }
/* an invalid field reached with Tab keeps its red edge and gets the ring */
.improveab-admin[data-ad-input="keyboard"] .ad-control:is([aria-invalid="true"], .is-error):focus,
.improveab-admin .ad-control:is([aria-invalid="true"], .is-error).is-focus { border-color: var(--ad-red); box-shadow: var(--ad-ring); }
/* a closed select or listbox button showing its placeholder */
.improveab-admin .ad-control .is-placeholder, .improveab-admin .ad-control.is-placeholder { color: var(--ad-muted); }
/* a number with its unit: the input sits inside the box, the unit after it.
   <div class="ad-control ad-control--unit"><input type="number" id="x"
     aria-describedby="x-unit x-help"><span class="ad-control__suffix"
     id="x-unit">visitors</span></div>
   The box takes the field states from the input inside it. */
.improveab-admin .ad-control--unit > input,
.improveab-admin .ad-control--unit > input:is(:hover, :focus) { flex: 1; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; color: inherit; font: inherit; -moz-appearance: textfield; }
.improveab-admin .ad-control--unit:focus-within { border-color: var(--ad-ink); box-shadow: var(--ad-halo); }
.improveab-admin[data-ad-input="keyboard"] .ad-control--unit:focus-within { box-shadow: var(--ad-ring); }
.improveab-admin .ad-control--unit:has(> input[aria-invalid="true"]) { border-color: var(--ad-red); }
.improveab-admin .ad-control--unit:has(> input[aria-invalid="true"]):focus-within { border-color: var(--ad-red); box-shadow: var(--ad-halo-error); }
.improveab-admin[data-ad-input="keyboard"] .ad-control--unit:has(> input[aria-invalid="true"]):focus-within { box-shadow: var(--ad-ring); }
.improveab-admin .ad-control:is(:disabled, .is-disabled) { background: var(--ad-sand-1); border-color: var(--ad-line-2); color: var(--ad-off); }
.improveab-admin .ad-control__suffix { margin-left: auto; color: var(--ad-muted); white-space: nowrap; }
.improveab-admin .ad-control--mono { font: 500 14px/1.35 var(--ad-mono); }
.improveab-admin .ad-control--num { max-width: 220px; }
.improveab-admin .ad-select { position: relative; display: block; }
.improveab-admin .ad-select > .ad-control { padding-right: 40px; cursor: pointer; }
/* Simple choices are a native <select class="ad-control"> in .ad-select,
   with the chevron svg after it. wp-admin's forms.css styles selects
   (.wp-core-ui select: a 25rem cap, its own arrow, blue text on hover and
   focus); these keep the plugin's look. The Winner control is the one
   listbox button (.ad-control--button), because its options carry letters
   and wrap long names. */
.improveab-admin select.ad-control { max-width: none; background-image: none; line-height: 1.35; }
.improveab-admin select.ad-control:is(:hover, :focus, .is-hover, .is-typing) { color: var(--ad-ink); }
.improveab-admin select.ad-control.is-placeholder:not(:focus) { color: var(--ad-muted); }
/* a select that is a button: the closed value cuts with an ellipsis, the list wraps */
.improveab-admin .ad-select > .ad-control--button { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.improveab-admin .ad-control--button > span:not(.ad-letter) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.improveab-admin .ad-option.ad-option--variant { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; line-height: 1.35; }
.improveab-admin .ad-option--variant .ad-letter { margin-top: 1px; }
.improveab-admin .ad-option[aria-selected="true"] { font-weight: 600; }
.improveab-admin .ad-legend--clamp > span > span:last-child { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.improveab-admin .ad-select > svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--ad-ink-2); pointer-events: none; }
/* combobox: a text field that suggests (Goal page path) */
.improveab-admin .ad-combo { position: relative; display: block; }
.improveab-admin .ad-combo > .ad-control { padding-right: 40px; }
.improveab-admin .ad-combo > svg { position: absolute; right: 14px; top: 14px; width: 16px; height: 16px; color: var(--ad-ink-2); pointer-events: none; transition: transform 120ms; }
.improveab-admin .ad-combo > .ad-control[aria-expanded="true"] + svg { transform: rotate(180deg); }
.improveab-admin .ad-listbox { display: grid; gap: 1px; margin-top: 6px; padding: 4px; border: 1px solid var(--ad-line-2); border-radius: 12px; background: #fff; box-shadow: var(--ad-shadow-2); }
.improveab-admin .ad-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: var(--ad-ink); font: 500 14px/1.3 var(--ad-font); }
.improveab-admin .ad-option small { color: var(--ad-muted); font: 500 13px/1.3 var(--ad-mono); white-space: nowrap; }
.improveab-admin .ad-option mark { background: none; color: inherit; font-weight: 700; }
.improveab-admin .ad-option:is(:hover, .is-hover, [data-active="true"]) { background: var(--ad-hover); }
.improveab-admin .ad-option.is-focus { box-shadow: var(--ad-ring-inset); }
.improveab-admin .ad-option--typed { border-top: 1px solid var(--ad-line-1); border-radius: 0 0 8px 8px; color: var(--ad-ink-2); }
.improveab-admin .ad-error { display: flex; gap: 6px; align-items: flex-start; margin-top: 7px; color: var(--ad-red); font: 500 13px/1.4 var(--ad-font); }
.improveab-admin .ad-error > svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.improveab-admin .ad-field { display: grid; gap: 8px; max-width: 560px; }
.improveab-admin .ad-field--wide { max-width: none; }
.improveab-admin .ad-label { display: flex; align-items: center; gap: 8px; color: var(--ad-ink); font: 600 14px/1.3 var(--ad-font); }
.improveab-admin .ad-label .ad-aside { margin-left: auto; color: var(--ad-muted); font-weight: 500; font-size: 13px; }
.improveab-admin .ad-help { color: var(--ad-muted); font-size: 13.5px; line-height: 1.5; }
.improveab-admin .ad-field > .ad-error { margin-top: -1px; }
.improveab-admin .ad-code { display: inline-block; max-width: 100%; padding: 3px 8px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--ad-line-2); color: var(--ad-ink); font: 500 13px/1.45 var(--ad-mono); overflow-wrap: anywhere; }

/* ---------- 11. Choice cards (New test) ------------------------------ */
.improveab-admin .ad-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.improveab-admin .ad-choice { display: flex; gap: 14px; padding: 18px 20px; border: 1px solid var(--ad-line-2); border-radius: 14px; background: #fff; text-align: left; transition: background-color 120ms, border-color 120ms, box-shadow 120ms; }
.improveab-admin .ad-choice__dot { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid var(--ad-line-3); border-radius: 50%; background: #fff; }
.improveab-admin .ad-choice b { display: block; font: 600 16px/1.3 var(--ad-font); }
.improveab-admin .ad-choice span { display: block; margin-top: 4px; color: var(--ad-muted); font-size: 14px; line-height: 1.45; }
.improveab-admin .ad-choice:is(:hover, .is-hover) { background: var(--ad-sand-1); border-color: var(--ad-line-3); }
.improveab-admin .ad-choice:is([aria-checked="true"], .is-selected) { border: 2px solid var(--ad-ink); padding: 17px 19px; }
.improveab-admin .ad-choice:is([aria-checked="true"], .is-selected) .ad-choice__dot { border: 6.5px solid var(--ad-ink); }
.improveab-admin .ad-choice:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); }

/* ---------- 12. Side nav and step list ------------------------------- */
/* The New test rail and the Settings nav.
   aria-current is matched by value, so "false" on the other items is safe. */
.improveab-admin .ad-nav { display: grid; gap: 2px; }
.improveab-admin .ad-nav__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 10px; color: var(--ad-ink); font: 600 15px/1.25 var(--ad-font); text-align: left; text-decoration: none; transition: background-color 120ms; }
.improveab-admin .ad-nav__item:is(:hover, .is-hover) { background: var(--ad-hover); }
.improveab-admin .ad-nav__item:is([aria-current="page"], [aria-current="step"], [aria-current="true"], .is-selected) { background: var(--ad-ink); color: #fff; }
/* rows take the inset ring, like every list row, so it never merges
   with the ink item next to it */
.improveab-admin .ad-nav__item:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring-inset); }
.improveab-admin .ad-nav__text { display: grid; gap: 2px; min-width: 0; }
.improveab-admin .ad-nav__sub { color: var(--ad-muted); font: 500 12.5px/1.25 var(--ad-font); }
.improveab-admin .ad-nav__item:is([aria-current="page"], [aria-current="step"], [aria-current="true"], .is-selected) .ad-nav__sub { color: var(--ad-on-ink-2); }
.improveab-admin .ad-nav__num { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ad-line-3); font: 700 13px/1 var(--ad-font); }
.improveab-admin .ad-nav__num > svg { width: 14px; height: 14px; }
.improveab-admin .ad-nav__item:is([aria-current="page"], [aria-current="step"], [aria-current="true"], .is-selected) .ad-nav__num { background: #fff; color: var(--ad-ink); box-shadow: none; }
.improveab-admin .ad-nav__item.is-error .ad-nav__num { background: var(--ad-red-50); color: var(--ad-red); box-shadow: inset 0 0 0 1.5px var(--ad-red); }
.improveab-admin .ad-nav__item.is-error .ad-nav__sub { color: var(--ad-red); }
/* the current step can carry an error too: red on ink would be 2.8:1 */
.improveab-admin .ad-nav__item:is([aria-current="page"], [aria-current="step"], [aria-current="true"], .is-selected).is-error .ad-nav__num { background: #fff; }
.improveab-admin .ad-nav__item:is([aria-current="page"], [aria-current="step"], [aria-current="true"], .is-selected).is-error .ad-nav__sub { color: var(--ad-red-on-ink); }
.improveab-admin .ad-nav__group { padding: 14px 14px 6px; color: var(--ad-muted); font: 700 12px/1.2 var(--ad-font); letter-spacing: .08em; text-transform: uppercase; }
.improveab-admin .ad-nav__sep { height: 1px; margin: 8px 6px; background: var(--ad-line-1); }

/* ---------- 13. Page frame ------------------------------------------- */
.improveab-admin.ad-page { container: adpage / inline-size; padding: 14px 20px 56px; background: var(--ad-page); }
.improveab-admin .ad-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-height: 56px; }
.improveab-admin .ad-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ad-ink); font: 700 17px/1 var(--ad-font); text-decoration: none; white-space: nowrap; }
.improveab-admin .ad-brand > svg { width: 22px; height: 22px; flex: none; }
.improveab-admin .ad-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 12px; background: var(--ad-paper); }
.improveab-admin .ad-tabs__item { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 8px; color: var(--ad-ink-2); font: 600 14px/1.2 var(--ad-font); text-decoration: none; white-space: nowrap; transition: background-color 120ms, color 120ms; }
.improveab-admin .ad-tabs__item:is(:hover, .is-hover) { background: var(--ad-hover); color: var(--ad-ink); }
.improveab-admin .ad-tabs__item:is([aria-current="page"], .is-selected) { background: var(--ad-ink); color: #fff; }
.improveab-admin .ad-tabs__item:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); }
.improveab-admin .ad-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; color: var(--ad-muted); font: 500 13px/1.2 var(--ad-font); }
.improveab-admin .ad-plan b { color: var(--ad-ink); font-weight: 600; }
.improveab-admin .ad-plan .ad-link { font-weight: 600; text-decoration: none; }
.improveab-admin .ad-plan .ad-link:is(:hover, .is-hover) { text-decoration: underline; }
.improveab-admin .ad-back { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin: 4px 0 2px -6px; padding: 0 8px 0 4px; border-radius: 6px; color: var(--ad-ink-2); font: 600 13px/1.2 var(--ad-font); text-decoration: none; }
.improveab-admin .ad-back > svg { width: 16px; height: 16px; }
.improveab-admin .ad-back:is(:hover, .is-hover) { background: var(--ad-hover); color: var(--ad-ink); }
.improveab-admin .ad-back:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); }
.improveab-admin .ad-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.improveab-admin .ad-title { color: var(--ad-ink); font: 700 28px/1.15 var(--ad-font); letter-spacing: -.01em; }
.improveab-admin .ad-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* a long title: the pill rides on its last line instead of wrapping alone */
.improveab-admin .ad-title > .ad-pill, .improveab-admin .ad-title__end > .ad-pill { margin-left: 10px; vertical-align: 5px; letter-spacing: 0; }
/* the title's last word and the pill wrap together, so the pill never
   starts a line alone: <span class="ad-title__end">word <span class="ad-pill"> */
.improveab-admin .ad-title__end { white-space: nowrap; }
.improveab-admin .ad-lede { margin-top: 6px; color: var(--ad-muted); font-size: 15px; line-height: 1.45; }
.improveab-admin .ad-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; color: var(--ad-muted); font-size: 13px; }
.improveab-admin .ad-meta b { color: var(--ad-ink); font-weight: 500; }
.improveab-admin .ad-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }

/* ---------- 14. New test: steps beside a sticky rail ----------------- */
.improveab-admin .ad-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
/* sticky parts sit 16 px under the admin bar. --ad-bar-h is the bar's
   real height. WordPress fixes #wpadminbar at 32 px and extra items wrap
   below it, so measure the lowest bottom of #wp-toolbar > ul > li
   and set it on .improveab-admin only where that is more than 32 px. */
.improveab-admin .ad-rail { position: sticky; top: calc(var(--ad-bar-h, 32px) + 16px); display: grid; gap: 12px; }
.improveab-admin .ad-rail__card { padding: 12px; }
.improveab-admin .ad-rail__actions { display: grid; gap: 10px; padding: 16px; }
.improveab-admin .ad-why { display: flex; align-items: flex-start; gap: 6px; margin: -2px 0 0; color: var(--ad-ink-2); font: 500 13px/1.35 var(--ad-font); }
.improveab-admin .ad-why > svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--ad-amber-ink); }
.improveab-admin .ad-steps { display: grid; gap: 12px; }
.improveab-admin .ad-step { background: var(--ad-paper); border-radius: 16px; }
.improveab-admin .ad-step__head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; width: 100%; min-height: 76px; padding: 16px 24px; border-radius: 16px; text-align: left; transition: background-color 120ms; }
.improveab-admin .ad-step.is-open .ad-step__head { border-radius: 16px 16px 0 0; box-shadow: inset 0 -1px 0 var(--ad-line-1); }
.improveab-admin .ad-step__head:is(:hover, .is-hover) { background: var(--ad-hover); }
.improveab-admin .ad-step__head:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring-inset); }
.improveab-admin .ad-step.is-open .ad-step__head:is(:focus-visible, .is-focus) { box-shadow: var(--ad-ring-inset), inset 0 -1px 0 var(--ad-line-1); }
.improveab-admin .ad-step__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ad-line-3); font: 700 14px/1 var(--ad-font); }
.improveab-admin .ad-step__num > svg { width: 16px; height: 16px; }
.improveab-admin .ad-step.is-open .ad-step__num { background: var(--ad-ink); color: #fff; box-shadow: none; }
.improveab-admin .ad-step.is-error .ad-step__num { background: var(--ad-red-50); color: var(--ad-red); box-shadow: inset 0 0 0 1.5px var(--ad-red); }
.improveab-admin .ad-step__title { display: block; font: 600 18px/1.25 var(--ad-font); }
.improveab-admin .ad-step__sum { display: block; margin-top: 3px; color: var(--ad-muted); font-size: 14px; line-height: 1.35; }
.improveab-admin .ad-step.is-error .ad-step__sum { color: var(--ad-red); font-weight: 500; }
.improveab-admin .ad-step__chev { width: 20px; height: 20px; color: var(--ad-ink-2); transition: transform 120ms; }
.improveab-admin .ad-step.is-open .ad-step__chev { transform: rotate(180deg); }
.improveab-admin .ad-step__body { display: grid; gap: 24px; padding: 28px 32px 32px 72px; }
.improveab-admin .ad-copyrows { display: grid; gap: 8px; }
.improveab-admin .ad-copyrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 12px 12px 12px 16px; border-radius: 12px; background: var(--ad-sand-1); }
.improveab-admin .ad-copyrow__name { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 600 14px/1.3 var(--ad-font); }
.improveab-admin .ad-copyrow .ad-btn.is-done { color: var(--ad-green-ink); }
.improveab-admin .ad-copyrow .ad-btn.is-done > svg { color: var(--ad-green); }
.improveab-admin .ad-varnames { display: grid; gap: 8px; }
.improveab-admin .ad-varname { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }

/* ---------- 15. Notes, disclosures ----------------------------------- */
.improveab-admin .ad-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--ad-sand-1); color: var(--ad-ink-2); font-size: 14px; line-height: 1.55; }
.improveab-admin .ad-note > svg { width: 20px; height: 20px; color: var(--ad-ink-2); }
.improveab-admin .ad-note b { color: var(--ad-ink); font-weight: 600; }
.improveab-admin .ad-note p + p { margin-top: 6px; }
.improveab-admin .ad-note--warn { background: var(--ad-red-50); box-shadow: inset 0 0 0 1px var(--ad-red-100); }
.improveab-admin .ad-note--warn > svg { color: var(--ad-red); }
.improveab-admin .ad-disclosure { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-left: -8px; padding: 0 10px 0 8px; border-radius: 8px; color: var(--ad-ink); font: 600 14px/1.25 var(--ad-font); text-align: left; }
.improveab-admin .ad-disclosure > svg { flex: none; width: 16px; height: 16px; color: var(--ad-ink-2); transition: transform 120ms; }
.improveab-admin .ad-disclosure[aria-expanded="true"] > svg { transform: rotate(180deg); }
.improveab-admin .ad-disclosure:is(:hover, .is-hover) { background: var(--ad-hover); }
.improveab-admin .ad-disclosure:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); }

/* ---------- 17. Switch ---------------------------------------------- */
.improveab-admin .ad-switch { position: relative; flex: none; width: 42px; height: 24px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ad-line-3); transition: background-color 120ms, box-shadow 120ms; }
.improveab-admin .ad-switch::after { content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--ad-line-3); transition: transform 120ms, background-color 120ms; }
.improveab-admin .ad-switch:is(:hover, .is-hover) { background: var(--ad-hover); box-shadow: inset 0 0 0 1.5px var(--ad-ink-2); }
.improveab-admin .ad-switch:is([aria-checked="true"], .is-on) { background: var(--ad-ink); box-shadow: none; }
.improveab-admin .ad-switch:is([aria-checked="true"], .is-on)::after { transform: translateX(18px); background: #fff; }
.improveab-admin .ad-switch:is([aria-checked="true"], .is-on):is(:hover, .is-hover) { background: var(--ad-ink-hover); }
.improveab-admin .ad-switch:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: inset 0 0 0 1.5px var(--ad-line-3), var(--ad-ring); }
.improveab-admin .ad-switch:is([aria-checked="true"], .is-on):is(:focus-visible, .is-focus) { box-shadow: var(--ad-ring); }

/* ---------- 18. Settings: nav, one setting per row, the save bar ----- */
.improveab-admin .ad-settings { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.improveab-admin .ad-sidenav { position: sticky; top: calc(var(--ad-bar-h, 32px) + 16px); padding: 8px; }
.improveab-admin .ad-section { overflow: clip; }
.improveab-admin .ad-section__head { padding: 26px 28px 20px; border-bottom: 1px solid var(--ad-line-1); }
.improveab-admin .ad-section__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 600 21px/1.25 var(--ad-font); }
.improveab-admin .ad-section__lede { max-width: 640px; margin-top: 6px; color: var(--ad-muted); font-size: 14.5px; line-height: 1.5; }
.improveab-admin .ad-setting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); align-items: center; gap: 12px 32px; padding: 20px 28px; }
.improveab-admin .ad-setting + .ad-setting { border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-setting--switch { grid-template-columns: minmax(0, 1fr) auto; }
.improveab-admin .ad-setting__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 15px/1.3 var(--ad-font); }
.improveab-admin .ad-setting__help { margin-top: 4px; color: var(--ad-muted); font-size: 13.5px; line-height: 1.5; }
.improveab-admin .ad-setting__control { display: grid; gap: 6px; justify-items: end; }
.improveab-admin .ad-setting__control > .ad-control, .improveab-admin .ad-setting__control > .ad-select { width: 100%; }
.improveab-admin .ad-setting__control .ad-error { justify-self: stretch; margin-top: 0; }
.improveab-admin .ad-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 68px; padding: 12px 28px; border-top: 1px solid var(--ad-line-1); background: #fff; }
.improveab-admin .ad-savebar__status { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--ad-ink-2); font: 500 14px/1.3 var(--ad-font); }
.improveab-admin .ad-savebar__status > svg { flex: none; width: 16px; height: 16px; }
.improveab-admin .ad-savebar__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ad-amber); box-shadow: inset 0 0 0 1.5px var(--ad-amber-ink); }
.improveab-admin .ad-savebar.is-clean .ad-savebar__status { color: var(--ad-muted); }
.improveab-admin .ad-savebar.is-saved .ad-savebar__status { color: var(--ad-green-ink); }
.improveab-admin .ad-savebar.is-saved .ad-savebar__status > svg { color: var(--ad-green); }
.improveab-admin .ad-savebar.is-error .ad-savebar__status { color: var(--ad-red); }
.improveab-admin .ad-aside-note { margin-top: 16px; padding: 0 4px; color: var(--ad-ink-2); font-size: 13.5px; line-height: 1.55; }

/* ---------- 19. Tour: spotlight and step card ------------------------ */
/* In wp-admin the tour is its own layer, appended to <body> so it sits
   over the admin bar (z-index 99999) and the menu:
     <div class="improveab-admin ad-tourlayer" role="presentation">
       .ad-spot (the window) or .ad-scrim (a step with no window), .ad-tour
     </div>
   The script places .ad-spot and .ad-tour from the target's
   getBoundingClientRect(), again on scroll and resize, and sets inert on
   #wpwrap while the tour runs. */
.improveab-admin.ad-tourlayer { position: fixed; inset: 0; z-index: 100000; }
.improveab-admin .ad-scrim { position: absolute; inset: 0; z-index: 40; background: var(--ad-scrim); }
.improveab-admin .ad-spot { position: absolute; z-index: 41; border-radius: 14px; box-shadow: 0 0 0 4px #fff, 0 0 0 9999px var(--ad-scrim); pointer-events: none; }
.improveab-admin .ad-tour { position: absolute; z-index: 42; width: 344px; padding: 20px 20px 16px; border-radius: 16px; background: #fff; box-shadow: var(--ad-shadow-3); }
.improveab-admin .ad-tour::before { content: ""; position: absolute; top: -7px; left: var(--caret, 40px); width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.improveab-admin .ad-tour--caret-left::before { top: var(--caret-y, 28px); left: -7px; }
.improveab-admin .ad-tour--caret-right::before { top: var(--caret-y, 28px); left: auto; right: -7px; }
.improveab-admin .ad-tour--no-caret::before { display: none; }
/* small screens: the card becomes a sheet at the bottom, the spotlight stays */
.improveab-admin .ad-tour--sheet { left: 0; right: 0; bottom: 0; width: auto; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
.improveab-admin .ad-tour--sheet::before { display: none; }
.improveab-admin .ad-tour--sheet .ad-tour__actions .ad-btn { min-height: 44px; }
.improveab-admin .ad-tour__top { display: flex; align-items: center; gap: 10px; }
.improveab-admin .ad-tour__step { color: var(--ad-muted); font: 700 12px/1 var(--ad-font); letter-spacing: .08em; text-transform: uppercase; }
.improveab-admin .ad-dots { display: inline-flex; gap: 4px; }
.improveab-admin .ad-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--ad-line-2); }
.improveab-admin .ad-dots i.is-on { width: 18px; background: var(--ad-ink); }
.improveab-admin .ad-dots i.is-done { background: var(--ad-ink-2); }
.improveab-admin .ad-tour__top .ad-icon-btn { margin: -6px -8px -6px auto; }
.improveab-admin .ad-tour__title { margin-top: 12px; font: 600 18px/1.3 var(--ad-font); }
.improveab-admin .ad-tour__text { margin-top: 6px; color: var(--ad-ink-2); font-size: 14.5px; line-height: 1.5; }
.improveab-admin .ad-tour__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.improveab-admin .ad-tour__actions > :first-child { margin-right: auto; margin-left: -10px; }
.improveab-admin .ad-tour__actions--end { justify-content: flex-end; }
.improveab-admin .ad-tour__actions--end > :first-child { margin: 0; }

/* ---------- 20. Results page ----------------------------------------- */
.improveab-admin .ad-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; padding: 28px; border-radius: 16px; background: #fff; }
.improveab-admin .ad-hero--alert { box-shadow: inset 0 0 0 1.5px var(--ad-red-100); }
.improveab-admin .ad-eyebrow { display: flex; align-items: center; gap: 6px; color: var(--ad-muted); font: 700 12px/1.2 var(--ad-font); letter-spacing: .08em; text-transform: uppercase; }
.improveab-admin .ad-eyebrow > svg { width: 16px; height: 16px; }
.improveab-admin .ad-eyebrow--green { color: var(--ad-green); }
.improveab-admin .ad-eyebrow--red { color: var(--ad-red); }
.improveab-admin .ad-h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font: 700 26px/1.2 var(--ad-font); letter-spacing: -.01em; }
.improveab-admin .ad-hero__text { max-width: 660px; margin-top: 10px; color: var(--ad-ink-2); font-size: 15px; line-height: 1.55; }
.improveab-admin .ad-hero__main > .ad-kpis { margin-top: 24px; }
.improveab-admin .ad-side { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 20px; border-radius: 14px; background: var(--ad-sand-1); }
.improveab-admin .ad-side__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.improveab-admin .ad-side__sep { height: 1px; margin: 4px 0; background: var(--ad-line-2); }
.improveab-admin .ad-side__title { font: 600 15px/1.3 var(--ad-font); }
.improveab-admin .ad-side__text { color: var(--ad-ink-2); font-size: 14px; line-height: 1.5; }
.improveab-admin .ad-block { margin-top: 16px; border-radius: 16px; background: #fff; }
.improveab-admin .ad-block__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 20px 24px; }
.improveab-admin .ad-block__title { font: 600 18px/1.3 var(--ad-font); }
.improveab-admin .ad-block__head > .ad-toolbar { margin-left: auto; gap: 8px; }
.improveab-admin .ad-block__foot { padding: 6px 24px 16px; border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-two { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.improveab-admin .ad-two > .ad-block { margin-top: 16px; }

/* variant cards */
.improveab-admin .ad-vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 24px 24px; }
.improveab-admin .ad-vgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.improveab-admin .ad-vcard { display: grid; align-content: start; gap: 16px; min-width: 0; padding: 20px; border-radius: 14px; background: var(--ad-sand-1); }
.improveab-admin .ad-vcard.is-winner { background: #fff; box-shadow: inset 0 0 0 2px var(--ad-ink); }
.improveab-admin .ad-vcard.is-short { box-shadow: inset 0 0 0 1.5px var(--ad-red-100); }
.improveab-admin .ad-vcard__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.improveab-admin .ad-vcard__head > .ad-letter { margin-top: 1px; }
.improveab-admin .ad-vcard__name { font: 600 15px/1.35 var(--ad-font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* a name the clamp cuts: the script adds .is-cut (scrollHeight > clientHeight)
   and tabindex="0"; a dotted underline says there is more, and the full
   name shows in a .ad-tip--wrap (aria-hidden: the heading already holds
   the whole name for screen readers) */
.improveab-admin .is-cut { text-decoration: underline dotted var(--ad-line-3); text-underline-offset: 3px; border-radius: 3px; }
.improveab-admin .is-cut:focus-visible { outline: 2px solid transparent; box-shadow: var(--ad-ring); }
.improveab-admin .ad-vcard__body { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.improveab-admin .ad-rate { color: var(--ad-ink); font: 700 44px/1 var(--ad-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.improveab-admin .ad-rate small { display: block; margin-top: 6px; color: var(--ad-muted); font: 500 13px/1.2 var(--ad-font); letter-spacing: 0; }
.improveab-admin .ad-rate--early { color: var(--ad-ink-2); font-size: 30px; }
.improveab-admin .ad-rate--sm { font-size: 32px; }
.improveab-admin .ad-stats { display: flex; gap: 20px; }
.improveab-admin .ad-stat { text-align: right; }
.improveab-admin .ad-stat span { display: block; color: var(--ad-muted); font: 500 12px/1.2 var(--ad-font); }
.improveab-admin .ad-stat b { display: block; margin-top: 4px; font: 700 18px/1 var(--ad-font); font-variant-numeric: tabular-nums; }
.improveab-admin .ad-bar { height: 8px; border-radius: 4px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ad-line-1); }
.improveab-admin .ad-vcard.is-winner .ad-bar { background: var(--ad-sand-2); box-shadow: none; }
.improveab-admin .ad-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--c, var(--ad-ink-2)); }
.improveab-admin .ad-vcard__note { display: flex; align-items: flex-start; gap: 6px; color: var(--ad-ink-2); font: 500 13px/1.4 var(--ad-font); }
.improveab-admin .ad-vcard__note > svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }

/* compare table (table view, six variants) */
.improveab-admin .ad-ctable { width: 100%; border-collapse: separate; border-spacing: 0; }
.improveab-admin .ad-ctable th { padding: 0 16px 10px; color: var(--ad-muted); font: 600 12px/1.2 var(--ad-font); letter-spacing: .08em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--ad-line-1); }
.improveab-admin .ad-ctable td { padding: 14px 16px; border-bottom: 1px solid var(--ad-line-1); vertical-align: middle; font-variant-numeric: tabular-nums; }
.improveab-admin .ad-ctable :is(th, td).ad-num { text-align: right; }
.improveab-admin .ad-ctable tr:last-child td { border-bottom: 0; }
.improveab-admin .ad-ctable__name { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; font: 600 14px/1.35 var(--ad-font); }
.improveab-admin .ad-ctable__name > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.improveab-admin .ad-ctable .ad-bar { width: 120px; background: var(--ad-sand-2); box-shadow: none; }
/* a wide table scrolls inside its own box on narrow pages; the box takes
   focus so the keyboard can scroll it:
   <div class="ad-scroll-x" tabindex="0" role="region" aria-label="..."> */
.improveab-admin .ad-scroll-x { overflow-x: auto; border-radius: 0 0 16px 16px; }
.improveab-admin .ad-scroll-x > .ad-ctable { min-width: 640px; }
.improveab-admin .ad-scroll-x:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring-inset); }
/* the rate bars in cards and the table share the chart's scale: the full
   width is the chart's axis maximum, the highest daily rate rounded up to
   the next 2 %, so bars and lines read the same */

/* rows with a chevron (Test setup) */
.improveab-admin .ad-list { display: grid; }
.improveab-admin .ad-list__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 20px 0 24px; border-top: 1px solid var(--ad-line-1); color: var(--ad-ink); font: 600 15px/1.3 var(--ad-font); text-align: left; text-decoration: none; transition: background-color 120ms; }
.improveab-admin .ad-list__row > svg { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--ad-ink-2); }
.improveab-admin .ad-list__row:last-child { border-radius: 0 0 16px 16px; }
.improveab-admin .ad-list__row:is(:hover, .is-hover) { background: var(--ad-hover); }
.improveab-admin .ad-list__row:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring-inset); }

/* traffic split warning: facts and causes */
.improveab-admin .ad-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-fact { display: grid; gap: 6px; padding: 14px 16px 0 0; }
.improveab-admin .ad-fact + .ad-fact { padding-left: 16px; border-left: 1px solid var(--ad-line-1); }
.improveab-admin .ad-fact span { color: var(--ad-muted); font: 500 13px/1.3 var(--ad-font); }
.improveab-admin .ad-fact b { font: 700 20px/1.2 var(--ad-font); font-variant-numeric: tabular-nums; }
.improveab-admin .ad-fact b.is-off { color: var(--ad-red); }
.improveab-admin .ad-causes { display: grid; gap: 8px; margin-top: 18px; }
.improveab-admin .ad-causes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; color: var(--ad-ink-2); font-size: 14px; line-height: 1.5; }
.improveab-admin .ad-causes li > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ad-sand-2); color: var(--ad-ink); font: 700 12px/1 var(--ad-font); }

/* chart */
.improveab-admin .ad-chart { padding: 0 24px 24px; }
.improveab-admin .ad-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.improveab-admin .ad-chart__axis { fill: var(--ad-muted); font: 500 12px var(--ad-font); }

/* confirm dialog */
.improveab-admin .ad-dialog { width: 420px; max-width: calc(100vw - 32px); padding: 24px; border-radius: 16px; background: #fff; box-shadow: var(--ad-shadow-3); }

/* a status line at the top of a page, for one visit ("Test started") */
.improveab-admin .ad-status { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--ad-green-100); color: var(--ad-green-ink); font: 500 14px/1.45 var(--ad-font); }
.improveab-admin .ad-status > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ad-green); }
.improveab-admin .ad-status b { font-weight: 600; }
.improveab-admin .ad-dialog__title { font: 600 19px/1.3 var(--ad-font); }
.improveab-admin .ad-dialog__text { margin-top: 8px; color: var(--ad-ink-2); font-size: 14.5px; line-height: 1.55; }
.improveab-admin .ad-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* ---------- 21. How to read these numbers ---------------------------- */
.improveab-admin .ad-howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; padding: 6px 24px 24px; }
.improveab-admin .ad-howto h3 { font: 600 15px/1.3 var(--ad-font); }
.improveab-admin .ad-howto p { margin-top: 6px; color: var(--ad-ink-2); font-size: 14px; line-height: 1.55; }
.improveab-admin .ad-howto__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 14px; border-top: 1px solid var(--ad-line-1); color: var(--ad-muted); font-size: 13.5px; }

/* ---------- 22. Guide --------------------------------------------- */
.improveab-admin .ad-quick { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; padding: 28px; }
.improveab-admin .ad-quick__title { font: 700 22px/1.25 var(--ad-font); }
.improveab-admin .ad-numlist { display: grid; gap: 14px; margin-top: 18px; counter-reset: ad-step; }
.improveab-admin .ad-numlist li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; counter-increment: ad-step; }
.improveab-admin .ad-numlist li::before { content: counter(ad-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ad-line-3); font: 700 13px/1 var(--ad-font); }
.improveab-admin .ad-numlist b { display: block; font: 600 15px/1.35 var(--ad-font); }
.improveab-admin .ad-numlist span { display: block; margin-top: 2px; color: var(--ad-muted); font-size: 14px; line-height: 1.45; }
.improveab-admin .ad-topics { margin-top: 16px; border-radius: 16px; background: #fff; }
.improveab-admin .ad-topics__title { padding: 22px 24px 14px; font: 600 18px/1.3 var(--ad-font); }
.improveab-admin .ad-topic { border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-topic__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 14px 24px; text-align: left; transition: background-color 120ms; }
.improveab-admin .ad-topic:last-child .ad-topic__head:not([aria-expanded="true"]) { border-radius: 0 0 16px 16px; }
.improveab-admin .ad-topic__head b { display: block; font: 600 16px/1.3 var(--ad-font); }
.improveab-admin .ad-topic__head span { display: block; margin-top: 3px; color: var(--ad-muted); font-size: 14px; }
.improveab-admin .ad-topic__head > svg { width: 18px; height: 18px; color: var(--ad-ink-2); transition: transform 120ms; }
.improveab-admin .ad-topic__head[aria-expanded="true"] > svg { transform: rotate(180deg); }
.improveab-admin .ad-topic__head:is(:hover, .is-hover) { background: var(--ad-hover); }
.improveab-admin .ad-topic__head:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring-inset); }
.improveab-admin .ad-topic__body { display: grid; gap: 16px; max-width: 820px; padding: 4px 24px 28px; color: var(--ad-ink-2); font-size: 15px; line-height: 1.6; }
.improveab-admin .ad-topic__body h4 { color: var(--ad-ink); font: 600 15px/1.35 var(--ad-font); }
.improveab-admin .ad-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.improveab-admin .ad-kind { padding: 16px 18px; border-radius: 12px; background: var(--ad-sand-1); font-size: 14px; line-height: 1.5; }
.improveab-admin .ad-kind b { display: block; margin-bottom: 4px; color: var(--ad-ink); font: 600 15px/1.3 var(--ad-font); }

/* ---------- 23. Narrow pages (container query on .ad-page) ----------- */
@container adpage (max-width: 900px) {
  .improveab-admin .ad-layout, .improveab-admin .ad-settings, .improveab-admin .ad-hero, .improveab-admin .ad-two, .improveab-admin .ad-quick { grid-template-columns: minmax(0, 1fr); }
  .improveab-admin .ad-rail, .improveab-admin .ad-sidenav { position: static; }
  .improveab-admin .ad-vgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .improveab-admin .ad-howto { grid-template-columns: minmax(0, 1fr); }
}
@container adpage (max-width: 600px) {
  .improveab-admin .ad-plan { margin-left: 0; }
  .improveab-admin .ad-step__body { padding: 22px 20px 24px; }
  .improveab-admin .ad-step__head { padding: 14px 16px; column-gap: 12px; }
  .improveab-admin .ad-choices, .improveab-admin .ad-vgrid, .improveab-admin .ad-vgrid--3, .improveab-admin .ad-kinds, .improveab-admin .ad-facts { grid-template-columns: minmax(0, 1fr); }
  .improveab-admin .ad-fact + .ad-fact { padding-left: 0; border-left: 0; }
  .improveab-admin .ad-setting, .improveab-admin .ad-setting--switch { grid-template-columns: minmax(0, 1fr); padding: 18px 20px; }
  .improveab-admin .ad-setting__control { justify-items: stretch; }
  .improveab-admin .ad-setting--switch .ad-setting__control { justify-items: start; }
  .improveab-admin .ad-savebar { padding: 12px 20px; }
  .improveab-admin :is(.ad-section__head) { padding-left: 20px; padding-right: 20px; }
  .improveab-admin .ad-rail__actions { position: sticky; bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .improveab-admin * { transition-duration: 0ms !important; }
  .improveab-admin .ad-spin { animation: none; border-right-color: currentColor; opacity: .6; }
}
@media (forced-colors: active) {
  .improveab-admin :is(.ad-btn, .ad-icon-btn, .ad-seg__item, .ad-tabs__item, .ad-nav__item, .ad-step__head, .ad-topic__head, .ad-list__row, .ad-switch, .ad-choice, .ad-disclosure, .ad-link, .ad-name, .ad-back, .ad-scroll-x):focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .improveab-admin .ad-control:focus, .improveab-admin .ad-control--unit:focus-within { outline: 2px solid CanvasText; outline-offset: 1px; }
  /* the ink fill of a selected or current item is lost here: outline it */
  .improveab-admin :is(.ad-seg__item, .ad-tabs__item, .ad-nav__item, .ad-icon-btn, .ad-choice, .ad-option):is([aria-current="page"], [aria-current="step"], [aria-current="true"], [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-selected) { outline: 2px solid Highlight; outline-offset: -2px; }
  .improveab-admin .ad-switch { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  .improveab-admin .ad-switch::after { background: CanvasText; }
  .improveab-admin .ad-switch:is([aria-checked="true"], .is-on) { background: Highlight; border-color: Highlight; }
  .improveab-admin .ad-switch:is([aria-checked="true"], .is-on)::after { background: HighlightText; }
}

/* === Build additions: frame, list and results === */
/* Everything above is the design system and its screens. What
   follows is what the live screens add to it: the font files, the
   wp-admin page around the app, the tests list's own parts, and the
   results page's moving pieces (setup rows, the Winner list, the chart,
   the confirm's layer). Same scope, same tokens, same state rules. */

/* Hanken Grotesk (SIL Open Font License, see ../fonts/OFL.txt), bundled
   so the admin never fetches a font from a third party. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin-wght.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin-ext-wght.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 24. The wp-admin page around the app --------------------- */
/* The canvas under the app, the footer included, takes the page colour
   (the token as a literal: body is outside the scope), and the app runs
   edge to edge in the content area with its own gutters. Notices other
   plugins print into the wrap keep a gutter too. */
body[class*="page_improveab"],
body[class*="page_improveab"] #wpcontent,
body[class*="page_improveab"] #wpfooter { background: #efece4; }
body[class*="page_improveab"] #wpcontent { padding-left: 0; }
.improveab-wrap.improveab-admin { margin: 0; padding: 0; }
.improveab-wrap > :is(.notice, .updated, .error) { margin: 12px 20px 0; }
.improveab-admin.ad-page { max-width: 1440px; }
/* A tooltip waiting to show (300 px, hidden) near the page's edge still
   counts as overflow, and on a phone the page would scroll sideways for
   it; clip does not make a scroll container, so sticky parts keep
   working. Tooltips are anchored to stay inside where they show. */
@supports (overflow: clip) {
  .improveab-admin.ad-page { overflow-x: clip; }
}
/* wp-admin's common.css indents dd and spaces dl; the tiles are a dl */
.improveab-admin :is(dl, dt, dd) { margin: 0; }
.improveab-admin code.ad-code { margin: 0; }
.improveab-admin .ad-head__main { flex: 0 1 auto; min-width: 0; max-width: 760px; }
.improveab-admin .ad-head--list { margin-top: 14px; }
.improveab-admin .ad-head__desc { max-width: 720px; }
.improveab-admin .ad-loading { display: flex; align-items: center; gap: 10px; padding: 40px 0; color: var(--ad-muted); font: 500 14px/1.3 var(--ad-font); }
.improveab-admin .ad-notice { margin-bottom: 16px; }
.improveab-admin #improveab-app > .ad-status { margin: 10px 0 6px; }
/* "Saved", for a moment, beside the button that saved */
.improveab-admin .ad-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--ad-green-ink); font: 600 14px/1.2 var(--ad-font); }
.improveab-admin .ad-saved > svg { width: 16px; height: 16px; color: var(--ad-green); }
/* a "?" beside a tile's label is the 26 px one */
.improveab-admin .ad-kpi__label .ad-icon-btn--sm { width: 26px; height: 26px; }
/* Esc hides a tooltip until the pointer or the focus leaves it */
.improveab-admin .ad-tipwrap.is-hushed > .ad-tip { opacity: 0; visibility: hidden; transition: none; }

/* ---------- 25. Tests list ------------------------------------------- */
.improveab-admin .ad-listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.improveab-admin .ad-perpage { display: flex; align-items: center; gap: 10px; color: var(--ad-muted); font: 500 14px/1.2 var(--ad-font); }
.improveab-admin .ad-perpage .ad-select { width: 96px; }
.improveab-admin :is(.ad-perpage, .ad-bulkbar) .ad-control { min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
.improveab-admin .ad-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--ad-line-1); border-radius: 16px 16px 0 0; background: var(--ad-sand-1); }
.improveab-admin .ad-bulkbar__count { margin-right: auto; font: 600 14px/1.3 var(--ad-font); }
.improveab-admin .ad-bulkbar .ad-select { width: 200px; }
/* the card keeps its corners without clipping, so a tooltip at the last
   row still shows: the last row's end cells take the radius instead */
.improveab-admin .ad-tests .ad-table tbody tr:last-child td:first-child { border-bottom-left-radius: 16px; }
.improveab-admin .ad-tests .ad-table tbody tr:last-child td:last-child { border-bottom-right-radius: 16px; }
.improveab-admin .ad-table :is(th, td).ad-col-check { width: 56px; padding-right: 0; }
.improveab-admin .ad-table :is(th, td).ad-col-check > input { display: block; }
.improveab-admin .ad-table th.ad-col-status { width: 150px; }
.improveab-admin .ad-table th.ad-num { width: 120px; }
.improveab-admin .ad-table .ad-num { white-space: nowrap; }
.improveab-admin .ad-table td.ad-num--word { white-space: normal; }
.improveab-admin .ad-table .ad-col-actions { width: 1%; white-space: nowrap; }
.improveab-admin .ad-table td.ad-col-actions { padding: 8px 12px 8px 8px; }
.improveab-admin .ad-row.is-selected td { background: var(--ad-sand-1); }
.improveab-admin .ad-row.is-selected:is(:hover, :focus-within, .is-hover) td { background: var(--ad-hover); }
/* a name is whatever a person typed: one long word (a German compound,
   a product code) breaks rather than widening its box */
.improveab-admin :is(.ad-name, .ad-desc, .ad-title, .ad-h2, .ad-vcard__name, .ad-kpi__lead, .ad-ctable__name, .ad-option, .ad-copyrow__name, .ad-dialog__text, .ad-meta) { overflow-wrap: anywhere; }
.improveab-admin .ad-sub--tag { display: flex; justify-content: flex-end; margin-top: 5px; }
.improveab-admin .ad-sub--tag > .ad-tag { height: 20px; }
.improveab-admin .ad-rowstats { display: none; }
.improveab-admin .ad-winner { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.improveab-admin .ad-winner__name { min-width: 0; max-width: 220px; overflow: hidden; color: var(--ad-ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* the quick actions: words where there is room; where there is not, the
   icon with the word as a tooltip (the word stays the button's name) */
.improveab-admin .ad-qa .ad-tip { display: none; }
.improveab-admin .ad-rowmenu { position: fixed; z-index: 1000; }
.improveab-admin .ad-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-pager__info { color: var(--ad-muted); font-size: 13px; }
.improveab-admin .ad-tests__empty { padding: 24px; }
/* The list's checkboxes: real inputs drawn as the design's box, ink when
   ticked (wp-admin draws its own, blue). */
.improveab-admin input.ad-cb { position: relative; flex: none; width: 20px; min-width: 20px; height: 20px; margin: 0; padding: 0; border: 1.5px solid var(--ad-line-3); border-radius: 5px; background: #fff; box-shadow: none; cursor: pointer; vertical-align: middle; -webkit-appearance: none; appearance: none; transition: background-color 120ms, border-color 120ms; }
.improveab-admin input.ad-cb:not(:checked):hover, .improveab-admin .ad-row:is(:hover, .is-hover) input.ad-cb:not(:checked) { border-color: var(--ad-ink-2); }
.improveab-admin input.ad-cb:checked { border-color: var(--ad-ink); background: var(--ad-ink); }
.improveab-admin input.ad-cb:checked::before { content: ""; position: absolute; left: 5.5px; top: 1.5px; float: none; width: 6px; height: 11px; margin: 0; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.improveab-admin input.ad-cb:focus { border-color: var(--ad-line-3); box-shadow: none; outline: 2px solid transparent; }
.improveab-admin input.ad-cb:checked:focus { border-color: var(--ad-ink); }
.improveab-admin input.ad-cb:focus-visible { box-shadow: var(--ad-ring); }

/* ---------- 26. First visit: the welcome card ------------------------ */
.improveab-admin .ad-welcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px 48px; padding: 40px; }
.improveab-admin .ad-welcome__copy { display: grid; align-content: start; gap: 18px; min-width: 0; }
.improveab-admin .ad-welcome__title { font: 700 36px/1.1 var(--ad-font); letter-spacing: -.02em; }
.improveab-admin .ad-welcome__text { max-width: 540px; color: var(--ad-ink-2); font-size: 16px; line-height: 1.55; }
.improveab-admin ul.ad-ticks { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 32px; }
.improveab-admin ul.ad-ticks li { display: flex; align-items: center; gap: 8px; font: 600 14.5px/1.3 var(--ad-font); }
.improveab-admin ul.ad-ticks svg { flex: none; width: 18px; height: 18px; color: var(--ad-green); }
.improveab-admin .ad-welcome__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.improveab-admin .ad-welcome__side { align-self: start; padding: 24px; border-radius: 14px; background: var(--ad-sand-1); }
.improveab-admin .ad-welcome__side .ad-numlist { margin-top: 16px; }

/* ---------- 27. Results: hero, tiles, controls ----------------------- */
.improveab-admin .ad-hero--solo { grid-template-columns: minmax(0, 1fr); }
.improveab-admin .ad-h2 > .ad-letter { align-self: center; }
.improveab-admin .ad-hero__link { margin-top: 12px; }
/* a link-styled button reads like the link it looks like */
.improveab-admin button.ad-link { text-align: left; }
/* The tiles lay out by the verdict column's own width: four across where
   they fit, two by two where they do not. A tile that starts a row has no
   left rule. */
.improveab-admin .ad-hero__main { container: adhero / inline-size; min-width: 0; }
@container adhero (max-width: 620px) {
  .improveab-admin .ad-h2 .ad-tip { left: auto; right: -6px; transform: none; }
  .improveab-admin .ad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .improveab-admin .ad-kpis > .ad-kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
  .improveab-admin .ad-kpis > .ad-kpi:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--ad-line-1); }
  .improveab-admin .ad-kpis > .ad-kpi:nth-child(n+3) { border-top: 1px solid var(--ad-line-1); }
}
/* Three tiles (no store goal): two by two leaves the third alone, so it
   takes the whole second row and its rule runs the full width. */
@container adhero (max-width: 620px) {
  .improveab-admin .ad-kpis > .ad-kpi:nth-child(3):last-child { grid-column: 1 / -1; }
}
.improveab-admin .ad-kpi--lead { min-width: 0; }
.improveab-admin .ad-ctable abbr { text-decoration: none; }
.improveab-admin .ad-kpi__value.is-good { color: var(--ad-green); }
.improveab-admin .ad-kpi__word { display: block; color: var(--ad-ink); font-weight: 600; }
.improveab-admin .ad-kpi__why { display: block; }
.improveab-admin .ad-side__note { color: var(--ad-muted); font-size: 13px; }
.improveab-admin .ad-side__text > b { color: var(--ad-ink); font-weight: 600; }
.improveab-admin .ad-side__more { display: grid; gap: 8px; }
.improveab-admin .ad-side > .ad-disclosure { justify-self: start; }
/* Winner: the list opens over the page right under its button. A block,
   not a grid: the list keeps its place under the button (a grid would
   put it at the top), and a long chosen name cuts instead of widening
   the panel. */
.improveab-admin .ad-winpick { position: relative; display: block; }
.improveab-admin .ad-winpick > .ad-side__title { display: block; margin-bottom: 8px; }
.improveab-admin .ad-winpick > .ad-listbox { position: absolute; left: 0; right: 0; z-index: 25; max-height: min(420px, 60vh); overflow-y: auto; }
.improveab-admin .ad-winpick > .ad-listbox:focus { outline: 2px solid transparent; }
.improveab-admin[data-ad-input="keyboard"] .ad-winpick > .ad-listbox:focus { box-shadow: var(--ad-ring), var(--ad-shadow-2); }
.improveab-admin .ad-winpick .ad-option { cursor: pointer; }


/* ---------- 28. Results: variant cards, table, devices --------------- */
.improveab-admin .ad-vcard__tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.improveab-admin .ad-cutwrap { display: block; min-width: 0; }
.improveab-admin .ad-stat b.is-off { color: var(--ad-red); }
.improveab-admin .ad-board__note { margin: 0 24px 16px; }
/* a device switch on the open test dims the numbers, no blank page */
.improveab-admin .ad-board.is-busy > :not(.ad-block__head) { opacity: .55; transition: opacity 120ms; }
.improveab-admin .ad-board__table { padding: 0 8px 8px; }
.improveab-admin .ad-ctable th { white-space: nowrap; }
.improveab-admin .ad-ctable__variant { min-width: 240px; }
.improveab-admin .ad-ctable__name .ad-tag { margin-left: 6px; vertical-align: 1px; }
.improveab-admin .ad-ctable__muted { color: var(--ad-muted); font-weight: 500; }
.improveab-admin .ad-ctable__meter { width: 152px; }
.improveab-admin .ad-ctable__meter .ad-progress__track { min-width: 120px; }
.improveab-admin .ad-ctable b { font-weight: 700; }
.improveab-admin .ad-block__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.improveab-admin .ad-block__foot > .ad-disclosure { margin-top: 10px; }
.improveab-admin .ad-howto__foot > .ad-link { margin-left: auto; }
.improveab-admin .ad-devices { padding: 0 8px 16px; }
.improveab-admin .ad-devices__wait, .improveab-admin .ad-devices__hint { padding: 8px 16px 0; }
.improveab-admin .ad-devtable__n { display: block; margin-top: 3px; color: var(--ad-muted); font: 500 12px/1.2 var(--ad-font); white-space: nowrap; }
.improveab-admin .ad-devtable td.is-best b { box-shadow: inset 0 -2px 0 var(--ad-ink); }
.improveab-admin .ad-devtable tr.is-all td { font-weight: 600; }
.improveab-admin .ad-daystable__name { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; }
.improveab-admin .ad-daystable__name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 29. Results: the chart ----------------------------------- */
.improveab-admin .ad-block__aside { margin-left: auto; color: var(--ad-muted); font: 500 14px/1.3 var(--ad-font); }
.improveab-admin .ad-block__head--top { align-items: flex-start; }
.improveab-admin .ad-block__heading { min-width: 0; }
.improveab-admin .ad-block__sub { margin-top: 4px; color: var(--ad-muted); font-size: 13.5px; line-height: 1.45; }
.improveab-admin .ad-block__head > .ad-legend { margin: 4px 0 0 auto; }
.improveab-admin .ad-chartblock > .ad-chart-empty { margin: 0 24px 24px; }
/* One column that never grows past its box: on a phone, a legend of long
   names would widen the empty state's column, and the centred words with
   it. The legend and its entries shrink to the room instead, and the cut
   names take the ellipsis sooner. */
.improveab-admin .ad-chart-empty { grid-template-columns: minmax(0, 1fr); }
.improveab-admin .ad-legend { min-width: 0; max-width: 100%; }
.improveab-admin .ad-legend > span { min-width: 0; max-width: 100%; }
.improveab-admin .ad-chart__plot { position: relative; }
.improveab-admin .ad-chart__svg { border-radius: 6px; }
.improveab-admin .ad-chart__svg:focus { outline: none; }
.improveab-admin .ad-chart__svg:focus-visible { outline: 2px solid var(--ad-ink); outline-offset: 3px; }
.improveab-admin .ad-chart__grid line { stroke: var(--ad-line-1); stroke-width: 1; }
.improveab-admin .ad-chart__grid line.is-base { stroke: var(--ad-line-2); }
.improveab-admin .ad-chart__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.improveab-admin .ad-chart__cursor { stroke: var(--ad-line-3); stroke-width: 1; stroke-dasharray: 3 3; }
.improveab-admin .ad-chart__hdot { fill: #fff; stroke-width: 2.5; }
.improveab-admin .ad-chart__end { font: 700 12.5px var(--ad-font); font-variant-numeric: tabular-nums; }
.improveab-admin .ad-chart__tip { position: absolute; z-index: 5; display: grid; gap: 6px; min-width: 200px; max-width: 280px; padding: 10px 12px; border-radius: 10px; background: var(--ad-ink); color: #fff; font: 500 13px/1.35 var(--ad-font); box-shadow: var(--ad-shadow-2); pointer-events: none; }
.improveab-admin .ad-chart__tipday { font-weight: 700; }
.improveab-admin .ad-chart__tiprow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.improveab-admin .ad-chart__tipname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.improveab-admin .ad-chart__tiprow > b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.improveab-admin .ad-chart__tipn { color: var(--ad-on-ink-2); font-size: 12px; }
.improveab-admin .ad-chart__more { padding: 0 24px 20px; font-size: 13.5px; }
.improveab-admin .ad-days { padding: 0 8px 16px; }

/* ---------- 30. Results: the setup rows ------------------------------ */
/* Each row opens in place (details and summary): the chevron turns down
   when it is open, and the last closed row takes the card's corners. */
.improveab-admin .ad-setuprow > summary { list-style: none; cursor: pointer; }
.improveab-admin .ad-setuprow > summary::-webkit-details-marker { display: none; }
.improveab-admin .ad-setuprow > summary::marker { content: ""; }
.improveab-admin .ad-setuprow > summary > svg { transition: transform 120ms; }
.improveab-admin .ad-setuprow[open] > summary > svg { transform: rotate(90deg); }
.improveab-admin .ad-list > .ad-setuprow:last-child:not([open]) > .ad-list__row { border-radius: 0 0 16px 16px; }
.improveab-admin .ad-list__row > .ad-tag { margin-left: 2px; }
.improveab-admin .ad-list__title { min-width: 0; }
.improveab-admin .ad-setup { display: grid; gap: 16px; padding: 6px 24px 24px; }
.improveab-admin .ad-setup--card { padding-top: 0; }
.improveab-admin .ad-setup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.improveab-admin .ad-help--lead { color: var(--ad-ink-2); font-size: 14.5px; }
.improveab-admin .ad-sentnote { flex-basis: 100%; }
.improveab-admin .ad-copyrow__main { min-width: 0; }
.improveab-admin .ad-copyrow__name > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.improveab-admin .ad-copyrow .ad-btn { min-width: 92px; }
.improveab-admin .ad-copyrow .ad-btn.is-failed { color: var(--ad-red); }
.improveab-admin .ad-previewlinks { display: grid; gap: 8px; }
.improveab-admin .ad-previewlinks ul { display: grid; gap: 8px; }
.improveab-admin .ad-previewlinks .ad-link { display: inline-flex; align-items: center; gap: 8px; }
.improveab-admin .ad-previewlinks .ad-link > .ad-letter { text-decoration: none; }
/* folded code and sub-sections in a row: a disclosure as the summary */
.improveab-admin :is(.ad-codebox, .ad-subrow) > summary { list-style: none; cursor: pointer; }
.improveab-admin :is(.ad-codebox, .ad-subrow) > summary::-webkit-details-marker { display: none; }
.improveab-admin :is(.ad-codebox, .ad-subrow) > summary::marker { content: ""; }
.improveab-admin :is(.ad-codebox, .ad-subrow)[open] > summary > svg { transform: rotate(180deg); }
.improveab-admin .ad-disclosure__aside { color: var(--ad-muted); font-weight: 500; }
.improveab-admin .ad-codebox__body { display: grid; gap: 14px; margin-top: 8px; }
.improveab-admin .ad-codevar { display: grid; gap: 6px; }
.improveab-admin .ad-codevar__label { color: var(--ad-muted); font: 700 12px/1.2 var(--ad-font); letter-spacing: .06em; text-transform: uppercase; }
.improveab-admin .ad-pre { max-height: 240px; margin: 0; padding: 10px 12px; overflow: auto; border-radius: 8px; background: var(--ad-sand-1); box-shadow: inset 0 0 0 1px var(--ad-line-1); color: var(--ad-ink); font: 500 12.5px/1.5 var(--ad-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.improveab-admin .ad-editrules { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-editrules__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 600 15px/1.3 var(--ad-font); }
.improveab-admin .ad-subrow + .ad-subrow { padding-top: 4px; border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-subrow__body { display: grid; gap: 12px; padding: 8px 0 12px; }
.improveab-admin .ad-subrow > .ad-disclosure { gap: 8px; }
.improveab-admin .ad-goalfields { display: grid; gap: 12px; }
.improveab-admin .ad-setup .ad-field { max-width: none; min-width: 0; }
.improveab-admin .ad-setup .ad-varname > .ad-control--num { max-width: 140px; }
/* The rule fields (goal, pages and the rest) come from the New test
   form's helpers; inside a setup row they take the same field look. */
.improveab-admin .ad-setup .improveab-field { display: grid; gap: 8px; }
.improveab-admin .ad-setup .improveab-field > label { display: grid; gap: 8px; }
.improveab-admin .ad-setup .improveab-field-label { color: var(--ad-ink); font: 600 14px/1.3 var(--ad-font); }
.improveab-admin .ad-setup .improveab-hint { color: var(--ad-muted); font-size: 13.5px; line-height: 1.5; }
.improveab-admin .ad-setup .improveab-field :is(input[type="text"], input[type="number"], input[type="url"], select, textarea) { width: 100%; max-width: none; min-height: 44px; margin: 0; padding: 10px 14px; border: 1px solid var(--ad-line-3); border-radius: 10px; background: #fff; box-shadow: none; color: var(--ad-ink); font: 400 15px/1.35 var(--ad-font); }
.improveab-admin .ad-setup .improveab-field select { padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d3a34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px; -webkit-appearance: none; appearance: none; }
.improveab-admin .ad-setup .improveab-field :is(input, select, textarea):hover { border-color: var(--ad-ink-2); color: var(--ad-ink); }
.improveab-admin .ad-setup .improveab-field :is(input[type="text"], input[type="number"], input[type="url"], select, textarea):focus { outline: none; border-color: var(--ad-ink); box-shadow: var(--ad-halo); color: var(--ad-ink); }
.improveab-admin[data-ad-input="keyboard"] .ad-setup .improveab-field :is(input[type="text"], input[type="number"], input[type="url"], select, textarea):focus { box-shadow: var(--ad-ring); }
.improveab-admin .ad-setup .improveab-field [aria-invalid="true"] { border-color: var(--ad-red); }

/* ---------- 31. The confirm's layer ---------------------------------- */
/* Appended to <body>, so it sits over the admin bar and the menu; the
   dialog never gets wider than the screen. */
.improveab-admin.ad-dialoglayer { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: 16px; }
.improveab-admin.ad-dialoglayer > .ad-scrim { z-index: 0; }
.improveab-admin.ad-dialoglayer > .ad-dialog { position: relative; z-index: 1; }

/* ---------- 33. Narrow pages: list, results, welcome ----------------- */
@container adpage (max-width: 1000px) {
  .improveab-admin .ad-qa__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .improveab-admin .ad-qa .ad-btn--sm { width: 32px; padding: 0; }
  .improveab-admin .ad-qa .ad-tip { display: block; }
  .improveab-admin .ad-table :is(th, td) { padding-right: 12px; padding-left: 12px; }
  .improveab-admin .ad-table :is(th, td).ad-col-check { width: 48px; padding-right: 0; }
}
@container adpage (max-width: 900px) {
  .improveab-admin .ad-welcome { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .improveab-admin .ad-block__head > .ad-legend { margin-left: 0; }
}
/* phones: each row is a card of its own, the figures ride along beside
   the status pill, the actions show without a hover, and every target
   is 44 px */
@container adpage (max-width: 700px) {
  /* a wrapping tip is narrower on a phone, so from wherever its button
     sits it stays on screen when it shows */
  .improveab-admin .ad-tip--wrap { max-width: calc(100vw - 140px); }
  .improveab-admin .ad-listbar { gap: 8px; }
  .improveab-admin .ad-filters .ad-seg__item { min-height: 44px; padding: 0 12px; }
  .improveab-admin :is(table.ad-table, .ad-table thead, .ad-table tbody) { display: block; }
  .improveab-admin .ad-table tr { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
  .improveab-admin .ad-table thead tr { align-items: center; min-height: 52px; padding: 0 16px 0 4px; border-bottom: 1px solid var(--ad-line-1); }
  .improveab-admin .ad-table thead th { display: block; height: auto; padding: 0; border: 0; }
  .improveab-admin .ad-table thead th:nth-child(n+3) { display: none; }
  .improveab-admin .ad-table tbody tr { padding: 14px 12px 8px 4px; border-bottom: 1px solid var(--ad-line-1); transition: background-color 120ms; }
  .improveab-admin .ad-table tbody tr:last-child { border-bottom: 0; border-radius: 0 0 16px 16px; }
  .improveab-admin .ad-table td { display: block; width: auto; padding: 0; border: 0; }
  .improveab-admin .ad-row.is-selected { background: var(--ad-sand-1); }
  .improveab-admin .ad-row:is(:hover, :focus-within, .is-hover) { background: var(--ad-hover); }
  .improveab-admin .ad-row:is(.is-selected, :hover, :focus-within, .is-hover) td { background: transparent; }
  .improveab-admin .ad-table :is(th, td).ad-col-check { grid-column: 1; display: flex; align-items: center; justify-content: center; width: auto; min-width: 44px; min-height: 44px; padding: 0; }
  .improveab-admin .ad-table td.ad-col-check { grid-row: 1 / span 3; align-items: flex-start; margin-top: -12px; padding-top: 12px; }
  .improveab-admin .ad-table .ad-col-main { grid-column: 2; }
  .improveab-admin .ad-table td.ad-col-status { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; white-space: normal; }
  .improveab-admin .ad-table td.ad-num { display: none; }
  .improveab-admin .ad-rowstats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ad-muted); font: 500 13px/1.3 var(--ad-font); }
  .improveab-admin .ad-table td.ad-col-actions { grid-column: 2; width: auto; margin: 6px 0 0 -10px; white-space: normal; }
  .improveab-admin .ad-actions { flex-wrap: wrap; justify-content: flex-start; }
  .improveab-admin .ad-qa { visibility: visible; }
  .improveab-admin .ad-qa__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .improveab-admin .ad-qa .ad-btn--sm { width: auto; min-height: 44px; padding: 0 10px; }
  .improveab-admin .ad-qa .ad-tip { display: none; }
  .improveab-admin .ad-actions .ad-icon-btn--sm { width: 44px; height: 44px; }
  .improveab-admin .ad-tests .ad-table tbody tr:last-child td { border-radius: 0; }
  .improveab-admin .ad-bulkbar { padding: 12px 16px; }
  .improveab-admin .ad-bulkbar__count { flex: 1 1 100%; }
  .improveab-admin .ad-bulkbar .ad-select { flex: 1 1 auto; width: auto; }
  .improveab-admin :is(.ad-bulkbar, .ad-pager) .ad-btn { min-height: 44px; }
  .improveab-admin .ad-welcome { padding: 20px; gap: 24px; }
  .improveab-admin .ad-welcome__title { font-size: 28px; }
  .improveab-admin .ad-welcome__text { font-size: 15px; }
  .improveab-admin ul.ad-ticks { grid-template-columns: minmax(0, 1fr); }
  .improveab-admin .ad-welcome__actions > .ad-btn { flex: 1 1 100%; }
  .improveab-admin .ad-welcome__side { padding: 18px; }
  .improveab-admin .ad-head--test { align-items: flex-start; }
  .improveab-admin .ad-head__tools { margin-left: -10px; }
  .improveab-admin .ad-hero { gap: 24px; padding: 20px; }
  .improveab-admin .ad-side { padding: 16px; }
  .improveab-admin .ad-block__head { padding: 16px 20px; }
  .improveab-admin .ad-block__head > .ad-toolbar { margin-left: 0; }
  /* The board's head: the title with the view switch beside it, and the
     device filter on a row of its own that its four tabs share (left to
     wrap, "All devices" pushed Tablet onto a second line in the pill). */
  .improveab-admin .ad-board > .ad-block__head > .ad-toolbar { display: contents; }
  .improveab-admin .ad-board .ad-seg--view { margin-left: auto; }
  .improveab-admin .ad-board .ad-seg--devices { order: 1; display: flex; flex: 1 1 100%; }
  .improveab-admin .ad-board .ad-seg--devices > .ad-seg__item { flex: 1 1 auto; padding: 0 8px; }
  .improveab-admin .ad-vgrid { padding: 0 16px 16px; }
  .improveab-admin .ad-seg__item { min-height: 44px; }
  .improveab-admin .ad-howto, .improveab-admin .ad-setup { padding-left: 20px; padding-right: 20px; }
  .improveab-admin .ad-block__foot { padding-left: 20px; padding-right: 20px; }
  .improveab-admin .ad-chart { padding: 0 12px 16px; }
  .improveab-admin .ad-chartblock > .ad-chart-empty { margin: 0 12px 12px; padding: 24px 16px; }
  .improveab-admin .ad-chart__more { padding: 0 20px 16px; }
  .improveab-admin .ad-list__row { min-height: 52px; padding-left: 20px; }
  /* A setup row's tag goes under its title, so neither is squeezed into
     a column of single words beside the other. */
  .improveab-admin .ad-setuprow > .ad-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding-top: 12px; padding-bottom: 12px; }
  .improveab-admin .ad-setuprow > .ad-list__row > svg { grid-column: 2; grid-row: 1; }
  .improveab-admin .ad-setuprow > .ad-list__row > :is(.ad-tag) { grid-column: 1; justify-self: start; margin-left: 0; }
  /* A class takes the row's whole width and Copy goes under it: beside
     the button a long test name's class wraps a few letters a line. */
  .improveab-admin .ad-setup .ad-copyrow { grid-template-columns: minmax(0, 1fr); }
  .improveab-admin .ad-setup .ad-copyrow > .ad-btn { justify-self: start; }
}
/* Where container queries are not supported, the phone layout follows
   the window instead. */
@supports not (container-type: inline-size) {
  @media (max-width: 782px) {
    .improveab-admin .ad-table td.ad-num, .improveab-admin .ad-table th.ad-num { display: none; }
    .improveab-admin .ad-rowstats { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ad-muted); font-size: 13px; }
    .improveab-admin .ad-qa { visibility: visible; }
    .improveab-admin .ad-hero, .improveab-admin .ad-two, .improveab-admin .ad-welcome { grid-template-columns: minmax(0, 1fr); }
    .improveab-admin .ad-vgrid, .improveab-admin .ad-vgrid--3 { grid-template-columns: minmax(0, 1fr); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .improveab-admin .ad-setuprow > summary > svg { transition: none; }
}
@media (forced-colors: active) {
  .improveab-admin :is(.ad-setuprow > summary, .ad-codebox > summary, .ad-subrow > summary, .ad-chart__svg, input.ad-cb):focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .improveab-admin input.ad-cb { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .improveab-admin input.ad-cb:checked { background: Highlight; border-color: Highlight; }
  .improveab-admin .ad-winpick .ad-option[data-active="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .improveab-admin .ad-chart__tip { border: 1px solid CanvasText; }
  .improveab-admin.ad-dialoglayer .ad-dialog { border: 1px solid CanvasText; }
}

/* Results without a chart (a device tab, or the time series did not
   load): Test setup takes the whole row instead of the 1fr beside an
   empty 380 px column. */
.improveab-admin .ad-two--solo { grid-template-columns: minmax(0, 1fr); }

/* === Build additions: New test, Settings, Guide, tours === */

/* The icons ico() draws (svg.improveab-i) take
   the stroke of svg.i; :where() leaves every sized context in charge. */
.improveab-admin :where(svg.improveab-i) { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* wp-admin draws a blue shadow on every focused
   link (common.css a:focus); the plugin's links take the ring on
   :focus-visible only. */
.improveab-admin a:focus:not(:focus-visible) { box-shadow: none; outline: 0; }
/* ---- New test ----------------------------------------------------- */
/* A step's head is a button inside a heading; the heading only carries
   it, so it adds no size, weight or margin of its own. */
.improveab-admin .ad-step__h { font: inherit; }
.improveab-admin .ad-step__intro { max-width: 640px; color: var(--ad-ink-2); font-size: 15px; line-height: 1.55; }
.improveab-admin .ad-field > .ad-seg { justify-self: start; }
.improveab-admin .ad-field > .ad-control--num, .improveab-admin .ad-field > .ad-control--unit.ad-control--num { justify-self: start; }
/* the fields a goal needs, spaced like the step's own fields */
.improveab-admin .ad-step .ad-goalfields { display: grid; gap: 24px; }
.improveab-admin .ad-goalfields:empty { display: none; }
/* the rail's Steps label sits closer to the card's top edge */
.improveab-admin .ad-rail__card > .ad-nav__group { padding-top: 6px; }
/* a class to copy: the button keeps its width while it says Copied */
.improveab-admin .ad-copyrow .ad-btn { min-width: 92px; }
.improveab-admin .ad-copyrow .ad-code { margin: 0; }
/* the region a disclosure opens sits right under it */
.improveab-admin .ad-reveal { display: grid; gap: 12px; margin-top: 10px; }
.improveab-admin .ad-reveal > .ad-field { max-width: 560px; }
.improveab-admin .ad-builders { display: grid; gap: 10px; color: var(--ad-ink-2); font-size: 14px; line-height: 1.55; }
.improveab-admin .ad-builders b { color: var(--ad-ink); font-weight: 600; }
/* the combobox's list floats over what follows it */
.improveab-admin .ad-combo > .ad-listbox { position: absolute; z-index: 25; top: 100%; left: 0; right: 0; max-height: 296px; overflow-y: auto; overscroll-behavior: contain; }
.improveab-admin .ad-combo .ad-option { grid-template-columns: minmax(0, 1fr) minmax(0, max-content); cursor: pointer; }
.improveab-admin .ad-combo .ad-option > span { min-width: 0; overflow-wrap: anywhere; }
.improveab-admin .ad-combo .ad-option small { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.improveab-admin .ad-combo .ad-option--typed { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
/* the reason line above a waiting primary can go without moving it */
.improveab-admin .ad-why[hidden] { display: none !important; }
/* a field inside a unit box that is a text button (Show on a secret) */
.improveab-admin .ad-control--unit > .ad-btn { flex: none; min-height: 30px; margin: -6px -8px -6px 0; }

/* ---- Settings ----------------------------------------------------- */
.improveab-admin .ad-settings__main { display: grid; align-content: start; min-width: 0; }
.improveab-admin .ad-setting--stack { grid-template-columns: minmax(0, 1fr); }
/* A select is as wide as its longest option ("Canonical to the original
   (recommended)" was cut at 300 px), still under its label on a phone. */
.improveab-admin .ad-setting--select { grid-template-columns: minmax(0, 1fr) minmax(200px, max-content); }
.improveab-admin .ad-setting--stack .ad-setting__control { justify-items: start; }
.improveab-admin .ad-section__note { padding: 16px 28px; border-top: 1px solid var(--ad-line-1); color: var(--ad-ink-2); font-size: 13.5px; line-height: 1.55; }
.improveab-admin .ad-savebar .ad-btn[hidden] { display: none !important; }

/* ---- Guide -------------------------------------------------------- */
/* a topic's head is a button inside a heading, which adds nothing */
.improveab-admin .ad-topic__h { font: inherit; }
.improveab-admin .ad-quick > .ad-side { align-content: start; }
.improveab-admin .ad-side__hint { color: var(--ad-muted); font-size: 13px; line-height: 1.45; }
.improveab-admin .ad-topic__body :is(b, strong) { color: var(--ad-ink); font-weight: 600; }
.improveab-admin .ad-topic__body .ad-link { font-weight: 600; }
.improveab-admin .ad-topic__body ul.ad-bullets { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.improveab-admin .ad-topic__body ul.ad-bullets > li::marker { color: var(--ad-muted); }
.improveab-admin .ad-topic__body .ad-note { font-size: 14px; }
/* the sample-size calculator, inside "How long to run it" */
.improveab-admin .ad-calc { display: grid; gap: 18px; padding: 20px; border-radius: 14px; background: var(--ad-sand-1); }
.improveab-admin .ad-calc :is(dl, dd) { margin: 0; }
.improveab-admin .ad-calc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.improveab-admin .ad-calc__grid .ad-field { max-width: none; align-content: start; }
.improveab-admin .ad-calc .ad-kpis { border-top-color: var(--ad-line-2); }
.improveab-admin .ad-calc .ad-kpi + .ad-kpi { border-left-color: var(--ad-line-2); }
.improveab-admin .ad-calc .ad-kpi__value { font-size: 26px; }
.improveab-admin .ad-calc .ad-kpi__sub { color: var(--ad-muted); font: 500 13px/1.3 var(--ad-font); }
.improveab-admin .ad-calc .ad-note { background: #fff; }
.improveab-admin .ad-calc__lever h4 { font: 600 15px/1.35 var(--ad-font); }
.improveab-admin .ad-calc__lever > p { margin-top: 4px; color: var(--ad-ink-2); font-size: 14px; line-height: 1.5; }
.improveab-admin .ad-calc__lever .ad-ctable { margin-top: 10px; border-radius: 12px; background: #fff; }
.improveab-admin .ad-calc__lever .ad-ctable th { padding-top: 12px; }
.improveab-admin .ad-calc__lever .ad-ctable tr.is-current :is(th, td) { font-weight: 700; }
.improveab-admin .ad-calc__lever .ad-ctable tbody th { color: var(--ad-ink); font: 600 14px/1.3 var(--ad-font); letter-spacing: 0; text-transform: none; border-bottom: 1px solid var(--ad-line-1); padding: 12px 16px; }
.improveab-admin .ad-calc__lever .ad-ctable tr:last-child th { border-bottom: 0; }
.improveab-admin .ad-calc__foot { color: var(--ad-muted); font-size: 13px; line-height: 1.45; }

/* ---- Tours -------------------------------------------------------- */
/* a card above its window points down */
.improveab-admin .ad-tour--caret-bottom::before { top: auto; bottom: -7px; }
/* the window and the card slide from one step to the next; placing them
   again on scroll or resize is immediate (reduced motion: always) */
.improveab-admin.ad-tourlayer.is-sliding .ad-spot { transition: left 220ms cubic-bezier(.2, 0, 0, 1), top 220ms cubic-bezier(.2, 0, 0, 1), width 220ms cubic-bezier(.2, 0, 0, 1), height 220ms cubic-bezier(.2, 0, 0, 1); }
.improveab-admin.ad-tourlayer.is-sliding .ad-tour:not(.ad-tour--sheet) { transition: left 220ms cubic-bezier(.2, 0, 0, 1), top 220ms cubic-bezier(.2, 0, 0, 1); }
.improveab-admin .ad-tour { max-width: calc(100vw - 24px); }
.improveab-admin .ad-tour__title { overflow-wrap: anywhere; }
.improveab-admin .ad-tour--sheet { max-width: none; max-height: 70vh; overflow-y: auto; }
.improveab-admin .ad-tour--sheet .ad-tour__top .ad-icon-btn { width: 44px; height: 44px; margin: -10px -12px -10px auto; }
.improveab-admin .ad-tour--center { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* ---- Narrow pages ------------------------------------------------- */
@container adpage (max-width: 600px) {
  .improveab-admin .ad-calc__grid, .improveab-admin .ad-setting--select { grid-template-columns: minmax(0, 1fr); }
  .improveab-admin .ad-section__note { padding-left: 20px; padding-right: 20px; }
  .improveab-admin .ad-calc { padding: 16px; }
  .improveab-admin .ad-calc .ad-kpi + .ad-kpi { padding-left: 0; border-left: 0; }
}

/* =====================================================================
   ImproveAB - admin pages: the Guide, Settings, leaving unsaved work
   ---------------------------------------------------------------------
   Every rule is scoped under .improveab-admin and uses the tokens
   defined there; later rules win, so nothing above needs editing. Three
   screens:

   34-38  the Guide: the topic list, the reading layout inside a topic,
          "In this topic", troubleshooting questions, the quick start
          and the calculator
   39-40  Settings on the free plugin: one entry for What Pro adds and
          its page; the save bar only sticks when there is something to
          save
   41     "Leave without saving?": the question in its three versions
   42-43  narrow pages, reduced motion and forced colours
   ===================================================================== */

.improveab-admin {
  --ad-measure: 640px;                 /* the Guide's reading column, about 75 characters */
  --ad-measure-wide: 760px;            /* the calculator, which is a tool rather than text */
  --ad-read: 16px;                     /* Guide text */
  --ad-topic-pad: 28px;                /* the Topics card's side padding, as Quick start */
}

/* ---------- 34. Guide: the topic list -------------------------------- */
/* Topic titles were grey: ".ad-topic__head span" also matched the span
   that wraps title and subtitle, so the title inherited the muted colour
   and a 3 px offset. The wrapper is reset; only the subtitle is muted. */
.improveab-admin .ad-topics__title { padding: 28px var(--ad-topic-pad) 18px; font: 700 22px/1.25 var(--ad-font); }
.improveab-admin .ad-topic__head { column-gap: 16px; min-height: 76px; padding: 16px var(--ad-topic-pad); background: var(--ad-paper); }
.improveab-admin .ad-topic__head > span { display: block; min-width: 0; margin: 0; color: var(--ad-ink); font-size: inherit; }
.improveab-admin .ad-topic__head b { color: var(--ad-ink); font: 600 17px/1.3 var(--ad-font); }
.improveab-admin .ad-topic__head > span > span { margin-top: 4px; color: var(--ad-muted); font-size: 14.5px; line-height: 1.4; }
.improveab-admin .ad-topic__head > svg { flex: none; width: 20px; height: 20px; }
.improveab-admin .ad-topic__head:is(:hover, .is-hover) { background: var(--ad-hover); }
/* open: the head keeps white and gets the hairline an open New test step
   has; the turned chevron says the rest */
.improveab-admin .ad-topic__head[aria-expanded="true"] { box-shadow: inset 0 -1px 0 var(--ad-line-1); }
.improveab-admin .ad-topic__head[aria-expanded="true"]:is(:focus-visible, .is-focus) { box-shadow: var(--ad-ring-inset), inset 0 -1px 0 var(--ad-line-1); }
/* An open topic's head stays in view while its text scrolls under it
   (sticky inside its own .ad-topic, so a closed topic never sticks and
   several open topics hand over to each other). Off on phones. */
.improveab-admin .ad-topic__h { position: sticky; top: var(--ad-bar-h, 32px); z-index: 4; }
/* While the Guide is shown, the app gives the document a scroll-padding-top
   of the admin bar's height + 96 px. Browsers honour it when
   they scroll a focused control into view, and for "In this topic" and
   the links between topics, so nothing lands under the stuck head
   (WCAG 2.4.11). It cannot be set from here: the document is the
   scroller, and every rule here stays inside .improveab-admin.
   The stuck head itself sits inside that padding, so a head that takes
   focus (Shift+Tab back to it, to close the topic) would make the page
   jump; its margin gives the 96 px back. Keep both numbers the same. */
.improveab-admin .ad-topic__head { scroll-margin-top: -96px; }
/* A closed topic's text is hidden="until-found", so the browser's find
   in page reaches it and opens the topic. The app sets it only where the
   browser supports it, and plain hidden elsewhere. While hidden it has no padding, so it takes no
   space; content-visibility is what hides it. */
@supports (content-visibility: hidden) {
  .improveab-admin .ad-topic__body[hidden="until-found"] { display: block !important; padding: 0; content-visibility: hidden; }
}

/* ---------- 35. Guide: reading inside a topic ------------------------ */
/* One column at a reading measure, with space that says what belongs
   together: more above a sub-heading than below it, lists close to the
   sentence that opens them, notes and tables set apart. */
.improveab-admin .ad-topic__body { display: block; max-width: none; padding: 28px var(--ad-topic-pad) 44px; color: var(--ad-ink-2); font-size: var(--ad-read); line-height: 1.65; }
.improveab-admin .ad-topic__body > * { max-width: var(--ad-measure); }
.improveab-admin .ad-topic__body > * + * { margin-top: 16px; }
.improveab-admin .ad-topic__body > h4 { margin-top: 40px; color: var(--ad-ink); font: 600 18px/1.35 var(--ad-font); letter-spacing: -.005em; }
.improveab-admin .ad-topic__body > h4:first-child { margin-top: 0; }
.improveab-admin .ad-topic__body > h4 + * { margin-top: 10px; }
.improveab-admin .ad-topic__body > p + ul { margin-top: 10px; }
.improveab-admin .ad-topic__body > * + :is(.ad-note, .ad-kinds, .ad-calc, .ad-faqs) { margin-top: 24px; }
.improveab-admin .ad-topic__body > :is(.ad-note, .ad-kinds, .ad-calc, .ad-faqs) + :not(h4) { margin-top: 24px; }
.improveab-admin .ad-topic__body > h4 + :is(.ad-note, .ad-kinds, .ad-calc, .ad-faqs) { margin-top: 14px; }
.improveab-admin .ad-topic__body :is(b, strong) { color: var(--ad-ink); font-weight: 600; }

/* lists */
.improveab-admin .ad-topic__body ul.ad-bullets { display: block; padding-left: 22px; list-style: disc; }
.improveab-admin .ad-topic__body ul.ad-bullets > li { padding-left: 4px; }
.improveab-admin .ad-topic__body ul.ad-bullets > li + li { margin-top: 10px; }
.improveab-admin .ad-topic__body ul.ad-bullets > li::marker { color: var(--ad-ink-2); }

/* notes: a tip or an aside on sand; a warning on amber, so the two that
   say "do not" stand out from the tips (.ad-note--caution, new) */
.improveab-admin .ad-topic__body .ad-note { grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-radius: 14px; font-size: 15px; line-height: 1.6; }
.improveab-admin .ad-topic__body .ad-note > svg { width: 22px; height: 22px; color: var(--ad-ink); }
.improveab-admin .ad-note--caution { background: var(--ad-amber-50); box-shadow: inset 0 0 0 1px var(--ad-amber-300); }
.improveab-admin .ad-topic__body .ad-note--caution > svg { color: var(--ad-amber-ink); }

/* class names, paths and hooks (code) and keys (kbd); wp-admin's own
   code rule (13 px, grey, a margin) is replaced */
.improveab-admin .ad-topic__body :is(code, kbd) { margin: 0; padding: 1px 6px; border-radius: 6px; font-size: .875em; line-height: 1.5; overflow-wrap: anywhere; }
.improveab-admin .ad-topic__body code:not(.ad-code) { background: var(--ad-sand-2); box-shadow: inset 0 0 0 1px var(--ad-line-1); color: var(--ad-ink); font-family: var(--ad-mono); font-weight: 500; }
.improveab-admin .ad-topic__body kbd { background: var(--ad-paper); box-shadow: inset 0 0 0 1px var(--ad-line-2), inset 0 -1.5px 0 var(--ad-line-2); color: var(--ad-ink); font-family: var(--ad-font); font-weight: 600; white-space: nowrap; }

/* links: to another topic (opens it and scrolls there) and to the web
   (with the arrow, as everywhere); a link that wraps keeps a whole ring
   on each line */
.improveab-admin .ad-topic__body .ad-link { font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* two kinds of test */
.improveab-admin .ad-topic__body .ad-kinds { gap: 12px; }
.improveab-admin .ad-topic__body .ad-kind { padding: 18px 20px; border-radius: 14px; font-size: 15px; line-height: 1.55; }
.improveab-admin .ad-topic__body .ad-kind b { margin-bottom: 6px; font-size: 16px; }

/* page builders: one entry per builder, the name on its own line, so a
   reader scans the names for theirs */
.improveab-admin .ad-topic__body .ad-builders { display: block; border-bottom: 1px solid var(--ad-line-1); font-size: 15px; line-height: 1.6; }
.improveab-admin .ad-topic__body .ad-builders > li { padding: 14px 0 15px; border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-topic__body .ad-builders > li > b:first-child { display: block; margin-bottom: 3px; font: 600 16px/1.35 var(--ad-font); }

/* ---------- 36. Guide: "In this topic" ------------------------------- */
/* A topic with three or more sub-headings opens with their list. On a
   wide page it moves beside the text and stays in view under the topic's
   head; on a narrow one it sits at the top. */
.improveab-admin .ad-toc { padding: 16px 18px 14px; border-radius: 14px; background: var(--ad-sand-1); }
.improveab-admin .ad-toc__title { color: var(--ad-muted); font: 700 12px/1.2 var(--ad-font); letter-spacing: .08em; text-transform: uppercase; }
.improveab-admin .ad-toc__list { display: grid; gap: 2px; margin-top: 8px; }
.improveab-admin .ad-toc__link { position: relative; display: flex; align-items: center; min-height: 32px; margin: 0 -8px; padding: 5px 8px; border-radius: 8px; color: var(--ad-ink); font: 500 14.5px/1.35 var(--ad-font); text-decoration: none; transition: background-color 120ms; }
.improveab-admin .ad-toc__link:is(:hover, .is-hover) { background: var(--ad-hover-on-sand); }
.improveab-admin .ad-toc__link:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); }
/* optional: the sub-heading now in view (set by the app as you scroll) */
.improveab-admin .ad-toc__link:is([aria-current="true"], .is-current) { font-weight: 600; }
.improveab-admin .ad-toc__link:is([aria-current="true"], .is-current)::before { content: ""; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--ad-ink); }
/* a sub-heading reached from the list lands below the stuck topic head
   through the document's scroll padding (section 34) */
@container adpage (min-width: 1000px) {
  .improveab-admin .ad-topic__body:has(> .ad-toc) { display: grid; grid-template-columns: minmax(0, var(--ad-measure)) minmax(200px, 260px); gap: 0 56px; align-items: start; }
  .improveab-admin .ad-topic__body:has(> .ad-toc) > * { grid-column: 1; }
  .improveab-admin .ad-topic__body:has(> .ad-toc) > .ad-toc { position: sticky; top: calc(var(--ad-bar-h, 32px) + 96px); grid-column: 2; grid-row: 1 / span 60; margin: 0; }
  .improveab-admin .ad-topic__body:has(> .ad-toc) > .ad-toc + * { margin-top: 0; }
}

/* ---------- 37. Guide: troubleshooting questions --------------------- */
/* Each question opens its answer in place (details and summary), so a
   reader scans seven questions instead of reading seven paragraphs. */
.improveab-admin .ad-faqs { border-bottom: 1px solid var(--ad-line-1); }
.improveab-admin .ad-faq { border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-faq > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0 -12px; padding: 12px; border-radius: 10px; color: var(--ad-ink); font: 600 16px/1.4 var(--ad-font); list-style: none; cursor: pointer; transition: background-color 120ms; }
.improveab-admin .ad-faq > summary::-webkit-details-marker { display: none; }
.improveab-admin .ad-faq > summary::marker { content: ""; }
.improveab-admin .ad-faq > summary > span { min-width: 0; }
.improveab-admin .ad-faq > summary > svg { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--ad-ink-2); transition: transform 120ms; }
.improveab-admin .ad-faq[open] > summary > svg { transform: rotate(180deg); }
.improveab-admin .ad-faq > summary:is(:hover, .is-hover) { background: var(--ad-hover); }
.improveab-admin .ad-faq > summary:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--ad-ring); }
.improveab-admin .ad-faq__a { padding: 2px 0 22px; }
.improveab-admin .ad-faq__a > * + * { margin-top: 12px; }

/* ---------- 38. Guide: quick start and the calculator ---------------- */
.improveab-admin .ad-quick .ad-numlist { gap: 16px; margin-top: 20px; }
.improveab-admin .ad-quick .ad-numlist li::before { box-shadow: inset 0 0 0 1.5px var(--ad-ink-2); }
.improveab-admin .ad-quick .ad-numlist b { color: var(--ad-ink); font-size: 16px; }
.improveab-admin .ad-quick .ad-numlist span { margin-top: 3px; color: var(--ad-ink-2); font-size: 14.5px; line-height: 1.5; }
/* the action card: New test leads; the calculator and the tour follow at
   the regular size, so the one amber action is the first thing seen. The
   card is as tall as what it holds, not as the five steps. */
.improveab-admin .ad-quick > .ad-side { align-self: start; gap: 10px; }
.improveab-admin .ad-quick > .ad-side > .ad-btn--secondary { min-height: 44px; font-size: 15px; }
.improveab-admin .ad-quick .ad-side__hint { margin-top: 2px; color: var(--ad-muted); font-size: 13.5px; line-height: 1.5; }

/* the sample-size calculator: one card, the four questions on sand and
   the answer on white under them, a little wider than the text so the
   fields and the table have room */
.improveab-admin .ad-topic__body > .ad-calc { max-width: var(--ad-measure-wide); }
.improveab-admin .ad-calc { container: adcalc / inline-size; gap: 20px; padding: 24px 24px 0; border: 1px solid var(--ad-line-1); }
.improveab-admin :is(.ad-calc, #improveab-planner-result, .ad-calc__grid .ad-field) > * { min-width: 0; }
.improveab-admin .ad-calc > .ad-help { color: var(--ad-ink-2); font-size: 15px; line-height: 1.55; }
.improveab-admin .ad-calc__grid { gap: 18px 20px; }
.improveab-admin .ad-calc > #improveab-planner-result { display: grid; gap: 20px; margin: 4px -24px 0; padding: 22px 24px; border-top: 1px solid var(--ad-line-1); border-radius: 0 0 13px 13px; background: var(--ad-paper); }
.improveab-admin .ad-calc .ad-kpis { border-top: 0; }
.improveab-admin .ad-calc .ad-kpi { padding-top: 0; padding-bottom: 0; }
.improveab-admin .ad-calc .ad-kpi + .ad-kpi { border-left-color: var(--ad-line-1); }
.improveab-admin .ad-calc .ad-kpi__value { font-size: 28px; }
.improveab-admin .ad-calc .ad-note { background: var(--ad-sand-1); }
.improveab-admin .ad-calc__lever { padding-top: 18px; border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-calc__lever :is(h4, h5) { margin: 0; color: var(--ad-ink); font: 600 16px/1.35 var(--ad-font); }
.improveab-admin .ad-calc__lever > p { margin-top: 4px; font-size: 15px; line-height: 1.55; }
.improveab-admin .ad-calc__lever .ad-ctable { margin-top: 12px; border-radius: 0; background: transparent; }
.improveab-admin .ad-calc__lever .ad-ctable thead th { padding: 0 12px 10px; }
.improveab-admin .ad-calc__lever .ad-ctable tbody :is(th, td) { padding: 11px 12px; }
.improveab-admin .ad-calc__lever .ad-ctable tr.is-current :is(th, td) { background: var(--ad-amber-50); }
.improveab-admin .ad-calc__lever .ad-ctable tr.is-current th { border-radius: 8px 0 0 8px; }
.improveab-admin .ad-calc__lever .ad-ctable tr.is-current td:last-child { border-radius: 0 8px 8px 0; }
.improveab-admin .ad-calc__lever .ad-ctable tr.is-current .ad-tag { height: 20px; margin-left: 8px; padding: 0 7px; border-radius: 6px; background: var(--ad-amber-100); color: var(--ad-amber-ink-2); font-weight: 600; vertical-align: 1px; }
.improveab-admin .ad-calc__foot { color: var(--ad-muted); font-size: 13.5px; }
/* a figure such as "~2.5 weeks" stays on one line while the calculator
   has room (phones from about 375 px); narrower, it may wrap instead of
   being cut. adcalc is a container query on the calculator itself. */
@container adcalc (min-width: 260px) {
  .improveab-admin .ad-calc__lever .ad-ctable td { white-space: nowrap; }
}

/* ---------- 39. Settings on the free plugin: What Pro adds ---------- */
/* One entry under the free sections, after the line, drawn as something
   else: a sand tile with the Pro mark and what Pro covers. Pointer,
   keyboard and "its page is open" are the states every nav row has (sand
   3, the inset ring, the ink fill). Its page describes the Pro version: no
   controls, nothing greyed, nothing locked, one See Pro (wordpress.org
   guideline 5). */
.improveab-admin .ad-nav__item--addon { align-items: flex-start; gap: 12px; min-height: 64px; margin-top: 4px; padding: 12px 14px; background: var(--ad-sand-1); box-shadow: inset 0 0 0 1px var(--ad-line-1); }
.improveab-admin .ad-nav__item--addon > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ad-ink-2); }
.improveab-admin .ad-nav__item--addon .ad-nav__text { gap: 4px; }
.improveab-admin .ad-nav__item--addon .ad-nav__title { font: 600 15px/1.25 var(--ad-font); }
.improveab-admin .ad-nav__item--addon .ad-nav__sub { line-height: 1.35; }
.improveab-admin .ad-nav__item--addon:is(:hover, .is-hover) { background: var(--ad-hover); box-shadow: inset 0 0 0 1px var(--ad-line-2); }
.improveab-admin .ad-nav__item--addon:is([aria-current="true"], .is-selected) { background: var(--ad-ink); color: #fff; box-shadow: none; }
.improveab-admin .ad-nav__item--addon:is([aria-current="true"], .is-selected) > svg { color: #fff; }
.improveab-admin .ad-nav__item--addon:is(:focus-visible, .is-focus) { box-shadow: var(--ad-ring-inset); }

/* the What Pro adds page: sand, the one See Pro beside its title, then one
   white tile per area of Pro. A tile reads left to right: what the area
   is, then what it adds, and across its foot what this plugin does in
   that area today. */
.improveab-admin .ad-addon { container: adaddon / inline-size; background: var(--ad-sand-1); box-shadow: inset 0 0 0 1px var(--ad-line-2); }
.improveab-admin .ad-addon__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: 28px 28px 24px; }
.improveab-admin .ad-addon__head > * { grid-column: 1; }
.improveab-admin .ad-addon__head > .ad-addon__cta { grid-column: 2; grid-row: 2; }
.improveab-admin .ad-addon__eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ad-ink-2); font: 700 12px/1.2 var(--ad-font); letter-spacing: .08em; text-transform: uppercase; }
.improveab-admin .ad-addon__eyebrow > svg { flex: none; width: 18px; height: 18px; }
.improveab-admin .ad-addon .ad-section__lede { max-width: 680px; margin-top: 6px; color: var(--ad-ink-2); font-size: 15px; line-height: 1.55; }
.improveab-admin .ad-addon__groups { display: grid; gap: 12px; padding: 0 28px 24px; }
.improveab-admin .ad-addon__group { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; padding: 22px 24px 18px; border-radius: 14px; background: var(--ad-paper); box-shadow: 0 1px 2px rgba(20, 20, 20, .05); }
.improveab-admin .ad-addon__icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 10px; background: var(--ad-sand-2); color: var(--ad-ink); }
.improveab-admin .ad-addon__icon > svg { width: 20px; height: 20px; }
.improveab-admin .ad-addon__title { color: var(--ad-ink); font: 600 17px/1.3 var(--ad-font); }
.improveab-admin .ad-addon__lede { margin-top: 4px; color: var(--ad-ink-2); font-size: 14px; line-height: 1.5; }
.improveab-admin .ad-addon__list { display: grid; align-content: start; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ad-line-1); }
.improveab-admin .ad-addon__list li { display: grid; align-content: start; gap: 2px; margin: 0; color: var(--ad-ink-2); font-size: 14px; line-height: 1.5; }
.improveab-admin .ad-addon__list b { color: var(--ad-ink); font: 600 14.5px/1.35 var(--ad-font); }
.improveab-admin .ad-addon__free { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ad-line-1); color: var(--ad-ink-2); font-size: 13.5px; line-height: 1.5; }
.improveab-admin .ad-addon__free b { margin-right: 6px; color: var(--ad-ink); font-weight: 700; }
.improveab-admin .ad-addon__foot { padding: 16px 28px 20px; border-top: 1px solid var(--ad-line-2); color: var(--ad-ink-2); font-size: 14px; line-height: 1.5; }
@container adaddon (min-width: 640px) {
  .improveab-admin .ad-addon__group { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 40px; }
  .improveab-admin .ad-addon__group > * { grid-column: 1; }
  .improveab-admin .ad-addon__group > .ad-addon__list { grid-column: 2; grid-row: 1 / 5; margin-top: 0; padding-top: 2px; border-top: 0; }
  .improveab-admin .ad-addon__group > .ad-addon__free { grid-column: 1 / -1; grid-row: 5; }
}
@container adaddon (max-width: 560px) {
  .improveab-admin .ad-addon__head { grid-template-columns: minmax(0, 1fr); }
  .improveab-admin .ad-addon__head > .ad-addon__cta { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 16px; }
}

/* ---------- 40. Settings: the save bar ------------------------------- */
/* With nothing to save the bar stays at the foot of the card; it sticks
   to the bottom of the window only once a change is waiting, so on a
   phone it no longer sits over the section's title. */
.improveab-admin .ad-savebar.is-clean { position: static; }

/* ---------- 41. "Leave without saving?" ------------------------------- */
/* One question, three versions. Where the work can be kept, keeping it
   is the amber answer (Save draft and leave, Save and leave), Keep
   editing is second and has the focus, and leaving without saving is the
   red text button, last. Where it cannot (a test's page), Keep editing is
   the amber answer. The answers stack, full width, at every size, so the
   longest label in any language fits. */
.improveab-admin.ad-dialoglayer { container: addialog / inline-size; }
.improveab-admin .ad-dialog--leave { width: 440px; padding: 28px; }
.improveab-admin .ad-dialog--leave .ad-dialog__title { font: 600 20px/1.3 var(--ad-font); }
.improveab-admin .ad-dialog--leave .ad-dialog__text { margin-top: 10px; font-size: 15px; line-height: 1.55; }
.improveab-admin .ad-dialog--leave .ad-dialog__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 24px; }
.improveab-admin .ad-dialog--leave .ad-dialog__actions > .ad-btn { width: 100%; min-height: 44px; font-size: 15px; }
.improveab-admin .ad-dialog__error { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--ad-red-50); color: var(--ad-red); font: 500 14px/1.45 var(--ad-font); }
.improveab-admin .ad-dialog__error > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
@container addialog (max-width: 480px) {
  .improveab-admin .ad-dialog--leave { padding: 22px 20px 20px; }
  .improveab-admin .ad-dialog--leave .ad-dialog__title { font-size: 19px; }
}

/* ---------- 42. Narrow pages ----------------------------------------- */
@container adpage (max-width: 600px) {
  .improveab-admin .ad-topics { --ad-topic-pad: 20px; }
  .improveab-admin .ad-quick { padding: 22px 20px 20px; }
  .improveab-admin .ad-topics__title { padding-top: 22px; font-size: 20px; }
  .improveab-admin .ad-topic__head { padding-top: 14px; padding-bottom: 14px; }
  .improveab-admin .ad-topic__h { position: static; }
  .improveab-admin .ad-topic__body:not([hidden]) { padding-top: 24px; padding-bottom: 32px; }
  .improveab-admin .ad-topic__body > h4 { margin-top: 32px; font-size: 17px; }
  /* notes: the icon sits in the first line and the text runs under it,
     so a phone keeps its full width for the words */
  .improveab-admin .ad-topic__body .ad-note { display: flow-root; padding: 16px 18px; }
  .improveab-admin .ad-topic__body .ad-note > svg { float: left; width: 20px; height: 20px; margin: 3px 10px 0 0; }
  /* the calculator: less padding; the three results become rows of
     label and figure; the table's headings may wrap */
  .improveab-admin .ad-calc { gap: 16px; padding: 18px 16px 0; }
  .improveab-admin .ad-calc > #improveab-planner-result { gap: 18px; margin: 4px -16px 0; padding: 16px 16px 18px; }
  .improveab-admin .ad-calc .ad-kpis { grid-template-columns: minmax(0, 1fr); }
  .improveab-admin .ad-calc .ad-kpi { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 10px 0; }
  .improveab-admin .ad-calc .ad-kpi:first-child { padding-top: 0; }
  .improveab-admin .ad-calc .ad-kpi + .ad-kpi { padding-left: 0; border-left: 0; border-top: 1px solid var(--ad-line-1); }
  .improveab-admin .ad-calc .ad-kpi__value { font-size: 22px; text-align: right; }
  .improveab-admin .ad-calc .ad-kpi__sub { grid-column: 2; text-align: right; }
  .improveab-admin .ad-calc__lever .ad-ctable th { white-space: normal; }
  .improveab-admin .ad-calc__lever .ad-ctable thead th { padding: 0 8px 8px; }
  .improveab-admin .ad-calc__lever .ad-ctable tbody :is(th, td) { padding: 10px 8px; }
  /* the What Pro adds page */
  .improveab-admin .ad-addon__head { padding: 22px 20px 20px; }
  .improveab-admin .ad-addon__head > .ad-addon__cta { justify-self: stretch; min-height: 44px; }
  .improveab-admin .ad-addon__groups { gap: 10px; padding: 0 10px 10px; }
  .improveab-admin .ad-addon__group { padding: 18px 18px 16px; }
  .improveab-admin .ad-addon__foot { padding: 14px 20px 18px; }
}
/* phones under about 375 px, down to 320 px: the table's headings take
   a smaller step so the three columns fit without cutting a word */
@container adcalc (max-width: 259.98px) {
  .improveab-admin .ad-calc__lever .ad-ctable thead th { padding: 0 6px 8px; font-size: 11px; letter-spacing: .04em; }
  .improveab-admin .ad-calc__lever .ad-ctable tbody :is(th, td) { padding: 10px 6px; }
}

/* ---------- 43. Reduced motion, forced colours ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .improveab-admin :is(.ad-faq > summary, .ad-faq > summary > svg, .ad-toc__link) { transition: none; }
}
@media (forced-colors: active) {
  .improveab-admin :is(.ad-faq > summary, .ad-toc__link, .ad-link--topic):focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .improveab-admin :is(.ad-addon, .ad-addon__group, .ad-toc, .ad-note--caution, .ad-nav__item--addon) { border: 1px solid CanvasText; }
  .improveab-admin .ad-topic__body :is(code, kbd) { border: 1px solid CanvasText; }
  .improveab-admin .ad-toc__link:is([aria-current="true"], .is-current)::before { forced-color-adjust: none; background: CanvasText; }
}

/* === Build additions: short windows (200% and 400% zoom, phones held sideways) === */
/* WCAG 1.4.10 and 2.4.11. A dialog taller than the window scrolls inside
   its layer, starting at its top, so every answer can be reached; the
   scrim stays over the whole window. Under 500 px of height the New test
   actions and the Settings save bar stay in the flow instead of sticking
   to the bottom, where they covered the steps and the fields above them.
   Nothing changes on a window that is taller. */
.improveab-admin.ad-dialoglayer { overflow-y: auto; overscroll-behavior: contain; place-items: safe center; }
.improveab-admin.ad-dialoglayer > .ad-scrim { position: fixed; }
@media (max-height: 500px) {
  .improveab-admin .ad-rail__actions, .improveab-admin .ad-savebar { position: static; }
}

/* === Build additions: reduced motion === */
/* The reduced-motion rule above stops every element's transition, but `*` never
   matches a pseudo-element: the switches' knobs (`.ad-switch::after`)
   still slid for 120 ms. */
@media (prefers-reduced-motion: reduce) {
  .improveab-admin *::before, .improveab-admin *::after { transition-duration: 0ms !important; }
}

/* === Build additions: right to left === */
/* A right-to-left site (Hebrew, Arabic, Persian): each rule above that sets
   a physical alignment is read from the other side, and the icons that
   point along the line (back, the row chevron, the arrow to the steps)
   point the other way. Nothing changes on a left-to-right site. */
html[dir="rtl"] .improveab-admin .ad-table th,
html[dir="rtl"] .improveab-admin .ad-menu__item,
html[dir="rtl"] .improveab-admin .ad-select > .ad-control--button,
html[dir="rtl"] .improveab-admin .ad-choice,
html[dir="rtl"] .improveab-admin .ad-nav__item,
html[dir="rtl"] .improveab-admin .ad-step__head,
html[dir="rtl"] .improveab-admin .ad-disclosure,
html[dir="rtl"] .improveab-admin .ad-ctable th,
html[dir="rtl"] .improveab-admin .ad-list__row,
html[dir="rtl"] .improveab-admin .ad-topic__head,
html[dir="rtl"] .improveab-admin button.ad-link { text-align: right; }
html[dir="rtl"] .improveab-admin .ad-table :is(th, td).ad-num,
html[dir="rtl"] .improveab-admin .ad-ctable :is(th, td).ad-num,
html[dir="rtl"] .improveab-admin .ad-stat { text-align: left; }
@container adpage (max-width: 600px) {
  html[dir="rtl"] .improveab-admin .ad-calc :is(.ad-kpi__value, .ad-kpi__sub) { text-align: left; }
}
html[dir="rtl"] .improveab-admin .ad-back > svg,
html[dir="rtl"] .improveab-admin .ad-list__row > svg,
html[dir="rtl"] .improveab-admin #improveab-why > svg { transform: scaleX(-1); }
/* A tip anchored to its control's end or start edge opens the other way. */
html[dir="rtl"] .improveab-admin .ad-tip--end { left: 0; right: auto; }
html[dir="rtl"] .improveab-admin .ad-tip--start { left: auto; right: 0; }
@container adhero (max-width: 620px) {
  html[dir="rtl"] .improveab-admin .ad-h2 .ad-tip { left: -6px; right: auto; }
}

/* =====================================================================
   ImproveAB - admin pages: short windows, phones, forced colours
   ---------------------------------------------------------------------
   Every rule is scoped under .improveab-admin and uses the tokens
   defined there; later rules win, so nothing above needs editing.

   44  Results, table view: the rate bar folds away before the table
       outgrows its card
   45  Selects: a chosen option that is too long ends in an ellipsis
   46  Short windows: dialogs
   47  Short windows: the New test actions and the save bar
   48  The save bar on a phone and while it is stuck
   49  Fields never push past their card
   50  Results: the hero's figures
   51  New test on a phone: no second step list
   52  Forced colours: everything you can press has an edge
   53  Forced colours: what floats over the page has an edge
   54  Right to left: the hero's figures
   ===================================================================== */

/* ---------- 44. Results, table view: the rate bar folds away ---------
   The bar after Rate repeats the rate as a length (152 px plus padding).
   It goes only where that makes the whole table fit its own box, so
   every word stays in view at rest: six columns need 829 px with
   the bar and 677 without it, seven 945 and 793. At
   1024 px with the WordPress menu open the box has 808 px: both fit
   without the bar. Wider, the bar is back; narrower than the table
   without its bar (phones), nothing changes: the table keeps the bar
   and its sideways scroll, as built. The cards view keeps its bars at
   every width. */
.improveab-admin .ad-board__table { container: adtable / inline-size; }
@container adtable (min-width: 677px) and (max-width: 832.98px) {
  .improveab-admin .ad-ctable:not(:has(> thead > tr > th:nth-child(7))) :is(th, td).ad-ctable__meter { display: none; }
}
@container adtable (min-width: 793px) and (max-width: 948.98px) {
  .improveab-admin .ad-ctable:has(> thead > tr > th:nth-child(7)) :is(th, td).ad-ctable__meter { display: none; }
}

/* ---------- 45. Selects: a long choice ends in an ellipsis ----------
   A native select cannot wrap. The SEO choice is shortened in the words;
   this is the net for any other language or option. */
.improveab-admin select.ad-control { text-overflow: ellipsis; }

/* ---------- 46. Short windows: dialogs ------------------------------
   200% zoom (640 x 400), 400% zoom (320 x 200) and phones held sideways
   (about 844 x 390). The layer already scrolls a dialog taller than the
   window (above). Here the dialog itself gets shorter: less padding, a
   smaller title, and, where the window is wide enough, the answers in
   one row (amber first, so the order reads the same as the stack). At
   400% it still scrolls, from its title. Answers stay 44 px tall. */
@media (max-height: 500px) {
  .improveab-admin.ad-dialoglayer { padding: 12px; }
  .improveab-admin .ad-dialog { padding: 20px 22px; }
  .improveab-admin .ad-dialog__title,
  .improveab-admin .ad-dialog--leave .ad-dialog__title { font-size: 18px; }
  .improveab-admin .ad-dialog__text,
  .improveab-admin .ad-dialog--leave .ad-dialog__text { margin-top: 6px; font-size: 14.5px; line-height: 1.5; }
  .improveab-admin .ad-dialog__error { margin-top: 10px; }
  .improveab-admin .ad-dialog__actions,
  .improveab-admin .ad-dialog--leave .ad-dialog__actions { margin-top: 16px; gap: 6px; }
  .improveab-admin .ad-dialog--leave { padding: 20px 22px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .improveab-admin .ad-dialog--leave { width: 600px; }
  .improveab-admin .ad-dialog--leave .ad-dialog__actions { display: flex; flex-wrap: wrap; }
  .improveab-admin .ad-dialog--leave .ad-dialog__actions > .ad-btn { flex: 1 1 auto; width: auto; padding: 0 14px; }
}
@media (max-height: 360px) {
  .improveab-admin.ad-dialoglayer { padding: 8px; }
  .improveab-admin .ad-dialog,
  .improveab-admin .ad-dialog--leave { max-width: calc(100vw - 16px); padding: 16px; border-radius: 12px; }
  .improveab-admin .ad-dialog__title,
  .improveab-admin .ad-dialog--leave .ad-dialog__title { font-size: 17px; }
  .improveab-admin .ad-dialog__text,
  .improveab-admin .ad-dialog--leave .ad-dialog__text { font-size: 14px; }
}

/* ---------- 47. Short windows: the New test actions and the save bar --
   Under 500 px of height both stay in the flow (above). They are then
   the foot of their column, not a bar, so they take less height: the
   New test actions sit in a row under their reason line (214 px became
   104 at 200% zoom), and the save bar loses its fixed 68 px. The rail
   beside the steps stops sticking too: taller than the window, its
   buttons could never be reached. */
@media (max-height: 500px) {
  .improveab-admin .ad-rail { position: static; }
  .improveab-admin .ad-rail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px; }
  .improveab-admin .ad-rail__actions > .ad-why { flex: 1 1 100%; margin: 0 0 2px; }
  .improveab-admin .ad-rail__actions > .ad-btn { flex: 1 1 auto; width: auto; min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
  .improveab-admin .ad-rail__actions > .ad-btn--text { flex: 0 1 auto; }
  .improveab-admin .ad-savebar { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
}

/* ---------- 48. The save bar on a phone and while it is stuck --------
   Phone: when the status, Discard and Save do not fit one line, the
   status takes its own line and the two buttons go together at its end
   (Save fell to a line of its own before). With only Save, one line, as
   now; at 200% zoom (600 px) all three still share one line.
   Stuck: while a change waits, the bar sticks to the bottom of the
   window. Settings slide under it; a soft edge above the bar
   says so, where the browser can tell the bar is stuck (scroll-state
   queries: Chromium 133+; elsewhere the 1 px rule stays alone). The app
   keeps a focused field clear of it. */
@container adpage (max-width: 480px) {
  .improveab-admin .ad-savebar:has(> .ad-btn:not([hidden]) ~ .ad-btn:not([hidden])) { justify-content: flex-end; }
  .improveab-admin .ad-savebar:has(> .ad-btn:not([hidden]) ~ .ad-btn:not([hidden])) > .ad-savebar__status { flex: 1 1 100%; }
}
.improveab-admin .ad-savebar:not(.is-clean) { container-type: scroll-state; }
@container scroll-state(stuck: bottom) {
  .improveab-admin .ad-savebar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; background: linear-gradient(to top, rgba(20, 20, 20, .09), rgba(20, 20, 20, 0)); pointer-events: none; }
}

/* ---------- 49. Fields never push past their card --------------------
   A grid's own column grows to its widest item's smallest size, so a
   secret with its Show button (263 px) and a date and time (272 px)
   stretched past a 240 px column at 400% zoom. One column that may
   shrink fixes both; the input inside the box gives way (it already
   has min-width: 0). A date and time needs 256 px at 15 px, so on pages
   under 300 px (400% zoom: the page is 280) it takes 14 px and a little
   less padding, and shows whole, picker button included, in 240 px.
   Phones, 320 px and up, keep 15 px. */
.improveab-admin .ad-setting__control,
.improveab-admin .ad-setup .ad-field { grid-template-columns: minmax(0, 1fr); }
@container adpage (max-width: 299.98px) {
  .improveab-admin input.ad-control:is([type="datetime-local"], [type="date"], [type="time"]) { padding-left: 10px; padding-right: 7px; font-size: 14px; }
}

/* ---------- 50. Results: the hero's figures -------------------------
   A "?" beside a label no longer makes that label taller: it keeps its
   26 px target and lends 5 px above and below, so every value starts on
   the same line (it sat 9 px lower). */
.improveab-admin .ad-kpi__label .ad-icon-btn--sm { margin-top: -5px; margin-bottom: -5px; }

/* ---------- 51. New test on a phone: no second step list -------------
   In one column the step cards are the list: the rail's Steps card
   repeated them under the last step, and on a phone the sticky Save and
   start card slid over it. It shows only beside the steps, where it
   navigates. The actions card stays and follows the last step. (Its
   phone stickiness, bottom: 0 inside the rail, has no room left to move
   once the list is gone, so in practice it sits in the flow.) */
@container adpage (max-width: 900px) {
  .improveab-admin .ad-rail__card { display: none; }
}

/* ---------- 52. Forced colours: everything you can press has an edge -
   Windows High Contrast drops fills and shadows, so segments, icon
   buttons, step and topic heads, disclosures, the Settings nav and list
   options read as plain text. In forced colours:
     can be pressed   1 px ButtonText edge
     chosen           the edge in Highlight, with r5's 2 px Highlight
                      ring inside it (while it has focus, the focus ring
                      takes the outline and the Highlight edge stays)
     focus            2 px CanvasText ring outside, also on a chosen item
                      (the chosen ring hid it before); in a list, the
                      option the arrow keys are on gets the same ring
   Neighbours get 4 px between them so two edges never read as one;
   the Guide's topics drop their own rule here, as the heads now carry
   an edge each. */
@media (forced-colors: active) {
  .improveab-admin :is(.ad-seg__item, .ad-icon-btn, .ad-step__head, .ad-disclosure, .ad-nav__item, .ad-topic__head, .ad-listbox .ad-option) { border: 1px solid ButtonText; }
  .improveab-admin :is(.ad-seg__item, .ad-icon-btn, .ad-nav__item, .ad-listbox .ad-option):is([aria-current="page"], [aria-current="step"], [aria-current="true"], [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-selected) { border-color: Highlight; }
  .improveab-admin :is(.ad-seg__item, .ad-tabs__item, .ad-nav__item, .ad-icon-btn, .ad-choice, .ad-option):is([aria-current="page"], [aria-current="step"], [aria-current="true"], [aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], .is-selected):focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .improveab-admin .ad-listbox .ad-option:is([data-active="true"], .is-focus) { outline: 2px solid CanvasText; outline-offset: 1px; }
  .improveab-admin :is(.ad-seg__item, .ad-icon-btn, .ad-disclosure, .ad-nav__item):is(:disabled, .is-disabled) { border-color: GrayText; border-style: dashed; color: GrayText; }
  .improveab-admin :is(.ad-seg, .ad-nav, .ad-listbox, .ad-toolbar, .ad-actions) { gap: 4px; }
  .improveab-admin .ad-step.is-open .ad-step__head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .improveab-admin .ad-topic { border-top: 0; padding-top: 4px; }
}

/* ---------- 53. Forced colours: what floats over the page has an edge -
   Tooltips, the tour's card and its window lose their fill and shadow;
   each gets a CanvasText edge, and the tour's window a Highlight ring,
   since the dimmed page around it is gone too. The card's caret has no
   edge to join, so it is not drawn here. */
@media (forced-colors: active) {
  .improveab-admin .ad-tip { border: 1px solid CanvasText; }
  .improveab-admin .ad-tour { border: 2px solid CanvasText; }
  .improveab-admin .ad-tour::before { display: none; }
  .improveab-admin .ad-tour--sheet { border-width: 2px 0 0; }
  .improveab-admin .ad-spot { outline: 3px solid Highlight; outline-offset: 2px; }
  .improveab-admin .ad-savebar::before { display: none; }
}

/* ---------- 54. Right to left: the hero's figures --------------------
   The dividers between the hero's figures are drawn with physical left
   borders (section 50), and the right-to-left block above does not
   mirror them. Here they are, in the hero only (the Guide's
   calculator lays out its own). */
html[dir="rtl"] .improveab-admin .ad-hero__main .ad-kpi { padding-right: 0; padding-left: 20px; }
html[dir="rtl"] .improveab-admin .ad-hero__main .ad-kpi + .ad-kpi { padding-right: 20px; border-left: 0; border-right: 1px solid var(--ad-line-1); }
@container adhero (max-width: 620px) {
  html[dir="rtl"] .improveab-admin .ad-hero__main .ad-kpis > .ad-kpi:nth-child(odd) { padding-left: 20px; padding-right: 0; border-left: 0; border-right: 0; }
  html[dir="rtl"] .improveab-admin .ad-hero__main .ad-kpis > .ad-kpi:nth-child(even) { padding-left: 20px; padding-right: 20px; border-left: 0; border-right: 1px solid var(--ad-line-1); }
}

/* === Build additions: forced colours === */
/* The chosen What Pro adds entry in the Settings nav paints its icon
   #fff on its ink fill. Forced colours take the fill away but not the
   icon's own colour, so the icon was drawn white on the white canvas:
   it takes the entry's text colour there, as
   every other icon does. */
@media (forced-colors: active) {
  .improveab-admin .ad-nav__item--addon:is([aria-current="true"], .is-selected) > svg { color: CanvasText; }
}

/* =====================================================================
   ImproveAB - admin pages: wide tables, menus, very short windows
   ---------------------------------------------------------------------
   Every rule is scoped under .improveab-admin; later rules win, so
   nothing above needs editing.

   55  Results, table view: the widest tables (a store goal)
   56  Forced colours: the More actions menu, and every icon's colour
   57  A menu button's tooltip stays shut while its menu is open
   58  "Leave without saving?" at 400% zoom: the question and the
       focused answer both in view
   ===================================================================== */

/* ---------- 55. Results, table view: the widest tables --------------
   Under 793 px of box (windows of 961 to 1007 px with the WordPress menu
   open; at 960 and under WordPress folds the menu) a table of seven
   columns folds its rate bar away and its figures' cells take 11 px at
   the sides instead of 16, so it needs 743 px instead of 793 and no
   longer scrolls in that band. Narrower still (phones), the table keeps
   its bar and scrolls, as built. */
@container adtable (min-width: 743px) and (max-width: 792.98px) {
  .improveab-admin .ad-ctable:has(> thead > tr > th:nth-child(7)):not(:has(> thead > tr > th:nth-child(8))) :is(th, td).ad-ctable__meter { display: none; }
  .improveab-admin .ad-ctable:has(> thead > tr > th:nth-child(7)):not(:has(> thead > tr > th:nth-child(8))) :is(th, td):not(.ad-ctable__variant) { padding-left: 11px; padding-right: 11px; }
}

/* ---------- 56. Forced colours: the More actions menu, and icons -----
   Section 52's rule, now for menu items too: what can be pressed has a
   1 px ButtonText edge, 4 px apart. The item under the pointer takes
   the edge in Highlight; the item with keyboard focus the CanvasText
   ring. The rule above Delete stays, drawn as a border so forced
   colours keep it.
   Icons: an svg that sets its own colour keeps it in forced colours
   (browsers let an svg keep an author colour), so in a dark contrast
   theme the menu's icons were dark grey on black and Delete's bin
   stayed red. The same held for 22 icon rules across the admin (step
   and select chevrons, status icons, the reason arrow). In forced
   colours every icon now takes the colour of the text it sits in;
   meaning stays with the words ("Delete…", "Running", the error line),
   which is what forced colours ask for. Fills drawn as attributes (the
   brand mark) are untouched. */
@media (forced-colors: active) {
  .improveab-admin .ad-menu { gap: 4px; }
  .improveab-admin .ad-menu__item { border: 1px solid ButtonText; }
  .improveab-admin .ad-menu__item:is(:hover, .is-hover) { border-color: Highlight; }
  .improveab-admin .ad-menu__item:is(:focus-visible, .is-focus) { outline: 2px solid CanvasText; outline-offset: 1px; }
  .improveab-admin .ad-menu__item:is(:disabled, [aria-disabled="true"]) { border-color: GrayText; border-style: dashed; color: GrayText; }
  .improveab-admin .ad-menu__sep { height: 0; margin: 2px 6px; border-top: 1px solid CanvasText; background: none; }
  .improveab-admin svg { color: inherit !important; }
}

/* ---------- 57. A menu button's tooltip stays shut while its menu is open
   With More actions focused, its "More actions" tip opened beside the
   menu it had just opened (half under it, in the capture). The tip
   names a button whose menu is now showing, so it waits until the menu
   closes. Every icon button with a menu. */
.improveab-admin .ad-tipwrap:has(> [aria-expanded="true"]) > .ad-tip { opacity: 0; visibility: hidden; transition: none; }

/* ---------- 58. Dialogs at 400% zoom ---------------------------------
   "Leave without saving?": focus stays on Keep editing, the answer that
   loses nothing, and the app keeps it whole in the window, its 4 px
   focus ring included. The question above it
   now fits too: on windows 360 px tall or less the title's lines are
   1.25, the text sits 4 px under it with 1.35 lines, and the answers
   start 8 px under the text. That is 17 px, enough that at 320 x 200
   the layer opens scrolled 16 px instead of 25 and the title's top line
   is 8 px inside the window instead of 1 px above it, with the focus
   ring whole at the bottom (it was cut). Only Leave without saving is
   below the fold. The same spacing applies to every dialog in the
   layer (a delete confirm is 17 px shorter too). Answers stay 44 px. */
@media (max-height: 360px) {
  .improveab-admin .ad-dialog__title,
  .improveab-admin .ad-dialog--leave .ad-dialog__title { line-height: 1.25; }
  .improveab-admin .ad-dialog__text,
  .improveab-admin .ad-dialog--leave .ad-dialog__text { margin-top: 4px; line-height: 1.35; }
  .improveab-admin .ad-dialog__actions,
  .improveab-admin .ad-dialog--leave .ad-dialog__actions { margin-top: 8px; }
}

/* =====================================================================
   ImproveAB - admin pages: the Guide
   ---------------------------------------------------------------------
   Every rule is scoped under .improveab-admin and uses the tokens
   defined there; later rules win, so nothing above needs editing.

   59  Quick start: the five steps as one path
   60  Topics: an icon per topic, and a head that says when it is open
   61  The open topic's head while it is stuck under the admin bar
   62  Narrow pages, reduced motion, forced colours

   One topic is open at a time; that is script, not style.
   ===================================================================== */

/* ---------- 59. Quick start: the five steps as one path -------------- */
/* The steps are a sequence, so they read as one: ink discs joined by a
   line, the first and last ends left open. */
.improveab-admin .ad-quick .ad-numlist { gap: 0; }
.improveab-admin .ad-quick .ad-numlist li { position: relative; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; padding-bottom: 18px; }
.improveab-admin .ad-quick .ad-numlist li:last-child { padding-bottom: 0; }
.improveab-admin .ad-quick .ad-numlist li::before { position: relative; z-index: 1; width: 30px; height: 30px; background: var(--ad-ink); box-shadow: none; color: #fff; font-size: 13px; }
.improveab-admin .ad-quick .ad-numlist li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: var(--ad-line-2); }
.improveab-admin .ad-quick .ad-numlist li > div { padding-top: 4px; }

/* ---------- 60. Topics: an icon each, and an open head that shows it --
   Each head starts with the topic's icon on a sand tile, so the
   list scans by shape as well as by name. The open topic's head changes
   in three ways, not one: its tile turns amber, the head takes the
   amber tint the app uses for "yours" (the calculator's row), and
   "Close" shows beside the turned chevron. A closed head stays white. */
.improveab-admin .ad-topic__head { grid-template-columns: 40px minmax(0, 1fr) auto auto; column-gap: 16px; }
/* the app keeps the pressed head in place when another topic closes;
   the browser's own scroll anchoring would correct the same
   shift a second time, so it leaves the topics alone */
.improveab-admin .ad-topics { overflow-anchor: none; }
.improveab-admin .ad-topic__head > .ad-topic__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--ad-sand-2); color: var(--ad-ink); transition: background-color 120ms, color 120ms; }
.improveab-admin .ad-topic__icon > svg { width: 20px; height: 20px; }
.improveab-admin .ad-topic__head:is(:hover, .is-hover) .ad-topic__icon { background: var(--ad-paper); }
.improveab-admin .ad-topic__head > .ad-topic__state { display: none; margin: 0; color: var(--ad-ink-2); font: 600 14px/1 var(--ad-font); }
.improveab-admin .ad-topic__head > svg:last-child { box-sizing: content-box; padding: 6px; border-radius: 50%; }

.improveab-admin .ad-topic__head[aria-expanded="true"] { position: relative; background: var(--ad-amber-50); box-shadow: inset 0 -1px 0 var(--ad-amber-300); }
.improveab-admin .ad-topic__head[aria-expanded="true"]:is(:hover, .is-hover) { background: var(--ad-amber-100); }
.improveab-admin .ad-topic__head[aria-expanded="true"]:is(:focus-visible, .is-focus) { box-shadow: var(--ad-ring-inset), inset 0 -1px 0 var(--ad-amber-300); }
.improveab-admin .ad-topic__head[aria-expanded="true"] .ad-topic__icon { background: var(--ad-amber); color: var(--ad-ink); }
.improveab-admin .ad-topic__head[aria-expanded="true"] > .ad-topic__state { display: block; }
/* the topic above an open one keeps its rule; the open one's own top
   rule turns amber, so the tinted head has an edge on both sides */
.improveab-admin .ad-topic:has(> .ad-topic__h > [aria-expanded="true"]) { border-top-color: var(--ad-amber-300); }

/* ---------- 61. Stuck: the open head while its text scrolls under it --
   Section 34 keeps the open topic's head in view under the admin bar. It
   was white over white text, so it read as part of the page. Stuck, it
   keeps the amber tint and lifts off the text with a shadow, and a line
   along its bottom edge fills in amber as you read on through the topic
   (the app sets .is-stuck and --ad-topic-read). Its height does not change,
   so nothing under it moves when it sticks. */
.improveab-admin .ad-topic.is-stuck > .ad-topic__h > .ad-topic__head { box-shadow: inset 0 -1px 0 var(--ad-amber-300), 0 14px 24px -16px rgba(20, 20, 20, .45); }
.improveab-admin .ad-topic.is-stuck > .ad-topic__h > .ad-topic__head:is(:focus-visible, .is-focus) { box-shadow: var(--ad-ring-inset), inset 0 -1px 0 var(--ad-amber-300), 0 14px 24px -16px rgba(20, 20, 20, .45); }
.improveab-admin .ad-topic.is-stuck > .ad-topic__h > .ad-topic__head::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(var(--ad-topic-read, 0) * 100%); height: 3px; background: var(--ad-amber); }

/* ---------- 62. Narrow pages, reduced motion, forced colours --------- */
@container adpage (max-width: 600px) {
  .improveab-admin .ad-topic__head { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 14px; }
  .improveab-admin .ad-topic__head > .ad-topic__icon { width: 36px; height: 36px; border-radius: 10px; }
  .improveab-admin .ad-topic__icon > svg { width: 18px; height: 18px; }
  /* the chevron alone says it on a phone; the word needs the room */
  .improveab-admin .ad-topic__head[aria-expanded="true"] > .ad-topic__state { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .improveab-admin .ad-topic__icon { transition: none; }
}
@media (forced-colors: active) {
  .improveab-admin .ad-topic__head > .ad-topic__icon { border: 1px solid CanvasText; }
  .improveab-admin .ad-topic__head[aria-expanded="true"] { border-color: Highlight; }
  .improveab-admin .ad-topic__head[aria-expanded="true"] .ad-topic__icon { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .improveab-admin .ad-topic.is-stuck > .ad-topic__h > .ad-topic__head { border-bottom-width: 3px; }
  .improveab-admin .ad-topic.is-stuck > .ad-topic__h > .ad-topic__head::after { forced-color-adjust: none; background: Highlight; }
  .improveab-admin .ad-quick .ad-numlist li::before { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .improveab-admin .ad-quick .ad-numlist li:not(:last-child)::after { background: CanvasText; }
}

/* === Build additions: the Guide, right to left === */
/* The Guide's parts read from the other side on a right-to-left site:
   Quick start's joining line runs down the discs' side, and the stuck
   head's reading line fills from the right. */
html[dir="rtl"] .improveab-admin .ad-quick .ad-numlist li:not(:last-child)::after { left: auto; right: 14px; }
html[dir="rtl"] .improveab-admin .ad-topic.is-stuck > .ad-topic__h > .ad-topic__head::after { left: auto; right: 0; }

/* Build addition: a setup row that carries a flag
   ("No visitors yet - check this change is live") shows it on its own line
   above the title; beside it, in the narrow side column, the title broke
   into three short lines. The title stays first in the markup, so it is
   still read first. */
.improveab-admin .ad-setuprow--flagged > .ad-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding-top: 14px; padding-bottom: 14px; }
.improveab-admin .ad-setuprow--flagged > .ad-list__row > .ad-tag { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 0; }
.improveab-admin .ad-setuprow--flagged > .ad-list__row > .ad-list__title { grid-column: 1; grid-row: 2; }
.improveab-admin .ad-setuprow--flagged > .ad-list__row > svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-left: 0; }

/* === Build additions: tips kept inside the window === */
/* Moved back inside the window where its place would cross an edge
   (admin.js placeTips()); 0 everywhere else. No other rule sets
   translate on a tip, so its place at the end changes nothing. */
.improveab-admin .ad-tip { translate: var(--ad-tip-dx, 0) 0; }