/* Keystone Text: styles for viz.js (charts from the site's own data). Site colors only, so dark mode follows. */

/* shared: two-way switch */
.vzseg { display: inline-flex; border: 1px solid var(--rule); border-radius: 7px; overflow: hidden; margin: 6px 0 8px; }
.vzseg button { all: unset; cursor: pointer; font-size: 12.5px; padding: 5px 10px; background: var(--card); color: var(--ink-2); }
.vzseg button + button { border-left: 1px solid var(--rule); }
.vzseg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.vzseg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vzhl { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; transition: outline-color .3s; }

/* 1. where an issue's verses fall */
.vzstrip svg { display: block; width: 100%; height: auto; margin: 4px 0 0; }
.vzstrip rect.ab { fill: var(--paper-2); }
.vzstrip rect.ab.alt { fill: color-mix(in srgb, var(--paper-2) 70%, var(--rule)); }
.vzstrip rect.sp { fill: color-mix(in srgb, var(--c-anachronisms) 26%, var(--paper-2)); }
.vzstrip rect.sp.alt { fill: color-mix(in srgb, var(--c-anachronisms) 36%, var(--paper-2)); }
.vzstrip .spbr { fill: none; stroke: var(--c-anachronisms); stroke-width: 1.2; }
.vzstrip rect.tick { fill: var(--accent); }
.vzstrip a:hover rect.tick, .vzstrip a:focus rect.tick { fill: var(--ink); }
.vzstrip text.lab { font-size: 10px; fill: var(--ink-3); font-family: var(--f-ui); }
.vzstrip text.lab.sp { fill: var(--c-anachronisms); }

