/* LXV Pairing Tool — download popup (2026-10-01). Paired with lxv-pairing-modal.js.
   Everything is scoped to .lxvpm and position:fixed, so nothing on the page moves. */
.lxvpm {
    --pm-deep: var(--sc-deep, #2c1810);
    --pm-gold: var(--sc-gold, #c4a265);
    --pm-cream: var(--sc-cream, #f7f2ea);
    --pm-paper: #fffdf9;
    --pm-line: rgba(44, 24, 16, .18);
    --pm-muted: #6b5a4e;
    --pm-serif: var(--sc-display, 'Cormorant Garamond', Georgia, serif);
    --pm-sans: var(--sc-sans, 'DM Sans', 'Helvetica Neue', Arial, sans-serif);
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--pm-sans);
    color: var(--pm-deep);
}
.lxvpm[hidden] { display: none !important; }
.lxvpm *, .lxvpm *::before, .lxvpm *::after { box-sizing: border-box; }
html.lxvpm-open, html.lxvpm-open body { overflow: hidden; }

.lxvpm__backdrop { position: absolute; inset: 0; background: rgba(28, 16, 10, .55); }
.lxvpm__box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: var(--pm-paper);
    border-top: 3px solid var(--pm-gold);
    padding: 28px 28px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.lxvpm__x {
    position: absolute; top: 8px; right: 10px;
    width: 40px; height: 40px;
    border: 0 !important; background: transparent !important; color: var(--pm-deep) !important;
    font-size: 28px; line-height: 1; cursor: pointer; padding: 0;
}
.lxvpm__eyebrow {
    margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pm-gold);
}
html body .lxvpm .lxvpm__title {
    margin: 0 0 10px; font-family: var(--pm-serif); font-weight: 400; font-size: 30px; line-height: 1.1;
    text-transform: none !important; letter-spacing: 0; color: var(--pm-deep);
}
.lxvpm__lead { margin: 0 0 16px; font-size: 15px; line-height: 1.6; }
html body .lxvpm .lxvpm__h {
    margin: 18px 0 8px; font-family: var(--pm-sans); font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--pm-deep);
}
.lxvpm ul, .lxvpm ol { margin: 0 0 8px 20px; padding: 0; }
.lxvpm li { margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; }
.lxvpm__examples li { font-style: italic; }
.lxvpm__note { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--pm-muted); }

.lxvpm__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--pm-line); margin-bottom: 12px; }
.lxvpm__tab {
    flex: 0 0 auto; padding: 8px 16px; margin-bottom: -1px;
    border: 1px solid transparent !important; border-bottom: 0 !important;
    background: transparent !important; color: var(--pm-muted) !important;
    font-family: var(--pm-sans); font-size: 13px; font-weight: 600; cursor: pointer;
}
.lxvpm__tab[aria-selected="true"] {
    border-color: var(--pm-line) !important; background: var(--pm-paper) !important; color: var(--pm-deep) !important;
}

.lxvpm__form { margin: 4px 0 4px; padding-bottom: 18px; border-bottom: 1px solid var(--pm-line); }
.lxvpm__label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.lxvpm__row { display: flex; gap: 8px; }
.lxvpm__input {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 12px;
    border: 1px solid var(--pm-line); border-radius: 0; background: #fff; color: var(--pm-deep);
    font-family: var(--pm-sans); font-size: 16px;
}
.lxvpm__input:focus { outline: none; border-color: var(--pm-gold); }
.lxvpm__submit {
    flex: 0 0 auto; min-height: 44px; padding: 0 20px;
    border: 1px solid var(--pm-deep) !important; border-radius: 0;
    background: var(--pm-deep) !important; color: var(--pm-paper) !important;
    font-family: var(--pm-sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer;
}
.lxvpm__submit[disabled] { opacity: .6; cursor: default; }
.lxvpm button:focus-visible, .lxvpm a:focus-visible { outline: 2px solid var(--pm-gold); outline-offset: 2px; }
.lxvpm__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lxvpm__fine { margin: 8px 0 0; font-size: 12px; color: var(--pm-muted); }
.lxvpm__status { margin: 6px 0 0; min-height: 1.2em; font-size: 13px; color: #8a2b1f; }

.lxvpm__done { margin: 4px 0 4px; padding: 16px; background: var(--pm-cream); }
.lxvpm__done-title { margin: 0 0 6px; font-family: var(--pm-serif); font-size: 20px; }
.lxvpm__again { color: var(--pm-deep) !important; text-decoration: underline; font-size: 14px; }

@media (max-width: 520px) {
    .lxvpm { padding: 0; align-items: stretch; }
    .lxvpm__box { max-width: none; max-height: none; height: 100%; padding: 24px 16px 20px; }
    .lxvpm__row { flex-direction: column; }
    .lxvpm__submit { width: 100%; }
}