/* Site 2 (Wattcellar). Almanac day-band system: one twilight ramp, sun orange for solar only, loss red for "runs out". */
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/publicsans-latin-var.woff2) format("woff2")}
:root{
  --n0:#0f1a33;--n1:#263a66;--n2:#4a6396;--n3:#a8b9d8;--n4:#e2e8f3;--n5:#f6f8fb;--paper:#fff;
  --sun:#e8590c;--loss:#b42318;
  --f:"Public Sans",ui-sans-serif,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;
  --rule:1px solid var(--n3);--rule-ink:1px solid var(--n0);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--n2) var(--n4)}
body{margin:0;background:var(--n5);color:var(--n0);font:400 1.0625rem/1.55 var(--f);font-variant-numeric:tabular-nums lining-nums;text-rendering:optimizeLegibility}
::selection{background:var(--n1);color:var(--paper)}
a{color:var(--n1);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--n0);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--n0);outline-offset:2px;box-shadow:0 0 0 5px var(--paper)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--s5)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--n0);color:var(--paper);padding:var(--s2) var(--s4);z-index:9}
.skip:focus{left:var(--s4)}
h1,h2,h3{line-height:1.15;margin:0 0 var(--s3);font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem);max-width:22ch}
h2{font-size:1.375rem}
h3{font-size:1.0625rem}
p{margin:0 0 var(--s3);max-width:68ch}
small{display:block;font-size:.8125rem;line-height:1.4;color:var(--n2);font-weight:400}

/* preview + header */
.preview{background:var(--n1);color:var(--paper);font-size:.875rem}
.skip:hover{color:var(--paper)}
.preview p{margin:0;padding:var(--s2) 0;max-width:none}
.top{background:var(--paper);border-bottom:var(--rule-ink)}
.top .wrap{display:flex;align-items:center;gap:var(--s5);min-height:60px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:var(--s2);color:var(--n0);text-decoration:none;font-weight:800;font-size:1.1875rem;letter-spacing:-.02em}
.mark svg{width:28px;height:28px;fill:none;stroke:var(--n0);stroke-width:2;stroke-linecap:square}
.tabs ul{display:flex;list-style:none;margin:0;padding:0;gap:0}
.tabs a{display:block;padding:var(--s2) var(--s3);color:var(--n1);text-decoration:none;font-weight:600;font-size:.9375rem;border:1px solid transparent}
.tabs a:hover{color:var(--n0);border-color:var(--n3)}
.tabs a[aria-current],.tabs a[aria-current]:hover{background:var(--n0);color:var(--paper);border-color:var(--n0)}
.where{margin-left:auto;display:flex;align-items:center;gap:var(--s2);font-size:.875rem;color:var(--n1)}
select,input{font:inherit;color:var(--n0);background:var(--paper);border:1px solid var(--n2);border-radius:0;min-height:40px}
select{padding:0 var(--s5) 0 var(--s2);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--n1) 50%),linear-gradient(135deg,var(--n1) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat;max-width:100%}
input[type=number],input[type=time]{padding:0 var(--s2);width:100%;text-align:right}
input[type=time]{text-align:left}
input:hover,select:hover{border-color:var(--n0)}
input.pre{border:2px solid var(--n0)}

/* page head */
.head{padding:var(--s7) 0 var(--s5);border-bottom:var(--rule);margin-bottom:var(--s6)}
.lede{font-size:1.1875rem;line-height:1.5;color:var(--n1);max-width:60ch}
.stamp{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin-top:var(--s4);font-size:.875rem;color:var(--n1)}
.stamp p{margin:0}.stamp b{font-weight:650;color:var(--n0);margin-right:.4em}

