/* ════════════════════════════════════════════════════════════════════════════
   icms-forms.css  —  Shared form / upload / step layer  ·  v1 (2026-08-03)
   ────────────────────────────────────────────────────────────────────────────
   ONE set of primitives for the wizard surfaces that used to each ship their
   own: Documents (partials/app.html), Exam & Tools (exam/partials/exam-app.html)
   and Teaching Notes (notes/partials/notes-app.html).

   ── HOW IT IS SCOPED ───────────────────────────────────────────────────────
   Everything here is gated behind `.icms-form` on an ancestor. Nothing changes
   until markup opts in by adding that class, so this file can ship ahead of the
   markup conversion without touching a single existing screen. Admin, the
   landing page and all three auth modals are untouched by construction.

   ── WHY THE !important ─────────────────────────────────────────────────────
   Not preference — arithmetic. The declarations below have to win against two
   earlier sheets that already use !important on the same properties:

     css/responsive.css §3   `label, .field label { font-size / font-weight /
                              color / font-family: … !important }`   (0,2,0)
     css/icms-app.css        `.icms-app-panel .field label { … !important }`
                             and ~every other declaration in the file (0,3,0)

   Among !important declarations the cascade is settled by specificity first,
   source order second. `.icms-form .field label` is (0,3,0) — it ties with
   icms-app.css and wins on order, because this file is linked AFTER it in
   partials/_head.html. Keep that link position. Do not "simplify" these
   selectors to a single class: `.icms-form-label` alone is (0,1,0) and loses
   to responsive.css outright.

   ── TOKENS ─────────────────────────────────────────────────────────────────
   Colours, type and spacing come from css/icms-modern.css :root. No hex
   literals below except where a token genuinely does not exist (documented at
   the point of use). If a value needs retuning, retune the token.

   ── LOAD ORDER ─────────────────────────────────────────────────────────────
   partials/_head.html, after transtally.css, before auth-modal.css.
   ⚠️  exam/css/exam.css and notes/css/notes.css are linked at the BOTTOM OF
   THE BODY (exam.php, notes.php) — i.e. after this file. When those modules
   are converted, their overlapping rules must be DELETED, not overridden from
   here; source order means this file cannot beat them at equal specificity.
   ════════════════════════════════════════════════════════════════════════════ */

/* ═══════ 1. PANEL ═══════════════════════════════════════════════════════ */

.icms-form {
	background: var(--surface-card) !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 16px !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .04) !important;
	padding: 28px 30px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.icms-form .icms-form-head {
	margin: 0 0 4px !important;
	padding: 0 !important;
	border: 0 !important;
}
.icms-form .icms-form-eyebrow {
	font-family: var(--font-mono) !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--gold-600) !important;
	margin: 0 0 8px !important;
}
/* h2 here replaces .icms-app-panel-head h2 (1.75rem/800). At 1.5rem/700 the
   heading stops competing with the section legends underneath it. */
.icms-form .icms-form-head h2 {
	font-family: var(--font-display) !important;
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	letter-spacing: -.02em !important;
	color: var(--ink-900) !important;
	line-height: 1.2 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	display: block !important;
}
.icms-form .icms-form-sub {
	font-size: 14px !important;
	color: var(--ink-500) !important;
	line-height: 1.55 !important;
	max-width: 66ch !important;
	margin: 0 !important;
}

/* ═══════ 2. SECTIONS ════════════════════════════════════════════════════
   <fieldset> + a legend row. Real fieldsets, because grouping 18 controls is
   as much an accessibility win as a visual one — screen readers announce the
   group name with each field. The legend is a plain child div, not <legend>:
   <legend> cannot be flexed reliably across browsers, and it breaks out of the
   fieldset's border box. */

.icms-form .icms-fieldset {
	border: 0 !important;
	margin: 26px 0 0 !important;
	padding: 0 !important;
	min-width: 0 !important;   /* fieldset defaults to min-content — kills grid */
}
.icms-form .icms-fieldset:first-of-type { margin-top: 22px !important; }

.icms-form .icms-legend {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	margin: 0 0 16px !important;
	padding: 0 0 10px !important;
	border-bottom: 1px solid var(--ink-100) !important;
}
.icms-form .icms-legend-ic {
	width: 28px !important;
	height: 28px !important;
	border-radius: 8px !important;
	background: var(--gold-100) !important;
	color: var(--gold-700) !important;
	display: grid !important;
	place-items: center !important;
	font-size: 13px !important;
	flex: 0 0 auto !important;
}
.icms-form .icms-legend-t {
	font-family: var(--font-display) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
	color: var(--ink-900) !important;
}

