/* Native-pilot multiple selection questions. */
#pre-form {
  --form-ink: #17283c;
  --form-muted: #5d7187;
  --form-line: #d5e0ec;
  --form-surface: #ffffff;
  --form-soft: #f5f8fc;
  --form-control: #fbfdff;
  --form-accent: #2367d1;
  --form-accent-soft: #e8f1ff;
  color: var(--form-ink);
  background: linear-gradient(145deg, #ffffff, #f7faff);
  border-color: #d8e2ed;
  box-shadow: 0 18px 44px #10243b18;
}
#pre-form .step-head { color: var(--form-accent); font-weight: 700; }
#pre-form #pre-title { color: var(--form-ink); margin-top: 7px; }
#pre-form #pre-help { color: var(--form-muted); }
#pre-form .muted { color: var(--form-muted); }
#pre-form .pre-progress-track { background: #e3eaf2; }
#pre-form .pre-progress-bar { background: linear-gradient(90deg, #2367d1, #52b8dc); }
#pre-form .pre-section-block {
  margin: 20px 0 24px;
  padding: 20px;
  border-color: var(--form-line);
  background: linear-gradient(145deg, #ffffff, #f8fbff);
  box-shadow: 0 5px 18px #1b3b5a08;
}
#pre-form .pre-section-block h3 { color: var(--form-ink); }
#pre-form .pre-form-grid { gap: 18px 20px; align-items: start; }
#pre-form .pre-form-grid > .field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}
#pre-form .pre-form-grid > .field > label {
  display: block;
  min-height: 3.2em;
  margin: 0 0 7px;
  color: #293b51;
  font-weight: 700;
  line-height: 1.6;
}
#pre-form .pre-form-grid > .field > label span[aria-hidden="true"] {
  color: var(--form-accent);
  font-weight: 800;
}
#pre-form .pre-form-grid > .field > input,
#pre-form .pre-form-grid > .field > select,
#pre-form .pre-form-grid > .field input:not([type="hidden"]),
#pre-form .pre-form-grid > .field textarea,
#pre-form .province-picker-control {
  width: 100%;
  min-width: 0;
  min-height: 49px;
  border: 1px solid #c9d6e4;
  border-radius: 11px;
  color: #26394e;
  background: var(--form-control);
  box-shadow: 0 1px 2px #17324d08;
}
#pre-form .pre-form-grid > .field > input,
#pre-form .pre-form-grid > .field > select {
  padding: 10px 13px;
  font: inherit;
}
#pre-form .pre-form-grid > .field input:not([type="hidden"]),
#pre-form .pre-form-grid > .field textarea { padding: 10px 13px; font: inherit; }
#pre-form .pre-form-grid > .field input:not([type="hidden"]) { direction: rtl; }
#pre-form .pre-form-grid > .field > select option { color: #26394e; background: #fff; }
#pre-form .pre-form-grid > .field > input::placeholder,
#pre-form .province-picker-input::placeholder { color: #718196; opacity: 1; }
#pre-form .pre-form-grid > .field > input:focus,
#pre-form .pre-form-grid > .field > select:focus,
#pre-form .province-picker-control:focus-within {
  outline: 0;
  border-color: var(--form-accent);
  box-shadow: 0 0 0 3px #2367d126;
}
#pre-form .pre-form-grid > .field > small,
#pre-form .pre-form-grid > .field:not(:has(> small))::after {
  display: block;
  min-height: 1.5em;
  margin-top: 5px;
  color: var(--form-muted);
  font-size: .78rem;
  line-height: 1.5;
}
#pre-form .pre-form-grid > .field:not(:has(> small))::after { content: ""; }
#pre-form .province-picker { margin-top: 0; }
#pre-form .province-picker-control { display: flex; align-items: stretch; overflow: hidden; }
#pre-form .field .province-picker-input {
  flex: 1;
  width: auto;
  min-width: 0;
  min-height: 47px;
  padding: 10px 13px;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: #26394e;
  background: transparent;
  font: inherit;
  direction: rtl;
}
#pre-form .province-picker-toggle {
  flex: 0 0 46px;
  min-height: 47px;
  border: 0;
  border-inline-start: 1px solid #c9d6e4;
  background: #f3f7fc;
  color: #526982;
}
#pre-form .province-picker-toggle::before { border-color: #526982; }
#pre-form .province-picker-list {
  border-color: #c9d6e4;
  background: #fff;
  box-shadow: 0 12px 26px #18365320;
}
#pre-form .province-option { color: #26394e; }
#pre-form .province-option:hover,
#pre-form .province-option.is-active { background: #edf4ff; outline-color: #b8cfee; }
#pre-form .province-option[aria-selected="true"]::after { color: var(--form-accent); }
#pre-form .province-empty { color: var(--form-muted); }
#pre-form .pre-multiple {
  border-color: var(--form-line);
  background: #f9fbfe;
}
#pre-form .pre-multiple legend { color: var(--form-ink); }
#pre-form .pre-multiple legend span[aria-hidden="true"] { color: var(--form-accent); }
#pre-form .pre-option {
  border-color: #d5e0ec;
  background: #fff;
  color: #293b51;
}
#pre-form .pre-option input { accent-color: var(--form-accent); }
#pre-form .pre-option:has(input:checked) {
  border-color: #7ba5e2;
  background: #edf4ff;
}
#pre-form .pre-option:focus-within { outline-color: var(--form-accent); }
#pre-form .error { color: #a4212b; }
#pre-form .primary {
  color: #fff;
  background: var(--form-accent);
  box-shadow: 0 5px 14px #2367d126;
}
#pre-form .primary:hover:not(:disabled) { background: #1d58b3; }
#pre-form .secondary {
  color: #244a7d;
  border-color: #b5c9e2;
  background: #fff;
}
#pre-form .secondary:hover { background: #edf4ff; }
#pre-form button:focus-visible,
#pre-form input:focus-visible,
#pre-form select:focus-visible {
  outline: 3px solid #2367d1;
  outline-offset: 3px;
}
.pre-progress-track { height: 6px; margin: 12px 0 24px; overflow: hidden; border-radius: 999px; background: var(--panel-2); }
.pre-progress-bar { width: 50%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime), #8bd8b0); transition: width 220ms ease; }
.pre-section-block { margin: 22px 0 26px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, #152727, var(--panel-2)); }
.pre-section-block:first-child { margin-top: 0; }
.pre-section-block h3 { margin: 0 0 14px; font-size: 1.02rem; color: var(--text); }
.pre-section-block--primary { margin-top: 18px; }
.pre-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.pre-form-grid > .field { min-width: 0; margin: 0; }
.province-picker { position: relative; margin-top: 7px; }
.province-picker-control { display:flex; align-items:stretch; overflow:hidden; border:1px solid #3b514e; border-radius:12px; background:#0a1515; }
.field .province-picker-input { flex:1; width:auto; min-width:0; min-height:48px; padding:11px 13px; border:0; border-radius:0; outline:0; color:var(--text); background:transparent; font:inherit; direction:rtl; }
.field .province-picker input[type="hidden"] { display:none; }
.province-picker-control:focus-within { border-color:var(--lime); box-shadow:0 0 0 3px #c7fa4520; }
.province-picker-input::placeholder { color:var(--muted); opacity:1; }
.province-picker-toggle { position:relative; flex:0 0 46px; min-height:48px; padding:0; border:0; border-inline-start:1px solid #3b514e; border-radius:0; background:transparent; color:var(--text); font:inherit; cursor:pointer; }
.province-picker-toggle::before { content:""; position:absolute; top:19px; left:17px; width:9px; height:9px; border-inline-end:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform 160ms ease; }
.province-picker[data-open="true"] .province-picker-toggle::before { top:22px; transform:rotate(225deg); }
.province-picker-list { position:absolute; z-index:20; inset-inline:0; top:calc(100% - 1px); max-height:260px; overflow-y:auto; overscroll-behavior:contain; padding:5px; border:1px solid #526a64; border-radius:0 0 12px 12px; background:#101f1f; box-shadow:0 12px 26px #0008; }
.province-picker-list[hidden] { display:none; }
.province-option { display:flex; align-items:center; min-height:44px; padding:9px 12px; border-radius:8px; color:var(--text); cursor:pointer; }
.province-option:hover,.province-option.is-active { background:#203535; outline:1px solid #47645d; }
.province-option[aria-selected="true"]::after { content:"✓"; margin-inline-start:auto; color:var(--lime); font-weight:700; }
.province-empty { padding:12px; color:var(--muted); }
.pre-form-grid > .pre-multiple { grid-column: 1 / -1; margin: 0; }
.pre-multiple { border: 1px solid var(--line); border-radius: 16px; margin: 22px 0; padding: 16px; min-width: 0; }
.pre-multiple[hidden] { display: none; }
.pre-multiple legend { padding: 0 8px; font-weight: 700; }
.pre-multiple p { margin: 0 0 12px; }
.pre-option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); cursor: pointer; }
.pre-option input { accent-color: var(--lime); flex: 0 0 20px; width: 20px; height: 20px; margin: 0; }
.pre-option:has(input:checked) { border-color: var(--lime); background: #203023; }
.pre-option:focus-within { outline: 2px solid var(--lime); outline-offset: 2px; }
.pre-option span { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .pre-section-block { margin: 18px 0 22px; padding: 14px; }
  .pre-section-block--primary { margin-top: 14px; }
  .pre-form-grid { grid-template-columns: 1fr; gap: 14px; }
  .pre-form-grid > .pre-multiple { grid-column: auto; }
  #pre-form .pre-form-grid > .field > label { min-height: 0; }
  #pre-form .pre-form-grid > .field:not(:has(> small))::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .province-picker-toggle::before { transition:none; }
}
@media (prefers-reduced-motion: reduce) {
  .pre-progress-bar { transition: none; }
}
.actions { flex-wrap: wrap; }
.settings-jump-nav { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 20px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.settings-jump-nav button { min-height:38px; }
#settings-core, #settings-questionnaire, #settings-pre-form { scroll-margin-top:18px; }
.settings-target { animation: settings-target 2.2s ease-out; }
@keyframes settings-target { 0%, 65% { outline:2px solid var(--lime); outline-offset:7px; } 100% { outline:2px solid transparent; outline-offset:7px; } }
.question-edit { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 14px 0; overflow-wrap: anywhere; }
.question-edit summary { cursor: pointer; min-height: 44px; }
.question-edit textarea { width: 100%; }
#chat-controls { margin: 0; padding: 4px 12px; }
#chat-controls button { min-height: 44px; font-size: .85rem; }
#backup-note { overflow-wrap: anywhere; }
.session-row { display:flex; gap:8px; align-items:stretch; }
.session-row .session { flex:1; min-width:0; }
.session-check { display:grid; place-items:center; width:42px; border:1px solid var(--line); border-radius:13px; background:var(--panel-2); cursor:pointer; }
.session-check input { width:18px; height:18px; accent-color:var(--lime); }
.export-hint { margin:0 0 4px; line-height:1.6; }
.export-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:2px 0 10px; }
.export-controls button { min-height:38px; padding:6px 12px; font:600 .82rem Vazirmatn,sans-serif; }
.export-selection-status { color:var(--muted); font-size:.82rem; }
.export-feedback { margin:0 0 16px; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:#dce8d9; }
.export-feedback[data-state="error"] { border-color:#944a4a; color:#ffd0d0; }
.export-feedback[data-state="success"] { border-color:#557e2d; color:#e5f8c2; }
.pre-results { margin:12px 0 18px; padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); }
.pre-results summary { cursor:pointer; font-weight:700; }
.pre-results dl { display:grid; grid-template-columns:minmax(110px,.45fr) 1fr; gap:6px 12px; margin:12px 0 0; font-size:.9rem; }
.pre-results dt { color:var(--muted); }.pre-results dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.participant-feedback { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.participant-feedback h2 { margin:0 0 5px; font-size:1.08rem; line-height:1.7; }
.participant-feedback label { display:block; margin:14px 0 6px; font-weight:700; }
.participant-feedback textarea { width:100%; min-height:112px; resize:vertical; direction:rtl; font:inherit; color:var(--text); background:#0a1515; border:1px solid #3b514e; border-radius:12px; padding:11px 13px; }
.participant-feedback textarea:focus { outline:0; border-color:var(--lime); box-shadow:0 0 0 3px #c7fa4520; }