/* assets/css/questions.css
 * THE universal question design system. Every question type the app will
 * ever ask renders from these classes, in flows, in chat, anywhere. One
 * visual language, procedurally built by questions.js. App tokens with
 * fallbacks. No inline styles; JS sets only custom properties and classes.
 *
 * Types: chips | chips_multi | toggle | text | number | time | date | scale
 */

/* ── The panel shell ─────────────────────────────────── */
.q-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px 20px calc(28px + env(safe-area-inset-bottom));
  /* fill from under the scene panel all the way to the viewport floor so
     .q-nav (margin-top:auto) actually pins at the bottom, not in dead space. */
  min-height:calc(100dvh - 250px);
  max-width:560px;
  margin:0 auto;
  width:100%;
  box-sizing:border-box;
}
.q-hint{
  font-family:var(--note,'Kalam',cursive);
  font-size:15px;
  color:var(--ink-soft,#6a5f51);
  margin:0;
  text-align:center;
}
.q-progress{
  display:flex;justify-content:center;gap:6px;margin:2px 0;
}
.q-progress i{
  width:7px;height:7px;border-radius:50%;
  background:var(--line,#2f281f);opacity:.22;
}
.q-progress i.cur{opacity:1;background:var(--accent,#2f8f86)}
.q-progress i.done{opacity:.55;background:var(--accent,#2f8f86)}

/* ── Field wrapper ───────────────────────────────────── */
.q-field{display:flex;flex-direction:column;gap:8px}
.q-label{
  font-family:var(--hand,'Patrick Hand',cursive);
  font-size:17px;
  color:var(--ink,#2a241c);
}
.q-field.q-missing .q-label{color:#a8552f}
.q-field.q-missing::after{
  content:'this one helps a lot';
  font-family:var(--note,'Kalam',cursive);
  font-size:11.5px;color:#a8552f;
}

/* ── Chips (single + multi share everything) ─────────── */
.q-chips{display:flex;flex-wrap:wrap;gap:9px}
.q-chip{
  font-family:var(--hand,'Patrick Hand',cursive);
  font-size:16px;
  color:var(--ink,#2a241c);
  background:var(--card,#fbf8ef);
  border:1.8px solid var(--line,#2f281f);
  border-radius:12px 14px 11px 15px;
  padding:9px 14px;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease;
  user-select:none;
}
.q-chip:active{transform:scale(.96)}
.q-chip.sel{
  background:var(--accent,#2f8f86);
  border-color:var(--accent-deep,#256f68);
  color:#fbf8ef;
}
/* the other escape hatch */
.q-other{display:none;margin-top:2px}
.q-other.show{display:block}

/* ── Toggle: a two-chip single choice, full width halves ── */
.q-toggle{display:flex;gap:9px}
.q-toggle .q-chip{flex:1;text-align:center}

/* ── Text + number ───────────────────────────────────── */
.q-input{
  font-family:var(--scrawl,'Caveat',cursive);
  font-size:22px;
  color:var(--ink,#2a241c);
  background:transparent;
  border:none;
  border-bottom:2px dashed var(--line,#2f281f);
  padding:7px 3px;
  width:100%;
  outline:none;
  box-sizing:border-box;
}
.q-input::placeholder{color:var(--ink-soft,#9a8f7e);opacity:.65}
.q-input:focus{border-bottom-color:var(--accent,#2f8f86);border-bottom-style:solid}
.q-input.q-number{max-width:120px;text-align:center}

/* ── Time: drag slider + tap-to-type, the wizard pattern ── */
.q-time{display:flex;flex-direction:column;gap:6px}
.q-time-readout{
  font-family:var(--scrawl,'Caveat',cursive);
  font-weight:700;font-size:30px;
  color:var(--accent,#2f8f86);
  text-align:center;
  cursor:pointer;
}
.q-time-readout small{
  display:block;
  font-family:var(--note,'Kalam',cursive);
  font-size:10.5px;font-weight:400;
  color:var(--ink-soft,#8a7f6e);
}
.q-time-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:30px;background:transparent;cursor:pointer;
}
.q-time-slider::-webkit-slider-runnable-track{
  height:7px;border-radius:5px;
  background:var(--line,#2f281f);opacity:.28;
}
.q-time-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--accent,#2f8f86);
  border:2.5px solid var(--paper,#f1ead9);
  box-shadow:0 0 0 1.8px var(--line,#2f281f);
  margin-top:-10px;
}
.q-time-slider::-moz-range-track{height:7px;border-radius:5px;background:var(--line,#2f281f);opacity:.28}
.q-time-slider::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:var(--accent,#2f8f86);
  border:2.5px solid var(--paper,#f1ead9);
  box-shadow:0 0 0 1.8px var(--line,#2f281f);
}
.q-time-manual{display:none;justify-content:center}
.q-time.manual .q-time-manual{display:flex}
.q-time.manual .q-time-slider{display:none}
.q-time-manual input{
  font-family:var(--hand,'Patrick Hand',cursive);
  font-size:22px;color:var(--ink,#2a241c);
  background:var(--card,#fbf8ef);
  border:1.8px solid var(--line,#2f281f);
  border-radius:11px 13px 10px 14px;
  padding:8px 12px;outline:none;
}

/* ── Date ────────────────────────────────────────────── */
.q-date input{
  font-family:var(--hand,'Patrick Hand',cursive);
  font-size:17px;color:var(--ink,#2a241c);
  background:var(--card,#fbf8ef);
  border:1.8px solid var(--line,#2f281f);
  border-radius:11px 13px 10px 14px;
  padding:9px 12px;outline:none;width:100%;box-sizing:border-box;
}

/* ── Scale 1..5: footprints as the dots ──────────────── */
.q-scale{display:flex;gap:12px;justify-content:center}
.q-scale-dot{width:26px;height:33px;cursor:pointer}
.q-scale-dot svg{width:100%;height:100%;fill:none;stroke:var(--ink-soft,#8a7f6e);stroke-width:1.6}
.q-scale-dot.sel svg,.q-scale-dot.below svg{fill:var(--accent,#2f8f86);stroke:none}

/* ── Navigation ──────────────────────────────────────── */
.q-nav{display:flex;gap:10px;margin-top:auto;padding-top:24px}
.q-nav.q-busy{opacity:.55;pointer-events:none}
/* the whole panel locks during the catalog rebuild (~20s). Everything
   greys + ignores taps until the new flow page lands. */
.q-locked,.q-locked .q-panel{
  pointer-events:none;
  opacity:.6;
  filter:saturate(.85);
  transition:opacity .25s ease, filter .25s ease;
}
.q-next{
  flex:1;
  font-family:var(--hand,'Patrick Hand',cursive);
  font-size:18px;
  color:#fbf8ef;
  background:var(--accent,#2f8f86);
  border:2px solid var(--accent-deep,#256f68);
  border-radius:13px 15px 12px 16px;
  padding:13px 18px;
  cursor:pointer;
  box-shadow:2px 3px 0 rgba(47,40,31,.18);
}
.q-next:active{transform:translateY(1px);box-shadow:1px 2px 0 rgba(47,40,31,.18)}
.q-back{
  font-family:var(--hand,'Patrick Hand',cursive);
  font-size:16.5px;
  color:var(--ink-soft,#6a5f51);
  background:transparent;
  border:1.8px dashed var(--line,#2f281f);
  border-radius:12px 14px 11px 15px;
  padding:13px 16px;
  cursor:pointer;
}
.q-skipflow{
  font-family:var(--note,'Kalam',cursive);
  font-size:12px;
  color:var(--ink-soft,#8a7f6e);
  background:none;border:none;cursor:pointer;
  text-decoration:underline dashed;
  align-self:center;
  padding:4px;
}

/* page transitions */
.q-panel.page-leave{animation:q-leave .22s ease both}
.q-panel.page-enter{animation:q-enter .26s ease both}
@keyframes q-leave{to{opacity:0;transform:translateX(-14px)}}
@keyframes q-enter{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .q-panel.page-leave,.q-panel.page-enter{animation:none}
}
.reduced-motion .q-panel.page-leave,.reduced-motion .q-panel.page-enter{animation:none}