:root{
    --navy:#1B2A4A;
    --navy-d:#14192B;
    --navy-l:#2E3E5C;
    --page:#FFFFFF;
    --tint:#F4F6FA;
    --tint-2:#E7ECF3;
    --grey:#5A6377;
    --grey-2:#677080;
    --sig:#0369A1;
    --sig-pale:#BFE5FA;
    --sig-lite:#08B8F8;
    --edge:rgba(20,25,43,0.09);
    --edge-2:rgba(20,25,43,0.14);
    --edge-d:rgba(255,255,255,0.15);
    --lift:0 4px 20px -2px rgba(20,25,43,0.06);
    --lift-2:0 10px 34px -8px rgba(20,25,43,0.12);
    --back-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
    --font-main:Inter,Aptos,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

:root[data-color-blind="true"]{
    --sig:#006A8E;
    --sig-pale:#D8EEF4;
    --sig-lite:#32B6C8;
    --navy:#16324F;
    --navy-d:#102438;
}

:root[data-high-contrast="true"]{
    --page:#FFFFFF;
    --tint:#EEF2F7;
    --tint-2:#DCE5EF;
    --grey:#2F3747;
    --grey-2:#4A5364;
    --edge:rgba(0,0,0,0.18);
    --edge-2:rgba(0,0,0,0.28);
}

:root[data-font-size="large"]{
    font-size:112%;
}

*{box-sizing:border-box;}
/* Smooth only once the page has settled: during load the browser animates
   towards a #fragment and a reflow cancels the animation, so the jump never
   arrived. :root rather than html because bootstrap sets :root{smooth} and
   would otherwise outrank us. */
:root{scroll-behavior:auto;}
:root.is-loaded{scroll-behavior:smooth;}
:root[data-reduce-motion="true"]{scroll-behavior:auto;}
body{padding-top:50px;margin:0;background:var(--page);color:var(--navy-d);
    font-family:var(--font-main);font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;zoom:0.9;}
@supports not (zoom:1){
    body{width:111.111%;transform:scale(0.9);transform-origin:top center;}
}
h1,h2,h3{font-family:inherit;font-weight:600;line-height:1.2;letter-spacing:0;margin:0;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
/* .site-nav is fixed, so an anchor jump lands under it without this. */
html{scroll-padding-top:88px;}

.shell{max-width:1180px;margin:0 auto;padding:0 34px;}
.band{padding:72px 0;}
.tag{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--sig);}
.ico{width:19px;height:19px;stroke-width:1.5;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}

/* Base navigation link styling */
.navlinks a {
    color: #64748b;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    position: relative;
}

/* Hover state */
.navlinks a:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

/* Active Link State */
.navlinks a.active {
    color: #0f172a;
    font-weight: 600;
    background-color: #e2e8f0;
}

.ph{background:var(--tint);border:1px dashed rgba(20,25,43,0.2);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    text-align:center;padding:22px;color:var(--grey);}
.ph .t{font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--sig);}
.ph .d{font-size:13.5px;line-height:1.5;max-width:30ch;}
.ph.tall{aspect-ratio:3/4;}
.ph.wide{aspect-ratio:4/3;}

.c {
    display: block;
    padding: 12px 24px;
}

.c h4,
.c p {
    margin: 4px 0;
}

.c h4 a {
    color: var(--sig-lite);
    text-decoration: none;
    transition: color 0.3s ease;
}

.c .num a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.c h4 a:hover,
.c .num a:hover {
    color: #2980b9;
    text-decoration: none;
}

.emerg a {
    color: inherit;
    text-decoration: none;
}


.btn{font-family:inherit;font-size:14.5px;font-weight:500;
    border:1.5px solid var(--navy);border-radius:4px;padding:11px 22px;
    background:var(--navy);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
    transition:background .18s,color .18s,transform .18s,box-shadow .18s;}
