/* ═══════════════════════════════════════════════════════════════════════════
 * icms-create.css — the home page and the shared "create a package" surface.
 * ───────────────────────────────────────────────────────────────────────────
 * Loaded at the END of the body by home.php (and, from Phase 2, by each module
 * page), i.e. after every sheet in partials/_head.html including
 * css/icms-ui.css. That is the same position the module sheets already use, and
 * it is why almost nothing here needs !important.
 *
 * TOKENS ONLY. Every colour is a variable from css/icms-modern.css (the ink and
 * gold ramps) or css/icms-ui.css (green, state colours, radii, focus ring).
 * There are three brand colours in this product — ink, gold, green — and this
 * file introduces no fourth hue.
 *
 * NAMESPACE .icms-home / .icms-create / .icms-unitpick. Nothing here is a bare
 * element selector, so none of the ~15 sheets loaded before it can reach in and
 * none of its rules can leak out.
 *
 * SECTIONS
 *   1 page frame · 2 the four package cards · 3 home sections · 4 empty state
 *   5 create surface · 5b wizard mode · 6 unit picker · 7 curriculum row
 *   8 confirm card · 9 result panel
 *
 * ⚠️  NO <table> ANYWHERE ON THESE SURFACES. css/responsive.css sets a
 * page-wide `td, th, p, li { font-size: … !important }`, which a table on a
 * card cannot escape. Lists of things are div + grid with the label carried on
 * the row, as below.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   1. PAGE FRAME
   Mirrors .icms-app-container's relationship to the fixed sidebar: the body is
   padded by the sidebar width from 1024px up (css/icms-ui.css §12), so this
   only needs its own max-width and gutters.
   ══════════════════════════════════════════════════════════════════════════ */
.icms-home {
	display: block;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 24px 16px 64px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.icms-home { padding: 32px 28px 72px; }
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.icms-home__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.icms-home__eyebrow {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-500);
	letter-spacing: .01em;
}

.icms-home__h {
	margin: 0;
	font-size: clamp(24px, 5vw, 32px);
	line-height: 1.2;
	font-weight: 800;
	color: var(--ink-900);
	letter-spacing: -.02em;
}

/* The balance chip. Gold-on-cream rather than gold-on-white: at 13px the gold
   text needs the tinted ground to stay comfortably legible. */
.icms-home__credits {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--gold-400);
	border-radius: var(--iui-r-pill);
	background: var(--gold-50);
	color: var(--gold-700);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--iui-t), border-color var(--iui-t);
}

.icms-home__credits:hover { background: var(--gold-100); }
.icms-home__credits-n { font-size: 16px; font-weight: 800; }
.icms-home__credits-l { color: var(--gold-600); font-weight: 600; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   2. THE FOUR PACKAGE CARDS
   One column on a phone, two from 640px, and deliberately NOT four across on a
   desktop: at four the description line wraps to four or five lines and the
   cards stop being scannable. Two columns keeps every card the same shape.
   ══════════════════════════════════════════════════════════════════════════ */
.icms-home-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 36px;
}

@media (min-width: 640px) {
	.icms-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

.icms-home-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--ink-200);
	border-radius: var(--iui-r-lg);
	background: #fff;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	transition: border-color var(--iui-t), box-shadow var(--iui-t), transform var(--iui-t);
}

.icms-home-card:hover {
	border-color: var(--gold-400);
	box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
	transform: translateY(-2px);
}

.icms-home-card:focus-visible {
	outline: 2px solid var(--gold-700);
	outline-offset: 2px;
	box-shadow: var(--iui-focus);
}

.icms-home-card__ic {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--iui-r);
	background: var(--ink-900);
	color: var(--gold-400);
	font-size: 16px;
}

.icms-home-card__t {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink-900);
	line-height: 1.3;
}

.icms-home-card__d {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-600);
	flex: 1 1 auto;
}

.icms-home-card__f {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--ink-100);
}

.icms-home-card__bal {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ok-600);
}

/* No credits is a normal state in a pay-as-you-go product, not an error —
   muted, never red. */
