/**
 * Password Generator.
 */

/* ── The password itself ───────────────────────────────────────────────── */

.em-pw__output {
    display: flex;
    flex-wrap: wrap;
    gap: .8em;
    align-items: center;
    padding: 1em 1.1em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
    background: var(--em-surface, #fff);
}

.em-pw__value {
    flex: 1 1 16em;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.3rem;
    line-height: 1.5;
    /* A password is read character by character, so it must wrap rather
       than scroll, and never be cut off. */
    overflow-wrap: anywhere;
    color: var(--em-ink, inherit);
    user-select: all;
}

.em-pw__output-actions {
    display: flex;
    gap: .5em;
    margin-left: auto;
}

/* ── Strength ──────────────────────────────────────────────────────────── */

.em-pw__strength { margin-top: .9em; }

.em-pw__meter {
    height: 7px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .2);
    overflow: hidden;
}

.em-pw__meter span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--em-brand, #2563eb);
    transition: width .2s ease, background-color .2s ease;
}

.em-pw__meter span.is-weak { background: #dc2626; }
.em-pw__meter span.is-fair { background: #f59e0b; }
.em-pw__meter span.is-good { background: #16a34a; }
.em-pw__meter span.is-best { background: #0ea5e9; }

.em-pw__verdict {
    margin: .5em 0 0;
    font-size: .92rem;
    color: var(--em-soft, #6b7280);
}

.em-pw__verdict.is-weak { color: #dc2626; font-weight: 600; }
.em-pw__verdict.is-bad  { color: #dc2626; font-weight: 600; }

/* ── Tabs and panels ───────────────────────────────────────────────────── */

.em-pw__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    margin: 1.4em 0 1em;
    border-bottom: 1px solid var(--em-line, #e5e7eb);
}

.em-pw__tab {
    padding: .6em 1.1em;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--em-soft, #6b7280);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.em-pw__tab.is-active {
    border-bottom-color: var(--em-brand, #2563eb);
    color: var(--em-brand, #2563eb);
}

.em-pw__panel {
    padding: 1em 1.1em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
    background: var(--em-surface, #fff);
}

.em-pw__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .5em;
    font-weight: 600;
    color: var(--em-ink, inherit);
}

.em-pw__num {
    font-variant-numeric: tabular-nums;
    color: var(--em-brand, #2563eb);
}

.em-pw__panel input[type="range"] {
    width: 100%;
    accent-color: var(--em-brand, #2563eb);
}

.em-pw__checks {
    display: flex;
    flex-wrap: wrap;
    gap: .6em 1.2em;
    margin-top: 1em;
}

.em-pw__check {
    display: flex;
    align-items: center;
    gap: .45em;
    color: var(--em-ink, inherit);
}

.em-pw__check input { accent-color: var(--em-brand, #2563eb); }

/* The character sets are shown as the characters themselves. */
.em-pw__checks .em-pw__check span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.em-pw__check--wide {
    margin-top: .8em;
    font-size: .92rem;
}

.em-pw__check--wide span { font-family: inherit; color: var(--em-soft, #6b7280); }

.em-pw__field {
    display: flex;
    align-items: center;
    gap: .6em;
    margin-top: 1em;
    color: var(--em-ink, inherit);
}

.em-pw__select,
.em-pw__number {
    padding: .45em .65em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 8px;
    background: var(--em-surface, #fff);
    color: var(--em-ink, inherit);
    font: inherit;
}

.em-pw__number { width: 6em; }

/* ── Several at once ───────────────────────────────────────────────────── */

.em-pw__bulk {
    margin-top: 1.2em;
    padding: .8em 1em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
    background: var(--em-surface, #fff);
}

.em-pw__bulk summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--em-ink, inherit);
}

.em-pw__bulk-body {
    display: flex;
    flex-wrap: wrap;
    gap: .8em;
    align-items: center;
    margin-top: .9em;
}

.em-pw__list {
    flex: 1 1 100%;
    padding: .8em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 10px;
    background: var(--em-surface, #fff);
    color: var(--em-ink, inherit);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88rem;
    line-height: 1.6;
    resize: vertical;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.em-pw__copy,
.em-pw__again {
    padding: .55em 1.1em;
    border: 1px solid var(--em-brand, #2563eb);
    border-radius: 8px;
    background: var(--em-brand, #2563eb);
    color: var(--em-on-brand, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.em-pw__again { background: transparent; color: var(--em-brand, #2563eb); }

.em-pw__promise { margin-top: 1.2em; }

@media (prefers-reduced-motion: reduce) {
    .em-pw__meter span { transition: none; }
}

@media (max-width: 480px) {
    .em-pw__output-actions { margin-left: 0; width: 100%; }
    .em-pw__value { font-size: 1.15rem; }
}