/*
 * The left rail.
 *
 * HOW IT IS PLACED, AND WHY IT IS A FLOAT
 *
 * WordPress prints admin notices and then the page body as siblings inside
 * #wpbody-content, and gives a plugin no hook after the page body. There is
 * therefore no element to wrap around "everything except the rail", so a grid
 * or a two-column flexbox has nothing to put in its second column: CSS grid
 * cannot span an item down a track whose length is unknown, and `grid-row:
 * 1 / -1` resolves against the explicit grid, which here has one row line.
 *
 * A float has none of that problem. The rail is the first child of
 * #wpbody-content (admin_notices priority 0), it floats left at a fixed width,
 * and every other child is indented past it. That holds for any number of
 * siblings, including notices printed by other plugins, and it needs no script
 * and no knowledge of how many there are.
 */

body.ai-o-optimiser-has-rail #wpbody-content > * {
	margin-left: 252px;
}

body.ai-o-optimiser-has-rail #wpbody-content > .ai-o-optimiser-rail {
	float: left;
	width: 240px;
	margin-left: 0;
}

/*
 * #screen-meta and #screen-meta-links are printed before the rail and are the
 * one pair that must not be pushed: the Screen Options panel belongs to
 * WordPress and its tab is anchored to the right edge of the content area.
 */
body.ai-o-optimiser-has-rail #wpbody-content > #screen-meta,
body.ai-o-optimiser-has-rail #wpbody-content > #screen-meta-links {
	margin-left: 0;
}

.ai-o-optimiser-rail {
	box-sizing: border-box;
	margin: 10px 0 24px;
	padding: 0 0 16px;
	background: var(--aio-paper, #fff);
	border: 1px solid var(--aio-hair, #d8d5d2);
	border-radius: 10px;
}

/* --------------------------------------------------------------- the brand */

.ai-o-optimiser-rail-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 16px 14px;
	border-bottom: 1px solid var(--aio-hair, #d8d5d2);
	margin-bottom: 14px;
}

.ai-o-optimiser-rail-mark {
	flex: none;
	display: block;
	width: auto;
	height: 26px;
}

.ai-o-optimiser-rail-identity {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ai-o-optimiser-rail-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--aio-ink, #201e1d);
}

/*
 * The edition, as a badge rather than a caption. It is the one thing on the
 * screen that says which of the two plugins this is, so it has to survive being
 * glanced at -- 1.37.0 set it in grey 10.5px under the name and it did not.
 */
.ai-o-optimiser-rail-edition {
	align-self: flex-start;
	margin-top: 3px;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.5;
}

.ai-o-optimiser-rail-edition.is-paid {
	background: var(--aio-accent-tint, #eafaf6);
	color: var(--aio-accent-ink, #0e7c66);
	box-shadow: inset 0 0 0 1px var(--aio-accent, #1bc9a6);
}

/*
 * Free is deliberately the quieter of the two. It is a statement of fact, not a
 * warning, and colouring it amber would make an entirely working install look
 * like it had a problem.
 */
.ai-o-optimiser-rail-edition.is-free {
	background: var(--aio-idle-fill, #e6e3e0);
	color: var(--aio-muted, #6b6764);
}

/* -------------------------------------------------------------- the groups */

.ai-o-optimiser-rail-group + .ai-o-optimiser-rail-group {
	margin-top: 16px;
}

.ai-o-optimiser-rail-group-title {
	margin: 0 0 5px;
	padding: 0 16px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aio-muted, #6b6764);
}

.ai-o-optimiser-rail-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 10px 13px;
	border-left: 3px solid transparent;
	color: #3c434a;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4;
}

.ai-o-optimiser-rail-item:hover,
.ai-o-optimiser-rail-item:focus {
	background: var(--aio-ground, #f3f2f2);
	color: var(--aio-accent-ink, #0e7c66);
}

.ai-o-optimiser-rail-item:focus-visible {
	outline: 2px solid var(--aio-accent-ink, #0e7c66);
	outline-offset: -2px;
}

/*
 * The open section. Weight and a left edge rather than colour alone: the rail
 * is the only thing on the screen saying where you are, and a reader who
 * cannot separate the accent from the body text would otherwise be told
 * nothing at all.
 */
.ai-o-optimiser-rail-item.is-open {
	border-left-color: var(--aio-accent, #1bc9a6);
	background: var(--aio-accent-tint, #eafaf6);
	color: var(--aio-accent-ink, #0e7c66);
	font-weight: 600;
}

.ai-o-optimiser-rail-item > .dashicons {
	flex: none;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 18px;
	opacity: .85;
}

.ai-o-optimiser-rail-label {
	min-width: 0;
}

/*
 * The count. Amber because it is outstanding work, the same reading the
 * measure badge carries on a landing card -- and it is absent rather than zero
 * when there is none, so the rail is quiet on a site with nothing to do.
 */
.ai-o-optimiser-rail-tail {
	margin-left: auto;
	flex: none;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--aio-warn-fill, #f9e8c9);
	color: var(--aio-warn-edge, #8a5a00);
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/*
 * The count's spoken form -- "29 open" rather than "29". core's
 * .screen-reader-text does this already, but the rail is navigation and must
 * not read as "12 12 to review" on any screen where a stylesheet was stripped,
 * so it carries its own copy of the rule rather than depending on core's.
 */
.ai-o-optimiser-rail-tail .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/*
 * Narrow screens, and the folded WordPress menu on a small laptop. The wider
 * 240px rail is useful on desktop, but below 1100px it would steal too much of
 * the workspace. At that point it becomes a top navigation row instead.
 */
@media (max-width: 1100px) {
	body.ai-o-optimiser-has-rail #wpbody-content > * {
		margin-left: 0;
	}
	body.ai-o-optimiser-has-rail #wpbody-content > .ai-o-optimiser-rail {
		float: none;
		width: auto;
		margin: 10px 20px 14px 2px;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 4px 18px;
		padding-bottom: 10px;
	}
	.ai-o-optimiser-rail-brand {
		flex: 1 0 100%;
		margin-bottom: 4px;
	}
	.ai-o-optimiser-rail-group + .ai-o-optimiser-rail-group {
		margin-top: 0;
	}
	.ai-o-optimiser-rail-item {
		padding-left: 16px;
		border-left: 0;
		border-bottom: 2px solid transparent;
	}
	.ai-o-optimiser-rail-item.is-open {
		border-bottom-color: var(--aio-accent, #1bc9a6);
	}
}

@media print {
	body.ai-o-optimiser-has-rail #wpbody-content > .ai-o-optimiser-rail {
		display: none;
	}
	body.ai-o-optimiser-has-rail #wpbody-content > * {
		margin-left: 0;
	}
}