/* The slide viewer (slides.js): one slide fills the window, the track slides
   between them, and the controls stay where they are. A tool's own stylesheet
   loads after this one and draws its figures. */

:root {
  --sv-bg: #f6f7f9;
  --sv-card: #ffffff;
  --sv-ink: #16191f;
  --sv-ink2: #545b64;
  --sv-line: #d5dbdb;
  --sv-accent: #ec7211;
  --sv-accent-soft: #fdf0e3;
  --sv-nav: 52px;          /* the width kept clear for each side button */
  --sv-dots: 44px;         /* the height kept clear for the dots */
  --sv-move: 520ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--sv-bg);
  color: var(--sv-ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

.sv { position: fixed; inset: 0; }
.sv-viewport { position: absolute; inset: 0 0 var(--sv-dots) 0; overflow: hidden; }
.sv-track {
  height: 100%;
  display: flex;
  transition: transform var(--sv-move) cubic-bezier(.65, 0, .35, 1);
}
.sv.still .sv-track, .sv.still-now .sv-track { transition: none; }

.sv-slide { flex: 0 0 100%; height: 100%; min-width: 0; }
.sv-inner {
  height: 100%;
  overflow: auto;
  padding: 18px calc(var(--sv-nav) + 14px) 14px;
  display: flex;
  flex-direction: column;
  max-width: 1500px;
  margin: 0 auto;
}

.sv-top { display: flex; align-items: baseline; gap: 12px; }
.sv-num {
  flex: none;
  font-weight: 700;
  font-size: 15px;
  color: var(--sv-accent);
  border: 2px solid var(--sv-accent);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  transform: translateY(-3px);
}
.sv-title { margin: 0; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; }
.sv-lead { margin: 8px 0 14px; font-size: clamp(17px, 1.5vw, 21px); color: var(--sv-ink); max-width: 70em; }

.sv-body { flex: 1; min-height: 0; display: grid; gap: 22px; }
.sv-side .sv-body { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); }
.sv-fig { margin: 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sv-fig > svg, .sv-fig > img { max-width: 100%; max-height: 100%; }
.sv-text {
  font-size: 15.5px;
  overflow: auto;
  background: var(--sv-card);
  border: 1px solid var(--sv-line);
  border-radius: 10px;
  padding: 4px 18px;
  align-self: start;
  max-height: 100%;
}
.sv-text p { margin: 10px 0; }
.sv-text ul { margin: 8px 0; padding-left: 20px; }
.sv-text ul ul { margin: 2px 0 4px; }
.sv-text li { margin: 4px 0; }
.sv-text code, .sv-lead code { font-size: .92em; background: #eef0f3; padding: 0 4px; border-radius: 4px; }
.sv-text a, .sv-lead a { color: #0972d3; }

/* The controls: the same place on every slide. */
.sv-nav {
  position: absolute;
  top: calc(50% - var(--sv-dots) / 2);
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--sv-line);
  background: var(--sv-card);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 2;
}
.sv-nav svg { width: 22px; height: 22px; fill: none; stroke: var(--sv-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-nav:hover:not(:disabled) { border-color: var(--sv-accent); }
.sv-nav:hover:not(:disabled) svg { stroke: var(--sv-accent); }
.sv-nav:disabled { opacity: .3; cursor: default; }
.sv-prev { left: 6px; }
.sv-next { right: 6px; }

.sv-dots {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--sv-dots);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sv-dot {
  width: 11px; height: 11px; padding: 0;
  border-radius: 6px;
  border: 0;
  background: #b9c0c7;
  cursor: pointer;
  transition: width .25s, background .25s;
}
.sv-dot:hover { background: var(--sv-ink2); }
.sv-dot.cur { width: 30px; background: var(--sv-accent); }
.sv-count { margin-left: 8px; font-size: 13px; color: var(--sv-ink2); font-variant-numeric: tabular-nums; min-width: 3.2em; }

/* Arrival: what a slide marks .sv-pop appears in turn (--i) as the slide comes in. */
@keyframes sv-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes sv-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sv-slide.on .sv-pop { animation: sv-pop .45s calc(var(--sv-move) + var(--i, 0) * 18ms) both; transform-box: fill-box; transform-origin: center; }
.sv-slide.on .sv-rise { animation: sv-rise .5s calc(var(--sv-move) + var(--i, 0) * 120ms) both; }
.sv.still .sv-pop, .sv.still .sv-rise { animation: none !important; }
.sv.still .sv-dot, .sv.still-now .sv-dot { transition: none; }

/* A phone, or a short window: the figure over the words, the slide scrolling. */
@media (max-width: 860px) {
  :root { --sv-nav: 0px; --sv-dots: 52px; }
  .sv-side .sv-body { grid-template-columns: 1fr; }
  .sv-inner { padding: 14px 16px 10px; }
  .sv-body { flex: none; }
  .sv-text { max-height: none; }
  .sv-nav { top: auto; bottom: 4px; transform: none; }
  .sv-prev { left: 10px; }
  .sv-next { right: 10px; }
}