/* grimoire.css — bryce.today skin for FlaskBB 2.2.1 (aurora theme, Bootstrap 5.3).
   Injected before </head>, after /forum/static/app.css, so it always wins on
   source order. The HTML cannot be changed; everything here selects FlaskBB's
   existing markup.

   FlaskBB ships Bootstrap 5.3, which themes entirely through --bs-* custom
   properties, so most of the work is retokenising rather than out-specifying
   component selectors. Only FlaskBB's own hand-written rules (.flaskbb-*,
   .category-*, .forum-*, .post-*, .author-*) need selector overrides, and those
   are matched at their original specificity.

   Motif follows /styles.css: a leather book on a wooden desk. Here the
   .container is the leather cover and every Bootstrap .card is a parchment page
   inside it. Mobile-first; every tap target is at least 44px. */

/* ===== 1. fonts ========================================================== */
/* /styles.css is not loaded on forum pages, so redeclare. Same files, absolute
   paths, so they resolve from /forum/* unchanged. */




/* ===== 2. tokens ========================================================= */
:root {
  /* Verbatim from /styles.css so the two stylesheets stay in step. */
  --ink: #2a1f16; --ink-soft: #63513c; --ink-faint: #8d7a61;
  --parchment: #f2e8d2; --parchment-shade: #e4d6b6; --parchment-deep: #d6c49c;
  --gold: #9c7c2c; --gold-lit: #d8bd72;
  /* --leather, --leather-dark, --desk-base and --desk come from /theme.css,
     which follows the visitor's cover and desk settings. */
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --body: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --rule: rgba(42, 31, 22, 0.16); --rule-strong: rgba(42, 31, 22, 0.38);
  --shadow-book: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.45);
  --shadow-page: inset 0 0 2.5rem rgba(120, 96, 60, 0.16);
  --tap: 2.75rem;                                    /* 44px */
  --pad: clamp(0.75rem, 3.5vw, 1.75rem);
  --on-desk: 0 1px 4px rgba(0, 0, 0, 0.65);          /* legibility on the desk */
  --link: #6b4a12;             /* deep bronze, ~8:1 on parchment */
  --tint: rgba(156, 124, 44, 0.14);                  /* gold wash for hover */

  /* --- Bootstrap bridge. --ink-faint is decoration only: it fails AA as text. */
  --bs-body-font-family: var(--body);
  --bs-body-font-size: 1.0625rem; --bs-body-line-height: 1.6;
  --bs-body-color: var(--ink); --bs-body-color-rgb: 42, 31, 22;
  --bs-body-bg: var(--parchment); --bs-body-bg-rgb: 242, 232, 210;
  --bs-emphasis-color: var(--ink); --bs-emphasis-color-rgb: 42, 31, 22;
  --bs-secondary-color: var(--ink-soft); --bs-secondary-bg: var(--parchment-shade);
  --bs-tertiary-color: var(--ink-soft); --bs-tertiary-bg: var(--parchment-shade);
  --bs-heading-color: var(--ink);
  --bs-link-color: var(--link); --bs-link-color-rgb: 107, 74, 18;
  --bs-link-hover-color: var(--ink);
  --bs-border-color: var(--rule-strong); --bs-border-color-translucent: var(--rule);
  --bs-border-radius: 0.2rem; --bs-border-radius-sm: 0.15rem; --bs-border-radius-lg: 0.25rem;
  --bs-code-color: #7a4a1c; --bs-highlight-bg: rgba(216, 189, 114, 0.5);

  /* Contextual colours darkened so white-on-colour badges clear WCAG AA. */
  --bs-primary-rgb: 92, 66, 24;    --bs-secondary-rgb: 99, 81, 60;
  --bs-success-rgb: 47, 93, 58;    --bs-danger-rgb: 125, 43, 34;
  --bs-warning-rgb: 110, 82, 17;   --bs-info-rgb: 49, 79, 95;
  --bs-light-rgb: 228, 214, 182;   --bs-dark-rgb: 42, 31, 22;
}

