/* Community comments: journal-page section, /community/ feed, account panel and moderation page.
   Look: avatars, one window per journal with an always-open composer, pills, replies, a helpful button. */
.cm { --brand: #0e7490; --brand-d: #0b5f77; --ink: #0f172a; --mut: #64748b; --soft: #94a3b8; --line: #e2e8f0; --bg: #f8fafc;
  font-size: .92rem; color: #334155; line-height: 1.5; }
.cm *, .cm *::before, .cm *::after { box-sizing: border-box; }
.cm button { font: inherit; cursor: pointer; }
.cm-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm [hidden] { display: none !important; }
.cm :focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; border-radius: 8px; }

/* ---- avatar ---- */
.cm-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .02em; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(15, 23, 42, .25); user-select: none; }
.cm-av-sm { width: 32px; height: 32px; font-size: .72rem; }
.cm-av-ghost { background: #e2e8f0; color: #94a3b8; box-shadow: 0 0 0 2px #fff; }

/* ---- summary card ---- */
.cm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.cm-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.cm-title .cm-ic { color: var(--brand); width: 18px; height: 18px; }
.cm-all { margin-left: 4px; font-size: .76rem; font-weight: 600; color: var(--mut); text-decoration: none; }
.cm-all:hover { color: var(--brand); text-decoration: underline; }
.cm-count-pill { font-size: .72rem; font-weight: 700; background: #ecfeff; color: var(--brand); border-radius: 999px; padding: 2px 9px; }
.cm-tabs { display: inline-flex; background: #f1f5f9; border-radius: 999px; padding: 3px; gap: 2px; }
.cm-tab { border: 0; background: transparent; color: var(--mut); font-weight: 600; font-size: .8rem; padding: 6px 14px; border-radius: 999px; transition: background .15s, color .15s, box-shadow .15s; }
.cm-tab:hover { color: var(--ink); }
.cm-tab[aria-selected="true"] { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
.cm-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 28px; align-items: center; padding: 16px 18px; margin-bottom: 14px;
  background: linear-gradient(135deg, #f0fdfa, #f0f9ff 55%, #eef2ff); border: 1px solid #dbeafe; border-radius: 16px; }
.cm-score { text-align: center; min-width: 96px; }
.cm-score-n { font-size: 2.4rem; font-weight: 800; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.cm-score-s { font-size: .74rem; color: var(--mut); margin-top: 4px; }
.cm-stars { display: inline-flex; gap: 1px; color: #f59e0b; vertical-align: middle; }
.cm-stars svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.cm-stars .off { color: #e2e8f0; }
.cm-score .cm-stars { margin-top: 6px; }
.cm-score .cm-stars svg { width: 17px; height: 17px; }
.cm-hist { display: grid; gap: 4px; }
.cm-hrow { display: grid; grid-template-columns: 16px minmax(0, 1fr) 24px; align-items: center; gap: 8px; font-size: .74rem; color: var(--mut); font-variant-numeric: tabular-nums; }
.cm-hbar { height: 7px; background: rgba(148, 163, 184, .25); border-radius: 999px; overflow: hidden; }
.cm-hbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fbbf24, #f59e0b); border-radius: 999px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.cm-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.cm-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: .78rem; color: #334155; }
.cm-chip .cm-ic { width: 14px; height: 14px; color: var(--brand); }
.cm-chip b { color: var(--ink); }
.cm-chip-ok .cm-ic { color: #16a34a; } .cm-chip-no .cm-ic { color: #e11d48; }

/* ---- empty + loading + notes ---- */
.cm-empty { text-align: center; padding: 26px 16px; border: 1px dashed #cbd5e1; border-radius: 16px; background: #fcfdff; color: var(--mut); }
.cm-empty .cm-ic { width: 34px; height: 34px; color: #67e8f9; margin-bottom: 6px; stroke-width: 1.6; }
.cm-empty strong { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 2px; }
.cm-note { color: var(--mut); font-size: .85rem; margin: 6px 0; }
.cm-skel { display: flex; gap: 12px; padding: 14px 0; }
.cm-skel i { display: block; border-radius: 8px; background: linear-gradient(90deg, #f1f5f9 25%, #e8eef5 37%, #f1f5f9 63%); background-size: 400% 100%; animation: cm-shimmer 1.4s ease infinite; }
.cm-skel .c { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.cm-skel .l { flex: 1; display: grid; gap: 8px; align-content: start; }
.cm-skel .l i { height: 11px; } .cm-skel .l i:first-child { width: 38%; } .cm-skel .l i:last-child { width: 82%; }

/* ---- comment card ---- */
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cm-item { display: flex; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  transition: box-shadow .2s, border-color .2s, transform .2s; animation: cm-in .35s ease both; }
.cm-item:hover { border-color: #cbd5e1; box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .18); }
.cm-go { cursor: pointer; }
.cm-go:hover { border-color: #67e8f9; }
.cm-flash { animation: cm-flash 2.2s ease both; }
@media (prefers-reduced-motion: no-preference) {
  .cm-flash { animation: cm-flash 2.2s ease both, cm-land .55s cubic-bezier(.34, 1.56, .64, 1) both; }
  .cm-reply.cm-flash { animation: cm-flash 2.2s ease both, cm-land-r .5s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@keyframes cm-land { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes cm-land-r { from { opacity: 0; transform: translateX(-12px) scale(.96); } to { opacity: 1; transform: none; } }
.cm-main { min-width: 0; flex: 1; }
.cm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .8rem; color: var(--mut); }
.cm-author { font-weight: 700; color: var(--ink); font-size: .9rem; }
.cm-role { font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 1px solid #cbd5e1; color: #475569; border-radius: 999px; padding: 1px 8px; }
.cm-role-author { border-color: #a5f3fc; color: #0e7490; background: #ecfeff; }
.cm-role-reviewer { border-color: #ddd6fe; color: #6d28d9; background: #f5f3ff; }
.cm-role-editor { border-color: #fde68a; color: #b45309; background: #fffbeb; }
.cm-you { font-size: .68rem; font-weight: 700; background: var(--brand); color: #fff; border-radius: 999px; padding: 2px 8px; }
.cm-head time { color: var(--soft); }
.cm-sep { color: #cbd5e1; }
.cm-journal { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-weight: 600; text-decoration: none; background: #ecfeff; border-radius: 999px; padding: 2px 10px 2px 8px; font-size: .76rem; }
.cm-journal .cm-ic { width: 13px; height: 13px; }
a.cm-journal:hover { background: #cffafe; }
.cm-badge { font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: #fef3c7; color: #92400e; }
.cm-badge-red { background: #fee2e2; color: #991b1b; }
.cm-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.cm-fact { display: inline-flex; align-items: center; gap: 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; font-size: .76rem; color: #475569; }
.cm-fact .cm-ic { width: 13px; height: 13px; color: var(--soft); }
.cm-fact.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; } .cm-fact.ok .cm-ic { color: #16a34a; }
.cm-fact.no { background: #fff1f2; border-color: #fecdd3; color: #be123c; } .cm-fact.no .cm-ic { color: #e11d48; }
.cm-body { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #1e293b; }
.cm-body.cm-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.cm-readmore { background: none; border: 0; padding: 0; margin-top: 4px; color: var(--brand); font-weight: 600; font-size: .82rem; }
.cm-readmore:hover { text-decoration: underline; }
.cm-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; }
.cm-btn-s { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent; color: var(--mut); font-size: .8rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.cm-btn-s:hover { background: #f1f5f9; color: var(--ink); }
.cm-btn-s[disabled] { opacity: .55; cursor: default; }
.cm-help[aria-pressed="true"] { background: #ecfeff; color: var(--brand); border-color: #a5f3fc; }
.cm-help.cm-pop .cm-ic { animation: cm-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.cm-help .n { font-variant-numeric: tabular-nums; }
.cm-del:hover { background: #fff1f2; color: #be123c; }
.cm-ok-btn { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; } .cm-ok-btn:hover { background: #dcfce7; color: #166534; }
.cm-no-btn { color: #be123c; border-color: #fecdd3; background: #fff1f2; } .cm-no-btn:hover { background: #ffe4e6; color: #9f1239; }
.cm-more { margin-top: 12px; text-align: center; }

/* ---- buttons ---- */
.cm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; border: 1px solid #cbd5e1; border-radius: 999px; padding: 8px 18px; font-weight: 600; color: #334155; transition: all .15s; }
.cm-btn:hover { border-color: #22d3ee; color: var(--brand); }
.cm-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 2px 8px -2px rgba(14, 116, 144, .5); }
.cm-btn-primary:hover { background: var(--brand-d); color: #fff; transform: translateY(-1px); }
.cm-btn[disabled] { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.cm-btn .cm-logo { width: 18px; height: 18px; fill: none; stroke: none; }
.cm-btn-ghost { border-color: transparent; background: transparent; color: var(--mut); }

/* ---- composer ---- */
.cm-composer { display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: box-shadow .2s, border-color .2s; }
.cm-composer:focus-within { border-color: #67e8f9; box-shadow: 0 0 0 4px rgba(34, 211, 238, .14), 0 8px 24px -12px rgba(14, 116, 144, .35); }
.cm-cbox { flex: 1; min-width: 0; }
.cm-composer textarea { width: 100%; resize: none; overflow: hidden; border: 1px solid #cbd5e1; background: #fff; border-radius: 14px; padding: 10px 14px; font: inherit; color: var(--ink); min-height: 92px; transition: border-color .15s, box-shadow .15s; }
.cm-composer textarea:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .2); }
.cm-composer textarea::placeholder { color: var(--soft); }
.cm-extra { display: grid; margin-top: 12px; gap: 12px; }
.cm-exp { display: grid; gap: 12px; }
.cm-composer.is-question .cm-exp { display: none; }
.cm-flabel { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--soft); margin-bottom: 6px; }
.cm-opt { margin-left: 6px; font-size: .68rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: #94a3b8; background: #f1f5f9; border-radius: 999px; padding: 1px 8px; }
.cm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-pill { border: 1px solid #cbd5e1; background: #fff; color: #475569; border-radius: 999px; padding: 5px 13px; font-size: .82rem; font-weight: 600; transition: all .15s; }
.cm-pill:hover { border-color: #22d3ee; color: var(--brand); }
.cm-pill[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 2px 6px -2px rgba(14, 116, 144, .6); }
.cm-pill[aria-pressed="true"].ok { background: #16a34a; border-color: #16a34a; }
.cm-pill[aria-pressed="true"].no { background: #e11d48; border-color: #e11d48; }
.cm-rate { display: inline-flex; gap: 2px; }
.cm-rate button { border: 0; background: none; padding: 2px; color: #e2e8f0; transition: transform .12s, color .12s; }
.cm-rate button svg { width: 26px; height: 26px; fill: currentColor; stroke: none; display: block; }
.cm-rate button.on { color: #f59e0b; }
.cm-rate button:hover { transform: scale(1.18); }
.cm-rate-t { margin-left: 10px; font-size: .8rem; color: var(--mut); align-self: center; min-width: 70px; }
.cm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.cm-input { position: relative; }
.cm-input input { width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px 12px; font: inherit; background: #fff; color: var(--ink); }
.cm-input input:focus { border-color: #22d3ee; outline: none; box-shadow: 0 0 0 3px rgba(34, 211, 238, .2); }
.cm-input.pre input { padding-left: 42px; }
.cm-input .pfx { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .8rem; color: var(--soft); pointer-events: none; }
.cm-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cm-foot .sp { flex: 1; }
.cm-counter { font-size: .75rem; color: var(--soft); font-variant-numeric: tabular-nums; }
.cm-counter.warn { color: #d97706; } .cm-counter.over { color: #e11d48; font-weight: 700; }
.cm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cm-status { margin-top: 8px; font-size: .85rem; border-radius: 10px; padding: 0; }
.cm-status:not(:empty) { padding: 8px 12px; }
.cm-ok { color: #047857; background: #ecfdf5; } .cm-err { color: #be123c; background: #fff1f2; } .cm-held { color: #92400e; background: #fffbeb; }
.cm-rules { font-size: .76rem; color: var(--soft); margin: 10px 0 0; }
.cm-rules a { color: var(--mut); text-decoration: underline; }
.cm-who { margin-top: 10px; font-size: .8rem; color: var(--mut); }

/* ---- signed out ---- */
.cm-signin { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 16px; padding: 14px 16px; background: linear-gradient(135deg, #f8fafc, #f0f9ff); border: 1px solid #dbeafe; border-radius: 16px; }
.cm-signin > span { flex: 1 1 220px; color: #334155; font-weight: 600; }
.cm-signin-b { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-sub { margin: 16px 0 6px; font-size: .9rem; font-weight: 800; color: var(--ink); }

/* ---- the journal page: one window ---- */
.cm-window { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -18px rgba(15, 23, 42, .22); }
.cm-window .cm-top { margin-bottom: 14px; }
.cm-window .cm-sum { border-radius: 14px; }
.cm-sum-flat { grid-template-columns: 1fr; padding: 12px 14px; }
.cm-window .cm-composer { margin: 18px 0 0; background: linear-gradient(180deg, #f8fafc, #f1f7fb); border-color: #dbe5ef; box-shadow: none; }
.cm-window .cm-composer:focus-within { background: #fff; }
.cm-window .cm-item { box-shadow: none; }
.cm-window .cm-list { gap: 12px; }
.cm-window .cm-who { margin: 10px 0 0 4px; }
.cm-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; background: #e8eef4; border-radius: 999px; padding: 3px; margin-bottom: 10px; }
.cm-seg-b { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--mut); font-weight: 700; font-size: .82rem; padding: 7px 14px; border-radius: 999px; transition: background .15s, color .15s, box-shadow .15s; }
.cm-seg-b:hover { color: var(--ink); }
.cm-seg-b[aria-selected="true"] { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(15, 23, 42, .18); }
.cm-seg-b .cm-ic { width: 15px; height: 15px; }
.cm-signin-slot:not(:empty) { margin-top: 10px; }
.cm-signin-slot .cm-signin { margin-top: 0; }

/* ---- questions and replies ---- */
.cm-kind { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #6d28d9; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 999px; padding: 1px 8px 1px 6px; }
.cm-kind .cm-ic { width: 12px; height: 12px; }
.cm-item.cm-q { border-left: 3px solid #a78bfa; }
.cm-replies { margin: 12px 0 0; padding-left: 14px; border-left: 2px solid #e2e8f0; display: grid; gap: 8px; }
.cm-rlist { gap: 8px; }
.cm-item.cm-reply { padding: 10px 12px; gap: 10px; background: #f8fafc; border-color: #eef2f7; border-radius: 12px; }
.cm-item.cm-reply:hover { box-shadow: none; border-color: #dbe5ef; }
.cm-reply .cm-author { font-size: .85rem; }
.cm-reply .cm-act { margin-top: 6px; }
.cm-older { justify-self: start; margin: 0; }
.cm-nudge { margin: 0; font-size: .82rem; color: #6d28d9; background: #f5f3ff; border-radius: 10px; padding: 8px 12px; }
.cm-composer-reply { margin: 4px 0 0; padding: 10px 12px; gap: 10px; border-radius: 12px; background: #fff; }
.cm-composer-reply textarea { min-height: 64px; }
.cm-composer-reply .cm-pills { gap: 5px; }
.cm-replybtn { color: var(--brand); }
a.cm-btn-s { text-decoration: none; }

/* ---- toast ---- */
.cm-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 999px; font-size: .85rem; z-index: 90; box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .5); transition: opacity .25s, transform .25s; pointer-events: none; }
.cm-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cm-toast a { color: #67e8f9; pointer-events: auto; }

@keyframes cm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cm-pop { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-12deg); } 100% { transform: scale(1); } }
@keyframes cm-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes cm-flash { 0%, 35% { background: #ecfeff; border-color: #67e8f9; } 100% { background: #fff; } }

@media (max-width: 560px) {
  .cm-sum { grid-template-columns: 1fr; padding: 14px; }
  .cm-score { display: flex; align-items: center; gap: 12px; text-align: left; }
  .cm-score .cm-stars { margin-top: 0; }
  .cm-window { padding: 12px; border-radius: 16px; }
  .cm-seg { display: flex; }
  .cm-seg-b { flex: 1; justify-content: center; padding: 7px 6px; font-size: .76rem; gap: 4px; }
  .cm-seg-b .cm-ic { display: none; }
  .cm-item, .cm-composer { padding: 12px; gap: 10px; }
  .cm-composer > .cm-av { display: none; }
  .cm-replies { padding-left: 10px; }
  .cm-av { width: 36px; height: 36px; }
  .cm-tab { padding: 6px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm *, .cm *::before, .cm *::after { animation: none !important; transition: none !important; }
}

/* machine translation shown under the original comment */
.cm-trans { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid #67e8f9; background: #f0fdff; border-radius: 0 10px 10px 0; }
.cm-trans-h { font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: #0e7490; margin-bottom: 2px; }
.cm-trans-t { font-size: .92rem; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* journal named first on every comment in a multi-journal feed */
.cm-onj { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 6px; padding: 4px 10px; border-radius: 10px; background: #ecfeff; color: var(--brand); font-size: .86rem; text-decoration: none; width: fit-content; max-width: 100%; }
a.cm-onj:hover { background: #cffafe; }
.cm-onj svg { flex: none; width: 15px; height: 15px; }
.cm-onj b { font-weight: 700; overflow-wrap: anywhere; }
.cm-issn { font-size: .74rem; font-weight: 600; color: #64748b; letter-spacing: .02em; }
/* community page toolbar and the by-journal list */
.cm-fbar { display: grid; gap: 10px; margin-bottom: 14px; }
.cm-frow { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-fin { font: inherit; font-size: .88rem; color: var(--ink); background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; padding: 8px 12px; min-width: 0; }
.cm-fin:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .2); }
.cm-fbar > .cm-fin { width: 100%; }
.cm-jlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cm-jlink { display: block; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
a.cm-jlink:hover { border-color: #67e8f9; background: #f8feff; }
.cm-jtop { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--brand); font-size: .95rem; }
.cm-jtop svg { flex: none; width: 16px; height: 16px; }
.cm-jtop b { font-weight: 700; overflow-wrap: anywhere; }
.cm-jmeta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-size: .8rem; color: #64748b; }

/* who the comment appears as, email choices, heading line */
.cm-lede { margin: -4px 0 12px; font-size: .88rem; color: #475569; line-height: 1.5; }
.cm-ident { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cm-ident .cm-flabel { margin: 0; }
.cm-as { max-width: 100%; }
.cm-alias { width: 11rem; max-width: 100%; }
.cm-priv { margin: 6px 0 0; font-size: .78rem; color: #64748b; line-height: 1.45; }
.cm-checks { display: grid; gap: 4px; margin-top: 8px; }
.cm-check { display: flex; align-items: flex-start; gap: 6px; font-size: .86rem; color: #334155; cursor: pointer; }
.cm-check input { margin-top: 3px; }
.cm-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: #f0fdff; border: 1px solid #cffafe; font-size: .86rem; color: #0f172a; }
.cm-btn-yes { background: #0e7490; color: #fff; }
.cm-btn-yes:hover { background: #155e75; color: #fff; }
.cm-prefs { margin: 0 0 16px; display: grid; gap: 6px; }
.cm-help-t { margin: 0 0 6px 22px; font-size: .78rem; color: #64748b; line-height: 1.45; }
.cm-saved { margin-left: 6px; font-size: .78rem; color: #15803d; }
.cm-profrow { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 4px; }
.cm-profrow .cm-flabel { display: grid; gap: 4px; margin: 0; }
.cm-upd { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; display: grid; gap: 8px; }
.cm-upd textarea.cm-fin { resize: vertical; }