.icms-home-card__bal.is-zero { color: var(--ink-500); font-weight: 600; }

.icms-home-card__go {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ink-50);
	color: var(--ink-600);
	font-size: 11px;
	transition: background var(--iui-t), color var(--iui-t);
}

.icms-home-card:hover .icms-home-card__go {
	background: var(--gold-500);
	color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════════
   3. SECTIONS — your units, recent packages
   ══════════════════════════════════════════════════════════════════════════ */
.icms-home-sec { margin-bottom: 32px; }

.icms-home-sec__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.icms-home-sec__h {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-900);
}

.icms-home-sec__s {
	font-size: 13px;
	color: var(--ink-500);
}

/* ── Saved units ──────────────────────────────────────────────────────────── */
.icms-home-units {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.icms-home-unit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 16px;
	border: 1px solid var(--ink-200);
	border-radius: var(--iui-r);
	background: #fff;
}

.icms-home-unit__main { min-width: 0; flex: 1 1 220px; }

.icms-home-unit__t {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink-900);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.icms-home-unit__s {
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--ink-500);
}

.icms-home-unit__acts {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* 44px minimum on the shortcut buttons — these are the smallest touch targets
   on the page and they sit side by side. */
.icms-home-unit__b {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ink-200);
	border-radius: var(--iui-r-pill);
	background: var(--ink-50);
	color: var(--ink-700);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--iui-t), border-color var(--iui-t), color var(--iui-t);
}

.icms-home-unit__b:hover {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--gold-400);
}

.icms-home-unit__b:focus-visible {
	outline: 2px solid var(--gold-700);
	outline-offset: 2px;
	box-shadow: var(--iui-focus);
}

/* ── Recent packages ──────────────────────────────────────────────────────── */
.icms-home-packs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.icms-home-pack {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--ink-200);
	border-radius: var(--iui-r);
	background: #fff;
	text-decoration: none;
	transition: border-color var(--iui-t), background var(--iui-t);
}

.icms-home-pack:hover { border-color: var(--gold-400); background: var(--gold-50); }

.icms-home-pack:focus-visible {
	outline: 2px solid var(--gold-700);
	outline-offset: 2px;
	box-shadow: var(--iui-focus);
}

.icms-home-pack__ic {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: var(--iui-r-sm);
	background: var(--ok-50);
	color: var(--ok-600);
	font-size: 13px;
}

.icms-home-pack__main { min-width: 0; flex: 1 1 auto; display: block; }

.icms-home-pack__t {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-900);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.icms-home-pack__s {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--ink-500);
}

.icms-home-pack__go { flex: 0 0 auto; color: var(--ink-400); font-size: 12px; }
.icms-home-pack:hover .icms-home-pack__go { color: var(--gold-600); }

/* ════════════════════════════════════════════════════════════════════════════
   4. EMPTY STATE — a brand-new account
   ══════════════════════════════════════════════════════════════════════════ */
.icms-home-empty {
	padding: 28px 20px;
	border: 1px dashed var(--ink-200);
	border-radius: var(--iui-r-lg);
	background: var(--ink-50);
	text-align: center;
}

.icms-home-empty__ic { font-size: 22px; color: var(--gold-500); }

.icms-home-empty__t {
	margin: 10px 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-900);
}

.icms-home-empty__s {
	margin: 0 auto;
	max-width: 46ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-600);
}

/* ════════════════════════════════════════════════════════════════════════════
   5. CREATE SURFACE — the shared module page frame
   A step sequence: the horizontal .icms-steps bar at the top, and ONE section
   on screen at a time. The sections are the #panel1/2/3 elements; goToStep()
   and examGoToStep() have always toggled `.active` on them, so the wizard is
   restored by making that class mean "visible" again (§5b) rather than by
   changing a line of JavaScript.
   ══════════════════════════════════════════════════════════════════════════ */
