/* Password generator. Shared site styles are in /css/style.css. */

/* Passwords need every character to be unambiguous and evenly spaced. */
:root { --mono: var(--code); }
.output, .hint, .length-control output { font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }

.warning {
    background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border);
    padding: 14px 16px; border-radius: var(--radius); margin-bottom: 20px;
}

.length-control {
    display: flex; align-items: center; gap: 16px; padding: 18px 24px;
    border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.length-control label { font-weight: 600; }
.length-control output {
    min-width: 3ch; text-align: right; font-family: var(--mono); font-weight: 700; font-size: 1.1rem;
}
input[type=range] { flex: 1; accent-color: var(--accent); height: 24px; cursor: pointer; }

.generator { padding: 24px; }
.generator + .generator { border-top: 1px solid var(--border); }

.gen-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gen-head h2 { margin: 0; font-size: 1.1rem; }
.hint { margin: 2px 0 0; color: var(--muted); font-size: 0.85rem; font-family: var(--mono); }

.strength { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted); }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 18px; height: 6px; border-radius: 3px; background: var(--border); transition: background .2s; }
.meter[data-level="1"] i:nth-child(-n+1) { background: #e03131; }
.meter[data-level="2"] i:nth-child(-n+2) { background: #f59f00; }
.meter[data-level="3"] i:nth-child(-n+3) { background: var(--ok); }
.meter[data-level="4"] i:nth-child(-n+4) { background: var(--ok); }

.output {
    font-family: var(--mono); font-size: 1.05rem; line-height: 1.7;
    word-break: break-all; padding: 16px 18px; min-height: 3.5em;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
    user-select: all; cursor: text;
}
.output.fresh { animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0.25; } to { opacity: 1; } }

.actions { display: flex; gap: 10px; margin-top: 14px; }
.btn { gap: 8px; line-height: inherit; }
.btn svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
    .generator, .length-control { padding-left: 16px; padding-right: 16px; }
    .actions .btn { flex: 1; justify-content: center; }
    .output { font-size: 0.95rem; }
}