/* ============================================================
   cp.css — shared layer for the competitive-programming pages
   (problems, problem detail/editorial/statistics, contests,
   standings, leaderboard, duels, coder profiles, follow lists).

   Each CP view links this file after the global layers, so it
   reads tokens.css only: no raw hex, radius, duration or font.
   Anything here gets dark mode from the tokens for free.
   Rating/difficulty band colours and chart palettes are data-viz
   and stay where they are emitted (coding_helper.php, cp-charts.js).
   ============================================================ */

/* ---------- Cards ---------- */
.cp-card, .cp-st-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-4);
  min-width: 0;
}
.cp-card > h2, .cp-card > h4, .cp-st-card > h2, .cp-st-card > h4 {
  margin: 0 0 var(--s-3);
  font: 600 var(--t-body)/1.4 var(--display);
  color: var(--ink);
}
.cp-dim { color: var(--muted); }
.cp-num { font-variant-numeric: tabular-nums; }

/* ---------- Section strip: one row of links that scrolls inside
   itself on narrow screens (never the page). Active = accent. ---------- */
.cp-strip {
  display: flex; flex-wrap: nowrap; gap: var(--s-2);
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin: 0 0 var(--s-4); padding: var(--s-1);   /* room for the focus ring */
  list-style: none;
}
.cp-strip > a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--btn-h-sm);
  padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-pill);
  /* !important on colour only: theme.css paints every dark-mode link
     (a:not(.btn):not(.label):not(.readmore), specificity 0,4,2) in --accent,
     which would put accent text on the accent-filled active pill. */
  background: var(--panel); color: var(--body) !important;
  box-shadow: inset 0 0 0 1px var(--panel-border);
  font: 600 var(--t-small)/1.2 var(--text);
  white-space: nowrap; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-spring);
}
.cp-strip > a:hover { background: var(--accent-tint); color: var(--accent-700) !important; text-decoration: none; }
.cp-strip > a:hover:active { transform: scale(var(--press)); transition-duration: var(--dur-1); transition-timing-function: var(--ease-press); }
.cp-strip > a:focus-visible { outline: none; box-shadow: var(--ring); }
.cp-strip > a.active, .cp-strip > a[aria-current="page"] {
  background: var(--accent); color: var(--on-accent) !important; box-shadow: none;
}
.cp-strip > a .n {
  background: var(--chip-bg); color: var(--chip-text);
  border-radius: var(--r-pill); padding: 0 var(--s-2);
  font-size: var(--t-caption); font-variant-numeric: tabular-nums;
}
.cp-strip > a.active .n, .cp-strip > a[aria-current="page"] .n { background: transparent; color: inherit; }
@media (max-width: 767.98px), (pointer: coarse) {
  .cp-strip > a { min-height: var(--tap); }
}

/* ---------- Toolbar row (search + filters above a list) ---------- */
.cp-toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: flex-end; margin: 0 0 var(--s-4); }
.cp-toolbar .cp-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; flex: 1 1 200px; max-width: 340px; }
.cp-toolbar label { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--body); }
.cp-toolbar .form-control { border-radius: var(--r-field); border-color: var(--field-border); min-height: var(--btn-h-sm); }
.cp-toolbar .btn { min-height: var(--btn-h-sm); }
@media (max-width: 767.98px) {
  .cp-toolbar .cp-field { max-width: none; flex-basis: 100%; }
  .cp-toolbar .form-control { font-size: var(--t-body); min-height: var(--tap); }
  .cp-toolbar .btn { min-height: var(--tap); }
}

/* ---------- Active filters: what is applied stays on screen ---------- */
.cp-active-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin: 0 0 var(--s-4); font-size: var(--t-small); color: var(--muted); }
.cp-filter-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 32px; padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--accent-tint); color: var(--accent-700);
  font-size: var(--t-small); font-weight: 600; text-decoration: none;
}
.cp-filter-chip:hover { background: var(--accent-tint-2); color: var(--accent-700); text-decoration: none; }
.cp-filter-chip:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 767.98px), (pointer: coarse) { .cp-filter-chip { min-height: var(--tap); } }

