/* Track Finder
   Single theme lock: light. One accent (--accent), one radius system (--r-*).
   Aesthetic is native CSS, no framework, no design system package. */

:root {
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surface-2: #eef1f5;
  --line:      #d9dfe7;
  --line-soft: #e7ebf1;

  --text:      #10151c;
  --text-2:    #47535f;
  --text-3:    #6f7c89;

  --accent:    #0b5fd0;
  --accent-in: #ffffff;   /* white on accent, 6.5:1 */
  --accent-dim:#dbe7fa;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 999px;

  --bar-h: 68px;
  --shadow: 0 12px 32px rgba(16,21,28,.13);
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

/* explicit display values below would otherwise beat the UA [hidden] rule */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; min-height: 100dvh; overflow: hidden; }

h1, h2 { margin: 0; letter-spacing: -0.02em; font-weight: 620; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- top bar */

.bar {
  height: var(--bar-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 40;
}

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.mark { width: 30px; height: 30px; color: var(--accent); flex: 0 0 auto; }
.brand-text h1 { font-size: 17px; }

.search { position: relative; flex: 1 1 auto; max-width: 460px; }
.search > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-3); pointer-events: none;
}
.search input {
  width: 100%; height: 40px;
  padding: 0 14px 0 36px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  outline: none;
}
.search input::placeholder { color: var(--text-3); }
.search input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.search input::-webkit-search-cancel-button { opacity: .5; }

.results {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  max-height: 340px; overflow-y: auto; z-index: 50;
}
.results li { padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer; }
.results li:hover, .results li[aria-selected="true"] { background: var(--surface-2); }
.results strong { display: block; font-weight: 560; font-size: 14px; }
.results span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }

.bar-actions { display: flex; gap: 9px; flex: 0 0 auto; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 15px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.btn.ghost { background: var(--surface-2); border-color: var(--line); color: var(--text-2); }
.btn.ghost:hover { background: var(--line-soft); color: var(--text); }
.btn.solid { background: var(--accent); color: var(--accent-in); font-weight: 560; }
.btn.solid:hover { background: #0a53b8; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pill {
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--accent); color: var(--accent-in);
  border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 640;
}

/* circular and always visible, not a hover-reveal */
.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--text-2); cursor: pointer; flex: 0 0 auto;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; fill: none; }
.icon-btn:hover { background: var(--line-soft); color: var(--text); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -------------------------------------------------------------------- map */

#map { flex: 1 1 auto; width: 100%; }

.loading {
  position: absolute; top: calc(var(--bar-h) + 16px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-full); color: var(--text-2); font-size: 13.5px;
  box-shadow: var(--shadow);
}
.spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ map popup */

/* The card is pinned to the centre of the viewport at every screen size rather
   than anchored beside its pin, so it can never open half off screen or under
   the header. Mapbox writes inline transforms and anchor classes onto the
   popup, hence the !important overrides. */
.mapboxgl-popup,
.mapboxgl-popup-anchor-top, .mapboxgl-popup-anchor-bottom,
.mapboxgl-popup-anchor-left, .mapboxgl-popup-anchor-right,
.mapboxgl-popup-anchor-top-left, .mapboxgl-popup-anchor-top-right,
.mapboxgl-popup-anchor-bottom-left, .mapboxgl-popup-anchor-bottom-right {
  position: fixed !important;
  left: 50% !important; top: 50% !important; bottom: auto !important; right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(391px, 92vw); max-width: min(391px, 92vw) !important;
  z-index: 44;
}
.mapboxgl-popup-tip { display: none !important; }

.mapboxgl-popup-content {
  position: relative;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  min-width: 0;              /* the wrapper above sets the width */
}
.mapboxgl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }
/* sits over the aerial thumbnail, so it needs its own contrast and stacking */
/* The default "×" glyph sits below the optical centre because of its font
   metrics, so it is hidden and the cross is drawn from two centred bars. */
