/*
 * Summarize with AI
 * Florian Hieß, www.florianhiess.at
 *
 * Everything is scoped to .wpais and driven by custom properties, so a theme
 * can restyle the buttons by overriding tokens instead of fighting selectors.
 *
 * A few declarations carry !important on purpose. Themes routinely set
 * text-decoration, background-image and font-weight on every link inside the
 * content area, and the plugin stylesheet cannot rely on being loaded last.
 * The list is deliberately short.
 */

/* ------------------------------------------------------------------
   Tokens, light by default
   ------------------------------------------------------------------ */
.wpais {
	--wpais-accent: #1d4ed8;
	--wpais-accent-contrast: #ffffff;
	/* The accent as a text color. On a dark ground the saturated accent often
	   misses 4.5:1, so the dark tokens lift it towards white. */
	--wpais-accent-ink: var(--wpais-accent);
	/* Hover pair. The settings screen can override both; without color-mix the
	   hover simply keeps the accent, which still reads as a state change
	   because border and text swap with it. */
	--wpais-hover-bg: var(--wpais-accent);
	--wpais-hover-ink: var(--wpais-accent-contrast);
	/* Pill style ground. Free to choose, otherwise derived from the accent. */
	--wpais-pill-bg: var(--wpais-soft);
	--wpais-pill-ink: var(--wpais-fg);
	--wpais-fg: #16161a;
	--wpais-bg: #ffffff;
	--wpais-muted: #55555f;
	--wpais-border: #d6d6dd;
	--wpais-surface: #f6f6f8;
	--wpais-soft: rgba(0, 0, 0, 0.06);
	--wpais-shadow: 0 8px 24px rgba(16, 16, 22, 0.14);
	--wpais-radius: 8px;
	--wpais-gap: 0.5rem;
	--wpais-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wpais-font-size: 0.875rem;
	--wpais-pad-y: 0.55rem;
	--wpais-pad-x: 0.85rem;
	--wpais-icon: 1.05em;
	--wpais-offset: 28px;
	--wpais-z: 9990;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wpais-gap);
	margin: 1.25rem 0;
	font-family: var(--wpais-font);
	font-size: var(--wpais-font-size);
	line-height: 1.35;
	box-sizing: border-box;
}

.wpais *,
.wpais *::before,
.wpais *::after {
	box-sizing: border-box;
}

.wpais--inherit-typo {
	font-family: inherit;
	font-size: inherit;
}

