/**
 * AquaNetica Global Search overlay.
 *
 * MOBILE FIRST, and the mobile rules are the load-bearing ones:
 *
 *   - the input is 16px and never smaller, because anything under 16px makes
 *     iOS Safari zoom the viewport on focus and the user then cannot see the
 *     results they are typing towards;
 *   - every control clears 44px, using transparent ::before targets where the
 *     visible control is smaller, so the layout does not have to grow to make
 *     the target legal;
 *   - height is 100dvh with a 100vh fallback, because the mobile browser
 *     chrome and the on-screen keyboard both eat into vh and the bottom of a
 *     100vh panel ends up under the keyboard;
 *   - safe-area insets are honoured on the panel, so the close control is not
 *     under the notch and the last result is not under the home indicator.
 *
 * Everything is namespaced .aqns- and nothing here styles a theme selector, so
 * this stylesheet cannot reach the header, the nav or any existing component.
 * The one exception is the trigger's own order/scoping rule, which lives
 * inline in render.php rather than here.
 *
 * @package AquaNetica_Search
 */

.aqns-root{
	--aqns-teal:#15807d;
	--aqns-teal-ink:#0f6360;
	--aqns-ink:#12191a;
	--aqns-ink-2:#4a5859;
	/*
	 * #6f7f80 until the glow pass, where measuring the tinted surfaces turned
	 * up a pre-existing failure rather than a new one: it gives 4.18:1 on
	 * white, and the two things using it (the 11px uppercase section headings
	 * and the 12.5px status line) are normal text by WCAG's sizing rule, so
	 * they need 4.5:1. #627172 measures 5.09:1 on white and 4.67:1 on the
	 * hover surface, clearing AA on both without visibly changing the design.
	 */
	--aqns-ink-3:#627172;
	--aqns-surface:#ffffff;
	--aqns-surface-2:#f2f6f5;
	--aqns-line:#dde5e3;
	--aqns-scrim:rgba(10,20,20,.46);
	--aqns-radius:12px;

	/*
	 * RIBBON GLOW PALETTE.
	 *
	 * Sampled from aquanetica-ribbon-final.webp rather than picked by eye.
	 * Clustering its opaque, saturated pixels by hue gives four families and,
	 * importantly, their WEIGHTING:
	 *
	 *   teal   #2da8b9   30,405 samples   ~55%
	 *   cream  #ffe4c5    8,572 samples   ~16%
	 *   coral  #ffa488    7,734 samples   ~14%
	 *   pink   #ffa9b4    7,238 samples   ~13%
	 *
	 * That weighting is the whole design rule. Teal carries the glow and the
	 * other three only tint its edges, which is what keeps this reading as
	 * AquaNetica rather than as a rainbow: give the four equal presence and it
	 * immediately looks like a generic AI shimmer. There is no purple anywhere
	 * in the artwork and none is introduced here.
	 *
	 * --aqns-teal (#15807d) stays the INK colour for text, borders and focus
	 * rings because it carries contrast; the lighter ribbon teal is for glow
	 * only, where contrast is not being asked of it.
	 */
	--aqns-rib-teal:45,168,185;    /* #2da8b9 */
	--aqns-rib-aqua:51,174,189;    /* #33aebd */
	--aqns-rib-cream:255,228,197;  /* #ffe4c5 */
	--aqns-rib-coral:255,164,136;  /* #ffa488 */
	--aqns-rib-pink:255,169,180;   /* #ffa9b4 */

	/* Glow strength, dialled per mode. Search stays near-neutral. */
	--aqns-glow:0;

	position:fixed;
	inset:0;
	z-index:100000;
	display:flex;
	flex-direction:column;
}
.aqns-root[hidden]{display:none}

.aqns-scrim{position:absolute;inset:0;background:var(--aqns-scrim);border:0;padding:0;margin:0}

/* ── The panel ────────────────────────────────────────────────────────── */
/*
 * Full screen on mobile. dvh first with a vh fallback for browsers that do not
 * know dvh, declared in that order so the newer unit wins where it is
 * understood.
 */
