/**
 * Amelia-TutorLMS Bridge - mobile bar design layer
 * ================================================
 *
 * Restyles the bottom bar for phones and tablets. It covers all three bars
 * the plugin can put on screen - Tutor's dashboard bar (replaced through the
 * template override), the [atb_nav_bar] shortcode bar, and the logged-out
 * guest bar - because all three share Tutor's own class names.
 *
 * HOW IT IS SWITCHED
 * The chosen style is a class on the bar element itself (atb-bar plus
 * atb-bar-dome / -pill / -spotlight / -underline, and the optional -press,
 * -nolabels and -popover).
 *
 * It used to live on <body> instead, which was a mistake: the Workademy theme
 * prints a bare <body> with no class attribute on several templates, including
 * the login and registration pages, so none of this applied there. All three
 * bars are rendered by this plugin, so the class can simply go on the bar.
 *
 * SPECIFICITY
 * The shortcode bar prints its own <style> block inside the body, which loads
 * after this file. Every rule here is therefore prefixed with the body class,
 * which outranks it. Where the inline block uses !important, so does this.
 *
 * COLOURS
 * Everything adjustable is a custom property, written once by PHP from the
 * settings page. Nothing here hardcodes a brand colour.
 *
 * RTL
 * All insets are logical, so the Arabic layout mirrors with no extra rules.
 */

:root {
	--atb-bar-violet: #19194d;
	--atb-bar-lime: #dae83d;
	--atb-bar-surface: #ffffff;
	--atb-bar-muted: #8a8fa8;
	--atb-bar-radius: 18px;
	--atb-bar-dome: 46px;
	/* Dome size divided by the 30px icon box. The disc is grown with a
	   transform rather than a real width - see the dome section. */
	--atb-bar-dome-scale: 1.53;
	--atb-bar-height: 62px;
	--atb-bar-shrink: 46px;
	--atb-bar-ease: cubic-bezier( 0.2, 0.9, 0.3, 1.1 );
}

/* ================================================================== *
 * Shared skeleton - applies to every style
 * ================================================================== */

.tutor-dashboard-nav-mobile.atb-bar {
	/* The raised dome deliberately sticks out above the bar. Without this it
	   would be sliced off at the bar's top edge. */
	overflow: visible !important;
	background: var( --atb-bar-surface ) !important;
	border-top: 1px solid rgba( 25, 25, 77, 0.07 ) !important;
	box-shadow: 0 -6px 24px rgba( 25, 25, 77, 0.07 ) !important;
	padding-block-end: env( safe-area-inset-bottom, 0px ) !important;
	transition: transform 260ms var( --atb-bar-ease );
	will-change: transform;
}

