/*
 * Feedback states.
 *
 * Every state carries an icon, a text label and a selection marker, so none of
 * this information depends on colour. The tone classes only tint what is
 * already legible without them.
 */

/* --- overall verdict --- */

.verdict {
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.verdict__head { display: flex; align-items: center; gap: var(--space-2); }
.verdict__icon { font-size: 1.1rem; line-height: 1; }
.verdict__title { font-size: 1.05rem; }
.verdict__detail { font-size: var(--size-small); }
.verdict__note { font-size: var(--size-tiny); color: var(--color-muted); margin-top: var(--space-1); }

.verdict--correct { background: var(--correct-soft); border-color: var(--correct-line); }
.verdict--correct .verdict__icon, .verdict--correct .verdict__title { color: var(--correct); }

.verdict--partial { background: var(--not-recommended-soft); border-color: var(--not-recommended-line); }
.verdict--partial .verdict__icon, .verdict--partial .verdict__title { color: var(--not-recommended); }

.verdict--incorrect { background: var(--incorrect-soft); border-color: var(--incorrect-line); }
.verdict--incorrect .verdict__icon, .verdict--incorrect .verdict__title { color: var(--color-text); }

/* --- reviewed option rows --- */

.answer--reviewed {
  display: block;
  cursor: default;
  border-left-width: 3px;
  padding: var(--space-3) var(--space-4);
}
.answer--reviewed:hover { border-color: var(--color-border); background: transparent; }

.answer__status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--size-tiny);
  margin-bottom: var(--space-1);
}

.answer__icon { font-size: 0.95rem; line-height: 1; }

.answer__severity {
  font-weight: 680;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* Selection state is a separate chip from the severity label, so "you did not
   select this" can never be read as "this was wrong" or vice versa. */
.answer__selection {
  padding: 1px var(--space-2);
  border-radius: 999px;
  background: var(--color-surface-sunken);
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.7rem;
}

.answer__selection[data-selection="chose"] {
  background: var(--color-text);
  color: var(--color-surface);
}

.answer--reviewed .answer__text { font-weight: 560; margin-bottom: var(--space-1); }

.answer__explanation {
  font-size: var(--size-small);
  color: var(--color-muted);
  line-height: 1.55;
  max-width: var(--measure);
}

/* Correctly avoided options sit at lower visual weight, but their verdict and
   explanation stay fully visible and fully readable — dimming them out of
   existence is how V03 hid the most useful teaching in the whole screen. */
.answer--quiet { opacity: 0.78; }
.answer--quiet:focus-visible, .answer--quiet:hover { opacity: 1; }

.answer--correct { border-color: var(--correct-line); border-left-color: var(--correct); background: var(--correct-soft); }
.answer--correct .answer__severity, .answer--correct .answer__icon { color: var(--correct); }

.answer--missed { border-color: var(--missed-line); border-left-color: var(--missed); background: var(--missed-soft); }
.answer--missed .answer__severity, .answer--missed .answer__icon { color: var(--missed); }

.answer--worth-considering { border-color: var(--worth-line); border-left-color: var(--worth); background: var(--worth-soft); }
.answer--worth-considering .answer__severity, .answer--worth-considering .answer__icon { color: var(--worth); }

.answer--incorrect { border-color: var(--incorrect-line); border-left-color: var(--incorrect); background: var(--incorrect-soft); }
.answer--incorrect .answer__severity, .answer--incorrect .answer__icon { color: var(--incorrect); }

.answer--not-recommended { border-color: var(--not-recommended-line); border-left-color: var(--not-recommended); background: var(--not-recommended-soft); }
.answer--not-recommended .answer__severity, .answer--not-recommended .answer__icon { color: var(--not-recommended); }

.answer--unsafe { border-color: var(--unsafe-line); border-left-color: var(--unsafe); background: var(--unsafe-soft); }
.answer--unsafe .answer__severity, .answer--unsafe .answer__icon { color: var(--unsafe); }

/* Avoided variants: the severity colour survives on the rule and the label,
   the fill does not. */
.answer--avoided-incorrect { border-left-color: var(--incorrect); }
.answer--avoided-incorrect .answer__severity, .answer--avoided-incorrect .answer__icon { color: var(--incorrect); }

.answer--avoided-not-recommended { border-left-color: var(--not-recommended); }
.answer--avoided-not-recommended .answer__severity, .answer--avoided-not-recommended .answer__icon { color: var(--not-recommended); }

.answer--avoided-unsafe { border-left-color: var(--unsafe); }
.answer--avoided-unsafe .answer__severity, .answer--avoided-unsafe .answer__icon { color: var(--unsafe); }

/* --- key takeaway --- */

.takeaway {
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
}

.takeaway__title {
  font-size: var(--size-tiny);
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: var(--space-2);
}

.takeaway__body { max-width: var(--measure); }

@media (prefers-reduced-motion: no-preference) {
  .verdict, .answer--reviewed { animation: reveal 0.22s ease both; }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
}

/*
 * Windows high contrast and other forced-colors modes replace the palette
 * entirely, which removes every tint and border colour these states rely on.
 * The icon and the text label survive on their own, so the only thing needed
 * here is a structural boundary that the forced palette will actually paint.
 */
@media (forced-colors: active) {
  .answer--reviewed {
    border: 1px solid CanvasText;
    border-left-width: 4px;
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
  }

  .answer--quiet { opacity: 1; }

  .answer__selection {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .answer__selection[data-selection="chose"] {
    background: Highlight;
    color: HighlightText;
  }

  .verdict { border: 2px solid CanvasText; background: Canvas; color: CanvasText; }
  .progress__bar { background: Highlight; }
  .progress__track { border: 1px solid CanvasText; }
}