/* DS4: S4 password reset by email link. Sits on tokens/tokens.css + tokens/app.css. */
@font-face{
  font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/onest-latin.woff2) 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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/onest-latin-ext.woff2) 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;
}

.s4 .login-card h1{font-size:var(--t-2xl); line-height:1.1; margin-bottom:var(--s-3)}
.s4 .lede{color:var(--color-muted); font-size:var(--t-base); line-height:1.55; margin:0 0 var(--s-5)}
.s4 .lede strong{color:var(--color-ink); font-weight:600; overflow-wrap:anywhere}
.s4 .btn{display:block; width:100%; text-align:center; margin-top:var(--s-2)}
.s4 .btn:focus-visible, .s4 a:focus-visible, .s4 .toggle:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(225,115,53,.35)}
.s4 .btn-quiet{background:transparent; color:var(--color-ink); border:1.5px solid var(--color-line)}
.s4 .btn-quiet:hover{border-color:var(--color-ink); text-decoration:none}
.s4 .btn[aria-disabled=true]{background:var(--color-bg); color:var(--color-muted); border:1.5px solid var(--color-line); cursor:default}
.s4 .btn[aria-disabled=true]:hover{background:var(--color-bg)}
.s4 .back{display:block; text-align:center; margin-top:var(--s-4); font-size:var(--t-sm); font-weight:600}
.s4 .fine{color:var(--color-muted); font-size:var(--t-sm); margin-top:var(--s-4); line-height:1.5}
.s4 .eyebrow.is-ink{background:var(--color-ink)}

/* round icon above the heading */
.s4 .glyph{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin-bottom:var(--s-4);
  background:var(--color-accent-wash); color:var(--color-accent-text)}
.s4 .glyph svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.s4 .glyph.ok{background:var(--color-success-wash); color:var(--color-success-ink)}
.s4 .glyph.bad{background:var(--color-warning-wash); color:var(--color-warning-ink)}

/* what happens next */
.s4 .facts{list-style:none; margin:0 0 var(--s-5); padding:0; display:grid; gap:var(--s-3)}
.s4 .facts li{display:flex; gap:var(--s-3); align-items:flex-start; font-size:var(--t-sm); color:var(--color-body); line-height:1.45}
.s4 .facts i{flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--color-accent-wash); color:var(--color-accent-text);
  display:grid; place-items:center; font-style:normal; font-weight:700; font-size:var(--t-xs)}
.s4 .rule-box{border-top:1px solid var(--color-line); padding-top:var(--s-4); margin-top:var(--s-5)}

/* inline notice */
.s4 .notice{border-radius:var(--radius-sm); padding:var(--s-3) var(--s-4); font-size:var(--t-sm); line-height:1.5; margin-bottom:var(--s-4);
  background:var(--color-info-wash); color:var(--color-info-ink)}

/* password field with show toggle */
.s4 .pw{position:relative}
.s4 .pw input{padding-right:4.6rem}
.s4 .pw .toggle{position:absolute; right:.45rem; top:50%; transform:translateY(-50%); background:transparent; border:0; cursor:pointer;
  font:inherit; font-size:var(--t-sm); font-weight:600; color:var(--color-accent-text); padding:.35rem .6rem; border-radius:var(--radius-sm)}
