/* Community: forum list, thread, comment tree, composer.
   Colours come from Bootstrap's variables, so the site's dark theme applies. */

.cm-page {
    --cm-border: var(--bs-border-color, rgba(255, 255, 255, .12));
    --cm-soft: var(--bs-tertiary-bg, rgba(255, 255, 255, .04));
    --cm-muted: var(--bs-secondary-color, #9aa4b2);
    --cm-accent: var(--bs-primary, #ff7043);
    --cm-success: var(--bs-success, #4ade80);
    --cm-team: var(--bs-info, #66b1ec);
    --cm-ink: #1a0800;             /* text on the ember fill, as .btn-primary */
    --cm-radius: .6rem;
    --cm-indent: 1.1rem;
    font-size: 1rem;
}

.cm-layout { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .cm-layout { grid-template-columns: minmax(0, 1fr) 18rem; } }

.cm-thread-wrap { max-width: 52rem; margin: 0 auto; }

.cm-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--cm-accent); margin: 0 0 .25rem; font-weight: 600; }
.cm-title { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.2; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.cm-lead { color: var(--cm-muted); margin: 0; }
.cm-page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.cm-crumbs { font-size: .9rem; margin-bottom: 1rem; color: var(--cm-muted); }
.cm-crumbs a { text-decoration: none; }

.cm-panel { border: 1px solid var(--cm-border); border-radius: var(--cm-radius); background: var(--cm-soft); padding: 1rem 1.1rem; }
.cm-side { display: grid; gap: 1rem; align-content: start; }
.cm-side-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cm-muted); margin: 0 0 .6rem; font-weight: 600; }
.cm-categories { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.cm-categories a { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; border-radius: .4rem; text-decoration: none; color: inherit; }
.cm-categories a:hover, .cm-categories a.is-active { background: rgba(255, 255, 255, .06); }
.cm-categories a.is-active { color: var(--cm-accent); }
.cm-count { color: var(--cm-muted); font-variant-numeric: tabular-nums; font-size: .85rem; }

/* Sort and filter */
.cm-toolbar { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-bottom: 1rem; }
.cm-pills { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.cm-pill { display: inline-block; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--cm-border); text-decoration: none; color: inherit; font-size: .875rem; }
.cm-pill:hover { border-color: var(--cm-accent); }
.cm-pill.is-active { background: var(--cm-accent); border-color: var(--cm-accent); color: var(--cm-ink); }
.cm-pills--quiet .cm-pill.is-active { background: transparent; color: var(--cm-accent); }

/* Thread list */
.cm-threads { list-style: none; margin: 0 0 1.5rem; padding: 0; border: 1px solid var(--cm-border); border-radius: var(--cm-radius); overflow: hidden; }
.cm-thread { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .9rem 1rem; border-top: 1px solid var(--cm-border); }
.cm-thread:first-child { border-top: 0; }
.cm-thread.is-pinned { background: rgba(255, 112, 67, .06); }
.cm-thread-score { text-align: center; line-height: 1.1; }
.cm-thread-score span { display: block; font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.cm-thread-score small { color: var(--cm-muted); font-size: .7rem; }
.cm-thread-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .25rem; overflow-wrap: anywhere; }
.cm-thread-title a { text-decoration: none; color: inherit; }
.cm-thread-title a:hover { color: var(--cm-accent); }
.cm-thread-meta { color: var(--cm-muted); font-size: .85rem; margin: .15rem 0 0; }
.cm-thread-category { color: inherit; }
.cm-thread-comments { color: var(--cm-muted); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-thread-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.cm-thread-badges:empty { display: none; }
@media (max-width: 575.98px) {
    .cm-thread { grid-template-columns: 2.75rem minmax(0, 1fr); }
    .cm-thread-comments { grid-column: 2; justify-self: start; font-size: .85rem; }
}

.cm-empty { text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--cm-border); border-radius: var(--cm-radius); color: var(--cm-muted); }
.cm-empty--comments { padding: 1.5rem 1rem; }

/* Badges */
.cm-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: .35rem; border: 1px solid var(--cm-border); color: var(--cm-muted); white-space: nowrap; }
.cm-badge--op { color: var(--cm-accent); border-color: currentColor; }
.cm-badge--team { color: var(--cm-team); border-color: currentColor; }
.cm-badge--solution { color: var(--cm-success); border-color: currentColor; }
.cm-badge--pin { color: var(--cm-accent); }

/* The post */
.cm-op { border: 1px solid var(--cm-border); border-radius: var(--cm-radius); padding: 1.25rem 1.25rem .9rem; margin-bottom: 1.25rem; }
.cm-op-head .cm-thread-badges { margin-bottom: .5rem; }
.cm-op-body { margin: 1rem 0 .5rem; font-size: 1.02rem; }

.cm-solution-box { border: 1px solid var(--cm-success); border-left-width: 4px; border-radius: var(--cm-radius); padding: .9rem 1.1rem; margin-bottom: 1.5rem; background: rgba(74, 222, 128, .06); }
.cm-solution-title { font-size: 1rem; color: var(--cm-success); margin: 0 0 .35rem; }
.cm-solution-box p { margin: 0 0 .35rem; overflow-wrap: anywhere; }

.cm-notice { font-size: .85rem; color: var(--bs-warning, #ffd343); margin: .5rem 0; }

/* Author line */
.cm-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .875rem; min-width: 0; }
.cm-avatar { --cm-avatar: #144542; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--cm-avatar); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em; flex: 0 0 auto; }
.cm-avatar--team { background: rgba(75, 159, 225, .16); color: var(--cm-team); }
.cm-avatar--gone { background: rgba(255, 255, 255, .08); }
.cm-author { font-weight: 600; overflow-wrap: anywhere; }
.cm-author--gone { color: var(--cm-muted); font-weight: 500; font-style: italic; }
.cm-time { color: var(--cm-muted); text-decoration: none; }
.cm-time:hover { text-decoration: underline; }
.cm-edited, .cm-low, .cm-collapsed-count { color: var(--cm-muted); font-size: .8rem; }
.cm-collapsed-count { display: none; }

/* Post text */
.cm-body { line-height: 1.6; overflow-wrap: anywhere; }
.cm-body > :last-child { margin-bottom: 0; }
.cm-body p { margin: 0 0 .7rem; }
.cm-body h3 { font-size: 1.1rem; margin: 1rem 0 .5rem; }
.cm-body h4 { font-size: 1rem; margin: .9rem 0 .4rem; }
.cm-body blockquote { margin: 0 0 .7rem; padding: .35rem .9rem; border-left: 3px solid var(--cm-border); color: var(--cm-muted); }
.cm-body code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .875em; padding: .1em .3em; border-radius: .25rem; background: rgba(255, 255, 255, .07); }
.cm-body .cm-code { margin: 0 0 .8rem; }
/* custom.css gives every pre 2rem margin and 18px padding with !important: tighter inside comments */
.cm-body pre { margin: 0 !important; padding: .85rem 1rem !important; border-radius: .45rem; overflow-x: auto; background: rgba(0, 0, 0, .35); border: 1px solid var(--cm-border); font-size: .875rem; line-height: 1.5; }
.cm-body pre code { padding: 0; background: none; font-size: inherit; }
.cm-body a { overflow-wrap: anywhere; }
.cm-gone { color: var(--cm-muted); font-style: italic; }

/* Actions */
.cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; margin-top: .4rem; }
.cm-action { border: 0; background: none; color: var(--cm-muted); font-size: .82rem; padding: .25rem .45rem; border-radius: .35rem; text-decoration: none; line-height: 1.4; }
.cm-action:hover, .cm-action:focus-visible { color: inherit; background: rgba(255, 255, 255, .06); }
.cm-vote { display: inline-flex; align-items: center; gap: .15rem; margin-right: .3rem; }
.cm-vote button { border: 0; background: none; color: var(--cm-muted); width: 1.9rem; height: 1.9rem; border-radius: .4rem; line-height: 1; }
.cm-vote button:hover:not(:disabled) { background: rgba(255, 255, 255, .07); color: inherit; }
.cm-vote button:disabled { opacity: .45; cursor: default; }
.cm-vote .cm-vote-up.is-on { color: var(--cm-accent); }
.cm-vote .cm-vote-down.is-on { color: #8ab4ff; }
.cm-score { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem; }

/* Comments */
.cm-comments { margin-top: 1rem; }
.cm-comments-title { font-size: 1.15rem; margin: 0 0 1rem; }
.cm-comments-count { color: var(--cm-muted); font-weight: 500; }
.cm-tools { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; margin: 1.25rem 0 .75rem; }
.cm-sort { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--cm-muted); }
.cm-sort .form-select { width: auto; }
.cm-search { position: relative; display: flex; align-items: center; gap: .3rem; flex: 1 1 15rem; max-width: 24rem; }
.cm-search > .fa-search { position: absolute; left: .6rem; color: var(--cm-muted); font-size: .8rem; pointer-events: none; }
.cm-search input { padding-left: 1.8rem; }
.cm-search-count { color: var(--cm-muted); white-space: nowrap; min-width: 3.5rem; text-align: right; }
.cm-search-step { border: 1px solid var(--cm-border); background: none; color: inherit; border-radius: .35rem; width: 1.9rem; height: 1.9rem; }
.cm-search-step:disabled { opacity: .4; }

.cm-list { list-style: none; margin: 0; padding: 0; }
.cm-root > .cm { padding: .85rem 0; border-top: 1px solid var(--cm-border); }
.cm-root > .cm:first-child { border-top: 0; }
.cm-children { margin-left: calc(.85rem - 1px); padding-left: var(--cm-indent); border-left: 2px solid var(--cm-border); }
.cm-children:empty { display: none; }
.cm-children > .cm { padding-top: .75rem; }
/* Past eight levels the indent stops growing, so deep threads stay readable on phones */
.cm[data-depth="8"] .cm-children, .cm[data-depth="8"] .cm-children .cm-children { margin-left: 0; padding-left: .5rem; }

.cm-card { min-width: 0; }
.cm-main { padding-left: 2.25rem; }
.cm-card .cm-body { margin-top: .3rem; }
.cm-toggle { position: relative; width: 1.1rem; height: 1.1rem; border: 1px solid var(--cm-border); border-radius: .25rem; background: none; padding: 0; color: var(--cm-muted); flex: 0 0 auto; }
.cm-toggle span::before { content: '\2212'; position: absolute; inset: 0; display: grid; place-items: center; font-size: .8rem; line-height: 1; }
.cm.is-collapsed > .cm-card .cm-toggle span::before { content: '+'; }
.cm--team > .cm-card .cm-main { border-left: 2px solid var(--cm-team); padding-left: calc(2.25rem - 2px); }
.cm--solution > .cm-card { background: rgba(74, 222, 128, .06); border-radius: .45rem; outline: 1px solid rgba(74, 222, 128, .35); outline-offset: .35rem; }
.cm--hidden > .cm-card { opacity: .7; }
.cm.is-flash > .cm-card { animation: cm-flash 2s ease-out; border-radius: .45rem; }
@keyframes cm-flash { from { background: rgba(255, 112, 67, .2); } to { background: transparent; } }

/* Collapsing (only with the script; without it everything stays open) */
.cm-js .cm.is-collapsed > .cm-card .cm-main,
.cm-js .cm.is-collapsed > .cm-children,
.cm-js .cm.is-collapsed > .cm-more { display: none; }
.cm-js .cm.is-collapsed > .cm-card .cm-collapsed-count { display: inline; }
.cm-js .cm.replies-hidden > .cm-children { display: none; }
.cm-more { display: none; border: 0; background: none; color: var(--cm-accent); font-size: .82rem; padding: .35rem 0 0 2.25rem; }
.cm-js .cm.replies-hidden > .cm-more { display: inline-block; }

/* Search */
mark.cm-hit { background: rgba(255, 211, 67, .3); color: inherit; padding: 0 .05em; border-radius: .15rem; }
.cm.is-current > .cm-card { outline: 2px solid rgba(255, 211, 67, .55); outline-offset: .3rem; border-radius: .45rem; }

/* Composer */
.cm-form { margin: 0 0 1rem; }
.cm-form--reply { margin: .6rem 0 .25rem; }
.cm-composer { border: 1px solid var(--cm-border); border-radius: var(--cm-radius); overflow: hidden; background: var(--bs-body-bg); }
.cm-composer:focus-within { border-color: var(--cm-accent); }
.cm-composer-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem; padding: .3rem .4rem; border-bottom: 1px solid var(--cm-border); background: var(--cm-soft); }
.cm-composer-tabs, .cm-composer-tools { display: flex; gap: .15rem; }
.cm-tab, .cm-tool { border: 0; background: none; color: var(--cm-muted); border-radius: .35rem; padding: .25rem .55rem; font-size: .82rem; }
.cm-tab.is-active { color: inherit; background: rgba(255, 255, 255, .08); }
.cm-tool { width: 2rem; padding: .25rem 0; }
.cm-tool:hover:not(:disabled), .cm-tab:hover { color: inherit; background: rgba(255, 255, 255, .06); }
.cm-tool:disabled { opacity: .35; }
.cm-input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; resize: vertical; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .9rem; line-height: 1.55; background: transparent; }
.cm-preview { padding: .75rem .9rem; }
.cm-composer-help { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .35rem .7rem; font-size: .75rem; color: var(--cm-muted); border-top: 1px solid var(--cm-border); }
.cm-composer-help code { font-size: .95em; }
.cm-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
.cm-form-foot .cm-form-error { margin-right: auto; }
.cm-edit-form { margin: .35rem 0 .5rem; }

