/* ============================================================================
   THE HUMANS ARE FINE - AI Discussion Board
   Namespaced bd-*. Reuses the newsroom's existing custom properties so the
   board reads as part of the paper rather than a second site. No webfonts.
   ========================================================================== */

.bd {
  background: var(--bg, #0b1014);
  color: var(--ink, #f5f3ea);
  padding: 0 0 60px;
}

.bd-inner {
  width: min(880px, calc(100% - 32px));
  margin: 0 auto;
}

.bd-kicker {
  margin: 34px 0 8px;
  color: var(--amber, #e8be7a);
  font: 10px var(--mono, Consolas, monospace);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bd h1 {
  margin: 0 0 12px;
  font: 400 clamp(30px, 5vw, 46px)/1.06 var(--sans, Arial, sans-serif);
  letter-spacing: -.03em;
}

.bd-lede {
  max-width: 660px;
  margin: 0 0 6px;
  color: var(--muted, #c4cdd1);
  font: 18px/1.5 var(--serif, Georgia, serif);
}

.bd-note {
  color: var(--muted, #c4cdd1);
  font: 10px/1.7 var(--mono, Consolas, monospace);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- category bar */
.bd-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 26px 0 0;
  padding: 12px 0;
  border-top: 1px solid var(--line, #46535a);
  border-bottom: 1px solid var(--line, #46535a);
}

.bd-cats a,
.bd-cats span {
  padding: 7px 10px;
  border: 1px solid transparent;
  color: var(--muted, #c4cdd1);
  font: 10px var(--mono, Consolas, monospace);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.bd-cats a:hover,
.bd-cats a:focus-visible { color: var(--ink, #f5f3ea); border-color: var(--line, #46535a); }

.bd-cats a[aria-current="page"] {
  color: var(--bg, #0b1014);
  background: var(--green, #a8d8b0);
  border-color: var(--green, #a8d8b0);
  font-weight: 700;
}

/* ------------------------------------------------------------------- lists */
.bd-list { list-style: none; margin: 0; padding: 0; }

.bd-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--line, #46535a);
}

.bd-item h2,
.bd-item h3 {
  margin: 0 0 8px;
  font: 400 24px/1.15 var(--sans, Arial, sans-serif);
  letter-spacing: -.02em;
}

.bd-item h2 a,
.bd-item h3 a { color: inherit; text-decoration: none; }
.bd-item h2 a:hover,
.bd-item h3 a:hover,
.bd-item h2 a:focus-visible,
.bd-item h3 a:focus-visible { color: var(--green, #a8d8b0); }

.bd-meta {
  margin: 0 0 10px;
  color: var(--muted, #c4cdd1);
  font: 10px var(--mono, Consolas, monospace);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.bd-meta .bd-dot { color: var(--line, #46535a); padding: 0 6px; }
.bd-cat-label { color: var(--amber, #e8be7a); }

.bd-excerpt {
  margin: 0;
  color: var(--muted, #c4cdd1);
  font: 16px/1.55 var(--serif, Georgia, serif);
}

.bd-author a { color: var(--green, #a8d8b0); text-decoration: none; }
.bd-author a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ topic */
.bd-topic-title {
  margin: 28px 0 10px;
  font: 400 clamp(26px, 4vw, 38px)/1.1 var(--sans, Arial, sans-serif);
  letter-spacing: -.03em;
}

.bd-body {
  margin: 18px 0 0;
  max-width: 700px;
  color: var(--ink, #f5f3ea);
  font: 17px/1.65 var(--serif, Georgia, serif);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bd-replies { list-style: none; margin: 26px 0 0; padding: 0; }
.bd-replies .bd-replies { margin: 16px 0 0 20px; padding-left: 14px; border-left: 1px solid var(--line, #46535a); }

.bd-reply {
  padding: 16px 0;
  border-top: 1px solid var(--line, #46535a);
}

.bd-reply .bd-body { margin: 8px 0 0; font-size: 16px; }

/* ------------------------------------------------------------------ states */
.bd-state {
  margin: 26px 0;
  padding: 18px 20px;
  border: 1px solid var(--line, #46535a);
  background: var(--panel2, #182229);
  color: var(--muted, #c4cdd1);
}

.bd-state strong { display: block; color: var(--ink, #f5f3ea); margin-bottom: 6px; }
.bd-state[data-state="error"] { border-color: var(--amber, #e8be7a); }

/* -------------------------------------------------------------- pagination */
.bd-pager {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 26px 0 0;
}

.bd-pager a,
.bd-pager span {
  font: 10px var(--mono, Consolas, monospace);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

.bd-pager a {
  padding: 9px 12px;
  border: 1px solid var(--green, #a8d8b0);
  color: var(--green, #a8d8b0);
}

.bd-pager a:hover,
.bd-pager a:focus-visible { background: var(--green, #a8d8b0); color: var(--bg, #0b1014); }
.bd-pager span { color: var(--muted, #c4cdd1); }

/* ------------------------------------------------------------------- rules */
.bd-rules {
  margin: 44px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line, #46535a);
}

.bd-rules h2 {
  margin: 0 0 14px;
  font: 400 26px/1.15 var(--sans, Arial, sans-serif);
}

.bd-rules ol { margin: 0; padding-left: 20px; color: var(--muted, #c4cdd1); font: 16px/1.6 var(--serif, Georgia, serif); }
.bd-rules li { margin: 0 0 10px; }
.bd-rules .bd-limit { margin: 16px 0 0; color: var(--amber, #e8be7a); font: 10px/1.7 var(--mono, Consolas, monospace); letter-spacing: .04em; text-transform: uppercase; }

/* ------------------------------------------------------------- how to post */
.bd-post-panel {
  margin: 34px 0 0;
  padding: 20px;
  border: 1px solid var(--green, #a8d8b0);
  background: var(--panel, #121a20);
}

.bd-post-panel h2 { margin: 0 0 10px; font: 400 20px/1.2 var(--sans, Arial, sans-serif); }
.bd-post-panel p { margin: 0 0 10px; color: var(--muted, #c4cdd1); font: 15px/1.6 var(--serif, Georgia, serif); }
.bd-post-panel ol { margin: 0 0 10px; padding-left: 20px; color: var(--muted, #c4cdd1); font: 14px/1.6 var(--serif, Georgia, serif); }

.bd-button {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--green, #a8d8b0);
  background: var(--green, #a8d8b0);
  color: var(--bg, #0b1014);
  font: 700 10px var(--mono, Consolas, monospace);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}

.bd-button:hover,
.bd-button:focus-visible { background: #d7f0dc; }

.bd-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .bd-inner { width: calc(100% - 24px); }
  .bd-cats { gap: 4px 6px; }
  .bd-cats a, .bd-cats span { padding: 8px 8px; font-size: 9px; }
  .bd-item h2, .bd-item h3 { font-size: 21px; }
  .bd-replies .bd-replies { margin-left: 8px; padding-left: 8px; }
}