/* ── reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  color: #222;
  background: #E3E9EF;
}
a { color: #2E6EA6; text-decoration: none; }
a:hover { text-decoration: underline; color: #0050A0; }

h1, h2, h3 { color: #536482; }
hr { border: 0; border-top: 1px solid #B3C0D8; }

/* ── layout ── */
#wrap { max-width: 1024px; margin: 0 auto; padding: 0 4px; background: #E3E9EF; }

/* ── header ── */
#page-header {
  background: linear-gradient(to bottom, #536A91 0%, #2B4C7E 100%);
  padding: 12px 16px;
  margin-bottom: 0;
}
.header-titlebar { display: flex; align-items: flex-start; gap: 8px; }
.header-titletext { padding-top: 8px; }
.header-titlebar .site-logo { display: block; max-height: 50px; max-width: 100%; }
.header-titlebar .site-logo--natural { max-height: none; max-width: none; }
#page-header h1 { margin: 0; font-size: 1.5em; color: #fff; }
#page-header h1 a { color: #fff; }
#page-header h1 a:hover { text-decoration: none; color: #D1E8FF; }
#page-header .site-tagline { color: #D1E8FF; font-size: 0.95em; font-style: italic; margin: 0; }
#page-header .site-desc { display: flex; justify-content: space-between; align-items: baseline; color: #A8C4E0; font-size: 0.9em; margin: 8px 0 0; }
#page-header .site-desc a.header-search { color: #fff; }
#page-header .site-desc a.header-search:hover { text-decoration: none; color: #D1E8FF; }

