/* Choose your PC: the price-ordered carousel (picker.mjs bindCarousel; dialog[data-carousel]).
   The row holds a whole number of cards (--per: 4 on wide screens, 3 around 1280 px, 2 on
   tablets and phones, 1 on the narrowest phones), snaps card by card and pages with the
   arrows; the strip below marks the cards in view ("5–8 of 13"). The dialog is as wide as
   those cards need, so no card is ever cut in half. Loaded after the older picker sheets
   (apricot.css, resource-panels.css, wallet-gate.css, island.css). */
.pc-picker[data-carousel]{--per:4;--card:236;--gap:12;--arrow:46;--pad:6}
@media(min-width:701px){
  .pc-picker[data-layout=shelf][data-carousel]{
    /* The tallest card (about 560u with the efficiency meter and the power line) plus the title,
       subtitle, strip and Start button fit the screen height; large screens grow the picker a little. */
    --u:max(.6px,min(1.15px,calc((100dvh - 190px) / 715)));
    width:min(calc((var(--per) * var(--card) + (var(--per) - 1) * var(--gap) + 2 * var(--pad) + 2 * var(--arrow) + 24) * var(--u) + 48px),calc(100vw - 32px));
  }
}
@media(min-width:1000px) and (max-width:1399.98px){.pc-picker[data-carousel]{--per:3;--card:256}}
@media(max-width:999.98px){.pc-picker[data-carousel]{--per:2;--card:256}}
@media(max-width:519.98px){.pc-picker[data-carousel]{--per:1}}

