/* Independent history chart: no daily form or calendar layout. */
.tl-chart{padding:25px;min-width:0;margin-block:18px;--tl-low:#55b990;--tl-high:#19564a}
.tl-chart-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.tl-chart-top .eyebrow{margin-bottom:7px}
.tl-chart-top h2{font-size:25px;margin:0}
.tl-chart-add{font-size:13px;min-height:44px;max-width:240px}
.tl-chart-periods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:5px;background:var(--soft);border-radius:15px;max-width:460px;margin:0 auto 17px}
.tl-chart-periods button{min-height:44px;padding:10px;font-size:15px}
.tl-chart-periods .is-selected{background:var(--green);color:var(--card);box-shadow:var(--shadow)}
.tl-chart-period-heading{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;text-align:center}
.tl-chart-period-heading strong{display:block;font-size:17px;line-height:1.4}
.tl-chart-period-heading span{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.tl-chart-arrow{height:44px;padding:0;border:1px solid var(--line);font-size:28px;font-weight:400}
.tl-chart button:disabled{cursor:default;opacity:.35}
.tl-chart-current{text-align:center;margin-top:7px}
.tl-chart-current button{min-height:40px}
.tl-chart-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}
.tl-chart-stat{display:flex;flex-direction:column;min-width:0;text-align:left;padding:17px 20px;border:1px solid var(--line);border-bottom-width:3px;background:var(--card);font-weight:400;transition:background .15s,border-color .15s}
.tl-chart-stat.is-selected{border-color:var(--green);background:var(--soft)}
.tl-chart-stat-label{width:100%;display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:14px;font-weight:650}
.tl-chart-stat-label>span{color:var(--muted)}
.tl-chart-stat strong{display:block;font-size:clamp(26px,4vw,38px);line-height:1.25;font-weight:750;letter-spacing:-.04em;overflow-wrap:anywhere;max-width:100%;font-variant-numeric:tabular-nums;margin:7px 0 3px}
.tl-chart-stat>span:not(.tl-chart-stat-label){font-size:12px;color:var(--muted)}
.tl-chart-stat>small{display:block;font-size:12px;line-height:1.45;margin-top:11px}
.tl-chart-caption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px;font-size:13px;font-weight:650}
.tl-chart-caption small{font-size:12px;font-weight:400;text-align:right}
.tl-chart-canvas{position:relative;min-width:0}
.tl-chart-canvas svg{display:block;width:100%;height:auto;overflow:visible;animation:tl-chart-appear .2s ease-out}
.tl-chart-canvas text{font:12px Inter,ui-sans-serif,system-ui,sans-serif;fill:var(--muted)}
.tl-chart-gridline{stroke:var(--line);stroke-width:1}
.tl-chart-stop-band{fill:var(--tl-low);fill-opacity:.12}
.tl-chart-transition line{stroke:var(--muted);stroke-opacity:.45;stroke-width:1;stroke-dasharray:2 5}
.tl-chart-transition path{fill:var(--muted)}
.tl-chart-line,.tl-chart-line-outline{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.tl-chart-line-outline{stroke:var(--text);stroke-width:4.5;opacity:.33}
.tl-chart-line.is-estimate,.tl-chart-line-outline.is-estimate{stroke-dasharray:5 4}
.tl-chart-point{cursor:pointer;outline:none}
.tl-chart-hit{fill:transparent}
.tl-chart-point:focus-visible .tl-chart-hit{stroke:var(--text);stroke-width:2;stroke-dasharray:3 2}
.tl-chart-dot{stroke-width:2;paint-order:stroke fill;filter:drop-shadow(0 0 .5px var(--text))}
.tl-chart-dot.is-incomplete{stroke-dasharray:2 2;stroke-width:2.5}
.tl-chart-empty{position:absolute;inset:12% 3% 14% 12%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border-radius:15px;background:var(--card);padding:15px}
.tl-chart-empty strong{font-size:18px;line-height:1.35}
.tl-chart-empty p{font-size:13px;color:var(--muted);margin:0 0 2px}
.tl-chart-empty button{min-height:44px;font-size:13px}
.tl-chart-legend{display:flex;flex-wrap:wrap;justify-content:center;column-gap:18px;row-gap:6px;margin:0 0 15px;color:var(--muted);font-size:12px}
.tl-chart-legend>span{display:inline-flex;align-items:center;gap:6px}
.tl-chart-sample{display:inline-block;width:23px;height:0;border-top:2px solid var(--green)}
.tl-chart-sample.is-estimate{border-top-style:dashed}
.tl-chart-recorded-sample{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 1px var(--card),0 0 0 2px var(--green);margin-inline:5px}
.tl-chart-band-sample{display:inline-block;width:18px;height:12px;background:#55b99026;border:1px solid #55b99070;border-radius:2px}
.tl-chart-readout{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:85px;border-radius:14px;background:var(--bg);padding:13px 16px}
.tl-chart-readout>div:first-child{min-width:0}
.tl-chart-readout strong,.tl-chart-readout span,.tl-chart-readout small{display:block;overflow-wrap:anywhere}
.tl-chart-readout strong{font-size:13px;margin-bottom:3px}
.tl-chart-readout span{font-size:16px;font-weight:650;font-variant-numeric:tabular-nums}
.tl-chart-readout small{font-size:12px;line-height:1.4;margin-top:3px}
.tl-chart-edit-point{font-size:12px;min-height:44px;padding:8px 0;margin-top:2px;text-align:left}
.tl-chart-point-nav{display:flex;gap:5px;flex-shrink:0}
.tl-chart-point-nav button{height:40px;width:40px;padding:0;border:1px solid var(--line);font-size:24px;font-weight:400;background:var(--card)}
.tl-chart-colour-key{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;color:var(--muted);margin:12px 0 18px}
.tl-chart-colour-key i{height:6px;width:100px;border-radius:8px;background:linear-gradient(90deg,#55b990,#19564a);box-shadow:0 0 0 1px var(--line)}
.tl-chart-savings{border-top:1px solid var(--line);padding:17px 0 2px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline}
.tl-chart-savings>span{font-size:14px}
.tl-chart-savings strong{font-size:24px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right;max-width:100%}
.tl-chart-savings small{grid-column:1/-1;font-size:12px}
.tl-chart-events{margin:21px 0 9px}
.tl-chart-events-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.tl-chart-events h3{font-size:14px;letter-spacing:normal;margin:0}
.tl-chart-events-heading .text{min-height:40px;flex-shrink:0}
.tl-chart-events ol{list-style:none;margin:0;padding:0 0 0 10px}
.tl-chart-events li{position:relative;margin:0;border-left:2px solid var(--line);padding-left:15px}
.tl-chart-events li:before{content:'';position:absolute;left:-5px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--card)}
.tl-chart-events li.is-stop:before{background:var(--tl-low);outline:1px solid var(--green)}
.tl-chart-events li:last-child{border-left-color:transparent}
.tl-chart-events li button{display:flex;width:100%;align-items:baseline;gap:17px;padding:11px 0;border-radius:5px;min-height:44px;text-align:left}
.tl-chart-events time{font-size:12px;color:var(--muted);font-weight:400;min-width:120px;overflow-wrap:anywhere}
.tl-chart-events li span{font-size:13px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.tl-chart-help{margin-top:17px;border-top:1px solid var(--line)}
.tl-chart-help summary{min-height:46px;padding:13px 0;font-size:13px;font-weight:600;cursor:pointer}
.tl-chart-help p{font-size:13px;color:var(--muted);line-height:1.6;margin:8px 0 12px}
.tl-chart-help button{font-size:13px;min-height:44px}
.tl-chart-error{padding:12px;border:1px solid var(--warn);border-radius:12px;color:var(--warn);font-size:13px;margin-top:12px}
@keyframes tl-chart-appear{from{opacity:.5}to{opacity:1}}
@media(max-width:700px){
  .tl-chart{padding:18px 14px}
  .tl-chart-top{align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:18px}
  .tl-chart-top h2{font-size:24px}
  .tl-chart-add{max-width:none;align-self:stretch;text-align:center}
  .tl-chart-period-heading{grid-template-columns:44px minmax(0,1fr) 44px;gap:6px}
  .tl-chart-period-heading strong{font-size:14px}
  .tl-chart-period-heading span{font-size:11px}
  .tl-chart-arrow{height:44px}
  .tl-chart-stats{gap:8px;margin:18px 0}
  .tl-chart-stat{padding:13px 10px}
  .tl-chart-stat-label{font-size:13px}
  .tl-chart-stat strong{font-size:27px}
  .tl-chart-stat>small{font-size:11px}
  .tl-chart-caption{gap:8px;font-size:12px}
  .tl-chart-caption small{font-size:11px;max-width:48%}
  .tl-chart-canvas text{font-size:11px}
  .tl-chart-legend{column-gap:11px;font-size:11px}
  .tl-chart-readout{padding:11px;gap:8px}
  .tl-chart-readout span{font-size:14px}
  .tl-chart-readout small{font-size:11px}
  .tl-chart-point-nav{flex-direction:column;gap:3px}
  .tl-chart-point-nav button{width:44px;height:44px;font-size:23px}
  .tl-chart-events li button{flex-direction:column;gap:2px}
  .tl-chart-events time{min-width:0}
  .tl-chart-savings{grid-template-columns:1fr;gap:3px}
  .tl-chart-savings strong{text-align:left;font-size:25px}
  .tl-chart-empty{padding:10px;inset:9% 0 14% 10%}
  .tl-chart-empty strong{font-size:16px}
  .tl-chart-empty p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.tl-chart *{animation:none!important;transition:none!important}}