/* === ag-chrome.css ==================================================
 * The site chrome (partials/nav: header, phone drawer, language menu;
 * partials/footer) on OSDS, over pages whose content is still the
 * legacy Bootstrap 3 + styles.css page. The ArbMate hybrid (its
 * arbmate-chrome.css, itself from oddstorm.com's shell.css).
 *
 * Load order (partials/chrome-head): bootstrap, styles.css, page CSS,
 * /_design/css/design.css, ag-brand.css (tokens), this file.
 *
 * Two jobs:
 *   1. The chrome: OSDS classes plus what the hybrid needs.
 *   2. The content stays the page it was: what design.css adds to a
 *      legacy page beside Bootstrap is taken back here, so the before/
 *      after of every page with the chrome removed stays 0 px.
 * ================================================================== */

/* ---- 2. Legacy content: OSDS must not reach it --------------------
 * design.css sets color-scheme: dark on :root with the dark tokens; the
 * content is a light page whose native controls and scrollbars must stay
 * light. The chrome takes dark back on its own roots. */
:root { color-scheme: light; }

/* Layered OSDS rules (reset, base, .btn*) are reverted from a layer of
 * our own, declared after design.css's: every unlayered legacy rule still
 * beats it, the OSDS layers do not. `revert` = what the browser had before
 * design.css was linked. */
@layer ag-legacy {
	:where(body:not(.os-modern)) {
		-webkit-font-smoothing: revert;
		-moz-osx-font-smoothing: revert;
	}
	/* Bootstrap's .btn wins what it declares; OSDS adds a hover layer
	   (::before), a press scale and a gradient image under .btn-primary. */
	:where(body:not(.os-modern)) :is(.btn, .btn-primary, .btn-danger, .btn-lg),
	:where(body:not(.os-modern)) :is(.btn, .btn-primary, .btn-danger, .btn-lg)::before {
		all: revert;
	}
	:where(body:not(.os-modern)) input:is([type="checkbox"], [type="radio"]) {
		accent-color: revert;
		cursor: revert;
	}
	:where(body:not(.os-modern)) :focus-visible:not(:where(.hdr, .drawer, .site-footer, .os-select-menu, .user-menu-popover, dialog.cmdk) *) {
		outline: revert;
		box-shadow: revert;
	}
}

/* Unlayered OSDS rules need a selector that outranks them. */
/* .card: Bootstrap 3 has none, so the profile page's "card card-body"
   boxes would get the OSDS dark surface, border and hover lift. */
body:not(.os-modern) .card,
body:not(.os-modern) .card:hover {
	background: revert;
	border: revert;
	border-radius: revert;
	padding: revert;
	box-shadow: revert;
	transform: revert;
	transition: revert;
}
/* OSDS pads the body for the internal catalog's phone bottom bar. */
@media (max-width: 1000px) {
	body:not(.os-modern) { padding-bottom: 0; }
}
/* The 44 px touch floor (OSDS sets it on touch AND on any screen up to 700 px)
   is for OSDS buttons; a Bootstrap .btn keeps its size. */
@media (pointer: coarse), (max-width: 700px) {
	body:not(.os-modern) .btn { min-height: auto; }
}

/* ---- 1. Chrome roots ------------------------------------------------
 * Theme, smoothing and a Nunito 14px baseline on every chrome island, so
 * nothing inherits from the Bootstrap body (Helvetica, #333). */
.hdr, .drawer, .site-footer, #top-nav, .os-select-menu, .user-menu-popover, .skip-link, dialog.cmdk {
	color-scheme: dark;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.hdr, .drawer, .site-footer, .os-select-menu, .user-menu-popover, .skip-link, dialog.cmdk {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
}
.hdr *, .drawer *, .site-footer *, .os-select-menu *, .user-menu-popover * {
	font-family: inherit;
}

/* ---- Header --------------------------------------------------------- */
/* The OSDS bar is translucent over a themed body; over a white legacy
   page that reads as grey haze. Solid on legacy pages. */