/* WIDTH — 1440, not 880.
   At 880 the surface was a narrow column floating in the middle of a 1680px
   workspace (css/icms-app.css:246 sizes #ics-main), and because it was narrow
   it was also tall: a 3-column grid of 16 fields is six rows at 880 and four at
   1440. The cap stays a cap — past 1440 the field grid stops being readable —
   but on a normal laptop the card now fills the space beside the sidebar.

   ⚠️  THIS IS THE ONE OWNER of the create surface's width. notes/css/notes.css
   used to set its own on .notes-wrap and lost to this file by load order, which
   is exactly the kind of second owner that reads as a live value and is not. */
.icms-create {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 14px 16px 28px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.icms-create { padding: 18px 24px 36px; }
}

/* ── Module header: what am I creating, and what is in it ────────────────── */
.icms-create__head { margin-bottom: 14px; }

.icms-create__h {
	margin: 0 0 6px;
	font-size: clamp(21px, 4.2vw, 27px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--ink-900);
}

.icms-create__contents {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-600);
}

/* ── A section ───────────────────────────────────────────────────────────── */
.icms-create-sec {
	position: relative;
	margin: 0 0 12px;
	padding: 14px 18px 14px 52px;
	border: 1px solid var(--ink-200);
	border-radius: var(--iui-r-lg);
	background: #fff;
	transition: border-color var(--iui-t), box-shadow var(--iui-t);
}

/* `.active` is set by goToStep() and means "the section being worked on".
   A quiet gold edge, never a colour change — the trainer is reading, not
   being alerted. */
.icms-create-sec.active {
	border-color: var(--gold-400);
	box-shadow: 0 6px 20px rgba(15, 23, 42, .06);
}

.icms-create-sec__n {
	position: absolute;
	left: 16px;
	top: 14px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ink-100);
	color: var(--ink-600);
	font-size: 12px;
	font-weight: 800;
}

.icms-create-sec.is-done .icms-create-sec__n {
	background: var(--ok-100);
	color: var(--ok-700);
}

.icms-create-sec__h {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-900);
}

.icms-create-sec__s {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-500);
}

.icms-create-sec__s:last-child { margin-bottom: 0; }

@media (max-width: 520px) {
	/* The number moves above the heading rather than squeezing the content
	   column to nothing on a narrow phone. */
	.icms-create-sec { padding: 16px 14px; }
	.icms-create-sec__n { position: static; margin-bottom: 8px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   5b. WIZARD MODE — one step on screen at a time
   Put `icms-create--wizard` on the .icms-create wrapper and the surface becomes
   a step sequence again: the .icms-steps bar (css/icms-forms.css §6) is the
   navigation, and only the section carrying `.active` is displayed.

   THIS IS THE ONLY MECHANISM. Two others exist in the tree and neither may be
   used here:
     • `.panel` (css/layout.css) carries display:none AND a pile of unrelated
       card styling — tests/create_flow_contract_static.php fails the build if
       it comes back onto #panel1..3.
     • `.exam-panel` (exam/css/exam.css) does the same job for Assessments only.
   One rule, in the shared sheet, so all four surfaces behave identically.

   No !important needed: this file is linked at the END of the body on every
   module page (index.php, exam/exam.php, notes/notes.php), and nothing else in
   the tree sets `display` on .icms-create-sec.

   The number badge inside each section is hidden because the bar already
   carries the number — the ELEMENTS stay in the markup either way, because
   goToStep() dereferences #step1..3 and examGoToStep() queries .exam-step.
   ══════════════════════════════════════════════════════════════════════════ */
.icms-create--wizard .icms-create-sec:not(.active) { display: none; }

/* NOTE: on all four module pages the section also carries `.icms-form`, whose
   padding is !important (css/icms-forms.css §1) and therefore wins. Retune the
   card's padding THERE, not here — this only holds for a bare section. */
.icms-create--wizard .icms-create-sec {
	/* The number's 52px gutter goes with the badge. */
	padding-left: 18px;
}

.icms-create--wizard .icms-create-sec__n { display: none; }

/* `.active` means "the step you are on" here, so the gold edge that marked the
   current section on the scrolling page would now be on every section the
   trainer ever sees. The bar carries the "where am I" job instead. */
.icms-create--wizard .icms-create-sec.active {
	border-color: var(--ink-200);
	box-shadow: none;
}

@media (max-width: 520px) {
	.icms-create--wizard .icms-create-sec { padding: 16px 14px; }
}

/* Step navigation reuses `.icms-form-actions` / `--split` from
   css/icms-forms.css §11 — same 46px buttons, same rule, nothing new to learn
   and nothing new to keep in step. On a phone the row wraps rather than
   shrinking the buttons below the touch target. */
@media (max-width: 520px) {
	.icms-form .icms-form-actions--split { flex-wrap: wrap !important; }
	.icms-form .icms-form-actions--split .btn { flex: 1 1 auto !important; }
}

/* ── Collapsed extras. Same disclosure component as the wizard used, so
   nothing new has to be learned. ──────────────────────────────────────────── */
.icms-create-more > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 4px;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink-700);
	list-style: none;
}

