/* ============================================================
   Deep Learning course · interactive "lab" widgets
   Shared chrome for the figures inside a chapter. Loaded after
   /css/styles.css, so it inherits every site token and only adds
   what the widgets need. All classes are lb-* to avoid collisions.
   ============================================================ */

:root{
  /* categorical chart colours, validated against --paper / --surface */
  --lb-c1:#0c7b60;   /* class A / positive weight   */
  --lb-c2:#2a78d6;   /* second neuron / secondary   */
  --lb-c3:#eb6834;   /* class B / negative weight   */
  --lb-grid:#E3E6EA;
  --lb-plot:#FBFCFC;
}
@media (prefers-color-scheme:dark){
  :root{--lb-c1:#1bae87;--lb-c2:#3987e5;--lb-c3:#d95926;--lb-grid:#242A35;--lb-plot:#12161D;}
}
:root[data-theme="light"]{--lb-c1:#0c7b60;--lb-c2:#2a78d6;--lb-c3:#eb6834;--lb-grid:#E3E6EA;--lb-plot:#FBFCFC;}
:root[data-theme="dark"]{--lb-c1:#1bae87;--lb-c2:#3987e5;--lb-c3:#d95926;--lb-grid:#242A35;--lb-plot:#12161D;}

/* ---------- section eyebrow: "The problem", "False starts", … ---------- */
.lb-step{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-ink);margin:54px 0 -6px}
.lb-step+h2{margin-top:10px}

/* inline numeric literal inside prose */
.lb-n{font-family:var(--mono);font-size:.86em;background:var(--code-bg);color:var(--code-ink);
  padding:1px 6px;border-radius:5px;white-space:nowrap}

/* ---------- the widget card ---------- */
.lb{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:18px 18px 20px;
  margin:28px 0;font-family:var(--sans);box-shadow:0 1px 2px rgba(20,23,28,.04)}
:root[data-theme="dark"] .lb{box-shadow:0 1px 2px rgba(0,0,0,.3)}
.lb-h{font-size:.84rem;font-weight:680;letter-spacing:.01em;color:var(--ink);margin:0 0 3px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.4}
.lb-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:var(--muted);background:var(--tag);border-radius:5px;padding:3px 7px;white-space:nowrap}
.lb-sub{font-size:.84rem;line-height:1.55;color:var(--muted);margin:0 0 14px}
.lb-hint{font-size:.8rem;line-height:1.55;color:var(--muted);margin:13px 0 0;
  padding-top:12px;border-top:1px solid var(--hair-2)}
.lb-hint b{color:var(--ink);font-weight:640}

/* the drawing surface */
.lb svg.lb-stage{display:block;width:100%;height:auto;border-radius:11px;background:var(--lb-plot);
  border:1px solid var(--hair-2);touch-action:pan-y;user-select:none}
.lb svg.lb-stage text{font-family:var(--sans);fill:var(--muted)}
.lb svg.lb-stage text.mono{font-family:var(--mono)}
.lb svg.lb-stage text.ink{fill:var(--ink)}
/* knocks the background out behind a label so it stays readable on top of a wire */
.lb svg.lb-stage text.halo{paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
.lb svg.lb-stage .grid{stroke:var(--lb-grid);stroke-width:1}
.lb svg.lb-stage .axis{stroke:var(--hair);stroke-width:1.5}

/* On a phone a 780-unit figure would shrink its labels to nothing, so below 660px the
   stage keeps a legible minimum width and its wrapper scrolls sideways instead. */
.lb-scroll{border-radius:11px}
.lb-swipe{display:none}
@media (max-width:660px){
  .lb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .lb-scroll>svg.lb-stage{min-width:600px}
  .lb-swipe{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);margin:7px 0 0;text-align:center}
}

/* a diagram, not a plot, so it sits flush on the card */
.lb svg.lb-stage.flat{background:transparent;border:0;border-radius:0}

/* travelling-signal dashes overlaid on the neuron's wires */
.lb-flow{stroke-dasharray:1 13;animation:lb-flow 1.4s linear infinite}
@keyframes lb-flow{to{stroke-dashoffset:-14}}
@media (prefers-reduced-motion:reduce){.lb-flow{animation:none;opacity:0!important}}

/* swappable explainer under the activation figure */
.lb-note{font-size:.86rem;line-height:1.6;color:var(--ink-2);margin-top:14px;
  background:var(--paper);border:1px solid var(--hair);border-radius:10px;padding:12px 15px}
.lb-note b{color:var(--ink);font-weight:660}

/* ---------- sliders ---------- */
.lb-ctrls{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px 22px;margin-top:16px}
.lb-ctrls[hidden]{display:none}   /* beats the display:grid above */
.lb-ctrl label{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px}
.lb-ctrl label b{color:var(--ink);font-weight:600;font-size:.78rem}
.lb-ctrl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;
  background:var(--hair);outline:none;cursor:pointer;margin:0}
.lb-ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.24)}
.lb-ctrl input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);
  cursor:pointer;border:3px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.24)}
.lb-ctrl.is-c1 input[type=range]::-webkit-slider-thumb{background:var(--lb-c1)}
.lb-ctrl.is-c1 input[type=range]::-moz-range-thumb{background:var(--lb-c1)}
.lb-ctrl.is-c2 input[type=range]::-webkit-slider-thumb{background:var(--lb-c2)}
.lb-ctrl.is-c2 input[type=range]::-moz-range-thumb{background:var(--lb-c2)}

