/* ──────────────────────────────────────────────────────────────────────────
   Activity Strip — homepage recent-activity rail.

   Layout, spacing, colour and type come from utility.css. Only what a utility
   cannot express lives here: the marquee loop, the badge offset, the accent
   map, and the rail's trailing padding.
   ────────────────────────────────────────────────────────────────────────── */

/* Gutters: u-scroll-align-container sets the mobile baseline, and from 768px up
   the shared rail ladder in sc-main.css takes over so the strip lines up with
   Featured Builds of the Week and the other homepage rails.

   .sc-strip__rail is the masked viewport (overflow hidden); .sc-strip__track
   inside it is the element that actually moves. Pausing targets the track
   from a hover/focus state on the rail so the whole strip — not just the
   card under the pointer — stops for reading.

   No padding-right here on purpose: the marquee loops forever, so there is no
   "end of scroll" to leave trailing space for — a static right inset would
   just read as a permanent gap. That padding still makes sense for the
   reduced-motion fallback (a real scrollable list has a genuine end), so it
   lives there instead — see the media query below. */
.sc-strip__rail {
    padding-top: 2px;
    padding-bottom: 1.4rem;
}

/* width: max-content is load-bearing: without it the track (a block-level
   flex container) would stretch to the rail's 100% width, and the -50%
   translate below would resolve against that instead of the doubled content,
   breaking the loop. */
.sc-strip__track {
    width: max-content;
    animation: sc-strip-marquee 42s linear infinite;
    will-change: transform;
}

.sc-strip__rail:hover .sc-strip__track,
.sc-strip__rail:focus-within .sc-strip__track {
    animation-play-state: paused;
}

/* -50% would land half a gap short of the true midpoint — 16 cards means 15
   gaps, not the 16 an even split assumes — so the loop point drifts unless
   half of one u-gap-10 (5px) is subtracted too. */
@keyframes sc-strip-marquee {
    to { transform: translateX(calc(-50% - 5px)); }
}

/* No filled card background — the row is an outline, not a solid box, sized
   to content (u-w-max-content + a max-width cap on .sc-strip__body) rather
   than a fixed card width. Padding (u-p-12) and radius (u-radius-6) came back
   2026-08-30 once the row had a visible border again; a border with no
   breathing room or corner softening read as a stray outline, not a chip. */
.sc-strip__row {
    color: inherit;
}

.sc-strip__row:hover .sc-strip__line {
    text-decoration: underline;
}

/* style.css:141-144 kills focus rings site-wide with `*:focus { outline: none
   !important }`. Beating that needs !important here; the scope is this one
   component, and a keyboard user has to be able to see where they are. */
.sc-strip__row:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px;
}

/* Badge overlaps the media slot's bottom-right corner. Icon stays a fixed
   white — the accent lives on the badge's background now, not the icon. */
.sc-strip__chip {
    right: -4px;
    bottom: -4px;
    color: #fff;
}

/* Several sprite icons (icon-user-plus, icon-heart, icon-flag) are stroke-only
   line art — no filled equivalent exists in the sprite for them. Rather than
   hand-add new symbols (risk of inaccurate art at this tiny size), this fakes
   solid: stroke-width alone only thickens the outline into a ring (a circle's
   centre — e.g. icon-user-plus's head — stays hollow), so fill:currentColor
   is required too, to actually fill the closed sub-shapes. Verified at 6x zoom
   on icon-user-plus and icon-flag. No-op on the icons that are already filled
   (icon-star-filled, icon-flag-checkered) — they have no stroke to widen and
   already set their own fill. Applies to the empty-thumbnail fallback icon
   too (same icon set, same problem, just a different, larger size). */
.sc-strip__chip svg,
.sc-strip__thumb--empty svg {
    stroke-width: 90 !important;
    fill: currentColor !important;
}

/* Exception: icon-search-bold's outer circle is the magnifying glass's lens
   ring, meant to stay hollow — filling it solid turns the glass into a
   blob with a handle. Matching the ends-with selector against `href` skips
   the sprite's `?ver=` cache-busting prefix, so this survives every rebuild. */
.sc-strip__chip svg use[href$="#icon-search-bold"],
.sc-strip__thumb--empty svg use[href$="#icon-search-bold"] {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 24 !important;
}

/* No featured image: a neutral icon on a flat surface one step lighter than
   the card, so it reads as intentional rather than as a failed load. */
.sc-strip__thumb--empty {
    background-color: #1c1c1c;
    color: #fff;
}

.sc-strip__thumb--empty svg {
    opacity: .55;
}

.sc-strip__obj {
    color: #b9b9bf;
}

.sc-strip__pulse {
    width: 8px;
    height: 8px;
    position: relative;
    top: -1px;
    border-radius: 50%;
    background: #14ae3d;
    box-shadow: 0 0 0 3px rgba(var(--rgb-success), .18);
    animation: sc-strip-pulse 1.5s ease-in-out infinite;
}

/* Same fade rhythm as the Hall of Fame "live" dot (sc-main.css) — one pulse
   vocabulary for "this is live" across the site. */
