/* header.css: Apply common styles for all pages
 *             by placing this file in the header.
 */

/******************************************* Scrollbars ****************************************/

/* Thin page-level scrollbar only (Firefox). Scoped to html/body rather than
   the universal `*` selector so inner scroll regions (spreadsheet content
   area, nav dropdowns, modals) keep their own sizing and aren't affected. */
html, body {
	scrollbar-width: thin;
	scrollbar-color: var(--slate-gray, #5A6C75) var(--mist, #E8EBED);
}

/* Thin page-level scrollbar only (WebKit/Blink) */
html::-webkit-scrollbar, body::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
	background: var(--mist, #E8EBED);
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
	background: var(--slate-gray, #5A6C75);
	border-radius: 6px;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
	background: var(--charcoal, #2C3539);
}

/******************************************* WCAG Skip Navigation & Focus ****************************************/

/* Skip-to-content link: hidden until focused (WCAG 2.4.1 Bypass Blocks) */
.skip-nav-link {
	position: fixed;
	top: -100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	background: var(--topographic-teal);
	color: var(--white);
	padding: 12px 24px;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: top 0.2s ease;
}

.skip-nav-link:focus {
	top: 0;
	outline: 3px solid var(--compass-gold);
	outline-offset: 2px;
}

/* Global focus indicator: WCAG 2.4.7 Focus Visible (Level AA)
 * Shows on :focus for all keyboard navigation — the fallback ensures
 * visibility even in browsers with incomplete :focus-visible support
 * (older Firefox, Safari < 17). :focus-visible provides the styled ring
 * for modern browsers; :focus provides the guaranteed outline. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
	outline: 3px solid var(--topographic-teal);
	outline-offset: 2px;
}

/* Enhanced ring for browsers that support :focus-visible (supersedes the
 * plain outline above). Do NOT use :focus:not(:focus-visible) to remove —
 * that pattern risks hiding focus indicators for keyboard-only users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--compass-gold);
	outline-offset: 3px;
}

/******************************************* header.css (original) ****************************************/
/*****************************************************************************************************************/


/* inputs: stronger border and darker text */
.form-control {
    background-color: var(--white);
    color: #626466;
    border: 1px solid #b5b8b9;
    box-shadow: none;
}
.form-control:focus {
    border-color: #262a2e94;
    box-shadow: 0 0 0 .12rem rgba(73,80,87,.15);
}

/* make the checkbox more visible */
.form-check-input {
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #76787b;
    background-color: var(--white);
}
.form-check-input:checked {
    background-color: var(--topographic-teal, #0A7A8C);
    border-color: var(--topographic-teal, #0A7A8C);
}

/* improve visibility of the password-hash column */
.text-monospace.small {
    color: #0b1220;
}

/* optional: increase contrast for small text elements */
.small, .form-label.small {
    color: #343a40;
}




/* *********************************************** branding.css ************************************************************** */
/*****************************************************************************************************************/

/* Global spinner overlay */
#globalSpinnerOverlay {
	position: fixed;
	inset: 0;
	background: rgba(44, 53, 57, 0.35);
	display: none;
	z-index: 1050; /* above navbar/modals */
	backdrop-filter: blur(2px);
}
#globalSpinnerOverlay .spinner-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--white);
	padding: 16px;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Fixed navbar with scroll-based theming */
:root {
	--navbar-height: 64px;

	/* ── Button standard: every button on the site uses one of these three sizes
	   and the same hover (keeps its colours, lifts 2px, deeper shadow). Component
	   and page CSS reference these with fallbacks so pages without header.css match. */
	--btn-padding:        8px 18px;
	--btn-font-size:      15px;
	--btn-radius:         6px;
	--btn-padding-sm:     4px 12px;
	--btn-font-size-sm:   13px;
	--btn-radius-sm:      4px;
	--btn-padding-lg:     12px 28px;
	--btn-font-size-lg:   17px;
	--btn-hover-lift:     translateY(-2px);
	--btn-hover-shadow:   0 4px 8px rgba(44, 53, 57, 0.2);
	--btn-transition:     transform 0.2s ease, box-shadow 0.2s ease;
}

.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1040;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.navbar-placeholder {
	height: var(--navbar-height);
}

.nav-transition .nav-link,
.nav-transition .navbar-brand,
.nav-transition .navbar-text,
.nav-transition .navbar-toggler {
	transition: color 0.2s ease, border-color 0.2s ease;
}

.navbar.navbar-transparent {
	background: transparent;
	box-shadow: none;
}

.navbar.navbar-solid {
	background: var(--charcoal);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.navbar.navbar-transparent .nav-link,
.navbar.navbar-transparent .navbar-brand,
.navbar.navbar-transparent .navbar-text {
	color: var(--white);
}

.navbar.navbar-transparent .nav-link:hover,
.navbar.navbar-transparent .nav-link:focus {
	color: rgba(255, 255, 255, 0.8);
}

.navbar.navbar-solid .nav-link,
.navbar.navbar-solid .navbar-brand,
.navbar.navbar-solid .navbar-text {
	color: var(--white);
}

.navbar.navbar-solid .nav-link:hover,
.navbar.navbar-solid .nav-link:focus {
	color: rgba(255, 255, 255, 0.8);
}

.navbar-transparent .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.55);
}

.navbar-transparent .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-solid .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.55);
}

.navbar-solid .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Mobile menu — hamburger expanded panel ─────────────────── */
@media (max-width: 991.98px) {

	/* Toggler: remove Bootstrap's default border/outline ring */
	.navbar-toggler {
		border: none !important;
		padding: 6px 8px;
		border-radius: 6px;
	}
	/* WCAG 2.4.7: visible focus indicator for hamburger button */
	.navbar-toggler:focus {
		box-shadow: none !important;
		outline: 3px solid var(--compass-gold) !important;
		outline-offset: 2px !important;
	}
	.navbar-transparent .navbar-toggler {
		background: rgba(255,255,255,0.12);
	}
	.navbar-transparent .navbar-toggler:hover {
		background: rgba(255,255,255,0.20);
	}
	.navbar-solid .navbar-toggler {
		background: rgba(255,255,255,0.12);
	}
	.navbar-solid .navbar-toggler:hover {
		background: rgba(255,255,255,0.20);
	}

	/* Collapsed menu panel — dark charcoal for both transparent & solid modes */
	.navbar-collapse {
		background: var(--charcoal) !important;
		border-radius: 0 0 14px 14px;
		margin-top: 10px;
		padding: 8px 0 18px;
		box-shadow: 0 12px 36px rgba(0,0,0,0.30);
		overflow: hidden;
	}

	/* Primary nav links */
	.navbar-collapse .nav-link {
		color: rgba(255,255,255,0.80) !important;
		padding: 13px 24px !important;
		font-size: 15px;
		font-weight: 500;
		letter-spacing: 0.1px;
		border-left: 3px solid transparent;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}
	.navbar-collapse .nav-link:hover,
	.navbar-collapse .nav-link:focus,
	.navbar-collapse .nav-link.active {
		color: var(--white) !important;
		background: rgba(10,122,140,0.18) !important;
		border-left-color: var(--topographic-teal);
	}
	/* Dropdown toggle caret stays white */
	.navbar-collapse .nav-link.dropdown-toggle::after {
		border-top-color: rgba(255,255,255,0.60);
	}

	/* Nested dropdown items */
	.navbar-collapse .dropdown-menu {
		background: rgba(0,0,0,0.18) !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding: 4px 0 !important;
		margin: 0 !important;
	}
	.navbar-collapse .dropdown-item {
		color: rgba(255,255,255,0.68) !important;
		padding: 11px 24px 11px 44px !important;
		font-size: 14px;
		border-left: 3px solid transparent;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}
	.navbar-collapse .dropdown-item:hover,
	.navbar-collapse .dropdown-item:focus {
		color: var(--white) !important;
		background: rgba(10,122,140,0.18) !important;
		border-left-color: var(--topographic-teal);
	}

	/* Right-side nav (Login / Register / username) — visual separator */
	.navbar-collapse .navbar-nav.ms-auto {
		border-top: 1px solid rgba(255,255,255,0.10);
		margin-top: 10px;
		padding-top: 6px;
	}

	/* Login link — subtle */
	.navbar-collapse .nav-link[href="/signin.php"] {
		color: rgba(255,255,255,0.65) !important;
	}
	/* Register link — gold accent to draw attention */
	.navbar-collapse .nav-link[href="/signup.php"] {
		color: var(--compass-gold) !important;
		font-weight: 600;
	}
	.navbar-collapse .nav-link[href="/signup.php"]:hover {
		color: var(--compass-gold-hover) !important;
		background: rgba(201,166,97,0.12) !important;
		border-left-color: var(--compass-gold);
	}
}

/* ── Desktop dropdown menus — dark charcoal, consistent with mobile panel ── */
.navbar .dropdown-menu {
	background: var(--charcoal);
	border: none;
	border-top: 2px solid var(--topographic-teal);
	border-radius: 0 0 12px 12px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
	padding: 8px 0;
	min-width: 220px;
}

.navbar .dropdown-item {
	color: rgba(255, 255, 255, 0.75);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	border-left: 3px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* ── "More" overflow menu (priority-nav) — can hold several collapsed tabs'
   worth of items, so it needs its own scroll region instead of running off
   the bottom of the viewport. Leaves room above/below for the fixed navbar
   itself and a small margin. ── */
.navbar .dropdown-menu#navMoreMenu {
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
	color: var(--white);
	background: rgba(10, 122, 140, 0.20);
	border-left-color: var(--topographic-teal);
}

.navbar .dropdown-item:active {
	background: rgba(10, 122, 140, 0.30);
}

/* Divider line inside dropdowns */
.navbar .dropdown-divider {
	border-color: rgba(255, 255, 255, 0.10);
	margin: 6px 0;
}

/* ── Custom chevron dropdown arrow — larger, cleaner ── */
.navbar .dropdown-toggle::after {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	border-top: none;
	border-left: none;
	transform: rotate(45deg) translateY(-2px);
	vertical-align: middle;
	margin-left: 6px;
	opacity: 0.8;
	content: '';
}

/* ── Nav links: breathing room from the logo ── */
.navbar .navbar-nav.me-auto {
	margin-left: 28px;
}

.navbar .nav-link {
	padding-left: 14px !important;
	padding-right: 14px !important;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.15px;
}

.logo-nav {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.logo-mark-white { display: none; }

.logo-text-nav {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.7px;
}

/* Solid navbar (dark): gold "Map" + white "Outcomes" */
.navbar-solid .logo-mark-white { display: inline-flex; }
.navbar-solid .logo-mark-color { display: none; }
.navbar-solid .logo-text-nav .map { color: var(--compass-gold); text-shadow: 0 0 6px rgba(201, 166, 97, 0.1), 0 0 12px rgba(201, 166, 97, 0.1); }
.navbar-solid .logo-text-nav .outcomes { color: var(--white); opacity: 0.93; }

/* Logo mark: 22° clockwise rotation */
.logo-mark-color svg,
.logo-mark-white svg {
	transform: rotate(22deg);
}

/* Transparent navbar: gold "Map", white "Outcomes" */
.navbar-transparent .logo-mark-white { display: inline-flex; }
.navbar-transparent .logo-mark-color { display: none; }
.navbar-transparent .logo-text-nav,
.navbar-transparent .logo-text-nav .outcomes {
	color: var(--white);
}
.navbar-transparent .logo-text-nav .map {
	color: var(--compass-gold);
	text-shadow: 0 0 6px rgba(201, 166, 97, 0.1), 0 0 12px rgba(201, 166, 97, 0.1);
}

/* Topographic overlay (light grid) — hide on navbar */
.nav-hero.linear-gradient .topo-bg-light {
	display: none;
}

/* Shared hero gradient shell for login/register/index */
.linear-gradient {
	position: relative;
	background: linear-gradient(135deg, rgba(10,122,140, 1) 0%, rgba(45,95,63, 1) 100%);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	margin-bottom: 0; /* the base `section` rule's 40px left a cream strip above the footer on signin/signup/connect */
	overflow: hidden;
}

/* Header banner variant: keeps gradient + overlay without flex centering
   and uses a shorter height suitable for admin/user pages */
.nav-hero.linear-gradient {
	height: var(--navbar-height);
	min-height: 0;                      /* override min-height for nav-hero */
	display: block;
	padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    pointer-events: none;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	/* ── Brand colours ── */
	--topographic-teal:  #0A7A8C;
	--contour-green:     #2D5F3F;
	--parchment-cream:   #F4F1E8;
	--compass-gold:      #C9A661;
	--compass-gold-dark: #A07C3A;   /* darkened for contrast on white */
	--route-red:         #B4534E;
	--elevation-brown:   #6B5A47;
	--charcoal:          #2C3539;
	--slate-gray:        #5A6C75;
	--mist:              #E8EBED;
	--frost:             #F3F5F6;   /* pale cool-gray between --white and --mist, for hover/highlight backgrounds */
	--white:             #FFFFFF;

	/* ── Semantic colour aliases (for B5 pages + component consistency) ── */
	--mapoutcomes-blue:    var(--topographic-teal);
	--mapoutcomes-blue-dark: #086474;
	--success-green:       var(--contour-green);
	--warning-amber:       var(--compass-gold-dark);
	--danger-red:          var(--route-red);

	/* ── Typography ── */
	--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
	--font-mono:    'Courier New', Courier, monospace;

	/* ── Type scale ── */
	--text-xs:   11px;
	--text-sm:   13px;
	--text-base: 15px;
	--text-lg:   18px;
	--text-xl:   22px;
	--text-2xl:  28px;
	--text-3xl:  36px;

	/* ── Border radius ── */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   14px;
	--radius-pill: 999px;

	/* ── Elevation shadows ── */
	--shadow-sm: 0 2px 8px  rgba(44, 53, 57, 0.08);
	--shadow-md: 0 4px 16px rgba(44, 53, 57, 0.12);
	--shadow-lg: 0 8px 32px rgba(44, 53, 57, 0.20);

	/* ── Content container widths ──
	   --content-max-width is the shared centered-column width for admin/
	   dashboard pages (gap-detection, choose-workspace, workspace-home,
	   course-worksheet, etc.) — most of these pages already converged on
	   1100px independently; centralizing it here so future pages default
	   to the same rhythm instead of picking their own number.
	   --content-max-width-wide is for the few pages that intentionally need
	   more room for dense tabular content (course-workspace's split Exemplars/
	   Review tabs). */
	--content-max-width:      1100px;
	--content-max-width-wide: min(2400px, 94vw);

	/* ═══════════════════════════════════════════════════════════
	   DESIGN SYSTEM v1.0 — Phase 2 Tokens (B11, additive only)
	   Zero breaking changes. All WCAG AA verified.
	   See Beatrice's Implementation Package doc #11154 (Aug 10, 2026).
	   ═══════════════════════════════════════════════════════════ */

	/* ── Evidence maturity colours ── */
	--evidence-empty:      var(--mist);   /* mist, visual placeholder */
	--evidence-draft:      var(--compass-gold-dark);   /* compass-gold-dark, work in progress */
	--evidence-sufficient: var(--contour-green);   /* contour-green, meets requirements */
	--evidence-verified:   var(--topographic-teal);   /* topographic-teal, coordinator approved */

	/* Evidence maturity text variants (WCAG AA on white) */
	--evidence-draft-text: #8B6914;   /* darker gold for text contrast */
	--evidence-suff-text:  #1E4432;   /* darker green for text contrast */

	/* ── ABET framework identity (distinguished from CEAB teal) ── */
	--abet-maroon:       #7B2D3B;
	--abet-maroon-light: #F2E0E3;
	--abet-maroon-text:  #5C222E;     /* text-safe variant */

	/* ── AI suggestion UI — subtle, non-intrusive accent ── */
	--ai-suggestion-bg:     #EEF2F7;
	--ai-suggestion-border: #C5D0DC;
	--ai-suggestion-text:   #4A6274;

	/* ── Faculty collaboration — distinct from primary teal ── */
	--collab-purple:       #6B5B8A;
	--collab-purple-light: #EDE8F3;

	/* ── Font weight system ── */
	--font-weight-light:    300;
	--font-weight-regular:  400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;

	/* ── Line height scale ── */
	--leading-none:    1;
	--leading-tight:   1.25;
	--leading-normal:  1.6;
	--leading-relaxed: 1.75;
	--leading-loose:   2;

	/* ── Extended type scale ── */
	--text-4xl: 44px;
	--text-5xl: 56px;

	/* ── Letter spacing ── */
	--tracking-tighter: -0.05em;
	--tracking-tight:   -0.025em;
	--tracking-normal:   0;
	--tracking-wide:     0.025em;
	--tracking-wider:    0.05em;

	/* ── Heading scale (font-size + line-height pairs) ── */
	--heading-h1: 2.5rem / 1.2;   /* 40px, tight for display */
	--heading-h2: 2rem   / 1.25;  /* 32px */
	--heading-h3: 1.5rem / 1.3;   /* 24px */
	--heading-h4: 1.25rem / 1.4;  /* 20px */
	--heading-h5: 1.125rem / 1.5; /* 18px */
	--heading-h6: 1rem   / 1.5;   /* 16px */

	/* ── Spacing system ── */
	--space-0:   0;
	--space-1:   4px;
	--space-2:   8px;
	--space-3:   12px;
	--space-4:   16px;
	--space-5:   20px;
	--space-6:   24px;
	--space-8:   32px;
	--space-10:  40px;
	--space-12:  48px;
	--space-16:  64px;
	--space-20:  80px;
	--space-page: 20px;

	/* ── Z-index layers ── */
	--z-base:      0;
	--z-dropdown:  1000;
	--z-sticky:    1020;
	--z-overlay:   1040;
	--z-modal:     1060;
	--z-popover:   1080;

	/* ═══════════════════════════════════════════════════════════
	   Token Hardening — P0 additions (Aug 13, 2026)
	   Per Beatrice's WCAG Token Hardening Audit (doc #11564 Part 4).
	   Hover states, text-safe variants, indicator colors, footer.
	   ═══════════════════════════════════════════════════════════ */

	/* ── Hover states ── */
	--topographic-teal-hover:  #096b7a;
	--compass-gold-hover:      #e0c47a;
	--compass-gold-text:       #8a6d2b;
	--contour-green-dark:      #245033;
	--route-red-dark:          #9A4540;
	--gold-hover-bg:           #b8954e;

	/* ── Status indicators ── */
	--success-indicator:   #6FCF97;
	--neutral-indicator:   #8FA8B5;
	--muted-indicator:     #A0AEC0;
	--error-highlight:     #c0605b;

	/* ── Admin toolbar: slate fill + brand-hue icon tints, lightened to keep WCAG 1.4.11's 3:1
	   on the fill (contrast vs --toolbar-btn-bg in comments) ── */
	--toolbar-btn-bg: #4A5E68; /* white 6.79:1, cream 6.01:1 */
	--icon-teal:      #7CC8D3; /* 3.58:1 */
	--icon-gold:      #DCC08A; /* 3.86:1 */
	--icon-red:       #EFA6A0; /* 3.44:1 */
	--icon-sage:      #9CCBAE; /* 3.74:1 */
	--icon-gray:      #B3C6CF; /* 3.85:1 */
	--icon-pale:      #E8EBED; /* 5.67:1 */

	/* ── System UI ── */
	--dark-footer-bg:  #1a2a30;
	--system-border:   #4a5568;

	/* ── Text colors ── */
	--body-text:    #3D4F58;
	--muted-text:   #7a8a91;
	--subtle-text:  #5a707d;
	--link-color:   #5a7a87;

	/* ═══════════════════════════════════════════════════════════
	   Token Hardening — P2-27 additions (Aug 15, 2026)
	   5 new tokens for remaining hardcoded hex values.
	   ═══════════════════════════════════════════════════════════ */

	/* ── Error state (Material Design error red) ── */
	--error-material: #C62828;

	/* ── Light backgrounds ── */
	--upload-success-bg: #EAF6F4;  /* pale teal, evidence upload success state */
	--parchment-light:   #FAF8F3;  /* very light cream, ROI calculator card bg */

	/* ── Borders ── */
	--parchment-border:  #EFEAE0;  /* parchment-tinted border, ROI calculator */
	--workspace-border:  #d8dde0;  /* cool gray border, workspace cards */
}

body {
	font-family: var(--font-body);
	background: var(--parchment-cream);
	color: var(--charcoal);
	line-height: 1.6;
	/* branding2.html uses body padding; keep default here and override for branding.html */
	padding: 40px 20px;
	display: flex;
	flex-direction: column;
	/* Sticky footer: the floor belongs on body (the flex container), not on main.
	   A min-height here means main only needs to grow (flex: 1 0 auto, no min-height
	   of its own) into whatever's left of one viewport after the nav/footer, so short
	   pages pin the footer flush to the bottom with no dead space above or below it,
	   and pages with more content just grow past 100vh normally. Putting the min-height
	   on main instead (as this rule did 2026-07-16 to 2026-08-20) stacks a full extra
	   100vh on top of the nav+footer height on every page, forcing scroll past the true
	   content on short pages and leaving a gap below the footer on tall/zoomed-out
	   screens. */
	min-height: 100vh;
}

/* main is the only flexible region between header and footer */
body > main {
	flex: 1 0 auto;
}

body > footer {
	flex-shrink: 0;
}

/* branding.html uses body.topo-bg and expects no extra padding */
body.topo-bg {
	padding: 0;
}

/* Topographic Background Pattern */
.topo-bg {
	background-image:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 50px,
			rgba(10, 122, 140, 0.03) 50px,
			rgba(10, 122, 140, 0.03) 51px
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 50px,
			rgba(10, 122, 140, 0.03) 50px,
			rgba(10, 122, 140, 0.03) 51px
		);
}


.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

/* branding2 prefers a wider container; apply when body is not topo-bg */
body:not(.topo-bg) .container {
	max-width: 1400px;
}

/* Full-width layout for PWA/mobile. overflow-x is set on html only: when both
   html and body carry an explicit overflow-x, the browser can't propagate
   body's scrolling to the viewport (per the CSS Overflow spec), so each
   element becomes its own independent scroll container — a real scrollbar on
   the window plus a second one on body itself, taller than the viewport.
   html-only keeps a single scrollbar while still clipping horizontal overflow. */
html {
	width: 100%;
	overflow-x: hidden;
}
body {
	width: 100%;
}

/* Full-width containers */
.container {
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Full-width sections on all pages */
section {
	width: 100%;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

header {
	background: var(--white);
	border-bottom: 2px solid var(--mist);
	padding: 24px 0;
	margin-bottom: 60px;
}

.header-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo-pathfinder {
	display: flex;
	align-items: center;
	gap: 12px;
}

.compass-icon {
	width: 48px;
	height: 48px;
	position: relative;
}

.compass-icon svg {
	width: 100%;
	height: 100%;
	transition: transform 0.6s ease;
	filter: drop-shadow(0 2px 4px rgba(10, 122, 140, 0.15));
}

.logo-pathfinder:hover .compass-icon svg {
	transform: rotate(45deg);
}

.logo-text {
	font-size: 28px;
	font-weight: 600;
	color: var(--charcoal);
	letter-spacing: 0.5px;
}

.logo-text .map { color: var(--topographic-teal); }
.logo-text .outcomes { color: var(--contour-green); }

.tagline {
	font-size: 14px;
	color: var(--slate-gray);
	font-style: italic;
}

/* Section Styling (branding.html) */
section {
	background: var(--white);
	border-radius: 0px;
	padding: 40px;
	margin-bottom: 40px;
	box-shadow: 0 2px 8px rgba(44, 53, 57, 0.08);
	border: 1px solid var(--mist);
	position: relative;
	overflow: hidden;
}

/* Add topographic grid pattern only to light landing page sections (home.css handles dark sections with ::before) */
section.home-problem,
section.home-features,
section.home-how {
	background-image:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 50px,
			rgba(255, 255, 255, 0.14) 50px,
			rgba(255, 255, 255, 0.14) 51px
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 50px,
			rgba(255, 255, 255, 0.14) 50px,
			rgba(255, 255, 255, 0.14) 51px
		);
}


h1 {
	font-size: 36px;
	color: var(--charcoal);
	margin-bottom: 12px;
	font-weight: 700;
	text-align: left;
}

h2 {
	font-size: 28px;
	color: var(--charcoal);
	margin-top: 0;
	margin-bottom: 15px;
	font-weight: 600;
	position: relative;
	z-index: 1;
}

h3 {
	font-size: 20px;
	color: var(--topographic-teal);
	margin-bottom: 16px;
	font-weight: 600;
}

/* Color Palette (branding.html) */
.color-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.color-card {
	border: 1px solid var(--mist);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.color-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(44, 53, 57, 0.12);
}

.color-swatch {
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 18px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.color-info { padding: 16px; background: var(--white); }
.color-name { font-weight: 600; color: var(--charcoal); margin-bottom: 4px; }
.color-hex { font-family: 'Courier New', monospace; color: var(--slate-gray); font-size: 14px; }
.color-usage { font-size: 12px; color: var(--slate-gray); margin-top: 8px; }

/* Logo Variations (branding.html) */
.logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 32px;
	margin-top: 32px;
}

.logo-variant {
	text-align: center;
	padding: 32px;
	border: 1px solid var(--mist);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.logo-variant:hover {
	border-color: var(--topographic-teal);
	box-shadow: 0 4px 12px rgba(10, 122, 140, 0.1);
}

.logo-variant h4 {
	margin-top: 16px;
	color: var(--slate-gray);
	font-size: 14px;
	font-weight: 500;
}

/* Icon System (branding.html) */
.icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.icon-item {
	text-align: center;
	padding: 24px 16px;
	border: 1px solid var(--mist);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.icon-item:hover {
	background: var(--parchment-cream);
	border-color: var(--topographic-teal);
	transform: translateY(-2px);
}

.icon-item svg {
	width: 48px;
	height: 48px;
	stroke: var(--topographic-teal);
	margin-bottom: 12px;
	transition: all 0.3s ease;
}

.icon-item:hover svg {
	stroke: var(--contour-green);
	transform: scale(1.1);
}

.icon-label { font-size: 12px; color: var(--slate-gray); font-weight: 500; }

/* Button Styles (branding.html) */
.button-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 24px;
}

.btn {
	padding: var(--btn-padding);
	font-size: var(--btn-font-size);
	font-weight: 600;
	border-radius: var(--btn-radius);
	border: none;
	cursor: pointer;
	transition: var(--btn-transition), filter 0.2s ease;
	font-family: inherit;
}

/* Bootstrap's .btn-sm/.btn-lg sizing is overridden by .btn above (this file loads
   after Bootstrap), so restate them from the button standard. */
.btn.btn-sm,
.btn-group-sm > .btn {
	padding: var(--btn-padding-sm);
	font-size: var(--btn-font-size-sm);
	border-radius: var(--btn-radius-sm);
}

.btn.btn-lg,
.btn-group-lg > .btn {
	padding: var(--btn-padding-lg);
	font-size: var(--btn-font-size-lg);
}

/* Standard hover: keep the button's own colours (Bootstrap variants, outline ones
   included, would otherwise swap/fill the background) and lift it. .btn.btn outranks
   every single-class Bootstrap variant rule. */
.btn.btn {
	--bs-btn-hover-bg: var(--bs-btn-bg);
	--bs-btn-hover-color: var(--bs-btn-color);
	--bs-btn-hover-border-color: var(--bs-btn-border-color);
}

.btn:hover {
	transform: var(--btn-hover-lift);
	box-shadow: var(--btn-hover-shadow);
}

.btn-primary {
	background: var(--compass-gold);
	color: var(--charcoal); /* WCAG 1.4.3: charcoal on gold ≈ 5.45:1 (white was 2.31:1) */
	box-shadow: 0 2px 4px rgba(201, 166, 97, 0.2);
}

.btn-primary:hover {
	background: var(--compass-gold);
	color: var(--charcoal); /* WCAG 1.4.3: charcoal on gold ≈ 5.45:1 */
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(201, 166, 97, 0.3);
}

/* Admin toolbar buttons (Create, Update, Delete, Clear, Batch, Edit Junction, Import
   Mappings, Options): light slate (--toolbar-btn-bg) with white text and a coloured icon
   per button. Chosen by Michael on 2026-10-05 after comparing mixes of teal/gold/red/slate,
   all-gold (gold blends into the cream page at 2.04:1), tints, outlines and darker fills
   (charcoal, the footer colour, #3D4F58). Destroy stays route red. */
.btn-create {
	background: var(--toolbar-btn-bg);
	color: var(--white); /* WCAG 1.4.3: white on slate ≈ 6.8:1 */
	box-shadow: 0 2px 4px rgba(44, 53, 57, 0.2);
}

.btn-create:hover {
	background: var(--toolbar-btn-bg);
	color: var(--white);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(44, 53, 57, 0.3);
}

.btn-update {
	background: var(--toolbar-btn-bg);
	color: var(--white); /* WCAG 1.4.3: white on slate ≈ 6.8:1 */
	box-shadow: 0 2px 4px rgba(44, 53, 57, 0.2);
}

.btn-update:hover {
	background: var(--toolbar-btn-bg);
	color: var(--white);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(44, 53, 57, 0.3);
}

.btn-delete {
	background: var(--toolbar-btn-bg);
	color: var(--white); /* WCAG 1.4.3: white on slate ≈ 6.8:1 */
	box-shadow: 0 2px 4px rgba(44, 53, 57, 0.2);
}

.btn-delete:hover {
	background: var(--toolbar-btn-bg);
	color: var(--white);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(44, 53, 57, 0.3);
}

.btn-clear {
	background: var(--toolbar-btn-bg);
	color: var(--white); /* WCAG 1.4.3: white on slate ≈ 6.8:1 */
	box-shadow: 0 2px 4px rgba(44, 53, 57, 0.2);
}

.btn-clear:hover {
	background: var(--toolbar-btn-bg);
	color: var(--white);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(44, 53, 57, 0.3);
}

/* Options (Bootstrap .btn-secondary) in the admin button bar: slate like the other
   toolbar buttons; transform on hover comes from the .btn standard. */
.buttons .btn-secondary,
.buttons .btn-secondary:hover,
.buttons .btn-secondary:focus {
    background: var(--toolbar-btn-bg);
    border-color: var(--toolbar-btn-bg);
    color: var(--white);
}
.buttons .btn-secondary {
    box-shadow: 0 2px 4px rgba(44, 53, 57, 0.2);
}

/* Toolbar buttons are a step slimmer than the site-wide .btn (38.5px → 32.5px tall);
   Michael found the standard height too tall for the admin bar. Still well above the
   24px WCAG 2.5.8 target size. */
.buttons .btn {
    padding: 5px 16px;
}

/* Options sits at the right end of the button bar on wide screens. Below 1000px the bar wraps
   onto several lines, and margin-left: auto pushed Options alone to the right edge of its line,
   out of line with every other (left-aligned) button, so it aligns left there instead. */
.buttons-options {
    margin-left: auto;
}
@media (max-width: 999.98px) {
    .buttons-options {
        margin-left: 0;
    }
}

/* Each charcoal toolbar button gets its own core-brand icon colour (option I2 with a gold
   Edit Junction, chosen by Michael 2026-10-05). Create, Edit Junction and Batch share
   .btn-create for the fill, so the icon hue comes from .btn-junction / .btn-batch. */
.btn-create i { color: var(--icon-teal); }
.btn-update i,
.btn-create.btn-junction i { color: var(--icon-gold); }
.btn-create.btn-batch i,
.btn-indicator-import i { color: var(--icon-sage); }
.btn-clear i { color: var(--icon-gray); }
.buttons .btn-secondary i { color: var(--icon-pale); }

/* Delete keeps the slate button but flags itself with a soft red icon; full route red
   would fall well below WCAG 1.4.11's 3:1 on the fill. */
.btn-delete i { color: var(--icon-red); }

.btn-import {
    background: var(--topographic-teal);
    color: var(--white);
    box-shadow: 0 2px 4px rgba(44, 53, 57, 0.2);
}
.btn-import:hover {
    background: var(--topographic-teal);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(44, 53, 57, 0.3);
}

.btn-export {
    background: var(--compass-gold);
    color: var(--charcoal); /* WCAG 1.4.3: charcoal on gold ≈ 5.45:1 (white was 2.31:1) */
    box-shadow: 0 2px 4px rgba(90, 108, 117, 0.2);
}
.btn-export:hover {
    background: var(--compass-gold);
    color: var(--charcoal); /* WCAG 1.4.3: charcoal on gold ≈ 5.45:1 */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(90, 108, 117, 0.3);
}

.btn-destroy {
    background: var(--route-red);
    color: var(--mist);
    box-shadow: 0 2px 4px rgba(232, 235, 237, 0.2);
}
.btn-destroy:hover {
    background: var(--route-red);
    color: var(--mist);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(180, 83, 78, 0.3);
}

.btn-ghost { 
    background: transparent; 
    color: var(--elevation-brown); 
    border: 1px solid var(--mist); 
}

.btn-ghost:hover { 
    background: transparent; 
}

/* Cards (branding.html) */
.card-examples {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.card {
	background: var(--white);
	border: 1px solid var(--mist);
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(44, 53, 57, 0.08);
	transition: all 0.3s ease;
}

.card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(44, 53, 57, 0.12); }
.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card-icon { width: 40px; height: 40px; background: var(--parchment-cream); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.card-icon svg { width: 24px; height: 24px; stroke: var(--topographic-teal); }
.card h4 { font-size: 18px; color: var(--charcoal); font-weight: 600; }
.card p { color: var(--slate-gray); font-size: 14px; line-height: 1.6; }
.card-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mist); display: flex; align-items: center; justify-content: space-between; }
.status-badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.status-complete { background: rgba(45, 95, 63, 0.1); color: var(--contour-green); }
.status-progress { background: rgba(10, 122, 140, 0.1); color: var(--topographic-teal); }

/* Route Lines (branding.html) */
.route-demo { margin-top: 32px; padding: 40px; background: var(--parchment-cream); border-radius: 8px; position: relative; }
.route-points { display: flex; justify-content: space-between; align-items: center; position: relative; }
.route-line { position: absolute; top: 50%; left: 10%; right: 10%; height: 3px; background: var(--topographic-teal); border-style: dashed; border-width: 3px 0 0 0; border-color: var(--topographic-teal); }
.route-line::after { content: ''; position: absolute; right: 0; top: -4px; width: 0; height: 0; border-left: 8px solid var(--topographic-teal); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pin { width: 60px; height: 60px; background: var(--white); border: 3px solid var(--topographic-teal); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(10, 122, 140, 0.2); position: relative; z-index: 2; transition: all 0.3s ease; }
.pin:hover { transform: rotate(-45deg) scale(1.1); box-shadow: 0 6px 12px rgba(10, 122, 140, 0.3); }
.pin-inner { transform: rotate(45deg); font-weight: 600; color: var(--topographic-teal); font-size: 14px; }
.pin.complete { border-color: var(--contour-green); background: var(--contour-green); }
.pin.complete .pin-inner { color: var(--white); }
.pin-label { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--slate-gray); white-space: nowrap; font-weight: 500; }

/* Progress Bar (branding.html) */
.progress-demo { margin-top: 32px; }
.progress-bar { height: 12px; background: var(--mist); border-radius: 6px; overflow: hidden; position: relative; margin-bottom: 8px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--contour-green), var(--topographic-teal)); border-radius: 6px; transition: width 1s ease; position: relative; }
.progress-fill::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: var(--compass-gold); border-radius: 50%; box-shadow: 0 2px 4px rgba(201, 166, 97, 0.4); }
.progress-label { display: flex; justify-content: space-between; font-size: 14px; color: var(--slate-gray); margin-bottom: 16px; }

