/* =====================================================================
   THE BIBLE CONNECTIONS — "Scripture Constellation" design system
   ---------------------------------------------------------------------
   Two themes. Dark is a night sky: deep navy, faint stars, glowing nodes.
   Light is parchment: warm ivory, ink typography, restrained gold.
   Node types are distinguished by SHAPE and GLYPH as well as colour, so
   the graph remains readable without colour vision.
   ===================================================================== */

:root{
  --gold:#d9a94a; --gold-soft:#e8c887;
  --ink:#0b1020;

  /* node type hues — shared across themes */
  --n-verse:#8fb8ff;  --n-book:#c8a2ff;   --n-chapter:#9fa8d9;
  --n-person:#ffb570;  --n-place:#5fd3b4;  --n-event:#ff8fa8;
  --n-theme:#f2d06b;   --n-word:#7fe0f5;   --n-story:#b6f27a;
  --n-group:#d0b8a8;   --n-cluster:#8a93ad;
  /* structural */
  --n-testament:#a9b4d8; --n-division:#8f9bc4; --n-passage:#7fa0e0;
  /* language */
  --n-family:#63c8dd;    --n-title:#9ed8ef;   --n-lexeme:#6fa8b8;
  /* editorial */
  --n-scene:#9ee06a;     --n-movement:#cfe38a; --n-era:#b0c98f;
  --n-prophecy:#ff9db4;  --n-quotation:#f7dc94;
  /* reference works and provenance */
  --n-dict:#c2b39a;      --n-source:#9aa6b8;
  /* the reader's own layer */
  --n-note:#f0b9d8;      --n-bookmark:#ffcf6b; --n-journey:#c4a9f0;

  --e-xref:#6f8fd0; --e-quote:#f2d06b; --e-proph:#ff9db4;
  --e-entity:#ffb570; --e-theme:#f2d06b; --e-struct:#7c86a8;
  --e-word:#7fe0f5; --e-ai:#a98bff;
  --e-prophecy:#ff9db4; --e-dict:#c2b39a; --e-source:#9aa6b8;
  --e-personal:#f0b9d8;

  --radius:14px; --radius-sm:9px;
  --shadow-lg:0 24px 70px rgba(0,0,0,.5);
  --shadow-sm:0 6px 22px rgba(0,0,0,.3);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --panel-w:min(456px,100vw);
  --top-h:60px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html[data-theme="dark"]{
  --bg:#070b18; --bg-2:#0b1224; --bg-3:#111a30;
  --surface:rgba(14,21,40,.82); --surface-solid:#0e1528;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
  --fg:#e9eefb; --fg-2:#a8b3cf; --fg-3:#6f7c9c;
  --accent:var(--gold); --accent-fg:#1a1305;
  --star:rgba(255,255,255,.55);
  --scrim:rgba(3,6,14,.72);
  --sel:rgba(217,169,74,.16);
}
html[data-theme="light"]{
  --bg:#f6f1e6; --bg-2:#fbf7ee; --bg-3:#efe7d6;
  --surface:rgba(255,253,247,.9); --surface-solid:#fffdf7;
  --line:rgba(30,24,10,.14); --line-strong:rgba(30,24,10,.26);
  --fg:#231b0e; --fg-2:#5c5140; --fg-3:#8a7d68;
  --accent:#9a6b12; --accent-fg:#fffdf7;
  --star:rgba(120,100,60,.35);
  --scrim:rgba(60,48,26,.42);
  --sel:rgba(154,107,18,.12);
  --n-verse:#3f6bb8; --n-book:#7a52b8; --n-chapter:#5a628f;
  --n-person:#b86a20; --n-place:#0f8a6c; --n-event:#c04a68;
  --n-theme:#a5811c; --n-word:#1a7f96; --n-story:#5c8f28;
  --n-group:#8a6b52; --n-cluster:#5e6478;
  --n-testament:#4a5680; --n-division:#5b6690; --n-passage:#3d63a8;
  --n-family:#12707f; --n-title:#1c7d92; --n-lexeme:#3a6e7a;
  --n-scene:#4d8a1f; --n-movement:#6f8a2a; --n-era:#5f7a34;
  --n-prophecy:#b8425e; --n-quotation:#9c7a12;
  --n-dict:#7a6a4e; --n-source:#5a6472;
  --n-note:#a83c78; --n-bookmark:#9a6b12; --n-journey:#6b4aa8;
  --e-prophecy:#b8425e; --e-dict:#7a6a4e; --e-source:#5a6472;
  --e-personal:#a83c78;
  --shadow-lg:0 20px 60px rgba(90,70,30,.18);
  --shadow-sm:0 6px 20px rgba(90,70,30,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow:hidden;overscroll-behavior:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
::selection{background:var(--sel)}

/* ---------- primitives ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line-strong);
  padding:.62rem 1.05rem;border-radius:999px;font-weight:560;letter-spacing:.01em;
  transition:transform .16s var(--ease),background .18s,border-color .18s,box-shadow .18s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:#1a1305;border-color:transparent;box-shadow:0 8px 26px rgba(217,169,74,.28)}
.btn.ghost{background:var(--surface);backdrop-filter:blur(10px)}
.btn.ghost:hover{border-color:var(--accent)}
.btn.lg{padding:.8rem 1.4rem;font-size:1rem}
.btn.sm{padding:.42rem .8rem;font-size:.86rem}
.btn.block{width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.link{color:var(--fg-2);border-bottom:1px solid transparent;padding:0;line-height:1.3}
.link:hover{color:var(--accent);border-bottom-color:currentColor}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;
  color:var(--fg-2);transition:background .16s,color .16s}
.icon-btn:hover{background:var(--bg-3);color:var(--fg)}
.icon-btn.tiny{width:30px;height:30px}
.icon-btn.tiny svg{width:16px;height:16px}
.icon-btn.round{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);backdrop-filter:blur(10px)}
.eyebrow{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:0 0 1rem}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:200}
.boot-inner{text-align:center;max-width:420px;padding:2rem}
.boot-mark{display:flex;gap:8px;justify-content:center;margin-bottom:1.6rem}
.boot-mark span{width:9px;height:9px;border-radius:50%;background:var(--gold);
  animation:pulse 1.5s var(--ease) infinite}
.boot-mark span:nth-child(2){animation-delay:.22s;opacity:.7}
.boot-mark span:nth-child(3){animation-delay:.44s;opacity:.45}
@keyframes pulse{0%,100%{transform:scale(.7);opacity:.35}50%{transform:scale(1.25);opacity:1}}
.boot-title{font-family:var(--serif);font-size:1.7rem;font-weight:400;margin:0 0 .4rem;letter-spacing:.01em}
.boot-sub{color:var(--fg-3);margin:0 0 1.6rem;font-size:.9rem;min-height:1.4em}
.boot-bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0%;background:var(--gold);transition:width .4s var(--ease)}

/* ---------- landing ---------- */
.landing{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
.landing-canvas{position:absolute;inset:0;width:100%;height:100%}
.landing-top,.landing-hero,.landing-foot{position:relative;z-index:2}
.landing-top{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2.6rem)}
.landing-nav{display:flex;align-items:center;gap:1.3rem}
.landing-hero{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(1.2rem,7vw,6rem);max-width:900px}
.hero-title{font-family:var(--serif);font-weight:400;margin:0 0 1.1rem;
  font-size:clamp(2.3rem,6.4vw,4.6rem);line-height:1.06;letter-spacing:-.015em}
.hero-title em{font-style:italic;color:var(--gold-soft);
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{color:var(--fg-2);font-size:clamp(1rem,2vw,1.18rem);max-width:44ch;margin:0 0 2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.2rem}
.tour-link{align-self:flex-start;font-size:.9rem}
.landing-foot{padding:1.2rem clamp(1rem,4vw,2.6rem) 1.6rem;display:flex;
  justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.stat-row{display:flex;gap:1.8rem;flex-wrap:wrap}
.stat b{display:block;font-family:var(--serif);font-size:1.35rem;font-weight:400;color:var(--fg)}
.stat span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.tagline{font-family:var(--serif);font-style:italic;color:var(--fg-3);margin:0}

/* ---------- brand ---------- */
.brand{display:inline-flex;align-items:center;gap:.6rem}
.brand-mark{width:22px;height:22px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 35% 32%,var(--gold-soft),var(--gold) 55%,transparent 72%);
  box-shadow:0 0 18px rgba(217,169,74,.55)}
.brand-name{font-family:var(--serif);font-size:1.02rem;letter-spacing:.015em;white-space:nowrap}
.brand.tight .brand-name{font-size:.95rem}

/* ---------- shell / topbar ---------- */
.shell{position:fixed;inset:0;display:flex;flex-direction:column}
.topbar{height:var(--top-h);flex:none;display:flex;align-items:center;gap:.5rem;
  padding:0 .7rem;border-bottom:1px solid var(--line);background:var(--surface);
  backdrop-filter:blur(16px);z-index:40}
.searchwrap{position:relative;flex:1;max-width:520px;margin:0 .4rem}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--fg-3);pointer-events:none}
#search-input{width:100%;height:38px;padding:0 2.2rem 0 2.3rem;border-radius:999px;
  border:1px solid var(--line);background:var(--bg-2);outline:none;transition:border-color .18s,box-shadow .18s}
#search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--sel)}
.searchwrap .icon-btn.tiny{position:absolute;right:5px;top:4px}
.search-drop{position:absolute;top:46px;left:0;right:0;max-height:min(64vh,520px);
  overflow-y:auto;background:var(--surface-solid);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:60;padding:.4rem}
.modes{display:flex;gap:.15rem;margin-left:auto}
.mode{padding:.42rem .8rem;border-radius:999px;font-size:.86rem;color:var(--fg-2);
  letter-spacing:.02em;transition:background .16s,color .16s}
.mode:hover{background:var(--bg-3);color:var(--fg)}
.mode[aria-current="true"]{background:var(--sel);color:var(--fg)}
.topbar-right{display:flex;gap:.15rem}

/* ---------- drawer ---------- */
.drawer{position:fixed;top:0;left:0;bottom:0;width:290px;z-index:80;
  background:var(--surface-solid);border-right:1px solid var(--line);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  animation:slideIn .26s var(--ease)}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1rem;border-bottom:1px solid var(--line)}
