/* Apple HIG-inspired: system font, generous spacing, semantic colours, light/dark. */
:root {
  --bg: #f5f5f7; --bg-elev: #ffffff; --bg-fill: #e8e8ed; --label: #1d1d1f; --label-2: #6e6e73; --sep: #d2d2d7;
  --accent: #0066cc; --accent-fill: rgba(0,102,204,.1);
  --t1: #0a7d32; --t2: #0066cc; --t3: #8944ab; --t4: #b25000; --td: #6e6e73;
  --flag-diff: #b25000; --flag-oq: #8944ab;
  --radius: 14px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --bg-elev: #1c1c1e; --bg-fill: #2c2c2e; --label: #f5f5f7; --label-2: #a1a1a6; --sep: #38383a;
    --accent: #2997ff; --accent-fill: rgba(41,151,255,.16);
    --t1: #30d158; --t2: #2997ff; --t3: #bf5af2; --t4: #ff9f0a; --td: #a1a1a6;
    --flag-diff: #ff9f0a; --flag-oq: #bf5af2;
    --shadow: none;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.47; color: var(--label); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--bg-elev); padding: 8px 12px; border-radius: 8px; z-index: 2000; }
.skip:focus { left: 8px; }
.muted { color: var(--label-2); }
.small { font-size: 14px; }
.nowrap { white-space: nowrap; }
h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 12px; font-weight: 700; }
h2 { font-size: 21px; letter-spacing: -0.01em; margin: 0 0 12px; font-weight: 600; }
h3 { font-size: 17px; margin: 16px 0 8px; font-weight: 600; }
.lede { font-size: 19px; color: var(--label-2); margin: 0 0 20px; max-width: 46em; }
.eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 600; color: var(--label-2); margin: 16px 0 0; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--sep); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
.brand { font-weight: 600; color: var(--label); font-size: 17px; }
.site-header nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-header nav a { display: inline-block; padding: 8px 10px; border-radius: 8px; color: var(--label); font-size: 15px; min-height: 44px; line-height: 28px; }
.site-header nav a[aria-current="page"] { background: var(--accent-fill); color: var(--accent); }
.header-search { margin-left: auto; }
.header-search input { font: inherit; font-size: 15px; padding: 8px 12px; border-radius: 10px; border: 1px solid transparent; background: var(--bg-fill); color: var(--label); width: 180px; min-height: 36px; }
@media (max-width: 640px) { .header-search { margin-left: 0; width: 100%; } .header-search input { width: 100%; } .brand { width: 100%; } }

main { padding-top: 16px; padding-bottom: 48px; }
.hero { padding: 24px 0 8px; }
.card { background: var(--bg-elev); border-radius: var(--radius); padding: 20px; margin: 0 0 20px; box-shadow: var(--shadow); }
@media (min-width: 768px) { .card { padding: 28px; } }
.grid2 { display: grid; gap: 0 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 8px; }
.toolbar button[aria-label] { font-size: 22px; line-height: 1; }
button { font: inherit; font-size: 15px; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--bg-fill); color: var(--label); cursor: pointer; }
button:hover { background: var(--accent-fill); color: var(--accent); }

/* Crumbs */
.crumbs ol { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--label-2); }
.crumbs li + li::before { content: "›"; margin-right: 6px; }

/* Sort box & tiers */
.sortbox { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; background: var(--bg-elev); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 20px; box-shadow: var(--shadow); }
.sortyear { display: flex; flex-direction: column; min-width: 140px; }
.sortyear strong { font-size: 28px; letter-spacing: -0.02em; }
.sortbox p { margin: 6px 0 0; }
.tier { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1.5px solid currentColor; }
.tier-t1 { color: var(--t1); } .tier-t2 { color: var(--t2); } .tier-t3 { color: var(--t3); } .tier-t4 { color: var(--t4); } .tier-td, .tier-tn { color: var(--td); }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: var(--bg-fill); color: var(--label-2); vertical-align: middle; }
.tag-t1 { color: var(--t1); } .tag-t2 { color: var(--t2); }
.tiers li { margin: 6px 0; }

