/**
 * ImproveAB: the "A/B Tests" menu in the WordPress admin bar.
 *
 * The menu's design comes first; what the live menu adds is in the block
 * after it, and later additions follow. The menu is drawn on
 * the front end, where the bar always uses the default colour scheme
 * (schemes load in wp-admin only), so the sheet's literals are that
 * scheme's colours.
 *
 * Markup (ImproveAB_Render::admin_bar()): the A/B Tests node is a .menupop
 * whose own HTML is its dropdown, .ab-sub-wrapper > nav.abw, so WordPress
 * opens and closes it like its own menus. The hooks picker.js relies on:
 * the link inside #wp-admin-bar-improveab-new starts picking, and a test
 * found on the page gets .improveab-ab-onpage on its li
 * (#wp-admin-bar-improveab-t{id}) and its .improveab-ab-tag rewritten to
 * "On this page".
 */

/* =====================================================================
   ImproveAB - admin bar menu (A/B Tests)
   ---------------------------------------------------------------------
   Scope   .abw   the plugin's submenu in WordPress's bar, every rule
           written under #wpadminbar#wpadminbar (see below)
   The menu keeps WordPress's dark colours and behaviour: a list of plain
   links with group headings, no menu roles (WordPress's toolbar is
   navigation with links, not an ARIA menu).

   WordPress's admin-bar.css reaches every element
   inside the bar:
     #wpadminbar *  { line-height: 2.46153846; box-sizing: content-box;
                      height: auto; font-size: 13px; font-weight: 400; ... }
   and styles its own submenu links with more parts, for example
     #wpadminbar .quicklinks .menupop ul li .ab-item
                    { height: 26px; line-height: 2; min-width: 140px; }
   Its line-height pushed the text of the fixed-height tags and counts to
   the top of their boxes. So every rule here starts with the bar's id
   written twice, #wpadminbar#wpadminbar: it matches the same element and
   counts as two ids, which outranks all of WordPress's bar rules whatever
   structure the menu sits in (a node's HTML or .ab-item links). The reset
   below sets line-height, box-sizing, size and weight on the menu's own
   parts, so children inherit from their row again.

   Words follow the one-word list: Running now, Paused, Drafts, Stopped.
   ===================================================================== */

#wpadminbar#wpadminbar .abw,
#wpadminbar#wpadminbar .abw * {
  box-sizing: border-box;
  height: auto;
  min-width: 0;
  line-height: 1.3;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
#wpadminbar#wpadminbar .abw {
  width: 440px; padding: 8px 0;
  background: #2c3338; color: #f0f0f1;
  font: 400 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
}

/* rows: a test, the top action, and the plain links at the foot */
#wpadminbar#wpadminbar .abw__item {
  display: flex; align-items: center; gap: 10px;
  min-height: 32px; height: auto; padding: 5px 16px 5px 36px;
  color: #f0f0f1; font-size: 13px; font-weight: 400; line-height: 1.3;
  text-decoration: none; white-space: nowrap;
}
#wpadminbar#wpadminbar .abw__item--top { min-height: 40px; padding-left: 16px; font-weight: 600; }
#wpadminbar#wpadminbar .abw__item--link { padding-left: 16px; }
#wpadminbar#wpadminbar .abw__item > svg { flex: none; width: 16px; height: 16px; color: #c3c4c7; }
#wpadminbar#wpadminbar .abw__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wpadminbar#wpadminbar .abw__item:is(:hover, .is-hover) { background: #1d2327; color: #72aee6; }
#wpadminbar#wpadminbar .abw__item:is(:hover, .is-hover) > svg { color: #72aee6; }
#wpadminbar#wpadminbar .abw__item:is(:focus-visible, .is-focus) { outline: 2px solid #72aee6; outline-offset: -2px; color: #72aee6; }

