/* DS3: S3 login. On top of tokens/tokens.css and 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}

body.ds3{background:var(--fk-white)}
.ds3 .nav .who{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-muted)}
.ds3 .login-card{box-shadow:none;border:0;padding:0;max-width:430px;background:transparent}
.ds3 h1{font-size:var(--t-2xl);margin-bottom:var(--s-3)}
.ds3 .lede{color:var(--color-muted);line-height:1.55;margin:0 0 var(--s-6)}
.ds3 .field{margin-bottom:var(--s-4)}
.ds3 .label-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.ds3 .label-row a{font-size:var(--t-sm);font-weight:600}
.ds3 .btn{display:block;width:100%;text-align:center;padding:.9rem}
.ds3 .btn:focus-visible,.ds3 a:focus-visible,.ds3 .pw-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.35);border-radius:var(--radius-sm)}
.ds3 .btn-link{background:var(--color-card);color:var(--color-ink);border:1.5px solid var(--color-line);margin-top:var(--s-3)}
.ds3 .btn-link:hover{border-color:var(--color-ink);text-decoration:none}
.ds3 .btn-link small{display:block;font-weight:500;font-size:var(--t-xs);color:var(--color-muted);margin-top:.1rem}
.ds3 .or{display:flex;align-items:center;gap:var(--s-3);color:var(--color-muted);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;margin:var(--s-5) 0 0}
.ds3 .or::before,.ds3 .or::after{content:"";flex:1;height:1px;background:var(--color-line)}
.ds3 .pw-wrap{position:relative}
.ds3 .pw-wrap input{padding-right:4.6rem}
.ds3 .pw-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:0;font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--color-accent-text);cursor:pointer;padding:.3rem .5rem}
.ds3 .trouble{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--color-line);font-size:var(--t-sm);color:var(--color-muted)}
.ds3 .hook{margin:var(--s-5) 0 0;font-size:var(--t-base)}
.ds3 .alert{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--color-danger-wash);color:var(--color-danger-ink);border:1px solid var(--color-danger);border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-5);font-size:var(--t-sm);line-height:1.5}
.ds3 .alert svg{flex:0 0 auto;margin-top:.15rem}
.ds3 .alert strong{display:block;color:var(--color-danger-ink)}
.ds3 .alert.info{background:var(--color-info-wash);color:var(--color-info-ink);border-color:var(--color-info)}
.ds3 .alert.info strong{color:var(--color-info-ink)}
.ds3 input[aria-invalid="true"]{border-color:var(--color-danger);box-shadow:0 0 0 3px rgba(198,40,40,.12)}
.ds3 .sent-icon{width:56px;height:56px;border-radius:50%;background:var(--color-accent-wash);display:grid;place-items:center;margin-bottom:var(--s-5)}
.ds3 .mailbox{background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--s-4) var(--s-5);margin:0 0 var(--s-5);font-size:var(--t-sm)}
.ds3 .mailbox b{color:var(--color-ink)}
.ds3 .mailbox ul{margin:var(--s-2) 0 0 var(--s-5);color:var(--color-body)}
.ds3 .btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.ds3 .foot{margin-top:auto}
@media(max-width:560px){
  .ds3 .nav{padding:var(--s-3) var(--s-4)}
    .ds3 .nav .who{font-size:.68rem;letter-spacing:.05em;text-align:right}
  .ds3 .login-shell{padding:var(--s-6) var(--s-4);place-items:start center}
  .ds3 h1{font-size:var(--t-xl)}
}

/* ===== 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)}}