/* ════════════════════════════════════════════════════════════════════
   AUTH SURFACES  ·  v3.0 (2026-08-03)  ·  loaded LAST in _head.html
   ════════════════════════════════════════════════════════════════════
   Owns all three sign-in surfaces, so there is exactly one file to read
   when any of them looks wrong:

     #authModal        split-panel sign-in / create-account  (4 shells)
     #adminLoginModal  admin access                          (index.php)
     #resetModal       forgot-password request  (+ admin.php, which links
                       this file for the same reason it links
                       profile-modal.css — it includes extra-modals.html)

   WHY THIS FILE EXISTS AT ALL
   ───────────────────────────
   The previous version lived in css/icms-extras.css at class-level
   specificity, and css/v4.css carried an `#authModal .modal-box {
   padding: 32px 36px !important; max-width: 440px !important;
   overflow: visible !important }` block. ID beats class, so the
   edge-to-edge card was rendered inside a 36px white frame and the
   "wider box on Register" rule never applied. That v4.css block has
   been deleted; this file is the single owner. Do not add #authModal /
   #adminLoginModal / #resetModal rules to any other stylesheet.

   SPECIFICITY POLICY
   ──────────────────
   Everything is prefixed with the modal's ID (1,1,0+) so it wins over
   the earlier layers WITHOUT an !important arms race:
     · css/tweaks.css      .mbtn{background:navy!important}
     · css/responsive.css  .mfield label{font-size/weight/colour!important}
     · css/responsive.css  page-wide p{font-size!important}
     · css/modals.css      .modal-box / .mfield / .mbtn base
   `!important` appears only where an earlier `!important` has to be
   beaten at equal specificity, and each one says which rule it beats.

   ⚠ ONE DELIBERATE EXCEPTION — see §1. The overlay's `display` must
   stay at CLASS-level specificity or partials/_auth-antiflash.html
   stops working and the modal flashes over every module workspace.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   1 · OVERLAY
   ════════════════════════════════════════════════════════════════════
   DO NOT raise the specificity of these two rules. partials/_auth-antiflash.html
   emits, from an inline <style> LATER in the document than this file:

       .icms-auth-overlay { display: none !important; }                    (0,1,0)
       body.ics-pre-login.<flag> .icms-auth-overlay { display:flex!important } (0,3,0)

   With equal specificity the later inline rule wins, which is exactly
   how /exam/, /notes/ and /referral/ keep the modal off screen until
   their own auth check has run. An `#authModal{display:flex!important}`
   here (1,1,0) would out-specify it and bring the flash straight back. */
.icms-auth-overlay {
	display: flex !important;   /* beats .modal-overlay base + is the state _auth-antiflash toggles */
}
.icms-auth-overlay.hidden {
	display: none !important;   /* beats the rule above at equal weight, higher specificity */
}

/* Everything that is NOT `display` may be ID-scoped safely. */
#authModal.icms-auth-overlay {
	position: fixed;
	inset: 0;
	z-index: 5000;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* !important on both: css/ui-enhance.css sets
	   `.modal-overlay{background:rgba(15,23,42,.55)!important;backdrop-filter:blur(4px)!important}`
	   and css/tweaks.css adds `blur(8px)!important` — class-level !important
	   beats a plain ID rule, so without these the backdrop stayed the old
	   washed-out grey. */
	background: rgba(9, 15, 30, 0.72) !important;
	backdrop-filter: blur(7px) !important;
	-webkit-backdrop-filter: blur(7px);
	overflow-y: auto;
}

/* ════════════════════════════════════════════════════════════════════
   2 · BOX — the two-column grid
   ════════════════════════════════════════════════════════════════════ */
