@font-face{font-family:OpenSans;src:url(OpenSans-Regular.woff2);font-display:swap}
@font-face{font-family:OpenSans;src:url(OpenSans-Bold.woff2);font-weight:700;font-display:swap}
@font-face{font-family:Thmanyah;src:url(thmanyahsans-Regular.woff2);font-display:swap}
@font-face{font-family:Thmanyah;src:url(thmanyahsans-Bold.woff2);font-weight:700;font-display:swap}
@font-face{font-family:ThmanyahDisplay;src:url(thmanyahserifdisplay-Bold.woff2);font-display:swap}
@font-face{font-family:Trajan;src:url(TrajanPro3-Regular.woff2);font-display:swap}
:root{color-scheme:light;--navy:#14182d;--gold:#cdb36b;--bg:#f8f5ef;--card:#fff;--text:#14182d;--sub:#555b70;--border:#ded7c4;--accent:#a6223b;--selected:#fff1f4;--shadow:#14182d14}
:root[data-theme=dark]{color-scheme:dark;--bg:#0d1020;--card:#181d34;--text:#f8f5ef;--sub:#c1c6da;--border:#414964;--accent:#ff9ba9;--selected:#37273e;--shadow:#0005}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at 88% 0%,#cdb36b23,transparent 43%),var(--bg);color:var(--text);font:1rem/1.65 OpenSans,Arial,sans-serif}
:lang(ar-TN){font-family:Thmanyah,Tahoma,sans-serif}
.wrap{width:min(100% - 2rem,46rem);margin-inline:auto}
header{background:var(--navy);border-block-end:1px solid #cdb36b70;color:#fff}
.bar,.tools,nav,.actions{display:flex;align-items:center;gap:.5rem}
.bar{justify-content:space-between;min-height:4.8rem}
.bar img{display:block;object-fit:contain;max-width:100%}
.tools{flex-wrap:wrap;justify-content:end}
button,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.45;cursor:default}
nav button,nav a,#theme{background:transparent;color:#fff;border:1px solid #83879b;border-radius:2rem;min-height:44px;padding:.35rem .75rem;display:inline-grid;place-items:center;text-decoration:none;font-size:.84rem}
#theme{display:inline-block}
nav [aria-current=true],nav [aria-pressed=true],#theme[aria-pressed=true]{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.intro{padding:clamp(1.55rem,5vw,3.35rem) 0 1.15rem}
.eyebrow{color:var(--accent);font-weight:700;margin:0;font-size:.9rem}
h1{font:400 clamp(1.7rem,5.5vw,2.85rem)/1.18 Trajan,Georgia,serif;margin:.45em 0 .3em}
[dir=rtl] h1{font-family:ThmanyahDisplay,Thmanyah,Tahoma,sans-serif}
.intro > p:not(.eyebrow):not(.privacy){max-width:60ch;margin:.5rem 0;color:var(--sub)}
.progress-box{background:var(--card);border:1px solid var(--border);border-radius:.9rem;padding:.75rem 1.1rem;margin:0 0 .8rem;font-size:.88rem;font-weight:700}
progress{display:block;width:100%;height:.42rem;margin-block-start:.55rem;border:0;border-radius:1rem;overflow:hidden;accent-color:var(--accent)}
progress::-webkit-progress-bar{background:var(--border)}
progress::-webkit-progress-value{background:var(--accent)}
.privacy,.hint,.voice small{color:var(--sub);font-size:.9rem;margin:.2rem 0 .7rem}
fieldset{min-inline-size:0;margin:0;padding:clamp(1rem,4vw,1.8rem);border:1px solid var(--border);border-radius:1.15rem;background:var(--card);box-shadow:0 12px 35px var(--shadow)}
legend{display:contents;font-size:clamp(1.2rem,4vw,1.65rem);font-weight:700}
legend label{display:inline}
.number{display:none}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-block-start:1rem}
.choice{display:flex;align-items:center;gap:.6rem;border:1px solid var(--border);border-radius:.75rem;min-height:50px;padding:.55rem .8rem;cursor:pointer}
.choice:hover,.choice:has(input:checked){border-color:var(--accent);background:var(--selected)}
input[type=radio]{flex:none;margin:0;accent-color:var(--accent);width:1.1rem;height:1.1rem}
textarea{display:block;width:100%;padding:.75rem;border:1px solid var(--border);border-radius:.75rem;resize:vertical;background:var(--bg);color:var(--text);margin-block-start:.6rem}
:focus-visible{outline:3px solid #6097dc;outline-offset:3px}
.error{color:var(--accent);font-weight:700}
.voice{margin-block-start:.7rem}
.voice small{display:block;margin-block-end:0}
.voice button,#previous{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:.7rem;min-height:44px;padding:.4rem .8rem}
.voice button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.voice [role=status]{font-size:.9rem;margin-inline-start:.5rem}
.actions{justify-content:space-between;margin-block-start:.85rem}
.submit{background:var(--navy);color:#fff;border:1px solid var(--gold);border-radius:.7rem;min-height:48px;padding:.5rem 1.4rem;font-weight:700}
[data-theme=dark] .submit{background:var(--gold);color:var(--navy)}
footer{padding:1rem 0 1.5rem;color:var(--sub);font-size:.8rem}
@media(max-width:35rem){.choices{grid-template-columns:1fr}.bar img{width:110px}}


/* Responsive survey controls */
.bar{gap:clamp(.4rem,2vw,1.25rem)}
.bar>a{min-width:0;flex:0 1 auto}
.bar img{width:clamp(90px,23vw,156px)}
.tools{flex:0 0 auto}
.choices,.actions{min-width:0}
.voice{margin:1rem 0 .85rem}
.voice button[data-voice]{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;min-height:56px;background:var(--navy);color:#fff;border:2px solid var(--gold);font-weight:700;padding:.65rem 1rem}
[data-theme=dark] .voice button[data-voice]{background:var(--gold);color:var(--navy)}
.voice button[data-voice][aria-pressed=true]{background:var(--accent);color:var(--card);border-color:var(--accent)}
.mic-icon{width:1.3em;height:1.3em;flex:none}
.voice [role=status]{display:block;margin:.3rem 0 0;font-weight:700;color:var(--accent)}
.voice [role=status]:empty{display:none}
textarea{font-size:max(1rem,16px)}
.actions button{min-height:48px}
@media(max-width:360px){
 .wrap{width:calc(100% - 1.25rem)}
 .bar{gap:.3rem}
 .tools,nav{gap:.25rem}
 nav button,nav a,#theme{padding-inline:.48rem}
 .submit{padding-inline:.75rem}
}
@media(min-width:1440px){
 .wrap{width:min(75vw,59rem)}
 .bar{min-height:5.5rem}
 .choice,.voice button[data-voice],.actions button{min-height:58px}
}
@media(min-width:1920px){
 html{font-size:clamp(20px,1.05vw,32px)}
 .wrap{width:min(72vw,60rem)}
 .bar img{width:9rem}
 nav button,nav a,#theme{min-height:2.75rem}
 .choice,.voice button[data-voice],.actions button{min-height:3rem}
}

.audience,.example{color:var(--text);background:var(--selected);border-inline-start:3px solid var(--accent);padding:.65rem .85rem;border-radius:.4rem;font-size:.95rem}
.voice button[data-retry-voice]{margin-block:.4rem;border-color:var(--accent);font-weight:700}

#survey{padding-block-start:1rem}
#start{margin-block-start:.65rem;min-height:48px}