/* =====================================================================
   Community — shared styles (static/community/community.css)

   Loaded by templates/community/base_community.html after ctg-ui.css, with
   ?v={{ cm_v }} (community.constants.ASSET_VERSION: bump it when this file
   changes). Everything here is scoped under `.cm` (the <main> of every
   community page) or `.cm-modal` (dialogs, which Bootstrap renders outside
   <main>), so no other page is touched and no :root is redefined.

   RULES
   - Tokens come from ctg-ui.css only (--surface, --primary, --r-lg …).
   - Logical properties (margin-inline, padding-block, inset-inline-start,
     text-align: start) so a right-to-left interface needs no second sheet.
   - Selectors start with `.cm ` (or `.cm-modal `): ctg-ui's are `.ctg .x`,
     the same weight, and this file loads later, so ties land here.
   - The bare `cm-` prefix belongs to this file. Slices write their own
     cm-<slice>.css with their prefix: A `cm-feed-`, B `cm-post-` / `cm-corr-`,
     C `cm-people-`, D `cm-join-` — never a bare `cm-` class of their own.

   MARKUP CONTRACT (the primitives slices reuse — see hub.html and _post_card.html)
   Layout     main#cm-main.ctg.cm > .ctg-wrap > nav.cm-subnav, header.page-head,
              .cm-mobile-top (≤980px only), .ctg-split.cm-split > .cm-main-col +
              aside.cm-side  |  .cm-single (narrow, one column; the subnav then
              sits in its own full-width .ctg-wrap.cm-navwrap and the narrow
              .ctg-wrap--narrow.cm-after-nav follows it)
   Lists      .cm-list (#cm-feed, role=feed): a column of cards, 12px apart
   Panels     section.cm-panel > .cm-panel__head > h2.cm-panel__title (+ .ti icon)
              + a.cm-panel__link ; .cm-panel__body   — every sidebar section
   Sub-tabs   nav.cm-subtabs > a.chip[aria-current="page"] — in-page filters
              (never a second .ctg-tabs row)
   Post card  article.cm-post (templates/community/_post_card.html — the only one)
   People     .cm-chip (member chip), .cm-avatar (+ ctg .avatar-circle sizes),
              .cm-badge--team|teacher, .cm-level
   Numbers    dl.cm-stats > .cm-stats__item > dt + dd.cm-n ; span.cm-count ;
              a number JS updates is a bare .cm-n next to a fixed label
   Actions    .cm-act (quiet text/icon button in a row), .cm-menu (the "…" menu)
   Chips      a.cm-club-chip.accent-<colour> ; span.cm-pill ; a.cm-prompt-chip
   Notices    .cm-notice (+ --danger) ; .cm-form-error[role=alert]
   Counters   textarea[data-cm-counter=N] -> community.js adds .cm-counter
   Misc       .cm-empty (on ctg .ctg-empty), .cm-more, .cm-translation, .cm-push
   ===================================================================== */

/* ---------- 1. Frame -------------------------------------------------- */
.cm .ctg-wrap { padding-block-start: 16px; }
/* Single-column pages: the full-width subnav wrap and the narrow column
   under it read as one frame (base_community.html). */
.cm .cm-navwrap { padding-block-end: 0; }
.cm .cm-after-nav { padding-block-start: 0; }
.cm .cm-head { margin-block-end: 22px; }
.cm .page-head__actions:empty { display: none; }
.cm .cm-main-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cm .cm-single { display: flex; flex-direction: column; gap: 16px; }
.cm .cm-single > .cm-main-col { width: 100%; }
.cm .cm-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cm .cm-side:empty { display: none; }
.cm .cm-mobile-top { display: none; }
@media (max-width: 980px) {
  .cm .cm-mobile-top:not(:empty) { display: block; margin-block-end: 16px; }
  /* Under the feed the sidebar is a long scroll away; keep it compact. */
  .cm .cm-side { gap: 12px; }
}
@media (max-width: 560px) {
  .cm .ctg-wrap { padding-inline: 16px; }
  /* iOS zooms the page into any field under 16px. */
  .cm input, .cm select, .cm textarea,
  .cm-modal input, .cm-modal select, .cm-modal textarea { font-size: 16px; }
  .cm .cm-head { margin-block-end: 16px; }
}
.cm [id^="c"], .cm [id^="post-"] { scroll-margin-block-start: 80px; }
/* Plain links inside running text read as links (ctg-ui makes every link
   inherit its colour, which suits components, not sentences). */