.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-list {
	display: flex !important;
	align-items: stretch !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-list > li {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-list > li > a,
.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-list > li > button {
	position: relative;
	/* Without this a flex item refuses to shrink below its content width, so
	   a long label like "My Courses" spills over its neighbour instead of
	   being trimmed. */
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	width: 100% !important;
	/* A full-height target. Anything smaller than about 48px is genuinely
	   hard to hit with a thumb on a moving bus. */
	min-height: var( --atb-bar-height ) !important;
	padding: 8px 2px 10px !important;
	color: var( --atb-bar-muted ) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	background: none !important;
	border: 0 !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color 180ms ease, transform 160ms var( --atb-bar-ease );
}

.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 220ms ease, box-shadow 220ms ease, transform 260ms var( --atb-bar-ease );
}

.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-icon svg {
	width: 21px !important;
	height: 21px !important;
	transition: color 180ms ease;
}

.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-text {
	display: block;
	box-sizing: border-box;
	/* width, not max-width: in a centred column flex the span is sized to its
	   own content, so max-width alone never bites and the ellipsis never
	   appears. */
	width: 100%;
	padding-inline: 2px;
	overflow: hidden;
	font-size: 10.5px !important;
	line-height: 1.25 !important;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: opacity 200ms ease, max-height 240ms var( --atb-bar-ease ), margin 240ms var( --atb-bar-ease );
	max-height: 20px;
	opacity: 1;
}

/* Labels off */
.tutor-dashboard-nav-mobile.atb-bar-nolabels .tutor-dashboard-nav-mobile-text {
	display: none;
}

.tutor-dashboard-nav-mobile.atb-bar-nolabels .tutor-dashboard-nav-mobile-list > li > a,
.tutor-dashboard-nav-mobile.atb-bar-nolabels .tutor-dashboard-nav-mobile-list > li > button {
	gap: 0 !important;
}

/* ------------------------------------------------------------------ *
 * Press feedback
 *
 * Driven by a class the script adds on pointerdown rather than :active,
 * because :active is unreliable on iOS unless a touch handler exists, and
 * it lingers awkwardly after a tap that turned into a scroll.
 * ------------------------------------------------------------------ */

.tutor-dashboard-nav-mobile.atb-bar-press .tutor-dashboard-nav-mobile-list > li > a.is-pressed,
.tutor-dashboard-nav-mobile.atb-bar-press .tutor-dashboard-nav-mobile-list > li > button.is-pressed {
	transform: scale( 0.92 );
}

.tutor-dashboard-nav-mobile.atb-bar-press .tutor-dashboard-nav-mobile-list > li > a.is-pressed .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-press .tutor-dashboard-nav-mobile-list > li > button.is-pressed .tutor-dashboard-nav-mobile-icon {
	background: rgba( 25, 25, 77, 0.09 );
}

/* ---- Strong press ------------------------------------------------- *
 *
 * The "Strong" option on the settings page. Same mechanism, turned up:
 * the item sinks further, the icon tint is heavier, and - the part that
 * actually sells it - the press happens FAST while the release stays
 * calm. A button that compresses and rebounds at the same speed feels
 * soft; real ones snap in and ease back. The base rule above already
 * supplies the slower release, so only the press-in is shortened here.
 * ------------------------------------------------------------------ */

.tutor-dashboard-nav-mobile.atb-bar-press.atb-bar-press-strong .tutor-dashboard-nav-mobile-list > li > a.is-pressed,
.tutor-dashboard-nav-mobile.atb-bar-press.atb-bar-press-strong .tutor-dashboard-nav-mobile-list > li > button.is-pressed {
	transform: scale( 0.88 );
	transition-duration: 90ms;
}

.tutor-dashboard-nav-mobile.atb-bar-press.atb-bar-press-strong .tutor-dashboard-nav-mobile-list > li > a.is-pressed .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-press.atb-bar-press-strong .tutor-dashboard-nav-mobile-list > li > button.is-pressed .tutor-dashboard-nav-mobile-icon {
	background: rgba( 25, 25, 77, 0.16 );
	transition-duration: 90ms;
}

/* ---- Touch ripple -------------------------------------------------- *
 *
 * Spreads from wherever the finger actually landed, the way a native
 * Android control does.
 *
 * It is appended to the BAR, not to the tapped item, and it is never
 * clipped - it simply fades to nothing before it reaches any edge. That
 * is deliberate: a true Material ripple is clipped by its container with
 * overflow:hidden, but the bar sets overflow:visible on purpose so the
 * raised dome on the active item isn't sliced off at the bar's top edge.
 * Clipping the ripple properly would mean re-introducing that clip and
 * breaking the dome, so the ripple is drawn as a self-fading gradient
 * instead - same read, none of the damage.
 *
 * The script sets left/top (the touch point) and --atb-ripple-size (based
 * on the tapped item's size, so it scales with the bar's height setting).
 * ------------------------------------------------------------------ */

.tutor-dashboard-nav-mobile .atb-bar-ripple {
	position: absolute;
	z-index: 0;
	width: var( --atb-ripple-size, 56px );
	height: var( --atb-ripple-size, 56px );
	/* Pulls the circle so its centre - not its corner - sits on the touch. */
	margin-top: calc( var( --atb-ripple-size, 56px ) / -2 );
	margin-left: calc( var( --atb-ripple-size, 56px ) / -2 );
	border-radius: 50%;
	background: radial-gradient(
		circle,
		rgba( 25, 25, 77, 0.26 ) 0%,
		rgba( 25, 25, 77, 0.13 ) 45%,
		rgba( 25, 25, 77, 0 ) 70%
	);
	pointer-events: none;
	transform: scale( 0.25 );
	opacity: 1;
	animation: atb-bar-ripple 520ms var( --atb-bar-ease ) forwards;
}

@keyframes atb-bar-ripple {
	to {
		transform: scale( 1 );
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tutor-dashboard-nav-mobile .atb-bar-ripple {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Scroll states
 *
 * Two behaviours, chosen on the settings page. "Tucked" slides the whole bar
 * away. "Shrunk" keeps it on screen but compacts it - labels fade out, the
 * bar loses height, and the icons and dome scale down. Shrinking is the
 * gentler of the two: navigation never disappears from under the thumb, and
 * the movement reads as the bar making room rather than leaving.
 * ------------------------------------------------------------------ */

.tutor-dashboard-nav-mobile.atb-bar.atb-bar-tucked {
	transform: translateY( 115% );
}

.tutor-dashboard-nav-mobile.atb-bar.atb-bar-shrunk .tutor-dashboard-nav-mobile-list > li > a,
.tutor-dashboard-nav-mobile.atb-bar.atb-bar-shrunk .tutor-dashboard-nav-mobile-list > li > button {
	min-height: var( --atb-bar-shrink ) !important;
	padding-block: 6px !important;
	gap: 0 !important;
}

.tutor-dashboard-nav-mobile.atb-bar.atb-bar-shrunk .tutor-dashboard-nav-mobile-text {
	max-height: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.tutor-dashboard-nav-mobile.atb-bar.atb-bar-shrunk .tutor-dashboard-nav-mobile-icon svg {
	width: 19px !important;
	height: 19px !important;
}

/* The dome comes down with it, so it never looks stranded above a thin bar. */
.tutor-dashboard-nav-mobile.atb-bar-dome.atb-bar-shrunk .tutor-dashboard-nav-mobile-list > li > a.active .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-dome.atb-bar-shrunk .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-dome.atb-bar-shrunk .tutor-dashboard-nav-mobile-list > li > button.active .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-dome.atb-bar-shrunk .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active .tutor-dashboard-nav-mobile-icon {
	transform: translateY( calc( var( --atb-bar-dome ) * -0.30 ) ) scale( calc( var( --atb-bar-dome-scale ) * 0.8 ) );
}

/* ================================================================== *
 * Style C - Raised dome  (the active icon lifts out of the bar)
 * ================================================================== */

.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

/* The lifted disc.
   It is raised with transform rather than a negative margin. A margin would
   drag the label up with it and force the bar taller to fit; a transform
   moves only the pixels, so the bar keeps exactly the height you set and the
   disc simply floats above its top edge. */
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > a.active .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > button.active .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active .tutor-dashboard-nav-mobile-icon {
	position: relative;
	z-index: 2;
	/* The box stays 30px like every other item and the disc is grown with a
	   transform. Giving it a real width made the active item taller than its
	   neighbours, which pushed its label down out of line with them. A
	   transform paints bigger without occupying more space, so all the labels
	   stay on one baseline and the bar keeps the height set on the settings
	   page. */
	transform: translateY( calc( var( --atb-bar-dome ) * -0.44 ) ) scale( var( --atb-bar-dome-scale ) );
	background: var( --atb-bar-violet );
	border: 2.5px solid var( --atb-bar-surface );
	box-shadow: 0 5px 13px rgba( 25, 25, 77, 0.34 );
}

.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > a.active .tutor-dashboard-nav-mobile-icon svg,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active .tutor-dashboard-nav-mobile-icon svg,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > button.active .tutor-dashboard-nav-mobile-icon svg,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active .tutor-dashboard-nav-mobile-icon svg {
	/* Scaled up along with the disc, so the written size is smaller than what
	   you see: 14px painted at the default 1.53 scale reads as about 21px. */
	width: 14px !important;
	height: 14px !important;
	color: var( --atb-bar-lime ) !important;
}

.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > a.active,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > button.active,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active {
	color: var( --atb-bar-violet ) !important;
	font-weight: 700 !important;
}

/* ================================================================== *
 * Style A - Floating pill
 * ================================================================== */

.tutor-dashboard-nav-mobile.atb-bar-pill {
	inset-inline: 12px !important;
	inset-block-end: calc( 12px + env( safe-area-inset-bottom, 0px ) ) !important;
	width: auto !important;
	padding: 5px !important;
	border: 0 !important;
	border-radius: var( --atb-bar-radius ) !important;
	box-shadow: 0 12px 30px rgba( 25, 25, 77, 0.18 ) !important;
}

.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > a,
.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > button {
	min-height: 54px !important;
	padding: 7px 2px !important;
	border-radius: calc( var( --atb-bar-radius ) - 5px );
	transition: background 220ms ease, color 180ms ease, transform 160ms var( --atb-bar-ease );
}

.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > a.active,
.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active,
.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > button.active,
.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active {
	color: var( --atb-bar-surface ) !important;
	background: var( --atb-bar-violet ) !important;
	box-shadow: 0 4px 12px rgba( 25, 25, 77, 0.28 );
}

.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > a.active svg,
.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active svg,
.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > button.active svg,
.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active svg {
	color: var( --atb-bar-lime ) !important;
}

/* ================================================================== *
 * Style B - Lime spotlight
 * ================================================================== */

.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > a.active .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > button.active .tutor-dashboard-nav-mobile-icon,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active .tutor-dashboard-nav-mobile-icon {
	background: var( --atb-bar-lime );
	box-shadow: 0 5px 14px rgba( 218, 232, 61, 0.55 );
}

.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > a.active,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > button.active,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active {
	color: var( --atb-bar-violet ) !important;
	font-weight: 700 !important;
}

.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > a.active svg,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active svg,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > button.active svg,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active svg {
	color: var( --atb-bar-violet ) !important;
}

/* ================================================================== *
 * Style D - Minimal underline
 * ================================================================== */

.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > a.active,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > button.active,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active {
	color: var( --atb-bar-violet ) !important;
	font-weight: 700 !important;
}

.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > a.active svg,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active svg,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > button.active svg,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active svg {
	color: var( --atb-bar-violet ) !important;
}

.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > a.active::after,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active::after,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > button.active::after,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active::after {
	position: absolute;
	inset-block-end: 5px;
	inset-inline-start: 50%;
	width: 22px;
	height: 3px;
	content: "";
	background: var( --atb-bar-lime );
	border-radius: 999px;
	transform: translateX( -50% );
}

[dir="rtl"] .tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > a.active::after,
[dir="rtl"] .tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active::after,
[dir="rtl"] .tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > button.active::after,
[dir="rtl"] .tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active::after {
	transform: translateX( 50% );
}

/* ================================================================== *
 * Active label colour
 *
 * Tutor sets the label colour on the span itself, not on the link, so
 * colouring the link alone leaves the span with its own value. On the violet
 * pill that produced violet text on a violet background. These rules put the
 * colour where Tutor put it.
 * ================================================================== */

.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > a.active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > button.active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-pill .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active .tutor-dashboard-nav-mobile-text {
	color: var( --atb-bar-surface ) !important;
}

.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > a.active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > button.active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-dome .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > a.active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > button.active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-spotlight .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > a.active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > a.atb-nav-active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > button.active .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar-underline .tutor-dashboard-nav-mobile-list > li > button.atb-nav-active .tutor-dashboard-nav-mobile-text {
	color: var( --atb-bar-violet ) !important;
}

/* Inactive labels, for the same reason. */
.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-list > li > a .tutor-dashboard-nav-mobile-text,
.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-list > li > button .tutor-dashboard-nav-mobile-text {
	color: inherit;
}

/* The icon inherits too, so an active pill keeps its lime glyph rather than
   picking up Tutor's own colour. */
.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-list > li > a .tutor-dashboard-nav-mobile-icon svg,
.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-list > li > button .tutor-dashboard-nav-mobile-icon svg {
	color: currentColor;
}

/* ================================================================== *
 * The "More" / "Explore" popover
 * ================================================================== */

.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover {
	min-width: 220px !important;
	padding: 7px !important;
	overflow: hidden;
	background: var( --atb-bar-surface ) !important;
	border: 0 !important;
	border-radius: 18px !important;
	box-shadow: 0 18px 44px rgba( 25, 25, 77, 0.24 ) !important;
	transform-origin: bottom center;
	animation: atb-pop 260ms var( --atb-bar-ease ) both;
}

/* Tutor draws a little arrow with ::after. It does not survive the new
   radius and shadow, so it is removed rather than left half-clipped. */
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover::after {
	display: none !important;
}

.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a {
	display: flex !important;
	gap: 11px !important;
	align-items: center !important;
	padding: 11px 13px !important;
	color: var( --atb-bar-violet ) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-radius: 12px !important;
	transition: background 160ms ease, transform 160ms var( --atb-bar-ease );
}

.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a svg {
	width: 19px !important;
	height: 19px !important;
	color: var( --atb-bar-violet ) !important;
	opacity: 0.75;
}

.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a:hover,
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.is-pressed {
	background: rgba( 25, 25, 77, 0.06 ) !important;
}

.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.is-pressed {
	transform: scale( 0.97 );
}

/* The current page, marked inside the popover. */
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.active,
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.atb-nav-active {
	background: var( --atb-bar-violet ) !important;
	color: var( --atb-bar-surface ) !important;
}

/* The row's text lives in its own span, which Tutor colours directly. Setting
   the colour on the link alone left violet text on the violet row. */
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.active span,
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.atb-nav-active span {
	color: var( --atb-bar-surface ) !important;
}

.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a span {
	color: var( --atb-bar-violet ) !important;
}

/* Repeated after the generic rule above so the active row still wins. */
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.active span,
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.active .tutor-tiny,
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.atb-nav-active span,
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.atb-nav-active .tutor-tiny {
	color: var( --atb-bar-surface ) !important;
}

.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.active svg,
.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover a.atb-nav-active svg {
	color: var( --atb-bar-lime ) !important;
	opacity: 1;
}

@keyframes atb-pop {
	from { opacity: 0; transform: translateY( 10px ) scale( 0.96 ); }
	to   { opacity: 1; transform: translateY( 0 ) scale( 1 ); }
}

/* ================================================================== *
 * Reduced motion
 * ================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile,
	.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-list > li > a,
	.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-list > li > button,
	.tutor-dashboard-nav-mobile.atb-bar .tutor-dashboard-nav-mobile-icon {
		transition-duration: 1ms;
	}

	.tutor-dashboard-nav-mobile.atb-bar-popover .tutor-popover {
		animation: none;
	}
}
