/* ============================================================
   LIAPP — Ankieta Lekka Piechota 2026 / Light Infantry Survey
   Style dziedziczą tokeny kolorów z /css/main.css (--li-*),
   żeby wyglądać spójnie z resztą apki bez duplikowania palety.
   ============================================================ */

.surveyWrap{
display:flex;
flex-direction:column;
gap:14px;
padding-bottom:24px;
}

/* ===== PROGRESS ===== */

.surveyProgress{
display:flex;
flex-direction:column;
gap:6px;
}

.surveyProgressBar{
width:100%;
height:8px;
border-radius:999px;
background:var(--li-back);
overflow:hidden;
}

.surveyProgressFill{
height:100%;
background:var(--li-panel);
border-radius:999px;
transition:width 0.25s ease;
}

.surveyProgressLabel{
font-size:11px;
font-weight:700;
letter-spacing:0.5px;
opacity:0.75;
text-align:right;
color:var(--li-text);
}

/* ===== INTRO / PROFILE PICKER ===== */

.surveyIntro{
display:flex;
flex-direction:column;
gap:10px;
animation:fadeIn 0.35s ease;
}

.surveyIntroText{
font-size:14px;
line-height:1.5;
color:var(--li-text);
opacity:0.9;
}

.surveyOptionalNotice{
font-size:13px;
line-height:1.45;
font-weight:700;
color:var(--li-panel-text);
background:var(--li-panel);
border:1px solid var(--li-btn-border);
border-radius:12px;
padding:10px 12px;
}

.surveyProfileQuestion{
font-size:16px;
font-weight:800;
color:var(--li-title);
margin-top:6px;
}

.surveyProfileList{
display:flex;
flex-direction:column;
gap:10px;
}

.surveyProfileBtn{
width:100%;
text-align:center;
padding:14px 16px;
border-radius:14px;
border:1px solid var(--li-btn-border);
background:var(--li-panel);
color:var(--li-panel-text);
font-size:14px;
font-weight:700;
line-height:1.3;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.28);
transition:transform 0.08s;
}

.surveyProfileBtn:active{
transform:scale(0.98);
}

.surveyResumeWrap{
margin-top:14px;
padding:12px 14px;
border-radius:14px;
border:1px dashed var(--li-btn-border);
display:flex;
flex-direction:column;
gap:8px;
}

.surveyResumeText{
font-size:13px;
color:var(--li-text);
opacity:0.85;
}

.surveyResumeBtn,
.surveyDiscardBtn{
padding:10px 14px;
border-radius:999px;
border:1px solid var(--li-btn-border);
background:var(--li-panel);
color:var(--li-panel-text);
font-size:12px;
font-weight:800;
letter-spacing:0.5px;
cursor:pointer;
}

/* ===== QUESTION SCREEN ===== */

.surveyQuestion{
display:flex;
flex-direction:column;
gap:14px;
animation:fadeIn 0.3s ease;
}

.surveyModuleBadge{
align-self:center;
font-size:10.5px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
color:var(--li-panel-text);
background:var(--li-panel);
border:1px solid var(--li-btn-border);
border-radius:999px;
padding:4px 12px;
margin-bottom:-4px;
}

.surveySectionEyebrow{
font-size:11px;
font-weight:800;
letter-spacing:1.4px;
text-transform:uppercase;
opacity:0.65;
color:var(--li-text);
text-align:center;
}

.surveyQuestionText{
font-size:18px;
font-weight:800;
line-height:1.35;
color:var(--li-title);
text-shadow:0 1px 0 rgba(255,255,255,0.06), 0 2px 5px var(--li-title-shadow);
text-align:center;
}

.surveyQuestionBody{
display:flex;
flex-direction:column;
gap:10px;
}

/* ===== OPTIONS: single / multi ===== */

.surveyOptions{
display:flex;
flex-direction:column;
gap:8px;
}

.surveyOptionBtn{
width:100%;
text-align:center;
padding:12px 14px;
min-height:44px;
border-radius:12px;
border:1px solid var(--li-btn-border);
background:var(--li-panel);
color:var(--li-panel-text);
font-size:13.5px;
font-weight:700;
line-height:1.35;
cursor:pointer;
transition:transform 0.06s, background 0.15s, box-shadow 0.15s;
}