body:not(.os-modern) .hdr {
	background: var(--surface-container-low);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
/* An anchor target clears the sticky bar. */
html { scroll-padding-top: var(--header-h); }

/* The site's own logo (raster, light on dark): the header row's height. */
.hdr-brand .ag-logo {
	display: block;
	width: auto;
	height: 36px;
}
/* Keep .hdr-nav to its content inside the space-between row. */
.hdr-nav { flex: 0 0 auto; }

/* ---- Responsive (OSDS breakpoints, 21-responsive-mobile) -------------
   >1000 desktop: full nav + user menu
   701-1000 tablet: the drawer carries the nav and the account
   <=700 phone: brand + Subscribe + menu button only (16-lessons L38)  */
@media (max-width: 1000px) {
	.hdr-nav { display: none; }
	.hdr-menu-btn { display: inline-flex; }
	.hdr-actions .user-menu { display: none; }
}
@media (max-width: 700px) {
	.hdr-actions #search-toggle,
	.hdr-actions .locale-switcher-wrap,
	.hdr-actions .hdr-auth-link { display: none; }
	.hdr-cta-primary { padding: 8px 14px; font-size: 13px; min-width: 0; }
}
@media (max-width: 380px) {
	.hdr-inner { gap: 8px; padding: 0 12px; }
	.hdr-cta-primary { padding: 8px 10px; }
}

/* ---- Primary CTA (Sign up) -------------------------------------------
   Its own class, not .btn: Bootstrap's .btn stays untouched. */
.hdr-cta-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 84px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--shape-pill, 9999px);
	background: var(--brand-gradient);
	color: var(--on-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--elev-1);
	transition: box-shadow var(--t-fast, 120ms ease), transform var(--t-fast, 120ms ease);
}
.hdr-cta-primary:hover,
.hdr-cta-primary:focus {
	color: var(--on-primary);
	text-decoration: none;
	box-shadow: var(--elev-2);
	transform: translateY(-1px);
}

/* ---- Nav group: About -------------------------------------------------
   Hover or keyboard focus opens the menu; a tap opens it on touch
   (ag-chrome.js), a click on a mouse device follows the link. */
.hdr-nav-group {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.hdr-nav-menu.os-select-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 180px;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(-4px) scaleY(0.96);
	transition: opacity var(--t-fast),
	            visibility var(--t-fast),
	            transform var(--dur-medium, 240ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
	z-index: 50;
}
.hdr-nav-group:hover .hdr-nav-menu.os-select-menu,
.hdr-nav-group:focus-within .hdr-nav-menu.os-select-menu,
.hdr-nav-group.is-open .hdr-nav-menu.os-select-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0) scaleY(1);
}
.hdr-nav-menu .os-select-option { padding: 0; }
.hdr-nav-menu .os-select-option a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--shape-xs);
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.hdr-nav-menu .os-select-option a:hover,
.hdr-nav-menu .os-select-option a:focus {
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: var(--text);
}
.hdr-nav-menu .os-select-option a.is-active,
.hdr-nav-menu .os-select-option a.is-active:hover {
	background: color-mix(in srgb, var(--primary) 12%, transparent);
	color: var(--primary-soft);
	font-weight: 700;
}

/* ---- Language menu ---------------------------------------------------
   locale-switcher-open.js opens it with showPopover(): animate the
   discrete display change like the nav menus. */
.os-select-menu.locale-menu {
	transition: transform var(--dur-medium, 240ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
	            opacity var(--dur-short, 160ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)),
	            overlay var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) allow-discrete,
	            display var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) allow-discrete;
}
@starting-style {
	.os-select-menu.locale-menu:popover-open {
		opacity: 0;
		transform: scaleY(0.94) translateY(-4px);
	}
}
.locale-list { list-style: none; margin: 0; padding: 0; }
.pill.locale-switcher {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: none;
	border-radius: var(--shape-pill);
	background: transparent;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: color var(--t-fast), background-color var(--t-fast);
}
.pill.locale-switcher:hover {
	color: var(--text);
	background: color-mix(in srgb, currentColor 8%, transparent);
}
.pill.locale-switcher svg { width: 18px; height: 18px; }
.pill.locale-switcher .os-select-chevron { width: 14px; height: 14px; opacity: 0.7; }

/* ---- User menu and the search box: popovers off the header -----------
   ag-chrome.js moves them to <body>, positions them under their
   trigger and keeps data-open for browsers without the popover API. */
