/* site/assets/css/calc.css —— 光储互动建模：布局 + 等轴测场景 [R3a]；场景、24 小时柱与小时拖杆三者固定 direction:ltr（时间轴从左到右，与 SVG 坐标一致），自用率拖杆随页面方向 */
.calc{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-5);align-items:start}
figure.modeler{direction:ltr;position:relative;aspect-ratio:16/10;max-height:60vh;margin:0;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;background:var(--sky)}
.modeler-labels{position:absolute;inset:0;unicode-bidi:plaintext;pointer-events:none;font-size:var(--fs-0);font-weight:600;color:var(--navy)}
.modeler-labels>*{unicode-bidi:plaintext;position:absolute;transform:translate(-50%,-100%);padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.hourctl{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3)}
.hourctl input[type=range]{direction:ltr;flex:1;accent-color:var(--gold-2);min-width:0}
.hourctl button{flex:none;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-1);background:#fff;color:var(--navy);font:inherit;font-size:var(--fs-0);font-weight:600;cursor:pointer}
.hourctl button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.hourbar{direction:ltr;display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:56px;margin-top:var(--sp-2);align-items:end}
.hourbar i{display:flex;align-items:flex-end;gap:1px;height:100%;padding:0 1px;border-radius:2px}
.hourbar i::before,.hourbar i::after{content:"";flex:1;min-height:1px;border-radius:1px 1px 0 0}
.hourbar i::before{height:calc(var(--pv,0)*100%);background:var(--gold)}
.hourbar i::after{height:calc(var(--load,0)*100%);background:var(--mist);opacity:.7}
.hourbar i.on{background:var(--sky);box-shadow:0 0 0 1px var(--navy)}
@media(max-width:900px){
.calc{grid-template-columns:minmax(0,1fr)}
figure.modeler{max-height:none}
.calcout{position:static}
.calcbar{display:flex;position:sticky;bottom:0;z-index:20;align-items:center;gap:var(--sp-3);margin:0 calc(var(--sp-4)*-1);padding-block:10px;padding-inline:var(--sp-4) 72px;background:var(--navy);color:#fff}
}
.modeler-svg{display:block;width:100%;height:100%;--soc:.6;--ln:#2B3036;--wall:#E7E7E5;--wall2:#CBCED2;--roof:#F9F9F8;--floor:#E2E3E3;--floor2:#C3C7CB;--f3:#B0B5BB;--room:#FAFAF9;--room2:#E6E6E4;--rfl:#D4D6D8;--app:#fff;--app2:#ECECEA;--app3:#CFD2D5;--pv:#283442;--pvc:#6E7F93;--sk:#1B1E22;--lit:#E0A458;--dim:#B9BDC2;--fl:#9E643B}
.modeler-svg:has(#sky[data-night="1"]){--ln:#8A939E;--wall:#2E3339;--wall2:#24282D;--roof:#383D44;--floor:#33383F;--floor2:#272B30;--f3:#1E2125;--room:#3B4048;--room2:#33373E;--rfl:#2C3036;--app:#9AA0A7;--app2:#858B93;--app3:#70767E;--pv:#1A2430;--pvc:#4A5A6C;--dim:#555B63;--fl:#C98E60}
#sky{fill:url(#g-day)}#sky[data-night="1"]{fill:url(#g-night)}
.modeler-svg :is(path,rect,circle,ellipse){fill:none;stroke:var(--ln);stroke-width:1;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
#world .n{stroke:none}
#world .a{fill:var(--wall)}#world .b{fill:var(--wall2)}#world .c{fill:var(--roof)}
#world .f{fill:var(--floor)}#world .d{fill:var(--floor2)}#world .d2{fill:var(--f3)}
#world .e{fill:var(--room)}#world .e2{fill:var(--room2)}#world .g{fill:var(--rfl)}
#world .h{fill:var(--app)}#world .i{fill:var(--app2)}#world .j{fill:var(--app3)}
#world .k{fill:#2A2E34}#world .l{fill:#3E434A}#world .m{fill:#1B1E22}
#world .o,#sun .so{fill:var(--lit)}#sun .so{stroke:#B5774A}
#world .p{fill:#1B1E22;fill-opacity:.12;stroke:none}
#world .sk{fill:var(--sk);fill-opacity:.07}
#world .r,#sun .r,#world .r2,#world .hl,#world .rb{stroke-opacity:.38}
#world .pl{stroke-width:5}#world .pl2{stroke-width:3}#world .wire{stroke-opacity:.6}
#world .fr{stroke-width:1.6}
#world .gl2{fill:#fff;fill-opacity:.55}#world .gl{fill:#fff;fill-opacity:.7}
#world .trk{fill:#141619}#soc{fill:var(--lit);stroke:none;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--soc));transition:transform .4s}
#world .led{fill:var(--lit);stroke:none}
#inverter[data-leds="1"] :is(#led-2,#led-3,#led-4),#inverter[data-leds="2"] :is(#led-3,#led-4),#inverter[data-leds="3"] #led-4{fill:var(--dim)}
#storage:not([data-size="s"]) .sz-s,#storage:not([data-size="m"]) .sz-m,#storage:not([data-size="l"]) .sz-l{display:none}
#world .rb{stroke-width:.8}#world .rp{stroke-width:1.6}#world .rt{stroke-width:2.2}
#world .shade{fill:var(--app)}
#world .glow{opacity:0;fill:url(#g-glow);stroke:none}#sun .hz{fill:url(#g-sun);stroke:none}
#app-lamp:is([data-on="1"],[data-on="true"],[data-on=""]) .shade{fill:var(--lit)}
#app-lamp:is([data-on="1"],[data-on="true"],[data-on=""]) .glow{opacity:1}
.panel{transform-box:view-box;transform-origin:0 0}
#world .pf{fill:var(--pv)}#world .pc{stroke:var(--pvc);stroke-width:.6;stroke-opacity:.75}#world .ps{fill:#fff;fill-opacity:.09;stroke:none}
#panels[data-mount^="railing"]~#railing-over{display:none}
#sun{transition:transform .4s,opacity .4s}
#sky[data-night="1"]~#sun{opacity:0}
#world .flow{stroke:var(--fl,#B5774A);stroke-width:2.6;fill:none}
.flow{stroke-dasharray:6 10;--dur:1.2s;animation:dash var(--dur) linear infinite}
.flow[data-rate="1"]{--dur:2.4s}.flow[data-rate="2"]{--dur:1.2s}.flow[data-rate="3"]{--dur:.6s}
.flow[data-rate="0"],.flow[data-dir="off"]{animation:none;opacity:.25}
.flow[data-dir="rev"]{animation-direction:reverse}
@keyframes dash{to{stroke-dashoffset:-16}}
@media (prefers-reduced-motion:reduce){.flow,#sun,#soc{animation:none;transition:none}}
[data-mount="railing-south"] #panel-1{transform:matrix(.87,.5,0,1,280,300)}
[data-mount="railing-south"] #panel-2{transform:matrix(.87,.5,0,1,313,319)}
[data-mount="railing-south"] #panel-3{transform:matrix(.87,.5,0,1,347,338)}
[data-mount="railing-south"] #panel-4{transform:matrix(.87,.5,0,1,381,358)}
[data-mount="railing-south"] #panel-5{transform:matrix(.87,.5,0,1,415,378)}
[data-mount="railing-south"] #panel-6{transform:matrix(.87,.5,0,1,448,397)}
[data-mount="railing-south"] #panel-7{transform:matrix(.87,.5,0,1,482,416)}
[data-mount="railing-south"] #panel-8{transform:matrix(.87,.5,0,1,516,436)}
[data-mount="railing-eastwest"] #panel-1{transform:matrix(.36,.68,0,1,382,352)}
[data-mount="railing-eastwest"] #panel-2{transform:matrix(1.17,.21,0,1,410,383)}
[data-mount="railing-eastwest"] #panel-3{transform:matrix(.36,.68,0,1,347,332)}
[data-mount="railing-eastwest"] #panel-4{transform:matrix(1.17,.21,0,1,444,403)}
[data-mount="railing-eastwest"] #panel-5{transform:matrix(.36,.68,0,1,313,312)}
[data-mount="railing-eastwest"] #panel-6{transform:matrix(1.17,.21,0,1,479,423)}
[data-mount="railing-eastwest"] #panel-7{transform:matrix(.36,.68,0,1,278,292)}
[data-mount="railing-eastwest"] #panel-8{transform:matrix(1.17,.21,0,1,513,443)}
[data-mount="tilt-south"] #panel-1{transform:matrix(.87,.5,-.71,.98,343,307)}
[data-mount="tilt-south"] #panel-2{transform:matrix(.87,.5,-.71,.98,377,327)}
[data-mount="tilt-south"] #panel-3{transform:matrix(.87,.5,-.71,.98,411,346)}
[data-mount="tilt-south"] #panel-4{transform:matrix(.87,.5,-.71,.98,445,366)}
[data-mount="tilt-south"] #panel-5{transform:matrix(.87,.5,-.71,.98,478,385)}
[data-mount="tilt-south"] #panel-6{transform:matrix(.87,.5,-.71,.98,512,405)}
[data-mount="tilt-south"] #panel-7{transform:matrix(.87,.5,-.71,.98,546,424)}
[data-mount="tilt-south"] #panel-8{transform:matrix(.87,.5,-.71,.98,580,444)}
[data-mount="tilt-eastwest"] #panel-1{transform:matrix(.85,.32,-.87,.5,452,387)}
[data-mount="tilt-eastwest"] #panel-2{transform:matrix(.85,.67,-.87,.5,494,405)}
[data-mount="tilt-eastwest"] #panel-3{transform:matrix(.85,.32,-.87,.5,418,367)}
[data-mount="tilt-eastwest"] #panel-4{transform:matrix(.85,.67,-.87,.5,528,425)}
[data-mount="tilt-eastwest"] #panel-5{transform:matrix(.85,.32,-.87,.5,383,347)}
[data-mount="tilt-eastwest"] #panel-6{transform:matrix(.85,.67,-.87,.5,563,445)}
[data-mount="tilt-eastwest"] #panel-7{transform:matrix(.85,.32,-.87,.5,348,327)}
[data-mount="tilt-eastwest"] #panel-8{transform:matrix(.85,.67,-.87,.5,598,465)}
[data-mount="flat"] #panel-1{transform:matrix(-.87,.5,-.87,-.5,405,375)}
[data-mount="flat"] #panel-2{transform:matrix(-.87,.5,-.87,-.5,372,394)}
[data-mount="flat"] #panel-3{transform:matrix(-.87,.5,-.87,-.5,464,409)}
[data-mount="flat"] #panel-4{transform:matrix(-.87,.5,-.87,-.5,431,428)}
[data-mount="flat"] #panel-5{transform:matrix(-.87,.5,-.87,-.5,523,443)}
[data-mount="flat"] #panel-6{transform:matrix(-.87,.5,-.87,-.5,490,462)}
[data-mount="flat"] #panel-7{transform:matrix(-.87,.5,-.87,-.5,582,477)}
[data-mount="flat"] #panel-8{transform:matrix(-.87,.5,-.87,-.5,549,496)}
/* 计算器页面（T4）：左列容器、自用估算、典型一天、推荐 */
.calcmain{min-width:0}.calcmain .calcform{margin-top:var(--sp-4)}
.hourctl label{flex:none;font-size:var(--fs-0);font-weight:600;color:var(--navy)}
.selfauto{font-size:var(--fs-0);color:var(--mist);margin:-4px 0 var(--sp-3)}.selfauto [data-self-auto]{color:var(--navy);font-weight:700}
.selfauto button{margin-inline-start:6px;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font:inherit;font-weight:600;cursor:pointer}
.calcout h3{margin:0 0 6px;color:#A9AFB6;font-size:var(--fs-0);text-transform:uppercase;letter-spacing:.08em}
.calcday dl{grid-template-columns:repeat(3,1fr)}.calcday dd{font-size:var(--fs-2)}
.calcrec ul{list-style:none;margin:0 0 var(--sp-3);padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.calcrec a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}.calcrec small{color:#A9AFB6}
.calcmethod{margin-top:var(--sp-2);font-size:var(--fs-0);color:var(--mist)}.calcmethod summary{cursor:pointer;color:var(--navy);font-weight:600}
@media(min-width:901px){.calcbar{display:none}}.calcbar span{flex:1;min-width:0;font-size:var(--fs-0);color:#A9AFB6;line-height:1.2}.calcbar b{display:block;color:var(--gold);font-size:var(--fs-4)}.calcbar .btn{flex:none;padding:10px 14px;font-size:var(--fs-0);white-space:normal;hyphens:manual;text-align:center;max-width:52%}