/* MapMog "Progress" batch: merit badges, daily streak, leaderboard.
   --v-* tokens only (design-tokens.css); tint colours come from profile.css
   (.pc-tint-*). Original art: every glyph is an inline SVG symbol built in badges.js. */

.pc-bdg-glyph { display: block; }
.pc-bdg .pc-bdg-glyph { width: 34px; height: 34px; }
.pc-streak .pc-bdg-glyph { width: 30px; height: 30px; }

/* ---- badge grid ---- */
.pc-bdg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.pc-bdg-count { font: 700 15px/1.3 var(--v-font); color: var(--v-ink); }
.pc-bdg-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pc-bdg-sub { margin: 14px 0 8px; font: 700 12px/1.3 var(--v-font); letter-spacing: 1.2px; color: var(--v-mut); }
.pc-bdg {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  min-width: 0; padding: 10px 2px 9px; border-radius: 12px; cursor: pointer;
  background: var(--v-surf); border: 1px solid var(--v-line); font-family: var(--v-font);
}
.pc-bdg:focus-visible { outline: 2px solid var(--v-acc); outline-offset: 2px; }
.pc-bdg-name { font: 600 12px/1.25 var(--v-font); color: var(--v-ink); text-align: center; overflow-wrap: break-word; max-width: 100%; }
.pc-bdg.is-earned { border-color: currentColor; background: var(--v-surf2); box-shadow: inset 0 0 0 1px currentColor; }
.pc-bdg.is-earned .pc-bdg-glyph { filter: drop-shadow(0 0 5px currentColor); }
.pc-bdg.is-locked .pc-bdg-glyph, .pc-bdg.is-missed .pc-bdg-glyph { opacity: .38; }
.pc-bdg.is-locked .pc-bdg-name, .pc-bdg.is-missed .pc-bdg-name { color: var(--v-mut); }
.pc-bdg.is-missed { border-style: dotted; }
.pc-bdg.is-coming { border-style: dashed; background: transparent; cursor: default; }
.pc-bdg.is-coming .pc-bdg-glyph { opacity: .3; }
.pc-bdg.is-coming .pc-bdg-name { color: var(--v-mut); }
.pc-bdg-bar { align-self: stretch; height: 4px; margin: 0 6px; border-radius: 99px; background: var(--v-trk); overflow: hidden; }
.pc-bdg-bar i { display: block; height: 100%; background: var(--v-acc); border-radius: inherit; }
.pc-bdg-detail { margin: 12px 0 0; min-height: 2.8em; font: 500 14px/1.4 var(--v-font); color: var(--v-ink); }

/* ---- streak ---- */
.pc-streak { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.pc-streak .pc-bdg-glyph { color: var(--v-mut); flex: none; }
.pc-streak .pc-bdg-glyph.is-lit { color: var(--pc-flame); }
.pc-streak .pc-bdg-glyph.is-risk { opacity: .85; } /* alive but not painted today */
.pc-streak-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 120px; }
.pc-streak-big { font: 800 20px/1.2 var(--v-font); color: var(--v-ink); }
.pc-streak-line { font: 500 13px/1.35 var(--v-font); color: var(--v-mut); }
.pc-streak-dots { display: flex; gap: 4px; flex: 1 1 100%; }
.pc-streak-dots i { flex: 1; height: 8px; border-radius: 3px; background: var(--v-trk); }
.pc-streak-dots i.on { background: var(--pc-flame); } /* same red as the flame in every theme (--v-live is pink in neon) */
.pc-streak-dots i.today { outline: 1.5px solid var(--v-ink); outline-offset: 1px; }

/* ---- leaderboard ---- */
.pc-lb { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pc-lb-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pc-lb-tab {
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--v-line); background: transparent;
  color: var(--v-mut); font: 700 13px/1.2 var(--v-font); cursor: pointer;
}
.pc-lb-tab.is-on { background: var(--v-acc); border-color: var(--v-acc); color: var(--v-accink); }
.pc-lb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-lb-row {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 10px; font: 600 14px/1.3 var(--v-font); color: var(--v-ink);
}
.pc-lb-row.is-top .pc-lb-rank { color: var(--pc-gold, var(--v-acc)); }
.pc-lb-row.is-you { background: var(--v-surf2); box-shadow: inset 0 0 0 1px var(--v-acc); }
.pc-lb-rank { font-weight: 800; color: var(--v-mut); text-align: right; font-variant-numeric: tabular-nums; }
.pc-lb-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pc-lb-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-lb-you { flex: none; padding: 1px 6px; border-radius: 99px; background: var(--v-acc); color: var(--v-accink); font: 700 12px/1.3 var(--v-font); }
.pc-lb-px { font-variant-numeric: tabular-nums; font-weight: 700; }
.pc-lb-gap { text-align: center; color: var(--v-mut); font: 700 14px/1 var(--v-font); padding: 2px 0; }
.pc-lb-note { margin: 0; color: var(--v-mut); font: 500 13px/1.4 var(--v-font); }
.pc-lb-note:empty { display: none; }
/* Loading: three plain grey rows, no animation. Error: one sentence and a Retry pill. */
.pc-lb-skel { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.pc-lb-skel[hidden], .pc-lb-retry[hidden] { display: none; }
.pc-lb-skel-row { display: block; height: 14px; border-radius: 7px; background: var(--v-trk); }
.pc-lb-skel-row:nth-child(2) { width: 82%; }
.pc-lb-skel-row:nth-child(3) { width: 64%; }
.pc-lb-retry {
  align-self: flex-start; margin: 2px 0 0; padding: 6px 16px; border-radius: 99px; border: 1px solid var(--v-line);
  background: var(--v-surf2); color: var(--v-ink); font: 600 13px/1.2 var(--v-font); cursor: pointer;
  transition: border-color var(--v-dur-fast, 120ms) var(--v-ease-out, ease-out);
}
.pc-lb-retry:hover { border-color: var(--v-mut); }
.pc-lb-retry:focus-visible, .pc-lb-tab:focus-visible { outline: 2px solid var(--v-acc); outline-offset: 2px; }
.pc-lb-rule { margin: 2px 0 0; color: var(--v-mut); font: 500 12px/1.4 var(--v-font); }
.pc-lb-rule:empty { display: none; }

/* compact column (live panel): tighter */
.pc-lb--compact .pc-lb-row { padding: 4px 4px; font-size: 13px; }
.pc-lb--compact .pc-lb-tab { padding: 4px 9px; font-size: 12px; }

/* inside the demo walk panel: inherit the panel's own colours */
.pc-lb--walk .pc-lb-row, .pc-lb--walk .pc-lb-note, .pc-lb--walk .pc-lb-rule { color: inherit; }
.pc-lb--walk .pc-lb-tab { color: inherit; opacity: .7; }
.pc-lb--walk .pc-lb-tab.is-on { opacity: 1; }
.pc-lb--walk .pc-lb-row.is-you { background: rgba(127, 127, 127, .16); }

@media (max-width: 600px) {
  .pc-bdg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 860px) {
  .pc-bdg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pc-streak-rank { flex: 1 1 100%; margin-top: 2px; font: 500 13px/1.35 var(--v-font); color: var(--v-mut); }

/* Week/Month Streak tiles: the pane's red pixel fire, drawn a little larger because it fills 15 of 24 units. */
.pc-bdg .pc-bdg-fire { width: 40px; height: 40px; margin: -3px 0; color: var(--pc-flame); }