/* fallow-ignore-file unused-file */
/*
 * Styles for the markup rendered by result-view.js (student page and admin
 * page both link this). Class prefix `rv-`. Colors come from the host page's
 * custom properties; defaults are provided here so the file also works
 * standalone.
 */

.rv-root,
:root {
  --ink: #1a1d23;
  --muted: #5c6470;
  --line: #d8dce3;
  --accent: #1d4ed8;
  --surface: #ffffff;
  --backdrop: #f2f4f7;
  --ok: #15803d;
  --ok-soft: #ecfdf3;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --bad: #b91c1c;
  --bad-soft: #fef2f2;
}

.rv-verdict,
.rv-locus,
.rv-criteria,
.rv-recommendations,
.rv-notes {
  margin: 0 0 2rem;
}

.rv-missing {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--bad);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--bad-soft);
  color: var(--bad);
  font-weight: 600;
  font-size: 1.05rem;
}

.rv-inferred {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  border-left: 4px solid var(--warn);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--warn-soft);
  color: var(--warn);
}

/* Failure state (admin detail rows, load errors): sibling of rv-missing
   with a quieter voice — the text is supplied by the caller. Stored error
   details can be long and space-free, so force wrapping. */
.rv-failed {
  margin: 0;
  padding: 0.7rem 1rem;
  border-left: 4px solid var(--bad);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--bad-soft);
  color: var(--bad);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.rv-band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.rv-band {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.15rem 0.7rem;
  border-radius: 0.4rem;
  background: var(--backdrop);
  border: 1px solid var(--line);
}

.rv-band-strong {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: var(--ok);
}

.rv-band-adequate {
  color: var(--accent);
  background: #eff6ff;
  border-color: var(--accent);
}

.rv-band-weak {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: var(--warn);
}

.rv-band-very-weak {
  color: var(--bad);
  background: var(--bad-soft);
  border-color: var(--bad);
}

.rv-score {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rv-verdict-text {
  margin: 0;
  font-size: 1.05rem;
}

.rv-section-title {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
}

.rv-locus-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0 0 0.75rem;
}

.rv-locus-meta dt {
  color: var(--muted);
  font-size: 0.85rem;
}

.rv-locus-meta dd {
  margin: 0;
  font-size: 0.95rem;
}

.rv-locus-label {
  margin: 0 0 0.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Quotes are verbatim document text — never italicized (Thai script has no
   italic tradition; italicized Thai renders as faux-oblique). */
.rv-locus-excerpt,
.rv-quote {
  margin: 0;
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 3px solid var(--line);
  color: var(--ink);
  background: transparent;
}

.rv-criterion-list,
.rv-recommendation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.rv-criterion {
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
}

.rv-criterion-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.rv-criterion-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.rv-criterion-id {
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rv-criterion-score {
  color: var(--muted);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rv-meter {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}

.rv-cell {
  height: 0.45rem;
  flex: 0 0 1.6rem;
  border-radius: 0.15rem;
  background: #e3e7ee;
  border: 1px solid var(--line);
}

.rv-cell-filled {
  background: var(--accent);
  border-color: var(--accent);
}

.rv-justification {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink);
}

.rv-evidence-block {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.rv-evidence-heading {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.rv-evidence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.rv-evidence {
  border-radius: 0.45rem;
  padding: 0.6rem 0.8rem;
}

.rv-evidence-weak {
  background: var(--warn-soft);
  border: 1px solid #f5d48f;
}

.rv-evidence-strong {
  background: var(--ok-soft);
  border: 1px solid #b7e2c4;
}

.rv-evidence-kind {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rv-evidence-weak .rv-evidence-kind {
  color: var(--warn);
}

.rv-evidence-strong .rv-evidence-kind {
  color: var(--ok);
}

.rv-evidence .rv-quote {
  font-size: 0.9rem;
  border-left-color: currentColor;
  opacity: 0.85;
}

.rv-reason {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
}

.rv-rewrite {
  margin: 0.45rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px dashed #f0d9a8;
  font-size: 0.88rem;
}

.rv-rewrite-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--warn);
  margin-bottom: 0.15rem;
}

.rv-priority {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--backdrop);
  border: 1px solid var(--line);
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.rv-priority-high {
  color: var(--bad);
  border-color: var(--bad);
  background: var(--bad-soft);
}

.rv-recommendation-text {
  margin: 0;
  font-size: 0.95rem;
}

.rv-notes p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}