/* The plan rack (9 Nov 2026; Barry: the pricing pages should wow and stay in theme with the platform). The four plans
   are four units in one rack, anodised in both themes like the home page's patch panel. A unit has one socket per vCPU
   of the largest plan with its own open, and one memory slot per 8 GB with its own filled, so the sizes read as a
   staircase before a word is read. The chosen unit powers on: its link LEDs come up in port order and a patch lead
   plugs into its uplink (on the pricing page that lead runs into the order, js/purchase.mjs). Markup: build.mjs
   planRackHTML. Used by /pricing.html (toggle buttons) and the home page (links). */

.rack{
 /* One unit's columns: ear, name and size, hardware, price, uplink, ear. The stacked forms below swap these. */
 --u-cols:16px minmax(0,1fr) auto 108px 34px 16px;
 --u-areas:'earl id hw price jack earr' 'earl id fit price jack earr';
 --u-pad:12px 8px;--u-gap:14px;--u-in:0px;
 --sock-w:18px;--sock-h:15px;--sock-gap:3px;--dimm-w:5px;
 position:relative;display:grid;gap:5px;margin:0;padding:10px;list-style:none;border-radius:12px;
 background:var(--c-sunken);box-shadow:inset 0 1px 3px rgba(16,24,40,.16),inset 0 0 0 1px var(--c-line-2)}
.rack>li{display:grid;min-width:0}

.unit{position:relative;display:grid;grid-template-columns:var(--u-cols);grid-template-areas:var(--u-areas);align-items:center;gap:7px var(--u-gap);
 width:100%;min-width:0;margin:0;padding:var(--u-pad);border:0;border-radius:6px;
 background:linear-gradient(180deg,#2b3446 0%,#1d2533 46%,#171e2a 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.35),0 3px 8px -4px rgba(0,0,0,.4);
 color:#e7edf5;font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
 transition:box-shadow .18s var(--ease),background-color .18s}
/* The brushed grain of the faceplate. */
.unit::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:screen}
.unit:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;z-index:1}