/* ---------- buttons + segmented control ---------- */
.lb-btns{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:15px}
.lb-btn{font-family:var(--sans);font-size:.81rem;font-weight:620;background:var(--accent);color:#fff;
  border:1px solid var(--accent);border-radius:9px;padding:8px 15px;cursor:pointer;white-space:nowrap;
  transition:transform .12s,filter .18s,opacity .2s}
.lb-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.lb-btn:disabled{opacity:.42;cursor:default;transform:none;filter:none}
:root[data-theme="dark"] .lb-btn{color:#0E1116}
@media (prefers-color-scheme:dark){.lb-btn{color:#0E1116}}
.lb-btn.ghost{background:transparent;color:var(--ink-2);border-color:var(--hair)}
.lb-btn.ghost:hover{border-color:var(--accent);color:var(--accent-ink);filter:none}
:root[data-theme="dark"] .lb-btn.ghost{color:var(--ink-2)}
@media (prefers-color-scheme:dark){.lb-btn.ghost{color:var(--ink-2)}}

.lb-seg{display:inline-flex;border:1px solid var(--hair);border-radius:9px;overflow:hidden}
.lb-seg button{font-family:var(--sans);font-size:.78rem;font-weight:600;background:transparent;color:var(--muted);
  border:0;border-right:1px solid var(--hair);padding:8px 14px;cursor:pointer;transition:.16s}
.lb-seg button:last-child{border-right:0}
.lb-seg button:hover{color:var(--ink)}
.lb-seg button.on{background:var(--accent);color:#fff}
:root[data-theme="dark"] .lb-seg button.on{color:#0E1116}
@media (prefers-color-scheme:dark){.lb-seg button.on{color:#0E1116}}

/* ---------- readout pills ---------- */
.lb-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lb-pill{font-family:var(--mono);font-size:.76rem;background:var(--paper);border:1px solid var(--hair);
  border-radius:9px;padding:6px 11px;color:var(--muted);white-space:nowrap}
.lb-pill b{color:var(--ink);font-weight:600}
.lb-pill.good{border-color:color-mix(in srgb,var(--lb-c1) 55%,var(--hair));color:var(--lb-c1)}
.lb-pill.good b{color:var(--lb-c1)}
.lb-pill.warn{border-color:color-mix(in srgb,var(--lb-c3) 55%,var(--hair));color:var(--lb-c3)}
.lb-pill.warn b{color:var(--lb-c3)}
.lb-pill.wide{white-space:normal}

/* the running arithmetic strip under the neuron widget */
.lb-calc{font-family:var(--mono);font-size:.8rem;line-height:2.1;color:var(--muted);
  background:var(--paper);border:1px solid var(--hair);border-radius:10px;padding:11px 14px;margin-top:14px;
  overflow-x:auto}
.lb-calc div{white-space:pre}      /* the columns are aligned with real spaces */
.lb-calc b{color:var(--ink);font-weight:600}
.lb-calc .k{color:var(--accent-ink)}

/* ---------- prose callouts ---------- */
.lb-idea{border:1px solid color-mix(in srgb,var(--accent) 34%,var(--hair));background:var(--accent-soft);
  border-radius:14px;padding:16px 20px;margin:26px 0;font-family:var(--sans)}
.lb-idea .lab{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:7px}
.lb-idea p{margin:0;font-size:.98rem;line-height:1.62;color:var(--ink-2)}
.lb-idea p+p{margin-top:10px}
.lb-idea strong{color:var(--ink);font-weight:660}

.lb-try{border-left:3px solid var(--accent);background:var(--surface);border-radius:0 10px 10px 0;
  padding:12px 18px;margin:22px 0;font-family:var(--sans);font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.lb-try b{color:var(--ink);font-weight:660}

/* legend used above the scatter plots */
.lb-key{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin:0 0 11px}
.lb-key span{display:inline-flex;align-items:center;gap:7px}
.lb-key svg{width:13px;height:13px;display:block;overflow:visible}

@media (max-width:560px){
  .lb{padding:15px 14px 17px;border-radius:13px}
  .lb-ctrls{grid-template-columns:1fr 1fr;gap:12px 16px}
  .lb-calc{font-size:.72rem;line-height:1.95}
}
@media (prefers-reduced-motion:reduce){
  .lb-btn{transition:none}
}

/* ============================================================
   Chapter 2 additions. Nothing here changes chapter 1.
   ============================================================ */

/* these containers set their own display, so [hidden] needs help */
.lb-pills[hidden],.lb-key[hidden],.lb-btns[hidden],.lb-btns2[hidden],.lb-tbl[hidden]{display:none}

/* a second row of controls, for figures with two things to switch */
.lb-btns2{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* blame travelling backwards down the wires (same dashes, other way) */
.lb-flow-r{animation-direction:reverse}

/* the raw-numbers view of a dataset, next to the plotted one */
.lb-tbl-in{max-height:286px;overflow:auto;border:1px solid var(--hair-2);border-radius:11px;
  background:var(--lb-plot)}
.lb-tbl table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.74rem}
.lb-tbl th{position:sticky;top:0;background:var(--surface);color:var(--muted);text-align:right;
  font-weight:600;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 14px;border-bottom:1px solid var(--hair)}
.lb-tbl td{text-align:right;padding:4px 14px;color:var(--ink-2);border-bottom:1px solid var(--hair-2)}
.lb-tbl td.c1{color:var(--lb-c1);font-weight:640}
.lb-tbl td.c3{color:var(--lb-c3);font-weight:640}
.lb-tbl-note{font-size:.8rem;line-height:1.55;color:var(--muted);margin:11px 0 0}