/* JF4191 Memory, Life date sort and year/month picker refinements. */
.archive-month-picker>summary{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.feed-sort-links{
  display:grid;
  gap:4px;
  min-width:176px;
}
.feed-sort-links>span{
  color:var(--muted);
  font-size:.7rem;
}
.feed-sort-links>div{
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:3px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.feed-sort-links a{
  padding:7px 9px;
  border-radius:9px;
  color:var(--muted);
  font-size:.75rem;
  font-weight:800;
  text-align:center;
  white-space:nowrap;
}
.feed-sort-links a.active{
  background:var(--ink);
  color:#fff;
}

@media(max-width:760px){
  .feed-sort-links{
    width:100%;
    min-width:0;
  }
  .memory-archive-jump{
    width:calc(100% - 12px)!important;
    max-width:calc(100vw - 12px)!important;
  }
  .memory-archive-jump-inner{
    width:100%;
    min-width:0;
    overflow:visible!important;
    box-sizing:border-box;
  }
  .memory-archive-jump-form{
    position:relative;
    width:100%;
    min-width:0;
    display:grid!important;
    grid-template-columns:minmax(88px,.9fr) minmax(116px,1.2fr) auto auto;
    align-items:center!important;
    gap:5px;
    overflow:visible!important;
    box-sizing:border-box;
  }
  .memory-archive-jump-form>label{
    min-width:0;
    width:100%;
  }
  .memory-archive-jump-form select{
    width:100%!important;
    min-width:0!important;
  }
  .archive-month-picker{
    position:static!important;
    min-width:0;
    width:100%;
  }
  .archive-month-picker>summary{
    width:100%;
    min-width:0!important;
    max-width:none;
    box-sizing:border-box;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .archive-month-picker>div{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:calc(100% + 6px)!important;
    width:auto!important;
    max-width:100%!important;
    box-sizing:border-box;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:520px){
  .memory-archive-jump-form{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .memory-archive-jump-form button,
  .memory-archive-latest{
    width:100%;
    box-sizing:border-box;
    text-align:center;
  }
}

@media(max-width:360px){
  .archive-month-picker>div{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}