#authModal .icms-auth-box {
	/* The height cap lives in a custom property because all THREE of the box,
	   the rail and the panel have to carry it. A grid container's `max-height`
	   clamps the box but does NOT re-run track sizing: the single auto row
	   still resolves to the max-content height of the tallest item, so the
	   long Create Account form produced an 809px row inside a 588px box and
	   the bottom of both columns was simply clipped away. Capping the two
	   grid ITEMS at the same value makes the row top out there instead, and
	   .icms-auth-body scrolls inside the panel as intended. */
	--auth-h: min(92vh, 720px);
	display: grid !important;               /* beats .modal-box's block layout */
	grid-template-columns: 320px minmax(0, 1fr);
	width: 100%;
	max-width: 880px !important;            /* beats css/modals.css .modal-box{max-width:440px} */
	max-height: var(--auth-h);
	margin: auto;
	padding: 0 !important;                  /* beats .modal-box{padding:36px} */
	overflow: hidden;                       /* clips the rail into the rounded corners */
	/* border / box-shadow / border-radius / animation all carry !important
	   because css/tweaks.css declares `.modal-box{border-radius / box-shadow /
	   border / animation: modalReveal … !important}`. Without them the box got
	   a near-invisible white hairline instead of the slate one, and played
	   modalReveal — which also meant the exit animation below never ran. */
	border: 1px solid var(--ink-200, #e2e8f0) !important;
	border-radius: 20px !important;
	background: var(--surface-card, #fff);
	box-shadow: 0 32px 80px rgba(9, 15, 30, 0.34), 0 4px 14px rgba(9, 15, 30, 0.12) !important;
	color: var(--ink-800, #1e293b);
	font-family: var(--font-body);
	animation: icms-auth-pop 0.24s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

/* Create Account has five more fields than Sign in — give the panel the
   extra room instead of making it scroll. js/app.js:switchAuthTab()
   already toggles this body class; no JS change was needed. */
body.icms-auth-tab-register #authModal .icms-auth-box {
	max-width: 980px !important;
}

/* Keyframe name is load-bearing: js/icms-app-extras.js references
   `animation: icms-auth-pop …` in an injected modal. Do not rename. */
@keyframes icms-auth-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

/* Exit animation. Without this rule the box snaps: js/ui-polish.js adds
   .icms-closing and css/icms-modern.css §9.4 targets
   `.modal-overlay.icms-closing .modal-box` (0,3,0), which loses to the
   `animation` set above (1,1,0). */
#authModal.icms-closing .icms-auth-box {
	animation: icmsPopOut 0.18s var(--ease, ease) both !important;
}

/* ════════════════════════════════════════════════════════════════════
   3 · BRAND RAIL
   ════════════════════════════════════════════════════════════════════
   Never display:none — it carries #authDlgTitle, this dialog's
   accessible name (aria-labelledby). Below 900px it becomes a bar (§11). */
#authModal .icms-auth-rail {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 30px 30px;
	overflow: hidden;          /* clips the oversized ::after motif below */
	max-height: var(--auth-h); /* see the note on .icms-auth-box */
	color: #fff;
	background:
		radial-gradient(120% 90% at 8% 0%, rgba(224, 182, 98, 0.20) 0%, rgba(224, 182, 98, 0) 58%),
		linear-gradient(165deg, #0f172a 0%, #16233f 55%, #0f172a 100%);
}

/* Oversized, very low-contrast echo of the 2x2 logo mark. Pure CSS —
   no image request, and it survives the boot gate's first paint. */
#authModal .icms-auth-rail::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -70px;
	width: 240px;
	height: 240px;
	border-radius: 30px;
	background:
		linear-gradient(to right, rgba(224, 182, 98, 0.045) 0 47%, transparent 47% 53%, rgba(224, 182, 98, 0.045) 53% 100%),
		linear-gradient(to bottom, rgba(224, 182, 98, 0.045) 0 47%, transparent 47% 53%, rgba(224, 182, 98, 0.045) 53% 100%);
	transform: rotate(-12deg);
	pointer-events: none;
}

#authModal .icms-auth-mark {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0 0 16px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(224, 182, 98, 0.32);
}
#authModal .icms-auth-title {
	position: relative;
	z-index: 1;
	margin: 0 0 18px;
	font-family: var(--font-display);
	font-size: 15px !important;   /* beats css/responsive.css heading rules */
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	color: #fff !important;
}
#authModal .icms-auth-title span { color: var(--gold-400, #e0b662); }

#authModal .icms-auth-lede {
	position: relative;
	z-index: 1;
	margin: 0 0 22px;
	font-family: var(--font-display);
	font-size: 26px !important;   /* beats css/responsive.css page-wide p{font-size!important} */
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.025em;
	color: #fff;
	text-wrap: balance;
}
/* Same gold italic accent the landing hero uses on the same phrase. */
#authModal .icms-auth-lede em {
	color: var(--gold-400, #e0b662);
	font-style: italic;
}

#authModal .icms-auth-points {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#authModal .icms-auth-points li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13px !important;   /* beats css/responsive.css li{font-size!important} */
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.76);
}
#authModal .icms-auth-points li i {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	font-size: 9px;
	color: var(--gold-400, #e0b662);
	background: rgba(224, 182, 98, 0.16);
}

