/* modou Community — board, topic and form.
   Colours come from the active theme's tokens when it defines them (the
   modou dsp theme does), with the same dark palette as the fallback, so the
   board looks at home on the site and still reads on any other theme. */

.mc-board {
  /* Default palette = dark, taken from the active theme's tokens when it has
     them (modou dsp does) and from the same dark values when it has not. */
  --mc-surface: var(--bg-charcoal, #161b22);
  --mc-surface-2: var(--bg-obsidian, #0b0e14);
  --mc-text: var(--text-primary, #f0f6fc);
  --mc-muted: var(--text-muted, #b4bcc6);
  --mc-faint: var(--text-faint, #8b949e);
  --mc-line: var(--border-overlay, #30363d);
  --mc-accent: var(--accent-mint, #00ff9d);
  --mc-nick: var(--nickname, #ffa07a);
  --mc-danger: var(--accent-peak, #ff5500);
  --mc-radius: var(--radius-card, 12px);
  --mc-page: var(--bg-obsidian, #0b0e14);

  max-width: 1100px;
  margin: 0 auto;
  color: var(--mc-text);
  /* The theme's body size when it defines one (modou dsp does). */
  font-size: var(--text-base, 1rem);
  line-height: 1.55;
}

/* Dark: the board brings its own dark panel, so it reads on a light site too.
   On the modou dsp theme the panel is the page colour and --mc-pad is 0, so
   it is invisible there. */
.mc-board[data-mc-theme="dark"] {
  background: var(--mc-page);
  color-scheme: dark;
  padding: var(--mc-pad, 1.25rem 1.5rem);
  border-radius: var(--mc-radius);
}

/* Light. */
.mc-board[data-mc-theme="light"] {
  --mc-surface: #ffffff;
  --mc-surface-2: #f4f6f8;
  --mc-text: #151a21;
  --mc-muted: #4b5563;
  --mc-faint: #6b7280;
  --mc-line: #d8dee6;
  --mc-accent: #087f5b;
  --mc-nick: #c2410c;
  --mc-danger: #c2410c;
  --mc-page: #ffffff;
  background: var(--mc-page);
  color-scheme: light;
  padding: var(--mc-pad, 1.25rem 1.5rem);
  border-radius: var(--mc-radius);
}

/* Auto: no panel, no fixed colours — everything is drawn from the text
   colour the page already uses. */
.mc-board[data-mc-theme="auto"] {
  --mc-surface: color-mix(in srgb, currentColor 5%, transparent);
  --mc-surface-2: color-mix(in srgb, currentColor 9%, transparent);
  --mc-text: currentColor;
  --mc-muted: color-mix(in srgb, currentColor 75%, transparent);
  --mc-faint: color-mix(in srgb, currentColor 55%, transparent);
  --mc-line: color-mix(in srgb, currentColor 22%, transparent);
  --mc-accent: var(--accent-mint, #0a7d5a);
  --mc-nick: var(--nickname, #c2410c);
  color: inherit;
}

.mc-board *,
.mc-board *::before,
.mc-board *::after { box-sizing: border-box; }

.mc-board a { color: inherit; text-decoration: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── Bar: total + sort ─────────────────────────────────────────────── */
.mc-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.mc-total { color: var(--mc-faint); font-weight: 600; }

.mc-board select,
.mc-board input[type="text"],
.mc-board input[type="search"],
.mc-board textarea {
  font: inherit;
  color: var(--mc-text);
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
}
.mc-board select { padding-right: 2rem; }
.mc-board input:focus, .mc-board select:focus, .mc-board textarea:focus { outline: 2px solid var(--mc-accent); outline-offset: 1px; }

/* ── Table ─────────────────────────────────────────────────────────── */
.mc-table-wrap { border: 1px solid var(--mc-line); border-radius: var(--mc-radius); overflow: hidden; background: var(--mc-surface); }
.mc-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mc-table th,
.mc-table td { padding: 0.85rem 0.9rem; text-align: left; vertical-align: middle; }
.mc-table thead th {
  background: var(--mc-surface-2);
  color: var(--mc-faint);
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--mc-line);
}
.mc-table tbody tr + tr td { border-top: 1px solid var(--mc-line); }
.mc-table tbody tr:hover { background: color-mix(in srgb, var(--mc-text) 3%, transparent); }

.mc-col-no { width: 6rem; color: var(--mc-faint); }
.mc-col-author { width: 11rem; }
.mc-col-date { width: 8.5rem; color: var(--mc-muted); white-space: nowrap; }
.mc-col-num { width: 5.5rem; text-align: right !important; color: var(--mc-muted); font-variant-numeric: tabular-nums; }

.mc-title { font-weight: 600; word-break: break-word; }
.mc-title:hover { color: var(--mc-accent); }
.mc-replies { margin-left: 0.4rem; color: var(--mc-accent); font-weight: 600; font-size: 0.9em; }
.mc-author { color: var(--mc-nick); font-weight: 600; }
.mc-empty td { text-align: center; color: var(--mc-faint); padding: 2.5rem 1rem; }

.mc-badge {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--mc-danger);
  border-radius: 999px;
  color: var(--mc-danger);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ── Pager ─────────────────────────────────────────────────────────── */
.mc-pager { margin: 2rem 0; }
.mc-pager ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.mc-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 2.2rem; padding: 0 0.6rem;
  border-radius: 8px; color: var(--mc-muted);
  font-variant-numeric: tabular-nums;
}
.mc-pager a.page-numbers:hover { background: var(--mc-surface); color: var(--mc-text); }
.mc-pager .page-numbers.current { background: var(--mc-accent); color: var(--mc-surface-2); font-weight: 700; }
.mc-pager .page-numbers.dots { min-width: 0; }

/* ── Search and actions ────────────────────────────────────────────── */
.mc-search {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 1.1rem; background: var(--mc-surface); border: 1px solid var(--mc-line); border-radius: var(--mc-radius);
}
.mc-search input[type="search"] { width: min(22rem, 100%); }
.mc-actions { display: flex; justify-content: flex-end; margin-top: 1.25rem; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.mc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.4rem; padding: 0.5rem 1.1rem;
  font: inherit; font-weight: 600; cursor: pointer;
  color: var(--mc-text); background: transparent;
  border: 1px solid var(--mc-line); border-radius: 8px;
}
.mc-btn:hover { border-color: var(--mc-accent); color: var(--mc-accent); }
.mc-btn:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }
.mc-btn-dark { background: var(--mc-accent); border-color: var(--mc-accent); color: var(--mc-surface-2); }
.mc-btn-dark:hover { background: color-mix(in srgb, var(--mc-accent) 85%, white); color: var(--mc-surface-2); }
.mc-btn-danger:hover { border-color: var(--mc-danger); color: var(--mc-danger); }

/* ── Topic page ────────────────────────────────────────────────────── */
.mc-back { margin: 0 0 1rem; color: var(--mc-muted); }
.mc-back a:hover { color: var(--mc-accent); }
.mc-topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin: 0 0 1.25rem; color: var(--mc-faint); }
.mc-no { font-weight: 700; color: var(--mc-muted); }
.mc-topic-body { padding: 1.4rem 0; border-top: 1px solid var(--mc-line); border-bottom: 1px solid var(--mc-line); overflow-wrap: anywhere; }
.mc-topic-body > :first-child { margin-top: 0; }
.mc-topic-body > :last-child { margin-bottom: 0; }
.mc-topic-body img { max-width: 100%; height: auto; }
.mc-topic-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1.25rem 0 2rem; }
.mc-vote-msg { color: var(--mc-faint); font-size: 0.9em; }

.mc-vote {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.4rem; padding: 0.5rem 1.1rem;
  font: inherit; font-weight: 600; cursor: pointer;
  color: var(--mc-muted); background: transparent;
  border: 1px solid var(--mc-line); border-radius: 999px;
}
.mc-vote:hover { border-color: var(--mc-accent); color: var(--mc-accent); }
.mc-vote.is-voted { background: color-mix(in srgb, var(--mc-accent) 14%, transparent); border-color: var(--mc-accent); color: var(--mc-accent); }
.mc-vote:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }
.mc-vote-count { font-variant-numeric: tabular-nums; }

/* ── Replies ───────────────────────────────────────────────────────── */
.mc-replies-title { font-size: 1.2em; margin: 0 0 1rem; }
.mc-reply { padding: 1rem 0; border-top: 1px solid var(--mc-line); }
.mc-reply-head { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; margin-bottom: 0.4rem; color: var(--mc-faint); }
.mc-reply-delete { margin-left: auto; color: var(--mc-faint); }
.mc-reply-delete:hover { color: var(--mc-danger); }
.mc-reply-body { overflow-wrap: anywhere; }
.mc-reply-body p:first-child { margin-top: 0; }
.mc-reply-body p:last-child { margin-bottom: 0; }

.mc-board .comment-respond { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--mc-line); }
.mc-reply-form-title { margin: 0 0 0.8rem; font-size: 1.1em; }
.mc-board .comment-form textarea { width: 100%; }
.mc-board .comment-form .form-submit { margin: 0.8rem 0 0; text-align: right; }
.mc-board .comment-form input[type="submit"] { font: inherit; font-weight: 600; cursor: pointer; min-height: 2.4rem; padding: 0.5rem 1.4rem; border-radius: 8px; border: 1px solid var(--mc-accent); background: var(--mc-accent); color: var(--mc-surface-2); }
.mc-board #cancel-comment-reply-link { margin-left: 0.6rem; font-size: 0.8em; }

.mc-notice { padding: 1rem 1.2rem; background: var(--mc-surface); border: 1px solid var(--mc-line); border-left: 3px solid var(--mc-accent); border-radius: 8px; color: var(--mc-muted); }
.mc-notice a { color: var(--mc-accent); text-decoration: underline; }

/* ── Write / edit form ─────────────────────────────────────────────── */
.mc-form label { display: block; margin-bottom: 0.35rem; font-weight: 600; }
.mc-form input[type="text"] { width: 100%; }
.mc-editor { margin: 1rem 0; }
.mc-editor .wp-editor-container { border-color: var(--mc-line); border-radius: 8px; overflow: hidden; }
.mc-private label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 500; cursor: pointer; }
.mc-private input { accent-color: var(--mc-accent); }
.mc-form-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; }

/* ── Narrow screens: each row becomes a card ───────────────────────── */
@media (max-width: 720px) {
  .mc-table, .mc-table tbody, .mc-table tr, .mc-table td { display: block; width: 100%; }
  .mc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mc-table tbody tr { padding: 0.9rem 1rem; }
  .mc-table tbody tr + tr { border-top: 1px solid var(--mc-line); }
  .mc-table td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; border: 0 !important; text-align: right !important; }
  .mc-table td::before { content: attr(data-label); color: var(--mc-faint); font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; flex: none; }
  .mc-table td.mc-col-title { display: block; text-align: left !important; padding-bottom: 0.5rem; }
  .mc-table td.mc-col-title::before { display: none; }
  .mc-table td.mc-col-no::before { content: '#'; }
  .mc-table td.mc-col-no { justify-content: flex-start; gap: 0.2rem; }
  .mc-table td.mc-col-no, .mc-table td.mc-col-author, .mc-table td.mc-col-date, .mc-table td.mc-col-num { width: auto; }
  .mc-bar { flex-wrap: wrap; }
  .mc-search { align-items: stretch; }
  .mc-search select, .mc-search .mc-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) { .mc-board * { transition: none !important; } }

/* ── Categories ────────────────────────────────────────────────────── */
.mc-cats { margin: 0 0 1.25rem; }
.mc-cats ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.mc-cats a {
  display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0.3rem 1rem;
  border: 1px solid var(--mc-line); border-radius: 999px; color: var(--mc-muted); font-weight: 600;
}
.mc-cats a:hover { border-color: var(--mc-accent); color: var(--mc-text); }
.mc-cats a[aria-current="true"] { border-color: var(--mc-accent); color: var(--mc-accent); background: color-mix(in srgb, var(--mc-accent) 10%, transparent); }
.mc-cats a:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }

.mc-chip {
  display: inline-block; margin-right: 0.5rem; padding: 0.05rem 0.6rem;
  border: 1px solid var(--mc-line); border-radius: 999px;
  color: var(--mc-muted); font-size: 0.8em; font-weight: 600; vertical-align: middle; white-space: nowrap;
}
.mc-chip:hover { border-color: var(--mc-accent); color: var(--mc-accent); }
.mc-topic-meta .mc-chip { margin-right: 0; }