/* Shared form finish. Accent colors continue to follow the account theme. */
body[data-theme='light'] {
    --bg: #f3f6f5;
    --surface: #fff;
    --surface-soft: #f5f8f7;
    --surface-strong: #eaf0ed;
    --text: #20322d;
    --muted: #64756e;
    --border: #dce6e1;
}

button,
.btn-link,
.sidebar-link {
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease,
        box-shadow 160ms ease, transform 160ms ease;
}

input:not([type='checkbox']):not([type='radio']):not([type='range']),
select,
textarea {
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

input[type='checkbox'],
input[type='radio'],
input[type='range'] {
    accent-color: var(--accent);
}

main .form-shell,
main .followup-campaign-form > .card.form-stack {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--text) 2%, transparent);
    animation: form-reveal 220ms ease-out backwards;
}

main .form-shell .form-required-note {
    background: transparent;
    border-radius: 0;
    padding: 0;
    color: var(--muted);
    font-size: 0.81rem;
}

main .form-shell:not(.account-options-form) .form-section {
    min-inline-size: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-soft) 28%, var(--surface));
    padding: 1.1rem;
    gap: 0.85rem;
    transition: border-color 160ms ease;
}

main .form-shell .form-section:focus-within {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

main .form-shell:not(.account-options-form) .form-section legend {
    padding: 0 0.45rem;
    color: var(--accent-link);
    font-size: 1.02rem;
    font-weight: 700;
}

main .form-shell .section-help {
    color: var(--muted);
    font-size: 0.85rem;
}

main .form-shell label,
main .followup-campaign-form label {
    font-size: 0.88rem;
}

main :is(.form-shell, .followup-campaign-form) :is(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea) {
    border-radius: 9px;
    background-color: var(--surface);
    scroll-margin-block: 5rem 7rem;
}

main :is(.form-shell, .followup-campaign-form) :is(input, textarea)::placeholder {
    color: var(--muted);
    font-weight: 400;
}

main :is(.form-shell, .followup-campaign-form) :is(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea):focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
    background-color: var(--surface);
}

/* A nearly monochrome gradient keeps text legible with custom accent colors. */
main :is(.form-shell, .followup-campaign-form > form) > .form-actions > button[type='submit']:not(.secondary):not(.danger),
main .form-savebar > button[type='submit'] {
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--accent-strong)));
    color: var(--accent-contrast);
    border: 1px solid color-mix(in srgb, var(--accent) 84%, var(--text));
    border-radius: 10px;
    padding: 0.75rem 1.15rem;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-contrast) 12%, transparent),
        0 3px 7px color-mix(in srgb, var(--accent) 12%, transparent);
}

main :is(.form-shell, .followup-campaign-form > form) > .form-actions > button[type='submit']:not(.secondary):not(.danger):not(:disabled):hover,
main .form-savebar > button[type='submit']:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-contrast) 14%, transparent),
        0 5px 11px color-mix(in srgb, var(--accent) 18%, transparent);
}

main :is(.form-shell, .followup-campaign-form > form) > .form-actions > button[type='submit']:not(.secondary):not(.danger):active,
main .form-savebar > button[type='submit']:active {
    transform: translateY(0);
}

main :is(.form-shell, .followup-campaign-form) :is(button.secondary, .btn-link.subtle) {
    background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
    border: 1px solid var(--border);
    color: var(--text);
}

main :is(.form-shell, .followup-campaign-form) :is(button.secondary, .btn-link.subtle):hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.followup-campaign-form .followup-step-row {
    background: color-mix(in srgb, var(--surface-soft) 28%, var(--surface));
    border-radius: 11px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.followup-campaign-form .followup-step-row:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.followup-campaign-form .followup-step-row:focus-within {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 6%, transparent);
}

.followup-campaign-form .followup-step-row:has(select[data-step-field='outcome'] option[value='achieved']:checked) {
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.paperwork-form-page .paperwork-live-summary .info-tile,
.paperwork-form-page .paperwork-form-totals {
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
    border-radius: 11px;
    padding: 0.75rem;
}

.paperwork-lines-scroll {
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.paperwork-lines-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

main .form-shell details.form-section:not([open]) {
    background: color-mix(in srgb, var(--surface-soft) 65%, var(--surface));
}

main .form-shell details.form-section summary {
    color: var(--accent-link);
}

main .form-shell details[open] > :not(summary) {
    animation: form-reveal 160ms ease-out backwards;
}

.followup-campaign-help {
    padding: 0.75rem 1rem;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.followup-campaign-help summary {
    color: var(--accent-link);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.followup-campaign-help[open] > div {
    margin-top: 0.75rem;
    animation: form-reveal 160ms ease-out backwards;
}

main .form-savebar {
    position: sticky;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 12;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
    border-radius: 13px;
    background: var(--surface);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--text) 8%, transparent);
}

.form-savebar-caption {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.form-savebar-caption strong {
    font-size: 0.9rem;
    color: var(--accent-link);
}

.form-savebar-caption span {
    color: var(--muted);
    font-size: 0.76rem;
}

main .form-savebar > button {
    width: auto;
    max-width: 100%;
    flex-shrink: 0;
}

body:has(main .form-savebar) .postit-floating-button {
    bottom: calc(var(--form-floating-bottom, 6.5rem) + env(safe-area-inset-bottom));
}

body:has(main .form-savebar) .pwa-install-button {
    bottom: calc(var(--form-floating-bottom, 6.5rem) + 3.7rem + env(safe-area-inset-bottom));
}

@keyframes form-reveal {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1100px) {
    main .form-shell:has(> .form-savebar) .form-grid.compact {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    main .form-savebar {
        gap: 0.5rem;
        padding: 0.65rem;
    }

    .form-savebar-caption span {
        display: none;
    }

    .form-savebar-caption strong {
        font-size: 0.8rem;
    }

    main .form-savebar > button[type='submit'] {
        padding: 0.7rem 0.8rem;
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    button, .btn-link, .sidebar-link, input, input::after, select, textarea,
    main .form-shell, main .form-shell .form-section,
    main .form-shell details[open] > :not(summary),
    main .followup-campaign-form > .card.form-stack,
    .followup-campaign-help[open] > div,
    .followup-campaign-form .followup-step-row {
        animation: none !important;
        transition: none !important;
    }
}