/* Shared components of the feedback forms (attendee, lead, multi, photos) and the
   community survey, built to the QARAVAN design system's web rules: square shapes,
   ink controls, brand colour only as flags and marks, no tinted grounds, a 560px
   form column. Needs qaravan.css first. Page <style> blocks keep only what is
   specific to that page. */

.wrap{max-width:560px; margin:0 auto; padding:20px 20px 64px}
.hp{position:absolute; left:-9999px; top:-9999px}

/* ---- header: the wordmark and the RU/EN switch (Tabs: the selected one fills ink) ---- */
.top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:4px 0 32px}
.lang{display:inline-flex; flex:none; border:2px solid var(--q-ink); background:var(--q-white)}
.lang button{min-height:40px; min-width:48px; padding:6px 14px; border:0; background:transparent; color:var(--q-ink);
  font:600 16px/1.15 var(--font-head); letter-spacing:.01em; cursor:pointer}
.lang button+button{box-shadow:inset 2px 0 0 var(--q-line)}
.lang button:hover{background:var(--q-line)}
.lang button[aria-pressed="true"]{background:var(--q-ink); color:var(--q-white); box-shadow:none}
.lang button[aria-pressed="true"]+button{box-shadow:none}
.lang button:focus-visible{outline-offset:-5px}
.lang button[aria-pressed="true"]:focus-visible{outline-color:var(--q-yellow)}

/* ---- page opener: eyebrow (a colour flag, then tracked capitals in ink), condensed title, muted line ---- */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:600 13.5px/1.2 var(--font-head);
  letter-spacing:.1em; text-transform:uppercase; color:var(--q-ink)}
.eyebrow::before{content:""; flex:none; width:.62em; height:.62em; background:var(--flag, var(--q-sky))}
.eyebrow:empty{display:none}
h1{font:700 clamp(30px,8vw,40px)/1.08 var(--font-head); letter-spacing:var(--tracking-display); margin:12px 0 8px; text-wrap:balance}
.sub{color:var(--q-muted); font-size:17px; margin:0; text-wrap:pretty}
.hero{margin-bottom:14px; opacity:0; transform:translateY(8px); transition:opacity .28s ease-out, transform .28s ease-out}
.hero.on{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .hero{transition:none; transform:none} }

/* ---- questions ---- */
fieldset{border:0; padding:24px 0 0; margin:0; min-width:0}
fieldset+fieldset{border-top:1px solid var(--q-line); margin-top:40px; padding-top:36px}
legend{float:left; width:100%; padding:0; margin:0 0 20px; font:600 19px/1.35 var(--font-brand); text-wrap:pretty}
legend+*{clear:both}
.hint{color:var(--q-muted); font-size:15px; line-height:1.45; font-weight:400; margin:8px 0 0; text-wrap:pretty}
legend .hint{display:block; margin:6px 0 0}
.req{color:var(--q-ink); margin-left:2px}

/* ---- star rating: square keys; chosen ones fill orange under an ink star ---- */
.stars{display:flex; gap:8px}
.stars button{width:56px; height:56px; flex:none; display:grid; place-items:center; padding:0; cursor:pointer;
  border:2px solid var(--q-edge); background:var(--q-white); color:var(--q-edge);
  transition:border-color .12s ease-out, background-color .12s ease-out, color .12s ease-out}
.stars button:hover{border-color:var(--q-ink); color:var(--q-ink)}
.stars button:active{transform:translateY(1px)}
.stars button.on{background:var(--q-orange); border-color:var(--q-orange); color:var(--q-ink)}
.stars svg{width:26px; height:26px; display:block; overflow:visible; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:miter}
.stars button.on svg{fill:currentColor}

/* ---- a text button: ink with the sky link underline ---- */
.na-link{display:inline-flex; align-items:center; min-height:44px; margin-top:8px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--q-ink); font:600 16px/1.3 var(--font-brand); text-align:left;
  text-decoration:underline; text-decoration-color:var(--q-sky); text-decoration-thickness:2px; text-underline-offset:4px}
.na-link:hover{text-decoration-color:currentColor; text-decoration-thickness:3px}

