/* Neuron Bench.

   Tool-specific layout only. Faces, buttons, fields, the title and the toolbar
   come from ../assets/base.css over the vendored system. This file styles the
   things this tool invents: the lesson rail, the layer editor, the plot frames
   and the grid of per-neuron panels.

   Every canvas here is sized in CSS rather than by its width attribute,
   because the drawing code reads clientWidth/clientHeight to set up the device
   pixel ratio. Changing a height below changes the plot; changing the
   attribute in the HTML does nothing. */

section + section { margin-top: var(--pp-space-5); }

.nb-intro { max-width: var(--pp-measure); margin-bottom: var(--pp-space-5); }
.nb-intro .lede { margin: 0 0 var(--pp-space-2); }
.nb-intro .note { margin: 0; }

/* ---- data ---------------------------------------------------------------- */

#dsNote { margin-bottom: 0; }

.nb-shape { margin: var(--pp-space-2) 0 0; }
.nb-shape code {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  color: var(--pp-faint);
  letter-spacing: var(--w-track-mono);
}

/* ---- the builder --------------------------------------------------------- */

.nb-build {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pp-space-4);
  align-items: start;
}

@media (max-width: 860px) {
  .nb-build { grid-template-columns: minmax(0, 1fr); }
}

.nb-build-controls > * + * { margin-top: var(--pp-space-2); }
.nb-build-controls .note { max-width: 46ch; margin-bottom: 0; }

/* Five things on one line, in half a page: the layer's name, how many units,
   which bend, the bend drawn, and the way out. Everything here is trimmed to
   make that one line — the select gives up its usual 12rem for it, and shrinks
   further before the row is allowed to break, because a row whose last control
   has fallen underneath it reads as a mistake. Below the point where the
   builder is a single column there is no trimming left, and it breaks. */
.nb-layer-row {
  margin-bottom: 8px;
  gap: 6px;
  flex-wrap: nowrap;
}
.nb-layer-row label {
  min-width: 3.6rem;
}
.nb-layer-row input[type='number'] { width: 4rem; }
.nb-layer-row .picker { flex: 0 1 7rem; min-width: 5rem; }
.nb-layer-row .select-trigger { min-width: 0; width: 100%; }

@media (max-width: 620px) {
  .nb-layer-row { flex-wrap: wrap; }
}

/* The activation, drawn small beside the menu that picks it. Sized here rather
   than on the element, like every other canvas on the page: the drawing code
   reads clientWidth and clientHeight to set up the pixel ratio. */
.nb-act-face {
  display: block;
  flex: none;
  width: 60px;
  height: 34px;
  border-radius: var(--pp-radius-sm);
  background: var(--pp-paper);
}

/* ---- figures ------------------------------------------------------------- */

/* The section label and the two pictures it can be drawn as, on one line. The
   label keeps its own bottom margin when the row wraps on a phone. */
.nb-viewbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px var(--pp-space-3);
}
.nb-viewbar .section-label { margin-bottom: 1rem; }
.nb-viewbar .group { margin-bottom: 1rem; }

.nb-figure { margin: 0; }

.nb-figure canvas {
  display: block;
  width: 100%;
  border: var(--pp-rule-line) solid var(--pp-line);
  border-radius: var(--pp-radius-md);
  background: var(--pp-paper);
  touch-action: none;
}

#mainCanvas { height: 420px; }
#lossCanvas { height: 220px; }
#netCanvas { height: 240px; }

@media (max-width: 620px) {
  #mainCanvas { height: 320px; }
  #lossCanvas { height: 180px; }
}

/* A caption is the page explaining its own picture, so it is written in the
   body face like the rest of the prose. Mono on this page means the machine
   said it: the shape line, the readouts and the unit labels below. */
.nb-figure figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--pp-muted);
  max-width: var(--pp-measure);
}

/* ---- readouts ------------------------------------------------------------
   A row of label-over-value pairs. Mono throughout, because every one of them
   is something the machine said. */

.nb-readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-space-2) var(--pp-space-4);
  padding: var(--pp-space-2) 0;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
}

.nb-readout .section-label { display: block; margin-bottom: 2px; }

