/* Public forms (/f/<code>/) — hand-written; prefix `frm-`.
   Self-contained on purpose: the site's base.css is tuned for the fixed
   canvas of the home page, and a form must read well at 320px.
   Logical properties throughout, so one sheet serves RTL and LTR. */

/* Qomra's Latin digits read as letters at small sizes ("1" ≈ "I", so 10 looks
   like I0). Digits, and the symbols around them, come from Arial instead —
   the same choice as the site's .num class, applied to every number. */
@font-face{font-family:'SussDigits';src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  unicode-range:U+0025,U+002B-002F,U+0030-0039,U+003A}
@font-face{font-family:'Qomra';src:url('/assets/fonts/itfQomraArabic-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Qomra';src:url('/assets/fonts/itfQomraArabic-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Qomra';src:url('/assets/fonts/itfQomraArabic-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --emerald:#054239; --ink:#072b28; --shadow:#002623; --gold:#b9a779;
  --page:#fbfbfb; --panel:#f3f3f3; --field:#fff; --stroke:#c1c1c1; --line:#e3e6e4;
  --muted:#4f5f5a; --err:#8a1c13; --err-bg:#fdecea; --ok:#12513c; --ok-bg:#e9f5ef;
  --radius:.5rem; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'SussDigits','Qomra',system-ui,sans-serif;background:var(--page);color:var(--ink);
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.num,[dir=ltr].frm-input,.frm-ref{font-family:Arial,system-ui,sans-serif}
a{color:var(--emerald)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ── chrome ── */
.frm-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem clamp(1rem,4vw,2rem);background:var(--emerald);color:#fff}
.frm-brand{display:flex;align-items:center;gap:.75rem;color:#fff;text-decoration:none;font-weight:500;line-height:1.3}
.frm-brand img{flex:none;height:2.75rem;width:auto}
.frm-langs{display:flex;gap:.25rem}
.frm-lang{color:#fff;text-decoration:none;padding:.25rem .625rem;border-radius:999px;font-size:.9375rem;
  border:1px solid rgba(255,255,255,.35)}
.frm-lang.is-current{background:#fff;color:var(--emerald);border-color:#fff}

.frm{max-width:46rem;margin:0 auto;padding:clamp(1.25rem,4vw,2.5rem) clamp(1rem,4vw,1.5rem) 7rem;container-type:inline-size}
.frm-head{margin-block-end:1.5rem}
.frm-title{margin:0;font-size:clamp(1.625rem,5vw,2.125rem);line-height:1.3;color:var(--emerald);font-weight:700}
.frm-intro{margin:.5rem 0 0;color:var(--muted)}
.frm-loading{color:var(--muted)}
.frm-preview-banner{margin:0 0 1rem;padding:.625rem 1rem;border-radius:var(--radius);background:#f4efe2;
  color:#6b5a2b;font-weight:500;text-align:center}
.frm-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── notices, verification, banners ── */
.frm-notice,.frm-verify,.frm-banner,.frm-summary{border-radius:var(--radius);padding:1rem 1.25rem;margin-block-end:1.25rem}
.frm-notice{background:#f4efe2;border:1px solid #e3d8bb}
.frm-notice p{margin:0 0 .5rem}
.frm-verify{background:#fff;border:1px solid var(--line)}
.frm-verify-h{margin:0;font-size:1.0625rem;color:var(--emerald)}
.frm-verified{margin:0;color:var(--ok);font-weight:500}
.frm-turnstile{margin-block-start:.5rem;min-height:65px}
.frm-banner{background:var(--err-bg);color:var(--err);border:1px solid #f3c7c2;font-weight:500}
.frm-summary{background:var(--err-bg);border:1px solid #f3c7c2;color:var(--err)}
.frm-summary-h{margin:0 0 .25rem;font-weight:700}
.frm-summary ul{margin:0;padding-inline-start:1.25rem}
.frm-summary a{color:var(--err)}

/* ── progress ── */
.frm-progress{margin-block-end:1rem}
.frm-progress-text{margin:0 0 .375rem;font-size:.9375rem;color:var(--muted)}
.frm-progress-bar{height:.375rem;background:var(--line);border-radius:999px;overflow:hidden}
.frm-progress-fill{display:block;height:100%;width:0;background:var(--emerald);border-radius:inherit;
  transition:width .3s var(--ease)}

/* ── steps and fields ── */
.frm-step{background:#fff;border:1px solid var(--line);border-radius:.75rem;padding:clamp(1.25rem,4vw,2rem)}
.frm-step-h{margin:0 0 1.25rem;font-size:1.375rem;line-height:1.4;color:var(--emerald);font-weight:700}
.frm-step-h:focus{outline:none}
.frm-subhead{margin:1.5rem 0 .75rem;font-size:1.125rem;color:var(--emerald)}
.frm-note{margin:0 0 1.25rem;padding:.75rem 1rem;background:var(--panel);border-inline-start:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;color:var(--ink);white-space:pre-line}
[dir=rtl] .frm-note{border-radius:var(--radius) 0 0 var(--radius)}
.frm-field{margin:0 0 1.5rem;padding:0;border:0;min-width:0}
.frm-label{display:block;margin:0 0 .375rem;padding:0;font-weight:500;color:var(--ink);line-height:1.5}
.frm-opt{font-weight:400;color:var(--muted);font-size:.9375rem}
.frm-hint{margin:-.125rem 0 .5rem;color:var(--muted);font-size:.9375rem;line-height:1.55}
.frm-input,.frm-textarea,.frm-select{display:block;width:100%;min-height:3rem;padding:.625rem .875rem;
  font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--stroke);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s}
.frm-input:hover,.frm-textarea:hover,.frm-select:hover{border-color:#9aa6a2}
.frm-textarea{min-height:7rem;resize:vertical;line-height:1.6}
.frm-short{max-width:14rem}
.frm-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--emerald) 50%),
  linear-gradient(135deg,var(--emerald) 50%,transparent 50%);background-size:6px 6px;background-repeat:no-repeat;
  background-position:left 1.1rem center,left .75rem center;padding-inline-end:.875rem;padding-inline-start:2.25rem}
[dir=ltr] .frm-select{background-position:right .75rem center,right 1.1rem center;padding-inline-start:.875rem;padding-inline-end:2.25rem}
.frm-affix{display:flex;align-items:center;gap:.5rem;max-width:14rem}
.frm-affix .frm-input{max-width:none}
.frm-suffix{color:var(--muted);font-family:Arial,system-ui,sans-serif}
.frm-row-inline{display:flex;flex-wrap:wrap;gap:.625rem;align-items:center}
.frm-row-inline .frm-select{width:auto;min-width:9rem}
.is-invalid .frm-input,.is-invalid .frm-textarea,.is-invalid .frm-select,[aria-invalid=true]{
  border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.frm-err{margin:.375rem 0 0;color:var(--err);font-size:.9375rem;font-weight:500}

/* choices */
.frm-fieldset>.frm-label{float:none;width:100%}
.frm-choices{display:grid;gap:.5rem}
@container (min-width:34rem){
  .frm-choices.cols-2{grid-template-columns:repeat(2,1fr)}
  .frm-choices.cols-3{grid-template-columns:repeat(3,1fr)}
}
.frm-choice{display:flex;align-items:flex-start;gap:.625rem;min-height:3rem;padding:.625rem .875rem;cursor:pointer;
  background:#fff;border:1px solid var(--stroke);border-radius:var(--radius);line-height:1.5;transition:border-color .15s,background .15s}
.frm-choice:hover{border-color:#9aa6a2}
.frm-choice input{flex:none;margin:.3rem 0 0;width:1.125rem;height:1.125rem;accent-color:var(--emerald)}
.frm-choice:has(input:checked){border-color:var(--emerald);background:#f1f6f4;box-shadow:inset 0 0 0 1px var(--emerald)}
.frm-choice:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.frm-check .frm-choice{background:var(--panel);border-color:var(--line)}
/* Ratings: one row, the choices as equal cells, label under the button. */
.frm-choices.is-scale{grid-auto-flow:column;grid-auto-columns:1fr}
.frm-choices.is-scale .frm-choice{flex-direction:column;align-items:center;text-align:center;gap:.25rem;padding:.625rem .25rem;font-size:.9375rem}
.frm-choices.is-scale .frm-choice input{margin:0}

/* repeats */
.frm-rep>.frm-label{font-size:1.0625rem}
.frm-rep-list{display:grid;gap:1rem;margin-block-end:.75rem}
.frm-rep-card{margin:0;padding:1rem 1.125rem .25rem;border:1px solid var(--line);border-radius:var(--radius);background:#fcfcfc}
.frm-rep-top{display:flex;justify-content:space-between;align-items:center;margin-block-end:.75rem}
.frm-rep-legend{float:inline-start;padding:0;font-weight:700;color:var(--emerald)}
.frm-rep-legend:focus{outline:none}
.frm-rep-card .frm-field{margin-block-end:1rem}

/* files */
.frm-file-input{position:absolute;width:1px;height:1px;opacity:0}
.frm-drop{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:1rem;border:1.5px dashed var(--stroke);
  border-radius:var(--radius);background:#fff;cursor:pointer}
.frm-drop .frm-hint{margin:0}
.frm-file-input:focus-visible+.frm-files,.frm-drop:focus-within{outline:3px solid var(--gold);outline-offset:2px}
.frm-files{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.5rem}
.frm-file{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;padding:.625rem .875rem;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.frm-file-name{font-weight:500;overflow-wrap:anywhere;flex:1 1 12rem}
.frm-file-size{color:var(--muted);font-size:.875rem}
.frm-file-state{font-size:.875rem;color:var(--muted)}
.frm-file.is-ok .frm-file-state{color:var(--ok)}
.frm-file.is-err{border-color:#f3c7c2;background:var(--err-bg)}
.frm-file.is-err .frm-file-state{color:var(--err);flex-basis:100%}
.frm-file-bar{flex-basis:100%;height:.25rem;background:var(--line);border-radius:999px;overflow:hidden}
.frm-file-fill{display:block;height:100%;width:0;background:var(--emerald)}

/* buttons */
.frm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1.25rem;
  font:inherit;font-weight:500;border-radius:var(--radius);border:1px solid var(--emerald);background:#fff;color:var(--emerald);
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.frm-btn:hover{background:#f1f6f4}
.frm-btn.primary{background:var(--emerald);color:#fff}
.frm-btn.primary:hover{background:var(--shadow)}
.frm-btn.ghost{border-color:var(--stroke)}
.frm-btn:disabled{opacity:.6;cursor:progress}
.frm-btn:active{transform:translateY(1px)}
.frm-link{font:inherit;font-size:.9375rem;background:none;border:0;padding:.25rem;color:var(--emerald);
  text-decoration:underline;cursor:pointer}
.frm-rep-rm{color:var(--err)}

/* nav */
.frm-nav{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:.75rem;margin-block-start:1rem;
  padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--page) 75%,rgba(251,251,251,0))}
.frm-nav-gap{flex:1}
.frm-draft-note{margin:0;font-size:.8125rem;color:var(--muted)}
.frm-nav .frm-btn{min-width:7.5rem}
[dir=rtl] .frm-nav .primary::after{content:"←"}
[dir=ltr] .frm-nav .primary::after{content:"→"}
.frm-foot{text-align:center;margin-block-start:1.5rem}
.frm-keep{display:flex;gap:.5rem;align-items:flex-start;justify-content:center;font-size:.875rem;color:var(--muted);margin-block-end:.5rem;cursor:pointer}
.frm-keep input{margin-block-start:.2rem;flex:none;width:1.1rem;height:1.1rem}
.frm-hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}

/* review */
.frm-review-sec{border-block-start:1px solid var(--line);padding-block:1rem .25rem}
.frm-review-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.frm-review-top h3{margin:0 0 .5rem;font-size:1.0625rem;color:var(--emerald)}
.frm-review-dl{display:grid;grid-template-columns:minmax(8rem,2fr) 3fr;gap:.375rem 1rem;margin:0}
.frm-review-dl dt{color:var(--muted);font-size:.9375rem}
.frm-review-dl dd{margin:0;overflow-wrap:anywhere;white-space:pre-line}
.frm-review-dl dd.is-empty{color:#8b9793;font-style:italic}
.frm-review-dl .frm-review-group{grid-column:1/-1;font-weight:700;color:var(--ink);margin-block-start:.5rem}
.frm-review-dl dd>.frm-review-dl{grid-column:1/-1}
@container (max-width:30rem){
  .frm-review-dl{grid-template-columns:1fr}
  .frm-review-dl dd{margin-block-end:.5rem}
}

/* states and done */
.frm-state,.frm-done{background:#fff;border:1px solid var(--line);border-radius:.75rem;padding:2rem 1.5rem;text-align:center}
.frm-state h2,.frm-done h2{margin:0 0 .5rem;color:var(--emerald);font-size:1.5rem}
.frm-state p{color:var(--muted)}
.frm-done h2:focus{outline:none}
.frm-done-mark{margin:0 auto .5rem;width:3.5rem;height:3.5rem;line-height:3.5rem;border-radius:50%;background:var(--ok-bg);
  color:var(--ok);font-size:1.75rem;font-weight:700}
.frm-ref{display:inline-block;margin-inline-end:.75rem;padding:.375rem .875rem;font-size:1.25rem;letter-spacing:.04em;
  background:var(--panel);border-radius:var(--radius);color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.frm-bar,.frm-nav,.frm-verify,.frm-foot{display:none}}