.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;
}

.password-checker-thermometer-container {
    width: 100%;
    min-height: 12px;
    border-radius: 999px;
    background: transparent;
    overflow: hidden;
    border: 0;
    box-sizing: border-box;
    display: block;
    margin-top: 2px;
    margin-bottom: 2px;
}

.thermometer-fill {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 9999px;
    transition: background-color 0.3s ease-in-out, opacity 0.2s ease-in-out;
    opacity: 1;
}

.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;
    }
}