.aqns-panel{
	position:relative;
	display:flex;
	flex-direction:column;
	width:100%;
	height:100vh;
	height:100dvh;
	background:var(--aqns-surface);
	color:var(--aqns-ink);
	overflow:hidden;
	padding-top:env(safe-area-inset-top);
	font-family:inherit;
}

@media (min-width:768px){
	.aqns-root{align-items:center;justify-content:flex-start}
	.aqns-panel{
		width:min(760px,calc(100vw - 48px));
		height:auto;
		max-height:min(76vh,760px);
		margin-top:8vh;
		border-radius:var(--aqns-radius);
		/*
		 * Depth shadow first, then the faintest ribbon tint on the card edge.
		 * At 4% and 3% these are barely nameable as colour; they read as the
		 * card being lit by something warm off to one side, which is the
		 * "premium product UI" cue rather than a visible glow.
		 */
		box-shadow:
			0 24px 70px -20px rgba(10,25,25,.45),
			0 2px 8px rgba(10,25,25,.12),
			0 18px 60px -30px rgba(var(--aqns-rib-teal),.20),
			-14px 10px 50px -34px rgba(var(--aqns-rib-coral),.16);
		transition:box-shadow .45s ease;
	}
	/* Ask lifts the card very slightly warmer. Still under 10% opacity. */
	.aqns-root.is-ask .aqns-panel{
		box-shadow:
			0 24px 70px -20px rgba(10,25,25,.45),
			0 2px 8px rgba(10,25,25,.12),
			0 18px 60px -26px rgba(var(--aqns-rib-teal),.30),
			-16px 12px 54px -30px rgba(var(--aqns-rib-coral),.24),
			16px 14px 54px -32px rgba(var(--aqns-rib-pink),.20);
	}
}

/* ── The search bar ───────────────────────────────────────────────────── */
.aqns-bar{
	position:relative;
	display:flex;
	align-items:center;
	gap:10px;
	flex:0 0 auto;
	padding:10px 12px;
	border-bottom:1px solid var(--aqns-line);
	background:var(--aqns-surface);
	transition:border-color .3s ease, box-shadow .35s ease;
}
.aqns-bar-icon{flex:0 0 auto;color:var(--aqns-ink-3);transition:color .3s ease}

/*
 * FOCUSED FIELD.
 *
 * :focus-within on the row, not :focus on the input, because the visible
 * field IS the row: the input has no border of its own. The glow is layered
 * box-shadows rather than a blurred pseudo-element, which keeps it out of any
 * z-index or stacking-context argument with the panel, paints outside the box
 * by definition, and composites on the GPU without a filter pass. That last
 * point is what makes it safe on a mid-range Android.
 *
 * SEARCH MODE STAYS NEUTRAL. One teal wash, no other hue. This is the default
 * state and it should feel like a well-made search field, nothing more.
 */
.aqns-bar:focus-within{
	border-bottom-color:rgba(var(--aqns-rib-teal),.55);
	box-shadow:
		0 10px 26px -16px rgba(var(--aqns-rib-teal),.55),
		0 1px 0 0 rgba(var(--aqns-rib-teal),.16);
}
.aqns-bar:focus-within .aqns-bar-icon{color:var(--aqns-teal)}

/*
 * ASK MODE. The same field, warmed.
 *
 * Coral sits left and pink right, mirroring how the two flank the teal in the
 * artwork, with cream underneath as the soft centre. Every accent is under
 * 30% and heavily spread, so it reads as one warm aura rather than three
 * separate colours. Teal still carries the strongest layer.
 */
.aqns-root.is-ask .aqns-bar:focus-within{
	border-bottom-color:rgba(var(--aqns-rib-teal),.6);
	box-shadow:
		0 12px 30px -16px rgba(var(--aqns-rib-teal),.60),
		-18px 10px 30px -20px rgba(var(--aqns-rib-coral),.42),
		18px 12px 32px -20px rgba(var(--aqns-rib-pink),.34),
		0 6px 22px -14px rgba(var(--aqns-rib-cream),.42),
		0 1px 0 0 rgba(var(--aqns-rib-teal),.18);
}