/* ---------- Problem filter panel (topics + difficulty) ---------- */
.cp-filter {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: var(--s-2) var(--s-4) var(--s-4);
  margin-bottom: var(--s-4);
}
.cp-filter > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: var(--tap); cursor: pointer; list-style: none;
  font: 600 var(--t-body)/1.3 var(--display); color: var(--ink);
}
.cp-filter:not([open]) { padding-bottom: var(--s-2); }
.cp-filter > summary::-webkit-details-marker { display: none; }
.cp-filter > summary .fa-chevron-down { color: var(--muted); transition: transform var(--dur-2) var(--ease); }
.cp-filter[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.cp-filter > summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-md); }
.cp-filter h4 {
  margin: var(--s-4) 0 var(--s-2);
  font: 600 var(--t-eyebrow)/1.3 var(--text);
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.cp-filter ul { list-style: none; margin: 0; padding: 0; }
.cp-filter li a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  min-height: 36px; padding: var(--s-1) var(--s-2);
  border-radius: var(--r-md);
  color: var(--body); font-size: var(--t-small); text-decoration: none;
}
.cp-filter li a:hover { background: var(--accent-tint); color: var(--accent-700); text-decoration: none; }
.cp-filter li a:focus-visible { outline: none; box-shadow: var(--ring); }
.cp-filter li a[aria-current="page"] {
  background: var(--accent-tint); color: var(--accent-700); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.cp-filter .count { color: var(--muted); font-size: var(--t-caption); font-variant-numeric: tabular-nums; }
.cp-filter .cp-topic-find { margin: var(--s-2) 0 var(--s-2); }
.cp-filter .cp-topic-find label { display: block; margin: 0 0 var(--s-1); font-size: var(--t-small); font-weight: 600; color: var(--body); }
.cp-filter .cp-topic-find .form-control { border-radius: var(--r-field); border-color: var(--field-border); min-height: var(--btn-h-sm); }
.cp-filter .cp-more > summary {
  display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 36px; margin-top: var(--s-1); padding: 0 var(--s-2);
  color: var(--accent); font-size: var(--t-small); font-weight: 600; cursor: pointer; list-style: none;
  border-radius: var(--r-md);
}
.cp-filter .cp-more > summary::-webkit-details-marker { display: none; }
.cp-filter .cp-more > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.cp-filter .cp-no-topic { font-size: var(--t-small); color: var(--muted); margin: var(--s-2) 0 0; }
@media (max-width: 991.98px) {
  .cp-filter li a, .cp-filter .cp-more > summary { min-height: var(--tap); }
  .cp-filter .cp-topic-find .form-control { font-size: var(--t-body); min-height: var(--tap); }
}

/* ---------- Status marks (shape + colour + hidden word, never colour alone) ---------- */
.cp-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25em; }
.cp-mark--solved { color: var(--success-text); }
.cp-mark--tried  { color: var(--warning-text); }

/* ---------- Acceptance meter (the % is always printed next to it) ---------- */
.cp-meter { display: flex; align-items: center; gap: var(--s-2); }
.cp-meter-track { flex: 1; min-width: 40px; height: 6px; border-radius: var(--r-pill); background: var(--chip-bg); overflow: hidden; }
.cp-meter-fill { height: 100%; border-radius: inherit; background: var(--success); }
.cp-meter-fill.is-mid { background: var(--warning-border); }
.cp-meter-fill.is-low { background: var(--danger-border); }
.cp-meter small { min-width: 4ch; text-align: right; color: var(--body); font-size: var(--t-caption); font-variant-numeric: tabular-nums; }

/* ---------- Problems listing ---------- */
.cp-daily { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.cp-daily .cp-daily-state { margin-left: auto; }
.cp-daily .cp-daily-streak { font-weight: 600; }
.cp-diff { font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-lede { max-width: 70ch; color: var(--body); }
.cp-related { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-4); font-size: var(--t-small); }
.cp-col-status { width: 40px; text-align: center; }
.cp-col-acc { width: 140px; }

/* ---------- Lists / tables ---------- */
.cp-list td, .cp-list th { vertical-align: middle; }
.cp-list .num { text-align: right; font-variant-numeric: tabular-nums; }
.cp-list .cp-tag { margin: 0 var(--s-1) var(--s-1) 0; }
.cp-row-links { white-space: nowrap; }
.cp-row-links a + a { margin-left: var(--s-3); }
tr.cp-you > td, tr.me > td { background: var(--you-row); }
tr.cp-you > td:first-child, tr.me > td:first-child { box-shadow: inset 3px 0 0 var(--warning-border); }

/* Pagination uses the shared .pagination component (ui-refresh.css); the
   view only windows it: first, a window around the current page, last. */
.pagination { margin: var(--s-4) 0 0; }

/* Empty state (shared vocabulary; local fallback so CP pages never show a bare line) */
.cp-empty { text-align: center; padding: var(--s-6) var(--s-4); color: var(--body); }
.cp-empty > i { display: block; font-size: 24px; color: var(--muted); margin-bottom: var(--s-3); }
.cp-empty p { margin: 0 auto var(--s-4); max-width: 46ch; }
.cp-empty p:last-child { margin-bottom: 0; }

/* ---------- Status chips ---------- */
.cp-live-chip { display: inline-flex; align-items: center; gap: var(--s-1); }
.cp-live-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- Statistics pages ---------- */
.cp-st-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
@media (max-width: 767.98px) { .cp-st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-st-tile { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--r-lg); padding: var(--s-4); min-width: 0; }
.cp-st-tile b { display: block; font: 600 var(--t-h5)/1.25 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-st-tile span { display: block; margin-top: var(--s-1); font-size: var(--t-small); color: var(--muted); line-height: 1.4; }
.cp-st-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 991.98px) { .cp-st-grid2 { grid-template-columns: minmax(0, 1fr); } }
.cp-st-card > h2 .cp-dim, .cp-st-card > h4 .cp-dim { font: 400 var(--t-caption) var(--text); }
.cp-st-weeks, .cp-st-timeline { display: flex; align-items: flex-end; height: 88px; }
.cp-st-weeks { gap: var(--s-1); }
.cp-st-timeline { gap: 2px; }
.cp-st-weeks .b, .cp-st-timeline .b {
  flex: 1 1 0; min-width: 2px; position: relative;
  background: var(--accent-tint-2); border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.cp-st-weeks .b i, .cp-st-timeline .b i {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--success); border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.cp-legend-key { display: inline-flex; align-items: center; gap: var(--s-1); }
.cp-legend-key::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--success); }
.cp-legend-key.is-total::before { background: var(--accent-tint-2); }