.cm .cm-panel__body a:not([class]), .cm .cm-welcome__links a, .cm .sub a:not([class]) {
  color: var(--primary); font-weight: 650;
}
.cm .cm-panel__body a:not([class]):hover, .cm .cm-welcome__links a:hover, .cm .sub a:not([class]):hover {
  color: var(--primary-700); text-decoration: underline;
}

/* ---------- 2. Sub-navigation ----------------------------------------- */
.cm .cm-subnav {
  display: flex; align-items: center; gap: 12px;
  margin-block-end: 22px; border-block-end: 1px solid var(--border);
}
.cm .cm-subnav__tabs {
  flex: 1 1 auto; min-width: 0; margin: 0; border: 0;
  scrollbar-width: none;
  /* The containing block of the badge's visually-hidden text (position:
     absolute): without it that text is placed against the page and makes a
     360px screen scroll sideways. */
  position: relative;
}
.cm .cm-subnav__tabs::-webkit-scrollbar { display: none; }
.cm .cm-subnav__tabs a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 12px 12px; font-size: 14px;
}
.cm .cm-subnav__tabs a i { font-size: 13px; }
.cm .cm-subnav__badge { height: 20px; padding-inline: 7px; font-size: 11.5px; }
.cm .cm-subnav__tools { flex: none; display: flex; align-items: center; gap: 8px; padding-block: 6px; }
.cm .cm-search { position: relative; width: 220px; margin: 0; }
.cm .cm-search input {
  width: 100%; height: 36px; min-height: 36px;
  padding-block: 6px; padding-inline: 34px 12px;
  border-radius: 999px; background-color: var(--surface-2);
}
.cm .cm-search input:focus { background-color: var(--surface); }
.cm .cm-search__icon {
  position: absolute; inset-inline-start: 13px; inset-block-start: 50%;
  transform: translateY(-50%); color: var(--text-3); font-size: 13px; pointer-events: none;
}
/* Wins over .cm-act (declared further down) by being more specific. */
.cm .cm-subnav .cm-search-link { display: none; }
.cm .cm-me__btn {
  display: inline-flex; align-items: center; gap: 5px; height: 38px;
  padding: 3px; padding-inline-end: 9px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text-3);
  cursor: pointer; transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.cm .cm-me__btn:hover, .cm .cm-me__btn[aria-expanded="true"] {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50);
}
.cm .cm-me__btn i { font-size: 10px; }
/* The invitation count repeated on the avatar, for the widths where the
   "Practice partners" tab (and its badge) can sit past the scroller's edge.
   Three classes: it must beat ctg-ui.css's ".ctg .badge-soft" display. */
.cm .cm-me__btn { position: relative; }
.cm .cm-me__btn .cm-me__badge {
  display: none; position: absolute; inset-block-start: -5px; inset-inline-end: -5px;
  height: 18px; padding-inline: 6px; font-size: 11px;
}
@media (max-width: 760px) { .cm .cm-me__btn .cm-me__badge { display: inline-flex; } }
.cm .cm-me__name { text-transform: none; font-size: 13px; letter-spacing: 0; color: var(--text); }
.cm .cm-me__grow { flex: 1 1 auto; }
@media (max-width: 860px) { .cm .cm-search { width: 170px; } }
@media (max-width: 760px) { .cm .cm-subnav__tabs a i { display: none; } }
@media (max-width: 620px) {
  .cm .cm-search { display: none; }
  .cm .cm-subnav .cm-search-link { display: inline-flex; width: 36px; justify-content: center; padding: 0; }
  .cm .cm-subnav { gap: 6px; margin-block-end: 18px; }
  /* No gap and tighter tabs: at 360px the row must be cut inside a label,
     under the fade, or the fade covers only padding and the row looks
     complete while "Practice partners" and "Articles" are out of sight. */
  .cm .cm-subnav__tabs { gap: 0; }
  .cm .cm-subnav__tabs a { padding-inline: 8px; }
  /* The row scrolls; a soft edge says there is more of it. */
  .cm .cm-subnav__tabs {
    padding-inline-end: 22px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  [dir="rtl"] .cm .cm-subnav__tabs {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 26px), transparent);
  }
  .cm .cm-subnav__tools { gap: 4px; }
}