/* type tags: outlined labels, text centred in the box */
#wpadminbar#wpadminbar .abw__tag {
  flex: none; display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px #8c8f94; color: #dcdcde;
  font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap;
}
#wpadminbar#wpadminbar .abw__item:is(:hover, .is-hover) .abw__tag { color: #72aee6; box-shadow: inset 0 0 0 1px #72aee6; }
/* the traffic split warning, as in the tests list: light red, 7.5:1 */
#wpadminbar#wpadminbar .abw__tag--warn { color: #ffb4a8; box-shadow: inset 0 0 0 1px #ffb4a8; }

/* group headings with a count badge (a div, not a link) */
#wpadminbar#wpadminbar .abw__head {
  display: flex; align-items: center; gap: 8px;
  height: auto; padding: 14px 16px 6px;
  color: #dcdcde; font-size: 12px; font-weight: 600; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase;
}
#wpadminbar#wpadminbar .abw__head--running { color: #68de7c; }
/* Paused in the plugin's amber, 7.3:1 on the menu (the build used
   WordPress's #f0c33c; either passes, amber matches the Paused pill) */
#wpadminbar#wpadminbar .abw__head--paused { color: #ffb52e; }
#wpadminbar#wpadminbar .abw__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#wpadminbar#wpadminbar .abw__dot--ring { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
#wpadminbar#wpadminbar .abw__dot--bars { width: 8px; height: 9px; border-radius: 0; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px); }
#wpadminbar#wpadminbar .abw__dot--square { border-radius: 2px; }
#wpadminbar#wpadminbar .abw__count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 18px; padding: 0 6px; border-radius: 9px;
  background: #3c434a; color: #f0f0f1;
  font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: 0;
}
#wpadminbar#wpadminbar .abw__sep { height: 1px; margin: 8px 0; padding: 0; background: #50575e; }

/* stroked line icons (class "i") */
#wpadminbar#wpadminbar .abw svg.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================================
   What the live menu adds
   ===================================================================== */

/* The top-level item: the brand mark and the running count. */
#wpadminbar #wp-admin-bar-improveab > .ab-item .ab-icon {
	display: inline-block !important;
	float: none !important;
	vertical-align: top;
	width: 16px !important;
	height: 16px !important;
	margin: 8px 6px 0 0 !important;
	padding: 0 !important;
	line-height: 16px;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 18 18'%3E%3Crect x='6' y='8' width='4' height='9' rx='1.3'/%3E%3Crect x='12' y='5' width='4' height='12' rx='1.3'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 18 18'%3E%3Crect x='6' y='8' width='4' height='9' rx='1.3'/%3E%3Crect x='12' y='5' width='4' height='12' rx='1.3'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	opacity: .75;
	transition: opacity .1s ease-in-out;
}
#wpadminbar #wp-admin-bar-improveab:hover > .ab-item .ab-icon,
#wpadminbar #wp-admin-bar-improveab.hover > .ab-item .ab-icon,
#wpadminbar #wp-admin-bar-improveab > .ab-item:focus .ab-icon { opacity: 1; }
/* Outlined on the bar's own background: a tinted fill put the hover blue
   under 4.5:1. */
#wpadminbar #wp-admin-bar-improveab .improveab-ab-count {
	display: inline-block;
	box-sizing: border-box;
	min-width: 18px;
	height: 18px;
	margin: 7px 0 0 6px;
	padding: 0 5px;
	border-radius: 9px;
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
	color: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	vertical-align: top;
}

/* A busy bar wraps into a second row. Each group of the bar stacks on its
   own and the right-hand one comes later, so its wrapped items (Howdy, a
   cache plugin's status) would paint over the menu's first rows: while
   the menu is open its group goes on top. And when the menu would run
   off the window, the bar's script (enqueue_admin_bar_style()) marks the
   item .abw-end and the menu opens from its right edge. */
#wpadminbar#wpadminbar #wp-admin-bar-root-default:has(> #wp-admin-bar-improveab:is(.hover, :hover, :focus-within)) { z-index: 100000; }
#wpadminbar#wpadminbar #wp-admin-bar-improveab.abw-end > .ab-sub-wrapper { right: 0; left: auto; }

