/* App Lab list: used by /apps/index.html and the home side panel (js/apps.js) */
.lab-title { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }

.lab-sub { font-size: 14px; color: var(--text-soft); margin-top: 0.6rem; min-height: 1.6em; }
.lab-sub::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: cursor-blink 0.9s step-end infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

.lab-count { font-size: 12px; color: var(--text-soft); opacity: 0.75; margin-top: 2.75rem; margin-bottom: 0.75rem; }

.lab-list { border-top: 1px solid var(--border); }
.lab-item {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; row-gap: 0.3rem;
  padding: 1.5rem 1rem; margin: 0 -1rem; border-bottom: 1px solid var(--border);
  color: inherit; text-decoration: none; transition: background var(--t);
}
.lab-item:hover { background: var(--accent-light); }
.lab-head { display: flex; align-items: center; gap: 0.6rem; }
.lab-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.lab-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--c-bd, var(--border)); background: var(--c-bg, none); color: var(--c, var(--text-soft));
}

/* Badge colors taken from the light-streak palette (js/bg.js) */
.lab-status--live { --c: #4ade80; --c-bg: rgba(34, 197, 94, 0.1); --c-bd: rgba(34, 197, 94, 0.32); }
.lab-status--beta { --c: #facc15; --c-bg: rgba(250, 204, 21, 0.08); --c-bd: rgba(250, 204, 21, 0.3); }
[data-theme="light"] .lab-status--live { --c: #15803d; --c-bg: rgba(22, 163, 74, 0.08); --c-bd: rgba(22, 163, 74, 0.3); }
[data-theme="light"] .lab-status--beta { --c: #a16207; --c-bg: rgba(202, 138, 4, 0.09); --c-bd: rgba(202, 138, 4, 0.32); }

.lab-status--live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 5px transparent; }
}
@media (prefers-reduced-motion: reduce) { .lab-status--live::before { animation: none; } }
.lab-desc { grid-column: 1; font-size: 14px; color: var(--text-soft); }
.lab-tags { grid-column: 1; font-size: 12px; color: var(--text-soft); opacity: 0.75; }
.lab-item .arrow { grid-column: 2; grid-row: 1 / 4; align-self: center; font-size: 18px; }