/* ============================================================
   comment-shell.css — the single "Comment Shell" (cm-*) used by
   EVERY comment surface in YoruVerse (see comment-layout-suggestion.md).

   Loaded AFTER main.css / discussion.css / profile-shell.css /
   collection-shell.css so it supersedes the five per-page forks of the
   same comment markup:

     chapter.html · source-reader.html · discussion-post.html ·
     community-collection.html · profile.html · user.html ·
     series.html · source-series.html (Reviews) · index.html (Latest)

   Structure:
     cm-shell
       cm-identity     — h2 + count + one escape link
       cm-controlzone  — sticky sort tabs + counters
       cm-composer     — collapsed to one line until focused
       cm-item         — flat row: avatar gutter + rail + body
       cm-more         — pager

   Rules of the file:
     * only --ss-* tokens (no --accent-primary, no legacy purple)
     * spacing scale 4 / 8 / 12 / 16 / 24 / 32 only
     * one border weight (1px), one radius (--ss-radius, composer + menu
       only — rows are borderless), one transition (--ss-transition)
     * per-page CSS may only add CONTEXT MODIFIERS
       (.cm-shell[data-context="review"] …), never new spacing/colours.

   Legacy class names (.comment-card, .fc-head, .review-item, .gb-*) are
   kept as compatibility aliases so every existing renderer, data-*
   attribute and script (comment-votes.js, comment-media.js,
   EXPSystem.decorateUserBadges, notification deep links, the
   #comment-<id> highlight) keeps working untouched.
   ============================================================ */

:root {
  /* Same values as series-shell.css — repeated so any page that loads
     comment-shell.css without a Shell stylesheet still resolves them. */
  --cm-gutter: 40px;
  --cm-gutter-sm: 32px;
  --cm-indent: 24px;
  --cm-indent-sm: 12px;
  --cm-measure: 72ch;

  --ss-4: 4px;  --ss-8: 8px;   --ss-12: 12px;
  --ss-16: 16px; --ss-24: 24px; --ss-32: 32px; --ss-48: 48px;
  --ss-radius: 8px;
  --ss-radius-chip: 6px;
  --ss-transition: 120ms ease;
}

/* ---------- 0b. Theme-scoped token guarantee ---------------------------
   The site defaults to dark (variables.css :root) and opts into light with
   [data-theme="light"], while series-shell.css declares its --ss-* scale
   light-first. To keep every comment surface correct on both themes without
   touching any other component, the tokens are re-declared here SCOPED TO
   .cm-shell only. Values are identical to series-shell.css.
   -------------------------------------------------------------------- */

:root:not([data-theme="light"]) .cm-shell,
[data-theme="dark"] .cm-shell {
  --ss-bg: #0f1115;
  --ss-surface: #14171d;
  --ss-border: #262b33;
  --ss-border-strong: #374151;
  --ss-text: #f9fafb;
  --ss-text-muted: #9ca3af;
  --ss-primary-bg: #e5e7eb;
  --ss-primary-bg-hover: #f9fafb;
  --ss-primary-fg: #111827;
  --ss-secondary-bg: #1f2937;
  --ss-secondary-bg-hover: #273244;
  --ss-secondary-border: #374151;
  --ss-ghost-fg: #9ca3af;
  --ss-ghost-bg-hover: #1f2937;
  --ss-ongoing: #22c55e;
  --ss-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .cm-shell {
  --ss-bg: #ffffff;
  --ss-surface: #f9fafb;
  --ss-border: #e5e7eb;
  --ss-border-strong: #d1d5db;
  --ss-text: #111827;
  --ss-text-muted: #6b7280;
  --ss-primary-bg: #1f2937;
  --ss-primary-bg-hover: #111827;
  --ss-primary-fg: #ffffff;
  --ss-secondary-bg: #f3f4f6;
  --ss-secondary-bg-hover: #e5e7eb;
  --ss-secondary-border: #d1d5db;
  --ss-ghost-fg: #4b5563;
  --ss-ghost-bg-hover: #f3f4f6;
  --ss-ongoing: #16a34a;
  --ss-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ---------- 1. Shell ---------------------------------------------------- */

.cm-shell {
  /* width is inherited from the host shell — never its own max-width */
  width: 100%;
  max-width: none;
  background: var(--ss-bg, transparent);
  color: var(--ss-text, inherit);
  border: 0;
  box-shadow: none;
  padding: 0;
}

.cm-shell * { box-sizing: border-box; }

/* Legacy wrappers become the shell */
.discussion-section.cm-shell,
.cm-shell.comment-section {
  border-radius: var(--ss-radius);
  padding: var(--ss-16) 0 0;
}

/* ---------- 2. Identity strip ------------------------------------------ */

.cm-shell .cm-identity,
.cm-shell > .discussion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-12);
  flex-wrap: wrap;
  margin: 0 0 var(--ss-12);
  padding: 0 0 var(--ss-12);
  border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.08));
}

