/* Cálculo intuitivo: o que as lições acrescentam ao estilo de Matemática
 * Básica (de onde vêm as seções, os sliders, os exercícios e o gráfico). */

/* Secante e tangente: a secante é a reta “medida”, a tangente é o limite. */
.plot-secant {
  stroke: var(--tone-2);
  stroke-width: 2;
  stroke-linecap: round;
}

.plot-tangent {
  stroke: var(--text-strong);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.plot-curve.is-faint {
  stroke: var(--text-muted);
  stroke-width: 1.5;
  opacity: .6;
}

.plot-curve.is-second {
  stroke: var(--tone-3);
}

/* Catetos do triângulo da taxa de variação: Δt na horizontal, Δs na vertical. */
.plot-run,
.plot-rise {
  stroke-width: 2;
  stroke-dasharray: 3 3;
}

.plot-run { stroke: var(--tone-4); }
.plot-rise { stroke: var(--tone-3); }

.plot-guide {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

/* Faixas do ε e do δ. */
.plot-band {
  fill: var(--tone-1);
  fill-opacity: .12;
}

.plot-band.is-delta {
  fill: var(--tone-3);
}

.plot-band.is-fail {
  fill: var(--tone-4);
  fill-opacity: .14;
}

/* Buraco: o ponto que a função não tem. */
.plot-dot.is-hole {
  fill: var(--surface);
  stroke: var(--tone-1);
  stroke-width: 2;
}

.plot-dot.is-a { fill: var(--tone-2); }
.plot-dot.is-b { fill: var(--tone-3); }

/* Leitura grande do resultado de cada painel. */
.readout {
  margin: .9rem 0 .2rem;
  font-size: 1.05rem;
  text-align: center;
}

.readout .katex {
  font-size: 1.15em;
}

.plot-box + .plot-box {
  margin-top: .4rem;
}

.plot-caption {
  margin: .2rem 0 0;
  font-size: .85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Tabela de aproximações: uma coluna por lado ou por passo. */
.approx-table {
  margin-top: .8rem;
  overflow-x: auto;
}

/* Lista das próximas lições no índice: texto, sem cartão. */
.next-list {
  margin: .4rem 0 0;
  padding-left: 1.2rem;
  color: var(--text-muted);
}

.next-list li + li {
  margin-top: .3rem;
}

/* A caixa de papelão: a folha com os cortes e a caixa montada, lado a lado. */
.box-figs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 2rem;
  margin-top: .6rem;
}

.box-fig {
  width: min(200px, 42vw);
}

.box-svg {
  display: block;
  width: 100%;
  height: auto;
}

.box-face {
  fill: var(--tone-1);
  fill-opacity: .14;
  stroke: var(--tone-1);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.box-face.is-back {
  fill-opacity: .06;
  stroke-opacity: .5;
}

.box-cut {
  fill: var(--surface);
  stroke: var(--tone-4);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.box-fold {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* Integral: a área acumulada e os retângulos da soma. */
.plot-area {
  fill: var(--tone-1);
  fill-opacity: .22;
}

.plot-rect {
  fill: var(--tone-3);
  fill-opacity: .25;
  stroke: var(--tone-3);
  stroke-width: 1;
}

.plot-rect.is-neg {
  fill: var(--tone-4);
  stroke: var(--tone-4);
}

/* Derivar e integrar: a escada de degraus e a tabela unificada. */
.ladder-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: .9rem 0 .3rem;
}

.ladder-move {
  flex: none;
  padding: .35rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-strong);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}

.ladder-move:disabled {
  opacity: .4;
  cursor: default;
}

.rel-ladder {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: .2rem;
  list-style: none;
  overflow-x: auto;
}

.rel-step {
  flex: none;
  padding: .3rem .55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  opacity: .7;
}

.rel-step.is-near {
  opacity: 1;
  color: var(--text-strong);
}

.rel-step.is-on {
  opacity: 1;
  color: var(--text-strong);
  border-color: var(--tone-1);
  box-shadow: 0 0 0 1px var(--tone-1);
}

.rel-step-op {
  flex: none;
  color: var(--text-muted);
  font-size: .8rem;
}

.rel-table-wrap {
  overflow-x: auto;
  margin: .6rem 0 1rem;
}

.rel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.rel-table th {
  padding: .4rem .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.rel-table td {
  padding: .45rem .5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.rel-table .rel-f { font-weight: 600; }
.rel-table .rel-F .katex { color: var(--tone-2); }
.rel-table .rel-d .katex { color: var(--tone-3); }

.rel-table .rel-arrow {
  color: var(--text-muted);
  font-size: .75rem;
}

.rel-links {
  font-size: .8rem;
}

.rel-links a + a,
.rel-links a + button,
.rel-links button {
  margin-left: .4rem;
}

.rel-load {
  padding: .1rem .45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-strong);
  font: inherit;
  cursor: pointer;
}

/* O apoio sob a densidade, no ponto de equilíbrio (a média). */
.plot-fulcrum {
  fill: var(--tone-2);
  stroke: var(--surface);
  stroke-width: 1.5;
}