/* Emergent Life Lab: account, membership and /lab/* tool pages. Loaded only on
   those pages (extra_head block) so the free site's CSS payload is unchanged.
   Reuses site.css's tokens (--bg, --accent, --line, ...) -- this file adds
   layout and components site.css has no reason to carry for the free site. */

.lab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 2rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.8rem;
}
.lab-nav a {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.88rem;
  border: 1px solid transparent;
}
.lab-nav a:hover { color: var(--text); }
.lab-nav a[aria-current="page"] {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: rgba(111, 214, 196, 0.08);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.9rem;
  margin: 1.4rem 0;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.stat-card .stat-label {
  color: var(--text-faint);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 0.2rem;
}
.stat-card .stat-sub { color: var(--text-faint); font-size: 0.8rem; margin-top: 0.15rem; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.badge-live { border-color: var(--accent); color: var(--accent-strong); }
.badge-extinct { border-color: var(--danger); color: var(--danger); }

.lab-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 1.2rem 0;
}
.lab-toolbar select, .lab-toolbar input[type="number"], .lab-toolbar input[type="text"] {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
}
.lab-toolbar button, .form-field button, .btn-plain {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  font-size: 0.88rem;
  cursor: pointer;
}
.lab-toolbar button:hover, .btn-plain:hover { border-color: var(--accent); color: var(--accent-strong); }
.lab-toolbar button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); background: rgba(111, 214, 196, 0.08); }

.chart-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 0.6rem;
  margin: 1rem 0;
}
.chart-scroll svg { display: block; height: 16rem; min-width: 100%; }
.chart-scroll.is-wide svg { min-width: 64rem; }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--accent-strong); stroke-width: 1.6; }
.chart-fill { fill: rgba(111, 214, 196, 0.08); stroke: none; }
.chart-point { fill: var(--accent-strong); }
.chart-label { fill: var(--text-faint); font-size: 10px; font-family: inherit; }
.chart-event-line { stroke: var(--east); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }

.form-field { margin: 0.9rem 0; max-width: 26rem; }
.form-field label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.3rem; }
.form-field input[type="email"], .form-field input[type="text"] {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
}
.form-field .field-error { color: var(--danger); font-size: 0.85rem; margin-top: 0.35rem; }
.form-note { color: var(--text-faint); font-size: 0.82rem; margin-top: 0.6rem; }

.auth-shell { max-width: 26rem; margin: 2rem auto 0; }
.auth-shell .card { padding: 1.6rem 1.8rem; }

.entity-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.6rem; }
.entity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
}
.entity-row .entity-meta { color: var(--text-faint); font-size: 0.82rem; }

.tree-list { list-style: none; margin: 0.5rem 0; padding-left: 0; }
.tree-list li { margin: 0.15rem 0; }
.tree-list .tree-node {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid transparent;
}
.tree-list .tree-node.is-current { border-color: var(--accent); background: rgba(111, 214, 196, 0.08); }
.tree-depth { color: var(--text-faint); font-variant-numeric: tabular-nums; }

.danger-zone { border: 1px solid var(--danger); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-top: 2rem; }
.danger-zone h2 { color: var(--danger); margin-top: 0; }

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
@media (max-width: 640px) { .compare-grid { grid-template-columns: 1fr; } }

.empty-state { color: var(--text-faint); padding: 2rem 1rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); }

.account-details { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.2rem; margin: 0 0 1.1rem; font-size: 0.92rem; }
.account-details dt { color: var(--text-faint); }
.account-details dd { margin: 0; }
@media (max-width: 560px) { .account-details { grid-template-columns: 1fr; gap: 0 0.2rem; } .account-details dt { margin-top: 0.5rem; } }

.notes-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.9rem; }
.notes-list .note-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.notes-list .note-meta { color: var(--text-faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
.notes-list .note-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.35rem; }
.notes-list .note-links { margin-top: 0.5rem; font-size: 0.85rem; }
.notes-list .note-links a { margin-right: 0.8rem; }

.roadmap-board { display: grid; gap: 1rem; margin: 1.2rem 0; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.roadmap-column h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 0 0 0.6rem; }
.roadmap-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
}
.roadmap-item p { margin: 0.3rem 0 0; }
.roadmap-item .roadmap-item-meta { color: var(--text-faint); font-size: 0.78rem; margin-top: 0.3rem; }

