/* Illustrated wind-speed / rotor-size graph. Scoped to the new widget. */
.power-graph-section{padding:88px 0 104px;background:#0a1b27;color:#eef5f4;scroll-margin-top:25px}
.power-graph-section .section-index{color:#b5a0ef}
.power-graph-section h2{max-width:1000px;margin:12px 0 16px;font-size:clamp(2.2rem,4.4vw,4.4rem);line-height:1.19}
.power-graph-section .graph-intro{max-width:850px;color:#bcd0d0;font-size:1.06rem;line-height:1.83;margin:0 0 34px}
.graph-layout{display:grid;grid-template-columns:minmax(270px,.65fr) minmax(0,1.35fr);gap:16px;align-items:stretch}
.graph-controls,.graph-monitor{min-width:0;border:1px solid #445d6a;background:linear-gradient(150deg,#152a40,#0a1d2b);box-shadow:0 18px 48px rgba(0,0,0,.16)}
.graph-controls{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:26px}
.graph-label{display:block;color:#f1f7f0;font-size:1.05rem;font-weight:780;margin-bottom:9px}
.graph-control-value{color:#b6e9a7;font-weight:800;font-size:clamp(2rem,3.5vw,3rem);font-variant-numeric:tabular-nums;letter-spacing:-.055em;display:block;margin:0 0 16px}
.graph-controls input[type=range]{width:100%;margin:13px 0 11px;accent-color:#c6ef84;cursor:pointer;min-height:30px}
.graph-controls input[type=range]:focus-visible,.graph-controls button:focus-visible,.graph-play:focus-visible{outline:3px solid #a8e9fb;outline-offset:4px}
.graph-range-ends{display:flex;justify-content:space-between;color:#acc7c5;font-size:.85rem}
.graph-control-help{font-size:.87rem;color:#a8c4bc;line-height:1.68;margin:11px 0 0}
.graph-size-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.graph-size-options button{font:inherit;cursor:pointer;min-height:56px;padding:10px 14px;border:1px solid #627d87;background:#183243;color:#e3eded;font-size:1rem;font-weight:770}
.graph-size-options button[aria-pressed=true]{background:#c9ed79;color:#112828;border-color:#c9ed79}
.graph-controls .graph-control-note{padding:16px 18px;border-left:3px solid #ad9bda;background:#213145;color:#d3d8ed;font-size:.92rem;line-height:1.68;margin:auto 0 0}
.graph-monitor{padding:clamp(19px,2.8vw,31px);border-color:#7873aa;background:radial-gradient(ellipse at 85% 0%,rgba(123,65,190,.17),transparent 47%),#0a1d30}
.graph-topline{display:flex;justify-content:space-between;align-items:center;gap:10px 20px;flex-wrap:wrap;margin-bottom:18px}
.graph-topline strong{font-size:1.05rem;letter-spacing:.015em}
.graph-live{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;font-size:.8rem;color:#d8d0f2;letter-spacing:.06em}
.graph-live::before{content:"";width:9px;height:9px;border-radius:50%;background:#b6ec78;box-shadow:0 0 12px #b6ec78}
.graph-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:21px}
.graph-metric{border:1px solid #34586b;background:rgba(18,48,70,.88);padding:13px 12px 14px;min-width:0}
.graph-metric small{display:block;font-size:.79rem;color:#b2cbd3;margin-bottom:9px}
.graph-metric strong{display:block;font-variant-numeric:tabular-nums;font-size:clamp(1.15rem,2.05vw,1.95rem);line-height:1.18;letter-spacing:-.045em;white-space:nowrap;color:#d4f5a7}
.graph-metric:first-child strong{color:#8de5fb}
.graph-plot-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 11px}
.graph-plot-head strong{font-size:.97rem}
.graph-legend{display:flex;gap:14px;flex-wrap:wrap;color:#cedadd;font-size:.8rem}
.graph-legend span{display:inline-flex;gap:7px;align-items:center}
.graph-legend i{width:17px;height:3px;display:inline-block;background:#7cdafb}
.graph-legend .power-key{background:#ffc078}
.graph-scroll{overflow-x:auto;max-width:100%;scrollbar-color:#627a8f #132b3d;border:1px solid #355167;background:linear-gradient(180deg,#112c43,#0a2034)}
.graph-scroll svg{display:block;width:100%;min-width:620px;height:auto}
.graph-grid line{stroke:#345875;stroke-width:1}
.graph-axis{fill:#c0d0dd;font:14px system-ui,sans-serif}
.graph-tick{fill:#a9c0d0;font:13px system-ui,sans-serif}
.graph-wind-line,.graph-power-line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.graph-wind-line{stroke:#7cdafb;filter:drop-shadow(0 0 5px rgba(107,215,255,.45))}
.graph-power-line{stroke:#ffc078;filter:drop-shadow(0 0 5px rgba(255,188,97,.45))}
.graph-wind-dot{fill:#7cdafb;stroke:#103044;stroke-width:2}
.graph-power-dot{fill:#ffc078;stroke:#103044;stroke-width:2}
.graph-signal{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;align-items:center;margin:17px 0 14px;color:#c3d4d6;font-size:.86rem}
.graph-signal strong{color:#d7f49b;font-variant-numeric:tabular-nums}
.graph-progress{height:12px;border:1px solid #547467;background:#1a343e;overflow:hidden}
.graph-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#68caba,#c9ed79);transition:width .2s ease}
.graph-status{color:#b8d1bf;font-size:.86rem;min-height:1.6em;line-height:1.6;margin:10px 0 0}
.graph-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px;margin-top:24px}
.graph-compare h3{font-size:1.05rem;margin:0 0 11px}
.graph-compare ul{padding:0;margin:0;list-style:none;display:grid;gap:9px}
.graph-compare li{display:grid;grid-template-columns:52px minmax(0,1fr) 70px;align-items:center;gap:10px;font-size:.83rem;color:#d6e8df;font-variant-numeric:tabular-nums}
.graph-compare li[data-active=true]{color:#d5f7a0;font-weight:800}
.graph-compare .track{height:8px;background:#294453;overflow:hidden}
.graph-compare .track i{display:block;width:0;height:100%;background:#9beab8;transition:width .25s}
.graph-compare li[data-active=true] .track i{background:#d0ef87}
.graph-compare output{text-align:right}
.graph-play{cursor:pointer;min-height:48px;border:1px solid #b9c4e9;background:#192d4a;color:#f1eeff;font:inherit;font-size:.91rem;font-weight:750;padding:10px 17px;white-space:nowrap}
.graph-play:hover{background:#2a4160}
.graph-disclaimer{max-width:1100px;margin:24px 0 0;color:#b7cbca;font-size:.92rem;line-height:1.85}
.graph-disclaimer a{color:#d0f5ad;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1040px){.graph-layout{grid-template-columns:1fr}.graph-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.graph-controls .graph-control-note{grid-column:1/-1}}
@media(max-width:700px){.power-graph-section{padding:65px 0 76px}.graph-controls{display:flex}.graph-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.graph-metric strong{font-size:1.5rem}.graph-bottom{grid-template-columns:1fr}.graph-play{justify-self:start}.graph-scroll svg{min-width:600px}}
@media(prefers-reduced-motion:reduce){.graph-progress span,.graph-compare .track i{transition:none}}