/* v62 — dedicated focus/expand behaviour for blog editor sidebar cards.
   Kept separate from blog-editor.css so the future common component can be extracted cleanly. */
.blog-editor-shell .blog-tool-header{
  grid-template-columns:minmax(0,1fr) 34px;
  gap:6px;
  padding-right:10px;
}

.blog-editor-shell .blog-tool-focus{
  width:28px;
  height:28px;
  min-width:28px;
  border:1px solid rgba(231,225,212,.9);
  border-radius:999px;
  background:#FAF7F0;
  color:#6B2CFF;
  font-size:15px;
  box-shadow:none;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease;
}

.blog-editor-shell .blog-tool-focus i{
  font-size:16px;
  line-height:1;
}

.blog-editor-shell .blog-tool-focus:hover,
.blog-editor-shell .blog-tool-focus:focus-visible{
  background:#F1E9FF;
  border-color:#D7C5FF;
  color:#5E23EA;
  box-shadow:0 8px 22px -18px rgba(20,24,60,.5);
  outline:none;
}

.blog-editor-shell .blog-tool-focus:active{transform:scale(.94);}

.blog-editor-shell .blog-tool-card.is-blog-card-focused .blog-tool-focus{
  background:#6B2CFF;
  border-color:#6B2CFF;
  color:#fff;
}

.blog-editor-shell.is-blog-card-expanded{
  position:fixed;
  inset:0;
  z-index:1650;
  background:#FAF7F0;
  padding:18px;
}

.blog-editor-shell.is-blog-card-expanded .blog-editor-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  min-height:calc(100dvh - 36px)!important;
  height:calc(100dvh - 36px)!important;
}

.blog-editor-shell.is-blog-card-expanded .blog-editor-main,
.blog-editor-shell.is-blog-card-expanded .blog-resizer{
  display:none!important;
}

.blog-editor-shell.is-blog-card-expanded .blog-side-panel{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  max-height:none!important;
  overflow:hidden!important;
  padding:0!important;
  background:transparent!important;
  gap:0!important;
}

.blog-editor-shell.is-blog-card-expanded .blog-tool-card{
  display:none!important;
}

.blog-editor-shell.is-blog-card-expanded .blog-tool-card.is-blog-card-focused{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  height:100%!important;
  margin:0!important;
  border-radius:30px!important;
  overflow:hidden!important;
  background:#fff!important;
}

.blog-editor-shell.is-blog-card-expanded .blog-tool-card.is-blog-card-focused .blog-tool-header{
  flex:0 0 auto!important;
  position:sticky!important;
  top:0!important;
  z-index:10!important;
  background:#fff!important;
  border-bottom:1px solid var(--md-outline-soft)!important;
}

.blog-editor-shell.is-blog-card-expanded .blog-tool-card.is-blog-card-focused .blog-tool-trigger{
  border-radius:30px 0 0 0!important;
}

.blog-editor-shell.is-blog-card-expanded .blog-tool-card.is-blog-card-focused .blog-tool-body{
  display:block!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  padding:18px!important;
}

.blog-editor-shell.is-blog-card-expanded .blog-tool-card.is-blog-card-focused[data-accordion-card="annotations"] .blog-tool-body{
  display:flex!important;
  flex-direction:column!important;
}

.blog-editor-shell.is-blog-card-expanded .blog-tool-card.is-blog-card-focused[data-accordion-card="annotations"] .annotation-list{
  max-height:none!important;
  flex:1 1 auto!important;
}

@media(max-width:760px){
  .blog-editor-shell .blog-tool-header{
    grid-template-columns:minmax(0,1fr) 32px;
    padding-right:8px;
  }
  .blog-editor-shell .blog-tool-focus{
    width:27px;
    height:27px;
    min-width:27px;
  }
  .blog-editor-shell .blog-tool-focus i{font-size:15px;}
  .blog-editor-shell.is-blog-card-expanded{padding:8px;}
  .blog-editor-shell.is-blog-card-expanded .blog-editor-layout{
    min-height:calc(100dvh - 16px)!important;
    height:calc(100dvh - 16px)!important;
  }
  .blog-editor-shell.is-blog-card-expanded .blog-tool-card.is-blog-card-focused{
    border-radius:22px!important;
  }
  .blog-editor-shell.is-blog-card-expanded .blog-tool-card.is-blog-card-focused .blog-tool-trigger{
    border-radius:22px 0 0 0!important;
  }
}