/* /versions/ in the redesign of 2026-10-11 (pages.css): a File and a Risk switch with the chosen file's figures beside the MT5
   curves, then every file and risk level as a row (each row picks itself). The curves draw themselves once (versions.js). */
.vpage .vhero > p.see a { font-weight: 600; text-decoration: none; }
.vpage .vhero > p.see a::after { content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; background: currentColor;
  -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; }
.vpick { display: grid; gap: 20px; }
.vctl { display: grid; gap: 16px; min-width: 0; }
.vfigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.vfigs .fig { min-width: 0; padding: 14px 16px; background: var(--surface); }
.vfigs .fig.big { grid-column: 1 / -1; }
.fig > span:first-child { display: block; color: var(--quiet); font: 500 12px/1.3 var(--body); }
.fig > b { display: block; min-height: 1.05em; margin-top: 6px; font: 650 22px/1.05 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fig.big > b { font-size: clamp(30px, 6vw, 42px); letter-spacing: -.035em; }
.fig > small { display: block; margin-top: 6px; color: var(--quiet); font-size: 11.5px; line-height: 1.35; }
.fig .meter { margin-top: 10px; }
.vwhy { margin: 0; color: var(--text); font-size: 14px; }
.vwhy b { color: var(--ink); }
/* both notes share one cell and only the chosen one shows: pressing 7.5 / 7.5.1 changed the card's height in one frame (A-Z 2026-10-11 #30) */
.vctl > .vwhy { grid-area: 4 / 1; visibility: hidden; }
.vpick:not([data-f="v561"]) .vwhy[data-f="v56"], .vpick[data-f="v561"] .vwhy[data-f="v561"] { visibility: visible; }
.vpick:not([data-f]) .vctl > div { display: none; }
.vpick:not([data-f]) .vctl > .vwhy { grid-area: auto; visibility: visible; }
.chartbox { min-width: 0; margin: 0; }
.vchart{display:block;width:100%;height:auto;overflow:visible}
.vchart .grid { stroke: rgba(255,255,255,.06); }
.vchart .start { stroke: rgba(226,196,108,.3); stroke-dasharray: 3 4; }
.vchart .ax { fill: var(--quiet); font: 500 10.5px var(--mono); }
.vchart .line { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 0; transition: stroke .3s, stroke-width .3s; }
.vchart .line.sel { stroke: var(--gold); stroke-width: 2.6; }
.vchart .dot { fill: rgba(255,255,255,.3); stroke: none; }
.vchart .dot.sel { fill: var(--gold-soft); stroke: var(--surface); stroke-width: 2; }
.vchart .endl { fill: var(--gold-soft); font: 600 12px var(--mono); }
.armed .vchart .line{stroke-dasharray:1 1;stroke-dashoffset:1}
.armed .vchart .dot, .armed .vchart .endl { opacity: 0; }
.armed.drawn .vchart .line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1), stroke .3s, stroke-width .3s; }
.armed.drawn .vchart .dot, .armed.drawn .vchart .endl { opacity: 1; transition: opacity .4s ease 1.6s; }
.chartbox figcaption { display: grid; gap: 6px; margin-top: 8px; color: var(--quiet); font: 500 11px/1.5 var(--mono); }
.chartbox .cap { text-wrap: balance; }
.vlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--body); }
@media (max-width: 420px) { .vlegend { display: grid; grid-template-columns: repeat(2, max-content); } }   /* two by two: "7.5.1 Max" fell alone onto a second line (A-Z #37) */
.vlegend > span { display: inline-flex; align-items: center; gap: 6px; }
.vlegend i { width: 14px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.3); }
.vlegend .sel { color: var(--gold-soft); }
/* seven curves: the legend names the chosen one and "Other levels" (owner 15 Oct 2026); without script every name shows */
.vpick[data-f] .vlegend > span:not(.sel):not(.vother) { display: none; }
.vpick:not([data-f]) .vlegend > .vother { display: none; }
.vlegend .sel i { background: var(--gold); }
@media (max-width: 760px) { .vchart .ax { font-size: 19px; } .vchart .line { stroke-width: 3; } .vchart .line.sel { stroke-width: 4.6; } .vchart .endl { font-size: 20px; } }
/* versions.js sets --k, the chart's scale: the words stay 11 px (the end value 12 px) at any width, never smaller than before
   (roast 19 Oct #39: 8.7 px at 1440, 9.6 px on a phone) */