.hdr-actions .pill.user-switcher {
	max-width: 220px;
	padding: 6px 10px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
}
.hdr-actions .pill.user-switcher:hover {
	color: var(--text);
	background: color-mix(in srgb, currentColor 8%, transparent);
}
.hdr-actions .pill.user-switcher .ic { width: 16px; height: 16px; }
.hdr-actions .pill.user-switcher .os-select-chevron { width: 14px; height: 14px; opacity: 0.7; }
.user-switcher-label {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.user-menu { position: relative; }
.user-menu-popover {
	position: fixed;
	inset: auto;
	min-width: 200px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--surface-container-high);
	border: 1px solid var(--border-strong);
	border-radius: var(--shape-md);
	box-shadow: var(--elev-3);
	z-index: 9999;
	transform-origin: top right;
	transform: scaleY(0.96);
	opacity: 0;
	transition: opacity var(--dur-short, 160ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)),
	            transform var(--dur-medium, 240ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
	            overlay var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) allow-discrete,
	            display var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) allow-discrete;
}
.user-menu-popover:popover-open,
.user-menu-popover[data-open="true"] {
	opacity: 1;
	transform: scaleY(1);
}
/* An author display rule on a [popover] must be gated on :popover-open
   (16-lessons, the locale-menu click trap). */
.user-menu-popover:not(:popover-open):not([data-open="true"]) { display: none; }
.user-menu-popover::backdrop { background: transparent; }
@starting-style {
	.user-menu-popover:popover-open {
		opacity: 0;
		transform: scaleY(0.96);
	}
}
.user-menu-popover .os-select-option { padding: 0; }
.user-menu-popover .os-select-option a,
.user-menu-popover .os-select-option button {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--shape-xs);
	background: transparent;
	color: var(--text);
	font-size: 14px;
	line-height: 1.5;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}
.user-menu-popover .os-select-option a:hover,
.user-menu-popover .os-select-option a:focus,
.user-menu-popover .os-select-option button:hover,
.user-menu-popover .os-select-option button:focus-visible {
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: var(--text);
}

/* ---- Drawer ----------------------------------------------------------- */
/* The page under the open drawer does not scroll; the JS keeps its place
   in body.style.top and gives it back on close (03-components, dialog
   body scroll lock). */
body.ag-scroll-locked {
	position: fixed;
	width: 100%;
}
/* Bootstrap's border-box everywhere, our drawer included: the same box
   model with or without it. */
.drawer, .drawer * { box-sizing: border-box; }
/* Only the middle scrolls; the head and the language row stay pinned. */
.drawer .drawer-inner { overflow: hidden; }
.drawer-head { flex: 0 0 auto; }
.drawer-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 -16px;
	padding: 0 16px;
}
.drawer-prefs { flex: 0 0 auto; }
.drawer-prefs > .drawer-section { margin-top: 8px; }
.drawer-section.drawer-section-first {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}
/* Collapsible sections: grid 0fr -> 1fr animates the height. */
.drawer-collapsible { padding-top: 16px; }
.drawer-collapsible-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0 12px 8px;
	border: none;
	background: transparent;
	color: inherit;
	text-align: start;
	cursor: pointer;
}
.drawer-collapsible-trigger:hover .drawer-section-title-inline { color: var(--text); }
.drawer-section-title-inline {
	color: var(--text-dim);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: color var(--t-fast);
}
.drawer-section-title-inline .os-notification-badge { letter-spacing: 0; }
.drawer-chev {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--text-dim);
	transition: transform var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1));
}
.drawer-collapsible[data-open="true"] > .drawer-collapsible-trigger .drawer-chev { transform: rotate(180deg); }
.drawer-collapsible-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 280ms var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1));
}
.drawer-collapsible[data-open="true"] > .drawer-collapsible-content { grid-template-rows: 1fr; }
.drawer-collapsible-inner {
	min-height: 0;
	overflow: hidden;
}
.drawer-collapsible-inner > .drawer-nav { padding-top: 4px; }
/* Log out is a form button styled as a drawer link. */
button.drawer-nav-link {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: start;
	cursor: pointer;
}
.drawer-sublist { list-style: none; margin: 0; padding: 0; }

/* ---- Bootstrap's <a> styling, taken back inside the chrome -------------
   Bootstrap dresses every a:hover / a:focus (underline, #23527c, a 5 px
   focus outline). In the chrome the OSDS rule of the element decides and
   keyboard focus is the OSDS ring (base layer :focus-visible). */
