/* Mailroom: the four public pages and the signup form.

   Confirm, unsubscribe, the preference center, the one-sentence message page,
   and the form `{{ mailroom_form() }}` prints. They sit inside the site's own
   theme, so this file brings as little of its own as it can: the font and the
   text color are inherited, and every tint, border and quiet line of text is
   mixed from `currentColor`. That is what makes the same rules read on a light
   theme and a dark one, including a theme whose dark mode is a class on
   <html> rather than the `prefers-color-scheme` media query.

   The few values that are Mailroom's own are custom properties on `.mailroom`.
   The accent is the Accent Color on the Branding tab when one is set (the
   pages carry it as `--mailroom-brand-accent`), then the theme's own accent
   where the theme has one (Quark2's `--q2-accent`), then teal. To change any
   of them, set it in the theme's stylesheet:

       .mailroom { --mailroom-accent: #7c3aed; }

   Every rule is scoped to a `mailroom` class, and the outer selector is
   wrapped in :where() so a theme's own plain class selector wins on its own
   weight. With `pages.builtin_css` off in mailroom.yaml this file is not
   loaded at all. */

/* ── tokens ─────────────────────────────────────────────────────────────── */

:where(.mailroom) {
    /* The one color that fills a box behind a label, and the text on it. A
       mid-tone, so white text reads on it and it reads on either ground. */
    --mailroom-accent: var(--mailroom-brand-accent, var(--q2-accent, #1a6f83));
    --mailroom-on-accent: #ffffff;
    --mailroom-success: #2f855a;

    /* Links and glyphs: the accent pulled toward the text color, so a link is
       darker on a light theme and lighter on a dark one. */
    --mailroom-link: color-mix(in srgb, var(--mailroom-accent) 72%, currentColor);

    --mailroom-muted: color-mix(in srgb, currentColor 76%, transparent);
    --mailroom-subtle: color-mix(in srgb, currentColor 60%, transparent);
    --mailroom-border: color-mix(in srgb, currentColor 15%, transparent);
    --mailroom-border-strong: color-mix(in srgb, currentColor 30%, transparent);
    --mailroom-card: color-mix(in srgb, currentColor 3%, transparent);
    --mailroom-field: color-mix(in srgb, currentColor 4%, transparent);

    --mailroom-radius: 0.5rem;
    --mailroom-radius-lg: 0.875rem;
    --mailroom-dur: 160ms;
    --mailroom-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    color: inherit;
    font: inherit;
}
:where(.mailroom) * { box-sizing: border-box; }

/* ── the card ───────────────────────────────────────────────────────────────
   One centered card on the page. These pages are reached from an email, by
   somebody who wants one answer and a way back, so the card holds exactly
   that: a mark, a heading, a sentence and a button.

   The section is the page container and a theme may lay it out as it does
   any other section. The card is the div inside it, which no theme rule
   already owns. */

:where(.mailroom-page) {
    box-sizing: border-box;
    inline-size: 100%;
    margin-inline: auto;
    padding-block: clamp(2rem, 6vw, 4.5rem);
}
:where(.mailroom-page) .mailroom-card {
    inline-size: min(100%, 34rem);
    margin-inline: auto;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--mailroom-border);
    border-block-start: 4px solid var(--mailroom-accent);
    border-radius: var(--mailroom-radius-lg);
    background: var(--mailroom-card);
    color: inherit;
    text-align: center;
    text-wrap: balance;
}

:where(.mailroom-page) h1 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
:where(.mailroom-page) p {
    margin: 0 0 1rem;
    color: var(--mailroom-muted);
    line-height: 1.55;
}
:where(.mailroom-page) p:last-child { margin-block-end: 0; }
:where(.mailroom) a { color: var(--mailroom-link); }

/* ── the mark ───────────────────────────────────────────────────────────────
   A circle with one glyph in it, above the heading, which is what says at a
   glance whether this page is good news, a question or a dead link. Tone is
   carried by the state class on the section, so a theme can retint one state
   without touching the others. */

:where(.mailroom-page) .mailroom-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    margin-block-end: 1.1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mailroom-accent) 16%, transparent);
    color: var(--mailroom-link);
}
:where(.mailroom-page) .mailroom-mark svg {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}
:where(.mailroom--done, .mailroom--subscribed) .mailroom-mark {
    background: color-mix(in srgb, var(--mailroom-success) 22%, transparent);
    color: color-mix(in srgb, var(--mailroom-success) 72%, currentColor);
}
:where(.mailroom--expired, .mailroom--error) .mailroom-mark {
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: var(--mailroom-muted);
}

