/* ==========================================================================
   Message Board — component family (organism)

   Member-facing message-board surfaces. BEM blocks:
     .mb-board / .mb-row / .mb-panel    — board cards (boards index)
     .mb-layout / .mb-feed / .mb-aside  — board show two-column shell
     .mb-banner / .mb-stat              — board banner header + stat pill
     .mb-composer / .mb-filter / .mb-chip — inline quick-composer + topic filter
     .mb-post                           — post-summary card (+ --pinned variant)
     .mb-metric / .mb-lastcomment / .mb-contributors — post metrics row
     .mb-announcement                   — accent-tinted board announcement callout
     .mb-back / .mb-article             — post detail header + body
     .mb-attach / .mb-media / .mb-files / .mb-file — attachment gallery
     .mb-actions                        — post action bar
     .mb-comments / .mb-comment / .mb-reply / .mb-comment-form — comment thread
     .mb-headline-input / .mb-body-editor / .mb-topics — compose/edit form

   The like control lives in components/like-button.css, not in this file.
   Card surfaces (white background, padding, radius) come from .card /
   .card--white in components/cards.css — this file never hard-codes them.
   ========================================================================== */

/* ---------- Boards index — board cards ---------------------------------- */

.mb-boards-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 768px) { .mb-boards-grid { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } }

/* Cover card (magazine) */
.mb-board { display:flex; flex-direction:column; padding:0; overflow:hidden; text-decoration:none; color:inherit; }
.mb-board__cover { height:132px; position:relative; background:linear-gradient(135deg, var(--accent-primary), var(--accent-hover)); display:flex; align-items:center; justify-content:center; }
.mb-board__cover img { width:100%; height:100%; object-fit:cover; }
.mb-board__cover .material-symbols-rounded { color:var(--text-on-accent); opacity:0.85; font-size:40px; }
.mb-board__body { padding: var(--space-4) var(--space-5); display:flex; flex-direction:column; gap: var(--space-2); flex:1; }
.mb-board__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--text-primary); line-height: var(--leading-snug); }
.mb-board__overview { font-size: var(--text-sm); color: var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mb-board__meta { margin-top:auto; padding-top: var(--space-3); border-top:1px solid var(--border-subtle); display:flex; gap: var(--space-4); }
.mb-board__stat { display:inline-flex; align-items:center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-tertiary); }
.mb-board__stat .material-symbols-rounded { font-size:16px; }

/* Media-left row (dense list) */
.mb-rows { display:flex; flex-direction:column; gap: var(--space-3); }
.mb-row { display:flex; align-items:center; gap: var(--space-4); padding: var(--space-3) var(--space-4); text-decoration:none; color:inherit; }
.mb-row__thumb { width:56px; height:56px; border-radius: var(--radius-lg); flex-shrink:0; overflow:hidden; background:linear-gradient(135deg, var(--accent-muted), var(--accent-hover)); display:flex; align-items:center; justify-content:center; }
.mb-row__thumb .material-symbols-rounded { color:var(--text-on-accent); font-size:26px; }
.mb-row__main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mb-row__name { font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--text-primary); }
.mb-row__overview { font-size: var(--text-sm); color: var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mb-row__meta { display:flex; gap: var(--space-4); flex-shrink:0; }
.mb-row__chev { color: var(--text-tertiary); }

/* Icon panel (no hero) */
.mb-panel { display:flex; flex-direction:column; gap: var(--space-3); text-decoration:none; color:inherit; }
.mb-panel__head { display:flex; align-items:flex-start; gap: var(--space-3); }
.mb-panel__icon { width:44px; height:44px; border-radius: var(--radius-lg); background: var(--accent-muted); color: var(--accent-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mb-panel__name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--text-primary); line-height: var(--leading-snug); }
.mb-panel__overview { font-size: var(--text-sm); color: var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mb-panel__meta { display:flex; gap: var(--space-4); padding-top: var(--space-2); border-top:1px solid var(--border-subtle); }

/* ---------- Board show — two-column shell ------------------------------- */

.mb-layout { display:grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) { .mb-layout { grid-template-columns: minmax(0,1fr) 280px; align-items:start; } }
.mb-feed { display:flex; flex-direction:column; gap: var(--space-4); min-width:0; }

/* Board banner header */
.mb-banner { padding:0; overflow:hidden; }
.mb-banner__cover { height:120px; background:linear-gradient(135deg,var(--accent-primary),var(--accent-hover)); }
.mb-banner__cover img { width:100%; height:100%; object-fit:cover; }
.mb-banner__body { padding: var(--space-4) var(--space-5); display:flex; align-items:center; gap: var(--space-4); flex-wrap:wrap; }
.mb-banner__title { font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-xl); }
.mb-banner__stats { display:flex; gap: var(--space-4); margin-left:auto; }
.mb-stat { display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--text-xs); color:var(--text-tertiary); }
.mb-stat .material-symbols-rounded { font-size:16px; }

