/* Trade calculator: the two sides of a trade, the verdict and the item picker.
   Value is blue and RAP green wherever they show; the box an item goes into
   next is outlined blue, and a filled box turns red when it would be removed. */
.calc-page{--calc-slot:color-mix(in srgb,var(--theme-raised) 70%,var(--theme-surface));--calc-slot-line:color-mix(in srgb,var(--theme-border) 70%,transparent);--calc-pick:hsl(var(--theme-hue,217) calc(100% * var(--theme-saturation,1)) 62%);--calc-pick-fill:hsl(var(--theme-hue,217) calc(42% * var(--theme-saturation,1)) 14%);--calc-remove:#ff5f6d;--calc-value:var(--theme-accent);--calc-rap:#63d6a2;width:min(1500px,calc(100% - 64px));margin:28px auto 64px}
.calc-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.calc-heading h1{margin:6px 0 8px;font-size:30px;line-height:1.15}
.calc-heading p{margin:0;color:var(--muted);max-width:620px}
.calc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.calc-actions .button{min-width:0}
/* Labels: what shows under each item. */
.calc-labels{position:relative}
.calc-labels .button b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--theme-accent) 20%,transparent);color:var(--theme-accent);font-size:11.5px;box-sizing:border-box}
.calc-label-menu{position:absolute;z-index:20;top:calc(100% + 6px);left:0;display:grid;gap:2px;min-width:180px;padding:6px;border:1px solid var(--theme-border);border-radius:10px;background:var(--theme-surface);box-shadow:0 14px 34px #0009}
.calc-label-menu[hidden]{display:none}
.calc-label-menu label{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;font-size:13.5px;font-weight:600;cursor:pointer}
.calc-label-menu label:hover{background:var(--theme-raised)}
.calc-label-menu input,.calc-shot-labels input{width:16px;height:16px;margin:0;accent-color:var(--theme-primary)}
/* The two sides, with the swap button between them. */
.calc-board{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:12px;align-items:stretch}
.calc-side{display:flex;flex-direction:column;gap:16px;min-width:0;container:calc-side/inline-size;padding:18px;border:1px solid var(--theme-border);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--theme-raised) 28%,var(--theme-surface)),var(--theme-surface) 160px);box-shadow:0 14px 34px #0000002e}
.calc-side-receive{border-color:color-mix(in srgb,var(--theme-accent) 30%,var(--theme-border));background:linear-gradient(180deg,color-mix(in srgb,var(--theme-accent) 8%,var(--theme-surface)),color-mix(in srgb,var(--theme-accent) 3%,var(--theme-surface)) 160px)}
.calc-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.calc-side-head h2{margin:0;font-size:17px;font-weight:750}
.calc-side-receive .calc-side-head h2{color:var(--theme-accent)}
.calc-side-head span{padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--theme-raised) 85%,transparent);color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}
/* The boxes: solid, like a Roblox trade window. */
.calc-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
.calc-slot{min-width:0}
.calc-slot-tile{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;padding:0;border:1px solid var(--calc-slot-line);border-radius:12px;background:var(--calc-slot);color:var(--muted);font:inherit;box-sizing:border-box;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s,color .15s}
.calc-slot-tile img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 6px 10px #00000059);transition:transform .2s}
.calc-slot-tile.is-empty .icon{width:22px;height:22px}
.calc-slot-tile.is-empty:hover,.calc-slot-tile.is-empty:focus-visible{border-color:color-mix(in srgb,var(--calc-pick) 55%,var(--calc-slot-line));color:var(--text)}
/* The box the next item goes into, once a box or side is chosen. */
.calc-slot-tile.is-target,.calc-slot-tile.is-target:is(:hover,:focus-visible){border-color:var(--calc-pick);background:var(--calc-pick-fill);color:var(--calc-pick);box-shadow:inset 0 0 0 1px var(--calc-pick)}
.calc-slot-tile.is-target .icon{stroke-width:2.25}
/* A box with something in it removes it when clicked, and turns red first. */
.calc-slot-remove{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--calc-remove);opacity:0;transition:opacity .15s}
.calc-slot-remove .icon{width:14px;height:14px;stroke-width:2.4}
.calc-slot-tile:is(.is-filled,.calc-cash):is(:hover,:focus-visible){border-color:var(--calc-remove);box-shadow:inset 0 0 0 1px var(--calc-remove)}
.calc-slot-tile.is-filled:is(:hover,:focus-visible){background:color-mix(in srgb,var(--calc-remove) 7%,var(--calc-slot))}
.calc-slot-tile:is(.is-filled,.calc-cash):is(:hover,:focus-visible) .calc-slot-remove{opacity:1}
.calc-slot-tile.is-filled:hover img{transform:scale(.95)}
@media(hover:none){.calc-slot-remove{opacity:1}}
.calc-slot-labels{display:grid;gap:1px;margin-top:7px;font-size:12px;line-height:1.35;text-align:center}
.calc-slot-labels>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.calc-label-name{font-weight:650;color:var(--text)}
.calc-label-price{font-weight:700;color:#edbf59}
.calc-label-value{font-weight:650;color:var(--calc-value)}
.calc-label-rap{font-weight:650;color:var(--calc-rap)}
/* Robux and USD on a side: a box of their own in the empty boxes furthest right. */
.calc-slot-tile.calc-cash{align-content:center;gap:1px}
.calc-cash strong{max-width:92%;overflow:hidden;font-size:16px;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.calc-cash small{max-width:92%;overflow:hidden;font-size:11px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.calc-cash-icon .icon{width:18px;height:18px}
.calc-cash.is-usd{border-color:#3fbf7f99;background:linear-gradient(135deg,#1f7a4d,#0f4d30);color:#eafff3}
.calc-cash.is-usd :is(small,.calc-cash-icon .icon){color:#b9f5d3}
.calc-cash.is-robux{border-color:color-mix(in srgb,var(--theme-accent) 55%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--theme-primary) 80%,#000),color-mix(in srgb,var(--theme-primary) 45%,#000));color:var(--theme-on-primary,#fff)}
.calc-cash.is-robux :is(small,.calc-cash-icon .icon){color:color-mix(in srgb,var(--theme-on-primary,#fff) 78%,transparent)}
/* Adding Robux or USD: the amount and its Add button share one field. */
.calc-adds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@container calc-side (max-width:400px){.calc-adds{grid-template-columns:minmax(0,1fr)}}
.calc-add{display:flex;align-items:center;gap:6px;min-width:0;height:44px;padding:0 5px 0 12px;border:1px solid var(--calc-slot-line);border-radius:12px;background:var(--calc-slot);box-sizing:border-box;transition:border-color .15s}
.calc-add:focus-within{border-color:var(--theme-accent)}
.calc-add-field{display:flex;flex:1;align-items:center;gap:8px;min-width:0;height:100%;cursor:text}
.calc-add-unit{display:grid;flex:none;place-items:center;width:18px;color:var(--muted);font-weight:700}
.calc-add-unit .icon{width:18px;height:18px}
/* Inputs site-wide get the control surface; this one shows the field's own. */
.calc-add-field input{flex:1;width:100%;min-width:0;height:100%;padding:0;border:0;background:transparent!important;font:inherit;font-size:14px;outline:0}
.calc-add-button{flex:none;height:34px;padding:0 14px;border:0;border-radius:8px;background:var(--theme-primary);color:var(--theme-on-primary,#fff);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.calc-add-button:hover{background:var(--theme-primary-hover,var(--theme-primary))}
.calc-add:has(input:placeholder-shown) .calc-add-button{background:transparent;color:var(--muted)}
.calc-add:has(input:placeholder-shown) .calc-add-button:hover{color:var(--text)}
/* Totals: Price, then Value (blue) and RAP (green) in Robux. */
.calc-side>[data-calc-totals]{margin-top:auto}
.calc-totals{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;margin:0;padding-top:14px;border-top:1px solid var(--calc-slot-line)}
.calc-totals div{min-width:0}
.calc-totals dt{color:var(--muted);font-size:12px;font-weight:600}
.calc-totals dd{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:4px 0 0;font-size:16px;font-weight:750;overflow-wrap:anywhere}
.calc-total-price dd{font-size:24px;font-weight:800;letter-spacing:-.01em}
.calc-total-value dd{color:var(--calc-value)}
.calc-total-rap{text-align:right}
.calc-total-rap dd{justify-content:flex-end;color:var(--calc-rap)}
.calc-robux-mark{display:inline-grid;flex:none}
.calc-robux-mark .icon{width:15px;height:15px}
.calc-missing{display:flex;align-items:center;gap:6px;margin:10px 0 0;color:var(--muted);font-size:12px}
.calc-missing .icon{flex:none;width:14px;height:14px}
.calc-swap{align-self:center;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--theme-border);border-radius:50%;background:var(--theme-surface);color:var(--text);cursor:pointer;box-shadow:0 6px 18px #0000004d;transition:border-color .15s,color .15s,transform .25s}
.calc-swap:hover,.calc-swap:focus-visible{border-color:var(--theme-accent);color:var(--theme-accent);transform:rotate(180deg)}
.calc-swap .icon{width:19px;height:19px}
/* The verdict: what you receive less what you give. */
.calc-verdict{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;margin-top:14px;padding:18px 22px;border:1px solid var(--theme-border);border-radius:16px;background:var(--theme-surface)}
.calc-verdict.is-empty{grid-template-columns:1fr}
.calc-verdict.is-gain{border-color:rgb(72 199 142 / 45%);background:color-mix(in srgb,#48c78e 8%,var(--theme-surface))}
.calc-verdict.is-loss{border-color:rgb(239 83 100 / 45%);background:color-mix(in srgb,#ef5364 8%,var(--theme-surface))}
.calc-verdict-text span{display:block;color:var(--muted);font-size:12px;font-weight:600}
.calc-verdict-text strong{display:block;margin-top:3px;font-size:21px}
.calc-verdict-amount{display:flex;align-items:baseline;justify-content:center;gap:10px}
.calc-verdict-amount strong{font-size:30px;font-weight:800;line-height:1.1}
.is-gain .calc-verdict-amount{color:#63d6a2}
.is-loss .calc-verdict-amount{color:#ff858f}
.calc-verdict-percent{font-size:13px;font-weight:700}
.calc-verdict-percent i{margin-right:3px;font-size:10px;font-style:normal}
.calc-verdict-diffs{display:flex;justify-content:flex-end;gap:28px;margin:0}
.calc-verdict-diffs dt{color:var(--muted);font-size:12px;font-weight:600;text-align:right}
.calc-verdict-diffs dd{margin:3px 0 0;font-size:16px;font-weight:700;text-align:right}
.calc-verdict-diffs div:first-child dd{color:var(--theme-accent)}
/* The item picker under the calculator, a page of items at a time. */
.calc-picker{margin-top:30px;padding-top:24px;border-top:1px solid var(--theme-border)}
.calc-picker-head{margin-bottom:14px}
.calc-picker-head h2{margin:0 0 4px;font-size:20px}
.calc-picker-head p{margin:0;color:var(--muted);font-size:13.5px}
/* "Add to": which side the next item goes to, in the toolbar with the count. */
.calc-add-to{display:flex;align-items:center;gap:10px}
.calc-add-to>span{color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
.calc-target{display:inline-flex;height:42px;padding:3px;border:1px solid var(--theme-border);border-radius:10px;background:var(--theme-surface);box-sizing:border-box}
.calc-target button{padding:0 14px;border:0;border-radius:7px;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:650;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.calc-target button:hover{color:var(--text)}
.calc-target button[aria-checked=true]{background:var(--theme-primary);color:var(--theme-on-primary,#fff)}
.calc-pick-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.calc-pick-grid>.empty-state,.calc-pick-grid>.market-loading{grid-column:1/-1}
.calc-pick{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:10px 8px 11px;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-surface);color:var(--text);font:inherit;text-align:center;cursor:pointer;transition:border-color .15s,transform .15s}
.calc-pick:hover,.calc-pick:focus-visible{border-color:var(--theme-accent);transform:translateY(-2px)}
.calc-pick-art{display:grid;place-items:center;width:100%;aspect-ratio:1;margin-bottom:4px}
.calc-pick-art img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 6px 10px #00000059)}
.calc-pick strong{width:100%;overflow:hidden;font-size:12px;font-weight:650;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}
.calc-pick-price{color:#edbf59;font-size:13px;font-weight:700}
.calc-pick small{max-width:100%;overflow:hidden;color:var(--muted);font-size:11px;white-space:nowrap;text-overflow:ellipsis}
.calc-pick-value{color:var(--calc-value);font-weight:650}
.calc-pick-rap{color:var(--calc-rap);font-weight:650}
/* The screenshot and share dialogs. */
dialog.calc-shot-dialog{width:min(860px,calc(100vw - 32px))}
.calc-shot{display:grid;gap:14px}
.calc-shot-preview{display:grid;place-items:center;min-height:240px;border:1px solid var(--theme-border);border-radius:12px;background:var(--bg);overflow:hidden}
.calc-shot-preview img{display:block;width:100%;height:auto}
.calc-shot-labels{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;border:0}
.calc-shot-labels legend{float:left;margin-right:6px;padding:0;color:var(--muted);font-size:13px}
.calc-shot-labels label{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1px solid var(--theme-border);border-radius:999px;font-size:13px;font-weight:600;cursor:pointer}
.calc-shot-labels label:has(input:checked){border-color:var(--theme-accent);color:var(--theme-accent)}
.calc-shot-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.calc-shot-actions .button{min-width:0}
.calc-shot-status{min-height:1.3em;margin:0;color:var(--muted);font-size:13px}
.calc-share{display:grid;gap:10px}
.calc-share p{margin:0;color:var(--muted)}
.calc-share-link{width:100%;height:42px;padding:0 12px;border:1px solid var(--theme-border);border-radius:8px;background:var(--theme-raised);color:var(--text);font:inherit;box-sizing:border-box}
@media(max-width:1280px){.calc-pick-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1100px){.calc-page{width:calc(100% - 32px)}}
@media(max-width:900px){
 .calc-board{grid-template-columns:minmax(0,1fr)}
 .calc-swap{justify-self:center;transform:rotate(90deg)}
 .calc-swap:hover,.calc-swap:focus-visible{transform:rotate(270deg)}
 .calc-verdict{grid-template-columns:minmax(0,1fr);text-align:center}
 .calc-verdict-diffs{justify-content:center}
 .calc-verdict-diffs dt,.calc-verdict-diffs dd{text-align:center}
 .calc-pick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
 .calc-page{width:calc(100% - 24px);margin-top:18px}
 .calc-heading h1{font-size:24px}
 .calc-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
 .calc-actions .button{width:100%;padding:7px 10px}
 .calc-side{padding:14px}
 .calc-slots{gap:7px}
 .calc-slot-labels{font-size:11px}
 .calc-cash strong{font-size:13px}
 .calc-total-price dd{font-size:20px}
 .calc-totals dd{font-size:14px}
 .calc-add-to{width:100%}
 .calc-target{flex:1}
 .calc-target button{flex:1}
 .calc-pick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .calc-shot-actions{grid-template-columns:1fr}
}
/* Phone boxes are too narrow for the Robux box to show its price as well, or
   for an icon beside the remove mark. */
@media(max-width:480px){.calc-cash-rate,.calc-cash-icon{display:none}.calc-slot-tile.calc-cash{align-content:end;padding-bottom:6px}.calc-cash :is(strong,small){line-height:1.2}.calc-slot-remove{top:4px;right:4px;width:20px;height:20px}}
@media(max-width:440px){.calc-totals{grid-template-columns:1fr 1fr}.calc-total-price{grid-column:1/-1}.calc-total-rap{text-align:left}.calc-total-rap dd{justify-content:flex-start}}
/* An Items + USD offer added up the same way, on the Offers page. */
.offer-calc{margin:0 0 20px}
.offer-calc:empty{display:none}
.offer-calc-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--theme-border);border-radius:10px;background:var(--theme-surface)}
.offer-calc-side{display:grid;gap:2px;min-width:0}
.offer-calc-side:last-child{text-align:right}
.offer-calc-side span,.offer-calc-verdict span{color:var(--muted);font-size:11px;font-weight:600}
.offer-calc-side strong{font-size:17px;font-weight:800}
.offer-calc-side small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.offer-calc-verdict{display:grid;justify-items:center;gap:1px;min-width:118px;padding:8px 14px;border-radius:9px;background:var(--theme-raised);text-align:center}
.offer-calc-verdict strong{font-size:18px;font-weight:800}
.offer-calc-verdict small{font-size:11.5px;font-weight:700}
.offer-calc-verdict small i{font-size:9px;font-style:normal}
.offer-calc-verdict.is-gain{background:rgb(72 199 142 / 12%);color:#63d6a2}
.offer-calc-verdict.is-loss{background:rgb(239 83 100 / 12%);color:#ff858f}
.offer-calc-verdict.is-gain span,.offer-calc-verdict.is-loss span{color:inherit;opacity:.85}
.offer-calc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:8px 2px 0;color:var(--muted);font-size:11.5px}
.offer-calc-foot a{display:inline-flex;align-items:center;gap:6px;color:var(--theme-accent);font-weight:650;text-decoration:none}
.offer-calc-foot a:hover{text-decoration:underline}
.offer-calc-foot .icon{width:14px;height:14px}
@media(max-width:560px){.offer-calc-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.offer-calc-verdict{grid-column:1/-1;grid-row:1}}