/* NetLab: the node-graph lab of Support > Simulator (netlab.js).
 *
 * Every colour is a custom property set inline on the root (.nl), written in GitHub's dark palette:
 * sim-theme.js maps inline styles inside a .sim-panel, so the whole app follows the light/dark
 * toggle without a second set of rules here. */

/* The page hides the navigation and the table of contents: let the lab use the whole width. */
.md-main__inner.md-grid:has(.nl) { max-width: min(1880px, 100%); }

.md-typeset .nl {
  position: relative;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr) minmax(300px, 34%);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "bar bar bar" "lib view code";
  height: clamp(540px, calc(100vh - 150px), 1000px);
  margin: 1em 0 1.4em;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  user-select: none;
  -webkit-user-select: none;
}
.md-typeset .nl { --shadow: rgba(1, 4, 9, .5); }
[data-md-color-scheme="default"] .md-typeset .nl { --shadow: rgba(31, 35, 40, .14); }
.md-typeset .nl[data-code="0"] { grid-template-columns: 172px minmax(0, 1fr) 0; }
.md-typeset .nl[data-code="0"] .nl-code { display: none; }
.md-typeset .nl[data-lib="0"] { grid-template-columns: 0 minmax(0, 1fr) minmax(300px, 34%); }
.md-typeset .nl[data-lib="0"][data-code="0"] { grid-template-columns: 0 minmax(0, 1fr) 0; }
.md-typeset .nl[data-lib="0"] .nl-lib { display: none; }

/* ---------------------------------------------------------------- toolbar */
.md-typeset .nl-bar {
  grid-area: bar;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.md-typeset .nl-bar .nl-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 3px; }
.md-typeset .nl-bar .nl-grow { flex: 1 1 0; }
.md-typeset .nl button,
.md-typeset .nl select,
.md-typeset .nl input[type="number"],
.md-typeset .nl input[type="text"] {
  font: inherit;
  color: var(--text);
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  margin: 0;
  min-height: 28px;
  box-sizing: border-box;
}
.md-typeset .nl button { cursor: pointer; white-space: nowrap; }
.md-typeset .nl button:hover:not(:disabled) { border-color: var(--line2); background: var(--card2); }
.md-typeset .nl button:disabled { opacity: .45; cursor: not-allowed; }
.md-typeset .nl button.nl-primary { background: var(--green2); border-color: var(--green2); color: #ffffff; font-weight: 600; }
.md-typeset .nl button.nl-primary:hover:not(:disabled) { background: var(--green); border-color: var(--green); }
.md-typeset .nl button.nl-primary.nl-on { background: var(--orange); border-color: var(--orange); }
.md-typeset .nl button.nl-tog.nl-on { border-color: var(--blue2); color: var(--blue); }
.md-typeset .nl select { padding-right: 4px; cursor: pointer; }
.md-typeset .nl .nl-tpl { max-width: 15em; }

/* ---------------------------------------------------------------- library */
.md-typeset .nl-lib {
  grid-area: lib;
  overflow-y: auto;
  padding: 8px 6px 10px;
  background: var(--bg2);
  border-right: 1px solid var(--line);
}
/* a section per category: <details>, without the admonition look the theme gives every details */
.md-typeset .nl-lib details.nl-sec {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  overflow: visible;
  font-size: inherit;
}
.md-typeset .nl-lib details.nl-sec > summary::after { display: none; }
.md-typeset .nl-lib details.nl-sec > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 4px;
  border: 0;
  background: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.md-typeset .nl-lib details.nl-sec > summary::-webkit-details-marker { display: none; }
.md-typeset .nl-lib details.nl-sec > summary::before {
  content: '▸';
  position: static;
  width: auto;
  height: auto;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
  font-size: 10px;
  transition: transform .15s;
}
.md-typeset .nl-lib details.nl-sec[open] > summary::before { transform: rotate(90deg); }
.md-typeset .nl-lib details.nl-sec > summary span { margin-left: auto; font-weight: 400; color: var(--faint); letter-spacing: 0; }
.md-typeset .nl-lib details.nl-sec > summary:hover { color: var(--text); }
.md-typeset .nl-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  margin: 2px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  cursor: grab;
  touch-action: none;
}
.md-typeset .nl-item:hover { border-color: var(--line2); }
.md-typeset .nl-item i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.md-typeset .nl-lib .nl-hint { margin: 10px 4px 0; color: var(--faint); font-size: 11px; }

