/* The Bible in world history guide (/uses/bible-history): parchment and ink. One colour per chronology on every band,
   mark, key and card (Ussher umber, the 1446 BC chronology deep green, critical scholarship slate); the ancient world in
   quiet greys, inked where the chosen event's column lights it; ancient records in red. Marks meet 3:1 on their bands;
   text meets 4.5:1. */
.pg-hist-guide {
    --h-ink: #2a251f;
    --h-soft: #5a5146;
    --h-parchment: #fbf7ef;
    --h-line: #e6dccb;
    --s-ussher: #8a4b14;
    --s-conservative: #1f6a4f;
    --s-critical: #4a5a70;
    --h-record: #9c2f2f;
    --toc-group: var(--s-ussher);
}
.pg-hist-guide .eyebrow { color: var(--s-ussher); }
/* The guide's own accent (umber, 8:1 on white) for its links, buttons and "In this guide", through the site's own variable;
   the Data Pass offer below the guide keeps the site's blue. */
.pg-hist-guide :is(.pg-header, .pg-hist-hero, .pg-hist-reader, .pg-guide-layout) { --accent: #7a3f10; --accent-dark: #5c2e0a; }
.pg-hist-guide :is(.pg-hist-hero, .pg-hist-reader, .pg-hist-section, .pg-guide-build, .pg-guide-fields) { scroll-margin-top: 24px; }
.pg-sys-ussher { --s: var(--s-ussher); }
.pg-sys-conservative { --s: var(--s-conservative); }
.pg-sys-critical { --s: var(--s-critical); }
.pg-win-all { --s: var(--accent, #7a3f10); }
.pg-win-ussher { --s: var(--s-ussher); }
.pg-win-conservative { --s: var(--s-conservative); }
.pg-win-critical { --s: var(--s-critical); }

/* ---- The timeline ---- */
.pg-hist-hero { position: relative; margin: 4px 0 28px; padding: 30px 30px 24px; border: 1px solid var(--h-line); border-radius: 18px; background: var(--h-parchment); color: var(--h-ink); }
.pg-hist-hero h2 { margin: 0 0 10px; }
.pg-hist-intro { max-width: 820px; margin: 0; line-height: 1.65; color: var(--h-soft); font-size: .96rem; }
.pg-hist-systems { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.pg-hist-systems button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px 7px 12px; border: 1px solid #cbbfa9; border-radius: 999px; background: #fff; color: var(--h-ink); font: inherit; font-size: .88rem; cursor: pointer; }
.pg-hist-systems button:hover { border-color: var(--h-ink); }
.pg-hist-systems button[aria-pressed="true"] { border-color: var(--h-ink); background: var(--h-ink); color: #fff; }
/* Without JavaScript the buttons stay disabled: a plain colour key, with no "compare all three" control that does nothing. */
.pg-hist-systems button:disabled { border-color: transparent; background: none; color: var(--h-ink); cursor: default; padding-left: 0; }
.pg-hist-systems button:disabled[data-system="all"], .pg-hist-systems:has(button:disabled) + .pg-hist-system-line { display: none; }
/* The buttons are the line's key: each shows its chronology's colour. */
.pg-hist-keys { display: inline-flex; gap: 3px; }
.pg-hist-keys i { width: 10px; height: 10px; border-radius: 50%; background: var(--s); }
.pg-hist-systems button[aria-pressed="true"] .pg-hist-keys i { box-shadow: 0 0 0 1.5px #fff; }
.pg-hist-system-line { min-height: 1.5em; margin: 0 0 14px; font-size: .86rem; color: var(--h-soft); }
.pg-hist-figure { position: relative; margin: 0; container-type: inline-size; }
.pg-hist-canvas { position: relative; }
.pg-hist-line { display: block; width: 100%; height: auto; }
.pg-band rect { fill: color-mix(in srgb, var(--s) 7%, #fff); }
.pg-records-band { --s: var(--h-record); }
.pg-lane rect { fill: #fff; }
.pg-lane:nth-of-type(even) rect { fill: #f6f3ec; }
.pg-tick line { stroke: #ddd3c2; stroke-dasharray: 2 3; }
.pg-tick text { font: 600 10px system-ui, sans-serif; fill: var(--h-soft); text-anchor: middle; }
.pg-note line { stroke: var(--h-record); stroke-width: 1.2; stroke-dasharray: 4 3; }
.pg-note text { font: 700 9.5px system-ui, sans-serif; fill: var(--h-record); }
.pg-note-records text { text-anchor: end; }
.pg-note-agree line { stroke: var(--h-ink); }
.pg-note-agree text { fill: var(--h-ink); }
/* The chosen event's column: 25 years either side of each of its dates, in the colour of the chronology it follows
   (umber where they agree). The world's marks inside it that the reader names are inked; the rest stay grey. */
.pg-win { fill: color-mix(in srgb, var(--s) 13%, transparent); stroke: color-mix(in srgb, var(--s) 45%, transparent); stroke-width: .8; }
.pg-period { fill: #a9a090; }
.pg-moment { fill: #7c7365; }
.pg-world :is(.pg-period, .pg-moment) { stroke: transparent; stroke-width: 4; }
.pg-world .pg-near { fill: var(--h-ink); }
.pg-world :is(.pg-period, .pg-moment):hover { fill: var(--accent); }
.pg-records path { fill: var(--h-record); stroke: #fff; stroke-width: 1; }
.pg-records a:hover path, .pg-records a:focus-visible path, .pg-records a[aria-expanded="true"] path { fill: var(--h-ink); }
.pg-events a { cursor: pointer; }
/* A mark or diamond chosen with the mouse keeps no ring; one given focus back by Escape shows the site's. */
.pg-hist-line a:focus:not(:focus-visible) { outline: none; }
.pg-hit { fill: transparent; }
.pg-join { fill: none; stroke: #b9ad97; stroke-width: .8; opacity: .7; pointer-events: none; }
.pg-mark { fill: var(--s); opacity: .55; pointer-events: none; }
.pg-events a:hover .pg-mark, .pg-events a:focus-visible .pg-mark { opacity: 1; }
.pg-events a:hover .pg-join { stroke: var(--h-ink); opacity: 1; }
.pg-events a.pg-on .pg-mark { opacity: 1; stroke: var(--h-ink); stroke-width: 1.6; }
.pg-events a.pg-on .pg-join { stroke: var(--h-ink); stroke-width: 1.6; opacity: 1; }
/* One chronology brought forward: the other two fade. */
.pg-hist-line[data-system="ussher"] :is(.pg-mark, .pg-band):not(.pg-sys-ussher),
.pg-hist-line[data-system="conservative"] :is(.pg-mark, .pg-band):not(.pg-sys-conservative),
.pg-hist-line[data-system="critical"] :is(.pg-mark, .pg-band):not(.pg-sys-critical) { opacity: .15; }
.pg-hist-line:not([data-system="all"]) .pg-join { opacity: .2; }
.pg-hist-line:not([data-system="all"]) .pg-records-band { opacity: 1; }
.pg-hist-figure:has(.pg-hist-line[data-system="ussher"]) .pg-hist-row-band:not(.pg-sys-ussher),
.pg-hist-figure:has(.pg-hist-line[data-system="conservative"]) .pg-hist-row-band:not(.pg-sys-conservative),
.pg-hist-figure:has(.pg-hist-line[data-system="critical"]) .pg-hist-row-band:not(.pg-sys-critical) { opacity: .35; }
/* The rows' names: in the line's own margin, and kept in view when the line scrolls sideways on a narrow screen. */
.pg-hist-rows { position: absolute; inset: 0; pointer-events: none; }
.pg-hist-row { position: absolute; left: 0; right: 0; display: flex; align-items: center; margin: 0; }
.pg-hist-row > span { position: sticky; left: 0; padding: 0 6px; border-radius: 0 6px 6px 0; font: 600 .7rem/1.2 system-ui, sans-serif; color: var(--h-soft); white-space: nowrap; }
.pg-hist-row-band > span, .pg-hist-row-records > span { font-size: .76rem; font-weight: 700; color: color-mix(in srgb, var(--s) 85%, #000); }
.pg-hist-row-records { --s: var(--h-record); }
.pg-hist-row .pg-short { display: none; }
.pg-hist-caption { margin-top: 14px; font-size: .84rem; line-height: 1.55; color: var(--h-soft); }
.pg-hist-swipe { display: none; margin: 0 0 6px; font-size: .8rem; color: var(--h-soft); }
@media (hover: none) { .pg-hist-pointer { display: none; } }
/* What pointing names: the house's dark tip, above the mark, inside the figure. */
.pg-hist-tip { position: absolute; z-index: 6; max-width: min(320px, 90%); padding: 7px 11px; border-radius: 8px; background: var(--h-ink); color: #fff; font-size: .78rem; line-height: 1.4; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); }
.pg-hist-tip[hidden] { display: none; }
.pg-hist-tip strong { display: block; font-size: .85rem; }
.pg-hist-tip span { color: #ddd3c2; }
.pg-hist-tip.pg-below { transform: translate(-50%, 10px); }
/* An ancient record opened from its diamond. */
.pg-hist-card { border-color: #d9c9b1; color: var(--h-ink); box-shadow: 0 12px 38px #2a251f26; }
.pg-hist-card h3 { padding-left: 22px; position: relative; }
.pg-hist-card h3::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 10px; background: var(--h-record); transform: rotate(45deg); }
.pg-hist-card .pg-hist-card-when { color: var(--h-soft); font-weight: 600; }
.pg-hist-card .pg-hist-card-links a, .pg-hist-card-more { display: inline-block; margin: 2px 12px 0 0; }
.pg-hist-card-more { font-weight: 600; }
.pg-hist-card .pg-card-close:hover { background: #f2ede3; }

/* The chosen event, under the line: its dates in each chronology's colour, and how far apart they are. */
.pg-hist-chosen { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin: 12px 0; padding: 14px 18px; border: 1px solid var(--h-line); border-left: 4px solid var(--h-ink); border-radius: 12px; background: #fff; }
.pg-hist-chosen-text { flex: 1 1 520px; min-width: 0; }
.pg-hist-chosen-about { margin: 0 0 2px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--h-soft); }
.pg-hist-chosen-name { margin: 0 0 8px; font-size: 1.15rem; line-height: 1.35; }
.pg-hist-chosen-dates { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; padding: 0; list-style: none; font-size: .88rem; color: var(--h-soft); }
.pg-hist-chosen-dates li { display: inline-flex; align-items: baseline; gap: 6px; }
.pg-hist-chosen-dates i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--s); align-self: center; }
.pg-hist-chosen-dates b { color: color-mix(in srgb, var(--s) 80%, #000); }
.pg-hist-chosen-dates .pg-undated i { background: none; box-shadow: inset 0 0 0 1.5px var(--s); }
.pg-hist-chosen-dates .pg-undated b { color: var(--h-soft); font-weight: 600; }
.pg-hist-chosen-agree { margin: 0; font-size: .88rem; line-height: 1.5; }
.pg-hist-chosen-agree.pg-far { color: #7d2525; }
.pg-hist-chosen-go { flex: none; font-weight: 600; }
.pg-hist-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pg-hist-start-label { margin: 0; font-size: .86rem; font-weight: 600; color: var(--h-soft); }
.pg-hist-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-hist-suggest a { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 13px; border: 1px solid var(--h-line); border-radius: 999px; background: #fff; color: var(--h-ink); font-size: .86rem; text-decoration: none; }
.pg-hist-suggest a:hover { border-color: var(--h-ink); }
.pg-hist-suggest a[aria-current="true"] { border-color: var(--h-ink); box-shadow: inset 0 0 0 1px var(--h-ink); font-weight: 600; }

/* ---- The reader ---- */
.pg-hist-reader { margin: 0 0 44px; }
.pg-hist-choose { margin-bottom: 18px; }
.pg-hist-choose > label { display: block; margin-bottom: 6px; font-weight: 700; }
.pg-hist-choose-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-hist-choose select { flex: 0 1 420px; min-width: 0; padding: 10px 12px; font-size: 1rem; border: 1px solid #c3b8a3; border-radius: 10px; background: #fff; color: var(--h-ink); }
.pg-hist-error { margin: 10px 0 0; color: #8f1d14; font-weight: 600; }
.pg-hist-read h2 { margin: 0 0 8px; font-size: 1.7rem; }
.pg-hist-summary { max-width: 820px; margin: 0 0 6px; line-height: 1.65; }
.pg-hist-passage { margin: 0 0 16px; color: var(--h-soft); }
.pg-hist-passage a, .pg-hist-records a, .pg-hist-card-links a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.pg-hist-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.pg-hist-date { padding: 14px 16px; border: 1px solid var(--h-line); border-top: 4px solid var(--s); border-radius: 12px; background: #fff; }
.pg-hist-date h3 { margin: 0 0 6px; font-size: .86rem; color: color-mix(in srgb, var(--s) 85%, #000); }
.pg-hist-when { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.pg-hist-kind { display: inline-block; margin: 0 0 6px; padding: 1px 8px; border-radius: 999px; background: #f2ede3; font-size: .74rem; font-weight: 700; color: var(--h-soft); }
.pg-hist-basis { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--h-soft); }
.pg-undated .pg-hist-when { color: var(--h-soft); font-weight: 600; }
.pg-hist-apart { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--s-conservative); background: #f1f6f2; line-height: 1.55; }
.pg-hist-apart.pg-far { border-left-color: var(--h-record); background: #fbf2ee; }
.pg-hist-records, .pg-hist-elsewhere { margin: 0 0 16px; }
.pg-hist-records h3, .pg-hist-elsewhere h3 { margin: 0 0 8px; font-size: 1.02rem; }
.pg-hist-records p { margin: 0 0 6px; line-height: 1.55; }
.pg-hist-note { margin: 0 0 16px; color: var(--h-soft); line-height: 1.55; }
.pg-hist-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pg-hist-group { padding: 12px 14px; border: 1px solid var(--h-line); border-top: 3px solid color-mix(in srgb, var(--s) 70%, #fff); border-radius: 12px; background: #fff; }
.pg-hist-group-head { margin: 0 0 6px; font-weight: 700; }
.pg-hist-group-head span { margin-left: 6px; font-weight: 400; color: var(--h-soft); }
.pg-hist-groups ul { margin: 0; padding: 0; list-style: none; }
.pg-hist-groups li { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 10px; padding: 3px 0; font-size: .88rem; line-height: 1.45; }
.pg-hist-region { color: var(--h-soft); font-size: .8rem; font-weight: 700; line-height: 1.6; }
.pg-hist-span { color: var(--h-soft); font-size: .8rem; white-space: nowrap; }
.pg-hist-none { margin: 0; color: var(--h-soft); font-size: .86rem; }
.pg-hist-caution, .pg-hist-sources { margin: 8px 0 0; font-size: .84rem; color: var(--h-soft); line-height: 1.55; }

/* ---- Records, differences, study ---- */
.pg-hist-section { margin: 0 0 44px; }
.pg-hist-lead { max-width: 780px; line-height: 1.65; color: var(--h-soft); }
.pg-hist-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pg-hist-cards article { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--h-line); border-left: 4px solid var(--h-record); border-radius: 12px; background: #fff; scroll-margin-top: 24px; }
.pg-hist-cards .pg-hist-card-links { margin-top: auto; padding-top: 4px; }
.pg-hist-cards article:target { outline: 2px solid var(--h-record); outline-offset: 2px; }
.pg-hist-cards h3 { margin: 0 0 4px; font-size: 1rem; }
.pg-hist-cards p { margin: 0 0 6px; font-size: .88rem; line-height: 1.55; }
.pg-hist-card-when { color: var(--h-soft); font-weight: 600; }
.pg-hist-card-meta { color: var(--h-soft); }
.pg-hist-card-links a { display: inline-block; margin: 2px 10px 0 0; }
.pg-hist-differ { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pg-hist-differ article { padding: 14px 16px; border: 1px solid var(--h-line); border-radius: 12px; background: var(--h-parchment); }
.pg-hist-differ h3 { margin: 0 0 6px; font-size: 1rem; }
.pg-hist-differ p { margin: 0; font-size: .9rem; line-height: 1.6; }
/* Same Bible, different arithmetic: each chronology's stretches of years as measuring rods on one scale. */
.pg-hist-rods { margin: 18px 0 16px; padding: 18px 20px 14px; border: 1px solid var(--h-line); border-radius: 14px; background: var(--h-parchment); container-type: inline-size; }
.pg-hist-rods-body { --name: 146px; }
.pg-hist-rod-row { display: grid; grid-template-columns: var(--name) minmax(0, 1fr); align-items: center; }
.pg-hist-rod-name { margin: 0; padding-right: 10px; font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--s) 85%, #000); }
.pg-hist-rod-track { position: relative; height: 30px; }
.pg-hist-rod { position: absolute; top: 3px; bottom: 3px; display: flex; align-items: center; justify-content: center; container-type: inline-size; border: 1.5px solid var(--s); border-radius: 4px; background: color-mix(in srgb, var(--s) 12%, #fff); color: color-mix(in srgb, var(--s) 80%, #000); font-size: .78rem; white-space: nowrap; }
.pg-hist-rod + .pg-hist-rod { border-left-width: 0; border-radius: 0 4px 4px 0; }
.pg-hist-rod:has(+ .pg-hist-rod) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pg-hist-rod b { font-weight: 700; }
.pg-hist-rod-none { position: absolute; left: 0; top: 3px; bottom: 3px; display: flex; align-items: center; padding-left: 10px; border-radius: 4px; background: repeating-linear-gradient(135deg, #efe8db 0 6px, transparent 6px 12px); color: var(--h-soft); font-size: .76rem; font-style: italic; white-space: nowrap; overflow: hidden; }
@container (max-width: 190px) { .pg-hist-rod-words { display: none; } }
@container (max-width: 64px) { .pg-hist-rod-unit { display: none; } }
.pg-hist-rod-gaps { position: relative; height: 46px; margin-left: var(--name); }
.pg-hist-rod-gaps svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pg-hist-rod-gaps line { stroke: var(--h-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pg-hist-rod-gaps > span { position: absolute; top: 50%; transform: translate(-50%, -50%); padding: 1px 7px; border-radius: 999px; background: var(--h-parchment); font-size: .76rem; color: var(--h-ink); white-space: nowrap; }
.pg-hist-rod-names { height: 22px; }
.pg-hist-rod-names > span { top: auto; bottom: 2px; transform: translateX(-50%); padding: 0; background: none; font-size: .74rem; font-weight: 700; color: var(--h-soft); }
.pg-hist-rod-names > span:last-child { transform: translateX(-85%); }
.pg-hist-rod-axis { position: relative; height: 22px; margin: 6px 0 0 var(--name); border-top: 1px solid #d9cdb8; }
.pg-hist-rod-axis span { position: absolute; top: 4px; transform: translateX(-50%); font-size: .72rem; font-weight: 600; color: var(--h-soft); white-space: nowrap; }
.pg-hist-rods-caption { margin: 10px 0 0; font-size: .84rem; line-height: 1.55; color: var(--h-soft); }
.pg-hist-rods .pg-short { display: none; }
/* Short event names once the four would crowd each other. */
@container (max-width: 800px) {
    .pg-hist-rods .pg-long { display: none; }
    .pg-hist-rods .pg-short { display: inline; }
}
@container (max-width: 560px) {
    .pg-hist-rods-body { --name: 0px; }
    .pg-hist-rod-row { grid-template-columns: minmax(0, 1fr); }
    .pg-hist-rod-name { margin-top: 6px; font-size: .74rem; }
    .pg-hist-rod-axis .pg-minor { display: none; }
    .pg-hist-rod-gaps > span { padding: 1px 3px; font-size: .7rem; }
    .pg-hist-rod { font-size: .7rem; }
    /* Four names on a narrow scale: every other one on a second line, so the temple and Samaria never touch. */
    .pg-hist-rod-names { height: 40px; }
    .pg-hist-rod-names > span { font-size: .7rem; line-height: 16px; }
    .pg-hist-rod-names > span:nth-child(odd) { bottom: 21px; }
}
.pg-hist-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pg-hist-ideas article { padding: 16px 18px; border: 1px solid var(--h-line); border-radius: 14px; background: #fff; }
.pg-hist-ideas h3 { margin: 4px 0 6px; font-size: 1.02rem; }
.pg-hist-ideas p { margin: 0; line-height: 1.6; font-size: .92rem; }
.pg-hist-ideas .pg-level-tag { font-size: .76rem; font-weight: 700; color: var(--s-ussher); }
/* Sources and limits in the guide's own parchment, its padding the only space around its heading. */
.pg-hist-guide .project-detail { margin: 30px 0 0; background: var(--h-parchment); border-left-color: var(--h-line); }
.pg-hist-guide .project-detail h3 { margin-top: 0; }

@media (max-width: 899px) {
    .pg-hist-dates, .pg-hist-cards, .pg-hist-differ, .pg-hist-ideas { grid-template-columns: 1fr; }
}
/* Too narrow for the whole line at a readable size: it keeps its size and scrolls sideways in its frame, with the rows'
   names held at the left. */
@container (max-width: 760px) {
    .pg-hist-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: 6px; }
    .pg-hist-canvas { width: 900px; }
    .pg-hist-row > span { background: color-mix(in srgb, var(--h-parchment) 88%, transparent); box-shadow: 1px 0 0 var(--h-line); }
    .pg-hist-row .pg-long { display: none; }
    .pg-hist-row .pg-short { display: inline; }
    .pg-hist-swipe { display: block; }
}
.pg-hist-systems .pg-short { display: none; }
@media (max-width: 700px) {
    .pg-hist-hero { padding: 22px 14px 18px; }
    .pg-hist-chosen { padding: 12px 14px; }
    .pg-hist-rods { padding: 14px 12px 10px; }
    /* On a phone the buttons keep to the chronologies' short names, so they take two rows, not four. */
    .pg-hist-systems .pg-long { display: none; }
    .pg-hist-systems .pg-short { display: inline; }
}