/* ---------- Problem detail: statement, samples, editor ---------- */
.cp-statement { line-height: 1.65; }
.cp-statement pre { background: var(--code-bg); color: var(--body); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); overflow-x: auto; }
.cp-sample {
  background: var(--code-bg); color: var(--body);
  border: 1px solid var(--code-border); border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3); margin: 0;
  white-space: pre-wrap; font-family: monospace; font-size: var(--t-small);
}
.cp-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); color: var(--muted); }
.cp-meta span { color: var(--muted); }
#cp-col-editor .CodeMirror {
  border: 1px solid var(--field-border); border-radius: var(--r-field);
  height: 380px; min-height: 100px; font-size: var(--t-eyebrow);
  resize: vertical; overflow: hidden;
}
.CodeMirror-fullscreen { z-index: 2000; }
@media (max-width: 767.98px) {
  /* iOS zooms the page when the focused field is under 16px */
  #cp-col-editor .CodeMirror, #cp-col-editor .CodeMirror textarea { font-size: var(--t-body); }
}
/* Editor gutter contrast. The vendored themes paint line numbers at
   #999 on #f7f7f7 (2.85:1, default) and #6d8a88 on #282a36 (3.83:1, dracula).
   Default theme on a light page: tokens (--muted on --panel-2, 5.66:1).
   The editor themes keep their own fixed canvas whatever the site theme, so
   the third-party theme overrides below are literals, measured on that canvas. */
html:not([data-theme="dark"]) #cp-col-editor .cm-s-default .CodeMirror-gutters { background: var(--panel-2); border-right-color: var(--hairline); }
html:not([data-theme="dark"]) #cp-col-editor .cm-s-default .CodeMirror-linenumber { color: var(--muted); }
html[data-theme="dark"] #cp-col-editor .cm-s-default .CodeMirror-linenumber { color: #51657a; }   /* 5.61:1 on the light editor's #f7f7f7 gutter */
#cp-col-editor .cm-s-dracula .CodeMirror-linenumber { color: #94aaa8; }  /* 5.81:1 on #282a36 */
#cp-col-editor .cm-s-dracula span.cm-comment { color: #8595c8; }        /* comments: 3.03 → 4.84:1 on #282a36 */
#cp-splitter::after { background: var(--hairline); border-radius: var(--r-pill); }
#cp-splitter:hover::after, #cp-splitter.dragging::after { background: var(--accent); }
.cp-run-case { border: 1px solid var(--code-border); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-2); font-size: var(--t-small); }
.cp-run-case pre { margin: var(--s-2) 0 0; font-size: var(--t-caption); max-height: 120px; overflow: auto; }
.cp-lang { margin-bottom: var(--s-2); }
.cp-lang label { display: block; margin: 0 0 var(--s-1); font-size: var(--t-small); font-weight: 600; color: var(--body); }
.cp-lang select { max-width: 260px; border-radius: var(--r-field); border-color: var(--field-border); }
@media (max-width: 767.98px) { .cp-lang select { max-width: none; font-size: var(--t-body); min-height: var(--tap); } }

/* Editor toolbar: dense on a desktop pointer (CLAUDE.md §1 — 31-38px is
   correct for a mouse); a 44px touch target on phones / touch screens. */
.cp-editor-bar { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); flex-wrap: wrap; }
.cp-editor-bar .btn { min-height: 32px; padding: 0 var(--s-3); font-size: var(--t-small); line-height: 1.2; display: inline-flex; align-items: center; gap: var(--s-1); }
.cp-editor-hint { color: var(--muted); font-size: var(--t-caption); margin-left: auto; }
.cp-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
@media (max-width: 767.98px), (pointer: coarse) {
  .cp-editor-bar .btn, .cp-actions .btn { min-height: var(--tap); }
}
@media (hover: none) and (pointer: coarse), (max-width: 575.98px) { .cp-editor-hint { display: none; } }
/* phones: full-width, stacked; the primary (last) sits nearest the thumb */
@media (max-width: 575.98px) { .cp-actions > .btn { flex: 1 1 100%; } }
#cp-my-subs .label { white-space: nowrap; }
@media (max-width: 991.98px) { #cp-my-subs td, #cp-my-subs th { white-space: nowrap; } }

/* Floating "exit fullscreen" control above the fullscreen editor */
.cp-fs-exit {
  position: fixed; top: var(--s-3); right: var(--s-4); z-index: 2100;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-btn);
  background: var(--ink); color: var(--surface);
  font: 600 var(--t-small)/1 var(--text); cursor: pointer;
  box-shadow: var(--shadow-3);
}
.cp-fs-exit:focus-visible { outline: none; box-shadow: var(--ring); }