/* Inline composer */
.mb-composer { display:flex; align-items:center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.mb-composer input { flex:1; border:none; background:transparent; font:inherit; font-size:max(var(--control-min-font-size), var(--text-base)); color:var(--text-primary); outline:none; }
.mb-composer input::placeholder { color:var(--input-placeholder); }
.mb-composer__hint { font-size:var(--text-xs); color:var(--text-tertiary); display:inline-flex; align-items:center; gap:var(--space-1); }

/* Topic filter chips */
.mb-filter { display:flex; gap: var(--space-2); flex-wrap:wrap; align-items:center; }
.mb-chip { display:inline-flex; align-items:center; gap:var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size:var(--text-xs); font-weight:var(--weight-semibold); border:1px solid var(--border-subtle); background:var(--surface-base); color:var(--text-secondary); cursor:pointer; }
.mb-chip--active { background:var(--accent-primary); border-color:var(--accent-primary); color:var(--text-on-accent); }
.mb-chip--hidden { margin-left:auto; color:var(--text-tertiary); }

/* Post summary card */
.mb-post { display:flex; flex-direction:column; gap: var(--space-3); }
.mb-post__link { display:flex; flex-direction:column; gap: var(--space-3); text-decoration:none; color:inherit; }
.mb-post__pin-icon { font-size:14px; }
.mb-post__comment-link { text-decoration:none; color:inherit; }
.mb-post__comment-link:hover { color: var(--accent-primary); }
.mb-post--pinned { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary), var(--shadow-sm); }
.mb-post__top { display:flex; align-items:flex-start; gap: var(--space-2); }
.mb-post__author { font-weight:var(--weight-semibold); font-size:var(--text-sm); color:var(--text-primary); }
.mb-post__sub { font-size:var(--text-xs); color:var(--text-tertiary); }
.mb-post__pin { margin-left:auto; }
.mb-post__main { display:flex; gap: var(--space-4); }
.mb-post__content { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-2); }
.mb-post__headline { font-family:var(--font-display); font-weight:var(--weight-bold); font-size:var(--text-lg); color:var(--text-primary); line-height:var(--leading-snug); }
.mb-post__excerpt { font-size:var(--text-sm); color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mb-post__cover { width:120px; height:90px; border-radius:var(--radius-lg); overflow:hidden; flex-shrink:0; }
.mb-post__cover img { width:100%; height:100%; object-fit:cover; }
.mb-post__metrics { display:flex; align-items:center; gap: var(--space-4); padding-top: var(--space-2); border-top:1px solid var(--border-subtle); }

/* Post metrics row */
.mb-metric { display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--text-sm); color:var(--text-tertiary); }
.mb-metric .material-symbols-rounded { font-size:18px; }
.mb-lastcomment { margin-left:auto; font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--accent-primary); cursor:pointer; }
.mb-contributors { display:flex; }
.mb-contributors .avatar { margin-left:-6px; border:2px solid var(--surface-base); }
.mb-contributors .avatar:first-child { margin-left:0; }

/* Aside board info */
.mb-aside { display:flex; flex-direction:column; gap:var(--space-4); }
@media (max-width:899px){ .mb-aside{ display:none; } }
.mb-aside__cover { height:96px; border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--accent-muted),var(--accent-hover)); margin-bottom:var(--space-3); overflow:hidden; }
.mb-aside__overview { font-size:var(--text-sm); color:var(--text-secondary); }

/* Board announcement — accent-tinted callout (reuses .callout structure) */
.mb-announcement.callout--success {
  background-color: var(--accent-subtle);
  border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
  color: var(--text-primary);
}
.mb-announcement.callout--success .callout__icon .material-symbols-rounded { color: var(--accent-primary); }

/* ---------- Post detail ------------------------------------------------- */

.mb-back { display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--text-sm); color:var(--text-secondary); margin-bottom:var(--space-4); cursor:pointer; }

