/* Community board (base/templates/base/community_*.html), 2026-08-28. */
.cm-intro { color:var(--ink-3); font-size:0.9rem; margin-bottom:0.75rem; max-width:70ch; }
.cm-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 0 16px; }
.cm-search { display:flex; gap:6px; align-items:center; }
.cm-search input { padding:7px 10px; border:1px solid var(--line-strong); border-radius:var(--r-sm); min-width:220px;
  background:var(--field, var(--paper)); color:var(--ink); }
.cm-crumbs { font-size:0.85rem; color:var(--ink-3); margin:4px 0 8px; }
.cm-crumbs a { color:var(--link); text-decoration:none; }
.cm-h2 { font-size:1.05rem; margin:22px 0 8px; color:var(--ink-2); }
.cm-hint { color:var(--ink-3); font-size:0.8rem; font-weight:400; }
.cm-hint code, .cm-body code { font-family:var(--font-data); font-size:0.85em; background:var(--surface-2);
  padding:1px 5px; border-radius:var(--r-xs); }

/* Section cards. */
.cm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.cm-card { display:flex; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); text-decoration:none; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.cm-card:hover { border-color:var(--accent); box-shadow:var(--shadow-1); }
.cm-card__icon { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--accent-tint); color:var(--accent-tint-ink); font-size:1.05rem; }
.cm-card__name { font-weight:600; display:flex; align-items:center; gap:8px; }
.cm-card__blurb { color:var(--ink-3); font-size:0.82rem; margin-top:2px; }
.cm-count { display:inline-block; min-width:1.6em; text-align:center; padding:0 6px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink-2); font-size:0.75rem; font-weight:600; }

/* Post rows. */
.cm-row { display:flex; gap:12px; align-items:center; padding:11px 14px; border:1px solid var(--line);
  border-radius:var(--r-sm); margin-bottom:8px; background:var(--surface); text-decoration:none; color:var(--ink); }