.reference-toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem; margin: 1rem 0 1.6rem; }
.reference-toc a {
  display: block;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
}
.reference-toc a:hover { border-color: var(--accent); color: var(--accent-strong); }

.kv-table { width: 100%; border-collapse: collapse; margin: 0.8rem 0 1.6rem; font-size: 0.88rem; }
.kv-table th, .kv-table td { text-align: left; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--line); }
.kv-table th { color: var(--text-faint); font-weight: 500; width: 40%; }

.demo-csv { margin: 0; font-family: ui-monospace, monospace; font-size: 0.82rem; white-space: pre; }

.admin-roster { width: 100%; border-collapse: collapse; margin: 0.8rem 0 1.6rem; font-size: 0.85rem; }
.admin-roster th, .admin-roster td { text-align: left; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-roster th { color: var(--text-faint); font-weight: 500; }

/* Owner dashboard (/lab/admin). The roster can be wider than a phone, so it
   scrolls on its own rather than making the page scroll sideways. */
.admin-roster-wrap { overflow-x: auto; }
.admin-roster-flag td { white-space: normal; color: var(--text-faint); font-size: 0.8rem; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem; margin: 0.8rem 0; padding: 0; }
.admin-stats > div { border: 1px solid var(--line); border-radius: 4px; padding: 0.6rem 0.7rem; }
.admin-stats dt { color: var(--text-faint); font-size: 0.78rem; margin: 0 0 0.25rem; }
.admin-stats dd { margin: 0; font-size: 1.35rem; font-variant-numeric: tabular-nums; }

.admin-flags { margin: 0.8rem 0; padding-left: 1.1rem; font-size: 0.85rem; }
.admin-flags > li { margin-bottom: 0.6rem; }
.admin-flags ul { margin: 0.3rem 0 0; padding-left: 1.1rem; color: var(--text-faint); }

.admin-search { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.8rem 0; }
.admin-search label { color: var(--text-faint); font-size: 0.82rem; }

/* Social review queue (/lab/admin/social). Mobile-first: the owner reviews and
   downloads today's clip from a phone (mission brief §51), so the video preview
   and copy cards stack in a single column below the ~480px breakpoint used
   elsewhere on this page rather than needing their own new breakpoint. */
.social-hero { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: 1.4rem; margin: 1rem 0 1.6rem; }
@media (max-width: 760px) { .social-hero { grid-template-columns: 1fr; } }
.social-video-wrap video { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: #000; }
.social-score { font-size: 2.2rem; font-variant-numeric: tabular-nums; color: var(--accent-strong); margin: 0; }
.social-score-reasons { list-style: none; padding: 0; margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--text-dim); }
.social-score-reasons li { margin: 0.15rem 0; }
.social-copy-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
@media (max-width: 760px) { .social-copy-cards { grid-template-columns: 1fr; } }
.social-copy-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.social-copy-card h3 { margin: 0 0 0.6rem; }
.social-copy-field { margin: 0 0 0.8rem; }
.social-copy-field label { display: block; font-size: 0.78rem; color: var(--text-faint); margin-bottom: 0.25rem; }
.social-copy-field textarea { width: 100%; min-height: 3.2rem; background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--line); border-radius: 4px; padding: 0.5rem 0.6rem; font: inherit; resize: vertical; }
.social-copy-field .copy-row { display: flex; gap: 0.5rem; align-items: flex-start; }
.social-copy-field .copy-row textarea { flex: 1; }
.social-tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.6rem; }
.social-tag-list span { border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.8rem; }
.social-action-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0; }
.social-candidate-list { list-style: none; padding: 0; margin: 0.8rem 0; display: grid; gap: 0.6rem; }
.social-candidate-list li { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.9rem;
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.social-clip-thumb { width: 3.2rem; height: 5.7rem; object-fit: cover; border-radius: 4px; background: #000; flex: none; }
.social-platform-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.4rem; }