/* Password guidance widget (includes/password_guide.php). Works inside both
   auth.css pages and app.css pages — only uses variables both define. */

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 62px !important; }
.pw-toggle {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    background: none; border: 0; padding: 6px 8px; cursor: pointer;
    font-size: 12px; font-weight: 700; color: var(--brand, #0035C1);
    border-radius: 8px; line-height: 1;
}
.pw-toggle:hover { background: var(--brand-bg, #d6e2ff); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand, #0035C1); outline-offset: 1px; }

.pw-guide {
    margin: 8px 0 12px; padding: 10px 12px;
    background: #f5f7fd; border: 1px solid #e6e9f5; border-radius: 12px;
    font-size: 12.5px; color: #4a5068;
}
.pw-guide-title { font-weight: 700; margin-bottom: 6px; color: var(--text, #1a1a2e); }
.pw-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pw-rules li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35; }
.pw-dot {
    flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
    border: 2px solid #c3c9da; background: #fff; position: relative; transition: all .15s ease;
}
.pw-rules li.is-ok { color: var(--success, #12894f); }
.pw-rules li.is-ok .pw-dot { background: var(--success, #12894f); border-color: var(--success, #12894f); }
.pw-rules li.is-ok .pw-dot::after {
    content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pw-rules li.is-bad { color: var(--error, #d92d20); }
.pw-rules li.is-bad .pw-dot { border-color: var(--error, #d92d20); }

.pw-guide[hidden], .pw-live[hidden] { display: none; }
.pw-live { margin: 6px 0 12px; }
.pw-live-text { margin-top: 5px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.pw-meter { height: 6px; background: #e3e6f0; border-radius: 999px; overflow: hidden; }
.pw-meter span { display: block; height: 100%; width: 0; background: #d92d20; border-radius: 999px; transition: width .2s ease, background-color .2s ease; }
.pw-meter-label { margin-top: 4px; font-size: 12px; font-weight: 600; min-height: 16px; }
.pw-tips { margin-top: 6px; font-size: 11.5px; color: #6b7280; line-height: 1.4; }

.pw-match { font-size: 12px; font-weight: 600; margin-top: 4px; min-height: 16px; }
.pw-match.is-ok { color: var(--success, #12894f); }
.pw-match.is-bad { color: var(--error, #d92d20); }

@media (max-width: 860px) {
    .pw-guide { padding: 9px 11px; font-size: 12px; }
    .pw-toggle { padding: 8px 10px; }
}