.cm-shell .cm-identity-title,
.cm-shell .discussion-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ss-text, inherit);
  letter-spacing: -0.01em;
}

.cm-shell .cm-identity-count { color: var(--ss-text-muted, #9ca3af); font-weight: 500; }

/* ---------- 3. Control zone (sticky) ----------------------------------- */

.cm-shell .cm-controlzone,
.cm-shell .discussion-sort,
.cm-shell .reviews-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-8);
  flex-wrap: wrap;
  margin: 0 0 var(--ss-16);
  padding: var(--ss-8) 0;
  background: var(--ss-bg, inherit);
}

.cm-shell .cm-controlzone--sticky {
  position: sticky;
  top: var(--cm-sticky-top, 0px);
  z-index: 5;
  border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.08));
  backdrop-filter: blur(6px);
}

.cm-shell .cm-tabs,
.cm-shell .reviews-sort {
  display: flex;
  align-items: center;
  gap: var(--ss-4);
  flex-wrap: wrap;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* One sort UI for all four old ones */
.cm-shell .cm-tab,
.cm-shell .sort-btn,
.cm-shell .reviews-sort button {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ss-text-muted, #9ca3af);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--ss-radius-chip);
  cursor: pointer;
  transition: color var(--ss-transition), background var(--ss-transition),
              border-color var(--ss-transition);
}

.cm-shell .cm-tab:hover,
.cm-shell .sort-btn:hover,
.cm-shell .reviews-sort button:hover {
  color: var(--ss-text, inherit);
  background: var(--ss-ghost-bg-hover, rgba(255,255,255,.05));
}

.cm-shell .cm-tab.active,
.cm-shell .cm-tab[aria-selected="true"],
.cm-shell .sort-btn.active,
.cm-shell .reviews-sort button.active {
  color: var(--ss-text, inherit);
  background: var(--ss-secondary-bg, rgba(255,255,255,.06));
  border-color: var(--ss-border-strong, rgba(255,255,255,.14));
}

.cm-shell .cm-controlzone-meta { font-size: 0.8125rem; color: var(--ss-text-muted, #9ca3af); }

.cm-shell .cm-tab:focus-visible,
.cm-shell .sort-btn:focus-visible,
.cm-shell .cm-btn:focus-visible,
.cm-shell .comment-btn:focus-visible,
.cm-shell .cm-menu-trigger:focus-visible,
.cm-shell .comment-menu-trigger:focus-visible {
  outline: 2px solid var(--ss-border-strong, #d1d5db);
  outline-offset: 2px;
}

/* ---------- 4. Composer (collapsed to one line until focused) ---------- */

.cm-shell .cm-composer,
.cm-shell > .comment-form,
.cm-shell .cm-composer--inline {
  display: flex;
  align-items: flex-start;
  gap: var(--ss-12);
  padding: var(--ss-12);
  margin: 0 0 var(--ss-16);
  background: var(--ss-surface, rgba(255,255,255,.02));
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
  border-radius: var(--ss-radius);
  box-shadow: none;
  transition: border-color var(--ss-transition), background var(--ss-transition);
}

.cm-shell .cm-composer:focus-within,
.cm-shell > .comment-form:focus-within {
  border-color: var(--ss-border-strong, rgba(255,255,255,.16));
  background: var(--ss-bg, transparent);
}

/* collapsed state — one line: avatar + input, toolbar/actions hidden */
.cm-shell .cm-composer.cm-composer--collapsed .format-toolbar,
.cm-shell .cm-composer.cm-composer--collapsed .comment-actions,
.cm-shell .cm-composer.cm-composer--collapsed .cm-composer-aside,
.cm-shell .cm-composer.cm-composer--collapsed .comment-image-preview {
  display: none !important;
}

.cm-shell .cm-composer.cm-composer--collapsed .comment-input,
.cm-shell .cm-composer.cm-composer--collapsed .cm-composer-input {
  min-height: 40px;
  height: 40px;
  resize: none;
  overflow: hidden;
}

.cm-shell .comment-input,
.cm-shell .cm-composer-input {
  width: 100%;
  background: var(--ss-bg, rgba(0,0,0,.2));
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
  border-radius: var(--ss-radius-chip);
  color: var(--ss-text, inherit);
  font-size: 0.9375rem;
  line-height: 1.6;
  padding: 10px 12px;
  transition: border-color var(--ss-transition);
}

.cm-shell .comment-input:focus,
.cm-shell .cm-composer-input:focus {
  outline: none;
  border-color: var(--ss-border-strong, rgba(255,255,255,.18));
  box-shadow: none;
}

.cm-shell .format-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ss-4);
  flex-wrap: wrap;
  margin: 0 0 var(--ss-8);
  padding: 0;
  background: transparent;
  border: 0;
}

.cm-shell .format-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--ss-radius-chip);
  background: transparent;
  color: var(--ss-text-muted, #9ca3af);
  cursor: pointer;
  font-size: 0.8125rem;
  transition: color var(--ss-transition), background var(--ss-transition);
}
.cm-shell .format-btn:hover {
  color: var(--ss-text, inherit);
  background: var(--ss-ghost-bg-hover, rgba(255,255,255,.06));
}

/* Neutral primary — no legacy purple */
.cm-shell .cm-composer .btn-primary,
.cm-shell .cm-post-btn {
  background: var(--ss-primary-bg, #1f2937);
  color: var(--ss-primary-fg, #fff);
  border: 1px solid transparent;
  box-shadow: none;
}
.cm-shell .cm-composer .btn-primary:hover,
.cm-shell .cm-post-btn:hover { background: var(--ss-primary-bg-hover, #111827); }

.cm-shell .cm-composer-aside { display: flex; align-items: center; gap: var(--ss-8); flex-wrap: wrap; }

/* ---------- 5. Rows (flat, no cards) ----------------------------------- */

.cm-shell .cm-item,
.cm-shell .comment-card,
.cm-shell .review-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--cm-gutter) minmax(0, 1fr);
  gap: var(--ss-12);
  padding: var(--ss-16) 0;
  margin: 0;
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.07));
  border-radius: 0;
  box-shadow: none !important;
}

.cm-shell .cm-item:last-child,
.cm-shell .comment-card:last-child,
.cm-shell .review-item:last-child { border-bottom: 0; }

.cm-shell .cm-item:hover,
.cm-shell .comment-card:hover { background: transparent !important; }

/* Avatar gutter — fixed, so row height is predictable at 500 comments */
.cm-shell .cm-avatar,
.cm-shell .comment-avatar,
.cm-shell .review-avatar {
  width: var(--cm-gutter);
  height: var(--cm-gutter);
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
  box-shadow: none;
}

.cm-shell .cm-item-body,
.cm-shell .comment-body { min-width: 0; }

/* One identity line that can never wrap */
.cm-shell .cm-item-identity,
.cm-shell .comment-meta,
.cm-shell .fc-head {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ss-8);
  min-width: 0;
  margin: 0 0 var(--ss-4);
  flex-wrap: nowrap;
}

