/* Sidebar modules on /map/: the places map and the Duolingo panel.
   Both inherit the --rs- tokens from .rs, set in reading-stats.css and
   re-stepped for dark in dark.css, so the accent lives in one place. */

.pm,
.duo {
  background: var(--rs-surface);
  border: 1px solid var(--rs-grid);
  border-radius: 10px;
  padding: 0.85rem 0.9rem 0.9rem;
  /* Keeps both panels off the map cards in the column beside them. */
  margin-right: 1.75rem;
}

.pm { margin-top: 1.25rem; }
.duo { margin-top: 1rem; }

@media (max-width: 991.98px) {
  .pm, .duo { margin-right: 0; }
}

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

.pm-heading,
.duo-heading {
  font-family: var(--summary, 'Frank Ruhl Libre'), serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--rs-ink);
  margin: 0 0 0.5rem;
}

/* Deliberately much smaller than the heading and in the muted grey, so it reads
   as a caption under the title rather than competing with it. */
.pm-intro {
  font-size: 0.62rem;
  line-height: 1.5;
  color: var(--rs-muted);
  margin: 0 0 0.6rem;
}

/* Region presets. The aspect ratio is set inline by the partial's script so a
   zoomed view fills the column at its own height instead of letterboxing. */
.pm-zoom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.45rem;
}

.pm-zoom-btn {
  font-family: var(--rs-sans);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--rs-ink-2);
  background: none;
  border: 1px solid var(--rs-grid);
  border-radius: 999px;
  padding: 0.08rem 0.42rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.pm-zoom-btn:hover { border-color: var(--rs-s1); color: var(--rs-s1); }

.pm-zoom-btn.is-on {
  background: var(--rs-s1);
  border-color: var(--rs-s1);
  color: var(--rs-surface);
}

.pm-frame {
  border-radius: 6px;
  overflow: hidden;
  background: var(--rs-track);
  line-height: 0;
  max-height: 420px;      /* keeps the tallest region from running away */
}

.pm-frame svg { width: 100%; height: 100%; display: block; }

.pm-land {
  fill: var(--rs-surface);
  stroke: var(--rs-grid);
  stroke-width: 0.3;
}

.pm-dot { stroke: var(--rs-surface); stroke-width: 0.6; }
.pm-dot--lived { fill: var(--rs-s1); }
.pm-dot--visited { fill: var(--rs-muted); }

.pm-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  list-style: none;
  padding: 0;
  margin: 0.55rem 0 0;
  color: var(--rs-ink-2);
}

.pm-key li { font-size: 0.68rem; }

.pm-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.3rem;
  vertical-align: 0;
}

.pm-swatch--lived { background: var(--rs-s1); }
.pm-swatch--visited { background: var(--rs-muted); }

.pm-list { margin-top: 0.55rem; }

.pm-list > summary {
  cursor: pointer;
  font-size: 0.64rem;
  color: var(--rs-ink-2);
}

.pm-list h3 {
  font-family: var(--rs-sans);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rs-muted);
  margin: 0.5rem 0 0.15rem;
}

/* Two columns at this size, so 36 places do not run the panel long. */
.pm-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.6rem;
  line-height: 1.45;
  color: var(--rs-ink-2);
  columns: 2;
  column-gap: 0.7rem;
}

/* style.css sets a global `ul > li { font-size: large }`, which beats a size set
   on the ul itself. These have to target the li directly to win it back. */
.pm-list li {
  break-inside: avoid;
  font-size: 0.6rem;
  line-height: 1.45;
}

/* Footnotes sit under the whole list, in smaller print, so a long sentence
   never has to fit inside a half-width column. */
.pm-mark {
  color: var(--rs-s1);
  font-weight: 700;
}

.pm-notes {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rs-grid);
}

.pm-notes p {
  margin: 0 0 0.3rem;
  font-size: 0.54rem;
  line-height: 1.5;
  color: var(--rs-muted);
}

/* ---------- duolingo ---------- */

.duo-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.duo-top .duo-heading { margin: 0; }

.duo-owl { width: 26px; height: 26px; flex: 0 0 auto; }
.duo-owl-body { fill: #58a700; }
.duo-owl-tuft, .duo-owl-wing { fill: #4a8b00; }
.duo-owl-eye { fill: #ffffff; }
.duo-owl-pupil { fill: #24401f; }
.duo-owl-beak { fill: #ffc200; }

.duo-streak {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rs-grid);
}

.duo-streak-n {
  font-family: var(--rs-sans);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rs-s1);
}

.duo-streak-label {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--rs-ink-2);
}

.duo-streak-label small { font-size: 0.66rem; color: var(--rs-muted); }

.duo-totals {
  font-size: 0.72rem;
  color: var(--rs-muted);
  margin: 0.5rem 0 0.55rem;
}

.duo-totals strong { color: var(--rs-ink); font-variant-numeric: tabular-nums; }

/* Each row is a grid so the flag, name, level and points stay in columns, with
   the bar tucked underneath as a hairline rather than taking its own row. */
.duo-langs {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}

.duo-lang {
  display: grid;
  grid-template-columns: 1.1rem 1fr auto auto;
  align-items: baseline;
  gap: 0 0.35rem;
  padding: 0.24rem 0 0.3rem;
  position: relative;
  font-size: 0.74rem;
}

.duo-lang + .duo-lang { border-top: 1px solid var(--rs-grid); }

.duo-flag { font-size: 0.85rem; line-height: 1; }

.duo-name {
  color: var(--rs-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.duo-lvl {
  font-family: var(--rs-sans);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--rs-surface);
  background: var(--rs-s1);
  border-radius: 3px;
  padding: 0.05rem 0.24rem;
  letter-spacing: 0.02em;
}

.duo-xp {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--rs-muted);
  white-space: nowrap;
}

/* Hairline under the row, scaled to the language's share of the leader. */
.duo-bar {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--rs-s1);
  opacity: 0.55;
  margin-top: 0.24rem;
}

.duo-foot {
  margin: 0.6rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rs-grid);
  font-size: 0.72rem;
  line-height: 1.4;
}

.duo-foot small {
  display: block;
  color: var(--rs-muted);
  font-size: 0.64rem;
  margin-top: 0.15rem;
}

/* The full language list, on demand under the top ten. */
.duo-all {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rs-grid);
}

.duo-all > summary {
  cursor: pointer;
  font-size: 0.54rem;
  letter-spacing: 0.02em;
  color: var(--rs-muted);
}

.duo-all > summary:hover { color: var(--rs-s1); }

.duo-langs--rest { margin-top: 0.35rem; }

/* No bar on these rows, so the grid is three columns rather than four. */
.duo-lang--rest {
  grid-template-columns: 1.1rem 1fr auto auto;
  padding: 0.16rem 0 0.18rem;
  font-size: 0.7rem;
}