.vchart.fit .ax { font-size: max(10.5px, calc(11px / var(--k))); }
.vchart.fit .endl { font-size: max(12px, calc(12px / var(--k))); }
@media (max-width: 760px) { .vchart.fit .ax { font-size: max(19px, calc(11px / var(--k))); } .vchart.fit .endl { font-size: max(20px, calc(12px / var(--k))); } }
/* phone: the chart right under the figures, then only the chosen note, smaller. The shared cell kept the longer 7.5.1 note's height
   as an empty band under 7.5's and pushed the chart off screen (owner 15 Oct 2026); below the chart a height change moves nothing in view */
@media (max-width: 899.98px) { .vpick { gap: 16px; } .vctl { display: contents; }
  .vctl > .vwhy { grid-area: auto; order: 1; font-size: 13px; line-height: 1.55; }
  .vpick[data-f="v561"] .vwhy[data-f="v56"], .vpick[data-f]:not([data-f="v561"]) .vwhy[data-f="v561"] { display: none; } }
@media (min-width: 900px) { .vpick { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 16px 28px; }
  .vctl { display: contents; } .vctl > * { grid-column: 1; } .chartbox { grid-area: 1 / 2 / 4 / 3; align-self: center; } .vctl > .vwhy { grid-column: 1 / -1; } }   /* the note runs under both columns: the chart floated in empty bands beside a tall left column (#30) */

/* the one test on recorded ticks, under the rows (roast 19 Oct #20: the curves above are mostly estimated ticks) */
.vreal { margin: 0; max-width: 82ch; color: var(--muted); font-size: 14px; line-height: 1.55; }
.vreal b { color: var(--ink); font-weight: 600; }

/* every file and risk level: one row each, two columns from 900 px (7.5 left, 7.5.1 right) */
.vlist { display: grid; gap: 6px; }
@media (min-width: 900px) { .vlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; } }
.vrow > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rtab{display:block;width:100%;table-layout:fixed;border-collapse:collapse}
.rtab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rtab tbody { display: grid; gap: 6px; }
.rtab tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 2px 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--raised); cursor: pointer; transition: border-color .25s, background-color .25s; }
.rtab tr::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transition: transform .3s var(--ease); }
.rtab tr:hover { border-color: rgba(226,196,108,.28); }
.rtab tr.sel { border-color: rgba(226,196,108,.35); background: rgba(226,196,108,.05); box-shadow: 0 10px 26px -18px rgba(226,196,108,.6); }
.rtab tr.sel::before { transform: none; }
.rtab th, .rtab td { display: block; padding: 0; border: 0; text-align: left; white-space: nowrap; }
.rtab tbody th { color: var(--ink); font: 600 13.5px/1.3 var(--body); white-space: normal; }
.rtab .rec, .rtab .same, .rtab .opt { margin-left: 6px; color: var(--quiet); font: 500 12px/1 var(--body); }
.rtab td { font: 600 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.rtab td:nth-child(2) { color: var(--ink); text-align: right; }
.rtab td:nth-child(3) { grid-column: 1; display: flex; align-items: center; color: var(--quiet); font: 400 11.5px/1.3 var(--body); }
.rtab td:nth-child(3)::before { content: "Largest drop\00a0"; white-space: nowrap; }
.rtab td:nth-child(3) .meter { flex: 1; height: 4px; margin-left: 10px; }
.rtab td:nth-child(4) { color: var(--quiet); font: 400 11.5px/1.3 var(--body); text-align: right; }
.rtab td:nth-child(4)::before { content: "lowest "; }
@media(max-width:379px){.rtab td{font-size:11px}.rtab td:nth-child(2){font-size:12px}.rtab tbody th{font-size:11.5px}}
.rtab td:nth-child(3) { font-variant-numeric: tabular-nums; }