/* Compact the active Where and When editor footer without shrinking the heptagram itself. */
.sky-where-when-editor .sky-where-when-heptagram-slot{
  display:grid!important;
  place-items:center!important;
  align-content:start!important;
  row-gap:3px!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0 0 3px!important;
  box-sizing:border-box!important;
}

/* The drawer stylesheet still carries an old 112px editor-preview rule. Restore
   the intended 176px preview and give the square SVG an explicit square box.
   `height:auto` was resolving to the card width (270px) for this generated SVG,
   which created the large blank-looking footer even after its width was reduced. */
.sky-where-when-editor .sky-where-when-heptagram-slot .sky-ph-heptagram{
  display:block!important;
  order:1!important;
  width:176px!important;
  min-width:0!important;
  max-width:min(100%,176px)!important;
  height:176px!important;
  min-height:0!important;
  max-height:176px!important;
  aspect-ratio:1/1!important;
  margin:0 auto!important;
}

/* The draft heptagram itself is the Planetary Hours link. Keep the hit target
   visually quiet so it reads as the chart, not a second text action. */
.sky-where-when-editor .sky-where-when-heptagram-slot .sky-ph-jump{
  display:grid!important;
  place-items:center!important;
  gap:3px!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#191512!important;
  text-decoration:none!important;
  transform:none!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}
.sky-where-when-editor .sky-where-when-heptagram-slot .sky-ph-jump-title{
  order:2!important;
  display:block!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:.38rem .62rem!important;
  border:1px solid rgba(31,27,24,.24)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#211d19!important;
  font:850 .60rem/1 system-ui,sans-serif!important;
  text-align:center!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
/* Match the Cancel button's hover/focus treatment exactly: keep the pill's
   normal border/background and use the same brightness + red focus halo. */
.sky-where-when-editor .sky-where-when-heptagram-slot .sky-ph-jump:hover .sky-ph-jump-title,
.sky-where-when-editor .sky-where-when-heptagram-slot .sky-ph-jump:focus-visible .sky-ph-jump-title{
  filter:brightness(.94)!important;
  outline:3px solid rgba(201,33,30,.18)!important;
  outline-offset:2px!important;
}
.sky-where-when-editor .sky-where-when-heptagram-slot .sky-ph-jump:focus-visible{
  outline:none!important;
}

/* Give the scrolling Where/When body back the space that was being reserved by
   the oversized footer footprint. */
.sky-where-when-editor .sky-where-when-footer{
  gap:4px!important;
  padding:4px 8px 8px!important;
}

/* Preserve the requested roughly 1:2 Cancel/confirm relationship, but bias a
   little more room toward the long confirm label so it stays inside the card. */
.sky-where-when-editor .sky-where-when-footer-actions{
  grid-template-columns:minmax(62px,.78fr) minmax(0,2.22fr)!important;
  gap:5px!important;
}
.sky-where-when-editor .sky-where-when-footer-actions .sky-where-when-button{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:.6rem .48rem!important;
  font-size:.64rem!important;
  line-height:1!important;
}

/* Sky cards are containers and can be ~270px wide even on a wide desktop. Size
   the action row from the card, not from the browser viewport. */
@container (max-width:285px){
  .sky-where-when-editor .sky-where-when-footer-actions{
    grid-template-columns:minmax(58px,.72fr) minmax(0,2.28fr)!important;
    gap:4px!important;
  }
  .sky-where-when-editor .sky-where-when-footer-actions .sky-where-when-button{
    padding:.58rem .34rem!important;
    font-size:.62rem!important;
  }
}


/* Match the confirm action's approximate width without changing the editor's
   existing flex layout or adding another layout column. */
.sky-where-when-editor .sky-where-when-here-now{
  width:74%!important;
  margin-left:auto!important;
  padding:.6rem .48rem!important;
  font-size:.64rem!important;
  line-height:1!important;
}
.sky-where-when-editor .sky-where-when-heptagram-slot .sky-ph-jump-title{
  display:none!important;
}