/* ═══════ 3. GRID ════════════════════════════════════════════════════════ */

.icms-form .icms-form-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	column-gap: 20px !important;
	row-gap: 18px !important;
	margin: 0 !important;
}
.icms-form .icms-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.icms-form .icms-field-wide { grid-column: 1 / -1 !important; }

/* ═══════ 4. FIELD ═══════════════════════════════════════════════════════ */

.icms-form .field {
	display: flex !important;
	flex-direction: column !important;
	min-width: 0 !important;
}

/* Sentence case, 13px. The 11px uppercase + .05em tracking it replaces read as
   a database admin screen once 18 of them stacked up. */
.icms-form .field label {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	margin: 0 0 6px !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ink-700) !important;
}

/* Lean leading icon: 12px, muted slate, fixed 14px box so every label's text
   starts on the same x. Deliberately NOT gold — at 18 fields a column of gold
   marks competes with the labels instead of guiding the eye. The gold accent
   is spent on the section legends and the focus ring, where it counts. */
.icms-form .field label > i {
	flex: 0 0 auto !important;
	width: 14px !important;
	text-align: center !important;
	font-size: 12px !important;
	color: var(--ink-400) !important;
}

.icms-form .field .required {
	color: var(--danger-500) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	margin-left: -3px !important;   /* hugs the word it qualifies */
}
.icms-form .field .icms-optional,
.icms-form .icms-optional {
	margin-left: auto !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	color: var(--ink-400) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* ── Controls ──
   44px, not 42: css/responsive.css sets --touch: 3rem (48px) as the touch
   target floor and 44 is the practical compromise the rest of the app already
   uses for buttons. 1px hairline instead of 1.5px slate — across 18 fields the
   heavier border was most of the visual noise. */
.icms-form .field input[type="text"],
.icms-form .field input[type="number"],
.icms-form .field input[type="email"],
.icms-form .field input[type="tel"],
.icms-form .field input[type="date"],
.icms-form .field select,
.icms-form .field textarea {
	width: 100% !important;
	min-height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 10px !important;
	background: var(--surface-card) !important;
	color: var(--ink-900) !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	outline: none !important;
	box-sizing: border-box !important;
	transition: border-color .15s var(--ease, ease), box-shadow .15s var(--ease, ease) !important;
}
.icms-form .field textarea {
	padding: 12px 14px !important;
	line-height: 1.55 !important;
	resize: vertical !important;
	min-height: 110px !important;
}
.icms-form .field input::placeholder,
.icms-form .field textarea::placeholder {
	color: var(--ink-400) !important;
	font-weight: 400 !important;
}
.icms-form .field input:hover,
.icms-form .field select:hover,
.icms-form .field textarea:hover { border-color: var(--ink-300) !important; }

/* Gold focus ring — the one distinctive touch worth keeping from the old
   design, retuned to the --gold-500 token (#c9962f) which clears AA on white;
   the old #d4a35a did not. */
.icms-form .field input:focus,
.icms-form .field select:focus,
.icms-form .field textarea:focus {
	border-color: var(--gold-500) !important;
	box-shadow: 0 0 0 4px rgba(201, 150, 47, .16) !important;
	background: var(--surface-card) !important;
}
/* Keyboard users get the same ring on :focus-visible even where a control is
   focused programmatically (validateStep1 focuses the first bad field). */
.icms-form .field input:focus-visible,
.icms-form .field select:focus-visible,
.icms-form .field textarea:focus-visible { outline: none !important; }

.icms-form .field select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 36px !important;
	cursor: pointer !important;
}

/* ── Hint ──
   Used sparingly and on purpose: only where a control's BEHAVIOUR needs
   explaining (e.g. "Start times update to match"). A hint under every field is
   noise, not help. */