/* 2. chapter heatmap */
.vzheat { display: grid; gap: 3px; margin: 6px 0 8px; }
.vzhrow { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 8px; align-items: center; }
.vzhb { font-size: 12.5px; color: var(--ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vzhrow.sp .vzhb { color: var(--c-anachronisms); }
.vzhc { display: flex; flex-wrap: wrap; gap: 2px; justify-self: start; }
.vzhc a { width: 13px; height: 13px; border-radius: 2px; display: block; }
.vzhc a:hover, .vzhc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.vzheat .h0, .vzheatkey .h0 { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.vzheat .h1, .vzheatkey .h1 { background: color-mix(in srgb, var(--accent) 22%, var(--paper-2)); }
.vzheat .h2, .vzheatkey .h2 { background: color-mix(in srgb, var(--accent) 45%, var(--paper-2)); }
.vzheat .h3, .vzheatkey .h3 { background: color-mix(in srgb, var(--accent) 72%, var(--paper-2)); }
.vzheat .h4, .vzheatkey .h4 { background: var(--accent); }
.vzhrow.sp .vzhc { padding: 2px; margin: -2px; border-radius: 4px; background: color-mix(in srgb, var(--c-anachronisms) 12%, transparent); }
.vzheatkey { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); align-items: center; }
.vzheatkey i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -2px; margin-right: 5px; }
.vzheatkey .hsp { background: color-mix(in srgb, var(--c-anachronisms) 25%, transparent); }
.vzheatbox { margin: 4px 0 16px; }
.vzheatbox > summary { font-size: 14px; }
@media (max-width: 600px) {
  .vzhrow { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .vzhc a { width: 11px; height: 11px; }
}

/* 3. edition family tree */
.vztree { margin: 8px 0 22px; }
.vztbody { display: grid; grid-template-columns: auto minmax(0,1fr); }
.vztbody svg { display: block; }
.vztree .e { fill: none; stroke: var(--ink-3); stroke-width: 1.6; }
.vztree .e.chk { stroke-dasharray: 2 3; stroke: var(--c-kjv-dependence); }
.vztree .e.desc { stroke-dasharray: 6 4; }
.vztree .n { stroke: var(--card); stroke-width: 2; }
.vztree .n.l0 { fill: var(--ink-2); }
.vztree .n.l1 { fill: var(--accent); }
.vztree .n.l2 { fill: var(--c-internal); }
.vztree .n.l3 { fill: var(--c-kjv-dependence); }
.vztree .n.l4 { fill: var(--c-edition-changes); }
.vztrows { list-style: none; margin: 0; padding: 0 0 0 6px; }
.vztrows li { display: flex; align-items: center; }
.vztrows button { all: unset; cursor: pointer; font-size: 13px; line-height: 1.25; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vztrows .k { display: block; }
.vztrows button:hover, .vztrows button:focus-visible { text-decoration: underline; }
.vztrows .y { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.vztrows .c, .vztrows .k { color: var(--ink-3); font-size: 12px; }
.vztrows .k { color: var(--c-kjv-dependence); }
.vztkey { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); margin-top: 8px; align-items: center; }
.vztkey svg { vertical-align: middle; margin-right: 5px; }
ol.timeline li.vzhl { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.chgrid .bars .bar[role="button"] { cursor: pointer; border-radius: 4px; }
.chgrid .bars .bar[role="button"]:hover, .chgrid .bars .bar:focus-visible { background: var(--paper-2); outline: none; }
.chgrid .bars .bar.on { background: var(--paper-2); box-shadow: inset 3px 0 0 var(--accent); }
.vzfilt { margin: 0 0 10px; }
.linkbtn { all: unset; cursor: pointer; color: var(--accent); text-decoration: underline; }

/* 4. who held the records */
.vzcust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px 22px; margin: 12px 0; }
.vzcust section.wide { grid-column: 1 / -1; }
.vzcust h3 { font-family: var(--f-display); font-weight: 400; font-size: 19px; margin: 0 0 8px; }
.vzchain { list-style: none; margin: 0; padding: 0 0 0 14px; position: relative; display: grid; gap: 10px; }
.vzchain::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
.vzchain li { position: relative; display: grid; gap: 1px; font-size: 13.5px; line-height: 1.4; }
.vzchain li::before { content: ""; position: absolute; left: -14px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.vzchain li.imp::before { background: var(--card); box-shadow: inset 0 0 0 2px var(--accent); }
.vzchain li.vzmerge { color: var(--ink-3); font-style: italic; font-size: 12.5px; }
.vzchain li.vzmerge::before { background: var(--ink-3); width: 6px; height: 6px; left: -12px; top: 6px; }
.vzchain.row { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-left: 0; }
.vzchain.row::before { display: none; }
.vzchain.row li { padding-left: 16px; }
.vzchain.row li::before { left: 0; }
.vzk { font-weight: 600; }
.vzy { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); }
.vzh { font-size: 12.5px; color: var(--ink-2); }
.vzkey { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); margin: 0; }
.vzkey i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; background: var(--accent); }
.vzkey .imp i { background: var(--card); box-shadow: inset 0 0 0 2px var(--accent); }

/* 5. record keepers' years */
.vzkeep > svg { display: block; width: 100%; height: auto; max-width: 760px; margin: 8px 0 4px; }
.vzkeep .kn { font-size: 13px; fill: var(--ink); font-family: var(--f-ui); }
.vzkeep .kt { font-size: 11px; fill: var(--ink-3); font-family: var(--f-mono); }
.vzkeep .km { font-size: 11px; fill: var(--ink-2); font-family: var(--f-mono); }
.vzkeep .kg { stroke: var(--rule); stroke-width: 1; }
.vzkeep .ksign { stroke: var(--mark); stroke-width: 1.5; stroke-dasharray: 4 3; }
.vzkeep .kspan { stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 6; stroke-linecap: round; }
.vzkeep .kp { fill: var(--accent); stroke: var(--card); stroke-width: 1.5; }
.vzkeep .kp.born-by, .vzkeep .kp.born-after, .vzkeep .kp.death-by, .vzkeep .kp.handoff-by { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
.vzkeep .kp.handoff { fill: var(--c-internal); }
.vzkeep .mxlegend svg { vertical-align: -1px; margin-right: 5px; }
.vzkeep .khit { fill: transparent; }
.vzkeep .kpt { cursor: pointer; }
.vzkeep .kpt:hover .kp, .vzkeep .kpt:focus-visible .kp { stroke: var(--ink); stroke-width: 2.5; }
.vzkeep .kpt:focus { outline: none; }
.vzkeep .kpt:focus-visible .khit { stroke: var(--accent); stroke-width: 2; }
.vzkl { font-size: 13.5px; line-height: 1.55; padding-left: 18px; }
@media (max-width: 600px) { .vzkeep .kn { font-size: 13px; } .vzkeep .kt, .vzkeep .km { font-size: 12px; } }

/* 6. when the accounts were recorded */
.vzwit > svg { display: block; width: 100%; height: auto; max-width: 760px; margin: 6px 0 2px; }
.vzwit .wg { stroke: var(--ink-3); stroke-width: 1; }
.vzwit .wt { font-size: 11px; fill: var(--ink-2); font-family: var(--f-mono); }
.vzwit .wwin { fill: var(--mark-bg); }
.vzwit circle { stroke: var(--card); stroke-width: 2; cursor: pointer; }
.vzwit a:hover circle, .vzwit a:focus circle { stroke: var(--ink); }
.vzwit .wsw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 600px) { .vzwit .wt { font-size: 18px; } }