/* ========================================
   SHARED_PARTNER_WITH_US - partner page and form
   rem only (fleet rule: no px). Mobile-first from 22.5rem (360 CSS pixels).
   Theming (DOCS NEW_WEBSITE_BUILD/SHARED_THEMING_CONTRACT.md sections 3, 5, 6): every rule reads a
   private --partner-* token, and each token is defined once per theme as
   var(--site-<token>, <this library's own literal>). A host that publishes the site theme tokens
   (its site-theme.css, and the hub's /auth/api/branding/theme.css linked last by the page) restyles
   the page; a host that publishes none gets exactly the literals below. Light and dark follow
   html[data-theme] or html.light / html.dark, which /SHARED_DASHBOARD/js/theme-hydrate.js stamps.
   The two success tokens keep plain literals: the contract has a success fill but no matching ink,
   so mapping either one alone could put unreadable text on a site's fill.
======================================== */
:root {
    --partner-font-body: var(--site-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --partner-radius: var(--site-radius, 0.5rem);
    --partner-radius-lg: var(--site-radius-lg, 0.75rem);
}

:root,
[data-theme="light"],
html.light {
    --partner-bg: var(--site-bg, #ffffff);
    --partner-surface: var(--site-surface, #f6f7f9);
    --partner-text: var(--site-text, #1b1f24);
    --partner-muted: var(--site-text-muted, #57606a);
    --partner-border: var(--site-border, #c9d1d9);
    --partner-accent: var(--site-accent-fill, #0b5cad);
    --partner-accent-text: var(--site-on-accent, #ffffff);
    --partner-accent-ink: var(--site-accent-ink, #0b5cad);
    --partner-focus: var(--site-focus, #0b5cad);
    --partner-success-bg: #e8f5ec;
    --partner-success-text: #14532d;
    --partner-error-bg: var(--status-danger, #fdecea);
    --partner-error-text: var(--status-danger-ink, #8a1c12);
}

[data-theme="dark"],
html.dark {
    --partner-bg: var(--site-bg, #0f1419);
    --partner-surface: var(--site-surface, #1a2129);
    --partner-text: var(--site-text, #e6edf3);
    --partner-muted: var(--site-text-muted, #9da7b3);
    --partner-border: var(--site-border, #3a4450);
    --partner-accent: var(--site-accent-fill, #5aa9f5);
    --partner-accent-text: var(--site-on-accent, #0b1520);
    --partner-accent-ink: var(--site-accent-ink, #5aa9f5);
    --partner-focus: var(--site-focus, #8cc4ff);
    --partner-success-bg: #12301f;
    --partner-success-text: #b6f0c8;
    --partner-error-bg: var(--status-danger, #3a1714);
    --partner-error-text: var(--status-danger-ink, #ffc9c2);
}

.partner-page {
    background: var(--partner-bg);
    color: var(--partner-text);
    font-family: var(--partner-font-body);
    line-height: 1.5;
    margin: 0;
}

.partner-main {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 46rem;
    padding: 1.5rem 1rem 3rem;
    width: 100%;
}

.partner-main h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.partner-lead {
    color: var(--partner-muted);
    margin: 0 0 1.5rem;
}

.partner-form {
    display: grid;
    gap: 1rem;
}

.partner-field,
.partner-choices {
    display: grid;
    gap: 0.375rem;
}

.partner-choices {
    border: 0.0625rem solid var(--partner-border);
    border-radius: var(--partner-radius);
    margin: 0;
    padding: 0.75rem 1rem 1rem;
}

.partner-choices legend {
    font-weight: 600;
    padding: 0 0.25rem;
}

.partner-form label,
.partner-field > label {
    font-weight: 600;
}

.partner-form input[type="text"],
.partner-form input[type="email"],
.partner-form input[type="tel"],
.partner-form input[type="url"],
.partner-form select,
.partner-form textarea {
    background: var(--partner-bg);
    border: 0.0625rem solid var(--partner-border);
    border-radius: var(--partner-radius);
    box-sizing: border-box;
    color: var(--partner-text);
    font: inherit;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
}

.partner-form textarea {
    min-height: 9rem;
    resize: vertical;
}

.partner-form :focus-visible {
    outline: 0.1875rem solid var(--partner-focus);
    outline-offset: 0.125rem;
}

.partner-check,
.partner-consent {
    align-items: flex-start;
    display: flex;
    gap: 0.625rem;
    min-height: 2.75rem;
}

.partner-check label,
.partner-consent label {
    font-weight: 400;
}

.partner-check input,
.partner-consent input {
    flex: 0 0 auto;
    height: 1.25rem;
    margin: 0.125rem 0 0;
    width: 1.25rem;
}

.partner-hint,
.partner-privacy {
    color: var(--partner-muted);
    font-size: 0.875rem;
    margin: 0;
}

.partner-extra[hidden],
.partner-redirect[hidden],
.partner-result[hidden],
.partner-closed[hidden] {
    display: none;
}

.partner-extra {
    background: var(--partner-surface);
    border-radius: var(--partner-radius-lg);
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.partner-redirect,
.partner-closed {
    background: var(--partner-surface);
    border-left: 0.25rem solid var(--partner-accent);
    border-radius: var(--partner-radius);
    padding: 0.75rem 1rem;
}

.partner-redirect p,
.partner-closed p {
    margin: 0;
}

/* The honeypot: off-screen for people, present for bots. */
.partner-hp {
    height: 0.0625rem;
    left: -100rem;
    overflow: hidden;
    position: absolute;
    width: 0.0625rem;
}

.partner-submit {
    background: var(--partner-accent);
    border: 0;
    border-radius: var(--partner-radius);
    color: var(--partner-accent-text);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    min-height: 2.75rem;
    padding: 0.625rem 1.5rem;
    width: 100%;
}

.partner-submit:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.partner-result {
    border-radius: var(--partner-radius);
    margin-top: 1rem;
    padding: 0.75rem 1rem;
}

.partner-result p {
    margin: 0.25rem 0;
}

.partner-result.is-success {
    background: var(--partner-success-bg);
    color: var(--partner-success-text);
}

.partner-result.is-error {
    background: var(--partner-error-bg);
    color: var(--partner-error-text);
}

.partner-result-title {
    font-weight: 700;
}

.partner-form a,
.partner-result a,
.partner-redirect a {
    color: var(--partner-accent-ink);
}

/* Links inside the error box sit on the danger fill, where the text-safe accent
   can drop to ~1.1:1. They take the box's own ink instead. */
.partner-result.is-error a {
    color: var(--partner-error-text);
}

@media (min-width: 40rem) {
    .partner-main {
        padding: 2.5rem 1.5rem 4rem;
    }

    .partner-main h1 {
        font-size: 2.25rem;
    }

    .partner-row {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
    }

    .partner-submit {
        justify-self: start;
        width: auto;
    }
}

@media (max-width: 39.99rem) {
    .partner-row {
        display: grid;
        gap: 1rem;
    }
}