.icms-form .field .icms-field-hint,
.icms-form .icms-field-hint {
	display: block !important;
	margin-top: 6px !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: var(--ink-500) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* ── Error ──
   Replaces the single generic "Please fill in all required fields" toast.
   JS toggles .is-invalid on the .field; the message element is always present
   in the markup so nothing has to be created at validation time. */
.icms-form .field .icms-field-error {
	display: none !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: 6px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--danger-500) !important;
}
.icms-form .field.is-invalid .icms-field-error { display: flex !important; }
.icms-form .field.is-invalid .icms-field-hint { display: none !important; }
/* Ties the base control rule above on specificity (0,3,1) and wins on source
   order — keep this block BELOW it. `border` shorthand rather than
   `border-color` so width and style are restated together and the error border
   never half-inherits from whichever rule wins the other longhands.

   Debugging note: these two declarations sit behind the `transition` on the
   base rule. In a headless/undisplayed browser pane no frames are produced, so
   the transition never advances and getComputedStyle reports the START value —
   a grey border and a transparent zero shadow — which looks exactly like the
   rule failing to apply. Strip the transition before measuring. */
.icms-form .field.is-invalid input,
.icms-form .field.is-invalid select,
.icms-form .field.is-invalid textarea {
	border: 1px solid var(--danger-500) !important;
	box-shadow: 0 0 0 4px rgba(220, 38, 38, .12) !important;
}
/* Focusing a bad field returns it to the neutral ring — the error text stays,
   so the message persists while the trainer fixes it. */
.icms-form .field.is-invalid input:focus,
.icms-form .field.is-invalid select:focus,
.icms-form .field.is-invalid textarea:focus {
	border: 1px solid var(--gold-500) !important;
	box-shadow: 0 0 0 4px rgba(201, 150, 47, .16) !important;
}

/* ── Combobox (college search) ──
   js/app.js:13750 discovers these with querySelectorAll(".icms-combobox") and
   builds .icms-combo-opt children into #collegeComboList. Structure is a JS
   contract — only the caret offset changes here, to track the 44px control. */
.icms-form .field .icms-combobox { position: relative !important; }
.icms-form .field .icms-combobox input { padding-right: 36px !important; }
.icms-form .field .icms-combobox-caret {
	top: 22px !important;
	right: 14px !important;
	color: var(--ink-400) !important;
}

/* ═══════ 5. LOGO TILE ═══════════════════════════════════════════════════
   Keeps #logoUpload / previewLogo(this) / #logoPreviewContainer untouched —
   this is presentation only. */

.icms-form .icms-logo-drop {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	min-height: 44px !important;
	padding: 12px 14px !important;
	border: 1px dashed var(--ink-300) !important;
	border-radius: 12px !important;
	background: var(--ink-50) !important;
	cursor: pointer !important;
	transition: border-color .15s var(--ease, ease), background .15s var(--ease, ease) !important;
}
.icms-form .icms-logo-drop:hover,
.icms-form .icms-logo-drop:focus-visible {
	border-color: var(--gold-500) !important;
	background: var(--gold-50) !important;
}
.icms-form .icms-logo-empty {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--ink-700) !important;
}
.icms-form .icms-logo-empty i {
	width: 38px !important;
	height: 38px !important;
	border-radius: 9px !important;
	background: var(--surface-card) !important;
	border: 1px solid var(--ink-200) !important;
	color: var(--gold-600) !important;
	display: grid !important;
	place-items: center !important;
	font-size: 15px !important;
	flex: 0 0 auto !important;
}
.icms-form .icms-logo-empty small {
	display: block !important;
	font-size: 11.5px !important;
	font-weight: 400 !important;
	color: var(--ink-500) !important;
}

/* ═══════ 6. STEPS ═══════════════════════════════════════════════════════
   One component for all three modules. Documents ships 3 segments, Exam 4,
   Notes 3 — the segments flex, so the count is a markup decision. Replaces
   `.progress .step` (icms-app.css), `.exam-step` (exam.css) and the numbered
   circles Notes drew inside its card headings. */