/* Showcase (branding2.html) */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 32px; margin-bottom: 40px; }
.showcase-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(44, 53, 57, 0.08); border: 1px solid var(--mist); }
.showcase-header { padding: 20px 24px; background: var(--parchment-cream); border-bottom: 1px solid var(--mist); }
.showcase-header h3 { font-size: 18px; color: var(--topographic-teal); font-weight: 600; }
.showcase-header p { font-size: 14px; color: var(--slate-gray); margin-top: 4px; }
.showcase-content { padding: 40px; display: flex; align-items: center; justify-content: center; min-height: 250px; }
.subtitle { text-align: center; color: var(--slate-gray); font-size: 18px; margin-bottom: 60px; }

/* Dark Hero Section (branding2.html) */
.hero-dark { background: linear-gradient(135deg, var(--topographic-teal) 0%, var(--contour-green) 100%); }
.hero-content { text-align: center; color: white; }
.logo-hero { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; transition: transform 0.3s ease; }
.logo-hero:hover { transform: scale(1.05); }
.logo-hero svg { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); }
.logo-text-hero { font-size: 48px; font-weight: 700; letter-spacing: -0.5px; }
.hero-tagline { font-size: 20px; opacity: 0.95; margin-bottom: 32px; }
.cta-button { background: var(--compass-gold); color: var(--charcoal); padding: var(--btn-padding-lg); border-radius: var(--btn-radius); font-size: var(--btn-font-size-lg); font-weight: 600; border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(201, 166, 97, 0.3); transition: var(--btn-transition); } /* WCAG 1.4.3: charcoal on gold = 8.1:1 */
.cta-button:hover { transform: var(--btn-hover-lift); box-shadow: 0 6px 20px rgba(201, 166, 97, 0.4); background: var(--compass-gold); color: var(--charcoal); }