/*
 * 16px is a hard floor, not a preference. Below it iOS Safari zooms on focus.
 */
.aqns-input{
	flex:1 1 auto;
	min-width:0;
	height:44px;
	padding:0;
	border:0;
	outline:0;
	background:transparent;
	color:var(--aqns-ink);
	font-family:inherit;
	font-size:16px;
	line-height:44px;
	-webkit-appearance:none;
	appearance:none;
}
.aqns-input::placeholder{color:var(--aqns-ink-3);opacity:1}
.aqns-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.aqns-close{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	padding:0;
	border:0;
	border-radius:8px;
	background:transparent;
	color:var(--aqns-ink-2);
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}
.aqns-close:hover{background:var(--aqns-surface-2);color:var(--aqns-ink)}

/* ── Mode toggle ──────────────────────────────────────────────────────── */
/*
 * Search is the default and stays visually primary. Ask is present, obvious
 * and deliberately secondary: one quiet dot, no gradient, no sparkle, no
 * chatbot signalling.
 */
.aqns-modes{
	display:flex;
	gap:4px;
	flex:0 0 auto;
	padding:10px 12px 0;
}
.aqns-modes[hidden]{display:none}

.aqns-mode{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:6px;
	height:34px;
	padding:0 14px;
	border:1px solid transparent;
	border-radius:999px;
	background:transparent;
	color:var(--aqns-ink-2);
	font-family:inherit;
	font-size:13.5px;
	font-weight:600;
	cursor:pointer;
	-webkit-appearance:none;
	appearance:none;
}
/* Transparent 44px target that overflows the 34px pill and costs no layout. */
.aqns-mode::before{
	content:"";
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	height:44px;
	transform:translateY(-50%);
}
.aqns-mode{transition:background .28s ease, border-color .28s ease, color .28s ease, box-shadow .38s ease}
.aqns-mode:hover{color:var(--aqns-ink)}

/* Search selected: flat, quiet, no glow. It is the default and should look it. */
.aqns-mode.is-on{
	background:rgba(21,128,125,.10);
	border-color:rgba(21,128,125,.30);
	color:var(--aqns-teal-ink);
}

/*
 * THE ASK PILL. The one place the ribbon is allowed to be legible.
 *
 * Three things stacked, in order of what the eye reads first:
 *   1. a soft outer aura, teal-led with coral and pink bleeding off each side
 *   2. a barely-there warm gradient fill, so the pill is lit rather than flat
 *   3. an inset top highlight, the edge light that sells it as a real surface
 *
 * Static, not animated. A drifting gradient here is exactly the Gemini
 * shimmer this is meant not to be, and a control that keeps moving while you
 * read the results beside it is a distraction, not a flourish.
 */
.aqns-mode[data-aqns-mode="ask"]:hover:not(.is-on){
	border-color:rgba(var(--aqns-rib-teal),.28);
	box-shadow:
		0 6px 16px -10px rgba(var(--aqns-rib-teal),.40),
		-8px 4px 16px -12px rgba(var(--aqns-rib-coral),.28);
}

.aqns-mode[data-aqns-mode="ask"].is-on{
	color:var(--aqns-teal-ink);
	border-color:rgba(var(--aqns-rib-teal),.42);
	background:
		linear-gradient(103deg,
			rgba(var(--aqns-rib-teal),.14)  0%,
			rgba(var(--aqns-rib-cream),.20) 42%,
			rgba(var(--aqns-rib-coral),.16) 64%,
			rgba(var(--aqns-rib-pink),.15)  82%,
			rgba(var(--aqns-rib-teal),.16) 100%),
		var(--aqns-surface);
	box-shadow:
		0 8px 20px -10px rgba(var(--aqns-rib-teal),.55),
		-12px 6px 20px -12px rgba(var(--aqns-rib-coral),.40),
		12px 8px 22px -14px rgba(var(--aqns-rib-pink),.34),
		0 3px 14px -8px rgba(var(--aqns-rib-cream),.45),
		inset 0 1px 0 0 rgba(255,255,255,.75);
}