.icms-steps {
	display: flex !important;
	align-items: stretch !important;
	gap: 0 !important;
	/* width + align-self, not just max-width: `.progress.icms-app-progress` is a
	   flex column with centred items, so without these the bar collapses to its
	   content width (229px inside a 375px phone). The component must not depend
	   on how its parent aligns children — Exam and Notes mount it elsewhere. */
	width: 100% !important;
	align-self: stretch !important;
	max-width: 760px !important;
	margin: 0 auto 20px !important;
	padding: 5px !important;
	background: var(--surface-card) !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 12px !important;
	box-sizing: border-box !important;
}
.icms-steps .icms-step {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	font-family: var(--font-body) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--ink-500) !important;
	cursor: pointer !important;
	transition: background .15s var(--ease, ease), color .15s var(--ease, ease) !important;
}
.icms-steps .icms-step:hover { background: var(--ink-50) !important; color: var(--ink-700) !important; }
.icms-steps .icms-step-n {
	width: 22px !important;
	height: 22px !important;
	flex: 0 0 auto !important;
	border-radius: 50% !important;
	background: var(--ink-100) !important;
	color: var(--ink-500) !important;
	display: grid !important;
	place-items: center !important;
	font-family: var(--font-mono) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
}
.icms-steps .icms-step-lbl {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}
.icms-steps .icms-step.active {
	background: var(--ink-900) !important;
	color: #fff !important;
}
.icms-steps .icms-step.active .icms-step-n {
	background: var(--gold-500) !important;
	color: var(--ink-900) !important;
}
.icms-steps .icms-step.done { color: var(--gold-700) !important; }
.icms-steps .icms-step.done .icms-step-n {
	background: var(--gold-500) !important;
	color: var(--ink-900) !important;
}

/* ═══════ 7. DROPZONE ════════════════════════════════════════════════════ */

.icms-form .icms-drop {
	padding: 36px 24px !important;
	border: 1.5px dashed var(--ink-300) !important;
	border-radius: 14px !important;
	background: var(--ink-50) !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: border-color .2s var(--ease, ease), background .2s var(--ease, ease) !important;
}
/* Three modules, three different drag-state class names, all pre-existing:
   `.dragover` (js/app.js, Documents), `.drag` (exam/js/app.js) and `.is-drag`
   (notes/js/app.js). Listed rather than unified — renaming any of them would
   mean touching five drag/drop handlers for no visible gain. */
.icms-form .icms-drop:hover,
.icms-form .icms-drop.dragover,
.icms-form .icms-drop.drag,
.icms-form .icms-drop.is-drag,
.icms-form .icms-drop:focus-visible {
	border-color: var(--gold-500) !important;
	background: var(--gold-50) !important;
}
.icms-form .icms-drop-ic {
	width: 52px !important;
	height: 52px !important;
	margin: 0 auto 14px !important;
	border-radius: 14px !important;
	background: var(--surface-card) !important;
	border: 1px solid var(--ink-200) !important;
	color: var(--gold-600) !important;
	display: grid !important;
	place-items: center !important;
	font-size: 22px !important;
	box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
}
.icms-form .icms-drop-t {
	font-family: var(--font-display) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
	color: var(--ink-900) !important;
	margin-bottom: 5px !important;
}
.icms-form .icms-drop-h {
	font-size: 13.5px !important;
	color: var(--ink-500) !important;
}
.icms-form .icms-drop-h b { color: var(--ink-700) !important; font-weight: 600 !important; }

/* Requirement chips — what the four numbered instruction steps compress to. */
.icms-form .icms-chips {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-top: 16px !important;
}
.icms-form .icms-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 6px 13px !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 999px !important;
	background: var(--surface-card) !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: var(--ink-600) !important;
}
.icms-form .icms-chip i { color: var(--gold-600) !important; font-size: 11.5px !important; }

/* ── File chip ──
   Replaces the single-line #fileStatus. Name, size and a Replace button, so a
   wrong file is both obvious and fixable without a page reload. */
/* Hidden until a file is chosen. setFileStatus() (js/app.js) adds `.show`;
   it rewrites className wholesale, so it must keep emitting `icms-file` too —
   that is why the class list there is spelled out rather than appended to. */
.icms-form .icms-file { display: none !important; }
.icms-form .icms-file.show {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin-top: 14px !important;
	padding: 13px 15px !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 12px !important;
	background: var(--surface-card) !important;
}
/* Error / success recolour the icon tile only — the chip itself stays neutral
   so a long filename never sits on a coloured wash. */
