/**
 * password-generator.css — layout and controls for /password-generator.php.
 *
 * Same rule as repair-assistant.css: this file CONSUMES the site design
 * language rather than restating it. Colour, type, spacing, radius and
 * elevation all come from the main.css :root tokens — there is no colour
 * literal here and no parallel palette. Buttons stay .btn / .btn-accent,
 * notices stay .alert / .alert-error, hidden-but-announced text stays
 * .visually-hidden.
 *
 * What is below is only what the site has no primitive for: the two-column
 * hero, the tool card, the segmented mode switch, the output row, the strength
 * meter, the option grid and the FAQ disclosure. Every selector is namespaced
 * under .pw-* or #pw-tool, so nothing here restyles the rest of the site.
 *
 * ACCESSIBILITY: strength is carried by the bar's WIDTH and by the text verdict
 * beside it — colour is never the only signal. The segmented switch is built
 * from real radio inputs, so it is keyboard and screen-reader operable; the
 * inputs are visually hidden, not display:none, and :focus-visible draws the
 * site's standard ring on the label.
 */

/* ---------------------------------------------------------------- Layout */

.pw-top { padding-top: var(--space-6); }

.pw-split {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 62rem) {
    .pw-split { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
}

/* ----------------------------------------------------------------- Pitch */

.pw-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: var(--space-4);
}
.pw-pill .icon { width: 16px; height: 16px; color: var(--color-accent-600); }

.pw-title { margin: 0 0 var(--space-4); line-height: 1.05; }
.pw-title-accent { color: var(--color-accent-600); }

.pw-lead {
    color: var(--color-muted);
    font-size: 1.0625rem;
    max-width: 34rem;
    margin: 0 0 var(--space-5);
}

.pw-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.pw-benefits li {
    display: grid;
    grid-template-columns: 22px 1fr;   /* the icon column must never hold text */
    gap: var(--space-3);
    align-items: start;
    color: var(--color-text);
}
.pw-benefits .icon { width: 20px; height: 20px; color: var(--color-accent-600); margin-top: 3px; }

/* ------------------------------------------------------------------ Card */

.pw-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
}
@media (min-width: 40rem) { .pw-card { padding: var(--space-6); } }

/* ------------------------------------------------------- Segmented modes */

.pw-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    padding: var(--space-1);
    margin: 0 0 var(--space-5);
}
.pw-mode { position: relative; margin: 0; }
.pw-mode input {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; margin: 0; pointer-events: none;
}
.pw-mode span {
    display: block;
    text-align: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-pill);
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.pw-mode input:checked + span {
    background: var(--color-primary);
    color: var(--color-surface);
}
.pw-mode input:focus-visible + span { box-shadow: var(--ring); }

/* ---------------------------------------------------------------- Output */

.pw-outrow {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    align-items: stretch;
}

.pw-out {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 1.0625rem;
    letter-spacing: .02em;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    overflow-x: auto;
}
.pw-out:focus-visible { outline: none; box-shadow: var(--ring); }

.pw-refresh {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary);
    cursor: pointer;
    transition: background-color .18s ease;
}
.pw-refresh:hover { background: var(--color-bg); }
.pw-refresh:focus-visible { outline: none; box-shadow: var(--ring); }
.pw-refresh .icon { width: 20px; height: 20px; }

/* -------------------------------------------------------------- Strength */

.pw-strength {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-4) 0 var(--space-2);
}
.pw-meter {
    display: block;
    height: 6px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.pw-meter-bar {
    display: block; height: 100%; width: 0;
    border-radius: var(--radius-pill);
    background: var(--color-muted);
    transition: width .25s ease, background-color .25s ease;
}
.pw-meter-bar.is-ok,
.pw-meter-bar.is-strong,
.pw-meter-bar.is-vstrong { background: var(--color-accent-600); }

.pw-verdict { font-size: .9375rem; white-space: nowrap; color: var(--color-muted); }

.pw-explain {
    color: var(--color-muted);
    font-size: .875rem;
    line-height: 1.5;
    margin: 0 0 var(--space-5);
}
.pw-explain span + span::before { content: ' '; }

.pw-copy { width: 100%; justify-content: center; }
.pw-copy .icon { width: 18px; height: 18px; }

.pw-note {
    min-height: 1.25rem;
    margin: var(--space-2) 0 0;
    font-size: .875rem;
    color: var(--color-accent-600);
    text-align: center;
}

/* --------------------------------------------------------------- Options */

.pw-options {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.pw-optrow {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-4); margin: 0 0 var(--space-2);
}
.pw-optrow label { font-weight: 600; }
.pw-value { font-weight: 700; font-variant-numeric: tabular-nums; }

.pw-range { width: 100%; margin: 0 0 var(--space-5); accent-color: var(--color-primary); }
.pw-range:focus-visible { outline: none; box-shadow: var(--ring); }

.pw-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    margin-bottom: var(--space-5);
}
.pw-select:focus-visible { outline: none; box-shadow: var(--ring); }

.pw-checks { display: grid; grid-template-columns: 1fr; gap: var(--space-3) var(--space-5); }
@media (min-width: 30rem) { .pw-checks { grid-template-columns: 1fr 1fr; } }

.pw-check { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.pw-check input { margin-top: .2em; flex: 0 0 auto; accent-color: var(--color-primary); }
.pw-check span { font-size: .9375rem; }
.pw-check em {
    font-style: normal;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    color: var(--color-muted);
    margin-left: .25em;
}

.pw-footnote {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    margin: var(--space-5) 0 0;
    font-size: .8125rem;
    color: var(--color-muted);
    text-align: center;
}
.pw-footnote .icon { width: 15px; height: 15px; color: var(--color-accent-600); }

/* A disabled tool (no crypto source) must LOOK disabled, not merely be inert. */
#pw-tool[data-disabled="true"] .pw-modes,
#pw-tool[data-disabled="true"] .pw-options,
#pw-tool[data-disabled="true"] .pw-strength,
#pw-tool[data-disabled="true"] .pw-outrow { opacity: .5; }

/* ------------------------------------------------------------------- FAQ */

.pw-faq { max-width: 52rem; }
.pw-faq-item {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
}
.pw-faq-item summary {
    cursor: pointer; font-weight: 600; list-style: none;
    display: flex; justify-content: space-between; gap: var(--space-4);
}
.pw-faq-item summary::-webkit-details-marker { display: none; }
.pw-faq-item summary::after { content: '+'; color: var(--color-accent-600); font-weight: 700; }
.pw-faq-item[open] summary::after { content: '\2212'; }
.pw-faq-item summary:focus-visible { outline: none; box-shadow: var(--ring); }
.pw-faq-item p { color: var(--color-muted); margin: var(--space-3) 0 0; max-width: 46rem; }

/* ------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .pw-meter-bar, .pw-mode span, .pw-refresh { transition: none; }
}

@media (forced-colors: active) {
    .pw-meter { border: 1px solid CanvasText; }
    .pw-meter-bar { background: Highlight; }
    .pw-mode input:checked + span { border: 2px solid Highlight; }
}