/* ── Experiments Lab — Shell Styles ── */

:root {
  --lab-w: 240px;
  --lab-mono: 'JetBrains Mono', 'Courier New', monospace;
  --lab-rule: #191919;
}

/* ── Sidebar ── */
.lab-sidebar {
  position: fixed;
  top: var(--fd-nav-height); left: 0; bottom: 0;
  width: var(--lab-w);
  background: var(--fd-bg);
  border-right: 1px solid var(--lab-rule);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lab-sidebar__brand {
  padding: 24px;
  border-bottom: 1px solid var(--lab-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.lab-eyebrow {
  font-family: var(--lab-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fd-accent);
  margin-bottom: 4px;
}
.lab-brand-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--fd-text-primary);
  letter-spacing: -0.01em;
  text-decoration: none;
  display: block;
  transition: color 150ms ease;
}
.lab-brand-title:hover { color: var(--fd-accent); }
.lab-ds-btn {
  font-family: var(--lab-mono);
  font-size: 10px;
  color: var(--fd-text-secondary);
  border: 1px solid var(--lab-rule);
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.lab-ds-btn:hover { color: var(--fd-text-primary); border-color: #333; }

/* ── Nav list ── */
.lab-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0 8px;
  scrollbar-width: none;
}
.lab-nav::-webkit-scrollbar { display: none; }

.lab-nav__section {
  font-family: var(--lab-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.12);
  padding: 14px 24px 5px;
}

.lab-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  text-decoration: none;
  transition: background 150ms ease;
  width: 100%;
  box-sizing: border-box;
}
a.lab-nav__item:hover { background: rgba(255,255,255,0.03); }
.lab-nav__item--active { background: rgba(254,96,75,0.06) !important; }
.lab-nav__item--dim { opacity: 0.35; cursor: default; pointer-events: none; }

.lab-nav__num {
  font-family: var(--lab-mono);
  font-size: 10px;
  color: var(--fd-text-secondary);
  min-width: 18px;
  flex-shrink: 0;
  transition: color 150ms ease;
}
.lab-nav__item--active .lab-nav__num { color: var(--fd-accent); }

.lab-nav__name {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--fd-text-secondary);
  flex: 1;
  transition: color 150ms ease;
}
a.lab-nav__item:hover .lab-nav__name,
.lab-nav__item--active .lab-nav__name { color: var(--fd-text-primary); }

.lab-nav__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 150ms ease;
}
.lab-nav__dot--pronto       { background: #4ade80; }
.lab-nav__dot--planejado    { background: rgba(255,255,255,0.15); }
.lab-nav__dot--em-progresso { background: #60a5fa; }

/* ── Sidebar footer ── */
.lab-sidebar__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--lab-rule);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lab-sidebar__footer a {
  font-family: var(--lab-mono);
  font-size: 10px;
  color: var(--fd-text-secondary);
  text-decoration: none;
  transition: color 150ms ease;
}
.lab-sidebar__footer a:hover { color: var(--fd-text-primary); }
.lab-sidebar__footer span {
  font-family: var(--lab-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.12);
}

/* ── Main content area ── */
.lab-main {
  margin-left: var(--lab-w);
  min-height: 100vh;
  padding-top: var(--fd-nav-height);
}

/* ── Hub page ── */
.lab-hub {
  padding: 64px 64px 80px;
}
.lab-hub__header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--lab-rule);
}
.lab-hub__eyebrow {
  font-family: var(--lab-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fd-text-secondary);
  margin-bottom: 12px;
}
.lab-hub__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.03em;
  color: var(--fd-text-primary);
  margin-bottom: 10px;
  line-height: 1.1;
}
.lab-hub__desc {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--fd-text-secondary);
  line-height: 1.7;
  max-width: 560px;
}

/* ── Component card grid ── */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--lab-rule);
  border: 1px solid var(--lab-rule);
  border-radius: 8px;
  overflow: hidden;
}

.lab-card {
  background: var(--fd-bg);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background 200ms ease;
  position: relative;
}
a.lab-card:hover { background: #0D0D0D; }
.lab-card--dim { cursor: default; }

.lab-card__preview {
  height: 110px;
  background: #0C0C0C;
  border-bottom: 1px solid var(--lab-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lab-card__preview svg { opacity: 0.85; }
a.lab-card:hover .lab-card__preview svg { opacity: 1; }

.lab-card__body {
  padding: 16px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lab-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.lab-card__num {
  font-family: var(--lab-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.lab-card__status {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
}
.lab-card__status--pronto       { background: #4ade80; }
.lab-card__status--planejado    { background: rgba(255,255,255,0.12); }
.lab-card__status--em-progresso { background: #60a5fa; }

.lab-card__name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--fd-text-primary);
  margin-bottom: 4px;
}
.lab-card--dim .lab-card__name { color: var(--fd-text-secondary); }

.lab-card__desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--fd-text-secondary);
  line-height: 1.5;
  flex: 1;
}
.lab-card--dim .lab-card__desc { opacity: 0.6; }

.lab-card__cta {
  margin-top: 12px;
  font-family: var(--lab-mono);
  font-size: 10px;
  color: var(--fd-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}
a.lab-card:hover .lab-card__cta { opacity: 1; transform: translateX(0); }

.lab-card__soon {
  margin-top: 12px;
  font-family: var(--lab-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.1);
}

/* ── Mobile hamburger button ── */
.lab-menu-btn {
  display: none;
  position: fixed;
  top: calc(var(--fd-nav-height) + 14px); left: 16px;
  z-index: 200;
  width: 36px; height: 36px;
  background: var(--fd-surface);
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--fd-text-secondary);
  transition: border-color 150ms, color 150ms;
}
.lab-menu-btn:hover { border-color: #3a3a3a; color: var(--fd-text-primary); }

/* ── Sidebar overlay (mobile) ── */
.lab-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.lab-sidebar-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Common experiment page responsive (shared across all exp pages) ── */
@media (max-width: 768px) {
  /* Navegação própria do lab (sidebar de troca rápida entre componentes + seu
     hambúrguer) some no mobile em TODAS as páginas — duplicava o hambúrguer
     principal do site, que já lista os mesmos itens no accordion "Design Lab". */
  .lab-sidebar { display: none; }
  .lab-sidebar-overlay { display: none; }
  .lab-menu-btn { display: none; }

  /* Main content: sem offset de sidebar, mas ainda precisa liberar o header fixo */
  .lab-main {
    margin-left: 0;
    padding-top: var(--fd-nav-height);
  }

  /* Hub page */
  .lab-hub { padding: 56px 20px 48px; }
  .lab-hub__title { font-size: 26px; }
  .lab-grid { grid-template-columns: 1fr; }

  /* Common experiment header/demo/spec shared styles */
  .exp-header { padding: 56px 20px 24px !important; }
  .exp-header__inner { flex-direction: column; align-items: flex-start; }
  .exp-title { font-size: 24px !important; }
  .exp-demo { padding: 24px 20px !important; }
  .exp-spec-strip { padding: 16px 20px !important; gap: 20px !important; }
  .exp-demo-label { padding: 0 !important; }
}

@media (max-width: 1100px) {
  .lab-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .lab-hub { padding: 56px 16px 40px; }
  .exp-header { padding: 56px 16px 20px !important; }
  .exp-demo { padding: 20px 16px !important; }
  .exp-spec-strip { padding: 12px 16px !important; }
}