:is(.hdr, .drawer, .site-footer, .os-select-menu, .user-menu-popover, dialog.cmdk) :is(a, button):focus,
.skip-link:focus {
	outline: none;
}
:is(.hdr, .drawer, .site-footer, .os-select-menu, .user-menu-popover, dialog.cmdk) a:is(:hover, :focus),
.skip-link:is(:hover, :focus) {
	text-decoration: none;
}
/* Single-class OSDS links lose their colour to Bootstrap's a:focus (0,1,1):
   restate the colour their own :hover gives them. */
.hdr-brand:is(:hover, :focus),
.site-footer-logo:is(:hover, :focus) { color: var(--text); }
.hdr-nav-link:focus,
.hdr-icon-btn:focus,
.drawer-nav-link:focus { color: var(--text); }

/* ---- Cmd+K palette (ag-cmdk.js) --------------------------------------
   Bootstrap's kbd adds an inset shadow, which the OSDS kbd does not set. */
dialog.cmdk kbd { box-shadow: none; }

/* ---- Footer ----------------------------------------------------------- */
/* The legacy content ends with its own bottom padding: no 96 px gap. */
body:not(.os-modern) .site-footer { margin-top: 0; }
.ag-footer-x {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	color: var(--text-muted);
	font-size: 14px;
	text-decoration: none;
	transition: color var(--t-fast);
}
.ag-footer-x:is(:hover, :focus) { color: var(--text); }
.ag-footer-x svg { width: 16px; height: 16px; }


/* ---- The four start-here articles: a slim second row under the bar ------
   (the old header's sub-nav; desktop only, the drawer carries them on a phone). */
.ag-subnav {
	/* Above the content: legacy heroes (#parallax) pull up 93 px under where the old see-through bar was. */
	position: relative;
	z-index: 1;
	background: var(--surface-container-low);
	border-bottom: 1px solid var(--border);
	color-scheme: dark;
	font-family: var(--font-body);
}
.ag-subnav-inner {
	display: flex;
	justify-content: center;
	gap: 28px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 6px 24px;
	list-style: none;
}
.ag-subnav a {
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: color var(--t-fast);
}
.ag-subnav a:is(:hover, :focus) { color: var(--text); text-decoration: none; }
.ag-subnav a.is-active { color: var(--primary-soft); }
@media (max-width: 1000px) { .ag-subnav { display: none; } }

/* The header is sticky; the old one sat over the page's hero (#navbar rgba black). */
.hdr { position: sticky; top: 0; z-index: 1000; }

/* ---- Footer columns: the site's own texts (about, partners, courses, the recommended service) ---- */
.site-footer p {
	margin: 0 0 10px;
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.6;
}
/* A link inside running text is told apart by more than its colour (WCAG 1.4.1): underlined. */
.site-footer p a,
.ag-footer-partners a { color: var(--primary-soft); text-decoration: underline; text-underline-offset: 2px; }
.site-footer p a:is(:hover, :focus),
.ag-footer-partners a:is(:hover, :focus) { color: var(--text); text-decoration: underline; }
.site-footer .ag-logo { height: 36px; width: auto; }
.ag-footer-sites {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}
.ag-footer-sites a {
	color: var(--text-muted);
	font-size: 13px;
	text-decoration: none;
	transition: color var(--t-fast);
}
.ag-footer-sites a:is(:hover, :focus) { color: var(--text); }

/* ---- The sign-in dialog (partials/login-modal) ---------------------------- */
dialog.ag-login {
	width: min(400px, calc(100vw - 32px));
	margin: auto;
	padding: 0;
	border: 1px solid var(--border-strong);
	border-radius: var(--shape-lg, 20px);
	background: var(--surface-container-high);
	color: var(--text);
	color-scheme: dark;
	box-shadow: var(--elev-3);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
dialog.ag-login * { font-family: inherit; box-sizing: border-box; }
dialog.ag-login::backdrop { background: rgba(0, 0, 0, 0.6); }
.ag-login-form { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 20px 24px 24px; }
.ag-login-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ag-login-title { font-size: 20px; font-weight: 800; }
.ag-login-label { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.ag-login .input { width: 100%; }
.ag-login-submit { width: 100%; margin-top: 14px; }
.ag-login-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ag-login-links a { color: var(--primary-soft); font-size: 13px; text-decoration: none; }
.ag-login-links a:is(:hover, :focus) { color: var(--text); text-decoration: none; }
.ag-login :is(a, button):focus { outline: none; }

/* The content of every page sits in <main> (the header opens it, the footer closes it): no box of its own. */
main#main:focus { outline: none; }