/* Baukasten: sign-in, sign-up, password, verification and waiting-list pages.
   Same class names as the Toy Box pages (auth-*, su-*), because signup-steps.js, auth-password-strength.js and
   auth_transition.js are written against them; only the look changes. Needs site_baukasten_bridge.css (the token bridge).
   Decoration follows the one rule of the system: filled shapes are kinds of learning card (here: the corner shapes),
   people and places are ink outlines (the account mark, the role tiles). */
.bk-auth{position:relative;overflow:hidden;display:grid;place-items:center;min-height:calc(100dvh - 4.2rem);padding:clamp(2rem,6vw,4rem) 16px clamp(3rem,7vw,5rem)}
.bk-auth__shp{position:absolute;--s:clamp(2.4rem,6vw,4.4rem);opacity:.9;pointer-events:none}
.bk-auth__shp--1{top:12%;left:7%} .bk-auth__shp--2{top:20%;right:9%} .bk-auth__shp--3{bottom:14%;left:11%} .bk-auth__shp--4{bottom:20%;right:8%}
@media (max-width:760px){.bk-auth__shp{display:none}}

.auth-card{position:relative;z-index:1;width:min(460px,100%);padding:clamp(1.5rem,4vw,2.4rem);display:grid;gap:1.1rem;box-shadow:6px 6px 0 var(--ink)}
.su-card{width:min(540px,100%)}
.auth-brand{display:grid;justify-items:center;text-align:center;gap:.6rem}
.auth-brand .mark{width:56px;height:56px;border-radius:14px;border:2px solid var(--ink);display:grid;place-items:center;color:var(--ink);background:var(--paper)}
.auth-brand .mark svg{width:28px;height:28px;display:block}
.auth-brand .mark--ok{background:var(--sage);color:var(--sage-ink);border-color:var(--ink)}
.auth-brand .mark--warn{background:var(--ochre);color:var(--ochre-ink)}
.auth-card h1{font-size:clamp(1.8rem,4vw,2.4rem);letter-spacing:-.04em;line-height:1}
.auth-card .line{margin:0 auto;text-align:center;font-size:.98rem;max-width:34ch;color:var(--soft)}
.auth-card > .chip-btn{width:100%}

.auth-form{display:grid;gap:1rem}
.auth-fld{display:grid;gap:.35rem;font:600 .86rem var(--f-b);color:var(--ink)}
.auth-fld .note{font-weight:400;color:var(--soft)}
.auth-form input:not([type=checkbox]):not([type=radio]),.auth-form select,.auth-form textarea,.sup-note-form input,.sup-note-form textarea{
  width:100%;font:400 .95rem var(--f-b);padding:.72rem .85rem;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}