.s4 .pw .toggle:hover{background:var(--color-accent-wash)}
.s4 .meter{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:var(--s-2)}
.s4 .meter i{height:5px; border-radius:99px; background:var(--color-line)}
.s4 .meter.m1 i:nth-child(-n+1),.s4 .meter.m2 i:nth-child(-n+2),.s4 .meter.m3 i:nth-child(-n+3),.s4 .meter.m4 i:nth-child(-n+4){background:var(--color-success)}
.s4 .meter-label{font-size:var(--t-xs); color:var(--color-muted); margin-top:var(--s-1)}
.s4 .checks{list-style:none; margin:var(--s-3) 0 var(--s-4); padding:0; display:grid; gap:var(--s-2); font-size:var(--t-sm); color:var(--color-body)}
.s4 .checks li{display:flex; gap:var(--s-2); align-items:center}
.s4 .checks .tick{flex:0 0 auto; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--color-line); display:grid; place-items:center}
.s4 .checks .on .tick{background:var(--color-success); border-color:var(--color-success); color:#fff}
.s4 .checks .bad{color:var(--color-danger-ink)}
.s4 .checks .bad .tick{border-color:var(--color-danger); background:var(--color-danger-wash)}
.s4 .checks .tick svg{width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0}
.s4 .checks .on .tick svg{opacity:1}

/* mail preview */
.s4 .mail-shell{flex:1; padding:var(--s-6) var(--s-5) var(--s-7); display:flex; flex-direction:column; align-items:center}
.s4 .mail-cap{font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted); margin-bottom:var(--s-3); text-align:center}
.s4 .mail-frame{width:100%; max-width:600px; background:var(--color-card); border:1px solid var(--color-line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.s4 .mail-head{padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--color-line); background:var(--color-bg); display:grid; gap:2px; font-size:var(--t-sm)}
.s4 .mail-head b{color:var(--color-ink)}
.s4 .mail-head .subj{font-size:var(--t-lg); font-weight:700; color:var(--color-ink); margin-bottom:var(--s-2)}
.s4 .mail-head span{color:var(--color-muted)}
.s4 .mail-body{padding:var(--s-6) var(--s-6) var(--s-5)}
.s4 .mail-body .script{font-family:var(--font-script); font-size:1.9rem; color:var(--color-ink); line-height:1; display:block; margin-bottom:var(--s-5)}
.s4 .mail-body h1{font-size:var(--t-xl); margin-bottom:var(--s-3)}
.s4 .mail-body p{margin-bottom:var(--s-4); line-height:1.6}
.s4 .mail-body .btn{display:inline-block; width:auto; padding:.85rem 1.6rem; margin:var(--s-2) 0 var(--s-4)}
.s4 .mail-body .raw{font-size:var(--t-xs); color:var(--color-muted); overflow-wrap:anywhere; line-height:1.5}
.s4 .mail-foot{border-top:1px solid var(--color-line); padding:var(--s-4) var(--s-6); font-size:var(--t-xs); color:var(--color-muted); line-height:1.5}
.s4 .mail-note{max-width:600px; width:100%; margin-top:var(--s-4); font-size:var(--t-xs); color:var(--color-muted); text-align:center}

@media(max-width:560px){
  .s4 .login-card{padding:var(--s-6) var(--s-5)}
  .s4 .login-card h1{font-size:var(--t-xl)}
  .s4 .mail-shell{padding:var(--s-5) var(--s-3) var(--s-6)}
  .s4 .mail-body{padding:var(--s-5)}
  .s4 .mail-foot{padding:var(--s-4) var(--s-5)}
  .s4 .mail-body .btn{display:block; width:100%}
}

/* ===== AUTH V1 SHARED (CHECKS): identical block in ds1 to ds4 css. Reference = the S1 sign-in card on the live app.css look. Edit all four together. ===== */
body.s1,body.ds2-page,body.ds3,body.s4{background:var(--color-bg)}
body .nav{padding:var(--s-4) var(--s-6)}
body .nav .brand{font-size:1.7rem;text-decoration:none}
body .nav .who{color:var(--color-muted);text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-xs)}
body .login-shell{align-items:start;padding-top:max(6vh,var(--s-6));padding-bottom:var(--s-7)}
body .login-shell .login-card{max-width:460px;padding:var(--s-7) var(--s-6);background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow)}
body .login-shell .login-card h1{font-size:var(--t-2xl);line-height:1.15;margin:0}
body .login-shell .login-card .lede,body .login-shell .login-card .ds2-lede{color:var(--color-muted);font-size:var(--t-base);line-height:1.55;margin:var(--s-3) 0 var(--s-5)}
body .login-shell .login-card .btn{display:block;width:100%;box-sizing:border-box;text-align:center;padding:.8rem 1.4rem}
body .login-shell .login-card .btn-link,body .login-shell .login-card .btn-quiet,body .login-shell .login-card .btn-ghost,body .login-shell .login-card .ds2-skip{background:transparent;color:var(--color-accent-text);border:1.5px solid var(--color-line);font-weight:700;margin-top:var(--s-3)}
body .login-shell .login-card .btn-link:hover,body .login-shell .login-card .btn-quiet:hover,body .login-shell .login-card .btn-ghost:hover,body .login-shell .login-card .ds2-skip:hover{border-color:var(--color-accent-text);text-decoration:none}
body .login-shell .login-card .btn:focus-visible,body .login-shell .login-card a:focus-visible,body .login-shell .login-card input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-card),0 0 0 5px var(--color-accent)}
body .login-shell .login-card .hook{margin:var(--s-6) 0 0;font-size:var(--t-base)}
body .foot{margin-top:auto}
@media(max-width:520px){body .nav{padding:var(--s-3) var(--s-4)}body .login-shell{padding-left:var(--s-3);padding-right:var(--s-3)}body .login-shell .login-card{padding:var(--s-6) var(--s-5)}body .login-shell .login-card h1{font-size:var(--t-xl)}}