/* featureos:password-reset@1.0.0 */
/* The reset flow draws inside the existing sign-in card; every colour is one of the product's own tokens, so both themes follow. */
.pr{--pr-dur-fast:140ms;--pr-dur:280ms;--pr-dur-slow:560ms;--pr-ease:cubic-bezier(.16,1,.3,1);--pr-spring:cubic-bezier(.34,1.5,.64,1)}
.pr .mono{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:.93em}
.pr-rail{margin:0 0 22px}
.pr-steps{display:flex;justify-content:space-between;margin:0 0 10px;padding:0;list-style:none}
.pr-rs{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:650;color:var(--mut)}
.pr-d{width:7px;height:7px;border-radius:99px;background:var(--line-strong);transition:background var(--pr-dur) var(--pr-ease)}
.pr-rs.is-done{color:var(--ink-2)}.pr-rs.is-done .pr-d{background:var(--brand)}
.pr-rs.is-on{color:var(--brand)}.pr-rs.is-on .pr-d{background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.pr-track{height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.pr-fill{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width var(--pr-dur) var(--pr-ease)}
.pr-card{animation:pr-in var(--pr-dur) var(--pr-ease) both}
@keyframes pr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pr-card h1{margin:0 0 10px}.pr-card h1:focus{outline:none}
.pr .lede{margin:0 0 22px;color:var(--ink-2)}.pr .lede strong{color:var(--ink)}
.pr .foot{margin:18px 0 0;font-size:13px;color:var(--ink-2);text-align:center}
.pr .btn.block{width:100%}.pr .btn:disabled{cursor:not-allowed}
.pr-acts{display:flex;gap:10px;flex-wrap:wrap}.pr-acts .btn{flex:1;text-align:center;justify-content:center}
.pr-dead h1{color:var(--warn)}
.pr-tips{margin:0 0 20px;padding:0 0 0 20px;display:grid;gap:7px;font-size:13px;color:var(--ink-2)}
/* the envelope flaps open once */
.pr-envelope{position:relative;display:block;width:76px;height:52px;margin:0 0 22px}
.pr-env-body{position:absolute;inset:0;border:2px solid var(--brand);border-radius:6px;background:var(--surface)}
.pr-env-flap{position:absolute;left:0;right:0;top:0;height:30px;border-top:2px solid var(--brand);clip-path:polygon(0 0,100% 0,50% 100%);background:var(--brand-soft);transform-origin:top center;animation:pr-flap var(--pr-dur-slow) var(--pr-ease) 200ms both}
@keyframes pr-flap{from{transform:rotateX(0)}to{transform:rotateX(-172deg)}}
/* link expiry */
.pr-expiry{display:flex;align-items:center;gap:10px;margin:0 0 20px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--neutral-soft);transition:background var(--pr-dur) var(--pr-ease)}
.pr-expiry.is-soon{background:var(--warn-soft);box-shadow:inset 3px 0 0 var(--warn)}
.pr-ex-d{width:7px;height:7px;border-radius:99px;background:var(--brand)}.pr-expiry.is-soon .pr-ex-d{background:var(--warn)}
.pr-ex-t{margin:0;font-size:12.5px;color:var(--ink-2)}
/* the field and its show/hide */
.pr-wrap{position:relative}.pr-wrap input{padding-right:72px;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;letter-spacing:.02em}
.pr-peek{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:34px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--ink-2);font:650 12px var(--font);cursor:pointer}
.pr-peek:hover{background:var(--neutral-soft)}
/* strength */
.pr-strength{margin:0 0 16px}
.pr-segs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px}
.pr-sg{height:5px;border-radius:3px;background:var(--line-strong);transform-origin:left;transition:background var(--pr-dur-fast) var(--pr-ease)}
.pr-sg.is-on.s-weak{background:var(--bad)}.pr-sg.is-on.s-fair{background:var(--warn)}.pr-sg.is-on.s-good{background:var(--info)}.pr-sg.is-on.s-strong{background:var(--ok)}
.pr-st{margin:0;font-size:13px;color:var(--ink-2)}.pr-sw{font-weight:700}
.pr-sw.s-weak{color:var(--bad)}.pr-sw.s-fair{color:var(--warn)}.pr-sw.s-good{color:var(--info)}.pr-sw.s-strong{color:var(--ok)}
/* the live checklist */
.pr-reqs{margin:0 0 20px;padding:16px;list-style:none;display:grid;gap:9px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.pr-rq{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}.pr-rq.is-met{color:var(--ink)}
.pr-tick{position:relative;flex:none;width:18px;height:18px;border-radius:99px;background:var(--line-strong)}
.pr-rq.is-met .pr-tick{background:var(--ok-soft)}
.pr-rq.is-met .pr-tick::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(42deg) scale(0);animation:pr-draw 200ms var(--pr-spring) forwards}
@keyframes pr-draw{to{transform:rotate(42deg) scale(1)}}
.pr-rq.is-later .pr-tick{background:transparent;border:1.5px dashed var(--line-strong)}
/* sign out everywhere else */
.pr-signout{display:flex;gap:11px;align-items:flex-start;margin-bottom:20px;cursor:pointer;position:relative}
.pr-signout input{position:absolute;opacity:0;width:0;height:0}
.pr-cb{flex:none;width:18px;height:18px;margin-top:2px;border:1px solid var(--line-strong);border-radius:5px;background:var(--surface);transition:background var(--pr-dur-fast) var(--pr-ease),border-color var(--pr-dur-fast) var(--pr-ease)}
.pr-cb::after{content:"";display:block;width:4px;height:9px;margin:1px auto 0;border:solid var(--brand-ink);border-width:0 2px 2px 0;transform:rotate(42deg) scale(0);transition:transform var(--pr-dur-fast) var(--pr-ease)}
.pr-signout input:checked+.pr-cb{background:var(--brand);border-color:var(--brand)}.pr-signout input:checked+.pr-cb::after{transform:rotate(42deg) scale(1)}
.pr-signout input:focus-visible+.pr-cb{outline:3px solid var(--focus);outline-offset:2px}
.pr-so-t{font-size:13px;font-weight:650}.pr-so-s{display:block;font-size:12px;font-weight:400;color:var(--ink-2)}
/* done */
.pr-done{text-align:center}
.pr-ok{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:99px;background:var(--ok-soft);color:var(--ok)}
.pr-ok-p{stroke-dasharray:42;stroke-dashoffset:42;animation:pr-ok 420ms var(--pr-ease) 160ms forwards}
@keyframes pr-ok{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .pr-card,.pr-env-flap,.pr-rq.is-met .pr-tick::after,.pr-ok-p{animation:none!important}
  .pr-env-flap{transform:rotateX(-172deg)}.pr-rq.is-met .pr-tick::after{transform:rotate(42deg) scale(1)}.pr-ok-p{stroke-dashoffset:0}
  .pr-fill,.pr-d,.pr-sg,.pr-cb,.pr-cb::after,.pr-expiry{transition:none}
}
@media (max-width:480px){.pr-rt{display:none}.pr-steps{justify-content:space-around}.pr-acts{flex-direction:column}}