/* FlaskBB's own status colours, remapped to stay legible on parchment. */
.text-red, .text-red:hover { color: #7d2b22; }
.text-orange, .text-orange:hover { color: #8a5a10; }
.text-green, .text-green:hover { color: #2f5d3a; }
.text-blue, .text-blue:hover { color: #31506e; }
.text-light-blue, .text-light-blue:hover { color: #3f6a80; }
.text-danger, .invalid-feedback { color: #7d2b22 !important; }
.bg-white, .bg-body { background-color: var(--parchment) !important; }

::selection { background: var(--ink); color: var(--parchment); }
:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 2px; }

/* ===== 3. the desk and the book ========================================== */
html { position: static; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;                        /* FlaskBB reserves 60px for a fixed footer */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--pad) clamp(0.4rem, 2.5vw, 1.5rem);
  background-color: var(--desk-base);
  background-image: var(--desk);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

.flaskbb-layout {
  width: 100%; max-width: 64rem; min-width: 0;
  padding-top: 0;
  display: flex; flex-direction: column; flex: 1 1 auto;
}

/* The leather cover. Everything the forum renders sits inside it. */
.flaskbb-layout > .container {
  width: 100%; max-width: none; min-width: 0;
  padding: 0.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  background-color: var(--leather);
  background-image: linear-gradient(rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.22));
  border-radius: 0.35rem 0.6rem 0.6rem 0.35rem;
  box-shadow: var(--shadow-book);
}

#flashed-messages:empty { display: none; }   /* would otherwise add a stray gap */

/* Bootstrap rows carry -0.75rem side margins. A card's padding cancels that,
   but a row sitting straight on the leather would overhang it at 320px. */
.flaskbb-layout > .container > .row,
.flaskbb-layout > .container > * > .row,
.flaskbb-layout > .container form > .row { margin-left: 0; margin-right: 0; }

/* Board title: gold leaf stamped into the cover. */
.flaskbb-header {
  height: auto; margin-top: 0;
  padding: clamp(0.9rem, 4.5vw, 1.6rem) clamp(0.75rem, 3.5vw, 1.25rem);
  background: none; filter: none; border: 0;
  border-bottom: 2px solid var(--gold);
  text-shadow: var(--on-desk);
}
.flaskbb-header .flaskbb-meta .flaskbb-title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 6.5vw, 2.3rem);
  font-weight: 600; line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-lit);
}
.flaskbb-header .flaskbb-meta .flaskbb-subtitle {
  font-size: 0.95rem; font-style: italic; color: var(--parchment);
}

/* Undo FlaskBB's absolutely-positioned 60px footer; it belongs on the desk. */
.flaskbb-footer.footer {
  position: static; height: auto; width: 100%;
  margin-top: auto; padding: 1rem 0 0;
  font-size: 0.78rem; letter-spacing: 0.06em;
}
.flaskbb-footer .container { max-width: none; }
.flaskbb-footer .text-muted { color: var(--parchment) !important; text-shadow: var(--on-desk); }
.flaskbb-footer a { color: var(--gold-lit); text-shadow: var(--on-desk); display: inline-block; padding: 0.2rem 0; }

/* ===== 4. navbar ========================================================= */
.flaskbb-navbar.navbar {
  --bs-navbar-color: var(--ink-soft);
  --bs-navbar-hover-color: var(--ink);
  --bs-navbar-active-color: var(--ink);
  --bs-navbar-toggler-border-color: var(--rule-strong);
  margin-bottom: 0; padding: 0 0.2rem;
  background-color: var(--parchment-shade) !important;   /* beats .bg-light */
  border: 1px solid var(--ink); border-radius: 0.15rem;
}
.flaskbb-navbar .nav-link {
  display: flex; align-items: center; gap: 0.45rem;
  min-height: var(--tap); padding: 0.5rem 0.85rem;
  font-family: var(--display); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.flaskbb-navbar .nav-link:hover, .flaskbb-navbar .nav-link:focus-visible,
.flaskbb-navbar .nav-link:active, .flaskbb-navbar .nav-link.active,
.flaskbb-navbar .nav-link.dropdown-toggle.show {
  color: var(--ink); background-color: rgba(42, 31, 22, 0.09);
}
.flaskbb-navbar .nav-link.active { box-shadow: inset 0 -2px 0 var(--gold); }
.flaskbb-navbar .btn-group { padding: 0.35rem 0; }
.navbar-toggler { min-width: var(--tap); min-height: var(--tap); border-radius: 0.15rem; }

/* ===== 5. buttons ======================================================== */
/* Mirrors .btn in /styles.css: hairline ink border, Cinzel caps, inverting on
   hover AND on :active so touch gets the same feedback. .btn-icon is excluded —
   FlaskBB depends on its font-family being Font Awesome. */
.btn:not(.btn-icon):not(.btn-close) {
  --bs-btn-color: var(--ink); --bs-btn-bg: transparent; --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: var(--parchment); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: var(--parchment); --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--ink-soft); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--rule-strong);
  --bs-btn-focus-shadow-rgb: 216, 189, 114;
  --bs-btn-border-radius: 0.2rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: var(--tap); padding: 0.5rem 1.2rem;
  font-family: var(--display); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background-color 0.12s ease, color 0.12s ease;
}
/* Destructive actions keep an oxblood identity. FlaskBB forces .btn-danger
   colour directly, so it has to be answered directly. */
