/* Free frontend base styles. Pro-markup selectors (multi-step, drafts,
   modal, Pro fields) live in app/Pro/Assets/frontend-pro.css (Phase 8). */
.formatrica{font-family:inherit;color:var(--fmt-text,inherit);margin:clamp(1rem,1.5vw,1.75rem) 0;}
.formatrica__form{display:grid;gap:var(--fmt-spacing,1rem);background-color:transparent;}
.formatrica__group{display:flex;flex-direction:column;gap:.45rem;}
.formatrica__label{font-weight:400;color:inherit;}	
.formatrica__required{color:var(--fmt-accent-text,var(--fmt-accent,currentColor));margin-left:.35em;}
.formatrica__input,.formatrica__textarea,.formatrica__select{border:1px solid var(--fmt-border,#dcdcde);border-radius:var(--fmt-radius,8px);background:var(--fmt-field-surface,#fff);padding:.75rem .9rem;font:inherit;transition:border-color .2s ease,box-shadow .2s ease;}
.formatrica__textarea{min-height:140px;resize:vertical;}
.formatrica__input[type=color]{width:3.5rem;height:2.75rem;padding:.25rem;cursor:pointer;}
.formatrica__input:focus,.formatrica__textarea:focus,.formatrica__select:focus{outline:none;border-color:var(--fmt-accent,currentColor);box-shadow:0 0 0 3px var(--fmt-focus-ring,rgba(34,113,177,.18));}
.formatrica__group--checkbox label{display:flex;align-items:center;gap:.65rem;font-weight:500;}
.formatrica__group--checkbox input[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--fmt-accent,currentColor);}
.formatrica__group--radio{gap:.35rem;}
.formatrica__choices{display:grid;gap:.35rem;}
.formatrica__choice{display:flex;align-items:center;gap:.5rem;font-weight:500;}
.formatrica__choices input[type=radio]{width:1.1rem;height:1.1rem;accent-color:var(--fmt-accent,currentColor);}
.formatrica__fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.35rem;}
.formatrica__submit{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.6rem;border-radius:var(--fmt-button-radius,999px);border:1px solid;background:var(--fmt-accent,#2271b1);color:var(--fmt-button-text,#fff);font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;}
.formatrica__submit:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.1);}
.formatrica__submit:disabled,.formatrica--submitting .formatrica__submit{opacity:.6;cursor:progress;transform:none;}
.formatrica__spinner{display:none;width:1rem;height:1rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fmt-spin .6s linear infinite;}
.formatrica--submitting .formatrica__spinner{display:inline-block;}
@keyframes fmt-spin{to{transform:rotate(360deg);}}
.formatrica__notice{padding:1rem;font-size:.95rem;border-radius:var(--fmt-radius,8px);border:1px solid;margin:0 0 1rem 0;}
.formatrica__notice--success{background:#e6f7ed;border-color:#16a34a;color:#15803d;background:color-mix(in srgb,var(--fmt-success,#16a34a) 10%,transparent);border-color:var(--fmt-success,#16a34a);color:color-mix(in srgb,var(--fmt-success,#16a34a) 95%,#000);}
.formatrica__notice--error{background:#fde8e8;border-color:#d63638;color:#d63638;background:color-mix(in srgb,var(--fmt-error,#d63638) 10%,transparent);border-color:var(--fmt-error,#d63638);color:var(--fmt-error,#d63638);}
.formatrica__notice--warning{background:#fef3e2;border-color:#d97706;color:#b45309;background:color-mix(in srgb,var(--fmt-warning,#d97706) 12%,transparent);border-color:var(--fmt-warning,#d97706);color:color-mix(in srgb,var(--fmt-warning,#d97706) 90%,#000);}
.formatrica__error{color:var(--fmt-error,#d63638);font-size:.85rem;min-height:1em;margin-top: 0; margin-bottom: 0;}
.formatrica__group--error .formatrica__input,.formatrica__group--error .formatrica__textarea,.formatrica__group--error .formatrica__select{border-color:var(--fmt-error,#d63638);box-shadow:0 0 0 2px color-mix(in srgb,var(--fmt-error,#d63638) 20%,transparent);}
.formatrica__group--error.formatrica__group--checkbox input[type=checkbox]{outline:2px solid var(--fmt-error,#d63638);outline-offset:2px;accent-color:var(--fmt-error,#d63638);}
.formatrica__group--error.formatrica__group--checkbox label{color:var(--fmt-error,#d63638);}
.formatrica__group--error.formatrica__group--radio input[type=radio]{outline:2px solid var(--fmt-error,#d63638);outline-offset:2px;}
.formatrica__group--error.formatrica__group--radio .formatrica__choice{color:var(--fmt-error,#d63638);}
.formatrica__group--static{color:inherit;}
.formatrica__fmt_hp{position:absolute;left:-9999px;opacity:0;}
@media (max-width:600px){.formatrica__submit{width:100%;justify-content:center;}}
/* Column layout (layout.two_column). 6-col base: full=6, half=3, third=2. Single mode is untouched. Stacks on mobile. */
.formatrica__form[data-fmt-layout=two_column],.formatrica__form[data-fmt-layout=three_column]{grid-template-columns:repeat(6,1fr);}
/* EVERY child spans the full row by default — the messages div, honeypot, noscript etc. are grid items too; letting them auto-place eats a track and shifts every half/third field (visible as a wrapped third column). */.formatrica__form[data-fmt-layout=two_column]>*,.formatrica__form[data-fmt-layout=three_column]>*{grid-column:1/-1;}
/* Frontend width contract (6-track): two_column collapses BOTH half and third to 1/2 (span 3); three_column: half = 2/3 (span 4), third = 1/3 (span 2). Tablet collapses three-column widths to halves; mobile stacks. */
.formatrica__form[data-fmt-layout=two_column]>.formatrica__group--half,.formatrica__form[data-fmt-layout=two_column]>.formatrica__group--third{grid-column:span 3;}
.formatrica__form[data-fmt-layout=three_column]>.formatrica__group--half{grid-column:span 4;}
.formatrica__form[data-fmt-layout=three_column]>.formatrica__group--third{grid-column:span 2;}
@media (min-width:641px) and (max-width:991.98px){.formatrica__form[data-fmt-layout=three_column]>.formatrica__group--half,.formatrica__form[data-fmt-layout=three_column]>.formatrica__group--third{grid-column:span 3;}}
@media (max-width:640px){.formatrica__form[data-fmt-layout]>.formatrica__group{grid-column:1/-1 !important;}}
/* Appearance: dark mode. Explicit for mode=dark; system-driven for mode=auto. Brand colour (inline --fmt-accent) still wins for state cues. */
.formatrica__form[data-fmt-mode=dark]{--fmt-field-surface:#1f2126;--fmt-text:#e6e7eb;--fmt-border:#3a3d45;--fmt-focus-ring:rgba(255,255,255,.16);color:var(--fmt-text);}
.formatrica__form[data-fmt-mode=dark] .formatrica__input,.formatrica__form[data-fmt-mode=dark] .formatrica__textarea,.formatrica__form[data-fmt-mode=dark] .formatrica__select{color:var(--fmt-text);}
@media (prefers-color-scheme:dark){.formatrica__form[data-fmt-mode=auto]{--fmt-field-surface:#1f2126;--fmt-text:#e6e7eb;--fmt-border:#3a3d45;--fmt-focus-ring:rgba(255,255,255,.16);color:var(--fmt-text);}.formatrica__form[data-fmt-mode=auto] .formatrica__input,.formatrica__form[data-fmt-mode=auto] .formatrica__textarea,.formatrica__form[data-fmt-mode=auto] .formatrica__select{color:var(--fmt-text);}}
