/*
 * Bible Study Library — styles.
 * Every rule is scoped to .bsl, so nothing here changes the rest of your site.
 *
 * TO MATCH YOUR SITE: change the variables in the first block.
 *   - Use your theme's fonts:  --bsl-serif: inherit;  --bsl-sans: inherit;
 *   - Sticky header overlap:   raise --bsl-top (e.g. 80px) if your theme has a fixed header.
 */
.bsl{
  --bsl-bg:#FFFFFF; --bsl-surface:#FFFFFF; --bsl-ink:#1B2230; --bsl-muted:#5A6477; --bsl-rule:#DCE1E9;
  --bsl-accent:#1D5C86; --bsl-accent-soft:#E3EEF6; --bsl-gold:#8A6A1F; --bsl-gold-soft:#F4ECD8;
  --bsl-plum:#6B3D6E; --bsl-plum-soft:#F1E6F1; --bsl-green:#2F6B3A; --bsl-green-soft:#E2F0E4;
  --bsl-chip:#EEF1F5; --bsl-mark:#FFF1B8;
  --bsl-serif:"Spectral", Georgia, "Times New Roman", serif;
  --bsl-sans:"Source Sans 3", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bsl-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --bsl-top:0px;
  container-type:inline-size; container-name:bsl;
  color:var(--bsl-ink); font-family:var(--bsl-sans); font-size:16px; line-height:1.55;
  text-align:left; letter-spacing:normal; text-transform:none;
  max-width:1180px; margin-inline:auto;
}
/* WordPress admin bar sits over sticky elements when you are logged in */
.admin-bar .bsl{--bsl-top:32px}
@media screen and (max-width:782px){.admin-bar .bsl{--bsl-top:46px}}
@media screen and (max-width:600px){.admin-bar .bsl{--bsl-top:0px}}

/* Break out of a narrow content column: [bible_study_library wide="yes"] */
.bsl.bsl--wide{width:min(1180px, calc(100vw - 40px)); max-width:none; position:relative; left:50%; transform:translateX(-50%); margin-inline:0}

/* Defensive reset so theme styles don't leak in */
.bsl, .bsl *{box-sizing:border-box}
.bsl h2, .bsl h3, .bsl p, .bsl ol, .bsl ul, .bsl li, .bsl table, .bsl header, .bsl footer, .bsl nav, .bsl section{margin:0; padding:0; border:0; background:none; text-transform:none; letter-spacing:normal}
.bsl h2, .bsl h3{color:var(--bsl-ink); font-style:normal}
.bsl ul, .bsl ol{list-style:none}
.bsl a{color:var(--bsl-accent); box-shadow:none; border:0}
.bsl button, .bsl input, .bsl select, .bsl textarea{font-family:inherit; text-transform:none; letter-spacing:normal; box-shadow:none; min-height:0; line-height:1.2; margin:0}
.bsl [hidden]{display:none !important}
.bsl a:focus-visible, .bsl button:focus-visible, .bsl input:focus-visible, .bsl select:focus-visible, .bsl textarea:focus-visible{outline:2px solid var(--bsl-accent); outline-offset:2px; border-radius:4px}
.bsl .bsl-sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Header */
.bsl .bsl-top{display:grid; gap:10px; padding-bottom:20px; border-bottom:1px solid var(--bsl-rule); margin-bottom:16px}
.bsl .bsl-eyebrow{font:500 12px/1.2 var(--bsl-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--bsl-gold)}
.bsl .bsl-title{font:700 clamp(30px,5vw,44px)/1.1 var(--bsl-serif); text-wrap:balance}
.bsl .bsl-lede{color:var(--bsl-muted); max-width:70ch}
.bsl .bsl-progressline{display:flex; flex-wrap:wrap; gap:8px 18px; font:500 12.5px/1.3 var(--bsl-mono); color:var(--bsl-muted)}
.bsl .bsl-progressline b{color:var(--bsl-ink); font-weight:500}

