/*
 * FSD design tokens — the one source for colour, radius, shadow, type and
 * spacing across the public site and the signed-in workspace.
 *
 * Loaded on every page right after app.css and design.css. New CSS uses the
 * --fsd-* names. The legacy names those files grew (--accent, --r, --r-lg,
 * --shadow-1..3) are re-pointed here, so existing components move onto the
 * scale without being rewritten one by one. DESIGN.md documents the system.
 *
 * Rules: one brand maroon; semantic colours only for state; two radii
 * (controls 8px, panels 12px) plus pill; two shadows; no decorative
 * gradients on actions.
 */
:root {
	/* Brand */
	--fsd-brand:      #831d32;
	--fsd-brand-hi:   #6a1728;
	--fsd-brand-bg:   #f7eaed;
	--fsd-on-brand:   #ffffff;

	/* Neutrals (slight warm bias, matching the existing ink) */
	--fsd-ink:        #20212a;
	--fsd-ink-soft:   #4f5361;
	--fsd-ink-faint:  #61667a;  /* 4.9:1 on the tinted panels, not just on white */
	--fsd-line:       #dfe2e8;
	--fsd-line-soft:  #eceef2;
	--fsd-ground:     #f5f6f8;
	--fsd-surface:    #ffffff;

	/* State (never used as decoration) */
	--fsd-ok:   #1f7a55;  --fsd-ok-bg:   #e6f4ee;
	--fsd-warn: #8a5a12;  --fsd-warn-bg: #fdf3dc;
	--fsd-bad:  #b42318;  --fsd-bad-bg:  #fdecea;
	--fsd-info: #2b5c9e;  --fsd-info-bg: #e8f0fb;

	/* Mastery scale (knowledge map, weak areas) */
	/* Each step reads as text on white (4.5:1+) as well as a fill. */
	--fsd-m-strong: #1f7a55; --fsd-m-good: #4a7f39; --fsd-m-dev: #8d6400;
	--fsd-m-weak:   #b4530f; --fsd-m-crit: #c0392b; --fsd-m-none: #c9ccd3;

	/* Radius */
	--fsd-r-ctl:   8px;   /* buttons, inputs, chips */
	--fsd-r-panel: 12px;  /* cards, panels, modals */
	--fsd-r-pill:  999px;

	/* Elevation: one hairline, one lifted. Borders do most of the work. */
	--fsd-sh-1: 0 1px 2px rgb(32 33 42 / 6%);
	--fsd-sh-2: 0 2px 6px rgb(32 33 42 / 8%), 0 16px 36px -14px rgb(32 33 42 / 22%);

	/* Type scale */
	--fsd-fs-12: .75rem;  --fsd-fs-13: .8125rem; --fsd-fs-14: .875rem; --fsd-fs-16: 1rem;
	--fsd-fs-18: 1.125rem; --fsd-fs-22: 1.375rem; --fsd-fs-28: 1.75rem; --fsd-fs-36: 2.25rem;

	/* Spacing, 4px base */
	--fsd-sp-1: 4px; --fsd-sp-2: 8px; --fsd-sp-3: 12px; --fsd-sp-4: 16px;
	--fsd-sp-5: 20px; --fsd-sp-6: 24px; --fsd-sp-8: 32px; --fsd-sp-10: 40px;

	/* Touch target floor */
	--fsd-target: 44px;

	/* Focus ring colour; re-pointed to white on brand-filled surfaces below. */
	--fsd-focus: var(--fsd-brand);

	/* ---- legacy names, re-pointed ---------------------------------- */
	--accent:     var(--fsd-brand);
	--accent-hi:  var(--fsd-brand-hi);
	--accent-bg:  var(--fsd-brand-bg);
	--a-50:  var(--fsd-brand-bg);
	--a-500: var(--fsd-brand);
	--a-600: var(--fsd-brand-hi);
	--flash-1: var(--fsd-brand);
	--flash-hi: var(--fsd-brand-hi);
	--r-sm: 6px;
	--r:    var(--fsd-r-ctl);
	--r-lg: var(--fsd-r-panel);
	--shadow-1: var(--fsd-sh-1);
	--shadow-2: var(--fsd-sh-1);
	--shadow-3: var(--fsd-sh-2);
	--design-shadow: var(--fsd-sh-1);
}

/* Floor for every primary action and form control on phones. */
@media (max-width: 860px) {
	.fsd-btn, .fsd-input, input[type="text"], input[type="email"], input[type="search"], input[type="tel"], select { min-height: var(--fsd-target); }
}

/* ---- signed-in navigation (Nav.php) ---------------------------------- */
.fsd-appnav__more { margin-top: var(--fsd-sp-3); }
.fsd-appnav__more > summary { cursor: pointer; list-style: none; }
.fsd-appnav__more > summary::-webkit-details-marker { display: none; }
.fsd-appnav__more > summary::after { content: "+"; margin-left: 6px; font-weight: 700; }
.fsd-appnav__more[open] > summary::after { content: "–"; }
.fsd-appnav__item--sub { padding-left: 28px; font-size: var(--fsd-fs-13); }