/*
 * The Ask pill wears the header's mark, at 13px.
 *
 * The mark is filled with a gradient now, not currentColor, so the old
 * `color` rules that greyed it when inactive no longer reach it. Opacity
 * carries the state instead: muted at rest, full when Ask is on. Same signal,
 * one property, and it keeps the ribbon colours the artwork is built around.
 */
.aqns-mode .aqns-trigger-stars{
	display:block;
	width:13px;
	height:13px;
	flex:0 0 auto;
	opacity:.5;
	transition:opacity .28s ease;
}
.aqns-mode[data-aqns-mode="ask"]:hover .aqns-trigger-stars{opacity:.8}
.aqns-mode[data-aqns-mode="ask"].is-on .aqns-trigger-stars{opacity:1}

/* .aqns-mode-dot is gone: the sparkle replaced it, and it said less. */

/* ── Status line ──────────────────────────────────────────────────────── */
.aqns-status{
	flex:0 0 auto;
	margin:0;
	padding:8px 14px 0;
	min-height:0;
	font-size:12.5px;
	color:var(--aqns-ink-3);
}
.aqns-status:empty{display:none}
.aqns-status.is-error{color:#9d2b2b}

/* ── Results ──────────────────────────────────────────────────────────── */
/*
 * -webkit-overflow-scrolling and overscroll-behavior together stop a scroll
 * gesture at the end of the list from chaining to the page behind the overlay,
 * which on iOS is what makes a modal feel broken.
 */
.aqns-results{
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
	padding:8px 0 max(16px,env(safe-area-inset-bottom));
}
.aqns-results:focus{outline:0}

.aqns-group{padding:6px 0 2px}
.aqns-group-head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:12px;
	padding:10px 14px 6px;
}
.aqns-group-title{
	margin:0;
	font-size:11px;
	font-weight:700;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:var(--aqns-ink-3);
}
.aqns-group-all{
	flex:0 0 auto;
	font-size:12.5px;
	font-weight:600;
	color:var(--aqns-teal-ink);
	text-decoration:none;
	padding:4px 2px;
}
.aqns-group-all:hover{text-decoration:underline}

/* ── Result row ───────────────────────────────────────────────────────── */
.aqns-hit{
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:11px 14px;
	color:inherit;
	text-decoration:none;
	border:0;
	/* Comfortably past 44px with two lines of text, and never under it. */
	min-height:44px;
}
/*
 * Result rows stay quiet. A list of thirty results is not the place for an
 * aura on every hover, so this is a plain wash plus a 2px teal leading edge
 * drawn with an inset shadow (no layout shift, no border to reserve space
 * for). In Ask mode the same edge warms very slightly.
 */
.aqns-hit{transition:background .18s ease, box-shadow .18s ease}
.aqns-hit:hover,.aqns-hit:focus-visible{
	background:var(--aqns-surface-2);
	box-shadow:inset 2px 0 0 0 rgba(var(--aqns-rib-teal),.55);
}
.aqns-root.is-ask .aqns-hit:hover,
.aqns-root.is-ask .aqns-hit:focus-visible{
	box-shadow:inset 2px 0 0 0 rgba(var(--aqns-rib-teal),.6),-10px 0 18px -16px rgba(var(--aqns-rib-coral),.5);
}
.aqns-hit:focus-visible{outline:2px solid var(--aqns-teal);outline-offset:-2px}

/* Section "View all" picks up the ribbon teal on hover, nothing more. */
.aqns-group-all{transition:color .2s ease}
.aqns-browse a{transition:border-color .25s ease, color .25s ease, box-shadow .3s ease}
.aqns-browse a:hover{box-shadow:0 6px 16px -12px rgba(var(--aqns-rib-teal),.6)}

/*
 * The image slot only exists when there is an image. No placeholder box, no
 * grey square: a result with no logo simply starts at the text.
 */
