@font-face { font-family:'Crimson Pro'; font-style:normal; font-weight:200 900; font-display:block; /* swap jumps it; */
  src:url(/dist/bible/crimson-pro.woff2) format('woff2'); /* https://fonts.gstatic.com/s/crimsonpro/v28/q5uDsoa5M_tv7IihmnkabARboYE.woff2 */
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family:'Crimson Pro'; font-style:italic; font-weight:400; font-display:block; /* 19Kb better than 50Kb as italic and bold are for google only*/
  src:url(/dist/bible/crimson-pro-italic-400.woff2) format('woff2'); /* https://fonts.gstatic.com/s/crimsonpro/v28/q5uSsoa5M_tv7IihmnkabAReu49Y_Bo-HVKMBi6Ue6s8fNE.woff2 */
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}/* 50Kb https://fonts.gstatic.com/s/crimsonpro/v28/q5uBsoa5M_tv7IihmnkabARekYNwDQ.woff2     vs  19Kb  https://fonts.gstatic.com/s/crimsonpro/v28/q5uSsoa5M_tv7IihmnkabAReu49Y_Bo-HVKMBi6Ue6s8fNE.woff2     */

/* 1. THEME DEFINITIONS (The "Engine") */
:root                           { --bg:#F9F7F2; --bg-s:#fffdf9e6; --text:#252525; --text-m:#333333; --brand:#000000; --accent:#704214; --accentCC:#6b4621; --accentX:#eee; --border:#eee; }
:root[data-theme="basalt"]      { --bg:#121212; --bg-s:#1e1e1e; --text:#e0e0e0; --text-m:#a0a0a0; --brand:#ffffff; --accent:#bb86fc; --border:#333333; }
:root[data-theme="papyrus"]     { --bg:#f4ecd8; --bg-s:#fbf5e4; --text:#433422; --text-m:#706351; --brand:#433422; --accent:#964b00; --border:#e3d6b6; }
:root[data-theme="nordic"]      { --bg:#2e3440; --bg-s:#3b4252; --text:#eceff4; --text-m:#d8dee9; --brand:#88c0d0; --accent:#81a1c1; --border:#4c566a; }
:root[data-theme="evergreen"]   { --bg:#0a1a14; --bg-s:#12261e; --text:#d1d9d1; --text-m:#8a9a8a; --brand:#4ade80; --accent:#2d5a45; --border:#1e362d; }


html { scroll-behavior:smooth; scroll-padding-top:1.5em; }
body { font-family:"Crimson Pro", Georgia, sans-serif, serif; font-size:1.125rem; line-height:1.73; letter-spacing:0.5px; }
body { background-color:var(--bg); color:var(--text); margin:0; }

/* defaults by property */
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre,ol,ul,nav { margin:5px 5px 13px; }  .hide { display:none !important; }

/* defaults by tags */
h1,h2,h3,h4 { letter-spacing:0; line-height:1.3; font-weight:570; } h1 { font-size:1.9em; } h2 { font-size:1.57em; margin-top:1.3em; margin-bottom:0.7em; } h3,h4 { font-size:1.33em; margin-top:1em; }
h1,h2,h3 {  background:linear-gradient(to right, var(--accent), transparent 70%) no-repeat; background-size:70% 1.7px; background-position-y:100%; padding-bottom:4px; }
nav { white-space:nowrap; scrollbar-width:none; overflow-x:overlay; ul,ol {display:flex; align-items:center; justify-content:space-evenly; list-style:none; padding:0; margin:0; } }

b,strong { font-weight:570; } i b, i strong { font-weight:bold; }  input,button { font-family:inherit; }

ul,ol{ font-size:0.97em; }ul li::marker { color:var(--accent); } ol li::marker { color:var(--accent); font-weight:700; font-size:0.9em; } li > ul {list-style-type:disc;} li > ol { list-style-type:lower-alpha; }

a { text-decoration:none; text-underline-offset:4px; color:var(--accent); border-color:var(--border); border-style:solid; border-width:0; } a:hover { text-decoration:underline; color:var(--accent); }
p a { border-bottom:1px solid #ddd; color:var(--accent) }

table { line-height:1.5; color:var(--text-m); font-size:0.95em;      tr:hover td { color:var(--text); }  
 th { font-weight:570; text-transform:uppercase; letter-spacing:1.5px; font-size:0.85em; padding:0.5em 1em;
  background:linear-gradient(to right, var(--accent) 30%, transparent 100%) no-repeat bottom; background-size:100% 2px;
 } th {  background:var(--bg-s); }
 td { padding:0.3em 0.8em; border-bottom:1px solid var(--border); }
}
input[type="search"] { border:none; border-radius:20px; outline:none; width:97%; padding:7px 12px; background-repeat:no-repeat; background-position:right center; background-color:var(--bg-s); background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='4.5'/><path d='M10 10l3 3'/></svg>"); }

header {
  input[type="search"]:focus { width:150px; transition:0.3s; } input[type="search"] { width:90px; }
}



/* THE MACRO CONTAINERs */
body>header, main>article, main>aside, body>aside, body>footer { box-sizing:border-box; position:relative; }
body { display:flex; flex-wrap:wrap; justify-content:center; }
body > header { flex:0 0 100%; order:-10; margin-bottom:0.5em; }
body > aside  { flex:0 1 360px; order:-1; }
body > footer { flex:0 0 100%; order:10; }

body > main { display:flex; flex-grow:1; min-width:70vw; }
main > article { flex:0 1 800px; min-width:0; border-width:0;}
main > aside   { flex:0 1 360px; }
body>aside, main>* { padding:0 10px; }

@media (max-width:1600px) {
  body > aside { flex-basis:100%; order:5; }
}

@media (max-width:800px) {
  body > main { flex-direction:column; }
  main > aside { flex-basis:0; }
}


/* section specific */
.filters { margin:1.5em 0;
  button {  background:none; border:none; padding:7px 12px; cursor:pointer; font-size:0.8em; letter-spacing:1.2px; }
  input { width:130px; background-color:unset; border-top:1px solid var(--border); background-image:unset; }
  nav { display:flex; flex-wrap:nowrap; gap:10px; overflow:overlay; scrollbar-width:none; }
  nav:first-child { border-bottom:1px solid var(--border); button { border-bottom:2px solid transparent; } button.active { border-bottom-color:var(--accent);} }
  nav:last-child button { border:1px solid var(--border); border-radius:15px; }
  button:hover {  background-color:var(--bg-s); } nav button.active { color:var(--accent); }
}

.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1em; margin-bottom:1em;
  & > div { display:flex; flex-direction:column; position:relative; padding:12px 1em 1em; background:var(--bg-s); border:1px solid var(--border); border-radius:12px; } & > div:hover { border-color:var(--accent); }
  & > h2, & > p { grid-column:1 / -1; } h2, h3 { font-size:1.15em; margin:0 0 5px; z-index:1; }  h2 { font-size:1.5em; }
  a { color:var(--text); text-decoration:none; } a:hover{ color:var(--accent); } h2 a::after, h3 a::after {content:""; inset:0; position:absolute; }
  p {font-size:0.75em; color:var(--text-m); line-height:1.5; margin-bottom:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} &.noclamp p, .noclamp p { -webkit-line-clamp:none; }
  .ref, .type { margin-top:-12px; order:-1; position:absolute; right:1em; display:flex; gap:7px; div { display:flex; gap:7px; } }
  span { font-size:0.67em; color:var(--accent); background:var(--bg); padding:3px 9px; border-radius:4px; border:1px solid var(--border); }
  .tags { margin-top:0.5em; display:flex; gap:7px; overflow:overlay; scrollbar-width:none; z-index:1; white-space:nowrap; span { color:var(--text); } }
  .nocard { grid-column:1 / -1; background:unset; border-width:0; padding-left:5px;  h2 { padding-left:2px; }  }
  & > p, .nocard p { border-left:4px solid var(--accent); padding-left:1em; font-size:0.95em; -webkit-line-clamp:none; }
}


#gSearchDiv{ display:none; position:fixed; z-index:999; top:0; left:0; width:100%; height:100%; background:#fff; overflow:overlay;
  input { width:90%; padding:10px 1em; margin:1em 0em 0 1em; font-size:1.2em; border:1px solid var(--border); }
  .gsc-control-cse { padding:0; margin:0; } .gsc-refinementsArea{ padding:0; margin-top:5px; }
  .gsc-refinementBlock { display:flex; flex-wrap:nowrap;  max-width:92vw;  overflow:overlay;scrollbar-width:none;  justify-content:space-evenly; white-space:nowrap; }
  .gsc-refinementBlock > div:first-child { width:19px; overflow-x:clip; }
  .gsc-refinementHeader { border-bottom:1px solid var(--border); } .gcsc-more-maybe-branding-root { display:none }
}

.bible-nav { position:relative; input { text-transform:lowercase; position:relative; z-index:1; font-size:1em; border:0; } }
.bible-nav::after { content:attr(data-suggestion); text-transform:lowercase; position:absolute; left:9px; top:12px; color:#ddd; pointer-events:none; }

#bchs { gap:1px; padding: 0 4px;  div { display:flex; flex-wrap:wrap; gap:1px;  }
  button,a { border-radius:0; width:45px; margin:0; text-transform:capitalize; text-align:center; font-size:1.15em; letter-spacing:1px; padding:10px 0; } button:hover{ color:var(--accent); }
}

/* Body Content starts */
body>header{
 display:flex; gap:10px; overflow-x:overlay; scrollbar-width:none; align-items:center; padding:10px; background-color:var(--bg-s); border-bottom:1px solid var(--border);  font-size:1.2em;
 a[rel="home"]{ font-size:1.2em; span:first-child { margin-right:5px; font-weight:700; } span:last-child {  color:var(--text); padding-left:5px; border-left:1.5px solid var(--border); } }
 nav { flex-basis:100%; margin-top:0; margin-bottom:0; ul { column-gap:10px; font-size:0.8em; letter-spacing:1.2px; } }

 form { display:flex; border:1px solid var(--border); border-radius:20px; padding:2px 8px;
  input { border:none; outline:none; width:80px; } input:focus { width:200px; transition:0.3s; }
 } 
}

/* Article */
article nav { display:flex; flex-wrap:wrap; gap:7px; font-size:0.8em; }
article nav>a { border-radius:50px; border-width:1px; padding:2px 17px; background-color:var(--bg-s); color:var(--text-m); text-transform:capitalize }

article>header, article .header{
 display:flex; flex-wrap:wrap; 
 
 #breadcrumb { display:flex; gap:0.7rem; padding-top:5px; font-size:0.75rem; text-transform:uppercase; letter-spacing:1.5px; margin-right:1em; }
 #breadcrumb li:not(:last-child)::after { content:"-"; margin-left:0.5rem; opacity:0.5; font-family:auto; }

.share { width:100px; overflow-x:overlay; display:flex; scrollbar-width:none; column-gap:5px;
  button {font-size:0; line-height:0;  cursor:pointer;border:1px solid var(--border);padding:4px 8px;background-color:#ffffff33;min-width:35px;height:43px;background-repeat:no-repeat;background-position:center;background-size:18px 18px;display:block;}
  button:nth-child(n+4) { display:none; } &:hover button { display:block; } button:hover { cursor:pointer; border-color:var(--accent); display:block; }
  button[data-action="cp"]:active { transform: scale(0.5);transition: 1s; }

  button[data-action="cp"] { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M8 4v12a2 2 0 002 2h8a2 2 0 002-2V7.24a2 2 0 00-.58-1.41L16.17 2.58A2 2 0 0014.76 2H10a2 2 0 00-2 2z"%3E%3C/path%3E%3Cpath d="M16 18v2a2 2 0 01-2 2H6a2 2 0 01-2-2V9a2 2 0 012-2h2"%3E%3C/path%3E%3C/svg%3E'); }
  button[data-action="os"] { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="18" cy="5" r="3"%3E%3C/circle%3E%3Ccircle cx="6" cy="12" r="3"%3E%3C/circle%3E%3Ccircle cx="18" cy="19" r="3"%3E%3C/circle%3E%3Cpath d="M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98"%3E%3C/path%3E%3C/svg%3E'); }
  button[data-action="wa"] { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"%3E%3C/path%3E%3C/svg%3E'); }
  button[data-action="x"] { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 4l11.7 16H20L8.3 4H4z"%3E%3C/path%3E%3Cpath d="M4 20l6.7-6.8m3-3L20 4"%3E%3C/path%3E%3C/svg%3E'); }
  button[data-action="li"] { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"%3E%3C/path%3E%3Ccircle cx="4" cy="4" r="2"%3E%3C/circle%3E%3C/svg%3E'); }
  button[data-action="pt"] { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9V2h12v7M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2M6 14h12v8H6z"%3E%3C/path%3E%3C/svg%3E'); }
} h1~.share{ order:-5; position:absolute; right:1em; margin-top:0.7em; }

 h1~.share{ order:-5; position:absolute; right:1em; margin-top:0.7em; }
 h1, h1 ~ * { flex-basis:100%; }
 p { border-left:4px solid var(--accent); padding-left:1em; } p:first-of-type { font-style:italic; } 
}
article>nav { padding:1em 0; justify-content:space-evenly; }

article>section { }
article footer { time { margin-right:0.5em; } }

body>footer { display:flex; flex-wrap:wrap; padding:1em; margin-top:1em; background:var(--bg-s); border-top:1px solid var(--border);
 section { flex:1 1 180px; }
 strong { display:block; font-size:0.8em; text-transform:uppercase; letter-spacing:1.7px; color:var(--accent); margin-bottom:7px; }
 ul { list-style:none; padding-left:0.3em; margin:0; } li { margin-bottom:0.3em; font-size:0.8em; }
 a { color:var(--text-m); }
 p { flex-basis:100%; padding-top:1.3em; text-align:center; font-style:italic; font-size:0.9em; border-top:1px solid var(--border); }
 button { z-index:1; position:fixed; bottom:0px; right:3px; cursor:pointer; width:35px; height:35px; border-radius:100%; background:var(--bg); border:1px solid var(--border); }
}

/* Template specific */
.bible {
 .studies{ p { padding:0.5em; box-shadow:1px 1px 3px 1px var(--border); } }
 header>ol, #outline ol { list-style-type:none; padding-left:1em; }
 article>nav>a:last-child {background-color:var(--accent); color:var(--accentX); font-weight:570;}

}

.bBible main {
 
 header form {
  padding:1.3em; background-color:var(--bg-s); border:1px solid var(--border); border-radius:8px;
  h2 { margin-top:0 }
  fieldset { border:none; margin-bottom:0.7em;
   label { cursor:pointer; padding:0.5em 0.9em; border-radius:5em; margin-left:0.3em; background:var(--bg); }
   input {display:none;}  label:has(input:checked) { background:var(--accent); color:var(--bg-s); }
  }
  legend { padding-bottom:0.55em; font-size:0.85em; text-transform:uppercase; letter-spacing:1px; }
  .search-box { display:flex; flex-wrap:wrap; padding-left:0.9em; 
   label { padding-bottom:0.55em; font-size:0.85em; text-transform:uppercase; letter-spacing:1px; flex-basis:100%; }
   input { margin-left:0.55em; flex:1; border:none; padding:10px; background:var(--bg); } 
   button { margin-left:0.55em; font-weight:570; background:var(--accentCC); color:var(--accentX); opacity:0.9; border:none; padding:0 1em; cursor:pointer; }
  }
 }
 header nav>a { border-radius:5px; padding:0.1em 0.77em; } header nav>strong { padding-top:0.2em; }
 header>nav:nth-of-type(3), header fieldset:nth-of-type(2) { display:none }

 article article { padding-top:1em;
  h4 { margin-top:3px;color:var(--accent);} p { order:1; margin-left:9px; }
  header ~ nav { padding-top:0; justify-content:start; ol { flex-wrap:wrap; gap:2px; text-align:center; justify-content:start; }
   li a { display:block; background-color:var(--bg-s); color:var(--accentCC); min-width:3.7em; font-size:1.3em; }
  }
 }
}  /* EOF .bBible  silo:/bible */

.bChapter { 
 #verses { padding:0 0.5em;
  figcaption { float:left; } a { padding-right:12px; }
 }
}

.bVerse{
  h1,h2,h3,h4 { letter-spacing:1px; }
  table { display:block; white-space:nowrap; overflow-x:overlay; scrollbar-width:none;}
  th:first-child, td:first-child { position:sticky; left:0; background:var(--bg-s); z-index:2; }
  table:first-of-type {
    th:nth-child(7), td:nth-child(7) { position:sticky; left:0; background:var(--bg-s); z-index:2; }
  }
}



/* ASIDE */
main > aside, body > aside { display:flex; flex-direction:column; row-gap:1em;
  section { border:1px solid var(--border); border-radius:7px; padding:0.8em;} section:hover { border-color:var(--accent); }
  strong, legend {
    display:block; font-size:0.75em; letter-spacing:1.2px; font-weight:500;
    margin-bottom:7px; border-bottom:1px solid var(--border); padding-bottom:4px;
  }

  fieldset { border:none; padding:0; margin:0; }
  input { 
    width:100%; box-sizing:border-box; padding:10px; border:1px solid var(--border); 
    background-image:unset !important; border-radius:5px; background-color:transparent !important; color:var(--text); font-family:inherit; margin-top:7px;
  }

  button { 
    width:100%; margin-top:8px; padding:10px; border:1px solid var(--border); border-radius:5px;
    background:var(--bg); color:var(--text); cursor:pointer; 
  }

  input[type="radio"] { display:none; }
  label { 
    flex:1; text-align:center; font-size:0.75em; padding:5px; 
    background:var(--bg); border:1px solid var(--border); cursor:pointer; border-radius:5px;
  }
  label:has(input:checked) {  color:var(--accent); }

  nav { display:flex; flex-wrap:wrap; gap:7px;font-size:0.75em;
    a { text-transform:capitalize; padding:4px 7px; border:1px solid var(--border); border-radius:5px; 
      background:var(--bg); color:var(--text-m);
    } a:hover { background:var(--accent); color:var(--bg); text-decoration:none; }
  }
}






/* ----------------   Mobile Starts ----------------------- */
@media (max-width:600px) {

body { font-size:1.07rem; }
body>header{ a[rel="home"] { font-size:1em; } form { border-width:0; padding:0; } input[type="search"] { width:0; } }



}




/* ----------- Todo Pending ----------------------- */
                            
    #toc { position:sticky; top:1rem; max-height:80vh; overflow-y:auto; scrollbar-width:thin; }





  /* 2. SIDEBAR CONTAINER */
  #toc {
    display:flex;
    flex-direction:column;
    border-left:1px solid var(--border);
    padding:10px 0;
  }

  /* 3. BASE LINK STYLE */
  #toc a {
    display:block;
    text-decoration:none;
    color:var(--text-m);
    line-height:1.4;
    padding:6px 16px;
    transition:all 0.2s ease-in-out;
    border-left:3px solid transparent;
    margin-left:-1px; /* Align with container border */
  }

  /* 4. HIERARCHY LEVELS */
  .l0 { 
    font-weight:700; 
    color:var(--text); 
    font-size:1rem; 
  }

  .l1 { 
    padding-left:28px !important; 
    font-size:0.95rem; 
    opacity:0.9; 
  }

  .l2 { 
    padding-left:42px !important; 
    font-size:0.9rem; 
    opacity:0.8; 
  }

  /* 5. INTERACTIVE STATES */
  #toc a:hover {
    background-color:var(--bg-s);
    color:var(--accent);
  }

  /* Use this class if you implement an Intersection Observer later */
  #toc a.active {
    color:var(--brand);
    font-weight:700;
    border-left-color:var(--accent);
    background-color:var(--bg-s);
  }

  /* 6. MOBILE TWEAKS */
  @media (max-width:768px) {
    #toc a {
      padding-top:8px;
      padding-bottom:8px;
      font-size:1.1rem; /* Larger touch targets for mobile */
    }
  }
bad {
    /* 5. FORMS & INPUTS (The "Jump" & "Search") */
    









  /* Container styling */
  #toc {
      display:flex;
      flex-direction:column;
      gap:4px;
      border-left:1px solid var(--border);
      padding:10px 0;
  }

  /* Link styling */
  .toc-link {
      text-decoration:none;
      color:var(--text-m);
      font-size:0.95rem;
      line-height:1.4;
      padding:6px 15px;
      padding-left:calc(var(--d) * 1.2rem + 15px);
      transition:all 0.2s ease;
      border-radius:0 4px 4px 0;
      position:relative;
  }

  /* Hierarchy markers (dots for sub-items) */
  .toc-link[style*="--d:1"]::before,
  .toc-link[style*="--d:2"]::before {
      content:"•";
      position:absolute;
      left:calc(var(--d) * 1.1rem);
      opacity:0.3;
  }

  /* Hover & Active states */
  .toc-link:hover {
      background:var(--bg-s);
      color:var(--accent);
      padding-left:calc(var(--d) * 1.2rem + 20px); /* Subtle slide effect */
  }

  .toc-link.active {
      color:var(--brand);
      font-weight:600;
      border-left:3px solid var(--accent);
  }
}