.cm-shell .comment-author,
.cm-shell .cm-item-name,
.cm-shell .fc-author {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ss-text, inherit);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-shell .comment-author-link:hover .comment-author,
.cm-shell .fc-author:hover { color: var(--ss-text, inherit); text-decoration: underline; }

/* badge cluster: horizontally scrollable, never glowing, never wrapping */
.cm-shell .comment-badges,
.cm-shell .cm-item-badges,
.cm-shell .fc-badges {
  display: flex;
  align-items: center;
  gap: var(--ss-4);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.cm-shell .comment-badges::-webkit-scrollbar,
.cm-shell .fc-badges::-webkit-scrollbar { display: none; }
.cm-shell .comment-badges * ,
.cm-shell .fc-badges * { text-shadow: none !important; box-shadow: none !important; }

.cm-shell .comment-time,
.cm-shell .cm-item-time,
.cm-shell .fc-time {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--ss-text-muted, #9ca3af);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Body: one type scale + measure control */
.cm-shell .comment-content,
.cm-shell .cm-item-content,
.cm-shell .thread-body,
.cm-shell .review-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ss-text, inherit);
  max-width: var(--cm-measure);
  overflow-wrap: anywhere;
}

.cm-shell .cm-item--op .thread-body,
.cm-shell .cm-item--op .comment-content { font-size: 1rem; }

