/* Shared mobile chrome: the brand mark and the card carousels.
 *
 * Loaded by both the public site and the admin, so nothing here may reuse a
 * class name a page sheet defines. The mark is sized once, here; each page adds
 * its own spacing around it with a flex gap on the wordmark.
 */

.brand-mark { display: inline-flex; flex-shrink: 0; width: 26px; height: 26px; }
.brand-mark svg { width: 100%; height: 100%; display: block; }

/* Card groups become swipeable snap rows on a phone. Six feature cards or four
   stat tiles stacked into one column is a very long scroll for something the
   eye reads as a single set; a row keeps the set together and one swipe wide.
   Above 760px the attribute is inert and the page's own grid applies. */
.carousel-ctl { display: none; }

@media (max-width: 760px) {
  [data-carousel] {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding: 2px 0 8px; scrollbar-width: none;
  }
  [data-carousel]::-webkit-scrollbar { display: none; }
  [data-carousel] > * { flex: 0 0 min(80%, 300px); min-width: 0; scroll-snap-align: start; }

  /* mobile-ui.js injects these only when the track actually overflows, so a
     group that fits on one screen never grows arrows it does not need. The
     admin sheet gives every bare <button> a blue fill and a top margin, so
     these carry their own reset at a specificity that beats it. */
  .carousel-ctl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
  .carousel-ctl button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin: 0; padding: 0; border: 1px solid #e2e8f0;
    border-radius: 50%; background: #fff; color: #475569; font-size: 20px; line-height: 1;
    cursor: pointer;
  }
  .carousel-ctl button:hover { background: #f1f5f9; color: #0f172a; }
  .carousel-ctl button:disabled { opacity: .4; cursor: default; }
  .carousel-dots { display: flex; gap: 6px; }
  /* Scoped under .carousel-ctl on purpose: the bare `.carousel-ctl button`
     rule above carries a class plus an element and would otherwise hand the
     dots the arrows' 38px box. */
  .carousel-ctl .carousel-dot { width: 8px; height: 8px; margin: 0; padding: 0; border: 0;
    border-radius: 50%; background: #cbd5e1; cursor: pointer; }
  .carousel-ctl .carousel-dot:hover { background: #94a3b8; }
  .carousel-ctl .carousel-dot.is-on { background: #1a73e8; }
}