.icms-form .icms-file.error .icms-file-ic { background: #fef2f2 !important; color: #b91c1c !important; }
.icms-form .icms-file.success .icms-file-ic { background: var(--success-100) !important; color: var(--success-700) !important; }
/* The indeterminate bar only runs while parsing — i.e. neither state is set. */
.icms-form .icms-file.success .icms-bar,
.icms-form .icms-file.error .icms-bar { display: none !important; }
.icms-form .icms-file-ic {
	width: 40px !important;
	height: 40px !important;
	flex: 0 0 auto !important;
	border-radius: 10px !important;
	display: grid !important;
	place-items: center !important;
	font-size: 17px !important;
	/* Word blue / PDF red are the file formats' own identities, not brand
	   colours — no token exists and inventing one would be wrong. */
	background: #eff6ff !important;
	color: #1d4ed8 !important;
}
.icms-form .icms-file-ic--pdf { background: #fef2f2 !important; color: #b91c1c !important; }
.icms-form .icms-file-b { flex: 1 1 auto !important; min-width: 0 !important; }
.icms-form .icms-file-n {
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--ink-900) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.icms-form .icms-file-m {
	margin-top: 2px !important;
	font-family: var(--font-mono) !important;
	font-size: 12px !important;
	color: var(--ink-500) !important;
}
.icms-form .icms-file-x {
	flex: 0 0 auto !important;
	height: 34px !important;
	padding: 0 13px !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 8px !important;
	background: var(--surface-card) !important;
	font-family: var(--font-body) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--ink-600) !important;
	cursor: pointer !important;
}
.icms-form .icms-file-x:hover { border-color: var(--ink-300) !important; background: var(--ink-50) !important; }

/* Indeterminate progress — parsing plus AI extraction can run for seconds with
   no other sign that anything is happening. */
.icms-form .icms-bar {
	height: 4px !important;
	margin-top: 10px !important;
	border-radius: 999px !important;
	background: var(--ink-100) !important;
	overflow: hidden !important;
}
.icms-form .icms-bar > span {
	display: block !important;
	height: 100% !important;
	width: 38% !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, var(--gold-400), var(--gold-600)) !important;
	animation: icms-bar-slide 1.25s var(--ease, ease) infinite !important;
}
@keyframes icms-bar-slide {
	0%   { margin-left: -40%; }
	100% { margin-left: 100%; }
}

/* Result line — what the one-line "✔ Loaded …" summary becomes. */
.icms-form .icms-result {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	margin-top: 12px !important;
	padding: 11px 14px !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	background: var(--success-100) !important;
	border: 1px solid #a7f3d0 !important;   /* emerald-200 — no token */
	color: var(--success-700) !important;
}
.icms-form .icms-result i { font-size: 14px !important; }
.icms-form .icms-result--warn {
	background: var(--gold-100) !important;
	border-color: var(--gold-300) !important;
	color: var(--gold-700) !important;
}

/* ═══════ 8. CHOICE CARDS ════════════════════════════════════════════════
   The native radio is hidden and redrawn, so the hit target is the whole card
   and the selected state is legible at a glance across five options.
   `:has()` is NOT used for the checked state — exam.css relies on it today and
   it silently does nothing in older WebView builds. JS toggles .is-on. */

.icms-form .icms-choice-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 12px !important;
}
/* Two-up variant — used by the Notes pay modal, where four price tiers in a
   narrow dialog read better as a 2×2 block than a squeezed row. */
.icms-form .icms-choice-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.icms-form .icms-choice-s em {
	display: inline-block !important;
	margin-left: 6px !important;
	padding: 1px 7px !important;
	border-radius: 999px !important;
	background: var(--gold-100) !important;
	color: var(--gold-700) !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	font-style: normal !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
}
.icms-form .icms-choice {
	position: relative !important;
	display: block !important;
	padding: 16px 16px 16px 46px !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 12px !important;
	background: var(--surface-card) !important;
	cursor: pointer !important;
	transition: border-color .15s var(--ease, ease), background .15s var(--ease, ease), box-shadow .15s var(--ease, ease) !important;
}
.icms-form .icms-choice:hover { border-color: var(--ink-300) !important; background: var(--ink-50) !important; }
.icms-form .icms-choice input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	pointer-events: none !important;
}
.icms-form .icms-choice-mark {
	position: absolute !important;
	left: 16px !important;
	top: 17px !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	border: 1.5px solid var(--ink-300) !important;
	background: var(--surface-card) !important;
	display: grid !important;
	place-items: center !important;
	transition: border-color .15s var(--ease, ease), background .15s var(--ease, ease) !important;
}
.icms-form .icms-choice-mark::after {
	content: "" !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: var(--surface-card) !important;
	transform: scale(0) !important;
	transition: transform .15s var(--ease, ease) !important;
}
.icms-form .icms-choice.is-on {
	border-color: var(--gold-500) !important;
	background: var(--gold-50) !important;
	box-shadow: 0 0 0 3px rgba(201, 150, 47, .13) !important;
}
.icms-form .icms-choice.is-on .icms-choice-mark {
	border-color: var(--gold-600) !important;
	background: var(--gold-600) !important;
}
.icms-form .icms-choice.is-on .icms-choice-mark::after { transform: scale(1) !important; }