#authModal .icms-auth-railfoot {
	position: relative;
	z-index: 1;
	margin: auto 0 0;
	padding-top: 22px;
	font-size: 12px !important;   /* beats css/responsive.css page-wide p{font-size!important} */
	font-style: italic;
	color: rgba(255, 255, 255, 0.5);
}

/* ════════════════════════════════════════════════════════════════════
   4 · PANEL
   ════════════════════════════════════════════════════════════════════ */
#authModal .icms-auth-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	max-height: var(--auth-h);   /* see the note on .icms-auth-box */
	background: var(--surface-card, #fff);
}

#authModal .icms-auth-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink-400, #94a3b8);
	font-family: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s, color 0.18s;
}
#authModal .icms-auth-close:hover {
	background: var(--ink-100, #eef2f7);
	color: var(--ink-800, #1e293b);
}

/* ════════════════════════════════════════════════════════════════════
   5 · TABS — segmented control
   ════════════════════════════════════════════════════════════════════
   The old strip put a cream fill on the INACTIVE tab and white on the
   active one, which read as broken rather than selected. Here the track
   is tinted and the active tab is a raised white pill. */
#authModal .icms-auth-tabs {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
	/* 52px of top margin, not 26: the close button is absolutely positioned
	   at the panel's top-right and would otherwise sit on top of the
	   "Create account" tab. */
	margin: 52px 30px 20px;
	padding: 4px;
	border: 1px solid var(--ink-200, #e2e8f0);
	/* Rounded rect, not a 999px capsule: at this size a capsule track leaves
	   only 4px between its curve and the active pill's, which reads as the
	   pill spilling out of the track rather than sitting in it. */
	border-radius: 14px;
	background: var(--ink-100, #eef2f7);
}
#authModal .icms-auth-tab {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 9px 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--ink-600, #475569);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
#authModal .icms-auth-tab i { font-size: 12px; }
#authModal .icms-auth-tab:hover { color: var(--ink-900, #0f172a); }
#authModal .icms-auth-tab.active {
	background: var(--surface-card, #fff);
	color: var(--ink-900, #0f172a);
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}
#authModal .icms-auth-tab:focus-visible {
	outline: 2px solid var(--gold-500, #c9962f);
	outline-offset: 1px;
}

/* ════════════════════════════════════════════════════════════════════
   6 · BODY / FORMS
   ════════════════════════════════════════════════════════════════════
   .icms-auth-body is the ONLY scroller in this modal. Nothing inside it
   may carry overflow:hidden — the institution combobox drops its list
   absolutely and would be clipped. */
#authModal .icms-auth-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 0 30px;
	scrollbar-width: thin;
}
#authModal .modal-form { display: none; }
#authModal .modal-form.active { display: block; }

/* ── Fields ─────────────────────────────────────────────────────────
   Labels are sentence case, not 11px ALL-CAPS: with seven of them on
   the register tab the old treatment read as a wall of shouting. The
   field's icon moved from the label into the input as a leading glyph. */
#authModal .mfield { margin-bottom: 14px; }
/* Every declaration here is !important because BOTH css/responsive.css
   (`.mfield label{font-size/weight/colour/font-family}`) and css/tweaks.css
   (`.mfield label{font-size/weight/colour/margin/letter-spacing/text-transform}`)
   force this element at equal specificity. text-transform is the one that
   actually mattered: without it the labels stayed 11px ALL-CAPS. */
#authModal .mfield label {
	display: block;
	margin-bottom: 6px !important;
	font-family: var(--font-body) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ink-700, #334155) !important;
}

#authModal .icms-auth-input { position: relative; display: block; width: 100%; }
#authModal .icms-auth-input > i:first-child {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	font-size: 13px;
	color: var(--ink-400, #94a3b8);
	pointer-events: none;
	transition: color 0.18s;
	z-index: 1;
}
#authModal .icms-auth-input:focus-within > i:first-child { color: var(--gold-600, #b07d1f); }

#authModal .mfield input[type="email"],
#authModal .mfield input[type="text"],
#authModal .mfield input[type="tel"],
#authModal .mfield input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	/* Shorthand, so the 40px left gutter for the glyph can never be
	   re-expanded by an earlier longhand. Password fields re-state
	   padding-right below for the eye button. */
	padding: 12px 14px 12px 40px !important;    /* beats css/responsive.css input{…!important} */
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--radius, 12px);
	background: var(--ink-50, #f8fafc);
	color: var(--ink-900, #0f172a);
	font-family: var(--font-body) !important;
	font-size: 14px !important;                 /* ≥16px under 768px — see §11 */
	line-height: 1.4;
	outline: 0;
	transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
#authModal .mfield input::placeholder { color: var(--ink-400, #94a3b8); }
#authModal .mfield input:hover { border-color: var(--ink-300, #cbd5e1); }
#authModal .mfield input:focus {
	background: var(--surface-card, #fff);
	border-color: var(--gold-500, #c9962f);
	box-shadow: 0 0 0 3px rgba(201, 150, 47, 0.18);
}

#authModal .pw-wrap input { padding-right: 44px !important; }  /* room for .pw-eye */
#authModal .pw-eye {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ink-400, #94a3b8);
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
#authModal .pw-eye:hover { background: var(--ink-100, #eef2f7); color: var(--ink-800, #1e293b); }

/* Register: first / last name side by side */
#authModal .icms-reg-name-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Institution combobox. The caret's default `top: 21px` (css/icms-app.css)
   is calibrated to the wizard's taller field — re-centre it here. */
#authModal .icms-combobox-caret { top: 50%; right: 14px; }
#authModal .icms-combobox input { padding-right: 38px !important; }
#authModal .icms-combobox-list { max-height: 220px; }

/* ════════════════════════════════════════════════════════════════════
   7 · SUBMIT, FORGOT LINK, TERMS
   ════════════════════════════════════════════════════════════════════ */
#authModal .icms-auth-submit {
	width: 100%;
	margin-top: 4px;
	padding: 13px 18px !important;              /* beats css/tweaks.css .mbtn{padding!important} */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	border: 0;
	border-radius: var(--radius, 12px) !important;
	background: var(--ink-900, #0f172a) !important;  /* beats css/tweaks.css .mbtn{background:navy-gradient!important} */
	color: var(--gold-400, #e0b662) !important;
	font-family: var(--font-body) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16) !important;
	transition: transform 0.15s, box-shadow 0.15s, background 0.15s !important;
}
#authModal .icms-auth-submit:hover:not(:disabled) {
	background: #1a2540 !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22) !important;
}
#authModal .icms-auth-submit:active:not(:disabled) { transform: translateY(0); }
#authModal .icms-auth-submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

#authModal .icms-auth-forgot-row {
	display: flex;
	justify-content: flex-end;
	margin: -4px 0 14px;
}
#authModal .icms-auth-forgot-link {
	color: var(--gold-700, #92610f);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
#authModal .icms-auth-forgot-link:hover { text-decoration: underline; }

#authModal .icms-auth-terms {
	margin: 12px 0 0;
	font-size: 11.5px !important;   /* beats css/responsive.css page-wide p{font-size!important} */
	line-height: 1.5;
	text-align: center;
	color: var(--ink-500, #64748b);
}
#authModal .icms-auth-terms a { color: var(--gold-700, #92610f); font-weight: 600; text-decoration: none; }
#authModal .icms-auth-terms a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════
   8 · PASSWORD STRENGTH + MATCH + REFERRAL
   ════════════════════════════════════════════════════════════════════
   js/app.js (initRegStrength) writes the bar's width/background and the
   label's text/colour inline, so this only owns the box model. The
   markup that feeds it lives in partials/register.html — before it was
   added, that listener returned on its first line every keystroke. */
#authModal .icms-auth-strength { margin-top: 8px; }
#authModal .icms-auth-strength-track {
	height: 4px;
	border-radius: 999px;
	background: var(--ink-200, #e2e8f0);
	overflow: hidden;
}
#authModal .icms-auth-strength-track > div {
	width: 0;
	height: 100%;
	border-radius: 999px;
	transition: width 0.2s ease, background 0.2s ease;
}
#authModal #regStrengthLabel {
	margin-top: 5px;
	font-size: 11px;
	font-weight: 600;
}
#authModal .icms-auth-match-msg { margin-top: 5px; font-size: 11px; font-weight: 600; }