/* Search and filters */
.bsl .bsl-controls{position:sticky; top:var(--bsl-top); z-index:5; background:var(--bsl-bg); padding-block:10px; margin-bottom:10px; display:grid; gap:10px; border-bottom:1px solid var(--bsl-rule)}
.bsl .bsl-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.bsl .bsl-row input[type=search]{flex:1 1 260px; min-width:0; width:auto; font-size:16px; padding:10px 14px; border:1px solid var(--bsl-rule); border-radius:8px; background:var(--bsl-surface); color:var(--bsl-ink); height:auto}
.bsl .bsl-row select{font-size:14.5px; padding:8px 10px; border:1px solid var(--bsl-rule); border-radius:8px; background:var(--bsl-surface); color:var(--bsl-ink); max-width:100%; width:auto; height:auto}
.bsl .bsl-count{font:500 12px/1 var(--bsl-mono); color:var(--bsl-muted)}
.bsl .bsl-chips{display:flex; flex-wrap:wrap; gap:6px}
.bsl .bsl-chip{font:600 13.5px/1 var(--bsl-sans); padding:7px 11px; border-radius:999px; border:1px solid var(--bsl-rule); background:var(--bsl-surface); color:var(--bsl-ink); cursor:pointer; width:auto}
.bsl .bsl-chip:hover{border-color:var(--bsl-ink); background:var(--bsl-surface); color:var(--bsl-ink)}
.bsl .bsl-chip[aria-pressed="true"]{background:var(--bsl-ink); color:var(--bsl-bg); border-color:var(--bsl-ink)}

/* Layout */
.bsl .bsl-layout{display:grid; grid-template-columns:220px minmax(0,1fr); gap:36px; align-items:start}
.bsl .bsl-toc{position:sticky; top:calc(var(--bsl-top) + 130px); max-height:calc(100vh - var(--bsl-top) - 150px); overflow:auto; font-size:14.5px}
.bsl .bsl-toc-h{font:500 11px/1 var(--bsl-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--bsl-muted); margin:0 0 10px}
.bsl .bsl-toc ol{display:grid; gap:1px}
.bsl .bsl-toc a{display:block; padding:4px 8px; border-radius:5px; color:var(--bsl-ink); text-decoration:none}
.bsl .bsl-toc a:hover{background:var(--bsl-accent-soft)}
.bsl .bsl-toc .bsl-grp{font:500 11px/1.2 var(--bsl-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--bsl-gold); padding:14px 8px 4px}

/* Intro panels */
.bsl .bsl-intro{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:30px}
.bsl .bsl-panel{background:var(--bsl-surface); border:1px solid var(--bsl-rule); border-radius:10px; padding:18px 20px}
.bsl .bsl-panel h3{font:600 19px/1.25 var(--bsl-serif); margin:0 0 8px}
.bsl .bsl-panel ol{list-style:decimal; padding-left:20px; display:grid; gap:5px}
.bsl .bsl-panel p{color:var(--bsl-muted); margin:0 0 8px}
.bsl .bsl-panel p:last-child{margin:0}
.bsl .bsl-panel--note{background:var(--bsl-gold-soft); border-color:transparent}

/* Sections and items */
.bsl .bsl-cat{margin-bottom:40px; scroll-margin-top:calc(var(--bsl-top) + 140px)}
.bsl .bsl-grouphead{font:500 12px/1.2 var(--bsl-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--bsl-gold); margin:52px 0 18px; padding-top:14px; border-top:2px solid var(--bsl-ink)}
.bsl .bsl-cat h2{font:600 25px/1.2 var(--bsl-serif); margin:0 0 4px; text-wrap:balance}
.bsl .bsl-sub{color:var(--bsl-muted); margin:0 0 12px; max-width:72ch}
.bsl ul.bsl-items{border-top:1px solid var(--bsl-rule)}
.bsl .bsl-toc li, .bsl .bsl-panel li{margin:0; padding:0}
.bsl .bsl-toc li{list-style:none}
.bsl ul.bsl-items > li{margin:0; list-style:none; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; padding:12px 2px; border-bottom:1px solid var(--bsl-rule); align-items:start}
.bsl .bsl-body{display:grid; gap:4px; min-width:0}
.bsl .bsl-name{font-weight:700; font-size:16.5px}
.bsl .bsl-name a{text-decoration:none}
.bsl .bsl-name a:hover{text-decoration:underline}
.bsl .bsl-url{font:500 12px/1.3 var(--bsl-mono); color:var(--bsl-muted); word-break:break-all; margin-left:6px}
.bsl .bsl-desc{max-width:78ch}
.bsl .bsl-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.bsl .bsl-tag{font:500 11px/1 var(--bsl-mono); padding:4px 7px; border-radius:4px; background:var(--bsl-chip); color:var(--bsl-muted)}
.bsl .bsl-tag.t-free{background:var(--bsl-accent-soft); color:var(--bsl-accent)}
.bsl .bsl-tag.t-trad{background:var(--bsl-gold-soft); color:var(--bsl-gold)}
.bsl .bsl-tag.t-anc{background:var(--bsl-plum-soft); color:var(--bsl-plum)}
.bsl .bsl-prog{font:600 12.5px/1 var(--bsl-sans); padding:7px 10px; border-radius:6px; border:1px solid var(--bsl-rule); background:var(--bsl-surface); color:var(--bsl-muted); cursor:pointer; white-space:nowrap; min-width:104px; text-align:center; width:auto}
.bsl .bsl-prog:hover{border-color:var(--bsl-muted); background:var(--bsl-surface); color:var(--bsl-ink)}
.bsl .bsl-prog[data-s="1"]{background:var(--bsl-gold-soft); color:var(--bsl-gold); border-color:transparent}
.bsl .bsl-prog[data-s="2"]{background:var(--bsl-green-soft); color:var(--bsl-green); border-color:transparent}
.bsl li.is-done .bsl-name a{color:var(--bsl-muted)}
.bsl mark{background:var(--bsl-mark); color:inherit; border-radius:2px; padding:0}
.bsl .bsl-empty{padding:30px; text-align:center; color:var(--bsl-muted)}

