/* The battles guide (/uses/battles): a pale sea and parchment land; one colour per era on the map, one per kind of
   source on the estimates, and the same colours for how good each side's evidence is. Marks meet 3:1 on their
   backgrounds; text meets 4.5:1. */
.pg-bat-guide {
    --b-ink: #1e252d;
    --b-soft: #4f5a66;
    --b-sea: #eef3f7;
    --b-land: #ddd6c5;
    --b-line: #e2ddd1;
    --e-ancient: #8a5a12;
    --e-medieval: #6b4c9a;
    --e-early-modern: #1f7a5a;
    --e-modern: #b0362f;
    --k-time: #9b5a00;
    --k-records: #2e7d4f;
    --k-historians: #2a5fa8;
    --k-summary: #7d848d;
    --toc-group: var(--e-modern);
}
.pg-bat-guide .eyebrow { color: var(--e-modern); }
.pg-bat-guide :is(.pg-bat-hero, .pg-bat-reader, .pg-bat-section, .pg-guide-build, .pg-guide-fields) { scroll-margin-top: 24px; }
.pg-e-ancient { --e: var(--e-ancient); }
.pg-e-medieval { --e: var(--e-medieval); }
.pg-e-early-modern { --e: var(--e-early-modern); }
.pg-e-modern { --e: var(--e-modern); }
.pg-k-time { --k: var(--k-time); }
.pg-k-records { --k: var(--k-records); }
.pg-k-historians { --k: var(--k-historians); }
.pg-k-summary { --k: var(--k-summary); }
/* Evidence for a side shares the colour of the source it rests on; "claims only" is the hatched, weaker kin of
   "written at the time". */
