/*
 * blog/style.css -- iNKOBAN Forums
 *
 * A SINCERE RECREATION OF A phpBB 2.x / vBULLETIN 3.x FORUM FROM 2004.
 *
 * blog posts are forum threads. androong is the sole poster.
 * the fictional engine is iNKOBBS v3.1.4.
 * the forum has existed since 2003 and you just stumbled onto it.
 *
 * Verdana at 11px. table-based thread lists. alternating row colors.
 * user card sidebars. BBCode quote blocks. signature dividers.
 * 88x31 badges in the footer. purple visited links.
 * zero border-radius. instant state changes. zero apologies.
 *
 * design touchstones:
 *   - phpBB 2.x "subsilver" default skin
 *   - vBulletin 3.x default blue
 *   - SomethingAwful forums (user cards, custom titles, signatures)
 *   - 2ch / Futaba channel (information density, monospace, text-heavy)
 *   - early Yahoo.co.jp (every pixel working, dense link footers)
 *
 * loaded LAST (after style.css + navbar.css) to win specificity.
 * everything scoped to .page-blog so other pages are untouched.
 */


/* ============================== CUSTOM PROPERTIES ========================= */

.page-blog {
  /* ---- header / chrome ---- */
  --blog-header-bg:         #89a5c7;
  --blog-header-dark:       #5d7ea6;
  --blog-header-text:       #ffffff;
  --blog-header-link:       #f4f8ff;

  /* ---- surfaces ---- */
  --blog-bg:                #d9e4f1;
  --blog-surface:           #ffffff;
  --blog-surface-alt:       #eef3f8;
  --blog-frame:             #b7c8da;

  /* ---- category bars ---- */
  --blog-catbar-bg:         #7d98bb;
  --blog-catbar-text:       #ffffff;

  /* ---- user card ---- */
  --blog-usercard-bg:       #edf2f8;
  --blog-usercard-border:   #c9d5e0;

  /* ---- text ---- */
  --blog-text:              #2f466a;
  --blog-text-muted:        #6a7d95;
  --blog-text-dim:          #93a3b7;
  --blog-link:              #2f466a;
  --blog-link-hover:        #2a63ba;
  --blog-link-visited:      #5d78a2;

  /* ---- accents ---- */
  --blog-accent:            #6ea25b;
  --blog-accent-dim:        #4f7b40;
  --blog-sticky:            #f6fbff;
  --blog-locked:            #f0f3f6;

  /* ---- rank colors ---- */
  --blog-rank-admin:        #9d1f1f;
  --blog-rank-mod:          #3b6f3b;
  --blog-rank-member:       #2f466a;

  /* ---- quote / code ---- */
  --blog-quote-bg:          #f6f9fc;
  --blog-quote-border:      #c6d3df;
  --blog-code-bg:           #f8fbfd;
  --blog-code-border:       #d0dbe6;

  /* ---- borders ---- */
  --blog-border:            #98acc3;
  --blog-border-light:      #d7e1eb;
  --blog-border-dark:       #7088a8;

  /* ---- fonts ---- */
  --blog-font-ui:           Verdana, Geneva, Tahoma, sans-serif;
  --blog-font-body:         Verdana, Geneva, Tahoma, sans-serif;
  --blog-font-head:         'Trebuchet MS', Verdana, sans-serif;
  --blog-font-mono:         'Courier New', Courier, monospace;
  --blog-font-post:         Verdana, Geneva, Tahoma, sans-serif;

  /* ---- theme assets ---- */
  --blog-header-image:      url("../assets/blog-theme/anna-bg-header.gif");
  --blog-header-overlay:    url("../assets/blog-theme/anna-butterflies.png");
  --blog-aero-bar:          linear-gradient(
                              180deg,
                              rgba(255,255,255,0.32) 0%,
                              rgba(255,255,255,0.12) 48%,
                              rgba(120,160,210,0.0)  49%,
                              rgba(80,120,175,0.18)  100%
                            ),
                            linear-gradient(
                              180deg,
                              #9ab8d4 0%,
                              #7899bc 38%,
                              #6989ae 60%,
                              #7c9fc4 100%
                            );
  --blog-page-image:        url("../assets/blog-theme/proglass-bg-header.jpg");
  --blog-footer-hearts:     url("../assets/blog-theme/anna-hearts.png");

  /* ---- elevation ---- */
  --blog-shell-shadow:      0 0 0 1px rgba(123, 151, 187, 0.35), 0 12px 28px rgba(57, 83, 116, 0.18);
}


/* ============================== GLOBAL OVERRIDES ========================== */
/* neutralize Win98 base styles. this page runs a forum, not a desktop.       */

.page-blog {
  margin: 0;
  background:
    /* top highlight — soft white wash */
    linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0px, rgba(255, 255, 255, 0) 200px),
    /* aurora sweep left — faint warm light curve */
    radial-gradient(ellipse 120% 260px at 20% 0%, rgba(180, 205, 232, 0.45) 0%, transparent 70%),
    /* aurora sweep right — cooler curve */
    radial-gradient(ellipse 90% 300px at 75% -20%, rgba(140, 175, 215, 0.35) 0%, transparent 65%),
    /* center glow */
    radial-gradient(ellipse 60% 180px at 50% 60px, rgba(200, 220, 240, 0.30) 0%, transparent 80%),
    /* base: blue top fading to flat */
    linear-gradient(180deg, #6d8cb2 0px, #7e9dc1 160px, var(--blog-bg) 360px, var(--blog-bg) 100%);
  background-attachment: scroll;
  font-family: var(--blog-font-ui);
  font-size: 11px;
  color: var(--blog-text);
  min-height: 100vh;
}

html:has(.page-blog) {
  box-shadow: none;
  background: var(--blog-bg);
}

.page-blog h1,
.page-blog h2,
.page-blog h3,
.page-blog h4,
.page-blog h5 {
  font-family: var(--blog-font-ui);
  color: var(--blog-text);
}

.page-blog p {
  font-family: var(--blog-font-ui);
  color: var(--blog-text);
  font-size: 11px;
}

.page-blog a {
  color: var(--blog-link);
  text-decoration: none;
}

.page-blog a:hover {
  color: var(--blog-link-hover);
  text-decoration: underline;
}

.page-blog a:visited {
  color: var(--blog-link-visited);
}

.page-blog ::selection {
  background: var(--blog-header-bg);
  color: #fff;
}

.page-blog hr {
  border: none;
  border-top: 1px solid var(--blog-border-light);
  background: transparent;
  height: 0;
  box-shadow: none;
  margin: 0;
}

