/* Public Forms page frame. The form itself is themed by style.css and
   css/form-fill.css, the same as the staff fill screen. */
.public-form-page { margin: 0; min-height: 100vh; }
.public-form-frame { max-width: 820px; margin: 0 auto; padding: 0.75rem 0.5rem; box-sizing: border-box; }
.public-form-logo { display: block; height: 44px; width: auto; margin: 0 auto 0.6rem; }
.public-form-card { border-radius: 12px; overflow: hidden; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28); }
/* The card clips its corners; bands with their own radius would leave its surface showing behind them. */
.public-form-card .modal-header, .public-form-card .modal-footer { border-radius: 0; }
.public-form-card > .modal-header { justify-content: center; text-align: center; }
.public-form-card > .modal-header h2 { margin: 0; width: 100%; font-size: 1.25rem; text-align: center; }
.public-form-card .form-fill-container { border-radius: 0; }
.public-form-message { padding: 1.25rem 1rem; text-align: center; color: var(--text-primary); background: var(--card-bg); }
.public-form-message p { margin: 0; }
.public-form-check { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 0.75rem; border-radius: 50%; background: var(--success, #4caf50); color: #ffffff; }
.public-form-check svg { width: 32px; height: 32px; }
.public-form-confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1000; }
.public-form-confetti-piece { position: absolute; top: -10px; width: 10px; height: 10px; animation: publicFormConfettiFall 3s ease-out forwards; }
@keyframes publicFormConfettiFall { from { transform: translateY(0) rotate(0deg); opacity: 1; } to { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
.public-form-error { margin: 0.5rem 0.75rem 0; }
.public-form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.public-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; }
.public-form-page [hidden] { display: none !important; }
.public-form-missing > .fillable-input, .public-form-missing input, .public-form-missing .custom-dropdown-display { outline: 2px solid var(--error, #f44336); }
@media (max-width: 600px) { .public-form-frame { padding: 0.25rem; } }
.public-form-card .form-rich-content li, .public-form-card .form-paragraph li { display: list-item; }
.public-form-card .form-rich-content li > *, .public-form-card .form-paragraph li > * { display: inline; }
/* Header, footer and buttons are the app's modal styles. In dark mode the bands take the
   panel chrome rule from CONVENTIONS: accent mixed into the card, never the page black. */
:root[data-mode="dark"] .public-form-card > .modal-header,
:root[data-mode="dark"] .public-form-card .modal-footer { background: color-mix(in srgb, var(--accent-primary) 45%, var(--card-bg)); }
:root[data-mode="dark"] .public-form-card > .modal-header h2,
:root[data-mode="dark"] .public-form-card .public-form-foot > span { color: var(--text-primary); }
/* Wasteland's accent is too bright for the mix: its dark band stays deep. */
:root[data-theme="wasteland"][data-mode="dark"] .public-form-card > .modal-header,
:root[data-theme="wasteland"][data-mode="dark"] .public-form-card .modal-footer { background: color-mix(in srgb, var(--accent-primary) 18%, var(--card-bg)); }
:root[data-mode="light"] .public-form-card .public-form-foot > span { color: var(--text-on-accent); }
:root[data-mode="light"] .public-form-card .public-form-foot .btn-primary { color: var(--text-primary); }
/* 16px stops iPhones zooming the page when a field takes focus. */
@media (max-width: 768px) {
    .public-form-card input:not([type="checkbox"]):not([type="radio"]), .public-form-card select, .public-form-card textarea, .public-form-card .custom-dropdown-display { font-size: 16px !important; }
}
.public-form-card input:focus, .public-form-card select:focus, .public-form-card textarea:focus,
.public-form-card .custom-dropdown-display:focus { outline: 2px solid var(--accent-primary) !important; outline-offset: 1px; }
/* Default light: the brand green behind the card, with the white logo. */
:root[data-theme="default"][data-mode="light"] body.public-form-page { background: var(--accent-orange); }