/* ---------------------------------------------------------------- canvas */
.md-typeset .nl-view {
  grid-area: view;
  position: relative;
  overflow: hidden;
  touch-action: none;
  outline: none;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.2px);
  cursor: default;
}
.md-typeset .nl-view.nl-panning { cursor: grabbing; }
.md-typeset .nl-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.md-typeset .nl-wires { position: absolute; left: 0; top: 0; width: 1px; height: 1px; max-width: none; overflow: visible; pointer-events: none; }
.md-typeset .nl-wires path { fill: none; }
.md-typeset .nl-wires .nl-hit { stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }
.md-typeset .nl-wires .nl-w { stroke-width: 2.2px; stroke-linecap: round; }
.md-typeset .nl-wires .t-tensor .nl-w { stroke: var(--blue); }
.md-typeset .nl-wires .t-target .nl-w { stroke: var(--orange); stroke-dasharray: 5 4; }
.md-typeset .nl-wires .t-loss .nl-w { stroke: var(--purple); }
.md-typeset .nl-wires .nl-bad .nl-w { stroke: var(--faint); stroke-dasharray: 3 4; }
.md-typeset .nl-wires .nl-sel .nl-w { stroke: var(--bright); stroke-width: 3px; }
.md-typeset .nl-wires .nl-g {
  stroke: var(--red2);
  stroke-linecap: round;
  opacity: 0;
  transition: stroke-width .25s, opacity .25s;
}
.md-typeset .nl.nl-train .nl-wires .nl-g { stroke-dasharray: 2 9; animation: nl-back .7s linear infinite; }
@keyframes nl-back { to { stroke-dashoffset: 11; } }
.md-typeset .nl-wires .nl-temp { stroke: var(--bright); stroke-width: 2px; stroke-dasharray: 6 4; }
.md-typeset .nl-wires text { font-size: 10.5px; font-family: var(--md-code-font-family, monospace); }
.md-typeset .nl-wires .nl-lbl rect { fill: var(--bg); stroke: var(--line); stroke-width: 1px; }
.md-typeset .nl-wires .nl-lbl .nl-shape { fill: var(--text); }
.md-typeset .nl-wires .nl-lbl .nl-grad { fill: var(--red2); }