/* ---- answer chips (several choices): square, a visible edge at rest, ink when chosen ---- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:0}
.chips button{min-height:44px; padding:9px 16px; border:2px solid var(--q-edge); background:var(--q-white); color:var(--q-ink);
  font:600 16px/1.25 var(--font-brand); text-align:left; cursor:pointer;
  transition:background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out}
.chips button:hover{border-color:var(--q-ink)}
.chips button:active{transform:translateY(1px)}
.chips button[aria-pressed="true"]{background:var(--q-ink); border-color:var(--q-ink); color:var(--q-white)}
.chips button[aria-disabled="true"]{background:var(--q-disabled); border-color:var(--q-disabled); color:var(--q-disabled-ink); cursor:not-allowed}
.other-input{display:none; margin-top:14px}
.other-input.show{display:block}

/* ---- text fields: 2px q-edge, ink on hover and focus, the 3px sky ring ---- */
textarea,input[type="text"],input[type="email"],input[type="tel"],input[type="number"]{
  width:100%; min-height:44px; margin-top:18px; padding:9px 12px; border:2px solid var(--q-edge); border-radius:0;
  background:var(--q-white); color:var(--q-ink); font:400 16px/1.4 var(--font-brand);
  transition:border-color .12s; -webkit-appearance:none; appearance:none}
textarea{min-height:118px; resize:vertical; line-height:1.5}
textarea:hover,input[type="text"]:hover,input[type="email"]:hover,input[type="tel"]:hover,input[type="number"]:hover{border-color:var(--q-ink)}
textarea:focus,input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="number"]:focus{
  border-color:var(--q-ink); outline:3px solid var(--accent); outline-offset:0}
fieldset legend+textarea,fieldset legend+input{margin-top:0}
.other-input input{margin-top:0}
input.bad,input.bad:hover,input.bad:focus{border-color:var(--danger)}
/* a field's error: ink words after a red square, announced with the field */
.field-hint{display:none; gap:8px; align-items:baseline; margin:8px 0 0; font:600 14px/1.4 var(--font-brand); color:var(--q-ink)}
.field-hint.show{display:flex}
.field-hint::before{content:""; flex:none; width:10px; height:10px; background:var(--danger); transform:translateY(1px)}

/* ---- radio and checkbox: drawn, not native; the radio is the one round shape ---- */
input[type="radio"],input[type="checkbox"]{-webkit-appearance:none; appearance:none; flex:none; width:22px; height:22px; margin:0;
  border:2px solid var(--q-ink); background:var(--q-white); display:inline-grid; place-items:center; cursor:pointer}
input[type="radio"]{border-radius:50%}
input[type="radio"]::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--q-sky); transform:scale(0); transition:transform .12s ease-out}
input[type="radio"]:checked::before{transform:scale(1)}
input[type="checkbox"]:checked{background:var(--q-green) center/14px 14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  border-color:var(--q-green)}
input[type="radio"]:focus-visible,input[type="checkbox"]:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ input[type="radio"]::before{transition:none} }

/* ---- one-choice rows: the whole row is the target; the chosen row gets an ink edge and a sky flag ---- */
.opts{display:grid; gap:8px; margin-top:0}
.opts label{display:flex; gap:12px; align-items:flex-start; min-height:52px; padding:13px 16px 13px 22px; cursor:pointer;
  border:2px solid var(--q-edge); background:var(--q-white); font:400 16px/1.4 var(--font-brand); transition:border-color .12s}
.opts label:hover{border-color:var(--q-ink)}
.opts label:hover input{box-shadow:0 0 0 4px var(--q-line)}
.opts label:has(input:checked){border-color:var(--q-ink); box-shadow:inset 6px 0 0 var(--q-sky); font-weight:600}
#nameWrap{display:none}
#nameWrap.show{display:block}

/* ---- buttons: square, Fira Sans Condensed SemiBold; ink is the primary ---- */
.submit button[type="submit"],.stepnav .next,.start button,.next button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:52px; padding:10px 24px;
  border:2px solid var(--q-ink); border-radius:0; background:var(--q-ink); color:var(--q-white);
  font:600 19px/1.15 var(--font-head); letter-spacing:.01em; text-align:center; cursor:pointer;
  transition:box-shadow .15s ease-out, transform .05s}
.submit button[type="submit"]:hover,.stepnav .next:hover,.start button:hover,.next button:hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,.14)}
.submit button[type="submit"]:active,.stepnav .next:active,.start button:active,.next button:active{transform:translateY(1px); box-shadow:inset 0 0 0 999px rgba(0,0,0,.24)}
.submit button[type="submit"]:disabled{background:var(--q-disabled); border-color:var(--q-disabled); color:var(--q-disabled-ink); cursor:not-allowed; box-shadow:none; transform:none}
.submit{margin-top:48px}
.submit button[type="submit"],.start button{width:100%}
/* Back: a ghost button with the drawn chevron */
.stepnav .back,.submit .back{display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-left:-10px; padding:8px 12px 8px 8px;
  border:0; background:transparent; color:var(--q-ink); font:600 17px/1.15 var(--font-head); letter-spacing:.01em; cursor:pointer}
