/* ==========================================================================
   IntegrityShield — Auth screens (admin / partner / field login + TOTP)
   Split layout: ink brand panel with a faint chain-link pattern on the left,
   form card on the right. Stacks on mobile. Self-sufficient: loads Inter and
   declares the tokens it needs, and scopes form chrome under .auth-shell so
   it coexists with app.css if both are ever loaded.
   ========================================================================== */
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --ink: #0c1b2a; --ink-2: #071219; --ink-3: #14293d;
  --green-700: #0a5c39; --green-600: #0e7a4b; --green-500: #12945c; --green-100: #e3f4ec;
  --primary: #0a5c39; --primary-soft: rgba(10, 92, 57, .14);
  --gold: #c19a2e; --gold-bright: #d9b64a; --gold-deep: #8f6f1c;
  --danger: #b3261e; --danger-bg: #fbeceb;
  --success: #0e7a4b; --success-bg: #e3f4ec;
  --warning: #94660a; --warning-bg: #fbf3e0;
  --info: #1d5fbf; --info-bg: #eaf1fb;
  --bg: #f4f6f8; --surface: #ffffff; --surface-2: #f7f9fb;
  --border: #e3e8ef; --border-strong: #cfd8e3;
  --text: #15202f; --text-muted: #5b6879; --text-faint: #93a1b4;
  --radius: 10px; --radius-lg: 14px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Cascadia Code", "SF Mono", Consolas, ui-monospace, monospace;
}
html[data-theme="dark"] {
  --bg: #0a141f; --surface: #101d2c; --surface-2: #0c1826;
  --border: #1d2d40; --border-strong: #2c405a;
  --text: #e7edf4; --text-muted: #9db0c4; --text-faint: #64788f;
  --primary: #12945c; --primary-soft: rgba(18, 148, 92, .2);
  --success-bg: #0b2b1d; --danger-bg: #2d100d; --warning-bg: #2b2107; --info-bg: #0d1c33;
  --success: #35b47e; --danger: #e0655d; --warning: #d3a13a; --info: #6b9fe8;
}