.mapboxgl-popup-close-button {
  z-index: 3;
  width: 32px; height: 32px; top: 9px; right: 9px; padding: 0;
  background: rgba(255,255,255,.94);
  color: #10151c; font-size: 0;
  border-radius: var(--r-full);
  box-shadow: 0 1px 5px rgba(16,21,28,.3);
}
.mapboxgl-popup-close-button::before,
.mapboxgl-popup-close-button::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 12.6px; height: 1.9px; margin: -0.95px 0 0 -6.3px;
  background: currentColor; border-radius: 2px;
}
.mapboxgl-popup-close-button::before { transform: rotate(45deg); }
.mapboxgl-popup-close-button::after  { transform: rotate(-45deg); }
.mapboxgl-popup-close-button:hover { background: #fff; color: #000; }
.mapboxgl-popup-close-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* aerial preview leads the popup: it is the thing people came for */
.pop-thumb {
  display: block; position: relative; width: 100%;
  padding: 0; border: 0; background: var(--surface-2);
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden; cursor: pointer; aspect-ratio: 22 / 15;
}
.pop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pop-thumb-tag {
  position: absolute; bottom: 9px; right: 9px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-full);
  background: rgba(16,21,28,.78); color: #fff; font-size: 13px; font-weight: 500;
  backdrop-filter: blur(3px);
}
.pop-thumb-tag svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.pop-thumb:hover .pop-thumb-tag { background: rgba(16,21,28,.92); }
.pop-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pop-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.pop-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 11px;
  background: var(--accent); color: var(--accent-in);
  border: 0; border-radius: var(--r-sm); text-decoration: none;
  font-size: 15.5px; font-weight: 560; cursor: pointer; white-space: nowrap;
  font-family: inherit;
  transition: background .15s var(--ease);
}
.pop-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; flex: 0 0 auto; }
.pop-cta:hover { background: #0a53b8; }
.pop-cta-2 { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.pop-cta-2:hover { background: var(--line-soft); }
.pop-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* sits in the top bar, left of the close button and centred against it */
/* quiet underlined link under the two buttons */
.pop-link {
  display: block; width: 100%;
  margin-top: 9px; padding: 0;
  background: none; border: 0;
  color: var(--text-3); font-family: inherit; font-size: 13.5px;
  text-align: center; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.pop-link:hover { color: var(--accent); }
.pop-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

/* two-option chooser */
.choices { padding: 0 20px 20px; display: grid; gap: 9px; }
.choice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 15px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; font-family: inherit;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.choice:hover { border-color: var(--accent); background: var(--accent-dim); }
.choice svg { width: 21px; height: 21px; color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.choice span { display: block; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.choice strong { display: block; font-size: 14.5px; font-weight: 580; color: var(--text); margin-bottom: 2px; }
.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.callout-info {
  background: var(--accent-dim); border-color: #bcd4f5; color: #0b4fae;
  margin-bottom: 16px;
}
.current-name {
  font-size: 15px; font-weight: 560; color: var(--text);
  margin: 0 0 14px;
}

.sat-link {
  flex: 0 0 auto; align-self: flex-start;
  height: 34px; display: inline-flex; align-items: center;
  margin-right: 10px;
  color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px;
  text-shadow: 0 1px 3px rgba(8,11,15,.8);
}
.sat-link:hover { text-decoration-thickness: 2px; }

/* -------------------------------------------------------------- comments */

.comment-list { max-height: 260px; overflow-y: auto; padding: 0 20px; }
#comment-add-wrap { padding: 14px 20px 20px; }
.btn.full { width: 100%; justify-content: center; }
.comment { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.comment:first-child { border-top: 0; }
.comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.comment-meta strong { font-size: 13.5px; font-weight: 580; }
.comment-meta span { font-size: 12px; color: var(--text-3); }
.comment p { font-size: 13.5px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.comment-meta .you {
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--accent-dim); color: var(--accent);
  font-size: 11px; font-weight: 560;
}
.comment-tools { display: flex; gap: 7px; margin-top: 8px; }
.comment-tools button {
  padding: 5px 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-2); font-size: 12.5px; cursor: pointer;
}
.comment-tools button:hover { background: var(--line-soft); color: var(--text); }
.comment-edit {
  width: 100%; padding: 9px 11px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); outline: none; resize: vertical; font: inherit;
}
.comment-edit:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.pop { padding: 15px 17px 12px; }
.pop h3 { margin: 0 0 5px; font-size: 17.8px; font-weight: 620; letter-spacing: -0.01em; }
.pop .addr { font-size: 15.5px; color: var(--text-2); line-height: 1.4; }
.pop .approx { font-size: 13.8px; color: var(--text-3); margin-top: 6px; }

/* save sits on the thumbnail immediately left of the close chip */
.pop-save {
  position: absolute; z-index: 3; top: 9px; right: 48px;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: #10151c;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  box-shadow: 0 1px 5px rgba(16,21,28,.3);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.pop-save svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pop-save:hover { background: #fff; }
.pop-save.on { color: var(--accent); }
.pop-save.on svg { fill: var(--accent); stroke: var(--accent); }
.pop-save:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* edit and report sit beside the name and address */
.pop-head { display: flex; align-items: flex-start; gap: 9px; }
.pop-titles { flex: 1; min-width: 0; }

/* ---------------------------------------------------------- saved drawer */

.drawer {
  position: fixed; top: var(--bar-h); right: 0; bottom: 0; width: min(370px, 100vw);
  background: var(--surface); border-left: 1px solid var(--line);
  z-index: 45; display: flex; flex-direction: column;
  animation: slide .22s var(--ease);
}
@keyframes slide { from { transform: translateX(14px); opacity: 0; } }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 12px 15px 17px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { font-size: 15px; }
.saved-list { flex: 1; overflow-y: auto; padding: 8px; }

.saved-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; border-radius: var(--r-sm); cursor: pointer;
}
.saved-item:hover { background: var(--surface-2); }
.saved-item .txt { flex: 1; min-width: 0; }
.saved-item strong { display: block; font-size: 14px; font-weight: 560; }
.saved-item span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.saved-item .icon-btn { flex: 0 0 auto; }

.empty { padding: 34px 20px; text-align: center; color: var(--text-3); font-size: 13.5px; }

/* ---------------------------------------------------------------- modals */

.modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 20px;
  background: rgba(16,21,28,.42);
  animation: fade .16s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.sheet {
  width: min(452px, 100%); max-height: 88dvh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  animation: rise .2s var(--ease);
}
.sheet-wide { width: min(700px, 100%); }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }

.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 14px 14px 20px;
}
.sheet-head h2 { font-size: 17px; }
.sub { font-size: 13px; color: var(--text-3); margin-top: 3px; max-width: 46ch; }

/* contain, not cover: Google bakes its attribution into the bottom of the
   image and cropping or hiding it breaks the Maps terms. The height cap keeps
   the whole frame above the fold so the credit is always visible. */
/* Full-bleed square sheet: the imagery is square, so sizing the sheet square
   means the image meets every edge with no letterboxing and no crop. Nothing
   is overlaid on the bottom-left, where Google renders its credit. */
.sheet-sat {
  position: relative;
  width: min(92vw, 82dvh); aspect-ratio: 1;
  background: var(--bg);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
  animation: rise .2s var(--ease);
}
.sheet-sat > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sat-top {
  position: absolute; inset: 0 0 auto 0;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px;
  background: linear-gradient(rgba(8,11,15,.78), rgba(8,11,15,.34) 62%, transparent);
}
.sat-caption { flex: 1; min-width: 0; padding-top: 3px; }
.sat-caption h2 { font-size: 16px; color: #fff; }
.sat-caption p { font-size: 12.5px; color: rgba(255,255,255,.82); margin-top: 2px; }

.sat-btn {
  flex: 0 0 auto;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: #10151c;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  box-shadow: 0 1px 5px rgba(8,11,15,.32);
}
.sat-btn svg { width: 17px; height: 17px; }
.sat-btn:hover { background: #fff; }
.sat-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* right side only, so Google's bottom-left credit stays unobscured */
.sat-foot {
  position: absolute; right: 12px; bottom: 10px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 3px rgba(8,11,15,.85);
}
.sat-foot a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

form { padding: 0 20px 20px; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; }
legend { padding: 0 0 9px; font-size: 13px; color: var(--text-2); }
fieldset label {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  margin-bottom: 7px; cursor: pointer; font-size: 14px;
}
fieldset label:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
input[type=radio] { accent-color: var(--accent); width: 15px; height: 15px; }

.field { display: block; margin-bottom: 14px; }
.field > span, .field-label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); outline: none; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}

.pinrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 15px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
}

.seg { margin-bottom: 14px; }
.seg legend { padding-bottom: 8px; }
.seg label { margin-bottom: 7px; }

/* --------------------------------------------------------- pin picker */

.picker { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.picker-bar {
  pointer-events: auto;
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.picker-bar p { flex: 1; min-width: 200px; font-size: 13.5px; color: var(--text-2); }

/* the crosshair is fixed to the centre; the map moves under it */
.crosshair {
  position: absolute; top: 50%; left: 50%;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  filter: drop-shadow(0 1px 4px rgba(16,21,28,.45));
}
.crosshair svg { width: 100%; height: 100%; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text); }

.actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }

/* ------------------------------------------------------- adopt a country */

/* scrollable document pages, as opposed to the fixed full-screen map */
body.doc { overflow: auto; display: block; }
body.doc .bar { position: sticky; top: 0; }

.page { max-width: 860px; margin: 0 auto; padding: 32px 22px 80px; }
.page-title { font-size: 30px; margin-bottom: 10px; }
.lede { font-size: 16px; color: var(--text-2); line-height: 1.6; max-width: 62ch; }
.lede.sm { font-size: 14.5px; margin-bottom: 14px; }
.sect {
  font-size: 13px; font-weight: 620; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
  margin: 34px 0 12px;
}
.fine { font-size: 13px; color: var(--text-3); line-height: 1.55; }

.how {
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
.how p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.how p + p { margin-top: 10px; }

.sect-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.sect-row .sect { margin-bottom: 0; }
.page-search { max-width: 260px; flex: 1 1 190px; }
.page-search input { height: 38px; }

.country-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.country {
  padding: 14px 15px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.country.taken { background: var(--surface-2); }
.country-top { display: flex; align-items: center; gap: 11px; }
.flag { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.country-name { flex: 1; min-width: 0; }
.country-name strong { display: block; font-size: 15.5px; font-weight: 580; }
.country-name span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.badge {
  padding: 3px 9px; border-radius: var(--r-full);
  background: #dff3e4; color: #17663a;
  font-size: 11.5px; font-weight: 620; text-transform: uppercase; letter-spacing: .03em;
}
.country-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-size: 19px; font-weight: 620; letter-spacing: -0.01em; }
.country-by { font-size: 13px; color: var(--text-2); }

.breakdown { width: 100%; border-collapse: collapse; }
.breakdown td { padding: 9px 0; font-size: 14px; color: var(--text-2); border-bottom: 1px solid var(--line-soft); }
.breakdown td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.breakdown tr.muted td { color: var(--text-3); font-size: 13px; }
.breakdown tr.total td {
  border-bottom: 0; padding-top: 12px;
  font-size: 17px; font-weight: 620; color: var(--text);
}
/* compact version for the map popup */
.breakdown td span {
  display: block; font-size: 12px; color: var(--text-3); margin-top: 2px;
}
.breakdown tr.sub-total td {
  font-weight: 580; color: var(--text);
  border-bottom-color: var(--line);
}
/* small "?" that reveals an explanation row beneath */
.info-dot {
  width: 17px; height: 17px; margin-left: 6px; padding: 0;
  display: inline-grid; place-items: center; vertical-align: 1px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--text-3); font-size: 11px; font-weight: 620; font-family: inherit;
  cursor: pointer; line-height: 1;
}
.info-dot:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.info-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.breakdown td.note-row {
  padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-2); background: var(--surface-2);
  border-radius: var(--r-sm); border-bottom: 0;
  text-align: left !important;
}

.how-list { margin: 10px 0 12px; padding-left: 20px; }
.how-list li { font-size: 14px; color: var(--text-2); line-height: 1.55; margin-bottom: 7px; }
.how-list strong { color: var(--text); font-weight: 580; }

.breakdown.mini { margin-top: 10px; }
.breakdown.mini td { padding: 6px 0; font-size: 13px; }
.breakdown.mini tr.total td { padding-top: 9px; font-size: 15px; }

.breakdown tr.nofee td {
  border-bottom: 0; padding-top: 10px;
  font-size: 12.5px; color: var(--text-3); text-align: left !important;
}

  padding: 18px 20px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line);
}
#btn-donate { text-decoration: none; }