/* tool layout */
.tool{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:start;margin-bottom:var(--s8)}
.spec fieldset{border:0;border-top:var(--rule-ink);margin:0 0 var(--s5);padding:var(--s3) 0 0}
.spec legend{font-weight:700;font-size:1.0625rem;padding:0 var(--s2) 0 0}
.row{display:grid;grid-template-columns:minmax(0,1fr) 9.5rem;gap:var(--s3);align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--n4)}
.row label{font-weight:550}
.inp{display:flex;align-items:center;gap:var(--s1)}
.u{font-size:.875rem;color:var(--n2);min-width:2.2em}
.field{display:grid;gap:var(--s1);padding:var(--s2) 0}
.field label{font-weight:550}
.field select{width:100%}
em.ex{font-style:normal;font-size:.75rem;font-weight:600;color:var(--n1);border-bottom:1px dotted var(--n2);margin-left:.35em}
em.med{font-style:normal;font-size:.75rem;font-weight:650;color:var(--loss);margin-left:.35em}
.note{font-size:.875rem;color:var(--n1)}

/* load list */
.loads{list-style:none;margin:0;padding:0;counter-reset:ld}
.load{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 40px;gap:var(--s2);align-items:end;padding:var(--s3) 0;border-bottom:1px solid var(--n4)}
.loads.hrs .load{grid-template-columns:repeat(3,minmax(0,1fr)) 40px}
.load .w-app{grid-column:1/-1}
.load label{display:block;font-size:.75rem;font-weight:600;color:var(--n1);margin-bottom:2px}
.load select{width:100%}
.load .src{grid-column:1/-1;font-size:.8125rem;line-height:1.4;color:var(--n2);margin:0}
.load .src a{color:var(--n2)}
.btn{font:inherit;font-weight:650;font-size:.9375rem;min-height:40px;padding:0 var(--s4);background:var(--paper);color:var(--n0);border:1px solid var(--n0);border-radius:0;cursor:pointer}
.btn:hover{background:var(--n0);color:var(--paper)}
.rm{width:40px;padding:0;font-size:1.25rem;line-height:1;border-color:var(--n3);color:var(--n1)}
.adds{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}

/* answer */
.answer{position:sticky;top:var(--s4)}
.fig{font-size:clamp(3.6rem,2rem + 6vw,7rem);font-weight:800;line-height:.95;letter-spacing:-.045em;margin:0}
.fig .unit{font-size:clamp(1.3rem,.75rem + 2.1vw,2.5rem);font-weight:650;letter-spacing:-.01em;margin-left:.08em;color:var(--n1)}
.fig.bad{color:var(--loss)}
.say{font-size:1.25rem;line-height:1.45;margin:var(--s3) 0 var(--s5);max-width:40ch;font-weight:500}
.say b{font-weight:700}
.band{margin:0 0 var(--s2)}
.band svg{display:block;width:100%;height:auto;overflow:visible}
.band .t{font:500 12px var(--f);fill:var(--n1);font-variant-numeric:tabular-nums}
.band .tb{font:700 12.5px var(--f);fill:var(--n0)}
.band .tl{font:700 13px var(--f);fill:var(--loss)}
.key{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:.8125rem;color:var(--n1);margin:0 0 var(--s5);padding:0;list-style:none}
.key li{display:flex;align-items:center;gap:6px}
.key i{display:inline-block;width:14px;height:10px;border:1px solid var(--n3)}
.key .k-night{background:var(--n0);border-color:var(--n0)}.key .k-tw{background:var(--n2);border-color:var(--n2)}.key .k-day{background:var(--paper)}
.key .k-bat{background:var(--n3);border-color:var(--n1)}.key .k-sun{background:var(--sun);border-color:var(--sun)}.key .k-out{width:2px;background:var(--loss);border:0;height:14px}
.math{width:100%;border-collapse:collapse;margin:0 0 var(--s5);font-size:.9375rem}
.math caption{text-align:left;font-weight:700;font-size:1.0625rem;padding-bottom:var(--s2)}
.math td,.math th{padding:var(--s2) 0;border-top:1px solid var(--n4);vertical-align:top;text-align:left;font-weight:400}
.math td:last-child{text-align:right;font-weight:650;white-space:nowrap;padding-left:var(--s4)}
.math tr.sum td{border-top:var(--rule-ink);font-weight:700}
.math small{margin-top:2px}
.check{list-style:none;margin:0 0 var(--s5);padding:0;font-size:.9375rem}
.check li{padding:var(--s2) 0;border-top:1px solid var(--n4);display:flex;justify-content:space-between;gap:var(--s4)}
.check .st{font-weight:700;white-space:nowrap}
.check .no .st{color:var(--loss)}
.check .info .st{color:var(--n2)}
.caution{border:1px solid var(--loss);background:var(--paper);padding:var(--s4);margin:0 0 var(--s5);font-size:.9375rem}
.caution h3{color:var(--loss);margin-bottom:var(--s2)}
.caution p:last-child{margin:0}

