/* Optional CSS using existing Shekari semantic tokens. Public rendering has no JS dependency. */
.sh-field{display:grid;gap:.4rem;margin-block:1rem}
.sh-field label{font-size:.95rem;font-weight:650;color:var(--text,#101625)}
.sh-field input:not([type=checkbox]):not([type=radio]),.sh-field textarea,.sh-field select{inline-size:100%;max-inline-size:100%;box-sizing:border-box;border:1px solid var(--border,#d9dce4);background:var(--surface,#fff);color:var(--text,#101625);border-radius:12px;padding:.75rem 1rem;font:inherit}
.sh-field textarea{min-block-size:7rem;resize:vertical}
.sh-field :is(input,textarea,select):focus-visible{outline:2px solid var(--accent,#4054b2);outline-offset:2px}
.sh-field small{color:var(--text-muted,#677184)}
.sh-admin-forms table{border-collapse:collapse;inline-size:100%}
.sh-admin-forms th,.sh-admin-forms td{padding:.85rem;border-block-end:1px solid var(--border,#d9dce4);text-align:start}
@media(max-width:640px){.sh-admin-forms{overflow-x:auto}}

/* Form Builder: intentionally uses the CMS native typography / theme colors. */
.sh-admin-fields{display:grid;gap:10px}
.sh-admin-field{border:1px solid var(--border);background:var(--bg);border-radius:14px;overflow:hidden}
.sh-admin-field>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;padding:15px 18px;color:var(--text)}
.sh-admin-field>summary::-webkit-details-marker{display:none}
.sh-admin-field>summary span{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.sh-admin-field>summary small,.sh-admin-field code{color:var(--muted)}
.sh-admin-field[open]>summary{border-bottom:1px solid var(--border);color:var(--accent)}
.sh-admin-field>form{padding:18px}
.sh-admin-field>form>.actions{margin-top:16px}
.sh-submission-values{display:grid;gap:0;margin:0}
.sh-submission-values>div{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:18px;padding:14px;border-bottom:1px solid var(--border)}
.sh-submission-values>div:last-child{border:0}
.sh-submission-values dt{font-weight:800;color:var(--muted)}
.sh-submission-values dd{margin:0;overflow-wrap:anywhere;line-height:1.9}
/* Public, accessible and light SSR forms. */
.sh-form-container{max-width:780px;margin-inline:auto;padding-block:clamp(22px,4vw,54px)}
.sh-form-shell,.sh-form-container>form{padding:clamp(18px,3vw,36px);border:1px solid var(--border,#d8dce5);border-radius:22px;background:var(--surface,#fff)}
.sh-form-container h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:0 0 9px;color:var(--text,#131722)}
.sh-form-container p{line-height:1.9;color:var(--muted,#687389)}
.sh-form-container form>button{background:#4054b2;border:0;border-radius:12px;padding:12px 25px;min-height:48px;color:#fff;font:inherit;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sh-form-container form>button:hover{background:#0f5096}
.sh-form-container form>button:focus-visible{outline:3px solid #4054b2;outline-offset:3px}
.sh-field :is(input[type=checkbox],input[type=radio]){accent-color:#4054b2;margin-inline:8px}
.sh-field small{line-height:1.7}
.sh-form-container .sh-form-alert{padding:13px 17px;border:1px solid #bb3030;border-radius:12px;margin-bottom:17px;color:#bd2424}
.sh-form-success{padding:22px;border-radius:15px;background:color-mix(in srgb,#23a455 9%,var(--surface,#fff))}
.sh-form-container>form{max-width:100%}
.sh-form-container form .sh-field fieldset{border:1px solid var(--border,#d8dce5);border-radius:12px;display:grid;gap:8px}
.sh-form-container form input[name=otp]{max-width:210px;display:block;direction:ltr;text-align:center;letter-spacing:.22em;font-size:1.5rem;padding:12px;border:1px solid var(--border);border-radius:10px;margin-block:15px}
@media(max-width:650px){.sh-submission-values>div{grid-template-columns:1fr;gap:5px}.sh-admin-field>summary{align-items:start;flex-direction:column}}

.sh-form-container .sh-otp-resend{margin-top:10px}
.sh-form-container .sh-otp-resend>button{border:1px solid var(--border,#d8dce5);background:transparent;color:var(--text,#131722);min-height:40px;padding:9px 16px}
.sh-form-container .sh-otp-resend>button:hover{background:var(--surface2,#f4f5f7)}

.sh-form-section-heading{margin:28px 0 8px;padding-bottom:10px;border-bottom:1px solid var(--border,#d8dce5);font-size:1.12rem;color:var(--text,#101625)}
.sh-form-section-description{margin:0 0 15px;color:var(--muted,#687389)}