/* Every running test is listed, so on a busy site the menu scrolls inside
   the window instead of running past its bottom edge, where nothing could
   reach it (the bar is fixed). 64 px leaves room for a second row of bar
   items above it. */
#wpadminbar#wpadminbar .abw { max-width: calc(100vw - 16px); max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; }
#wpadminbar#wpadminbar .abw__list,
#wpadminbar#wpadminbar .abw__list > li { display: block; float: none; margin: 0; padding: 0; list-style: none; }

/* A running test the picker found on this page. */
#wpadminbar#wpadminbar .improveab-ab-onpage .improveab-ab-tag { color: #68de7c; box-shadow: inset 0 0 0 1px #68de7c; }
/* "Exit preview" while a variant is being previewed. */
#wpadminbar#wpadminbar .abw__tag--accent { color: #ffb52e; box-shadow: inset 0 0 0 1px #ffb52e; }
/* "N more" under drafts and stopped tests, and the line under Running now
   when nothing runs: muted by colour, not opacity (#a7aaad on the menu's
   #2c3338 is 5.5:1). */
#wpadminbar#wpadminbar .abw__item--more { color: #a7aaad; }
#wpadminbar#wpadminbar .abw__empty { display: flex; align-items: center; min-height: 32px; padding: 5px 16px 5px 36px; color: #a7aaad; font-size: 13px; }

/* While an element is being picked the menu stays shut. WordPress keeps a
   menu open for as long as the pointer rests on it, so right after "Start
   a test on this page" it would sit over the page being picked from. The
   picking bar covers the admin bar then anyway; Esc ends picking. */
.improveab-pk-picking #wpadminbar #wp-admin-bar-improveab > .ab-sub-wrapper { display: none; }

/* A name takes its direction from its own text, so a Latin name in a
   right-to-left menu (or a Hebrew one in a left-to-right menu) is cut at
   its own end, while it still lines up with the menu's side. */
#wpadminbar#wpadminbar .abw__name { unicode-bidi: plaintext; text-align: left; }

/* Right to left: the indent under the headings sits on the right. */
.rtl #wpadminbar#wpadminbar .abw__item,
.rtl #wpadminbar#wpadminbar .abw__empty { padding: 5px 36px 5px 16px; }
.rtl #wpadminbar#wpadminbar :is(.abw__item--top, .abw__item--link) { padding-right: 16px; }
.rtl #wpadminbar#wpadminbar .abw__name { text-align: right; }

/* Phones: 44 px targets and 16 px text, as WordPress's own menus there
   (when a site shows the menu on a phone at all). */
@media screen and (max-width: 782px) {
	#wpadminbar#wpadminbar .abw__item { min-height: 44px; font-size: 16px; }
	#wpadminbar#wpadminbar .abw__item--top { min-height: 48px; }
	#wpadminbar#wpadminbar .abw__tag { height: 24px; font-size: 13px; }
}

/* The tags and counts centre their line box, which centres the capitals
   only when the system font's ascent and descent are balanced; with
   Liberation Sans or DejaVu (Linux) the words sat 2 px high. Where the
   browser can trim the text to its capitals and baseline, padding centres
   the capitals themselves, at the same 20 / 18 px, whatever the font. */
@supports (text-box: trim-both cap alphabetic) {
	#wpadminbar#wpadminbar .abw__tag { display: inline-block; height: auto; padding: calc((20px - 1cap) / 2) 7px; text-box: trim-both cap alphabetic; }
	#wpadminbar#wpadminbar .abw__count { display: inline-block; height: auto; padding: calc((18px - 1cap) / 2) 6px; text-align: center; text-box: trim-both cap alphabetic; }
}
@media screen and (max-width: 782px) {
	@supports (text-box: trim-both cap alphabetic) {
		#wpadminbar#wpadminbar .abw__tag { height: auto; padding-top: calc((24px - 1cap) / 2); padding-bottom: calc((24px - 1cap) / 2); }
	}
}

/* Forced colours drop box shadows and fills: the tags, the counts and the
   dividers keep a real edge. */
