/* DS1: S1 first-time email link. Sits on tokens/tokens.css + tokens/app.css. No raw hex. */
@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+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

.s1 .login-shell{align-items:start;padding-top:max(6vh,var(--s-6));padding-bottom:var(--s-7)}
.s1 .login-card{max-width:460px;position:relative}
.s1 .login-card h1{font-size:var(--t-2xl);margin:0}
.s1 .lede{color:var(--color-muted);margin:var(--s-3) 0 var(--s-5)}
.s1 .nav .who{color:var(--color-muted);text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-xs)}
.s1 .btn{display:block;width:100%;text-align:center;box-sizing:border-box}
.s1 .btn+.btn{margin-top:var(--s-3)}
.s1 .btn:focus-visible,.s1 a:focus-visible,.s1 input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-card),0 0 0 5px var(--color-accent)}
.s1 .btn[aria-disabled=true]{background:var(--color-bg);color:var(--color-muted);border:1.5px solid var(--color-line);cursor:not-allowed}
.s1 .btn[aria-disabled=true]:hover{background:var(--color-bg)}
.s1 .links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);justify-content:center;margin-top:var(--s-5);font-size:var(--t-sm)}
.s1 .links a{font-weight:600}
.s1 .hint-row{display:flex;gap:.6rem;align-items:center;color:var(--color-muted);font-size:var(--t-sm);margin:var(--s-3) 0 0}
.s1 .hint-row svg{flex:0 0 18px}
.s1 .addr{display:block;background:var(--color-bg);border:1px solid var(--color-line);border-radius:10px;padding:.7rem .9rem;color:var(--color-ink);font-weight:600;word-break:break-all;margin:0 0 var(--s-5)}
.s1 .badge-ic{width:56px;height:56px;border-radius:50%;background:var(--color-accent-wash);display:grid;place-items:center;margin-bottom:var(--s-4)}
.s1 .badge-ic svg{display:block}
.s1 .badge-ic.warn{background:var(--color-warning-wash)}
.s1 .badge-ic.bad{background:var(--color-danger-wash)}
.s1 .steps{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;gap:var(--s-3);counter-reset:st}
.s1 .steps li{counter-increment:st;display:grid;grid-template-columns:28px 1fr;gap:var(--s-3);align-items:start;color:var(--color-body);font-size:var(--t-sm);line-height:1.45}
.s1 .steps li::before{content:counter(st);width:28px;height:28px;border-radius:50%;background:var(--color-ink);color:var(--color-on-accent);font-weight:700;font-size:var(--t-xs);display:grid;place-items:center}
.s1 .notice{border-radius:10px;padding:var(--s-3) var(--s-4);font-size:var(--t-sm);line-height:1.5;margin:0 0 var(--s-5)}
.s1 .notice strong{display:block;margin-bottom:.1rem}
.s1 .notice.warn{background:var(--color-warning-wash);color:var(--color-warning-ink)}
.s1 .notice.bad{background:var(--color-danger-wash);color:var(--color-danger-ink)}
.s1 .why{margin:0 0 var(--s-5);padding:0;list-style:none;display:grid;gap:var(--s-2);font-size:var(--t-sm);color:var(--color-body)}
.s1 .why li{padding-left:1.1rem;position:relative}
.s1 .why li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--color-accent)}
.s1 .count{display:flex;align-items:center;gap:var(--s-4);margin:0 0 var(--s-5)}
.s1 .count .ring{--p:30;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--color-accent) calc(var(--p)*1%),var(--color-line) 0);display:grid;place-items:center;flex:0 0 64px}
.s1 .count .ring b{width:50px;height:50px;border-radius:50%;background:var(--color-card);display:grid;place-items:center;color:var(--color-ink);font-size:var(--t-base);font-variant-numeric:tabular-nums}
.s1 .count p{margin:0;color:var(--color-body);font-size:var(--t-sm)}
.s1 .variant{max-width:460px;width:100%;margin:var(--s-6) auto 0}
.s1 .variant-label{display:flex;align-items:center;gap:var(--s-3);color:var(--color-muted);font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s-3)}
.s1 .variant-label::after{content:"";flex:1;height:1px;background:var(--color-line)}
.s1 .login-card.compact{padding:var(--s-6)}
.s1 .hook{margin-top:var(--s-6);margin-bottom:0;font-size:var(--t-base)}
.s1 .field input[readonly]{background:var(--color-bg)}
@media(max-width:520px){.s1 .login-card{padding:var(--s-6) var(--s-5)}.s1 .login-card h1{font-size:var(--t-xl)}.s1 .login-shell{padding-left:var(--s-3);padding-right:var(--s-3)}}

/* ---- the mail page: mail-client frame + plain, robust mail ---- */
.s1m main{flex:1;padding:var(--s-6) var(--s-4) var(--s-7)}
.mailapp{max-width:720px;margin:0 auto;background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.mailapp-bar{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--color-bg);border-bottom:1px solid var(--color-line);color:var(--color-muted);font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mailapp-bar i{width:10px;height:10px;border-radius:50%;background:var(--color-line);display:inline-block}
.mailhead{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--color-line)}
.mailhead h1{font-size:var(--t-lg);margin:0 0 var(--s-3);font-weight:700}
.mailmeta{display:grid;grid-template-columns:auto 1fr;gap:.2rem var(--s-3);font-size:var(--t-sm);margin:0}
.mailmeta dt{color:var(--color-muted)}
.mailmeta dd{margin:0;color:var(--color-ink);word-break:break-all}
.mailstage{background:var(--color-bg);padding:var(--s-6) var(--s-4)}
.mail{max-width:520px;margin:0 auto;background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);color:var(--color-body);font-size:var(--t-base);line-height:1.6}
.mail-top{padding:var(--s-5) var(--s-6) var(--s-4);border-bottom:4px solid var(--color-accent)}
.mail-top img{height:48px;width:auto;display:block}
.mail-body{padding:var(--s-5) var(--s-6) var(--s-6)}
.mail-body p{margin:0 0 var(--s-4)}
.mail-body h2{font-size:var(--t-xl);margin:0 0 var(--s-4)}
.mail-btn{display:block;text-align:center;background:var(--color-ink);color:var(--color-on-accent);border-bottom:3px solid var(--color-accent);font-weight:700;padding:.95rem 1.4rem;border-radius:10px;text-decoration:none;margin:var(--s-5) 0}
.mail-btn:hover{background:var(--color-ink);text-decoration:none}
.mail-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-card),0 0 0 5px var(--color-ink)}
.mail-small{font-size:var(--t-sm);color:var(--color-muted)}
.mail-url{display:block;word-break:break-all;font-size:var(--t-xs);color:var(--color-accent-text);margin:var(--s-2) 0 var(--s-4)}
.mail-rule{border:0;border-top:1px solid var(--color-line);margin:var(--s-5) 0}
.mail-foot{padding:var(--s-4) var(--s-6);background:var(--color-bg);border-top:1px solid var(--color-line);border-radius:0 0 var(--radius) var(--radius);color:var(--color-muted);font-size:var(--t-xs);text-align:center}
@media(max-width:520px){.mailhead{padding:var(--s-4)}.mail-top,.mail-body{padding-left:var(--s-5);padding-right:var(--s-5)}.mailstage{padding:var(--s-4) var(--s-2)}}
.s1 .note.plain{background:none;border:0;padding:0;border-radius:0;color:var(--color-muted);font-size:var(--t-sm);margin-top:var(--s-4)}
.s1 .steps li span{min-width:0}
.s1 main{padding-bottom:5rem}
.s1 .foot{margin-top:auto}

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