.icms-create-more > summary::-webkit-details-marker { display: none; }
.icms-create-more > summary:hover { color: var(--ink-900); }

.icms-create-more > summary:focus-visible {
	outline: 2px solid var(--gold-700);
	outline-offset: 2px;
	border-radius: var(--iui-r-sm);
}

.icms-create-more__x { margin-left: auto; color: var(--ink-400); transition: transform var(--iui-t); }
.icms-create-more[open] .icms-create-more__x { transform: rotate(180deg); }
.icms-create-more__body { padding: 12px 4px 4px; }

/* ════════════════════════════════════════════════════════════════════════════
   6. UNIT PICKER — partials/_unit-picker.html
   Exactly one branch is on screen, selected by data-state on the wrapper. Doing
   it in one rule rather than per-element JS means two can never be visible at
   once even if a script throws midway — the same reasoning as the credit gate
   in css/icms-ui.css §11.
   ══════════════════════════════════════════════════════════════════════════ */
.icms-unitpick__loading,
.icms-unitpick__chosen,
.icms-unitpick__choose,
.icms-unitpick__newhead { display: none; }

.icms-unitpick[data-state="loading"] .icms-unitpick__loading,
.icms-unitpick[data-state="chosen"]  .icms-unitpick__chosen,
.icms-unitpick[data-state="new"]     .icms-unitpick__newhead { display: flex; }

.icms-unitpick[data-state="choose"] .icms-unitpick__choose { display: block; }

/* The module's own fields live in #icmsUnitForm, outside this partial.

   THEY ARE ALWAYS ON SCREEN (2026-08-16). They used to appear only while a unit
   was being ADDED: a returning trainer saw a one-line "✔ unit · Change" summary
   and had to click Change to see the values that were about to print on a paid
   pack, with a modal asking "same unit as last time?" over the top. The form
   itself is the better answer to that question — it shows the actual unit title,
   code, course and college rather than describing them — so it is shown, filled
   in, and the modal is gone (see partials/_unit-picker.html).

   data-state still drives the picker's OWN four branches above; it no longer
   decides whether the module's fields exist. The old adjacent-sibling rule went
   with it, so #icmsUnitForm no longer has to be the picker's next sibling —
   though every module still places it there, and it costs nothing to keep.

   ⛔ Do not reintroduce an `.is-open` class to toggle this. It was tried as
   "belt and braces" alongside data-state, the two disagreed, and the whole unit
   form ended up on screen underneath the chosen-unit summary.
   tests/create_flow_contract_static.php still fails the build for it. */
.icms-unitpick__form { display: block; }

.icms-unitpick__loading { font-size: 13.5px; color: var(--ink-500); }

/* ── Chosen ──────────────────────────────────────────────────────────────── */
.icms-unitpick__chosen {
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 14px;
	border: 1px solid var(--ok-100);
	border-radius: var(--iui-r);
	background: var(--ok-50);
}

.icms-unitpick__tick {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ok-600);
	color: #fff;
	font-size: 11px;
}

.icms-unitpick__chosen-b { flex: 1 1 200px; min-width: 0; }