.cm-row:hover { border-color:var(--accent); }
.cm-row--pinned { border-left:3px solid var(--brand-gold); }
.cm-row__main { flex:1; min-width:0; }
.cm-row__title { font-weight:600; }
.cm-row__teaser { color:var(--ink-2); font-size:0.85rem; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-row__meta { color:var(--ink-3); font-size:0.78rem; margin-top:4px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.cm-badge { background:var(--accent-tint); color:var(--accent-tint-ink); padding:0 7px; border-radius:var(--r-pill); font-weight:600; }
.cm-row__stats { display:flex; gap:12px; color:var(--ink-3); font-size:0.85rem; white-space:nowrap; }
.cm-empty { color:var(--ink-3); font-style:italic; padding:14px 0; }
.cm-pager { display:flex; gap:16px; align-items:center; justify-content:center; margin:16px 0; color:var(--ink-3); font-size:0.9rem; }
.cm-pager a { color:var(--link); text-decoration:none; font-weight:600; }

/* A thread. */
.cm-post { border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:20px 22px; }
.cm-post__title { font-size:1.5rem; margin:0 0 4px; line-height:var(--lh-tight); }
.cm-post__meta, .cm-comment__meta { color:var(--ink-3); font-size:0.82rem; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.cm-author { font-weight:600; color:var(--ink-2); }
.cm-body { margin-top:14px; line-height:var(--lh-body); max-width:var(--nh-read-measure); overflow-wrap:anywhere; }
.cm-body p { margin:0 0 0.8em; }
.cm-body h4, .cm-body h5 { margin:1.1em 0 0.4em; }
.cm-body ul, .cm-body ol { margin:0 0 0.8em 1.4em; }
.cm-body pre { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px;
  overflow-x:auto; font-family:var(--font-data); font-size:0.82rem; margin:0 0 0.8em; }
.cm-body pre code { background:none; padding:0; font-size:inherit; }
.cm-body blockquote { border-left:3px solid var(--line-strong); margin:0 0 0.8em; padding:2px 12px; color:var(--ink-2); }
.cm-body a { color:var(--link); }
.cm-body--comment { margin-top:6px; }
.cm-gallery { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.cm-fig { margin:0; max-width:320px; }
.cm-fig img { display:block; width:100%; height:auto; max-height:320px; object-fit:contain; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface-2); }
.cm-fig figcaption { font-size:0.78rem; color:var(--ink-3); margin-top:3px; }
.cm-fig--pick { display:flex; flex-direction:column; gap:4px; font-size:0.85rem; cursor:pointer; }
.cm-post__actions { display:flex; gap:8px; align-items:center; margin-top:18px; padding-top:12px; border-top:1px solid var(--line); flex-wrap:wrap; }
.cm-spacer { flex:1; }
.cm-inline { margin:0; display:inline; }
.cm-vote { border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:var(--r-pill);
  padding:5px 12px; font:inherit; font-size:0.85rem; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.cm-vote--on { background:var(--accent-tint); border-color:var(--accent); color:var(--accent-tint-ink); }
.button-link--quiet { background:transparent; color:var(--link); border:1px solid var(--line-strong); }
.button-link--quiet:hover { background:var(--surface-2); color:var(--link); }

/* Comments. */
.cm-comments { margin-top:22px; }
.cm-comment { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); padding:10px 14px; margin-bottom:8px; }
.cm-comment:target { border-color:var(--accent); }
.cm-comment__del { margin-left:auto; }
.cm-comment-form, .cm-form { display:flex; flex-direction:column; gap:6px; margin-top:14px; max-width:var(--nh-read-measure); }
.cm-label { font-weight:600; font-size:0.9rem; margin-top:8px; }
.cm-form input[type=text], .cm-form select, .cm-form textarea, .cm-comment-form textarea {
  width:100%; padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--r-sm); font:inherit;
  background:var(--field, var(--paper)); color:var(--ink); }
.cm-form textarea, .cm-comment-form textarea { font-family:var(--font-data); font-size:0.9rem; line-height:1.45; resize:vertical; }
body.dark-mode .cm-card, body.dark-mode .cm-row, body.dark-mode .cm-post, body.dark-mode .cm-comment { background:var(--surface-2); }
body.dark-mode .cm-body pre, body.dark-mode .cm-count, body.dark-mode .cm-body code { background:var(--surface); }
@media (max-width:560px) {
  .cm-row { flex-wrap:wrap; }
  .cm-post { padding:14px; }
}

/* W23 L12-3: pipe tables in a post body. */
.cm-body table.cm-table { border-collapse:collapse; margin:0 0 0.8em; font-size:0.95em; max-width:100%; display:block; overflow-x:auto; }
.cm-body .cm-table th, .cm-body .cm-table td { border:1px solid var(--line); padding:4px 10px; text-align:left; vertical-align:top; }
.cm-body .cm-table th { background:var(--surface-2); font-weight:600; }

/* W23: who sees a post (the board is public and deployment-wide). */
/* A sentence, so it takes the reading measure and not the shell's — otherwise
   the widened board would run it to 1400px on one line. */
/* A hairline box, uniformly ruled. The accent edge it carried made it the
   one highlighted stripe on the compose page; the bold "Who sees this:" lead
   already does that job, in words. */
.cm-audience { margin:0 0 14px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink-2); font-size:0.92em; max-width:var(--nh-read-measure); }

/* --- The public shell (Wave 24 Q5) -----------------------------------------
   The board renders on base.html, which loads site.css and not the signed-in
   shell's main.css — so the handful of shell classes the board's pages use
   (.button-link, .icon-button, .page-head, .messages) are restated here,
   scoped to .cm-page so nothing else on the public shell changes. */
/* The board's shell is the public shell's ordinary measure — the same column
   as the home page and as the signed-in app, rather than the 960px it used to
   pick for itself. What the extra width is FOR is the layout: sixteen section
   cards go four across instead of three, a post row can carry its title,
   teaser and stats on one line, and a picture gallery fits three abreast. What
   it is emphatically not for is line length — every body of running text on
   the board is held to --nh-read-measure below, and none of them moved. */
.cm-page { max-width: var(--nh-page-measure); margin: 0 auto; padding: 20px 20px 40px; color: var(--ink); }
.cm-page .page-head { background: var(--band); border-radius: var(--r-md) var(--r-md) 0 0; margin: 0 0 1.5rem; padding: 18px 20px 16px; }
.cm-page .page-head .header-bar { margin: 0 0 0.6rem; padding: 0; background: none; border-radius: 0; text-align: left; }
.cm-page .page-head .header-bar::after { display: none; }
.cm-page .header-bar { background: none; margin: 0 0 12px; padding: 0; text-align: left; }
.cm-page .header-bar::after { display: none; }
.cm-page .button-link { display: inline-block; text-decoration: none; padding: 8px 16px; background-color: var(--accent); color: var(--accent-ink);
  font-family: inherit; font-size: 0.9rem; font-weight: 600; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; }
.cm-page .button-link:hover { background-color: var(--accent-hover); color: var(--accent-ink); }
.cm-page .button-link:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.cm-page .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  background: none; border: none; border-radius: var(--r-sm); color: var(--ink-2); font-size: 0.95rem; line-height: 1; cursor: pointer; }
.cm-page .icon-button:hover { background: var(--surface-2); color: var(--ink); }
.cm-page .icon-button--danger { color: var(--critical-ink); }
.cm-page .icon-button--danger:hover { background: var(--critical-tint); color: var(--critical-ink); }
.cm-page .messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.cm-page .messages li { padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 0.75rem; }
.cm-page .messages li.success { background: var(--good-tint); color: var(--good-ink); }
.cm-page .messages li.error { background: var(--critical-tint); color: var(--critical-ink); }
.cm-page .messages li.warning { background: var(--warning-tint); color: var(--warning-ink); }
.cm-page .messages li.info { background: var(--accent-tint); color: var(--link); }
.cm-join-hint { color: var(--ink-3); font-size: 0.85rem; }
.cm-join-hint a, .cm-join a { color: var(--link); font-weight: 600; }