.btn.btn-danger {
  --bs-btn-color: var(--parchment); --bs-btn-bg: #7d2b22; --bs-btn-border-color: #7d2b22;
  --bs-btn-hover-color: var(--parchment); --bs-btn-hover-bg: #501811; --bs-btn-hover-border-color: #501811;
  --bs-btn-active-color: var(--parchment); --bs-btn-active-bg: #501811;
  color: var(--parchment);
}
.btn.dropdown-toggle-split { padding-left: 0.7rem; padding-right: 0.7rem; }
/* Icon-only buttons (the post menu) still need a real touch target. */
.btn.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  padding: 0; border: 0; border-radius: 0.15rem;
}
.btn.btn-icon:hover, .btn.btn-icon:focus-visible, .btn.btn-icon:active { background-color: var(--tint); }
.btn-close { min-width: var(--tap); min-height: var(--tap); }

/* ===== 6. breadcrumbs and control rows (these sit on the leather) ======== */
.flaskbb-breadcrumb.breadcrumb {
  --bs-breadcrumb-divider-color: var(--gold);
  --bs-breadcrumb-margin-bottom: 0;
  padding: 0 0.35rem;
  background-color: transparent !important;      /* beats .bg-light */
  border: 0;
  font-family: var(--display); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-shadow: var(--on-desk);
}
.flaskbb-breadcrumb .breadcrumb-item a, .flaskbb-breadcrumb .breadcrumb-item.active {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--parchment);
}
.flaskbb-breadcrumb .breadcrumb-item.active { color: var(--gold-lit); }
.flaskbb-breadcrumb .breadcrumb-item a:hover,
.flaskbb-breadcrumb .breadcrumb-item a:focus-visible,
.flaskbb-breadcrumb .breadcrumb-item a:active {
  color: var(--gold-lit); text-decoration: underline; text-underline-offset: 0.3em;
}

.controls-row { align-items: center; gap: 0.4rem 0; padding: 0.35rem 0.25rem; margin: 0; }
/* Buttons on leather invert the palette: gold hairline, parchment label. */
.controls-row .btn:not(.btn-icon) {
  --bs-btn-color: var(--parchment); --bs-btn-bg: rgba(0, 0, 0, 0.28); --bs-btn-border-color: var(--gold-lit);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--gold-lit); --bs-btn-hover-border-color: var(--gold-lit);
  --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--gold-lit); --bs-btn-active-border-color: var(--gold-lit);
}