.icms-unitpick__t {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink-900);
}

.icms-unitpick__s {
	display: block;
	margin-top: 1px;
	font-size: 12.5px;
	color: var(--ink-600);
}

.icms-unitpick__change,
.icms-unitpick__back,
.icms-unitpick__new {
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ink-200);
	border-radius: var(--iui-r-pill);
	background: #fff;
	color: var(--ink-700);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--iui-t), border-color var(--iui-t), color var(--iui-t);
}

.icms-unitpick__change:hover,
.icms-unitpick__back:hover,
.icms-unitpick__new:hover {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--gold-400);
}

.icms-unitpick__change:focus-visible,
.icms-unitpick__back:focus-visible,
.icms-unitpick__new:focus-visible,
.icms-unitpick__card:focus-visible {
	outline: 2px solid var(--gold-700);
	outline-offset: 2px;
	box-shadow: var(--iui-focus);
}

/* ── Choose ──────────────────────────────────────────────────────────────── */
.icms-unitpick__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-bottom: 10px;
}

@media (min-width: 640px) {
	.icms-unitpick__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.icms-unitpick__card {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ink-200);
	border-radius: var(--iui-r);
	background: #fff;
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: border-color var(--iui-t), background var(--iui-t), transform var(--iui-t);
}

.icms-unitpick__card:hover {
	border-color: var(--gold-400);
	background: var(--gold-50);
	transform: translateY(-1px);
}

.icms-unitpick__card-t {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink-900);
}

.icms-unitpick__card-s {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--ink-500);
}

.icms-unitpick__flag {
	display: inline-block;
	margin-top: 8px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ink-500);
}

.icms-unitpick__flag.is-ready { color: var(--ok-600); }

.icms-unitpick__none {
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-500);
}

/* ── New ─────────────────────────────────────────────────────────────────── */
.icms-unitpick__newhead {
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.icms-unitpick__newhead-t { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }

/* A brand-new account has nothing to go back TO, so the way back is hidden
   until the trainer has at least one saved unit. js/icms-units.js sets
   data-empty on the wrapper. */
.icms-unitpick[data-empty="1"] .icms-unitpick__back { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   7. CURRICULUM ROW — the second question on a create page
   ══════════════════════════════════════════════════════════════════════════ */
.icms-currow {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 14px;
	border: 1px solid var(--ok-100);
	border-radius: var(--iui-r);
	background: var(--ok-50);
}

.icms-currow__ic {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ok-600);
	color: #fff;
	font-size: 11px;
}

.icms-currow__b { flex: 1 1 200px; min-width: 0; }
.icms-currow__t { display: block; font-size: 14px; font-weight: 700; color: var(--ink-900); }
.icms-currow__s { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-600); }

/* Waiting on an upload — the same row, stated rather than alarming. Having no
   curriculum yet is a normal step, not an error. */
.icms-currow.is-missing { border-color: var(--ink-200); background: var(--ink-50); }
.icms-currow.is-missing .icms-currow__ic { background: var(--ink-300); color: var(--ink-700); }

/* Once a curriculum is loaded the row above says so and carries "Replace", so
   the upload column folds down to the one line that says what was read
   ("✔ Loaded … — 3 learning outcomes · 66 content rows"). Before 2026-10-03
   the same file was reported four times — the row, the dropzone, that line
   and a "Current … upload:" line — with two Replace buttons, which a trainer
   who is not at ease with computers reads as four things to do. The *Render
   CurriculumRow() functions in js/app.js, notes/js/app.js and exam/js/app.js
   set the class. Replace (on the row) still opens the picker. */
.is-curriculum-loaded > .icms-drop,
.is-curriculum-loaded > .icms-chips,
.is-curriculum-loaded > details.icms-more,
.is-curriculum-loaded > [id$="CurrentUpload"],
.is-curriculum-loaded .icms-file-x { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   8. CONFIRM CARD — the one primary action on the page
   Sticky at the bottom on a phone so Generate is always a thumb away; static in
   the flow from 768px up, where the whole page is already visible.
   ══════════════════════════════════════════════════════════════════════════ */
.icms-confirm {
	margin-top: 20px;
	padding: 18px;
	border: 1px solid var(--ink-200);
	border-radius: var(--iui-r-lg);
	background: #fff;
	box-shadow: 0 8px 28px rgba(15, 23, 42, .07);
}

.icms-confirm__unit {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-900);
}

