/* Boss-quiz question types (uses the theme tokens from css/styles/) */
.boss-kinds {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}
.boss-aside {
  font-size: 14.5px;
}
.q-fig {
  margin: 4px 0 14px;
}
.q-fig:empty {
  display: none;
}
.q-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.q-correct {
  margin-top: 10px;
  font-weight: 700;
  color: var(--text-dim);
}
.q-hint {
  margin-top: 12px;
}
.q-hint-t {
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--amber-dim);
  border: 2px solid var(--amber-edge);
  color: var(--amber-ink);
  font-weight: 700;
}
.q-hint-t::before {
  content: "Nudge · ";
  font-weight: 900;
}

/* multi */
.opt-box {
  border-radius: 7px;
}
.predict .opt.multi.sel {
  border-color: var(--blue-edge);
  background: var(--blue-dim);
  box-shadow: 0 var(--lip) 0 var(--blue-edge);
}
.predict .opt.multi.sel .opt-box {
  background: var(--blue);
  border-color: var(--blue);
}
.predict .opt.multi.sel .opt-box::after {
  content: "✓";
  color: var(--blue-on);
}
.predict .opt.missed {
  border-style: dashed;
  border-color: var(--teal);
}
.predict .opt.missed .opt-l::after {
  content: "!";
  color: var(--teal-ink);
}

/* num + slider */
.q-num {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.q-num input {
  width: 180px;
  font-size: 18px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 14px;
  border: 2px solid var(--line);
}
.q-num input:focus {
  border-color: var(--blue-edge);
  outline: none;
}
.q-num input.right {
  border-color: var(--teal);
  background: var(--teal-dim);
  color: var(--teal-ink);
}
.q-num input.wrong {
  border-color: var(--rose);
  background: var(--rose-dim);
  color: var(--rose-ink);
}
.q-unit {
  font-weight: 800;
  color: var(--text-dim);
}
.q-slider {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: var(--panel);
}
.q-slider input {
  flex: 1;
  width: auto;
  accent-color: var(--blue);
}
.q-slider output {
  min-width: 90px;
  text-align: right;
  font-size: 20px;
  font-weight: 900;
  color: var(--blue-ink);
}
.q-slider.right {
  border-color: var(--teal);
  background: var(--teal-dim);
}
.q-slider.wrong {
  border-color: var(--rose);
  background: var(--rose-dim);
}
.q-live {
  margin-top: 12px;
}
.q-live:empty {
  display: none;
}

/* order */
.qo-slots {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.qo-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 2px dashed var(--line-2);
  background: var(--bg-2);
  transition:
    border-color var(--dur-2) ease,
    background-color var(--dur-2) var(--ease-out);
}
.qo-slot.filled {
  border-style: solid;
  border-color: var(--blue-edge);
  background: var(--blue-dim);
}
.qo-slot.right {
  border-style: solid;
  border-color: var(--teal);
  background: var(--teal-dim);
}
.qo-slot.wrong {
  border-style: solid;
  border-color: var(--rose);
  background: var(--rose-dim);
}
.qo-n {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--panel);
  border: 2px solid var(--line);
  font-weight: 900;
  font-size: 13px;
}
.qo-v {
  font-weight: 700;
}
.qo-fix {
  font-weight: 800;
  color: var(--teal-ink);
  margin-left: 6px;
}
.qo-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-btn {
  appearance: none;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  transition:
    transform var(--dur-1) ease-out,
    box-shadow var(--dur-1) ease-out,
    opacity var(--dur-2) ease;
}
.chip-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--line);
}
.chip-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* match */

/* cat */
.q-match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.qm-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.qm-t {
  appearance: none;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 3px 0 var(--line);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition:
    transform var(--dur-1) ease-out,
    box-shadow var(--dur-1) ease-out,
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) ease;
}
.qm-t:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--line);
}
.qm-t.sel {
  border-color: var(--blue-edge);
  background: var(--blue-dim);
  box-shadow: 0 3px 0 var(--blue-edge);
}
.qm-t.right {
  border-color: var(--teal);
  background: var(--teal-dim);
  box-shadow: 0 3px 0 var(--teal-edge);
}
.qm-t.wrong {
  border-color: var(--rose);
  background: var(--rose-dim);
  box-shadow: 0 3px 0 var(--rose-edge);
}
.qm-fix {
  display: block;
  margin-top: 4px;
  font-weight: 800;
  color: var(--teal-ink);
  font-size: 13px;
}
.q-cat {
  display: grid;
  gap: 8px;
}
.qc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--panel);
}
.qc-t {
  flex: 1 1 260px;
  font-weight: 700;
}
@media (max-width: 640px) {
  .qc-row {
    padding: 6px 10px;
    gap: 8px;
  }
  .qc-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    gap: 6px;
  }
}
.qc-seg button.right {
  background: var(--teal);
  color: var(--teal-on);
}
.qc-seg button.wrong {
  background: var(--rose);
  color: var(--rose-on);
}
.qc-row.right {
  border-color: var(--teal-edge);
}
.qc-row.wrong {
  border-color: var(--rose-edge);
}

/* bug */
.q-code {
  border-radius: 16px;
  border: 2px solid var(--line);
  overflow: hidden;
  background: var(--bg-2);
}
.qc-line {
  appearance: none;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  text-align: left;
  font: inherit;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
}
.qc-line:last-child {
  border-bottom: 0;
}
.qc-line code {
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
  font-size: 13.5px;
}
.qc-n {
  width: 22px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
}
@media (hover: hover) and (pointer: fine) {
  .qc-line:hover:not(:disabled) {
    background: var(--blue-dim);
  }
}
.qc-line:disabled {
  cursor: default;
}
.qc-line.right {
  background: var(--teal-dim);
}
.qc-line.wrong {
  background: var(--rose-dim);
}

.qm-t.good {
  border-color: var(--teal);
  background: var(--teal-dim);
  box-shadow: 0 3px 0 var(--teal-edge);
  color: var(--teal-ink);
}
.qm-t.bad {
  border-color: var(--rose);
  background: var(--rose-dim);
  box-shadow: 0 3px 0 var(--rose-edge);
  color: var(--rose-ink);
}
.qm-t.gone {
  opacity: 0.45;
  background: var(--bg-2);
  color: var(--text-faint);
  box-shadow: 0 0 0 var(--line);
  transform: translateY(3px);
} /* transition: css/motion.css */
.qm-t.shown {
  opacity: 0.75;
}