/* Card inspector on the night stage (artboard 1n): card on the left, its detail
   beside it, with the display-style swatches and the evolution line. */
#modal.inspection-modal{background:var(--sheet-bg);color:var(--fg);border:0;box-shadow:var(--shadow)}
.inspection-modal .inspection-layout{color:var(--fg)}
.inspection-modal .inspection-info .eyebrow{font-size:calc(11px*var(--scale));letter-spacing:1.4px;font-weight:700;color:var(--dim);text-transform:uppercase}
.inspection-modal .inspection-info h2{font-family:var(--font-display);font-weight:800;font-size:calc(30px*var(--scale));letter-spacing:-1.2px;line-height:1.05;color:var(--fg);margin:10px 0 8px}
.inspection-modal .inspection-info .tier-badge{margin-top:10px}
.inspection-modal .inspection-metadata{color:var(--fg-muted);font-size:calc(12px*var(--scale))}
.inspection-modal .inspection-metadata summary{color:var(--fg-2);font-weight:600}
.inspection-modal .inspection-ownership{font-size:calc(13px*var(--scale));color:var(--fg-2)}
.inspection-modal .inspection-label{color:var(--dim);font-size:calc(11px*var(--scale));letter-spacing:1.4px;font-weight:700;text-transform:uppercase}
.inspection-label small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--fg-muted)}
.inspection-modal .inspection-settings select{background:var(--field);color:var(--fg);border:1px solid var(--edge);border-radius:var(--r-sm);padding:9px 11px;font-size:calc(13px*var(--scale))}
.inspection-modal .inspection-lighting button{background:var(--surface-2);color:var(--fg-2);border-radius:var(--r-pill);padding:8px 13px;font-size:calc(12px*var(--scale));font-weight:600}
.inspection-modal .inspection-lighting button[aria-pressed="true"]{background:var(--on-nav);color:var(--on-nav-ink);font-weight:700}
.inspection-modal .inspection-stage-label,.inspection-modal .inspection-zoom{color:var(--fg-muted);font-size:calc(10px*var(--scale));letter-spacing:1.2px}
.inspection-modal #inspection-help{color:var(--fg-muted);font-size:calc(12px*var(--scale))}
.inspection-modal .secondary{background:var(--surface-2);color:var(--fg);border:0;border-radius:var(--r-md);font-weight:700;font-size:calc(13px*var(--scale))}
.inspection-modal .text-btn{color:var(--fg-muted)}
.inspection-modal .side-card{margin-top:12px}
.inspection-modal .side-card h3{font-family:var(--font-body)}

/* Display style swatches. */
.style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.style-swatch{text-align:center;padding:0;background:none}
.style-swatch small{display:block;font-size:calc(11px*var(--scale));margin-top:6px;color:var(--fg-muted)}
.style-swatch.on small{color:var(--fg);font-weight:700}
.sw{display:block;aspect-ratio:367/512;border-radius:6px;background:#2a3444}
.style-swatch.on .sw{outline:2px solid var(--accent);outline-offset:1px}
.sw-gold{background:linear-gradient(135deg,#2a3444,#4a5a6e);box-shadow:inset 0 0 0 3px var(--gold)}
.sw-rainbow{background:linear-gradient(120deg,#5fd3c9,#7c5cff,#ff6b8a);opacity:.75}
.sw-sleeved{background:#2a3444;box-shadow:inset 0 0 0 2px var(--edge-3)}

/* Evolution line: owned art, dashed placeholders for what is still missing. */
.evo{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.evo img{width:44px;height:auto;aspect-ratio:367/512;object-fit:cover;border-radius:4px;display:block}
.evo img.current{box-shadow:0 0 0 2px var(--gold)}
.evo i{font-style:normal;color:var(--dim)}
/* A branching stage (Eevee) stacks its options under one arrow. */
.evo-branch{display:flex;flex-direction:column;gap:4px}
.evo-missing{width:44px;aspect-ratio:367/512;border-radius:4px;border:1px dashed var(--edge-3);display:grid;place-items:center;font-size:calc(10px*var(--scale));color:var(--fg-muted)}

/* The chosen display style paints card art across the whole app. */
/* Including the inspector card itself. It clips overflow and already owns a
   box-shadow stack, so the ring is an inset outline. */
:root[data-card-style="gold"] .inspection-card{outline:3px solid var(--gold);outline-offset:-3px}
:root[data-card-style="sleeved"] .inspection-card{outline:4px solid var(--edge-3);outline-offset:-4px}
:root[data-card-style="rainbow"] .inspection-card img{filter:saturate(1.25) contrast(1.04)}
:root[data-card-style="gold"] .collection-grid img,:root[data-card-style="gold"] .pocket img,:root[data-card-style="gold"] .binder-row img{box-shadow:0 0 0 2px var(--gold);border-radius:5px}
:root[data-card-style="sleeved"] .collection-grid img,:root[data-card-style="sleeved"] .pocket img,:root[data-card-style="sleeved"] .binder-row img{box-shadow:0 0 0 3px var(--edge-3),0 4px 10px #0006;border-radius:5px}
:root[data-card-style="rainbow"] .collection-grid a,:root[data-card-style="rainbow"] .collection-grid button,:root[data-card-style="rainbow"] .pocket{position:relative}
:root[data-card-style="rainbow"] .collection-grid img,:root[data-card-style="rainbow"] .pocket img,:root[data-card-style="rainbow"] .binder-row img{filter:saturate(1.25) contrast(1.04)}
:root[data-card-style="rainbow"] .pocket:not(.empty)::after,:root[data-card-style="rainbow"] .collection-grid button::after{content:'';position:absolute;inset:4px;border-radius:5px;background:linear-gradient(120deg,#5fd3c955,#7c5cff44,#ff6b8a55);mix-blend-mode:overlay;pointer-events:none}

@media(max-width:900px){
 .style-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .inspection-modal .inspection-info h2{font-size:calc(24px*var(--scale))}
}