/* ===== 7. the parchment page (Bootstrap cards) =========================== */
.card {
  --bs-card-bg: var(--parchment); --bs-card-color: var(--ink);
  --bs-card-border-color: var(--gold);
  --bs-card-border-radius: 0.15rem; --bs-card-inner-border-radius: 0;
  --bs-card-cap-bg: var(--parchment-shade); --bs-card-cap-color: var(--ink);
  --bs-card-cap-padding-y: 0.7rem;
  min-width: 0;
  /* Two soft stains: the same mottling recipe as .page in /styles.css. */
  background-image:
    radial-gradient(60% 45% at 18% 12%, rgba(198, 168, 112, 0.16), transparent 70%),
    radial-gradient(50% 40% at 85% 82%, rgba(160, 128, 78, 0.14), transparent 72%);
  box-shadow: var(--shadow-page);
}
.card-header {
  min-height: var(--tap);
  border-bottom: 2px solid var(--gold);
  font-family: var(--display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.card-header a { color: var(--ink); text-decoration: none; }
.card-header a:hover, .card-header a:focus-visible, .card-header a:active {
  color: var(--link); text-decoration: underline; text-underline-offset: 0.3em;
}
.card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-title {
  font-family: var(--display); font-weight: 600; line-height: 1.25;
  letter-spacing: 0.1em; color: var(--ink);
}
.card-body h1, .card-title { text-transform: uppercase; letter-spacing: 0.12em; }

/* ===== 8. listings — ruled ledger lines ================================== */
/* Column-label strips above each listing. */
.category .category-meta, .forum .forum-meta,
.page .page-meta, .settings .settings-meta {
  height: auto; min-height: 2.25rem; padding: 0.45rem 0;
  background-color: var(--parchment-deep);
  border-bottom: 2px solid var(--gold);
  font-family: var(--display); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink);
}
.category .category-meta a, .forum .forum-meta a,
.page .page-meta a, .settings .settings-meta a { color: var(--ink); }

/* The rows themselves. */
.category .category-row, .forum .forum-row,
.page .page-row, .conversation .conversation-row {
  margin: 0; padding: 0.55rem 0.15rem;
  min-height: var(--tap); align-items: center;
}
.category .category-row:not(:last-child), .forum .forum-row:not(:last-child),
.page .page-row:not(:last-child), .conversation .conversation-row:not(:last-child),
.page .row > .page-row:not(:last-child) { border-bottom: 1px solid var(--rule); }
/* Faint alternating tint so long lists read as ruled ledger lines. */
.category .category-row:nth-child(even), .forum .forum-row:nth-child(even),
.page .page-row:nth-child(even) { background-color: rgba(120, 96, 60, 0.055); }
/* :focus-within stands in for hover on touch and for keyboard users. */
.category .category-row.hover:hover, .category .category-row.hover:focus-within,
.forum .forum-row.hover:hover, .forum .forum-row.hover:focus-within,
.page .page-row.hover:hover, .page .page-row.hover:focus-within,
.settings .settings-row.hover:hover,
.conversation .conversation-row.hover:hover { background-color: var(--tint); }
.row-unread { font-weight: 600; }

/* Status icons are ornament, so the faint ink is acceptable here. */
.category .forum-info .forum-status, .forum .topic-info .topic-status { color: var(--ink-faint); }
.forum-unread, .topic-unread { color: var(--gold); }

.category .forum-info .forum-name, .forum .topic-info .topic-name,
.category .forum-last-post .last-post-title {
  font-family: var(--display); font-size: 0.92rem;
  font-weight: 600; letter-spacing: 0.03em;
}
.category .forum-info .forum-description, .category .forum-info .forum-moderators,
.forum .topic-info .topic-author, .forum .topic-info .topic-pages,
.last-post-time, .last-post-author, .topic-last-post .topic-author {
  font-size: 0.85rem; color: var(--ink-soft);
}
p.flaskbb-stats { padding: 0.15rem 0; }
/* Narrow columns hold titles and usernames; nothing may escape sideways. */
.category-row > [class*='col-'], .forum-row > [class*='col-'],
.page-row > [class*='col-'] { min-width: 0; overflow-wrap: break-word; }

/* ===== 9. topic view ===================================================== */
.post-row { margin: 0; background: var(--parchment-shade); }
.post-row:not(:last-child) { border-bottom: 2px solid var(--gold); }

/* The author strip reads as a margin annotation beside the post. */
.author { padding: 0.75rem 1rem; text-shadow: none; color: var(--ink); }
.author .author-name h4, .author .author-name .h4, h4.author-name {
  float: none; font-family: var(--display);
  font-size: 1rem; letter-spacing: 0.08em; color: var(--ink);
}
.author .author-title h5, .author .author-title .h5, h5.author-title {
  text-shadow: none; font-family: var(--display); font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft);
}
.author .author-registered, .author .author-posts { font-size: 0.82rem; color: var(--ink-soft); }
.author .author-avatar img { border-radius: 0.15rem; box-shadow: 0 0 0 1px var(--rule-strong); }
.author .author-online { background: #2f5d3a; }
.author .author-offline { background: var(--ink-faint); }

.post-box {
  background: var(--parchment);
  border-left: 0; border-top: 1px solid var(--gold);
  min-height: 0;                  /* the flex row already equalises the columns */
  padding-bottom: 3.5rem;         /* clears the absolutely-positioned footer */
}
.post-box .post-meta {
  padding: 0.4rem 0.75rem;
  background-color: transparent; border-bottom: 1px solid var(--rule);
  font-size: 0.82rem; color: var(--ink-soft);
}
.post-box .post-content {
  padding: 0.9rem 0.75rem;
  overflow-wrap: anywhere;        /* long URLs must not push the page sideways */
}
.post-box .post-content blockquote {
  margin: 0 0 1rem; padding: 0.4rem 0.9rem;
  border-left: 3px solid var(--gold);
  background: rgba(120, 96, 60, 0.08);
  font-style: italic; color: var(--ink-soft);
}
.post-box .post-content pre, .post-box .post-content .highlight {
  max-width: 100%; overflow-x: auto;
  background: var(--parchment-deep); border: 1px solid var(--rule);
  border-radius: 0.15rem; padding: 0.6rem 0.75rem;
}
.post-box .post-signature { color: var(--ink-soft); font-size: 0.9rem; }
.post-box .post-signature hr { color: var(--gold); background-color: var(--gold); }
.post-box .post-footer { background-color: var(--parchment-shade); border-top: 1px solid var(--rule); }
.post-box .post-footer .post-menu .btn-icon:hover { background-color: var(--tint); }

/* ===== 10. forms ========================================================= */
/* 16px minimum on every field: anything smaller makes iOS Safari zoom on focus. */
.form-control, .form-select, .form-control-sm, .form-select-sm,
input[type='text'], input[type='email'], input[type='password'],
input[type='search'], input[type='url'], input[type='number'], textarea, select {
  font-family: var(--body); font-size: 1rem; line-height: 1.5;
  min-height: var(--tap); color: var(--ink);
  background-color: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--rule-strong); border-radius: 0.2rem;
}
textarea, textarea.form-control { min-height: 8rem; }
.form-control:focus, .form-select:focus, textarea:focus, select:focus {
  background-color: rgba(255, 255, 255, 0.65); color: var(--ink);
  border-color: var(--gold); box-shadow: 0 0 0 2px rgba(156, 124, 44, 0.28);
}
.form-control::placeholder { color: var(--ink-soft); opacity: 0.85; }
.form-label, .col-form-label {
  font-family: var(--display); font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft);
}
.form-check-input {
  width: 1.15rem; height: 1.15rem; margin-top: 0.28rem;
  background-color: rgba(255, 255, 255, 0.6); border-color: var(--rule-strong);
}
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-text, .form-check { color: var(--ink-soft); }
/* The markdown editor's toolbar is a row of small anchors. */
.editor-toolbar a, .editor-toolbar button { min-width: var(--tap); min-height: var(--tap); color: var(--ink-soft); }

