/* ============================================================
   Vespers — Temple of the Jedi Order

   Light is the primary voice; dark is the option. Every colour
   is a token, so the Kunena bridge at the foot of this file
   cannot drift from the site.
   ============================================================ */

:root {
  /* --- LIGHT (default) : the hall by day --- */
  --bg:#eaecea; --surf:#f7f8f7; --surf-2:#dee2df;
  --text:#151c1d; --mut:#56635f; --faint:#7c8a85;
  --acc:#2c6b5e; --acc-ink:#1e4f45; --acc-warm:#8a5f36;
  --line:rgba(21,28,29,.15); --line-strong:rgba(21,28,29,.3);
  --shadow:0 1px 2px rgba(16,26,28,.05), 0 12px 30px rgba(16,26,28,.09);
  --on-acc:#f7f8f7;

  --display:Marcellus, Georgia, "Times New Roman", serif;
  --body:Newsreader, Georgia, "Times New Roman", serif;
  --ui:Karla, "Helvetica Neue", Arial, sans-serif;
  --shell:1180px; --radius:2px;
  color-scheme:light;
}

[data-theme="dark"] {
  color-scheme:dark;
  /* --- DARK : the hall at evening --- */
  --bg:#101a1c; --surf:#162326; --surf-2:#1d2f33;
  --text:#e8e4d9; --mut:#9aa8a5; --faint:#74847f;
  --acc:#7fb8a4; --acc-ink:#a5d4c3; --acc-warm:#b8895a;
  --line:rgba(232,228,217,.14); --line-strong:rgba(232,228,217,.28);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.42);
  --on-acc:#0d1618;
}

/* If JS never runs and the visitor's OS prefers dark, honour it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme:dark;
    --bg:#101a1c; --surf:#162326; --surf-2:#1d2f33;
    --text:#e8e4d9; --mut:#9aa8a5; --faint:#74847f;
    --acc:#7fb8a4; --acc-ink:#a5d4c3; --acc-warm:#b8895a;
    --line:rgba(232,228,217,.14); --line-strong:rgba(232,228,217,.28);
    --on-acc:#0d1618;
  }
}

*,*::before,*::after { box-sizing:border-box; }

body.vespers {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:1.0625rem; font-weight:450; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.shell { width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:24px; }

body.vespers h1, body.vespers h2, body.vespers h3, body.vespers h4 {
  font-family:var(--display); font-weight:400; line-height:1.14;
  letter-spacing:-.005em; text-wrap:balance; margin:0 0 .5em; color:var(--text);
}
body.vespers h1{font-size:clamp(2rem,1.5rem + 2.2vw,3.1rem);}
body.vespers h2{font-size:clamp(1.5rem,1.25rem + 1.1vw,2.05rem);}
body.vespers h3{font-size:1.3rem;} body.vespers h4{font-size:1.1rem;}
p { margin:0 0 1.15em; }

/* --- Links: no underlines anywhere. Colour and weight carry them. --- */
body.vespers a { color:var(--acc-ink); text-decoration:none; transition:color .16s ease; }
body.vespers a:hover { color:var(--acc); }
/* Body prose keeps a hover cue so links stay findable in long text. */
.com-content-article__body a:hover, .item-page a:hover, .blog-item a:hover {
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:1px; }
img { max-width:100%; height:auto; }
hr { border:0; border-top:1px solid var(--line); margin:2rem 0; }

.skip { position:absolute; left:-9999px; }
.skip:focus { left:12px; top:12px; z-index:99; background:var(--acc); color:var(--on-acc);
  padding:10px 16px; border-radius:var(--radius); font-family:var(--ui); }

/* ---------------- header ---------------- */
.site-head { border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:40; max-height:100vh; }
.head-inner { display:flex; align-items:center; gap:22px; min-height:72px; }
.brand { display:flex; align-items:center; gap:13px; color:inherit; flex:0 0 auto;
  max-width:min(46vw,420px); }
