/* Gel Calculator page. Uses the site's Redwood variables from /styles.css. */
.calc{max-width:720px;margin:0 auto;padding:32px 20px 56px}
.calc h1{font-family:Bungee,sans-serif;font-weight:400;font-size:1.9rem;line-height:1.15;margin:.2em 0 .3em}
.calc h2{font-size:1.3rem;color:var(--rust);margin:1.6em 0 .4em}
.calc p,.calc li{font-size:1.05rem}
.calc a{color:var(--rust)}
.calc .lead{font-size:1.1rem}
.calc .callout{background:#fff;border-left:5px solid var(--moss);padding:12px 16px;margin:20px 0;font-size:1rem}
.card-form{background:#fff;border-radius:12px;border-top:6px solid var(--moss);padding:18px;margin:20px 0}
.field{margin:0 0 18px}
.field label,.seg legend{display:block;font-weight:700;font-size:1rem;margin:0 0 6px;padding:0}
.opt{font-weight:400;opacity:.8}
.field input,.field select{width:100%;min-height:48px;padding:10px 12px;font:inherit;font-size:1rem;color:var(--ch);background:var(--cream);border:2px solid var(--ch);border-radius:8px}
.field input:focus-visible,.field select:focus-visible,.seg input:focus-visible+span,.tbl-wrap:focus-visible{outline:3px solid var(--rust);outline-offset:2px}
.hint{font-size:.9rem!important;margin:6px 0 0;color:#4a4540}
.seg{border:0;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:0 8px}
.seg legend{width:100%}
.seg label{margin:0;position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:96px;padding:0 22px;border:2px solid var(--ch);border-radius:999px;font-weight:700;font-size:1rem;cursor:pointer;background:var(--cream)}
.seg input:checked+span{background:var(--ch);color:var(--cream)}
.results{background:var(--ch);color:var(--cream);border-radius:14px;padding:6px 18px 18px;margin:24px 0;border-top:6px solid var(--rust)}
.results h2{color:var(--cream);margin:.8em 0 .4em;font-size:1.3rem}
.results .err{background:#fff;color:#8a2c19;padding:10px 14px;border-radius:8px;font-weight:700}
.stats{display:grid;gap:10px;grid-template-columns:1fr;margin:0 0 14px}
.stat{background:rgba(250,243,232,.1);border-radius:10px;padding:12px 14px}
.stat .k{display:block;font-size:.9rem;opacity:.9}
.stat .v{display:block;font-family:Bungee,sans-serif;font-size:1.5rem;line-height:1.2;margin-top:2px}
.stat .s{display:block;font-size:.9rem;margin-top:2px;opacity:.9}
.results h3{font-size:1.1rem;margin:18px 0 8px;color:var(--cream)}
.sched{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sched li{background:rgba(250,243,232,.1);border-radius:10px;padding:10px 14px;font-size:1rem}
.sched .hr{font-weight:700;display:block}
.flag{border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:1rem;background:var(--cream);color:var(--ch)}
.flag.ok{border-left:6px solid var(--moss)}
.flag.warn{border-left:6px solid var(--rust)}
.results p{margin:.6em 0}
.results .ref{font-size:.95rem;opacity:.95}
.tbl-wrap{overflow-x:auto;background:#fff;border-radius:10px;margin:12px 0 20px}
.tbl-wrap table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
.tbl-wrap th,.tbl-wrap td{text-align:left;padding:10px 12px;border-bottom:1px solid #e4d9c6;vertical-align:top}
.tbl-wrap th{background:#F1E6D4}
@media(min-width:620px){.stats{grid-template-columns:repeat(3,1fr)}.calc h1{font-size:2.4rem}.card-form{padding:24px}.tbl-wrap table{min-width:0}}
#runInfo li{margin:0 0 .7em}
#runInfo ul{padding-left:1.2em}
.sources{padding-left:1.4em}
.sources li{font-size:.95rem;margin:0 0 .7em;word-break:break-word}
.sources a{word-break:break-all}
.sources em{font-style:italic}
.calc [hidden]{display:none!important}
.flag a{color:var(--rust)}
.wtrow{display:flex;gap:8px}
.wtrow input{flex:1 1 auto;min-width:0}
.wtrow select{flex:0 0 5.5rem;width:5.5rem!important}
.field .hint.err{color:var(--rust);font-weight:700}
.pre{margin-top:1.4em}
.buycta{margin:26px 0 4px;padding:22px 0 0;border-top:2px solid rgba(250,243,232,.25);text-align:center}
/* Energy-gel packet: foil sachet, serrated crimped ends, tear notch, gloss stripe */
.gelwrap{max-width:480px;margin:0 auto;filter:drop-shadow(0 0 6px rgba(255,138,30,.75)) drop-shadow(0 6px 14px rgba(255,138,30,.55))}
.calc .buybtn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:100%;min-height:80px;padding:14px 44px 12px;line-height:1.1;color:#2B2B2B;text-decoration:none;font-weight:800;font-size:1.3rem;letter-spacing:.01em;text-shadow:none;border:0;border-radius:0;cursor:pointer;
  clip-path:polygon(7px 0,calc(100% - 92px) 0,calc(100% - 82px) 10px,calc(100% - 72px) 0,calc(100% - 7px) 0,100% 0.00%,calc(100% - 7px) 5.56%,100% 11.11%,calc(100% - 7px) 16.67%,100% 22.22%,calc(100% - 7px) 27.78%,100% 33.33%,calc(100% - 7px) 38.89%,100% 44.44%,calc(100% - 7px) 50.00%,100% 55.56%,calc(100% - 7px) 61.11%,100% 66.67%,calc(100% - 7px) 72.22%,100% 77.78%,calc(100% - 7px) 83.33%,100% 88.89%,calc(100% - 7px) 94.44%,100% 100%,calc(100% - 7px) 100%,7px 100%,0 100.00%,7px 94.44%,0 88.89%,7px 83.33%,0 77.78%,7px 72.22%,0 66.67%,7px 61.11%,0 55.56%,7px 50.00%,0 44.44%,7px 38.89%,0 33.33%,7px 27.78%,0 22.22%,7px 16.67%,0 11.11%,7px 5.56%);
  background:
    repeating-linear-gradient(90deg,rgba(43,43,43,.22) 0 2px,transparent 2px 5px) left/30px 100% no-repeat,
    repeating-linear-gradient(90deg,rgba(43,43,43,.22) 0 2px,transparent 2px 5px) right/30px 100% no-repeat,
    linear-gradient(90deg,transparent,rgba(43,43,43,.35)) 30px 0/2px 100% no-repeat,
    linear-gradient(90deg,rgba(43,43,43,.35),transparent) calc(100% - 30px) 0/2px 100% no-repeat,
    linear-gradient(135deg,#FF6A1F 0%,#FF8A1E 50%,#FFA41B 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
  transition:transform .15s ease,filter .15s ease}
.calc .buybtn .bolt{flex:0 0 auto;color:#2B2B2B;position:relative;z-index:2}
.calc .buybtn .lbl{position:relative;z-index:2;display:block;text-align:left}
.calc .buybtn .lbl::before{content:"ENERGY GEL" / "";display:block;font-size:.68rem;font-weight:800;letter-spacing:.2em;opacity:1;margin:0 0 3px}
/* glossy highlight stripe */
.calc .buybtn::before{content:"";position:absolute;left:30px;right:30px;top:7px;height:24%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.12));pointer-events:none;z-index:1}
/* shine sweep */
.calc .buybtn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);pointer-events:none;z-index:1}
.calc .buybtn:hover{color:#2B2B2B;filter:brightness(1.08) saturate(1.1);transform:translateY(-2px) scale(1.02)}
.calc .buybtn:active{transform:translateY(1px) scale(.98);filter:brightness(.95)}
.calc .buybtn:focus-visible{outline:none;box-shadow:inset 0 0 0 4px #6E9A45,inset 0 0 0 7px #fff}
.gelwrap:has(.buybtn:focus-visible){filter:drop-shadow(0 0 4px #6E9A45) drop-shadow(0 0 10px #6E9A45)}
.buynote{font-size:.95rem!important;line-height:1.45;margin:14px auto 0!important;max-width:520px;color:var(--cream);opacity:1}
@media(prefers-reduced-motion:no-preference){
  .gelwrap{animation:buyPulse 2.6s ease-in-out infinite}
  .calc .buybtn::after{animation:buyShine 3.6s ease-in-out infinite}
  .gelwrap:hover,.gelwrap:has(.buybtn:focus-visible){animation:none}
}
@keyframes buyPulse{0%,100%{filter:drop-shadow(0 0 6px rgba(255,138,30,.75)) drop-shadow(0 6px 14px rgba(255,138,30,.55))}50%{filter:drop-shadow(0 0 12px rgba(255,164,27,1)) drop-shadow(0 8px 24px rgba(255,164,27,.85))}}
@keyframes buyShine{0%,55%{left:-60%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.gelwrap,.calc .buybtn::after{animation:none!important}.calc .buybtn{transition:none}}
@media(max-width:420px){.calc .buybtn{font-size:1.12rem;padding:14px 38px 12px;gap:8px}.calc .buybtn .bolt{width:26px;height:26px}.calc .buybtn::before{left:26px;right:26px}}