/* The example feedback card (academy/_feedback_example.html). Shared by the
   course page and the CPD landing. Its tokens (--oa-in-range, the dark
   remap) come from _shared.css, so a page using it loads that too. */

/* The example: the real review's vocabulary, at card size. */
.feedback-example {
  margin: 0;
  padding: var(--oa-space-4);
  border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius-lg);
  background: var(--oa-surface);
}

.feedback-example__caption {
  margin-block-end: var(--oa-space-3);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--oa-ink-soft);
}

.feedback-example__eyebrow {
  display: block;
  margin-block-end: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oa-muted);
}

.feedback-example__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  border-radius: var(--oa-radius-md);
  background: #000;
}

.feedback-example__link {
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 8 6;
  opacity: 0.9;
}

.feedback-example__reference {
  r: 13;
  fill: none;
  stroke: var(--oa-in-range);
  stroke-width: 4;
}

.feedback-example__placed {
  r: 8;
  fill: var(--oa-accent);
  stroke: #fff;
  stroke-width: 3;
}

.feedback-example__label {
  font: 700 34px system-ui, sans-serif;
  fill: #fff;
  stroke: rgba(0, 0, 0, 0.75);
  stroke-width: 6;
  paint-order: stroke;
}

.feedback-example__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oa-space-4);
  margin-block-start: var(--oa-space-3);
  font-size: 0.84rem;
  color: var(--oa-muted);
}

.feedback-example__key { display: inline-flex; align-items: center; gap: 7px; }

.feedback-example__key::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.feedback-example__key--reference::before { border: 2px solid var(--oa-in-range); }
.feedback-example__key--placed::before { background: var(--oa-accent); }

.feedback-example__list {
  display: flex;
  gap: var(--oa-space-2);
  margin: var(--oa-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.feedback-example__list li {
  display: flex;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--oa-radius-pill);
  background: var(--oa-surface-sunken);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.feedback-example__list b { color: var(--oa-ink); }
.feedback-example__list span { color: var(--oa-muted); }