.seal { width:36px; height:36px; flex:0 0 auto; background-color:var(--acc);
  -webkit-mask:var(--seal) center/contain no-repeat; mask:var(--seal) center/contain no-repeat;
  transition:background-color .16s ease; }
.brand:hover .seal { background-color:var(--acc-ink); }
.brand-text strong { display:block; font-family:var(--display); font-size:1.02rem;
  letter-spacing:.15em; text-transform:uppercase; font-weight:400; line-height:1.2;
  overflow-wrap:anywhere; }
.brand-text small { display:block; font-family:var(--ui); font-size:.72rem;
  color:var(--faint); letter-spacing:.04em; margin-top:2px; }

.nav-main { margin-left:auto; }
.nav-main ul { display:flex; flex-wrap:wrap; gap:4px; list-style:none; margin:0; padding:0;
  font-family:var(--ui); font-size:.875rem; }
.nav-main a { display:flex; align-items:center; gap:8px; padding:8px 12px;
  color:var(--mut); border-radius:var(--radius); }
.nav-main a:hover { color:var(--text); background:var(--surf); }
.nav-main .current > a, .nav-main .active > a { color:var(--acc-ink);
  box-shadow:inset 0 -2px 0 var(--acc); }
.nav-main img, .nav-main .item-image, .nav-main svg {
  max-height:24px; width:auto; height:auto; vertical-align:middle;
}
.nav-main .image-title.visually-hidden {
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.nav-main ul ul { position:absolute; display:none; flex-direction:column; background:var(--surf);
  border:1px solid var(--line); border-radius:var(--radius); padding:6px; min-width:210px;
  box-shadow:var(--shadow); z-index:50; }
.nav-main li { position:relative; }
.nav-main li:hover > ul, .nav-main li:focus-within > ul { display:flex; }

.head-tools { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.theme-toggle, .nav-toggle { display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; background:transparent; border:1px solid var(--line);
  border-radius:var(--radius); color:var(--mut); cursor:pointer; }
.theme-toggle:hover, .nav-toggle:hover { color:var(--text); border-color:var(--line-strong); }
.theme-toggle .i-moon { display:none; }
[data-theme="dark"] .theme-toggle .i-sun { display:none; }
[data-theme="dark"] .theme-toggle .i-moon { display:block; }
.nav-toggle { display:none; flex-direction:column; gap:4px; }
.nav-toggle span { width:17px; height:1.5px; background:currentColor; }

/* ---------------- hero / layout ---------------- */
.hero { border-bottom:1px solid var(--line); }
.hero > .shell { padding-block:clamp(40px,6vw,74px); }
.crumbs { padding-top:16px; font-family:var(--ui); font-size:.8rem; color:var(--faint); }
.crumbs a { color:var(--mut); }

.vespers-layout { display:grid; gap:clamp(28px,4vw,52px); padding-block:clamp(32px,4vw,54px);
  align-items:start; grid-template-columns:minmax(0,1fr); }
@media (min-width:992px) {
  body.has-aside .vespers-layout { grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr); }
}
.col-main { min-width:0; }
.col-main > * + * { margin-top:1.4rem; }
.strip + .strip { margin-top:1.6rem; }

/* ---------------- sidebar modules ----------------
   Scoped to the aside and content strips ONLY, so these never
   collide with Bootstrap .card markup inside Kunena or CB.     */
.col-aside { display:flex; flex-direction:column; gap:22px; min-width:0; }
.col-aside > .card, .col-aside > .moduletable, .col-aside > .module,
.strip > .card, .strip > .moduletable {
  background:var(--surf); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px;
}
.col-aside > .card > h3, .col-aside > .moduletable > h3, .col-aside > .module > h3,
.strip > .card > h3, .strip > .moduletable > h3 {
  font-family:var(--ui); font-size:.68rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--acc); margin:0 0 12px; padding:0;
  background:none; border:0;
}
.col-aside > .card ul, .col-aside > .moduletable ul, .col-aside > .module ul {
  list-style:none; margin:0; padding:0;
}
.col-aside > .card li, .col-aside > .moduletable li, .col-aside > .module li {
  padding:7px 0; border-bottom:1px dotted var(--line); font-size:.98rem;
}
.col-aside li:last-child { border-bottom:0; }

