/* ==========================================================================
   Panels, forum tables & borders — the retro content containers (forumheader*,
   bodytable*, content-section*, nforumview*, nforumholder*) plus border
   utilities and the category cell. Values resolve to tokens.css.
   ========================================================================== */

/* ---- ---- ---- ---- Borders ---- ---- ---- ---- */

.bordered-1 {
  border: 1px solid var(--border-accent);
  border-collapse: separate;
  border-spacing: 0;
}

.border,
.border3 {
  border: 1px solid var(--border-strong);
}

.border2 {
  border: 1px solid var(--border-subtle);
}

.border-black-300 {
  border: 1px solid var(--border-subtle);
}

.topborder {
  border-bottom: 1px solid var(--border-strong);
}

.bottomborder {
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.fborder {
  border: 1px solid var(--border-strong);
  background-color: var(--white);
}

.forumborder {
  border: 1px solid var(--border-accent-dark);
}

/* ---- ---- ---- ---- Forum headers ---- ---- ---- ---- */

.forumheader {
  background-color: #ebeff2;
  font: var(--text-base) var(--font-ui);
  color: var(--text-strong);
  padding: var(--space-2);
  background-image: url(/assets/cap1-4969c221eefd0aec9b02d8a907f83c976ab6788ca8d0840cca2da61ee9faa6ff.png);
  border: 1px solid var(--border-muted);
}

.forumheader2 {
  background-color: var(--surface-1);
  font: var(--text-lg) var(--font-ui);
  color: var(--text-strong);
  padding: var(--space-2);
  border: 1px solid var(--border-muted);
}

.forumheader3 {
  background-color: var(--surface-alt);
  font: var(--text-sm) var(--font-ui);
  color: var(--text-strong);
  padding: var(--space-2);
  border: 1px solid var(--border-muted);
}

.finfobar {
  background-color: var(--surface-header-info);
  font: var(--text-xl) var(--font-ui);
  color: var(--text-strong);
  padding: var(--space-2);
  border: 1px solid var(--border-muted);
  background-image: url(/finfobar.png);
}

/* ---- ---- ---- ---- Body tables & code ---- ---- ---- ---- */

.bodytable,
.bodytable3 {
  padding: var(--space-3);
  font: var(--text-xs) var(--font-ui);
  color: var(--text-strong);
}

.bodytable2 {
  border: 1px solid var(--border-subtle);
  padding: var(--space-3);
  font: var(--text-sm) var(--font-ui);
  color: var(--text-soft);
}

.code {
  border: 1px solid var(--border-code);
  padding: var(--space-3);
  background-color: #eeecec;
  font: var(--text-base) var(--font-code);
  color: var(--text-accent-strong);
}

/* ---- ---- ---- ---- nForum panels ---- ---- ---- ---- */

.nforumholder {
  border: 1px solid var(--border-light);
  padding: 0;
  background-color: var(--white);
  min-width: 100%;
  border-collapse: collapse;
}

.nforumholder-2 {
  padding: 0;
  background-color: var(--white);
  min-width: 100%;
  border-collapse: collapse;
}

.nforumcaption {
  background-image: url(/assets/nforumcaption-4ac453e537d68489db59a3cee305d05a2134c6e50250c2789f769b36139c40c5.png);
  padding: var(--space-3) var(--space-2);
  font: var(--text-base) var(--font-ui);
  color: var(--text-on-dark);
}

/* Content panels — shared base, size/fill differ per level. */
.content-section-1,
.content-section-2,
.content-section-3,
.content-section-4 {
  border: 1px solid var(--border-light);
  padding: var(--space-2);
  font-family: var(--font-ui);
}

.content-section-1,
.content-section-4 {
  background-color: var(--surface-1);
  font-size: var(--text-base);
}

.content-section-2 {
  background-color: var(--surface-2);
  font-size: var(--text-xs);
}

.content-section-3 {
  background-color: var(--surface-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.content-section-4 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Images inside quoted content render smaller. */
.content-section-2 img,
.indent img {
  max-width: 100%;
  height: auto;
  margin: var(--space-2) 0;
  border-radius: var(--radius-sm);
}

.nforumview1,
.nforumview2,
.nforumview3,
.nforumview4 {
  padding: var(--space-2);
  font-family: var(--font-ui);
}

.nforumview1 {
  border: 1px solid var(--border-light);
  background-color: var(--surface-1);
  font-size: var(--text-xs);
}

.nforumview2 {
  border: 1px solid var(--border-light);
  background-color: var(--surface-alt);
  font-size: var(--text-xs);
}

.nforumview3 {
  background-color: var(--surface-accent);
  font-size: var(--text-xs);
  color: var(--text-slate);
}

.nforumview4 {
  background-color: var(--surface-1);
  font-size: var(--text-2xs);
  color: var(--text-slate-soft);
}

/* ---- ---- ---- ---- Category ---- ---- ---- ---- */

.category-cell {
  border: 1px solid var(--border-light);
  padding: var(--space-2);
  background-color: var(--surface-2);
  vertical-align: middle !important;
  font: var(--text-xs) var(--font-ui);
}

tfoot .category-footer {
  display: flex;
  align-items: center;
  justify-content: right;
}