.auth-form textarea,.sup-note-form textarea{min-height:8rem;resize:vertical}
.auth-form input:focus,.auth-form select:focus,.auth-form textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgb(45 79 161/.18)}
.auth-form input::placeholder{color:var(--soft);opacity:.7}
.auth-form input[aria-invalid=true]{border-color:var(--brick)}
.auth-form input[readonly]{background:var(--paper-2);color:var(--soft);cursor:default;text-overflow:ellipsis}
.auth-form input[readonly]:focus{border-color:var(--line);box-shadow:none}
.auth-fld-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.auth-fld-head a{font:600 .82rem var(--f-b);color:var(--cobalt)}
.auth-fld-wrap,.auth-pw,.su-field{position:relative;display:block}
.auth-fld-wrap input,.auth-pw input{padding-inline-end:2.9em}
.auth-pw-toggle{position:absolute;top:50%;inset-inline-end:.4em;transform:translateY(-50%);width:2.2rem;height:2.2rem;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--soft);cursor:pointer}
.auth-pw-toggle:hover{color:var(--ink);background:var(--paper-2)}
.auth-pw-toggle svg{width:20px;height:20px;display:block}
.auth-check{display:flex;align-items:center;gap:.55rem;font:500 .9rem var(--f-b);color:var(--soft)}
.auth-check input{width:1.1em;height:1.1em;accent-color:var(--ink)}
.auth-form .chip-btn{width:100%;margin-top:.3rem}
.auth-form .chip-btn[disabled]{opacity:.7;cursor:wait}
.auth-hint{font-size:.82rem;line-height:1.4;color:var(--soft)}
.auth-hint--center{text-align:center}
.auth-err{font-size:.84rem;font-weight:600;color:var(--brick)}
.auth-err a{color:inherit;text-decoration:underline}
.auth-fld-hint{margin-top:-.7rem}
.auth-foot{text-align:center;font-size:.92rem;color:var(--soft)}
.auth-foot a{color:var(--ink);font-weight:600}
.auth-msgs{display:grid;gap:.5rem}
.auth-msg{border-radius:12px;padding:.7em 1em;font-weight:500;font-size:.9rem;border:1.5px solid var(--ink);background:var(--card)}
.auth-msg--error{border-color:var(--brick);color:var(--brick);background:#FBEAE5}
.auth-msg--warning{border-color:var(--ochre);color:#6B4A07;background:#FBF1DA}
.auth-msg--success{border-color:var(--sage);color:#2F5A3D;background:#E6F0E8}
.auth-fld-status{position:absolute;top:50%;inset-inline-end:.7em;transform:translateY(-50%);width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.auth-fld-status[hidden]{display:none}
.auth-fld-status.is-valid{color:#2F5A3D;background:#E6F0E8}.auth-fld-status.is-valid::before{content:"\2713"}
.auth-fld-status.is-invalid{color:var(--brick);background:#FBEAE5}.auth-fld-status.is-invalid::before{content:"\2715"}

/* password strength (auth-password-strength.js) */
.auth-pw-meter{display:grid;gap:.4rem;margin-top:-.3rem}
.auth-pw-meter__bar{height:5px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.auth-pw-meter__fill{display:block;height:100%;width:0;border-radius:99px;background:var(--soft);transition:width .25s}
.auth-pw-meter.is-weak .auth-pw-meter__fill{background:var(--brick)}
.auth-pw-meter.is-fair .auth-pw-meter__fill{background:var(--ochre)}
.auth-pw-meter.is-good .auth-pw-meter__fill{background:var(--sage)}
.auth-pw-meter.is-strong .auth-pw-meter__fill{background:var(--cobalt)}
.auth-pw-meter__label{font:600 .8rem var(--f-b);color:var(--soft);margin:0}
.auth-pw-checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.25rem .8rem;font-size:.78rem;color:var(--soft)}
.auth-pw-checklist li{display:flex;align-items:center;gap:.4rem}
.auth-pw-checklist li::before{content:"";width:1em;height:1em;flex:none;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:.7em}
.auth-pw-checklist li.is-met{color:#2F5A3D}
.auth-pw-checklist li.is-met::before{content:"\2713";background:var(--sage);border-color:var(--sage);color:var(--sage-ink)}
@media (max-width:400px){.auth-pw-checklist{grid-template-columns:1fr}}
.auth-pw-match{font:600 .82rem var(--f-b);color:#2F5A3D;margin:0}
.auth-pw-match.is-mismatch{color:var(--brick)}

/* sign-up as steps (signup-steps.js) */
.su-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.su-form{gap:1.3rem}
.su-step{display:grid;gap:1rem;min-width:0}
.su-step[hidden]{display:none}
.su-step__title{font-size:clamp(1.35rem,3.4vw,1.7rem);outline:none}
.su-step__sub{margin:-.6rem 0 0;color:var(--soft);font-size:.95rem}
.su-track{list-style:none;margin:0;padding:0;display:flex;gap:.45rem}
.su-track li{flex:1;display:flex;align-items:center;gap:.45rem;padding-top:.7rem;position:relative;font:500 .74rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.su-track li::before{content:"";position:absolute;inset:0 0 auto;height:5px;border-radius:99px;background:var(--line)}
.su-track__n{width:1.35rem;height:1.35rem;flex:none;border-radius:50%;display:grid;place-items:center;font-size:.72rem;border:1.5px solid var(--ink);color:var(--ink)}
.su-track li.is-current{color:var(--ink)}.su-track li.is-current::before{background:var(--ink)}
.su-track li.is-current .su-track__n{background:var(--ink);color:var(--paper)}
.su-track li.is-done::before{background:var(--sage)}
.su-track li.is-done .su-track__n{background:var(--sage);border-color:var(--sage);font-size:0}
.su-track li.is-done .su-track__n::after{content:"\2713";font-size:.74rem;color:var(--sage-ink)}
.su-badge{justify-self:start;display:inline-flex;align-items:center;gap:.55rem;margin:-.3rem 0 0;padding:.3rem .8rem .3rem .35rem;border:1.5px solid var(--ink);border-radius:999px;font-size:.9rem}
.su-badge[hidden]{display:none}
.su-badge__emoji{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--paper-2)}
.su-tiles{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.su-tile{position:relative;display:grid;justify-items:center;align-content:start;gap:.35rem;text-align:center;padding:1rem .6rem;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);cursor:pointer;transition:border-color .15s,background .15s}
.su-tile:hover{border-color:var(--ink)}
.su-tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.su-tile__emoji{width:3.2rem;height:3.2rem;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:1.5rem;background:var(--card)}
.su-tile__title{font:800 .98rem var(--f-d);line-height:1.1}
.su-tile__blurb{font-size:.76rem;line-height:1.35;color:var(--soft)}
.su-tile__tick{position:absolute;top:-.55rem;inset-inline-end:-.55rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;opacity:0;scale:.6;transition:opacity .15s,scale .15s}
.su-tile__tick svg{width:.95rem;height:.95rem;display:block}
.su-tile:has(input:checked){border-color:var(--ink);background:var(--card);box-shadow:3px 3px 0 var(--ink)}
.su-tile:has(input:checked) .su-tile__tick{opacity:1;scale:1}
.su-tile:has(input:focus-visible){outline:3px solid var(--cobalt);outline-offset:2px}
.su-note{font-size:.84rem;color:var(--soft);margin:-.4rem 0 0}
@media (max-width:480px){.su-tiles{grid-template-columns:1fr}.su-tile{grid-template-columns:auto 1fr;justify-items:start;text-align:start;column-gap:.8rem}.su-tile__emoji{grid-row:span 2}}
.su-nav{display:flex;gap:.6rem;margin-top:.2rem}
.su-form .su-nav .chip-btn{width:auto;flex:1;margin-top:0;white-space:nowrap}
.su-form .su-nav [data-su-back]{flex:0 0 auto}
.su-form .su-nav .chip-btn:disabled{opacity:.4;cursor:not-allowed}
.su-mark{position:absolute;top:50%;inset-inline-end:.75em;translate:0 -50%;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center}
.auth-pw .su-mark{inset-inline-end:2.95em}
.su-field input{padding-inline-end:3em}
.auth-form .auth-pw:has(.su-mark) input{padding-inline-end:5.4em}
.su-mark>*{grid-area:1/1;display:none}
.su-mark svg{width:1rem;height:1rem}
.su-mark.is-checking .su-mark__spin{display:block;width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink);animation:bk-spin .7s linear infinite}
.su-mark.is-ok{background:var(--sage);color:var(--sage-ink)}.su-mark.is-ok .su-mark__ok{display:block}
.su-mark.is-bad{background:var(--brick);color:#fff}.su-mark.is-bad .su-mark__bad{display:block}
@keyframes bk-spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.su-mark.is-checking .su-mark__spin{animation:none}}

/* waiting list: role picker */
.auth-roles{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.5rem}
.auth-roles legend{padding:0;margin-bottom:.45rem;font:600 .9rem var(--f-b)}
.auth-role{position:relative;display:flex;align-items:center;gap:.8rem;cursor:pointer;padding:.7rem .85rem;border:1.5px solid var(--line);border-radius:14px;background:var(--paper)}
.auth-role:hover{border-color:var(--ink)}
.auth-role input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.auth-role__icon{flex:none;width:2.3rem;height:2.3rem;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;background:var(--card);font-size:1.2rem}
.auth-role__text{display:grid;flex:1;min-width:0}
.auth-role__title{font:800 .98rem var(--f-d)}
.auth-role__blurb{font-size:.8rem;color:var(--soft);line-height:1.35}
.auth-role__dot{flex:none;width:1.1rem;height:1.1rem;border-radius:50%;border:1.5px solid var(--ink)}
.auth-role:has(input:checked){border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.auth-role:has(input:checked) .auth-role__dot{background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper)}
.auth-role:has(input:focus-visible){outline:3px solid var(--cobalt);outline-offset:2px}
.auth-brand .line:empty{display:none}
.auth-pw-toggle svg[hidden]{display:none}
@media (max-width:480px){.auth-card{box-shadow:4px 4px 0 var(--ink);width:calc(100% - 4px)}}