:root {
  color-scheme: dark;
  --paper: #141518;
  --ink: #f1f0f2;
  --subtle: #a3a4ae;
  --line: #303138;
  --accent: #d1c8fa;
  --page: #1c1d22;
  --selected: #2a2936;
  --sans: "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .25, 1);
  background: var(--paper);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; isolation: isolate; color: var(--ink); background: var(--paper); font: 15px/1.45 var(--sans); }
.archive-backdrop {
  position: fixed; inset: 0 0 auto; z-index: -1; height: clamp(420px, 48vw, 680px);
  pointer-events: none; mix-blend-mode: screen;
  background: url('/absol-backdrop.avif') center top / min(44vw, 660px) auto no-repeat;
  mask-image: linear-gradient(#000 30%, #000c 56%, transparent 100%);
}
@media (min-width: 761px) {
  .archive-backdrop::before, .archive-backdrop::after {
    content: ''; position: absolute; top: 12px; width: min(36vw, 650px); aspect-ratio: var(--portrait-ratio);
    background: var(--portrait) center top / 100% auto no-repeat;
    mix-blend-mode: screen;
    mask-image: radial-gradient(ellipse 75% 68% at 50% 34%, #000 25%, #000c 57%, transparent 96%);
  }
  .archive-backdrop::before { --portrait: url('/mega-absol-backdrop.avif'); --portrait-ratio: 376 / 325; left: 0; filter: brightness(.27) saturate(.75); }
  .archive-backdrop::after { --portrait: url('/mega-absol-z-backdrop.avif'); --portrait-ratio: 438 / 338; right: 0; filter: brightness(.54) saturate(.78); }
}
@media (max-width: 760px) {
  .archive-backdrop { height: 500px; background-size: min(94vw, 480px) auto; background-position: center 48px; }
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
p, h1, h2 { margin-top: 0; }
.frame { width: min(1340px, calc(100% - 88px)); margin-inline: auto; }
.skip { position: absolute; top: 8px; left: 8px; z-index: 4; padding: 8px 12px; background: var(--page); transform: translateY(-150%); }
.skip:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }


.gallery-heading { display: grid; justify-items: center; padding: 25px 0; }
h1 { margin: 0; font: 650 clamp(33px, 5vw, 52px)/1.04 var(--sans); letter-spacing: -.05em; }
.admin-top { display: flex; align-items: end; justify-content: space-between; gap: 12px 24px; margin: 26px 0 17px; }
.admin-top > p { margin: 5px 0 0; color: var(--subtle); font-size: 13px; }
.chapter-period { margin: 0 0 6px; color: var(--subtle); font: 12px/1.4 var(--mono); }

.showcase-stage { width: min(690px, 100%); position: relative; isolation: isolate; display: flex; justify-content: center; align-items: center; gap: clamp(12px, 4vw, 44px); padding: 13px 0 24px; }
.stage-light { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 52% 48%, #34303c88 0%, #1a1a2055 44%, transparent 70%); }
.stage-light::before { content: ''; position: absolute; inset: 18% 8%; border: 1px solid #8d859c60; border-top-color: #d6d1e0a0; border-bottom-color: #655b7a33; border-radius: 50%; transform: rotate(-9deg); box-shadow: 0 -2px 15px #beb5d433, inset 0 4px 22px #c7beda12; }
.stage-light::after { content: ''; position: absolute; inset: auto 12% 12%; height: 30px; border-radius: 50%; background: radial-gradient(ellipse, #08090ddd, #08090d00 69%); filter: blur(6px); }
.specimen { position: relative; width: min(40%, 181px); display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; perspective: 820px; }
.specimen .piece { --case-width: 100%; }
.showcase-empty { position: relative; margin: 0; color: var(--subtle); text-align: center; font-size: 13px; }
.collection-progress { width: min(100%, 386px); display: grid; justify-items: center; gap: 7px; }
.collection-progress progress { appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: #303039; accent-color: var(--accent); }
.collection-progress progress::-webkit-progress-bar { background: #303039; }
.collection-progress progress::-webkit-progress-value { background: linear-gradient(90deg, #9b8dcf, #e2dafb); border-radius: inherit; }
.collection-progress progress::-moz-progress-bar { background: linear-gradient(90deg, #9b8dcf, #e2dafb); border-radius: inherit; }
.collection-progress span { color: var(--subtle); font: 12px/1.3 var(--mono); }

.gallery-filters, .admin-search { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-filters { padding: 10px 0; border-block: 1px solid var(--line); scroll-margin-top: 10px; }
.search, .admin-search-input { min-width: min(100%, 220px); flex: 1 1 220px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--page); }
.search svg { flex: 0 0 auto; margin-left: 10px; color: var(--subtle); }
.search input, .admin-search input { appearance: none; width: 100%; min-width: 0; padding: 8px 9px; background: transparent; border: 0; }
.search input::placeholder, .admin-search input::placeholder { color: var(--subtle); opacity: 1; }
.filter-field { min-width: 0; display: flex; }
.filter-field select, .field select { display: block; max-width: 100%; min-height: 38px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--page); font-size: 13px; }
.result-count { margin: 9px 0 0; color: var(--subtle); font-size: 12px; }

.gallery-sections { margin-top: 12px; }
.gallery-section { margin-top: 20px; }
.gallery-section + .gallery-section { margin-top: 36px; }
.era-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 20px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.era-heading h2 { font-size: 19px; font-weight: 650; letter-spacing: -.025em; margin: 0; }
.era-heading span { color: var(--subtle); font: 12px/1.4 var(--mono); white-space: nowrap; }
.gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; }
.gallery-card {
  --art-width: clamp(116px, 13vw, 174px);
  display: grid; grid-template-rows: subgrid; grid-row: span 2; justify-items: center; min-width: 0; margin: 12px 0 7px; border: 0; padding: 0; background: none; text-align: left;
}
.card-art { width: 100%; display: flex; align-items: end; justify-content: center; perspective: 720px; }
.specimen .piece, .card-art .piece { transition: transform .2s var(--ease); }
.card-art .piece { --case-width: var(--art-width); }
.card-art .slab { --case-width: calc(var(--art-width) / var(--well-scale)); }
.gallery-card:hover .card-title { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.caption { width: min(100%, var(--art-width)); display: grid; align-content: start; gap: 3px; padding: 9px 0 6px; }
.caption span { overflow-wrap: anywhere; }
.card-title { font-size: 14px; line-height: 1.24; font-weight: 700; }
.caption-meta { color: var(--subtle); font: 11px/1.4 var(--mono); }
.caption-variant { color: var(--ink); font-size: 12px; }
.state { font-size: 12px; font-weight: 600; color: var(--accent); }
.state.missing-state { color: var(--subtle); font-weight: 400; }
.empty { padding: 16px 0; color: var(--subtle); }
.piece {
  --case-width: min(94%, 140px);
  --depth: 1.6px;
  --corner: 4%;
  --edge: linear-gradient(90deg, #a9a5a5, #55515b 65%, #aaa6ae);
  width: min(100%, var(--case-width)); display: block; text-align: left; position: relative; flex: 0 0 auto; transform-style: preserve-3d;
}
.piece-face { display: block; position: relative; border-radius: var(--corner); }
.piece-back { position: absolute; inset: 0; border-radius: var(--corner); background: #67626f; transform: translateZ(calc(-1 * var(--depth))); }
.piece-edge { position: absolute; display: block; background: var(--edge); }
.edge-left, .edge-right { inset: 4% auto 4% 0; width: var(--depth); transform-origin: left; transform: rotateY(90deg); }
.edge-right { left: 100%; }
.edge-top, .edge-bottom { inset: 4% 4% auto; top: 0; height: var(--depth); transform-origin: top; transform: rotateX(-90deg); }
.edge-bottom { top: 100%; }
.card-image { display: block; width: 100%; aspect-ratio: 63/88; object-fit: contain; border-radius: 4%; color: var(--ink); background: var(--page); font-size: 11px; }
.card-crop { position: relative; overflow: hidden; }
.card-crop-source { position: absolute; left: var(--crop-left); top: var(--crop-top); width: var(--crop-width); height: var(--crop-height); }
.unavailable-image { display: grid; place-content: center; padding: 5px; text-align: center; overflow-wrap: anywhere; }
.missing .card-image, .editor-display.is-missing .card-image { filter: grayscale(1); }

.slab {
  --depth: var(--holder-depth);
  aspect-ratio: var(--holder-ratio);
}
.slab-wall {
  position: absolute; left: var(--wall-x); top: var(--wall-y);
  width: calc(var(--wall-length) + .22px); height: var(--depth);
  transform-origin: center top; transform: translateX(-50%) rotateZ(var(--wall-angle)) rotateX(-90deg);
  background: var(--wall-material); opacity: var(--wall-light); pointer-events: none;
}
.slab .piece-back { background: var(--back-material); box-shadow: inset 0 0 0 1px #b8cde08a, inset 0 0 0 3px #9cb0c43d; }
.slab .piece-face { position: absolute; inset: 0; container-type: inline-size; background: var(--face-material); box-shadow: inset 0 0 0 1px #e2f1ff96, 3px 9px 19px #0008; }
.slab .piece-face::before { content: ''; position: absolute; inset: 1.8%; border-radius: var(--corner); box-shadow: inset 0 0 0 1px #c0d7ea74, 0 0 0 1px #080f1b85; pointer-events: none; }
.slab-seat { position: absolute; top: var(--well-top); width: calc(var(--well-scale) * 100%); inset-inline: 0; margin-inline: auto; }
.slab-seat::before { content: ''; position: absolute; inset: var(--seat-gutter, -1.4cqw); border-radius: var(--seat-radius, 4%); background: #1119253b; box-shadow: inset 0 1px #c6d8e15e, inset 0 -1px #e6effb32, 0 0 0 1px #0a0e17a3; }
.slab-seat > .card-image { position: relative; background: #13171e; }
.slab-label {
  position: absolute; top: var(--label-top); width: var(--label-width); height: var(--label-height); inset-inline: 0; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2cqw;
  padding: 2.2cqw 2.6cqw; color: #171a20; font: 500 3.25cqw/1.17 Arial, sans-serif;
}
.slab-id { display: grid; min-width: 0; gap: .36cqw; }
.slab-id > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slab-id b { font-size: 1.16em; }
.slab-score { min-width: 11cqw; display: grid; justify-items: center; gap: .42cqw; white-space: nowrap; }
.slab-score strong { font-size: 9.5cqw; font-variant-numeric: tabular-nums; line-height: .88; }
.slab-score small { font-size: 2.35cqw; line-height: 1; font-weight: 750; text-transform: uppercase; }
.slab-brand { font-weight: 850; }

/* PSA Lighthouse: a separate red-framed paper flip and squared card well. */
.slab-psa {
  --well-top: 27%; --well-scale: .78; --label-top: 4.1%; --label-width: 84%; --label-height: 15.2%; --seat-radius: 1%; --seat-gutter: -1.9cqw;
  --face-material: linear-gradient(145deg, #c3c8d264, #b1b7c448 29%, #8d94a143 68%, #bec5cd62);
  --back-material: #b9bec932;
  --wall-material: linear-gradient(180deg, #e2e6eccc, #b5bcc69c 17%, #a0a8b59e 48%, #7d8592a6 74%, #c9cfd8b5);
}
.slab-psa .piece-face::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23f)' opacity='.1'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px #c0c6cf92, inset 0 0 0 3px #aab2be30, 0 0 0 1px #080c1382;
}
.slab-psa .piece-face::after { content: ''; position: absolute; inset: 21.8% 4.4% auto; height: .85cqw; border-block: 1px solid #bdc4cea0; background: #d0d5df54; }
.slab-psa .slab-seat::before { background: #c2c8d03b; box-shadow: inset 0 0 0 1px #d5d9df91, inset 0 0 0 .55cqw #c3c9d05d, 0 0 0 1px #151922a8; }
.slab-psa .slab-label { padding: 1.2cqw 1.8cqw 2.2cqw; border: 1.65cqw solid #cd262e; background: #f2f6f5; box-shadow: 0 0 0 .7cqw #532022, inset 0 0 0 1px #d0d9df; text-transform: uppercase; }
.slab-psa .slab-brand { position: absolute; bottom: -.7cqw; left: 50%; transform: translateX(-50%) skewX(-9deg); padding: .18cqw 1cqw; color: #28448e; background: linear-gradient(135deg, #bac9d3, #edf4f4, #a0b2bd); font-size: 3.8cqw; letter-spacing: -.07em; }
.slab-psa .slab-brand::first-letter { color: #c72c35; }
.slab-psa .slab-score { justify-items: end; align-self: start; padding-top: .6cqw; }
.slab-psa .slab-score strong { font-size: 5.6cqw; font-weight: 650; order: 1; }
.slab-psa .slab-score small { font-weight: 600; }

/* TAG: the lettering and rectangular outline sit directly on clear acrylic. */
.slab-tag {
  --well-top: 25.3%; --well-scale: .81; --label-top: 6.4%; --label-width: 81.5%; --label-height: 16.6%; --seat-gutter: -1.15cqw;
  --face-material: linear-gradient(145deg, #d9f5ff18, #c7eeff04 22%, #c7eeff00 66%, #b8e6fc12);
  --back-material: #a3d9f106;
  --wall-material: linear-gradient(180deg, #eafaffd4, #d9f2ff54 9%, #6eb9df20 23%, #223f5714 52%, #719dbd28 77%, #dff8ffc0);
}
.slab-tag .piece-back { box-shadow: inset 0 0 0 1px #d4effa93; }
.slab-tag .piece-face::before { inset: 2.1%; box-shadow: inset 0 0 0 1px #d5edfa7d, 0 0 0 1px #111b26b5, 0 0 0 2px #ccdfeb40; }
.slab-tag .slab-seat::before { background: #b4eaff0b; box-shadow: inset 0 1px #daf1fa6e, inset 0 -1px #b8dfec42, 0 0 0 1px #0a0e1773; }
.slab-tag .piece-face::after { content: 'TAG'; position: absolute; bottom: 2.15%; left: 50%; transform: translateX(-50%); padding: 0 1.2cqw; border: 1px solid #c1d8e833; color: #bfd1dd48; font: 900 3.4cqw/1.1 Georgia, serif; }
.slab-tag .slab-label { border: 1px solid #e5f3f9c7; border-top: 0; background: transparent; color: #f3f9fb; text-shadow: 0 0 1px #f3f9fb3b; }
.slab-tag .slab-label::before { content: ''; position: absolute; inset: 0 -1px auto; height: 1px; background: linear-gradient(90deg, #e5f3f9c7 39%, transparent 39% 61%, #e5f3f9c7 61%); }
.slab-tag .slab-brand { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); border: 1px solid #e5f3f9d4; padding: .1cqw 1.3cqw; font: 900 4.7cqw/.98 Georgia, serif; letter-spacing: -.09em; }
.slab-tag .slab-id { font-weight: 700; text-transform: uppercase; }
.slab-tag .slab-score strong { font-size: 11cqw; }

/* Beckett: thick, nearly square shell, a rectangular inner sleeve and metal foil. */
.slab-bgs {
  --well-top: 23%; --well-scale: .74; --label-top: 3.8%; --label-width: 84%; --label-height: 13%; --seat-gutter: -3cqw; --seat-radius: .8%;
  --face-material: linear-gradient(135deg, #c3cedd4b, #859eb31a 24%, #445d7423 62%, #abc5d944);
  --back-material: #9aabbd25;
  --wall-material: linear-gradient(180deg, #dbe2eabf, #8995a28f 14%, #192435cf 33%, #66788ba3 57%, #b2bec9bb 64%, #394959d4 86%, #a5b3c6bd);
}
.slab-bgs .piece-face::before { inset: 1.7%; border-radius: 1.5%; box-shadow: inset 0 0 0 1px #c4d4de90, inset 0 0 0 3px #adbacd3d, 0 0 0 1px #1e293eb3; }
.slab-bgs .slab-seat::before { box-shadow: inset 0 0 0 1px #b2c4d882, inset 0 0 0 .9cqw #b8cfe82b, 0 0 0 1px #0a0e17a3; }
.slab-bgs .slab-label { grid-template-columns: 16% minmax(0, 1fr) auto; gap: 1.65cqw; padding: 1.25cqw 1.4cqw; border: 1px solid #b4bbc699; background: linear-gradient(116deg, #a5aeb9, #e1e5eb 38%, #a2adb8 70%, #dfe8f2); }
.slab-bgs.tone-gold .slab-label { background: linear-gradient(117deg, #ab8647, #eed99c 38%, #bb9d62 71%, #e6cf8e); border-color: #d5b475; }
.slab-bgs.tone-black .slab-label { background: linear-gradient(120deg, #141718, #30302d 45%, #141517); border-color: #95865d; color: #e9d392; }
.slab-bgs .slab-brand { display: grid; justify-items: center; border-right: 1px solid currentColor; padding-right: 1cqw; font-size: 1.7cqw; line-height: 1.1; }
.slab-bgs .slab-brand::before { content: 'B'; font: 850 8cqw/.92 Georgia, serif; }
.slab-bgs.tone-black .slab-brand { color: #f7f2e6; border-color: #d9c1837a; }
.slab-bgs .slab-id { text-transform: uppercase; font-size: 2.9cqw; }
.slab-bgs .slab-score strong { font-size: 9.1cqw; }
.slab-bgs .slab-score small { font-size: 2cqw; }

/* CGC: upper branding band, bright field, and a separate Pristine grade panel. */
.slab-cgc {
  --well-top: 28.2%; --well-scale: .8; --label-top: 5.5%; --label-width: 81%; --label-height: 18.6%; --seat-gutter: -1.25cqw;
  --face-material: linear-gradient(145deg, #d9edf833, #c1dfef0a 28%, #2e50620a 65%, #b5deef26);
  --back-material: #c9e5f511;
  --wall-material: linear-gradient(180deg, #e9faffba, #bfd7e65b 13%, #6f9cb43a 37%, #a5cde970 52%, #42627844 78%, #d0f0fdb0);
}
.slab-cgc .piece-face::before { inset: 1.9%; box-shadow: inset 0 0 0 1px #cfe1eab3, inset 0 0 0 3px #a8bdcf66, 0 0 0 1px #0e1928a3; }
.slab-cgc .slab-label { border: .8cqw solid #171d23; background: #ecf0f2; border-radius: 1.2cqw; padding: 8cqw 2cqw 1.25cqw; overflow: hidden; }
.slab-cgc .slab-label::before { content: 'CERTIFIED GUARANTY COMPANY'; position: absolute; inset: 0 0 auto; height: 26%; display: grid; justify-content: end; align-items: center; padding-right: 1.7cqw; background: #111922; color: #edf3f6; font-size: 2.07cqw; font-weight: 800; }
.slab-cgc .slab-brand { position: absolute; top: 0; left: 0; height: 26%; padding: 0 1.7cqw; display: flex; align-items: center; color: #e5f8ff; background: linear-gradient(130deg, #273c69, #39687f 58%, #203146); font-size: 4.4cqw; }
.slab-cgc .slab-score { padding-left: 1.5cqw; border-left: 1px solid #69727c68; }
.slab-cgc .slab-score strong { font-size: 10.8cqw; }
.slab-cgc .slab-score small { order: -1; }
.slab-cgc.tone-gold .slab-label { background: linear-gradient(135deg, #f1e4bb, #eed290 60%, #cfae65); }
.slab-cgc.tone-gold .slab-score { border: 1px solid #ad9558; border-radius: 1.7cqw; padding: 1.25cqw; color: #f7d980; background: #192229; }

/* Ace Standard: navy text field, diagonal grade panel and white bottom strip. */
.slab-ace {
  --well-top: 29%; --well-scale: .77; --label-top: 5.2%; --label-width: 80%; --label-height: 19%; --seat-gutter: -2.5cqw; --seat-radius: 4%;
  --face-material: linear-gradient(145deg, #bac6d63b, #7f8fa51b 29%, #3342551b 64%, #b4c3d236);
  --back-material: #9aabbc1b;
  --wall-material: linear-gradient(180deg, #e2e9f5b3, #9aabc176 18%, #40536967 45%, #8d9eb57d 57%, #273a4c65 78%, #becadbaa);
}
.slab-ace .slab-label { --ace-foil: #bac1cb; grid-template-columns: minmax(0, 1fr) 31%; padding: 1.6cqw 1.9cqw 5.8cqw; background: #121c2b; color: #f1f3f5; border-radius: .8cqw; overflow: hidden; }
.slab-ace.tone-gold .slab-label { --ace-foil: #d7af63; }
.slab-ace .slab-label::before { content: ''; position: absolute; inset: 0 0 17%; background: linear-gradient(125deg, #ffffff42, transparent 54%), var(--ace-foil); clip-path: polygon(73% 0, 100% 0, 100% 100%, 64% 100%); }
.slab-ace .slab-brand { position: absolute; inset: auto 0 0; height: 17%; display: grid; place-items: center; color: #172031; background: #edf0f1; font-size: 2.6cqw; letter-spacing: .12em; }
.slab-ace .slab-id { color: var(--ace-foil); font-weight: 750; text-transform: uppercase; }
.slab-ace .slab-id b { color: #fff; }
.slab-ace .slab-score { position: relative; justify-self: end; color: #0f1824; }
.slab-ace .slab-score strong { font-size: 10.6cqw; font-weight: 850; }
.slab-ace .slab-score small { font-size: 2.5cqw; }
.plain .card-image { box-shadow: 2px 9px 22px #0008; }
.card-wear {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  border-radius: inherit; overflow: hidden; pointer-events: none;
}
.piece-face:has(.unavailable-image) .card-wear { display: none; }
.wear-nicks { opacity: var(--edge-wear, 0); }
.wear-chips { opacity: var(--edge-chips, 0); }
.wear-scuffs { opacity: var(--scuff-wear, 0); }
.wear-crease { opacity: var(--crease-wear, 0); }
.wear-tear { opacity: var(--tear-wear, 0); }
.card-wear[data-condition="NM"] { --edge-wear: .42; }
.card-wear[data-condition="LP"] { --edge-wear: .72; --edge-chips: .46; }
.card-wear[data-condition="MP"] { --edge-wear: .86; --edge-chips: .7; --scuff-wear: .25; }
.card-wear[data-condition="HP"] { --edge-wear: .96; --edge-chips: .92; --scuff-wear: .48; --crease-wear: .68; }
.card-wear[data-condition="DMG"] { --edge-wear: 1; --edge-chips: 1; --scuff-wear: .65; --crease-wear: .9; --tear-wear: .94; }

dialog { border: 0; padding: 0; width: min(500px, calc(100% - 26px)); max-width: none; max-height: calc(100dvh - 20px); color: var(--ink); background: transparent; }
dialog::backdrop { background: radial-gradient(ellipse 78% 74% at center, #0b0c114a, #0b0c11ae); backdrop-filter: blur(4px); }
.detail { display: grid; justify-items: center; gap: 12px; padding: 14px; background: radial-gradient(ellipse 50% 50% at center, #282735a1, #24233154 52%, transparent 100%); }
.detail-label { width: min(100%, 347px); background: radial-gradient(ellipse closest-side, #24232ed9, #24232e85 74%, transparent); padding: 9px 13px; text-align: center; overflow-wrap: anywhere; }
.detail-label p { margin: 0; color: var(--subtle); font-size: 12px; }
.detail-label .detail-meta { font: 11px/1.3 var(--mono); }
.detail-label h2 { margin: 1px 0 2px; font-size: 18px; font-weight: 650; line-height: 1.15; }
.detail-label .detail-variant { color: var(--accent); margin-top: 2px; }
.detail-label .detail-condition { color: var(--ink); margin-top: 3px; }
.inspect-scene { width: 100%; display: grid; place-items: center; padding: 3px 0; perspective: 950px; cursor: grab; touch-action: none; user-select: none; }
.inspect-scene:has(.slab) { padding-block: 13px; }
.inspect-scene:focus-visible { outline: 1px solid #9189ba92; outline-offset: -1px; border-radius: 8px; }
.inspect-scene.dragging { cursor: grabbing; }
.inspect-scene .piece { --case-width: min(79%, 327px, calc((100dvh - 195px) / 1.4)); transition: transform .23s var(--ease); }
.inspect-scene .slab { --case-width: min(86%, 346px, max(105px, calc((100dvh - 238px) * var(--holder-ratio)))); --depth: var(--detail-depth); }
.inspect-scene.dragging .piece { transition: none; }
.inspect-scene img { pointer-events: none; }
.close-detail { padding: 6px 20px; border: 1px solid #666070; border-radius: 6px; background: #25232c; color: var(--ink); font-size: 13px; }
.close-detail:hover { border-color: var(--accent); }
.detail:has(.ownership-form) .inspect-scene .piece { --case-width: min(72%, 226px, max(100px, calc((100dvh - 368px) / 1.4))); }
.detail:has(.ownership-form) .inspect-scene .slab { --case-width: min(75%, 240px, max(105px, calc((100dvh - 398px) * var(--holder-ratio)))); }
.detail:has(.ownership-form) .inspect-scene { padding-block: 9px; }
.ownership-form { width: min(100%, 347px); padding: 10px; border: 1px solid #bab3d237; border-radius: 9px; background: #24232ed9; }
.ownership-form fieldset { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 10px; padding: 0; border: 0; margin: 0; min-width: 0; }
.ownership-status, .ownership-grades { grid-column: 1 / -1; }
.ownership-status:has(.ownership-condition:not([hidden])), .ownership-grades {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.ownership-form label { display: grid; gap: 4px; color: var(--subtle); font-size: 12px; }
.ownership-form input, .ownership-form select { width: 100%; min-width: 0; height: 34px; border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; background: var(--page); color: var(--ink); }
.ownership-form .primary { height: 34px; padding-inline: 11px; white-space: nowrap; }
.ownership-form .form-message:empty { display: none; }
.ownership-note { margin: 0; color: var(--subtle); text-align: center; font-size: 12px; }


.admin-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: clamp(20px, 3.1vw, 40px); align-items: start; }
.admin-list, .admin-editor { min-width: 0; }
.admin-results { color: var(--subtle); margin: 9px 0; font: 12px/1.35 var(--mono); }
.admin-items { max-height: min(68vh, 748px); overflow-y: auto; border-top: 2px solid var(--ink); scrollbar-color: var(--line) transparent; }
.print-register { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.print-register th, .print-register td { padding: 9px 9px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.print-register th { position: sticky; top: 0; z-index: 1; background: var(--paper); color: var(--subtle); font: 12px/1.4 var(--mono); }
.print-register th:first-child { width: 115px; }
.print-register th:last-child { width: 120px; }
.print-register td:nth-child(2) { padding: 0; }
.print-register tr[data-selected], .print-register tbody tr[data-card-id]:hover { background: var(--selected); }
.print-register tr[data-selected] td:first-child { box-shadow: inset 2px 0 var(--accent); }
.register-number, .admin-item-status { font: 12px/1.45 var(--mono); }
.print-register small { display: block; font-size: 11px; margin-top: 2px; color: var(--subtle); }
.register-select { display: block; width: 100%; min-height: 46px; border: 0; padding: 9px; text-align: left; background: transparent; overflow-wrap: anywhere; }
.register-select strong { font-weight: 600; }
.register-select:focus-visible { outline-offset: -2px; }
.admin-item-status { color: var(--accent); }
.admin-empty { color: var(--subtle); }

.admin-editor { position: sticky; top: 14px; border-top: 2px solid var(--ink); }
.editor-header { padding: 15px 0 12px; border-bottom: 1px solid var(--line); }
.editor-header h2 { font: 650 clamp(24px, 3vw, 34px)/1.08 var(--sans); letter-spacing: -.037em; margin: 0 0 6px; overflow-wrap: anywhere; }
.editor-header p:last-child { font-size: 13px; color: var(--subtle); margin: 0; }
.editor-body { display: grid; grid-template-columns: minmax(115px, 1fr) minmax(126px, .9fr); gap: 16px; padding: 15px 0 0; align-items: start; }
.editor-display { display: grid; place-items: start center; min-height: 205px; perspective: 650px; }
.editor-display .piece { --case-width: min(100%, 151px); }
.editor-preview .preview-note, .editor-upcoming { color: var(--subtle); font-size: 12px; margin-top: 7px; }
.choice-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; border: 0; padding: 0; margin: 0 0 12px; }
.choice-group legend, .field { font-size: 12px; font-weight: 600; }
.choice-group legend { margin-bottom: 4px; }
.choice { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 5px; cursor: pointer; font-size: 13px; }
.choice:has(input:checked) { background: var(--selected); color: var(--accent); }
.choice input { accent-color: var(--accent); margin: 0; }
.grading-fields { display: grid; gap: 8px; margin-bottom: 12px; }
.field select { width: 100%; margin-top: 4px; }
.primary { background: var(--accent); color: var(--paper); border: 1px solid var(--accent); font-size: 13px; font-weight: 600; padding: 8px 12px; }
.primary:hover { filter: brightness(1.13); }
.form-message { color: var(--subtle); font-size: 12px; margin: 7px 0 0; min-height: 18px; }

.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 18px; color: var(--subtle); border-top: 1px solid var(--line); padding: 14px 0 22px; margin-top: 26px; font-size: 11px; }


@media (max-width: 1090px) {
  .frame { width: calc(100% - 60px); }
  .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .frame { width: calc(100% - 42px); }
  .admin-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .admin-items { max-height: 44vh; }
  .admin-editor { position: static; }
  .editor-body { grid-template-columns: minmax(0, 190px) minmax(126px, 1fr); }
}
@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; }
}
@media (max-width: 530px) {
  .frame { width: calc(100% - 30px); }
  .gallery-heading { padding-bottom: 18px; }
  .admin-top { margin: 20px 0 12px; flex-direction: column; align-items: start; gap: 4px; }
  .gallery-filters { gap: 6px; }
  .gallery-filters .search { flex-basis: 100%; }
  .filter-field select { max-width: min(100%, 148px); }
  .era-heading h2 { font-size: 16px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-card { --art-width: clamp(105px, 32vw, 150px); }
  .print-register th, .print-register td { padding: 8px 6px; }
  .print-register th:first-child { width: 78px; }
  .print-register th:last-child { width: 74px; }
  .register-select { padding: 8px 6px; font-size: 13px; }
  .editor-body { grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: 11px; }
  .detail { padding: 11px; gap: 9px; }
}
@media (pointer: coarse) {
  .choice, .filter-field select, .close-detail { min-height: 44px; }
  input[type="search"] { min-height: 42px; font-size: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  dialog[open] { animation: reveal-inspector .26s var(--ease) both; }
  @keyframes reveal-inspector { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .specimen .piece, .card-art .piece, .inspect-scene .piece { transition: none; }
}