/* --- Geronimo Engineering's note above the hub (Wave 24 Q5 addendum #4) ----
   Speech-bubble callouts in the brand blue and gold on the soft neutral band;
   pure CSS, tokens for dark mode. */
.cm-welcome { --cm-blue: #2887b1; --cm-gold: var(--brand-gold, #cb8616); background: var(--band); border-radius: var(--r-md);
  padding: 22px 22px 18px; margin: 4px 0 22px; font-family: var(--font-ui); }
.cm-welcome__bubbles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 22px; margin-bottom: 18px;
  align-items: stretch; }
.cm-bubble { position: relative; color: #fff; border-radius: 22px; padding: 16px 20px; line-height: 1.45; font-size: 0.95rem; }
.cm-bubble strong { display: block; font-size: 1.05rem; margin-bottom: 4px; letter-spacing: 0.01em; }
.cm-bubble::after { content: ""; position: absolute; bottom: -12px; left: 34px; width: 0; height: 0;
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid currentColor; }
.cm-bubble--blue { background: var(--cm-blue); color: #fff; }
.cm-bubble--blue::after { border-top-color: var(--cm-blue); }
.cm-bubble--gold { background: var(--cm-gold); color: #fff; }
.cm-bubble--gold::after { border-top-color: var(--cm-gold); }
.cm-welcome__lead { color: var(--cm-blue); font-style: italic; font-size: 1.02rem; margin: 6px 0 16px; max-width: 70ch; }
.cm-welcome__values { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
  align-items: stretch; }
/* The two values are a pair, so they read as one: each card is a column that
   fills the row's height and pushes its pill to the bottom, so the two pills
   sit on one line however differently long the two descriptions are
   (2026-08-29 — Inafa'maolek is shorter than Aloha Spirit and the pills were
   22 px out of step). */
.cm-value { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.5;
  display: flex; flex-direction: column; height: 100%; }
.cm-value p { margin: 0 0 10px; }
.cm-value p:last-of-type { margin-bottom: 14px; }
.cm-value .cm-pill { margin-top: auto; align-self: flex-start; }
.cm-value__name { margin: 0 0 6px; color: var(--cm-blue); font-size: 1.15rem; }
.cm-pill { display: inline-block; border-radius: var(--r-pill, 999px); padding: 6px 14px; color: #fff; font-weight: 600; font-size: 0.85rem; line-height: 1.35; }
.cm-pill--gold { background: var(--cm-gold); }
.cm-pill--blue { background: var(--cm-blue); }
.cm-welcome__close { text-align: center; margin: 16px 0 0; }
.cm-welcome--compact { padding: 12px 18px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cm-welcome--compact .cm-welcome__lead { margin: 0; font-size: 0.9rem; }
.cm-welcome--compact .cm-welcome__close { margin: 0; }
.cm-audience--spirit { color: var(--ink-2); }

/* --- Follows, mentions, notifications, sorting (Wave 24 Q7) ---------------- */
.cm-card { align-items:flex-start; }
.cm-card__link { display:flex; gap:12px; flex:1; min-width:0; text-decoration:none; color:inherit; }
.cm-card--following { border-color:var(--accent); }
.cm-follow-form { margin:0; flex:none; }
.cm-follow { border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); border-radius:var(--r-pill);
  padding:4px 11px; font:inherit; font-size:0.8rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.cm-follow:hover { border-color:var(--accent); color:var(--link); }
.cm-follow--on { background:var(--accent-tint); border-color:var(--accent); color:var(--accent-tint-ink); }
.cm-sort { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-pill); overflow:hidden; margin:0 0 10px; font-size:0.82rem; }
.cm-sort__opt { padding:5px 12px; color:var(--ink-2); text-decoration:none; border-right:1px solid var(--line); }
.cm-sort__opt:last-child { border-right:0; }
.cm-sort__opt:hover { background:var(--surface-2); }
.cm-sort__opt.is-on { background:var(--accent); color:var(--accent-ink); font-weight:600; }
.cm-bell { position:relative; }
/* The two icon links in the board's bar. They are controls, not words, so they
   get a square tap target and a fraction of the horizontal padding a nav word
   takes — the bar was noticeably wider than it needed to be with two emoji
   sitting in full link padding (operator, 2026-08-29). The glyph inherits the
   bar's colour through `currentColor`, so it greys and highlights with the
   links either side of it and carries no colour of its own. */
/* CENTRED ON THE ROW (operator, 2026-09-06: "bell and settings gear are not
   centered"). The words either side are 41.6px tall — a 25.6px line plus 8px
   of padding each way — and these were 30px (an 18px glyph plus 6px), so the
   bar's `align-items: stretch` stretched their <li> to the row and the
   anchor sat at the TOP of it, its centre 5.8px above the words' (measured
   in headless Chromium). `display:flex` + `height:100%` make the anchor fill
   its stretched <li> — a percentage height resolves against a stretched flex
   item — and `align-items:center` puts the glyph on the row's centre line.
   In the collapsed menu the <li> is not stretched vertically, `100%` falls
   back to auto, and the same 8px padding around an inherited 25.6px line
   (the label `::after` restores below) makes the row 41.6px like the rest.
   `line-height: 1` is gone for that reason. */
/* `.nav-links .cm-nav-icon`, two classes: site.css's `.nav-links a` sets
   `display: inline-block` at (0,1,1), and a bare `.cm-nav-icon` at (0,1,0)
   lost `display` to it — the glyph then sat at the top of a 41.6px box. */
.nav-links .cm-nav-icon { display:flex; align-items:center; justify-content:center; box-sizing:border-box; height:100%;
  padding:8px 4px !important; }
.cm-nav-icon__g { width:18px; height:18px; display:block; flex:0 0 auto; opacity:0.82; }
.cm-nav-icon:hover .cm-nav-icon__g,
.cm-nav-icon:focus-visible .cm-nav-icon__g { opacity:1; }
/* The unread count is the ONE thing here allowed a colour: it is a number that
   has to be noticed, which is the opposite job from the icon carrying it.
   The DEEPER gold, not the logo gold: white on #cb8616 is 3.02:1 and this pill
   is a number a reader has to be able to read, at 0.66rem — the smallest text
   on the bar, so it is normal text for AA and needs 4.5:1. #8a5a0d is the
   palette's "gold carrying text" step (site.css --brand-gold-deeper, 5.92:1),
   which is exactly what this is. The logo gold stays where it belongs: fills,
   borders and focus rings. */
.cm-bell__count { display:inline-block; min-width:1.4em; margin-left:1px; padding:0 4px; border-radius:var(--r-pill); background:var(--brand-gold-deeper, #8a5a0d);
  color:#fff; font-size:0.66rem; font-weight:700; text-align:center; line-height:1.5; }
.cm-nav-prefs { font-size:1rem; }
/* Stacked in the hamburger the icons are alone on a row and need their label
   back, so the row is not two mystery glyphs under the words. */
.navbar.nav-compact .cm-nav-icon,
.nav-links.show .cm-nav-icon { justify-content:flex-start; padding:8px 12px !important; }
.navbar.nav-compact .cm-nav-icon::after,
.nav-links.show .cm-nav-icon::after { content:attr(title); margin-left:10px; font-size:inherit; }
.cm-notif { display:flex; gap:8px; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:8px; background:var(--surface); }
.cm-notif--unread { border-left:3px solid var(--accent); }
.cm-notif__main { flex:1; min-width:0; display:flex; justify-content:space-between; gap:12px; align-items:baseline; color:var(--ink); text-decoration:none; }
.cm-notif__title { font-weight:600; }
.cm-notif__when { color:var(--ink-3); font-size:0.78rem; white-space:nowrap; }
.cm-mention { color:var(--link); font-weight:600; text-decoration:none; }
.cm-mention:hover { text-decoration:underline; }
.cm-profile { border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:18px 22px; }
.cm-profile__name { margin:0 0 4px; font-size:1.4rem; }
.cm-profile__meta { margin:0; color:var(--ink-3); font-size:0.9rem; }
.cm-prefs__table { border-collapse:collapse; margin:8px 0; }
.cm-prefs__table th, .cm-prefs__table td { border:1px solid var(--line); padding:8px 12px; text-align:left; }
.cm-prefs__table thead th { background:var(--surface-2); font-size:0.85rem; }
.cm-prefs__table td { text-align:center; }
.cm-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nav-link.is-active { font-weight:700; }
body.dark-mode .cm-notif, body.dark-mode .cm-profile { background:var(--surface-2); }

/* Status line from the in-browser picture shrink (static/js/image_downscale.js).
   Same treatment as on the app shell: informational, never a warning. */
.nh-downscale-note { display:inline-block; margin-left:8px; font-size:0.74rem; color:var(--ink-3); }
.nh-downscale-note:empty { display:none; }