/*
 * Password strength meter.
 *
 * Deliberately its own stylesheet rather than a block in admin.css or
 * landing.css: the two consoles that need it do not share either one. The tenant
 * admin console loads admin.css and never loads landing.css; the control-plane
 * console loads theme.css + landing.css and never loads admin.css. A widget that
 * both shells need has to live in a file both shells load.
 *
 * The two shells also name their colours differently - the admin console uses an
 * --adm-* namespace, the public side uses bare names -- so every neutral here
 * falls back from one to the other. The four band colours are fixed instead of
 * themed: red/amber/green for a strength meter is a convention, and a "weak"
 * band should not quietly become the tenant's brand colour.
 */

.pw-meter {
    margin-top: 7px;
    max-width: 340px;
    font-size: 12px;
}

/* The track is always visible so the meter does not make the form jump when it
   first appears. Four segments, because four is the number of points the score
   can reach. */
.pw-meter__track {
    display: flex;
    gap: 4px;
    height: 5px;
    margin-bottom: 6px;
}

.pw-meter__seg {
    flex: 1;
    border-radius: 3px;
    background: var(--border, var(--adm-border, #dbe4f0));
    transition: background-color .18s ease;
}

.pw-meter__head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted, var(--adm-muted, #64748b));
    font-weight: 600;
}

.pw-meter__badge {
    font-weight: 800;
}

/* Band colours. */
.pw-meter[data-level="weak"]   .pw-meter__seg.is-on { background: #ef4444; }
.pw-meter[data-level="fair"]   .pw-meter__seg.is-on { background: #f59e0b; }
.pw-meter[data-level="good"]   .pw-meter__seg.is-on { background: #22c55e; }
.pw-meter[data-level="strong"] .pw-meter__seg.is-on { background: #10b981; }

.pw-meter[data-level="weak"]   .pw-meter__badge { color: #ef4444; }
.pw-meter[data-level="fair"]   .pw-meter__badge { color: #f59e0b; }
.pw-meter[data-level="good"]   .pw-meter__badge { color: #16a34a; }
.pw-meter[data-level="strong"] .pw-meter__badge { color: #059669; }

.pw-meter__problem {
    margin-top: 4px;
    color: #ef4444;
    font-weight: 600;
}

.pw-meter__ok {
    margin-top: 4px;
    color: #16a34a;
    font-weight: 700;
}

/*
 * The rule checklist. Hidden while the field is empty: an untouched field should
 * not open with four red crosses, which reads as "this form is broken" rather
 * than "here is what will be asked of you".
 */
.pw-meter__rules {
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;
}
.pw-meter__rules li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--muted, var(--adm-muted, #64748b));
}

.pw-meter__rules li::before {
    flex: none;
    width: 13px;
    font-weight: 900;
    text-align: center;
    line-height: 1.45;
}

.pw-meter__rules li[data-ok="1"] { color: #16a34a; }
.pw-meter__rules li[data-ok="1"]::before { content: "\2713"; }
.pw-meter__rules li[data-ok="0"]::before { content: "\2715"; color: #ef4444; }

/*
 * Nothing to say about an empty field, so say nothing. This matters most on the
 * "optional" forms - adding a teammate, adding an operator - where a blank field
 * is a deliberate choice rather than an unfinished one: the server generates a
 * password and shows it once. The static hint beside the field already says so.
 */
.pw-meter[data-level="empty"] { display: none; }