/* Slate Forms — public + embed surface.
 *
 * Designed to be host-agnostic: in standalone mode (/forms/<slug>)
 * the page paints a light canvas with a centered card; in embed
 * mode (?embed=1) we drop the canvas + footer so the form sits
 * cleanly inside an iframe on a third-party site.
 *
 * Form controls themselves inherit from Slate's design system
 * (ui_components.php — .field / .field-label / .btn etc.) which
 * is loaded by the router before this stylesheet. This file just
 * adds the page chrome.
 */

body.forms-public {
    margin: 0;
    padding: 0;
    background: var(--bg, #F5F4F1);
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: var(--text, #111217);
}

body.forms-public-embed {
    background: transparent;
    min-height: 0;
}

.forms-public-shell {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px;
}

body.forms-public-embed .forms-public-shell {
    padding: 0;
}

.forms-public-card {
    width: 100%;
    max-width: 560px;
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    border-radius: var(--radius-lg, 12px);
    padding: 32px 28px 28px;
    box-shadow: 0 1px 2px rgba(15,17,23,0.04);
}

body.forms-public-embed .forms-public-card {
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    box-shadow: none;
    border-radius: 0;
    padding: 24px 20px 20px;
    max-width: 100%;
}

.forms-public-header {
    margin-bottom: 22px;
}
.forms-public-header h1 {
    font-family: var(--font-display, "Syne", -apple-system, sans-serif);
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.forms-public-desc {
    color: var(--muted, #6B7280);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* The form fields all use design-system classes — we just tighten
 * spacing slightly for the public surface. */
.forms-public-card .field { margin-bottom: 16px; }
.forms-public-card .field:last-of-type { margin-bottom: 22px; }

/* Success state */
.forms-public-success {
    text-align: center;
    padding-top: 44px;
}
.forms-public-success h1 { margin-top: 16px; }
.forms-public-success p { color: var(--muted, #6B7280); }
.forms-public-success-icon {
    width: 56px; height: 56px;
    margin: 0 auto;
    border-radius: 999px;
    background: var(--success-soft, #ECFDF5);
    color: var(--success, #16A34A);
    display: grid;
    place-items: center;
}
.forms-public-success-icon svg { width: 28px; height: 28px; }

.forms-public-footer {
    text-align: center;
    padding: 24px 16px 32px;
}

/* Embedded — Iframes default to white background colour blend. */
@media (max-width: 480px) {
    .forms-public-shell { padding: 20px 12px; }
    .forms-public-card { padding: 24px 18px 18px; border-radius: 12px; }
    .forms-public-header h1 { font-size: 20px; }
}