/* Light Header (branding2.html) */
.header-light { background: var(--white); padding: 20px; border-radius: 8px; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.logo-nav { display: flex; align-items: center; gap: 12px; transition: transform 0.3s ease; }
.logo-nav:hover svg { transform: rotate(45deg); }
.logo-nav svg { transition: transform 0.6s ease; }
/* Scoped to .nav-bar so it doesn't override the app navbar logo size */
.nav-bar .logo-text-nav { font-size: 28px; font-weight: 600; }
.nav-bar .logo-text-nav .map { color: var(--topographic-teal); }
.nav-bar .logo-text-nav .outcomes { color: var(--contour-green); }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { color: var(--slate-gray); text-decoration: none; font-weight: 500; transition: color 0.3s ease; }
.nav-links a:hover { color: var(--topographic-teal); }

/* Favicon Demo (branding2.html) */
.favicon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 24px; text-align: center; }
.favicon-item { padding: 20px; background: var(--parchment-cream); border-radius: 8px; }
.favicon-item svg { margin-bottom: 12px; }
.favicon-label { font-size: 12px; color: var(--slate-gray); font-weight: 500; }

/* App Icon (branding2.html) */
.app-icon-demo { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.phone-mockup { width: 280px; height: 560px; background: #1C1C1E; border-radius: 40px; padding: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); position: relative; }
.phone-screen { width: 100%; height: 100%; background: linear-gradient(180deg, #1C1C1E 0%, #2C2C2E 100%); border-radius: 32px; padding: 60px 20px 20px 20px; overflow: hidden; }
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.app-icon { width: 100%; aspect-ratio: 1; border-radius: 22%; overflow: hidden; background: var(--charcoal); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); transition: transform 0.2s ease; }
.app-icon:hover { transform: scale(1.1); }
.app-icon.mapoutcomes { background: linear-gradient(135deg, var(--topographic-teal) 0%, var(--contour-green) 100%); }
.app-icon svg { width: 70%; height: 70%; }

/* Business Card (branding2.html) */
.business-card { width: 100%; max-width: 500px; height: 280px; background: var(--charcoal); border-radius: 12px; padding: 32px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.business-card::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle, rgba(10, 122, 140, 0.15) 0%, transparent 70%); }
.card-logo-section { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.card-logo-text { font-size: 32px; font-weight: 700; color: white; }
.card-info { position: relative; z-index: 1; }
.card-name { font-size: 20px; font-weight: 600; color: white; margin-bottom: 4px; }
.card-title { font-size: 14px; color: var(--compass-gold); margin-bottom: 16px; }
.card-contact { font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.8; }

/* Email Signature (branding2.html) */
.email-signature { background: white; padding: 24px; border-left: 4px solid var(--topographic-teal); font-family: Arial, sans-serif; }
.sig-logo-line { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sig-name { font-size: 18px; font-weight: 700; color: var(--charcoal); margin-bottom: 2px; }
.sig-title { font-size: 14px; color: var(--topographic-teal); margin-bottom: 12px; }
.sig-company { font-size: 16px; font-weight: 600; color: var(--charcoal); margin-bottom: 8px; }
.sig-contact { font-size: 13px; color: var(--slate-gray); line-height: 1.6; }

/* Loading Animation (branding2.html) */
.loading-demo { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.spinner { animation: spin 2s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.loading-text { font-size: 16px; color: var(--slate-gray); font-weight: 500; }

/* Constellation Map Logo Animation */
.constellation-logo {
	transition: transform 0.3s ease;
}

/* Trigger on .logo-nav hover so animation plays when hovering logo text too */
.constellation-logo:hover .constellation-circles,
.logo-nav:hover .constellation-logo .constellation-circles {
	animation: constellationMorph 8s ease-in-out infinite;
}

@keyframes constellationMorph {
	0% {
		/* State 1: Triangle */
	}
	25% {
		/* State 2: Diamond */
	}
	50% {
		/* State 3: Cross */
	}
	75% {
		/* State 4: Pentagon */
	}
	100% {
		/* Back to triangle */
	}
}

/* Individual circle morphing animations */
.constellation-circles .circle-1 {
	animation: circle1Morph 8s ease-in-out infinite;
	animation-play-state: paused;
}

.constellation-circles .circle-2 {
	animation: circle2Morph 8s ease-in-out infinite;
	animation-play-state: paused;
}

.constellation-circles .circle-3 {
	animation: circle3Morph 8s ease-in-out infinite;
	animation-play-state: paused;
}

.constellation-circles .circle-4 {
	animation: circle4Morph 8s ease-in-out infinite;
	animation-play-state: paused;
}

.constellation-logo:hover .circle-1, .logo-nav:hover .constellation-logo .circle-1 { animation-play-state: running; }
.constellation-logo:hover .circle-2, .logo-nav:hover .constellation-logo .circle-2 { animation-play-state: running; }
.constellation-logo:hover .circle-3, .logo-nav:hover .constellation-logo .circle-3 { animation-play-state: running; }
.constellation-logo:hover .circle-4, .logo-nav:hover .constellation-logo .circle-4 { animation-play-state: running; }

/* Circle 1: Top-left corner cycles through positions */
@keyframes circle1Morph {
	0%   { cx: 25; cy: 25; }   /* Triangle top-left */
	25%  { cx: 50; cy: 20; }   /* Diamond top */
	50%  { cx: 50; cy: 10; }   /* Cross top */
	75%  { cx: 50; cy: 15; }   /* Pentagon top */
	100% { cx: 25; cy: 25; }   /* Back to triangle */
}

/* Circle 2: Top-right corner cycles through positions */
@keyframes circle2Morph {
	0%   { cx: 75; cy: 25; }   /* Triangle top-right */
	25%  { cx: 80; cy: 50; }   /* Diamond right */
	50%  { cx: 90; cy: 50; }   /* Cross right */
	75%  { cx: 85; cy: 35; }   /* Pentagon top-right */
	100% { cx: 75; cy: 25; }   /* Back to triangle */
}

/* Circle 3: Bottom position cycles through positions */
@keyframes circle3Morph {
	0%   { cx: 50; cy: 75; }   /* Triangle bottom */
	25%  { cx: 50; cy: 80; }   /* Diamond bottom */
	50%  { cx: 50; cy: 90; }   /* Cross bottom */
	75%  { cx: 28; cy: 70; }   /* Pentagon bottom-left */
	100% { cx: 50; cy: 75; }   /* Back to triangle */
}

/* Circle 4 (center): Subtle pulsing when others move */
@keyframes circle4Morph {
	0%   { r: 5.5; opacity: 1; }
	25%  { r: 5.3; opacity: 1; }
	50%  { r: 5.1; opacity: 1; }
	75%  { r: 5.2; opacity: 1; }
	100% { r: 5.5; opacity: 1; }
}

/* Line animations are handled by JavaScript (header.js) because CSS cannot
   reliably animate x1/y1/x2/y2 on <line> elements across browsers.
   JS reads the computed cx/cy of each circle every frame and updates the lines. */

/* Social Media (branding2.html) */
.social-preview { width: 100%; max-width: 500px; background: white; border: 1px solid var(--mist); border-radius: 8px; overflow: hidden; }
.social-header { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--mist); }
.social-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--topographic-teal), var(--contour-green)); display: flex; align-items: center; justify-content: center; }
.social-info h4 { font-size: 15px; font-weight: 600; color: var(--charcoal); }
.social-info p { font-size: 13px; color: var(--slate-gray); }
.social-content { padding: 16px; }
.social-text { font-size: 14px; color: var(--charcoal); margin-bottom: 12px; }
.social-image { width: 100%; height: 200px; background: linear-gradient(135deg, var(--topographic-teal) 0%, var(--contour-green) 100%); display: flex; align-items: center; justify-content: center; border-radius: 8px; }

/* Animation (branding.html) */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

section { animation: fadeInUp 0.6s ease forwards; }
section:nth-child(1) { animation-delay: 0.1s; }
section:nth-child(2) { animation-delay: 0.2s; }
section:nth-child(3) { animation-delay: 0.3s; }
section:nth-child(4) { animation-delay: 0.4s; }
section:nth-child(5) { animation-delay: 0.5s; }

/* Responsive */
@media (max-width: 768px) {
	/* branding.html adjustments */
	.header-content { flex-direction: column; text-align: center; }
	.logo-text { font-size: 24px; }
	section { padding: 24px; }
	h1 { font-size: 28px; text-align: center; }
	h2 { font-size: 24px; }
	.route-points { flex-direction: column; gap: 80px; }
	.route-line { width: 3px; height: calc(100% - 100px); left: 50%; top: 60px; border-style: none; border-left: 3px dashed var(--topographic-teal); }
	.route-line::after { left: -5px; bottom: -8px; top: auto; transform: rotate(90deg); }

	/* branding2 adjustments */
	.grid { grid-template-columns: 1fr; }
	.nav-bar { flex-direction: column; }
	.phone-mockup { width: 240px; height: 480px; }
	.business-card { height: auto; min-height: 280px; }
	h1 { font-size: 32px; }
}

/* Filter select boxes - global styling */
form[id*="FilterForm"] select,
form[id$="FilterForm"] select {
border-color: #ced4da;
}

form[id*="FilterForm"] select:focus,
form[id$="FilterForm"] select:focus {
border-color: #adb5bd;
box-shadow: 0 0 0 0.2rem rgba(206, 212, 218, 0.25);
}



/***************************************************************** admin.css ***********************************************/
/***************************************************************************************************************************/

/* increase contrast for table rows, inputs and checkbox so they are easier to see */
.table th,
.table td {
    color: #212529;                /* darker text */
    border-color: #414548ec;        /* slightly stronger cell borders */
}

.table tbody tr {
    background-color: var(--white);    /* white rows for contrast */
}
.table-hover tbody tr:hover {
    background-color: #af8371;    /* darker hover so selection is obvious */
}
.table .table-active,
.table .table-active > td {
    background-color: #92b8ce;    /* selected row color */
}



/***************************************************************** nav-groups.css ******************************************/
/***************************************************************************************************************************/

/* ── Small icon inside nav link labels ── */
.nav-group-icon {
    margin-right: 5px;
    opacity: 0.65;
    vertical-align: -1px;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.navbar .nav-link:hover .nav-group-icon,
.navbar .nav-link:focus .nav-group-icon,
.navbar .nav-link.show .nav-group-icon {
    opacity: 1;
}

/* ── Overview/primary page link — visually distinct from sub-items ── */
.dropdown-item-overview {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92) !important;
}
.dropdown-item-overview:hover,
.dropdown-item-overview:focus {
    color: var(--white) !important;
}
.dropdown-item-overview.active {
    color: var(--white) !important;
}

/* ── "View by" section label inside dropdown ── */
.dropdown-section-label {
    display: block;
    padding: 2px 20px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.30);
    pointer-events: none;
    cursor: default;
    user-select: none;
}

/* ── "More" menu tab-group label — one level up from "View by" above.
   Names an entire collapsed tab (e.g. "AI Analysis"), not a filtered view
   within one, so it needs its own weight/color to read as a bigger
   grouping than the nested "View by" label sitting right below it. ── */
.dropdown-section-label-tab {
    display: block;
    padding: 8px 20px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--compass-gold);
    pointer-events: none;
    cursor: default;
    user-select: none;
}

