/* ═══════════════════════════════════════════════════════════════
   CRAFT Accountability — page-specific styles
   (design tokens + shared components come from styles.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── rating pills ── */
.rpill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font: 800 10.5px var(--font-body);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.r-exc { background: #E7F6EC; color: #14672F; }
.r-sat { background: #E8F0FE; color: #1D46BC; }
.r-ni  { background: #FDECEC; color: #A33A3A; }
.r-na  { background: #EEF1F8; color: #5D6785; }
.r-none { background: transparent; color: #B9C1D6; padding-left: 4px; }

/* ── review matrix ── */
.craft-matrix td { white-space: nowrap; }
.craft-matrix .t-name b { font-size: 13.5px; }
.craft-matrix .t-class, .t-class { color: var(--muted); font-weight: 700; }
.craft-matrix .t-admin { color: var(--muted); font-size: 12px; }

.craft-matrix tr.row-ni td:first-child { box-shadow: inset 3px 0 0 var(--c-red); }

.craft-matrix tr.ghost td {
  color: var(--muted);
  font-style: italic;
  font-weight: 700;
  background: #FAFBFE;
}

.chat-ic {
  display: inline-block;
  color: var(--c-gold);
  margin-left: 7px;
  vertical-align: -3px;
  cursor: help;
}
.chat-ic svg { width: 14px; height: 14px; display: inline-block; }

/* ── administrator feedback ── */
.cm-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px dashed #EBDFB5;
  font-size: 13.5px;
}
.cm-row:last-child { border-bottom: none; }
.cm-row b { white-space: nowrap; color: #4C3A05; }
.cm-row .cm-text { font-weight: 700; color: #4C3A05; min-width: 0; }
.cm-row .cm-meta { margin-left: auto; color: #8A6100; font-size: 11px; font-weight: 800; white-space: nowrap; }

/* ── leaderboard trend arrows ── */
.tr-up   { color: #14672F; font-weight: 800; }
.tr-dn   { color: #A33A3A; font-weight: 800; }
.tr-flat { color: #B9C1D6; font-weight: 800; }

/* ── layout tweaks ── */
@media (max-width: 1080px) {
  /* comments + trends stack (duo-grid already collapses in styles.css) */
}

@media print {
  #commentsPanel, #trendsPanel { break-inside: avoid; }
}