/* ─── SVG MAPS: directory and map pages ──────────────── */

/* Breadcrumbs */
.crumbs { font-size: 0.8125rem; color: var(--muted); margin-bottom: 24px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--heading); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep { margin: 0 8px; opacity: 0.6; }

/* Map page: preview + facts */
.map-page-top { padding-top: 96px; padding-bottom: 72px; }
/* the column beside the map is as wide as its controls need (up to 420px) and the map takes the rest, so the
   column ends at the section's edge, where the region list does */
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 34vw, 420px); gap: 48px; align-items: start; }

.map-stage {
  position: relative; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
}
.map-canvas img, .map-canvas svg { display: block; width: 100%; height: auto; max-height: 560px; }
.map-canvas svg path { fill: #c9ccd8; stroke: #fff; transition: fill .12s; }
.map-canvas svg path[id]:hover, .map-canvas svg path.hl, .map-canvas svg path.found { fill: #ff6b35; }
/* the dividers between a map's insets are lines, not regions */
.map-canvas svg path[fill="none"], .map-canvas svg path[fill="none"]:hover { fill: none; stroke: #b4b7c6; }
.map-tip {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  background: #1a1a2e; color: #fff; font-size: 0.8125rem; font-weight: 600;
  padding: 6px 10px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.map-tip code { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; color: #ffb08f; margin-left: 8px; }
/* Maps in two projections: "Projection: Mercator | Equal Earth" right above the downloads, the chosen one
   filled. It shows that projection's preview, downloads and code (data-proj); without JavaScript every
   download shows, under its name */
/* The switches (Projection, Detail): the chosen option filled */
.map-switch-label { margin-top: 18px; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--heading); }
.map-switch { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); }
.map-switch button {
  font-family: var(--font); font-size: 0.9375rem; font-weight: 600; color: var(--muted); line-height: 1;
  background: none; border: none; border-radius: 7px; padding: 11px 14px; cursor: pointer; transition: background .15s, color .15s;
}
.map-switch button:hover { color: var(--heading); }
.map-switch button[aria-pressed="true"] { color: var(--heading); background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.14); }
.map-switch button:focus-visible { outline: 2px solid rgba(255,107,53,0.5); outline-offset: 1px; }
.map-switch small { font-size: 0.8125rem; font-weight: 500; opacity: 0.75; margin-left: 4px; }
[data-proj][hidden], [data-detail][hidden] { display: none; }

/* the title and lead above the map, so the column beside it holds what you do with the map: projection,
   downloads, licence, and the three tools that take it further */
.map-head { margin-bottom: 28px; }
.map-head h1 {
  font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 900; letter-spacing: -0.03em;
  line-height: 1.08; color: var(--heading); margin-bottom: 12px;
}
.map-lead { font-size: 1rem; line-height: 1.7; color: var(--muted); }
.map-info > :first-child { margin-top: 0; }
/* one Download SVG button, as wide as the switches; its file follows the Detail switch */
.map-downloads { margin-top: 16px; }
.map-dl { display: flex; width: 100%; justify-content: center; }
.map-dl[hidden] { display: none; }
.map-dl-name { display: none; font-weight: 500; opacity: 0.8; }
.map-dl-name::before { content: " · "; }
.map-license { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; margin-top: 14px; }
/* after the $99: the link to buy all maps without the credit, kept whole */
.map-buy { font-weight: 700; color: var(--orange-text); white-space: nowrap; text-decoration: none; }
.map-buy:hover { text-decoration: underline; text-underline-offset: 3px; }
.map-buy svg { width: 13px; height: 13px; vertical-align: -2px; margin-left: 2px; }

/* Do more with this map: three buttons, one line each, as wide as the switches and the download, so they
   line up under them */
.map-next-label { margin-top: 28px; margin-bottom: 10px; font-size: 0.8125rem; font-weight: 600; color: var(--heading); }
.map-next { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.map-next .btn-secondary { display: flex; width: 100%; padding: 12px 20px; }
.map-next .btn-secondary[hidden] { display: none; }   /* Open in Chart Maker: one per projection, the others hidden */
.map-next .btn-secondary > svg:last-child { margin-left: auto; width: 14px; height: 14px; }
.map-next-icon { flex-shrink: 0; color: var(--orange-text); }
.map-next .btn-secondary:hover .map-next-icon { color: var(--orange-text); }

/* Region list */
.list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.list-head .section-h2 { margin-bottom: 0; font-size: clamp(1.5rem, 3vw, 2rem); }
/* on a map page the list sits right under the map, with a smaller heading */
/* the region list's grey band starts close under the map: 40px either side of the edge */
.map-page-top-tight { padding-bottom: 40px; }
.map-regions { padding-top: 40px; padding-bottom: 56px; }
.map-regions .list-head { margin-bottom: 16px; }
.map-regions .list-head .section-h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.map-filter {
  font: inherit; font-size: 0.875rem; padding: 10px 14px; min-width: 260px;
  border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; background: var(--surface); color: var(--heading);
}
.map-filter:focus { outline: 2px solid rgba(255,107,53,0.5); outline-offset: 1px; }
.region-list { list-style: none; padding: 0; columns: 4 200px; column-gap: 32px; }
.region-list li {
  break-inside: avoid; display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 0.8125rem; color: var(--text);
}
.region-list li:hover { color: var(--orange-text); }
.region-list code { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.region-list.clipped:not(.filtering) li:nth-child(n+81) { display: none; }
.region-list li[hidden], .dir-links li[hidden], [data-group][hidden], .region-more[hidden] { display: none; }
.region-more { margin-top: 20px; }
.list-empty { font-size: 0.9rem; color: var(--muted); margin-top: 12px; }

/* Use it in code */
.code-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.code-block pre { margin: 0; font: inherit; white-space: pre; }
.code-grid .section-lead code { overflow-wrap: anywhere; }   /* am5geodata_region_usa_congressional120_... */

/* Map cards (related maps, popular maps) */
.map-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.map-card {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 14px 12px; text-decoration: none; color: inherit;
  transition: box-shadow .3s, border-color .3s;
}
.map-card:hover, .map-card:focus-visible { box-shadow: 0 10px 30px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.18); }
.map-card img { width: 100%; height: 110px; object-fit: contain; filter: brightness(0.8); }
.map-card span { font-size: 0.8125rem; font-weight: 600; color: var(--heading); margin-top: 10px; text-align: center; }
.map-card small { font-size: 0.6875rem; color: var(--muted); margin-top: 2px; }

/* Good to know */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin-top: 32px; }
.faq-item h3 { font-size: 1rem; font-weight: 700; color: var(--heading); margin-bottom: 6px; }
.faq-item p { font-size: 0.9rem; color: var(--muted); line-height: 1.65; }
.faq-item code { font-family: var(--mono); font-size: 0.8125rem; color: var(--heading); }

/* Directory */
.dir-head { padding-top: 96px; padding-bottom: 48px; }
.dir-head h1 {
  font-size: clamp(2.5rem, 4.4vw, 3.75rem); font-weight: 900; letter-spacing: -0.03em;
  line-height: 1.05; color: var(--heading); margin-bottom: 16px;
}
.dir-search { position: relative; max-width: 560px; margin-top: 28px; }
.dir-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.dir-search input { width: 100%; font-size: 1rem; padding: 15px 16px 15px 46px; min-width: 0; }
.dir-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dir-tool {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow .3s, border-color .3s;
}
.dir-tool:hover, .dir-tool:focus-visible { box-shadow: 0 12px 36px rgba(0,0,0,0.10); border-color: rgba(0,0,0,0.18); }
.dir-tool img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #16161f; }
.dir-tool-body { padding: 16px 18px 18px; }
.dir-tool-kicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-text); }
.dir-tool-title { font-size: 1.0625rem; font-weight: 700; color: var(--heading); margin-top: 6px; }
.dir-tool-desc { font-size: 0.8125rem; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.dir-group { margin-top: 44px; scroll-margin-top: 72px; }
.dir-group:first-child { margin-top: 0; }
.dir-group h2 {
  display: flex; align-items: baseline; gap: 10px; font-size: 1.25rem; font-weight: 800; color: var(--heading);
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px;
}
.dir-group h2 small { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.dir-links { list-style: none; padding: 0; columns: 4 200px; column-gap: 32px; }
.dir-links li { break-inside: avoid; padding: 4px 0; }
.dir-links a { font-size: 0.9rem; color: var(--text); text-decoration: none; }
.dir-links a:hover, .dir-links a:focus-visible { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
.dir-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
/* while searching the index: no group links, and the results right under the box */
.searching .dir-jump { display: none; }
.searching .dir-head { padding-bottom: 8px; }
.searching section:has(> #mapDirectory) { padding-top: 0; }
.searching .dir-group { margin-top: 28px; }
.dir-search input { scroll-margin-top: 72px; }
.dir-jump a {
  font-size: 0.75rem; font-weight: 600; color: var(--text); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px;
}
.dir-jump a:hover { border-color: rgba(0,0,0,0.25); color: var(--heading); }

/* SVG Maps pack: the offer on map pages and the directory */
.pack-promo {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; padding: 14px 16px;
  background: var(--grad-soft); border: 1px solid rgba(255,107,53,0.25); border-radius: 12px;
  text-decoration: none; color: inherit; transition: border-color .2s;
}
.pack-promo:hover, .pack-promo:focus-visible { border-color: rgba(255,107,53,0.6); }
.pack-promo .scenario-icon { width: 36px; height: 36px; flex-shrink: 0; }
.pack-promo-title { font-size: 0.9375rem; font-weight: 700; color: var(--heading); display: flex; align-items: center; gap: 6px; }
.pack-promo-title svg { width: 14px; height: 14px; }
.pack-promo:hover .pack-promo-title { color: var(--orange-text); }
.pack-promo-desc { display: block; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.pack-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  margin-bottom: 48px; padding: 28px 32px; background: var(--grad-soft);
  border: 1px solid rgba(255,107,53,0.25); border-radius: 16px;
}
.pack-band .eyebrow { margin-bottom: 10px; }
.pack-band h2 { font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 800; letter-spacing: -0.02em; color: var(--heading); margin-bottom: 6px; }
.pack-band p { font-size: 0.9375rem; color: var(--muted); line-height: 1.6; max-width: 640px; }

/* SVG Maps pack: sales page */
.pack-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.pack-info h1, .pack-order h1 {
  font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 900; letter-spacing: -0.03em;
  line-height: 1.08; color: var(--heading); margin-bottom: 16px;
}
.pack-checks { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 8px; }
.pack-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--text); }
.pack-checks svg { flex-shrink: 0; margin-top: 3px; color: var(--orange-text); }
.pack-buy { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pack-buy .btn-primary { font-size: 1rem; padding: 15px 30px; }
.pack-buy .btn-primary svg { width: 16px; height: 16px; }
.pack-buy .btn-primary:disabled { opacity: 0.6; cursor: progress; }
.pack-buy small { font-weight: 500; opacity: 0.8; }
.pack-price strong { display: block; font-size: 2.5rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--heading); }
.pack-price span { font-size: 0.8125rem; color: var(--muted); }
.pack-note { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; margin-top: 16px; }
.pack-error { font-size: 0.875rem; color: #b91c1c; margin-top: 12px; }
.pack-collage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pack-collage span { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.pack-collage img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; filter: brightness(0.8); }
.pack-groups { list-style: none; padding: 0; margin-top: 28px; columns: 3 240px; column-gap: 32px; }
.pack-groups li { break-inside: avoid; display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.pack-groups a { color: var(--text); text-decoration: none; }
.pack-groups a:hover { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
.pack-groups span { color: var(--muted); font-variant-numeric: tabular-nums; }
.pack-license { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; margin-top: 28px; }
.pack-license h3 { font-size: 1rem; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.pack-license ul { padding-left: 20px; display: grid; gap: 6px; }
.pack-license li, .pack-license p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
.pack-license p { margin-top: 14px; }
.pack-lost h2 { font-size: 1.375rem; font-weight: 800; color: var(--heading); margin-bottom: 6px; }
.pack-lost p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; max-width: 720px; }

/* SVG Maps pack: the buyer's page */
.pack-order { min-height: 60vh; }
.pack-order .pack-buy { margin-top: 28px; }
.pack-order-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 40px; margin-top: 28px; }
.pack-order-facts dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pack-order-facts dd { margin: 4px 0 0; font-size: 0.9375rem; color: var(--heading); }
.pack-order code, .pack-order-facts code { font-family: var(--mono); font-size: 0.875rem; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .pack-grid, .pack-license { grid-template-columns: 1fr; gap: 32px; }
  .pack-order-facts { grid-template-columns: 1fr; }
  /* minmax(0, ...): a long geodata name or import line scrolls in its code block instead of widening the page */
  .map-grid, .code-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .map-cards { grid-template-columns: repeat(2, 1fr); }
  .dir-tools, .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .map-page-top, .dir-head { padding-top: 80px; }
  .map-stage { padding: 14px; }
  .map-filter { min-width: 0; width: 100%; }
}