/* ---------------------------------------------------------------- nodes */
.md-typeset .nl-node {
  position: absolute;
  width: 180px;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 8px;
  box-shadow: 0 6px 18px var(--shadow);
}
.md-typeset .nl-node.nl-wide { width: 248px; }
.md-typeset .nl-node.nl-sel { border-color: var(--blue2); box-shadow: 0 0 0 1px var(--blue2), 0 6px 18px var(--shadow); }
.md-typeset .nl-node.nl-err { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 6px 18px var(--shadow); }
.md-typeset .nl-node.nl-idle { opacity: .72; }
.md-typeset .nl-node.nl-pulse { animation: nl-pulse .9s ease-out; }
@keyframes nl-pulse { 0% { box-shadow: 0 0 0 6px var(--blue2); } 100% { box-shadow: 0 0 0 0 transparent; } }
.md-typeset .nl-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 8px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  background: var(--card2);
  cursor: grab;
  touch-action: none;
}
.md-typeset .nl-head .nl-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.md-typeset .nl-head .nl-title { font-weight: 700; color: var(--bright); white-space: nowrap; }
.md-typeset .nl-head .nl-name { color: var(--muted); font-family: var(--md-code-font-family, monospace); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.md-typeset .nl-head a.nl-lesson { color: var(--muted); text-decoration: none; font-size: 11px; }
.md-typeset .nl-head a.nl-lesson:hover { color: var(--blue); }
.md-typeset .nl-head .nl-x {
  min-height: 0; padding: 0 5px; line-height: 16px; border: 0; background: transparent; color: var(--faint); font-size: 14px;
}
.md-typeset .nl-head .nl-x:hover { color: var(--red); background: transparent; }
.md-typeset .nl-ports { display: flex; justify-content: space-between; padding: 4px 0 2px; gap: 6px; }
.md-typeset .nl-ins, .md-typeset .nl-outs { display: flex; flex-direction: column; gap: 3px; }
.md-typeset .nl-outs { align-items: flex-end; }
.md-typeset .nl-port {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  color: var(--muted);
  font-size: 11px;
  cursor: crosshair;
  touch-action: none;
}
.md-typeset .nl-port i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--line2); background: var(--bg); box-sizing: border-box;
}
.md-typeset .nl-ins .nl-port i { margin-left: -6px; }
.md-typeset .nl-outs .nl-port i { margin-right: -6px; }
.md-typeset .nl-port.t-tensor i { border-color: var(--blue); }
.md-typeset .nl-port.t-target i { border-color: var(--orange); }
.md-typeset .nl-port.t-loss i { border-color: var(--purple); }
.md-typeset .nl-port.nl-on i { background: currentColor; }
.md-typeset .nl-port.t-tensor.nl-on i { background: var(--blue); }
.md-typeset .nl-port.t-target.nl-on i { background: var(--orange); }
.md-typeset .nl-port.t-loss.nl-on i { background: var(--purple); }
.md-typeset .nl-port.nl-ok i { box-shadow: 0 0 0 4px var(--bluebg); }
.md-typeset .nl-port.nl-no { opacity: .3; }
.md-typeset .nl-params { padding: 2px 8px 4px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 6px; align-items: center; }
.md-typeset .nl-params label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.md-typeset .nl-params select,
.md-typeset .nl-params input[type="number"] { min-height: 22px; padding: 1px 4px; font-size: 11.5px; width: 100%; border-radius: 4px; }
.md-typeset .nl-params .nl-rng { display: flex; align-items: center; gap: 5px; }
.md-typeset .nl-params .nl-rng input { flex: 1 1 auto; min-width: 0; accent-color: var(--blue2); margin: 0; }
.md-typeset .nl-params .nl-rng output { font-family: var(--md-code-font-family, monospace); font-size: 11px; color: var(--text); min-width: 2.6em; text-align: right; }
.md-typeset .nl-prev { display: block; margin: 2px 8px 0; border-radius: 4px; background: var(--bg2); }
.md-typeset .nl-info { padding: 4px 8px 6px; color: var(--muted); font-size: 11px; font-family: var(--md-code-font-family, monospace); white-space: pre-line; }
.md-typeset .nl-info:empty { display: none; }
.md-typeset .nl-info b { color: var(--text); font-weight: 600; }
.md-typeset .nl-msg {
  margin: 0 6px 6px; padding: 5px 7px; border-radius: 5px;
  background: var(--errbg); color: var(--red2); font-size: 11px; line-height: 1.35;
}
.md-typeset .nl-msg:empty { display: none; }
/* your data: the file button, and what the node does with the file */
.md-typeset .nl-params .nl-file { display: flex; align-items: center; gap: 5px; min-width: 0; }
.md-typeset .nl-params .nl-file button { min-height: 22px; padding: 1px 7px; font-size: 11px; white-space: nowrap; }
.md-typeset .nl-params .nl-fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--muted); }
.md-typeset .nl-node.nl-drop { border-color: var(--green); box-shadow: 0 0 0 2px var(--green), 0 6px 18px var(--shadow); }
.md-typeset .nl-node details.nl-note {
  margin: 0 6px 6px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none;
  overflow: visible; font-size: 10.5px; line-height: 1.4; color: var(--muted);
}
.md-typeset .nl-node details.nl-note > summary {
  margin: 0; padding: 2px 2px; border: 0; background: none; cursor: pointer; list-style: none;
  color: var(--blue2); font-size: 10.5px; font-weight: 600; user-select: none;
}
.md-typeset .nl-node details.nl-note > summary::after { display: none; }
.md-typeset .nl-node details.nl-note > summary::-webkit-details-marker { display: none; }
.md-typeset .nl-node details.nl-note > summary::before {
  content: '▸'; position: static; width: auto; height: auto; background: none;
  -webkit-mask-image: none; mask-image: none; margin-right: 4px; display: inline-block; transition: transform .15s;
}
.md-typeset .nl-node details.nl-note[open] > summary::before { transform: rotate(90deg); }
.md-typeset .nl-node details.nl-note ol { margin: 3px 0 4px; padding-left: 16px; }
.md-typeset .nl-node details.nl-note li { margin: 0 0 3px; }
.md-typeset .nl-node details.nl-note p { margin: 0; }
.md-typeset .nl-node details.nl-note b { color: var(--text); font-weight: 600; word-break: break-all; }
.md-typeset .nl-node details.nl-note code { font-size: 10px; padding: 0 3px; }
.md-typeset .nl-msg button { margin-top: 4px; min-height: 22px; padding: 1px 7px; font-size: 11px; display: block; }