/* ---------------- article content ----------------
   Scoped to Joomla content views so it never reaches the forum. */
.com-content-article, .item-page { max-width:68ch; }
.com-content-article__body, .item-page > div { font-size:1.09rem; line-height:1.72; }
.article-info { font-family:var(--ui); font-size:.78rem; color:var(--faint);
  letter-spacing:.04em; display:flex; flex-wrap:wrap; gap:14px; margin-bottom:1.4rem; }
.com-content-article__body blockquote, .item-page blockquote {
  margin:1.6em 0; padding-left:20px; border-left:2px solid var(--acc);
  color:var(--mut); font-style:italic;
}
.com-content-article__body pre, .item-page pre {
  background:var(--surf); border:1px solid var(--line); padding:14px 16px;
  border-radius:var(--radius); overflow-x:auto;
}
.com-content-article__body table, .item-page table { width:100%; border-collapse:collapse; }
.com-content-article__body table th, .com-content-article__body table td,
.item-page table th, .item-page table td {
  text-align:left; padding:9px 12px; border-bottom:1px solid var(--line);
}
.col-main .btn, .col-main a.btn, .col-main button.btn {
  font-family:var(--ui); font-size:.85rem; font-weight:600; letter-spacing:.02em;
  padding:11px 20px; border-radius:var(--radius); border:1px solid var(--line-strong);
  background:transparent; color:var(--text); cursor:pointer; display:inline-block;
}
.col-main .btn-primary { background:var(--acc); border-color:var(--acc); color:var(--on-acc); }

/* ---------------- footer ---------------- */
.site-foot { border-top:1px solid var(--line); background:var(--surf); }
.foot-inner { display:flex; flex-wrap:wrap; gap:32px; padding-block:34px;
  font-family:var(--ui); font-size:.86rem; color:var(--mut); }
.foot-col { flex:1 1 240px; min-width:0; }
.colophon { flex:1 1 100%; margin:0; padding-top:16px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--faint); }

/* ---------------- responsive ---------------- */
@media (max-width:900px) {
  .nav-toggle { display:inline-flex; margin-left:auto; }
  .nav-main { order:10; flex:1 1 100%; margin-left:0; display:none; padding-bottom:14px; }
  .nav-main.is-open { display:block; }
  .nav-main ul { flex-direction:column; gap:0; }
  .nav-main a { padding:11px 4px; border-bottom:1px solid var(--line); }
  .nav-main ul ul { position:static; display:flex; border:0; box-shadow:none;
    padding:0 0 0 14px; background:transparent; }
  .head-inner { flex-wrap:wrap; padding-block:12px; }
  .brand-text small { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   Kunena bridge — COLOUR ONLY.

   Aurelia owns its own layout, spacing and type sizing. Earlier
   this file also imposed fonts and sizes on the forum, which is
   what made elements overlap and outgrow their containers.
   Nothing here touches geometry.
   ============================================================ */
body.kunena-bridge #kunena {
  --bs-body-bg:var(--bg);
  --bs-body-color:var(--text);
  --bs-emphasis-color:var(--text);
  --bs-secondary-color:var(--mut);
  --bs-tertiary-color:var(--faint);
  --bs-border-color:var(--line);
  --bs-border-color-translucent:var(--line);
  --bs-primary:var(--acc);
  --bs-link-color:var(--acc-ink);
  --bs-link-hover-color:var(--acc);
  --bs-secondary-bg:var(--surf);
  --bs-tertiary-bg:var(--surf-2);
  --bs-heading-color:var(--text);
  color:var(--text);
}
body.kunena-bridge #kunena .card,
body.kunena-bridge #kunena .list-group-item {
  background-color:var(--surf); color:var(--text); border-color:var(--line);
}
body.kunena-bridge #kunena .table > :not(caption) > * > * {
  background-color:transparent; color:var(--text); border-bottom-color:var(--line);
}
body.kunena-bridge #kunena a { color:var(--acc-ink); text-decoration:none; }
body.kunena-bridge #kunena a:hover { color:var(--acc); }
body.kunena-bridge #kunena .btn-primary {
  background:var(--acc); border-color:var(--acc); color:var(--on-acc);
}
body.kunena-bridge #kunena .pagination .page-link {
  background:var(--surf); border-color:var(--line); color:var(--mut);
}
body.kunena-bridge #kunena .pagination .active .page-link {
  background:var(--acc); border-color:var(--acc); color:var(--on-acc);
}

