/* PC trade-in (trade-in-ui.mjs, owner decision 16 Oct 2026): TRADE-IN, a tile of its own at the left side of the island,
   and the Trade-in window (a wide .pcs-dialog: the PCs to trade in, the new PCs worth more, the receipt beside them and
   the Trade in button). The HUD's cream pixel style; text never below 12 px; buttons touch-sized on phones. The swap mark:
   a gold arrow out (the new PC) over a green arrow back (the old one). */
.trade-swap{display:block;width:100%;height:100%;image-rendering:pixelated}
.trade-swap-edge{fill:#3e211d}
.trade-swap-out{fill:#ffc93a}.trade-swap-out-hi{fill:#fff1a6}
.trade-swap-back{fill:#5fb346}.trade-swap-back-hi{fill:#c9f0a8}

/* ---------------------------------------------------------------- the island's tile */
/* PACKS' tile (packs.css .packs-entry: its frame, size, type, shine, hover and press) right above it in the same column,
   10 px apart (8 px on phones), the swap arrows over its name with a warm glow. Own island in the world view only; never
   while decorating, behind the wallet's sign-in or under a left-side panel. */
.trade-entry-root{position:fixed;left:0;top:0;width:0;height:0;z-index:60;font-family:Pixeloid,monospace;font-synthesis:none}
.trade-entry{position:fixed;left:18px;top:calc(var(--tile-col-y,50%) - 104px);transform:translateY(-50%);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;width:96px;height:94px;margin:0;padding:4px 2px 6px;border:8px solid transparent;border-image:url('/_a/b5a6bea5f9aa4d8c/preview/ui/frames/hud.svg') 12 fill stretch;
  background:none;border-radius:0;box-shadow:none;color:#492b22;font:700 12px/1 Pixeloid,monospace;letter-spacing:.02em;cursor:pointer;
  touch-action:manipulation;isolation:isolate;filter:drop-shadow(0 3px 0 #34273733)}
.trade-entry[hidden]{display:none!important}
.trade-entry-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;animation:trade-entry-bob 2.6s ease-in-out .65s infinite}
.trade-entry-icon svg{width:34px;height:44px}
.trade-entry-label{display:block;max-width:100%;overflow:hidden;white-space:nowrap}
.trade-entry::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 42%,#7fd36a59 0%,#7fd36a00 62%);pointer-events:none}
.trade-entry-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.trade-entry-shine::after{content:'';position:absolute;top:-30%;bottom:-30%;left:-60%;width:34%;transform:skewX(-18deg);
  background:linear-gradient(90deg,#fff0 0%,#fffbe8b3 50%,#fff0 100%);animation:trade-entry-shine 4.2s ease-in-out 1.05s infinite}
.trade-entry:focus-visible{outline:3px solid #58a7ce;outline-offset:2px}
.trade-entry:active{transform:translateY(calc(-50% + 2px))}
@media(hover:hover) and (pointer:fine){.trade-entry:hover{filter:drop-shadow(0 3px 0 #34273733) brightness(1.07)}}
@keyframes trade-entry-shine{0%,62%{left:-60%}88%,100%{left:130%}}
@keyframes trade-entry-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
body.decorating .trade-entry{display:none!important}
body[data-wallet-locked=true]>.trade-entry-root{visibility:hidden;pointer-events:none}
body:has(:is(.leaderboard-panel,.island-profile-panel,.island-style-panel):not([hidden])) .trade-entry{visibility:hidden}
@media(max-width:700px){
  .trade-entry{left:10px;top:calc(var(--tile-col-y,44%) - 80px);width:72px;height:72px;border-width:6px;gap:2px;font-size:10px;letter-spacing:0}
  .trade-entry-icon{width:32px;height:32px}
  .trade-entry-icon svg{width:25px;height:32px}
  /* the label is the longest of the column's (TRADE-IN): it keeps to the 72 px tile, a hair tighter */
  .trade-entry-label{font-size:9px;letter-spacing:-.02em}
}
/* The left column's place (packs.css): on a mouse screen clear of the camera's 28 px edge pan (app.mjs). */
@media(hover:hover) and (pointer:fine){.trade-entry{left:32px}}
/* TRADE-IN makes the column a tile taller at its top (review, 16 Oct 2026): 104 px above PACKS' centre line (80 px on
   phones) it met the HUD on screens of middle height: REFERRALS under LEADERBOARD (821-1164 px wide), the cards' SALE strip
   on a tablet in portrait, and on phones the cards' second and third rows (REFERRALS, Buy, the HASHRATE card, the SALE
   strip: 204 px down). So while TRADE-IN shows, the column's centre line (--tile-col-y: PACKS' middle) never rises above
   the line that keeps TRADE-IN's top clear of the HUD (8 px or more), and PACKS, STAKE and the Daily Social Pot move down
   with it (their own places: packs.css, stake-boost.css, social-pot.css). Where the four tiles so placed would reach the
   foot of the screen (on a phone the settings gear above the navigation, settings.css: 123 px up), they stand in the short
   screen's row instead (below). From 1165 px the HUD's left side is one row and the column keeps its place. */
:root{--tile-col-y:50%}
@media(min-width:701px) and (max-width:1164px){:root{--tile-col-y:max(50%,312px)}}
@media(max-width:700px){:root{--tile-col-y:max(44%,328px)}}
@media(min-width:1165px) and (min-height:541px),(min-width:701px) and (max-width:1164px) and (min-height:581px),(max-width:700px) and (min-height:655px){
  body:has(.trade-entry:not([hidden])) .packs-entry,body:has(.trade-entry:not([hidden])) .social-pot-entry{top:var(--tile-col-y)}
  body:has(.trade-entry:not([hidden])) .stake-entry{top:calc(var(--tile-col-y) + 104px)}
  body:has(.trade-entry:not([hidden])):has(.packs-entry:not([hidden])) .social-pot-entry{top:calc(var(--tile-col-y) + 57px)}
  body:has(.trade-entry:not([hidden])):has(.stake-entry:not([hidden])) .social-pot-entry{top:calc(var(--tile-col-y) + 161px)}
}
@media(max-width:700px) and (min-height:655px){
  body:has(.trade-entry:not([hidden])) .stake-entry{top:calc(var(--tile-col-y) + 80px)}
  body:has(.trade-entry:not([hidden])):has(.packs-entry:not([hidden])) .social-pot-entry{top:calc(var(--tile-col-y) + 44px)}
  body:has(.trade-entry:not([hidden])):has(.stake-entry:not([hidden])) .social-pot-entry{top:calc(var(--tile-col-y) + 124px)}
}
/* The row (packs.css --tile-row-x, --tile-row-y; 56 px tiles 6 px apart): PACKS, STAKE, the Daily Social Pot, then TRADE-IN
   right after the last of them that shows (the Pot alone: after it). On a short screen (at most 540 px tall) the other
   tiles' own rules put them there; on the taller screens above where the column does not fit, these do the same while
   TRADE-IN shows. */
@media(max-height:540px),(max-width:700px) and (max-height:654px),(min-width:701px) and (max-width:1164px) and (max-height:580px){
  .trade-entry{left:var(--tile-row-x,18px);top:var(--tile-row-y,calc(100% - 42px));width:56px;height:56px;border-width:5px;padding:2px 1px 3px;gap:1px;font-size:10px}
  body:has(.packs-entry:not([hidden])) .trade-entry,body:has(.social-pot-entry:not([hidden])) .trade-entry{left:calc(var(--tile-row-x,18px) + 62px)}
  body:has(.stake-entry:not([hidden])) .trade-entry,body:has(.packs-entry:not([hidden])):has(.social-pot-entry:not([hidden])) .trade-entry{left:calc(var(--tile-row-x,18px) + 124px)}
  body:has(.stake-entry:not([hidden])):has(.social-pot-entry:not([hidden])) .trade-entry{left:calc(var(--tile-row-x,18px) + 186px)}
  .trade-entry-icon{width:26px;height:26px}
  .trade-entry-icon svg{width:20px;height:26px}
  .trade-entry-label{font-size:8px;letter-spacing:-.03em}
  body:has(.trade-entry:not([hidden])) .packs-entry{left:var(--tile-row-x,18px);top:var(--tile-row-y,calc(100% - 42px));width:56px;height:56px;border-width:5px;padding:2px 1px 3px;gap:1px;font-size:10px}
  body:has(.trade-entry:not([hidden])) .packs-entry .pixel-icon{width:26px;height:26px}
  body:has(.trade-entry:not([hidden])) .stake-entry{left:calc(var(--tile-row-x,18px) + 62px);top:var(--tile-row-y,calc(100% - 42px));width:56px;height:56px;border-width:5px;padding:2px 1px 3px;gap:1px;font-size:10px}
  body:has(.trade-entry:not([hidden])) .stake-entry-icon{width:26px;height:26px}
  body:has(.trade-entry:not([hidden])) .social-pot-entry,body:has(.trade-entry:not([hidden])):has(:is(.packs-entry,.stake-entry):not([hidden])) .social-pot-entry{
    left:var(--tile-row-x,18px);top:var(--tile-row-y,calc(100% - 42px));transform:translateY(-50%);width:56px;height:56px;border-width:5px;padding:2px 1px 3px;gap:1px;font-size:10px}
  body:has(.trade-entry:not([hidden])):has(.packs-entry:not([hidden])) .social-pot-entry{left:calc(var(--tile-row-x,18px) + 62px)}
  body:has(.trade-entry:not([hidden])):has(.stake-entry:not([hidden])) .social-pot-entry{left:calc(var(--tile-row-x,18px) + 124px)}
  body:has(.trade-entry:not([hidden])) .social-pot-frame{width:26px;height:26px}
  body:has(.trade-entry:not([hidden])) .social-pot-x{width:12px;height:12px;right:-7px;bottom:-2px}
  body:has(.trade-entry:not([hidden])) .social-pot-dot{top:-8px;right:-8px;width:10px;height:10px}
}
@media(prefers-reduced-motion:reduce){.trade-entry-shine::after,.trade-entry-icon{animation:none}.trade-entry:active{transform:translateY(-50%)}}

/* ---------------------------------------------------------------- the window */
.ti-dialog{--q:clamp(.9px,min(calc((100vw - 24px) / 1000),calc((100dvh - 24px) / 720)),1.2px);width:min(calc(1000 * var(--q)),calc(100vw - 24px))}
.ti-title-icon{display:grid;flex:none;width:calc(24 * var(--q));height:calc(31 * var(--q))}
.ti-dialog .pcs-dialog-title{font-size:max(17px,calc(23 * var(--q)));letter-spacing:.03em;text-transform:uppercase}
.ti-body{gap:calc(10 * var(--q))}
.ti-intro{color:var(--ink)}
/* The choices on the left, the receipt beside them (it stays in view while the cards scroll). */
.ti-layout{display:grid;grid-template-columns:minmax(0,1fr) calc(310 * var(--q));gap:calc(14 * var(--q));align-items:start}
.ti-main{display:grid;gap:calc(12 * var(--q));min-width:0}
.ti-step{display:grid;gap:calc(7 * var(--q));min-width:0}
.ti-step-title{display:flex;align-items:center;gap:calc(8 * var(--q));font:700 max(14px,calc(16 * var(--q)))/1.2 Pixeloid,monospace;letter-spacing:.03em;text-transform:uppercase}
.ti-step-number{display:grid;place-items:center;flex:none;width:calc(26 * var(--q));height:calc(26 * var(--q));min-width:22px;min-height:22px;background:#3e211d;color:#fff4d2;
  font:700 max(13px,calc(14 * var(--q)))/1 Pixeloid,monospace;box-shadow:inset 0 calc(-3 * var(--q)) #00000040}
.ti-hint{padding:calc(10 * var(--q)) calc(12 * var(--q));background:#fffaf0;border:calc(2 * var(--q)) dashed #e2c896;color:var(--soft);font-size:max(13px,calc(13.5 * var(--q)))}
.ti-load-failed{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--q));flex-wrap:wrap}
.ti-load-failed>.pcs-button{min-height:40px}
/* The cards: one row of radio buttons each, wrapping; the chosen one lifted with a thicker frame and its tick. */
/* Your PC: compact cards, the picture beside the words; New PC: small tiles, the picture over them. */
.ti-pcs,.ti-targets{display:grid;gap:calc(9 * var(--q));padding-top:calc(4 * var(--q))}
.ti-pcs{grid-template-columns:repeat(auto-fill,minmax(max(210px,calc(228 * var(--q))),1fr))}
.ti-targets{grid-template-columns:repeat(auto-fill,minmax(max(124px,calc(136 * var(--q))),1fr))}
.ti-pc,.ti-new{--ti-edge:#e2c896;--ti-tint:#fffaf0;--ti-deep:#3e211d;position:relative;display:flex;flex-direction:column;align-items:stretch;gap:calc(4 * var(--q));min-width:0;
  padding:calc(7 * var(--q));border:calc(3 * var(--q)) solid var(--ti-edge);background:var(--ti-tint);color:var(--ink);text-align:left;cursor:pointer;
  font:400 max(12px,calc(12.5 * var(--q)))/1.3 Pixeloid,monospace}
.ti-new{--ti-edge:#f1cd7a;--ti-tint:#fff7e1;--ti-deep:#9a5a0a}
.ti-pc{display:grid;grid-template-columns:calc(78 * var(--q)) minmax(0,1fr);align-content:center;column-gap:calc(8 * var(--q));row-gap:calc(3 * var(--q))}
.ti-pc>.ti-art{grid-column:1;grid-row:1/span 3;align-self:center}
.ti-pc>:not(.ti-art,.ti-check){grid-column:2;min-width:0}
.ti-new>.ti-art{aspect-ratio:auto;height:calc(66 * var(--q))}
.ti-pc[data-where=storage]{--ti-edge:#acd0e9;--ti-tint:#f2f8fd;--ti-deep:#244c70}
.ti-pc[aria-checked=true],.ti-new[aria-checked=true]{border-width:calc(5 * var(--q));border-color:var(--ti-deep);padding:calc(5 * var(--q));
  box-shadow:0 calc(4 * var(--q)) 0 #3e211d2e;translate:0 calc(-3 * var(--q))}
.ti-pc:not(:disabled,[data-off]):hover,.ti-new:not(:disabled):hover{filter:brightness(1.03)}
.ti-pc:disabled,.ti-new:disabled{cursor:not-allowed}
.ti-pc[data-off]{cursor:default;opacity:.72;background:#f4ede0;border-style:dashed}
.ti-new[data-locked=true]{--ti-edge:#d8c8ac;--ti-tint:#f6f0e4}
.ti-check{position:absolute;top:calc(-11 * var(--q));right:calc(-11 * var(--q));z-index:1;display:none;place-items:center;width:calc(26 * var(--q));height:calc(26 * var(--q));
  padding:calc(5 * var(--q));background:var(--ti-deep);border:calc(2 * var(--q)) solid #3e211d;color:#fffbe9}
.ti-check svg{width:100%;height:100%}
:is(.ti-pc,.ti-new)[aria-checked=true] .ti-check{display:grid}
.ti-pc-head{display:flex;align-items:center;flex-wrap:wrap;gap:calc(4 * var(--q));min-height:calc(22 * var(--q))}
/* The desk's tag and the chips shrink with the card and end in an ellipsis rather than spill past it (a phone, a long
   translation: review, 16 Oct 2026). */
.ti-tag{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:calc(3 * var(--q)) calc(6 * var(--q)) calc(2 * var(--q));
  background:var(--pc,#f0913a);border:calc(2 * var(--q)) solid #3e211d;
  box-shadow:inset 0 calc(3 * var(--q)) #ffffff47,inset 0 calc(-3 * var(--q)) #00000024;color:#20120b;font:700 max(12px,calc(12 * var(--q)))/1 Pixeloid,monospace;white-space:nowrap}
.ti-tag[data-where=storage]{background:#cfe5f6;color:#244c70}
/* What the old PC has: its running overclock (lost in any trade: red) and its GPU level, in a quiet tint of the game's GPU
   badge (gpu-workshop.css .gw-badge): whether the level carries to the new PC's card depends on that PC, so the receipt
   says it per new PC (owner, 16 Oct 2026: equal extra hash). */
.ti-chip{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:calc(2 * var(--q)) calc(5 * var(--q));
  border:calc(2 * var(--q)) solid #e0503a;background:#fff1ec;color:#9b2a1c;font:700 max(12px,calc(11.5 * var(--q)))/1.1 Pixeloid,monospace;white-space:nowrap}
.ti-chip[data-chip=gpu]{border-color:#d9b35a;background:#fff7dc;color:#6e4a12}
/* The pictures: the PC on its sky and a patch of grass (pc-storage.css .pcs-art). */
.ti-art{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(180deg,#bfe1fb 0%,#dff0fc 52%,#fbf3dc 100%);border:calc(2 * var(--q)) solid #b9d6ec}
.ti-art::after{content:'';position:absolute;z-index:-1;left:8%;right:8%;bottom:6%;height:26%;border-radius:50%;
  background:radial-gradient(closest-side,#c3e48c 0 70%,#a6d16b 74% 88%,#86b450 90% 96%,transparent 98%)}
.ti-art img{position:relative;display:block;width:100%;height:100%;object-fit:contain;padding:calc(3 * var(--q)) calc(4 * var(--q)) calc(8 * var(--q));filter:drop-shadow(0 2px 0 #3e211d22)}
.ti-art[data-empty=true] img{visibility:hidden}
.ti-name{font:700 max(13px,calc(14.5 * var(--q)))/1.2 Pixeloid,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-spec{color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti-coin{display:inline-grid;flex:none;width:calc(18 * var(--q));height:calc(18 * var(--q));min-width:16px;min-height:16px;vertical-align:middle}
.ti-coin .pixel-icon{display:block;width:100%;height:100%;image-rendering:pixelated}
.ti-value,.ti-price{display:flex;align-items:center;flex-wrap:wrap;gap:calc(4 * var(--q));font-variant-numeric:tabular-nums}
.ti-value-label{flex-basis:100%;color:var(--muted);font-size:max(12px,calc(11.5 * var(--q)))}
.ti-value-amount,.ti-price-amount{font:700 max(14px,calc(16 * var(--q)))/1.1 Pixeloid,monospace;color:#3a1c08}
.ti-reason{color:#873e2d;font-size:max(12px,calc(11.5 * var(--q)));line-height:1.3}
/* A new PC: its price, then what the trade costs ("You pay"), in green; a locked one its reason in brown. */
.ti-pay{display:flex;align-items:baseline;flex-wrap:wrap;gap:calc(4 * var(--q));padding:calc(3 * var(--q)) calc(5 * var(--q));background:#e9f6dc;border:calc(2 * var(--q)) solid #9fd27f;
  font-variant-numeric:tabular-nums}
.ti-pay-label{color:#2f6a2b;font-size:max(12px,calc(11.5 * var(--q)))}
.ti-pay-amount{font:700 max(13px,calc(14 * var(--q)))/1.1 Pixeloid,monospace;color:#2f6a2b}
.ti-lock{padding:calc(3 * var(--q)) calc(5 * var(--q));background:#fff1dc;border:calc(2 * var(--q)) solid #ebb07c;color:#8a3c12;font-size:max(12px,calc(11.5 * var(--q)));line-height:1.25}

/* ---------------------------------------------------------------- the receipt */
.ti-summary{position:sticky;top:0;display:grid;gap:calc(8 * var(--q));padding:calc(10 * var(--q)) calc(12 * var(--q)) calc(12 * var(--q));background:#fffdf6;
  border:calc(3 * var(--q)) solid #3e211d;box-shadow:inset 0 calc(6 * var(--q)) #ffc93a,0 calc(4 * var(--q)) 0 #3e211d2e}
.ti-summary-title{font:700 max(14px,calc(16 * var(--q)))/1.2 Pixeloid,monospace;letter-spacing:.03em;text-transform:uppercase;padding-top:calc(4 * var(--q))}
.ti-summary-hint{color:var(--soft);font-size:max(13px,calc(13 * var(--q)))}
/* The two PCs: the old one greyed, the arrow, the new one. */
.ti-swap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:calc(6 * var(--q))}
.ti-swap-side{display:grid;gap:calc(3 * var(--q));justify-items:center;min-width:0;text-align:center}
.ti-swap-old .ti-art img{filter:grayscale(.6) drop-shadow(0 2px 0 #3e211d22);opacity:.8}
.ti-swap-side[data-empty=true] .ti-art{background:#f4ede0;border-style:dashed;border-color:#d8c8ac}
.ti-swap-side[data-empty=true] .ti-art::after{display:none}
.ti-swap-name{max-width:100%;font:700 max(12px,calc(12.5 * var(--q)))/1.2 Pixeloid,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-swap-side[data-empty=true] .ti-swap-name{color:var(--muted);font-weight:400}
.ti-swap-arrow{display:grid;width:calc(22 * var(--q));height:calc(18 * var(--q));color:#3e211d}
.ti-swap-arrow svg{width:100%;height:100%}
/* The rows: the new PC's price, the old one's value taken off, then what is paid, bigger, under a dashed line. */
.ti-rows{display:grid;gap:calc(4 * var(--q));margin:0}
.ti-row{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8 * var(--q));min-width:0}
.ti-row[data-row=pay]{flex-wrap:wrap}
.ti-row[data-row=pay] .ti-row-label{white-space:nowrap}
.ti-row[data-row=pay] .ti-row-amount{flex:1 1 auto}
.ti-row-label{display:grid;gap:1px;min-width:0;color:var(--soft);font-size:max(13px,calc(13 * var(--q)))}
.ti-row-name{color:var(--ink);font-size:max(12px,calc(12 * var(--q)));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-row-amount{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:calc(4 * var(--q));margin:0;font:700 max(14px,calc(15 * var(--q)))/1.15 Pixeloid,monospace;
  color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.ti-row[data-row=old] .ti-row-amount,.ti-row[data-row=sale] .ti-row-amount{color:#2f6a2b}
/* The sale's row: its label in the sale's red, so it reads with the struck difference and the chip under it. */
.ti-row[data-row=sale] .ti-row-label>span:first-child{color:#c23a22;font-weight:700}
.ti-row[data-row=pay]{margin-top:calc(3 * var(--q));padding-top:calc(7 * var(--q));border-top:calc(2 * var(--q)) dashed #c9a26e}
.ti-row[data-row=pay] .ti-row-label{color:var(--ink);font-weight:700;font-size:max(14px,calc(15 * var(--q)))}
.ti-row[data-row=pay] .ti-row-amount{font-size:max(17px,calc(21 * var(--q)));color:#3a1c08}
.ti-row[data-row=pay] .ti-coin{width:calc(22 * var(--q));height:calc(22 * var(--q))}
.ti-row-amount.price-on-sale>.price-was{font-size:.78em}
.ti-where{display:flex;align-items:center;gap:calc(6 * var(--q));padding:calc(4 * var(--q)) calc(7 * var(--q));background:#eef6fd;border:calc(2 * var(--q)) solid #acd0e9;color:#244c70;
  font:700 max(13px,calc(13 * var(--q)))/1.25 Pixeloid,monospace}
.ti-where-icon{display:grid;flex:none;width:calc(14 * var(--q));height:calc(12 * var(--q))}
.ti-where-icon svg{width:100%;height:100%}
/* A GPU level that carries to the new PC's card (owner, 16 Oct 2026: equal extra hash, rounded down): one line in the
   receipt's green ("You pay"'s), its rule in small type under it. */
.ti-kept{display:grid;gap:calc(2 * var(--q));padding:calc(6 * var(--q)) calc(8 * var(--q));background:#e9f6dc;border:calc(2 * var(--q)) solid #9fd27f}
.ti-kept-line{display:flex;align-items:flex-start;gap:calc(6 * var(--q));color:#2f6a2b;font:700 max(13px,calc(13 * var(--q)))/1.3 Pixeloid,monospace}
.ti-kept-icon{display:grid;flex:none;width:calc(15 * var(--q));height:calc(12 * var(--q));margin-top:calc(2 * var(--q));color:#3f8f35}
.ti-kept-icon svg{width:100%;height:100%}
.ti-kept-hint{padding-left:calc(21 * var(--q));color:#4f7a47;font-size:max(12px,calc(12 * var(--q)));line-height:1.3}
/* Every loss in red, one line each; a new PC the trade cannot buy now says why in amber. */
.ti-warnings{display:grid;gap:calc(4 * var(--q));padding:calc(6 * var(--q)) calc(8 * var(--q));background:#ffe9e2;border:calc(2 * var(--q)) solid #e0503a}
.ti-warning{display:flex;align-items:flex-start;gap:calc(6 * var(--q));color:#9b2a1c;font:700 max(13px,calc(13 * var(--q)))/1.3 Pixeloid,monospace}
.ti-warning-icon{display:grid;flex:none;width:calc(15 * var(--q));height:calc(14 * var(--q));margin-top:calc(1 * var(--q));color:#d8432a}
.ti-warning-icon svg{width:100%;height:100%}
/* A one-per-island card traded in can never be bought again: an amber line under the losses. */
.ti-limit{padding:calc(5 * var(--q)) calc(8 * var(--q));background:#fff6e0;border:calc(2 * var(--q)) solid #e9c46a;color:#7a4a08;
  font:700 max(12px,calc(12.5 * var(--q)))/1.35 Pixeloid,monospace}
/* A stored PC's trade: placing the new PC later needs a desk's power and Island Level (right under "Goes to storage"). */
.ti-note.ti-where-note{margin-top:calc(-4 * var(--q));color:#244c70}
.ti-locked{display:grid;gap:calc(2 * var(--q));padding:calc(6 * var(--q)) calc(8 * var(--q));background:#fff1dc;border:calc(2 * var(--q)) solid #ebb07c;color:#8a3c12}
.ti-locked-label{font:700 max(13px,calc(13 * var(--q)))/1.25 Pixeloid,monospace}
.ti-locked-text{font-size:max(12px,calc(12.5 * var(--q)));line-height:1.35}
.ti-note,.ti-waiting{color:var(--soft);font-size:max(12px,calc(12.5 * var(--q)));line-height:1.4}
.ti-waiting{color:#8a3c12}
.ti-error{grid-column:1/-1}
.ti-empty{display:grid;justify-items:center;gap:calc(8 * var(--q));padding:calc(18 * var(--q)) calc(12 * var(--q));background:#fffaf0;border:calc(2 * var(--q)) dashed #e2c896;text-align:center}
.ti-empty-icon{display:grid;width:calc(40 * var(--q));height:calc(52 * var(--q))}
.ti-empty-text{max-width:42ch;color:var(--soft)}

/* ---------------------------------------------------------------- the footer: Close, then Trade in with what it costs */
/* A trade that loses something (a GPU level, a running overclock) shows its first loss at the footer's left, in the
   receipt's red; on a phone on a line of its own above the buttons. */
.ti-footer{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:stretch;gap:calc(12 * var(--q));padding:calc(10 * var(--q)) calc(14 * var(--q)) calc(12 * var(--q));
  background:#fff8e2;border-top:calc(2 * var(--q)) solid #ecd9ae}
.ti-footer>.ti-footer-warning{flex:1 1 calc(220 * var(--q));align-self:center;align-items:center;min-width:0;margin:0 auto 0 0;padding:calc(6 * var(--q)) calc(9 * var(--q));
  background:#ffe9e2;border:calc(2 * var(--q)) solid #e0503a}
.ti-footer-warning .ti-warning-icon{margin-top:0}
.ti-footer>.pcs-button{min-height:max(52px,calc(58 * var(--q)))}
.ti-close{min-width:calc(150 * var(--q))}
.ti-go{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--q));min-width:calc(270 * var(--q));text-align:left}
.ti-go-icon{display:grid;flex:none;width:calc(22 * var(--q));height:calc(29 * var(--q))}
.ti-go:disabled .ti-go-icon{filter:grayscale(1);opacity:.55}
.ti-go-copy{display:grid;gap:calc(2 * var(--q));min-width:0}
.ti-go-label{font-size:max(14px,calc(15 * var(--q)))}
.ti-go-cost{font-size:max(12px,calc(12.5 * var(--q)));color:#6a3a16;white-space:nowrap;font-variant-numeric:tabular-nums}
.ti-go:disabled .ti-go-cost{color:#a8987f}

/* ---------------------------------------------------------------- MY PCS and the Market */
/* MY PCS: Trade in beside Build, Move and Store (my-pcs.css .mypcs-tools), its arrows gold and green. */
.mypcs-tools[data-count="4"]{--tools:4}
.mypcs-tool[data-tool=trade] .mypcs-icon-fill{fill:#e0a92a}.mypcs-tool[data-tool=trade] .mypcs-icon-accent{fill:#fff1a6}
.workshop-ui[data-mode=market] .garden-market .market-detail-actions .market-trade{margin:0;width:100%;min-height:calc(38 * var(--mk));
  font:700 calc(16 * var(--mk))/1.2 Rajdhani,sans-serif}

/* ---------------------------------------------------------------- narrow screens */
/* Your PC's cards keep the picture beside the words, so they stay wide enough for a name and its chips (250 px; one card a
   row on a phone); New PC's small tiles stand two or more a row. */
/* The receipt under the cards: the footer's loss on a line of its own above Close and Trade in, which share the next. */
@media(max-width:760px){
  .ti-layout{grid-template-columns:minmax(0,1fr)}
  .ti-summary{position:static}
  .ti-pcs{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .ti-targets{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .ti-footer>.ti-footer-warning{flex:1 1 100%}
}
@media(max-width:620px){
  .ti-dialog{--q:1px}
  .ti-footer{gap:10px;padding:9px 10px 10px}
  .ti-footer>.ti-close{flex:0 0 auto;min-width:96px}
  .ti-footer>.ti-go{flex:1 1 0;min-width:0;gap:8px;padding-inline:8px}
  .ti-pcs{grid-template-columns:minmax(0,1fr);gap:8px}
  .ti-targets{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media(prefers-reduced-motion:reduce){.ti-pc,.ti-new{translate:none!important}}