/* A collection as binders: their covers stand on a shelf, and the one taken
   down lies open on two pages of nine pockets. The pockets size themselves
   from --binder-card-width, which collection-binder.js fits to the window. */
#profileCardGrid.collection-binders { display: block; max-width: none; margin: 0; padding: 0; }
/* The card list's own controls step aside while the binders are shown. */
.card-browser label[hidden], .collection-stack-control[hidden], .collection-size-control[hidden] { display: none; }

/* The shelf */
.binder-shelf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin: 6px 0 2px; }
.binder-find { display: inline-flex; flex: 1 1 240px; max-width: 360px; align-items: center; gap: 8px; min-width: 0; margin-right: auto; color: var(--text-muted); font-size: 12px; font-weight: 750; }
.binder-find input { flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 6px 10px; border: 1px solid #aaa5b0; border-radius: 7px; background: var(--white); color: var(--text-dark); font: inherit; font-weight: 600; }
.binder-find input:focus-visible { outline: 3px solid #8850d1; outline-offset: 2px; }
.binder-find span { white-space: nowrap; }
.binder-find-none { flex-basis: 100%; order: 1; margin: 0; color: var(--text-muted); font-size: 12px; font-style: italic; }
.binder-find-none[hidden], .binder-shelf > li[hidden] { display: none; }
.binder-order { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; font-weight: 750; }
.binder-order select { min-height: 36px; padding: 6px 10px; border: 1px solid #aaa5b0; border-radius: 7px; background: var(--white); color: var(--text-dark); font: inherit; font-weight: 750; cursor: pointer; }
.binder-order select:focus-visible { outline: 3px solid #8850d1; outline-offset: 2px; }
.binder-shelf {
    position: relative; display: flex; gap: 18px; margin: 0 0 30px; padding: 18px 14px 20px; overflow-x: auto; list-style: none;
    scroll-snap-type: x proximity; scrollbar-width: thin;
    /* The plank the covers stand on. */
    background: linear-gradient(to bottom, transparent calc(100% - 16px), #caa77b calc(100% - 16px) calc(100% - 12px), #b48d5f calc(100% - 12px) calc(100% - 3px), #7f5d38 calc(100% - 3px));
}
.binder-shelf > li { flex: 0 0 auto; scroll-snap-align: start; }
/* A line for every saga the set is part of, on its cover and under its binder's title (#1057). */
.binder-cover-saga { display: block; overflow: hidden; margin-top: 1.5cqw; font-size: 6cqw; font-weight: 800; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; opacity: .7; }
.binder-saga-line { margin: 2px 0 0; color: var(--text-muted); font-size: .85rem; font-weight: 800; }
.binder-saga-line a { color: inherit; }
.binder-cover {
    --pack-ink: #25252d;
    --pack-a: hsl(var(--pack-hue, 280) 86% 64%);
    --pack-b: hsl(calc(var(--pack-hue, 280) + 46) 96% 79%);
    --pack-c: hsl(calc(var(--pack-hue, 280) + 180) 78% 88%);
    position: relative; isolation: isolate; display: block; width: 116px; aspect-ratio: 5 / 7; padding: 0; overflow: hidden;
    container-type: inline-size;
    border: 2px solid var(--ink-border); border-radius: 5px 11px 11px 5px; background: var(--pack-a); color: var(--text-dark);
    box-shadow: 4px 4px 0 var(--ink-shadow); cursor: pointer; font: inherit; text-align: left;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
}
.binder-cover > .pack-print { z-index: -2; }
/* What the set's pack wears over its print, under the spine and the label. */
.binder-cover-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.binder-cover-art .booster-pack-emblem { left: 58.5%; top: 56%; width: 40cqw; height: 40cqw; }
.binder-cover:hover { transform: translateY(-5px); box-shadow: 5px 8px 0 var(--ink-shadow); }
.binder-cover:focus-visible { outline: 3px solid #8850d1; outline-offset: 4px; }
/* Taken down from the shelf. */
.binder-cover.is-open { transform: translateY(-12px) rotate(-2deg); box-shadow: 7px 12px 0 var(--ink-shadow); }
.binder-cover.is-dimmed { opacity: .38; filter: grayscale(.85); }
.binder-cover-spine { position: absolute; inset: 0 auto 0 0; z-index: -1; width: 17%; border-right: 2px solid var(--ink-border); background: radial-gradient(circle at 50% 22%, #25252d 0 3.6cqw, transparent 4.2cqw), radial-gradient(circle at 50% 78%, #25252d 0 3.6cqw, transparent 4.2cqw), linear-gradient(90deg, #0000004d, #00000026 60%, #ffffff26); }
.binder-cover-label { position: absolute; left: 24%; right: 8%; top: 22%; display: grid; padding: 6cqw 5cqw; border: 2px solid var(--ink-border); border-radius: 4px; background: var(--white); box-shadow: 3px 3px 0 var(--ink-shadow); transform: rotate(-2deg); }
/* A label its collector moved sits by its centre, as wide as it hangs otherwise. */
.binder-cover-label.is-placed { right: auto; width: 68%; box-sizing: border-box; transform: translate(-50%, -50%) rotate(-2deg); }
.binder-cover-label b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-family: var(--pack-font, inherit); font-weight: var(--pack-font-weight, 900); font-size: calc(11cqw * var(--pack-font-scale, 1)); line-height: 1.08; overflow-wrap: anywhere; }
.binder-cover-meter { position: absolute; left: 24%; right: 8%; bottom: 9%; height: 16cqw; overflow: hidden; border: 2px solid var(--ink-border); border-radius: 99px; background: var(--white); }
.binder-cover-meter i { position: absolute; inset: 0 auto 0 0; background: #8954bd; }
.binder-cover-meter small { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dark); font-size: 9cqw; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 0 3px #fff, 0 0 2px #fff; }
.binder-cover.is-complete .binder-cover-meter i { background: linear-gradient(100deg, #d9a93c, var(--tint-yellow) 45%, #e5b75c 55%, #a56d12); }
/* A cover's medals hang on their ribbons from its top edge, drawn in the cover's own units (the mount's 90 × 124). */
.binder-cover-medals { position: absolute; top: 0; right: 5%; display: flex; gap: 3px; }
.binder-cover-medal { display: grid; filter: drop-shadow(0 2px 0 #25252d); }
.binder-cover-medal .badge-mount.is-hung { width: 24cqw; height: 33cqw; --mount-shadow: none; }
.binder-cover-medal .badge-ribbon { width: 16cqw; height: 13.3cqw; }
.binder-cover-medal .badge-mount > :is(.badge-medal, .badge-effect-host) { width: 24cqw; height: 24cqw; margin-top: 10.7cqw; }
/* A medal that wears an effect sits in its host: the medal and its drawing take the host's size, not the cabinet's (#932). */
.binder-cover-medal .badge-mount .badge-effect-host > :is(svg, .badge-medal), .binder-cover-medal .badge-effect-host .badge-medal > svg { width: 24cqw; height: 24cqw; }
/* Turned over to the ? copies, the shelf goes black and grey and counts those instead. */
/* A binder is dressed in every finish its set is complete in (#933, #1111), all at once and over the whole of it:
   the print, the art, the spine, the label and the meter, not the medals hanging on it. Each finish adds its own
   filter, so they combine. */
.binder-cover.is-finish-negative { --dress-negative: invert(1); }
.binder-cover.is-finish-deep_fried { --dress-fried: sepia(.55) saturate(2.2) contrast(1.25) brightness(.95); }
.binder-cover.is-finish-misprint { --dress-misprint: hue-rotate(150deg) saturate(1.3); }
.binder-cover.is-finish-prismatic { --dress-prismatic: saturate(1.5) brightness(1.08); }
.binder-cover.is-finish-foil { --dress-foil: saturate(1.35) brightness(1.06); }
.binder-cover:is(.is-finish-negative, .is-finish-deep_fried, .is-finish-misprint, .is-finish-prismatic, .is-finish-foil) > :is(.pack-print, .binder-cover-art, .binder-cover-spine, .binder-cover-label, .binder-cover-meter) {
    filter: var(--dress-negative,) var(--dress-fried,) var(--dress-misprint,) var(--dress-prismatic,) var(--dress-foil,);
}
.binder-cover.is-finish-negative { border-color: #f4f1ea; }
.binder-cover.is-finish-misprint > :is(.pack-print, .binder-cover-art) { translate: 2px 1px; }
.binder-cover.is-finish-misprint .binder-cover-label b { text-shadow: 1.5px 0 0 rgb(255 0 90 / .7), -1.5px 0 0 rgb(0 190 255 / .7); }
/* The prismatic film lies over all of it; a foil binder wears its foil material's sheet too (collection-binder.js,
   `data-card-foil`): Prism, Oil Slick or Obsidian. */
.binder-cover.is-finish-prismatic::before { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: linear-gradient(115deg, #ff5d8f33, #ffe60033, #6fd39b33, #5b84e833, #b48cf033); mix-blend-mode: color-dodge; pointer-events: none; }
.binder-cover.is-glitched { border-color: #000; background: #1a1a1e; color: #d6d6cc; box-shadow: 4px 4px 0 #000; }
.binder-cover.is-glitched:hover { box-shadow: 5px 8px 0 #000; }
.binder-cover.is-glitched.is-open { box-shadow: 7px 12px 0 #000; }
.binder-cover.is-glitched > :is(.pack-print, .binder-cover-art) { filter: grayscale(1) brightness(.32) contrast(1.1); }
.binder-cover.is-glitched .binder-cover-spine { border-right-color: #000; }
.binder-cover.is-glitched .binder-cover-label { border-color: #000; background: #2a2a30; box-shadow: 3px 3px 0 #000; }
.binder-cover.is-glitched .binder-cover-meter { border-color: #000; background: #2a2a30; }
.binder-cover.is-glitched .binder-cover-meter i { background: #8a8a82; }
.binder-cover.is-glitched .binder-cover-meter small { color: #f0f0e8; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.binder-cover.is-glitched.is-complete .binder-cover-meter i { background: linear-gradient(100deg, #5c5c62, #e8e8e0 45%, #a4a49c 55%, #3b3b42); }
.binder-cover-matches { position: absolute; left: 24%; top: 6%; min-width: 20px; padding: 2px 6px; border: 2px solid var(--ink-border); border-radius: 99px; background: #ff5d8f; color: #fff; font-size: 11px; font-weight: 900; text-align: center; }

/* The open binder */
.binder { --binder-card-width: 120px; --pocket-pad: 4px; --pocket-gap: 10px; --page-pad: 14px; --rings-gap: 34px; margin: 0 auto; outline: none; }
.binder:focus-visible { outline: 3px solid #8850d1; outline-offset: 8px; border-radius: 18px; }
.binder-head { display: flex; align-items: center; gap: 18px; max-width: 960px; margin: 0 auto 14px; }
.binder-medal { flex: 0 0 auto; display: grid; place-items: center; width: 68px; }
.binder-medal .badge-mount { zoom: .75; }
/* Even the medal leaves a hole until the first one is earned. */
.binder-medal.is-empty { box-sizing: border-box; width: 60px; height: 60px; margin: 4px; border: 3px dashed #cbbfd6; border-radius: 50%; background: radial-gradient(circle, var(--bg-subtle) 0 55%, transparent 56%); }
/* The meter's colours until a first medal gives it the medal's. */
.binder-title { --metal: #b9a6cc; --shine: #efe6f7; --edge: #6a5580; flex: 1; min-width: 0; }
.binder-title h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.1; overflow-wrap: anywhere; }
.binder-title h2 a { color: inherit; text-decoration: none; }
.binder-title h2 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.binder-title h2 a:focus-visible, .binder-count a:focus-visible { outline: 3px solid #8850d1; outline-offset: 3px; border-radius: 3px; }
.binder-count { margin: 4px 0 10px; color: var(--text-muted); font-size: .85rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.binder-count strong { color: var(--text-dark); font-size: 1.15rem; }
.binder-count b { color: #a56d12; }
.binder-count a { color: var(--accent-purple); font-weight: 800; }
/* A medal over its plaque, as the badge cabinet hangs them. */
/* A set held whole in a finish hangs that finish's medal too, one for each (#1100), small beside the completion
   medal; they swing in one after another. */
/* A medal in the open binder opens up close in the inspector (collection-binder.js). */
/* A medal opens up close, and stays a medal: none of the site's button, at rest, hovered, pressed or focused. */
:is(button.binder-medal, button.binder-finish-medal),
:is(button.binder-medal, button.binder-finish-medal):is(:hover, :active, :focus) { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; transform: none; color: inherit; font: inherit; cursor: zoom-in; }
.binder-finish-medals { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, auto); gap: 2px 4px; align-self: start; }
.binder-finish-medal { display: grid; animation: binder-finish-medal-in .45s cubic-bezier(.2, .8, .2, 1.3) both; transform-origin: 50% 0; }
.binder-finish-medal:nth-child(2) { animation-delay: .08s; }
.binder-finish-medal:nth-child(3) { animation-delay: .16s; }
.binder-finish-medal:nth-child(n+4) { animation-delay: .24s; }
.binder-finish-medal .badge-mount.is-hung { width: 42px; height: 58px; }
.binder-finish-medal .badge-ribbon { width: 28px; height: 23px; }
.binder-finish-medal .badge-mount > :is(.badge-medal, .badge-effect-host) { width: 42px; height: 42px; margin-top: 18px; }
.binder-finish-medal .badge-mount .badge-effect-host > :is(svg, .badge-medal), .binder-finish-medal .badge-effect-host .badge-medal > svg, .binder-finish-medal .badge-medal > svg { width: 42px; height: 42px; }
@keyframes binder-finish-medal-in { from { opacity: 0; transform: rotate(-14deg) translateY(-6px); } }
.motion-reduced .binder-finish-medal { animation: none; }
.binder-cover-medals:has(.is-finish) .binder-cover-medal { margin-inline-start: -10cqw; }
.binder-cover-medals:has(.is-finish) .binder-cover-medal:first-child { margin-inline-start: 0; }
.binder-award { flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; }
.binder-award .badge-plaque { box-sizing: border-box; width: 124px; text-align: center; }
.binder-awards { flex: 0 0 auto; display: grid; }
.binder-award-side { display: grid; grid-area: 1 / 1; justify-items: center; align-content: start; }
.binder-award-side.is-away { visibility: hidden; }
/* Turns a binder over to its ? copies, and back. */
.binder-glitch-toggle { flex: 0 0 auto; display: grid; place-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--ink-border); border-radius: 7px; background: #1a1a1e; color: #d6d6cc; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.binder-glitch-toggle > span { grid-area: 1 / 1; }
.binder-glitch-toggle > .is-away { visibility: hidden; }
.binder-glitch-toggle[aria-pressed="true"] { background: var(--white); color: var(--text-dark); }
.binder-glitch-toggle:focus-visible { outline: 3px solid #8850d1; outline-offset: 2px; }
/* Progress, with a notch at each completion medal. */
.binder-meter { position: relative; max-width: 540px; height: 12px; margin-right: 8px; border: 2px solid var(--ink-border); border-radius: 99px; background: var(--white); }
.binder-meter-fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(180deg, var(--shine), var(--metal) 45%, var(--edge)); }
.binder-meter-mark { position: absolute; top: 50%; box-sizing: border-box; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--ink-border); border-radius: 50%; background: var(--white); }
.binder-meter-mark.is-reached { background: radial-gradient(circle at 35% 35%, var(--shine), var(--metal) 60%, var(--edge)); }
.binder.is-complete .binder-meter-fill { background: linear-gradient(100deg, #d9a93c, var(--tint-yellow) 45%, #e5b75c 55%, #a56d12); }

/* The board: inside of the cover, in the colours of the set's pack. */
.binder-board {
    width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0 auto; padding: 12px 20px;
    border: 2px solid var(--ink-border); border-radius: 20px;
    background: linear-gradient(135deg, #ffffff1f, #0000001f), color-mix(in srgb, var(--pack-a, hsl(var(--pack-hue, 280) 86% 64%)) 62%, #25252d);
    box-shadow: 7px 7px 0 var(--ink-shadow);
}
.binder-spread { display: flex; justify-content: center; touch-action: pan-y; }
.binder-slot { position: relative; perspective: 2600px; }
.binder-slot.is-left { perspective-origin: 100% 50%; }
.binder-slot.is-right { perspective-origin: 0% 50%; }
.binder-slot.is-turning { z-index: 3; }
.binder-rings { position: relative; z-index: 4; flex: 0 0 var(--rings-gap); display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; }
.binder-rings i { width: calc(var(--rings-gap) + 18px); height: 13px; border: 2px solid var(--ink-border); border-radius: 99px; background: linear-gradient(var(--bg-subtle), #c9c9d4 40%, var(--bg-subtle) 55%, #8e8e9c); box-shadow: 0 2px 0 #0000004d; }
.binder-spread:not(.is-two-pages) { --rings-gap: 22px; }
.binder-spread:not(.is-two-pages) .binder-rings i { width: 30px; margin-left: 8px; }

/* A page. Whatever its pockets raise (a new copy's glow, a card taken out of
   its sleeve) stays on the page, so a page turns as one sheet. */
.binder-page {
    isolation: isolate;
    box-sizing: border-box; display: flex; flex-direction: column; height: 100%;
    width: calc(3 * (var(--binder-card-width) + 2 * var(--pocket-pad)) + 2 * var(--pocket-gap) + 2 * var(--page-pad) + 4px);
    padding: var(--page-pad) var(--page-pad) 4px; border: 2px solid var(--ink-border); border-radius: 4px 10px 10px 4px;
    background: repeating-linear-gradient(0deg, transparent 0 3px, #0000000a 3px 4px), repeating-linear-gradient(90deg, transparent 0 3px, #00000006 3px 4px), linear-gradient(var(--bg-subtle), var(--tint-yellow));
}
.binder-slot.is-left .binder-page, .binder-leaf.is-backward .binder-leaf-face.is-front .binder-page, .binder-leaf.is-forward .binder-leaf-face.is-back .binder-page { border-radius: 10px 4px 4px 10px; }
/* Past the last page, the inside of the back cover. */
.binder-slot > .binder-page.is-blank { visibility: hidden; }
.binder-page.is-blank { min-height: calc(3 * (var(--binder-card-width) * 7 / 4 + 2 * var(--pocket-pad)) + 2 * var(--pocket-gap) + var(--page-pad) + 30px); }
.binder-page.is-complete { box-shadow: inset 0 0 0 3px #e5b75c80; }
.binder.is-complete .binder-board { box-shadow: 7px 7px 0 var(--ink-shadow), inset 0 0 0 3px #e5b75c; }
.binder-page.is-extra { background: radial-gradient(circle at 25% 15%, #4a3460, #1c1426 72%); }
.binder-page.is-loose { background: repeating-linear-gradient(0deg, transparent 0 3px, #0000000d 3px 4px), linear-gradient(var(--tint-yellow), #dac8a8); }
.binder-pockets { display: grid; grid-template-columns: repeat(3, calc(var(--binder-card-width) + 2 * var(--pocket-pad))); gap: var(--pocket-gap); margin: 0; padding: 0; list-style: none; }
.binder-page-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; color: var(--text-muted); font: 700 11px ui-monospace, monospace; }
.binder-slot.is-left .binder-page-foot { flex-direction: row-reverse; }
.binder-page-number { margin-left: auto; }
.binder-slot.is-left .binder-page-number { margin: 0 auto 0 0; }
.binder-page.is-extra .binder-page-foot { color: #c9a45c; }
.binder-page-seal { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid #8c5b23; border-radius: 50%; background: radial-gradient(circle at 32% 30%, var(--tint-yellow), #e5b75c 55%, #a56d12); color: #fff; font-size: 12px; line-height: 1; text-shadow: 0 1px 0 #8c5b23; box-shadow: 0 1px 0 #8c5b23; transform: rotate(-12deg); }

/* A pocket: a clear sleeve, with the card slipped in or not. */
.binder-pocket {
    position: relative; box-sizing: border-box;
    height: calc(var(--binder-card-width) * 7 / 4 + 2 * var(--pocket-pad)); padding: var(--pocket-pad);
    border: 1px solid #d6cdbd; border-radius: 6px; background: linear-gradient(160deg, #ffffffc4, #efe9dd99);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px #0000000d;
}
/* Only an empty sleeve catches the light: over a card it would pass for a foil. */
.binder-pocket:not(.is-filled)::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 36%, #ffffff5e 44%, transparent 52%), linear-gradient(180deg, #ffffff30, transparent 28%); }
.binder-card { position: relative; display: block; width: var(--binder-card-width); color: inherit; text-decoration: none; border-radius: 8px; transition: transform .16s ease; }
.binder-card:focus-visible { outline: 3px solid #8850d1; outline-offset: 3px; }
/* Taken a little way out of its sleeve. */
.binder-pocket.is-filled:hover .binder-card, .binder-card:focus-visible { transform: translateY(-6px) rotate(-1.5deg); }
.binder-pocket.is-filled:hover { z-index: 3; }
/* An object that is no card (an Engraved Coin, #1153) lies in the middle of its sleeve, at the size of its own kind. */
.binder-object { display: grid; place-items: center; width: var(--binder-card-width); height: 100%; border-radius: 8px; transition: transform .16s ease; }
.binder-object:focus-visible { outline: 3px solid #8850d1; outline-offset: 3px; }
.binder-object .bouzopp-coin { width: calc(var(--binder-card-width) * .7 * var(--piece-size, 1)); height: calc(var(--binder-card-width) * .7 * var(--piece-size, 1)); }
.binder-pocket.is-filled:hover .binder-object, .binder-object:focus-visible { transform: translateY(-6px) rotate(-6deg); }
.binder-card-stage { display: block; width: 340px; zoom: var(--binder-card-scale, .35); }
.binder-card-stage .trading-card { width: 340px; }
/* A full-image copy shows its picture alone, the details under it too, unless the collector asks for them. */
/* A full-image copy shows its picture alone in a binder: the picture already says what it is. */
.binder .trading-card.full-card-image > .collectible-caption { display: none; }
/* The owner's way to choose the copy a pocket shows (#1097), under its count; the copies come up one by one. */
.binder-choose { position: absolute; z-index: 4; right: -7px; top: 18px; width: 24px; height: 24px; padding: 0; border: 2px solid #493057; border-radius: 50%; background: var(--white); color: var(--accent-purple); box-shadow: 1px 2px 0 #493057; font-size: 12px; font-weight: 900; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease-out; }
.binder-pocket:is(:hover, :focus-within) .binder-choose, .binder-choose:focus-visible { opacity: 1; }
@media (hover: none) { .binder-choose { opacity: 1; } }
.binder-choose-dialog { width: min(560px, calc(100vw - 32px)); }
.binder-choose-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
.binder-choose-preview { width: 150px; animation: binder-copy-in .3s ease-out; }
.binder-choose-preview .trading-card { width: 100%; max-width: 150px; }
@keyframes binder-copy-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.motion-reduced .binder-choose-preview { animation: none; }
@media (max-width: 480px) { .binder-choose-body { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.binder-copies { position: absolute; z-index: 3; right: -7px; top: -8px; min-width: 22px; padding: 2px 6px; border: 2px solid #493057; border-radius: 99px; background: var(--tint-yellow); color: var(--accent-purple); box-shadow: 1px 2px 0 #493057; font-size: 11px; font-weight: 900; line-height: 1.2; text-align: center; pointer-events: none; }
.binder-price { position: absolute; z-index: 3; left: -6px; bottom: 12px; padding: 1px 6px 1px 13px; border: 2px solid var(--ink-border); border-radius: 3px 9px 9px 3px; background: var(--pastel-blue); color: var(--text-dark); font-size: 10px; font-weight: 900; transform: rotate(-5deg); pointer-events: none; }
.binder-price::before { content: ''; position: absolute; left: 4px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #25252d; }

/* A hole: the sleeve is empty, the number shows through. */
.binder-pocket.is-hole { background: repeating-linear-gradient(135deg, transparent 0 7px, #25252d08 7px 8px), linear-gradient(160deg, var(--tint-yellow), var(--tint-yellow)); box-shadow: inset 0 2px 7px #00000021, inset 0 0 0 1px #ffffff8c; }
.binder-hole { position: absolute; inset: var(--pocket-pad); display: grid; place-content: center; justify-items: center; gap: 2px; border: 2px dashed #d3c8b5; border-radius: 7px; color: #b5aa96; text-decoration: none; }
.binder-hole b { color: #d5ccba; font: 900 calc(var(--binder-card-width) * .3)/1 "Sora", sans-serif; letter-spacing: -.05em; text-shadow: 0 1px 0 #fff, 0 -1px 0 #00000014; }
.binder-hole i { color: #c7bca9; font-size: calc(var(--binder-card-width) * .14); font-style: normal; font-weight: 900; }
/* The band its card will wear, faded, along the top of the sleeve. */
.binder-pocket.is-hole::before { content: ''; position: absolute; top: calc(var(--pocket-pad) + 7px); left: calc(var(--pocket-pad) + 8px); right: calc(var(--pocket-pad) + 8px); height: 4px; border-radius: 99px; background: var(--rarity-color, #75818f); opacity: .5; }
a.binder-hole:hover { border-color: #a78bc4; background: #ffffff8f; }
a.binder-hole:hover b { color: #bca7d3; }
a.binder-hole:focus-visible { outline: 3px solid #8850d1; outline-offset: 2px; }
.binder-pocket.is-unused { border-style: dashed; background: #ffffff4d; box-shadow: none; opacity: .55; }
/* The set's goodies (#1316) on a page of their own: green felt, the things on it in sleeves of their own. */
.binder-page.is-goodie { background: radial-gradient(circle at 30% 20%, #2f5d4a, #163126 75%); }
.binder-page.is-goodie .binder-page-foot { color: #bfe3cf; }
.binder-goodie-title { font: 400 calc(var(--binder-card-width) * .16) / 1 'Permanent Marker', 'Segoe Print', cursive; letter-spacing: .04em; color: #ffffff8c; }
.binder-page.is-goodie .binder-pocket { border-color: #ffffff2e; background: #ffffff12; box-shadow: inset 0 0 0 1px #0000004d; }
.binder-page.is-goodie .binder-pocket.is-hole { background: repeating-linear-gradient(135deg, transparent 0 7px, #ffffff08 7px 8px), #ffffff0a; }
.binder-page.is-goodie .binder-hole { border-color: #ffffff4a; }
.binder-page.is-goodie .binder-hole b, .binder-page.is-goodie .binder-hole i { color: #ffffff5c; text-shadow: none; }
.binder-page.is-goodie a.binder-hole:hover { background: #ffffff12; border-color: #bfe3cf; }
/* A medium or a large goodie is kept as a photo of it: a print in a white border, its name written under. */
.binder-card.is-photo { display: grid; height: 100%; place-items: center; }
.binder-photo { display: grid; grid-template-rows: 1fr auto; gap: 4px; box-sizing: border-box; width: calc(var(--binder-card-width) * .86); padding: 5px 5px 7px; background: #fbf8f1; border-radius: 3px; box-shadow: 0 2px 6px #00000059; transform: rotate(-2deg); }
.binder-pocket.is-large .binder-photo { width: calc(var(--binder-card-width) * .94); transform: rotate(2deg); }
.binder-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: #ddd6c8; }
.binder-photo small { overflow: hidden; color: #3a3630; font: 400 calc(var(--binder-card-width) * .1) / 1.2 'Permanent Marker', 'Segoe Print', cursive; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.binder-pocket.is-filled:hover .binder-card.is-photo .binder-photo { transform: rotate(0deg) scale(1.03); }
/* A scratch ticket's pocket (#1316): the ticket held up as it stands, the width of a card. */
.binder-pocket.is-ticket .binder-ticket { display: block; color: inherit; text-decoration: none; }
.binder-ticket-stage { display: block; width: var(--binder-card-width); transition: transform .2s; }
.binder-ticket-stage .scratch-ticket-stage { padding: 0; }
.binder-ticket-stage .scratch-ticket { width: 100%; max-height: none; margin: 0; border-width: 2px; box-shadow: 2px 2px 0 var(--ticket-ink); }
.binder-ticket-stage .card-inspector-glare { display: none; }
.binder-ticket-name { display: grid; place-items: center; box-sizing: border-box; width: 100%; aspect-ratio: 2 / 3; padding: 6px; background: #fff4d6; border: 2px solid #23182f; border-radius: 4px; color: #23182f; font: 800 calc(var(--binder-card-width) * .1) / 1.2 Sora, system-ui, sans-serif; text-align: center; overflow-wrap: anywhere; }
.binder-pocket.is-filled:hover .binder-ticket-stage { transform: translateY(-3px); }
.binder-map-page.is-goodie { background: #1f3a2e; }
.binder-map-page.is-goodie i { background: #ffffff26; }
.binder-map-page.is-goodie i.is-filled { background: #8fd3ad; }
.binder-page.is-extra .binder-pocket { border-color: #c9a45c8c; background: #ffffff0f; box-shadow: inset 0 0 0 1px #0000004d; }
.binder-page.is-extra .binder-pocket.is-hole { background: repeating-linear-gradient(135deg, transparent 0 7px, #ffffff08 7px 8px), #ffffff08; }
.binder-page.is-extra .binder-hole { border-color: #c9a45c73; }
.binder-page.is-extra .binder-hole b { color: #c9a45c61; text-shadow: none; }
.binder-page.is-extra .binder-hole i { color: #c9a45c61; }
.binder-page.is-extra a.binder-hole:hover { background: #ffffff12; border-color: #e5b75c; }

/* Filters light up what matches and leave the rest in the shade. */
.binder-pocket.is-dimmed > :not(.binder-hole), .binder-pocket.is-dimmed .binder-hole > * { opacity: .2; filter: grayscale(.9); }
.binder-pocket.is-match { box-shadow: 0 0 0 3px #ff5d8f, 0 0 18px #ff5d8f8c; }

/* Turning pages: a button either side of the binder, or under it when there
   is only room for one page. */
.binder-desk { display: grid; grid-template-columns: auto auto auto; grid-template-areas: "previous board next" ". position ."; align-items: center; justify-content: center; gap: 10px 16px; }
.binder-desk > .binder-board { grid-area: board; }
.binder.is-one-page .binder-desk { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "board board board" "previous position next"; }
.binder.is-one-page .binder-desk > .binder-board { justify-self: center; }
.binder-turn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0 0 4px; border: 2px solid var(--ink-border); border-radius: 50%; background: var(--white); color: var(--text-dark); box-shadow: 3px 3px 0 var(--ink-shadow); font: 900 30px/1 "Sora", sans-serif; cursor: pointer; transition: transform .15s ease; }
.binder-turn.is-previous { grid-area: previous; }
.binder-turn.is-next { grid-area: next; }
.binder-turn:hover:not(:disabled) { background: var(--pastel-purple-light); transform: translateY(-2px); }
.binder-turn:focus-visible { outline: 3px solid #8850d1; outline-offset: 3px; }
.binder-turn:disabled { opacity: .25; box-shadow: none; cursor: default; }
.binder-position { grid-area: position; margin: 2px 0 0; color: var(--text-muted); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; text-align: center; }
.binder-map { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 920px; margin: 12px auto 0; padding: 0; list-style: none; }
.binder-map-page { display: grid; grid-template-columns: repeat(3, 6px); align-content: start; gap: 2px; width: 36px; height: 43px; box-sizing: border-box; padding: 5px; border: 2px solid #d4cadb; border-radius: 5px; background: var(--bg-subtle); cursor: pointer; transition: transform .15s ease; }
.binder-map-page i { width: 6px; height: 9px; border-radius: 1px; background: var(--tint-yellow); }
.binder-map-page i.is-filled { background: #8954bd; }
.binder-map-page:hover { transform: translateY(-2px); }
.binder-map-page:focus-visible { outline: 3px solid #8850d1; outline-offset: 2px; }
.binder-map-page[aria-current] { border-color: var(--ink-border); box-shadow: 2px 2px 0 var(--ink-shadow); transform: translateY(-3px); }
.binder-map-page.is-complete { border-color: #e5b75c; }
.binder-map-page.is-complete i.is-filled { background: #d9a93c; }
.binder-map-page.is-extra { background: #241b30; }
.binder-map-page.is-extra i { background: #ffffff26; }
.binder-map-page.is-extra i.is-filled { background: #e5b75c; }
.binder-map-page.is-loose { background: var(--tint-yellow); }
.binder-map-page.is-match { outline: 2px solid #ff5d8f; outline-offset: 2px; }

/* The leaf being turned carries a page on each side and swings about the rings. */
.binder-leaf { position: absolute; inset: 0; z-index: 5; transform-style: preserve-3d; pointer-events: none; }
.binder-leaf.is-forward { transform-origin: calc(var(--rings-gap) / -2) 50%; }
.binder-leaf.is-backward { transform-origin: calc(100% + var(--rings-gap) / 2) 50%; }
.binder-leaf.is-single { transform-origin: calc(var(--rings-gap) / -2) 50%; }
.binder-leaf-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.binder-leaf-face.is-back { transform: rotateY(180deg); }
.binder-leaf-face::after { content: ''; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(90deg, #00000026, transparent 30%, transparent 70%, #0000001a); pointer-events: none; }

@media (max-width: 600px) {
    .binder-shelf { gap: 14px; margin-bottom: 22px; }
    .binder-cover { width: 96px; }
    .binder-head { flex-wrap: wrap; gap: 10px 14px; }
    .binder-medal { width: 54px; }
    .binder-medal .badge-mount { zoom: .6; }
    .binder-medal.is-empty { width: 46px; height: 46px; }
    .binder-worldbuilder { order: 3; }
}
/* One page at a time on a narrow screen, with tighter margins. */
.binder.is-one-page { --pocket-gap: 6px; --page-pad: 9px; }
.binder.is-one-page .binder-board { padding: 10px 10px 10px 6px; border-radius: 14px; box-shadow: 4px 4px 0 var(--ink-shadow); }
.binder.is-complete.is-one-page .binder-board { box-shadow: 4px 4px 0 var(--ink-shadow), inset 0 0 0 3px #e5b75c; }

/* A copy that arrived since its owner last looked glows in its pocket, a band of
   light passing over it now and then, until they look at it. Nothing is laid on
   the card itself. */
.binder-pocket.is-new { z-index: 2; border-color: #e5b75c; box-shadow: 0 0 0 2px #e5b75c, 0 0 18px 4px color-mix(in srgb, var(--rarity-color, #e5b75c) 50%, #ffd76b); animation: binder-new-glow 1.8s ease-in-out infinite; }
@keyframes binder-new-glow { 50% { box-shadow: 0 0 0 3px #ffe9a3, 0 0 30px 9px color-mix(in srgb, var(--rarity-color, #e5b75c) 40%, #ffe9a3); } }
.binder-pocket.is-new::after { content: ''; position: absolute; inset: var(--pocket-pad); z-index: 2; border-radius: 8px; pointer-events: none; background: linear-gradient(105deg, transparent 38%, #fff7d6b3 48%, transparent 58%) no-repeat; background-size: 250% 100%; background-position: 130% 0; mix-blend-mode: screen; animation: binder-new-sheen 3.2s ease-in-out infinite; }
@keyframes binder-new-sheen { 0%, 45% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
/* Looked at: the glow goes out with a last flare. */
.binder-pocket.is-seen { animation: binder-seen .7s ease-out; }
@keyframes binder-seen { from { box-shadow: 0 0 0 2px #fff3c4, 0 0 32px 10px #ffe9a3; } }
/* Between the cover's label and its meter, clear of both. */
.binder-cover-new { position: absolute; left: 24%; bottom: 25%; padding: 1px 6px; border: 2px solid var(--ink-border); border-radius: 99px; background: var(--pastel-yellow); color: var(--text-dark); box-shadow: 0 0 10px #ffd76b; font-size: 10px; font-weight: 1000; white-space: nowrap; }
.binder-map-page.has-new { position: relative; }
.binder-map-page.has-new::after { content: ''; position: absolute; top: -5px; right: -5px; width: 9px; height: 9px; border: 2px solid var(--ink-border); border-radius: 50%; background: var(--pastel-yellow); }
.motion-reduced .binder-pocket.is-new, .motion-reduced .binder-pocket.is-new::after,
.motion-reduced .binder-pocket.is-seen { animation: none; }

/* A missing card: its lowest price on the market, and a star when wished for. */
.binder-hole-offer { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border: 2px solid var(--ink-border); border-radius: 999px; background: var(--pastel-green); color: var(--text-dark); font-size: .72rem; font-weight: 1000; line-height: 1.2; }
.binder-hole-offer::after { content: " cr"; font-weight: 800; }
.binder-hole-wanted { position: absolute; top: 5px; right: 7px; color: #f5b400; font-size: 1rem; text-shadow: 0 1px 0 var(--ink-shadow); }
.binder-pocket.is-on-offer .binder-hole { border-style: solid; }

/* A set's Uniques: a page of their own, the cards in the middle and room around them for words, a drawing and stickers. */
.binder-page.is-unique { position: relative; background: radial-gradient(circle, #25252d1f 1px, transparent 1.4px) 0 0 / 14px 14px, linear-gradient(var(--bg-subtle), var(--tint-yellow)); }
.binder-unique-stage { position: relative; flex: 1; display: grid; place-items: center; min-height: calc(3 * (var(--binder-card-width) * 7 / 4 + 2 * var(--pocket-pad)) + 2 * var(--pocket-gap)); }
.binder-unique-title { position: absolute; top: 0; left: 0; right: 0; margin: 0; color: #25252d59; font: 400 calc(var(--binder-card-width) * .2) / 1 'Permanent Marker', 'Segoe Print', cursive; text-align: center; letter-spacing: .04em; transform: rotate(-2deg); }
.binder-uniques { --unique-scale: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--pocket-gap); margin: 0; padding: 0; list-style: none; }
.binder-uniques.is-one { --unique-scale: 1.5; }
.binder-uniques.is-two { --unique-scale: 1.2; }
.binder-uniques .binder-pocket { width: calc(var(--binder-card-width) * var(--unique-scale) + 2 * var(--pocket-pad)); height: calc(var(--binder-card-width) * var(--unique-scale) * 7 / 4 + 2 * var(--pocket-pad)); }
.binder-uniques .binder-card-stage { zoom: calc(var(--binder-card-scale, .35) * var(--unique-scale)); }
.binder-decorate { padding: 2px 9px; border: 1px solid var(--ink-border); border-radius: 99px; background: var(--white); box-shadow: none; color: var(--text-dark); font: 800 11px Sora, system-ui, sans-serif; cursor: pointer; }
.binder-decorate:hover { background: var(--pastel-yellow); transform: none; }

/* What a collector put on the page: over the cards, but never in the way of a click. */
.binder-decor { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; container-type: inline-size; }
.binder-decor-note, .binder-decor-sticker { position: absolute; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; transform: translate(-50%, -50%) rotate(var(--decor-turn, 0deg)); }
.binder-decor-note { max-width: 92%; font: 400 calc(var(--note-size, 1) * 5.2cqi) / 1.1 'Permanent Marker', 'Segoe Print', 'Comic Sans MS', cursive; text-align: center; overflow-wrap: anywhere; white-space: normal; }
.binder-decor-sticker { display: block; aspect-ratio: 1; filter: drop-shadow(.6cqi 0 0 #fff) drop-shadow(-.6cqi 0 0 #fff) drop-shadow(0 .6cqi 0 #fff) drop-shadow(0 -.6cqi 0 #fff) drop-shadow(.8cqi .8cqi 0 #25252d59); }
.binder-decor-sticker.is-card { aspect-ratio: auto; }
.binder-decor-sticker img { display: block; width: 100%; height: auto; border-radius: 6%; pointer-events: none; }
.binder-decor-face { position: relative; display: block; overflow: hidden; border-radius: 6%; }
.binder-decor-sticker img.is-negative, .binder-decor-palette img.is-negative { filter: invert(1); }
.binder-decor-emblem { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--pack-c, #ffde58); fill-rule: evenodd; stroke: var(--text-dark); stroke-width: 7; stroke-linejoin: round; paint-order: stroke; }

/* The editor: the page large on one side, what can go on it on the other. */
.binder-decor-editor { width: min(980px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 3px solid var(--ink-border); border-radius: 16px; background: var(--white); box-shadow: 6px 6px 0 var(--ink-shadow); color: var(--text-dark); }
.binder-decor-editor::backdrop { background: #1c142699; }
.binder-decor-shell > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 3px solid var(--ink-border); }
.binder-decor-shell h2 { margin: 0; font-size: 1.2rem; }
.binder-decor-shell > header button { padding: 0 10px; border: 0; background: none; box-shadow: none; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.binder-decor-body { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; padding: 16px; }
.binder-decor-binder { flex: 0 0 auto; margin: 0 auto; }
.binder-decor-binder .binder-page { width: calc(3 * (var(--binder-card-width) + 2 * var(--pocket-pad)) + 2 * var(--pocket-gap) + 2 * var(--page-pad) + 4px); border-radius: 10px; touch-action: none; user-select: none; }
.binder-decor-binder .binder-pocket { pointer-events: none; }
.binder-decor.is-editing { overflow: visible; }
.binder-decor.is-editing [data-decor-item] { pointer-events: auto; cursor: grab; touch-action: none; }
.binder-decor.is-editing [data-decor-item].is-active { outline: 2px dashed #7543c5; outline-offset: 4px; }
.binder-decor-resize { position: absolute; top: auto; left: auto; right: -11px; bottom: -11px; z-index: 2; width: 14px; height: 14px; padding: 0; border: 2px solid #7543c5; border-radius: 3px; background: var(--white); box-shadow: none; cursor: nwse-resize; touch-action: none; }
.binder-decor-resize::after { content: ''; position: absolute; inset: -10px; }
.binder-decor.is-editing.is-drawing { cursor: crosshair; }
.binder-decor.is-editing [data-decor-item] > .placement-rotate { --placement-scale: 1; }
.binder-decor-tools { display: grid; flex: 1 1 280px; gap: 12px; min-width: 0; }
.binder-decor-tools fieldset { margin: 0; padding: 10px 12px; border: 2px solid var(--ink-border); border-radius: 10px; }
.binder-decor-tools legend { padding: 0 4px; font-weight: 900; }
.binder-decor-tools button { padding: 5px 11px; border: 2px solid var(--ink-border); border-radius: 8px; background: var(--white); box-shadow: none; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.binder-decor-tools button:disabled { opacity: .5; cursor: default; }
.binder-decor-tools button[aria-pressed="true"] { background: var(--pastel-yellow); }
.binder-decor-selection { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--tint-yellow); font-size: .85rem; font-weight: 700; }
.binder-decor-selection > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.binder-decor-selection label { display: inline-flex; align-items: center; gap: 6px; }
.binder-decor-selection small { font-weight: 600; opacity: .75; }
.binder-decor-colors { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.binder-decor-colors[hidden] { display: none; }
.binder-decor-colors button { width: 20px; height: 20px; padding: 0; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #25252d44; cursor: pointer; }
.binder-decor-colors button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink-shadow); }
.binder-decor-colors input[type="color"] { width: 26px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.binder-decor-words, .binder-decor-draw { display: flex; flex-wrap: wrap; gap: 6px; }
.binder-decor-words input { flex: 1 1 160px; min-width: 0; padding: 6px 10px; border: 2px solid var(--ink-border); border-radius: 8px; font: 400 1rem 'Permanent Marker', 'Segoe Print', cursive; }
.binder-decor-inks { display: flex; gap: 8px; margin-top: 8px; }
.binder-decor-inks input { position: absolute; opacity: 0; }
.binder-decor-inks span { display: block; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #25252d44; cursor: pointer; }
.binder-decor-inks input:checked + span { box-shadow: 0 0 0 3px var(--ink-shadow); }
.binder-decor-inks input:focus-visible + span { outline: 3px solid #7543c5; outline-offset: 2px; }
.binder-decor-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.binder-decor-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.binder-decor-palette button { display: grid; place-items: center; aspect-ratio: 1; padding: 5px; }
.binder-decor-palette.is-cards { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
.binder-decor-palette.is-cards button { aspect-ratio: 5 / 7; padding: 2px; }
.binder-decor-palette img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.binder-decor-mine { margin: 10px 0 6px; font-size: .8rem; font-weight: 800; }
.binder-decor-status { min-height: 1.2em; margin: 0; font-weight: 700; }
.binder-decor-tools footer { display: flex; justify-content: flex-end; gap: 8px; }
.binder-decor-tools footer [data-decor-save] { background: var(--pastel-yellow); }

/* Custom binders (#1229): a second tab on the shelf, where the collector's own binders stand beside the Other
   and Wishlist ones. Their pages take the rows and columns their owner chose. */
.binder-tabs { display: inline-flex; gap: 4px; margin-right: auto; padding: 3px; border: 2px solid var(--ink-border); border-radius: 99px; background: var(--white); }
.binder-tabs button { padding: 5px 14px; border: 0; border-radius: 99px; background: none; box-shadow: none; color: var(--text-dark); font: 800 12px Sora, system-ui, sans-serif; cursor: pointer; }
.binder-tabs button[aria-selected="true"] { background: var(--pastel-yellow); box-shadow: inset 0 0 0 2px var(--ink-border); }
.binder-tabs button:focus-visible { outline: 3px solid #8850d1; outline-offset: 2px; }
.binder-shelf-head:has(.binder-tabs) .binder-find { margin-right: 0; }
.binder-cover.is-new-binder { border-style: dashed; background: var(--bg-subtle); }
.binder-cover.is-new-binder .binder-cover-label { display: grid; gap: 4px; text-align: center; transform: none; }
.binder-cover.is-new-binder .binder-cover-label b { font-size: 26cqw; line-height: 1; }
.binder-cover.is-new-binder .binder-cover-label small { font-size: 9cqw; font-weight: 800; }
.binder-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.binder-tools button { padding: 4px 11px; border: 2px solid var(--ink-border); border-radius: 99px; background: var(--white); box-shadow: none; color: var(--text-dark); font: 800 12px Sora, system-ui, sans-serif; cursor: pointer; }
.binder-tools button:hover { background: var(--pastel-yellow); transform: none; }
/* A custom page's pockets, on the Uniques' stage: a grid of the columns its collector chose, scaled as the Uniques are. */
.binder-uniques.is-grid { display: grid; grid-template-columns: repeat(var(--binder-columns, 3), auto); justify-content: center; align-content: center; }
/* A slot kept for a card the collector is after: its name under the number, a star when it is on the wishlist. */
.binder-pocket.is-reserved .binder-hole { border-style: dotted; }
.binder-pocket.is-reserved.is-wanted .binder-hole { border-color: #e2b25e; }
.binder-hole-name { max-width: calc(var(--binder-card-width) - 12px); overflow: hidden; color: #a99d88; font-size: calc(var(--binder-card-width) * .11); font-weight: 800; line-height: 1.15; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

/* A binder slot in a showcase (#1235): the button that opens the binder in it, as big as its cover, the slot's
   whole box; empty, a dashed outline its owner sees while arranging. */
.binder-showcase { position: relative; width: 120px; container-type: inline-size; }
.binder-showcase .binder-cover.is-object { display: block; width: 100%; cursor: default; }
.binder-showcase .binder-cover.is-object:hover { transform: none; box-shadow: 5px 5px 0 var(--ink-shadow); }
.binder-showcase .binder-showcase-button { position: relative; z-index: 2; display: block; width: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 4px 10px 10px 4px; background: transparent; box-shadow: none; cursor: pointer; }
.binder-showcase .binder-showcase-button:hover { background: transparent; box-shadow: none; }
.binder-slot-empty { display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 7; box-sizing: border-box; padding: 10px; border: 2px dashed #9f927b; border-radius: 5px 11px 11px 5px; color: var(--scene-ink, #72634c); font-size: 12px; text-align: center; }
.showcase-canvas:not(.is-arranging) .binder-slot-empty { visibility: hidden; }
/* Choosing the binder a slot holds: each of the collector's binders as its cover. */
.binder-slot-choice .picker-items { display: flex; flex-wrap: wrap; gap: 12px; }
.binder-slot-option { display: grid; justify-items: center; gap: 6px; width: 96px; padding: 6px; border: 2px solid transparent; border-radius: 10px; background: transparent; box-shadow: none; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.binder-slot-option .binder-cover { width: 72px; cursor: inherit; }
.binder-slot-option[aria-pressed="true"] { border-color: #8850d1; background: color-mix(in srgb, #8850d1 12%, transparent); }
.binder-showcase-button:focus-visible { outline: 3px solid #8850d1; outline-offset: 3px; }
.binder-showcase:hover .binder-cover.is-object { transform: translateY(-4px); }
/* The binder's own page: no shelf, the pages alone. */
.binder-page-pages .binder-shelf-head, .binder-page-pages .binder-shelf, .binder-page-pages .binder-tools { display: none; }
.binder-page-pages .collection-binders { margin-top: 12px; }
.card-page-inspected .binder-page-pages { flex: 0 0 100%; box-sizing: border-box; width: 100%; min-width: 0; }
.card-page-inspected .binder-page-pages .binder-count { color: #b9afc9; }
.card-page-inspected .binder-page-pages .binder-count strong { color: #fff; }
/* Framed in the inspector, the binder opens under its cover and the page scrolls to it, as on its own page. */
.card-page-embedded:has(.binder-page-pages) { height: auto; min-height: 100dvh; overflow-y: auto; }
.card-page-embedded .card-page:has(> .binder-page-pages) { flex-wrap: wrap; height: auto; min-height: 100dvh; padding-block: 24px; }

/* The binder editor: the page being arranged on the whole width, a card picker beside it, the cover on its own
   tab: the cover itself on the designer's stage (pack-designer.css, `.is-cover`), its choices beside it.
   Buttons, selects and the tabs are the site's own. */
/* dialog.dialog sets a width of its own; the editor needs the room of a page and its picker. */
dialog.binder-editor { width: min(1320px, calc(100vw - 32px)); }
.binder-editor .binder-tabs { justify-self: start; margin: 0; }
.binder-editor-pages { display: grid; gap: 14px; }
.binder-editor-pages[hidden], .binder-editor-cover[hidden] { display: none; }
.binder-editor-name { max-width: 420px; }
.binder-editor-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
dialog.binder-editor .binder-editor-nav label { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.binder-editor-nav select { min-height: 36px; padding: 4px 8px; }
.binder-editor-nav button { min-height: 36px; padding: 4px 12px; font-size: .9rem; white-space: nowrap; }
.binder-editor-turn { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 800; }
.binder-editor-turn button { width: 36px; padding: 0; }
/* The page takes its own width; the picker gets all the rest, its cards at the size the picker draws them anywhere. */
.binder-editor-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.binder-editor-board { --binder-card-width: 120px; --binder-card-scale: calc(120 / 340); justify-self: start; }
.binder-editor-board .binder-page { height: auto; }
.binder-editor-board .binder-pocket > button[data-slot] { position: absolute; inset: var(--pocket-pad); width: auto; height: auto; padding: 0; border-radius: 8px; background: transparent; box-shadow: none; transform: none; }
/* The card lies still in its sleeve under the button that picks the slot. */
.binder-editor-board .binder-pocket.is-filled .binder-card { pointer-events: none; }
.binder-editor-board .binder-pocket.is-filled:hover .binder-card { transform: none; }
.binder-editor-board .binder-editor-pick { z-index: 3; border: 0; }
.binder-editor-board .binder-pocket.is-unused { opacity: 1; }
.binder-editor-board .binder-pocket.is-unused .binder-hole { border-color: #b8ad99; color: #9b9080; }
.binder-editor-board .binder-pocket.is-unused .binder-hole b { color: #9b9080; }
.binder-editor-board .binder-pocket.is-hole > button[data-slot]:hover { background: #ffffff8f; }
.binder-editor-board .binder-editor-pick:hover { background: #ffffff33; }
.binder-editor-board .binder-pocket > button[data-slot].is-active { outline: 3px solid #8850d1; outline-offset: 2px; }
.binder-editor-board .binder-pocket.is-filled > button[data-slot].is-active { outline-offset: -2px; }
.binder-editor-clear { position: absolute; z-index: 4; top: -8px; right: -8px; width: 24px; height: 24px; padding: 0; border-radius: 50%; box-shadow: none; font-size: 14px; line-height: 1; }
.binder-editor-side { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 2px solid var(--ink-border); border-radius: 12px; background: var(--white); font-size: .9rem; }
/* The card chosen goes straight into the slot: the picker's tray and its count have nothing to show here. */
.binder-editor-side .picker-heading, .binder-editor-side .picker-tray { display: none; }
.binder-editor-side .picker-grid { max-height: 62vh; }
.binder-editor-hint, .binder-editor-selection, .binder-editor-reserve p { margin: 0; }
.binder-editor-reserve { display: grid; gap: 8px; }
.binder-editor-reserve button { justify-self: start; }
.binder-editor-status { flex: 1 1 auto; min-height: 1.2em; margin: 0; font-weight: 700; }
dialog.binder-editor footer { align-items: center; }
@media (max-width: 760px) {
    dialog.binder-editor { padding: 16px; }
    .binder-editor-layout { grid-template-columns: minmax(0, 1fr); }
    .binder-editor-turn { margin-right: 0; }
    .binder-editor-board { --binder-card-width: 76px; --binder-card-scale: calc(76 / 340); }
}