.stepnav .back::before,.submit .back::before{content:""; width:16px; height:16px; flex:none; background:center/16px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 3L5 8l5 5' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E")}
.stepnav .back:hover,.submit .back:hover{background:var(--q-line)}
.submit .back{margin-top:16px}

/* ---- steps ---- */
.step{display:none}
.step.on{display:block; animation:stepin .3s ease-out}
@keyframes stepin{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .step.on{animation:none} }
.stepnav{margin-top:46px; display:flex; align-items:center; justify-content:space-between; gap:14px}
.stepcount{font:600 15px/1.2 var(--font-head); letter-spacing:.01em; color:var(--q-muted); font-variant-numeric:tabular-nums}

/* ---- alerts: white with a colour bar at the left; the words stay ink ---- */
.err{display:none; margin:0 0 14px; padding:14px 18px 15px 24px; background:var(--q-white); border:1px solid var(--q-line);
  box-shadow:inset 6px 0 0 var(--danger); color:var(--q-ink); font:500 15px/1.45 var(--font-brand)}
.err.show{display:block}

/* ---- donate: white block with a red bar, one ink button with a red flag ---- */
.donate{margin-top:18px; padding:22px 22px 24px 30px; background:var(--q-white); border:1px solid var(--q-line); box-shadow:inset 6px 0 0 var(--q-red)}
.donate p{margin:0 0 14px; font-size:16px; text-wrap:pretty}
.donate a{position:relative; display:inline-flex; align-items:center; min-height:52px; margin-top:4px; padding:10px 24px 10px 34px;
  border:2px solid var(--q-ink); background:var(--q-ink); color:var(--q-white); text-decoration:none;
  font:600 19px/1.15 var(--font-head); letter-spacing:.01em; transition:box-shadow .15s ease-out}
.donate a::before{content:""; position:absolute; left:-2px; top:-2px; bottom:-2px; width:10px; background:var(--q-red)}
.donate a:hover{box-shadow:inset 0 0 0 999px rgba(0,0,0,.14)}
.donate a:active{transform:translateY(1px)}

/* ---- thanks ---- */
#thanks{display:none; padding-top:6vh}
#thanks.show{display:block}
#thanks h1{margin-top:0}
footer{margin-top:56px; color:var(--q-muted); font-size:15px}

/* ---- photo and video uploads ---- */
.ph-add{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; padding:12px 18px;
  border:2px solid var(--q-ink); background:var(--q-white); color:var(--q-ink); cursor:pointer;
  font:600 17px/1.15 var(--font-head); letter-spacing:.01em; transition:background-color .12s}
.ph-add::before{content:""; width:16px; height:16px; flex:none; background:center/16px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E")}
.ph-add:hover{background-color:var(--q-line)}
.ph-add:active{transform:translateY(1px)}
.ph-quality{display:flex; gap:12px; align-items:flex-start; margin:14px 0; font-size:15px; line-height:1.45; cursor:pointer}
.ph-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.ph-item{position:relative; overflow:hidden; background:var(--q-line); aspect-ratio:1}
.ph-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.ph-item img[hidden]{display:none}
.ph-placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:30px 10px 14px; text-align:center}
/* a video has no preview: a drawn play triangle instead */
.ph-mark{display:none}
.ph-mark.video{display:block; width:0; height:0; border-left:20px solid var(--q-ink); border-top:12px solid transparent; border-bottom:12px solid transparent}
.ph-name{font-size:12px; line-height:1.3; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ph-bar{position:absolute; left:0; right:0; bottom:0; height:5px; background:rgba(255,255,255,.6)}
.ph-bar i{display:block; height:100%; width:0; background:var(--q-sky); transition:width .2s}
.ph-item.done .ph-bar,.ph-item.fail .ph-bar{display:none}
.ph-retry{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:14px 8px 8px; border:0; cursor:pointer;
  background:rgba(51,51,51,.9); box-shadow:inset 0 6px 0 var(--danger); color:var(--q-white);
  font:600 15px/1.2 var(--font-head); letter-spacing:.01em; text-align:center}
.ph-retry:focus-visible{outline-offset:-5px; outline-color:var(--q-yellow)}
.ph-x{position:absolute; z-index:2; top:0; right:0; width:32px; height:32px; padding:0; border:0; cursor:pointer; color:transparent; font-size:0;
  background:var(--q-ink) center/14px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E")}
.ph-x:focus-visible{outline-offset:-5px; outline-color:var(--q-yellow)}