/* DS2: S2 set your own password. 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}

.ds2-page{min-height:100vh;display:flex;flex-direction:column;background:var(--color-card)}
.ds2-page .nav{position:static}
.ds2-card{box-shadow:none;border:0;max-width:460px;padding:var(--s-6) var(--s-5)}
.ds2-card h1{font-size:var(--t-2xl);margin-bottom:var(--s-3)}
.ds2-lede{color:var(--color-muted);line-height:1.55;margin:0 0 var(--s-5)}
.ds2-who{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--color-bg);border-radius:var(--radius);margin-bottom:var(--s-5);font-size:var(--t-sm);color:var(--color-muted)}
.ds2-who b{display:block;color:var(--color-ink);font-weight:700}
.ds2-av{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--color-ink);color:var(--color-on-accent);display:grid;place-items:center;font-weight:800;font-size:var(--t-sm)}

/* password field with styled show/hide toggle */
.ds2-pw{position:relative}
.ds2-pw input{padding-right:5.2rem}
.ds2-toggle{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);background:transparent;border:0;border-radius:var(--radius-sm);padding:.35rem .6rem;font:inherit;font-size:var(--t-sm);font-weight:700;color:var(--color-accent-text);cursor:pointer;transition:background .12s}
.ds2-toggle:hover{background:var(--color-accent-wash)}
.ds2-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.35)}
.ds2-field.is-bad input{border-color:var(--color-danger);box-shadow:0 0 0 3px var(--color-danger-wash)}
.ds2-msg{display:flex;gap:.4rem;font-size:var(--t-sm);color:var(--color-danger-ink);margin-top:.1rem}
.ds2-msg::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.45em;border-radius:50%;background:var(--color-danger)}

/* strength and rules */
.ds2-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:var(--s-2) 0 var(--s-2)}
.ds2-meter i{height:6px;border-radius:99px;background:var(--color-line)}
.ds2-meter[data-level="1"] i:nth-child(-n+1){background:var(--color-danger)}
.ds2-meter[data-level="2"] i:nth-child(-n+2){background:var(--color-warning)}
.ds2-meter[data-level="3"] i:nth-child(-n+3){background:var(--color-success)}
.ds2-meter[data-level="4"] i{background:var(--color-success)}
.ds2-strength{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--color-muted);margin-bottom:var(--s-3)}
.ds2-strength b{color:var(--color-ink)}
.ds2-rules{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;gap:.35rem;font-size:var(--t-sm);color:var(--color-muted)}
.ds2-rules li{display:flex;align-items:center;gap:.55rem}
.ds2-rules li::before{content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--color-line);background:var(--color-card)}
.ds2-rules li.ok{color:var(--color-success-ink)}
.ds2-rules li.ok::before{border-color:var(--color-success);background:var(--color-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.8' d='M1 4l3 3 5-6'/%3E%3C/svg%3E") center/10px no-repeat}
.ds2-rules li.bad{color:var(--color-danger-ink)}
.ds2-rules li.bad::before{border-color:var(--color-danger);background:var(--color-danger-wash)}

.ds2-alert{background:var(--color-danger-wash);color:var(--color-danger-ink);border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4);font-size:var(--t-sm);margin-bottom:var(--s-4);border-left:4px solid var(--color-danger)}
.ds2-actions{display:grid;gap:var(--s-3);margin-top:var(--s-2)}
.ds2-actions .btn{width:100%;text-align:center}
.ds2-skip{display:block;text-align:center;font-weight:700;padding:.8rem 1rem;border-radius:10px;border:1.5px solid var(--color-line);color:var(--color-ink)}
.ds2-skip:hover{border-color:var(--color-accent);text-decoration:none}
.ds2-skip:focus-visible,.ds2-actions .btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.35)}
.ds2-link-note{display:flex;gap:var(--s-3);margin-top:var(--s-5);padding:var(--s-4);background:var(--color-accent-wash);border-radius:var(--radius);font-size:var(--t-sm);line-height:1.5;color:var(--color-ink)}
.ds2-link-note strong{color:var(--color-accent-text)}
.ds2-tick{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:var(--color-success-wash);display:grid;place-items:center;margin-bottom:var(--s-4)}
.ds2-tick::after{content:"";width:22px;height:12px;border-left:4px solid var(--color-success);border-bottom:4px solid var(--color-success);transform:rotate(-45deg) translate(2px,-2px)}
.ds2-facts{list-style:none;margin:var(--s-5) 0;padding:0;display:grid;gap:var(--s-3)}
.ds2-facts li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-sm);color:var(--color-body);line-height:1.5}
.ds2-facts li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:.5em;border-radius:50%;background:var(--color-accent)}
.ds2-facts b{color:var(--color-ink)}
@media(max-width:520px){.ds2-card{padding:var(--s-5) var(--s-4)}.ds2-card h1{font-size:var(--t-xl)}}
@media(max-width:520px){.ds2-strength span:last-child{display:none}}

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