/* ================================================================
   Commentat Admin — admin.commentat.net
   Dependency-free. Neutral admin surfaces + brand accent for chrome.
   Data colours come from the validated categorical palette (charts.js).
   ================================================================ */

:root {
  color-scheme: light;

  /* surfaces & ink */
  --plane:        #F4F3F1;
  --surface:      #FFFFFF;
  --surface-2:    #FAF9F8;
  --border:       #E5E2DD;
  --border-soft:  #EFEDE9;
  --ink:          #14120F;
  --ink-2:        #55504A;
  --ink-muted:    #8A847C;

  /* brand accent (UI chrome only — never data) */
  --accent:       #8E6A4E;
  --accent-hover: #75563E;
  --accent-tint:  #F5ECE3;
  --accent-ring:  rgba(142, 106, 78, .28);

  /* status (fixed, from the validated status palette) */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --good-ink:     #046604;
  --warning-ink:  #7a5300;
  --serious-ink:  #93411c;
  --critical-ink: #96201f;
  --good-bg:     rgba(12,163,12,.10);
  --warning-bg:  rgba(250,178,25,.14);
  --serious-bg:  rgba(236,131,90,.14);
  --critical-bg: rgba(208,59,59,.10);

  /* chart chrome */
  --grid:     #EAE8E3;
  --axis:     #CFCBC4;

  --radius:    12px;
  --radius-lg: 16px;
  --shadow:    0 1px 2px rgba(20,18,15,.05), 0 6px 22px rgba(20,18,15,.06);
  --shadow-lg: 0 12px 44px rgba(20,18,15,.16);
  --sidebar-w: 248px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:        #0D0D0D;
  --surface:      #17161A;
  --surface-2:    #1E1D21;
  --border:       #2C2A2F;
  --border-soft:  #232227;
  --ink:          #F5F2ED;
  --ink-2:        #B9B3AA;
  --ink-muted:    #898781;

  --accent:       #CDBA8E;
  --accent-hover: #E0D0A8;
  --accent-tint:  #26221B;
  --accent-ring:  rgba(205, 186, 142, .30);

  --good-ink:     #4cc94c;
  --warning-ink:  #f5c657;
  --serious-ink:  #f0a483;
  --critical-ink: #e87676;
  --good-bg:     rgba(12,163,12,.16);
  --warning-bg:  rgba(250,178,25,.16);
  --serious-bg:  rgba(236,131,90,.16);
  --critical-bg: rgba(208,59,59,.18);

  --grid:  #2A282C;
  --axis:  #3A383D;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.34);
  --shadow-lg: 0 12px 44px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }

/* ---------------- app shell ---------------- */

.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 16px;
  font-weight: 700; font-size: 17px;
  border-bottom: 1px solid var(--border-soft);
}
.sb-brand svg { width: 28px; height: 28px; flex: none; }
.sb-brand small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-muted); letter-spacing: .04em; }

.sb-nav { padding: 12px 10px; flex: 1; }
.sb-sec { padding: 14px 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink-muted); }

.sb-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; margin-bottom: 2px;
  border-radius: 10px;
  color: var(--ink-2); text-decoration: none;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer;
}
.sb-link:hover { background: var(--surface-2); color: var(--ink); }
.sb-link.active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.sb-link .ic { width: 18px; text-align: center; flex: none; opacity: .9; }
.sb-link .pill {
  margin-inline-start: auto;
  background: var(--critical); color: #fff;
  border-radius: 999px; font-size: 11.5px; font-weight: 700;
  padding: 1px 7px; min-width: 20px; text-align: center;
}

.sb-foot { padding: 14px; border-top: 1px solid var(--border-soft); }

