/* ============ FPLMan redesign · Mentions ============
   Shared mention-card styles (fragments/mention-card.html) used by the
   dashboard mentions section and the /mentions page, plus /mentions layout. */

/* mention source pills */
.mfoot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;}
.mfoot .lbl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-4);}
.src-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-2);
  background:var(--purple-tint);border-radius:999px;padding:4px 11px;transition:filter .14s;}
.src-pill:hover{filter:brightness(.97);}
.src-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--purple);}

/* mention card */
.mention{padding:20px 0;border-top:1px solid var(--border);}
.mention:first-of-type{border-top:none;padding-top:4px;}
.mention[hidden]{display:none;}
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:nowrap;}
.mid{display:flex;align-items:flex-start;gap:11px;min-width:0;flex:1;}
.mid .nm{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;}
.mid .sub{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin-top:3px;}
.mstats{display:flex;align-items:flex-start;gap:24px;flex-shrink:0;}
.mstat{display:flex;flex-direction:column;gap:7px;}
.mstat .k{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-4);}
.mstat .v{font-size:15px;font-weight:800;font-family:var(--mono);}
.mstat.sent{min-width:108px;}
.mstat .bar-wrap{display:flex;align-items:center;gap:9px;}
.mbar{flex:1;height:6px;border-radius:999px;background:var(--border-2);overflow:hidden;min-width:64px;}
.mbar i{display:block;height:100%;border-radius:999px;}
.mbar i.good{background:var(--green);}
.mbar i.bad{background:var(--red);}
.mstat .pct{font-family:var(--mono);font-weight:700;font-size:13.5px;color:var(--text-2);}
@media(max-width:760px){
  .mhead{flex-wrap:wrap;}
  /* flex-shrink:1 undoes the desktop flex-shrink:0 — without it the row keeps its
     max-content width and overflows the phone viewport instead of wrapping. */
  .mstats{flex-wrap:wrap;gap:14px 20px;flex-shrink:1;max-width:100%;}
}

.mbody{font-size:15px;color:var(--text-2);line-height:1.6;margin:13px 0 0;max-width:74ch;}

.locked{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:14.5px;color:var(--text-2);font-weight:600;}
.locked svg{color:var(--text-4);flex-shrink:0;}
.locked a{color:var(--text);text-decoration:underline;text-underline-offset:2px;font-weight:700;}

/* ---------- /mentions page ---------- */
.mentions-wrap{max-width:960px;margin:0 auto;}
.mentions-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:14px;align-items:end;margin-bottom:10px;}
.mentions-toolbar .searchbar{margin:0;}
@media(max-width:640px){
  .mentions-toolbar{grid-template-columns:1fr;}
}