#authModal .icms-auth-referral {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 16px;
	padding: 11px 14px;
	border: 1px solid var(--gold-300, #efd4a0);
	border-radius: var(--radius, 12px);
	background: var(--gold-50, #fdf9f2);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--gold-700, #92610f);
}
#authModal .icms-auth-referral i { color: var(--gold-600, #b07d1f); }

/* ════════════════════════════════════════════════════════════════════
   9 · ERRORS  (+ the account-disabled card, moved here from icms-extras)
   ════════════════════════════════════════════════════════════════════ */
#authModal .merr {
	display: none;
	margin-bottom: 14px;
	padding: 11px 14px !important;   /* beats css/tweaks.css .merr{padding!important} */
	border: 1px solid #fecaca;
	border-left: 3px solid #dc2626;
	border-radius: var(--radius-sm, 8px) !important;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 12.5px !important;
	font-weight: 500;
	line-height: 1.5;
}
#authModal .merr.show,
#authModal .merr:not(:empty) { display: block; }

/* Rendered into #loginErr by renderAccountDisabledNotice() in js/app.js
   when api/login.php answers code=account_disabled. It sits INSIDE .merr,
   so it inherits the red palette and only adds structure. */
.icms-disabled-notice { text-align: left; line-height: 1.6; }
.icms-disabled-title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #991b1b;
}
.icms-disabled-lead { margin: 0 0 8px; font-size: 12px; color: #7f1d1d; }
.icms-disabled-reason {
	margin: 0 0 10px;
	padding: 8px 10px;
	border: 1px solid #fecaca;
	border-left: 3px solid #dc2626;
	border-radius: 6px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-800, #1e293b);
	word-break: break-word;
}
.icms-disabled-reason-label {
	display: block;
	margin-bottom: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #b91c1c;
}
.icms-disabled-contacts { display: flex; flex-wrap: wrap; gap: 8px; }
.icms-disabled-contacts a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border: 1px solid #fecaca;
	border-radius: 999px;
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	color: #b91c1c;
	text-decoration: none;
	word-break: break-all;
}
.icms-disabled-contacts a:hover { background: #fff1f2; border-color: #dc2626; }

/* ════════════════════════════════════════════════════════════════════
   10 · FOOTER
   ════════════════════════════════════════════════════════════════════ */
#authModal .icms-auth-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-shrink: 0;
	margin-top: 4px;
	padding: 14px 30px 18px;
	border-top: 1px solid var(--ink-200, #e2e8f0);
	background: var(--ink-50, #f8fafc);
	font-size: 12px;
}
#authModal .icms-auth-admin-link,
#authModal .icms-auth-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ink-500, #64748b);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	/* Never break mid-word; rely on the footer's flex-wrap to drop the
	   link to a new line if there isn't horizontal room. */
	white-space: nowrap;
	transition: color 0.18s;
}
#authModal .icms-auth-admin-link i,
#authModal .icms-auth-back-link i { font-size: 11px; }
#authModal .icms-auth-admin-link:hover { color: var(--gold-700, #92610f); }
#authModal .icms-auth-back-link:hover { color: var(--ink-900, #0f172a); }
#authModal .icms-auth-footer-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--ink-300, #cbd5e1);
}

