/**
 * ImproveAB: the wp-admin dashboard widget ("A/B tests").
 *
 * Loaded on the dashboard only, for someone who gets the widget
 * (ImproveAB_Admin::dashboard_widget()). The widget's design comes first;
 * what the live widget adds is in the block at the end. The widget used to print these rules inline; a
 * file is cached across dashboard loads and needs no style tag of its own.
 */

/* Hanken Grotesk (SIL Open Font License, see ../fonts/OFL.txt), bundled so
   the dashboard never fetches a font from a third party. The same two
   faces as admin.css, which the dashboard does not load. */
@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;
}

/* =====================================================================
   ImproveAB - wp-admin dashboard widget
   ---------------------------------------------------------------------
   Scope   .improveab-dash   the widget's content, inside WordPress's own
           postbox (#improveab_dashboard_widget .inside). The postbox
           frame, title and handle buttons stay WordPress's.
   Same tokens and state rules as the plugin's pages: rows are links
   with a sand-3 hover, an inset ink ring for the keyboard, and the same
   words, drawn the same way, as the tests list: Collecting in muted text
   under the rate, Split off as a red tag, No visitors yet in words.
   The widget uses no headings: wp-admin's dashboard styles h3 with an
   id (#dashboard-widgets h3), which would outrank these rules.
   ===================================================================== */

.improveab-dash {
  --dw-ink: #141414; --dw-ink-2: #3d3a34; --dw-muted: #5f5b54;
  --dw-sand-1: #f7f5f0; --dw-sand-2: #f1efe8; --dw-sand-3: #e8e4da; --dw-sand-4: #ddd8cc;
  --dw-line-1: #e8e4dc;
  --dw-green: #1c7a45; --dw-red: #b42318; --dw-red-50: #fcf1ef; --dw-red-100: #f8dcd7;
  --dw-amber: #ffb52e; --dw-amber-hover: #f4a716; --dw-amber-press: #e59a0e; --dw-amber-ink: #8a5b00;
  --dw-ring: 0 0 0 2px #fff, 0 0 0 4px #141414;
  --dw-ring-inset: inset 0 0 0 2px #141414, inset 0 0 0 4px #fff;
  margin: -11px -12px -12px; /* WordPress pads .inside by 12 px: rows run edge to edge */
  color: var(--dw-ink);
  font: 400 14px/1.45 "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.improveab-dash *, .improveab-dash *::before, .improveab-dash *::after { box-sizing: border-box; }
.improveab-dash :is(p, ul, ol, li) { margin: 0; padding: 0; list-style: none; font-size: inherit; line-height: inherit; }
.improveab-dash svg.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* summary line */
.improveab-dash .dw-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 16px 10px; color: var(--dw-ink-2); font-size: 14px; }
.improveab-dash .dw-sum b { color: var(--dw-ink); font-weight: 600; }
.improveab-dash .dw-sum__item { display: inline-flex; align-items: center; gap: 7px; }
.improveab-dash .dw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dw-green); }
.improveab-dash .dw-dot--paused { background: var(--dw-amber); box-shadow: inset 0 0 0 1.5px var(--dw-amber-ink); }

/* rows: each is one link to the test's results */
.improveab-dash .dw-list { display: grid; }
.improveab-dash .dw-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  padding: 11px 16px; border-top: 1px solid var(--dw-line-1);
  color: var(--dw-ink); text-decoration: none;
  transition: background-color 120ms;
}
.improveab-dash .dw-row:is(:hover, .is-hover) { background: var(--dw-sand-3); color: var(--dw-ink); }
.improveab-dash .dw-row:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--dw-ring-inset); }
.improveab-dash .dw-name { display: block; overflow: hidden; font-weight: 600; font-size: 14.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.improveab-dash .dw-row:is(:hover, .is-hover) .dw-name { text-decoration: underline; text-underline-offset: 3px; }
.improveab-dash .dw-meta { display: block; margin-top: 2px; color: var(--dw-muted); font-size: 13px; }
.improveab-dash .dw-rate { display: grid; justify-items: end; gap: 3px; font-weight: 700; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; }
/* under the rate, as in the tests list: Collecting in muted words */
.improveab-dash .dw-sub { color: var(--dw-muted); font-weight: 500; font-size: 12px; line-height: 1; }
.improveab-dash .dw-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--dw-sand-3); color: var(--dw-ink-2); font-weight: 600; font-size: 11.5px; line-height: 1; }
.improveab-dash .dw-row:is(:hover, .is-hover) .dw-tag { background: var(--dw-sand-4); }
.improveab-dash .dw-tag--warn { background: var(--dw-red-50); color: var(--dw-red); box-shadow: inset 0 0 0 1px var(--dw-red-100); }

/* foot: more, and the way to the full list */
.improveab-dash .dw-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px 14px; border-top: 1px solid var(--dw-line-1); }
.improveab-dash .dw-link { color: var(--dw-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 3px; }
.improveab-dash .dw-link:is(:hover, .is-hover) { color: var(--dw-ink); text-decoration-thickness: 2px; }
.improveab-dash .dw-link:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--dw-ring); }

/* empty */
.improveab-dash .dw-empty { display: grid; justify-items: start; gap: 10px; padding: 18px 16px 18px; }
.improveab-dash .dw-empty__title { color: var(--dw-ink); font-weight: 600; font-size: 15px; line-height: 1.3; }
.improveab-dash .dw-empty__text { color: var(--dw-ink-2); font-size: 14px; line-height: 1.5; }
.improveab-dash .dw-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--dw-amber); border-radius: 8px; background: var(--dw-amber); color: var(--dw-ink); font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none; }
.improveab-dash .dw-btn > svg { width: 16px; height: 16px; }
.improveab-dash .dw-btn:is(:hover, .is-hover) { background: var(--dw-amber-hover); border-color: var(--dw-amber-hover); color: var(--dw-ink); }
.improveab-dash .dw-btn:is(:active, .is-pressed) { background: var(--dw-amber-press); border-color: var(--dw-amber-press); }
.improveab-dash .dw-btn:is(:focus-visible, .is-focus) { outline: 2px solid transparent; box-shadow: var(--dw-ring); }

@media (prefers-reduced-motion: reduce) { .improveab-dash * { transition-duration: 0ms !important; } }
@media (forced-colors: active) { .improveab-dash :is(.dw-row, .dw-link, .dw-btn):focus-visible { outline: 2px solid CanvasText; outline-offset: -2px; } }

/* =====================================================================
   What the live widget adds
   ===================================================================== */

/* The foot's line saying once what the rate is. */
.improveab-dash .dw-note { color: var(--dw-muted); font-size: 13px; line-height: 1.4; }

/* A name and its numbers line take their direction from their own text,
   so a Latin test name in a right-to-left admin is cut at its end, not its
   start, and "25 visitors · 3 conversions" keeps each number beside its
   word; they still line up with the admin's own side. */
.improveab-dash :is(.dw-name, .dw-meta) { unicode-bidi: plaintext; text-align: left; }
.rtl .improveab-dash :is(.dw-name, .dw-meta) { text-align: right; }

/* Phones: the foot link and the button are 44 px targets, as wp-admin's
   own controls are there. */
@media screen and (max-width: 782px) {
	.improveab-dash .dw-link { display: inline-flex; align-items: center; min-height: 44px; }
	.improveab-dash .dw-btn { min-height: 44px; }
}