@media (forced-colors: active) {
	#wpadminbar#wpadminbar :is(.abw__tag, .abw__count) { border: 1px solid; }
	@supports (text-box: trim-both cap alphabetic) {
		#wpadminbar#wpadminbar .abw__tag { padding-top: calc((20px - 1cap) / 2 - 1px); padding-bottom: calc((20px - 1cap) / 2 - 1px); }
		#wpadminbar#wpadminbar .abw__count { padding-top: calc((18px - 1cap) / 2 - 1px); padding-bottom: calc((18px - 1cap) / 2 - 1px); }
	}
	#wpadminbar#wpadminbar .abw__sep { height: 0; border-top: 1px solid; }
}

/* WordPress's phone toolbar (782 px and narrower) hides every item it
   does not know, and this menu is the only way to start point-and-click,
   so without these rules the panel's phone sheet could not be reached.
   The item takes the form core gives its own there: the icon in a 52 x 46
   box, the label hidden by core's own .ab-label rule, the count with it
   (the item's title still says it). The item is static like core's, so the
   menu is placed against the toolbar; from 600 px down it spans the
   toolbar as core's menus do, and core's min-width: fit-content is undone
   there or long test names would widen the page. */
@media screen and (max-width: 782px) {
	#wpadminbar li#wp-admin-bar-improveab { display: block; position: static; }
	#wpadminbar #wp-admin-bar-improveab > .ab-item .ab-icon {
		width: 52px !important;
		height: 46px !important;
		margin: 0 !important;
		-webkit-mask-size: 32px 32px;
		mask-size: 32px 32px;
	}
	#wpadminbar #wp-admin-bar-improveab .improveab-ab-count { display: none; }
}
@media screen and (max-width: 600px) {
	#wpadminbar#wpadminbar #wp-admin-bar-improveab > .ab-sub-wrapper { left: 0; right: auto; width: 100%; min-width: 0; }
	#wpadminbar#wpadminbar #wp-admin-bar-improveab .abw { box-sizing: border-box; width: 100%; max-width: 100%; }
}
/* Reduced motion: the item's icon fade and core's own 0.1 s colour
   transitions on the bar's items, inside this item only. */
@media (prefers-reduced-motion: reduce) {
	#wpadminbar#wpadminbar #wp-admin-bar-improveab,
	#wpadminbar#wpadminbar #wp-admin-bar-improveab *,
	#wpadminbar#wpadminbar #wp-admin-bar-improveab *::before,
	#wpadminbar#wpadminbar #wp-admin-bar-improveab *::after { transition: none !important; }
}

/* =====================================================================
   ImproveAB - admin bar menu (A/B Tests): a busy site, forced colours
   ---------------------------------------------------------------------
   Every rule is written under #wpadminbar#wpadminbar, as above.

   The phone toolbar item: the brand
   mark in core's 52 x 46 box, label and count hidden, the count in the
   item's title; the menu spans the toolbar up to 600 px and opens from
   the item from 601 to 782 px (from its right edge where it would run
   off the window). Two small additions:

   1. The menu scrolls inside the window on a busy site, and at 390 x 844
      its last visible row ended exactly on the edge, so nothing showed
      there was more (New test and Settings were below). A shade at the
      edge that has more, top or bottom, which goes when you reach it.
      Backgrounds only: no script, nothing to focus.
   2. Forced colours: the menu floats over the page with no shadow left,
      so it gets an edge, as the panel's menus do.
   ===================================================================== */
#wpadminbar#wpadminbar .abw {
  background:
    linear-gradient(#2c3338, #2c3338) center top / 100% 24px no-repeat local,
    linear-gradient(#2c3338, #2c3338) center bottom / 100% 24px no-repeat local,
    linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) center top / 100% 18px no-repeat scroll,
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5)) center bottom / 100% 18px no-repeat scroll,
    #2c3338;
}
@media (forced-colors: active) {
  #wpadminbar#wpadminbar .abw { border: 1px solid CanvasText; }
}