/* Bible Explorer — app styles. See docs/DESIGN.md for the visual system. */

/* Base reset (the published artifact supplied these; standalone pages need them). */
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}

/* Layout: instrument console. Top bar (search, traces, book jump, reading direction) over three columns: entity detail | 3D line of book slabs on a floor | chapter reader. Book scrubber along the bottom. Single deliberate black look. */
:root{
  --bg:#000;
  --panel:#07090c;
  --line:#1b2028;
  --fg:#d9dde3;
  --muted:#7b828e;
  --dim:#4a505a;
  --accent:#e6e05a;
  --f-ui:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-read:"Newsreader",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:12px;overflow:hidden}
.app{height:100%;display:grid;grid-template-columns:300px minmax(0,1fr) 400px;grid-template-rows:auto minmax(0,1fr) auto;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.top{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line)}
.top h1{margin:0 8px 0 0;font-size:13px;font-weight:600;letter-spacing:.04em}
.seg{background:#0e1116;border:1px solid var(--line);border-radius:4px;color:var(--fg);font:inherit;padding:6px 9px}
.search{position:relative;flex:0 1 300px;min-width:180px}
.search input{width:100%;box-sizing:border-box}
.sugg{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:4px;background:#0b0e12;border:1px solid var(--line);border-radius:4px;list-style:none;padding:4px 0;max-height:340px;overflow:auto}
.sugg li{padding:6px 10px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.sugg li[aria-selected=true],.sugg li:hover{background:#161b22}
.sugg small{color:var(--muted);white-space:nowrap}
.dir{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.dir button{background:#0e1116;border:0;color:var(--muted);font:inherit;padding:6px 9px;cursor:pointer}
.dir button[aria-pressed=true]{background:#1b2129;color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:4px;padding:4px 3px 4px 8px;background:#0b0e12;cursor:pointer}
.chip i{width:7px;height:7px;border-radius:50%;flex:none}
.chip.on{border-color:var(--muted)}
.reset{margin-left:auto;cursor:pointer}
.chip button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;padding:0 5px}
.side{min-height:0;min-width:0;overflow:auto;background:var(--panel)}
.left{border-right:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.right{border-left:1px solid var(--line);padding:14px 18px 28px}
.label{color:var(--muted);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.ename{font-size:20px;font-weight:500;color:#fff;margin:2px 0 0}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}
.facts dt{color:var(--muted)}.facts dd{margin:0;min-width:0}
.dict{font-family:var(--f-read);font-size:14px;line-height:1.5;color:#b9bec7;margin:0}
.toks{display:flex;flex-wrap:wrap;gap:4px 10px;line-height:1.6}
.toks a sup{color:var(--dim);font-size:9px;margin-left:2px}
.ent{color:inherit;text-decoration:none;cursor:pointer}
.ent:hover{color:#fff;text-decoration:underline}
.field{position:relative;min-width:0;min-height:0;overflow:hidden}
#gl{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
#gl.dragging{cursor:grabbing}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lab{position:absolute;font-size:10px;color:#aab2bd;white-space:nowrap;transform:translate(-50%,-100%)}
.lab.book{font-size:12px;color:#fff;font-weight:600}
.lab.focus{color:var(--accent)}
.tip{position:absolute;pointer-events:none;background:#000d;border:1px solid var(--line);border-radius:4px;padding:6px 8px;max-width:300px;line-height:1.45}
.tip b{color:#fff}
.tip span{font-family:var(--f-read);font-size:13px;color:#c3c8cf}
.help{position:absolute;left:12px;bottom:10px;color:var(--dim);font-size:10.5px;pointer-events:none}
.bottom{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:8px 16px;border-top:1px solid var(--line)}
.bottom input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.bottom output{min-width:14ch;text-align:right;font-variant-numeric:tabular-nums}
.btn{background:#0e1116;border:1px solid var(--line);border-radius:4px;color:var(--fg);font:inherit;padding:5px 9px;cursor:pointer}
.btn:hover,.seg:hover{border-color:var(--muted)}
button:focus-visible,input:focus-visible,select:focus-visible,.ent:focus-visible,.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.rhead h2{margin:0;font-size:18px;font-weight:500;color:#fff}
.verses{font-family:var(--f-read);font-size:16px;line-height:1.65;max-width:65ch;margin-top:12px}
.verses p{margin:0 0 .3em;padding:1px 4px;border-radius:3px}
.verses p.cur{background:#ffffff12}
.verses sup{font-family:var(--f-ui);font-size:9.5px;color:var(--dim);margin-right:4px}
.verses .ent{border-bottom:1px dotted #4d5561}
.verses .ent.hl{border-bottom:2px solid var(--c);color:var(--c)}
.credit{color:var(--dim);font-size:10px;line-height:1.5;margin-top:20px}
.credit a{color:var(--muted)}

/* Interlinear mode: biblehub-style per-word grid above each verse's translation line.
   Each word is a vertical stack with Strong's, transliteration, source word, gloss,
   and morph tag — matching the Rev 22 screenshot the user referenced. */
.verses.interlinear p.iverse{margin:0 0 1em;padding:4px 4px 8px;border-bottom:1px solid var(--line);display:block}
.iwords{display:flex;flex-wrap:wrap;gap:16px;margin:4px 0 6px;font-family:var(--f-ui)}
.iw{display:flex;flex-direction:column;align-items:center;min-width:60px;line-height:1.4;cursor:help}
.iw .strongs{font-size:9.5px;color:#4a90c0;letter-spacing:.04em}
.iw .translit{font-size:11px;color:var(--accent);font-style:italic}
.iw .src{font-family:"SBL Hebrew","SBL Greek","Ezra SIL","Cardo",var(--f-read);font-size:17px;color:#fff;direction:ltr}
.iw .gloss{font-family:var(--f-read);font-size:12px;color:#e68a5a}
.iw .morph{font-size:9.5px;color:var(--muted)}
.iverse .itrans{font-family:var(--f-read);font-size:14px;color:#c3c8cf;margin-top:4px}
#translation{min-width:9em}
.autopilot{cursor:pointer}
.autopilot[aria-pressed=true]{background:#1b2129;color:#fff}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
@media (max-width:980px){
  body{overflow:auto}
  .app{grid-template-columns:1fr;grid-template-rows:auto 56vh auto auto auto;height:auto}
  .field{grid-row:2}.bottom{grid-row:3}.left{grid-row:4;border-right:0;border-top:1px solid var(--line)}.right{grid-row:5;border-left:0;border-top:1px solid var(--line)}
  .side{overflow:visible}
}