/* Labs: admin screens. Components come from global.css; this file lays out the shell, the funnel and the heatmap. */
body.labs { --page-width: 1280px; }

.labs-container { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.labs-nav { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
.labs-nav .label { margin: var(--s3) var(--s3) var(--s1); }
.labs-nav a[aria-current=page] { box-shadow: inset 2px 0 0 var(--accent); }
.labs-nav .tag { margin-left: auto; }

/* Blog post rows keep the title readable and drop their actions below it on narrow screens. */
.post-row-body { flex: 1 1 16rem; min-width: 0; }

/* Stacked funnel bar; each step is a lighter wash of the accent. */
.labs-funnel { position: relative; height: 18px; }
.labs-funnel .meter-fill { position: absolute; inset: 0 auto 0 0; min-width: 4px; background: var(--step); }
.labs-funnel-step { --step: var(--accent); }
.labs-funnel-step.is-signups { --step: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.labs-funnel-step.is-engaged { --step: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
span.labs-funnel-step { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--step); }

/* Activity heatmap: one square per day, weeks in columns of seven. */
.activity-block { display: grid; grid-template-columns: repeat(7, 14px); gap: 3px; }
.activity-square { width: 14px; height: 14px; border: 1px solid var(--rule); border-radius: 3px; background: var(--sunk); }
.activity-square.is-blank { visibility: hidden; }
.activity-square[data-level="1"] { background: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
.activity-square[data-level="2"] { background: color-mix(in srgb, var(--accent) 50%, var(--surface)); }
.activity-square[data-level="3"] { background: color-mix(in srgb, var(--accent) 75%, var(--surface)); }
.activity-square[data-level="4"] { background: var(--accent); border-color: var(--accent); }

@media (max-width: 768px) {
  .labs-container { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .labs-nav { flex-direction: row; overflow-x: auto; }
  .labs-nav a { flex: none; }
  .labs-nav a[aria-current=page] { box-shadow: inset 0 -2px 0 var(--accent); }
  .labs-nav .label { display: none; }
}