/* Contest arena: problem tabs with live solve state (glyph + colour) */
#cp-arena-tabs {
  display: flex; flex-wrap: nowrap; gap: var(--s-2);
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  padding: var(--s-1); margin: var(--s-2) 0 0;
}
#cp-arena-tabs a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-width: var(--tap); min-height: var(--btn-h-sm); padding: 0 var(--s-3);
  border: 0; border-radius: var(--r-btn);
  background: var(--panel); color: var(--body);
  box-shadow: inset 0 0 0 1px var(--panel-border);
  font-weight: 600; text-decoration: none;
}
#cp-arena-tabs a:hover { background: var(--accent-tint); color: var(--accent-700); }
#cp-arena-tabs a:focus-visible { outline: none; box-shadow: var(--ring); }
#cp-arena-tabs a.cp-tab-solved { background: var(--success-bg); color: var(--success-text); box-shadow: inset 0 0 0 1px var(--success-border); }
#cp-arena-tabs a.cp-tab-solved::after { content: "\2713"; }   /* ✓ solved */
#cp-arena-tabs a.cp-tab-tried { background: var(--warning-bg); color: var(--warning-text); box-shadow: inset 0 0 0 1px var(--warning-border); }
#cp-arena-tabs a.cp-tab-tried::after { content: "\2717"; }    /* ✗ wrong attempts */
#cp-arena-tabs a.active { background: var(--accent); color: var(--on-accent); box-shadow: none; }
@media (max-width: 767.98px), (pointer: coarse) { #cp-arena-tabs a { min-height: var(--tap); } }

/* Live contest status band — the same pattern as the timed quiz
   (account-quiz-attempt.php .qz-status): sticky under the fixed header,
   "Time left" label + value, amber at 5 min, a heavier ring at 1 min. */
.cp-status {
  position: -webkit-sticky; position: sticky; top: var(--cp-top, 0px); z-index: 996;
  background: var(--panel); border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-1);
}
.cp-status-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-top: var(--s-2); padding-bottom: var(--s-2); }
.cp-status-label { margin: 0; min-width: 0; font-size: var(--t-small); font-weight: 600; color: var(--ink); line-height: 1.5; }
.cp-status-label .cp-bar-link { margin-left: var(--s-2); font-weight: 400; white-space: nowrap; }
.cp-timer {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-md);
  background: var(--info-bg); color: var(--info-text); box-shadow: inset 0 0 0 1px var(--info-border);
}
.cp-timer-row { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); line-height: 1.5; }
.cp-timer-value { font-family: var(--display); font-size: var(--t-lead); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cp-timer-note { font-size: var(--t-caption); font-weight: 600; line-height: 1.5; }
.cp-timer-note:empty { display: none; }
.cp-status.is-low .cp-timer { background: var(--warning-bg); color: var(--warning-text); box-shadow: inset 0 0 0 1px var(--warning-border); }
.cp-status.is-low .cp-timer-value { color: var(--warning-text); }
.cp-status.is-final .cp-timer { box-shadow: inset 0 0 0 2px var(--warning-border); }
.cp-ai-notice { color: var(--danger-text); font-weight: 600; margin: 0; }
/* The fullscreen editor covers the band, so the time left is repeated in a
   pill over it (and only then). */
.cp-clock-pill {
  position: fixed; left: var(--s-3); bottom: var(--s-3); z-index: 2050;
  display: none; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  background: linear-gradient(var(--info-bg), var(--info-bg)), var(--panel); color: var(--info-text);
  box-shadow: inset 0 0 0 1px var(--info-border), var(--shadow-3);
  font: 600 var(--t-small)/1 var(--text); font-variant-numeric: tabular-nums;
}
body.cp-fs-on .cp-clock-pill { display: inline-flex; }
.cp-status.is-low ~ .cp-clock-pill { background: linear-gradient(var(--warning-bg), var(--warning-bg)), var(--panel); color: var(--warning-text); box-shadow: inset 0 0 0 2px var(--warning-border), var(--shadow-3); }

/* Mini scoreboard in the editor column */
#cp-mini-board table { margin-bottom: 0; }
#cp-mini-board td, #cp-mini-board th { padding: var(--s-1) var(--s-2); font-size: var(--t-small); }
#cp-mini-board h5 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); font-size: var(--t-body); }
#cp-mini-board h5 a { font: 400 var(--t-small) var(--text); }

/* "Faster than" percentile bar — animates transform, never width */
.cp-pct-wrap { margin-top: var(--s-2); }
.cp-pct-track { background: var(--chip-bg); height: 8px; border-radius: var(--r-pill); overflow: hidden; }
.cp-pct-fill {
  height: 8px; width: 100%; border-radius: var(--r-pill);
  background: var(--success);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}

/* Discussion */
.cp-comment { border-bottom: 1px solid var(--hairline); padding: var(--s-2) 0; }
.cp-comment-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cp-comment-head .cp-report { margin-left: auto; }
.cp-comment-body { white-space: pre-wrap; margin-top: var(--s-1); }
.cp-report.btn {
  min-height: 32px; min-width: 32px; padding: 0 var(--s-2);
  --btn-fg: var(--muted); --btn-fg-h: var(--danger-text); --btn-bg-h: var(--danger-bg);
}
@media (max-width: 767.98px), (pointer: coarse) { .cp-report.btn { min-height: var(--tap); min-width: var(--tap); } }
.cp-comment-form label { display: block; margin: var(--s-3) 0 var(--s-1); font-size: var(--t-small); font-weight: 600; color: var(--body); }
.cp-comment-form textarea { border-radius: var(--r-field); border-color: var(--field-border); }
@media (max-width: 767.98px) { .cp-comment-form textarea { font-size: var(--t-body); } }

/* ---------- Proctor gate + exam dialogs (token-built, both themes) ---------- */
#cpGate {
  position: fixed; inset: 0; z-index: 100002;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4); overflow-y: auto;
  background: var(--surface); color: var(--body);
}
.cp-gate-card {
  max-width: 480px; width: 100%; text-align: center;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  padding: var(--s-6) var(--s-5);
}
.cp-gate-card h2 { margin: var(--s-3) 0 var(--s-2); font: 600 var(--t-h5)/1.25 var(--display); color: var(--ink); }
.cp-gate-icons { font-size: 40px; line-height: 1; }
.cp-gate-rows { text-align: left; max-width: 300px; margin: 0 auto var(--s-4); }
.cp-gate-row {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--body); margin-bottom: var(--s-2);
  box-shadow: inset 0 0 0 1px var(--panel-border);
}
.cp-gate-row.is-ok { background: var(--success-bg); color: var(--success-text); box-shadow: inset 0 0 0 1px var(--success-border); }
.cp-gate-warn { color: var(--danger-text); font-weight: 600; margin: var(--s-2) 0 var(--s-4); }
.cp-gate-hint { color: var(--muted); font-size: var(--t-small); margin: var(--s-3) 0 0; }
.cp-gate-hint .is-error { color: var(--danger-text); font-weight: 600; }
#cpGateEnter { min-height: var(--btn-h); padding: 0 var(--s-5); }

