/* the new look: performance area (class-only, .u- prefix). */
/* Performance · Results, Risk and Projections: one section, three tabs. */

/* a little air between the heading, the source picker and the tabs */
.u-perf > .u-source{ margin-top:14px; }
.u-perf > .u-tabs{ margin-top:2px; }

/* nothing smaller than 13px on these pages */
.u-perf .u-stat .h, .u-perf .u-foot{ font-size:13px; }

/* the big number on top */
.u-perf-hero{ margin-top:18px; }
.u-perf-k{ font-size:14.5px; font-weight:600; color:var(--u-t3); }
.u-perf-hero .u-big{ margin-top:6px; }
.u-perf-big.up{ color:var(--u-green); } .u-perf-big.down{ color:var(--u-red); }
.u-perf-hero .u-chg{ margin-top:2px; }
.u-perf-line{ margin:16px var(--u-pad) 0; font-size:14.5px; font-weight:600; color:var(--u-t3); }
@media (min-width:1024px){ .u-perf-line{ margin:18px 0 0; } }

/* range buttons: all eight fit a phone in one row, each a 44px-tall tap target */
@media (max-width:1023px){
  .u-perf .u-ranges{ gap:0; padding-top:6px; padding-bottom:0; }
  .u-perf .u-ranges button{ flex:1 1 0; min-width:0; height:44px; padding:5px 1px; background-clip:content-box; }
}

/* a section heading with the trading term in small print and an optional switch */
.u-perf-sec{ align-items:center; flex-wrap:wrap; row-gap:4px; }
.u-perf-sec > span:first-child{ min-width:0; }
.u-perf-term{ font-size:13px; font-weight:500; color:var(--u-t3); letter-spacing:0; }

/* small two- or three-way switches: $ / %, Day / Week / Month, Line / Bar.
   Each button is a 44px-tall tap target; the pill inside is the visible part. */
.u-perf-seg{ display:inline-flex; align-items:center; gap:0; flex:none; vertical-align:middle; margin:-7px 0; }
.u-perf-seg button{ display:inline-flex; align-items:center; justify-content:center; height:44px; min-width:44px; padding:0 1px;
                    border:0; background:none; color:var(--u-t3); font-size:13.5px; font-weight:600; letter-spacing:0; }
.u-perf-seg button span{ display:inline-flex; align-items:center; justify-content:center; height:30px; min-width:32px; padding:0 10px;
                         border-radius:999px; background:var(--u-raise); }
.u-perf-seg button:hover span{ color:var(--u-t1); }
.u-perf-seg button.on span{ background:var(--u-t1); color:var(--u-bg); }
.u-perf-stat .h .u-perf-seg{ margin:0 0 -7px; }
.u-perf-stat .h .u-perf-seg button span{ padding:0 8px; font-size:13px; }

