/* Material is the ground; original vector objects occupy the outer margins.
   No scene is a screenshot, a tiled board, or a layer above collecting data. */
html[data-appearance], .appearance-option { --environment: none; --environment-size:520px 740px; --daylight: none; }
html[data-theme="holo-night"], .appearance-option[data-pack="holo-night"] { --environment:url('/static/themes/holo-night-environment.svg'); }
html[data-theme="clubhouse"], .appearance-option[data-pack="clubhouse"] { --environment:url('/static/themes/clubhouse-environment.svg'); }
html[data-theme="gallery-day"], .appearance-option[data-pack="gallery-day"] {
  --environment:url('/static/themes/gallery-day-environment.svg');
  --environment-size:520px 900px;
  --daylight:radial-gradient(ellipse 880px 700px at 20% 100px,rgb(255 252 247 / .38),transparent 90%);
}
html[data-theme="daybreak-index"], .appearance-option[data-pack="daybreak-index"] {
  --environment:url('/static/themes/daybreak-tray-640.webp');
  --environment-size:520px 520px;
  --ambient:radial-gradient(ellipse 600px 500px at 12% 200px,#FAFCFA,transparent 85%);
  --daylight:linear-gradient(123deg,transparent 5%,rgb(117 145 124 / .065) 5.3%,transparent 18%,transparent 23%,rgb(117 145 124 / .055) 23.3%,transparent 36%);
}
html[data-appearance] body { background:var(--daylight) left top/100% 900px no-repeat,var(--ambient) left top/100% 900px no-repeat,var(--ground); }
html[data-appearance] body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--environment) max(0px,calc(50% - 680px)) 80px/var(--environment-size) no-repeat;
}
html[data-theme="daybreak-index"] body::after {
  /* The ceramic object belongs in the outside margin, never over a footer or
     under the first card column. Narrow screens retain the ceramic ground. */
  right:auto; width:clamp(0px,calc((100vw - 1240px)/2 - 16px),320px);
  background-position:center 360px; background-size:100% auto;
}
@media(max-width:1599px) { html[data-theme="daybreak-index"] body::after { display:none; } }
/* Replace the earlier three empty boxes with the authored sleeve contour. */
html[data-theme="gallery-day"] .card-inspector::after { display:none; }
html[data-appearance] .appearance-specimen::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--environment) left bottom/70% auto no-repeat;
}
/* Collection rooms is a destination, not the name of the viewer's theme.
   Reuse the selected material in a small separate window; opaque text never
   depends on the image for contrast. No additional asset or animated shine. */
@media(min-width:1520px) {
  html[data-appearance] .nav-editorial[data-appearance-editorial] {
    height:44px; padding-inline:12px; background:var(--panel);
    border-color:var(--line-strong); box-shadow:inset 3px 0 var(--brand-rule);
  }
  html[data-appearance] .nav-editorial[data-appearance-editorial]::before {
    content:''; position:absolute; inset:0 0 0 auto; width:36px;
    background:var(--material) center/160px auto no-repeat,var(--raised);
    opacity:var(--material-opacity); pointer-events:none;
  }
  html[data-appearance] .nav-editorial[data-appearance-editorial]::after {
    content:''; display:block; inset:10px 9px auto auto; width:14px; height:22px;
    border:1px solid var(--sleeve-edge); border-radius:3px;
    background:var(--sleeve-face); transform:rotate(9deg);
    box-shadow:-3px 2px 0 var(--raised),-4px 2px 0 var(--sleeve-edge);
    pointer-events:none;
  }
  html[data-appearance] .nav-editorial[data-appearance-editorial] span {
    color:var(--ink-2); font:500 12px/1.3 var(--font); letter-spacing:.04em;
  }
  html[data-appearance] .nav-editorial[data-appearance-editorial] strong {
    color:var(--ink); font:600 14px/1.3 var(--font); margin-top:2px;
  }
  html[data-appearance] .nav-editorial[data-appearance-editorial]:hover { border-color:var(--chart-series); }
  html[data-appearance] .nav-editorial[data-appearance-editorial]:focus-visible { outline-color:var(--focus); }
}
@media(forced-colors:active) {
  html[data-appearance] .nav-editorial[data-appearance-editorial]::before,
  html[data-appearance] .nav-editorial[data-appearance-editorial]::after { display:none; }
}
/* Home and Explore used translucent violet treatments from the earlier shell.
   Their collecting surfaces need the same opaque material as prices. */
html[data-appearance] :is(.home-panel,.home-section,.home-value-object,.home-chase-object,.home-actions a,.home-release-grid>a,.home-mover-grid>a,.explore-paths a) {
  background:var(--panel); border-color:var(--line); color:var(--ink); box-shadow:var(--shadow);
}
html[data-appearance] :is(.home-value-object,.home-chase-object) { border-top-color:var(--brand-rule); }
html[data-appearance] .home-value-object::before { display:none; }
html[data-appearance] .home-actions .home-action-primary { background:var(--raised); border-color:var(--line-strong); }
html[data-appearance] :is(.home-actions a,.explore-paths a):hover { background:var(--raised); border-color:var(--chart-series); }
html[data-appearance] :is(.home-kicker,.explore-kicker,.explore-paths span,.home-chase-category) { color:var(--ink-2); font:600 12px/1.5 var(--font); letter-spacing:.06em; }
html[data-appearance] :is(.home-actions a small,.home-chase-object>small,.home-snapshot dd,.home-release-grid small,.home-release-grid time,.home-mover-grid small) { font-size:12px; }
html[data-appearance] :is(.home-command>div>p,.explore-intro p) { font-size:16px; }
html[data-appearance] :is(.home-panel>header>a,.home-section>header>a,.explore-section>h2>a,.home-panel-actions a) { display:inline-flex; align-items:center; min-height:44px; font-size:14px; white-space:normal; }
html[data-appearance] .home-chase-track { background:var(--raised); }
html[data-appearance] .home-chase-track i { background:var(--chart-series); }
html[data-appearance] .home-snapshot dt { font-family:var(--font); font-variant-numeric:tabular-nums; }
html[data-appearance] .explore-view .stat .k { font-size:12px; }
/* The illustrated desktop margins disappear on a phone. Material and light
   remain, without placing a miniature room behind the dense collecting UI. */
@media(max-width:900px) {
  html[data-theme="daybreak-index"] { --material:url('/static/themes/daybreak-ceramic-640.webp'); --material-opacity:.28; }
  html[data-appearance] body::after { display:none; }
  html[data-appearance] body { background-size:100% 640px,100% 640px,auto; }
}
@media(forced-colors:active),print {
  html[data-appearance] body::before,html[data-appearance] body::after,
  html[data-appearance] .appearance-specimen::after { display:none; }
  html[data-appearance] body { background:Canvas; }
}