/* Normal Forums — shared site chrome.
   Utility bar, board list, gifbox, board banner, the login/register/
   confirm popup family, and the settings-panel component family, all
   pulled out of the per-page <style> blocks so a sitewide change is one
   edit here instead of one edit per page. Every "utility page" (FAQ,
   post history, leaderboard, account settings, ADMIN dashboard, every
   board and thread page) links to this file. The landing page is a
   deliberate exception — its four-box masthead layout and Verdana/
   Georgia typography are a one-off design, not shared chrome, so it
   stays fully self-contained. Page-specific colors/components (extra
   :root tokens, post/thread/reply styling, etc.) stay local to each
   page's own <style> block. */

:root {
  --page-bg: #ededed;
  --ink: #111111;
  --muted: #333333;
  --title-blue: #111111;
  --link-blue: #0000cc;
  --visited: #660099;
  --rule: #cfcfcf;
}

* { box-sizing: border-box; }

/* Reserves the scrollbar gutter on every page regardless of whether
   its own content is tall enough to need one — otherwise a short page
   (no scrollbar) renders ~15px wider than a tall one (has a
   scrollbar), and every centered element shifts sideways between
   pages even though nothing about their own CSS differs. */
html { overflow-y: scroll; }

body {
  margin: 0;
  padding: 0 0 2rem;
  background: var(--page-bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}

a { color: var(--link-blue); text-decoration: none; }
a:visited { color: var(--visited); }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--title-blue); outline-offset: 1px; }

.utility-bar { background: #000000; color: #fff; }
.utility-bar ul {
  margin: 0;
  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  list-style: none;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.utility-bar li + li::before { content: "|"; margin-right: 0.4rem; color: #888; }
.utility-bar a { color: #fff; text-decoration: none; }
.utility-bar a:hover, .utility-bar a:focus-visible { text-decoration: underline; }
/* The one utility-bar item that isn't plain white — same red used for
   the ADMIN name on ADMIN's own posts. Only present on pages shown
   while logged in as ADMIN. */
.utility-bar a.admin-link { color: #990000; }
/* Confess nav link — only applied when /api/session reports an unread
   ADMIN reply (see shared.js), cleared the next time the user actually
   visits /confession. The blink color is a light red (not the darker ADMIN
   red above) so it stays readable on the black bar. */
.utility-bar a.confess-unread { animation: confess-unread-blink 1s step-start infinite; }
@keyframes confess-unread-blink {
  0%, 49% { color: #fff; }
  50%, 100% { color: #ff4d4d; }
}
/* Replies nav link — blinks white and amber while /api/session reports
   unread replies (see nav.js), stops once the Replies page has been opened. */
.utility-bar a.replies-unread { animation: replies-unread-blink 1s step-start infinite; }
@keyframes replies-unread-blink {
  0%, 49% { color: #fff; }
  50%, 100% { color: #ffaa00; }
}

.boardlist {
  text-align: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}
.boardlist span + span::before { content: " / "; color: var(--muted); }
.boardlist a:visited { color: var(--link-blue); }

.gifbox {
  position: relative;
  width: 38.5rem;
  max-width: 100%;
  height: 5.5rem;
  background: #000000;
  background-size: cover;
  background-position: center;
  margin: 0.2rem auto 0;
  overflow: hidden;
  border: 1px solid #000000;
  box-sizing: border-box;
}
.board-banner { text-align: center; padding: 1.25rem 1rem 0.5rem; }
.board-banner h1 { margin: 0; font-size: 28px; color: var(--title-blue); font-weight: bold; }
.board-banner p { margin: 0.35rem 0 0; color: var(--muted); font-style: italic; font-size: 13px; }

hr.divider { border: none; border-top: 1px solid var(--rule); margin: 1rem 0; }

/* ---------- login / register / board-filter / confirm popup family ---------- */
.login-box {
  position: fixed;
  z-index: 300;
  width: 220px;
  background: #ffffff;
  border: 1px solid #000000;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.login-box-header {
  background: #000000;
  color: #ffffff;
  font-weight: bold;
  font-size: 13px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  user-select: none;
}
.login-box-close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.login-box-close:hover { color: #cc0000; }
.login-box-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.login-box-body p { margin: 0; font-size: 13px; }
.login-box-buttons { display: flex; gap: 6px; margin-top: 2px; }
.login-box-buttons button {
  flex: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 5px 6px;
  border: 1px solid #000000;
  cursor: pointer;
}
.login-btn-submit { background: #000000; color: #ffffff; }
.login-btn-submit:hover { background: #333333; }
.login-btn-forgot { background: #ffffff; color: #111111; }
.login-btn-forgot:hover { background: #eeeeee; }
.login-box-checkbox-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #111111; }
.login-box-checkbox-row label { cursor: pointer; }
.login-box-checkbox-row input[type="checkbox"] { cursor: pointer; }
.login-box-field { display: flex; flex-direction: column; gap: 2px; }
.login-box-field label { font-size: 11px; font-weight: bold; color: #111111; }
.login-box-field input {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  border: 1px solid #000000;
  padding: 3px 5px;
}
.field-error { display: none; color: #cc0000; font-size: 12px; margin: 2px 0 0; }

/* ---------- settings-panel component family (account settings, ADMIN
   dashboard, and any future admin-style page) ---------- */
.settings-main {
  width: 38.5rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.settings-section-label {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.settings-panel {
  background: #ffffff;
  border: 1px solid #000000;
  margin-bottom: 1.5rem;
}
.settings-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
}
.settings-row:last-child { border-bottom: none; }
.settings-row .field-label {
  flex: 0 0 150px;
  font-weight: bold;
  font-size: 12.5px;
  padding-top: 4px;
}
.settings-row .field-body { flex: 1 1 auto; min-width: 0; }

.static-value { margin: 4px 0; font-size: 13px; }
.static-value.is-empty { color: #777777; font-style: italic; }

.settings-field-row { display: flex; gap: 6px; }
.settings-field-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  border: 1px solid #000000;
  padding: 3px 5px;
}
.settings-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
  min-height: 1.3em;
}
.settings-note.is-shown { color: #117743; font-weight: bold; }

.current-value-label {
  margin: 10px 0 2px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Standalone version of .login-box-buttons button — these buttons sit
   in a .settings-field-row, not inside a .login-box, so they need
   their own border/padding/font instead of inheriting it from that
   scoped selector. */
.settings-btn {
  flex: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 0 14px;
  border: 1px solid #000000;
  cursor: pointer;
}

/* A small "GIF" tag on the still-frame thumbnail of an animated GIF (lib/thumbnails.js). Clicking the
   picture plays the real GIF, and the tag goes away while it is expanded. */
.thumb { position: relative; }
.thumb .gif-badge {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 1px 4px;
  font: bold 10px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 0.5px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 2px;
  pointer-events: none;
}
.thumb:has(img.is-expanded) .gif-badge { display: none; }