/* ════════════════════════════════════════════════════════════════════════════
 * icms-ui.css — the InteligentCMS design system (2026-08-08)
 * ────────────────────────────────────────────────────────────────────────────
 * Loaded LAST in partials/_head.html, after every legacy sheet, so its rules
 * win the cascade without needing !important on anything that is not fighting
 * an existing !important.
 *
 * WHAT THIS FILE OWNS
 *   1. The three-colour brand contract (ink / gold / green) + shared metrics
 *   2. .iui-* component primitives (button, card, field, table, alert, badge,
 *      empty, skeleton, progress, dialog)
 *   3. The app shell: .icms-sidebar + the slim .icms-topbar layout
 *   4. Token-level restyling of the SHARED wizard layer already in
 *      css/icms-forms.css (.icms-form, .icms-steps, .icms-pay-summary) —
 *      restyled in place, deliberately NOT forked
 *   5. The credit-gate visibility contract ([data-credit-gate])
 *
 * COLOUR RULE — three brand colours, and only three:
 *   ink   #0f172a   text, sidebar surface, headings
 *   gold  #c9962f   primary CTA, active nav, credits
 *   green #15803d   success, paid, completed
 * Red and amber are STATE colours (error / warning). They never decorate.
 * Nothing in this file may introduce a fourth brand hue, and no rule here
 * should carry a raw hex that is not one of the tokens below.
 *
 * NAMESPACE — new components are .iui-* or .icms-sidebar/.icms-shell so that
 * no legacy selector in the ~15 sheets loaded before this one can reach them.
 * That is the same containment strategy that made css/topbar.css safe.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   0. TOKENS
   Extends the ramp already declared in css/icms-modern.css §Design Tokens —
   only the missing pieces are added here so there is still ONE ink ramp and
   ONE gold ramp in the app.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
	/* ── Brand colour 3: green. #16a34a was already the most-used green in the
	   tree (34 occurrences), so this promotes an existing value rather than
	   introducing a new hue. The 600 step is the text-safe one: #15803d on
	   white is 4.9:1, #16a34a is only 3.0:1 and fails AA for body text. ── */
	--ok-700: #166534;
	--ok-600: #15803d;
	--ok-500: #16a34a;
	--ok-100: #dcfce7;
	--ok-50:  #f0fdf4;

	/* ── State colours. NOT brand colours — error and warning only. ── */
	--warn-600: #b45309;
	--warn-100: #fef3c7;
	--err-600:  #b91c1c;
	--err-500:  #dc2626;
	--err-100:  #fee2e2;

	/* ── One radius scale. --radius (12px) is the default for everything;
	   the others exist for pills and for the two large surfaces. ── */
	--iui-r:      12px;
	--iui-r-sm:   8px;
	--iui-r-lg:   16px;
	--iui-r-pill: 999px;

	/* ── Shell metrics ── */
	--iui-sidebar-w: 248px;
	--iui-topbar-h:  56px;

	/* ── Focus ring. One ring, used by every interactive element. ── */
	--iui-focus: 0 0 0 3px rgba(201, 150, 47, .45);

	/* ── Motion ── */
	--iui-t: .16s cubic-bezier(.2, .7, .2, 1);
}

/* ════════════════════════════════════════════════════════════════════════════
   1. GLOBAL FOCUS + MOTION
   ══════════════════════════════════════════════════════════════════════════ */

/* One visible focus indicator for the whole app. :focus-visible only, so
   mouse users never see a ring but keyboard users always do. */
.iui-btn:focus-visible,
.icms-sidebar a:focus-visible,
.icms-sidebar button:focus-visible,
.icms-topbar a:focus-visible,
.icms-topbar button:focus-visible,
.iui-field input:focus-visible,
.iui-field select:focus-visible,
.iui-field textarea:focus-visible,
.iui-dialog button:focus-visible {
	outline: 2px solid var(--gold-700, #92610f);
	outline-offset: 2px;
	box-shadow: var(--iui-focus);
}

@media (prefers-reduced-motion: reduce) {
	.iui-btn,
	.iui-card,
	.icms-sidebar,
	.icms-sidebar__scrim,
	.iui-skeleton {
		transition: none !important;
		animation: none !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════════
   2. BUTTON — .iui-btn
   Four variants. Primary is gold because gold is the brand's action colour;
   secondary is an ink outline; ghost is quiet; danger is the state red and is
   reserved for destructive actions.
   ══════════════════════════════════════════════════════════════════════════ */
.iui-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--iui-r);
	font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--iui-t), border-color var(--iui-t), color var(--iui-t);
}
.iui-btn i { font-size: 14px; }
.iui-btn:disabled,
.iui-btn[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	pointer-events: none;
}

/* Text on gold is INK, not white. White on --gold-500 measures 2.66:1, which
   fails WCAG AA for 14px text; ink-900 on the same fill is 7.9:1. Gold is a
   mid-tone, so it behaves like a light surface and needs dark text — the one
   place where "primary button = white text" is the wrong instinct. */
