/* time.armagi.co: page-specific rules on top of base.css */
#layer-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#layer-picks .n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.panel.layer { margin-top: 12px; animation: fade .3s ease-out; }
.layer .tag { color: var(--gold-ink); }
.layer h3 { font-size: 24px; line-height: 1.25; letter-spacing: -.015em; margin: 8px 0 16px; max-width: 30ch; }
.layer-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.layer-items .item { padding: 14px 16px; border-radius: 14px; background: var(--tint); }
.layer-items b { display: block; }
.layer-items p { margin: 4px 0 0; color: var(--ink-2); font-size: 15.5px; }
.so { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 18px; font-weight: 500; }

.gap-chart { position: relative; height: 170px; padding: 14px 18px 30px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); max-width: 760px; }
.gap-chart svg { width: 100%; height: 100%; display: block; }
.gap-chart polyline { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.gap-chart polyline.tech { stroke: #1B3A7B; }
.gap-chart polyline.human { stroke: var(--gold); stroke-dasharray: 6 5; }
.gap-chart .lab { position: absolute; font-family: var(--mono); font-size: 12px; }
.gap-chart .lab.tech { top: 12px; left: 20px; color: var(--navy); }
.gap-chart .lab.human { bottom: 8px; right: 20px; color: var(--gold-ink); }
#anchor-picks { margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
#anchor-picks .pick { min-height: 64px; justify-content: center; }
#speed .answer { max-width: 760px; }

@media (max-width: 760px) {
  #layer-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layer-items { grid-template-columns: minmax(0, 1fr); }
  #anchor-picks { grid-template-columns: minmax(0, 1fr); }
}