/* kill Win98 layout containers */
.page-blog .master-container,
.page-blog .biggirl-container,
.page-blog .bigboy-container,
.page-blog .main-container,
.page-blog .body-container,
.page-blog .side-container {
  display: none;
}


/* ============================== NAVBAR OVERRIDES ========================== */
/* phpBB subsilver nav bar. dark blue panel with white bracket-links.
   same HTML structure, repainted as forum chrome. Verdana at 11px,
   [ bracket links ], no shadows, no accent borders -- flat phpBB panel.
   visually part of the forum skin, not a separate application bar.          */

.page-blog .navbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
    linear-gradient(to bottom, rgba(92, 124, 163, 0.45) 0%, rgba(111, 145, 184, 0.45) 100%),
    url("../assets/blog-theme/proglass-bg-header.jpg") center / cover no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  transform: none;
}

.page-blog .navbar-bg {
  background: transparent;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 8px 14px;
  letter-spacing: 0;
}

.page-blog .navbar .home a {
  text-decoration: none;
}

.page-blog .navbar .home h1 {
  color: #ffffff;
  font-family: var(--blog-font-head);
  font-size: 17px;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 0 rgba(56, 77, 107, 0.55);
}

.page-blog .navbar .home h1 u {
  text-decoration: none;
}

.page-blog .navbar .padding {
  display: none;
}

.page-blog .navbar-nav {
  gap: 0;
}

.page-blog .nav-item {
  padding: 0;
  border-right: none;
}

.page-blog .nav-item:first-child {
  border-left: none;
}

.page-blog .navbar .mybtn,
.page-blog .navbar .mybtn-nav,
.page-blog .navbar .mybtn-dropdown {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #f6fbff;
  font-family: var(--blog-font-ui);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 8px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(56, 77, 107, 0.55);
}

.page-blog .navbar .mybtn::before,
.page-blog .navbar .mybtn::after {
  content: none;
}

.page-blog .navbar .mybtn-dropdown::before,
.page-blog .navbar .mybtn-dropdown::after { content: none; }

.page-blog .navbar .mybtn:hover,
.page-blog .navbar .mybtn-nav:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

.page-blog .navbar .mybtn:active {
  background: rgba(0,0,0,0.15);
}

.page-blog .navbar .mybtn[aria-current="page"] {
  color: #ffffff;
  font-weight: bold;
  background: transparent;
}

.page-blog .mybtn-split {
  border: none;
  box-shadow: none;
  background: transparent;
  margin: 0;
  padding: 0;
  display: inline-flex;
}

.page-blog .mybtn-dropdown {
  padding: 8px 5px 8px 1px;
}

.page-blog .mybtn-dropdown::after {
  border-top-color: var(--blog-header-link);
}

.page-blog .mybtn-dropdown:hover::after {
  border-top-color: #ffffff;
}