/* Exam dialogs (Back-button notice; cp-exam-guard.js builds the same look inline) */
.cp-dialog-backdrop {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4); background: var(--overlay);
}
.cp-dialog {
  background: var(--panel); color: var(--body);
  border-radius: var(--r-lg); max-width: 460px; width: 100%;
  padding: var(--s-5); text-align: center;
  box-shadow: inset 0 4px 0 var(--warning-border), var(--shadow-3);
}
.cp-dialog h3 { margin: var(--s-2) 0; font: 600 var(--t-h5)/1.25 var(--display); color: var(--ink); }
.cp-dialog p { margin: 0 0 var(--s-2); }
.cp-dialog-icon { font-size: 40px; line-height: 1; }
.cp-dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.cp-dialog-actions .btn-link { font-size: var(--t-small); --btn-fg: var(--muted); }

/* Proctor picture-in-picture: camera + screen preview, bottom-right */
.cp-pip {
  position: fixed; right: var(--s-3); z-index: 1050;
  width: 110px; max-width: 26vw;
  border-radius: var(--r-lg); background: var(--surface-3);
  box-shadow: 0 0 0 2px var(--panel), var(--shadow-3);
}
#cpProctorVid { bottom: var(--s-3); }
#cpScreenVid { bottom: 104px; box-shadow: 0 0 0 2px var(--accent), var(--shadow-3); }
#cpScreenPrompt {
  bottom: 104px; padding: var(--s-2) var(--s-1);
  color: var(--on-dark); text-align: center; cursor: pointer;
  font-size: var(--t-caption); line-height: 1.35;
  box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-3);
}
#cpScreenPrompt:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Contests listing ---------- */
.cp-ct-card { border: 1px solid var(--panel-border); border-radius: var(--r-lg); overflow: hidden; background: var(--panel); margin-bottom: var(--s-4); }
.cp-ct-card > a { display: block; text-decoration: none; }
.cp-ct-card > a:focus-visible { outline: none; box-shadow: var(--ring); }
.cp-ct-banner { padding: var(--s-5); color: var(--on-dark); position: relative; background: var(--surface-3); }
.cp-ct-banner h4 { margin: 0 0 var(--s-1); padding-right: 112px; color: var(--on-dark) !important; font: 600 var(--t-h5)/1.25 var(--display); }
.cp-ct-banner .org { font-size: var(--t-small); color: var(--on-dark); }
.cp-ct-banner .phase-chip {
  position: absolute; top: var(--s-3); right: var(--s-3);
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--on-dark);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.cp-ct-body { padding: var(--s-3) var(--s-5) var(--s-4); display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap; }
.cp-ct-body .meta { font-size: var(--t-small); color: var(--muted); }
.cp-ct-body .meta i { margin-right: var(--s-1); }
.cp-ct-countdown { font-weight: 600; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.cp-ct-body .spacer { margin-left: auto; }
.cp-ct-tags { padding: 0 var(--s-5) var(--s-4); }
@media (max-width: 575.98px) {
  .cp-ct-banner, .cp-ct-body { padding-left: var(--s-4); padding-right: var(--s-4); }
  .cp-ct-body .spacer { margin-left: 0; width: 100%; }
  .cp-ct-body .btn { width: 100%; }
}
.cp-past-meta { font-size: var(--t-small); color: var(--muted); }
.cp-tag-cloud .label { display: inline-block; margin: 0 var(--s-1) var(--s-2) 0; }
.cp-tag-cloud .label[aria-current="page"] { box-shadow: 0 0 0 2px var(--accent); }
.cp-side-note { font-size: var(--t-small); color: var(--muted); }

/* ---------- Calendar ---------- */
.cp-cal-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); }
.cp-cal-head h3 { margin: 0; }
.cp-cal-nav { display: flex; gap: var(--s-2); }
.cp-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); }
.cp-cal-dow { font-size: var(--t-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; padding: var(--s-1) 0; }
.cp-cal-cell { min-height: 88px; border: 1px solid var(--panel-border); border-radius: var(--r-md); background: var(--panel); padding: var(--s-2); min-width: 0; }
.cp-cal-cell.cp-cal-blank { background: transparent; border-color: transparent; }
.cp-cal-cell.cp-cal-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cp-cal-daynum { font-size: var(--t-caption); font-weight: 600; color: var(--muted); }
.cp-cal-today .cp-cal-daynum { color: var(--accent); }
#cp-cal .cp-cal-event {
  display: block; margin-top: var(--s-1); padding: var(--s-1) var(--s-2);
  border-radius: var(--r-md); font-size: var(--t-caption); line-height: 1.35;
  background: var(--accent-tint); color: var(--accent-700); text-decoration: none; overflow-wrap: anywhere;
}
#cp-cal .cp-cal-event:hover { background: var(--accent-tint-2); }
#cp-cal .cp-cal-event:focus-visible { outline: none; box-shadow: var(--ring); }
#cp-cal .cp-cal-event .t { display: block; font-weight: 600; }
#cp-cal .cp-cal-event.cp-cal-live { background: var(--accent); color: var(--on-accent); }
@media (max-width: 767.98px) {
  .cp-cal-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-cal-dow, .cp-cal-cell.cp-cal-blank { display: none; }
  .cp-cal-cell { min-height: 0; display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
  .cp-cal-cell:not(:has(.cp-cal-event)):not(.cp-cal-today) { display: none; }
  #cp-cal .cp-cal-event { font-size: var(--t-small); padding: var(--s-2) var(--s-3); flex: 1 1 200px; }
}

/* ---------- Contest detail ---------- */
.cp-banner { border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); color: var(--on-dark); margin-bottom: var(--s-3); background: var(--surface-3); }
.cp-banner .t { font: 600 var(--t-h5)/1.25 var(--display); }
.cp-banner .org { font-size: var(--t-small); margin-top: var(--s-1); }
.cp-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
#cp-lobby {
  background: var(--surface-2); border: 1px solid var(--panel-border);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-4);
  text-align: center; color: var(--body); margin: var(--s-4) 0;
}
#cp-lobby .eyebrow { letter-spacing: .12em; font-size: var(--t-caption); font-weight: 600; text-transform: uppercase; color: var(--muted); }
#cp-lobby-clock { font: 600 var(--t-h2)/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .04em; margin: var(--s-2) 0 var(--s-1); }
#cp-lobby-clock.cp-lobby-soon { color: var(--warning-text); }
#cp-lobby .sub { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 575.98px) { #cp-lobby-clock { font-size: var(--t-h3); } }
.cp-side-actions { display: flex; flex-direction: column; gap: var(--s-2); }
.cp-side-actions .btn { width: 100%; }
.cp-side-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: var(--t-small); }
.cp-side-links a { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap); }

