/* ============================================================
   ROLLIT — REPORTS  (css/reports.a9fc9ea5.css)
   The report modal, plus the small flag affordances that open it.
   Tokens only, so it follows the light theme without a second ruleset.
   ============================================================ */

.rp-bg {
  position: fixed; inset: 0; z-index: 1260;      /* above the frame modal (1210) — it opens FROM it */
  background: rgba(4, 5, 9, 0.74);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  opacity: 0; transition: opacity .16s ease;
}
.rp-bg.open { opacity: 1; }
.rp-modal {
  width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto;
  background: var(--bg2); border: 0.5px solid var(--border2); border-radius: 16px;
  transform: translateY(8px) scale(.99); transition: transform .18s ease;
}
.rp-bg.open .rp-modal { transform: none; }

.rp-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 14px 10px; border-bottom: 0.5px solid var(--border);
}
.rp-title { font-size: 15px; font-weight: 700; color: var(--text); }
.rp-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rp-x {
  margin-left: auto; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: none; background: var(--surface); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rp-x:hover { color: var(--text); }

/* The thing being reported, quoted back — a moderator sees this text, so the
   reporter should too before they send it. */
.rp-quote {
  margin: 12px 14px 0; padding: 8px 10px; border-left: 2px solid var(--border2);
  background: var(--bg3); border-radius: 0 8px 8px 0;
  font-size: 12px; line-height: 1.45; color: var(--muted);
  word-break: break-word;
}

.rp-reasons { display: flex; flex-direction: column; padding: 10px 8px 2px; }
.rp-reason {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 10px; background: none;
  text-align: left; cursor: pointer; color: var(--text);
}
.rp-reason:hover { background: var(--surface); }
.rp-reason.on { background: var(--surface2); }
.rp-reason-dot {
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--dim); transition: border-color .12s ease, box-shadow .12s ease;
}
.rp-reason.on .rp-reason-dot {
  border-color: var(--flop);
  box-shadow: inset 0 0 0 3.5px var(--flop);
}
.rp-reason-txt { min-width: 0; }
.rp-reason-txt strong { display: block; font-size: 13px; font-weight: 600; }
.rp-reason-txt small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Only shown for the self-harm reason. Deliberately not a scare box — it's the
   one reason where the most useful thing we can say isn't about the post. */
.rp-care {
  margin: 6px 14px 0; padding: 9px 11px; border-radius: 10px;
  background: var(--surface); border: 0.5px solid var(--border2);
  font-size: 11.5px; line-height: 1.5; color: var(--muted);
}

.rp-detail-label {
  display: block; padding: 14px 14px 6px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.rp-detail-label span { font-weight: 400; color: var(--muted); }
.rp-detail {
  display: block; width: calc(100% - 28px); margin: 0 14px; padding: 9px 10px;
  background: var(--bg3); border: 0.5px solid var(--border2); border-radius: 10px;
  color: var(--text); font: inherit; font-size: 13px; resize: vertical;
}
.rp-detail:focus { outline: none; border-color: var(--dim); }

.rp-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px; margin-top: 4px;
}
.rp-btn {
  padding: 8px 14px; border-radius: 999px; border: 0.5px solid var(--border2);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.rp-btn-ghost { background: none; color: var(--muted); }
.rp-btn-ghost:hover { color: var(--text); background: var(--surface); }
.rp-btn-go { background: var(--flop); border-color: var(--flop); color: #fff; }
.rp-btn-go:disabled { opacity: .4; cursor: not-allowed; }

.rp-done { padding: 22px 18px; text-align: center; color: var(--muted); }
.rp-done i { font-size: 30px; color: var(--toproll); }
.rp-done p { font-size: 12.5px; line-height: 1.55; margin: 8px auto 0; max-width: 30ch; }
.rp-done-lg h3 { font-size: 15px; color: var(--text); margin: 10px 0 0; }

/* ---- the affordances that open it ---- */

/* Inline flag on a comment row: invisible until the row is hovered, like the
   author's own delete button next to it, so a thread isn't a wall of flags. */
.rp-inline {
  flex: 0 0 auto; width: 22px; height: 22px; border: none; border-radius: 50%;
  background: none; color: var(--dim); cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.fv-cm:hover .rp-inline,
.feed-cmt:hover .rp-inline,
.feed-item:hover .rp-take,
.rp-inline:focus-visible { opacity: 1; }
/* The take's flag rides at the end of the quote rather than in a button row —
   there isn't one, and a take is a single line of text. */
.rp-take { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.rp-inline:hover { color: var(--flop); }
.rp-inline.is-done { opacity: 1; color: var(--flop); }
/* Touch has no hover, so the flag would never appear. */
@media (hover: none) { .rp-inline { opacity: 1; } }

/* ---- BLOCKS ---- */

/* Report and Block sit in the profile action row alongside Watch, so they borrow
   .privacy-toggle's shape and only restate what differs. They stay NEUTRAL at
   rest — they're the quiet options next to Watch, not calls to action — and only
   pick up the red on hover, or permanently once a block is in force. */
.prof-report, .prof-block { color: var(--muted); }
.prof-report:hover, .prof-block:hover { color: var(--flop); border-color: rgba(232, 77, 99, .35); }
.prof-block.is-blocked { color: var(--flop); border-color: rgba(232, 77, 99, .35); }
.prof-block.is-blocked:hover { color: var(--text); border-color: var(--border2); }

/* Shown in place of the tabs on a profile you blocked. The profile still opens
   — you have to be able to reach it to undo the block. */
.profile-blocked {
  max-width: 420px; margin: 2.5rem auto; padding: 26px 20px; text-align: center;
  background: var(--bg2); border: 0.5px solid var(--border2); border-radius: 16px;
}
.profile-blocked i { font-size: 30px; color: var(--muted); }
.profile-blocked h3 { font-size: 15px; color: var(--text); margin: 10px 0 6px; }
.profile-blocked p { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---- the blocked list in Settings ---- */
.blk-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.blk-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg3); border: 0.5px solid var(--border); border-radius: 10px;
}
.blk-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.blk-name small { display: block; font-size: 11px; color: var(--muted); }
.blk-empty { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
/* Settings doesn't load admin.css, so the row's button carries its own shape. */
.blk-btn {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 6px 11px; border-radius: 7px; border: 1px solid var(--border2);
  background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.blk-btn:hover { border-color: var(--muted); }