/* Same states driven by the radio itself, so the cards work with no JS at all
   (the Exam module has no click handler on them — it reads
   `input[name="examMode"]:checked` at submit time).

   These MUST stay in their own rules rather than being appended to the
   `.is-on` selector lists above: a browser that does not understand `:has()`
   discards the whole selector list it appears in, which would take the
   working `.is-on` styling down with it. Separate rules degrade instead. */
.icms-form .icms-choice:has(input[type="radio"]:checked) {
	border-color: var(--gold-500) !important;
	background: var(--gold-50) !important;
	box-shadow: 0 0 0 3px rgba(201, 150, 47, .13) !important;
}
.icms-form .icms-choice:has(input[type="radio"]:checked) .icms-choice-mark {
	border-color: var(--gold-600) !important;
	background: var(--gold-600) !important;
}
.icms-form .icms-choice:has(input[type="radio"]:checked) .icms-choice-mark::after {
	transform: scale(1) !important;
}
/* Keyboard focus lands on the hidden input; ring the card instead. */
.icms-form .icms-choice input[type="radio"]:focus-visible + .icms-choice-mark {
	box-shadow: 0 0 0 4px rgba(201, 150, 47, .3) !important;
}
.icms-form .icms-choice-t {
	display: block !important;
	margin-bottom: 5px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: -.005em !important;
	color: var(--ink-900) !important;
}
.icms-form .icms-choice-t small { font-size: 12px !important; font-weight: 500 !important; color: var(--ink-500) !important; }
.icms-form .icms-choice-s {
	display: block !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: var(--ink-600) !important;
}

/* ═══════ 9. DISCLOSURE ══════════════════════════════════════════════════
   Optional field groups (exam letterhead, notes paste-fallback). Replaces the
   six inline style= attributes exam-app.html carries today. */

.icms-form .icms-more {
	margin-top: 22px !important;
	border: 1px solid var(--ink-200) !important;
	border-radius: 12px !important;
	background: var(--surface-card) !important;
	overflow: hidden !important;
}
.icms-form .icms-more > summary {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 14px 18px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--ink-800) !important;
	cursor: pointer !important;
	list-style: none !important;
}
.icms-form .icms-more > summary::-webkit-details-marker { display: none !important; }
.icms-form .icms-more > summary:hover { background: var(--ink-50) !important; }
.icms-form .icms-more-ic {
	width: 26px !important;
	height: 26px !important;
	flex: 0 0 auto !important;
	border-radius: 7px !important;
	background: var(--ink-100) !important;
	color: var(--ink-600) !important;
	display: grid !important;
	place-items: center !important;
	font-size: 11.5px !important;
}
.icms-form .icms-more-s { font-weight: 500 !important; font-size: 12.5px !important; color: var(--ink-500) !important; }
.icms-form .icms-more-x { margin-left: auto !important; color: var(--ink-400) !important; transition: transform .18s var(--ease, ease) !important; }
.icms-form .icms-more[open] > summary { border-bottom: 1px solid var(--ink-100) !important; }
.icms-form .icms-more[open] > summary .icms-more-x { transform: rotate(180deg) !important; }
.icms-form .icms-more-body { padding: 20px 18px !important; }

/* Explicitly hide the body while closed. This is NOT redundant with the
   browser's built-in <details> behaviour: giving <summary> `display: flex`
   above (needed for the icon + label + chevron row) disturbs the UA rendering
   that normally hides a closed details' other children, and the body stayed
   visible — the Notes paste textarea and the Exam letterhead fields were both
   permanently expanded despite the disclosure reading as collapsed.
   Do not remove this without re-testing BOTH disclosures at `open=false`. */
.icms-form .icms-more:not([open]) > .icms-more-body { display: none !important; }

/* ═══════ 10. PAY SUMMARY ════════════════════════════════════════════════
   Promoted from exam.css .exam-pay-summary — the best-looking element in the
   app — so Notes' pay modal and the Documents credit CTA can share it. */

