/* vision.css — extras for the Vision Learning page. Inherits style.css base. */

.navlink { color: var(--accent); text-decoration: none; font-size: 11px; }
.navlink:hover { text-decoration: underline; }
.barLinks { display: flex; gap: 10px; margin-left: auto; }

.ctrlPanel { margin-top: 14px; }
.ctrlRow {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
  padding: 6px 2px;
}
.ctrlRow .field { flex: 1 1 180px; max-width: 260px; gap: 5px; }
.ctrlRow input[type="range"] {
  width: 100%; accent-color: var(--accent); cursor: pointer;
  background: transparent;
}
.ctrlBtns { margin-left: auto; }

.teachRow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--edge);
}
.teachRow .k { margin: 0; }
#seedTok {
  flex: 1 1 220px; max-width: 320px;
  background: #06080c; border: 1px solid var(--edge); color: var(--text);
  border-radius: 7px; padding: 8px 10px; font-family: var(--mono); font-size: 12px;
}
#seedTok:focus { outline: none; border-color: var(--accent); }

.ganStatus { display: flex; gap: 8px; }

.latPanel { display: flex; flex-direction: column; }
.latBars { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; flex: 1; }
.latRow {
  display: grid; grid-template-columns: 70px 1fr 44px; gap: 8px;
  align-items: center;
}
.latName { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
.latTrack {
  height: 8px; background: #04060a; border: 1px solid var(--edge);
  border-radius: 5px; overflow: hidden;
}
.latTrack i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .2s;
}
.latMs { font-size: 10px; color: var(--text); text-align: right; }

@media (max-width: 760px) {
  .ctrlBtns { margin-left: 0; }
}