/* ── Drawer ── */
.card-drawer {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 820px;
    height: 100%;
    background: var(--bg-card);
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
    border-left: 1px solid var(--border);
    border-right: none;
    transform: translateX(820px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
}

.card-drawer.open {
    transform: translateX(0);
    box-shadow: var(--shadow-drawer);
}

.card-drawer::-webkit-scrollbar {
    width: 10px;
}

.card-drawer::-webkit-scrollbar-track {
    background: var(--bg-card);
    border-radius: 10px;
}

.card-drawer::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
    border: 2px solid var(--bg-card);
}

.card-drawer::-webkit-scrollbar-thumb:hover {
    background: var(--border-focus);
}

.drawer-sidebar {
    position: absolute;
    top: 12px;
    right: 830px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    z-index: 201;
    box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.3);
}

.drawer-sidebar-close {
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    border-radius: 9px;
    color: var(--error);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
}

.drawer-sidebar-close:hover {
    color: #ffffff;
    background: var(--error);
}

.drawer-sidebar-divider {
    width: 20px;
    height: 1px;
    background: var(--border);
    margin: 2px 0;
    flex-shrink: 0;
}

/* Shared .btn .btn--icon (components.css) at 34px, dimmed until active/hover. */
.drawer-sidebar-btn {
    --btn-size: 34px;
    border-radius: 9px;
    font-size: 1.2rem;
    opacity: 0.35;
}

.drawer-sidebar-btn:hover {
    background: var(--bg-hover);
    opacity: 0.75;
}

.drawer-sidebar-btn.active {
    background: rgba(200, 169, 110, 0.12);
    border-color: rgba(200, 169, 110, 0.5);
    opacity: 1;
}

.drawer-inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px;
}

.drawer-content-animate {
    animation: drawerContentReveal 0.3s ease forwards;
}

@keyframes drawerContentReveal {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.drawer-top {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}

.card-tile .edition-rarity-badge {
    bottom: 10px;
    left: 10px;
    font-size: 0.72rem;
    padding: 3px 8px;
}

.drawer-card-image {
    width: 100%;
    border-radius: 18px;
}

.drawer-card-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* .drawer-card-image / .drawer-card-info fade via the shared .fade-out /
   .fade-in (main.css). */

.drawer-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.drawer-name-row > div {
    flex: 1;
    min-width: 0;
}

.drawer-name {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.drawer-set {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.drawer-set-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.drawer-set-link:hover {
    color: var(--text, #fff);
    text-decoration-color: currentColor;
}

.drawer-element {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: auto;
}

/* Shared .label (main.css) + drawer's tighter tracking. */
.drawer-section-label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
}

.drawer-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.drawer-type-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
}

.drawer-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.collector-edition-stats {
    grid-template-columns: 1fr 1fr;
}

.drawer-stat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Shared .label .label--muted .label--sm (main.css) + tighter tracking. */
.drawer-stat-label {
    letter-spacing: 0.08em;
}

.drawer-stat-value {
    font-size: 0.95rem;
    font-weight: 500;
}

.drawer-effect {
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--text);
    line-height: 1.6;
}

.drawer-flavor {
    font-size: 0.8rem;
    font-weight: 300;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.6;
}

.effect-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: #ffffff;
    background: var(--bg);
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 1px 3px;
    letter-spacing: 0.04em;
}

.effect-number {
    font-weight: 600;
    color: var(--bg);
    background: var(--accent);
    border-radius: 4px;
    padding: 1px 5px;
}