/* ===== 11. pagination, dropdowns, alerts, modals ========================= */
/* Pagination normally lives in .controls-row, i.e. on the leather. */
.pagination {
  --bs-pagination-color: var(--parchment); --bs-pagination-bg: rgba(0, 0, 0, 0.26);
  --bs-pagination-border-color: rgba(216, 189, 114, 0.45);
  --bs-pagination-hover-color: var(--ink); --bs-pagination-hover-bg: var(--gold-lit);
  --bs-pagination-hover-border-color: var(--gold-lit);
  --bs-pagination-focus-color: var(--ink); --bs-pagination-focus-bg: var(--gold-lit);
  --bs-pagination-active-color: #241a10; --bs-pagination-active-bg: var(--gold);
  --bs-pagination-active-border-color: var(--gold);
  --bs-pagination-disabled-color: rgba(242, 232, 210, 0.75);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: rgba(216, 189, 114, 0.25);
  --bs-pagination-border-radius: 0.15rem;
  flex-wrap: wrap; gap: 0.15rem;
}
.page-link {
  display: flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.06em;
}
/* …but a pagination block inside a card is on parchment instead. */
.card .pagination {
  --bs-pagination-color: var(--link); --bs-pagination-bg: transparent;
  --bs-pagination-border-color: var(--rule-strong);
  --bs-pagination-hover-color: var(--parchment); --bs-pagination-hover-bg: var(--ink);
  --bs-pagination-hover-border-color: var(--ink);
  --bs-pagination-disabled-color: var(--ink-soft);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--parchment); --bs-dropdown-color: var(--ink);
  --bs-dropdown-border-color: var(--gold); --bs-dropdown-border-radius: 0.15rem;
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-color: var(--ink); --bs-dropdown-link-hover-bg: var(--parchment-shade);
  --bs-dropdown-link-active-color: var(--parchment); --bs-dropdown-link-active-bg: var(--ink);
  --bs-dropdown-divider-bg: var(--rule);
  box-shadow: var(--shadow-book);
}
.dropdown-item {
  display: flex; align-items: center; gap: 0.55rem;
  width: 100%; min-height: var(--tap);
  font-family: var(--body); text-align: left;
}