/* ============================================================
   Legacy inline colour rescue (dark mode only).
   188 of 1,251 articles carry hard-coded colour; 159 specify
   black or near-black text, invisible on a dark ground.
   Light mode is untouched, so authors' colour still shows.
   Opt one article out with <div class="keep-colour">.
   ============================================================ */
[data-theme="dark"] .com-content-article__body :not(.keep-colour) [style*="color"],
[data-theme="dark"] .item-page :not(.keep-colour) [style*="color"] { color:inherit !important; }
[data-theme="dark"] .com-content-article__body :not(.keep-colour) [style*="background"],
[data-theme="dark"] .item-page :not(.keep-colour) [style*="background"] { background-color:transparent !important; }
[data-theme="dark"] .com-content-article__body font[color],
[data-theme="dark"] .item-page font[color] { color:inherit !important; }
[data-theme="dark"] .com-content-article__body img,
[data-theme="dark"] .item-page img { background-color:initial !important; }

/* ============================================================
   Joomla's "card" module chrome is .card > .card-header + .card-body,
   not > h3. Style the real markup, and keep it inside the aside so
   it never reaches Kunena's or Community Builder's own .card blocks.
   ============================================================ */
.col-aside > .card > .card-header,
.col-aside > .moduletable > .card-header,
.strip > .card > .card-header {
  font-family:var(--ui); font-size:.68rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--acc); margin:0 0 12px; padding:0;
  background:none; border:0;
}
.col-aside > .card > .card-body,
.col-aside > .moduletable > .card-body { padding:0; }
.col-aside > .card > .card-body > *:last-child { margin-bottom:0; }
.col-aside > .card ul, .col-aside > .moduletable ul { list-style:none; margin:0; padding:0; }
.col-aside > .card li, .col-aside > .moduletable li {
  padding:7px 0; border-bottom:1px dotted var(--line); font-size:.98rem;
}
.col-aside li:last-child { border-bottom:0; }

/* The login module ships Bootstrap inline utilities that squash it
   into a narrow column. Let it stack in the sidebar. */
.col-aside .mod-login__userdata,
.col-aside .mod-login__username,
.col-aside .mod-login__password,
.col-aside .mod-login__remember,
.col-aside .mod-login__submit,
.col-aside .mod-login__options { display:block !important; width:100%; margin-left:0 !important; }
.col-aside .mod-login__submit { margin-top:10px; }
.col-aside input[type="text"], .col-aside input[type="password"], .col-aside .input-group {
  width:100%; max-width:100%;
}

/* Kunena needs room. When the forum is the active component, drop the
   sidebar beneath it rather than squeezing a 900px-wide table into a
   700px column — that squeeze is what made it bleed sideways. */
body.is-com_kunena .vespers-layout { grid-template-columns:minmax(0,1fr) !important; }
body.is-com_kunena .col-aside { flex-direction:row; flex-wrap:wrap; gap:22px; }
body.is-com_kunena .col-aside > * { flex:1 1 280px; min-width:0; }
body.is-com_kunena #kunena { min-width:0; overflow-x:auto; }