.drawer-title{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.drawer-nav{flex:1;overflow-y:auto;padding:.6rem}
.drawer-nav button{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  padding:.62rem .8rem;border-radius:10px;color:var(--fg-2)}
.drawer-nav button:hover{background:var(--bg-3);color:var(--fg)}
.drawer-nav i{width:16px;height:16px;flex:none;border-radius:4px;background:currentColor;opacity:.55;
  -webkit-mask-size:contain;mask-size:contain}
.drawer-foot{padding:.9rem 1.2rem;border-top:1px solid var(--line);display:flex;
  gap:1rem;flex-wrap:wrap;font-size:.82rem}

/* ---------- graph stage ---------- */
.stage{position:relative;flex:1;overflow:hidden;background:
  radial-gradient(ellipse 90% 70% at 50% 42%,var(--bg-2),var(--bg) 72%)}
#graph-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#graph-canvas.dragging{cursor:grabbing}
.stage-overlay{position:absolute;z-index:20;display:flex;gap:.5rem;pointer-events:none}
.stage-overlay>*{pointer-events:auto}
.top-left{top:.7rem;left:.8rem;right:.8rem;max-width:calc(100% - 1.6rem)}
.top-right{top:.7rem;right:.8rem}
.bottom-left{bottom:.9rem;left:.8rem}
.bottom-center{bottom:1rem;left:50%;transform:translateX(-50%);max-width:min(560px,88vw)}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(10px);
  font-size:.84rem;color:var(--fg-2)}