.pg-v-records { --v: var(--k-records); }
.pg-v-modern { --v: var(--k-historians); }
.pg-v-ancient { --v: var(--k-time); }
.pg-v-claims { --v: repeating-linear-gradient(135deg, var(--k-time) 0 2px, #fff 2px 4.5px); }
.pg-v-other { --v: var(--k-summary); }

/* ---- The map ---- */
.pg-bat-hero { margin: 4px 0 28px; padding: 30px 30px 22px; border: 1px solid var(--b-line); border-radius: 18px; background: #fbfaf6; color: var(--b-ink); }
.pg-bat-hero h2 { margin: 0 0 10px; }
.pg-bat-intro { max-width: 800px; margin: 0; line-height: 1.65; color: var(--b-soft); font-size: .96rem; }
.pg-bat-eras { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.pg-bat-eras button { display: inline-flex; align-items: center; padding: 7px 13px 7px 11px; border: 1px solid #c9c2b2; border-radius: 999px; background: #fff; color: var(--b-ink); font: inherit; font-size: .88rem; cursor: pointer; }
.pg-bat-eras button span { margin-left: 5px; color: var(--b-soft); font-size: .8rem; }
.pg-bat-eras button b { margin-left: 6px; }
.pg-bat-eras button em { font-style: normal; }
.pg-bat-eras button:hover { border-color: var(--b-ink); }
.pg-bat-eras button[aria-pressed="true"] { border-color: var(--b-ink); background: var(--b-ink); color: #fff; }
.pg-bat-eras button[aria-pressed="true"] span { color: #d9dee4; }
/* Each era's button carries its dots' colour, so the buttons are the map's key. */
.pg-bat-swatch { flex: none; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; background: var(--e); }
.pg-bat-eras [data-era="all"] .pg-bat-swatch { background: conic-gradient(var(--e-ancient) 0 25%, var(--e-medieval) 0 50%, var(--e-early-modern) 0 75%, var(--e-modern) 0); }
.pg-bat-eras button[aria-pressed="true"] .pg-bat-swatch { box-shadow: 0 0 0 2px #fff; }
.pg-bat-figure { position: relative; margin: 0; }
.pg-bat-map { display: block; width: 100%; height: auto; background: var(--b-sea); border-radius: 10px; }
.pg-land { fill: var(--b-land); stroke: #c8bfa9; stroke-width: .4; }
.pg-dots circle { fill: var(--e); opacity: .55; }
.pg-dots circle.pg-hot { opacity: 1; stroke: var(--b-ink); stroke-width: .8; }
.pg-leaders line { stroke: var(--b-ink); stroke-width: .6; opacity: .55; }
.pg-featured a circle { fill: #fff; stroke: var(--e); stroke-width: 2.2; cursor: pointer; }
.pg-featured a:hover circle, .pg-featured a:focus-visible circle, .pg-featured a.pg-hot circle { stroke: var(--b-ink); stroke-width: 3; }
.pg-featured a.pg-on circle { fill: var(--e); stroke: var(--b-ink); stroke-width: 2.6; }
/* The chosen battle wears a second, darker ring, so it stands out among the thirty. */
.pg-halo { fill: rgba(255, 255, 255, .6); stroke: var(--b-ink); stroke-width: 1.6; pointer-events: none; }
.pg-bat-map:not([data-era="all"]) .pg-dots > g { display: none; }
.pg-bat-map[data-era="ancient"] .pg-dots > .pg-e-ancient, .pg-bat-map[data-era="medieval"] .pg-dots > .pg-e-medieval,
.pg-bat-map[data-era="early-modern"] .pg-dots > .pg-e-early-modern, .pg-bat-map[data-era="modern"] .pg-dots > .pg-e-modern { display: inline; }
.pg-bat-map:not([data-era="all"]) .pg-dots circle { opacity: .8; }
.pg-bat-map:not([data-era="all"]) .pg-featured a:not(.pg-on) { opacity: .25; }
.pg-bat-map[data-era="ancient"] .pg-featured a.pg-e-ancient, .pg-bat-map[data-era="medieval"] .pg-featured a.pg-e-medieval,
.pg-bat-map[data-era="early-modern"] .pg-featured a.pg-e-early-modern, .pg-bat-map[data-era="modern"] .pg-featured a.pg-e-modern { opacity: 1; }
.pg-bat-caption { margin-top: 6px; font-size: .8rem; color: var(--b-soft); }
.pg-bat-swipe { display: none; }
/* On the widest screens the chosen battle is summed up inside the map, over the open South Pacific, so it is in view
   whenever the map is (under the map below 1180 px). */
.pg-bat-chosen { position: absolute; left: 12px; bottom: 38px; width: max-content; max-width: min(28%, 300px); margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .95); border: 1px solid var(--b-line); box-shadow: 0 2px 8px rgba(30, 37, 45, .12); font-size: .9rem; line-height: 1.45; }
.pg-bat-won { display: block; }
.pg-bat-gist { display: block; margin-top: 3px; color: var(--b-soft); font-size: .84rem; }
.pg-bat-chosen a { display: inline-block; margin-top: 5px; font-weight: 600; }

/* A pointer label: names what the mouse or keyboard is on, and goes when it leaves (as on the Titanic guide). */
.pg-bat-tip { position: absolute; z-index: 6; width: max-content; max-width: min(340px, calc(100% - 16px)); padding: 7px 11px; border-radius: 8px; background: var(--b-ink); color: #fff; font-size: .78rem; line-height: 1.4; pointer-events: none; box-shadow: 0 4px 14px rgba(15, 28, 46, .25); transform: translate(-50%, calc(-100% - 10px)); }
.pg-bat-tip.pg-below { transform: translate(-50%, 12px); }
.pg-bat-tip[hidden] { display: none; }
.pg-bat-tip strong { display: block; font-size: .85rem; }
.pg-bat-tip span { display: block; color: #c9d3dc; }

/* On a touch screen a tap among crowded rings asks which battle was meant, beside the finger. */
.pg-bat-picker { position: absolute; z-index: 7; width: 260px; max-width: calc(100% - 16px); margin: 0; padding: 8px; border: 1px solid #c9c2b2; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(30, 37, 45, .22); }
.pg-bat-picker[hidden] { display: none; }
.pg-bat-picker p { margin: 2px 6px 6px; font-size: .78rem; font-weight: 700; color: var(--b-soft); }
.pg-bat-picker button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--b-ink); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.pg-bat-picker button:hover, .pg-bat-picker button:focus-visible { background: #f3efe6; }
.pg-bat-picker button i { flex: none; width: 11px; height: 11px; border: 2.5px solid var(--e); border-radius: 50%; }
.pg-bat-picker button span { color: var(--b-soft); font-size: .8rem; }

/* ---- The reader ---- */
.pg-bat-reader { margin: 0 0 44px; }
.pg-bat-choose { margin-bottom: 18px; }
.pg-bat-choose > label { display: block; margin-bottom: 6px; font-weight: 700; }
.pg-bat-choose-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-bat-choose select { flex: 0 1 380px; min-width: 0; padding: 10px 12px; font-size: 1rem; border: 1px solid #b9b2a2; border-radius: 10px; background: #fff; color: var(--b-ink); }
.pg-bat-error { margin: 10px 0 0; color: #8f1d14; font-weight: 600; }
.pg-bat-read h2 { margin: 0 0 6px; font-size: 1.7rem; }
.pg-bat-meta, .pg-bat-war { margin: 0 0 4px; color: var(--b-soft); }
.pg-bat-outcome { margin: 12px 0 6px; line-height: 1.6; }
.pg-bat-why { margin: 0 0 16px; max-width: 820px; line-height: 1.65; }
.pg-bat-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.pg-bat-side { padding: 14px 16px; border: 1px solid var(--b-line); border-radius: 14px; background: #fff; }
.pg-bat-side h3 { margin: 0 0 4px; font-size: 1.05rem; }
.pg-bat-side p { margin: 4px 0; font-size: .9rem; line-height: 1.5; }
.pg-bat-side p span { display: block; font-size: .76rem; font-weight: 700; color: var(--b-soft); text-transform: uppercase; letter-spacing: .04em; }
.pg-bat-evidence b { color: var(--b-ink); }
.pg-bat-evidence i, .pg-bat-strip-key i { display: inline-block; width: 11px; height: 11px; margin: 0 6px 0 2px; border-radius: 3px; background: var(--v); vertical-align: -1px; }
.pg-bat-chart { position: relative; margin: 0 0 16px; padding: 14px 16px 12px; border: 1px solid var(--b-line); border-radius: 14px; background: #fbfaf6; }
.pg-bat-chart figcaption { margin-bottom: 8px; font-size: .88rem; color: var(--b-soft); line-height: 1.5; }
.pg-bat-chart figcaption b { margin-right: 6px; font-size: 1rem; color: var(--b-ink); }
.pg-bat-none { margin: 0 0 4px; color: var(--b-soft); }
.pg-bat-row { display: grid; grid-template-columns: 26% minmax(0, 1fr); align-items: center; margin-right: 3%; padding: 5px 0; border-top: 1px solid #ece7dc; }
/* The scale sits in the same grid as the rows, so each label stands over its own line. */
.pg-bat-axis-row { padding: 0 0 2px; border-top: 0; }
.pg-bat-axis { position: relative; height: 16px; font-size: .72rem; color: var(--b-soft); }
.pg-bat-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.pg-bat-axis span:first-child { transform: none; }
.pg-bat-axis span:last-child { transform: translateX(-100%); }
.pg-bat-row-label { margin: 0; padding-right: 10px; font-size: .86rem; font-weight: 600; }
.pg-bat-row-label span { display: block; font-weight: 400; font-size: .76rem; color: var(--b-soft); }
.pg-bat-track { position: relative; height: calc(var(--lanes) * 15px + 6px); }
.pg-bat-grid { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #ddd6c8; }
.pg-bat-mark { position: absolute; top: calc(var(--lane) * 15px + 3px); height: 11px; min-width: 11px; margin-left: -5.5px; padding-right: 11px; box-sizing: border-box; border-radius: 6px; background: var(--k); cursor: pointer; }
.pg-bat-mark.pg-ring { background: #fff; border: 2.5px solid var(--k); }
.pg-bat-mark.pg-upto::before, .pg-bat-mark.pg-more::after { content: ""; position: absolute; top: 1.5px; border: 4px solid transparent; }
.pg-bat-mark.pg-ring::before, .pg-bat-mark.pg-ring::after { top: -1px; }
.pg-bat-mark.pg-upto::before { right: 100%; border-right-color: var(--k); }
.pg-bat-mark.pg-more::after { left: 100%; border-left-color: var(--k); }
.pg-bat-mark:hover, .pg-bat-mark.pg-hot { box-shadow: 0 0 0 2px #fbfaf6, 0 0 0 3.5px var(--b-ink); }
.pg-bat-mark:focus-visible { outline: 2px solid var(--b-ink); outline-offset: 2px; }
/* How far apart a side's estimates are: a bracket from the smallest to the largest, named at its right end. */
.pg-bat-track.pg-has-span { height: calc(var(--lanes) * 15px + 26px); }
.pg-bat-span { position: absolute; top: calc(var(--lane) * 15px + 4px); height: 6px; border: 1.5px solid var(--b-soft); border-top: 0; border-radius: 0 0 3px 3px; box-sizing: border-box; }
.pg-bat-span b { position: absolute; right: -2px; top: 6px; font-size: .72rem; line-height: 1; color: var(--b-ink); white-space: nowrap; }
.pg-bat-row + .pg-bat-spread { margin-top: 6px; padding-top: 9px; border-top: 1px solid #ece7dc; }
.pg-bat-spread { margin: 2px 0 0; font-size: .9rem; }
/* The key to both charts: one column per kind of source. */
.pg-bat-key { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; margin: 0 0 14px; padding: 0; list-style: none; font-size: .8rem; line-height: 1.4; color: var(--b-soft); }
.pg-bat-key i, .pg-bat-by i, .pg-bat-kind-head i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--k); vertical-align: -1px; }
.pg-bat-key b { color: var(--b-ink); font-size: .86rem; }
.pg-bat-key span { display: block; margin-top: 1px; }
.pg-bat-list { margin-top: 18px; }
.pg-bat-list h3 { margin: 0 0 8px; font-size: 1.05rem; }
.pg-bat-list-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pg-bat-list h4 { margin: 0 0 4px; font-size: .95rem; }
.pg-bat-measure { margin: 10px 0 4px; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--b-soft); }
.pg-bat-list ul { margin: 0; padding: 0; list-style: none; }
.pg-bat-list li { padding: 6px 0; border-bottom: 1px solid #f0ebe1; font-size: .88rem; line-height: 1.5; }
.pg-bat-by, .pg-bat-note, .pg-bat-cite { display: block; }
.pg-bat-note, .pg-bat-cite { color: var(--b-soft); font-size: .82rem; }
.pg-bat-datenote { margin-top: 14px; font-size: .86rem; color: var(--b-soft); }

/* ---- Featured, evidence and study ---- */
.pg-bat-section { margin: 0 0 44px; }
.pg-bat-lead { max-width: 780px; line-height: 1.65; color: var(--b-soft); }
.pg-bat-era-title { margin: 18px 0 8px; font-size: 1rem; }
.pg-bat-era-title span { font-weight: 400; color: var(--b-soft); font-size: .88rem; }
.pg-bat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-bat-cards a { display: block; height: 100%; padding: 10px 12px; border: 1px solid var(--b-line); border-left: 4px solid var(--e); border-radius: 10px; background: #fff; color: var(--b-ink); text-decoration: none; }
.pg-bat-cards a:hover { border-color: var(--e); }
.pg-bat-cards a[aria-current="true"] { border-color: var(--b-ink) var(--b-ink) var(--b-ink) var(--e); box-shadow: inset 0 0 0 1px var(--b-ink); }
.pg-bat-cards b { display: block; font-size: .92rem; }
.pg-bat-cards span { display: block; font-size: .8rem; color: var(--b-soft); }
.pg-bat-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.pg-bat-kinds > div { padding: 12px 14px; border: 1px solid var(--b-line); border-radius: 12px; background: #fff; }
.pg-bat-kinds p { margin: 0; font-size: .88rem; line-height: 1.5; }
.pg-bat-kind-head span { color: var(--b-soft); margin-left: 4px; }
/* How good the evidence is: one column per featured battle, oldest first, one square per side. */
.pg-bat-strip { position: relative; margin: 0 0 22px; padding: 16px 18px 14px; border: 1px solid var(--b-line); border-radius: 14px; background: #fbfaf6; }
.pg-bat-strip figcaption { margin-bottom: 12px; font-size: .88rem; line-height: 1.5; color: var(--b-soft); }
.pg-bat-strip figcaption b { display: block; margin-bottom: 2px; font-size: 1.05rem; color: var(--b-ink); }
.pg-bat-strip-eras { display: flex; gap: 14px; }
.pg-bat-strip-era { flex: var(--n) 1 0; min-width: 0; }
.pg-bat-strip-era > p { margin: 0 0 6px; padding-bottom: 4px; border-bottom: 3px solid var(--e); font-size: .78rem; font-weight: 700; }
.pg-bat-strip-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 42px); gap: 3px; }
.pg-bat-strip-cols a { display: grid; gap: 3px; padding: 3px; border-radius: 6px; }
.pg-bat-strip-cols i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--v); }
/* Pointing at a column lifts it lightly; the battle open above wears the dark outline, as its card does. */
.pg-bat-strip-cols a:hover, .pg-bat-strip-cols a.pg-hot { background: #fff; box-shadow: 0 0 0 1px #b9b2a2; }
.pg-bat-strip-cols a[aria-current="true"] { background: #fff; box-shadow: 0 0 0 2px var(--b-ink); }
.pg-bat-strip-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: .86rem; line-height: 1.5; color: var(--b-soft); }
.pg-bat-strip-key b { color: var(--b-ink); }
.pg-bat-strip-key span { color: var(--b-ink); }
.pg-bat-ask { padding-left: 18px; line-height: 1.6; }
.pg-bat-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pg-bat-ideas article { padding: 16px 18px; border: 1px solid var(--b-line); border-radius: 14px; background: #fff; }
.pg-bat-ideas h3 { margin: 4px 0 6px; font-size: 1.02rem; }
.pg-bat-ideas p { margin: 0; line-height: 1.6; font-size: .92rem; }
.pg-bat-ideas .pg-level-tag { font-size: .76rem; font-weight: 700; color: var(--e-modern); }

@media (max-width: 1179px) {
    /* Below the widest screens the open sea in the map's corner is too small for the box: it sits just under the map,
       so it never covers a ring (Mexico City and Yorktown are the nearest). */
    .pg-bat-chosen { position: static; width: auto; max-width: none; margin-top: 10px; box-shadow: none; }
}
@media (max-width: 899px) {
    .pg-bat-sides, .pg-bat-list-sides, .pg-bat-kinds, .pg-bat-ideas, .pg-bat-strip-key { grid-template-columns: 1fr; }
    .pg-bat-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-bat-row { grid-template-columns: minmax(0, 1fr); margin-right: 0; }
    .pg-bat-axis-row > span { display: none; }
    .pg-bat-strip-eras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
}
@media (max-width: 700px) {
    .pg-bat-hero { padding: 22px 14px 18px; }
    /* Era buttons: a tidy two-column key; each era names itself on one line, its years and count on the next. */
    .pg-bat-eras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-bat-eras button { padding: 7px 12px; border-radius: 12px; text-align: left; }
    .pg-bat-eras button:not([data-era="all"]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 1px; }
    .pg-bat-eras button:not([data-era="all"]) em { grid-column: 2 / 4; }
    .pg-bat-eras [data-era="all"] { grid-column: 1 / -1; }
    .pg-bat-eras button:not([data-era="all"]) span { grid-column: 2; grid-row: 2; margin: 0; }
    .pg-bat-eras button:not([data-era="all"]) b { grid-column: 3; grid-row: 2; }
    /* On a phone the map keeps a readable size and scrolls sideways inside its frame. */
    .pg-bat-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-radius: 10px; }
    .pg-bat-map { min-width: 760px; }
    .pg-bat-swipe { display: inline; }
    .pg-bat-axis span:nth-child(even) { visibility: hidden; }
    .pg-bat-chart, .pg-bat-strip { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 560px) {
    .pg-bat-strip-eras, .pg-bat-key { grid-template-columns: minmax(0, 1fr); }
    /* Two cards to a row on phones, so the thirty battles read as an index rather than a long scroll. */
    .pg-bat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .pg-bat-cards a { padding: 8px 10px 9px; }
    .pg-bat-cards b { font-size: .86rem; line-height: 1.3; margin-bottom: 2px; }
    .pg-bat-cards span { font-size: .76rem; line-height: 1.4; }
}
@media (max-width: 359px) {
    .pg-bat-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
    /* The narrowest phones: one era to a line with its count at the end, so no name or year breaks. */
    .pg-bat-eras { grid-template-columns: minmax(0, 1fr); }
    .pg-bat-eras button:not([data-era="all"]) { display: flex; }
    .pg-bat-eras button:not([data-era="all"]) span { margin-left: 5px; }
    .pg-bat-eras button b { margin-left: auto; padding-left: 8px; }
}