/* stats: the "?" opens its sentence right there (a phone has no hover) */
.u-perf-stat .k .u-ellip{ min-width:0; }
/* the shared "?" (an 18px circle in a 32px target) grown to a 44px target here */
.u-perf-tip.u-tip{ width:44px; height:44px; margin:-13px -13px -13px -11px; cursor:pointer; isolation:isolate; }
.u-perf-tip.u-tip::before{ left:13px; top:13px; z-index:-1; }
.u-perf-tip[aria-expanded="true"]{ color:var(--u-bg); }
.u-perf-tip[aria-expanded="true"]::before, .u-perf-g[aria-expanded="true"] .u-tip::before{ background:var(--u-t1); border-color:var(--u-t1); }
.u-perf-g .u-tip{ isolation:isolate; }
.u-perf-g .u-tip::before{ z-index:-1; }
.u-perf-tipx{ margin-top:8px; font-size:13.5px; line-height:1.45; color:var(--u-t2); }
.u-perf-stat .v.flat{ color:var(--u-t1); }
@media (min-width:1024px){ .u-perf-stats.u-perf-c3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* bar charts (the PnL spread, projection bars): no box, one font */
.u-perf-ctitle{ margin:24px var(--u-pad) 0; font-size:14.5px; font-weight:600; color:var(--u-t2); }
@media (min-width:1024px){ .u-perf-ctitle{ margin:28px 0 0; } }
.u-perf-ctitle .u-perf-term{ font-weight:500; }
.u-perf-bars{ position:relative; margin:16px var(--u-pad) 0; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
@media (min-width:1024px){ .u-perf-bars{ margin:18px 0 0; } }
.u-perf-plot{ display:flex; align-items:flex-end; gap:3px; height:180px; border-bottom:1px solid var(--u-line2); }
@media (min-width:1024px){ .u-perf-plot{ height:210px; gap:6px; } }
.u-perf-plot .s{ flex:1 1 0; min-width:0; height:100%; display:flex; align-items:flex-end; justify-content:center; }
.u-perf-plot .b{ width:100%; max-width:72px; border-radius:6px 6px 0 0; background:var(--u-green); opacity:.85; transition:opacity .12s; }
.u-perf-plot .b.down{ background:var(--u-red); }
.u-perf-bars.hov .u-perf-plot .b{ opacity:.35; }
.u-perf-bars.hov .u-perf-plot .b.on{ opacity:1; }
.u-perf-x{ position:relative; height:20px; margin-top:7px; }
.u-perf-x span{ position:absolute; top:0; transform:translateX(-50%); font-size:13px; line-height:20px; color:var(--u-t3); white-space:nowrap; }
.u-perf-x span.first{ left:0; transform:none; }
.u-perf-x span.last{ right:0; transform:none; }
.u-perf-btip{ position:absolute; top:6px; left:50%; transform:translateX(-50%); padding:4px 9px; border-radius:8px; background:var(--u-raise2);
              color:var(--u-t1); font-size:13px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; }
.u-perf-bars.hov .u-perf-btip{ opacity:1; }
.u-perf-bars-empty{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:150px; padding:0 12px;
                    color:var(--u-t3); font-size:14.5px; border-bottom:1px solid var(--u-line); }
.u-perf-cap{ margin:10px var(--u-pad) 0; font-size:13px; line-height:1.45; color:var(--u-t3); }
@media (min-width:1024px){ .u-perf-cap{ margin:10px 0 0; } }

/* the projection chart and its switches */
.u-perf-line-wrap{ min-width:0; }
/* the line's end dot sits on the last point; keep it inside a phone's edge */
@media (max-width:1023px){ .u-perf-line-wrap{ padding-right:10px; } }
.u-perf-chartbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; column-gap:16px; }
.u-perf-chartbar .u-ranges{ flex:1 1 100%; }
.u-perf-chartbar .u-perf-type{ margin:8px var(--u-pad) 0; }
@media (min-width:1024px){
  .u-perf-chartbar{ flex-wrap:nowrap; }
  .u-perf-chartbar .u-ranges{ flex:1 1 auto; }
  .u-perf-chartbar .u-perf-type{ margin:12px 0 4px; }
}

/* Risk: the six headline numbers, big, each with a thin bar; tap for what it means */
.u-perf-gauges{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; padding:0 var(--u-pad); margin-top:10px; }
@media (min-width:700px){ .u-perf-gauges{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:28px; } }
@media (min-width:1024px){ .u-perf-gauges{ padding:0; } }
.u-perf-g{ display:flex; flex-direction:column; align-items:stretch; width:100%; min-width:0; padding:16px 0 15px; margin:0;
           border:0; border-bottom:1px solid var(--u-line); border-radius:0; background:none; color:var(--u-t1); text-align:left; cursor:pointer; }
.u-perf-g .k{ display:flex; align-items:center; gap:6px; min-width:0; font-size:13.5px; font-weight:500; color:var(--u-t3); }
.u-perf-g .v{ display:block; margin-top:4px; font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.15;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:1024px){ .u-perf-g .v{ font-size:34px; } }
.u-perf-g .v.up, .u-perf-g .h b.up, .u-perf-gx b.up{ color:var(--u-green); }
.u-perf-g .v.down, .u-perf-g .h b.down, .u-perf-gx b.down{ color:var(--u-red); }
.u-perf-g .v.warn, .u-perf-g .h b.warn, .u-perf-gx b.warn{ color:var(--u-gold); }
.u-perf-g .v.mute{ color:var(--u-t2); }
.u-perf-meter{ display:block; height:4px; margin-top:10px; border-radius:2px; background:var(--u-raise2); overflow:hidden; }
.u-perf-meter i{ display:block; height:100%; border-radius:2px; background:var(--u-t3); }
.u-perf-meter i.up{ background:var(--u-green); } .u-perf-meter i.down{ background:var(--u-red); } .u-perf-meter i.warn{ background:var(--u-gold); }
.u-perf-g .h{ display:block; margin-top:8px; font-size:13px; line-height:1.4; color:var(--u-t3); }
.u-perf-g .h b{ font-weight:700; }
.u-perf-g.open{ grid-column:1 / -1; }
.u-perf-g[aria-expanded="true"] .u-tip{ color:var(--u-bg); }
.u-perf-gx{ display:flex; flex-direction:column; gap:6px; margin-top:12px; font-size:14px; line-height:1.5; color:var(--u-t2); white-space:normal; }
.u-perf-gx > span{ display:block; }
.u-perf-gx b{ color:var(--u-t1); font-weight:600; }
.u-perf-gx-close{ color:var(--u-t3); font-size:13px; }

/* Risk: every measure as a row, two columns on a computer */
.u-perf-measures .u-row .v{ font-weight:600; }
@media (max-width:899px){ .u-perf-measures .u-rows:first-child .u-row:last-child{ border-bottom:1px solid var(--u-line); } }
/* Risk: the further measures (quant.py) — the plain line under each wraps on a phone */
.u-quant .u-row .s{ white-space:normal; overflow:visible; text-overflow:clip; }
.u-quant .u-row .v{ font-weight:600; }
.u-qm{ padding:0 var(--u-pad); }
@media (min-width:1024px){ .u-qm{ padding:0; } }
.u-qm-y{ display:flex; justify-content:space-between; gap:12px; margin:14px 0 6px; font-size:14px; font-weight:600; }
.u-qm-y .up{ color:var(--u-green); } .u-qm-y .down{ color:var(--u-red); }
.u-qm-g{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
@media (min-width:700px){ .u-qm-g{ grid-template-columns:repeat(12,minmax(0,1fr)); } }
.u-qm-c{ min-width:0; padding:6px 2px; border-radius:8px; text-align:center; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; background:var(--u-line); color:var(--u-t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-qm-c .m{ display:block; font-size:10.5px; font-weight:500; color:var(--u-t3); }
.u-qm-c.up{ background:var(--u-green-t); color:var(--u-green); }
.u-qm-c.down{ background:var(--u-red-t); color:var(--u-red); }
.u-qm-c.none{ color:var(--u-t3); }
/* Projections: the fan (5-95 and 25-75 bands, the middle path), its readout and key */
.u-pfan{ position:relative; height:220px; margin:8px var(--u-pad) 0; touch-action:pan-y; }
@media (min-width:1024px){ .u-pfan{ margin:8px 0 0; height:280px; } }
.u-pfan svg{ display:block; width:100%; height:100%; overflow:visible; }
.u-pfan .b1{ fill:var(--u-green); fill-opacity:.13; }
.u-pfan .b2{ fill:var(--u-green); fill-opacity:.24; }
.u-pfan .mid{ fill:none; stroke:var(--u-green); stroke-width:2; }
.u-pfan .base{ fill:none; stroke:var(--u-t3); stroke-opacity:.6; stroke-width:1; stroke-dasharray:2 6; }
.u-pfan .cross{ fill:none; stroke:var(--u-t3); stroke-width:1; }
.u-pfan-read{ margin:12px var(--u-pad) 0; min-height:38px; font-size:13px; line-height:1.45; color:var(--u-t2); font-variant-numeric:tabular-nums; }
.u-pfan-read b{ color:var(--u-t1); font-weight:600; }
@media (min-width:1024px){ .u-pfan-read{ margin:12px 0 0; } }
.u-pfan-key{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px var(--u-pad) 0; font-size:12.5px; color:var(--u-t3); }
@media (min-width:1024px){ .u-pfan-key{ margin:10px 0 0; } }
.u-pfan-key span{ display:inline-flex; align-items:center; gap:6px; }
.u-pfan-key i{ display:inline-block; width:14px; height:10px; border-radius:3px; background:var(--u-green); }
.u-pfan-key i.b1{ opacity:.13; } .u-pfan-key i.b2{ opacity:.3; } .u-pfan-key i.mid{ height:2px; border-radius:1px; }
.u-pcut{ padding:0 var(--u-pad); }
@media (min-width:1024px){ .u-pcut{ padding:0; } }
.u-pcut .u-perf-seg{ flex-wrap:wrap; max-width:100%; }