/* creator-rail.css — unified horizontal "creators" rail.
   Shared by the /movie (Watch) page and the user-profile "similar creators"
   sections (top + bottom). One set of classes, one layout, one counter style.

   Markup contract:
     <section class="crail-wrap [crail-wrap--bounded]">
       <div class="crail-head">
         <h2 class="crail-title">… <span class="crail-at">@user</span></h2>
         <span class="crail-count">N</span>            (optional)
         <button class="crail-refresh">↻</button>       (optional)
       </div>
       <div class="crail-row">
         <a class="crail-card" href="/u/NAME">
           <button class="crail-del">…</button>          (optional)
           <span class="crail-av" data-i="N"><img …></span>
           <div class="crail-name">@NAME</div>
           <div class="crail-why">…</div>                (optional)
           <span class="crail-stats" data-icon-system="browserboy">
             <span class="crail-stat">{image} <span class="app-icon-count">N</span></span>
             <span class="crail-stat">{play}  <span class="app-icon-count">N</span></span>
           </span>
         </a>
       </div>
     </section>
*/

.crail-wrap { margin: 0 0 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); }
/* Centred variant — aligns the rail with a max-width:1200px page grid (profile). */
.crail-wrap.crail-wrap--bounded { max-width: 1200px; margin: 0 auto 1rem; padding: 1rem 1.5rem 0.85rem; }

.crail-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.crail-title { font-size: 0.9rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 0.45rem; }
.crail-at { color: var(--primary-hover); }
.crail-count {
  font-size: 0.6rem; font-weight: 700; color: var(--text-dim); font-family: var(--mono, ui-monospace, monospace);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.crail-refresh {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-size: 1rem; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s, transform 0.3s; flex-shrink: 0;
}
.crail-refresh:hover { color: var(--primary); border-color: var(--primary); }
.crail-refresh.spinning { animation: crail-spin 0.4s ease-out; }
@keyframes crail-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Horizontal rail: still wheel/trackpad/drag-scrollable, but no visible
   scrollbar chrome (we don't want a side-scroll bar under the rail). */
.crail-row { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.4rem; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
.crail-row::-webkit-scrollbar { width: 0; height: 0; display: none; }

.crail-card {
  flex: 0 0 auto; width: 122px; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.65rem 0.5rem; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center;
  scroll-snap-align: start;
  transition: border-color 0.12s, transform 0.12s, background 0.12s;
}
.crail-card:hover { border-color: var(--primary); background: var(--surface-hover); transform: translateY(-2px); }

.crail-av {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700; color: var(--text-dim);
  overflow: hidden; flex-shrink: 0;
}
.crail-av img { width: 100%; height: 100%; object-fit: cover; }

.crail-name { font-size: 0.72rem; font-weight: 700; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crail-why { font-size: 0.6rem; color: var(--text-dim); line-height: 1.25; min-height: 1.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Approved counter pills — thumbnail + video counts via icon-system glyphs. */
.crail-stats { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.crail-stat {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px 1px 5px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-dim); line-height: 1;
}
/* Higher-specificity than the icon-system base .app-icon rule so the rail
   glyphs stay small regardless of stylesheet injection order. */
[data-icon-system="browserboy"] .crail-stat .app-icon { width: 12px; height: 12px; opacity: 0.85; flex: 0 0 auto; }
[data-icon-system="browserboy"] .crail-stat .app-icon-count { font-size: 0.58rem; font-weight: 800; min-width: 0; }

/* Per-card delete (profile rail only). */
.crail-del {
  position: absolute; top: 4px; right: 4px; width: 18px; height: 18px;
  display: none; align-items: center; justify-content: center;
  background: rgba(239,68,68,0.85); color: #fff; border: none; border-radius: 50%;
  font-size: 0.7rem; line-height: 1; cursor: pointer; z-index: 2; padding: 0;
}
.crail-card:hover .crail-del { display: flex; }
.crail-del:hover { background: rgba(239,68,68,1); transform: scale(1.15); }

@media (max-width: 640px) {
  .crail-wrap.crail-wrap--bounded { padding: 0.75rem 1rem; }
}