.iui-btn--primary {
	background: var(--gold-500, #c9962f);
	border-color: var(--gold-500, #c9962f);
	color: var(--ink-900, #0f172a);
}
.iui-btn--primary:hover {
	background: var(--gold-400, #e0b662);
	border-color: var(--gold-400, #e0b662);
}

.iui-btn--secondary {
	background: var(--surface-card, #fff);
	border-color: var(--ink-900, #0f172a);
	color: var(--ink-900, #0f172a);
}
.iui-btn--secondary:hover { background: var(--ink-900, #0f172a); color: var(--gold-400, #e0b662); }

.iui-btn--ghost {
	background: transparent;
	border-color: var(--ink-200, #e2e8f0);
	color: var(--ink-700, #334155);
}
.iui-btn--ghost:hover { background: var(--ink-50, #f8fafc); border-color: var(--ink-300, #cbd5e1); }

.iui-btn--danger {
	background: var(--surface-card, #fff);
	border-color: var(--err-500);
	color: var(--err-600);
}
.iui-btn--danger:hover { background: var(--err-500); color: #fff; }

.iui-btn--block { width: 100%; }
.iui-btn--sm { min-height: 34px; padding: 7px 12px; font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════════════
   3. CARD — .iui-card
   ══════════════════════════════════════════════════════════════════════════ */
.iui-card {
	background: var(--surface-card, #fff);
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--iui-r-lg);
	padding: 20px;
	box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, .04));
}
.iui-card__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
}
.iui-card__title {
	margin: 0;
	font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink-900, #0f172a);
}
.iui-card__sub {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-500, #64748b);
}
.iui-card__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--iui-r-sm);
	background: var(--gold-50, #fdf9f2);
	color: var(--gold-700, #92610f);
	font-size: 16px;
}
.iui-card__icon--ok { background: var(--ok-50); color: var(--ok-600); }
.iui-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

/* ════════════════════════════════════════════════════════════════════════════
   4. FIELD — .iui-field
   ══════════════════════════════════════════════════════════════════════════ */
.iui-field { display: block; margin: 0 0 14px; }
.iui-field > label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-700, #334155);
}
.iui-field input[type="text"],
.iui-field input[type="email"],
.iui-field input[type="tel"],
.iui-field input[type="number"],
.iui-field input[type="password"],
.iui-field select,
.iui-field textarea {
	width: 100%;
	min-height: 42px;
	padding: 10px 12px;
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--iui-r);
	background: var(--surface-card, #fff);
	color: var(--ink-900, #0f172a);
	font-family: inherit;
	font-size: 14px;
	transition: border-color var(--iui-t);
}
.iui-field input:hover,
.iui-field select:hover,
.iui-field textarea:hover { border-color: var(--ink-300, #cbd5e1); }
.iui-field__hint {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--ink-500, #64748b);
}

/* ════════════════════════════════════════════════════════════════════════════
   5. TABLE — .iui-table
   Scoped to the class, never to bare `table`. css/print.css was scoped for
   exactly this reason on 2026-08-03; do not reintroduce element selectors.
   ══════════════════════════════════════════════════════════════════════════ */
.iui-table-wrap { width: 100%; overflow-x: auto; }
.iui-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}
.iui-table th,
.iui-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--ink-200, #e2e8f0);
}
.iui-table th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-500, #64748b);
	background: var(--ink-50, #f8fafc);
}
.iui-table tbody tr:hover { background: var(--ink-50, #f8fafc); }

/* ════════════════════════════════════════════════════════════════════════════
   6. ALERT — .iui-alert
   ══════════════════════════════════════════════════════════════════════════ */
.iui-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--iui-r);
	background: var(--ink-50, #f8fafc);
	color: var(--ink-700, #334155);
	font-size: 13.5px;
	line-height: 1.5;
}
.iui-alert i { margin-top: 2px; }
.iui-alert--ok    { background: var(--ok-50);    border-color: var(--ok-100);   color: var(--ok-700); }
.iui-alert--warn  { background: var(--warn-100); border-color: var(--warn-100); color: var(--warn-600); }
.iui-alert--error { background: var(--err-100);  border-color: var(--err-100);  color: var(--err-600); }

/* ════════════════════════════════════════════════════════════════════════════
   7. BADGE — .iui-badge
   ══════════════════════════════════════════════════════════════════════════ */
.iui-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--iui-r-pill);
	background: var(--ink-100, #eef2f7);
	color: var(--ink-700, #334155);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}
.iui-badge--gold { background: var(--gold-100, #fbf2e3); color: var(--gold-700, #92610f); }
.iui-badge--ok   { background: var(--ok-100);            color: var(--ok-700); }
.iui-badge--warn { background: var(--warn-100);          color: var(--warn-600); }

/* ════════════════════════════════════════════════════════════════════════════
   8. EMPTY STATE — .iui-empty
   ══════════════════════════════════════════════════════════════════════════ */
.iui-empty {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 40px 20px;
	text-align: center;
	color: var(--ink-500, #64748b);
}
.iui-empty__icon {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: var(--iui-r-pill);
	background: var(--ink-100, #eef2f7);
	color: var(--ink-400, #94a3b8);
	font-size: 19px;
}
.iui-empty__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-800, #1e293b);
}
.iui-empty__text { margin: 0; max-width: 42ch; font-size: 13.5px; line-height: 1.55; }

/* ════════════════════════════════════════════════════════════════════════════
   9. LOADING — .iui-skeleton / .iui-progress
   ══════════════════════════════════════════════════════════════════════════ */
.iui-skeleton {
	border-radius: var(--iui-r-sm);
	background: linear-gradient(90deg,
		var(--ink-100, #eef2f7) 25%,
		var(--ink-200, #e2e8f0) 37%,
		var(--ink-100, #eef2f7) 63%);
	background-size: 400% 100%;
	animation: iui-shimmer 1.3s ease-in-out infinite;
}
@keyframes iui-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
.iui-progress {
	height: 6px;
	border-radius: var(--iui-r-pill);
	background: var(--ink-100, #eef2f7);
	overflow: hidden;
}
.iui-progress__bar {
	height: 100%;
	border-radius: inherit;
	background: var(--gold-500, #c9962f);
	transition: width .3s var(--iui-t);
}

/* ════════════════════════════════════════════════════════════════════════════
   10. DIALOG — .iui-dialog
   ══════════════════════════════════════════════════════════════════════════ */
.iui-dialog {
	background: var(--surface-card, #fff);
	border-radius: var(--iui-r-lg);
	box-shadow: var(--shadow-xl, 0 20px 48px rgba(15, 23, 42, .12));
	padding: 22px;
	max-width: 520px;
	width: min(520px, calc(100vw - 32px));
}
.iui-dialog__title {
	margin: 0 0 6px;
	font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--ink-900, #0f172a);
}
.iui-dialog__sub { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-500, #64748b); }
.iui-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}

/* ════════════════════════════════════════════════════════════════════════════
   11. CREDIT GATE — the visibility contract
   ────────────────────────────────────────────────────────────────────────────
   js/app.js → icmsApplyCreditGate() sets data-credits="0" | "some" on the
   [data-credit-scope] wrapper. CSS does the showing and hiding, so there is
   exactly one rule deciding which CTA exists, and it cannot be half-applied
   by a JS error partway through.
   `display:none` (not visibility/opacity) is deliberate: it takes the hidden
   branch out of the tab order as well as out of the layout, which is what
   "the two must never compete" actually requires.
   ══════════════════════════════════════════════════════════════════════════ */
/* The rule only ever HIDES. It never sets a display value on the branch that
   stays, so each branch keeps whatever its own module gives it — the Documents
   cards are blocks, the Notes button rows are .icms-form-actions flex rows.
   Forcing `display:block` on the visible half would have flattened those rows.

   !important is required, not decorative: notes/css/notes.css and
   css/icms-forms.css load AFTER this sheet (module sheets are linked at the
   bottom of the body) and set `.icms-form-actions{display:flex!important}`,
   which beat a plain `display:none` and left BOTH branches on screen. This is
   the one rule in the app that must never fail open, so it matches. */
[data-credit-scope][data-credits="0"]    [data-credit-gate="generate"],
[data-credit-scope][data-credits="some"] [data-credit-gate="buy"],
/* Until the balance is known, neither branch shows — better a brief gap than
   flashing a Buy button at a trainer who has already paid. */
[data-credit-scope]:not([data-credits])  [data-credit-gate] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   12. APP SHELL — sidebar
   ────────────────────────────────────────────────────────────────────────────
   The sidebar is position:fixed and the body is padded by its width at
   >=1024px. .icms-topbar is position:sticky and .icms-app-container uses
   margin-left, so padding the body shifts BOTH correctly with no wrapper
   element — nothing in the existing DOM moves, so no JS selector breaks.

   Only ever visible for a signed-in user: body.ics-logged-in. index.php holds
   the guest landing and the workspace in ONE document, so keying off anything
   else would flash the sidebar over the landing page.
   ══════════════════════════════════════════════════════════════════════════ */
.icms-sidebar {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 130; /* above .icms-topbar (120), far below the auth modal (9000) */
	width: var(--iui-sidebar-w);
	display: none; /* opted in by body.ics-logged-in below */
	flex-direction: column;
	background: var(--ink-900, #0f172a);
	color: var(--ink-300, #cbd5e1);
	font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
	overflow-y: auto;
	overscroll-behavior: contain;
}
body.ics-logged-in .icms-sidebar { display: flex; }

/* ── Brand ── */
.icms-sidebar__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	text-decoration: none;
	flex: 0 0 auto;
}
.icms-sidebar__mark {
	width: 30px;
	height: 30px;
	border-radius: var(--iui-r-sm);
	display: grid;
	place-items: center;
	background: rgba(201, 150, 47, .16);
	flex: 0 0 auto;
}
.icms-sidebar__name {
	font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
	font-size: 15.5px;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
}
.icms-sidebar__name b { color: var(--gold-400, #e0b662); font-weight: 800; }

/* ── Groups ── */
.icms-sidebar__nav { flex: 1 1 auto; padding: 4px 10px 10px; }
.icms-sidebar__grouplabel {
	padding: 14px 8px 6px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	/* ink-400, not ink-500: at 10.5px this is small text and needs 4.5:1.
	   #64748b on the ink-900 sidebar measures 3.75:1 and fails; #94a3b8 is
	   6.6:1. */
	color: var(--ink-400, #94a3b8);
}
.icms-sidebar__link {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	margin: 1px 0;
	border-radius: var(--iui-r-sm);
	color: var(--ink-300, #cbd5e1);
	font-size: 13.5px;
	/* Labels are allowed to wrap — "Summative Tools (contracted tool developers
	   only)" runs to three lines at this width and must still read as one item
	   rather than a stack of loose text. Do not add white-space:nowrap here. */
	line-height: 1.3;
	font-weight: 600;
	text-decoration: none;
	background: none;
	border: 0;
	width: 100%;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	transition: background var(--iui-t), color var(--iui-t);
}
.icms-sidebar__link i {
	width: 16px;
	font-size: 15px;
	text-align: center;
	flex: 0 0 auto;
	color: var(--ink-400, #94a3b8);
	transition: color var(--iui-t);
}
.icms-sidebar__link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.icms-sidebar__link:hover i { color: var(--gold-400, #e0b662); }
.icms-sidebar__link.is-active {
	background: rgba(201, 150, 47, .16);
	color: #fff;
	font-weight: 700;
}
.icms-sidebar__link.is-active i { color: var(--gold-400, #e0b662); }
/* Active marker — a gold bar on the leading edge, so the current page is
   identifiable without relying on the background tint alone. */
.icms-sidebar__link.is-active {
	box-shadow: inset 3px 0 0 var(--gold-500, #c9962f);
}

/* ── Paused module (2026-09-12) ──────────────────────────────────────────────
   A module an admin has taken offline for maintenance keeps its link: a trainer
   holding credits for it needs to be able to open it and read WHY, and hiding
   the entry would read as "the product is gone". It is dimmed and carries a
   pill instead.

   The pill sits at the end of a flex row whose label is allowed to wrap (see
   the note on .icms-sidebar__link above), so it is margin-left:auto rather than
   absolutely positioned — a three-line label must push it down, not overlap it. */
.icms-sidebar__link.is-paused          { opacity: .62; }
.icms-sidebar__link.is-paused:hover    { opacity: 1; }
.icms-sidebar__pill {
	margin-left: auto;
	flex: 0 0 auto;
	align-self: flex-start;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(245, 158, 11, .18);
	border: 1px solid rgba(245, 158, 11, .34);
	color: #fbbf24;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.5;
}
/* A qualifier tag (2026-09-24): "Contractors" on Summative Tools, whose full
   parenthetical wrapped the label onto two lines. Same shape as the Paused
   pill, in gold-400 rather than amber — it describes, it does not warn — and
   gold-400 is the step that stays legible on ink-900 and on the active tint. */
.icms-sidebar__tag {
	margin-left: auto;
	flex: 0 0 auto;
	align-self: center;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(224, 182, 98, .12);
	border: 1px solid rgba(224, 182, 98, .32);
	color: var(--gold-400, #e0b662);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.5;
}

/* ── Footer: balance + one contextual action ── */
.icms-sidebar__foot {
	flex: 0 0 auto;
	padding: 12px 14px 16px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}
.icms-sidebar__balance {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border-radius: var(--iui-r-sm);
	background: rgba(255, 255, 255, .05);
	margin-bottom: 10px;
}
.icms-sidebar__balancelabel {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-400, #94a3b8);
}
.icms-sidebar__balanceval {
	font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
	font-size: 20px;
	font-weight: 800;
	color: var(--gold-400, #e0b662);
	line-height: 1;
}
.icms-sidebar__foot .iui-btn { width: 100%; }

/* ── Scrim (drawer widths only) ── */
.icms-sidebar__scrim {
	position: fixed;
	inset: 0;
	z-index: 125;
	background: rgba(15, 23, 42, .5);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--iui-t);
	display: none;
}

/* ── Desktop / laptop: static, always visible, never auto-collapses ── */
@media (min-width: 1024px) {
	body.ics-logged-in { padding-left: var(--iui-sidebar-w); }
	.icms-sidebar__burger { display: none !important; }
}

/* ── Tablet + mobile: off-canvas drawer ── */
@media (max-width: 1023px) {
	.icms-sidebar {
		transform: translateX(-100%);
		transition: transform var(--iui-t);
		box-shadow: var(--shadow-xl, 0 20px 48px rgba(15, 23, 42, .12));
	}
	body.icms-drawer-open .icms-sidebar { transform: translateX(0); }
	body.ics-logged-in .icms-sidebar__scrim { display: block; }
	body.icms-drawer-open .icms-sidebar__scrim { opacity: 1; pointer-events: auto; }
	/* The drawer owns the viewport while it is open. */
	body.icms-drawer-open { overflow: hidden; }
}

/* ════════════════════════════════════════════════════════════════════════════
   13. APP SHELL — the slim top bar
   ────────────────────────────────────────────────────────────────────────────
   The module links, Bundle button, Prices dropdown and 4-value credit pill all
   moved into the sidebar or the buy flow. What is left is: burger (small
   screens), page title, one contextual credit chip, the injected bell, and the
   account menu. That is why the 13 responsive collapse steps css/topbar.css
   needed are gone — there is no longer more in the bar than fits.
   ══════════════════════════════════════════════════════════════════════════ */
body.ics-logged-in .icms-topbar {
	gap: 12px;
	padding: 8px 20px;
	min-height: var(--iui-topbar-h);
}

/* Burger — drawer trigger. Icon-only by design; it carries an aria-label. */
.icms-sidebar__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--iui-r-sm);
	background: var(--surface-card, #fff);
	color: var(--ink-700, #334155);
	font-size: 15px;
	cursor: pointer;
}
.icms-sidebar__burger:hover { background: var(--ink-50, #f8fafc); }

/* Page title — replaces the five nav links as the bar's left-hand content.
   Explicit margin:0 because this element was an <h1> until 2026-08-09 (see
   partials/_topbar.html) and a UA heading margin is applied inside a flex
   row. Pinning it here means the tag can change without moving the bar. */
.icms-topbar__pagetitle {
	margin: 0;
	font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-900, #0f172a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 auto;
	min-width: 0;
}

/* Contextual credit chip — this module's balance only. Clickable: at zero it
   is the shortest route to the buy flow. */
.icms-topbar__credit {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 7px 12px;
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--iui-r-pill);
	background: var(--surface-card, #fff);
	color: var(--ink-700, #334155);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--iui-t), background var(--iui-t);
}
.icms-topbar__credit i { color: var(--gold-600, #b07d1f); font-size: 13px; }
.icms-topbar__credit strong { color: var(--ink-900, #0f172a); }
.icms-topbar__credit:hover { border-color: var(--gold-400, #e0b662); background: var(--gold-50, #fdf9f2); }
/* Zero balance reads as a warning state, not a neutral one. */
.icms-topbar__credit[data-empty="1"] {
	border-color: var(--gold-400, #e0b662);
	background: var(--gold-50, #fdf9f2);
	color: var(--gold-700, #92610f);
}
.icms-topbar__credit[data-empty="1"] strong { color: var(--gold-700, #92610f); }

@media (max-width: 560px) {
	.icms-topbar__pagetitle { display: none; }
	.icms-topbar__creditlabel { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   14. SHARED WIZARD LAYER — restyled onto the tokens, in place
   ────────────────────────────────────────────────────────────────────────────
   .icms-form / .icms-steps / .icms-pay-summary live in css/icms-forms.css and
   are already adopted by Documents, Exam and Notes. Those rules use !important
   to out-order css/icms-app.css and css/responsive.css, so the overrides here
   have to match — this is one of the few places in this file where !important
   is answering an existing !important rather than starting a new fight.
   ══════════════════════════════════════════════════════════════════════════ */
.icms-form .icms-btn {
	border-radius: var(--iui-r) !important;
	min-height: 42px !important;
	font-weight: 700 !important;
	transition: background var(--iui-t), border-color var(--iui-t), color var(--iui-t) !important;
}
.icms-form .icms-btn:active { transform: none !important; }
.icms-form .icms-btn--gold {
	background: var(--gold-500, #c9962f) !important;
	border-color: var(--gold-500, #c9962f) !important;
	color: #fff !important;
}
.icms-form .icms-btn--gold:hover {
	background: var(--gold-600, #b07d1f) !important;
	border-color: var(--gold-600, #b07d1f) !important;
}

/* Steps: completed turns green (brand colour 3), current stays gold. */
.icms-steps .icms-step.done { color: var(--ok-600) !important; }
.icms-steps .icms-step.done .icms-step-n {
	background: var(--ok-100) !important;
	color: var(--ok-700) !important;
	border-color: var(--ok-100) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   14b. THE PRIMARY ACTION IS ALWAYS GOLD
   ────────────────────────────────────────────────────────────────────────────
   The two credit-gate CTAs were painted by four different legacy sheets and
   came out as two different colours: Generate rendered a green gradient
   (#16a34a → #22c55e, from .btn-primary in v4/ui-enhance) and Buy a yellow one
   (#fbbf24 → #fcd34d, from #paymentBtn in tweaks.css). Green is the success
   colour in this system, not an action colour, and #fbbf24 is a fourth hue
   that the three-colour contract does not include.

   Both now use the same flat --gold-500. They can safely look identical
   because they are mutually exclusive — the primary-action slot is gold, and
   only ever one thing is standing in it.

   The !important and the #id in these selectors are matching, not escalating:
   tweaks.css already carries `#paymentBtn {…!important}` at (1,0,0), so an
   equal-specificity !important rule in a later sheet is the minimum needed to
   win. Gradients are cleared explicitly because those rules set
   background-image, which a background-color alone would not replace.
   ══════════════════════════════════════════════════════════════════════════ */
#generateBtn,
#paymentBtn,
.icms-app-cta-card-btn--gold {
	background-image: none !important;
	background-color: var(--gold-500, #c9962f) !important;
	/* Ink, not white — see the contrast note on .iui-btn--primary above.
	   -webkit-text-fill-color is restated because css/v4.css paints these
	   buttons through it, and that property overrides `color` outright. */
	color: var(--ink-900, #0f172a) !important;
	-webkit-text-fill-color: var(--ink-900, #0f172a) !important;
	border: 1px solid var(--gold-500, #c9962f) !important;
	border-radius: var(--iui-r) !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
#generateBtn:hover,
#paymentBtn:hover,
.icms-app-cta-card-btn--gold:hover {
	background-color: var(--gold-400, #e0b662) !important;
	border-color: var(--gold-400, #e0b662) !important;
}
/* The bundle alternative inside the buy card is the quiet second option, so it
   must NOT inherit the gold above — it is a ghost button. */
#bundleAltDocsBtn,
#bundleAltDocsBtn:hover {
	background-image: none !important;
	background-color: transparent !important;
	color: var(--ink-700, #334155) !important;
	border: 1px solid var(--ink-200, #e2e8f0) !important;
	box-shadow: none !important;
}
#bundleAltDocsBtn:hover {
	background-color: var(--ink-50, #f8fafc) !important;
	border-color: var(--ink-300, #cbd5e1) !important;
}

/* Exam step 3 — the paybill recovery disclosure. A <details>, so the native
   marker is kept (unlike .icms-form .icms-more, which replaces it); this only
   makes the summary read as a control rather than as body text. */
.exam-pay-recover > summary {
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ink-500, #64748b);
	padding: 4px 0;
}
.exam-pay-recover > summary:hover { color: var(--ink-700, #334155); }

/* ════════════════════════════════════════════════════════════════════════════
   15. LEGACY BUTTON RECONCILIATION
   ────────────────────────────────────────────────────────────────────────────
   The per-module button families (.notes-btn, .ref-btn, .ref-chip, exam's
   .btn-gold) predate the shared layer. Their module sheets load at the BOTTOM
   OF THE BODY, i.e. AFTER this file, so overriding them from here would lose.
   The overlapping colour rules are deleted in those sheets instead; what stays
   here is only the shape contract, which they do not set.
   ══════════════════════════════════════════════════════════════════════════ */
.notes-btn,
.ref-btn,
.exam-btn {
	border-radius: var(--iui-r);
	font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
	font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════════
   15b. PRICES PANEL — partials/_prices.html
   ────────────────────────────────────────────────────────────────────────────
   The old top-bar Prices dropdown, promoted to a panel opened from the
   sidebar's "Buy credits". Its class names are deliberately the same
   (.icms-prices-group / -head / -row / -name / -units / -amt) so the markup
   reads the same as before; the layout rules that used to live in
   css/topbar.css were all scoped under .icms-topbar__prices-menu and so do not
   reach this, which is why the whole component is restyled here.
   ══════════════════════════════════════════════════════════════════════════ */
.icms-prices-overlay {
	position: fixed;
	inset: 0;
	z-index: 8000; /* above the sidebar (130), below the auth modal (9000) */
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(15, 23, 42, .55);
	overflow-y: auto;
}
.icms-prices-overlay[hidden] { display: none; }
.icms-prices-dialog {
	position: relative;
	max-width: 640px;
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}
.icms-prices-x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--iui-r-sm);
	background: transparent;
	color: var(--ink-500, #64748b);
	font-size: 15px;
	cursor: pointer;
}
.icms-prices-x:hover { background: var(--ink-100, #eef2f7); color: var(--ink-900, #0f172a); }
.icms-prices-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.icms-prices-group {
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--iui-r);
	padding: 12px 14px;
}
.icms-prices-head {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gold-700, #92610f);
}
.icms-prices-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: 10px;
	padding: 5px 0;
	font-size: 13px;
	border-top: 1px solid var(--ink-100, #eef2f7);
}
.icms-prices-row:first-of-type { border-top: 0; }
.icms-prices-name  { font-weight: 700; color: var(--ink-800, #1e293b); }
.icms-prices-units { color: var(--ink-500, #64748b); font-size: 12px; }
.icms-prices-amt   { font-weight: 800; color: var(--ink-900, #0f172a); white-space: nowrap; }
/* A plan row is a button (2026-10-04): same look, clickable. */
.icms-prices-buy {
	width: 100%;
	margin: 0;
	padding: 6px 8px;
	border: 0;
	border-top: 1px solid var(--ink-100, #eef2f7);
	border-radius: 8px;
	background: transparent;
	font: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	transition: background .15s;
}
.icms-prices-buy:hover { background: var(--gold-50, #fff8e1); }
.icms-prices-buy:focus-visible { outline: 2px solid var(--gold-500, #f5b70a); outline-offset: 1px; }
.icms-prices-buy .icms-prices-amt::after { content: " \203A"; color: var(--gold-700, #92610f); }
@media (max-width: 620px) {
	.icms-prices-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════════════
   15c. LIBRARY PANEL — the shared shell behind every "My …" list
   ────────────────────────────────────────────────────────────────────────────
   Used by all four Library entries in partials/_nav-registry.html plus the
   Billing panel below:

     #myDocsPanel          partials/extra-modals.html
     #myExamPapersPanel    exam/partials/exam-app.html   (Assessments + Tools)
     #notesMyModal         notes/partials/notes-app.html
     #icmsBillingPanel     partials/_billing.html

   THE BUG THIS FIXES — every one of those was an overlay that scrolled, not a
   panel with a scrolling body. The markup set `align-items:flex-start` and
   `overflow-y:auto` on the OVERLAY inline, so the white card grew to whatever
   height the list needed and the trainer scrolled the entire dialog, dark
   header and all, inside a dimmed backdrop. A 69-document library was a
   several-thousand-pixel modal.

   The fix is the flex column below: the panel's height is capped in viewport
   units, `.icms-lib-head` and `.icms-lib-foot` are `flex:0 0 auto`, and ONLY
   `.icms-lib-body` scrolls. The panel can therefore never grow.

   TWO THINGS THAT MUST NOT CHANGE
     • The overlay keeps `class="modal-overlay hidden"`. js/ui-polish.js watches
       exactly that pair to play the close animation, and every opener/closer in
       the app toggles `.hidden`.
     • The card keeps `class="modal-box"` for the same reason — the pop-in and
       pop-out keyframes in css/icms-modern.css are bound to it.
   The `.icms-lib-*` classes then override the geometry those two give, which
   works without !important only because this sheet is the last one loaded in
   partials/_head.html. It does mean the INLINE styles those panels used to
   carry had to be deleted rather than overridden — an inline style beats any
   stylesheet rule that is not !important.
   ══════════════════════════════════════════════════════════════════════════ */
.icms-lib-overlay {
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow: hidden;          /* the BODY scrolls, never this */
	background: rgba(15, 23, 42, .55);
}
.icms-lib-panel {
	display: flex;
	flex-direction: column;
	width: min(760px, calc(100vw - 32px));
	max-width: min(760px, calc(100vw - 32px));
	height: min(620px, calc(100vh - 48px));
	padding: 0;                /* .modal-box ships 36px; the sections own it now */
	overflow: hidden;
	border-radius: var(--iui-r-lg, 16px);
	background: var(--surface-card, #fff);
}
.icms-lib-panel--wide { width: min(880px, calc(100vw - 32px)); max-width: min(880px, calc(100vw - 32px)); }

/* ── Head: the one piece that must stay put while the list moves ── */
.icms-lib-head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 18px;
	background: var(--ink-900, #0f172a);
}
.icms-lib-head__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.icms-lib-head__ic { color: var(--gold-400, #e0b662); font-size: 19px; flex: 0 0 auto; }
.icms-lib-head__t {
	margin: 0;
	font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--gold-400, #e0b662);
}
/* A div, not a p: css/responsive.css force-sizes bare `p` to 16px with a
   page-wide !important, which would blow this subtitle up inside a dark bar. */
.icms-lib-head__s { margin: 2px 0 0; font-size: 11.5px; color: #94a3b8; }
.icms-lib-head__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.icms-lib-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--iui-r-sm, 8px);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--iui-t);
}
.icms-lib-x:hover { background: rgba(255, 255, 255, .18); }
.icms-lib-x--gold {
	border-color: rgba(224, 182, 98, .4);
	background: rgba(224, 182, 98, .15);
	color: var(--gold-400, #e0b662);
}
.icms-lib-x--gold:hover { background: rgba(224, 182, 98, .26); }

/* ── Body: the ONLY scroll container in the panel ── */
.icms-lib-body {
	flex: 1 1 auto;
	min-height: 0;             /* without this a flex child refuses to shrink */
	overflow-y: auto;
	overscroll-behavior: contain;   /* the page behind must not scroll with it */
	-webkit-overflow-scrolling: touch;
	padding: 16px 18px;
}
.icms-lib-list { display: flex; flex-direction: column; gap: 10px; }

/* ── Foot: count on the left, one contextual action on the right ── */
.icms-lib-foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 11px 18px;
	border-top: 1px solid var(--ink-200, #e2e8f0);
	background: var(--ink-50, #f8fafc);
	font-size: 12px;
	color: var(--ink-500, #64748b);
}

/* ── Row: one saved item. Replaces ~400 characters of repeated inline style
   in each of the four list renderers. ── */
.icms-lib-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 13px 14px;
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--iui-r, 12px);
	background: var(--ink-50, #f8fafc);
	transition: border-color var(--iui-t), background var(--iui-t);
}
.icms-lib-row:hover { border-color: var(--gold-300, #e8cf9a); background: #fff; }
.icms-lib-row__ic {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--iui-r-sm, 8px);
	background: var(--ink-900, #0f172a);
	color: var(--gold-400, #e0b662);
	font-size: 17px;
}
.icms-lib-row__ic--ok { background: var(--ok-600, #15803d); color: #fff; }
.icms-lib-row__main { flex: 1 1 220px; min-width: 0; }
.icms-lib-row__title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink-900, #0f172a);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.icms-lib-row__meta { margin-top: 2px; font-size: 11.5px; color: var(--ink-500, #64748b); }
.icms-lib-row__note { margin-top: 4px; font-size: 11px; color: var(--ink-600, #475569); line-height: 1.4; }
.icms-lib-row__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.icms-lib-row__act { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.icms-lib-row__amt { flex: 0 0 auto; text-align: right; }

.icms-lib-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--iui-r-pill, 999px);
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
}
.icms-lib-badge--ok   { background: var(--ok-100, #dcfce7);   color: var(--ok-700, #166534); }
.icms-lib-badge--info { background: #eff6ff;                  color: #1e40af; }
.icms-lib-badge--wait { background: var(--warn-100, #fef3c7); color: var(--warn-600, #b45309); }

/* Row buttons. Deliberately not .iui-btn — these are small, dense controls
   inside a list, and .iui-btn's 40px height would make every row 20px taller. */
.icms-lib-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: var(--iui-r-pill, 999px);
	background: var(--ink-900, #0f172a);
	color: var(--gold-400, #e0b662);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity var(--iui-t), background var(--iui-t);
}
.icms-lib-btn:hover:not(:disabled) { opacity: .88; }
.icms-lib-btn:disabled { opacity: .55; cursor: default; }
.icms-lib-btn--ghost {
	background: transparent;
	border-color: var(--ink-300, #cbd5e1);
	color: var(--ink-700, #334155);
}
.icms-lib-btn--ghost:hover:not(:disabled) { background: var(--ink-100, #eef2f7); opacity: 1; }
.icms-lib-btn--sm { height: 28px; padding: 0 11px; font-size: 11px; }

/* ── Shared list states (loading / empty / error) ── */
.icms-lib-state { padding: 34px 18px; text-align: center; color: var(--ink-500, #64748b); }
.icms-lib-state__ic { display: block; margin-bottom: 10px; font-size: 32px; color: var(--ink-300, #cbd5e1); }
.icms-lib-state__ic--busy { color: var(--gold-500, #c9962f); }
.icms-lib-state__ic--err  { color: var(--err-500, #dc2626); }
.icms-lib-state__t { font-size: 14px; font-weight: 700; color: var(--ink-800, #1e293b); }
.icms-lib-state__s { margin-top: 6px; font-size: 12px; }

/* Phones: fill the viewport minus a small margin, but keep the same contract —
   head and foot pinned, body scrolling. 100dvh (not 100vh) so the mobile URL
   bar collapsing does not push the foot off-screen. */
@media (max-width: 640px) {
	.icms-lib-overlay { padding: 12px; }
	.icms-lib-panel,
	.icms-lib-panel--wide {
		width: 100%;
		max-width: 100%;
		height: calc(100dvh - 24px);
	}
	.icms-lib-body { padding: 14px; }
	.icms-lib-row { gap: 10px; padding: 12px; }
	.icms-lib-row__act,
	.icms-lib-row__amt { width: 100%; text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════════════
   15d. BILLING PANEL — partials/_billing.html + js/icms-billing.js
   ────────────────────────────────────────────────────────────────────────────
   Builds on the library shell above; only the pieces the payments list needs
   beyond a plain row are declared here.
   ══════════════════════════════════════════════════════════════════════════ */
.icms-bill-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	padding: 15px 18px;
	border-radius: var(--iui-r, 12px);
	background: linear-gradient(135deg, var(--ink-900, #0f172a), var(--ink-800, #1e293b));
	color: #fff;
}
.icms-bill-summary__lbl {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #94a3b8;
}
.icms-bill-summary__amt {
	margin-top: 2px;
	font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
	font-size: 23px;
	font-weight: 700;
	color: var(--gold-400, #e0b662);
}
.icms-bill-summary__sub { margin-top: 3px; font-size: 11.5px; color: #94a3b8; }

/* Segmented filter. Pure client-side — it hides rows in the list already
   fetched, so switching tabs never costs a second request. */
.icms-bill-seg {
	display: inline-flex;
	gap: 2px;
	margin-bottom: 12px;
	padding: 3px;
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--iui-r-pill, 999px);
	background: var(--ink-50, #f8fafc);
}
.icms-bill-seg__b {
	border: 0;
	border-radius: var(--iui-r-pill, 999px);
	padding: 6px 15px;
	background: transparent;
	color: var(--ink-500, #64748b);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--iui-t), color var(--iui-t);
}
.icms-bill-seg__b:hover { color: var(--ink-900, #0f172a); }
.icms-bill-seg__b.is-active {
	background: var(--ink-900, #0f172a);
	color: var(--gold-400, #e0b662);
}
.icms-bill-amt {
	font-size: 15px;
	font-weight: 800;
	color: var(--ok-600, #15803d);
	white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   16. PRINT
   The sidebar and top bar are chrome — they must never reach a printed
   document or a PDF export.
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
	.icms-sidebar,
	.icms-sidebar__scrim,
	.icms-sidebar__burger,
	.icms-topbar { display: none !important; }
	body.ics-logged-in { padding-left: 0 !important; }
}