/* ── Per-group dropdown top-border accent colors ── */
/* Courses: teal (default) — nav-dropdown-courses inherits var(--topographic-teal) */
.navbar .nav-dropdown-programs     { border-top-color: var(--contour-green); }
.navbar .nav-dropdown-accreditation { border-top-color: var(--compass-gold); }
.navbar .nav-dropdown-users        { border-top-color: var(--slate-gray); }
.navbar .nav-dropdown-system       { border-top-color: var(--system-border); }

/* ── Per-group dropdown item hover accent colors ── */
.nav-dropdown-programs .dropdown-item:hover,
.nav-dropdown-programs .dropdown-item:focus {
    background: rgba(45, 95, 63, 0.22) !important;
    border-left-color: var(--contour-green) !important;
}
.nav-dropdown-accreditation .dropdown-item:hover,
.nav-dropdown-accreditation .dropdown-item:focus {
    background: rgba(201, 166, 97, 0.20) !important;
    border-left-color: var(--compass-gold) !important;
}
.nav-dropdown-users .dropdown-item:hover,
.nav-dropdown-users .dropdown-item:focus {
    background: rgba(90, 108, 117, 0.22) !important;
    border-left-color: var(--slate-gray) !important;
}
.nav-dropdown-system .dropdown-item:hover,
.nav-dropdown-system .dropdown-item:focus {
    background: rgba(74, 85, 104, 0.22) !important;
    border-left-color: var(--system-border) !important;
}