/* Actions: exactly three visible — Like, Reply, ⋯ */
.cm-shell .cm-item-actions,
.cm-shell .comment-footer,
.cm-shell .thread-op-actions {
  display: flex;
  align-items: center;
  gap: var(--ss-4);
  flex-wrap: wrap;
  margin-top: var(--ss-8);
  padding: 0;
  border: 0;
}

.cm-shell .cm-btn,
.cm-shell .comment-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ss-radius-chip);
  color: var(--ss-text-muted, #9ca3af);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 6px 8px;
  cursor: pointer;
  transition: color var(--ss-transition), background var(--ss-transition);
}
.cm-shell .cm-btn:hover,
.cm-shell .comment-btn:hover {
  color: var(--ss-text, inherit);
  background: var(--ss-ghost-bg-hover, rgba(255,255,255,.06));
}
/* liked state is neutral text + a red heart — never legacy purple */
.cm-shell .comment-btn.liked,
.cm-shell .cm-btn.is-active { color: var(--ss-text, inherit); }
.cm-shell .comment-btn.liked i,
.cm-shell .cm-btn.is-active i { color: #ef4444; }

/* ⋯ menu — one implementation, destructive items separated + dimmed */
.cm-shell .cm-menu,
.cm-shell .comment-menu { position: relative; flex-shrink: 0; margin-left: auto; }

.cm-shell .cm-menu-trigger,
.cm-shell .comment-menu-trigger {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ss-radius-chip);
  color: var(--ss-text-muted, #9ca3af);
  cursor: pointer;
  transition: color var(--ss-transition), background var(--ss-transition);
}
.cm-shell .cm-menu-trigger:hover,
.cm-shell .comment-menu-trigger:hover {
  color: var(--ss-text, inherit);
  background: var(--ss-ghost-bg-hover, rgba(255,255,255,.06));
}

.cm-shell .cm-menu-dropdown,
.cm-shell .comment-menu-dropdown {
  background: var(--ss-bg, #14171d);
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow, 0 8px 24px rgba(0,0,0,.35));
  padding: var(--ss-4);
  min-width: 176px;
}
.cm-shell .cm-menu-dropdown .menu-item,
.cm-shell .comment-menu-dropdown .menu-item {
  display: flex; align-items: center; gap: var(--ss-8);
  width: 100%;
  padding: 8px 10px;
  font-size: 0.8125rem;
  color: var(--ss-text, inherit);
  background: transparent;
  border: 0;
  border-radius: var(--ss-radius-chip);
  cursor: pointer;
  transition: background var(--ss-transition);
}
.cm-shell .cm-menu-dropdown .menu-item:hover,
.cm-shell .comment-menu-dropdown .menu-item:hover {
  background: var(--ss-ghost-bg-hover, rgba(255,255,255,.06));
}
.cm-shell .comment-menu-dropdown .menu-item-danger,
.cm-shell .cm-menu-dropdown .menu-item-danger {
  color: #ef4444;
  opacity: .75;
  margin-top: var(--ss-4);
  border-top: 1px solid var(--ss-border, rgba(255,255,255,.08));
  border-radius: 0 0 var(--ss-radius-chip) var(--ss-radius-chip);
}
.cm-shell .comment-menu-dropdown .menu-item-danger:hover,
.cm-shell .cm-menu-dropdown .menu-item-danger:focus-visible { opacity: 1; }

/* ---------- 6. Thread rail + replies ---------------------------------- */

.cm-shell .cm-item--has-replies > .cm-rail,
.cm-shell .comment-card.cm-item--has-replies > .cm-rail {
  position: absolute;
  left: calc(var(--cm-gutter) / 2 - 1px);
  top: calc(var(--ss-16) + var(--cm-gutter) + var(--ss-8));
  bottom: var(--ss-12);
  width: 2px;
  padding: 0;
  border: 0;
  background: var(--ss-border, rgba(255,255,255,.1));
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--ss-transition);
  z-index: 1;
}
.cm-shell .cm-item--has-replies > .cm-rail:hover { background: var(--ss-border-strong, rgba(255,255,255,.22)); }