.chip:hover{color:var(--fg);border-color:var(--accent)}
.chip b{background:var(--accent);color:var(--accent-fg);border-radius:999px;
  padding:0 .38rem;font-size:.7rem;font-weight:700}
.chip b:empty{display:none}
.ctrl-cluster{display:flex;flex-direction:column;gap:.4rem}
.graph-hint{font-size:.82rem;color:var(--fg-3);text-align:center;
  background:var(--surface);backdrop-filter:blur(10px);padding:.4rem .9rem;
  border-radius:999px;border:1px solid var(--line);opacity:0;transition:opacity .3s}
.graph-hint.show{opacity:1}
.breadcrumbs{display:flex;align-items:center;gap:.3rem;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;padding:.15rem}
.breadcrumbs::-webkit-scrollbar{display:none}
.crumb{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(10px);
  font-size:.8rem;color:var(--fg-2);white-space:nowrap;flex:none}
.crumb:hover{color:var(--fg);border-color:var(--accent)}
.crumb[aria-current="true"]{color:var(--fg);border-color:var(--accent);background:var(--sel)}
.crumb-sep{color:var(--fg-3);flex:none;font-size:.8rem}

/* ---------- floating cards ---------- */
.floating-card{position:absolute;z-index:30;width:min(320px,calc(100vw - 1.6rem));
  background:var(--surface-solid);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden}
