/* Self-hosted fonts */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg: #fafaf6;
  --text: #2a2823;
  --muted: #6b665a;
  --accent: #7a3a1f;
  --rule: #e2dccf;
  --select: #f4e4c8;
  --max-width: 960px;
  /* Reader-side text scaling — set via the A−/A/A+ controls in the
     forum-nav. Applied only to reading-content containers so chrome
     (nav, header, footer) stays at its natural size. */
  --reading-scale: 1;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Source Serif 4", Charter, Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

::selection { background: var(--select); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1rem; }

/* Header */
header.site-header {
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0;
  font-family: "Source Sans 3", system-ui, sans-serif;
}
header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header.site-header .site-title {
  font-family: "Source Serif 4", Charter, Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
header.site-header .auth {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}
header.site-header .auth a { color: var(--accent); }

/* Identicon avatars (deterministic SVG, ./templatetags/avatar_tags.py).
   Default is the size emitted into the SVG itself; tweaks per-context. */
.avatar {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.user-menu-avatar { display: inline-flex; margin-right: 0.4rem; vertical-align: middle; }
.user-menu-avatar .avatar { width: 22px; height: 22px; }

.author-avatar {
  display: inline-block;
  margin-bottom: 0.4rem;
}
.author-avatar .avatar { border-radius: 50%; }

.members-user-cell { display: flex; align-items: center; gap: 0.55rem; }
.members-avatar .avatar { width: 26px; height: 26px; border-radius: 50%; }

/* User menu — click-to-open dropdown under the username in the header.
   Replaces the previous "name · log out" pair; gives signed-in users a
   single concise affordance for personal navigation (profile, settings,
   sign out) without cluttering the secondary forum nav. */
.user-menu {
  position: relative;
  display: inline-block;
}
.user-menu-button {
  background: transparent;
  border: 1px solid transparent;
  padding: 0.25rem 0.55rem;
  color: var(--accent);
  font: inherit;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 3px;
}
.user-menu-button:hover,
.user-menu-open .user-menu-button {
  background: white;
  border-color: var(--rule);
  color: var(--text);
}
.user-menu-caret {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.7em;
  color: var(--muted);
}
.user-menu-list {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  min-width: 12rem;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 90;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.92rem;
}
.user-menu-list a {
  display: block;
  padding: 0.4rem 0.85rem;
  color: var(--text);
  text-decoration: none;
}
.user-menu-list a:hover {
  background: var(--select);
  color: var(--text);
}
.user-menu-divider {
  height: 1px;
  margin: 0.25rem 0;
  background: var(--rule);
}
.user-menu-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.02rem 0.4rem;
  background: var(--accent);
  color: white;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 10px;
  vertical-align: 0.05em;
}

/* Header peek dropdowns — envelope (inbox) + bell (notifications) icons
   in the site header chrome with a click-to-open panel showing the last
   five items. Full pages still live at /messages/ and /notifications/;
   the peek is a quick-triage affordance so unread state is visible
   without expanding the user menu. */
.header-peek {
  position: relative;
}

/* Visually hide content while keeping it available to screen readers.
   Standard "sr-only" recipe. Used for things like the form-section
   heading in templates/messaging/conversation.html that needs to exist
   for assistive tech but doesn't need to render in the visual layout. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.header-peek-button {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  padding: 0.25rem 0.4rem;
  color: var(--muted);
  cursor: pointer;
  border-radius: 3px;
  line-height: 0;
  vertical-align: middle;
}
.header-peek-button:hover,
.header-peek-open .header-peek-button {
  background: white;
  border-color: var(--rule);
  color: var(--text);
}
.header-peek-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 1.1rem;
  padding: 0 0.3rem;
  background: var(--accent);
  color: white;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  border-radius: 10px;
}
.header-peek-panel {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  width: 22rem;
  max-width: calc(100vw - 1rem);
  background: white;
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  z-index: 95;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.88rem;
}
.header-peek-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.header-peek-action {
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
}
.header-peek-action:hover { text-decoration: underline; }
.header-peek-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 22rem;
  overflow-y: auto;
}
.header-peek-row a {
  display: block;
  padding: 0.55rem 0.75rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid #f0eee6;
}
.header-peek-row a:hover { background: var(--select); }
.header-peek-row:last-child a { border-bottom: none; }
.header-peek-row-title {
  display: block;
  font-weight: 500;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-peek-row-preview {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-peek-row-unread .header-peek-row-title {
  font-weight: 700;
  color: var(--text);
}
.header-peek-row-unread a {
  background: #fdfaf0;
}
.header-peek-empty {
  padding: 0.75rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
}
.header-peek-footer {
  padding: 0.45rem 0.75rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 0.85rem;
}
.header-peek-footer a {
  color: var(--accent);
  text-decoration: none;
}
.header-peek-footer a:hover { text-decoration: underline; }

/* Drafts list page — clean card layout with consistent action buttons.
   Each draft is its own card with a title, scope badge, meta, preview,
   and a single-row action bar (Continue + Delete). */
.drafts-page { max-width: 50rem; margin: 0 auto; }
.drafts-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.drafts-page-header h1 { margin: 0; }
.drafts-intro {
  color: var(--muted);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.95rem;
  margin: 0.3rem 0 0;
  max-width: 36rem;
}

.drafts-list { list-style: none; padding: 0; margin: 0; }

.draft-card {
  padding: 1rem 1.25rem;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-bottom: 0.6rem;
}
.draft-card-scratchpad { border-left: 3px solid var(--accent); }
.draft-card-post_reply { border-left: 3px solid #6b9c5f; }
.draft-card-thread { border-left: 3px solid #c4a26b; }

.draft-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.15rem;
}
.draft-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}
.draft-untitled { font-weight: 400; color: var(--muted); font-style: italic; }

.draft-scope-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.1rem 0.55rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 2px;
  background: var(--select);
  color: var(--text);
}
.draft-scope-scratchpad { background: #f7e4b8; color: #5d3a0f; }
.draft-scope-post_reply { background: #e1ecd9; color: #3d5a23; }
.draft-scope-thread { background: #f0e4c4; color: #5d4a23; }

.draft-meta {
  margin: 0 0 0.5rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--muted);
}
.draft-preview {
  margin: 0 0 0.9rem;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}
.draft-preview-empty { color: var(--muted); font-style: italic; }

.draft-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
}
.draft-card-actions .btn,
.draft-card-actions button {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
  padding: 0.35rem 0.9rem;
}
.draft-card-actions .muted {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}
.draft-card-actions .inline-form { margin-left: auto; }

.drafts-empty {
  background: #fafaf6;
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 2rem 1.5rem;
  text-align: center;
  font-family: "Source Sans 3", system-ui, sans-serif;
  color: var(--muted);
}
.drafts-empty p:first-child {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: var(--text);
}

/* Standalone draft edit page (scratchpad) */
.draft-edit-intro {
  color: var(--muted);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.95rem;
  margin: 0 0 1rem;
  max-width: 36rem;
}
.draft-edit-form .draft-title-field {
  display: block;
  margin-bottom: 0.5rem;
}
.draft-edit-form .draft-title-field input[type="text"] {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-size: 1.05rem;
  font-family: "Source Serif 4", Charter, Georgia, serif;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-top: 0.25rem;
  box-sizing: border-box;
}
.draft-delete-form {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
}

/* Promote-scratchpad-to-thread section */
.draft-promote {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: #faf4e6;
  border: 1px solid #c4a26b;
  border-radius: 4px;
}
.draft-promote h2 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  color: var(--text);
}
.draft-promote-help {
  margin: 0 0 1rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.92rem;
  color: var(--muted);
}
.draft-promote-help strong { color: var(--accent); }
.draft-promote-form {
  display: flex;
  align-items: flex-end;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.draft-promote-form label {
  display: flex;
  flex-direction: column;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
}
.draft-promote-form select {
  margin-top: 0.25rem;
  padding: 0.45rem 0.55rem;
  font-family: "Source Serif 4", Charter, Georgia, serif;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  min-width: 14rem;
  background: white;
}
.draft-promote-form button {
  padding: 0.55rem 1.25rem;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.draft-promote-form button:hover:not(:disabled) {
  background: #5d2a16;
  border-color: #5d2a16;
}
.draft-promote-form button:disabled {
  background: #c6b08f;
  border-color: #c6b08f;
  cursor: not-allowed;
}

.draft-revisions {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  background: #fbf9f3;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.draft-revisions > summary {
  cursor: pointer;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 1rem;
}
.draft-revisions > summary > strong {
  color: var(--accent);
}
.draft-revisions-help {
  margin: 0.75rem 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.draft-revisions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.draft-revision-row {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.draft-revision-row:first-child {
  border-top: none;
}
.draft-revision-current {
  background: rgba(193, 132, 96, 0.05);
}
.draft-revision-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.9rem;
}
.draft-revision-tag {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 600;
  color: var(--accent);
}
.draft-revision-when {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.draft-revision-note {
  color: var(--muted);
  font-style: italic;
  font-size: 0.85rem;
}
.draft-revision-preview {
  font-size: 0.9rem;
  color: var(--ink);
  opacity: 0.85;
  margin-left: 0.25rem;
  white-space: pre-wrap;
}
.draft-revision-title {
  color: var(--ink);
  font-style: italic;
}
.draft-revision-actions {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
}
.draft-revision-actions .inline-form {
  display: inline;
}
.draft-revision-actions button {
  font-size: 0.85rem;
  padding: 0;
}

.revision-detail-header {
  margin-bottom: 1.5rem;
}
.revision-detail-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}
.revision-detail-body {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: #fbf9f3;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.revision-detail-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Secondary forum nav — phpBB-style horizontal strip below the header.
   Familiar shape for users whose mental model of "a forum" is bulletin
   boards: Forum Index, Active Topics, Members, You, plus a search box. */
nav.forum-nav {
  background: #f7f3e9;
  border-bottom: 1px solid var(--rule);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
}
nav.forum-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.forum-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.forum-nav-links a {
  color: var(--text);
  text-decoration: none;
}
.forum-nav-links a:hover { color: var(--accent); text-decoration: underline; }
.forum-nav-search input[type="search"] {
  padding: 0.3rem 0.55rem;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: white;
  min-width: 14rem;
}
.forum-nav-search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
}
.forum-nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.reading-scale-control {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: white;
}
.reading-scale-control button {
  background: transparent;
  border: none;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  font-family: "Source Sans 3", system-ui, sans-serif;
  color: var(--text);
  border-left: 1px solid var(--rule);
}
.reading-scale-control button:first-child { border-left: none; }
.reading-scale-control button:hover { background: #f7f3e9; color: var(--accent); }
.reading-scale-control button[data-scale-down] { font-size: 0.75rem; }
.reading-scale-control button[data-scale-reset] { font-size: 0.9rem; }
.reading-scale-control button[data-scale-up] { font-size: 1rem; }

/* Reading-content font scaling.
   The --reading-scale variable lives on :root and is set by the A−/A/A+
   controls. Apply to specific containers so chrome stays at its natural
   size while the actual reading area grows or shrinks. Children that use
   em-based sizing scale proportionally; rem-sized chrome stays put. */
.post-body-rendered,
.post-body > pre.verse,
.revision-detail-body,
#editor.ProseMirror,
#editor .ProseMirror,
.draft-edit-form #editor {
  font-size: calc(1em * var(--reading-scale, 1));
}

/* Members table */
.members-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.95rem;
}
.members-table th,
.members-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.members-table th {
  font-weight: 600;
  color: var(--muted);
  background: #fafaf6;
}
.members-table td.num,
.members-table th.num { text-align: right; }

/* Search form on the search results page */
.search-form {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
}
.search-form input[type="search"] {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.search-form button {
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
}
.search-form button:hover { background: #5d2a16; border-color: #5d2a16; }
.search-summary {
  color: var(--muted);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

/* Hide secondary nav in focus mode (already nothing visible there matters
   while writing) */
body.focus-mode nav.forum-nav { display: none; }

/* Breadcrumbs */
nav.breadcrumbs {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
nav.breadcrumbs a { color: var(--accent); }
nav.breadcrumbs .sep { color: var(--muted); margin: 0 0.4rem; }

/* Main */
main.site-main { padding: 2rem 0; }
h1 { font-weight: 700; font-size: 1.75rem; margin: 0 0 0.5rem; }
h2 { font-weight: 700; font-size: 1.35rem; margin: 1.5rem 0 0.75rem; }
h3 { font-weight: 700; font-size: 1.1rem; margin: 1rem 0 0.5rem; }

/* Footer */
footer.site-footer {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0;
  margin-top: 3rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #f4f0e6; text-decoration: none; }
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { background: #8a4523; color: white; }

/* Board index */
/* Forum-style list rows — phpBB-shape "table of forums/topics". Each row
   is a card with a quiet border; a column-header strip above (uppercase
   sans-serif, muted) labels the columns so users instinctively read it as
   a forum table. Two row variants share the same grid: 3-column main /
   stats / last-post. */

.list-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem 14rem;
  gap: 1rem;
  padding: 0.5rem 1rem;
  margin: 0 0 0.4rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 2px solid var(--rule);
}
.list-header .stats { text-align: center; }
.list-header .last { text-align: left; }

.board-list, .thread-list { list-style: none; padding: 0; margin: 0; }

.board-row, .thread-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem 14rem;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 3px;
  margin: 0 0 0.4rem;
  transition: border-color 120ms, background 120ms;
}
.board-row:hover, .thread-row:hover {
  border-color: #c4a26b;
  background: #fcfaf3;
}

.board-row .board-main h3,
.thread-row .thread-title {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.board-row .board-main h3 a,
.thread-row .thread-title a { color: var(--text); }
.board-row .board-main h3 a:hover,
.thread-row .thread-title a:hover { color: var(--accent); }

/* Lock + hidden pills on public board headers / index rows. Read-only
 * indicators — the editable toggles live in /manage/boards/. */
.board-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: white;
  color: var(--muted);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.board-pill-locked {
  background: #f7e9c9;
  border-color: #b88a2e;
  color: #6a4d0c;
}
.board-pill-hidden {
  background: #ece4f0;
  border-color: #7a5d8a;
  color: #4a3a5a;
}
.board-pill-mini {
  padding: 0 0.3rem;
  font-size: 0.65rem;
}

.board-row .board-desc,
.thread-row .thread-meta {
  margin: 0;
  color: var(--muted);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.88rem;
}

.board-row .board-stats,
.thread-row .thread-stats {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}
.board-row .board-stats strong,
.thread-row .thread-stats strong {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}

.board-row .board-last,
.thread-row .thread-last {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
.board-row .board-last .muted,
.thread-row .thread-last .muted { font-style: italic; }

/* Subforum links inside a parent board's row on the index, and the
   subforums section on the board-detail page */
.board-subforums {
  margin: 0.4rem 0 0;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
}
.board-subforum-link {
  color: var(--accent);
  text-decoration: none;
}
.board-subforum-link:hover { text-decoration: underline; }

.subforums-heading,
.threads-heading {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 1.5rem 0 0.6rem;
}

/* "Active recently" indicator — small green dot next to author names. */
.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: #6b9c5f;
  vertical-align: 0.1em;
}

/* Prev / next thread navigation strip on thread detail */
.thread-siblings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.88rem;
}
.thread-siblings-prev a, .thread-siblings-next a {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-siblings-prev a:hover, .thread-siblings-next a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.thread-siblings-next { text-align: right; }

/* Footer stats strip — phpBB-style totals line */
.site-stats {
  margin: 0 0 0.4rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
}
.site-stats strong { color: var(--text); }
.site-stats a { color: var(--accent); }
.site-footer-build { margin: 0; }

/* Pinned threads get a warm-cream tint so they read as "elevated" within
   their board listing without being garish. Locked is informational only —
   no row tint, just the icon. */
.thread-row-pinned {
  background: #fdf7e6;
  border-color: #c4a26b;
}
.thread-flag {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: 0.15em;
  border-radius: 2px;
}
.thread-flag-pinned {
  background: var(--select);
  color: var(--text);
}
.thread-flag-locked {
  background: #f0e4e2;
  color: #8b1f1f;
}

/* Render-time @username link — wraps resolved mentions in post + DM
 * bodies. Subtle accent color, bolder weight, underlined on hover so
 * it reads as a directed reference rather than a stylized highlight. */
.mention {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.mention:hover { text-decoration: underline; }

/* Staff-only inline pin/lock controls in the thread header */
.staff-actions {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
}
.inline-form {
  display: inline;
  margin: 0;
}
.btn-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.btn-link:hover { color: #5d2a16; }
.welcome-banner {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--muted);
}
/* Logged-in users get a quieter greeting (no call-to-action color) */
.welcome-banner-quiet { background: transparent; border-style: dashed; }
.welcome-banner-quiet strong { color: var(--text); }

/* Board detail */
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}
.board-header h1 { margin: 0; }
.board-header .board-desc { color: var(--muted); margin: 0 0 1rem; }

/* Thread/board list rules consolidated at the unified "Forum-style list
   rows" block above (single grid + card treatment for both). */

/* Pagination */
.pagination {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin: 1rem 0;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
}
.pagination a, .pagination span {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--muted);
  background: white;
}
.pagination a { color: var(--accent); }
.pagination a:hover { background: #f4f0e6; text-decoration: none; }
.pagination .current { background: var(--accent); color: white; border-color: var(--accent); }
.pagination .gap { border: none; background: transparent; }

/* Thread detail */
.thread-header {
  margin-bottom: 1rem;
}
.thread-header h1 { margin: 0 0 0.25rem; }
.thread-header .thread-attribution {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
}

.post-list { list-style: none; padding: 0; margin: 0; }
.post {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.post:last-child { border-bottom: none; }

.author-panel {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
}
.author-panel .author-name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.author-panel .author-name a { color: var(--text); }
.author-panel .author-name a:hover { color: var(--accent); }
.author-panel .author-meta {
  color: var(--muted);
  line-height: 1.4;
}

.post-body { min-width: 0; }
.post-meta {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.post-meta .post-num { color: var(--accent); margin-right: 0.5rem; }
.post-body pre.verse {
  margin: 0.5rem 0;
}
.post-actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.post-actions button {
  padding: 0.25rem 0.6rem;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.post-actions button:hover { background: #f4f0e6; }

.thread-reply-bar {
  display: flex;
  justify-content: flex-end;
  margin: 1.5rem 0;
}
.thread-reply-bar .muted {
  color: var(--muted);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
  font-style: italic;
}

/* User profile */
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.profile-avatar .avatar { width: 96px; height: 96px; border-radius: 50%; }
.profile-info { flex: 1; }
.profile-header h1 { margin: 0 0 0.25rem; }
.profile-meta {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--muted);
}
.profile-bio {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;  /* preserve author's line breaks */
}
.recent-posts { list-style: none; padding: 0; margin: 1rem 0; }
.recent-posts li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.recent-posts li:last-child { border-bottom: none; }
.recent-posts .recent-thread { font-weight: 700; }
.recent-posts .recent-time {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: 0.5rem;
}

.post-edited { font-style: italic; color: var(--muted); }
.btn-small {
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
}

/* When the post body is rendered from body_json (Phase 2+), it contains
   paragraphs, blockquotes, verse blocks, images, etc. — give them sensible
   spacing inside the post container. */
.post-body-rendered > * { margin: 0.5rem 0; }
.post-body-rendered > *:first-child { margin-top: 0; }
.post-body-rendered > *:last-child { margin-bottom: 0; }
.post-body-rendered p { line-height: 1.55; }
.post-body-rendered blockquote {
  margin: 0.75rem 0;
  padding: 0.4rem 0.9rem;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}
.post-body-rendered blockquote footer {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.4rem;
}
.post-body-rendered figure { margin: 0.75rem 0; }
.post-body-rendered figure img { max-width: 100%; height: auto; display: block; }
.post-body-rendered hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 1.5rem auto;
  max-width: 40%;
}
.post-body-rendered iframe { max-width: 100%; }
.post-body-rendered audio { width: 100%; }

/* Traditional inline marks — browser defaults handle <s>, <u>, <sub>, <sup>;
   <mark> gets a calmer warm-amber tone to match the literary palette rather
   than the lurid yellow default. */
.post-body-rendered mark {
  background: #f7e4b8;
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}

/* Author-controlled paragraph density (↑ tighter / ↓ looser toolbar buttons).
   Integer level in [-2, +2]; 0 = default (no rule). Each click of the arrow
   adjusts by one step. Both margin-top and line-height move together so the
   paragraph nests or breathes as a unit.

   -2 is intentionally aggressive: -1.1rem overcomes the previous block's
   0.5rem bottom margin AND draws the line up under the title baseline, the
   "subtitle right under the title" look (Workaday → citation pattern). */
.post-body-rendered p[data-density="-2"],
.ProseMirror p[data-density="-2"] {
  margin-top: -1.1rem;
  line-height: 1.1;
}
.post-body-rendered p[data-density="-1"],
.ProseMirror p[data-density="-1"] {
  margin-top: -0.45rem;
  line-height: 1.3;
}
.post-body-rendered p[data-density="1"],
.ProseMirror p[data-density="1"] {
  margin-top: 0.9rem;
  line-height: 1.8;
}
.post-body-rendered p[data-density="2"],
.ProseMirror p[data-density="2"] {
  margin-top: 1.5rem;
  line-height: 2.1;
}
.post-body-rendered a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-body-rendered a:hover { color: #5d2a16; }

/* Match in the editor surface */
.ProseMirror mark {
  background: #f7e4b8;
  padding: 0 0.1em;
  border-radius: 2px;
}
.ProseMirror a { color: #7a3a1f; text-decoration: underline; text-underline-offset: 2px; }

/* Standardize paragraph margins in the editor to match the rendered display
   (.post-body-rendered > * { margin: 0.5rem 0 }). Without this, browser
   defaults give <p> ~1em vertical margin in the editor only, so the density
   buttons feel different between composing and reading the post. */
.ProseMirror p { margin: 0.5rem 0; line-height: 1.55; }

/* ------------------------------------------------------------------ */
/* Focus mode — toolbar ⛶ button toggles body.focus-mode.            */
/* Hides site chrome, widens the writing column, surfaces an Exit X.  */
/* ------------------------------------------------------------------ */
body.focus-mode header.site-header,
body.focus-mode nav.breadcrumbs,
body.focus-mode footer.site-footer,
body.focus-mode .reply-context,
body.focus-mode .reply-context-divider {
  display: none;
}

body.focus-mode main.site-main {
  padding: 1.25rem 0 1.25rem;
}

/* Wider writing surface in focus mode — fill most of the viewport but
   keep a reasonable side margin (min() caps at 1200px on big monitors,
   uses 92vw on smaller screens for breathing room). */
body.focus-mode .container {
  max-width: min(1200px, 92vw);
}

/* H1 page title (e.g. "New thread in Open Mic") just stares at you while
   you write — hide it. The user knows what they're working on. */
body.focus-mode h1 {
  display: none;
}

/* Smart-typography checkbox is a pre-writing decision; hide its row so
   it isn't competing for attention while composing. (Toggle remains
   accessible by exiting focus mode.) */
body.focus-mode #compose-form > label:has(#smart-typo) {
  display: none;
}

/* Title input (new-thread only): strip the visual heft so it reads as a
   single quiet manuscript-title line, not a form field. */
body.focus-mode #compose-form input[name="title"] {
  text-align: center;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  padding: 0.5rem 0;
  box-shadow: none;
}
body.focus-mode #compose-form input[name="title"]:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
body.focus-mode #compose-form input[name="title"]::placeholder {
  color: var(--muted);
  font-style: italic;
}

/* Slim the editor toolbar — keep all buttons visible (older users panic
   if Bold disappears) but quiet the visual weight: no border or
   background, low-contrast buttons that come alive on hover. */
body.focus-mode .editor-toolbar {
  border: none;
  background: transparent;
  padding: 0.25rem 0;
  gap: 0.15rem;
}
body.focus-mode .editor-toolbar button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  opacity: 0.6;
  transition: opacity 120ms, color 120ms, background 120ms;
}
body.focus-mode .editor-toolbar button:hover {
  opacity: 1;
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}
body.focus-mode .editor-toolbar button.is-active {
  opacity: 1;
  color: var(--accent);
  background: transparent;
}

/* Quiet the Post button — link-style, not a CTA shouting at you. */
body.focus-mode #compose-form button[type="submit"] {
  background: transparent;
  color: var(--accent);
  font-weight: 500;
  padding: 0.25rem 0;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-end;
  font-size: 0.95rem;
}
body.focus-mode #compose-form button[type="submit"]:hover {
  color: #5d2a16;
}

/* Let the editor command the screen in focus mode. The 60vh cap from normal
   mode (which exists so a big paste doesn't push the Post button off the
   page) becomes restrictive once page chrome is hidden — give the editor
   most of the viewport, reserving room for the toolbar / title / Post
   button / autosave indicator below. */
body.focus-mode #editor {
  min-height: 80vh;
  max-height: calc(100vh - 140px);
  border-color: transparent;
}
body.focus-mode #editor:focus-within {
  border-color: var(--rule);
}

/* Exit-focus button — fixed, top-right, always visible. Older users see
   the escape hatch immediately so they don't feel trapped. */
.focus-exit-button {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.focus-exit-button:hover { background: #5d2a16; border-color: #5d2a16; }

/* ------------------------------------------------------------------ */
/* Auth pages (login / signup / password reset / logout confirm)      */
/* Centered card layout extending base.html for visual continuity.    */
/* ------------------------------------------------------------------ */
.auth-card {
  max-width: 28rem;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.auth-card h1 {
  margin: 0 0 0.75rem;
  font-size: 1.4rem;
}
.auth-card p {
  color: var(--muted);
  margin: 0.4rem 0;
}
.auth-card p.auth-help {
  font-size: 0.9rem;
}
.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.25rem;
}
.auth-card label {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--text);
}
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}
.auth-card input:focus {
  outline: none;
  border-color: var(--accent);
}
.auth-card .field-help {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted);
  font-family: "Source Sans 3", system-ui, sans-serif;
}
.auth-card .field-errors {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  color: #8b1f1f;
  font-size: 0.85rem;
}
.auth-card button[type="submit"] {
  margin-top: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.auth-card button[type="submit"]:hover { background: #5d2a16; border-color: #5d2a16; }
.auth-card .auth-alt {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
}
.auth-card-wide { max-width: 36rem; }

.settings-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}
.settings-list > li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.settings-list > li:last-child { border-bottom: none; }
.settings-list > li > a {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
}
.settings-list .settings-help {
  margin: 0.2rem 0 0;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
}
.settings-list .settings-danger > a { color: #8b1f1f; }

/* Email-list page (managed via allauth) */
.email-list-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.email-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}
.email-address { font-family: "Source Sans 3", system-ui, sans-serif; }
.email-badge {
  padding: 0.05rem 0.4rem;
  border-radius: 2px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.email-badge.verified { background: #e5efdc; color: #3d5a23; }
.email-badge.unverified { background: #fdecec; color: #8b1f1f; }
.email-badge.primary { background: var(--select); color: var(--text); }
.email-actions { margin-top: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.email-actions button { padding: 0.4rem 0.85rem; }
.email-actions .btn-secondary { background: white; color: var(--text); border: 1px solid var(--rule); }

.auth-card .nonfield-errors {
  margin: 0.5rem 0 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #fdecec;
  border-left: 3px solid #8b1f1f;
  color: #8b1f1f;
  border-radius: 2px;
  font-size: 0.9rem;
}

/* Messages banner (flash messages e.g. "You have signed out") */
.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.message {
  padding: 0.6rem 0.9rem;
  margin: 0.5rem 0;
  background: var(--select);
  border: 1px solid #c4a26b;
  border-radius: 3px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.95rem;
}
.message-error {
  background: #fdecec;
  border-color: #8b1f1f;
  color: #8b1f1f;
}

/* Delete-post confirm page */
.delete-preview {
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 1rem;
  background: #fafaf6;
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.delete-preview-meta {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.delete-form {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-direction: row !important;
}
.btn-danger {
  background: #8b1f1f;
  color: white;
  border: 1px solid #8b1f1f;
  padding: 0.5rem 1.25rem;
  border-radius: 3px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
}
.btn-danger:hover { background: #6b1818; border-color: #6b1818; }
.btn-cancel {
  color: var(--muted);
  text-decoration: underline;
  font-size: 0.95rem;
}
.btn-cancel:hover { color: var(--text); }

/* Subdued link-style button (used for Delete next to Edit on own posts) */
.btn-link-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn-link-quiet:hover {
  background: transparent;
  border-color: var(--rule);
  color: #8b1f1f;
}

/* ------------------------------------------------------------------ */
/* Admin panel (/manage/) — co-admin moderation console               */
/* ------------------------------------------------------------------ */
.manage-page { max-width: 60rem; margin: 0 auto; }
.manage-page h1 { margin: 0 0 0.5rem; }
.manage-intro {
  color: var(--muted);
  font-family: "Source Sans 3", system-ui, sans-serif;
  margin: 0 0 1.5rem;
}
.manage-page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}

/* Hub cards (Boards / Users / Content / Site settings) */
.manage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 2rem;
}
.manage-card {
  display: block;
  padding: 1rem 1.25rem;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms, background 120ms;
}
.manage-card:hover {
  border-color: #c4a26b;
  background: #fcfaf3;
}
.manage-card-static {
  cursor: default;
}
.manage-card-static:hover { border-color: var(--rule); background: white; }
.manage-card-coming { opacity: 0.7; }
.manage-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}
.manage-card-count {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 0.3rem;
}
.manage-card-desc {
  margin: 0;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
}
.manage-foot {
  margin-top: 1.5rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Manage tables */
.manage-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.93rem;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.manage-table th,
.manage-table td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}
.manage-table tbody tr:last-child td { border-bottom: none; }
.manage-table th {
  background: #fafaf6;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.manage-table th.num, .manage-table td.num { text-align: right; }
.manage-table .manage-table-actions { white-space: nowrap; }
.manage-table .manage-table-actions a,
.manage-table .manage-table-actions .btn-link {
  margin-right: 0.6rem;
}
.manage-table .manage-table-actions form:last-child .btn-link {
  margin-right: 0;
}

.btn-link-danger { color: #8b1f1f; }
.btn-link-danger:hover { color: #6b1818; }

.manage-row-inactive { opacity: 0.55; }
.manage-row-inactive td:first-child { font-style: italic; }

/* Drag-to-reorder for board rows in /manage/boards/ */
.manage-handle-col { width: 1.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
.drag-handle {
  display: inline-block;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: grab;
  user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.manage-board-row { transition: background 100ms; }
.manage-board-row.dragging {
  opacity: 0.45;
  background: var(--select);
}

/* Tree-shaped board list (indented children) */
.manage-board-tree .manage-board-row--child {
  background: #fafaf6;
}
.manage-board-tree .manage-name-cell {
  position: relative;
  white-space: nowrap;
}
.manage-board-tree .manage-tree-indent {
  display: inline-block;
  width: 0;
}
.manage-board-tree .manage-board-row--child .manage-tree-indent {
  width: 1.5rem;
  border-left: 1px solid var(--rule);
  margin-left: 0.4rem;
  padding-left: 0.6rem;
  position: relative;
}
.manage-board-tree .manage-board-row--child .manage-tree-indent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.5rem;
  height: 1px;
  background: var(--rule);
}
.manage-name-text {
  cursor: text;
  padding: 0.1rem 0.25rem;
  border-radius: 2px;
}
.manage-name-text:hover { background: var(--select); }
.manage-name-text:focus { outline: 1px dashed var(--muted); outline-offset: 1px; }
.manage-name-input {
  font: inherit;
  padding: 0.1rem 0.3rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: white;
  max-width: 18rem;
}
.manage-name-link {
  margin-left: 0.4rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
}
.manage-name-link:hover { color: var(--text); }

/* State column: lock + hide toggle pills */
.manage-state-cell { white-space: nowrap; }
.manage-pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  margin-right: 0.25rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: white;
  color: var(--muted);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.7rem;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
}
.manage-pill:hover { color: var(--text); border-color: var(--text); }
.manage-pill-lock.is-on {
  background: #f7e9c9;
  border-color: #b88a2e;
  color: #6a4d0c;
}
.manage-pill-hide.is-on {
  background: #ece4f0;
  border-color: #7a5d8a;
  color: #4a3a5a;
}

/* Drop-target visual feedback during drag */
.manage-board-row.drop-before {
  box-shadow: inset 0 2px 0 0 var(--text);
}
.manage-board-row.drop-after {
  box-shadow: inset 0 -2px 0 0 var(--text);
}
.manage-board-row.drop-into {
  background: var(--select);
  box-shadow: inset 0 0 0 1px var(--text);
}
.manage-board-row.drop-forbidden {
  cursor: not-allowed;
  background: #f6e6e3;
}
.manage-hint {
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.65rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  background: #fafaf6;
  border-left: 3px solid var(--rule);
  border-radius: 2px;
}
.manage-hint .drag-handle {
  font-size: 0.95rem;
  color: var(--text);
}

.manage-badge {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  margin-right: 0.25rem;
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.manage-badge-staff { background: var(--select); color: var(--text); }
.manage-badge-inactive { background: #f0e4e2; color: #8b1f1f; }

/* Manage filter (user-list search bar) */
.manage-filter {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
  align-items: center;
}
.manage-filter input[type="search"] {
  flex: 1;
  padding: 0.4rem 0.65rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.93rem;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.manage-filter button {
  padding: 0.4rem 0.9rem;
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  cursor: pointer;
}
.manage-filter button:hover { background: #5d2a16; }

/* Inline role selector on the manage/users table. */
.manage-role-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.manage-role-form select {
  padding: 0.25rem 0.4rem;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.88rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: white;
}

/* ------------------------------------------------------------------ */
/* Error pages (404 / 403 / 500)                                      */
/* ------------------------------------------------------------------ */
.error-page {
  max-width: 32rem;
  margin: 3rem auto;
  text-align: center;
}
.error-page h1 {
  font-size: 2rem;
  margin: 0 0 0.5rem;
  color: var(--accent);
}
.error-page .error-code {
  color: var(--muted);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.error-page p { margin: 0.75rem 0; }
.error-page .error-actions {
  margin-top: 1.5rem;
}
.error-page .error-actions a {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: var(--accent);
  color: white;
  border-radius: 3px;
  text-decoration: none;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 600;
}
.error-page .error-actions a:hover { background: #5d2a16; }

/* Mobile: collapse the author panel to a header row at narrow viewports.
   Phase 3a accepts a "graceful narrow view"; full mobile polish is Phase 3b. */
@media (max-width: 600px) {
  .post {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .author-panel { padding-bottom: 0.25rem; border-bottom: 1px dashed var(--rule); }
  .board-row, .thread-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .board-row .board-stats,
  .thread-row .thread-stats,
  .board-row .board-last,
  .thread-row .thread-last { text-align: left; }
  /* Hide column-header strip on narrow screens — labels no longer match */
  .list-header { display: none; }
}

/* Reply-page thread context (full thread shown above the compose form) */
.reply-context {
  margin-bottom: 1.5rem;
}
.reply-context-heading {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.reply-context-heading em {
  color: var(--text);
  font-style: italic;
}
.reply-context-divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 1.5rem 0 0;
}
/* Context posts get the same .post layout but appear in a slightly muted frame. */
.reply-context .post { padding: 0.75rem 0; }

/* Compose-reply split layout: thread context scrolls in its own pane,
   compose form pins to the bottom. The author can still review the
   thread without losing the editor — Marc's sticky-reply-box request.
   Only active when there IS thread context (so new-thread compose
   keeps the normal flowing layout). */
@media (min-height: 720px) {
  .compose-reply-layout {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 220px);  /* leave room for header + breadcrumbs + footer */
    min-height: 32rem;
  }
  .compose-reply-layout .reply-context {
    flex: 1 1 auto;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding-right: 0.5rem;  /* room for scrollbar */
    border-bottom: 1px solid var(--rule);
  }
  .compose-reply-layout .reply-context-divider { display: none; }
  .compose-reply-layout #compose-form {
    flex: 0 0 auto;
    margin-top: 0;
  }
}

/* Empty thread/board rows — friendly fallback when there's nothing to list */
.thread-row-empty {
  background: #fafaf6;
  border-style: dashed;
}
.thread-row-empty .thread-title {
  font-weight: 600;
  color: var(--muted);
}

.members-empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 1.5rem 0.85rem;
}