/* Live activity strip — scoped to .las-*
 *
 * The site ships a prebuilt Tailwind bundle; utility classes that were never
 * compiled into it silently do nothing, so this component styles itself and
 * borrows only the site's theme variables (--brand, --brand-light, --brand-dark,
 * --accent). No hardcoded brand colours: a rebrand re-tints this automatically.
 */

.las { --las-wash: color-mix(in srgb, var(--brand) 7%, #fff);
       border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
       background: linear-gradient(90deg, var(--las-wash), #fff 72%);
       font-family: inherit; color: #0f172a; }
.las *, .las *::before, .las *::after { box-sizing: border-box; }

/* ── collapsed bar (the whole thing is one <button>) ───────────────── */
.las-bar { display: flex; align-items: center; gap: .6rem; width: 100%;
           max-width: 80rem; margin: 0 auto; padding: 0 1rem;
           min-height: 48px; /* reserved up-front: no CLS while data loads */
           background: none; border: 0; font: inherit; color: inherit;
           cursor: pointer; text-align: left; }
.las-bar:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.las-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); flex: none; }
.las[data-live="1"] .las-dot { animation: las-blink 1.9s ease-in-out infinite; }
@keyframes las-blink { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.las-count { font-size: 19px; font-weight: 800; color: var(--brand);
             font-variant-numeric: tabular-nums; line-height: 1; }
.las-lbl { font-size: .82rem; color: #334155; white-space: nowrap; }
.las-sep { width: 1px; height: 14px; background: #e2e8f0; flex: none; }
.las-states { font-size: .78rem; color: #94a3b8; white-space: nowrap; }
.las-cta { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
           font-size: .76rem; color: #94a3b8; white-space: nowrap; }
.las-chev { transition: transform .3s ease; font-size: .7rem; }
.las[data-open="1"] .las-chev { transform: rotate(180deg); }

/* Loading placeholder — never renders a "0". */
.las-skel { display: inline-block; width: 3.2rem; height: 1rem; border-radius: .25rem;
            background: linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);
            background-size: 400% 100%; animation: las-shim 1.4s ease infinite; }
@keyframes las-shim { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* ── expanding panel: 0fr -> 1fr, no JS measurement ────────────────── */
.las-panel { display: grid; grid-template-rows: 0fr;
             transition: grid-template-rows .42s cubic-bezier(.2,.7,.2,1); }
.las[data-open="1"] .las-panel { grid-template-rows: 1fr; }
.las-panel > div { overflow: hidden; }
.las-inner { max-width: 80rem; margin: 0 auto; padding: .25rem 1rem 1.15rem; }

/* ── row 1: geography ──────────────────────────────────────────────── */
.las-geo { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.las-map { width: 92px; flex: none; }
.las-map svg { display: block; width: 100%; height: auto; }
.las-outline { fill: color-mix(in srgb, var(--brand) 9%, #fff); stroke: #cbd5e1; stroke-width: .7; }
.las-city { fill: var(--accent); }
.las-ping { fill: none; stroke: var(--accent); stroke-width: .9; opacity: 0; }

.las-bars { flex: 1 1 16rem; min-width: 0; display: grid; gap: .3rem; }
.las-row { display: grid; grid-template-columns: 6.2rem 1fr 2rem; align-items: center;
           gap: .5rem; font-size: .78rem; }
.las-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.las-row .tk { height: 5px; border-radius: 3px; background: #eef2f7; overflow: hidden; }
.las-row .tk i { display: block; height: 100%; border-radius: 3px; background: var(--brand);
                 width: 0; transition: width .55s cubic-bezier(.2,.7,.2,1); }
.las-row .vl { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: #0f172a; }

.las-side { flex: 0 0 11rem; border-left: 1px solid #e5e7eb; padding-left: 1.1rem; }
.las-side dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.las-side dd { margin: .1rem 0 .7rem; font-size: .85rem; font-weight: 700; color: #0f172a; }
.las-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--brand);
           color: #fff; font-size: .8rem; font-weight: 700; padding: .5rem .85rem;
           border-radius: .5rem; text-decoration: none; transition: filter .18s ease; }
.las-btn:hover { filter: brightness(.94); color: #fff; }

/* ── row 2: trending ───────────────────────────────────────────────── */
.las-trend { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid #e5e7eb; }
.las-trend h3 { margin: 0 0 .6rem; font-size: .72rem; font-weight: 700; text-transform: uppercase;
                letter-spacing: .06em; color: #64748b; display: flex; align-items: center; gap: .4rem; }
.las-cards { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .7rem; }

.las-card { display: flex; flex-direction: column; text-decoration: none; color: inherit;
            border: 1px solid #e5e7eb; border-radius: .75rem; overflow: hidden; background: #fff;
            transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease; }
.las-card:hover { transform: translateY(-3px); border-color: var(--brand);
                  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--brand) 50%, transparent); }

/* Square media box: every card is the same height whatever shape the photo is. */
.las-card .im { position: relative; aspect-ratio: 1/1; background: #f1f5f9; overflow: hidden; }
.las-card .im img { display: block; width: 100%; height: 100%; object-fit: cover;
                    transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.las-card:hover .im img { transform: scale(1.06); }

/* Rank badge — makes the row read as a ranking rather than six arbitrary pets. */
.las-rank { position: absolute; top: 7px; left: 7px; z-index: 2; width: 22px; height: 22px;
            border-radius: 7px; background: rgba(15,23,42,.72); color: #fff;
            display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.las-rank[data-top="1"] { background: var(--accent); }

/* Viewer pill sits ON the image, so it never changes card height and cards below
   the threshold simply have no pill (see MIN_VIEWERS_FOR_BADGE). */
.las-pill { position: absolute; bottom: 7px; left: 7px; z-index: 2;
            display: inline-flex; align-items: center; gap: 4px;
            font-size: 10.5px; font-weight: 700; line-height: 1.4; white-space: nowrap;
            padding: 3px 7px; border-radius: 20px;
            background: rgba(255,255,255,.94); color: var(--accent);
            box-shadow: 0 2px 8px -2px rgba(0,0,0,.25); }
.las-pill svg { width: 10px; height: 10px; flex: none; }

.las-card .b { padding: .55rem .6rem .6rem; display: flex; flex-direction: column;
               flex: 1; gap: .35rem; }
.las-card .t { font-size: 13px; font-weight: 600; line-height: 1.35; color: #0f172a; margin: 0;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
               overflow: hidden; min-height: calc(1.35em * 2); }
.las-foot { display: flex; align-items: baseline; justify-content: space-between;
            gap: .5rem; margin-top: auto; }
.las-foot .a { font-size: 11.5px; color: #64748b; white-space: nowrap; }
.las-foot .p { font-size: 14.5px; font-weight: 700; color: var(--brand-dark);
               white-space: nowrap; letter-spacing: -.01em; }

/* ── mobile ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .las-cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px) {
  .las-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%;
               overflow-x: auto; scroll-snap-type: x mandatory;
               -webkit-overflow-scrolling: touch; scrollbar-width: none;
               margin: 0 -1rem; padding: 0 1rem .2rem; }
  .las-cards::-webkit-scrollbar { display: none; }
  .las-card { scroll-snap-align: start; }
  .las-geo { flex-direction: column; }
  .las-side { flex: 1 1 auto; border-left: 0; border-top: 1px solid #e5e7eb;
              padding-left: 0; padding-top: .8rem; width: 100%; }
  .las-bars { width: 100%; }
}
/* At 360px the collapsed line must stay one line — the state count goes first. */
@media (max-width: 430px) {
  .las-sep, .las-states { display: none; }
  .las-cta span { display: none; }
  .las-cards { grid-auto-columns: 56%; }
}

@media (prefers-reduced-motion: reduce) {
  .las *, .las *::before, .las *::after { animation: none !important; transition: none !important; }
}