/* VLPremier Pro · Community board (2026-10-28; soft blue-grey, threaded replies, marks 2026-10-31). A light board inside the dark site: the header and footer stay as they are,
   the board uses the site's fonts, buttons, radius and blue on a light surface. One colour per category kind.
   Components: .cm-hero, .cm-grid (main + side), .cm-catgrid, .cm-rows, .cm-post, .cm-gallery, .cm-lb (picture viewer). */
.cm {
  --cm-bg: #E3E9F2; --cm-card: #F5F7FB; --cm-ink: #1A2438; --cm-muted: #465470; --cm-line: #CCD6E3; --cm-line-strong: #A3B1C6;
  --cm-accent: #1A5DB8; --cm-accent-soft: #DDE8F8; --cm-navy: #0F1B30;
  --cm-read: #56637A;   /* a read topic title: 5.5:1 on the rows */
  --k-announce: #6E47D6; --k-release: #1D66C9; --k-howto: #0B8463; --k-bug: #C2412A; --k-feature: #A66A12; --k-showcase: #B5307E; --k-general: #55657F;
  background: var(--cm-bg); color: var(--cm-ink); min-height: 60vh;
}
.cm a:not(.btn) { color: var(--cm-accent); }
.cm .crumbs, .cm .crumbs a { color: var(--cm-muted); }
.cm .crumbs [aria-current] { color: var(--cm-ink); }
.cm .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons and fields on the light surface (same shapes as the rest of the site) */
.cm .btn-primary { background: var(--cm-navy); color: #fff; border-color: var(--cm-navy); }
.cm .btn-primary:hover { background: #1F2E4C; border-color: #1F2E4C; color: #fff; }
.cm .btn-ghost { background: var(--cm-card); color: var(--cm-ink); border: 1px solid var(--cm-line-strong); }
.cm .btn-ghost:hover { border-color: var(--cm-ink); }
.cm .btn-quiet { background: transparent; color: var(--cm-muted); border-color: transparent; }
.cm .btn-quiet:hover { color: var(--cm-ink); }
.cm :is(.input, .select, .textarea) { background: #fff; color: var(--cm-ink); border: 1px solid var(--cm-line-strong); }
.cm :is(.input, .select, .textarea)::placeholder { color: #7B879B; }
.cm :is(.input, .select, .textarea):focus { border-color: var(--cm-accent); outline: 2px solid color-mix(in srgb, var(--cm-accent) 35%, transparent); outline-offset: 1px; }
.cm .field label { color: var(--cm-ink); font-weight: 600; }
.cm .field-help, .cm-small { color: var(--cm-muted); font-size: 13.5px; line-height: 1.5; }
.cm-small { display: block; margin-top: 4px; }

/* header band */
/* the site header is see-through over dark heroes: on the light board it is always solid */
.cm-page .nav { background: rgb(17 26 43 / .96); border-bottom-color: var(--line); }
.cm-hero { padding: calc(var(--nav-h) + clamp(24px, 4vw, 44px)) 0 24px; background: linear-gradient(180deg, #D3DDEB 0%, var(--cm-bg) 100%); border-bottom: 1px solid var(--cm-line); }
.cm-hero h1 { margin: 10px 0 0; color: var(--cm-ink); font-size: clamp(30px, 4vw, 42px); line-height: 1.1; }
.cm-hero-topic h1 { font-size: clamp(24px, 2.8vw, 31px); line-height: 1.2; max-width: 38ch; letter-spacing: -.015em; }
.cm-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; }
.cm-lede { margin: 10px 0 0; max-width: 62ch; color: var(--cm-muted); font-size: 16px; line-height: 1.55; }
.cm-search { position: relative; margin-top: 22px; max-width: 640px; }
.cm-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cm-muted); }
.cm-search input { width: 100%; padding: 13px 16px 13px 42px; border-radius: var(--r-ctl); border: 1px solid var(--cm-line-strong); background: #fff; color: var(--cm-ink); font: inherit; font-size: 16px; }
.cm-search input:focus { outline: 2px solid color-mix(in srgb, var(--cm-accent) 35%, transparent); border-color: var(--cm-accent); }

/* layout */
.cm-body { padding-block: 28px 72px; }
.cm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1000px) { .cm-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; } .cm-side { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; } }
.cm-main { min-width: 0; display: grid; gap: 24px; align-content: start; }
.cm-h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -.01em; color: var(--cm-ink); }
.cm-card { background: var(--cm-card); border: 1px solid var(--cm-line); border-radius: var(--r-panel); padding: 20px 22px; }
.cm-card h2 { margin: 0 0 10px; font-size: 16px; letter-spacing: -.01em; color: var(--cm-ink); }
.cm-alert { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--r-ctl); border: 1px solid #E8B4AA; background: #FDF1EE; color: #8A2A18; }
.cm-alert.is-ok { border-color: #A9D8C6; background: #EEF8F3; color: #0B5E45; }
.cm-note { margin: 0; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--cm-accent-soft); color: var(--cm-ink); font-size: 14.5px; }
.cm-empty { margin: 0; padding: 28px; text-align: center; color: var(--cm-muted); background: var(--cm-card); border: 1px dashed var(--cm-line-strong); border-radius: var(--r-panel); }

/* category colour: dots, chips, cards */
.cm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--k-general); flex: none; }
.is-announce { --k: var(--k-announce); } .is-release { --k: var(--k-release); } .is-howto { --k: var(--k-howto); } .is-bug { --k: var(--k-bug); }
.is-feature { --k: var(--k-feature); } .is-showcase { --k: var(--k-showcase); } .is-general { --k: var(--k-general); } .is-all { --k: var(--cm-ink); }
.cm-dot[class*="is-"] { background: var(--k); }
.cm-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.3 var(--font-display); text-decoration: none; color: var(--cm-muted); background: #E2E8F1; }
.cm a.cm-chip[class*="is-"], .cm-chip[class*="is-"] { color: var(--k); background: color-mix(in srgb, var(--k) 11%, #fff); }
.cm-chip.is-pin { color: var(--cm-ink); background: #FFF3D6; }

.cm-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.cm-catcard { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--cm-line); border-top: 3px solid var(--k); border-radius: var(--r-panel); background: var(--cm-card); text-decoration: none; color: var(--cm-ink) !important; transition: border-color .15s, box-shadow .15s; }
.cm-catcard:hover { border-color: var(--k); box-shadow: 0 6px 18px rgba(15, 27, 48, .08); }
.cm-catcard-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; }
.cm-catcard-d { color: var(--cm-muted); font-size: 14px; line-height: 1.45; }
.cm-catcard-m { color: var(--cm-muted); font: 400 12.5px/1.4 var(--font-mono); }

/* topic rows */
.cm-rows { list-style: none; margin: 0; padding: 0; background: var(--cm-card); border: 1px solid var(--cm-line); border-radius: var(--r-panel); overflow: hidden; }
.cm-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--cm-line); }
.cm-row:first-child { border-top: 0; }
.cm-row:hover { background: #ECF1F8; }
.cm-row.is-pinned { background: #F8F4EA; }
.cm-row-title { display: block; font-weight: 650; font-size: 15.5px; line-height: 1.35; color: var(--cm-ink) !important; text-decoration: none; overflow-wrap: anywhere; }
/* 2026-10-30: read topics step back, unread stay bold. Visitors get the browser's own memory (:visited, colour only); members the
   server's, on every device. A topic with new replies is bold again whatever was read before. */
.cm-row-title:visited, .cm-row.is-read .cm-row-title { color: var(--cm-read) !important; }
.cm-row.is-read .cm-row-title { font-weight: 500; }
.cm-row.has-new .cm-row-title:visited { color: var(--cm-ink) !important; }
.cm-row .cm-row-title:hover { color: var(--cm-accent) !important; text-decoration: underline; }
.cm-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; color: var(--cm-muted); font-size: 13px; }
.cm-row-stats { display: flex; gap: 16px; color: var(--cm-muted); font-size: 13px; text-align: center; }
.cm-stat { display: grid; justify-items: center; min-width: 48px; line-height: 1.25; }
.cm-stat b { color: var(--cm-ink); font-size: 16px; }
.cm-when { min-width: 64px; }
@media (max-width: 640px) {
  .cm-row { grid-template-columns: 32px minmax(0, 1fr); padding: 12px 14px; }
  .cm-row-stats { grid-column: 2; justify-content: flex-start; gap: 14px; text-align: left; }
  .cm-stat { display: inline; min-width: 0; } .cm-stat b { font-size: 14px; }
}
.cm-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #D8E0EC; color: var(--cm-ink); font-weight: 700; font-size: 15px; }
.cm-av.is-staff { background: var(--cm-navy); color: #fff; }
.cm-av.is-system { background: var(--cm-accent-soft); color: var(--cm-accent); }
.cm-av.is-assistant { background: linear-gradient(135deg, #2F6FE4, #5AA9F5); color: #fff; }   /* Sofia, the AI assistant (2026-10-30) */
.cm-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; color: var(--cm-muted); font-size: 14px; }

/* status chips (feature requests, bugs) */
.cm-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.3 var(--font-display); color: #44546E; background: #ECF0F5; text-decoration: none; }
.cm-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cm-state.is-planned { color: #1D66C9; background: #E6EFFB; } .cm-state.is-in_progress { color: #9A5B00; background: #FFF1D9; }
.cm-state.is-done, .cm-state.is-fixed { color: #0B7357; background: #E3F5EE; } .cm-state.is-confirmed { color: #B0361F; background: #FCEAE5; }
.cm-state.is-not_planned, .cm-state.is-cant_reproduce { color: #5F6B7E; background: #EEF0F3; }
.cm-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.cm-seg, .cm-states { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-seg a, .cm-states > a:first-child { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cm-line-strong); background: #fff; color: var(--cm-ink) !important; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.cm-states a[aria-current], .cm-seg a[aria-current] { outline: 2px solid var(--cm-ink); outline-offset: 1px; }

/* sidebar */
.cm-side { display: grid; gap: 16px; align-content: start; }
.cm-cats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cm-cats a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-ctl); color: var(--cm-ink) !important; text-decoration: none; font-size: 14.5px; }
.cm-cats a:hover { background: #E9EEF6; }
.cm-cats a[aria-current] { background: var(--cm-accent-soft); font-weight: 700; }
.cm-n { margin-left: auto; color: var(--cm-muted); font: 400 12.5px/1 var(--font-mono); }
.cm-tips p { margin: 0 0 10px; color: var(--cm-muted); font-size: 14px; line-height: 1.55; }
.cm-tips p:last-child { margin-bottom: 0; }

/* posts */
.cm-posts { display: grid; gap: 14px; }
.cm-posts .sofia-note { background: var(--cm-card); }
.cm-post { background: var(--cm-card); border: 1px solid var(--cm-line); border-radius: var(--r-panel); padding: 18px 22px; }   /* 2026-10-29: the html scroll-padding (nav + 16px) already lands #p links under the nav; an extra margin doubled it */
.cm-post.is-staff { background: #DFEAF9; border-color: #AEC6E8; border-left: 4px solid var(--cm-accent); }
.cm-post.is-assistant, .cm-post.is-system { background: #EAF0F8; border-color: #C2D2E7; border-left: 4px solid #7FAEE6; }
.cm-post.is-pending { border-style: dashed; }
.cm-post:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-accent) 30%, transparent); }
.cm-post-h { display: flex; align-items: center; gap: 12px; }
.cm-who { color: var(--cm-ink); }
.cm-badge { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 6px; font: 600 11px/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.cm-badge.is-staff { color: #fff; background: var(--cm-accent); }
.cm-badge.is-system { color: var(--cm-accent); background: var(--cm-accent-soft); }
.cm-badge.is-assistant { color: #174EA6; background: #E3EEFD; font: 600 12px/1.3 var(--font-display); letter-spacing: 0; text-transform: none; }
.cm-autonote { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--cm-muted); }
.cm-autonote a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cm-time { margin-left: auto; color: var(--cm-muted) !important; font-size: 13px; text-decoration: none; }
.cm-wait { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--r-ctl); background: #FFF4DD; color: #7A4C00; font-size: 14px; }
.cm-text { margin-top: 12px; color: var(--cm-ink); font-size: 15.5px; line-height: 1.6; overflow-wrap: anywhere; }
.cm-text :where(p, ul, ol) { margin: 0; }   /* 2026-10-30: before the gap rule and low specificity, or paragraphs touch */
.cm-text > * + * { margin-top: 12px; }
.cm-text ul, .cm-text ol { padding-left: 24px; }
.cm-text li { padding-left: 2px; }
.cm-text li + li { margin-top: 6px; }
.cm-text b { font-weight: 650; }
.cm-post.is-assistant .cm-text li::marker { color: #2563C4; font-weight: 650; }
.cm-post.is-assistant .cm-text a { color: #1D5FBF; text-decoration: underline; text-underline-offset: 3px; }
.cm-text .sofia-src { margin-top: 16px; padding-top: 12px; border-top: 1px solid #DDE5F0; font-size: 14.5px; color: var(--cm-ink); }
.cm-text code { padding: 1px 6px; border-radius: 5px; background: #E2E8F1; font: 14px var(--font-mono); }
.cm-video { position: relative; aspect-ratio: 16 / 9; max-width: 720px; border-radius: var(--r-ctl); overflow: hidden; background: #0A0F1A; }
.cm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* pictures: small in the post, large in the viewer */
.cm-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cm-thumb { padding: 0; border: 1px solid var(--cm-line); border-radius: var(--r-ctl); background: #EEF2F7; overflow: hidden; cursor: zoom-in; line-height: 0; transition: transform .15s, box-shadow .15s; }
.cm-thumb img { display: block; width: auto; height: 150px; max-width: 100%; object-fit: cover; }
.cm-gallery > .cm-thumb:only-child img { height: auto; max-height: 320px; max-width: min(100%, 420px); }
.cm-thumb:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 27, 48, .14); }
.cm-thumb:focus-visible { outline: 3px solid var(--cm-accent); outline-offset: 2px; }
@media (max-width: 640px) { .cm-thumb img { height: 110px; } }
.cm-lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(6, 9, 16, .94); color: #fff; }
.cm-lb::backdrop { background: rgba(6, 9, 16, .6); }
.cm-lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.cm-lb-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.cm-lb-n { font: 500 14px/1 var(--font-mono); color: #C9D5EA; }
.cm-lb-x { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.cm-lb-fig { margin: 0; display: grid; place-items: center; padding: 0 72px 24px; min-height: 0; }
.cm-lb-fig img { max-width: 100%; max-height: calc(100dvh - 110px); object-fit: contain; border-radius: 6px; box-shadow: 0 12px 50px rgba(0, 0, 0, .5); }
.cm-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(15, 27, 48, .7); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.cm-lb-nav.is-prev { left: 14px; } .cm-lb-nav.is-next { right: 14px; }
.cm-lb-nav:hover, .cm-lb-x:hover { background: rgba(255, 255, 255, .14); }
.cm-lb-nav:focus-visible, .cm-lb-x:focus-visible { outline: 3px solid #4FA3F5; outline-offset: 2px; }
.cm-lb-nav[hidden] { display: none; }
@media (max-width: 640px) { .cm-lb-fig { padding: 0 8px 84px; } .cm-lb-nav { top: auto; bottom: 18px; transform: none; } .cm-lb-nav.is-prev { left: calc(50% - 64px); } .cm-lb-nav.is-next { right: calc(50% - 64px); } }

/* vote, reply, forms */
.cm-vote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.cm-vote-n { font-size: 28px; line-height: 1; margin-right: 4px; }
.cm-reply h2 { font-size: 20px; }
.cm-form { display: grid; gap: 16px; }
.cm-form-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; }
@media (max-width: 720px) { .cm-form-row { grid-template-columns: minmax(0, 1fr); } }
.cm-textarea { min-height: 170px; resize: vertical; font-size: 16px; line-height: 1.55; }
.cm-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cm-files { display: grid; gap: 8px; }
.cm-files-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cm-files-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cm-files-input:focus-visible + .field-help { outline: 2px solid var(--cm-accent); }
.cm-files:focus-within .cm-files-btn { outline: 2px solid var(--cm-accent); outline-offset: 2px; }
.cm-previews { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cm-previews li { position: relative; width: 84px; height: 84px; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--cm-line); background: #EEF2F7; }
.cm-previews img { width: 100%; height: 100%; object-fit: cover; }
.cm-previews .is-bad { display: grid; place-items: center; padding: 6px; font-size: 11px; color: #8A2A18; background: #FDF1EE; text-align: center; }
.cm-hint summary, .cm-report summary { cursor: pointer; color: var(--cm-muted); font-size: 14px; }
.cm-hint ul { margin: 8px 0 0; padding-left: 20px; color: var(--cm-muted); font-size: 14px; }
.cm-report { margin-top: 12px; }
.cm-report form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cm-report .input { flex: 1 1 240px; }
.cm-follow { margin-top: -8px; }
/* own posts: edit / remove; a removed post; similar topics while typing a title (2026-10-28) */
.cm-own { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin-top: 12px; }
.cm-edit { flex: 1 1 100%; }
.cm-edit summary { display: inline-block; cursor: pointer; color: var(--cm-muted); font-size: 14px; }
.cm-edit[open] summary { margin-bottom: 10px; }
.cm-edit .cm-form { padding: 14px; border: 1px solid var(--cm-line); border-radius: var(--r-ctl); background: #F8FAFD; }
.cm-own .btn-quiet { padding-inline: 0; }
.cm-post.is-removed { background: #F8FAFC; border-style: dashed; }
.cm-gone { color: var(--cm-muted); font-style: italic; }
.cm-inline { display: inline; margin: 0 0 0 4px; }
.cm-similar { padding: 12px 16px; border: 1px solid #CFDDF2; border-radius: var(--r-ctl); background: #F6F9FE; font-size: 14.5px; }
.cm-similar-h { margin: 0 0 6px; font-weight: 600; color: var(--cm-ink); }
.cm-similar ul { margin: 0 0 8px; padding-left: 20px; }
.cm-similar ul:last-child { margin-bottom: 0; }
.cm .modal { color: var(--text); }
/* Helpful votes and the masked-words notice (2026-10-28) */
.cm-post-f { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cm-post-f form { margin: 0; }
.cm-helpful { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--cm-line-strong); border-radius: 999px; background: #fff; color: var(--cm-muted); font: 600 13px/1 var(--font-display); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.cm-helpful:hover { border-color: var(--cm-accent); color: var(--cm-accent); }
.cm-helpful.is-on { border-color: var(--cm-accent); background: var(--cm-accent-soft); color: var(--cm-accent); }
.cm-helpful b { color: inherit; }
.cm-helpful b:empty { display: none; }
.cm-helpful.is-static { cursor: default; background: transparent; border-color: transparent; padding-inline: 0; }
.cm-helpful:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px; }
.cm-warn .modal-b p + p { margin-top: 12px; }
.cm-warn-n { padding: 10px 12px; border-radius: 8px; background: rgba(224, 160, 60, .14); }
.cm-warn-n.is-muted { background: rgba(224, 90, 60, .16); }
/* sidebar online + recent, reply-to, solution, actions, badges (2026-10-28) */
.cm-online { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; font-size: 14px; color: var(--cm-muted); }
.cm-online b { color: var(--cm-ink); }
.cm-live { width: 8px; height: 8px; border-radius: 50%; background: #18A058; box-shadow: 0 0 0 3px rgba(24, 160, 88, .18); flex: none; }
.cm-recent ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cm-recent li { display: grid; gap: 2px; font-size: 14px; line-height: 1.4; }
.cm-recent a { color: var(--cm-ink) !important; text-decoration: none; font-weight: 600; }
.cm-recent a:hover { color: var(--cm-accent) !important; text-decoration: underline; }
.cm-recent .cm-small { margin: 0; }
.cm-post-f { flex-wrap: wrap; }
.cm-act { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--cm-muted) !important; font: 600 13px/1 var(--font-display); text-decoration: none; cursor: pointer; }
.cm-act:hover { background: #EEF2F7; color: var(--cm-ink) !important; }
.cm-act.is-on { color: var(--cm-accent) !important; }
.cm-act:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px; }
.cm-quote { display: grid; gap: 2px; margin-top: 12px; padding: 8px 12px; border-left: 3px solid var(--cm-line-strong); border-radius: 0 8px 8px 0; background: #F4F7FB; color: var(--cm-muted) !important; text-decoration: none; font-size: 14px; }
.cm-quote b { color: var(--cm-ink); }
.cm-quote-t { overflow-wrap: anywhere; }
.cm-quote:hover { border-left-color: var(--cm-accent); }
.cm-replyto { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--cm-accent-soft); font-size: 14px; }
.cm-replyto[hidden] { display: none; }
.cm-replyto-x { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--cm-muted); font-size: 18px; cursor: pointer; }
.cm-post.is-solution { border-color: #8FD3B4; box-shadow: 0 0 0 1px #8FD3B4 inset; }
.cm-solution { padding: 14px 18px; border: 1px solid #A9D8C6; border-radius: var(--r-panel); background: #EEF8F3; color: #0B4E3A; }
.cm-solution p { margin: 0 0 6px; }
.cm-solution-h { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.cm-chip.is-solved { color: #0B7357; background: #E3F5EE; }
.cm-chip.is-wanted { color: #9A5B00; background: #FFF1D9; }
.cm-chip.is-popular { color: #B5307E; background: #FBE8F2; }
.cm-listhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.cm-listhead .cm-h2 { margin: 0; }
.cm-savetopic { margin-top: 14px; }
/* topic lists: 9 shown, Show 9 more, then page numbers (2026-10-28) */
.cm-row[hidden], .cm-pager[hidden], .cm-more[hidden] { display: none; }
.cm-more { display: flex; margin: 12px auto 0; min-width: 180px; justify-content: center; }
.cm-more-link { margin: 12px 0 0; text-align: right; font-size: 14.5px; }
.cm-pager { flex-wrap: wrap; margin-top: 16px; }
.cm-pages { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.cm-pages a, .cm-pages span { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-ctl); font: 600 14px/1 var(--font-display); text-decoration: none; }
.cm-pages a { color: var(--cm-ink) !important; border: 1px solid var(--cm-line); background: #fff; }
.cm-pages a:hover { border-color: var(--cm-ink); }
.cm-pages [aria-current] { background: var(--cm-navy); color: #fff; }
.cm-gap { color: var(--cm-muted); padding: 0 4px; }
.cm-main > section + section { margin-top: 8px; }
/* moderators, member badges, mentions, unread (2026-10-28) */
.cm-badge.is-mod { color: #fff; background: #0B8463; }
.cm-badge.is-solver { color: #0B7357; background: #E3F5EE; }
.cm-badge.is-helper { color: #1D66C9; background: var(--cm-accent-soft); }
.cm-since { display: block; margin-top: 2px; color: var(--cm-muted); font-size: 12.5px; font-weight: 400; }
.cm-who { line-height: 1.35; }
.cm-modbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; padding: 6px 10px; border: 1px dashed #A9D8C6; border-radius: 8px; background: #F3FBF7; }
.cm-modbar form { display: contents; }
.cm-modbar-l { margin-right: 4px; color: #0B6E52; font: 600 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.cm-act.is-danger { color: #B0361F !important; }
.cm-unread, .cm-modtopic { margin: 0 0 16px; }
.cm-modtopic { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cm-new { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--cm-accent); color: #fff !important; font: 600 12px/1.4 var(--font-display); text-decoration: none; vertical-align: 2px; }
.cm-catbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cm-catbar form { margin: 0; }
.cm-mention { color: var(--cm-accent); font-weight: 600; }
.cm-text .cm-mention { background: var(--cm-accent-soft); border-radius: 4px; padding: 0 3px; }
.cm-composer-field, .cm-form .field { position: relative; }
.cm-mentions { position: absolute; z-index: 5; left: 12px; margin: -6px 0 0; padding: 4px; list-style: none; min-width: 200px; border: 1px solid var(--cm-line-strong); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(15, 27, 48, .14); }
.cm-mentions li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14.5px; }
.cm-mentions li[aria-selected="true"], .cm-mentions li:hover { background: var(--cm-accent-soft); color: var(--cm-accent); }
/* one tools row per post: actions left, coloured groups right (You / Moderate / Team), panels below (2026-10-28) */
.cm-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--cm-line); }
.cm-tools-main, .cm-tools-side { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cm-tools form { display: contents; }
.cm-tg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; border: 1px solid; }
.cm-tg-l { margin-right: 4px; font: 600 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.cm-tg .cm-act { min-height: 30px; padding: 0 10px; }
.cm-tg.is-you { border-color: #C9DAF3; background: #EEF4FD; } .cm-tg.is-you .cm-tg-l { color: #1D66C9; }
.cm-tg.is-mod { border-color: #A9D8C6; background: #F0FAF5; } .cm-tg.is-mod .cm-tg-l { color: #0B6E52; }
.cm-tg.is-team { border-color: #B9C3D6; background: #EEF1F7; } .cm-tg.is-team .cm-tg-l { color: var(--cm-navy); }
.cm-tg.is-you .cm-act:hover { background: #DCE8FA; } .cm-tg.is-mod .cm-act:hover { background: #DDF2E7; } .cm-tg.is-team .cm-act:hover { background: #DEE3EE; }
.cm-panel { margin-top: 12px; padding: 14px; border: 1px solid var(--cm-line); border-radius: var(--r-ctl); background: #F8FAFD; }
.cm-panel[hidden] { display: none; }
.cm-report-f label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.cm-report-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-report-row .input { flex: 1 1 240px; }
@media (max-width: 640px) { .cm-tools { align-items: flex-start; } .cm-tools-side { width: 100%; } }
/* the member's own corner + the team's tools at the top of the sidebar (2026-10-28) */
.cm-me { display: grid; gap: 12px; border-top: 3px solid var(--cm-accent); }
.cm-me-h { display: flex; align-items: center; gap: 10px; }
.cm-me-h h2 { margin: 0; font-size: 17px; }
.cm-me-new { justify-self: stretch; justify-content: center; }
.cm-me h3 { margin: 4px 0 0; font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--cm-muted); }
.cm-me-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cm-me-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px; }
.cm-me-list a { color: var(--cm-ink) !important; text-decoration: none; font-weight: 600; }
.cm-me-list a:hover { color: var(--cm-accent) !important; text-decoration: underline; }
.cm-me-list .cm-new { margin: 0; flex: none; }
.cm-me-links { display: grid; border-top: 1px solid var(--cm-line); }
.cm-me-links a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--cm-line); color: var(--cm-ink) !important; text-decoration: none; font-size: 14px; }
.cm-me-links a:last-child { border-bottom: 0; }
.cm-me-links a:hover { color: var(--cm-accent) !important; }
.cm-me-links b { color: var(--cm-muted); font-weight: 500; font-size: 13px; }
.cm-me-mod { display: block; padding: 8px 10px; border: 1px solid #A9D8C6; border-radius: 8px; background: #F0FAF5; color: #0B4E3A !important; text-decoration: none; font-size: 14px; }
.cm-me-mod .cm-tg-l { color: #0B6E52; }
.cm-team { border-top: 3px solid var(--cm-navy); }
.cm-team h2 .cm-tg-l { color: var(--cm-navy); margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .cm-thumb, .cm-catcard, .cm-helpful { transition: none; } }

/* 2026-10-30: one quiet line for a member's new replies, the marker inside a topic, welcome, showcase, bug fields */
.cm-foryou { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid #C9DAF3; border-radius: var(--r-ctl); background: #F4F8FF; color: var(--cm-ink); font-size: 15px; }
.cm-foryou-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cm-accent); flex: none; }
.cm-foryou a { margin-left: auto; font-weight: 600; color: var(--cm-accent) !important; }
.cm-newline { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--cm-accent); font-size: 13px; font-weight: 600; }
.cm-newline::before, .cm-newline::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }
.cm-welcome { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--cm-line-strong); border-radius: var(--r-panel); background: #fff; }
.cm-welcome h2 { margin: 0 0 4px; font-size: 17px; }
.cm-welcome p { margin: 0; max-width: 78ch; font-size: 15px; line-height: 1.6; color: var(--cm-ink); }
.cm-welcome > div { flex: 1; min-width: 0; }
.cm-welcome-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -6px -6px 0 0; border: 0; border-radius: var(--r-ctl); background: none; color: var(--cm-muted); cursor: pointer; }
.cm-welcome-x:hover, .cm-welcome-x:focus-visible { background: #F1F4F9; color: var(--cm-ink); }
.cm-welcome-x[hidden] { display: none; }
.cm-links a.is-report { color: #B23A24 !important; font-weight: 600; }
.cm-periods { margin-bottom: 12px; }
.cm-chip.is-version { background: #EEF2F7; color: var(--cm-ink); }
.cm-bugfields { margin: 0; padding: 14px 16px; border: 1px solid var(--cm-line-strong); border-radius: var(--r-ctl); }
.cm-bugfields[hidden] { display: none; }
.cm-bugfields legend { padding: 0 6px; font-size: 14px; font-weight: 600; color: var(--cm-ink); }
.cm-bugfields .cm-small { margin: 8px 0 0; }
.cm-show { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cm-show-card { display: grid; gap: 4px; height: 100%; padding-bottom: 12px; border: 1px solid var(--cm-line-strong); border-radius: var(--r-panel); overflow: hidden; background: #fff; color: var(--cm-ink) !important; text-decoration: none; }
.cm-show-card:hover, .cm-show-card:focus-visible { border-color: var(--cm-accent); }
.cm-show-card b { padding: 6px 12px 0; font-size: 15.5px; line-height: 1.35; overflow-wrap: anywhere; }
.cm-show-card .cm-small { padding: 0 12px; }
.cm-show-pic { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #EEF2F7; color: var(--k-showcase); }
.cm-show-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .cm-views { display: none; } }

/* 2026-10-31: quiet depth, the thread, and staff marks */
.cm-card, .cm-post, .cm-rows, .cm-catcard { box-shadow: 0 1px 2px rgb(24 38 66 / .06); }
.cm-post.is-first { background: #FBFCFE; }
.cm-posts > :is(.cm-post:not(.is-first), .cm-newline, .cm-solution, .sofia-note) { margin-left: 34px; }
.cm-posts > .cm-post:not(.is-first) { position: relative; }
.cm-posts > .cm-post:not(.is-first)::before { content: ""; position: absolute; left: -22px; top: -15px; bottom: -15px; width: 2px; background: var(--cm-line-strong); }
.cm-posts > .cm-post:not(.is-first)::after { content: ""; position: absolute; left: -22px; top: 36px; width: 22px; height: 2px; background: var(--cm-line-strong); }
.cm-posts > .cm-post:not(.is-first):last-of-type::before { bottom: auto; height: 53px; }
/* a 4px left border moves the padding box: keep the line straight */
.cm-posts > .cm-post:is(.is-staff, .is-assistant, .is-system):not(.is-first)::before, .cm-posts > .cm-post:is(.is-staff, .is-assistant, .is-system):not(.is-first)::after { left: -25px; }
.cm-posts > .cm-post:is(.is-staff, .is-assistant, .is-system):not(.is-first)::after { width: 25px; }
@media (max-width: 640px) {
  .cm-posts > :is(.cm-post:not(.is-first), .cm-newline, .cm-solution, .sofia-note) { margin-left: 14px; }
  .cm-posts > .cm-post:not(.is-first)::before, .cm-posts > .cm-post:not(.is-first)::after { left: -10px; }
  .cm-posts > .cm-post:not(.is-first)::after { width: 10px; }
  .cm-posts > .cm-post:is(.is-staff, .is-assistant, .is-system):not(.is-first)::before, .cm-posts > .cm-post:is(.is-staff, .is-assistant, .is-system):not(.is-first)::after { left: -13px; }
  .cm-posts > .cm-post:is(.is-staff, .is-assistant, .is-system):not(.is-first)::after { width: 13px; }
}
.is-m-announce { --m: #6E47D6; --m-ink: #4A2BA6; } .is-m-important { --m: #C27C0E; --m-ink: #744700; }
.cm-row[class*="is-m-"] { background: color-mix(in srgb, var(--m) 10%, var(--cm-card)); box-shadow: inset 4px 0 var(--m); }
.cm-row[class*="is-m-"]:hover { background: color-mix(in srgb, var(--m) 15%, var(--cm-card)); }
.cm-chip.cm-markchip { color: var(--m-ink); background: color-mix(in srgb, var(--m) 18%, #fff); }
.cm-markbar { width: fit-content; margin: 14px 0 0; padding: 7px 14px; border-left: 4px solid var(--m); border-radius: var(--r-ctl); background: color-mix(in srgb, var(--m) 14%, #fff); color: var(--m-ink); font-size: 14px; font-weight: 650; }
.cm-markbox { margin: 0 0 16px; padding: 12px 18px; }
.cm-markbox summary { color: var(--cm-ink); font-size: 14.5px; font-weight: 650; cursor: pointer; }
.cm-markform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 10px; }
.cm-markform .field { display: grid; gap: 4px; margin: 0; font-size: 13px; }
.cm-markform .select, .cm-markform .input { min-width: 170px; }

/* A release's discussion in tabs (owner 2026-11-02): Overview · New features · Improvements · Fixes, one topic each, on top of
   each of those topics, and the newest release as a banner on top of /community/. A row that scrolls sideways on phones. */
.cm-reltabs { margin-top: 18px; }
.cm-reltabs ul { display: flex; gap: 8px; margin: 0; padding: 2px 2px 4px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.cm-reltab { --rt: var(--cm-navy); display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 16px; border: 1px solid var(--cm-line-strong); border-radius: 999px; background: var(--cm-card); color: var(--cm-ink) !important; font: 600 14px/1.2 var(--font-display); text-decoration: none; white-space: nowrap; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.cm-reltab::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rt); }
.cm-reltab.rt-new { --rt: var(--k-release); } .cm-reltab.rt-better { --rt: var(--k-howto); } .cm-reltab.rt-fixed { --rt: var(--k-feature); }
.cm-reltab:hover { border-color: var(--rt); }
.cm-reltab:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px; }
.cm-reltab[aria-current="page"] { background: color-mix(in srgb, var(--rt) 82%, #000); border-color: color-mix(in srgb, var(--rt) 82%, #000); color: #fff !important; }   /* darkened: white text 4.5:1+ on every kind */
.cm-reltab[aria-current="page"]::before { background: #fff; }
.cm-reltab-n { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--rt) 14%, #fff); color: var(--cm-ink); font: 600 12px/1.3 var(--font-mono); text-align: center; }
.cm-reltab[aria-current="page"] .cm-reltab-n { background: rgb(255 255 255 / .22); color: #fff; }
.cm-relbar { margin: 0 0 20px; padding: 18px 20px 14px; border: 1px solid color-mix(in srgb, var(--k-release) 40%, var(--cm-line)); border-left: 4px solid var(--k-release); border-radius: var(--r-panel); background: #fff; }
.cm-relbar-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.cm-relbar-k { flex-basis: 100%; margin: 0; font: 600 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--k-release); }
.cm-relbar h2 { margin: 0; font-size: clamp(17px, 2vw, 20px); line-height: 1.3; color: var(--cm-ink); }
.cm-relbar .cm-reltabs { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .cm-reltab { transition: none; } }