/* fits table (sizing) */
.tablewrap{overflow-x:auto;margin:0 0 var(--s5);border-top:var(--rule-ink)}
table.data{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:640px}
table.data caption{text-align:left;padding:var(--s2) 0;font-size:.875rem;color:var(--n1)}
table.data th,table.data td{padding:var(--s2) var(--s3) var(--s2) 0;border-bottom:1px solid var(--n4);text-align:right;vertical-align:top}
table.data th:first-child,table.data td:first-child{text-align:left}
table.data td{white-space:nowrap}
table.data td:last-child:not([data-v]){white-space:normal}
table.data thead th{font-size:.8125rem;font-weight:650;color:var(--n1);border-bottom:var(--rule-ink);vertical-align:bottom}
table.data tbody th{font-weight:600}
table.data tbody th small{font-weight:400}
table.data .na{color:var(--n2);font-size:.8125rem}
table.data tr.short td,table.data tr.short th{color:var(--n2)}
table.data tr.short th a{color:var(--n2)}
table.data tr.best th,table.data tr.best td{background:var(--n4)}
table.data td.no{color:var(--loss);font-weight:650}
th button.sort{font:inherit;font-weight:650;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit;min-height:24px}
th button.sort::after{content:"";display:inline-block;width:.6em}
th[aria-sort=ascending] button.sort::after{content:" ↑"}th[aria-sort=descending] button.sort::after{content:" ↓"}

/* prose pages */
.prose{max-width:72ch;margin-bottom:var(--s8)}
.prose h2{margin-top:var(--s6);padding-top:var(--s3);border-top:var(--rule-ink)}
.prose li{margin-bottom:var(--s2)}
.callout{border:1px solid var(--n2);background:var(--paper);padding:var(--s4);margin:var(--s4) 0}
.sec{margin:0 0 var(--s7)}
.sec>h2{border-top:var(--rule-ink);padding-top:var(--s3)}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:var(--rule-ink);margin:0 0 var(--s7);padding:0;list-style:none}
.more li{border-bottom:var(--rule);padding:var(--s4) var(--s4) var(--s4) 0}
.more a{font-weight:700;font-size:1.0625rem}
.more p{font-size:.9375rem;color:var(--n1);margin:var(--s1) 0 0}

/* footer */
.foot{background:var(--n0);color:var(--n4);margin-top:var(--s8);padding:var(--s7) 0 var(--s5);font-size:.9375rem}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:var(--s6)}
.foot a,.foot a:hover{color:var(--paper)}
.foot .fh{font-size:.875rem;font-weight:700;color:var(--paper);margin-bottom:var(--s2)}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin-bottom:var(--s2)}
.foot .fb{grid-column:1/-1;border-top:1px solid var(--n1);padding-top:var(--s4);margin:0;color:var(--n3);max-width:none}

@media (max-width:980px){
  .tool{grid-template-columns:1fr;gap:var(--s6)}
  .answer{position:static}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .more{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wrap{padding:0 var(--s4)}
  .top .wrap{gap:var(--s2) var(--s4);padding-top:var(--s2);padding-bottom:var(--s2)}
  .tabs{order:3;width:100%}
  .tabs ul{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--n4)}
  .tabs a{padding:var(--s2);font-size:.9375rem;white-space:nowrap}
  .head{padding-top:var(--s5)}
  .row{grid-template-columns:minmax(0,1fr) 8rem}
  .foot .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){.fig{transition:color .2s}}
@media print{.top,.foot,.preview,.adds,.rm{display:none}.tool{grid-template-columns:1fr}}