/* ============================================================
   Kunena hardcodes Bootstrap's light utilities on its own bar:
     <nav class="navbar navbar-light bg-light shadow-lg rounded border">
   bg-light is a literal near-white, so in dark mode it renders a
   white slab on a dark ground. Repaint those utilities from the
   tokens. Colour only — Aurelia keeps its geometry.
   ============================================================ */
body.kunena-bridge #kunena .navbar,
body.kunena-bridge #kunena .navbar.bg-light,
body.kunena-bridge #kunena .bg-light {
  background-color:var(--surf) !important;
  border-color:var(--line) !important;
  box-shadow:var(--shadow) !important;
}
body.kunena-bridge #kunena .navbar .nav-link,
body.kunena-bridge #kunena .navbar-light .navbar-nav .nav-link { color:var(--mut); }
body.kunena-bridge #kunena .navbar .nav-link:hover,
body.kunena-bridge #kunena .navbar .nav-link.active,
body.kunena-bridge #kunena .navbar-light .navbar-nav .nav-link.active { color:var(--acc-ink); }
body.kunena-bridge #kunena .navbar-toggler {
  border-color:var(--line); color:var(--mut); background-color:transparent;
}
body.kunena-bridge #kunena .navbar-toggler-icon { filter:var(--toggler-filter, none); }
[data-theme="dark"] body.kunena-bridge #kunena .navbar-toggler-icon { filter:invert(1) opacity(.7); }
body.kunena-bridge #kunena .btn-light {
  background-color:var(--surf-2); border-color:var(--line); color:var(--text);
}
body.kunena-bridge #kunena .btn-light:hover { background-color:var(--surf); color:var(--text); }
body.kunena-bridge #kunena .dropdown-menu {
  background-color:var(--surf); border-color:var(--line); color:var(--text);
}
body.kunena-bridge #kunena .dropdown-item { color:var(--text); }
body.kunena-bridge #kunena .dropdown-item:hover,
body.kunena-bridge #kunena .dropdown-item:focus {
  background-color:var(--surf-2); color:var(--acc-ink);
}
body.kunena-bridge #kunena .offcanvas,
body.kunena-bridge #kunena .knav-offcanvas {
  background-color:var(--surf); color:var(--text);
}
body.kunena-bridge #kunena .text-muted,
body.kunena-bridge #kunena .text-secondary { color:var(--mut) !important; }
body.kunena-bridge #kunena .bg-white { background-color:var(--surf) !important; }

/* ============================================================
   Accent variants.

   Ground (light/dark) and highlight (green/red) are independent,
   so there are four combinations. These blocks redefine ONLY the
   accent tokens — never the ground — and are ordered so that
   dark+red wins on specificity.

   Green  : verdigris, oxidised bronze. The default.
   Red    : madder, a liturgical colour rather than an alert red.
   ============================================================ */
:root[data-accent="red"] {
  --acc:#9c2b2b; --acc-ink:#7a1f1f; --acc-warm:#8a5f36; --on-acc:#f7f8f7;
}
:root[data-theme="dark"][data-accent="red"] {
  --acc:#c98e82; --acc-ink:#dcaa9d; --acc-warm:#b8895a; --on-acc:#180f0e;
}

/* The highlight control sits beside the light/dark toggle. */
.accent-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; background:transparent; border:1px solid var(--line);
  border-radius:var(--radius); cursor:pointer; padding:0;
}
.accent-toggle:hover { border-color:var(--line-strong); }
.accent-toggle .dot {
  width:15px; height:15px; border-radius:50%; background:var(--acc);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
  transition:background-color .16s ease;
}