/* ── Per-group nav link hover color on solid (dark) navbar ── */
.navbar.navbar-solid .nav-group-programs .nav-link:hover,
.navbar.navbar-solid .nav-group-programs .nav-link:focus,
.navbar.navbar-solid .nav-group-programs .nav-link.show {
    color: var(--success-indicator);
}
.navbar.navbar-solid .nav-group-accreditation .nav-link:hover,
.navbar.navbar-solid .nav-group-accreditation .nav-link:focus,
.navbar.navbar-solid .nav-group-accreditation .nav-link.show {
    color: var(--compass-gold);
}
.navbar.navbar-solid .nav-group-users .nav-link:hover,
.navbar.navbar-solid .nav-group-users .nav-link:focus,
.navbar.navbar-solid .nav-group-users .nav-link.show {
    color: var(--neutral-indicator);
}
.navbar.navbar-solid .nav-group-system .nav-link:hover,
.navbar.navbar-solid .nav-group-system .nav-link:focus,
.navbar.navbar-solid .nav-group-system .nav-link.show {
    color: var(--muted-indicator);
}

/* ── Mobile: section label spacing ── */
@media (max-width: 991.98px) {
    .dropdown-section-label {
        padding-left: 44px;
    }
}



/***************************************************************** account-dropdown.css ************************************/
/***************************************************************************************************************************/