.btn:hover{color: #ccf0ff;background:var(--navy-d);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(20,25,43,0.5);}
.btn.line{background:transparent;color:var(--navy);box-shadow:none;}
.btn.line:hover{background:var(--tint);transform:none;box-shadow:none;}
.btn.big{padding:12px 24px;font-size:15.5px;min-height:48px;}

/* Base text color for standard buttons */
a.btn, a.btn:visited {
  color: #fff;
}
/* Hover color for standard buttons */
a.btn:hover {
  color: #ececec;
}

/* 3. Line (Solid Grey) Button States */
.btn.line, a.btn.line:visited {
  background: #e0e0e0;        /* Solid light grey background */
  color: #333333;             /* Dark grey text */
  border-color: #e0e0e0;      /* Matches background to hide border line */
  box-shadow: none;
}

.btn.line:hover, a.btn.line:hover {
  background: #cccccc;        /* Solid darker grey background on hover */
  color: #111111;             /* Near-black text for sharp contrast */
  border-color: #cccccc;      /* Matches hover background */

  /* Keeps the matching hover physics */
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(20,25,43,0.5);
}


.invited{display:inline-flex;gap:7px;font-size:14px;text-decoration:none;border-bottom:2px solid var(--sig);padding-bottom:2px;}
.invited b{font-weight:600;}
:focus-visible{outline:2.5px solid var(--sig);outline-offset:3px;}
/* The offset puts the ring on the surrounding surface, where --sig is 2.4:1. */
.foot :focus-visible,.auth-aside :focus-visible,
.band.navy :focus-visible,.page-hero :focus-visible{outline-color:#fff;}

/* Hidden by Bootstrap's .visually-hidden-focusable until it takes focus; the
   navbar is z-index 61, so this has to clear it. */
.skip-link:focus{position:absolute;z-index:200;top:10px;left:10px;
    background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px;
    font-size:14px;font-weight:600;text-decoration:none;}
main:focus{outline:none;}

.modal-open{overflow:hidden;}
.app-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;}
.app-modal[hidden]{display:none;}
.app-modal-backdrop{position:absolute;inset:0;background:rgba(20,25,43,.52);}
.app-modal-dialog{position:relative;width:min(440px,100%);padding:28px;background:var(--page);
    border:1px solid var(--edge-2);border-radius:6px;box-shadow:var(--lift-2);}
.app-modal-dialog h2{font-size:23px;margin-bottom:10px;}
.app-modal-dialog p{margin:0;color:var(--grey);font-size:15px;line-height:1.6;}
.app-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;}

.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--edge-2);border-radius:999px;
    padding:6px 15px 6px 12px;font-size:13px;color:var(--grey);background:var(--page);box-shadow:var(--lift);}
.dot{width:7px;height:7px;border-radius:50%;background:#2E9E6B;box-shadow:0 0 0 3px rgba(46,158,107,0.16);flex:none;}

/* ACCESSIBILITY CONTROLS */
.accessibility-widget{position:fixed;right:22px;bottom:22px;z-index:80;}
.accessibility-trigger{width:46px;height:46px;border-radius:50%;border:1px solid var(--edge-2);
    background:var(--page);color:var(--navy);box-shadow:var(--lift-2);font-weight:700;font-size:16px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;}
.accessibility-trigger:hover{border-color:var(--sig);color:var(--sig);}
.accessibility-panel{position:absolute;right:0;bottom:58px;width:250px;padding:16px;background:var(--page);
    border:1px solid var(--edge-2);border-radius:6px;box-shadow:var(--lift-2);}
.accessibility-title{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--grey);margin-bottom:12px;}
.accessibility-option{display:flex;align-items:center;gap:10px;padding:9px 0;color:var(--navy-d);
    font-size:14px;line-height:1.35;cursor:pointer;}
.accessibility-option + .accessibility-option{border-top:1px solid var(--edge);}
.accessibility-option input{width:18px;height:18px;accent-color:var(--sig);flex:none;}
:root[data-reduce-motion="true"] *,
:root[data-reduce-motion="true"] *:before,
:root[data-reduce-motion="true"] *:after{animation:none !important;transition:none !important;}