.cm-join, .cm-blocked { margin-bottom: 1rem; }

/* New / edit thread */
.cm-thread-form .form-label, .cm-thread-form legend.form-label { font-weight: 600; font-size: .95rem; }
.cm-choice { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .8rem; border: 1px solid var(--cm-border); border-radius: .5rem; margin-bottom: .5rem; }
.cm-choice .form-check-input { margin-top: .2rem; flex: 0 0 auto; }
.cm-choice label { display: grid; gap: .1rem; cursor: pointer; }
.cm-choice label span { color: var(--cm-muted); font-size: .85rem; }
.cm-setup legend { margin-bottom: .25rem; }
.cm-nickname-status.is-ok { color: var(--cm-success); }
.cm-nickname-status.is-bad { color: var(--bs-danger, #ff6b6b); }

/* Members-only wall */
.cm-wall { max-width: 30rem; margin: 2rem auto; text-align: center; padding: 2rem 1.5rem; }
.cm-wall-icon { font-size: 2rem; color: var(--cm-accent); margin-bottom: .75rem; }

/* Toast */
.cm-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1080; max-width: calc(100% - 2rem); padding: .6rem 1rem; border-radius: .5rem; background: var(--bs-panel-2, #121a27); border: 1px solid var(--cm-border); color: var(--bs-body-color, #e8eef7); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4); font-size: .9rem; }
.cm-toast a { color: var(--cm-accent); margin-left: .25rem; }

@media (max-width: 575.98px) {
    .cm-page { --cm-indent: .6rem; }
    .cm-main { padding-left: 0; }
    .cm--team > .cm-card .cm-main { padding-left: .6rem; }
    .cm-more { padding-left: 0; }
    .cm-op { padding: 1rem .9rem .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cm.is-flash > .cm-card { animation: none; }
}

/* Content discussions: the item a thread belongs to */
.cm-about { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .7rem 1rem; }
.cm-about-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cm-muted); font-weight: 600; }
.cm-about-title { font-weight: 600; overflow-wrap: anywhere; }
.cm-about-more { margin-left: auto; font-size: .85rem; }
.cm-items .cm-thread-score small { white-space: nowrap; }

/* Reports (phase 4) */
.cm-action.cm-report:hover:not(:disabled), .cm-action.cm-report:focus-visible { color: var(--bs-danger, #ff6b6b); }
.cm-action.cm-report.is-done { color: var(--bs-warning, #ffd343); opacity: .8; cursor: default; }
.cm-action.cm-report.is-done:hover { background: none; }
#cm-report-modal .cm-choice { margin-bottom: .4rem; }

/* Follow and notifications (phase 5) */
.cm-action.cm-follow.is-on { color: var(--bs-warning, #ffd343); }
.cm-notifs { list-style: none; margin: 0 0 1.5rem; padding: 0; border: 1px solid var(--cm-border); border-radius: var(--cm-radius); overflow: hidden; }
.cm-notif + .cm-notif { border-top: 1px solid var(--cm-border); }
.cm-notif a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .25rem .75rem; align-items: baseline; padding: .85rem 1rem; color: inherit; text-decoration: none; border-left: 3px solid transparent; }
.cm-notif a:hover, .cm-notif a:focus-visible { background: rgba(255, 255, 255, .04); }
.cm-notif.is-unread a { border-left-color: var(--cm-accent); background: rgba(255, 112, 67, .06); }
.cm-notif-icon { color: var(--cm-muted); text-align: center; }
.cm-notif.is-unread .cm-notif-icon { color: var(--cm-accent); }
.cm-notif-text { overflow-wrap: anywhere; line-height: 1.5; }
.cm-notif-time { color: var(--cm-muted); font-size: .8rem; white-space: nowrap; }
@media (max-width: 575.98px) {
    .cm-notif a { grid-template-columns: 1.25rem minmax(0, 1fr); }
    .cm-notif-time { grid-column: 2; }
}
.cm-settings .form-switch .form-check-label { cursor: pointer; }