/* ---------- 3. Panels, sub-tabs, lists, stats -------------------------- */
.cm .cm-panel {
  padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.cm .cm-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-block-end: 12px;
}
.cm .cm-panel__title {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 14.5px; font-weight: 780; letter-spacing: -.01em; line-height: 1.3; color: var(--text);
}
.cm .cm-panel__title .ti { width: 28px; height: 28px; border-radius: 8px; font-size: 12.5px; }
.cm .cm-panel__body { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.cm .cm-panel__body > :last-child { margin-block-end: 0; }
.cm .cm-panel > .btn, .cm .cm-panel > .chiprow { margin-block-start: 12px; }
.cm .cm-panel__link { font-size: 12.5px; font-weight: 750; color: var(--primary); white-space: nowrap; }
.cm .cm-panel__link:hover { color: var(--primary-700); text-decoration: underline; }

.cm .cm-subtabs {
  display: flex; gap: 8px; overflow-x: auto; padding-block: 2px;
  scrollbar-width: none;
}
.cm .cm-subtabs::-webkit-scrollbar { display: none; }
.cm .cm-subtabs .chip { flex: none; }
.cm .cm-subtabs .chip[aria-current="page"], .cm .cm-subtabs .chip[aria-current="true"] {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

.cm .cm-list { display: flex; flex-direction: column; gap: 12px; }
.cm .cm-list[aria-busy="true"] { opacity: .75; transition: opacity .2s var(--ease); }

.cm .cm-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px;
  margin: 14px 0 0;
}
.cm .cm-stats__item {
  display: flex; flex-direction: column-reverse; gap: 2px;
  padding: 9px 10px; border-radius: var(--r); background: var(--surface-2);
}
.cm .cm-stats dt { margin: 0; font-size: 11.5px; font-weight: 650; color: var(--text-3); line-height: 1.3; }
.cm .cm-stats dd {
  margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cm .cm-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding-inline: 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2);
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ---------- 4. People ------------------------------------------------- */
.cm .cm-avatar, .cm-modal .cm-avatar { box-shadow: inset 0 0 0 1px rgba(20, 28, 48, .06); }
/* The initials are always in the circle; a photo covers them, and removes
   itself on a load error so the initials show through (see _avatar.html). */
.cm .cm-avatar, .cm-modal .cm-avatar { position: relative; }
.cm .cm-avatar > img, .cm-modal .cm-avatar > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit;
}
.cm .cm-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.cm .cm-chip { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cm .cm-chip__avatar { flex: none; border-radius: 50%; }
.cm .cm-chip__main { flex: 1 1 auto; min-width: 0; }
.cm .cm-chip__line { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; min-width: 0; }
.cm .cm-chip__name {
  font-size: 14.5px; font-weight: 750; letter-spacing: -.005em; line-height: 1.3;
  color: var(--text); overflow-wrap: anywhere;
}
.cm a.cm-chip__name:hover { color: var(--primary); }
.cm .cm-chip--sm .cm-chip__name { font-size: 13.5px; }
.cm .cm-chip__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px;
  margin-block-start: 1px; font-size: 12.5px; line-height: 1.4; color: var(--text-3);
}
.cm .cm-chip__lang { display: inline-flex; align-items: center; gap: 5px; }
.cm .cm-chip__lang i { font-size: 11px; }
.cm .cm-chip__time:hover { color: var(--primary); text-decoration: underline; }
.cm .cm-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .75; flex: none; }
.cm .cm-badge {
  display: inline-flex; align-items: center; height: 18px; padding-inline: 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--surface-3); color: var(--text-2);
}
.cm .cm-badge--team { background: var(--primary-50); color: var(--primary-700); }
.cm .cm-badge--teacher { background: var(--green-bg); color: var(--green); }
.cm .cm-level {
  display: inline-flex; align-items: center; height: 18px; padding-inline: 6px; border-radius: 6px;
  border: 1px solid var(--border-2); font-size: 11px; font-weight: 800;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}