.page-blog .dropdown-menu {
  background: linear-gradient(180deg, #fdfefe 0%, #edf2f7 100%);
  border: 1px solid var(--blog-border);
  box-shadow: 0 10px 16px rgba(53, 76, 106, 0.18);
}

.page-blog .dropdown-item {
  color: var(--blog-text);
  font-family: var(--blog-font-ui);
  font-size: 10px;
  text-transform: none;
}

.page-blog .dropdown-item:hover {
  background-color: #dbe7f2;
  color: var(--blog-link-hover);
}

.page-blog .dropdown-item:visited {
  color: var(--blog-text);
}

.page-blog .dropdown-divider {
  border-top-color: #4a7aaa;
}

.page-blog .navbar-toggler {
  background: transparent;
  border: 1px solid #4a7aaa;
  box-shadow: none;
  padding: 4px 6px;
  margin: 4px 8px;
}

.page-blog .navbar-toggler:hover {
  background: rgba(255,255,255,0.1);
}

.page-blog .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23d8e8ff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.page-blog .navbar-collapse {
  background: transparent;
}

.page-blog .navbar-collapse.show {
  background: var(--blog-header-dark);
  border-top: 1px solid #4a7aaa;
}


/* ============================== FORUM LAYOUT =============================== */
/* two-column: forum content + right portal sidebar.
   mirrors phpBB portal mods (Board3, phpBB Portal) which always
   put the sidebar on the right. flush, no gap, tight borders.
   forum-wrapper loses its centering -- the layout container does it now.     */

.forum-layout {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  padding: 14px 0 18px;
}


/* ============================== FORUM WRAPPER ============================= */

.forum-wrapper {
  flex: 1;
  min-width: 0;
  max-width: 960px;
  padding: 0;
}


/* ============================== FORUM HEADER ============================== */
/* dark blue gradient banner with forum title and fake nav links.             */

.forum-header {
  margin-bottom: 0;
}

.forum-header-banner {
  position: relative;
  background:
    linear-gradient(90deg, rgba(70, 92, 120, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%),
    var(--blog-header-image) center/cover no-repeat,
    linear-gradient(135deg, var(--blog-header-dark) 0%, var(--blog-header-bg) 50%, #adc1db 100%);
  padding: 18px 18px 16px;
  border: 1px solid var(--blog-border-dark);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: var(--blog-shell-shadow);
  min-height: 86px;
}

.forum-header-banner::after {
  content: "";
  position: absolute;
  inset: -12px -10px auto auto;
  width: 300px;
  height: 140px;
  background: var(--blog-header-overlay) right top / contain no-repeat;
  opacity: 0.42;
  pointer-events: none;
}

.forum-header-banner .forum-title {
  font-family: var(--blog-font-head);
  font-size: 30px;
  font-weight: bold;
  color: var(--blog-header-text);
  margin: 0 0 4px;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 10px rgba(72, 90, 112, 0.35);
  position: relative;
  z-index: 1;
}

.forum-header-banner .forum-tagline {
  font-family: var(--blog-font-ui);
  font-size: 10px;
  color: #eef6ff;
  margin: 0;
  font-style: italic;
  position: relative;
  z-index: 1;
}

.forum-header-nav {
  background: linear-gradient(180deg, #f5f8fb 0%, #dfe7f1 100%);
  border: 1px solid var(--blog-border-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.65);
  padding: 7px 12px;
  box-shadow: var(--blog-shell-shadow);
}

.forum-header-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.forum-header-nav li {
  display: inline;
}

.forum-header-nav a {
  color: var(--blog-link);
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  padding: 2px 6px;
}

.forum-header-nav a:visited {
  color: var(--blog-link);
}

.forum-header-nav a:hover {
  text-decoration: underline;
  color: var(--blog-link-hover);
}

.forum-header-nav .sep {
  color: var(--blog-header-link);
  font-size: 9px;
  margin: 0 2px;
  user-select: none;
}


/* ============================== BREADCRUMBS =============================== */

.forum-breadcrumb {
  padding: 8px 12px;
  font-size: 11px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5fa 100%);
  border: 1px solid var(--blog-border);
  border-top: none;
}

.forum-breadcrumb a {
  font-weight: bold;
}

.forum-breadcrumb .breadcrumb-sep {
  margin: 0 4px;
  color: var(--blog-text-muted);
  user-select: none;
}

.forum-breadcrumb .breadcrumb-current {
  font-weight: bold;
  color: var(--blog-text);
}


/* ============================== ANNOUNCEMENT BAR ========================== */

.forum-announce {
  background: linear-gradient(180deg, #fdfefe 0%, #edf4fb 100%);
  border: 1px solid var(--blog-border);
  border-top: none;
  padding: 6px 12px;
  font-size: 10px;
  color: var(--blog-text);
}

.forum-announce-icon {
  font-weight: bold;
  color: var(--blog-accent);
  margin-right: 6px;
}


/* ============================== THREAD LIST TABLE ========================= */
/* THE table. the real deal. forums WERE tables.                              */

.forum-threadlist {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--blog-border);
  border-top: none;
  margin-bottom: 0;
  font-size: 11px;
  box-shadow: var(--blog-shell-shadow);
}

.forum-threadlist th {
  background: var(--blog-aero-bar);
  color: var(--blog-catbar-text);
  font-size: 10px;
  font-weight: bold;
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid var(--blog-border-dark);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(74, 94, 120, 0.55);
}

.forum-threadlist th.col-status {
  width: 28px;
  text-align: center;
}

.forum-threadlist th.col-author {
  width: 100px;
}

.forum-threadlist th.col-date {
  width: 120px;
  white-space: nowrap;
}

.forum-threadlist td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--blog-border-light);
  vertical-align: top;
}

.forum-threadlist tbody tr:nth-child(odd) {
  background: linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
}

.forum-threadlist tbody tr:nth-child(even) {
  background: linear-gradient(180deg, #f6f9fc 0%, #edf3f9 100%);
}

.forum-threadlist tbody tr:hover {
  background: #dfeaf7;
}

/* sticky / pinned thread row */
.forum-thread-row--sticky {
  background: var(--blog-sticky) !important;
}

.forum-thread-row--sticky:hover {
  background: #edf6ff !important;
}

/* locked thread row (sticky takes priority if both) */
.forum-thread-row--locked:not(.forum-thread-row--sticky) {
  background: var(--blog-locked) !important;
}

.forum-thread-row--locked:not(.forum-thread-row--sticky) .forum-thread-link {
  color: var(--blog-text-muted);
}

/* status icon cell -- phpBB used tiny colored folder images.
   we fake them with CSS squares. no emoji. no unicode dingbats.              */
.forum-thread-status {
  text-align: center;
  width: 28px;
  vertical-align: middle;
}

.status-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #6f93bd;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.72);
}

.status-icon.status-read {
  background: radial-gradient(circle at 32% 32%, #ffffff 0%, #d7e3f0 45%, #aac0d9 100%);
}

.status-icon.status-new {
  background: radial-gradient(circle at 32% 32%, #ffffff 0%, #dff1d4 36%, #88b56e 100%);
}

.status-icon.status-sticky {
  background: radial-gradient(circle at 32% 32%, #ffffff 0%, #e7f3ff 35%, #7da6cf 100%);
}

.status-icon.status-locked {
  background: radial-gradient(circle at 32% 32%, #ffffff 0%, #e9edf1 35%, #a7b4c1 100%);
  position: relative;
}

.status-icon.status-locked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 4px;
  height: 5px;
  border: 1px solid #5d7087;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}

/* thread title cell */
.forum-thread-title {
  line-height: 1.4;
}

.forum-thread-link {
  font-weight: bold;
  font-size: 11px;
  color: var(--blog-link);
  text-decoration: none;
  cursor: pointer;
}

.forum-thread-link:hover {
  text-decoration: underline;
  color: var(--blog-link-hover);
}

.forum-thread-link:visited {
  color: var(--blog-link-visited);
}

.forum-thread-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  margin-left: 4px;
  border: 1px solid;
  vertical-align: middle;
}

.forum-thread-tag--tech {
  color: #1565c0;
  border-color: #90caf9;
  background: #e3f2fd;
}

.forum-thread-tag--webdesign {
  color: #2e7d32;
  border-color: #a5d6a7;
  background: #e8f5e9;
}

.forum-thread-tag--life {
  color: #bf360c;
  border-color: #ffab91;
  background: #fbe9e7;
}

.forum-thread-tag--meta {
  color: #6a1b9a;
  border-color: #ce93d8;
  background: #f3e5f5;
}

.forum-thread-preview {
  color: var(--blog-text-muted);
  font-size: 10px;
  margin: 4px 0 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* author / date cells */
.forum-thread-author {
  font-size: 10px;
  color: var(--blog-link);
  white-space: nowrap;
}

.forum-thread-date {
  font-size: 10px;
  color: var(--blog-text-muted);
  white-space: nowrap;
}


/* ============================== THREAD TOOLS BAR ========================== */

.forum-thread-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
  border: 1px solid var(--blog-border);
  border-top: none;
  padding: 5px 12px;
  font-size: 10px;
  color: var(--blog-text-muted);
}

.forum-thread-tools a {
  font-weight: bold;
}


/* ============================== PAGINATION ================================ */

.forum-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-size: 10px;
  color: var(--blog-text-muted);
  background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
  border: 1px solid var(--blog-border);
  border-top: none;
}

.forum-pagination-display {
  font-size: 9px;
}

.forum-pagination-display select {
  font-family: var(--blog-font-ui);
  font-size: 9px;
  border: 1px solid var(--blog-border);
  background: var(--blog-surface);
  padding: 1px 2px;
}


/* ============================== THREAD VIEW =============================== */
/* the full post view. user card on the left, content on the right.           */

.forum-thread {
  display: none;
}

.forum-thread.active {
  display: block;
}

.forum-thread-header {
  background: var(--blog-aero-bar);
  color: var(--blog-catbar-text);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: bold;
  border: 1px solid var(--blog-border);
  border-top: none;
  text-shadow: 0 1px 0 rgba(74, 94, 120, 0.55);
}


/* ============================== FORUM POST ================================ */
/* the classic two-column forum post: user card left, content right.          */

.forum-post {
  display: flex;
  border: 1px solid var(--blog-border);
  border-top: none;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
}

.forum-post + .forum-post {
  margin-top: 0;
}


/* ---- user card (left sidebar) ---- */

.forum-post-usercard {
  width: 170px;
  min-width: 170px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #f4f7fb 0%, var(--blog-usercard-bg) 100%);
  border-right: 1px solid var(--blog-usercard-border);
  text-align: center;
  font-size: 10px;
}

.forum-post-username {
  display: block;
  font-weight: bold;
  font-size: 11px;
  margin: 0 0 2px;
  text-decoration: none;
}

.forum-post-username:hover {
  text-decoration: underline;
}

.forum-post-username.rank-admin {
  color: var(--blog-rank-admin);
}

.forum-post-username.rank-mod {
  color: var(--blog-rank-mod);
}

.forum-post-username.rank-member {
  color: var(--blog-rank-member);
}

.forum-post-usertitle {
  font-style: italic;
  font-size: 9px;
  color: var(--blog-text-muted);
  margin: 0 0 6px;
}

.forum-post-usercard a:has(.forum-post-avatar) {
  display: contents;
}

.forum-post-avatar {
  width: 120px;
  height: 120px;
  border: 1px solid var(--blog-border);
  display: block;
  margin: 0 auto 8px;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.75);
}

.forum-bot-avatar {
  background: linear-gradient(135deg, #2a4060, #5889b5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--blog-font-mono);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
}

.forum-post-usermeta {
  text-align: left;
  margin: 0 0 0 13px;
  padding: 0;
  font-size: 9px;
  color: var(--blog-text-muted);
}

.forum-post-usermeta dt {
  display: inline;
  font-weight: bold;
  color: var(--blog-text);
}

.forum-post-usermeta dd {
  display: inline;
  margin: 0 0 0 2px;
}

.forum-post-usermeta dd::after {
  content: '';
  display: block;
  margin-bottom: 2px;
}

.forum-post-rankstars {
  color: #8eb94f;
  font-size: 11px;
  margin-top: 6px;
  letter-spacing: 2px;
}


/* ---- post body (right side) ---- */

.forum-post-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.forum-post-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 12px;
  border-bottom: 1px solid var(--blog-border-light);
  background: linear-gradient(180deg, #f9fbfd 0%, #eaf1f8 100%);
  font-size: 10px;
  color: var(--blog-text-muted);
}

.forum-post-date {
  font-size: 10px;
}

.forum-post-subject {
  font-weight: bold;
  font-size: 12px;
  color: var(--blog-text);
}

.forum-post-number {
  font-weight: bold;
  color: var(--blog-link);
  text-decoration: none;
}

.forum-post-number:hover {
  text-decoration: underline;
}

.forum-post-content {
  padding: 12px 14px;
  font-family: var(--blog-font-post);
  font-size: 12px;
  line-height: 1.75;
  color: var(--blog-text);
  flex: 1;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(246,249,252,0.95) 100%);
}

.forum-post-content p {
  font-family: var(--blog-font-post);
  font-size: 12px;
  line-height: 1.75;
  margin: 0 0 12px;
}

.forum-post-content p:last-child {
  margin-bottom: 0;
}

.forum-post-content h3 {
  font-family: var(--blog-font-ui);
  font-size: 12px;
  font-weight: bold;
  margin: 10px 0 6px;
  color: #40597d;
}

.forum-post-content ul,
.forum-post-content ol {
  font-family: var(--blog-font-post);
  font-size: 12px;
  line-height: 1.75;
  margin: 0 0 12px;
  padding-left: 22px;
}

.forum-post-content a {
  text-decoration: underline;
  text-decoration-color: rgba(47, 70, 106, 0.28);
  text-underline-offset: 2px;
}

.forum-post-content a:hover {
  text-decoration-color: currentColor;
}

/* "last edited" notice */
.forum-post-edited {
  font-size: 9px;
  font-style: italic;
  color: var(--blog-text-dim);
  margin-top: 12px;
  padding-top: 4px;
  border-top: 1px dotted var(--blog-border-light);
}


/* ---- signature ---- */

.forum-post-sig {
  padding: 0 14px 12px;
  margin-top: auto;
}

.forum-sig-divider {
  border: none;
  border-top: 1px solid var(--blog-border-light);
  margin: 16px 0;
  max-width: 200px;
}

.forum-sig-text {
  padding: 8px 0;
  font-size: 9px;
  font-style: italic;
  color: var(--blog-text-muted);
  margin: 0;
  line-height: 1.4;
}

.forum-sig-text a {
  font-size: 9px;
}


/* ---- post tools (Report | Quote | Edit | Top) ---- */

.forum-post-tools {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid var(--blog-border-light);
  background: linear-gradient(180deg, #f9fbfd 0%, #eaf1f8 100%);
  font-size: 10px;
}

.forum-post-tools a {
  color: var(--blog-text-muted);
  text-decoration: none;
  font-weight: bold;
}

.forum-post-tools a:hover {
  color: var(--blog-link);
  text-decoration: underline;
}


/* ============================== BBCODE ELEMENTS =========================== */
/* quote blocks, code blocks, spoilers -- the lingua franca of forums.        */

.forum-quote {
  background: var(--blog-quote-bg);
  border: 1px solid var(--blog-quote-border);
  margin: 10px 0;
  padding: 0;
}

.forum-quote-header {
  font-family: var(--blog-font-ui);
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  background: var(--blog-surface-alt);
  border-bottom: 1px solid var(--blog-quote-border);
  color: var(--blog-text);
}

.forum-quote-body {
  padding: 8px 10px;
  font-family: var(--blog-font-post);
  font-size: 12px;
  font-style: italic;
  color: var(--blog-text-muted);
  line-height: 1.5;
}

.forum-code {
  background: var(--blog-code-bg);
  border: 1px solid var(--blog-code-border);
  margin: 10px 0;
  padding: 0;
  overflow-x: auto;
}

.forum-code-header {
  font-family: var(--blog-font-ui);
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  background: var(--blog-surface-alt);
  border-bottom: 1px solid var(--blog-code-border);
  color: var(--blog-text);
}

.forum-code-body {
  padding: 8px 10px;
  font-family: var(--blog-font-mono);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--blog-text);
  line-height: 1.5;
}

.forum-spoiler {
  background: var(--blog-text);
  color: var(--blog-text);
  padding: 1px 4px;
  cursor: pointer;
  user-select: none;
}

.forum-spoiler.revealed,
.forum-spoiler:hover {
  background: var(--blog-surface-alt);
  color: var(--blog-text);
}

/* inline code */
.forum-post-content code {
  font-family: var(--blog-font-mono);
  font-size: 12px;
  background: var(--blog-code-bg);
  border: 1px solid var(--blog-code-border);
  padding: 1px 4px;
}


/* ============================== FORUM STATISTICS ========================== */

.forum-stats {
  background: linear-gradient(180deg, #ffffff 0%, #f2f6fa 100%);
  border: 1px solid var(--blog-border);
  border-top: none;
  padding: 10px 14px;
  font-size: 10px;
  color: var(--blog-text-muted);
  line-height: 1.6;
  text-align: center;
}

.forum-stats strong {
  color: var(--blog-text);
}


/* ============================== FORUM FOOTER ============================== */

.forum-footer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--blog-border);
  border-top: none;
  background:
    var(--blog-footer-hearts) right 12px bottom 10px / 110px auto no-repeat,
    linear-gradient(180deg, #ffffff 0%, #f2f6fa 100%);
  padding: 10px 8px 22px;
  text-align: center;
  font-size: 9px;
  color: var(--blog-text-muted);
  margin-bottom: 8px;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--blog-shell-shadow);
}

.forum-footer-powered {
  margin: 0 0 8px;
}

.forum-footer-powered a {
  color: var(--blog-text-muted);
}

.forum-footer-copyright {
  margin: 8px 0 0;
  font-size: 9px;
  color: var(--blog-text-dim);
}

.forum-footer-links {
  margin: 4px 0 0;
  font-size: 9px;
}

.forum-footer-links a {
  color: var(--blog-text-muted);
  margin: 0 4px;
}


/* ============================== SCROLLBAR OVERRIDE ======================== */
/* a simpler scrollbar that fits the forum aesthetic better.                  */

.page-blog ::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.page-blog ::-webkit-scrollbar-track {
  background-image: none;
  background-color: var(--blog-bg);
  border-left: 1px solid var(--blog-border);
}

.page-blog ::-webkit-scrollbar-track:active {
  background-color: var(--blog-border-light);
}

.page-blog ::-webkit-scrollbar-thumb {
  background: var(--blog-border);
  border: 1px solid;
  border-color: #fff var(--blog-border-dark) var(--blog-border-dark) #fff;
  box-shadow: none;
}

.page-blog ::-webkit-scrollbar-thumb:hover {
  background: var(--blog-border-light);
}

.page-blog ::-webkit-scrollbar-thumb:active {
  background: var(--blog-catbar-bg);
  border-color: var(--blog-border-dark) #fff #fff var(--blog-border-dark);
}

.page-blog ::-webkit-scrollbar-button {
  display: none;
  height: 0;
  width: 0;
}


/* ============================== LAST VISIT BAR ============================ */

.forum-lastvisit {
  background: linear-gradient(180deg, #f8fbfd 0%, #edf3f9 100%);
  border: 1px solid var(--blog-border);
  border-top: none;
  padding: 5px 12px;
  font-size: 9px;
  color: var(--blog-text-muted);
  font-style: italic;
}

.forum-lastvisit strong {
  color: var(--blog-text);
  font-style: normal;
}

/* new-since-last-visit highlight */
.forum-thread-row--new-since {
  border-left: 3px solid var(--blog-accent);
}


/* ============================== THREAD RETURN BAR ========================= */

.forum-thread-return {
  display: none;
  border: 1px solid var(--blog-border);
  border-top: none;
  background: linear-gradient(180deg, #f8fbfd 0%, #edf3f9 100%);
  padding: 5px 12px;
  font-size: 10px;
}

.forum-thread.active .forum-thread-return {
  display: block;
}

.forum-thread-return-link {
  color: var(--blog-link);
  text-decoration: none;
}

.forum-thread-return-link:hover {
  text-decoration: underline;
}


/* ============================== WHO IS ONLINE ============================= */

.forum-who-online {
  border: 1px solid var(--blog-border);
  border-top: none;
  margin-bottom: 0;
}

.forum-who-online-header {
  background: var(--blog-aero-bar);
  color: var(--blog-catbar-text);
  padding: 5px 10px;
  font-size: 10px;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(74, 94, 120, 0.55);
}

.forum-who-online-body {
  background: var(--blog-surface);
  padding: 6px 10px;
  font-size: 10px;
  color: var(--blog-text-muted);
  line-height: 1.6;
}

.forum-who-online-legend {
  font-size: 9px;
}

.legend-admin {
  color: var(--blog-rank-admin);
  font-weight: bold;
}

.legend-mod {
  color: var(--blog-rank-mod);
  font-weight: bold;
}

.legend-bot {
  color: var(--blog-catbar-bg);
  font-weight: bold;
}


/* ============================== THREAD BROWSING ============================ */

.forum-thread-browsing {
  background: linear-gradient(180deg, #ffffff 0%, #f2f6fa 100%);
  border: 1px solid var(--blog-border);
  border-top: none;
  padding: 5px 12px;
  font-size: 9px;
  color: var(--blog-text-muted);
  font-style: italic;
}


/* ============================== ONLINE INDICATOR =========================== */

.forum-post-username.rank-admin::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #00aa00;
  border: 1px solid #006600;
  margin-right: 4px;
  vertical-align: middle;
}


/* ============================== MOOD FIELD ================================= */

.forum-mood {
  font-style: italic;
  color: var(--blog-text-muted);
}


/* ============================== FORUM POLL ================================= */

.forum-poll {
  border: 1px solid var(--blog-border);
  border-top: none;
  margin: 0;
}

.forum-poll-header {
  background: linear-gradient(180deg, #f9fbfd 0%, #eaf1f8 100%);
  border-bottom: 1px solid var(--blog-border);
  padding: 5px 10px;
  font-size: 10px;
  font-weight: bold;
  color: var(--blog-text);
}

.forum-poll-body {
  background: var(--blog-surface);
  padding: 6px 10px;
}

.forum-poll-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.forum-poll-option {
  font-size: 11px;
  color: var(--blog-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.forum-poll-option input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

/* poll results (shown after voting) */
.forum-poll-result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 10px;
}

.forum-poll-result-label {
  min-width: 160px;
  color: var(--blog-text);
}

.forum-poll-result-bar-bg {
  flex: 1;
  height: 12px;
  background: var(--blog-surface-alt);
  border: 1px solid var(--blog-border);
  position: relative;
}

.forum-poll-result-bar {
  height: 100%;
  background: var(--blog-catbar-bg);
  transition: width 0.3s ease;
}

.forum-poll-result-pct {
  min-width: 36px;
  text-align: right;
  font-size: 9px;
  color: var(--blog-text-muted);
}

.forum-poll-result-votes {
  font-size: 9px;
  color: var(--blog-text-dim);
  min-width: 40px;
}

.forum-poll-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.forum-poll-vote {
  font-family: var(--blog-font-ui);
  font-size: 10px;
  background: var(--blog-surface-alt);
  border: 1px solid var(--blog-border);
  padding: 2px 12px;
  cursor: pointer;
  color: var(--blog-text);
}

.forum-poll-vote:hover {
  background: var(--blog-bg);
}

.forum-poll-total {
  font-size: 9px;
  color: var(--blog-text-muted);
  margin: 0;
}


/* ============================== HIT COUNTER ================================ */

.forum-hitcounter {
  font-family: var(--blog-font-mono);
  font-size: 9px;
  color: var(--blog-text-muted);
  margin: 6px 0;
  letter-spacing: 1px;
}

#forum-visitor-count {
  color: var(--blog-text);
  font-weight: bold;
}


/* ============================== NO RESULTS MESSAGE ========================= */

.forum-no-results {
  text-align: center;
  padding: 12px 10px;
  font-size: 10px;
  color: var(--blog-text-muted);
  font-style: italic;
  background: var(--blog-surface);
  border: 1px solid var(--blog-border);
  border-top: none;
  display: none;
}


/* ============================== INTERACTIVE CONTENT ======================== */
/* BBCode mod-style components for "developer magazine" blog posts.           */
/* runnable code, collapsibles, callouts, quizzes, figures, widgets, notes.   */
/* all scoped to .forum-post-content or prefixed forum-* to avoid collisions. */

/* ---- runnable / editable code blocks ---- */

.forum-code-interactive {
  border: 1px solid var(--blog-code-border);
  margin: 10px 0;
}

.forum-code-interactive .forum-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.forum-code-interactive .forum-code-run,
.forum-code-interactive .forum-code-reset {
  font-family: var(--blog-font-ui);
  font-size: 9px;
  background: var(--blog-surface-alt);
  border: 1px solid var(--blog-border);
  padding: 1px 8px;
  cursor: pointer;
  color: var(--blog-text);
}

.forum-code-interactive .forum-code-run:hover,
.forum-code-interactive .forum-code-reset:hover {
  background: var(--blog-bg);
}

.forum-code-interactive textarea {
  width: 100%;
  min-height: 80px;
  font-family: var(--blog-font-mono);
  font-size: 11px;
  line-height: 1.5;
  border: none;
  border-top: 1px solid var(--blog-code-border);
  background: var(--blog-code-bg);
  padding: 8px 10px;
  resize: vertical;
  color: var(--blog-text);
  box-sizing: border-box;
}

.forum-code-interactive .forum-code-output {
  border-top: 1px solid var(--blog-code-border);
  background: #ffffff;
  min-height: 40px;
  padding: 4px;
}

.forum-code-interactive .forum-code-output iframe {
  width: 100%;
  border: none;
  min-height: 40px;
}

/* ---- collapsible / expandable sections (phpBB [spoiler] mod) ---- */

.forum-expand {
  border: 1px solid var(--blog-border);
  margin: 10px 0;
}

.forum-expand-header {
  font-family: var(--blog-font-ui);
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  background: var(--blog-surface-alt);
  border-bottom: 1px solid var(--blog-border);
  cursor: pointer;
  color: var(--blog-text);
  user-select: none;
}

.forum-expand-header::before {
  content: "[+] ";
  font-family: var(--blog-font-mono);
  color: var(--blog-text-muted);
}

.forum-expand.open .forum-expand-header::before {
  content: "[-] ";
}

.forum-expand-body {
  display: none;
  padding: 8px 10px;
  font-family: var(--blog-font-post);
  font-size: 13px;
  line-height: 1.6;
}

.forum-expand.open .forum-expand-body {
  display: block;
}

/* ---- callout boxes ([notice], [tip], [warning] mods) ---- */

.forum-callout {
  border: 1px solid var(--blog-border);
  border-left: 3px solid var(--blog-catbar-bg);
  margin: 10px 0;
  padding: 6px 10px;
  font-size: 11px;
  background: var(--blog-surface);
}

.forum-callout-label {
  font-family: var(--blog-font-ui);
  font-size: 10px;
  font-weight: bold;
  color: var(--blog-catbar-bg);
  margin-bottom: 2px;
}

.forum-callout--tip {
  border-left-color: #2e7d32;
}
.forum-callout--tip .forum-callout-label {
  color: #2e7d32;
}

.forum-callout--warning {
  border-left-color: var(--blog-accent);
  background: #fffdf0;
}
.forum-callout--warning .forum-callout-label {
  color: var(--blog-accent);
}

.forum-callout--note {
  border-left-color: var(--blog-catbar-bg);
}

/* ---- figures (phpBB attachment style) ---- */

.forum-figure {
  margin: 10px 0;
  text-align: center;
}

.forum-figure img {
  max-width: 100%;
  border: 1px solid var(--blog-border);
  display: block;
  margin: 0 auto;
}

.forum-figure-caption {
  font-family: var(--blog-font-ui);
  font-size: 9px;
  color: var(--blog-text-muted);
  font-style: italic;
  margin-top: 2px;
}

/* ---- quiz blocks ([quiz] mod) ---- */

.forum-quiz {
  border: 1px solid var(--blog-border);
  margin: 10px 0;
}

.forum-quiz-header {
  font-family: var(--blog-font-ui);
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  background: var(--blog-catbar-bg);
  color: var(--blog-catbar-text);
  border-bottom: 1px solid var(--blog-border);
}

.forum-quiz-body {
  padding: 6px 10px;
}

.forum-quiz-question {
  font-family: var(--blog-font-ui);
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 4px;
}

.forum-quiz-option {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  cursor: pointer;
}

.forum-quiz-option input {
  margin: 0;
  cursor: pointer;
}

.forum-quiz-submit {
  font-family: var(--blog-font-ui);
  font-size: 9px;
  background: var(--blog-surface-alt);
  border: 1px solid var(--blog-border);
  padding: 2px 12px;
  cursor: pointer;
  color: var(--blog-text);
  margin-top: 6px;
}

.forum-quiz-submit:hover {
  background: var(--blog-bg);
}

.forum-quiz-result {
  display: none;
  font-size: 10px;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid var(--blog-border);
}

.forum-quiz-result.correct {
  background: #e8f5e9;
  border-color: #a5d6a7;
  color: #2e7d32;
}

.forum-quiz-result.incorrect {
  background: #fbe9e7;
  border-color: #ffab91;
  color: #bf360c;
}

.forum-quiz.answered .forum-quiz-result {
  display: block;
}

.forum-quiz.answered .forum-quiz-submit {
  display: none;
}

/* ---- embedded widget containers ---- */

.forum-widget {
  border: 1px solid var(--blog-border);
  margin: 10px 0;
  overflow: hidden;
}

.forum-widget-header {
  font-family: var(--blog-font-ui);
  font-size: 10px;
  font-weight: bold;
  padding: 4px 8px;
  background: var(--blog-surface-alt);
  border-bottom: 1px solid var(--blog-border);
  color: var(--blog-text);
}

.forum-widget-body {
  padding: 0;
  background: #ffffff;
}

/* ---- annotations / footnotes ---- */

.forum-annotation-ref {
  font-size: 9px;
  color: var(--blog-link);
  cursor: pointer;
  vertical-align: super;
  font-weight: bold;
}

.forum-annotation-ref:hover {
  text-decoration: underline;
}

.forum-annotations {
  border-top: 1px solid var(--blog-border-light);
  margin-top: 10px;
  padding-top: 6px;
  font-size: 10px;
}

.forum-annotations dt {
  font-weight: bold;
  color: var(--blog-link);
  display: inline;
}

.forum-annotations dd {
  display: inline;
  margin: 0 0 0 4px;
  color: var(--blog-text-muted);
}

.forum-annotations dd::after {
  content: '';
  display: block;
  margin-bottom: 2px;
}


/* ============================== FORUM SIDEBAR ============================== */
/* phpBB portal mod sidebar. right-column, flush against the forum content.
   category bar headers, 1px solid borders, white surfaces, Verdana 10px.
   zero border-radius, zero transitions, zero apologies.                      */

.forum-sidebar {
  width: 200px;
  flex-shrink: 0;
  font-family: var(--blog-font-ui);
  font-size: 10px;
  color: var(--blog-text);
  align-self: flex-start;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--blog-shell-shadow);
}

/* ---- sidebar block ---- */

.forum-sidebar-block {
  border: 1px solid var(--blog-border);
  border-top: none;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  box-shadow: var(--blog-shell-shadow);
  overflow: hidden;
}

.forum-sidebar-block:first-child {
  border-top: 1px solid var(--blog-border);
  border-radius: 12px 12px 0 0;
}

.forum-sidebar-block:last-child {
  border-radius: 0 0 12px 12px;
}

.forum-sidebar-block-header {
  background: var(--blog-aero-bar);
  color: var(--blog-catbar-text);
  font-size: 10px;
  font-weight: bold;
  padding: 5px 8px;
  border-bottom: 1px solid var(--blog-border-dark);
  text-shadow: 0 1px 0 rgba(74, 94, 120, 0.55);
}

.forum-sidebar-block-body {
  padding: 6px 8px;
  line-height: 1.5;
}

.forum-sidebar-block-body--tight {
  padding: 0;
}

/* ---- sidebar search ---- */

.forum-sidebar-search {
  display: flex;
  gap: 0;
}

.forum-sidebar-search-input {
  flex: 1;
  font-family: var(--blog-font-ui);
  font-size: 10px;
  border: 1px solid var(--blog-border);
  padding: 3px 4px;
  background: var(--blog-surface);
  color: var(--blog-text);
  min-width: 0;
}

.forum-sidebar-search-input:focus {
  outline: 1px dotted var(--blog-text);
  outline-offset: -1px;
}

.forum-sidebar-search-btn {
  font-family: var(--blog-font-ui);
  font-size: 10px;
  background: var(--blog-surface-alt);
  border: 1px solid var(--blog-border);
  border-left: none;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--blog-text);
  font-weight: bold;
}

.forum-sidebar-search-btn:hover {
  background: var(--blog-bg);
}

.forum-sidebar-search-btn:active {
  background: var(--blog-border-light);
}

/* ---- sidebar topics list ---- */

.forum-sidebar-topics {
  list-style: none;
  margin: 0;
  padding: 0;
}

.forum-sidebar-topics li {
  padding: 4px 8px;
  border-bottom: 1px solid var(--blog-border-light);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.forum-sidebar-topics li:last-child {
  border-bottom: none;
}

.forum-sidebar-topics li:hover {
  background: #e8f0f8;
}

.forum-sidebar-topic-link {
  font-size: 10px;
  font-weight: bold;
  color: var(--blog-link);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forum-sidebar-topic-link:hover {
  color: var(--blog-link-hover);
  text-decoration: underline;
}

.forum-sidebar-topic-link:visited {
  color: var(--blog-link-visited);
}

.forum-sidebar-topic-date {
  font-size: 9px;
  color: var(--blog-text-muted);
}

/* ---- sidebar info ---- */

.forum-sidebar-info {
  margin: 0;
  padding: 0;
}

.forum-sidebar-info dt {
  display: inline;
  font-weight: bold;
  color: var(--blog-text);
  font-size: 10px;
}

.forum-sidebar-info dd {
  display: inline;
  margin: 0 0 0 2px;
  color: var(--blog-text-muted);
  font-size: 10px;
}

.forum-sidebar-info dd::after {
  content: '';
  display: block;
  margin-bottom: 2px;
}

.forum-sidebar-admin {
  color: var(--blog-rank-admin);
  font-weight: bold;
}

/* ---- sidebar links ---- */

.forum-sidebar-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.forum-sidebar-links li {
  border-bottom: 1px solid var(--blog-border-light);
}

.forum-sidebar-links li:last-child {
  border-bottom: none;
}

.forum-sidebar-links a {
  display: block;
  padding: 4px 8px;
  font-size: 10px;
  color: var(--blog-link);
  text-decoration: none;
  font-weight: bold;
}

.forum-sidebar-links a:hover {
  color: var(--blog-link-hover);
  text-decoration: underline;
  background: var(--blog-surface-alt);
}

.forum-sidebar-links a:visited {
  color: var(--blog-link-visited);
}

/* ---- sidebar online ---- */

.forum-sidebar-online {
  margin: 0;
  font-size: 10px;
  color: var(--blog-text-muted);
  line-height: 1.5;
}

.forum-sidebar-online strong {
  color: var(--blog-text);
}

.forum-sidebar-online-legend {
  margin: 4px 0 0;
  font-size: 9px;
  color: var(--blog-text-muted);
}


/* ============================== MEDIA QUERIES ============================= */
/* responsive breakpoints. forums from 2004 didn't have these but we do.     */

/* sidebar hides at 1100px. forum-layout collapses to single-column. */
@media (max-width: 1100px) {
  .forum-sidebar {
    display: none;
  }

  .forum-layout {
    max-width: 960px;
    display: block;
    padding: 8px 0;
  }

  .forum-wrapper {
    max-width: none;
  }
}

@media (max-width: 992px) {
  .forum-layout {
    margin: 0 8px;
  }
}

@media (max-width: 768px) {
  /* hide date column on narrow screens */
  .forum-threadlist .col-date,
  .forum-threadlist td.forum-thread-date {
    display: none;
  }

  /* stack user card above post content */
  .forum-post {
    flex-direction: column;
  }

  .forum-post-usercard {
    width: 100%;
    min-width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid var(--blog-usercard-border);
  }

  .forum-post-avatar {
    width: 48px;
    height: 48px;
    margin: 0;
  }

  .forum-post-usermeta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .forum-post-usermeta dd::after {
    content: none;
    display: inline;
  }

  .forum-post-rankstars {
    margin-top: 0;
  }

  .forum-header-banner .forum-title {
    font-size: 23px;
  }

  .forum-thread-preview {
    font-size: 9px;
  }
}

@media (max-width: 576px) {
  /* hide author and date columns */
  .forum-threadlist .col-author,
  .forum-threadlist td.forum-thread-author,
  .forum-threadlist .col-date,
  .forum-threadlist td.forum-thread-date {
    display: none;
  }

  .forum-header-banner {
    padding: 10px 12px 8px;
  }

  .forum-header-banner .forum-title {
    font-size: 20px;
  }

  .forum-header-banner .forum-tagline {
    font-size: 9px;
  }

  .forum-post-content {
    padding: 10px;
    font-size: 12px;
  }

  .forum-post-content p {
    font-size: 12px;
  }

  .forum-thread-preview {
    font-size: 9px;
  }

  .forum-layout {
    margin: 0 4px;
  }

  .forum-poll-result-label {
    min-width: 100px;
    font-size: 9px;
  }

  .forum-poll-actions {
    flex-wrap: wrap;
  }

  .forum-who-online-legend {
    display: none;
  }
}


/* ============================== NEWS TICKER (marquee) ====================== */
/* THE mid-2000s move. <marquee> is deprecated, but it's the real thing.
   forums and personal sites loved these. scrolling news, announcements,
   whatever you wanted. the authentic tag. no JS substitute.                  */

.forum-ticker {
  background: var(--blog-surface);
  border: 1px solid var(--blog-border);
  border-top: none;
  padding: 3px 0;
  font-size: 10px;
  color: var(--blog-text-muted);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.forum-ticker-label {
  font-weight: bold;
  color: var(--blog-accent);
  padding: 0 6px;
  white-space: nowrap;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.forum-ticker-marquee {
  flex: 1;
  font-size: 10px;
  color: var(--blog-text);
}


/* ============================== 88x31 BADGES ============================== */
/* THE badge row. every personal site in 2003 had a row of these.
   "Powered by PHP", "Made with Notepad", "Best viewed in IE6".
   88x31 pixels. the standard. pure CSS recreations here.
   no actual images -- just styled spans matching the vibe.                   */

.forum-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 2px;
}

.forum-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 31px;
  font-family: var(--blog-font-ui);
  font-size: 7px;
  font-weight: bold;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid;
  text-decoration: none;
  cursor: default;
  user-select: none;
  padding: 1px 2px;
  box-sizing: border-box;
}

.badge-powered {
  background: linear-gradient(to bottom, #3a5d8c 0%, #2a4060 100%);
  color: #ffffff;
  border-color: #1a3050;
}

.badge-notepad {
  background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
  color: #333333;
  border-color: #999999;
}

.badge-resolution {
  background: linear-gradient(to bottom, #555555 0%, #333333 100%);
  color: #00ff00;
  border-color: #222222;
  font-family: var(--blog-font-mono);
}

.badge-html {
  background: linear-gradient(to bottom, #003399 0%, #002266 100%);
  color: #ffcc00;
  border-color: #001144;
}

.badge-css {
  background: linear-gradient(to bottom, #006600 0%, #004400 100%);
  color: #ffffff;
  border-color: #003300;
}

.badge-nohotlink {
  background: linear-gradient(to bottom, #cc0000 0%, #990000 100%);
  color: #ffffff;
  border-color: #660000;
  font-size: 8px;
}

.badge-firefox {
  background: linear-gradient(to bottom, #ff6600 0%, #cc5200 100%);
  color: #ffffff;
  border-color: #993d00;
}


/* ============================== SHOUTBOX ================================== */
/* the shoutbox / mini-chat. WILDLY popular phpBB mod circa 2004-2008.
   every decent forum had one. real-time(ish) chat in the sidebar.
   a tiny scrolling message area with timestamps and a disabled input.        */

.forum-shoutbox {
  display: flex;
  flex-direction: column;
}

.forum-shoutbox-messages {
  max-height: 160px;
  overflow-y: auto;
  padding: 4px 6px;
  font-size: 9px;
  line-height: 1.5;
  border-bottom: 1px solid var(--blog-border-light);
  background: var(--blog-surface);
}

.forum-shoutbox-msg {
  margin-bottom: 3px;
  word-wrap: break-word;
}

.forum-shoutbox-msg:last-child {
  margin-bottom: 0;
}

.shoutbox-time {
  color: var(--blog-text-dim);
  font-family: var(--blog-font-mono);
  font-size: 8px;
}

.forum-shoutbox-form {
  display: flex;
  gap: 0;
  padding: 3px 4px;
  background: var(--blog-surface-alt);
}

.forum-shoutbox-input {
  flex: 1;
  font-family: var(--blog-font-ui);
  font-size: 9px;
  border: 1px solid var(--blog-border);
  padding: 2px 4px;
  background: var(--blog-bg);
  color: var(--blog-text-muted);
  min-width: 0;
}

.forum-shoutbox-input:focus {
  outline: 1px dotted var(--blog-text);
  outline-offset: -1px;
}

.forum-shoutbox-send {
  font-family: var(--blog-font-ui);
  font-size: 9px;
  background: var(--blog-surface-alt);
  border: 1px solid var(--blog-border);
  border-left: none;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--blog-text-muted);
  font-weight: bold;
}

.forum-shoutbox-send:hover {
  background: var(--blog-bg);
}


/* ============================== WHO IS ONLINE EXTRAS ======================= */

.forum-who-online-extra {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px dotted var(--blog-border-light);
  font-size: 9px;
  line-height: 1.6;
}

.forum-who-online-extra p {
  margin: 2px 0;
  font-size: 9px;
}

.forum-who-online-birthdays {
  font-style: italic;
}

.forum-who-online-newest a {
  font-weight: bold;
}


/* ============================== SERVER TIME ================================ */

#forum-server-time,
#forum-sidebar-server-time {
  font-family: var(--blog-font-mono);
  font-size: 10px;
  color: var(--blog-text);
  letter-spacing: 0.5px;
}

.forum-sidebar-server-time {
  margin: 6px 0 0;
  padding-top: 4px;
  border-top: 1px dotted var(--blog-border-light);
  font-size: 9px;
  color: var(--blog-text-muted);
  line-height: 1.5;
}

#forum-sidebar-server-time {
  font-size: 9px;
}