/* ════════════════════════════════════════════════════════════════════
   11 · RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */

/* ── < 900px: one column. The rail becomes a compact bar — it is NOT
      hidden, because #authDlgTitle inside it names the dialog. ── */
@media (max-width: 899px) {
	#authModal .icms-auth-box,
	body.icms-auth-tab-register #authModal .icms-auth-box {
		grid-template-columns: 1fr;
		max-width: 460px !important;
		/* Set the variable, not max-height — the rail and panel read it too. */
		--auth-h: 94vh;
	}
	/* Stacked, so the two columns become two rows and their max-heights must
	   add up to --auth-h, not each equal it. The bar is given a fixed height
	   so the panel's share is exactly computable. */
	#authModal .icms-auth-rail {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		height: 66px;
		max-height: 66px;
		padding: 16px 20px;
	}
	#authModal .icms-auth-panel { max-height: calc(var(--auth-h) - 66px); }
	#authModal .icms-auth-rail::after { display: none; }
	#authModal .icms-auth-mark { width: 34px; height: 34px; margin: 0; border-radius: 9px; }
	#authModal .icms-auth-title { margin: 0; font-size: 14.5px !important; }
	/* The selling copy is the first thing to go: on a phone the form is
	   the whole job, and the visitor has already read the landing page. */
	#authModal .icms-auth-lede,
	#authModal .icms-auth-points,
	#authModal .icms-auth-railfoot { display: none; }

	#authModal .icms-auth-close { top: 14px; right: 14px; color: rgba(255, 255, 255, 0.7); }
	#authModal .icms-auth-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

	#authModal .icms-auth-tabs { margin: 18px 20px 16px; }
	#authModal .icms-auth-body { padding: 0 20px; }
	#authModal .icms-auth-footer { padding: 12px 20px 14px; }
}