/* Floating glass dock: content remains visible around and beneath the controls. */
.fsd-tabbar { display: none; }
.fsd-tabbar__selection { display: none; }
@media (max-width: 860px) {
	.fsd-tabbar {
		position: fixed;
		left: max(14px, env(safe-area-inset-left, 0px));
		right: max(14px, env(safe-area-inset-right, 0px));
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 900;
		display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
		max-width: 460px; margin-inline: auto; padding: 7px;
		border: 1px solid rgb(255 255 255 / 85%); border-radius: 999px;
		background: rgb(250 249 248 / 97%);
		box-shadow: 0 10px 32px rgb(32 33 42 / 16%), 0 2px 8px rgb(32 33 42 / 6%), inset 0 1px 0 #fff;
		isolation: isolate;
	}
	.fsd-tabbar--admin { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 540px; }
	.fsd-tabbar__item {
		display: grid; justify-items: center; align-content: center; gap: 3px;
		min-height: 54px; min-width: 0; padding: 3px 1px;
		color: #20212a; text-decoration: none;
		font: 650 11px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
		border-radius: 999px; border: 1px solid transparent;
		-webkit-tap-highlight-color: transparent; touch-action: manipulation;
		transition: background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
	}
	.fsd-tabbar__item svg { width: 22px; height: 22px; }
	.fsd-tabbar__item.is-active {
		color: var(--fsd-brand); background: rgb(255 255 255 / 76%);
		border-color: rgb(255 255 255 / 90%);
		box-shadow: 0 2px 8px rgb(32 33 42 / 6%), inset 0 1px 0 #fff;
	}
	.fsd-tabbar__item:active:not(:focus-visible) { transform: scale(.96); background: rgb(131 29 50 / 8%); transition-duration: 100ms; }
	.fsd-tabbar--motion .fsd-tabbar__selection {
		display: block; position: absolute; top: 7px; left: 0;
		pointer-events: none; border-radius: 999px; box-sizing: border-box;
		background: linear-gradient(145deg, rgb(255 255 255 / 82%), rgb(255 255 255 / 42%));
		border: 1px solid rgb(255 255 255 / 90%);
		box-shadow: 0 3px 12px rgb(32 33 42 / 9%), inset 0 1px 0 #fff;
	}
	.fsd-tabbar--motion .fsd-tabbar__item { position: relative; z-index: 1; }
	.fsd-tabbar--motion .fsd-tabbar__item.is-active { background: transparent; border-color: transparent; box-shadow: none; }
	.fsd-tabbar__item:focus-visible { outline: 2px solid var(--fsd-brand); outline-offset: 2px; }
	body.fsd-has-tabbar { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
	body.fsd-has-tabbar .fb-dock { bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
	body.fsd-has-tabbar .fsd-install,
	body.fsd-has-tabbar .fsd-pushsheet { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}
@supports ((backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px))) {
	@media (max-width: 860px) {
		.fsd-tabbar {
			background: linear-gradient(135deg, rgb(255 255 255 / 94%), rgb(255 255 255 / 88%) 55%, rgb(247 245 247 / 92%));
			-webkit-backdrop-filter: blur(24px) saturate(1.7);
			backdrop-filter: blur(24px) saturate(1.7);
		}
	}
}
@media (max-width: 360px) {
	.fsd-tabbar__item { font-size: 10px; }
	.fsd-tabbar--admin { left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); }
	.fsd-tabbar--admin .fsd-tabbar__item { font-size: 10px; }
	.fsd-tabbar--admin [data-dock-tab="dashboard"] { font-size: 9px; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 860px) {
	.fsd-tabbar__item:hover { background-color: rgb(255 255 255 / 62%); color: var(--fsd-brand); }
}
@media (prefers-reduced-motion: reduce) {
	.fsd-tabbar__item { transition: none; }
	.fsd-tabbar__item:active:not(:focus-visible) { transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	.fsd-tabbar { background: #faf9f8; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #61667a; }
	.fsd-tabbar .fsd-tabbar__item.is-active { background: var(--fsd-brand-bg); border-color: var(--fsd-brand); }
	.fsd-tabbar__selection { visibility: hidden; }
}
@media (forced-colors: active) {
	.fsd-tabbar { background: Canvas; border-color: CanvasText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.fsd-tabbar__item { color: LinkText; }
	.fsd-tabbar .fsd-tabbar__item.is-active { color: HighlightText; background: Highlight; border-color: Highlight; }
	.fsd-tabbar__selection { visibility: hidden; }
}

/* ---- hub pages: /practice, /mistakes ---------------------------------- */
.fsd-hub { display: grid; gap: var(--fsd-sp-5); max-width: 1040px; padding-block: var(--fsd-sp-2) var(--fsd-sp-8); color: var(--fsd-ink); }
.fsd-hub__head h1 { margin: 0; font-size: var(--fsd-fs-28); font-weight: 800; letter-spacing: -.02em; }
.fsd-hub__head p { margin: 4px 0 0; color: var(--fsd-ink-soft); max-width: 62ch; }
.fsd-hub__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--fsd-sp-4); }
.fsd-hub__card { display: grid; gap: var(--fsd-sp-2); align-content: start; padding: var(--fsd-sp-5); background: var(--fsd-surface); border: 1px solid var(--fsd-line); border-radius: var(--fsd-r-panel); min-width: 0; }
.fsd-hub__card.is-lead { border-left: 4px solid var(--fsd-brand); }
.fsd-hub__card h2 { margin: 0; font-size: var(--fsd-fs-18); font-weight: 800; }
.fsd-hub__card p { margin: 0; color: var(--fsd-ink-soft); font-size: var(--fsd-fs-14); }
.fsd-hub__card .fsd-btn, .fsd-hub__card form { justify-self: start; margin-top: var(--fsd-sp-2); }
.fsd-hub__k { font-size: var(--fsd-fs-12) !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fsd-brand) !important; }
.fsd-hub__link { text-decoration: none; color: inherit; }
.fsd-hub__link:hover { border-color: var(--fsd-brand); }
.fsd-hub__summary { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.fsd-hub__stats { display: flex; flex-wrap: wrap; gap: var(--fsd-sp-6); }
.fsd-hub__stats p { display: grid; }
.fsd-hub__stats b { font-size: var(--fsd-fs-28); font-weight: 800; color: var(--fsd-ink); }
.fsd-hub__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fsd-sp-2); }
.fsd-hub__bars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 40px; gap: var(--fsd-sp-3); align-items: center; font-size: var(--fsd-fs-14); }
.fsd-hub__bar { height: 8px; border-radius: var(--fsd-r-pill); background: var(--fsd-line-soft); overflow: hidden; }
.fsd-hub__bar i { display: block; height: 100%; background: var(--fsd-brand); border-radius: inherit; }
@media (max-width: 620px) {
	.fsd-hub__summary { grid-template-columns: 1fr; }
	.fsd-hub__card .fsd-btn, .fsd-hub__card form, .fsd-hub__card form .fsd-btn { justify-self: stretch; width: 100%; justify-content: center; }
	.fsd-hub__bars li { grid-template-columns: 1fr 40px; }
	.fsd-hub__bar { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 860px) {
	/* The tab bar replaces the sidebar strip on phones. */
	body.fsd-has-tabbar .fsd-appnav { display: none !important; }
	.fsd-hub { padding-inline: var(--fsd-sp-4); }
}

/* ---- Phase 12: shared accessibility guards ------------------------------ */
/* [hidden] must win over component display rules (.fsd-btn is flex, etc.). */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* On brand-filled and dark surfaces the maroon ring would vanish. */
.fsd-prompt, .fsd-ticker, .fsd-hrank, .fsd-freefest, .fsd-bundlepromo,
.fsd-mobile-nav__rank, .fsd-mobile-nav__continue, .fsd-rv-lb { --fsd-focus: #ffffff; }

/* "Ready to practise?" bar: the button inverts so it stays visible on maroon. */
.fsd-prompt .fsd-btn--primary { background: var(--fsd-surface); color: var(--fsd-brand); border-color: var(--fsd-surface); }
.fsd-prompt .fsd-btn--primary:hover { background: var(--fsd-brand-bg); color: var(--fsd-brand-hi); }
.fsd-prompt__close:hover { background: rgb(255 255 255 / 14%); }
.fsd-prompt__close:focus-visible { outline: 2px solid var(--fsd-on-brand); outline-offset: 2px; }

/* Footer links: a full tap target on phones, without changing the column height much. */
@media (max-width: 860px) {
	.fsd-foot__col ul { gap: 0; }
	.fsd-foot__col a, .fsd-foot__legal a { display: inline-flex; align-items: center; min-height: var(--fsd-target); padding: 0; }
	.fsd-foot__legal { row-gap: 0; }
}

/* Signed-out phone menu: the header search fills the panel instead of a fixed 210px pill. */
@media (max-width: 860px) {
	.fsd-nav__search { width: 100%; }
	.fsd-nav__search input { width: auto; flex: 1; min-width: 0; }
}

/* Purchase actions share one orange-to-maroon treatment across the site. */
.fsd-btn.fsd-btn--buy {
	background: linear-gradient(110deg, #b6450d 0%, #9e3030 50%, #831d32 100%);
	border-color: #9e3030;
	color: #fff;
	box-shadow: 0 3px 10px rgb(131 29 50 / 18%);
}
.fsd-btn.fsd-btn--buy:hover:not(:disabled) {
	background: linear-gradient(110deg, #a03b0b 0%, #8c252b 50%, #6a1728 100%);
	border-color: #831d32;
	color: #fff;
}
.fsd-btn.fsd-btn--buy:focus-visible { outline: 2px solid #831d32; outline-offset: 3px; }
.fsd-btn.fsd-btn--buy:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }