/*
 * Password requirements help — RealDealRide
 *
 * Styles the `(?)` and the panel it opens (auth/partials/password-policy.blade.php).
 *
 * Loaded by two pages built on different themes: the signup wizard, which defines
 * the --rdr-* tokens in signup-wizard.css, and password reset, which is a Skote
 * layout and defines none of them. Every token therefore carries a fallback, so the
 * panel looks native on the wizard and merely neutral on reset.
 */

/* ── The trigger ───────────────────────────────────────────────────────────── */

/*
 * The panel's positioning context: it hangs off the (?) itself, so the two read as
 * one control rather than a tooltip that appears somewhere else on the form.
 */
.pw-policy {
    position: relative;
    display: inline-block;
    margin-left: .25rem;
    vertical-align: middle;
}

.pw-policy-help {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
    color: var(--rdr-muted, #6b7280);
    transition: color .15s;
}

.pw-policy-help:hover,
.pw-policy-help[aria-expanded="true"] {
    color: var(--rdr-primary, #0d6efd);
}

/* ── The panel ─────────────────────────────────────────────────────────────── */

/*
 * Sits to the right of the (?), on the label line, sized to its content.
 *
 * To the side rather than below because the field is directly underneath: a panel
 * opening downward covers the very input it is describing. The label line is the one
 * direction with nothing in it.
 *
 * Width is max-content with a ceiling, so the box hugs the longest rule ("One
 * uppercase letter (A–Z)") instead of stretching across the form.
 *
 * ⚠ It has to stay inside .signup-card, which sets overflow:hidden
 * (signup-wizard.css) and clips anything past its edge — the same constraint that
 * produced the .js-native-select opt-out for the state dropdown. The (?) sits about
 * 95px in and the card is 640px, so a ~260px panel beside it clears the edge
 * comfortably. Narrow screens are handled by the media query at the foot of this
 * file, where there is no room to the side.
 */
.pw-policy-pop {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
    width: max-content;
    max-width: 260px;
    padding: .75rem .9rem;
    background: var(--rdr-white, #fff);
    border: 1px solid var(--rdr-border, #e2e8f0);
    border-radius: var(--rdr-radius, 12px);
    box-shadow: var(--rdr-shadow, 0 4px 24px rgba(0, 0, 0, .07));
}

/*
 * The caret pointing back at the (?), drawn as two triangles — the border colour
 * behind, the background one pixel over it — so the panel's 1px border appears to
 * continue around the point.
 */
.pw-policy-pop::before,
.pw-policy-pop::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
}

.pw-policy-pop::before {
    right: 100%;
    border-right-color: var(--rdr-border, #e2e8f0);
}

.pw-policy-pop::after {
    right: calc(100% - 1px);
    border-right-color: var(--rdr-white, #fff);
}

/* `hidden` is how the JS closes it; Bootstrap's display rules would otherwise win. */
.pw-policy-pop[hidden] {
    display: none;
}

.pw-policy-title {
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .5rem;
    color: var(--rdr-dark, #111827);
}

.pw-policy-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pw-policy-rule {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    line-height: 1.6;
    color: var(--rdr-muted, #6b7280);
    transition: color .15s;
}

.pw-policy-mark {
    font-size: .95rem;
    flex-shrink: 0;
}

/* Satisfied. */
.pw-policy-rule.ok {
    color: var(--rdr-success, #198754);
}

/*
 * Typed, but this rule is not met yet. Held at the resting colour on purpose —
 * a checklist that turns red while someone is still halfway through typing reads
 * as a series of mistakes rather than a list of things still to do. Red is left
 * to the field's own invalid state, which only appears once they try to continue.
 */
.pw-policy-rule.pending {
    color: var(--rdr-muted, #6b7280);
}

/*
 * No room beside the label on a phone — 260px to the right of the (?) would run
 * straight off the card and be clipped. Drop below it instead, still hugging the
 * (?) horizontally rather than spanning the form, and turn the caret upward.
 *
 * This does cover the input while open, which is the trade the side placement above
 * exists to avoid. Acceptable here only because the panel is opened deliberately
 * from the (?) and dismissed with a tap anywhere else.
 */
@media (max-width: 575.98px) {
    .pw-policy-pop {
        top: calc(100% + 10px);
        left: 0;
        transform: none;
        max-width: min(260px, 70vw);
        padding: .7rem .8rem;
    }

    .pw-policy-pop::before,
    .pw-policy-pop::after {
        top: auto;
        transform: none;
        left: 4px;
        right: auto;
        border-right-color: transparent;
    }

    .pw-policy-pop::before {
        bottom: 100%;
        border-bottom-color: var(--rdr-border, #e2e8f0);
    }

    .pw-policy-pop::after {
        bottom: calc(100% - 1px);
        border-bottom-color: var(--rdr-white, #fff);
    }
}