/* color-layout.css — PREVIEW ONLY. Portrait Color mode: canvas owns the screen, one scrolling swatch row. */
@media (orientation:portrait){
 #color.active{display:flex!important;flex-direction:column!important}
 #color .stage{order:1;flex:1 1 0!important;height:auto!important;min-height:0!important;align-items:center!important;justify-content:center!important;padding:4px 6px!important}
 #color .bar.tools{order:2;flex:none!important;margin:0!important;padding:4px 8px!important;gap:8px!important;background:none!important;border-radius:0!important;align-items:center;justify-content:center}
 #color .bar.tools .ib{width:52px!important;height:52px!important;border-radius:16px!important}
 #color #pal.pal{order:3;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;grid-template-columns:none!important;justify-content:flex-start!important;align-items:center;
  --sw:52px!important;gap:10px!important;row-gap:0!important;padding:10px 18px calc(8px + env(safe-area-inset-bottom))!important;
  overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;touch-action:pan-x;
  background:rgba(255,248,240,.85)!important;border-radius:22px 22px 0 0;flex:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 22px),transparent)}
 #color #pal.pal::-webkit-scrollbar{display:none}
 #color #pal .sw{flex:0 0 var(--sw)!important;width:var(--sw)!important;height:var(--sw)!important;scroll-snap-align:center}
 #color #pal .sw.on{transform:scale(1.14);box-shadow:0 0 0 3px #2b2240,0 4px 10px #2b224055!important}
}