/* ==========================================================================
   BNBO — /progress: the goal bars and the map. Palette from styles.css.
   ========================================================================== */

/* --- how far the reach goes ---------------------------------------------- */
.reach { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.reach-item {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 15px;
  background: var(--card);
  border: var(--bw) solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.reach-n { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1; }
.reach-of { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--muted); }
.reach-l { font-size: .86rem; font-weight: 600; color: var(--muted); margin-left: 2px; }

/* --- map ----------------------------------------------------------------- */
.map-card {
  margin-top: 20px;
  padding: 10px 10px 14px;
  background: var(--card-warm);
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.map-holder svg { width: 100%; height: auto; display: block; }
.map-holder path {
  /* every border drawn in the same ink as the rest of the site, so the
     countries read as outlined shapes rather than one flat blob */
  fill: #EFE7D2; stroke: var(--line); stroke-width: .7;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
  transition: fill .15s ease;
}
.map-holder path.is-done { stroke-width: 1.1; }
.map-holder path.is-done:hover { filter: brightness(.92); }

/* Each country we have reached gets its own colour, so neighbours — and
   islands sitting next to each other — never read as one shape. The same
   colour repeats on that country's chip below the map. */
.map-holder path.tone-1 { fill: #F0B90B; }
.map-holder path.tone-2 { fill: #0ECB81; }
.map-holder path.tone-3 { fill: #F6465D; }
.map-holder path.tone-4 { fill: #4DA3FF; }
.map-holder path.tone-5 { fill: #B57BFF; }
.map-holder path.tone-6 { fill: #FF8A3C; }
.map-holder path.tone-7 { fill: #00C2CB; }
.map-holder path.tone-8 { fill: #FFD84D; }

.chip-dot {
  width: 11px; height: 11px; flex: none;
  border: 2px solid var(--line); border-radius: 50%;
}
.chip-dot.tone-none { background: repeating-linear-gradient(45deg, #D9CFB6 0 4px, #EFE7D2 4px 8px); }
.country-chip.is-unplaced .chip-name { color: var(--muted); }
.cd-note { font-size: .78rem; color: var(--muted); font-style: italic; }

.chip-dot.tone-1 { background: #F0B90B; }
.chip-dot.tone-2 { background: #0ECB81; }
.chip-dot.tone-3 { background: #F6465D; }
.chip-dot.tone-4 { background: #4DA3FF; }
.chip-dot.tone-5 { background: #B57BFF; }
.chip-dot.tone-6 { background: #FF8A3C; }
.chip-dot.tone-7 { background: #00C2CB; }
.chip-dot.tone-8 { background: #FFD84D; }
.map-holder path.is-done:hover { fill: var(--gold-deep); }

.map-ring {
  fill: none; stroke-width: 2.4; vector-effect: non-scaling-stroke;
  cursor: pointer; opacity: .85;
}
.map-ring:hover { opacity: 1; }

.country-strip {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 12px;
  border-top: 2px solid var(--line);
}
.country-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; font: inherit; cursor: pointer;
  background: var(--card);
  border: 2px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.country-chip:hover { background: var(--gold-soft); }
.chip-name { font-weight: 700; font-size: .9rem; }
.chip-n { font-size: .76rem; color: var(--muted); }

/* --- the drops from one country ------------------------------------------ */
.country-drops {
  margin-top: 16px; padding: 16px;
  background: var(--card);
  border: var(--bw) solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.cd-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 2px solid var(--line);
}
.cd-title { margin: 0; font-size: 1.25rem; }
.cd-sum { font-size: .84rem; color: var(--muted); font-weight: 600; }

.cd-row {
  display: grid; grid-template-columns: 92px 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(30,32,38,.1);
  text-decoration: none; color: inherit;
}
.cd-row:last-child { border-bottom: 0; }
a.cd-row:hover .cd-name { text-decoration: underline; }
.cd-date { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cd-name { font-weight: 600; font-size: .92rem; }
.cd-usd { font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .cd-row { grid-template-columns: 1fr auto; }
  .cd-date { grid-column: 1 / -1; }
}