/* Leak check on /check (docs/plans/1027_1828_vpn-access.md, L6). Loaded only on that page, and not purged: the result
   boxes are built by app/public/js/leak-check.js after render. Every colour is a --lp-* theme token, so light and dark
   both hold. A result's tint only supports the sentence in the box, which carries the meaning. */

.lp-leak-check__section {
    margin-top: 2rem;
}

.lp-leak-check__facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .375rem 1.25rem;
    margin: 0 0 .75rem;
}

.lp-leak-check__facts dt {
    font-weight: 600;
    color: var(--lp-text-muted);
}

.lp-leak-check__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Addresses are data, not code samples: neutral ink in the theme's mono, so they keep full contrast. */
.lp-leak-check code {
    color: inherit;
    font-size: .9375em;
    font-variant-numeric: tabular-nums;
}

.lp-leak-check__result {
    margin: .5rem 0;
}

.lp-leak-check__result:empty {
    display: none;
}

.lp-leak-check__result[data-tone] {
    padding: .75rem 1rem;
    border: 1px solid var(--lp-border);
    border-radius: .5rem;
    background: var(--lp-bg-subtle);
}

.lp-leak-check__result[data-tone="ok"] {
    background: var(--lp-alert-success-bg);
    border-color: var(--lp-alert-success-bd);
    color: var(--lp-alert-success-ink);
}

.lp-leak-check__result[data-tone="warn"] {
    background: var(--lp-alert-warning-bg);
    border-color: var(--lp-alert-warning-bd);
    color: var(--lp-alert-warning-ink);
}

.lp-leak-check__result[data-tone="info"] {
    background: var(--lp-alert-info-bg);
    border-color: var(--lp-alert-info-bd);
    color: var(--lp-alert-info-ink);
}

.lp-leak-check__result[data-tone="pending"] {
    color: var(--lp-text-muted);
}

.lp-leak-check__status {
    margin: 0;
    font-weight: 600;
}

.lp-leak-check__list {
    margin: .5rem 0 0;
    padding-left: 1.25rem;
}

.lp-leak-check__list li {
    overflow-wrap: anywhere;
}

.lp-leak-check__list li + li {
    margin-top: .25rem;
}

.lp-leak-check__actions {
    margin: 2rem 0 .75rem;
}