:root {



  --bg:#0b1020; --card:#363636; --text:#e5e7eb; --muted:#a3a3a3; --accent:#3b82f6;
  --border:#1f2937; --pos:#16a34a; --neg:#dc2626;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}
.header{position:sticky;top:0;z-index:10;display:flex;gap:12px;align-items:center;padding:12px 14px;background:rgba(11,16,32,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);display: grid;}
.stage-title{font-weight:700;font-size:18px;margin-right:auto}
.controls{display:flex;gap:10px;align-items:center}
.stage-picker,.search,button{background:#0b1222;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 10px}
.search{min-width: 245px;}
toggle{display:flex;gap:6px}
.toggle button{cursor:pointer}
.toggle button.active{background:var(--accent);border-color:var(--accent)}
.container{display:grid;grid-template-columns:  480px 1fr;gap:10px;padding:10px}
.tree{display:flex;flex-direction:column;gap:8px}
.section{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.section-header{padding:10px 12px;font-weight:600;cursor:pointer;background:#0f172a;border-bottom: 1px solid #848688;}  
.section-body{display:none;padding:8px}
.sub{margin-top:8px}
.sub .section-header{font-weight:500}
.item{
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 8px;
  margin:6px 0;
  background:#0c1428;
  cursor:pointer;
}
.item:hover{border-color:#334155}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.badge{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:#0b1222}
.badge.pos{color:#b7f7c5;border-color:#1e7f3a;background:rgba(22,163,74,.12)}
.badge.neg{color:#ffd8b6;border-color:#b45309;background:rgba(220,38,38,.12)}
.detail{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 10px;min-height:60vh}
.detail h2{margin:0 0 6px 0}
.meta{color:var(--muted);font-size:12px;display:flex;gap:10px;flex-wrap:wrap}
.summary{margin:10px 0;font-size:14px}
.detail .article{line-height:1.5em;}
ul{margin:6px 0 0 18px}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}
.modal.open{display:flex}
.modal-card{width:min(960px,92vw);max-height:86vh;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px}
.modal-close{text-align:right;margin-bottom:8px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--border);padding:8px;text-align:left;vertical-align:top}
.footer{padding:10px;color:var(--muted);font-size:12px}

/* Toggle glyphs for sections */

.section-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom: 4px;}
.section-header::after{
  content:'+';
  color:var(--muted);
  font-weight:700;
  margin-left:2px;
}
.section.open > .section-header::after{
  content:'–';
  color:var(--text);
}

/* Title clamping for tree items (max 2 lines) */
.item h4{
  margin:0 0 2px 0;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Compact meta and badges */
.item .meta{display:inline; 
  font-size:11px;
  color:var(--muted);
}
.badges{margin:4px 0}

/* Slightly tighter spacing in tree */
.section-body{padding:6px}
.item{padding:8px 8px}
.tree{gap:6px}

/* Narrow tree a bit for more detail width but still readable */
.container{grid-template-columns:340px 1fr}

.section-header .count{
  color:var(--muted);
  font-weight:600;
  font-size:12px;
  margin-left:auto;
  margin-right:8px;
}

/* Align count to the right side of headers */
.section-header{display:flex;align-items:center;justify-content:space-between}
.section-header .count{margin-left:auto;margin-right:6px;color:var(--muted);font-weight:500;font-size:12px}

/* Evidence node compression */
.item{padding:6px 6px;margin:4px 0}
.item h4{
  font-size:13px;
  line-height:1.2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.item .meta{display:inline; font-size:11px;color:var(--muted)}
.badges{gap:4px;margin:2px 0}
.tree{gap:4px}

/* Expand tree width modestly for clarity */
.container{grid-template-columns: 300px 1fr;}

/* New flex row to keep badges + meta on same line */
.item .badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.item .meta{display:inline; 
  font-size:11px;
  color:var(--muted);
  margin-left:6px;
}


.badges-meta-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  overflow:hidden;
}
.badges-meta-row .badges{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}
.badges-meta-row .sep{
  color:var(--muted);
  opacity:.8;
  flex:0 0 auto;
  margin:0 2px;
}
.badges-meta-row .meta{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1 1 auto;
}


/* Scripture blocks */
.scripture h3{ margin-top:14px; }
.scripture-block{
  border:1px solid var(--border);
  background:#0c1428;
  border-radius:8px;
  padding:10px;
  margin:8px 0;
}
.scripture-label{ font-weight:700; margin-bottom:6px; }
.scripture-ref{ color:var(--text); opacity:.85 }
.scripture-ver{ color:var(--muted); font-weight:600 }
.scripture-text{
  white-space:pre-wrap;
  line-height:1.5;
  margin-bottom:6px;
}
.scripture-copy{ color:var(--muted); font-size:11px }

/* Scripture module */
.scripture-card {
    border: 1px solid #1f2937;
    background: gainsboro;
    border-radius: 10px;
    padding: 10px;
    margin: 5px 2px;
    color: black;
    font-size: 16px;
}



.scripture-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.scripture-ref{font-weight:700}
.scripture-picker select{background:#0b1222;border:1px solid #1f2937;color:#e5e7eb;border-radius:8px;padding:4px 8px}
.scripture-text{white-space:pre-wrap;line-height:1.5}
.scripture-copy{color:#9ca3af;font-size:11px;margin-top:6px}

scripture-global-picker{margin-left:12px; display:inline-flex; align-items:center; gap:6px}

.controls .filter{ margin-right:14px; font-size:12px; opacity:.9 }
.controls .filter input{ vertical-align:middle; margin-right:6px }
.card-foot.warn{ color:#ffb4b4 }
.scripture-cards {
    margin: 0;
    padding: 2px 14px;
    border-radius: 10px;
    position: relative;
    contain: layout paint;
}
.scripture-cards.is-updating {
    isolation: isolate;
}
.scripture-transition-overlay {
    position: absolute;
    top: 2px;
    left: 14px;
    right: 14px;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity 180ms ease;
}
.scripture-transition-overlay.fade-out {
    opacity: 0;
}
.scripture-card {
    border: 1px solid #1f2937;
    background: #c7c8c5;
    border-radius: 10px;
    padding: 10px;
    margin: 5px 2px;
    color: black;
    font-size: 16px;
}
.scripture-used{ font-size:12px; opacity:.75 }
/* v1.41 ensure collapse + selectors */
.section-body{display:none}
.section.open > .section-body{display:block}

#header-controls select,
#ev-controls-mount select,
select.sc-picker {
  background: gainsboro !important;
  color: #000 !important;
  border: 1px solid #4b5563;
}
#header-controls select option,
#ev-controls-mount select option,
select.sc-picker option {
  color: #000 !important;
  background: gainsboro !important;
}


.section-title {
  display: block;
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  color: var(--text, #e5e7eb);
}


.external-source {
  display: block;
  background: var(--card, #12182a);
  border: 1px solid var(--border, #1f2937);
  border-radius: 0.75rem;
  padding: 0.75em 1em;
  margin: 0.5em 0;
  font-size: 0.95rem;
  color: var(--text, #e5e7eb);
}

/* (removed pinned-header block) */
:root { --hdr-h: 64px; }

.header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--hdr-h);
}

html, body { height: 100%; overflow: hidden; }

.container {
  margin-top: var(--hdr-h);
  height: calc(100vh - var(--hdr-h));
  overflow: hidden;
  display: grid;
}

aside.tree, .section.tree, #tree {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

main.detail, .section.detail, #detail {
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

.section.tree .item .badges .badge:not(.bf) { display: none !important; }
.section.tree .item .meta { display: none !important; }

/* === ROLLBACK: restore normal header + page scroll === */
html, body { overflow: auto !important; height: auto !important; }

.header {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  z-index: auto !important;
  height: auto !important;
}

.container {
  margin-top: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* panes follow normal flow again */
aside.tree, .section.tree, #tree,
main.detail, .section.detail, #detail {
 /* overflow: visible !important; */
  -webkit-overflow-scrolling: auto !important;
}

/* === Declutter tree: hide enriched + meta === */
.section.tree .item .badges .badge:not(.bf) { display: none !important; }
.section.tree .item .meta { display: none !important; }

/* === Detail article content blocks === */
.detail .summary, 
.detail .article .detail-article-block {
  margin: 10px 0;
  font-size: 18px;
  background: gainsboro;
  border-radius: 10px;
  padding: 20px;
  color: black;
}

/* === RESTORE: Evidence detail title h2 default === */
.detail .section-header h2,
.detail h2 {
  text-align: center !important;
  margin-bottom: 8px !important;
  padding: 6px 12px !important;
  font-weight: 725 !important;
  border: 3px solid rgba(0,0,0,.20) !important;
  background: linear-gradient(180deg, #eef2f7 0%, #d6dbe3 100%) !important;
  color: #0b0e12 !important;
  border-radius: 8px !important;
}
@media (prefers-color-scheme: dark) {
  .detail .section-header h2,
  .detail h2 {
    border-color: rgba(255,255,255,.20) !important;
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
    color: #e5e7eb !important;
  }
}


/* === RESTORE: Detail section headings === */
.detail .article .detail-section-heading,
.detail .detail-section-heading,
.detail .summary .detail-section-heading {
  background: linear-gradient(141deg, rgb(7 18 35 / 46%), #1522358a) !important;
  display: block !important;
  position: relative !important;
  font-weight: 700 !important;
  color: inherit !important;
  padding: 3px 10px !important;
  margin: 2px !important;
  border-radius: 12px !important;
  border-style: outset !important;
  border-color: #43b2da3d !important;
  align-content: center !important;
  text-align: center !important;
}
/* Base: keep bullets tidy inside article blocks */
.detail-article-block ul,
.detail-article-block ol {
  /* kill UA padding-left: 40px; and control indent ourselves */
  padding-left: 1.15rem;
  margin: 0.5rem 0;           /* normal lists look fine too */
  line-height: 1.35;
}

.detail-article-block li { margin: 0.25rem 0; }

/* Tight mode: when a list is the primary content of the block,
   pull it up/down to visually hug the rounded container */
.detail-article-block {
  --block-pad-y: 20px;        /* matches your block padding */
}

/* If the list starts the block, lift it into the padding area */
.detail-article-block > ul:first-child,
.detail-article-block > ol:first-child {
  margin-top: calc(-1 * var(--block-pad-y) + 8px);
}

/* If the list ends the block, pull bottom up too */
.detail-article-block > ul:last-child,
.detail-article-block > ol:last-child {
  margin-bottom: calc(-1 * var(--block-pad-y) + 8px);
}

/* If the block contains ONLY a list, do both ends */
.detail-article-block > ul:only-child,
.detail-article-block > ol:only-child {
  margin-top: calc(-1 * var(--block-pad-y) + 8px);
  margin-bottom: calc(-1 * var(--block-pad-y) + 8px);
}

/* Optional: make bullets read a touch stronger on dark bg */
@media (prefers-color-scheme: dark) {
  .detail-article-block li::marker { color: #cbd5e1; }
}
/* ---------- Compact article layout ---------- */

/* Tighter section ribbons */
.detail .detail-section-heading {
  padding: 4px 10px !important;
  margin: 6px 0 4px !important;
  font-size: 16px;             /* was chunkier before */
}

/* Tighter content blocks */
.detail .article .detail-article-block {
  --block-pad-y: 14px;         /* vertical padding variable */
  --block-pad-x: 16px;
  margin: 6px 0;               /* less gap between blocks */
  padding: var(--block-pad-y) var(--block-pad-x);
  font-size: 14px;
  background: gainsboro;
  border-radius: 10px;
  color: black;
}

/* Base list normalization inside blocks */
.detail-article-block ul,
.detail-article-block ol {
  padding-left: 1.15rem;       /* kill UA 40px padding; keep modest indent */
  margin: 0.4rem 0;            /* small natural margin for mixed content */
  line-height: 1.35;
}
.detail-article-block li { margin: 0.2rem 0; }

/* HUG MODE: when a list sits at the block edges, pull it into the padding
   (this recreates the negative-margin look you liked, but is tunable).    */
.detail-article-block > ul:first-child,
.detail-article-block > ol:first-child {
  margin-top: calc(-0.9 * var(--block-pad-y)) !important;
}
.detail-article-block > ul:last-child,
.detail-article-block > ol:last-child {
  margin-bottom: calc(-0.8 * var(--block-pad-y)) !important;
}
.detail-article-block > ul:only-child,
.detail-article-block > ol:only-child {
    margin-top: calc( var(--block-pad-y)) !important;
    margin-bottom: calc(var(
  --block-pad-y)) !important;
    line-height: 1em;
    padding: 0px 20px;
}

/* Optional: slightly stronger bullets on dark theme */
@media (prefers-color-scheme: dark) {
  .detail-article-block li::marker { color: #cbd5e1; }
}

/* === DATA Patch v1.9: Evidence article blocks look & spacing === */
#evidence-viewer-pane .detail .article .detail-article-block {
    --block-pad-y: 14px;
    --block-pad-x: 16px;
    margin: 6px 0;
    padding: var(--block-pad-y) var(--block-pad-x);
    font-size: 18px;
    background: gainsboro;
    border-radius: 10px;
    color: black;
    display: inline-block;
    width: 100%;
    line-height:1rm;
}
/* === End Patch v1.9 === */

/* === DATA Hotfix v1.9.1: Restore heading styling order/scope === */
/* Evidence item titles — keep chrome ONLY on section headers inside EV detail */
#evidence-viewer-pane .detail .detail-scroll .section-header h2 {
  text-align: center !important;
  margin-bottom: 8px !important;
  padding: 6px 12px !important;
  font-weight: 725 !important;
  border: 3px solid rgba(0,0,0,.20) !important;
  background: linear-gradient(180deg, #eef2f7 0%, #d6dbe3 100%) !important;
  color: #0b0e12 !important;
  border-radius: 8px !important;
}

/* Stage landing/intro title — clean white (no evidence chrome) */
#evidence-viewer-pane .detail .detail-scroll .intro-title h2 {
  text-align: left !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-weight: 700 !important;
  border: none !important;
  background: none !important;
  color: #ffffff !important;
  border-radius: 0 !important;
}

/* Defensive: never apply evidence chrome to ANY h2 outside EV */
.app-pane:not(#evidence-viewer-pane) h2 {
  border: none !important;
  background: none !important;
  color: inherit !important;
  padding: revert-layer;
  border-radius: 0 !important;
}
/* === End Hotfix v1.9.1 === */
/* === DATA Patch v1.9.4: Subtle thin heading style === */

/* Evidence item titles: keep chrome but thinner, darker */
#evidence-viewer-pane .detail .detail-scroll .section-header h2 {
  text-align: center !important;
  margin-bottom: 6px !important;
  padding: 4px 8px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  background: rgba(0,0,0,0.25) !important;
  color: #e0e6f0 !important;
  border-radius: 6px !important;
  font-size: 15px !important;
}

/* Stage landing/intro title: sleek thin white text */
#evidence-viewer-pane .detail .detail-scroll .intro-title h2,
#stage-title, .stage-title {
  color: #e0e6f0 !important;
  font-weight: 650;
  font-size: 18px !important;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
/* === DATA Patch v1.9.5: Thin dark scrollbars for tree/detail panes === */
#treeScrollFix,
#detailScrollFix {
  scrollbar-width: thin;
  scrollbar-color: rgba(60,60,70,0.5) transparent;
}

/* WebKit browsers (Chrome, Safari, Edge) */
#treeScrollFix::-webkit-scrollbar,
#detailScrollFix::-webkit-scrollbar {
  width: 6px;
}

#treeScrollFix::-webkit-scrollbar-track,
#detailScrollFix::-webkit-scrollbar-track {
  background: transparent;
}

#treeScrollFix::-webkit-scrollbar-thumb,
#detailScrollFix::-webkit-scrollbar-thumb {
  background-color: rgba(60,60,70,0.5);
  border-radius: 4px;
}

/* === DATA Patch v1.9.7: Evidence title capitalization + meta styling === */

/* Evidence item titles: gainsboro card, centered, rounded, title-cased */
#evidence-viewer-pane #detailScrollFix > h2,
#evidence-viewer-pane .detail .detail-scroll .section-header > h2 {
  text-align: center !important;
  margin-bottom: 8px !important;
  padding: 6px 12px !important;
  font-weight: 650 !important;
  background: gainsboro !important;
  color: #0b0e12 !important;
  border: 1px solid rgba(0,0,0,0.2) !important;
  border-radius: 8px !important;
  text-transform: capitalize !important; /* presentational title case */
}

/* Guard: if an h2 is the stage title, keep it clean white (no card) */
#evidence-viewer-pane #detailScrollFix > h2:has(#stage-title) {
  background: none !important;
  border: none !important;
  color: #fff !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
}

/* Evidence item metadata block under the title */
#evidence-viewer-pane .detail .meta {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  margin-top: 4px;
  display: block; /* normalize against any flex elsewhere */
  text-decoration: underline;
}
/* === End Patch v1.9.7 === */

/* === DATA Patch v1.9.8: let JS control title casing (no CSS transform) === */
#evidence-viewer-pane #detailScrollFix > h2,
#evidence-viewer-pane .detail .detail-scroll .section-header > h2 {
  text-transform: uppercase important; /* JS will set smart Title Case - overrode rob */
}