.drawer-legality {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.drawer-legal-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.drawer-legal-tag.legal {
    color: #6ec87a;
    border-color: rgba(110, 200, 122, 0.3);
    background: rgba(110, 200, 122, 0.08);
}

.drawer-legal-tag.illegal {
    color: var(--text-muted);
    border-color: var(--border);
}

.drawer-editions-section {
    margin-top: 20px;
}

.drawer-editions-section .drawer-section-label {
    margin-bottom: 12px;
}

/* Matches the Prices watchlist grid (see prices.css): auto-fill columns
   instead of a fixed count, and a padding buffer — more on top/left/right,
   where a ring is most likely to sit flush against the edge — so the
   selected-tile ring (below) isn't clipped by this grid's own edges. */
.drawer-editions {
    display: grid;
    grid-template-columns: repeat(auto-fill, 130px);
    gap: 12px;
    padding: 6px 6px 3px;
}

.drawer-edition-tile {
    opacity: 0;
    transform: translateY(8px);
    animation: revealUp 0.3s ease forwards;
}

.edition-tile-wrap {
    position: relative;
}

/* Clips the image to its rounded corners — scoped to the drawer's own
   edition tiles rather than added to the base .edition-tile-wrap rule
   above, since that class is shared by the Cards/Inventory/Prices tiles
   too (each opts into this via its own rule). Also reserves the card's
   aspect ratio (5:7) and a placeholder background up front, same as
   #card-results' own tiles (cards.css) — otherwise a tile sits collapsed
   to ~0 height until its image loads in, snapping the whole grid taller. */
.drawer-edition-tile .edition-tile-wrap {
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 5 / 7;
    background: var(--bg-card);
}

/* Positioned to fill the reserved aspect-ratio box and crossfaded in via
   .tile-img-loaded (see .tile-img-spinner/revealTileImage in tiles.js) —
   same loading treatment as #card-results' tiles (cards.css). */
.drawer-edition-tile .edition-tile-wrap img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.drawer-edition-tile .edition-tile-wrap img.tile-img-loaded {
    opacity: 1;
}

/* Hover zoom and the selected-tile ring both live on this wrapper — not on
   .edition-tile-wrap (which clips itself via overflow:hidden above, so an
   outward ring there would self-clip) and not on .drawer-edition-tile
   itself (which has its own reveal-animation transform, which would fight
   a separately-declared hover transform). Putting both here keeps the ring
   and the zoomed image moving as one unit, same as the Prices watchlist
   tiles' .prices-watch-tile-media. */
.drawer-edition-media {
    border-radius: 8px;
}

/* Hover-zoom comes from tiles.css's shared .tile-hoverable/.tile-zoom
   vocabulary — see the editionsHTML template in drawer.js. */

.drawer-edition-tile:has(img.edition-selected) .drawer-edition-media {
    box-shadow: 0 0 0 2px var(--accent);
}

.edition-prefix-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

.drawer-edition-tile img {
    width: 100%;
    border-radius: 8px;
    display: block;
    cursor: pointer;
}

.edition-rarity-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.6);
}

/* .inv-price-badge (inventory.css) is sized for the larger Cards/Inventory
   tiles — scaled down here to match this grid's smaller prefix/rarity
   badges above. */
.drawer-edition-tile .inv-price-badge {
    top: 6px;
    right: 6px;
    font-size: 0.6rem;
    padding: 2px 6px;
}

.drawer-edition-tile .inv-listing-badge {
    top: 28px;
    right: 6px;
    font-size: 0.6rem;
    padding: 2px 6px;
}

.drawer-edition-tile .inv-listing-badge--solo {
    top: 6px;
}

.rarity-c {
    color: #ffffff;
}

.rarity-u {
    color: #4caf7d;
}

.rarity-r {
    color: #4a90d9;
}

.rarity-sr {
    color: #9b59b6;
}

.rarity-ur {
    color: #f9e94e;
}

.rarity-pr {
    color: #f06292;
}

.rarity-csr {
    color: #e0c8ff;
    background: rgba(0, 0, 0, 0.6);
}

