:root{--brand-primary:#AE3527;--brand-primary-strong:#AE3527;--brand-deep:#17130E;--brand-tint:#EFEAE0;--brand-on-tint:#17130E;--brand-primary-rgb:174, 53, 39;--brand-primary-hover:#c06157;--brand-glow:#d29088;--brand-panel:#17130E;}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,'Segoe UI',sans-serif; background:var(--brand-deep);
       display:flex; align-items:center; justify-content:center; min-height:100vh; }
/* v5.13.6: was `width:390px` with NO media query, inside a centred flex body.
   At 320px the card was 70px wider than the viewport and ~35px hung off the
   LEFT edge, which cannot be reached by scrolling. It affected the password
   recovery and two-step pages — the exact flows a locked-out person needs.
   Same shape login.css already used for its card. WCAG 1.4.10 Reflow. */
.box { background:#fff; border-radius:12px; padding:32px 28px; width:100%;
       max-width:390px; min-width:0; margin:16px;
       box-shadow:0 12px 40px rgba(0,0,0,.25); }
.brand { display:flex; align-items:center; gap:10px; margin:0 0 4px; color:var(--brand-deep); font-weight:700;
         font-size:20px; }
.brand-mark { width:30px; height:30px; border-radius:8px; background:var(--brand-primary); position:relative;
              display:inline-block; flex:0 0 auto; }
.brand-mark::after { content:""; position:absolute; left:8px; top:8px; width:13px; height:7px;
                     border-left:3px solid #fff; border-bottom:3px solid #fff;
                     transform:rotate(-45deg); }
p.sub { margin:0 0 22px; color:#5a6b5f; font-size:13px; }
label { font-size:12px; color:#5a6b5f; display:block; margin:12px 0 4px; }
/* v5.13.6: #b9c6bb on white is 1.77:1 — the field boundary was effectively
   invisible in bright light. #767f77 is 4.14:1. WCAG 1.4.11. min-height keeps
   the target at 44px on a phone. */
input { width:100%; padding:10px 12px; border:1px solid #767f77; border-radius:7px;
        font-size:16px; min-height:44px; }
/* v5.13.6: white on var(--brand-primary) is 3.30:1, below the 4.5:1 minimum. var(--brand-primary-strong) is
   5.02:1 and already the portal's --action colour. WCAG 1.4.3. */
button { width:100%; margin-top:20px; background:var(--brand-primary-strong); color:#fff; border:none;
         border-radius:7px; padding:11px; font-size:15px; font-weight:600; cursor:pointer; }
.msg { background:var(--brand-tint); color:var(--brand-on-tint); border-radius:7px; padding:9px 12px;
       font-size:13px; margin-bottom:8px; }
a { color:var(--brand-on-tint); text-decoration:none; font-size:13px; }

/* Rule unique to the reset page (identical selectors above are shared). */
.err { background:#fee2e2; color:#991b1b; border-radius:7px; padding:9px 12px;
       font-size:13px; margin-bottom:8px; }

/* v5.13.4: replaces the inline style="" attribute on the footer link, so both
   pages can carry a strict Content-Security-Policy with style-src 'self'. */
.link-row { margin:14px 0 0; }

/* v5.13.7: a submit button that reads as a link. The forced-password-change
   page's sign-out has to POST (with CSRF), but it is an escape hatch, not the
   page's action — giving it the full-width green treatment would make it
   compete with "Set new password". Inherits the `a` colour and size rather
   than restating them, and keeps a real focus ring via :focus-visible above. */
button.linkish { width:auto; margin:0; padding:6px 2px; background:none; border:none;
                 color:var(--brand-on-tint); font-size:13px; font-weight:400; text-decoration:none;
                 cursor:pointer; min-height:0; }
button.linkish:hover { text-decoration:underline; }

/* v5.13.6: a visible, contrast-passing focus ring. The UA default is not
   guaranteed against this palette, and these are the pages a locked-out user
   must operate. Two-tone so one edge always contrasts: var(--brand-deep) is 10.6:1 on
   white, the white inner ring separates it from the dark page background.
   WCAG 2.4.7 / 1.4.11. */
:focus-visible { outline:2px solid var(--brand-deep); outline-offset:2px;
                 box-shadow:0 0 0 4px #fff; }