/* always-visible branch chip */
.cm-shell .replies-toggle,
.cm-shell .cm-branch {
  margin: var(--ss-8) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.cm-shell .replies-toggle-btn,
.cm-shell .cm-branch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ss-text-muted, #9ca3af);
  background: transparent;
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
  border-radius: var(--ss-radius-chip);
  cursor: pointer;
  transition: color var(--ss-transition), border-color var(--ss-transition);
}
.cm-shell .replies-toggle-btn:hover,
.cm-shell .cm-branch-btn:hover {
  color: var(--ss-text, inherit);
  border-color: var(--ss-border-strong, rgba(255,255,255,.18));
}

/* Indentation stops growing: one step, then `replying to @user` */
.cm-shell .replies-container,
.cm-shell .cm-replies {
  margin: var(--ss-8) 0 0 var(--cm-indent);
  padding: 0;
  border: 0;
  background: transparent;
}
.cm-shell .replies-container .replies-container,
.cm-shell .cm-replies .cm-replies { margin-left: 0; }

.cm-shell .cm-item--reply,
.cm-shell .comment-card.comment-reply {
  grid-template-columns: var(--cm-gutter-sm) minmax(0, 1fr);
  padding: var(--ss-12) 0;
  background: transparent !important;
  border-left: 0;
}
.cm-shell .cm-item--reply .comment-avatar,
.cm-shell .cm-item--reply .cm-avatar { width: var(--cm-gutter-sm); height: var(--cm-gutter-sm); }

