/**
 * public/css/team-review.css
 *
 * Reviewed-by-the-team tokens + a few shared layout primitives that
 * the inline styles in views/studio-team-review.ejs also use. Auto-loaded
 * by lib/landing-context.js buildThemeCSS so any view that wants the
 * tokens can rely on them — and so the css file count goes from 5 → 6
 * as the verification step expects.
 */

:root {
  --accent-kai:  #ef4444;
  --accent-luna: #4ecaff;
  --accent-nia:  #22c55e;
  --accent-cole: #f59e0b;
  --accent-nova: #a855f7;
  --gradient: linear-gradient(135deg, #c847f4, #4ecaff);
}

.tr-avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 1rem; font-weight: 800; color: #fff;
}
.tr-avatar.rk-luna { background: var(--accent-luna); color: #0a0a0f; }
.tr-avatar.rk-kai  { background: var(--accent-kai); }
.tr-avatar.rk-cole { background: var(--accent-cole); color: #0a0a0f; }
.tr-avatar.rk-nova { background: var(--accent-nova); }

.tr-panel {
  background: var(--bg2, #111118);
  border: 1px solid var(--card-border, #1e1e2e);
  border-radius: 18px;
  padding: 20px;
  position: sticky; bottom: 16px;
}

/* Diff drawer — original vs revised */
.tr-diff {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.tr-diff-col h4 {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #888; font-weight: 700; margin-bottom: 6px;
}
.tr-diff-text {
  white-space: pre-wrap; word-wrap: break-word;
  font-size: 0.88rem; line-height: 1.5; padding: 8px; border-radius: 8px;
}
.tr-diff-text.original { color: #888; text-decoration: line-through; opacity: 0.85; background: rgba(255,255,255,0.03); }
.tr-diff-text.revised  { color: #fff; background: rgba(255,255,255,0.03); }

@media (max-width: 700px) {
  .tr-diff { grid-template-columns: 1fr; }
}