.icms-pay-summary {
	padding: 22px !important;
	border-radius: 14px !important;
	background: var(--ink-900) !important;
	color: var(--ink-200) !important;
}
.icms-pay-summary-h {
	margin: 0 0 16px !important;
	font-family: var(--font-mono) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--gold-400) !important;
}
.icms-pay-summary-l {
	display: flex !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 7px 0 !important;
	font-size: 13.5px !important;
	color: var(--ink-300) !important;
}
.icms-pay-summary-l strong { color: #fff !important; font-weight: 600 !important; }
.icms-pay-summary hr { border: 0 !important; border-top: 1px solid rgba(255, 255, 255, .12) !important; margin: 12px 0 !important; }
.icms-pay-summary-total {
	display: flex !important;
	justify-content: space-between !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #fff !important;
}
.icms-pay-summary-total strong { color: var(--gold-400) !important; }

/* ═══════ 11. ACTIONS ════════════════════════════════════════════════════ */

.icms-form .icms-form-actions {
	display: flex !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	margin-top: 28px !important;
	padding-top: 20px !important;
	border-top: 1px solid var(--ink-100) !important;
}
.icms-form .icms-form-actions--split { justify-content: space-between !important; }

/* Rectangular-with-soft-corners rather than the full pill: at 46px tall a
   999px radius reads as a chat bubble next to 10px form controls. */
.icms-form .icms-form-actions .btn,
.icms-form .icms-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	height: 46px !important;
	padding: 0 22px !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	font-family: var(--font-body) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	transition: background .15s var(--ease, ease), border-color .15s var(--ease, ease), transform .12s var(--ease, ease) !important;
}
.icms-form .icms-form-actions .btn:active,
.icms-form .icms-btn:active { transform: translateY(1px) !important; }

.icms-form .icms-form-actions .btn-primary,
.icms-form .icms-btn--primary {
	background: var(--ink-900) !important;
	color: #fff !important;
}
.icms-form .icms-form-actions .btn-primary:hover,
.icms-form .icms-btn--primary:hover { background: var(--ink-800) !important; }

.icms-form .icms-btn--gold {
	background: var(--gold-500) !important;
	color: var(--ink-900) !important;
}
.icms-form .icms-btn--gold:hover { background: var(--gold-600) !important; color: #fff !important; }

.icms-form .icms-form-actions .btn-ghost,
.icms-form .icms-btn--ghost {
	background: var(--surface-card) !important;
	border-color: var(--ink-200) !important;
	color: var(--ink-700) !important;
}
.icms-form .icms-form-actions .btn-ghost:hover,
.icms-form .icms-btn--ghost:hover { border-color: var(--ink-300) !important; background: var(--ink-50) !important; }

/* ═══════ 12. RESPONSIVE ═════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.icms-form { padding: 24px 22px !important; }
	.icms-form .icms-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.icms-form .icms-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
	.icms-form .icms-choice-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
	.icms-form { padding: 20px 16px !important; border-radius: 14px !important; }
	.icms-form .icms-form-grid,
	.icms-form .icms-form-grid--2 { grid-template-columns: 1fr !important; row-gap: 16px !important; }
	.icms-form .icms-form-head h2 { font-size: 1.3rem !important; }
	.icms-form .icms-drop { padding: 28px 16px !important; }
	.icms-form .icms-form-actions { flex-direction: column-reverse !important; }
	.icms-form .icms-form-actions .btn,
	.icms-form .icms-btn { width: 100% !important; }
	/* File chip: the Replace button drops under the name rather than crushing it */
	.icms-form .icms-file { flex-wrap: wrap !important; }
	.icms-form .icms-file-b { flex: 1 1 100% !important; order: 2 !important; }
	.icms-form .icms-file-x { order: 3 !important; margin-left: auto !important; }
}
/* Phones: only the active step keeps its label, so the bar never wraps. */
@media (max-width: 560px) {
	.icms-steps { max-width: 100% !important; }
	.icms-steps .icms-step .icms-step-lbl { display: none !important; }
	.icms-steps .icms-step.active .icms-step-lbl { display: block !important; }
	.icms-steps .icms-step { padding: 10px 8px !important; }
}

/* ═══════ 13. MOTION + PRINT ═════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.icms-form .icms-bar > span { animation: none !important; width: 100% !important; }
	.icms-form *,
	.icms-steps * { transition: none !important; }
}

/* The wizard chrome is not part of any printed document. print.css owns the
   .doc-* rules; this only hides controls that would otherwise print blank. */
@media print {
	.icms-steps,
	.icms-form .icms-form-actions,
	.icms-form .icms-drop,
	.icms-form .icms-chips,
	.icms-form .icms-file-x { display: none !important; }
	.icms-form { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
}