/* DESCENT — the shape of the end. Sits inside .fig__frame--flush, so the
   module owns its own padding. */
.dsc{padding:clamp(1.1rem,2.6vw,2rem);display:grid;gap:1rem}

/* ---------------------------------------------------------------- the line */
.dsc__plot{position:relative;height:230px;width:100%}
.dsc__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

.dsc__s0{stop-color:var(--red);stop-opacity:.24}
.dsc__s1{stop-color:var(--red);stop-opacity:0}

.dsc__area{
  fill:url(#dsc-grad);stroke:none;opacity:0;
  transition:opacity var(--dur-4) var(--ease) 260ms;
}
.dsc__plot.is-live .dsc__area{opacity:1}

.dsc__ground{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}
.dsc__drop{
  stroke:var(--red);stroke-width:1;stroke-dasharray:2 3;opacity:0;
  vector-effect:non-scaling-stroke;transition:opacity var(--dur-2) var(--ease) 900ms;
}
.dsc__plot.is-drawn .dsc__drop{opacity:.85}

.dsc__curve{
  fill:none;stroke:var(--text-2);stroke-width:2;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* axis captions: the only two words the vertical axis is allowed to say */
.dsc__ax{
  position:absolute;font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);white-space:nowrap;
}
.dsc__ax--top{left:0;top:17.39%;transform:translateY(-165%)}      /* y=40 of 230 */
.dsc__ax--gnd{right:0;top:73.91%;transform:translateY(50%);color:var(--text-3)} /* y=170 */

/* ------------------------------------------------------------------- pins */
.dsc__dot{
  position:absolute;width:1.35rem;height:1.35rem;border-radius:100px;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  display:grid;place-items:center;
  background:var(--surface-2);box-shadow:0 0 0 1px var(--line-2);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),
             background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.dsc__plot.is-drawn .dsc__dot{opacity:1;transform:translate(-50%,-50%) scale(1)}
.dsc__dot b{font-family:var(--mono);font-size:.5rem;font-weight:600;letter-spacing:.02em;color:var(--text-3)}
.dsc__dot.is-term{background:var(--red-deep);box-shadow:0 0 0 1px var(--red),0 0 16px var(--red-glow)}
.dsc__dot.is-term b{color:var(--red-2)}
.dsc.is-sel .dsc__dot{opacity:.35}
.dsc__plot.is-drawn .dsc__dot.is-on{
  opacity:1;transform:translate(-50%,-50%) scale(1.25);
  background:var(--yellow);box-shadow:0 0 0 1px var(--yellow),0 0 18px var(--yellow-glow);
}
.dsc__dot.is-on b{color:#000}

.dsc__note{
  font-family:var(--mono);font-size:.63rem;line-height:1.55;letter-spacing:.03em;
  color:var(--text-4);max-width:46rem;
  border-top:1px solid var(--line);padding-top:.7rem;
}

/* -------------------------------------------------------------- milestones */
.dsc__miles{
  display:grid;gap:.5rem;grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid var(--line);padding-top:1rem;
}
.dsc__mile{
  display:grid;gap:.4rem;align-content:start;min-width:0;
  padding:.7rem .75rem;border:1px solid transparent;border-radius:var(--radius);
  border-top:1px solid var(--line-2);
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
}
.dsc__mile.is-term{border-top-color:var(--red)}
.dsc.is-sel .dsc__mile:not(.is-on){opacity:.45}
.dsc__mile.is-on{background:var(--surface-2);border-color:var(--line-2);border-top-color:var(--yellow)}

.dsc__btn{
  display:grid;gap:.28rem;text-align:left;padding:0;min-height:2.5rem;align-content:start;
}
.dsc__n{font-size:.55rem;font-weight:600;letter-spacing:.16em;color:var(--text-4)}
.dsc__mile.is-term .dsc__n{color:var(--red)}
.dsc__mile.is-on .dsc__n{color:var(--yellow)}

.dsc__lead{
  font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--yellow);line-height:1.2;
}
.dsc__mile.is-term .dsc__lead{color:var(--red-2)}
.dsc__lead--big{
  font-size:clamp(.95rem,1.5vw,1.18rem);letter-spacing:-.035em;text-transform:none;
  color:var(--text);
}
.dsc__t{font-size:.86rem;line-height:1.3;color:var(--text-2);letter-spacing:-.005em}
.dsc__mile.is-on .dsc__t{color:var(--text)}
.dsc__d{font-size:.76rem;line-height:1.5;color:var(--text-3)}

/* -------- narrow: the line stays, the milestones become a stacked list ---- */
@media (max-width:1000px){
  .dsc__miles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .9rem}
}
@media (max-width:620px){
  .dsc__plot{height:150px}
  .dsc__ax{font-size:.56rem}
  .dsc__dot{width:1.15rem;height:1.15rem}
  .dsc__miles{grid-template-columns:1fr;gap:0;padding-top:.65rem}
  .dsc__mile{border-top:1px solid var(--line);border-radius:0;padding:.9rem .3rem;gap:.3rem}
  .dsc__btn{grid-template-columns:2.6rem minmax(0,1fr);gap:.2rem .6rem;min-height:2.75rem}
  .dsc__n{grid-column:1;grid-row:1;padding-top:.15rem}
  .dsc__lead{grid-column:2;grid-row:1}
  .dsc__t{grid-column:2;grid-row:2}
  .dsc__d{padding-left:3.2rem}
  .dsc__lead--big{font-size:1.15rem}
}