/* ---------- Standings ---------- */
#cp-standings td.cp-fts { background: var(--success-bg); }
#cp-standings td.cp-fts small::after { content: " \2605"; color: var(--warning-text); }   /* ★ first to solve */
#cp-standings .cp-cell-ok { color: var(--success-text); font-weight: 600; text-align: center; }
#cp-standings .cp-cell-wa { color: var(--danger-text); font-weight: 600; text-align: center; }
#cp-standings .cp-cell-part { color: var(--warning-text); text-align: center; }
#cp-standings .cp-cell-none { color: var(--muted); text-align: center; }
#cp-standings tbody tr.cp-flash-up > td { background: var(--success-bg); }
#cp-standings tbody tr.cp-flash-down > td { background: var(--danger-bg); }
#cp-standings tbody tr.cp-flash-up, #cp-standings tbody tr.cp-flash-down { animation: none; }
.cp-move { font-size: var(--t-caption); margin-left: var(--s-1); }
.cp-move.up { color: var(--success-text); }
.cp-move.down { color: var(--danger-text); }
.cp-delta-up { color: var(--success-text); font-weight: 600; }
.cp-delta-down { color: var(--danger-text); font-weight: 600; }
.cp-medal { font-size: var(--t-body); }
.cp-standings-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.cp-standings-head h3 { margin: 0; }
.cp-standings-legend { font-size: var(--t-small); color: var(--muted); margin: var(--s-2) 0 var(--s-3); }