/* ---------- 5. Post card ---------------------------------------------- */
.cm .cm-post {
  position: relative; padding: 16px 18px 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.cm .cm-post:hover { border-color: var(--border-2); }
.cm .cm-post:focus { outline: none; }
.cm .cm-post:focus-visible, .cm .cm-post:target { box-shadow: 0 0 0 3px var(--primary-100), var(--shadow-sm); border-color: var(--primary); }
.cm .cm-post--hidden { background: var(--surface-2); border-style: dashed; box-shadow: none; }
.cm .cm-post--new { animation: cm-arrive 1.4s var(--ease); }
@keyframes cm-arrive {
  from { box-shadow: 0 0 0 3px var(--primary-100); border-color: var(--primary); }
}
/* The head is the author line, then one row of labels: what kind of post it
   is, its club, its topic, who can see it. Kept out of the author line so a
   long nickname and "Check my English" never fight for a phone's width. */
.cm .cm-post__head { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cm .cm-kind {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding-inline: 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 750; white-space: nowrap;
}
.cm .cm-kind i { font-size: 11.5px; }
.cm .cm-kind--question { background: var(--sky-bg); color: var(--sky); }
.cm .cm-kind--check { background: var(--amber-bg); color: var(--amber); }
.cm .cm-post__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cm .cm-club-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding-inline: 10px;
  border-radius: 999px; background: var(--accent-bg); color: var(--accent);
  font-size: 12.5px; font-weight: 700; transition: box-shadow .14s var(--ease);
}
.cm .cm-club-chip:hover { box-shadow: inset 0 0 0 1px currentColor; }
.cm .cm-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding-inline: 10px;
  border-radius: 999px; background: var(--surface-3); color: var(--text-2);
  font-size: 12.5px; font-weight: 650;
}
.cm .cm-pill i { font-size: 11px; color: var(--text-3); }
.cm .cm-pill--quiet { background: transparent; border: 1px dashed var(--border-2); }

.cm .cm-post__body { margin-block-start: 10px; }
.cm .cm-post__text, .cm .cm-comment__text {
  font-size: 15px; line-height: 1.62; color: var(--text); text-align: start;
  overflow-wrap: anywhere; white-space: normal;
}
.cm .cm-post__text[data-cm-clamp] {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden;
}
.cm .cm-post--detail .cm-post__text { font-size: 16.5px; line-height: 1.68; }
.cm .cm-post__more { display: inline-flex; margin-block-start: 4px; font-size: 13.5px; font-weight: 700; color: var(--primary); }
.cm .cm-post__more:hover { color: var(--primary-700); text-decoration: underline; }
.cm .cm-post__more[hidden] { display: none; }
.cm .cm-mention { color: var(--primary); font-weight: 650; }
.cm .cm-mention:hover { color: var(--primary-700); text-decoration: underline; }

.cm .cm-post__media {
  display: flex; margin: 12px 0 0; overflow: hidden;
  aspect-ratio: 4 / 3; max-height: 420px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
}
.cm .cm-post__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cm .cm-post--detail .cm-post__media { aspect-ratio: auto; max-height: none; }
.cm .cm-post--detail .cm-post__media img { height: auto; max-height: 80vh; }

/* A flashcard deck shared in a post (_deck_share.html) */
.cm .cm-deck {
  margin-block-start: 12px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
}
.cm .cm-deck__head { display: flex; gap: 10px; align-items: flex-start; }
.cm .cm-deck__icon {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-sm); background: var(--primary-50); color: var(--primary);
}
.cm .cm-deck__titles { min-width: 0; }
.cm .cm-deck__kicker { margin: 0; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.cm .cm-deck__title { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.cm .cm-deck__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.cm .cm-deck__cards { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.cm .cm-deck__card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  padding: 7px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 14px; overflow-wrap: anywhere;
}
.cm .cm-deck__front { font-weight: 650; color: var(--text); }
.cm .cm-deck__back { color: var(--text-2); }
.cm .cm-deck__more { display: inline-block; margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.cm a.cm-deck__more { color: var(--primary); font-weight: 650; }
.cm a.cm-deck__more:hover { text-decoration: underline; }
.cm .cm-deck__actions { display: flex; gap: 8px; margin-block-start: 10px; }
.cm .cm-deck__actions:empty { display: none; }
@media (max-width: 420px) {
  .cm .cm-deck__card { grid-template-columns: 1fr; gap: 2px; }
}

.cm .cm-prompt-chip {
  display: flex; align-items: baseline; gap: 8px; margin-block-start: 12px;
  padding: 9px 12px; border-radius: var(--r); background: var(--amber-bg);
  color: var(--text); font-size: 13px; line-height: 1.45; transition: box-shadow .14s var(--ease);
}
.cm .cm-prompt-chip:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 40%, transparent); }
.cm .cm-prompt-chip i { color: var(--amber); font-size: 12px; }
.cm .cm-prompt-chip__k {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--amber);
}
.cm .cm-prompt-chip__t { min-width: 0; }

