/* Tile badge rows scroll instead of silently clipping — owner, 3-Oct-26 (dreamina lane, when the
   route lozenges made long rows common). Until now `.card-badges` was one line with
   `overflow: hidden`, so a long row simply lost its last badges. Now the row scrolls sideways
   inside the tile, scrollbar hidden, and a soft fade appears ONLY on an edge that is actually
   clipping — the same treatment as the prompt panel's footer (`.frame-slots` in style.css).
   The data attributes come from static/tile_badges.js. Grid and list view alike. */
.card-badges,
.gallery-grid.list-view .card-badges {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.card-badges::-webkit-scrollbar { display: none; }
.card-badges[data-clip-right="true"] {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent);
}
.card-badges[data-clip-left="true"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000);
    mask-image: linear-gradient(90deg, transparent, #000 22px, #000);
}
.card-badges[data-clip-left="true"][data-clip-right="true"] {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}

/* The ROUTE lozenge (Dreamina / Sjinn) wears the ordinary badge style (owner, 3-Oct-26: "should
   match what we have"). `.route-badge` stays on it only so its tooltip binds. */

/* Prompt-card footer (owner, 3-Oct-26). First / Last Frame keep their labels when the drawer narrows
   — they no longer shrink to a lone "⊕" (style.css gives `.frame-slot` flex: 1 + min-width: 0); the row
   scrolls sideways instead, as it already does, with initFrameSlotsScrollers fading the clipped edge.
   A FILLED slot is capped, so a long file name can't push the row far. */
.frame-slots .frame-slot { flex: 1 0 auto; }
.frame-slots .frame-slot.filled { max-width: 220px; }
.frame-slots .frame-slot.filled .frame-slot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* The footer's tick boxes (Dreamina, Sjinn): dark, like the rest of Create — Chrome draws a native
   checkbox white unless told the colour scheme is dark. The tick keeps the accent colour. */
.frame-slot-toggle input[type="checkbox"] { color-scheme: dark; }