/* ---------- Leaderboard ---------- */
.lb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-items: end; margin-bottom: var(--s-5); }
@media (max-width: 640px) { .lb-podium { grid-template-columns: minmax(0, 1fr); } .lb-pod.first { order: -1; } }
.lb-pod { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--r-lg); padding: var(--s-4) var(--s-3); text-align: center; min-width: 0; }
.lb-pod.first { box-shadow: inset 0 0 0 1px var(--warning-border), var(--shadow-2); }
.lb-pod .medal { font-size: var(--t-h5); margin-top: calc(-1 * var(--s-4)); }
.lb-pod .h { font: 600 var(--t-lead)/1.3 var(--display); margin: var(--s-2) 0 var(--s-1); overflow-wrap: anywhere; }
.lb-pod .m { font-size: var(--t-small); color: var(--muted); }
.lb-pod img, .lb-avatar { border-radius: 50%; object-fit: cover; }
.lb-pod img { width: 54px; height: 54px; box-shadow: 0 0 0 2px var(--panel-border); }
.lb-avatar { width: 26px; height: 26px; vertical-align: middle; margin-right: var(--s-2); }
.lb-avatar.is-default, .lb-pod img.is-default { filter: grayscale(1); }
.lb-table, .lb-best { width: 100%; border-collapse: collapse; }
.lb-table th, .lb-table td, .lb-best th, .lb-best td { padding: var(--s-2) var(--s-3); font-size: var(--t-small); border-bottom: 1px solid var(--hairline); }
.lb-table th, .lb-best th { text-align: left; color: var(--muted); font-weight: 600; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: .04em; }
.lb-table td.num, .lb-table th.num, .lb-best td.num, .lb-best th.num { text-align: right; font-variant-numeric: tabular-nums; }
.lb-table tbody tr:hover > td, .lb-best tbody tr:hover > td { background: var(--row-hover); }
.lb-table tr.me > td, .lb-best tr.me > td { background: var(--you-row); }
.lb-rank { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.lb-sub { margin: var(--s-5) 0 var(--s-3); font: 600 var(--t-body)/1.3 var(--display); color: var(--ink); }
.lb-inst { color: var(--body); }

/* ---------- Duels ---------- */
.cp-duel-form label { font-size: var(--t-small); font-weight: 600; color: var(--body); }
.cp-duel-form .form-control { border-radius: var(--r-field); border-color: var(--field-border); }
@media (max-width: 767.98px) { .cp-duel-form .form-control { font-size: var(--t-body); min-height: var(--tap); } }
.cp-hint { font-size: var(--t-small); color: var(--muted); }
.cp-inline-form { display: inline-flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---------- Coder profile ---------- */
.cp-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.cp-layout > * { min-width: 0; }   /* heatmap/table min-content must never widen the page */
@media (max-width: 991.98px) { .cp-layout { grid-template-columns: minmax(0, 1fr); } }
.cp-dash .cp-card > h4 {
  font: 600 var(--t-eyebrow)/1.3 var(--text);
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.cp-side-avatar {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden;
  background: var(--panel-2); display: grid; place-items: center;
  font: 600 56px/1 var(--display); color: var(--muted); text-transform: uppercase;
}
.cp-side-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.cp-side-avatar img.is-custom { filter: none; }
.cp-handle-chip {
  display: inline-block; margin-top: var(--s-3); padding: var(--s-1) var(--s-3);
  border-radius: var(--r-md); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--panel-border);
  font: 600 var(--t-body)/1.3 var(--display); overflow-wrap: anywhere;
}
.cp-side-title { color: var(--muted); font-size: var(--t-small); margin-top: var(--s-1); font-weight: 600; }
.cp-side-title .max { font-weight: 400; }
.cp-side-btn { width: 100%; margin-top: var(--s-3); }
.cp-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
.cp-counters b { display: block; font: 600 var(--t-h5)/1.25 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-counters span { font-size: var(--t-caption); color: var(--muted); }
.cp-info { list-style: none; margin: 0; padding: 0; font-size: var(--t-small); }
.cp-info li { display: flex; gap: var(--s-2); align-items: baseline; padding: var(--s-1) 0; color: var(--body); }
.cp-info li i { width: 16px; text-align: center; color: var(--muted); }
.cp-info li .v { min-width: 0; overflow-wrap: anywhere; }
.cp-badge-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--panel-border); color: var(--ink);
  border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); font-size: var(--t-caption); font-weight: 600;
}
.cp-ai-text { font-size: var(--t-small); margin: 0 0 var(--s-2); }
.cp-avatar-panel { margin-top: var(--s-3); text-align: left; }
.cp-avatar-panel .eyebrow { font-size: var(--t-caption); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: var(--s-3) 0 var(--s-2); }
.cp-avatar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.cp-av-opt {
  cursor: pointer; width: 100%; aspect-ratio: 1 / 1; height: auto;
  border-radius: 50%; object-fit: cover; filter: grayscale(1);
  box-shadow: 0 0 0 2px var(--panel-border);
}
.cp-av-opt:focus-visible { outline: none; box-shadow: var(--ring); }
.cp-av-opt.is-picked { box-shadow: 0 0 0 3px var(--accent); filter: none; }
.cp-avatar-panel input[type="file"] { font-size: var(--t-small); max-width: 100%; }
.cp-avatar-actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.cp-avatar-actions .btn { flex: 1 1 0; }
.cp-stat3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
@media (max-width: 767.98px) { .cp-stat3 { grid-template-columns: minmax(0, 1fr); } }
.cp-stat { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--r-lg); overflow: hidden; }
.cp-stat .top { padding: var(--s-4) var(--s-4) var(--s-3); text-align: right; }
.cp-stat .top b { font: 600 var(--t-h5)/1.25 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-stat .top b small { font: 400 var(--t-small) var(--text); color: var(--muted); }
.cp-stat .top .band { display: block; font-weight: 600; font-size: var(--t-small); }
.cp-stat .top span.lbl { display: block; font-size: var(--t-small); color: var(--muted); margin-top: 2px; }
.cp-stat .foot { border-top: 1px solid var(--hairline); background: var(--panel-2); padding: var(--s-2) var(--s-4); font-size: var(--t-small); color: var(--muted); font-weight: 600; }
.cp-progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-6); }
@media (max-width: 767.98px) { .cp-progress-grid { grid-template-columns: minmax(0, 1fr); } }
.cp-prog-row { padding: var(--s-1) 0; }
.cp-prog-row .l { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-small); margin-bottom: 2px; }
.cp-prog-row .l a { color: var(--ink); font-weight: 600; }
.cp-prog-row .l span { color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-prog-track { background: var(--chip-bg); border-radius: var(--r-pill); height: 6px; overflow: hidden; }
.cp-prog-track i { display: block; height: 6px; border-radius: var(--r-pill); background: var(--success); }
.cp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.cp-grid2 > div { min-width: 0; }
@media (max-width: 991.98px) { .cp-grid2 { grid-template-columns: minmax(0, 1fr); } }
.cp-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--chip-bg); color: var(--chip-text);
  margin: 0 var(--s-2) var(--s-2) 0; font-size: var(--t-small); text-decoration: none;
}
.cp-chip:hover { background: var(--accent-tint); color: var(--accent-700); text-decoration: none; }
.cp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.cp-legend span { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-caption); color: var(--muted); margin: 0 var(--s-3) var(--s-1) 0; }
.cp-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.cp-tip {
  position: absolute; display: none; pointer-events: none; z-index: 5;
  background: var(--panel); color: var(--body);
  box-shadow: 0 0 0 1px var(--panel-border), var(--shadow-2);
  padding: var(--s-1) var(--s-2); border-radius: var(--r-sm);
  font-size: var(--t-caption); white-space: nowrap; transform: translate(-50%, -100%);
}
.cp-vtable { width: 100%; border-collapse: collapse; }
.cp-vtable th, .cp-vtable td { padding: var(--s-2); font-size: var(--t-small); border-bottom: 1px solid var(--hairline); }
.cp-vtable th { text-align: left; color: var(--muted); font-weight: 600; }
.cp-up { color: var(--success-text); font-weight: 600; }
.cp-down { color: var(--danger-text); font-weight: 600; }
/* streak mini-calendar: data-viz squares; the key below names each colour */
.cp-cal-sq { display: inline-block; width: 13px; height: 13px; border-radius: 3px; }
.cp-cal-daily { background: var(--warning-border); }
.cp-cal-solved { background: var(--success); }
.cp-cal-empty { background: var(--chip-bg); }
.cp-streak { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; }
.cp-streak .big { font: 600 var(--t-h3)/1 var(--display); color: var(--ink); }
.cp-streak .mid { font: 600 var(--t-h5)/1 var(--display); color: var(--ink); }
.cp-streak .cap { font-size: var(--t-caption); color: var(--muted); }
.cp-streak-key { font-size: var(--t-caption); color: var(--muted); margin-top: var(--s-1); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.cp-streak-key span { display: inline-flex; align-items: center; gap: var(--s-1); }
.cp-hm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); margin: var(--s-3) 0 var(--s-4); }
@media (max-width: 575.98px) { .cp-hm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-hm-stats b { display: block; font: 600 var(--t-h5)/1.15 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-hm-stats span { font-size: var(--t-caption); color: var(--muted); line-height: 1.35; display: block; }
#cp-activity-feed { list-style: none; margin: 0; padding: 0; }
#cp-activity-feed li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--hairline); font-size: var(--t-small); }
#cp-activity-feed li > span:first-child { min-width: 0; }
#cp-activity-feed li > span:last-child { color: var(--muted); white-space: nowrap; }
#cp-activity-feed .fa-check-circle { color: var(--success-text); }
#cp-activity-feed .fa-flag-checkered { color: var(--accent); }

/* ---------- Follow list ---------- */
.cp-follow-row img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: var(--s-2); }
.cp-follow-row img.is-default { filter: grayscale(1); }
.cp-follow-since { font-size: var(--t-small); white-space: nowrap; text-align: right; }