/* Vx and Vy article: equations, static drag figure and the climb widget.
 * Shares tokens with home.css / article.css. */
.eq { margin: 1.2em 0 0; padding: 12px 16px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; font: 500 16px/1.7 var(--mono); text-align: center; overflow-x: auto; }
.eq small { display: block; font: 400 14px/1.5 var(--body); color: var(--ink-soft); }

/* Static drag figure */
.dr-axis { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.dr-grid { stroke: var(--rule); stroke-width: 1; }
.dr-par { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 6 4; }
.dr-ind { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 2 4; }
.dr-tot { fill: none; stroke: var(--blue); stroke-width: 3; }
.dr-pow { fill: none; stroke: var(--magenta); stroke-width: 3; }
.dr-drop { stroke: var(--ink-soft); stroke-width: 1.2; stroke-dasharray: 3 3; }
.dr-dot { fill: var(--paper); stroke-width: 2.5; }
.dr-dot.b { stroke: var(--blue); } .dr-dot.m { stroke: var(--magenta); }
.dr-t { fill: var(--ink-soft); font: 500 12px var(--mono); }
.dr-tb { fill: var(--blue); font: 600 13px var(--mono); }
.dr-tm { fill: var(--magenta); font: 600 13px var(--mono); }
.prose .fig.dr-fig svg { max-width: 560px; margin: 0 auto; }

/* Climb widget */
.widget.vxw { grid-template-columns: 1fr; }
.vx-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-tab { font: 600 14px var(--body); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; }
.vx-tab.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.vx-alt { display: grid; gap: 6px; font-size: 15px; }
.vx-alt b { font-family: var(--mono); }
.vx-alt input { width: 100%; accent-color: var(--magenta); }
.vx-read { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; }
.vx-read div { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 10px; }
.vx-read dt { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.vx-read dt.cx { color: var(--blue); } .vx-read dt.cy { color: var(--magenta); }
.vx-read dd { margin: 2px 0 0; font: 600 17px var(--mono); }
.vx-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vx-panels figure { margin: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 8px; }
.vx-panels figure.wide { grid-column: 1 / -1; }
.vx-panels figure.wide svg { max-width: 420px; margin: 0 auto; }
.vx-panels figcaption { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 2px 4px 4px; }
.vx-panels svg { display: block; width: 100%; height: auto; }
.vx-axis { stroke: var(--ink); stroke-width: 1.3; fill: none; }
.vx-grid { stroke: var(--rule); stroke-width: 1; }
.vx-t { fill: var(--ink-soft); font: 500 11px var(--mono); }
.vx-pa { fill: none; stroke: #1f7a4d; stroke-width: 2.6; }
.vx-pr { fill: none; stroke: var(--ink); stroke-width: 2.6; }
.vx-ex { fill: color-mix(in srgb, #1f7a4d 16%, transparent); stroke: none; }
.vx-lpa { fill: #1f7a4d; font: 600 12px var(--mono); }
.vx-lpr { fill: var(--ink); font: 600 12px var(--mono); }
.vx-mx { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 3; }
.vx-my { stroke: var(--magenta); stroke-width: 1.5; stroke-dasharray: 4 3; }
.vx-roc { fill: none; stroke: var(--ink); stroke-width: 2.6; }
.vx-tan { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 5 4; }
.vx-dx { fill: var(--paper); stroke: var(--blue); stroke-width: 2.5; }
.vx-dy { fill: var(--paper); stroke: var(--magenta); stroke-width: 2.5; }
.vx-lx { fill: var(--blue); font: 700 13px var(--mono); }
.vx-ly { fill: var(--magenta); font: 700 13px var(--mono); }
.vx-cx { fill: none; stroke: var(--blue); stroke-width: 2.6; }
.vx-cy { fill: none; stroke: var(--magenta); stroke-width: 2.6; }
.vx-ceil { stroke: var(--ink-soft); stroke-width: 1.2; stroke-dasharray: 6 4; }
.vx-now { stroke: var(--ink); stroke-width: 1; opacity: .5; }
@media (prefers-color-scheme: dark) { .vx-pa, .vx-lpa { stroke: #5fc493; fill: #5fc493; } .vx-pa { fill: none; } .vx-ex { fill: color-mix(in srgb, #5fc493 18%, transparent); } }
.vx-tab:focus-visible, .vx-alt input:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }
@media (max-width: 720px) {
  .vx-read { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vx-panels { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .vx-read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}