/* pwchange.css — extras for pwchange.html. Load AFTER /ms-pages.css (and mirrors ms-federation.css look).
   Only adds .pc-* classes; does not modify ms-pages.css. */

body.ms-page.pc-page{align-items:flex-start; padding:24px 14px 44px}
.ms-shell.pc-shell{width:min(100%,560px)}
.pc-page .ms-body{padding:28px 32px 32px}

.pc-head{margin:0 0 18px}
.pc-eyebrow{margin:0 0 6px; font:600 .72rem/1 ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--ms-accent)}
.pc-h1{margin:0; font-size:clamp(1.6rem,6vw,2.1rem); line-height:1.15; color:#fff; font-weight:800; letter-spacing:.01em}
.pc-h2{margin:0 0 8px; font-size:1.2rem; color:#fff; font-weight:700}
.pc-h1:focus,.pc-h2:focus{outline:none}
.pc-lead{margin:0 0 16px; color:var(--ms-dim); font-size:.97rem}
.pc-lead b{color:var(--ms-text)}
.pc-small{margin:2px 0 0; font-size:.88rem; color:var(--ms-dim)}
.pc-page code{font:600 .88em ui-monospace,monospace; background:rgba(137,180,250,.14); padding:1px 5px; border-radius:4px}

/* step tracker */
.pc-steps{list-style:none; margin:0 0 22px; padding:0; display:flex; gap:6px}
.pc-steps li{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; color:var(--ms-dim)}
.pc-steps li::before{content:""; position:absolute; top:13px; left:-50%; width:100%; height:2px; background:rgba(137,180,250,.22); z-index:0}
.pc-steps li:first-child::before{display:none}
.pc-steps li.done::before,.pc-steps li.cur::before{background:var(--ms-accent)}
.pc-dot{position:relative; z-index:1; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:700 .8rem/1 ui-monospace,monospace; background:#11111b; border:2px solid rgba(137,180,250,.35); color:var(--ms-dim)}
.pc-steps li.cur .pc-dot{border-color:var(--ms-accent); color:#fff; box-shadow:0 0 12px rgba(137,180,250,.6)}
.pc-steps li.done .pc-dot{background:var(--ms-accent); border-color:var(--ms-accent); color:#11111b}
.pc-steps li.cur{color:var(--ms-text)}
.pc-sl{font:600 .66rem/1.2 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; text-align:center}

/* messages */
.pc-msg{display:none; margin:0; padding:10px 14px; border-radius:0 8px 8px 0; border-left:4px solid var(--ms-bad); background:rgba(255,102,102,.09); color:var(--ms-text); font-size:.93rem}
.pc-msg.show{display:block}
.pc-msg.ok{border-left-color:var(--ms-ok); background:rgba(0,255,136,.07)}
.pc-page .ms-actions{margin-top:2px}
.pc-page .ms-actions .ms-btn{min-width:150px}

.pc-link{appearance:none; -webkit-appearance:none; background:none; border:0; padding:6px 0; min-height:44px; margin:0; color:var(--ms-accent); font:inherit; text-decoration:underline; cursor:pointer}
.pc-link:hover{color:#fff}
.pc-link:focus-visible,.pc-eye:focus-visible{outline:2px solid #fff; outline-offset:2px; border-radius:6px}
.pc-code{font-family:ui-monospace,"Courier New",monospace; letter-spacing:.12em}

/* password field + show/hide */
.pc-pw{position:relative}
.pc-pw .ms-input{padding-right:78px}
.pc-eye{position:absolute; top:50%; right:8px; transform:translateY(-50%); min-height:34px; min-width:58px; padding:4px 10px;
  background:rgba(137,180,250,.12); border:1px solid rgba(137,180,250,.4); border-radius:8px; color:var(--ms-accent);
  font:700 .78rem/1 system-ui,sans-serif; cursor:pointer}
.pc-eye:hover{background:rgba(137,180,250,.25); color:#fff}

/* strength meter */
.pc-meter{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:10px 0 0}
.pc-meter i{height:6px; border-radius:3px; background:rgba(137,180,250,.18); transition:background .2s}
.pc-meter[data-score="1"] i:nth-child(-n+1){background:var(--ms-bad)}
.pc-meter[data-score="2"] i:nth-child(-n+2){background:#fab387}
.pc-meter[data-score="3"] i:nth-child(-n+3){background:var(--ms-warn)}
.pc-meter[data-score="4"] i:nth-child(-n+4){background:var(--ms-ok)}
.pc-strength{margin:6px 0 0; min-height:1.3em; font-size:.85rem; font-weight:600; color:var(--ms-dim)}
.pc-strength.s1{color:#ff8a8a}.pc-strength.s2{color:#fab387}.pc-strength.s3{color:var(--ms-warn)}.pc-strength.s4{color:var(--ms-ok)}
.pc-rules{list-style:none; margin:4px 0 0; padding:0; font-size:.85rem; color:var(--ms-dim)}
.pc-rules li[data-ok="1"]{color:var(--ms-ok)}
.pc-match{margin:6px 0 0; min-height:1.3em; font-size:.88rem; font-weight:600; color:var(--ms-dim)}
.pc-match[data-state="ok"]{color:var(--ms-ok)}
.pc-match[data-state="bad"]{color:#ff8a8a}

/* done */
.pc-done{width:64px; height:64px; margin:0 0 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:800; color:#06220f; background:var(--ms-ok); box-shadow:0 0 28px rgba(0,255,136,.5)}

@media (max-width:560px){
  body.ms-page.pc-page{padding:14px 10px 30px}
  .pc-page .ms-body{padding:22px 16px 24px}
  .pc-sl{font-size:.58rem; letter-spacing:.03em}
  .pc-page .ms-actions .ms-btn{flex:1 1 100%}
}