/* ── ≤ 768px: 16px inputs. css/responsive.css forces this size on every
      input for a reason — anything smaller makes iOS Safari zoom the
      page on focus, and the modal never zooms back out. ── */
@media (max-width: 768px) {
	#authModal .mfield input[type="email"],
	#authModal .mfield input[type="text"],
	#authModal .mfield input[type="tel"],
	#authModal .mfield input[type="password"] {
		font-size: 16px !important;
	}
}

/* ── ≤ 480px ── */
@media (max-width: 480px) {
	#authModal.icms-auth-overlay { padding: 10px; }
	#authModal .icms-auth-box,
	body.icms-auth-tab-register #authModal .icms-auth-box {
		max-width: 100% !important;
		max-height: 96vh;
		border-radius: 16px !important;
	}
	#authModal .icms-auth-tabs { margin: 14px 16px 14px; }
	#authModal .icms-auth-body { padding: 0 16px; }
	#authModal .icms-auth-footer { padding: 11px 16px 13px; gap: 8px; }
	#authModal .mfield { margin-bottom: 12px; }
	#authModal .icms-reg-name-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── ≤ 400px: the tab labels alone need the width ── */
@media (max-width: 400px) {
	#authModal .icms-auth-tab i { display: none; }
	#authModal .icms-auth-tab { font-size: 13px; }
}

/* ── Short viewports (landscape phones, small laptops) ── */
@media (max-height: 700px) {
	#authModal .icms-auth-rail { padding-top: 24px; padding-bottom: 22px; }
	#authModal .icms-auth-lede { margin-bottom: 16px; font-size: 22px !important; }
	#authModal .icms-auth-points { gap: 10px; }
	#authModal .mfield { margin-bottom: 11px; }
}

/* ── Motion ── */
@media (prefers-reduced-motion: reduce) {
	#authModal .icms-auth-box,
	#authModal.icms-closing .icms-auth-box { animation: none !important; }
	#authModal .icms-auth-submit { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   12 · ADMIN LOGIN MODAL  (#adminLoginModal — index.php only)
   ════════════════════════════════════════════════════════════════════
   Same language as the auth modal, single column: this is an internal
   door, not a sales surface. Opened / closed by openAdminLogin() and
   closeAdminLogin() in js/app.js, which swap it with #authModal. */
#adminLoginModal.modal-overlay {
	z-index: 5200;
	padding: 20px;
	/* !important — see the note on #authModal.icms-auth-overlay. */
	background: rgba(9, 15, 30, 0.72) !important;
	backdrop-filter: blur(7px) !important;
	-webkit-backdrop-filter: blur(7px);
}
#adminLoginModal .modal-box {
	width: 100%;
	max-width: 420px !important;
	padding: 0 !important;
	overflow: hidden;
	/* !important — see the note on .icms-auth-box. */
	border: 1px solid var(--ink-200, #e2e8f0) !important;
	border-radius: 20px !important;
	background: var(--surface-card, #fff);
	box-shadow: 0 32px 80px rgba(9, 15, 30, 0.34) !important;
}
#adminLoginModal .icms-adm-head {
	padding: 26px 26px 22px;
	text-align: center;
	color: #fff;
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(224, 182, 98, 0.18) 0%, rgba(224, 182, 98, 0) 60%),
		linear-gradient(165deg, #0f172a 0%, #16233f 100%);
}
#adminLoginModal .icms-adm-mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	border-radius: 12px;
	border: 1px solid rgba(224, 182, 98, 0.32);
	background: rgba(255, 255, 255, 0.07);
	color: var(--gold-400, #e0b662);
	font-size: 17px;
}
#adminLoginModal .icms-adm-head h2 {
	margin: 0 0 4px;
	font-family: var(--font-display) !important;
	font-size: 17px !important;   /* beats css/responsive.css .modal-logo h2{…!important} */
	font-weight: 700 !important;
	color: #fff !important;
}
#adminLoginModal .icms-adm-head p {
	margin: 0;
	font-size: 12.5px !important;
	color: rgba(255, 255, 255, 0.6) !important;
}
#adminLoginModal .icms-adm-body { padding: 22px 26px 24px; }

