/* Tendencias page: solid-shadow cards, segmented range control, charts and tooltip.
   Chart colours validated (dataviz validator, dark, surface #0e1b27): diverging
   warm #e66767 / cool #3987e5; events #3987e5, #d95926, #199e70, #c98500, #d55181 in
   fixed order (all checks pass); the alarm lane uses the reserved status red. */
#trends{
  --chart-surface:var(--ocean-card);
  --warm:#e66767; --cool:#3987e5;
  --ev-1:#3987e5; --ev-2:#d95926; --ev-3:#199e70; --ev-4:#c98500; --ev-5:#d55181; --critical:#d03b3b;
  --cmp-a:#3987e5; --cmp-b:#d95926;
  --grid:#20303d; --axis:#3a4f60; --tick:#8fa1ae; --ink-2:#c3d3de;
  position:fixed;inset:calc(var(--tb-h) + env(safe-area-inset-top,0px)) 0 0 0;z-index:6;overflow-y:auto;
  background:var(--ocean-mid);color:var(--text-hi);
  padding:24px var(--gr) calc(28px + env(safe-area-inset-bottom,0px)) var(--gl)}
#trends{isolation:isolate}
#trbg{position:fixed;left:0;right:0;bottom:0;top:calc(var(--tb-h) + env(safe-area-inset-top,0px));width:100%;height:calc(100% - var(--tb-h) - env(safe-area-inset-top,0px));z-index:-1;display:block;pointer-events:none}
#trends > :not(#trbg){max-width:1280px;margin-left:auto;margin-right:auto}
.tr-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tr-head h1{margin:0;font:700 26px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.tr-status{min-height:1em;margin:10px auto 0;font:500 12px/1.3 var(--mono);color:var(--text-hi);opacity:.8}
.tr-status:empty{margin-top:0}

/* Segmented control: the light pill slides to the chosen range. */
.seg{position:relative;display:inline-flex;padding:4px;gap:2px;background:var(--ocean-card);border:var(--nb-border);
  border-radius:10px;box-shadow:var(--nb-shadow)}
.seg-pill{position:absolute;top:4px;bottom:4px;left:0;border-radius:7px;background:var(--accent);border:var(--nb-border);
  transition:transform .22s cubic-bezier(.3,.7,.2,1),width .22s}
.seg-opt{position:relative;z-index:1;font:700 13px/1 var(--display);letter-spacing:.05em;color:var(--text-hi);padding:9px 14px;border:0;border-radius:7px}
.seg-opt:hover{background:transparent;color:#fff}
.seg-opt[aria-checked="true"]{color:var(--ocean-deep)}

.tr-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seg.is-off .seg-pill{opacity:0}
.seg.is-off .seg-opt[aria-checked="true"]{color:var(--text-hi)}
.tgl{font:700 13px/1 var(--display);letter-spacing:.05em;color:var(--text-hi);background:var(--ocean-card);border:var(--nb-border);
  border-radius:10px;box-shadow:var(--nb-shadow);padding:13px 14px}
.tgl:hover{background:var(--ocean-card);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--nb-line)}
.tgl:active{transform:translate(3px,3px);box-shadow:none}
.tgl[aria-pressed="true"]{background:var(--accent);color:var(--ocean-deep);border-color:var(--nb-line)}
.tr-row{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:14px;padding:12px 14px;
  background:var(--ocean-card);border:var(--nb-border);border-radius:10px;box-shadow:var(--nb-shadow)}
.tr-row label{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--body);color:var(--text-hi)}
.tr-row input{font:500 13px/1 var(--mono);color:var(--text-hi);background:var(--ocean-deep);border:2px solid var(--nb-line);
  border-radius:7px;padding:8px 9px;color-scheme:dark}
.tr-row input:focus-visible{outline:2px solid var(--hazard);outline-offset:1px}
.tr-row .vs{font:800 16px/1 var(--display);letter-spacing:.08em;color:var(--accent)}
.charts{position:relative;display:flex;flex-direction:column;gap:22px;margin-top:20px;outline:none}
.charts:focus-visible{outline:2px solid var(--hazard);outline-offset:6px;border-radius:10px}
.card{background:var(--chart-surface);border:var(--nb-border);border-radius:10px;box-shadow:var(--nb-shadow-lg);padding:16px 16px 10px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.card h2{margin:0;font:700 18px/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.card-sub{margin:6px 0 8px;font:400 13px/1.4 var(--body);color:var(--ink-2)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 12px/1 var(--body);color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.lk{display:inline-block;width:14px;height:3px;border-radius:2px}
.lk.warm{background:var(--warm)} .lk.cool{background:var(--cool)}
.chart{width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.chart-svg{display:block;overflow:visible}

.chart-svg .grid{stroke:var(--grid);stroke-width:1}
.chart-svg .baseline{stroke:var(--axis);stroke-width:1}
.chart-svg .tick{fill:var(--tick);font:500 11px var(--mono);font-variant-numeric:tabular-nums}
.chart-svg .zero{stroke:#7d8d99;stroke-width:1.5}
.chart-svg .zero-label{fill:var(--ink-2);font:600 11px var(--mono);letter-spacing:.04em;paint-order:stroke;stroke:var(--chart-surface);stroke-width:4px;stroke-linejoin:round}
.dev-warm{--c:var(--warm)} .dev-cool{--c:var(--cool)}
.dev-area{fill:var(--c);opacity:.2}
.dev-line{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lane-key{stroke:var(--c);stroke-width:3;stroke-linecap:round}
.lane-title{fill:var(--text-hi);font:600 12px var(--body)}
.lane-base{stroke:var(--grid)}
.lane-fill{fill:var(--c);opacity:.18}
.lane-step{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round}
.hair{stroke:var(--text-hi);stroke-width:1;opacity:.55}
.hair-dot{fill:var(--chart-surface);stroke-width:2.5}
.hair-dot.warm{stroke:var(--warm)} .hair-dot.cool{stroke:var(--cool)}

/* Tooltip: value leads, label follows; keyed by short line strokes. */
.ttip{position:absolute;z-index:3;min-width:210px;pointer-events:none;background:var(--ocean-deep);color:var(--text-hi);
  border:var(--nb-border);border-radius:8px;box-shadow:var(--nb-shadow);padding:10px 12px;font:500 12px/1.2 var(--body)}
.tt-head{display:flex;align-items:center;gap:6px;font:600 12px/1 var(--mono);letter-spacing:.03em;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--axis)}
.tt-row + .tt-head{margin-top:10px}
.tt-row{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:8px;padding:3px 0}
.tt-key{width:12px;height:3px;border-radius:2px}
.tt-label{color:var(--ink-2)}
.tt-row b{font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.tt-row.strong b{font-size:14px}
.tt-row.off b{color:var(--tick)}

@media (max-width:720px){
  #trends{padding-top:18px}
  .tr-head h1{font-size:22px}
  .seg-opt{padding:8px 8px;font-size:12px}
  .tgl{padding:11px 10px;font-size:12px}
  .tr-row input{max-width:100%}
  .card{padding:12px 10px 6px}
}
@media (prefers-reduced-motion:reduce){.seg-pill{transition:none}}