:root {
  --bg: #f6f5f1; --card: #ffffff; --ink: #1f2328; --muted: #6a6f76; --line: #dcd9d1; --accent: #2b4c7e;
  --c0: #ffd166; --c1: #9ad1f5; --c2: #b8e0a8; --c3: #f7a8b8; --c4: #c9b6f2; --c5: #ffb38a; --c6: #8fe3d6;
  --c7: #e6d38f; --c8: #a9c4ff; --c9: #f2b5e8;
  --d0: #a77800; --d1: #1f6fa8; --d2: #3c7d2b; --d3: #b0354f; --d4: #6646b3; --d5: #b8551b; --d6: #13806f;
  --d7: #7d6b12; --d8: #2f56b8; --d9: #9a3c8a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; }
header.top { display: flex; align-items: baseline; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--card); }
header.top h1 { margin: 0; font-size: 20px; color: var(--accent); }
header.top .sub { color: var(--muted); }
main { padding: 16px 24px 60px; max-width: 1700px; margin: 0 auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
label { display: block; font-weight: 600; margin: 4px 0; }
label.inline, .bar label, .radios label { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; margin-right: 12px; }
.hint { font-weight: 400; color: var(--muted); }
textarea, input[type=text], input[type=password], input[type=search], input[type=number], select {
  font: inherit; border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; background: #fff; }
textarea, input[type=text] { width: 100%; margin: 3px 0; }
input[type=number] { width: 78px; }
fieldset { border: 1px solid var(--line); border-radius: 6px; margin: 0; padding: 6px 10px 8px; }
legend { font-weight: 600; padding: 0 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
button { font: inherit; border: 1px solid var(--line); border-radius: 5px; padding: 5px 12px; background: #fafafa; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
.actions { margin-top: 10px; display: flex; gap: 12px; align-items: center; }
.msg { color: var(--muted); }
.msg.err { color: #b00020; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.job-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.job-head h2 { margin: 0 0 4px; font-size: 17px; }
.job-meta { color: var(--muted); }
.job-meta a { color: var(--accent); }
.exports { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
select.exp-cmp { font-weight: 600; border-color: var(--accent); color: var(--accent); cursor: pointer; }
details { margin: 10px 0; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: #fcfcfa; }
details > summary { cursor: pointer; font-weight: 600; }
table.kv { border-collapse: collapse; margin: 8px 0; }
table.kv td { border-bottom: 1px solid #eee; padding: 3px 12px 3px 0; vertical-align: top; }
table.kv td:first-child { color: var(--muted); white-space: nowrap; }
.qlabel { color: var(--muted); margin-top: 6px; }
.rtl { direction: rtl; text-align: right; unicode-bidi: plaintext; }
.qtext { font-size: 15px; background: #fff; border: 1px solid #eee; padding: 6px 8px; border-radius: 4px; max-height: 160px; overflow: auto; }
.src-edit { margin-top: 8px; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; padding: 8px 0; border-top: 1px solid #eee; }
.f-count { margin-left: auto; color: var(--muted); }
.tablewrap { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
table.hits { border-collapse: collapse; width: 100%; font-size: 13px; }
table.hits th { position: sticky; top: 0; background: #eef1f6; text-align: left; padding: 5px 6px; cursor: pointer; white-space: nowrap; border-bottom: 1px solid var(--line); z-index: 1; }
table.hits th.sorted::after { content: " ▾"; }
table.hits th.sorted.asc::after { content: " ▴"; }
table.hits td { padding: 4px 6px; border-bottom: 1px solid #f0eee8; vertical-align: top; }
table.hits tr { cursor: pointer; }
table.hits tr:hover td { background: #f7f9fc; }
table.hits tr.sel td { background: #e5edf8; }
table.hits td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.hits .clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 340px; }
table.hits tr.sel .clamp { display: block; -webkit-line-clamp: unset; }
table.hits td.words { direction: rtl; text-align: right; max-width: 460px; font-size: 13.5px; }
table.hits td.loc { font-family: Consolas, monospace; font-size: 11px; color: var(--muted); max-width: 260px; word-break: break-all; }
table.hits td.ar { direction: rtl; text-align: right; }
.compare { border: 1px solid var(--line); border-radius: 8px; margin-top: 14px; overflow: hidden; }
.compare-head { background: #eef1f6; padding: 6px 10px; display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.compare-head .scores span { margin-right: 10px; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; direction: rtl; }
.cmp-col { padding: 8px 12px 12px; min-width: 0; direction: ltr; }
/* Source and target share row tracks (subgrid): heading, bibliography, label, text box, label, parallel words, metadata.
   The text boxes therefore start at the same height, whatever the length of the bibliography above them. */
@supports (grid-template-rows: subgrid) {
  .cmp-grid { grid-template-rows: repeat(7, auto); align-items: start; }
  .cmp-col { display: grid; grid-row: span 7; grid-template-rows: subgrid; align-content: start; }
  .cmp-col > * { min-width: 0; }
  .cmp-col > .bib { align-self: stretch; }
  .cmp-col > .boxlabel { align-self: end; }
}
.cmp-grid { align-items: start; }
.cmp-col + .cmp-col { border-right: 1px solid var(--line); }
.cmp-col > * { margin-top: 0; }
.cmp-col h3 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bib { margin-bottom: 6px; }
.bib .t { font-weight: 600; }
.bib .small { color: var(--muted); font-size: 12px; word-break: break-all; }
.ptext { font-size: 17px; line-height: 2.05; direction: rtl; text-align: justify; font-family: "Noto Naskh Arabic", "SBL Hebrew", "Times New Roman", serif;
  border: 1px solid #c9c2b1; background: #fffdf7; border-radius: 6px; padding: 8px 12px; }
.ptext .gap { color: var(--muted); padding: 0 4px; }
.pw { border-radius: 3px; padding: 1px 1px; }
.pw.x { background: var(--bg-c); }
.pw.m { background: var(--bg-c); background: color-mix(in srgb, var(--bg-c) 45%, white); border-bottom: 2px dotted var(--d-c); }
.pw.hot { outline: 2px solid #111; }
.runs { font-size: 13.5px; direction: rtl; text-align: right; color: #333; border: 1px dashed #c9c2b1; background: #fafaf6; border-radius: 6px; padding: 6px 10px; }
.boxlabel { margin: 8px 0 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.boxlabel code { text-transform: none; }
.bib { padding-bottom: 6px; border-bottom: 1px solid #eee; }
.hits-box > summary .hits-sum { font-weight: 400; color: var(--muted); }
.legend { margin-left: auto; color: var(--muted); font-size: 12px; }
.legend .pw { font-size: 12px; }
.meta-details { font-size: 12px; margin-top: 6px; }
.meta-details pre { white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.empty { color: var(--muted); padding: 10px; }
.k0 { --bg-c: var(--c0); --d-c: var(--d0); } .k1 { --bg-c: var(--c1); --d-c: var(--d1); } .k2 { --bg-c: var(--c2); --d-c: var(--d2); }
.k3 { --bg-c: var(--c3); --d-c: var(--d3); } .k4 { --bg-c: var(--c4); --d-c: var(--d4); } .k5 { --bg-c: var(--c5); --d-c: var(--d5); }
.k6 { --bg-c: var(--c6); --d-c: var(--d6); } .k7 { --bg-c: var(--c7); --d-c: var(--d7); } .k8 { --bg-c: var(--c8); --d-c: var(--d8); }
.k9 { --bg-c: var(--c9); --d-c: var(--d9); }
@media (max-width: 900px) { .cmp-grid { grid-template-columns: 1fr; } .cmp-col + .cmp-col { border-right: 0; border-top: 1px solid var(--line); } }
@media print { header.top, #input-card, .tabs, .bar, .exports, .hits-box, .align-box, .filter-box { display: none; } }
table.hits td.words .clamp { max-width: 460px; }
.version-warn { background: #b00020; color: #fff; padding: 10px 24px; font-weight: 600; }
.filter-box > summary .filt-sum, .align-box > summary { font-weight: 600; }
.filter-box > summary .filt-sum { font-weight: 400; color: var(--muted); }
.align-box .bar, .filter-box .bar:first-of-type { border-top: 0; }
/* views and reference page */
header.top .views { margin-left: auto; display: flex; gap: 6px; }
header.top .views button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ref-h { margin: 0 0 4px; font-size: 17px; }
.ref-bar #ref-q { flex: 1 1 420px; min-width: 260px; }
.ref-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .ref-layout { grid-template-columns: 1fr; } }
.ref-tablewrap { max-height: 640px; }
.ref-table td .clamp { max-width: 300px; }
.ref-pager { margin-top: 6px; color: var(--muted); }
.ref-detail { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; position: sticky; top: 8px; max-height: 88vh; overflow: auto; }
.ref-detail h4 { margin: 12px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ref-head .t { font-size: 16px; font-weight: 600; }
.ref-corpus { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; background: #eef1f6; border-radius: 4px; padding: 1px 6px; color: var(--accent); }
.ref-links { margin: 6px 0; } .ref-links a { color: var(--accent); }
.ref-detail table.kv td:last-child { word-break: break-word; }
.ref-marc-out { white-space: pre-wrap; font-size: 12px; background: #fafaf6; border: 1px solid #eee; padding: 6px; max-height: 360px; overflow: auto; direction: ltr; unicode-bidi: plaintext; }
a.ref-link { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--accent); }
/* login (hosted mode) */
.login-overlay { position: fixed; inset: 0; background: rgba(31, 35, 40, .45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.login-box { width: min(440px, 92vw); margin: 0; }
.login-box h2 { margin: 0 0 6px; font-size: 18px; color: var(--accent); }
.login-box label { margin-top: 10px; }
.login-box input, .login-box select { width: 100%; }
#whoami { margin-left: 12px; } #logout-btn { margin-left: 6px; }