: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;--brand-muted:#74716e;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url('/static/fonts/jost-latin.woff2?v=d2250c53167c') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 700;font-display:swap;src:url('/static/fonts/jost-latin-ext.woff2?v=d2250c53167c') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url('/static/fonts/newsreader-latin.woff2?v=d2250c53167c') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url('/static/fonts/newsreader-latin-ext.woff2?v=d2250c53167c') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/static/fonts/jetbrains-mono-latin.woff2?v=d2250c53167c') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/static/fonts/jetbrains-mono-latin-ext.woff2?v=d2250c53167c') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* The password-recovery and forced-change pages. Same arrangement as login.css: the
   brand variables and the shared @font-face block are prepended by app/web/assets.py,
   so these pages carry Karma's own type and colour with no external request and no
   inline <style> to weaken the Content-Security-Policy. */
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
       font-variant-numeric:tabular-nums; 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:#FDFBF7; 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-family:'Newsreader', Georgia, serif; font-weight:400; font-size:22px; }
p.sub { margin:0 0 22px; color:var(--brand-muted); font-size:13px; }
label { font-family:'Jost', system-ui, sans-serif; font-size:12px; font-weight:500;
        color:var(--brand-muted); 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. WCAG 1.4.11. min-height keeps the target at 44px
   on a phone. v6.2.0: #767f77 was a cool grey chosen by hand for these two pages;
   #8A8073 is the SAME fix promoted into the application's --field-edge, so a field
   here and a field in the ledger now draw the same boundary. 3.75:1 on the card. */
input { width:100%; padding:10px 12px; border:1px solid #8A8073; border-radius:7px;
        font-size:16px; min-height:44px; background:#FDFBF7; color:#2A2118; }
/* 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-family:'Jost', system-ui, sans-serif;
         font-size:15px; font-weight:600; cursor:pointer; }
.msg { background:var(--brand-tint); color:var(--brand-on-tint); border-radius:0 7px 7px 0;
       border-left:3px solid var(--brand-primary-strong); 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). The same
   --danger / --danger-surface pair the application and login.css use, 6.58:1, with
   the 3px left rule that makes a notice survive greyscale. */
.err { background:#F7E3E4; color:#9B1B30; border-radius:0 7px 7px 0; padding:9px 12px;
       border-left:3px solid #9B1B30; 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 ivory 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 #FDFBF7; }

/* The mark, which ships with the code. There is no drawn-in-CSS fallback badge any
   more: a shape is neither a string nor a file, so nothing scans it, and one drawn
   for a different practice sat on these pages through an entire de-branding pass. */
.brand .brand-logo-img { height:34px; width:auto; max-width:200px; display:block; }