/* style.css — komponen asesmen & portal peserta (design system v3, Task 7).
   Semua warna, radius, bayangan, dan ukuran berasal dari token --sl-* di
   assets/theme.css. Tidak ada hex literal di sini. Nama kelas dan selector
   [style*=...] yang dibaca JS dipertahankan (lihat form-utils.js). */

/* ── Base ─────────────────────────────────────────────────── */
body {
  font-family: var(--sl-font-body);
  -webkit-font-smoothing: antialiased;
  background-color: var(--sl-canvas);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Kartu bagian instrumen dan kartu portal: padding sedikit lebih rapat di
   layar sempit supaya konten tidak tersisa ~250px pada lebar 360px. */
.assessment-card {
  padding: 24px;
}

@media (max-width: 640px) {
  .assessment-card { padding: 20px; }
}

/* ── Progress (header instrumen) ──────────────────────────── */
.progress-fill {
  transition: width var(--sl-dur) var(--sl-ease-out);
  background-color: var(--sl-ink-strong);
}

/* Bar sticky ringkas: nav + progres dalam satu header. */
.assessment-header {
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: var(--sl-z-header);
  background: var(--sl-surface);
  border-bottom: 1px solid var(--sl-hairline);
}

.assessment-header-inner-wide {
  max-width: 720px;
  margin: 0 auto;
  min-height: 56px;
}

.assessment-header-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 0 12px;
}

.assessment-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}

.assessment-header-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px 0 0;
  color: var(--sl-ink-soft);
  font-size: var(--sl-text-sm);
  text-decoration: none;
  flex: none;
}

.assessment-header-back:hover { color: var(--sl-ink); }

.assessment-header-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--sl-text-sm);
  font-weight: 600;
  color: var(--sl-ink);
}

.assessment-header-title .assessment-header-company {
  font-weight: 400;
  color: var(--sl-ink-soft);
}

.assessment-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: var(--sl-text-xs);
  color: var(--sl-ink-soft);
  font-variant-numeric: tabular-nums;
}

.assessment-progress-meta #progress-label { font-weight: 600; color: var(--sl-ink); }

.assessment-progress-meta .sl-progress { margin-top: 6px; }

#assessment-deadline-note {
  margin: 6px 0 0;
  font-size: var(--sl-text-xs);
  line-height: var(--sl-text-sm-lh);
  color: var(--sl-warning);
}

#assessment-deadline-note.is-past { color: var(--sl-danger); }

/* ── Tips (dipindah ke layar persetujuan) ─────────────────── */
.tips-block {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--sl-hairline);
  border-radius: var(--sl-radius-btn);
  background: var(--sl-surface-container);
}

.tips-block .tips-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: var(--sl-text-base);
  font-weight: 600;
  color: var(--sl-ink);
}

.tips-block ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
  font-size: var(--sl-text-base);
  line-height: 1.7;
  color: var(--sl-ink-soft);
}

.tips-block ul li { margin-bottom: 6px; }

/* ── Ranking / SortableJS ─────────────────────────────────── */
.sortable-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 10px 16px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-hairline-strong);
  border-radius: var(--sl-radius-btn);
  margin-bottom: 8px;
  cursor: default;
  user-select: none;
  transition: border-color var(--sl-dur-fast), background-color var(--sl-dur-fast);
}

.sortable-item.sortable-ghost {
  opacity: 0.4;
  background: var(--sl-surface-container);
}

.sortable-item.sortable-drag {
  box-shadow: var(--sl-shadow-float);
  border-color: var(--sl-ink-strong);
}

.drag-handle {
  cursor: grab;
  color: var(--sl-outline);
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
  /* Without this, touchstart/touchmove on the handle gets consumed by the
     browser's own scroll gesture before SortableJS's pointer handling can
     take over — on mobile this means the ranking items simply don't drag
     at all, the page just scrolls instead. */
  touch-action: none;
  padding: 8px;
  margin: -8px;
}

.drag-handle:active {
  cursor: grabbing;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--sl-hairline-strong);
  background: var(--sl-surface);
  color: var(--sl-ink-soft);
  font-size: var(--sl-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: background-color var(--sl-dur-fast), color var(--sl-dur-fast);
}