[hidden] { display: none !important; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.auth-shell {
  font-family: var(--font); font-size: 14px; line-height: 1.55;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
.auth-shell a { color: var(--primary); text-decoration: none; }
.auth-shell a:hover { text-decoration: underline; }
.auth-shell :focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; border-radius: 4px; }
.auth-shell img, .auth-shell svg { vertical-align: middle; max-width: 100%; }

/* ---- Split shell ---- */
.auth { display: grid; grid-template-columns: minmax(380px, 44%) 1fr; min-height: 100dvh; }

/* Left — ink brand panel with a faint chain-link lattice (the ledger chain). */
.auth__side {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 48px; color: rgba(236, 244, 240, .85); overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='72' viewBox='0 0 132 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='5'%3E%3Crect x='8' y='22' width='56' height='28' rx='14'/%3E%3Crect x='52' y='22' width='56' height='28' rx='14'/%3E%3Crect x='-36' y='58' width='56' height='28' rx='14'/%3E%3Crect x='96' y='-14' width='56' height='28' rx='14'/%3E%3C/g%3E%3C/svg%3E") repeat,
    radial-gradient(640px 420px at 85% -10%, rgba(18, 148, 92, .22), transparent 65%),
    radial-gradient(520px 380px at -10% 110%, rgba(193, 154, 46, .12), transparent 62%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
}
.auth__brand { display: flex; align-items: center; gap: 10px; position: relative; }
.auth__brand img, .auth__brand svg { height: 34px; width: auto; }
.auth__brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.auth__brand-name .tld { color: var(--gold-bright); }

.auth__pitch { position: relative; max-width: 46ch; }
.auth__kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 10px;
}
.auth__headline { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: #fff; }
.auth__lede { margin-top: 12px; font-size: 14px; line-height: 1.65; color: rgba(236, 244, 240, .68); }
.auth__points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth__points li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.auth__points svg { flex-shrink: 0; width: 17px; height: 17px; color: var(--green-500); margin-top: 1px; }

.auth__foot { position: relative; font-size: 12px; color: rgba(236, 244, 240, .45); line-height: 1.6; }
.auth__foot b { color: rgba(236, 244, 240, .7); font-weight: 600; }
.auth__seal { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-bright); }
.auth__seal svg { width: 14px; height: 14px; }

/* Right — the form column */
.auth__main {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; background: var(--bg);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card__panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 34px -10px rgba(12, 27, 42, .14); padding: 30px 30px 26px;
  border-top: 3px solid var(--primary);
}
.auth-card__panel--gold { border-top-color: var(--gold); }
.auth-card__realm {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  padding: 3px 11px; border-radius: 999px; background: var(--green-100); color: var(--primary);
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.auth-card__title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.auth-card__sub { font-size: 13.5px; color: var(--text-muted); margin: 5px 0 22px; line-height: 1.55; }

/* Form chrome (scoped so app.css never collides) */
.auth-shell .field { display: block; margin-bottom: 15px; }
.auth-shell .field > label { display: block; font-size: 12.5px; font-weight: 650; color: var(--text); margin-bottom: 6px; }
.auth-shell .field > input, .auth-shell .field > select {
  width: 100%; height: 44px; padding: 0 13px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface); color: var(--text); font: 500 14px var(--font);
  transition: border-color .15s, box-shadow .15s;
}
.auth-shell .field > input:focus, .auth-shell .field > select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.auth-shell .field > input::placeholder { color: var(--text-faint); }
.auth-shell .field__help { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.auth-shell .field__error { font-size: 12px; color: var(--danger); margin-top: 5px; font-weight: 600; }
.auth-shell .field__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.auth-shell .field__row label { margin-bottom: 0; }
.auth-shell .field__row a { font-size: 12.5px; font-weight: 600; }

.auth-shell .check { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.auth-shell .check input { accent-color: var(--primary); width: 15px; height: 15px; }

.auth-shell .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 12px 18px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  font: 700 14px var(--font); line-height: 1.2; position: relative;
  transition: box-shadow .15s, transform .15s;
}
.auth-shell .btn:active { transform: translateY(1px); }
.auth-shell .btn--primary {
  background: linear-gradient(135deg, var(--green-600), var(--green-700)); color: #fff;
  box-shadow: 0 3px 10px rgba(10, 92, 57, .28);
}
.auth-shell .btn--primary:hover { box-shadow: 0 5px 16px rgba(10, 92, 57, .38); }
.auth-shell .btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); width: auto; }
.auth-shell .btn.is-loading { color: transparent !important; pointer-events: none; }
.auth-shell .btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; left: calc(50% - 8px); top: calc(50% - 8px);
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: auth-spin .7s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* Flash / error alert */
.auth-shell .alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; margin-bottom: 16px;
  border-radius: 9px; border: 1px solid; border-left-width: 4px; font-size: 13px; line-height: 1.5;
}
.auth-shell .alert--danger { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.auth-shell .alert--success { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.auth-shell .alert--warning { border-color: var(--warning); color: var(--warning); background: var(--warning-bg); }
.auth-shell .alert--info { border-color: var(--info); color: var(--info); background: var(--info-bg); }

/* ---- TOTP verification ---- */
.otp-row { display: flex; gap: 8px; justify-content: space-between; margin: 6px 0 18px; }
.otp-row input {
  width: 100%; max-width: 52px; height: 54px; text-align: center;
  font: 700 20px var(--mono); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.otp-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* Single-input fallback (one 6-digit field) */
.auth-shell input.input-otp {
  width: 100%; height: 52px; text-align: center; letter-spacing: .45em; text-indent: .45em;
  font: 700 20px var(--mono); border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface); color: var(--text);
}
.auth-shell input.input-otp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.otp-hint { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; }
.otp-hint svg { color: var(--gold-deep); flex-shrink: 0; }

/* QR block for TOTP enrolment */
.totp-qr { display: flex; justify-content: center; padding: 14px 0 6px; }
.totp-qr img { width: 180px; height: 180px; border-radius: 10px; background: #fff; padding: 8px; border: 1px solid var(--border); }
.totp-secret {
  display: block; text-align: center; font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  color: var(--gold-deep); background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: 8px; padding: 9px 12px; margin: 10px 0 18px; word-break: break-all;
}

/* Under-card links + legal foot */
.auth-card__links { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-muted); }
.auth-card__links a { font-weight: 650; }
.auth-card__foot { text-align: center; margin-top: 22px; font-size: 11.5px; color: var(--text-faint); line-height: 1.6; }
.auth-card__foot a { color: var(--text-muted); }

/* Realm switch strip (admin / partner / field) */
.auth-realms { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.auth-realms a {
  font-size: 12px; font-weight: 650; color: var(--text-muted); padding: 5px 12px;
  border: 1px solid var(--border); border-radius: 999px; text-decoration: none;
  transition: border-color .15s, color .15s;
}
.auth-realms a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* ---- Mobile: brand panel compresses to a masthead, columns stack ---- */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__side { padding: 26px 24px; justify-content: flex-start; gap: 16px; }
  .auth__pitch { display: none; }
  .auth__foot { display: none; }
  .auth__main { align-items: flex-start; padding: 28px 16px 44px; }
}
@media (max-width: 480px) {
  .auth-card__panel { padding: 24px 20px 22px; }
  .otp-row { gap: 6px; }
  .otp-row input { height: 48px; font-size: 18px; }
}

/* Dark: the ink panel is already dark; the form column follows the tokens. */
html[data-theme="dark"] .auth-card__panel { box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .totp-qr img { background: #fff; }
html[data-theme="dark"] .auth-card__realm { background: var(--primary-soft); color: var(--success); }

@media print {
  .auth__side { display: none; }
  .auth { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PART 2 — the vocabulary views/layouts/auth.php ACTUALLY emits.
   Appended, never edited above.

   Everything above this line is scoped to a `.auth / .auth__side /
   .auth__main / body.auth-shell` markup that no template produces: the
   layout emits `body.auth-body > .auth-mobilebar + .auth-hero + .auth-panel
   > .auth-card`, and the five views under views/auth/ emit `.auth-card__head
   / .auth-form / .auth-links / .form-grid / .field / .btn / .input--mono /
   .input-group / .copy-btn / .muted`. None of those selectors matched, so
   the sign-in screens rendered as unstyled HTML — no ink panel, no field
   chrome, no button, no focus ring, and the dark block was dead. The rules
   above are left in place (they are inert, and this file follows the
   append-only house rule); everything below binds the real markup.
   ========================================================================== */

/* Token corrections, kept here rather than edited into the block above.
   --text-faint was #93a1b4 (2.63:1 on white) / #64788f (3.75:1 on the dark
   surface) — below AA for the field help text and the TOTP hint it carries.
   Values matched to app.css. */
:root { --text-faint: #657185; }
html[data-theme="dark"] { --text-faint: #7b8fa6; --primary: #14a065; --primary-soft: rgba(20, 160, 101, .20); }

body.auth-body {
  font-family: var(--font); font-size: 14px; line-height: 1.55;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: grid; grid-template-columns: minmax(380px, 44%) 1fr;
  max-width: 100%; overflow-x: clip;
}
body.auth-body a { color: var(--primary); text-decoration: none; }
body.auth-body a:hover { text-decoration: underline; }
body.auth-body img, body.auth-body svg { vertical-align: middle; max-width: 100%; }
/* The .auth-shell focus rule above never matched, so the sign-in screens had
   no visible keyboard focus at all. --green-500 is 3.88:1 on white and
   4.49:1 on the ink panel — over the 3:1 a focus indicator needs on both. */
body.auth-body :focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; border-radius: 4px; }

/* ---- Mobile masthead (hidden while the ink panel is on screen) ---- */
.auth-mobilebar {
  display: none; grid-column: 1 / -1;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; background: linear-gradient(120deg, var(--ink), var(--ink-2));
}
.auth-mobilebar__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-bright);
}

/* ---- Left: ink brand panel with the chain-link lattice (the ledger) ---- */
.auth-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 48px; color: rgba(236, 244, 240, .85);
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
}
.auth-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='72' viewBox='0 0 132 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='5'%3E%3Crect x='8' y='22' width='56' height='28' rx='14'/%3E%3Crect x='52' y='22' width='56' height='28' rx='14'/%3E%3Crect x='-36' y='58' width='56' height='28' rx='14'/%3E%3Crect x='96' y='-14' width='56' height='28' rx='14'/%3E%3C/g%3E%3C/svg%3E") repeat,
    radial-gradient(640px 420px at 85% -10%, rgba(18, 148, 92, .22), transparent 65%),
    radial-gradient(520px 380px at -10% 110%, rgba(193, 154, 46, .12), transparent 62%);
}
.auth-hero__inner {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 40px; flex: 1; min-width: 0;
}
.auth-hero__brand { display: inline-flex; align-items: center; gap: 10px; }
.auth-hero__brand:hover { text-decoration: none; }
.auth-hero__content { max-width: 46ch; }
.auth-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-bright);
}
.auth-hero__title {
  font-size: clamp(24px, 2.4vw, 30px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.22; color: #fff;
}
.auth-hero__hl { color: var(--gold-bright); }
.auth-hero__desc { margin-top: 14px; font-size: 14px; line-height: 1.65; color: rgba(236, 244, 240, .70); }
.auth-hero__ministry { margin-top: 18px; font-size: 12.5px; font-weight: 600; color: rgba(236, 244, 240, .58); }
.auth-hero__footer { position: relative; font-size: 11.5px; line-height: 1.6; color: rgba(236, 244, 240, .45); }

/* ---- Right: the form column ---- */
.auth-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; background: var(--bg); min-width: 0;
}
/* .auth-card is BOTH the width constraint (declared above) and the panel. */
.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--primary); border-radius: var(--radius-lg);
  box-shadow: 0 12px 34px -10px rgba(12, 27, 42, .14);
  padding: 30px 30px 26px;
}
.auth-card__head { margin-bottom: 20px; }
.auth-card__title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.auth-card__sub { font-size: 13.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.55; }