/* ── the button ─────────────────────────────────────────────────────────────
   Filled with the accent, the one color that ever fills a box behind a
   label. The "back" link wears the same look so the way out is as easy to
   find as the way in. */

:where(.mailroom) .mailroom-form {
    margin: 1.25rem 0 0;
}
:where(.mailroom) .mailroom-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--mailroom-radius);
    background: var(--mailroom-accent);
    color: var(--mailroom-on-accent);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--mailroom-dur) var(--mailroom-ease), transform var(--mailroom-dur) var(--mailroom-ease);
}
:where(.mailroom) .mailroom-button:hover { filter: brightness(1.08); }
:where(.mailroom) .mailroom-button:active { transform: translateY(1px); }
:where(.mailroom) .mailroom-button:focus-visible {
    outline: 2px solid var(--mailroom-link);
    outline-offset: 3px;
}
:where(.mailroom) .mailroom-button:disabled {
    cursor: default;
    opacity: 0.6;
}

/* The quieter line under a button: "manage what you get instead", the way
   back to the site. A link, not a second button, so the one action stays the
   one. */
:where(.mailroom-page) .mailroom-alternative,
:where(.mailroom-page) .mailroom-back {
    margin-block-start: 1rem;
    font-size: 0.95em;
}
:where(.mailroom-page) .mailroom-note {
    font-size: 0.9em;
    color: var(--mailroom-subtle);
}

/* ── fields ─────────────────────────────────────────────────────────────────
   Shared by the preference center and the signup form: a label over its
   input, both in the theme's font, the input a faint tint of the text color
   so it reads as a field on either ground. */

:where(.mailroom) .mailroom-field {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 1rem;
    color: inherit;
}
:where(.mailroom) .mailroom-field label {
    color: inherit;
    font-weight: 600;
}
:where(.mailroom) input[type="text"],
:where(.mailroom) input[type="email"],
:where(.mailroom) select {
    inline-size: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--mailroom-border-strong);
    border-radius: var(--mailroom-radius);
    background: var(--mailroom-field);
    color: inherit;
    font: inherit;
    line-height: 1.3;
}
:where(.mailroom) input[type="text"]:focus-visible,
:where(.mailroom) input[type="email"]:focus-visible,
:where(.mailroom) select:focus-visible {
    outline: 2px solid var(--mailroom-link);
    outline-offset: 1px;
    border-color: transparent;
}
:where(.mailroom) input::placeholder { color: var(--mailroom-subtle); opacity: 1; }
/* A tick box is square. A theme that draws its own boxes can round them into
   something that reads as a radio button (Pico, under Quark2, gives every
   input its 0.5rem radius, which on a box this small is nearly a circle), so
   the form's boxes keep their corners small and fill with the accent: both the
   native box (accent-color) and a theme's drawn one (Pico's variables). */
:where(.mailroom) input[type="checkbox"] {
    accent-color: var(--mailroom-accent);
    border-radius: 0.25em;
    --pico-primary-background: var(--mailroom-accent);
    --pico-primary-border: var(--mailroom-accent);
}

/* ── the preference center ──────────────────────────────────────────────────
   The one page with a real form. Wider, left-aligned inside, and the lists
   drawn as rows somebody can tick. */

:where(.mailroom--preferences) .mailroom-card {
    inline-size: min(100%, 40rem);
    text-align: start;
}
:where(.mailroom--preferences) h1 { text-align: start; }
:where(.mailroom--preferences) .mailroom-saved {
    padding: 0.7rem 0.9rem;
    border-radius: var(--mailroom-radius);
    background: color-mix(in srgb, var(--mailroom-success) 16%, transparent);
    color: color-mix(in srgb, var(--mailroom-success) 60%, currentColor);
}
:where(.mailroom--preferences) .mailroom-address {
    display: flex;
    color: inherit;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    align-items: baseline;
}
:where(.mailroom--preferences) .mailroom-address-label { color: var(--mailroom-subtle); }
:where(.mailroom--preferences) .mailroom-lists {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}
:where(.mailroom--preferences) .mailroom-lists legend {
    margin-block-end: 0.5rem;
    padding: 0;
    font-weight: 600;
}
:where(.mailroom--preferences) .mailroom-list {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--mailroom-border);
    border-radius: var(--mailroom-radius);
    background: var(--mailroom-card);
}
:where(.mailroom--preferences) .mailroom-list + .mailroom-list { margin-block-start: 0.5rem; }
:where(.mailroom--preferences) .mailroom-list label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.7rem;
    align-items: start;
    font-weight: 600;
    cursor: pointer;
}
:where(.mailroom--preferences) .mailroom-list input { margin: 0.3em 0 0; }
:where(.mailroom--preferences) .mailroom-list p {
    margin: 0.2rem 0 0;
    padding-inline-start: calc(1em + 0.7rem);
    font-size: 0.92em;
    font-weight: 400;
    color: var(--mailroom-muted);
}
:where(.mailroom--preferences) .mailroom-list--pending { border-style: dashed; }
:where(.mailroom--preferences) .mailroom-form { margin-block-start: 0.5rem; }