.rank-badge.rank-1 {
  background: var(--sl-ink-strong);
  border-color: var(--sl-ink-strong);
  color: var(--sl-on-strong);
}

.item-text {
  font-size: var(--sl-text-md);
  line-height: 1.5;
  color: var(--sl-ink);
  flex: 1;
  min-width: 0;
}

/* Tombol naik/turun: selalu tersedia sebagai alternatif drag. Area sentuh
   44x44 px; ikon tetap kecil di tengahnya. */
.rank-controls {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.rank-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--sl-radius-input);
  background: transparent;
  color: var(--sl-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rank-btn .material-symbols-outlined {
  font-size: 22px;
}

.rank-btn:hover:not(:disabled) {
  background: var(--sl-surface-container);
  color: var(--sl-ink);
}

.rank-btn:active:not(:disabled) {
  background: var(--sl-surface-container-high);
}

.rank-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Likert Scale ─────────────────────────────────────────── */
.likert-scale {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.likert-options {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Seluruh label adalah target klik (min 44x44); lingkaran radio tetap 28 px. */
.likert-options label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 2px;
  border-radius: var(--sl-radius-input);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.likert-options label:hover { background: var(--sl-surface-container); }

.likert-options label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--sl-ring);
}

.likert-options input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--sl-outline);
  background: var(--sl-surface);
  cursor: pointer;
  transition: border-color var(--sl-dur-fast), background-color var(--sl-dur-fast);
  position: relative;
}

.likert-options input[type="radio"]:checked {
  border-color: var(--sl-ink-strong);
  background: var(--sl-ink-strong);
}

.likert-options input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--sl-surface);
}

.likert-options span {
  font-size: var(--sl-text-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--sl-ink-soft);
}

.anchor-left,
.anchor-right {
  font-size: var(--sl-text-xs);
  color: var(--sl-ink-soft);
  max-width: 160px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* ── Word Count ───────────────────────────────────────────── */
/* Netral sebelum pengguna mengetik; warna hanya muncul setelah input. */
.word-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--sl-text-sm);
  color: var(--sl-ink-soft);
  margin-top: 6px;
}

.count-current {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sl-ink);
  transition: color var(--sl-dur-fast);
}

.count-current.ok    { color: var(--sl-success); }
.count-current.warn  { color: var(--sl-warning); }
.count-current.error { color: var(--sl-danger); }

/* ── Signature Pad ────────────────────────────────────────── */
.signature-container {
  position: relative;
  border: 1px solid var(--sl-hairline-strong);
  border-radius: var(--sl-radius-btn);
  overflow: hidden;
  background: var(--sl-surface);
}

.signature-container canvas {
  display: block;
  width: 100%;
  height: 160px;
  touch-action: none;
}

.signature-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sl-outline);
  font-size: var(--sl-text-md);
  pointer-events: none;
  transition: opacity var(--sl-dur-fast);
}

.signature-placeholder.hidden {
  opacity: 0;
}

/* ── Textarea essay ───────────────────────────────────────── */
.essay-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sl-hairline-strong);
  border-radius: var(--sl-radius-input);
  background: var(--sl-surface);
  font-size: var(--sl-text-md);
  line-height: 1.6;
  color: var(--sl-ink);
  resize: vertical;
  min-height: 140px;
  transition: border-color var(--sl-dur-fast), box-shadow var(--sl-dur-fast);
  font-family: var(--sl-font-body);
}

/* ── Standard inputs ──────────────────────────────────────── */
.form-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--sl-hairline-strong);
  border-radius: var(--sl-radius-input);
  background: var(--sl-surface);
  font-size: var(--sl-text-md);
  color: var(--sl-ink);
  transition: border-color var(--sl-dur-fast), box-shadow var(--sl-dur-fast);
  font-family: var(--sl-font-body);
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: var(--sl-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

.form-input::placeholder,
.essay-input::placeholder { color: var(--sl-outline); opacity: 1; }

.form-input:hover,
.essay-input:hover { border-color: var(--sl-ink-faint); }

.form-input:focus,
.essay-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--sl-ink);
  box-shadow: 0 0 0 3px var(--sl-ring);
}