/* ---- Form chrome. The views compose `.form-grid.auth-form`; on a 420px
        card that is always one column. ---- */
.auth-body .form-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.auth-form { margin-top: 4px; }
.auth-body .field { display: block; min-width: 0; }
.auth-body .field > label {
  display: block; font-size: 12.5px; font-weight: 650; color: var(--text); margin-bottom: 6px;
}
.auth-body .field > input,
.auth-body .field > select,
.auth-body .field > textarea,
.auth-body .input-group > input {
  width: 100%; min-width: 0; padding: 0 13px; height: 44px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface); color: var(--text); font: 500 14px var(--font);
  transition: border-color .15s, box-shadow .15s;
}
.auth-body .field > textarea {
  height: auto; padding: 11px 13px; line-height: 1.5; resize: vertical;
  font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere;
}
.auth-body .field > input:focus,
.auth-body .field > select:focus,
.auth-body .field > textarea:focus,
.auth-body .input-group > input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.auth-body .field > input::placeholder,
.auth-body .field > textarea::placeholder { color: var(--text-faint); }
.auth-body .field__help { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.auth-body .field__error { font-size: 12px; color: var(--danger); margin-top: 6px; font-weight: 600; }
.auth-body .input--mono { font-family: var(--mono); letter-spacing: .1em; font-size: 15px; font-weight: 600; }
.auth-body .input-group { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.auth-body .input-group > input { flex: 1 1 auto; }
.auth-body .input-group > .btn { flex: 0 0 auto; width: auto; }

/* ---- Buttons ---- */
.auth-body .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 12px 18px; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  font: 700 14px var(--font); line-height: 1.2; position: relative; text-decoration: none;
  transition: box-shadow .15s, background .15s, border-color .15s, transform .15s;
}
.auth-body .btn:hover { text-decoration: none; }
.auth-body .btn:active { transform: translateY(1px); }
.auth-body .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.auth-body .btn--primary {
  background: linear-gradient(135deg, var(--green-600), var(--green-700)); color: #fff;
  box-shadow: 0 3px 10px rgba(10, 92, 57, .28);
}
.auth-body .btn--primary:hover { box-shadow: 0 5px 16px rgba(10, 92, 57, .38); }
.auth-body .btn--ghost {
  background: transparent; border-color: var(--border-strong); color: var(--text); width: auto;
}
.auth-body .btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.auth-body .btn--sm { padding: 8px 12px; font-size: 12.5px; gap: 6px; }
.auth-body .btn--sm svg { width: 14px; height: 14px; }
.auth-body .copy-btn.is-copied { border-color: var(--success); color: var(--success); }

/* ---- Flash alerts (rendered by the layout above the slot) ---- */
.auth-body .alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; margin-bottom: 16px;
  border-radius: 9px; border: 1px solid; border-left-width: 4px; font-size: 13px; line-height: 1.5;
}
.auth-body .alert svg { flex-shrink: 0; margin-top: 1px; }
.auth-body .alert--danger  { border-color: var(--danger);  color: var(--danger);  background: var(--danger-bg); }
.auth-body .alert--success { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.auth-body .alert--warning { border-color: var(--warning); color: var(--warning); background: var(--warning-bg); }
.auth-body .alert--info    { border-color: var(--info);    color: var(--info);    background: var(--info-bg); }

/* ---- Under-card links ---- */
.auth-links { text-align: center; margin-top: 18px; font-size: 12.5px; line-height: 1.7; }
.auth-body .muted { color: var(--text-muted); }
.auth-links a { font-weight: 650; }

/* ==========================================================================
   Responsive — 1180 / 900 / 560 / 375. Body must never scroll sideways.
   ========================================================================== */
@media (max-width: 1180px) {
  .auth-hero { padding: 36px 32px; }
  .auth-panel { padding: 36px 20px; }
}
@media (max-width: 900px) {
  /* The ink panel compresses to a masthead and the columns stack. */
  body.auth-body { grid-template-columns: 1fr; align-content: start; }
  .auth-mobilebar { display: flex; }
  .auth-hero { display: none; }
  .auth-panel { align-items: flex-start; padding: 28px 18px 48px; }
}
@media (max-width: 560px) {
  .auth-card { padding: 24px 20px 22px; border-radius: var(--radius); }
  .auth-card__title { font-size: 18px; }
  .auth-panel { padding: 20px 14px 40px; }
}
@media (max-width: 400px) {
  .auth-mobilebar { padding: 10px 14px; }
  .auth-mobilebar__badge { font-size: 9.5px; letter-spacing: .06em; }
  .auth-card { padding: 20px 16px 18px; }
  .auth-body .input--mono { font-size: 14px; letter-spacing: .06em; }
  /* The otpauth:// URI is one long unbreakable token. */
  .auth-body .field > textarea { font-size: 11.5px; }
}

/* ==========================================================================
   Dark — the ink panel is already dark; the form column follows the tokens
   re-declared at the top of this file. Nothing below sets a literal light
   ground, so the whole column inverts from the token block alone.
   ========================================================================== */
html[data-theme="dark"] .auth-card { box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .auth-panel { background: var(--bg); }

@media print {
  .auth-hero, .auth-mobilebar { display: none; }
  body.auth-body { grid-template-columns: 1fr; background: #fff; }
  .auth-card { box-shadow: none; border: 1px solid #c9d3df; }
}

/* ==========================================================================
   PART 3 — device pass (360 / 390 / 414 / 768 / 1024 / 1280).
   Appended, never edited above. The split panel already stacks at 900; what
   follows is the enrolment screen, the touch targets, and the two things
   that can genuinely overflow a 320px card: the TOTP QR and the otpauth URI.
   ========================================================================== */

/* The width cap lives on the PART 1 `.auth-card` rule, which PART 2 then
   re-purposed as the panel. Restating it here means the card can never
   inherit a full-column width if that older rule is ever pruned. */
.auth-card { width: 100%; max-width: 420px; }

/* ---- TOTP enrolment ----
   views/auth/admin_totp_setup.php emits a 188px inline SVG QR inside a
   page-scoped .totp-enrol row. On a 360px handset the card's content box is
   268px, so a fixed 188px + 16px padding fits — but only just, and an SVG
   with width/height attributes and no CSS floor will not scale if the card
   ever narrows further. Capping it to the column keeps it square and keeps
   it scannable: a QR only has to survive as a square, and 188px is well
   above the ~120px a phone camera needs for this payload. */
.totp-enrol__qr svg, .totp-enrol__qr img {
  display: block; width: 100%; max-width: 188px; height: auto; aspect-ratio: 1;
}
/* The secret is printed in 4-character groups and the provisioning URI is one
   unbreakable token; both must wrap rather than widen the card. */
.auth-body .input--mono { overflow-wrap: anywhere; }
.totp-secret, .auth-body .field > textarea { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 380px) {
  /* 320–380px: the QR gives up its fixed size before the card gives up its
     padding, so the code stays centred and whole. */
  .totp-enrol__qr svg, .totp-enrol__qr img { max-width: 100%; }
}

/* ---- Touch targets ---- */
@media (pointer: coarse) {
  .auth-body .btn { min-height: 48px; }
  .auth-body .btn--sm { min-height: 40px; }
  .auth-body .field > input,
  .auth-body .field > select,
  .auth-body .input-group > input { min-height: 48px; height: 48px; }
  .auth-body .check { min-height: 44px; align-items: center; }
  .auth-body .check input { width: 20px; height: 20px; }
  .auth-links a { display: inline-block; padding: 6px 2px; }
  .auth-realms a { min-height: 40px; display: inline-flex; align-items: center; }
  .totp-manual > summary { min-height: 44px; display: flex; align-items: center; }
  .otp-row input { height: 56px; }
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  body.auth-body *, body.auth-body *::before, body.auth-body *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .auth-body .btn:active { transform: none; }
}