/* Penton Systems | Founder: Scott Penton | Orlando, Florida. Designed and engineered under the direction of Scott Penton. Copyright (c) 2026 Scott Penton / Penton Systems. */
/* Experience E (Economics of Computing), engineering instruments, upgrade planner and the tools hub. */

/* ---------- instrument internals ---------- */
.xi{margin:0}
.xi-body{display:grid;grid-template-columns:minmax(260px,4fr) minmax(0,8fr);gap:0;border-bottom:1px solid var(--line)}
.xi-inputs{padding:22px 22px 8px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(10,18,32,.6),rgba(5,9,18,.2))}
.xi-inputs fieldset{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.xi-inputs .field{margin-bottom:16px;min-width:0}
.xi-inputs .field.wide{grid-column:1/-1}
.xi-inputs .field>label{min-height:2.7em;align-items:flex-end}
.xi-inputs .field label .u{color:var(--fg-3);text-transform:none;letter-spacing:.02em;margin-left:auto}
.xi-inputs .hint{font-size:.74rem;color:var(--fg-3);line-height:1.35}
.xi-inputs input[type=number],.xi-inputs select{min-height:42px;padding:9px 11px;font-size:.95rem}
.xi-out{padding:22px;min-width:0;display:flex;flex-direction:column;gap:18px}
.xi-readouts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.xi-readouts:has(>:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.xi-readouts,.xi-readouts:has(>:nth-child(6)){grid-template-columns:repeat(2,minmax(0,1fr))}}
.xi-readouts .readout{padding:16px 16px 14px}
.xi-readouts .readout .v{font-size:clamp(1.35rem,2.1vw,2rem)}
.xi-vis{position:relative;width:100%;min-width:0;aspect-ratio:16/7;border:1px solid var(--line);background:radial-gradient(100% 120% at 50% 0%,rgba(24,40,68,.35),rgba(4,8,16,.6))}
.xi-vis.small{aspect-ratio:16/6}
.xi-gauges,.xi-out,.xi-rackrow>*{min-width:0}
@media (max-width:1280px){.xi-rackrow .xi-vis.small{aspect-ratio:4/3}}
.xi-vis.square{aspect-ratio:1/1;min-height:0}
.xi-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.xi-legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px 10px;font:500 .7rem/1.3 var(--mono);letter-spacing:.06em;color:var(--fg-3)}
.xi-vis+.xi-legend{margin-top:-10px;padding-left:0}
.xi-legend span{display:inline-flex;align-items:center;gap:7px}
.xi-legend i{width:10px;height:10px;display:inline-block}
.xi-legend i.dash{height:0;border-top:1px dashed var(--fg-3);width:16px}
.xi-legend i.line{height:2px;background:var(--blue-hi);width:16px}
.xi-stack .row{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;margin-bottom:8px;font-size:.86rem;color:var(--fg-2)}
.xi-stack .bar{display:flex;height:16px;background:rgba(150,180,230,.06);overflow:hidden}
.xi-stack .bar i{display:block;height:100%;transition:width .7s var(--ease)}
.xi-stack b{font-family:var(--mono);font-size:.85rem;color:var(--fg)}
.xi-stack .xi-legend{padding-left:0}
.xi-verdict{margin:0;padding:12px 16px;border-left:2px solid var(--blue);background:rgba(47,128,255,.06);color:var(--fg);font-size:.98rem;line-height:1.5}
.xi-verdict:empty{display:none}
.xi-verdict.ok{border-color:var(--teal);background:rgba(34,216,200,.06)}
.xi-verdict.warn{border-color:var(--amber);background:rgba(255,181,71,.07)}
.xi-math{border-bottom:1px solid var(--line)}
.xi-math summary{display:flex;align-items:center;gap:16px;padding:14px 22px;cursor:pointer;list-style:none;font:600 .78rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.xi-math summary::-webkit-details-marker{display:none}
.xi-math summary:before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--line-3);color:var(--blue-hi);font-size:.9rem;transition:transform .35s var(--ease)}
.xi-math[open] summary:before{transform:rotate(45deg)}
.xi-math summary .dim{text-transform:none;letter-spacing:.02em;font-weight:400}
.xi-math summary:hover{background:rgba(47,128,255,.05)}
.xi-math-body{padding:4px 22px 22px;display:grid;gap:10px}
.xi-math-body h4{margin:12px 0 0;font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.xi-math-body ul{margin:0;padding-left:1.1em;color:var(--fg-2);font-size:.9rem}
.xi-math-body li{margin:.35em 0}
.eq{display:grid;gap:4px;padding:10px 14px;border:1px solid var(--line);background:rgba(2,4,9,.6);overflow-x:auto}
.eq code{font:500 .82rem/1.55 var(--mono);color:var(--blue-hi);white-space:normal}
.eq code.vals{color:var(--fg-2)}
.xi .ifoot .btn{margin-right:auto}
.xi-odo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;padding:12px 16px;border:1px dashed var(--line-2)}
.xi-odo b{font:700 1.3rem/1 var(--mono);color:var(--amber)}
.xi-odo small{font-family:var(--mono);color:var(--fg-3)}
.xi-rackrow{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:20px;align-items:start}
.xi-rack svg{width:100%;height:auto;max-height:420px}
.xi-rack .srv rect:first-child{transition:opacity .5s var(--ease)}
html[data-motion=on] .xi-rack .srv{animation:srvin .6s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes srvin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.xi-gauges{display:grid;gap:10px;min-width:0}
.gauges{display:flex;flex-wrap:wrap;gap:8px}
.gauge{margin:0;width:118px;text-align:center}
.gauge svg{width:100%;height:auto}
.gauge figcaption{font:500 .7rem/1.3 var(--mono);color:var(--fg-3)}
html[data-motion=on] .gauge .g-fill{stroke-dasharray:400;stroke-dashoffset:400;animation:gfill 1.2s var(--ease) forwards}
@keyframes gfill{to{stroke-dashoffset:0}}
.xi-pointrow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(160px,.7fr);gap:18px;align-items:center}
.xi-compass svg{width:100%;height:auto}
.xi-compass .needle{transition:transform 1s var(--ease)}
.xi-compass .el-arc{margin-top:-6px}
.xi-locate{padding:4px 0 14px}
.xi-locate .note{margin:10px 0 0;font-size:.78rem}
.xi-table td,.xi-table th{white-space:nowrap}
.xi-cmp-pick{display:flex;flex-wrap:wrap;gap:8px;padding:16px 22px;border-bottom:1px solid var(--line)}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid var(--line-2);font:600 .8rem/1 var(--mono);letter-spacing:.06em;color:var(--fg-2);transition:all .25s}
.chip span:before{content:"";width:9px;height:9px;border:1px solid var(--fg-3)}
.chip input:checked+span{border-color:var(--blue-hi);color:#fff;background:rgba(47,128,255,.12)}
.chip input:checked+span:before{background:var(--blue-hi);border-color:var(--blue-hi)}
.chip input:focus-visible+span{outline:2px solid var(--blue-hi);outline-offset:2px}
.xi-cmp-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;padding:22px}
.cmp-metric .kicker{display:block;margin-bottom:10px}
.cmp-row{display:grid;grid-template-columns:52px 1fr 66px;gap:10px;align-items:center;margin-bottom:6px;font:500 .78rem/1 var(--mono);color:var(--fg-2)}
.cmp-row b{text-align:right;color:var(--fg)}
.cmp-bar{height:8px;background:rgba(150,180,230,.08)}
.cmp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-deep),var(--blue-hi));transition:width .8s var(--ease)}
.xi-cmp{margin:0;table-layout:fixed;min-width:560px}
.xi-cmp th,.xi-cmp thead th{width:auto}
.xi-cmp th[scope=row]{width:22%}
.xi-cmp td{font-size:.9rem}
.xi-cmp th,.xi-cmp td{padding-left:22px}
.xi-cmp tr.diff td{color:#fff}
.xi-cmp tr.diff th:after{content:" \2022";color:var(--amber)}
@media (max-width:1000px){.xi-body{grid-template-columns:minmax(0,1fr)}.xi-inputs{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:640px){.xi-inputs fieldset{grid-template-columns:minmax(0,1fr)}.xi-rackrow,.xi-pointrow{grid-template-columns:minmax(0,1fr)}.xi-rack{max-width:220px;margin:0 auto}.xi-vis{aspect-ratio:4/3}.xi-vis.small{aspect-ratio:4/3}.xi-out,.xi-inputs{padding:16px}.xi-stack .row{grid-template-columns:78px 1fr;}.xi-stack .row b{grid-column:2}}

/* ---------- planner ---------- */
.pl-ctl .seg{width:100%}
.pl-ctl .seg button{flex:1 1 auto}
.pl-ctl .seg button:disabled{opacity:.35;cursor:not-allowed}
.pl-chassis{border:1px solid var(--line);background:#04070d}
.pl-chassis svg{width:100%;height:auto}
.pl-cpu .sock{fill:#101b2e;stroke:#3d5f93;transition:fill .4s,stroke .4s}
.pl-cpu .fin{transition:opacity .4s}
.pl-cpu .lbl{fill:#a8b5c8}
.pl-cpu.off .sock{fill:#070d18;stroke:#2a3d5f;stroke-dasharray:4 4}
.pl-cpu.off .fin{opacity:.08}
.pl-cpu.off .lbl{fill:#4a5d80}
.pl-dimm{fill:#0a1220;stroke:#2a3d5f;stroke-width:.8;transition:fill .45s var(--ease),stroke .45s,transform .55s var(--ease),opacity .45s;transform-box:fill-box;transform-origin:center}
.pl-dimm.on{fill:#1e5fd1;stroke:#9cc8ff}
html[data-motion=on] .pl-dimm.on{animation:dimmin .6s var(--ease) both;animation-delay:var(--dl,0s)}
@keyframes dimmin{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
html[data-motion=on] .pl-bay.on rect{animation:bayin .5s var(--ease) both;animation-delay:var(--dl,0s)}
@keyframes bayin{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.pl-bay rect{transform-box:fill-box}
.pl-dimm.bad{fill:#7a2e22;stroke:#ff8b6b}
.pl-dimm.dead{fill:#05080f;stroke:#1a2740;stroke-dasharray:3 3}
.pl-bay rect{fill:#0a1220;stroke:#2a3d5f;transition:fill .4s,stroke .4s}
.pl-bay .led{fill:#1a2740;transition:fill .4s}
.pl-bay.on rect{fill:#13324a;stroke:var(--teal)}
.pl-bay.on .led{fill:var(--teal)}
.pl-bay.bad rect{stroke:var(--red)}
.pl-bay.bad .led{fill:var(--red)}
html[data-motion=on] .pl-bay.on .led{animation:bayled 1.4s ease-in-out infinite}
@keyframes bayled{50%{opacity:.25}}
html[data-motion=on] .planner.spin .pl-fan .blades{animation:fan 1.1s linear infinite}
@keyframes fan{to{transform:rotate(360deg)}}
.pl-meter{height:3px;margin-top:12px;background:rgba(150,180,230,.1)}
.pl-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--blue-deep),var(--blue-hi));transition:width .6s var(--ease)}
.pl-meter i.bad{background:var(--red)}
.pl-warn{list-style:none;margin:0;padding:0}
.pl-warn li{padding:10px 14px;border-left:2px solid var(--amber);background:rgba(255,181,71,.07);margin-bottom:6px;font-size:.92rem}
.pl-warn li.ok{border-color:var(--teal);background:rgba(34,216,200,.06)}
.pl-spec{margin-top:4px}
.planner .actions{margin-top:0}

/* ---------- economics hero ---------- */
.econ-hero{min-height:min(100vh,1040px);align-items:center}
.econ-hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.econ-hero h1{margin-bottom:24px;font-size:clamp(2.3rem,3.9vw,4.4rem);line-height:.9}
.river{margin:0}
.river .stage{aspect-ratio:7/5}
.river figcaption{display:block}
.econ-hero .ifoot b{color:var(--fg)}
@media (max-width:1000px){.econ-hero .wrap{grid-template-columns:minmax(0,1fr)}.river .stage{aspect-ratio:5/4}}
@media (max-width:560px){.river .stage{aspect-ratio:4/5}}

/* ---------- instrument index (economics) ---------- */
.econ-nav{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line)}
.econ-nav li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.econ-nav a{display:flex;align-items:baseline;gap:10px;height:100%;padding:14px 16px;color:var(--fg-2);text-decoration:none;transition:background .3s,color .3s;font-size:.9rem}
.econ-nav a .d{display:none}
.xp-economics .anchor-offset{scroll-margin-top:calc(var(--mh) + 56px)}
.econ-nav a .n{font:500 .72rem/1 var(--mono);color:var(--blue-hi);letter-spacing:.12em}
.econ-nav a .t{font-weight:700;font-stretch:112%;color:var(--fg);line-height:1.2}
.econ-nav a .d{font-size:.82rem;color:var(--fg-3);line-height:1.4}
.econ-nav a:hover,.econ-nav a[aria-current]{background:rgba(47,128,255,.08)}
.econ-nav a[aria-current] .t{color:#fff}
.econ-nav-wrap{position:sticky;top:var(--mh);z-index:5;background:rgba(5,9,18,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@media (max-width:1100px){.econ-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.econ-nav a .d{display:none}.econ-nav-wrap{position:static}}
@media (max-width:560px){.econ-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}

.inst-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.inst-head h2{margin:0}
.inst-head .display,.split .display{font-size:clamp(2rem,3.6vw,3.9rem)}
.inst-head p{margin:0}
@media (max-width:960px){.inst-head{grid-template-columns:minmax(0,1fr)}}

/* ---------- tools hub: rack-panel index ---------- */
.rackpanel{list-style:none;margin:0;padding:12px;border:1px solid var(--line-2);background:linear-gradient(90deg,#0b1220,#070c16 6%,#070c16 94%,#0b1220);position:relative}
.rackpanel:before,.rackpanel:after{content:"";position:absolute;top:0;bottom:0;width:22px;background:repeating-linear-gradient(180deg,transparent 0 18px,rgba(150,180,230,.18) 18px 20px,transparent 20px 44px)}
.rackpanel:before{left:0}.rackpanel:after{right:0}
.ru{position:relative;display:grid;grid-template-columns:20px 120px minmax(0,1.2fr) minmax(0,1.6fr) auto;gap:clamp(14px,2.5vw,32px);align-items:center;margin:0 18px 10px;padding:22px 26px 22px 18px;background:linear-gradient(180deg,#121d31,#0b1424);border:1px solid rgba(150,180,230,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.35);transition:border-color .35s,transform .45s var(--ease)}
.ru:last-child{margin-bottom:0}
.ru:hover{border-color:var(--blue-hi);transform:translateX(4px)}
.ru .led{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.ru .led.live{background:var(--teal)}
html[data-motion=on] .ru:hover .led{animation:bayled .8s ease-in-out infinite}
.ru .glyph{height:64px;border:1px solid var(--line);background:#050912;display:grid;place-items:center}
.ru .glyph svg{width:100%;height:100%}
.ru h3{margin:0 0 6px;font-size:clamp(1.05rem,1.5vw,1.3rem);font-stretch:112%}
.ru .tag{margin-bottom:10px}
.ru p{margin:0;color:var(--fg-2);font-size:.95rem}
.ru .f{font:500 .76rem/1.5 var(--mono);color:var(--blue-hi)}
.ru a.cover{position:absolute;inset:0;z-index:1}
.ru a.cover:focus-visible{outline:2px solid var(--blue-hi);outline-offset:2px}
.ru .go{font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.ru:hover .go{color:#fff}
@media (max-width:900px){.ru{grid-template-columns:14px 80px minmax(0,1fr);padding:18px}.ru>div+div,.ru>.go{grid-column:2/-1}.ru .glyph{height:52px}}
@media (max-width:560px){.ru{grid-template-columns:14px minmax(0,1fr);row-gap:12px}.ru>.glyph{grid-column:2;width:96px}.ru>div,.ru>div+div,.ru>.go{grid-column:2}}

/* ---------- market facts (refurbished advantage) ---------- */
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.facts li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto;gap:clamp(18px,4vw,60px);padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline}
.facts .big{font-size:clamp(1.6rem,3.2vw,2.8rem);font-weight:800;font-stretch:120%;letter-spacing:-.02em;line-height:1}
.facts p{margin:0;color:var(--fg-2)}
@media (max-width:860px){.facts li{grid-template-columns:minmax(0,1fr)}}
.sources{counter-reset:s;list-style:none;margin:0;padding:0}
.sources li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;padding:12px 0;border-bottom:1px solid var(--line)}
.sources li:before{content:counter(s,decimal-leading-zero);font:500 .76rem/1.8 var(--mono);color:var(--fg-3)}
.sources a{color:var(--fg-2)}
.sources a:hover{color:#fff}
@media (max-width:640px){body.tool-page .mega,body.tools-hub .mega{font-size:clamp(1.9rem,8.2vw,3rem)}}
.share-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
.share-row .kicker{margin-right:8px}
.wrong-call{counter-reset:w}