/* A long username clamps instead of forcing the row wide (it pushed Status and Actions off
   the card on desktop). On the LINK, not the cell: the moderation pill sits beside it. */
.ra-td-name { white-space: nowrap; }
.ra-td-name .na-title-link {
  display: inline-block; max-width: 160px; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .ra-td-name .na-title-link { max-width: 110px; }
}
.reports-admin-screen .ra-td-name.muted .na-title-link { color: var(--ink-3); }

.ra-kpis { margin-bottom: 14px; }
/* Tiles flow instead of the shared 2-up grid: 4 statuses plus a variable number of categories,
   which two columns stacked into a tall block. On the GRID (kpiGroup's tilesCls), not .ra-kpis. */
/* The date section holds two inputs; keep them stacked rather than side by side. */
.reports-admin-screen [data-fsec="date"] .nl-sel + .nl-sel { margin-top: 6px; }

/* One report on its own page: the report IS the page, not a card in it — same shape as
   `.news-screen .news-article`. One flex-column <article>, dividers instead of boxes, children
   spacing themselves: the shell forces `.screen` to display:block, so a gap here would be inert. */
.ra-detail-screen .ra-detail { display: flex; flex-direction: column; }
.ra-detail-screen .ra-detail-back { align-self: flex-start; margin-bottom: 18px; }
.ra-detail-screen .ra-detail-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 18px; margin-bottom: 20px;
}
.ra-detail-screen .ra-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ra-detail-screen .ra-detail-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.2; color: var(--ink);
  margin: 0;
}
/* Own line under the title+tags row. */
.ra-detail-screen .ra-detail-meta {
  flex: 0 0 100%;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  color: var(--ink-3); font-size: 0.82rem;
}

.ra-cat, .ra-status, .ra-mod {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; white-space: nowrap;
}
.ra-cat-cheating     { background: color-mix(in srgb, var(--porphyry) 20%, transparent); color: var(--porphyry-2); }
.ra-cat-abuse        { background: color-mix(in srgb, var(--porphyry) 20%, transparent); color: var(--porphyry-2); }
.ra-cat-scam         { background: color-mix(in srgb, var(--amethyst) 20%, transparent); color: var(--amethyst-2); }
.ra-cat-bad_language { background: color-mix(in srgb, var(--bronze) 20%, transparent); color: var(--bronze-2); }
.ra-cat-other        { background: var(--bg-3); color: var(--ink-2); }
.ra-status-open      { background: color-mix(in srgb, var(--lapis) 20%, transparent); color: var(--lapis-2); }
.ra-status-reviewing { background: color-mix(in srgb, var(--bronze) 20%, transparent); color: var(--bronze-2); }
.ra-status-resolved  { background: color-mix(in srgb, var(--laurel) 20%, transparent); color: var(--laurel-2); }
.ra-status-dismissed { background: var(--bg-3); color: var(--ink-3); }
.ra-mod-ban  { background: var(--porphyry); color: #fff; }
.ra-mod-susp { background: color-mix(in srgb, var(--porphyry) 22%, transparent); color: var(--porphyry-2); }

.ra-detail-lbl { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ra-detail-screen .ra-detail-reason {
  margin: 6px 0 0;
  white-space: pre-wrap; color: var(--ink-2);
  font-size: 1.02rem; line-height: 1.7;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 14px 16px;
  flex: 1 1 auto;
}

.ra-chat { margin: 12px 0; }
.ra-chat-box {
  max-height: 220px; overflow-y: auto; margin: 6px 0;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 8px;
}
.ra-chat-line { display: flex; gap: 8px; padding: 3px 0; font-size: 0.85rem; }
.ra-chat-from { flex: none; font-weight: 700; color: var(--bronze-2); }
.ra-chat-text { color: var(--ink); white-space: pre-wrap; word-break: break-word; }

.ra-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Moderation is a rail beside the report: same geometry and 1024px stack point as .nl-layout,
   same panel treatment as .bf-filters-rail. */
.ra-detail-screen .ra-detail-cols {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 20px;
}
.ra-detail-screen .ra-detail-main { min-width: 0; display: flex; flex-direction: column; }
.ra-detail-screen .ra-mod-section {
  align-self: start;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 16px;
}
@media (max-width: 1024px) {
  .ra-detail-screen .ra-detail-cols { grid-template-columns: minmax(0, 1fr); }
  /* Report first when stacked — destructive controls must not sit above what you read to decide. */
  .ra-detail-screen .ra-mod-section { order: 2; }
}
.ra-mod-head { padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.ra-mod-group { padding: 14px 0; }
.ra-mod-group + .ra-mod-group { border-top: 1px solid var(--divider); }
.ra-mod-group > * + * { margin-top: 8px; }
.ra-mod-note { padding-top: 14px; border-top: 1px solid var(--divider); }
.ra-mod-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ra-mod-row > .btn { flex: 1 1 auto; }
.ra-dur, .ra-del-confirm { width: 100%; min-width: 0; }