/* The pin tutorial: pin Synonym Finder from Chrome's extensions (puzzle) menu, then click its icon to
   open the side panel. Homepage only ("How to pin the extension"); it builds on the shared mock in
   mock.css. */
/* The pin tutorial labels its steps with the things you actually click - the puzzle
   button, the pin, then our own icon - instead of bare numbers. */
.icon-steps { counter-reset: none; }
.icon-steps li::before { display: none; }
.step-icon { flex: none; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; color: var(--color-text-muted); transition: color var(--step-fade, .9s) ease-in-out; }
.step-icon .icon { width: 1.1rem; height: 1.1rem; }
.step-icon img { width: 1.2rem; height: 1.2rem; border-radius: 4px; }
.demo-steps li.active .step-icon { color: var(--color-primary); }

.browser { position: relative; }
.tool { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; color: var(--mk-chrome-icon); transition: background .15s, transform .15s, opacity .25s; }
.tool .icon { width: 1.05rem; height: 1.05rem; }
.tool.press { background: var(--mk-chrome-hover); transform: scale(.9); }
/* Pinning in real Chrome: the icon emerges from the puzzle button and the toolbar opens a
   slot for it to the left of that button. Hidden state = no slot (width/margin collapsed)
   and the icon parked on top of the puzzle; .show animates it out into its own place. */
.tool-ext {
  width: 0; margin-left: -.5rem; opacity: 0; overflow: visible;
  transform: translateX(1.3rem) scale(.3);
  transition: opacity .3s ease, transform .5s cubic-bezier(.2, .8, .3, 1.15),
              width .4s ease, margin-left .4s ease, background .15s;
}
.tool-ext.show { width: 1.6rem; margin-left: 0; opacity: 1; transform: none; }
.tool-ext.show { opacity: 1; transform: none; }
.tool-ext.press { transform: scale(.88); background: var(--mk-chrome-hover); }
.ext-menu {
  position: absolute; top: 4.6rem; right: .6rem; z-index: 4; width: min(14.5rem, calc(100% - 1.2rem)); padding: .5rem;
  background: var(--mk-menu); color: var(--mk-chrome-text); border: 1px solid var(--mk-line); border-radius: 10px; box-shadow: 0 10px 28px var(--mk-shadow);
  opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.ext-menu.show { opacity: 1; transform: none; }
.ext-menu-title { font-size: .75rem; font-weight: 600; color: var(--mk-menu-muted); padding: .2rem .4rem .45rem; }
.ext-menu-row { display: flex; align-items: center; gap: .55rem; padding: .3rem .4rem; border-radius: 8px; font-size: .9rem; }
.ext-menu-row img { border-radius: 5px; }
.pin-btn { margin-left: auto; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 6px; color: var(--mk-menu-muted); transition: color .2s, background .15s, transform .15s; }
.pin-btn .icon { width: 1.05rem; height: 1.05rem; transition: fill .2s; }
.pin-btn.press { background: var(--mk-chrome-hover); transform: scale(.9); }
.pin-btn.pinned { color: var(--mk-pin-active); }
.pin-btn.pinned .icon { fill: currentColor; }

.stage-pin { display: flex; padding: 0; height: 20rem; }
.stage-pin .page-col { flex: 1; min-width: 0; padding: 1.75rem 1.5rem; transition: margin-right .45s ease; }
.stage-pin.sp-open .page-col { margin-right: 38%; }
.sidepanel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 38%; min-width: 11rem; padding: .85rem .75rem;
  background: var(--mk-panel); color: var(--mk-panel-text); border-left: 1px solid var(--mk-panel-border); box-shadow: -8px 0 24px var(--mk-shadow);
  transform: translateX(100%); transition: transform .45s ease;
}
.sidepanel.open { transform: none; }
.sp-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .75rem; font-size: .88rem; }
.sp-head img { border-radius: 5px; }
.sp-actions { margin-left: auto; display: flex; gap: .3rem; }
.sp-icon-btn { width: 1.45rem; height: 1.45rem; display: grid; place-items: center; border: 1px solid var(--mk-panel-border); border-radius: 6px; color: var(--mk-panel-muted); }
.sp-icon-btn .icon { width: .8rem; height: .8rem; }
.sp-search { display: flex; gap: .35rem; }
.sp-input { flex: 1; min-width: 0; height: 1.95rem; display: flex; align-items: center; padding: 0 .55rem; border: 1px solid var(--mk-panel-border); border-radius: 8px; background: var(--mk-panel-field); font-weight: 600; font-size: .85rem; }
.sp-btn { flex: none; display: flex; align-items: center; gap: .3rem; height: 1.95rem; padding: 0 .55rem; border-radius: 8px; background: var(--mk-accent); color: var(--mk-accent-text); font-size: .8rem; font-weight: 600; }
.sp-btn .icon { width: .85rem; height: .85rem; }
.sp-recent-title { margin: .5rem 0 .35rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--mk-panel-muted); }
.sp-recent { list-style: none; margin: 0; padding: 0; }
.sp-recent li { padding: .4rem .1rem; border-bottom: 1px solid var(--mk-panel-divider); font-size: .9rem; color: var(--mk-panel-text); }
@media (max-width: 45rem) {
  .stage-pin { height: 24rem; }
  .stage-pin.sp-open .page-col { margin-right: 52%; }
  .sidepanel { width: 52%; min-width: 0; }
}

/* Reduced motion: the JS shows a static final frame, but the mock's own CSS transitions would still
   animate into it (the pinned icon flying out of the puzzle, the side panel sliding in). Cut them. */
@media (prefers-reduced-motion: reduce) {
  .tool, .tool-ext, .ext-menu, .pin-btn, .sidepanel, .stage-pin .page-col { transition: none !important; }
}