.surveyOptionBtn:active{
transform:scale(0.98);
}

.surveyOptionBtn.isSelected{
/* Odwrócona para --li-panel/--li-panel-text (nie --li-text/--li-title —
   te dwa bywają zbyt blisko siebie jasnością w trybie Night, co dawało
   niemal niewidoczny tekst). Odwrócenie sprawdzonej pary gwarantuje
   ten sam kontrast co stan domyślny, tylko z zamienionymi rolami. */
background:var(--li-panel-text);
color:var(--li-panel);
box-shadow:0 0 0 2px var(--li-btn-border) inset, 0 4px 10px rgba(0,0,0,0.3);
}

.surveyOptionCheckbox.isNeutral{
opacity:0.85;
font-style:italic;
}

.surveyMultiHint{
font-size:11.5px;
opacity:0.65;
color:var(--li-text);
text-align:center;
margin-top:2px;
}

/* ===== SCALE 1-10 ===== */

.surveyScaleWrap{
display:flex;
flex-direction:column;
gap:10px;
}

.surveyScaleLabels{
display:flex;
flex-direction:column;
gap:6px;
font-size:11.5px;
line-height:1.4;
opacity:0.8;
color:var(--li-text);
}

.surveyScaleLabelMin,
.surveyScaleLabelMax{ text-align:left; }

.surveyScaleGrid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:8px;
}

.surveyScaleBtn{
aspect-ratio:1;
min-height:44px;
border-radius:10px;
border:1px solid var(--li-btn-border);
background:var(--li-panel);
color:var(--li-panel-text);
font-size:15px;
font-weight:800;
cursor:pointer;
}

.surveyScaleBtn.isSelected{
background:var(--li-panel-text);
color:var(--li-panel);
box-shadow:0 0 0 2px var(--li-btn-border) inset;
}

/* ===== TEXT / COMMENT ===== */

.surveyTextWrap{
display:flex;
}

.surveyTextArea{
width:100%;
min-height:96px;
padding:12px;
border-radius:12px;
border:1px solid var(--li-btn-border);
background:var(--li-panel);
color:var(--li-panel-text);
font-size:13.5px;
font-family:inherit;
line-height:1.4;
resize:vertical;
}

.surveyTextArea::placeholder{
color:var(--li-panel-text);
opacity:0.55;
}

.surveyNumberInput{
width:100%;
padding:12px;
min-height:44px;
border-radius:12px;
border:1px solid var(--li-btn-border);
background:var(--li-panel);
color:var(--li-panel-text);
font-size:15px;
font-family:inherit;
}

.surveyNumberInput::placeholder{
color:var(--li-panel-text);
opacity:0.55;
}

.surveyCommentLabel{
display:block;
font-size:11.5px;
font-weight:700;
opacity:0.7;
margin-top:4px;
color:var(--li-text);
}

/* ===== SUMMARY / THANK YOU ===== */

.surveySummary,
.surveyThankYou{
display:flex;
flex-direction:column;
gap:12px;
text-align:center;
animation:fadeIn 0.3s ease;
}

.surveySkipNote{
font-size:12px;
opacity:0.7;
}

.surveyLoading{
text-align:center;
padding:40px 0;
font-size:13px;
font-weight:700;
opacity:0.75;
color:var(--li-text);
}

/* ===== NAV (Wstecz / Dalej / Wyślij) ===== */

.surveyNav{
display:flex;
gap:10px;
margin-top:6px;
}

.surveyNavBtn{
flex:1;
text-align:center;
padding:13px 14px;
min-height:46px;
border-radius:999px;
border:1px solid var(--li-btn-border);
background:var(--li-panel);
color:var(--li-panel-text);
font-size:13px;
font-weight:800;
letter-spacing:0.5px;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.28);
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
}

.surveyNextBtn,
.surveySubmitBtn{
background:var(--li-panel-text);
color:var(--li-panel);
}

@media (min-width:420px){
.surveyWrap{ width:360px; }
}