/* ════════════════════════════════════════════════════════════════════════════
 * topbar.css — the unified slim sticky top bar (partials/_topbar.html).
 * Loaded LAST and scoped entirely under .icms-topbar, so the
 * 17 legacy stylesheets and their !important wars can never touch it. Pages
 * without a .icms-topbar element (landing, admin) are unaffected.
 * ══════════════════════════════════════════════════════════════════════════*/

.icms-topbar {
	position: sticky;
	top: 0;
	z-index: 120; /* above page content, far below #welcomeModal/auth (9000) */
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 20px;
	min-height: 52px;
	background: var(--surface-card, #ffffff);
	border-bottom: 1px solid var(--ink-200, #e2e8f0);
	box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ── Brand (single line — no tagline bloat) ────────────────────────────────── */
.icms-topbar__brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	flex-shrink: 0;
	min-width: 0;
}
.icms-topbar__mark {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--gold-50, #fdf9f2);
	border: 1px solid var(--gold-300, #efd4a0);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.icms-topbar__name {
	color: var(--ink-900, #0f172a);
	font-family: var(--font-display, 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif);
	font-size: 15.5px;
	font-weight: 800;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.icms-topbar__name b { color: var(--gold-700, #92610f); font-weight: 800; }
.icms-topbar__sub {
	color: var(--ink-500, #64748b);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	border-left: 1px solid var(--ink-200, #e2e8f0);
	padding-left: 10px;
	margin-left: 2px;
}

/* ── Module links — the actual top nav ─────────────────────────────────────── */
.icms-topbar__links {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	/* Safety net: if the bar ever runs short of room before the burger
	   breakpoint kicks in, the nav clips rather than overlapping the right
	   cluster (the old crowding bug). */
	overflow: hidden;
}
.icms-topbar__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ink-600, #475569);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 8px;
	white-space: nowrap;
	transition: background 0.14s ease, color 0.14s ease;
}
.icms-topbar__linkbtn {
	border: 0;
	background: transparent;
	font-family: inherit;
	cursor: pointer;
}
.icms-topbar__link i { font-size: 12px; color: var(--ink-400, #94a3b8); transition: color 0.14s ease; }
.icms-topbar__link:hover { background: var(--ink-100, #eef2f7); color: var(--ink-900, #0f172a); }
.icms-topbar__link:hover i { color: var(--gold-600, #b07d1f); }
/* Active tab keeps the brand gold, on the LIGHT gold ramp — #fbbf24 as text on
   white is ~1.7:1 and unreadable, so the pill is gold-100 fill + gold-700 ink. */
.icms-topbar__link.is-active {
	background: var(--gold-100, #fbf2e3);
	color: var(--gold-700, #92610f);
}
.icms-topbar__link.is-active i { color: var(--gold-700, #92610f); }

/* ── All-Access Bundle CTA (always visible — never collapses into the burger) ─
   Rendered OUTSIDE .icms-topbar__links (see partials/_topbar.html) so it shows
   in every workspace. Gold-filled pill so it reads as the promo/CTA it is,
   distinct from the neutral module tabs and the neutral Prices button. */
.icms-topbar__bundle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	color: var(--gold-700, #92610f);
	background: var(--gold-100, #fbf2e3);
	border: 1px solid var(--gold-300, #efd4a0);
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	padding: 7px 14px;
	border-radius: 999px;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.icms-topbar__bundle > i { font-size: 12px; color: var(--gold-600, #b07d1f); }
.icms-topbar__bundle:hover {
	background: var(--gold-200, #f6e4c0);
	border-color: var(--gold-400, #e0b869);
	color: var(--gold-800, #7a5312);
}

/* ── Prices dropdown (always visible — never collapses into the burger) ─────── */
/* Stretch the wrapper to the bar's full height so the panel's `top: 100%`
   anchors to the bar's bottom edge (not the centered button), regardless of
   how tall the right cluster makes the bar. */
.icms-topbar__prices { position: relative; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; }
.icms-topbar__pricesbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ink-600, #475569);
	background: var(--ink-50, #f8fafc);
	border: 1px solid var(--ink-200, #e2e8f0);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 12px;
	border-radius: 999px;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.icms-topbar__pricesbtn > i:first-child { font-size: 12px; color: var(--gold-600, #b07d1f); }
.icms-topbar__pricescaret { display: inline-block; font-size: 10px; opacity: 0.85; transition: transform 0.16s ease; }
.icms-topbar__pricesbtn:hover,
.icms-topbar__prices.open .icms-topbar__pricesbtn {
	background: var(--gold-100, #fbf2e3);
	color: var(--gold-700, #92610f);
	border-color: var(--gold-300, #efd4a0);
}
.icms-topbar__prices.open .icms-topbar__pricescaret { transform: rotate(180deg); }

/* Compact by design (2026-07): tight row/group rhythm everywhere, the four
   groups flow into TWO columns on desktop, and a viewport max-height keeps
   the panel scrollable rather than off-screen on short displays. */
.icms-topbar__prices-menu {
	display: none;
	box-sizing: border-box;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 200; /* above page content, below #welcomeModal/auth (9000) */
	min-width: 300px;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 90px);
	overflow-y: auto;
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: 12px;
	box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.04));
	padding: 10px 12px;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.icms-topbar__prices.open .icms-topbar__prices-menu {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 16px;
	row-gap: 6px;
}
/* Two columns once there's room — halves the panel height on desktop. */
@media (min-width: 769px) {
	.icms-topbar__prices.open .icms-topbar__prices-menu {
		grid-template-columns: 1fr 1fr;
		min-width: 520px;
	}
}
.icms-prices-group {
	padding-top: 6px;
	border-top: 1px solid var(--ink-100, #eef2f7);
}
/* First group in each column shouldn't draw a divider — on desktop that's
   the first TWO groups (one per column). */
.icms-prices-group:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 769px) {
	.icms-prices-group:nth-child(2) { border-top: 0; padding-top: 0; }
}
.icms-prices-head {
	color: var(--gold-700, #92610f);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 3px;
}
.icms-prices-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
}
.icms-prices-name { color: var(--ink-900, #0f172a); font-size: 12px; font-weight: 700; flex: 0 0 78px; }
.icms-prices-units { color: var(--ink-500, #64748b); font-size: 11px; font-weight: 600; flex: 1 1 auto; }
.icms-prices-amt {
	color: var(--gold-700, #92610f);
	background: var(--gold-50, #fdf9f2);
	border: 1px solid var(--gold-300, #efd4a0);
	font-size: 11px;
	font-weight: 800;
	padding: 1.5px 8px;
	border-radius: 999px;
	white-space: nowrap;
	flex: 0 0 auto;
}
.icms-prices-foot {
	grid-column: 1 / -1;
	margin-top: 2px;
	padding-top: 6px;
	border-top: 1px solid var(--ink-100, #eef2f7);
	color: var(--ink-500, #64748b);
	font-size: 10px;
	line-height: 1.45;
}
/* When the module nav collapses into the burger (≤768px) the Prices button
   shifts to the left of the bar, so anchoring the panel to the button's right
   edge would push it off-screen. Pin it to the viewport's right edge instead
   (position:fixed) so it stays fully visible at every width. Its top is set to
   the bar's actual bottom by icmsTogglePrices() — the value here is a fallback. */
@media (max-width: 768px) {
	.icms-topbar__prices-menu {
		position: fixed;
		top: 62px;
		right: 12px;
		left: auto;
		width: 320px;
		min-width: 0;
		max-width: calc(100vw - 24px);
	}
}
@media (max-width: 560px) {
	.icms-topbar__priceslabel { display: none; }     /* icon + caret only on phones */
	.icms-topbar__pricesbtn { padding: 7px 10px; }
	/* Phone menu: plan name + price carry the message — drop the middle
	   "N credits" column and tighten the rhythm so the panel stays short. */
	.icms-prices-units { display: none; }
	.icms-prices-row { padding: 1px 0; }
	.icms-prices-name { flex: 1 1 auto; }
	.icms-prices-head { margin-bottom: 2px; }
	.icms-prices-foot { font-size: 9.5px; }
}

/* ── Right cluster: credits · user · theme · sign out ──────────────────────── */
.icms-topbar__right {
	display: flex !important;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
	flex-wrap: nowrap !important;
}
/* The right cluster reuses the bare .header-right class (JS-injection
   contract), so the OLD fat-header CSS still targets it — v4.css gives it
   a top border + padding ("row below the title" look) and ui-enhance.css
   makes it width:100% centered + wrapping under 768px, which overflows the
   bar off-screen on phones. Out-specific those leaks here. */
.icms-topbar .header-right {
	width: auto !important;
	flex: 0 0 auto !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	justify-content: flex-end !important;
	margin-left: auto !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
	gap: 6px !important;
}
.icms-topbar .quota-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: var(--gold-50, #fdf9f2) !important;
	border: 1px solid var(--gold-300, #efd4a0) !important;
	/* Labels (Docs/Exam/Tools/Notes) were --gold-700 (#92610f) — muted brown-gold
	   on the pale gold pill read as low-contrast. Dark slate is far more legible
	   (~9:1) while the gold coin + border keep the branded-chip look. */
	color: var(--ink-700, #334155) !important;
	font-size: 12px !important;
	font-weight: 700;
	padding: 5px 12px !important;
	border-radius: 999px !important;
	min-height: 32px !important;
	white-space: nowrap;
}
/* !important + webkit-text-fill guards fight the dark-theme quota-pill leaks in
   v4.css (gold #fbbf24 on this light bar → ~1.6:1). Keep both properties.
   The guard must cover BOTH the label spans (Docs:/Exam:/…) and the strong
   numbers — v4.css paints them via -webkit-text-fill-color, which overrides
   `color` no matter how specific our rule is, so we must restate the fill. The
   coin `i` is left out on purpose so it keeps its gold. */
.icms-topbar .quota-pill i { color: var(--gold-600, #b07d1f) !important; font-size: 11px; }
.icms-topbar .quota-pill span,
.icms-topbar .quota-pill strong {
	color: var(--ink-900, #0f172a) !important;
	-webkit-text-fill-color: var(--ink-900, #0f172a) !important;
}
.icms-topbar .quota-pill--modules {
	gap: 8px;
}
.icms-topbar .quota-pill__sep {
	width: 1px;
	height: 14px;
	background: var(--gold-300, #efd4a0);
	display: inline-block;
}
/* The pill is a <button> (it opens the account menu), so it also has to
   neutralise the UA button font and text alignment — everything else it
   already had as a div still applies. */
.icms-topbar .user-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	background: var(--ink-50, #f8fafc) !important;
	border: 1px solid var(--ink-200, #e2e8f0) !important;
	border-radius: 999px !important;
	padding: 2px 10px 2px 8px !important;
	height: 32px !important;          /* hard cap — the pill sets the bar height */
	min-height: 0 !important;
	box-sizing: border-box !important;
	cursor: pointer;
	max-width: 210px;
	overflow: hidden;
	font-family: inherit;
	text-align: left;
}
.icms-topbar .user-pill:hover { background: var(--ink-100, #eef2f7) !important; }
.icms-topbar .user-pill > i { color: var(--gold-600, #b07d1f); font-size: 16px; }
/* Dedicated avatar slot inside the pill — always shows SOMETHING: the real
   avatar image when users.avatar_url is set, initials otherwise, and the
   generic icon only before the session resolves. Rendered/updated by
   icmsRenderTopbarAvatar() (inline in partials/_topbar.html). */
.icms-topbar .user-pill-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.icms-topbar .user-pill-avatar i { color: var(--gold-600, #b07d1f); font-size: 16px; }
.icms-topbar .user-pill-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
.icms-topbar .user-pill-initials {
	width: 100%;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gold-100, #fbf2e3);
	border: 1px solid var(--gold-300, #efd4a0);
	border-radius: 50%;
	color: var(--gold-700, #92610f);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
	box-sizing: border-box;
}
.icms-topbar .user-pill-info { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.icms-topbar .user-pill-name {
	/* -webkit-text-fill-color guard mirrors the quota-pill fix: v4.css paints
	   .user-pill-name gold via -webkit-text-fill-color !important, which wins
	   over `color` alone and left the name unreadable gold-on-white. */
	color: var(--ink-900, #0f172a) !important;
	-webkit-text-fill-color: var(--ink-900, #0f172a) !important;
	font-size: 11.5px; font-weight: 700; line-height: 1.15;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icms-topbar .user-pill-email {
	/* Same guard again: v4.css fills this white (rgba(255,255,255,.45)) for the
	   old dark bar, which rendered it invisible on white at >1500px — the only
	   width where the email line is shown at all. */
	color: var(--ink-500, #64748b) !important;
	-webkit-text-fill-color: var(--ink-500, #64748b) !important;
	font-size: 9.5px; line-height: 1.15;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icms-topbar__iconbtn {
	display: inline-flex !important;   /* defeats the legacy .icms-libnav-btn hide */
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--ink-50, #f8fafc);
	border: 1px solid var(--ink-200, #e2e8f0);
	color: var(--ink-600, #475569);
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	transition: background 0.14s ease, color 0.14s ease;
}
.icms-topbar__iconbtn:hover { background: var(--ink-100, #eef2f7); color: var(--gold-700, #92610f); }
/* ── Account menu ───────────────────────────────────────────────────────────
   The user pill is the trigger for a dropdown carrying the signed-in identity,
   My profile and Sign out. Ported from the admin bar's .admin-hdr-menu
   (css/admin-v2.css §6) so the two bars behave identically.

   Sign out used to be a standing .icms-topbar__out button here. Removing it
   also frees ~40px in the right cluster, which is the tightest part of the
   heavy bars (Docs / Assessments / Tool Dev). */
.icms-usermenu { position: relative; display: inline-block; flex-shrink: 0; }

.icms-usermenu__caret {
	font-size: 9px;
	color: var(--ink-400, #94a3b8);
	flex-shrink: 0;
	transition: transform 0.14s ease;
}
.icms-usermenu.is-open .icms-usermenu__caret { transform: rotate(180deg); }

/* Open state flips the trigger dark. .user-pill-name / .user-pill-email pin
   BOTH color and -webkit-text-fill-color with !important (see above — they
   have to beat v4.css), so the inverted state has to override both, at
   higher specificity, with !important. `color` alone leaves the name
   slate-on-slate and invisible. */
.icms-usermenu.is-open .user-pill {
	background: var(--ink-900, #0f172a) !important;
	border-color: var(--ink-900, #0f172a) !important;
}
.icms-usermenu.is-open .user-pill .user-pill-name {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}
.icms-usermenu.is-open .user-pill .user-pill-email {
	color: rgba(255, 255, 255, 0.66) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.66) !important;
}
.icms-usermenu.is-open .icms-usermenu__caret { color: rgba(255, 255, 255, 0.75); }

.icms-usermenu__panel {
	display: none;
	box-sizing: border-box;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 200;   /* matches the Prices panel — above page content, below auth (9000) */
	min-width: 272px;
	max-width: calc(100vw - 24px);
	padding: 6px;
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: 12px;
	box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.04));
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.icms-usermenu.is-open .icms-usermenu__panel {
	display: block;
	animation: icmsUserMenuIn 0.14s ease;
}
@keyframes icmsUserMenuIn {
	from { opacity: 0; transform: translateY(-5px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Identity row — the one place the signed-in address is always legible (the
   pill drops the email below 1500px and the whole info block below 980px). */
.icms-usermenu__id {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px 11px;
}
.icms-usermenu__idavatar {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--gold-100, #fbf2e3);
}
.icms-usermenu__idavatar i { color: var(--gold-600, #b07d1f); font-size: 20px; }
.icms-usermenu__idavatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* The initials span is shared with the pill, so it only needs resizing here. */
.icms-usermenu__idavatar .user-pill-initials { font-size: 14px; }
.icms-usermenu__idtext { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.icms-usermenu__idname {
	color: var(--ink-900, #0f172a);
	-webkit-text-fill-color: var(--ink-900, #0f172a);
	font-size: 13.5px;
	font-weight: 800;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icms-usermenu__idmail {
	color: var(--ink-500, #64748b);
	-webkit-text-fill-color: var(--ink-500, #64748b);
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.icms-usermenu__divider { height: 1px; background: var(--ink-100, #eef2f7); margin: 4px 4px; }

.icms-usermenu__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 12px;
	background: transparent;
	border: 0;
	border-radius: 9px;
	color: var(--ink-900, #0f172a);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.14s ease;
}
.icms-usermenu__item:hover,
.icms-usermenu__item:focus-visible { background: var(--ink-50, #f8fafc); }
.icms-usermenu__item > i {
	flex: 0 0 18px;
	width: 18px;
	font-size: 14px;
	text-align: center;
	color: var(--ink-400, #94a3b8);
}
.icms-usermenu__itemtext { display: flex; flex-direction: column; min-width: 0; }
.icms-usermenu__title { font-size: 13px; font-weight: 700; line-height: 1.25; }
.icms-usermenu__sub { font-size: 11px; color: var(--ink-500, #64748b); margin-top: 2px; }

/* Sign out keeps the red affordance the standing button had. */
.icms-usermenu__item--danger { color: #b91c1c; }
.icms-usermenu__item--danger > i { color: var(--danger-500, #dc2626); }
.icms-usermenu__item--danger .icms-usermenu__sub { color: rgba(185, 28, 28, 0.72); }
.icms-usermenu__item--danger:hover,
.icms-usermenu__item--danger:focus-visible { background: #fef2f2; }

/* Widgets other scripts inject into .header-right (bell, refer button) —
   clamp them to the bar's 32px rhythm so nothing inflates the height, and
   repaint them for the white bar. The bell is built by icms-app-extras.js and
   still carries dark-theme colours from icms-extras.css (white-alpha fill,
   near-white glyph) — invisible on white. Overridden HERE, scoped to the bar,
   rather than in icms-extras.css, which other surfaces may still rely on. */
.icms-topbar .icms-notif-btn,
.icms-topbar .icms-notif-bell {
	width: 32px !important;
	height: 32px !important;
	min-height: 32px !important;
	border-radius: 999px !important;
	background: var(--ink-50, #f8fafc);
	border: 1px solid var(--ink-200, #e2e8f0);
	color: var(--ink-600, #475569);
}
.icms-topbar .icms-notif-btn:hover,
.icms-topbar .icms-notif-bell:hover {
	background: var(--gold-100, #fbf2e3);
	border-color: var(--gold-300, #efd4a0);
	color: var(--gold-700, #92610f);
}
/* The unread badge rings itself with the bar colour to punch out of the icon. */
.icms-topbar .icms-notif-badge { border-color: var(--surface-card, #ffffff); }
.icms-topbar .icms-topbar__right > * {
	max-height: 32px;
}
/* (Removed 2026-07: the injected #referralsPill and the legacy
   .icms-refer-btn styling. The pill duplicated the permanent
   'Referrals' nav link, and no JS ever created .icms-refer-btn.) */

/* ── Burger (mobile only) ──────────────────────────────────────────────────── */
.icms-topbar__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--ink-50, #f8fafc);
	border: 1px solid var(--ink-200, #e2e8f0);
	color: var(--gold-700, #92610f);
	font-size: 15px;
	cursor: pointer;
	padding: 0;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
/* Trim the decorative bits (module subtitle + the user's secondary email line)
   on anything but a very wide desktop, so the nav + right cluster never crowd
   into each other on the heavier bars (exam adds a "My Assessments" button, a
   "Review" button + the injected bell — together they need ~1500px to sit
   beside the full inline nav). */
@media (max-width: 1500px) {
	.icms-topbar__sub { display: none; }
	.icms-topbar .user-pill-email { display: none; }
	.icms-topbar .user-pill { max-width: 130px; }
	/* Tighten the bar (NOT a burger collapse) so all five module links stay
	   visible inline beside the dense right cluster on laptop-width screens. */
	.icms-topbar { gap: 10px; padding: 8px 14px; }
	.icms-topbar__link { padding: 7px 9px; gap: 6px; }
	.icms-topbar__links { gap: 0; }
	/* Compact the dense credits pill so the heavy bars (Docs / Assessments /
	   Tool Dev) clear room for the full inline nav on common laptops. */
	.icms-topbar .quota-pill { padding: 5px 9px !important; gap: 5px; }
	.icms-topbar .quota-pill--modules { gap: 6px; }
}
/* ── Mid-width desktop/laptop steps (1450 → 1280 → 1100 → 980) ──────────────
   These keep ALL FIVE module links (incl. the tail "Referrals") visible with
   their text labels on every desktop width down to the 768px burger point.
   Strategy per user preference: shrink labels + compact the credits pill —
   never an early burger, never icon-only tabs. */
@media (max-width: 1450px) {
	/* Heavy bars (Docs / Assessments / Tool Dev) carry a logged-in right
	   cluster of ~580px (4-value credits pill + injected Referrals pill +
	   bell + the account pill) — the full inline nav needs the credits
	   pill compacted (coin + Docs value) and the Prices label gone a step
	   before the shared ≤1280px trims. */
	.icms-topbar--has-extra .quota-pill--modules span:not(:first-of-type),
	.icms-topbar--has-extra .quota-pill--modules .quota-pill__sep { display: none; }
	.icms-topbar--has-extra .icms-topbar__priceslabel { display: none; }
	.icms-topbar--has-extra .icms-topbar__pricesbtn { padding: 7px 10px; }
	.icms-topbar--has-extra .icms-topbar__bundlelabel { display: none; }
	.icms-topbar--has-extra .icms-topbar__bundle { padding: 7px 10px; }
}
@media (max-width: 1280px) {
	.icms-topbar__priceslabel { display: none; }     /* Prices → icon + caret */
	.icms-topbar__pricesbtn { padding: 7px 10px; }
	.icms-topbar__bundlelabel { display: none; }     /* Bundle → icon only */
	.icms-topbar__bundle { padding: 7px 10px; }
	.icms-topbar__link { padding: 6px 9px; font-size: 12.5px; gap: 5px; }
	.icms-topbar__links { gap: 2px; }
	/* The 4-value credits pill is ~286px — the single widest thing in the bar.
	   Compact it to coin icon + the first (Docs) value here, or the tail nav
	   links lose the space race long before the next breakpoint. */
	.icms-topbar .quota-pill--modules span:not(:first-of-type),
	.icms-topbar .quota-pill--modules .quota-pill__sep { display: none; }
	.icms-topbar .quota-pill { font-size: 11px !important; padding: 5px 8px !important; gap: 5px; }
	.icms-topbar .quota-pill--modules { gap: 5px; }
	/* Heavy workspaces (Docs / Assessments / Tool Dev) inject extra chrome
	   into the right cluster once logged in (bell + Referrals pill), so on
	   those bars the wordmark goes and the user pill collapses to the avatar
	   a step earlier than on the light bars (Notes / Referrals). */
	.icms-topbar--has-extra .icms-topbar__name { display: none; }
	.icms-topbar--has-extra .user-pill { max-width: 40px; padding: 2px !important; justify-content: center; }
	.icms-topbar--has-extra .user-pill-info { display: none; }
	/* Avatar-only pill has no room for the caret; the menu still opens on click. */
	.icms-topbar--has-extra .icms-usermenu__caret { display: none; }
}
@media (max-width: 1100px) {
	.icms-topbar { gap: 8px; }
	.icms-topbar .user-pill { max-width: 110px; }
	.icms-topbar--has-extra .user-pill { max-width: 40px; }
	.icms-topbar__link { padding: 6px 7px; font-size: 12px; gap: 4px; }
	.icms-topbar__links { gap: 0; }
}
@media (max-width: 980px) {
	/* Drop the brand wordmark (square mark stays) and collapse the user pill
	   to just the avatar so the five labelled tabs clear the right cluster —
	   including its injected extras (bell / Referrals / Review) — all the way
	   down to the 768px burger point. */
	.icms-topbar__name { display: none; }
	.icms-topbar { gap: 8px; padding: 8px 12px; }
	.icms-topbar__link { padding: 5px 6px; font-size: 11.5px; }
	.icms-topbar .user-pill { max-width: 40px; padding: 2px !important; justify-content: center; }
	.icms-topbar .user-pill-info { display: none; }
	.icms-usermenu__caret { display: none; }
}
@media (max-width: 620px) {
	.icms-topbar .quota-pill--modules span:not(:first-of-type),
	.icms-topbar .quota-pill--modules .quota-pill__sep {
		display: none;
	}
}
/* Collapse the module links into the burger ONLY on phones / small screens.
   On computers and laptops every link stays visible inline (the ≤1500px block
   above just tightens spacing). The module links stay fully reachable in the
   dropdown below 768px. */
@media (max-width: 768px) {
	.icms-topbar { gap: 10px; padding: 8px 14px; }
	.icms-topbar__burger { display: inline-flex; }
	.icms-topbar__links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		overflow: visible;          /* dropdown must not clip (base sets hidden) */
		background: var(--surface-card, #ffffff);
		border-bottom: 1px solid var(--ink-200, #e2e8f0);
		box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.04));
		padding: 8px 12px 12px;
	}
	.icms-topbar__links.open { display: flex; }
	.icms-topbar__link { padding: 11px 12px; font-size: 14px; }
	/* Same treatment as the Prices panel: the sticky bar is a containing block
	   the phone viewport can clip, so the account panel goes fixed and
	   icmsAlignTopbarPanel() sets its top from the bar's real bottom. */
	.icms-usermenu__panel {
		position: fixed;
		top: 60px;
		right: 12px;
		left: auto;
		min-width: 0;
		width: min(300px, calc(100vw - 24px));
	}
}
@media (max-width: 560px) {
	/* Drop the brand wordmark (keep the square mark) — frees ~110px so the
	   right cluster, which never shrinks, stops crowding the account pill. */
	.icms-topbar__name { display: none; }
	.icms-topbar .quota-pill span { display: none; }     /* coin icon only */
	.icms-topbar .quota-pill { padding: 5px 9px !important; }
	/* Pill collapses to just the avatar — keep it centred and unclipped. */
	.icms-topbar .user-pill { max-width: 40px; padding: 2px !important; justify-content: center; }
	.icms-topbar .user-pill-info { display: none; }
}
/* Tightest phones (≤440px): trim the lowest-priority chrome so the essential
   set — brand mark · burger (nav) · notification bell · account pill — always
   fits. Sign out now lives inside the account menu, so it can no longer be the
   item that gets clipped (the bug this block was written for). Referrals lives
   in the burger nav at this width. */
@media (max-width: 440px) {
	.icms-topbar { gap: 8px; padding: 8px 10px; }
	.icms-topbar__iconbtn:not(.icms-notif-btn):not(.icms-notif-bell):not(.icms-theme-toggle) { display: none !important; }
	.icms-topbar .quota-pill { display: none !important; }
	/* Belt-and-braces: the account pill is the way out, so it never shrinks. */
	.icms-usermenu { flex-shrink: 0; }
}

/* Heavy workspaces (Docs / Assessments / Tool Dev) carry a wider right cluster
   (4-value credits pill + injected Referrals/bell/Review). They no longer collapse
   the nav early — the ≤1500px spacing trims above keep all links inline on laptops,
   and the shared ≤768px burger handles phones. */