.aqns-hit-img{
	flex:0 0 auto;
	width:42px;
	height:42px;
	border-radius:7px;
	object-fit:contain;
	background:var(--aqns-surface-2);
	border:1px solid var(--aqns-line);
}

.aqns-hit-body{flex:1 1 auto;min-width:0}

.aqns-hit-title{
	margin:0;
	font-size:14.5px;
	font-weight:600;
	line-height:1.32;
	color:var(--aqns-ink);
	/* Long company and course names wrap rather than pushing the row wide,
	   which is what keeps 390px free of horizontal overflow. */
	overflow-wrap:anywhere;
}
.aqns-hit-excerpt{
	margin:2px 0 0;
	font-size:13px;
	line-height:1.42;
	color:var(--aqns-ink-2);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	overflow-wrap:anywhere;
}
.aqns-hit-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:6px;
	margin-top:5px;
	font-size:11.5px;
	color:var(--aqns-ink-3);
}
.aqns-hit-meta span{display:inline-flex;align-items:center;overflow-wrap:anywhere}
.aqns-hit-meta .aqns-sep{opacity:.5}

.aqns-tag{
	display:inline-block;
	padding:2px 7px;
	border-radius:4px;
	background:var(--aqns-surface-2);
	border:1px solid var(--aqns-line);
	font-size:10.5px;
	font-weight:600;
	letter-spacing:.02em;
	color:var(--aqns-ink-2);
}
.aqns-tag--brand{
	background:rgba(21,128,125,.10);
	border-color:rgba(21,128,125,.26);
	color:var(--aqns-teal-ink);
}

/* ── Ask answer ───────────────────────────────────────────────────────── */
/*
 * A document, not a chat bubble. No avatar, no speech tail, no typing
 * animation. It reads as the answer panel of a search tool, which is what it is.
 */
.aqns-answer{
	position:relative;
	margin:8px 14px 4px;
	padding:14px 16px;
	border:1px solid rgba(var(--aqns-rib-teal),.26);
	border-radius:10px;
	/* The warm wash runs left to right across the card, teal at both ends, so
	   the panel is tinted by the ribbon without ever showing a colour band. */
	background:
		linear-gradient(104deg,
			rgba(var(--aqns-rib-teal),.075) 0%,
			rgba(var(--aqns-rib-cream),.085) 46%,
			rgba(var(--aqns-rib-coral),.06) 68%,
			rgba(var(--aqns-rib-pink),.055) 84%,
			rgba(var(--aqns-rib-teal),.07) 100%),
		var(--aqns-surface);
	box-shadow:
		0 10px 26px -18px rgba(var(--aqns-rib-teal),.50),
		-10px 8px 24px -20px rgba(var(--aqns-rib-coral),.34),
		inset 0 1px 0 0 rgba(255,255,255,.7);
}
/*
 * The edge light. Replaces the old 3px flat teal border-left with a gradient
 * rule that runs teal into coral down the card's leading edge, picking up the
 * ribbon's own vertical colour order. 2px, so it is an accent and not a
 * stripe.
 */
.aqns-answer::before{
	content:"";
	position:absolute;
	left:0;
	top:10px;
	bottom:10px;
	width:2px;
	border-radius:2px;
	background:linear-gradient(180deg,
		rgb(var(--aqns-rib-teal)) 0%,
		rgba(var(--aqns-rib-cream),.95) 55%,
		rgba(var(--aqns-rib-coral),.9) 100%);
}
.aqns-answer-label{
	margin:0 0 6px;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--aqns-teal-ink);
}
.aqns-answer-body{margin:0;font-size:14px;line-height:1.55;color:var(--aqns-ink)}
.aqns-answer-body p{margin:0 0 9px}
.aqns-answer-body p:last-child{margin-bottom:0}