/* ── Nav toggle: avatar + username side by side ── */
.account-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
}
.account-username {
    margin-left: 7px;
}

/* ── Small avatar in nav bar ── */
.account-avatar-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 30%;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    flex-shrink: 0;
    vertical-align: middle;
	margin-right: 5px;
}

/* ── Large avatar inside dropdown card ── */
.account-avatar-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 30%;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Avatar colors — compass gold at 10% transparent, consistent across all roles */
.account-avatar-global,
.account-avatar-admin,
.account-avatar-user   { background: rgba(201, 166, 97, 0.9); color: var(--white); }

/* Solid navbar: subtle gold ring */
.navbar-solid .account-avatar-sm { box-shadow: 0 0 0 2px rgba(201,166,97,0.35); }

/* Transparent navbar: white ring so avatar pops on dark bg */
.navbar-transparent .account-avatar-sm { box-shadow: 0 0 0 2px rgba(255,255,255,0.40); }

/* ── Profile card header inside dropdown ── */
.account-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 10px;
    pointer-events: none;
    cursor: default;
}
.account-header-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.account-header-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.account-header-role {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    margin-top: 2px;
}

/* ── Icons inside dropdown items ── */
.dropdown-item-icon {
    margin-right: 8px;
    opacity: 0.60;
    vertical-align: -1px;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
}
.dropdown-item:hover .dropdown-item-icon,
.dropdown-item:focus .dropdown-item-icon {
    opacity: 0.90;
}

