/* ==========================================================================
   Caption bars — the retro PNG-backed header strips (caption*, fcaption,
   section bars) and their frame tiles. Values resolve to tokens.css.
   ========================================================================== */

/* ---- ---- ---- ---- Section bars ---- ---- ---- ---- */

/* Blue horizontal header bar (PNG-backed). */
.section-1 {
  background-image: url(/assets/nforumcaption2-2499a259945e27f9b19d6d7174609a1f68fd8bdac69ea51ddecd341ed907bd6a.png);
  padding: var(--space-3);
  font: bold var(--text-xs) var(--font-ui);
  color: var(--text-strong);
  max-height: 28px;
}

.section-2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: var(--space-2);
  padding: var(--space-3);
  max-width: 100%;
  max-height: 31px;
  font-size: var(--text-base);
  color: var(--text-on-dark);
  border: 1px solid var(--border-light);
  background-image: url(/assets/nforumcaption-4ac453e537d68489db59a3cee305d05a2134c6e50250c2789f769b36139c40c5.png);
}

.section-3 {
  gap: var(--space-2);
  padding: var(--space-3);
  max-width: 100%;
  max-height: 31px;
  font-size: var(--text-base);
  color: var(--text-on-dark);
  background-image: url(/assets/nforumcaption-4ac453e537d68489db59a3cee305d05a2134c6e50250c2789f769b36139c40c5.png);
}

/* ---- ---- ---- ---- Legacy captions ---- ---- ---- ---- */

.caption {
  padding: 0 var(--space-2);
  border: 1px solid #363a44;
  border-left-color: #8a96b3;
  border-top-color: #8a96b3;
  background-color: var(--surface-caption);
  color: var(--text-strong);
  font: var(--text-md) var(--font-caption);
  background-image: url(/assets/cap1-4969c221eefd0aec9b02d8a907f83c976ab6788ca8d0840cca2da61ee9faa6ff.png);
}

.caption2 {
  padding: 0 var(--space-2);
  color: #243b3b;
  font: var(--text-xl) var(--font-caption);
  text-align: center;
}

.caption3 {
  padding: 0 var(--space-2);
  border: 1px solid var(--border-light);
  border-bottom-color: var(--border-subtle);
  border-right-color: transparent;
  background-color: var(--surface-caption-alt);
  color: var(--text-strong);
  font: var(--text-md) var(--font-caption);
}

.captiontopleft {
  width: 24px;
  background-image: url(/topleft.png);
}

.captiontopmiddle {
  width: 100%;
  background-repeat: repeat-x;
  background-image: url(/top.png);
}

.captiontopright {
  width: 11px;
  background-image: url(/topright.png);
}

.captionleft {
  width: 24px;
  background-image: url(/assets/capleft-7a602724e73760b0430089c14e7693c73be343955da396f2c9385711d9b60516.png);
}

.captionbar {
  background-repeat: repeat-x;
  padding-right: 10px;
  font-size: var(--text-xs);
  color: var(--text-on-dark);
  font-family: var(--font-ui);
  background-image: url(/assets/capdark-da8de9f5b1f09626cb4d05bc6462e3a07d453481e466132fb5f982ca46facb89.png);
}

.captionend {
  width: 12px;
  background-image: url(/assets/captransition-008bed9f251316efdf28e22e67dd5101432aa63e2c25e80ed301e92241dcd60e.png);
}

.captionmain {
  width: 100%;
  background-repeat: repeat-x;
  background-image: url(/assets/caplight-41dd02a54b9d0b09547d7775d59d5f747a25f9f2e6a65f8bc5695c49ac140ed3.png);
}

.captionright {
  width: 11px;
  background-image: url(/assets/capright-8df7c98127a77e132cabac6c1613333e220835127b7fedc42398b712eaaa9f79.png);
}

.fcaption {
  border: 1px solid var(--border-strong);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  background-color: #c9c7c7;
  font: var(--text-base) var(--font-ui);
  background-image: url(/fcap.png);
  color: var(--text-on-dark);
}

.fcaption a {
  color: var(--link-on-caption);
  text-decoration: underline;
}

.fcaption a:hover {
  color: var(--link-on-caption-hover);
  text-decoration: underline;
}