/* M20: readable, non-reflowing tool guide. Icons remain original licensed assets. */
.tool-guide-panel{
  top:auto;
  bottom:calc(100% + 6px);
  gap:8px;
  max-height:min(340px,calc(100svh - 150px));
  padding:12px;
  border-radius:18px;
  font-size:12px;
  line-height:1.5;
}
.tool-guide-row{
  grid-template-columns:36px minmax(0,1fr);
  align-items:start;
  gap:10px;
  min-height:52px;
  padding:8px 9px;
  border:1px solid rgba(116,84,128,.08);
  border-radius:12px;
  background:linear-gradient(145deg,#fff,#fff9fc);
}
.tool-guide-row>img{
  display:block;
  width:36px;
  height:36px;
  padding:5px;
  border:1px solid rgba(116,84,128,.09);
  border-radius:10px;
  background:#fff1f6;
  object-fit:contain;
}
.tool-guide-copy{min-width:0}
.tool-guide-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:20px;
  margin-bottom:3px;
}
.tool-guide-row .tool-guide-title>b{
  min-width:0;
  color:#55445f;
  font-size:13px;
  font-weight:800;
  line-height:20px;
  white-space:nowrap;
}
.tool-guide-usage{
  flex:0 0 auto;
  padding:1px 6px;
  border-radius:6px;
  color:#88637b;
  background:#f7edf3;
  font-size:10px;
  font-weight:700;
  line-height:16px;
  white-space:nowrap;
}
.tool-guide-row .tool-guide-copy>span{
  display:block;
  color:#75647e;
  font-size:11.5px;
  line-height:1.5;
}
.tool-guide-unlocks{
  margin:1px 2px 0;
  padding:8px 2px 0;
  color:#827186;
  font-size:11px;
  line-height:1.55;
}
@media(max-width:620px){
  .tool-guide-panel{gap:7px;padding:10px}
  .tool-guide-row{grid-template-columns:34px minmax(0,1fr);gap:9px;padding:8px}
  .tool-guide-row>img{width:34px;height:34px;padding:5px}
  .tool-guide-row .tool-guide-title>b{font-size:12.5px}
  .tool-guide-row .tool-guide-copy>span{font-size:11.5px}
}
@media(prefers-reduced-motion:no-preference){
  .tool-guide-panel:not([hidden]){animation:tool-guide-in .16s ease-out}
  @keyframes tool-guide-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
}