/* MACULA construction search (macula.html) */
:root {
  --greek: "Gentium Plus", "SBL Greek", "Galatia SIL", "Cardo", "Times New Roman", serif;
  --n1: #c9ddf3; --n2: #f6d5a8; --n3: #cfe8c4; --n4: #ecc8e6; --n5: #f3e39b; --n6: #c8e6e6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --n1: #284766; --n2: #634420; --n3: #2f5528; --n4: #5a2f55; --n5: #5c5218; --n6: #24504f; }
}
:root[data-theme="dark"] { --n1: #284766; --n2: #634420; --n3: #2f5528; --n4: #5a2f55; --n5: #5c5218; --n6: #24504f; }

.mq-back { font-size: 13px; }
.mq-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--qw, 620px) 5px minmax(0, 1fr); }
.mq-split { cursor: col-resize; background: var(--line); }
.mq-split:hover { background: var(--accent); }
.mq-query { overflow-y: auto; overflow-x: hidden; background: var(--panel); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.mq-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.mq-tools select { max-width: 230px; }
.mq-actions { display: flex; gap: 6px; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.mq-help p { margin: 0 0 6px; }

/* pattern nodes */
.mq-node { border: 1px solid var(--line); border-left: 4px solid var(--nc, var(--line)); border-radius: 5px; padding: 6px 6px 6px 8px; background: var(--bg); }
.mq-node.neg { border-left-style: dashed; opacity: .85; }
.mq-nhead { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.mq-num { font-weight: 700; min-width: 22px; text-align: center; border-radius: 9px; padding: 0 5px; background: var(--nc, var(--chip)); }
.mq-nhead label { display: inline-flex; gap: 3px; align-items: center; color: var(--muted); }
.mq-nhead .mq-links { margin-left: auto; display: inline-flex; gap: 8px; }
.mq-nhead .mq-links a { font-size: 12px; }
.mq-nhead .mq-x:hover { color: #c0392b; }
.mq-conds { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.mq-cond { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mq-cond select { padding: 1px 4px; font-size: 13px; }
.mq-cond .mq-attr { width: 150px; max-width: 45%; }
.mq-cond input { flex: 1; min-width: 80px; font-size: 13px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.mq-cond input.he { font-size: 17px; padding: 0 5px; }
.mq-cond .mq-cx { margin-left: 0; }
.mq-cond select.mq-val { flex: 1; min-width: 80px; }
.mq-cond input.bad { border-color: #c0392b; background: #fdecea; color: #8e2a1f; }
.mq-in { flex: 1; display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; min-width: 120px; }
.mq-in .chip { color: var(--ink); font-size: 12px; }
.mq-in select { font-size: 12px; padding: 0 3px; }
.mq-empty { font-size: 12px; color: var(--muted); }

/* the palette and the field */
.vq-palette { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; }
.vq-palette.trash { border-color: #c0392b; box-shadow: 0 0 0 2px #c0392b55; }
.vq-prow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.vq-phead { width: 50px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.vq-item { font-size: 12px; padding: 1px 8px; border: 1px solid var(--line); background: var(--panel); cursor: grab; user-select: none; }
.vq-item.g { border-radius: 3px; font-weight: 600; }
.vq-item.w { border-radius: 10px; }
.vq-item.r { border-radius: 10px; border-style: dashed; font-weight: 600; }
.vq-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.vr-v { color: var(--c-v); } .vr-s { color: var(--c-s); } .vr-o { color: var(--c-o); } .vr-o2 { color: var(--c-o2); }
.vr-p { color: var(--c-p); } .vr-pp { color: var(--c-pp); } .vr-adv { color: var(--c-adv); }
.vr-io { color: var(--c-io); } .vr-vc { color: var(--c-vc); } .vr-aux { color: var(--c-aux); }
.vq-field { min-height: 170px; overflow: auto; border: 2px dashed var(--line); border-radius: 6px; padding: 8px; background: var(--bg); flex: none; }
.vq-field.drop-on { border-color: var(--accent); background: var(--accent-soft); }
.vq-empty { color: var(--muted); text-align: center; padding: 60px 10px; font-size: 13px; }
.vq-wrap { display: none; text-align: center; font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 4px; padding: 3px; margin-bottom: 8px; }
body.vq-dragging:not(.vq-moving) .vq-wrap { display: block; }
.vq-wrap.drop-on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.vq-tree, .vq-kids { list-style: none; margin: 0; padding: 0; display: flex; direction: rtl; }
.vq-tree { width: max-content; margin: 0 auto; }
.vq-kids { position: relative; padding-top: 10px; justify-content: center; }
.vq-kids::before { content: ""; position: absolute; top: 0; left: 50%; height: 10px; border-left: 1px solid var(--muted); }
.vq-li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 4px; }
.vq-kids > .vq-li { padding-top: 12px; }
.vq-kids > .vq-li::before { content: ""; position: absolute; top: 0; left: 50%; height: 12px; border-left: 1px solid var(--muted); }
.vq-kids > .vq-li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--muted); }
.vq-kids > .vq-li:first-child::after { inset-inline-start: 50%; }
.vq-kids > .vq-li:last-child::after { inset-inline-end: 50%; }
.vq-kids > .vq-li:only-child::after { display: none; }
.vq-kids > .vq-li.rel-desc::before, .vq-kids > .vq-li.rel-self::before { border-left-style: dashed; }
.vq-card { position: relative; direction: ltr; min-width: 84px; max-width: 190px; padding: 13px 8px 5px; border: 1px solid var(--line);
  border-top: 5px solid var(--nc, var(--line)); border-radius: 5px; background: var(--panel); text-align: center; font-size: 12px; cursor: pointer; }
.vq-card[draggable="true"] { cursor: grab; }
.vq-card.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.vq-card.neg { border-style: dashed; border-top-style: solid; opacity: .8; }
.vq-num { position: absolute; top: 1px; left: 4px; font-size: 10px; color: var(--muted); }
.vq-x { position: absolute; top: -1px; right: 3px; font-size: 14px; line-height: 1; padding: 1px 2px; color: var(--muted); cursor: pointer; opacity: .55; }
.vq-card:hover .vq-x, .vq-card.sel .vq-x { opacity: 1; }
.vq-x:hover { color: #c0392b; }
.vq-not { position: absolute; top: 1px; right: 18px; font-size: 10px; font-weight: 700; color: #c0392b; text-transform: uppercase; }
.vq-rel { font-size: 10px; color: var(--muted); font-style: italic; }
.vq-title { font-weight: 700; font-size: 13px; }
.vq-role { display: inline-block; font-size: 11px; font-weight: 600; border: 1px solid currentColor; border-radius: 8px; padding: 0 6px; margin: 2px 0; }
.vq-cline { color: var(--muted); overflow-wrap: anywhere; }
.vq-cline .he { font-size: 16px; color: var(--ink); }
.vq-cline.bad { color: #c0392b; }
.vq-ord { font-size: 10px; color: var(--muted); border-top: 1px dotted var(--line); margin-top: 3px; }
.vq-card.drop-in { outline: 2px dashed var(--accent); background: var(--accent-soft); }
.vq-card.drop-before { box-shadow: 5px 0 0 var(--accent); }
.vq-card.drop-after { box-shadow: -5px 0 0 var(--accent); }
.lang-el .vq-tree, .lang-el .vq-kids { direction: ltr; }
.lang-el .vq-card.drop-before { box-shadow: -5px 0 0 var(--accent); }
.lang-el .vq-card.drop-after { box-shadow: 5px 0 0 var(--accent); }

/* Greek: the text's script and direction */
.lang-el .he { font-family: var(--greek); direction: ltr; }
.lang-el .mq-text { font-size: 19px; }
.lang-el .tx-heb { direction: ltr; text-align: left; font-size: 19px; padding-right: 0; padding-left: calc(var(--d, 0) * 2rem + .4rem); }
body:not(.lang-el) .gk-only { display: none; }

/* node colours (by node number, in pattern order) */
.c1 { --nc: var(--n1); } .c2 { --nc: var(--n2); } .c3 { --nc: var(--n3); }
.c4 { --nc: var(--n4); } .c5 { --nc: var(--n5); } .c6 { --nc: var(--n6); }

/* results */
.mq-results { display: flex; flex-direction: column; min-height: 0; }
.mq-rhead { display: flex; gap: 10px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
#mq-pager { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.mq-tally { padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.mq-tally table { border-collapse: collapse; margin-top: 6px; max-height: 260px; display: block; overflow-y: auto; }
.mq-tally td { padding: 1px 10px 1px 0; }
.mq-tally td.n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.mq-tally td .he { font-size: 17px; }
.mq-tally tr.pick { cursor: pointer; }
.mq-tally tr.pick:hover td { background: var(--accent-soft); }
.mq-hits { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.mq-hit { padding: 6px 12px; border-bottom: 1px solid var(--line); }
.mq-hrow { display: flex; gap: 10px; align-items: baseline; }
.mq-ref { flex: none; width: 82px; font-size: 13px; color: var(--muted); }
.mq-text { flex: 1; font-size: 21px; line-height: 1.7; }
.mq-text .r { background: var(--n1); border-radius: 3px; }
.mq-text .m { background: var(--nc); border-radius: 3px; }
.mq-text .gap { color: var(--muted); }
.mq-tbtn, .mq-xbtn { flex: none; font-size: 12px; }
.mq-tree { margin: 6px 0 2px 92px; font-size: 13px; }
.mq-trees .mq-tree + .mq-tree { border-top: 1px dashed var(--line); padding-top: 4px; }
.mq-tree ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px dotted var(--line); }
.mq-tree > ul { padding-left: 0; border-left: 0; }
.mq-tree li { padding: 1px 0; }
.mq-tree .g { font-weight: 600; }
.mq-tree .rule { color: var(--muted); font-weight: 400; }
.mq-tree .role { font-size: 11px; background: var(--chip); border-radius: 8px; padding: 0 6px; margin-right: 4px; }
.mq-tree .bound { background: var(--nc); border-radius: 3px; padding: 0 3px; }
.mq-tree .w .he { font-size: 18px; }
.mq-tree .info { color: var(--muted); }
.mq-msg { padding: 14px; color: var(--muted); }
.mq-msg.err { color: #c0392b; }

/* tabs and the text view */
.mq-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.mq-tabs button { border: 0; border-radius: 0; padding: 2px 12px; }
.mq-tabs button + button { border-left: 1px solid var(--line); }
.mq-tabs button.on { background: var(--accent); color: #fff; }
.mq-rhead .mq-for-text { display: inline-flex; gap: 4px; align-items: center; }
.mq-rbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mq-rbody[hidden], .mq-for-text[hidden], .mq-for-results[hidden] { display: none; }
.mq-ref.go { cursor: pointer; }
.mq-ref.go:hover { color: var(--accent); text-decoration: underline; }
:root {
  --c-v: #c0392b; --c-s: #1f5fa8; --c-o: #2e7d32; --c-o2: #00796b; --c-p: #7b3fa0; --c-pp: #b4610f; --c-adv: #7a6a00;
  --c-io: #a3336d; --c-vc: #8a4b2a; --c-aux: #b03a48;
  --p0: #c0392b; --p1: #1f5fa8; --p2: #2e7d32; --p3: #b4610f; --p4: #7b3fa0; --p5: #00796b; --p6: #a3336d; --p7: #5d6d00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-v: #ff8a7a; --c-s: #7fb2ff; --c-o: #7fd18a; --c-o2: #5fd1c0; --c-p: #d29cf0; --c-pp: #f0a85a; --c-adv: #d6c65a;
    --c-io: #f08cc0; --c-vc: #d9a07a; --c-aux: #ff9aa6;
    --p0: #ff8a7a; --p1: #7fb2ff; --p2: #7fd18a; --p3: #f0a85a; --p4: #d29cf0; --p5: #5fd1c0; --p6: #f08cc0; --p7: #c2d65a;
  }
}
:root[data-theme="dark"] {
  --c-v: #ff8a7a; --c-s: #7fb2ff; --c-o: #7fd18a; --c-o2: #5fd1c0; --c-p: #d29cf0; --c-pp: #f0a85a; --c-adv: #d6c65a;
  --c-io: #f08cc0; --c-vc: #d9a07a; --c-aux: #ff9aa6;
  --p0: #ff8a7a; --p1: #7fb2ff; --p2: #7fd18a; --p3: #f0a85a; --p4: #d29cf0; --p5: #5fd1c0; --p6: #f08cc0; --p7: #c2d65a;
}
.tx-sel { padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; min-height: 38px; }
.tx-crumbs { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.tx-crumbs .sep { color: var(--muted); padding: 0 2px; }
.tx-crumbs button { padding: 0 6px; font-size: 12px; }
.tx-crumbs button.on { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.tx-crumbs .he { font-size: 15px; }
.tx-tag { color: var(--muted); font-weight: normal; }
.tx-crumbs .tx-more { color: var(--muted); padding: 0 5px; }
.tx-fewer { font-size: 12px; margin-inline-start: 8px; cursor: pointer; color: var(--accent); }
.tx-legend { padding: 3px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.tx-legend b { font-weight: 600; margin-right: 8px; }
.tx-legend.mode-phrase, .tx-legend.mode-plain { display: none; }
.tx-text { flex: 1; overflow-y: auto; padding: 8px 12px 40px; }
.tx-line { display: grid; grid-template-columns: 1fr 64px; align-items: baseline; }
.tx-line.first { border-top: 1px solid var(--line); padding-top: 3px; margin-top: 3px; }
.tx-heb { font-family: var(--hebrew); direction: rtl; text-align: right; font-size: 22px; line-height: 1.75;
  padding-right: calc(var(--d, 0) * 2rem + .4rem); }
.tx-ref { text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tw { cursor: pointer; border-radius: 3px; }
.tw:hover { background: var(--chip); }
.tw.sel { background: var(--hit); }
.tw.hitw { box-shadow: inset 0 -3px 0 var(--accent); }
.ts.sel { background: var(--hit); }
.ts.hitw { box-shadow: inset 0 -3px 0 var(--accent); }
.tw.peek, .ts.peek { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.mode-role .r-v { color: var(--c-v); font-weight: 600; } .mode-role .r-s { color: var(--c-s); }
.mode-role .r-o { color: var(--c-o); } .mode-role .r-o2 { color: var(--c-o2); } .mode-role .r-p { color: var(--c-p); }
.mode-role .r-pp { color: var(--c-pp); } .mode-role .r-adv { color: var(--c-adv); }
.mode-role .r-io { color: var(--c-io); } .mode-role .r-vc { color: var(--c-vc); } .mode-role .r-aux { color: var(--c-aux); }
.mode-phrase .p0 { color: var(--p0); } .mode-phrase .p1 { color: var(--p1); } .mode-phrase .p2 { color: var(--p2); }
.mode-phrase .p3 { color: var(--p3); } .mode-phrase .p4 { color: var(--p4); } .mode-phrase .p5 { color: var(--p5); }
.mode-phrase .p6 { color: var(--p6); } .mode-phrase .p7 { color: var(--p7); }