.filters{top:3.3rem;right:.8rem}
.legend{top:3.3rem;right:.8rem}
.fc-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;
  border-bottom:1px solid var(--line);font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3)}
.fc-foot{padding:.7rem .9rem;border-top:1px solid var(--line)}
.fc-actions{display:flex;gap:.5rem;margin-top:.6rem}
.filter-list{max-height:min(46vh,380px);overflow-y:auto;padding:.4rem}
.filter-row{display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:9px;cursor:pointer}
.filter-row:hover{background:var(--bg-3)}
.filter-row input{accent-color:var(--accent);width:15px;height:15px}
.filter-row .swatch{width:22px;height:3px;border-radius:2px;flex:none}
.filter-row .name{flex:1;font-size:.88rem}
.filter-row .num{font-size:.76rem;color:var(--fg-3);font-variant-numeric:tabular-nums}
.range{display:block;font-size:.8rem;color:var(--fg-3)}
.range input{width:100%;margin-top:.35rem;accent-color:var(--accent)}
.range output{font-size:.78rem;color:var(--fg-2)}
.legend-group{padding:.6rem .9rem}
.legend-group h4{margin:0 0 .5rem;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3);font-weight:600}
.legend-item{display:flex;align-items:center;gap:.55rem;padding:.2rem 0;font-size:.85rem}
.legend-item .glyph{width:20px;height:20px;flex:none}
.legend-item .bar{width:26px;height:0;border-top-width:2px;border-top-style:solid;flex:none}

/* ---------- detail panel ---------- */
.panel{position:fixed;top:var(--top-h);right:0;bottom:0;width:var(--panel-w);z-index:50;
  background:var(--surface-solid);border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  animation:panelIn .3s var(--ease)}
@keyframes panelIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.panel-grip{display:none}
.panel-head{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;padding:.6rem .7rem .6rem 1rem;border-bottom:1px solid var(--line)}
.panel-kind{display:flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);min-width:0}
.panel-kind .dot{width:9px;height:9px;border-radius:50%;flex:none}
.panel-head-actions{display:flex;gap:.1rem;flex:none}
.panel-body{flex:1;overflow-y:auto;padding:1.1rem 1.15rem 3rem;
  scrollbar-width:thin;overscroll-behavior:contain}

/* scripture typography */
.ref{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin:0 0 .1rem;letter-spacing:.01em}
.ref-sub{font-size:.78rem;color:var(--fg-3);margin:0 0 1rem;letter-spacing:.06em;text-transform:uppercase}
.scripture{font-family:var(--serif);font-size:1.14rem;line-height:1.72;margin:0 0 1.1rem;
  padding-left:1rem;border-left:2px solid var(--accent)}
.scripture.plain{border:0;padding:0}
.w{cursor:pointer;border-radius:3px;padding:0 .5px}
.w:hover{background:var(--sel);color:var(--fg)}
.kjv-tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);
  border:1px solid var(--line);border-radius:999px;padding:.1rem .5rem;white-space:nowrap}

.sect{margin:1.5rem 0 0}
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  margin:0 0 .6rem}
.sect-head h3{margin:0;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-3);font-weight:600}
.sect-head .count{font-size:.74rem;color:var(--fg-3);font-variant-numeric:tabular-nums}

