/* Spec art stays full-size; the selected Hero tree sits inside its top-right corner. */
.spec-token .spec-hero-badges{position:absolute;inset:0;pointer-events:none;}
.spec-token .spec-hero-badges img{position:absolute;box-sizing:border-box;object-fit:cover;border:1px solid #e4c68a;border-radius:3px;background:#0b0e15;box-shadow:0 1px 4px #000b;}
.spec-shelf[data-group^="hero-talents-"].open .spec-pool{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
@media(max-width:1100px){.spec-shelf[data-group^="hero-talents-"].open .spec-pool{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.spec-shelf[data-group^="hero-talents-"].open .spec-pool{grid-template-columns:1fr;}}
/* The heading wrapper is transparent to the existing phone layout. */
.tiermaker-heading { display:contents; }
/* Only desktop source palettes compact; board and phone tokens keep their sizing. */
@media(min-width:721px){
 .spec-shelf.desktop-compact .spec-pool { min-height:0 !important; max-height:var(--tier-palette-height); overflow-y:auto; overflow-x:hidden; padding:8px; gap:6px; }
 .spec-shelf.desktop-compact .spec-pool.desktop-partitioned { display:grid; grid-template-columns:repeat(var(--tier-palette-columns,3),minmax(0,1fr)); }
 .spec-shelf.desktop-compact .spec-token { width:var(--tier-palette-size,48px); height:var(--tier-palette-size,48px); flex-shrink:0; border-radius:4px; box-shadow:0 3px 8px #0006; }
 .spec-shelf.desktop-compact .spec-token > img { border-radius:3px; }
 .spec-shelf.desktop-compact .hero-talent-class-group { padding:4px; border-radius:5px; }
 .spec-shelf.desktop-compact .hero-talent-class-icons { min-height:0; gap:4px; }
 .spec-shelf.desktop-compact .shelf-class-header { font-size:11px; line-height:1.25; padding-bottom:3px; margin-bottom:4px; }
 .spec-shelf.desktop-compact .used-palette-label { min-height:var(--tier-palette-size,48px); }
 /* Base .spec-token is relative. The floating copy must stay in the viewport. */
 .spec-token.tier-touch-ghost.tier-desktop-ghost {
  position:fixed; top:0; left:0; margin:0; z-index:10001;
  width:calc(clamp(62px,7vw,82px) * var(--tier-workbench-scale,1));
  height:calc(clamp(62px,7vw,82px) * var(--tier-workbench-scale,1));
  opacity:1; animation:none; transition:none; pointer-events:none;
 }
}

/* Give desktop palettes enough width to show the spec and its Hero badge. */
@media (min-width:1180px) {
 body:has(.tiermaker-page) { --tier-workbench-scale:1; }
 body:has(.tiermaker-page) .tiermaker-page {
  width:min(1960px,calc(100vw - 48px));
  margin-inline:auto;
  grid-template-columns:clamp(420px,28vw,540px) minmax(0,1fr);
  grid-template-areas:"heading heading" "shelves boards" "seo seo";
 }
 .tiermaker-page .tiermaker-heading {
  display:flex; grid-area:heading; align-items:center;
  flex-wrap:wrap; gap:16px 28px; min-width:0;
 }
 .tiermaker-heading .tiermaker-hero { flex:0 1 auto; min-width:0; }
 .tiermaker-heading .tiermaker-tools {
  flex:1 1 480px; min-width:0; align-items:center;
  flex-direction:row; flex-wrap:wrap; gap:12px 24px;
 }
 .tiermaker-heading .tier-theme-controls { flex-shrink:0; }
 .tiermaker-heading .tier-export-controls { margin-left:0; margin-inline-start:auto; }
}
/* Match the user's 125% reference inside the workbench only. */
@media (min-width:1800px) and (min-aspect-ratio:2/1) {
 body:has(.tiermaker-page) .tiermaker-page {
  width:min(2320px,calc(100vw - 48px));
  grid-template-columns:minmax(560px,0.52fr) minmax(0,1.68fr);
 }
 @supports (zoom:1.25) {
  body:has(.tiermaker-page) { --tier-workbench-scale:1.25; }
  body:has(.tiermaker-page) .tiermaker-page {
   zoom:1.25;
   width:min(2320px,calc((100vw - 48px) / 1.25));
  }
 }
}