.cm .cm-notice {
  display: flex; align-items: flex-start; gap: 10px; margin-block-start: 12px;
  padding: 10px 12px; border-radius: var(--r);
  background: var(--surface-3); color: var(--text-2); font-size: 13.5px; line-height: 1.5;
}
.cm .cm-notice > i { margin-block-start: 3px; color: var(--text-3); }
.cm .cm-notice p { margin: 0; }
.cm .cm-notice p + p { margin-block-start: 2px; }
.cm .cm-notice__title { font-weight: 750; color: var(--text); }
.cm .cm-notice a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cm .cm-notice--danger { background: var(--rose-bg); }
.cm .cm-notice--danger > i { color: var(--rose); }

.cm .cm-translation {
  margin-block-start: 10px; padding: 10px 12px;
  background: var(--surface-2); border-inline-start: 3px solid var(--primary-100);
  border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm);
}
.cm .cm-translation[hidden] { display: none; }
.cm .cm-translation__label {
  display: flex; align-items: center; gap: 6px; margin: 0 0 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.cm .cm-translation__text { margin: 0; font-size: 14.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }

/* Footer: row 1 reactions, row 2 everyday actions + the "…" menu. */
.cm .cm-post__foot { display: flex; flex-direction: column; gap: 8px; margin-block-start: 12px; }
.cm .cm-reactions { display: flex; flex-wrap: wrap; gap: 6px; }
.cm .cm-reactions:empty { display: none; }
.cm .cm-react { height: 32px; padding-inline: 10px; gap: 5px; font-size: 13px; }
.cm .cm-react__emoji { font-size: 15px; line-height: 1; }
.cm .cm-react__label { font-weight: 650; }
.cm .cm-react .cm-n { font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cm .cm-react .cm-n[hidden] { display: none; }
.cm .cm-react:hover { border-color: var(--primary-100); background: var(--primary-50); color: var(--primary-700); }
.cm .cm-react[aria-pressed="true"] { background: var(--primary-50); border-color: var(--primary); color: var(--primary-700); }
.cm .cm-react[aria-busy="true"] { cursor: progress; }
.cm .cm-react--static, .cm .cm-react--static:hover {
  cursor: default; background: var(--surface-2); border-color: var(--border); color: var(--text-2);
}
@media (hover: none) { .cm .cm-react { height: 36px; } }

.cm .cm-post__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  margin-inline: -8px; padding-block-start: 6px; border-block-start: 1px solid var(--surface-3);
}
.cm .cm-act {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding-inline: 9px;
  border: 0; border-radius: 9px; background: transparent; color: var(--text-2);
  font-family: inherit; font-size: 13px; font-weight: 650; line-height: 1;
  white-space: nowrap; cursor: pointer; transition: background .12s var(--ease), color .12s var(--ease);
}
.cm .cm-act:hover, .cm .cm-act[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }
.cm .cm-act i { font-size: 13.5px; color: var(--text-3); }
.cm .cm-act:disabled, .cm .cm-act[aria-busy="true"] { opacity: .6; cursor: progress; }
.cm .cm-act--accent { color: var(--primary-700); }
.cm .cm-act--accent i { color: var(--primary); }
.cm .cm-act--good, .cm .cm-act--good i { color: var(--green); }
.cm .cm-act--warn, .cm .cm-act--warn i { color: var(--amber); }
.cm .cm-menu { margin-inline-start: auto; }
.cm .cm-menu__toggle { width: 34px; justify-content: center; padding: 0; }
.cm .cm-menu .dropdown-menu { min-width: 230px; }
.cm .cm-menu__danger, .cm .cm-menu__danger:hover { color: var(--rose); }
.cm .cm-menu__danger i { background: var(--rose-bg); color: var(--rose); }
@media (max-width: 420px) {
  .cm .cm-post { padding-inline: 14px; }
  /* The label goes, the name stays: visually hidden, still read aloud. */
  .cm .cm-act--compact .cm-act__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- 6. Empty, more, counters, errors ---------------------------- */
.cm .cm-empty { padding: 44px 22px; }
.cm .cm-empty .btn { margin-block-start: 2px; }
.cm .cm-more { display: flex; justify-content: center; padding-block: 4px; }
.cm .cm-more__btn { border-radius: 999px; padding-inline: 18px; }
.cm .cm-more__btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.cm .cm-counter, .cm-modal .cm-counter {
  margin-block-start: 5px; text-align: end; font-size: 12px;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.cm .cm-counter.is-near, .cm-modal .cm-counter.is-near { color: var(--amber); }
.cm .cm-counter.is-over, .cm-modal .cm-counter.is-over { color: var(--rose); font-weight: 750; }
.cm .cm-form-error, .cm-modal .cm-form-error {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px;
  background: var(--rose-bg); color: var(--rose); font-size: 13.5px; font-weight: 600;
}
.cm .cm-form-error[hidden], .cm-modal .cm-form-error[hidden] { display: none; }

/* ---------- 7. Mobile top strip, prompt, push, welcome, links ------------ */
.cm .cm-strip { display: flex; flex-direction: column; gap: 10px; }
.cm .cm-strip__prompt {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-sm); font-size: 13px; color: var(--text);
}
.cm .cm-strip__prompt i { color: var(--amber); }
.cm .cm-strip__k { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.cm .cm-strip__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm .cm-prompt { font-size: 14.5px; line-height: 1.55; color: var(--text); font-weight: 600; }

.cm .cm-push { display: flex; align-items: flex-start; gap: 12px; }
.cm .cm-push[hidden] { display: none; }
.cm .cm-push__icon {
  flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--primary-50); color: var(--primary);
}
.cm .cm-push__main { min-width: 0; }
.cm .cm-push__text { margin: 4px 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-2); }

.cm .cm-preview { display: flex; align-items: flex-start; gap: 14px; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }
.cm .cm-preview__icon {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--amber-bg); color: var(--amber); font-size: 17px;
}
.cm .cm-preview .cm-panel__body { margin-block-start: 4px; }