.rowlist{display:flex;flex-direction:column;gap:.28rem}
.row{display:flex;align-items:flex-start;gap:.6rem;width:100%;text-align:left;
  padding:.55rem .6rem;border-radius:10px;border:1px solid transparent;transition:background .15s,border-color .15s}
.row:hover{background:var(--bg-3);border-color:var(--line)}
.row .glyph{flex:none;margin-top:.15rem}
.row .rmain{flex:1;min-width:0}
.row .rtitle{font-size:.92rem;font-weight:540;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.row .rtext{font-family:var(--serif);font-size:.9rem;color:var(--fg-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.12rem}
.row .rmeta{font-size:.74rem;color:var(--fg-3);margin-top:.2rem;display:flex;gap:.5rem;flex-wrap:wrap}
.row .why{flex:none;font-size:.7rem;color:var(--fg-3);border:1px solid var(--line);
  border-radius:999px;padding:.08rem .45rem;margin-top:.15rem}
.row .why:hover{color:var(--accent);border-color:var(--accent)}

.pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:.1rem .48rem;border:1px solid var(--line);
  color:var(--fg-3);white-space:nowrap}
.pill.direct{color:#7ee0a8;border-color:rgba(126,224,168,.4)}
.pill.supported{color:var(--gold-soft);border-color:rgba(217,169,74,.42)}
.pill.thematic{color:#8fb8ff;border-color:rgba(143,184,255,.4)}
.pill.possible{color:var(--fg-3)}
.pill.ai{color:#bda6ff;border-color:rgba(169,139,255,.45)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.tagbtn{font-size:.82rem;padding:.28rem .65rem;border-radius:999px;border:1px solid var(--line);
  color:var(--fg-2);transition:all .15s}
.tagbtn:hover{border-color:var(--accent);color:var(--fg);background:var(--sel)}

.note-box{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.8rem;font-size:.88rem;color:var(--fg-2)}
.note-box.warn{border-color:rgba(217,169,74,.4)}
.note-box b{color:var(--fg)}
.prov{font-size:.76rem;color:var(--fg-3);display:grid;grid-template-columns:auto 1fr;
  gap:.2rem .7rem;margin-top:.5rem}
.prov dt{color:var(--fg-3);letter-spacing:.08em;text-transform:uppercase;font-size:.68rem}
.prov dd{margin:0;color:var(--fg-2)}
.divider{height:1px;background:var(--line);margin:1.4rem 0}
.muted{color:var(--fg-3)}
.small{font-size:.82rem}
.mono{font-variant-numeric:tabular-nums}

/* ---------- page views ---------- */
.page{flex:1;overflow-y:auto;padding:0 0 4rem;scrollbar-width:thin}
.wrap{max-width:1080px;margin:0 auto;padding:2rem clamp(1rem,4vw,2.4rem)}
.wrap.narrow{max-width:720px}
.page h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.5rem);
  margin:0 0 .4rem;letter-spacing:-.01em}
.page h2{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:2rem 0 .7rem}
.page h3{font-size:.95rem;margin:1.4rem 0 .5rem}
.page p{color:var(--fg-2);max-width:70ch}
.lede{font-size:1.05rem;color:var(--fg-2);max-width:62ch;margin:0 0 1.8rem}
.grid{display:grid;gap:.7rem}
.grid.two{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem;text-align:left;transition:transform .18s var(--ease),border-color .18s,box-shadow .18s}
button.card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.card h4{margin:0 0 .3rem;font-size:1rem;font-weight:560;display:flex;align-items:center;gap:.45rem}
.card p{margin:0;font-size:.86rem;color:var(--fg-3)}
.card .kicker{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.4rem}

/* reader */
.reader-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.5rem;
  flex-wrap:wrap;padding:.7rem clamp(1rem,4vw,2.4rem);background:var(--surface);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.select{height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);
  padding:0 .6rem;outline:none}
