/* Forum author card: the block left of every topic row and beside every post.
   Avatar, name, rank badge and a small stats table (joined, topics, likes, followers).
   Stand-alone add-on loaded after the main stylesheet; the layout rules are !important because
   older copies of the main stylesheet (cached for a year) sized this column differently. */

.fm-topic {
  grid-template-columns: 172px minmax(0, 1fr) auto !important;
  align-items: start !important; column-gap: 16px !important; padding: 14px 16px !important;
}
.fm-topic-main { align-self: center; min-width: 0; }
.fm-topic-stats { align-self: center; }

.fm-topic-who {
  width: auto !important; max-width: none !important; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 12px 10px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, #ffffff06, transparent 60%), var(--bg-2);
}
.fm-topic-who .fm-who {
  display: block !important; width: 100%; max-width: 100% !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px !important; font-weight: 700; color: var(--accent) !important; line-height: 1.25;
}
.fm-topic-who .fm-who:hover { text-decoration: underline; }
.fm-topic-who .fm-who-stats { display: none !important; }

/* Rank badge */
.s1-rank {
  display: flex; align-items: center; width: 100%; min-height: 22px; overflow: hidden;
  border-radius: 5px; font: 700 11px/1 var(--sans); letter-spacing: .02em; color: #fff;
  background: linear-gradient(90deg, rgb(var(--accent2-rgb)), rgb(var(--accent-rgb)));
}
.s1-rank i {
  flex: none; display: grid; place-items: center; width: 26px; align-self: stretch;
  font-style: normal; font-size: 12px; background: #00000040;
}
.s1-rank b { flex: 1; min-width: 0; padding: 0 8px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s1-rank.r0 { background: linear-gradient(90deg, #475569, #64748b); }
.s1-rank.r1 { background: linear-gradient(90deg, #0e7490, #06b6d4); }
.s1-rank.r2 { background: linear-gradient(90deg, #15803d, #22c55e); }
.s1-rank.r3 { background: linear-gradient(90deg, #1d4ed8, #3b82f6); }
.s1-rank.r4 { background: linear-gradient(90deg, #7e22ce, #a855f7); }
.s1-rank.r5 { background: linear-gradient(90deg, #b45309, #f59e0b); }
.s1-rank.team { background: linear-gradient(90deg, #c2410c, #f97316); }

/* Stats table */
.s1-ustats { width: 100%; margin: 2px 0 0; display: grid; gap: 3px; font-size: 11.5px; line-height: 1.3; text-align: left; }
.s1-ustats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.s1-ustats dt { color: var(--faint); white-space: nowrap; }
.s1-ustats dd { margin: 0; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Post view: same card in the side column */
.fm-post-side { gap: 8px !important; padding: 16px 12px !important; min-width: 0; }
.fm-post-side .fm-who { color: var(--accent); font-size: 14px; }
.fm-post-side .s1-rank, .fm-post-side .s1-ustats { max-width: 190px; }

@media (max-width: 820px) {
  .fm-topic { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 12px !important; padding: 10px 12px !important; }
  .fm-topic-who { padding: 0; border: 0; background: none; }
  .fm-topic-who .fm-who, .fm-topic-who .s1-rank, .fm-topic-who .s1-ustats { display: none !important; }
  .fm-topic-who img, .fm-topic-who > :first-child { width: 36px !important; height: 36px !important; }
  .fm-topic-stats { grid-column: 2; align-self: start; }
  .fm-post-side { flex-wrap: wrap; align-items: center !important; }
  .fm-post-side .s1-rank { width: auto; min-width: 120px; }
  .fm-post-side .s1-ustats { display: flex; flex-wrap: wrap; gap: 2px 14px; max-width: none; flex-basis: 100%; }
  .fm-post-side .s1-ustats > div { gap: 5px; }
}

/* Composer (new topic, reply, edit): a writing area tall enough to see the whole text.
   It starts at a comfortable height, grows with the text and can still be dragged taller. */
.fm-composer .fm-textarea {
  display: block; width: 100%; min-height: 280px; max-height: 72vh;
  field-sizing: content; resize: vertical; overflow-y: auto;
  padding: 14px 16px; font-size: 13.5px; line-height: 1.6; border: 0; border-radius: 0;
}
.fm-composer .fm-preview { min-height: 280px; max-height: 72vh; overflow-y: auto; padding: 14px 16px; }
@media (max-width: 820px) {
  .fm-composer .fm-textarea, .fm-composer .fm-preview { min-height: 200px; }
}

/* Quoted post: a reference to the original message, rendered from the server copy (not editable by the quoter). */
.s1-quote {
  margin: 0 0 12px; padding: 0; border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
  border-radius: 8px; background: rgb(var(--accent-rgb) / .05); overflow: hidden;
}
.s1-quote-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 7px 12px;
  font-size: 12.5px; color: var(--muted); background: #ffffff06; border-bottom: 1px solid var(--line);
}
.s1-quote-head b { color: var(--accent); font-weight: 700; }
.s1-quote-src { margin-left: auto; font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.s1-quote-src:hover { color: var(--accent); text-decoration: none; }
.s1-quote-body { padding: 10px 12px; font-size: 13.5px; max-height: 240px; overflow-y: auto; overflow-wrap: anywhere; }
.s1-quote-body > :first-child { margin-top: 0; }
.s1-quote-body > :last-child { margin-bottom: 0; }
.s1-quote.pending { border-left-color: var(--line-2); background: none; }
.s1-md-part + .s1-quote { margin-top: 12px; }
/* Guests: read-only forum */
.s1-guest-cta { display: inline-flex; gap: 8px; align-items: center; }
.s1-guest-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border-color: rgb(var(--accent-rgb) / .35); background: rgb(var(--accent-rgb) / .05); }
.s1-pub { display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); }
.s1-pub-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: #070b12e6; backdrop-filter: blur(8px); }
.s1-pub-brand { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text); font-size: 18px; }
.s1-pub-brand:hover { text-decoration: none; }
.s1-pub-brand b { color: var(--accent); letter-spacing: -.01em; }
.s1-pub-brand span { color: var(--muted); font-size: 13px; }
.s1-pub .spacer { flex: 1; }
.s1-pub-main { width: 100%; max-width: 1280px; margin: 0 auto; }
@media (max-width: 620px) { .s1-pub-note { display: none; } .s1-pub-bar { padding: 10px 12px; } }

/* Moderation: waiting topic, warnings */
.s1-pending { display: grid; gap: 6px; margin-bottom: 12px; border-color: #f5b84b80; background: #f5b84b12; }
.s1-excerpt { padding: 8px 10px; border-radius: 6px; border: 1px dashed var(--line-2); background: var(--bg-2); font: 12.5px/1.5 var(--mono); overflow-wrap: anywhere; }
.s1-excerpt mark { background: #f2667a40; color: #ffd5db; padding: 0 3px; border-radius: 3px; outline: 1px solid #f2667a80; }
.s1-mod { display: grid; gap: 10px; margin-top: 14px; scroll-margin-top: 80px; }
.s1-mod-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.s1-mod-kpis > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.s1-mod-kpis b { font: 700 20px var(--mono); }
.s1-mod-kpis span { font-size: 11.5px; color: var(--faint); }
.s1-mod-kpis .bad b { color: var(--bad); } .s1-mod-kpis .ok b { color: var(--ok); } .s1-mod-kpis .warn b { color: var(--warn); }
.s1-warn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.s1-warn-list li { display: grid; gap: 5px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--bad); border-radius: 8px; background: #ffffff04; }
.s1-warn-list li.revoked { border-left-color: var(--line-2); opacity: .65; }
.s1-b-bad { color: var(--bad); border-color: #f2667a66; }