/* Error state: class + aria-invalid, set by markFieldError (form-utils.js). */
.form-input.has-error,
.essay-input.has-error,
.form-input[aria-invalid="true"],
.essay-input[aria-invalid="true"] {
  border-color: var(--sl-danger);
}

.form-input.has-error:focus,
.essay-input.has-error:focus,
.form-input[aria-invalid="true"]:focus,
.essay-input[aria-invalid="true"]:focus {
  border-color: var(--sl-danger);
  box-shadow: 0 0 0 3px var(--sl-ring-danger);
}

.form-input:disabled,
.essay-input:disabled {
  background: var(--sl-surface-container);
  color: var(--sl-outline);
  cursor: not-allowed;
}

/* Tailwind forms (CDN) memberi input[type=text] dan :focus specificity
   (0,1,1)/(0,2,1) yang mengalahkan kelas di atas. Blok ini menaikkan
   specificity khusus untuk field teks supaya token di atas yang berlaku. */
body :is(input, textarea, select).form-input,
body :is(input, textarea).essay-input,
body input.otp-input,
body input.sl-input,
body textarea.sl-textarea {
  background-color: var(--sl-surface);
  border: 1px solid var(--sl-hairline-strong);
  border-radius: var(--sl-radius-input);
  padding: 10px 14px;
  font-size: var(--sl-text-md);
  line-height: 1.5;
  color: var(--sl-ink);
  box-shadow: none;
}

body textarea.essay-input {
  padding: 12px 14px;
  line-height: 1.6;
}

body select.form-input { padding-right: 36px; }

body input.form-input:focus,
body textarea.form-input:focus,
body textarea.essay-input:focus,
body input.otp-input:focus,
body input.sl-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--sl-ink);
  box-shadow: 0 0 0 3px var(--sl-ring);
}

body input.form-input[aria-invalid="true"],
body input.form-input.has-error,
body textarea.essay-input.has-error,
body input.sl-input[aria-invalid="true"] {
  border-color: var(--sl-danger);
}

body input.form-input[aria-invalid="true"]:focus,
body input.form-input.has-error:focus,
body textarea.essay-input.has-error:focus,
body input.sl-input[aria-invalid="true"]:focus {
  border-color: var(--sl-danger);
  box-shadow: 0 0 0 3px var(--sl-ring-danger);
}

/* ── Radio single select ──────────────────────────────────── */
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--sl-hairline-strong);
  border-radius: var(--sl-radius-btn);
  background: var(--sl-surface);
  cursor: pointer;
  transition: border-color var(--sl-dur-fast), background-color var(--sl-dur-fast);
  margin-bottom: 8px;
  -webkit-tap-highlight-color: transparent;
}

.radio-option:hover {
  border-color: var(--sl-ink-faint);
  background: var(--sl-surface-container);
}

.radio-option:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--sl-ring);
}

.radio-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--sl-outline);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  transition: border-color var(--sl-dur-fast), background-color var(--sl-dur-fast);
  position: relative;
}

.radio-option input[type="radio"]:checked {
  border-color: var(--sl-ink-strong);
  background: var(--sl-ink-strong);
}

.radio-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--sl-surface);
}

.radio-option.selected {
  border-color: var(--sl-ink-strong);
  background: var(--sl-surface-container);
}

.radio-option-label {
  font-size: var(--sl-text-md);
  line-height: 1.5;
  color: var(--sl-ink);
}

.radio-group.has-error .radio-option { border-color: var(--sl-danger); }

/* ── Checkbox ─────────────────────────────────────────────── */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 6px;
  border: 2px solid var(--sl-outline);
  background: var(--sl-surface);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  transition: border-color var(--sl-dur-fast), background-color var(--sl-dur-fast);
  position: relative;
}

.checkbox-label:has(input:focus-visible) input[type="checkbox"] {
  box-shadow: 0 0 0 3px var(--sl-ring);
}