.select:focus{border-color:var(--accent)}
.reader{max-width:720px;margin:0 auto;padding:2rem clamp(1rem,4vw,2rem) 5rem}
.reader h1{text-align:center;margin-bottom:2rem}
.verse-line{display:block;width:100%;text-align:left;font-family:var(--serif);
  font-size:1.13rem;line-height:1.8;padding:.32rem .6rem;border-radius:8px;
  border-left:2px solid transparent;transition:background .15s,border-color .15s}
.verse-line:hover{background:var(--bg-2);border-left-color:var(--line-strong)}
.verse-line.active{background:var(--sel);border-left-color:var(--accent)}
.vnum{font-family:var(--sans);font-size:.66rem;font-weight:700;color:var(--accent);
  vertical-align:.5em;margin-right:.35rem;letter-spacing:.02em}
.reader-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem}

/* trace / timeline */
.trace-line{position:relative;padding-left:2rem;margin-top:1.4rem}
.trace-line::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,transparent,var(--line-strong) 8%,var(--line-strong) 92%,transparent)}
.trace-node{position:relative;padding:.55rem 0 .95rem;text-align:left;width:100%}
.trace-node::before{content:"";position:absolute;left:-1.63rem;top:.95rem;width:10px;height:10px;
  border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.trace-node:hover::before{background:var(--accent)}
.trace-node .tl{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.trace-node .tt{font-size:1rem;font-weight:560;margin:.1rem 0}
.trace-node .tn{font-size:.87rem;color:var(--fg-2);max-width:60ch}
.trace-node .tv{font-family:var(--serif);font-size:.92rem;color:var(--fg-2);margin-top:.3rem;
  padding-left:.7rem;border-left:2px solid var(--line)}

/* forms */
.field{margin-bottom:.95rem}
.field label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:.35rem}
.field input,.field textarea{width:100%;padding:.6rem .75rem;border-radius:10px;
  border:1px solid var(--line);background:var(--bg-2);outline:none;transition:border-color .18s,box-shadow .18s}
.field input:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--sel)}
.field textarea{min-height:130px;resize:vertical;font-family:inherit}
.field .hint{font-size:.76rem;color:var(--fg-3);margin-top:.3rem;text-transform:none;letter-spacing:0}
.field.error input,.field.error textarea{border-color:#e0708a}
.field .err{font-size:.78rem;color:#e0708a;margin-top:.3rem}
.checkline{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;color:var(--fg-2);
  margin-bottom:1rem;cursor:pointer}
.checkline input{margin-top:.25rem;accent-color:var(--accent);width:16px;height:16px;flex:none}
.legal{max-width:74ch}
.legal h2{font-size:1.15rem;margin-top:1.9rem}
.legal p,.legal li{font-size:.92rem;color:var(--fg-2)}
.legal ul{padding-left:1.2rem}
.legal .updated{font-size:.8rem;color:var(--fg-3)}

/* modal */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1rem}
.modal-scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(6px)}
.modal-card{position:relative;width:min(520px,100%);max-height:86vh;overflow-y:auto;
  background:var(--surface-solid);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-lg);padding:1.6rem;animation:modalIn .26s var(--ease)}
@keyframes modalIn{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-x{position:absolute;top:.7rem;right:.7rem}
.modal-card h2{font-family:var(--serif);font-weight:400;margin:0 0 .3rem;font-size:1.45rem}
.modal-card .sub{color:var(--fg-3);font-size:.88rem;margin:0 0 1.3rem}
.tabs{display:flex;gap:.3rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line)}
.tabs button{padding:.5rem .8rem;font-size:.9rem;color:var(--fg-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}

/* toast */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:150;
  background:var(--surface-solid);border:1px solid var(--line-strong);border-radius:999px;
  padding:.6rem 1.1rem;font-size:.88rem;box-shadow:var(--shadow-lg);animation:toastIn .24s var(--ease)}
