/**
 * Newsletter tool pages — the newsletters page, confirm, manage,
 * unsubscribe, about, and the web version of an issue.
 *
 * THE FILENAME CARRIES THE DESIGN VERSION. Cloudflare on this site ignores
 * ?ver=, so a changed stylesheet ships as newsletter-v3.css with the
 * constant in AIPR_NL_Front updated; editing this file in place would leave
 * the edge serving the old one.
 *
 * Built on site-ui's tokens (loaded on every page as the `aipr-ui`
 * stylesheet) with the same values as fallbacks, and on its grammar: nine
 * sizes (12 14 15 17 18 20 24 32 44), one label style, a 2px ink rule to
 * open a block and 1px lines between items, no boxes. Purple is for
 * interaction only. Inputs are 17px so iOS does not zoom on focus.
 *
 * Everything is scoped under .aipr-nl and every element has a class; the
 * site's base layer styles bare elements.
 */

.aipr-nl {
    --nl-ink: var(--aipr-ui-ink, #0e0e12);
    --nl-body: var(--aipr-ui-body, #212127);
    --nl-mute: var(--aipr-ui-mute, #62626e);
    --nl-faint: var(--aipr-ui-faint, #70707c);
    --nl-line: var(--aipr-ui-line, #e7e7ee);
    --nl-accent: var(--aipr-ui-accent, #6c5ce7);
    --nl-paper: var(--aipr-ui-paper, #ffffff);
    --nl-sans: var(--aipr-ui-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-family: var(--nl-sans);
    color: var(--nl-body);
    font-size: 17px;
    line-height: 1.6;
    padding: 0 var(--aipr-ui-pad, 32px);
}

.aipr-nl-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 0 72px;
}
.aipr-nl-narrow { max-width: 620px; }

.aipr-nl-closed {
    max-width: 760px;
    margin: 24px auto 0;
    padding: 10px 14px;
    background: #fff3c4;
    color: #5c4300;
    font-size: 14px;
    line-height: 1.5;
}

.aipr-nl-label {
    display: block;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nl-mute);
}

.aipr-nl .aipr-nl-h1 {
    margin: 0 0 16px;
    font-family: var(--nl-sans);
    font-size: 44px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--nl-ink);
}
.aipr-nl .aipr-nl-h2 {
    margin: 36px 0 8px;
    padding-top: 12px;
    border-top: 2px solid var(--nl-ink);
    font-family: var(--nl-sans);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--nl-ink);
}

.aipr-nl-lede {
    margin: 0 0 32px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--nl-body);
}

.aipr-nl p { margin: 0 0 16px; }
.aipr-nl a { color: var(--nl-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.aipr-nl a:hover { color: var(--nl-accent); }
.aipr-nl-mute { color: var(--nl-mute); font-size: 15px; }

/* .aipr-nl p (0,1,1) would win over a bare class and take the top margin
   to 0, putting this line flush under the button above it (fixed in 0.1.2). */
.aipr-nl .aipr-nl-small {
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--nl-mute);
}
.aipr-nl .aipr-nl-small a { color: var(--nl-mute); }

/* ── The form ─────────────────────────────────────────────── */

.aipr-nl-form { margin: 0; }

.aipr-nl .aipr-nl-input {
    display: block;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    margin: 0 0 32px;
    padding: 12px 14px;
    font-family: var(--nl-sans);
    font-size: 17px;
    line-height: 1.3;
    color: var(--nl-ink);
    background: var(--nl-paper);
    border: 1px solid #b9b8c4;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}
.aipr-nl .aipr-nl-input:focus { outline: 2px solid var(--nl-accent); outline-offset: 1px; border-color: var(--nl-ink); }

.aipr-nl-confirmline { font-size: 18px; margin: 0 0 24px; color: var(--nl-ink); }

.aipr-nl-lists {
    margin: 0 0 28px;
    padding: 0;
    border: 0;
    border-top: 2px solid var(--nl-ink);
}
.aipr-nl-lists > .aipr-nl-label { float: left; width: 100%; padding-top: 12px; }

.aipr-nl-card {
    clear: both;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 4px 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--nl-line);
}
.aipr-nl .aipr-nl-check {
    width: 20px;
    height: 20px;
    margin: 3px 0 0;
    accent-color: var(--nl-ink);
    cursor: pointer;
}
/* The card text sits inside a <label>, and site-ui's base layer sets
   :where(label) { font-weight: 700; font-size: 12px } — zero specificity,
   but everything inside inherits it. Without an explicit weight here the
   descriptions rendered bold (0.1.0). Body text is regular weight. */
.aipr-nl-card-body { cursor: pointer; display: block; font-weight: 400; font-size: 15px; }
.aipr-nl-card-name {
    display: block;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--nl-ink);
}
.aipr-nl-card-cadence {
    display: block;
    margin: 2px 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nl-mute);
}
.aipr-nl-card-dek { display: block; font-size: 15px; line-height: 1.55; font-weight: 400; color: var(--nl-body); }
.aipr-nl-card-latest { grid-column: 2; font-size: 14px; }

.aipr-nl-hp {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Turnstile, interaction-only (newsletter-v2.js renders it). The widget's
   own box is 0px tall until Cloudflare wants a click, so the container
   takes no room by default; .is-shown gives it room while a click is
   needed, and .is-done folds it away once the check has passed (otherwise
   a "Success!" strip stays on the page). Never display:none while it may
   need a click: the box could not appear. */
.aipr-nl-ts { margin: 0; }
.aipr-nl-ts.is-shown { margin: 0 0 16px; }
.aipr-nl-ts.is-done { height: 0; overflow: hidden; margin: 0; }

.aipr-nl .aipr-nl-btn {
    display: inline-block;
    padding: 13px 22px;
    font-family: var(--nl-sans);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--nl-paper);
    background: var(--nl-ink);
    border: 1px solid var(--nl-ink);
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
}
.aipr-nl .aipr-nl-btn:hover { opacity: .85; color: var(--nl-paper); }
.aipr-nl .aipr-nl-btn:focus-visible { outline: 2px solid var(--nl-accent); outline-offset: 2px; }
.aipr-nl .aipr-nl-btn[disabled] { opacity: .5; cursor: default; }
.aipr-nl .aipr-nl-btn--ghost { background: none; color: var(--nl-ink); }
.aipr-nl .aipr-nl-btn--ghost:hover { background: var(--nl-ink); color: var(--nl-paper); opacity: 1; }

.aipr-nl .aipr-nl-status { min-height: 1.6em; margin: 16px 0 0; font-size: 15px; color: var(--nl-ink); }
.aipr-nl-status.is-error { color: #a4161a; }
.aipr-nl-status.is-ok { font-size: 18px; font-weight: 600; }

.aipr-nl-notice {
    padding: 12px 0;
    border-top: 2px solid var(--nl-ink);
    border-bottom: 1px solid var(--nl-line);
    font-size: 15px;
    color: var(--nl-ink);
}

/* ── Lists on confirm / about ─────────────────────────────── */

.aipr-nl-list { margin: 0 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--nl-line); }
.aipr-nl-list li { padding: 12px 0; border-bottom: 1px solid var(--nl-line); font-size: 17px; }

.aipr-nl-add {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--nl-line);
}
.aipr-nl-all { margin: 32px 0 0; }
.aipr-nl-address { font-style: normal; margin: 0 0 16px; font-size: 17px; line-height: 1.6; }

/* ── Web version of an issue ──────────────────────────────── */

.aipr-nl-issue-body { margin: 8px 0 32px; }
.aipr-nl-issue-body table { max-width: 100%; }
.aipr-nl-cta { margin: 32px 0 0; padding: 16px 0 0; border-top: 2px solid var(--nl-ink); }

@media (max-width: 640px) {
    .aipr-nl { padding: 0 var(--aipr-ui-pad, 20px); }
    .aipr-nl-wrap { padding: 32px 0 56px; }
    .aipr-nl .aipr-nl-h1 { font-size: 32px; }
    .aipr-nl-lede { font-size: 18px; }
    .aipr-nl-add { grid-template-columns: 1fr; }
}