/* Feature block: recent sermons in the main column. */
.strip.feature > .card { background:transparent; border:0; padding:0; }
.strip.feature .card-header {
  font-family:var(--ui); font-size:.68rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--acc); background:none; border:0; padding:0;
  margin:0 0 14px; border-bottom:1px solid var(--line); padding-bottom:10px;
}
.strip.feature ul { list-style:none; margin:0; padding:0; }
.strip.feature li { padding:13px 0; border-bottom:1px solid var(--line); }
.strip.feature li:last-child { border-bottom:0; }
.strip.feature li a { font-family:var(--display); font-size:1.25rem; color:var(--text); }
.strip.feature li a:hover { color:var(--acc-ink); }

/* ============================================================
   Kunena: borders on controls, and a modest vertical tightening.
   VERTICAL padding only — horizontal/type changes are what made
   things overlap before, so nothing here touches width or size.
   ============================================================ */
body.kunena-bridge #kunena .btn {
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
}
body.kunena-bridge #kunena .btn:hover { border-color:var(--acc); }
body.kunena-bridge #kunena .btn-primary,
body.kunena-bridge #kunena .btn-primary:hover { border-color:var(--acc); }
body.kunena-bridge #kunena .btn-group > .btn { border-radius:0; }
body.kunena-bridge #kunena .btn-group > .btn:first-child { border-radius:var(--radius) 0 0 var(--radius); }
body.kunena-bridge #kunena .btn-group > .btn:last-child  { border-radius:0 var(--radius) var(--radius) 0; }

body.kunena-bridge #kunena .table > :not(caption) > * > * { padding-top:.5rem; padding-bottom:.5rem; }
body.kunena-bridge #kunena .card > .card-body { padding-top:.85rem; padding-bottom:.85rem; }
body.kunena-bridge #kunena .navbar { padding-top:.4rem; padding-bottom:.4rem; }

/* ============================================================
   "Temple at a Glance" — the foot band on the homepage.
   Facts and navigation only; the Temple's own words stay at the
   top of the page, in the featured article.
   ============================================================ */
.temple-band {
  border-top:1px solid var(--line); padding-top:26px; margin-top:14px;
  display:flex; flex-wrap:wrap; gap:26px; align-items:flex-end;
  justify-content:space-between;
}
.temple-stats {
  display:flex; flex-wrap:wrap; gap:0 34px; list-style:none; margin:0; padding:0;
  flex:1 1 460px; min-width:0;
}
.temple-stats li { padding:0; border:0; }
.temple-stats b {
  display:block; font-family:var(--display); font-weight:400; font-size:1.55rem;
  font-variant-numeric:tabular-nums; line-height:1.15; color:var(--text);
}
.temple-stats span {
  font-family:var(--ui); font-size:.64rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint);
}
.temple-actions { display:flex; gap:10px; margin:0; flex:0 0 auto; }
.temple-actions .btn {
  font-family:var(--ui); font-size:.85rem; font-weight:600; letter-spacing:.02em;
  padding:11px 20px; border-radius:var(--radius);
  border:1px solid var(--line-strong); color:var(--text); background:transparent;
}
.temple-actions .btn:hover { border-color:var(--acc); color:var(--acc-ink); }
.temple-actions .btn-primary { background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
.temple-actions .btn-primary:hover { background:var(--acc-ink); border-color:var(--acc-ink); }
@media (max-width:640px) {
  .temple-band { flex-direction:column; align-items:stretch; }
  .temple-stats { gap:16px 28px; }
  .temple-stats li { flex:1 1 40%; }
}

/* ============================================================
   Scrollbars.

   color-scheme (above) already makes the native bars pick the
   right light/dark palette. These rules take them the rest of
   the way onto the theme's own tokens, so the bar reads as part
   of the page rather than the operating system.

   Firefox uses scrollbar-width/-color; WebKit and Blink use the
   ::-webkit-scrollbar pseudos. Both are declared.
   ============================================================ */
body.vespers {
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
body.vespers ::-webkit-scrollbar { width:11px; height:11px; }
body.vespers ::-webkit-scrollbar-track { background:transparent; }
body.vespers ::-webkit-scrollbar-thumb {
  background-color:var(--line-strong);
  border-radius:8px;
  border:3px solid var(--bg);   /* inset look; matches whatever ground is behind */
}
body.vespers ::-webkit-scrollbar-thumb:hover { background-color:var(--mut); }
body.vespers ::-webkit-scrollbar-corner { background:transparent; }

/* Inner scrollers sit on a card, not the page ground. */
body.vespers .col-aside ::-webkit-scrollbar-thumb,
body.vespers pre::-webkit-scrollbar-thumb,
body.kunena-bridge #kunena ::-webkit-scrollbar-thumb { border-color:var(--surf); }
body.vespers pre, body.kunena-bridge #kunena {
  scrollbar-color:var(--line-strong) transparent;
}

/* ============================================================
   Seal fallback.

   The seal is painted with mask-image so it takes the accent
   colour. A browser without mask support would otherwise show a
   solid accent square, so fall back to the PNG itself.
   ============================================================ */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .seal {
    background-color:transparent;
    background:var(--seal) center/contain no-repeat;
  }
  [data-theme="dark"] .seal { filter:invert(1) brightness(1.6); }
}

