/* =====================================================================
   Words of God & Christ — Wikipedia Vector 2022 skin, dark mode
   Faithful replica of en.wikipedia.org's Vector skin in dark theme.
   Color tokens mirror Wikipedia's design-system dark palette.
   ===================================================================== */

/* ---- Design tokens (Wikipedia Vector 2022 dark mode) ---- */
:root{
  /* surfaces */
  --bg-page:#0b0b0b;            /* body / behind everything */
  --bg-content:#101418;          /* article content area */
  --bg-surface:#1a1a1a;          /* sidebar, headers */
  --bg-interactive:#27292d;      /* hover states */
  --bg-search:#101418;
  /* text */
  --color-base:#f8f9fa;
  --color-subtle:#a2a9b1;
  --color-faint:#54595d;
  /* links (Wikipedia dark) */
  --link:#6d8af2;
  --link-visited:#9b8af2;
  --link-new:#fc3;                /* red-link replacement in dark */
  --link-external:#6d8af2;
  /* borders */
  --border:#54595d;
  --border-subtle:#404244;
  --border-content:#101418;
  /* fonts — Wikipedia uses Linux Libertine for the wordmark & h1,
     a system sans for body. We approximate with Georgia/serif & system sans. */
  --font-serif:"Linux Libertine","Georgia","Times New Roman",serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Menlo","Consolas","DejaVu Sans Mono",monospace;
  /* layout */
  --sidebar-w:176px;
  --content-max:680px;
  --header-h:54px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg-page); color:var(--color-base);
  font-family:var(--font-sans); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none;}
a:visited{color:var(--link-visited);}
a:hover{text-decoration:underline;}
a.new{color:var(--link-new);}

