/*
 * Shared styling for the public Moment pages. Deliberately plain CSS with no
 * build step: these files are dropped on a static host as-is, far away from the
 * CRM, and must keep working without anyone running a bundler.
 */

:root {
    /* Light only — the pages carry the foundation's white identity, so they
       must not flip to dark just because the visitor's device is set that way.
       Declaring it here also keeps form controls and scrollbars light. */
    color-scheme: light;

    --brand: #e5338b;
    --brand-strong: #c72878;
    --brand-soft: rgba(229, 51, 139, 0.1);

    --bg: #f6f6f7;
    --surface: #ffffff;
    --text: #14141a;
    --text-muted: #61616b;
    --border: #e4e4e9;

    --danger: #c62828;
    /* Separate from --danger: the text colour has to be readable *on* the page,
       the button colour has to carry white text on top of it. */
    --danger-solid: #c62828;
    --danger-soft: rgba(198, 40, 40, 0.08);
    --success: #1b7f4f;
    --success-soft: rgba(27, 127, 79, 0.1);

    --radius: 14px;
    --shadow: 0 1px 2px rgba(20, 20, 26, 0.04), 0 12px 32px rgba(20, 20, 26, 0.07);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 40px 20px 64px;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.page {
    max-width: 640px;
    margin: 0 auto;
}

.page--wide {
    max-width: 760px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: inherit;
}

.brand__mark {
    color: var(--brand);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px;
}

@media (max-width: 520px) {
    body {
        padding: 24px 14px 48px;
    }

    .card {
        padding: 22px;
    }
}

h1 {
    margin: 0 0 12px;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

h2 {
    margin: 34px 0 10px;
    font-size: 19px;
    letter-spacing: -0.01em;
}

h3 {
    margin: 22px 0 8px;
    font-size: 16px;
}

p {
    margin: 0 0 14px;
}

ul,
ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

li {
    margin-bottom: 6px;
}

a {
    color: var(--brand);
}

.lead {
    color: var(--text-muted);
    font-size: 16px;
}

.muted {
    color: var(--text-muted);
}

.small {
    font-size: 14px;
}

.field {
    display: block;
    margin: 22px 0 6px;
    font-weight: 600;
    font-size: 15px;
}

input[type='email'] {
    width: 100%;
    padding: 13px 15px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type='email']:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
    padding: 14px 22px;
    font: inherit;
    font-weight: 600;
    color: #ffffff;
    /* The darker shade, not --brand: white on the lighter pink does not reach
       4.5:1 at this text size. */
    background: var(--brand-strong);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.btn:hover:not(:disabled) {
    background: #ab1f64;
}

.btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn--danger {
    background: var(--danger-solid);
}

.btn--danger:hover:not(:disabled) {
    background: #a71d1d;
}

.btn--ghost {
    color: var(--text);
    background: transparent;
    border-color: var(--border);
}

.btn--ghost:hover:not(:disabled) {
    background: var(--bg);
}

/* A spinner rather than a frozen button: the confirm call deletes an account,
   and a page that looks stuck invites a second click. */
.btn[aria-busy='true']::before {
    content: '';
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn[aria-busy='true']::before {
        animation-duration: 3s;
    }
}

.notice {
    margin: 20px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 10px;
    font-size: 15px;
}

.notice p:last-child {
    margin-bottom: 0;
}

.notice--info {
    background: var(--brand-soft);
    border-left-color: var(--brand);
}

.notice--warning {
    background: var(--danger-soft);
    border-left-color: var(--danger);
}

.notice--error {
    background: var(--danger-soft);
    border-left-color: var(--danger);
    color: var(--danger);
}

.notice--success {
    background: var(--success-soft);
    border-left-color: var(--success);
}

.steps {
    counter-reset: step;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.steps li {
    position: relative;
    padding-left: 38px;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 15px;
}

.steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

.divider {
    height: 1px;
    margin: 28px 0;
    background: var(--border);
    border: 0;
}

.footer {
    margin-top: 26px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.footer a {
    color: var(--text-muted);
}

.toc {
    margin: 0 0 8px;
    padding: 18px 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
}

.toc ol {
    margin: 0;
}

.placeholder {
    padding: 1px 6px;
    background: rgba(229, 51, 139, 0.14);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    /* Long instructions have to wrap — nowrap pushed them out of the card. */
    overflow-wrap: anywhere;
}

.hidden {
    display: none !important;
}