/* drawdown-climb: every selector starts with .drawdown-climb- */
.drawdown-climb-ends { position: relative; }
.drawdown-climb-flag { position: absolute; top: 0; transform: translateX(-50%); padding: 0 6px; border-radius: var(--r-sm); color: var(--brand-ink); font-weight: 700; white-space: nowrap; }
.drawdown-climb-flag.is-done { background: var(--brand); color: var(--on-ink); }
.drawdown-climb-grid { display: grid; gap: var(--s5); align-items: end; }
.drawdown-climb-bars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.drawdown-climb-col { container-type: inline-size; display: grid; justify-items: center; align-content: end; gap: 6px; min-width: 0; text-align: center; }
.drawdown-climb-num { max-width: 100%; font: 700 var(--fs-num-fit)/1.1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.drawdown-climb-down .drawdown-climb-num { color: var(--down); }
.drawdown-climb-up .drawdown-climb-num { color: var(--up); }
.drawdown-climb-track { position: relative; width: min(100%, 6.5rem); height: 190px; border-bottom: var(--rule-strong); background: linear-gradient(var(--line-strong), var(--line-strong)) top / 100% 1px no-repeat; }
.drawdown-climb-top { position: absolute; top: 5px; left: 4px; font: 400 var(--fs-small)/1 var(--font-ui); color: var(--ink-3); }
.drawdown-climb-up .drawdown-climb-top { display: none; }
.drawdown-climb-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; transition: height .3s var(--ease); }
.drawdown-climb-down .drawdown-climb-fill { background: var(--down); }
.drawdown-climb-up .drawdown-climb-fill { background: var(--up); }
/* Off the chart: torn top edge and a pulsing arrow */
.drawdown-climb-off .drawdown-climb-fill { clip-path: polygon(0 12px, 16% 0, 33% 12px, 50% 0, 67% 12px, 84% 0, 100% 12px, 100% 100%, 0 100%); }
.drawdown-climb-off .drawdown-climb-track::after { content: "▲ off the chart"; position: absolute; left: 4px; right: 4px; top: 18px; color: var(--on-ink); font: 700 var(--fs-small)/1.2 var(--font-ui); text-align: center; animation: drawdown-climb-nudge .8s var(--ease) 2; }
@keyframes drawdown-climb-nudge { 50% { transform: translateY(-5px); } }
.drawdown-climb-name { font: 700 var(--fs-ui)/1.2 var(--font-ui); color: var(--ink); }
.drawdown-climb-note { font-size: var(--fs-small); color: var(--ink-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.drawdown-climb-outs { display: grid; gap: var(--s4); }
.drawdown-climb-why { max-width: 38rem; }
@media (min-width: 40rem) {
  .drawdown-climb-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .drawdown-climb-track { height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .drawdown-climb-off .drawdown-climb-track::after { animation: none; }
  .drawdown-climb-fill { transition: none; }
}