:root {
  --bg: #fbfaf7;
  --panel: #ffffff;
  --ink: #1d1b18;
  --muted: #6b665e;
  --line: #e4e0d8;
  --accent: #7a3b12;
  --sel: #fff1c9;
  --s-g: transparent;
  --s-c: #e3effa;
  --s-m: #e2f3e2;
  --s-f: #f4e6f7;
  --chg: #ffd48a;
  --hebrew: "SBL Hebrew", "Taamey Frank CLM", "Frank Ruehl CLM", "David", "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171614; --panel: #201e1b; --ink: #ece8e1; --muted: #a39d93; --line: #35322d;
    --accent: #e0a070; --sel: #4a3d1c;
    --s-c: #1f3347; --s-m: #1f3a24; --s-f: #3a2440; --chg: #7a5a12;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ui);
  display: flex; flex-direction: column;
}
a { color: var(--accent); }

.bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.bar h1 { margin: 0; font-size: 1.15rem; font-family: var(--hebrew); }
.bar h1 a { color: inherit; text-decoration: none; }
.bar h1 span { color: var(--muted); font-weight: normal; }
.pick { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pick select, .pick button, .bar button {
  font: inherit; font-size: .9rem; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--ink);
}
.pick button { min-width: 2.2em; cursor: pointer; }
.pick[hidden] { display: none; }
.pick .ta { font-size: .9rem; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
#tapage { width: 4.5em; font: inherit; font-size: .9rem; padding: 4px 6px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--ink); }
.pick button:disabled { opacity: .4; cursor: default; }
#witness { max-width: 22em; }
.synlink { font-size: .9rem; }
.toggle { font-size: .9rem; color: var(--muted); cursor: pointer; }
button.link { border: none; background: none; color: var(--accent); cursor: pointer; text-decoration: underline; }
.bar .link { margin-inline-start: auto; }

.legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 16px; font-size: .8rem; border-bottom: 1px solid var(--line); }
.legend[hidden] { display: none; }
.legend .lg-chg del { color: var(--muted); font-size: .85em; }
.legend .lg-chg b { background: var(--chg); font-weight: normal; padding: 0 2px; border-radius: 3px; }
.legend span { padding: 1px 8px; border-radius: 4px; border: 1px solid var(--line); }

main { position: relative; flex: 1; display: grid; min-height: 0;
  grid-template-columns: minmax(240px, var(--split, 46%)) 7px minmax(240px, 1fr); }
.splitter { cursor: col-resize; background: var(--line); touch-action: none;
  border-inline: 3px solid var(--bg); }
.splitter:hover, .splitter:focus-visible, main.resizing .splitter { background: var(--accent); outline: none; }
main.resizing { cursor: col-resize; user-select: none; }
/* the image must not swallow pointer events mid-drag */
main.resizing .ms { pointer-events: none; }
.text { overflow: auto; padding: 12px 16px 40px; }
.ms { min-height: 0; display: flex; flex-direction: column; }
.ms.mvc-ms { height: 100%; }

.pagehead { font-size: .9rem; color: var(--muted); margin-bottom: 8px; }
.pagehead b { color: var(--ink); }
.empty { color: var(--muted); }

.lines { margin: 0; padding-inline-start: 2.6em; font-family: var(--hebrew); font-size: calc(1.3rem * var(--fit, 1)); line-height: 1.75; }
/* panes.js sizes the text so the longest line fits; while it fits, lines don't wrap */
.text.nowrap .lines li { white-space: nowrap; }
.text.nowrap .lines.lay-mg li { white-space: normal; }
.lines li { cursor: pointer; padding: 0 6px; border-radius: 4px; }
.lines li::marker { color: var(--muted); font-family: var(--ui); font-size: .7rem; }
.lines li:hover { background: color-mix(in srgb, var(--sel) 50%, transparent); }
.lines .was { display: none; }
body.prov .lines .chg .now { background: var(--chg); border-radius: 3px; padding: 0 2px; }
body.prov .lines .was {
  display: inline; color: var(--muted); font-size: .72em; margin-inline-end: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
body.prov .lines .chg { cursor: help; }
.lines .fill { color: var(--muted); font-size: .8em; }
.lines li.sel { background: var(--sel); outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
body.prov .lines li.s-c { background: var(--s-c); }
body.prov .lines li.s-m { background: var(--s-m); }
body.prov .lines li.s-f { background: var(--s-f); }
body.prov .lines li.sel { background: var(--sel); }
.s-c { background: var(--s-c); } .s-m { background: var(--s-m); } .s-f { background: var(--s-f); }
.lines .s-c, .lines .s-m, .lines .s-f { background: none; }

dialog { max-width: 36em; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); line-height: 1.6; }
dialog::backdrop { background: rgb(0 0 0 / .35); }
dialog h2 { margin-top: 0; font-family: var(--hebrew); }
.keys { color: var(--muted); font-size: .85rem; }

@media (max-width: 760px) {
  /* minmax(0, …): a no-wrap line must not widen the column it is being fitted to */
  main { grid-template-columns: minmax(0, 1fr); grid-template-rows: 55vh auto; }
  .ms { order: -1; border-bottom: 1px solid var(--line); }
  .text { border: none; overflow: visible; }
  .lines { font-size: calc(1.15rem * var(--fit, 1)); }
  .splitter { display: none; }
  /* a select is as wide as its longest option; on a phone, cap it */
  .pick { max-width: 100%; }
  .pick select { max-width: 44vw; }
}

#q { width: 9em; font: inherit; font-size: .9rem; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--ink); }
/* words of the search the reader came from (search.js) */
::highlight(br-q) { background-color: var(--chg); color: inherit; }