/* site9 board — minimal stylesheet (Phase 1.4).
   8.3 (D-51): the palette is WCAG AA — every fg/muted/accent pair
   measures >= 4.5:1 against --bg and --panel, and the default board
   theme carries white header text at >= 4.5:1. */
:root {
  --board-theme: #6b6b6b; /* 5.3:1 with white header text */
  --bg: #121417;
  --panel: #1c1f24;
  --fg: #c8ccd2;
  --muted: #8b939d; /* 5.9:1 on --bg, 5.3:1 on --panel */
  --accent: #6ea8fe;
  --border: #2a2f36;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 system-ui, sans-serif;
}
/* Visible focus ring (8.3, D-51): keyboard users always see where
   they are; the DOM order is the focus order (no tabindex anywhere). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Site banner: the site-wide notice line above the header (the
   "site.banner" settings row, set on the admin's site-settings page).
   A flat warning bar; the text is plain (escaped) content. */
.site-banner {
  max-width: 900px;
  margin: 0 auto;
  padding: 6px 16px;
  background: #3a3015;
  color: #f2d98c; /* 8.9:1 on #3a3015 (8.3, D-51) */
  border-bottom: 1px solid var(--border);
  font-size: .9em;
  text-align: center;
  overflow-wrap: break-word;
}
header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
footer.site {
  max-width: 900px;
  margin: 2em auto 0;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .85em;
}
/* the footer's links sit inside a text run: they carry their own
   underline so they do not rely on color alone (8.3, D-51) */
