/* Shop guidance floats in spare header space. It never reserves shop height. */
#story-guide[data-shop=true] {
  z-index:46;top:calc(var(--ui-viewport-top,0px) + var(--ui-safe-top,0px) + var(--trading-gutter));
  left:auto;right:calc(var(--ui-safe-right,0px) + var(--trading-gutter));translate:none;
  width:min(430px,calc(100vw - 32px));max-width:none;
  height:auto;min-height:0;max-height:calc(var(--ui-viewport-height,100dvh) - 32px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:30px auto;
  padding:10px 18px 12px;gap:2px 10px;
}
#story-guide[data-shop=true] header {display:flex;grid-column:1/-1;height:30px;min-height:30px}
#story-guide[data-shop=true] .story-guide-copy {grid-column:1;grid-row:2;min-width:0;min-height:0;overflow:auto;max-height:40dvh}
#story-guide[data-shop=true] footer {grid-column:2;grid-row:2;align-self:center}
#story-guide[data-shop=true][data-collapsed=true] {grid-template-rows:30px;padding:8px 16px;min-height:46px;width:240px}
#story-guide[data-shop=true][data-collapsed=true] :is(.story-guide-copy,footer) {display:none}
#story-guide[data-shop=true] [data-guide=collapse] {width:32px;height:32px;min-width:32px}
#story-guide[data-shop=true] #story-guide-primary {max-width:110px;white-space:normal}
@media(orientation:landscape) and (max-height:700px),(orientation:landscape) and (max-width:1050px) {
  #story-guide[data-shop=true] {width:min(380px,48vw);top:calc(var(--ui-safe-top,0px) + 12px)}
  #story-guide[data-shop=true][data-collapsed=false] {right:calc(var(--ui-safe-right,0px) + var(--trading-gutter) + 76px)}
  #story-guide[data-shop=true][data-collapsed=true] {width:min(260px,40vw);min-height:44px;padding:6px 14px}
}
@media(orientation:portrait) and (max-width:1050px) {
  #story-guide[data-shop=true] {top:calc(var(--ui-safe-top,0px) + 72px);width:min(430px,calc(100vw - 32px));right:16px}
  #story-guide[data-shop=true][data-collapsed=true] {
    top:calc(var(--ui-safe-top,0px) + var(--trading-gutter) + 4px);right:calc(var(--ui-safe-right,0px) + var(--trading-gutter) + 56px);
    width:82px;min-height:44px;padding:6px 8px;grid-template-columns:minmax(0,1fr);
  }
  #story-guide[data-shop=true][data-collapsed=true] :is(.story-guide-avatar,[data-guide=journal]) {display:none}
  #story-guide[data-shop=true][data-collapsed=true] .story-guide-kicker {font-size:0}
  #story-guide[data-shop=true][data-collapsed=true] .story-guide-kicker b {font-size:12px;white-space:nowrap;margin:0}
}