.nb-readout code {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-mono);
  color: var(--pp-ink);
  letter-spacing: var(--w-track-mono);
}

/* ---- the record book ------------------------------------------------------
   A row per record, ruled like a table but built as a list, because a record
   is one thing said five ways rather than five columns of comparable values.
   The one under the current conditions is marked in plate 3, the same blue the
   system paints every selection in. */

.nb-records {
  list-style: none;
  margin: var(--pp-space-2) 0 0;
  padding: 0;
}

/* Two lines to a record, and always two: the set, the number and the network
   that reached it, then the conditions it was reached under underneath. Left
   to wrap as one paragraph the two run together, and "batch 256 normalised"
   reads as a single phrase that means nothing. */
.nb-record {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--pp-space-3);
  padding: var(--pp-space-2) 0;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
}

.nb-record-set {
  flex: 1 1 10rem;
  color: var(--pp-ink);
}

.nb-record-loss {
  flex: 0 0 auto;
  min-width: 5.5rem;
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-mono);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-ink);
}

.nb-record-how,
.nb-record-when {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}

.nb-record-how { flex: 2 1 20rem; }
.nb-record-when { flex: 1 0 100%; }

.nb-record-forget { margin-left: auto; }

.nb-record.is-current {
  border-left: 2px solid var(--pp-plate-3);
  padding-left: 10px;
}
.nb-record.is-current .nb-record-how,
.nb-record.is-current .nb-record-when { color: var(--pp-muted); }

.nb-records-say { margin-top: var(--pp-space-3); }

/* ---- the neuron grid ------------------------------------------------------ */

.nb-layer + .nb-layer { margin-top: var(--pp-space-3); }
.nb-layer .section-label { margin-bottom: 8px; }

.nb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.nb-cell { margin: 0; }

.nb-cell canvas {
  display: block;
  width: 100%;
  height: 104px;
  background: var(--pp-paper);
  border-radius: var(--pp-radius-sm);
  cursor: var(--pp-cursor-point);
}

/* A pinned unit, here and in the diagram and in the row of values below it. The
   pin is plate 3 in all three, because the system paints a selection blue. */
.nb-cell.is-focus canvas {
  outline: 2px solid var(--pp-plate-3);
  outline-offset: 1px;
}
.nb-cell.is-focus figcaption { color: var(--pp-ink); }

.nb-cell figcaption {
  margin-top: 4px;
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  color: var(--pp-faint);
  letter-spacing: var(--w-track-mono);
}

.nb-more {
  margin: 8px 0 0;
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-label);
  color: var(--pp-faint);
}

/* ---- one observation ------------------------------------------------------
   A row per layer: what the layer is on the left, what each of its units
   answered on the right. Every value is a button, because every value is also
   a way of pinning the unit that produced it. */

.nb-probe-field { width: 7rem; }

.nb-probe-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px var(--pp-space-3);
  padding: var(--pp-space-2) 0;
  border-top: var(--pp-rule-hairline) solid var(--pp-hair);
}
.nb-probe-row .section-label { margin: 0; min-width: 8rem; }

.nb-probe-units {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.nb-unit {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 7px;
  border: var(--pp-rule-line) solid transparent;
  border-radius: var(--pp-radius-sm);
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-mono);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-faint);
}
.nb-unit code { color: var(--pp-ink); font: inherit; }
.nb-unit:hover { border-color: var(--pp-line); }
.nb-unit:active { transform: var(--w-press); }
.nb-unit.is-focus {
  border-color: var(--pp-plate-3);
  color: var(--pp-ink);
}

.nb-probe-says {
  margin: 0;
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-mono);
  letter-spacing: var(--w-track-mono);
  color: var(--pp-ink);
}

#unitNote { margin-top: var(--pp-space-2); }

/* ---- pasted data ---------------------------------------------------------- */

.nb-paste {
  margin-top: var(--pp-space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: var(--pp-measure);
}

.nb-paste textarea {
  width: 100%;
  resize: vertical;
  font-family: var(--pp-font-mono);
  font-size: var(--pp-size-mono);
  line-height: 1.5;
  padding: 10px 12px;
}