/* Wind tunnel page. Colours come from the tokens in site.css. */

.tunnel-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  width: 100%;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none; /* drawing here shouldn't scroll the page */
  user-select: none;
}

.tunnel-frame canvas { display: block; width: 100%; height: 100%; }

#tunnelHint {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  max-width: 90%;
  color: var(--soft);
  font-size: var(--small);
  text-align: center;
  pointer-events: none;
  transition: opacity .3s ease;
}
#tunnelHint.gone { opacity: 0; }

.tunnel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: 14px;
}
.tunnel-controls[hidden], .tunnel-readout[hidden] { display: none; }

.tunnel-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.tunnel-controls button {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--small);
  cursor: pointer;
}
.tunnel-controls button:hover { border-color: var(--ink); }
.tunnel-controls button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* The main action, so it reads first. */
.tunnel-controls #tunnelTest { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.tunnel-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--soft);
  font-size: var(--small);
}
.tunnel-controls input[type="range"] { width: 120px; accent-color: var(--ink); }

.tunnel-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin-top: 14px;
  color: var(--soft);
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
}
#tunnelFps { min-width: 4.5em; color: var(--ink); }

#tunnelResult { min-height: 3em; margin-top: 8px; color: var(--soft); }
#tunnelResult strong { color: var(--ink); font-weight: 600; }

@media (max-width: 860px) {
  .tunnel-frame { aspect-ratio: 4 / 3; }
  /* Fingers need room, and sliders are easier full width. */
  .tunnel-controls button { padding: 9px 14px; }
  .tunnel-controls label { flex: 1 1 100%; }
  .tunnel-controls input[type="range"] { flex: 1; width: auto; }
}