.checkbox-label input[type="checkbox"]:checked {
  border-color: var(--sl-ink-strong);
  background: var(--sl-ink-strong);
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px; left: 6px;
  width: 4px; height: 9px;
  border: 2px solid var(--sl-surface);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.checkbox-group.has-error .checkbox-label input[type="checkbox"] { border-color: var(--sl-danger); }

.likert-scale.has-error .likert-options input[type="radio"] { border-color: var(--sl-danger); }

/* Checkbox kecil (kuliah / masih bekerja): native, pakai accent token. */
.form-section label.flex input[type="checkbox"] {
  accent-color: var(--sl-ink-strong);
  width: 18px;
  height: 18px;
}

/* ── Error messages ───────────────────────────────────────── */
/* Pesan generik per field: ditampilkan lewat kelas .visible (JS). */
.field-error {
  display: none;
  margin: 6px 0 0;
  font-size: var(--sl-text-sm);
  line-height: var(--sl-text-sm-lh);
  color: var(--sl-danger);
}

.field-error.visible {
  display: block;
}

/* ── Section navigation ───────────────────────────────────── */
.form-section {
  display: none;
}

.form-section.active {
  display: block;
}

/* Judul panjang dengan garis miring (mis. Kepemilikan/Kepemimpinan) tidak
   boleh mendorong lebar halaman di 360px. */
.form-section { overflow-wrap: break-word; }

/* ── OTP input ────────────────────────────────────────────── */
.otp-input {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--sl-hairline-strong);
  border-radius: var(--sl-radius-input);
  background: var(--sl-surface);
  font-size: 28px;
  letter-spacing: 0.3em;
  text-align: center;
  color: var(--sl-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--sl-font-body);
  transition: border-color var(--sl-dur-fast), box-shadow var(--sl-dur-fast);
}

.otp-input::placeholder { color: var(--sl-ink-faint); letter-spacing: 0.3em; }

.otp-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--sl-ink);
  box-shadow: 0 0 0 3px var(--sl-ring);
}

.otp-input[aria-invalid="true"] {
  border-color: var(--sl-danger);
}

/* ── Alert / info box ─────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--sl-radius-btn);
  font-size: var(--sl-text-base);
  line-height: var(--sl-text-base-lh);
  color: var(--sl-ink);
}

.alert-info {
  background: var(--sl-info-light);
  color: var(--sl-ink);
}
.alert-info strong,
.alert-info .alert-title { color: var(--sl-info); }

/* Panel abu-abu untuk blok isian dan skenario. */
.assessment-panel {
  padding: 16px;
  background: var(--sl-surface-container);
  border-radius: var(--sl-radius-input);
}

/* ── Ukuran teks pertanyaan = ukuran teks jawaban ─────────────
   Prompt skenario, label isian, label pilihan, dan judul grup tidak boleh
   lebih kecil dari jawabannya (16px = --sl-text-md). Utility Tailwind text-sm
   (14px, line-height 20px) dikalahkan selektor dua-kelas di bawah tanpa
   !important. Hanya font-size dan line-height yang diubah; bobot dan warna
   tetap. Konten instrumen (HTML) tidak disentuh. */
.form-section .assessment-panel p.font-semibold.text-sm,
.form-section .assessment-panel label.block.text-sm,
.form-section .assessment-panel label.text-sm,
.form-section .assessment-panel label.flex.text-sm {
  font-size: var(--sl-text-md);
  line-height: var(--sl-text-md-lh);
}

/* Prompt skenario ranking (D, G, H, I) mengikuti gaya prompt pertanyaan lain
   (C.1, E.6): 16px, 600, ink, line-height 1.5. Selektor .ranking-block > p
   menangkap varian dengan dan tanpa .assessment-panel. Nomor "D.1" (p.font-semibold)
   tidak terkena selektor ini. */
.ranking-block > p.font-body-main {
  font-size: var(--sl-text-md);
  font-weight: 600;
  line-height: 1.5;
  color: var(--sl-ink);
}

/* ── Ranking block error (ganti outline inline) ───────────── */
.ranking-block.has-error {
  outline: 2px solid var(--sl-danger);
  outline-offset: 4px;
  border-radius: var(--sl-radius-input);
}

/* ── Stepper pipeline (pipeline.js): status ditolak ───────── */
.sl-step.is-rejected::before {
  content: "\00D7";
  border-color: var(--sl-danger);
  color: var(--sl-danger);
}