/* Every book of the Bible */
.bsl .bk-bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:4px 0 18px;font-size:14.5px}
.bsl .bk-bar select{font:inherit;font-size:14.5px;padding:6px 8px;border:1px solid var(--bsl-rule);border-radius:6px;background:var(--bsl-surface);color:var(--bsl-ink);width:auto;height:auto;max-width:100%}
.bsl .bk-legend{font:500 12px/1.3 var(--bsl-mono);color:var(--bsl-muted)}
.bsl .bk-legend b{color:var(--bsl-ink);font-weight:500}
.bsl .bk-group{margin:0 0 22px}
.bsl .bk-h{font:600 18px/1.3 var(--bsl-serif);margin:0 0 2px;color:var(--bsl-ink)}
.bsl .bk-h span{font:500 12px/1 var(--bsl-mono);color:var(--bsl-muted);margin-left:6px}
.bsl .bk-note{color:var(--bsl-muted);font-size:14.5px;margin:0 0 10px;max-width:78ch}
.bsl .bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));column-gap:22px;border-top:1px solid var(--bsl-rule)}
.bsl .bk-row{display:flex;align-items:center;gap:8px;padding:7px 2px;min-width:0;margin:0}
.bsl .bk-read{width:16px;height:16px;accent-color:var(--bsl-green);flex:none;margin:0;cursor:pointer}
.bsl .bk-name{flex:1;min-width:0;text-decoration:none;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsl .bk-name:hover{text-decoration:underline}
.bsl .bk-item.done .bk-name{color:var(--bsl-muted);text-decoration:line-through}
.bsl .bk-ch{font:500 11.5px/1 var(--bsl-mono);color:var(--bsl-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.bsl .bk-cans{display:inline-flex;gap:2px;flex:none}
.bsl .bk-c{font:500 10px/1 var(--bsl-mono);width:16px;height:16px;display:inline-grid;place-items:center;border-radius:3px;color:var(--bsl-muted);opacity:.35;border:1px solid var(--bsl-rule)}
.bsl .bk-c.on{background:var(--bsl-accent-soft);color:var(--bsl-accent);border-color:transparent;opacity:1}

.bsl .bk-item{min-width:0;border-bottom:1px solid var(--bsl-rule)}
.bsl .bk-item.open{grid-column:1/-1;background:var(--bsl-surface)}
.bsl .bk-hasnote{color:var(--bsl-gold);font-size:13px;flex:none}
.bsl .bk-more, .bsl .bsl-wnote{font:600 12px/1 var(--bsl-sans);padding:5px 8px;border:1px solid var(--bsl-rule);border-radius:5px;background:var(--bsl-surface);color:var(--bsl-accent);cursor:pointer;width:auto;flex:none}
.bsl .bk-more:hover, .bsl .bsl-wnote:hover{border-color:var(--bsl-accent);background:var(--bsl-surface);color:var(--bsl-accent)}
.bsl .bk-item.open .bk-more{background:var(--bsl-accent);color:var(--bsl-surface);border-color:var(--bsl-accent)}
.bsl .bsl-wnote{margin-top:6px}
.bsl .bk-panel{padding:4px 4px 16px 26px;display:grid;gap:8px}
.bsl .bk-links{display:flex;flex-wrap:wrap;gap:6px}
.bsl .bk-link{font-size:14px;line-height:1.2;padding:6px 10px;border-radius:999px;background:var(--bsl-accent-soft);color:var(--bsl-accent);text-decoration:none}
.bsl .bk-link:hover{text-decoration:underline}
.bsl .bk-none{color:var(--bsl-muted);font-size:14px}
.bsl .bk-nlabel{font:500 11.5px/1.3 var(--bsl-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bsl-muted);display:block;margin:6px 0 4px}
.bsl textarea.bsl-notes{display:block;width:100%;max-width:100%;min-height:84px;height:auto;font:15px/1.5 var(--bsl-sans);padding:8px 10px;border:1px solid var(--bsl-rule);border-radius:8px;background:var(--bsl-surface);color:var(--bsl-ink);resize:vertical}
.bsl table.bsl-plan tr.wnotes td{background:var(--bsl-chip)}

/* 52-week plan table */
.bsl .bsl-plan-wrap{overflow-x:auto; border:1px solid var(--bsl-rule); border-radius:10px; background:var(--bsl-surface)}
.bsl table.bsl-plan{border-collapse:collapse; width:100%; min-width:720px; font-size:15px; margin:0; border:0; table-layout:auto}
.bsl table.bsl-plan th, .bsl table.bsl-plan td{border:0; border-bottom:1px solid var(--bsl-rule); background:none; text-align:left; vertical-align:top}
.bsl table.bsl-plan th{font:500 11px/1.2 var(--bsl-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--bsl-muted); padding:10px 12px; background:var(--bsl-surface)}
.bsl table.bsl-plan td{padding:10px 12px}
.bsl table.bsl-plan tr:last-child td{border-bottom:0}
.bsl table.bsl-plan td.wk{font:500 13px/1.3 var(--bsl-mono); color:var(--bsl-gold); white-space:nowrap; font-variant-numeric:tabular-nums}
.bsl table.bsl-plan td.rd{font-weight:600}
.bsl table.bsl-plan td.dp{color:var(--bsl-muted)}
.bsl table.bsl-plan tr.phase td{background:var(--bsl-chip); font:500 11px/1 var(--bsl-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--bsl-muted); padding:8px 12px}
.bsl table.bsl-plan tr.wdone td.rd{text-decoration:line-through; color:var(--bsl-muted)}
.bsl .bsl-wkbox{width:18px; height:18px; accent-color:var(--bsl-green); cursor:pointer; margin:0}
.bsl .bsl-note{font:500 12px/1.3 var(--bsl-mono); color:var(--bsl-muted); margin-top:2px}
.bsl .bsl-footer{margin-top:50px; padding-top:16px; border-top:1px solid var(--bsl-rule); color:var(--bsl-muted); font-size:14px; display:grid; gap:6px}

/* Narrow layouts: responds to the space the library has, not the whole screen */
@container bsl (max-width: 860px){
  .bsl .bsl-layout{grid-template-columns:minmax(0,1fr)}
  .bsl .bsl-toc{position:static; max-height:none; border:1px solid var(--bsl-rule); border-radius:10px; padding:14px; background:var(--bsl-surface)}
  .bsl .bsl-toc ol{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .bsl .bsl-toc .bsl-grp{grid-column:1/-1}
  .bsl .bsl-controls{position:static}
  .bsl .bsl-cat{scroll-margin-top:calc(var(--bsl-top) + 20px)}
}
@container bsl (max-width: 520px){
  .bsl ul.bsl-items > li{grid-template-columns:minmax(0,1fr)}
  .bsl .bsl-prog{justify-self:start}
}
/* Older browsers without container queries fall back to screen width */
@supports not (container-type:inline-size){
  @media (max-width:860px){
    .bsl .bsl-layout{grid-template-columns:minmax(0,1fr)}
    .bsl .bsl-toc{position:static; max-height:none}
    .bsl .bsl-controls{position:static}
  }
}

/* Optional dark theme, used by the Claude page (class bsl--auto-dark) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bsl.bsl--auto-dark{
    color-scheme:dark;
    --bsl-bg:#12161D; --bsl-surface:#1A2029; --bsl-ink:#E6E9EF; --bsl-muted:#9BA5B6; --bsl-rule:#2B3340;
    --bsl-accent:#7DB8E3; --bsl-accent-soft:#1D2D3C; --bsl-gold:#D9B865; --bsl-gold-soft:#2C2616;
    --bsl-plum:#D3A6D6; --bsl-plum-soft:#2E2230; --bsl-green:#8FCB98; --bsl-green-soft:#1C2E20;
    --bsl-chip:#232A35; --bsl-mark:#5A4A12;
  }
}
:root[data-theme="dark"] .bsl.bsl--auto-dark{
  color-scheme:dark;
  --bsl-bg:#12161D; --bsl-surface:#1A2029; --bsl-ink:#E6E9EF; --bsl-muted:#9BA5B6; --bsl-rule:#2B3340;
  --bsl-accent:#7DB8E3; --bsl-accent-soft:#1D2D3C; --bsl-gold:#D9B865; --bsl-gold-soft:#2C2616;
  --bsl-plum:#D3A6D6; --bsl-plum-soft:#2E2230; --bsl-green:#8FCB98; --bsl-green-soft:#1C2E20;
  --bsl-chip:#232A35; --bsl-mark:#5A4A12;
}