footer.site a { text-decoration: underline; }
main { max-width: 900px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4em; overflow-wrap: anywhere; }
h2 { font-size: 1.1em; margin-top: 1.5em; }
table.boards { border-collapse: collapse; width: 100%; }
table.boards th, table.boards td {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.board-header {
  background: var(--board-theme);
  color: #fff;
  padding: 12px 16px;
  border-radius: 6px;
}
.board-header h1 { margin: 0; font-size: 1.3em; }
.board-header a { color: #fff; }
.board-desc { margin: 4px 0 0; opacity: .9; }
.board-banner { margin-top: 8px; font-size: .9em; }
.board-rules { margin-top: 8px; font-size: .9em; }
.board-rules summary { cursor: pointer; }
form.post { margin-top: 12px; display: grid; gap: 8px; }
form.post input[type=text], form.post textarea {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  padding: 6px 8px;
}
form.post button {
  justify-self: start;
  background: var(--accent);
  border: 0;
  border-radius: 4px;
  color: #111;
  cursor: pointer;
  font: inherit;
  padding: 6px 16px;
}
/* labelled field (8.3, D-51): a visible label above the control. The
   label keeps the body font size, so the control's font: inherit is
   unchanged; file inputs read the fg color (the label is muted). */
.field { display: grid; gap: 4px; color: var(--muted); }
.field input[type=file] { color: var(--fg); }
/* In-page camera capture (mobile video): a quiet "record from camera"
   link beside the file input, collapsed until used. Idle = just the
   link (no box, no timer); recording/review expands a preview + a thin
   progress bar — the bar, not a big timer, communicates the 5-min cap. */
.file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.capture-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.capture-link:hover { color: var(--accent); }
.field.capture-active .capture-link { display: none; }
.capture-stage { display: grid; gap: 6px; }
/* The author display above would otherwise defeat the hidden attribute
   (author display beats the UA [hidden] rule), so pin it explicitly. */
.capture-stage[hidden], .capture-preview[hidden] { display: none; }
.capture-preview {
  display: block;
  width: 100%;
  max-width: 360px;
  max-height: 360px;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.capture-controls { display: flex; align-items: center; gap: 10px; }
.capture-stop, .capture-rerecord, .capture-remove {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  padding: 4px 12px;
  cursor: pointer;
}
.capture-stop:hover, .capture-rerecord:hover { border-color: var(--accent); }
.capture-remove { background: transparent; color: var(--muted); }
.capture-progress {
  position: relative;
  flex: 1;
  min-width: 60px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.capture-progress-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
}
.capture-progress-bar.warn { background: #d9822b; }
/* failure message shown in the stage when the camera can't start */
.capture-msg { color: #d9822b; font-size: .9em; }
.capture-time {
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  min-width: 40px;
}
/* post-as-username / post-as-anonymous: the two toggle options (a radio
   group — exactly one active, no JS). The name is derived on the server
   from the toggle (no name field). */
.anon-toggles { display: flex; gap: 12px; }
.field.anon { display: flex; align-items: center; gap: 6px; }
.empty { color: var(--muted); }
.age-18 {
  display: inline-block; font-size: .7em; font-weight: 700;
  letter-spacing: .04em; line-height: 1.5; padding: 0 5px;
  border: 1px solid currentColor; border-radius: 3px;
  vertical-align: middle; white-space: nowrap;
}
/* D-89: the adult-board gate page — the selection window ("adult" /
   "not adult"). A quiet centered panel: the notice line, the two radio
   options (the post form's toggle styling), and the confirm button
   (the post form's button styling). */
.adult-gate {
  max-width: 460px;
  margin: 24px auto;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.adult-gate .gate-note { color: var(--muted); }
.adult-gate fieldset { border: 1px solid var(--border); border-radius: 4px; margin: 12px 0; }
.adult-gate legend { color: var(--muted); padding: 0 4px; }
.adult-gate form { display: grid; gap: 8px; }
.adult-gate button {
  justify-self: start;
  background: var(--accent);
  border: 0;
  border-radius: 4px;
  color: #111;
  cursor: pointer;
  font: inherit;
  padding: 6px 16px;
}

/* board nav: list/catalog toggle + pagination (2.3) */
.board-nav { display: flex; gap: 12px; align-items: baseline; margin-top: 16px; }
.board-nav .nav-on { font-weight: 600; color: var(--fg); }
.board-nav .pg.next { margin-left: auto; }
.board-nav .page-no { color: var(--muted); font-size: .85em; }

/* thread list (FR-1.3/1.4) */
.thread-list { list-style: none; margin: 0; padding: 0; }
.thread-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.thread-list .thread-row { display: flex; gap: 12px; align-items: center; width: 100%; color: inherit; text-decoration: none; }
.thread-list .thread-row .thread-title { color: var(--accent); }
.thread-list .thread-row:hover .thread-title { text-decoration: underline; }
.thread-list .thumb, .catalog-card .thumb {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 60px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  flex: none;
  overflow: hidden;
}
.thread-list .thumb .thumb-img, .catalog-card .thumb .thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* pending/failed placeholder in the thumb box (4.5, 7.4 steps 3/5) */
.media-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  font-size: .7em;
  color: var(--muted);
}
/* FR-3.15 duration badge over the poster, bottom-right */
.video-duration {
  position: absolute;
  right: 2px;
  bottom: 2px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: .7em;
  line-height: 1.3;
  padding: 0 4px;
  border-radius: 3px;
}
.thread-title { font-weight: 600; flex: 1; overflow-wrap: anywhere; }
.thread-counts { color: var(--muted); font-size: .85em; white-space: nowrap; }
.sticky-flag { color: var(--muted); font-size: .85em; white-space: nowrap; }

/* catalog view (FR-1.3) */
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.catalog-card { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.catalog-card .thumb { width: 100%; height: 120px; margin-bottom: 8px; }
.catalog-card .thread-title { display: block; font-weight: 400; margin: 4px 0; }
.catalog-card:hover { border-color: var(--accent); }

/* / hot-threads grid (FR-1.1): the 10x10 of the most recently bumped live
   threads. Each cell is the OP thumb (or a text/note placeholder) over a
   tiny meta strip (post count + board); thumbnails lazy-load. */
.hot-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 8px; }
.hot-cell {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.hot-cell:hover { border-color: var(--accent); }
.hot-thumb, .hot-note { display: block; aspect-ratio: 4 / 3; }
.hot-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hot-note {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  font-size: .7em;
  color: var(--muted);
  overflow: hidden;
}
.hot-meta {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 4px;
  font-size: .7em;
  color: var(--muted);
  background: var(--bg);
  white-space: nowrap;
}
.hot-meta .hot-board { overflow: hidden; text-overflow: ellipsis; }

/* thread page posts (FR-2.3/2.5/2.7) */
.post { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; margin: 8px 0; scroll-margin: 12px; }
.post-head { display: flex; gap: 12px; flex-wrap: wrap; font-size: .85em; color: var(--muted); margin-bottom: 4px; }
.post-name { color: var(--accent); font-weight: 600; }

.post-subject { font-weight: 600; margin-bottom: 4px; }
.post-body { overflow-wrap: anywhere; }
.post-deleted { color: var(--muted); font-style: italic; }
/* thread page: reply bodies clamp to 3 lines; "more" (thread.js) unclamps */
.thread-page .post.reply .post-body {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thread-page .post.reply .post-body.unclamped { display: block; }
a.more { font-size: .85em; }

/* post media (3.3): thumbnail links to the full-size original (FR-3.4) */
.post-media { margin-bottom: 8px; }
.post-media a { display: inline-block; max-width: 100%; }
.post-thumb {
  display: block;
  max-width: 150px;
  max-height: 150px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
/* video on the thread page (4.5): native player, FR-3.16 — no
   third-party player, no extra JS; seeking is Range requests */
.post-video {
  display: block;
  max-width: 100%;
  max-height: 340px;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 4px;
}
/* pending/failed placeholder in the post's media slot (4.5) */
.post-media-note {
  display: inline-block;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-size: .85em;
}
.post.highlight { animation: post-highlight 2s ease-out; }
@keyframes post-highlight { from { background: rgba(110, 168, 254, .25); } }
a.quote { color: var(--accent); font-weight: 600; }

/* rendered body (internal/render allowlist, FR-2.4) */
.spoiler { background: #000; color: #000; border-radius: 2px; padding: 0 2px; }
.spoiler:hover { color: var(--fg); }

.notice { background: #33262b; border: 1px solid #5a3a3a; color: #e0a0a0; padding: 8px 12px; border-radius: 6px; }

/* register explainer pay button (5.3) + the pre-billing check error (5.4) */
a.pay {
  display: inline-block;
  margin-top: 8px;
  background: var(--accent);
  border-radius: 4px;
  color: #111;
  font-weight: 600;
  padding: 6px 16px;
}
a.pay:hover { text-decoration: none; opacity: .9; }

button.pay {
  margin-top: 8px;
  background: var(--accent);
  border: none;
  border-radius: 4px;
  color: #111;
  cursor: pointer;
  font-weight: 600;
  padding: 6px 16px;
}
button.pay:hover { opacity: .9; }

.register-error { color: #e0a0a0; }

/* /register/complete (5.5): the recovery-phrase box + set-password form */
.phrase-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  font: 1.05em/1.7 ui-monospace, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 8px 0;
}
#rc-form { margin-top: 12px; display: grid; gap: 10px; }
#rc-form p { margin: 0; }
#rc-form input[type=text], #rc-form input[type=password] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  padding: 6px 8px;
  width: 100%;
}
#rc-form label { font-size: .9em; color: var(--muted); }
#rc-copy {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  padding: 4px 12px;
}
#rc-copy:hover { border-color: var(--accent); }
#rc-set:disabled { opacity: .5; cursor: not-allowed; }

/* own-post controls (2.5, FR-2.8) */
.post-controls { margin-top: 8px; display: grid; gap: 8px; }
.post-edit { display: grid; gap: 6px; }
.post-edit input[type=text], .post-edit textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  padding: 4px 6px;
}
.post-edit input[hidden] { display: none; }
.post-edit button {
  justify-self: start;
  background: var(--muted);
  border: 0;
  border-radius: 4px;
  color: #111;
  cursor: pointer;
  font: inherit;
  padding: 4px 12px;
}
.post-delete { margin: 0; }
.post-delete-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .85em;
  padding: 2px 10px;
}
.post-delete-btn:hover { border-color: #5a3a3a; color: #e0a0a0; }

/* site header nav (5.6): logged-in user + account/logout, or
   log in/register. The logout form is an inline button. */
header.site .site-user { color: var(--fg); margin-left: 12px; }
header.site .site-user + a { margin-left: 12px; }
form.site-logout { display: inline; margin-left: 12px; }
form.site-logout button {
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0;
}
form.site-logout button:hover { text-decoration: underline; }

/* language selector: a dot between the options (active lang is a
   span, the others are links, so match any adjacent children) */
header.site .site-lang > * + *::before { content: "·"; color: var(--muted); margin: 0 6px; }

/* auth pages (5.6): login / account / reset-password */
form.auth { margin-top: 12px; display: grid; gap: 10px; }
form.auth p { margin: 0; }
form.auth input[type=text], form.auth input[type=password] {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  padding: 6px 8px;
  width: 100%;
}
form.auth select {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  padding: 6px 8px;
  width: 100%;
}
/* bans page (6.2): the per-row update form sits inline in the table cell */
form.ban-edit { display: flex; gap: 4px; align-items: center; }
form.ban-edit input[type=text] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  padding: 2px 6px;
}
.login-error { color: #e0a0a0; }
.login-notice { color: #a0e0b0; }
button.pay.danger { background: #c0605f; color: #fff; }

/* lockbox (6.3): the review queue's item + action row, and the
   post form's held-for-review note */
.lockbox-item { margin-top: 16px; }
.lockbox-ctx { color: var(--muted); font-size: .85em; margin-bottom: 4px; }
.lockbox-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.lockbox-actions .post-delete { display: flex; gap: 4px; align-items: center; }
.lockbox-actions .post-delete input[type=text] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  padding: 2px 6px;
}
.lockbox-note { color: var(--muted); font-size: .85em; }

/* report (6.4): the per-post report form on the thread page (any
   visitor, FR-6.5) */
.post-report { margin-top: 8px; }
.post-report form { margin: 0; display: flex; gap: 6px; align-items: center; }
.post-report input[type=text] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  font-size: .85em;
  padding: 2px 6px;
}

/* mod UI (7.2): the per-post controls on the thread page (the board's
   mods only, FR-6.2) and the dashboard's per-thread action cells */
.mod-controls { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mod-controls form { margin: 0; display: flex; gap: 4px; align-items: center; }
.mod-controls input[type=text], .mod-actions input[type=text] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  font-size: .85em;
  padding: 2px 6px;
}
.mod-controls button { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; color: var(--fg); cursor: pointer; font: inherit; font-size: .85em; padding: 2px 10px; }
.mod-controls button:hover { border-color: var(--accent); }
.mod-del { background: none; color: var(--muted); }
.mod-del:hover { border-color: #5a3a3a; color: #e0a0a0; }

/* ban (D-69): the per-post "ban the poster" form (the board's mods +
   admins; the admin's global checkbox). Outside .mod-controls so it
   also renders on deleted posts (the stub keeps its ip_hash, FR-2.7) */
.post-ban { margin-top: 8px; }
.post-ban form { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.post-ban input[type=text] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  font-size: .85em;
  padding: 2px 6px;
}
.post-ban button {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .85em;
  padding: 2px 10px;
}
.post-ban button:hover { border-color: #5a3a3a; color: #e0a0a0; }
.post-ban .ban-global { color: var(--muted); font-size: .85em; }

/* IP disclosure (7.5, FR-5.6, D-48): the per-post reveal link (a
   board's mod or an admin on a flagged board only) + the reveal
   page's value */
.post-ipview { margin-top: 8px; }
.post-ipview a { color: var(--muted); font-size: .85em; text-decoration: none; border-bottom: 1px dotted var(--border); }
.post-ipview a:hover { color: var(--fg); }
.ip-reveal { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-size: 1.1em; letter-spacing: .08em; }
td.mod-actions { white-space: nowrap; }
td.mod-actions form { display: inline-flex; gap: 4px; align-items: center; margin: 0 4px 0 0; vertical-align: middle; }
td.mod-actions .mod-flag button { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; color: var(--fg); cursor: pointer; font: inherit; font-size: .85em; padding: 2px 10px; }
td.mod-actions .mod-flag button:hover { border-color: var(--accent); }

/* admin panel (7.4): the section nav, the per-board edit cards, and
   the users page's mod-assignment checkbox rows */
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0; }
.admin-board { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
form.board-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; margin-top: 8px; }
form.board-edit label { font-size: .85em; color: var(--muted); display: grid; gap: 2px; align-content: start; }
form.board-edit input[type=text], form.board-edit input[type=number], form.board-edit select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  padding: 4px 6px;
}
form.board-edit .board-edit-submit { grid-column: 1 / -1; margin: 0; }
tr.user-mods td { background: var(--panel); }
form.user-mods-form { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
form.user-mods-form label { font-size: .85em; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
form.user-mods-form button {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-size: .85em;
  padding: 2px 10px;
}
form.user-mods-form button:hover { border-color: var(--accent); }

/* search (8.1): the site-wide form in the header, the per-board form
   in the board nav, the search page's own form, and the result rows
   (a meta line + the subject/snippet link; pagination reuses
   .board-nav) */
form.site-search { float: right; display: inline-flex; gap: 4px; align-items: center; }
form.board-search { display: inline-flex; gap: 4px; align-items: center; }
form.site-search input[type=text], form.board-search input[type=text], form.search-form input[type=text] {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  font-weight: 400;
  padding: 2px 8px;
  min-width: 140px;
}
form.site-search button, form.board-search button, form.search-form button {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  padding: 2px 10px;
}
form.site-search button:hover, form.board-search button:hover, form.search-form button:hover { border-color: var(--accent); }
.search-form { margin-top: 12px; display: inline-flex; gap: 4px; }
.search-results { list-style: none; margin: 12px 0 0; padding: 0; }
.search-results li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.search-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: .85em; color: var(--muted); }
.search-board { font-weight: 600; }
.search-subject { display: block; font-weight: 600; overflow-wrap: anywhere; }
.search-snip { display: block; overflow-wrap: anywhere; }

/* responsive pass (8.3, D-51): phone widths (390 px and up). No page
   may scroll horizontally: the header's search drops to its own
   full-width row, thread-list rows wrap their counts under the title,
   and wide tables scroll inside their own box. */
@media (max-width: 640px) {
  main { padding: 12px; }
  .hot-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  form.site-search { flex-basis: 100%; }
  form.site-search input[type=text] { flex: 1; min-width: 0; }
  .thread-list .thread-row { flex-wrap: wrap; }
  .thread-list .thread-row .thread-counts {
    flex-basis: 100%;
    margin-left: 92px; /* under the title, clear of the thumb */
  }
  .capture-preview { max-width: 100%; max-height: 260px; }
  table.boards { display: block; overflow-x: auto; max-width: 100%; }
  .lockbox-actions, .post-report form { flex-wrap: wrap; }
}

/* /register/complete page sections (S-1 CSP, D-53: the page's inline
   display toggling became a class toggle from /static/register_complete.js) */
.rc-hidden{display:none}

/* /board/purchase/complete page sections (D-73: the /register/complete
   poll's sibling, toggled from /static/board_purchase.js) */
.bp-hidden{display:none}

/* Identity (D-72): the board banner image, the post-header avatar,
   the account page's avatar + the settings page's preview. Every
   render uses the .thumb (the 150-px-tall PNG) sized down by CSS. */
.board-banner-img { margin-top: 8px; }
.board-banner-img img {
  display: block;
  max-width: 100%;
  max-height: 150px;
  width: auto;
  height: auto;
  border-radius: 4px;
}
.post-avatar {
  width: 48px;
  height: 48px;
  border-radius: 3px;
  object-fit: cover;
  vertical-align: -2px;
  margin-right: 2px;
}
.account-avatar {
  display: block;
  width: 288px;
  height: 288px;
  border-radius: 6px;
  object-fit: cover;
}
.board-banner-preview img {
  display: block;
  max-width: 100%;
  max-height: 150px;
  width: auto;
  height: auto;
  border-radius: 4px;
}