/* miniapp/css/more.css — overrides and S5-local styles for the More hub
   Keeps badge visually to the right of the chevron (AC6) without editing S0's app.css
*/
.cl-more {
  /* keep default card styling from app.css */
}
.cl-more-row {
  display: grid;
  grid-template-columns: 32px 1fr 16px 56px; /* icon | label | chevron | badge */
  gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; background: transparent; border: 0; text-align: left;
}
.cl-more-row .chev { text-align: right; color: var(--cl-text-hint); font-size: 14px; }
.cl-more-row .label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cl-more-badge { display: flex; justify-content: flex-end; }

/* Icon tile: 32x32, tinted background, centred emoji (AC3 / story spec) */
.cl-more-row .icon-tile {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-bg-tinted, rgba(128,128,128,0.12));
  border-radius: 8px;
  font-size: 16px;
}

/* Admin-only visible pill (AC3) */
.cl-admin-pill {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  padding: 1px 6px;
  border-radius: 9999px;
  color: var(--cl-text-hint, #888);
  background: var(--cl-bg-tinted, rgba(128,128,128,0.12));
  vertical-align: middle;
}

/* Badge chip: fallback bg var for webviews that don't support color-mix() */
:root { --cl-mini-chip-bg: rgba(128,128,128,0.18); }
.cl-more-badge .cl-mini-chip {
  background: var(--cl-mini-chip-bg);
  padding: 4px 8px; font-size:12px; border-radius:9999px;
}

/* Badge loading skeleton shimmer (AC7) */
.cl-badge-skeleton {
  display: inline-block;
  width: 28px; height: 20px;
  border-radius: 9999px;
  background: linear-gradient(90deg,
    var(--cl-bg-tinted, rgba(128,128,128,0.1)) 0%,
    rgba(128,128,128,0.22) 50%,
    var(--cl-bg-tinted, rgba(128,128,128,0.1)) 100%);
  background-size: 200% 100%;
  animation: cl-shimmer 1.4s ease-in-out infinite;
}
@keyframes cl-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}