/* ============================================================
   Kunena profile column — including the Temple's own multi-rank
   system (.rank-title / .rank-image, .primary-rank / .additional-rank).

   This is presentation only. The plugin's markup and logic are
   untouched; these rules just give the rank stack a hierarchy:
   the primary rank reads as the person's standing, additional
   ranks as the offices they hold.

   The badges are 70x20 PNGs with their own plates (Master is a
   dark red plate, Council a cream one), so they sit on either
   ground. Explicit sizing is set here because the additional-rank
   <img> tags carry no width/height attributes.
   ============================================================ */
body.kunena-bridge #kunena .profilebox { padding:0; margin:0; }
body.kunena-bridge #kunena .profilebox > li { padding:3px 0; border:0; }

body.kunena-bridge #kunena .profilebox .rank-title.primary-rank {
  font-family:var(--display); font-size:1.02rem; color:var(--text);
  line-height:1.2; padding-top:8px;
}
body.kunena-bridge #kunena .profilebox .rank-title.additional-rank {
  font-family:var(--ui); font-size:.6rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
  line-height:1.35; padding-top:7px;
}
/* Separate the offices from the standing above them. */
body.kunena-bridge #kunena .profilebox .rank-title.additional-rank:first-of-type {
  margin-top:8px; padding-top:11px; border-top:1px solid var(--line);
}
body.kunena-bridge #kunena .profilebox .rank-image img {
  width:70px; height:20px; max-width:100%; border-radius:2px;
  box-shadow:0 0 0 1px var(--line);
}
body.kunena-bridge #kunena .profilebox .rank-image.additional-rank img { opacity:.92; }

body.kunena-bridge #kunena .profilebox .topic-starter {
  font-family:var(--ui); font-size:.58rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--acc); margin-top:5px;
}
body.kunena-bridge #kunena .profilebox img[alt=""] { border-radius:var(--radius); }

/* Bootstrap's contextual badges are literal colours and ignore the
   theme; repaint the ones Kunena uses for presence. */
body.kunena-bridge #kunena .badge.bg-warning {
  background-color:var(--surf-2) !important; color:var(--mut) !important;
  border:1px solid var(--line); font-family:var(--ui); font-weight:600;
}
body.kunena-bridge #kunena .badge.bg-success {
  background-color:color-mix(in oklab, var(--acc) 22%, var(--surf)) !important;
  color:var(--acc-ink) !important; border:1px solid var(--line);
  font-family:var(--ui); font-weight:600;
}

/* Signature block: quieter than the message body. */
body.kunena-bridge #kunena .ksignature {
  color:var(--faint); font-size:.9em; line-height:1.5;
}
body.kunena-bridge #kunena .ksig hr { border-top:1px solid var(--line); margin:14px 0 8px; }