/*
 * 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:  #6b7080;
	--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) */
	--fsd-m-strong: #1f7a55; --fsd-m-good: #5f9e4a; --fsd-m-dev: #b98a0e;
	--fsd-m-weak:   #d4651f; --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;

	/* ---- 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); }

.fsd-tabbar { display: none; }
@media (max-width: 860px) {
	.fsd-tabbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
		display: grid; grid-template-columns: repeat(5, 1fr);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
		background: var(--fsd-surface); border-top: 1px solid var(--fsd-line);
		box-shadow: 0 -6px 18px -14px rgb(32 33 42 / 35%);
	}
	.fsd-tabbar__item {
		display: grid; justify-items: center; align-content: center; gap: 2px; min-height: var(--fsd-target);
		color: var(--fsd-ink-faint); text-decoration: none; font-size: .68rem; font-weight: 700; border-radius: var(--fsd-r-ctl);
	}
	.fsd-tabbar__item.is-active { color: var(--fsd-brand); }
	.fsd-tabbar__item:focus-visible { outline: 2px solid var(--fsd-brand); outline-offset: -2px; }
	body.fsd-has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
	/* The floating feedback buttons would sit on the bar; lift them clear. */
	body.fsd-has-tabbar .fb-dock { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- 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); }
}