.aqns-cta{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:11px;
	min-height:44px;
	padding:0 15px;
	border-radius:8px;
	background:var(--aqns-teal);
	color:#fff;
	font-size:13.5px;
	font-weight:600;
	text-decoration:none;
	box-shadow:0 6px 16px -10px rgba(var(--aqns-rib-teal),.65);
	transition:background .25s ease, box-shadow .3s ease;
}
/* Solid teal, lifted. The AI IQ handoff is a considered click, so it gets
   depth rather than the ribbon: the coloured aura belongs to Ask itself. */
.aqns-cta:hover{
	background:var(--aqns-teal-ink);
	color:#fff;
	box-shadow:0 10px 22px -10px rgba(var(--aqns-rib-teal),.75),0 2px 6px -3px rgba(10,25,25,.25);
}
.aqns-cta:focus-visible{outline:2px solid var(--aqns-teal);outline-offset:2px}

/* ── Empty and no-result states ───────────────────────────────────────── */
.aqns-empty{padding:26px 16px 30px;text-align:center}
.aqns-empty-title{margin:0 0 5px;font-size:15px;font-weight:600;color:var(--aqns-ink)}
.aqns-empty-hint{margin:0 0 16px;font-size:13.5px;color:var(--aqns-ink-2)}

.aqns-browse{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 6px}
.aqns-browse a{
	display:inline-flex;
	align-items:center;
	min-height:44px;
	padding:0 14px;
	border:1px solid var(--aqns-line);
	border-radius:999px;
	font-size:13px;
	font-weight:600;
	color:var(--aqns-ink-2);
	text-decoration:none;
	background:var(--aqns-surface);
}
.aqns-browse a:hover{border-color:var(--aqns-teal);color:var(--aqns-teal-ink)}
.aqns-browse a:focus-visible{outline:2px solid var(--aqns-teal);outline-offset:2px}

/* ── Loading ──────────────────────────────────────────────────────────── */
/*
 * A quiet progress line, not a spinner and not fake typing. The status text
 * beside it is what a screen reader announces; this is only for sighted users.
 */
/*
 * Search sweeps teal. Ask sweeps the ribbon: the one moment a colour sequence
 * is legitimate, because it is transient, it is a progress indicator, and it
 * tells you which mode you are waiting on without any extra text.
 */
.aqns-loading{
	height:2px;
	margin:0;
	background:linear-gradient(90deg,transparent,var(--aqns-teal),transparent);
	background-size:40% 100%;
	background-repeat:no-repeat;
	animation:aqns-sweep 1.1s ease-in-out infinite;
}
.aqns-root.is-ask .aqns-loading{
	background:linear-gradient(90deg,
		transparent 0%,
		rgba(var(--aqns-rib-teal),.85) 22%,
		rgba(var(--aqns-rib-cream),.9) 45%,
		rgba(var(--aqns-rib-coral),.85) 62%,
		rgba(var(--aqns-rib-pink),.8) 78%,
		transparent 100%);
	background-size:55% 100%;
	background-repeat:no-repeat;
}
@keyframes aqns-sweep{
	0%{background-position:-40% 0}
	100%{background-position:140% 0}
}

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

/* ── Body lock ────────────────────────────────────────────────────────── */
/*
 * position:fixed with a restored scrollTop rather than overflow:hidden. On iOS
 * overflow:hidden on body does not actually stop the page scrolling behind a
 * modal; this does, and the inline top offset the script sets is what keeps
 * the page from jumping to the top when the overlay closes.
 */
body.aqns-locked{
	position:fixed;
	width:100%;
	overflow:hidden;
}

/* ── Dark ─────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .aqns-root,
body.is-dark .aqns-root{
	--aqns-teal:#41b5b0;
	--aqns-teal-ink:#63c9c4;
	--aqns-ink:#e7efee;
	--aqns-ink-2:#aebbba;
	--aqns-ink-3:#7e8f8e;
	--aqns-surface:#151d1e;
	--aqns-surface-2:#1e2829;
	--aqns-line:#2a3435;
	--aqns-scrim:rgba(0,0,0,.62);
}
:root[data-theme="dark"] .aqns-cta,
body.is-dark .aqns-cta{color:#0d1314}
:root[data-theme="dark"] .aqns-cta:hover,
body.is-dark .aqns-cta:hover{color:#0d1314}
:root[data-theme="dark"] .aqns-status.is-error,
body.is-dark .aqns-status.is-error{color:#e08585}

/*
 * Dark surfaces need MORE glow, not less: a coloured shadow on a dark ground
 * has almost nowhere to fall off to, so the same opacities that read as a soft
 * aura on white read as nothing at all. The Ask pill also swaps its white
 * inset highlight for a faint teal one, because a white edge light on a dark
 * surface looks like a rendering artefact.
 */