.icms-confirm__row {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin-bottom: 8px;
	font-size: 13px;
	line-height: 1.5;
}

.icms-confirm__k { flex: 0 0 68px; color: var(--ink-500); font-weight: 600; }
.icms-confirm__v { flex: 1 1 auto; color: var(--ink-800); }

.icms-confirm__cost {
	margin: 14px 0;
	padding-top: 12px;
	border-top: 1px solid var(--ink-100);
	font-size: 13px;
	color: var(--ink-700);
}

.icms-confirm__cost b { color: var(--ink-900); }

/* The free preview. A text link under the button, deliberately not a second
   button competing with the action the trainer came for. */
.icms-confirm__alt {
	display: block;
	width: 100%;
	/* 44px even though it reads as a link: it is still something a thumb has to
	   hit, and it sits directly under the primary button where a mis-tap is
	   most likely. Measured at 35px before this was added. */
	min-height: 44px;
	margin-top: 8px;
	padding: 10px 0;
	border: 0;
	background: none;
	text-align: center;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-500);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.icms-confirm__alt:hover { color: var(--ink-800); }

.icms-confirm__alt:focus-visible {
	outline: 2px solid var(--gold-700);
	outline-offset: 2px;
	border-radius: var(--iui-r-sm);
}

@media (max-width: 767px) {
	.icms-confirm {
		position: sticky;
		bottom: 0;
		z-index: 20;
		margin-left: -16px;
		margin-right: -16px;
		padding: 14px 16px;
		border-radius: var(--iui-r-lg) var(--iui-r-lg) 0 0;
		box-shadow: 0 -6px 24px rgba(15, 23, 42, .12);
	}

	/* A sticky card is a permanent tax on the viewport, so on a phone it earns
	   its space by carrying ONLY what the action needs: what you are making,
	   what it costs, and the button. Measured at 287px — 43% of a 667px phone
	   screen — before this block; the `Includes` and `Curriculum` rows it drops
	   are already stated in sections ① to ③ directly above it. */
	.icms-confirm__row,
	.icms-confirm__check { display: none; }
	.icms-confirm__unit { margin-bottom: 6px; font-size: 14px; }
	.icms-confirm__cost { margin: 0 0 12px; padding-top: 0; border-top: 0; font-size: 12.5px; }
}

/* The "what will be used" check list. Visible on a desktop, where it costs
   nothing; folded away on a phone by the sticky-card rule above, because the
   same facts are already in sections ① to ③ directly overhead. */
.icms-confirm__check {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ink-100);
}
/* Unit, outcomes and teaching time are already the card's own rows above; the
   list printed them a second time, the teaching-time sentence word for word
   (seen live 2026-10-03). It keeps what the rows do not say: college,
   trainer, content rows, the file and the logo. updateSummary() still writes
   every span. */
.icms-confirm__check .summary-item.is-repeat { display: none; }

@media (prefers-reduced-motion: reduce) {
	.icms-create-sec,
	.icms-unitpick__card,
	.icms-home-card { transition: none; }
	.icms-unitpick__card:hover,
	.icms-home-card:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   9. RESULT — "your package is ready"
   ══════════════════════════════════════════════════════════════════════════ */
.icms-result {
	padding: 24px 20px;
	border: 1px solid var(--ok-100);
	border-radius: var(--iui-r-lg);
	background: var(--ok-50);
	text-align: center;
}

.icms-result__ic {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--ok-600);
	color: #fff;
	font-size: 18px;
}

.icms-result__h {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 800;
	color: var(--ink-900);
}

.icms-result__s {
	margin: 0 0 18px;
	font-size: 13.5px;
	color: var(--ink-600);
}