/* ---------------- topbar ---------------- */

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 15;
  background: color-mix(in srgb, var(--plane) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 24px; height: 62px;
}
.topbar h1 { font-size: 19px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.topbar .sp { margin-inline-start: auto; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-size: 15px;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

.content { padding: 24px; max-width: 1440px; width: 100%; }

/* ---------------- primitives ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #fff;
  border: 1px solid transparent; border-radius: 10px;
  padding: 9px 16px; font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
/* Only the filled variant flips to dark ink — ghost/danger keep their own
   colour, otherwise they render as invisible text on a transparent field. */
:root[data-theme="dark"] .btn:not(.ghost):not(.danger) { color: #1B1710; }
.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { padding: 6px 12px; font-size: 13.5px; border-radius: 9px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn.danger { background: var(--critical); color: #fff; }
.btn.danger:hover { background: #b53232; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink-2); }
.input, select.input, textarea.input {
  width: 100%; padding: 9px 13px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-size: 14.5px;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card-h {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
}
.card-h h3 { margin: 0; font-size: 15.5px; font-weight: 700; }
.card-h .sub { font-size: 13px; color: var(--ink-muted); }
.card-h .sp { margin-inline-start: auto; }
.card-b { padding: 20px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 2px 10px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.badge.good     { background: var(--good-bg);     color: var(--good-ink); }
.badge.warning  { background: var(--warning-bg);  color: var(--warning-ink); }
.badge.serious  { background: var(--serious-bg);  color: var(--serious-ink); }
.badge.critical { background: var(--critical-bg); color: var(--critical-ink); }
.badge.neutral  { background: var(--surface-2);   color: var(--ink-2); border: 1px solid var(--border); }

/* ---------------- stat tiles ---------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; }

.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px 14px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
}
.tile .lbl { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.tile .val { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.tile .row { display: flex; align-items: flex-end; gap: 10px; }
.tile .row .sp { margin-inline-start: auto; }
.tile .delta { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.tile .delta.up   { color: var(--good-ink); }
.tile .delta.down { color: var(--critical-ink); }
.tile .delta.flat { color: var(--ink-muted); }
.tile .since { font-size: 12.5px; color: var(--ink-muted); }

.hero-fig { font-size: 52px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }

/* ---------------- table ---------------- */

.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.tbl th {
  text-align: start; font-weight: 600; font-size: 13px;
  color: var(--ink-muted); letter-spacing: .02em;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); white-space: nowrap;
}
table.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl td.num { font-variant-numeric: tabular-nums; }
table.tbl .actions { display: flex; gap: 6px; justify-content: flex-end; }

.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent);
  font-weight: 700; font-size: 13.5px;
}
.who .nm { font-weight: 600; line-height: 1.3; }
.who .sub { font-size: 12.5px; color: var(--ink-muted); line-height: 1.3; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters .input { width: auto; min-width: 180px; }
.filters .grow { flex: 1; min-width: 220px; }

.pager { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-soft); }
.pager .sp { margin-inline-start: auto; }
.pager .info { font-size: 13.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------------- states ---------------- */

.empty { text-align: center; padding: 56px 20px; color: var(--ink-muted); }
.empty .big { font-size: 34px; margin-bottom: 10px; opacity: .55; }
.empty h4 { margin: 0 0 4px; color: var(--ink); font-size: 16px; }

.skel { background: linear-gradient(90deg, var(--border-soft), var(--surface-2), var(--border-soft)); background-size: 200% 100%; animation: sk 1.2s linear infinite; border-radius: 7px; height: 13px; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------------- charts ---------------- */

.chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 20px; }
@media (max-width: 1080px) { .chart-grid { grid-template-columns: 1fr; } }

.legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.legend .item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.legend .key { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* Charts keep an LTR coordinate space even on an RTL page: `text-anchor`
   start/end otherwise flip and detach every label from its mark. Arabic
   runs inside the labels still shape correctly via Unicode bidi. */
.viz { display: block; width: 100%; overflow: visible; direction: ltr; }
.viz .grid-line { stroke: var(--grid); stroke-width: 1; }
.viz .axis-line { stroke: var(--axis); stroke-width: 1; }
.viz .tick { fill: var(--ink-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.viz .dlabel { fill: var(--ink-2); font-size: 12px; font-weight: 600; }

.tooltip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: 9px 12px; font-size: 13px; min-width: 132px;
  opacity: 0; transition: opacity .1s;
}
.tooltip.on { opacity: 1; }
.tooltip .t { font-weight: 700; margin-bottom: 5px; font-size: 12.5px; }
.tooltip .r { display: flex; align-items: center; gap: 8px; }
.tooltip .r .k { width: 9px; height: 9px; border-radius: 2.5px; flex: none; }
.tooltip .r .v { margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg button { background: var(--surface); border: 0; padding: 6px 13px; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.seg button + button { border-inline-start: 1px solid var(--border); }
.seg button.on { background: var(--accent-tint); color: var(--accent); font-weight: 600; }

/* ---------------- modal & toast ---------------- */

.scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(12,10,8,.5);
  display: grid; place-items: center; padding: 20px;
}
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: min(560px, 100%); max-height: 86vh; overflow: auto;
}
.modal .card-b { padding: 22px; }
.modal-f { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid var(--border-soft); }

.toasts { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 90; display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--surface); border: 1px solid var(--border);
  border-inline-start: 3px solid var(--good);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: 11px 16px; font-size: 14px; min-width: 250px;
  animation: tin .18s ease-out;
}
.toast.err { border-inline-start-color: var(--critical); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* ---------------- login ---------------- */

.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login {
  width: min(420px, 100%);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: var(--shadow-lg); padding: 34px;
}
.login .lg { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; font-weight: 700; font-size: 19px; }
.login .lg svg { width: 34px; height: 34px; }
.login p.hint { color: var(--ink-muted); font-size: 14px; margin: 0 0 24px; }

/* ---------------- misc ---------------- */

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.muted { color: var(--ink-muted); }
.sm { font-size: 13.5px; }
.mt { margin-top: 18px; }
.row-flex { display: flex; gap: 10px; align-items: center; }
.hidden { display: none !important; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset-inline-start: 0; top: 0; width: var(--sidebar-w); z-index: 40; transform: translateX(calc(var(--rtl, 1) * -100%)); transition: transform .2s; }
  :root[dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open { transform: none !important; }
  .content { padding: 16px; }
}

/* ================================================================
   Accounts & bots — added with the account-id and bots screens.
   Everything below is additive; no rule above was changed.
   ================================================================ */

/* --- account id chip (copy-to-clipboard) --- */

.copy-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2);
  padding: 1px 6px 1px 8px;
  cursor: pointer; user-select: all;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.copy-chip:hover, .copy-chip:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.copy-chip .ic { font-size: 12px; opacity: .6; }
.copy-chip:hover .ic { opacity: 1; }
.copy-chip.big { padding: 5px 10px 5px 12px; border-radius: 10px; }
.copy-chip.big .val { font-size: 17px; font-weight: 700; letter-spacing: .06em; }

.acc-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--accent-tint); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 12px 14px;
}

/* --- shared small layout bits --- */

.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 620px) { .form-2 { grid-template-columns: 1fr; } }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.kv .v { font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  padding: 1px 9px; font-size: 12.5px; white-space: nowrap;
}
.chip.muted { color: var(--ink-muted); }

.avatar.lg { width: 56px; height: 56px; font-size: 19px; }

/* --- bots --- */

.bot-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--surface-2); border: 1px solid var(--border-soft);
}
.bot-av.lg { width: 64px; height: 64px; }

.bot-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.bot-head .actions { display: flex; gap: 6px; margin-inline-start: auto; }

/* Configuration notice: informative, not an error state. */
.notice {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow);
  padding: 14px 18px; font-size: 14px;
}
.notice .ic { font-size: 16px; line-height: 1.5; flex: none; }
.notice.info { border-color: var(--accent); background: var(--accent-tint); }
.notice.info .ic { color: var(--accent); }
.notice.warn { border-color: var(--warning); background: var(--warning-bg); }

/* The toast stack sits above the modal layer (z-index 90 vs 70) and, in
   RTL, lands exactly on top of the modal's footer buttons — a toast raised
   just before opening a dialog would swallow the click on "confirm".
   Toasts are purely informational, so they take no pointer input. */
.toasts { pointer-events: none; }

/* ================================================================
   Reports review surface & moderation queue — added with reports.js.
   Everything below is additive; no rule above was changed.
   ================================================================ */

/* --- one card per reported target --- */

.rep-list { display: flex; flex-direction: column; gap: 14px; }
.rep-list + .rep-list, .urgent-list { margin-bottom: 18px; }

.rep-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* The rail is a second, non-colour cue on top of the badges: the critical
   category must stay recognisable in greyscale and for colour-blind eyes. */
.rep-card.urgent { border-color: var(--critical); border-inline-start: 4px solid var(--critical); }
.rep-card.urgent .rep-head { background: var(--critical-bg); }

.rep-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.rep-head .sp { margin-inline-start: auto; }

.rep-count {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rep-count.many { color: var(--critical-ink); }

.rep-body { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.rep-txt { min-width: 0; flex: 1; }
.rep-txt p { margin: 0 0 8px; line-height: 1.65; overflow-wrap: anywhere; }

.rep-thumb {
  width: 108px; height: 80px; flex: none;
  border-radius: var(--radius); object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.rep-thumb.ph { display: grid; place-items: center; font-size: 26px; opacity: .8; }

/* --- who reported, and what they wrote --- */

.rep-reporters { border-top: 1px dashed var(--border); padding: 10px 18px; }
.rep-reporters summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  list-style-position: inside;
}
.rep-reporters summary:hover { color: var(--accent); }
.rep-reporters ul { margin: 10px 0 4px; padding: 0; list-style: none; display: grid; gap: 10px; }
.rep-reporters li { border-inline-start: 2px solid var(--border); padding-inline-start: 10px; }
.rep-note { color: var(--ink-2); font-size: 13.5px; margin-top: 3px; overflow-wrap: anywhere; }

.avatar.sm { width: 24px; height: 24px; font-size: 11px; }

/* --- action bar: content actions, then account actions --- */

.rep-actions {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.act-lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-muted); }
.act-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 4px; }

.urgent-head { margin-bottom: 14px; }

/* --- moderation queue --- */

.mod-cell { display: flex; gap: 12px; align-items: flex-start; max-width: 460px; }
.mod-thumb {
  width: 68px; height: 52px; flex: none;
  border-radius: 9px; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.mod-thumb.ph { display: grid; place-items: center; font-size: 20px; opacity: .8; }

/* --- clickable image thumbnails + full-image lightbox ---
   Posts, comments and messages can be reported/held on an image now, not
   only avatars. A thumbnail that has a real image becomes a <button> that
   opens the lightbox; it is made deliberately prominent because a reported
   picture is the fastest, highest-signal thing for a reviewer to act on. */
.rep-thumb.has-img,
.mod-thumb.has-img {
  padding: 0; margin: 0; overflow: hidden; position: relative;
  display: block; cursor: zoom-in;
  -webkit-appearance: none; appearance: none; font: inherit;
}
.rep-thumb.has-img { width: 132px; height: 104px; }   /* larger than the icon tile */
.rep-thumb.has-img > img,
.mod-thumb.has-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-thumb.has-img:hover,
.mod-thumb.has-img:hover { border-color: var(--accent); }
.rep-thumb.has-img:focus-visible,
.mod-thumb.has-img:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the ⛶ zoom hint sits in the corner and lifts on hover */
.thumb-zoom {
  position: absolute; inset-block-end: 4px; inset-inline-end: 4px;
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px; font-size: 12px;
  background: rgba(12,10,8,.62); color: #fff;
  opacity: .85; transition: opacity .15s ease, transform .15s ease;
}
.rep-thumb.has-img:hover .thumb-zoom,
.mod-thumb.has-img:hover .thumb-zoom { opacity: 1; transform: scale(1.08); }

.scrim.lightbox { z-index: 80; background: rgba(12,10,8,.78); cursor: zoom-out; }
.lightbox-fig {
  margin: 0; position: relative; cursor: default;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(920px, 96vw); max-height: 92vh;
}
.lightbox-img {
  max-width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  background: var(--surface-2);
}
.lightbox-cap {
  color: #fff; font-size: 13.5px; text-align: center; opacity: .92;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.lightbox-x {
  position: absolute; inset-block-start: -8px; inset-inline-end: -8px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-lg);
}
.lightbox-x:hover { border-color: var(--accent); color: var(--accent); }

table.tbl tr.row-urgent td { background: var(--critical-bg); }

.score { display: flex; align-items: center; gap: 8px; }
.score-bar {
  width: 56px; height: 6px; border-radius: 999px; flex: none;
  background: var(--border-soft); overflow: hidden;
}
.score-bar > i { display: block; height: 100%; background: var(--serious); }

/* --- profile sweep progress --- */

.sweep .bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--border-soft); border: 1px solid var(--border-soft);
}
.sweep .bar > i {
  display: block; height: 100%;
  background: var(--accent);
  transition: width .3s ease-out;
}
.sweep .kv .v { font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .rep-body { flex-direction: column; }
  .rep-thumb { width: 100%; height: 120px; }
  /* two-class specificity, so it beats the .rep-thumb rule above and the
     image thumbnail spans the card instead of staying its desktop size */
  .rep-thumb.has-img { width: 100%; height: 170px; }
  .act-sep { display: none; }
}

/* --- warnings issued to an account (reports sheet + user detail) --- */

.warn-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.warn-list li { border-inline-start: 2px solid var(--warning); padding-inline-start: 10px; }

/* Avatar images at the two sizes the review cards use. */
.bot-av.sm { width: 24px; height: 24px; }