/* AUTH LAYOUT — sign in, accept invitation, reset password */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 0.9fr;}
.auth-form{display:flex;flex-direction:column;justify-content:center;padding:48px 5vw;}
.auth-inner{width:100%;max-width:400px;margin:0 auto;padding-top:12px;}
.auth-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;}
.auth-back{font-size:12.5px;color:var(--grey);text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.auth-back:hover{color:var(--navy-d);}
.auth-form h1{font-size:32px;margin-bottom:6px;}
.auth-form .sub{font-size:14.5px;color:var(--grey);margin-bottom:24px;}
.auth-form .btn{width:100%;justify-content:center;}
.reset-link{display:inline-block;margin-top:14px;color:var(--sig);font-size:14px;text-decoration:none;
    border-bottom:1px solid rgba(3,105,161,0.55);}
.reset-link:hover{color:var(--navy-d);border-bottom-color:rgba(20,25,43,0.55);}
.auth-fine{margin-top:24px;padding-top:16px;border-top:1px solid var(--edge);
    font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:0.04em;
    text-transform:uppercase;color:var(--grey);}
.auth-aside{background:var(--navy);padding:48px 5vw;display:flex;flex-direction:column;justify-content:center;}
.auth-aside-inner{width:100%;max-width:380px;}
.auth-aside .tag{color:var(--sig-lite);display:block;margin-bottom:14px;}
.auth-aside h2{font-size:23px;color:#fff;line-height:1.25;margin-bottom:16px;}
.auth-aside p{font-size:14.5px;line-height:1.65;color:#B2BACB;margin-bottom:13px;}
.auth-aside a{color:var(--sig-lite);font-size:13px;text-decoration:none;
    border-bottom:1px solid rgba(8,184,248,0.4);display:inline-block;margin-top:10px;}

@media (max-width:800px){
    .auth{min-height:0;grid-template-columns:1fr;}
    .auth-form{padding:36px 24px 30px;}
    .auth-aside{padding:32px 24px 36px;}
    .accessibility-widget{right:16px;bottom:16px;}
    .accessibility-panel{width:min(250px,calc(100vw - 32px));}
}

/* Live password requirement feedback — see webroot/js/password-strength.js */

/* Authenticator setup — wider than the default 400px column so the QR and
 * otpauth URI don't break onto a new line, but still centred the same way. */
.qr-frame{display:flex;justify-content:center;align-items:center;
    margin:18px auto 22px;padding:14px;background:#fff;border:1px solid var(--edge);
    border-radius:12px;width:max-content;box-shadow:0 1px 2px rgba(20,30,55,.04);}
.qr-frame img{display:block;}
.auth-form .auth-inner.wide{max-width:480px;}
.otpauth-line{text-align:center;word-break:break-all;margin:0 0 14px;
    font-size:12.5px;line-height:1.55;color:var(--grey);}
.otpauth-line code{font-family:var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    background:var(--bg-2, #f4f6fa);padding:6px 10px;border-radius:8px;display:inline-block;}
.secret-chip{display:inline-block;font-family:var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    letter-spacing:.12em;background:var(--bg-2, #f4f6fa);border:1px solid var(--edge);
    border-radius:8px;padding:8px 12px;font-size:14px;text-align:center;}
.auth-form .code-row{display:flex;justify-content:center;margin-bottom:18px;}

/* Used on both auth pages and the in-app relink page. */
.qr-frame{display:flex;justify-content:center;align-items:center;
    margin:18px auto 22px;padding:14px;background:#fff;border:1px solid var(--edge);
    border-radius:12px;width:max-content;box-shadow:0 1px 2px rgba(20,30,55,.04);}
.qr-frame img{display:block;}
.otpauth-line{text-align:center;word-break:break-all;margin:0 0 14px;
    font-size:12.5px;line-height:1.55;color:var(--grey);}
.otpauth-line code{font-family:var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    background:var(--bg-2, #f4f6fa);padding:6px 10px;border-radius:8px;display:inline-block;}
.secret-chip{display:inline-block;font-family:var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    letter-spacing:.12em;background:var(--bg-2, #f4f6fa);border:1px solid var(--edge);
    border-radius:8px;padding:8px 12px;font-size:14px;text-align:center;}
.code-row{display:flex;justify-content:center;margin-bottom:18px;}

/* Backup codes shown once after enrolment or regeneration. */
.backup-codes{list-style:none;padding:0;margin:18px 0;
    display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;}
.backup-codes li code{font-family:var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    letter-spacing:.1em;background:var(--bg-2, #f4f6fa);padding:8px 12px;
    border:1px solid var(--edge);border-radius:8px;display:block;text-align:center;}

/* Single-shot warning flash used for "shown once" notices. */
.flash-warning{padding:14px 16px;border-radius:10px;margin:14px 0;
    background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);
    color:#7a4f06;font-size:14px;line-height:1.5;}

/* Inline live error for fields that show feedback without a submit. */
.field-error{margin:-10px 0 14px;font-size:13px;color:#b3261e;
    background:rgba(179,38,30,.08);border:1px solid rgba(179,38,30,.25);
    border-radius:8px;padding:8px 12px;line-height:1.45;}
.field-error[hidden],.field-error:empty{display:none;}
.pw-rules{list-style:none;padding:0;margin:0 0 18px;}
.pw-rules li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--grey);padding:2.5px 0;
    transition:color .15s ease;}
.pw-rules li.is-met{color:#0F6E56;}
.pw-mark{width:13px;display:inline-block;text-align:center;flex:none;}

.pw-field .input{position:relative;}
.pw-field input{padding-right:40px;}
.pw-eye{position:absolute;right:4px;bottom:0;height:48px;width:36px;border:0;background:transparent;
    padding:0;cursor:pointer;color:var(--grey-2);display:flex;align-items:center;justify-content:center;}
.pw-eye:hover{color:var(--navy-d);}
.pw-eye svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;}
.pw-match{font-size:12.5px;margin:7px 0 0;min-height:17px;color:#c62828;}
.pw-match.is-met{color:#0F6E56;}

:root[data-reduce-motion="true"] .pw-rules li{transition:none;}

.modal-backdrop {
    width: 200vw !important;
    height: 300vw !important;
}
/*!* ==========================================*/
/*   Mobile Responsive Drawer (<= 1000px)*/
/*   ========================================== *!*/
/*@media (max-width: 1000px) {*/
/*    body {*/
/*        padding-top: 30px;*/
/*    }*/
/*}*/