/* research.bijbelsdenken.nl reader — dark, leesbaar, responsief */
:root{
  --bg:#13171e; --surface:#1b212b; --surface-2:#222a36; --panel:#1f2733;
  --text:#e9ecf1; --text-soft:#c7cedb; --muted:#9aa6b6; --faint:#6f7b8d;
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.16);
  --accent:#d6a268; --accent-2:#e8b985; --accent-soft:rgba(214,162,104,.16);
  --link:#86c5ee;
  --maxread:46rem;
  /* Elementor-font-fallbacks die de popover-CSS verwacht */
  --e-global-typography-primary-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --e-global-typography-text-font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-padding-top:66px}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--e-global-typography-primary-font-family);
  font-size:17px; line-height:1.6; -webkit-text-size-adjust:100%;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none!important}

/* ---------- menubalk (topbar) ---------- */
.topbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px;
  padding:8px 16px; background:rgba(19,23,30,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
.topbar-menu{display:none; width:40px; height:40px; flex:0 0 auto; border:1px solid var(--border-2);
  background:var(--surface-2); color:var(--text); border-radius:9px; font-size:18px; cursor:pointer; align-items:center; justify-content:center}
.topbar-search{flex:1; min-width:0; max-width:440px; display:flex; align-items:center; background:var(--surface);
  border:1px solid var(--border-2); border-radius:10px; padding:0 10px}
.topbar-search .ccp-bijbel-search-label{display:flex; align-items:center; gap:8px; width:100%; cursor:text}
.topbar-search .ccp-bijbel-search-icon{color:var(--muted); display:flex; flex:0 0 auto}
.topbar-search input{flex:1; min-width:0; background:transparent; border:0; color:var(--text); font-size:15px; padding:9px 0; outline:none}
.topbar-actions{display:flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto}
.tb-new{position:relative}
.tb-new-btn{background:var(--accent); color:#1a1206; font-weight:700; border:0; border-radius:9px; padding:8px 13px; font-size:14px; cursor:pointer; white-space:nowrap}
.tb-new-btn:hover{background:var(--accent-2)}
.tb-new-menu{position:absolute; top:calc(100% + 6px); right:0; z-index:50; display:flex; flex-direction:column; gap:4px;
  background:var(--surface-2); border:1px solid var(--border-2); border-radius:12px; padding:7px; min-width:220px; box-shadow:0 14px 34px rgba(0,0,0,.55)}
.tb-new-menu button, .tb-new-menu a{display:block; text-align:left; width:100%; background:transparent; border:0; color:var(--text);
  font-size:15px; padding:11px 13px; border-radius:8px; cursor:pointer; text-decoration:none}
.tb-new-menu button:hover, .tb-new-menu a:hover{background:var(--accent-soft); color:var(--accent-2); text-decoration:none}
.tb-vragen{position:relative; color:var(--text-soft); font-size:14px; padding:8px 10px; border-radius:9px; text-decoration:none; white-space:nowrap}
.tb-vragen:hover{background:var(--surface-2); color:var(--text); text-decoration:none}
.tb-vragen .fab-badge{position:static; margin-left:6px; box-shadow:none; display:inline-grid}
.tb-icon{width:38px; height:38px; flex:0 0 auto; border:1px solid var(--border-2); background:var(--surface-2);
  color:var(--text-soft); border-radius:9px; cursor:pointer; display:grid; place-items:center}
.tb-icon:hover{color:var(--text); border-color:var(--accent)}
.tb-icon.muted{color:var(--muted)}
.tb-icon.muted .bell-slash{opacity:1 !important}
/* voorpagina-melding nieuwe vragen */
.dash-notice{display:block; background:var(--accent-soft); border:1px solid transparent; color:var(--accent-2);
  border-radius:12px; padding:12px 16px; margin:6px 0 16px; text-decoration:none; font-weight:600}
.dash-notice:hover{text-decoration:none; border-color:var(--accent)}
/* live fade-toast */
.rbd-toast{position:fixed; right:16px; bottom:18px; z-index:60; max-width:320px; display:block;
  background:var(--surface); border:1px solid var(--border-2); border-left:3px solid var(--accent);
  border-radius:12px; padding:11px 14px; text-decoration:none; box-shadow:0 12px 34px rgba(0,0,0,.45);
  opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease}
.rbd-toast.show{opacity:1; transform:translateY(0)}
.rbd-toast b{display:block; color:var(--text); font-size:14px}
.rbd-toast span{display:block; color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.thread-backspot{display:inline-block; margin-top:8px; font-size:13px; color:var(--accent-2); text-decoration:none}
.thread-backspot:hover{text-decoration:underline}
@media (max-width:900px){ .rbd-toast{left:12px; right:12px; bottom:12px; max-width:none} }

/* ---------- layout ---------- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:310px; z-index:40;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; transition:transform .22s ease;
}
.sidebar-head{padding:16px 16px 10px; border-bottom:1px solid var(--border)}
.brand{font-weight:700; font-size:18px; color:var(--text); display:flex; align-items:baseline; gap:8px}
.brand span{font-weight:500; font-size:12px; color:var(--accent); letter-spacing:.08em; text-transform:uppercase}
.nav{flex:1; overflow:auto; padding:8px 6px 24px; overscroll-behavior:contain}
.sidebar-foot{padding:10px 16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted)}
.sidebar-foot a{color:var(--muted)}

.content{margin-left:310px; min-height:100vh; padding:0}
.doc{max-width:var(--maxread); margin:0 auto; padding:40px 28px 120px}

.menu-toggle{
  display:none; position:fixed; top:12px; left:12px; z-index:50;
  width:42px; height:42px; border-radius:10px; border:1px solid var(--border-2);
  background:var(--surface-2); color:var(--text); font-size:20px; cursor:pointer;
}
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:35}

/* ---------- nav ---------- */
.nav details{margin:0}
.nav summary{
  list-style:none; cursor:pointer; padding:6px 10px; border-radius:8px;
  color:var(--text-soft); font-size:14px; user-select:none;
}
.nav summary::-webkit-details-marker{display:none}
.nav summary:hover{background:var(--surface-2)}
.nav-section>summary{font-weight:700; color:var(--text); font-size:13px; letter-spacing:.04em; text-transform:uppercase; margin-top:6px}
.nav-folder>summary{font-weight:600; color:var(--text-soft)}
.nav summary::before{content:"▸"; color:var(--faint); display:inline-block; width:1em; transition:transform .15s}
.nav details[open]>summary::before{transform:rotate(90deg)}
.nav-children{padding-left:12px; border-left:1px solid var(--border); margin-left:10px}
.nav-page{
  display:block; padding:5px 10px; border-radius:8px; font-size:14px;
  color:var(--muted); text-decoration:none;
}
.nav-page:hover{background:var(--surface-2); color:var(--text); text-decoration:none}
.nav-page.active{background:var(--accent-soft); color:var(--accent-2); font-weight:600}

/* ---------- back button ---------- */
.back-btn{
  position:sticky; top:0; z-index:5; margin:0 auto; display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); color:var(--text-soft); border:1px solid var(--border-2);
  border-radius:999px; padding:7px 14px; font-size:14px; cursor:pointer; backdrop-filter:blur(6px);
}
.back-btn:hover{color:var(--text); border-color:var(--accent)}
.content{position:relative}
.doc-tools{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 10px}
.doc>.back-btn{display:none} /* niet gebruikt hier */
main>.back-btn{position:fixed; top:14px; right:16px; z-index:30}

/* ---------- leestypografie ---------- */
.doc{font-family:var(--e-global-typography-text-font-family); color:var(--text); font-size:1.06rem; line-height:1.72}
.doc h1{font-size:1.9rem; line-height:1.2; margin:.2em 0 .6em; color:#fff; font-family:var(--e-global-typography-primary-font-family)}
.doc h2{font-size:1.42rem; margin:1.7em 0 .5em; color:#fff; font-family:var(--e-global-typography-primary-font-family); border-bottom:1px solid var(--border); padding-bottom:.2em}
.doc h3{font-size:1.18rem; margin:1.4em 0 .4em; color:var(--text); font-family:var(--e-global-typography-primary-font-family)}
.doc h4{font-size:1.04rem; margin:1.2em 0 .3em; color:var(--text-soft)}
.doc p{margin:0 0 1.05em}
.doc ul,.doc ol{margin:0 0 1.05em; padding-left:1.4em}
.doc li{margin:.25em 0}
.doc blockquote{margin:1.2em 0; padding:.4em 1em; border-left:3px solid var(--border-2); color:var(--text-soft); background:var(--surface)}
.doc hr{border:0; border-top:1px solid var(--border); margin:2em 0}
.doc strong{color:#fff}
.doc em{color:var(--text-soft)}
.doc code{background:var(--surface-2); padding:.1em .4em; border-radius:5px; font-size:.92em}
.doc a.wikilink{color:var(--accent-2); border-bottom:1px dotted rgba(214,162,104,.6); text-decoration:none}
.doc a.wikilink:hover{border-bottom-style:solid}
.doc a.wikilink-missing{color:var(--muted); border-bottom:1px dotted var(--faint); cursor:help}
.doc a.xref-sub{color:var(--text-soft); border-bottom:1px dotted var(--faint)}
.sub-anchor{display:block; height:0}

/* ---------- callouts ---------- */
.callout{margin:1.2em 0; border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:10px; background:var(--surface); overflow:hidden}
.callout>summary{list-style:none; cursor:pointer; padding:.6em .9em; font-weight:600;
  color:var(--accent-2); font-family:var(--e-global-typography-primary-font-family); user-select:none}
.callout>summary::-webkit-details-marker{display:none}
.callout>summary::before{content:"▸ "; color:var(--faint)}
.callout[open]>summary::before{content:"▾ "}
.callout .callout-body{padding:.2em .9em .7em}
.callout .callout-body>p:last-child{margin-bottom:.3em}
.callout-bijbel{border-left-color:#6ea8d8} .callout-bijbel>summary{color:#9cc6ea}
.callout-citaat{border-left-color:#b98ce0} .callout-citaat>summary{color:#cdaaf0}
.callout-tegenwerping{border-left-color:#d98a6a} .callout-tegenwerping>summary{color:#eab38f}

/* ---------- bijbel-ref inline ---------- */
.doc .bijbel-ref{color:var(--accent-2); border-bottom:1px dotted rgba(214,162,104,.7); cursor:pointer}
.doc .bijbel-ref:hover{border-bottom-style:solid}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:28px 24px; box-shadow:0 16px 50px rgba(0,0,0,.4)}
.login-card h1{font-size:1.15rem; margin:0; color:#fff; text-align:center}
.login-sub{margin:.2em 0 1.4em; text-align:center; color:var(--muted); font-size:13px}
.login-card label{display:block; font-size:13px; color:var(--muted); margin:0 0 14px}
.login-card input{display:block; width:100%; margin-top:5px; padding:11px 12px; border-radius:10px;
  border:1px solid var(--border-2); background:var(--bg); color:var(--text); font-size:16px}
.login-card input:focus{outline:none; border-color:var(--accent)}
.login-card button{width:100%; margin-top:6px; padding:12px; border:0; border-radius:10px;
  background:var(--accent); color:#1a1206; font-weight:700; font-size:15px; cursor:pointer}
.login-card button:hover{background:var(--accent-2)}
.login-err{background:rgba(217,90,70,.16); border:1px solid rgba(217,90,70,.5); color:#f0b3a8;
  padding:9px 12px; border-radius:10px; font-size:13px; margin-bottom:16px}

/* ---------- responsief ---------- */
@media (max-width:900px){
  .topbar-menu{display:flex}
  .topbar{padding:8px 10px; gap:8px}
  .tb-new-lbl{display:none}
  .tb-vragen{padding:8px 6px}
  .sidebar{transform:translateX(-100%); width:86vw; max-width:340px}
  body.sidebar-open .sidebar{transform:none}
  body.sidebar-open .sidebar-overlay{display:block}
  .content{margin-left:0}
  .doc{padding:24px 18px 100px}
  main>.back-btn{top:auto; bottom:18px; right:16px}
}
@media (min-width:1500px){ :root{--maxread:50rem} }

/* ---------- dashboard / voorpagina ---------- */
.dash{max-width:60rem; margin:0 auto; padding:48px 24px 100px}
.dash-head h1{font-size:1.7rem; color:#fff; margin:0 0 .2em}
.dash-head p{color:var(--muted); margin:0 0 1.4em}
.dash-resume{display:block; background:linear-gradient(135deg,var(--surface-2),var(--surface));
  border:1px solid var(--border-2); border-left:4px solid var(--accent); border-radius:14px;
  padding:16px 20px; margin:0 0 28px; text-decoration:none}
.dash-resume:hover{border-color:var(--accent); text-decoration:none}
.dash-resume-label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent)}
.dash-resume-title{display:block; font-size:1.25rem; color:#fff; margin:.15em 0; font-weight:600}
.dash-resume-sub{display:block; color:var(--muted); font-size:13px}
.dash-h2{font-size:1rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft); margin:0 0 12px}
.dash-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.dash-card{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px; text-decoration:none}
.dash-card:hover{border-color:var(--accent-soft); background:var(--surface-2); text-decoration:none}
.dash-ring{width:52px; height:52px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--accent) calc(var(--p,0)*1%), var(--surface-2) 0)}
.dash-ring::before{content:''; position:absolute; inset:5px; border-radius:50%; background:var(--surface)}
.dash-ring span{position:relative; font-size:12px; font-weight:700; color:var(--text)}
.dash-card:hover .dash-ring::before{background:var(--surface-2)}
.dash-ring.done{background:var(--accent)}
.dash-ring.done span{color:#1a1206}
.dash-meta{min-width:0}
.dash-title{color:var(--text); font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:200px}
.dash-sub{color:var(--muted); font-size:12px}
.dash-empty{color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px}
@media (max-width:900px){ .dash{padding:24px 16px 90px} .dash-grid{grid-template-columns:1fr} }

/* ---------- knoppen ---------- */
.btn-primary{display:inline-block; background:var(--accent); color:#1a1206; font-weight:700; border:0;
  border-radius:9px; padding:9px 16px; font-size:14px; cursor:pointer; text-decoration:none}
.btn-primary:hover{background:var(--accent-2); text-decoration:none}
.btn-ghost{display:inline-block; background:transparent; color:var(--text-soft); border:1px solid var(--border-2);
  border-radius:9px; padding:7px 13px; font-size:13px; cursor:pointer; text-decoration:none}
.btn-ghost:hover{border-color:var(--accent); color:var(--text); text-decoration:none}
.btn-ghost.small{padding:4px 10px; font-size:12px}
.btn-ghost.danger:hover{border-color:#d9776a; color:#f0b3a8}
.quicklinks{display:flex; gap:14px; margin-top:8px; font-size:13px}
.quicklinks a{color:var(--muted)}
.quicklinks a:hover{color:var(--accent-2)}

/* ---------- notities-overzicht ---------- */
.note-list{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.note-item{display:block; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:13px 16px; text-decoration:none}
.note-item:hover{border-color:var(--accent-soft); background:var(--surface-2); text-decoration:none}
.note-item-title{color:#fff; font-weight:600; font-size:16px}
.note-item-snip{color:var(--text-soft); font-size:14px; margin:.2em 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.note-item-meta{color:var(--muted); font-size:12px}
.note-bron{color:var(--accent); margin-left:8px}

/* ---------- editor ---------- */
.editor .note-form{display:flex; flex-direction:column; gap:16px; margin-top:8px}
.note-form label{display:flex; flex-direction:column; gap:6px; color:var(--text-soft); font-size:13px}
.note-form input, .note-form textarea{background:var(--bg); color:var(--text); border:1px solid var(--border-2);
  border-radius:10px; padding:11px 12px; font-size:16px; font-family:inherit}
.note-form textarea{font-family:var(--e-global-typography-text-font-family); line-height:1.6; resize:vertical; min-height:240px}
.note-form input:focus, .note-form textarea:focus{outline:none; border-color:var(--accent)}
.note-form-actions{display:flex; gap:10px; align-items:center}

/* ---------- notitie-weergave + paneel bij document ---------- */
.note-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border)}
.note-bronlink{color:var(--accent-2); margin-left:auto; font-size:13px}
.doc-notes{max-width:var(--maxread); margin:10px auto 0; padding:0 28px}
.doc-notes-head{display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border);
  padding-top:16px; margin-top:24px; color:var(--text-soft); font-weight:600; font-size:14px}
.doc-note{display:block; background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:10px 13px; margin-top:8px; text-decoration:none}
.doc-note:hover{border-color:var(--accent-soft); text-decoration:none}
.doc-note b{color:var(--text); display:block; font-size:14px}
.doc-note span{color:var(--muted); font-size:13px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc-notes-empty{color:var(--muted); font-size:13px; margin-top:8px}
@media (max-width:900px){ .doc-notes{padding:0 18px} }

/* ---------- leesplan (Bijbel in 1 jaar) ---------- */
.lp-eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2)}
.lp-bar{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin:6px 0}
.lp-bar-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:999px; transition:width .4s}
/* dashboard-kaart */
.lp-dashcard{display:block; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin:6px 0 22px; text-decoration:none}
.lp-dashcard:hover{border-color:var(--accent-soft); text-decoration:none}
.lp-dashcard-top{display:flex; justify-content:space-between; align-items:center}
.lp-dashcard-pct{color:var(--accent-2); font-weight:700}
.lp-dashcard-title{color:var(--text); font-weight:600; font-size:1.05rem; margin-top:4px}
.lp-dashcard-sub{color:var(--muted); font-size:13px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* dag-pagina */
.lp-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}
.lp-of{color:var(--muted); font-weight:400; font-size:.65em}
.lp-headtools{display:flex; gap:10px; align-items:center}
.lp-headtools select{background:var(--surface-2); color:var(--text); border:1px solid var(--border-2); border-radius:9px; padding:8px 10px; font-size:14px}
.lp-teller{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 16px; margin:6px 0 14px; color:var(--text-soft)}
.lp-big{font-size:1.5rem; font-weight:700; color:var(--text)}
.lp-users{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.lp-user{flex:1 1 200px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px}
.lp-user-name{font-weight:600; color:var(--text)}
.lp-user-sub{color:var(--muted); font-size:12.5px}
.lp-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 4px}
.lp-today{color:var(--accent-2); font-size:13px; font-weight:600}
.lp-readings{display:flex; flex-direction:column; gap:10px}
.lp-reading{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px}
.lp-reading.done{border-color:var(--accent-soft); background:linear-gradient(0deg,var(--accent-soft),transparent)}
.lp-reading-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.lp-check{display:flex; align-items:center; gap:10px; cursor:pointer; font-size:1.05rem}
.lp-check input{width:20px; height:20px; accent-color:var(--accent)}
.lp-ref{color:var(--text); font-weight:600}
.lp-reading.done .lp-ref{color:var(--text-soft)}
.lp-reading-actions{display:flex; gap:8px}
.lp-reader{margin-top:10px; border-top:1px solid var(--border); padding-top:10px}
.lp-reader-inner{max-height:60vh; overflow:auto; padding-right:6px}
.lp-reader-foot{text-align:right; color:var(--muted); font-size:12px; margin-top:6px}
.lp-loading{color:var(--muted); padding:10px 0}
.lp-chap{color:var(--accent-2); font-size:1.1rem; margin:14px 0 6px; padding-top:6px; border-top:1px dashed var(--border)}
.lp-chap:first-child{border-top:none; padding-top:0; margin-top:2px}
.lp-journal{margin-top:24px}
.lp-journal textarea{width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border-2); border-radius:12px;
  padding:12px; font-family:var(--e-global-typography-text-font-family); font-size:16px; line-height:1.6; resize:vertical}
.lp-journal textarea:focus{outline:none; border-color:var(--accent)}
.lp-journal-actions{display:flex; gap:10px; align-items:center; margin-top:8px}
.lp-journal-status{color:var(--accent-2); font-size:13px}
.lp-journal-other{margin-top:14px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; color:var(--text-soft)}
.lp-journal-other-name{font-weight:600; color:var(--accent-2); font-size:13px; margin-bottom:4px}
.passage-chip.plan{background:var(--accent-soft); color:var(--accent-2); border-radius:8px; padding:6px 10px; display:inline-block; font-size:13px}
.btn-ghost.small, .btn-primary.small{padding:6px 12px; font-size:13px}
@media (max-width:900px){
  .lp-head{align-items:flex-start}
  .lp-reading-head{align-items:flex-start}
  .lp-nav{flex-wrap:wrap}
}