@keyframes sc-strip-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Accent map — same 6 categories/data-accent values as the single-car build
   timeline, but deliberately NOT the same --sc-accent-* tokens: those are
   light, meant to sit as translucent-tint icon colour (see single-car.css
   .sc-build-activity__chip). This badge's background is solid now, so it
   needs solid, saturated, darker fills instead — reusing established site
   colours where one already exists (brand red / success green), otherwise a
   deepened version of the accent hue. Do NOT edit --sc-accent-* to "fix"
   this — that token is shared and would change the single-car timeline too. */
.sc-strip__chip[data-accent="neutral"],
.sc-strip__thumb--empty[data-accent="neutral"] { background-color: #4d5561; }

.sc-strip__chip[data-accent="blue"],
.sc-strip__thumb--empty[data-accent="blue"]    { background-color: #2f5fb8; }

.sc-strip__chip[data-accent="red"],
.sc-strip__thumb--empty[data-accent="red"]     { background-color: var(--primary-alt); }

.sc-strip__chip[data-accent="amber"],
.sc-strip__thumb--empty[data-accent="amber"]   { background-color: #c99814; }

.sc-strip__chip[data-accent="green"],
.sc-strip__thumb--empty[data-accent="green"]   { background-color: var(--success); }

.sc-strip__chip[data-accent="purple"],
.sc-strip__thumb--empty[data-accent="purple"]  { background-color: #7a4fc4; }

/* 7th accent, added with the `search` event type — the shared 6-category
   vocabulary (neutral/blue/red/amber/green/purple) was already fully used,
   and reusing one would make two unrelated event types read as the same
   colour. This is scoped to this component only, same as the rest of this
   map — no --sc-accent-cyan exists or is needed in the shared token file. */
.sc-strip__chip[data-accent="cyan"],
.sc-strip__thumb--empty[data-accent="cyan"]    { background-color: #2f8f9d; }

/* Row border: super subtle, accent-tinted. This one DOES reuse the --rgb-*
   tint bases at low opacity — same translucent vocabulary as the single-car
   timeline's chip borders, just fainter (.18 vs single-car's ~.3-.38).
   Unlike the solid badge background above, a border this faint doesn't
   compete with the readability concerns that ruled out --sc-accent-* there.
   .sc-strip__row needs u-border in its class list first — this only
   overrides border-color. */
.sc-strip__row[data-accent="neutral"] { border-color: rgba(var(--rgb-muted), .18); }
.sc-strip__row[data-accent="blue"]    { border-color: rgba(var(--rgb-blue), .18); }
.sc-strip__row[data-accent="red"]     { border-color: rgba(var(--rgb-primary), .18); }
.sc-strip__row[data-accent="amber"]   { border-color: rgba(var(--rgb-medal-gold), .18); }
.sc-strip__row[data-accent="green"]   { border-color: rgba(var(--rgb-success), .18); }
.sc-strip__row[data-accent="purple"]  { border-color: rgba(var(--rgb-purple), .18); }
/* No --rgb-cyan token exists (see the 7th-accent note above) — same rgb
   triplet as #2f8f9d above, spelled out raw instead of through a variable. */
.sc-strip__row[data-accent="cyan"]    { border-color: rgba(47, 143, 157, .18); }

/* Row wash: a soft gradient in the same tint as the border, top-left to
   transparent, so the accent reads as ambient colour rather than a flat
   fill. Same --rgb-* tokens as the border above, lower alpha since it covers
   far more area than a 1px edge. */
.sc-strip__row[data-accent="neutral"] { background: linear-gradient(135deg, rgba(var(--rgb-muted), .12), transparent 65%); }
.sc-strip__row[data-accent="blue"]    { background: linear-gradient(135deg, rgba(var(--rgb-blue), .12), transparent 65%); }
.sc-strip__row[data-accent="red"]     { background: linear-gradient(135deg, rgba(var(--rgb-primary), .12), transparent 65%); }
.sc-strip__row[data-accent="amber"]   { background: linear-gradient(135deg, rgba(var(--rgb-medal-gold), .12), transparent 65%); }
.sc-strip__row[data-accent="green"]   { background: linear-gradient(135deg, rgba(var(--rgb-success), .12), transparent 65%); }
.sc-strip__row[data-accent="purple"]  { background: linear-gradient(135deg, rgba(var(--rgb-purple), .12), transparent 65%); }
.sc-strip__row[data-accent="cyan"]    { background: linear-gradient(135deg, rgba(47, 143, 157, .12), transparent 65%); }

/* Reduced motion: no auto-scroll. The duplicate half was only ever there to
   feed the marquee loop, so it's hidden here and the rail becomes a normal
   swipeable list of the real 8 rows — the pre-marquee behaviour. */
@media (prefers-reduced-motion: reduce) {
    .sc-strip__pulse { animation: none; }

    .sc-strip__track { animation: none; }

    .sc-strip__item--dup { display: none; }

    .sc-strip__rail {
        padding-right: 1.6rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .sc-strip__rail::-webkit-scrollbar { display: none; }

    .sc-strip__item { scroll-snap-align: start; }
}