@keyframes toastIn{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* tour */
.tour{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:110;
  width:min(540px,calc(100vw - 1.6rem))}
.tour-card{background:var(--surface-solid);border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1.1rem 1.2rem}
.tour-step{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.45rem}
.tour-say{margin:0 0 .7rem;font-size:.95rem}
.tour-verse{margin:0 0 1rem;font-family:var(--serif);font-size:1rem;color:var(--fg-2);
  padding-left:.9rem;border-left:2px solid var(--accent)}
.tour-actions{display:flex;justify-content:space-between;gap:.6rem}

/* footer */
.appfoot{flex:none;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem clamp(.8rem,3vw,1.6rem);border-top:1px solid var(--line);
  font-size:.78rem;color:var(--fg-3);background:var(--surface)}
.appfoot .dot{opacity:.5}
.appfoot .link{font-size:.78rem}

/* skeleton / empty */
.empty{padding:2.5rem 1rem;text-align:center;color:var(--fg-3)}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);
  border-top-color:var(--accent);animation:spin .7s linear infinite;display:inline-block;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- responsive: mobile-first interaction model ---------- */
@media (max-width:920px){
  .modes .mode{padding:.4rem .6rem;font-size:.8rem}
  .mode:nth-child(n+5){display:none}
}
@media (max-width:720px){
  :root{--top-h:56px;--panel-w:100vw}
  .brand-name{display:none}
  .modes{display:none}
  .searchwrap{max-width:none}
  /* panel becomes a bottom sheet with a drag grip */
  .panel{top:auto;left:0;right:0;bottom:0;height:min(82vh,720px);width:100vw;
    border-left:0;border-top:1px solid var(--line-strong);
    border-radius:20px 20px 0 0;animation:sheetIn .3s var(--ease)}
  @keyframes sheetIn{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
  .panel.collapsed{height:190px}
  .panel-grip{display:block;height:22px;position:relative;flex:none;touch-action:none;cursor:grab}
  .panel-grip::after{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);
    width:44px;height:4px;border-radius:2px;background:var(--line-strong)}
  .bottom-left{bottom:.7rem}
  .ctrl-cluster{flex-direction:row}
  .bottom-center{bottom:4rem}
  .hero-cta .btn{width:100%;justify-content:center}
  .landing-nav .link{display:none}
  .appfoot{font-size:.72rem;justify-content:center}
  .appfoot .link{font-size:.72rem}
  .stat-row{gap:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- panels added for the extended node types ---------- */
.passage-box{
  display:flex;flex-direction:column;gap:.45rem;
  border-left:2px solid var(--n-passage);padding-left:.8rem;margin:.9rem 0;
}
.passage-box .scripture{margin:0}
p.dict{
  font-family:var(--serif);line-height:1.62;color:var(--fg-2);
  border-left:2px solid var(--n-dict);padding-left:.9rem;margin:.9rem 0;
}
p.usernote{
  font-family:var(--serif);line-height:1.6;background:var(--sel);
  border-left:2px solid var(--n-note);padding:.7rem .9rem;border-radius:var(--radius-sm);
  margin:.8rem 0;white-space:pre-wrap;
}
p.editorial{
  font-style:italic;color:var(--fg-2);line-height:1.58;margin:.7rem 0;
}
.mono{font-variant-numeric:tabular-nums;word-break:break-all}
.filter-group-head{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--fg-3);margin:.9rem 0 .35rem;font-weight:600;
}

/* ---------- drawer / control icons ----------
   Drawn with text glyphs rather than an icon font or SVG sprite: no extra
   request, no build step, and they inherit colour and size from the button.
   aria-hidden on each <i> keeps them out of the accessibility tree. */
[class^="ic-"]{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.15em;height:1.15em;margin-right:.62rem;flex:none;
  font-style:normal;font-size:1.02em;line-height:1;
  color:var(--gold);opacity:.85;
}
[class^="ic-"]::before{content:"\2022"}
.ic-home::before{content:"\2302"}
.ic-map::before{content:"\2732"}
.ic-book::before{content:"\1F4D5"}
.ic-spark::before{content:"\2726"}
.ic-trace::before{content:"\27A6"}
.ic-compare::before{content:"\21C4"}
.ic-study::before{content:"\270D"}
.ic-star::before{content:"\2605"}
.ic-clock::before{content:"\25F4"}
.ic-shield::before{content:"\26E8"}
.ic-cog::before{content:"\2699"}
.ic-filter::before{content:"\25BD"}
.ic-legend::before{content:"\229E"}

/* ---------- mind map studio ---------- */
.ic-mindmap::before{content:"\26B9"}
#studio-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.studio-chrome{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.studio-chrome .chip b{font-weight:600;margin-right:.4rem}
.studio-chrome .chip span{color:var(--fg-3);font-size:.72rem}
.studio-tools{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end;max-width:62vw}
.studio-tools .chip.on{background:var(--sel);border-color:var(--accent);color:var(--accent)}
.studio-side{
  position:absolute;top:0;right:0;bottom:0;width:min(340px,92vw);z-index:5;
  background:var(--bg-2);border-left:1px solid var(--line);overflow-y:auto;
  padding:.9rem;box-shadow:-18px 0 50px rgba(0,0,0,.32);
}
.studio-side h3{font-family:var(--serif);font-weight:400;font-size:1.15rem;margin:.2rem 0 .4rem}
.ss-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3rem}
@media(max-width:720px){
  .studio-side{top:auto;left:0;width:100%;height:58%;border-left:0;
    border-top:1px solid var(--line);border-radius:16px 16px 0 0}
  .studio-tools{max-width:100%}
}
.swatch-btn{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--line);cursor:pointer;
}
.swatch-btn.on{border-color:var(--fg);transform:scale(1.12)}
.inp{
  width:100%;background:var(--surface);border:1px solid var(--line);color:var(--fg);
  border-radius:var(--radius-sm);padding:.55rem .7rem;font:inherit;font-size:.9rem;
  outline:none;margin:.2rem 0 .4rem;
}
.inp:focus{border-color:var(--accent)}
textarea.inp{resize:vertical;line-height:1.5}
.fieldlabel{
  display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);font-weight:600;margin-top:.8rem;
}

