/* SEC-CJIS-001 / IAM-011 — the forced-second-factor gate's presentational layer (banner, held-link marking,
   pop-up). Paired with Components/Layout/MfaEnrolmentGate.razor and js/kanine-mfa-gate.js.

   WEB-HEAD-ONLY, DELIBERATELY, and this is the sanctioned shape rather than an exception to the one-shared-CSS
   ruling (owner 2026-07-23). That ruling forbids a head carrying a SECOND COPY of a shared sheet; a head-only
   concept with no RCL counterpart belongs in a head-only file, which is exactly what css/kanine-circuit-guard.css
   already is. The forced-enrolment gate is ASP.NET Core middleware over a browser session — the MAUI head signs
   in through the system browser against this same web /login, so it never renders a confined shell of its own and
   has nothing to style. SharedStylesheetSingleCopyTests enforces the rule and this file cannot trip it: there is
   no kanine-mfa-gate.css in Kanine.Presentation/wwwroot/css.

   It does reach one shared class (.kl-shellnav-link) to mark held rail items. That is a deliberate head-only
   DELTA on shared markup — the state being expressed is a web-session fact the RCL cannot know — and it is a
   state selector ([data-mfa-held]) that no other head ever sets, so it cannot alter the shared surface for
   anyone else. */

/* ---- 1. The standing banner --------------------------------------------------------------------------------
   The tint and the dark remap come from the shared .kl-banner--caution family; everything here is the delta.
   Caution, not critical: nothing has gone wrong and nothing was refused yet. The account is fine, the agency has
   a rule, and there is one thing to do about it — which is the register the copy is written in.

   .kl-shell-main-qualified so it sits at 0,2,0 — the same specificity as the shell's `[class$="…"]` suffix
   families this element is inside the reach of — and wins on source order (this sheet is linked after the design
   system). A bare .kl-mfahold-banner is 0,1,0 and silently loses. */
.kl-shell-main .kl-mfahold-banner {
    gap: var(--k-space-3);
    /* The one deliberate escalation over the standard band: this is not a readback of something that just
       happened, it is a standing condition the reader has to act on, so it gets a spine. */
    border-inline-start: 4px solid var(--k-caution);
    padding: var(--k-space-4);
    margin-block-end: var(--k-space-5, 20px);
}

.kl-mfahold-icon {
    flex: 0 0 auto;
    margin-block-start: 2px;
    color: var(--k-caution);
    font-size: 20px;
}

.kl-mfahold-copy {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    min-inline-size: 0;
}

/* The turn-off action, pinned to the trailing edge of the band (owner ask 2026-08-04). An auto inline-start
   margin rather than a float or absolute placement, so a copy block that grows — a longer sentence, a narrower
   column, a translation — pushes the band taller instead of running underneath the control. Centred against the
   whole band rather than inheriting .kl-banner's align-items:flex-start, which would leave the button hanging off
   the first of two copy lines.

   The band wraps only when it has an action to wrap, so the ~10 other pages composing the plain .kl-banner keep
   the exact box they have today. Below the wrap the auto margin still right-aligns it, under the copy. */
.kl-shell-main .kl-mfahold-banner { flex-wrap: wrap; }

.kl-mfahold-action {
    margin-inline-start: auto;
    flex: 0 0 auto;
    align-self: center;
    /* The confirm step on /account/security composes the same slot with two controls (commit + cancel); the
       standing banner puts one in it. Both want the same row. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-2);
}

/* Inherits the band's own status colour rather than re-muting it: .kl-banner--caution already sets a dark amber
   that is AA on its fill in light and remapped in dark, and overriding it with --k-text-muted would put grey body
   copy inside an amber box in light and an unreadable dark grey inside the dark remap. */
.kl-mfahold-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

/* ---- 2. Held navigation -------------------------------------------------------------------------------------
   MARKED, NOT HIDDEN, and that is the judgement call worth recording. Suppressing the rail would make the product
   look broken at the exact moment a brand-new user meets it, hide where they are about to be able to go, and then
   grow a whole navigation out of nowhere the second they enrol — a bigger surprise than the one being fixed. A
   dimmed item with aria-disabled says the true thing: this exists, and it is held.

   NO pointer-events:none. The press has to reach the click handler or the pop-up never opens and the user is back
   to discovering the confinement by watching nothing happen. */
[data-mfa-held] {
    opacity: .45;
    cursor: not-allowed;
}

.kl-shellnav-link[data-mfa-held]:hover {
    /* The rail's hover lift would otherwise promise a destination that is not going to open. */
    background: transparent;
}

/* ---- 3. The pop-up ------------------------------------------------------------------------------------------
   A real <dialog> + ::backdrop, so focus is trapped, Escape closes it and a screen reader announces it as modal
   without any of that being re-implemented in script. */
.kl-mfahold-dialog {
    inline-size: min(520px, calc(100vw - 32px));
    padding: var(--k-space-5, 20px);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg, 12px);
    background: var(--k-surface);
    color: var(--k-text);
    box-shadow: 0 18px 48px rgb(0 0 0 / .28);
}

.kl-mfahold-dialog::backdrop {
    background: rgb(10 26 43 / .45);
}

.kl-mfahold-dialog h2 {
    margin-block: 0 var(--k-space-3);
}

.kl-mfahold-dialog p {
    margin-block: 0 var(--k-space-3);
    line-height: 1.5;
}

.kl-mfahold-target {
    font-weight: 600;
}

.kl-mfahold-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-3);
    margin-block-start: var(--k-space-4);
}