/* Chronology table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
table.chron { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
table.chron caption { text-align: left; font-size: 13px; color: var(--label-2); padding-bottom: 8px; }
table.chron th, table.chron td { text-align: left; vertical-align: top; padding: 12px 10px; border-top: 1px solid var(--sep); }
table.chron thead th { font-size: 13px; color: var(--label-2); font-weight: 600; border-top: 0; }
table.chron tbody th { font-weight: 600; width: 22%; }
table.chron tr.is-sort { background: var(--accent-fill); }
table.chron tr.pending td, table.chron tr.pending th { color: var(--label-2); }
.note { font-size: 13px; color: var(--label-2); margin-top: 6px; }
.flags { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.flag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid currentColor; }
.flag-sort { color: var(--accent); } .flag-diff { color: var(--flag-diff); } .flag-oq { color: var(--flag-oq); }
.flag-list { padding-left: 0; list-style: none; } .flag-list li { margin: 10px 0; }
.flags-inline h3 { margin-top: 20px; }

/* Lists */
.links, .browse { padding-left: 1.1em; } .links li, .browse li { margin: 6px 0; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent-fill); font-size: 15px; }
.chrono-list { list-style: none; padding: 0; margin: 0; }
.chrono-list li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--sep); }
.chrono-list li:first-child { border-top: 0; }
.chrono-list .yr { min-width: 120px; font-variant-numeric: tabular-nums; color: var(--label-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 12px; }
.facts dt { font-size: 13px; color: var(--label-2); } .facts dd { margin: 2px 0 0; font-weight: 500; }
.legend { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--label-2); }
.legend li { display: flex; align-items: center; gap: 6px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; background: currentColor; display: inline-block; }
.swatch.tier-t1 { background: var(--t1); } .swatch.tier-t2 { background: var(--t2); } .swatch.tier-t3 { background: var(--t3); } .swatch.tier-t4 { background: var(--t4); } .swatch.tier-td { background: var(--td); }

/* Thumbnails */
.thumbs { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.thumb { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.thumb img, .noimg { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; background: var(--bg-fill); }
.noimg { display: grid; place-items: center; font-size: 40px; }
.mapfig { margin: 0 0 16px; } .mapfig img { max-width: 100%; height: auto; border-radius: 10px; }

/* Certainty colours */
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.c-very-high { --c: #0a7d32; } .c-high { --c: #34a853; } .c-medium { --c: #c99400; } .c-low { --c: #d14900; } .c-unknown { --c: #8e8e93; }
.dot { background: var(--c, #8e8e93); }
.pin span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--c, #8e8e93); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.pin:focus-visible span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Map & timeline */
.map { height: 420px; border-radius: 12px; overflow: hidden; background: var(--bg-fill); }
.map-small { height: 280px; margin: 12px 0; }
.leaflet-container { font-family: var(--font); }
.popup-title { font-weight: 600; font-size: 15px; }
.timeline { border-radius: 12px; overflow: hidden; background: var(--bg-elev); }
.vis-timeline { border: 1px solid var(--sep) !important; border-radius: 12px; font-family: var(--font); color: var(--label); }
.vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right, .vis-panel.vis-top, .vis-panel.vis-bottom { border-color: var(--sep) !important; }
.vis-time-axis .vis-text { color: var(--label-2) !important; font-size: 12px; }
.vis-time-axis .vis-grid.vis-minor { border-color: var(--sep) !important; }
.vis-time-axis .vis-grid.vis-major { border-color: var(--label-2) !important; }
.vis-labelset .vis-label { color: var(--label) !important; border-color: var(--sep) !important; font-size: 14px; font-weight: 600; }
.vis-foreground .vis-group { border-color: var(--sep) !important; }
.vis-item { font-size: 13px; color: var(--label); border-color: var(--accent); background: var(--bg-elev); cursor: pointer; }
.vis-item.vis-point .vis-item-content { color: var(--label); }
.vis-item .vis-dot { border-width: 5px; border-radius: 6px; }
.vis-item.tier-t1 .vis-dot { border-color: var(--t1); } .vis-item.tier-t2 .vis-dot { border-color: var(--t2); }
.vis-item.tier-t3 .vis-dot { border-color: var(--t3); } .vis-item.tier-t4 .vis-dot { border-color: var(--t4); } .vis-item.tier-td .vis-dot { border-color: var(--td); }
.vis-item.vis-selected { background: var(--accent-fill); }
div.vis-tooltip { font-family: var(--font); font-size: 13px; background: var(--bg-elev); color: var(--label); border: 1px solid var(--sep); border-radius: 8px; box-shadow: var(--shadow); padding: 6px 10px; }

/* Pagefind UI */
#search { --pagefind-ui-primary: var(--accent); --pagefind-ui-text: var(--label); --pagefind-ui-background: var(--bg-elev); --pagefind-ui-border: var(--sep); --pagefind-ui-tag: var(--bg-fill); --pagefind-ui-font: var(--font); --pagefind-ui-border-radius: 10px; }

.site-footer { border-top: 1px solid var(--sep); padding: 24px 0 40px; }
.site-footer p { margin: 6px 0; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* CFAH chart gallery */
.chart-grid { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.chart-grid-small { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.chart-card { background: var(--bg-elev); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.chart-grid-small .chart-card { box-shadow: none; border: 1px solid var(--bg-fill); }
.chart-thumb { display: block; aspect-ratio: 4 / 3; background: var(--bg-fill); }
.chart-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chart-text { aspect-ratio: 16 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--bg-fill); color: var(--label-2); font-weight: 600; }
.chart-body { padding: 12px 14px; }
.chart-body p { margin: 4px 0; }
.chart-title { font-size: 15px; margin: 0 0 4px; }
.chip-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list a { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--bg-fill); }