:root[data-theme="dark"] .aqns-mode[data-aqns-mode="ask"].is-on,
body.is-dark .aqns-mode[data-aqns-mode="ask"].is-on{
	border-color:rgba(var(--aqns-rib-teal),.5);
	background:
		linear-gradient(103deg,
			rgba(var(--aqns-rib-teal),.22)  0%,
			rgba(var(--aqns-rib-cream),.14) 42%,
			rgba(var(--aqns-rib-coral),.15) 64%,
			rgba(var(--aqns-rib-pink),.14)  82%,
			rgba(var(--aqns-rib-teal),.20) 100%),
		var(--aqns-surface-2);
	box-shadow:
		0 8px 24px -10px rgba(var(--aqns-rib-teal),.60),
		-12px 6px 22px -12px rgba(var(--aqns-rib-coral),.42),
		12px 8px 24px -14px rgba(var(--aqns-rib-pink),.36),
		inset 0 1px 0 0 rgba(var(--aqns-rib-teal),.35);
}
:root[data-theme="dark"] .aqns-answer,
body.is-dark .aqns-answer{
	border-color:rgba(var(--aqns-rib-teal),.32);
	background:
		linear-gradient(104deg,
			rgba(var(--aqns-rib-teal),.11) 0%,
			rgba(var(--aqns-rib-cream),.07) 46%,
			rgba(var(--aqns-rib-coral),.08) 68%,
			rgba(var(--aqns-rib-pink),.07) 84%,
			rgba(var(--aqns-rib-teal),.10) 100%),
		var(--aqns-surface-2);
	box-shadow:
		0 12px 30px -20px rgba(var(--aqns-rib-teal),.55),
		inset 0 1px 0 0 rgba(var(--aqns-rib-teal),.20);
}
:root[data-theme="dark"] .aqns-panel,
body.is-dark .aqns-panel{
	box-shadow:
		0 24px 70px -20px rgba(0,0,0,.7),
		0 18px 60px -28px rgba(var(--aqns-rib-teal),.28);
}
:root[data-theme="dark"] .aqns-root.is-ask .aqns-panel,
body.is-dark .aqns-root.is-ask .aqns-panel{
	box-shadow:
		0 24px 70px -20px rgba(0,0,0,.7),
		0 18px 60px -24px rgba(var(--aqns-rib-teal),.40),
		-16px 12px 54px -28px rgba(var(--aqns-rib-coral),.28);
}

@media (prefers-reduced-motion:reduce){
	.aqns-loading{animation:none;background:var(--aqns-teal);opacity:.5}
	.aqns-root.is-ask .aqns-loading{background:rgb(var(--aqns-rib-teal));opacity:.5}
	/*
	 * The glow itself stays. It is a static state, not motion, and removing it
	 * would strip the only cue that Ask is active. Only the transitions go, so
	 * states change instantly instead of easing.
	 */
	.aqns-trigger,.aqns-bar,.aqns-mode,.aqns-panel,
	.aqns-cta,.aqns-hit,.aqns-browse a{transition:none}
}

/*
 * Windows High Contrast and forced-colours modes discard box-shadow entirely,
 * so the mode toggle would lose its only active-state cue. Give it a real
 * border there, which forced-colours does honour.
 */
@media (forced-colors:active){
	.aqns-mode.is-on{border:2px solid; border-color:Highlight}
	.aqns-bar:focus-within{border-bottom:2px solid Highlight}
	.aqns-answer{border:1px solid}
}