.rarity-cur {
    color: #ffd700;
    background: rgba(0, 0, 0, 0.6);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.rarity-cpr {
    color: #ff9de2;
    background: rgba(0, 0, 0, 0.6);
    text-shadow: 0 0 6px rgba(255, 157, 226, 0.6);
}

/* ── Collector Panel ── */
.collector-section {
    margin-bottom: 4px;
}

/* Shared .label .label--muted .label--sm (main.css) + tighter tracking. */
.collector-section-label {
    letter-spacing: 0.12em;
    margin-bottom: 10px;
    text-align: center;
}

.collector-thema-divider {
    height: 1px;
    background: var(--border);
    margin: 18px 0 14px;
}

.collector-row {
    display: grid;
    grid-template-columns: minmax(70px, max-content) 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.collector-row--variant {
    padding-left: 16px;
    margin-bottom: 5px;
    opacity: 0.8;
}

.collector-kind {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.collector-row--variant .collector-kind {
    font-size: 0.63rem;
    opacity: 0.8;
}

.collector-bar-wrap {
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.collector-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.collector-bar--variant {
    background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.collector-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.collector-pop {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text);
    min-width: 48px;
    text-align: right;
}

.collector-pop--unknown {
    color: var(--text-muted);
}

.collector-pct {
    font-family: var(--font-mono);
    font-size: 0.63rem;
    color: var(--text-muted);
    min-width: 30px;
    text-align: right;
}

.collector-badge {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

.collector-badge--printing {
    color: #4caf7d;
    border: 1px solid rgba(76, 175, 125, 0.35);
    background: rgba(76, 175, 125, 0.08);
}

.collector-badge--oop {
    color: var(--text-muted);
    border: 1px solid var(--border);
    background: transparent;
}

.collector-badge--sole {
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.drawer-tab-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.drawer-tab-thema {
    padding: 4px 0;
}

.drawer-tab-pricing {
    padding: 4px 0;
}

.pricing-empty {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 4px 0 10px;
}

.pricing-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.pricing-section:last-child {
    margin-bottom: 0;
}

/* .collector-section-label inside here keeps its normal centered,
   full-width layout (see .collector-section-label) — the button is
   positioned out of flow below rather than sharing a flex row with it, so
   it doesn't push the label off-center. */
.pricing-section-header {
    position: relative;
}

/* Modeled on .admin-pid-link-btn (see admin.css) at a smaller scale to fit
   this section header alongside its label. */
/* Shared .btn .btn--icon (components.css) at 26px. */
.pricing-tcg-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    --btn-size: 26px;
    border-color: var(--border);
}

.pricing-tcg-btn:hover {
    border-color: var(--border-focus);
}

.pricing-tcg-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

.pricing-stats {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 12px;
}

.pricing-chart {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    margin-bottom: 4px;
}

.pricing-chart-grid {
    stroke: var(--border);
    stroke-width: 1;
}

/* Short tick mark tying each x-axis date label to its exact point position
   (see buildPricingComboChart's dateLabelsHTML). */
.pricing-chart-tick {
    stroke: var(--border-focus);
    stroke-width: 1;
}

.pricing-chart-axis-label {
    font-family: var(--font-mono);
    font-size: 11px;
    fill: var(--text-muted);
}

/* Vertical line marking a month boundary, spanning the full plot height —
   a background time reference sitting behind the price lines/dots (see
   monthDividersHTML in buildPricingComboChart), dashed so it doesn't compete
   with the solid price lines that render on top of it. */
.pricing-chart-month-divider {
    stroke: var(--border);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

/* Titles the band a month divider marks off (see monthDividersHTML). Sits in
   its own row below the day-number ticks — bolder and uppercased so it
   reads as a heading for that stretch of the axis rather than another tick
   value. */
.pricing-chart-month-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    fill: var(--text-muted);
}

/* Line/dot colors are set inline per condition (see pricingConditionColor()
   in drawer.js) since the set of possible series isn't fixed to just
   sales/listings anymore — only shape/structure stays here. */
.pricing-chart-line {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hover indicator: a static ring that just fades in, rather than resizing
   anything. CSS transform doesn't apply to nested <g>/<circle> elements in
   this renderer (only a top-level SVG child does), so scaling the hit-circle
   or the dot directly isn't reliable — and scaling the hit-circle itself
   (an earlier version of this) let its hover geometry grow mid-transition
   into neighboring points' space, causing flickery hover swaps on dense
   charts. Opacity is unaffected by that limitation and the hit-circle's
   geometry now never changes. */
.pricing-chart-dot-ring {
    fill: none;
    stroke-width: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.pricing-chart-point:hover .pricing-chart-dot-ring {
    opacity: 0.6;
}

.pricing-chart-dot {
    stroke: var(--bg-card);
    stroke-width: 2;
}

.pricing-chart-avg-dot {
    fill: var(--bg-card);
    stroke-width: 2;
}

.pricing-chart-hit {
    fill: transparent;
    cursor: pointer;
}

/* Toggled off via the legend menu on the Prices page (see togglePricingSeries
   in drawer.js) — shared here since it applies to lines/dots/end-labels
   regardless of which page rendered the chart. */
.pricing-series-hidden {
    display: none;
}

.pricing-chart-end-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    fill: var(--text);
}

.pricing-legend {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 12px;
    margin-bottom: 8px;
}

.pricing-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
}

.pricing-legend-key {
    display: inline-block;
    width: 12px;
    height: 2px;
    border-radius: 1px;
}

.pricing-tooltip {
    /* left/top are computed in JS as the tooltip's actual top-left corner
       (already clamped to stay within the window), not an offset from the
       point — so no positioning transform is needed here. */
    position: fixed;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.pricing-tooltip-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.pricing-tooltip-key {
    display: inline-block;
    width: 10px;
    height: 2px;
    border-radius: 1px;
}

.pricing-tooltip-series {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pricing-tooltip-price {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

.pricing-tooltip-meta {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
}

.thema-empty {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 16px 0;
}

.thema-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.thema-grid--single {
    grid-template-columns: 1fr;
    max-width: 420px;
}

.thema-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* Shared .label (main.css) + tighter tracking. */
.thema-col-label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}

.thema-dynamic-badge {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
}

.thema-row {
    display: grid;
    grid-template-columns: 72px 1fr 36px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.thema-cat {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: capitalize;
    color: var(--text-muted);
}

.thema-bar-wrap {
    height: 6px;
    background: var(--bg);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.thema-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.thema-val {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text);
    text-align: right;
}