/* ---------------------------------------------------------------- overlays on the canvas */
.md-typeset .nl-status {
  position: absolute; left: 8px; bottom: 8px; right: 8px;
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  pointer-events: none;
  font-family: var(--md-code-font-family, monospace); font-size: 11.5px; color: var(--muted);
}
.md-typeset .nl-status > span { background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; }
.md-typeset .nl-status b { color: var(--bright); font-weight: 600; }
.md-typeset .nl-status .nl-warn { color: var(--yellow); }
.md-typeset .nl-zoom { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; }
.md-typeset .nl-zoom button { min-height: 26px; padding: 1px 8px; background: var(--card); }
.md-typeset .nl-toast {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  max-width: min(460px, 86%); padding: 7px 12px; border-radius: 6px;
  background: var(--card2); border: 1px solid var(--line2); color: var(--bright);
  box-shadow: 0 6px 18px var(--shadow); pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.md-typeset .nl-toast.nl-show { opacity: 1; }
.md-typeset .nl-pal {
  position: absolute; z-index: 5; width: 250px;
  background: var(--card); border: 1px solid var(--line2); border-radius: 8px;
  box-shadow: 0 10px 28px var(--shadow); overflow: hidden;
}
.md-typeset .nl-pal input[type="text"] { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--input); padding: 7px 9px; }
.md-typeset .nl-pal ul { list-style: none; margin: 0; padding: 4px; max-height: 260px; overflow-y: auto; }
.md-typeset .nl-pal li { display: flex; gap: 8px; align-items: baseline; padding: 5px 7px; margin: 0; border-radius: 5px; cursor: pointer; }
.md-typeset .nl-pal li i { width: 8px; height: 8px; border-radius: 2px; flex: none; align-self: center; }
.md-typeset .nl-pal li small { color: var(--muted); margin-left: auto; font-size: 10.5px; }
.md-typeset .nl-pal li.nl-act { background: var(--bluebg); color: var(--bright); }
.md-typeset .nl-ghost {
  position: fixed; z-index: 1000; pointer-events: none; padding: 5px 9px; border-radius: 6px;
  background: var(--card2); border: 1px solid var(--blue2); color: var(--bright); font-size: 12px;
}
.md-typeset .nl-help {
  position: absolute; z-index: 6; right: 10px; top: 44px; width: min(330px, calc(100% - 20px));
  padding: 10px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--line2);
  box-shadow: 0 10px 28px var(--shadow); font-size: 12px;
}
.md-typeset .nl-help table:not([class]) { margin: 0; width: 100%; }
.md-typeset .nl-help td:first-child { white-space: nowrap; color: var(--bright); font-family: var(--md-code-font-family, monospace); font-size: 11px; }
.md-typeset .nl-help p { margin: 0 0 6px; }

