/* Collection tools use the same paper, ink and collectible colours as the cards. */
.collection-card-shell { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.collection-card-shell > a { width: 100%; }
.collection-feature-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 99px; background: rgba(var(--surface-rgb), .6); color: var(--text-muted); font: 700 12px inherit; cursor: pointer; transition: background .18s, transform .18s, color .18s; }
.collection-feature-toggle:hover, .collection-feature-toggle.is-featured { color: var(--accent-purple); background: var(--pastel-purple-light); border-color: #b391d7; }
.collection-feature-toggle:hover { transform: translateY(-2px); }
.trading-quota { color: var(--text-muted); font-size: .76rem; font-weight: 650; }
.profile-collection-toolbar { flex-wrap: wrap; gap: 10px; }
.collection-size-control { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--text-muted); font-size: 12px; font-weight: 750; }
.collection-stack-control { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 12px; font-weight: 750; cursor: pointer; }
.collection-stack-control input { accent-color: #8850d1; cursor: pointer; }
.collection-size-control input { width: 120px; min-height: 28px; accent-color: #8850d1; cursor: pointer; }
.collection-size-control output { min-width: 4ch; font-variant-numeric: tabular-nums; }
.public-profile-page #profileCardGrid { grid-template-columns: repeat(auto-fill, minmax(0, min(100%, var(--collection-card-width, 288px)))); }
#profileCardGrid .collection-card-size-stage { width: 340px; zoom: var(--collection-card-scale, .8); }
#profileCardGrid .collection-card-size-stage .trading-card { width: 340px; }
#profileCardGrid .collection-card-shell { align-items: start; }
#profileCardGrid .collection-card-shell { gap: calc(13px * var(--collection-card-scale, .8)); }
#profileCardGrid .collection-feature-toggle { zoom: var(--collection-card-scale, .8); }

.collection-stack-entry { min-width: 0; padding-top: calc(40px * var(--collection-card-scale, .8)); }
.collection-card-stack { position: relative; isolation: isolate; width: 100%; margin: 0 0 22px; }
.collection-card-stack::before, .collection-card-stack::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; border: 2px solid #a493b7; border-radius: 11px; background: linear-gradient(145deg, var(--bg-subtle), var(--pastel-purple-light)); box-shadow: 1px 2px 2px #4930571a; }
.collection-card-stack[data-layers="2"]::before, .collection-card-stack[data-layers="3"]::before { content: ''; transform: translate(10px, 10px); }
.collection-card-stack[data-layers="3"]::after { content: ''; transform: translate(20px, 20px); z-index: -2; background: #cbb8dd; }
.collection-copy-count { position: absolute; z-index: 2; right: -7px; top: -38px; min-width: 40px; padding: 6px 10px; border: 2px solid #493057; border-radius: 99px; background: var(--tint-yellow); color: var(--accent-purple); box-shadow: 2px 3px 0 #493057; text-align: center; font-size: 16px; line-height: 1.1; font-weight: 900; pointer-events: none; }
.collection-copy-picker { display: grid; gap: 5px; width: 100%; margin: 0; color: var(--text-muted); font-size: 11px; font-weight: 750; }
.collection-copy-picker select { width: 100%; min-width: 0; padding: 9px 25px 9px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(var(--surface-rgb), .8); color: var(--accent-purple); font: inherit; font-size: 12px; text-overflow: ellipsis; }
.collection-copy-detail { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.collection-copy-filter { display: block; margin-top: 6px; color: var(--text-muted); font-size: 11px; }
.collection-stack-entry > .collection-copy-picker, .collection-stack-entry > .collection-copy-detail { margin-top: 12px; }
.collection-stack-entry .collection-feature-toggle { margin-top: 0; }
@media (max-width: 600px) {
    .collection-size-control { margin-left: 0; }
}
#openTradeComposerButton[hidden] { display: none; }
.showcase-editor { padding: 20px; }
.showcase-editor[hidden] { display: none; }
.showcase-editor-panel button { padding: 9px 13px; border: 2px solid var(--ink-border); border-radius: 8px; background: var(--pastel-purple-light); box-shadow: 2px 2px 0 var(--ink-shadow); color: var(--text-dark); font-weight: 900; cursor: pointer; }
.showcase-editor-panel .showcase-editor-close { padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 2rem; line-height: 1; }
.showcase-editor .showcase-editor-panel { width: min(1800px, 100%); max-height: calc(100dvh - 40px); padding: 24px; gap: 15px; border: 2px solid #32273e; border-radius: 20px; background: var(--bg-subtle); box-shadow: 0 28px 100px #10082288, 7px 7px 0 #31223d; box-sizing: border-box; }
.showcase-editor-panel > header { flex-shrink: 0; }
.showcase-editor-panel > header h3 { font-size: clamp(1.6rem, 4vw, 2.25rem); letter-spacing: -.06em; margin: 4px 0; }
.showcase-editor-panel > header p { font-size: .78rem; }
.showcase-editor-panel > footer { flex-shrink: 0; margin-top: auto; }
.showcase-editor-panel > footer button { padding: 12px 22px; border-radius: 10px; }
.showcase-editor-panel .showcase-items-settings { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.showcase-editor-panel .showcase-items-settings legend { float: left; margin: 0 8px 0 0; color: var(--text-muted); font-size: .75rem; }
.showcase-items-settings label { font-size: .8rem; }
.showcase-items-settings input { accent-color: #8d55ef; width: 17px; height: 17px; }
.card-picker { --picker-accent: #8850d1; --picker-wash: #eee3fa; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 10px; }
.picker-heading strong { font-size: .84rem; font-weight: 850; letter-spacing: -.02em; }
.picker-heading > span { padding: 5px 10px; border-radius: 99px; background: var(--picker-wash); color: var(--text-dark); font: 750 12px ui-monospace, monospace; }
.is-full .picker-heading > span { background: var(--picker-accent); color: #fff; }
.picker-tray { display: flex; gap: 12px; flex-shrink: 0; overflow-x: auto; padding: 15px; border: 1px solid #ded1e6; border-radius: 14px; background: radial-gradient(ellipse at 30% 0, var(--pastel-purple-light), transparent 65%), var(--muted-gray); box-shadow: inset 0 2px 8px #47334e0a; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #bdb0ca transparent; }
.picker-slot { position: relative; flex: 0 0 116px; min-width: 0; min-height: 169px; display: flex; flex-direction: column; border: 1px dashed #bdb0ca; border-radius: 10px; scroll-snap-align: start; transition: background .16s, border-color .16s, transform .16s, box-shadow .16s; }
.picker-slot.is-filled { border-color: transparent; }
.picker-slot-empty { display: flex; flex: 1; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 20px 0; color: var(--text-muted); }
.picker-slot-empty > span { font-size: 26px; font-weight: 300; }
.picker-slot-empty small { font-size: .67rem; font-weight: 650; }
.is-dragging .picker-slot { border-style: dashed; border-color: var(--picker-accent); }
.picker-slot.is-drop-target { transform: translateY(-3px); background: var(--picker-wash); border: 2px solid var(--picker-accent); box-shadow: 0 0 0 4px #ad81e326; }
/* One place only (a statue, a poster, a game in the console): the tray is that place, not a shelf with one card on it, and its arrows have nowhere to move it. */
.picker-tray:has(> .picker-slot:only-child) { align-self: flex-start; }
.picker-tray:has(> .picker-slot:only-child) .picker-order { display: none; }
.picker-library { display: flex; min-height: 0; flex-direction: column; margin-top: 10px; }
.picker-library .card-browser { margin: 0 !important; gap: 8px; padding: 12px 0; border: 0; background: transparent; }
.picker-library .card-browser > label { flex: 1 1 100px; }
.picker-library .card-browser-search { flex: 1 1 100%; }
.picker-library .card-browser input, .picker-library .card-browser select { min-height: 36px; padding: 6px 9px; background: var(--white); font-size: .74rem; border-radius: 7px; border: 1px solid #cfc7d5; }
.picker-library .card-browser input[type=checkbox] { min-height: 0; }
.picker-library .card-browser > label { font-size: .67rem; }
.picker-library .card-browser > button { font-size: .7rem; padding: 7px; border: 0; color: var(--text-muted); box-shadow: none; }
.picker-results { display: flex; gap: 10px; justify-content: space-between; margin: 0 0 10px; font-size: .68rem; color: var(--text-muted); }
.picker-grid { min-height: 140px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-content: start; gap: 16px 14px; overflow-y: auto; overscroll-behavior: contain; padding: 5px 7px 12px 3px; scrollbar-width: thin; }
.picker-tile { position: relative; min-width: 0; transition: transform .2s; }
.card-picker .picker-card, .picker-drag-ghost { display: block; position: relative; width: 100%; padding: 0; border: 0; background: transparent; border-radius: 9px; box-shadow: none; color: inherit; text-align: inherit; cursor: grab; touch-action: none; transition: transform .2s, filter .2s; }
.card-picker .picker-card:focus-visible { outline: 3px solid var(--picker-accent); outline-offset: 5px; }
.card-picker .picker-card:hover { transform: translateY(-4px) rotate(-1deg); filter: drop-shadow(0 6px 5px #36234224); }
.card-picker .picker-card:active { cursor: grabbing; }
/* Scale the complete shared component uniformly; retain its framing and all metadata. */
.picker-card > .trading-card { width: 340px; zoom: var(--picker-card-scale, .42); margin: auto; }
.picker-tray { --picker-card-scale: .25; }
.picker-drag-ghost { --picker-card-scale: .3; }
.picker-check { position: absolute; top: 27px; right: 7px; display: grid; place-items: center; width: 25px; height: 25px; background: rgba(var(--surface-rgb), .8); color: var(--accent-purple); border: 1px solid var(--white); border-radius: 50%; box-shadow: 0 2px 7px #0002; font-size: 17px; font-weight: 800; opacity: 0; transform: scale(.8); transition: opacity .18s, transform .18s, background .18s; }
.picker-card:hover .picker-check, .picker-card:focus-visible .picker-check, .is-selected .picker-check { opacity: 1; transform: scale(1); }
.is-selected .picker-check { background: var(--picker-accent); color: white; border-color: #fff; }
.picker-grid .is-selected .picker-card { outline: 2px solid var(--picker-accent); outline-offset: 4px; }
.picker-caption { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 9px; font-size: .65rem; font-weight: 750; }
.picker-caption > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-picker .picker-caption button, .card-picker .picker-order button { display: grid; place-items: center; border: 0; padding: 0; border-radius: 5px; width: 28px; min-height: 28px; background: transparent; box-shadow: none; color: var(--text-muted); cursor: pointer; }
.card-picker .picker-caption button:hover, .card-picker .picker-order button:hover { background: var(--picker-wash); color: var(--accent-purple); }
.picker-order { display: flex; align-items: center; justify-content: space-between; font: 650 10px ui-monospace, monospace; color: var(--text-muted); }
.picker-order button:disabled { opacity: .25; cursor: default; }
.picker-message { flex-shrink: 0; font-size: .75rem; color: var(--danger); margin: 6px 0 0; }
.picker-message:empty { display: none; }
.picker-empty { grid-column: 1 / -1; padding: 25px 8px; color: var(--text-muted); font-size: .85rem; text-align: center; }
.picker-more { grid-column: 1 / -1; justify-self: center; }
.picker-drag-ghost { position: fixed; width: 110px !important; z-index: 35000; pointer-events: none; transform: rotate(-7deg) scale(1.07); filter: drop-shadow(0 15px 18px #16082170); opacity: .95; }
.public-profile-page #tradeComposer { padding: 24px; background: var(--bg-subtle); border: 1px solid #d9d1dc; box-shadow: 0 4px 22px #33254009; border-radius: 18px; }
#tradeComposer h2 { font-size: 1.7rem; letter-spacing: -.04em; margin-top: 6px; }
#tradeComposer > div > p { color: var(--text-muted); font-size: .84rem; }
.trade-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 22px; }
.trade-workbench .card-picker { padding: 18px; border: 1px solid #ded5e5; border-radius: 14px; background: var(--white); }
.trade-workbench .card-picker + .card-picker { --picker-accent: #30856c; --picker-wash: #dff3e9; border-color: #c9e2d5; }
.trade-workbench .card-picker + .card-picker .picker-tray { background: radial-gradient(ellipse at 30% 0, var(--tint-green), transparent 65%), var(--bg-subtle); border-color: #c9e2d5; }
.trade-workbench .picker-grid { max-height: 460px; }
.trade-workbench .picker-heading strong { font-size: 1.06rem; }
.trade-workbench .picker-tray { min-height: 196px; }
/* An offer that asks for nothing back has one side to fill. */
.is-one-sided .trade-workbench { grid-template-columns: minmax(0, 1fr); }
.is-one-sided :is(#requestedCards, #requestedMoney, [data-trade-inventory="requested"]) { display: none; }
.trade-review { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #dfd6e4; margin-top: 20px; padding-top: 18px; }
.trade-review p { font-size: .85rem; font-weight: 750; }
.trade-review button { flex-shrink: 0; }
.trade-review button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.trade-confirmation { position: fixed; inset: 0; margin: auto; width: min(1500px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; padding: 26px; border: 2px solid #33263e; border-radius: 18px; background: var(--bg-subtle); color: var(--text-dark); box-shadow: 0 24px 80px #170d2d66; }
.trade-confirmation:not([open]) { display: none; }
.trade-confirmation::backdrop { background: #1b1227a8; backdrop-filter: blur(8px); }
.trade-confirmation header, .trade-confirmation footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.trade-confirmation h2 { margin: 0 0 18px; font-size: 1.6rem; letter-spacing: -.04em; }
.trade-confirmation > p { font-size: .8rem; color: var(--text-muted); margin: 20px 0; }
.trade-confirmation > p.trade-picture-warning { padding: 10px 12px; border: 2px solid #302339; border-radius: 8px; background: var(--pastel-yellow); color: var(--text-dark); font-weight: 750; }
.trade-confirmation button:not(.card-preview-button) { padding: 10px 16px; border: 1px solid #a392b2; border-radius: 8px; background: var(--white); font-weight: 750; cursor: pointer; }
.trade-confirmation #confirmTradeButton { background: var(--pastel-yellow); border: 2px solid #302339; box-shadow: 3px 3px 0 #302339; }
.trade-confirmation #tradeActionConfirm { background: var(--pastel-yellow); border: 2px solid #302339; box-shadow: 3px 3px 0 #302339; }
.trade-confirmation [role=alert]:empty { display: none; }
/* The deal laid out (#965): what goes on one side, what comes on the other, a swap between them, each side a
   tray of its own with its heading above its cards, the cards small enough for both sides to fit. */
.trade-confirmation-cards { --trade-card-scale: .55; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; }
.trade-confirmation-cards > section { min-width: 0; padding: 16px; border: 2px solid var(--ink-border); border-radius: var(--radius, 12px); background: var(--bg-subtle); }
.trade-confirmation-cards > section + section { grid-column: 3; }
.trade-confirmation-cards::before { content: '⇄'; grid-column: 2; grid-row: 1; align-self: center; font-size: 1.8rem; font-weight: 900; color: var(--text-dark); }
.trade-confirmation-cards > section:first-of-type { grid-column: 1; grid-row: 1; }
.trade-confirmation-cards > section > h3 { margin: 0 0 14px; font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.trade-confirmation-cards > section > div, .trade-bundle { display: flex; flex-wrap: wrap; align-content: start; align-items: flex-start; gap: 18px; }
.trade-confirmation-cards .card-preview-button, .trade-bundle .card-preview-button { width: auto; }
.trade-card-item { display: flex; flex: 0 0 auto; min-width: 0; flex-direction: column; align-items: stretch; }
.trade-card-item .card-preview-button { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; }
.trade-card-ownership { margin-top: 8px; padding: 8px; border: 1px solid #ded5e5; border-radius: 9px; background: var(--bg-subtle); color: var(--text-dark); text-align: left; }
.trade-card-new { display: block; padding: 4px 6px; margin-bottom: 6px; border-radius: 5px; background: var(--tint-green); color: var(--success); font-size: .7rem; font-weight: 900; overflow-wrap: anywhere; }
.trade-card-new > span { font-weight: 650; }
.trade-card-pending { display: block; padding: 4px 6px; margin-bottom: 6px; border-radius: 5px; background: var(--pastel-yellow); color: #7a4a06; font-size: .7rem; font-weight: 900; overflow-wrap: anywhere; }
.trade-card-counts { display: grid; gap: 4px; margin: 0; font-size: .72rem; line-height: 1.35; }
.trade-card-counts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.trade-card-counts dt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-card-counts dd { flex-shrink: 0; margin: 0; font-weight: 850; font-variant-numeric: tabular-nums; }
.picker-tile .trade-card-ownership { margin: 0 0 9px; }
.trade-confirmation-cards .card-preview-button > .trading-card, .trade-bundle .card-preview-button > .trading-card { width: 340px; zoom: .8; }
.trade-confirmation-cards .card-preview-button:focus { outline: none; }
.trade-confirmation-cards .card-preview-button:focus-visible > .trading-card { outline: 3px solid var(--pastel-purple, #d4b5f7); outline-offset: 4px; }
@media (max-width: 760px) {
    .trade-confirmation-cards { grid-template-columns: minmax(0, 1fr); }
    .trade-confirmation-cards > section:first-of-type, .trade-confirmation-cards > section + section { grid-column: 1; grid-row: auto; }
    .trade-confirmation-cards::before { grid-column: 1; grid-row: 2; justify-self: center; transform: rotate(90deg); }
}
.trade-list-item .trade-card-pair { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: start; }
.trade-card-pair > div > small { display: block; font-size: .8rem; margin-bottom: 12px; font-weight: 800; }
.trades-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 1800px; margin: 0 auto 20px; }
.trades-toolbar > a { color: var(--accent-purple); font-size: .84rem; font-weight: 800; }
#showcaseOptions { display: grid; flex: 1; grid-template-columns: minmax(0, 1.5fr) minmax(290px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px 24px; }
#showcaseOptions > .picker-heading { grid-column: 2; grid-row: 1; }
#showcaseOptions > .picker-tray { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; overflow: auto; min-height: 0; }
#showcaseOptions > .picker-library { grid-column: 1; grid-row: 1 / 4; margin-top: 0; }
#showcaseOptions > .picker-message { grid-column: 2; grid-row: 3; }
#showcaseOptions .picker-slot { min-height: 0; height: auto; aspect-ratio: 1 / 2.1; }
#showcaseOptions > .picker-tray { grid-auto-rows: max-content; }
.picker-library .card-browser, .picker-results { flex-shrink: 0; }
.showcase-editor-panel .social-kicker { padding: 0; background: transparent; color: var(--text-muted); transform: none; font-size: .65rem; letter-spacing: .12em; }
.showcase-editor .showcase-editor-panel { gap: 10px; padding: 20px; }
.showcase-editor-panel > header h3 { font-size: 1.8rem; }
.picker-library .card-browser { position: relative; }
.picker-library .card-browser > button { position: absolute; inset: auto 0 -24px auto; margin: 0; width: max-content; height: 23px; min-height: 23px; padding: 0 4px; background: transparent; box-shadow: none; border: 0; }
#showcaseEditor [hidden] { display: none; }
.picker-results > span:last-child { display: none; }
#showcaseOptions .picker-slot:not(.is-filled) { aspect-ratio: auto; min-height: 140px; }
.card-picker .card-browser select, .card-picker .card-browser input { box-shadow: none; border-width: 1px; }
.card-picker .picker-grid .picker-card { touch-action: pan-y; }
.card-browser-filters { position: relative; flex: 1 1 100%; }
.card-browser-filters > summary { display: flex; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; padding: 6px 0; color: var(--accent-purple); font-size: .71rem; font-weight: 750; }
.card-browser-filters > summary::-webkit-details-marker { display: none; }
.card-browser-filter-panel { position: absolute; inset: calc(100% + 3px) 0 auto; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 15px; border: 1px solid #ccbed9; border-radius: 12px; background: var(--white); box-shadow: 0 12px 30px #30174226; }
.card-browser-filter-panel label { font-size: .67rem; }
.picker-library .card-browser:has(.card-browser-filters) { padding-bottom: 6px; }
.picker-library .card-browser:has(.card-browser-filters) > button { bottom: -22px; }
/* Open, the filters would cover the button under them: it moves into the panel's corner instead. */
.picker-library .card-browser:has(.card-browser-filters[open]) > button { z-index: 91; top: calc(100% + 10px); right: 12px; bottom: auto; }
.picker-library .card-browser-filters[open] > .card-browser-filter-panel { padding-top: 40px; }
@media (hover: none) { .picker-check { opacity: 1; transform: scale(1); } .picker-card .picker-check { width: 23px; height: 23px; } }
@media (max-width: 760px) {
    .showcase-editor { padding: 6px; }
    .showcase-editor .showcase-editor-panel { padding: 16px 12px; max-height: calc(100dvh - 12px); border-radius: 14px; gap: 10px; }
    .picker-grid { --picker-card-scale: .4; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 14px 12px; }
    .picker-tray { padding: 10px; gap: 12px; }
    .picker-slot { flex-basis: 98px; min-height: 145px; }
    .picker-tray .picker-caption { display: none; }
    .picker-results > span:last-child { display: none; }
    .trade-workbench { grid-template-columns: 1fr; gap: 18px; }
    .public-profile-page #tradeComposer { padding: 18px 12px; }
    .trade-workbench .card-picker { padding: 12px; }
    .trade-workbench .picker-grid { max-height: 350px; }
    .trade-workbench .picker-tray { min-height: 159px; }
    .trade-review { align-items: stretch; flex-direction: column; }
    .trade-confirmation { padding: 18px; }
    .trade-confirmation-cards { gap: 12px; }
    .trade-bundle { gap: 14px; }
    .trade-confirmation-cards .card-preview-button > .trading-card, .trade-bundle .card-preview-button > .trading-card { zoom: .35; }
    .trade-list-item .trade-card-pair { grid-template-columns: 1fr 1fr; gap: 14px; }
    .trade-card-pair > b { display: none; }
    #showcaseOptions { display: flex; gap: 8px; }
    #showcaseOptions > .picker-tray { display: flex; min-height: 0; max-height: 206px; }
    #showcaseOptions .picker-slot { flex-basis: 88px; min-height: 120px; aspect-ratio: auto; }
    #showcaseOptions > .picker-library { margin-top: 0; }
    #showcaseOptions .picker-heading { padding-bottom: 0; }
    #showcaseOptions .card-browser { padding: 4px 0; }
    #showcaseOptions .card-browser > label { flex-basis: 80px; }
}
.motion-reduced :is(.card-picker *, .collection-feature-toggle) { transition: none !important; animation: none !important; }

/* A focused trading workspace, opened from the collector or an individual card. */
#tradeComposer { position: fixed; inset: 0; margin: auto; width: min(1800px, calc(100vw - 28px)); max-width: none; height: min(1100px, calc(100dvh - 28px)); max-height: calc(100dvh - 28px); padding: 22px; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; background: var(--bg-subtle); border: 2px solid #33263e; border-radius: 18px; color: var(--text-dark); box-shadow: 0 28px 100px #10082266; }
#tradeComposer:not([open]), #tradeComposer[hidden] { display: none; }
#tradeComposer::backdrop { background: #21162fba; backdrop-filter: blur(8px); }
.trade-dialog-header { display: flex; flex-shrink: 0; justify-content: space-between; align-items: flex-start; gap: 16px; }
.trade-dialog-header h2 { margin: 5px 0 4px; }
.trade-dialog-header .social-kicker { padding: 0; color: var(--accent-purple); background: transparent; transform: none; font-size: .65rem; }
.trade-dialog-header p { font-size: .78rem; color: var(--text-muted); }
#closeTradeComposerButton { padding: 2px 8px; border: 0; box-shadow: none; background: transparent; font-size: 26px; }
/* Bills and coins in a trade, drawn as the wallet draws them and picked with a click like a card. */
.trade-money { grid-row: 2; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 10px 6px 14px; border: 1px solid #e7d9b5; border-radius: 12px; background: linear-gradient(180deg, var(--white), var(--tint-yellow)); }
#offeredMoney { grid-column: 1; }
#requestedMoney { grid-column: 2; }
.trade-money[hidden] { display: none; }
.trade-money h3 { display: grid; flex: 0 0 auto; margin: 0; font-size: .74rem; line-height: 1.2; }
.trade-money h3 b { color: #9a6b1c; font-size: 1.05rem; }
.trade-booster { flex: 0 0 auto; display: grid; justify-items: center; gap: 6px; width: 132px; font-weight: 700; text-align: center; }
.trade-booster .booster-pack { --pack-width: 96px; }
.trade-money-bundle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.trade-money .trade-money-bundle { flex: 1; flex-wrap: nowrap; min-width: 0; padding: 8px 4px 6px; overflow-x: auto; scrollbar-width: thin; }
.trade-money .trade-money-piece { flex: 0 0 auto; }
.trade-money .trade-money-piece .bouzopp-bill { zoom: calc(.55 * var(--piece-size, 1)); }
.trade-money .trade-money-piece .bouzopp-coin { width: calc(30px * var(--piece-size, 1)); height: calc(30px * var(--piece-size, 1)); }
.trade-bundle .trade-money-bundle, .trade-confirmation-cards .trade-money-bundle { flex: 0 0 auto; align-self: center; max-width: 320px; }
button.trade-money-piece, #tradeComposer button.trade-money-piece { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; box-shadow: none; }
button.trade-money-piece:hover, button.trade-money-piece:active, #tradeComposer button.trade-money-piece:hover { transform: translateY(-3px); background: transparent; box-shadow: none; }
.trade-money-piece[aria-pressed="false"] { opacity: .45; filter: saturate(.5); }
.trade-money-piece[aria-pressed="true"] > * { outline: 3px solid #d9a441; outline-offset: 2px; }
.trade-money-piece:focus-visible > * { outline: 3px solid #7543c5; outline-offset: 2px; }
.trade-money-piece .bouzopp-bill { zoom: calc(.7 * var(--piece-size, 1)); }
.trade-money-piece .bouzopp-coin { width: calc(36px * var(--piece-size, 1)); height: calc(36px * var(--piece-size, 1)); }

/* Let wide screens show the actual cards at a comfortable reading size. */
.trades-page { max-width: 1848px; }
.trades-page .trade-list { max-width: 1800px; }
.trades-page .trade-filters { flex-wrap: wrap; }
.trade-list-item .trade-bundle { flex-wrap: nowrap; overflow-x: auto; gap: 12px; padding: 4px 8px 14px 2px; scrollbar-width: thin; }
.trade-list-item .trade-bundle .card-preview-button { flex: 0 0 auto; }
.trade-list-item .trade-bundle .card-preview-button > .trading-card { width: 340px; zoom: .36; }
.trade-list-item .trade-card-pair > div { min-width: 0; }
.trade-list-item .trade-bundle:focus-visible { outline: 2px solid #7543c5; outline-offset: 3px; }
@media (max-width: 600px) {
    .trades-page .trade-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .trades-page .trade-filters button { min-width: 0; padding: 9px 4px; font-size: 12px; }
}
.trade-list-item { padding: 28px; }
.trade-list-item .trade-card-pair { gap: 28px; }
@media (min-width: 761px) and (max-width: 1100px) {
    .trade-confirmation-cards .card-preview-button > .trading-card, .trade-bundle .card-preview-button > .trading-card { zoom: .65; }
    #showcaseOptions { grid-template-columns: minmax(0, 1.3fr) minmax(290px, 1fr); }
    #showcaseOptions .picker-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 760px) {
    .trade-list-item { padding: 14px; }
    .trade-list-item .trade-card-pair { gap: 14px; }
}

/* Keep ownership at readable text size beside the scaled shared card surface. */
.trade-card-item { width: calc(340px * var(--trade-card-scale, .8)); }
.trade-card-item .card-preview-button { width: 100%; color: inherit; text-decoration: none; }
.trade-confirmation-cards .trade-card-item .card-preview-button > .trading-card,
.trade-bundle .trade-card-item .card-preview-button > .trading-card,
.trade-card-item .card-preview-button > .collectible-caption { width: 340px; zoom: var(--trade-card-scale, .8); }
.trade-list-item { --trade-card-scale: .44; }
.trade-confirmation-cards > section { min-width: 0; }
@media (max-width: 760px) {
    .trade-confirmation { --trade-card-scale: .42; }
    .trade-confirmation-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trade-list-item .trade-card-pair { grid-template-columns: minmax(0, 1fr); }
    .trade-list-item .trade-card-pair > b { display: none; }
}
@media (max-width: 380px) {
    .trade-confirmation { --trade-card-scale: .32; }
}

/* The trade editor: the cards to choose from get the room, and the deal being made sits beside
   them. Each side's picker lays its parts straight into the form: the library of the side being
   browsed, both sides' trays and money, then the message and the review. */
#tradeComposer #tradeForm { flex: 1; min-height: 0; margin-top: 14px; align-items: stretch; gap: 0; }
#tradeComposer .trade-workbench, #tradeComposer .card-picker { display: contents; }
#tradeForm[data-active-inventory=offered] #requestedCards > .picker-library,
#tradeForm[data-active-inventory=requested] #offeredCards > .picker-library { display: none; }
#tradeForm.is-one-sided #requestedCards { display: none; }
#tradeComposer .trade-inventory-tabs { display: flex; gap: 8px; }
#tradeComposer .trade-inventory-tabs button { flex: 1; padding: 9px 12px; border: 1px solid #cfc2d7; border-radius: 10px; background: var(--white); box-shadow: none; color: var(--text-muted); font-size: .82rem; }
#tradeComposer .trade-inventory-tabs [aria-selected=true] { background: var(--pastel-purple-light); border-color: #a57ace; color: var(--text-dark); }
#tradeComposer .trade-inventory-tabs [data-trade-inventory=requested][aria-selected=true] { background: var(--tint-green); border-color: #5aa487; }
#tradeComposer .picker-heading { padding: 0; }
#tradeComposer .picker-heading strong { font-size: .95rem; }
#tradeComposer .picker-library { min-height: 0; margin: 0; }
#tradeComposer .picker-grid { flex: 1 1 auto; min-height: 0; max-height: none; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* A side's cards, small, each beside who owns how many. */
#tradeComposer .picker-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; gap: 8px; min-height: 0; padding: 8px; overflow: auto; scroll-snap-type: none; }
#tradeComposer .picker-slot { min-height: 60px; }
#tradeComposer .picker-slot-empty { flex-direction: row; gap: 6px; padding: 0; }
#tradeComposer .picker-slot-empty > span { font-size: 18px; }
#tradeComposer .picker-tray .picker-caption, #tradeComposer .picker-order { display: none; }
#tradeComposer .picker-tray .picker-tile { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px; }
#tradeComposer .picker-tray .trade-card-ownership { grid-column: 2; grid-row: 1; margin: 0; }
#tradeComposer .picker-tray .picker-card { grid-column: 1; grid-row: 1; }
#tradeComposer .picker-tray .picker-card > .trading-card,
#tradeComposer .picker-tray .picker-card > .collectible-caption { width: 340px; zoom: .15; }
#tradeComposer .picker-tray .picker-check { top: 3px; right: 0; width: 18px; height: 18px; font-size: 12px; }
#tradeComposer .trade-money { padding: 4px 8px 4px 10px; }
#tradeComposer .trade-message { display: grid; gap: 5px; color: var(--text-muted); font-size: .76rem; font-weight: 750; }
#tradeComposer .trade-message textarea { width: 100%; min-height: 44px; box-sizing: border-box; resize: vertical; padding: 8px 10px; border: 1px solid #cfc2d7; border-radius: 9px; background: var(--white); color: var(--text-dark); font: inherit; }
#tradeComposer .trade-review { margin: 0; padding-top: 10px; }
#tradeComposer #tradeStatus:empty { display: none; }
@media (min-width: 761px) {
    #tradeComposer #tradeForm { display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px, 30%, 460px); grid-template-rows: repeat(8, auto) minmax(0, 1fr) auto auto; column-gap: 34px; }
    /* The deal, on a slip of its own. */
    #tradeComposer #tradeForm::before { content: ""; grid-column: 2; grid-row: 1 / -1; margin: 0 -14px; border: 1px solid #ded5e5; border-radius: 14px; background: var(--white); }
    #tradeComposer .trade-inventory-tabs { grid-column: 1; grid-row: 1; }
    #tradeComposer .picker-library { grid-column: 1; grid-row: 2 / -1; margin-top: 6px; }
    #tradeComposer :is(.picker-heading, .picker-tray, .picker-message, .trade-money, .trade-message, .trade-review) { grid-column: 2; }
    #tradeComposer .picker-tray { max-height: 22vh; margin-top: 8px; }
    #tradeComposer #offeredCards > .picker-heading { grid-row: 1; padding-top: 12px; }
    #tradeComposer #offeredCards > .picker-tray { grid-row: 2; }
    #tradeComposer #offeredMoney { grid-row: 3; margin-top: 8px; }
    #tradeComposer #offeredCards > .picker-message { grid-row: 4; }
    #tradeComposer #requestedCards > .picker-heading { grid-row: 5; margin-top: 18px; }
    #tradeComposer #requestedCards > .picker-tray { grid-row: 6; }
    #tradeComposer #requestedMoney { grid-row: 7; margin-top: 8px; }
    #tradeComposer #requestedCards > .picker-message { grid-row: 8; }
    #tradeComposer .trade-message { grid-row: 10; margin-top: 12px; }
    #tradeComposer .trade-review { grid-row: 11; padding-bottom: 12px; }
}
@media (min-width: 761px) and (max-height: 800px) {
    .public-profile-page #tradeComposer { padding: 16px; }
    .trade-dialog-header .social-kicker, .trade-dialog-header > div > p:first-of-type { display: none; }
    .trade-dialog-header h2 { margin: 0; font-size: 1.4rem !important; }
    .trade-dialog-header .trading-quota { margin: 6px 0 0; }
    #tradeComposer #tradeForm { margin-top: 10px; }
    #tradeComposer .picker-tray { max-height: 17vh; }
}
/* On a phone the whole editor scrolls as one page, one side at a time, its cards at full height,
   with the sides to switch between and the offer to review always at hand. */
@media (max-width: 760px) {
    .public-profile-page #tradeComposer { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); padding: 14px 10px 0; overflow-y: auto; overscroll-behavior: contain; }
    .trade-dialog-header h2 { font-size: 1.35rem !important; }
    .trade-dialog-header p { font-size: .7rem; }
    .trade-dialog-header > div > p:first-of-type { display: none; }
    #tradeComposer #tradeForm { display: flex; flex: none; flex-direction: column; gap: 10px; margin-top: 10px; }
    #tradeForm[data-active-inventory=offered] :is(#requestedCards, #requestedMoney),
    #tradeForm[data-active-inventory=requested] :is(#offeredCards, #offeredMoney) { display: none; }
    #tradeComposer .trade-inventory-tabs { position: sticky; top: -14px; z-index: 3; margin: 0 -10px; padding: 8px 10px; border-bottom: 1px solid #dfd6e4; background: var(--bg-subtle); }
    #tradeComposer .picker-heading { display: none; }
    #tradeComposer .picker-tray { order: 1; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); max-height: 190px; }
    #tradeComposer .trade-money { order: 2; }
    #tradeComposer .picker-message { order: 3; }
    #tradeComposer .picker-library { order: 4; }
    #tradeComposer .picker-grid { overflow: visible; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
    #tradeComposer .trade-message { order: 5; }
    #tradeComposer .trade-review { order: 6; position: sticky; bottom: 0; z-index: 3; flex-direction: row; align-items: center; gap: 8px; margin: 0 -10px; padding: 10px; border-top: 1px solid #dfd6e4; background: var(--bg-subtle); }
    #tradeComposer .trade-review p { margin: 0; font-size: .7rem; }
    #tradeComposer .trade-review button { padding: 8px 12px; font-size: .76rem; }
}