/* Rack ears, each with its two screws. */
.unit__ear{align-self:stretch;display:grid;align-content:space-between;justify-items:center;min-height:46px;padding:5px 0;border-radius:3px;
 background:linear-gradient(180deg,#2a3243,#1a212d);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.unit__ear--l{grid-area:earl}
.unit__ear--r{grid-area:earr}
.unit__ear i{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8a95a8,#3b4456 70%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
.unit__ear i::after{content:'';display:block;width:7px;height:1.5px;margin:3.75px auto 0;background:rgba(0,0,0,.55);transform:rotate(-35deg)}
.unit__ear i:last-child::after{transform:rotate(50deg)}

/* Name and size, behind the unit's power LED. */
.unit__id{grid-area:id;position:relative;display:grid;gap:5px;min-width:0;padding-left:18px}
.unit__id::before{content:'';position:absolute;left:1px;top:8px;width:7px;height:7px;border-radius:50%;background:#2f3a2f;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);transition:background-color .2s,box-shadow .2s}
.unit__name{font-size:19px;line-height:1.2;font-weight:600;letter-spacing:-.012em;color:#f3f6fa}
.unit__spec{font:500 12px/1.3 var(--f-mono);letter-spacing:.005em;color:#9aa6b8;white-space:nowrap}

/* Hardware: the port banks and the memory slots, under their silk-screened legends. */
.unit__hw{grid-area:hw;display:flex;align-items:flex-end;gap:12px;min-width:0;padding-left:var(--u-in)}
.unit__grp{display:grid;gap:5px}
.unit__silk{font:600 9px/1 var(--f-mono);letter-spacing:.08em;color:#7d889b}
.unit__banks{display:flex;gap:calc(var(--sock-gap) + 5px)}
.unit__ports{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,var(--sock-h));grid-auto-columns:var(--sock-w);gap:var(--sock-gap)}
/* A blanked position, then an open RJ45 with its link LED (top row above the jack, bottom row below it). */
.unit__ports i{position:relative;border-radius:2.5px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.unit__ports i.on{background:#0a0e14;box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.09)}
.unit__ports i.on::after{content:'';position:absolute;top:2px;right:2px;width:4px;height:4px;border-radius:50%;background:#2f3a2f}
.unit__ports i.on:nth-child(even)::after{top:auto;bottom:2px}
.unit__dimms{display:grid;grid-auto-flow:column;grid-auto-columns:var(--dimm-w);gap:3px;height:calc(var(--sock-h) * 2 + var(--sock-gap))}
.unit__dimms i{border-radius:1.5px;background:#0a0e14;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.07)}
/* A fitted module: board, then its gold edge. */
.unit__dimms i.on{background:linear-gradient(180deg,#b3bfd1 0,#6b7891 80%,#d8ae4f 80%);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35)}

.unit__price{grid-area:price;display:grid;justify-items:end;gap:4px;font-size:13px;line-height:1.2;color:#9aa6b8;text-align:right;white-space:nowrap}
.unit__price strong{display:block;margin-bottom:3px;font-family:var(--f-display);font-size:30px;line-height:1;font-weight:600;letter-spacing:-.012em;color:#f3f6fa;font-variant-numeric:tabular-nums}
.unit__alt{font-size:12.5px;color:#8591a4}
/* The picker shows both ways of paying: the chosen one large, the other as a line under it. */
[data-active-mode=fixed] .unit__price [data-col=on_demand],[data-active-mode=on_demand] .unit__price [data-col=fixed]{order:2;font-size:12.5px;color:#8591a4}
[data-active-mode=fixed] .unit__price [data-col=on_demand]::before,[data-active-mode=on_demand] .unit__price [data-col=fixed]::before{content:'or '}
[data-active-mode=fixed] .unit__price [data-col=on_demand] strong,[data-active-mode=on_demand] .unit__price [data-col=fixed] strong{display:inline;margin:0;font:inherit;letter-spacing:0;color:inherit}

.unit__fit{grid-area:fit;min-width:0;padding-left:var(--u-in);font-size:12.5px;line-height:1.35;color:#9aa6b8}

/* The uplink, and the plug that sits in it once the unit is chosen (or, on a link, pointed at). */
.unit__jack{grid-area:jack;justify-self:center;position:relative;width:34px;height:26px;border-radius:4px;background:#0a0e14;box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.08)}
.unit__jack i{position:absolute;left:4px;right:4px;top:4px;bottom:3px;border-radius:3px;background:var(--k-blue);box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.25);opacity:0;transform:translateX(7px);transition:opacity .14s,transform .24s var(--ease-out)}
.unit__jack i::after{content:'';position:absolute;left:8px;right:8px;top:4px;height:3px;border-radius:2px;background:rgba(255,255,255,.55)}

/* ---------- Powered on ---------- */
.unit:hover{background:linear-gradient(180deg,#303a4f 0%,#212a3a 46%,#1a2230 100%)}
.unit[aria-pressed=true],a.unit:hover,a.unit:focus-visible{background:linear-gradient(180deg,#354261 0%,#242f45 46%,#1b2436 100%)}
.unit[aria-pressed=true]{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.4),0 0 0 2px var(--c-signal-stroke),0 6px 18px -8px rgba(36,87,245,.55)}
.unit[aria-pressed=true] .unit__id::before,a.unit:hover .unit__id::before,a.unit:focus-visible .unit__id::before{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.75),0 0 0 1px rgba(0,0,0,.35)}
.unit[aria-pressed=true] .unit__jack i,a.unit:hover .unit__jack i,a.unit:focus-visible .unit__jack i{opacity:1;transform:none}
/* Link LEDs come up in port order (on load too, for the unit that starts chosen); they go dark together. */
.unit[aria-pressed=true] .unit__ports i.on::after,a.unit:hover .unit__ports i.on::after,a.unit:focus-visible .unit__ports i.on::after{
 background:#22c55e;box-shadow:0 0 5px rgba(34,197,94,.8);animation:led-up .12s linear calc(var(--i) * 16ms) backwards}
@keyframes led-up{from{background:#2f3a2f;box-shadow:none}}

/* ---------- Links (home): the whole rack, centred, every unit up; pointing at one plugs the lead in ---------- */
.rack--links{width:100%;max-width:920px;margin-inline:auto}
.rack--links .unit{--u-gap:18px}
.rack--links .unit__id::before{background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,.75),0 0 0 1px rgba(0,0,0,.35)}
.rack--links .unit__ports i.on::after{background:#22c55e;box-shadow:0 0 5px rgba(34,197,94,.8)}
a.unit:hover,a.unit:focus-visible{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.4),0 0 0 2px var(--c-signal-stroke),0 6px 18px -8px rgba(36,87,245,.55)}
a.unit:hover .unit__ports i.on::after,a.unit:focus-visible .unit__ports i.on::after{animation:none}

/* ---------- Narrower racks: the hardware drops under the name and price ---------- */
@media (max-width:799px){
 .rack{--u-cols:16px minmax(0,1fr) auto 34px 16px;--u-areas:'earl id price jack earr' 'earl hw hw hw earr' 'earl fit fit fit earr';--u-pad:14px 8px;--u-gap:12px;--u-in:18px}
 .unit{row-gap:11px}
}
/* Tablets: two units across, without ears. */
@media (min-width:700px) and (max-width:799px){
 .rack{grid-template-columns:repeat(2,minmax(0,1fr));--u-cols:minmax(0,1fr) auto 34px;--u-areas:'id price jack' 'hw hw hw' 'fit fit fit';--u-pad:14px 14px 15px;--u-in:0px;--sock-w:15px;--sock-h:13px}
 .unit{align-content:start}
 .unit__ear{display:none}
}
@media (max-width:519px){
 .rack{--u-cols:minmax(0,1fr) auto 30px;--u-areas:'id price jack' 'hw hw hw' 'fit fit fit';--u-pad:14px 14px 15px;--u-in:0px;--sock-w:15px;--sock-h:13px;--sock-gap:2px;--dimm-w:4px;padding:8px}
 .unit__ear{display:none}
 .unit__jack{width:30px;height:24px}
 .unit__price{gap:2px}
 .unit__price strong{display:inline-block;margin:0 4px 0 0;font-size:26px}
 .unit__dimms{gap:2px}
}
/* Small phones: the price takes its own line under the name, so a long plan name never meets it. */
@media (max-width:389px){
 .rack{--u-cols:minmax(0,1fr) 30px;--u-areas:'id jack' 'price price' 'hw hw' 'fit fit'}
 .unit{row-gap:9px}
 .unit__price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:2px 10px;text-align:left}
 .unit__spec{white-space:normal}
}
@media (max-width:359px){
 .rack{--sock-w:13px;--sock-h:12px;padding:6px}
 .unit__hw{gap:9px}
}

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion:reduce){
 .unit,.unit__jack i,.unit__ports i.on::after,.unit__id::before{transition:none!important;animation:none!important}
}
@media (forced-colors:active){
 .rack{border:1px solid CanvasText}
 .unit,.unit:hover,.unit[aria-pressed=true],a.unit:hover,a.unit:focus-visible{border:1px solid CanvasText;forced-color-adjust:none;background:Canvas;color:CanvasText;box-shadow:none}
 .unit__name,.unit__price strong{color:CanvasText}
 .unit__spec,.unit__fit,.unit__price,.unit__alt,.unit__silk,.rack .unit .unit__price [data-col],.rack .unit .unit__price [data-col] strong{color:CanvasText}
 .unit::before,.unit__ear{display:none}
 .unit__ports i{background:Canvas;box-shadow:none;border:1px solid GrayText}
 .unit__ports i.on{background:CanvasText;box-shadow:none}
 .unit__dimms i{background:Canvas;box-shadow:none;border:1px solid GrayText}
 .unit__dimms i.on{background:CanvasText}
 .unit__jack{background:Canvas;border:1px solid CanvasText;box-shadow:none}
 .unit__jack i{background:Highlight;box-shadow:none}
 .unit[aria-pressed=true]{outline:3px solid Highlight;outline-offset:-3px;box-shadow:none}
 a.unit:hover,a.unit:focus-visible{outline:3px solid Highlight;outline-offset:-3px}
}