/* map-stats — styles for components/map-stats.php

   Owned by that component. Nothing else should style these selectors: the
   map spent a long time with its rules split between map-style.css and an
   inline <style> in map.php, where the inline copy silently won and the
   responsive rules never applied. One selector, one file. */

.sbar {
  padding: 8px 0 8px 20px;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;

  /* Scrolls sideways rather than wrapping or shrinking the pills. nowrap is
     what forces the overflow in the first place; without it they would wrap
     and the bar would grow taller instead. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sbar::-webkit-scrollbar { display: none; }

.sbar::-webkit-scrollbar { display: none; }

.st {
  /* A <button> rendered as a pill. The first four declarations undo the UA
     defaults so it still reads as a count rather than a form control. */
  font: inherit;
  color: inherit;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;                 /* never squeezed when the row starts to scroll */

  /* Padding on all four sides, no fixed height and no width. A 34px height
     meant the pill could not grow to its content, so a longer label had
     nowhere to go and read as cramped against the edge. Now the box is
     whatever the text needs plus the same padding all round. */
  padding: 9px 16px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50px;
  white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s;
}

.st:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--border-bright);
}

.st.on {
  background: var(--buy);
  border-color: var(--buy);
  color: #fff;
}

.st.on .n,
.st.on .l { color: #fff; }

.st:disabled {
  cursor: default;
  opacity: .45;
}

.st:focus-visible {
  outline: 2px solid var(--buy);
  outline-offset: -2px;
}

/* .st:first-child { padding-left: 0 } lived here from when the counts were a
   divided bar and the first one sat flush with the edge. As a pill it just
   removed the left padding from the Total pill — two classes of specificity
   beating the .st rule that sets it — which is why that one looked cramped
   while the others did not. The bar provides its own leading gap now. */

.st .n {
  font-size: 1rem;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  line-height: 1;
  color: var(--text);
}

.st .l {
  font-size: .65rem;
  line-height: 1;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 500;
  /* letter-spacing also trails the last character, which pushes the text box
     wider than the glyphs and makes the right padding look bigger than the
     left. Pulling it back makes the two sides optically equal. */
  margin-right: -.6px;
}

.sbar {
    scroll-behavior: smooth;
}

@media (max-width: 768px) {
  .sbar {
      width: 100%;
      /* No fixed height — the pills set it. 42px clipped them. */
      padding: 8px 0 8px 16px;
    }
}

@media (max-width: 992px) {
  .sbar {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          padding: 8px 0 8px 16px;  /* vertical padding kept: the pills need it */
      }

  .sbar::-webkit-scrollbar {
          display: none;   /* scrolls, but without a visible track */
      }

  .sbar::-webkit-scrollbar-thumb {
          background: rgba(0,0,0,0.2);
          border-radius: 3px;
      }
}

/* Touch devices get a taller hit area — as a minimum, so the pill can still
   grow if a label ever needs two lines. */
@media (hover: none) and (pointer: coarse) {
  .st {
    min-height: 40px;
  }
}