.cm-shell .cm-item-replyingto,
.cm-shell .reply-context {
  font-size: 0.75rem;
  color: var(--ss-text-muted, #9ca3af);
  margin-bottom: 2px;
}

/* ---------- 7. State modifiers ---------------------------------------- */

.cm-shell .cm-item--staff,
.cm-shell .comment-card.comment-staff {
  background: transparent !important;
  border-left: 2px solid var(--ss-border-strong, rgba(255,255,255,.2));
  padding-left: var(--ss-12);
}

.cm-shell .cm-item--pinned,
.cm-shell .comment-card.gb-pinned { border-left: 2px solid var(--ss-ongoing, #16a34a); padding-left: var(--ss-12); }

.cm-shell .cm-item--hidden,
.cm-shell .comment-blocked {
  display: block;
  padding: var(--ss-12) 0;
  color: var(--ss-text-muted, #9ca3af);
  font-size: 0.875rem;
}

.cm-shell .cm-item--fresh::before {
  content: "";
  position: absolute;
  left: -8px; top: var(--ss-16); bottom: var(--ss-16);
  width: 2px;
  border-radius: 2px;
  background: var(--ss-ongoing, #16a34a);
  animation: cm-fresh-fade 6s ease forwards;
}
@keyframes cm-fresh-fade { 0%,60% { opacity: 1; } 100% { opacity: 0; } }

.cm-shell .comment-card.comment-highlight,
.cm-shell .cm-item--highlight {
  background: var(--ss-surface, rgba(255,255,255,.04)) !important;
  box-shadow: inset 2px 0 0 var(--ss-border-strong, rgba(255,255,255,.3)) !important;
}

/* reactions / votes share one chip strip */
.cm-shell .cm-item-reactions,
.cm-shell .comment-reactions,
.cm-shell .cv-wrap {
  display: flex; align-items: center; gap: var(--ss-4);
  flex-wrap: wrap;
  margin-top: var(--ss-8);
  padding: 0;
  border: 0;
  background: transparent;
}

/* ---------- 8. Empty state + pager ------------------------------------ */

.cm-shell .cm-empty,
.cm-shell .empty-state,
.cm-shell .review-empty,
.cm-shell .gb-empty {
  padding: var(--ss-32) var(--ss-16) !important;
  text-align: center;
  color: var(--ss-text-muted, #9ca3af);
  font-size: 0.875rem;
  background: transparent;
  border: 0;
}
.cm-shell .empty-state-icon { font-size: 1.5rem; color: var(--ss-text-muted, #9ca3af); margin-bottom: var(--ss-8); }
.cm-shell .empty-state-title { font-size: 0.9375rem; font-weight: 600; color: var(--ss-text, inherit); margin: 0 0 var(--ss-4); }
.cm-shell .empty-state-desc { margin: 0; font-size: 0.875rem; }

.cm-shell .cm-more,
.cm-shell .gb-more,
.cm-shell .reviews-more {
  display: block;
  width: 100%;
  margin: var(--ss-16) 0 0;
  padding: 10px var(--ss-16);
  background: transparent;
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  border-radius: var(--ss-radius);
  color: var(--ss-text, inherit);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--ss-transition), background var(--ss-transition);
}
.cm-shell .cm-more:hover,
.cm-shell .gb-more:hover,
.cm-shell .reviews-more:hover {
  border-color: var(--ss-border-strong, rgba(255,255,255,.2));
  background: var(--ss-ghost-bg-hover, rgba(255,255,255,.04));
}

/* ---------- 9. Context modifiers (the only allowed divergence) --------- */

/* Reviews: rating row + vote total */
.cm-shell[data-context="review"] .cm-item-rating,
.cm-shell[data-context="review"] .review-stars { display: flex; align-items: center; gap: 2px; margin: 0 0 var(--ss-4); }
.cm-shell[data-context="review"] .cm-item-extra,
.cm-shell[data-context="review"] .review-vote-total { font-size: 0.8125rem; color: var(--ss-text-muted, #9ca3af); }

/* Guestbook: privacy aside + pin tag */
.cm-shell[data-context="guestbook"] .gb-privacy,
.cm-shell[data-context="guestbook"] .gb-note { font-size: 0.8125rem; color: var(--ss-text-muted, #9ca3af); }
.cm-shell[data-context="guestbook"] .gb-pin-tag {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .02em;
  color: var(--ss-text-muted, #9ca3af);
  border: 1px solid var(--ss-border, rgba(255,255,255,.12));
  border-radius: var(--ss-radius-chip);
  padding: 2px 6px;
  background: transparent;
  box-shadow: none;
}

/* Discussion: OP is a row like every other row (fc-head retired visually) */
.cm-shell[data-context="discussion"] .thread-op,
.cm-shell[data-context="discussion"] .thread-node {
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.07));
  box-shadow: none !important;
  border-radius: 0;
}
/* The thread OP is NOT an avatar-gutter row: its avatar lives inside
   .fc-head, so its children (fc-head, title, tags, body, image, actions)
   must flow in ONE column. Without this, the generic .cm-item two-column
   grid auto-places them alternately into the narrow avatar gutter and the
   content column, so tags/timestamps land on top of the body text.
   Mobile and desktop both inherit this single-column flow. */
.cm-shell .thread-op.cm-item,
.cm-shell .cm-item--op {
  display: block;
  grid-template-columns: none;
  padding-left: 0;
  padding-right: 0;
}
.cm-shell .thread-op.cm-item > *,
.cm-shell .cm-item--op > * {
  grid-column: auto;
  min-width: 0;
}
/* Keep the OP identity line as its own row with a real avatar. */
.cm-shell .thread-op.cm-item .fc-head,
.cm-shell .cm-item--op .fc-head {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ss-8);
  margin-bottom: var(--ss-8);
}
.cm-shell .thread-op.cm-item .fc-avatar,
.cm-shell .cm-item--op .fc-avatar {
  width: var(--cm-gutter);
  height: var(--cm-gutter);
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.cm-shell .thread-op.cm-item .thread-body,
.cm-shell .cm-item--op .thread-body,
.cm-shell .thread-op.cm-item .thread-tags,
.cm-shell .cm-item--op .thread-tags,
.cm-shell .thread-op.cm-item .thread-title,
.cm-shell .cm-item--op .thread-title { width: 100%; }
.cm-shell .thread-op.cm-item .thread-body { overflow-wrap: anywhere; }

.cm-shell[data-context="discussion"] .thread-title {
  font-size: 1.125rem; font-weight: 600; line-height: 1.35; margin: var(--ss-4) 0 var(--ss-8);
  color: var(--ss-text, inherit);
}
.cm-shell[data-context="discussion"] .thread-branch { background: var(--ss-border, rgba(255,255,255,.1)); }

/* Read-only surfaces: compact rows (home Latest Comments, profile tab,
   notification previews) — same identity line, no composer, no actions */
.cm-item--compact {
  display: grid;
  grid-template-columns: var(--cm-gutter-sm) minmax(0, 1fr);
  gap: var(--ss-8);
  padding: var(--ss-12) 0;
  border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.07));
  background: transparent;
}
.cm-item--compact:last-child { border-bottom: 0; }
.cm-item--compact .cm-avatar,
.cm-item--compact img { width: var(--cm-gutter-sm); height: var(--cm-gutter-sm); border-radius: 50%; object-fit: cover; }
.cm-item--compact .cm-item-content { font-size: 0.875rem; line-height: 1.55; color: var(--ss-text, inherit); }

/* ---------- 10. Mobile ------------------------------------------------- */

@media (max-width: 768px) {
  :root { --cm-gutter: 32px; --cm-gutter-sm: 28px; --cm-indent: 12px; }

  .cm-shell .cm-item,
  .cm-shell .comment-card,
  .cm-shell .review-item { padding: var(--ss-12) 0; gap: var(--ss-8); }

  .cm-shell .cm-composer,
  .cm-shell > .comment-form { padding: var(--ss-8); gap: var(--ss-8); }

  .cm-shell .comment-time,
  .cm-shell .fc-time { font-size: 0.75rem; }

  .cm-shell .cm-menu-dropdown,
  .cm-shell .comment-menu-dropdown { min-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-shell *,
  .cm-shell *::before { transition: none !important; animation: none !important; }
}

/* ---------- 11. Retiring the legacy forks ------------------------------
   These rules only neutralise decoration that the shell replaces
   (gradient staff border-image, tinted body fills, extra section padding,
   nested card fills). No behaviour, hook or content is affected.
   -------------------------------------------------------------------- */

.discussion-section.cm-shell {
  margin-top: var(--ss-24);
  padding-top: var(--ss-16);
  border-top: 1px solid var(--ss-border, rgba(255,255,255,.08));
}

.cm-shell .comment-staff {
  border-image: none !important;
  border-left: 2px solid var(--ss-border-strong, rgba(255,255,255,.2)) !important;
}
.cm-shell .comment-staff.comment-thread[data-comment-id] .comment-body,
.cm-shell .comment-staff.comment-card[data-comment-id] .comment-body {
  background: transparent !important;
  border-radius: 0 !important;
}

.cm-shell .comment-thread,
.cm-shell .thread-node > .comment-card,
.cm-shell .cm-replies > .comment-card {
  background: transparent !important;
  box-shadow: none !important;
}

/* Compact rows live outside a shell (home / profile tab / notifications),
   so their identity line needs the same grammar without the .cm-shell scope. */
.cm-item--compact .cm-item-identity {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ss-8);
  min-width: 0;
  margin-bottom: 2px;
}
.cm-item--compact .comment-author,
.cm-item--compact .cm-item-name {
  font-size: 0.875rem; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-item--compact .comment-time,
.cm-item--compact .cm-item-time { font-size: 0.75rem; color: var(--ss-text-muted, #9ca3af); white-space: nowrap; }

/* The list itself is a plain flow of rows — no black surface, no box. */
.cm-shell #commentsList,
.cm-shell [data-cm-list],
.cm-shell .cm-list {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}

a.cm-item--compact { color: inherit; text-decoration: none; align-items: start; }
.cm-item--compact .cm-item-content,
.cm-item--compact .cm-item-extra {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cm-item--compact .cm-item-content { color: var(--ss-text-secondary, #cbd5e1); margin: 2px 0 4px; }
.cm-item--compact .cm-item-extra { color: var(--ss-text-muted, #9ca3af); }
.cm-item--compact .cm-item-badges:empty { display: none; }