/* ── Sign Out — danger tint ── */
.dropdown-item-signout {
    color: rgba(180, 83, 78, 0.82) !important;
}
.dropdown-item-signout:hover,
.dropdown-item-signout:focus {
    color: var(--error-highlight) !important;
    background: rgba(180, 83, 78, 0.14) !important;
    border-left-color: var(--route-red) !important;
}
.dropdown-item-signout .dropdown-item-icon {
    opacity: 0.70;
}

/* ── Mobile: keep card layout readable ── */
@media (max-width: 991.98px) {
    .account-dropdown-header {
        padding-left: 24px;
    }
    .account-username {
        display: none; /* avatar alone is enough on small screens when menu is expanded */
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    /* Button standard: no hover lift (every standardized button reads this token). */
    :root {
        --btn-hover-lift: none;
    }

    /* Disable constellation logo morphing animation */
    .constellation-logo,
    .constellation-circles,
    .constellation-circles .circle-1,
    .constellation-circles .circle-2,
    .constellation-circles .circle-3,
    .constellation-circles .circle-4,
    .constellation-logo .constellation-circles,
    .logo-nav:hover .constellation-logo .constellation-circles {
        animation: none !important;
    }

    /* Disable section fade-in-up animations */
    section {
        animation: none !important;
    }

    /* Disable logo hover rotation */
    .logo-pathfinder:hover .compass-icon svg {
        transition: none;
        transform: none;
    }

    /* Disable color-card hover lift */
    .color-card:hover,
    .card:hover,
    .icon-item:hover,
    .btn:hover,
    .btn-create:hover,
    .btn-update:hover,
    .btn-delete:hover,
    .btn-clear:hover,
    .btn-import:hover,
    .btn-export:hover,
    .btn-destroy:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ── Navigation Shell (breadcrumb + filter chips) ─────────────
   Shared across all pages that use the .nav-shell/.nav-breadcrumb
   markup (course-view, indicator-view, gap-detection,
   gap-detail, ai-results, reporting-dashboard, readiness-check,
   evidence-upload). Lives here (loaded on every page) rather than in
   a single page's component CSS, since it previously only shipped in
   course-view.css and rendered unstyled everywhere else. ── */

.nav-shell {
  /*background: var(--white);*/
  /*border-bottom: 1px solid var(--mist);*/
  padding: 1px 1px;
  margin-bottom: 0px;
  padding-bottom: 2px;
}

/* Breadcrumb */
.nav-breadcrumb {
  display: flex;
  flex-wrap: wrap; /* on narrow screens whole crumbs move to the next line instead of each label wrapping word-by-word */
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-base);
}

.nav-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Links match the current crumb's charcoal (Michael, 2026-10-05: teal clashed with the
   slate toolbar buttons) and are always underlined so they read as links without colour
   (WCAG 1.4.1); the underline thickens on hover/focus. Charcoal on cream is 11.1:1. */
.nav-breadcrumb a {
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 700;
}

.nav-breadcrumb a:hover,
.nav-breadcrumb a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.nav-breadcrumb .separator {
  color: var(--slate-gray);
  font-size: 12px;
  user-select: none;
}

.nav-breadcrumb .current {
  color: var(--charcoal);
  font-weight: 400;
}

/* Filter chips bar */
.nav-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.nav-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-filter-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--elevation-brown);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  font-weight: 500;
  border: 1px solid var(--mist);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-chip:hover {
  border-color: var(--topographic-teal);
  background: rgba(10, 122, 140, 0.04);
}

.filter-chip:focus-visible {
  outline: 3px solid var(--topographic-teal);
  outline-offset: 2px;
}

.filter-chip.is-active {
  background: var(--topographic-teal);
  color: var(--white);
  border-color: var(--topographic-teal);
}

.filter-chip.is-active:hover {
  background: var(--topographic-teal-hover);
}

.filter-chip .chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  line-height: 1;
  margin-left: 2px;
}

.filter-chip:not(.is-active) .chip-remove {
  background: var(--mist);
  color: var(--slate-gray);
}

/* Filter dropdown select (accessible replacement) */
.filter-select-wrapper {
  position: relative;
}

.filter-select {
  appearance: none;
  padding: 4px 32px 4px 12px;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  border: 1px solid var(--mist);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A6C75' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.filter-select:focus-visible {
  outline: 3px solid var(--topographic-teal);
  outline-offset: 2px;
}

@media (max-width: 991px) {
  .nav-shell {
    padding: 12px 16px;
  }
}

@media (max-width: 767px) {
  .nav-shell {
    padding: 10px 12px;
  }

  .nav-filters {
    gap: 6px;
  }

  .nav-filter-label {
    width: 100%;
    margin-bottom: 4px;
  }
}