.mb-article { display:flex; flex-direction:column; gap:var(--space-4); }
.mb-article__head { display:flex; align-items:center; gap:var(--space-3); }
.mb-article__author { font-weight:var(--weight-semibold); color:var(--text-primary); }
.mb-article__sub { font-size:var(--text-xs); color:var(--text-tertiary); }
.mb-article__cover { border-radius:var(--radius-lg); overflow:hidden; }
.mb-article__cover img { width:100%; height:auto; display:block; }
.mb-article__headline { font-family:var(--font-display); font-weight:var(--weight-extrabold); font-size:var(--text-3xl); line-height:var(--leading-tight); color:var(--text-primary); }

/* Attachment gallery */
.mb-attach__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2); }
@media (min-width:560px){ .mb-attach__grid { grid-template-columns:repeat(3,1fr); } }
.mb-media { position:relative; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; background:var(--surface-sunken); }
.mb-media img { width:100%; height:100%; object-fit:cover; }
.mb-media__play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.25); }
.mb-files { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-2); }
.mb-file { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border:1px solid var(--border-subtle); border-radius:var(--radius-md); text-decoration:none; color:inherit; background:var(--surface-base); }
.mb-file:hover { border-color:var(--border-default); background:var(--surface-hover); }
.mb-file__icon { width:32px; height:32px; border-radius:var(--radius-sm); background:var(--accent-muted); color:var(--accent-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mb-file__name { flex:1; min-width:0; font-size:var(--text-sm); font-weight:var(--weight-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mb-file__dl { color:var(--text-tertiary); }

/* Post action bar */
.mb-actions { display:flex; align-items:center; gap:var(--space-2); padding-top:var(--space-3); border-top:1px solid var(--border-subtle); }
.mb-actions__right { margin-left:auto; display:flex; gap:var(--space-1); }
.mb-metric { display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--text-sm); color:var(--text-tertiary); padding:0 var(--space-2); }
.mb-metric .material-symbols-rounded { font-size:18px; }

/* Comments */
.mb-comments { margin-top:var(--space-6); display:flex; flex-direction:column; gap:var(--space-4); }
.mb-comments__head { display:flex; align-items:center; justify-content:space-between; }
.mb-comments__title { font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:var(--text-lg); }

.mb-comment-form { display:flex; gap:var(--space-3); }
.mb-comment-form__main { flex:1; display:flex; flex-direction:column; gap:var(--space-2); }
.mb-comment-form textarea { width:100%; resize:vertical; min-height:44px; }
.mb-comment-form__bar { display:flex; align-items:center; gap:var(--space-2); }
.mb-comment-form__bar .spacer { flex:1; }

.mb-comment { display:flex; gap:var(--space-3); }
.mb-comment__main { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-1); }
.mb-comment__head { display:flex; align-items:baseline; gap:var(--space-2); }
.mb-comment__author { font-weight:var(--weight-semibold); font-size:var(--text-sm); }
.mb-comment__time { font-size:var(--text-xs); color:var(--text-tertiary); }
.mb-comment__body { font-size:var(--text-sm); color:var(--text-primary); }
.mb-comment__row { display:flex; align-items:center; gap:var(--space-1); margin-top:var(--space-1); }
.mb-comment__parent { border-left:2px solid var(--border-strong); padding:var(--space-1) var(--space-3); margin-bottom:var(--space-2); background:var(--surface-neutral); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.mb-comment__parent .who { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text-secondary); }
.mb-comment__parent .snip { font-size:var(--text-xs); color:var(--text-tertiary); }
.mb-reply { margin-left:var(--space-8); }

/* ---------- Compose / edit form ----------------------------------------- */

.mb-headline-input { font-family:var(--font-display); font-weight:var(--weight-extrabold); font-size:var(--text-2xl); }
.mb-body-editor { border:1px solid var(--input-border); border-radius:var(--radius-lg); overflow:hidden; }
.mb-body-editor__toolbar { display:flex; gap:var(--space-1); padding:var(--space-2); border-bottom:1px solid var(--border-subtle); background:var(--surface-neutral); }
.mb-body-editor__toolbar .material-symbols-rounded { font-size:18px; color:var(--text-secondary); padding:var(--space-1); border-radius:var(--radius-sm); cursor:pointer; }
.mb-body-editor__area { padding:var(--space-3); min-height:120px; color:var(--text-primary); }
/* topics = plain flex row of label-only DS toggle pills (no input-box wrapper) */
.mb-topics { display:flex; flex-wrap:wrap; gap:var(--space-2); }