.cm .cm-welcome { padding: 24px; }
.cm .cm-welcome .cm-panel__title { font-size: 18px; }
.cm .cm-welcome__list { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 12px; }
.cm .cm-welcome__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.cm .cm-welcome__list .ti { margin-block-start: 1px; }
.cm .cm-welcome__links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; font-size: 13.5px; color: var(--text-3); }

.cm .cm-links ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.cm .cm-links a {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-inline: -8px;
  border-radius: 9px; font-size: 13.5px; font-weight: 650; color: var(--text-2);
}
.cm .cm-links a:hover { background: var(--surface-2); color: var(--text); }
.cm .cm-links a i { width: 16px; text-align: center; color: var(--text-3); font-size: 13px; }

/* ---------- 8. Dialogs (rendered outside .cm) ----------------------------- */
.cm-modal .modal-title { font-family: var(--ctg-font); }
.cm-modal .cm-modal__intro { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.cm-modal .cm-modal__small { margin-block: 12px 4px; }
.cm-modal .cm-confirm__text { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.cm-modal .cm-reasons { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.cm-modal .cm-reasons legend { float: none; width: auto; padding: 0; margin-block-end: 8px; }
@media (min-width: 576px) { .cm-modal .cm-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cm-modal .cm-reason {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; font-size: 14px; color: var(--text);
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.cm-modal .cm-reason:hover { border-color: var(--border-2); background: var(--surface-2); }
.cm-modal .cm-reason:has(input:checked) { border-color: var(--primary); background: var(--primary-50); }
.cm-modal .cm-reason input { flex: none; margin: 0; }
.cm-modal .form-control { width: 100%; }

/* A toast of our own, only when the site's toast module is unavailable. */
.cm-toast {
  position: fixed; inset-inline: 16px; inset-block-end: calc(16px + env(safe-area-inset-bottom));
  z-index: 1080; max-width: 420px; margin-inline: auto; padding: 12px 14px;
  border-radius: 12px; background: #1a2030; color: #fff; font: 600 14px/1.45 "Plus Jakarta Sans", system-ui, sans-serif;
  box-shadow: 0 18px 50px rgba(20, 28, 48, .22);
}
.cm-toast a { color: #c7c9ff; text-decoration: underline; margin-inline-start: 8px; }

/* ---------- 9. Motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cm .cm-post, .cm .cm-react, .cm .cm-act, .cm .cm-club-chip, .cm .cm-list { transition: none; }
  .cm .cm-post--new { animation: none; }
}