/* ── Workspace switcher & cross-workspace hint (Phase A nav) ── */
.nav-workspace-hint {
    background: none;
    border: none;
    font-size: 0.85rem;
    opacity: 0.85;
    font-style: italic;
}
.nav-workspace-hint:hover { opacity: 1; text-decoration: underline; }
.nav-group-more .nav-link { opacity: 0.9; }

/* ═══════════════════════════════════════════════════════════
   DESIGN SYSTEM v1.0 — Typography Utility Classes
   Part 3 of Implementation Package (doc #11154)
   ═══════════════════════════════════════════════════════════ */

/* ── Heading classes ── */
.h1 { font-size: var(--heading-h1); font-family: var(--font-display); font-weight: var(--font-weight-bold); line-height: 1.2; }
.h2 { font-size: var(--heading-h2); font-family: var(--font-display); font-weight: var(--font-weight-semibold); line-height: 1.25; }
.h3 { font-size: var(--heading-h3); font-family: var(--font-body);   font-weight: var(--font-weight-semibold); line-height: 1.3; }
.h4 { font-size: var(--heading-h4); font-family: var(--font-body);   font-weight: var(--font-weight-medium); line-height: 1.4; }
.h5 { font-size: var(--heading-h5); font-family: var(--font-body);   font-weight: var(--font-weight-medium); line-height: 1.5; }
.h6 { font-size: var(--heading-h6); font-family: var(--font-body);   font-weight: var(--font-weight-semibold); line-height: 1.5; }

/* ── Font weight utilities ── */
.font-light    { font-weight: var(--font-weight-light); }
.font-normal   { font-weight: var(--font-weight-regular); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

/* ── Font family utilities ── */
.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

/* ── Letter spacing utilities ── */
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }

/* ── Line height utilities ── */
.leading-none    { line-height: var(--leading-none); }
.leading-tight   { line-height: var(--leading-tight); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose   { line-height: var(--leading-loose); }

/* ── Spacing utilities (margin/padding shortcuts) ── */
.m-0  { margin: var(--space-0); }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto { margin-top: auto; }

.p-0  { padding: var(--space-0); }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

/* ── Container utilities ── */
.container-max { max-width: var(--content-max-width); margin-left: auto; margin-right: auto; }
.container-wide { max-width: var(--content-max-width-wide); margin-left: auto; margin-right: auto; }
.px-page { padding-left: var(--space-page); padding-right: var(--space-page); }

/* ── Create/Update modal scroll fix ──
   modalTemplate.php (components/all-pages) wraps .modal-body and .modal-footer in a <form>
   that sits directly inside .modal-content. Bootstrap's .modal-dialog-scrollable makes
   .modal-content a height-capped flex column and .modal-body overflow-y:auto, but that only
   works if .modal-body is a direct flex child of .modal-content — with the <form> in between,
   the form has no height constraint of its own, so it grows to fit all content and everything
   past .modal-content's capped height (including the footer's Create/Update/Close buttons) is
   clipped instead of scrolling. This affects every modal built on modalTemplate.php with a
   form, not just one page — hence the global fix here rather than a per-modal one. Surfaced by
   the blog-posts Create/Update modal once its body editor made the form tall enough to hit
   this ceiling.

   flex: 1 1 auto makes the form itself grow to claim the rest of .modal-content's height
   (it's a flex item there, sized to its own content by default) instead of stopping at its
   content's natural height. Without this, .modal-body's own flex:1 1 auto (Bootstrap default)
   only redistributes space *within* the form's undersized box, so any leftover space between
   .modal-content's capped height and the form's content height renders as dead white space
   below the footer — worse on taller viewports, where .modal-content's vh-based height grows
   but the form's content-based height doesn't (reported on junction modals on 4K screens, and
   independently on 1b-role-permissions.php's Edit Junction modal needing an internal scroll
   the viewport had room to avoid).
*/
.modal-dialog-scrollable .modal-content > form {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
     min-height: 0;
     overflow: hidden;
}

/* ============================================================
   P2-31 — Global Print/PDF System  (task #4262)
   Spec: doc #12476 v1.0 FINAL (governing) · #13037 v1.1 · #12637 Q1–Q11
   CSS-only. This is the single global @media print block; per-component
   print blocks live at the end of each component's own CSS file.
   Print-safe palette (WCAG AA on white):
     green #2D5F3F (7.4:1) · gold #85641F (5.5:1) · red #99443F (6.5:1)
   ============================================================ */

@page {
  size: A4;
  margin: 2cm;
}

@media print {
  /* ── 1.1 Page setup ───────────────────────────────────────── */
  html, body {
    width: auto !important;
    height: auto !important;
    background: #FFFFFF !important;
  }
  body {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 9pt;
    line-height: 1.45;
    color: #2C3539;
  }

  /* ── 1.2 Chrome removal: nav, transient feedback, interactive-only ── */
  .navbar, .navbar-solid, .navbar-transparent, .navbar-collapse,
  .navbar-toggler, .navbar-toggler-icon, .navbar-brand, .navbar-nav,
  .navbar-text, .navbar-placeholder, .nav-shell,
  .modal, .modal-backdrop, .modal-dialog, .modal-dialog-scrollable,
  .modal-content, .modal-header, .modal-body, .modal-footer, .modal-subtitle,
  .mo-toast, .mo-toast-container, .mo-toast-icon, .mo-toast-text,
  .mo-toast-action, .mo-toast-dismiss,
  .mo-processing, .mo-processing-spinner, .mo-processing-details, .mo-processing-label,
  .mo-progress, .mo-progress-fill, .mo-progress-status, .mo-progress--tall,
  .branded-loading-state, .branded-loading-icon, .branded-loading-title,
  .branded-loading-description, .branded-loading-progress, .branded-loading-progress-fill {
    display: none !important;
  }

  /* ── 1.3 Loading states: stop animation, hide skeletons ───── */
  .loading-skeleton, .loading-skeleton-grid, .loading-skeleton--title,
  .loading-skeleton--line, .loading-skeleton--line-short,
  .loading-skeleton--card, .loading-skeleton--block {
    animation: none !important;
    display: none !important;
  }

  /* ── 1.4 Print-safe palette · Q2 WCAG fix ───────────────────
     Re-declare the semantic tokens inside print only (never touch
     the screen :root). §1.4 mandatory print-safe palette:
       green #2D5F3F (7.4:1) — --contour-green already correct
       gold  #85641F (5.5:1) — was #A07C3A (3.9:1, fails AA)
       red   #99443F (6.5:1) — was #B4534E (~4.9:1) */
  :root {
    --compass-gold-dark: #85641F;
    --route-red: #99443F;
  }

  /* ── 1.5 Page-break rules ─────────────────────────────────── */
  h1, h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
  }
  p {
    orphans: 3;
    widows: 3;
  }
  .criteria-item, .kpi-card, .ga-maturity-card,
  .recommendation-item, .evidence-batch-row, .course-header-card,
  .coverage-summary, .readiness-banner, .confidence-display,
  .ga-mapping-table, .ga-accordion-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  table {
    break-inside: auto;
  }
  thead {
    display: table-header-group;   /* repeat header on each page */
  }
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ── 1.6 Links + print-only utility ───────────────────────── */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #5A6C75;
    word-break: break-all;
  }
  a[href^="#"]::after,
  a[href^="/"]::after {
    content: "";
  }

  /* ── Q4 Mobile-in-print re-assertion ────────────────────────
     Print width (Letter ≈740px, A4 ≈602px) falls inside the ≤768px
     mobile range, so mobile media queries fire in print. Re-assert the
     desktop layout container so content keeps its full width. */
  .container-max, .container-wide {
    max-width: none !important;
    width: 100% !important;
  }

  /* ── Q11 Scoped print-color-adjust (filled elements that carry meaning) ── */
  .status-complete,
  .heatmap-green, .heatmap-amber, .heatmap-red, .heatmap-nones,
  .confidence-badge, .confidence-bar-fill, .confidence-summary-segment,
  .confidence-tier-label,
  .kpi-card-bar-fill, .ga-maturity-bar-fill,
  .readiness-banner, .criteria-status,
  .ga-status, .competence-badge, .coverage-stat {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* print-only utility: hidden on screen, shown in print */
.print-only {
  display: none !important;
}
@media print {
  .print-only {
    display: block !important;
  }
}