.sl-step-note {
  font-size: var(--sl-text-xs);
  font-weight: 500;
  color: var(--sl-ink-soft);
}

/* ── Card hover ───────────────────────────────────────────── */
.card-hover {
  transition: border-color var(--sl-dur) var(--sl-ease-out), box-shadow var(--sl-dur) var(--sl-ease-out);
}

.card-hover:hover {
  border-color: var(--sl-hairline-strong);
  box-shadow: var(--sl-shadow-lift);
}

/* ── Peringatan tab (anti-cheat.js) ─────────────────────── */
.tab-warning-body { text-align: center; }

.tab-warning-icon {
  display: block;
  margin: 0 auto 12px;
  color: var(--sl-warning);
}

/* ── Login (index.html) ───────────────────────────────────── */
.auth-card {
  padding: 32px;
}

.auth-header {
  padding: 16px 24px;
  background: var(--sl-surface);
  border-bottom: 1px solid var(--sl-hairline);
}

.auth-header .sl-lockup { min-height: 44px; }

/* auth.js menambah .visible saat error; aria-invalid juga menampilkannya
   lewat aturan .sl-error di theme.css. */
.sl-error.visible { display: block; }

.auth-hint {
  margin: 8px 0 0;
  font-size: var(--sl-text-sm);
  line-height: var(--sl-text-sm-lh);
  color: var(--sl-ink-soft);
}

@media (max-width: 640px) {
  .auth-card { padding: 24px 20px; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .likert-scale {
    flex-direction: column;
    align-items: flex-start;
  }

  .likert-options {
    gap: 4px;
  }

  .likert-options label {
    min-width: 44px;
  }

  .likert-options input[type="radio"] {
    width: 28px;
    height: 28px;
  }

  .anchor-left,
  .anchor-right {
    max-width: 100%;
  }

  .assessment-header-title { font-size: var(--sl-text-sm); }

  /* Nama perusahaan sudah ada di kartu profil; header hanya memuat merek. */
  .assessment-header #nav-company { display: none; }
  .assessment-header .sl-lockup span { font-size: 17px; }
}

@media (max-width: 360px) {
  .likert-options { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill,
  .sortable-item,
  .radio-option,
  .card-hover { transition: none; }
}


/* ── Add-On Music Instructor (js/addon-mi.js) ───────────────── */
.mi-item { scroll-margin-top: 80px; }

.mi-figure {
  display: flex;
  justify-content: center;
  padding: 12px;
  margin: 4px 0 16px;
  border: 1px solid var(--sl-hairline);
  border-radius: var(--sl-radius-btn);
  background: var(--sl-surface);
}

.mi-figure img {
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Berkas SVG hitam di atas transparan; dimuat lewat <img> sehingga tidak
   mewarisi warna teks. Mode gelap membalik tinta. */
:root[data-theme="dark"] .mi-figure img { filter: invert(1); }

.mi-unavailable .mi-figure { opacity: 0.5; }

.mi-unavailable-note {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.mi-number { max-width: 140px; }

.mi-scenario {
  padding: 12px 14px;
  border-left: 3px solid var(--sl-outline);
  background: var(--sl-surface-container);
  border-radius: var(--sl-radius-btn);
  margin-bottom: 4px;
}

.mi-multi .radio-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--sl-ink-strong);
  cursor: pointer;
}

.mi-sjt-option {
  padding: 12px 14px;
  border: 1px solid var(--sl-hairline-strong);
  border-radius: var(--sl-radius-btn);
  background: var(--sl-surface);
  margin-bottom: 8px;
}

.mi-sjt-text { margin: 0 0 10px; }

.mi-sjt-picks {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mi-sjt-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--sl-hairline-strong);
  border-radius: var(--sl-radius-btn);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--sl-dur-fast), background-color var(--sl-dur-fast);
}

.mi-sjt-pick:hover { border-color: var(--sl-ink-faint); background: var(--sl-surface-container); }
.mi-sjt-pick:has(input:checked) { border-color: var(--sl-ink-strong); background: var(--sl-surface-container); }
.mi-sjt-pick:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--sl-ring); }

.mi-sjt-pick input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--sl-ink-strong);
  cursor: pointer;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mi-sjt-pick { transition: none; }
}