#adminLoginModal .merr {
	display: none;
	margin-bottom: 14px;
	padding: 11px 14px !important;
	border: 1px solid #fecaca;
	border-left: 3px solid #dc2626;
	border-radius: var(--radius-sm, 8px) !important;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 12.5px !important;
	line-height: 1.5;
}
#adminLoginModal .merr.show, #adminLoginModal .merr:not(:empty) { display: block; }

#adminLoginModal .mfield { margin-bottom: 14px; }
#adminLoginModal .mfield label {
	display: block;
	margin-bottom: 6px !important;   /* see the note on #authModal .mfield label */
	font-family: var(--font-body) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ink-700, #334155) !important;
}
#adminLoginModal .icms-auth-input { position: relative; display: block; width: 100%; }
#adminLoginModal .icms-auth-input > i:first-child {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	font-size: 13px;
	color: var(--ink-400, #94a3b8);
	pointer-events: none;
	z-index: 1;
}
#adminLoginModal .mfield input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px 12px 40px !important;
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--radius, 12px);
	background: var(--ink-50, #f8fafc);
	color: var(--ink-900, #0f172a);
	font-family: var(--font-body) !important;
	font-size: 14px !important;
	outline: 0;
	transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
#adminLoginModal .mfield input:focus {
	background: var(--surface-card, #fff);
	border-color: var(--gold-500, #c9962f);
	box-shadow: 0 0 0 3px rgba(201, 150, 47, 0.18);
}
#adminLoginModal .pw-wrap input { padding-right: 44px !important; }
#adminLoginModal .pw-eye {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ink-400, #94a3b8);
	font-size: 13px;
	cursor: pointer;
}
#adminLoginModal .pw-eye:hover { background: var(--ink-100, #eef2f7); color: var(--ink-800, #1e293b); }

#adminLoginModal .icms-auth-forgot-row {
	display: flex;
	justify-content: flex-end;
	margin: -4px 0 14px;
}
#adminLoginModal .icms-auth-forgot-link {
	color: var(--gold-700, #92610f);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}
#adminLoginModal .icms-auth-forgot-link:hover { text-decoration: underline; }

#adminLoginModal .mbtn {
	width: 100%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	margin-top: 4px;
	padding: 13px 18px !important;
	border: 0;
	border-radius: var(--radius, 12px) !important;
	background: var(--ink-900, #0f172a) !important;   /* beats css/tweaks.css .mbtn{background!important} */
	color: var(--gold-400, #e0b662) !important;
	font-family: var(--font-body) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16) !important;
}
#adminLoginModal .mbtn:hover { background: #1a2540 !important; }

#adminLoginModal .mlink {
	margin-top: 16px !important;    /* beats css/tweaks.css .mlink{margin-top/font-size!important} */
	text-align: center;
	font-size: 12.5px !important;
	color: var(--ink-500, #64748b);
}
#adminLoginModal .mlink a {
	color: var(--ink-600, #475569);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
#adminLoginModal .mlink a:hover { color: var(--ink-900, #0f172a); text-decoration: underline; }

@media (max-width: 480px) {
	#adminLoginModal .icms-adm-head { padding: 22px 20px 18px; }
	#adminLoginModal .icms-adm-body { padding: 18px 20px 20px; }
	#adminLoginModal .mfield input { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   13 · FORGOT-PASSWORD MODAL  (#resetModal)
   ════════════════════════════════════════════════════════════════════
   Opens FROM inside #authModal, so it sits above it (z-index on the
   element itself — see the note in partials/extra-modals.html).

   ⚠ js/auth.js writes `modal.style.display` directly on open/close, so
   the overlay keeps an inline `display` and this file must not try to
   own it. Style only. */
#resetModal.modal-overlay {
	padding: 20px;
	/* !important — see the note on #authModal.icms-auth-overlay. */
	background: rgba(9, 15, 30, 0.78) !important;
	backdrop-filter: blur(7px) !important;
	-webkit-backdrop-filter: blur(7px);
}
#resetModal .modal-box {
	width: 100%;
	max-width: 430px !important;
	padding: 0 !important;
	overflow: hidden;
	/* !important — see the note on .icms-auth-box. */
	border: 1px solid var(--ink-200, #e2e8f0) !important;
	border-radius: 20px !important;
	background: var(--surface-card, #fff);
	box-shadow: 0 32px 80px rgba(9, 15, 30, 0.34) !important;
}
#resetModal .icms-fp-head {
	position: relative;
	padding: 26px 26px 22px;
	text-align: center;
	color: #fff;
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(224, 182, 98, 0.18) 0%, rgba(224, 182, 98, 0) 60%),
		linear-gradient(165deg, #0f172a 0%, #16233f 100%);
}
#resetModal .icms-fp-close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	font-family: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.18s, color 0.18s;
}
#resetModal .icms-fp-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
#resetModal .icms-fp-mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	border-radius: 12px;
	border: 1px solid rgba(224, 182, 98, 0.32);
	background: rgba(255, 255, 255, 0.07);
	color: var(--gold-400, #e0b662);
	font-size: 17px;
}
#resetModal .icms-fp-head h2 {
	margin: 0;
	font-family: var(--font-display) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #fff !important;
}

