.password-checker-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    z-index: 1;
    height: 0;
    opacity: 0;
    overflow: hidden;
    /* flow-root, not the overflow, is what keeps the panel's top margin inside the
       wrapper. The open state relaxes overflow to visible so the shadow is not clipped,
       and without this the margin would escape then and the panel would jump 8px. */
    display: flow-root;
    color: #3f4d5f;
    box-sizing: border-box;
    /* Height and fade run together over the same window, so the panel is legible as soon
       as it lands. The height is driven from JS, which measures the panel and hands the
       height back to the content once it is open. */
    transition: height 0.4s ease-out, opacity 0.4s ease-out;
}

.password-checker-wrapper.is-visible {
    opacity: 1;
}

/* Rolling back up is quicker than rolling down: moving between the password and confirm
   fields overlaps a close and an open, and matching both ways makes the form churn. */
.password-checker-wrapper.is-hiding {
    opacity: 0;
    transition: height 0.2s ease-in, opacity 0.4s ease-in;
}

.password-checker-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 12px 12px 10px;
    border: 1px solid #d8e0eb;
    border-radius: 12px;
    background: #f8fbff;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
    box-sizing: border-box;
}

.password-checker-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
}

/* Sized to stand as tall as the title and subtitle stacked beside it. The artwork is a
   background image so the three shields live here rather than in fetched fragments. */
.password-checker-shield-container {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23EF4444%22%20d=%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/%3E%3Cpath%20stroke=%22%23FFFFFF%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M12%202l-2%208%204%203-2%208%22/%3E%3C/svg%3E");
}

.password-checker-shield-container[data-strength="moderate"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23F97316%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/%3E%3C/svg%3E");
}

.password-checker-shield-container[data-strength="strong"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%2322C55E%22%20d=%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/%3E%3Cpath%20stroke=%22%23FFFFFF%22%20stroke-width=%222.5%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20fill=%22none%22%20d=%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E");
}

.password-checker-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.password-checker-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.password-checker-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
}

.password-checker-meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.password-checker-meter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 18px;
    width: 100%;
    margin-bottom: 3px;
}

.password-checker-meter-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4b5563;
}

.password-checker-meter-value {
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ef4444;
    text-transform: none;
}

/* The track: the full length the fill has to travel, drawn so the distance still to go is
   visible behind it. The panel is light in both themes, so one neutral serves both. */
.password-checker-thermometer-container {
    width: 100%;
    min-height: 12px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
    border: 0;
    box-sizing: border-box;
    display: block;
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Starts empty and is grown by having its width written from JS — the width is part of
   the transition, so the bar slides to its new reading rather than jumping to it. */
.thermometer-fill {
    display: block;
    width: 0;
    height: 12px;
    border-radius: 9999px;
    background-color: #EF4444;
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out, opacity 0.2s ease-in-out;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .thermometer-fill {
        transition: none;
    }
}

.password-checker-requirements {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 3px;
}

.password-checker-requirements-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
}

.password-checker-list {
    margin: 0;
    padding-left: 0;
    padding-bottom: 2px;
    font-size: 0.9rem;
    line-height: 1.5;
    list-style: none;
}

/* flex-start, not center: the symbol row carries its accepted characters and can run to
   several lines, and the marker belongs beside the first of them. */
.password-checker-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0;
    line-height: 1.5;
    color: #4b5563;
    font-family: 'FoXE', sans-serif;
}

.password-checker-item-text {
    min-width: 0;
}

.password-checker-item:last-child {
    margin-bottom: 6px;
}

.password-checker-item.is-satisfied {
    color: #0f766e;
}

/* The glyph itself comes from bootstrap-icons.min.css, which every page hosting the
   panel must link; the classes are swapped between bi-x-circle-fill and
   bi-check-circle-fill as each rule is satisfied. */
.password-checker-item-marker {
    flex-shrink: 0;
    font-size: 1rem;
    /* 1.35 of the 1rem glyph is the 1.5 line box of the 0.9rem row text, which is what
       lines the icon up with the first line of a label that wraps. */
    line-height: 1.35;
    color: #cbd5e1;
}

/* The symbol set, listed after its label. Monospaced and spaced out so the individual
   characters stay tellable apart, and secondary so the requirement still reads first. */
.password-checker-item-chars {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 0.85em;
    letter-spacing: 0.02em;
    opacity: 0.75;
    overflow-wrap: break-word;
}

.password-checker-item-chars::before {
    content: " ";
}

.password-checker-item.is-satisfied .password-checker-item-marker {
    color: #22c55e;
}

/* Only the confirmation row goes red, and only once something has been typed that
   actually differs — an untouched field stays neutral like any other unmet rule. */
.password-checker-item.is-mismatch {
    color: #b91c1c;
}

.password-checker-item.is-mismatch .password-checker-item-marker {
    color: #dc2626;
}

@media (prefers-reduced-motion: reduce) {
    .password-checker-wrapper,
    .password-checker-wrapper.is-hiding {
        transition: none;
    }
}