/* ── the signup form ────────────────────────────────────────────────────────
   Printed wherever a theme or a page calls `{{ mailroom_form() }}`: a footer,
   a sidebar, the end of a post. No card of its own, because it lives inside
   somebody else's layout and a box inside a box is rarely what they want. */

:where(.mailroom-signup) {
    display: block;
    inline-size: 100%;
    max-inline-size: 32rem;
    margin: 0;
    text-align: start;
}
:where(.mailroom-signup) .mailroom-signup-heading {
    margin: 0 0 0.4rem;
    font-size: 1.25em;
    line-height: 1.25;
}
:where(.mailroom-signup) .mailroom-signup-intro {
    margin: 0 0 1rem;
    color: var(--mailroom-muted);
    line-height: 1.5;
}
:where(.mailroom-signup) .mailroom-field { margin-block-end: 0.75rem; }
:where(.mailroom-signup) .mailroom-lists {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}
:where(.mailroom-signup) .mailroom-lists legend {
    margin: 0 0 0.4rem;
    padding: 0;
    font-weight: 600;
    font-size: 0.92em;
}
:where(.mailroom-signup) .mailroom-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: start;
    margin-block-end: 0.35rem;
    line-height: 1.45;
    cursor: pointer;
}
:where(.mailroom-signup) .mailroom-list input { margin: 0.2em 0 0; }
:where(.mailroom-signup) .mailroom-consent {
    margin: 0 0 1rem;
    font-size: 0.92em;
    color: var(--mailroom-muted);
    line-height: 1.45;
}
:where(.mailroom-signup) .mailroom-consent label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: start;
    cursor: pointer;
}
:where(.mailroom-signup) .mailroom-consent input { margin: 0.2em 0 0; }
:where(.mailroom-signup) .mailroom-signup-message {
    margin: 0.75rem 0 0;
    color: var(--mailroom-muted);
    line-height: 1.45;
}
:where(.mailroom-signup) .mailroom-signup-message:empty { display: none; }
/* After a signup the script moves the focus here so a screen reader reads
   it out. It is a sentence, not a control, so it draws no focus ring. */
:where(.mailroom-signup) .mailroom-signup-message:focus { outline: none; }

/* The honeypot carries the same rules inline, so a theme that drops this file
   still keeps it off screen. Here as well for a copy of the partial that
   loses the inline style. */
:where(.mailroom) .mailroom-honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}

/* ── confirming in place ────────────────────────────────────────────────────
   On the confirmation page the script posts the answer and swaps the card's
   contents for the result, so the button is never meant to be seen. The
   card's text is held back for a moment so it does not flash before the swap;
   with no script, or a script that could not get an answer, it appears after
   that moment with the button, exactly as before. The mark stays visible
   throughout so the card is never empty. */

:where(.mailroom--auto) .mailroom-card > :not(.mailroom-mark) {
    animation: mailroom-hold 0s 1.4s both;
}
:where(.mailroom--swapped) .mailroom-card > :not(.mailroom-mark) {
    animation: mailroom-rise var(--mailroom-dur, 160ms) var(--mailroom-ease, ease) both;
}
:where(.mailroom--swapped) .mailroom-mark {
    animation: mailroom-pop 260ms var(--mailroom-ease, ease) both;
}
@keyframes mailroom-hold {
    from { visibility: hidden; opacity: 0; }
    to { visibility: visible; opacity: 1; }
}
@keyframes mailroom-rise {
    from { opacity: 0; transform: translateY(0.35rem); }
    to { opacity: 1; transform: none; }
}
@keyframes mailroom-pop {
    from { transform: scale(0.85); }
    60% { transform: scale(1.06); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.mailroom) .mailroom-button { transition: none; }
    :where(.mailroom--swapped) .mailroom-card > :not(.mailroom-mark),
    :where(.mailroom--swapped) .mailroom-mark { animation: none; }
}