/* FIELDWISE v2 result charts. Tokens, .sheet, .seg, .chip, .legend, .tip and .foot come from fw.css. */
.fx{--dim:.16}
.fx-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.fx-body{position:relative}
.fx-body>svg{display:block;width:100%;height:auto;overflow:visible;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
/* the chart is one Tab stop; its ring clears the row bands, which reach 14px past the plot */
.fx-body>svg:focus{outline:none}
.fx-body>svg:focus-visible{outline:2px solid var(--teal);outline-offset:16px;border-radius:14px}

/* type inside charts */
.fx text{font:400 11.5px var(--num);fill:var(--label)}
.fx .fx-tk{font:400 11.5px var(--num);fill:var(--label);font-variant-numeric:tabular-nums}
.fx .fx-bm{fill:var(--mut)}
.fx .fx-crop{font:700 20px var(--display);fill:var(--ink);letter-spacing:-.012em}
.fx .fx-n{font:400 12px var(--num);fill:var(--label);font-variant-numeric:tabular-nums}
.fx .fx-lab{font:400 14px var(--sans);fill:var(--ink)}
.fx .fx-grp{font:700 14px var(--sans);fill:var(--ink);letter-spacing:0}
.fx .fx-pc{font:500 13px var(--num);font-variant-numeric:tabular-nums;pointer-events:none}
.fx .fx-yr{font:700 16px var(--display);fill:var(--ink);letter-spacing:-.01em}
.fx .fx-yg{font:500 14px var(--num);font-variant-numeric:tabular-nums}
.fx .fx-rl{font:500 11.5px var(--num);fill:var(--ink);font-variant-numeric:tabular-nums;pointer-events:none}
.fx .fx-ko{fill:var(--card);pointer-events:none}
.fx .fx-halo{paint-order:stroke;stroke:var(--card);stroke-width:5px;stroke-linejoin:round}

/* axes */
.fx .fx-gl{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.fx .fx-gl0{stroke:var(--line-2);stroke-width:1;shape-rendering:crispEdges}
.fx .fx-zero{stroke:var(--ink);stroke-opacity:.45;stroke-width:1.25}

/* marks */
.fx .fx-ci{stroke-width:2.5;stroke-linecap:round;stroke-opacity:.45}
.fx .fx-cib{fill-opacity:.15;stroke:none;pointer-events:none}
.fx .fx-arw{fill-opacity:.72}
.fx .fx-dot,.fx .fx-pt{stroke-width:2;transition:fill .3s var(--ease),stroke .3s var(--ease)}
.fx .fx-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.fx .fx-line.fx-dash{stroke-linecap:butt}
.fx .fx-ref{stroke:var(--ink);stroke-width:1.5}
.fx .fx-ref-b{stroke-dasharray:6 5}
.fx .fx-dots{opacity:.8}
.fx .fx-ring{fill:none;stroke:var(--ink);stroke-width:1.5;pointer-events:none;opacity:0;transition:opacity .15s var(--ease)}
.fx .fx-ring.on{opacity:1}

/* hover emphasis */
.fx .fx-s,.fx .fx-t{transition:opacity .25s var(--ease)}
.fx.hl .fx-s:not(.on){opacity:var(--dim)}
.fx.hl .fx-t:not(.on){opacity:.32}
.fx.fx-anat.hl .fx-s:not(.on){opacity:.3}
.fx .fx-band{fill:rgba(26,34,48,.035);opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .26s var(--ease)}
.fx .fx-band.on{opacity:1}

/* legends and chips */
.fx-leg{row-gap:8px}
.fx-body>.fx-leg{margin:0 0 20px}
.fx-leg span{cursor:default;white-space:nowrap}
.fx-leg .fx-key{display:inline-block;flex:none}
.fx-leg i.sq{width:10px;height:10px;border-radius:3px}
.fx-chips{display:flex;flex-wrap:wrap;gap:8px 7px;margin:0 0 28px}
.fx-chips .chip{padding:0 12px}

/* tooltip: interval in the value column, context on the right of the title */
.tip .fx-ci{color:#9AA6B0;font-weight:400}
.tip .fx-tsub{margin-left:auto;padding-left:14px;font-weight:400;color:#9AA6B0;white-space:nowrap}
.tip:has(.fx-ci){max-width:330px}
.tip:has(.fx-ci) .r{white-space:nowrap}
.fx-anat .foot{margin-top:24px}

@media(max-width:700px){.fx-body>.fx-leg{margin-bottom:16px}.fx-chips{margin-bottom:20px}}

/* Reliability overview: fixed method order, crop-years and harm share kept distinct. */
.rel-switch{display:flex;gap:6px;margin-bottom:8px}
.rel-switch button{border:0;background:transparent;padding:8px 14px;border-radius:16px;color:var(--mut);cursor:pointer;font:500 13px var(--sans)}
.rel-switch button[aria-pressed=true]{background:var(--teal-d);color:white}
.rel-overview{padding:20px 28px 16px}
.rel-overview[hidden],.rel-fields[hidden]{display:none}
.rel-title{display:flex;gap:12px;align-items:center;margin-bottom:10px;flex-wrap:wrap;font-size:16px}
.rel-title>span{margin-left:auto;font:400 12px var(--num);color:var(--mut)}
.rel-table{border-collapse:collapse;width:100%;table-layout:fixed;font:400 14px var(--sans)}
.rel-table th,.rel-table td{padding:var(--rel-pad,7px) 12px;border-bottom:1px solid var(--line);text-align:left}
.rel-overview{--rel-pad:clamp(4px,calc((100vh - 730px) / 26),10px)}
.rel-table th:first-child{width:19%;padding-left:0;font-weight:500;color:var(--ink)}
.rel-table thead th{font-size:19px;padding-bottom:10px}
.rel-table thead th:first-child{font-size:15px;color:var(--mut)}
.rel-columns,.rel-cell{display:grid;grid-template-columns:1fr 104px;gap:14px;align-items:center}
.rel-columns{margin-top:8px;color:var(--mut);font:400 12.5px var(--num)}
.rel-columns>span,.rel-year-gains{display:flex;gap:5px}
.rel-columns i{font-style:normal;flex:1;text-align:center}
.rel-columns small{font:400 12px var(--sans);white-space:nowrap;text-align:right}
.rel-year-gains>span{position:relative;flex:1;min-width:0;text-align:center;padding:5px 0;border-radius:4px;font:600 14px/1.2 var(--num);cursor:default}
.rel-year-gains .gain{background:#DCEDE7;color:#15605B}.rel-year-gains .harm{background:#F1DFD3;color:#8E4029}.rel-year-gains .zero{background:#EAE7DF;color:#5F6875}
.rel-year-gains [data-tip]:is(:hover,:focus)::after{content:attr(data-tip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:6px 9px;background:var(--ink);color:white;white-space:nowrap;border-radius:4px;z-index:4;font:400 12px var(--num)}
.rel-harm{display:flex;gap:8px;align-items:center;font:500 13.5px var(--num);color:var(--ink)}
.rel-harm>i{flex:1;height:8px;background:#E7E2D8;border-radius:4px;overflow:hidden}.rel-harm b{display:block;height:100%;background:#B65F45}.rel-harm>span{width:38px;text-align:right}
.rel-overview .foot{font-size:11.5px;line-height:1.5;margin:12px 0 0;color:var(--mut)}
.rel-crop-label{display:none}
@media(max-width:1500px){.rel-table{font-size:13px}.rel-table thead th{font-size:17px}.rel-columns,.rel-cell{grid-template-columns:1fr 84px;gap:10px}.rel-year-gains>span{font-size:13px}.rel-harm{font-size:12.5px}.rel-table th,.rel-table td{padding-inline:8px}}
@media(max-width:1100px){.rel-table{font-size:11.5px}.rel-table thead th{font-size:15px}.rel-columns,.rel-cell{grid-template-columns:1fr 58px;gap:7px}.rel-columns,.rel-columns small{font-size:10px}.rel-year-gains>span{font-size:11px;padding:3px 0}.rel-harm{font-size:10.5px}.rel-harm>i{height:5px}.rel-harm>span{width:28px}.rel-table th,.rel-table td{padding-inline:6px}}
@media(max-width:700px){.rel-overview{padding:18px 14px}.rel-crop-label{display:flex;align-items:center;gap:8px;font-size:12px}.rel-crop-label select{padding:6px;border:1px solid var(--line);background:var(--paper);border-radius:6px;color:var(--ink)}.rel-title>span{margin:0;font-size:10px}.rel-table [data-crop]{display:none}.rel-overview[data-crop=corn] [data-crop=corn],.rel-overview[data-crop=soybean] [data-crop=soybean],.rel-overview[data-crop=wheat] [data-crop=wheat]{display:table-cell}.rel-table th:first-child{width:45%;font-size:10.5px}.rel-columns,.rel-cell{grid-template-columns:1fr 55px}.rel-table th,.rel-table td{padding-block:9px}.rel-table{font-size:10px}}
/* short desktop screens: the yearly table keeps one screen (13 rows) */
@media(min-width:761px) and (max-height:800px){
  .rel-switch{margin-bottom:6px}.rel-switch button{padding:6px 12px;font-size:12.5px}
  .rel-overview{padding:14px 24px 12px}.rel-title{margin-bottom:6px;font-size:15px}
  .rel-table th,.rel-table td{padding-block:3px}.rel-table{font-size:12.5px}
  .rel-table thead th{font-size:16px;padding-bottom:6px}.rel-columns{margin-top:4px;font-size:11px}.rel-columns small{font-size:11px}
  .rel-year-gains>span{padding:2px 0;font-size:12px}.rel-harm{font-size:12px}.rel-harm>i{height:6px}
  .rel-overview .foot{font-size:10.5px;line-height:1.4;margin-top:8px}
}