.alert {
  --bs-alert-bg: var(--parchment-shade); --bs-alert-color: var(--ink);
  --bs-alert-border-color: var(--rule-strong); --bs-alert-border-radius: 0.15rem;
  border-left-width: 3px;
}
.alert-danger { border-left-color: #7d2b22; }
.alert-success { border-left-color: #2f5d3a; }
.alert-warning { border-left-color: var(--gold); }
.alert-info { border-left-color: #314f5f; }
.alert-message { background-color: var(--parchment-shade); color: var(--ink); border-radius: 0.15rem; }

.modal-content {
  background-color: var(--parchment); color: var(--ink);
  border: 0.4rem solid var(--leather); border-radius: 0.3rem;
  box-shadow: var(--shadow-book);
}
.modal-header, .modal-footer { border-color: var(--rule); }
.modal-title, .cheatsheet h2, .cheatsheet .h2 {
  font-family: var(--display); font-size: 0.95rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.cheatsheet h2, .cheatsheet .h2 { border-bottom: 1px solid var(--gold); }

/* ===== 12. tables, profile, management (deliberately a light touch) ====== */
/* Admin screens are dense tables: recolour them, do not restructure them. */
.table {
  --bs-table-color: var(--ink); --bs-table-bg: transparent;
  --bs-table-border-color: var(--rule);
  --bs-table-striped-bg: rgba(120, 96, 60, 0.06); --bs-table-striped-color: var(--ink);
  --bs-table-hover-bg: var(--tint); --bs-table-hover-color: var(--ink);
}
.table th {
  font-family: var(--display); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
/* No wrapper div exists to add, so a wide table scrolls inside its own card
   body rather than pushing the whole page sideways. */
.table-responsive, .card-body:has(> .table),
.card-body:has(> form > .table), .management-body:has(.table) {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}

.management .management-header { background-color: var(--parchment-deep); color: var(--ink); }
.settings .settings-header { background-color: var(--parchment-shade); border-bottom: 2px solid var(--gold); }
.sidebar { background-color: var(--parchment-shade); border-color: var(--rule-strong); text-shadow: none; }
.sidebar .sidenav-header { font-family: var(--display); letter-spacing: 0.12em; color: var(--ink); }
.nav-sidebar .nav-link { display: flex; align-items: center; min-height: var(--tap); color: var(--ink-soft); }
.nav-sidebar .nav-link:hover, .nav-sidebar .nav-link:focus-visible,
.nav-sidebar .nav-link.active { background-color: var(--tint); color: var(--ink); border-color: var(--rule-strong); }
.stats .stats-widget, .stats .stats-heading { border-color: var(--rule-strong); }

.page-body.profile-body { background-color: var(--parchment-shade); }
.profile-content { background-color: var(--parchment); }
.profile-sidebar-stats { text-shadow: none; }
.profile-groupname { font-family: var(--display); letter-spacing: 0.1em; color: var(--link); }
.card-header.profile-header { background-color: var(--parchment-shade) !important; }
.nav-tabs {
  --bs-nav-tabs-border-color: var(--gold);
  --bs-nav-tabs-link-active-bg: var(--parchment); --bs-nav-tabs-link-active-color: var(--ink);
  --bs-nav-tabs-link-active-border-color: var(--gold) var(--gold) var(--parchment);
  --bs-nav-tabs-link-hover-border-color: var(--gold-lit);
}
.nav-tabs .nav-link {
  display: flex; align-items: center; gap: 0.4rem; min-height: var(--tap);
  font-family: var(--display); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.card-tabs > .card-header > .nav-tabs .nav-item .nav-link,
.card-tabs > .card-header > .nav-tabs .nav-link.active,
.card-tabs > .card-header > .nav-tabs .nav-item .nav-link:hover {
  background-color: var(--parchment); border-color: var(--gold); color: var(--ink);
}

/* ===== 13. things that do not apply here ================================= */
/* Accounts come from the game, not from FlaskBB, so registration and password
   recovery are dead ends. The markup cannot be edited, so these are matched on
   href / name. Login and Logout stay: Login bounces to the game sign-in and
   Logout ends the session. */
a[href*='/auth/register'],
a[href*='reset-password'],
a[href*='forgot-password'],
.dropdown-menu li:has(> a[href*='/auth/register']),
.dropdown-menu li:has(> a[href*='reset-password']),
.form-check:has(#remember_me),
.form-check:has([name='remember_me']),
#remember_me,
label[for='remember_me'] { display: none !important; }

/* ===== 14. wide screens ================================================== */
@media (min-width: 48rem) {
  .flaskbb-layout > .container { padding: 0.75rem; gap: 0.75rem; }
  .card-header { padding-left: 1.25rem; padding-right: 1.25rem; }
  .category .category-row, .forum .forum-row, .page .page-row { padding-left: 0.5rem; padding-right: 0.5rem; }
  /* Once the author strip is a real column, the divider becomes vertical. */
  .post-box { border-left: 1px solid var(--gold); border-top: 0; }
}

/* ===== 15. narrow screens ================================================ */
@media (max-width: 36rem) {
  body { background-size: 620px auto; }   /* keep the grain from reading huge */
  /* The profile header uses inline max-widths plus nowrap, which overflow at
     320px. !important beats the inline style; the column goes full width. */
  .profile-stats { width: 100%; max-width: 100%; flex: 0 0 100%; margin-top: 0.5rem; }
  .profile-stats .row > .col { max-width: none !important; }
  .profile-stats .text-end { text-align: left !important; }
  .profile-picture img { width: 40%; height: auto; }
  .author { border-bottom: 1px solid var(--gold); }   /* stacked, so divide it */
  .flaskbb-breadcrumb.breadcrumb { font-size: 0.62rem; }
  /* Search and settings forms use unprefixed col-3/col-4, which leaves a field
     about 90px wide on a phone. Stack the label above the control instead. */
  .form-horizontal > .row > [class*='col-'] { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .form-horizontal .col-form-label, .form-horizontal .form-label { text-align: left !important; }
}

/* ===== 16. motion ======================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- icon font path fix --------------------------------------------------
   FlaskBB's compiled app.css hardcodes url(/static/fa-*.woff2). This app is
   mounted at /forum, so those resolve against the landing server and 404,
   leaving every icon as an empty box. Redeclaring the faces here works because
   this file loads after app.css. Only solid and regular ship with FlaskBB. */



/* ---- very narrow phones --------------------------------------------------
   FlaskBB keeps the "last post" column at col-4 all the way down to 320px,
   which leaves it too narrow for a topic title and breaks words mid-syllable.
   Below 26rem the forum name takes the full row and the last-post summary is
   dropped — the same information is one tap away inside the forum. */
@media (max-width: 26rem) {
  .forum-last-post,
  .category-last-post { display: none !important; }

  .forum-name,
  .forum-info { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
}

/* Never break a word mid-syllable in these summaries at any width. */
.last-post-title, .last-post-author, .last-post-time,
.forum-name, .forum-description { overflow-wrap: break-word; word-break: normal; }

/* ---- icon font path fix (forum-only; NOT a candidate for /theme.css) ------
   FlaskBB's compiled app.css hardcodes url(/static/fa-*.woff2). This app is
   mounted at /forum, so those resolve against the landing server and 404,
   leaving every icon an empty box. Redeclaring the faces here works because
   this file loads after app.css. Only solid and regular ship with FlaskBB. */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(/forum/static/fa-solid-900.woff2) format("woff2"),
       url(/forum/static/fa-solid-900.ttf) format("truetype");
}
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/forum/static/fa-regular-400.woff2) format("woff2"),
       url(/forum/static/fa-regular-400.ttf) format("truetype");
}