/* The row and its two arrows; the strip sits under the row. */
.pc-carousel{display:contents}
.pc-carousel-arrow,.pc-carousel-nav{display:none}
.pc-picker[data-carousel] .pc-carousel{
  display:grid;flex:none;min-height:0;align-items:center;
  grid-template-columns:calc(var(--arrow) * var(--u)) minmax(0,1fr) calc(var(--arrow) * var(--u));
  grid-template-areas:"prev row next" ". nav .";column-gap:calc(12 * var(--u));row-gap:calc(4 * var(--u));
}
.pc-picker[data-carousel] .pc-carousel .pc-picker-grid{
  grid-area:row;display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:none;
  grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap) * var(--u)) / var(--per));grid-auto-rows:auto;
  gap:calc(var(--gap) * var(--u));height:auto;min-height:0;max-height:none;flex:none;
  /* Room for the selected card's check badge and the hover lift; snapping keeps a card's left edge
     on the padding edge, so exactly --per cards show. */
  padding:calc(9 * var(--u)) calc(var(--pad) * var(--u)) calc(8 * var(--u));scroll-padding-inline:calc(var(--pad) * var(--u));
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  border-radius:calc(4 * var(--u));outline:none;
}
.pc-picker[data-carousel] .pc-carousel .pc-picker-grid::-webkit-scrollbar{display:none}
.pc-picker[data-carousel] .pc-carousel .pc-picker-grid:focus-visible{box-shadow:inset 0 0 0 calc(3 * var(--u)) #944421}
.pc-picker[data-carousel] .pc-carousel .pc-picker-grid>.pc-choice{scroll-snap-align:start;min-width:0}

.pc-picker[data-carousel] .pc-carousel-arrow{
  display:grid;place-items:center;align-self:center;width:100%;height:calc(84 * var(--u));padding:0 0 calc(4 * var(--u));margin:0;
  color:#622d25;cursor:pointer;background:none;border:calc(10 * var(--u)) solid transparent;
  border-image:url('../ui/frames/picker-close.svg') 12 fill stretch;
}
.pc-picker[data-carousel] .pc-carousel-arrow[data-dir="-1"]{grid-area:prev}
.pc-picker[data-carousel] .pc-carousel-arrow[data-dir="1"]{grid-area:next}
.pc-picker[data-carousel] .pc-carousel-chevron{width:calc(15 * var(--u));height:calc(20 * var(--u));display:block}
.pc-picker[data-carousel] .pc-carousel-arrow[data-dir="-1"] .pc-carousel-chevron{transform:scaleX(-1)}
.pc-picker[data-carousel] .pc-carousel-arrow:disabled{opacity:.3;cursor:default}

.pc-picker[data-carousel] .pc-carousel-nav{
  grid-area:nav;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:calc(6 * var(--u)) calc(14 * var(--u));min-height:calc(22 * var(--u));
}
.pc-carousel-dots{display:flex;align-items:center;gap:calc(4 * var(--u))}
.pc-picker .pc-carousel-dot{
  display:block;width:calc(13 * var(--u));height:calc(13 * var(--u));padding:0;margin:0;cursor:pointer;
  background:#fff8e1;border:calc(2 * var(--u)) solid #c39a6e;box-shadow:inset 0 calc(-2 * var(--u)) #f1dfb6;
}
.pc-picker .pc-carousel-dot[data-visible=true]{background:#f3a05a;border-color:#8a5736;box-shadow:inset 0 calc(-2 * var(--u)) #c96f2c}
.pc-picker .pc-carousel-dot[data-selected=true]{background:#62b35c;border-color:#2c5c33;box-shadow:inset 0 calc(-2 * var(--u)) #3d8a3c}
.pc-picker .pc-carousel-dot[data-selected=true][data-visible=false]{background:#cfe9c6}
.pc-carousel-range{min-width:calc(104 * var(--u));font:700 calc(13 * var(--u))/1.2 Pixeloid,monospace;color:#622d25;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Card lines below the hashrate, in the picker's own unit: running cost, energy, one price. From the
   case line down every card has the same lines, held to the bottom of the card, so the hashrates,
   prices and buttons line up across the row even when a card carries a badge under its name. */
.pc-picker[data-carousel] .pc-choice-case{margin-top:auto}
.pc-picker[data-carousel] .pc-choice-button{margin-top:0}
.pc-picker[data-carousel] .pc-choice-rate{margin-top:calc(5 * var(--u))}
.pc-picker[data-carousel] .pc-choice-power{display:block;margin:calc(3 * var(--u)) 0 0;font:400 calc(12 * var(--u))/1.35 Pixeloid,monospace;color:#5d6b4f}
.pc-picker[data-carousel] .pc-choice-energy{margin-top:calc(1 * var(--u))}
.pc-picker[data-carousel] .pc-choice-price{height:calc(34 * var(--u));margin-top:calc(2 * var(--u))}
/* The card's dollars under its tokens, in the same font and colour, never faded (owner, 7 Oct 2026, G13); no
   "Runs right away" line under the first cards any more (G12). */
.pc-picker .pc-choice-usd{font-weight:700;color:#622d25}
.pc-picker[data-carousel] .pc-choice-usd{
  display:flex;align-items:center;justify-content:center;align-self:center;max-width:100%;min-height:calc(24 * var(--u));margin:0 0 calc(6 * var(--u));
  padding:0 calc(6 * var(--u));font:700 calc(19 * var(--u))/1.2 Pixeloid,monospace;color:#622d25;text-align:center;white-space:nowrap;
}
/* A later Ready PC's line under its price: the power level it needs on desks 2-8. Never a second price. */
.pc-picker[data-carousel] .pc-choice-usd:has(+.pc-choice-build){margin-bottom:0}
.pc-picker .pc-choice-build{display:block;margin:0 0 calc(6 * var(--u));font:400 calc(11.5 * var(--u))/1.35 Pixeloid,monospace;color:#7a6f66;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-picker[data-carousel] .pc-choice-grid{display:block;margin:0 0 calc(6 * var(--u));font:700 calc(12 * var(--u))/1.3 Pixeloid,monospace;color:#b4541f}
.pc-picker .pc-choice-limit{display:block;margin:0 0 calc(6 * var(--u));font:700 calc(12 * var(--u))/1.3 Pixeloid,monospace;color:#3f5677}
.pc-picker .pc-choice-limit[data-reached]{color:#8a5f3c}

/* Efficiency (pc-efficiency.mjs): five steps and the H/s per W under the hashrate. Strong PCs fill the
   meter in green; weak ones show a short amber bar. */
.pc-picker .pc-choice-eff{
  display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--u));margin:calc(4 * var(--u)) 0 0;min-width:0;overflow:hidden;
  font:400 calc(12 * var(--u))/1.3 Pixeloid,monospace;color:#7a6f66;white-space:nowrap;cursor:help;
}
/* The picture gives a little height to the meter and the power line, so the row still fits the screen. */
@media(min-width:701px){.pc-picker[data-carousel] .pc-choice-art{height:calc(160 * var(--u))}}
.pc-picker .pc-choice-eff .pc-eff-value{font-weight:700;color:#5d4638}
.pc-picker .pc-choice-eff[data-level="4"] .pc-eff-value,.pc-picker .pc-choice-eff[data-level="5"] .pc-eff-value{color:#2f6b3a}
.pc-eff-steps{display:inline-flex;gap:calc(2 * var(--u,1px));flex:none}
.pc-eff-steps i{display:block;width:calc(9 * var(--u,1px));height:calc(9 * var(--u,1px));background:#eadcb8;box-shadow:inset 0 calc(-2 * var(--u,1px)) #d4bf91}
.pc-eff[data-level="1"] .pc-eff-steps i[data-on],.pc-eff[data-level="2"] .pc-eff-steps i[data-on]{background:#e7a24f;box-shadow:inset 0 calc(-2 * var(--u,1px)) #b9742c}
.pc-eff[data-level="3"] .pc-eff-steps i[data-on]{background:#a9c64e;box-shadow:inset 0 calc(-2 * var(--u,1px)) #7d9a2e}
.pc-eff[data-level="4"] .pc-eff-steps i[data-on],.pc-eff[data-level="5"] .pc-eff-steps i[data-on]{background:#4fa85a;box-shadow:inset 0 calc(-2 * var(--u,1px)) #2f7a3b}

/* "Best value" (the server's flag): a ribbon on the card's picture, so the lines below stay aligned. */
.pc-picker .pc-choice-best{
  position:absolute;left:calc(4 * var(--u,1px));top:calc(4 * var(--u,1px));z-index:2;max-width:calc(100% - 8 * var(--u,1px));
  padding:calc(2 * var(--u,1px)) calc(7 * var(--u,1px));font:700 calc(12 * var(--u,1px))/1.2 Pixeloid,monospace;letter-spacing:.02em;
  color:#fff8e1;background:#d9822b;border:calc(2 * var(--u,1px)) solid #8a4a1c;box-shadow:0 calc(2 * var(--u,1px)) #8a4a1c55;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
}
.pc-picker[data-carousel] .pc-choice-badge{font-size:calc(12 * var(--u));margin:calc(2 * var(--u)) 0 calc(4 * var(--u))}
.pc-picker[data-carousel] .pc-choice-claim{font-size:calc(11 * var(--u));margin:0 0 calc(4 * var(--u))}
.pc-picker[data-carousel] .pc-choice-case{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Phones: one card (two on wider phones) between slim arrows; the picker panel scrolls if it must
   (apricot.css) and its Start button stays in view. */
@media(max-width:700px){
  .pc-picker[data-layout=shelf][data-carousel]{--gap:8;--pad:4;--arrow:36;width:calc(100% - 16px)}
  .pc-picker[data-carousel] .pc-carousel{grid-template-areas:"prev row next" "nav nav nav";column-gap:6px;row-gap:4px;margin-top:2px}
  .pc-picker[data-carousel] .pc-carousel .pc-picker-grid{padding-block:5px 4px}
  .pc-picker[data-carousel] .pc-carousel-arrow{height:72px;border-width:8px}
  .pc-picker[data-carousel] .pc-carousel-chevron{width:12px;height:16px}
  .pc-picker[data-carousel] .pc-carousel-nav{gap:6px 10px}
  .pc-picker .pc-carousel-dot{width:11px;height:11px}
  .pc-carousel-range{min-width:0;font-size:12px}
  .pc-picker[data-carousel] .pc-choice{min-height:0}
  .pc-picker[data-carousel] :is(.pc-choice-power,.pc-choice-usd,.pc-choice-grid,.pc-choice-build,.pc-choice-limit,.pc-choice-eff){font-size:11.5px}
  .pc-picker[data-carousel] .pc-choice-best{font-size:11px}
  /* The meter and the power line take two short lines; the picture and the case line give them back. */
  .pc-picker[data-carousel] .pc-choice-art{height:118px}
  .pc-picker[data-carousel] .pc-choice-case{min-height:0}
  .pc-picker[data-carousel] .pc-choice-usd{padding:0 6px;font-size:15px}
  .pc-picker[data-carousel] .pc-picker-subtitle{margin:6px 0 8px}
}

/* The PC drawn fully assembled (plaza32/prebuilt-picture.mjs) is framed tight around the PC, so it fills
   the card's picture box whatever the package; the older per-package sizes (apricot.css) were made for
   the wide margins of the old renders. It fades in when it arrives after the card was shown. */
.pc-picker .pc-choice[data-package][data-kind] .pc-choice-art[data-prebuilt-art=ready] img{
  left:0;top:calc(2 * var(--u,1px));width:100%;height:calc(100% - 4 * var(--u,1px));aspect-ratio:auto;transform:none;object-fit:contain;
}
/* Sealed cards (Grain, Pebble: picker.mjs data-kind="sealed") keep their whole picture on phones too. */
.pc-picker .pc-choice[data-kind=sealed] .pc-choice-art img{left:0;top:calc(2 * var(--u,1px));width:100%;height:calc(100% - 4 * var(--u,1px));transform:none;object-fit:contain}
.pc-picker .pc-choice-art[data-prebuilt-art-fade] img{animation:pc-art-arrive .28s ease-out}
@keyframes pc-art-arrive{from{opacity:.35}}
@media(prefers-reduced-motion:reduce){.pc-picker .pc-choice-art[data-prebuilt-art-fade] img{animation:none}}

/* A wallet purchase waiting for recovery hides the row, as it hid the old grid (wallet-gate.css). */
.wallet-pc-picker:has(.pc-picker-recovery:not([hidden])) :is(.pc-carousel-arrow,.pc-carousel-nav){display:none}

/* Opened from the market's Prebuilt PCs (picker.mjs shop): only the "where should it go" step shows,
   over the market; the panel, title, cards and Start button stay hidden. */
.pc-picker.pc-picker[data-view=placement]{inset:0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;overflow:visible;translate:none}
.pc-picker[data-view=placement]::backdrop{background:transparent}
.pc-picker.pc-picker[data-view=placement] .pc-picker-body{position:static;width:auto;height:auto;max-height:none;padding:0}
.pc-picker[data-view=placement] .pc-picker-body::before{display:none}
.pc-picker[data-view=placement] .pc-picker-body>:not(.pc-placement){display:none!important}
/* A wallet without game tokens (picker.mjs tokenHelp): "Get $<SYMBOL>" to the deployment's Pons page is a button after
   the line, in the game notice's primary look (game-notifications.css); the X account stays a plain link. */
.pc-picker .pc-picker-token-link.pc-picker-buy{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:36px;margin:4px 0 4px 8px;padding:6px 14px;
  border:2px solid #6f8451;border-radius:0;background:#dcecc7;color:#345330;box-shadow:0 3px 0 #a8b781;
  font:700 13px/1.4 Pixeloid,monospace;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;
}
.pc-picker .pc-picker-token-link.pc-picker-buy:hover{background:#cfe5b4}
.pc-picker .pc-picker-token-link.pc-picker-buy:focus-visible{outline:3px solid #488caf;outline-offset:3px}

/* Server admission stays readable on cards; a selected lock reason never covers the mobile card. */
.pc-picker .pc-choice-admission{display:block;margin:0 0 5px;font:700 calc(12 * var(--u,1px))/1.3 Pixeloid,monospace;color:#8b411f}
.pc-picker .pc-choice-admission[hidden]{display:none}
@media(max-width:700px){
  .pc-picker[data-carousel] .pc-picker-status{position:static;transform:none;inset:auto;box-sizing:border-box;width:auto;max-width:100%;margin:6px 0;font-size:12px}
}

/* A light fade keeps specs readable; the diagonal stamp labels the server lock. */
.pc-picker .pc-choice[data-locked="true"]{opacity:.94}
.pc-picker .pc-choice-art{position:relative}
.pc-picker .pc-choice-lock{display:none;position:absolute;left:50%;top:52%;z-index:3;transform:translate(-50%,-50%) rotate(-16deg);padding:5px 15px;border:3px solid #91491f;color:#91491f;background:#fff3dbe8;box-shadow:0 2px 0 #e4bb8d;font:700 calc(23 * var(--u,1px))/1.1 Pixeloid,monospace;letter-spacing:2px;pointer-events:none;white-space:nowrap}
.pc-picker .pc-choice[data-locked="true"] .pc-choice-lock{display:block}
/* The (phone: sticky) Start button stays opaque when disabled, so the carousel dots never show through it. */
.pc-picker .pc-picker-start:disabled{opacity:1;color:#251b19a8;filter:grayscale(.4)}
/* A card the island cannot install yet is never advertised as the best value. */
.pc-picker .pc-choice[data-locked="true"] .pc-choice-best{display:none}
/* The owner's sale (10 Oct 2026; ui-copy.mjs salePriceText, token-prices.css): the card's dollars read "$25 $18.75 −25%",
   the list price struck through and the chip beside them; in the carousel's one-row flex line they keep a gap and may
   wrap between them on a narrow card. */
.pc-picker .pc-choice-usd.price-on-sale{flex-wrap:wrap;column-gap:.35em;row-gap:0;white-space:normal}