@supports (color: color-mix(in srgb, red 50%, white)) {
	.wpais {
		--wpais-soft: color-mix(in srgb, var(--wpais-accent) 12%, var(--wpais-bg));
		--wpais-hover-bg: color-mix(in srgb, var(--wpais-accent) 85%, #000000);
	}
}

/* Dark tokens, shared by the explicit and the automatic scheme */
.wpais--scheme-dark {
	--wpais-fg: #f2f2f5;
	--wpais-bg: #14141a;
	--wpais-muted: #b3b3c0;
	--wpais-border: #3a3a46;
	--wpais-surface: #1e1e26;
	--wpais-soft: rgba(255, 255, 255, 0.1);
	--wpais-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
	.wpais--scheme-auto {
		--wpais-fg: #f2f2f5;
		--wpais-bg: #14141a;
		--wpais-muted: #b3b3c0;
		--wpais-border: #3a3a46;
		--wpais-surface: #1e1e26;
		--wpais-soft: rgba(255, 255, 255, 0.1);
		--wpais-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
	}

	@supports (color: color-mix(in srgb, red 50%, white)) {
		.wpais--scheme-auto {
			--wpais-soft: color-mix(in srgb, var(--wpais-accent) 22%, var(--wpais-bg));
			--wpais-accent-ink: color-mix(in srgb, var(--wpais-accent) 55%, #ffffff);
		}
	}
}

@supports (color: color-mix(in srgb, red 50%, white)) {
	.wpais--scheme-dark {
		--wpais-soft: color-mix(in srgb, var(--wpais-accent) 22%, var(--wpais-bg));
		--wpais-accent-ink: color-mix(in srgb, var(--wpais-accent) 55%, #ffffff);
		--wpais-hover-bg: color-mix(in srgb, var(--wpais-accent) 78%, #ffffff);
	}
}

/* ------------------------------------------------------------------
   Sizes
   ------------------------------------------------------------------ */
.wpais--size-sm {
	--wpais-font-size: 0.8125rem;
	--wpais-pad-y: 0.4rem;
	--wpais-pad-x: 0.7rem;
	--wpais-gap: 0.4rem;
}

.wpais--size-lg {
	--wpais-font-size: 1rem;
	--wpais-pad-y: 0.7rem;
	--wpais-pad-x: 1.1rem;
	--wpais-gap: 0.65rem;
}

/* ------------------------------------------------------------------
   Alignment
   ------------------------------------------------------------------ */
.wpais--align-center {
	justify-content: center;
}

.wpais--align-right {
	justify-content: flex-end;
}

/* ------------------------------------------------------------------
   Buttons, shared skeleton
   ------------------------------------------------------------------ */
.wpais__menu {
	position: relative;
	margin: 0;
}

.wpais__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	min-height: 2.25rem;
	margin: 0;
	padding: var(--wpais-pad-y) var(--wpais-pad-x);
	border: 1px solid transparent;
	border-radius: var(--wpais-radius);
	background-color: transparent;
	background-image: none !important;
	color: var(--wpais-fg);
	font: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none !important;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	list-style: none;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
		box-shadow 0.15s ease, transform 0.15s ease;
}

.wpais__btn::-webkit-details-marker,
.wpais__btn::marker {
	display: none;
	content: "";
}

.wpais__btn:focus-visible {
	outline: 3px solid var(--wpais-accent-ink);
	outline-offset: 2px;
}

.wpais__ico {
	width: var(--wpais-icon);
	height: var(--wpais-icon);
	flex: 0 0 auto;
}

.wpais__caret {
	width: 0.85em;
	height: 0.85em;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.wpais__menu[open] .wpais__caret {
	transform: rotate(180deg);
}

.wpais__arrow {
	width: 0.85em;
	height: 0.85em;
	flex: 0 0 auto;
	opacity: 0.55;
}

.wpais__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
   Panel
   ------------------------------------------------------------------ */
.wpais__panel {
	position: absolute;
	top: calc(100% + 0.45rem);
	left: 0;
	z-index: calc(var(--wpais-z) + 1);
	width: max-content;
	min-width: 14rem;
	max-width: min(20rem, calc(100vw - 2rem));
	padding: 0.75rem;
	border: 1px solid var(--wpais-border);
	border-radius: var(--wpais-radius);
	background-color: var(--wpais-bg);
	color: var(--wpais-fg);
	box-shadow: var(--wpais-shadow);
	text-align: left;
}

.wpais--align-right .wpais__panel,
.wpais--bar .wpais__panel {
	right: 0;
	left: auto;
}

/* Set by the script when a left aligned panel would leave the viewport. */
.wpais__panel.is-flipped {
	right: 0;
	left: auto;
}

.wpais__note {
	margin: 0 0 0.6rem;
	color: var(--wpais-muted);
	font-size: 0.8125em;
	line-height: 1.45;
}

.wpais__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpais__row {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wpais__row + .wpais__row {
	margin-top: 0.2rem;
}

.wpais__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	width: 100%;
	min-height: 2.25rem;
	padding: 0.45rem 0.55rem;
	border: 1px solid transparent;
	border-radius: calc(var(--wpais-radius) - 2px);
	background: none;
	background-image: none !important;
	color: var(--wpais-fg);
	font: inherit;
	font-weight: 600;
	text-align: left;
	text-decoration: none !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.wpais__item:hover,
.wpais__item:focus-visible {
	background-color: var(--wpais-soft);
}

.wpais__item:focus-visible {
	outline: 2px solid var(--wpais-accent-ink);
	outline-offset: 1px;
}

.wpais__status {
	margin: 0.5rem 0 0;
	color: var(--wpais-muted);
	font-size: 0.8125em;
	line-height: 1.4;
}

.wpais__status:empty {
	display: none;
}

/* ------------------------------------------------------------------
   Hover and open state

   One rule for every style and both buttons, driven by two tokens. The
   settings screen can set them freely; otherwise they are derived from the
   accent color. Styles that need more than a color swap add to this below.
   ------------------------------------------------------------------ */
.wpais__btn:hover,
.wpais__menu[open] > .wpais__btn {
	border-color: var(--wpais-hover-bg);
	background-color: var(--wpais-hover-bg);
	color: var(--wpais-hover-ink);
}

/* ------------------------------------------------------------------
   Style: solid
   ------------------------------------------------------------------ */
.wpais--style-solid .wpais__btn {
	border-color: var(--wpais-accent);
	background-color: var(--wpais-accent);
	color: var(--wpais-accent-contrast);
}

/* ------------------------------------------------------------------
   Style: outline
   ------------------------------------------------------------------ */
.wpais--style-outline .wpais__btn {
	border-width: 2px;
	border-color: var(--wpais-accent-ink);
	background-color: transparent;
	color: var(--wpais-accent-ink);
}

/* ------------------------------------------------------------------
   Style: pill
   ------------------------------------------------------------------ */
.wpais--style-pill .wpais__btn {
	border-radius: 999px;
	border-color: var(--wpais-pill-bg);
	background-color: var(--wpais-pill-bg);
	color: var(--wpais-pill-ink);
}

.wpais--style-pill .wpais__panel {
	border-radius: 14px;
}

.wpais--style-pill .wpais__item {
	border-radius: 999px;
}

/* ------------------------------------------------------------------
   Style: minimal
   ------------------------------------------------------------------ */
.wpais--style-minimal .wpais__btn {
	min-height: auto;
	padding: 0.2rem 0;
	border-color: transparent;
	background-color: transparent;
	color: var(--wpais-accent-ink);
}

.wpais--style-minimal {
	--wpais-gap: 1.1rem;
}

/* Minimal has no ground to color, so the hover color becomes the text
   color here and the underline carries the state. */
.wpais--style-minimal .wpais__btn:hover,
.wpais--style-minimal .wpais__menu[open] > .wpais__btn {
	border-color: transparent;
	background-color: transparent;
	color: var(--wpais-hover-bg);
}

.wpais--style-minimal .wpais__btn:hover .wpais__label,
.wpais--style-minimal .wpais__menu[open] > .wpais__btn .wpais__label {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------
   Style: neo brutalism
   ------------------------------------------------------------------ */
.wpais--style-brutal .wpais__btn {
	border: 3px solid var(--wpais-fg);
	border-radius: 0;
	background-color: var(--wpais-accent);
	color: var(--wpais-accent-contrast);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-shadow: 4px 4px 0 var(--wpais-fg);
}

.wpais--style-brutal .wpais__btn:hover,
.wpais--style-brutal .wpais__menu[open] > .wpais__btn {
	border-color: var(--wpais-fg);
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--wpais-fg);
}

.wpais--style-brutal .wpais__panel {
	border: 3px solid var(--wpais-fg);
	border-radius: 0;
	box-shadow: 5px 5px 0 var(--wpais-accent);
}

.wpais--style-brutal .wpais__item {
	border-radius: 0;
	border-width: 2px;
}

.wpais--style-brutal .wpais__item:hover,
.wpais--style-brutal .wpais__item:focus-visible {
	border-color: var(--wpais-fg);
	background-color: var(--wpais-soft);
}

.wpais--style-brutal .wpais__note {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The Google G brings its own colors, so it needs no inherited fill */
.wpais__ico--google {
	width: 1.1em;
	height: 1.1em;
}

/* ------------------------------------------------------------------
   Variant: floating rail at the side edge
   ------------------------------------------------------------------ */
/* One step above the bar variant: if a site uses both, the rail must not be
   swallowed once the two meet at the bottom edge on narrow screens. */
.wpais--float {
	position: fixed;
	top: 50%;
	z-index: calc(var(--wpais-z) + 2);
	flex-direction: column;
	align-items: stretch;
	margin: 0;
	transform: translateY(-50%);
}

.wpais--float.wpais--float-right {
	right: var(--wpais-offset);
	left: auto;
}

.wpais--float.wpais--float-left {
	left: var(--wpais-offset);
	right: auto;
}

.wpais--float .wpais__panel {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.wpais--float.wpais--float-right .wpais__panel {
	right: calc(100% + 0.6rem);
	left: auto;
}

.wpais--float.wpais--float-left .wpais__panel {
	left: calc(100% + 0.6rem);
	right: auto;
}

/* From 1024 pixels up the rail stands upright: the label runs top to bottom,
   the button keeps the width of a single line and the content next to it stays
   readable. An inline SVG is a replaced element, so the icons stay upright and
   the caret still points down for closed and up for open.

   In vertical-rl the inline axis runs downwards, so the existing
   flex-direction:row already stacks icon and label. No flex-direction:column,
   that would put them side by side. */
@media (min-width: 1024px) {
	.wpais--float .wpais__btn {
		min-width: 2.5rem;
		min-height: 0;
		padding: var(--wpais-pad-x) var(--wpais-pad-y);
		writing-mode: vertical-rl;
	}

	/* Keeps two upright buttons from growing past the viewport height */
	.wpais--float .wpais__label {
		max-height: 40vh;
		overflow: hidden;
	}
}

/* On narrow screens the rail would cover the content, so it drops to the
   bottom edge and keeps the icons only. */
@media (max-width: 1023px) {
	.wpais--float {
		top: auto;
		bottom: 1rem;
		flex-direction: row;
		transform: none;
	}

	.wpais--float .wpais__label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.wpais--float .wpais__panel {
		top: auto;
		bottom: calc(100% + 0.6rem);
		right: 0;
		left: auto;
		transform: none;
	}

	.wpais--float.wpais--float-left .wpais__panel {
		right: auto;
		left: 0;
	}
}

/* ------------------------------------------------------------------
   Variant: sticky bar at the bottom edge
   ------------------------------------------------------------------ */
.wpais--bar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--wpais-z);
	justify-content: center;
	margin: 0;
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--wpais-border);
	background-color: var(--wpais-bg);
	box-shadow: 0 -4px 16px rgba(16, 16, 22, 0.1);
}

.wpais--bar .wpais__panel {
	top: auto;
	bottom: calc(100% + 0.6rem);
}

/* ------------------------------------------------------------------
   Icons only on small screens

   Optional. The label moves into the accessible name only, so the button keeps
   its full name for screen readers while the row stops eating the width of a
   phone. The dropdown keeps its caret, otherwise nothing signals that there is
   a menu behind it.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.wpais--mobile-icons .wpais__label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.wpais--mobile-icons .wpais__btn {
		--wpais-icon: 1.25em;

		min-width: 2.5rem;
		padding: var(--wpais-pad-y);
	}

	.wpais--mobile-icons.wpais--style-minimal .wpais__btn {
		min-width: 0;
		padding: 0.2rem;
	}
}

/* ------------------------------------------------------------------
   Variant: band at the top of the page
   ------------------------------------------------------------------ */
.wpais--top {
	justify-content: center;
	margin: 0;
	padding: 0.6rem 1rem;
	border-bottom: 1px solid var(--wpais-border);
	background-color: var(--wpais-surface);
}

/* ------------------------------------------------------------------
   Motion and print
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.wpais__btn,
	.wpais__item,
	.wpais__caret {
		transition: none;
	}

	.wpais--style-brutal .wpais__btn:hover,
	.wpais--style-brutal .wpais__menu[open] > .wpais__btn {
		transform: none;
	}
}

@media print {
	.wpais {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Preview on the settings screen

   The links lead nowhere there, so the cursor says so. They stay real links
   with real hover and focus states, which is the point of the preview.
   ------------------------------------------------------------------ */
.wpais--preview .wpais__item {
	cursor: default;
}

.wpais--preview .wpais__item[disabled] {
	opacity: 0.55;
}