/* Mobile navigation spine — persistent bottom bar + contextual buy bar.
   Field-guide palette, matched to the dashboard's existing tab bar. Desktop
   is untouched: everything here is inside the <=991px query. */

:root{
	--bmn-h: 60px;                /* bar height, excluding the safe-area inset */
	--bmn-safe: env(safe-area-inset-bottom, 0px);
	--bmn-paper: #fffdf8;
	--bmn-line: rgba(26,28,22,.10);
	--bmn-ink: #1a1c16;
	--bmn-muted: #6d6f66;
	--bmn-green: #1d6b4f;
	--bmn-green-deep: #14432f;
}

.bmn,
.bmn-buy{ display:none; }

@media (max-width:991px){

	/* ── The bar itself ──────────────────────────────────────────────────── */
	.bmn{
		display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9000;
		background:rgba(255,253,248,.94);
		-webkit-backdrop-filter:saturate(1.5) blur(12px);
		backdrop-filter:saturate(1.5) blur(12px);
		border-top:1px solid var(--bmn-line);
		padding:0 4px var(--bmn-safe);
		box-shadow:0 -1px 18px rgba(26,28,22,.06);
	}
	.bmn-i{
		flex:1 1 0; min-width:0;
		display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
		/* 44px is the accessible floor; the bar gives every slot 60. */
		min-height:var(--bmn-h); padding:8px 2px 7px;
		color:var(--bmn-muted); text-decoration:none;
		font:600 10.5px/1.15 "Hanken Grotesk", system-ui, sans-serif;
		letter-spacing:.01em; text-align:center;
		-webkit-tap-highlight-color:transparent;
		transition:color .16s ease;
	}
	.bmn-i.is-on{ color:var(--bmn-green-deep); }
	.bmn-i:active{ color:var(--bmn-green); }
	.bmn-ic-wrap{ position:relative; display:block; line-height:0; }
	.bmn-ic{ width:23px; height:23px; display:block; }
	.bmn-i.is-on .bmn-ic{ stroke-width:2.05; }
	.bmn-l{
		display:block; max-width:100%;
		overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	}

	/* Active slot gets a small cap rather than a full pill, so five labels
	   still fit across a 360px phone without truncating. */
	.bmn-i{ position:relative; }
	/* The active marker is a soft plate behind the icon rather than a cap on
	   the bar's top edge, which the buy bar would otherwise sit over on
	   course pages. */
	.bmn-i.is-on .bmn-ic-wrap::before{
		content:""; position:absolute; left:50%; top:50%;
		width:40px; height:27px; transform:translate(-50%,-50%);
		border-radius:9px; background:rgba(29,107,79,.11);
	}
	.bmn-i.is-on .bmn-ic{ position:relative; }

	.bmn-badge{
		position:absolute; top:-5px; left:calc(50% + 5px);
		min-width:17px; height:17px; padding:0 4px;
		display:none; align-items:center; justify-content:center;
		border-radius:9px; background:var(--bmn-green); color:#fff;
		font:700 10px/1 "Hanken Grotesk", system-ui, sans-serif;
		border:1.5px solid var(--bmn-paper);
	}
	.bmn-badge.is-on{ display:flex; }

	/* ── Contextual purchase bar, riding directly above the nav ──────────── */
	.bmn-buy{
		display:flex; align-items:center; gap:10px;
		position:fixed; left:0; right:0; z-index:8999;
		bottom:calc(var(--bmn-h) + var(--bmn-safe));
		padding:10px 14px;
		background:var(--bmn-paper);
		border-top:1px solid var(--bmn-line);
		box-shadow:0 -2px 20px rgba(26,28,22,.07);
	}
	.bmn-buy-price{ flex:0 0 auto; display:flex; flex-direction:column; gap:1px; min-width:0; }
	.bmn-buy-label{
		font:600 9.5px/1 "Hanken Grotesk", system-ui, sans-serif;
		text-transform:uppercase; letter-spacing:.08em; color:var(--bmn-muted);
	}
	.bmn-buy-amt{
		font:700 19px/1.1 "Hanken Grotesk", system-ui, sans-serif;
		color:var(--bmn-ink); white-space:nowrap;
	}
	.bmn-buy-cart{ flex:0 0 auto; margin:0; }
	.bmn-buy-add{
		width:46px; height:46px; display:flex; align-items:center; justify-content:center;
		border:1.5px solid var(--bmn-green); border-radius:12px;
		background:transparent; color:var(--bmn-green); cursor:pointer; padding:0;
	}
	.bmn-buy-add .bmn-ic{ width:21px; height:21px; }
	.bmn-buy-add:active{ background:rgba(29,107,79,.08); }
	/* Rendered as a <button> when buying and an <a> when continuing, so both
	   need to be forced into the same button shape. */
	.bmn-buy-now{
		flex:1 1 auto; min-height:46px; padding:0 18px;
		display:flex; align-items:center; justify-content:center; text-align:center;
		border:0; border-radius:12px; cursor:pointer; text-decoration:none !important;
		background:var(--bmn-green-deep); color:#fff !important;
		font:700 15px/1.2 "Hanken Grotesk", system-ui, sans-serif;
	}
	.bmn-buy-now:active{ background:var(--bmn-green); }

	/* ── Make room, and clear the field ──────────────────────────────────── */
	body{ padding-bottom:calc(var(--bmn-h) + var(--bmn-safe)); }
	body.bmn-has-buy{ padding-bottom:calc(var(--bmn-h) + 67px + var(--bmn-safe)); }

	/* The courses-page membership promo and the dashboard's own tab bar both
	   claimed the bottom band; the global nav replaces them on mobile. */
	.ca-sticky{ display:none !important; }
	.bcd-tabbar{ display:none !important; }
	#bcd .bcd-main{ padding-bottom:24px; }

	/* Anything else pinned to the bottom (chat launcher, cookie notice) is
	   lifted clear of the bar rather than hidden. */
	.bcs-launcher, .bcs-widget, #bcs-launcher{ bottom:calc(var(--bmn-h) + 12px + var(--bmn-safe)) !important; }
	/* The floating "continue learning" pill is lifted clear of the bar, and
	   suppressed outright on course pages, where the contextual bar already
	   offers exactly the same action two inches lower. */
	[data-bcd-continue]{ bottom:calc(var(--bmn-h) + 12px + var(--bmn-safe)) !important; }
	body.bmn-has-buy [data-bcd-continue]{ display:none !important; }

	/* ── Header: give the brand its space back ───────────────────────────
	 * The header is a four-column grid whose tracks are content-sized, and
	 * the utils cluster (search + cart + Get Started) was winning every one
	 * of them — squeezing the logo to a 10x3px smudge for guests, i.e. for
	 * every first-time visitor. Pinning the brand track and dropping the
	 * header cart (the bottom bar owns Cart now, badge and all) restores it. */
	.navbar.navbar-right{
		display:flex !important; flex-wrap:nowrap !important; align-items:center; gap:10px;
		grid-template-columns:none !important;
	}
	.navbar-brand{ flex:0 0 auto; min-width:104px; }
	.navbar-brand img{ width:104px !important; height:auto !important; max-width:none !important; }
	.navbar-toggler{ flex:0 0 auto; min-width:44px; min-height:44px; }
	/* Holds the off-canvas drawer, which is position:fixed — it must keep
	   rendering, so it collapses to zero width rather than display:none. */
	.menu-primary-container{ flex:0 0 0; width:0; }
	.navbar-utils{ flex:1 1 auto; display:flex; justify-content:flex-end; align-items:center; gap:8px; min-width:0; }
	/* Cart lives in the bottom bar now, badge and all — one cart, not two. */
	.navbar-utils .utils-cart{ display:none !important; }
	/* Likewise the standalone login icon: "Get Started" and the Dashboard
	   slot both lead to sign-in, and three auth affordances will not fit
	   beside a legible logo on a 360px screen. */
	.bc-nav-auth .bc-nav-login{ display:none !important; }
	/* Compacted so the cluster fits its track: at full desktop size the
	   search + CTA are wider than the space left over beside a legible logo,
	   and an over-wide flex row with justify-content:flex-end overflows
	   *leftwards*, which is what put the magnifier on top of the hamburger. */
	.bc-nav-getstarted{
		white-space:nowrap; flex:0 0 auto;
		font-size:13.5px !important; padding:10px 14px !important; gap:0 !important;
	}
	.bc-nav-getstarted svg{ display:none !important; }
	.biocode-search-btn{ flex:0 0 auto; width:40px; height:40px; margin-right:0 !important; }

	/* Modals and overlays must still sit above the bar. */
	.bc-bn-overlay, .tutor-modal, .biocode-search-overlay{ z-index:9500; }
	body.bc-bn-open .bmn, body.bc-bn-open .bmn-buy{ display:none; }
}

@media (max-width:360px){
	.bmn-l{ font-size:9.5px; }
	.bmn-buy-amt{ font-size:17px; }
	.bmn-buy-now{ font-size:14px; padding:0 12px; }
}

@media (prefers-reduced-motion:reduce){
	.bmn-i{ transition:none; }
}

/* Field-guide night palette, matching the dashboard's dark mode. */
@media (max-width:991px){
	html.bcd-theme-dark .bmn,
	html.bcd-theme-dark .bmn-buy{
		background:rgba(18,22,19,.95); border-top-color:rgba(255,255,255,.10);
	}
	html.bcd-theme-dark .bmn-i{ color:#9aa398; }
	html.bcd-theme-dark .bmn-i.is-on{ color:#8fd3b0; }
	html.bcd-theme-dark .bmn-buy-amt{ color:#f2f4ef; }
	html.bcd-theme-dark .bmn-badge{ border-color:#121613; }
}