#resetModal .icms-fp-view { padding: 22px 26px 24px; }
#resetModal .icms-fp-lede {
	margin: 0 0 16px;
	font-size: 13px !important;   /* beats css/responsive.css page-wide p{font-size!important} */
	line-height: 1.6;
	color: var(--ink-600, #475569);
}
#resetModal .mfield { margin-bottom: 14px; }
#resetModal .mfield label {
	display: block;
	margin-bottom: 6px !important;   /* see the note on #authModal .mfield label */
	font-family: var(--font-body) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ink-700, #334155) !important;
}
#resetModal .icms-auth-input { position: relative; display: block; width: 100%; }
#resetModal .icms-auth-input > i:first-child {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	font-size: 13px;
	color: var(--ink-400, #94a3b8);
	pointer-events: none;
	z-index: 1;
}
#resetModal .mfield input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px 12px 40px !important;
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--radius, 12px);
	background: var(--ink-50, #f8fafc);
	color: var(--ink-900, #0f172a);
	font-family: var(--font-body) !important;
	font-size: 14px !important;
	outline: 0;
	transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
#resetModal .mfield input:focus {
	background: var(--surface-card, #fff);
	border-color: var(--gold-500, #c9962f);
	box-shadow: 0 0 0 3px rgba(201, 150, 47, 0.18);
}
#resetModal .icms-fp-submit {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	margin-top: 4px;
	padding: 13px 18px;
	border: 0;
	border-radius: var(--radius, 12px);
	background: var(--ink-900, #0f172a);
	color: var(--gold-400, #e0b662);
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
	transition: background 0.15s;
}
#resetModal .icms-fp-submit:hover:not(:disabled) { background: #1a2540; }
#resetModal .icms-fp-submit:disabled { opacity: 0.65; cursor: not-allowed; }

#resetModal .icms-fp-back {
	margin: 14px 0 0;
	text-align: center;
	font-size: 11.5px !important;
	color: var(--ink-500, #64748b);
}
#resetModal .icms-fp-back a { color: var(--gold-700, #92610f); font-weight: 600; text-decoration: none; }
#resetModal .icms-fp-back a:hover { text-decoration: underline; }

/* Success view */
#resetModal .icms-fp-success { text-align: center; }
#resetModal .icms-fp-success-mark {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #dcfce7;
	color: #166534;
	font-size: 22px;
}
#resetModal .icms-fp-success h3 {
	margin: 0 0 8px;
	font-family: var(--font-display) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--ink-900, #0f172a) !important;
}
#resetModal .icms-fp-success p {
	margin: 0 0 8px;
	font-size: 13px !important;
	line-height: 1.6;
	color: var(--ink-600, #475569);
}
#resetModal .icms-fp-success p.icms-fp-fineprint {
	margin-bottom: 18px;
	font-size: 12px !important;
	color: var(--ink-500, #64748b);
}
#resetModal .icms-fp-success strong { color: var(--ink-900, #0f172a); }
#resetModal .icms-fp-secondary {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 11px 16px;
	border: 1px solid var(--ink-200, #e2e8f0);
	border-radius: var(--radius, 12px);
	background: var(--surface-card, #fff);
	color: var(--ink-700, #334155);
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
#resetModal .icms-fp-secondary:hover { background: var(--ink-50, #f8fafc); border-color: var(--ink-300, #cbd5e1); }

@media (max-width: 480px) {
	#resetModal .icms-fp-head { padding: 22px 20px 18px; }
	#resetModal .icms-fp-view { padding: 18px 20px 20px; }
	#resetModal .mfield input { font-size: 16px !important; }
}