/* ---------- research tools ---------- */
.ic-research::before{content:"\1F50E"}
.subtabs{display:flex;gap:.3rem;overflow-x:auto;margin:.4rem 0 1.4rem;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{
  background:none;border:1px solid transparent;border-radius:999px;
  padding:.34rem .8rem;font-size:.82rem;color:var(--fg-2);white-space:nowrap;cursor:pointer;
}
.subtabs button:hover{background:var(--surface);color:var(--fg)}
.subtabs button[aria-selected="true"]{
  background:var(--sel);border-color:var(--accent);color:var(--accent);font-weight:600;
}
.kwic{width:100%;border-collapse:collapse;font-size:.84rem;table-layout:fixed}
.kwic td{padding:.3rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
.kwic .k-ref{width:19%;color:var(--fg-3);font-size:.76rem;white-space:nowrap}
.kwic .k-left{width:33%;text-align:right;font-family:var(--serif);color:var(--fg-2)}
.kwic .k-hit{width:auto;text-align:center;font-family:var(--serif);
  color:var(--accent);font-weight:600;white-space:nowrap;padding:0 .5rem}
.kwic .k-right{width:33%;font-family:var(--serif);color:var(--fg-2)}
.matrix-wrap{overflow:auto;max-height:70vh;border:1px solid var(--line);
  border-radius:var(--radius-sm)}
.matrix{border-collapse:collapse;font-size:9px}
.matrix td{width:11px;height:11px;padding:0}
.matrix th{
  font-size:8.5px;font-weight:500;color:var(--fg-3);padding:1px 3px;
  position:sticky;background:var(--bg);z-index:2;
}
.matrix th.rowh{left:0;text-align:right;white-space:nowrap;max-width:74px;overflow:hidden}
.matrix th.colh{top:0;height:58px;writing-mode:vertical-rl;text-orientation:mixed}
.bar-row{display:flex;align-items:center;gap:.5rem;margin:.22rem 0;font-size:.82rem}
.bar-row .lbl{width:118px;flex:none;color:var(--fg-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .track{flex:1;height:9px;background:var(--surface);border-radius:5px;overflow:hidden}
.bar-row .fill{height:100%;background:var(--accent);border-radius:5px}
.bar-row .val{width:56px;text-align:right;color:var(--fg-3);font-variant-numeric:tabular-nums}
.cite-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.6rem .7rem;white-space:pre-wrap;word-break:break-word;margin:.4rem 0;
  color:var(--fg-2);line-height:1.5;
}