.adopter {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.adopter strong { font-size: 14.5px; font-weight: 580; }
.adopter-meta { font-size: 13px; color: var(--text-3); margin-left: 7px; }
.adopter-msg { font-size: 13.5px; color: var(--text-2); margin-top: 4px; line-height: 1.5; }

.callout-ok { background: #e8f6ec; border-color: #b6dfc3; color: #17663a; }
#banner { margin-top: 20px; }

/* ----------------------------------------------------------------- about */

.prose { padding: 0 20px 22px; }
.prose h3 {
  margin: 20px 0 6px; font-size: 13px; font-weight: 620;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}
.prose p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; margin-bottom: 9px; }
.prose a { color: var(--accent); }

.callout {
  padding: 13px 15px; border-radius: var(--r-sm);
  background: #fff6e5; border: 1px solid #f0d9a8;
  color: #6b4a00; font-size: 13px; line-height: 1.5;
}
/* Only an explicitly marked heading goes on its own line. :first-child does not
   work here because it matches the first ELEMENT child, so a <strong> that
   starts mid-sentence still matched and split the paragraph in half. */
.callout .callout-title { display: block; margin-bottom: 3px; color: #4a3300; }
.prose .credit { font-size: 12px; color: var(--text-3); margin-top: 12px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 70; padding: 11px 18px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-full); box-shadow: var(--shadow); font-size: 13.5px;
  animation: rise .2s var(--ease);
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 760px) {
  :root { --bar-h: 118px; }
  /* The wrapped bar is taller. This has to land on :root, not on .bar: the
     loading pill, the saved drawer and the arrival notice are all siblings of
     the bar, so an override scoped to .bar never reaches them and they position
     themselves against the 68px desktop value, tucking under the header. */
  .bar { flex-wrap: wrap; height: auto; padding: 11px 13px; gap: 11px; }
  .brand { flex: 1 1 auto; }
  .bar-actions { order: 2; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  /* icon-only buttons in the map header only. `svg + span` means a text-only
     button like "Back to the map" keeps its label instead of going blank, and
     buttons in page content are untouched. */
  .bar .btn svg + span { display: none; }
  .btn { padding: 0 12px; }
  .drawer { top: auto; left: 0; height: 66dvh; width: 100%; border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .loading { top: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* "See the math" reveal under the adopt breakdown */
.show-math {
  margin-left: 0; padding: 0; background: none; border: 0;
  color: var(--accent); font: inherit; font-size: 12.5px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.breakdown td.math {
  padding: 12px 14px; border-bottom: 0;
  background: var(--bg); border-radius: var(--r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.7; color: var(--text-2);
  white-space: pre; overflow-x: auto; text-align: left !important;
}

/* About sheet: wider, with the contact line centred at the foot */
#about .sheet { width: min(620px, 100%); }
.prose .contact {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  text-align: center; font-size: 13.5px; color: var(--text-3);
}


/* anchors styled as buttons must not carry the default link underline */
a.btn { text-decoration: none; }

/* Adopt view is a page section, not a dialog, so the cost table has room */
#adopt-page .breakdown { max-width: 560px; }
#adopt-page .callout, #adopt-page form { max-width: 560px; }
#adopt-page .field input { max-width: 100%; }
.back-link {
  display: inline-block; margin-bottom: 16px; padding: 0;
  background: none; border: 0; font: inherit; font-size: 13.5px;
  color: var(--accent); cursor: pointer;
}
.back-link:hover { text-decoration: underline; }

/* narrow popups must wrap rather than force the table wide */
.breakdown.mini { table-layout: fixed; width: 100%; }
.breakdown.mini td { overflow-wrap: anywhere; }
.breakdown.mini td:last-child { width: 6.5em; }

/* Country popups carry a monospace cost breakdown, so they get more width than
   the track cards and a smaller mono size so the sum never overflows. */
.country-pop.mapboxgl-popup,
.country-pop .mapboxgl-popup-content {
  width: min(452px, 94vw) !important;
  max-width: min(452px, 94vw) !important;
}
.breakdown.mini + tr .math,
.country-pop .math { font-size: 10.5px; line-height: 1.65; padding: 10px 11px; }

/* Cost breakdown: one row per API, showing requests x rate = cost */
.breakdown td.mathwrap {
  padding: 12px 4px 4px; border-bottom: 0;
  background: none; text-align: left !important;
}
.mathtable { width: 100%; border-collapse: collapse; }
.mathtable td {
  padding: 7px 4px; border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--text-2); vertical-align: top;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mathtable .m-api { white-space: normal; padding-right: 8px; }
.mathtable .m-api a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.mathtable .m-api span,
.mathtable .m-rate span { display: block; font-size: 11px; color: var(--text-3); }
.mathtable .m-n, .mathtable .m-cost { text-align: right; }
.mathtable .m-x, .mathtable .m-eq { color: var(--text-3); padding: 7px 5px; }
.mathtable .m-rate { text-align: right; }
.mathtable .m-cost { font-weight: 560; color: var(--text); }
.mathtable .m-total td, .mathtable .m-floor td { border-bottom: 0; }
.mathtable .m-total td { padding-top: 10px; font-weight: 620; color: var(--text); }
.mathtable .m-floor td { color: var(--text-3); font-size: 12px; }

/* the popup is narrower, so tighten it there */
.country-pop .mathtable td { font-size: 11.5px; padding: 6px 3px; }
.country-pop .mathtable .m-api span, .country-pop .mathtable .m-rate span { font-size: 10px; }

.page.narrow { max-width: 560px; }
.btn.big { height: 50px; padding: 0 24px; font-size: 16px; }

/* the donate button is page content, never icon-only */

.page.narrow .btn.big { display: inline-flex; }
.page.narrow .btn.big span { display: inline !important; }

/* ---- funding progress -------------------------------------------------- */
/* A country is funded by many donations, so every country card and popup
   carries a bar rather than a single price. */
.fundbar { margin: 10px 0 12px; }
.fundbar-track {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--line, #e3e7ec);
}
.fundbar-fill {
  height: 100%; border-radius: 999px; background: #0b5fd0;
  transition: width .3s ease;
}
.country.taken .fundbar-fill { background: #17a05e; }
.fundbar-note {
  margin: 6px 0 0; font-size: 12.5px; color: var(--text-2);
  line-height: 1.45;
}
.fundbar-note strong { color: var(--text); }

/* preset amounts; the exact figure still lives in the number input */
.amount-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.chip {
  border: 1px solid var(--line, #d7dde5); background: transparent;
  border-radius: 999px; padding: 6px 14px; font-size: 14px;
  cursor: pointer; color: var(--text);
}
.chip:hover { border-color: #0b5fd0; color: #0b5fd0; }

/* the estimate caveat sits with the country list, not in the footnotes */
.estimate-note { margin: 14px 0 20px; max-width: 62ch; }

/* ------------------------------------------------- about / sponsor pages */

/* Split hero. Asymmetric on purpose: the photograph is the argument, so it
   takes the larger share and bleeds to the top of the page. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 42px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 22px 20px;
}
.hero-copy { min-width: 0; }
.hero-title {
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 640;
  margin-bottom: 16px;
  max-width: 15ch;
}
.hero-copy .lede { font-size: 16.5px; }

/* A tagline that has to hold one line. The 15ch cap above is for a title
   sitting beside the hero photograph, where stacking it is the point; on a
   page with nothing next to it, "Put a country on the / map." reads as a bug
   rather than a deliberate break. The cap goes, and the type scales a little
   harder so the line still fits once the viewport is narrow enough that 50px
   would not. The 24px floor is set by the narrowest phone worth supporting:
   at 320px the page gives the line 276px, and the tagline needs 262px of it. */
.hero-title.one-line {
  max-width: none;
  font-size: clamp(24px, 6.4vw, 50px);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-cta .btn { height: 42px; padding: 0 18px; font-size: 14.5px; }

.hero-shot { margin: 0; min-width: 0; }
.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.hero-shot figcaption,
.shots figcaption {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--text-3);
}

/* Section heading. Sentence case and full size, rather than the small
   uppercase label used inside the app shell: these are pages to read. */
.h-sect {
  font-size: 21px;
  font-weight: 620;
  letter-spacing: -0.02em;
  margin: 52px 0 12px;
}
.hero + .page .h-sect:first-child,
.cost-block .h-sect { margin-top: 0; }

.body { font-size: 15px; color: var(--text-2); line-height: 1.65; max-width: 68ch; }
.body + .body { margin-top: 11px; }
.body.wide { max-width: 74ch; }

.stat-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 34px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stat { background: var(--surface); padding: 20px 18px; }
.stat strong {
  display: block;
  font-size: 27px;
  font-weight: 640;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}

/* Prose on the left, sources on the right. Two columns of real content, not a
   headline with a floating explainer. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 38px;
  align-items: start;
}
.rule-list { margin-top: 52px; border-top: 1px solid var(--line); }
.rule-list div { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.rule-list strong { display: block; font-size: 14px; font-weight: 580; }
.rule-list span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); line-height: 1.5; }

/* The naming passes. Numbered because the order is the point: each pass only
   runs on what the one before it could not settle. */
.ladder { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: pass; }
.ladder li {
  counter-increment: pass;
  position: relative;
  padding: 0 0 22px 46px;
}
.ladder li::before {
  content: counter(pass);
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 13px; font-weight: 640;
  font-variant-numeric: tabular-nums;
}
/* the connecting line stops at the last pass */
.ladder li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13.5px; top: 34px; bottom: 8px;
  width: 1px;
  background: var(--line);
}
.ladder h3 { margin: 4px 0 5px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.ladder p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; max-width: 66ch; }

.honest {
  margin-top: 52px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.honest .h-sect { margin-top: 0; }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 52px; }
.shots figure { margin: 0; }
.shots img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.closer { margin-top: 52px; }
.closer .btn { margin-top: 18px; }

.page-foot { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); }
.page-foot .fine + .fine { margin-top: 8px; }

/* Four rates, one of which carries most of the bill and says so. Not four
   equal cards: the wide cell is the one that matters. */
.rate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.rate {
  padding: 16px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.rate-lead { grid-row: span 2; background: linear-gradient(180deg, #f4f8fe, var(--surface) 60%); }
.rate-price {
  display: block;
  font-size: 22px; font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.rate strong { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 580; }
.rate p { margin-top: 7px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.rate-foot { margin-top: 10px; }
.honesty { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.honesty .fine + .fine { margin-top: 9px; }

/* motion: a single settle on load, nothing on scroll */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-shot {
    animation: rise .5s var(--ease) both;
  }
  .hero-shot { animation-delay: .06s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 22px 8px;
  }
  .hero-title { max-width: none; }
  .split { grid-template-columns: 1fr; gap: 22px; }
  .rule-list { margin-top: 0; }
  .stat-band { grid-template-columns: 1fr; }
  .rate-grid { grid-template-columns: 1fr; }
  .rate-lead { grid-row: auto; }
  .shots { grid-template-columns: 1fr; }
}

/* ===== Sponsor page ====================================================
   Redesign-preserve: same tokens, same light lock, same single accent, same
   radius scale. Nothing here is a new design language, it is the existing one
   given room.

   Composition is a full-width tagline sitting OVER an asymmetric split rather
   than beside it. Two reasons. The tagline has to hold one line, and a copy
   column in a 50/50 split is roughly 530px, which is narrower than the line
   needs at its display size. And a headline that spans the full measure with
   the split beneath it is a less templated shape than the hero-left /
   photo-right arrangement every other page of this site already uses. */
.sponsor { max-width: 1140px; margin: 0 auto; padding: 40px 22px 80px; }
.sponsor-title { margin-bottom: 20px; }

.sponsor-lede {
  font-size: 17px; line-height: 1.6;
  color: var(--text-2); max-width: 56ch;
}
.sponsor-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }

.sponsor-lede-2 { margin-top: 14px; }
/* the lede runs in --text-2, so bold alone would not lift off it */
.sponsor-lede strong { color: var(--text); font-weight: 640; }

.countries-sect { margin-top: 60px; }
.donors-sect { margin-top: 68px; }

/* Same treatment as the cost question in the About FAQ, so the two tables
   read as one explanation split across two pages. */
.costwrap { overflow-x: auto; margin: 14px 0 6px; }
.costwrap .mathtable { min-width: 460px; }
.mathtable .m-head td {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; padding-bottom: 3px;
}

.cost { margin-top: 76px; }
.cost-lede { margin-bottom: 26px; }

/* Tactile feedback on press. Not decoration: it acknowledges the tap, which
   is the one place this page has any reason to move. */
.btn:active { transform: translateY(1px); }

@media (max-width: 860px) {
  .sponsor { padding-top: 28px; }
  .sponsor-lede { max-width: none; }
  .cost { margin-top: 56px; }
}

/* ---- checkout: tip and total ------------------------------------------
   The form had three grey paragraphs of the same weight stacked in a row,
   which read as one undifferentiated block. The tip is now its own fenced
   group, and the total is a single line pinned above the button. */
.unlock-note { margin-top: 14px; }

/* Sits between the progress bar and the cost table on the country checkout
   page. Accent rule rather than a filled box: the page is already a stack of
   bordered rows, and a tinted panel here read as an alert rather than a claim. */
.no-cut {
  margin: 22px 0 30px;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--accent);
  font-size: 15.5px; line-height: 1.6;
  color: var(--text-2); max-width: 62ch;
}
.no-cut strong { color: var(--text); font-weight: 640; }

.tip {
  margin: 22px 0;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.check {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 14.5px; color: var(--text);
}
.check input {
  width: 17px; height: 17px; margin: 0; flex: 0 0 auto;
  accent-color: var(--accent); cursor: pointer;
}
/* indented to the label text, so the hint reads as belonging to the tick
   rather than as the next thing in the form */
.tip-why { margin: 5px 0 0 27px; }
.tip-field { margin: 14px 0 0 27px; max-width: 220px; }

.charge {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px; color: var(--text);
}
.charge strong { font-weight: 640; }
.stripe-note { margin-top: 12px; }

/* the breakdown names its sources, so they have to look clickable */
.breakdown td a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
}
.breakdown td a:hover { border-bottom-color: var(--accent); }

/* Header tagline, parked at the far end of the bar opposite the wordmark.
   Desktop only: below 1200px the bar already has to fit a search field and up
   to four actions, and this is the first thing that should give. */
.bar > .tagline {
  margin-left: auto;
  /* pulled in from the right edge so it reads as part of the bar rather than
     as something jammed into the corner */
  margin-right: 26px;
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--text-2);
  white-space: nowrap;
}
@media (max-width: 1200px) {
  .bar > .tagline { display: none; }
}

/* ---- arrival notice ---------------------------------------------------
   Overlays the map below the bar, positioned the same way as the loading
   pill so the two read as one family. Absolute rather than in the flex
   column: appearing a second late must not resize the map. */
.notice {
  position: absolute;
  top: calc(var(--bar-h) + 14px);
  left: 50%;
  z-index: 35;
  display: flex;
  /* centred, not flex-start: the text is a single short line and the dismiss
     button is 32px tall, so top-aligning left the sentence riding high in the
     box against a much taller neighbour */
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(600px, calc(100vw - 28px));
  padding: 12px 12px 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  animation: notice-in .3s var(--ease) both;
}
.notice p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 62ch;
}

@keyframes notice-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .notice { animation: none; }
}
@media (max-width: 620px) {
  .notice { padding: 11px 10px 11px 13px; }
  .notice p { font-size: 12.5px; }
}