/* ── breadcrumb ── */
.breadcrumb {
  font-size: 0.9em;
  margin-bottom: 8px;
  padding: 4px 8px;
  background: #D1D7E3;
  border: 1px solid #B3C0D8;
  color: #536482;
}
.breadcrumb a { color: #2E6EA6; }

/* ── forum index / category blocks ── */
.forabg, .forumbg {
  background: #D1D7E3;
  border: 1px solid #B3C0D8;
  margin-bottom: 10px;
}
.forabg .header, .forumbg .header {
  padding: 6px 10px;
  font-weight: bold;
  color: #536482;
  background: #D1D7E3;
  border-bottom: 1px solid #B3C0D8;
}
.forabg .header a { color: #536482; }
.forabg .header .header-title, .forumbg .header .header-title { display: block; }
.forabg .header .header-cols, .forumbg .header .header-cols {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  font-weight: normal;
  font-size: 0.85em;
  margin-top: 3px;
}
.forabg .header .header-cols .col-count, .forumbg .header .header-cols .col-count { min-width: 60px; text-align: right; }
.forabg .header .header-cols .col-lastpost, .forumbg .header .header-cols .col-lastpost { min-width: 180px; max-width: 180px; }
.forum-description { padding: 4px 10px 6px; font-size: 0.85em; color: #555; background: #fff; border-bottom: 1px solid #D1D7E3; }
.forum-description--no-border { border-bottom: none; }
ul.topiclist { list-style: none; margin: 0; padding: 0; }
ul.topiclist.forums { background: #fff; }
ul.topiclist li.row {
  border-top: 1px solid #D1D7E3;
  padding: 6px 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
ul.topiclist li.row:first-child { border-top: none; }
ul.topiclist li.row .forum-title { font-weight: bold; flex: 1; }
ul.topiclist li.row .forum-title a { color: #2E6EA6; }
ul.topiclist li.row .forum-desc { font-size: 0.85em; color: #555; font-weight: normal; }
.topic-flag {
  display: inline-block;
  font-size: 0.7em;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
  text-transform: uppercase;
}
.topic-flag--sticky { background: #536482; color: #fff; }
.topic-flag--announce { background: #D31141; color: #fff; }
.topic-flag--global { background: #7A3FA0; color: #fff; }
.topic-flag--locked { background: #999; color: #fff; }
ul.topiclist li.row .col-count { min-width: 60px; text-align: right; color: #555; font-size: 0.9em; }
ul.topiclist li.row .col-lastpost { min-width: 180px; max-width: 180px; font-size: 0.85em; color: #555; }

/* ── topic list (forum.html) ── */
table.topic-table { width: 100%; border-collapse: collapse; }
table.topic-table th {
  background: #D1D7E3;
  color: #536482;
  padding: 5px 8px;
  text-align: left;
  border-bottom: 1px solid #B3C0D8;
}
table.topic-table td { padding: 5px 8px; border-top: 1px solid #D1D7E3; vertical-align: top; background: #fff; }
table.topic-table tr:first-child td { border-top: none; }
table.topic-table td.subject a { color: #2E6EA6; font-weight: bold; }
table.topic-table td.count { text-align: right; font-size: 0.9em; color: #555; }
table.topic-table td.lastpost { font-size: 0.85em; color: #555; }

/* ── post layout ── */
.post-wrap {
  display: flex;
  border: 1px solid #B3C0D8;
  margin-bottom: 8px;
  background: #fff;
}
.postprofile {
  min-width: 130px;
  max-width: 155px;
  width: 155px;
  padding: 8px;
  border-right: 1px solid #B3C0D8;
  background: #EAF0F8;
  color: #536482;
  font-size: 0.9em;
  flex-shrink: 0;
}
/* --profile-position right */
.post-wrap--right { flex-direction: row-reverse; }
.post-wrap--right .postprofile { border-right: none; border-left: 1px solid #B3C0D8; }
.postprofile strong { color: #000; display: block; margin-bottom: 4px; font-size: 1.05em; }
.postprofile a { color: #2E6EA6; }
.postprofile .user-avatar img { max-width: 90px; max-height: 90px; display: block; margin: 4px auto 6px; }
.postprofile .rank-img img { max-width: 120px; display: block; margin: 2px 0; }
.postbody { padding: 8px 12px; vertical-align: top; flex: 1; min-width: 0; }
.post-date { font-size: 0.85em; color: #666; margin-bottom: 6px; border-bottom: 1px solid #D1D7E3; padding-bottom: 4px; }
.post-date a.post-permalink { color: inherit; text-decoration: none; }
.post-date a.post-permalink:hover { text-decoration: underline; }
.content { color: #333; max-width: 80ch; }
.sig {
  border-top: 1px solid #D1D7E3;
  margin-top: 10px;
  padding-top: 6px;
  font-size: 0.85em;
  color: #666;
}

/* Post edit notice ("Last edited by...") */
.notice {
  background: #EAF0F8;
  border: 1px solid #B3C0D8;
  padding: 6px 10px;
  margin-top: 10px;
  font-size: 0.85em;
  color: #666;
}
.notice strong { color: #536482; }

/* Topic/forum pagination (see TOPIC_PAGE_SIZE/FORUM_PAGE_SIZE in generate.py) */
.pagination {
  margin: 8px 0;
  padding: 6px 0;
  font-size: 0.9em;
}
.pagination--align-left { text-align: left; }
.pagination--align-center { text-align: center; }
.pagination--align-right { text-align: right; }
.pagination--top { margin-bottom: 10px; }
.pagination a { margin: 0 3px; }
.pagination strong { margin: 0 3px; color: #536482; }

/* ── profile table ── */
table.tablebg { border-collapse: collapse; background: #fff; border: 1px solid #B3C0D8; }
table.tablebg th { background: #D1D7E3; color: #536482; padding: 6px 10px; text-align: left; border-bottom: 1px solid #B3C0D8; }
table.tablebg td { padding: 5px 10px; border-top: 1px solid #D1D7E3; }

/* ── bbcode elements ── */
blockquote {
  background: #EAF0F8;
  border-left: 4px solid #2E6EA6;
  margin: 8px 0 8px 16px;
  padding: 6px 10px;
  color: #333;
}
blockquote blockquote { background: #D8E6F3; }
blockquote .quote-header { font-weight: bold; font-size: 0.9em; color: #536482; margin-bottom: 4px; }

.codebox {
  background: #F4F4F4;
  border: 1px solid #B3C0D8;
  margin: 8px 0;
  padding: 0;
}
.codebox pre {
  margin: 0;
  padding: 8px;
  overflow-x: auto;
  font-size: 0.9em;
  color: #333;
}

.inline-attachment { margin: 8px 0; }
.inline-attachment img { max-width: 100%; }
.inline-attachment em { display: block; font-style: normal; font-size: 0.8em; color: #555; margin-top: 2px; }
.attachment-missing { color: #c00; font-style: italic; }
.attachment-icon {
  color: #536482;
  vertical-align: middle;
  margin-right: 4px;
}

/* Board-wide announcement (see --announcement) */
.announcement {
  background: #F3E3E3;
  border: 1px solid #D9BFBF;
  color: #7A3030;
  padding: 8px 12px;
  margin-bottom: 10px;
}

/* Poll results (read-only — this is a static archive, voting is closed) */
.poll {
  background: #EAF0F8;
  border: 1px solid #B3C0D8;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.poll-title { font-weight: bold; color: #536482; margin-bottom: 8px; }
.poll-option { margin-bottom: 6px; }
.poll-option-text { font-size: 0.95em; color: #333; }
.poll-bar { background: #D1D7E3; height: 14px; margin: 2px 0; }
.poll-bar-fill { background: #2E6EA6; height: 100%; }
.poll-option-stats { font-size: 0.8em; color: #666; }
.poll-total { font-size: 0.85em; color: #536482; margin-top: 6px; border-top: 1px solid #D1D7E3; padding-top: 4px; }

details.spoiler summary { cursor: pointer; color: #2E6EA6; }

/* Board-statistics block (index.html only) */
.board-stats {
  background: #D1D7E3;
  border: 1px solid #B3C0D8;
  padding: 8px 12px;
  margin-bottom: 10px;
  text-align: center;
}
.board-stats h3 { margin: 0 0 4px; font-size: 1em; color: #536482; }
.board-stats p { margin: 0; font-size: 0.9em; color: #333; }

/* ── footer ── */
#page-footer {
  text-align: center;
  font-size: 0.85em;
  color: #536482;
  margin-top: 10px;
  padding: 8px;
  border-top: 1px solid #B3C0D8;
  background: #D1D7E3;
}
#page-footer a { color: #2E6EA6; }

/* Pagefind search widget (see --search) — re-themed via its own CSS
   custom properties instead of overriding its markup/classes directly. */
#search {
  --pagefind-ui-primary: #2E6EA6;
  --pagefind-ui-text: #333333;
  --pagefind-ui-background: #FFFFFF;
  --pagefind-ui-border: #B3C0D8;
  --pagefind-ui-tag: #D1D7E3;
  --pagefind-ui-font: Verdana, Geneva, sans-serif;
}

/* Narrow screens: the two structural things that don't reflow on their
   own — the fixed-width post sidebar, and the fixed-width lastpost
   column, which is wide enough to crowd a phone-size viewport. */
@media (max-width: 600px) {
  .post-wrap, .post-wrap--right { flex-direction: column; }
  .postprofile, .post-wrap--right .postprofile {
    width: auto;
    max-width: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #B3C0D8;
  }
  ul.topiclist li.row .col-lastpost,
  .forabg .header .header-cols .col-lastpost,
  .forumbg .header .header-cols .col-lastpost {
    min-width: 100px;
    max-width: 130px;
    font-size: 0.8em;
  }
}