/* Designer concept-board material pass. Plate assets are bounded, never tiled.
   Finishes and lighting stay outside card pixels and opaque reading faces. */
html[data-appearance], .appearance-option {
  --material: none;
  --material-opacity: 0;
  --material-mask: linear-gradient(#000,#000);
  --sleeve-edge: var(--line-strong);
  --sleeve-face: var(--raised);
  --sleeve-highlight: var(--line);
  --sleeve-light: transparent;
}
html[data-theme="holo-night"], .appearance-option[data-pack="holo-night"] {
  --material: url('/static/themes/holo-night-ground-1280.webp');
  --material-opacity: .38;
  --material-mask: radial-gradient(ellipse 580px 620px at max(160px,calc(50% - 430px)) 380px,#000 10%,transparent 90%);
  --brand-symbol: url('/static/themes/holo-night-symbol-finish.svg');
  --brand-wordmark: url('/static/themes/holo-night-wordmark-finish.svg');
  --sleeve-edge: #8E71AB;
  --sleeve-face: linear-gradient(135deg,#69537D,#30223F 25%,#170D22 60%,#5A4272);
  --sleeve-highlight: #D5BCEE;
  --sleeve-light: rgb(185 138 242 / .28);
  --ambient: radial-gradient(ellipse 360px 440px at max(160px,calc(50% - 430px)) 310px,rgb(110 48 170 / .24),transparent 80%);
}
html[data-theme="clubhouse"], .appearance-option[data-pack="clubhouse"] {
  --material: url('/static/themes/clubhouse-felt-1280.webp');
  --material-opacity: .32;
  --material-mask: radial-gradient(ellipse 660px 700px at max(160px,calc(50% - 430px)) 480px,#000 10%,transparent 95%);
  --brand-symbol: url('/static/themes/clubhouse-symbol-finish.svg');
  --brand-wordmark: url('/static/themes/clubhouse-wordmark-finish.svg');
  --sleeve-edge: #B59A69;
  --sleeve-face: linear-gradient(135deg,#DCC18D,#314A38 14%,#102A23 72%,#8E7955);
  --sleeve-highlight: #DCC18D;
  --sleeve-light: rgb(220 193 141 / .13);
  --ambient: radial-gradient(ellipse 700px 550px at 12% 100px,rgb(220 193 141 / .12),transparent 80%);
}
html[data-theme="gallery-day"], .appearance-option[data-pack="gallery-day"] {
  --card-case:url('/static/themes/gallery-day-card-case.svg');
  --shadow-object:0 10px 12px rgb(86 64 59 / .14);
  --material: url('/static/themes/gallery-day-paper-1280.webp');
  --material-opacity: .22;
  --brand-symbol: url('/static/themes/gallery-day-symbol-finish.svg');
  --brand-wordmark: url('/static/themes/gallery-day-wordmark-finish.svg');
  --sleeve-edge: #C6B6C5;
  --sleeve-face: linear-gradient(135deg,#FFFFFF,#E9E1D5 40%,#FFFCF7 62%,#E0D9D2);
  --sleeve-highlight: #FFFFFF;
  --sleeve-light: rgb(255 252 247 / .9);
  --ambient: linear-gradient(120deg,rgb(255 252 247 / .65),transparent 48%);
}
html[data-theme="daybreak-index"], .appearance-option[data-pack="daybreak-index"] {
  --material:url('/static/themes/daybreak-ceramic-1280.webp'); --material-opacity:.45;
  --material-mask:linear-gradient(#000 0%,#000 70%,transparent 100%);
  --brand-symbol: url('/static/themes/daybreak-index-symbol-finish.svg');
  --brand-wordmark: url('/static/themes/daybreak-index-wordmark-finish.svg');
  --sleeve-edge: #A4B6B0;
  --sleeve-face: linear-gradient(135deg,#FFFFFF,#DCE5E1 42%,#FAFCFA 72%,#BFCFC7);
  --sleeve-highlight: #FFFFFF;
  --sleeve-light: rgb(117 145 124 / .14);
  --ambient: radial-gradient(ellipse 600px 500px at 12% 200px,#FAFCFA,transparent 85%),linear-gradient(115deg,transparent 55%,rgb(117 145 124 / .07) 55.5%,transparent 76%);
}
html[data-appearance] body::before {
  background: var(--material) center top / cover no-repeat;
  opacity: var(--material-opacity); mix-blend-mode: normal;
  -webkit-mask-image:var(--material-mask); mask-image:var(--material-mask);
  /* A fixed viewport plate is independent of document length; it cannot stretch
     into a thousand-row collection or repeat a visible texture seam. */
}
html[data-appearance] .brand .wordmark {
  opacity: 1; background: none;
}
html[data-appearance] .brand .wordmark > path { fill:var(--brand-ink); }
html[data-appearance] .wordmark-finish { width:100%; height:100%; background:var(--brand-wordmark) center/contain no-repeat; }
html[data-appearance] .nav-ink { background: var(--chart-series); box-shadow: none; }
html[data-appearance] .nav-search { border-radius: var(--r-control); }
/* Keep the themed masthead's geometry constant. Shrinking its padding at the
   scroll sentinel can feed back into keyboard-driven scroll anchoring in a
   short WebKit window, leaving the account target moving between frames. */
html[data-appearance] .nav.is-scrolled { padding-block:11px; }
/* The concept boards reserve raised material for selected controls. Default
   light inputs remain porcelain/paper instead of filling the shell with grey. */
html[data-appearance][data-scheme="light"] :is(.searchbar,.nav-search,.filterbar input:not([type="hidden"]),.filterbar select,.holding-edit-fields input,.holding-edit-fields select) { background:var(--panel); }
/* Keep platform pickers; use one themed closed face for shared product forms.
   Scanner review owns its separate select wrapper/arrow and is not selected. */
html[data-appearance][data-theme][data-scheme] :is(select.finput,select.fselect,
  .holding-edit-fields select,.filterbar select,.editform select,.set-browse-form select,
  .collection-set-index select,.newbinder select,.binder-manager-details-fields select,
  .interest-editor select,.friend-safety select,.vistable select):not([multiple]):not([size]) {
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px; background-repeat:no-repeat;
  padding-inline-end:var(--theme-select-end-padding,32px);
}
/* The editor pairs Condition with Quantity on phones. A matching 28px leading
   inset served no icon and clipped "Near Mint" at 320px in WebKit. */
html[data-appearance] .holding-edit-fields select { --theme-select-end-padding:28px; padding-inline-start:12px; }
@media(max-width:700px) {
  html[data-appearance] .interest-editor select { min-height:44px; }
}
html[data-appearance] .printing-choice { background:var(--panel); }
html[data-appearance] .card-page::before { display: none; }
html[data-appearance] .card-inspector { position: relative; isolation: isolate; }
html[data-appearance] .card-inspector::before {
  content: ''; position: absolute; inset: -35px -30px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 45% 42%,var(--sleeve-light),transparent 68%);
}
html[data-appearance] .card-inspector .card-hero {
  padding: 7px; border: 1px solid var(--sleeve-edge); border-radius: 13px;
  background: var(--sleeve-face); overflow: hidden;
  box-shadow: inset 0 1px 0 var(--sleeve-highlight),inset 0 -2px 0 rgb(0 0 0 / .12),var(--shadow-object);
}
html[data-appearance] .card-inspector .card-hero img {
  /* Explicit inner bounds avoid WebKit resolving 100% height against the
     padded aspect-ratio box and clipping the bottom of the catalogue art. */
  position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px);
  border-radius: 7px; filter: none; opacity: 1; mix-blend-mode: normal;
}
html[data-appearance] .card-inspector .card-hero::after { display: none; }
/* The Designer's reflection belongs to the sleeve edge, never the printed
   artwork. Reuse the inspector's frame-batched pointer coordinates. The mask
   cuts out the entire image aperture, including when the card is rotated. */
html[data-appearance] .card-inspector .card-hero::before {
  content:''; position:absolute; inset:0; padding:6px; border-radius:inherit;
  pointer-events:none; z-index:2; opacity:.55; animation:none;
  background:radial-gradient(ellipse at var(--gx,35%) var(--gy,20%),var(--sleeve-highlight),transparent 68%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  transition:opacity var(--m-move) ease;
}
/* Holo's warm reflection belongs to the sleeve's top edge. The shared aperture
   mask keeps both light sources outside every catalogue pixel. */
html[data-theme="holo-night"] .card-inspector .card-hero::before {
  background-image:radial-gradient(ellipse 65px 18px at var(--gx,35%) 0%,rgb(245 208 111 / .65),transparent 80%),
    radial-gradient(ellipse at var(--gx,35%) var(--gy,20%),var(--sleeve-highlight),transparent 68%);
}
/* Holo Night's translucent sleeve catches a violet desk light at its edge.
   Keep every highlight outside the opaque image aperture. */
html[data-appearance][data-theme="holo-night"] .card-inspector::before {
  inset:-44px -42px -18px;
  background:radial-gradient(ellipse at 38% 45%,rgb(185 138 242 / .40),transparent 67%);
  filter:blur(9px);
}
@media(min-width:901px) {
  /* The concept's violet desk light pools to the left of the acrylic sleeve.
     These layers sit behind the opaque card, never over printed artwork. */
  html[data-appearance][data-theme="holo-night"] main.wrap:has(.card-page) { overflow-x:visible; }
  html[data-appearance][data-theme="holo-night"] .card-inspector::before {
    inset:-56px -64px -28px;
    background:radial-gradient(ellipse 185px 255px at 10% 50%,rgb(156 71 231 / .52),transparent 78%),
      radial-gradient(ellipse at 38% 45%,rgb(185 138 242 / .34),transparent 68%);
    filter:blur(11px);
  }
}
html[data-appearance][data-theme="holo-night"] .card-inspector .card-hero {
  border-color:#B88CE1;
  box-shadow:inset 0 1px 0 #E5C9FF,inset 0 0 0 2px rgb(185 138 242 / .14),
    0 0 0 3px rgb(185 138 242 / .13),0 14px 28px rgb(0 0 0 / .42),
    0 0 24px rgb(185 138 242 / .20);
}
html[data-appearance] .card-inspector.tilting .card-hero {
  box-shadow:inset 0 1px 0 var(--sleeve-highlight),var(--shadow-object);
}
html[data-appearance][data-theme="holo-night"] .card-inspector.tilting .card-hero {
  box-shadow:inset 0 1px 0 #E5C9FF,0 0 0 3px rgb(185 138 242 / .13),
    0 14px 28px rgb(0 0 0 / .42),0 0 24px rgb(185 138 242 / .20);
}
/* The browse grid is the same collector's room as the card inspector. Give
   each thumbnail a small physical case, entirely outside the printed image.
   A static edge on 24 tiles avoids animated layers and preserves art pixels. */
html[data-appearance] .discovery-grid .discovery-art {
  --browse-case-edge:var(--sleeve-edge);
  --browse-case-face:var(--sleeve-face);
  --browse-case-light:var(--sleeve-highlight);
  padding:clamp(2px,.28vw,4px);
  border:1px solid var(--browse-case-edge);
  background:var(--browse-case-face);
  box-shadow:inset 0 1px 0 var(--browse-case-light),var(--shadow-object);
  transition:border-color 160ms ease,box-shadow 160ms ease;
}
html[data-appearance] .discovery-grid .discovery-art img {
  border-radius:5px;
  height:auto;
  aspect-ratio:5 / 7;
}
html[data-appearance] .discovery-grid .discovery-card-link:focus-visible .discovery-art {
  border-color:var(--focus);
  box-shadow:inset 0 1px 0 var(--browse-case-light),var(--shadow-object),0 0 0 2px color-mix(in srgb,var(--focus) 30%,transparent);
}
@media(hover:hover) and (pointer:fine) {
  html[data-appearance] .discovery-grid .discovery-card-link:hover .discovery-art {
    border-color:var(--focus);
    box-shadow:inset 0 1px 0 var(--browse-case-light),var(--shadow-object),0 0 0 2px color-mix(in srgb,var(--focus) 30%,transparent);
  }
}
@media(prefers-reduced-motion:reduce) {
  html[data-appearance] .discovery-grid .discovery-art { transition:none; }
}
@media(forced-colors:active) {
  html[data-appearance] .discovery-grid .discovery-card-link:focus-visible .discovery-art,
  html[data-appearance] .discovery-grid .discovery-card-link:hover .discovery-art {
    border-color:Highlight;
    box-shadow:none;
    transition:none;
  }
}
html[data-appearance][data-theme="prism-atelier"] .discovery-grid .discovery-art {
  --browse-case-edge:var(--focus);
  --browse-case-face:linear-gradient(135deg,var(--action),var(--raised) 18%,var(--panel) 78%,var(--focus));
  --browse-case-light:var(--ink-2);
}
html[data-appearance][data-theme="diamond-archive"] .discovery-grid .discovery-art {
  --browse-case-edge:var(--action);
  --browse-case-face:linear-gradient(135deg,var(--action),var(--raised) 14%,var(--panel) 82%,var(--action));
  --browse-case-light:var(--ink-2);
}
html[data-appearance][data-theme="courtside"] .discovery-grid .discovery-art {
  --browse-case-edge:var(--focus);
  --browse-case-face:linear-gradient(130deg,var(--action),var(--raised) 16%,var(--panel) 84%,var(--chart-series));
  --browse-case-light:var(--ink-2);
}
html[data-appearance][data-theme="floodlight"] .discovery-grid .discovery-art {
  --browse-case-edge:var(--action);
  --browse-case-face:linear-gradient(120deg,var(--action),var(--raised) 18%,var(--panel) 80%,var(--chart-series));
  --browse-case-light:var(--ink-2);
}
html[data-appearance][data-theme="ringside"] .discovery-grid .discovery-art {
  --browse-case-edge:var(--chart-series);
  --browse-case-face:linear-gradient(135deg,var(--action),var(--raised) 15%,var(--panel) 84%,var(--focus));
  --browse-case-light:var(--ink-2);
}
/* Detailed Designer cases are separate geometry behind the intact catalogue
   image. Their inner keyline sits outside the image aperture, including tilt. */
html[data-appearance]:is([data-theme="gallery-day"],[data-theme="diamond-archive"],[data-theme="prism-atelier"]) .card-inspector .card-hero {
  aspect-ratio:300 / 407; padding:0; border-radius:14px;
  background:var(--card-case) center/100% 100% no-repeat,var(--raised);
  box-shadow:var(--shadow-object);
}
html[data-appearance]:is([data-theme="gallery-day"],[data-theme="diamond-archive"],[data-theme="prism-atelier"]) .card-inspector .card-hero img {
  inset:2.95% 4%; width:92%; height:94.1%;
  border-radius:clamp(3px,.4vw,6px); background:var(--panel);
}
html[data-appearance] .card-price-block { border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
html[data-appearance] .printing-choice[aria-current] { background: color-mix(in srgb,var(--chart-series) 8%,var(--panel)); box-shadow: inset 0 1px 0 color-mix(in srgb,var(--ink) 7%,transparent); }
html[data-appearance] .printing-choice-name { font-size:16px; }
html[data-appearance] .printing-choice strong { font-size:24px; }
html[data-appearance] .printing-choice small { font-size:14px; }
html[data-appearance] .card-page-intro { padding: 0; border: 0; }
html[data-appearance] .card-section-links a:first-child { color: var(--ink); box-shadow: inset 0 -2px var(--chart-series); }
html[data-appearance] .card-section-links a:hover { color: var(--chart-series); }
html[data-appearance] :is(.card-page-heading h1,.pf-head h1) { font-family:var(--font-display); font-weight:var(--font-display-weight); }
html[data-theme="gallery-day"] :is(.card-page-heading h1,.pf-head h1) { letter-spacing: -.035em; }
html[data-theme="gallery-day"] .card-price-block { border-color: #C6B6C5; }
html[data-theme="gallery-day"] .printing-choice { border-color:#8D7A92; }
html[data-theme="gallery-day"] .printing-choice[aria-current] { background:var(--raised); border-color:var(--action); box-shadow:inset 0 0 0 1px var(--action); }
html[data-theme="gallery-day"] :is(.chart-card,.appearance-studio) { border-top: 1px solid var(--line-strong); }
html[data-theme="gallery-day"] .card-inspector::after {
  content: ''; position: absolute; top: calc(100% + 72px); left: 5%; width: 90%; height: 190px;
  border: 1px solid rgb(178 139 82 / .12); border-radius: 28px;
  box-shadow: 9px -9px 0 -1px var(--ground),9px -9px 0 0 rgb(178 139 82 / .10),18px -18px 0 -1px var(--ground),18px -18px 0 0 rgb(178 139 82 / .08);
  pointer-events: none; z-index: -1;
}
html[data-theme="clubhouse"] .card-price-block { border-top-color: #8E7955; }
html[data-theme="daybreak-index"] .card-inspector::after {
  content: ''; position: absolute; inset: -9px -9px 26px; pointer-events: none;
  background: linear-gradient(var(--chart-series),var(--chart-series)) left top/14px 1px no-repeat,
    linear-gradient(var(--chart-series),var(--chart-series)) left top/1px 14px no-repeat,
    linear-gradient(var(--action),var(--action)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--action),var(--action)) right bottom/1px 14px no-repeat;
}
html[data-theme="daybreak-index"] .card-section-links a:first-child { box-shadow: inset 0 -2px var(--action); }
html[data-theme="daybreak-index"] .pf-head { border: 0; border-bottom: 1px solid var(--line-strong); padding: 0 0 16px; }
@media(min-width:901px) {
  html[data-theme="holo-night"] {
    --sleeve-light:rgb(185 138 242 / .43);
    --ambient:radial-gradient(ellipse 360px 440px at max(160px,calc(50% - 430px)) 310px,rgb(110 48 170 / .32),transparent 80%);
  }
  html[data-appearance] .card-price-workspace { grid-template-columns: minmax(240px,300px) minmax(0,1fr); column-gap: 32px; }
  html[data-appearance] .card-page-heading h1 { font-size: 38px; }
  html[data-theme="gallery-day"] .card-page-heading h1 { font-size: 40px; }
}
@media(max-width:900px) {
  html[data-theme="holo-night"] { --material: url('/static/themes/holo-night-ground-640.webp'); --material-opacity: .24; }
  html[data-theme="clubhouse"] { --material: url('/static/themes/clubhouse-felt-640.webp'); --material-opacity: .08; }
  html[data-theme="gallery-day"] { --material: url('/static/themes/gallery-day-paper-640.webp'); --material-opacity: .18; }
  html[data-appearance] .card-inspector .card-hero { padding: 3px; border-radius: 7px; }
  html[data-appearance] .card-inspector .card-hero img { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 4px; }
  html[data-appearance] .card-inspector .card-hero::before { padding:2px; }
  html[data-theme="gallery-day"] .card-inspector::after { display: none; }
  html[data-theme="daybreak-index"] .card-inspector::after { inset: -5px; background-size: 8px 1px,1px 8px,8px 1px,1px 8px; }
}
@media(forced-colors:active) {
  html[data-appearance][data-theme][data-scheme] :is(select.finput,select.fselect,
    .holding-edit-fields select,.filterbar select,.editform select,.set-browse-form select,
    .collection-set-index select,.newbinder select,.binder-manager-details-fields select,
    .interest-editor select,.friend-safety select,.vistable select):not([multiple]):not([size]) { appearance:auto; background-image:none; }
  html[data-appearance] body::before,html[data-appearance] .card-inspector::before,html[data-appearance] .card-inspector::after { display: none; }
  html[data-appearance] .card-inspector .card-hero { border:1px solid CanvasText; background:Canvas !important; box-shadow:none !important; }
  html[data-appearance][data-theme="holo-night"] .card-inspector .card-hero { border-color:CanvasText; }
  html[data-appearance] .brand .wordmark { background: none; }
  html[data-appearance] .brand .wordmark > path { fill:CanvasText; }
  html[data-appearance] .mark:has(.mark-finish)::before { background:CanvasText; forced-color-adjust:none; }
  html[data-appearance] .mark-finish { display:none; }
  html[data-appearance] [data-theme-wordmark] { display:none; }
}