/* ---------------------------------------------------------------- code */
.md-typeset .nl-code {
  grid-area: code;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg2);
  border-left: 1px solid var(--line);
}
.md-typeset .nl-code-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11.5px;
}
.md-typeset .nl-code-head b { color: var(--bright); }
.md-typeset .nl-code-head span { flex: 1 1 auto; }
.md-typeset .nl-code-head button { min-height: 22px; padding: 1px 8px; font-size: 11px; }
.md-typeset .nl-code pre {
  margin: 0; flex: 1 1 auto; overflow: auto; padding: 8px 0;
  font-family: var(--md-code-font-family, monospace); font-size: 11.5px; line-height: 1.5;
  color: var(--text); background: transparent; user-select: text; -webkit-user-select: text;
}
.md-typeset .nl-code pre > div { padding: 0 10px; white-space: pre; border-left: 3px solid transparent; }
.md-typeset .nl-code pre > div[data-n] { cursor: pointer; }
.md-typeset .nl-code pre > div.nl-hl { background: var(--bluebg); border-left-color: var(--blue2); }
.md-typeset .nl-code .k { color: var(--red2); }
.md-typeset .nl-code .s { color: var(--blue); }
.md-typeset .nl-code .n { color: var(--blue2); }
.md-typeset .nl-code .c { color: var(--faint); font-style: italic; }
.md-typeset .nl-code .f { color: var(--purple); }

/* ---------------------------------------------------------------- narrow: the canvas on top, the code below */
@media (max-width: 900px) {
  .md-typeset .nl,
  .md-typeset .nl[data-code="0"],
  .md-typeset .nl[data-lib="0"],
  .md-typeset .nl[data-lib="0"][data-code="0"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(380px, 66vh) auto;
    grid-template-areas: "bar" "view" "code";
    height: auto;
  }
  .md-typeset .nl .nl-lib { display: none; }
  .md-typeset .nl-code { border-left: 0; border-top: 1px solid var(--line); max-height: 60vh; }
  .md-typeset .nl-bar { gap: 5px; padding: 6px; }
  .md-typeset .nl-bar .nl-sep, .md-typeset .nl-bar .nl-wideonly { display: none; }
  .md-typeset .nl .nl-tpl { max-width: 11em; }
}

/* The page around the lab: the notes below it, collapsed and in a smaller, muted type, so the lab
   is what the eye lands on. */
.md-typeset .nl-notes { margin-top: 1.2em; font-size: .68rem; color: var(--md-default-fg-color--light); }
.md-typeset .nl-notes details { margin: .35em 0; font-size: inherit; background: transparent;
  border: 0; border-top: 1px solid var(--md-default-fg-color--lightest); border-radius: 0; box-shadow: none; }
.md-typeset .nl-notes details > summary { padding: .5em 1.6em .5em 1.6em; background: transparent;
  color: var(--md-default-fg-color--light); font-weight: 500; }
.md-typeset .nl-notes details > summary::before { left: 0; background-color: var(--md-default-fg-color--lighter); }
.md-typeset .nl-notes details > summary::after { right: 0; background-color: var(--md-default-fg-color--lighter); }
.md-typeset .nl-notes details[open] > summary { color: var(--md-default-fg-color); }

/* ---------------------------------------------------------------- the class's note
   What to try in the scenario of a class, with a link back to the page; shown when a template is built. */
.md-typeset .nl-classnote {
  position: absolute; z-index: 5; left: 10px; top: 44px; width: min(360px, calc(100% - 20px));
  padding: 8px 12px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line2);
  box-shadow: 0 10px 28px var(--shadow); font-size: 12px; line-height: 1.5;
}
.md-typeset .nl-classnote-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.md-typeset .nl-classnote-head b { color: var(--bright); }
.md-typeset .nl-classnote-head a { font-size: 11.5px; }
.md-typeset .nl-classnote-head .nl-x { margin-left: auto; }
.md-typeset .nl-classnote p { margin: 0; }
.md-typeset .nl-classnote .nl-x {
  min-height: 0; padding: 0 5px; line-height: 16px; border: 0; background: transparent; color: var(--faint); font-size: 14px;
}
.md-typeset .nl-classnote .nl-x:hover { color: var(--red); background: transparent; }