/* ---- Top header (Wikipedia wordmark + search + user tools) ---- */
.mw-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  height:var(--header-h);
  padding:0 22px;
  background:var(--bg-page);
  border-bottom:1px solid var(--border);
}
.wordmark{display:flex; flex-direction:column; line-height:1; padding-top:2px;}
.wordmark .wm-logo{
  font-family:var(--font-serif); font-weight:400; font-size:26px;
  letter-spacing:.5px; color:var(--color-base);
}
.wordmark .wm-tag{
  font-family:var(--font-serif); font-style:italic; font-size:10.5px;
  color:var(--color-subtle); margin-top:1px;
}
.mw-search{
  flex:1; max-width:560px; position:relative;
}
.mw-search input{
  width:100%; height:34px; padding:0 36px 0 12px;
  border:1px solid var(--border); border-radius:2px;
  background:var(--bg-search); color:var(--color-base);
  font-family:var(--font-sans); font-size:13px;
}
.mw-search input::placeholder{color:var(--color-faint);}
.mw-search input:focus{outline:none; border-color:#72777d; box-shadow:inset 0 0 0 1px #3366cc;}
.mw-search .search-icon{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  color:var(--color-subtle); font-size:15px; pointer-events:none;
}
.mw-tools{display:flex; gap:0; align-items:center; margin-left:auto;}
.mw-tools a{
  color:var(--link); font-size:12.5px; padding:6px 10px;
  border-left:1px solid var(--border-subtle);
}
.mw-tools a:first-child{border-left:0;}

/* ---- Article tabs row (Vector: Article | Talk   Read | View history | Tools) ---- */
.mw-tabs{
  display:flex; align-items:flex-end; gap:0;
  padding:0 22px; margin-left:var(--sidebar-w);
  border-bottom:1px solid var(--border);
  background:var(--bg-page);
}
.mw-tabs .tab{
  font-size:13px; padding:8px 12px 6px; margin-bottom:-1px;
  border:1px solid transparent; border-bottom:0; border-radius:2px 2px 0 0;
  color:var(--link); cursor:default;
}
.mw-tabs .tab.selected{
  background:var(--bg-content); color:var(--color-base);
  border-color:var(--border); cursor:default;
}
.mw-tabs .tab.selected:hover{text-decoration:none;}
.mw-tabs .spacer{flex:1;}
.mw-tabs .tab.muted{color:var(--color-subtle);}

/* ---- Shell: sidebar + content ---- */
.mw-shell{display:flex; align-items:flex-start; padding:0 22px;}
.mw-sidebar{
  width:var(--sidebar-w); flex-shrink:0; padding:18px 0 40px 0;
  font-size:12.5px; position:sticky; top:calc(var(--header-h) + 36px);
  align-self:flex-start; max-height:calc(100vh - var(--header-h) - 36px); overflow:auto;
}
.sb-section{margin-bottom:14px;}
.sb-heading{
  font-size:11px; text-transform:none; color:#a2a9b1; font-weight:600;
  padding:0 12px; margin:0 0 4px; letter-spacing:0;
  /* Wikipedia sidebar headings are NOT uppercase; they are normal-case */
}
.sb-link{display:block; padding:4px 12px; color:var(--link); border-radius:2px;}
.sb-link:hover{background:var(--bg-interactive); text-decoration:none;}
.sb-link.muted{color:var(--color-subtle);}

/* ---- Content column ---- */
.mw-content-wrap{flex:1; min-width:0; padding:0 0 0 22px; display:flex; gap:24px; align-items:flex-start;}
.mw-main{
  flex:1; min-width:0; max-width:var(--content-max);
  background:var(--bg-content);
  border:1px solid var(--border);
  padding:0 0 14px; margin-top:18px;
}
.mw-body-header{
  padding:24px 24px 0;
}
.mw-main h1.firstHeading{
  font-family:var(--font-serif); font-weight:400; font-size:30px; line-height:1.2;
  margin:0 0 4px; color:var(--color-base); border:0;
}
.mw-subtitle{
  font-family:var(--font-serif); font-style:italic; font-size:14px;
  color:var(--color-subtle); margin:0 0 8px;
}
.mw-tagrow{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.mw-tag{
  font-size:11px; padding:1px 7px; border-radius:999px;
  border:1px solid var(--border-subtle); background:var(--bg-surface);
  color:var(--color-subtle); font-family:var(--font-sans);
}
.mw-tag.god{color:#8ab4f8; border-color:#2a4a7a;}
.mw-tag.christ{color:#f0a868; border-color:#5a3a1a;}

.mw-body{padding:8px 24px 0;}

/* article lead paragraph */
.lead{
  font-size:15px; line-height:1.65; color:var(--color-base); margin:0 0 14px;
}
.lead b{color:var(--color-base);}
.badge-speaker{display:inline-block; font-size:11px; padding:0 6px; border-radius:2px;
  font-weight:600; vertical-align:1px; font-family:var(--font-sans);}
.bg-god{background:#1a2a4a; color:#8ab4f8; border:1px solid #2a4a7a;}
.bg-christ{background:#3a2a1a; color:#f0a868; border:1px solid #5a3a1a;}

/* Wikipedia "hatnote" / methodology box -> styled like an ambox */
.ambox{
  margin:8px 0 14px; border:1px solid var(--border-subtle);
  border-left:4px solid #fc3; background:var(--bg-surface);
  padding:10px 14px; font-size:13px; color:var(--color-base);
  display:flex; gap:10px; align-items:flex-start;
}
.ambox .ambox-icon{font-size:18px; line-height:1.2;}
.ambox summary{cursor:pointer; font-weight:600; color:var(--color-base); list-style:none;
  display:flex; align-items:center; gap:6px;}
.ambox summary::-webkit-details-marker{display:none;}
.ambox .chev{color:var(--color-subtle); transition:transform .15s;}
.ambox[open] .chev{transform:rotate(90deg);}
.ambox .body{margin-top:10px;}
.ambox p{margin:8px 0;}
.ambox b{color:var(--color-base);}
.mono{font-family:var(--font-mono); font-size:.92em; background:rgba(255,255,255,.06);
  padding:0 4px; border-radius:2px;}

/* stats strip — styled like a compact infobox-row table */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--border-subtle); border:1px solid var(--border-subtle);
  margin:8px 0 18px; border-radius:2px; overflow:hidden;
}
.stats .stat{background:var(--bg-content); padding:12px 14px;}
.stats .stat .n{font-family:var(--font-serif); font-size:24px; font-weight:400; line-height:1.1; color:var(--color-base);}
.stats .stat .n.god{color:#8ab4f8;} .stats .stat .n.christ{color:#f0a868;}
.stats .stat .l{font-size:11.5px; color:var(--color-subtle); margin-top:4px;}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr);}}

/* h2 section headers — Wikipedia style: serif, bottom border */
.mw-main h2{
  font-family:var(--font-serif); font-weight:400; font-size:24px;
  margin:22px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--border-subtle);
  color:var(--color-base);
}
.mw-main h3{
  font-family:var(--font-serif); font-weight:400; font-size:18px;
  margin:18px 0 6px; color:var(--color-base);
}

/* ---- Filter toolbar (Wikipedia-styled) ---- */
.toolbar{
  position:sticky; top:var(--header-h); z-index:20;
  background:var(--bg-content); border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  margin:0 -24px 12px; padding:8px 24px;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.toolbar .seg{display:flex; border:1px solid var(--border); border-radius:2px; overflow:hidden;}
.toolbar .seg button{
  background:var(--bg-content); border:0; border-right:1px solid var(--border-subtle);
  padding:5px 12px; cursor:pointer; font-family:var(--font-sans); font-size:12.5px;
  color:var(--color-subtle);
}
.toolbar .seg button:last-child{border-right:0;}
.toolbar .seg button.on{background:#3366cc; color:#fff;}
.toolbar .seg button.on.christ{background:#a85a2a; color:#fff;}
.toolbar .seg button:hover:not(.on){background:var(--bg-interactive);}
.toolbar select{
  padding:5px 10px; border:1px solid var(--border); border-radius:2px;
  background:var(--bg-content); color:var(--color-base); font-size:12.5px; font-family:var(--font-sans);
}
.toolbar .count{margin-left:auto; font-size:12px; color:var(--color-subtle); font-variant-numeric:tabular-nums;}
.toolbar .field{
  flex:1; min-width:160px; position:relative;
}
.toolbar .field input{
  width:100%; height:30px; padding:0 10px; border:1px solid var(--border);
  border-radius:2px; background:var(--bg-search); color:var(--color-base);
  font-family:var(--font-sans); font-size:12.5px;
}
.toolbar .field input:focus{outline:none; border-color:#72777d; box-shadow:inset 0 0 0 1px #3366cc;}

/* ---- Right-side sticky Table of Contents (Vector 2022) ---- */
.toc{
  width:208px; flex-shrink:0; position:sticky; top:calc(var(--header-h) + 96px);
  align-self:flex-start; max-height:calc(100vh - var(--header-h) - 110px); overflow:auto;
  background:var(--bg-content); border:1px solid var(--border-subtle); border-radius:2px;
  padding:12px 0; margin-top:18px; font-size:12.5px;
}
.toc .toc-title{
  font-family:var(--font-serif); font-size:14px; font-weight:600;
  padding:0 14px 6px; margin:0; border-bottom:1px solid var(--border-subtle);
  color:var(--color-base);
}
.toc ul{list-style:none; margin:6px 0 0; padding:0;}
.toc li{margin:0;}
.toc a{
  display:block; padding:3px 14px 3px 18px; color:var(--link); line-height:1.4;
  border-left:2px solid transparent;
}
.toc a:hover{background:var(--bg-interactive); text-decoration:none;}
.toc a.g{border-left-color:#2a4a7a;}
.toc a.j{border-left-color:#5a3a1a;}
.toc a.active{background:var(--bg-interactive); color:var(--color-base);}
.toc-head{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--color-faint); padding:8px 14px 2px; font-weight:600;
}
@media(max-width:1100px){.toc{display:none;} .mw-content-wrap{gap:0;}}

/* ---- Quote list ---- */
section.book{scroll-margin-top:calc(var(--header-h) + 70px); margin-top:8px;}
section.book > h2{
  font-family:var(--font-serif); font-weight:400; font-size:20px;
  margin:20px 0 2px; padding-bottom:4px; border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
section.book .meta{font-family:var(--font-sans); font-size:11.5px; color:var(--color-subtle); font-weight:400;}
.quotes{display:flex; flex-direction:column; gap:0;}
.quote{
  display:grid; grid-template-columns:96px 1fr; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--border-subtle);
}
.quote .ref{
  font-family:var(--font-mono); font-size:11.5px; color:var(--color-subtle);
  text-align:right; padding-top:3px; white-space:nowrap;
}
.quote .ref a{color:var(--color-subtle);}
.quote .ref a:hover{color:var(--link); text-decoration:underline;}
.quote .body{font-size:14px; line-height:1.55; color:var(--color-base);}
.quote .body .sp{margin-right:6px;}
.quote mark{background:rgba(255,193,7,.28); color:inherit; border-radius:1px; padding:0 1px;}
.quote.christ .body{font-family:var(--font-serif); font-size:15.5px; line-height:1.55;}
.quote.continued .ref::after{content:" ⟶"; color:var(--color-faint);}
@media(max-width:560px){.quote{grid-template-columns:1fr; gap:2px;} .quote .ref{text-align:left;}}

.empty{padding:60px 0; text-align:center; color:var(--color-subtle);
  font-family:var(--font-serif); font-size:18px;}

/* ---- Footer: categories bar (Wikipedia style) ---- */
.mw-catlinks{
  margin:24px 0 0; padding:10px 24px; border-top:1px solid var(--border-subtle);
  font-size:12.5px; color:var(--color-subtle);
}
.mw-catlinks .cl-title{font-weight:600; color:var(--color-base); margin-bottom:2px;}
.mw-catlinks a{color:var(--link);}
.mw-footer-meta{
  padding:14px 24px 6px; font-size:11.5px; color:var(--color-subtle);
  border-top:1px solid var(--border-subtle); line-height:1.7;
}
.mw-footer-meta .mono{background:transparent; padding:0;}

/* mobile */
@media(max-width:900px){
  .mw-sidebar{display:none;}
  .mw-tabs{margin-left:0;}
  .mw-content-wrap{padding:0 12px;}
  .mw-main{margin-top:12px;}
  .mw-body-header{padding:18px 16px 0;}
  .mw-body{padding:8px 16px 0;}
  .toolbar{margin:0 -16px 12px;}
  .mw-search{display:none;}
  .mw-tools a{padding:6px 6px;}
}